/* ===================================================================
   Quickry Web相談室（web.quickry.jp/media）共有スタイル
   母艦LP（web_quickry_jp_LP/index.html）のデザイントークンを継承。
   navy #0F2C40 + orange #EA7A2E / Noto Sans JP + Inter。モバイルファースト。
   ※ /media 配下の全ページが読み込む（絶対パス /media/media.css）。
=================================================================== */
:root{
  --paper:#FFFFFF;
  --section:#F4F7FA;
  --navy:#0F2C40;
  --navy-deep:#0A2230;
  --accent:#EA7A2E;
  --accent-2:#F39A4D;
  --accent-ink:#FFFFFF;
  --ink:#162A38;
  --mute:#4A5A66;
  --rule:#E3E9EE;
  --font-jp:"Noto Sans JP", system-ui, sans-serif;
  --font-en:"Inter","Noto Sans JP", system-ui, sans-serif;
  --maxw:1060px;
  --readw:760px;
  --radius:16px;
  --shadow:0 10px 34px rgba(15,44,64,.09);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-jp);color:var(--ink);background:var(--paper);
  line-height:1.85;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{line-height:1.42;margin:0;}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px;}
@media(min-width:720px){.wrap{padding:0 40px;}}

/* ボタン */
.btn{display:inline-block;background:linear-gradient(135deg,#F08A3C 0%,#EA7A2E 58%,#DE6E22 100%);
  color:var(--accent-ink);font-weight:700;padding:15px 34px;border-radius:999px;font-size:16px;
  border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
  box-shadow:0 8px 20px rgba(234,122,46,.30);}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(234,122,46,.38);filter:brightness(1.05);}
.btn-ghost{display:inline-block;border:1.5px solid var(--navy);color:var(--navy);font-weight:700;
  padding:12px 26px;border-radius:999px;font-size:14px;background:transparent;cursor:pointer;transition:background .15s;}
.btn-ghost:hover{background:rgba(15,44,64,.06);}

/* ヘッダー（母艦LPと同じスティッキー・ロゴ＋ナビ） */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--rule);}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.logo{display:flex;align-items:center;gap:9px;}
.logo img{height:26px;width:auto;}
.logo .logo-sub{font-weight:700;font-size:15px;color:var(--navy);letter-spacing:.01em;}
.site-header nav{display:flex;gap:22px;align-items:center;}
.site-header nav a.navlink{font-size:14px;color:var(--mute);font-weight:500;}
.site-header nav a.navlink:hover{color:var(--navy);}
.site-header .header-cta{padding:9px 20px;font-size:13px;}
@media(max-width:860px){.site-header nav a.navlink{display:none;}}

/* パンくず */
.crumbs{max-width:var(--maxw);margin:0 auto;padding:14px 22px 0;font-size:12.5px;color:var(--mute);}
@media(min-width:720px){.crumbs{padding:16px 40px 0;}}
.crumbs a{color:var(--mute);}
.crumbs a:hover{color:var(--accent);}
.crumbs span{color:var(--rule);margin:0 6px;}

/* セクション見出し（母艦LP流用） */
.section{padding:64px 0;}
@media(max-width:600px){.section{padding:46px 0;}}
.section-head{text-align:center;margin-bottom:40px;}
.section-head .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-en);
  font-size:12px;letter-spacing:.18em;color:var(--accent);font-weight:700;text-transform:uppercase;margin-bottom:10px;}
.section-head .eyebrow::before,.section-head .eyebrow::after{content:"";width:22px;height:1px;background:currentColor;opacity:.45;}
.section-head h2{display:inline-block;font-size:clamp(22px,4vw,30px);font-weight:900;color:var(--navy);}
.section-head h2::after{content:"";display:block;width:48px;height:3px;background:var(--accent);border-radius:2px;margin:14px auto 0;}
.section-head p{color:var(--mute);margin:14px auto 0;max-width:640px;font-size:15px;}

/* ── メディアトップ（サロン特化の顔・A案＝写真背景＋薄ネイビー膜） ─────────
   母艦LP(.hero::before/::after)方式を踏襲。写真を敷き、左濃→右薄の斜め紺膜を重ねる。
   background:var(--navy-deep) は画像未読込時のフォールバック地色として残す（白文字が読める）。*/
.mhero{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;padding:70px 0 64px;}
/* 写真レイヤー（z0）: ヒーロー画像を全面に敷く（cover・中央基準） */
.mhero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/assets/media_hero_salon.jpg") center/cover no-repeat;}
/* 紺膜レイヤー（z1）: 左を濃く・右を薄く。左〜中央の白文字の可読性を担保 */
.mhero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,
    rgba(10,34,48,.82) 0%,
    rgba(10,34,48,.62) 32%,
    rgba(10,34,48,.36) 56%,
    rgba(10,34,48,.18) 100%);}
.mhero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 22px;}
@media(min-width:720px){.mhero-inner{padding:0 40px;}}
.mhero .pill{display:inline-block;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
  color:#fff;font-weight:700;font-size:13px;padding:7px 16px;border-radius:999px;margin-bottom:20px;}
.mhero h1{font-size:clamp(26px,4.8vw,44px);font-weight:900;line-height:1.3;margin-bottom:18px;color:#fff;text-wrap:balance;}
.mhero h1 .em{color:var(--accent-2);}
.mhero .lead{font-size:clamp(15px,2.3vw,18px);color:rgba(255,255,255,.88);max-width:620px;margin:0 0 26px;}
.mhero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.mhero .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;}
.mhero .btn-ghost:hover{background:rgba(255,255,255,.1);}
/* ※写真はイメージ 注記（母艦LP .hero-cap 相当・右下に小さく・黒影で白背景でも可読） */
.mhero .hero-cap{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:3;
  width:100%;max-width:var(--maxw);padding:0 22px;margin:0;font-size:11px;
  color:rgba(255,255,255,.72);letter-spacing:.04em;text-align:right;white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.55);pointer-events:none;}
@media(min-width:720px){.mhero .hero-cap{padding:0 40px;}}
/* モバイル(600px以下): 文字が写真全域に重なるため膜を縦グラデ・濃いめに切替 */
@media(max-width:600px){
  .mhero::after{
    background:linear-gradient(to bottom,
      rgba(10,34,48,.72) 0%, rgba(10,34,48,.58) 55%, rgba(10,34,48,.50) 100%);}
  .mhero .hero-cap{bottom:8px;}
}

/* 業種別ガイド カード */
.cat{background:var(--section);}
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:900px;margin:0 auto;}
@media(max-width:680px){.cat-grid{grid-template-columns:1fr;}}
.cat-card{position:relative;display:block;background:#fff;border:1px solid var(--rule);border-radius:14px;
  padding:26px 24px;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s,border-color .25s;overflow:hidden;}
.cat-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:left;transition:transform .35s;}
.cat-card.ready:hover{transform:translateY(-5px);box-shadow:0 24px 52px rgba(15,44,64,.14);border-color:var(--accent-2);}
.cat-card.ready:hover::after{transform:scaleX(1);}
.cat-card.soon{opacity:.72;cursor:default;}
.cat-card .cat-ic{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(234,122,46,.2),rgba(234,122,46,.07));color:var(--accent);margin-bottom:14px;}
.cat-card .cat-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.cat-card h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:6px;}
.cat-card p{font-size:13.5px;color:var(--mute);margin:0;}
.cat-card .tag{position:absolute;top:16px;right:16px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;}
.cat-card .tag.on{background:rgba(234,122,46,.12);color:var(--accent);}
.cat-card .tag.wip{background:var(--section);color:var(--mute);border:1px solid var(--rule);}

/* お悩み別（横断クラスタ） */
.topics{background:var(--paper);}
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:900px;margin:0 auto;}
@media(max-width:760px){.topic-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.topic-grid{grid-template-columns:1fr;}}
.topic-chip{background:var(--section);border:1px solid var(--rule);border-radius:12px;padding:16px 18px;font-size:14px;
  font-weight:500;color:var(--ink);display:flex;align-items:center;gap:10px;}
.topic-chip .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);}

/* 新着記事リスト */
.posts{background:var(--section);}
.post-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.post-item{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--rule);border-radius:14px;
  padding:22px 24px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s;}
.post-item:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(15,44,64,.12);border-color:var(--accent-2);}
.post-item .p-body{min-width:0;}
.post-item .p-cat{display:inline-block;font-size:11px;font-weight:700;color:var(--accent);
  background:rgba(234,122,46,.1);border-radius:999px;padding:3px 11px;margin-bottom:9px;}
.post-item h3{font-size:16.5px;font-weight:700;color:var(--navy);margin:0 0 6px;line-height:1.5;}
.post-item p{font-size:13.5px;color:var(--mute);margin:0;}
.post-item .p-arrow{flex:none;align-self:center;color:var(--accent);font-size:22px;line-height:1;}

/* 制作事例（準備中） */
.cases{background:var(--paper);}
.cases-soon{max-width:760px;margin:0 auto;text-align:center;background:var(--section);border:1px dashed var(--rule);
  border-radius:16px;padding:34px 26px;color:var(--mute);}
.cases-soon strong{color:var(--navy);display:block;font-size:17px;margin-bottom:8px;}

/* CTA（母艦LPと同じネイビーグラデ） */
.cta{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;text-align:center;}
.cta .section-head h2{color:#fff;}
.cta .section-head .eyebrow{color:var(--accent-2);}
.cta .lead{max-width:600px;margin:0 auto 24px;font-size:15.5px;color:rgba(255,255,255,.94);}
.cta .cta-fine{margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.7);}

/* フッター（母艦LP流用） */
.site-footer{background:var(--navy-deep);color:rgba(255,255,255,.72);padding:46px 0 30px;font-size:13px;}
.site-footer .footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:28px;}
.site-footer .footer-brand{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.site-footer .footer-brand img{height:24px;}
.site-footer .footer-tagline{margin-top:4px;max-width:400px;}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap;}
.site-footer nav a:hover{color:#fff;}
.site-footer .footer-credit{font-size:11.5px;color:rgba(255,255,255,.45);line-height:1.7;
  border-top:1px solid rgba(255,255,255,.14);padding-top:18px;}
.site-footer .footer-credit a{text-decoration:underline;}

/* ── 記事本文（article） ─────────────────────────────────── */
.article{background:var(--paper);padding:44px 0 64px;}
.article-inner{max-width:var(--readw);margin:0 auto;padding:0 22px;}
@media(min-width:720px){.article-inner{padding:0 32px;}}
.article-head{margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--rule);}
.article-head .a-cat{display:inline-block;font-size:12px;font-weight:700;color:var(--accent);
  background:rgba(234,122,46,.1);border-radius:999px;padding:4px 13px;margin-bottom:14px;}
.article-head h1{font-size:clamp(24px,4.2vw,34px);font-weight:900;color:var(--navy);line-height:1.38;}
.article-head .a-meta{margin-top:14px;font-size:12.5px;color:var(--mute);}
.article-body{font-size:15.5px;color:var(--ink);}
.article-body h2{font-size:clamp(20px,3.4vw,25px);font-weight:800;color:var(--navy);margin:44px 0 14px;
  padding-top:14px;border-top:2px solid var(--section);}
.article-body h3{font-size:18px;font-weight:700;color:var(--navy);margin:30px 0 8px;
  padding-left:12px;border-left:4px solid var(--accent);}
.article-body p{margin:0 0 18px;}
.article-body strong,.article-body b{color:var(--navy);font-weight:700;}
.article-body ul,.article-body ol{margin:0 0 20px;padding-left:0;list-style:none;}
.article-body ul li{position:relative;padding:5px 0 5px 26px;}
.article-body ul li::before{content:"";position:absolute;left:4px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--accent);}
.article-body ol{counter-reset:oli;}
.article-body ol li{position:relative;padding:5px 0 5px 30px;counter-increment:oli;}
.article-body ol li::before{content:counter(oli);position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;font-family:var(--font-en);}
.article-body .checklist li{padding-left:30px;}
.article-body .checklist li::before{content:"";left:2px;top:8px;width:16px;height:16px;border-radius:5px;
  background:transparent;border:2px solid var(--accent);}
.article-body blockquote{margin:0 0 22px;padding:16px 20px;background:var(--section);border-left:4px solid var(--accent-2);
  border-radius:0 10px 10px 0;color:var(--mute);font-size:14px;line-height:1.85;}
.article-body blockquote p:last-child{margin:0;}
.article-body a.inlink{color:var(--accent);font-weight:700;text-decoration:underline;}

/* 記事内の表（OK/NG表を崩さず再現・スマホは横スクロール） */
.tbl-wrap{margin:0 0 24px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);
  border-radius:14px;box-shadow:var(--shadow);}
table.okng{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px;background:#fff;}
table.okng thead th{background:var(--navy);color:#fff;font-weight:700;text-align:left;padding:13px 15px;font-size:13px;
  vertical-align:top;}
table.okng tbody td{padding:13px 15px;border-top:1px solid var(--rule);vertical-align:top;line-height:1.7;color:var(--ink);}
table.okng tbody td:first-child{background:rgba(234,122,46,.055);font-weight:700;color:var(--navy);white-space:normal;}
table.okng tbody tr:nth-child(even) td{background:rgba(15,44,64,.02);}
table.okng tbody tr:nth-child(even) td:first-child{background:rgba(234,122,46,.08);}
.tbl-caption{font-size:13px;font-weight:700;color:var(--navy);margin:0 0 8px;}

/* 記事末尾の内部リンク・CTAカード */
.article-cta{max-width:var(--readw);margin:40px auto 0;padding:0 22px;}
@media(min-width:720px){.article-cta{padding:0 32px;}}
.cta-card{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;border-radius:18px;
  padding:34px 30px;text-align:center;box-shadow:0 20px 46px rgba(10,34,48,.28);}
.cta-card h3{font-size:clamp(18px,3vw,22px);font-weight:800;color:#fff;margin-bottom:10px;}
.cta-card p{font-size:14.5px;color:rgba(255,255,255,.9);margin:0 auto 20px;max-width:520px;}
.cta-card .btn{background:#fff;color:var(--navy);box-shadow:0 8px 20px rgba(0,0,0,.2);}
.cta-card .btn:hover{filter:brightness(.97);}
.related{max-width:var(--readw);margin:34px auto 0;padding:0 22px;}
@media(min-width:720px){.related{padding:0 32px;}}
.related h4{font-size:14px;font-weight:700;color:var(--mute);margin-bottom:12px;letter-spacing:.04em;}
.related a{display:flex;gap:12px;align-items:center;background:var(--section);border:1px solid var(--rule);
  border-radius:12px;padding:16px 18px;margin-bottom:10px;transition:transform .2s,border-color .2s;}
.related a:hover{transform:translateY(-2px);border-color:var(--accent-2);}
.related a .r-cat{flex:none;font-size:11px;font-weight:700;color:var(--accent);}
.related a .r-t{font-size:14px;font-weight:700;color:var(--navy);line-height:1.5;}

/* ピラー簡易ページ */
.pillar-lead{background:var(--section);}
.pillar-lead .wrap{max-width:var(--readw);}
.pillar-lead p{font-size:15.5px;color:var(--ink);margin:0 0 16px;}

/* ===================================================================
   メディアトップ 記事主役レイアウト（2026-07-02 里見仕様・.m-* 新設）
   ・トップ（/media/index.html）専用。既存クラスは eyelash 配下が使用中
     のため無改変で残す（.mhero/.posts/.cta/.section-head 等）。
   ・面は白＋極薄グレーのみ。濃紺べた塗りはフッター限定。
=================================================================== */

/* 共通: セクション余白（読み物の"間"） */
.m-section{padding:72px 0;}
@media(max-width:600px){.m-section{padding:48px 0;}}

/* 共通: 左寄せの静かな見出し */
.m-sechead{margin-bottom:28px;}
.m-sechead .m-en{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 6px;}
.m-sechead h2{font-size:clamp(18px,3vw,22px);font-weight:800;color:var(--navy);
  padding-left:12px;border-left:4px solid var(--accent);line-height:1.3;}

/* 共通: メタ（カテゴリ＝オレンジ小／日付＝Inter・グレー小） */
.m-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0;margin:0 0 8px;line-height:1.4;}
.m-meta .m-cat{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--accent);}
.m-meta .m-date{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--mute);}
.m-meta .m-date::before{content:"・";margin:0 7px;color:var(--mute);opacity:.5;font-family:var(--font-jp);}
.m-meta .m-soon-txt{font-family:var(--font-jp);letter-spacing:.02em;}

/* 共通: 抜粋（2〜3行で省略） */
.m-excerpt{font-size:14px;color:var(--mute);line-height:1.8;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* 共通: サムネ（16:9）とブランド地＋線画アイコンのプレースホルダ */
.m-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--section);}
.m-ph{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(234,122,46,.10),rgba(15,44,64,.06));}
.m-ph svg{width:42px;height:42px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.55;}
.m-ph-soon{background:linear-gradient(140deg,rgba(234,122,46,.06),rgba(15,44,64,.04));}
.m-ph-soon svg{opacity:.38;}
.m-soonbadge{position:absolute;top:10px;right:10px;font-size:11px;font-weight:700;color:var(--mute);
  background:var(--section);border:1px solid var(--rule);border-radius:999px;padding:3px 10px;line-height:1.5;}

/* ② マストヘッド（メディアの名札・写真なし・ボタンなし） */
.m-masthead{background:var(--paper);padding:28px 0 8px;}
.m-masthead .m-eyebrow{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 6px;}
.m-masthead h1{font-size:clamp(17px,2.6vw,22px);font-weight:700;color:var(--navy);line-height:1.5;}
.m-masthead .m-mast-lead{font-size:13px;color:var(--mute);margin:6px 0 0;line-height:1.8;}
@media(max-width:600px){.m-masthead{padding:20px 0 4px;}}

/* ③ ピックアップ（特大1＋中型2・雑誌トップ） */
.m-pickup{background:var(--paper);padding-top:34px;}
.m-pickup-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:stretch;}
@media(max-width:860px){.m-pickup-grid{grid-template-columns:1fr;}}

/* 特大＝表紙型(a): 画像全面＋下部に紺グラデ膜＋白文字 */
.m-feature{position:relative;display:flex;align-items:flex-end;min-height:380px;
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:var(--navy-deep);
  transition:transform .25s ease,box-shadow .25s ease;}
.m-feature:hover{transform:translateY(-4px);box-shadow:0 24px 52px rgba(15,44,64,.18);}
.m-feature-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;}
.m-feature:hover .m-feature-img{transform:scale(1.04);}
.m-feature-overlay{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,34,48,.85),rgba(10,34,48,.15) 60%,transparent);}
.m-feature-body{position:relative;z-index:2;padding:26px 28px 24px;color:#fff;width:100%;}
.m-feature-body .m-meta .m-cat{color:var(--accent-2);}
.m-feature-body .m-meta .m-date{color:rgba(255,255,255,.8);}
.m-feature-body .m-meta .m-date::before{color:rgba(255,255,255,.5);}
.m-feature-body h3{font-size:clamp(22px,3.4vw,30px);font-weight:800;line-height:1.42;color:#fff;
  margin:0 0 10px;text-wrap:balance;}
.m-feature:hover .m-feature-body h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;}
.m-feature-body .m-excerpt{font-size:15px;color:rgba(255,255,255,.88);-webkit-line-clamp:3;}
.m-feature-body .m-more{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--accent-2);}
.m-imgnote{position:absolute;top:12px;right:14px;z-index:2;font-size:11px;color:rgba(255,255,255,.72);
  letter-spacing:.04em;text-shadow:0 1px 4px rgba(0,0,0,.55);pointer-events:none;}
@media(max-width:600px){
  .m-feature{min-height:320px;}
  .m-feature-body{padding:20px 20px 18px;}
  .m-feature-body .m-excerpt{-webkit-line-clamp:2;font-size:14px;}
}

/* 中型カード（右カラム縦2枚） */
.m-side{display:flex;flex-direction:column;gap:22px;}
.m-midcard{flex:1;display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
a.m-midcard:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(15,44,64,.12);border-color:var(--accent-2);}
.m-midcard .m-thumb{border-radius:0;}
.m-mid-body{padding:14px 16px 16px;}
.m-mid-body h3{font-size:17px;font-weight:700;color:var(--navy);line-height:1.5;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* 近日公開カード（リンク無効・淡く） */
.m-soon{cursor:default;opacity:.82;}
.m-soon h3{color:rgba(15,44,64,.72);}

/* ④ カテゴリチップ */
.m-cats{background:var(--section);}
.m-chip-row{display:flex;flex-wrap:wrap;gap:10px;}
.m-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--rule);
  border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.5;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;}
.m-chip.on:hover{transform:translateY(-2px);border-color:var(--accent-2);box-shadow:0 8px 20px rgba(15,44,64,.10);}
.m-chip .m-chip-note{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px;
  background:var(--section);color:var(--mute);border:1px solid var(--rule);line-height:1.5;}
.m-chip .m-chip-note.ok{background:rgba(234,122,46,.12);color:var(--accent);border-color:transparent;}
.m-chip.soon{color:var(--mute);font-weight:500;cursor:default;background:rgba(255,255,255,.66);}
.m-chip.faint{opacity:.6;font-size:12.5px;padding:7px 15px;}

/* ⑤ 新着記事グリッド */
.m-new{background:var(--paper);}
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:960px){.m-grid{grid-template-columns:repeat(2,1fr);}}
.m-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.m-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);transform-origin:left;transition:transform .35s;}
a.m-card:hover{transform:translateY(-4px);box-shadow:0 24px 52px rgba(15,44,64,.14);border-color:var(--accent-2);}
a.m-card:hover::after{transform:scaleX(1);}
.m-card-body{padding:16px 18px 18px;}
.m-card-body h3{font-size:16px;font-weight:700;color:var(--navy);line-height:1.5;margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* モバイル: 横長カード（サムネ左・文字右）で縦の消費を抑える＝里見推奨 */
@media(max-width:600px){
  .m-grid{grid-template-columns:1fr;gap:14px;}
  .m-card{flex-direction:row;align-items:stretch;}
  .m-card .m-thumb{flex:0 0 38%;aspect-ratio:auto;min-height:96px;}
  .m-card .m-ph svg{width:30px;height:30px;}
  .m-card .m-soonbadge{top:8px;right:8px;font-size:10px;padding:2px 8px;}
  .m-card-body{padding:12px 14px;min-width:0;}
  .m-card-body h3{font-size:14.5px;}
  .m-card-body .m-excerpt{display:none;}
}

/* ⑥ お悩みタグ（#タグ表記） */
.m-tags{background:var(--section);}
.m-tag-row{display:flex;flex-wrap:wrap;gap:10px;}
.m-tagchip{display:inline-flex;align-items:baseline;gap:2px;background:#fff;border:1px solid var(--rule);
  border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.6;}
.m-tagchip .m-hash{color:var(--accent);font-weight:700;font-family:var(--font-en);}

/* ⑦ 控えめ相談CTA帯（濃紺全面はトップでは使わない） */
.m-ctaband{background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:22px 0;}
.m-ctaband-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.m-ctaband-copy{margin:0;font-size:15px;font-weight:700;color:var(--navy);line-height:1.7;}
.m-ctaband-copy span{display:block;font-size:12.5px;font-weight:400;color:var(--mute);}
.m-ctabtn{padding:11px 28px;font-size:14px;flex:none;}
@media(max-width:600px){
  .m-ctaband-inner{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* ⑧ フッター編集部クレジット */
.m-editorial{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.14);}
.m-editorial .m-ed-name{display:inline-block;color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.02em;}
.m-editorial p{margin:4px 0 0;font-size:12px;color:rgba(255,255,255,.6);line-height:1.8;}

/* ===================================================================
   E-E-A-T 強化（2026-07-04 芝原コンテンツ・川原実装）
   運営者情報ページ・著者表記・公開日・要点ボックス・FAQ・フッター導線
=================================================================== */

/* フッター 運営者情報導線（全ページ共通・footer-credit の直上に置く） */
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px;font-size:12.5px;}
.footer-legal a{color:rgba(255,255,255,.72);text-decoration:none;}
.footer-legal a:hover{color:#fff;text-decoration:underline;}
.footer-legal span{color:rgba(255,255,255,.24);}

/* 記事: 公開日・更新日（.a-meta の下） */
.a-dates{margin-top:8px;font-family:var(--font-en);font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:var(--mute);display:flex;flex-wrap:wrap;gap:4px 14px;}
.a-dates time{color:var(--mute);}

/* 記事: この記事の要点ボックス（H1直下） */
.a-summary{margin:0 0 30px;padding:20px 22px;background:linear-gradient(135deg,rgba(234,122,46,.07),rgba(15,44,64,.04));
  border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;}
.a-summary .a-summary-h{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;
  color:var(--navy);letter-spacing:.02em;margin:0 0 12px;}
.a-summary .a-summary-h::before{content:"";width:16px;height:16px;flex:none;border-radius:4px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));}
.a-summary ul{margin:0;padding:0;list-style:none;}
.a-summary li{position:relative;padding:5px 0 5px 24px;font-size:14.5px;line-height:1.75;color:var(--ink);}
.a-summary li::before{content:"";position:absolute;left:4px;top:13px;width:8px;height:8px;
  border-radius:50%;background:var(--accent);}
.a-summary li strong{color:var(--navy);font-weight:700;}

/* 記事: よくある質問（FAQ・まとめの後・CTAの前） */
.a-faq{margin:44px 0 0;}
.a-faq h2{font-size:clamp(20px,3.4vw,25px);font-weight:800;color:var(--navy);margin:0 0 18px;
  padding-top:14px;border-top:2px solid var(--section);}
.a-faq-item{border:1px solid var(--rule);border-radius:12px;padding:18px 20px;margin-bottom:14px;
  background:#fff;box-shadow:var(--shadow);}
.a-faq-q{display:flex;gap:10px;font-size:16px;font-weight:700;color:var(--navy);line-height:1.55;margin:0 0 8px;}
.a-faq-q::before{content:"Q";flex:none;width:24px;height:24px;border-radius:50%;background:var(--navy);
  color:#fff;font-family:var(--font-en);font-size:13px;font-weight:700;display:grid;place-items:center;}
.a-faq-a{display:flex;gap:10px;font-size:14.5px;color:var(--ink);line-height:1.85;margin:0;}
.a-faq-a::before{content:"A";flex:none;width:24px;height:24px;border-radius:50%;
  background:rgba(234,122,46,.12);color:var(--accent);font-family:var(--font-en);font-size:13px;
  font-weight:700;display:grid;place-items:center;}
.a-faq-a strong{color:var(--navy);font-weight:700;}

/* 記事: 著者表記（byline・まとめ末尾／CTAの前） */
.a-byline{display:flex;gap:14px;align-items:flex-start;margin:36px 0 0;padding:20px 22px;
  background:var(--section);border:1px solid var(--rule);border-radius:14px;}
.a-byline-ic{flex:none;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(140deg,rgba(234,122,46,.2),rgba(15,44,64,.08));color:var(--accent);
  display:grid;place-items:center;}
.a-byline-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.a-byline-body{min-width:0;}
.a-byline-name{font-size:14.5px;font-weight:700;color:var(--navy);margin:0 0 3px;}
.a-byline-name a{color:var(--accent);text-decoration:underline;}
.a-byline-desc{font-size:12.5px;color:var(--mute);margin:0;line-height:1.7;}

/* 運営者情報ページ（/media/about/） */
.about-body{max-width:var(--readw);margin:0 auto;padding:0 22px;font-size:15.5px;color:var(--ink);}
@media(min-width:720px){.about-body{padding:0 32px;}}
.about-body p{margin:0 0 18px;}
.about-body strong{color:var(--navy);font-weight:700;}
.about-body h2{font-size:clamp(19px,3vw,23px);font-weight:800;color:var(--navy);margin:38px 0 14px;
  padding-top:14px;border-top:2px solid var(--section);}
.about-body a.inlink{color:var(--accent);font-weight:700;text-decoration:underline;}
.about-body ol{counter-reset:aoli;margin:0 0 20px;padding-left:0;list-style:none;}
.about-body ol li{position:relative;padding:8px 0 8px 40px;counter-increment:aoli;
  border-bottom:1px solid var(--rule);}
.about-body ol li:last-child{border-bottom:0;}
.about-body ol li::before{content:counter(aoli);position:absolute;left:0;top:9px;width:26px;height:26px;
  border-radius:50%;background:var(--navy);color:#fff;font-size:13px;font-weight:700;
  display:grid;place-items:center;font-family:var(--font-en);}
.about-body ol li strong{color:var(--navy);}

/* 記事内の制作例スクリーンショット（2026-07-11 制作例実体投入） */
.article-body figure.a-shot{margin:18px 0 28px;}
.article-body figure.a-shot img{width:100%;height:auto;max-height:480px;object-fit:cover;object-position:top center;
  border:1px solid var(--rule);border-radius:12px;box-shadow:0 10px 24px rgba(15,44,64,.08);display:block;background:#fff;}
.article-body figure.a-shot figcaption{font-size:12.5px;color:var(--mute);margin-top:8px;line-height:1.7;}
.article-body figure.a-shot figcaption a{color:var(--accent);font-weight:700;text-decoration:underline;}

/* CTAカードの料金1行（2026-07-11 自社料金への導線） */
.cta-card .cta-price{font-size:13px;color:rgba(255,255,255,.88);margin:16px auto 0;max-width:520px;}
.cta-card .cta-price a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700;}