の中に
![]()
を 4 枚。1 枚目は最初から表示。 --- */
.cf-hero__slides { position: absolute; inset: 0; z-index: 0; }
.cf-hero__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; opacity: 0;
animation: cf-slide 24s infinite; will-change: opacity, transform; }
.cf-hero__slides img:nth-child(1) { animation-delay: 0s; }
.cf-hero__slides img:nth-child(2) { animation-delay: 6s; }
.cf-hero__slides img:nth-child(3) { animation-delay: 12s; }
.cf-hero__slides img:nth-child(4) { animation-delay: 18s; }
@keyframes cf-slide {
0% { opacity: 0; transform: scale(1.0); }
5% { opacity: 1; }
25% { opacity: 1; }
31% { opacity: 0; transform: scale(1.06); }
100% { opacity: 0; transform: scale(1.06); }
}
/* 1 枚目は読み込み直後から見せる（0〜5% のフェードインを待たせない） */
.cf-hero__slides img:nth-child(1) { animation-name: cf-slide-first; }
@keyframes cf-slide-first {
0% { opacity: 1; transform: scale(1.0); }
25% { opacity: 1; }
31% { opacity: 0; transform: scale(1.06); }
95% { opacity: 0; transform: scale(1.0); }
100% { opacity: 1; transform: scale(1.0); }
}
.cf-hero::after { z-index: 1; }
.cf-hero__dots { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; }
.cf-hero__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); animation: cf-dot 24s infinite; }
.cf-hero__dots i:nth-child(2) { animation-delay: 6s; } .cf-hero__dots i:nth-child(3) { animation-delay: 12s; } .cf-hero__dots i:nth-child(4) { animation-delay: 18s; }
@keyframes cf-dot { 0%,25% { background: #fff; transform: scale(1.35); } 31%,100% { background: rgba(255,255,255,.45); transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
.cf-hero__slides img, .cf-hero__dots i { animation: none; } .cf-hero__slides img:nth-child(1) { opacity: 1; }
}
@media (max-width: 768px) { .cf-hero__slides img { object-position: 70% center; } .cf-hero__dots { bottom: 46px; } }
/* --- 下層ページのヒーロー：小さな写真を全面に引き伸ばさない。
左＝ロゴの深緑の地に見出し／右＝写真を「高さぴったり」で置き、左端を緑へ溶かす。下端に草。
600px の仮写真でも粗く見えず、横長の写真に差し替えても成立する。 --- */
.page-hero-wrapper {
min-height: 340px; padding: 128px 20px 80px;
background-color: var(--green-deep);
/* 写真は右半分だけに敷く（幅＝画面の半分・最低 620px。16:9 でも高さ 340px を覆える）。全面に引き伸ばさない */
background-size: max(50%, 620px) auto; background-position: right 30%; background-repeat: no-repeat;
}
.page-hero-wrapper::after {
/* 左＝緑のベタ → 写真の左端（右から max(50%,620px)）で溶かす */
background: linear-gradient(90deg, var(--green-deep) 0%, var(--green-deep) calc(100% - max(50%, 620px) + 2px), rgba(0,102,94,.55) calc(100% - max(50%, 620px) + 170px), rgba(0,102,94,.08) 100%) !important;
}
.ph-overlay {
background: url(/image/illust/grass.png) repeat-x left bottom / auto 40px,
url(/image/illust/horse_run.png) no-repeat left max(20px, calc(50% - 40px)) bottom 22px / auto 74px !important;
z-index: 3;
}
.ph-container { z-index: 4; }
.ph-title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: .1em; text-shadow: none; position: relative; padding-left: 22px; }
.ph-title::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 7px; border-radius: 7px; background: var(--gold); }
.ph-desc { text-shadow: none; padding-left: 22px; }
@media (max-width: 768px) {
.page-hero-wrapper { min-height: 230px; padding: 96px 16px 62px; background-size: cover; background-position: center 35%; }
.page-hero-wrapper::after { background: linear-gradient(90deg, var(--green-deep) 0%, rgba(0,102,94,.86) 38%, rgba(0,102,94,.18) 100%) !important; }
.ph-overlay { background: url(/image/illust/grass.png) repeat-x left bottom / auto 28px, url(/image/illust/horse_run.png) no-repeat right 16px bottom 14px / auto 46px !important; }
}
/* =========================================================
v1.8（2026-09-19）ヘッダーぶんの見切れ／スマホの表・フローティングボタン
========================================================= */
/* --- 固定ヘッダー（PC 82px・992px 以下 68px）の下からヒーローを始める。
以前はヒーローが画面最上部から始まり、写真の上 82px がヘッダーの裏に隠れていた。
※ .custom-html-inner > :first-child {margin-top:0}（正本）に負けないよう同じ詳細度で書く --- */
:root { --header-h: 82px; }
@media (max-width: 992px) { :root { --header-h: 68px; } }
.custom-html-inner > .cf-hero, .cf-hero { margin-top: var(--header-h); min-height: min(calc(86svh - var(--header-h)), 720px); }
.cf-hero__inner { padding-top: 72px; }
.page-hero-wrapper { margin-top: var(--header-h); min-height: 280px; padding: 56px 20px 84px; }
@media (max-width: 768px) {
.custom-html-inner > .cf-hero, .cf-hero { min-height: min(calc(74svh - var(--header-h)), 580px); }
.cf-hero__inner { padding-top: 48px; }
.page-hero-wrapper { min-height: 190px; padding: 40px 16px 64px; }
}
/* --- スマホの料金表：1 行＝1 枚のカード。名前は緑の帯で全幅、料金は右下に大きく。
（PC 用の tbody th {width:34%} が残って名前の帯が細くなっていた） --- */
@media (max-width: 768px) {
.cf-table-wrap { border: 0; background: transparent; box-shadow: none; overflow: visible; }
.cf-table, .cf-table tbody { display: block; width: 100%; min-width: 0; }
.cf-table tbody tr { display: block; background: var(--bg-paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-base); margin-bottom: 14px; }
.cf-table tbody th, .cf-table tbody td { display: block; width: 100% !important; box-sizing: border-box; border-bottom: 0; white-space: normal !important; min-width: 0 !important; }
.cf-table tbody th { background: var(--green-soft); color: var(--green-deep); padding: 11px 16px; font-size: 15.5px; }
.cf-table tbody th small { display: inline; margin-left: 4px; color: var(--green); }
.cf-table tbody td { padding: 10px 16px 0; font-size: 14px; }
.cf-table tbody td:last-child { padding-bottom: 14px; }
.cf-table:not(.cf-table--compact) tbody td:last-child { text-align: right; padding-top: 6px; }
.cf-table .cf-price { font-size: 19px; }
/* 会員表（6 列）：横スクロールをやめ、セルの前に列名を出して縦に並べる */
.cf-table--compact { min-width: 0 !important; }
.cf-table--compact thead { display: none !important; }
.cf-table--compact tbody td { display: flex !important; gap: 12px; padding: 9px 16px 0 !important; border-top: 0; font-size: 14px; }
.cf-table--compact tbody th + td { padding-top: 12px !important; }
.cf-table--compact tbody td::before { flex: 0 0 4.5em; font-family: var(--font-heading); font-weight: 700; font-size: 12.5px; color: var(--green-deep); padding-top: 1px; }
.cf-table--compact tbody td:nth-child(2)::before { content: "入会金"; }
.cf-table--compact tbody td:nth-child(3)::before { content: "年会費"; }
.cf-table--compact tbody td:nth-child(4)::before { content: "騎乗料"; }
.cf-table--compact tbody td:nth-child(5)::before { content: "指導料"; }
.cf-table--compact tbody td:nth-child(6)::before { content: "対象"; }
.cf-table--compact tbody td:last-child { padding-bottom: 14px !important; }
/* フローティングボタン：PC 用（右端に縦・左だけ角丸）の形がスマホの下部バーに残っていた */
.fc-floating-action { border-radius: 12px !important; }
}
/* ---------- v2.0（2026-10-06）TOP ヒーロー直下の休業日・営業時間の帯＋最新お知らせ 1 行（latest_news_bar） ---------- */
.cf-notice { background: var(--bg-paper); border-bottom: 1px solid var(--line); }
.cf-notice__inner { max-width: 1160px; margin: 0 auto; padding: 18px 20px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px 32px; }
.cf-notice__item { display: flex; align-items: flex-start; gap: 12px; }
.cf-notice__label { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green-deep); font-family: var(--font-heading); font-weight: 700; font-size: 13px; white-space: nowrap; }
.cf-notice__item--closed .cf-notice__label { background: #FDEAD7; color: #9A4A12; }
.cf-notice__text { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--text-main); }
.cf-notice__text a { color: var(--green); font-weight: 700; }
/* latest_news_bar（正本）を帯の直下に置いたときの見た目 */
.news-bar-section { padding: 14px 20px !important; background: var(--bg-warm) !important; border-bottom: 1px solid var(--line); }
.news-bar-container { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; gap: 20px; }
.news-bar-head { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.news-bar-eyebrow { display: none !important; }
.news-bar-label { margin: 0 !important; padding: 5px 12px !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; border-radius: 999px !important; background: var(--green) !important; color: #fff !important; font-family: var(--font-heading); font-weight: 700; font-size: 13px !important; line-height: 1.4 !important; display: inline-block !important; }
.news-bar-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.news-bar-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-main); font-size: 14px; }
.news-bar-link .news-date { font-family: var(--font-en); font-weight: 700; color: var(--earth); font-size: 12.5px; flex: 0 0 auto; }
.news-bar-link .news-title { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-bar-link .news-arrow { color: var(--green); font-size: 11px; }
.news-bar-link:hover .news-title { color: var(--green); }
@media (max-width: 768px) {
.cf-notice__inner { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
.cf-notice__text { font-size: 13px; }
.news-bar-container { flex-direction: column; align-items: flex-start; gap: 8px; }
.news-bar-link .news-title { white-space: normal; }
}