がラップしている。
Desktop（≥1024px）/ Mobile（≤767px）ではこのdivに何も適用せず、通常のblock要素として
NEWS→ACCESSが縦に並ぶ（Desktop Masterどおり、それぞれ独立した横長Section）。
Tablet（768–1023px）のみ2カラムグリッド化し、LEFT=NEWS / RIGHT=ACCESSを同一の水平帯にする
（Tablet Master準拠）。band自体にはcontainer相当のpadding-inlineを持たせていないため、
各Sectionが個別に持つ .yfc-container のpadding-inlineと二重にならない。
-------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
.yfc-band-news-access {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
.yfc-band-news-access .yfc-news,
.yfc-band-news-access .yfc-access {
padding-block: 14px;
}
.yfc-band-news-access .yfc-access {
border-left: 1px solid var(--yfc-border);
}
.yfc-band-news-access .yfc-section-title {
font-size: 20px;
margin-bottom: 4px;
}
}
/* --------------------------------------------------------------------------
13. News
Desktop: LEFT見出し / RIGHT 4記事の横方向構成 / Tablet: 帯内でコンパクトmini-list / Mobile: リスト型UI
-------------------------------------------------------------------------- */
.yfc-news {
background: var(--yfc-white);
padding-block: 18px;
}
.yfc-news__layout {
display: flex;
align-items: flex-start;
gap: 28px;
}
.yfc-news__side {
flex: 0 0 200px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.yfc-news__list {
list-style: none;
margin: 0;
padding: 0;
flex: 1 1 auto;
min-width: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.yfc-news__card-link {
display: block;
}
.yfc-news__card-thumb {
display: block;
aspect-ratio: 2 / 1;
border-radius: var(--yfc-radius-sm);
overflow: hidden;
margin-bottom: 8px;
background: var(--yfc-gray-100);
}
.yfc-news__card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.yfc-news__placeholder {
display: block;
width: 100%;
height: 100%;
background: var(--yfc-gray-100);
}
.yfc-news__card-body {
display: flex;
flex-direction: column;
gap: 4px;
}
.yfc-news__card-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--yfc-gray-600);
}
.yfc-news__card-cat {
background: var(--yfc-gray-100);
color: var(--yfc-green-dark);
padding: 2px 8px;
border-radius: 999px;
font-weight: 700;
}
.yfc-news__card-title {
font-size: 13px;
font-weight: 700;
line-height: 1.5;
color: var(--yfc-text);
}
.yfc-news__empty {
color: var(--yfc-gray-600);
font-size: 14px;
}
/*
* Tablet: 本Sectionは .yfc-band-news-access 内でACCESSと半々の帯を組む（front-page.php参照）。
* Tablet Masterに合わせ、縦list化ではなく「見出し＋記事カードの横方向compact配置」とする。
* 帯の半分幅（約340px前後）に収めるため、Desktopの4件表示ではなく3件表示にする
* （Desktop/Mobileは4件のまま。Tabletのみ3件）。
*/
@media (min-width: 768px) and (max-width: 1023px) {
.yfc-news__layout {
flex-direction: column;
gap: 6px;
}
.yfc-news__side {
flex: none;
width: 100%;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.yfc-news__list {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.yfc-news__card:nth-child(n + 4) {
display: none; /* Tabletのみ3件表示（Desktop/Mobileは4件のまま） */
}
.yfc-news__card-thumb {
margin-bottom: 3px;
}
.yfc-news__card-title {
font-size: 11px;
line-height: 1.3;
}
.yfc-news__card-meta {
font-size: 10px;
}
}
/* Mobile: リスト型UI（thumb左＋text右の横並び行）。Tabletのcompact grid化とは別に定義する。 */
@media (max-width: 767px) {
.yfc-news__layout {
flex-direction: column;
gap: 14px;
}
.yfc-news__side {
flex: none;
width: 100%;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.yfc-news__list {
grid-template-columns: 1fr;
gap: 0;
}
.yfc-news__card {
border-bottom: 1px solid var(--yfc-border);
}
.yfc-news__card-link {
display: flex;
align-items: center;
gap: 14px;
padding-block: 14px;
}
.yfc-news__card-thumb {
width: 84px;
flex-shrink: 0;
margin-bottom: 0;
}
.yfc-news__card-title {
font-size: 13px;
}
}
/* --------------------------------------------------------------------------
14. Access
Desktop/Tablet: Text + Map + Facility photo（横並び）
Mobile: Text → Map → Facility photo（縦積み。Facility pointsはTextブロック内に含む）
-------------------------------------------------------------------------- */
.yfc-access {
background: var(--yfc-offwhite);
padding-block: 20px;
}
.yfc-access__grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr 0.8fr;
grid-template-rows: auto auto;
grid-template-areas:
"info map photo"
"info map points";
gap: 10px 20px;
align-items: stretch;
}
.yfc-access__info {
grid-area: info;
display: flex;
flex-direction: column;
gap: 9px;
}
.yfc-access__address {
font-style: normal;
font-size: 14px;
line-height: 1.55;
color: var(--yfc-text);
}
.yfc-access__points {
grid-area: points;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 6px 16px;
align-self: center;
}
.yfc-access__points li {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--yfc-gray-600);
}
.yfc-access__points svg {
color: var(--yfc-green);
width: 18px;
height: 18px;
}
.yfc-access__map {
min-height: 120px;
border-radius: var(--yfc-radius-md);
overflow: hidden;
background: var(--yfc-gray-100);
}
.yfc-access__map iframe {
display: block;
}
.yfc-access__photo {
min-height: 90px;
border-radius: var(--yfc-radius-md);
background: linear-gradient(160deg, #1c2b22, #0e2721);
/* PHOTO REQUIRED差し込み時: background-image + background-size:cover; */
}
/*
* Tablet（768–1023px）: 本Sectionは .yfc-band-news-access 内でNEWSと半々の帯を組むため
* 使用可能幅は狭い。Tablet Masterに合わせ、INFO → MAP+PHOTO(横並び) → POINTS の
* 3段構成にする（4段の単純縦積みではない）。
*/
@media (min-width: 768px) and (max-width: 1023px) {
.yfc-access__grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"info info"
"map photo"
"points points";
gap: 6px;
}
.yfc-access__map,
.yfc-access__photo {
min-height: 85px;
}
.yfc-access__points {
flex-direction: row;
flex-wrap: wrap;
gap: 4px 12px;
}
.yfc-access__address {
font-size: 12.5px;
line-height: 1.5;
}
.yfc-access__info {
gap: 6px;
}
}
@media (max-width: 767px) {
.yfc-access__grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"info"
"map"
"photo"
"points";
gap: 14px;
}
.yfc-access__map {
min-height: 160px;
}
.yfc-access__photo {
min-height: 110px;
}
.yfc-access__points {
flex-direction: row;
flex-wrap: wrap;
gap: 8px 16px;
}
}
/* --------------------------------------------------------------------------
15. FAQ
Desktop/Tablet: 2 columns / Mobile: 1 column
-------------------------------------------------------------------------- */
.yfc-faq {
background: var(--yfc-white);
padding-block: 14px;
}
.yfc-faq__layout {
display: flex;
align-items: flex-start;
gap: 40px;
}
.yfc-faq__side {
flex: 0 0 220px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.yfc-faq__grid {
flex: 1 1 auto;
min-width: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px 24px;
align-content: start;
}
.yfc-faq__item {
border-bottom: 1px solid var(--yfc-border);
}
.yfc-faq__question {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.yfc-faq__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: none;
border: none;
text-align: left;
font-size: 13px;
font-weight: 700;
color: var(--yfc-text);
padding: 10px 4px;
cursor: pointer;
min-height: 44px; /* tap target floor。paddingを削っても44px未満にはならない */
}
.yfc-faq__icon {
flex-shrink: 0;
color: var(--yfc-green);
transition: transform 0.2s var(--yfc-ease);
}
.yfc-faq__trigger[aria-expanded="true"] .yfc-faq__icon {
transform: rotate(45deg);
}
.yfc-faq__panel {
padding: 0 4px 14px;
font-size: 12px;
color: var(--yfc-gray-600);
}
.yfc-faq__panel[hidden] {
display: none;
}
@media (max-width: 1023px) {
.yfc-faq {
padding-block: 24px;
}
.yfc-faq__layout {
gap: 24px;
}
.yfc-faq__side {
flex: 0 0 180px;
}
}
@media (max-width: 767px) {
.yfc-faq {
padding-block: 10px;
}
.yfc-faq__layout {
flex-direction: column;
gap: 10px;
}
.yfc-faq__side {
flex: none;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.yfc-faq__side .yfc-section-title {
font-size: 22px;
margin-bottom: 2px;
}
.yfc-faq__grid {
grid-template-columns: 1fr;
width: 100%;
}
}
/* --------------------------------------------------------------------------
16. Final CTA
Deep Green background。Desktop/Tablet: 横並び / Mobile: 縦積み（3 CTA縦並び）
-------------------------------------------------------------------------- */
.yfc-final-cta {
background: var(--yfc-green-deep);
color: var(--yfc-white);
padding-block: 16px;
}
.yfc-final-cta__inner {
display: flex;
align-items: center;
gap: 32px;
}
.yfc-final-cta__copy {
flex: 0 0 auto;
max-width: 320px;
}
.yfc-final-cta__title {
font-family: var(--yfc-font-en);
font-weight: 900;
font-size: clamp(24px, 2.8vw, 36px);
line-height: 1.05;
margin: 0 0 8px;
}
.yfc-final-cta__copy p {
margin: 0;
font-size: 13px;
opacity: 0.85;
line-height: 1.7;
}
.yfc-final-cta__ctas {
display: flex;
flex-direction: row;
gap: 10px;
flex: 1 1 auto;
min-width: 0;
}
.yfc-final-cta__ctas .yfc-btn--stacked {
flex: 1 1 0;
min-width: 0;
padding: 10px 14px;
gap: 8px;
}
.yfc-final-cta__ctas .yfc-btn--stacked strong {
font-size: 13px;
line-height: 1.3;
}
.yfc-final-cta__ctas .yfc-btn--stacked .yfc-btn__text small {
font-size: 10.5px;
line-height: 1.3;
}
.yfc-final-cta__ctas .yfc-btn--stacked .yfc-icon {
width: 16px;
height: 16px;
}
@media (max-width: 1023px) {
.yfc-final-cta__inner {
gap: 20px;
}
.yfc-final-cta__copy {
max-width: 220px;
}
.yfc-final-cta__ctas {
gap: 6px;
}
.yfc-final-cta__ctas .yfc-btn--stacked {
padding-inline: 10px;
}
.yfc-final-cta__ctas .yfc-btn--stacked strong {
font-size: 12px;
}
.yfc-final-cta__ctas .yfc-btn--stacked .yfc-btn__text small {
font-size: 9.5px;
line-height: 1.2;
}
}
@media (max-width: 767px) {
.yfc-final-cta__inner {
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.yfc-final-cta__copy {
max-width: none;
}
.yfc-final-cta__ctas {
flex-direction: column;
}
.yfc-final-cta__ctas .yfc-btn--stacked strong {
font-size: 14px;
}
.yfc-final-cta__ctas .yfc-btn--stacked .yfc-btn__text small {
display: block;
font-size: 12px;
}
}
/* --------------------------------------------------------------------------
17. Footer
PASS3: White row（Logo | Nav | Tel+SNS 横方向） + Deep Green bar（Legal | Copyright 横方向）
の2段構成。Master準拠でDesktop/Tablet/Mobileいずれも大幅にcompact化。
-------------------------------------------------------------------------- */
.yfc-footer {
background: var(--yfc-white);
border-top: 1px solid var(--yfc-border);
}
/* Theme側のグローバルanchor style（color/text-decoration等）がYFC Header/Footerへ
漏れないよう、必要最小限のデフォルトをscope内で明示（Global selectorでTheme全体は変更しない） */
.yfc-header a,
.yfc-footer a {
color: inherit;
text-decoration: none;
}
/* WHITE ROW: Logo | Nav | Tel+SNS を横方向に配置 */
.yfc-footer__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-block: 18px;
flex-wrap: wrap;
}
.yfc-footer__logo {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.yfc-footer__logo-mark {
font-family: var(--yfc-font-en);
font-weight: 800;
font-size: 18px;
color: var(--yfc-green);
}
.yfc-footer__logo-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.yfc-footer__logo-ja {
font-weight: 700;
font-size: 13px;
}
.yfc-footer__logo-en {
font-family: var(--yfc-font-en);
font-size: 9px;
letter-spacing: 0.06em;
color: var(--yfc-gray-600);
}
.yfc-footer__nav {
flex: 1 1 auto;
}
.yfc-footer__nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
}
.yfc-footer__nav a {
font-size: 12px;
color: var(--yfc-gray-600);
}
.yfc-footer__nav a:hover {
color: var(--yfc-green);
}
.yfc-footer__contact {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-end;
flex: 0 0 auto;
text-align: right;
}
.yfc-footer__tel {
font-family: var(--yfc-font-en);
font-weight: 700;
font-size: 15px;
margin: 0;
}
.yfc-footer__tel a {
color: var(--yfc-green-deep);
}
.yfc-footer__hours {
font-size: 10px;
color: var(--yfc-gray-600);
margin: 0;
line-height: 1.4;
}
.yfc-footer__sns {
display: flex;
gap: 6px;
list-style: none;
margin: 2px 0 0;
padding: 0;
}
.yfc-footer__sns-link {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--yfc-gray-100);
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 700;
color: var(--yfc-gray-600);
}
.yfc-footer__sns-link.is-todo-link {
outline: 1px dashed var(--yfc-gray-300);
}
/* 共通：URL未確定のTODOリンク（span）。視覚デザインは通常のリンク/ボタンと同一に保ち、
クリックしても何も起きないことだけを示す最小限の差分（カーソルのみ）。 */
.is-todo-link {
cursor: default;
}
/* DEEP GREEN BAR: Legal links | Copyright を横方向に配置 */
.yfc-footer__bottom {
background: var(--yfc-green-deep);
color: rgba(255, 255, 255, 0.75);
padding-block: 10px;
font-size: 11px;
}
.yfc-footer__bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.yfc-footer__legal {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
}
.yfc-footer__legal a {
color: rgba(255, 255, 255, 0.75);
}
.yfc-footer__legal a:hover {
color: var(--yfc-white);
}
.yfc-footer__copyright {
margin: 0;
white-space: nowrap;
}
/* 汎用のTablet/Mobile共通調整（先に置く）。768–1023px専用ルールは、この直後に置く
より詳細な @media (min-width:768px) and (max-width:1023px) が後段で上書きする。 */
@media (max-width: 1023px) {
.yfc-footer__row {
padding-block: 16px;
gap: 16px;
}
.yfc-footer__contact {
align-items: flex-start;
text-align: left;
}
}
/* Tablet（768–1023px）専用: White rowを1段（flex-wrap:nowrap）で成立させる。
Logo/Nav/Contact/SNSを縮小しつつ内容は削除しない。お電話受付時間は折り返し可能にして
横幅ではなく縦方向へ収める（行のnowrapには影響しない）。
直前の汎用 @media (max-width:1023px) より後に置くことで、768–1023pxではこちらが
最終的に有効になる（gap/padding-block/contactの左右寄せがcascadeで上書きされないようにする）。 */
@media (min-width: 768px) and (max-width: 1023px) {
.yfc-footer .yfc-container {
padding-inline: 20px;
}
.yfc-footer__row {
flex-wrap: nowrap;
gap: 10px;
padding-block: 10px;
}
.yfc-footer__logo {
gap: 5px;
}
.yfc-footer__logo-mark {
font-size: 13px;
}
.yfc-footer__logo-ja {
font-size: 10px;
}
.yfc-footer__logo-en {
font-size: 7px;
}
.yfc-footer__nav {
min-width: 0;
}
.yfc-footer__nav ul {
gap: 4px 8px;
}
.yfc-footer__nav a {
font-size: 9.5px;
white-space: nowrap;
}
.yfc-footer__contact {
max-width: 150px;
flex-shrink: 0;
align-items: flex-end;
text-align: right;
}
.yfc-footer__tel {
font-size: 12px;
}
.yfc-footer__hours {
font-size: 8.5px;
white-space: normal; /* 横幅を増やさず縦に折り返す */
}
.yfc-footer__sns-link {
width: 20px;
height: 20px;
font-size: 7px;
}
}
@media (max-width: 767px) {
.yfc-footer__row {
flex-direction: column;
align-items: flex-start;
padding-block: 10px;
gap: 8px;
}
.yfc-footer__logo {
gap: 6px;
}
.yfc-footer__logo-mark {
font-size: 15px;
}
.yfc-footer__logo-ja {
font-size: 11px;
}
.yfc-footer__logo-en {
font-size: 8px;
}
.yfc-footer__nav {
width: 100%;
}
.yfc-footer__nav ul {
gap: 4px 12px;
}
.yfc-footer__nav a {
font-size: 11px;
}
.yfc-footer__contact {
align-items: flex-start;
text-align: left;
width: 100%;
gap: 3px;
}
.yfc-footer__tel {
font-size: 13px;
}
.yfc-footer__hours {
font-size: 9px;
line-height: 1.35;
}
.yfc-footer__sns-link {
width: 22px;
height: 22px;
font-size: 7px;
}
/* Mobile Masterでは複数リンクが横方向にwrapされる。縦1列には固定しない。 */
.yfc-footer__bottom-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.yfc-footer__legal a {
font-size: 10.5px;
}
.yfc-footer__copyright {
font-size: 10px;
}
/* 固定CTAバーにコンテンツが隠れないよう余白を確保（safe-area paddingは維持） */
.yfc-footer__bottom {
padding-bottom: calc(8px + var(--yfc-fixed-cta-h) + env(safe-area-inset-bottom, 0px));
padding-top: 8px;
}
}
/* --------------------------------------------------------------------------
18. Mobile Fixed CTA
Mobile（767px以下）のみ表示。safe-area対応、tap target最低44px。
-------------------------------------------------------------------------- */
.yfc-fixed-cta {
display: none;
}
@media (max-width: 767px) {
.yfc-fixed-cta {
display: grid;
grid-template-columns: repeat(3, 1fr);
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 900;
box-shadow: 0 -2px 10px rgba(14, 39, 33, 0.12);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.yfc-fixed-cta__item {
min-height: 56px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
font-size: 11px;
font-weight: 700;
color: var(--yfc-white);
}
.yfc-fixed-cta__item--yellow {
background: var(--yfc-yellow);
color: var(--yfc-green-deep);
}
.yfc-fixed-cta__item--green {
background: var(--yfc-green);
}
.yfc-fixed-cta__item--green:nth-of-type(3) {
background: var(--yfc-green-dark);
}
}
/* Fixed CTAの高さ分だけ、mainコンテンツ下部に余白を追加してコンテンツが隠れないようにする */
@media (max-width: 767px) {
.yfc-main {
padding-bottom: 0; /* Footerに直接余白を持たせているため、本体側は0のまま */
}
}
/* --------------------------------------------------------------------------
19. Accessibility / Reduced Motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.yfc-main *,
.yfc-header *,
.yfc-footer *,
.yfc-fixed-cta * {
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
20. V14.1.1 TOP text color hotfix（既存ルールは変更せず、TOPだけに追加）
見出し要素（h1 / h2）はテーマの見出し色が優先され、親の白（.yfc-hero__copy / .yfc-final-cta）を
継承せず暗く表示されるため、TOPの該当見出しだけ白を明示する。
- Hero：.yfc-hero__title はコートレンタルでも共用のため、front pageのbody class（.home）でscope。
- Final CTA：.yfc-final-cta はTOP（template-parts/front/final-cta.php）専用。
-------------------------------------------------------------------------- */
body.home .yfc-hero .yfc-hero__title {
color: var(--yfc-white);
}
.yfc-final-cta .yfc-final-cta__title {
color: var(--yfc-white);
}
/* --------------------------------------------------------------------------
21. V15.0.1 Routing / Navigation（既存ルールは変更せず追加のみ）
- MAIN SERVICES：各カードの「詳しく見る」（サービス詳細ページへのtext link。行動CTAボタンの下）
- Header / Mobile Menu：現在表示中のサービス詳細ページ（aria-current="page"）
既存のhover色（--yfc-green）を再利用した控えめな表示。Footerには適用しない。
-------------------------------------------------------------------------- */
.yfc-service-card .yfc-service-card__detail {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px; /* tap target */
margin-top: 4px;
font-size: 13px;
font-weight: 700;
color: var(--yfc-green-dark);
text-decoration: underline;
text-underline-offset: 3px;
}
.yfc-service-card .yfc-service-card__detail:hover {
color: var(--yfc-green);
}
/* `.yfc-main a { color: inherit }` が .yfc-btn--green の白文字より強く、MAIN SERVICESの緑ボタン（
）が
暗い文字になるため、カード内の緑ボタンだけ白文字を明示する（schoolのCTAがになったことに伴う対応）。 */
.yfc-service-card__body > .yfc-btn--green {
color: var(--yfc-white);
}
.yfc-header__nav a[aria-current="page"],
.yfc-mobile-menu nav a[aria-current="page"] {
color: var(--yfc-green);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
/* Header CTA文言「コート予約」（旧「予約する」より1文字長い）で、狭いTablet幅（768–859px）の
Headerが横にはみ出さないよう、この幅だけCTA内の装飾矢印（aria-hidden）を省略する。 */
@media (min-width: 768px) and (max-width: 859px) {
.yfc-header__cta > span[aria-hidden="true"] {
display: none;
}
}