@charset "UTF-8";

/* Lusitana は見出しサブ（Features / Service / Column / News）とお知らせの日付に使う。
   professional の renewal/css/common.css は Zen Kaku Gothic New しか読み込んで
   いないため、このページ専用CSSで追加する（common.css は編集しない方針）。 */
@import url('https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap');

/* =====================================================================
   ポピンズ professional リニューアル
   トップページ専用CSS（/professional/）
   Figma: SP 105:6128 / 263:8343 / 454:45848（レビュー完了）
          PC 318:19907
   ---------------------------------------------------------------------
   ■ 読み込み
     header.php が is_front_page() のときだけ読み込む。
     renewal/css/common.css（変数・ボタン・アイコン・ヘッダー／フッター）より
     後に読み込むこと。色は原則 common.css の CSS変数から取る。

   ■ 命名
     このページ専用クラスは `front-` 接頭辞。
     共通コンポーネント（.rnw-btn / .rnw-icon）は common.css のものを流用する。

   ■ 旧CSSとの関係（旧 /professional/css/*.css は編集禁止）
     トップでは旧 index.css / aos.css / slick.css が読み込まれたままになっている
     （停止は未承認のため据え置き）。実害の有無を確認した結果：
       ・index.css のセレクタは #key_field / #news / #service / #voice /
         #recruit / #company / .news_list / .thumb_list / .link_list /
         .banner_link で、いずれも新マークアップには存在しない。
       ・ただし1件だけ要素セレクタ `h2 { font-family:Baskerville; font-size:6.4rem;
         color:rgba(137,106,81,.6); margin:0 0 40px }`（index.css 7行目）があり、
         .front-h2 に効いてしまう。→ 下の「0. ルート・リセット」で打ち消している。
       ・aos.js / slick.min.js は対象要素（[data-aos] / .slider）が新マークアップに
         無いため無害。
     旧 common.css の `p { line-height:2.0 }` `img { max-width:100%; vertical-align:middle }`
     も全ページに効くが、本文クラス側で明示指定して上書きしている。

   ■ PC
     PCデザイン（318:19907）は「10. PC」にまとめている。マークアップはSPと共通で、
     並べ替え・寸法差はすべてメディアクエリ側で吸収する。
   ===================================================================== */


/* =====================================================================
   0. ルート・リセット
   ===================================================================== */

/* このCSSはトップでしか読み込まれないため :root に置いてよい。
   追従CTA（.front-cta）が .front の外にあるので、両方から参照できる場所に置く。 */
:root {
  /* common.css に無い色。Figmaのバリアブル名を併記する。 */
  --front-red:       #912344;  /* common/accent/red（CTA・お知らせの日付） */
  --front-gold:      #C9A96E;  /* common/accent/gold（MVの次へボタンの丸枠） */
  --front-bg-column: #EEE8DE;  /* common/bg2（コラムセクションの背景） */
  --front-line:      #E2E2E2;  /* お知らせの区切り線 */

  /* pro/gra。MV（105:6130）とサービス（105:6200）で同じ値を使っている
     （実測で確認：白 → #6EB2BC が高さの52.404%地点）。 */
  --front-gra: linear-gradient(180deg, #FFFFFF 0%, #6EB2BC 52.404%);

  /* common.css の --rnw-font-serif は Times（フッターcopyright用）で
     和文明朝ではないため、このページ用に別途定義する。 */
  --front-font-mincho: 'Yu Mincho Pr6N', 'YuMincho', 'Yu Mincho', '游明朝', 'Noto Serif JP', serif;
  --front-font-en:     'Lusitana', serif;
}

.front {
  /* 固定ヘッダー（.rnw-header）の高さぶんの上余白。
     旧CSS側の上余白は #key_field / .breadcrumbs_wrap にしか付かず、
     新マークアップはどちらも持たないためここで確保する。 */
  padding-top: var(--rnw-header-h-sp);
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
}

.front *,
.front *::before,
.front *::after { box-sizing: border-box; }

:where(.front) img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 見出し・段落のブラウザ既定マージンと旧CSSの余白を打ち消す。
   ▼詳細度は :where() で0、:is() の中身（要素）で 0-0-1 になる。
     ・旧 index.css の `h2 {}`（0-0-1）と同値だが、front.css を後に読むので勝つ。
     ・.front-tag（0-1-0）等のコンポーネント側 padding には負けるので、
       タグやカードの内側余白を巻き込まない。 */
:where(.front) :is(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure) {
  margin: 0;
  padding: 0;
}

:where(.front) :is(ul, ol) {
  list-style: none;
}

/* 追従CTA（.front-cta / position:fixed）がフッター下端に重なるのを防ぐ余白。
   このCSSはトップでしか読み込まれないため #container へ直接指定してよい。 */
#container {
  padding-bottom: 48.51px;  /* Figma 105:6375 の高さ */
}

/* 左サイドバーはPCデザイン（318:19939）にしかない。SP幅では出さない。 */
.front-side { display: none; }

/* PCだけで改行させたい箇所（見出し・研修名一覧）。SP幅では出さない。
   SPだけで改行させたい .front-br-sp（10節で display:none）と対になる。 */
.front-br-pc { display: none; }


/* =====================================================================
   1. 共通パーツ
   ===================================================================== */

/* --- 写真枠 ---
   0829版で写真が支給され、中身は <img class="front-ph …"> になった。
   ベタ塗りは読み込み中の下地として残している。
   まだ写真が無い枠（MVの3枚目）に付ければ従来どおりグレーの箱になる。 */
.front-ph {
  background-color: #D9D9D9;
  object-fit: cover;
}

/* --- 見出し（Figma コンポーネント title/h2） ---
   ▼旧 index.css の `h2 {}` を打ち消すため、font-* と margin を明示している。 */
.front-h2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  font-family: var(--rnw-font-jp);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--rnw-text);
}

.front-h2__en {
  color: var(--rnw-main);            /* pro/main #00778A */
  font-family: var(--front-font-en);
  font-size: 18px;                   /* SP/title/h2-sub */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.front-h2__jp {
  color: var(--rnw-text);            /* common/text/bk #444444 */
  font-family: var(--front-font-mincho);
  font-size: 28px;                   /* SP/title/h2 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.front-h2--center { text-align: center; }

/* --- タグ（Figma コンポーネント tag） --- */
.front-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--rnw-white);
  border: 0.745px solid var(--rnw-main);
  color: var(--rnw-main);
  font-family: var(--rnw-font-jp);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

/* 角丸8pxの角ばったタグ（Figma 105:6210 ほか） */
.front-tag--square {
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;                   /* SP/button/small */
}

/* 丸いピル型タグ（Figma 105:6291 コラムのカテゴリ）。
   内側にもう1枚コンテナ（px 11.926）があるぶんを左右パディングに足している。 */
.front-tag--pill {
  padding: 12px 19.926px;
  border-radius: 55.96px;
  font-size: 14px;
}

/* 選択中（Figma 105:6291「すべて」）は塗り。 */
.front-tag--pill-on {
  background-color: var(--rnw-main);
  border-color: var(--rnw-white);
  color: var(--rnw-white);
}

/* お知らせのカテゴリタグ（Figma 105:6348）。残り幅いっぱいに伸びる。 */
.front-tag--news {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;                   /* common/text/caption */
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;                    /* ellipsis を効かせるため flex を解除 */
  text-align: center;
}

/* --- ボタンのバリエーション ---
   common.css は .rnw-btn（形状）と .rnw-btn--main（pro/main の塗り）しか
   持たないため、トップで使う3種をここで定義する。
   形状・アイコン（.rnw-btn__icon）は common.css のものをそのまま使う。 */

/* 白地＋pro/main 2px枠（Figma 105:6141「詳細ページ」/ 105:6222「詳細はこちら」） */
.front-btn--outline {
  background-color: var(--rnw-white);
  border: 2px solid var(--rnw-main);
  color: var(--rnw-main);
}
.front-btn--outline .rnw-btn__icon { color: var(--rnw-main); }

/* common/accent/red の塗り（Figma 105:6142「ご相談・お問い合わせ」） */
.front-btn--red-fill {
  background-color: var(--front-red);
  border: 0.745px solid var(--rnw-white);
  color: var(--rnw-white);
}
.front-btn--red-fill .rnw-btn__icon { color: var(--rnw-white); }

/* 白地＋common/accent/red 2px枠（Figma 105:6372「お知らせの一覧を見る」） */
.front-btn--outline-red {
  background-color: var(--rnw-white);
  border: 2px solid var(--front-red);
  color: var(--front-red);
}
.front-btn--outline-red .rnw-btn__icon { color: var(--front-red); }


/* --- ホバー ---
   旧 /professional/css/common.css:1993 の
     body:not(.tab_view) a:hover { opacity:.6; color:#bc326c }
   がPC幅で全リンクに効くため、そのままだとボタンの文字だけ色が変わる
   （塗りボタンの白文字がピンクに化ける）。旧CSSと同じ `body:not(.tab_view)` に
   クラスを1つ足して詳細度を上げ、色だけ元に戻す。
   見せ方はフッター（common.css 7-5-5）と揃えて「色は変えず70%に透かす」。
   アイコンは .rnw-btn__icon 側に自前の color があるため影響を受けない。 */
@media only screen and (min-width: 768px) {
  body:not(.tab_view) a.rnw-btn:hover { opacity: 0.7; }

  body:not(.tab_view) a.front-btn--red-fill:hover    { color: var(--rnw-white); }
  body:not(.tab_view) a.front-btn--outline:hover     { color: var(--rnw-main); }
  body:not(.tab_view) a.front-btn--outline-red:hover { color: var(--front-red); }
}


/* =====================================================================
   2. メインビジュアル（Figma 105:6130）
   ---------------------------------------------------------------------
   横スライダー。スクロールはCSS（overflow-x + scroll-snap）に任せ、
   次へボタンと進捗は renewal/js/front.js が担当する。
   ===================================================================== */

.front-mv {
  position: relative;
  min-height: 558px;                 /* Figma 105:6130 の高さ */
  background: var(--front-gra);      /* pro/gra */
}

.front-mv__slider { position: relative; }

.front-mv__track {
  display: flex;
  gap: 16px;                         /* Figma: スライド1(0–343) と スライド2(359–) の差 */
  align-items: flex-start;
  /* カード（top261.121＋高さ279＝540.121）がスライド（524.121）より下にはみ出す。
     はみ出しぶんをパディングで確保する（overflow はパディングボックスで
     切られるので、この余白の中なら見切れない）。 */
  padding-bottom: 33.879px;          /* 558 − 524.121 */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;
}

.front-mv__track::-webkit-scrollbar { display: none; }

.front-mv__slide {
  position: relative;
  flex: 0 0 calc(100% - 32px);       /* Figma 375 に対して 343 */
  height: 524.121px;
  scroll-snap-align: start;
}

.front-mv__ph {
  position: absolute;                /* ▼ 2026-09-05 12章で上書き（枠 .front-mv__phbox 側が位置を持つ） */
  inset: 0;
  width: 100%;
  height: 100%;
}

/* タグ（Figma 105:6135）。丸みが強い専用形状のため .front-tag--square は使わない。 */
.front-mv__tag {
  position: absolute;
  top: 12.121px;
  left: 12.316px;
  z-index: 1;
  padding: 12px;
  border-radius: 58px;
  font-size: 12px;                   /* common/text/caption */
}

/* 白90%のカード（Figma 105:6136）。
   ▼Figmaはフレーム左端から −4px はみ出す幅330。負の位置は横スクロール
     コンテナ（.front-mv__track）に切られてしまうため、左端0・幅330で実装する
     （Figma比で4pxだけ右にずれる）。 */
.front-mv__card {
  position: absolute;
  top: 261.121px;                    /* ▼ 2026-09-05 12章で上書き（SPは下端基準） */
  left: 0;
  width: min(330px, 100%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.9);
}

.front-mv__body {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* header.php が front page に <h1 class="rnw-visually-hidden"> を出しているため、
   ここは <p>。見た目は SP/title/h1（26px）。 */
.front-mv__title {
  color: var(--rnw-text);
  font-family: var(--front-font-mincho);
  font-size: 26px;                   /* SP/title/h1 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;               /* Figma 105:6139 も nowrap（<br>で2行） */
}

.front-mv__lead {
  color: var(--rnw-text);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* 前へ／次へ（SP 105:6143 は「次へ」だけ／PC 318:19974・318:19979 は左右に1つずつ）。
   丸枠はCSSで描画し、シェブロンは mask で敷いて色を currentColor から供給する。
   SPは金（common/accent/gold）、PCは pro/main（10節で上書き）。 */
.front-mv__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 2px solid currentColor;    /* 2026-09-25 縁も矢印と同じ色に（PCで矢印だけ pro/main に変わり縁が残っていた） */
  border-radius: 50%;
  background-color: var(--rnw-white);
  color: #20BDAE;
  cursor: pointer;
}

/* アセットは下向きシェブロン（20×11）。common.css の .rnw-icon--arrow と同じく
   回転させて左右に向ける。 */
.front-mv__nav-icon {
  display: block;
  width: 20px;
  height: 11px;
  background-color: currentColor;
  -webkit-mask-image: url('../../img/front/icon_mv_next_chevron.svg');
          mask-image: url('../../img/front/icon_mv_next_chevron.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.front-mv__next .front-mv__nav-icon { transform: rotate(-90deg); }
.front-mv__prev .front-mv__nav-icon { transform: rotate(90deg); }

/* SPのFigma（105:6130）に「前へ」は無い */
.front-mv__prev { display: none; }

.front-mv__next {
  top: 221.221px;
  right: 3.684px;                    /* 375 − 371.316 */
}

.front-mv__nav[disabled] { opacity: 0.5; cursor: default; }

/* MVカード内のボタン。SPは縦積み（カードのgapと同じ11px）、PCは横並び。 */
.front-mv__btns {
  display: flex;
  flex-direction: column;
  gap: 11px;
}


/* =====================================================================
   3. 特徴リード（Figma 105:6147）
   ===================================================================== */

.front-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 56px 16px;
  background-color: var(--rnw-white);
}

/* ポピンズ プロフェッショナルのロゴ（Figma 105:6149 276×36.183）。
   ヘッダーと同じアセットを流用（縦横比が一致する）。 */
.front-intro__logo {
  width: 276px;
  max-width: 100%;
  height: 36.183px;
  object-fit: contain;
}

.front-intro__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.front-intro__ph {
  width: 100%;
  height: 250px;
}

.front-intro__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.front-intro__lead {
  color: var(--rnw-text);
  font-size: 20px;                   /* SP/title/h3 */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
}

.front-intro__desc {
  color: var(--rnw-text);
  font-size: 14px;                   /* SP/text/defalut/medium */
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: justify;
}


/* =====================================================================
   4. スライダー共通（特徴 105:6160 / コラム 105:6296）
   ---------------------------------------------------------------------
   JS（renewal/js/front.js）はデータ属性だけを見るため、この1組で
   特徴・コラムの両方をまかなえる。MVだけは寸法が違うので別に持っている。
   ===================================================================== */

.front-slider {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

/* --- コントロール（Figma 105:6163 幅239 / 高さ24） --- */
.front-slider__ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 239px;
  height: 24px;
  margin-inline: auto;
}

.front-slider__btn {
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.front-slider__btn img { width: 24px; height: 24px; }

/* 「前へ」は同じアセットを180度回転（Figma 105:6167 rotate180） */
.front-slider__btn--prev img { transform: rotate(180deg); }

/* 端に到達したボタンは半透明（Figma 105:6164 opacity 50%） */
.front-slider__btn[disabled] { opacity: 0.5; cursor: default; }

/* --- 進捗バー（Figma 105:6170 160×1px ＋ 105:6171 65.341×3px r10） --- */
.front-slider__bar {
  position: relative;
  width: 160px;
  height: 1px;
  background-color: var(--rnw-main);
}

.front-slider__bar-thumb {
  position: absolute;
  top: -1px;
  left: 0;
  width: 40.8%;                      /* 65.341 ÷ 160。JS側で実際の割合に更新 */
  height: 3px;
  border-radius: 10px;
  background-color: var(--rnw-main);
}

/* --- カード列（Figma 105:6178 gap16 / カード幅300） ---
   セクションの左右パディングを打ち消して全幅スクロールにし、
   内側に16pxを持たせて先頭カードの位置をFigmaと合わせる。 */
.front-slider__track {
  display: flex;
  gap: 16px;
  align-items: stretch;
  width: calc(100% + 32px);          /* セクションの padding-inline 16px ぶん */
  margin-inline: -16px;
  padding-inline: 16px;
  /* ▼ 2026-09-01 カードの影（0 4px 56px）が上下で切れるため、
       スクロール枠の内側に影のぶんの余白を持たせる。
       同じ量だけ負のマージンで戻すので、見た目の間隔は変わらない。
       overflow-x:auto は overflow-y も auto 扱いになり、はみ出した影が
       切られてしまうのが原因（padding を足す以外に逃げ道が無い）。 */
  padding-block: 24px 48px;
  margin-block: -24px -48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* scroll-snap-align:start は「アイテムの先頭＝スクロールポートの先頭」に
     揃えるため、これが無いと初期表示で padding-inline の16pxぶんスクロールが
     効いてしまい、先頭カードが画面左端に張り付く（Figmaは16px内側）。 */
  scroll-padding-inline-start: 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.front-slider__track::-webkit-scrollbar { display: none; }

/* コラム（Figma 105:6288）はセクションの左右パディングが24pxのため打ち消し量が違う。
   カード自体は特徴と同じく画面左から16pxの位置に出る（Figma 105:6311 px16）。 */
.front-slider__track--wide {
  width: calc(100% + 48px);
  margin-inline: -24px;
}


/* =====================================================================
   5. 特徴スライダー（Figma 105:6160）
   ===================================================================== */

.front-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 0 16px 80px;
  background-color: var(--rnw-white);
}

/* --- カード（Figma 105:6179 / 105:6186 / 105:6193） --- */
.front-fcard {
  display: flex;
  flex-direction: column;
  flex: 0 0 300px;
  scroll-snap-align: start;
  /* Figma effect drop-shadow: offset(0,4) / radius 56 / #00000014 */
  box-shadow: 0 4px 56px rgba(0, 0, 0, 0.08);
}

.front-fcard__ph {
  width: 100%;
  height: 200px;
}

.front-fcard__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background-color: var(--rnw-white);
}

.front-fcard__title {
  color: var(--rnw-text);
  font-size: 20px;                   /* SP/title/h3 */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
}

.front-fcard__text {
  color: var(--rnw-text);
  font-size: 14px;                   /* SP/text/defalut/medium */
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: justify;
}


/* --- 官公庁委託研修の研修名一覧（0829版で追加。SP 694:87242 / PC 694:34009） ---
   SPは1列。PCは2列に分けて、6件目までを1列目・7件目からを2列目にする
   （Figma 694:34010 が6件・694:34011 が5件で、どちらも幅214px）。 */
.front-service__list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

.front-service__list > li {
  padding-left: 1em;
  text-indent: -1em;
}

.front-service__list > li::before {
  content: '・';
}


/* =====================================================================
   6. サービス（Figma 105:6200）
   ===================================================================== */

.front-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-bottom: 80px;
  background: var(--front-gra);      /* pro/gra（MVと同一） */
}

/* --- 見出し（Figma 105:6201）：全幅写真に白カードを −40px 重ねる --- */
.front-service__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.front-service__head-ph {
  width: 100%;
  height: 200px;
  margin-bottom: -40px;              /* Figma 105:6202 mb -40 */
}

.front-service__head-card {
  position: relative;                /* 写真より前面に */
  width: 300px;
  max-width: calc(100% - 32px);
  padding: 24px 0;
  background-color: rgba(255, 255, 255, 0.9);
}

/* --- ブロック（Figma 105:6207 / 6223 / 6240 / 6257 / 6273） --- */
.front-service__blocks {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  padding: 0 16px;
}

.front-service__block {
  padding: 24px 16px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.9);
}

.front-service__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* 居宅訪問型（263:8451）以外は要素間が12px
   （263:8423 / 8436 / 8466 / 8482）。旧デザインでは先頭の 105:6208 が24px側だった。 */
.front-service__inner--tight { gap: 12px; }

.front-service__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}

.front-service__title {
  width: 100%;
  color: var(--rnw-main);
  font-size: 20px;                   /* SP/title/h3 */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
}

.front-service__media {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.front-service__ph {
  width: 100%;
  height: auto;                      /* 2026-09-27 SPの高さ固定を廃止（元画像比率で全体表示）。タブレット768–1280は既にauto、PC≥1281は372pxのまま */
}

.front-service__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.front-service__lead {
  color: var(--rnw-text);
  font-size: 18px;                   /* SP/text/large/medium */
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

.front-service__desc {
  color: var(--rnw-text);
  font-size: 14px;                   /* SP/text/defalut/thin */
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* Figma のボタン上の余白は、gap24のブロック（263:8451 居宅訪問型）が56px
   （親gap24＋pt32）、gap12のブロックが32px（ボタン枠が写真ブロックと同じ
   入れ子に入っていて親gapが掛からない）。マークアップは全ブロックで揃えたいので、
   --tight 側は gapぶん（12px）を差し引いて見た目を32pxに合わせる。 */
.front-service__btn-wrap {
  width: 100%;
  padding-top: 32px;                 /* Figma 263:8463 pt32 */
}

.front-service__inner--tight .front-service__btn-wrap { padding-top: 20px; }

/* 官公庁委託研修のボタンはPCデザイン（318:20045）にだけある。10節で表示する。 */
.front-service__btn-wrap--pc { display: none; }


/* =====================================================================
   7. コラム（Figma 105:6288）
   ---------------------------------------------------------------------
   ▼Figmaのフレーム名は "FAQ" だが中身は Column／コラム。アコーディオンではなく
     カードスライダー。
   ▼Figmaでは見出しサブの色が #327666（vipcare/accent＝ファミリーケアの
     バリアブル）になっているが、他セクション（Features / Service / News）は
     すべて pro/main のため、方針確定により pro/main に揃えている
     （.front-h2__en の既定値をそのまま使う）。
   ===================================================================== */

.front-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 80px 24px;
  background-color: var(--front-bg-column);  /* common/bg2 #EEE8DE */
}

.front-column__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* タグは絞り込みのボタン（<li><button>）。UAの既定の見た目を消して
   .front-tag / .front-tag--pill の指定だけが効くようにする。 */
.front-column__filter button {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* --- カード（Figma 105:6313 / 105:6320 / 105:6327） ---
   voice（コラム）投稿1件＝カード1枚。カード全体が記事へのリンクなので
   要素は <a>。下線と文字色の継承を明示している。 */
.front-ccard {
  display: flex;
  flex-direction: column;
  flex: 0 0 300px;
  scroll-snap-align: start;
  box-shadow: 0 4px 56px rgba(0, 0, 0, 0.08);
  color: inherit;
  text-decoration: none;
}

/* 絞り込みで外したカード。[hidden] の display:none は
   .front-ccard の display:flex に負けるため、ここで打ち消す。 */
.front-ccard[hidden] {
  display: none;
}

.front-ccard__ph {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

/* voice-thumbnail（764×490）を300×200の枠に流し込む。
   サムネイル未設定時の代替画像（PostType::noImage()）も同じ扱い。 */
.front-ccard__ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真の上に重なるカテゴリタグ（Figma 105:6315）。
   角丸は8pxだがパディングはピル型と同じ（内側にコンテナが1枚ある）。 */
.front-ccard__tag {
  position: absolute;
  top: 143.56px;
  left: 10.988px;
  padding: 12px 19.926px;
}

.front-ccard__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 16px;
  background-color: var(--rnw-white);
}

.front-ccard__text {
  color: var(--rnw-text);
  font-size: 14px;                   /* SP/text/defalut/medium */
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: justify;
}


/* =====================================================================
   8. お知らせ（Figma 105:6334）
   ===================================================================== */

.front-news {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 16px;
  background-color: var(--rnw-white);
}

.front-news__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.front-news__list {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}

.front-news__item { border-bottom: 1px solid var(--front-line); }
.front-news__item:first-child { border-top: 1px solid var(--front-line); }

.front-news__link {
  display: block;
  padding: 16px 15px;
  text-decoration: none;
}

.front-news__figure {
  display: flex;
  align-items: flex-start;
}

/* サムネイル枠（Figma 105:6342 幅108＝100＋右余白8 / 高さ70） */
.front-news__thumb {
  display: block;
  flex: 0 0 100px;
  width: 100px;
  height: 70px;
  margin-right: 8px;
  overflow: hidden;
}

.front-news__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.front-news__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.front-news__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.front-news__date {
  color: var(--front-red);           /* common/accent/red #912344 */
  font-family: var(--front-font-en);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

/* Figmaは3行で「….」と省略される長さ（幅205px / 14px / 行間1.8）。 */
.front-news__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--rnw-text);
  font-size: 14px;                   /* SP/text/defalut/bold */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
}


/* =====================================================================
   9. 追従CTA（Figma 105:6374 / 105:6375）
   ---------------------------------------------------------------------
   Figma上はトップレベルの独立グループで上向きのドロップシャドウが付く。
   familycare のトップ・service-nanny の追従CTAと同型のため position:fixed で実装する。
   ===================================================================== */

/* ドロワーを開いている間、バーの下に隠れる分だけ中身を送る。
   .rnw-menu__inner は common.css で pb-40 を持つ。 */
.rnw-menu__inner { padding-bottom: calc(40px + 48.51px); }   /* pb-40 ＋ バー高（#container と同値） */

.front-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  /* ドロワー(13)より上。開いている間もバーを出す（2026-09-16）。 */
  z-index: 14;
  display: flex;
  gap: 1.923px;
  background-color: var(--rnw-white);
  /* Figmaの drop-shadow は blur を標準偏差で持つため、box-shadow では2倍にする
     （0, -6.779, 7.344 → 14.688px）。 */
  box-shadow: 0 -6.779px 14.688px rgba(0, 0, 0, 0.08);
}

.front-cta__btn {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 16.346px 31.731px;
  box-sizing: border-box;
  font-family: var(--rnw-font-jp);
  font-size: 14px;                   /* SP/button/small */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.front-cta__btn--service {
  background-color: var(--rnw-bg2);  /* pro/bg #D9F0F4 */
  color: var(--rnw-text);
}

.front-cta__btn--contact {
  border-left: 0.962px solid var(--rnw-white);
  background-color: var(--front-red);
  color: var(--rnw-white);
}


/* =====================================================================
   10. PC（Figma 318:19907）
   ---------------------------------------------------------------------
   ■ 内容幅について
     Figmaのフレーム1440pxは「左サイドバー300px（318:19939）＋本文1140px」。
     サイドバーは本文の一部なので、.front を2カラムのflexにして
     .front-side（300固定）と .front-main（残り全部）に分けている。
     セクションの背景は .front-main の幅いっぱい、中身はその中で
     980px（＝1140 − 左右80）に収めて中央寄せする。
     ▼総合トップ（poppins-top）の .rnw-top / .rnw-top-side と同じ作り。

   ■ マークアップはSPと共通
     並べ替えはこの節のCSSだけで行う。主な組み替えは3つ。
       - 特徴カード（SPは横スライダー / 105:6160）はPCでは縦積み（318:20005）。
         操作部（.front-slider__ctrl）を隠し、トラックを縦のflexにする。
       - コラム（SPは横スライダー / 105:6296）はPCでは3枚並び（318:20114）。
       - サービスの各ブロック（318:20035 ほか）はPCで左右2カラム。
         写真は .front-service__media の中にあってDOM上は本文と同じ入れ子だが、
         PCでは media を display:contents にして写真と本文をグリッドへ直接置く。

   ■ 追従CTA
     PCデザイン（318:19907）に追従CTAが無いためPC幅では出さない。
     ヘッダー（.rnw-header__pc）に「お問い合わせ」ボタンがあるため導線は残る。
   ===================================================================== */

@media only screen and (min-width: 768px) {

  /* ---------- 0. 基本 ----------
     左サイドバー（300px）＋本文 の2カラム。 */
  .front {
    display: flex;
    align-items: stretch;
    padding-top: var(--rnw-header-h-pc);
  }

  .front-main {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 追従CTAを出さないので、その高さぶんの余白も戻す（SP側は 0. 節で 48.51px）。
     あわせて旧 /professional/css/common.css の `#container { overflow:hidden }` を
     打ち消す。overflow:hidden の要素はスクロールコンテナになるため、そのままだと
     サイドバーの position:sticky が効かない。このCSSはトップでしか読み込まれない
     ので他ページには影響しない。本文側で横にはみ出す要素は無い
     （スライダーは自前で overflow-x を持つ）。 */
  #container {
    padding-bottom: 0;
    overflow: visible;
  }

  .front-cta { display: none; }
  /* バーが出ないのでドロワーの追い足しも戻す */
  .rnw-menu__inner { padding-bottom: 40px; }


  /* ---------- 左サイドバー（Figma 318:19939 "Content"） ----------
     幅300・背景 common/bg #FAF7F2。ヘッダーの下からフッターの手前まで伸び、
     中身だけがスクロールに追従する。 */
  /* ▼幅は固定pxではなく比率で持つ（2026-09-01、12章で値を入れ替え）。
       Figmaは1440px時に300px＝20.834%。固定pxのままだと画面が狭くなるほど
       サイドバーの取り分だけが増えて（1126pxで26.6%）本文が痩せるため、
       左右の比率を保ったまま縮むようにしている。
       max-width で 1440px 以上では Figma どおり300pxで止める。
       中身の文字は12章（1126～1439px）で一段小さくする。
       ▲総合トップ（poppins-top）の .rnw-top-side と同じ作り。 */
  .front-side {
    display: block;  /* ▼ 2026-08-30 12章で上書き（ハンバーガー幅768～1125は非表示） */
    flex: 0 0 20.834%;          /* Figma実測 300 ÷ 1440 */
    max-width: 300px;           /* Figma実測 */
    background-color: #FAF7F2;  /* Figma common/bg。common.css に変数が無いため直値 */
  }

  .front-side a { text-decoration: none; }

  .front-side__inner {
    position: sticky;
    top: var(--rnw-header-h-pc);
    display: flex;
    flex-direction: column;
    gap: 20px;           /* Figma実測（グループ間） */
    padding: 40px 24px;  /* Figma実測 */
    /* 見出し・項目の文字をこの幅（cqi）に合わせて縮めるため。総合トップと同じ（2026-09-24） */
    container-type: inline-size;
  }

  /* 見出し・罫線・項目はすべて8px間隔で1列に積む（Figma 1694:12321 ほか） */
  .front-side__group,
  .front-side__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Figma 1694:12323 / PC/text/large/bold */
  .front-side__title {
    display: block;
    /* サイドバーは画面幅の20.834%で縮むので、最長の「法人・自治体のお客様」
       （10文字＋字間）が1行に収まるよう幅に合わせて縮める。上限はFigmaの20px。
       総合トップ（.rnw-top-side__title）と同じ（2026-09-24） */
    font-size: min(20px, calc(100cqi / 10.5 - 1.2px));
    white-space: nowrap;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 1.2px;
    color: #333333;   /* Figma Fill/Default */
  }

  /* Figma 1694:12324（stroke-dasharray "2 2" / 黒1px）。
     配下の項目を持つグループにだけ出す。 */
  .front-side__line {
    --rnw-dash-c: #000000;
    display: block;
    width: 100%;
    height: 1px;
  }

  /* Figma 1694:12326 / PC/text/dafalut/bold */
  .front-side__label {
    display: block;
    /* Figmaは16px。総合トップに合わせて90%（14.4px）を上限にし、最長の
       「法人向け教育ベビーシッター」（13文字＋字間）が1行に収まるよう
       幅に合わせて縮める（2026-09-24） */
    font-size: min(14.4px, calc(100cqi / 13.5 - 1.2px));
    white-space: nowrap;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 1.2px;
    color: #333333;
  }

  /* 遷移先未確定の項目（<span> 出力） */
  .front-side__label--pending { cursor: default; }

  /* SPだけで改行させたい箇所（MV見出しなど） */
  .front-br-sp { display: none; }

  /* PCだけで改行させたい箇所（サービス見出し・研修名一覧） */
  .front-br-pc { display: inline; }

  /* ---------- 見出し（Figma title/h2） ----------
     PCは en 24 / jp 42。特徴節（318:19999）だけ en 25 / jp 40。 */
  .front-h2__en { font-size: 24px; }
  .front-h2__jp { font-size: 42px; }

  /* ---------- タグ ---------- */
  .front-tag--square { font-size: 18px; }   /* Figma 318:20037 ほか */
  .front-tag--pill   { font-size: 18px; }   /* Figma 318:20110 ほか */


  /* =====================================================================
     10-1. メインビジュアル（Figma 318:19968）
     ---------------------------------------------------------------------
     ▼Figmaでは前後のスライドが 600×400 で上下中央寄りに覗くが、
       スクロールスナップでは非アクティブなスライドだけ寸法を変えられないため、
       全スライド同寸（700×400＋カード）で流している。SPと同じ割り切り。
     ===================================================================== */

  .front-mv {
    min-height: 750px;                 /* Figma 318:19968 の高さ */
    /* pro/gra。PCは白ではなく #EEF3F3 から始まる（Figma実測） */
    background: linear-gradient(180deg, #EEF3F3 0%, #6EB2BC 52.404%);
  }

  .front-mv__track {
    gap: 60px;                         /* Figma: 中央スライド(220–920) と隣(–160 / 979.8–) の差 */
    /* 上66px（Figma 318:19969 の y）／下はセクション高750からの残り */
    padding: 66px calc((100% - 700px) / 2) 104px;
  }

  .front-mv__slide {
    flex: 0 0 700px;                   /* Figma 318:19970 */
    height: 580px;                     /* 写真400 ＋ カードのはみ出し180 */
    scroll-snap-align: center;
  }

  .front-mv__ph {
    bottom: auto;
    height: 400px;                     /* Figma 318:19971 */
  }

  .front-mv__tag {
    top: 20px;                         /* Figma 318:19973 */
    left: 20px;
    border-radius: 58px;
  }

  /* 白90%のカード（Figma 318:19984）。写真に48px重なる（親のgap -48） */
  .front-mv__card {
    top: 352px;                        /* 400 − 48 */
    width: 700px;
    gap: 20px;                         /* Figma実測 */
    padding: 16px;
  }

  .front-mv__body { gap: 8px; }        /* Figma 318:19985 */

  .front-mv__title {
    font-size: 42px;                   /* Figma 318:19987 PC/title/h1 */
    white-space: normal;               /* PCは1行に収まるので nowrap を外す */
  }

  .front-mv__lead { font-size: 16px; } /* Figma 318:19988 */

  /* ボタンは横並び（Figma 318:19989 H gap20）。2つで幅を等分する。 */
  .front-mv__btns {
    flex-direction: row;
    gap: 20px;
  }
  .front-mv__btns > * { flex: 1 1 0; min-width: 0; }

  /* 前へ／次へ（Figma 318:19974 / 318:19979）。
     丸は80pxで、写真の左右の端を中心に置く（＝半分はみ出す）。
     上下位置はFigma実測で写真上端から298px（＝丸の上端258px）。 */
  .front-mv__nav {
    top: 324px;                        /* 66（写真上端） + 258 */
    width: 80px;
    height: 80px;
    border-width: 3.333px;             /* Figma実測 */
    color: var(--rnw-main);            /* pro/main。SPの金から差し替え */
  }

  .front-mv__prev {
    display: flex;
    left: calc(50% - 390px);           /* 写真左端（50% − 350）から半分ぶん外へ */
    right: auto;
  }

  .front-mv__next {
    left: auto;
    right: calc(50% - 390px);
  }

  .front-mv__nav-icon {
    width: 25px;                       /* Figma実測 25×15.3。アセットの比率(20:11)は保つ */
    height: 13.75px;
  }


  /* =====================================================================
     10-2. 特徴（Figma 318:19994）
     ---------------------------------------------------------------------
     ロゴの下に pro/bg のパネル（318:19997 幅980）が1枚あり、
     その中に「見出し → 本文2カラム → カード3枚」が入る。
     マークアップ上パネルは .front-intro と .front-features にまたがるため、
     上半分を .front-intro__body、下半分を .front-features 内の .front-slider に
     持たせて隙間なくつないでいる。
     ===================================================================== */

  .front-intro {
    gap: 56px;                         /* Figma: ロゴ(〜132.4) → パネル(188.4) */
    padding: 80px 80px 0;
  }

  .front-intro__logo {
    width: 400px;                      /* Figma 318:19996 */
    height: 52.44px;
  }

  /* パネル上半分。900（=434+32+434）の2カラムを内側に持つ */
  .front-intro__body {
    display: grid;  /* ▼ 2026-08-30 12章で上書き（≤1280は縦積み） */
    /* Figmaは434px×2。サービス節と同じ理由で等分のfrにしてある
       （パネル980px時の内寸900 − gap32 ＝ 434×2 でFigmaと同値） */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;                  /* Figma 318:20000 */
    row-gap: 56px;                     /* Figma 318:19998 */
    width: 980px;
    max-width: 100%;
    margin-inline: auto;
    padding: 40px 40px 0;              /* Figma 318:19997 の pad40（下はカード側で持つ） */
    background-color: var(--rnw-bg2);  /* pro/bg #D9F0F4 */
    box-sizing: border-box;
  }

  .front-intro__body > .front-h2 { grid-column: 1 / -1; }

  .front-intro__body > .front-h2 .front-h2__en { font-size: 25px; }  /* Figma 318:19999 */
  .front-intro__body > .front-h2 .front-h2__jp { font-size: 40px; }

  .front-intro__ph {
    grid-column: 2;
    grid-row: 2;
    width: 100%;                       /* 列幅（パネル980px時に Figma 318:20004 の434px） */
    height: 400px;                     /* Figma 318:20004 ▼ 2026-08-30 12章で上書き（768～1024は高さauto） */
  }

  .front-intro__text {
    grid-column: 1;
    grid-row: 2;
    gap: 24px;                         /* Figma 318:20001 */
  }

  .front-intro__lead {
    font-size: 24px;                   /* Figma 318:20002 PC/title/h3 */
    text-align: left;
  }

  .front-intro__desc {
    font-size: 16px;                   /* Figma 318:20003 */
    font-weight: 700;                  /* Figma実測（SPは500） */
  }

  /* --- パネル下半分（カード3枚 / Figma 318:20005） --- */
  .front-features {
    gap: 0;
    padding: 0 80px 80px;
  }

  .front-features .front-slider {
    width: 980px;
    max-width: 100%;
    margin-inline: auto;
    /* 上下の背景の境目に端数ピクセルによる白い線が出ないよう1px重ねる。 */
    margin-top: -1px;
    padding: 57px 40px 40px;           /* 重ねた1pxを補い、本文との間隔は56pxを保つ */
    background-color: var(--rnw-bg2);
    box-sizing: border-box;
    gap: 0;
  }

  /* PCはスライダーではないので操作部を出さない（JSは空振りするだけ） */
  .front-features .front-slider__ctrl { display: none; }

  .front-features .front-slider__track {
    flex-direction: column;
    gap: 16px;                         /* Figma 318:20005 */
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    margin-block: 0;
    padding-block: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* カード（Figma 318:20006）：写真400×250 ＋ 本文500。PCに影は無い */
  .front-features .front-fcard {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: stretch;
    box-shadow: none;
  }

  /* 幅は縮みを許す（本文1140px時に Figma 318:20007 の400px） */
  .front-features .front-fcard__ph {
    flex: 0 1 400px;
    width: auto;
    height: 250px;                     /* Figma 318:20007 ▼ 2026-08-30 12章で上書き（本文高に合わせて auto で伸びる） */
  }

  .front-features .front-fcard__body {
    gap: 12px;                         /* Figma 318:20008 */
    padding: 24px;
  }

  .front-features .front-fcard__title {
    font-size: 24px;                   /* Figma 318:20009 ▼ 2026-08-30 12章で上書き（幅連動で縮小） */
    text-align: left;
  }

  .front-features .front-fcard__text { font-size: 16px; }  /* Figma 318:20012 ▼ 2026-08-30 12章で上書き（幅連動で縮小） */

  /* 研修名の一覧はPCで2列（Figma 694:34010 が6件・694:34011 が5件、幅214px）。
     6件目のあとで列を折り返す。 */
  .front-service__list {
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    column-gap: 16px;
    justify-content: start;
    font-size: 16px;
  }


  /* =====================================================================
     10-3. サービス（Figma 318:20027）
     ---------------------------------------------------------------------
     背景はSPのグラデーションではなく pro/bg のベタ塗り（Figma実測）。
     ===================================================================== */

  .front-service {
    gap: 56px;                         /* Figma: 見出し帯(〜400) → ブロック(456) */
    padding: 0 0 120px;                /* Figma 318:20034 pb-120 */
    background: var(--rnw-bg2);
  }

  /* --- 見出し帯（Figma 318:20029）：全幅写真の中央に白80%のカード --- */
  .front-service__head {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1140px;  /* ▼ 2026-08-30 12章で上書き（全幅にするため none に上書き） */
    height: 400px;
    margin-inline: auto;
  }

  .front-service__head-ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin-bottom: 0;                  /* SPの −40px 重ねを解除 */
  }

  .front-service__head-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 640px;                      /* Figma 318:20032 */
    max-width: calc(100% - 64px);
    padding: 32px;
    background-color: rgba(255, 255, 255, 0.8);  /* Figma実測（SPは90%） */
    box-sizing: border-box;
  }

  /* --- ブロック（Figma 318:20035 / 20048 / 20061 / 20076 / 20091） --- */
  .front-service__blocks {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    gap: 24px;                         /* Figma 318:20034 */
    padding: 0 80px;
    box-sizing: border-box;
  }

  .front-service__block { padding: 40px 56px 56px; }  /* Figma実測 */

  /* 左334（見出し・本文・ボタン）／右510（写真）。
     写真は .front-service__media の中にあるので media を display:contents にして
     写真と本文をこのグリッドへ直接置く。行は 1タグ / 2見出し / 3本文 / 4ボタン。 */
  .front-service__inner,
  .front-service__inner--tight {
    display: grid;
    /* 左（見出し・本文・ボタン）と右（写真）を同じ幅で半分ずつ。
       カード868px（1140−px80×2−px56×2）から column-gap 24px を引いた
       844px を2等分して 422px ずつになる。
       ▼固定pxで持たないこと。旧 #container の下限（1126px）まで縮んでも
         半分ずつのまま追従させるため fr で持つ。 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  /* ▼ 2026-08-30 12章で上書き（≤1280は縦積み） */
    column-gap: 24px;                  /* Figma 318:20038 */
    row-gap: 24px;                     /* Figma 318:20039 */
    align-items: start;
    width: 100%;
  }

  .front-service__tags {
    grid-column: 1 / -1;
    justify-content: center;
    gap: 24px;                         /* Figma 318:20063（タグ2つのブロック） */
  }

  /* 見出しは pro/bg の帯になる（Figma 318:20040） */
  .front-service__title {
    grid-column: 1;
    grid-row: 2;
    padding: 24px 0;
    border-radius: 8px;
    background-color: var(--rnw-bg2);
    font-size: 24px;
  }

  .front-service__media { display: contents; }

  .front-service__ph {
    grid-column: 2;
    grid-row: 2 / span 3;
    align-self: start;
    width: 100%;                       /* 列幅（本文1140px時に Figma 318:20046 の510px） */
    height: 372px;                     /* Figma 318:20046 ▼ 2026-08-30 12章で上書き（768～1024は高さauto） */
  }

  .front-service__text {
    grid-column: 1;
    grid-row: 3;
    gap: 16px;                         /* Figma 318:20042 */
  }

  .front-service__lead { font-size: 20px; }                    /* Figma 318:20043 */
  .front-service__desc { font-size: 16px; font-weight: 500; }  /* Figma 318:20044 */

  /* ボタン上の余白は行間（row-gap 24px）で持つ */
  .front-service__btn-wrap,
  .front-service__inner--tight .front-service__btn-wrap {
    grid-column: 1;
    grid-row: 4;
    padding-top: 0;
  }

  /* 官公庁委託研修（318:20045）はPCにだけボタンがある */
  .front-service__btn-wrap--pc { display: block; }


  /* =====================================================================
     10-4. コラム（Figma 318:20105）
     ===================================================================== */

  .front-column {
    align-items: center;
    gap: 56px;
    padding: 80px;
  }

  .front-column > .front-h2 { text-align: center; }  /* Figma 318:20107 */

  .front-column__filter {
    justify-content: center;           /* Figma 318:20109 */
    gap: 8px;
    width: 980px;
    max-width: 100%;
  }

  .front-column .front-slider {
    width: 980px;
    max-width: 100%;
  }

  .front-column .front-slider__ctrl { display: none; }

  /* 3枚並び（Figma 318:20114 gap16 / カード316）。4件以上来たら折り返す。 */
  .front-column .front-slider__track {
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    margin-block: 0;
    padding-block: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .front-column .front-ccard { flex: 0 0 calc((100% - 32px) / 3); }  /* ▼ 2026-08-30 12章で上書き（768～1024は2列） */

  .front-ccard__body { gap: 12px; padding: 16px; }  /* Figma 318:20118 */
  .front-ccard__text { font-size: 16px; }           /* Figma 318:20121 */


  /* =====================================================================
     10-5. お知らせ（Figma 318:20136）
     ---------------------------------------------------------------------
     「お知らせの一覧を見る」が見出しの右隣（下端揃え）に移る。
     DOM順は 見出し → リスト → ボタン のままで、グリッドの明示配置で入れ替える。
     ===================================================================== */

  .front-news { padding: 80px; }

  .front-news__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 56px;                  /* Figma 318:20138 */
    row-gap: 56px;                     /* Figma 318:20136 */
    width: 980px;
    max-width: 100%;
    margin-inline: auto;
  }

  .front-news__inner > .front-h2 { grid-column: 1; grid-row: 1; }

  .front-news__btn {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    width: 301px;                      /* Figma 318:20140 */
  }

  .front-news__list { grid-column: 1 / -1; grid-row: 2; }

  .front-news__figure { gap: 24px; }   /* Figma 318:20144 */

  /* サムネイル枠（Figma 318:20146 142.857×100） */
  .front-news__thumb {
    flex: 0 0 142.857px;
    width: 142.857px;
    height: 100px;
    margin-right: 0;
  }

  .front-news__date { font-size: 16px; }  /* Figma 318:20150 */

  /* PCのタグは内容ぶんの幅（Figma 318:20151 は固定幅138） */
  .front-tag--news {
    flex: 0 1 auto;
    display: inline-block;
    max-width: 100%;
    padding: 8px 16px;
    font-size: 14px;
  }

  /* Figmaは1行（20px × 行間1.8 = 36px） */
  .front-news__title {
    -webkit-line-clamp: 1;
    font-size: 20px;
    font-weight: 500;
  }
}


/* =====================================================================
   11. スクロール追従の fade-in（Figma 注釈 454:46255）
   ---------------------------------------------------------------------
   「各見出し・コンテンツに、スクロール追従で下から上にふわっと表示される」
   という指定の実装。クラスは renewal/js/front.js が付ける（対象の一覧も
   JS側の FADE_TARGETS にある）。JSが動かないときは何も付かず、
   本文はそのまま表示される。

   MVの Ken Burns と pro/gra の面のグラデーション往復は、写真が支給された
   0829版で対応した（下の @media ブロック）。
   service-global.css 19節・care-consulting.css 16節と同じ作り。
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* MVの写真をゆっくり寄せて戻す（注釈 454:46177「Key Burnsで動く想定」）。
     スライドは横スクロールで動くので、写真だけに transform を掛ける。 */
  .front-mv__ph {
    transform-origin: center center;
    animation: rnw-front-kenburns 10s ease-in-out infinite alternate;  /* ▼ 2026-09-01 20s→10s（動きが遅いとの指摘） */
  }

  /* pro/gra を敷いた面（MV・サービス）のグラデーションを往復させる。 */
  .front-mv,
  .front-service {
    background-size: 100% 160%;
    background-position: 50% 0%;
    animation: rnw-front-gra 16s ease-in-out infinite alternate;
  }
}

@keyframes rnw-front-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

@keyframes rnw-front-gra {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 100%; }
}

.front-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.front-fade--in {
  opacity: 1;
  transform: none;
}

/* OS側で「視差効果を減らす」設定のときは動かさない。
   JS側でも発火を止めているが、途中で設定を変えた場合の保険。 */
@media (prefers-reduced-motion: reduce) {
  .front-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =====================================================================
   12. 調整ログ（2026-08-30～）
   ---------------------------------------------------------------------
   ここより下は、既存章の後に日付順で追記する調整履歴。
   ■ ルール
     ・変更は原則ここに追記し、既存章側には「▼ 日付 12章で上書き」の目印を残す。
     ・SP/PCで値を分ける場合は必ず @media で包む（素の追記はSP・PC両方に勝ってしまう）。
     ・元が複合セレクタなら同等以上の詳細度で書く。
   ===================================================================== */

/* --- 2026-08-30 左サイドバー：タブレットで300pxが本体を圧迫→非表示（PC上書き） --- */
/* ▼ 2026-09-01 境目を 1024 → 1125 に変更。
     ヘッダーがハンバーガーに替わるのは1125px（common.css「9. レスポンシブ」）。
     そこまではPCの2カラムのまま、比率（20.834%）を保って縮める方針にしたので、
     サイドバーを畳むのもハンバーガーと同じ幅に揃える。
     ドロワーに同じサービス一覧が入るため、畳んでも導線は残る。
   .front-main は flex:1 1 auto なので、サイドバーを消すだけで本体が全幅になる。 */
@media only screen and (min-width: 768px) and (max-width: 1125px) {
  .front-side { display: none; }
}

/* --- 2026-09-01 左サイドバー：比率で縮むぶん中身も一段小さくする（PC上書き） --- */
/* 10節で幅を 20.834%（1440px時に300px）にしたので、1440px未満では実寸が300pxより
   狭い。Figmaの 20px / 16px のままだと1126px時（実寸234px）に見出しが折れるため、
   この帯だけ余白と文字を一段落とす。1440px以上はFigmaどおり。
   ▲総合トップ（poppins-top）の 9-1節と同じ値。 */
@media only screen and (min-width: 1126px) and (max-width: 1439px) {
  .front-side__inner { gap: 16px; padding: 24px 16px; }
  .front-side__title { font-size: min(17px, calc(100cqi / 10.5 - 1.2px)); }
  .front-side__label { font-size: min(12.6px, calc(100cqi / 13.5 - 1.2px)); }   /* 14pxの90%（2026-09-24） */
}


/* --- 2026-08-30 サービス：タブレット＋狭いPC（≤1280）はスマホと同じ縦一列（PC上書き） --- */
/* サービスの2カラムを768～1280でSPと同じ縦積みに。≥1281はPCの2カラム。イントロと同じ閾値で切り替わりを揃える。（特徴カードは常に写真左。） */
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .front-service__inner,
  .front-service__inner--tight { display: flex; flex-direction: column; }
  .front-service__media { display: flex; flex-direction: column; }
}

/* --- 2026-08-30 コラム：PC3列はタブレットで窮屈→768～1024は2列（PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .front-column__list { flex-wrap: wrap; }
  .front-column .front-ccard { flex: 0 0 calc((100% - 16px) / 2); }
}

/* --- 2026-08-30 写真（サービス）：縦積み帯(768～1280)で height:auto（無切れ、≥1281の2カラムは固定高） --- */
/* 特徴カードは対象外（固定250px）。コラムのサムネも均一のまま対象外。イントロ写真は縦積みエントリ側で全幅auto。 */
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .front-service__ph { height: auto; }
}

/* --- 2026-08-30 特徴カード：幅が狭いと本文が縦に伸びる→写真幅の割合と文字サイズを幅に応じて連続的に縮小（PC上書き） --- */
/* track を container 化し、写真幅・文字サイズをカード幅(cqw)連動に。写真は狭いほど割合を下げ（48cqw−110px）、本文にゆとりを出す。高さは align-self:stretch で本文に一致、object-fit:cover。 */
@media only screen and (min-width: 768px) {
  .front-features .front-slider__track { container-type: inline-size; }
  .front-features .front-fcard { min-height: 250px; }
  .front-features .front-fcard__ph {
    flex: 0 0 auto;
    width: clamp(180px, calc(48cqw - 110px), 400px);
    height: auto;
    align-self: stretch;
  }
  .front-features .front-fcard__title { font-size: clamp(18px, calc(14px + 1cqw), 24px); }
  .front-features .front-fcard__text  { font-size: clamp(14px, calc(11px + 0.5cqw), 16px); }
}

/* --- 2026-08-30 Service見出し帯：max-width:1140の中央寄せで両脇に余白が出る→全幅写真（デザイン意図）に（PC上書き） --- */
/* コメントどおり「全幅写真の中央に白80%カード」が本来の形。max-width の上限を外して本文領域幅いっぱいにする。 */
@media only screen and (min-width: 768px) {
  .front-service__head { max-width: none; }
}

/* --- 2026-08-30 イントロ：2カラムは幅が狭いと本文が縦に伸びる→タブレット＋狭いPC（≤1280）は縦一列（PC上書き） --- */
/* 2カラムが本来の980px幅を確保できるはビューポート約1280px以上（サイドバー300込）なので、それ未満は縦一列に。写真は全幅・高さauto。 */
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .front-intro__body { display: flex; flex-direction: column; }
  .front-intro__text { flex: none; }
  .front-intro__ph   { flex: none; width: 100%; height: auto; }
}


/* --- 2026-09-05 MVカルーセル：スライドを3枚にしたらカードが下端で切れる --- */
/* .front-mv__track は overflow-x:auto。片軸だけ auto にすると縦も auto に
   計算されるので、トラックの高さに収まらないカードは切り落とされる。
   カードの高さはリード文の行数で決まり、3枚目（育児・介護コンサル）が最も高い。
     SP  カード下端 600.4px ＞ トラックの高さ 558px
     PC  カード下端 761.8px ＞ トラックの高さ 750px
   WFでは SP はカードの下端が揃い（5428:46530 / 5437:46595 とも高さ542）、
   PC はカードのぶんフレームが下に伸びる（5424:46918 は580 / 5424:46929 は693）。
   その通りに、SPは下端基準へ変え、PCは下の余白を足して収める。 */
.front-mv__card {
  top: auto;
  bottom: -22.279px;                 /* 1枚目の位置（top:261.121＝下端546.4）と同じ値 */
}

@media only screen and (min-width: 768px) {
  /* PCは上端基準のまま（10節の指定を、後から来るこの章で打ち消さないよう再指定する） */
  .front-mv__card { top: 352px; bottom: auto; }

  /* 104 → 120。3枚目のカード下端761.8pxを収める（66 + 580 + 120 = 766） */
  .front-mv__track { padding-bottom: 120px; }
}


/* --- 2026-09-05 MVの写真：Ken Burnsの拡大でスライドの外へはみ出す --- */
/* 写真は .front-mv__slide 直下の <img> で、11節の拡大（scale 1.08）が掛かると
   左右に28px・上下に16pxずつ元の枠から出る。カードは z-index で上に乗るので
   隠れるが、左右はスライドの外（PCはスライド間の60pxの隙間）に出て見えてしまう。
   スライド自体に overflow:hidden を掛けるとカードまで切れる（カードの下端は
   スライドより下に出る）ため、写真だけを包む枠を作ってそこで切る。 */
.front-mv__phbox {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 写真は絶対配置のまま。位置と大きさは枠が持ち、写真は枠いっぱいに広がる。 */
.front-mv__ph {
  inset: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 768px) {
  /* 10節で写真に付けていた「上端から400px」を枠へ移す */
  .front-mv__phbox { bottom: auto; height: 400px; }
}


/* --- 2026-09-05 MVカルーセル：端でも左右にスライドを覗かせ、隣は一回り小さく --- */
/* Figma 1251:10929 は中央のスライド（220,65.8 / 700x580）の左右に
   600x400 の隣スライドが並ぶ。実装は横スクロール＋スナップなので、
     ・1枚目にいると左に何も無い
     ・全スライドが同寸
   の2点がデザインと違っていた。
   前者は front.js の [data-rnw-slider-loop]（前後に複製を1枚ずつ置いて輪にする）、
   後者は下の scale で合わせる。
   0.857 は Figma の 600/700。中央基準で縮めると上下が42pxずつ詰まり、
   高さは580→497になる。Figmaの「top+42 / 高さ−84」とほぼ同じ。
   ▼[data-rnw-slider-ready] は front.js が初期化したときだけ付く。
     JSが読めない・エラーになったときに全部が縮んだままになるのを避ける。 */
@media only screen and (min-width: 768px) {
  [data-rnw-slider-ready] .front-mv__slide {
    transition: transform 0.45s ease;
  }

  [data-rnw-slider-ready] .front-mv__slide:not([data-rnw-slider-current]) {
    transform: scale(0.857);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-rnw-slider-ready] .front-mv__slide { transition: none; }
}

/* --- 2026-09-05 MV：SPにも「前へ」を出す --- */
/* Figma 105:6130 には「次へ」しか無いが、スライドが3枚になり、
   ループで前にも戻れるようになったため出す。位置は「次へ」の左右反転。 */
@media only screen and (max-width: 767px) {
  .front-mv__prev {
    display: flex;
    top: 221.221px;
    left: 3.684px;
    right: auto;
  }
}


/* --- 2026-09-05 MVカルーセル：3枚の高さが揃わずボコボコに見える（PC） --- */
/* カードはスライドの中に position:absolute で置いていて、高さはリード文の
   行数で決まる（1枚目231.6px / 2枚目260.4px / 3枚目343.8px）。上端は352pxで
   揃うが下端がばらばらになり、左右に隣が並ぶPCでは段差が目立つ。
   PCだけ「写真＋カード」の縦積み（flex column）に変え、トラックの
   align-items:stretch で全スライドの高さをいちばん高いものに合わせる。
   白い枠は中身なりの高さのままにして、余りは写真に吸わせる（枠を伸ばすと
   中に無駄な余白ができる）。これで上端・下端が揃い、枠の中も詰まったまま。
   リード文の長さが変わっても数字を直す必要は無い。
   ▼これで写真の下にカードがはみ出さなくなるため、上の章で 104→120 に
     広げたトラックの下余白は要らなくなる。Figmaの104pxへ戻す。
   ▼SPは1枚ずつしか見えず段差が問題にならないので、いまの
     「カードを下端基準に置く」ままにしている。 */
@media only screen and (min-width: 768px) {
  .front-mv__track {
    align-items: stretch;
    padding-bottom: 104px;           /* Figma 318:19969 */
  }

  .front-mv__slide {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  /* 余りの高さは写真が吸う。400pxはFigma 318:19971 の値で、いちばん
     背の高いカードのスライドがちょうどこの高さになる。 */
  .front-mv__phbox {
    position: relative;
    inset: auto;
    flex: 1 1 400px;
    height: auto;
  }

  /* 2026-09-05 保険：写真を包む枠 .front-mv__phbox が無い古いPHPが載っても
     崩れないようにする。枠が無いと写真が絶対配置のまま縦積みから外れ、
     スライドの高さがカードぶんしか無くなって「写真が消えてカードだけが
     上に張り付く」状態になる。枠があるときは写真が枠の中なので、この
     直下セレクタには当たらない。 */
  .front-mv__slide > .front-mv__ph {
    position: relative;
    inset: auto;
    flex: 1 1 400px;
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: cover;
  }

  /* 白い枠は中身なりの高さのままにする（伸ばすと中に余白ができる）。 */
  .front-mv__card {
    position: relative;
    inset: auto;
    width: auto;
    margin-top: -48px;               /* 写真に48px重なる（Figma 318:19984） */
    flex: 0 0 auto;
  }
}

/* トップの各コンテンツを下層の基本幅に揃える。外側の本文は全幅。 */
@media (min-width: 768px) {
  .front-intro__body,
  .front-features .front-slider,
  .front-service__blocks,
  .front-news__inner {
    width: 1280px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* パンくずで確保したヘッダー分の余白を本文で重複させない。 */
#container .rnw-breadcrumb + .front { padding-top: 0; }