/* 公開ポートフォリオ(.pfout)で使うフォントを読み込む。公開ページ/詳細ページは
   base.css を読まないため、ここで読み込まないと作家が選んだ書体（Quicksand 等）が
   端末のシステムフォントにフォールバックして反映されない。@import は他ルールより前に置く。 */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=M+PLUS+Rounded+1c:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;700&family=Shippori+Mincho:wght@400;500;700&family=Playfair+Display:wght@400;500;600;700&family=Lora:wght@400;500;600;700&family=EB+Garamond:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
.page-body{max-width:none;padding:0}
/* 公開ページ（body直下に .pfout）では、body既定マージン(8px)で外周に白枠が出る。
   それを除去する。プレビューは .pfout-stage でラップされ body 直下ではないため
   このセレクタに当たらず影響しない。:has 非対応でも下記 body{margin:0} 相当は無害。 */
body:has(>.pfout){margin:0;padding:0}
.pfout{min-height:100vh;width:100%;box-sizing:border-box;background-color:var(--pf-bg);color:var(--pf-primary);font-family:'Zen Maru Gothic',sans-serif;
  /* 本文色：作家テーマ(--pf-primary)をしっかり乗せる。見出しと同系色にしつつ、
     本文は少しだけ締めて（黒を足して）階層差を出す。
     フォールバック(color-mix非対応)も primary そのものに寄せておく。 */
  --pf-body: var(--pf-primary);
  --pf-muted: var(--pf-primary)}
@supports (color:color-mix(in srgb,red,blue)){
  .pfout{
    --pf-body: color-mix(in srgb, var(--pf-primary) 82%, #000 18%);
    --pf-muted: color-mix(in srgb, var(--pf-primary) 70%, #000 30%)}
}
.pfout-font-georgia,.pfout-font-luxury,.pfout-font-high{font-family:Georgia,'Times New Roman',serif;letter-spacing:.01em}
.pfout-font-hiragino_mincho,.pfout-font-editorial{font-family:'Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;letter-spacing:.03em}
.pfout-font-quicksand,.pfout-font-balance,.pfout-font-middle{font-family:Quicksand,'M PLUS Rounded 1c','Hiragino Maru Gothic ProN',system-ui,sans-serif}
.pfout-font-zen_maru_gothic,.pfout-font-casual{font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif}
.pfout-font-helvetica_neue,.pfout-font-minimal{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','Noto Sans JP',sans-serif}
.pfout-font-noto_sans_jp{font-family:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif}
.pfout-font-noto_serif_jp{font-family:'Noto Serif JP','Yu Mincho',YuMincho,serif;letter-spacing:.02em}
.pfout-font-shippori_mincho{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;letter-spacing:.03em}
.pfout-font-m_plus_rounded_1c{font-family:'M PLUS Rounded 1c','Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif}
.pfout-font-inter{font-family:Inter,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Noto Sans JP',sans-serif}
.pfout-font-lora{font-family:Lora,Georgia,'Noto Serif JP',serif;letter-spacing:.01em}
.pfout-font-playfair_display{font-family:'Playfair Display','Noto Serif JP',Georgia,serif;letter-spacing:.01em}
.pfout-font-cormorant_garamond{font-family:'Cormorant Garamond','Noto Serif JP',Georgia,serif;letter-spacing:.02em}
/* 追加テンプレ用フォント別名（font_tone に型名が来た場合のフォールバック） */
.pfout-font-editorial{font-family:'Playfair Display','Noto Serif JP',Georgia,serif;letter-spacing:.02em}
.pfout-font-pop{font-family:'M PLUS Rounded 1c','Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif}
.pfout-font-feminine{font-family:'Cormorant Garamond','Noto Serif JP',Georgia,serif;letter-spacing:.03em}
.pfout-font-fancy{font-family:'M PLUS Rounded 1c','Zen Maru Gothic',sans-serif}
/* =====================================================================
   テンプレ別の「骨格＋世界観」。同じデータでも、別の作家が別のデザイナーに
   頼んだ“別世界のサイト”に見えるよう、ヒーロー・配色の使い方・タイポ・
   装飾言語（番号/罫線/面塗り/傾き/点線…）までテンプレ固有にする。
   色は作家テーマ --pf-primary / --pf-accent / --pf-bg に従う。
   ---------------------------------------------------------------------
   high      = 静謐な美術館：余白を贅沢に、極大セリフ、ヘアライン、作品が主役
   casual    = クラフトマーケット：温かい紙地、手書き風タグ、ナチュラルな影
   middle    = 信頼のモダンEC：大きめヒーロー＋クリーンなグリッド
   editorial = 雑誌の特集：左に超特大タイトル固定＋作品に 01/02 の通し番号
   pop       = ステッカーポップ：アクセント色を全面背景に、白カード＋色枠、傾き
   minimal   = タイポ索引：番号付きの罫線リスト、見出しは極小、装飾ゼロ
   feminine  = ロマンティック：パステル地、楕円画像、点線・♡、中央寄せセリフ
   fancy     = キャンディ：強い丸み、ドット背景、はずむ配置、ぷっくり
   ===================================================================== */
/* セクション見出しの共通既定（テンプレ別 h2 はこの後に置き、上書きする）。
   ※ .pfout-X と .pfout は同一要素のため、テンプレ別は .pfout-X h2 と書く。
     同詳細度なのでソース順で勝つよう、この共通定義を先に置く。 */
.pfout h2{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pf-accent);margin:0 0 .9rem;font-weight:800}

/* ===== 動き：初回表示で作品・見出しがふわっと立ち上がる =====
   IntersectionObserver不要の純CSS。作品は出現を少しずつ遅らせて“流れ”を作る。
   全ブラウザ対応。prefers-reduced-motion では一切動かさない。 */
@media (prefers-reduced-motion: no-preference){
  @keyframes pfRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .pfout-site-head .pfout-identity,.pfout-site-brand{animation:pfRise .7s cubic-bezier(.2,.8,.2,1) both}
  .pfout-site-head h1{animation:pfRise .7s cubic-bezier(.2,.8,.2,1) .06s both}
  .pfout-site-lead{animation:pfRise .7s cubic-bezier(.2,.8,.2,1) .12s both}
  .pfout-section-head{animation:pfRise .6s cubic-bezier(.2,.8,.2,1) both}
  .pfout-grid>.pfout-work{animation:pfRise .6s cubic-bezier(.2,.8,.2,1) both}
  /* グリッド内の作品を少しずつ遅延（最初の8件まで段階化、以降は同タイミング） */
  .pfout-grid>.pfout-work:nth-child(1){animation-delay:.04s}
  .pfout-grid>.pfout-work:nth-child(2){animation-delay:.10s}
  .pfout-grid>.pfout-work:nth-child(3){animation-delay:.16s}
  .pfout-grid>.pfout-work:nth-child(4){animation-delay:.22s}
  .pfout-grid>.pfout-work:nth-child(5){animation-delay:.28s}
  .pfout-grid>.pfout-work:nth-child(6){animation-delay:.34s}
  .pfout-grid>.pfout-work:nth-child(7){animation-delay:.40s}
  .pfout-grid>.pfout-work:nth-child(n+8){animation-delay:.46s}
}

/* ===================== high: 静謐な美術館 ===================== */
.pfout-high{--pf-bg:#f6f4ef}
.pfout-high .pfout-site-head{padding-top:4.5rem;padding-bottom:2.2rem;text-align:center;border-bottom:1px solid color-mix(in srgb,var(--pf-primary) 18%,transparent)}
.pfout-high .pfout-brand,.pfout-high .pfout-identity{justify-content:center;margin-left:auto;margin-right:auto}
.pfout-high .pfout-site-brand strong{font-weight:400;letter-spacing:.34em;font-size:.7rem;text-transform:uppercase}
.pfout-high .pfout-site-head h1{font-size:clamp(2.2rem,6vw,3.8rem);font-weight:400;letter-spacing:.08em;line-height:1.28;margin-inline:auto}
.pfout-high .pfout-site-lead{margin:.9rem auto 0;text-align:center;font-style:italic;opacity:.72}
.pfout-high .pfout-works:first-of-type{padding-top:2.4rem}
.pfout-high h2{text-align:center;letter-spacing:.4em;font-weight:400;font-size:.6rem;opacity:.7}
.pfout-high .pfout-section-head{justify-content:center}
.pfout-high .pfout-work{border-radius:0;background:transparent;border-color:transparent}
.pfout-high .pfout-work:hover{transform:none;box-shadow:none}
.pfout-high .pfout-work:hover .pfout-work-img img{transform:scale(1.03)}
.pfout-high .pfout-work h3{font-size:.82rem;font-weight:400;letter-spacing:.06em;text-align:center;margin-top:.2rem}
.pfout-high .pfout-work-body{text-align:center;padding-top:.9rem}
.pfout-high .pfout-shop-badges{justify-content:center}
.pfout-high .pfout-about{text-align:center}
.pfout-high .pfout-about p{margin-left:auto;margin-right:auto;font-style:italic;line-height:2}

/* ===================== casual: クラフトマーケット ===================== */
.pfout-casual .pfout-site-head h1{font-weight:700}
.pfout-casual h2{font-weight:800}
.pfout-casual .pfout-work{border-radius:16px;border:1px solid color-mix(in srgb,var(--pf-primary) 8%,transparent);box-shadow:0 6px 20px rgba(0,0,0,.06)}
/* 作品名の前に手書き風の小さな印を添える */
.pfout-casual .pfout-work h3::before{content:"✦ ";color:var(--pf-accent);font-size:.8em}

/* ===================== middle: 信頼のモダンEC ===================== */
.pfout-middle .pfout-site-head{padding-top:2.4rem}
.pfout-middle .pfout-site-head h1{font-size:2rem;font-weight:700}
.pfout-middle .pfout-work{border-radius:10px}
.pfout-middle h2{display:inline-block;border-bottom:2px solid var(--pf-accent);padding-bottom:.25rem}

/* ===================== editorial: 雑誌の特集（番号つき） ===================== */
.pfout-editorial .pfout-site-head h1{font-size:clamp(2.6rem,7vw,4.2rem);font-weight:400;letter-spacing:.01em;line-height:1.06}
.pfout-editorial .pfout-site-head{padding-top:2.8rem;padding-bottom:.4rem}
.pfout-editorial .pfout-site-brand strong{letter-spacing:.28em;font-weight:400;font-size:.62rem;text-transform:uppercase}
.pfout-editorial .pfout-site-lead{font-style:italic;font-size:.92rem;max-width:560px;line-height:1.9}
.pfout-editorial h2{letter-spacing:.3em;font-weight:400;font-size:.6rem}
.pfout-editorial .pfout-section-head{border-top:2px solid var(--pf-primary);padding-top:.6rem}
.pfout-editorial .pfout-work{border-radius:0;background:transparent;border-color:transparent}
.pfout-editorial .pfout-work-img{aspect-ratio:3/4}
.pfout-editorial .pfout-work:hover{transform:none;box-shadow:none}
.pfout-editorial .pfout-work-body{position:relative;padding-top:1.4rem;border-top:1px solid color-mix(in srgb,var(--pf-primary) 28%,transparent);margin-top:.7rem}
/* 作品に 01 / 02 ... の通し番号（誌面のクセ）。CSSカウンタで自動採番 */
.pfout-editorial .pfout-grid-editorial{counter-reset:pfwork}
.pfout-editorial .pfout-grid-editorial>.pfout-work{counter-increment:pfwork}
.pfout-editorial .pfout-work-body::before{content:counter(pfwork,decimal-leading-zero);position:absolute;top:.8rem;left:0;font-family:Georgia,serif;font-size:.7rem;letter-spacing:.08em;color:var(--pf-accent);font-weight:700}
.pfout-editorial .pfout-work h3{font-weight:400;letter-spacing:.03em;padding-left:1.9rem}
.pfout-editorial .pfout-work .pfout-shop-badges{padding-left:1.9rem}
.pfout-editorial .pfout-about p{font-size:.96rem;line-height:2.05;max-width:620px}
/* 作品を互い違いに（誌面のリズム）。偶数番目を少し下げる */
.pfout-editorial .pfout-grid-editorial>.pfout-work:nth-child(even){margin-top:2.6rem}
/* 1点目を主役に大きく見せて“間”を作る（誌面の見開き感） */
.pfout-editorial .pfout-grid-editorial>.pfout-work:first-child{grid-column:1 / -1;margin-top:0}
.pfout-editorial .pfout-grid-editorial>.pfout-work:first-child .pfout-work-img{aspect-ratio:16/10}
.pfout-editorial .pfout-grid-editorial>.pfout-work:first-child .pfout-work-body{display:inline-flex;align-items:baseline;gap:1.2rem;border-top-width:2px}
.pfout-editorial .pfout-grid-editorial>.pfout-work:first-child h3{font-size:1.4rem;padding-left:2.2rem}
.pfout-editorial .pfout-grid-editorial>.pfout-work:first-child .pfout-work-body::before{font-size:.9rem}

/* ===================== pop: ステッカーポップ（全面アクセント背景） ===================== */
.pfout-pop{background-color:var(--pf-accent)}
.pfout-pop .pfout-site-head{background:transparent;max-width:none;margin:0;padding:2.6rem 1rem 1.4rem;text-align:center}
.pfout-pop .pfout-site-head h1{font-size:clamp(2rem,6.5vw,3.4rem);font-weight:800;line-height:1.12}
.pfout-pop .pfout-site-head h1,.pfout-pop .pfout-site-lead,.pfout-pop .pfout-site-brand strong{color:#fff}
.pfout-pop .pfout-site-brand,.pfout-pop .pfout-identity{justify-content:center;margin-left:auto;margin-right:auto}
.pfout-pop .pfout-site-head h1{margin-inline:auto}
.pfout-pop .pfout-site-lead{opacity:.96;margin-left:auto;margin-right:auto}
/* 本体は白い角丸パネルに乗せて“紙もの感”を出す */
.pfout-pop main{background:var(--pf-bg);border-radius:28px 28px 0 0;margin-top:.4rem;padding-top:1.8rem;box-shadow:0 -10px 30px rgba(0,0,0,.12)}
.pfout-pop .pfout-works,.pfout-pop .pfout-about,.pfout-pop .pfout-contact,.pfout-pop .pfout-social-section{border-top:none}
.pfout-pop h2{display:inline-block;letter-spacing:.06em;font-weight:800;background:var(--pf-accent);color:#fff;padding:.2rem .7rem;border-radius:999px;transform:rotate(-2deg)}
/* 白カードにアクセント色の枠＋オフセット影＝ステッカー風 */
.pfout-pop .pfout-work{border-radius:16px;border:2px solid var(--pf-primary);background:#fff;box-shadow:4px 4px 0 var(--pf-accent)}
.pfout-pop .pfout-work:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--pf-accent)}
.pfout-pop .pfout-work-img{aspect-ratio:1/1}
.pfout-pop .pfout-work-body{padding:.6rem .7rem .8rem}
.pfout-pop .pfout-work h3{font-weight:800}
.pfout-pop .pfout-favorite{border:2px solid var(--pf-primary)}
.pfout-pop .pfout-contact{margin-top:.85rem;padding:1rem;border:2px dashed var(--pf-accent);border-radius:18px;background:#fff}

/* ===================== minimal: タイポ索引（番号つき罫線リスト） ===================== */
.pfout-minimal{--pf-bg:#fff}
.pfout-minimal .pfout-site-head{padding-top:3rem;padding-bottom:0}
.pfout-minimal .pfout-site-head h1{font-size:.95rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.pfout-minimal .pfout-site-brand,.pfout-minimal .pfout-site-lead{display:none}
.pfout-minimal .pfout-works{border-top:none;margin-top:1.4rem}
.pfout-minimal .pfout-section-head{border-bottom:1px solid var(--pf-primary);padding-bottom:.5rem}
.pfout-minimal h2{letter-spacing:.34em;font-weight:400;font-size:.58rem;color:var(--pf-primary);opacity:.6}
/* 作品＝番号つきの罫線リスト行（左に番号／中央に小画像／右に名前） */
.pfout-minimal .pfout-grid-minimal{counter-reset:pfidx}
.pfout-minimal .pfout-work{counter-increment:pfidx;border:none;border-bottom:1px solid color-mix(in srgb,var(--pf-primary) 14%,transparent);border-radius:0;background:transparent;padding:0}
.pfout-minimal .pfout-work:hover{transform:none;box-shadow:none}
.pfout-minimal .pfout-work-link{display:grid;grid-template-columns:2.2rem 48px 1fr;gap:1rem;align-items:center;padding:.7rem 0}
.pfout-minimal .pfout-work-link::before{content:counter(pfidx,decimal-leading-zero);font-family:'Helvetica Neue',sans-serif;font-size:.66rem;letter-spacing:.06em;color:var(--pf-primary);opacity:.45}
.pfout-minimal .pfout-work-img{aspect-ratio:1/1;width:48px}
.pfout-minimal .pfout-work-body{padding:0}
.pfout-minimal .pfout-work h3{font-weight:400;letter-spacing:.04em;font-size:.86rem}
.pfout-minimal .pfout-shop-badges{margin-top:.3rem}
.pfout-minimal .pfout-favorite{display:none}

/* ===================== feminine: ロマンティック ===================== */
.pfout-feminine .pfout-site-head{text-align:center;padding-top:3rem}
.pfout-feminine .pfout-brand,.pfout-feminine .pfout-identity{justify-content:center;margin-left:auto;margin-right:auto}
.pfout-feminine .pfout-site-head h1{letter-spacing:.08em;font-weight:400;font-size:clamp(1.9rem,5.5vw,3.1rem);margin-inline:auto}
/* タイトルの上下を小さな飾りで挟む */
.pfout-feminine .pfout-identity::before{content:"❀";display:block;color:var(--pf-accent);font-size:1.1rem;margin-bottom:.6rem}
.pfout-feminine .pfout-site-lead{margin-left:auto;margin-right:auto;font-style:italic}
.pfout-feminine .pfout-about{text-align:center}
.pfout-feminine .pfout-section-head{justify-content:center;text-align:center}
.pfout-feminine h2{letter-spacing:.26em;font-weight:400;font-size:.62rem}
/* 見出しの両脇に細い線を引く（中央寄せの装飾） */
.pfout-feminine h2{display:inline-flex;align-items:center;gap:.7rem}
.pfout-feminine h2::before,.pfout-feminine h2::after{content:"";width:24px;height:1px;background:var(--pf-accent);opacity:.6}
.pfout-feminine .pfout-work{border:none;background:transparent;text-align:center}
.pfout-feminine .pfout-work:hover{transform:none;box-shadow:none}
.pfout-feminine .pfout-work-img{aspect-ratio:1/1;border-radius:50%;margin:0 auto;width:68%;max-width:200px;border:1px solid color-mix(in srgb,var(--pf-accent) 40%,transparent)}
.pfout-feminine .pfout-work h3{font-weight:400;letter-spacing:.05em;margin-top:.6rem}
.pfout-feminine .pfout-shop-badges{justify-content:center}
.pfout-feminine .pfout-favorite{background:rgba(255,255,255,.9)}

/* ===================== fancy: キャンディ（ドット背景・ぷっくり） ===================== */
.pfout-fancy{background-image:radial-gradient(color-mix(in srgb,var(--pf-accent) 22%,transparent) 1.4px,transparent 1.4px);background-size:18px 18px}
.pfout-fancy .pfout-site-head{padding-bottom:.4rem;text-align:center}
.pfout-fancy .pfout-brand,.pfout-fancy .pfout-identity{justify-content:center;margin-left:auto;margin-right:auto}
.pfout-fancy .pfout-site-head h1{font-size:clamp(1.9rem,5.5vw,3rem);font-weight:800;margin-inline:auto}
.pfout-fancy .pfout-site-head h1::after{content:" ♥";color:var(--pf-accent)}
.pfout-fancy .pfout-site-lead{margin-left:auto;margin-right:auto}
.pfout-fancy h2{display:inline-block;letter-spacing:.06em;font-weight:800;background:#fff;color:var(--pf-accent);padding:.22rem .8rem;border-radius:999px;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.pfout-fancy .pfout-works,.pfout-fancy .pfout-about,.pfout-fancy .pfout-contact,.pfout-fancy .pfout-social-section{border-top:none}
.pfout-fancy .pfout-work{border-radius:24px;border:none;background:#fff;box-shadow:0 12px 26px rgba(0,0,0,.1)}
.pfout-fancy .pfout-work-img{aspect-ratio:1/1}
.pfout-fancy .pfout-work-body{padding:.7rem .85rem .95rem;text-align:center}
.pfout-fancy .pfout-shop-badges{justify-content:center}
.pfout-fancy .pfout-work h3{font-weight:800;letter-spacing:.01em}
.pfout-fancy .pfout-favorite{box-shadow:0 3px 8px rgba(0,0,0,.12)}
/* カードを上下に少し振って“はずむ”リズムを出す */
.pfout-fancy .pfout-grid-fancy>.pfout-work:nth-child(even){transform:translateY(1rem)}
.pfout-fancy .pfout-contact{margin-top:1.4rem;padding:1.1rem;border:none;border-radius:22px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.07)}

/* editorial を2カラム化したとき footer が1列目に落ちないよう全幅にする（PC側で grid 化） */
.pfout-editorial .pfout-powered{grid-column:1 / -1}

/* ===== 詳細ヘッダーをテンプレの世界観に馴染ませる ===== */
/* high・editorial：美術館/誌面。ブランド名を大きめ・字間広く、ロゴは無くてもタイポで魅せる */
.pfout-high .pfout-detail-brand strong,.pfout-editorial .pfout-detail-brand strong{font-weight:400;letter-spacing:.14em;font-size:.92rem}
.pfout-high .pfout-detail-head,.pfout-editorial .pfout-detail-head{padding-top:1.4rem;padding-bottom:1.4rem}
/* minimal：極小・大文字・字間最大の静かなヘッダー */
.pfout-minimal .pfout-detail-brand strong{font-weight:600;letter-spacing:.2em;font-size:.72rem;text-transform:uppercase}
.pfout-minimal .pfout-detail-brand img{width:24px;height:24px}
/* pop：アクセント色の帯にして全面ポップな世界に揃える */
.pfout-pop .pfout-detail-head{background:var(--pf-accent);border-bottom:none;border-radius:0 0 22px 22px}
.pfout-pop .pfout-detail-brand strong{color:#fff}
.pfout-pop .pfout-detail-brand img{border-color:rgba(255,255,255,.6)}
.pfout-pop .pfout-detail-back{color:rgba(255,255,255,.85)}
.pfout-pop .pfout-detail-back:hover{color:#fff}
/* feminine：中央寄せの繊細さに合わせ、名前を細く字間広く */
.pfout-feminine .pfout-detail-brand strong{font-weight:400;letter-spacing:.1em}
/* fancy：丸ゴシックで親しみ、ブランド名をやや太く */
.pfout-fancy .pfout-detail-brand strong{font-weight:800}

/* グリッド列数（モバイル既定）：型ごとの密度 */
.pfout-grid-editorial{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;align-items:start}
.pfout-grid-pop{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.pfout-grid-minimal{grid-template-columns:1fr;gap:0}
.pfout-grid-feminine{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.pfout-grid-fancy{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.pfout-font-zen_maru_gothic .pfout-site-head h1,.pfout-font-casual .pfout-site-head h1{font-weight:700}
.pfout-font-quicksand .pfout-site-head h1,.pfout-font-balance .pfout-site-head h1,.pfout-font-middle .pfout-site-head h1,.pfout-font-helvetica_neue .pfout-site-head h1,.pfout-font-minimal .pfout-site-head h1,.pfout-font-noto_sans_jp .pfout-site-head h1,.pfout-font-m_plus_rounded_1c .pfout-site-head h1,.pfout-font-inter .pfout-site-head h1{font-weight:700}
.pfout-admin-shell{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid rgba(0,0,0,.08)}
.pfout-admin{max-width:1080px;margin:0 auto;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .9rem;font-size:.68rem;color:#6f6259}
.pfout-admin-state{flex:1;display:flex;justify-content:center}
/* ===== 詳細ページのヘッダー（公開サイトの“顔”）=====
   ブランド（ロゴ＋名前）を中央で主役に。戻り導線は左に控えめ（absolute）で
   中央配置を邪魔しない。「作品詳細」ラベルは自明なので置かない。
   背景は作家テーマ(--pf-bg)に馴染ませ、下にヘアライン。テンプレ別の世界観は
   後段の .pfout-<id> 上書きで微調整する。 */
.pfout-detail-head{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;
  max-width:1080px;margin:0 auto;padding:1.15rem 3.6rem;min-height:30px;
  border-bottom:1px solid color-mix(in srgb,var(--pf-primary) 12%,transparent)}
@supports not (color:color-mix(in srgb,red,blue)){.pfout-detail-head{border-bottom-color:rgba(0,0,0,.08)}}
/* 左に控えめな戻る（縦中央・absolute） */
.pfout-detail-back{position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:.2rem;
  color:var(--pf-muted);font-size:.68rem;font-weight:700;letter-spacing:.02em;text-decoration:none;
  padding:.3rem .2rem;transition:color .2s ease}
.pfout-detail-back svg{display:block}
.pfout-detail-back:hover{color:var(--pf-accent)}
.pfout-detail-back span{line-height:1}
/* 中央のブランド（ロゴ＋名前） */
.pfout-detail-brand{display:inline-flex;align-items:center;gap:.5rem;color:var(--pf-primary);text-decoration:none;max-width:calc(100% - 5rem)}
.pfout-detail-brand img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid color-mix(in srgb,var(--pf-primary) 14%,transparent);background:#fff;flex-shrink:0}
.pfout-detail-brand strong{font-size:.88rem;font-weight:800;line-height:1.2;color:var(--pf-primary);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfout-detail-brand:hover{opacity:.82}
@media (min-width:760px){.pfout-detail-head{padding-left:3.6rem;padding-right:3.6rem}.pfout-detail-back{left:2rem}}
/* 状態バッジ：未反映/公開中/下書き */
.pfout-state-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.64rem;font-weight:800;padding:.18rem .6rem;border-radius:999px;background:rgba(0,0,0,.05);color:#6f6259}
.pfout-state-dirty{background:#fff3cd;color:#9a6a00}
.pfout-state-dirty::before{content:"●";color:#e0a100;font-size:.6em}
.pfout-state-live{background:#e3f4e6;color:#2d7a3a}
.pfout-state-live::before{content:"●";color:#36a94a;font-size:.6em}
/* スマホ/PC 切替 */
.pfout-device-toggle{display:inline-flex;border:1px solid rgba(0,0,0,.14);border-radius:999px;overflow:hidden;flex-shrink:0}
.pfout-device-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:#fff;color:#6f6259;padding:.32rem .62rem;cursor:pointer;line-height:0}
.pfout-device-btn svg{display:block}
.pfout-device-btn.is-active{background:var(--pink-deep,#d4789a);color:#fff}
/* プレビュー・ステージ（端末フレーム幅の切替） */
.pfout-stage{margin:0 auto}
.pfout-stage.is-mobile{max-width:420px;box-shadow:0 0 0 1px rgba(0,0,0,.06);background:#fff}
/* PC表示：レイアウトを実寸(1080px)で出し、画面が狭ければ横スクロールで全体を確認できる。
   layout.html の body は overflow-x:hidden なので、ステージ自身をスクロール容器にする。 */
.pfout-stage.is-pc{max-width:none;overflow-x:auto;-webkit-overflow-scrolling:touch}
.pfout-stage.is-pc .pfout{width:1080px;max-width:none;margin-left:auto;margin-right:auto}
/* 管理バー(プレビュー上部)は作家テーマの外側に出るため --pf-accent が未定義。
   ここはアプリ自身のブランド色(--pink-deep)を使う（base.css のトークン） */
.pfout-admin a{color:var(--pink-deep,#d4789a);font-weight:700;text-decoration:none}
.pfout-publish-panel{max-width:1080px;margin:0 auto;padding:.42rem .9rem .62rem;background:#fff}
.pfout-publish-form{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:0}
.pfout-publish-form label{display:block;font-family:Quicksand,'Zen Maru Gothic',sans-serif;font-size:.62rem;font-weight:800;color:#6f6259}
.pfout-publish-form label span{display:block;margin-bottom:.15rem}
.pfout-publish-form input[type=text]{width:100%;box-sizing:border-box;border:1px solid rgba(0,0,0,.14);border-radius:8px;background:#fff;padding:.42rem .58rem;font-family:inherit;font-size:.76rem;color:var(--pf-primary)}
.pfout-publish-form small{grid-column:1 / -1;font-size:.58rem;color:#8a7a70;overflow-wrap:anywhere;line-height:1.45}
.pfout-publish-panel button{border:1px solid var(--pink-deep,#d4789a);border-radius:999px;background:var(--pink-deep,#d4789a);color:#fff;padding:.5rem .95rem;font-family:Quicksand,'Zen Maru Gothic',sans-serif;font-size:.72rem;font-weight:800;cursor:pointer;white-space:nowrap}
.pfout-public-url{margin-left:auto;display:inline-flex;align-items:center;text-decoration:none;color:var(--pink-deep,#d4789a);font-size:.72rem;font-weight:800;white-space:nowrap}
.pfout-publish-error{font-size:.68rem;color:#b94c60;background:#fff0f3;border:1px solid rgba(185,76,96,.22);border-radius:8px;padding:.42rem .55rem;margin:0 0 .5rem}
/* ===== シェア導線（作家本人のみ） ===== */
.pf-share{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.pf-share-btn{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;min-height:34px;padding:.34rem .7rem;border-radius:999px;border:1px solid rgba(0,0,0,.14);background:#fff;color:#5c4a3d;font-family:Quicksand,'Zen Maru Gothic',sans-serif;font-size:.7rem;font-weight:800;text-decoration:none;cursor:pointer;white-space:nowrap}
.pf-share-btn:hover{border-color:var(--pink-deep,#d4789a);color:var(--pink-deep,#d4789a)}
.pf-share-x{background:#000;border-color:#000;color:#fff}
.pf-share-x:hover{background:#222;border-color:#222;color:#fff}
.pf-share-line{background:#06c755;border-color:#06c755;color:#fff}
.pf-share-line:hover{background:#05b34c;border-color:#05b34c;color:#fff}
/* 公開直後ダイアログ（オリジナルUI・システムダイアログ不使用） */
.pf-share-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(26,24,43,.5);padding:1rem}
.pf-share-modal[hidden]{display:none}
.pf-share-modal-panel{position:relative;background:#fff;border-radius:18px;max-width:380px;width:100%;padding:1.7rem 1.5rem 1.5rem;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.pf-share-modal-close{position:absolute;top:.6rem;right:.7rem;width:30px;height:30px;border:none;background:none;font-size:1rem;color:#9a8f89;cursor:pointer;border-radius:50%}
.pf-share-modal-close:hover{background:rgba(0,0,0,.06)}
.pf-share-modal-emoji{font-size:2.4rem;line-height:1;margin-bottom:.4rem}
.pf-share-modal-panel strong{display:block;font-family:Quicksand,'Zen Maru Gothic',sans-serif;font-size:1.05rem;color:#3d2b1f;margin-bottom:.35rem}
.pf-share-modal-panel p{font-size:.78rem;line-height:1.6;color:#6f6259;margin:0 0 1rem}
.pf-share-modal .pf-share{justify-content:center;margin-bottom:1rem}
.pf-share-modal-link{display:inline-block;font-size:.72rem;font-weight:800;color:var(--pink-deep,#d4789a);text-decoration:none}
.pfout-site-head{max-width:1080px;margin:0 auto;padding:1.6rem 1rem .5rem}
.pfout-cover{aspect-ratio:5/2;max-height:240px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background-color:#fff;background-image:var(--pf-bg-image);background-size:var(--pf-bg-size,cover);background-position:var(--pf-bg-position,center);background-repeat:var(--pf-bg-repeat,no-repeat);margin-bottom:.7rem;overflow:hidden}
.pfout-identity{padding:.15rem 0 0}
.pfout-brand{display:flex;align-items:center;gap:.42rem;color:var(--pf-primary)}
.pfout-brand img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid rgba(0,0,0,.1);background:#fff}
.pfout-brand strong{font-size:.76rem;font-weight:800;line-height:1.25}
.pfout-about-brand{margin:0 0 .55rem}
.pfout-site-brand{margin-bottom:.7rem}
.pfout-site-brand img{width:34px;height:34px}
.pfout-site-brand strong{font-size:.86rem}
.pfout-site-head h1{font-size:1.5rem;line-height:1.22;margin:0;max-width:780px;letter-spacing:.01em;text-wrap:balance}
.pfout-site-lead{margin:.6rem 0 0;font-size:.82rem;line-height:1.8;max-width:680px;color:var(--pf-primary);opacity:.82;text-wrap:pretty}
.pfout main{max-width:1080px;margin:0 auto;padding:0 1rem 2.5rem;display:flex;flex-direction:column}
.pfout-about,.pfout-contact,.pfout-social-section{padding:1.6rem 0 0;margin:1.6rem 0 0;border-top:1px solid rgba(0,0,0,.08)}
.pfout-works{padding:1.6rem 0 0;margin:1.6rem 0 0;border-top:1px solid rgba(0,0,0,.08)}
.pfout-works:first-of-type{border-top:none;margin-top:.6rem;padding-top:.6rem}
.pfout-works{order:10}
.pfout-about{order:20}
.pfout-contact{order:30}
.pfout-social-section{order:40}
.pfout-editorial .pfout-about,.pfout-feminine .pfout-about{order:5;border-top:none;margin-top:.8rem;padding-top:.8rem}
.pfout-editorial .pfout-works,.pfout-feminine .pfout-works{order:15}
.pfout-pop .pfout-contact,.pfout-fancy .pfout-contact{order:12}
.pfout-pop .pfout-about,.pfout-fancy .pfout-about{order:30}
.pfout-minimal .pfout-about{order:35}
.pfout-about p,.pfout-contact p,.pfout-section-head p{font-size:.76rem;line-height:1.65;max-width:680px;color:var(--pf-body)}
.pfout-socials{display:flex;align-items:center;gap:.45rem;margin-top:.7rem;flex-wrap:wrap}
.pfout-socials a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid rgba(0,0,0,.12);border-radius:50%;color:var(--pf-primary);background:#fff;text-decoration:none;font-size:.68rem;font-weight:700;letter-spacing:0}
.pfout-socials img{width:18px;height:18px;display:block;object-fit:contain}
.pfout-socials a:hover{border-color:var(--pf-accent);color:var(--pf-accent)}
.pfout-detail-socials{margin:1rem 0 0}
.pfout-section-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:.75rem}
.pfout-grid{display:grid;gap:.9rem}
.pfout-grid-high{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.pfout-grid-casual{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.pfout-grid-middle{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.pfout-work{position:relative;display:block;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;overflow:hidden;color:inherit;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.pfout-work:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.12)}
.pfout-work-link{display:block;color:inherit;text-decoration:none}
.pfout-work-img{aspect-ratio:4/5;background:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden}
.pfout-work-img img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.pfout-work:hover .pfout-work-img img{transform:scale(1.06)}
.pfout-work-body{padding:.7rem .2rem .2rem}
.pfout-work h3{font-size:.84rem;line-height:1.4;margin:0;color:var(--pf-primary);font-weight:600}
/* high: 画像主役・文字は静か／本文は枠外で余白に置く（ギャラリー的） */
.pfout-high .pfout-work-img{aspect-ratio:3/4}
.pfout-high .pfout-work:hover{transform:none;box-shadow:none}
.pfout-high .pfout-work h3{font-size:.8rem;font-weight:400;letter-spacing:.02em}
/* casual: カード内に本文・丸み／温かい余白 */
.pfout-casual .pfout-work-body{padding:.7rem .8rem .85rem}
.pfout-casual .pfout-work-img{aspect-ratio:1/1}
/* middle: 均整・標準EC */
.pfout-middle .pfout-work-img{aspect-ratio:4/5}
.pfout-shop-badges{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.45rem}
.pfout-shop-badges span{display:inline-flex;align-items:center;gap:.22rem;min-height:24px;border:1px solid rgba(0,0,0,.12);border-radius:999px;background:#fff;padding:.12rem .42rem;font-family:Quicksand,'Zen Maru Gothic',sans-serif;font-size:.55rem;font-weight:800;letter-spacing:0;color:var(--pf-accent)}
/* アイコンがあるバッジは“アイコンのみ”の丸ボタンにする（文字は出さない）。
   :has 非対応ブラウザでも従来の錠剤＋文字なしで崩れない。 */
.pfout-shop-badges span:has(img){width:26px;height:26px;padding:0;justify-content:center}
.pfout-shop-badges img{width:17px;height:17px;object-fit:contain;display:block}
.pfout-shop-list{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
.pfout-shop-list a{display:inline-flex;align-items:center;gap:.28rem;min-height:34px;border:1px solid rgba(0,0,0,.12);border-radius:999px;background:#fff;padding:.22rem .62rem;font-family:Quicksand,'Zen Maru Gothic',sans-serif;font-size:.66rem;font-weight:800;letter-spacing:0;color:var(--pf-primary);text-decoration:none}
.pfout-shop-list a:hover{border-color:var(--pf-accent);color:var(--pf-accent)}
.pfout-shop-list img{width:20px;height:20px;object-fit:contain;display:block}
.pfout-favorite{position:absolute;right:.45rem;top:.45rem;width:34px;height:34px;border:1px solid rgba(0,0,0,.12);border-radius:50%;background:#fff;color:var(--pf-accent);font-family:Georgia,serif;font-size:1.05rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;padding:0}
.pfout-favorite.active{background:var(--pf-accent);border-color:var(--pf-accent);color:#fff}
.pfout-favorite-mark{display:block;line-height:1;transform:translateY(.04em)}
.pfout-favorite-count{font-family:Quicksand,'Zen Maru Gothic',sans-serif;font-size:.52rem;font-weight:800;margin-left:.12rem;line-height:1}
.pfout-middle .pfout-work-body{padding:.6rem .65rem .7rem}
.pfout-pager{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1rem;font-size:.72rem}
.pfout-pager a,.pfout-pager span{min-width:54px;text-align:center;color:var(--pf-accent);text-decoration:none}
.pfout-pager span{color:#b8afa8}
.pfout-pager strong{font-size:.68rem;color:#6f6259}
.pfout-powered{padding:1.2rem 1rem 1.6rem;text-align:center}
.pfout-powered a{display:inline-flex;align-items:center;justify-content:center;gap:.32rem;color:#1a182b;text-decoration:none;font-family:Quicksand,'Zen Maru Gothic',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:0}
.pfout-powered img{width:18px;height:18px;display:block}
.pfout-powered span{color:#9a8f89;font-weight:700}
.pfout-powered strong{color:#e991ac;font-weight:700}

@media (min-width:760px){
  .pfout-admin{padding-left:2rem;padding-right:2rem}
  .pfout-publish-panel{padding-left:2rem;padding-right:2rem}
  .pfout-site-head{padding:1.1rem 2rem .45rem}
  /* PCでは横長コンテナ(最大1080px)で帯が薄くなり cover で天地が切れすぎるため、
     縦横比をモバイルと揃え(5/2)、最大高さも余裕を持たせて切れを軽減する */
  .pfout-cover{aspect-ratio:5/2;max-height:420px;margin-bottom:.85rem}
  .pfout-identity{padding:.2rem 0 0}
  .pfout-site-head h1{font-size:1.9rem}
  .pfout main{padding-left:2rem;padding-right:2rem}
  /* PCでの列数は型ごとに変える（密度で印象を作る） */
  .pfout-grid-casual,.pfout-grid-middle,.pfout-grid-fancy,.pfout-grid-feminine{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pfout-grid-high{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfout-grid-editorial{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pfout-grid-pop{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pfout-grid-minimal{grid-template-columns:1fr}

  /* high: 余白を最大化し作品を堂々と見せる（h1は clamp に任せる） */
  .pfout-high main{max-width:920px}

  /* editorial: 雑誌の段組み＝ヘッダー(タイトル)を左に固定し、本文を右へ。
     共通HTMLのまま .pfout 直下を2カラム化して“別物”の骨格にする。
     ※ site-head を持つトップページ限定。詳細ページ(.pfout-detail のみ)には
       site-head が無いので :has で除外し、2カラム化しない（左カラムの空白を防ぐ）。 */
  .pfout-editorial:has(.pfout-site-head){display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0;max-width:1120px;margin:0 auto}
  .pfout-editorial .pfout-site-head{grid-column:1;position:sticky;top:1.5rem;align-self:start;padding:2.6rem 1.4rem 2rem 2rem;text-align:left;max-width:none}
  /* 左カラム(300px)に収めるため、PCでは大見出しを少し抑える */
  .pfout-editorial .pfout-site-head h1{font-size:clamp(2.2rem,3vw,3rem)}
  .pfout-editorial main{grid-column:2;max-width:none;padding:2.4rem 2rem 3rem}
  .pfout-editorial .pfout-works:first-of-type{margin-top:0;padding-top:0}

  /* pop: 色面ヘッダーは全幅、作品は密に4列。h1は clamp に任せる */
  .pfout-pop .pfout-site-head{margin-left:0;margin-right:0;max-width:none;padding-left:2rem;padding-right:2rem}

  /* feminine: 3列・中央寄せ。円画像は小さめ＋上限ありで間延びを防ぐ。h1は clamp に任せる */
  .pfout-feminine main{max-width:1000px}

  /* minimal: PCでもインデックスのまま、画像を少し大きく */
  .pfout-minimal .pfout-work-link{grid-template-columns:2.6rem 64px 1fr}
  .pfout-minimal .pfout-work-img{width:64px}
  .pfout-minimal main{max-width:820px}
}

/* スマホフレーム時：ビューポートが広くても“スマホの見え方”に戻す
   （メディアクエリはビューポート基準のため、フレーム幅だけでは切り替わらないため明示的に上書き） */
.pfout-stage.is-mobile .pfout-site-head{padding:1.6rem 1rem .5rem}
.pfout-stage.is-mobile .pfout-cover{aspect-ratio:5/2;max-height:240px}
.pfout-stage.is-mobile .pfout main{padding-left:1rem;padding-right:1rem}
.pfout-stage.is-mobile .pfout-grid-high,
.pfout-stage.is-mobile .pfout-grid-casual,
.pfout-stage.is-mobile .pfout-grid-middle,
.pfout-stage.is-mobile .pfout-grid-editorial,
.pfout-stage.is-mobile .pfout-grid-feminine,
.pfout-stage.is-mobile .pfout-grid-fancy{grid-template-columns:repeat(2,minmax(0,1fr))}
.pfout-stage.is-mobile .pfout-grid-pop{grid-template-columns:repeat(2,minmax(0,1fr))}
.pfout-stage.is-mobile .pfout-grid-minimal{grid-template-columns:1fr}
/* スマホフレーム時は editorial の2カラム骨格を解除して縦積みへ戻す */
.pfout-stage.is-mobile .pfout-editorial{display:block}
.pfout-stage.is-mobile .pfout-editorial .pfout-site-head{position:static;padding:1.6rem 1rem .5rem;text-align:left}
.pfout-stage.is-mobile .pfout-editorial main{padding-left:1rem;padding-right:1rem}
/* スマホフレーム時の見出しサイズ。h1は clamp(...vw...) で指定しているが、vw は
   ビューポート(=ブラウザ全幅)基準のためフレームを狭めても巨大なまま突き抜ける。
   フレーム幅に合う固定サイズへ明示的に上書きする（実機スマホの見え方に合わせる）。 */
.pfout-stage.is-mobile .pfout-site-head h1{font-size:1.7rem}
.pfout-stage.is-mobile .pfout-editorial .pfout-site-head h1,
.pfout-stage.is-mobile .pfout-high .pfout-site-head h1{font-size:1.9rem}
.pfout-stage.is-mobile .pfout-detail-layout{grid-template-columns:1fr;gap:1rem}
.pfout-stage.is-mobile .pfout-detail-gallery-wrap{position:static}
.pfout-stage.is-mobile .pfout-detail-image{aspect-ratio:4/5;height:auto}

/* PCフレーム時：ビューポートが狭く(スマホ実機)てもPCレイアウトを実寸で出す。
   メディアクエリはビューポート基準で発火しないため、is-pc で明示的に上書きする。 */
.pfout-stage.is-pc .pfout-site-head{padding:1.1rem 2rem .45rem}
/* h1 の clamp(...vw...) は実機ビューポート基準のため、狭い端末でPCプレビューすると
   小さくなりすぎる。PC実寸相当の固定サイズに上書きする（editorialは左カラム幅に合わせ抑制）。 */
.pfout-stage.is-pc .pfout-site-head h1{font-size:2.4rem}
.pfout-stage.is-pc .pfout-editorial .pfout-site-head h1{font-size:2.6rem}
.pfout-stage.is-pc .pfout-high .pfout-site-head h1{font-size:3.4rem}
.pfout-stage.is-pc .pfout-cover{aspect-ratio:5/2;max-height:420px;margin-bottom:.85rem}
.pfout-stage.is-pc .pfout main{padding-left:2rem;padding-right:2rem}
.pfout-stage.is-pc .pfout-grid-casual,
.pfout-stage.is-pc .pfout-grid-middle,
.pfout-stage.is-pc .pfout-grid-fancy,
.pfout-stage.is-pc .pfout-grid-feminine,
.pfout-stage.is-pc .pfout-grid-editorial{grid-template-columns:repeat(3,minmax(0,1fr))}
.pfout-stage.is-pc .pfout-grid-high{grid-template-columns:repeat(2,minmax(0,1fr))}
.pfout-stage.is-pc .pfout-grid-pop{grid-template-columns:repeat(4,minmax(0,1fr))}
.pfout-stage.is-pc .pfout-grid-minimal{grid-template-columns:1fr}
.pfout-stage.is-pc .pfout-minimal .pfout-work-link{grid-template-columns:2.6rem 64px 1fr}
.pfout-stage.is-pc .pfout-minimal .pfout-work-img{width:64px}
/* PCフレーム時：editorial の左タイトル固定2カラム骨格を再現 */
.pfout-stage.is-pc .pfout-editorial:has(.pfout-site-head){display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);max-width:1120px;margin:0 auto}
.pfout-stage.is-pc .pfout-editorial .pfout-site-head{grid-column:1;position:sticky;top:1.5rem;align-self:start;padding:2.6rem 1.4rem 2rem 2rem;text-align:left}
.pfout-stage.is-pc .pfout-editorial main{grid-column:2;padding:2.4rem 2rem 3rem}
.pfout-stage.is-pc .pfout-detail-layout{grid-template-columns:minmax(0,.9fr) minmax(340px,1fr);gap:2.2rem;align-items:start}
.pfout-stage.is-pc .pfout-detail-image{aspect-ratio:auto;height:min(70vh,560px)}

.pfout-detail{padding-top:1rem}
.pfout-detail-layout{display:grid;gap:1rem}
.pfout-detail-gallery-wrap{position:relative}
.pfout-detail-gallery{display:flex;gap:.55rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pfout-detail-gallery::-webkit-scrollbar{display:none}
.pfout-detail-image{aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem}
.pfout-detail-slide{flex:0 0 100%;scroll-snap-align:start}
.pfout-detail-image img,.pfout-detail-image video{width:100%;height:100%;object-fit:cover;display:block}
.pfout-detail-image video{background:#111}
.pfout-detail-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.pfout-detail-body h1{font-size:1.55rem;line-height:1.25;margin:.2rem 0 .7rem}
.pfout-detail-buy-label{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pf-muted);font-weight:800;margin:.4rem 0 .5rem}
.pfout-detail-favorite{position:static;flex:0 0 48px;width:48px;height:42px;border-radius:999px}
.pfout-gallery-nav{position:absolute;left:0;right:0;bottom:.7rem;display:flex;align-items:center;justify-content:center;gap:.75rem;pointer-events:none}
.pfout-gallery-nav span{font-family:Quicksand,'Zen Maru Gothic',sans-serif;font-size:.72rem;font-weight:800;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.45)}
.pfout-gallery-btn{pointer-events:auto;width:2.2rem;height:2.2rem;border:none;border-radius:50%;background:rgba(0,0,0,.48);color:#fff;font-size:1.35rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pfout-detail-desc{font-size:.86rem;line-height:1.75;color:var(--pf-body);margin-bottom:1rem}
.pfout-detail-note{font-size:.8rem;color:var(--pf-muted)}
.pfout-buy-list{display:flex;gap:.4rem;flex-wrap:wrap}
.pfout-buy-row{display:flex}
.pfout-buy-shop{display:inline-flex;align-items:center;gap:.28rem;min-height:34px;border:1px solid rgba(0,0,0,.12);border-radius:999px;background:#fff;padding:.22rem .62rem;color:var(--pf-primary);text-decoration:none}
.pfout-buy-shop:hover{border-color:var(--pf-accent);color:var(--pf-accent)}
/* 販売URL未設定のショップは非クリックの取り扱いバッジとして表示 */
/* 販売URL未設定の取り扱い先。リンクではないが“取り扱いあり”として
   はっきり読めるよう、白地＋実線枠で出す（半透明で背景が透けないように） */
.pfout-buy-shop-static{cursor:default;background:#fff}
.pfout-buy-shop-static:hover{border-color:rgba(0,0,0,.12);color:var(--pf-primary)}
.pfout-buy-service{display:inline-flex;align-items:center;gap:.28rem;min-width:0}
.pfout-buy-service img{width:20px;height:20px;object-fit:contain;display:block;flex-shrink:0}
.pfout-buy-row strong{display:block;font-family:Quicksand,'Zen Maru Gothic',sans-serif;font-size:.66rem;font-weight:800;letter-spacing:0}
.pfout-buy-row span{font-size:.78rem;color:var(--pf-body)}
.pfout-related,.pfout-detail-footer{padding:1.25rem 0;border-top:1px solid rgba(0,0,0,.08)}
.pfout-related{margin-top:1.2rem}
.pfout-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.pfout-related-card{display:block;color:inherit;text-decoration:none;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;overflow:hidden}
.pfout-related-card strong{display:block;font-size:.74rem;line-height:1.35;padding:.55rem .6rem;color:var(--pf-primary)}
.pfout-related-img{aspect-ratio:4/5;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;overflow:hidden}
.pfout-related-img img{width:100%;height:100%;object-fit:cover;display:block}
.pfout-detail-footer{display:grid;gap:1rem}
.pfout-detail-footer p{font-size:.76rem;line-height:1.65;color:var(--pf-body);margin:0}
.pfout-related-pager{margin-top:.8rem}

@media (min-width:760px){
  /* PC: 画像が縦に伸びすぎて右カラムが間延びするのを防ぐ。
     画像列を狭め(.9fr)、情報列を広げ(1fr)、ギャラリーを上端で固定(sticky)して
     スクロールでも情報と並走させる。画像の高さは上限を設けてタワー化を防ぐ。 */
  .pfout-detail-layout{grid-template-columns:minmax(0,.9fr) minmax(340px,1fr);gap:2.2rem;align-items:start}
  .pfout-detail-gallery-wrap{position:sticky;top:1.5rem}
  .pfout-detail-image{aspect-ratio:auto;height:min(70vh,560px)}
  .pfout-detail-body{padding-top:.4rem}
  .pfout-related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pfout-detail-footer{grid-template-columns:repeat(3,minmax(0,1fr))}
}