@charset "utf-8";

.ttl {}
.ttl h2 { position: relative; font-weight: 900; line-height: 1;}
.ttl h2 img { position: relative; width: 90%; max-width: 400px;}
.ttl h2 span.jp { display: block; position: absolute; bottom: 10px; padding-left: 26px; font-size: 16px; letter-spacing: 0.2rem; line-height: 1;}
.ttl h2 span.jp:before { content: ''; display: block; width: 12px; height: 12px; background: #000; border-radius: 50%;
 position: absolute; left: 0; top: 50%; transform: translateY(-45%);
}
@media (max-width: 1281px) {
	.ttl h2 span.eng { font-size: 3.2vw}
}
@media (max-width: 801px) {
}
@media (max-width: 481px) {
	.ttl h2 img { position: relative; width: 72%;}
	.ttl h2 span.jp { padding-left: 15px; font-size: 12px; bottom: 5px;}
	.ttl h2 span.jp:before { width: 6px; height: 6px;}
}




@keyframes kv-slide {
	0% { background-position-x: 0;}
	100% { background-position-x: -2730px;}
}
@keyframes kv-slide-sp {
	0% { background-position-x: 0;}
	100% { background-position-x: -1590px;}
}
#kv {}
#kv .inner-kv { padding: 130px 0 150px;}
#kv .kv-slide { width: 100%; height: 530px; background: url('../img/kv.png') repeat-x 0 50% / auto 100%;
animation: 80.0s kv-slide linear infinite;
}
#kv .ctn { display: flex; width: 88%; max-width: 1200px; margin: 0 auto; padding-top: 30px;}
#kv .tit { width: 50%; padding-left: 40px;}
#kv .txt { width: 50%}
#kv .tit h1 { text-align: center;}
#kv .tit h1 img { width: 100%; max-width: 450px;}
#kv .txt p { font-size: 18px; font-weight: 700; letter-spacing: 0.2rem; line-height: 2;}
#kv .txt p span { display: block;}
#kv .txt p br.sp { display: none;}
@media (max-width: 1281px) {
	#kv .tit { width: 40%; padding-left: 0px;}
	#kv .tit h1 img { width: 88%;}
	#kv .txt { width: 60%}
}
@media (max-width: 801px) {
	#kv .inner-kv { padding: 80px 0;}
	#kv .ctn { display: block;}
	#kv .tit { width: 100%; max-width: 520px; margin: 0 auto 20px;}
	#kv .tit h1 { display: inline-block; text-align: left;}
	#kv .tit h1 img { width: 80%;}
	#kv .txt { width: 100%; padding-top: 0; padding-left: 0px; text-align: center;}
	#kv .txt p { display: inline-block; text-align: left; letter-spacing: 0.1rem; line-height: 1.8;}
}
@media (max-width: 481px) {
	#kv .inner-kv { padding: 60px 0 40px;}
	#kv .kv-slide { height: 320px;animation: 80.0s kv-slide-sp linear infinite;}
	#kv .ctn { width: 100%; padding-top: 20px; padding-left: 40px;}
	#kv .tit { margin: 0 auto 12px;}
	#kv .txt { text-align: left;}
	#kv .txt h1 { font-size: 26px; letter-spacing: 0.25rem;}
	#kv .txt p { font-size: 14px;}
	#kv .txt p br.sp { display: block;}
}



#works { margin-bottom: 80px;}
#works .inner-sct { position: relative; min-height: 750px;}
#works .inner-sct:before { content: ''; display: block; width: 42%; padding-top: 42%;
 background: url('../img/pht-1.png') no-repeat 100% 50% / auto 100%;
}
#works .ctn { position: absolute; left: 0; top: 0; width: 100%; z-index: 2;}
#works .ctn .ctn-inner { width: 88%; max-width: 1200px; margin: 0 auto;}
#works .ctn .inner { width: 55%; margin: 0 0 0 auto; padding-top: 80px;}
#works .ctn .ttl { margin-bottom: 30px;}
#works .ctn .ttl h2 span.jp { left: 120px;}
#works .ctn .txt h3 { margin-bottom: 30px; font-size: 26px; font-weight: 700; letter-spacing: 0.2rem;}
#works .ctn .txt p { margin-bottom: 20px; font-size: 16px; line-height: 2; letter-spacing: 0.2rem;}
#works .ctn .txt .btn { max-width: 200px;}
@media (max-width: 1001px) {
	#works .inner-sct { min-height: 900px;}
	#works .ctn .txt h3 { font-size: 2.6vw;}
	#works .ctn .txt p { font-size: 16px;}
}
@media (max-width: 801px) {
	#works .inner-sct { min-height: auto;}
	#works .inner-sct:before { width: 100%; padding-top: 76%; background: url('../img/pht-1@sp.png') no-repeat 50% 50% / auto 100%;}
	#works .ctn .ttl h2 span.jp { left: 90px;}
	#works .ctn { position: relative; left: auto; top: auto;}
	#works .ctn .inner { width: 100%; padding-top: 40px; background-position: 60% 40px; background-size: 100px auto;}
}
@media (max-width: 481px) {
	#works { margin-bottom: 60px;}
	#works .inner-sct:after { width: 60px; height: 60px;}
	#works .ctn .inner { padding-top: 20px; background-position: 70% 30px; background-size: 80px auto;}
	#works .ctn .ttl { margin-bottom: 12px;}
	#works .ctn .txt h3 { margin-bottom: 12px; font-size: 18px; letter-spacing: 0.1rem;}
	#works .ctn .txt p { margin-bottom: 20px; font-size: 13px; letter-spacing: 0.05rem;}
	#works .ctn .txt .btn { max-width: 140px;}
}



#interview { position: relative; margin-bottom: 0px;}
#interview:after { content: ''; display: block; width: 100%; height: 50%; position: absolute; left: 0; bottom: 0; z-index: 1;
 background: #ededed; border-top-left-radius: 50px; border-top-right-radius: 50px;
}
#interview .inner-sct { position: relative; z-index: 2;}
#interview .ttl { position: relative; width: 88%; max-width: 1200px; margin: 0 auto 10px;}
#interview .ttl h2 span.jp { left: 180px;}
#interview .slick-slider{ padding-bottom: 30px;}
#interview .box { position: relative; padding: 0 30px;}
#interview .box.box-1, #interview .box.box-3,
#interview .box.box-5, #interview .box.box-7,
#interview .box.box-9, #interview .box.box-11 { padding-top: 40px;}
#interview .box figure { position: relative; width: 100%;}
#interview .box figure a{ position: relative; display: block; width: 100%; padding-top: 138%; background: #fff;
 border-radius: 30px; overflow: hidden;
}
#interview .box figure a img { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%);
 transition: 0.3s ease;
}
#interview .box figure a:hover img { transform: translate(-50%,-50%) scale(1.1); opacity: 0.8;}
#interview .box dl { position: absolute; left: 0; bottom: 35px; width: 100%;}
#interview .box dl dt { margin-bottom: 8px; line-height: 1.2;}
#interview .box dl dt > span { display: inline-block; padding: 8px 20px; background: #ba9d32; border-radius: 50px;}
#interview .box dl dt span.name { display: inline-block; margin-right: 15px; color: #fff; font-size: 26px; font-weight: 700; vertical-align: middle;}
#interview .box dl dt span.eng { display: inline-block; color: #fff; font-size: 18px; font-weight: 700; vertical-align: middle;}
#interview .box dl dd { font-size: 20px; line-height: 1.2;}
#interview .box dl dd span { display: inline-block; margin-right: 8px; padding: 5px 20px; background: #fff; border-radius: 50px;}
#interview .box dl dd span span { display: inline; margin-right: 0px; padding: 0px;}
#interview .box dl dd span br { display: none;}
#interview .slide-arw { position: relative; width: 92%; max-width: 1200px; margin: 0 auto;}
#interview .slide-arw .prev,
#interview .slide-arw .next { width: 34px; height: 34px; border: none; z-index: 100; cursor: pointer;}
#interview .slide-arw .prev { position: absolute; right: 50px; top: 0;}
#interview .slide-arw .next { margin: 0 0 0 auto;}
#interview .slide-arw .prev div,
#interview .slide-arw .next div { position: relative; width: 100%; height: 100%; background: #000; border-radius: 50%; transition: 0.2s linear;}
#interview .slide-arw .prev svg,
#interview .slide-arw .next svg { position: absolute; left: 50%; top: 50%; fill: #fff; width: 50%;}
#interview .slide-arw .prev svg { transform: translate(-50%,-50%) rotate(180deg);}
#interview .slide-arw .next svg { transform: translate(-50%,-50%);}
#interview .slide-arw .prev div:hover,
#interview .slide-arw .next div:hover { background: #ba9d32;}
@media (max-width: 1401px) {
	#interview .ctn .slick-slide { transform: translateX(-50%);}
}
@media (max-width: 1281px) {
	#interview .ctn .slick-slide { transform: translateX(-8%);}
}
@media (max-width: 801px) {
	#interview .ttl h2 span.jp { left: 90px;}
	#interview .ctn .slick-slider{ margin-bottom: 20px;}
	#interview .ctn .slick-slide { transform: translateX(0%);}
	#interview .box figure img { border-radius: 15px;}
	#interview .box dl dt span.name { margin-right: 10px; font-size: 20px;}
	#interview .box dl dt span.eng { font-size: 14px;}
	#interview .box dl dd { font-size: 16px;}
}
@media (max-width: 481px) {
	#interview .ttl {}
	#interview .box { transform: translateX(-5%);}
	#interview .box { padding: 0 20px;}
	#interview .box.box-odd { padding-top: 30px;}
	#interview .slick-slider{ margin-bottom: 12px;}
	#interview .slide-arw { width: 88%;}
	#interview .slide-arw .prev,
	#interview .slide-arw .next { width: 30px; height: 30px;}
	#interview .slide-arw .prev { position: relative; right: auto;}
	#interview .slide-arw .next { position: absolute; left: 40px; margin: 0; top: 0;}
	#interview .box dl { bottom: 20px;}
	#interview .box dl dt > span { padding: 2px 12px 4px;}
	#interview .box dl dt span.name { margin-right: 10px; font-size: 16px;}
	#interview .box dl dt span.eng { font-size: 12px;}
	#interview .box dl dd { font-size: 12px;}
	#interview .box dl dd span { padding: 2px 10px;}
}





#numbers { position: relative; margin-bottom: 0px; z-index: 3;}
#numbers .inner-sct { position: relative; padding: 80px 0; background: #ededed; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px;}
#numbers .ttl { position: relative; width: 88%; max-width: 1200px; margin: 0 auto 20px;}
#numbers .ttl h2 span.jp { left: 160px;}
#numbers .ctn { width: 82%; max-width: 1000px; margin: 0 auto;}
#numbers .ctn ul { font-size: 0; margin: 0 auto 30px;}
#numbers .ctn ul li { display: inline-block; width: 50%; padding: 10px 15px;}
#numbers .ctn ul li img { width: 100%; border-radius: 20px;}
#numbers .ctn .btn { max-width: 200px; margin: 0 auto;}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
}
@media (max-width: 481px) {
	#numbers .inner-sct { padding: 60px 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
	#numbers .ttl { margin: 0 auto 8px;}
	#numbers .ttl h2 span.jp { left: 90px;}
	#numbers .ctn ul { margin: 0 auto 20px;}
	#numbers .ctn ul li { display: block; width: 100%; padding: 8px;}
	#numbers .ctn ul li img { border-radius: 10px;}
	#numbers .ctn .btn { max-width: 140px; margin: 0 0 0 8px;}
}



#link { position: relative; z-index: 2;}
#link:after { content: ''; display: block; width: 100%; height: calc(100% + 100px); position: absolute; left: 0; top: -50px; z-index: 1;
 background: #f6f6f6 url('../img/bg-2.png') no-repeat 50% 50%;
}
#link .inner-sct { position: relative; width: 88%; max-width: 1200px; margin: 0 auto; padding: 80px 0; z-index: 2;}
#link .bloc-1 { position: relative; margin-bottom: 80px; padding-right: 40%;}
#link .bloc-2 { position: relative; padding-left: 40%;}
#link .ttl { position: absolute; width: 38%;}
#link .bloc-1 .ttl {  right: 0; top: 25%;}
#link .bloc-2 .ttl { left: 5%; top: 50%; transform: translateY(-50%);}
#link .ttl h2 img { width: 100%;}
#link .bloc-1 .ttl  h2 span.jp { right: 20%; bottom: 30px;}
#link .bloc-2 .ttl  h2 span.jp { left: 30%;}

#link .ctn { position: relative; width: 100%;}
#link ul li { width: 100%; padding: 10px; font-size: 22px;}
#link ul li a { position: relative; display: block; width: 100%; color: #fff; font-weight: 700;}
#link ul li a:after { content: ''; display: block; width: 100%; padding-top: 34%; position: relative; border-radius: 20px;
 transition: 0.4s ease;
}
#link .bloc-1 ul li:nth-child(1) a:after { background: url('../img/link-1.jpg') no-repeat 50% 50% / 100% auto; }
#link .bloc-1 ul li:nth-child(2) a:after { background: url('../img/link-2.jpg') no-repeat 50% 50% / 100% auto; }
#link .bloc-2 ul li:nth-child(1) a:after { background: url('../img/link-3.jpg') no-repeat 50% 50% / 100% auto; }
#link ul li a span.txt { display: block; width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2;
 letter-spacing: 0.2rem; line-height: 1; text-align: center;
}
#link ul li a span.txt span.eng { display: block; margin-bottom: 18px; font-size: 25px; letter-spacing: 0.3rem;}
#link .bloc-1 ul li a:hover:after,
#link .bloc-2 ul li a:hover:after { background-size: 105% auto; opacity: 0.8;}
@media (max-width: 1281px) {
	#link .bloc-1 { margin-bottom: 40px;}
}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#link .bloc-1 { margin-bottom: 40px; padding-right: 0%;}
	#link .bloc-2 { padding-left: 0%;}
	#link .ttl { position: relative; width: 100%;}
	#link .bloc-1 .ttl { right: auto; left: 0;}
	#link .bloc-2 .ttl { left: auto; top: auto; transform: translateY(0%);}
	#link .ttl h2 img { width: 72%;}
	#link .bloc-1 .ttl  h2 span.jp { right: auto; left: 90px; bottom: 8px;}
	#link .bloc-2 .ttl  h2 span.jp { left: 90px; bottom: 12px;}


	#link ul { display: block; width: 100%; max-width: 400px; margin: 0 auto;}
	#link ul li { width: 100%; margin: 0 auto; padding: 15px 0;}
	#link ul li a:after { padding-top: 30%;}
}

@media (max-width: 481px) {
	#link .inner-sct { padding: 40px 0;}
	#link .bloc-1 .ttl { margin-bottom: 8px;}
	#link .bloc-2 .ttl { margin-bottom: 8px;}
	#link ul li { padding: 6px 0; font-size: 14px;}
	#link ul li a:after { border-radius: 8px;}
	#link ul li a span.txt {}
	#link ul li a span.txt span.eng { margin-bottom: 10px; font-size: 18px;}
}