/* =========================================================================
   イロハ — チラシ（イロハチラシ_初稿.pdf）準拠の追加スタイル
   ティール #5FC0BF / ピンク #EE868D / パープル #8E8BC2 / グリーン #8BC782
   ========================================================================= */

:root{
  --ir-teal:#5FC0BF;   --ir-teal-d:#3FA9A8;  --ir-teal-dd:#2F8E8D;
  --ir-teal-l:#EAF7F6; --ir-teal-ll:#F5FBFB;
  --ir-pink:#EE868D;   --ir-pink-d:#E4707A;
  --ir-pink-l:#FDEEF0; --ir-pink-ll:#FEF7F8;
  --ir-purple:#8E8BC2; --ir-purple-l:#F1F0F9;
  --ir-green:#8BC782;  --ir-green-l:#F1F8EF;
  --ir-yellow:#F9C158;
  --ir-ink:#103331;    --ir-body:#4c6a67;
}

/* =========================================================================
   背景をイロハのイメージへ

   銀河は "DAYLIGHT GALAXY"（星＋金色のキラキラを敷き詰めたミルキーな夜空）が
   ベースになっている。イロハはチラシに合わせて、白基調＋ティールとピンクが
   やわらかくにじむ明るい背景にする。星とキラキラのタイルは使わない。
   ========================================================================= */
body.d.g{
  background:
    /* 右上：ピンクのにじみ */
    radial-gradient(760px 560px at 94% 3%,  rgba(238,134,141,.11), transparent 66%),
    /* 左上：ティールのにじみ */
    radial-gradient(860px 640px at 3% 10%,  rgba(95,192,191,.14),  transparent 64%),
    /* 右下：ティール（淡）*/
    radial-gradient(980px 760px at 92% 68%, rgba(95,192,191,.10),  transparent 62%),
    /* 左下：ピンク（淡）*/
    radial-gradient(720px 560px at 6% 88%,  rgba(238,134,141,.07), transparent 64%),
    linear-gradient(180deg,#ffffff 0%,#f7fbfb 42%,#f2f9f9 100%) !important;
  background-size:auto,auto,auto,auto,cover !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}
/* 星のきらめきタイル・キラキラ装飾を止める */
body.d.g::after,
body.d.g::before{ display:none !important; }
.d-cta::before,
.d-spark,
.f-star{ display:none !important; }

/* FVに漂う光の玉：銀河の黄色(#FFD86B)や青が残るのでイロハの2色にそろえる。
   design-brand.css 側が body.d.g 付きで指定しているため、
   .f-bg-orb を重ねて特異度を上げる。 */
body.d.g .f-bg-orb.f-orb-1,
body.d.g .f-bg-orb.f-orb-3,
body.d.g .f-bg-orb.f-orb-5{
  background:radial-gradient(circle, rgba(95,192,191,.26) 0%, transparent 70%) !important;
}
body.d.g .f-bg-orb.f-orb-2,
body.d.g .f-bg-orb.f-orb-4,
body.d.g .f-bg-orb.f-orb-6{
  background:radial-gradient(circle, rgba(238,134,141,.20) 0%, transparent 70%) !important;
}

/* ── 注意書きバナー ───────────────────────────── */
.ir-notice{
  max-width:1000px; margin:0 auto 44px; padding:16px 24px;
  background:#fff8e6; border:1px solid #f2d79a; border-radius:12px;
  color:#8a6420; font-size:14px; font-weight:700; line-height:1.9;
}
.ir-notice span{ display:block; margin-top:4px; font-size:13px; font-weight:500; color:#9c7737; }

/* ── チラシ風パネル（色帯タブ＋枠） ──────────────── */
.ir-panel{
  background:#fff; border:2px solid var(--ir-teal); border-radius:18px;
  padding:0 0 30px; margin:0 auto; max-width:1040px; position:relative;
}
.ir-panel-head{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--ir-teal); color:#fff; font-weight:800;
  font-size:clamp(16px,2vw,21px); letter-spacing:.02em;
  padding:12px 34px 12px 26px; border-radius:16px 0 16px 0;
  margin:-2px 0 0 -2px;
}
.ir-panel-head svg{ width:24px; height:24px; flex:none; }
.ir-panel-body{ padding:24px 32px 0; }
.ir-panel--pink{ border-color:var(--ir-pink); }
.ir-panel--pink .ir-panel-head{ background:var(--ir-pink); }
.ir-panel--purple{ border-color:var(--ir-purple); }
.ir-panel--purple .ir-panel-head{ background:var(--ir-purple); }
.ir-panel--green{ border-color:var(--ir-green); }
.ir-panel--green .ir-panel-head{ background:var(--ir-green); }
@media(max-width:680px){ .ir-panel-body{ padding:20px 18px 0; } }

/* ── お悩みチェックリスト ────────────────────── */
.ir-check-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0 34px;
  max-width:900px; margin:0 auto;
}
.ir-check{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 4px; border-bottom:1.5px solid var(--ir-pink-l);
  font-size:15px; font-weight:600; color:var(--ir-ink); line-height:1.7;
}
.ir-check::before{
  content:""; flex:none; width:20px; height:20px; margin-top:2px; border-radius:4px;
  border:2px solid var(--ir-pink);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10.5 L8 15 L16.5 3.5' fill='none' stroke='%23EE868D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/16px 16px;
}
.ir-check-cta{
  margin:26px auto 0; text-align:center; font-size:clamp(16px,2vw,20px);
  font-weight:900; color:var(--ir-pink-d);
  background:linear-gradient(transparent 66%, var(--ir-pink-l) 66%);
  display:table; padding:0 .2em;
}
@media(max-width:680px){ .ir-check-grid{ grid-template-columns:1fr; gap:0; } }

/* ── 身につくこと 6枚 ──────────────────────── */
.ir-skill-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:940px; margin:0 auto; }
.ir-skill-card{
  background:var(--ir-purple-l); border-radius:16px; padding:24px 16px 20px;
  text-align:center; transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.ir-skill-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(142,139,194,.22); }
.ir-skill-card img{ width:74px; height:74px; object-fit:contain; margin:0 auto 14px; }
.ir-skill-card b{ display:block; font-size:15.5px; font-weight:800; color:#4a4879; line-height:1.6; }
.ir-skill-card p{ margin:9px 0 0; font-size:13px; color:#6e6c93; line-height:1.85; text-align:left; }
@media(max-width:860px){ .ir-skill-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .ir-skill-grid{ grid-template-columns:1fr; } }

/* ── イロハとは？ の3ステップ図 ───────────────── */
.ir-diagram{
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  max-width:1000px; margin:0 auto;
}
.ir-dia-box{
  flex:1 1 240px; min-width:210px; background:var(--ir-teal-ll);
  border-radius:18px; padding:22px 18px; text-align:center;
}
.ir-dia-box img{ width:88px; height:88px; object-fit:contain; margin:0 auto 12px; }
.ir-dia-label{ font-size:12.5px; font-weight:700; color:var(--ir-teal-dd); letter-spacing:.04em; }
.ir-dia-title{ font-size:19px; font-weight:900; color:var(--ir-ink); margin:4px 0 0; line-height:1.5; }
.ir-dia-note{ font-size:13px; color:var(--ir-body); margin:8px 0 0; line-height:1.8; }
.ir-dia-box--iroha{ background:#fff; border:2.5px solid var(--ir-pink); }
.ir-dia-box--iroha .ir-dia-title{ color:var(--ir-teal-dd); font-size:26px; letter-spacing:.1em; }
.ir-dia-list{ list-style:none; margin:14px 0 0; padding:0; text-align:left; display:inline-block; }
.ir-dia-list li{ font-size:13.5px; font-weight:700; color:var(--ir-ink); padding:4px 0 4px 25px; position:relative; }
.ir-dia-list li::before{
  content:"✓"; position:absolute; left:0; top:4px; width:17px; height:17px; border-radius:50%;
  background:var(--ir-green); color:#fff; font-size:11px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.ir-dia-arrow{ flex:0 0 auto; font-size:30px; color:var(--ir-teal); font-weight:900; line-height:1; }
/* スマホでは横並びのまま折り返してしまい、＋や→が枠の「横」に出ていた。
   縦1列にして、PCと同じく枠と枠の「あいだ」に来るようにする。 */
@media(max-width:760px){
  .ir-diagram{ flex-direction:column; align-items:center; gap:14px; }
  .ir-dia-box{ flex:none; width:100%; max-width:420px; }
  .ir-dia-arrow{ transform:rotate(90deg); margin:0 auto; }
}

/* ── ケース（ご利用イメージ）─────────────────── */
.ir-case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1000px; margin:0 auto; }
.ir-case-card{ background:#fff; border-radius:16px; box-shadow:0 2px 16px rgba(16,51,49,.07); overflow:hidden; }
.ir-case-head{ display:flex; align-items:flex-start; gap:12px; padding:20px 20px 14px; }
.ir-case-num{
  flex:none; width:46px; height:46px; border-radius:50%; background:var(--ir-pink-l);
  color:var(--ir-pink-d); display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:900; line-height:1;
}
.ir-case-num small{ font-size:8.5px; letter-spacing:.06em; opacity:.9; }
.ir-case-num b{ font-size:19px; }
.ir-case-q{ font-size:14.5px; font-weight:800; color:var(--ir-ink); line-height:1.65; margin:0; padding-top:3px; }
.ir-case-photo{ width:100%; aspect-ratio:4/3; object-fit:cover; background:#e8ebea; }
.ir-case-body{ padding:18px 20px 22px; font-size:14px; color:var(--ir-body); line-height:1.95; margin:0; }
@media(max-width:860px){ .ir-case-grid{ grid-template-columns:1fr; } }

/* ── つながる支援（トイロ→イロハ→卒業後）────────── */
.ir-connect{ display:flex; align-items:stretch; justify-content:center; gap:14px; flex-wrap:wrap; max-width:1000px; margin:0 auto; }
.ir-connect-step{ flex:1 1 250px; min-width:220px; border-radius:16px; padding:20px 20px 22px; color:#fff; }
.ir-connect-step small{ display:block; font-size:12px; font-weight:700; opacity:.92; letter-spacing:.03em; }
.ir-connect-step b{ display:block; font-size:26px; font-weight:900; letter-spacing:.08em; margin-top:3px; }
.ir-connect-step p{ margin:12px 0 0; font-size:13.5px; line-height:1.9; }
.ir-connect--toiro{ background:var(--ir-green); }
.ir-connect--iroha{ background:var(--ir-teal); }
.ir-connect--next{ background:var(--ir-purple); }
.ir-connect-step ul{ list-style:none; margin:12px 0 0; padding:0; }
.ir-connect-step ul li{ font-size:13.5px; font-weight:600; padding:3px 0 3px 15px; position:relative; }
.ir-connect-step ul li::before{ content:"・"; position:absolute; left:0; }
/* flex:none + align-self:center にしないと、stretch で縦に伸びた要素を
   90°回転させたときに横幅として張り出し、ページ全体が横スクロールする */
.ir-connect-arrow{ flex:none; align-self:center; display:flex; align-items:center;
  font-size:26px; line-height:1; color:var(--ir-teal); font-weight:900; }
@media(max-width:820px){
  .ir-connect{ flex-direction:column; align-items:center; }
  .ir-connect-step{ width:100%; max-width:440px; }
  .ir-connect-arrow{ transform:rotate(90deg); height:26px; margin:0 auto; }
}
.ir-connect-note{ text-align:center; margin:22px auto 0; font-size:15px; font-weight:700; color:var(--ir-ink); }

/* ── グループ数字 ───────────────────────── */
.ir-stats{ display:flex; justify-content:center; gap:0; flex-wrap:wrap; max-width:820px; margin:0 auto; }
.ir-stat{ flex:1 1 200px; text-align:center; padding:14px 22px; position:relative; }
.ir-stat + .ir-stat::before{ content:""; position:absolute; left:0; top:14%; bottom:14%; width:1.5px; background:var(--ir-teal-l); }
.ir-stat-label{ font-size:13px; font-weight:700; color:var(--ir-teal-dd); margin:0 0 4px; }
.ir-stat-num{ font-size:clamp(34px,5vw,48px); font-weight:900; color:var(--ir-teal); line-height:1; letter-spacing:-.01em; }
.ir-stat-num span{ font-size:.42em; font-weight:800; color:var(--ir-ink); margin-left:4px; }
.ir-stat-note{ font-size:12px; color:#8a9a96; margin:8px 0 0; }

/* ── OPENバッジ（FV） ──────────────────────────
   右上に置くとFVテキスト（リボン・見出し）に重なるため、
   左の写真コラージュ側に配置する。写真が入ったので、
   円形写真の「角の余白」に収まるよう左上ぎりぎりに寄せる。 */
.ir-open-badge{
  position:absolute; left:1.2%; top:2%; z-index:5;
  width:clamp(112px,11.5vw,146px); aspect-ratio:1; border-radius:50%;
  background:var(--ir-pink); color:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; line-height:1.35;
  box-shadow:0 12px 30px rgba(238,134,141,.42);
  animation:ir-badge-pop 3.2s ease-in-out infinite;
}
@keyframes ir-badge-pop{ 0%,88%,100%{transform:scale(1);} 93%{transform:scale(1.07);} }
.ir-open-badge .ir-ob-1{ font-size:clamp(12px,1.35vw,15px); font-weight:800; }
.ir-open-badge .ir-ob-2{ font-size:clamp(11px,1.2vw,13px); font-weight:700; margin-top:2px; }
.ir-open-badge .ir-ob-2 b{ font-size:clamp(24px,3vw,34px); font-weight:900; }
.ir-open-badge .ir-ob-3{ font-size:clamp(13px,1.5vw,17px); font-weight:900; margin-top:1px; letter-spacing:.06em; }
@media(max-width:1000px){ .ir-open-badge{ left:auto; right:4%; top:2%; } }

/* ── 電話ボックス ──────────────────────────── */
.ir-tel-box{
  background:var(--ir-pink-l); border-radius:20px; padding:30px 32px;
  max-width:760px; margin:0 auto; text-align:center;
}
.ir-tel-name{ font-size:clamp(21px,2.8vw,30px); font-weight:900; color:var(--ir-pink-d); letter-spacing:.06em; margin:0; }
.ir-tel-addr{ font-size:14px; color:var(--ir-body); margin:8px 0 16px; line-height:1.8; }
.ir-tel-num{
  display:inline-flex; align-items:center; gap:11px; font-size:clamp(27px,4.4vw,40px);
  font-weight:900; color:var(--ir-pink-d); letter-spacing:.01em; line-height:1;
}
.ir-tel-num svg{ width:.78em; height:.78em; flex:none; }
.ir-tel-hours{ font-size:13.5px; color:var(--ir-body); margin:12px 0 0; line-height:1.8; }
@media(max-width:680px){ .ir-tel-box{ padding:24px 18px; } }

/* ── 下層ページの見出し帯（ヒーロー）────────────────────
   写真が用意できないため、銀河の「写真＋暗いスクリム」をやめて
   イロハのブランドカラーの背景にする。
   文字は白なので、テキストが乗る左側を濃いティールにしてコントラストを確保する
   （白 × #1D6D6C で約5.6:1、#2F8E8D で約4.6:1）。 */
.ab-hero{
  position:relative;
  background:
    radial-gradient(260px 260px at 74% 88%, rgba(238,134,141,.22), transparent 70%),
    linear-gradient(100deg,#359593 0%,#3B9C9A 32%,#46A9A8 54%,#5FC0BF 80%,#7BD0CF 100%) !important;
  background-size:auto,cover !important;
  background-repeat:no-repeat !important;
}
/* 写真用の暗いスクリムは不要。文字が乗る左半分だけ薄くかける。
   光の玉が通ると背景が明るくなるぶん、テキスト範囲（左〜50%あたり）は
   濃さを保って白文字とのコントラストを4.5:1以上に確保している。 */
.ab-hero-overlay{
  background:linear-gradient(100deg,
    rgba(8,40,38,.32) 0%,
    rgba(8,40,38,.31) 52%,
    rgba(8,40,38,.10) 74%,
    transparent 100%) !important;
  z-index:0;
}

/* トップFVと同じように、うすい光の玉をゆっくり漂わせる */
.ir-hero-orbs{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.ir-hero-orbs span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 62%, transparent 72%);
  /* 読み込み直後のカクつきを避けるため、はじめから合成レイヤーに乗せる */
  will-change:transform;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
/* delay は「マイナス」にすること。
   プラスにすると、その秒数だけ静止位置で待ってから
   キーフレーム開始位置へワープしてカクッと動いてしまう。
   マイナスなら最初のフレームから途中の状態で動き出すので、
   ページを開いた瞬間からなめらかに漂う。 */
.ir-hero-orbs span:nth-child(1){ width:210px; height:210px; left:4%;  top:-70px;    animation-name:ir-orb-a; animation-duration:14s; animation-delay:-2.5s; }
.ir-hero-orbs span:nth-child(2){ width:120px; height:120px; left:26%; bottom:-40px; animation-name:ir-orb-b; animation-duration:17s; animation-delay:-9s; }
.ir-hero-orbs span:nth-child(3){ width:270px; height:270px; left:50%; top:-90px;    animation-name:ir-orb-a; animation-duration:20s; animation-delay:-13s; }
.ir-hero-orbs span:nth-child(4){ width:150px; height:150px; left:70%; bottom:-50px; animation-name:ir-orb-b; animation-duration:15s; animation-delay:-4s; }
.ir-hero-orbs span:nth-child(5){ width:96px;  height:96px;  left:86%; top:20%;      animation-name:ir-orb-a; animation-duration:12s; animation-delay:-7.5s; }
.ir-hero-orbs span:nth-child(6){
  width:190px; height:190px; left:38%; bottom:-70px;
  animation-name:ir-orb-b; animation-duration:18s; animation-delay:-11s;
  background:radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 62%, transparent 72%);
}
/* 4点をゆるくまわる動き。始点と終点をそろえてあるので、
   ループのつなぎ目でも飛ばずになめらかにつながる。 */
@keyframes ir-orb-a{
  0%   { transform:translate(0,0)          scale(1);    }
  25%  { transform:translate( 44px,-20px)  scale(1.06); }
  50%  { transform:translate( 62px, 16px)  scale(1.10); }
  75%  { transform:translate( 24px, 30px)  scale(1.05); }
  100% { transform:translate(0,0)          scale(1);    }
}
@keyframes ir-orb-b{
  0%   { transform:translate(0,0)          scale(1);    }
  25%  { transform:translate(-40px, 22px)  scale(1.05); }
  50%  { transform:translate(-60px,-14px)  scale(1.09); }
  75%  { transform:translate(-20px,-32px)  scale(1.04); }
  100% { transform:translate(0,0)          scale(1);    }
}
@media(prefers-reduced-motion:reduce){ .ir-hero-orbs span{ animation:none !important; } }

/* CTAのホバーで写真が浮かび上がる演出（銀河由来）は、
   出せる写真がないのでオフにしてブランドカラーのままにする */
.d-cta-inner::after{ display:none !important; }

/* ── 掲載書類（自己評価表・支援プログラム）────────────── */
/* 支援プログラムと拠点名・住所の枠のあいだが空きすぎるため半分に詰める
   （120px + 120px = 240px → 60px + 60px = 120px） */
.ir-sec-docs{ padding-bottom:60px !important; }
.ir-sec-tel{ padding-top:60px !important; }

.ir-docs{ max-width:760px; margin:0 auto; text-align:center; }
.ir-doc + .ir-doc{ margin-top:26px; }
.ir-doc-head{ font-size:clamp(17px,2.1vw,21px); font-weight:900; color:var(--ir-ink); margin:0 0 8px; }
.ir-doc-link{
  display:inline-block; font-size:clamp(14px,1.7vw,16.5px); font-weight:700;
  color:var(--ir-teal-dd); text-decoration:underline;
  text-decoration-color:var(--ir-teal); text-underline-offset:5px; text-decoration-thickness:2px;
  transition:color .15s;
}
.ir-doc-link:hover{ color:var(--ir-pink-d); text-decoration-color:var(--ir-pink); }
.ir-doc-note{
  display:inline-block; font-size:clamp(13px,1.6vw,15px); font-weight:700; color:#7c8f8b;
  background:#f2f6f5; border-radius:999px; padding:7px 20px; margin:0;
}

/* 支援プログラム一覧ページ */
.ir-doclist{ max-width:720px; margin:0 auto; }
.ir-doclist-item{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; background:#fff; border-radius:14px;
  box-shadow:0 2px 14px rgba(16,51,49,.07); margin-bottom:14px;
  font-size:16px; font-weight:800; color:var(--ir-ink);
}
.ir-doclist-item a{
  color:var(--ir-teal-dd); text-decoration:underline;
  text-decoration-color:var(--ir-teal); text-underline-offset:5px; text-decoration-thickness:2px;
}
.ir-doclist-item a:hover{ color:var(--ir-pink-d); text-decoration-color:var(--ir-pink); }
.ir-doclist-pdf{
  flex:none; font-size:12px; font-weight:800; color:#fff; background:var(--ir-teal);
  border-radius:999px; padding:5px 14px;
}
.ir-doclist-soon{
  flex:none; font-size:12px; font-weight:800; color:#7c8f8b; background:#f2f6f5;
  border-radius:999px; padding:5px 14px;
}
@media(max-width:560px){
  .ir-doclist-item{ flex-direction:column; align-items:flex-start; gap:10px; padding:18px; }
}

/* =========================================================================
   スマホ最適化
   ========================================================================= */

/* ── 日本語の改行を自然にする ──────────────────────────
   PC向けに入れた <br> がスマホでそのまま効くと、
   「…に向けた」「所です。」のように数文字だけの行が浮いてしまう。
   スマホでは装飾目的の <br> を止め、ブラウザに自然に折り返させる。 */
@media(max-width:640px){
  .section-lead br,
  .ab-hero-catch br,
  .ir-fv-sub br,
  .br-about-lead br,
  .br-heading-center br,
  .fl-step-desc br,
  .ir-tl-desc br,
  .ir-dia-note br,
  .d-cta-inner p br,
  .ct-reassure .section-title br,
  .fl-faq-a-text br{ display:none; }
}
/* 行数を均等に割り振って、最終行だけ極端に短くなるのを防ぐ。
   さらに対応ブラウザでは文節単位で折り返す（未対応でも劣化しない）。 */
.section-lead,
.ab-hero-catch,
.ir-fv-sub,
.br-about-lead,
.br-heading-center,
.ir-check-cta,
.ir-connect-note,
.d-cta-inner p,
.ir-doc-head{
  text-wrap:balance;
  word-break:auto-phrase;
  line-break:strict;
}
h1, h2, h3,
.fl-faq-q-text, .ir-case-q, .fc-card-name, .ct-sec-head,
.ir-check, .ir-doc-note, .ct-note, .ct-reassure-text,
.fl-info-title, .ir-tl-title, .br-value-card-text h3, .ir-skill-card b{
  text-wrap:balance;
  word-break:auto-phrase;
}
/* 長めの本文は balance が効かないので、最終行が1〜2文字にならないよう pretty を使う */
.fl-step-desc, .fl-faq-a-text, .ir-tl-desc, .ir-case-body, .ir-cd-step p,
.br-value-card-text p, .ir-skill-card p, .ir-connect-step p, .fl-info-body,
.e-teaser-body p, .ab-name-body p, .ct-privacy-scroll p{
  text-wrap:pretty;
  word-break:auto-phrase;
  line-break:strict;
}

/* ── FVの主役「イロハ」を目立たせる ──────────────────
   チラシと同じ強弱にする。サービス名を一段大きく・ブランド色にして、
   「就労準備型 放課後等デイサービス」も薄いグレーからティールへ。 */
body.d.g .f-hero-text h1 .mark-em{
  font-size:1.42em;
  color:var(--ir-teal-dd) !important;
  letter-spacing:.04em;
  line-height:1.1;
}
body.d.g .f-hero-text .br-fv-label-type{
  color:var(--ir-teal-dd) !important;
  font-weight:800 !important;
  opacity:1 !important;
  /* 銀河から引き継いだ letter-spacing:.08em で字間が空きすぎ、
     「就労準備型 放課後等デイサービス」の区切りが不自然に見えていた */
  letter-spacing:.01em !important;
}

/* 「就労準備型」＝イロハの一番の特長なので色を変えて目立たせる。
   ビビッドな #FF0066 だとサイトのやわらかい配色から浮くうえ、
   スマホでは12.75pxと小さく、背景とのコントラストが3.66:1で不足する。
   ブランドのピンク(#EE868D)と同系で深めの #D0324F にすると
   4.69:1 を確保でき、目立ちつつ全体になじむ。 */
body.d.g .f-hero-text .ir-fv-junbi{
  color:#D0324F;
  font-weight:900;
}
/* スマホだと小さすぎて目立たないので少しだけ大きく */
@media(max-width:640px){
  body.d.g .f-hero-text .br-fv-label-type{ font-size:14px !important; }
}

/* 「トイロ」＝すでにある実績なので、こちらも目立たせる。
   トイロのブランド色 #8BC782 は文字にすると薄すぎるため、
   読みやすい濃さ（#3F7F37／背景とのコントラスト4.6:1）にして下線マーカーを敷く。 */
body.d.g .f-hero-text .ir-fv-toiro{
  color:#3F7F37;
  font-weight:900;
  font-size:1.4em;
  background:linear-gradient(transparent 68%, rgba(139,199,130,.40) 68%);
  padding:0 .06em;
}
/* 文字を大きくしたぶん行の高さが増えるので、行間を確保して詰まりを防ぐ */
body.d.g .f-hero-text .ir-fv-sub{ line-height:1.85; }
/* 「トイロ」と助詞の「を」が離れて行頭に「を」が来るのを防ぐ */
body.d.g .f-hero-text .ir-fv-nb{ white-space:nowrap; }
body.d.g .f-hero-text h1{ white-space:normal !important; line-height:1.25; }
/* PCは2カラムでテキスト幅が狭く、「イロハを／開所します！」と割れて
   「を」が行末に取り残される。文字を少し絞って1行に収める。 */
@media(min-width:1001px){
  body.d.g .f-hero-text h1{
    font-size:clamp(30px,3.4vw,44px) !important;
    white-space:nowrap !important;
  }
  body.d.g .f-hero-text h1 .mark-em{ font-size:1.34em; }
}

/* ── FVの文字が重なる不具合の修正 ──────────────────
   銀河では .f-fv-label が先頭要素だったため
   `body.d.g .f-fv-label{margin-top:-20px !important}` が入っている。
   イロハはその上に説明文（.ir-fv-sub）を足したので18pxぶん重なっていた。
   打ち消すには元より特異度を上げる必要がある（body.d.g + .f-hero-text）。 */
body.d.g .f-hero-text .f-fv-label{ margin-top:0 !important; }

/* ── ファーストビューを1画面に収める ────────────────
   写真4枚で304px使っていて、CTAボタンが画面の外（828px）に出ていた。 */
@media(max-width:1000px){
  body.d.g .f-hero-inner{ padding-top:44px !important; padding-bottom:28px !important; }
  .ir-fv-ribbon{ margin-bottom:8px; padding:7px 20px; }
  .f-hero-text .ir-fv-sub{ margin-bottom:2px; }
  .f-hero-text h1{ margin:6px 0 !important; }
  .br-fv-points{ padding:12px 8px !important; margin-top:12px !important; margin-bottom:0 !important; }
  .e-hero-cta{ margin-top:14px !important; }
}
/* スマホは写真が先だと「トイロ」「イロハ」が画面外になるため、
   テキストを先頭に入れ替えて、開いた瞬間に左上で読めるようにする。 */
@media(max-width:1000px){
  body.d.g .f-hero-inner .f-hero-text{ order:1; }
  body.d.g .f-hero-inner .g-mv-photos{ order:2; }
  /* バッジは上に来たテキストに被るので、下へ移した写真の上に置く */
  .ir-open-badge{ top:auto !important; left:auto !important; right:5% !important; bottom:5% !important; }
}
@media(max-width:640px){
  body.d.g .f-hero-inner{ padding-top:36px !important; padding-bottom:26px !important; }
  .g-mv-photos{ gap:9px !important; }
  .g-pic-1, .g-pic-4{ width:clamp(104px,28vw,124px) !important; height:clamp(104px,28vw,124px) !important; }
  .g-pic-2, .g-pic-3{ width:clamp(90px,24vw,106px) !important;  height:clamp(90px,24vw,106px) !important; }
  .br-fv-points{ padding:10px 6px !important; }
  .ir-open-badge{ width:clamp(92px,25vw,106px); }
}

/* ── モバイルメニュー ────────────────────────────
   銀河は背景が rgba(255,255,255,.96) で、後ろのページの文字がうっすら
   透けて読みにくかったため不透明にする。 */
.mnav{ background:#ffffff !important; }

/* ── タグ ────────────────────────────────── */
.ir-tag{
  display:inline-block; background:var(--ir-teal-l); color:var(--ir-teal-dd); border-radius:999px;
  padding:5px 15px; font-size:12.5px; font-weight:800; margin:0 6px 7px 0;
}

/* ── FV：中間幅で2カラムが破綻するのを防ぐ ──────────────
   銀河は780pxまで2カラムを維持しているが、イロハは丸写真4枚（最小420px）と
   テキストが並ぶため 800〜1000px でテキスト側がはみ出す。
   ナビがハンバーガーに変わる 1000px で縦積みに切り替える。 */
/* 1fr は min-content 未満に縮まないため、念のため 0 まで許容する */
.f-hero-inner{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
@media(max-width:1000px){
  .f-hero-inner{
    grid-template-columns:minmax(0,1fr) !important; gap:36px !important;
    padding-left:24px !important; padding-right:24px !important;
  }
  /* 縦積みになるとCTAが全幅まで伸び、カタカタ動くアニメーションが
     画面外へはみ出すため幅を制限する */
  .e-hero-cta{ justify-content:center; }
  .e-hero-cta .btn{ width:100% !important; max-width:420px !important; }
}

/* ── はみ出し防止（装飾要素が画面外に出ても横スクロールさせない）── */
html, body{ overflow-x:hidden; }
.br-footer-cols{ max-width:100%; }
.br-footer-links-col{ min-width:0; }
.br-footer-nav-link{ overflow-wrap:anywhere; }

/* ── フッター：ブランド仕様 ─────────────────────────────── */
.site-footer{
  background:#e2f3f1;
  color:#3a4744;
  padding:40px 0 22px;
  border-top:1px solid #cfe8e5;
}
.site-footer .br-footer-main{
  align-items:center;
  gap:40px;
  padding:0 0 32px;
}
.site-footer .br-footer-brand{ margin-right:0; }
.site-footer .footer-logo{
  display:block;
  width:185px;
  height:65px !important;
  object-fit:contain;
  object-position:left center;
  margin:0;
}
.site-footer .br-footer-tagline{
  margin:8px 0 0;
  color:#5f6c69;
  font-size:12px;
  line-height:1.6;
}
.site-footer .br-footer-cols{
  flex:none;
  align-items:center;
}
.site-footer .br-footer-links-col{
  gap:11px;
  padding:5px 0 5px 18px;
  border-left-color:rgba(95,192,191,.55);
}
.site-footer .br-footer-nav-link{
  color:#2c3338;
  font-size:13px;
  line-height:1.5;
}
.site-footer .br-footer-nav-link:hover{ color:#2f8e8d; }
.site-footer .footer-bottom{
  margin-top:0;
  padding-top:18px;
  border-top-color:#cfe8e5;
  color:#8a9591;
  font-size:11px;
}
@media(max-width:560px){
  .site-footer{ padding:32px 0 18px; }
  .site-footer .br-footer-main{ align-items:flex-start; gap:24px; padding-bottom:26px; }
  .site-footer .br-footer-cols{ width:100%; }
  .site-footer .br-footer-links-col{
    width:100%;
    padding:14px 0 0;
    border-left:0;
    border-top:1px solid #cfe8e5;
  }
}

/* フッターのSNSボタンは削除済み。タグラインが1行に収まる幅にしておく */
.br-footer-brand{ max-width:320px; }

/* リンク列がはみ出さないように折り返しを許可する */
.br-footer-cols{ flex-wrap:wrap !important; }
@media(max-width:900px){
  .br-footer-links-col{
    flex:1 1 100% !important; white-space:normal !important;
    padding-left:0 !important; border-left:0 !important; margin-top:8px;
  }
}

/* ── ピンクをアクセントに（既存クラスの上書き）────────
   銀河はCTA・マーカーをゴールド(#FFD86B)にしていたが、
   チラシに合わせてイロハはピンク(#EE868D)を差し色にする。 */
.br-accent-word{ color:var(--ir-pink-d) !important; }
.br-cta-sub-btn{ background:var(--ir-pink) !important; color:#fff !important; }
.br-cta-sub-btn:hover{ background:var(--ir-pink-d) !important; }
.ab-page-label{ letter-spacing:.16em; }

body.d.g .f-hero-text .btn-primary,
body.d .f-hero-text .btn-primary{
  background:var(--ir-pink) !important; color:#fff !important;
  border-color:var(--ir-pink) !important;
  box-shadow:0 10px 26px rgba(238,134,141,.45) !important;
}
body.d.g .f-hero-text .btn-primary:hover,
body.d .f-hero-text .btn-primary:hover{ background:var(--ir-pink-d) !important; }
.br-sticky-cta-btn{ background:var(--ir-pink) !important; color:#fff !important; }

/* FV見出し「イロハ」のマーカーもピンク系に */
body.d.g .f-hero-text .mark-em{
  background:linear-gradient(transparent 86%, var(--ir-pink-l) 86%) !important;
}
/* 「イロハを開所します！」を途中で折り返さない */
.f-hero-text h1{ white-space:nowrap; }
@media(max-width:1180px){ .f-hero-text h1{ white-space:normal; } }

/* FVの数値ブロック：単位が単独で折り返さないように */
.br-fv-point-num{ white-space:nowrap; line-height:1.25; }
.br-fv-point{ text-align:center; }