@charset "UTF-8";
/* ============================================================================
   yomumiru-v2.css ── ヨムミル新デザイン（2026-10-21）このファイルの読み方
   1. 見た目は MAV（xvideo-jp.com）の mav-v2.css と同じ8色・同じ部品。姉妹サイトとして見た目をそろえる
   2. クラス名は ym- 接頭辞。body に class="ym" を付けたページだけに効く
   3. 今の main.css（Tailwind）の後に読み込む。main.css は消さなくてよい（新しい画面は Tailwind のクラスを使っていない）
   4. library.js・common.js が使う目印（js-article / btn_favo / btn_atd / text-white / text-orange-300 /
      hidden / modalCategory / modalWord / pagetop / ul.pager）は名前を変えずに、見た目だけここで決める
   5. 換金の青 #1d6fe0 は FANZA へ進むボタンにだけ使う。読み放題の箱の赤は MAV の FANZA TV の箱と同じ
   6. 幅の境目は 768（PC化）/ 1024 / 1280（左サイドバー300px）/ 1536（5列）。MAVと同じ
   ============================================================================ */


/* ── 1. 変数（MAVと同じ8色＋角丸2種＋換金の青・読み放題の赤） ───────────── */
:root{--bg:#FFFFFF;--face:#F5F5F7;--press:#EBEBEF;--line:#D2D2D7;--ink:#1D1D1F;--ink2:#6E6E73;--ac:#FF630F;--acs:#FFF1E8;--rs:8px;--rm:12px;--cta:#1d6fe0;--red:#D7000F}


/* ── 2. 土台 ────────────────────────────────────────────────────────── */
body.ym{margin:0;padding:0 0 calc(56px + env(safe-area-inset-bottom));min-height:100vh;background:var(--face);color:var(--ink);font-family:system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;letter-spacing:.02em;-webkit-font-smoothing:antialiased}  /* 下56px＝下部ナビの高さぶん */
body.ym.ym-view,body.ym.ym-link{background:var(--bg)}  /* 作品ページとリンクページは白地 */
.ym *{box-sizing:border-box}
.ym a{color:inherit;text-decoration:none}
.ym img{display:block;max-width:100%}
.ym button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.ym .hidden{display:none}  /* common.js が小窓の開け閉めに使う。main.css を外しても動くようにここにも置く */
.ym svg.ym-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:768px){body.ym{padding-bottom:0}}


/* ── 3. SPヘッダ（〜767px。MAVと同じ: 高さ44px・ロゴ中央・右に虫めがね） ─── */
.ym-sph{position:relative;height:44px;display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid var(--line)}
.ym-lg{font-weight:800;font-size:18px;letter-spacing:.01em;white-space:nowrap;color:var(--ink)}
.ym-lg i{font-style:normal;color:var(--ac)}
.ym-sph .ym-sv{position:absolute;right:12px;top:12px;display:flex}
@media (min-width:768px){.ym-sph{display:none}}


/* ── 4. PCヘッダ（768px〜。ロゴ・検索欄・右にアイコン） ──────────────────── */
.ym-pch{display:none}
@media (min-width:768px){
  .ym-pch{display:flex;align-items:center;gap:24px;height:64px;padding:0 30px;background:#fff;border-bottom:1px solid var(--line)}
  .ym-pch .ym-lg{font-size:20px}
  .ym-pch form{flex:0 1 520px;margin:0}
  .ym-pch input{width:100%;height:36px;border:1px solid var(--line);border-radius:999px;background:var(--face);padding:0 16px;font-size:14px;color:var(--ink);outline:none}
  .ym-pch nav{margin-left:auto;display:flex;gap:28px}
  .ym-pch nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;color:var(--ink)}
  .ym-pch nav a.is-on{color:var(--ac)}
}


/* ── 5. 本文列と左サイドバー（1280px〜で左300px。MAVと同じ） ─────────────── */
.ym-side{display:none}
.ym-main{min-width:0}
@media (min-width:768px){.ym-main{margin:0 30px}}
@media (min-width:1280px){
  .ym-wrap{display:grid;grid-template-columns:300px minmax(0,1fr)}
  .ym-side{display:block;position:sticky;top:0;height:100vh;overflow-y:auto;background:#fff;border-right:1px solid var(--line);padding:20px 16px 30px}
}
.ym-sh{font-size:17px;font-weight:700;margin:4px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.ym-chips{margin:0 0 22px;padding:0}
.ym-chip{display:inline-block;height:32px;line-height:32px;padding:0 12px;border-radius:var(--rs);background:var(--face);color:var(--ink);font-size:14px;margin:0 6px 6px 0;letter-spacing:0;transition:background-color .15s ease-out}
.ym-chip:active{background:var(--press)}
.ym-chip.is-on{background:var(--acs);color:var(--ac);font-weight:700}
/* 本文下のタグ一覧（〜1279px）。左の欄が出ない幅では、MAVの .mv-tagband と同じく本文の下に出す（2026-10-22 運営「幅を縮めた際に下にタグ一覧が表示されない」） */
.ym-tagband{margin:12px 16px 0;padding:14px 14px 0;background:#fff;border:1px solid var(--line);border-radius:var(--rm)}
@media (min-width:768px){.ym-tagband{margin:12px 30px 0}}
@media (min-width:1280px){.ym-tagband{display:none}}  /* 左の欄が出たら、本文下の複製は出さない */


/* ── 6. 見出し・パンくず・並びのタブ ─────────────────────────────────── */
.ym-h1{font-size:19px;font-weight:800;margin:0;padding:14px 16px 2px;line-height:1.4}
.ym-sub{margin:0;padding:0 16px 8px;font-size:13px;color:var(--ink2)}
.ym-secT{display:flex;align-items:baseline;gap:8px;padding:14px 16px 4px;margin:0}
.ym-secT h2,.ym-secT .ym-secT-t{font-size:17px;font-weight:800;margin:0}
.ym-secT small{font-size:12px;color:var(--ink2)}
.ym-crumb{margin:0;padding:10px 16px 0;list-style:none;display:flex;font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden}
.ym-crumb li{overflow:hidden;text-overflow:ellipsis}
.ym-crumb li+li::before{content:"›";margin:0 6px}
.ym-crumb a{color:var(--ink2)}
@media (min-width:768px){.ym-h1{font-size:24px;padding:24px 0 4px}.ym-sub,.ym-secT,.ym-crumb{padding-left:0;padding-right:0}.ym-secT h2,.ym-secT .ym-secT-t{font-size:20px}}
.ym-tabs{display:flex;gap:8px;padding:8px 16px 10px;margin:0}
.ym-tabs a,.ym .ym-tabs button{flex:1;height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;border-radius:var(--rm);background:var(--bg);border:1px solid var(--line);color:var(--ink2);white-space:nowrap}
.ym-tabs a.is-on,.ym .ym-tabs button.is-on{background:var(--ac);color:#fff;border-color:var(--ac)}  /* 並びのタブは今のフォームのボタン（/_search.php）。マイページのタブはリンク */
@media (min-width:768px){.ym-tabs{padding:8px 0 14px}}


/* ── 7. 作品カード（表紙 9:13・白カード・角丸12px）────────────────────────
   library.js の目印: article.js-article[data-key] / .js-link / .js-img / .js-title / .js-aff / .js-page / .btn_favo / .btn_atd
   ※ カードの中で最初の svg はハート（library.js が article.querySelector("svg") でハートを探すため。前に svg を置かない） */
.ym-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:4px 16px 8px}
@media (min-width:768px){.ym-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:4px 0 8px}}
@media (min-width:1024px){.ym-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1536px){.ym-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ym-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--rm);overflow:hidden;min-width:0}
.ym-cv{position:relative;display:block;aspect-ratio:9/13;background:var(--press);overflow:hidden}
.ym-cv img{width:100%;height:100%;object-fit:cover}
.ym-pg{position:absolute;right:6px;bottom:6px;background:rgba(29,29,31,.78);color:#fff;font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px}
.ym-new{position:absolute;left:6px;top:6px;background:var(--ac);color:#fff;font-size:11px;font-weight:800;padding:3px 7px;border-radius:6px;letter-spacing:.04em}
.ym-ct{margin:0;font-size:14px;font-weight:400;line-height:1.45;padding:8px 10px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(14px*1.45*2 + 8px)}
.ym-cm{display:flex;align-items:center;gap:6px;padding:6px 6px 8px 10px;font-size:12px;color:var(--ink2);margin-top:auto}
.ym-cm .btn_favo{display:inline-flex;align-items:center;gap:3px;color:var(--ink2);font-size:12px}
.ym-cm .btn_favo svg{width:15px;height:15px}
.ym-cm .btn_favo span{color:var(--ink2);font-size:12px;font-weight:400;margin:0}
.ym-cm .btn_atd{margin-left:auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:999px}
/* 人気順の順位（番号はCSSで振る。2ページ目は article の親に style="counter-reset:ym-rk 24" を付ける） */
.ym-grid.is-rank{counter-reset:ym-rk}
.ym-grid.is-rank .ym-card{counter-increment:ym-rk}
.ym-grid.is-rank .ym-cv::before{content:counter(ym-rk);position:absolute;left:0;top:0;z-index:1;min-width:30px;height:30px;padding:0 6px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-weight:800;font-size:14px;border-bottom-right-radius:10px}
.ym-grid.is-rank .ym-card:nth-child(-n+3) .ym-cv::before{background:var(--ac)}
.ym-grid.is-rank .ym-new{display:none}


/* ── 8. いいね・後で見る（library.js が付け外しする状態を、そのまま色にする） ─
   いいね: svg の fill 属性 rgb(255,255,255)＝押していない／rgb(255,0,0)＝押した
   後で見る: ボタンの class text-white＝押していない／text-orange-300＝押した          */
.ym .btn_favo svg[fill="rgb(255,255,255)"]{fill:#C7C7CC}
.ym .btn_favo svg[fill="rgb(255,0,0)"]{fill:var(--ac)}
.ym .btn_favo svg[fill="rgb(255,0,0)"]~span{color:var(--ac)}
.ym .btn_atd.text-white{color:var(--ink2)}
.ym .btn_atd.text-orange-300{color:var(--ac)}
.ym .btn_atd.text-orange-300 svg{fill:currentColor}


/* ── 9. ページ送り（Yii の LinkPager が出す ul.pager をそのまま使う） ─────── */
.ym ul.pager{display:flex;justify-content:center;gap:6px;padding:18px 16px 26px;margin:0;list-style:none;flex-wrap:wrap}
.ym ul.pager li{margin:0}
.ym ul.pager li a,.ym ul.pager li span{min-width:40px;height:40px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:var(--rs);font-size:14px;font-weight:600}
.ym ul.pager li.active span,.ym ul.pager li.active a{background:var(--ac);border-color:var(--ac);color:#fff}
.ym ul.pager li.disabled:not(.active) span{color:var(--line)}
/* マイページのページ送り（library.js が作るボタン） */
.ym-lpager{display:flex;justify-content:center;gap:6px;padding:18px 16px 26px;flex-wrap:wrap}
.ym-lpager button{min-width:40px;height:40px;padding:0 10px;border:1px solid var(--line);background:#fff;border-radius:var(--rs);font-size:14px;font-weight:600}
.ym-lpager button.is-on{background:var(--ac);border-color:var(--ac);color:#fff}
.ym-lpager button:disabled{color:var(--line)}


/* ── 10. 読み放題の箱（MAVの「FANZA TV」の箱と同じ形） ─────────────────── */
.ym-box{margin:10px 16px 6px;background:#fff;border:1px solid var(--line);border-radius:var(--rm);padding:12px 12px 10px;max-width:520px}
.ym-box p{margin:0 0 8px;font-size:13px;font-weight:700;display:flex;gap:6px;align-items:flex-start;line-height:1.45}
.ym-box a.ym-rb{display:block;height:44px;line-height:44px;text-align:center;background:var(--red);color:#fff;font-weight:800;font-size:15px;border-radius:var(--rs)}
@media (min-width:768px){.ym-box{margin:4px auto 10px}}


/* ── 11. 作品ページ ───────────────────────────────────────────────── */
.ym-vw{max-width:760px;margin:0 auto}
.ym-vw .ym-crumb{padding-left:16px;padding-right:16px}  /* 作品ページは本文と同じ左端にそろえる */
.ym-vh{font-size:18px;font-weight:800;line-height:1.45;margin:10px 16px 6px}
.ym-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--ink2);margin:0 16px 10px}
.ym-meta b{color:var(--ink)}
.ym-act{display:flex;align-items:center;gap:8px;margin:0 16px 10px;flex-wrap:wrap}
.ym .ym-pill{height:34px;padding:0 14px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;background:#fff}
.ym-pill svg{width:16px;height:16px}
.ym .ym-pill.btn_atd.text-orange-300{border-color:var(--ac);background:var(--acs)}
.ym a.ym-cta{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;background:var(--cta);color:#fff;font-weight:800;font-size:14px;border-radius:var(--rs);margin-left:auto}
.ym a.ym-cta.is-big{display:flex;width:100%;height:50px;font-size:16px;margin:0}
.ym-tags{margin:0 16px 12px}
.ym-syn{background:var(--face);border-radius:var(--rm);margin:0 16px 14px;padding:12px 14px}
.ym-syn h2{margin:0 0 6px;font-size:12px;color:var(--ink2);font-weight:600}
.ym-syn p{margin:0;font-size:14px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ym-syn.is-open p{display:block}
.ym-syn button{display:block;margin:6px auto 0;font-size:13px;font-weight:700}
.ym-bar{display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-weight:800;font-size:15px;padding:11px 14px;margin:0 16px;border-radius:var(--rs) var(--rs) 0 0}
.ym-bar small{font-weight:600;color:#C7C7CC;font-size:12px;margin-left:auto}
/* ふつうのページ割りの漫画: 1枚ずつ分けて見せる（白い余白16px＋各ページに細い枠）。
   2026-10-22 運営「1枚1枚の画像がつながってしまっている。繋ぎたいのは縦読みの時だけ」→ 8pxの黒い線では分かれて見えなかったため */
.ym-reader{display:flex;flex-direction:column;gap:16px;background:#fff;margin:0 16px;padding:12px 0}
.ym-reader img{width:100%;height:auto;min-height:200px;background:var(--press);border:1px solid var(--line)}
/* 縦読み（タテヨミ）だけ: すき間・枠なしで1本につなぐ。題名に「タテヨミ」（view.php）か、画像の縦÷横が1.6以上（yomumiru-v2.js）で付く */
.ym-reader.is-tate{gap:0;background:#fff;padding:0}
.ym-reader.is-tate img{background:#fff;border:0}
.ym-reader.is-tate img+img{margin-top:-1px}  /* 画像の境目に細い線が出ないよう1px重ねる */
.ym-prog{position:fixed;right:12px;bottom:calc(68px + env(safe-area-inset-bottom));z-index:25;background:rgba(29,29,31,.86);color:#fff;font-size:12px;font-weight:700;padding:7px 11px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none}
.ym-prog.is-show{opacity:1}
@media (min-width:768px){.ym-prog{bottom:20px}}
.ym-end{margin:8px 16px 18px;border:1px solid var(--line);border-radius:var(--rm);padding:16px 14px;background:#fff}  /* 2026-10-27 上の「試し読み」の帯を外したので、四方に枠と角丸を付けた独立のカードにした */
.ym-end .ym-lead{font-size:16px;font-weight:800;text-align:center;margin:0 0 4px}
.ym-end .ym-note{font-size:12px;color:var(--ink2);text-align:center;margin:0 0 14px}
.ym-endw{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.ym-endw img{width:84px;aspect-ratio:9/13;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex:none}
.ym-endw div{font-size:13px;line-height:1.5}
.ym-endw p{margin:0}
.ym-endw p:first-child{font-size:14px;font-weight:700;margin-bottom:4px}
.ym-sale{margin:0 auto 8px;width:max-content;max-width:100%;background:#e65c23;color:#fff;font-size:14px;font-weight:700;padding:4px 12px;border-radius:var(--rs)}  /* セールの割引表示（今と同じ色） */
.ym-bnr{margin:0 16px 22px}
.ym-bnr img{margin:0 auto;width:100%;max-width:600px;height:auto;border-radius:var(--rs)}
.ym-blk{margin:0 16px 22px}
.ym-blk h2{font-size:16px;font-weight:800;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.ym-blk .ym-grid{padding:0}


/* ── 12. マイページ（/favo /atd） ───────────────────────────────────── */
.ym-empty{grid-column:1/-1;text-align:center;color:var(--ink2);font-size:14px;line-height:1.8;padding:40px 16px}


/* ── 13. リンクページ（/link。MAVの /link の mv-links と同じ） ──────────── */
.ym-lk{padding:0 0 32px}
.ym-lk-lead{margin:2px 16px 16px;font-size:13.5px;line-height:1.8;color:var(--ink2);letter-spacing:0}
.ym-lk-list{list-style:none;margin:0 16px;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.ym-lk-card{position:relative;display:flex;align-items:flex-start;gap:14px;margin:0;padding:16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--rm);transition:background-color .15s ease-out}
.ym-lk-card:active,.ym-lk-card:hover{background:var(--press)}
.ym-lk-ic{flex:0 0 48px;height:48px;border-radius:12px;background:var(--acs);color:var(--ac);display:flex;align-items:center;justify-content:center}
.ym-lk-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ym-lk-tx{flex:1;min-width:0}
.ym-lk-name{display:block;font-size:17px;font-weight:700;line-height:1.35;color:var(--ink)}
.ym-lk-name::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ym-lk-desc{margin:4px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink2);letter-spacing:0}
.ym-lk-meta{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;line-height:1;color:var(--ink2)}
.ym-lk-chip{display:inline-block;height:22px;line-height:22px;padding:0 9px;border-radius:999px;background:var(--face);color:var(--ink);font-weight:600}
.ym-lk-ar{flex:0 0 auto;align-self:center;color:var(--ink2);transition:transform .15s ease-out;pointer-events:none}
.ym-lk-ar svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ym-lk-card:hover .ym-lk-ar{color:var(--ink);transform:translate(2px,-2px)}
@media (min-width:768px){.ym-lk-lead{margin:2px 0 20px;max-width:760px;font-size:14px;color:var(--ink)}.ym-lk-list{margin:0;grid-template-columns:repeat(2,1fr);gap:16px}.ym-lk-card{padding:18px 20px}.ym-lk-desc{color:#5A5A5E}}


/* ── 14. 小窓（common.js の #modalCategory ＝ジャンル／#modalWord ＝検索） ─── */
.ym-modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center}
.ym-modal.hidden{display:none}
.ym-sheet{position:relative;width:100%;max-width:640px;max-height:82vh;overflow-y:auto;background:#fff;border-radius:16px 16px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
@media (min-width:768px){.ym-modal{align-items:center}.ym-sheet{border-radius:16px;max-height:80vh}}
.ym-sheet-t{font-size:17px;font-weight:800;margin:0 0 14px}
.ym-x{position:absolute;right:10px;top:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:999px;color:var(--ink2)}
.ym-srch{display:flex;gap:8px;margin:0}
.ym-srch input{flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:var(--rm);padding:0 14px;font-size:16px;background:#fff;color:var(--ink)}
.ym-srch button{height:44px;padding:0 16px;background:var(--ac);color:#fff;font-weight:800;border-radius:var(--rm)}


/* ── 14-2. 今のテンプレートのままのページ（お問い合わせ・サイトについて・プライバシー等）
   黒い背景を前提にした白い文字を、白い背景で読める色に直す。新しい画面の btn_atd（text-white を状態に使う）は除く */
.ym .ym-main .text-white:not(.btn_atd){color:var(--ink)}
.ym .ym-main .text-gray-300{color:var(--ink2)}
.ym .ym-main .bg-black{background:var(--face)}
.ym .ym-main .hover\:text-gray-300:hover{color:var(--ink2)}
.ym .ym-main > .container,.ym .ym-main > div > .container{padding:0 16px}
@media (min-width:768px){.ym .ym-main > .container,.ym .ym-main > div > .container{padding:0}}


/* ── 15. 下部ナビ（〜767px。MAVと同じ: 56px・選択中はオレンジ） ──────────── */
.ym-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--line);font-size:11px}
.ym-nav a,.ym-nav button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink2);font-size:11px}
.ym-nav .is-on{color:var(--ac)}
@media (min-width:768px){.ym-nav{display:none}}


/* ── 15-2. いいね・後で見るを押したら、ボタンが弾み、マイページが1回光る（MAVの mav-v2.css と同じ値。2026-10-22） ──
   下部ナビ（スマホ）は「マイページ」、PCヘッダーは押した方（高く評価／後で見る）。a.ym-my に JS が is-lit を付けて1回だけ動かす */
.ym-nav .ym-box,.ym-pch .ym-box{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;position:relative;transition:background-color .18s ease-out,color .18s ease-out}
.ym-nav .ym-box svg,.ym-pch .ym-box svg{position:relative;z-index:1;flex:none}  /* flex:none が無いと箱の中でアイコンが4pxに縮む（2026-10-22 実測） */
.ym-nav .ym-ring,.ym-pch .ym-ring{position:absolute;inset:0;border-radius:999px;border:2px solid var(--ac);opacity:0;pointer-events:none}
.ym-nav a.is-lit,.ym-pch nav a.is-lit{color:var(--ac)}
.ym-nav a.is-lit .ym-box,.ym-pch nav a.is-lit .ym-box{background:var(--ac);color:#FFFFFF;animation:ym-pulse 520ms cubic-bezier(.2,0,0,1) 100ms 1 both}
.ym-nav a.is-lit .ym-ring,.ym-pch nav a.is-lit .ym-ring{animation:ym-ripple 600ms cubic-bezier(.2,0,0,1) 100ms 1 both}
@keyframes ym-pulse{0%{transform:scale(1)}35%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes ym-ripple{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.1);opacity:0}}
.ym .btn_favo.is-pop svg,.ym .btn_atd.is-pop svg{animation:ym-pop 240ms cubic-bezier(.2,0,0,1) 1}
@keyframes ym-pop{0%{transform:scale(1)}45%{transform:scale(1.25)}100%{transform:scale(1)}}
/* 動きを減らす設定の端末（OSの「視差効果を減らす」）では、光る・弾むを止める（MAVと同じ） */
@media (prefers-reduced-motion: reduce){
  .ym-nav .ym-box,.ym-pch .ym-box{transition:none}
  .ym .btn_favo.is-pop svg,.ym .btn_atd.is-pop svg,.ym-nav a.is-lit .ym-box,.ym-nav a.is-lit .ym-ring,.ym-pch nav a.is-lit .ym-box,.ym-pch nav a.is-lit .ym-ring{animation:none}
}


/* ── 16. フッター・上へ戻る ──────────────────────────────────────── */
.ym-ftr{padding:20px 16px 24px;text-align:center;font-size:12px;background:var(--face);border-top:1px solid var(--line);color:var(--ink2);line-height:1.7}
.ym-ftr .ym-lg{display:block;font-size:16px;margin-bottom:10px}
.ym-sis{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.ym-sis a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:13px}
.ym-sis a i{font-style:normal;color:var(--ac)}
.ym-ftr nav a{margin:0 8px;font-weight:600;color:var(--ink)}
.ym-ftr p{margin:10px 0 0}
.ym #pagetop{position:fixed;right:12px;bottom:calc(112px + env(safe-area-inset-bottom));z-index:24;width:40px;height:40px;fill:var(--ac);background:#fff;border-radius:999px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
.ym #pagetop.is-show{opacity:1;pointer-events:auto}  /* 1画面ぶん読み進めてから出す（yomumiru-v2.js）。最初の画面でカードに重ならないように */
@media (min-width:768px){.ym #pagetop{bottom:64px}}