@charset "UTF-8";
/* ===== こことも ウェブサイト スタイルシート =====
   テーマ：学童保育を中心に、子どもの現場の「伴走パートナー」
   屋号「こことも」＝「こころ」＋「ともだち」＋「つながり」。
   困ったとき悩んだとき、そっと寄り添う“ともだち”のような存在。
   ロゴ＝円の中の大きな木・根・木陰に集う小動物（リス・うさぎ・小鳥）。
   ─────────────────────────────────────────────────────────
   カラー（絞る：この3〜4色＋白）
   Primary  : #9A3B2F  バーガンディ（主役・人の温かさ）
   Cream    : #F5EAD9  ウォームクリーム（地色・バナー背景と統一）
   Text     : #3A2A20  ダークブラウン（真っ黒を避け温かく）
   Accent   : #C9744F  テラコッタ（手描き風の下線・小さな差し色）
   ロゴの「◎」を“安心の二重丸”モチーフとして要所に使う。
   装飾記号は content:'\25CE' 等のUnicodeエスケープで記述する（方針維持）。
   ─────────────────────────────────────────────────────────
*/

/* ===== リセット & 基本設定 ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-primary:        #9A3B2F;   /* バーガンディ */
  --color-primary-dark:   #7A2E26;
  --color-primary-tint:   #F5EBEA;   /* バーガンディの淡い面 */
  --color-cream:          #F5EAD9;   /* ウォームクリーム（バナー背景と統一） */
  --color-cream-2:        #EEE6D4;   /* 少し濃いセクション背景 */
  --color-text:           #3A2A20;   /* ダークブラウン */
  --color-text-light:     #6B5D50;   /* 薄い文字 */
  --color-terracotta:     #C9744F;   /* テラコッタ（差し色） */
  --color-terracotta-tint:#F5E4D9;
  --color-white:          #FFFFFF;
  --color-border:         #E1D4BD;   /* 温かいボーダー */

  --font-main: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --max-width: 1040px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 6px 24px rgba(58, 42, 32, 0.10);
  --shadow-soft: 0 4px 18px rgba(58, 42, 32, 0.08);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  background-color: var(--color-cream);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: normal; }

/* ===== ユーティリティ ===== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 84px 0; }
/* スクロール先が固定ヘッダー（sticky・66px）に隠れないよう余白を確保 */
.section[id] { scroll-margin-top: 80px; }
.section--alt { background-color: var(--color-cream-2); }
.nowrap { white-space: nowrap; }

/* ブランドバナー（aboutセクションの導入帯） */
.brand-banner {
  background-color: var(--color-cream);
  padding: 8px 24px 56px;
  text-align: center;
}
.brand-banner img {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
}

/* ヒーロー先頭に置く全幅バナー（ヘッダー直下に自然に続く） */
.brand-banner--hero {
  position: relative;
  z-index: 1;
  padding: 24px 24px 36px;
}
.brand-banner--hero img {
  max-width: 1080px;
}

/* バナー内の動物クリック領域（イースターエッグ）を載せるための枠。
   img と寸法を一致させ、内部の透明リンクを % 配置する基準にする */
.hero-banner-figure {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  line-height: 0;
}
.hero-banner-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* 動物に重ねる透明クリックターゲット（top/left/width/height は全て % ＝
   バナーが伸縮しても動物に追従する）。原寸 1600×800 基準の割合で配置 */
.hero-hotspot {
  position: absolute;
  display: block;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}
/* ホバー時にごく薄い反応（透明基調は保つ・やりすぎない） */
.hero-hotspot::after {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: rgba(154, 59, 47, 0.14);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.hero-hotspot:hover::after,
.hero-hotspot:focus-visible::after {
  opacity: 1;
}

/* リス：中心 (10%, 64%) 動物 幅4.4%/高11% → 胴体を覆う小さめターゲット */
.hero-hotspot--squirrel {
  left: 8.9%;
  top: 61.5%;
  width: 2.2%;
  height: 5%;
}
/* うさぎ：中心 (28%, 64%) 動物 幅4.4%/高11% */
.hero-hotspot--rabbit {
  left: 26.9%;
  top: 61.5%;
  width: 2.2%;
  height: 5%;
}
/* ハリネズミ：中心 (55%, 72%) 動物 幅4.4%/高9% */
.hero-hotspot--hedgehog {
  left: 53.9%;
  top: 70%;
  width: 2.2%;
  height: 4%;
}
/* 子鹿：中心 (86.8%, 64%) 動物 実測bbox 幅6.9%/高17% → 胴体を覆う約半分ターゲット。
   クリックで「支援の事例」(#results)＝子鹿が見出しに乗るセクションへスクロール。
   1600×800原寸での子鹿bbox x1331-1442・y453-592 の実測から中心を算出。 */
.hero-hotspot--fawn {
  left: 85.1%;
  top: 60.5%;
  width: 3.4%;
  height: 7%;
}
/* 小鳥：下部中央・地面に立つ赤い小鳥 中心 (35.9%, 68.1%)。
   クリックで「こことも にできること」(#services)＝小鳥が見出しに乗るセクションへスクロール。
   1600×800原寸での小鳥中心 x558・y540 の実測から算出（右上の飛ぶ鳥ではなく地上の小鳥）。 */
.hero-hotspot--bird {
  left: 33.7%;
  top: 65%;
  width: 2.4%;
  height: 5%;
}
/* 蝶：左の大きな木の右上・「こことも」文字の左 中心 (31.9%, 31.9%)。
   クリックで「無料相談」(#contact)＝蝶が見出しに乗るセクションへスクロール。
   1600×800原寸での蝶中心 x510・y255 の実測から算出。小さめの当たり判定。 */
.hero-hotspot--butterfly {
  left: 30.8%;
  top: 29.6%;
  width: 2.2%;
  height: 4.5%;
}
/* てんとう虫：中央・花の間の小さな虫（右の木の左手前） 中心 (64.1%, 66.8%)。
   クリックで「よくあるご質問」(#faq)＝てんとう虫が見出しに乗るセクションへスクロール。
   1600×800原寸での虫中心 x1034・y535 の実測から算出。虫が小さいので当たり判定も小さめ。 */
.hero-hotspot--ladybug {
  left: 63.8%;
  top: 65.4%;
  width: 1.6%;
  height: 3%;
}
/* 右の小さい木：中央「こことも」文字の右・子鹿の左上 中心 (77.5%, 49%)。
   クリックで「経歴」(#career)＝経歴見出しに木が立つセクションへスクロール（木同士の双方向回遊）。
   1600×800原寸での葉冠bbox x1155-1325・y320-465 の実測から中心 x1240・y392 を算出。
   葉冠（丸い部分）を覆うやや大きめの当たり判定。子鹿(x1340〜)・「も」文字(〜x1080)・飛ぶ鳥には被らない。 */
.hero-hotspot--tree {
  left: 73%;
  top: 42.5%;
  width: 9%;
  height: 13%;
}

/* セクションタイトル（手描き風のテラコッタ下線を左に添える） */
.section-title {
  font-size: clamp(22px, 3.4vw, 31px);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 20px;
  line-height: 1.5;
  position: relative;
  padding-bottom: 2px;
}

.section-lead {
  font-size: 16px;
  color: var(--color-text-light);
  margin-bottom: 8px;
  max-width: 660px;
  line-height: 1.9;
}

/* 屋号キーワード強調（ここ／とも）＝手描き風の下線 */
.kw-here, .kw-tomo {
  position: relative;
  font-weight: 700;
  white-space: nowrap;
}
.kw-here { color: var(--color-primary); }
.kw-tomo { color: var(--color-terracotta); }
.kw-here::after, .kw-tomo::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px;
  bottom: -4px;
  height: 7px;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M1.5 5 C 25 1, 55 1, 80 4 S 108 7, 118.5 3' fill='none' stroke='%239A3B2F' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: 0.95;
}
.kw-tomo::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M1.5 5 C 25 1, 55 1, 80 4 S 108 7, 118.5 3' fill='none' stroke='%23C9744F' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ===== ヘッダー ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 234, 217, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 0.3s;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
}
.site-logo {
  font-size: 21px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.site-logo::before {
  content: '\25CE ';
  color: var(--color-terracotta);
  font-size: 19px;
}
.site-logo span {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-light);
  letter-spacing: 0.08em;
}

/* PCナビ */
.nav-pc ul { display: flex; gap: 22px; align-items: center; }
.nav-pc a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  transition: color 0.2s;
  white-space: nowrap;
  padding: 4px 2px;
}
.nav-pc a:hover { color: var(--color-primary); }

.nav-cta {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  padding: 9px 22px !important;
  border-radius: 26px;
  font-weight: 700 !important;
  transition: background 0.2s, transform 0.2s !important;
}
.nav-cta:hover { background: var(--color-primary-dark) !important; transform: translateY(-1px); }

/* ハンバーガー */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  /* 見た目（三本線 24×16px）は変えず、タップ領域だけ 44×44px に広げる。
     24+10*2=44 / 16+14*2=44。ヘッダー高さ 66px は .header-inner 固定のため不変。 */
  padding: 14px 10px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  transition: all 0.3s;
  border-radius: 2px;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* スマホナビ */
.nav-mobile {
  display: none;
  position: fixed;
  top: 66px; left: 0; right: 0; bottom: 0;
  background: var(--color-cream);
  z-index: 99;
  padding: 32px 24px;
  overflow-y: auto;
}
.nav-mobile.is-open { display: block; }
.nav-mobile ul { display: flex; flex-direction: column; }
.nav-mobile li { border-bottom: 1px solid var(--color-border); }
.nav-mobile a {
  display: block;
  padding: 16px 2px;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text);
}
.nav-mobile .nav-cta {
  display: inline-block;
  margin-top: 26px;
  padding: 14px 32px;
  border-radius: 32px;
  font-size: 16px;
}

/* ===== ボタン ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 32px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  text-align: center;
  line-height: 1.4;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(154, 59, 47, 0.22);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(154, 59, 47, 0.30);
}
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary-tint);
}

/* ===== ヒーロー（クリーム地・1カラム） ===== */
.hero {
  background: var(--color-cream);
  position: relative;
  overflow: hidden;
  padding: 0 0 0;
}
/* 背景の淡い二重丸モチーフ */
.hero::before {
  content: '\25CE ';
  position: absolute;
  top: -70px; left: -60px;
  font-size: 300px;
  color: rgba(154, 59, 47, 0.04);
  line-height: 1;
  pointer-events: none;
  font-weight: 700;
}
.hero-inner {
  position: relative;
  z-index: 1;
}
.hero-copy {
  max-width: 680px;
}
.hero-title {
  font-size: clamp(26px, 4.4vw, 42px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin-bottom: 22px;
}
.hero-sub {
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-light);
  max-width: 520px;
  margin-bottom: 34px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== 数字バンド（3つ横並び） ===== */
.stat-band {
  position: relative;
  z-index: 1;
  margin-top: 56px;
  border-top: 1px solid var(--color-border);
  background: var(--color-cream);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.stat-item {
  text-align: center;
  padding: 34px 20px;
  position: relative;
}
.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 26px; bottom: 26px;
  width: 1px;
  background: var(--color-border);
}
.stat-num {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.stat-num small { font-size: 0.5em; font-weight: 700; margin-left: 2px; }
.stat-sep { color: var(--color-terracotta); font-weight: 700; margin: 0 6px; }
.stat-label {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* ===== こんな場面、ありませんか？ ===== */
.worries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}
.worry-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-terracotta);
  border-radius: var(--radius-sm);
  padding: 22px 22px 22px 20px;
  box-shadow: var(--shadow-soft);
}
.worry-card p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text);
}
.worry-q {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.worries-note {
  margin-top: 28px;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--color-text);
}
.worries-note strong { color: var(--color-primary); font-weight: 700; }

/* ===== こことも にできること（4本柱） ===== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 32px;
}
.svc-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s, box-shadow 0.2s;
}
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.svc-num {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(154, 59, 47, 0.22);
}
.svc-body h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
  line-height: 1.5;
}
.svc-body p {
  font-size: 14.5px;
  color: var(--color-text-light);
  line-height: 1.85;
}

/* ===== 相川洋輔について ===== */
.profile-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 36px;
}
.profile-photos { display: flex; justify-content: center; }
.profile-main-img {
  width: 100%;
  max-width: 300px;
  border-radius: var(--radius);
  object-fit: cover;
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow);
  background: var(--color-cream-2);
}
.profile-name-block {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.profile-role {
  font-size: 0.85rem;
  color: var(--color-terracotta);
  font-weight: 700;
  letter-spacing: 0.04em;
  width: 100%;
  margin-bottom: 2px;
}
.profile-name {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.08em;
}
.profile-name-en { font-size: 0.85rem; color: var(--color-text-light); }

.profile-career {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
  padding: 24px 26px;
  background: var(--color-primary-tint);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--color-primary);
}
.career-item { display: flex; flex-direction: column; gap: 3px; }
.career-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.career-label::before { content: '\25CE '; color: var(--color-terracotta); font-size: 0.9rem; }
.career-desc { font-size: 0.92rem; color: var(--color-text); line-height: 1.7; padding-left: 22px; }

/* ===== 経歴（学歴／職歴／資格） ===== */
.career-board {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 30px;
  max-width: 840px;
}
.career-group {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 26px 30px;
}
.career-cat-label {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 20px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.career-entries { display: flex; flex-direction: column; }
.career-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.career-entry:first-child { padding-top: 4px; }
.career-entry:last-child { border-bottom: none; padding-bottom: 4px; }
.career-org {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.7;
  flex: 1 1 auto;
}
.career-role {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.7;
  flex: 0 0 auto;
  margin-left: auto;
}
.career-role::before { content: '\2014'; margin-right: 8px; color: var(--color-terracotta); font-weight: 400; }

.profile-story {
  font-size: 1rem;
  line-height: 1.95;
  color: var(--color-text);
  position: relative;
  padding-left: 22px;
  margin-bottom: 24px;
}
.profile-story::before {
  content: '';
  position: absolute;
  left: 0; top: 5px;
  width: 4px;
  height: calc(100% - 10px);
  background: var(--color-terracotta);
  border-radius: 2px;
  opacity: 0.5;
}
.profile-story strong { color: var(--color-primary); font-weight: 700; }

/* 価値観リスト */
.values-list { display: flex; flex-direction: column; gap: 18px; }
.value-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
}
.value-mark {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
.value-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 5px;
}
.value-body p { font-size: 14px; color: var(--color-text-light); line-height: 1.8; }

/* ===== 支援の事例 ===== */
.results-grid { display: grid; gap: 24px; }
.result-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 34px 36px;
  box-shadow: var(--shadow-soft);
  max-width: 760px;
  border-left: 5px solid var(--color-primary);
}
.result-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 14px;
  border-radius: 14px;
  margin-bottom: 16px;
}
.result-tag::before { content: '\25CE '; color: rgba(255,255,255,0.6); font-size: 12px; }
.result-facility {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.5;
}
.result-scale {
  display: inline-block;
  background: var(--color-cream);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  padding: 5px 14px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  margin-bottom: 22px;
}
.result-challenge, .result-approach { margin-bottom: 16px; }
.result-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-terracotta);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.result-card p:not(.result-label):not(.result-note):not(.result-scale) { font-size: 14.5px; color: var(--color-text); line-height: 1.85; }
.result-outcome { background: var(--color-primary-tint); border-radius: var(--radius-sm); padding: 16px 20px; }
.result-note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-text-light);
}

/* ===== ご相談の流れ ===== */
.flow-list {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 36px;
  max-width: 720px;
}
.flow-list::before {
  content: '';
  position: absolute;
  left: 25px;
  top: 50px; bottom: 50px;
  width: 2px;
  background: var(--color-border);
}
.flow-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  position: relative;
  padding-bottom: 34px;
}
.flow-item:last-child { padding-bottom: 0; }
.flow-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  border: 4px solid var(--color-cream);
  box-shadow: 0 4px 12px rgba(154, 59, 47,0.22);
}
.flow-body h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
  margin-top: 12px;
}
.flow-body p { font-size: 14px; color: var(--color-text-light); line-height: 1.8; }

/* ===== FAQ ===== */
.faq-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  max-width: 800px;
  margin-top: 32px;
}
.faq-item { border-bottom: 1px solid var(--color-border); background: var(--color-white); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%;
  text-align: left;
  padding: 21px 24px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  line-height: 1.6;
  transition: background 0.2s;
}
.faq-q:hover { background: var(--color-primary-tint); }
.q-label { color: var(--color-primary); font-weight: 700; flex-shrink: 0; margin-right: 4px; }
.arrow { font-size: 11px; color: var(--color-terracotta); transition: transform 0.3s; flex-shrink: 0; margin-top: 5px; }
.faq-item.is-open .faq-q .arrow { transform: rotate(180deg); }
.faq-a {
  display: none;
  padding: 4px 24px 22px;
  font-size: 14.5px;
  color: var(--color-text-light);
  line-height: 1.9;
  background: var(--color-white);
}
.faq-item.is-open .faq-a { display: block; }
.a-label { color: var(--color-terracotta); font-weight: 700; margin-right: 4px; }

/* ===== お問い合わせ＝無料相談 ===== */
.contact-section {
  background: var(--color-primary);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.contact-section::before {
  content: '\25CE ';
  position: absolute;
  right: -3%; top: -18%;
  font-size: 360px;
  color: rgba(255,255,255,0.05);
  pointer-events: none;
  line-height: 1;
}
.contact-section .section-title { color: #fff; }

.contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: start;
}
.contact-aside { color: #fff; }
.contact-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(240,217,160,0.55);
  color: #F0D9A0;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 24px;
  margin-bottom: 22px;
}
.contact-free-badge::before { content: '\25CE '; font-size: 13px; }
.contact-aside-lead {
  font-size: 15px;
  line-height: 1.95;
  color: rgba(255,255,255,0.92);
  margin-bottom: 22px;
}
.contact-meta { font-size: 14px; opacity: 0.9; line-height: 1.9; }
/* メールリンクのタップ領域を高さ44px以上に。padding で広げ、同値の負マージンで
   行ボックスの高さを元のまま（=本文の行間・周囲のレイアウトは不変）に保つ。 */
.contact-meta a {
  color: #F0D9A0; text-decoration: underline; font-weight: 700;
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
}

.contact-form-wrapper {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}
.contact-form-wrapper iframe { border-radius: var(--radius-sm); }

/* ===== 運営者情報 ===== */
.operator-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 760px;
  border: 1px solid var(--color-border);
  margin-top: 24px;
}
.operator-table th {
  background: var(--color-primary);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 15px 24px;
  text-align: left;
  width: 170px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  vertical-align: top;
}
.operator-table td {
  background: var(--color-white);
  padding: 15px 24px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.operator-table tr:nth-child(even) td { background: #FDFAF4; }
.operator-table tr:last-child th,
.operator-table tr:last-child td { border-bottom: none; }

/* ===== フッター ===== */
.site-footer {
  background: var(--color-primary);
  color: rgba(255,255,255,0.72);
  padding: 40px 0;
  font-size: 14px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-logo {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-logo::before { content: '\25CE '; color: #F0D9A0; }
.footer-logo span { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.6); letter-spacing: 0.08em; }

/* ===== ブランドパーツ装飾（切り出しイラストを散りばめる） =====
   すべて aria-hidden の装飾。テキスト・ボタン・フォームに被らせない。
   セクションの空いた余白（ガター）・隅にだけ小さく置く。 */
.section { position: relative; overflow: hidden; }
.container { position: relative; z-index: 1; }

/* ブランドパーツは「本文コンテナの外側＝左右ガター」にのみ置く。
   コンテナ幅は --max-width（1040px）＋左右padding 24px。
   下の配置は全て、パーツの内側端（viewport端からの張り出し量＝width＋offset）が
   ガター幅（＝(viewport-1040)/2）を超えないよう設計している。
   → 表示するのは十分なガターが取れる 1240px 超の画面だけ（下部メディアクエリで制御）。
   1240px 時のガターは (1240-1040)/2 = 100px。パーツの内側端は 96px 以下に収め、
   コンテナのpadding(24px)ぶんの余白も確保して本文と必ず離す。 */
.deco {
  display: block;
  position: absolute;
  z-index: 0;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  opacity: 0.92;
}

/* 動物キャラをクリックするとトップのバナー（#top）へ戻る双方向リンク。
   a はレイアウトに影響させないため display:contents（位置指定は img 側の
   個別クラスの transform / bottom / left がそのまま効く）。 */
.deco-link {
  display: contents;
}

/* ホバー時は不透明度だけで反応させる。
   ⚠️各個別クラスの transform: rotate()/scaleX() を上書きしないこと。 */
.deco:hover {
  opacity: 1;
}

/* ─── 「地面ライン方式」中心の散らし配置 ────────────────
   動植物は各セクション下端の余白帯（地面）に沿わせて低く置き、
   左右はガター内に収める。蝶・鳥など飛ぶものだけ上方に散らす。
   隣り合うセクションで同じ側が続かないよう左右を交互にする。
   ※横位置は必ずガター内なので、縦位置に関わらず本文とは重ならない。 */

/* こんな場面（worries）── リスを大見出しの「上端」に立たせる（文字＝地面／その上にリス）。
   .section-title は position:relative なので、bottom:100% で見出しブロックの上辺に底辺を合わせる。
   left は em 基準にして文字サイズに追従（折り返しで見出しが2行⇄1行になっても上端は一定）。
   margin-bottom を負にして足元を上端ラインに軽くめり込ませ「乗っている」接地感を出す。 */
.section-title--squirrel { position: relative; }
.deco-worries-squirrel {
  bottom: 100%;
  /* サブラベルを廃止したため左端が空いた。見出し左端寄りに置き、文字に自然に乗せる。
     em 基準なので文字サイズに追従し、折り返し（1行⇄2行）でも上端は一定。
     margin-bottom を負にして足元を見出し1行目の文字上端にギリギリ接地させる。 */
  left: 0.4em;
  width: 37px;
  /* em 指定で見出しフォントサイズに追従（clamp で 22〜31px 可変）。
     0.355em ≒ 31px時 -11px。狭い画面で font が縮んでも接地を保つ。 */
  margin-bottom: -0.355em;
  transform: rotate(-3deg);
  transform-origin: bottom center;
  z-index: 2;
}

/* 相川について（about）── うさぎを大見出しの「上端」に立たせる。
   「遊び」を出すため、リス（左端・右向き）とわざと変える：
   ・scaleX(-1) で【左向き】に（リス＝右向きと逆）。
   ・left を大きめにして見出し1行目の【右寄り】へ（0.4em→7em）。
     1行目「支援員から施設長まで。」の実測幅は約340px（1em=31px）。
     7em(217px)〜+幅37px=254px で、1行目の文字グリフ上に確実に乗る（末尾340pxより内側）。
   ・傾きもリス（-3deg）と変えて逆向き寄りに。
   bottom:100% で見出しブロック上辺＝1行目上端に底辺を合わせ、
   margin-bottom を負にして足元を1行目の文字上端にギリギリ接地させる（重ならず・余白ゼロ）。 */
.section-title--rabbit { position: relative; }
.deco-about-rabbit {
  bottom: 100%;
  left: 7em;
  width: 37px;
  margin-bottom: -0.355em;
  transform: scaleX(-1) rotate(6deg);
  transform-origin: bottom center;
  z-index: 2;
}

/* ご相談の流れ（flow）── ハリネズミ（scaleX(-1)で右向き）を大見出しの「上端」に立たせる。
   「遊び」：リス（左端・1行目）とわざと変える：
   ・横位置は2行目「安心してご相談いただけます。」の「け」の真上（9.9em）。
     配置ルール＝2行目に乗せる動物は、その真上に1行目の文字が無い位置に置く。
     1行目「4つのステップで、」は8文字で終わる（右端≈font基準4.5em付近）ので、
     2行目11文字目「け」の上（頭上に1行目の文字が無い）に乗せると、ちょこんと乗る綺麗さが出る。
     1440px実測（font 31px）：け中心≈x541・1行目右端≈x481、ハリネズミ(幅37px)中心をけに合わせ left≈9.9em。
   ・傾きもリス（-3deg）と変えて控えめに。
   2行目に乗せる仕組み＝bottom を 1行分（1.5em＝line-height）下げて 2行目上辺に底辺を合わせる。
   その状態から margin-bottom を負にして足元を2行目の文字上端にギリギリ接地させる。 */
.section-title--hedgehog { position: relative; }
.deco-flow-hedgehog {
  bottom: calc(100% - 1.5em);
  left: 9.9em;
  width: 37px;
  margin-bottom: -0.355em;
  transform: scaleX(-1) rotate(-2deg);
  transform-origin: bottom center;
  z-index: 2;
}

/* 支援の事例（results）── 子鹿を大見出しの「上端」に立たせる（文字＝地面／その上に子鹿）。
   見出し＝「いま、ご一緒している／クラブがあります。」。
   1行目(10字)が2行目(9字)より長いため、2行目には「頭上に1行目の文字が無い」空きが生まれない。
   → 配置ルール3に従い、頭上が常に空く【1行目】に乗せる（bottom:100% で1行目上端に接地）。
   「遊び」：既存3匹（リス左端・うさぎ右寄り・ハリネズミ2行目）とわざと変える：
   ・元画像が【左向き】なので scaleX を使わず素のまま左向きに（右向きのリス／ハリネズミと逆）。
   ・横位置は1行目6文字目「緒」のグリフ真上（left:4.86em）。
     「一」は漢字の上部に空間があり子鹿が宙に浮いて見えるため、上が詰まった「緒」を"地面"にする（Kai意図）。
     実測(1440px/font31px)：「緒」グリフ中心＝5.46em。子鹿(幅37px＝中心offset≈0.597em)中心を
     そこへ合わせて left＝5.46−0.597≒4.86em。足先は1行目グリフ上端に接地。
   ・傾きは +4deg（リス-3／うさぎ+6／ハリネズミ-2 と変える）。
   子鹿は縦長シルエット（515×622）なので width は 37px にして高さ過大を抑える。
   margin-bottom を負にして四つ足の足先を1行目の文字上端にギリギリ接地（重ならず・余白ゼロ）。 */
.section-title--fawn { position: relative; }
.deco-results-fawn {
  bottom: 100%;
  left: 4.86em;
  width: 37px;
  margin-bottom: -0.355em;
  transform: rotate(4deg);
  transform-origin: bottom center;
  z-index: 2;
}

/* 4つの伴走（services）── 小鳥を大見出しの「上端」に立たせる（文字＝地面／その上に小鳥）。
   見出し＝「現場に入って、一緒に手を動かす／４つの伴走」。
   1行目(14字)＞2行目(5字)なので、頭上が常に空く【1行目】に乗せる（配置ルール3・bottom:100%で1行目上端に接地）。
   「遊び」：既存4匹とわざと変える：
   ・元画像が【左向き】（くちばし左）なので scaleX を使わず素のまま左向きに置き、右寄り位置から文中を振り返る向きにする。
   ・横位置は1行目13文字目「動」のグリフ真上（実測 left:11.95em）。
     「動」は上部が詰まった漢字で"地面"に見える（配置ルール4）。
     実測(1440px/font31px)：「動」グリフ中心＝12.4em。小鳥(幅40px＝中心offset≈0.645em)中心を
     そこへ合わせて left＝12.4−0.645≒11.73em（ブラウザ実測でimg中心とグリフ中心のズレ0.1px以内に追い込み済）。足先は1行目グリフ上端に接地。
   ・傾きは +3deg（リス-3／うさぎ+6／子鹿+4／ハリネズミ-2 と変える）。
   小鳥は横長シルエット（440×333）なので width は 40px にしてやや大きめに。
   margin-bottom を負にして足元を1行目の文字上端にギリギリ接地（重ならず・余白ゼロ）。 */
.section-title--bird { position: relative; }
.deco-services-bird {
  bottom: 100%;
  left: 11.73em;
  width: 40px;
  margin-bottom: -0.355em;
  transform: rotate(3deg);
  transform-origin: bottom center;
  z-index: 2;
}

/* ご質問（faq）── てんとう虫を大見出しの「上端」に乗せる（文字＝地面／その上にてんとう虫）。
   見出し＝「ご相談前によく／いただくご質問。」。
   2行目は「。」以外が塞がるため、頭上が空く【1行目】に乗せる（配置ルール3・bottom:100%で1行目上端に接地）。
   「遊び」：既存の動物とわざと変える：
   ・元画像が【左向き】（頭左）なので scaleX を使わず素のまま左向きに。
   ・横位置は1行目4文字目「前」のグリフ真上（実測 left:3.02em）。
     「前」は上部が詰まった漢字で"地面"に見える（配置ルール4）。
     実測(1440px/font31px)：「前」グリフ中心＝3.5em。てんとう虫(幅30px＝中心offset≈0.484em)中心を
     そこへ合わせて left＝3.5−0.484≒3.02em。
   ・傾きは -4deg（他と変える）。
   てんとう虫は小さな虫なので width は 30px にして一回り小さめに。
   margin-bottom を負にして足元を1行目の文字上端にギリギリ接地（重ならず・余白ゼロ）。 */
.section-title--ladybug { position: relative; }
.deco-faq-ladybug {
  bottom: 100%;
  left: 3.02em;
  width: 30px;
  margin-bottom: -0.355em;
  transform: rotate(-4deg);
  transform-origin: bottom center;
  z-index: 2;
}

/* まずは無料相談から（contact）── 蝶を大見出しの「上端」に乗せる（文字＝地面／その上に蝶）。
   見出し＝「まずは無料相談から、／お気軽にどうぞ。」。
   1行目(10字)＞2行目(8字)なので、頭上が空く【1行目】に乗せる（配置ルール3・bottom:100%で1行目上端に接地）。
   「遊び」：既存の動物とわざと変える：
   ・元画像は【左右対称】なので scaleX を使わず素のまま。
   ・横位置は1行目6文字目「相」のグリフ真上（実測 left:4.86em）。
     「相」は上部が詰まった漢字で"地面"に見える（配置ルール4）。
     実測(1440px/font31px)：「相」グリフ中心＝5.5em。蝶(幅40px＝中心offset≈0.645em)中心を
     そこへ合わせて left＝5.5−0.645≒4.86em。
   ・傾きは +7deg（一番陽気に＝飛んできた感）。ただし羽の底辺は文字グリフ上端に接地させ浮かせない（配置ルール1）。
   蝶は width 40px。margin-bottom を負にして羽の底辺を1行目の文字上端にギリギリ接地（重ならず・余白ゼロ）。 */
.section-title--butterfly { position: relative; }
.deco-contact-butterfly {
  bottom: 100%;
  left: 4.86em;
  width: 40px;
  margin-bottom: -0.355em;
  transform: rotate(7deg);
  transform-origin: bottom center;
  z-index: 2;
}

/* 運営者情報（operator）── もぐらを大見出しの「上端」に乗せる（文字＝地面／土から顔を出す）。
   見出し＝「運営者情報」（1行・5字）。
   「遊び」：既存の動物とわざと変える：
   ・元画像は【正面】（土まんじゅうから顔を出す横長ポーズ）なので scaleX を使わず素のまま。
   ・横位置は3文字目「者」のグリフ真上（実測 left:1.76em）。
     「者」は上部が詰まった漢字で"地面"に見える（配置ルール4）。
     実測(1440px/font31px)：「者」グリフ中心＝2.5em。もぐら(幅46px＝中心offset≈0.742em)中心を
     そこへ合わせて left＝2.5−0.742≒1.76em。
   ・傾きは +1deg（ほぼ水平＝土から真上に顔を出した感）。
   もぐらは 440×167 と横長・平たいので width は 46px にして大きめに。
   底辺＝土まんじゅうの下端が「者」の文字グリフ上端にぴたっと乗るよう、
   margin-bottom を -0.355em 起点に微調整（画像は透明余白ゼロ＝底辺＝土の下端）。土が文字に重ならないこと。 */
.section-title--mole { position: relative; }
.deco-operator-mole {
  bottom: 100%;
  left: 1.76em;
  width: 46px;
  margin-bottom: -0.355em;
  transform: rotate(1deg);
  transform-origin: bottom center;
  z-index: 2;
}

/* 経歴（career）── 木を大見出しの「右隣」に立たせる（見出しテキストと肩を並べて地面に立つ）。
   見出し＝「これまでの歩み。」（1行・8字＝8em）。
   「遊び」：既存の動物は文字の"上"に乗るが、木だけは文中の続きに寄り添って"隣に立つ"。
   ・元画像は左右対称気味の木なので scaleX を使わず素のまま（向き反転なし）。
   ・横位置は句点「。」のすぐ右外側にぐっと寄せる。テキスト右端＝8em（全角8字×1em）、そこに
     固定 2.5px だけ余白を足して left＝calc(8em + 2.5px)＝木左端と「。」右端の隙間を約2.5pxに詰める
     （8em部はフォント可変 clamp 22〜31px に追従、隙間は全幅で一定＝近い距離感を保つ。木のシルエットは「。」に重ならない）。
   ・縦位置は木の bbox 下端（草の下端）を、見出し文字の視覚的下端（グリフ ink 下端）にぴったり揃える：
     bottom:0 だと line-height 分の余白＋padding で ink 下端より 9px（@font31）下がる。
     内訳＝em比例分 0.226em（halfLeading＋(fontDescent−inkDescent)）＋固定 padding-bottom 2px。
     → bottom: calc(0.226em + 2px) で持ち上げ、木下端＝文字グリフ下端（水平一直線）に合わせる（em基準でフォント可変に追従）。
   ・傾きは +1deg（木は直立が自然なのでごく控えめ）。
   木は縦長シルエット（284×440）なので width は 34px のまま小さめに（経歴欄は端正なので品よく）。
   木は文字より背が高いので上へ伸びるが、下端が文字下端に揃うので「隣に立つ」形になる。 */
.section-title--tree { position: relative; }
.deco-career-tree {
  bottom: calc(0.226em + 2px);
  left: calc(8em + 2.5px);
  width: 34px;
  transform: rotate(1deg);
  transform-origin: bottom center;
  z-index: 2;
}

/* ===== フェードイン =====
   ⚠️ 本文は「最初から見えている」が既定。JS が動いたときだけ透明にして演出する。
   （html.js は <head> の1行スクリプトが付ける。JSが動かない・止まった場合は
     .js が付かないため下の透明化は一切効かず、本文はそのまま表示される） */
.fade-in {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .fade-in {
  opacity: 0;
  transform: translateY(20px);
}
.js .fade-in.is-visible { opacity: 1; transform: translateY(0); }

/* 端末側で「動きを減らす」設定にしている人には演出を出さない（2026-08-09 Kai判断）。
   動く演出で気分が悪くなる方がいるため。他の閲覧者の見え方は変わらない。 */
@media (prefers-reduced-motion: reduce) {
  .js .fade-in,
  .js .fade-in.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== レスポンシブ ===== */
/* ブランドパーツ（.deco）は「見出し乗せ」方式（リス・うさぎ・ハリネズミの3匹）に統一。
   見出しブロック基準で上端に乗るため、狭い画面でもガター依存の被りは起きない。
   よって旧「1240px 以下で一律非表示」ルールは撤廃し、全画面幅で表示する。 */

@media (max-width: 900px) {
  .worries-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-layout { grid-template-columns: 1fr; gap: 28px; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .nav-pc { display: none; }
  .hamburger { display: flex; }
  .hero { padding: 0 0 0; }
  .brand-banner--hero { padding: 16px 16px 28px; }
  .svc-grid { grid-template-columns: 1fr; }
  .result-card { padding: 24px 22px; }
  .operator-table th { width: 120px; }
  .operator-table th, .operator-table td { padding: 12px 16px; }
  .footer-inner { flex-direction: column; text-align: center; }
  .career-group { padding: 22px 20px; }
  .career-entry { flex-direction: column; gap: 3px; }
  .career-role { margin-left: 0; }
  .career-role::before { margin-right: 6px; }
}

@media (max-width: 560px) {
  .worries-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; width: 100%; }
  .btn { width: 100%; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat-item + .stat-item::before { display: none; }
  .stat-item { border-top: 1px solid var(--color-border); }
  .stat-item:first-child { border-top: none; }
}

/* 320px 幅のときだけ、小鳥の足場を1行目13文字目「動」から9文字目「緒」へ寄せる。
   322px（画面外2px）で切れていたのを解消。「緒」も上部が詰まった漢字なので接地感は同じ。
   「緒」グリフ中心 8.5em − 小鳥中心オフセット 0.645em ＝ 7.855em。
   360px 以下のみに適用＝390px 以上の見え方は変えない。 */
@media (max-width: 360px) {
  .deco-services-bird { left: 7.855em; }
}