/* =========================================================================
 * まろたの かわいいレイヤー（2026-09-27）
 *
 * 提案「まろたの ときめきリデザイン」案A（いちごミルクのシール帳）の実装。
 * 写真アーチの猫耳は主の判断で不採用。
 *
 * - すべてのモックページで最後に読み込む（marotano-mock-pages.php の enqueue）。
 *   曲ページ・ワールドページ・3周年ページには読み込まれない（モックページ限定のフック）。
 * - 元の style.css / production-fonts.css / motion.css は書き換えていない。
 *   このファイルの enqueue を外せば、見た目は刷新前に戻る。
 * ========================================================================= */

:root{
  --plum:#4E2542;
  --maro:#FF7EB6;
  --maro-lite:#FFC2DC;
  --tano:#E8394F;
  --tano-deep:#C8283F;   /* 白文字を載せる赤（5.5:1） */
  --berry:#C2185B;       /* 小さいピンク文字（背景に対して 5.7:1） */
  --lemon:#FFEC94;
  --lav-deep:#7650C0;    /* 白文字を載せる紫（5.7:1） */
  --kw-line:#F6CADD;
  --kw-shadow:#F7B7D2;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --f-en:"Fredoka","Mochiy Pop One","M PLUS Rounded 1c",sans-serif;
  --f-pop:"Mochiy Pop One","M PLUS Rounded 1c",sans-serif;

  /* 既存トークンの置き換え: ワイン #AD275E をやめる */
  --rose:var(--berry);
  --ink:var(--plum);
}

/* ---------- 1. 書体: Dela Gothic One / Arial 900 → Fredoka ＋ Mochiy Pop One ---------- */
h1,h2,h3,.nav a,.btn,.display,.eyebrow,.page-head h1,.portal-content h2,
.world-owner-title,.world-owner-tab,.world-platform-tab,
.masthead .wordmark,.masthead .issue,.year,.ribbon,.ticker,.meta,.footer h3,.link-icon,.mock-stamp{
  font-family:var(--f-en);
  font-synthesis-weight:none;
}
/* 本番では Olympus Google Fonts プラグインが、このファイルより後ろのインライン <style> で
 * h1〜h6 と button に Dela Gothic One を当てている（要素セレクタ＝詳細度 0,0,1）。
 * 同じ強さだと順番で負けるので、html を前に付けて 0,0,2 にする。
 * クラスで書体を決めている見出し（TRUE の Georgia、PROJECT SR など 0,1,x）には勝たない強さに留める。 */
html :is(h1,h2,h3,h4,h5,h6){font-family:var(--f-en);font-synthesis-weight:none}
html button{font-family:"M PLUS Rounded 1c","Yu Gothic",Meiryo,system-ui,sans-serif}
.display,.page-head h1{letter-spacing:0;color:var(--plum)}
.cover-copy h1{letter-spacing:.01em;line-height:1.5}
.cover-copy h1 strong{color:var(--plum);background:linear-gradient(transparent 60%,var(--maro-lite) 60% 92%,transparent 92%)}
.eyebrow{letter-spacing:.18em}
.ribbon{background:var(--plum);letter-spacing:.2em}

/* ---------- 2. ボタン: ワイン地に白 → ピンク地にプラム（5.4:1） ---------- */
.btn{background:var(--maro);color:var(--plum);border:2px solid var(--plum);box-shadow:0 4px 0 var(--plum);font-weight:600}
.btn.light{background:#fff;color:var(--plum);border-color:var(--plum)}
.btn.mint{background:#CFF3E6;color:var(--plum);border-color:var(--plum)}
.btn:active{translate:0 3px;box-shadow:0 1px 0 var(--plum)}
body[data-mt-motion] .btn:hover{box-shadow:0 4px 0 var(--plum),0 9px 18px #d34f8933}

/* ---------- 3. ナビ: 下線 → 飴玉ピル、現在地はハート ---------- */
.nav .wrap{gap:10px}
.nav a{padding:8px 14px;border-radius:99px;font-weight:600;letter-spacing:.06em;transition:background .2s}
.nav a:hover{background:#FFE6F0}
.nav a[aria-current=page]{color:var(--plum);background:var(--maro);box-shadow:0 0 0 2px var(--plum),0 3px 0 var(--plum)}
.nav a[aria-current=page]:after{content:"♥";height:auto;background:none;border-radius:0;left:auto;right:-3px;bottom:auto;top:-9px;color:var(--tano);font-size:12px;line-height:1}
@media(max-width:700px){.nav .wrap{gap:4px}.nav a{padding:7px 10px;font-size:13px}}

/* ---------- 4. カード: 事務用の四角 → シール（全ページ共通の外枠） ---------- */
.card{border:0;border-radius:24px;padding:10px 10px 0;box-shadow:0 0 0 3px var(--kw-line),0 8px 0 var(--kw-shadow)}
.card-image{border-radius:17px}
.card-copy{padding:16px 12px 20px}
.card:hover{box-shadow:0 0 0 3px var(--maro-lite),0 12px 0 var(--kw-shadow)}
body[data-mt-motion=on] .card.mt-pointing{box-shadow:0 0 0 3px var(--maro-lite),0 12px 0 var(--kw-shadow),0 18px 30px #ad275e1f}
.tag{box-shadow:0 2px 0 var(--kw-line)}

/* ---------- 5. トップのヒーロー ---------- */
.masthead .wordmark.kw-wm{
  display:flex;justify-content:center;align-items:center;gap:.02em;
  font-weight:700;font-size:clamp(44px,10.5vw,132px);line-height:1.05;letter-spacing:.02em;
  margin:14px 0 22px;color:var(--maro);position:relative;z-index:1
}
.kw-wm span{display:inline-block;-webkit-text-stroke:.15em #fff;paint-order:stroke fill;filter:drop-shadow(0 .055em 0 var(--plum))}
.kw-wm .m{color:var(--maro)}
.kw-wm .t{color:var(--tano)}
.kw-wm .h{color:var(--lemon);font-size:.7em;margin-inline:.08em}
.kw-wm span:nth-child(odd){rotate:-5deg}
.kw-wm span:nth-child(even){rotate:4deg;translate:0 .04em}

.kw-stage{position:relative}
.kw-chibi{position:absolute;bottom:-22px;width:26%;max-width:150px;z-index:3;pointer-events:none}
.kw-chibi.l{left:-6%}
.kw-chibi.r{right:-6%}
.kw-chibi img{width:100%;height:auto;filter:drop-shadow(0 4px 0 #fff) drop-shadow(0 6px 6px #4e254233)}
.kw-bubble{position:absolute;top:-14%;white-space:nowrap;background:#fff;color:var(--plum);border-radius:16px;padding:7px 11px;font:400 13px/1.4 var(--f-pop);box-shadow:0 0 0 2px var(--kw-line)}
.kw-chibi.l .kw-bubble{left:-4%}
.kw-chibi.r .kw-bubble{right:-4%}
.kw-bubble::after{content:"";position:absolute;bottom:-7px;left:50%;width:12px;height:12px;margin-left:-6px;background:#fff;rotate:45deg;box-shadow:2px 2px 0 var(--kw-line)}
@media(max-width:700px){
  .kw-stage{order:1}
  .kw-chibi{width:25%;bottom:-18px}
  .kw-chibi.l{left:0}
  .kw-chibi.r{right:0}
  .kw-bubble{font-size:11.5px;padding:6px 9px}
}

/* ---------- 6. ティッカー: ミントの帯 → キャンディのストライプ ---------- */
.ticker{background:repeating-linear-gradient(-45deg,#FFB3D2 0 14px,#fff 14px 28px);border-block:0;color:var(--plum);font-weight:600;font-size:12px;line-height:1;letter-spacing:.14em;padding-block:10px}
.ticker b{display:inline-block;background:#fff;padding:9px 16px;border-radius:99px;box-shadow:0 0 0 2px var(--plum);font-weight:600}
.ticker span{color:var(--berry)}

/* ---------- 7. 区切り: まっすぐ → スカラップ（ケーキのふち）と地紋 ---------- */
.kw-band{position:relative}
.kw-band::before{content:"";position:absolute;left:0;right:0;top:-15px;height:16px;pointer-events:none;
  background:radial-gradient(circle at 50% 100%,var(--band) 11px,transparent 11.5px) 0 0/24px 16px repeat-x}
.kw-dots{--band:#fff;background:#fff;background-image:radial-gradient(#FFE0EC 1.6px,transparent 2px);background-size:22px 22px}
.kw-gingham{--band:#F6F0FF;background-color:#F6F0FF;
  background-image:linear-gradient(90deg,#E6DAFF77 50%,transparent 50%),linear-gradient(#E6DAFF77 50%,transparent 50%);background-size:28px 28px}
.kw-gingham::after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:16px;pointer-events:none;
  background:radial-gradient(circle at 50% 0,var(--band) 11px,transparent 11.5px) 0 0/24px 16px repeat-x;z-index:1}

/* ---------- 8. 見出し: 英語の大見出し → 小さなリボン＋日本語が主役 ---------- */
.display.kw-title{display:grid;gap:8px;justify-items:start}
.kw-rib{font:600 12px/1 var(--f-en);letter-spacing:.2em;color:#fff;background:var(--tano-deep);padding:7px 18px 7px 12px;clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%)}
.kw-rib.lav{background:var(--lav-deep)}
.kw-title em{font:400 clamp(26px,3.6vw,40px)/1.4 var(--f-pop);font-style:normal;color:var(--plum);background:linear-gradient(transparent 60%,var(--lemon) 60% 92%,transparent 92%);padding-inline:.06em}

/* ---------- 9. THE LATEST: マステ・交互の傾き・正方形のジャケット ---------- */
.kw-latest .cards{gap:28px}
.kw-latest .card{overflow:visible;transition:translate .45s var(--spring),scale .45s var(--spring),rotate .45s var(--spring),box-shadow .2s}
.kw-latest .card:nth-child(1){rotate:-1.8deg}
.kw-latest .card:nth-child(2){rotate:1.4deg}
.kw-latest .card:nth-child(3){rotate:-.8deg}
.kw-latest .card::before{content:"";position:absolute;top:-11px;left:50%;width:84px;height:22px;margin-left:-42px;rotate:-4deg;border-radius:2px;z-index:2;
  background:repeating-linear-gradient(45deg,#FFB3D2cc 0 8px,#ffffffcc 8px 16px)}
.kw-latest .card:nth-child(2)::before{rotate:5deg;background:repeating-linear-gradient(45deg,#C9B4F5cc 0 8px,#ffffffcc 8px 16px)}
.kw-latest .card:nth-child(3)::before{background:repeating-linear-gradient(45deg,#FFE58Acc 0 8px,#ffffffcc 8px 16px)}
.kw-latest .card-image{aspect-ratio:1}
.kw-latest .card-image[src*="true-cover"]{object-position:top}
/* 曲のカードだけ、アイドルステージ案のホログラムのフチを借りる */
.kw-latest .card[href*="/tano-records/"]{border:3px solid transparent;box-shadow:0 8px 0 var(--kw-shadow);
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#FF7EB6,#FFE58A,#9EE7FF,#C9B4F5,#FF7EB6) border-box}
body[data-mt-motion=on] .kw-latest .card:hover{translate:0 -6px;scale:1.02;rotate:0deg}
@media(max-width:700px){.kw-latest .cards{gap:34px;padding-inline:4%}}

/* ---------- 10. 新しい棚: まろの森、四つの季節 ---------- */
.kw-seasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,3vw,34px);position:relative;margin-top:6px}
.kw-seasons::before{content:"";position:absolute;left:12%;right:12%;top:calc(min(110px,11vw) - 1px);border-top:3px dashed #C9B4F5}
.kw-season{display:grid;justify-items:center;gap:8px;text-align:center;position:relative;color:var(--plum);transition:translate .4s var(--spring)}
.kw-season .ring{width:min(100%,220px);aspect-ratio:1;border-radius:50%;padding:6px;background:var(--c);box-shadow:0 5px 0 color-mix(in srgb,var(--c) 70%,var(--plum))}
.kw-season .ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:4px solid #fff}
.kw-season b{font:400 18px/1.2 var(--f-pop)}
.kw-season small{font:600 12.5px/1 var(--f-en);color:#8A6480;letter-spacing:.06em}
.kw-season .no{position:absolute;top:-2px;right:12%;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--c);font:700 13px/28px var(--f-en)}
body[data-mt-motion=on] .kw-season:hover{translate:0 -6px}
@media(max-width:700px){
  .kw-seasons{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
  .kw-seasons::before{display:none}
}

/* ---------- 11. フッター: スカラップ＋ちびキャラの見送り ---------- */
.footer{position:relative;border-top:0;margin-top:86px}
.footer::before{content:"";position:absolute;left:0;right:0;top:-15px;height:16px;pointer-events:none;
  background:radial-gradient(circle at 50% 100%,#ffdeec 11px,transparent 11.5px) 0 0/24px 16px repeat-x}
.kw-bye{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,4vw,48px);margin:-12px auto 30px;padding-inline:16px}
.kw-bye img{width:clamp(62px,9vw,104px);height:auto}
.kw-bye p{padding-bottom:14px;font:400 clamp(17px,2.4vw,24px)/1.4 var(--f-pop);color:var(--plum);text-align:center}

/* ---------- 12. 「動きを止める」: 本文に重なる大きなピル → 右下の小さな丸 ----------
 * 見出しも本文も左揃えのサイトなので、左下に置くと小さくしても文頭にかかる。右下に移す。 */
.mt-motion-toggle{left:auto;right:12px;bottom:12px;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;display:grid;place-items:center;
  font:700 14px/1 var(--f-en);color:var(--plum);border:2px solid var(--plum);background:#fffffff2;box-shadow:0 3px 0 var(--plum)}
.mt-motion-toggle[hidden]{display:none}

@media(prefers-reduced-motion:reduce){
  .kw-latest .card,.kw-season{transition:none}
  body[data-mt-motion] .kw-latest .card:hover,body[data-mt-motion] .kw-season:hover{translate:none;scale:none}
}