@charset "utf-8";
/* CSS Document 320-640 */

.tabu{text-align: center}
.tabu h2{letter-spacing: -2px; font-size:clamp(2rem, 1.313rem + 3.44vw, 2.688rem)}/*32-43*/


/*--------------------------------------------------------------------

headBox

--------------------------------------------------------------------*/
.headBox{text-align: center}
.headBox dl{background: url("../img/bg_sen.png") no-repeat bottom left; background-size: contain }
.headBox dt{padding: 0 5%; position: relative}
.headBox dt a{transform: rotate(0deg); display: inline-block}
.headBox dt a:hover{transform: rotate(10deg);}
.headBox dd{padding-top: 10px; font-size:clamp(1rem, 0.125rem + 4.38vw, 1.875rem)}/*16-30*/

.headBox dd .text01{margin-bottom: 20px; line-height: 1.5; font-size:clamp(2rem, 1.682rem + 1.59vw, 2.875rem)}/*32-46*/
.headBox dd .text02{margin: 0 18%}
.headBox dd .text02 a{color:#22201e; font-size:clamp(1.375rem, 1.193rem + 0.91vw, 1.875rem)}/*22-30*/
.headBox dd .text03{margin-bottom: 8px}
.headBox dd .text03 , .headBox dd .text04{font-size: 14px ; line-height: 1.5; text-align: left; padding:0 5% }
.headBox dd img{max-width:329px; padding: 30px 0 }
.headBox dd span{display: block ; font-size:clamp(1.375rem, 1.193rem + 0.91vw, 1.875rem)}/*22-30*/
/*--------------------------------------------------------------------

.firsr

--------------------------------------------------------------------*/
.scroll{position: relative; margin:50px 0 20px}
.firsr{ background: url("../img/trimming/tou.png") repeat; margin: 0 5%; padding: 5%; text-align: center; font-size:clamp(1.375rem, 1.193rem + 0.91vw, 1.875rem)}/*22-30*/
.firsr h2{margin-top: -20px}
.firsr img{max-width: 436px; }
.firsr .text{margin-top: 10px; font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem)}/*18-24*/
.scroll .kamei{max-width: 122px; position: absolute; top: 32%; right: 2%; z-index: 2 ; width: 20%}

/*--------------------------------------------------------------------

.toha

--------------------------------------------------------------------*/
.toha{text-align: center; margin: 0 5%}
.toha h2{border-radius: 20px; line-height: 1.5; position: relative ; padding: 5% 0; border:2px solid #f57e54; color: #f57e54; font-size: clamp(1.625rem, 1.398rem + 1.14vw, 2.25rem)}/*26-36*/
.toha h2:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 26px;
  height: 2px;
  transform: rotate(50deg);
  box-sizing: border-box;
  background-color: #f57e54;
  box-shadow: 0 2px 0 #ffffff, 0 -2px 0 #ffffff; /* 背景色と同じ色を指定 */
}
.toha .sub{ font-size:clamp(1.375rem, 1.193rem + 0.91vw, 1.875rem)}/*22-30*/
.toha .text{margin: 20px 0 0; text-align: left; font-size: clamp(1rem, 0.125rem + 4.38vw, 1.875rem)}/*16-30*/
.toha dt{position: relative}
.toha .wow{max-width: 197px; position: absolute; bottom: -20px; left: 0}
.toha dd{margin: 40px 0 0}
.toha dd img{max-width: 316px; width: 90%}
.toha dd .text01{text-align: left}

/*--------------------------------------------------------------------

.foa

--------------------------------------------------------------------*/
.foa{position: relative; text-align: center; margin: 50px 5% 0}
.foa .plas{line-height: 1.5; font-size:clamp(1.375rem, 1.193rem + 0.91vw, 1.875rem)}/*22-30*/
.foa .pic0{text-align: left; position: relative; z-index: 1}
.foa .pic0 img{width: 120px;}
.foa dl{margin: -50px 0 0}
.foa dd{text-align: left; margin: 10px 0}
.foa dd a{display: block; margin-top: 10px; transition: transform 0.3s ease;}
.foa dd a:hover{transform: translateY(-10px);}
.foa dd a img{width:225px }

.push{margin: 50px 5%  0;}
.push .hosoku{margin: 10px 0 20px}
.push dd h3{line-height: 1.5; border:2px solid #ffded2; padding: 5px 20px; border-radius: 10px; margin-bottom: 10px; font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem)}/*18-22*/
.push dd .text02{margin-bottom: 20px}


/*--------------------------------------------------------------------

丁寧に対応

--------------------------------------------------------------------*/
.corr{text-align: center; margin: 50px 5% 0}
.corr .plas{text-align: center; line-height: 1.5 ; font-size:clamp(1.375rem, 1.193rem + 0.91vw, 1.875rem)}/*22-30*/
.corr dd{text-align: left; margin: 10px 0 0}
/*--------------------------------------------------------------------

皮膚治療の一環として

--------------------------------------------------------------------*/
#sup3 .supBox{ text-align: center; padding:30px 5% 0; position: relative; width:90%; background:#ffded2; border-radius: 20px ; margin: 50px 5% 40px}
#sup3 .supBox:before{    position: absolute;
    border: 2px solid #fff; border-radius: 20px;
    content: "";top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;}

#sup3 .supBox h2{font-size:clamp(1.375rem, 1.193rem + 0.91vw, 1.875rem)}/*22-30*/
#sup3 .supBox dl{position: relative; z-index: 1; padding-bottom: 40px}

#sup3 .supBox dd{text-align: left; margin-top: 20px}

#sup3 .supBox dd h3{background: #fff; color: #f57e54; line-height: 1.5; border:2px solid #f57e54; padding: 5px 20px; border-radius: 10px; margin-bottom: 10px; font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem)}/*18-22*/
#sup3 .supBox dd h3 span{font-size: 14px}
#sup3 .supBox dd .waku{line-height: 1.5; font-size: 15px; margin: 20px 0; border-radius: 10px; border: dashed 1px #22201e; padding: 0 5% 5%; }
#sup3 .supBox dd .waku .tit{position: relative; top: -10px; background:#ffded2; display: inline-block; padding: 0 20px; font-weight: 900}


#sup3 .supBox dd ul{display: flex; justify-content: space-between ; font-size: 15px; letter-spacing: -1px}
#sup3 .supBox dd li{width: 10%; background:#f57e54; color: #fff; border-radius: 10px ; padding-top: 3%}
#sup3 .supBox dd li:nth-child(2){width: 40% ; background: #ffded2 ; color: #22201e; padding: 0 0 0 3%}
#sup3 .supBox dd li:nth-child(3){width: 60%;  background: #ffded2; text-align: right ; color: #22201e ; padding: 0}
#sup3 .supBox dd .tax{text-align: right; font-size: 13px}
#sup3 .morebtn{text-align: right}
#sup3 .morebtn a{ background-color: #f57e54; box-shadow: 5px 5px 0px #e1663a;}

#sup3 .supBox:nth-child(2){margin-bottom: 90px; background: #fff4f0}
#sup3 .supBox:nth-child(2) dd h3{position: relative; padding-left: 60px}
#sup3 .supBox:nth-child(2) dd h3 img{width: 18%; position: absolute; left:8px; top:-5px ; max-width: 50px;}
#sup3 .supBox:nth-child(2) dd .waku .tit{background:#fff4f0}
#sup3 .supBox:nth-child(2) dd ul{position: relative}
#sup3 .supBox:nth-child(2) dd li:nth-child(2){background:#fff4f0 }
#sup3 .supBox:nth-child(2) dd li:nth-child(3){background:#fff4f0 }
#sup3 .supBox:nth-child(2) dd li:last-child{background: none; max-width:136px; width: 30%; position: absolute; top: 90%;}


/*--------------------------------------------------------------------

.solo

--------------------------------------------------------------------*/
.solo{text-align: center; padding:  0 5% 0px; }
.solo h3{background: #fff; color: #f57e54; line-height: 1.5; border:2px solid #f57e54; padding: 5px 20px; border-radius: 10px; margin-bottom: 10px; font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem)}/*18-22*/
.solo img{padding: 0 5%; margin-bottom: 20px}
.solo dl{border-bottom: 2px dashed #d4d4d4; font-size: 15px; display: flex; justify-content: space-between}
.solo dt{display: inline-block ; text-align: left}
.solo dd{display: inline-block ; text-align: right}
.solo .text{text-align: left; line-height: 1.5; font-size: 14px; margin-top: 10px}

.solo li:first-child{margin-bottom: 30px}
.solo li:last-child{margin-bottom: 80px}

.solo .tax{text-align: right; font-size: 13px}
.solo span.mini{font-size: 13px}


/*--------------------------------------------------------------------

価格

--------------------------------------------------------------------*/
.price{background:#ffded2; padding: 60px 5% ; text-align: center}
.price .sub{font-size: 15px; line-height: 1.5; margin-bottom: 20px; text-align: left}
.price h2 span{font-size: 13px}
.price ul{display: flex; justify-content: space-between ; flex-flow: wrap}
.price li{width: 32%; font-size: 13px; margin-bottom: 20px; letter-spacing: -1px}
.price .waku{margin-top: 50px ; padding:5%; border:2px solid #f57e54; background: #fff ; border-radius: 20px}
.price .pri1 .waku{margin-top: 0px ;}

.price .waku h3{padding-bottom: 15px; margin-bottom: 15px; border-bottom: 2px dashed #f57e54; line-height: 1.5; color: #f57e54; font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem)}/*18-22*/
.price .pri1 .waku table{font-size: 13px; line-height: 1.5; width: 100%}

.price .pri1 .waku table th{background:#f57e54; color: #fff; text-align: center; line-height: 1.2; padding: 10px 0}
.price .pri1 .waku tr th:first-of-type{width: 50%}
.price .pri1 .waku tr th{width: 25%}
.price .pri1 .waku tr th{width: 25%}
.price .pri1 .waku tr td{text-align: right ;border-bottom: 2px dotted #f57e54; padding: 5px 0}
.price .pri1 .waku tr td:first-of-type{text-align: left}

.price .pri2  h3 span{display: block; font-size:14px }
.price .pri2 .waku{position: relative}
.price .pri2 .waku .pic{position:absolute; max-width: 109px; width: 80%; right: -1%; top: -60px}
.price .pri2 .waku .text01{font-size: 14px}


.price .course{position: relative}
.price .pri2 .course{ margin: 20px 0 30px; background:#f8f4e6; padding:0 3% 5% ; border-radius: 20px}
.price .pri2 .course:nth-of-type(2){background:#ffecea }
.price .pri2 .course:nth-of-type(3){background:#e2f4ef }

.price .pri2 .course h4{display: inline-block ; line-height: 1.5; padding:0 15px 10px; margin-bottom: 20px; background: #fff; border-radius:0 0 20px 20px; color:#b39f80; font-size:clamp(1.313rem, 1.063rem + 1.25vw, 1.563rem)  }/*21-25*/
.price .pri2 .course:nth-of-type(2) h4{color:#f6968c }
.price .pri2 .course:nth-of-type(3) h4{color:#66bda5 }

.price .pri2 .course li:first-child{margin-left:15%; width: 40%; margin-bottom: 0}
.price .pri2 .course li:nth-child(2){font-size: 50px; margin-right: 20%; width: 20%}
.price .pri2 .course li:last-child{position: relative}
.price .pri2 .course .pic01{position:absolute; width: 95px; right: -30px; top: -60px}
.price .pri2 .course:nth-of-type(2) .pic01{width: 106px; right: -80px ; top: -30px}
.price .pri2 .course:nth-of-type(3) .pic01{width: 97px; right: -90px ; top: -30px}

.price .pri2 .course:nth-of-type(2) li:last-child ,
.price .pri2 .course:nth-of-type(3) li:last-child{margin-right: 32%}
.price .pri2 .course .kakaku{background: #fff; border-radius: 10px;}

.price .pri3 .waku{position: relative}
.price .pri3 .waku .pic {
    position: absolute;
    max-width: 87px;
    width: 80%;
    right: -1%;
    top: -30px;
}
.price .pri3 h4{line-height: 1.5; color:#f57e54; font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem)}/*18-22*/
.price .pri3 h4 span.pinkb{font-size:15px; display: block; color: #22201e}

.price .pri3 li h4 span.pinkb{ display: inline-block; color: #fff; background:#ff9797 ; padding: 0 25px; height: 30px;/*リボンの高さ*/
  line-height: 30px;/*リボンの高さ*/
  text-align: center;
  box-sizing: border-box; position: relative ; transform:rotate(-5deg); left: -10px;
}

.price .pri3 li h4 span.pinkb:before, 
.price .pri3 li h4 span.pinkb:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.price .pri3 li h4 span.pinkb:before {
  top: 0;
  left: 0;
  border-width: 15px 0px 15px 10px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.price .pri3 li h4 span.pinkb:after {
  top: 0;
  right: 0;
  border-width: 15px 10px 15px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}


.price .pri3 ul{display: block}
.price .pri3 li{width: 100%; text-align: left}
.price .pri3 .bgora{ background: #ffded2; padding: 5%; border-radius: 10px}
.price .pri3 .bgora dl{display: flex; justify-content: space-between}
.price .pri3 .bgora dt{width: 50%}
.price .pri3 .bgora dd{width: 50%; text-align: right}

.price .pri4 .waku{position: relative}
.price .pri4 .waku .pic{position:absolute; max-width: 112px; width: 80%; right: -4%; top: -60px}
.price .pri4 li:nth-child(5){width: 66%; padding-top: 10px; text-align: left}
.price .pri4 dd{background: #ffded2; padding: 5%; border-radius: 10px; display: flex; justify-content: space-between}
.price .pri4 dd .textn{width: 50%; text-align: left}
.price .pri4 dd .textp{width: 50%; text-align: right}

.price .mini{font-size: 12px ; display: inline-block}

/*--------------------------------------------------------------------

.about

--------------------------------------------------------------------*/
.about{text-align: center; margin: 60px 5% 0}
.about .name{margin-top: 10px; font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem)}/*18-22*/
.about .text{text-align: left}
.about li{margin-bottom: 30px}

/*--------------------------------------------------------------------

#flow

--------------------------------------------------------------------*/
#flow{ text-align: center; padding: 60px 5%; max-width: 1100px; margin: 0 auto ; position: relative}
#flow h2{position: relative; z-index: 2 ; text-shadow:
    -1px -1px 0 white,
     1px -1px 0 white,
    -1px  1px 0 white,
     1px  1px 0 white;} 
#flow li{border: 4px solid #f57e54; border-radius: 20px; margin-bottom: 20px}

#flow .tit{background: #f57e54 ; border-radius: 15px 15px 0 0; color: #fff; padding: 20px 0 ; font-size: clamp(1.375rem, 1.307rem + 0.34vw, 1.563rem)}/*22-25*/
#flow .tit img{width:35px }
#flow .text01{padding: 20px 5%; text-align: left}
#flow .text02{padding: 0px 5% 20px; text-align: left}

#flow li:first-child .text01{ padding-bottom: 0}

#flow .morebtn{padding: 0 5% 0;}
#flow .morebtn a{ background-color: #ffb423; box-shadow: 5px 5px 0px #ff9000;}
#flow a span{display: block}
#flow a {line-height: 1.5; padding: 10px 0; display: block; background:#fe3d3c; box-shadow: 5px 5px 0px #d43130; font-size: clamp(1.375rem, 0.875rem + 2.5vw, 1.875rem) }/*22-30*/
#flow .btt{text-align: left; margin: 0 5% 10px}
#flow .btt a{display: inline-block; padding: 0 20px; font-size: 15px ; color: #fff; border-radius: 5px; }
#flow .btt a:hover {
  box-shadow: unset !important;
  transform: translate(4px,4px);
}

#flow li:nth-child(5) { border: none; border-radius:0px; margin-bottom: 0px}
#flow .peo{ position: absolute; z-index: 2; bottom: -10px ; width: 100px; right: 10%}

/*--------------------------------------------------------------------

sign

--------------------------------------------------------------------*/
.sign{line-height: 1.5; font-size: 15px; margin: 20px 5% 140px; border-radius: 10px; border: dashed 1px #22201e; padding: 0 5% 5%; }
.sign .text{position: relative; top: -10px; background:#fff; display: inline-block; padding: 0 20px; font-weight: 900}
.sign li{list-style: disc; margin-left: 20px; margin-bottom: 8px}
.sign li:last-child{margin-bottom: 0}




@media (min-width: 640px){
.headBox{    background: url(../img/bg_sen.png) no-repeat bottom left;
    background-size:704px 429px;}
.headBox dl {min-width: 1100px; position: relative; margin: 0 auto; background:none; }
.headBox dt{padding: 0; width:727px; text-align: right; margin: 0 0 0 auto; padding-bottom: 30px}
.headBox dd { width: 580px; padding-top: 10px; text-align: left; top: 10px; position:absolute; left: 50%; margin-left: -540px; z-index: 5}
.headBox dd .text01{  text-shadow:
    -1px -1px 0 white,
     1px -1px 0 white,
    -1px  1px 0 white,
     1px  1px 0 white;
}
.headBox dd .text01{padding-top: 50px}
.headBox dd .text02{margin: 0 0 30px}
.headBox dd .text03, .headBox dd .text04{padding: 0}


.tabu{line-height: 1; display: flex; justify-content: space-between; width: 1100px; margin: 0 auto 30px}


.scroll{position: relative; margin: 30px 0 20px;}
.scroll .firsr{padding: 0; width: 500px; position: absolute; top: -10px; left: 50%; margin-left: -250px;}
.scroll .firsr h2{line-height: 1.7}
.firsr .text{padding-bottom: 20px}
.scroll .kamei{top: auto; bottom: -30px}

.toha{width: 1100px; margin: 0 auto}
.toha dl{display: flex; justify-content: space-between ; flex-direction: row-reverse}
.toha dt{width: 467px}
.toha dd{width: 590px}
.toha .pic{text-align: left; margin-bottom: 20px}

.foa{ margin: 120px auto 0; width: 1100px;}
.foa .sub{font-size:20px }
.foa .sub span{font-size:26px }
.foa dl{display: flex; justify-content: space-between ; margin: 30px 0 0; align-items: center}
.foa dt{width: 467px}
.foa dd{width: 590px}
.foa .pic0{position: absolute; right: 0; top: -20px; width: 222px }
.foa .pic0 img { width: 100%;}

.push {width: 1100px; margin: 10px auto 0;}
.push dl{display: flex; justify-content: space-between ; margin: 0; align-items: center ; flex-direction: row-reverse}
.push dt{width: 565px}
.push dd{width: 480px}
.push dd .text02 {margin-bottom: 40px;}
.push .hosoku{text-align: center; font-size: 20px}

.corr {width: 1100px; margin: 80px auto 0;}
.corr dl{display: flex; justify-content: space-between ; margin: 0; align-items: center}
.corr dt{width: 467px}
.corr dd{width: 590px}

#sup3 .supBox{margin: 80px auto 50px; width: 1100px ; padding: 30px 50px 0;}
#sup3 dl{display: flex; justify-content: space-between ; margin: 0; align-items: center}
#sup3 dt{width: 489px}
#sup3 dd{width: 470px}
#sup3 .supBox dd li{letter-spacing: normal; padding-left: 5px}


#sup3 .supBox:nth-child(2) dd ul{margin-left: 100px;}
#sup3 .supBox:nth-child(2) dd li:last-child{bottom: -10px; left: -120px; top: auto}

#flow { text-align: center; padding: 40px 0 50px; width: 1100px; }
#flow ul{display: flex; justify-content: space-between; flex-flow: wrap}
#flow li{width:340px }
#flow .peo{width: 149px; bottom: -20px ; right: 2%}

.toha{width: 1100px; margin: 50px auto 0}
.toha h2{display: inline-block; padding: 10px 20px 15px;}
.toha .text{text-align: center}

.solo{width:750px; margin:100px auto 0; padding: 0}
.solo ul{display: flex; justify-content: space-between ;}
.solo li{width:340px }
.solo li:last-child{margin-top: -39px}
.solo li:last-child h3{margin-top: -30px}
.solo img{padding: 0}

.price .sub{text-align: center; font-size: 16px}
.price .plas{margin-bottom: 0px;}
.price .waku{padding: 50px}
.price li{font-size: 15px}

.price .course{padding: 0 50px 20px !important;}

.price .pri1 ul{width: 820px; margin: 0 auto}
.price .pri1 li{width: 123px}
.price .pri1 .waku table{font-size: 16px}
.price .pri2 h3 span{display: inline-block}
.price .pri2 .waku .pic{right: 150px; top:0; width: 100%;}

.price .pri2 ul{width: 600px; margin:0 auto 0 0}
.price .pri2 li{width: 123px}
.price .pri2 .course:nth-of-type(3){margin-bottom: 0}

.price .pri2 .course li:first-child{width: 123px; margin:0}
.price .pri2 .course li:nth-child(2) { font-size: 50px; margin-right: 0; width: 40px;}
.price .pri2 .course .kakaku{ padding: 0 30px 0 0; width: 150px ;text-align: right; position: absolute; bottom: 50px; right: 50px}
.price .pri2 .course .pic01 { right: -120px; top: -20px;}
.price .pri2 .course:nth-of-type(2) li:last-child, 
.price .pri2 .course:nth-of-type(3) li:last-child{margin-right: 0}

.price .pri2 .course:nth-of-type(2) ul,
.price .pri2 .course:nth-of-type(3) ul{width: 457px;}

.price .pri2 .course:nth-of-type(2) .pic01{right: -130px; top: 0px;}
.price .pri2 .course:nth-of-type(3) .pic01{right: -130px; top: 10px;}

.price .pri3 .waku .pic{right: 180px; top:-10px; width: 100%;}
.price .pri3 li{display: flex; justify-content: space-between}
.price .pri3 li h4{width:600px; position: relative}
.price .pri3 li h4 span.pinkb{font-size: 18px}
.price .pri3 li .bgora{width:350px ; padding: 10px 30px; line-height: 1.7 }
.price .pri3 .bgora dl{font-size: 16px}
.price .pri3 h4 span{display: inline-block; padding-left: 10px}
.price .pri3 dd span.hoge{font-size: 13px}
.price .pri3 li:last-child{margin-bottom: 0}

.price .pri4 .waku .pic{right: 192px; top:-10px; width: 100%;}
.price .pri4 dl{display: flex; justify-content: space-between ; align-items: flex-start; margin-top: 15px}
.price .pri4 dt{width: 560px;  }
.price .pri4 dd{width: 300px; padding: 10px 30px; line-height: 1.7  }
.price .pri4 dt ul{display: flex; justify-content: space-between}
.price .pri4 dt li{width:123px; margin-bottom: 0 }
.price .pri4 li:nth-child(5){width: 600px; margin-right: -80px; font-size: 13px}

.about {
    text-align: center;
    margin: 60px auto 0; width: 730px
}
.about ul{display: flex; justify-content: space-between ; }
.about li{width: 340px}

#flow ul{align-items: flex-start;}
#flow .morebtn a{ font-size: 20px}
#flow li:nth-child(5){width: 680px; margin-top: -130px;}
#flow li:nth-child(5) img{width: 542px;}

.sign{width: 750px; margin: 20px auto 140px; padding: 0 30px 30px; }
.sign ul{display: flex; justify-content: space-between ; flex-flow: wrap}
.sign li{width: 46%}

}



@media (min-width: 1400px){
.headBox dt{ margin-left: calc(50% - 90px);}
}