/* Total Facade コラム記事スタイル（single投稿専用・紙×真鍮 light variant）
 * 原本: 10_大板ガラス/01_コンテンツ/SEO記事/2_社長確認中/article.css（2026-07-14 hallmark redesign）
 * サイト共通（黒曜×真鍮 style.css）と変数名・クラス名が重なるため、全セレクタを
 * .article-wrap 配下にスコープ限定して移植。ホーム・固定ページには一切影響しない。
 * style.css 内の旧記事スタイル（青系 .article-body）の上書き中和も本ファイルで行う。 */

.article-wrap{
  --bg:oklch(97% 0.008 85); --bg-2:oklch(94.5% 0.012 82); --panel:oklch(95.5% 0.014 80);
  --ink:oklch(19% 0.012 75); --ink-2:oklch(24% 0.012 75); --soft:oklch(29% 0.010 75); --muted:oklch(40% 0.014 75);
  --faint:oklch(46% 0.016 75); --dim:oklch(52% 0.016 75);
  --line:rgba(40,30,10,.12); --line-h:rgba(40,30,10,.22);
  --accent:oklch(47% 0.11 75); --accent-pale:oklch(89% 0.05 82); --accent-fill:rgba(150,108,40,.08); --accent-border:rgba(150,108,40,.4);
  --f-lat:'Cormorant Garamond',serif;
  --f-ja:'Shippori Mincho',serif;
  --f-body:'Zen Kaku Gothic New',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.9;
  padding-top:0;
  -webkit-font-smoothing:antialiased;
}
.article-wrap img{max-width:100%;display:block;}
.article-wrap h1,.article-wrap h2,.article-wrap h3{font-style:normal;margin:0;}

/* ── 旧記事スタイル（青系）の中和 ── */
.article-wrap .article-breadcrumb{font-size:13px;color:var(--faint);padding:96px 5vw 0;max-width:1060px;margin:0 auto;letter-spacing:.05em;}
.article-wrap .article-breadcrumb a{color:var(--muted);}
.article-wrap .article-body{max-width:none;margin:0;padding:0;font-family:var(--f-body);line-height:1.9;color:var(--ink-2);font-size:17.5px;}
.article-wrap .article-body a:not(.cta__action){color:inherit;border-bottom:none;padding-bottom:0;}
.article-wrap .article-body a:not(.cta__action):hover{color:inherit;border-color:transparent;}
.article-wrap .a-title{border-left:none;padding-left:0;}
.article-wrap .tbl th{background:transparent;}
.article-wrap .tbl tr:nth-child(even) td{background:transparent;}
.article-wrap .cta__h{border-bottom:none;padding-bottom:0;}

/* ── ARTICLE INTRO ── */
.article-wrap .a-head{padding:6vh 5vw 0;max-width:1060px;margin:0 auto;}
.article-wrap .a-eyebrow{font-family:var(--f-lat);font-size:13.5px;letter-spacing:.3em;color:var(--accent);text-transform:uppercase;margin:0 0 16px;}
.article-wrap .a-flag{display:inline-block;font-family:var(--f-lat);font-size:13.5px;letter-spacing:.14em;color:var(--bg);background:var(--accent);padding:4px 12px;text-transform:uppercase;margin-bottom:18px;}
.article-wrap .a-title{font-family:var(--f-ja);font-size:clamp(28px,4.6vw,54px);font-weight:500;line-height:1.35;letter-spacing:.03em;color:var(--ink);overflow-wrap:anywhere;min-width:0;}
.article-wrap .a-sub{font-family:var(--f-ja);font-size:clamp(15px,1.7vw,19px);line-height:1.8;color:var(--muted);margin-top:16px;letter-spacing:.05em;}
.article-wrap .a-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--faint);letter-spacing:.05em;}
.article-wrap .a-meta b{color:var(--muted);font-weight:400;}
.article-wrap .a-lead{font-family:var(--f-ja);font-size:clamp(16px,1.8vw,19px);line-height:2.1;color:var(--soft);margin-top:34px;letter-spacing:.04em;}

/* ── ARTICLE BODY ── */
.article-wrap .art{max-width:760px;margin:0 auto;padding:7vh 5vw 4vh;}
.article-wrap .art h2{font-family:var(--f-ja);font-size:clamp(22px,2.8vw,30px);font-weight:500;color:var(--ink);letter-spacing:.04em;line-height:1.6;margin:84px 0 8px;padding-top:34px;padding-bottom:0;border-top:1px solid var(--line-h);border-bottom:none;position:relative;}
.article-wrap .art h2::before{content:"";position:absolute;top:-1px;left:0;width:64px;height:1px;background:var(--accent);}
.article-wrap .art h3{font-family:var(--f-ja);font-size:clamp(17px,2vw,21px);font-weight:500;color:var(--ink-2);letter-spacing:.04em;margin:48px 0 4px;}
.article-wrap .art p{font-size:17.5px;color:var(--soft);margin:20px 0;letter-spacing:.02em;}
.article-wrap .art strong{color:var(--ink);font-weight:500;}
.article-wrap .art ul,.article-wrap .art ol{padding-left:1.4em;margin:18px 0;font-size:17.5px;color:var(--soft);line-height:1.9;}
.article-wrap .art li{margin:10px 0;}
.article-wrap .art li::marker{color:var(--accent);}
.article-wrap .kekka{background:var(--panel);border-left:2px solid var(--accent);padding:22px 26px;margin:26px 0;font-size:16.5px;color:var(--ink-2);line-height:2.0;}
.article-wrap .kekka b{color:var(--ink);font-weight:500;}
.article-wrap .note{font-size:14px;color:var(--muted);line-height:1.9;margin:14px 0;}
.article-wrap .src{font-size:13.5px;color:var(--muted);letter-spacing:.03em;}
.article-wrap .tbl{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px;}
.article-wrap .tbl th{font-family:var(--f-ja);font-weight:500;color:var(--accent);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-h);font-size:13.5px;letter-spacing:.08em;white-space:nowrap;}
.article-wrap .tbl td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--soft);line-height:1.8;vertical-align:top;}
.article-wrap .tbl td:first-child{color:var(--ink-2);}
.article-wrap .dictionary{margin:26px 0;border-top:1px solid var(--line);}
.article-wrap .dictionary>div{display:flex;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.article-wrap .dictionary dt{font-family:var(--f-ja);font-weight:500;font-size:15px;color:var(--ink);min-width:150px;flex-shrink:0;margin:0;}
.article-wrap .dictionary dd{font-size:15px;color:var(--muted);margin:0;flex:1;min-width:220px;line-height:1.85;}

/* ── 図版 ── */
.article-wrap .fig{margin:36px 0;border:1px solid var(--line);background:var(--bg-2);padding:34px 26px 20px;}
.article-wrap .fig svg{width:100%;height:auto;display:block;}
.article-wrap .fig-cap{font-size:13.5px;color:var(--faint);letter-spacing:.06em;margin-top:16px;text-align:center;}

/* ── 写真：仮置き＋プレースホルダー ── */
.article-wrap .photo{margin:40px 0;}
.article-wrap .photo img{width:100%;max-height:520px;object-fit:cover;border:1px solid var(--line);border-radius:0;}
.article-wrap .photo-cap{font-size:13.5px;color:var(--faint);letter-spacing:.06em;margin-top:10px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.article-wrap .photo-cap .kari{color:var(--accent);}
.article-wrap .ph-box{margin:40px 0;border:1px dashed var(--accent-border);background:var(--accent-fill);padding:34px 28px;text-align:center;}
.article-wrap .ph-box__label{font-family:var(--f-lat);font-size:13.5px;letter-spacing:.22em;color:var(--accent);text-transform:uppercase;margin-bottom:12px;}
.article-wrap .ph-box__body{font-size:15.5px;color:var(--muted);line-height:2.0;max-width:34em;margin:0 auto;}
.article-wrap .ph-box__path{font-size:13.5px;color:var(--faint);margin-top:10px;word-break:break-all;}

/* ── ★社長確認 ── */
.article-wrap .owner-check{margin:36px 0;border:1px solid var(--accent-border);background:var(--accent-fill);padding:24px 26px;}
.article-wrap .owner-check__label{font-family:var(--f-ja);font-size:13.5px;font-weight:500;letter-spacing:.14em;color:var(--accent);margin-bottom:10px;}
.article-wrap .owner-check__body{font-size:15.5px;color:var(--soft);line-height:2.0;}

/* ── FAQ ── */
.article-wrap .faq{margin:30px 0;}
.article-wrap .faq-item{border-top:1px solid var(--line);padding:24px 0;}
.article-wrap .faq-item:last-child{border-bottom:1px solid var(--line);}
.article-wrap .faq-q{font-family:var(--f-ja);font-size:17px;font-weight:500;color:var(--ink);display:flex;gap:14px;line-height:1.8;}
.article-wrap .faq-q::before{content:"Q";font-family:var(--f-lat);color:var(--accent);font-size:18px;flex-shrink:0;}
.article-wrap .faq-a{font-size:16.5px;color:var(--muted);margin-top:12px;padding-left:31px;line-height:2.0;}

/* ── 関連記事 ── */
.article-wrap .rel-links{margin:26px 0;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);}
.article-wrap .rel-links a{display:flex;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--soft);transition:color .3s,gap .3s;}
.article-wrap .rel-links a::before{content:"→";font-family:var(--f-lat);color:var(--accent);}
.article-wrap .rel-links a:hover{color:var(--ink);gap:20px;}

/* ── CTA ── */
.article-wrap .cta{padding:110px 5vw;text-align:center;border-top:1px solid var(--line);margin-top:80px;background:transparent;}
.article-wrap .cta__eyebrow{font-family:var(--f-lat);font-size:13.5px;letter-spacing:.28em;color:var(--faint);text-transform:uppercase;}
.article-wrap .cta__h{font-family:var(--f-ja);font-weight:500;font-size:clamp(21px,2.7vw,35px);color:var(--ink);margin:20px auto 36px;line-height:1.8;letter-spacing:.04em;}
.article-wrap .cta__note{font-size:13.5px;color:var(--faint);margin-top:24px;letter-spacing:.03em;}

/* CTA主導線ボタン（2026-07-18再設計：グラデ塗り＋カラーグロー影を廃止しフラットなLINEグリーンに統一・裕二さん指定） */
.article-wrap .cta__action{
  display:inline-flex;align-items:center;gap:12px;
  padding:19px 48px;
  border:none;
  background:#06C755;
  color:#fff;
  font-family:var(--f-body);font-weight:500;font-size:15px;letter-spacing:.08em;
  white-space:nowrap;
  transition:background-color .3s var(--ease);
}
.article-wrap .cta__action:hover{background:#05a847;}
.article-wrap .cta__action:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.article-wrap .cta__action:active{transform:translateY(1px);}
.article-wrap .cta__action .arrow{font-family:var(--f-lat);transition:transform .3s var(--ease);}
.article-wrap .cta__action:hover .arrow{transform:translateX(4px);}
@media(max-width:640px){.article-wrap .cta__action{padding:17px 32px;font-size:14px;}}

@media (max-width:760px){
  .article-wrap .a-head{padding-top:4vh;}
  .article-wrap .cta{padding:80px 7vw;}
  .article-wrap .dictionary dt{min-width:100%;}
  .article-wrap .article-breadcrumb{padding:88px 7vw 0;}
}
@media (max-width:640px){
  .article-wrap .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .article-wrap .tbl th,.article-wrap .tbl td{white-space:nowrap;}
}

/* ── 記事ページ共通ヘッダーの紙×真鍮化（2026-07-18） ──
 * .head はsingle.phpでget_header()により.article-wrapの外側に出力されるため、
 * 上記の.article-wrapスコープのトークンが届かず、サイト共通（黒曜×真鍮）の暗色配色のまま
 * 明るい記事ページに乗ってしまっていた。body.single-post に限定して紙×真鍮トーンに寄せる。
 * 配色値は確認用HTML自身のヘッダーで既に採用済みの値をそのまま流用（新規デザイン判断ではない）。 */
body.single-post .head{
  background:rgba(248,245,238,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(40,30,10,.12);
}
body.single-post .head .brand{color:oklch(19% 0.012 75);}
body.single-post .head .nav{color:rgba(30,20,10,.68);}
body.single-post .head .nav a:hover,
body.single-post .head .nav a.active{color:oklch(19% 0.012 75);}
body.single-post .head .nav a::after{background:oklch(47% 0.11 75);}
body.single-post .head .lang{color:rgba(30,20,10,.62);}
body.single-post .head .lang b{color:oklch(19% 0.012 75);}