@charset "utf-8";

.subVisual{ overflow: hidden; display: flex; align-items: center; justify-content: center; position:relative; color: #fff; text-align:center; text-transform: uppercase;
	&::before{ content: ''; position: absolute; inset: 0; background: var(--visual-bg) no-repeat 50% / cover; }
	.inr{ display: grid; align-content: center; padding: calc(var(--header-height) + 0.3%) 0 60rem; }
	[data-menu-snb="1"]{ font: 500 20rem var(--font-pre); }
	[data-menu-snb="2"]{ margin-top: .18em; font: 700 clamp(40rem, calc( 50 / var(--inr) * 100vw ), 50rem) var(--font-pre); }
	.lnb{ position: absolute; inset: auto 0 0; padding: 0 4vw; background: #fff; font-size:17rem; color: #888; text-align:center; }
	.sub_menu{ margin: 0 auto; display: inline-flex; }
	.lnb a{ position: relative; display: flex; align-items: center; height: 60rem; padding: 10rem 0 0; }
	.lnb a.isVisiting, a:hover{ color: var(--primary); }
	.lnb a.isVisiting::before{ content: ''; position: absolute; inset: 0; border-bottom: 3rem solid currentColor; }
	@media(prefers-reduced-motion:no-preference){
		&::before{ animation: subVisual_bg 1.8s both; }
		[data-menu-snb]{ animation: subVisualText .6s .2s both; opacity: 0; }
		[data-menu-snb]:nth-child(2){ animation-delay: .4s; }
		.lnb{ animation: clip-right .6s .8s both; clip-path: inset(0 100% 0 0); }
	}
	@media(min-width:768px){
		&.about::before{ --visual-bg: url('/images/content/subVisual-1-pc.jpg'); }
		&.product::before{ --visual-bg: url('/images/content/subVisual-2-pc.jpg'); }
		&.resources::before{ --visual-bg: url('/images/content/subVisual-3-pc.jpg'); }
		&.customer::before{ --visual-bg: url('/images/content/subVisual-4-pc.jpg'); }
		&.common::before{ --visual-bg: url('/images/content/subVisual-1-pc.jpg'); }
		.inr{ height:500rem; }
		.sub_menu{ justify-content: center; gap: 78rem; }
	}
	@media(max-width:767px){
		&.about::before{ --visual-bg: url('/images/content/subVisual-1-mob.jpg'); }
		&.product::before{ --visual-bg: url('/images/content/subVisual-2-mob.jpg'); }
		&.resources::before{ --visual-bg: url('/images/content/subVisual-3-mob.jpg'); }
		&.customer::before{ --visual-bg: url('/images/content/subVisual-4-mob.jpg'); }
		&.common::before{ --visual-bg: url('/images/content/subVisual-1-mob.jpg'); }
		.inr{ height:400rem; }
		.lnb{ overflow: auto clip; white-space:nowrap; }
		.sub_menu{ gap: 18rem; }
	}
}
@keyframes subVisual_bg {
	0%{ transform: scale(1.05); }
	100%{ transform: scale(1); }
}
@keyframes subVisualText {
	0%{ transform: translateY(40rem); opacity: 0; }
	100%{ transform: translateY(0); opacity: 1; }
}
@keyframes clip-right {
	0%{ clip-path: inset(-1px 100% -1px 0); }
	100%{ clip-path: inset(-1px 0); }
}

/* common content */
.sub{ min-height:300px; padding: clamp(90rem, calc( 117 / var(--inr) * 100vw ), 117rem) 0 90rem; }
.sub_title{ margin-bottom: 3.75em;}
.sub_title h2{ text-align:center; font-size:var(--fs35); }

.common-policy{ counter-reset: number; display: grid; gap: 20rem;
	li{ display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13rem 41rem; padding: 29rem 39rem; border: 1px solid #ddd; }
	.icon{ grid-area: 1/1/3/2; display: block; width: 80rem; height: 80rem; }
	.heading{ align-self: end; font: 600 16rem var(--font-mon); color: var(--primary); }
	.heading::after{ counter-increment: number; content: '0'counter(number); }
	.description{ align-self: start; font: 600 20rem var(--font-pre); text-wrap: balance; }
	@media(min-width:768px){
		&{ grid-template-columns: 1fr 1fr; }
	}
}

.greeting{ padding-bottom: 0;
	.banner{
		.title{ margin-bottom: 1.375em; display: grid; place-items: center; height: 9em; padding: 0 1ch .4%; background: var(--black) var(--bg) no-repeat 50% / cover; font: 700 var(--fs40) var(--font-mon); color: #fff; text-align: center; }
		.subTitle{ font: 300 18rem/26rem var(--font-pre); color: #555; text-align: center; text-wrap: pretty; }
	}
	.common-policy{ margin-top: 75rem; }
	.vision{ margin-top: 80rem; text-align: center;
		.bar{ margin: 0 auto; width: 1px; height: 2.5em; background: #aaa; font-size: var(--fs40); }
		.title{ margin: 1.1em auto .75em; display: flex; align-items: center; justify-content: center; width: fit-content; font: 500 var(--fs40) var(--font-pre); }
		.title::before, .title::after{ content: ''; display: inline-block; width: .85em; aspect-ratio: 34/20; background: url('/images/content/quotation.png') no-repeat 50% / contain; opacity: .3; }
		.title::before{ translate: 0 -.275em; margin-right: .675em; vertical-align: middle; }
		.title::after{ translate: 0 .1em; scale: 1 -1; rotate: 180deg; margin-left: .675em; }
		.title em{ color: var(--primary); }
		.subTitle{ font: 300 18rem var(--font-pre); color: #555; }
	}
	.org{ margin-top: clamp(70rem, calc( 118 / var(--inr) * 100vw ), 118rem); padding: 95rem 0 88rem; background: #f5f5f5; text-align: center;
		.title{ font: 700 var(--fs30) var(--font-pre); }
		.img{ margin-top: 42rem; max-width: 867rem; width: 100%; height: auto; }
	}
	@media(min-width:768px){
        .banner .subTitle{font: 300 20rem/30rem var(--font-pre);}
		.banner .title{ --bg: url('/images/content/greeting-banner-pc.jpg') }
	}
	@media(max-width:767px){
		.banner .title{ --bg: url('/images/content/greeting-banner-mob.jpg') }
	}
}

.history{
	.banner{
		.title{ display: grid; place-items: center; height: 9em; padding: 0 1ch .4%; background: var(--black) var(--bg) no-repeat 50% / cover; font: 700 var(--fs40) var(--font-mon); color: #fff; text-align: center; }
	}
	.list{ position: relative; margin-top: 104rem; display: grid; gap: 61rem; padding-bottom: 71rem; }
	.list::before{ content: ''; position: absolute; top: 23rem; bottom: 0; z-index: -1; width: 1px; background: #ddd; }
	.list > li{ display: grid; }
	.list > li::before{ content: ''; margin-top: calc( var(--fs40) * .45); display: inline-block; width: 12rem; aspect-ratio: 1; background: var(--primary); border-radius: 50%; }
	.year{ font: 800 var(--fs40) var(--font-mon); color: var(--primary); }
	.event{ margin-top: calc( var(--fs40) * .35); display: grid; gap: 23rem; font: 300 17rem var(--font-pre); color: #555; }
	.event > li{ display: flex; gap: 2ch }
	@media(min-width:768px){
		.banner .title{ --bg: url('/images/content/history-banner-pc.jpg') }
		.list::before{ left: 50%; }
		.list > li{ display: grid; grid-template-columns: 1fr auto 1fr; gap: 42rem; }
		.list > li::before{ order: 5; }
		.list > li:nth-child(odd) .year{ order: 1; text-align: right; }
		.list > li:nth-child(odd) .event{ order: 10; }
		.list > li:nth-child(even){
			.year{ order: 10; }
			.event{ order: 1; text-align: right; }
			.event > li{ flex-direction: row-reverse; }
		}
	}
	@media(max-width:767px){
		.banner .title{ --bg: url('/images/content/history-banner-mob.jpg'); }
		.list::before{ left: 5rem; }
		.list > li{ grid-template-columns: auto 1fr; gap: 0 2ch; }
		.event{ grid-column-start: 2; }
	}
}

.business-field .img{ margin: 0 auto; display: block; max-width: 626rem; width: 100%; height: auto; }
	
.business-network{ padding-bottom: 361rem; background: #fff var(--bg) no-repeat 50% 100% / var(--bg-size); text-align: center;
	.img{ max-width: 718rem; width: 100%; height: auto; }
	@media(min-width:768px){
		&{ --bg: url('/images/content/business-network-bg-pc.jpg'); --bg-size: 1920rem; }
	}
	@media(max-width:767px){
		&{ --bg: url('/images/content/business-network-bg-mob.jpg'); --bg-size: cover; }
	}
}

.location{
	.map{ width: 100%; }
	.map svg{ pointer-events: none; }
	.map_border, .wrap_controllers{ display: none }
	.list{ margin-top: 57rem; text-align: center; }
	.list > li{ padding-inline: 2ch; }
	.title{ font: 600 16rem var(--font-mon); color: var(--primary); text-transform: uppercase; }
	.description{ margin-top: 8rem; font: 300 17rem var(--font-pre); color: #555; }
	@media(min-width:768px){
		.map .wrap_map{ height: 500rem; }
		.list{ display: grid; grid-template-columns: repeat(3, auto); }
		.list > li + li{ border-left: 1px solid #ddd; }
	}
	@media(min-width:1280px){
		.list{ display: grid; grid-template-columns: repeat(3, 1fr); }
	}
	@media(max-width:767px){
		.map{ aspect-ratio: 1/1; }
		.map .wrap_map{ height: 100%; }
		.list > li{ padding-block: 2ch; }
		.list > li + li{ border-top: 1px solid #ddd; }
	}
}



/* clamp(70rem, calc( 118 / var(--inr) * 100vw ), 118rem) */