@charset "utf-8";
#ft { background: #f2f4f9;}


#kv .inner-kv { position: relative; height: 750px; background: url('../img/bg-kv.jpg') no-repeat 50% 50% / cover;}
#kv .ctn { position: relative; width: 88%; max-width: 1100px; height: 100%; margin: 0 auto; z-index: 2;}
#kv .ctn .txt { position: absolute; width: 100%; bottom: 120px;}
#kv .ctn .txt h1 span.grad { display: inline-block; font-size: 50px; letter-spacing: 0.5rem; line-height: 1.2;
 font-weight: bold;
 background: linear-gradient(90deg, #8b9bca, #afbace);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 font-feature-settings: "palt";
}
#kv .ctn .txt h1 span.wh { display: inline-block; margin: 8px 0; padding: 0px 10px; background: #fff;}
#kv .bg { display: none; position: relative; z-index: 1;}
#kv .bg img { width: 100%;}
@media (max-width: 801px) {
	#kv .inner-kv { height: auto;}
	#kv .ctn { position: absolute; left: 0; bottom: 8vw; width: 100%; height: auto;}
	#kv .ctn .txt { position: relative; left: auto; bottom: auto; width: 88%; margin: 0 auto;}
	#kv .ctn .txt h1 span.grad { font-size: 36px;}
	#kv .bg { display: block;}
}
@media (max-width: 481px) {
	#kv .ctn { bottom: 7.2vw;}
	#kv .ctn .txt h1 span.grad { font-size: 26px; letter-spacing: 0.3rem;}
	#kv .ctn .txt h1 span.wh { margin: 6px 0; padding: 0px 0px 0px 6px; background: #fff;}
}


.ttl {}
.ttl:before { content: ''; display: block; width: 14px; height: 14px; margin-bottom: 18px; background: linear-gradient(90deg, #b5c2ea, #dce0e8);}
.ttl h2 { color: #000; font-weight: 700; line-height: 1;}
.ttl h2 span.eng { display: block; margin-bottom: 18px; font-size: 46px; letter-spacing: 0.25rem;}
.ttl h2 span.jp { display: block; position: relative; font-size: 16px; letter-spacing: 0.2rem; line-height: 1;}
@media (max-width: 481px) {
	.ttl:before { width: 12px; height: 12px; margin-bottom: 10px;}
	.ttl h2 span.eng { margin-bottom: 8px; font-size: 24px; letter-spacing: 0.2rem;}
	.ttl h2 span.jp { font-size: 12px;}
}


#news .inner-sct { width: 88%; max-width: 1100px; margin: 0 auto; padding: 60px 0 80px;}
#news .ctn { position: relative; padding-left: 260px; min-height: 250px;}
#news .ttl { position: absolute; left: 0; top: 0; width: 100%; max-width: 260px;}
#news .btn { position: absolute; left: 0; top: 140px; width: 100%; max-width: 190px;}
#news .cate { margin-bottom: 18px; padding-top: 32px;}
#news .cate ul { font-size: 0px; line-height: 1;}
#news .cate ul li { position: relative; display: inline-block; margin-right: 30px; font-size: 18px; font-weight: 700;}
#news .cate ul li:last-child { margin-right: 0px;}
#news .cate ul li span { display: block; padding-bottom: 10px; color: #000; text-decoration: none; cursor: pointer;}
#news .cate ul li:after { content: ''; display: block; width: 100%; height: 3px;}
#news .cate ul li.active:after { background: linear-gradient(90deg, #8b9bca, #dce0e8);}
#news .cate ul li:hover span { color: #8b9bca;}
#news .list {}
#news .list .news-box { display: none;}
#news .list .news-box.show { display: block;}
#news .list ul { font-size: 0px; line-height: 1;}
#news .list ul li { position: relative; padding: 18px 0; border-bottom: solid 1px #c6cfe9; font-size: 16px; font-weight: 700;}
#news .list ul li a { text-decoration: none;}
#news .list ul li a dl dt { margin-bottom: 12px;}
#news .list ul li a dl dt time,
#news .list ul li a dl dt span { display: inline-block; line-height: 22px; vertical-align: middle;}
#news .list ul li a dl dt time { margin-right: 18px; color: #4c4c4c; font-size: 16px; letter-spacing: 0.05rem;}
#news .list ul li a dl dt span { display: none !important; padding: 0px 15px; background: linear-gradient(90deg, #8b9bca, #dce0e8); border-radius: 50px;
 font-size: 14px; letter-spacing: 0.05rem;
}
#news .list ul li a dl dd { color: #000; font-size: 16px; letter-spacing: 0.1rem; line-height: 1.4;}
#news .list ul li a:hover dd { color: #8b9bca;}

@media (max-width: 1201px) {
}
@media (max-width: 1001px) {
	#news .ctn { padding-left: 220px;}
	#news .ttl { max-width: 220px;}
	#news .list ul li { font-size: 14px;}
}
@media (max-width: 641px) {
	#news .ctn { padding-left: 0px;}
	#news .ttl { position: relative; left: auto; top: auto; max-width: 100;}
	#news .cate ul { display: flex; width: 100%; justify-content: space-between; text-align: center;}
	#news .cate ul li { width: 28%; margin: 0;}
	#news .cate ul li:after { background: #ececec;}

	#news .list { margin-bottom: 30px;}
	#news .btn { position: relative; left: auto; top: auto; width: 100%; max-width: 190px;}
}
@media (max-width: 481px) {
	#news .inner-sct { padding: 40px 0 50px;}
	#news .ctn { min-height: auto;}
	#news .cate { margin-bottom: 12px; padding-top: 20px;}
	#news .cate ul li { font-size: 14px;}
	#news .cate ul li:after { height: 2px;}
	#news .cate ul li span { padding-bottom: 8px;}

	#news .list ul li { padding: 15px 0; font-size: 12px;}
	#news .list ul li a dl dt { margin-bottom: 6px;}
	#news .list ul li a dl dt time,
	#news .list ul li a dl dt span { line-height: 15px;}
	#news .list ul li a dl dt time { margin-right: 12px; font-size: 12px;}
	#news .list ul li a dl dt span { padding: 0px 10px; font-size: 11px;}
	#news .list ul li a dl dd { font-size: 12px;}

	#news .btn { width: 150px;}
}


#about { position: relative; background: #f2f4f9;}
#about:after { content: ''; display: block; width: 100%; height: 200px; background: #fff;
 position: absolute; left: 0; bottom: 0; z-index: 1;
}
#about .inner-sct { position: relative; padding-bottom: 40px; z-index: 2;}
#about .ttl { margin-bottom: 40px;}
#about .ctn { position: relative; width: 88%; max-width: 1100px; margin: 0 auto; padding: 80px 0 72px;}
#about .flex { display: flex; justify-content: space-between;}
#about .txt { width: 55%;}
#about .logo{ width: 40%;}
#about .txt h3 { margin-bottom: 30px; font-size: 27px; font-weight: 700; letter-spacing: 0.2rem;}
#about .txt p { font-size: 18px; letter-spacing: 0.1rem; line-height: 1.8;}
#about .logo img { width: 96%;}
#about .img { width: 100%; max-width: 1100px; margin: 0 auto;}
#about .img figure img { width: 100%;}
#about .img figure img.sp { display: none;}
@media (max-width: 801px) {
	#about .flex { display: block;}
	#about .txt { width: 100%; margin-bottom: 40px;}
	#about .logo{ width: 100%; text-align: center;}
	#about .txt h3 { margin-bottom: 20px; font-size: 24px; letter-spacing: 0.1rem;}
	#about .txt p { font-size: 16px;}
	#about .logo img { width: 72%; max-width: 400px;}
}
@media (max-width: 481px) {
	#about:after { position: relative; height: 30px;}
	#about .inner-sct { padding-bottom: 0px;}

	#about .ctn { padding: 40px 0px 60px;}
	#about .ttl { margin-bottom: 20px;}

	#about .txt { margin-bottom: 50px;}
	#about .txt h3 { margin-bottom: 12px; font-size: 17px; letter-spacing: 0.1rem;}
	#about .txt p { font-size: 13px;}
	#about .img figure img.pc { display: none;}
	#about .img figure img.sp { display: block;}
}


#business { position: relative;}
#business .inner-sct { position: relative; padding: 80px 0 100px;}
#business .inner-sct:before,
#business .inner-sct:after { content: ''; display: block; width: 300px; height: 580px; position: absolute;}
#business .inner-sct:before{ background: url('../img/bg-R.png') no-repeat 0 50% / auto 100%;
 right: 0; top: 0;
}
#business .inner-sct:after { background: url('../img/bg-L.png') no-repeat 100% 50% / auto 100%;
 left: 0; bottom: 180px;
}
#business .ctn { position: relative; width: 88%; max-width: 1100px; margin: 0 auto; z-index: 2;}
#business .bloc{ position: relative; padding: 40px 0; z-index: 2;}
#business .bloc .flex { display: flex; justify-content: space-between;}
#business .bloc .flex.re { flex-direction: row-reverse;}
#business .bloc .pht { width: 44%;}
#business .bloc .txt { width: 50%;}
#business .bloc .pht figure img { width: 100%;}
#business .bloc .txt h3 { position: relative; margin-bottom: 20px; padding-left: 25px;
 font-size: 25px; font-weight: 700; letter-spacing: 0.2rem; line-height: 1.2;
}
#business .bloc .txt h3:before { content: ''; display: block; width: 14px; height: 14px; background: linear-gradient(90deg, #b5c2ea, #dce0e8);
 position: absolute; left: 0; top: 0.15em;;
}
#business .bloc .txt p { font-size: 17px; letter-spacing: 0.2rem; line-height: 1.85;}
@media (max-width: 801px) {
	#business .inner-sct:before,
	#business .inner-sct:after { width: 240px; height: 420px;}
	#business .bloc .txt h3 { font-size: 21px; letter-spacing: 0.1rem;}
	#business .bloc .txt p { font-size: 14px; letter-spacing: 0.1rem;}
}
@media (max-width: 641px) {
	#business .inner-sct { padding: 40px 0 20px;}
	#business .inner-sct:before,
	#business .inner-sct:after { width: 100px; height: 280px;}
	#business .inner-sct:after { bottom: 55%;}
	
	#business .ctn { width: 100%;}
	#business .ctn:after { content: ''; display: block; width: 100px; height: 280px;
		background: url('../img/bg-R.png') no-repeat 0 50% / auto 100%;
		 position: absolute; right: 0; bottom: 20%;
	}
	#business .ttl { width: 88%; margin: 0 auto;}
	#business .bloc{ width: 88%; margin: 0 auto; padding: 30px 0;}
	#business .bloc .flex { display: block;}
	#business .bloc .pht { width: 100%; margin-bottom: 20px;}
	#business .bloc .txt { width: 100%;}
	#business .bloc .txt h3 { margin-bottom: 12px; padding-left: 18px; font-size: 18px; letter-spacing: 0.08rem;}
	#business .bloc .txt h3:before { width: 8px; height: 8px;}
	#business .bloc .txt p { font-size: 13px;}

}


#company { position: relative; background: #f2f4f9;}
#company .inner-sct { position: relative; width: 88%; max-width: 1100px; margin: 0 auto; padding: 80px 0; z-index: 2;}
#company .ctn { position: relative; padding-left: 340px; padding-top: 40px;}
#company .ttl { position: absolute; left: 0; top: 0; width: 100%; max-width: 300px;}
#company .ctn ul { border-top: solid 1px #c6cfe9;}
#company .ctn ul li { padding: 15px 0; border-bottom: solid 1px #c6cfe9;}
#company .ctn ul li dl { display: table; width: 100%;}
#company .ctn ul li dl dt,
#company .ctn ul li dl dd { display: table-cell;}
#company .ctn ul li dl dt { width: 180px; font-size: 18px; font-weight: 700; letter-spacing: 0.1rem;}
#company .ctn ul li dl dd { width: auto; font-size: 18px; letter-spacing: 0.1rem;}
@media (max-width: 801px) {
	#company .ctn { padding-left: 0px; padding-top: 0px;}
	#company .ttl { position: relative; left: auto; top: auto; margin-bottom: 40px;}
	#company .ctn ul li dl dt { width: 120px; font-size: 14px;}
	#company .ctn ul li dl dd { width: auto; font-size: 14px;}
}
@media (max-width: 481px) {
	#company .inner-sct { padding: 40px 0;}
	#company .ttl { margin-bottom: 25px;}
	#company .ctn ul li { padding: 10px 0;}
	#company .ctn ul li dl dt,
	#company .ctn ul li dl dd { display: block;}
	#company .ctn ul li dl dt { width: 100%; font-size: 14px;}
	#company .ctn ul li dl dd { width: 100%; font-size: 13px;}
}


#access { position: relative;}
#access:after { content: ''; display: block; width: 100%; height: 250px; background: #f2f4f9;
 position: absolute; left: 0; bottom: 0; z-index: 1;
}
#access .inner-sct { position: relative; width: 88%; max-width: 1100px; margin: 0 auto; padding: 80px 0 50px; z-index: 2;}
#access .ttl { margin-bottom: 40px;}
#access .ctn ul { margin-bottom: 50px; font-size: 0;}
#access .ctn ul li { position: relative; display: inline-block; padding: 4px; padding-left: 25px; font-size: 18px; letter-spacing: 0.08rem; line-height: 1.4;}
#access .ctn ul li:nth-child(odd) { width: 40%;}
#access .ctn ul li:nth-child(even){ width: 60%;}
#access .ctn ul li:before { content: ''; display: block; width: 10px; height: 10px;
 background: linear-gradient(90deg, #b5c2ea, #dce0e8);
 position: absolute; left: 0; top: 0.64em;;
}
#access .ctn dl { position: relative; margin-bottom: 30px; padding-left: 160px; font-size: 18px;}
#access .ctn dl dt { width: 128px; border-right: solid 1px #c8c8c8; font-weight: 700; line-height: 1.2;
 position: absolute; left: 0; top: 0.2em;
}
#access .ctn dl dd { letter-spacing: 0.1rem;}

#access .map #google-map { width: 100%; height: 460px; }
#access .map #google-map iframe { width: 100%; height: 100%; border: none;}
@media (max-width: 801px) {
	#access .ctn ul li { display: block; font-size: 16px;}
	#access .ctn ul li:nth-child(odd) { width: 100%;}
	#access .ctn ul li:nth-child(even){ width: 100%;}
	#access .ctn dl { padding-left: 160px; font-size: 16px;}
	#access .map #google-map { height: 320px; }
}
@media (max-width: 481px) {
	#access:after { height: 120px;}
	#access .inner-sct { padding: 40px 0 20px; z-index: 2;}
	#access .ttl { margin-bottom: 20px;}
	#access .ctn ul { margin-bottom: 30px;}
	#access .ctn ul li { position: relative; display: inline-block; padding: 3px; padding-left: 15px; font-size: 13px;}
	#access .ctn ul li:before { width: 8px; height: 8px;}
	#access .ctn dl { margin-bottom: 20px; padding-left: 100px; font-size: 14px;}
	#access .ctn dl dt { width: 85px;}
	#access .ctn dl dd { font-size: 12px;}
	#access .ctn dl dd span { display: block;}
	#access .map #google-map { height: 200px; }
}



#contact { position: relative; background: #f2f4f9;}
#contact .inner-sct { position: relative; width: 88%; max-width: 1100px; margin: 0 auto; padding: 50px 0 80px;}
#contact .ttl { margin-bottom: 30px;}
#contact .formBloc { width: 100%;}
#contact .formBloc ul li { padding: 20px 0; border-bottom: solid 1px #c6cfe9;}
#contact .formBloc ul li dl { display: table; width: 100%;}
#contact .formBloc ul li dl dt,
#contact .formBloc ul li dl dd { display: table-cell; vertical-align: top;}
#contact .formBloc ul li dl dt { width: 300px; padding-top: 6px; font-size: 18px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.2;}
#contact .formBloc ul li dl dt span.require { position: relative; display: inline-block; margin-left: 10px; padding: 2px 8px; background: #b44e7c; border-radius: 50px; transform: translateY(-2px);
	color: #fff; font-size: 14px;
}
#contact .formBloc ul li dl dd .select { position: relative; width: 100%; max-width: 260px;}
#contact .formBloc ul li dl dd .select:after { content: ''; display: block; width: 0px; height: 0px;
 border: solid 8px transparent; border-top: solid 12px #000; border-bottom: 0px;
 position: absolute; right: 10px; top: 16px;
}
#contact .formBloc ul li dl dd .select select { position: relative; width: 100%; padding: 8px 10px; background: transparent; border: none;
 background: #fff; border: solid 1px #c6cfe9; border-radius: 6px;
 appearance: none; -webkit-appearance: none;
}
#contact .formBloc ul li dl dd input[type="text"],
#contact .formBloc ul li dl dd input[type="email"],
#contact .formBloc ul li dl dd input[type="tel"] { width: 100%; max-width: 730px; padding: 8px 10px; background: #fff; border: solid 1px #c6cfe9; border-radius: 6px;}
#contact .formBloc ul li dl dd textarea { width: 100%; max-width: 730px; height: 220px; padding: 8px 10px; background: #fff; border: solid 1px #c6cfe9; border-radius: 6px;}

#contact .confirm { padding: 40px 0;}
#contact .confirm p { position: relative; text-align: center;}
#contact .confirm p input[type="checkbox"] { display: inline-block; width: 20px; height: 20px; margin-right: 12px; background: #fff; border: none; outline: none; vertical-align: sub;}
#contact .confirm p a { color: #000;}
#contact .confirm p a:hover { text-decoration: none;}


#contact .btn-submit { position: relative; width: 80%; max-width: 360px; margin: 0 auto;
 background: linear-gradient(90deg, #b5c2ea, #dce0e8); background-size: 150% 150%; background-position: 100% 0%;
 border-radius: 50px; overflow: hidden;
 transition: background 0.4s ease;
}
#contact .btn-submit::before { content: ''; width: 0px; height: 0px;
 border: solid 6px transparent; border-left: solid 12px #000;
 position: absolute; right: 30px; top: 50%; transform: translate(0,-50%); z-index: 2;
 transition: 0.4s ease;
}
#contact .btn-submit input[type="submit"] { position: relative; display: block; width: 100%;
 padding: 15px 0; padding-left: 60px; background: none; border: none; z-index: 2;
 color: #000; font-size: 20px; font-weight: 700; letter-spacing: 0.2rem; text-align: left; text-decoration: none;
 transition: 0.4s ease 0.06s;
}
#contact .btn-submit input[type="submit"]:disabled { background: #ccc;}
#contact .btn-submit .wpcf7-spinner { position: absolute; left: 50%;}

#contact .btn-submit:hover { background-position: 0% 0%;}
#contact .btn-submit:hover input[type="submit"] { text-indent: 20px;}
#contact .btn-submit:hover:before{ height: 2px; transform: translate(50px,-50%);}
@media (max-width: 801px) {
	#contact .formBloc ul li dl dt,
	#contact .formBloc ul li dl dd { display: block;}
	#contact .formBloc ul li dl dt { width: 100%; margin-bottom: 10px; padding-top: 0px; font-size: 16px;}
	#contact .formBloc ul li dl dt span.require { font-size: 12px;}
	#contact .formBloc ul li dl dd { width: 100%;}
}
@media (max-width: 481px) {
	#contact .ttl { margin-bottom: 20px;}
	#contact .formBloc ul li { padding: 12px 0;}
	#contact .formBloc ul li dl dt { margin-bottom: 6px; font-size: 14px;}
	#contact .formBloc ul li dl dt span.require { font-size: 10px;}
	#contact .formBloc ul li dl dd .select select { padding: 6px 8px;}
	#contact .formBloc ul li dl dd input[type="text"],
	#contact .formBloc ul li dl dd input[type="email"],
	#contact .formBloc ul li dl dd input[type="tel"] { padding: 6px;}
	#contact .formBloc ul li dl dd textarea { height: 120px; padding: 6px;}
	
	#contact .confirm { padding: 20px 0;}
	#contact .confirm p { font-size: 13px;}

	#contact .btn-submit input[type="submit"] { padding: 10px 0; font-size: 14px; padding-left: 30px;}
	#contact .btn-submit:before{ width: 5px; height: 5px; right: 15px;}
	#contact .btn-submit:hover input[type="submit"] { text-indent: 20px;}

}