/* ==========================================================
   ヘッダー（参考元 SECTION 1 のモックに合わせた微調整）
   ========================================================== */
#site-header{ border-bottom: 0; }
#site-header .inner{ height: 82px; }
.wa-logo{ font-size: clamp(1.35rem, 1.93vw, 2.1rem); }
.wa-logo-en{ font-family: var(--font-en, "Poppins", sans-serif); font-weight: 700; }
.nav-pc.wa-nav{ gap: clamp(22px, 2.35vw, 34px); }
.nav-pc.wa-nav a{ font-size: clamp(.85rem, 1.06vw, 1.15rem); }


/* ==========================================================
   フッター（SECTION 11）
   新ロゴ準備中のため、ヘッダーと同じテキストロゴを使う
   ========================================================== */
.footer-logo-text{
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: .01em;
}
.footer-logo-text span{
  font-family: var(--font-en, "Poppins", sans-serif);
  font-weight: 700;
}
.footer-info a{ text-decoration: underline; text-underline-offset: 2px; }
.footer-info a:hover{ opacity: .8; }
.footer-sns{
  margin-top: 12px;
  font-size: .82rem;
  opacity: .75;
}

/* ==========================================================
   SECTION 1 ｜ お悩み神経衰弱
   参考元 assets/images/SECTION 1/SECTION 1 参考元.png (1448x1086) を
   実測した layout.json に基づく。設計幅 1448px で各値が一致する。
   ========================================================== */

#target.s1{
  --navy:      #16264f;
  --navy-deep: #0f1b3d;
  --card-navy: #15274d;
  --yellow:    #f8c803;   /* 参考元 実測 (248,200,3) */
  --yellow-dk: #e0b302;
  --red:       #e8262e;
  --ink:       #1b2a4a;
  --sub:       #5b6478;
  --line:      #e8ebf1;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fdfefe !important;
  padding: 21px 0 96px !important;   /* ヘッダー82px + 21 = バッジ上端103px（参考元と一致） */
  margin: 0 !important;
}

.s1-wrap{
  position: relative;
  z-index: 2;
  text-align: left;
  width: min(1349px, calc(100% - 68px));
  margin: 0 auto;
}

/* ── 装飾 ─────────────────────────────────────────── */
/* 支給素材を参考元の実測ジオメトリで合成したレイヤー（build_deco.py で生成） */
.s1-deco{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../images/section1/deco-layer.webp") top center / 100% auto no-repeat;
}

/* ── 流れ星（deco-layer.png から外して単体で動かす） ──────────
   合成レイヤーは 1448x1004 を幅100%で敷いている。星は元レイヤー上の
   x1120 / y108 / w95 の位置にあったので、同じ比率の箱を重ねて再現する */
.s1-starfield{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  aspect-ratio: 1448 / 1004;
}
.s1-star{
  position: absolute;
  left: 77.348%;          /* 1120 / 1448 */
  top: 10.757%;           /* 108 / 1004 */
  width: 6.561%;          /* 95 / 1448 */
  display: block;
  animation: s1-star-float 5.4s ease-in-out infinite;
}
.s1-star-in{ display: block; transform-origin: 50% 50%; }
.s1-star img{ display: block; width: 100%; height: auto; transform-origin: 50% 50%; }

/* 小さいきらめき（星のまわり）。位置は .s1-starfield 基準 */
.s1-mini{
  position: absolute;
  background: url("../images/section1/star-yellow.webp") center/100% 100% no-repeat;
  opacity: 0;
  transform: scale(.2);
}
.s1-mini-1{ left: 74.0%; top: 8.0%;  width: 2.2%; aspect-ratio: 90 / 89; }
.s1-mini-2{ left: 84.6%; top: 17.4%; width: 1.7%; aspect-ratio: 90 / 89;
            background-image: url("../images/section1/star-navy.webp"); }
.s1-mini-3{ left: 80.4%; top: 5.2%;  width: 1.3%; aspect-ratio: 90 / 89; }

/* 画面に入るまでは止めておき、入った瞬間に「わっ」と出す */
.s1-starfield .s1-star{ animation-play-state: paused; }
#target.s1.is-star-in .s1-star{ animation-play-state: running; }
#target.s1.is-star-in .s1-star-in{ animation: s1-star-pop .95s cubic-bezier(.18,.9,.24,1.3) both; }
#target.s1.is-star-in .s1-star img{ animation: s1-star-twinkle 4.6s ease-in-out .95s infinite; }
#target.s1.is-star-in .s1-mini{ animation: s1-mini-pop 4.6s ease-in-out infinite; }
#target.s1.is-star-in .s1-mini-1{ animation-delay: .70s; }
#target.s1.is-star-in .s1-mini-2{ animation-delay: 1.05s; }
#target.s1.is-star-in .s1-mini-3{ animation-delay: 1.35s; }

@keyframes s1-star-pop{
  0%   { opacity: 0; transform: scale(.15) rotate(-55deg); }
  55%  { opacity: 1; transform: scale(1.22) rotate(10deg); }
  75%  { transform: scale(.94) rotate(-4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes s1-star-float{
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(-1.5%, -6%, 0) rotate(4deg); }
}
/* ときどき「きらっ」と光る */
@keyframes s1-star-twinkle{
  0%, 62%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(248,200,3,0)); }
  70%           { transform: scale(1.16); filter: drop-shadow(0 0 12px rgba(248,200,3,.95)); }
  78%           { transform: scale(.97);  filter: drop-shadow(0 0 4px rgba(248,200,3,.35)); }
  86%           { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(248,200,3,.6)); }
}
@keyframes s1-mini-pop{
  0%, 58%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  68%           { opacity: 1; transform: scale(1.15) rotate(25deg); }
  80%           { opacity: .85; transform: scale(.9) rotate(40deg); }
}

/* ── 見出しまわり ─────────────────────────────────── */
.s1-badge{
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin: 0 0 0 6px;
  padding: 7px 15px 6px;
  background: var(--yellow);
  border-radius: 4px;
  font-family: var(--font-en, "Poppins", sans-serif);
  font-weight: 700;
  font-size: clamp(12px, 1.105vw, 16px);
  line-height: 1.2;
  letter-spacing: .22em;
  color: var(--navy);
}
.s1-badge i{ font-style: normal; opacity: .55; }
.s1-badge span:last-child{ font-family: var(--font-jp); letter-spacing: .02em; }

.s1-title{
  /* SECTION 1 のバッジを外したぶん、上の余白をここで持つ */
  margin: 30px 0 0 6px;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(28px, 3.757vw, 54.4px);
  line-height: 1.278;
  letter-spacing: -.012em;
  color: var(--navy);
  text-align: left;
}
/* 2行目は参考元の方が字詰まりが強い（ref 682px / Noto 710px） */
.s1-title-l2{ letter-spacing: -.049em; }
.s1-mark{
  position: relative;
  display: inline-block;
  padding: 0 .06em;
}
.s1-mark::before{
  content: "";
  position: absolute;
  left: .18em; right: .09em;
  bottom: .04em;
  height: .54em;
  background: url("../images/section1/deco-marker.webp") center/100% 100% no-repeat;
  z-index: -1;
}

/* ── 見出しのタイピング演出 ─────────────────────────
   1文字ずつ <i class="s1-ch"> に包んで visibility で出す。
   display は inline のまま＝行の折り返し位置も文字幅も元と変わらない */
.s1-ch{ position: relative; font-style: normal; }
.s1-title.is-typing .s1-ch{ visibility: hidden; }
.s1-title.is-typing .s1-ch.is-on{ visibility: visible; }
/* カーソル（絶対配置なので文字送りしてもレイアウトは動かない） */
.s1-title.is-typing .s1-ch.is-cursor::after{
  content: "";
  position: absolute;
  left: 100%;
  bottom: .12em;
  width: .055em;
  height: .92em;
  background: var(--navy);
  animation: s1-caret .62s steps(1, end) infinite;
}
@keyframes s1-caret{ 0%, 64%{ opacity: 1; } 65%, 100%{ opacity: 0; } }
/* マーカーは、その語を打ち終わってから引く */
.s1-title.is-typing .s1-mark::before{
  transform: scaleX(0);
  transform-origin: left center;
}
.s1-title.is-typing .s1-mark.is-drawn::before{
  transform: scaleX(1);
  transition: transform .34s cubic-bezier(.3,.8,.4,1);
}

.s1-lead{
  margin: 15px 0 0 12px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(13px, 1.222vw, 17.7px);
  line-height: 1.5;
  color: var(--ink);
  text-align: left;
}

/* ── 2カラム ─────────────────────────────────────── */
.s1-layout{
  display: grid;
  grid-template-columns: minmax(0, 876fr) minmax(0, 452fr);
  gap: 21px;
  align-items: start;
  margin-top: 24px;
}

/* ── 左：ボード ───────────────────────────────────── */
.s1-board{
  background: #fdfdfd;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 22px 26px 22px;
  box-shadow: 0 3px 9px rgba(22,38,79,.05);
}

.s1-tabs{
  display: grid;
  grid-template-columns: 218fr 206fr 185fr 189fr;   /* 参考元実測 */
  gap: 10px;
  margin-bottom: 25px;
}
.s1-tab{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  height: clamp(40px, 3.867vw, 56px);
  padding: 0 8px;
  background: #fdfdfd;
  border: 1.5px solid #e4e7ee;
  border-radius: 13px;
  cursor: pointer;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(11px, 1.195vw, 17.3px);
  line-height: 1;
  color: var(--navy);
  white-space: nowrap;
  transition: border-color .16s, box-shadow .16s;
}
.s1-tab-suit{ width: clamp(14px, 1.52vw, 22px); height: auto; }
.s1-tab-caret{
  position: absolute;
  left: 50%; top: 100%;
  width: clamp(14px, 1.45vw, 21px);
  transform: translate(-50%, -1px);
  opacity: 0;
  transition: opacity .16s;
}
.s1-tab:hover{ border-color: #c9cfdd; }
.s1-tab.is-active{
  border: 2px solid var(--yellow);
  box-shadow: 0 3px 10px rgba(255,212,0,.28);
}
.s1-tab.is-active .s1-tab-caret{ opacity: 1; }
.s1-tab:focus-visible{ outline: 3px solid #2a6fd6; outline-offset: 3px; }

/* ── カードグリッド ───────────────────────────────── */
.s1-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 17px;
  row-gap: 14px;
  list-style: none;
  margin: 0 0 0 15px;   /* 参考元：タブ列より15px内側 */
  padding: 0;
}
.s1-item{ list-style: none; }

.s1-card{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 190 / 128;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.4,.2,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.s1-card.is-open{ transform: rotateY(180deg); }
.s1-card:focus-visible{ outline: 3px solid #2a6fd6; outline-offset: 4px; border-radius: 12px; }

.s1-face{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.s1-back{
  background: var(--card-navy) url("../images/section1/card-pattern.webp") center/80px 80px repeat;
  box-shadow: 0 2px 4px rgba(22,38,79,.28);
}
.s1-back-w{ width: 18.4%; height: auto; }

.s1-front{
  transform: rotateY(180deg);
  background: #fdfdfd;
  border: 2px solid var(--yellow);
  box-shadow: 0 2px 4px rgba(22,38,79,.16);
  padding: 8px;
  /* 文言はカード（枠）の上下中央。スート記号は流れから外して上に固定するので、
     行数が2行でも3行でも文字の重心が枠のど真ん中に来る */
  justify-content: center;
}
.s1-card-suit{
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  height: clamp(14px, 1.45vw, 21px);
  width: auto;
  margin: 0;
}
.s1-card-spark{
  position: absolute;
  top: 12%; right: 13%;
  width: clamp(12px, 1.31vw, 19px);
}
.s1-card-text{
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(11px, 1.139vw, 16.5px);
  line-height: 1.28;
  color: var(--navy);
  text-align: center;
  text-wrap: balance;
}
/* 文字数の多いカードだけ一段小さく。1行が枠に収まりきらず
   意図しない位置で折り返すのを防ぐ */
.s1-item.is-long .s1-card-text{
  font-size: clamp(9.5px, 1.001vw, 14.5px);
  line-height: 1.3;
}
/* 「これ、私だ」＝2回目のタップ。光らせず、枠の中を薄い赤で塗る */
.s1-card.is-picked .s1-front{
  background: #fdecee;
  border-color: var(--red);
  box-shadow: 0 2px 4px rgba(22,38,79,.16);
}
/* タブで選んだスートを強調（絞り込みはしない） */
.s1-item.is-dim .s1-card{ opacity: .42; }
.s1-item.is-hl .s1-back{ box-shadow: 0 0 0 3px var(--yellow), 0 6px 16px rgba(22,38,79,.2); }

.s1-sr{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── 右：診断パネル ───────────────────────────────── */
.s1-panel{
  position: relative;
  margin-top: 12px;              /* 参考元：左ボードより12px下 */
  background: #fdfdfd;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 32px 26px 34px;
  box-shadow: 0 3px 9px rgba(22,38,79,.05);
}
.s1-panel-label{
  margin: 0;
  transform: translateX(-16px);   /* 参考元の実測位置（パネル中心より16px左） */
  line-height: 1.5;
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(14px, 1.312vw, 19px);
  letter-spacing: .04em;
  color: var(--navy);
}
.s1-panel-label::after{
  content: "";
  display: block;
  width: 92px;
  height: 1.5px;
  margin: 8px auto 0;
  background: var(--navy);
}

.s1-result{
  margin-top: 33px;
  background: #fdfdfd;
  border: 1px solid #f0f2f6;
  border-radius: 20px;
  padding: 24px 22px 26px;
  box-shadow: 0 2px 7px rgba(22,38,79,.05);
}

.s1-type{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  height: clamp(26px, 2.97vw, 43px);   /* 参考元のタイプ行の高さ。♦を大きくしても下段を押さない */
  margin: 34px 0 0;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(21px, 2.486vw, 36px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--navy);
  text-align: center;
}
.s1-type-suit{ height: clamp(26px, 2.97vw, 43px); width: auto; flex: none; }
/* 参考元の書体は Noto Sans JP より漢字が縦長（「宝」ref 35x38 / Noto 36x32）。
   同じ見え方にするため、この見出しだけ縦方向に 1.19 倍かける */
.s1-type-text{ display: inline-block; transform: scaleY(1.19); transform-origin: center bottom; white-space: nowrap; }
/* 診断タイプの文字は、下の黄色い線より前面に置く */
.s1-type-text, .s1-type-suit{ position: relative; z-index: 1; }
.s1-type-suffix{ font-size: .76em; }
.s1-type-line{
  position: absolute;
  left: 10.9%;
  bottom: -5px;
  width: 87.8%;
  height: 13px;
  object-fit: fill;
}
.s1-msg{
  margin: 37px 0 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(14px, 1.485vw, 21.5px);
  line-height: 1.52;
  color: var(--navy);
  text-align: center;
}

.s1-score-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 41px 0 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(12px, 1.208vw, 17.5px);
  color: var(--navy);
  white-space: nowrap;
}
.s1-score-head::before,
.s1-score-head::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.s1-score-head img{ width: clamp(10px, .97vw, 14px); height: auto; }

.s1-scores{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  list-style: none;
  margin: 7px -28.5px 0 -3.5px;
  padding: 0;
}
.s1-score{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  height: 99px;
  padding: 20px 0 0;
}
.s1-score + .s1-score::before{
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 2px;
  border-left: 1px dashed #dfe3ea;
}
.s1-crown{
  position: absolute;
  top: 0; left: 50%;
  width: clamp(13px, 1.24vw, 18px);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .2s;
}
.s1-score.is-top .s1-crown{ opacity: 1; }
.s1-score-suit{ height: clamp(24px, 2.62vw, 38px); width: auto; }
.s1-score-num{
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(10px, .93vw, 13.5px);
  color: var(--navy);
  line-height: 1;
}
.s1-score-num b{
  font-family: var(--font-en, "Poppins", sans-serif);
  font-weight: 700;
  font-size: clamp(14px, 1.312vw, 19px);
  letter-spacing: -.01em;
}
/* 1位だけ赤＋大きく＋黄色い下線（参考元どおり） */
.s1-score.is-top .s1-score-num{ color: var(--red); }
.s1-score.is-top .s1-score-num b{ font-size: clamp(18px, 1.66vw, 24px); }
.s1-score.is-top .s1-score-num{ position: relative; }
.s1-score.is-top .s1-score-num::after{
  content: "";
  position: absolute;
  left: -3px; right: -3px; bottom: -10px;
  height: 5px;
  border-radius: 3px;
  background: var(--yellow);
}

.s1-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
  height: clamp(48px, 4.7vw, 68px);
  margin: 54px -8px 0;
  white-space: nowrap;
  background: var(--yellow);
  border-radius: 13px;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(13px, 1.257vw, 18.2px);
  color: var(--navy);
  text-align: center;
  transition: transform .14s, box-shadow .14s, filter .16s;
}
.s1-cta i{ font-style: normal; font-size: 1.15em; font-weight: 700; }
.s1-cta:hover{ filter: brightness(.95); }
.s1-cta.is-idle{ filter: grayscale(.85) opacity(.55); pointer-events: none; }

.s1-reset{
  position: absolute;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
  margin: 0;
  background: none;
  border: 0;
  color: #949aa6;
  font-weight: 700;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.s1-reset:hover{ color: var(--navy); }

/* ── ヒント（リード文のすぐ下） ───────────────────── */
.s1-hint{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 9px 0 0 12px;   /* リード文と左端をそろえる */
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(11px, 1.077vw, 15.6px);
  color: var(--navy);
}
.s1-hint img{ width: clamp(13px, 1.24vw, 18px); height: auto; }

/* ==========================================================
   JS無効時：通常のチェックリストとして表示
   ========================================================== */
html:not(.js) .s1-tabs,
html:not(.js) .s1-panel,
html:not(.js) .s1-card-spark{ display: none; }
html:not(.js) .s1-layout{ grid-template-columns: minmax(0, 1fr); }
html:not(.js) .s1-card{ transform: none; cursor: default; }
html:not(.js) .s1-back{ display: none; }
html:not(.js) .s1-front{ transform: none; }

/* ==========================================================
   レスポンシブ
   ========================================================== */
@media (max-width: 1080px){
  .s1-wrap{ width: calc(100% - 40px); }
  .s1-layout{ grid-template-columns: minmax(0,1fr); gap: 24px; }
  .s1-title{ font-size: clamp(26px, 5vw, 44px); }
  .s1-lead{ font-size: clamp(13px, 1.9vw, 18px); }
  .s1-tab{ font-size: clamp(11px, 1.7vw, 17px); height: 48px; }
  .s1-card-text{ font-size: clamp(10px, 1.5vw, 14px); }
  .s1-type{ font-size: clamp(22px, 3.4vw, 32px); }
  .s1-msg{ font-size: clamp(15px, 2.3vw, 22px); }
  .s1-score-suit{ width: 30px; }
  .s1-score-num b{ font-size: 22px; }
  .s1-cta{ font-size: 18px; height: 60px; }
}
@media (max-width: 700px){
  #target.s1{ padding: 40px 0 64px !important; }
  /* 小画面では装飾が見出しに重なるので薄くする */
  .s1-deco{ opacity: .28; background-size: 150% auto; background-position: top right; }
  /* 背景を 150% / 右上寄せにするので、星の箱も同じ倍率・同じ基準に合わせる */
  .s1-starfield{ left: auto; right: 0; width: 150%; }
  .s1-wrap{ width: calc(100% - 32px); }
  .s1-board{ padding: 16px 14px; border-radius: 18px; }
  .s1-tabs{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .s1-tab{ height: 52px; font-size: 12.5px; }   /* 11px は小さすぎるので底上げ */
  /* 選んだ分野の4枚だけ出す（16枚の紺色の壁をやめる）。
     PC では .is-off を無視するので見た目は変わらない */
  .s1-item.is-off{ display: none; }
  .s1-grid{ margin-left: 0; }
  .s1-card{ aspect-ratio: 5 / 3; }
  /* 分野が切り替わることを伝える一言 */
  .s1-board::after{
    content: "▲ 分野を選ぶと、その4枚に切り替わります";
    display: block; margin-top: 14px; text-align: center;
    font-size: 12px; font-weight: 700; color: #5b6478; letter-spacing: .02em;
  }
  .s1-grid{ grid-template-columns: repeat(2, 1fr); column-gap: 10px; row-gap: 10px; }
  .s1-card{ aspect-ratio: 3 / 2; }
  .s1-panel{ padding: 18px 16px 20px; border-radius: 18px; }
  .s1-result{ padding: 18px 14px 20px; }
  .s1-type{ margin-top: 20px; font-size: 24px; }
  .s1-msg{ margin-top: 26px; font-size: 17px; }
  .s1-score-head{ margin-top: 28px; }
  .s1-scores{ margin-top: 18px; }
  .s1-cta{ margin-top: 26px; height: 54px; font-size: 16px; }
  .s1-title{ font-size: 26px; }
  .s1-hint{ align-items: flex-start; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .s1-card, .s1-tab, .s1-crown, .s1-cta{ transition: none; }
  /* モーションを抑える設定なら、演出なしで最初から出しておく */
  #target.s1 .s1-star,
  #target.s1 .s1-star-in,
  #target.s1 .s1-star img,
  #target.s1 .s1-mini{ animation: none !important; }
  #target.s1 .s1-mini{ opacity: 1; transform: scale(1); }
  .s1-title.is-typing .s1-ch{ visibility: visible; }
  .s1-title.is-typing .s1-ch.is-cursor::after{ display: none; }
  .s1-title.is-typing .s1-mark::before{ transform: none; }
}