/* ==========================================================================
   aho-ren-portrait.css
   阿呆連 人物ポートレート特集「そのひとは、なにでできてるか」専用スタイル
   --------------------------------------------------------------------------
   ・すべて .aho-ren-portrait ラッパー配下にスコープ。基本テーマ(GeneratePress)や
     他ページには一切影響しません（純粋な足し算）。
   ・GeneratePress標準クラスとの衝突回避のため、記事側の
       entry-content → np-content ／ entry-title → np-title ／ entry-sub → np-sub
     にリネーム。HTML側も同じクラス名で出力すること。
   ・フォント読み込み(Google Fonts)とリールのJSは別ピース（このCSSには含めない）。
   ========================================================================== */

.aho-ren-portrait{
  --m-font-sans:"Urbanist",sans-serif;
  --m-font-serif:"Noto Serif JP",serif;
  --ink:#231815; --ink-soft:#4a403b; --ink-muted:#8c8079;
  --paper:#fff; --paper-tint:#f7f2ec;
  --shu:#b5332b; --shu-soft:#f4e0db; --line:#e7e0d8;
}

/* ページ土台：テーマの白コンテナに同化（白カードの入れ子＝3層を避ける） */
.aho-ren-portrait .page{max-width:720px;margin:0 auto}
/* テーマ側entry-contentの上マージンを詰める（タイトル上の空きすぎ対策） */
.entry-content:has(.aho-ren-portrait){margin-top:0}

/* 記事ヘッダー */
.aho-ren-portrait .c-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 22px}
.aho-ren-portrait .c-eyebrow__ja{font-family:var(--m-font-serif);font-weight:600;font-size:15px;color:var(--shu);letter-spacing:.08em}
.aho-ren-portrait .c-eyebrow__bar{width:1px;height:14px;background:var(--line)}
.aho-ren-portrait .c-eyebrow__en{font-family:var(--m-font-sans);font-weight:600;font-size:12px;color:var(--ink-muted);letter-spacing:.18em}
.aho-ren-portrait .np-title{font-family:var(--m-font-serif);margin:0 0 24px}
.aho-ren-portrait .np-title .et-hook{display:block;font-weight:700;font-size:clamp(1.9rem,4.4vw,2.7rem);line-height:1.42;color:var(--ink);margin:0 0 10px}
.aho-ren-portrait .np-title .et-desc{display:block;font-weight:600;font-size:clamp(1rem,2vw,1.15rem);color:var(--ink-soft);line-height:1.6}
.aho-ren-portrait .np-sub{font-family:var(--m-font-serif);font-weight:600;font-size:clamp(1rem,2vw,1.15rem);color:var(--ink-soft);margin:0 0 24px}
.aho-ren-portrait .c-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--m-font-sans);font-size:13px;color:var(--ink-muted);letter-spacing:.04em;padding-bottom:24px;border-bottom:1px solid var(--line);margin:0 0 8px}
.aho-ren-portrait .c-eyecatch{margin:32px 0 6px}
.aho-ren-portrait .c-eyecatch .ph{aspect-ratio:1200/630}
.aho-ren-portrait .c-eyecatch figcaption{font-family:var(--m-font-sans);font-size:12.5px;color:var(--ink-muted);margin-top:10px;padding-left:14px;border-left:2px solid var(--shu)}
.aho-ren-portrait .c-byline{display:flex;gap:16px;align-items:center;margin:0 0 50px;padding:24px 0 0;border-top:1px solid var(--line)}
.aho-ren-portrait .c-byline__av{width:52px;height:52px;border-radius:50%;background:var(--paper-tint) url('https://nagaratabi.com/wp-content/uploads/2026/07/favicon.png') center/cover no-repeat;flex:0 0 auto}
.aho-ren-portrait .c-byline__name{font-family:var(--m-font-serif);font-weight:700;font-size:15px;color:var(--ink);margin:0}
.aho-ren-portrait .c-byline__role{font-family:var(--m-font-sans);font-size:12.5px;color:var(--ink-muted);margin:3px 0 0}

/* 本文タイポグラフィ */
.aho-ren-portrait .np-content{font-family:var(--m-font-serif);font-weight:400;font-size:1.0625rem;line-height:2.0;color:var(--ink)}
.aho-ren-portrait .np-content > p{margin:0 0 1.6em}
.aho-ren-portrait .np-content .lead{font-size:clamp(1.08rem,1.6vw,1.22rem);line-height:1.95;color:var(--ink-soft);margin:0 0 1.4em}
.aho-ren-portrait .np-content h2{font-family:var(--m-font-serif);font-weight:700;font-size:clamp(1.4rem,2.6vw,1.72rem);line-height:1.5;letter-spacing:.02em;color:var(--ink);margin:3em 0 1em}
.aho-ren-portrait .np-content h2::before{content:"";display:block;width:46px;height:6px;background:var(--shu);margin-bottom:18px}
.aho-ren-portrait .np-content h3{font-family:var(--m-font-serif);font-weight:700;font-size:1.22rem;line-height:1.6;color:var(--ink);margin:2.4em 0 .8em;padding-left:14px;border-left:3px solid var(--shu)}
.aho-ren-portrait .np-content em{font-style:normal;-webkit-text-emphasis:filled dot var(--ink);text-emphasis:filled dot var(--ink);text-emphasis-position:over right}
.aho-ren-portrait .np-content .marker{background:linear-gradient(transparent 58%, var(--shu-soft) 58%);padding:0 1px}
.aho-ren-portrait .np-content blockquote{position:relative;margin:2.4em 0;padding:6px 4px 6px 34px;border-left:6px solid var(--shu)}
.aho-ren-portrait .np-content blockquote p{font-family:var(--m-font-serif);font-size:clamp(1.18rem,2vw,1.42rem);line-height:1.85;color:var(--ink);margin:0 0 .5em}
.aho-ren-portrait .np-content blockquote p::before{content:"\300C";color:var(--shu)}
.aho-ren-portrait .np-content blockquote p::after{content:"\300D";color:var(--shu)}
.aho-ren-portrait .np-content blockquote cite{display:block;font-style:normal;font-family:var(--m-font-sans);font-size:13px;color:var(--ink-muted);margin-top:14px}
.aho-ren-portrait .np-content hr{border:0;text-align:center;margin:3em 0}
.aho-ren-portrait .np-content hr::before{content:"\30FB \30FB \30FB";color:var(--shu);letter-spacing:.4em}

/* 阿呆連とはバナー */
.aho-ren-portrait .np-content .c-refbanner{display:flex;align-items:center;gap:16px;background:var(--paper-tint);border-left:6px solid var(--shu);padding:18px 22px;margin:2.2em 0;text-decoration:none;transition:background .2s ease,box-shadow .2s ease}
.aho-ren-portrait .np-content .c-refbanner__t{font-family:var(--m-font-serif);font-weight:700;font-size:16px;color:var(--ink);margin:0}
.aho-ren-portrait .np-content .c-refbanner__d{font-family:var(--m-font-sans);font-size:12.5px;color:var(--ink-muted);margin:4px 0 0;display:block}
.aho-ren-portrait .np-content .c-refbanner__ar{margin-left:auto;color:var(--shu);font-size:20px;transition:transform .2s ease}
/* ホバー：クリックできる反応（色が変わる＋わずかに浮く＋矢印が右へ） */
.aho-ren-portrait .np-content .c-refbanner:hover{background:#efe3da;box-shadow:0 4px 16px rgba(35,24,21,.08)}
.aho-ren-portrait .np-content .c-refbanner:hover .c-refbanner__t{color:var(--shu)}
.aho-ren-portrait .np-content .c-refbanner:hover .c-refbanner__ar{transform:translateX(4px)}

/* ポジション図解 */
.aho-ren-portrait .np-content .c-pos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:1.2em 0}
.aho-ren-portrait .np-content .c-pos__card{border:1px solid var(--line);padding:10px;text-align:center;font-family:var(--m-font-sans);font-size:12px;color:var(--ink-muted)}
.aho-ren-portrait .np-content .c-pos__card.is-on{border:2px solid var(--shu);color:var(--shu);font-weight:600}

/* インタビュー吹き出し */
.aho-ren-portrait .np-content .iv-row{display:flex;gap:12px;margin:16px 0;align-items:flex-start}
.aho-ren-portrait .np-content .iv-av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:var(--m-font-sans);font-weight:600;font-size:9px;overflow:hidden;background-size:cover;background-position:center;color:var(--ink-muted)}
.aho-ren-portrait .np-content .iv-av.is-q{background:var(--paper-tint) url("https://nagaratabi.com/wp-content/uploads/2026/07/favicon.png") center/cover no-repeat}
.aho-ren-portrait .np-content .iv-av.is-a{background:#e7ddd2;color:var(--ink-muted)}
.aho-ren-portrait .np-content .iv-body{flex:1;min-width:0}
.aho-ren-portrait .np-content .iv-name{font-family:var(--m-font-sans);font-size:12px;letter-spacing:.06em;color:var(--ink-muted);margin:0 0 5px}
.aho-ren-portrait .np-content .iv-bubble{font-family:"Zen Kaku Gothic New",sans-serif;padding:13px 17px;border-radius:16px;line-height:1.95;margin:0}
.aho-ren-portrait .np-content .iv-bubble.is-q{background:#f2ede7;color:var(--ink-soft)}
.aho-ren-portrait .np-content .iv-bubble.is-a{background:#faf3ee;border:1px solid var(--shu-soft);color:var(--ink)}

/* 成分タグ */
.aho-ren-portrait .np-content .c-tag{display:inline-block;background:var(--paper-tint);border:1px solid var(--line);font-family:var(--m-font-sans);font-size:12.5px;color:var(--ink-soft);padding:10px 14px;border-radius:8px;margin:0 0 1em}

.aho-ren-portrait .rednote{color:#b5332b;font-family:var(--m-font-sans);font-size:12px}

/* 動画・画像枠 */
.aho-ren-portrait .vid{display:flex;gap:14px;align-items:center;background:var(--paper-tint);border:1px solid var(--line);border-radius:10px;padding:12px 15px;margin:1.4em 0}
.aho-ren-portrait .vid .thumb{width:56px;aspect-ratio:9/16;background:#111;border-radius:7px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;text-align:center;line-height:1.4;padding:5px}
.aho-ren-portrait .vid .txt{font-family:var(--m-font-sans);font-size:12.5px;line-height:1.6;color:var(--ink-soft)}
.aho-ren-portrait .vid .txt b{color:var(--ink)}
.aho-ren-portrait .vid .txt .sub{color:var(--ink-muted);font-size:11.5px}
/* 作品ショート埋め込み（YouTube Shorts＝縦9:16・中央寄せ） */
.aho-ren-portrait .vid-embed{display:flex;justify-content:center;margin:1.6em 0}
.aho-ren-portrait .vid-embed iframe{width:min(320px,100%);aspect-ratio:9/16;height:auto;border:0;border-radius:12px;background:#111}
.aho-ren-portrait .ph{background:#ece6df;color:var(--ink-muted);display:flex;align-items:center;justify-content:center;font-family:var(--m-font-sans);font-size:12.5px}
.aho-ren-portrait .secimg{aspect-ratio:16/9;margin:1.4em 0}

/* 記事内の実画像：src と alt を入れるだけで整う（インライン不要） */
/* アイキャッチ／見出し下の大きい画像（figure.c-eyecatch のimg） */
.aho-ren-portrait .c-eyecatch img{width:100%;height:auto;display:block}
/* 話者アイコン（丸くフィット。iv-av の中に img を置くだけ） */
.aho-ren-portrait .np-content .iv-av img{width:100%;height:100%;object-fit:cover;display:block}
/* インタビュー内などに小さく置く写真（figure.iv-photo） */
.aho-ren-portrait .np-content .iv-photo{max-width:300px;margin:1.2em auto}
.aho-ren-portrait .np-content .iv-photo img{width:100%;height:auto;display:block;border-radius:10px}

@media(max-width:520px){
  .aho-ren-portrait .np-content{font-size:1.02rem}
  .aho-ren-portrait .np-content .iv-av{width:34px;height:34px}
}

/* 顔ぶれカード（横スクロールのリール＋ドット） */
.aho-ren-portrait .np-content .reel-hint{font-family:var(--m-font-sans);font-size:11.5px;color:var(--ink-muted);margin:0 0 8px}
.aho-ren-portrait .np-content .reel{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:2px 2px 14px;margin-left:calc(clamp(20px,5vw,56px) * -1);margin-right:calc(clamp(20px,5vw,56px) * -1);padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px);-webkit-overflow-scrolling:touch}
.aho-ren-portrait .np-content .reel{scrollbar-width:none;-ms-overflow-style:none;cursor:grab;user-select:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 36px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 36px,#000 calc(100% - 48px),transparent 100%)}
.aho-ren-portrait .np-content .reel:active{cursor:grabbing}
.aho-ren-portrait .np-content .reel::-webkit-scrollbar{display:none}
.aho-ren-portrait .np-content .chip{scroll-snap-align:start;flex:0 0 150px;background:var(--paper-tint);border:1px solid var(--line);border-radius:11px;padding:14px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:5px}
.aho-ren-portrait .np-content .chip .nm{font-family:var(--m-font-serif);font-weight:700;font-size:15px}
.aho-ren-portrait .np-content .chip .rl{font-family:var(--m-font-sans);font-size:11.5px;color:var(--ink-soft);line-height:1.5}
.aho-ren-portrait .np-content .chip .go{font-family:var(--m-font-sans);font-size:11px;color:var(--shu);margin-top:2px}
.aho-ren-portrait .np-content .chip.now{background:#fff;border:2px solid var(--shu)}
.aho-ren-portrait .np-content .chip.now .tagnow{font-family:var(--m-font-sans);font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--shu);background:var(--shu-soft);align-self:flex-start;padding:2px 7px;border-radius:10px}
.aho-ren-portrait .np-content .chip.soon{opacity:.55;cursor:default}
.aho-ren-portrait .np-content .chip.soon .soon-tag{font-family:var(--m-font-sans);font-size:11px;color:var(--ink-soft);margin-top:2px}
.aho-ren-portrait .np-content .series-nav{margin:1.2em 0 0}
.aho-ren-portrait .np-content .reel-dots{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:16px 0 2px}
.aho-ren-portrait .np-content .reel-dots .dot{width:8px;height:8px;border-radius:50%;background:#d9cfc4;border:0;padding:0;cursor:pointer;transition:transform .2s,background .2s}
.aho-ren-portrait .np-content .reel-dots .dot.is-now{background:var(--shu);transform:scale(1.35)}