@charset "utf-8";
/* ============================================================
   ツギステ セカンドキャリアガイド 記事テンプレート用CSS
   （標準投稿 single.php 専用・2026-07-20 Claude作成）
   デザイン言語＝/guide/ 一覧ページ（_template_v2）に準拠：
   白基調・黒見出し・1px罫線・角丸小・ブランド細グラデ帯。
   ============================================================ */

:root{
  --brand-pink:#CD4696; --brand-pink-deep:#A23577; --brand-orange:#EF8A3C; --brand-yellow:#F0C800;
  --brand-gradient:linear-gradient(90deg,#CD4696,#F0C800);
  --ink:#26202A; --ink-2:#514B5A; --ink-3:#8B8494;
  --line:#E9E5EC; --line-strong:#26202A; --hair:#EFECF1;
  --bg:#FFFFFF; --bg-2:#F8F7F9; --soft:#FBF4F8;
  --font-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --wrap:1120px; --read:720px;
}

/* --- minimal reset（get_header を使わないため自前で持つ） --- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.tsg-guide{font-family:var(--font-sans);color:var(--ink);background:var(--bg);line-height:1.9;letter-spacing:.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.tsg-guide img{max-width:100%;display:block}
body.tsg-guide a{color:inherit;text-decoration:none}

/* ---------- header ---------- */
.ga-head{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.ga-head-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:62px;display:flex;align-items:center;gap:20px}
.ga-logo img{height:24px;width:auto}
.ga-guidelink{margin-left:auto;font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:.04em;display:inline-flex;align-items:center;gap:6px;padding:6px 2px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.ga-guidelink:hover{color:var(--ink);border-bottom-color:var(--brand-pink)}
.ga-guidelink svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.ga-band{height:4px;background:var(--brand-gradient)}

/* ---------- main / article shell ---------- */
.ga-main{padding:0 24px}
.ga-article{max-width:var(--read);margin:0 auto;padding:52px 0 20px}
.ga-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--ink-3);text-transform:uppercase}
.ga-eyebrow::before{content:"";width:22px;height:2px;background:var(--brand-gradient)}
.ga-title{font-size:clamp(25px,4.4vw,34px);font-weight:800;line-height:1.5;letter-spacing:.01em;margin:20px 0 0;color:var(--ink)}
.ga-meta{margin-top:20px;padding-bottom:26px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;align-items:center;gap:9px;letter-spacing:.02em}
.ga-meta .ga-dot{width:7px;height:7px;border-radius:50%;background:var(--brand-gradient);display:inline-block}
.ga-meta .ga-sep{opacity:.5}

/* ---------- article body typography ---------- */
.ga-body{padding-top:8px}
.ga-body p{font-size:16.5px;line-height:1.98;color:var(--ink-2);margin:0 0 1.45em}
.ga-body strong{font-weight:700;color:var(--ink)}
.ga-body a:not(.ga-cta-btn){color:var(--brand-pink-deep);font-weight:600;border-bottom:1px solid rgba(162,53,119,.28);transition:border-color .2s}
.ga-body a:not(.ga-cta-btn):hover{border-bottom-color:var(--brand-pink-deep)}

/* --- 見出し h2：左のブランド細帯＋下の極細罫線 --- */
.ga-body h2{position:relative;font-size:clamp(20px,3vw,24px);font-weight:800;line-height:1.55;letter-spacing:.01em;color:var(--ink);margin:2.9em 0 1.1em;padding:0 0 14px 18px;border-bottom:1px solid var(--line)}
.ga-body h2::before{content:"";position:absolute;left:0;top:2px;bottom:14px;width:5px;border-radius:3px;background:var(--brand-gradient)}
.ga-body h2:first-child{margin-top:.6em}

/* --- 見出し h3 --- */
.ga-body h3{font-size:17.5px;font-weight:700;line-height:1.6;color:var(--ink);margin:2.1em 0 .7em;padding-left:13px;border-left:3px solid var(--brand-pink)}

/* --- リスト --- */
.ga-body ul,.ga-body ol{margin:0 0 1.6em;padding-left:0;list-style:none}
.ga-body li{position:relative;font-size:16px;line-height:1.9;color:var(--ink-2);margin:0 0 .7em;padding-left:26px}
.ga-body ul>li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--brand-pink);box-shadow:0 0 0 3px var(--soft)}
.ga-body ol{counter-reset:ga-ol}
.ga-body ol>li{counter-increment:ga-ol;padding-left:38px;margin-bottom:.85em}
.ga-body ol>li::before{content:counter(ga-ol);position:absolute;left:0;top:.15em;width:24px;height:24px;border-radius:50%;background:var(--soft);border:1px solid var(--line);color:var(--brand-pink-deep);font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.ga-body li strong{color:var(--ink)}

/* --- 引用（体験談）--- */
.ga-body blockquote{position:relative;margin:1.8em 0;padding:20px 24px 20px 26px;background:var(--soft);border-left:4px solid var(--brand-pink);border-radius:0 8px 8px 0}
.ga-body blockquote p{margin:0;font-size:15.5px;line-height:2;color:var(--ink)}
.ga-body blockquote p+p{margin-top:.8em}

/* --- 図・写真 --- */
/* 本文中の画像は width/height 属性があっても縦横比を保つ（figure で囲まれていない素の <img> 対策） */
.ga-body img{height:auto}
.ga-body figure{margin:2.2em 0}
.ga-body figure img{width:100%;border-radius:6px}
/* 図解（表・フロー図）＝本文幅いっぱい・切り抜かず自然な高さ */
.ga-body figure.tsg-eyecatch{margin:0 0 2em}
.ga-body figure.tsg-eyecatch img{width:100%;height:auto;display:block;border-radius:10px}
/* 実写挿絵＝高さ上限＋角丸＋キャプション（大きすぎ防止） */
.ga-body figure.ga-photo img{max-height:380px;object-fit:cover;object-position:center 32%;border-radius:10px}
.ga-body figcaption{font-size:12.5px;line-height:1.7;color:var(--ink-3);margin-top:10px;text-align:center}

/* --- 区切り線 --- */
.ga-body hr{border:0;border-top:1px solid var(--line);margin:3em 0 2.2em}

/* --- 本文内インラインCTA（LINE誘導ボタン＝緑に統一・2026-07-21）---
   本文HTMLは inline style（box=#FBE9F3 / button=#CD4696）のまま。
   ここで !important 上書きし、box=淡い緑・button=LINE公式グリーン#06C755 に統一する。
   （みんなのイメージが緑＝LINE。CTAは全てLINE誘導なので一括で緑化） */
.ga-body div[style*="FBE9F3"]{background:#EAF8F0!important;border:1px solid #C4E9D3!important;border-radius:12px}
.ga-body div[style*="FBE9F3"] a[style*="CD4696"]{background:#06C755!important;box-shadow:0 2px 8px rgba(6,199,85,.22)}
.ga-body div[style*="FBE9F3"] a[style*="CD4696"]:hover{background:#05B64D!important}

/* ---------- back link ---------- */
.ga-back{max-width:var(--read);margin:8px auto 0;padding:22px 0 4px;border-top:1px solid var(--line)}
.ga-back a{font-size:13.5px;font-weight:700;color:var(--brand-pink-deep);display:inline-flex;align-items:center;gap:7px}
.ga-back a:hover{color:var(--brand-pink)}

/* ---------- footer ---------- */
.ga-foot{margin-top:56px;border-top:1px solid var(--line);background:var(--bg);padding:44px 0 40px}
.ga-foot-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:space-between}
.ga-foot-logo{height:30px;width:auto;margin-bottom:14px}
.ga-foot-org{font-size:12.5px;color:var(--ink-2);line-height:2}
.ga-foot-org a{color:var(--brand-pink)}
.ga-foot-links{font-size:12.5px;color:var(--ink-2);line-height:2;text-align:right}
.ga-foot-links a:hover{color:var(--brand-pink)}
.ga-foot-copy{max-width:var(--wrap);margin:26px auto 0;padding:0 24px;font-size:11px;color:var(--ink-3)}

@media(max-width:640px){
  .ga-head-in{padding:0 18px;height:56px}
  .ga-main{padding:0 18px}
  .ga-article{padding:36px 0 16px}
  .ga-body p{font-size:15.5px;line-height:1.95}
  .ga-body li{font-size:15px}
  .ga-body figure.ga-photo img{max-height:280px}
  .ga-foot-in{padding:0 18px}
  .ga-foot-links{text-align:left}
  .ga-foot-copy{padding:0 18px}
}