@charset "utf-8";

.wrap { background-image: url('/img/bg-1.png'); background-repeat: no-repeat; background-position: 50% 2.5%;}
@media (max-width: 801px) {
	.wrap { background-image: url('/img/bg-1@sp.png'); background-position: 50% 2%; background-size: 100% auto;}
}
@media (max-width: 481px) {
	.wrap { background-position: 50% 2%}
}

.ttl h2 { margin-bottom: 20px; font-size: clamp(24px,4.0vw,40px); line-height: 1;}
@media (max-width: 481px) {
	#page-kv .kv-txt h1 { text-shadow: 0 0 6px #fff, 0 0 6px #fff;}
}


#message .inner-sct { padding: 120px 0;}
#message .ctn { position: relative; width: 100%; max-width: 1400px; margin: 0 auto;}
#message .ttl { margin-bottom: 20px; padding-top: 60px;}
#message .ttl h2 { margin-bottom: 20px; font-size: clamp(24px,4.2vw,42px); text-align: center;}
#message .ttl:after { width: 126px; margin: 0 auto;}
#message .ttl p { position: absolute; left: 0; top: 0; z-index: 1; color: #fff; font-size: clamp(60px,10vw,120px); line-height: 1;}
#message .txt { position: relative; z-index: 2;}
#message .txt p { margin-bottom: 30px; font-size: clamp(13px, 3.0vw, 20px); letter-spacing: 0.1rem; line-height: 2; text-align: center;}
#message .txt p:last-child { margin-bottom: 0px;}
#message .pht-L,
#message .pht-R { position: absolute; z-index: 1;}
#message .pht-L { width: 20%; max-width: 320px; left: 0; bottom: 25%;}
#message .pht-L figure img { width: 100%;}
#message .pht-R { width: 24%; max-width: 360px; right: 0; bottom: 15%;}
#message .pht-R ul { position: relative; width: 100%; padding-bottom: 200px;}
#message .pht-R ul li { width: 80%; max-width: 200px; margin: 0 0 0 auto;}
#message .pht-R ul li:nth-child(2){ position: absolute; left: 0; bottom: 0; }
#message .pht-R ul li figure { position: relative; display: block;}
#message .pht-R ul li figure img { width: 100%;}
#message .pht-R ul li:nth-child(1) figure { width: 100%; padding-top: 110%; overflow: hidden;}
#message .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) {
	#message .inner-sct { padding: 80px 0;}
	#message .ttl { padding-top: 40px;}
	#message .txt p { margin-bottom: 20px; line-height: 1.8;}
	#message .txt p span { display: block;}
	#message .pht-L,
	#message .pht-R { position: relative;}
	#message .pht-L { width: 38%; max-width: 360px; left: auto; bottom: auto; padding-top: 40px; margin: 0 auto -32vw 50px;}
	#message .pht-R { width: 60%; margin: 0 5% 0 auto; right: auto; bottom: auto;}
	#message .pht-R ul { padding-bottom: 160px;}
	#message .pht-R ul li:nth-child(1) figure { padding-top: 86%;}
}
@media (max-width: 481px) {
	#message .inner-sct { padding: 40px 0;}
	#message .ttl { margin-bottom: 12px;}
	#message .ttl:after { width: 60px;}
	#message .txt p { margin-bottom: 12px; letter-spacing: 0.05rem;}
	#message .pht-L { width: 45%; padding-top: 20px; margin: 0 auto -36vw 00px;}
	#message .pht-R { width: 60%; margin: 0 0% 0 auto; right: auto; bottom: auto;}
	#message .pht-R ul { padding-bottom: 100px;}
	#message .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: 30px; padding-top: 50px;}
#vision .ttl h2 { margin-bottom: 20px; font-size: clamp(24px,4.0vw,38px);}
#vision .ttl h2 span { display: block;}
#vision .txt ul { padding-right: 30px;}
#vision .txt ul li { position: relative; padding: 8px 0; font-size: 16px; letter-spacing: 0.1rem;}
#vision .txt ul li span { position: relative; display: block; padding-left: 20px; font-size: clamp(14px, 3.0vw, 20px); }
#vision .txt ul li span:before { content: ''; display: block; width: 12px;height: 12px; background: #173762;
 position: absolute; left: 0; top: 12px;
}
#vision .pht { width: 50%; max-width: 680px; position: absolute; left: 0; top: 0;}
#vision .pht ul li figure img { width: 100%;}
#vision .ctn .side-txt { left: auto; right: 0px; height: 310px; background: url('/img/side/ideal.svg') no-repeat 50% 0% / 100% auto;}
@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; padding-left: 30vw;}
	#vision .ttl { padding-top: 30px;}
	#vision .txt ul { padding-right: 24px;}
	#vision .txt ul li { font-size: 13px;}
	#vision .txt ul li span:before { top: 9px;}
	#vision .pht { position: relative; width: 60%; left: auto; top: auto; margin: 0 0 20px;}
	#vision .ctn .side-txt { right: 10px;}
}
@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 ul li { font-size: 12px;}
	#vision .txt ul li span{ padding-left: 16px;}
	#vision .txt ul li span:before { top: 8px; width: 8px; height: 8px;}
	#vision .ctn .side-txt { right: 21px;}
}



#recruit .inner-sct { padding: 80px 0 12px;}
#recruit .ttl { margin-bottom: 30px;}
#recruit .ttl h2 { margin-bottom: 20px; font-size: clamp(24px,4.0vw,40px); line-height: 1;}
#recruit .ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px;}
#recruit .txt p { letter-spacing: 0.1rem; line-height: 2;}
#recruit .ctn .side-txt { height: 200px; background: url('/img/side/job.svg') no-repeat 50% 0% / 100% auto;}
@media (max-width: 1001px) {
	#recruit .ctn { padding-right: 280px;}
}
@media (max-width: 801px) {
	#recruit .ctn { padding: 0 50px;}
	#recruit .txt p { font-size: 14px; letter-spacing: 0.05rem; line-height: 1.8;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#recruit .inner-sct { padding: 40px 0 0px;}
	#recruit .ctn { padding: 0 25px;}
	#recruit .ttl { margin-bottom: 20px;}
	#recruit .ttl h2 { margin-bottom: 12px;}
	#recruit .txt { padding-right: 16px;}
	#recruit .txt p { font-size: 13px;}
}



#jobs .inner-sct { padding: 0 0px 80px;}
#jobs .ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px;}
#jobs .bloc { padding: 30px 0;}
#jobs .bloc .inner { padding: 40px; background: #f0f5f9;}
#jobs .bloc h3 { margin-bottom: 20px; color: #173762; font-size: clamp(18px,3.0vw,30px); line-height: 1.4;}
#jobs .bloc p { margin-bottom: 20px;}
#jobs .bloc dl dt { font-size: 18px; letter-spacing: 0.1rem;}
#jobs .bloc dl dd {}
#jobs .bloc .note { padding-top: 20px;}
#jobs .bloc .note ul li { position: relative; padding-left: 1.25em;}
#jobs .bloc .note ul li:before { content: '※'; position: absolute; left: 0;}
#jobs .bloc .btn-entry { width: 60%; max-width: 320px; margin: 0 auto; padding-top: 30px;}
#jobs .bloc .btn-entry a { position: relative; display: block; padding: 12px 0; background: #fff; border: solid 1px #173762; border-radius: 50px;
 color: #173762; font-size: clamp(15px,2.2vw,20px); text-align: center; text-decoration: none;
}
#jobs .bloc .btn-entry a::before,
#jobs .bloc .btn-entry a::after { content: ''; display: block; width: 18px; height: 18px; position: absolute; right: 20px; top: 50%;
 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 20 18"><polygon points="20 8 12 0 10.9 1.1 17.9 8 0 8 0 9.5 17.9 9.5 10.9 16.5 12 17.6 20 9.5 20 8" fill="%23173762"/></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; transition: 0.2s ease;
}
#jobs .bloc .btn-entry a::before{ transform: translate(0,-50%) scale(1);}
#jobs .bloc .btn-entry a::after { transition-delay: 0.1s; transform: translate(-9px,-50%) scale(0); }
#jobs .bloc .btn-entry a:hover:before{ transform: translate(10px,-50%) scale(0);}
#jobs .bloc .btn-entry a:hover:after { transform: translate(0,-50%) scale(1);}
@media (max-width: 801px) {
	#jobs .bloc p { font-size: 14px;}
	#jobs .bloc dl dt { font-size: 16px;}
	#jobs .bloc dl dd { font-size: 14px;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#jobs .inner-sct { padding: 0px 0px 40px;}
	#jobs .ctn { padding: 0 24px;}
	#jobs .bloc { padding: 20px 0; padding-right: 12px;}
	#jobs .bloc .inner { padding: 24px;}
	#jobs .bloc h3 { margin-bottom: 12px;}
	#jobs .bloc p { font-size: 13px;}
	#jobs .bloc dl dt { font-size: 13px;}
	#jobs .bloc dl dd { font-size: 12px;}
	#jobs .bloc .note ul li { font-size: 12px;}
	#jobs .bloc .btn-entry a { padding: 9px 0;}
}



#voice .inner-sct { padding: 24px 0px 120px;}
#voice .ttl { margin-bottom: 20px;}
#voice .ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px;}
#voice .ctn .side-txt { height: 420px; background: url('/img/side/staff.svg') no-repeat 50% 0% / 100% auto;}
#voice .read { margin-bottom: 12px;}
#voice .bloc { padding: 30px 0;}
#voice .bloc .inner { width: 100%; margin: 0 auto; padding: 40px; background: #f0f5f9; border-top: solid 1px #173762; border-bottom: solid 1px #173762;}
#voice .bloc .flex { display: flex; justify-content: space-between;}
#voice .bloc .prof { width: 30%; text-align: center;}
#voice .bloc .txt { width: 66%;}
#voice .bloc .prof figure { margin-bottom: 8px; text-align: center;}
#voice .bloc .prof figure img { width: 80%; max-width: 210px; border-radius: 50%;}
#voice .bloc .prof h3 { margin-bottom: 12px; color: #173762; font-size: clamp(16px, 2.6vw, 24px); text-align: center;}
#voice .bloc .prof p { width: 92%; margin: 0 auto; font-size: 16px; text-align: left;}
#voice .bloc .txt .tit { margin-bottom: 20px; padding-bottom: 18px; border-bottom: solid 1px #173762;}
#voice .bloc .txt .tit h4 { color: #173762; font-size: clamp(15px, 2.6vw, 24px); line-height: 1.4;}
#voice .bloc .txt p { margin-bottom: 20px; letter-spacing: 0.05rem;}
#voice .bloc .txt p:last-child { margin-bottom: 0px;}
@media (max-width: 801px) {
	#voice .read p { font-size: 14px;}
	#voice .bloc .inner { padding: 30px;}
	#voice .bloc .prof p { font-size: 14px;}
	#voice .bloc .txt p { font-size: 14px;}
}
@media (max-width: 641px) {
	#voice .bloc .flex { display: block;}
	#voice .bloc .prof { width: 100%; margin-bottom: 40px; border-bottom: dashed 1px #506e97; padding-bottom: 20px;}
	#voice .bloc .txt { width: 100%;}
	#voice .bloc .prof p { width: 100%;}
}
@media (max-width: 481px) {
	#voice .inner-sct { padding: 24px 0px 80px;}
	#voice .ctn { padding: 0 24px;}
	#voice .read { padding-right: 12px;}
	#voice .read p { font-size: 13px;}
	#voice .bloc { padding: 12px 0; padding-right: 16px;}
	#voice .bloc .inner { padding: 24px;}
	#voice .bloc .prof p { font-size: 12px;}
	#voice .bloc .txt .tit { margin-bottom: 12px; padding-bottom: 10px;}
	#voice .bloc .txt p { font-size: 12px;}
}