@charset "utf-8";

/* * {
    outline: 1px solid rgb(201, 233, 201);
} */

h1 {
  font-size: 1.6rem;
}

h2 {
  font-size: clamp(2.8rem, 3.5vw, 5rem);
  font-weight: 400;
}

.container {
  position: relative;
  /* 疑似要素の配置基準 */
  /* display: flex; */
  /* flex-direction: column;
    align-items: center; */
  width: 100%;
}

.container::before {
  content: "";
  position: absolute;
  top: clamp(100px, 30vw, 400px);
  /* div-1の中段から開始するように調整 */
  left: 0;
  /* 画面中央に配置 */
  transform: translateX(-50%);
  /* 画面中央に配置するために左に50%ずらす */
  width: 112vw;
  /* 横幅を画面幅の50%に設定 */
  height: clamp(700px, 130vw, 1700px);
  /* 高さ（div-1, div-2, div-3をカバーする分） */
  background-color: #e7dacc;
  /* 背景として使いたい色 */
  z-index: -1;
  /* コンテンツの下に配置 */
}

.topmv {
  /* 画像の上に文字を載せる*/
  position: relative;
  width: calc(100% - 10.5vw);
  height: auto;
  margin-left: 10.5vw;

  img {
    width: 100%;
    min-height: 250px;
    max-height: 85vh;
    object-fit: cover;
  }

  .topmv-text {
    position: absolute;
    top: 3.5vw;
    left: 4.2vw;
    padding: 0;
    /*clamp(最小値, 推奨値, 最大値)*/
    font-size: clamp(3rem, 5.2vw, 8rem);

    span {
      /* 文字全体幅を合わせるためblocck化 */
      display: block;
      line-height: 1.25em;
      /* block幅に最後尾文字を合わせる */
      text-align-last: justify;
      text-shadow: 1px 1px 2px #dddddd;
      color: #502200;
    }

    span:nth-child(2) {
      display: block;
      font-size: 0.75em;
      line-height: 1.75em;
    }

    p {
      margin-top: 1.3em;
      font-size: clamp(14px, 0.3em, 24px);
      line-height: 2em;
    }
  }
}

@media (max-width: 500px) {
  .topmv {
    img {
      min-height: 300px;
    }

    .topmv-text {
      p {
        display: inline-block;
        margin-top: 8em;
        line-height: 1.6;
        background-color: rgb(255, 255, 255, 0.25);
        border-radius: 0.3em;
      }
    }
  }
}

.worry {
  text-align: center;
  /*clamp(最小値, 推奨値, 最大値)*/
  font-size: clamp(2rem, 3.5vw, 56px);
  padding: clamp(50px, 11vw, 180px) 0 0;
  color: #fff;

  > div {
    padding: 0 10.5vw 2.5vw;
    background: radial-gradient(circle, #bfa7c7, #a88dae);

    h2 {
      padding-top: 1.8em;
      margin-bottom: 0;
      font-size: 0.6em;
    }

    span {
      display: inline-flex;
      padding: 0.2em 0.5em 0.3em;
      background-color: #805e89;
      border-radius: 0.4em;
      text-align: center;
      justify-content: center;
      line-height: 1;
    }

    .worry-img {
      margin-top: 0.8em;
      justify-content: center;
      /* 画像間の最小限隙間 */
      gap: clamp(10px, 5vw, 80px);

      figure {
        position: relative;
        width: clamp(100px, 18vw, 450px);
        height: auto;

        img {
          width: 100%;
        }

        figcaption {
          position: absolute;
          bottom: 2%;
          left: 52%;
          transform: translate(-50%, 0);
          font-size: 0.6em;
          letter-spacing: 0.03em;
          /* 改行を禁止する */
          width: max-content;
        }
      }
    }
  }
}

.benefit {
  max-width: 100%;
  padding: 0;
  margin-bottom: 0;
  text-align: center;

  p {
    word-break: keep-all;
    /*wbrを有効にする*/
  }

  .benefit-left {
    width: 56vw;
    padding: clamp(50px, 15vw, 180px) 0 0;
    z-index: 1;
    align-self: flex-start;
    margin-bottom: 5em;
    text-align: center;

    h2 span {
      line-height: 1.75;
      letter-spacing: -0.15em;
      /* wbrで改行させるため */
      word-break: keep-all;
      /* 漢字とカタカナ間のスキマを小さく調整する */
      display: inline-block;
      margin-left: -0.2em;
    }

    > div {
      /* 右の写真と文字の重なり回避 */
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      /* 右の写真と文字の重なり回避_end */
      margin-bottom: 3em;
    }

    img {
      width: 100%;
      height: clamp(150px, 32vw, 535px);
      border-bottom-right-radius: 2em;
    }
  }

  .benefit-right {
    width: 47vw;
    margin-left: -10%;
    align-self: flex-end;

    img {
      width: 100%;
      height: clamp(150px, 32vw, 535px);
      object-fit: cover;
      object-position: 5% 100%;
      margin-top: 18vw;
      border-top-left-radius: 2em;
    }

    > div {
      display: flex;
      background-color: #e7dacc;
      justify-content: center;

      p {
        display: flex;
        /* font-size: 1.8rem; */
        /* width: fit-content; */
        margin: 3.2em 0 clamp(2em, calc(20vw - 3rem), 13em) 3em;
      }
    }
  }
}

@media (max-width: 600px) {
  .benefit {
    p {
      letter-spacing: -0.05em;
    }

    .benefit-left {
      /* カタカナ左寄せをリセット */
      h2 span {
        margin-left: 0;
      }

      /* 画僧と重ならないようにテキストを少し左寄せ */
      > div {
        margin-left: 5%;
        margin-right: 15%;
      }
    }
  }
}

.menu {
  padding: 60px 0 0;
  max-width: 100%;
  text-align: center;
  background-color: #fdf5f2;

  > div {
    position: relative;
  }

  > div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #fbe1cb;
    border-top-right-radius: 25px;
  }

  .menu-img {
    width: 48vw;
    padding: 4vw 0;
    gap: 6.2vw;

    img {
      width: clamp(200px, 24vw, 420px);
      height: clamp(315px, 34vw, 590px);
      object-fit: cover;
      z-index: 1;
    }

    img:nth-child(1) {
      border-top-right-radius: 18vw;
      border-bottom-right-radius: 1.8vw;
    }

    img:nth-child(2) {
      border-radius: 1.8vw;
      border-top-left-radius: 18vw;
    }
  }

  .menu-text {
    margin-left: 14vw;
    margin-right: 8vw;
    text-align: start;

    span:nth-child(1) {
      /* font-size: 4.2rem; */
      display: block;
      margin-top: 0.5em;
      letter-spacing: -0.1em;
      /* wbrで改行させるため↓ */
      word-break: keep-all;
    }

    span:nth-child(2) {
      display: block;
      margin: 1.5em 0;
      /* font-size: 3rem; */
    }

    p {
      margin-bottom: 2em;
    }

    .model-btn {
      margin-bottom: 1.5em;
    }
  }
}

@media (max-width: 750px) {
  .menu {
    margin-bottom: 80px;

    > div {
      flex-direction: column;
      align-items: flex-start;
    }

    > div::before {
      width: clamp(300px, 75%, 700px);
      height: clamp(250px, 43vw, 400px);
      border-top-right-radius: 5vw;
      border-bottom-right-radius: 5vw;
    }

    .menu-img {
      width: clamp(300px, 75vw, 1100px);
      gap: 4vw;

      /* model-innerと同じ内容を追加(テキストと位置合わせ） */
      max-width: clamp(300px, 75vw, 1100px);
      margin-left: auto;
      margin-right: auto;
      justify-content: flex-start;

      img {
        width: clamp(150px, 31vw, 420px);
        height: clamp(200px, 35vw, 590px);
      }

      img:first-child {
        /* margin-left: 11vw; */
        border-top-left-radius: 1.8vw;
        border-bottom-left-radius: 1.8vw;
      }
    }

    .menu-text {
      /* model-innerと同じ内容を追加 */
      max-width: clamp(300px, 75vw, 1100px);
      margin-left: auto;
      margin-right: auto;
      padding: 30px 30px;

      .model-btn {
        align-items: center;
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
}

:where(.instagrum) {
  h2 {
    position: relative;

    display: flex;
    width: fit-content;
    /*インスタロゴ配置のため文字範囲内のスペースにする*/
    margin-left: auto;
    margin-right: auto;
    /*文字を下詰めにする*/
    align-self: flex-end;

    /* span{
            align-self: flex-end;
        } */

    span:last-child {
      /* font-size: 4rem; */
      letter-spacing: -0.07em;
    }
  }

  h2 span:last-child::after {
    content: "";
    position: absolute;
    background-image: url(../image/common/icon_instagram.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    width: 1em;
    height: 1em;
    bottom: 0.2vw;
    right: -1.3em;
  }

  /* ulとliの共通スタイル */
  .instagrum-table {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0 auto;
    line-height: 1.5;
    row-gap: 15px;
    /*縦方向のgap*/
  }

  .row {
    display: grid;
    gap: 20px;
    /*横方向のgap*/
    justify-content: space-between;
    width: 100%;
  }

  .row-1 {
    grid-template-columns: 45% 25% 25%;
  }

  .row-2 {
    grid-template-columns: 25% 25% 45%;
  }

  li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: clamp(220px, 22vw, 310px);
    /*1列の高さ*/
  }

  li a {
    width: 100%;
  }

  /* 基準となる高さを設定 */
  .row-1 li:first-child a,
  .row-2 li:last-child a {
    height: calc(100% - 3.2em);
    /*行間など踏まえたマイナス値を設定要*/
  }

  li a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
  }

  li span {
    display: block;
    margin-top: 0.25em;
  }

  /* その他の画像の高さを相対的に調整 */
  .row-1 li:not(:first-child) a,
  .row-2 li:not(:last-child) a {
    height: calc(100% - 6.5em);
  }

  /* 下詰めの要素 */
  .row-1 li:nth-child(2),
  .row-2 li:first-child {
    justify-content: flex-end;
  }

  > a {
    margin: 2em auto 0 auto;
    align-items: center;
  }
}

@media (max-width: 700px) {
  .instagrum {
    h2,
    h2 span:last-child {
      font-size: 2.8rem;
    }

    .row {
      gap: 4vw;
    }

    .row-1 {
      grid-template-columns: 55% 40%;
    }

    .row-2 {
      grid-template-columns: 40% 55%;
    }

    .row li {
      height: 220px;
    }

    .row-1 li:last-child,
    .row-2 li:nth-child(2) {
      display: none;
    }
  }
}

.contact {
  position: relative;
  /* background-color: #9B6C67; */
  background-image: url(../image/top/contact-bg-img.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  .contact-text {
    padding-top: 80px;
    padding-bottom: 80px;
    margin-bottom: 0;

    h2 {
      margin-bottom: 0.1em;
      /* color: #fff; */
    }

    > span {
      font-size: 2rem;
      /* color: #fff; */
    }

    h2 {
      color: #fff;
      text-shadow: 2px 1px 2px #722620;
    }

    > span {
      color: #fff;
      text-shadow: 2px 1px 2px #722620;
      font-weight: 700;
    }
  }

  .contact-method {
    max-width: 100%;
    margin: 3em auto 0;
    /* font-size: 2.2rem; */
    line-height: 1.5;
    justify-content: space-between;
    gap: 2em;
    align-items: stretch;
    white-space: nowrap;

    a {
      color: #502200;
      width: fit-content;
      background-color: #f9f9f9;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #dddddd;
      border-radius: 3px;
      padding: 0 0.5em;
    }

    a:not(:first-child) > span {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 3px;
      /* padding上下はmediaクエリ用 */
      padding: 0.5em 2em;
    }
  }
}

.contact::before {
  content: "";
  display: block;

  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(250, 235, 235, 0.6);
  /* z-index: 1; */
}

.contact * {
  position: relative;
  /* z-index: 2; */
}

@media (max-width: 900px) {
  .contact {
    .contact-method {
      flex-direction: column;
      width: 270px;
    }

    .contact-method {
      gap: 2em;

      a,
      span {
        width: 100%;
      }
    }

    .contact-method a span {
      display: block;
      width: 100%;
    }
  }
}