@charset "utf-8";
#ft .inner-ft { background: #ededed;}

.ttl h2 { font-weight: 900; line-height: 1;}
.ttl h2 span.eng { display: inline-block; margin-bottom: 20px; padding-bottom: 8px; border-bottom: solid 3px #ba9d32; font-size: 40px; letter-spacing: 0.5rem;}
.ttl h2 span.jp { display: block; position: relative; 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) {
	.ttl h2 span.eng { font-size: 4.0vw}
}
@media (max-width: 481px) {
	.ttl h2 span.eng { margin-bottom: 12px; padding-bottom: 5px; font-size: 24px; letter-spacing: 0.25rem;}
	.ttl h2 span.jp { padding-left: 15px; font-size: 12px;}
	.ttl h2 span.jp:before { width: 6px; height: 6px;}
}




#wrapper { background: url('../img/index/bg-kv.png') no-repeat 50% 0 / 2000px auto;}
@media (max-width: 641px) {
	#wrapper { background: url('../img/index/bg-kv@sp.png') no-repeat 50% 0 / 100% auto;}
}

#kv {}
#kv .inner-kv { width: 90%; max-width: 1200px; margin: 0 auto; padding: 170px 0 100px;}
#kv .ctn { display: flex; width: 100%;}
#kv .txt { width: 45%; padding-top: 150px; padding-left: 50px;}
#kv .pht { width: 52%;}
#kv .txt h1 { font-size: 40px; font-weight: 900; letter-spacing: 0.6rem; line-height: 2;}
#kv .txt h1 span { display: block;}
#kv .pht figure img { width: 100%;}
@media (max-width: 1281px) {
	#kv .txt { padding-top: 10vw; padding-left: 2vw;}
	#kv .txt h1 { font-size: 3.2vw;}
}
@media (max-width: 801px) {
	#kv .inner-kv { padding: 120px 0 80px;}
	#kv .ctn { display: block;}
	#kv .txt { width: 100%; margin-bottom: 30px; padding-top: 0; padding-left: 0px; text-align: center;}
	#kv .txt h1 { display: inline-block; font-size: 40px; text-align: left;}
	#kv .pht { width: 100%;}
	#kv .pht figure { text-align: center;}
	#kv .pht figure img { max-width: 420px;}
}
@media (max-width: 481px) {
	#kv .inner-kv { width: 86%; padding: 80px 0 50px;}
	#kv .txt { margin-bottom: 20px; text-align: left;}
	#kv .txt h1 { font-size: 26px; letter-spacing: 0.25rem; line-height: 1.8;}
}



#news .inner-sct { padding: 100px 0 90px; background: #ededed; border-top-left-radius: 50px; border-top-right-radius: 50px;}
#news .ctn { width: 88%; max-width: 1200px; margin: 0 auto;}
#news .ctn .ttl { margin-bottom: 30px;}
#news .ctn ul { display: flex; justify-content: space-between; margin-bottom: 60px; font-size: 0; }
#news .ctn ul li { width: 24%; font-size: 16px;}
#news .ctn ul li a { display: block; width: 100%; max-width: 280px; color: #000; text-decoration: none; transition: 0.3s linear;}
#news .ctn ul li a dl dt { position: relative; width: 100%; padding-top: 52.5%; margin-bottom: 15px; border-radius: 20px; background: #fff; overflow: hidden;}
#news .ctn ul li a dl dt img { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); transition: 0.4s ease;}
#news .ctn ul li a dl dd { letter-spacing: 0.08rem;}
#news .ctn ul li a dl dd.tit { min-height: 3.4em; margin-bottom: 12px;}
#news .ctn ul li a dl dd time { display: inline-block; margin-right: 18px; color: #979797; font-weight: 700; vertical-align: middle;}
#news .ctn ul li a dl dd span.tag { display: inline-block; width: auto; min-width: 60px; background: #000; padding: 1px 8px 3px; background: #000; border-radius: 50px; color: #fff; font-size: 14px; line-height: 1.2; text-align: center; vertical-align: middle;}
#news .ctn .btn { max-width: 200px;}
#news .ctn ul li a:hover { opacity: 0.8;}
#news .ctn ul li a:hover dl dt img { transform: translate(-50%,-50%) scale(1.05);}
@media (max-width: 1201px) {
	#news .ctn ul li a dl dd time { margin-right: 12px;}
}
@media (max-width: 1025px) {
	#news .inner-sct { padding: 80px 0 100px;}
	#news .ctn .ttl { margin-bottom: 12px;}
	#news .ctn ul { flex-wrap: wrap;}
	#news .ctn ul li { width: 48.5%; padding: 18px 0;}
}
@media (max-width: 481px) {
	#news .inner-sct { padding: 40px 0 80px; border-top-left-radius: 20px; border-top-right-radius: 20px;}
	#news .ctn ul { margin-bottom: 20px;}
	#news .ctn ul li a dl dt { margin-bottom: 8px; border-radius: 12px;}
	#news .ctn ul li a dl dd { font-size: 12px; letter-spacing: 0.05rem;}
	#news .ctn ul li a dl dd time { margin-right: 8px; font-size: 10px;}
	#news .ctn ul li a dl dd span.tag { padding: 1px 6px 2px; font-size: 10px;}
	#news .ctn .btn { max-width: 140px;}
}


#philo { margin-bottom: 130px;}
#philo .inner-sct { position: relative; z-index: 2;}
#philo .inner-sct:before { content: ''; display: block; width: 100%; height: 160px; background: #ededed; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px;
 position: absolute; left: 0; top: 0; z-index: 1;
}
#philo .ctn-pht { position: relative; z-index: 2; width: 100%; padding-bottom: 60px;}
#philo .pht { width: 58.5%; margin: 0 0 0 auto;}
#philo .pht:after { content: ''; display: block; width: 100%; padding-top: 62%; border-top-left-radius: 50px; border-bottom-left-radius: 50px;
background: url('../img/index/pht-1.jpg') no-repeat 0 50% / auto 100%;
}
#philo .ctn { position: relative; display: flex; justify-content: space-between; width: 88%; max-width: 1300px; margin: 0 auto; padding: 0 0 40px 50px;
 background: url('../img/index/obj-2.png') no-repeat 100% 100% / 150px auto;
}
#philo .ctn:before { content: ''; display: block; width: 280px; height: 320px; background: url('../img/index/obj-1.png') no-repeat 50% 0 / 100% auto;
 position: absolute; left: 0; top: -150px; z-index: 1;
}
#philo .ttl { position: relative; width: 38%; z-index: 2;}
#philo .txt { position: relative; width: 61%; z-index: 2;}
#philo .txt h3 { margin-bottom: 20px; font-size: 26px; font-weight: 700; letter-spacing: 0.2rem;}
#philo .txt h3 br { display: none;}
#philo .txt p { margin-bottom: 40px; font-size: 18px; line-height: 2; letter-spacing: 0.2rem;}
#philo .txt p span { display: block;}
#philo .txt .btn { max-width: 200px;}
@media (max-width: 1001px) {
	#philo .txt p { font-size: 16px;}
}
@media (max-width: 801px) {
	#philo .ctn-pht { padding-bottom: 40px;}
	#philo .pht { width: 80%;}
	#philo .ctn { display: block; padding: 0 0 40px; background-position: 50% 100%; background-size: 100px auto;}
	#philo .ctn:before { left: auto; right: 5%; top: 0; width: 180px; height: 210px;}
	#philo .ttl { width: 100%; margin-bottom: 30px;}
	#philo .txt h3 br { display: block;}
	#philo .txt { width: 100%;}
}
@media (max-width: 481px) {
	#philo { margin-bottom: 80px;}
	#philo .inner-sct:before { height: 120px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
	#philo .ctn-pht { padding-bottom: 30px;}
	#philo .pht:after { border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
	#philo .ctn { padding: 0 0px 20px; background-position: 65% 100%; background-size: 60px auto;}
	#philo .ctn:before { right: 0%; width: 110px; height: 125px;}
	#philo .ttl { margin-bottom: 20px;}
	#philo .txt h3 { margin-bottom: 12px; font-size: 18px;}
	#philo .txt p { margin-bottom: 20px; font-size: 13px; letter-spacing: 0.05rem;}
	#philo .txt p span { display: inline;}
	#philo .txt .btn { max-width: 140px;}
}


#business { margin-bottom: 80px;}
#business .inner-sct { position: relative;}
#business .inner-sct:after { content: ''; display: block; width: 100%; height: calc(100% - 40px); position: absolute; left: 0; bottom: 0; z-index: 1;
 background: url('../img/index/bg-2.jpg') no-repeat 50% 50% / auto 100%; border-radius: 50px;
}
#business .ctn { position: relative; display: flex; justify-content: space-between; flex-direction: row-reverse;
 width: 88%; max-width: 1200px; margin: 0 auto; padding-bottom: 50px; z-index: 2;
}
#business .left{ width: 48%; padding-top: 150px;}
#business .pht { width: 50%;}
#business .left .ttl { margin-bottom: 40px;}
#business .left .txt h3 { margin-bottom: 20px; font-size: 26px; font-weight: 700; letter-spacing: 0.2rem;}
#business .left .txt h3 br { display: none;}
#business .left .txt .inner { width: 100%; max-width: 530px; margin-bottom: 30px;}
#business .left .txt p { font-size: 18px; line-height: 2; letter-spacing: 0.2rem;}
#business .left .btn { max-width: 200px;}
#business .pht figure { text-align: center;}
#business .pht figure img { width: 92%; max-width: 500px;}
@media (max-width: 1001px) {
	#business .left .txt p { font-size: 16px;}
}
@media (max-width: 801px) {
	#business .inner-sct:after { background: url('../img/index/bg-2@sp.jpg') no-repeat 50% 50% / 100% auto;}
	#business .ctn { display: block; padding-bottom: 60px;}
	#business .pht { width: 100%;}
	#business .left { width: 100%; padding-top: 30px;}
	#business .left .ttl { margin-bottom: 30px;}
	#business .pht figure img { width: 68%; max-width: 480px;}
}
@media (max-width: 481px) {
	#business { margin-bottom: 40px;}
	#business .inner-sct:after { border-radius: 20px;}
	#business .left { padding-top: 12px;}
	#business .left .ttl { margin-bottom: 20px;}
	#business .left .txt h3 { margin-bottom: 12px; font-size: 18px;}
	#business .left .txt h3 br { display: block;}
	#business .left .txt p { margin-bottom: 20px; font-size: 13px; letter-spacing: 0.05rem;}
	#business .left .btn { max-width: 140px;}
}


#recruit { margin-bottom: 160px;}
#recruit .inner-sct { position: relative; min-height: 730px;}
#recruit .inner-sct:before { content: ''; display: block; width: 48%; padding-top: 52%;
 background: url('../img/index/pht-3.png') no-repeat 100% 50% / auto 100%;
}
#recruit .ctn { position: absolute; left: 0; top: 0; width: 100%; z-index: 2;}
#recruit .ctn .ctn-inner { width: 88%; max-width: 1200px; margin: 0 auto;}
#recruit .ctn .inner { width: 48%; margin: 0 0 0 auto; padding-top: 150px;
 background: url('../img/index/obj-3.png') no-repeat 100% 0 / 160px auto;
}
#recruit .ctn .ttl { margin-bottom: 40px;}
#recruit .ctn .txt h3 { margin-bottom: 20px; font-size: 26px; font-weight: 700; letter-spacing: 0.2rem;}
#recruit .ctn .txt p { margin-bottom: 40px; font-size: 18px; line-height: 2; letter-spacing: 0.2rem;}
#recruit .ctn .txt .btn { max-width: 200px;}
@media (max-width: 1001px) {
	#recruit .ctn .txt p { font-size: 16px;}
}
@media (max-width: 801px) {
	#recruit { margin-bottom: 120px;}
	#recruit .inner-sct { min-height: auto; padding: 20px 0;}
	#recruit .inner-sct:before { width: 100%; padding-top: 76%; background: url('../img/index/pht-3-sp.png') no-repeat 50% 50% / auto 100%;}
	#recruit .inner-sct:after { content: ''; display: block; width: 80px; height: 80px; background: #fff; border-radius: 15px;
	 position: absolute; right: 4%; bottom: 0;
	}
	#recruit .ctn { position: relative; left: auto; top: auto;}
	#recruit .ctn .inner { width: 100%; padding-top: 40px; background-position: 60% 40px; background-size: 100px auto;}
}
@media (max-width: 481px) {
	#recruit { margin-bottom: 60px;}
	#recruit .inner-sct:after { width: 60px; height: 60px;}
	#recruit .ctn .inner { padding-top: 30px; background-position: 70% 30px; background-size: 80px auto;}
	#recruit .ctn .ttl { margin-bottom: 20px;}
	#recruit .ctn .txt h3 { margin-bottom: 12px; font-size: 18px;}
	#recruit .ctn .txt p { margin-bottom: 20px; font-size: 13px; letter-spacing: 0.05rem;}
	#recruit .ctn .txt .btn { max-width: 140px;}
}


#link { position: relative; }
#link .inner-sct { position: relative; width: 100%; }
#link .inner-sct:after { content: ''; display: block; width: 100%; height: 50%; background: #ededed; position: absolute; left: 0; bottom: 0;
  border-top-left-radius: 50px; border-top-right-radius: 50px;
}
#link ul { position: relative; z-index: 2; display: flex; justify-content: space-between; width: 90%; max-width: 1200px; margin: 0 auto;}
#link ul li { width: 31.5%; 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: 62%; position: relative; border-radius: 20px;
 transition: 0.4s ease;
}
#link ul li:nth-child(1) a:after { background: url('../img/index/link-1.jpg') no-repeat 50% 50% / 100% auto; }
#link ul li:nth-child(2) a:after { background: url('../img/index/link-2.jpg') no-repeat 50% 50% / 100% auto; }
#link ul li:nth-child(3) a:after { background: url('../img/index/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 ul li a:hover:after { background-size: 105% auto; opacity: 0.8;}
@media (max-width: 801px) {
	#link .inner-sct:after { height: 84%;}
	#link ul { display: block; width: 86%; max-width: 400px; margin: 0 auto;}
	#link ul li { width: 100%; margin: 0 auto; padding: 15px 0;}
	#link ul li a:after { padding-top: 45%;}
}

@media (max-width: 481px) {
	#link .inner-sct { padding: 20px 0;}
	#link .inner-sct:after { border-top-left-radius: 20px; border-top-right-radius: 20px;}
	#link ul li { padding: 6px 0; font-size: 16px;}
	#link ul li a:after { padding-top: 45%;}
	#link ul li a span.txt {}
	#link ul li a span.txt span.eng { margin-bottom: 12px; font-size: 18px;}
}




#gallery .inner-sct { padding: 100px 0 80px; background: #ededed; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px;}
#gallery .ttl { position: relative; width: 88%; max-width: 1200px; margin: 0 auto 30px;}
#gallery .ctn {}
#gallery .ctn .slick-slider{ margin-bottom: 30px;}
#gallery .ctn .slick-slide { transform: translateX(-30%);}
#gallery .ctn .slick-slide img { width: 94%; border-radius: 30px;}
#gallery .slide-arw { position: relative; width: 92%; max-width: 1200px; margin: 0 auto;}
#gallery .slide-arw .prev,
#gallery .slide-arw .next { width: 34px; height: 34px; border: none; z-index: 100; cursor: pointer;}
#gallery .slide-arw .next { position: absolute; left: 50px; top: 0;}
#gallery .slide-arw .prev div,
#gallery .slide-arw .next div { position: relative; width: 100%; height: 100%; background: #000; border-radius: 50%; transition: 0.2s linear;}
#gallery .slide-arw .prev svg,
#gallery .slide-arw .next svg { position: absolute; left: 50%; top: 50%; fill: #fff; width: 50%;}
#gallery .slide-arw .prev svg { transform: translate(-50%,-50%) rotate(180deg);}
#gallery .slide-arw .next svg { transform: translate(-50%,-50%);}
#gallery .slide-arw .prev div:hover,
#gallery .slide-arw .next div:hover { background: #ba9d32;}
@media (max-width: 1401px) {
	#gallery .ctn .slick-slide { transform: translateX(-50%);}
}
@media (max-width: 1281px) {
	#gallery .ctn .slick-slide { transform: translateX(-8%);}
}
@media (max-width: 801px) {
	#gallery .inner-sct { padding: 60px 0;}
	#gallery .ctn .slick-slider{ margin-bottom: 20px;}
	#gallery .ctn .slick-slide { transform: translateX(0%);}
	#gallery .ctn .slick-slide img { width: 92%; margin: 0 auto; border-radius: 15px;}
}
@media (max-width: 481px) {
	#gallery .inner-sct { padding: 60px 0 40px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
	#gallery .ttl { margin-bottom: 20px;}
	#gallery .slide-arw { width: 88%;}
	#gallery .slide-arw .prev,
	#gallery .slide-arw .next { width: 30px; height: 30px;}
	#gallery .slide-arw .next { left: 40px;}
}


#access .inner-sct { position: relative; padding: 120px 0 110px;}
#access .ctn { position: relative; width: 88%; max-width: 1200px; margin: 0 auto; padding-top: 130px; z-index: 2;}
#access .ctn:after { content: ''; display: block; width: 230px; height: 280px; background: url('../img/index/obj-4.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 20%; top: 0; z-index: 1;
}
#access .ctn .ttl { position: relative; z-index: 2; margin-bottom: 30px;}
#access .ctn .txt { position: relative; z-index: 2;}
#access .ctn .txt ul { margin-bottom: 30px;}
#access .ctn .txt ul li { padding: 6px 0; font-size: 18px; font-weight: 700; letter-spacing: 0.2rem;}
#access .ctn .txt dl dt,
#access .ctn .txt dl dd { font-size: 18px; letter-spacing: 0.2rem;}
#access .ctn .txt dl dt { font-weight: 900;}
#access .ctn .txt dl dd { font-weight: 700;}
#access .map { width: 48%; position: absolute; right: 0; top: 120px; z-index: 3;}
#access .map #google-map { width: 100%; height: 550px; background: #eee; border-top-left-radius: 50px; border-bottom-left-radius: 50px; overflow: hidden;}
@media (max-width: 1001px) {
	#access .ctn .txt ul li { font-size: 16px; letter-spacing: 0.1rem;}
	#access .ctn .txt dl dt,
	#access .ctn .txt dl dd { font-size: 16px; letter-spacing: 0.1rem;}
}
@media (max-width: 801px) {
	#access .inner-sct { padding: 60px 0;}
	#access .ctn { margin-bottom: 30px; padding-top: 80px;}
	#access .ctn:after { left: auto; right: 0;}
	#access .ctn .txt ul li { padding: 2px 0;}
	#access .map { position: relative; right: auto; top: auto; width: 90%; margin: 0 auto;}
	#access .map #google-map { height: 450px; border-radius: 50px;}
}
@media (max-width: 481px) {
	#access .inner-sct { padding: 30px 0 50px;}
	#access .ctn { padding-top: 30px;}
	#access .ctn:after { width: 120px; height: 145px;}
	#access .ctn .ttl { margin-bottom: 20px;}
	#access .ctn .txt ul { margin-bottom: 12px;}
	#access .ctn .txt ul li { font-size: 13px; letter-spacing: 0.05rem;}
	#access .ctn .txt dl dt,
	#access .ctn .txt dl dd { font-size: 13px; letter-spacing: 0.05rem;}
	#access .map #google-map { height: 300px; border-radius: 20px;}
}

#contact .inner-sct { padding: 70px 0 20px; background: #ededed; border-top-left-radius: 50px; border-top-right-radius: 50px;}
#contact .ctn { width: 90%; max-width: 1080px; margin: 0 auto; padding: 50px 0 70px; background: #fff; border-radius: 50px;}
#contact .ctn h3 { margin-bottom: 35px; font-size: 40px; font-weight: 700; letter-spacing: 0.2rem; line-height: 1.25; text-align: center;}
#contact .ctn h3 span { display: inline-block; border-bottom: solid 3px #ba9d32;}
#contact .ctn .btn { width: 60%; max-width: 350px; margin: 0 auto;}
#contact .ctn .btn a { padding: 12px 0; font-size: 24px;}
#contact .ctn .btn a:before { width: 10px; height: 10px;}
#contact .ctn .btn a svg { width: 22px;}
#contact .ctn .btn a:hover:before{ height: 2px; transform: translate(50px,-50%);}
@media (max-width: 801px) {
	#contact .ctn .btn a { text-align: center;}
	#contact .ctn .btn a span { padding-left: 0px;}
}
@media (max-width: 481px) {
	#contact .inner-sct { padding: 30px 0 12px; border-top-left-radius: 20px; border-top-right-radius: 20px;}	
	#contact .ctn { padding: 30px 0 40px; border-radius: 25px;}
	#contact .ctn h3 { margin-bottom: 20px; font-size: 24px;}
	#contact .ctn h3 span { border-width: 2px;}
	#contact .ctn .btn a { padding: 8px 0; font-size: 16px;}
	#contact .ctn .btn a:before { width: 6px; height: 6px;}
	#contact .ctn .btn a svg { width: 16px;}
}