@charset "utf-8";



/* concept コンセプト
================================================================== */
#contents {margin-bottom: 0;}
#pan {margin: 0; padding: 1.2em 0 1em; width: 100%; background: #fff;}
#pan>ul{max-width: 1080px; margin: 0 auto;}

#concept .m_tag {
  display:inline-block; margin:0; padding:4px 10px 2px;
  font-weight:normal; font-style:normal; font-size:18px;
  text-align:center; border:2px solid;
  background:#fff; position:absolute; right:-14px;
  top:-24px;}

.bg-mv {
  position: fixed; width: 100vw; height: 100vh;
  z-index: -1;
  top: 0; left: 0;}
.bg-mv>video {width: 100%; height: 100%; object-fit: cover;}
#personal {margin-top: 0;}
footer {max-width: 100vw; margin-bottom: 0;}

.bg-wht {padding-top: 3em; padding-bottom: 4em; background: #fff;}
.reserve_box {margin: 0 auto;}

/*20220830 */
.method #def_list h4.unique_ttl {font-size: 1.4em; font-style: italic; margin: 0.7em auto; font-family: "Oswald";}

/*20220830 method 追加*/
.method #concept_lead {margin-top: 0; margin-bottom: 0; padding-top: 3em; padding-bottom: 6em; background: #fff;}
.method .per_lead { line-height: 1.8; }
.method .per_lead h3 {position: relative; font-size: 32px; margin: -2em 0 2em;  font-weight: bold; font-style: normal; z-index: 1;}
.method .per_lead h3::before {content: 'OUR APPROACH'; color: #f8e6a9; position: absolute; left: 20%;
  top: -0.55em; font-size: min(9vw,100px); font-style: italic; z-index: -1;}
.method .ttl_box {margin-bottom: 2.5em;}
.method .per_lead_txt {margin:0 auto 3em; text-align: left;}

.method .per_explain {position:relative; background: #f7f0e2; 
  padding-top: 2em; padding-bottom: 6em; margin-bottom: 11em;}
.method .per_explain::before {content:"";width: 0; height: 0; border-style: solid;
  border-width: 55px 41px 0 41px; border-color: #f7f0e2 transparent transparent transparent;
  position: absolute; bottom: -53px; left: 50%; transform: translateX(-50%);}

.method .approach { margin-block: 3em; }

.method .per_explain .per_movie {width:clamp(400px,33%,633px);position: absolute; top: -5em; left: 50%; transform: translateX(-50%);}
.img_diamond {width: 40%;}
.img_approach {width: 45%;}
.per_explain .txt{width: 48%;}
.per_step>li {position: relative; height: 100%;font-size: 1.25em; padding-left: 2em;}
.per_step>li::before {content: "1"; position: absolute; display: block; 
  width:1.375em; height:1.375em;  left: 0; margin:0; background: #fff; border-radius: 50%;  
  color: #f6c725; font-size:1em; font-weight: bold; text-align: center; line-height: 1.375;}
.per_step>li:nth-of-type(2)::before {content: "2";}
.per_step>li:nth-of-type(3)::before {content: "3";}
.st_diamond {font-size: 1.25em;  background:linear-gradient(transparent 65%, #f6c725 60%);}

.step_box {margin-bottom: 10em; justify-content: space-between; align-items: center; position: relative;} 
.step_box::before {content: ""; position: absolute; top: 0;
  width: 100vw;
  height: calc(100% + 2em);
  z-index: -1;
  background: rgba(255, 255, 255, .75);}

.step_txt {width: 59%;}
.step_txt>h4 {position:relative; border-bottom:solid 2px #2d2514; padding: 0 0 0 2.61em; font-size: 2.125em;}
.step_txt>h4::before {content: "1"; position: absolute; bottom: -34px; left: 0;
  padding-left: 3px;  font-size: 2.3em; bottom: -26px; font-style: italic;}
.step_txt>h4 .small {display: inline-block;  margin-left: 1em;   font-size: .8em;
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;}
.step_box:nth-of-type(2) .step_txt>h4 {border-bottom:solid 1px #f6c725;}
.step_box:nth-of-type(2) .step_txt>h4::before {content: "2"; color: #f6c725;}
.step_box:nth-of-type(3) .step_txt>h4 {border-bottom:solid 1px #447857;}
.step_box:nth-of-type(3) .step_txt>h4::before {content: "3"; color: #447857;}

.step_box .movie {margin-right: -2.8em;}
.step_box .mtag {z-index: 1;}
.step_img {position: relative; width: 35%; text-align: left;}
.step_img>figure {width: 90%; margin: 2em -10vw 0 auto;}


#different {margin-bottom: 0;
  padding-top:80px; padding-bottom:20px; text-align:center;
  background:#eeeeee;
}

.balloon {
	position:relative; width:60%; padding:20px 40px; margin:0 auto;
  background:#fff; border:1px solid #000;
}

.method .balloon {width: 67%;}

.method .balloon p {font-weight: normal; font-style: normal; 
font-family :"游ゴシック", "Yu Gothic", YuGothic, "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
margin-bottom: 0.2em;}
.balloon:after, .balloon:before {
  content:" "; position:absolute; top:100%; left:50%; width:0;
  height:0; border:solid transparent; pointer-events:none;
}

.balloon:after {
  margin-left:-23px; border-width:23px;
	border-color:rgba(255, 255, 255, 0); border-top-color:#fff;
}
.balloon:before {
  margin-left:-24px; border-width:24px;
	border-color:rgba(0, 0, 0, 0); border-top-color:#000;
}
.balloon h3 {
  padding:0; margin:0; font-size:24px; font-weight:bold;
}
#def_list {
  margin:90px -4% 0;
  justify-content:center; -webkit-justify-content:center;
}
#def_list li { width:29%; margin:0 2% 60px; }
#def_list .num {
  position:relative; height:30px; border-top:2px solid #f6c725;
}
#def_list .num span {
  display:inline-block; position:absolute; bottom:0; right:40%;
  color:#f6c725; font-size:30px;
  font-weight:bold; font-style:normal;
  background:#fff; border-radius:50%; padding:15px; line-height:100%;
}
#def_list h4 { margin:20px 0; color:#311f08; font-size:18px; }
#def_list h4 span {
  display:block; margin:10px 0 0; color:#777777; font-weight:normal; font-size:13px;
}
#def_list .txt { text-align:left; }

/* services コース紹介
================================================================== */
#services #lead_box { position:relative; text-align:center; }
#services #lead_box .lead { margin:20px auto; font-size:18px; }
#services #lead_box .lead span { font-size:24px; color:#f6c725; }

#services #lead_box .lead_free,
#reserve .lead_free { margin:30px auto 80px; padding:20px; background:#eee; border:1px solid #ccc;  }
#services #lead_box .lead_free .line,
#reserve .lead_free .line{ display:inline-block; background:linear-gradient(transparent 60%, #f6c725 0%); font-size:22px; }
#services .deco_line { text-decoration: line-through; }

#services .consul .lead span { display:block; font:24px;  }
#services section { margin-bottom:50px; }

.fee { position:absolute; padding-top:15px; top:-50px; right:80px;
width: 140px; height:140px; text-align: center;
background:#f6c725; color:#000; font-weight:bold; line-height:18px;
border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; z-index: 9999;
}
.fee span.ima { display:inline-block; margin-bottom: 5px; font-size:.85em; }
.fee span.nyukai { display:inline-block; margin-bottom: 10%; font-size:1.25em; }
.fee span.font_en { display:inline-block; padding-right:5%; font-size:3.7em; }
.fee span.en { display:inline-block; font-size:1.15em; }

.counseling { margin:0 auto; }
.counseling a { padding:15px 85px 19px; font-weight:bold; }
.counseling a span { padding-right:20px; font-size:24px; font-weight:normal; }
.counseling a:after { top:25px; right:20px;  }

.course { margin:45px 10% 60px; text-align: center; }
.course li{ width:30%;}
.course li a { display:block; padding:20px 0 16px; text-decoration:none; background:#e9d8b2;  font-size:18px;
font-weight:bold; line-height:1.2; box-shadow:4px 4px 0 rgba(0, 0, 0, .7); transition:0.2s all ease 0s; }
.course li a:hover { background-color:#f6c725; box-shadow:none; transform:translate3d(3px,3px,0); color:#311f08;  }
.course li a span.font_en { font-size:14px; font-weight:normal; color:#333; }

.services_ttl {
  margin:30px auto 60px;
  text-align:center;
  background:url(../img/services/services_cat_ttlbg2.png) no-repeat center;
}
.services_ttl span {
  display:block; padding:10px 0; font-weight:bold; font-size:35px; color: #fff;
}
.services_list { margin-top: 60px; }

.services_list > li {position: relative;
  margin-bottom:60px; padding-bottom:40px; border-bottom:1px dotted;
}
.services_list > li:last-child { padding-bottom:0; border-bottom:none; }
.services_list .box { position:relative;  margin-top:50px; width:53%;  }
.services_list #bodymake .box,.services_list #lifemake .box,.services_list #lb_recovery .box,.services_list #neckRecovery .box { margin-top: 0; }
.services_list .box .fee { top: -50px; left: 50%;margin-left: 150px;}

.services_list .ttlBox { width:43%; max-width:460px; }
.services_list .ttlBox.youtube { margin-top: 5px; padding-bottom: 28%; height: 0; position: relative; }
.services_list .ttlBox.youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.services_list #lifestyle .ttlBox figure { margin-top: 5px; }
.services_list h4 {
  margin:0 0 15px; font-size:160%; font-weight:bold;
}
.services_list h4 span { padding-left:1%; color:#777777; font-size:14px; font-weight:normal; }
.services_list dl { margin:5px 0 20px; }
.services_list dt {
  width:25%; padding:0 4px; margin:0 0 6px 0; text-align:center; background:#eeeeee;}
.services_list dd { padding:0 0 0 20px; margin:0 0 6px 0; width:70%; }
#services .consul { text-align: center; }
#services .consul dl { margin: 0 auto; width:60%;}
#services .consul dl dt { width:50%;  }
#services .consul dl dd { width:45%;  }
#services .consul .box { width:100%; }
#services .consul .box dl { margin:30px auto; }
#services .consul .box .btn { position:static; top:0;}

.services_list .btn {position:absolute; top:5px; right:0; margin: 0;}
.services_list .btn_reserve { top:55px; }
.services_list .btn_detail { margin-bottom: .5em; }
.services_list .btn a { font-weight:bold; }
.services_list .btn_reserve a { min-width: 220px; }
.services_list .detail_box { width:100%; margin:20px auto 0; }
.services_list .detail_box > li { margin-bottom:30px; }
.services_list .detail_box h5 {
  width:150px; height:150px; padding:56px 0; margin:0 0 0 2%; font-weight:bold;
  font-size:20px; text-align:center; float:left; border-radius:50%;
  background:#eeeeee;
}
.services_list .detail_box .c_option { padding: 40px 0; }
.services_list .detail_box .box_r { width:80%; float:right; }
.services_list .detail_box .flow {
  padding:20px 0 10px; border-bottom:1px solid #000;
}
.services_list .detail_box .flow li {
  position:relative; width:33%; padding:0 3% 0 2%;
}
.services_list .detail_box .flow2 li { width:50%; }
.services_list .detail_box .flow li:not(:last-child)::after {
  content:""; display:inline-block; width:24px; height:48px;
	position:absolute; right:0; top:50px; vertical-align:middle;
  background:url(/img/services/flow_arrow.png) no-repeat left center;
	background-size:contain;
}
.services_list .detail_box .flow .kikan {
  width:118px; padding:3px 0; text-align:center;
  background:url(../img/txt_bg.png) no-repeat left top;
  background-size:118px auto;
}
.services_list .detail_box .flow .txt {
  padding-left:10%; font-weight:bold; font-size:18px; line-height:120%;
}

.services_list .detail_box .point { width:74%; margin:0 3%; }
.services_list .detail_box .point > li {
  margin:0 0 10px; border-bottom:1px dashed #777777;
  align-items:center; -webkit-align-items:center;
}
.services_list .detail_box .point > li p { margin:0; }
.services_list .detail_box .point .num {
  width:10%; padding:0 10px; text-align:center; font-size:24px;
  font-weight:bold; color:#f6c725;
}
.services_list .detail_box .point .txt { width:40%; }
.services_list .detail_box .point .txt_en {
  width:50%; color:#e2e2e2; font-size:26px; font-weight:bold;
}
.services_list .detail_box p.coment { display:inline-block; padding:0 0 0 50px; }

.txt_con { width:50%; }
.price { display:inline-block; font-size:20px; margin: 0 auto;}
.services_list .rec_comment {
  padding:20px 5%; margin:30px auto; text-align:center; font-size:18px;
  font-weight:bold; border-top:1px solid #000; border-bottom:1px solid #000;
  background:url(../img/services/rec_comment_bg.png) left top;
}
.services_list #lifestyle .flow li { width:33%; }
#services .option {
  width:auto; max-width:1030px; padding:30px; margin:30px auto;
  background:#eee;
}
#services .option h3 {
  padding-bottom:5px; margin:0 auto 20px; color:#311f08; font-weight:bold;
  font-size:20px; text-align:center; border-bottom:1px solid;
}
#services .option li::before { content:"・"; }
#services .option .red { margin-bottom:0; font-weight:bold; }
.services_list #foundation .flow li { width:50%; }
.services_list #foundation .flow li::after { background:none; }
.services_list #foundation .flow .txt { padding-left:2%; }

#neckRecovery .box dl dt { height:30px; padding:3px 4px; }
#neckRecovery .times dl { padding-left:70px;}

#services .se_box { padding:20px; margin:30px auto 80px; border:1px solid #ddd; }
#services .se_box.ad_option { background:#eee; }
#services .se_box.ad_option h3 {
  padding:0; margin:10px auto 0; font-size:20px; float:none;
  background:none; text-align:center; font-weight:bold;
}
#services .se_box.ad_option .btn { margin-top:20px; }

#ad_option { padding:40px; background:#eeeeee; }
#ad_option h3 {
  margin-bottom:40px; text-align:center; font-weight:bold; font-size:20px;
}
#ad_option h3 span {
  display:block; color:#311f08; font-size:40px; line-height:140%;
}
.op_list .rec_comment {
  width:100%; margin:0 auto 40px; text-align:center; font-weight:bold;
  font-size:18px;
}
.op_list .rec_comment .balloon { min-width:440px; padding:15px; }
.op_list > li:not(:last-child) {
  padding-bottom:20px; margin-bottom:40px; border-bottom:1px dotted;
}
.op_list figure { width:36%; }
.op_list .box { width:60%; }
.op_list h4 {
  margin:0 0 15px; font-size:160%; font-weight:bold;
  border-bottom:2px solid #f6c725;
}
.op_list h4 span {
  display:block; font-size:14px; color:#777777; font-weight:normal;
}
#ad_option .example {
  width:100%; max-width:800px; padding:0 10px 10px; margin:30px auto 40px;
  border-bottom:1px solid #000; align-items:center;
  -webkit-align-items:center;
}
#ad_option #q_english .example { max-width:600px; }
#ad_option .example > * { text-align:center; }
#ad_option .example h5 { width:10%; margin:0; }
#ad_option .example h5 span {
  display:block; width:60px; padding:18px 0; margin:0 auto;
  text-align:center; font-size:15px; background:#f6c725; border-radius:50%;
}
#ad_option .example div p { margin:0; font-size:14px; }

#ad_option .example .plus { position:relative; padding-left:80px; }
#ad_option .example .plus::after {
  content:""; display:inline-block; width:47px; height:47px;
	position:absolute; left:0; top:10px; vertical-align:middle;
  background:url(/img/services/plus.png) no-repeat left center;
	background-size:contain;
}

#ad_option #evolution .example .plus::after { top:-8px; }
/* #ad_option #evolution .example .plus p { font-size:18px; font-weight:bold; } */
#ad_option .example .time { font-weight:bold; font-size:20px; }
#ad_option .example .time span {
  font-style:normal; font-size:36px; line-height:100%;
}
#ad_option .example .after {
  width:22%; padding-left:60px; font-size:18px; font-weight:bold;
  text-align:left; position:relative;
}
#ad_option .example .after::after {
  content:""; display:inline-block; width:24px; height:48px;
	position:absolute; left:0; top:-6px; vertical-align:middle;
  background:url(/img/services/flow_arrow.png) no-repeat right center;
	background-size:contain;
}
#ad_option .other {
  width:100%; max-width:620px; padding:15px 20px; margin:0 auto 20px; background:#fff;
}
#ad_option .other li::before { content:"・"; }
#ad_option .other p { margin:10px 0 0; }
#ad_option .box dt {  width: 25%;  padding: 0 4px;  margin: 0 0 6px 0;  text-align: center;  background: #fff; }
#ad_option .box dd {  padding: 0 0 0 20px;  margin: 0 0 6px 0; width: 70%; }

.campTxt { position:relative; }
.campTxt+p { text-align: center; }
.txt_cam a { color:#bf1920; font-weight:bold; }

.yellow_box { width: 100%; padding: 17px 20px 13px 20px; font-size: 1.2em; background: #f6c725; font-weight: bold; }

.step_box_3 {margin-bottom: 13em; align-items: center;}


@media screen and (min-width:600px) {
  #concept_lead h3 {padding-bottom: 1em;}
  .step2 .step_img>figure {margin: 2em auto 0 0;}

  .step_img {top: -2em;}
  .step_txt {padding-left: 6em;}
  .step2.step_box::before {right: -6em;}

  .step2 .step_img.step_pic>figure {margin: 2em 0 0 0;}


  }

@media screen and (min-width:980px) {
  .step_img.step_pic>figure {width: 75%; margin: 2em -2.5vw 0 auto;}

  

}


/*----------------------------------------------------
タブレット
-----------------------------------------------------*/

@media screen and (max-width:1200px) {
  .step_txt {width: 53%; justify-content: flex-start; gap: 3em;}
  .step_img {top: -4em;}
}



@media screen and (max-width:980px)  {
  .step_box {margin-bottom: 8em;}
  .step_txt {order: 0;}
  .step_img {display: flex; width: 90%; order: 1; top:0;padding-left: 6em; 
    margin-top: 1em; gap: .5em;}
  .step_img>figure {margin: 0; width: 48%;}
  .step_img .movie {width: 48%;}
  .step_img::before {right: -68vw;  height: calc(100% + 4em);}
  .step2 .step_img::before {left: -70vw;}
  .step_txt {width: 90%;}
  .step2 .step_img>figure {margin: 2em auto 0 -1vw;}
  .step2 .step_img.step_pic>figure {margin-top: 0;}

  #pan>ul {padding: 0 20px;}
  .reserve_box {padding: 0 20px;}
  .method .per_explain {margin-bottom: 11em;}
  .step_box_3 {margin-bottom: 11em;}

  .step_txt>h4 {padding-top: 1em;}

  .step_box::before {height: calc(100% + 4em);}
  .step2.step_box::before {right: 0;}
  
  .step_box .movie {margin-right: 0;}

  .step2 .step_img.step_pic>figure {margin: 0;}

}


@media screen and (max-width:799px) {
  header .hbox { top:10px; }
  .reserve_box .inner {padding: 40px 1.2em 10px;}
  .reserve_box h3 { max-width:430px; width:94%; margin:0 auto -34px; }
  .reserve_box .txt, .reserve_box .btn { width:100%; }
  .reserve_box .txt { text-align:left; }
  .reserve_box .btn a { font-size: 1.1em; }

  .background dl.txt_box { width: 100%; }
  .background .img_box { width: 88%; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; margin: auto; }
  .background .img_box .img1 { width: 48%; }
  .background .img_box .img2 { width: 48%; margin: 0; }
  .step_box.step_box_3 {margin-bottom: 5em;}


  /* concept コンセプト */
  #concept_lead h3 span { bottom:auto; top:-20px; }

  #concept .detail_box h3 { line-height:120%; }
  #concept .detail_box h3::before { top:30px; font-size:80px; }
  #concept .detail_box .txt_box { margin:30px 0; }
  #concept .detail_box .img_box .img2 { margin:20px 0 0; }
  #def_list li { width:43%; }

	#concept #education::before { border-bottom: 893px solid #f3e9d4;}
  
  .method #concept_lead h3 span {bottom: 0; top: unset;}


  

}
@media screen and (max-width:650px) {
  #ad_option .example {
    justify-content:center; -webkit-justify-content:center;
  }
  #ad_option .example .before { width:40%; }
  #ad_option .example .plus, #ad_option .example .after {
    width:auto; margin-left:0;
  }

  .method .per_explain {padding-bottom: 3em;}
  .method .per_explain .per_movie {width: clamp(400px,33%,500px);}

}

/*----------------------------------------------------
スマホ
-----------------------------------------------------*/
@media screen and (max-width:599px) {
  #con_ttl {
    display:flex; display:-webkit-flex; flex-wrap:wrap;
    -webkit-flex-wrap:wrap; margin:0 auto 15px;
  }
  #con_ttl h2 {
    position:static; width:100%; padding:8px 10px 4px;
    order:2; -webkit-order:2;
  }
  

	.tax_box { margin-bottom: 30px; text-align: left; font-size: 100%;}
	#reserve .tax_box + p { text-align:left;margin: 0 auto 40px;}
	.services_list .box .fee { top: -70px; margin-left: 75px;}

	.tax_box_free { text-align:left; margin:0 auto 30px;}
  .services_list #lifestyle .flow li { width:100%; }


  /* concept コンセプト */
  #concept #massage { margin-top:-20px; }
  #concept_lead h3 { margin:0 0 20px; font-size:20px; line-height:120%; }
  #concept_lead h3 span { display:block; padding:8px 0 5px; position:static; font-size:16px; }
  #concept_lead .inner > div { width:100%; }
  #concept .detail_box .ttl_box,
  #concept .detail_box .main_img,
  #concept .detail_box .txt_box,
  #concept .detail_box .movie,
  #concept .detail_box .img_box,
  #concept .detail_box .txt_box.box2 { width:100%; }
  #concept .detail_box h3 {
    padding:0; margin:20px 0; font-size:24px;
  }
  #concept .detail_box h3 span,
  #concept .detail_box h3 span{ display:inline-block; }
  #concept .detail_box h3::before {
    display:block; position:static; font-size:40px;
  }
  #concept .detail_box .main_img { margin-top:0; }
  #concept .detail_box .txt_box h4 { margin:0 0 15px; font-size:18px; }
  #concept .detail_box .movie { margin:0 0 20px; }
  #concept .m_tag { right:-8px; }
  #concept .detail_box .img_box {
    margin:0 0 20px;
    display:flex; display:-webkit-flex; flex-wrap:wrap;
    -webkit-flex-wrap:wrap; justify-content:space-between;
    -webkit-justify-content:space-between;
  }
  #concept .detail_box .img_box figure { width:48%; }
  #concept .detail_box .img_box .img2 { margin:0; }
  #different { padding-top:30px; padding-bottom:0; }
  .balloon { width:100%; }
  .method .balloon {width: 100%; padding: 20px 22px;}
  .balloon h3 { font-size:1.3em; }
  #def_list { margin:70px 0 0; }
  #def_list li { width:100%; margin:0 0 40px; }
  #def_list h4 { margin:10px 0; }

  .jp_method .step_txt>h4 .small {margin-left: .6em; font-size: .6em;}
  .jp_method #def_list li {width: 100%;}
  .method.jp_method .per_lead h3 {font-size: 1.3em;}

	/* 20190204 education追加ここから */
    #concept #education { background:#f3e9d4; }
	#concept #education::before { width: 100%; border-bottom: none;}
	#concept #education.detail_box .lead_box { position: static; width: 100%; border-right: 0;}
	#concept #education.detail_box h3 { padding: 20px 0 0 0;}
	#concept #education.detail_box .img_box .img1 { margin: 0; }
  .method .ttl_box {margin-bottom: 1.5em;}

  .step_box.step_box_3 {margin-bottom: 4em;}
  

 
  .btn_bootcamp a { padding: 13px 37px 11px; font-size: 17px!important; }


  /* reserve 予約 */
  .comment { padding: 20px; }
  .comment p { text-align: left; }
  #reserve .btn { margin:20px 0 0; }
  #c_flow { margin-bottom:60px; }
  #c_flow .lead_box { text-align:left; }
  #c_flow li { width:100%; }
  #c_flow li:first-child { margin-bottom:40px; }
  #calendar .txt_box { padding:0 10px; margin:20px auto; }
  #flow .c_txt { margin:20px auto; font-size:16px; }
  #flow .step li { margin:0 auto 40px; }
  #flow .step figure { width:100%; position:static; }
  #flow .step h4 { margin:20px auto 10px; padding:0 0 5px; font-size:16px; }
  #flow .step h4 span { margin-right:0; }
  #flow .step .txt { width:100%; padding:0; }
  #flow .step figure.img2 img { width:100%; }
  #flow .step li.step4 figure.img2 img { width:100%; }
  /* success お客様の声 */
  #su_list li { padding:16px; }
  #su_list .photo, #su_list .movie { width:100%; margin-bottom:20px; }
  #su_list li.flex .txt_box { margin-top:0; }


  /* method追加 */
  .method #concept_lead {padding-block: 1em 4em;}
  .method .per_lead h3 {font-size: 1.8em; margin: -2em 0 1em;}
  .method .per_lead h3::before {left: 1vw; top: -0.48em; font-size: min(14vw,100px);}
  .method .per_explain .per_movie {width: 9%;}
  .method .per_explain { padding-top: 2em; margin-bottom: 3em;}
  .method .per_explain::before {bottom: -30px; border-width: 45px 35px 0 35px;}
  .explain_content {justify-content: center; gap: 2em;}
  .img_diamond {width: 80%;}
  .img_approach { width: 100%; }
  .per_explain .txt {width: 100%;}
  .method .per_lead_txt {margin: 0 auto 2em; }
  .step_txt {width: 100%; margin-bottom: 1em;}
  .step_img {width: 100%; padding-left: 0; margin-top: 0; flex-wrap: wrap;
    justify-content: center;}
  .step2 .step_txt {order: 0;}
  .step2 .step_img {order: 1;}
  .step_img::before {height: 12em; right: -23vw;}
  .step2 .step_img {margin-left: 0;}
  .step2 .step_img::before {left: -23vw;}
  .youtube_box {width: 100%;}
  .step_box .m_tag {display: none;}
  .step_box {margin-bottom: 2.5em;}

  .step_txt>h4 {padding: 0 0 0 2em; margin-bottom: .6em; font-size: 2em;}

  .step_box::before {content: none;}
  .step_box {padding: 0 1.5em 2em; background: rgba(255, 255, 255, .75); gap: 0;}

  .step_box_3 .movie {width: 75%; margin: 0 auto;}
  .step_img>figure {width: 100%;}
  .step_box .movie {width: 100%;}

  .method .per_lead .ttl_box p { margin-block: 2.5em 1em; }
}

@media screen and (max-width:568px) {
.services_list .box .fee { top: -50px; margin-left: 150px;}
}

@media screen and (max-width:375px) {
.services_list .box .fee { top: -70px; margin-left: 75px;}
}

@media screen and (max-width:359px) {

  .reserve_box h3 { padding-top:8px; margin-bottom:-30px; }
  .reserve_box h3::before { top:2px; }
  .reserve_box .txt { margin:0; }
  #calendar .air_link a { font-size:15px; }
 
.course li a:after{ left:35%;  }

.services_list .box .fee { margin-left: 60px;}
}