@charset "UTF-8";

html{
	font-size: 62.5%;/*16px x 62.5%=10px*/
  height: 100%;
}
body{
  height: 100%;
  color: #260101;
	font-family: "Kokoro", 'Noto Serif JP', 'Hiragino Sans', serif;
	font-size: 1.6rem;
  line-height: 1.75;
  /* -webkit-font-smoothing: antialiased;
	-mos-osx-font-smoothing: grayscale; */
}

a,
a:link,
a:visited,
a:hover,
a:active {
	color: #333;
	overflow: hidden;
	outline: none;
}

a:hover{
	cursor: pointer;
}

img{
	max-width: 100%;
	height: auto;
}
.text-center{
  text-align: center;
}
.text-left{
	text-align: left;
}
.pc{
	display: none;
}
.sp-mid_2{
	display: none;
}
.main{
	padding-top: 0;
}
/*----------------------------
 *
 * header
 *
------------------------------*/
.header{
	background-image: url(../images/sp/header_back.jpg);
	background-size: cover;
	background-repeat: no-repeat;
  position: relative;
	width: 100%;
	height: 0;
	padding-top: 168.8%
}
.header_eyecatch{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.headerbar_top{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.headerbar_bottom{
  transform: rotate(180deg);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.header-img{
	width: 100%;
}
.title-logo{
	width: 42.5%;
	z-index: 50;
	position: absolute;
	top: 17%;
	left: 0;
	right: 0;
	margin: auto;
}
.catchcopy{
	font-family: 'Sacramento', cursive;
	font-size: 3.6rem;
	transform: rotate(-3deg);
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 10%;
	z-index: 50;
	width: 260px;
	color: #fff;
	line-height: 1.2;
}
#page_top{
	width: 60px;
	height: 60px;
  position: fixed;
  bottom: 25px;
  right: 20px;
	z-index: 80;
}

#page_top a{
	display: block;
	text-decoration: none;
}
/*----------------------------
 *
 * btn trigger / btc close
 *
------------------------------*/
.nav_btn{
	background-color: transparent;
	width: 50px;
	height: 50px;
	padding: 0;
	border: none;
	position: absolute;
	top: 10px;
	left: 10px;
	text-decoration: none;
}
.nav_btn,select{
  outline: none;
}
/*----------------------------
 *
 * navigation
 *
------------------------------*/
.divice960px{
	line-height: 1.2;
}
.nav-screen{
	display: none;
	background-image: url(../images/common/navi_back.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: 168.8%;
	z-index: 100;
}
.nav-item{
	width: 320px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: auto;
	padding: 20px 0;
}
.navigation a{
	color: #fff;
}
.navigation a:hover{
	color: #4E4C4C;
	transition: .3s;
}
.nav-list{
	width: 320px;
	line-height: 44px;
	margin: 0 auto;
	padding-bottom: 8vw;
}
.nav-list a{
	display: block;
	height: 44px;
}
.nav-list-bodycare{
	line-height: 1.2;
}
.nav-list-bodycare a{
	display: block;
	height: 44px;
}

.sns{
	max-width: 148px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	height: 45px;
}

.sns a{
	color: #fff;
	position: relative;
  display: block;
  width: 45px;
  height: 45px;
}
.sns a:hover{
	color: #fff;
}

.sns-icon{
	font-size: 3.5rem;
	align-items: center;
  width: 45px;
  height: 45px;
}
.sns-icon a::before{
	font-family: "Font Awesome 5 Brands";
	content: '\f082';
	font-weight: 400;
	position: absolute;
  top: 0;
  font-size: 4.8rem;
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 0.95;
}
.sns-icon:first-of-type a::before{
	content: '\f082';
}
.sns-icon:last-of-type a::before{
	content: '\f16d';
}
/*----------------------------
 *
 * btn
 *
------------------------------*/
.btn{
	padding-top: 40px;
	margin: 0 auto;
	max-width: 300px;
}
.btn a:hover img{
  /* filter: alpha(opacity=70); */
  /* -moz-opacity: 0.7; */
  opacity: 0.7;
	transition: 0.3s;
}
/*----------------------------
 *
 * exercise-accordion
 *
------------------------------*/
.accordion-slide{
	color: #fff;
	margin: 40px auto 20px;
	/* display: -webkit-box;
	display: -ms-flexbox; */
	display: flex;
	visibility: hidden;
	width: 100%;
	height: 40vw;
}
.slide-item{
	position: relative;
	visibility: visible;
	overflow: hidden;
	width: 20%;
	height: 100%;
	cursor: pointer;
	/* -webkit-transition: all 0.3s linear 0s; */
	transition: all 0.3s linear 0s;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}
.slide-item:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(69,69,69,0.85);
}
.slide-item:hover:before{
	content: none;
}

.slide-item:nth-child(1){
	background-image: url(../images/sp/stretch_f_oshiri_2.jpg);
	background-position: 25% 50%;
}
.slide-item:nth-child(2){
	background-image: url(../images/sp/stretch_f_futomomo_2.jpg);
	background-position: 60% 50%;
}
.slide-item:nth-child(3){
	background-image: url(../images/sp/stretch_f_senaka_2.jpg);
	background-position: 50% 50%;
}
.slide-item:nth-child(4){
	background-image: url(../images/sp/training_f_baby.jpg);
	background-position: 43%;
}
.slide-item:nth-child(5){
	background-image: url(../images/sp/training_f_hip_2.jpg);
	background-position: 30% 50%;
}
.slide-item:nth-child(6){
	background-image: url(../images/sp/training_f_banzai_2.jpg);
	background-position: 60% 50%;
}
.slide-cont{
	visibility: hidden;
}
h4{
	position: absolute;
	top: 7.4%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1.4rem;
	color: #fff;
	writing-mode: vertical-rl;
	text-align: start;
	line-height: 1.48 ;
}
.accordion-slide:hover .slide-item:hover{
	width: 70%;
}

.accordion-slide:hover .slide-item:hover h4{
	display: none;
}
.accordion-slide:hover .slide-item:hover .slide-cont{
	width: auto;
	display: inline-block;
	visibility: visible;
	/* -webkit-transition: all 0.1s linear 0.3s; */
	transition: all 0.1s linear 0.3s;
	opacity: 1;
}
.accordion-slide:hover .slide-item:hover .slide-cont a{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.accordion-slide:hover .slide-item:hover .slide-cont p{
	width: 100%;
	text-align: center;
	background-color: #9ACCCD;
	opacity: 0.8;
	line-height: 1.1;
	padding: 3% 0;
	position: absolute;
  bottom: 0;
  right: 0;
}

/*----------------------------
 *
 * Q_accordion
 *
------------------------------*/
.question-text{
	padding-top: 20px;
	text-align: left;
	width: 100%;
	max-width: 665px;
}
.accordion-box{
	margin: 0 auto;
	position: relative;
}
.q-list{
	margin-bottom: 15px;
}
.q-list:last-of-type{
	margin-bottom: 0;
}
.q-text{
	font-family: "Kokoro", 'Noto Serif JP', 'Hiragino Sans', serif;
	font-size: 1.5rem;
	line-height: 1.5;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 56px;
	text-align: left;
	/* margin: 0 auto; */
}
.a-text{
	font-size: 1.4rem;
	padding: 15px 20px;
	background-color: #f5f5f5;
}
.a-list{
	counter-reset: list_count;
}
.a-list li:before{
	counter-increment: list_count;
	content: counter(list_count);
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
	display: inline-block;
	line-height: 1.1;
	text-align: center;
	border-radius: 50%;
	font-size: 1.3rem;
	color: #fff;
	background-color: #FFC042;
}
.a2-box{
	font-size: 1.4rem;
	padding: 15px 20px;
	background-color: #f5f5f5;
}
.a-item{
	margin-bottom: 0;
}
.button{
	width: 100%;
	min-height: 72px;
	box-sizing: border-box;
	display: flex;
	padding: 5px 56px 5px 20px;
	background: #fff;
	cursor: pointer;
	border: 3px solid #FFC042;
	transition: all 0.3s;
	position: relative;
	outline: none
}

.button:after {
  content: "\f055";
  font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 3.2rem;
	color: #FFC042;
  position: absolute;
  top: 50%;
	transform: translateY(-50%);
	right: 20px;
}
.button.active{
	outline: none;
}
.button.active:after {
  content: "\f056";
}
.nest{
	margin-top: -2px;
}
/*----------------------------
 *
 * section
 *
------------------------------*/
.section-title{
	max-width: 1080px;
	margin: 0 auto;
	position: relative;
	z-index: 10;
}
.section-titlebar_img{
	max-width: 1080px;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.section-title_img{
	position: absolute;
	top: 10px;
	left: 20px;
}
.section_visual{
	width: 100%;
	padding: 0 5.3333%;
	text-align: center;
	box-sizing: border-box;
	margin-top: -12.5%;
}

.section-body{
	padding: 30px 20px 50px;
}
.bgc{
	background-color: #F5F5F5;
}

.section_subtitle{
	font-size: 22px;
	line-height: 1.45;
	padding-bottom: 20px;
}
.dash-line{
	background-size: 8px 3px;
	background-image: linear-gradient(to right, #FFC042 0, #FFC042 5px, transparent 5px, transparent 8px);
	background-repeat: repeat-x;
	width: 17.3333%;
	height: 3px;
	margin: 0 auto;
}

.section_text{
	padding-top: 20px;
	text-align: left;
	/* letter-spacing: 0.5; */
}
.contact-text{
	text-align: left;
	max-width: 399px;
	margin: 0 auto;
	letter-spacing: -0.003em;
}

/*----------------------------
 *
 * trouble
 *
------------------------------*/

.trouble-title_img{
	width: 48.8%;
}

.trouble_question{
	padding: 20px 0 5px;
}
.trouble_text{
	padding-top: 20px;
	text-align: left;
	display: inline-block;
}
.trouble_sample{
	text-align: left;
	display: inline-block;
	margin: 10px auto 0;
	padding: 5px 18px 5px 25px;
	background-color: #CDCF97;
	border-radius: 10px;
}
.trouble_list::before {
  position: relative;
  top: -2px;
  left: -5px;
  display: inline-block;
  width: 13px;
  height: 13px;
  content: '';
  border-radius: 100%;
  background: #FFC042;
}

.red{
	color: #F8362E;
}
.blue{
	color: #0027FF;
}
/*----------------------------
 *
 * strong
 *
------------------------------*/
.strong-title_img{
	width: 30.68%;
}

/*----------------------------
 *
 * greeting
 *
------------------------------*/
.greeting-title_img{
	width: 34%;
}

/*----------------------------
 *
 * question
 *
------------------------------*/
#question{
	background-image: url(../images/sp/top_f_question.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 33%;
	width: 100%;
}
.wrapper{
	padding: 40px 20px;
}
.white{
	color: #fff;
}

/*----------------------------
 *
 * footer
 *
------------------------------*/
.footer{
	width: 100%;
	background-image: url(../images/sp/footer.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.footer-logo{
	width: 38%;
	padding: 70px 0 55px 0;
	margin: 0 auto;
}
.footer-info{
	max-width: 440px;
	margin: 0 auto;
	padding: 0 10% 30px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	color: #fff;
}
.footer-list{
	width: 26%;
	padding: 0 8px 10px 0;
	box-sizing: border-box;
	text-align: left;
}
.footer-item{
	width: 212px;
	padding-bottom: 10px;
	margin: 0;
	box-sizing: border-box;
	text-align: left;
}
.footer-text{
	font-size: 1.5rem;
	color: #fff;
}
.footer-sns{
	padding-bottom: 50px;
	max-width: 140px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.footer-sns a{
	color: #fff;
}
.footer-sns a:hover{
	color: #fff;
}

.dash-line_footer{
	width: 68%;
	padding-bottom: 20px
}


@media only screen and (max-width:374px){
.nav-item{
	width: 320px;
}
.nav-list{
	padding-bottom: 6vw;
}
.trouble_sample{
	padding: 5px 10px 5px 18px;
}
h4{
	top: 6.4%;
	font-size: 1.2rem;
	line-height: 1.3;
}
.footer-logo{
	padding: 50px 0 40px 0;
}
.footer-info{
	display: block;
}
.footer-list{
	width: 100%;
	padding: 0;
}
.footer-item{
	width: 100%;
	padding-bottom: 10px;
}
.footer-sns li{
	padding: 0 9.65%;
}
}

@media only screen and (min-width:480px) and ( max-width:812px){
.header{
	padding-top: 133.3%
}
.header-img_sp{
	height: 16vw;
}
.title-logo{
	top: 50%;
	transform: translateY(-50%);
}
.catchcopy{
	width: 325px;
}
.device480px{
	display: none;
}
.nav_btn{
	top: 0.5%;
	left: 2%;
}
.nav-screen{
	padding-top: 133.33%;
}
.nav-list {
	padding-bottom: 7vw;
}
.section-title_img{
	top: 14px;
	left: 25px;
}
.section_visual{
	margin-top: -11.5%;
}
h4{
	font-size: 1.6rem;
}
.sp-mid{
	display: none;
}
.sp-mid_2{
	display: block;
}

.footer-logo {
  width: 33%;
  max-width: 200px;
}
}
@media only screen and (min-width:813px){
.sp{
	display: none;
}
.pc{
	display: block;
}
/*----------------------------
 *
 * header
 *
------------------------------*/
.header{
	background-image: url(../images/pc/header_back.jpg);
	background-position: 70%;
	height: auto;
	padding-top: 0;
}
.header_eyecatch{
	position: static;
	width: 65.5%;
	top: 0;
	transform: none;
	margin: 0 auto;
}
.title-logo{
	width: 31.25%;
	top: 50%;
	transform: translateY(-50%);
}
.catchcopy{
	font-size: 5.5rem;
	left: 27%;
	bottom: 7%;
	width: 510px;
}
.sns{
	display: flex;
}

.sns li:last-of-type{
	padding-right: 0;
}
.nav-screen{
	background-position: 0 34%;
	padding-top: 62.5%;
	padding-top: 54.93%;
}
.nav_btn{
	/* width: 60px;
	height: 60px; */
	top: 3%;
	left: 3%;
}
.nav-list {
	padding-bottom: 1.5vw;
}
.pagetop{
	width: 80px;
	height: 80px;
	bottom: 40px;
	right: 60px;
}

/*----------------------------
 *
 * btn
 *
------------------------------*/
.btn{
	max-width: 550px;
	padding-top: 60px;
}
/*----------------------------
 *
 * section
 *
------------------------------*/
.section-title_img{
	top: 35px;
	left: 35px;
}
.section_visual{
	margin-top: -7%;
}
.section_subtitle {
	font-size: 3.2rem;
	padding-bottom: 30px;
}
.section-body {
	padding: 50px 20px 80px;
}
.section_text{
	padding-top: 20px;
	max-width: 800px;
	margin: 0 auto;
}

/*----------------------------
 *
 * trouble
 *
------------------------------*/

.nav_space{
	display: none;
}
.flex{
	display: flex;
	box-sizing: border-box;
	justify-content: center;
}
.trouble_question{
	padding-right: 30px;
}
.trouble_sample{
	max-width: 330px;
}
.trouble_text{
	max-width: 551px
}
/*----------------------------
 *
 * strong
 *
------------------------------*/
.strong-title_img{
	width: 23.25%;
}
/*----------------------------
 *
 * greeting
 *
------------------------------*/
.greeting-title_img {
	width: 26.47%;
}
.accordion-slide{
	max-width: 960px;
	height: 35vw;
	max-height: 450px;
}
.accordion-slide:hover .slide-item:hover{
	width: 80%;
}
.accordion-slide:hover .slide-item:hover .slide-cont p {
  padding: 5% 0;
  font-size: 1.8rem;
}
h4{
	font-size: 1.8rem;
	transform: translateY(-50%);
	top: 50%;
	left: 0;
	right: 0;
	writing-mode: horizontal-tb;
	line-height: 1.6;
	text-align: center;
}
.sp-mid{
	display: block;
}
/*----------------------------
 *
 * qustion
 *
------------------------------*/
.question{
	background-image: url(../images/pc/top_f_question.jpg);
}
.wrapper{
	padding: 50px 20px;
}
.question-text {
  padding-top: 30px;
}
.q-list {
  margin-bottom: 25px;
}
.button{
	padding: 5px 30px;
}
.button:after {
  right: 38px;
}
/*----------------------------
 *
 * footer
 *
------------------------------*/
.footer{
	width: 100%;
	background-image: url(../images/pc/footer.jpg);
	background-position: 25%;
}
.footer-logo{
	width: 20%;
	padding: 0;
}
.pc-footer-flex{
	display: flex;
  justify-content: space-between;
	width: 750px;
	margin: 0 auto;
	align-items: center;
	padding: 100px 0 60px;
}

.footer-flex{
	align-items: center;
}
.footer-info{
	width: 325px;
	padding: 0 70px;
	margin: 0
}
.footer-list{
	width: 33%;
}
.footer-sns{
	padding-bottom: 0;
	margin: 0;
}
.footer-sns li:first-of-type{
	padding-right: 40px;
}

.dash-line_footer{
	width: 90%;
}
}

@media only screen and (min-width:960px){
.nav_btn{
	display: none;
}

/*----------------------------
 *
 * main
 *
------------------------------*/
.main{
	padding-top: 66px;
	display: block;
}
/*----------------------------
 *
 * navigation
 *
------------------------------*/
.nav-screen{
	display: block;
	background-image: none;
	position: static;
	width: 100%;
	height: 0;
	padding:0;
}
.nav-item{
	position: static;
	width: 100%;
	height: 66px;
	transform: none;
	background-color: #434343;
	padding: 0;
}
.navigation{
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 940px;
	margin: 0 auto;
}
.nav-list{
	width: auto;
	height: 66px;
	line-height: 66px;
	padding-bottom: 0;
	margin: initial;
}
.nav-list a{
	width: 100%;
	height: 66px;
}
.nav-list-bodycare{
	line-height: 1.2;
}
.nav-list-bodycare a{
	margin-top: 14px;
	height: 52px;
}
.sns{
	position: absolute;
	width: 150px;
	top: 30px;
	left: 0;
	right: 0;
	margin: auto;
}

}

@media only screen and (min-width: 1600px){
.sns{
  top: 60px;
}
.section_visual{
  margin-top: -5%;
}
.footer {
  background-position: 25% 25%;
}
}

@media only screen and (min-width: 2200px){
.sns {
  top: 80px;
}
.section_visual{
  margin-top: -3%;
}
.footer {
  background-position: 25% 30%;
}
}