@charset 'UTF-8';
/*============================
  ルート
=============================*/
:root{
  --gold: #936b40;
  --bg: #f4f0ec;
  --gothic: 'Noto Sans JP', '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  --bianca: "bianca", sans-serif;
  --mincho: 'Noto Serif Japanese', '游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
  --zen: "Zen Kurenaido", sans-serif;
  --inner: min(100% - 4rem , 1200px);
  --inner-large: min(100% - 4rem , 1400px);
  --margin-auto: auto;
  --shadow: 0 20px 30px rgba(0,0,0,.1);
  --title-font-size: clamp(2rem,3vw,4rem);
  --subtitle-font-size: clamp(2rem,3vw,6rem);
}
/* box-shadow: -25.7px 33.8px 50px rgba(0, 0, 255, 0.2); */
/* background-image: linear-gradient(90deg, rgba(147, 107, 64, 1) 20%, rgba(190, 149, 104, 1) 50%, rgba(147, 107, 64, 1) 80%); */
/*============================
  共通
=============================*/
main{
  font-size: 2rem;
  line-height: 2;
  font-weight: 300;
  @media screen and (width <= 640px){
    font-size: 1.6rem;
  }
}
h1,h2,h3,h4{
  font-weight: 400;
  font-family: var(--mincho);
}
.text-center{
  text-align: center;
  width: fit-content;
  margin-inline: auto;
}
.title-02{
  &._common{
    text-align: center;
    h2{
      font-size: var(--title-font-size);
      margin-bottom: -3%;
    }
    p{
      font-size: var(--subtitle-font-size);
      font-family: var(--bianca);
      color: var(--gold);
      letter-spacing: 4px;
    }
  }
}
/*============================
  js
=============================*/

/*============================
  メイン画像
=============================*/
.main{
  &._common{
    img{
      width: 100% !important;
    }
  }
}

/*============================
  section 01
=============================*/
.section-01{
  margin-block: 60px;
  .text{
    text-decoration: underline;
  }
}
/*============================
  section 02
=============================*/
.section-02{
  background: var(--bg);
  & > div {
    width: var(--inner-large);
    margin-inline: var(--margin-auto);
    padding-block: 60px;
  }
}
/*============================
  section 03
=============================*/
.section-03{
  background: url(../images/common/kaigen-bg1.jpg) center / cover no-repeat;
  & > div {
    width: var(--inner-large);
    margin-inline: var(--margin-auto);
    padding-block: 60px;
  }
  .text{
    color: #fff;
    font-family: var(--mincho);
    span{
      font-size: clamp(3rem,3vw,4rem)
    }
    br{
      @media screen and (max-width: 834px){
        display: none;
      }
    }
  }
}
/*============================
  section 04
=============================*/
.section-04{
  margin-block: 60px;
  & > div {
    width: var(--inner-large);
    margin-inline: var(--margin-auto);
  }
  .wrap{
    display: grid;
    grid-template-columns: repeat(var(--column,3),1fr);
    gap: var(--gap,30px);
    align-items: stretch;
    @media screen and (max-width: 834px){
      --gap: 15px;
    }
    @media screen and (max-width: 640px){
      --column: 1;
    }
  }
  .block{
    background: #fff;
    border: 2px solid var(--gold);
    box-shadow: 25.7px 33.8px 50px rgba(0, 0, 255, 0.1);
    display: flex;
    flex-direction: column;
  }
  .group{
    padding: 30px;
    text-align: center;
    flex: 1;
    @media screen and (max-width: 834px){
      padding: 30px 15px;
    }
  }
  h3{
    font-family: var(--gothic);
    font-size: clamp(1.4rem,1.6vw,1.6rem);
    span{
      font-size: clamp(2.4rem,2.4vw,3rem);
    }
  }
  .hukidashi{
    font-size: clamp(1.4rem,1.6vw,1.6rem);
    color: #fff;
    line-height: 1;
    padding: 2px 5px 4px;
    &._gold{
      background: var(--gold);
    }
    &._black{
      background: #000;
    }
  }
  .price{
    font-size: clamp(4rem,6vw,8rem);
    font-family: var(--mincho);
    color: var(--gold);
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 5px;
    line-height: 1;
    letter-spacing: 0px;
    margin-top: auto;
    @media screen and (max-width: 640px){
      font-size: clamp(7rem,7vw,8rem);
    }
    &::after{
      content: "";
      background: url(../images/common/kaigen-en.png) center bottom 10px / contain no-repeat;
      width: min(1.5vw,26px);
      aspect-ratio: 1/2;
      display: block;
      @media screen and (max-width: 640px){
        width: min(4.5vw,36px);
      }
    }
  }
  .link{
    width: min(100% , 300px);
    margin-top: auto;
    a{
      background-image: linear-gradient(90deg, rgba(147, 107, 64, 1) 20%, rgba(190, 149, 104, 1) 50%, rgba(147, 107, 64, 1) 80%);
      display: block;
      text-align: center;
      border-radius: 100vmax;
      padding-block: 15px;
      color: #fff;
      text-decoration: none;
      font-size: clamp(1.4rem,1.6vw,1.6rem);
      box-shadow: 0 5px 5px rgba(000,000,000,.1);
    }
  }
}
/*============================
  section 05
=============================*/
.section-05{
  background: var(--bg);
  & > div {
    width: var(--inner-large);
    margin-inline: var(--margin-auto);
    padding-block: 60px;
  }
}
/*============================
  section 06
=============================*/
.section-06{
  margin-block: 60px;
  .midashi{
    color: var(--gold);
    border-bottom: 1px solid var(--gold);
    padding-bottom: 10px;
  }
  .wrap{
    display: grid;
    grid-template-columns: repeat(var(--column,2),1fr);
    gap: var(--gap,30px);
    align-items: stretch;
    @media screen and (max-width: 834px){
      --gap: 15px;
    }
    @media screen and (max-width: 640px){
      --column: 1;
    }
  }
  .block{
    position: relative;
    p{
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0;
      background: #fff;
      z-index: 1;
      padding: 2px 10px 5px;
      text-align: center;
      width: min(20vw,230px);
      @media screen and (max-width: 640px){
        width: min(30vw,230px);
      }
    }
  }
}
/*============================
  section 07
=============================*/
.section-07{
  .midashi{
    font-size: clamp(2rem,3vw,3rem);
    @media screen and (max-width: 640px){
      text-align: center;
    }
  }
  figure{
    box-shadow: 25.7px 33.8px 50px rgba(0, 0, 255, 0.1);
    border: 2px solid var(--gold);
  }
}
/*============================
  section 08
=============================*/
.section-08{
  background: var(--bg);
  margin-bottom: -70px;
  & > div {
    width: var(--inner-large);
    margin-inline: var(--margin-auto);
    padding-block: 60px;
  }
  .faq{
    .block{
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 20px;
      font-family: var(--mincho);
      &::before{
        content: var(--text);
        font-size: clamp(2.4rem,4vw,6rem);
        line-height: 1.3;
      }
      &._01{
        background: #fff;
        --text: "Q";
      }
      &._02{
        --text: "A";
      }
    }
  }
}
@media screen and (max-width: 834px){

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

}