@charset "UTF-8";
/* hokoie css */
.grecaptcha-badge {
  display: none;
}

#main {
  overflow: hidden;
}
.en {
  font-family: var(--ffamily--en);
}
.sectitle {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  span.en {
    display: block;
    font-size: var(--fsize-16-30);
    color: var(--color-main);
    line-height: 1;
  }
  span.ja {
    font-size: var(--fsize-26-50);
    line-height: 1.5;
  }
}

.txt-wrap p em {
  color: var(--color-main);
  font-size: 1.3em;
  font-style: normal;
  font-weight: 700;
}

.num {
  line-height: 1;
  font-family: Helvetica, Arial, sans-serif;
}

span.wbr {
  display: inline-flex;
}



/*────────────────────────────────────────────────────────────────────────
**  svgロゴなど
────────────────────────────────────────────────────────────────────────*/
i.svg {
  content: '';
  display: inline-block;
  background-color: currentColor;
  transition: all 0.3s;
  vertical-align: -0.25em;
}

.icon-sns_insta {
  height: 1em;
  width: 1em;
  -webkit-mask: url(../img/icon/icon-sns_insta.svg) center/contain no-repeat;
  mask: url(../img/icon/icon-sns_insta.svg) center/contain no-repeat;
}
.icon-arrow_long_r {
  height: 1em;
  width: 1em;
  -webkit-mask: url(../img/icon/icon-arrow_long_r.svg) center/contain no-repeat;
  mask: url(../img/icon/icon-arrow_long_r.svg) center/contain no-repeat;
}

.icon-arrow_circle_b {
  height: 1em;
  width: 1em;
  -webkit-mask: url(../img/icon/icon-arrow_circle_b.svg) center/contain no-repeat;
  mask: url(../img/icon/icon-arrow_circle_b.svg) center/contain no-repeat;
}
.icon-wrap {
  display: inline-block;
  aspect-ratio: 1/1;
  line-height: 1;
}



/*────────────────────────────────────────────────────────────────────────
**  メインビジュアル
────────────────────────────────────────────────────────────────────────*/
/* =========== メインビジュアル */
#hero-sec {
  background: var(--color-bg-pale);
  position: relative;
  z-index: 1;
  .img-wrap {
    margin: 0 auto;
    width: 100%;

  }
}
/* hero-title を視覚的に非表示にするためのCSS */
.hero-title {
  /* WAI-ARIA hide/visually-hidden technique */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/*────────────────────────────────────────────────────────────────────────
**  装飾文字・背景
────────────────────────────────────────────────────────────────────────*/
.bgtxt {
  font-family: var(--ffamily--en);
  font-size: min(170px, 17vw);
  color: var(--color-bg-pale);
  position: absolute;
  pointer-events: none;
  line-height: 1;
  z-index: -1;
  display: inline-flex;
  height: 0.9em;
}


/* コンテンツ部分 */
.sec-inner {
  position: relative;
  z-index: 100;
  width: 80vw;
  max-width: var(--contents--width);
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .sec-inner {
    width: 80vw;
    padding: 10vw 0;
  }
}



/* =========== NEWS 文字 */
#news-sec {
  background: var(--color-bg-pale);
  position: relative;
  isolation: isolate;
  margin-bottom: min(40px, 6vw);
  .sec-inner {
    padding: min(70px, 5vw) 0 min(65px, 4.5vw);
    min-height: min(500px, 50vw);
    display: flex;
    align-items: center;
  }
  .bgtxt {
    right: 0;
    top: 1.9em;
    transform: rotate(90deg);
    transform-origin: bottom right;
  }
}
#news-sec::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: min(95vw, calc((100% - var(--contents--width)) / 2 + var(--contents--width) + 80px));
  height: 100%;
  background: white;
  border-radius: var(--radius-pc) 0 0 var(--radius-pc);
  z-index: 20;
}
#news-sec::after {
  position: absolute;
  content: "";
  width: 90vw;
  height: calc(100% - 200px);
  min-height: 100px;
  bottom: max(-70px, -10vw);
  left: 0;
  background: var(--color-bg);
  border-radius: 0 var(--radius-pc) var(--radius-pc) 0;
  z-index: 10;
}
@media screen and (max-width: 1500px) {
  #news-sec {
    background: var(--color-bg-pale);
    .bgtxt {
      right: 4vw;
    }
  }
}
@media screen and (max-width: 767px) {
  #news-sec::before,
  #news-sec::after {
    width: 95vw;
  }
}


/* =========== CONCEPT 文字 */
#concept-sec {
  position: relative;
  isolation: isolate;
  .sec-inner {
    padding: min(150px, 18vw) 0;
  }
  .bgtxt {
    right: -0.7em;
    /* top: max(-0.4em, -6vw); */
    top: max(-0.2em, -2vw);
  }
}
@media screen and (max-width: 1500px) {
  #concept-sec {
    .sec-inner {
      width: 90vw;
    }
    .bgtxt {
      right: -5vw;
    }
  }
}

/* =========== CHOOSE 文字 */
#choose-sec {
  position: relative;
  isolation: isolate;
  color: white;
  .sectitle .en {
    color: white;
  }
  .sec-inner {
    padding: min(70px, 10vw) 0;
  }
  .bgtxt {
    left: 0;
    top: -0.3em;
    transform: rotate(90deg);
    transform-origin: top left;
  }
  &::before {
    position: absolute;
    content: "";
    display: block;
    z-index: -1;
    background: var(--color-bg);
    height: 100%;
    width: 100%;
    border-radius: var(--radius-pc);
    top: 0;
  }
  &::after {
    position: absolute;
    content: "";
    display: block;
    z-index: -2;
    background: var(--color-bg-pale);
    height: var(--radius-pc);
    width: 100%;
    bottom: 0;
  }
}
@media screen and (max-width: 1500px) {
  #choose-sec {
    .sec-inner {
      width: 75vw;
    }
    .bgtxt {
      left: 2vw;
    }
  }
}

/* =========== FEATURES 文字 */
#features-sec {
  position: relative;
  background: var(--color-bg-pale);
  .sec-inner {
    padding: min(100px, 12vw) 0;
  }
  .bgtxt {
    color: white;
    right: -0.7em;
    top: max(-0.15em, -6vw);
  }
}
@media screen and (max-width: 1500px) {
  #features-sec {
    .sec-inner {
      width: 90vw;
    }
    .bgtxt {
      right: -5vw;
    }
  }
}

/* =========== POINT 文字 */
#point-sec {
  position: relative;
  color: white;
  .sectitle .en {
    color: white;
  }
  .bgtxt {
    right: 0;
    bottom: 0;
    transform: rotate(90deg);
    transform-origin: bottom right;
  }
  .sec-inner {
    padding: min(70px, 10vw) 0;
  }
}
#point-sec::before {
  position: absolute;
  content: "";
  width: calc(100% - 60px);
  height: calc(100% - 600px);
  top: 0;
  right: 0;
  background: var(--color-bg-pale);
  z-index: 10;
  border-radius: 0 0 var(--radius-pc) 0;
}
#point-sec::after {
  position: absolute;
  content: "";
  width: calc((100vw - var(--contents--width))/2 + var(--contents--width) + 70px);
  height: 100%;
  bottom: 0;
  left: 0;
  background: var(--color-bg);
  border-radius: 0 var(--radius-pc) var(--radius-pc) 0;
  z-index: 20;
}
@media screen and (max-width: 1500px) {
  #point-sec {
    .sec-inner {
      width: 75vw;
    }
    .bgtxt {
      right: -1vw;
      bottom: 0;
    }
  }
  #point-sec::before {
    width: 100%;
    height: calc(100% - 60vw);
  }
  #point-sec::after {
    width: 95vw;
  }
}








/* =========== PLAN 文字 */
#plan-sec {
  position: relative;
  .sec-inner {
    padding: min(70px, 10vw) 0;
  }
  .bgtxt {
    left: -0.8em;
    top: max(-0.15em, -6vw);
  }
}
@media screen and (max-width: 1500px) {
  #plan-sec {
    .bgtxt {
      left: -5vw;
    }
  }
}



/* =========== VOICE 文字 */
#voice-sec {
  position: relative;
  isolation: isolate;
  .sec-inner {
    padding: min(70px, 10vw) 0;
  }
  .bgtxt {
    right: 0;
    top: 2.2em;
    transform: rotate(90deg);
    transform-origin: bottom right;
    color: white;
  }
}
#voice-sec::before {
  position: absolute;
  content: "";
  width: calc((100vw - var(--contents--width))/2 + var(--contents--width) + 70px);
  height: 100%;
  top: 0;
  right: 0;
  background: var(--color-bg-pale);
  border-radius: var(--radius-pc) 0 0 var(--radius-pc);
  z-index: 20;
}
@media screen and (max-width: 1500px) {
  #voice-sec {
    .sec-inner {
      width: 75vw;
    }
    .bgtxt {
      right: -1vw;
    }
  }
}


/* =========== FLOW 文字 */
#flow-sec {
  position: relative;
  isolation: isolate;
  .sec-inner {
    padding: min(100px, 12vw) 0;
  }
  .bgtxt {
    right: -0.7em;
    top: max(-0.15em, -6vw);
  }
}
@media screen and (max-width: 1500px) {
  #flow-sec {
    .sec-inner {
      width: 90vw;
    }
    .bgtxt {
      right: -5vw;
    }
  }
}


/* =========== Q&A 文字 */
#faq-sec {
  position: relative;
  isolation: isolate;
  background: var(--color-bg-pale);
  .sec-inner {
    padding: min(70px, 10vw) 0;
  }
  .bgtxt {
    left: -0.8em;
    top: max(-0.15em, -6vw);
    color: white;
  }
}



/* =========== CONTACT 文字 */
#contact-sec {
  position: relative;
  isolation: isolate;
  background: var(--color-bg-pale);
  .sec-inner {
    padding: min(120px, 15vw) 0;
  }
  .bgtxt {
    right: -0.7em;
    top: max(-0.17em, -6vw);
  }
}
#contact-sec::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: min(95vw, calc((100% - var(--contents--width)) / 2 + var(--contents--width) + 80px));
  height: 100%;
  background: white;
  border-radius: var(--radius-pc) 0 0 var(--radius-pc);
  z-index: 20;
}
#contact-sec::after {
  position: absolute;
  content: "";
  width: 90vw;
  height: 100%;
  bottom: max(-70px, -10vw);
  left: 0;
  background: var(--color-bg);
  border-radius: 0 var(--radius-pc) var(--radius-pc) 0;
  z-index: 10;
}
@media screen and (max-width: 1500px) {}

@media screen and (max-width: 767px) {
  #contact-sec {
    .bgtxt {
      right: 0;
      left: 0;
    }
  }
  #contact-sec::before {
    width: 95vw;
  }
}


/* =========== INTRODUCTION マージン */
#introduction-sec {
  background: var(--color-bg-pale);
  .sec-inner {
    padding: min(150px, 20vw) 0 min(100px, 12vw);
    width: 90vw;
  }
}






/*────────────────────────────────────────────────────────────────────────
**  動き
────────────────────────────────────────────────────────────────────────*/

/* --- ページ全体の白フェード --- */
body {
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
body.page-loaded {
  opacity: 1;
}

/* --- .animation 要素のふわっと --- */
.animation {
  opacity: 0;
  transition:
    opacity 2s ease-out,
    transform 2s ease-out;
}
/* section .animation {
  transform: translateX(-100px);
} */
section:nth-of-type(odd) .animation {
  transform: translateX(-100px);
}
section:nth-of-type(even) .animation {
  transform: translateX(100px);
}
.animation.is-visible {
  opacity: 1 !important;
  transform: none !important;
}
@media screen and (max-width: 767px) {
  .animation {
    transition:
      opacity 1s ease-out,
      transform 1s ease-out;
  }
}





/*────────────────────────────────────────────────────────────────────────
**  各コンテンツ
────────────────────────────────────────────────────────────────────────*/


/* =========== NEWS */
#news-sec .news-wrapper {
  flex: 1;
}
#news-sec .news-list {
  border-top: 1px solid var(--color-MonoD9);
  .item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-MonoD9);
    display: grid;
    grid-template-columns: 1fr 30px;
    align-items: end;
    gap: min(2rem, 3vw);
  }
  .title {
    font-size: var(--fsize-16-22);
    display: flex;
    gap: 0.2em 1rem;
    /* flex-wrap: wrap; */
    align-items: start;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    .date {
      font-family: var(--ffamily--en-sub);
      font-weight: 400;
    }
    .txt {
      margin-top: 0.5rem;
    }
  }
}
.news-list .txt {
  max-height: 1.5em;
  overflow: hidden;
  transition: max-height 1s ease;
}
.news-list .txt.open {
  max-height: 1000px;
}
.news-list .toggle-btn {
  display: flex;
  justify-content: center;
  height: 100%;
  cursor: pointer;
  align-items: center;
  line-height: 1;

  inline-size: 30px;
  block-size: 30px;
  background: url(../img/icon/icon-arrow_circle_b.svg);
  background-size: contain;
  transition: transform 0.1s ease-in;
  transform-origin: center center;
}
.news-list .toggle-btn.open,
.news-list .item.is-open .toggle-btn {
  transform: rotate(180deg);
}

/* 行全体をクリック可能に（短文アイテムは通常のカーソルに戻す） */
#news-sec .news-list .item {
  cursor: pointer;
}
#news-sec .news-list .item.no-toggle {
  cursor: default;
}



/* =========== CONCEPT */
#concept-sec .sec-inner {
  display: flex;
  align-items: center;
  gap: 60px;
}
/* 左端まで“はみ出す”画像ラッパー */
#concept-sec .img-wrap {
  margin-left: calc(-50vw + 50%);
  width: calc(50vw - 60px);

  border-radius: 0 var(--radius-pc) var(--radius-pc) 0;
  overflow: hidden;
  flex: 0 0 auto;
}

#concept-sec .img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
#concept-sec .txt-wrapper {
  flex: 1 1 0;
  min-width: 280px;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  .leadtxt {
    font-size: var(--fsize-20-30);
    margin: 0.5rem 0 0;
  }
}

@media screen and (max-width: 1000px) {
  #concept-sec .sec-inner {
    flex-direction: column;
    gap: 1.5rem;
  }
  #concept-sec .img-wrap {
    width: 95vw;
    margin-left: -5vw;
  }
  #concept-sec {
    .txt-wrapper {
      display: contents;
    }
    .title-wrap {
      order: 1;
      width: 100%;
    }
    .img-wrap {
      order: 2;
    }
    .txt-wrap {
      order: 3;
    }
  }
}






/* =========== CHOOSE */
#choose-sec {
  .choose-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem 1%;
    justify-content: center;
    margin: 0 auto;
    .img-wrap {
      width: 85%;
      margin: 0 auto;
    }
    .txt-wrap {
      margin-top: 1.5rem;
    }
    .txt-wrap p {
      text-align: center;
    }
    .txt-wrap p em {
      color: white;
      font-feature-settings: "palt"
    }
  }
}
@media screen and (min-width: 768px) {
  #choose-sec {
    .choose-list {
      .item {
        width: 31%;
        min-width: 280px;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  #choose-sec {
    .choose-list {
      flex-direction: column;
      .img-wrap img {
        aspect-ratio: 280/180;
      }
    }
  }
}




/* =========== FEATURES */
#features-sec {
  .features-list {
    display: flex;
    flex-direction: column;
    gap: min(150px, 12vw);
    .item {
      display: flex;
      align-items: end;
    }
    .item .txt-wrap {
      position: relative;
      .num {
        font-size: clamp(60px, calc(33.333px + 4.444vw), 100px);
        color: var(--color-bg-pale);
      }
      .title {
        font-size: var(--fsize-18-30);
        margin: 0.2em 0 0.5em;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  #features-sec {
    .features-list {
      margin: 100px auto 50px;
      .item {
        .txt-wrap {
          flex: 6;
          padding: 0 min(50px, 3vw);
        }
        .img-wrap {
          flex: 5;
        }
      }
      .item .txt-wrap::after {
        position: absolute;
        content: "";
        display: block;
        height: calc(100% + min(100px, 8vw));
        width: calc(100% + 180px);
        background: white;
        border-radius: var(--radius-pc);
        z-index: -1;
        top: max(-50px, -4vw);
      }
      .item:nth-child(odd) {
        flex-direction: row-reverse;
        .txt-wrap::after {
          right: 0;
        }
      }
      .item:nth-child(even) {
        flex-direction: row;
        .txt-wrap::after {
          left: 0;
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  #features-sec {
    .features-list {
      margin: 2rem auto 0;
      gap: 2rem;
    }
    .features-list .item {
      flex-direction: column;
      gap: 1rem;
      background: white;
      padding: 5vw;
    }
  }
}




/* =========== POINT */
#point-sec {
  .point-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem 1%;
    justify-content: center;
    margin: 0 auto;
    .img-wrap {
      width: 85%;
      margin: 0 auto;
    }
  }
  .item {
    text-align: center;
    position: relative;
    margin-top: 45px;
    .num {
      font-size: clamp(45px, calc(15px + 5vw), 90px);
      position: absolute;
      top: -0.6em;
      left: 0;
      right: 0;
    }
    .txt-wrap {
      margin-top: 1rem;
    }
    .txt-wrap em {
      font-size: var(--fsize-18-30);
      font-style: normal;
      font-feature-settings: "palt"
    }
  }
}
@media screen and (min-width: 768px) {
  #point-sec {
    .point-list {
      .item {
        width: 31%;
        min-width: 280px;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  #point-sec {
    .point-list {
      flex-direction: column;
      .img-wrap img {
        aspect-ratio: 280/200;
      }
    }
  }
}




/* =========== PLAN */
#plan-sec {
  .plan-list {
    display: flex;
    flex-wrap: wrap;
    gap: min(3vw, 4%);
    justify-content: center;
    margin: 0 auto;
    .item {
      background: var(--color-bg-pale);
      padding-bottom: 2rem;
      display: flex;
      flex-direction: column;
      .txt-wrap {
        padding: 0 2rem;
        margin: 1.5rem 0;
      }
      .title {
        background: var(--color-txt);
        color: white;
        text-align: center;
        padding: 0.5em;
      }
      .plan {
        font-size: var(--fsize-16-30);
        display: flex;
        flex-wrap: wrap;
        gap: 0 1rem;
        line-height: 1.1;
      }
      .plan em {
        font-size: 1.5em;
        font-style: normal;
      }
      .plan i {
        font-size: 0.66em;
        font-style: normal;
      }
      .img-wrap {
        padding: 0 2rem;
        margin-top: auto;
      }
    }
  }
  .note {
    text-align: center;
    margin-top: 3rem;
  }
}
@media screen and (min-width: 768px) {
  #plan-sec {
    .plan-list {
      .item:nth-child(4n) .title,
      .item:nth-child(4n + 1) .title {
        background: var(--color-main);
      }
      .item {
        width: 48%;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  #plan-sec {
    .plan-list {
      flex-direction: column;

      .item:nth-child(odd) .title {
        background: var(--color-main);
      }
    }
  }
}




/* =========== VOICE */
#voice-sec {
  .voice-list {
    display: flex;
    flex-direction: column;
    gap: min(60px, 5vw);
  }
  .voice-list .item {
    display: flex;
    gap: 1rem min(60px, 3vw);
    .txt-wrap {
      flex: 4;
    }
    .img-wrap {
      flex: 5.5;
    }
    .num {
      font-size: var(--fsize-20-30);
    }
    .title {
      display: inline;
      padding: 0.1em 0.5em 0.2em 0.5em;
      background: linear-gradient(transparent 0%, var(--color-txt) 0%);
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      color: white;
      line-height: 1.5;
      font-size: var(--fsize-18-30);
    }
    .numtxt .num {
      margin-left: 0.2rem;
    }
    .txt {
      margin-top: 1rem;
    }
  }
}
@media screen and (min-width: 768px) {
  #voice-sec {
    .voice-list .item:nth-child(even) {
      flex-direction: row-reverse;
    }
  }
}
@media screen and (max-width: 767px) {
  #voice-sec {
    .voice-list .item {
      flex-direction: column;
    }
  }
}





/* =========== FLOW */
#flow-sec {
  .flow-list {
    display: flex;
    flex-wrap: wrap;
    gap: 70px 5%;
    margin: 0 auto;
    .item {
      background: var(--color-bg-pale);
      padding: 0 1.5rem 1.5rem;
      text-align: center;
      position: relative;
    }
    .item::after {
      content: "";
      position: absolute;
      border-style: solid;
      display: block;
    }
    .num {
      font-size: var(--fsize-20-30);
      background: var(--color-txt);
      color: white;
      display: inline-flex;
      width: min(66px, 12vw);
      height: min(66px, 12vw);
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-top: -1.5em;
    }
    .img-wrap {
      width: min(130px, 50%);
      height: auto;
      aspect-ratio: 1/1;
      margin: 0.2rem auto;
    }
    .title {
      font-size: var(--fsize-18-30);
      font-weight: 700;
      margin-bottom: 0.5rem;
    }
  }
}
@media screen and (min-width: 768px) {
  #flow-sec {
    .flow-list {
      .item {
        width: 30%;
      }
      .item:nth-child(1) {
        order: 1;
        &::after {
          top: 50%;
          right: -30px;
          margin-top: -20px;
          border-width: 20px 0 20px 30px;
          border-color: transparent transparent transparent var(--color-bg-pale);
        }
      }
      .item:nth-child(2) {
        order: 2;
        &::after {
          top: 50%;
          right: -30px;
          margin-top: -20px;
          border-width: 20px 0 20px 30px;
          border-color: transparent transparent transparent var(--color-bg-pale);
        }
      }
      .item:nth-child(3) {
        order: 3;
        &::after {
          left: 50%;
          bottom: -30px;
          margin-left: -20px;
          border-width: 30px 20px 0 20px;
          border-color: var(--color-bg-pale) transparent transparent transparent;
        }
      }
      .item:nth-child(4) {
        order: 6;
        &::after {
          top: 50%;
          left: -30px;
          margin-top: -20px;
          border-width: 20px 30px 20px 0;
          border-color: transparent var(--color-bg-pale) transparent transparent;
        }
      }
      .item:nth-child(5) {
        order: 5;
        &::after {
          top: 50%;
          left: -30px;
          margin-top: -20px;
          border-width: 20px 30px 20px 0;
          border-color: transparent var(--color-bg-pale) transparent transparent;
        }
      }
      .item:nth-child(6) {
        order: 4;
        &::after {
          content: none;
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  #flow-sec {
    .flow-list {
      width: 80vw;
      flex-direction: column;
      .item::after {
        left: 50%;
        bottom: -30px;
        margin-left: -20px;
        border-width: 30px 20px 0 20px;
        border-color: var(--color-bg-pale) transparent transparent transparent;
      }
      .item:last-child::after {
        border: none;
      }
    }
  }
}





/* =========== QA */
#faq-sec {
  background: var(--color-bg-pale);
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    line-height: 1.6;
  }
  .faq-list dl.item {
    background: white;
  }
  .faq-list dl.item dt.faq-q {
    padding: 2.2rem 2.5rem 1.8rem 2.5rem;
  }
  .faq-list dl.item dd.faq-a {
    margin: 0 2.5rem;
  }
  .faq-list dl.item.is-open dd.faq-a {
    max-height: max-content;
    opacity: 1;
    border-top: 1px solid var(--color-MonoA3);
    padding: 2rem 0;
  }

  /* タイトル */
  .faq-list dl.item dt.faq-q::before,
  .faq-list dl.item dd.faq-a::before {
    font-family: var(--ffamily--en-sub);
    font-size: min(40px, 7.5vw);
    line-height: 1;
    text-align: center;
  }
  .faq-list dl.item dt.faq-q::before {
    content: "Q";
  }
  .faq-list dl.item dd.faq-a::before {
    content: "A";
  }

  /* Question */
  .faq-list dl.item dt.faq-q {
    cursor: pointer;
    display: grid;
    gap: 1rem;
    grid-template-columns: 40px auto 35px;
    font-size: 1.5em;
  }
  /* Answer */
  .faq-list dl.item dd.faq-a {
    display: grid;
    gap: 1rem;
    grid-template-columns: 40px auto;
    max-height: 0;
    overflow: hidden;
    transition: .6s;
    opacity: 0;
  }
  /* トグル */
  /* .faq-list .item .faq-q i.trigger {
    content: "";
    inline-size: min(30px, 5vw);
    block-size: min(30px, 5vw);
    background: url(../img/icon/icon-arrow_circle_b.svg) no-repeat;
    background-size: contain;
    transition: transform 0.1s ease-in;
    transform-origin: center center;
    align-self: center;

  } */
  .faq-list .item .faq-q .icon-wrap {
    inline-size: min(30px, 5vw);
    block-size: min(30px, 5vw);
    border-radius: 50%;
    align-self: center;
    justify-self: center;
    transition: all 0.1s ease-in;
    transform-origin: center center;

    i.svg.icon-arrow_circle_b {
      width: 100%;
      height: 100%;
    }
  }
  .faq-list .item .faq-q:hover {
    .icon-wrap {
      background: var(--color-txt);
      i.svg {
        background: white;
      }
    }
  }
  .faq-list .item.is-open .faq-q .icon-wrap {
    transform: rotate(180deg);
  }
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
  #faq-sec {
    .faq-list dl.item dt.faq-q {
      padding: 1rem;
      font-size: 1.2em;
    }
    .faq-list dl.item dd.faq-a {
      margin: 0 1rem;
    }
    .faq-list dl.item.is-open dd.faq-a {
      padding: 1rem 0;
    }
  }
}






/* =========== CONTACT */
#contact-sec {
  .sec-inner {
    display: flex;
    gap: 2rem;
    align-items: end;
  }
  .leadtxt {
    font-size: min(1.875rem, 4vw);
    line-height: 1.6;
  }
  .title-wrap {
    flex: 1;
  }
  .btn-wrapper {
    flex: 1;
    max-width: 530px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
  }
  .btn {
    color: white;
    font-size: min(40px, 3vw);
    padding: 0.5em 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    filter: drop-shadow(4px 4px 15px rgba(0, 0, 0, 0.25));
    transition: all 0.2s ease;
    height: min(110px, 12vw);
    border-radius: min(55px, 6vw);
  }
  .btn:hover {
    filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.2));

    i.svg {
      transform: translateX(0.25em);
    }
  }
  .btn.type1 {
    background: var(--color-txt);
    border: 3px solid var(--color-txt);
  }
  .btn.type1:hover {
    color: var(--color-txt);
    background: white;
  }
  .btn.type2 {
    background: var(--color-bg);
    border: 3px solid var(--color-bg);
  }
  .btn.type2:hover {
    color: var(--color-bg);
    background: white;
  }
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
  #contact-sec {
    .title-wrap {
      text-align: center;
    }
    .sec-inner {
      flex-direction: column;
      align-items: center;
    }
    .btn {
      font-size: 6vw;
      height: 16vw;
      border-radius: 8vw;
    }
  }

}












/* =========== INTRODUCTION */
#introduction-sec {
  .leadtxt {
    font-size: min(20px, 4vw);
    margin: 1rem 0;
  }
  .txt-wrapper {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;

    .data {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      min-width: 14em;
    }
    .data dl {
      background: white;
      padding: 0.2em 1em;
      display: flex;
      gap: 2em;
    }
    .txt {
      line-height: 1.6;
    }
  }

}
@media screen and (max-width: 767px) {
  #introduction-sec {
    .txt-wrapper {
      flex-direction: column;
      .txt br {
        display: none;
      }
    }
  }
}


/* =========== footer */
#footer {
  background: var(--color-bg);
  color: white;
  font-size: min(4vw, 1.25rem);
  line-height: 1.3;
}
#footer .sec-inner {
  width: 90vw;
  padding: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  .title {
    font-size: 2em;
  }
  .txt-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2em;
  }
  .insta {
    font-size: 2em;
    color: white;
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) {
  #footer .sec-inner {
    .txt-wrapper {
      display: contents;
    }
  }
}
@media screen and (max-width: 1500px) {
  #footer .sec-inner {
    max-width: 800px;
  }
}
@media screen and (max-width: 767px) {
  #footer .sec-inner {
    flex-direction: column;
    width: 90vw;
    max-width: 400px;
    .txt-wrapper {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: end;
    }
    .txt-wrap {
      flex-direction: column;
    }
  }
}