@charset "utf-8";

.SpcOnly {
  display: block;
}

.PcOnly {
  display: none;
}

.modTxtType01 {
  font-family: "游明朝体", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif !important;
}

.flex-wrap {
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
}

.DistantTxt {
  font-family: "游明朝体", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif !important;
}

.DistantHero {
  background: #F6F5E7;
  padding: 30px 0;

  .DistantHero-Title {
    border: 1px solid #ACACAC;
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 45px 0;

    h2 {
      font-size: 3.6vw;
      letter-spacing: .05em;
    }
  }
}

.DistantBox {
  padding: 70px 0 50px;

  .DistantBox01 {
    .DistantBox01Text {
      text-align: center;
      font-size: 3.0vw;
    }

    picture {
      display: block;
      width: 70%;
      margin: 30px auto;
    }
  }
}


.DistantVoice {
  .DistantVoiceTitle {
    background: #E7E5D9;
    padding: 30px 0;
    text-align: center;

    h2 {
      font-size: 4vw;

      span {
        display: block;
        font-size: 3vw;
        margin: 15px auto 0;
      }
    }
  }
}

.onlineBnr {
  .online_bnr {
    width: 90%;
    display: block;
    margin: 50px auto 0%;
    max-width: 500px;
  }
}



/* ------- レイアウト用（お好みで調整） ------- */
.voice-card {
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
  padding: 60px 0 0;
}

.voice-card__img {
  width: 30%;

  img {}
}

.voice-card__body {
  width: 65%;

  .voice-card__area {
    font-size: 2.8vw;
    border-bottom: 1px solid #000;
    margin: 0 0 2%;
  }

  .voice-card__excerpt {
    font-size: 2.8vw;
    margin-top: 12px;
  }
}


/* ------- 抜粋・全文の切り替え ------- */
.voice-card__toggle:checked~.voice-card__body .voice-card__excerpt {
  display: none;
  /* チェックONで抜粋を隠す */
}

.voice-card__toggle:not(:checked)~.voice-card__body .voice-card__full {
  display: none;
  /* 初期状態で全文を隠す */
}

/* ------- “続きを読む / 閉じる” 見た目 ------- */
.voice-card__readmore {
  /* 好きな色に */
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}

.voice-card__toggle:checked~.voice-card__body .voice-card__readmore::after {
  content: " 閉じる";
}

.voice-card__toggle:not(:checked)~.voice-card__body .voice-card__readmore::after {
  content: "";
}

/* 全文に枠を付けたい場合（画像の右側の箱イメージ） */
.voice-card__full {
  margin-top: 12px;
}


.DistantConsider {
  background-color: #F6F5E7;
  padding: 30px 0;
  margin: 30px 0;

  .DistantConsider_inner {
    width: 88%;

    h3 {
      font-size: 3vw;
      border-bottom: 1px solid #000;
      padding: 0 0 5px;
      margin: 0 0 40px;
      font-weight: 600;
    }

    .txt1 {
      margin: 0 auto 35px;
      font-size: 2.8vw;
    }

    .txt2 {
      margin: 0 auto 20px;
      line-height: 2.5;
      font-size: 2.8vw;
    }

    a {
      display: block;
      text-align: center;
      margin: 0 auto 40px;
      width: 80%;
      background: #F6F6F6;
      font-size: 2.8vw;
      padding: 10px 0;
      filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    }

    .txt3 {
      font-size: 2.8vw;
    }
  }
}

.DistantFaq {
  .DistantFaq_inner {
    h3 {
      font-size: 3.0vw;
      border-bottom: 1px solid #000;
      padding: 0 0 5px;
      margin: 0 0 0px;
      font-weight: 600;
      text-align: center;

      span {
        display: block;
        font-size: 2.8vw;
        margin: 0 auto 5px;
        display: block;
      }
    }

    .qa-6 {
      padding: 20px 0;
      border-bottom: 1px solid;

      summary {
        text-align: center;
        font-size: 2.8vw;
        font-weight: 600;
        list-style: none;
        cursor: pointer;

        span {
          &:before {
            content: "Q";
            padding: 0 10px 0 0;
          }

          &:after {
            content: "";
            background: url(../img/arrow.svg) no-repeat;
            display: inline-block;
            width: 10px;
            height: 15px;
            background-size: contain;
            padding: 0px 0 0 10px;
            margin: 0px 0 0 13px;
            position: relative;
            top: 3px;
          }
        }
      }

      p {
        width: 80%;
        margin: 25px auto 10px;
        position: relative;
        padding: 0 0 0 25px;

        &:before {
          content: "A";
          padding: 0 10px 0 0;
          position: absolute;
          top: 0;
          left: 0;
        }

        .span1 {
          width: 24%;
          margin: 0 0 20px;
        }

        .span2 {
          width: 70%;
          margin: 0 0 20px;
        }
      }
    }
  }
}

.DistantOrder {
  background-color: #F6F5E7;
  padding: 30px 0;
  margin: 30px 0;

  .DistantOrder_inner {
    h3 {
      font-size: 3.0vw;
      border-bottom: 1px solid #000;
      padding: 0 0 5px;
      margin: 0 0 40px;
      font-weight: 600;
    }

    .txt1 {
      font-size: 2.8vw;
      margin: 0 auto 35px;
      width: fit-content;
    }

    .txt2 {
      font-size: 2.8vw;
      margin: 0 auto 35px;
      width: fit-content;
    }

    a {
      width: fit-content;
      display: block;
      margin: auto;
    }

    .bnr {
      width: 70%;
      display: block;
      margin: auto;
    }

    h4 {
      position: relative;
      font-size: 3.4vw;
      font-weight: 600;
      margin: 50px auto 20px;
      width: 90%;

      &:after {
        content: "";
        border-bottom: 1px solid #000;
        width: 50%;
        display: block;
        position: absolute;
        right: 0;
        bottom: 9px;
      }
    }

    ul {
      margin: auto;

      li {
        margin: 0 auto 30px;
      }
    }

    .txt3 {
      font-size: 2.8vw;
      width: fit-content;
      margin: auto;
    }

    .line_bnr {
      width: fit-content;
      margin: 15px auto 0;
      display: block;
      width: 150px;
    }

    .txt4 {
      font-size: 2.8vw;
      width: fit-content;
      margin: auto;
    }

    .txt5 {
      font-size: 2.8vw;
      width: fit-content;
      margin: auto;

      .in3 {
        width: fit-content;
        margin: auto;
        display: block;
      }
    }

    .txt6 {
      font-size: 2.8vw;
      width: fit-content;
      margin: auto;
    }

    .txt7 {
      font-size: 2.8vw;
      width: fit-content;
      margin: auto;

      .in5 {
        display: inline-block;
        padding: 0 0 0 5.5%;
      }
    }

    .txt8 {
      font-size: 2.8vw;
      width: fit-content;
      margin: auto;
    }
  }
}

@media (width >=767px) {
  .SpcOnly {
    display: none;
  }

  .PcOnly {
    display: block;
  }

  .DistantHero {
    padding: 80px 0;

    .DistantHero-Title {
      width: 600px;
      padding: 45px 0;

      h2 {
        font-size: 20px;
      }
    }
  }

  .DistantBox {
    .DistantBox01 {
      .DistantBox01Text {
        font-size: 14px;
      }

      picture {
        display: block;
        width: 70%;
        margin: 30px auto;
      }
    }
  }


  .DistantVoice {
    .DistantVoiceTitle {
      background: #E7E5D9;
      padding: 30px 0;
      text-align: center;

      h2 {
        font-size: 20px;

        span {
          display: block;
          font-size: 14px;
        }
      }
    }
  }


  /* ------- レイアウト用（お好みで調整） ------- */
  .voice-card {
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    padding: 60px 0 0;
  }

  .voice-card__img {
    width: 30%;

    img {}
  }

  .voice-card__body {
    width: 65%;

    .voice-card__area {
      font-size: 14px;
    }

    .voice-card__excerpt {
      font-size: 14px;
    }
  }


  /* ------- 抜粋・全文の切り替え ------- */
  .voice-card__toggle:checked~.voice-card__body .voice-card__excerpt {
    display: none;
    /* チェックONで抜粋を隠す */
  }

  .voice-card__toggle:not(:checked)~.voice-card__body .voice-card__full {
    display: none;
    /* 初期状態で全文を隠す */
  }

  /* ------- “続きを読む / 閉じる” 見た目 ------- */
  .voice-card__readmore {
    /* 好きな色に */
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
  }

  .voice-card__toggle:checked~.voice-card__body .voice-card__readmore::after {
    content: " 閉じる";
  }

  .voice-card__toggle:not(:checked)~.voice-card__body .voice-card__readmore::after {
    content: "";
  }

  /* 全文に枠を付けたい場合（画像の右側の箱イメージ） */
  .voice-card__full {
    font-size: 14px;
  }


  .DistantConsider {
    background-color: #F6F5E7;
    padding: 60px 0;
    margin: 60px 0 30px 0;

    .DistantConsider_inner {
      h3 {
        font-size: 16px;
        width: 600px;
        margin: 0 auto 50px;
      }

      .txt1 {
        margin: 0 auto 35px;
        font-size: 14px;
        width: fit-content;
      }

      .txt2 {
        margin: 0 auto 20px;
        line-height: 2.5;
        font-size: 14px;
        width: fit-content;
      }

      a {
        width: 300px;
        font-size: 14px;
      }

      .txt3 {
        font-size: 14px;
        width: fit-content;
        margin: auto;
      }
    }
  }

  .DistantFaq {
    padding: 60px 0;

    .DistantFaq_inner {
      h3 {
        font-size: 15px;

        span {
          font-size: 14px;
        }
      }

      .qa-6 {
        summary {
          font-size: 14px;

          span {
            &:before {}

            &:after {}
          }
        }

        p {
          font-size: 14px;

          &:before {}

          .span1 {}

          .span2 {}
        }
      }
    }
  }

  .DistantOrder {
    padding: 60px 0;
    margin: 50px auto;

    .DistantOrder_inner {
      h3 {
        font-size: 15px;
        width: 600px;
        margin: 0 auto 50px;
      }

      .txt1 {
        font-size: 14px;
        margin: 0 auto 35px;
        width: fit-content;
      }

      .txt2 {
        font-size: 14px;
        margin: 0 auto 35px;
        width: fit-content;
      }

      .bnr {
        width: 400px;
      }

      h4 {
        font-size: 15px;
        width: 460px;

        &:after {
          content: "";
          border-bottom: 1px solid #000;
          width: 50%;
          display: block;
          position: absolute;
          right: 0;
          bottom: 9px;
        }
      }

      ul {
        margin: auto;

        li {
          margin: 0 auto 30px;
        }
      }

      .txt3 {
        font-size: 14px;
        width: fit-content;
        margin: auto;
      }

      .line_bnr {
        width: 190px;
        margin: 15px auto 0;
        display: block;
      }

      .txt4 {
        font-size: 14px;
        width: fit-content;
        margin: auto;
      }

      .txt5 {
        font-size: 14px;
        width: 470px;
        margin: auto;

        .in3 {
          width: fit-content;
          margin: auto;
          display: block;
        }
      }

      .txt6 {
        font-size: 14px;
        width: fit-content;
        margin: auto;
      }

      .txt7 {
        font-size: 14px;
        width: fit-content;
        margin: auto;

        .in5 {
          display: inline-block;
          padding: 0 0 0 5.5%;
        }
      }

      .txt8 {
        font-size: 14px;
        width: fit-content;
        margin: auto;
      }
    }
  }
}