@charset "utf-8";
.wrap { background-image: url('/img/bg-1.png'),url('/img/bg-2.png');
 background-repeat: no-repeat, no-repeat; background-position: 50% 4%, 50% 45%;
}
@media (max-width: 801px) {
	.wrap { background-image: url('/img/bg-1@sp.png'),url('/img/bg-2@sp.jpg');
 background-position: 50% 2%, 50% 43.5%; background-size: 100% auto, 100% auto;
	}
}
@media (max-width: 481px) {
	.wrap { background-position: 50% 2%, 50% 36.5%;}
}


#mission .inner-sct { padding: 120px 0;}
#mission .ctn { position: relative; width: 100%; max-width: 1400px; margin: 0 auto;}
#mission .ttl { margin-bottom: 20px; padding-top: 60px;}
#mission .ttl h2 { margin-bottom: 20px; font-size: clamp(24px,4.2vw,42px); text-align: center;}
#mission .ttl:after { width: 126px; margin: 0 auto;}
#mission .ttl p { position: absolute; left: 0; top: 0; z-index: 1; color: #fff; font-size: clamp(60px,10vw,120px); line-height: 1;}
#mission .txt { position: relative; z-index: 2;}
#mission .txt p { font-size: clamp(14px, 3.0vw, 20px); letter-spacing: 0.1rem; line-height: 2.7; text-align: center;}
#mission .txt p span { display: block;}
#mission .pht-L,
#mission .pht-R { position: absolute; z-index: 1;}
#mission .pht-L { width: 20%; max-width: 320px; left: 0; bottom: 0;}
#mission .pht-L figure img { width: 100%;}
#mission .pht-R { width: 24%; max-width: 360px; right: 0; bottom: -40px;}
#mission .pht-R ul { position: relative; width: 100%; padding-bottom: 160px;}
#mission .pht-R ul li { width: 80%; max-width: 270px; margin: 0 0 0 auto;}
#mission .pht-R ul li:nth-child(2){ position: absolute; left: 0; bottom: 0; }
#mission .pht-R ul li figure { position: relative; display: block;}
#mission .pht-R ul li figure img { width: 100%;}
#mission .pht-R ul li:nth-child(1) figure { width: 100%; padding-top: 110%; overflow: hidden;}
#mission .pht-R ul li:nth-child(1) figure img { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: auto; height: 100%; over-fit: cover;}
@media (max-width: 801px) {
	#mission .inner-sct { padding: 80px 0;}
	#mission .ttl { padding-top: 40px;}
	#mission .pht-L,
	#mission .pht-R { position: relative;}
	#mission .pht-L { width: 38%; max-width: 360px; left: auto; bottom: auto; padding-top: 40px; margin: 0 auto -32vw 50px;}
	#mission .pht-R { width: 50%; margin: 0 5% 0 auto; right: auto; bottom: auto;}
	#mission .pht-R ul { padding-bottom: 160px;}
	#mission .pht-R ul li:nth-child(1) figure { padding-top: 86%;}
}
@media (max-width: 481px) {
	#mission .inner-sct { padding: 40px 0;}
	#mission .ttl { margin-bottom: 12px;}
	#mission .ttl:after { width: 60px;}
	#mission .txt p { letter-spacing: 0.05rem; line-height: 2;}
	#mission .pht-L { width: 45%; padding-top: 20px; margin: 0 auto -36vw 00px;}
	#mission .pht-R { width: 65%; margin: 0 0% 0 auto; right: auto; bottom: auto;}
	#mission .pht-R ul { padding-bottom: 100px;}
	#mission .pht-R ul li { width: 72%;}
}


#vision .inner-sct { padding: 80px 0;}
#vision .ctn { position: relative; width: 100%; max-width: 1400px; margin: 0 auto;}
#vision .ctn .inner { width: 47.5%; margin: 0 0 0 auto;}
#vision .ttl { margin-bottom: 20px; padding-top: 50px;}
#vision .ttl h2 { margin-bottom: 20px; font-size: clamp(24px,4.0vw,38px);}
#vision .ttl h2 span { display: block;}
#vision .ttl p { position: absolute; right: 0; top: -12px; z-index: 1; color: #f0f3f9; font-size: clamp(60px,10vw,120px); line-height: 1;}
#vision .txt p { font-size: 18px; letter-spacing: 0.1rem; line-height: 2;}
#vision .txt p span { display: block;}
#vision .pht { width: 50%; max-width: 680px; position: absolute; left: 0; top: 0;}
#vision .pht ul li figure img { width: 100%;}
@media (max-width: 1001px) {
	#vision .ctn .inner { width: 54%;}
	#vision .pht { width: 40%;}
}
@media (max-width: 801px) {
	#vision .inner-sct { padding: 60px 0;}
	#vision .ctn .inner { width: 100%; margin: 0 auto; padding: 0 50px; padding-left: 30vw;}
	#vision .ttl { padding-top: 30px;}
	#vision .txt p { font-size: 16px;}
	#vision .pht { position: relative; width: 60%; left: auto; top: auto; margin: 0 0 20px;}
}
@media (max-width: 641px) {
	#vision .ctn .inner { padding: 0; padding-left: 22vw;}
}
@media (max-width: 481px) {
	#vision .inner-sct { padding: 40px 0;}
	#vision .ttl { margin-bottom: 12px; padding-top: 16px;}
	#vision .ttl h2 { margin-bottom: 12px;}
	#vision .ttl h2 span { display: block;}
	#vision .txt p { font-size: 13px; letter-spacing: 0rem; line-height: 1.8;}
}


#value .inner-sct { padding: 80px 0;}
#value .ttl { margin-bottom: 20px; padding-top: 30px;}
#value .ttl h2 { margin-bottom: 20px; font-size: clamp(24px,4.0vw,38px); text-align: center;}
#value .ttl:after { margin: 0 auto;}
#value .ttl p { position: absolute; left: 0; top: -10px; z-index: 1; color: #fff; font-size: clamp(60px,10vw,120px); line-height: 1;}
#value .ctn { position: relative; width: 92%; max-width: 1100px; margin: 0 auto;}
#value ul { width: 100%; font-size: 0; text-align: center;}
#value ul li { display: inline-block; width: 33.3333%; padding: 12px 14px; color: #173762; font-size: clamp(15px,2.6vw,26px); line-height: 1.2;}
#value ul li span { position: relative; display: block; padding: 30px 0; background: url('/img/about/bg-ptn.jpg') no-repeat 50% 50% / cover; letter-spacing: 0.1rem;}
#value ul li span:before,
#value ul li span:after { content: ''; display: block; width: 30px; height: 30px; position: absolute;}
#value ul li span:before{ left: 8px; top: 8px; border-top: solid 1px #173762; border-left: solid 1px #173762;}
#value ul li span:after { right: 8px; bottom: 8px; border-bottom: solid 1px #173762; border-right: solid 1px #173762;}
@media (max-width: 801px) {
	#value .inner-sct { padding: 60px 0;}
	#value ul li { width: 50%; padding: 10px;}
	#value ul li span:before,
	#value ul li span:after { width: 20px; height: 20px;}
}
@media (max-width: 481px) {
	#value .inner-sct { padding: 40px 0;}
	#value .ttl h2 { margin-bottom: 12px;}
	#value .ttl p { top: 0px;}
	#value ul li { padding: 6px;}
	#value ul li span { padding: 18px 0;}
	#value ul li span:before,
	#value ul li span:after { width: 12px; height: 12px;}
	#value ul li span:before{ left: 4px; top: 4px;}
	#value ul li span:after { right: 4px; bottom: 4px;}
}



#message .inner-sct { padding: 80px 0;}
#message .ttl { margin-bottom: 30px;}
#message .ttl h2 { margin-bottom: 20px; font-size: clamp(24px,4.0vw,40px); line-height: 1;}
#message .ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px; padding-right: 380px;}
#message .txt { margin-bottom: 40px;}
#message .txt p { letter-spacing: 0.1rem; line-height: 2;}
#message .prof { position: relative; padding-left: 290px;}
#message .prof figure { position: absolute; left: 0; top: 0; width: 250px;}
#message .prof figure img { width: 100%;}
#message .prof figure figcaption { display: none;}
#message .prof dl { padding: 28px 0; border-top: solid 1px #8b9bb0; border-bottom: solid 1px #8b9bb0;}
#message .prof dl dt { margin-bottom: 15px; font-size: clamp(16px,2.0vw,20px); letter-spacing: 0.1rem;}
#message .prof dl dd { font-size: 13px; letter-spacing: 0.05rem;}
#message .pht { position: absolute; right: 0px; top: 0; width: 30%; max-width: 320px;}
#message .pht ul { position: relative; font-size: 0;}
#message .pht ul li { width: 85%; max-width: 280px;}
#message .pht ul li:nth-child(1) { margin: 0 0 30px auto;}
#message .pht ul li figure img { width: 100%;}
#message .ctn .side-txt { height: 150px; background: url('/img/side/message.svg') no-repeat 50% 0% / 100% auto;}
@media (max-width: 1001px) {
	#message .ctn { padding-right: 280px;}
	#message .pht { max-width: 240px;}
	#message .prof { padding-left: 210px;}
	#message .prof figure { width: 180px;}
}
@media (max-width: 801px) {
	#message .ctn { padding: 0 50px;}
	#message .txt { margin-bottom: 20px;}
	#message .txt p { font-size: 14px; letter-spacing: 0.05rem; line-height: 1.8;}
	#message .pht { position: relative; right: auto; top: auto; width: 100%; max-width: 400px; margin: 0 auto 40px;}
	#message .pht ul { display: flex; justify-content: space-between; width: 100%;}
	#message .pht ul li { width: 48.5%;}
	#message .pht ul li:nth-child(1) { margin: 0px;}
	#message .pht ul li:nth-child(2) { padding-top: 20px;}
	
	#message .prof { padding: 20px 0; padding-left: 200px;border-top: solid 1px #8b9bb0; border-bottom: solid 1px #8b9bb0;}
	#message .prof figure { width: 160px; top: 20px;}
	#message .prof figure figcaption { display: block; width: 100%; padding-top: 10px; font-size: 14px; line-height: 1.4; text-align: center;}
	#message .prof figure figcaption span{ display: block;}
	#message .prof dl { min-height: 200px; padding: 0px; border: none;}
	#message .prof dl dt { display: none;}
	#message .prof dl dd { font-size: 12px;}
}
@media (max-width: 641px) {
	#message .prof { padding-left: 180px;}
	#message .prof figure { width: 160px;}
	#message .prof dl dt { margin-bottom: 10px;}
}
@media (max-width: 481px) {
	#message .inner-sct { padding: 40px 0;}
	#message .ctn { padding: 0 25px;}
	#message .ttl { margin-bottom: 20px;}
	#message .ttl h2 { margin-bottom: 12px;}
	#message .txt { padding-right: 10px;}
	#message .txt p { font-size: 13px;}
	#message .pht { margin-bottom: 30px;}
	#message .prof { padding-left: 120px;}
	#message .prof figure { width: 100px;}
	#message .prof figure figcaption { font-size: 13px;}
	#message .prof dl dd { font-size: 11px;}
}



#company .inner-sct { padding: 80px 0 150px;}
#company .ctn { position: relative; position: relative; width: 100%; max-width: 1200px; margin: 0 auto 40px; padding: 0 50px;}
#company .flex{ display: flex; justify-content: space-between; flex-direction: row-reverse; width: 100%;}
#company .info{ width: 56%;}
#company .pht { width: 40%;}

#company .ttl { margin-bottom: 20px;}
#company .ttl h2 { margin-bottom: 20px; font-size: clamp(24px,4.0vw,40px); line-height: 1;}
#company .info ul li { padding: 21px 0; border-top: solid 1px #8b9bb0;}
#company .info ul li:first-child { border: none;}
#company .info ul li dl { display: table; width: 100%;}
#company .info ul li dl dt,
#company .info ul li dl dd { display: table-cell; font-size: 15px; letter-spacing: 0.1rem;}
#company .info ul li dl dt { width: 240px; color: #173762;}
#company .info ul li dl dd span { display: block; padding-top: 18px; font-size: 14px;}
#company .pht figure img { width: 100%;}
#company .map { width: 88%; max-width: 1100px; margin: 0 auto;}
#company .map iframe { width: 100%; height: 340px; border: none;}

#company .ctn .side-txt { left: auto; right: -12px; height: 310px; background: url('/img/side/company.svg') no-repeat 50% 0% / 100% auto;}
@media (max-width: 1241px) {
	#company .ctn .side-txt { right: 5px;}
}
@media (max-width: 1001px) {
	#company .info{ width: 66%;}
	#company .pht { width: 30%;}
	#company .info ul li { padding: 12px 0;}
	#company .info ul li dl dt,
	#company .info ul li dl dd { font-size: 14px; letter-spacing: 0.05rem;}
	#company .info ul li dl dt { width: 200px;}
}
@media (max-width: 801px) {
	#company .info ul li dl dt,
	#company .info ul li dl dd { display: block; font-size: 14px; letter-spacing: 0.05rem;}
	#company .info ul li dl dt { width: 100%;}
	#company .info ul li dl dd { width: 100%;}
	#company .info ul li dl dd span { padding-top: 12px; font-size: 12px;}
}
@media (max-width: 641px) {
	#company .flex{ display: block; padding-right: 12px;}
	#company .info{ width: 100%; margin: 0 auto 30px;}
	#company .pht { width: 50%; margin: 0 auto;}
}
@media (max-width: 481px) {
	#company .inner-sct { padding: 40px 0 80px;}
	#company .ttl { margin-bottom: 6px;}
	#company .ttl h2 { margin-bottom: 12px;}
	#company .ctn { padding: 0 25px;}
	#company .info ul li dl dd span { padding-top: 8px; font-size: 11px;}
	#company .map iframe { height: 240px;}
	#company .ctn .side-txt { right: 21px;}
}