@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_130: max(130px, 9.52vw);
  --margin_70: max(70px, 5.12vw);
  --margin_20: max(20px, 1.46vw);
  --font_size_37: max(37px, 2.71vw);
  --font_size_19: max(19px, 1.39vw);
  --font_size_21: max(21px, 1.54vw);
  --font_size_25: max(25px, 1.83vw);
  --font_size_50: max(50px, 3.66vw);
  --font_size_14: max(14px, 1.02vw);
  --font_size_12: max(12px, 0.88vw);
}

@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_130: max(55px, 14.67vw);
    --margin_70: max(45px, 12vw);
    --margin_20: max(15px, 4vw);
    --font_size_37: max(24px, 6.4vw);
    --font_size_19: max(15px, 4vw);
    --font_size_21: max(18px, 4.6vw);
    --font_size_25: max(25px, 5.6vw);
    --font_size_50: max(50px, 12vw);
    --font_size_14: max(12px, 3.2vw);
    --font_size_12: max(11px, 2.93vw);
  }
}

main {
  max-width: 100%;
  margin: 0 auto;
  padding-top: max(110px, 8.05vw);

  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(max-width:770px) {
    .pc_display {
      display: none;
      visibility: hidden;
    }

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

  }

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

    .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_37);
      }
    }

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

    .text {
      p {
        font-size: var(--font_size_19);
        line-height: 2.1;
        text-align: center;
      }
    }
  }

  .aboutArea {
    .rowBlock {
      width: 100%;
      display: grid;
      grid-template-columns: 31.8% 68.2%;
      grid-template-rows: auto;

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

    .left {
      width: 100%;

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

        @media screen and (max-width: 770px) {
          margin-bottom: var(--base_font);
          text-align: center;
        }

        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;
        }
      }
    }

    .right {
      width: 100%;

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

        table {

          th,
          td {
            vertical-align: top;
            text-align: start;
            padding-top: var(--list_margin);
            padding-bottom: var(--list_margin);

            @media screen and (max-width: 770px) {
              display: block;
            }
          }

          th {
            width: fit-content;
            padding-right: var(--block_margin);

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

            p {
              white-space: nowrap;
            }
          }

          td {
            width: auto;

            p {
              margin-bottom: var(--small_font);

              &:last-child {
                margin-bottom: 0;
              }
            }
            .kome{
              font-size: var(--font12);
            }
          }

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

      .announsBlock {
        width: 100%;
        padding: var(--list_margin);
        background-color: #EEF0F2;

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

        h5 {
          font-size: var(--base_font);
          line-height: 1;
          margin-bottom: var(--list_margin);
        }

        p {
          margin-bottom: var(--list_margin);

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .guidanceArea {
    padding: var(--block_margin) 0;
    background-color: #EEF0F2;

    h3 {
      font-size: var(--font_size_21);
      text-align: center;
      line-height: 2.1;
      letter-spacing: 0.19em;
      margin-bottom: var(--margin_70);

      span {
        color: #AF1515;
        font-size: var(--font_size_19);
        letter-spacing: 0.1em;

        &.en {
          font-size: var(--font_size_25);
        }
      }
    }

    ul {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto;
      column-gap: var(--title_margin);
      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);
      }

      li {
        .top {
          margin-bottom: var(--margin_20);

          &>p {
            margin-bottom: var(--small_font);
          }

          .lineBox {
            width: 100%;
            padding: var(--base_font) 0;
            border: #AF1515 solid 1.5px;

            p {
              text-align: center;
              line-height: 1;
              color: #AF1515;
            }
          }
        }

        .middle {
          margin-bottom: var(--margin_20);
          width: 100%;
          height: auto;
          aspect-ratio: 666/253;

          img {
            object-fit: contain;
          }
        }

        .under {
          .productName {
            margin-bottom: var(--small_font);

            p {
              &:not(.bold) {
                font-size: var(--small_font);
              }
            }
          }

          .priceBox {
            display: flex;
            justify-content: start;
            align-items: baseline;

            .bold {
              color: #AF1515;
              margin-right: var(--font07);
            }

            .strikethrough {
              font-size: var(--small_font);
              text-decoration: line-through;
            }
          }
        }
      }
    }

    .btnBlock {
      .base_btn {
        width: fit-content;
        padding: 1.43em 3.44em;
        background-color: #AF1515;

        &::after {
          background-color: #FFFFFF;
        }

        span {
          color: #FFFFFF;
          font-size: var(--font16);
        }

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

  .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);
      }
    }
  }

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

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