/* 2026-09-29 v7: 周平さんの助言（声は横に流す ふわっと出す 写真はドーンと）
   JSが動かない時と 動きを減らす設定の時は 全部が最初から見える */

/* ---------- ふわっと出る（JSが動いた時だけ隠す） ---------- */
html.js-motion [data-fade]{opacity:0;transform:translateY(24px);}
html.js-motion [data-zoom] img{transform:scale(1.06);opacity:.001;}

/* ---------- 横に流れる帯 ---------- */
.strip-title{font-size:var(--fs-h3);margin:0 0 var(--sp-3);}
.flow-strip{position:relative;overflow:hidden;max-width:100%;}
.flow-track{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
}
.flow-card{
  background:var(--surface);
  border:1px solid var(--ink);
  padding:var(--sp-2) var(--sp-3);
}
.sec--surface .flow-card{background:var(--paper);}
.flow-card--chip{font-size:var(--fs-body);line-height:1.6;}
.flow-card--voice{max-width:40em;padding:var(--sp-4);}
.flow-card--voice .note{margin-top:var(--sp-3);}

/* 流れている時（JSが3件以上を確かめてから付ける） */
.flow-strip.is-flowing{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.flow-strip.is-flowing .flow-track{
  flex-wrap:nowrap;width:max-content;
  animation:flow-left var(--flow-sec,60s) linear infinite;
}
.flow-strip.is-flowing .flow-card{flex:0 0 auto;white-space:nowrap;}
.flow-strip.is-flowing .flow-card--voice{white-space:normal;width:min(80vw,34em);}
.flow-strip.is-flowing:hover .flow-track,
.flow-strip.is-flowing:focus-within .flow-track,
.flow-strip.is-paused .flow-track{animation-play-state:paused;}
@keyframes flow-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.flow-toggle{
  margin-top:var(--sp-2);
  font:inherit;font-family:var(--font-gothic);font-size:var(--fs-small);
  min-height:44px;padding:0 var(--sp-3);
  background:transparent;color:var(--ink);border:1px solid var(--ink);cursor:pointer;
}
.flow-toggle:hover,.flow-toggle:focus-visible{background:var(--accent);}

/* ---------- 感想のお願い ---------- */
.ask-voice{
  margin-top:var(--sp-5);
  max-width:40em;
  border-top:1px solid var(--ink);
  padding-top:var(--sp-3);
}
.ask-voice h3{margin:0 0 var(--sp-2);font-size:var(--fs-h3);}
.ask-voice .btn{margin-top:var(--sp-3);}

/* ---------- 写真はドーンと ---------- */
.big-photo{overflow:hidden;}
.big-photo img{display:block;width:100%;height:auto;}
#taisetsu .photo-text--big .big-photo img{width:100%;height:560px;object-fit:cover;object-position:50% 30%;}
@media (min-width:1024px){
  .hero-photo{width:min(100%,500px);}
  #taisetsu .photo-text--big{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp-5);}
  #taisetsu .photo-text--big .big-photo img{width:100%;height:760px;}
}
@media (min-width:768px) and (max-width:1023px){
  #taisetsu .photo-text--big{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  #taisetsu .photo-text--big .big-photo img{width:100%;height:620px;}
}
@media (max-width:767px){
  #taisetsu .photo-text--big .big-photo{margin-left:calc(var(--sp-3) * -1);margin-right:calc(var(--sp-3) * -1);}
  #taisetsu .photo-text--big .big-photo img{height:460px;}
}

@media (prefers-reduced-motion:reduce){
  .flow-strip.is-flowing .flow-track{animation:none;}
}