@charset "utf-8";

aside { background: #173762;}
aside .inner { padding: 30px 0 50px;}
aside p { margin-bottom: 20px; color: #fff; font-size: clamp(18px,2.4vw,24px); text-align: center;}
aside .btn { width: 72%; max-width: 450px; margin: 0 auto;}
aside .btn a { display: block; padding: 20px 0; border: solid 1px #fff; border-radius: 50px; background: #2f4b72;
 color: #fff; font-size: clamp(18px,3.2vw,32px); letter-spacing: 0.1rem; line-height: 1; text-align: center; text-decoration: none;
 transition: 0.3s cubic-bezier(.5,1,.89,1);
}
aside .btn a:hover { background: #fff; color: #173762;}
@media (max-width: 481px) {
	aside .inner { padding: 20px 0px 30px;}
	aside p { margin-bottom: 12px;}
	aside .btn a { padding: 15px 0;}
}


.ttl h2 { margin-bottom: 20px; font-size: clamp(24px,4.0vw,40px); line-height: 1;}


#lead {}
#lead .inner-sct { padding: 60px 0 80px;}
#lead .ctn { width: 88%; max-width: 1100px; margin: 0 auto;}
#lead .txt { width: 100%; max-width: 1000px; margin: 0 auto 60px;}
#lead .txt p { font-size: 17px; letter-spacing: 0.1rem; line-height: 2.1;}
#lead .pht figure { text-align: center;}
#lead .pht figure img { width: 100%;}
@media (max-width: 481px) {
	#lead .inner-sct { padding: 40px 0px;}
	#lead .txt { margin-bottom: 30px;}
	#lead .txt p { font-size: 14px; letter-spacing: 0.05rem; line-height: 1.8;}
}


#why .inner-sct { padding: 100px 0 50px;}
#why .ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px;}
#why .ctn ul { display: flex; justify-content: space-between; width: 100%;}
#why .ctn ul li { width: 30%; max-width: 320px;}
#why .ctn ul li dl dt { position: relative; margin-bottom: 20px; padding-top: 45px;}
#why .ctn ul li dl dt img { width: 100%;}
#why .ctn ul li dl dt span{ display: block; width: 30%; max-width: 90px; position: absolute; right: 5px; top: 0;}
#why .ctn ul li dl dd { font-size: 16px; letter-spacing: 0.05rem;}
#why .ctn ul li dl dd span { display: block; margin-bottom: 12px; color: #173762; font-size: clamp(16px,2.4vw,24px); letter-spacing: 0.1rem;}
#why .ctn ul li dl dd span br { display: none;}
#why .ctn .side-txt { height: 210px; background: url('/img/side/why.svg') no-repeat 50% 0% / 100% auto;}
@media (max-width: 641px) {
	#why .ctn ul { display: block;}
	#why .ctn ul li { width: 100%; max-width: 100%; margin: 0 auto 20px;}
	#why .ctn ul li:last-child { margin-bottom: 0px;}
	#why .ctn ul li dl { display: table; width: 100%;}
	#why .ctn ul li dl dt,
	#why .ctn ul li dl dd { display: table-cell; width: 50%; vertical-align: middle;}
	#why .ctn ul li dl dt { margin-bottom: 0px; padding-top: 40px;}
	#why .ctn ul li dl dd { padding-top: 40px; padding-left: 20px; font-size: 14px;}
	#why .ctn ul li dl dd span { margin-bottom: 6px;}
	#why .ctn ul li dl dd span br { display: block;}	
}
@media (max-width: 481px) {
	#why .inner-sct { padding: 60px 0 40px;}
	#why .ctn { padding: 0 24px;}
	#why .ctn ul { padding-right: 12px;}
	#why .ctn ul li { margin-bottom: 12px;}
	#why .ctn ul li dl dt { padding-top: 30px;}
	#why .ctn ul li dl dd { padding-top: 30px;}
	#why .ctn ul li dl dd span { line-height: 1.4;}
}


#process .inner-sct { padding: 100px 0px;}
#process .ttl { margin-bottom: 50px;}
#process .ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px;}
#process .ctn ul { width: 100%; max-width: 1000px; margin: 0 auto;}
#process .ctn ul li { margin-bottom: 12px;}
#process .ctn ul li:last-child { margin-bottom: 0px;}
#process .ctn ul li::after { content: ''; display: block; width: 100%; height: 14px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 14"><polygon points="50 14 100 0 0 0 50 14" fill="%23173762"/></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: auto 100%;
}
#process .ctn ul li:last-child:after { content: none;}
#process .ctn ul li dl { display: table; width: 100%; margin-bottom: 15px; background: #f0f5f9;}
#process .ctn ul li:last-child dl { margin-bottom: 0px;}
#process .ctn ul li dl dt,
#process .ctn ul li dl dd { display: table-cell; vertical-align: middle;}
#process .ctn ul li dl dt { position: relative; width: 220px; padding: 20px; padding-left: 60px; text-align: center;}
#process .ctn ul li dl dd { width: auto; padding: 20px; padding-left: 0;}
#process .ctn ul li dl dt span { color: #173762; font-size: 56px; line-height: 1;
 position: absolute; left: 28px; top: -30px;
}
#process .ctn ul li dl dt img { width: 80%; max-width: 80px;}
#process .ctn ul li dl dd span { display: block;}
#process .ctn ul li dl dd span.tit { color: #173762; font-size: clamp(18px,2.4vw,24px);}
#process .ctn ul li dl dd span.gothic {}
#process .ctn .side-txt { height: 150px; background: url('/img/side/process.svg') no-repeat 50% 0% / 100% auto;}
@media (max-width: 641px) {
	#process .ctn ul li dl dt { width: 150px; padding: 12px; padding-left: 30px;}
	#process .ctn ul li dl dt span { top: -20px; font-size: 42px; }
	#process .ctn ul li dl dd { padding: 12px; padding-left: 0;}
}
@media (max-width: 481px) {
	#process .inner-sct { padding: 60px 0px;}
	#process .ctn { padding: 0 24px;}

	#process .ctn ul { padding-right: 12px;}
	#process .ctn ul li { margin-bottom: 8px;}
	#process .ctn ul li::after { height: 10px;}
	#process .ctn ul li dl { margin-bottom: 10px;}
	#process .ctn ul li dl dt { width: 100px; padding: 12px; padding-left: 20px;}
	#process .ctn ul li dl dt span { left: 12px; font-size: 36px; }
	#process .ctn ul li dl dd { padding: 12px; padding-left: 0; font-size: 13px;}
}



#oem .inner-sct { padding: 100px 0px;}
#oem .ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px;}
#oem .ttl { margin-bottom: 50px;}
#oem .box { width: 100%; max-width: 1000px; margin: 0 auto; padding: 50px; background: #f0f5f9; border-top: solid 1px #173762; border-bottom: solid 1px #173762;}
#oem .box .flex { display: flex; justify-content: space-between; width: 100%;}
#oem .box .img { width: 35%;}
#oem .box .txt { width: 60%;}
#oem .box .img figure { text-align: center;}
#oem .box .img figure img { width: 100%;}
#oem .box .txt h4 { margin-bottom: 20px; color: #173762; font-size: clamp(16px,2.4vw,24px);}
#oem .box .txt h4:before { content: ''; display: inline-block; width: 20px; height: 16px; margin-right: 12px; vertical-align: middle;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 200 166"><path d="M149.5.8l-.8-.8H51.3L0,53.6l100,112.2,100-112.2L149.5.8Z" fill="%23173762"/></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto;
}
#oem .box .txt h4 span { position: relative; display: inline-block; vertical-align: middle;}

#oem .box .txt p { letter-spacing: 0.05rem; line-height: 1.85;}
#oem .ctn .side-txt { height: 260px; background: url('/img/side/case.svg') no-repeat 50% 0% / 100% auto;}
@media (max-width: 641px) {
	#oem .box { width: calc( 100% - 16px ); padding: 30px;}
	#oem .box .flex { display: block;}
	#oem .box .img { width: 100%; margin: 0 auto 20px; background: #fff;}
	#oem .box .img figure img { width: 50%;}
	#oem .box .txt { width: 100%;}
	#oem .box .txt h4 { margin-bottom: 12px;}
	#oem .box .txt p { font-size: 14px;}
}
@media (max-width: 481px) {
	#oem .inner-sct { padding: 60px 0px;}
	#oem .ttl { margin-bottom: 20px;}
	#oem .ctn { padding: 0 24px;}
	#oem .box { margin: 0;}
	#oem .box .txt h4 { margin-bottom: 8px;}
	#oem .box .txt h4:before { width: 12px; height: 9px; margin-right: 6px;}
	#oem .box .txt p { font-size: 12px;}
}



#collabo .inner-sct { padding: 60px 0px;}
#collabo .ttl { margin-bottom: 20px;}
#collabo .read { margin-bottom: 20px;}
#collabo .read p { margin-bottom: 20px; font-size: 18px; letter-spacing: 0.1rem; line-height: 1.85;}
#collabo .ctn .side-txt { height: 420px; background: url('/img/side/collabo.svg') no-repeat 50% 0% / 100% auto;}
@media (max-width: 641px) {
	#collabo .read { padding-right: 16px;}
	#collabo .read p { font-size: 14px;}
	#collabo .flex { padding-right: 16px;}
}
@media (max-width: 481px) {
	#collabo .inner-sct { padding: 40px 0px;}
	#collabo .read p { margin-bottom: 12px; font-size: 13px;}
}