/* 共通スタイル：LP（index.html）とコラムページで共有。配色トークン・基本タイポ・ボタン・ヘッダー・フッター
   デザイン方針：白地・黒の太字ゴシック・広い余白。アクセントは航空オレンジ（数字と印だけ）、緑はLINEボタン専用 */
:root{
  color-scheme:light;

  /* 基本色 */
  --paper:#FFFFFF;      /* 背景 */
  --paper-2:#F3F5F6;    /* 霧グレー：交互セクション・帯 */
  --paper-3:#FFFFFF;    /* カード面 */
  --ink:#000000;        /* 見出し・本文 */
  --ink-2:#4A5057;      /* 補足文 */
  --ink-3:#666C73;      /* 注記・日付（白・霧グレーの上でコントラスト4.5以上） */
  --rule:#E4E7EA;       /* 罫線 */
  --rule-2:#CDD2D6;

  /* アクセント：航空オレンジ（大きな数字・印・リンク） */
  --signal:#FF4F00;
  --signal-deep:#C73C00;  /* 本文サイズのリンク用（白地でコントラスト確保） */
  --signal-soft:#FFF1EA;

  /* 旧トークン名（コラム・楽天ROOM・SNSのCSSが参照）→ 新パレットに割り当て */
  --sky:var(--signal);
  --sky-deep:var(--signal-deep);
  --sky-soft:var(--signal-soft);
  --amber:var(--signal);
  --blue:var(--ink);
  --coral:var(--ink);
  --coral-soft:var(--paper-2);
  --on-chip:#FFFFFF;

  /* LINE（登録ボタン専用） */
  --line:#06C755;       /* LINEのブランド色：アイコンなど文字以外に使う */
  --line-btn:#06C755;   /* LINEボタンの背景：LINEのブランド色（ガイドラインどおり） */
  --line-deep:#05A948;  /* LINEボタンのホバー */
  --line-ink:#FFFFFF;

  --shadow:none;
  --shadow-lg:0 18px 40px -24px rgba(0,0,0,.28);
  --shadow-cta:none;

  --f-head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
  --f-body:var(--f-head);
  --f-en:"Outfit","Zen Kaku Gothic New",sans-serif;
  --f-mono:var(--f-en);

  --wrap:1180px;
  --r:14px;
  --pill:999px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;font-weight:500;line-height:1.9;
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict;text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.45;text-wrap:balance;margin:0;font-weight:900;letter-spacing:.01em}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
.nb{display:inline-block}
.ln{display:block}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 20px}}
.sec{padding:128px 0;position:relative}
.sec.alt{background:var(--paper-2)}
@media (max-width:760px){.sec{padding:84px 0}}

/* ---- section head：英字の小見出し＋和文の大見出し ---- */
.tag{
  display:block;font-family:var(--f-en);font-size:17px;font-weight:600;letter-spacing:.01em;
  color:var(--signal-deep);line-height:1.3;
}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head .tag{margin-bottom:14px}
.sec-head h2{font-size:clamp(28px,3.9vw,40px);margin-bottom:20px}
.sec-head p{color:var(--ink-2);font-size:16.5px;line-height:2}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
@media (max-width:760px){.sec-head{margin-bottom:40px}}

/* ---- buttons：丸いピル型。緑＝LINE、白＝その他 ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--line-btn);color:var(--line-ink);
  font-family:var(--f-head);font-weight:700;font-size:16px;letter-spacing:.02em;line-height:1.4;
  padding:17px 36px;border-radius:var(--pill);text-decoration:none;border:none;
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--line-deep)}
.btn:active{transform:scale(.98)}
.btn svg{flex:none}
.btn.sm{font-size:14px;padding:11px 22px}
.btn.wide{width:100%}
.btn-sub{display:block;font-size:12px;font-weight:500;opacity:.9;margin-top:1px}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;color:#000;border:1px solid var(--rule-2);
  font-family:var(--f-head);font-weight:700;font-size:15px;line-height:1.4;
  padding:16px 32px;border-radius:var(--pill);text-decoration:none;
  transition:background .18s ease,border-color .18s ease;
}
.btn-ghost:hover{border-color:#000}

.micro{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:13px;color:var(--ink-2)}
.micro span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.micro svg{flex:none;color:var(--line)}

/* ---- topbar ---- */
.topbar{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--rule)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px;max-width:none;padding:0 40px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--f-head);font-weight:900;font-size:18px;letter-spacing:.02em;text-decoration:none;color:inherit}
.brand small{display:block;font-family:var(--f-en);font-size:11px;letter-spacing:.02em;color:var(--ink-3);font-weight:500;line-height:1.2}
.brand-mark{flex:none}
.topbar-r{display:flex;align-items:center;gap:8px}
.nav-link{
  font-family:var(--f-head);font-weight:700;font-size:15px;text-decoration:none;color:#000;
  padding:8px 14px;background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-size:0 2px;background-position:14px calc(100% - 4px);
  transition:background-size .2s ease;
}
.nav-link:hover,.nav-link[aria-current="page"]{background-size:calc(100% - 28px) 2px}
.topbar .btn{margin-left:10px}
@media (max-width:760px){.topbar .wrap{height:62px;padding:0 20px}.brand{font-size:16px}.nav-link{font-size:14px;padding:6px 9px;background-position:9px calc(100% - 2px)}.nav-link:hover,.nav-link[aria-current="page"]{background-size:calc(100% - 18px) 2px}}
@media (max-width:560px){.topbar .btn{display:none}}

/* ---- footer ---- */
footer{padding:72px 0 120px;background:#000;color:#fff}
footer .f-in{display:flex;flex-direction:column;gap:14px}
/* フッターのロゴ：ヘッダーの .brand と同じ形で白黒反転 */
.brand-inverse{color:#fff}
.brand-inverse small{color:rgba(255,255,255,.62)}
footer a.brand{text-decoration:none;align-self:flex-start;margin-bottom:8px}
footer .f-ttl{font-size:13px;font-weight:700;color:rgba(255,255,255,.7)}
footer ul{margin:0;padding-left:1.2em;max-width:74ch}
footer li{font-size:13px;color:rgba(255,255,255,.72);line-height:2}
footer a{color:#fff;text-decoration:underline;text-underline-offset:3px}
footer .f-nav{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14px;font-weight:700;margin-top:10px}
footer .f-nav a{text-decoration:none}
footer .f-nav a:hover{text-decoration:underline}
footer .f-meta{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-family:var(--f-en);font-size:12px;color:rgba(255,255,255,.55)}
.page-sub footer{padding-bottom:72px}

/* ---- モーション：太い黒線（地平線）が左から引かれ、見出しが線の下からせり上がる。js-motion は head-common.html で付与 ---- */
.js-motion .rd{position:relative;border-top-color:transparent!important}
.js-motion .rd::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:#000;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.js-motion .rd-b{position:relative;border-bottom-color:transparent!important}
.js-motion .rd-b::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#000;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.65,0,.35,1) .25s}
.js-motion .rd.in::before,.js-motion .rd-b.in::after{transform:none}
.js-motion .rise{clip-path:inset(100% -4% -10% -4%);transform:translateY(.35em);transition:clip-path .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.js-motion .rise.in{clip-path:inset(-10% -4% -10% -4%);transform:none}
.cnt{display:inline-block;font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media print{.js-motion .rise{clip-path:none;transform:none}.js-motion .rd::before,.js-motion .rd-b::after{transform:none}}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}