@charset "utf-8";
/*
Theme Name: MAXX child
Theme URI:https://tcd-theme.com/tcd043
Description:WordPressテーマ「MAXX」の子テーマ
Template:maxx_tcd043
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

/*
  ここから下にCSSを追記してください。
*/
/* ========== Works (single-work) ========== */
.work-single .work-wrap{max-width:980px;margin:40px auto 80px;padding:0 20px;box-sizing:border-box;}
.work-title{font-size:clamp(22px,3.2vw,32px);font-weight:700;margin:0 0 10px;}
.work-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.badge{display:inline-block;font-size:12px;line-height:1;padding:6px 10px;border-radius:999px;background:#f3f3f3;}
.badge--industry{background:#eef7ff;}
.badge--genre{background:#fff1e6;}
.work-eyecatch{margin:20px 0 32px;}
.work-eyecatch img{width:100%;height:auto;display:block;}
.work-sec{margin:36px 0;}
.work-sec__ttl{font-size:clamp(18px,2.4vw,24px);font-weight:700;margin:0 0 12px;border-left:4px solid #FF4001;padding-left:10px;}
.work-body{line-height:1.9;font-size:16px;white-space:pre-wrap;}
.work-effects{list-style:none;padding:0;margin:8px 0 0;}
.work-effects li{padding:8px 0;border-top:1px solid #eee;}
.work-effects li:first-child{border-top:none;}
.work-pager{display:flex;justify-content:space-between;margin-top:40px;gap:12px;}
.work-pager a{text-decoration:none;}
.work-cta{display:flex;gap:12px;margin:28px 0 12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:700}
.btn--primary{background:#FF4001;color:#fff}
.btn--primary:hover{filter:brightness(0.95)}
.btn--ghost{background:#fff;border:1px solid #ddd;color:#333}
.work-breadcrumb{font-size:13px;color:#666;margin:8px 0 16px}
.work-breadcrumb a{color:#666;text-decoration:none}
:root{
  /* Color */
  --brand:#FF4001;          /* コーポレート強調色（ボタン・見出しアクセント） */
  --brand-ink:#fff;         /* 強調上の文字色 */
  --ink:#181818;            /* 本文色 */
  --muted:#666;             /* 補助テキスト */
  --line:#E9E9E9;           /* 罫線 */
  --chip-bg:#F7F7F7;        /* バッジ背景 */

  /* Spacing scale（好みでまとめて変更） */
  --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:20px;
  --sp-5:28px; --sp-6:40px; --sp-7:56px;

  /* Radius & Shadow */
  --radius:12px;
  --shadow:0 6px 18px rgba(0,0,0,.06);

  /* Container max width */
  --container:1080px;
}

/* 本文色と行間。MAXXの上書きだけ軽めに */
body{color:var(--ink);line-height:1.85}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;background:var(--chip-bg);color:var(--ink);
  border:1px solid #eee;
}
.badge--industry{background:#FFF6F2;border-color:#FFD7C8;color:#E44610}
.badge--genre{background:#F5F7FF;border-color:#DDE3FF;color:#3A54E8}
.work-cta{display:flex;gap:12px;flex-wrap:wrap;margin:var(--sp-5) 0 var(--sp-3)}
.btn{display:inline-block;padding:12px 22px;border-radius:999px;text-decoration:none;font-weight:800}
.btn--primary{background:var(--brand);color:var(--brand-ink)}
.btn--primary:hover{filter:brightness(.96)}
.btn--ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.work-breadcrumb{font-size:13px;color:var(--muted);margin:var(--sp-3) 0}
.work-breadcrumb a{color:var(--muted);text-decoration:none}
.work-pager{display:flex;justify-content:space-between;margin:var(--sp-5) 0}
.work-pager a{text-decoration:none;color:var(--ink)}
.work-pager a:hover{color:var(--brand)}