@charset "utf-8";

/*---個別に必要なcssを追記----*/
:root {
  --section_margin: max(160px, 11.71vw);
  --block_margin: max(100px, 7.62vw);
  --title_margin: max(50px, 3.66vw);
  --list_margin: max(30px, 2.2vw);
  --base_font: max(15px, 1.1vw);
  --small_font: max(13px, 0.95vw);
  --brand-color01: #1C1C1C;
  --brand-color02: #B0B2AF;
  --brand-color03: #EEF0F2;
  --brand-color04: #ECEBE4;
  --margin_70: max(70px, 5.12vw);
  --margin_20: max(20px, 1.46vw);
  --font_size_50: max(50px, 3.66vw);
  --font_size_31: max(31px, 2.27vw);
  --font_size_29: max(29px, 2.12vw);
  --font_size_23: max(23px, 1.68vw);
  --font_size_21: max(21px, 1.54vw);
  --font_size_19: max(19px, 1.39vw);
  --font_size_16: max(16px, 1.17vw);
  --font_size_14: max(14px, 1.02vw);
}

@media screen and (max-width: 770px) {
  :root {
    --section_margin: clamp(80px, 0.024px + 21.327vw, 164.241px);
    --block_margin: clamp(50px, 0.024px + 13.327vw, 102.641px);
    --title_margin: clamp(35px, 0.024px + 9.327vw, 71.841px);
    --list_margin: clamp(20px, 0.024px + 5.327vw, 41.041px);
    --base_font: clamp(13px, -0.024px + 3.473vw, 26.719px);
    --small_font: clamp(11px, 0.024px + 2.927vw, 22.561px);
    --margin_70: max(45px, 12vw);
    --font_size_50: max(50px, 12vw);
    --margin_20: max(15px, 4vw);
    --font_size_31: max(23px, 6.13vw);
    --font_size_29: max(19px, 5.07vw);
    --font_size_23: max(17px, 4.53vw);
    --font_size_21: max(18px, 4.6vw);
    --font_size_19: max(15px, 4vw);
    --font_size_16: max(14px, 3.73vw);
    --font_size_14: max(12px, 3.2vw);
  }
}

main {
  max-width: 100%;
  margin: 0 auto;
  padding-top: max(115px, 8.42vw);
  img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
    transition: transform .35s;
  }

  .container {
    width: 93%;
    max-width: max(1200px, 80.5vw);
    margin: 0 auto;
  }

  section {
    width: 100%;
    height: auto;
    margin-bottom: var(--section_margin);
  }

  p,
  span,
  a {
    font-size: var(--base_font);
    transition: color .35s, transform .35s;
  }

  .pc_display {
    display: block;
    visibility: visible;
  }

  .sp_display {
    display: none;
    visibility: hidden;
  }

  @media screen and (max-width: 770px) {
    .pc_display {
      display: none;
      visibility: hidden;
    }

    .sp_display {
      display: block;
      visibility: visible;
    }

  }


  .introArea {
    margin-bottom: var(--block_margin);

    .headLine {
      width: 100%;
      margin-bottom: var(--list_margin);

      .topPart {
        display: flex;
        align-items: end;
        justify-content: start;
        margin-bottom: var(--list_margin);

        span {
          font-size: 11px;
          display: block;
          padding: 7px 31px;
          border: #DADDD8 solid 1px;
          border-radius: 5px;
          line-height: 1;
          margin-right: 12px;
        }

        small {
          font-size: 12px;
          display: block;
          line-height: 1;
        }
      }

      h1 {
        font-size: var(--font_size_29);
        line-height: 1.7;
@media screen and (max-width: 770px) {
font-size: var(--font_size_23);
}
      }
    }

    .img_box {
      width: 100%;
      height: auto;
      aspect-ratio: 2/1;
      margin-bottom: var(--margin_70);
    }

    .text {
      max-width: max(800px, 58.57vw);
      margin: 0 auto;
h2{
  color: #1C1C1C;
  text-align: center;
  margin-bottom: var(--list_margin);
  font-size: var(--font_size_29);
  line-height: 1.7;
}
      p {
        font-size: var(--font_size_16);
        line-height:1.8;
text-align: center;
      }
    }
  }

  .couchDetailArea {
    h2 {
      font-size: var(--font_size_29);
      line-height: 1.7;
    }

    .rowBox {
      width: 100%;
      height: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      column-gap: var(--margin_70);
      align-content: start;
      margin-bottom: var(--block_margin);

      @media screen and (max-width: 770px) {
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto;
        row-gap: var(--title_margin);
      }

      .img {
        grid-area: 1/1/4/2;
        width: 100%;
        height: auto;
        aspect-ratio: 1.618/1;
      }

      h2 {
        grid-area: 1/2/2/3;
        margin: var(--title_margin) 0;
        height: fit-content;
      }

      p {
        grid-area: 2/2/3/3;
        height: fit-content;
      }

      &.ver2 {
        .img {
          grid-area: 1/2/4/3;
        }

        h2 {
          grid-area: 1/1/2/2;
        }

        p {
          grid-area: 2/1/3/2;
        }
      }

      @media screen and (max-width: 770px) {
        .img {
          grid-area: 2/1/3/2;
        }

        h2 {
          grid-area: 1/1/2/2;
          margin: 0;
        }

        p {
          grid-area: 3/1/4/2;
        }

        &.ver2 {
          .img {
            grid-area: 2/1/3/2;
          }

          h2 {
            grid-area: 1/1/2/2;
            margin: 0;
          }

          p {
            grid-area: 3/1/4/2;
          }
        }
      }
    }

    .cloumnsBox {
      width: 100%;
      height: auto;
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: auto auto;
      grid-auto-rows: auto;
      justify-content: center;
      margin-bottom: var(--block_margin);
      row-gap: var(--title_margin);

      .img {
        width: 100%;
        height: auto;
        aspect-ratio: 2/1;
        max-width: max(800px, 58.57vw);
        margin: 0 auto;
      }

      &.verBasic {
        @media screen and (max-width: 770px) {
          h2 {
            grid-area: 1/1/2/2;
          }

          &>p {
            grid-area: 3/1/4/2;
          }

          .img {
            grid-area: 2/1/3/2;
            aspect-ratio: 4/3;
          }
        }
      }



      .imgsList {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, calc(50% - var(--title_margin) / 2));
        column-gap: var(--title_margin);

        @media screen and (max-width: 770px) {
          grid-template-columns: 100%;
          grid-template-rows: auto auto;
          row-gap: var(--title_margin);
        }

        li {
          width: 100%;
          height: auto;
          aspect-ratio: 2/1;

          img {
            object-fit: contain;
          }

          p {
            font-size: var(--font_size_19);
          }
        }

        .productBox {
          &>p {
            font-size: var(--font_size_19);
          }

          table {
            width: 100%;

            th,
            td {
              font-size: var(--base_font);
              text-align: left;

              p {
                font-size: var(--base_font);
              }
            }

            th {
              width: 5.5em;
              padding-right: 2em;
            }

            td {
              p {
                span {
                  font-size: var(--small_font);
                  margin: 0 3px;

                  &.ba {
                    font-size: var(--base_font);
                    margin-left: 0;
                  }

                  &:first-child {
                    margin-left: 0;
                  }
                }
              }
            }
          }
        }
      }

      .tabelList {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, calc(50% - var(--title_margin) / 2));
        grid-template-rows: auto auto;
        column-gap: var(--title_margin);
        align-content: start;
        justify-items: start;

        @media screen and (max-width: 770px) {
          grid-template-columns: 100%;
          grid-template-rows: auto auto;
          row-gap: var(--title_margin);
        }

        table {
          width: 100%;
          margin-bottom: var(--list_margin);

          p,
          span {
            font-size: var(--font_size_19);
            margin-bottom: 0;

            @media screen and (max-width: 770px) {
              font-size: var(--font_size_16);
            }
          }

          th,
          td {
            font-size: var(--font_size_19);
            text-align: left;
            padding: var(--list_margin) 0;
            vertical-align: top;
            line-height: 1;

            @media screen and (max-width: 770px) {
              font-size: var(--font_size_16);
            }
          }

          th {
            width: 8em;
            padding-right: 2em;

            @media screen and (max-width: 770px) {
              width: 7em;
              padding-right: 1em;
            }
          }


          tr {
            border-bottom: #DADDD8 solid 1px;

            &:first-child {

              th,
              td {
                padding-top: 0;
              }

            }
          }

          .pastPricesBox {
            display: flex;
            align-items: center;
            margin-bottom: var(--base_font);
          }

          .discount {
            font-size: var(--base_font);
            border: #AF1515 solid 1px;
            padding: 4px var(--base_font);
            line-height: 1;
            display: flex;
            align-items: baseline;
            color: #AF1515;
            margin-left: var(--small_font);

            @media screen and (max-width: 770px) {
              padding: 4px var(--font12);
            }

            span {
              font-size: var(--font12);
              color: #AF1515;
            }
          }
        }

        .base_btn {
          width: fit-content;
          padding: 1.4em 3.5em;
          margin: 0;

          @media screen and (max-width: 770px) {
            margin: 0 auto;
          }

          span {
            font-size: var(--font_size_16);
          }

        }

        .img {
          @media screen and (max-width: 770px) {
            grid-area: 1/1/2/2;
          }
        }



      }
    }

    .textBox {
      width: 100%;
      margin-bottom: var(--block_margin);

      p,
      span {
        font-size: var(--font_size_23);
      }

      p {
        width: 100%;
        max-width: max(800px, 58.57vw);
        margin: 0 auto;
        text-align: center;
      }
    }

    .linkBox {
      .base_btn {
        width: fit-content;
        padding: 1.4em 3.5em;
        margin: 0 auto;

        span {
          font-size: var(--font_size_16);
        }
      }
    }
  }

  .contactArea {
    .inner {
      padding-top: var(--section_margin);
      border-top: #DADDD8 solid 1px;
      max-width: max(800px, 58.57vw);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 50% 50%;

      @media screen and (max-width: 770px) {
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
      }
    }

    .inner_left {
      width: 100%;

      .headline {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;


        h2 {
          color: #B0B2AF;
          font-size: var(--font_size_50);
          line-height: 1;
          margin-bottom: var(--small_font);
        }

        p {
          font-size: var(--font_size_14);
          line-height: 1;

        }
      }
    }

    .tel_mail {
      width: 100%;
      display: grid;
      grid-template-columns: auto auto;
      justify-content: end;
      padding-top: var(--list_margin);

      @media screen and (max-width: 770px) {
        padding-top: var(--title_margin);
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        justify-content: start;
        row-gap: var(--list_margin);
      }

    }

    .freePhone {
      margin-right: var(--list_margin);

      a {
        display: flex;
        align-items: center;
        justify-content: start;
        line-height: 1;
        gap: 5px;
        margin-bottom: 10px;

        svg {
          width: var(--width20);
          height: auto;
          aspect-ratio: 41/27;
          transition: fill .35s;
          margin-right: 3px;
        }

        span {
          font-size: var(--font_size_21);
          white-space: nowrap;

        }

        &:hover {
          span {
            color: #B0B2AF;
          }

          svg {
            fill: #B0B2AF;
          }
        }
      }

      .announce {
        justify-items: start;

        div {
          width: fit-content;
          display: flex;
          column-gap: 5px;
          margin-bottom: var(--font07);
        }

        p {
          font-size: var(--font12);
          line-height: 1;
          white-space: nowrap;
        }
      }
    }

    .mailForm {
      a {
        margin-bottom: 7px;
        display: flex;
        align-items: center;
        justify-content: start;

        &::after {
          content: '';
          display: block;
          width: calc(var(--font07) + 2px);
          height: calc(var(--font07) + 2px);
          border-top: 1px solid #B0B2AF;
          border-right: 1px solid #B0B2AF;
          transform: rotate(45deg);
        }

        svg {
          width: clamp(20px, 5.333px + 1.222vw, 28.8px);
          height: auto;
          aspect-ratio: 1/1;
          transition: fill .35s;
          margin-right: 3px;
        }

        span {
          font-size: var(--base_font);
          white-space: nowrap;
          display: block;
          line-height: 1;
          margin-right: var(--font07);

        }

        &:hover {
          span {
            color: #B0B2AF;
          }

          svg {
            fill: #B0B2AF;
          }
        }
      }

      p {
        font-size: var(--font12);
        line-height: 1.6;
      }
    }
  }

  .backBtnArea {
    .base_btn {
      width: fit-content;
      padding: 1.5em 4em;
      margin: 0 auto;

      span {
        font-size: var(--base_font);
        line-height: 1;
      }
    }
  }
}