/* ============================================================
   Xeno magic 公式サイト — 下層ページ共通CSS（ゴールド版）
   対象: company.html / tokushoho.html / privacy.html
   1. Variables 2. Base 3. Header 4. Subhead 5. Doc 6. Footer 7. Responsive
   ============================================================ */

/* 1. Variables */
:root{
  --cream:#FBF6EF; --cream2:#F5EBDD; --paper:#fff;
  --ink:#241A12; --ink2:#8A7461; --line:#EBDCCB;
  --dark:#201711; --dark2:#2B2017;
  --gold:#C98A3C; --amber:#E7A64C; --terra:#C56A38;
  --art:radial-gradient(78% 70% at 50% 30%,#F6D296,#E4A552 52%,#C6763A);
}

/* 2. Base */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Zen Kaku Gothic New",sans-serif;color:var(--ink);background:var(--cream);line-height:2;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-weight:500}
h1,h2,h3{font-family:"Shippori Mincho B1",serif;line-height:1.5;font-weight:700;letter-spacing:.02em;word-break:auto-phrase}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:860px;margin:0 auto;padding:0 24px}

/* 3. Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(251,246,239,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-bar{max-width:1160px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:72px}
.logo img{height:28px;width:auto}
.nav-right{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:700}
.nav-right a.l:hover{color:var(--terra)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14px;padding:11px 20px;border-radius:999px;transition:.25s;border:none;font-family:"Zen Kaku Gothic New"}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#3a2a1c;transform:translateY(-1px)}

/* 4. Subhead */
.subhead{background:radial-gradient(60% 80% at 50% -30%,rgba(231,166,76,.35),transparent 65%),var(--dark);color:#fff;padding:84px 0 64px;text-align:center}
.subhead .eyebrow{font-family:"Fraunces",serif;font-style:italic;color:#F3C888;font-size:15px;letter-spacing:.06em}
.subhead h1{color:#fff;font-size:clamp(26px,4.5vw,40px);margin-top:12px}

/* 5. Doc */
.doc{padding:76px 0 96px}
.doc p{margin-bottom:1.1em;color:#4A3A2C;font-size:15.5px}
.doc h2{font-size:19px;margin:2.2em 0 .7em;padding-left:14px;border-left:3px solid var(--amber);color:var(--ink)}
.doc ul,.doc ol{margin:0 0 1.2em 1.5em;color:#4A3A2C;font-size:15.5px}
.doc li{margin-bottom:.3em}
.doc a{color:var(--terra);font-weight:700}
.info-table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:15px}
.info-table th,.info-table td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:none}
.info-table th{width:32%;background:var(--cream2);font-family:"Shippori Mincho B1",serif;font-weight:600;color:var(--ink);white-space:nowrap}
.info-table td{color:#4A3A2C}
.backlink{display:inline-block;margin-top:44px;font-weight:700;color:var(--terra)}
.backlink:hover{text-decoration:underline}

/* 6. Footer */
.site-footer{background:var(--dark2);color:#fff;padding:44px 0}
.foot-inner{max-width:1160px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#A8927E;font-weight:500}
.foot-inner address{font-style:normal}

/* 7. Responsive */
@media(max-width:640px){
  .nav-bar{padding:0 20px}
  .info-table th{width:100%;display:block;border-bottom:none;padding-bottom:6px}
  .info-table td{display:block;padding-top:0}
  .doc{padding:56px 0 72px}
  .subhead{padding:64px 0 48px}
}