@charset "UTF-8";
/* =========================================================
   よくある質問　PC版（末尾にスマホ版）
   1rem = デザイン上の10px（1440px幅基準）。共通パーツは style.css
   ========================================================= */
:root { --beige: #f6f4ed; --line: #d9d3c7; }

/* ---------- KV（下層共通の帯） ---------- */
.fq-hero { height: 43.7rem; }
.fq-hero__img { position: absolute; left: 0; top: 7.7rem; width: 144rem; height: 36rem; overflow: hidden; }
.fq-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.fq-hero__ttl { position: absolute; left: 0; top: 23.92rem; width: 144rem; text-align: center; font-size: 3.4rem; line-height: 3.4rem; font-weight: 700; }

/* ---------- 導入文・カテゴリ ---------- */
.fq-intro { padding: 4.8rem 0 9.6rem; text-align: center; }
.fq-intro__txt { font-size: 2.4rem; line-height: 3.5rem; font-weight: 400; }
.fq-intro__txt + .fq-intro__txt { margin-top: 1.7rem; }
.fq-nav { display: flex; justify-content: center; gap: 2rem; margin-top: 6.4rem; }
/* アイコンの下にボタン（隊長作成のアイコン） */
.fq-nav__item { display: flex; flex-direction: column; align-items: center; width: 38rem; }
.fq-nav__icon { width: 13rem; height: 13rem; margin-bottom: 1.4rem; }
.fq-nav__btn {
  position: relative; display: flex; align-items: center; gap: 1.6rem; width: 100%; height: 8rem; padding: 0 6rem 0 3.2rem;
  border: .3rem solid var(--ink); border-radius: 4rem; background: var(--white); transition: background .3s, color .3s;
}
.fq-nav__item b { font-family: "Barlow", sans-serif; font-size: 3rem; line-height: 1; font-weight: 700; color: var(--teal); transition: color .3s; }
.fq-nav__item span { font-size: 2.2rem; line-height: 3rem; font-weight: 700; white-space: nowrap; }
.fq-nav__item i { position: absolute; right: 2.8rem; top: 50%; width: 1.2rem; height: 1.2rem; margin-top: -.9rem; border-right: .3rem solid currentColor; border-bottom: .3rem solid currentColor; transform: rotate(45deg); transition: transform .3s; }
.fq-nav__item:hover .fq-nav__btn { background: var(--ink); color: var(--white); }
.fq-nav__item:hover b { color: #7fe0d8; }
.fq-nav__item:hover i { transform: translateY(.4rem) rotate(45deg); }

/* ---------- Q&A ---------- */
.fq-body { padding: 10.4rem 0 14rem; background: var(--beige); clip-path: polygon(0 0, calc(50% - 3.6rem) 0, 50% 3.6rem, calc(50% + 3.6rem) 0, 100% 0, 100% 100%, 0 100%); } /* 導入実績の一覧と同じ吹き出しの形 */
/* 背景イラスト：ベージュの上・Q&Aの下。下端はベージュに溶かす（岩の切れ目を見せない） */
.fq-body { padding-bottom: 34rem; }
.fq-scene { position: absolute; left: 0; bottom: 0; width: 144rem; height: 48rem; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.fq-scene img { display: block; width: 166rem; max-width: none; height: auto; margin-left: -11rem; } /* 左右の端を切り落とす */
.fq-cat { position: relative; z-index: 1; width: 112rem; margin: 0 auto; }
.fq-cat + .fq-cat { margin-top: 10.4rem; }
.fq-cat__head { position: relative; display: flex; align-items: center; gap: 2.4rem; padding-bottom: 2.4rem; border-bottom: .3rem solid var(--ink); }
.fq-cat__icon { order: 1; flex: none; width: 9rem; height: 9rem; margin: -1rem 0 -1rem 1.6rem; } /* 右端に（英字の右隣）。上下は他の文字と同じ中心 */
.fq-cat__head b { transform: translateY(-.25rem); } /* 数字は字形が下寄りなので、見た目の中心をそろえる */
.fq-cat__head small { transform: translateY(.1rem); }
.fq-cat__head b { font-family: "Barlow", sans-serif; font-weight: 700; font-size: 8rem; line-height: 1; color: transparent; -webkit-text-stroke: .2rem #cfc3ac; }
.fq-cat__ja { font-size: 3.2rem; line-height: 4.4rem; font-weight: 700; }
.fq-cat__head small { margin-left: auto; font-family: "Barlow", sans-serif; font-size: 2rem; line-height: 2.4rem; font-weight: 700; letter-spacing: .08em; color: var(--teal); }
.fq-list { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 3.2rem; }
.fq-item { border: .3rem solid var(--ink); border-radius: 1.2rem; background: var(--white); overflow: hidden; }
.fq-item__q button {
  position: relative; display: flex; align-items: center; gap: 2rem; width: 100%; padding: 2.2rem 8rem 2.2rem 2.4rem;
  border: 0; background: none; color: var(--ink); font-family: var(--font); font-size: 2.2rem; line-height: 3.4rem; font-weight: 700; text-align: left; cursor: pointer;
}
.fq-item__q button:hover span { color: var(--teal); }
.fq-item__q span { transition: color .3s; }
.fq-mark { flex: none; display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; font-family: "Barlow", sans-serif; font-style: normal; font-size: 2.6rem; line-height: 1; font-weight: 700; color: var(--white); }
.fq-mark--q { background: var(--teal); }
.fq-mark--a { background: var(--ink); }
/* ＋ → − */
.fq-plus { position: absolute; right: 3rem; top: 50%; width: 2.4rem; height: 2.4rem; margin-top: -1.2rem; }
.fq-plus::before, .fq-plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: .3rem; margin-top: -.15rem; background: var(--ink); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.fq-plus::after { transform: rotate(90deg); }
.fq-item.is-open .fq-plus::after { transform: rotate(180deg); }
.fq-item.is-open .fq-plus::before { transform: rotate(180deg); }
/* 答え：JSが動くときだけ閉じておく（JSなしでは全部開いたまま） */
.fq-item__a { overflow: hidden; }
html.fq-js .fq-item__a.is-closed { height: 0; visibility: hidden; } /* 閉じた答えは読み上げの対象からも外す */
html:not(.fq-js) .fq-plus::before, html:not(.fq-js) .fq-plus::after { transform: rotate(180deg); } /* JSなしは全部開いているので「−」に */
.fq-item__q button:focus-visible { outline: .3rem solid var(--teal); outline-offset: -.6rem; border-radius: .8rem; }
.fq-cat__head:focus { outline: none; }
.fq-item__inner { display: flex; align-items: flex-start; gap: 2rem; margin: 0 2.4rem; padding: 2.4rem 0 3rem; border-top: .15rem dashed var(--line); }
.fq-item__inner p { padding-top: .6rem; font-size: 2rem; line-height: 3.6rem; font-weight: 400; }
.fq-item__inner a { color: var(--teal); font-weight: 500; text-decoration: underline; text-underline-offset: .3rem; transition: opacity .3s; }
@media (hover: hover) { .fq-item__inner a:hover { opacity: .6; } }

.fq-cta { height: 36.4rem; }
.fq-cta .cta { left: 47rem; top: 15rem; }

/* =========================================================
   スマホ版（767px以下・375px幅基準）　望月チームでPC版をもとに組んだレイアウト
   ========================================================= */
@media (max-width: 767px) {
  .fq-hero { height: 18rem; }
  .fq-hero__img { top: 6rem; width: 37.5rem; height: 12rem; }
  .fq-hero__img img { object-position: 18% 50%; }
  .fq-hero__ttl { top: 10.4rem; width: 37.5rem; font-size: 2.2rem; line-height: 2.2rem; }

  .fq-intro { padding: 3.6rem 2rem 5.6rem; }
  .fq-intro__txt { font-size: 1.35rem; line-height: 2.4rem; }
  .fq-intro__txt + .fq-intro__txt { margin-top: 1.4rem; }
  .fq-nav { flex-direction: column; gap: .8rem; margin-top: 3.2rem; }
  .fq-nav__item { flex-direction: row; gap: .8rem; width: 100%; }
  .fq-nav__icon { flex: none; width: 5rem; height: 5rem; margin: 0 .4rem 0 0; }
  .fq-nav__btn { flex: 1; height: 5.2rem; gap: 1.2rem; padding: 0 4.4rem 0 1.8rem; border-width: .2rem; border-radius: 2.6rem; }
  .fq-nav__item b { font-size: 2rem; }
  .fq-nav__item span { font-size: 1.5rem; line-height: 2rem; }
  .fq-nav__item i { right: 2rem; width: .8rem; height: .8rem; margin-top: -.6rem; border-width: .2rem; }

  .fq-body { padding: 5.6rem 0 6rem; clip-path: polygon(0 0, calc(50% - 2rem) 0, 50% 2rem, calc(50% + 2rem) 0, 100% 0, 100% 100%, 0 100%); }
  .fq-body { padding-bottom: 12rem; }
  .fq-scene { width: 37.5rem; height: 19.5rem; }
  .fq-scene img { width: 66rem; margin-left: -14.25rem; } /* 小さくなりすぎないよう、中央を大きめに見せる */
  .fq-cat { width: auto; margin: 0 2rem; }
  .fq-cat + .fq-cat { margin-top: 5.6rem; }
  .fq-cat__head { flex-wrap: wrap; gap: 0 1.2rem; padding-bottom: 1.2rem; border-bottom-width: .2rem; }
  .fq-cat__icon { position: absolute; right: 0; bottom: .8rem; width: 6rem; height: 6rem; margin: 0; } /* 右側に */
  .fq-cat__head small { transform: none; }
  .fq-cat__head { padding-right: 6.4rem; }
  .fq-cat__head b { font-size: 4.4rem; -webkit-text-stroke: .15rem #cfc3ac; }
  .fq-cat__ja { font-size: 1.9rem; line-height: 2.8rem; }
  .fq-cat__head small { flex-basis: 100%; order: -1; margin: 0 0 .4rem; font-size: 1.1rem; line-height: 1.6rem; }
  .fq-list { gap: 1rem; margin-top: 1.6rem; }
  .fq-item { border-width: .2rem; border-radius: .8rem; }
  .fq-item__q button { gap: 1.2rem; padding: 1.4rem 4.4rem 1.4rem 1.4rem; font-size: 1.45rem; line-height: 2.3rem; }
  .fq-mark { width: 3rem; height: 3rem; font-size: 1.6rem; }
  .fq-plus { right: 1.6rem; width: 1.6rem; height: 1.6rem; margin-top: -.8rem; }
  .fq-plus::before, .fq-plus::after { height: .2rem; margin-top: -.1rem; }
  .fq-item__inner { gap: 1.2rem; margin: 0 1.4rem; padding: 1.4rem 0 1.8rem; border-top-width: .1rem; }
  .fq-item__inner p { padding-top: .2rem; font-size: 1.35rem; line-height: 2.4rem; }

  .fq-cta { height: auto; padding: 5rem 0; }
  .fq-cta .cta { left: auto; top: auto; }
}

/* 2026-10-02 隊長：3行目の前の行間をつめる */
.fq-intro__txt + .fq-intro__txt + .fq-intro__txt { margin-top: 0; }