/* ============================================================
   Stella Nest テーマ 追加スタイル
   CI マニュアル（Ver.01 / 2025.08.08）準拠

   指定色（変更禁止）
     STELLA PINK      #FF7D81  DIC F106 Crevette / CMYK 0.57.37.0
     COOL GRAY        #4D4D4D  CMYK 0.0.0.80（資料テキスト用）
     COOL GRAY 企業色  #595757  DIC 514
     LIGHT WEDGEWOOD  #7B9EA9  CMYK 35.0.7.40
     ICE BLUE         #E0ECE5  CMYK 15.3.12.0
     ICE BALLET       #E8DEED  CMYK 10.15.0.0
     WHITE            #FFFFFF

   使い分け（CI 規定）
     ベース   … 背景は基本白
     テキスト … K80% の COOL GRAY。K100% はコントラストがきつすぎるため使わない
     メイン   … 見出しや強調。ポジティブな要素に適用
     アクセント… 特に注目させたい内容、注意書きなどネガティブなニュアンス
     サブ1/2  … ニュアンス差を出すための背景。テキストカラーとして使うのは NG

   アクセシビリティ上の制約（実測）
     STELLA PINK の文字 on 白      = 2.47:1 → 文字色に使えない
     LIGHT WEDGEWOOD の文字 on 白  = 2.87:1 → 文字色に使えない
     白文字 on STELLA PINK         = 2.47:1 → 使えない
     #4D4D4D の太字 on STELLA PINK = 3.42:1 → 大きな文字なら AA 適合
   よって STELLA PINK と LIGHT WEDGEWOOD は「面・罫線」として使い、
   文字は原則 COOL GRAY #4D4D4D とする。指定色は一切変更していない。
   ============================================================ */

:root {
  --sn-pink:   var(--wp--preset--color--stella-pink, #FF7D81);
  --sn-gray:   var(--wp--preset--color--cool-gray, #4D4D4D);
  --sn-gray-c: var(--wp--preset--color--cool-gray-corp, #595757);
  --sn-wedge:  var(--wp--preset--color--light-wedgewood, #7B9EA9);
  --sn-ice:    var(--wp--preset--color--ice-blue, #E0ECE5);
  --sn-ballet: var(--wp--preset--color--ice-ballet, #E8DEED);
  --sn-white:  var(--wp--preset--color--white, #FFFFFF);
  --sn-mono:   var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
  --sn-latin:  var(--wp--preset--font-family--latin, "Avenir Next", Arial, sans-serif);

  /* 罫線は指定色を薄めず、そのまま低い不透明度で使う */
  --sn-rule: color-mix(in srgb, var(--sn-gray) 18%, transparent);
  --sn-rule-soft: color-mix(in srgb, var(--sn-gray) 10%, transparent);
  --sn-nest: 5.5rem;   /* ロゴ図形の大きな角丸 */
}

body { font-feature-settings: "palt" 1; }

/* ---------- ロゴ ----------
   CI「使用禁止例」に従い、次を厳守する。
     ・ロゴの変形、変倍はしない        → width:auto と aspect-ratio 保持、min-width を設けない
     ・文字間隔は変えない              → ロゴを文字で再現しない（下の代替表示を参照）
     ・指定以外の色と組み合わせない    → ロゴの背後に色地を敷かない
     ・視認性を損なう色や模様の上で使用しない → ヘッダーは白地。方眼の地紋にも重ねない
     ・影をつけて表示しない            → box-shadow / filter を明示的に打ち消す
   アイソレーション: メインロゴは高さ H の 1/2 のスペースを周囲に確保する。 */
.sn-wordmark img {
  height: 30px;
  width: auto;              /* 変倍防止。幅は縦横比まかせにする */
  max-width: 100%;
  display: block;
  padding: 15px;            /* = 1/2H のプロテクトゾーン */
  box-sizing: content-box;
  background: none;         /* 指定以外の色と組み合わせない */
  box-shadow: none;         /* 影をつけて表示しない */
  filter: none;
  transform: none;          /* 変形しない */
}

/* ロゴ画像が未設定のときの代替表示。
   ロゴタイプは切り欠きのある専用書体のため、文字での再現は識別性を損なう。
   CI が禁じる「文字間隔の変更」にもあたるため、ロゴ風の字間調整は行わず、
   通常の社名テキストとして表示する。必ずロゴ画像に差し替えること。 */
.sn-wordmark {
  font-family: var(--wp--preset--font-family--gothic);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: normal;
  color: var(--sn-gray);
  text-decoration: none;
}

/* ---------- 見出しの上に付く小ラベル ----------
   注目させたい箇所なのでアクセントカラーを「面」で使い、文字はグレー。 */
.sn-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--sn-gray);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
  font-weight: 700;
}

.sn-eyebrow::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  background: var(--sn-pink);
  flex: none;
}

.sn-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--sn-rule); }

/* ---------- セクション区切り ---------- */
.sn-band { padding-block: 5.5rem; border-bottom: 1px solid var(--sn-rule-soft); }

/* ---------- ヒーロー（CI の方眼を地紋に。ICE BLUE を使用） ---------- */
.sn-hero { position: relative; padding-block: 4.5rem 4rem; }

/* 地紋はヒーロー内のみ。ヘッダー（ロゴ）には重ねない */
.sn-header::before { content: none; }

.sn-hero::before {
  content: "";
  position: absolute;
  inset: 0 -1.5rem;
  background-image:
    repeating-linear-gradient(to right, var(--sn-ice) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(to bottom, var(--sn-ice) 0 1px, transparent 1px 46px);
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
}

.sn-hero > * { position: relative; }

/* 見出し中の強調は文字色を変えず、STELLA PINK の下線で示す（文字色に使うと 2.47:1 で不足） */
.sn-mark {
  background: linear-gradient(transparent 68%, var(--sn-pink) 68%, var(--sn-pink) 92%, transparent 92%);
}

/* ---------- 波形図 ---------- */
.sn-scope-wrap { margin-block: 2.5rem 2rem; }

.sn-scope {
  display: block;
  width: 100%;
  height: 210px;
  border-top: 1px solid var(--sn-rule);
  border-bottom: 1px solid var(--sn-rule);
  background: var(--sn-white);
}

.sn-scope-key {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--sn-gray);
  margin-top: 0.8rem;
}

.sn-scope-key span { display: inline-flex; align-items: center; gap: 0.42rem; }
.sn-scope-key i { width: 1.35rem; height: 3px; display: inline-block; }

/* ---------- 信頼指標の帯 ---------- */
.sn-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border: 1px solid var(--sn-rule);
  margin: 0;
}

.sn-proof > div { padding: 1.15rem 1.2rem; border-right: 1px solid var(--sn-rule); }
.sn-proof > div:last-child { border-right: 0; }

.sn-proof dt {
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  color: var(--sn-gray);
  font-weight: 700;
  margin-bottom: 0.42rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--sn-pink);
  display: inline-block;
}

.sn-proof dd { margin: 0; font-size: 0.87rem; line-height: 1.65; }

/* ---------- ボタン ----------
   ピンク地 + COOL GRAY 太字 = 3.42:1。大きな文字として AA 適合。
   白文字は 2.47:1 で不足するため使わない。 */
.wp-block-button__link.has-stella-pink-background-color { color: var(--sn-gray) !important; }

/* ---------- リスト ---------- */
.sn-list, .sn-check { list-style: none; padding-left: 0; }

.sn-list li {
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-bottom: 1px solid var(--sn-rule-soft);
  position: relative;
}

.sn-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.32rem;
  width: 0.6rem;
  height: 3px;
  background: var(--sn-pink);
}

.sn-check li {
  padding: 0.8rem 0 0.8rem 2.1rem;
  border-bottom: 1px solid var(--sn-rule-soft);
  position: relative;
}

.sn-check li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 1.15rem;
  width: 0.62rem;
  height: 0.32rem;
  border-left: 2.5px solid var(--sn-pink);
  border-bottom: 2.5px solid var(--sn-pink);
  transform: rotate(-45deg);
}

/* ---------- 引用（大きく見せる一文） ---------- */
.sn-pull {
  font-family: var(--wp--preset--font-family--mincho);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  line-height: 1.62;
  border-left: 4px solid var(--sn-pink);
  padding: 0.3rem 0 0.3rem 1.5rem;
  margin-block: 0 1.8rem;
}

/* ---------- 補足・注意書き ----------
   CI: ネガティブなニュアンスの箇所はアクセントカラー（面として使用）。 */
.sn-note {
  font-size: 0.87rem;
  border-left: 4px solid var(--sn-wedge);
  background: color-mix(in srgb, var(--sn-wedge) 8%, transparent);
  padding: 0.9rem 1rem;
}

/* ---------- カード ---------- */
.sn-cards { border: 1px solid var(--sn-rule); gap: 1px !important; background: var(--sn-rule); }
.sn-cards > .wp-block-column { background: var(--sn-white); padding: 1.6rem 1.4rem; }
.sn-cards h3 { font-size: 1.02rem; margin-block: 0 0.55rem; }
.sn-cards p { font-size: 0.89rem; margin-block-end: 0; }

/* ---------- 表 ---------- */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }

.wp-block-table th,
.wp-block-table td {
  padding: 0.72rem 0.95rem;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--sn-rule-soft);
  vertical-align: top;
}

.wp-block-table thead th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  background: var(--sn-ice);
  white-space: nowrap;
}

.wp-block-table tbody tr:last-child td { border-bottom: 0; }
.sn-table-boxed table { border: 1px solid var(--sn-rule); }

.sn-num, .sn-table-num td:not(:first-child) {
  font-family: var(--sn-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 有意水準の印。面ではなく記号なので太字で示す */
.sn-sig { font-weight: 700; }

/* 強調セル（ポジティブな結果なのでメインカラーを面で使用） */
.sn-hi { background: color-mix(in srgb, var(--sn-pink) 18%, transparent); font-weight: 700; }

/* ---------- 4フェーズ（順序があるので採番している） ---------- */
.sn-phases { border-top: 1px solid var(--sn-rule); }

.sn-phase {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.2rem 1.2rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--sn-rule-soft);
}

@media (min-width: 46rem) { .sn-phase { grid-template-columns: 3rem 11rem 1fr; } }

.sn-phase-n {
  font-family: var(--sn-latin);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sn-gray);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15rem;
  border-bottom: 3px solid var(--sn-pink);
  align-self: start;
  justify-self: start;
}

.sn-phase h3 { margin: 0; font-size: 1rem; }
.sn-phase p { margin: 0; font-size: 0.89rem; }
.sn-phase .sn-out { grid-column: 1 / -1; font-size: 0.85rem; padding-left: 4.2rem; }
@media (min-width: 46rem) { .sn-phase .sn-out { grid-column: 3; padding-left: 0; padding-top: 0.4rem; } }

/* ---------- 人物・事例の囲み ---------- */
.sn-panel {
  border: 1px solid var(--sn-rule);
  border-top: 3px solid var(--sn-pink);
  padding: 1.7rem 1.5rem;
  margin-block-end: 1.4rem;
  background: var(--sn-white);
}

.sn-panel h3 { margin-block: 0 0.15rem; }

.sn-role {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  background: var(--sn-ballet);
  display: inline-block;
  padding: 0.2rem 0.7rem;
  margin-block-end: 1rem;
}

/* ---------- 問い合わせパネル（ロゴ図形の角丸） ----------
   ピンク地に載せる文字は COOL GRAY。白文字は 2.47:1 で不足するため使わない。 */
.sn-nest-panel {
  background: var(--sn-pink);
  color: var(--sn-gray);
  border-radius: var(--sn-nest) 0 var(--sn-nest) 0;
  padding: 2.8rem 2.2rem;
}

.sn-nest-panel h2, .sn-nest-panel p { color: var(--sn-gray); }
.sn-nest-panel p { font-weight: 700; }
.sn-nest-panel p:last-child { margin-block-end: 0; }

/* ---------- フッター ---------- */
.sn-footer {
  padding-block: 2.5rem 4rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  border-top: 1px solid var(--sn-rule-soft);
}

/* ---------- アクセシビリティ ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--sn-gray);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- ヘッダー ---------- */
.sn-header {
  background: var(--sn-white);   /* ロゴを模様や色地の上に置かない */
  border-bottom: 1px solid var(--sn-rule-soft);
}
.sn-header .wp-block-navigation { font-weight: 700; }

/* ---------- お知らせ一覧（HOME） ---------- */
.sn-news .wp-block-post-template { list-style: none; padding-left: 0; margin: 0; }

.sn-news-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem 1.4rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--sn-rule-soft);
}

@media (min-width: 40rem) {
  .sn-news-item { grid-template-columns: 7rem 1fr; align-items: baseline; }
}

.sn-news-date {
  font-family: var(--sn-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  margin: 0;
}

.sn-news-item h3 { margin: 0; font-size: 1rem; line-height: 1.6; }
.sn-news-item h3 a { text-decoration: none; }
.sn-news-item h3 a:hover { text-decoration: underline; }