@charset "UTF-8";
@import url("base.css");
/* CSS Document */

#treatment{
  margin: 80px 0 120px;
}

.lwTreatment{
  width: calc(276 / 375 * 100vw);
  max-width: 880px;
  margin: 0 auto 90px;
}

@media screen and (min-width: 768px){
  .lwTreatment{
    width: calc(890 / 1440 * 100vw);
  }
}

.lwTreatment h2{
  font-size: clamp(16px, 16 / 375 * 100vw, 20px);
  color: #5C6C34;
}

.lwTreatment h2 > span{
  display: block;
}

@media screen and (min-width: 768px){
  .lwTreatment h2 > span{
    display: inline-block;
  }
}

.lwTreatment p{
  margin-top: 20px;
  font-size: clamp(13px, 13 / 375 * 100vw, 14px);
  letter-spacing: 1.5px;
  line-height: 1.8;
}

.treatmentBtnList{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: calc(310 / 375 * 100vw);
  margin: 0 auto 70px;
}

@media screen and (min-width: 768px){
  .treatmentBtnList{
    gap: calc(30 / 1440 * 100vw);
    width: calc(890 / 1440 * 100vw);
    max-width: 1000px;
    margin: 0 auto 120px;
  }
}

.treatmentBtnList li{
  
}

.tmCgBtn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1px;
  width: calc(150 / 375 * 100vw);
  aspect-ratio: 150 / 50;
  padding: 0 calc(20 / 150 * 100%);
  font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 600;
  font-size: clamp(12px, 12 / 375 * 100vw, 15px);
  color: #5C6C34;
  border: 1px solid #5C6C34;
  border-radius: 5px;
  background: #FFFEF0;
  transition: all .3s ease;
}

@media screen and (min-width: 768px){
  .tmCgBtn{
    justify-content: center;
    flex-direction: column;
    width: calc(200 / 1440 * 100vw);
    max-width: 200px;
    aspect-ratio: 200 / 254;
    padding: 2em calc(20 / 200 * 100%);
    font-size: clamp(13px, 13 / 768 * 100vw, 18px);
    border-radius: 10px;
    box-shadow: 4px 4px 3px rgba(0,0,0,0.25);
  }
}

.tmCgBtn:hover{
  background: #B7C593;
  box-shadow: none;
}

.tmCgBtn.active{
  background: #9DAF6F;
  color: #F8F4E3;
  box-shadow: none;
}

.hide{
  display: none;
}

.tmCgBtnImg{
  width: calc(40 / 150 * 100%);
  aspect-ratio: 1 / 1;
}

@media screen and (min-width: 768px){
  .tmCgBtnImg{
    width: calc(120 / 200 * 100%);
    max-width: 120px;
    aspect-ratio: 1 / 1;
    margin-bottom: 1em;
  }
}

.treatmentList .sectionTitle{
  padding: 40px 0 0;
}

@media screen and (min-width: 768px){
  .treatmentList .sectionTitle{
    padding: 50px 0 0;
  }
}

.treatmentContents{
  margin: 60px 0 240px;
}

.treatmentContents > li{
  position: relative;
  padding: 0 calc(30 / 375 * 100vw);
}

@media screen and (min-width: 768px){
  .treatmentContents > li{
    display: flex;
    justify-content: space-between;
    padding: 0 calc(187.5 / 1440 * 100vw);
  }
}

.treatmentContents > li:nth-child(even){
  margin: 200px 0 250px;
}

@media screen and (min-width: 768px){
  .treatmentContents > li:nth-child(even){
    flex-direction: row-reverse;
    margin: 100px 0;
  }
}

.tmImg{
  position: relative;
  
}

.treatmentContents li:nth-child(odd) img{
  position: absolute;
  top: 0;
  right: calc(13 / 375 * 100vw);
  width: calc(142 / 375 * 100vw);
  max-width: 185px;
  border-radius: 10px;
}

@media screen and (min-width: 768px){
  .treatmentContents li:nth-child(odd) img{
    position: static;
    width: calc(450 / 1440 * 100vw);
    max-width: 450px;
  }
}

.treatmentContents li:nth-child(even) img{
  position: absolute;
  top: calc(15 / 812 * 100vh);
  left: calc(10 / 375 * 100vw);
  z-index: -1;
  width: calc(142 / 375 * 100vw);
  max-width: 185px;
  border-radius: 10px;
}

@media screen and (min-width: 768px){
  .treatmentContents li:nth-child(even) img{
    position: static;
    width: calc(450 / 1440 * 100vw);
    max-width: 450px;
  }
}

.treatmentTxt{
  width: calc(250 / 375 * 100vw);
}

@media screen and (min-width: 768px){
  .treatmentTxt{
    width: calc(530 / 1440 * 100vw);
  }
}

.treatmentContents li:nth-child(even) .treatmentTxt{
  margin-left: auto;
}

@media screen and (min-width: 768px){
  .treatmentContents li:nth-child(even) .treatmentTxt{
    margin-left: 0;
  }
}

.treatmentTxt h3{
  font-size: clamp(15px, 15 / 375 * 100vw, 20px);
  color: #869C51;
}

@media screen and (min-width: 10px){
  .treatmentTxt h3{
    font-size: clamp(15px, 15 / 375 * 100vw, 20px);
  }
}

.treatmentContents li:nth-child(odd) .treatmentTxt h3::after{
  content: "";
  position: absolute;
  top: 0.7em;
  right: 0;
  display: inline-block;
  width: calc(200 / 375 * 100vw);
  height: 1px;
  background: #869C51;
}

@media screen and (min-width: 768px){
  .treatmentContents li:nth-child(odd) .treatmentTxt h3::after{
    left: 0;
    width: calc(163 / 1440 * 100vw);
  }
}

.treatmentContents li:nth-child(even) .treatmentTxt h3::before{
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  display: inline-block;
  width: calc(73 / 375 * 100vw);
  height: 1px;
  background: #869C51;
}

@media screen and (min-width: 768px){
  .treatmentContents li:nth-child(even) .treatmentTxt h3::before{
    left: auto;
    right: 0;
    width: calc(180 / 768 * 100vw);
  }
}

@media screen and (min-width: 1025px){
  .treatmentContents li:nth-child(even) .treatmentTxt h3::before{
    width: calc(420 / 1440 * 100vw);
  }
}

.treatmentTxt p{
  margin: 15px 0 20px;
  font-size: clamp(13px, 13 / 375 * 100vw, 16px);
  letter-spacing: 1px;
  line-height: 1.8;
}

.tmTxtPoint{
  position: absolute;
  right: 0;
  width: calc(287 / 375 * 100vw);
  padding: 15px 20px 20px;
  border-radius: 5px;
  background: #F0EDE5;
}

@media screen and (min-width: 768px){
  .tmTxtPoint{
    position: static;
    width: calc(500 / 530 * 100%);
    max-width: 500px;
    padding: 20px 35px 25px;
    border-radius: 10px;
  }
}

.tmTxtPoint > p{
  margin:0 0 5px;
  font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 600;
  font-size: clamp(12px, 12 / 375 * 100vw, 16px);
  color: #5C6C34;
}

@media screen and (min-width: 768px){
  .tmTxtPoint > p{
    margin: 0 0 10px;
  }
}

.tmTxtPoint ul{
  display: flex;
  column-gap: calc(20 / 287 * 100%);
}

@media screen and (min-width: 768px){
  .tmTxtPoint ul{
    flex-direction: column;
  }
}

@media screen and (min-width: 1025px){
  .tmTxtPoint ul{
    flex-direction: row;
  }
}

.tmTxtPoint li{
  font-size: clamp(13px, 13 / 375 * 100vw, 16px);
  white-space: nowrap;
}

@media screen and (min-width: 1025px){
  
}

.tmTxtPoint li::before{
  content: "";
  display: inline-block;
  width: 16px;
  aspect-ratio: 16 / 13;
  margin-right: calc(8 / 287 * 100%);
  background-image: url("../img/checkBox.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}