/* --------------------------------------------------------------------------------
form
-------------------------------------------------------------------------------- */

input:where([type=button], [type=submit]),
button {
	width: 280px;
	height: 50px;
	border-radius: 25px;
}



/* --------------------------------------------------------------------------------
misc
-------------------------------------------------------------------------------- */

br.small {
	display: inline;
}
br.large {
	display: none;
}
img.small {
	display: block;
}
img.large {
	display: none;
}



/* --------------------------------------------------------------------------------
page
-------------------------------------------------------------------------------- */

div#page {
	padding-top: 60px;
}
div#cookie-consent div.text {
	width: auto;
	padding: 20px 30px 80px 30px;
}
div#cookie-consent div.text p:where(.description, .button) {
	margin-right: 0px;
}
div#cookie-consent div.text p.description {
	width: auto;
	font-size: 0.875rem;
	line-height: 1.5rem;
}
div#cookie-consent div.text p:where(.button, .detail) {
	position: absolute;
}
div#cookie-consent div.text p.button {
	left: 30px;
	bottom: 20px;
}
div#cookie-consent div.text p.detail {
	left: 230px;
	bottom: 25px;
}
div.sns ul {
	justify-content: center;
}
p.button-default :where(a, span) {
	width: 280px;
	height: 50px;
	border-radius: 25px;
}



/* --------------------------------------------------------------------------------
header
-------------------------------------------------------------------------------- */

header#header {
	position: relative;
	width: auto;
	height: auto;
	left: auto;
	top: auto;
	background-color: transparent;
}
body.admin-bar header#header {
	top: auto;
}
header#header :where(*#logo, p#button-menu, div#menu) {
	position: fixed;
}
header#header *#logo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	height: 60px;
	left: 0px;
	top: 0px;
	z-index: 20;
	padding-left: 20px;
	background-color: #021b2b;
}
header#header *#logo img {
	width: calc(307px * 0.75);
}
header#header nav#navi {
	position: static;
	right: auto;
	top: auto;
}
header#header p#button-menu {
	width: 60px;
	height: 60px;
	right: 0px;
	top: 0px;
	z-index: 30;
	cursor: pointer;
}
header#header p#button-menu i {
	display: block;
	position: absolute;
	width: 28px;
	height: 0px;
	left: calc(50% - 14px);
	top: calc(50% - 0.5px);
	border-bottom: 1px solid #ffffff;
	transition: 0.25s all ease;
}
header#header p#button-menu i:nth-child(1) {
	transform: translateY(-8px);
}
header#header p#button-menu i:nth-child(2) {
	transform: translateY(8px);
}
div.menu-header header#header p#button-menu i:nth-child(-n+3) {
	width: 0px;
	left: 50%;
	opacity: 0;
	transform: translateY(0px);
}
div.menu-header header#header p#button-menu i:nth-child(4) {
	transform: rotate(45deg);
}
div.menu-header header#header p#button-menu i:nth-child(5) {
	transform: rotate(-45deg);
}
header#header div#menu {
	width: 100%;
	height: 100%;
	right: 0px;
	top: 0px;
	overflow: auto;
	z-index: 10;
	background-color: #021b2b;
	transform: translateX(100%);
	transition: 0.375s transform ease;
	-webkit-overflow-scrolling: touch;
}
div.menu-header header#header div#menu {
	transform: translateX(0%);
}
header#header div#menu::-webkit-scrollbar {
	display: none;
}
header#header div#menu div.inner-menu {
	margin: 0px auto;
	padding: 100px 30px 40px 30px;
}
header#header nav#navi,
header#header :where(p.button-contact, div.sns) {
	margin-bottom: 40px;
}
header#header nav#navi div.list {
	justify-content: space-between;
	position: relative;
}
header#header nav#navi div.list div.row:first-child {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
}
header#header nav#navi div.list div.row:not(:last-child) {
	width: calc(50% - 20px);
	margin-bottom: 20px;
}
header#header nav#navi div.list div.row:nth-child(2) {
	margin-top: 50px;
}
header#header nav#navi div.list div.row:last-child {
	width: 100%;
}
header#header nav#navi div.list div.row:not(:last-child),
header#header nav#navi ul li:not(:last-child) {
	margin-right: 0px;
}
header#header nav#navi div.list div.row > ul {
	display: block;
}
header#header nav#navi div.list div.row > ul > li:not(:last-child) {
	margin-bottom: 20px;
}
header#header nav#navi div.list div.row > ul li ul {
	display: block;
}
header#header nav#navi div.list div.row > ul li a {
	display: inline-block;
}
header#header nav#navi div.list div.row > ul > li > a {
	font-size: 1.125rem;
}
header#header nav#navi div.list div.row > ul > li ul {
	padding-top: 5px;
}
header#header nav#navi div.list div.row > ul > li ul li {
	position: relative;
	font-size: 0.875rem;
	line-height: 1.5rem;
	padding-left: 20px;
}
header#header nav#navi div.list div.row > ul > li ul li:not(:last-child) {
	margin-bottom: 5px;
}
header#header nav#navi div.list div.row > ul > li ul li::before {
	position: absolute;
	width: 6px;
	height: 0px;
	left: 5px;
	top: 12px;
	border-bottom: 1px solid #ffffff;
	content: "";
}
header#header nav#navi div.list div.row:last-child > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: -20px;
}
header#header nav#navi div.list div.row:last-child > ul > li {
	width: calc(50% - 20px);
}
header#header nav#navi div.list div.row:last-child > ul > li.news {
	order: 1;
}
header#header :where(p.button-contact, div.sns, div.button-wrapper) {
	display: block;
}
header#header p.button-contact a,
header#header div.button-wrapper p.button-default a {
	width: 100%;
}
header#header div.button-wrapper p.button-default:not(:last-child) {
	margin-bottom: 10px;
}
header#header div.button-wrapper p.button-default a {
	border: 1px solid #ffffff;
	border-radius: 0px;
}



/* --------------------------------------------------------------------------------
breadcrumb
-------------------------------------------------------------------------------- */

div#breadcrumb {
	display: none;
}



/* --------------------------------------------------------------------------------
cover
-------------------------------------------------------------------------------- */

div#cover {
	height: calc(100svh - 60px);
	margin-bottom: 80px;
}
body.admin-bar div#cover {
	height: calc(100svh - 60px);
}
div#cover div.text {
	padding-bottom: 60px;
}
div#cover div.text h1 img {
	width: 274px;
}
div#cover div.slide-large {
	display: none;
}
div#cover div.slide-small {
	display: block;
}
div#cover div.slide-small div.image {
	height: 50%;
}
div#cover div.slide-small div.image:nth-child(1) {
	top: 0px;
}
div#cover div.slide-small div.image:nth-child(1) p.row:nth-child(3) img {
	object-position: 12.5% center;
}
div#cover div.slide-small div.image:nth-child(2) {
	bottom: 0px;
}



/* --------------------------------------------------------------------------------
title
-------------------------------------------------------------------------------- */

div#title {
	padding-bottom: 40px;
}
div#title div.text {
	width: auto;
	padding: 0px 30px;
}
div#title div.text p.sub {
	font-size: 0.875rem;
	line-height: 1.5rem;
}
div#title div.text h1 {
	font-size: 1.5rem;
	line-height: 2rem;
}



/* --------------------------------------------------------------------------------
main
-------------------------------------------------------------------------------- */

main section div.inner-section {
	width: auto;
	padding: 80px 30px;
}
main section div.inner-section:has(aside#sidebar) {
	display: block;
}
main section div.content {
	width: auto;
}
main section aside#sidebar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: auto;
	right: auto;
	top: auto;
	margin-bottom: 60px;
}
main section aside#sidebar div.block {
	width: calc(50% - 5px);
}
main section aside#sidebar div.block:not(:last-child) {
	margin-bottom: 0px;
}
main section aside#sidebar div.block p.label {
	display: none;
}
main section aside#sidebar div.block ul {
	display: none;
}
main section aside#sidebar div.block select {
	display: block;
	width: 100%;
	border: 1px solid #e6e8ea;
	background-color: transparent;
}
main nav#navi-small {
	display: block;
	position: relative;
	height: 100px;
	z-index: 10;
	margin: 0px -30px 25px -30px;
}
main nav#navi-small div.inner-navi-small {
	border-bottom: 1px solid transparent;
	padding: 15px 30px;
	background-color: #ffffff;
	transition: 0.25s border-color ease, 0.25s transform ease;
}
div.navi-small main nav#navi-small div.inner-navi-small {
	position: fixed;
	width: 100%;
	left: 0px;
	top: 60px;
	border-color: #e6e8ea;
	transform: translateY(-100px);
}
div.navi-small.scroll-up main nav#navi-small div.inner-navi-small {
	transform: translateY(0px);
}
main nav#navi-small ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0px -20px -10px 0px;
}
main nav#navi-small ul li {
	width: calc(50% - 20px);
	margin: 0px 20px 10px 0px;
}
main nav#navi-small ul li a {
	display: block;
	position: relative;
	padding-left: 30px;
}
main nav#navi-small ul li a i.arrow {
	position: absolute;
	width: 25px;
	height: 25px;
	left: 0px;
	top: 3px;
	background-color: #f2f4f4;
	border-radius: 50%;
	transition: 0.25s background-color ease;
}
main nav#navi-small ul li a:hover i.arrow {
	background-color: #021b2b;
}
main nav#navi-small ul li a i.arrow::before {
	width: 5px;
	height: 5px;
	transform: translate(1px, 0px) rotate(45deg);
}
main p#banner-special-site {
	padding: 0px 30px;
}
main div#banner-special-site img {
	width: auto;
}
main h2.headline {
	font-size: 1.5rem;
	line-height: 2rem;
	margin-bottom: 20px;
}
main :where(div#pager, nav#navi-article) {
	margin-top: 60px;
}
main div#pager :where(span.current, a) {
	width: 40px;
	height: 40px;
}

/* home
-------------------------------------------------------------------------------- */

main section#home-news header h2 {
	font-size: 1.75rem;
	line-height: 2.25rem;
}
main section#home-news div.column {
	display: block;
}
main section#home-news div.column div:where(.left, .right) {
	width: auto;
}
main section#home-news div.column div.left {
	margin-bottom: 40px;
}
main section#home-news div.column div:where(.left, .right) h3.headline {
	font-size: 1.25rem;
}
main section#home-about a {
	height: 560px;
}
main section#home-about div.text h2 {
	font-size: 1.5rem;
}
main section#home-about div.text h2 span:nth-child(4) {
	margin-left: 60px;
}
main section#home-about div.text h2.large {
	display: none;
}
main section#home-about div.text h2.small {
	display: block;
}
main section#home-about div.text p.button-default {
	margin-left: 80px;
}
main section#home-about div.text p.button-default span {
	width: 220px;
}
main section#home-menu div.inner-section {
	padding: 80px 30px;
}
main section#home-menu div.list {
	display: block;
}
main section#home-menu div.list div.row {
	width: auto;
}
main section#home-menu div.list div.row:not(:last-child) {
	margin-bottom: 40px;
}
main section#home-menu div.list div.row div.text h3 {
	font-size: 1.5rem;
	line-height: 2rem;
	margin-bottom: 5px;
}
main section#home-menu div.list div.row div.text p.arrow {
	display: none;
}
main section#home-story div.inner-section {
	padding-top: 60px;
}
main section#home-story div.text {
	text-align: center;
	margin-bottom: 60px;
}
main section#home-story div.text h2 {
	text-indent: 0.175em;
	font-size: 1.5rem;
	line-height: 2.5rem;
	margin-bottom: 30px;
}
main section#home-story div.text p.button-default {
	justify-content: center;	
	margin-top: 0px;
}
@keyframes home-story {
	0% { transform: translateX(0px); }
	100% { transform: translateX(calc(-2415px * 0.5)); }
}
main section#home-story div.image p.row {
	height: 120px;
}
main section#home-misc div.inner-section {
	padding-top: 80px;
}
main section#home-misc div.list {
	display: block;
	margin: 0px;
}
main section#home-misc div.list div.row {
	margin: 0px;
}
main section#home-misc div.list div.row:not(:last-child) {
	margin-bottom: 20px;
}
main section#home-misc div.list div.row-recruit,
main section#home-misc div.list div:where(.row-brand, .row-store) {
	width: auto;
	height: 180px;
}
main section#home-misc div.list div.row-blog {
	width: 220px;
	height: 220px;
	margin-left: auto;
	margin-right: auto;
}
main section#home-misc div.list div.row-blog a {
	transition: 1s transform ease-in-out;
}
main section#home-misc div.list div.row:not(.row-blog) div.text {
	padding: 0px 30px;
}
main section#home-misc div.list div.row:not(.row-blog) div.text p.logo {
	margin-bottom: 5px;
}
main section#home-misc div.list div.row-brand div.text p.logo img {
	width: calc(307px * 0.875 * 0.75);
}
main section#home-misc div.list div.row-store div.text p.logo img {
	width: calc(310px * 0.75);
}
main section#home-misc div.list div.row:not(.row-blog) div.text h2 {
	font-size: 1.5rem;
	line-height: 2rem;
}
main section#home-misc div.list div.row-blog div.text p.logo {
	margin-bottom: 10px;
}
main section#home-misc div.list div.row-blog div.text p.logo img {
	width: calc(230px * 0.75);
}
main section#home-misc div.list div.row-blog div.text p.description {
	font-size: 0.875rem;
	line-height: 1.5rem;
}

/* about
-------------------------------------------------------------------------------- */

main section#about div.inner-section {
	padding: 0px 30px 80px 30px;
}
main section#about div.list div.row {
	display: block;
}
main section#about div.list div.row:not(:last-child) {
	margin-bottom: 80px;
}
main section#about div.list div.row:nth-child(2n+1) {
	margin-right: 0px;
}
main section#about div.list div.row:nth-child(2n) {
	margin-left:  0px;
}
main section#about div.list div.row::before {
	bottom: 0px;
}
main section#about div.list div.row:nth-child(2n+1)::before {
	right: -30px;
}
main section#about div.list div.row:nth-child(2n)::before {
	left: -30px;
}
main section#about div.list div.row p.image {
	width: calc(100% + 30px);
	height: auto;
	margin-left: -30px;
}
main section#about div.list div.row p.image.fade-slide-left {
	transform: translateX(-40px);
}
main section#about div.list div.row p.image.fade-slide-left.active {
	transform: translateX(0px);
}
main section#about div.list div.row div.text {
	width: auto;
	margin-top: -20px;
	padding-bottom: 40px;
}
main section#about div.list div.row div.text h2 {
	font-size: 1.5rem;
}
main section#about div.list div.row div.text h2 span:not(:last-child) {
	margin-bottom: 5px;
}

/* company
-------------------------------------------------------------------------------- */

main section#company aside#sidebar {
	display: none;
}
main section#company div.inner-section {
	padding-top: 25px;
}
main section#company div.block:not(:last-child) {
	margin-bottom: 60px;
}
main section#company div#outline div.list div.row {
	display: block;
	padding-left: 0px;
}
main section#company div#outline div.list div.row p.label {
	width: auto;
}
main section#company div#outline div.list div.row p.body {
	width: auto;
}
main section#company div#brand div.list {
	display: block;
	margin: 0px 0px 40px 0px;
}
main section#company div#brand div.list p.row {
	width: auto;
	margin: 0px;
}
main section#company div#brand div.list p.row:not(:last-child) {
	margin-bottom: 10px;
}
main section#company div#brand div.list p.row a {
	height: 120px;
}
main section#company div#brand div.list p.row img {
	width: calc(245px * 0.875);
}
main section#company div#history div.list div.row {
	padding-bottom: 20px;
}
main section#company div#history div.list div.row::before {
	left: 69.5px;
	top: 12px;
}
main section#company div#history div.list div.row::after {
	left: 65px;
	top: 12px;
}
main section#company div#history div.list div.row p.label span.main {
	width: 90px;
	font-size: 1.5rem;
	line-height: 2rem;
}
main section#company div#history div.list div.row p.label span.sub {
	width: calc(100% - 90px);
}
main section#company div#history div.list div.row p.body {
	padding-left: 90px;
}
main section#company div#history div.list-02 {
	visibility: hidden;
	height: 0px;
	overflow: hidden;
	margin-bottom: 40px;
}
main section#company div#history.open div.list-02 {
	visibility: visible;
	margin-bottom: 0px;
}
main section#company div#history p.button-more {
	display: flex;
}
main section#company div#history.open p.button-more {
	display: none;
}
main section#company div#history p.button-more span {
	border: 1px solid #021b2b;
}

/* network
-------------------------------------------------------------------------------- */

main section#network div.inner-section {
	padding-top: 0px;
}
main section#network div.diagram {
	margin: 0px -30px 25px -30px;
}
main section#network div.diagram ul,
main section#network div.diagram ul li {
	display: flex;
	flex-wrap: wrap;
}
main section#network div.diagram ul {
	left: 10px;
	bottom: 10px;
}
main section#network div.diagram ul li {
	font-size: 0.75rem;
	line-height: 0.75rem;
}
main section#network div.diagram ul li::before {
	display: block;
	width: 35px;
	height: 10px;
}
main section#network div.block:not(:last-child) {
	margin-bottom: 60px;
}
main section#network div.block div.list {
	display: block;
	margin: 0px;
}
main section#network div.block div.list div.row {
	width: auto;
	margin: 0px;
}
main section#network div.block div.list div.row:not(:last-child) {
	margin-bottom: 40px;
}
main section#network div.block div.list div.row h3 {
	font-size: 1.125rem;
}

/* story
-------------------------------------------------------------------------------- */

main section#story div.inner-section {
	padding: 0px 30px 80px 30px;
}
main section#story header {
	padding: 30px 0px;
}
main section#story header div.text h2 {
	font-size: 2rem;
	line-height: 2.5rem;
	margin-bottom: 10px;
}
main section#story header div.text p.description {
	font-size: 1rem;
}
main section#story div.list {
	margin-top: 0px;
}
main section#story div.list div.row {
	display: block;
	padding: 0px;
}
main section#story div.list div.row:first-child {
	padding-top: 0px;
}
main section#story div.list div.row:not(:first-child) {
	margin-top: 0px;
}
main section#story div.list div.row:not(:last-child) {
	margin-bottom: 80px;
}
main section#story div.list div.row:last-child {
	padding-bottom: 0px;
}
main section#story div.list div.row::before {
	display: none;
}
main section#story div.list div.row div.text {
	width: auto;
	margin: 0px 0px 40px 0px;
}
main section#story div.list div.row div.text h3 {
	font-size: 1.5rem;
	line-height: 2.75rem;
	margin: 0px -30px 40px -30px;
	padding: 20px 30px;
	background: url(../images/background-paper.jpg) repeat left top;
	background-size: 1000px auto;
	transition-delay: 0s;
}
main section#story div.list div.row div.text p.description {
	transition-delay: 0.25s;
}
main section#story div.list div.row div.image {
	margin: 0px auto;
	transition-delay: 0.5s;
}
main section#story div.list div.row:first-child div.image {
	width: 62.5%;
	max-width: 320px;
	margin-left: auto;
}
main section#story div.list div.row:not(:first-child) div.image {
	width: auto;
	max-width: 420px;
}

/* news
-------------------------------------------------------------------------------- */

main div.list-news div.row {
	padding-bottom: 20px;
}
main div.list-news div.row:not(:last-child) {
	margin-bottom: 20px;
}
main div.list-news div.row div.created-category {
	margin-bottom: 10px;
}
main div.list-news div.row h3 {
	font-size: 1.125rem;
}
main article.news header {
	margin-bottom: 60px;
	padding-bottom: 20px;
}
main article.news header div.created-category {
	margin-bottom: 20px;
}
main article.news header h1 {
	font-size: 1.5rem;
	line-height: 2.5rem;
}

/* form
-------------------------------------------------------------------------------- */

main section.form div.inner-section {
	width: auto;
}
main section.form div.header {
	margin-bottom: 60px;
}
main section.form div.form div.component-wrapper {
	margin-bottom: 60px;
}
main section.form div.form div.component {
	display: block;
	padding: 20px 0px;
}
main section.form div.form div.component p.label {
	width: auto;
	height: auto;
	margin-bottom: 10px;
}
main section.form div.form div.component div.body {
	width: auto;
}

/* site-policy, privacy-policy
-------------------------------------------------------------------------------- */

main section.policy div.inner-section {
	width: auto;
}
main section.policy div.list div.row:not(:last-child) {
	margin-bottom: 60px;
}
main section.policy div.list div.row h2 {
	font-size: 1.5rem;
	line-height: 2rem;
	margin-bottom: 10px;
}



/* --------------------------------------------------------------------------------
footer
-------------------------------------------------------------------------------- */

footer#footer div.inner-footer {
	width: auto;
	padding: 40px 30px 20px 30px;
}
footer#footer p#button-page-top {
	right: 10px;
	bottom: 10px;
}
footer#footer p#button-page-top a {
	width: 50px;
	height: 50px;
}
footer#footer h3 a {
	display: inline-block;
}
footer#footer h3 img {
	width: calc(307px * 0.875);
	margin: 0px 0px 10px 0px;
}
footer#footer h3 span {
	transform: translateY(0px);
}
footer#footer nav#navi-footer div.list {
	justify-content: space-between;
	position: relative;
}
footer#footer nav#navi-footer div.list div.row:first-child {
	position: absolute;
	left: 0px;
	top: 0px;
}
footer#footer nav#navi-footer div.list div.row:not(:last-child) {
	width: calc(50% - 20px);
	margin: 0px 0px 20px 0px;
}
footer#footer nav#navi-footer div.list div.row:nth-child(2) {
	margin-top: 50px;
}
footer#footer nav#navi-footer div.list div.row:last-child {
	width: 100%;
}
footer#footer nav#navi-footer div.list div.row ul li a {
	display: inline-block;
}
footer#footer nav#navi-footer div.list div.row:last-child > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: -20px;
}
footer#footer nav#navi-footer div.list div.row:last-child > ul > li {
	width: calc(50% - 20px);
}
footer#footer nav#navi-footer div.list div.row:last-child > ul > li.news {
	order: 1;
}
footer#footer :where(p.button-contact, div.sns) {
	position: static;
	right: auto;
	margin-bottom: 40px;
}
footer#footer p.button-contact {
	top: auto;
}
footer#footer p.button-contact a {
	width: 100%;
}
footer#footer div.sns {
	top: auto;
}
footer#footer div.button-wrapper {
	display: block;
	margin-bottom: 40px;
}
footer#footer div.button-wrapper p.button-default:not(:last-child) {
	margin-bottom: 10px;
}
footer#footer div.button-wrapper p.button-default {
	width: auto;
}
footer#footer div.button-wrapper p.button-default a {
	height: 50px;
}
footer#footer div.misc {
	display: block;
}
footer#footer div.misc div.links {
	margin-bottom: 10px;
}