@charset "UTF-8";
/* Lusitana は見出しの英字サブ（Training Objectives / Flow / 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/home-visit-training/）
Figma
PC 453:40621
SP 363:26523（SP修正）
---------------------------------------------------------------------
■ 読み込み
header.php が is_page('home-visit-training') のときだけ読み込む。
renewal/css/common.css より後に読み込むこと。
色は原則 common.css の CSS変数から取る。
■ 命名
このページ専用クラスは `rnw-hvt-` 接頭辞（home-visit-training の略）。
educare の nursery-school（rnw-ns-）/ familycare の
service-nanny-corporate（rnw-nc-）と同じ、語数の多いスラッグの略し方。
共通コンポーネント（.rnw-btn / .rnw-icon）は common.css のものを流用する。
■ 他ページとの関係
見出し・スライダー・ページ内メニュー・追従CTAはFigma上は
care-consulting / service-global と同じコンポーネントだが、CSSは
ページごとに独立させている（本番稼働中のページ本文の貼り直しを避けるため）。
お知らせ（.rnw-news__*）とFAQは最初から部品として切り出してある。
■ 旧CSSとの関係（旧 /professional/css/*.css は編集禁止）
下層ページでは旧 contents.css / common.css / professional.css が
読み込まれたままになっている。このページで打ち消しが要るのは
・common.css 192行 `p { line-height: 2.0 }`
・common.css 202行 `img { max-width:100%; vertical-align:middle }`
の2つ。テーブルを使っていないので contents.css の table 系は無関係。
■ PC
13節にまとめている。分岐は common.css・front.css と同じ 767/768。
デザインは1440幅で、セクションは全幅・中身だけ 1280 / 1200 / 1000 に
収まる作り。SPにあってPCに無いページ内メニューと追従CTAは
PC幅で display:none にしている。
===================================================================== */
/* =====================================================================
0. ルート・リセット
===================================================================== */
:root {
/* common.css に無い色。Figmaのバリアブル名を併記する。 */
--hvt-bg1: #FAF7F2; /* common/bg（オンライン講義の枠） */
--hvt-bg2: #EEE8DE; /* common/bg2（1つおきのセクション地色） */
--hvt-red: #912344; /* common/accent/red（塗りCTA・強調の注記） */
--hvt-gray: #626262; /* common/text/gray（注記） */
--hvt-ph: #D9D9D9; /* 写真未支給枠のプレースホルダー */
--hvt-cta-txt: #333333; /* 追従CTAの文字（Fill/Default） */
/* お問い合わせ先の枠（Figma 453:40779） */
--hvt-memo-bg: #FEF7F8;
--hvt-memo-bd: #FADBE8;
/* pro/gra。お問い合わせ節の地色。 */
--hvt-gra: linear-gradient(180deg, #EEF3F3 0%, #6EB2BC 52.404%);
/* common.css の --rnw-font-serif は Times（フッターcopyright用）で
和文明朝ではないため、このページ用に別途定義する。 */
--hvt-font-mincho: 'Yu Mincho Pr6N', 'YuMincho', 'Yu Mincho', '游明朝', 'Noto Serif JP', serif;
--hvt-font-en: 'Lusitana', serif;
/* カード影（Figma drop: 0 4 28 rgba(0,0,0,.08)） */
--hvt-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);
}
.rnw-hvt {
/* 固定ヘッダー（.rnw-header）の高さぶんの上余白。 */
padding-top: var(--rnw-header-h-sp);
background-color: var(--rnw-white);
color: var(--rnw-text);
font-family: var(--rnw-font-jp);
}
.rnw-hvt *,
.rnw-hvt *::before,
.rnw-hvt *::after { box-sizing: border-box; }
:where(.rnw-hvt) img {
display: block;
max-width: 100%;
height: auto;
}
/* 見出し・段落・リストのブラウザ既定マージンと旧CSSの余白を打ち消す。
:where() は詳細度0なので、後続の個別指定が必ず勝つ。 */
:where(.rnw-hvt) :is(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure) {
margin: 0;
padding: 0;
}
:where(.rnw-hvt) :is(ul, ol) { list-style: none; }
/* 旧 common.css の `p { line-height: 2.0 }` を打ち消す。 */
.rnw-hvt p { line-height: 1.8; }
/* 詳細度を0にしておく。`.rnw-hvt a`（0,1,1）のままだとボタン修飾クラス
（0,1,0）の color に勝ってしまい、赤い塗りCTAの文字が本文色に化ける。 */
:where(.rnw-hvt) a { text-decoration: none; color: inherit; }
/* --- 写真未支給枠 -----------------------------------------------------
Figma側がベタ塗り（#626262）になっている箇所。実写真が支給されたら
同じ寸法の ![]()
に置き換える（MVと3枚目のカード）。 */
/* 写真未支給枠。0829版で全て実写真に差し替わったため現在は未使用だが、
別の枠がベタ塗りで来たときに使えるよう残している。 */
.rnw-hvt-ph { background-color: var(--hvt-ph); }
/* --- 文字の色分け -----------------------------------------------------
注記の一部が common/accent/red になっている（453:40694 / 40769 / 40777）。 */
.rnw-hvt-red { color: var(--hvt-red); }
/* 本文中のリンク。遷移先未確定のものは で出すのでカーソルは既定のまま。 */
.rnw-hvt-link { color: var(--rnw-main); text-decoration: underline; }
.rnw-hvt-link--pending { cursor: pointer; }
/* =====================================================================
1. セクションの枠と見出し
---------------------------------------------------------------------
セクションは白と common/bg2 #EEE8DE の交互。お問い合わせだけ pro/gra。
見出しは英字サブ（Lusitana 18px / pro-main）＋和文（Yu Mincho 28px）。
PCは 24px / 42px（13節）。
===================================================================== */
.rnw-hvt-sec {
padding: 56px 16px;
background-color: var(--rnw-white);
}
.rnw-hvt-sec--tinted { background-color: var(--hvt-bg2); }
.rnw-hvt-sec--gra { background: var(--hvt-gra); }
.rnw-hvt-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.rnw-hvt-h2 {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
text-align: center;
letter-spacing: 1.2px;
}
.rnw-hvt-h2__en {
color: var(--rnw-main);
font-family: var(--hvt-font-en);
font-size: 18px;
font-weight: 400;
line-height: 1.3;
}
.rnw-hvt-h2__ja {
color: var(--rnw-text);
font-family: var(--hvt-font-mincho);
font-size: 28px;
font-weight: 600;
line-height: 1.3;
}
/* お知らせだけ左寄せ（Figma 453:40785 / 363:26743） */
.rnw-hvt-h2--left { text-align: left; }
/* お問い合わせの帯だけ幅いっぱい・高さ固定（Figma 363:26783） */
.rnw-hvt-h2--wide {
justify-content: center;
width: 100%;
height: 126px;
padding: 0;
background-color: rgba(255, 255, 255, 0.9);
}
.rnw-hvt-text {
width: 100%;
color: var(--rnw-text);
font-size: 14px;
font-weight: 500;
line-height: 1.8;
letter-spacing: 1.2px;
}
.rnw-hvt-text--center { text-align: center; }
/* 注記（common/text/caption 12px / common/text/gray） */
.rnw-hvt-note {
width: 100%;
color: var(--hvt-gray);
font-size: 12px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 1.2px;
}
/* 注記のうち common/accent/red のもの（453:40769 / 40777）。
.rnw-hvt-red と同じ詳細度なので、複合セレクタで確実に勝たせる。 */
.rnw-hvt-note.rnw-hvt-red { color: var(--hvt-red); }
/* 節の締めの一文（研修内容 453:40681） */
.rnw-hvt-sec__close {
width: 100%;
color: var(--rnw-text);
font-size: 14px;
font-weight: 500;
line-height: 1.8;
letter-spacing: 1.2px;
text-align: center;
}
.rnw-hvt-link .rnw-hvt-link--pending {
cursor: pointer;
}
/* =====================================================================
2. メインビジュアル（PC 694:35469 / SP 694:89819）
---------------------------------------------------------------------
0829版で写真が支給された。PCとSPは同じ画像ファイルで、置き方だけ違う。
下の left / top / width / height はFigmaの配置をそのまま写したもの。
SP 694:89820 … left -83.2% top -10.21% w 215.81% h 110.21%
PC 694:35470 … left -27.85% top -17.88% w 100% h 135.77%
PCは写真が枠の右端まで届かず、余った右側は白地。その境目を
右から白へ抜けるグラデーションでぼかしている（SPには無い）。
写真だけを __media で切り、白 .9 のパネルはその外に置く。
===================================================================== */
.rnw-hvt-mv {
position: relative;
height: 558px;
background-color: var(--hvt-bg2);
}
.rnw-hvt-mv__media {
position: relative;
overflow: hidden;
width: 100%;
height: 490px;
background-color: var(--rnw-white);
}
.rnw-hvt-mv__photo {
position: absolute;
top: -10.21%;
left: -83.2%;
width: 215.81%;
height: 110.21%;
max-width: none;
object-fit: cover;
}
.rnw-hvt-mv__panel {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: 11px;
width: 343px;
padding: 16px;
background-color: rgba(255, 255, 255, 0.9);
}
.rnw-hvt-mv__head {
display: flex;
flex-direction: column;
gap: 4px;
}
.rnw-hvt-mv__en {
color: var(--rnw-main);
font-family: var(--hvt-font-en);
font-size: 14px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 3.7px;
}
.rnw-hvt-mv__sub {
color: var(--rnw-text);
font-family: var(--hvt-font-mincho);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 1.2px;
}
.rnw-hvt-mv__h1 {
color: var(--rnw-text);
font-family: var(--hvt-font-mincho);
font-size: 26px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 1.2px;
}
.rnw-hvt-mv__lead {
color: var(--rnw-text);
font-size: 12px;
font-weight: 500;
line-height: 1.8;
letter-spacing: 1.2px;
}
/* =====================================================================
3. ページ内メニュー（SP 363:26533）
---------------------------------------------------------------------
SPのみ。PCはヘッダー下の帯（renewal/pagenav.php）が担うので消す。
アイコンは common.css の icon_arrow_circle.svg を mask で流用する。
===================================================================== */
.rnw-hvt-menu {
padding: 56px 16px;
background: var(--hvt-gra);
}
.rnw-hvt-menu__list {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
gap: 8px;
}
.rnw-hvt-menu__item {
display: flex;
align-items: center;
justify-content: space-between;
width: 160px;
padding: 16px;
border-radius: 8px;
background-color: var(--rnw-white);
box-shadow: var(--hvt-shadow);
}
.rnw-hvt-menu__label {
color: var(--rnw-text);
font-size: 12px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 1.2px;
word-break: break-word;
}
.rnw-hvt-menu__icon {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--rnw-text); /* Figma実測 #444444 */
-webkit-mask-image: url('../../img/icon_arrow_circle.svg');
mask-image: url('../../img/icon_arrow_circle.svg');
}
/* =====================================================================
4. 研修内容（PC 453:40639 / SP 363:26589）
---------------------------------------------------------------------
シラバスの枠 → 3枚のカード → 締めの一文。
カードはSPだけ横スライダー（front.js の [data-rnw-slider] 契約）。
===================================================================== */
.rnw-hvt-syllabus {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.rnw-hvt-syllabus__lead,
.rnw-hvt-syllabus__close {
color: var(--rnw-text);
font-size: 14px;
font-weight: 500;
line-height: 1.8;
letter-spacing: 1.2px;
text-align: center;
}
/* オンライン講義の枠（Figma 453:40645 は common/bg #FAF7F2） */
.rnw-hvt-lesson {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
padding: 16px;
background-color: var(--hvt-bg1);
}
.rnw-hvt-lesson__title {
width: 100%;
color: var(--rnw-text);
font-size: 16px;
font-weight: 700;
line-height: 1.8;
letter-spacing: 1.2px;
text-align: center;
}
.rnw-hvt-lesson__list {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
/* SP（363:26596）は枠の中に3行を並べるだけで、項目ごとの囲みは無い。
囲み（白地＋pro/main の細枠）はPCデザイン（453:40648）のみ。 */
.rnw-hvt-lesson__item {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
color: var(--rnw-text);
font-size: 14px;
font-weight: 700;
line-height: 1.8;
letter-spacing: 1.2px;
text-align: center;
}
/* --- スライダー（front.js の [data-rnw-slider] 契約） --- */
.rnw-hvt-slider {
display: flex;
flex-direction: column;
gap: 32px;
width: 100%;
}
.rnw-hvt-steps {
display: flex;
align-items: stretch;
gap: 16px;
/* ▼ 2026-09-04 16章で上書き（SPは縦にも余白を持たせて影の逃げ場を作る） */
margin: 0 -16px;
padding: 0 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* 旧Edge */
}
.rnw-hvt-steps::-webkit-scrollbar { display: none; }
.rnw-hvt-steps > * {
flex: 0 0 auto;
scroll-snap-align: start;
}
.rnw-hvt-ctrl {
display: flex;
align-items: center;
justify-content: space-between;
width: 239px;
height: 24px;
margin: 0 auto;
}
.rnw-hvt-ctrl__btn {
display: block;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.rnw-hvt-ctrl__btn img { width: 24px; height: 24px; }
/* アセットは「次へ」（右向き）1点だけ持ち、前へは180度回して使う。 */
.rnw-hvt-ctrl__btn--prev img { transform: rotate(180deg); }
.rnw-hvt-ctrl__btn[disabled] { opacity: 0.5; cursor: default; }
.rnw-hvt-ctrl__bar {
position: relative;
width: 160px;
height: 1px;
background-color: var(--rnw-main);
}
.rnw-hvt-ctrl__thumb {
position: absolute;
top: -1px;
left: 0;
height: 3px;
border-radius: 10px;
background-color: var(--rnw-main);
}
/* --- カード（Figma 453:40656 / 363:26615） --- */
.rnw-hvt-card {
display: flex;
flex-direction: column;
width: 300px;
box-shadow: var(--hvt-shadow);
}
.rnw-hvt-card__ph {
width: 100%;
height: 200px; /* ▼ 2026-08-30 16章で上書き（≤1024は高さauto） */
object-fit: cover;
}
.rnw-hvt-card__body {
display: flex;
flex: 1 0 auto;
flex-direction: column;
gap: 12px;
padding: 16px;
background-color: var(--rnw-white);
}
.rnw-hvt-card__title {
color: var(--rnw-text);
font-size: 20px;
font-weight: 700;
line-height: 1.6;
letter-spacing: 1.2px;
text-align: center;
}
/* タグ（Figma component: tag。白地＋pro/main の細枠） */
.rnw-hvt-card__tag {
align-self: center;
padding: 12px 5px;
border: 0.745px solid var(--rnw-main);
border-radius: 8px;
background-color: var(--rnw-white);
color: var(--rnw-main);
font-size: 14px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 1.2px;
text-align: center;
}
.rnw-hvt-card__text {
color: var(--rnw-text);
font-size: 14px;
font-weight: 500;
line-height: 1.8;
letter-spacing: 1.2px;
text-align: justify;
}
/* =====================================================================
5. 白い枠（お申し込み前の確認・対象者・受講料・修了証書）
---------------------------------------------------------------------
Figma 453:40687 / 40744 / 40756 / 40766。
修了証書の中の枠（--plain）だけ地色が common/bg #FAF7F2。
===================================================================== */
.rnw-hvt-panel {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
padding: 16px;
background-color: var(--rnw-white);
}
.rnw-hvt-panel--center { align-items: center; }
.rnw-hvt-panel--plain {
padding: 24px;
background-color: var(--hvt-bg1);
}
.rnw-hvt-panel__title {
color: var(--rnw-main);
font-size: 14px;
font-weight: 700;
line-height: 1.8;
letter-spacing: 1.2px;
}
.rnw-hvt-panel__lead {
color: var(--rnw-text);
font-size: 14px;
font-weight: 700;
line-height: 1.8;
letter-spacing: 1.2px;
}
.rnw-hvt-panel__list {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
color: var(--rnw-text);
font-size: 14px;
font-weight: 500;
line-height: 1.8;
letter-spacing: 1.2px;
}
.rnw-hvt-panel__list > li {
list-style: disc;
margin-left: 21px;
}
.rnw-hvt-panel__note {
color: var(--rnw-text);
font-size: 14px;
font-weight: 500;
line-height: 1.8;
letter-spacing: 1.2px;
}
/* 受講料（Figma 453:40757） */
.rnw-hvt-panel__price {
color: var(--rnw-text);
font-size: 20px;
font-weight: 700;
line-height: 1.6;
letter-spacing: 1.2px;
text-align: center;
}
.rnw-hvt-panel--center .rnw-hvt-panel__note {
width: 100%;
color: var(--hvt-gray);
font-size: 12px;
font-weight: 700;
line-height: 1.3;
}
/* 修了証書の科目リスト（Figma 453:40767） */
.rnw-hvt-panel__lines {
color: var(--rnw-text);
font-size: 14px;
font-weight: 700;
line-height: 1.8;
letter-spacing: 1.2px;
}
/* =====================================================================
6. お申し込みのCTA（Figma 453:40692 / 363:26651）
===================================================================== */
.rnw-hvt-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
}
.rnw-hvt-cta > .rnw-btn { width: 100%; }
.rnw-hvt-cta__note {
width: 100%;
color: var(--hvt-gray);
font-size: 12px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 1.2px;
}
/* =====================================================================
7. 受講の流れ（PC 453:40695 / SP 363:26653）
---------------------------------------------------------------------
pro/bg #D9F0F4 の枠の中に、白い行を並べる。
===================================================================== */
.rnw-hvt-flow {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: 16px;
background-color: var(--rnw-bg2); /* pro/bg #D9F0F4 */
}
.rnw-hvt-flow__title {
color: var(--rnw-text);
font-size: 20px;
font-weight: 700;
line-height: 1.6;
letter-spacing: 1.2px;
text-align: center;
}
.rnw-hvt-flow__row {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: 16px;
background-color: var(--rnw-white);
}
.rnw-hvt-flow__term {
color: var(--rnw-main);
font-size: 16px;
font-weight: 700;
line-height: 1.8;
letter-spacing: 1.2px;
}
.rnw-hvt-flow__body {
color: var(--rnw-text); /* Figma実測 #444444（common/text/bk） */
font-size: 14px;
font-weight: 700;
line-height: 1.8;
letter-spacing: 1.2px;
}
.rnw-hvt-flow__link {
color: var(--hvt-red);
font-size: 14px;
font-weight: 700;
line-height: 1.8;
letter-spacing: 1.2px;
}
.rnw-hvt-flow__link .rnw-hvt-link {
color: inherit;
text-decoration: none;
}
.rnw-hvt-flow__note {
color: var(--hvt-gray);
font-size: 12px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 1.2px;
}
/* =====================================================================
8. 追加研修(5科目)（Figma 453:40770 / 363:26728）
===================================================================== */
.rnw-hvt-add {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
padding: 16px;
background-color: var(--rnw-bg2); /* pro/bg #D9F0F4 */
}
.rnw-hvt-add__title {
color: var(--rnw-text);
font-size: 18px;
font-weight: 700;
line-height: 1.8;
letter-spacing: 1.2px;
text-align: center;
}
.rnw-hvt-add__body {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
padding: 16px;
background-color: var(--rnw-white);
}
.rnw-hvt-add__text {
color: var(--rnw-text);
font-size: 14px;
font-weight: 500;
line-height: 1.8;
letter-spacing: 1.2px;
}
/* 区切り線（Figma 453:40774） */
.rnw-hvt-add__price {
padding-top: 16px;
border-top: 1px solid var(--hvt-gray);
color: var(--rnw-text);
font-size: 20px;
font-weight: 700;
line-height: 1.6;
letter-spacing: 1.2px;
text-align: center;
}
.rnw-hvt-add__btn { width: 100%; }
/* --- お問い合わせ先の枠（Figma 453:40779） --- */
.rnw-hvt-contactbox {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
padding: 17px;
border: 1px dashed var(--hvt-memo-bd);
border-radius: 5px;
background-color: var(--hvt-memo-bg);
color: #000000; /* Figma実測 */
font-size: 14px;
font-weight: 500;
line-height: 1.8;
letter-spacing: 1.2px;
}
.rnw-hvt-contactbox a { text-decoration: underline; }
/* =====================================================================
9. お知らせ（PC 453:40782 / SP 363:26740）
---------------------------------------------------------------------
一覧は renewal/news.php のショートコード [professional_news] が出力し、
見た目は部品CSS renewal/css/news.css が持つ（クラスは .rnw-news__*）。
このページはサムネイル・カテゴリタグを出さない指定で呼んでいる。
本文が長く全文を出すデザインなので、3行での省略だけ解除する。
===================================================================== */
.rnw-hvt .rnw-news__list { width: 100%; }
.rnw-hvt .rnw-news__title {
display: block;
-webkit-line-clamp: none;
overflow: visible;
}
/* =====================================================================
10. お問い合わせ（PC 453:40822 / SP 363:26780）
===================================================================== */
.rnw-hvt-contact {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
padding: 24px 16px;
border-radius: 8px;
background-color: var(--rnw-white);
}
.rnw-hvt-contact__title {
color: var(--rnw-text);
font-size: 20px;
font-weight: 700;
line-height: 1.6;
letter-spacing: 1.2px;
}
.rnw-hvt-contact__btns {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
/* =====================================================================
11. ボタンのバリエーション
---------------------------------------------------------------------
.rnw-btn（寸法・角丸・字送り）は common.css のものを使う。
塗りは common/accent/red #912344（Figma 453:40693 ほか）。
===================================================================== */
.rnw-hvt-btn--red {
border: 0.745px solid var(--rnw-white); /* Figma実測 */
background-color: var(--hvt-red);
color: var(--rnw-white);
}
.rnw-hvt-btn--red .rnw-btn__icon { color: var(--rnw-white); }
/* 追加研修(5科目)のCTAはページの緑（pro/main #00778A）。
基礎研修の申込ボタン（--red）とは色で役割を分けている。 */
.rnw-hvt-btn--main {
border: 0.745px solid var(--rnw-white); /* Figma実測 */
background-color: var(--rnw-main);
color: var(--rnw-white);
}
.rnw-hvt-btn--main .rnw-btn__icon { color: var(--rnw-white); }
/* 遷移先未確定。 で出しているのでカーソルだけ既定に戻す。 */
.rnw-hvt-btn--pending { cursor: default; }
/* .rnw-btn は共通で justify-content:space-between なので、
2行になるラベルも矢印は右端に留まる。 */
.rnw-hvt .rnw-btn > span:first-child { line-height: 1.3; }
/* =====================================================================
12. 追従CTA（SP 363:26794）
---------------------------------------------------------------------
SPのみ。Figmaの drop-shadow は blur を標準偏差で持つため、
box-shadow では2倍にする（7.344 → 14.688px）。
===================================================================== */
.rnw-hvt-cta-fixed {
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);
box-shadow: 0 -6.779px 14.688px rgba(0, 0, 0, 0.08);
}
.rnw-hvt-cta-fixed__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;
background-color: var(--rnw-bg2); /* pro/bg #D9F0F4 */
color: var(--hvt-cta-txt);
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;
}
/* 「お申し込み」だけ common/accent/red の塗り（Figma 363:26799）。 */
.rnw-hvt-cta-fixed__btn--main {
border-left: 0.962px solid #A9A9A9; /* Figma実測 */
background-color: var(--hvt-red);
color: var(--rnw-white);
}
.rnw-hvt-cta-fixed__btn--pending { cursor: default; }
/* =====================================================================
13. PC（Figma 453:40621）
---------------------------------------------------------------------
デザインは1440幅。セクションは全幅で、中身だけ 1280 に収まる。
さらに内側で 1200（受講の流れ・修了証書・お知らせ）／
1000（確認枠・対象者・受講料）／996（シラバス）に絞る。
SPにあってPCに無いページ内メニューと追従CTAは消す。
===================================================================== */
@media only screen and (min-width: 768px) {
/* SPだけで折る改行（PC幅で消す）。care/global の br-sp と同じ役割。
お問い合わせボタンの「フォームでの／お問い合わせはこちら」で使う。 */
.rnw-hvt-br-sp { display: none; }
/* ---------- 0. 基本 ---------- */
.rnw-hvt { padding-top: var(--rnw-header-h-pc); }
/* PCデザインに無いブロック。SP側の指定はそのまま残している。 */
.rnw-hvt-menu { display: none; }
.rnw-hvt-cta-fixed { display: none; }
.rnw-hvt-sponly { display: none; }
/* お知らせの日付は、このページのデザインでは pro/main のまま
（news.css のPC指定は common/accent/red なので戻す）。 */
.rnw-hvt .rnw-news__date { color: var(--rnw-main); }
.rnw-hvt-sec { padding: 80px 40px; }
.rnw-hvt-inner {
gap: 38px;
width: 1280px;
max-width: 100%;
margin: 0 auto;
}
/* ---------- 1. 見出し ----------
PC/title/h2-sub = Lusitana 24、PC/title/h2 = Yu Mincho 42。 */
.rnw-hvt-h2__en { font-size: 24px; }
.rnw-hvt-h2__ja { font-size: 42px; }
/* お問い合わせの見出しはPCでは帯なし（Figma 453:40825） */
.rnw-hvt-h2--wide {
width: 640px;
max-width: 100%;
height: auto;
padding: 0 32px;
background: none;
}
.rnw-hvt-text { font-size: 16px; }
.rnw-hvt-sec__close { font-size: 16px; }
/* ---------- 2. メインビジュアル（Figma 694:35469） ----------
写真は全幅1440×707。白 .9 のパネルは 640px を中央から右に置く。 */
.rnw-hvt-mv { height: 707px; }
.rnw-hvt-mv__media { height: 707px; }
.rnw-hvt-mv__photo {
top: -17.88%;
left: -27.85%;
width: 100%;
height: 135.77%;
}
/* 写真の右端から先の白地へのつなぎ（694:35470 の重ね）。
Figmaは「右端が白・26.536%地点で透明」なので、そのまま写す。
パネルはこの ::after の外（.rnw-hvt-mv 直下）なので隠れない。 */
.rnw-hvt-mv__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to left,
var(--rnw-white) 0%,
rgba(255, 255, 255, 0) 26.536%
);
}
.rnw-hvt-mv__panel {
top: auto;
bottom: 80px; /* Figma 694:35471：707 -（262.35+364.65） */
left: auto; /* ▼ 2026-09-27 left:50% だと 50%+640px が画面右を超え、~1280px未満で右切れ。右基準に変更（1440pxでは right:80px＝旧left:50%と同一） */
right: 80px;
width: 640px;
max-width: calc(100% - 160px);
gap: 20px;
padding: 30px;
transform: none;
}
.rnw-hvt-mv__head { gap: 8px; }
.rnw-hvt-mv__en {
font-size: 26px;
letter-spacing: 6.87px;
}
.rnw-hvt-mv__sub { font-size: 24px; }
.rnw-hvt-mv__h1 { font-size: clamp(28px, 3vw, 38px); }
.rnw-hvt-mv__lead { font-size: 16px; }
/* ---------- 3. 研修内容（Figma 453:40639） ----------
シラバスは996幅の中央寄せ、講義の枠は3つ横並び。
カードは3カラム並列で前後ボタンは出さない。 */
.rnw-hvt-syllabus {
gap: 24px;
width: 996px;
max-width: 100%;
}
.rnw-hvt-syllabus__lead,
.rnw-hvt-syllabus__close { font-size: 16px; }
.rnw-hvt-lesson {
gap: 24px;
padding: 24px;
}
.rnw-hvt-lesson__title { font-size: 20px; }
.rnw-hvt-lesson__list {
flex-direction: row;
justify-content: center;
gap: 24px;
}
/* PCだけ1つずつを白地＋pro/main の細枠で囲む（Figma 453:40648）。 */
.rnw-hvt-lesson__item {
flex: 1 1 0;
min-width: 0;
flex-direction: column;
gap: 0;
padding: 16px 8px;
border: 1px solid var(--rnw-main);
border-radius: 5px;
background-color: var(--rnw-white);
font-size: 20px;
}
.rnw-hvt-slider { gap: 0; }
.rnw-hvt-ctrl { display: none; }
.rnw-hvt-steps {
justify-content: center;
gap: 16px;
margin: 0;
padding: 0;
overflow: visible;
}
.rnw-hvt-card {
width: 416px;
max-width: calc(33.333% - 11px); /* ▼ 2026-08-30 16章で上書き（≤1024は2列） */
}
.rnw-hvt-card__title { font-size: 24px; }
.rnw-hvt-card__tag { font-size: 18px; }
.rnw-hvt-card__text { font-size: 16px; }
/* ---------- 4. 白い枠 ----------
確認枠・対象者・受講料は1000幅の中央寄せ（Figma 453:40687 ほか）。 */
.rnw-hvt-panel {
width: 1000px;
max-width: 100%;
padding: 16px;
}
.rnw-hvt-panel--plain {
width: 1200px;
padding: 40px;
}
.rnw-hvt-panel__title,
.rnw-hvt-panel__lead,
.rnw-hvt-panel__list,
.rnw-hvt-panel__note,
.rnw-hvt-panel__lines { font-size: 16px; }
.rnw-hvt-panel__price { font-size: 24px; }
/* ---------- 5. お申し込みのCTA（Figma 453:40692） ---------- */
.rnw-hvt-cta { width: 480px; max-width: 100%; }
/* ---------- 6. 受講の流れ（Figma 453:40699） ---------- */
.rnw-hvt-flow {
width: 1200px;
max-width: 100%;
}
.rnw-hvt-flow__title { font-size: 24px; }
.rnw-hvt-flow__term { font-size: 20px; }
.rnw-hvt-flow__body,
.rnw-hvt-flow__link { font-size: 16px; }
/* ---------- 7. 追加研修（Figma 453:40770） ---------- */
.rnw-hvt-add {
width: 1200px;
max-width: 100%;
padding: 40px;
}
.rnw-hvt-add__title { font-size: 24px; }
.rnw-hvt-add__body { padding: 16px; }
.rnw-hvt-add__text { font-size: 16px; }
.rnw-hvt-add__price { font-size: 24px; }
.rnw-hvt-add__btn { width: 400px; }
.rnw-hvt-contactbox {
width: 1200px;
max-width: 100%;
font-size: 16px;
}
/* ---------- 8. お知らせ（Figma 453:40782） ---------- */
.rnw-hvt-sec .rnw-news__list {
width: 1200px;
max-width: 100%;
margin: 0 auto;
}
.rnw-hvt .rnw-news__date { font-size: 16px; line-height: 1.6; }
.rnw-hvt .rnw-news__title { font-size: 16px; }
/* ---------- 9. お問い合わせ（Figma 453:40822） ---------- */
.rnw-hvt-contact { padding: 24px 16px; }
.rnw-hvt-contact__title { font-size: 24px; }
.rnw-hvt-contact__btns {
flex-direction: row;
justify-content: center;
gap: 24px;
}
.rnw-hvt-contact__btns > * { width: 480px; max-width: calc(50% - 12px); }
}
/* =====================================================================
14. 動き（デザイナー指示）
---------------------------------------------------------------------
「グラデーションがふわっと動きます」「画像については、Key Burnsで動く想定です」
・MVの写真 … 20秒かけてゆっくり拡大→戻る
・pro/gra の面（ページ内メニュー／お問い合わせ）…
グラデーションの位置をゆっくり往復させる
OS側で「視差効果を減らす」設定なら止める。
care-consulting.css 16節・service-global.css 19節と同じ作り。
▼要確認：指示にノード指定が無かったための当てはめ。
===================================================================== */
/* タブレットでは写真を表示枠全体に敷き、右側に白い空白を残さない。 */
@media only screen and (min-width: 768px) and (max-width: 1125px) {
.rnw-hvt-mv__en {
font-size: 20.8px;
letter-spacing: 5.496px;
}
.rnw-hvt-mv__sub { font-size: 19.2px; }
.rnw-hvt-mv__h1 { font-size: clamp(22.4px, 2.4vw, 30.4px); }
.rnw-hvt-mv__lead { font-size: 12.8px; }
.rnw-hvt-mv__photo {
top: 0;
left: 0;
width: 100%;
height: 100%;
object-position: center;
}
}
@media (prefers-reduced-motion: no-preference) {
.rnw-hvt-mv__photo {
transform-origin: center center;
animation: rnw-hvt-kenburns 10s ease-in-out infinite alternate; /* ▼ 2026-09-01 20s→10s（動きが遅いとの指摘） */
}
.rnw-hvt-menu,
.rnw-hvt-sec--gra {
background-size: 100% 160%;
background-position: 50% 0%;
animation: rnw-hvt-gra 16s ease-in-out infinite alternate;
}
}
@keyframes rnw-hvt-kenburns {
from { transform: scale(1); }
to { transform: scale(1.08); }
}
@keyframes rnw-hvt-gra {
from { background-position: 50% 0%; }
to { background-position: 50% 100%; }
}
/* =====================================================================
15. スクロール追従の fade-in
---------------------------------------------------------------------
「各見出し・コンテンツ（セクションの中身）に、スクロール追従で
fade-inアニメーションが入ります。下から上にふわっと表示されます」への対応。
クラスは renewal/js/front.js が付ける（対象の一覧もJS側の FADE_GROUPS）。
JSが読めない・IntersectionObserver が無い・OS側で「視差効果を減らす」に
なっている場合は何も付かず、本文はそのまま表示される。
CSSに最初から opacity:0 を書かないのはこのため。
14節のグラデーション往復と同じ要素に載ることがあるが、あちらは
background-position、こちらは opacity と transform なので干渉しない。
===================================================================== */
.rnw-hvt-fade {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
will-change: opacity, transform;
}
.rnw-hvt-fade--in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.rnw-hvt-fade {
opacity: 1;
transform: none;
transition: none;
}
}
/* =====================================================================
16. 調整ログ（2026-08-30～）
---------------------------------------------------------------------
ここより下は、既存章の後に日付順で追記する調整履歴。
■ ルール
・変更は原則ここに追記し、既存章側には「▼ 日付 16章で上書き」の目印を残す。
・SP/PCで値を分ける場合は必ず @media で包む（素の追記はSP・PC両方に勝ってしまう）。
・元が複合セレクタなら同等以上の詳細度で書く。
===================================================================== */
/* --- 2026-08-30 研修内容カード：3列→タブレットは2列、写真は高さauto（PC上書き） --- */
/* PCの track(.rnw-hvt-steps)は flex nowrap の3列。flex-wrap:wrap を追加し、カード幅を calc(50%-8px) にして2列に。 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.rnw-hvt-steps { flex-wrap: wrap; }
.rnw-hvt-card { max-width: calc(50% - 8px); }
.rnw-hvt-card__ph { height: auto; }
}
/* --- 2026-09-04 研修内容カード：スライダーの影が上下で切れる（SP） --- */
/* .rnw-hvt-steps は overflow-x:auto。CSSでは片方の軸だけ auto にすると、
もう片方（縦）も visible ではなく auto に計算されるため、縦の padding が
0 だとカードの外周ぴったりで切られ、box-shadow（0 4px 28px）が上下とも消える。
縦に padding で逃げ場を作り、同値の負マージンで見た目の位置を戻す。
影は下に32px・上に24px必要なので、両方32pxで取る。
PC（768px以上）は 1085〜1091行で overflow:visible に戻しているため対象外。 */
@media only screen and (max-width: 767px) {
.rnw-hvt-steps {
margin: -32px -16px;
padding: 32px 16px;
}
}
/* =====================================================================
ドロワーを開いている間も追従CTAを前面に出す（2026-09-16）
---------------------------------------------------------------------
バーの z-index をドロワー（13）より上げたぶん、ドロワーの中身が
バーに隠れないよう下余白をバーの高さぶん足す。
PC幅ではバーを出さないので元（pb-40）に戻す。
===================================================================== */
.rnw-menu__inner { padding-bottom: calc(40px + 48.51px); }
@media only screen and (min-width: 768px) {
.rnw-menu__inner { padding-bottom: 40px; }
}