/* ============================================================
   色：白黒から、名刺のブルー／グリーンを効かせた配色へ
   craft.css のあとに読み込む
   ============================================================ */

:root {
  --blue-d: #0b7fb4;
  --blue-l: #e8f6fd;
  --green-d: #6fa30f;
  --green-l: #f1f8e4;
  --grad: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
  --grad-soft: linear-gradient(120deg, rgba(0, 164, 227, .10) 0%, rgba(142, 195, 31, .10) 100%);
}

/* ---- 面の地色に、ごく薄い色を敷く ---- */
section.tint { background: linear-gradient(180deg, #f3fafd 0%, #f7fbf4 100%); }
section.leaf { background: linear-gradient(180deg, #f8fbf3 0%, #f4fafd 100%); }
section.tint::before, section.leaf::before {
  background-image:
    linear-gradient(rgba(0, 164, 227, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 164, 227, .05) 1px, transparent 1px);
}

/* ---- 節の見出し ---- */
.sec-head::after { background: var(--grad); height: 2px; }
.sec-head .en { color: var(--blue-d); }
.sec-head .en::after { background: var(--grad); width: 7px; height: 7px; }
.sec-head h2 { color: var(--ink); }
section.ink .sec-head .en { color: #7fd4f5; }

/* ---- 大きな番号：ブルー→グリーンの透かし ---- */
.head-row .bignum {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .16;
}
section.ink .head-row .bignum { opacity: .3; }

/* ---- カードの上辺・帯 ---- */
.card::before, .tile::before, .how-grid article::before, .lean article::before { background: var(--grad); }
.card:hover { box-shadow: 0 0 0 1px rgba(0, 164, 227, .5), 0 20px 44px rgba(11, 127, 180, .12); }
.tile:hover { box-shadow: 0 0 0 1px rgba(0, 164, 227, .5), 0 14px 30px rgba(11, 127, 180, .1); }
.card .kind { color: var(--blue-d); border-bottom-color: rgba(0, 164, 227, .28); }
.tile h4::before { background: var(--blue); }
.tile:nth-child(even) h4::before { background: var(--green); }

/* ---- 箇条書き・成果 ---- */
.gains li { background: #fff; box-shadow: 0 0 0 1px rgba(0, 164, 227, .18); }
.gains li:nth-child(even) { box-shadow: 0 0 0 1px rgba(142, 195, 31, .22); }
.ticks li::before { background: var(--blue); }

/* ---- 段階（流れ）---- */
.steps { border-top-color: rgba(0, 164, 227, .3); }
.steps > li { border-bottom-color: rgba(0, 164, 227, .18); }
.steps > li::before { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .55; }
.steps > li:hover::before { opacity: 1; }

/* ---- 表 ---- */
.facts { border-top-color: var(--ink); }
.facts dt { color: var(--blue-d); }
.facts dt::before { background: var(--blue); }
.facts div:nth-child(even) dt::before { background: var(--green); }
.facts div::after { background: var(--grad); height: 2px; }

/* ---- 立ち位置・宣言の番号 ---- */
.creed .no { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .35; }
.creed li:hover .no { opacity: 1; }

/* ---- 引用 ---- */
.pull { border-left-color: var(--blue); }
.pull::before { color: rgba(0, 164, 227, .28); }

/* ---- 講師 ---- */
.profiles { border-top-color: var(--ink); }
.profile .role { color: var(--blue-d); }
.profile .tags li { border-color: rgba(0, 164, 227, .35); color: var(--blue-d); background: var(--blue-l); }
.profile .tags li:nth-child(even) { border-color: rgba(142, 195, 31, .4); color: var(--green-d); background: var(--green-l); }
.profile .rows dt { color: var(--slate); }
.profile .rows div { border-bottom-color: rgba(0, 164, 227, .16); }

/* ---- よくある質問 ---- */
.qa summary::before { color: var(--blue); }
.qa details[open] summary { color: var(--blue-d); }
.qa summary span.plus { background: var(--blue); }
.qa summary::after { background: rgba(0, 164, 227, .5); }

/* ---- 一覧の行 ---- */
.rows { border-top-color: var(--ink); }
.row-link { border-bottom-color: rgba(0, 164, 227, .18); }
.row-link .n { color: var(--blue-d); }
.row-link:hover { background: linear-gradient(90deg, rgba(0, 164, 227, .06), rgba(142, 195, 31, .04)); }
.row-link .go::before, .row-link .go::after { background: var(--blue-d); }
.row-link.all { background: var(--blue-l); }

/* ---- 設計の考え方 ---- */
.block-lab { color: var(--blue-d); border-bottom-color: var(--ink); }
.what-grid article { border-top-color: rgba(0, 164, 227, .35); }
.what-grid h4 { color: var(--ink); }
.how-grid article { box-shadow: 0 0 0 1px rgba(0, 164, 227, .18); }
.how-grid a { color: var(--blue-d); }
.design-eq .box { box-shadow: 0 0 0 1px rgba(0, 164, 227, .22); }
.design-eq .box .cap { color: var(--blue-d); }
.design-eq .op { color: var(--blue); }
.design-eq .box.out { background: linear-gradient(135deg, #12181c 0%, #123b4c 100%); }
.design-eq .box.out .cap { color: #7fd4f5; }
.design-eq .box.out .ttl { color: #fff; }   /* 段落を濃くする共通指定（weight.css）に負けないように */

/* ---- 図 ---- */
.dia-bridge, .dia-flow, .dia-cycle { box-shadow: 0 0 0 1px rgba(0, 164, 227, .2); background: linear-gradient(180deg, #fff 0%, #fbfeff 100%); }
.dia figcaption { color: var(--blue-d); }

/* ---- 体験への誘い ---- */
.try { background: var(--grad-soft); box-shadow: 0 0 0 1px rgba(0, 164, 227, .24); }
.try::after { border-color: rgba(0, 164, 227, .3); }

/* ---- 締めの帯 ---- */
.cta-band { background: linear-gradient(135deg, #12181c 0%, #123b4c 55%, #1d4a1e 140%); }

/* ---- 濃い面 ---- */
section.ink { background: linear-gradient(160deg, #12181c 0%, #101f27 60%, #12181c 100%); }

/* ---- 本文中のリンク ---- */
main a:not(.btn):not(.btn-line):not(.row-link):not(.cta):not(.logo):not(.page-hero .crumb a) { color: var(--blue-d); }

/* ---- 先頭の面の縦線に色 ---- */
.page-hero .inner::before { background: linear-gradient(180deg, rgba(0, 164, 227, 0), rgba(0, 164, 227, .85), rgba(142, 195, 31, 0)); }

/* ---- ページの進行バー ---- */
.progress { background: var(--grad); height: 3px; }

/* ---- 脚 ---- */
.site-foot .tagline .s1 { color: var(--blue); }
.site-foot .tagline .s2 { color: var(--green); }

/* 段階リスト：番号は左、見出しと本文は右の1列に */
.steps > li { grid-template-columns: 5.5em minmax(0, 1fr); }
.steps > li::before { grid-column: 1; grid-row: 1 / span 2; }
.steps > li > * { grid-column: 2; }
.steps > li h3 { grid-row: 1; }
.steps > li p { grid-row: 2; }

/* 段階リスト：番号＋見出しを左、説明を右に並べて、空白を減らす */
.steps > li {
  position: relative; grid-template-columns: minmax(170px, 300px) minmax(0, 1fr);
  gap: clamp(18px, 3.5vw, 56px); align-items: start; padding: clamp(20px, 3vh, 30px) 0;
  transition: background .3s;
}
.steps > li::before { position: absolute; left: 0; top: clamp(20px, 3vh, 30px); font-size: clamp(18px, 2vw, 24px); opacity: .5; }
.steps > li h3 { grid-column: 1; grid-row: 1; padding-left: 3.4em; }
.steps > li p { grid-column: 2; grid-row: 1; margin-top: .35em; }
.steps > li:hover { background: linear-gradient(90deg, rgba(0, 164, 227, .05), transparent 70%); }
@media (max-width: 720px) {
  .steps > li { grid-template-columns: 1fr; }
  .steps > li p { grid-column: 1; grid-row: 2; padding-left: 3.4em; }
}

/* 段階リスト（修正版）：番号・見出し・説明の3列。見出しは折り返さない */
.steps > li {
  position: relative;
  grid-template-columns: 3.4em minmax(8em, 13em) minmax(0, 1fr);
  gap: clamp(14px, 2.6vw, 40px);
  align-items: baseline;
}
.steps > li::before { position: static; grid-column: 1; grid-row: 1; font-size: clamp(16px, 1.8vw, 22px); }
.steps > li h3 { grid-column: 2; grid-row: 1; padding-left: 0; white-space: nowrap; text-wrap: nowrap; }
.steps > li p { grid-column: 3; grid-row: 1; margin-top: 0; }
@media (max-width: 860px) {
  .steps > li { grid-template-columns: 3.4em minmax(0, 1fr); }
  .steps > li h3 { white-space: normal; }
  .steps > li p { grid-column: 2; grid-row: 2; margin-top: .5em; }
}
/* 講師の得意分野の札：黄緑の文字は読みにくいので濃く */
.profile .tags li:nth-child(even) { color: #4d7a06; }