/* =========================================================
   さいたま就労支援ナビ トップページ CSS v3
   実際の「近江母の郷」画面キャプチャを踏まえて調整：
   - 連続感のある背景写真＋白いカードが浮かぶ構成
   - 丸い曲線でセクションを区切る
   - 見出しの背後に薄く大きな欧文
   - 珊瑚色の水玉装飾／縦書き見出し
   人物写真は業種的に不向きなため、手元・植物・道などの写真に置き換え。
   索引型の機能（エリア/路線/サービス種別での絞り込み）は維持
   すべて .ssn-front スコープ（Cocoonテーマとの衝突回避）
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Shippori+Mincho:wght@500;700&display=swap');

.ssn-front{
  /* ===== 配色：写真の透明感に合わせた空色×珊瑚×生成り ===== */
  --sky:#6E9FBD; --sky-deep:#4C7A96; --sky-bg:#EAF2F6;
  --coral:#D9694F; --coral-deep:#B8523B; --coral-bg:#FBEAE4;
  --paper:#FFFFFF; --bg:#FAF6EE; --ink:#2B2A22; --ink-soft:#78725F; --line:#E8E1D0;
  /* 互換用（既存クラスがmoss/amberを参照しているため） */
  --moss:var(--sky); --moss-deep:var(--sky-deep); --moss-bg:var(--sky-bg);
  --amber:var(--coral); --amber-deep:var(--coral-deep); --amber-bg:var(--coral-bg);

  background:var(--bg);
  color:var(--ink);
  font-family:'Noto Sans JP',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
.ssn-front *{ box-sizing:border-box; }
.ssn-front .disp{ font-family:'Zen Kaku Gothic New',sans-serif; }
.ssn-front .mincho{ font-family:'Shippori Mincho',serif; }
.ssn-front a{ color:inherit; text-decoration:none; }
.ssn-front img{ display:block; max-width:100%; }
.ssn-front ruby{ font-weight:inherit; }
.ssn-front rt{ font-size:0.5em; color:var(--ink-soft); font-weight:500; user-select:none; letter-spacing:0; }
.ssn-front .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }
.ssn-front .reveal.on{ opacity:1; transform:translateY(0); }
.ssn-front .wrap{ max-width:860px; margin:0 auto; padding:0 22px; }

/* ===== index nav (sticky) ===== */
.ssn-front .index-nav{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:blur(4px); border-bottom:1px solid var(--line);
  display:flex; overflow-x:auto; padding:0 22px;}
.ssn-front .index-nav a{ flex-shrink:0; font-size:11.5px; color:var(--ink-soft); padding:13px 14px; border-bottom:2px solid transparent; white-space:nowrap; display:flex; gap:6px; align-items:baseline;}
.ssn-front .index-nav a b{ color:var(--amber-deep); font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700; font-size:10px;}
.ssn-front .index-nav a:first-child{ border-bottom-color:var(--moss); color:var(--ink); font-weight:700;}

/* ===== hero：連続感のある背景写真＋縦書き＋浮遊ナビカード ===== */
.ssn-front .hero{ position:relative; }
.ssn-front .hero-photo{
  position:relative; height:min(calc(100vw * 1901 / 900), 1901px); min-height:380px; overflow:hidden;
  background:#fff center top no-repeat;
  background-image:url("../img/hero-sp.webp?v=1");
  background-size:contain;
}
.ssn-front .hero-photo::before{
  /* 空色〜生成りへ溶け込むグラデーション（写真が下のセクションへ連続しているような効果）＋コンセプトカラーの温かみを一枚重ねる */
  content:""; position:absolute; inset:0;
  background:none;
}

/* ヒーロー内ルート線（現在地→目的地のピンを結ぶ点線：「はたらくに近づく地図」のコンセプトを可視化） */
.ssn-front .hero-route{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.ssn-front .hero-route svg{ width:100%; height:100%; display:block; }
.ssn-front .hero-route-line{
  stroke:#fff; stroke-width:0.6; stroke-dasharray:2.2 2; opacity:.85;
}
.ssn-front .hero-route-pin{ stroke:#fff; stroke-width:0.5; }
.ssn-front .hero-route-pin-start{ fill:var(--coral); }
.ssn-front .hero-route-pin-end{ fill:var(--sky); }
.ssn-front .hero-photo::after{
  /* 下端の丸い切れ込み（めくれるような区切り） */
  content:""; position:absolute; left:-4%; right:-4%; bottom:-1px; height:28px;
  background:var(--bg); border-radius:52% 48% 0 0/100% 100% 0 0;
}
.ssn-front .hero-tategaki{
  position:absolute; top:34px; right:26px; z-index:2;
  writing-mode:vertical-rl; font-family:'Shippori Mincho',serif; font-weight:700;
  font-size:clamp(20px,4.4vw,30px); color:#fff; line-height:1.7; letter-spacing:.08em;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
}
.ssn-front .hero-eyebrow{
  position:absolute; left:22px; bottom:96px; z-index:2;
  font-size:11px; letter-spacing:.2em; color:#fff; font-weight:700; opacity:.92;
  text-shadow:0 1px 8px rgba(0,0,0,.25);
}

/* ヒーロー内ロゴ（トップページのみ：テーマ標準のプレーンなサイトタイトル見出しの代わりに表示）
   縦書き見出しと同じ明朝体で、写真中央に文字だけを大きく配置 */
h1.logo.logo-header.logo-text{ display:none; }
.ssn-front .hero-logo-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  display:flex; align-items:center; justify-content:center;
}
.ssn-front .hero-logo-badge .hlb-text{
  font-family:'Shippori Mincho',serif; font-weight:700;
  font-size:clamp(40px,7.4vw,64px); letter-spacing:.12em; padding-left:.12em;
  color:#fff; white-space:nowrap;
  text-shadow:0 3px 18px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.45);
}
@media (max-width:480px){
  .ssn-front .hero-logo-badge .hlb-text{ font-size:clamp(26px,8.6vw,38px); }
}

/* 浮遊ナビカード（エリア/サービス/路線への近道） */
.ssn-front .hero-navcard{
  position:absolute; left:18px; top:18px; z-index:3;
  background:rgba(255,255,255,.94); backdrop-filter:blur(4px);
  border-radius:16px; padding:14px 12px; box-shadow:0 10px 26px rgba(43,52,58,.14);
  display:flex; flex-direction:column; gap:10px; max-width:120px;
}
.ssn-front .hero-navcard a{ display:flex; flex-direction:column; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:var(--ink); text-align:center;}
.ssn-front .hero-navcard .nc-icon{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;}
.ssn-front .hero-navcard .nc-icon svg{ width:18px; height:18px;}
.ssn-front .hero-navcard .nc-1{ background:var(--sky);}
.ssn-front .hero-navcard .nc-2{ background:var(--coral);}
.ssn-front .hero-navcard .nc-3{ background:#8A9A5B;}

/* 重なり合う浮遊写真カード（ヒーロー下端に一部食い込む） */
.ssn-front .hero-photocards{
  position:relative; z-index:3; display:flex; justify-content:center; gap:16px;
  margin-top:-58px; padding:0 22px;
}
.ssn-front .hpc{
  width:min(42%,190px); aspect-ratio:4/3; border-radius:16px; background:var(--sky-bg) center/cover no-repeat;
  box-shadow:0 14px 30px rgba(43,52,58,.18); border:4px solid var(--paper);
}
.ssn-front .hpc.hpc-2{ margin-top:26px; }

.ssn-front .hero-below{ padding:32px 0 36px; background:var(--bg);}
.ssn-front .hero-below p{ font-size:13.5px; color:var(--ink-soft); line-height:1.9; max-width:460px; margin:0 auto 22px; text-align:center;}

.ssn-front .search-module{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:0 14px 34px rgba(78,122,150,0.12); margin-top:26px; position:relative; z-index:3;}
.ssn-front .search-module .sm-label{ font-size:10.5px; color:var(--ink-soft); font-weight:700; letter-spacing:.05em; margin-bottom:8px;}
.ssn-front .search-module input{ width:100%; border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:14px; font-family:inherit; background:#FCFAF4; margin-bottom:10px;}
.ssn-front .search-module .sm-row{ display:flex; gap:8px; min-width:0;}
.ssn-front .sm-select{ flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:11px 10px; font-size:12px; color:var(--ink-soft); background:#FCFAF4;}
.ssn-front .sm-btn{ background:var(--moss); color:#fff; border:none; border-radius:8px; padding:11px 22px; font-size:13px; font-weight:700; font-family:inherit; white-space:nowrap; cursor:pointer;}
.ssn-front .sm-btn rt{ color:rgba(255,255,255,0.75);}

/* ===== section shell ===== */
.ssn-front .idx-section{ padding:56px 0 60px; position:relative; overflow:hidden;}
.ssn-front .idx-section:not(:last-of-type){
  /* 白い曲線の"めくれ"区切り（次のセクションへの継ぎ目） */
  border-bottom:none;
}
.ssn-front .idx-section:not(:last-of-type)::after{
  content:""; position:absolute; left:-4%; right:-4%; bottom:-1px; height:46px;
  background:var(--paper); border-radius:52% 48% 0 0/100% 100% 0 0; z-index:1;
}
.ssn-front .idx-section:nth-of-type(even){ background:var(--sky-bg); }
.ssn-front .idx-section:nth-of-type(even)::after{ background:var(--bg); }
.ssn-front .idx-section .wrap{ position:relative; z-index:2; }
.ssn-front .idx-bigword{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900; font-size:clamp(46px,13vw,92px);
  color:var(--ink); opacity:.05; letter-spacing:.02em; white-space:nowrap; pointer-events:none; z-index:0;
}
.ssn-front .idx-dots{ position:absolute; top:8px; right:22px; display:grid; grid-template-columns:repeat(3,7px); gap:6px; opacity:.85; z-index:1;}
.ssn-front .idx-dots span{ width:7px; height:7px; border-radius:50%; background:var(--coral);}
.ssn-front .idx-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; position:relative;}
.ssn-front .idx-title-row{ display:flex; align-items:center; gap:10px; margin-top:6px; min-width:0;}
.ssn-front .idx-icon{ width:34px; height:34px; border-radius:50%; background:var(--sky-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ssn-front .idx-icon svg{ width:16px; height:16px; color:var(--sky-deep);}
.ssn-front .idx-title{ font-size:19px; font-weight:700; min-width:0; overflow-wrap:break-word;}
.ssn-front .idx-count{ font-size:11px; color:var(--ink-soft); text-align:right;}

/* ===== section banner photo（各セクションの導入写真） ===== */
.ssn-front .idx-banner{
  width:100%; aspect-ratio:16/6.2; border-radius:16px; overflow:hidden; margin-bottom:22px;
  background:var(--moss-bg) center/cover no-repeat;
}

/* ===== service type cards ===== */
.ssn-front .svc-grid{ display:flex; flex-direction:column; gap:10px;}
.ssn-front .svc-item{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; justify-content:space-between; align-items:center; gap:14px;}
.ssn-front .svc-item .abbr{ width:42px; height:42px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; flex-shrink:0; font-family:'Zen Kaku Gothic New',sans-serif;}
.ssn-front .abbr-a{ background:#5C7A6A;}
.ssn-front .abbr-b{ background:var(--moss);}
.ssn-front .abbr-ikou{ background:#8A7A4E;}
.ssn-front .abbr-teichaku{ background:var(--amber-deep);}
.ssn-front .svc-item .txt{ flex:1; min-width:0; overflow-wrap:break-word;}
.ssn-front .svc-item h4{ font-size:13.5px; font-weight:700; margin-bottom:3px;}
.ssn-front .svc-item p{ font-size:11.5px; color:var(--ink-soft); line-height:1.75;}
.ssn-front .svc-item .go{ font-size:11px; color:var(--amber-deep); font-weight:700; flex-shrink:0; text-align:right;}

/* ===== journey ===== */
.ssn-front .journey-list{ display:flex; flex-direction:column; gap:0; position:relative;}
.ssn-front .journey-list::before{ content:""; position:absolute; left:17px; top:6px; bottom:6px; width:2px; background:repeating-linear-gradient(to bottom, var(--moss) 0 5px, transparent 5px 10px);}
.ssn-front .j-row{ display:flex; gap:16px; padding:18px 0; align-items:flex-start;}
.ssn-front .j-idx{
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:13px; color:#fff; font-weight:700;
  flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--moss);
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
}
.ssn-front .j-body{ padding-top:4px;}
.ssn-front .j-body h4{ font-size:14px; font-weight:700; margin-bottom:4px;}
.ssn-front .j-body p{ font-size:12px; color:var(--ink-soft); line-height:1.8;}

.ssn-front .journey-link{
  margin-top:20px; display:flex; align-items:center; gap:14px;
  background:var(--moss-bg); border:1px solid #D9E3D3; border-radius:14px; padding:16px;
}
.ssn-front .jl-icon{ width:38px; height:38px; border-radius:50%; background:var(--paper); border:1.5px solid var(--moss); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ssn-front .jl-icon svg{ width:18px; height:18px; color:var(--moss-deep);}
.ssn-front .jl-text{ flex:1; min-width:0;}
.ssn-front .jl-text h4{ font-size:13.5px; font-weight:700; color:var(--moss-deep); margin-bottom:3px;}
.ssn-front .jl-text p{ font-size:11px; color:var(--ink-soft); line-height:1.7; overflow-wrap:break-word;}
.ssn-front .jl-arrow{ font-size:16px; color:var(--amber-deep); font-weight:700; flex-shrink:0;}

/* ===== pickup（写真サムネイル） ===== */
.ssn-front .pickup-card{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; display:flex; gap:14px;}
.ssn-front .pickup-thumb{ width:72px; height:72px; border-radius:10px; flex-shrink:0; background:var(--moss-bg) center/cover no-repeat;}
.ssn-front .pickup-body{ min-width:0; overflow-wrap:break-word;}
.ssn-front .new-tag{ display:inline-block; font-size:9.5px; font-weight:700; color:var(--amber-deep); background:var(--amber-bg); padding:2px 7px; border-radius:4px; letter-spacing:.04em; margin-bottom:5px;}
.ssn-front .pickup-body h4{ font-size:14px; font-weight:700; margin-bottom:4px;}
.ssn-front .pickup-body .loc{ font-size:11.5px; color:var(--ink-soft); margin-bottom:6px; line-height:1.9;}
.ssn-front .pickup-body .go{ font-size:11.5px; color:var(--amber-deep); font-weight:700;}

/* ===== closing：写真背景 ===== */
.ssn-front .closing{ position:relative; padding:64px 0 90px; text-align:center; overflow:hidden;}
.ssn-front .closing-photo{ position:absolute; inset:0; background:var(--moss-bg) center/cover no-repeat;}
.ssn-front .closing-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(250,246,238,.92) 0%, rgba(250,246,238,.97) 100%);}
.ssn-front .closing .wrap{ position:relative; z-index:2;}
.ssn-front .closing-deco{ width:44px; height:44px; margin:0 auto 16px; color:var(--moss-deep);}
.ssn-front .closing-deco svg{ width:100%; height:100%; display:block;}
.ssn-front .closing h2{ font-family:'Shippori Mincho',serif; font-size:clamp(22px,4.6vw,30px); font-weight:700; line-height:1.7; margin-bottom:24px; color:var(--moss-deep);}
.ssn-front .closing-search{ max-width:420px; margin:0 auto; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:0 10px 26px rgba(78,122,150,.12);}
.ssn-front .closing-search input{ width:100%; border:1px solid var(--line); border-radius:8px; padding:13px 14px; font-size:14px; font-family:inherit; background:#FCFAF4; margin-bottom:10px;}
.ssn-front .closing-search button{ width:100%; background:var(--moss); color:#fff; border:none; border-radius:8px; padding:13px; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer;}

.ssn-front .ssn-footnote{ text-align:center; padding:26px 0 10px; font-size:11px; color:var(--ink-soft); }
.ssn-front .footer-mark{ width:20px; height:20px; margin:0 auto 8px; color:var(--ink-soft);}
.ssn-front .footer-mark svg{ width:100%; height:100%; display:block;}

/* ===== external link banner (todokeomoi.com) ===== */
.ssn-front .ssn-external-link{ text-align:center; padding:10px 0 32px; }
.ssn-front .ssn-external-link .ext-label{ font-size:11px; color:var(--ink-soft); margin:0 0 10px; letter-spacing:.05em; }
.ssn-front .ssn-external-link a{ display:inline-block; max-width:100%; }
.ssn-front .ssn-external-link img{ max-width:100%; height:auto; margin:0 auto; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.08); transition:opacity .2s ease; }
.ssn-front .ssn-external-link a:hover img{ opacity:.85; }

/* ===== plain lead text ===== */
.ssn-front .plain-lead{ font-size:13.5px; color:var(--ink); line-height:1.85; margin-bottom:22px;}

/* ===== select blocks ===== */
.ssn-front .select-block{ margin-bottom:18px;}
.ssn-front .select-label{ display:block; font-size:13px; font-weight:700; color:var(--moss-deep); margin-bottom:8px;}
.ssn-front .select-row{ display:flex; gap:8px; min-width:0;}
.ssn-front .big-select{
  flex:1; min-width:0; width:100%; font-size:15px; padding:14px; border:2px solid var(--moss); border-radius:10px;
  background:var(--paper); color:var(--ink); font-family:inherit;
}
.ssn-front .select-go{
  flex-shrink:0; background:var(--amber-deep); color:#fff; border:none; border-radius:10px;
  padding:0 22px; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer;
}

.ssn-front .quick-label{ font-size:12.5px; font-weight:700; color:var(--ink-soft); margin:26px 0 12px;}
.ssn-front .quick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.ssn-front .quick-btn{
  display:flex; align-items:center; justify-content:center; gap:7px; text-align:center;
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:16px 10px; font-size:14px; font-weight:700;
}
.ssn-front .quick-btn svg{ width:15px; height:15px; color:var(--amber-deep); flex-shrink:0;}

/* ===== スマホ幅の調整 ===== */
@media (max-width:480px){
  .ssn-front .hero-photo{ height:min(calc(100vw * 1901 / 900), 1901px); }
  .ssn-front .hero-tategaki{ font-size:18px; top:20px; right:16px; }
  .ssn-front .hero-navcard{ max-width:96px; padding:10px 8px; left:12px; top:12px; }
  .ssn-front .hero-navcard .nc-icon{ width:32px; height:32px; }
  .ssn-front .hero-navcard a{ font-size:9.5px; }
  .ssn-front .hero-photocards{ margin-top:-40px; gap:10px; }
  .ssn-front .hpc{ width:38%; }
  .ssn-front .idx-bigword{ font-size:clamp(38px,15vw,60px); top:-2px; }
}

/* 縦ナビカードの折り返しを安定させる（サービス種別・エリアで探す等のラベルが不揃いに改行されるのを防止） */
.ssn-front .hero-navcard a {
	word-break: keep-all;
	overflow-wrap: normal;
	line-break: strict;
}

/* TOPページ全体を全画面表示に（左右の大きな余白を除去。他ページの幅には影響しません） */
body.front-top-page .content-in.wrap{
	width:100%;
	max-width:100%;
	margin-left:0;
	margin-right:0;
}

/* ヒーローをブラウザ全幅までブリードさせる（スマホ・PC共通） */
body.front-top-page .ssn-front .hero{
	width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}

/* オーバーレイ要素（ロゴ・キャッチコピー等）は新デザイン画像に統合済みのため、PC・スマホ問わず非表示 */
.ssn-front .hero-route,
.ssn-front .hero-logo-badge,
.ssn-front .hero-eyebrow,
.ssn-front .hero-tategaki{
	display:none;
}

/* PC版ヒーロー：新デザインバナー画像に差し替え（ロゴ・キャッチコピー・アイコン等が描き込まれた1枚絵。スマホ表示には影響しません） */
@media (min-width:481px){
	.ssn-front .hero-photo{
		background-image:url("../img/hero-pc.webp?v=2");
		background-size:contain;
		background-position:center;
		background-color:#fff;
		height:min(63vw, 900px);
	}
	.ssn-front .hero-photo::before{
		background:none;
	}
	.ssn-front .hero-photo::after{
		height:28px;
	}
	.ssn-front .hero-route,
	.ssn-front .hero-logo-badge,
	.ssn-front .hero-eyebrow,
	.ssn-front .hero-tategaki{
		display:none;
	}
	/* ヒーローをブラウザ全幅までブリードさせる（親要素の余白設定に依存しない安全な手法） */
	body.front-top-page .ssn-front .hero{
		width:100vw;
		margin-left:calc(50% - 50vw);
		margin-right:calc(50% - 50vw);
	}
}