/* ============================================================
   10-parade.css
   工場から工場へ、メティがとことこ流れる帯
   読み込み順は index.html の <link> の並びが正。順番を変えると見た目が変わる。
   ============================================================ */
/* セクションの横幅いっぱいに抜ける帯。#stamp が overflow:hidden なので 100vw があふれても切られる */
.parade{
  --ph:clamp(60px,8.2vw,104px);            /* メティの背丈 ＝ 歩く帯の高さ */
  --tile:calc(var(--ph) * 10.4906);        /* SVG 1枚分の幅（7719.93 ÷ 735.9） */
  --gap:calc(var(--ph) * 0.2255);          /* 継ぎ目のすきま。絵の中の平均間隔 165.9 ÷ 735.9 */
  position:relative;width:100vw;margin:40px 0 0 calc(50% - 50vw);
  height:clamp(136px,17vw,214px);overflow:hidden;
  background:var(--yellow-soft);
  border-top:5px solid var(--navy);border-bottom:5px solid var(--navy);
}
.parade-belt{
  position:absolute;left:0;bottom:0;height:var(--ph);z-index:1;
  display:flex;align-items:flex-end;width:max-content;
  animation:tokotoko 30s linear infinite;
}
/* 絵の実体（<symbol>）。表示はせず、<use> の参照元として置いてあるだけ */
.parade-src{position:absolute;width:0;height:0;overflow:hidden}
.parade-belt>svg{flex:none;display:block;width:var(--tile);height:var(--ph);margin-right:var(--gap)}
/* 「1枚＋すきま」ぴったり動かして戻すので、継ぎ目が出ない。−方向 ＝ 右から左へ進む */
@keyframes tokotoko{to{transform:translateX(calc((var(--tile) + var(--gap)) * -1))}}
.parade .factory{position:absolute;bottom:0;z-index:2;width:clamp(112px,17vw,220px);line-height:0}
.parade .factory svg{width:100%;height:auto;display:block}
.parade .factory-l{left:0}
.parade .factory-r{right:0;transform:scaleX(-1)}

.qa{margin-top:34px;display:grid;gap:12px}
.qa details{
  background:var(--white);border-radius:14px;padding:16px 20px;box-shadow:0 8px 18px rgba(22,38,92,.12);
  transition:box-shadow .25s ease;
}
.qa details[open]{box-shadow:0 14px 28px rgba(22,38,92,.18)}
.qa summary{
  cursor:pointer;list-style:none;display:flex;gap:12px;align-items:flex-start;
  font-weight:900;color:var(--navy);font-size:.96rem;font-family:var(--font-round);letter-spacing:.03em;
  position:relative;padding-right:40px;
}
/* 右端の＋。開くと45度回って × になる */
.qa summary::after{
  content:'';position:absolute;right:0;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  background:
    linear-gradient(var(--navy),var(--navy)) center/10px 2px no-repeat,
    linear-gradient(var(--navy),var(--navy)) center/2px 10px no-repeat,
    var(--yellow-soft);
  transition:transform .3s ease,background-color .3s ease;
}
.qa details[open]>summary::after{transform:rotate(45deg)}
.qa summary:hover::after{background-color:var(--yellow)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:'Q';font-family:var(--font-mono);color:var(--red);flex:none;font-size:1rem}
.qa details p{margin:12px 0 0 26px;font-size:.88rem;color:var(--ink-soft);border-top:1px dashed var(--line-strong);padding-top:12px;position:relative}
/* Q と対になる A の印 */
.qa details p::before{
  content:'A';position:absolute;left:-26px;top:12px;
  font-family:var(--font-mono);font-weight:700;color:var(--navy);font-size:1rem;line-height:inherit;
}
/* 対応ブラウザ（Chrome 131〜）では、開閉を高さのアニメーションでなめらかに */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  .qa details{interpolate-size:allow-keywords}
  .qa details::details-content{
    height:0;overflow:clip;
    transition:height .32s ease,content-visibility .32s allow-discrete;
  }
  .qa details[open]::details-content{height:auto}
}