@charset "UTF-8";

/* ============================================
   FAQ 一覧ページ
   （カテゴリタブ → アンカーリンク / 質問 → 詳細ページ）
============================================ */

/* ----- カテゴリタブ（フルブリード・5分割） ----- */
.faq-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  border-top: 1px solid #9ea0ad;
  border-left: 1px solid #9ea0ad;
}

.faq-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(60px, 4.2vw, 80px);
  padding: 0 min(2.5vw, 48px);
  border-right: 1px solid #9ea0ad;
  border-bottom: 1px solid #9ea0ad;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2.2rem, 1.15vw);
  letter-spacing: 0.2em;
  line-height: 1.3;
  color: #000;
  background-color: var(--color-white);
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.faq-tab:hover {
  background-color: #545a69;
  color: var(--color-white);
}

.faq-tab__arrow {
  position: absolute;
  top: 50%;
  right: min(2vw, 40px);
  transform: translateY(-50%);
  width: 14px;
  height: 8px;
}

.faq-tab__arrow path {
  stroke: currentColor;
}

/* ----- FAQ 本体 ----- */
.faq-body {
  padding-bottom: min(5.2vw, 100px);
}

.faq-cat {
  padding-top: min(5.2vw, 100px);
  scroll-margin-top: min(6vw, 110px);
}

.svc-head {
  text-align: center;
}
.svc-head__en {
  color: #B4B4B4;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: min(2.0rem, 1.04vw);
  letter-spacing: 0.3em;
  line-height: 1;
}
.svc-head__ja {
  color: #000;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(3.0rem, 1.56vw);
  letter-spacing: 0.2em;
  line-height: 1;
  margin-top: min(2.0vw, 40px);
}

.faq-list {
  max-width: 1610px;
  margin: min(4vw, 75px) auto 0;
  padding: 0 var(--side-padding-pc);
  display: flex;
  flex-direction: column;
  gap: min(1vw, 20px);
}

/* ----- 質問ボタン（クリックで詳細ページへ） ----- */
.faq-item__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(2vw, 40px);
  min-height: clamp(56px, 3.65vw, 70px);
  padding: min(0.8vw, 16px) min(2.5vw, 48px);
  background-color: rgba(233, 238, 242, 0.69);
  border-radius: 10px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2.2rem, 1.15vw);
  letter-spacing: 0.2em;
  line-height: 1.5;
  color: #000;
  transition: background-color 0.3s ease;
}

.faq-item__link:hover {
  background-color: rgba(233, 238, 242, 1);
}

.faq-item__icon {
  flex: none;
  width: min(3.65vw, 36px);
  height: min(3.65vw, 36px);
}

/* ============================================
   SP（375px 基準）
============================================ */
@media print, screen and (max-width: 768px) {

  /* カテゴリタブ：縦積み */
  .faq-tabs {
    grid-template-columns: 1fr;
    border-left: none;
    border-right: 1px solid #9ea0ad;
  }

  .faq-tab {
    min-height: 14.66vw;
    padding: 0 10.66vw;
    font-size: 3.73vw;
    letter-spacing: 0.15em;
  }

  .faq-tab:hover {
    background-color: var(--color-white);
    color: #000;
  }

  .faq-tab__arrow {
    right: 5.33vw;
    transform: translateY(-50%) rotate(-90deg);
  }

  .faq-body {
    padding-bottom: 16vw;
  }

  .faq-cat {
    padding-top: 16vw;
    scroll-margin-top: 16vw;
  }


  .svc-head {
    text-align: center;
  }
  .svc-head__en {
    font-size: 3.2vw;
  }
  .svc-head__ja {
    font-size: 4.2vw;
  }

  .faq-list {
    margin-top: 8vw;
    padding: 0 5.33vw;
    gap: 3.2vw;
  }

  .faq-item__link {
    min-height: 16vw;
    padding: 3.2vw 5.33vw;
    gap: 4vw;
    font-size: 3.73vw;
    letter-spacing: 0.1em;
    border-radius: 2.1vw;
  }

  .faq-item__icon {
    width: 8.53vw;
    height: 8.53vw;
  }
}