@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_40: max(40px, 2.93vw);
  --margin_20: max(20px, 1.46vw);
  --font_size_31: max(31px, 2.27vw);
  --font_size_25: max(25px, 1.83vw);
  --font_size_22: max(22px, 1.61vw);
  --font_size_21: max(21px, 1.54vw);
  --font_size_19: max(19px, 1.39vw);
  --font_size_17: max(17px, 1.24vw);
  --font_size_16: max(16px, 1.17vw);
  --font_size_14: max(14px, 1.02vw);
  --contact_50: max(50px, 3.66vw);
}

@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(40px, 10.67vw);
    --margin_40: max(25px, 6.67vw);
    --margin_20: max(15px, 4vw);
    --font_size_31: max(17px, 4.53vw);
    --font_size_25: max(16px, 4.27vw);
    --font_size_22: max(16px, 4.27vw);
    --font_size_21: max(14px, 3.73vw);
    --font_size_19: max(13px, 3.47vw);
    --font_size_17: max(13px, 3.47vw);
    --font_size_16: max(12px, 3.2vw);
    --font_size_14: max(12px, 3.2vw);
    --contact_50: max(50px, 12vw);
  }
}

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

  * {
    font-family: MFW-YuGoPr6N-Medium, "游ゴシック体 Pr6N M", "Yu Gothic Pr6N M", YuGothic, "游ゴシック体 Medium", "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, 游ゴシック, "Yu Gothic", "ヒラギノ角ゴ Pro W3", Arial, Helvetica, メイリオ, Meiryo, "ＭＳ ゴシック", sans-serif;
  }

  img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
    transition: transform .35s;
  }

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

  section {
    width: 100%;
    height: auto;
  }

  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_70);

    .fv_img_box {
      width: 100%;
      max-width: max(800px, 58.57vw);
      margin: 0 auto;
      margin-bottom: var(--margin_70);
    }

    h1 {
      font-size: var(--font_size_31);
      margin-bottom: var(--margin_40);
      line-height: 1.65;
    }

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

      span.bold {
        font-size: var(--font_size_22);
        color: #AF1515;
      }
    }

  }

  .aboutArea {
    margin-bottom: var(--margin_70);

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

      dt {
        font-size: var(--font_size_21);
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        line-height: 1.8;

        &::before {
          content: "";
          width: var(--small_font);
          height: auto;
          display: block;
          aspect-ratio: 1/1;
          border-radius: 50%;
          background-color: #1C1C1C;
          margin-right: clamp(5px, 3.565px + 0.383vw, 9px);
        }
      }

      dd {
        font-size: var(--font_size_21);
        line-height: 1.8;
      }

      small {
        font-size: var(--font_size_17);
        display: block;
        line-height: 1.63;
      }
    }

    p.bold {
      color: #AF1515;
      font-size: var(--font_size_19);
      line-height: 1.8;

      a {
        font-size: var(--font_size_19);
        text-decoration: underline;
        transition: opacity .35s;

        &:hover {
          opacity: .7;
        }
      }
    }
  }

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

    .guidanceBlock {
      width: 100%;
      height: auto;
      margin-bottom: var(--title_margin);

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

      h3 {
        font-size: var(--font_size_21);
        margin-bottom: var(--list_margin);
      }

      ol {
        width: 100%;
        height: auto;
        counter-reset: ulItem;

        li {
          width: 100%;
          position: relative;
          font-size: var(--font_size_19);
          padding-left: max(36px, 2.64vw);
          margin-bottom: var(--list_margin);
          line-height: 1.8;

          @media screen and (max-width: 770px) {
            padding-left: max(31px, 8.27vw);
          }

          &::before {
            font-family: "MFW-YuGoPr6N-Bold", "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体 Bold", YuGothic, "游ゴシック Bold", "Yu Gothic Bold", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
            position: absolute;
            counter-increment: ulItem;
            content: counter(ulItem);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: var(--font_size_14);
            width: var(--font_size_25);
            height: var(--font_size_25);
            color: #FFFFFF;
            background-color: #1C1C1C;
            margin-right: clamp(5px, 3.565px + 0.383vw, 9px);
            top: 6px;
            left: 0;
            line-height: 1;

            @media screen and (max-width: 770px) {
              width: max(21px, 5.6vw);
              height: max(21px, 5.6vw);
            }
          }

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

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

      dl {
        dt {
          font-size: var(--font_size_19);
          display: flex;
          justify-content: flex-start;
          align-items: center;
          line-height: 1.8;

          &::before {
            content: "";
            width: var(--small_font);
            height: auto;
            display: block;
            aspect-ratio: 1/1;
            border-radius: 50%;
            background-color: #1C1C1C;
            margin-right: clamp(5px, 3.565px + 0.383vw, 9px);
          }
        }

        dd {
          font-size: var(--font_size_19);
          margin-bottom: var(--font_size_25);
          line-height: 1.8;

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

        picture {
          width: 100%;
          max-width: max(800px, 58.57vw);
          height: auto;
          margin: 0 auto;
          margin-left: 0;
          display: block;
          border-radius: 5px;
          border: #DADDD8 1px solid;
          overflow: hidden;
          margin-bottom: var(--list_margin);
        }
      }
    }
  }

  .formArea {
    margin-bottom: var(--section_margin);

    h2 {
      font-size: var(--font_size_25);
      margin-bottom: var(--margin_40);
      text-align: center;
    }

    .base_btn {
      font-size: var(--font_size_17);
      width: fit-content;
      margin: 0 auto;
      padding: 2.1em 3.9em;
      background-color: #1C1C1C;

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

      span {
        font-size: var(--font_size_17);
        color: #FFFFFF;
        line-height: 1;
      }

      &:hover {
        span {
          color: #1C1C1C;
        }
      }
    }

    .formBlock {
      width: 100%;
      max-width: max(800px, 58.57vw);
      margin: 0 auto;
    }

    .borderWrap {
      border-top: #B0B2AF solid 1px;
      border-bottom: #B0B2AF solid 1px;
      padding: var(--margin_40) 0;
      margin-bottom: var(--margin_40);

      p {
        font-size: var(--font_size_17);
        margin-bottom: var(--margin_20);
      }

      table {
        width: 100%;

        tr {
          .err {
            display: none;
            font-size: var(--small_font);
            color: #AF1515;
          }

          th,
          td {
            padding: var(--margin_20) 0;
            padding-left: 10px;
            transition: background-color .25s;

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

          th {
            font-size: var(--font_size_19);
            width: 13em;
            padding-right: var(--margin_20);
            text-align: left;
            vertical-align: top;

            @media screen and (max-width: 770px) {
              width: 100%;
              padding-right: 10px;
              padding-bottom: var(--font07);
            }

            .tag {
              display: inline-block;
              font-size: var(--small_font);
              padding: 3px 7px;
              background-color: #B0B2AF;
              color: #FFFFFF;
              line-height: 1;
            }

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

          td {
            padding-right: 10px;

            @media screen and (max-width: 770px) {
              width: 100%;
              padding-top: var(--font07);
            }

            input,
            select {
              border: #DADDD8 solid 1px;
              border-radius: 3px;
              font-size: var(--font_size_17);
              line-height: 1;
              padding: 0 10px;

              &::placeholder {
                font-size: var(--font_size_17);
                color: #B0B2AF;
                line-height: 1;
              }
            }

            input {
              width: 100%;
            }

            .selectWrap {
              position: relative;
              width: fit-content;

              &::after {
                position: absolute;
                content: '';
                display: block;
                width: 0;
                height: 0;
                border-style: solid;
                border-right: 4px solid transparent;
                border-left: 4px solid transparent;
                border-top: 7px solid #1c1c1c;
                border-bottom: 0;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);

              }

              select {
                padding: 9px 20px 9px 10px;
              }
            }


            .addressLump {
              margin-bottom: var(--margin_20);

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


            }

            small {
              display: block;
              font-size: var(--small_font);
              line-height: 1;
              margin-bottom: 5px;
            }
          }

          &.ng {
            .err {
              display: block;
            }

            th {
              background-color: #FFDBDB;
            }

            td {
              background-color: #FFF2F2;
            }
          }

          &.ok {
            th {
              background-color: #DBF0FF;
            }

            td {
              background-color: #F2F9FF;
            }
          }
          &:last-child{
            td{
              input{
                margin-bottom: 10px;
              }
            }
          }
        }
      }
    }

    .note {
      text-align: center;
      a{
        text-decoration: underline;
        transition: opacity .35s;
        &:hover{
          opacity: .7;
        }
      }
    }

    .g-recaptcha {
      display: flex;
      margin: var(--margin_40) 0;
      justify-content: center;
    }

  }

  .contactArea {
    margin-bottom: var(--section_margin);

    .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(--contact_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: max(21px, 1.54vw);
          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 {
    margin-bottom: var(--section_margin);

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

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

  .thankTextArea {
    margin-bottom: var(--section_margin);

    h1 {
      font-size: var(--font_size_25);
      padding: var(--block_margin) 0;
      text-align: center;
    }

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

      p {
        font-size: var(--font_size_19);
        margin-bottom: var(--list_margin);
        line-height: 1.8;

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

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

  .contribute_modal {
    background-color: #fff;
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available;
    padding: 50px 25px;
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    z-index: 99999;
    transition: .3s;
  }

  .contribute_modal h4 {
    font-size: 15px;
    text-align: center;
    margin-top: auto;
  }

  .contribute_modal h5 {
    font-size: 13px;
  }

  .contribute_modal p {
    font-size: 12px;
  }

  .contribute_modal>p {
    text-align: center;
    margin-top: 10px;
  }

  .contribute_modal p.right {
    text-align: right;
  }

  .contribute_modal>ul {
    width: 100%;
    max-width: 800px;
    margin: 25px auto;
    padding: 25px 0;
    border-top: 1px solid #B0B2AF;
    border-bottom: 1px solid #B0B2AF;
    display: grid;
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .contribute_modal button {
    background-color: #1c1c1c;
    display: block;
    padding: 12px 50px;
    margin: 0 auto auto;
  }

  .contribute_modal button::after {
    background-color: #fff;
  }

  .contribute_modal button span {
    color: #fff;
  }

  .contribute_modal button:hover span {
    color: #1c1c1c;
  }

  .modal-body {
    background: none;
  }

  @media(min-width:1000px) {
    .contribute_modal {
      max-width: 1000px;
      height: auto;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 5vh 50px;
    }

    .contribute_modal p {
      font-size: 13px;
    }

    /* .btnAll {
    display: flex;
    width: 30%;
    margin: 0 auto;
} */
  }
}