@charset "UTF-8";

/* =========================================================
   NC2026 — design tokens
   参照: cross-value.co.jp のレイアウト・スケール設計
   カラーはネットコマースのブランドカラー（ロゴのティール）に置換
   ========================================================= */
:root {
  /*
    本文のカラム幅。ヘッダー・フッター・FV・各セクションがすべてこの幅に揃う。
    110rem では大きな画面で左右の余白が広くなりすぎ、画面端のヘッダーに対して
    本文だけが右にずれて見えたので 128rem に広げた（2026-10-06）。
  */
  --grid: 128rem;
  --grid-reading: 78rem;
  --pad: 4rem;
  --header-h: 9rem;
  --header-h-fixed: 5.6rem;
  --radius: 2rem;
  --radius-s: .6rem;
  --line: 1px;

  --c-text: #1b2426;
  --c-text-r: 27, 36, 38;
  --c-sub: #6f7b7d;
  --c-line: #dde3e4;
  /*
    ブランドカラー（2026-09 決定：配色パターン E「グラデーション」）
      メイン #006D97 ティールブルー／サブ #970400／ロゴ #3ca6b3

    サブカラーは原色に近く、小さな丸や矢印のアイコンに使うと主張が強すぎたので、
    画面で使うぶんは明るくした #C24E47 に置き換えている（2026-10-06）。
    #970400 はブランドの指定色としてここに残す。

    彩度を落として暗くすると茶色に寄ってしまうので、
    「彩度は保ったまま明るくする」方向で淡くしている。
    これ以上明るくすると PICK UP の白い文字が 4.5:1 を下回る。
    ※ サブカラーはメインカラーの上に文字として置かない（コントラスト比 1.5:1）
  */
  --c-brand-main: #006d97;
  --c-brand-sub: #970400;       /* ブランド指定のサブカラー（記録用） */
  --c-brand-sub-soft: #c24e47;  /* 画面で使うサブカラー。白抜きで 4.69:1 */
  --c-brand-logo: #3ca6b3;

  --c-accent: var(--c-brand-main);   /* 小さな UI の差し色（数字・ラベル・ナビの下線など） */
  --c-accent-rgb: 0, 109, 151;
  --c-accent-d: var(--c-brand-main); /* 文字としての差し色（本文リンク・小見出し） */
  --c-accent-l: #8fbfd1;             /* 淡い枠線 */
  --c-band: linear-gradient(135deg, var(--c-brand-main) 0%, var(--c-brand-logo) 100%); /* 背景の帯 */
  --c-btn: var(--c-brand-main);      /* 主ボタン・送信ボタン */
  /*
    既定のボタンの地色（FV の入口ボタン・CTA の大ボタン・ghost と accent のホバー）。
    本文の色（ほぼ黒）をそのまま使うと硬く・強く見えたので、
    メインカラーと同じ色相（197°）のまま暗く・彩度を落とした色にしている。
    もう一段やわらげるなら #38535C、さらに軽くするなら地 #E7EEF0 ／文字 #17272E。
  */
  --c-btn-dark: #1d3b47;
  --c-btn-dark-fg: #fff;
  --c-point: var(--c-brand-sub-soft);  /* 強調（トップの強調語・PICK UP・必須） */
  --c-mark: var(--c-brand-sub-soft);   /* 見出し脇やリストの丸印 */
  --c-icon: var(--c-brand-sub-soft);   /* ボタンの矢印アイコンの円（白抜きの矢印） */
  --c-bg: #fff;
  --c-soft: #f4f7f7;
  --c-warm: #f7f6f5;

  --ls: .04em;
  --shadow: 0 7px 22px rgba(27, 36, 38, .13);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --load-dur: .8s;
}

@media (max-width: 1023px) {
  :root {
    --pad: 1.5rem;
    --header-h: 5.5rem;
    --header-h-fixed: 5.5rem;
    --radius: 1.4rem;
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 10px; -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 700; font-size: inherit; letter-spacing: -.01em; }
h5, h6 { font-weight: inherit; font-size: inherit; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
svg { width: 1.1rem; height: 1.1rem; flex: none; }
a { color: inherit; text-decoration: none; }
button { padding: 0; border: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
table { border-collapse: collapse; }

body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-text);
  background: #fff;
  font-feature-settings: "palt" 1;
  letter-spacing: var(--ls);
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- type utilities ---------- */
.u-ttl {
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 300;
}
h1.u-ttl, h2.u-ttl, h3.u-ttl, h4.u-ttl { font-weight: 700; }
.u-en {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 118;
  font-weight: 400;
  letter-spacing: .06em;
  font-feature-settings: "pnum";
}
.u-accent { color: var(--c-point); }
.pc-hidden { display: none; }
@media (max-width: 1023px) { .pc-hidden { display: revert; } .sp-hidden { display: none !important; } }

/* =========================================================
   背景キャンバス（固定レイヤー）
   白いセクションの「穴」から覗く、サイト全体の下地
   ========================================================= */
.l-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: clip;
  pointer-events: none;
  background: var(--c-band);
  filter: brightness(.94);
}
.l-bg__canvas { position: fixed; inset: 0; width: 100vw; height: 100svh; opacity: .34; }

/* 「穴」＝下地の色を見せるための透明ブロック */
.c-hole { display: block; width: 100%; background: transparent; }

/* =========================================================
   header
   ========================================================= */
.l-header {
  position: fixed; top: 0; left: 0; z-index: 100;
  width: 100%; height: var(--header-h);
  transition: height .5s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.l-header.is-fixed {
  height: var(--header-h-fixed);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(27, 36, 38, .07);
}
.l-header__inner {
  /* 本文のカラムと左右の位置をそろえる */
  height: 100%; width: min(100% - var(--pad) * 2, var(--grid)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.l-header__logo img { width: 20rem; transition: width .5s var(--ease); }
.l-header.is-fixed .l-header__logo img { width: 16.5rem; }
@media (max-width: 1023px) { .l-header__logo img { width: 15rem; } }

.l-header__nav { display: flex; align-items: center; gap: 3.4rem; }
.l-header__nav a {
  position: relative; font-size: 1.4rem; line-height: 1; padding-block: .8rem;
  transition: color .3s;
}
.l-header__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--c-accent); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.l-header__nav a:hover::after,
.l-header__nav a.is-current::after { transform: scaleX(1); transform-origin: left; }

.l-header__cta { display: flex; align-items: center; gap: 1rem; }
.l-header__nav a, .l-header__cta .c-btn { white-space: nowrap; }

/*
  ヘッダーの中身はナビ4項目で 1,090px ほど。本文と同じ列（--grid 128rem）に収めても
  1280px の画面で 110px の余裕がある。
  ※ グローバルナビを5項目以上に増やすときは、1280px での折り返しを確認すること。
*/

/* 見出しがティール背景のページでは、スクロールするまでヘッダーを白抜きにする */
.has-dark-head .l-header:not(.is-fixed) { color: #fff; }
.has-dark-head .l-header:not(.is-fixed) .l-header__logo img { filter: brightness(0) invert(1); }
.has-dark-head .l-header:not(.is-fixed) .l-header__nav a::after { background: #fff; }
.has-dark-head .l-header:not(.is-fixed) .c-btn--ghost {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5);
}
.has-dark-head .l-header:not(.is-fixed) .c-btn--ghost:hover { background: #fff; color: var(--c-text); }
.has-dark-head .l-header:not(.is-fixed) .l-header__burger span { background: #fff; }
@media (max-width: 1279px) { .l-header__nav, .l-header__cta { display: none; } }

/* drawer */
.l-header__burger {
  display: none; width: 4.4rem; height: 4.4rem; position: relative; z-index: 120;
}
.l-header__burger span {
  position: absolute; left: 50%; width: 2.2rem; height: 1px; background: var(--c-text);
  translate: -50% 0; transition: .45s var(--ease);
}
.l-header__burger span:nth-child(1) { top: 1.7rem; }
.l-header__burger span:nth-child(2) { top: 2.6rem; }
.is-drawer-open .l-header__burger span:nth-child(1) { top: 2.15rem; rotate: 20deg; }
.is-drawer-open .l-header__burger span:nth-child(2) { top: 2.15rem; rotate: -20deg; }
@media (max-width: 1279px) { .l-header__burger { display: block; } }

.l-drawer {
  position: fixed; inset: 0; z-index: 110; background: #fff;
  padding: calc(var(--header-h) + 3rem) var(--pad) 4rem;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease);
  visibility: hidden;
}
.is-drawer-open .l-drawer { clip-path: inset(0 0 0 0); visibility: visible; }
.l-drawer__nav { display: flex; flex-direction: column; gap: .2rem; }
.l-drawer__nav a {
  display: flex; align-items: baseline; gap: 1.4rem;
  padding-block: 1.8rem; border-bottom: var(--line) solid var(--c-line);
  font-size: 2rem;
}
.l-drawer__nav a .en { font-size: 1.1rem; color: var(--c-sub); }
.l-drawer__foot { margin-top: 3rem; display: flex; flex-direction: column; gap: 1.6rem; }

/* =========================================================
   buttons
   ========================================================= */
.c-btn {
  display: inline-flex; align-items: center; gap: 1.2rem;
  padding: 1.35rem 1.5rem 1.35rem 2.2rem;
  border-radius: 100px; font-size: 1.35rem; line-height: 1; white-space: nowrap;
  background: var(--c-btn-dark); color: var(--c-btn-dark-fg);
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.c-btn__ic {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--c-icon); color: #fff;
  display: grid; place-items: center; flex: none; overflow: hidden;
  transition: background-color .4s var(--ease);
}
.c-btn__ic svg { width: 1rem; height: 1rem; transition: translate .45s var(--ease); }
.c-btn--lg .c-btn__ic svg { width: 1.2rem; height: 1.2rem; }
.c-btn:hover { background: var(--c-btn); color: #fff; }
.c-btn:hover .c-btn__ic { background: var(--c-icon); color: #fff; }
.c-btn:hover .c-btn__ic svg { animation: arrow .5s var(--ease); }
@keyframes arrow {
  0% { translate: 0 0; }
  49% { translate: 130% 0; opacity: 0; }
  50% { translate: -130% 0; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}
.c-btn--ghost { background: #fff; color: var(--c-text); border: var(--line) solid var(--c-line); }
.c-btn--ghost:hover { background: var(--c-btn-dark); color: var(--c-btn-dark-fg); }
.c-btn--accent { background: var(--c-btn); color: #fff; }
.c-btn--accent .c-btn__ic { background: var(--c-icon); color: #fff; }
.c-btn--accent:hover { background: var(--c-btn-dark); color: var(--c-btn-dark-fg); }
.c-btn--accent:hover .c-btn__ic { background: var(--c-icon); color: #fff; }
.c-btn--lg { font-size: 1.6rem; padding: 1.9rem 1.9rem 1.9rem 3rem; }
.c-btn--lg .c-btn__ic { width: 3rem; height: 3rem; }

/* テキストリンク（下線が右→左に流れる） */
.c-link { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.4rem; position: relative; white-space: nowrap; }
.c-link::after {
  content: ""; position: absolute; left: 0; bottom: -.5rem; width: 100%; height: 1px;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform .45s var(--ease);
}
.c-link:hover::after { transform: scaleX(0); }

/* =========================================================
   共通レイアウト
   ========================================================= */
.l-main { position: relative; z-index: 1; }
.l-sec { position: relative; background: #fff; }
.l-sec__inner {
  width: min(100% - var(--pad) * 2, var(--grid));
  margin-inline: auto;
}
.l-round-t { border-radius: var(--radius) var(--radius) 0 0; }
.l-round-b { border-radius: 0 0 var(--radius) var(--radius); }

.c-sec-head { display: flex; flex-direction: column; gap: 2.4rem; }
.c-sec-label {
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: 1.2rem; letter-spacing: .12em; color: var(--c-sub);
}
.c-sec-label::before {
  content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c-mark);
}
.c-sec-ttl {
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: clamp(2.6rem, 3.3vw, 4.8rem); line-height: 1.4; letter-spacing: -.01em;
}
.c-sec-lead { font-size: 1.5rem; line-height: 2.1; color: var(--c-sub); }

/* スクロールイン（1行ずつ立ち上がる） */
.js-line { display: block; overflow: hidden; }
.js-line > span { display: block; will-change: transform; }

/* aspect-ratio で比率を決めた枠は、中の画像の内在サイズで膨らまないように
   絶対配置で埋める（height:100% だけだと親の高さが auto のため解決できず、
   画像本来の縦横比で枠が伸びてしまう） */
.c-scale-in { position: relative; overflow: clip; border-radius: var(--radius-s); }
.c-scale-in__inner { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-scale-in img { width: 100%; height: 100%; object-fit: cover; }

.c-img-ov { position: relative; overflow: clip; border-radius: var(--radius-s); }
.c-img-ov img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease); }
a:hover .c-img-ov img, .c-img-ov:hover img { scale: 1.05; }

/* =========================================================
   ローディング
   ========================================================= */
.l-load { display: none; }
.js .l-load {
  position: fixed; inset: 0; z-index: 1000; background: #fff;
  display: grid; place-items: center;
  transition: opacity .6s var(--ease), visibility .6s;
}
.is-loaded .l-load { opacity: 0; visibility: hidden; }
.l-load__logo { width: 22rem; opacity: 0; animation: loadLogo 1.4s var(--ease) forwards; }
@keyframes loadLogo {
  0% { opacity: 0; translate: 0 1rem; }
  40%, 100% { opacity: 1; translate: 0 0; }
}
.js .js-load-show { opacity: 0; }
.is-loaded .js-load-show {
  animation: loadShow var(--load-dur) var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes loadShow {
  from { opacity: 0; translate: 0 1.6rem; }
  to { opacity: 1; translate: 0 0; }
}

/* =========================================================
   FV
   ========================================================= */
.p-fv {
  position: relative;
  /* 大きな画面で上下に空白が広がりすぎないよう、高さに上限を設ける */
  height: 100svh; min-height: 60rem; max-height: 100rem;
  container-type: size;
}
/* 白い天板。下端の余白から固定背景（ティール）がのぞく */
.p-fv__bg { position: absolute; inset: 0 0 auto 0; height: 78%; background: #fff; z-index: 0; }
.p-fv__inner {
  position: relative; z-index: 2;
  height: 78%; padding: var(--header-h) var(--pad) 0;
  display: flex; align-items: center;
}
.p-fv__main {
  width: 100%; position: relative;
  /* 横長の大画面で見出しと説明文が離れすぎないよう、内容の幅に上限を設けて中央に置く
     155rem ≒ 見出しの最大幅 7.9 × 14.5rem ＋ 間隔 4rem ＋ 説明文 28rem */
  max-width: 155rem; margin-inline: auto;
}

.p-fv__ttl {
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; font-weight: 700;
  /*
    見出しの大きさは次の3つのうち最も小さい値。
      8.4cqw  … 画面の横幅に対する大きさ
      14.5cqh … 画面の高さに収まる大きさ（3行 × 行送り1.1 ＋ 上下の余白）
      (100cqw - 40rem) / 7.9 … 右下の説明文と重ならない大きさ
        40rem = 左右の余白 8rem ＋ 説明文の幅 28rem ＋ 間隔 4rem
        7.9   = 3行目の字下げ 2.9em ＋ 3行目の文字数 5字
    トップの見出しの文言や字下げを変えるときは 7.9 も合わせて見直すこと。
  */
  font-size: clamp(4.2rem, min(8.4cqw, 14.5cqh, calc((100cqw - 40rem) / 7.9)), 20rem);
  line-height: 1.1; letter-spacing: -.015em;
  display: flex; flex-direction: column;
}
.p-fv__ttl .l2 { padding-left: .55em; }
.p-fv__ttl .l3 { padding-left: 2.9em; }
.p-fv__ttl-line { display: block; overflow: hidden; padding-block: .04em; }
.p-fv__ttl-line > span { display: block; }
.p-fv__ttl strong { color: var(--c-point); font-weight: inherit; }

.p-fv__circle-wrap {
  position: relative; display: inline-block;
  width: .96em; height: 1em; vertical-align: middle;
}
.p-fv__circle {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: .92em; height: .92em; border-radius: 50%; overflow: clip;
  background: var(--c-soft);
}
.p-fv__circle img { width: 100%; height: 100%; object-fit: cover; }

.p-fv__desc {
  position: absolute; right: 0; bottom: -1.5em;
  width: 28rem; /* 幅を固定し、見出しの大きさの計算と揃える */
  font-size: 1.25rem; line-height: 1.95; text-align: left; color: var(--c-sub);
}
.p-fv__copy { position: absolute; right: 0; top: -2.6em; font-size: 1.05rem; color: var(--c-sub); }

/* ---------------------------------------------------------
   見出し・説明文・ボタンを縦に積む組み方
   （[nc_hero_sub] か [nc_hero_actions] があるとき）
   --------------------------------------------------------- */
.p-fv.is-stack .p-fv__main {
  /* 説明文を右下に置かないので、読みやすい幅に寄せる */
  max-width: var(--grid);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(1.8rem, 2.6cqh, 3.4rem);
}
.p-fv.is-stack .p-fv__ttl {
  /*
    2行の見出し。次の3つのうち最も小さい値。
      10cqw  … 画面の横幅に対する大きさ
      11cqh  … 画面の高さに収まる大きさ（見出し2行＋下に続く3要素の分）
      (100cqw - 8rem) / 9.4 … 横にはみ出さない大きさ
        8rem = 左右の余白
        9.4  = もっとも長い行の字数（「事業の力に変える。」9字）＋余裕
    見出しの文言を変えるときは 9.4 も合わせて見直すこと。
  */
  font-size: clamp(3.6rem, min(10cqw, 11cqh, calc((100cqw - 8rem) / 9.4)), 11.5rem);
}
.p-fv.is-stack .p-fv__desc {
  position: static; right: auto; bottom: auto;
  width: auto; max-width: 62rem; font-size: 1.4rem; line-height: 2.05;
}
.p-fv.is-stack .p-fv__copy { top: auto; bottom: 0; }

.p-fv__sub {
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: clamp(1.7rem, min(2.6cqw, 3.4cqh), 2.8rem);
  line-height: 1.6; letter-spacing: -.01em;
}

/* FV 下端の入口ボタン */
.p-fv__acts { display: flex; flex-wrap: wrap; gap: 1.8rem 2.4rem; }
.p-fv__act { display: flex; flex-direction: column; gap: 1.1rem; }
/* 3つのボタンの幅をそろえ、矢印を右端に寄せる */
.p-fv__act-btn { min-width: 25rem; justify-content: space-between; }
.p-fv__act-note { font-size: 1.2rem; line-height: 1.6; color: var(--c-sub); padding-left: .6rem; }

.p-fv__scroll {
  position: absolute; left: var(--pad); bottom: 3.4rem; z-index: 3;
  width: 4.6rem; height: 4.6rem; border-radius: 50%;
  border: var(--line) solid rgba(255, 255, 255, .55);
  display: grid; place-items: center; color: #fff;
}
.p-fv__scroll::after {
  content: ""; width: 1px; height: 1.2rem; background: currentColor;
  animation: scrollDot 1.6s var(--ease) infinite;
}
@keyframes scrollDot {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 1023px) {
  .p-fv { height: auto; min-height: 0; container-type: normal; }
  .p-fv__bg { height: 100%; }
  .p-fv__inner { height: auto; display: block; padding: calc(var(--header-h) + 3rem) var(--pad) 3rem; }
  .p-fv__ttl { font-size: clamp(4.4rem, 9vw, 7.2rem); }
  .p-fv__ttl .l2 { padding-left: .3em; }
  .p-fv__ttl .l3 { padding-left: 1.2em; }
  .p-fv__desc { position: relative; right: auto; bottom: auto; width: auto; text-align: left; margin-top: 3rem; }
  .p-fv__copy { display: none; }
  .p-fv__scroll { display: none; }

  /* 入口ボタンの下に、重なっている PICK UP バーのぶんの余白をとる */
  .p-fv.is-stack .p-fv__inner { padding-bottom: 9.5rem; }
  .p-fv.is-stack .p-fv__main { gap: 2.4rem; max-width: none; }
  .p-fv.is-stack .p-fv__ttl { font-size: clamp(3.4rem, 8.6vw, 6.4rem); }
  .p-fv.is-stack .p-fv__desc { margin-top: 0; max-width: none; }
  .p-fv__sub { font-size: clamp(1.5rem, 4vw, 2rem); }
  .p-fv__acts { flex-direction: column; align-items: stretch; width: 100%; gap: 1.6rem; }
  .p-fv__act-btn { min-width: 0; width: 100%; }
}

/* pickup（FVの下端、白とティールの境目に重ねる） */
.p-pickup {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  width: 100%; padding: 0 var(--pad) 3.4rem;
}
.p-pickup__in {
  width: min(100%, var(--grid)); margin-inline: auto;
  background: #fff; border-radius: 100px; padding: 1.2rem 1.4rem 1.2rem 1.8rem;
  display: flex; align-items: center; gap: 1.6rem; box-shadow: var(--shadow);
}
.p-pickup__label {
  font-size: 1.05rem; letter-spacing: .1em; color: #fff; background: var(--c-point);
  padding: .55rem 1rem; border-radius: 100px; flex: none;
}
.p-pickup__date { font-size: 1.2rem; color: var(--c-sub); flex: none; }
.p-pickup__ttl { font-size: 1.35rem; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-pickup__arrow { margin-left: auto; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-soft); display: grid; place-items: center; }
.p-pickup__arrow svg { width: 1rem; height: 1rem; }
@media (max-width: 1023px) {
  .p-pickup { position: relative; padding: 0 var(--pad); margin-top: -2rem; }
  .p-pickup__date { display: none; }
  .p-pickup__in { border-radius: var(--radius-s); }
}

/* =========================================================
   marquee rail
   ========================================================= */
.p-rail { overflow: hidden; padding-block: 4.2rem 4rem; background: #fff; }
.p-rail.is-on-bg { background: transparent; }
.p-rail__track { display: flex; width: max-content; will-change: transform; }
.p-rail__list { display: flex; align-items: center; }
.p-rail__item {
  display: flex; align-items: center; gap: 2.6rem; padding-inline: 1.3rem;
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; font-weight: 300;
  font-size: clamp(1.8rem, 2.4vw, 3.2rem); line-height: 1.2; white-space: nowrap;
}
.p-rail__item::after {
  content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c-mark); flex: none;
}
.p-rail.is-on-bg .p-rail__item { color: #fff; }
.p-rail.is-on-bg .p-rail__item::after { background: rgba(255, 255, 255, .8); }

/* =========================================================
   セクションの共通枠（[nc_section] が出すもの）
   ========================================================= */
.p-sec--lg { padding-block: 11rem 11rem; }
.p-sec--md { padding-block: 8rem; }
.p-sec--sm { padding-block: 5rem; }
.p-sec__head { display: grid; gap: 3rem; align-items: end; }
.p-sec__head--split { grid-template-columns: 1fr auto; }
.p-sec__head--stack { grid-template-columns: 1fr; justify-items: start; }
.p-sec__body { margin-top: 6rem; }
.p-sec__body:empty { display: none; }
@media (max-width: 1023px) {
  .p-sec--lg { padding-block: 5.5rem 6rem; }
  .p-sec--md { padding-block: 4.5rem; }
  .p-sec--sm { padding-block: 3.5rem; }
  .p-sec__head { grid-template-columns: 1fr !important; }
  .p-sec__body { margin-top: 3.4rem; }
}

/* =========================================================
   feature（写真と本文を交互に）
   ========================================================= */
.p-feature__list { display: flex; flex-direction: column; gap: 12rem; }
.p-feature__item {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center;
}
.p-feature__item:nth-child(even) .p-feature__body { order: 2; }
.p-feature__ttl {
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 2.5vw, 3.4rem); line-height: 1.5; letter-spacing: -.01em;
}
.p-feature__txt { margin-top: 2.6rem; font-size: 1.45rem; line-height: 2.15; color: var(--c-sub); }
.p-feature__meta {
  margin-top: 3rem; display: flex; align-items: center; gap: 1.6rem;
  border-top: var(--line) solid var(--c-line); padding-top: 2rem;
}
.p-feature__num { font-size: 4.6rem; line-height: 1; color: var(--c-accent); }
.p-feature__en { font-size: 1.15rem; line-height: 1.6; color: var(--c-sub); }
.p-feature__more { margin-top: 2.4rem; }
.p-feature__img { aspect-ratio: 4 / 3; }
@media (max-width: 1023px) {
  .p-feature__list { gap: 6rem; }
  .p-feature__item { grid-template-columns: 1fr; gap: 2.4rem; }
  .p-feature__item:nth-child(even) .p-feature__body { order: 0; }
}

/* =========================================================
   claim（太字の一文＋補足）
   ========================================================= */
.c-claim { max-width: 94rem; }
.c-claim__ttl {
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: clamp(2rem, 2.6vw, 3.2rem); line-height: 1.55; letter-spacing: -.01em;
}
.c-claim__txt { margin-top: 2rem; font-size: 1.45rem; line-height: 2.15; color: var(--c-sub); }
.c-claim--center { margin-inline: auto; text-align: center; }
/* 言い切りのあとに部品が続くときは、ひと呼吸ぶんあける */
.c-claim + .p-point__list,
.c-claim + .p-service__list,
.c-claim + .p-feature__list { margin-top: 8rem; }

/* =========================================================
   point（番号つきの短い項目・写真なし）
   ========================================================= */
.p-point__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4.4rem 6rem; }
.p-point__list--1 { grid-template-columns: 1fr; }
.p-point__list--3 { grid-template-columns: repeat(3, 1fr); }
.p-point__list--4 { grid-template-columns: repeat(4, 1fr); }
.p-point__item {
  display: flex; flex-direction: column; gap: 1.4rem;
  border-top: var(--line) solid var(--c-line); padding-top: 2.6rem;
}
.p-point__no { font-size: 1.15rem; color: var(--c-accent); letter-spacing: .12em; }
.p-point__ttl {
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 2.1vw, 2.6rem); line-height: 1.5; letter-spacing: -.01em;
}
.p-point__txt { font-size: 1.45rem; line-height: 2.1; color: var(--c-sub); }
.p-point__more { margin-top: auto; padding-top: .8rem; align-self: flex-start; }
@media (max-width: 1023px) {
  .p-point__list,
  .p-point__list--3,
  .p-point__list--4 { grid-template-columns: 1fr; gap: 3.2rem; }
  .p-point__item { padding-top: 2rem; }
  .c-claim + .p-point__list,
  .c-claim + .p-service__list,
  .c-claim + .p-feature__list { margin-top: 4rem; }
}

/* =========================================================
   number（数字で見る）
   ========================================================= */
.p-number__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--line);
  background: var(--c-line);
  border-block: var(--line) solid var(--c-line);
}
.p-number__cell { background: #fff; padding: 4rem 2.4rem; display: flex; flex-direction: column; gap: 1.6rem; }
.p-number__cell.is-hole { background: transparent; }
.p-number__val { display: flex; align-items: baseline; gap: .4rem; color: var(--c-accent); }
.p-number__digits { display: flex; align-items: baseline; }
/* 数字は 1 行ぶんの窓に切り抜き、縦に回転させる。上下に少し余白を持たせて字が欠けないようにする */
.p-number__digit { overflow: hidden; height: 1.16em; line-height: 1.16; }
.p-number__digit ul { display: flex; flex-direction: column; will-change: transform; }
.p-number__digit li { height: 1.16em; line-height: 1.16; }
.p-number__sep { line-height: 1.16; }
.p-number__val, .p-number__digit { font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 112; font-size: clamp(4.4rem, 5.6vw, 7.6rem); }
/* 桁の多い数字はセルの幅に収まらないので、折り返さずに小さくする */
.p-number__digits { flex-wrap: nowrap; }
.p-number__cell.is-long .p-number__val,
.p-number__cell.is-long .p-number__digit { font-size: clamp(3.6rem, 4.4vw, 6rem); }
.p-number__cell.is-xlong .p-number__val,
.p-number__cell.is-xlong .p-number__digit { font-size: clamp(3rem, 3.6vw, 5rem); }
.p-number__unit { font-size: .42em; }
.p-number__cap { font-size: 1.3rem; line-height: 1.85; color: var(--c-sub); }
@media (max-width: 1023px) {
  .p-number__grid { grid-template-columns: repeat(2, 1fr); }
  .p-number__cell { padding: 3rem 1.6rem; }
}

/* 本文のかたまりは、段落・箇条書きのあいだを空ける */
.p-feature__txt > * + *,
.p-point__txt > * + *,
.c-claim__txt > * + *,
.p-service__txt > * + * { margin-top: 1.7rem; }
.p-feature__txt li + li,
.p-point__txt li + li,
.p-service__txt li + li { margin-top: .7rem; }

/* =========================================================
   service
   ========================================================= */
.p-service__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.p-service__list--1 { grid-template-columns: 1fr; }
.p-service__list--3 { grid-template-columns: repeat(3, 1fr); }
.p-service__list--4 { grid-template-columns: repeat(4, 1fr); }
.p-service__item {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: clip; background: var(--c-warm);
  transition: background-color .5s var(--ease);
}
/* カード全体をクリックできるようにする */
.p-service__link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.p-service__item:hover { background: var(--c-soft); }
.p-service__img { position: relative; aspect-ratio: 16 / 9; overflow: clip; }
.p-service__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease);
}
.p-service__item:hover .p-service__img img { scale: 1.06; }
.p-service__body { padding: 3.2rem 3rem 3.4rem; display: flex; flex-direction: column; gap: 1.6rem; flex: 1; }
.p-service__no { font-size: 1.15rem; color: var(--c-accent); letter-spacing: .12em; }
.p-service__ttl {
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: clamp(2rem, 2.4vw, 2.8rem); line-height: 1.45;
}
.p-service__txt { font-size: 1.4rem; line-height: 2; color: var(--c-sub); }
.p-service__more { margin-top: auto; padding-top: 1.4rem; align-self: flex-start; }
@media (max-width: 1023px) {
  .p-service__list, .p-service__list--3, .p-service__list--4 { grid-template-columns: 1fr; }
  .p-service__body { padding: 2.4rem 2rem 2.6rem; }
}

/* =========================================================
   CTA（パララックス画像つき）
   ========================================================= */
.c-cta { position: relative; padding-block: 12rem; overflow: clip; }
.c-cta__inner { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.c-cta__ttl {
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: clamp(2.6rem, 4.4vw, 5.6rem); line-height: 1.45; color: #fff;
}
.c-cta__lead { font-size: 1.5rem; line-height: 2; color: rgba(255, 255, 255, .86); }
.c-cta__img {
  position: absolute; z-index: 1; border-radius: var(--radius-s); overflow: clip;
  box-shadow: var(--shadow);
}
.c-cta__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-cta__img:nth-of-type(1) { width: 15vw; aspect-ratio: 4/3; left: 2vw; top: 8%; }
.c-cta__img:nth-of-type(2) { width: 11vw; aspect-ratio: 3/4; left: 13vw; bottom: 6%; }
.c-cta__img:nth-of-type(3) { width: 13vw; aspect-ratio: 4/3; right: 3vw; top: 12%; }
.c-cta__img:nth-of-type(4) { width: 10vw; aspect-ratio: 1/1; right: 14vw; bottom: 8%; }
@media (max-width: 1023px) {
  .c-cta { padding-block: 7rem; }
  .c-cta__img { display: none; }
}

/* =========================================================
   voice / message
   ========================================================= */
.p-message { padding-block: 10rem; }
.p-message__more { margin-top: 3rem; }
.p-message.is-reverse .p-message__wrap { direction: rtl; }
.p-message.is-reverse .p-message__wrap > * { direction: ltr; }
.p-message__wrap { display: grid; grid-template-columns: 38rem 1fr; gap: 6rem; align-items: center; }
.p-message__img { position: relative; border-radius: var(--radius); overflow: clip; aspect-ratio: 1/1; background: var(--c-soft); }
.p-message__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-message__ttl { font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; font-weight: 700; font-size: clamp(2.2rem, 3vw, 3.8rem); line-height: 1.55; }
.p-message__txt,
.p-message__body > p { margin-top: 2.4rem; font-size: 1.45rem; line-height: 2.2; color: var(--c-sub); }
.p-message__ttl + p { margin-top: 2.8rem; }
.c-sec-head > p:not(.c-sec-lead) { font-size: 1.5rem; line-height: 2.1; color: var(--c-sub); }
.p-message__sign { margin-top: 3rem; display: flex; align-items: baseline; gap: 1.2rem; }
.p-message__sign .role { font-size: 1.2rem; color: var(--c-sub); }
.p-message__sign .name { font-size: 2rem; }
@media (max-width: 1023px) {
  .p-message { padding-block: 5rem; }
  .p-message__wrap { grid-template-columns: 1fr; gap: 2.6rem; }
}

/* =========================================================
   news
   ========================================================= */
.p-news__list { border-top: var(--line) solid var(--c-line); }
.p-news__item { border-bottom: var(--line) solid var(--c-line); }
.p-news__link {
  display: grid; grid-template-columns: 11rem 12rem 1fr auto; gap: 2.4rem; align-items: center;
  padding-block: 2.6rem; transition: opacity .35s;
}
.p-news__link:hover { opacity: .55; }
.p-news__cat {
  justify-self: start; font-size: 1.1rem; letter-spacing: .1em; color: var(--c-accent-d);
  border: var(--line) solid var(--c-accent-l); border-radius: 100px; padding: .5rem 1.2rem;
}
.p-news__date { font-size: 1.3rem; color: var(--c-sub); }
.p-news__ttl { font-size: 1.55rem; line-height: 1.7; }
.p-news__arrow { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--c-soft); display: grid; place-items: center; }
@media (max-width: 1023px) {
  .p-news__link { grid-template-columns: auto 1fr; grid-template-areas: "cat date" "ttl ttl"; gap: 1rem 1.4rem; }
  .p-news__cat { grid-area: cat; } .p-news__date { grid-area: date; } .p-news__ttl { grid-area: ttl; }
  .p-news__arrow { display: none; }
}

/* =========================================================
   footer
   ========================================================= */
.l-footer { position: relative; z-index: 1; }
.l-footer__contact {
  background: var(--c-warm); border-radius: var(--radius) var(--radius) 0 0;
  padding: 10rem var(--pad) 9rem; text-align: center;
}
.l-footer__contact-ttl { font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; font-weight: 700; font-size: clamp(2.4rem, 3.6vw, 4.4rem); line-height: 1.45; }
.l-footer__contact-lead { margin-top: 2.4rem; font-size: 1.45rem; line-height: 2; color: var(--c-sub); }
.l-footer__contact-btns { margin-top: 4rem; display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap; }

.l-footer__main { background: #fff; padding: 8rem var(--pad) 3rem; }
.l-footer__grid { width: min(100%, var(--grid)); margin-inline: auto; display: grid; grid-template-columns: 32rem 1fr; gap: 6rem; }
.l-footer__logo img { width: 21rem; }
.l-footer__addr { margin-top: 2.6rem; font-size: 1.3rem; line-height: 2; color: var(--c-sub); }
/* 列数（フッターメニューの第1階層の数）に応じて折り返す */
.l-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 3rem 2.4rem; }
.l-footer__nav h3 { font-size: 1.15rem; letter-spacing: .12em; color: var(--c-accent); margin-bottom: 1.6rem; }
.l-footer__nav li + li { margin-top: 1.2rem; }
.l-footer__nav a { font-size: 1.35rem; transition: color .3s; }
.l-footer__nav a:hover { color: var(--c-accent); }
.l-footer__bottom {
  width: min(100%, var(--grid)); margin: 5rem auto 0; padding-top: 2.4rem;
  border-top: var(--line) solid var(--c-line);
  display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.l-footer__copy { font-size: 1.1rem; color: var(--c-sub); }
@media (max-width: 1023px) {
  .l-footer__contact { padding: 5rem var(--pad) 5rem; }
  .l-footer__main { padding: 4rem var(--pad) 2rem; }
  .l-footer__grid { grid-template-columns: 1fr; gap: 3rem; }
  .l-footer__nav { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   下層ページ
   ========================================================= */
.p-page-head {
  padding: calc(var(--header-h) + 8rem) var(--pad) 8rem;
  position: relative; z-index: 1;
}
.p-page-head__in { width: min(100%, var(--grid)); margin-inline: auto; color: #fff; }
.p-page-head__en { font-size: 1.2rem; letter-spacing: .18em; opacity: .8; }
.p-page-head__ttl {
  margin-top: 1.6rem;
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: clamp(3rem, 5vw, 6rem); line-height: 1.3;
}
.p-body { background: #fff; border-radius: var(--radius) var(--radius) 0 0; padding: 8rem var(--pad) 10rem; }
.p-body__in { width: min(100%, var(--grid-reading)); margin-inline: auto; }
.p-body__in.is-wide { width: min(100%, var(--grid)); }
.p-prose h2 {
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 2.8vw, 3.2rem); line-height: 1.5;
  margin: 6rem 0 2.4rem; padding-bottom: 1.6rem; border-bottom: var(--line) solid var(--c-line);
}
.p-prose h3 { font-size: 1.9rem; line-height: 1.6; margin: 4rem 0 1.6rem; font-weight: 700; }
.p-prose h4 { font-size: 1.6rem; line-height: 1.6; margin: 3rem 0 1.2rem; font-weight: 700; color: var(--c-accent-d); }
.p-prose p { font-size: 1.5rem; line-height: 2.15; margin-bottom: 2rem; }
.p-prose > *:first-child { margin-top: 0; }
.p-prose ul:not(.u-plain) { margin: 0 0 2.4rem; }
.p-prose ul:not(.u-plain) li {
  position: relative; padding-left: 1.8rem; font-size: 1.5rem; line-height: 2.05; margin-bottom: .6rem;
}
.p-prose ul:not(.u-plain) li::before {
  content: ""; position: absolute; left: 0; top: 1.35rem;
  width: .6rem; height: .6rem; border-radius: 50%; background: var(--c-mark);
}
/* 本文中のリンクだけ。ボタンなどクラス付きの要素には効かせない */
.p-prose a:not([class]) { color: var(--c-accent-d); text-decoration: underline; text-underline-offset: .3em; }
.p-prose img { border-radius: var(--radius-s); margin-block: 2rem; }
.p-prose table { width: 100%; margin-bottom: 3rem; }
.p-prose th, .p-prose td {
  text-align: left; vertical-align: top; padding: 1.8rem 1.4rem;
  border-bottom: var(--line) solid var(--c-line); font-size: 1.45rem; line-height: 1.9;
}
.p-prose th { width: 14rem; font-weight: 500; color: var(--c-sub); white-space: nowrap; }
.p-prose blockquote {
  margin: 0 0 2.4rem; padding: 2.4rem 2.6rem; background: var(--c-soft); border-radius: var(--radius-s);
  font-size: 1.45rem; line-height: 2;
}
@media (max-width: 1023px) {
  .p-page-head { padding: calc(var(--header-h) + 4rem) var(--pad) 4rem; }
  .p-body { padding: 4rem var(--pad) 6rem; }
  .p-prose th { width: auto; display: block; border-bottom: 0; padding-bottom: 0; }
  .p-prose td { display: block; }
}

/* archive */
.p-archive { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2.4rem; }
.p-archive__item { display: flex; flex-direction: column; gap: 1.6rem; }
.p-archive__thumb { position: relative; aspect-ratio: 16/10; border-radius: var(--radius-s); overflow: clip; background: var(--c-soft); }
.p-archive__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-archive__meta { display: flex; align-items: center; gap: 1.2rem; font-size: 1.2rem; color: var(--c-sub); }
.p-archive__ttl { font-size: 1.6rem; line-height: 1.65; font-weight: 700; }
.p-archive a { color: inherit; text-decoration: none; transition: color .3s; }
.p-archive a:hover { color: var(--c-accent-d); }
.p-archive__ex { font-size: 1.3rem; line-height: 1.9; color: var(--c-sub); }
@media (max-width: 1023px) { .p-archive { grid-template-columns: 1fr; } }

.c-pager { margin-top: 6rem; display: flex; justify-content: center; gap: .8rem; }
.c-pager .page-numbers {
  min-width: 4rem; height: 4rem; padding-inline: 1.2rem; border-radius: 100px;
  display: grid; place-items: center; font-size: 1.4rem;
  border: var(--line) solid var(--c-line); transition: .3s;
}
.c-pager .page-numbers.current, .c-pager .page-numbers:hover { background: var(--c-text); color: #fff; border-color: var(--c-text); }

/* 記事本文の下 */
.p-post-nav { margin-top: 6rem; display: flex; justify-content: space-between; gap: 2rem; }

/* accessibility */
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .js-load-show, .js-load-show { opacity: 1 !important; }
  .js .l-load { display: none; }
  .p-fv__ttl-line > span, .js-line > span, .js-fade { opacity: 1 !important; transform: none !important; }
  .c-scale-in { clip-path: none !important; }
}

/* =========================================================
   下層ページ用の部品（ショートコード）
   ========================================================= */
.c-btns { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 3rem 0; }

.c-cols { display: grid; gap: 3rem 2.6rem; margin: 3rem 0 4rem; }
.c-cols--2 { grid-template-columns: repeat(2, 1fr); }
.c-cols--3 { grid-template-columns: repeat(3, 1fr); }
.c-cols--4 { grid-template-columns: repeat(4, 1fr); }
.c-col__img { aspect-ratio: 16 / 10; border-radius: var(--radius-s); overflow: clip; margin-bottom: 1.6rem; position: relative; }
.c-col__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-col__ttl {
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif;
  font-size: 1.8rem; line-height: 1.55; margin-bottom: 1.2rem;
}
.c-col__body { font-size: 1.4rem; line-height: 2; color: var(--c-sub); }
.c-col__body p { margin-bottom: 1.2rem; }
.c-col__body > *:last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
  .c-cols--2, .c-cols--3, .c-cols--4 { grid-template-columns: 1fr; }
}

.c-note {
  margin: 3rem 0; padding: 2.6rem 2.8rem;
  background: var(--c-soft); border-radius: var(--radius-s);
  font-size: 1.4rem; line-height: 2;
}
.c-note > *:last-child { margin-bottom: 0; }

/* =========================================================
   検索フォーム
   ========================================================= */
.c-search { display: flex; gap: .8rem; margin: 2.4rem 0; max-width: 46rem; }
.c-search input[type="search"] {
  flex: 1; min-width: 0;
  padding: 1.3rem 1.8rem; font: inherit; font-size: 1.4rem;
  border: var(--line) solid var(--c-line); border-radius: 100px;
  background: #fff; color: var(--c-text);
}
.c-search input[type="search"]:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.c-search button {
  width: 4.6rem; height: 4.6rem; flex: none; border-radius: 50%;
  background: var(--c-text); color: #fff; display: grid; place-items: center;
  transition: background-color .4s var(--ease);
}
.c-search button:hover { background: var(--c-btn); }

/* =========================================================
   プラグイン出力
   Contact Form 7 / Download Manager など、
   本文中に差し込まれるものをテーマの体裁に寄せる
   ========================================================= */
.c-form { margin-top: 3rem; }
.c-form p { margin-bottom: 0; }
.c-form label { display: block; font-size: 1.4rem; line-height: 1.8; margin-bottom: .8rem; font-weight: 500; }
.c-form .nc-field { margin-bottom: 2.6rem; }
.c-form .nc-required { color: var(--c-point); font-size: 1.1rem; margin-left: .6rem; }
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form input[type="url"],
.c-form input[type="date"],
.c-form input[type="number"],
.c-form select,
.c-form textarea {
  width: 100%; padding: 1.4rem 1.6rem;
  font: inherit; font-size: 1.5rem; line-height: 1.7;
  color: var(--c-text); background: #fff;
  border: var(--line) solid var(--c-line); border-radius: var(--radius-s);
  transition: border-color .3s;
}
.c-form textarea { min-height: 16rem; resize: vertical; }
.c-form input:focus-visible,
.c-form select:focus-visible,
.c-form textarea:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), .18); }
.c-form .wpcf7-list-item { display: inline-flex; align-items: center; gap: .6rem; margin: 0 1.6rem .8rem 0; }
.c-form input[type="submit"] {
  -webkit-appearance: none; appearance: none;
  padding: 1.7rem 4rem; font: inherit; font-size: 1.5rem;
  color: #fff; background: var(--c-btn); border: 0; border-radius: 100px;
  cursor: pointer; transition: background-color .4s var(--ease);
}
.c-form input[type="submit"]:hover { background: var(--c-text); }
.c-form .wpcf7-not-valid-tip { display: block; margin-top: .8rem; font-size: 1.25rem; color: #c0392b; }
.c-form .wpcf7-response-output {
  margin: 2.4rem 0 0; padding: 1.6rem 2rem;
  border: var(--line) solid var(--c-line); border-radius: var(--radius-s);
  font-size: 1.4rem; line-height: 1.8;
}
.c-form .wpcf7-spinner { margin-left: 1.2rem; }

/* Download Manager / Simple Download Monitor の埋め込み */
.p-prose .wpdm-download-link,
.p-prose .sdm_download {
  display: inline-flex !important; align-items: center; gap: 1rem;
  padding: 1.3rem 2.4rem !important; border-radius: 100px !important;
  background: var(--c-text) !important; color: #fff !important;
  font-size: 1.4rem !important; text-decoration: none !important;
  transition: background-color .4s var(--ease);
}
.p-prose .wpdm-download-link:hover,
.p-prose .sdm_download:hover { background: var(--c-btn) !important; }
.p-prose .w3eden { --wpdm-primary: var(--c-btn); }

/* =========================================================
   アクセシビリティ
   ========================================================= */
.u-skip {
  position: absolute; left: 1rem; top: -6rem; z-index: 200;
  padding: 1rem 1.8rem; border-radius: 100px;
  background: var(--c-text); color: #fff; font-size: 1.3rem;
  transition: top .3s var(--ease);
}
.u-skip:focus-visible { top: 1rem; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* =========================================================
   メニュー（wp_nav_menu の出力）
   ========================================================= */
.l-header__nav ul { display: flex; align-items: center; gap: 3.4rem; }
.l-drawer__nav ul { display: flex; flex-direction: column; gap: 0; }
.l-drawer__nav li { border-bottom: var(--line) solid var(--c-line); }
.l-drawer__nav a { display: block; padding-block: 1.8rem; font-size: 2rem; border-bottom: 0; }
.l-header__nav .current-menu-item > a::after,
.l-header__nav .current_page_item > a::after { transform: scaleX(1); transform-origin: left; }

/* =========================================================
   パスワード保護ページ
   ========================================================= */
.c-pwform {
  margin: 2rem 0 3rem; padding: 3rem 3.2rem;
  background: var(--c-soft); border-radius: var(--radius-s);
}
.c-pwform__lead { margin: 0 0 2rem; font-size: 1.45rem; line-height: 2; }
.c-pwform__form { display: flex; gap: 1rem; flex-wrap: wrap; }
.c-pwform input[type="password"] {
  flex: 1; min-width: 22rem;
  padding: 1.4rem 1.8rem; font: inherit; font-size: 1.5rem;
  border: var(--line) solid var(--c-line); border-radius: 100px; background: #fff;
}
.c-pwform input[type="password"]:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), .18); }
.c-pwform button {
  padding: 1.4rem 3rem; font: inherit; font-size: 1.45rem;
  color: #fff; background: var(--c-btn); border-radius: 100px;
  transition: background-color .4s var(--ease);
}
.c-pwform button:hover { background: var(--c-text); }

/* =========================================================
   Striking_R 互換（移行用）
   旧テーマのショートコードで組まれた本文を、読める形に受け止める
   ========================================================= */
.c-legacy-col {
  display: inline-block; vertical-align: top;
  width: calc(var(--col, 50%) - 1.6rem);
  margin-right: 1.6rem; margin-bottom: 2rem;
}
.c-legacy-clear { display: block; clear: both; width: 100%; }
.c-legacy-hr { border: 0; border-top: var(--line) solid var(--c-line); margin: 3rem 0; }
.c-legacy-btn { display: inline-block; margin: .6rem 1rem .6rem 0; }
.c-note--legacy { background: var(--c-soft); }
.c-note--legacy.is-alert { background: #fff4f2; }
.c-note--legacy.is-success { background: #f0f8f6; }
.c-note__ttl { font-size: 1.7rem; line-height: 1.6; margin-bottom: 1.2rem; }
@media (max-width: 767px) {
  .c-legacy-col { width: 100%; margin-right: 0; }
}

/* 施錠中のしるし */
.c-lock {
  display: inline-block; margin-left: 1.2rem; padding: .35rem 1rem;
  font-size: 1rem; letter-spacing: .1em; line-height: 1;
  border: var(--line) solid currentColor; border-radius: 100px; opacity: .75;
}
.p-archive__meta .c-lock { margin-left: 0; color: var(--c-sub); }

/* =========================================================
   書籍紹介
   ========================================================= */
.p-books { display: grid; gap: 4rem 3.2rem; margin: 1rem 0 2rem; }
.p-books--2 { grid-template-columns: repeat(2, 1fr); }
.p-books--3 { grid-template-columns: repeat(3, 1fr); }

.p-book { display: grid; grid-template-columns: 16rem 1fr; gap: 2.4rem; align-items: start; }
/* 3列のときは表紙を上に積むが、幅は広げすぎない */
.p-books--3 .p-book { grid-template-columns: 1fr; gap: 1.8rem; }
.p-books--3 .p-book__cover { max-width: 15rem; }

.p-book__cover {
  display: block; border-radius: var(--radius-s); overflow: clip;
  background: var(--c-soft); box-shadow: var(--shadow);
  transition: translate .5s var(--ease), box-shadow .5s var(--ease);
}
.p-book__cover img { width: 100%; height: auto; display: block; }
a.p-book__cover:hover { translate: 0 -.4rem; box-shadow: 0 12px 28px rgba(27, 36, 38, .18); }

.p-book__ttl {
  font-family: "IBM Plex Sans JP", "Noto Sans JP", sans-serif;
  font-size: 1.9rem; line-height: 1.55; letter-spacing: -.01em;
}
.p-book__ttl a { transition: color .3s; }
.p-book__ttl a:hover { color: var(--c-accent-d); }
.p-book__sub { margin-top: .8rem; font-size: 1.35rem; line-height: 1.7; color: var(--c-accent-d); }
.p-book__txt { margin-top: 1.4rem; font-size: 1.35rem; line-height: 1.95; color: var(--c-sub); }
.p-book__txt p { margin-bottom: 1rem; }
.p-book__txt ul { margin: 0 0 1rem; }
.p-book__txt li { position: relative; padding-left: 1.5rem; margin-bottom: .4rem; }
.p-book__txt li::before {
  content: ""; position: absolute; left: 0; top: 1.1rem;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-mark);
}
.p-book__foot {
  margin-top: 1.8rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.p-book__date { font-size: 1.2rem; color: var(--c-sub); }
.p-book__link { font-size: 1.3rem; }

@media (max-width: 1023px) {
  .p-books--2, .p-books--3 { grid-template-columns: 1fr; }
  .p-book { grid-template-columns: 12rem 1fr; gap: 1.8rem; }
}