@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(normalize.css);
@import url(../plugin/fontawesome/css/all.min.css);
@import url(../plugin/aos/aos.css);
/*@import url(../plugin/OwlCarousel/assets/owl.carousel.min.css); @import url(../plugin/OwlCarousel/assets/owl.theme.default.css);*/
/*@import url(../plugin/lightGallery/css/lightgallery.min.css);*/
/*@import url(../plugin/Remodal/remodal.css); @import url(../plugin/Remodal/remodal-default-theme.css);*/
@import url(../plugin/slick/slick.css); @import url(../plugin/slick/slick-theme.css);
@import url(common_parts.css);
@import url(common.css);

/*
 whats-jts
==============================*/

body { background-color: #629CDE; }
footer { background-color: #003B80; }

/* index-header ----------*/
#index-header { padding: 7rem 2rem 0; }
#index-header .inner { position: relative; }
#index-header .inner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 75%; background-image: url(../images/whats-jts/header_bg1.svg); background-repeat: no-repeat; background-position: center; background-size: contain; }
#index-header h1 { margin-bottom: 7rem; color: #003B80; line-height: 1; }
#index-header h1 span { display: block; text-align: center; }
#index-header h1 .e { font-size: 10rem; font-weight: 800; font-family: 'Saira Extra Condensed', sans-serif; letter-spacing: 0.05em; }
#index-header h1 .j { margin-top: 3rem; font-size: 3.6rem; }
#index-header p { margin: 0; }
#index-header .w { padding: 4rem; background-color: #FFF; margin: 0 10vw; border-radius: 3rem; }
#index-header .w p { color: #333; font-size: 1.8rem;  }
#index-header .bgimg { margin-top: -4rem; text-align: center; }
@media screen and (max-width:1460px) {
	#index-header { background-size: 140%; }
}
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#index-header { padding-top: 4rem; }
	#index-header .inner::before { height: 75%; background-image: url(../images/whats-jts/header_bg1_sp.svg); }
	#index-header h1 { margin-bottom: 4rem; }
	#index-header h1 .e { font-size: 8rem; }
	#index-header h1 .j { margin-top: 1rem; font-size: 2.4rem; }
	#index-header p { text-align: left; line-height: 1.8; font-size: 1.6rem; }
}

/* common ----------*/
#main h2 {}
#main h2 { display: flex; margin-bottom: 4rem; line-height: 1; align-items: center; }
#main h2 span { color: #FFF; }
#main h2 .e { opacity: 0.5; line-height: 1; font-size: 15rem; font-family: 'Saira Extra Condensed', sans-serif; font-weight: 800; }
#main h2 .j { margin-left: 4rem; padding-top: 3rem; font-size: 2.8rem; font-weight: 400; }
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#main h2 { margin-bottom: 3rem; }
	#main h2 .e { font-size: 10rem; }
	#main h2 .j { margin-left: 3rem; font-size: 2rem; }
}

/* index-contents ----------*/
.index-contents { background-color: #003B80; overflow: hidden; }

/* index-vision ----------*/
#index-vision { position: relative; padding-bottom: 0 !important; }
#index-vision::before, #index-vision::after { position: absolute; bottom: 0; content: ""; width: 27rem; height: 50rem; background-repeat: no-repeat; background-position: center; background-size: cover; }
#index-vision::before { left: 0; background-image: url(../images/whats-jts/vision_bg1.svg); }
#index-vision::after { right: 0; background-image: url(../images/whats-jts/vision_bg2.svg); }
#index-vision h3 { position: relative; margin-bottom: 5rem; text-align: center; }
#index-vision h3::after { position: absolute; top: calc(100% - 2rem); left: 0; right: 0; content: ""; width: 4rem; height: 4rem; margin: auto; border-top: solid 4rem #FFF; border-right: solid 2rem transparent; border-left: solid 2rem transparent; border-bottom: none; }
#index-vision h3 span { display: inline-block; padding: 1rem 7rem; border-radius: 10rem; color: #003B80; background-color: #FFF; font-size: 3.2rem; vertical-align: middle; }
#index-vision h3 span strong, #index-vision h3 span img { vertical-align: middle; }
#index-vision .vision_list { display: flex; flex-flow: wrap; justify-content: center; }
#index-vision .vision_list li { width: 50%; padding: 0 2rem; text-align: center; }
#index-vision .vision_list li img { margin-bottom: 3rem; }
#index-vision .vision_list li span { display: block; color: #FFF; text-align: center; line-height: 1.4; font-size: 2.8rem; font-weight: 400; }
@media screen and (max-width:900px) {
	#index-vision::before, #index-vision::after { width: 27vw; height: 50vw; }
}
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#index-vision h3 { position: relative; margin-bottom: 5rem; text-align: center; }
}

/* index-philosophy ----------*/
#index-philosophy { position: relative; }
#index-philosophy::after { position: absolute; z-index: 1; top: 8rem; left: 0; content: ""; width: 200%; height: calc(100% - 16rem); border-radius: 300rem; background-color: #629CDE; }
#index-philosophy h2 .j { color: #003B80; }
#index-philosophy .tww { position: relative; z-index: 2; display: flex; padding: 8rem 0; }
#index-philosophy .tww .tw {}
#index-philosophy .tww .tw p { padding-left: 17rem; color: #FFF; font-size: 2rem; font-weight: 500; }
#index-philosophy .tww .pw { max-width: 45rem; }
#index-philosophy .tww .pw { position: relative; right: -4rem; }
@media screen and (max-width:1340px) {
	#index-philosophy h2 { flex-flow: wrap; }
	#index-philosophy .tww .tw p { padding-left: 8rem; }
}
@media screen and (max-width:896px) { /* iPhone 横 m */
	#index-philosophy .tww {  display: block; padding: 8rem 0; }
	#index-philosophy h2 .j { text-align: center; width: 100%; }
	#index-philosophy .tww .tw p { padding: 0 6rem; }
	#index-philosophy .tww .pw {  text-align: center; margin: auto; margin-top: 4rem; }
}
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#index-philosophy .tww .tw p { padding: 0 6rem; }

}

/* index-Creed ----------*/
#index-Creed { position: relative; }
#index-Creed::before { position: absolute; z-index: 1; bottom: 2rem; right: -8rem; content: ""; width: 22.4rem; height: 24.4rem; background-image: url(../images/whats-jts/creed_bg.svg); background-repeat: no-repeat; background-position: center; background-size: cover; }
#index-Creed .l { color: #FFF; text-align: center; font-size: 2.4rem; font-weight: 500; }
#index-Creed .Creed_list {}
#index-Creed .Creed_list li { position: relative; margin-top: 5rem; margin-left: 5rem; padding: 6rem; border-radius: 8rem; background-color: #FFF; }
#index-Creed .Creed_list li .n { position: absolute; top: 0; bottom: 0; left: -5rem; display: inline-block; width: 10rem; height: 10rem; margin: auto; border-radius: 10rem; color: #003B80; background-color: #FAF000; text-align: center; line-height: 10rem; font-weight: 100; font-size: 6rem; font-family: 'Saira Extra Condensed', sans-serif; }
#index-Creed .Creed_list li .h { display: block; margin-bottom: 3rem; color: #EF4E16; text-align: center; line-height: 1.3; font-size: 8rem; font-family: 'Saira Extra Condensed', sans-serif; font-weight: 800; }
#index-Creed .Creed_list li .h small { display: block; font-size: 2.6rem; font-family: 'Noto Sans JP', sans-serif; font-weight: bold; }
#index-Creed .Creed_list li .t { display: block; color: #003B80; text-align: center; line-height: 1.6; font-size: 2rem; font-weight: 400; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#index-Creed::before { width: 22.4vw; height: 24.4vw; }
}
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#index-Creed::before { right: -2rem; }
	#index-Creed .Creed_list li { margin-top: 3rem; }
	#index-Creed .Creed_list li .h { font-size: 4rem; }
	#index-Creed .Creed_list li .h small { font-size: 2rem; }
}

/* index-Culture ----------*/
#index-Culture { padding-bottom: 0 !important; }
#index-Culture ul { display: flex; flex-flow: wrap; align-items: center; justify-content: center; }
#index-Culture ul li { position: relative; margin: 0 2rem 2rem; padding: 0 5rem; border-radius: 9rem; font-weight: bold; font-size: 2.6rem; color: #003B80; line-height: 8.4rem; white-space: nowrap; }
#index-Culture ul li::after { position: absolute; top: calc(100% - 1rem); left: 0; right: 0; content: ""; width: 2rem; height: 2rem; margin: auto; border-top: solid 2rem #FFF; border-right: solid 2rem transparent; border-left: solid 2rem transparent; border-bottom: none; }
#index-Culture ul li strong { font-size: 3.6rem; }
#index-Culture ul li.c1 { background-color: #FFFB9F; }
#index-Culture ul li.c1::after { border-top-color: #FFFB9F; }
#index-Culture ul li.c1 strong {}
#index-Culture ul li.c2 { background-color: #FFF; }
#index-Culture ul li.c2 strong { color: #EF4E16; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#index-Culture ul li { margin: 0 1rem 2rem; padding: 0 3rem; font-size: 2rem; line-height: 6rem; }
	#index-Culture ul li strong { font-size: 3rem; }
}
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#index-Culture ul li { padding: 0 2rem; font-size: 1.6rem; line-height: 5rem; }
	#index-Culture ul li strong { font-size: 2.2rem; }
}

/* index-Massage ----------*/
#index-Massage {}
#index-Massage .tww { display: flex; }
#index-Massage .tww .tw { width: 50%; padding-right: 6rem;  }
#index-Massage .tww .tw h3 { font-size: 2.4rem; color: #FAF000; }
#index-Massage .tww .tw p { color: #FFF; }
#index-Massage .tww .pw { width: 50%; padding-left: 2rem; }
#index-Massage .tww .pw img { border-radius: 4rem; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#index-Massage .tww { display: block; }
	#index-Massage .tww .tw { width: 100%; padding-right: 0;  }
	#index-Massage .tww .pw { width: 100%; padding-left: 0; margin-top: 4rem; }
}