@charset "UTF-8";
/*
 * ======================================
 * 合同会社すたーとらいん / サイト固有CSS
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .sl-label          - セクションの英字ラベル（Nunito 12px・字間.22em・#8AA3B8）
 * .sl-h2             - セクション見出し 30px（900px以下 24px）
 * .sl-fz-11〜46      - fz-* に無いフォントサイズ（元データの実数値）
 * .sl-fz-900-26      - 900px以下で 26px に縮小（理念見出し）
 * .sl-bg-fade        - 上から薄い水色→白のグラデ背景（MV）
 * .sl-page-head      - 下層ページ見出し（72px 20px 56px＋グラデ）
 * .sl-sec-sm         - 小セクション余白 72px（900px以下も固定）
 * .sl-hero / __grid  - MV の余白と 1.05fr:.95fr グリッド
 * .sl-ph / --warm    - 画像差し替え用プレースホルダー（斜めストライプ）
 * .sl-logo-img       - マーク＋社名のロゴ画像（ヘッダー色版／フッター白版）
 * .sl-insta-btn      - ヘッダーの Instagram（グラデ角丸正方形）／.sl-insta-inline 文字横のアイコン
 * .sl-icon           - カード内40px角丸スクエアのカラーチップ（--warm / --sky）
 * .sl-header / __inner - ヘッダーの白94%背景・1160px・14px 20px
 * .sl-nav-pill       - ヘッダーPCナビを「角丸ピル＋薄背景ホバー」に変更
 * .sl-shadow-nav     - ヘッダーCTAの影
 * .sl-btn            - .btn の太さ500・行間normal・青系の影に調整
 * .sl-btn-ghost / .sl-btn-cream / .sl-btn-sm / .sl-btn-fline - ボタンの色・余白バリエーション
 * .sl-textlink       - 下線付きテキストリンク
 * .sl-panel-warm / --pad - 白→クリームの斜めグラデパネル（900px以下で余白縮小）
 * .sl-grid-fit / --230〜280 - repeat(auto-fit, minmax(Npx,1fr)) グリッド
 * .sl-news-card / --bordered - お知らせカード（hoverで影のみ）
 * .sl-form / __label / .sl-input / .sl-req - お問い合わせフォーム
 * .sl-table          - table-basic の罫線なし白カード版（会社概要）
 * .sl-step / __no    - 利用の流れの STEP 行（64px | 1fr）
 * .sl-pdf-icon       - PDFアイコン枠
 * .sl-aspect-16-10 / .sl-aspect-3-4 / .sl-h-92 - 元データの比率・高さ
 * .sl-flex-1 / .sl-ai-baseline - flex の補助
 * .sl-max-w-760 / -720 / -30em / -40em / -48em - 元データの内側ブロック幅
 * .sl-loading / .sl-reveal（--left / --right）/ .sl-reveal-cards - ローディング演出・スクロールフェードイン（カードは左/下/右から時間差）
 * .sl-footer / __inner / __copy / .sl-flink / .sl-ftxt / .sl-flabel - フッター
 * .sl-mt-* / .sl-mb-* / .sl-pt-* / .sl-pb-* / .sl-px-* / .sl-gap-* - 実数余白
 * .sl-lh-* / .sl-ls-* / .sl-text-* / .sl-r-* - 実数の行間・字間・文字色・角丸
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *
 * 【値の粒度不足】
 *   - 余白 utility が 5px 刻み＋40px以上は tablet で半減 → 14 / 22 / 72px 等を出せない（.sl-mt-* 等）
 *   - letter-spacing が .2em の次が無い（.22em / .24em / .18em）→ .sl-label / .sl-ls-*
 *   - line-height に 1.25 / 1.7 / 1.9 / 1.95 / 2.1 が無い → .sl-lh-*
 *   - font-size に 11 / 15 / 17 / 19 / 21 / 26 / 30 / 38 / 46px が無い → .sl-fz-*
 *   - aspect-ratio に 16/10・3/4 が無い → .sl-aspect-*
 *   - grid-auto の minmax が 250px 固定 → .sl-grid-fit--*
 *   - .btn の font-weight 600・SP時13px 固定 → .sl-btn
 *   - グラデーション背景のクラスがない（単色 bg-* のみ）→ .sl-bg-fade / .sl-panel-warm / .sl-page-head
 * 【指定方向不足】
 *   - deco-item は四隅・中央左右のみ。任意座標・任意サイズに置けない → .sl-chara / .sl-cloud / .sl-steps
 * 【状態不足】
 *   - hover で影だけを変えるカード（移動・拡大なし）が無い → .sl-news-card
 * 【構造不足】
 *   - column2 は % 固定幅で fr 比＋gap を組めない → .sl-hero__grid
 *   - card-flow--vertical は番号列の固定幅＋gap を指定できない → .sl-step
 *   - table-basic は罫線グリッド前提。罫線なし白カード型の定義表がない → .sl-table
 *   - ローディング演出のコンポーネントがない → .sl-loading
 *   - スクロール連動フェードイン（AOS非使用時）がない → .sl-reveal
 * 【装飾パターン不足】
 *   - 画像差し替え用プレースホルダーがない → .sl-ph
 *   - 角丸スクエアのカラーチップがない → .sl-icon
 *   - ヘッダーナビのピル型ホバーがない（既定は下線アニメ）→ .sl-nav-pill
 *
 */

/* --------------------------------------------------------------------------
 * 要素ベース（元データ: h1,h2,h3 { color: var(--navy) }）
 * ----------------------------------------------------------------------- */
h1, h2, h3, h4 {
  color: #16436F;
  font-weight: 700;
}
address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
 * 【値の粒度不足】fz-* に無いサイズ（元データの実数値をそのまま再現）
 *   46px / 38px / 32px / 30px / 26px / 21px / 19px / 15px
 *   （元データの @media (max-width:900px) の縮小値も踏襲）
 * ----------------------------------------------------------------------- */
.sl-fz-11 { font-size: 1.1rem; }
.sl-fz-15 { font-size: 1.5rem; }
.sl-fz-17 { font-size: 1.7rem; }
.sl-fz-19 { font-size: 1.9rem; }
.sl-fz-21 { font-size: 2.1rem; }
.sl-fz-26 { font-size: 2.6rem; }
.sl-fz-30 { font-size: 3rem; }
.sl-fz-32 { font-size: 3.2rem; }
.sl-fz-38 { font-size: 3.8rem; }
.sl-fz-46 { font-size: 4.6rem; }
/* 元データ @media(max-width:900px)：MV h1 46→36／下層 h1 38→30／理念 h2 32→26 */
@media (max-width: 900px) {
  .sl-fz-46 { font-size: 3.6rem; }
  .sl-fz-38 { font-size: 3rem; }
  .sl-fz-900-26 { font-size: 2.6rem; }
}

/* --------------------------------------------------------------------------
 * 背景（グラデーション）
 * ----------------------------------------------------------------------- */
.sl-bg-fade {
  background: linear-gradient(180deg, #F4FAFE 0%, #FFFFFF 100%);
}
/* 暖色パネル（はじめての方へ・利用の流れのCTA・サービス案内の補足）
   元データの白→クリームの斜めグラデは白背景では左側が溶けて見えにくいため、単色のやわらかいクリームに */
.sl-panel-warm {
  background: #FFF9EF;
  border-radius: 26px;
}
/* パネル内の白いボックスに、うっすら影を付けて浮かせる */
.sl-panel-warm .bg-white { box-shadow: 0 4px 14px rgba(154, 116, 52, 0.08); }

/* --------------------------------------------------------------------------
 * 画像プレースホルダー（差し替え用）
 * ----------------------------------------------------------------------- */
.sl-ph {
  background: repeating-linear-gradient(135deg, #DCEAF6 0 8px, #EDF5FB 8px 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  min-width: 0;
  color: #6E8CA6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.2rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.sl-ph--warm {
  background: repeating-linear-gradient(135deg, #FBE9CE 0 8px, #FDF4E6 8px 16px);
  color: #A88453;
}
/* 小さい枠（ロゴマーク等）用に padding を詰める */

/* MV（元データ .hero .inner：padding 84px 20px 92px／1.05fr : .95fr・gap48
   @media(max-width:900px) 1列・64px 20px 72px・gap36）
   【構造不足】column2 は % 固定幅のため fr 比＋gap の配分を再現できない */
.sl-hero {
  padding: 84px 20px 92px;
}
.sl-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .sl-hero { padding: 64px 20px 72px; }
  .sl-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
.sl-max-w-30em { max-width: 30em; }


/* --------------------------------------------------------------------------
 * カード内アイコンチップ
 * ----------------------------------------------------------------------- */
.sl-icon {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #E3F1FB;
}
.sl-icon--warm { background: #FBE6C4; }
.sl-icon--sky  { background: #DFF0FB; }
/* アイコン入り（Font Awesome）・中央配置：80px の丸に白いアイコン（ブルー系／オレンジ系） */
.sl-icon--lg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  background: #5B9BD5;
  color: #FFFFFF;
  font-size: 3.4rem;
}
.sl-icon--lg.sl-icon--sky  { background: #5B9BD5; }
.sl-icon--lg.sl-icon--warm { background: #8FC5E8; } /* 水色（wireframe の補助色） */

/* --------------------------------------------------------------------------
 * ヘッダー
 * ----------------------------------------------------------------------- */
.sl-nav-pill .header__nav-item a {
  display: block;
  padding: 9px 13px;
  border-radius: 9px;
  transition: background 0.3s ease, color 0.3s ease;
}
.sl-nav-pill .header__nav-item a::after { display: none; }
.sl-nav-pill .header__nav-ja {
  margin-top: 0;
  font-size: 1.4rem;
  font-weight: 500;
}
.sl-nav-pill .header__nav-item a:hover,
.sl-nav-pill .header__nav-item--current a {
  background: #F1F7FC;
}
.sl-nav-pill .header__nav-item a:hover .header__nav-ja,
.sl-nav-pill .header__nav-item--current .header__nav-ja {
  color: #1E5FA8;
}
.sl-nav-pill .header__nav-item a,
.sl-nav-pill .header__nav-ja {
  line-height: normal;
  font-size: 1.4rem;
}
.sl-nav-pill .header__nav-ja { color: #2B4257; white-space: nowrap; }

/* ヘッダー外枠（元データ .site-header：白94%＋下線／.inner：1160px・14px 20px・gap20） */
.sl-header {
  background: rgba(255, 255, 255, 0.94);
  z-index: 40;
  transition: box-shadow 0.3s ease;
}
/* スクロール後（common.js で .is-scrolled）：下に軽い影 */
.sl-header.is-scrolled { box-shadow: 0 4px 16px rgba(30, 95, 168, 0.08); }
.sl-header__inner {
  max-width: 1160px;
  height: auto;
  padding: 14px 20px;
  gap: 4px; /* 元データはロゴ↔ナビ gap20・ナビ内 gap4。ロゴ側は margin-left:auto で空くため 4px に統一 */
}
@media (max-width: 1100px) {
  .sl-header__inner { height: auto; padding: 14px 20px; }
}
.sl-shadow-nav { box-shadow: 0 6px 16px rgba(30, 95, 168, 0.22); }

/* --------------------------------------------------------------------------
 * ボタン・リンク
 * 【値の粒度不足】.btn は font-weight:600・SP時13px。元データは 500・15px 固定
 * ----------------------------------------------------------------------- */
.sl-btn,
.sl-btn-ghost,
.sl-btn-cream,
.sl-btn-sm {
  font-weight: 500;
  line-height: normal;
  font-family: inherit;
}
@media (max-width: 639px) {
  .sl-btn:not([class*="fz-"]),
  .sl-btn-ghost:not([class*="fz-"]),
  .sl-btn-cream:not([class*="fz-"]) { font-size: 1.5rem; }
  .sl-btn,
  .sl-btn-ghost,
  .sl-btn-cream,
  .sl-btn-sm { max-width: none; }
}
/* 元データ .btn の影 0 8px 20px rgba(30,95,168,.24) */
.sl-btn { box-shadow: 0 8px 20px rgba(30, 95, 168, 0.24); }
.sl-btn.sl-shadow-nav { box-shadow: 0 6px 16px rgba(30, 95, 168, 0.22); }
.sl-btn:hover { background: #17497F; border-color: #17497F; }

/* 元データ .btn-ghost：15px 28px／.btn-sm：12px 24px・14px */
.sl-btn-ghost {
  padding: 15px 28px;
  background: #FFFFFF;
  border: 1.5px solid #CBDDEB;
  color: #1E5FA8;
}
.sl-btn-ghost.sl-btn-sm {
  padding: 12px 24px;
  font-size: 1.4rem;
}
/* 元データ .btn-sm は hover 指定なし */
.sl-btn-ghost.sl-btn-sm:hover { background: #FFFFFF; }
.sl-btn-ghost:hover {
  background: #F1F7FC;
  color: #1E5FA8;
  opacity: 1;
}
/* 元データ .btn-warm：14px 26px。色は渋すぎたためアクセント寄りの明るい黄土色に */
.sl-btn-cream {
  padding: 14px 26px;
  background: #FFFFFF;
  border: 1.5px solid #F5C26B;
  color: #C98522;
}
.sl-btn-cream:hover {
  background: #F5C26B;
  border-color: #F5C26B;
  color: #4A3413;
  opacity: 1;
}
.sl-textlink {
  display: inline-block;
  color: #1E5FA8;
  font-size: 1.5rem;
  font-weight: 500;
  border-bottom: 1.5px solid #CBDDEB;
  padding-bottom: 4px;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.sl-textlink:hover {
  color: #17497F;
  border-bottom-color: #1E5FA8;
  opacity: 1;
}

/* --------------------------------------------------------------------------
 * 定義表（会社概要・支援の内容）
 * table-basic / table-basic--th-side と併用
 * ----------------------------------------------------------------------- */
/* 白いカード（余白 16px 40px）の中に、罫線だけの表を置く */
.sl-table-card {
  background: #FFFFFF;
  border-radius: 22px;
  padding: 16px 40px;
}
.sl-table {
  width: 100%;
  background: transparent;
  border: none;
}
/* 元データ .row：padding 20px 28px／dt列 200px＋gap16px／区切り #EDF3F8 */
.sl-table th,
.sl-table td {
  padding: 20px 0;
  border: none;
  border-bottom: 1px solid #EDF3F8;
  vertical-align: middle; /* 内容が複数行でも項目名を上下中央に */
  font-size: 1.4rem;
  text-align: left;
}
.sl-table th {
  width: 216px; /* dt200 + gap16 */
  padding-left: 0;
  padding-right: 16px;
  background: transparent;
  color: #22415F;
  font-weight: 700;
  line-height: normal;
  white-space: normal;
}
.sl-table td {
  line-height: 1.9;
  color: #4C6579;
}
.sl-table tr:last-child th,
.sl-table tr:last-child td {
  border-bottom: none;
}
/* 元データ @media(max-width:760px)：1列・gap6px */
@media (max-width: 760px) {
  .sl-table-card { padding: 8px 22px; }
  .sl-table th,
  .sl-table td {
    display: block;
    width: 100%;
    padding: 0;
  }
  .sl-table th { padding-top: 20px; padding-bottom: 6px; border-bottom: none; }
  .sl-table td { padding-bottom: 20px; }
}

/* --------------------------------------------------------------------------
 * フォーム
 * ----------------------------------------------------------------------- */
.sl-req {
  color: #C0663F;
  font-weight: 400;
  font-size: 1.2rem;
  margin-left: 4px;
}

/* --------------------------------------------------------------------------
 * PDFアイコン枠
 * ----------------------------------------------------------------------- */
.sl-pdf-icon {
  line-height: normal;
  width: 58px;
  height: 74px;
  border-radius: 8px;
  flex-shrink: 0;
  font-size: 1rem;
  padding: 0;
}

/* --------------------------------------------------------------------------
 * 比率
 * ----------------------------------------------------------------------- */
.sl-aspect-16-10 { aspect-ratio: 16 / 10; }
.sl-aspect-3-4   { aspect-ratio: 3 / 4; }
.sl-h-92         { height: 92px; }

/* flex 内で伸びるテキスト領域（PDF枠・Instagram枠） */
.sl-flex-1 { flex: 1 1 220px; min-width: 0; }


/* 元データの内側ブロック幅（.philosophy 760px / .wrap-article 実内寸720px） */
.sl-max-w-760 { max-width: 760px; }
.sl-max-w-720 { max-width: 720px; }

/* --------------------------------------------------------------------------
 * ローディング演出（1秒以内）
 * ----------------------------------------------------------------------- */
.sl-loading {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #F7FBFE;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.sl-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
}
/* ロゴマークがふわっと上下する（元データの黄色い丸 .dot をロゴに置き換え） */
.sl-loading__logo {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 16px;
  animation: sl-float 1.6s ease-in-out infinite;
}
.sl-loading__txt {
  display: block;
  font-size: 1.3rem;
  letter-spacing: 0.26em;
  color: #1E5FA8;
}
@keyframes sl-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* --------------------------------------------------------------------------
 * スクロール連動フェードイン（下から20px）
 * ----------------------------------------------------------------------- */
.sl-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.sl-reveal--left  { transform: translateX(-24px); }
.sl-reveal--right { transform: translateX(24px); }
.sl-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .sl-reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
 * フッター
 * ----------------------------------------------------------------------- */
.sl-ftxt   { color: #C9DCEC; }
.sl-flabel { color: #9CBBD6; }
/* 元データ .site-footer：padding 64px 20px 34px／文字 #E7F0F8
   .inner：1160px・auto-fit minmax(260px,1fr)・gap40（footer-body__inner の 5%余白・3等分を上書き） */
.sl-footer {
  padding: 64px 20px 34px;
  color: #E7F0F8;
}
.sl-footer .sl-footer__inner {
  max-width: 1160px;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
}
@media (max-width: 896px) {
  .sl-footer .sl-footer__inner { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
/* スマホ：メニューは2列、Instagram／お問い合わせはインナー幅いっぱいに2等分 */
@media (max-width: 639px) {
  .sl-flinks { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .sl-fbtns { flex-wrap: nowrap; }
  .sl-fbtns .btn { flex: 1 1 0; max-width: none; justify-content: center; padding-left: 10px; padding-right: 10px; }
}
/* フッターの地図：左（会社情報）・中央（メニュー）の列の高さに合わせて伸ばす。
   縦積み（1列）になる幅では 4:3 に戻す */
.sl-fmap { flex: 1 1 auto; min-height: 200px; }
.sl-fmap iframe { height: 100%; }
@media (max-width: 896px) {
  .sl-fmap { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
}
.sl-flink { color: #E7F0F8; transition: color 0.3s ease; }
.sl-flink:hover { color: #F5C26B; opacity: 1; }
.sl-footer__copy {
  max-width: 1160px;
  margin: 44px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(39, 86, 128, 0.45);
  color: #85A7C4;
}


/* --------------------------------------------------------------------------
 * セクションラベル（元データ .sec-label：Nunito 12px・字間.22em・#8AA3B8・下12px）
 * 【値の粒度不足】ls-* は .2em の次が無く .22em を出せない／heading__en は 700 固定
 * ----------------------------------------------------------------------- */
.sl-label {
  font-family: "Nunito", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #8AA3B8;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
 * 自動列グリッド（元データ repeat(auto-fit, minmax(Npx, 1fr))）
 * 【値の粒度不足】grid-auto は minmax(250px) 固定。元データは 230〜280px を使い分ける
 * ----------------------------------------------------------------------- */
.sl-grid-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--sl-fit-min, 250px), 1fr));
}
.sl-grid-fit--230 { --sl-fit-min: 230px; }
.sl-grid-fit--240 { --sl-fit-min: 240px; }
.sl-grid-fit--250 { --sl-fit-min: 250px; }
.sl-grid-fit--260 { --sl-fit-min: 260px; }
.sl-grid-fit--270 { --sl-fit-min: 270px; }
.sl-grid-fit--280 { --sl-fit-min: 280px; }

/* セクション見出し（元データ .h2 30px／.news-head h2 30px → 900px以下 24px） */
.sl-h2 { font-size: 3rem; }
@media (max-width: 900px) {
  .sl-h2 { font-size: 2.4rem; }
}

/* 小セクション（元データ .sec-sm：72px 0。900px以下でも変化なし） */
.sl-sec-sm { padding: 72px 0; }

/* 下層ページ見出し：FV と同じ空色グラデ＋斜めストライプ、背景に大きな英字、下端は雲、右に足あと */
.sl-page-head {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #FFFFFF 0%, #D7ECFA 60%, #C3E2F6 100%);
  padding: 72px 20px 96px;
}
.sl-page-head .sl-label { color: #5B86B3; }
.sl-page-head__en {
  position: absolute;
  right: 6%;
  bottom: 34px;
  font-family: "Nunito", sans-serif;
  font-size: 13rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  z-index: 0;
}
.sl-page-head__cloud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 53px;
  background: #FFFFFF;
  -webkit-mask: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28713/cloud_edge.svg") left bottom / auto 100% repeat-x;
  mask: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28713/cloud_edge.svg") left bottom / auto 100% repeat-x;
  pointer-events: none;
  z-index: 1;
}
.sl-cloud--ph { width: 90px; top: 34px; left: 21%; right: auto; opacity: 0.9; animation: sl-fuwa 3.4s ease-in-out infinite; }
.sl-page-head .sl-steps--ph { left: auto; right: 9%; top: 26px; bottom: auto; transform: scale(0.8); transform-origin: right top; }
@media (max-width: 896px) {
  .sl-page-head__en { font-size: 9rem; right: 4%; }
  .sl-cloud--ph { left: 32%; }
}
@media (max-width: 639px) {
  .sl-page-head { padding: 56px 20px 72px; }
  .sl-page-head__en { font-size: 5.6rem; bottom: 30px; }
  .sl-page-head__cloud { height: 35px; }
  .sl-cloud--ph { width: 56px; top: 18px; left: 38%; }
  .sl-page-head .sl-steps--ph { top: 14px; right: 4%; transform: scale(0.55); }
}

/* お知らせカード（元データ .news-card：白・角丸20・透明1px枠／hoverで青系の影） */
.sl-news-card {
  display: block;
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: box-shadow 0.3s ease;
}
.sl-news-card:hover {
  box-shadow: 0 10px 28px rgba(22, 67, 111, 0.10);
  opacity: 1;
}
.sl-news-card--bordered { border-color: #E5EDF5; }

/* フォーム（元データ .form：#F8FBFD・1px枠・角丸24・40px 36px → 900px以下 28px 22px） */
.sl-form {
  background: #F8FBFD;
  border: 1px solid #E5EDF5;
  border-radius: 24px;
  padding: 40px 36px;
}
@media (max-width: 900px) {
  .sl-form { padding: 28px 22px; }
}
.sl-form__label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1.4rem;
  font-weight: 500;
  color: #2B4257;
}
/* form-input / form-select の見た目を元データの入力欄に合わせる */
.sl-input {
  padding: 13px 15px;
  border: 1px solid #D5E3EF;
  border-radius: 12px;
  font-size: 1.5rem;
  font-family: inherit;
  background-color: #FFFFFF;
  color: #223341;
  width: 100%;
  line-height: normal;
}
textarea.sl-input {
  line-height: 1.8;
  resize: vertical;
  padding: 14px 15px;
}
.sl-input:focus {
  outline: none;
  border-color: #1E5FA8;
  box-shadow: 0 0 0 3px rgba(30, 95, 168, 0.12);
}

/* パネル余白（元データ .panel-warm：48px 44px → 900px以下 34px 26px） */
.sl-panel-warm--pad { padding: 48px 44px; }
@media (max-width: 900px) {
  .sl-panel-warm--pad { padding: 34px 26px; }
}
.sl-ai-baseline { align-items: baseline; }
.sl-max-w-48em { max-width: 48em; }
.sl-max-w-40em { max-width: 40em; }

/* --------------------------------------------------------------------------
 * 【値の粒度不足】余白・行間・字間・色・角丸の実数ユーティリティ
 *   共通 utility は 5px 刻み＋40px以上は tablet で半減するため、
 *   元データの実数値（14px / 22px / 72px 等）を再現できない。
 *   元データ側で @media による変化がない値なので、ここでは半減させない。
 * ----------------------------------------------------------------------- */
.sl-mt-4 { margin-top: 4px; }
.sl-mb-4 { margin-bottom: 4px; }
.sl-mb-6 { margin-bottom: 6px; }
.sl-mb-8 { margin-bottom: 8px; }
.sl-mb-12 { margin-bottom: 12px; }
.sl-mb-14 { margin-bottom: 14px; }
.sl-mt-16 { margin-top: 16px; }
.sl-mb-16 { margin-bottom: 16px; }
.sl-mt-18 { margin-top: 18px; }
.sl-mb-18 { margin-bottom: 18px; }
.sl-mt-22 { margin-top: 22px; }
.sl-mb-22 { margin-bottom: 22px; }
.sl-mb-24 { margin-bottom: 24px; }
.sl-mt-26 { margin-top: 26px; }
.sl-mb-26 { margin-bottom: 26px; }
.sl-mt-28 { margin-top: 28px; }
.sl-mb-28 { margin-bottom: 28px; }
.sl-mt-32 { margin-top: 32px; }
.sl-mb-32 { margin-bottom: 32px; }
.sl-mb-34 { margin-bottom: 34px; }
.sl-mt-36 { margin-top: 36px; }
.sl-pt-11 { padding-top: 11px; }
.sl-pb-11 { padding-bottom: 11px; }
.sl-pt-18 { padding-top: 18px; }
.sl-pb-18 { padding-bottom: 18px; }
.sl-px-20 { padding-left: 20px; padding-right: 20px; }
.sl-pt-22 { padding-top: 22px; }
.sl-pb-22 { padding-bottom: 22px; }
.sl-px-22 { padding-left: 22px; padding-right: 22px; }
.sl-pt-26 { padding-top: 26px; }
.sl-pb-26 { padding-bottom: 26px; }
.sl-px-26 { padding-left: 26px; padding-right: 26px; }
.sl-pt-28 { padding-top: 28px; }
.sl-pb-28 { padding-bottom: 28px; }
.sl-px-28 { padding-left: 28px; padding-right: 28px; }
.sl-pt-30 { padding-top: 30px; }
.sl-pb-30 { padding-bottom: 30px; }
.sl-px-30 { padding-left: 30px; padding-right: 30px; }
.sl-pt-34 { padding-top: 34px; }
.sl-pb-34 { padding-bottom: 34px; }
.sl-px-34 { padding-left: 34px; padding-right: 34px; }
.sl-pt-36 { padding-top: 36px; }
.sl-pb-36 { padding-bottom: 36px; }
.sl-pt-48 { padding-top: 48px; }
.sl-pt-64 { padding-top: 64px; }
.sl-pt-88 { padding-top: 88px; }
.sl-pb-90 { padding-bottom: 90px; }
.sl-pb-80 { padding-bottom: 80px; }
.sl-pb-100 { padding-bottom: 100px; }
.sl-gap-2 { gap: 2px; }
.sl-gap-4 { gap: 4px; }
.sl-gap-10 { gap: 10px; }
.sl-gap-12 { gap: 12px; }
.sl-gap-14 { gap: 14px; }
.sl-gap-16 { gap: 16px; }
.sl-gap-18 { gap: 18px; }
.sl-gap-20 { gap: 20px; }
.sl-gap-22 { gap: 22px; }
.sl-gap-36 { gap: 36px; }
.sl-gap-40 { gap: 40px; }
.sl-gap-44 { gap: 44px; }
.sl-lh-125 { line-height: 1.25; }
.sl-lh-15 { line-height: 1.5; }
.sl-lh-16 { line-height: 1.6; }
.sl-lh-17 { line-height: 1.7; }
.sl-lh-18 { line-height: 1.8; }
.sl-lh-19 { line-height: 1.9; }
.sl-lh-195 { line-height: 1.95; }
.sl-lh-2 { line-height: 2; }
.sl-lh-21 { line-height: 2.1; }
.sl-ls-18 { letter-spacing: 0.18em; }
.sl-ls-24 { letter-spacing: 0.24em; }
.sl-text-ink { color: #22415F; }
.sl-text-mute { color: #4C6579; }
.sl-text-soft { color: #6E8496; }
.sl-r-9 { border-radius: 9px; }
.sl-r-14 { border-radius: 14px; }
.sl-r-16 { border-radius: 16px; }
.sl-r-18 { border-radius: 18px; }
.sl-r-20 { border-radius: 20px; }
.sl-r-22 { border-radius: 22px; }
.sl-mt-40 { margin-top: 40px; }
.sl-mb-40 { margin-bottom: 40px; }
.sl-px-32 { padding-left: 32px; padding-right: 32px; }

/* 利用の流れ STEP（元データ .step：64px | 1fr・gap22／番号 54px 丸・18px → 760px以下 1列・gap14）
   【構造不足】card-flow--vertical は flex 横並びで、番号列の固定幅＋gap を指定できない */
.sl-step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.sl-step__no {
  width: 54px;
  height: 54px;
  font-size: 1.8rem;
}
@media (max-width: 760px) {
  .sl-step { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
.sl-pt-40 { padding-top: 40px; }
.sl-pb-40 { padding-bottom: 40px; }

/* --------------------------------------------------------------------------
 * 提供素材の配置
 * ----------------------------------------------------------------------- */
/* ロゴ（マーク＋社名＋英字を1枚にした画像。ヘッダー＝色、フッター＝白） */
.sl-logo-img { width: auto; height: auto; flex-shrink: 0; }
/* ヘッダー：52px → スクロール後 42px（common.js で .is-scrolled を付与） */
.header__logo .sl-logo-img { height: 52px; transition: height 0.3s ease; }
.sl-header.is-scrolled .header__logo .sl-logo-img { height: 42px; }
/* フッター：62px */
.sl-footer .sl-logo-img { height: 62px; }
@media (max-width: 1100px) {
  .header__logo .sl-logo-img { height: 46px; }
  .sl-header.is-scrolled .header__logo .sl-logo-img { height: 38px; }
}
@media (max-width: 639px) {
  .header__logo .sl-logo-img { height: 40px; }
  .sl-header.is-scrolled .header__logo .sl-logo-img { height: 34px; }
  .sl-footer .sl-logo-img { height: 50px; }
}
/* 会社概要カードのロゴ */
.sl-logo-card { height: 72px; width: auto; }
/* ヘッダーの Instagram：アイコンのみ。Instagram 風グラデの角丸正方形（右のお問い合わせボタンと同じ高さ・角丸） */
.sl-insta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}
.sl-insta-btn:hover { opacity: 0.8; }
.sl-insta-btn i { color: #FFFFFF; font-size: 2.2rem; line-height: 1; }
/* フッターの Instagram／お問い合わせ：白背景＋#16436F → hover で背景なし・白枠・白文字 */
.sl-btn-fline {
  padding: 10px 20px;
  font-size: 1.4rem;
  font-weight: 400; /* フッターメニュー（.sl-flink）と同じ太さ */
  line-height: normal;
  font-family: inherit;
  background: #FFFFFF;
  border: 1.5px solid #FFFFFF;
  color: #16436F;
  transition: background 0.3s ease, color 0.3s ease;
}
.sl-btn-fline:hover {
  background: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
  opacity: 1;
}
/* 文字と並べるアイコン（G:\マイドライブ\svg-icon の SVG を単色に整理し、mask で文字色に合わせる） */
.sl-ico {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  background-color: currentColor;
  -webkit-mask: var(--sl-ico) center / contain no-repeat;
  mask: var(--sl-ico) center / contain no-repeat;
  flex-shrink: 0;
}
.sl-ico--mail  { --sl-ico: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28713/icon-mail.svg"); }
.sl-ico--insta { --sl-ico: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28713/icon-instagram.svg"); }
/* Instagram アプリ風グラデのボタン（TOP「Instagramを見る」・フッター） */
.sl-btn-insta,
.sl-btn-insta:hover {
  background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
  color: #FFFFFF;
  border: none;
}
.sl-btn-insta { box-shadow: 0 8px 20px rgba(214, 41, 118, 0.22); }
.sl-btn-insta:hover { opacity: 0.85; color: #FFFFFF; }
.sl-mr-6 { margin-right: 6px; }
.sl-mr-8 { margin-right: 8px; }
/* フッターのページリンク：grid の横幅いっぱいに広がらず、文字部分だけをリンクにする */
.sl-flinks { justify-items: start; }
.sl-mr-4 { margin-right: 4px; }

/* --------------------------------------------------------------------------
 * キャラクターのあしらい（お客様提供のモモンガ・インコ。ポイント使いに留める）
 * 【装飾パターン不足】deco-item--img は四隅固定。パネルの角から少しはみ出す配置ができない
 * ----------------------------------------------------------------------- */
.sl-chara {
  position: absolute;
  height: auto;
  pointer-events: none;
  z-index: 1;
}
.sl-chara--panel     { width: 96px; top: -36px; right: 36px; }
.sl-chara--contact-l { width: 92px; top: 8px; left: 40px; transform: rotate(-8deg); }
.sl-chara--contact-r { width: 92px; top: 8px; right: 40px; transform: scaleX(-1) rotate(-8deg); }
.sl-chara--cta       { width: 84px; top: -32px; right: 28px; }
.sl-chara-group      { display: block; width: 220px; height: auto; }
@media (max-width: 639px) {
  .sl-chara--panel { width: 68px; top: -28px; right: 18px; }
  .sl-chara--contact-l,
  .sl-chara--contact-r { width: 56px; top: 0; }
  .sl-chara--contact-l { left: 0; }
  .sl-chara--contact-r { right: 0; }
  .sl-chara--cta { width: 62px; top: -26px; right: 14px; }
  .sl-chara-group { width: 170px; }
}

/* --------------------------------------------------------------------------
 * フォームCMS（cms_id=7 / design_pattern=1）の見た目を元データ .form に合わせる
 * CMS 側の mail-form.css（.form-contents / .form-pattern-1）より詳細度を上げて上書きする
 * 【構造不足】CMS は dl/dt/dd を1列で出力するため、grid の列指定で元データの3列に並べ替える
 * ----------------------------------------------------------------------- */
.sl-cms-form .form-contents.form-pattern-1 {
  background: #F8FBFD;
  border: 1px solid #E5EDF5;
  border-radius: 24px;
  padding: 40px 36px;
}
.sl-cms-form .form-contents form dl {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* 行ごとに 2・3・3・1 項目で並べるため6分割 */
  grid-auto-flow: row dense;
  column-gap: 22px;
  margin: 0;
}
.sl-cms-form .form-contents form dl dt:not(.pattern-exclusion),
.sl-cms-form .form-contents form dl dd:not(.pattern-exclusion) {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  line-height: normal;
}
/* 1行目：お名前・フリガナ／2行目：メール・電話（各2項目）／3行目：市町村・年齢・性別（3項目）／4行目：障がい内容／5行目：相談内容（各全幅） */
.sl-cms-form .form-contents form dl dt:nth-of-type(1), .sl-cms-form .form-contents form dl dd:nth-of-type(1),
.sl-cms-form .form-contents form dl dt:nth-of-type(3), .sl-cms-form .form-contents form dl dd:nth-of-type(3) { grid-column: 1 / 4; }
.sl-cms-form .form-contents form dl dt:nth-of-type(2), .sl-cms-form .form-contents form dl dd:nth-of-type(2),
.sl-cms-form .form-contents form dl dt:nth-of-type(4), .sl-cms-form .form-contents form dl dd:nth-of-type(4) { grid-column: 4 / 7; }
.sl-cms-form .form-contents form dl dt:nth-of-type(5), .sl-cms-form .form-contents form dl dd:nth-of-type(5) { grid-column: 1 / 3; }
.sl-cms-form .form-contents form dl dt:nth-of-type(6), .sl-cms-form .form-contents form dl dd:nth-of-type(6) { grid-column: 3 / 5; }
.sl-cms-form .form-contents form dl dt:nth-of-type(7), .sl-cms-form .form-contents form dl dd:nth-of-type(7) { grid-column: 5 / 7; }
.sl-cms-form .form-contents form dl dt:nth-of-type(8), .sl-cms-form .form-contents form dl dd:nth-of-type(8),
.sl-cms-form .form-contents form dl dt:nth-of-type(9), .sl-cms-form .form-contents form dl dd:nth-of-type(9) { grid-column: 1 / -1; }
.sl-cms-form .form-contents form dl dt:not(.pattern-exclusion) {
  margin-bottom: 8px;
  font-size: 1.4rem;
  font-weight: 500;
  color: #2B4257;
}
.sl-cms-form .form-contents form dl dd:not(.pattern-exclusion) { margin-bottom: 22px; }
.sl-cms-form .form-contents form dl dd:last-of-type { margin-bottom: 0; }
/* 必須ラベル：CMS の赤バッジ（::before）をやめ、元データ .req の文字表記にする */
.sl-cms-form .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before,
.sl-cms-form .form-pattern-1 dl dt:not(.pattern-exclusion) span.optional::before { content: none; }
.sl-cms-form .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::after {
  content: "必須";
  margin-left: 4px;
  font-size: 1.2rem;
  font-weight: 400;
  color: #C0663F;
}
/* 入力欄（元データ .form input：13px 15px・#D5E3EF・角丸12・15px） */
.sl-cms-form .form-pattern-1 dd:not(.pattern-exclusion) .textarea,
.sl-cms-form .form-pattern-1 dd:not(.pattern-exclusion) .textarea-serect {
  width: 100%;
  height: auto;
  padding: 13px 15px;
  border: 1px solid #D5E3EF;
  border-radius: 12px;
  font-size: 1.5rem;
  font-family: inherit;
  line-height: normal;
  background-color: #FFFFFF;
  color: #223341;
}
.sl-cms-form .form-pattern-1 dd:not(.pattern-exclusion) textarea.textarea {
  height: 170px; /* 元データ rows=5 相当（CMS 出力は rows=10） */
  padding: 14px 15px;
  line-height: 1.8;
  resize: vertical;
}
.sl-cms-form .form-pattern-1 dd:not(.pattern-exclusion) .textarea:focus,
.sl-cms-form .form-pattern-1 dd:not(.pattern-exclusion) .textarea-serect:focus {
  outline: none;
  border-color: #1E5FA8;
  box-shadow: 0 0 0 3px rgba(30, 95, 168, 0.12);
}
/* 送信ボタン（元データ .btn：青・ピル・15px 30px・影） */
.sl-cms-form .form-contents.form-pattern-1 .submit-btn {
  display: block;
  width: fit-content;
  margin: 28px auto 0;
  padding: 15px 30px;
  border: none;
  border-radius: 999px;
  background: #1E5FA8;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 500;
  box-shadow: 0 8px 20px rgba(30, 95, 168, 0.24);
}
.sl-cms-form .form-contents.form-pattern-1 .submit-btn:hover { background: #17497F; }
.sl-cms-form .form-pattern-1 .submit-btn::before { margin-right: 6px; }
/* 送信完了メッセージ */
.sl-cms-form .form-pattern-1 .form-thanks-msg {
  border: none;
  border-radius: 16px;
  padding: 24px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: #405A70;
}
.sl-cms-form .form-pattern-1 .form-thanks-msg .back-home-btn a {
  border-radius: 999px;
  background: #1E5FA8;
  border-color: #1E5FA8;
}
/* 元データ .form：900px以下は余白 28px 22px */
@media (max-width: 900px) {
  .sl-cms-form .form-contents.form-pattern-1 { padding: 28px 22px; }
  /* 900px以下：2項目ずつ（最後の相談内容は全幅） */
  .sl-cms-form .form-contents form dl dt:nth-of-type(odd), .sl-cms-form .form-contents form dl dd:nth-of-type(odd) { grid-column: 1 / 4; }
  .sl-cms-form .form-contents form dl dt:nth-of-type(even), .sl-cms-form .form-contents form dl dd:nth-of-type(even) { grid-column: 4 / 7; }
  .sl-cms-form .form-contents form dl dt:nth-of-type(9), .sl-cms-form .form-contents form dl dd:nth-of-type(9) { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .sl-cms-form .form-contents form dl { grid-template-columns: minmax(0, 1fr); }
  .sl-cms-form .form-contents form dl dt,
  .sl-cms-form .form-contents form dl dd { grid-column: 1 / -1; }
  .sl-cms-form .form-contents form dl dt:nth-of-type(n),
  .sl-cms-form .form-contents form dl dd:nth-of-type(n) { grid-column: 1 / -1; }
}
/* CMS のスパム対策用の隠し入力欄（高さ0）が行を作って送信ボタンの上が空くため、ブロック化して行を消す */
.sl-cms-form .form-contents form > input[name="winnie_the_pooh"] { display: block; }

/* --------------------------------------------------------------------------
 * iOS Safari の入力時ズーム対策（全案件共通ルール：_knowledge/ros-house-code.md §8-8）
 * font-size 16px 未満の入力欄をタップすると自動で拡大されるため、タッチ端末だけ 16px にする
 * ----------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="search"], input[type="url"], input[type="password"], input[type="date"],
  select, textarea,
  .sl-cms-form .form-pattern-1 dd:not(.pattern-exclusion) .textarea,
  .sl-cms-form .form-pattern-1 dd:not(.pattern-exclusion) .textarea-serect { font-size: 16px; }
}

/* TOP のお知らせ：一覧と同じブログCMSテンプレート（タグ1）を使い、ページ送りだけ消す（背景が白なので枠線は残す） */
.sl-news-top .pages,
.sl-news-top :has(> .pages) { display: none; }

/* --------------------------------------------------------------------------
 * 雲のあしらい（イラストAC No.22558532 / No.529790 を加工）
 * wireframe「雲のシルエット：セクション上端を雲形にし、白と淡い空色の切り替えに使う。高さ40〜60px」
 * 【装飾パターン不足】wave-divider は波形のみで雲形がない
 * ----------------------------------------------------------------------- */
/* セクション上端の雲形（背景色と同じ色で、上の白いセクションへ雲がせり出す） */
.sl-cloud-top::before,
.sl-cloud-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -52px;
  height: 53px;
  background: var(--sl-sec-bg, #F4FAFE);
  -webkit-mask: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28713/cloud_edge.svg") left bottom / auto 100% repeat-x;
  mask: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28713/cloud_edge.svg") left bottom / auto 100% repeat-x;
  pointer-events: none;
}
/* 淡い空色のセクションに浮かべる白い雲 */
.sl-cloud {
  position: absolute;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.sl-cloud--service { width: 200px; top: 48px; right: 4%; opacity: 0.9; animation: sl-fuwa 3s ease-in-out infinite; }
/* 小さめの雲（ずらした周期でふわふわ。@keyframes sl-fuwa） */
.sl-cloud--service-s1 { width: 78px; top: 250px; right: 1.5%; opacity: 0.85; animation: sl-fuwa 3.4s ease-in-out 1.2s infinite; }
.sl-cloud--service-s2 { width: 96px; bottom: 110px; left: 2%; opacity: 0.8; animation: sl-fuwa 3.8s ease-in-out 0.6s infinite; }
.sl-cloud--insta-l { width: 90px; top: 70px; left: 6%; opacity: 0.9; animation: sl-fuwa 3.4s ease-in-out infinite; }
.sl-cloud--sub      { width: 96px; top: 40px; right: 4%; opacity: 0.9; animation: sl-fuwa 3.6s ease-in-out infinite; } /* 下層ページの水色セクション */
/* about の水色セクション：形の違う雲を2〜3個ずつ（周期もずらす） */
.sl-cloud--ab1 { width: 150px; top: 36px; right: 2.5%; opacity: 0.9; animation: sl-fuwa 3.4s ease-in-out infinite; }
.sl-cloud--ab2 { width: 74px; top: 46%; left: 3%; opacity: 0.85; animation: sl-fuwa 3s ease-in-out 0.7s infinite; }
.sl-cloud--ab3 { width: 110px; bottom: 50px; right: 4%; opacity: 0.85; animation: sl-fuwa 3.8s ease-in-out 1.3s infinite; }
.sl-cloud--ab4 { width: 130px; top: 40px; right: 3%; opacity: 0.9; animation: sl-fuwa 3.6s ease-in-out 0.3s infinite; }
.sl-cloud--ab5 { width: 96px; bottom: 150px; left: 2.5%; opacity: 0.85; animation: sl-fuwa 3.2s ease-in-out 1s infinite; }
.sl-cloud--kadoru-l { width: 170px; bottom: 60px; left: 2.5%; opacity: 0.9; animation: sl-fuwa 3.8s ease-in-out 0.9s infinite; } /* サービス案内 かどるあっぷ 左下 */
.sl-cloud--access-l { width: 190px; top: 56%; right: 12%; opacity: 0.9; animation: sl-fuwa 3.8s ease-in-out 1s infinite; }
.sl-cloud--access  { width: 100px; top: 60px; right: 5%; opacity: 0.9; animation: sl-fuwa 3.4s ease-in-out 0.4s infinite; }
.sl-cloud--insta-r { width: 130px; bottom: 60px; right: 7%; opacity: 0.9; animation: sl-fuwa 3.8s ease-in-out 0.8s infinite; }
/* 雲がせり出す分だけセクションの外側を空け、隣のセクションの余白を削らない */
.sl-cloud-top    { margin-top: 52px; }
.sl-cloud-bottom { margin-bottom: 52px; }
/* 下端の雲形（上端と同じ形を上下反転して、下の白いセクションへせり出す） */
.sl-cloud-bottom::after {
  top: auto;
  bottom: -52px;
  transform: scaleY(-1);
}
/* TOP「相談支援事業所かどるあっぷ」「アクセス」 */
.sl-bg-sky {
  --sl-sec-bg: #E7F4FC;
  background-color: #E7F4FC;
}
/* TOP「Instagram」：かどるあっぷより少し薄い水色 */
.sl-bg-sky2 {
  --sl-sec-bg: #E7F4FC;
  background-color: #E7F4FC;
}
@media (max-width: 639px) {
  .sl-cloud-top::before { top: -34px; height: 35px; }
  .sl-cloud-bottom::after { bottom: -34px; height: 35px; }
  .sl-cloud-top    { margin-top: 35px; }
  .sl-cloud-bottom { margin-bottom: 35px; }
  .sl-cloud--service { width: 120px; top: 20px; }
  .sl-cloud--service-s1 { width: 52px; top: 150px; right: 2%; }
  .sl-cloud--service-s2 { width: 60px; bottom: 40px; left: auto; right: 6%; }
  .sl-cloud--insta-l { width: 56px; top: 24px; left: 4%; }
  .sl-cloud--insta-r { width: 76px; bottom: 20px; right: 4%; }
  .sl-cloud--access { width: 60px; top: 24px; right: 4%; }
  .sl-cloud--sub { width: 58px; top: 16px; right: 4%; }
  .sl-cloud--kadoru-l { width: 90px; bottom: 16px; left: 3%; }
  .sl-cloud--ab1, .sl-cloud--ab4 { width: 76px; top: 14px; right: 3%; }
  .sl-cloud--ab2, .sl-cloud--ab5 { display: none; }
  .sl-cloud--ab3 { width: 60px; bottom: 16px; right: 5%; }
  .sl-cloud--access-l { width: 100px; top: auto; bottom: 24px; right: 8%; }
}

/* --------------------------------------------------------------------------
 * FV（すまいるサポート参考：上は白、下半分を空色の面にしてキャッチと写真を目立たせる）
 * ----------------------------------------------------------------------- */
.sl-fv {
  /* 上から白 → 水色のグラデ（高さいっぱい）＋白の斜めストライプ */
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #FFFFFF 0%, #D7ECFA 55%, #C3E2F6 100%);
  padding-bottom: 40px;
}
/* テキスト : 写真 = 1 : 1（キャッチを PC で1行に収める） */
.sl-hero__grid--fv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .sl-hero__grid--fv { grid-template-columns: minmax(0, 1fr); }
}
/* スライド枠（mv-kenburns を角丸 4:3 の枠で使う） */
.sl-fv-slides {
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(30, 95, 168, 0.16);
  border: 6px solid #FFFFFF;
}
/* 足あと「ポン・ポン・ポン」：スライド右下から右上へ。順に弾んで現れ、しばらく残って消える（9秒周期） */
.sl-steps {
  position: absolute;
  right: -36px;
  bottom: -44px;
  width: 170px;
  height: 120px;
  pointer-events: none;
}
.sl-steps__foot {
  position: absolute;
  width: 30px;
  height: auto;
  opacity: 0;
  animation: sl-step-pop 9s ease-out infinite;
}
.sl-steps__foot--1 { left: 0;     bottom: 0;    rotate: 38deg; animation-delay: 1.2s; }
.sl-steps__foot--2 { left: 58px;  bottom: 34px; rotate: 38deg; animation-delay: 1.7s; }
.sl-steps__foot--3 { left: 108px; bottom: 78px; rotate: 38deg; animation-delay: 2.2s; }
.sl-steps__foot--1,
.sl-steps__foot--3 { transform: scaleX(-1); }
@keyframes sl-step-pop {
  0%   { opacity: 0; scale: 0.4; }
  4%   { opacity: 1; scale: 1.2; }
  7%   { opacity: 1; scale: 1; }
  70%  { opacity: 1; scale: 1; }
  80%  { opacity: 0; scale: 1; }
  100% { opacity: 0; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-steps__foot { animation: none; opacity: 1; }
  .sl-cloud { animation: none; }
}
@media (max-width: 900px) {
  .sl-steps { right: -10px; bottom: -36px; transform: scale(0.8); transform-origin: right bottom; }
}
@media (max-width: 639px) {
  .sl-steps { right: -22px; bottom: -34px; transform: scale(0.62); }
}
/* FV下端の雲（白） */
.sl-fv__cloud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 53px;
  background: #FFFFFF;
  -webkit-mask: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28713/cloud_edge.svg") left bottom / auto 100% repeat-x;
  mask: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28713/cloud_edge.svg") left bottom / auto 100% repeat-x;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 639px) {
  .sl-fv__cloud { height: 35px; }
}

/* --------------------------------------------------------------------------
 * キャラクターの動き（社内 basis.css の deco-anime / bounce-anm を参考に、控えめに）
 * transform は配置（反転・傾き）で使っているため、個別プロパティ rotate / translate で重ねる
 * ----------------------------------------------------------------------- */
.sl-anim-tilt  { animation: sl-tilt 3s cubic-bezier(0.87, 0.01, 0, 0.99) infinite; }
.sl-anim-tilt2 { animation: sl-tilt2 3s cubic-bezier(0.87, 0.01, 0, 0.99) 0.4s infinite; }
.sl-anim-bounce { animation: sl-bounce 2.6s ease-out infinite; }
.sl-anim-bounce.sl-anim--late { animation-delay: 1.3s; }
@keyframes sl-tilt {
  0%, 25% { rotate: 0deg; }
  30%, 85% { rotate: 6deg; }
  90%, 100% { rotate: 0deg; }
}
@keyframes sl-tilt2 {
  0%, 35% { rotate: 0deg; }
  40%, 95% { rotate: -6deg; }
  100% { rotate: 0deg; }
}
/* ぴょん、ぴょん と2回はねて休む */
@keyframes sl-bounce {
  0%, 20% { translate: 0 0; }
  32% { translate: 0 -8px; }
  42% { translate: 0 0; }
  52% { translate: 0 -5px; }
  60%, 100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-anim-tilt, .sl-anim-tilt2, .sl-anim-bounce { animation: none; }
}
/* フッターロゴのリンク：hover で少し薄く */
.sl-hover-fade { transition: opacity 0.3s ease; }
.sl-hover-fade:hover { opacity: 0.75; }
/* FV「相談支援について知る」：隣の「お問い合わせフォーム」と同じ影（色の濃さだけ白ボタン向けに弱める） */
.sl-shadow-btn { box-shadow: 0 8px 20px rgba(30, 95, 168, 0.16); }

/* --------------------------------------------------------------------------
 * フッター上端の雲（紺の雲が上のセクションへせり出す）
 * せり出す分（PC 52px / SP 35px）、各ページ最後のセクションの下余白を広げる
 * ----------------------------------------------------------------------- */
.sl-footer-cloud { position: relative; }
.sl-footer-cloud::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -52px;
  height: 53px;
  background: #16436F;
  -webkit-mask: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28713/cloud_edge.svg") left bottom / auto 100% repeat-x;
  mask: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28713/cloud_edge.svg") left bottom / auto 100% repeat-x;
  pointer-events: none;
}
main > :last-child { padding-bottom: 142px; }
@media (max-width: 639px) {
  .sl-footer-cloud::before { top: -34px; height: 35px; }
  main > :last-child { padding-bottom: 100px; }
}
/* フッターの足あと：PC はメニュー列の右、スマホは会社情報（営業時間）の右
   文字と重なる幅でも読めるよう、足あとは背景（文字の後ろ）に回す */
.sl-steps--footer { left: auto; transform: none; z-index: 0; }
.sl-footer__inner > div > :not(.sl-steps) { position: relative; z-index: 1; }
.sl-steps--footer-pc { right: 16px; top: 28px; bottom: auto; }
.sl-steps--footer-sp { display: none; }
@media (max-width: 639px) {
  .sl-steps--footer-pc { display: none; }
  .sl-steps--footer-sp { display: block; right: 18px; bottom: -8px; transform: scale(0.62); transform-origin: right bottom; }
}

/* 見出し横に添えるキャラクター（TOP アクセス） */
.sl-chara-inline { width: 84px; height: auto; flex-shrink: 0; }
@media (max-width: 639px) {
  .sl-chara-inline { width: 64px; }
}
/* 「はじめてご相談される方へ」の見出し：アクセント #F5C26B に寄せた明るめの黄土色
   （#F5C26B そのままではクリーム地 #FFF9EF とのコントラストが 1.6:1 で読めないため #D9962A＝2.4:1） */
.sl-text-amber { color: #D9962A; }
/* スマホで1行に収めるため 15px に（共通の sp-fz-* に 15 がない） */
@media (max-width: 639px) {
  .sl-sp-fz-15 { font-size: 1.5rem; }
}
@media (max-width: 374px) {
  .sl-sp-fz-15 { font-size: 1.4rem; } /* 360px 幅の端末でも①が1行に収まるように */
}
/* 「はじめてご相談される方へ」の英字ラベル：見出しと同じアクセント系で、少し明るく */
.sl-label--amber { color: #D9962A; }


/* --------------------------------------------------------------------------
 * TOP「はじめてご相談される方へ」：ブルー系を使わず、アクセントカラー #F5C26B だけで組む
 *   地     #FFFAF0（ごく淡いクリーム）
 *   ラベル #F4D9A4（見出しよりはっきり淡く。ブルー系の #16436F／#8AA3B8 と同じ関係）
 *   見出し #E7AC4A（#D9962A と #F5C26B の中間）
 *   本文   #6B5433（アクセントと同系のダークブラウン。読みやすさ優先）
 *   ①〜③ #F5C26B 地＋#4A3413 文字
 * ----------------------------------------------------------------------- */
.sl-beginners { background: #FFFAF0; }
.sl-beginners .sl-label { color: #F4D9A4; } /* 他セクションの英字ラベル（見出しより大きく淡い）と同じ関係に */
.sl-beginners h2 { color: #E7AC4A; } /* #D9962A と #F5C26B の中間 */
.sl-beginners p:not(.sl-label):not(.sl-step-chip) { color: #6B5433; }
/* 通常：アクセント地＋濃い茶色の文字 → hover：白地＋見出しと同じ #E7AC4A の文字 */
.sl-beginners .sl-btn-cream {
  background: #F5C26B;
  border-color: #F5C26B;
  color: #4A3413;
  box-shadow: 0 6px 16px rgba(201, 133, 34, 0.18);
}
.sl-beginners .sl-btn-cream:hover {
  background: #FFFFFF;
  border-color: #F5C26B;
  color: #E7AC4A; /* 見出しと同じ色 */
}

/* 「はじめてご相談される方へ」の3ステップ（ol）
 * 番号は CSS カウンター（Nunito）でアクセント色の丸に。ステップの間は足あとでつなぐ */
.sl-mini-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sl-mini-step;
  display: grid;
  gap: 22px;
}
.sl-mini-steps__item {
  counter-increment: sl-mini-step;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 14px 22px 14px 84px;
  background: #FFFFFF;
  border-radius: 999px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  color: #4A3413;
  box-shadow: 0 6px 18px rgba(201, 133, 34, 0.14);
}
.sl-mini-steps__item::before {
  content: counter(sl-mini-step, decimal-leading-zero);
  position: absolute;
  left: 10px;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #F5C26B;
  color: #4A3413;
  font-family: "Nunito", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* ステップの間：番号の丸どうしを縦線でつなぐ（太さは以前の足あと画像と同じ 12px） */
.sl-mini-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 31px;
  top: calc(50% + 27px);
  width: 12px;
  height: calc(100% - 54px + 22px);
  background: #F5C26B;
}
@media (max-width: 639px) {
  .sl-mini-steps { gap: 18px; }
  .sl-mini-steps__item { min-height: 56px; padding: 12px 14px 12px 64px; font-size: 1.4rem; }
  .sl-mini-steps__item::before { left: 8px; width: 46px; height: 46px; font-size: 1.6rem; }
  .sl-mini-steps__item:not(:last-child)::after { left: 25px; top: calc(50% + 23px); height: calc(100% - 46px + 18px); }
}
@media (max-width: 374px) {
  .sl-mini-steps__item { font-size: 1.4rem; }
}

/* 雲のふわふわ：共通の fuwafuwa（8px・4〜6秒）では動きが分かりにくいため、幅14px・3〜4秒に */
@keyframes sl-fuwa {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}
/* カードの軽い影（黒ではなくメインカラーの透過） */
.sl-card-shadow { box-shadow: 0 8px 22px rgba(30, 95, 168, 0.08); }
/* TOP「関わる全ての方の未来へ」：淡いロゴを文字の後ろに敷く（背景用ロゴ.png を img/logo_bg.png として使用） */
.sl-message-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 440px;
  opacity: 0.35; /* クリーム（FCE7C0.png）を透明度35%で（作業者指定） */
  height: auto;
  translate: -50% -50%;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 639px) {
  .sl-message-bg { width: 260px; }
}

/* about「理念・社名・ロゴ」：1段目に2枚、2段目にロゴのカードを全幅（左に説明・右にロゴ） */
.sl-origin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sl-origin-grid__wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px;
  align-items: center;
}
.sl-origin-logo { height: 150px; }
.sl-origin-logo .sl-logo-card { height: 110px; transform: rotate(-12deg); } /* ヘッダーロゴのマークと同じ傾きに */
@media (max-width: 760px) {
  .sl-origin-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-origin-grid__wide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sl-origin-logo { height: 120px; }
  .sl-origin-logo .sl-logo-card { height: 84px; }
}

/* about「大切にしていること」：TOP「はじめてご相談される方へ」と同じアクセント配色 */
.sl-values .sl-label { color: #F4D9A4; } /* TOP「FOR BEGINNERS」と同じ */
.sl-values h2 { color: #E7AC4A; }

/* about「大切にしていること」のカード
 * 上端にアクセント色の丸アイコン（半分はみ出し）、中央揃え（影・番号なし） */
.sl-value-grid { margin-top: 64px; row-gap: 56px; }
.sl-value-card {
  position: relative;
  padding: 52px 24px 30px;
  background: #FFFFFF;
  border: 2px solid #F5C26B; /* アイコンの丸と同じ色 */
  border-radius: 22px;
  text-align: center;
}
.sl-value-card__icon {
  position: absolute;
  left: 50%;
  top: -34px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #F5C26B;
  border: 4px solid #FFFFFF;
  color: #FFFFFF;
  font-size: 2.6rem;
}
.sl-value-card__title {
  margin-bottom: 12px;
  font-size: 1.7rem;
  line-height: 1.6;
  color: #4A3413;
}
.sl-value-card__text {
  font-size: 1.4rem;
  line-height: 1.95;
  color: #6B5433;
  text-align: left;
}
/* 会社概要：行の区切りは td の下線1本だけにする（スマホで二重線にならないよう tr の罫線を消す） */
.sl-table tr { border: none; margin: 0; padding: 0; }

/* お知らせ一覧：3列固定（TOPと同じ並び）。1ページ12件＝3列×4段／タブレット2列×6段で割り切れる */
#ok-entry-list .sl-grid-fit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 896px) {
  #ok-entry-list .sl-grid-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #ok-entry-list .sl-grid-fit { grid-template-columns: minmax(0, 1fr); }
}

/* サービス案内「支援の内容」：about「大切にしていること」と同じアクセント配色（.sl-values）。下の補足パネルも合わせる */
.sl-values .sl-panel-warm { background: #FFFAF0; }
.sl-values .sl-panel-warm h3 { color: #E7AC4A; }
.sl-values .sl-panel-warm p { color: #6B5433; }
.sl-values .sl-value-grid + .sl-panel-warm { margin-top: 40px; }

/* サービス案内「対象となる方」：左にブルーの丸アイコン（白）を付けたリスト */
.sl-whom { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sl-whom__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px 14px 14px;
  background: #FFFFFF;
  border-radius: 999px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
  color: #22415F;
}
.sl-whom__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #5B9BD5;
  color: #FFFFFF;
  font-size: 1.8rem;
}
.sl-whom__item:nth-child(even) .sl-whom__icon { background: #8FC5E8; }

/* サービス案内「こんなご相談ができます」：吹き出し＋人物（右・左・右と交互）。しっぽは人物側 */
.sl-voice { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.sl-voice__row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sl-voice__row--rev { flex-direction: row-reverse; margin-left: 28px; }
.sl-voice__item {
  position: relative;
  flex: 1 1 auto;
  padding: 18px 26px;
  background: #FFFFFF;
  border-radius: 22px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  color: #22415F;
  text-align: center;
}
/* しっぽ（人物の方を向く三角） */
.sl-voice__item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  translate: 0 -50%;
  width: 14px;
  height: 18px;
  background: #FFFFFF;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.sl-voice__row--rev .sl-voice__item::after {
  right: auto;
  left: -12px;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.sl-voice__face {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #FFFFFF;
  font-size: 1.1rem;
  line-height: 1.4;
  padding: 0;
}
/* 補足の一言：マーカー（下半分に淡い水色）＋メインカラーの文字 */
.sl-voice__note {
  margin-top: 26px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.8;
  color: #1E5FA8;
}
.sl-marker { background: linear-gradient(transparent 58%, #BFDFF5 58%); padding: 0 4px; } /* 人物の丸と同じ色 */
@media (max-width: 639px) {
  .sl-whom__item { font-size: 1.4rem; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 22px; }
  .sl-whom__icon { width: 38px; height: 38px; font-size: 1.6rem; }
  .sl-voice__item { font-size: 1.4rem; padding: 14px 18px; }
  .sl-voice__row { gap: 14px; }
  .sl-voice__row--rev { margin-left: 0; }
  .sl-voice__face { width: 52px; height: 52px; }
  .sl-voice__note { font-size: 1.4rem; }
}
/* スマホで折り返したときに1〜2文字だけ次の行に残らないよう、行の長さをそろえる */
.sl-voice__item, .sl-whom__item, .sl-voice__note { text-wrap: balance; word-break: auto-phrase; } /* auto-phrase：文節で改行（対応ブラウザのみ） */


/* 人物イラスト：白い丸に収める */
.sl-voice__face { background: #BFDFF5; } /* セクション背景 #E7F4FC より濃い水色 */
/* 補足の一言：「何を相談していいか分からない」を一回り大きく */
.sl-voice__note-em { font-size: 1.2em; }
/* about 会社概要：白い枠の右上にインコ（枠の角から顔を出す） */
.sl-chara--table { width: 92px; top: -46px; right: 28px; }
@media (max-width: 639px) {
  .sl-chara--table { width: 64px; top: -34px; right: 14px; }
}
/* サービス案内「何を相談していいか分からない」方も：左右にモモンガ、中央に文章 */
.sl-panel-duo {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 130px;
  align-items: center;
  gap: 24px;
}
.sl-panel-duo__chara { width: 120px; height: auto; justify-self: center; }
@media (max-width: 760px) {
  .sl-panel-duo { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .sl-panel-duo__body { grid-column: 1 / -1; grid-row: 1; }
  .sl-panel-duo__chara { width: 80px; }
}
/* 右のモモンガは左右反転して、しっぽを外側に（TOP お問い合わせと同じ向き） */
.sl-panel-duo__chara--flip { transform: scaleX(-1); }
/* 重要事項説明書：枠全体をリンクに（hover で枠と「PDFを見る」の色が変わる） */
.sl-pdf-box { color: inherit; text-decoration: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.sl-pdf-box:hover { border-color: #8FC5E8; box-shadow: 0 8px 22px rgba(30, 95, 168, 0.10); opacity: 1; }
.sl-pdf-box:hover .sl-btn-sm { background: #F1F7FC; }
/* サービス案内の右上の雲：横長の形に替えた分、少し幅を広げる */
.sl-cloud--sub-w { width: 120px; }
@media (max-width: 639px) {
  .sl-cloud--sub-w { width: 70px; }
}
/* お知らせ一覧：カードとページ送りを中央寄せ */
#ok-entry-list .sl-grid-fit { max-width: 1120px; margin-left: auto; margin-right: auto; }
#ok-entry-list .pages, #ok-entry-list .mt-40 { text-align: center; }

/* お知らせ詳細：前後の記事リンク（CMS 出力 .pages > .page_next / .page_prev）
 * 新しい記事＝左、以前の記事＝右。CMS が出す記事タイトルは長さで崩れるため隠し、ラベルだけ表示 */
.sl-entry-nav .pages {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid #E5EDF5;
}
.sl-entry-nav .page_prev { margin-left: auto; }
/* 枠なしのテキストリンク＋Font Awesome の三角（丸いボタンの「お知らせ一覧に戻る」と見た目を分ける） */
.sl-entry-nav .pages a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0; /* 記事タイトル（CMS 出力）を隠す */
  line-height: 1;
  color: #1E5FA8;
  text-decoration: none;
  transition: color 0.3s ease;
}
.sl-entry-nav .pages a::before,
.sl-entry-nav .pages a::after {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
}
/* 三角：アクセント色の丸に白 */
.sl-entry-nav .page_next a::before,
.sl-entry-nav .page_prev a::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #5B9BD5;
  color: #FFFFFF;
  font-size: 1.1rem;
  transition: background 0.3s ease, translate 0.3s ease;
}
.sl-entry-nav .page_next a::before { content: "\f0d9"; }
.sl-entry-nav .page_next a::after  { content: "新しい記事"; }
.sl-entry-nav .page_prev a::before { content: "以前の記事"; }
.sl-entry-nav .page_prev a::after  { content: "\f0da"; }
.sl-entry-nav .pages a:hover { color: #17497F; opacity: 1; }
.sl-entry-nav .page_next a:hover::before { background: #1E5FA8; translate: -3px 0; }
.sl-entry-nav .page_prev a:hover::after  { background: #1E5FA8; translate: 3px 0; }

/* --------------------------------------------------------------------------
 * スマホ（639px以下）の見出しサイズ：PC 値のままだと大きすぎるため一段ずつ下げる
 *   FV 36→30 ／ ページタイトル 30→26 ／ セクション見出し 22 ／ カード見出し 17〜18 ／ 記事タイトル 22
 * ----------------------------------------------------------------------- */
@media (max-width: 639px) {
  .sl-fz-46 { font-size: 3rem; }
  .sl-fz-38 { font-size: 2.6rem; }
  .sl-fz-32,
  .sl-fz-900-26,
  .sl-fz-26,
  .fz-28.sl-lh-16,
  .sl-h2 { font-size: 2.2rem; }
  .sl-fz-30 { font-size: 2.2rem; }
  h2.fz-24,
  h2.fz-22 { font-size: 2rem; }
  .sl-fz-21,
  h3.fz-20 { font-size: 1.8rem; }
  .sl-fz-19,
  h3.fz-18 { font-size: 1.7rem; }
}

/* 利用の流れ STEP：枠を #E7F4FC に、右端に Font Awesome のアイコン（白い丸にメインカラー） */
.sl-step--flow {
  grid-template-columns: 64px minmax(0, 1fr) 76px;
  align-items: center;
  background: #E7F4FC;
}
.sl-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #5B9BD5;
  font-size: 2.8rem;
  justify-self: end;
}
@media (max-width: 760px) {
  .sl-step--flow { grid-template-columns: 54px minmax(0, 1fr); gap: 14px 16px; }
  .sl-step--flow .sl-step__icon { display: none; }
}

/* 利用の流れ：左に STEP 番号のブロック（下向きの三角で次へつなぐ）、右に白い丸のアイコン */
.sl-mt-72 { margin-top: 72px; }
.sl-flow-list { gap: 30px; }
.sl-step--flow {
  position: relative;
  grid-template-columns: 96px minmax(0, 1fr) 76px;
  gap: 26px;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  min-height: 96px;
  box-shadow: none;
}
.sl-step--flow .sl-step__no {
  position: relative;
  align-self: stretch;
  flex-direction: column;
  gap: 0;
  width: 96px;
  height: auto;
  min-height: 96px;
  border-radius: 20px 0 0 20px;
  line-height: 1;
  font-size: 2.6rem;
  box-shadow: none;
}
.sl-step--flow .sl-step__no::before {
  content: "STEP";
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
/* 下向きの三角（最後の STEP 以外） */
.sl-step--flow:not(:last-child) .sl-step__no::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  translate: -50% 0;
  width: 30px;
  height: 20px;
  background: #1E5FA8;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.sl-step--flow > div { padding: 22px 0; }
@media (max-width: 760px) {
  .sl-flow-list { gap: 26px; }
  .sl-step--flow { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding-right: 18px; min-height: 80px; }
  .sl-step--flow .sl-step__no { width: 72px; min-height: 80px; font-size: 2.2rem; border-radius: 16px 0 0 16px; }
  .sl-step--flow .sl-step__no::before { font-size: 1rem; }
  .sl-step--flow:not(:last-child) .sl-step__no::after { width: 24px; height: 16px; bottom: -16px; }
  .sl-step--flow > div { padding: 16px 0; }
  .sl-mt-72 { margin-top: 56px; }
}

/* ページ内リンクの着地：固定ヘッダーに隠れない位置で止める */
[id] { scroll-margin-top: 96px; }
/* 利用の流れ「ご相談のご予約・お問い合わせ」：スマホでは枠の内側の余白を詰める */
@media (max-width: 639px) {
  .sl-cta-panel { padding: 32px 18px; }
}
/* スマホで表示前のカード（右から出る .sl-reveal--right）が画面外にはみ出し、横スクロールが出るのを防ぐ
   hidden だと sticky 等に影響するため clip を使う */
main { overflow-x: clip; }

/* スマホメニュー：日本語を一回り小さく、英字は読める大きさに、右の矢印と文字の間を空ける。
   Instagram ボタンは一覧のすぐ下に（下端に貼り付けない） */
.sp-nav__link { font-size: 1.4rem; font-weight: 500; }
.sp-nav__link::after { margin-left: 14px; }
.sp-nav__en { font-size: 1.1rem; letter-spacing: 0.14em; }
.sp-nav__bottom { margin-top: 32px; }
.sp-nav__bottom .sl-btn-insta { padding: 13px 34px; font-size: 1.4rem; }
/* FV：代表者イラスト（カジュアル・胸から上）をスライドの左下に添える。下端は画像側でフェード */
.sl-fv-rep {
  position: absolute;
  left: -52px;
  bottom: -30px;
  width: 140px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(30, 95, 168, 0.18));
  transform-origin: 50% 100%; /* 傾きの支点は胸元（下端中央） */
}
@media (max-width: 900px) {
  .sl-fv-rep { left: -8px; width: 110px; bottom: -26px; }
}
@media (max-width: 639px) {
  .sl-fv-rep { width: 84px; bottom: -20px; }
}

/* スマホ：画面下の追従バー（共通 .sp-fixed-bar ＝ 897px以上は非表示）に Instagram／お問い合わせの2ボタン */
.sl-fixed-bar {
  gap: 8px;
  padding: 8px 12px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #E5EDF5;
  box-shadow: 0 -4px 16px rgba(30, 95, 168, 0.10);
}
.sl-fixed-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 12px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #FFFFFF;
}
.sl-fixed-bar__btn:hover { color: #FFFFFF; opacity: 0.9; }
.sl-fixed-bar__btn--contact { background: #1E5FA8; }
@media (max-width: 896px) {
  /* 追従バーの分、ページの一番下とページトップボタンを持ち上げる */
  body { padding-bottom: 66px; }
  .page-top { bottom: 80px; }
}

/* about 代表あいさつ：PC は「見出し（全幅）／画像｜文章・署名」、スマホは「見出し → 画像 → 文章・署名」 */
.sl-greet {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  grid-template-areas: "head head" "img body";
  grid-template-rows: auto 1fr;
  column-gap: 56px;
  align-items: start;
}
.sl-greet__head { grid-area: head; }
.sl-greet__img  { grid-area: img; }
/* 代表者イラスト（スーツ・全身）：オレンジベージュの正方形の中央に置く */
.sl-greet__img--suit {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  padding: 36px 0;
  background: linear-gradient(180deg, #FDF4E6 0%, #FBE9CE 100%);
  border-radius: 22px;
  overflow: hidden;
}
.sl-greet__img--suit img { width: auto; height: 100%; }
.sl-greet__body { grid-area: body; }
@media (max-width: 896px) {
  .sl-greet { grid-template-columns: 320px minmax(0, 1fr); column-gap: 36px; }
}
@media (max-width: 639px) {
  .sl-greet { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "img" "body"; }
  .sl-greet__img { width: 100%; max-width: 300px; margin: 0 auto 28px; }
}
/* スマホ：FV は画像（スライド）を上、キャッチ・ボタンを下に */
@media (max-width: 639px) {
  .sl-hero__grid--fv > :last-child { order: -1; margin-bottom: 20px; }
  .sl-hero { padding-top: 40px; }
}
/* スマホ：FV のキャッチを1行に（画面幅に合わせて縮める）／ボタン2つを横並びに */
@media (max-width: 639px) {
  .sl-fv .sl-fz-46 { font-size: min(3rem, 7.6vw); }
  .sl-fv-btns { flex-wrap: nowrap; gap: 8px; }
  .sl-fv-btns .btn {
    flex: 1 1 0;
    max-width: none;
    padding: 13px 8px;
    font-size: min(1.4rem, 3.6vw);
    white-space: nowrap;
    justify-content: center;
  }
}
/* スマホだけ文言を短くする（FV のボタン） */
@media (max-width: 639px) {
  .sl-sp-hide { display: none; }
}
/* Nunito は同じ太さでも細く見えるため、STEP 番号は太めに */
.sl-step--flow .sl-step__no { font-weight: 700; }
/* お知らせ詳細の下部ボタン：スマホでは2つを同じ幅で横並び */
@media (max-width: 639px) {
  .sl-entry-btns { flex-wrap: nowrap; gap: 8px; }
  .sl-entry-btns .btn { flex: 1 1 0; max-width: none; padding: 13px 8px; font-size: min(1.4rem, 3.6vw); white-space: nowrap; justify-content: center; }
}
/* 英字（Nunito）は細く見えるため、font-en の既定を太めに */
.font-en { font-weight: 700; }
/* お知らせ詳細のInstagramボタンは影なし */
.sl-entry-btns .sl-btn-insta { box-shadow: none; }
/* 下層共通CTA：パネルの上に虹（幅360px・下端 9px をパネルの後ろに隠す） */
.sl-cta-wrap { position: relative; padding-top: 116px; }
.sl-cta-rainbow {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 360px;
  height: auto;
  pointer-events: none;
}
@media (max-width: 639px) {
  /* 右上のインコと重ならない幅に */
  .sl-cta-wrap { padding-top: 66px; }
  .sl-cta-rainbow { width: 200px; }
}
/* FV：スライド右上の太陽（ゆっくり回転） */
.sl-fv-sun {
  position: absolute;
  top: -44px;
  right: -40px;
  width: 104px;
  height: auto;
  z-index: 2;
  pointer-events: none;
}
.sl-anim-spin { animation: sl-spin 24s linear infinite; }
@keyframes sl-spin { to { rotate: 360deg; } }
@media (max-width: 900px) {
  .sl-fv-sun { top: -30px; right: -10px; width: 80px; }
}
@media (max-width: 639px) {
  .sl-fv-sun { top: -26px; right: -6px; width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-anim-spin { animation: none; }
}
/* 利用の流れ STEP01：フォームへのリンク */
.sl-ml-6 { margin-left: 6px; }
.sl-step__link {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1E5FA8;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor; /* 文字と矢印をまとめて1本の線で */
}
.sl-step__link:hover { opacity: 0.75; }