/* ===================== v30：よくある質問（?fq=f1〜f3）。生成りの地とイチゴの写真をやめ、ページの文法に ===================== */
.fq{background:#f3f4f1;--iris2:linear-gradient(100deg,#0c6b47 0%,#14936b 30%,#2a7fc4 62%,#7253c9 100%)}
.fq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(40px,6vw,96px);align-items:start}
.fq__hd{position:sticky;top:calc(var(--hd) + 32px)}
.fq__it summary{list-style:none;cursor:pointer}
.fq__it summary::-webkit-details-marker{display:none}
.fq__no{font-family:var(--f-en);font-weight:600;letter-spacing:-.02em;line-height:1;background:var(--iris2);-webkit-background-clip:text;background-clip:text;color:transparent}
.fq__q{font-weight:700;color:var(--v6-ink);line-height:1.6}
.fq__a p{font-size:15px;line-height:1.9;color:var(--v6-ink2)}

/* f1 開閉式（東京LP型）：細い線の一覧。番号＋質問、右に＋。開くと答えがなめらかに出る */
html[data-fq="f1"] .fq__list{border-top:1px solid rgba(20,30,24,.18)}
html[data-fq="f1"] .fq__it{border-bottom:1px solid rgba(20,30,24,.18)}
html[data-fq="f1"] .fq__it summary{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 24px;align-items:baseline;gap:12px;padding:24px 0}
html[data-fq="f1"] .fq__no{font-size:15px}
html[data-fq="f1"] .fq__q{font-size:17px}
html[data-fq="f1"] .fq__it summary::after{content:"";grid-column:3;width:14px;height:14px;justify-self:end;align-self:center;
  background:linear-gradient(#0c6b47,#0c6b47) 50% 50%/14px 2px no-repeat,linear-gradient(#0c6b47,#0c6b47) 50% 50%/2px 14px no-repeat;transition:transform .35s var(--ease)}
html[data-fq="f1"] .fq__it[open] summary::after{transform:rotate(45deg)}
html[data-fq="f1"] .fq__it summary:hover .fq__q{color:#0c6b47}
html[data-fq="f1"] .fq__a{padding:0 36px 26px 56px}
html[data-fq="f1"] .fq__it[open] .fq__a{animation:fqOpen .45s var(--ease)}
@keyframes fqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .fq .wrap{grid-template-columns:1fr}
  .fq__hd{position:relative;top:0;margin-bottom:24px}
  html[data-fq="f1"] .fq__it summary{grid-template-columns:32px minmax(0,1fr) 20px;padding:20px 0}
  html[data-fq="f1"] .fq__q{font-size:15.5px}
  html[data-fq="f1"] .fq__a{padding:0 0 22px 44px}
}

/* f2 開いたままのカード：見出しを上に、質問と答えを白いカード2列で全部見せる（押さなくても読める） */
html[data-fq="f2"] .fq .wrap{grid-template-columns:1fr}
html[data-fq="f2"] .fq__hd{position:relative;top:0}
html[data-fq="f2"] .fq__list{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
html[data-fq="f2"] .fq__it{background:#fff;border-radius:14px;padding:28px 30px 30px;box-shadow:0 1px 0 rgba(20,30,24,.04),0 24px 48px -38px rgba(20,30,24,.4);
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html[data-fq="f2"] .fq__it.in,html.static .fq__it{opacity:1;transform:none}
html[data-fq="f2"] .fq__it:nth-child(even){transition-delay:.1s}
html[data-fq="f2"] .fq__it summary{pointer-events:none;display:block}
html[data-fq="f2"] .fq__no{display:block;font-size:32px}
html[data-fq="f2"] .fq__q{display:block;margin-top:16px;font-size:18px}
html[data-fq="f2"] .fq__a{margin-top:12px;padding-top:14px;border-top:1px solid var(--v6-hair)}
html[data-fq="f2"] .fq__a p{font-size:14.5px}
/* 5つめは2列ぶんの幅に */
html[data-fq="f2"] .fq__it:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:900px){
  html[data-fq="f2"] .fq__list{grid-template-columns:1fr;margin-top:0}
  html[data-fq="f2"] .fq__it{padding:22px 20px}
  html[data-fq="f2"] .fq__no{font-size:26px}
  html[data-fq="f2"] .fq__q{font-size:16px}
}
/* f2 見直し1：5つめの横長カードは、左に番号と質問、右に答えの2列に（1語だけの改行をなくす） */
@media (min-width:901px){
  html[data-fq="f2"] .fq__it:last-child:nth-child(odd){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:start}
  html[data-fq="f2"] .fq__it:last-child:nth-child(odd) .fq__a{margin-top:0;padding-top:0;border-top:0;padding-left:32px;border-left:1px solid var(--v6-hair);align-self:stretch;display:flex;align-items:center}
}

/* f3 明朝の問いの一覧：白地に、問いを明朝で大きく、答えを右の列に。全部開いたまま。行の左に番号 */
html[data-fq="f3"] .fq{background:#fff}
html[data-fq="f3"] .fq .wrap{grid-template-columns:1fr}
html[data-fq="f3"] .fq__hd{position:relative;top:0}
html[data-fq="f3"] .fq__list{margin-top:40px;border-top:2px solid var(--v6-ink)}
html[data-fq="f3"] .fq__it{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,3vw,48px);padding:30px 0;border-bottom:1px solid var(--v6-hair);
  opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html[data-fq="f3"] .fq__it.in,html.static .fq__it{opacity:1;transform:none}
html[data-fq="f3"] .fq__it summary{display:contents;pointer-events:none}
html[data-fq="f3"] .fq__no{grid-column:1;font-size:28px;padding-top:2px}
html[data-fq="f3"] .fq__q{grid-column:2;font-family:"Shippori Mincho B1",serif;font-size:clamp(19px,1.6vw,23px);letter-spacing:.04em;line-height:1.55}
html[data-fq="f3"] .fq__a{grid-column:3}
@media (max-width:900px){
  html[data-fq="f3"] .fq__list{margin-top:0}
  html[data-fq="f3"] .fq__it{grid-template-columns:40px minmax(0,1fr);row-gap:10px;padding:22px 0}
  html[data-fq="f3"] .fq__no{font-size:22px}
  html[data-fq="f3"] .fq__q{font-size:18px}
  html[data-fq="f3"] .fq__a{grid-column:2}
}
/* f3 見直し1：問いは区切り（wbr）でだけ折り返す。問いの列を広く、字間を少し締める */
.fq__q{word-break:keep-all;overflow-wrap:anywhere}
html[data-fq="f3"] .fq__it{grid-template-columns:56px minmax(0,1.15fr) minmax(0,1fr)}
html[data-fq="f3"] .fq__q{letter-spacing:.02em}
@media (max-width:900px){html[data-fq="f3"] .fq__it{grid-template-columns:40px minmax(0,1fr)}html[data-fq="f3"] .fq__a{grid-column:2}} /* f3 見直し2：PC用の列幅がスマホを上書きしていた */
@media (max-width:900px){html[data-fq="f3"] .fq__no{grid-column:1;grid-row:1}html[data-fq="f3"] .fq__q{grid-column:2;grid-row:1}html[data-fq="f3"] .fq__a{grid-column:2;grid-row:2}}
/* f3 見直し3：details の答えは格子に乗らない（ブラウザが別の箱に包む）。PCもスマホも、問いを上の行、答えを下に並べ、番号は左に浮かせる */
html[data-fq="f3"] .fq__it{display:block;position:relative;padding-left:clamp(56px,5vw,72px)}
html[data-fq="f3"] .fq__no{position:absolute;left:0;top:32px}
html[data-fq="f3"] .fq__it summary{display:block}
@media (min-width:901px){
  html[data-fq="f3"] .fq__it{display:flex;align-items:flex-start;gap:clamp(24px,3vw,48px)}
  html[data-fq="f3"] .fq__it summary{flex:1.15;min-width:0}
  html[data-fq="f3"] .fq__a{flex:1;min-width:0}
}
@media (max-width:900px){
  html[data-fq="f3"] .fq__it{padding-left:40px}
  html[data-fq="f3"] .fq__no{top:24px}
  html[data-fq="f3"] .fq__a{margin-top:10px}
}
/* f3 見直し4：PCは問いの幅を固定（52%）、答えはその右に。スマホは句点の前で折らない */
@media (min-width:901px){
  html[data-fq="f3"] .fq__it{display:block;min-height:96px}
  html[data-fq="f3"] .fq__it summary{display:block;width:52%;float:left}
  html[data-fq="f3"] .fq__a{margin-left:calc(52% + clamp(24px,3vw,48px))}
  html[data-fq="f3"] .fq__it::after{content:"";display:block;clear:both}
}
html[data-fq="f3"] .fq__q{line-break:strict}
@media (max-width:900px){html[data-fq="f3"] .fq__q{font-size:17px;letter-spacing:0}}