/*
* style.scss — 岡川塾トップページ FLOCSS エントリ
* gulp でコンパイルし ../../assets/css/style.css に出力する。
* 各層の詳細は各フォルダの _index.scss を参照。
*/
/*
* foundation 層 — reset・base
*/
/*
* global 層 — 変数・関数・mixin を集約（@forward で他層へ公開）
*/
/*
* 変数定義ファイル
* ※ Figma デザイントークン（岡川塾コピー）より確定値を反映。
*
* 【変数化の基準】複数箇所で使い回す値だけを変数にする。
* 1箇所でしか使わない寸法はセクションの SCSS に直接数値で書き、
* Figma のノードIDをコメントで残す（変数名から値を探す手間をなくすため）。
*/
/*
* 関数定義ファイル
* 例: px→rem 変換などが必要になったらここに追加する。
*/
/*
* global 層 — 変数・関数・mixin を集約（@forward で他層へ公開）
*/
/*
* mixin 定義ファイル
*/
/*
* ホバー / アニメーション mixin（Figma「ホバー/アニメーションPC」より）
* 各コンポーネント実装時に @include して仕様に揃える。
* どのパーツにどれを使うかの対応:
* hover-opacity … バナー全般 / trial_banner / 岡川塾について / 授業風景 / YouTube / 追従・切替ボタン
* hover-card … 合格実績カード（ふわっと浮く）
* hover-fill … コース切替タブ（左から赤が満ちて文字反転）
* hover-news … ニュースカード（ボタン反転＋日付/タイトル opacity 0.7）※文字部分に個別付与
*/
/*
* reset — 最小限のリセット
* ※ Lightning 親テーマにも基本スタイルがあるため、
* トップページ（.okagawajuku-front）配下で必要な範囲に限定して当てる。
*/
.okagawajuku-front *,
.okagawajuku-front *::before,
.okagawajuku-front *::after {
box-sizing: border-box;
}
.okagawajuku-front ul,
.okagawajuku-front ol {
list-style: none;
margin: 0;
padding: 0;
}
.okagawajuku-front figure {
margin: 0;
}
.okagawajuku-front { /*
* 見出しの装飾リセット
* プラグイン lightning-g3-pro-unit の「見出しデザイン」機能が、
* `h2, .main-section .cart_totals h2, h2.main-section-title` という
* 裸の要素セレクタに対して ::before / ::after・背景・枠・余白を動的生成する
* （静的CSSには存在せず にインライン出力されるため grep では見つからない）。
* トップページは独自デザインのため、セクション側で毎回打ち消さずに済むよう一括で無効化する。
*
* ※ :where() は詳細度 0。そのため
* このリセット = (0,1,0) → プラグインの h2 (0,0,1) に勝つ
* BEM の見出しクラス = (0,1,0) → 同値だが project 層が後勝ちするので上書きできる
* :is() だと (0,1,1) になり BEM クラスが負けてしまうので使わない。
*/
}
.okagawajuku-front :where(h1,
h2,
h3,
h4,
h5,
h6) {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
color: inherit;
font-family: "Noto Sans JP", sans-serif;
margin: 0;
padding: 0;
}
.okagawajuku-front :where(h1,
h2,
h3,
h4,
h5,
h6)::before,
.okagawajuku-front :where(h1,
h2,
h3,
h4,
h5,
h6)::after {
content: none;
}
.okagawajuku-front { /*
* フォーム要素のフォント継承
* button / input 等は UA スタイルシートで font-family が継承されず、
* ブラウザ既定（Chrome は Arial）のまま残る。`.okagawajuku-front` の
* Noto Sans JP がボタンの壁で止まるため、ここで継承させる。
* （実害が出ていたのは .p-courses__tab のラベル。2026-07-30 発覚）
*
* ⚠️ 裸の `button {}` にすると詳細度 (0,1,1) が BEM クラス (0,1,0) に勝ち、
* コンポーネント側から font-family を変えられなくなる。
* 見出しの装飾リセットと同じく :where() で詳細度を上げずに当てる。
*/
}
.okagawajuku-front :where(button,
input,
select,
textarea) {
font-family: inherit;
}
.okagawajuku-front { /*
* 見出しフォントの確定指定
* 上の :where() は詳細度 (0,1,0) のため、VK Font Selector が Kosugi を
* !important 付き、または同等以上の詳細度で出力すると負けて Kosugi のままになる。
* font-family だけは要素セレクタ (0,1,1) ＋ !important で確実に上書きする。
* ※ 装飾リセットと分けているのは、BEM クラス側からの上書き余地を残すため。
*/
}
.okagawajuku-front h1,
.okagawajuku-front h2,
.okagawajuku-front h3,
.okagawajuku-front h4,
.okagawajuku-front h5,
.okagawajuku-front h6 {
font-family: "Noto Sans JP", sans-serif !important;
}
/*
* base — トップページ共通の下地スタイル
* Lightning 全体に影響させないよう .okagawajuku-front 配下に限定する。
*/
.okagawajuku-front {
color: #000000;
font-family: "Noto Sans JP", sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.6;
}
.okagawajuku-front img {
display: block;
height: auto;
width: 100%;
}
.okagawajuku-front a {
color: inherit;
text-decoration: none;
}
/*
* layout 層 — l-inner などの土台レイアウト
*/
/*
* l-inner — コンテンツ最大幅の内側コンテナ（SPファースト）
* Figma「デザイン詳細」確定: PC コンテンツ幅 1080px（1440 中央）/ SP 左右 20px。
* max-width = 1080 + 左右余白。1080〜1440 の間は左右余白で内容が端に付かないようにする。
*/
.l-inner {
margin-inline: auto;
padding-inline: 20px;
width: 100%;
}
/*
* l-section — 各セクションの上下余白の土台（SPファースト）
* Figma「デザイン詳細」確定: 上下余白 基本 SP 48px → PC 48px。
* ※ バナー上下など個別調整はセクション側で上書きする。
*/
.l-section {
padding-block: 48px;
}
/*
* component 層 — 再利用する小さな UI 部品（c-*）
* 例: c-button, c-heading, c-news-list など。着工時に追加する。
*/
/*
* c-button — 赤いピル型ボタン（ラベル ＋ 右向き矢印）
* Figma: node 1:4519 SP / 1:4076 PC（「入塾の流れを見る」）
*
* courses の「コース一覧を見る」・results の「合格実績を見る」・about の2つと
* まったく同じ仕様（#d30d0d / padding 16-32 / radius 999 / gap 16）のため component 層に置く。
*
* 使い方:
*
* ラベル
*
*
*
* ※ p-courses__btn / p-results__btn が同じ内容を各セクションに持っている。
* このコンポーネントへ寄せる移行は別途行う。
*/
.c-button {
--btn-color: #d30d0d;
align-items: center;
background-color: var(--btn-color);
border: 1px solid var(--btn-color);
border-radius: 999px;
box-shadow: 0 0 4px rgba(44, 44, 44, 0.25);
display: inline-flex;
font-size: 16px;
font-weight: 600;
gap: 16px;
justify-content: center;
line-height: 1;
max-width: 100%;
padding: 24px 32px;
text-decoration: none;
transition: background-color 0.28s ease, color 0.28s ease;
}
.c-button .c-button__arrow {
transition: background-color 0.28s ease;
}
.c-button--trial {
--btn-color: #f38613;
}
.c-button--line {
--btn-color: #43af00;
}
.okagawajuku-front .c-button {
color: #ffffff;
}
.c-button__arrow {
background-color: #ffffff;
clip-path: polygon(0 0, 100% 50%, 0 100%);
display: block;
flex-shrink: 0;
height: 16px;
width: 10px;
}
/*
* c-section-title — セクション見出し（英字ラベル + 日本語見出し）
* Figma: node 1:3680（[Courses] / コース）
*
* 「[Courses]」のような英字ラベルと日本語見出しの2段組みは Courses 以外の
* セクションでも同じ形で登場するため、project 層ではなく component 層に置く。
* 使い方:
*
* [Courses]
* コース
*
*/
.c-section-title {
align-items: center;
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
text-align: center;
}
.c-section-title__en {
color: #d30d0d;
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
}
.c-section-title__ja {
color: #000000;
font-family: "Noto Sans JP", sans-serif;
font-size: 24px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
}
/*
* c-post-list — 日付・カテゴリタグ・タイトルの投稿リスト
* news（お知らせ/おかがわ便り/コラム）と message（塾長の想い）で共用する。
*
* 1行 = 日付・タグ・タイトルの3要素。PC/SP で並びが変わるため grid で組み替える。
* SP … 「日付＋タグ」を1段目、タイトルを2段目
* PC … 日付を左に2段ぶち抜き、右上にタグ・右下にタイトル
* リストの幅は使う側（セクション）で決めるので、ここは width:100% のまま。
* タグ色は用途別の modifier（--info / --newsletter / --column / --message）で切り替える。
*/
.c-post-list {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.c-post-list__item {
border-bottom: 1px solid #e0e0e0;
margin-block: 0;
}
.c-post-list__link {
display: grid;
grid-template-areas: "date tag" "title title";
grid-template-columns: 96px 1fr;
-moz-column-gap: 4px;
align-items: center;
column-gap: 4px;
padding-block: 8px;
row-gap: 8px;
text-decoration: none;
transition: opacity 0.28s ease;
}
.c-post-list__link:hover {
opacity: 0.7;
}
.c-post-list__date {
font-size: 12px;
font-weight: 500;
grid-area: date;
line-height: normal;
white-space: nowrap;
}
.c-post-list__tag {
border-radius: 2px;
color: #ffffff;
display: block;
font-size: 12px;
font-weight: 500;
grid-area: tag;
justify-self: start;
line-height: 1.4;
padding-block: 1px;
text-align: center;
width: 82px;
}
.c-post-list__tag--info {
background-color: #1e73be;
width: 64px;
}
.c-post-list__tag--newsletter {
background-color: #d30d0d;
}
.c-post-list__tag--column {
background-color: #777777;
}
.c-post-list__tag--message {
background-color: #43af00;
}
.c-post-list__title {
font-size: 14px;
font-weight: 500;
grid-area: title;
line-height: 1.6;
}
.okagawajuku-front .c-post-list__date,
.okagawajuku-front .c-post-list__title {
color: #000000;
}
/*
* project 層 — ページ固有のセクション（p-*）
* front-page.php の各セクションに1:1で対応させる。
* 着工時にカンプ確定順で追加していく。
*/
/*
* p-mv — メインビュアル / バナースライダー
* Figma: SP node 1:4290 / PC node 1:3811 / PC ナビ node 1:3813
* - 背景: 白（#fff）＋ ::before でレッドティントの斜め形状
* SP 擬似背景 node 1:4291（390×240）/ PC 擬似背景 node 6:322（1441×341）
* - SP: 左右10px / 上下16px、バナー 370×208 相当（16:9）
* - PC: 上下40px、バナー max 1000px、左右矢印 46px（gap 24px）
* - 矢印ホバー: 通常=メインレッド+白矢印 / hover=白+枠+赤矢印
*/
.p-mv {
background-color: #ffffff;
padding-block: 16px;
position: relative;
}
.p-mv::before {
background-color: #fff0f0;
clip-path: polygon(100% 0%, 100% 70.674%, 0% 100%, 0% 0%);
content: "";
height: 240px;
left: 50%;
pointer-events: none;
position: absolute;
top: 0;
transform: translateX(-50%);
width: 100vw;
}
.p-mv__inner {
padding-inline: 10px;
position: relative;
z-index: 1;
}
.p-mv__slider {
margin-inline: auto;
max-width: 1000px;
overflow: hidden;
position: relative;
width: 100%;
z-index: 1;
}
.p-mv__slide {
height: auto;
width: 100%;
}
.p-mv__link {
display: block;
transition: opacity 0.28s ease;
}
.p-mv__link:hover {
opacity: 0.8;
}
.p-mv__picture {
aspect-ratio: 16 / 9;
display: block;
overflow: hidden;
}
.okagawajuku-front .p-mv__picture .p-mv__img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-mv__nav {
display: none;
}
.p-mv__nav-icon {
background-color: #ffffff;
clip-path: polygon(0 0, 100% 50%, 0 100%);
display: block;
height: 13px;
transform: translateX(2px);
transition: background-color 0.28s ease;
width: 8px;
}
.p-mv__nav--prev .p-mv__nav-icon {
transform: scaleX(-1) translateX(2px);
}
.p-mv__nav:hover .p-mv__nav-icon {
background-color: #d30d0d;
}
.p-mv__nav--prev::after,
.p-mv__nav--next::after {
content: none;
}
/*
* p-greeting — Greeting（岡川塾イントロ）
* Figma: SP node 1:4293 / PC node 1:3775
* - 背景: 白 + ::before で下部レッドティント
* - SP: カード縦積み（370px）/ PC: カード横並び（1080px）
* ※ 右端の追従 CTA は全ページ共通パーツのため p-floating-cta に分離（node 1:3788）
*/
.p-greeting {
background-color: #ffffff;
letter-spacing: 0;
position: relative;
}
.p-greeting.l-section {
padding-block: 32px 46px;
}
.p-greeting::before {
background-color: #fff0f0;
bottom: 0;
content: "";
height: 159px;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
z-index: 0;
}
.p-greeting__inner.l-inner {
align-items: center;
display: flex;
flex-direction: column;
gap: 21px;
padding-inline: 10px;
position: relative;
z-index: 1;
}
/*
* キャッチコピー（Figma SP node 1:4295 / PC node 1:3777）
* - Lightning の h2 既定サイズを上書きするためクラスで明示指定する。
* ※ 擬似要素・背景などの装飾は foundation/_reset.scss で一括無効化済み。
* - Figma は白スペース nowrap の 1 行。SP は 10 字 ×36px = 360px で、
* inner の内寸 370px（390 - 10×2）にギリギリ収まる設計。
* そのため 390px 未満の端末でははみ出すので、min() で文字サイズを頭打ちにして必ず 1 行を保つ。
*/
.p-greeting__catch {
color: #d30d0d;
font-size: min(36px, (100vw - 20px) / 10);
font-weight: 600;
line-height: 1.1;
margin: 0;
text-align: center;
white-space: nowrap;
}
.p-greeting__card {
border-radius: 12px;
max-width: 600px;
overflow: hidden;
width: 100%;
}
.p-greeting__card-main {
background-color: #ffffff;
border: 1px solid #b00a0a;
border-bottom: none;
border-radius: 12px 12px 0 0;
}
.p-greeting__card-head {
align-items: center;
background-color: #b00a0a;
border-radius: 12px 12px 0 0;
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
}
.p-greeting__card-sub {
color: #ffffff;
font-size: 18px;
font-weight: 600;
line-height: 1.6;
margin: 0;
}
.p-greeting__card-name {
color: #ffffff;
font-size: 48px;
font-weight: 600;
line-height: 1;
margin: 0;
}
.p-greeting__card-body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.p-greeting__lead {
color: #000000;
font-size: 16px;
font-weight: 600;
line-height: 1.6;
margin: 0;
}
.p-greeting__text {
color: #000000;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
margin: 0;
}
.p-greeting__figure {
line-height: 0;
margin: 0;
}
.okagawajuku-front .p-greeting__figure .p-greeting__img {
aspect-ratio: 416 / 278;
display: block;
height: auto;
width: 100%;
-o-object-fit: cover;
border-radius: 0 0 12px 12px;
object-fit: cover;
}
/*
* p-courses — Courses（コース）
* Figma: SP node 1:4306 / PC node 1:3678（タブ列 1:3685 / カード 1:3705）
* 背景 grid（image 48）: SP node 1:4307 / PC node 1:3679
*
* - タブ（小学生/中学生/…）はタクソノミー「コースタブ」から出力するため件数可変。
* SP/md 2列・lg 3列のグリッド + max-width で、件数が増減しても崩れないようにする。
* - カード内の画像は管理画面から差し替えるため、アスペクト比は固定せず
* 画像本来の比率（width/height 属性）に従わせる。
*/
.p-courses {
background-color: #ffffff;
background-image: url("../img/courses-bg.webp");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
border-top: 2px solid #fff0f0;
letter-spacing: 0;
padding-block-end: 0;
padding-block-start: 54px;
position: relative;
}
.p-courses__inner.l-inner {
align-items: center;
display: flex;
flex-direction: column;
padding-inline: 10px;
}
/* -------------------------------------------------------------------------
* タブ（Figma node 1:3685）
* ---------------------------------------------------------------------- */
/*
* SP/md: 2列 / lg: 3列（Figma node 1:4314 SP / 1:3686 PC）
* SP: max 310px = 147×2 + gap 16
* md: max 486px = 231×2 + gap 24
* lg: max 741px = 231×3 + gap 24×2
*/
.p-courses__tablist {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, 1fr);
margin-block-start: 30px;
margin-inline: auto;
max-width: 310px;
width: 100%;
}
.p-courses__tab {
align-items: center;
background-color: #ffffff;
border: 1px solid #d30d0d;
border-radius: 4px;
color: #000000;
cursor: pointer;
display: flex;
font-size: 20px;
font-weight: 500;
gap: 16px;
justify-content: center;
line-height: 1;
min-width: 0;
padding: 9px;
transition: background-color 0.28s ease, color 0.28s ease;
width: 100%;
}
.p-courses__tab[aria-selected=true] {
background-color: #d30d0d;
color: #ffffff;
}
.p-courses__tab-arrow {
background-color: #000000;
clip-path: polygon(0 0, 100% 50%, 0 100%);
display: block;
flex-shrink: 0;
height: 13px;
transition: background-color 0.28s ease;
width: 8px;
}
.p-courses__tab[aria-selected=true] .p-courses__tab-arrow {
background-color: #ffffff;
}
/* -------------------------------------------------------------------------
* パネル / カード（Figma node 1:3705）
* ---------------------------------------------------------------------- */
.p-courses__panel {
display: flex;
flex-direction: column;
gap: 20px;
margin-block-start: 30px;
max-width: 600px;
width: 100%;
}
.p-courses__panel[hidden] {
display: none;
}
.p-courses__card {
background-color: #ffffff;
border: 1px solid #777777;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 16px;
padding: 25px 9px 23px;
}
.p-courses__card-body {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 17px;
}
.p-courses__card-title {
align-items: center;
color: #000000;
display: flex;
font-size: 18px;
font-weight: 500;
gap: 4px;
line-height: normal;
margin: 0;
}
.p-courses__card-title::before {
background-color: #d30d0d;
border-radius: 50%;
content: "";
flex-shrink: 0;
height: 16px;
width: 16px;
}
.p-courses__card-text {
color: #000000;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
margin: 0;
}
.p-courses__card-media {
display: flex;
flex-direction: column;
gap: 16px;
}
/*
* 画像のみのカード（Figma node 1:1083「その他」タブ）
* 見出し・説明を持たず、画像を左右2カラムで並べる。左右で幅が違う（550 / 450）ため
* CSS の columns（必ず等幅になる）は使わず、PHP 側でカラムを分けて flex で並べる。
*
* PC と SP で並び順が違う（例: YouTube は PC で左カラム2番目 / SP では最後）ので、
* DOM は SP の順（＝管理画面のスロット順）を保ち、
* SP … カラムの div を display:contents で無効化し、order でスロット順に戻す
* PC … カラムの div を flex の子として左右に並べる
* という組み立てにしている。
*/
.p-courses__card--media-only .p-courses__card-media {
gap: 6px;
}
.p-courses__card-col {
display: contents;
}
/*
* SP の並び順を管理画面のスロット順に戻す。
* PC のカラム分けで DOM 順が入れ替わるため、order で並べ直す必要がある。
*/
.p-courses__card--media-only .p-courses__card-figure--o1 {
order: 1;
}
.p-courses__card--media-only .p-courses__card-figure--o2 {
order: 2;
}
.p-courses__card--media-only .p-courses__card-figure--o3 {
order: 3;
}
.p-courses__card--media-only .p-courses__card-figure--o4 {
order: 4;
}
.p-courses__card--media-only .p-courses__card-figure--o5 {
order: 5;
}
.p-courses__card--media-only .p-courses__card-figure--o6 {
order: 6;
}
.p-courses__card--media-only .p-courses__card-figure--o7 {
order: 7;
}
.p-courses__card--media-only .p-courses__card-figure--o1 {
margin-bottom: 9px;
}
.p-courses__card-figure {
line-height: 0;
margin: 0;
}
.p-courses__card-link {
display: block;
transition: opacity 0.28s ease;
}
.p-courses__card-link:hover {
opacity: 0.8;
}
/*
* 管理画面から差し替える画像のため、アスペクト比は固定しない。
* .okagawajuku-front img の height:auto を明示的に継承させ、
* width/height 属性から算出される本来の比率で表示する。
*/
.okagawajuku-front .p-courses__card-figure .p-courses__card-img {
display: block;
height: auto;
width: 100%;
}
/* -------------------------------------------------------------------------
* ボタン
* ---------------------------------------------------------------------- */
.p-courses__btn {
font-size: 16px;
gap: 15px;
padding: 8px 16px;
}
.p-courses__more {
font-size: 18px;
margin-block-start: 30px;
}
/*
* p-strength — 自習室バナー ＋ サムネイルスライダー
* Figma: SP node 1:4362 / PC node 1:3736
* - 上部: 自習室バナー（管理画面「バナー」の表示位置 = 自習室バナー）
* - 下部: サムネイルのセンタースライダー（表示位置 = サムネイルスライダー）
* SP は全スライド 360×360、PC のみ中央を 300 → 360 に拡大する
*/
.p-strength {
background-color: #ffffff;
background-image: url("../img/courses-bg.webp");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
padding-block-end: 48px;
padding-block-start: 30px;
}
.p-strength__banner {
margin-inline: auto;
width: 100%;
}
.p-strength__banner-link {
display: block;
transition: opacity 0.28s ease;
}
.p-strength__banner-link:hover {
opacity: 0.8;
}
.okagawajuku-front .p-strength__banner-img {
display: block;
height: auto;
width: 100%;
}
.p-strength__slider {
margin-block-start: 30px;
overflow: visible;
}
.p-strength__slider:first-child {
margin-block-start: 0;
}
.p-strength__wrapper {
align-items: center;
}
.p-strength__slide {
height: auto; /*
* slidesPerView: "auto" のため幅は CSS 側が決める（SP 360 / PC 300）。
* SP の左右余白はセクション標準の 20px ではなく 15px（Figma node 1:664 は x=15 / w=360。
* 同じ SP でも自習室バナー node 1:663 は x=20 / w=350 で別値）。
* min() は 390px 未満の端末で 360px がはみ出さないようにする保険。
*/
width: min(360px, 100vw - 30px);
}
.p-strength__link {
display: block;
transition: opacity 0.28s ease;
}
.p-strength__link:hover {
opacity: 0.8;
}
.okagawajuku-front .p-strength__img {
display: block;
height: auto;
width: 100%;
}
.p-strength__controls {
align-items: center;
display: flex;
flex-direction: column;
gap: 19px;
margin-block-start: 30px;
}
.p-strength__pagination {
display: flex;
gap: 8px;
justify-content: center; /*
* Swiper 既定のドット左右マージン（4px）を消す。
* .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet は
* クラス3個で詳細度が高く、こちらの margin では打ち消せないため、
* Swiper 側が margin の値に使っているカスタムプロパティを 0 で上書きする。
* ドット同士の間隔は下の gap で作る。
*/
--swiper-pagination-bullet-horizontal-gap: 0;
}
.p-strength__pagination .swiper-pagination-bullet {
background-color: #e0e0e0;
height: 10px;
opacity: 1;
transition: background-color 0.28s ease;
width: 10px;
}
.p-strength__pagination .swiper-pagination-bullet-active {
background-color: #d30d0d;
}
.p-strength__nav {
display: flex;
gap: 24px;
justify-content: center;
}
.p-strength__nav-btn {
align-items: center;
background-color: #777777;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 46px;
justify-content: center;
padding: 0;
transition: background-color 0.28s ease;
width: 46px;
}
.p-strength__nav-btn:hover {
background-color: #d30d0d;
}
.p-strength__nav-btn.swiper-button-disabled {
cursor: not-allowed;
opacity: 0.35;
pointer-events: none;
}
.p-strength__nav-icon {
background-color: #ffffff;
clip-path: polygon(0 0, 100% 50%, 0 100%);
display: block;
height: 13px;
transform: translateX(2px);
width: 8px;
}
.p-strength__nav-btn--prev .p-strength__nav-icon {
transform: scaleX(-1) translateX(2px);
}
/*
* p-results — 合格実績
* Figma: SP node 1:4402 / PC node 1:4101
*
* - 背景は桜のイラストを全幅に敷く（node 1:4102）。装飾のため CSS 背景で扱い、
* 管理画面の対象外にする（差し替えるとレイアウトが崩れるため）。
* - カードは「高校入試」「北中入試」の2グループ。各グループとも
* SP はスワイプスクロール（Swiper）、PC は3枚横並びで Swiper を無効化する。
* - 表示は新着3件のみ（PHP 側で取得数を絞る）。4件目以降は
* 「合格実績を見る」ボタンの先の一覧ページで見せる。
*/
.p-results {
background-image: url("../img/results-bg-sakura.webp");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
padding-block-start: 56px;
position: relative;
}
.p-results__inner.l-inner {
align-items: center;
display: flex;
flex-direction: column;
}
/* -------------------------------------------------------------------------
* 見出し下のイラスト（node 1:4109 — 370×136。SP/PC 同寸）
* ---------------------------------------------------------------------- */
/*
* SP は inner の左右余白（20px）より 10px ずつ広い 370px。
* 親が align-items: center の flex なので、はみ出しは左右均等になる。
* 100vw で頭打ちにして 370px 未満の端末で横スクロールが出ないようにする。
* .okagawajuku-front figure { margin: 0 } より詳細度を上げて margin-block-start を効かせる。
*/
.okagawajuku-front .p-results__hero {
margin: 0;
margin-block-start: 30px;
width: min(370px, 100vw);
}
.okagawajuku-front .p-results__hero-img {
display: block;
height: auto;
width: 100%;
}
/* -------------------------------------------------------------------------
* グループ（高校入試 / 北中入試）
* ---------------------------------------------------------------------- */
.p-results__group {
align-items: center;
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
.p-results__group-title {
align-items: center;
border-bottom: 1px solid #d30d0d;
color: #000000;
display: flex;
font-size: 19px;
font-weight: 600;
gap: 4px;
justify-content: center;
line-height: normal;
margin: 0;
margin-block-start: 37px;
}
.p-results__group-title::before {
background-color: #d30d0d;
border-radius: 50%;
content: "";
flex-shrink: 0;
height: 16px;
width: 16px;
}
/* -------------------------------------------------------------------------
* スライダー（SP のみ有効。PC は JS 側で Swiper を無効化して3枚横並び）
* ---------------------------------------------------------------------- */
.p-results__slider {
max-width: 100%;
overflow: visible;
width: 255px;
}
/*
* の既定スタイルだけ打ち消す。
* カード同士の間隔は CSS の gap ではなく Swiper の spaceBetween が付ける
* インライン margin で作る（slidesPerView:"auto" の位置計算に gap が反映されず、
* 併用するとスライド位置がずれるため）。
*/
.p-results__list {
list-style: none;
margin: 0;
padding: 0;
}
.p-results__item {
flex-shrink: 0;
height: auto;
margin-block: 0;
width: 255px; /*
* PC は3枚を並べきるだけでスクロールしないため、末尾の余白は不要。
* この margin-right は Swiper が spaceBetween から付けるインラインスタイルなので、
* 打ち消すには !important しか手段がない（詳細度では勝てない）。
* SP はスワイプで最後のカードを中央に寄せる際にこの余白を使うので残す。
*/
}
.p-results__card {
align-items: center;
background-color: #ffffff;
border: 1px solid #d30d0d;
border-radius: 24px;
display: flex;
flex-direction: column;
gap: 19px;
padding: 23px;
text-decoration: none;
transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.26s ease;
}
.p-results__card:hover {
box-shadow: 0 14px 32px rgba(20, 30, 50, 0.13);
transform: translateY(-4px) scale(1.025);
}
.p-results__year {
align-items: center;
display: flex;
font-size: 18px;
font-weight: 500;
gap: 4px;
line-height: normal;
margin: 0;
}
.p-results__year::before {
background-color: #d30d0d;
border-radius: 50%;
content: "";
flex-shrink: 0;
height: 16px;
width: 16px;
}
.p-results__card-title {
font-size: 16px;
font-weight: 500;
line-height: normal;
margin: 0;
text-align: center;
}
.okagawajuku-front .p-results__year,
.okagawajuku-front .p-results__card-title {
color: #000000;
}
/*
* 手書きの合格体験記（node 1:4427 SP / 1:4126 PC）。
* 管理画面から差し替えるため縦横比はまちまち。カンプはマスクで切り抜いているので、
* 実装では枠の比率を固定して object-fit で中央を切り出す。
*/
.p-results__figure {
line-height: 0;
margin: 0;
width: 100%;
}
.okagawajuku-front .p-results__img {
aspect-ratio: 207/145;
display: block;
height: auto;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* -------------------------------------------------------------------------
* ページネーション（node 1:4450 — SP のみ）
* ---------------------------------------------------------------------- */
.p-results__pagination {
display: flex;
gap: 8px;
justify-content: center;
--swiper-pagination-bullet-horizontal-gap: 0;
}
.p-results__pagination .swiper-pagination-bullet {
background-color: #777777;
height: 10px;
opacity: 1;
transition: background-color 0.28s ease;
width: 10px;
}
.p-results__pagination .swiper-pagination-bullet-active {
background-color: #d30d0d;
}
/* -------------------------------------------------------------------------
* 「合格実績を見る」（node 1:4494 SP / 1:4185 PC）
* ---------------------------------------------------------------------- */
.p-results__more {
font-size: 18px;
margin-block-start: 30px;
max-width: 100%;
}
/*
* p-trial-banner — 合格実績バナー（合格実績セクションの下）
* Figma: SP node 1:4400 / PC node 1:4052
*
* 画像リンク1枚だけのセクション。表示位置 = バナーCPT「trial」。
* PC / SP は Figma 上で同一画像だったため、実際は PC 用1枚で足りる。
* それでも を残しているのは、先方が SP 用を別途登録したときに
* そのまま出し分けが効くようにしておくため。
*/
.p-trial-banner {
padding-block: 24px;
}
/*
* バナー幅はコンテンツ幅（1080px）ではなく 660px（node 1:4053）。
* .l-inner と詳細度を同じにすると読み込み順頼みになるため、
* クラス2つ（0,2,0）にして確実に上書きする。
*/
.p-trial-banner__inner.l-inner {
max-width: 700px;
}
.p-trial-banner__link {
display: block;
transition: opacity 0.28s ease;
}
.p-trial-banner__link:hover {
opacity: 0.8;
}
/*
* 管理画面から差し替える画像のため、アスペクト比は固定しない。
* .okagawajuku-front img の height:auto を明示的に継承させ、
* width/height 属性から算出される本来の比率で表示する。
*/
.okagawajuku-front .p-trial-banner__img {
display: block;
height: auto;
width: 100%;
}
/*
* p-about — 岡川塾について
* Figma: SP node 1:4497 / PC node 1:4054
*
* - セクション全体が角丸のピンクパネル。左右に余白を空けて全幅にはしない。
* 実測: SP 370px（左右10px）/ PC 1280px（左右80px）、背景 #fff0f0、角丸 SP 6px / PC 50px。
* - 中身は「入塾の流れ」「校舎」の2カード。SP は縦積み、PC は横並び。
* - 下部の「よくある質問」バナーは管理画面（バナー）から差し替える。
* - ボタンは courses / results と同一仕様のため component の c-button を使う。
*/
/*
* ピンクパネル本体。section 自体を左右 10px（PC は最大 1280px）に絞ることで、
* 背景が画面幅いっぱいに広がらないようにしている。
* 下余白は l-section の 48px をそのまま使い、上だけ上書きする。
*/
.p-about {
background-color: #fff0f0;
border-radius: 6px;
margin-inline: 10px;
padding-block-start: 56px;
}
/*
* パネル内側の余白。l-inner の既定（SP 20px / PC 40px + 1080 キャップ）ではなく、
* パネル幅から逆算した値を使う（SP 370-340=30 / PC 1280-1080=200 の半分ずつ）。
*/
.p-about__inner.l-inner {
align-items: center;
display: flex;
flex-direction: column;
padding-inline: 15px;
}
/* -------------------------------------------------------------------------
* カード（node 1:4509 SP / 1:4066 PC）
* ---------------------------------------------------------------------- */
.p-about__cards {
display: flex;
flex-direction: column;
gap: 20px;
margin-block-start: 32px;
width: 100%; /*
* PC はグリッドにする。各カードを subgrid にして
* 「見出し / 写真 / 本文 / ボタン」の 4 行をカード間で共有させるため
* （カードごとの flex では行の高さを共有できず、見出しが 1 行のカードと
* 2 行以上のカードが並ぶと写真から下の位置がずれる）。
*/
}
.p-about__card {
align-items: flex-start;
background-color: #ffffff;
border: 1px solid #777777;
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 16px;
margin-inline: auto;
max-width: 600px;
padding: 26px 23px 24px;
}
.p-about__card { /*
* ボタンだけカード内で中央寄せ（node 1:4518 / 1:4075 は items-center）。
* c-button 側ではなくここで指定するのは、他セクションで左寄せに使う余地を残すため。
*/
}
.p-about__card > .c-button {
align-self: center;
margin-top: auto;
}
/*
* カード内の各要素を行に固定する
*
* 行番号を明示するのは、写真やボタンが無いカード（管理画面で空欄にできる）があっても
* 後続の要素が繰り上がらないようにするため。これで「写真だけ無いカード」が混ざっても
* 本文とボタンの位置は他のカードと揃ったままになる。
*/
/*
* PC: 見出しの行数が違ってもカード間で写真・本文・ボタンの位置を揃える
*
* カードはそれぞれ独立した flex コンテナなので、見出しが 1 行のカードと 2 行以上の
* カードが並ぶと、その下の要素の位置がカードごとにずれてしまう。
* そこで各カードを subgrid にして「見出し / 写真 / 本文 / ボタン」の 4 行を親
* （.p-about__cards）と共有させる。行の高さが全カード共通になるため、いちばん行数の
* 多い見出しに合わせて他のカードの写真開始位置も揃う。
*
* 子には行番号を明示的に割り当てている。写真やボタンが無いカード（管理画面で空欄に
* できる）があっても、後続の要素が繰り上がって位置がずれないようにするため。
*
* subgrid 非対応ブラウザでは上の flex がそのまま効き、従来どおりの見た目になる。
*/
.p-about__card-title {
align-items: center;
color: #000000;
display: flex;
font-size: 18px;
font-weight: 500;
gap: 4px;
justify-content: center;
line-height: normal;
margin: 0;
width: 100%;
}
.p-about__card-title::before {
background-color: #d30d0d;
border-radius: 50%;
content: "";
flex-shrink: 0;
height: 16px;
width: 16px;
}
.p-about__card-figure {
line-height: 0;
margin: 0;
width: 100%;
}
/*
* カンプはマスクで 292×167 に切り抜いている。写真は差し替えない前提だが、
* カード幅が可変なので比率だけ固定して中央を切り出す。
*/
.okagawajuku-front .p-about__card-img {
aspect-ratio: 292/167;
display: block;
height: auto;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* -------------------------------------------------------------------------
* 校舎の3枚コラージュ（node 1:4085 — 左1枚 + 右上下2枚。すき間なし）
* ---------------------------------------------------------------------- */
.p-about__gallery {
aspect-ratio: 292/167;
display: grid;
grid-template-columns: 170fr 122fr;
grid-template-rows: 117fr 50fr;
width: 100%;
}
.p-about__gallery-item {
line-height: 0;
margin: 0;
overflow: hidden;
}
.p-about__gallery-item--main {
grid-row: 1/3;
}
.okagawajuku-front .p-about__gallery-img {
display: block;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* -------------------------------------------------------------------------
* 本文
* ---------------------------------------------------------------------- */
.p-about__card-body {
color: #000000;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
}
.p-about__card-body .p-about__card-text {
line-height: 1.6;
margin: 0;
}
.p-about__schools {
list-style: none;
margin: 0;
padding: 0;
}
.p-about__schools > li {
margin-block: 0;
}
.p-about__schools > li::before {
content: "・";
}
/* -------------------------------------------------------------------------
* よくある質問バナー（node 1:4543 SP 350×70 / 1:4100 PC 660×132）
* ---------------------------------------------------------------------- */
.p-about__banner {
margin-block-start: 32px;
width: 100%;
}
.p-about__banner-link {
display: block;
transition: opacity 0.28s ease;
}
.p-about__banner-link:hover {
opacity: 0.8;
}
.okagawajuku-front .p-about__banner-img {
display: block;
height: auto;
width: 100%;
}
/*
* p-classroom — 授業風景
* Figma: SP node 1:4870 / PC node 1:3644
*
* - 既存カテゴリ「授業風景」の新着3件。SP はスワイプ、PC は3枚横並び。
* - 下部にだけピンクの帯が敷かれる（node 1:4871 / 1:3645）。
* SP・PC とも「下端から 349px」で一致するため、擬似要素を下寄せで置く。
* - ボタンは c-button を使う。
*/
.p-classroom {
overflow: hidden;
padding-block-start: 56px;
position: relative;
}
.p-classroom::before {
background-color: #fff0f0;
bottom: 0;
content: "";
height: 349px;
inset-inline: 0;
position: absolute;
}
.p-classroom__inner.l-inner {
align-items: center;
display: flex;
flex-direction: column;
gap: 30px;
position: relative;
z-index: 1;
}
/* -------------------------------------------------------------------------
* スライダー（SP のみスワイプ。PC は3枚横並び）
* ---------------------------------------------------------------------- */
/*
* カード幅はコンテナ任せにして固定値を持たない。
* SP … l-inner の内側（390 - 20×2 = 350px）がそのままカード幅になる
* PC … Swiper が slidesPerView:3 と spaceBetween:30 から (1080-60)/3 = 340px を算出する
* どちらもカンプの実寸と一致するため、px を書く必要がない。
* 両隣をのぞかせないデザインなので overflow も Swiper 既定（hidden）のままでよい。
*/
.p-classroom__slider {
max-width: 350px;
overflow-x: clip;
overflow-y: visible;
width: 100%;
}
/*
* の既定スタイルだけ打ち消す。
* カード同士の間隔は CSS の gap ではなく Swiper の spaceBetween が付ける
* インライン margin で作る（slidesPerView:"auto" の位置計算に gap が反映されないため）。
*/
.p-classroom__list {
align-items: stretch;
list-style: none;
margin: 0;
padding: 0;
}
.p-classroom__item {
height: auto;
margin-block: 0;
}
/* -------------------------------------------------------------------------
* カード（node 1:4877 SP / 1:3651 PC）
* ---------------------------------------------------------------------- */
.p-classroom__card {
align-items: center;
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 0 4px rgba(44, 44, 44, 0.25);
display: flex;
flex-direction: column;
gap: 18px;
height: 100%;
overflow: hidden;
padding-block-end: 60px;
text-decoration: none;
transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.26s ease;
}
.p-classroom__card:hover {
box-shadow: 0 14px 32px rgba(20, 30, 50, 0.13);
transform: translateY(-4px) scale(1.025);
}
.p-classroom__figure {
line-height: 0;
margin: 0;
width: 100%;
}
.okagawajuku-front .p-classroom__img {
aspect-ratio: 340/191;
display: block;
height: auto;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-classroom__figure--noimage {
align-items: center;
aspect-ratio: 340/191;
background-color: #e0e0e0;
display: flex;
justify-content: center;
}
.p-classroom__noimage-text {
color: #777777;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1;
}
/* -------------------------------------------------------------------------
* 本文
* ---------------------------------------------------------------------- */
.p-classroom__body {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 100%;
padding-inline: 10px;
width: 300px;
}
.p-classroom__meta {
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
}
.p-classroom__date {
font-size: 12px;
font-weight: 500;
line-height: normal;
}
.p-classroom__cat {
background-color: #f38613;
border-radius: 2px;
color: #ffffff;
flex-shrink: 0;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
padding-block: 1px;
text-align: center;
width: 64px;
}
.p-classroom__title {
font-size: 16px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1.6;
margin: 0;
}
.okagawajuku-front .p-classroom__date,
.okagawajuku-front .p-classroom__title {
color: #000000;
}
/* -------------------------------------------------------------------------
* ページネーション（node 1:4901 — SP のみ）
* ---------------------------------------------------------------------- */
.p-classroom__pagination {
display: flex;
gap: 8px;
justify-content: center;
--swiper-pagination-bullet-horizontal-gap: 0;
}
.p-classroom__pagination .swiper-pagination-bullet {
background-color: #777777;
height: 10px;
opacity: 1;
transition: background-color 0.28s ease;
width: 10px;
}
.p-classroom__pagination .swiper-pagination-bullet-active {
background-color: #d30d0d;
}
/*
* p-free-trial — 無料体験授業バナー（授業風景の下）
* Figma: SP node 1:4868 / PC node 1:3642
*
* 画像リンク1枚だけのセクション。表示位置 = バナーCPT「free-trial」。
* PC / SP は Figma 上で同一画像だったため、実際は PC 用1枚で足りる。
* 構造は trial_banner / news-banner と同型で、違いは最大幅（660px）だけ。
*/
.p-free-trial {
padding-block: 24px;
}
/*
* バナー幅はコンテンツ幅（1080px）ではなく 660px（node 1:3643）。
* .l-inner と詳細度を合わせず、クラス2つ（0,2,0）で確実に上書きする。
*/
.p-free-trial__inner.l-inner {
max-width: 700px;
}
.p-free-trial__link {
display: block;
transition: opacity 0.28s ease;
}
.p-free-trial__link:hover {
opacity: 0.8;
}
/*
* 管理画面から差し替える画像のため、アスペクト比は固定しない。
* width/height 属性から算出される本来の比率で表示する。
*/
.okagawajuku-front .p-free-trial__img {
display: block;
height: auto;
width: 100%;
}
/*
* p-floating-cta — PC 右端の追従 CTA（無料体験 / 公式LINE）
* Figma: node 1:3788（無料体験 1:3790 / 公式LINE 1:3798）
* - Figma 上は greeting セクション内に absolute 配置されているが、
* 実装ではページ全体に追従させるため section の外に出して position: fixed で運用する。
* - SP は非表示（Figma の SP ノード 1:4293 に CTA は存在しない）。
* ※ .u-pc は `display: block !important` のため flex コンテナには使えない。
* ここでは自前で display を出し分ける。
* - .okagawajuku-front の外に置くため box-sizing はこのファイルで担保する。
*/
.p-floating-cta,
.p-floating-cta *,
.p-floating-cta *::before,
.p-floating-cta *::after {
box-sizing: border-box;
}
.p-floating-cta {
display: none;
flex-direction: column;
gap: 4px;
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 92px;
z-index: 30;
}
.p-floating-cta__link {
align-items: center;
border-radius: 12px 0 0 12px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
color: #ffffff;
display: flex;
flex-direction: column;
font-size: 16px;
font-weight: 600;
gap: 12px;
justify-content: center;
line-height: 1.5;
min-height: 160px;
padding: 24px 32px;
text-decoration: none;
transition: opacity 0.28s ease;
}
.p-floating-cta__link:hover {
opacity: 0.8;
}
.p-floating-cta__link:hover {
color: #ffffff;
}
.p-floating-cta__link--trial {
background-color: #d30d0d;
}
.p-floating-cta__link--line {
background-color: #43af00;
}
/*
* 縦組みラベル。
* text-orientation: upright は英数字も1文字ずつ正立させる（Figma は「公式LINE」を
* L / I / N / E と正立で縦積みしている）。mixed だとラテン文字だけ90°回転してしまう。
*/
.p-floating-cta__label {
font-feature-settings: normal;
letter-spacing: 0;
text-orientation: upright;
writing-mode: vertical-rl;
}
/*
* アイコンは Figma と同じくアルファマスク（PNG）＋背景色で描画する。
* ![]()
ではなく mask にすることで、色を CSS 側（currentColor 相当の白）で制御できる。
*/
.p-floating-cta__icon {
background-color: #ffffff;
display: block;
flex-shrink: 0;
height: 21px;
width: 21px;
-webkit-mask-image: url("../img/icon-trial.png");
mask-image: url("../img/icon-trial.png");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/*
* 公式LINE（node 1:3804）は同じ吹き出しを 2 枚重ねたアイコン。
* 奥 = 右上・淡赤 #fff0f0（$color__main-tint）／手前 = 左下・白
* Figma は「Mask group」×2（1:3805 / 1:3808）＝ 同一のマスク元画像 AdobeStock_739540283 を
* 24.382 角で 2 箇所に置き、色違いのベタを抜いた構造。実装もそれに合わせ、
* 1 要素のまま ::before / ::after に同じマスクを持たせて 2 枚描く（HTML 変更なし）。
* 本体側の mask / background は打ち消す。
*/
.p-floating-cta__icon--line {
background-color: transparent;
height: 28px;
overflow: hidden;
position: relative;
width: 28px;
-webkit-mask-image: none;
mask-image: none;
}
.p-floating-cta__icon--line::before,
.p-floating-cta__icon--line::after {
height: 24px;
position: absolute;
width: 24px;
-webkit-mask-image: url("../img/icon-line-bubble.png");
mask-image: url("../img/icon-line-bubble.png");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
content: "";
mask-size: contain;
}
.p-floating-cta__icon--line::before {
background-color: #fff0f0;
right: -3px;
top: 0;
}
.p-floating-cta__icon--line::after {
background-color: #ffffff;
bottom: 0;
left: -3px;
}
/*
* p-news — お知らせ / おかがわ便り / コラム 新着3リスト
* Figma: SP node 1:4544 / PC node 1:3556
*
* ライトグレー地に白カードを3枚縦積み。カード内は
* lg … 「見出し＋ボタン（左カラム） | 3件リスト（右620px）」の横並び
* SP/md … 「見出し → リスト → ボタン」の縦積み
* 横並びは lg（1024px）から。md で 620px 固定にするとカード幅不足で aside が潰れるため
* greeting と同様に 2 段階切替。DOM は1つ。縦積み時は .p-news__aside を display:contents で
* 分解し、order でボタンを最後へ送って並べ替える（Courses と同じ手法）。
*/
.p-news {
background-color: #f5f5f5;
}
/*
* 内側コンテナ。左右余白 10px（カード 370px ＝ 390 - 10×2 の SP と揃える）。
* l-inner（余白 20/40px）とは余白量が違うため自己完結させる。
* max-width は 1080 + 10×2 = 1100 で、PC ではコンテンツ幅がカードと同じ 1080px になる。
*/
.p-news__inner {
margin-inline: auto;
max-width: 1100px;
padding-inline: 10px;
width: 100%;
}
.p-news__blocks {
display: flex;
flex-direction: column;
gap: 20px;
margin-inline: auto;
max-width: 600px;
}
/* -------------------------------------------------------------------------
* カード（node 1:4546 SP / 1:3558 PC）
* ---------------------------------------------------------------------- */
.p-news__block {
align-items: center;
background-color: #ffffff;
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 30px;
padding: 34px 16px 24px;
}
/*
* 左カラム（見出し＋ボタン）。
* SP は箱を透明化して中身を .p-news__block 直下の flex アイテムへ昇格させる。
*/
.p-news__aside {
display: contents;
}
.p-news__more {
order: 1;
padding: 16px 32px;
}
/* -------------------------------------------------------------------------
* リスト（node 1:4551 SP / 1:3567 PC）
* 行（日付・タグ・タイトル）は component の c-post-list に切り出して message と共用。
* ここでは PC の右カラム幅だけを指定する（内側の並びは c-post-list 側）。
* ---------------------------------------------------------------------- */
/*
* p-news-banner — お知らせ等の下の画像バナー
* Figma: SP node 1:4821 / PC node 1:4188
*
* 画像リンク1枚だけのセクション。表示位置 = バナーCPT「news-banner」。
* PC / SP は Figma 上で同一画像だったため、実際は PC 用1枚で足りる。
* それでも を残しているのは、先方が SP 用を別途登録したときに
* そのまま出し分けが効くようにしておくため。
* 構造は trial_banner / free-trial と同型。最大幅 660px（node 1:4189）。
*/
.p-news-banner {
padding-block: 24px;
}
/*
* バナー幅はコンテンツ幅（1080px）ではなく 660px（node 1:4189）。
* trial_banner / free-trial と同型。ブレークポイントに関係なく 660px で頭打ち。
*/
.p-news-banner__inner.l-inner {
max-width: 700px;
}
.p-news-banner__link {
display: block;
transition: opacity 0.28s ease;
}
.p-news-banner__link:hover {
opacity: 0.8;
}
/*
* 管理画面から差し替える画像のため、アスペクト比は固定しない。
* width/height 属性から算出される本来の比率で表示する。
*/
.okagawajuku-front .p-news-banner__img {
display: block;
height: auto;
width: 100%;
}
/*
* p-message — 塾長の想い（Message）
* Figma: SP node 1:4636 / PC node 1:3519
*
* 白カード（見出し中央＋c-post-list＋ボタン中央）＋カード下の YouTube バナー。
* カード背面に葉の装飾画像。Figma は複雑なマスク＋グラデだが、ここでは
* 「葉画像を上に敷き、白グラデで下へフェード」する簡略実装にしている。
* 行（日付・タグ・タイトル）は component の c-post-list を共用（タグは緑 --message）。
*/
.p-message {
overflow: hidden;
padding-block: 48px 24px;
position: relative;
}
.p-message::before {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgb(255, 255, 255) 40%), url("../img/message-bg-leaves.webp");
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
content: "";
inset: 0;
pointer-events: none;
position: absolute;
z-index: 0;
}
.p-message__inner.l-inner {
align-items: center;
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
z-index: 1;
}
/* -------------------------------------------------------------------------
* カード（node 1:4642 SP / 1:3525 PC）
* ---------------------------------------------------------------------- */
.p-message__card {
align-items: center;
background-color: #ffffff;
border: 1px solid #777777;
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 30px;
padding: 24px 16px;
width: 100%;
}
/* -------------------------------------------------------------------------
* YouTube バナー（node 1:4674 SP 350 / 1:3555 PC 660）
* ---------------------------------------------------------------------- */
/*
* 幅の上限は画面サイズごとに3段階。以前は md 以上でしか max-width が効かず、
* 767px 以下で inner 幅いっぱい（＝画面幅なり）に広がっていた。
* 〜767px … 500px
* 768〜1199px … 550px
* 1200px〜 … 660px（node 1:3555）
* 横方向の中央寄せは親（.p-message__inner の align-items: center）が担当。
*/
.p-message__youtube {
max-width: 500px;
width: 100%;
}
.p-message__youtube-link {
display: block;
transition: opacity 0.28s ease;
}
.p-message__youtube-link:hover {
opacity: 0.8;
}
.okagawajuku-front .p-message__youtube-img {
display: block;
height: auto;
width: 100%;
}
/*
* p-cta — 3つの申込みカード（カリキュラム申し込み / 公式LINE / 無料体験）
* Figma: SP node 1:4823 / PC node 1:3872
*
* 白カード（赤枠）を PC 横並び / SP 縦積み。セクション下部に赤い帯（::after）を敷き、
* カードが白地と赤帯にまたがる。ボタンは c-button ＋ 色 modifier（--trial / --line）。
*/
.p-cta {
padding-block: 27px 48px;
position: relative;
}
.p-cta::after {
background-color: #d30d0d;
bottom: 0;
content: "";
height: 166px;
inset-inline: 0;
position: absolute;
z-index: 0;
}
.p-cta__inner.l-inner {
position: relative;
z-index: 1;
}
.p-cta__cards {
align-items: center;
display: flex;
flex-direction: column;
gap: 26px;
}
/* -------------------------------------------------------------------------
* カード（node 1:4826 SP / 1:3875 PC）
* ---------------------------------------------------------------------- */
.p-cta__card {
align-items: center;
background-color: #ffffff;
border: 1px solid #d30d0d;
border-radius: 20px;
display: flex;
flex-direction: column;
gap: 16.73px;
justify-content: center;
max-width: 100%;
padding: 29px 9px 25px;
width: 340px;
}
.p-cta__head {
align-items: center;
display: flex;
gap: 4px;
justify-content: center;
}
.okagawajuku-front .p-cta__icon {
display: block;
height: 35px;
width: 35px;
-o-object-fit: contain;
object-fit: contain;
}
.p-cta__title {
font-size: 18px;
font-weight: 600;
line-height: 1;
margin: 0;
}
.p-cta__divider {
background-color: #777777;
height: 2px;
width: 35px;
}
.p-cta__desc {
font-size: 14px;
font-weight: 500;
line-height: 1.6;
margin: 0;
text-align: center;
}
.p-cta__card.p-cta__card--free {
padding-block: 19px 15px;
}
/* -------------------------------------------------------------------------
* カード内ボタン（c-button との併用）
* 3枚（カリキュラム申し込み / 公式LINE / 無料体験）でラベル長が違うため、
* 素の c-button（内容幅）だと幅がバラつく。ここで共通幅を与えて揃える。
* 幅は最長ラベル「カリキュラム／申し込み」の2行表示を基準にしている。
* ---------------------------------------------------------------------- */
.p-cta__button {
line-height: 1.2;
max-width: 100%;
padding: 16px 32px;
text-align: center;
width: 260px;
}
.p-cta__button.c-button--trial {
padding-block: 7px 6px;
text-align: left;
}
/*
* p-catch — フッター前のキャッチコピー帯
* Figma: SP node 1:4675 / PC node 1:3918
*
* 白地に赤文字を中央寄せ。
で2行に固定（成績不問、／全員合格。）。
* 見出しを持たない装飾コピーのため section ではなく div で出力する。
*/
.p-catch {
padding-block: 26px 24px;
padding-inline: 10px;
text-align: center;
}
.p-catch__text {
color: #d30d0d;
font-size: 36px;
font-weight: 600;
line-height: 1.1;
margin-block-end: 0;
}
/*
* p-header — トップページ専用ヘッダー（SPファースト）
* Figma: SP node 1:4278 / PC node 1:3821
* ※ .okagawajuku-front 外にあるため、ここで下地スタイルも定義する。
*/
.p-header {
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
color: #000000;
font-family: "Noto Sans JP", sans-serif;
position: sticky;
top: 0;
z-index: 50;
}
.p-header img {
height: auto;
max-width: 100%;
}
.p-header a {
color: inherit;
text-decoration: none;
}
.p-header button {
background: none;
border: none;
color: inherit;
cursor: pointer;
font: inherit;
}
.p-header__inner {
align-items: center;
display: flex;
justify-content: space-between;
padding: 16px 10px 16px 16px;
}
.p-header__brand {
flex-shrink: 0;
}
.p-header__logo {
display: block;
line-height: normal;
transition: opacity 0.28s ease;
}
.p-header__logo:hover {
opacity: 0.8;
}
.p-header__logo-sp {
align-items: center;
display: flex;
gap: 10px;
}
.p-header__logo-icon {
flex-shrink: 0;
height: auto;
width: 99px;
}
.p-header__logo-text {
color: #d30d0d;
font-size: 16px;
font-weight: 600;
line-height: 1.1;
white-space: nowrap;
}
.p-header__logo-img {
display: none;
height: auto;
width: 149px;
}
.p-header__tagline {
color: #d30d0d;
display: none;
font-size: 16px;
font-weight: 700;
line-height: 1.1;
margin: 0;
text-align: center;
white-space: nowrap;
}
.p-header__body {
display: none;
}
.p-header__tel {
align-items: center;
background-color: #fff0f0;
border-radius: 4px;
display: inline-flex;
gap: 8px;
padding: 4px 24px;
}
.p-header__tel-icon {
flex-shrink: 0;
height: 27px;
width: 27px;
}
.p-header__tel-num {
border-bottom: 1px solid #d30d0d;
font-family: "Inter", sans-serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
padding-block-end: 3px;
transition: color 0.28s ease;
}
.p-header__button {
align-items: center;
background-color: var(--btn-color);
border: 1px solid var(--btn-color);
border-radius: 999px;
box-shadow: 0 0 4px rgba(44, 44, 44, 0.25);
color: #ffffff;
display: inline-flex;
font-size: 14px;
font-weight: 600;
gap: 11px;
justify-content: center;
line-height: 1.2;
min-height: 46px;
padding: 8px 18px;
transition: background-color 0.28s ease;
}
.p-header__button-label {
color: #ffffff;
transition: color 0.28s ease;
}
.p-header__button--trial {
--btn-color: #f38613;
}
.p-header__button--free {
--btn-color: #d30d0d;
font-size: 16px;
line-height: 1;
padding-inline: 26px;
}
.p-header__button-arrow {
background-color: #ffffff;
clip-path: polygon(0 0, 100% 50%, 0 100%);
flex-shrink: 0;
height: 13px;
transition: background-color 0.28s ease;
width: 9px;
}
.p-header__nav {
width: 100%;
}
.p-header__list {
align-items: stretch;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.p-header__item {
border-right: 1px solid #e0e0e0;
position: relative;
}
.p-header__item:first-child {
border-left: 1px solid #e0e0e0;
}
.p-header__link {
align-items: center;
display: inline-flex;
font-size: 16px;
font-weight: 600;
gap: 4px;
justify-content: center;
line-height: 1.225;
padding-block: 8px;
padding-inline: 8px;
text-align: center;
white-space: nowrap;
}
.p-header__label {
position: relative;
}
.p-header__label::after {
background-color: #d30d0d;
bottom: -7px;
content: "";
height: 2px;
left: 0;
position: absolute;
right: 0;
transform: scaleX(0);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-header__arrow {
background-color: #777777;
clip-path: polygon(50% 100%, 0 0, 100% 0);
flex-shrink: 0;
height: 7px;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
width: 10px;
}
.p-header__dropdown {
background-color: #fff9f9;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
display: none;
left: 50%;
min-width: 280px;
position: absolute;
top: calc(100% + 18px);
transform: translateX(-50%);
z-index: 50;
}
.p-header__dropdown::before {
content: "";
height: 18px;
left: 0;
position: absolute;
right: 0;
top: -18px;
}
.p-header__sublist {
list-style: none;
margin: 0;
padding: 0;
}
.p-header__subitem {
border-bottom: 1px solid #e0e0e0;
}
.p-header__subitem:last-child {
border-bottom: none;
}
.p-header__sublink {
display: block;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
padding: 8px 16px 8px 24px;
transition: color 0.28s ease;
}
.p-header__toggle {
align-items: center;
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 7px;
justify-content: center;
padding: 10px 8px;
width: 37px;
}
.p-header__bar {
background-color: #333333;
display: block;
height: 1px;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
width: 19.5px;
}
.p-header__toggle[aria-expanded=true] .p-header__bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.p-header__toggle[aria-expanded=true] .p-header__bar:nth-child(2) {
opacity: 0;
}
.p-header__toggle[aria-expanded=true] .p-header__bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/*
* p-drawer — スマホメニュー（ドロワー）SP のみ
* Figma: node 1:1744（閉）/ 1:1802（アコーディオン開）
*/
body.is-drawer-open {
overflow: hidden;
}
.p-drawer__overlay {
background-color: rgba(0, 0, 0, 0.4);
inset: 0;
position: fixed;
z-index: 39;
}
.p-drawer__overlay[hidden] {
display: none;
}
.p-drawer {
background-color: #ffffff;
color: #000000;
display: flex;
flex-direction: column;
font-family: "Noto Sans JP", sans-serif;
height: calc(100% - 53px);
height: calc(100dvh - 53px);
left: 0;
position: fixed;
top: 53px;
transform: translateY(-100%);
transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), visibility 1s ease;
visibility: hidden;
width: 100%;
z-index: 40;
}
.p-drawer.is-open {
transform: translateY(0);
visibility: visible;
}
.p-drawer img {
display: block;
height: auto;
max-width: 100%;
}
.p-drawer a {
color: inherit;
text-decoration: none;
}
.p-drawer button {
background: none;
border: none;
color: inherit;
cursor: pointer;
font: inherit;
text-align: inherit;
}
.p-drawer__inner {
display: flex;
flex: 1;
flex-direction: column;
overflow-y: auto;
padding: 20px 0;
}
.p-drawer__list {
list-style: none;
margin: 0 auto;
padding: 0;
width: min(370px, 100%);
}
.p-drawer__item {
border-bottom: 1px solid #e0e0e0;
}
.p-drawer__row {
align-items: center;
display: flex;
}
.p-drawer__link {
align-items: center;
display: flex;
flex: 1;
font-size: 14px;
font-weight: 600;
justify-content: flex-start;
line-height: 1.6;
padding: 12px 16px;
text-align: left;
transition: opacity 0.28s ease;
width: 100%;
}
.p-drawer__link:hover {
opacity: 0.7;
}
.p-drawer__trigger {
align-items: center;
background: transparent;
border: 0;
cursor: pointer;
display: flex;
flex-shrink: 0;
justify-content: center;
padding: 12px 16px;
transition: opacity 0.28s ease;
}
.p-drawer__trigger:hover {
opacity: 0.7;
}
.p-drawer__arrow {
background: url("../img/icon-arrow.svg") no-repeat center/contain;
flex-shrink: 0;
height: 20px;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
width: 22px;
}
.p-drawer__trigger.is-open .p-drawer__arrow {
transform: rotate(180deg);
}
.p-drawer__submenu {
background-color: #fff9f9;
max-height: 0;
overflow: hidden;
transition: max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-drawer__sublist {
list-style: none;
margin: 0;
padding: 0;
}
.p-drawer__subitem {
border-bottom: 1px solid #e0e0e0;
}
.p-drawer__subitem:last-child {
border-bottom: none;
}
.p-drawer__sublink {
display: block;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
padding: 8px 16px 8px 24px;
text-align: left;
transition: color 0.28s ease;
}
.p-drawer__foot {
align-items: center;
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 28px;
}
.p-drawer__tel {
align-items: center;
background-color: #fff0f0;
border-radius: 4px;
display: inline-flex;
gap: 4px;
justify-content: center;
padding: 8px 24px;
width: min(288px, 100%);
}
.p-drawer__tel-icon {
flex-shrink: 0;
height: 27px;
width: 27px;
}
.p-drawer__tel-num {
border-bottom: 1px solid #d30d0d;
font-family: "Inter", sans-serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
transition: color 0.28s ease;
}
.p-drawer__cta {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.p-drawer__button {
align-items: center;
background-color: var(--btn-color);
border: 1px solid var(--btn-color);
border-radius: 999px;
box-shadow: 0 0 4px rgba(44, 44, 44, 0.25);
color: #ffffff;
display: inline-flex;
font-size: 14px;
font-weight: 600;
gap: 11px;
justify-content: center;
line-height: 1.2;
min-height: 46px;
padding: 14px 18px;
transition: background-color 0.28s ease;
}
.p-drawer__button-label {
color: #ffffff;
transition: color 0.28s ease;
}
.p-drawer__button--trial {
--btn-color: #f38613;
}
.p-drawer__button--free {
--btn-color: #d30d0d;
font-size: 16px;
line-height: 1;
}
.p-drawer__button-arrow {
background-color: #ffffff;
clip-path: polygon(0 0, 100% 50%, 0 100%);
flex-shrink: 0;
height: 13px;
transition: background-color 0.28s ease;
width: 9px;
}
/*
* p-footer — トップページ専用フッター（footer-front.php）
* Figma: SP node 1:4677 / PC node 1:3920
*
* 構成:
* 左（白地 $color__bg-gray）… キャッチ / ロゴ / 電話 / CTA2ボタン / SNS
* 右（チャコール $color__text）… サイトマップ（PC 3カラム展開 / SP アコーディオン）
* ＋ 法務リンク ＋ コピーライト ＋ TOPボタン
*/
.p-footer {
--footer-edge: 40px;
font-family: "Noto Sans JP", sans-serif;
overflow: hidden;
}
.p-footer a {
text-decoration: none;
}
.p-footer :where(button) {
font-family: inherit;
}
.p-footer ul:not(.p-footer__sublist) {
list-style: none;
margin: 0;
padding: 0;
}
.p-footer li {
margin: 0;
}
.p-footer img {
display: block;
}
.p-footer__inner {
display: flex;
flex-direction: column;
margin-inline: auto;
max-width: 1440px;
}
/* =========================================================================
* 左: ブランド
* ====================================================================== */
.p-footer__brand {
align-items: center;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
padding: 40px 20px;
}
.p-footer__brand-head {
align-items: center;
display: flex;
flex-direction: column;
gap: 6px;
}
.p-footer__catch {
background-color: #d30d0d;
border-radius: 2px;
color: #ffffff;
font-size: 15px;
font-weight: 600;
line-height: 1.6;
margin-block-end: 20px;
padding: 8px;
}
.p-footer__logo {
display: block;
transition: opacity 0.28s ease;
}
.p-footer__logo:hover {
opacity: 0.8;
}
.p-footer__logo img {
display: block;
height: auto;
width: 208px;
}
.p-footer__cta {
align-items: center;
display: flex;
flex-direction: column;
gap: 15px;
margin-block-start: 48px;
max-width: 100%;
width: 209px;
}
.p-footer__tel {
align-items: center;
background-color: #fff0f0;
border-radius: 4px;
display: flex;
gap: 4px;
justify-content: center;
padding-block: 4px;
width: 100%;
}
.p-footer__tel-icon {
height: 30px;
width: 30px;
}
.p-footer__tel-num {
border-bottom: 1px solid #d30d0d;
color: #333333;
font-family: "Inter", sans-serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.4px;
line-height: 1;
padding-block-end: 2px;
transition: color 0.28s ease;
}
.p-footer__button {
align-items: center;
background-color: var(--btn-color);
border: 1px solid var(--btn-color);
border-radius: 999px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
color: #ffffff;
display: flex;
gap: 11px;
height: 48px;
justify-content: center;
padding: 14px 18px;
transition: background-color 0.28s ease, color 0.28s ease;
width: 180px;
}
.p-footer__button--trial {
--btn-color: #f38613;
}
.p-footer__button--free {
--btn-color: #d30d0d;
}
.p-footer__button-label {
font-size: 14px;
font-weight: 600;
line-height: 1.2;
transition: color 0.28s ease;
}
.p-footer__button--free .p-footer__button-label {
font-size: 16px;
line-height: 1;
}
.p-footer__button-arrow {
border-color: transparent transparent transparent currentColor;
border-style: solid;
border-width: 5px 0 5px 7px;
flex-shrink: 0;
height: 0;
transition: border-color 0.28s ease;
width: 0;
}
.p-footer__social {
align-items: center;
display: flex;
gap: 10px;
justify-content: center;
margin-block-start: 24px;
}
.p-footer__social-link {
display: block;
transition: opacity 0.28s ease;
}
.p-footer__social-link:hover {
opacity: 0.8;
}
.p-footer__social-link img {
height: 32px;
width: auto;
}
.p-footer__social-link--instagram {
padding: 16px;
}
.p-footer__social-link--youtube img {
height: 40px;
}
/* =========================================================================
* 右: サイトマップ + コピーライト
* ====================================================================== */
.p-footer__body {
background-color: #333333;
border-top: 1px solid #d30d0d;
display: flex;
flex-direction: column;
gap: 40px;
padding: 40px 10px 19px;
}
.p-footer__nav {
width: 100%;
}
.p-footer__columns {
display: flex;
flex-direction: column;
gap: 0;
margin-inline: auto;
max-width: 370px;
width: 100%;
}
.p-footer__column {
flex: 1;
min-width: 0;
}
.p-footer__item {
border-bottom: 1px solid #ffffff;
}
.p-footer__row {
align-items: center;
display: flex;
}
.p-footer__heading {
align-items: center;
color: #ffffff;
display: flex;
font-size: 14px;
font-weight: 600;
justify-content: space-between;
line-height: 1.6;
padding: 11px 20px 12px 16px;
text-align: left;
width: 100%;
}
.p-footer__column:first-child .p-footer__item:first-child .p-footer__heading {
padding: 8px 16px 7px;
}
.p-footer__heading--link {
transition: opacity 0.28s ease;
}
.p-footer__heading--link:hover {
opacity: 0.7;
}
.p-footer__heading--link:hover {
color: #ffffff;
}
.p-footer__trigger {
align-items: center;
background-color: transparent;
border: 0;
cursor: pointer;
display: flex;
flex-shrink: 0;
justify-content: center;
padding: 11px 20px 12px 8px;
}
.p-footer__arrow {
border-color: #ffffff transparent transparent;
border-style: solid;
border-width: 8px 7px 0;
flex-shrink: 0;
height: 0;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
width: 0;
}
.p-footer__trigger.is-open .p-footer__arrow {
transform: rotate(180deg);
}
.p-footer__submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-footer__sublist {
list-style: none;
margin: 0;
padding: 0;
}
.p-footer__subitem {
background: #f5f5f5;
border-bottom: 1px solid #e0e0e0;
}
.p-footer__sublink {
color: #000000;
display: block;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
padding: 8px 8px 8px 24px;
text-decoration: none;
}
.p-footer__sublink:hover {
color: #000000;
text-decoration: underline;
text-decoration-color: #d30d0d;
text-underline-offset: 8px;
}
.p-footer__meta {
align-items: center;
display: flex;
flex-direction: column;
gap: 8px;
}
.p-footer__links {
align-items: center;
display: flex;
flex-direction: column;
margin-inline: auto;
max-width: 370px;
}
.p-footer__links-item {
padding-block: 3px;
}
.p-footer__meta-divider {
background-color: #ffffff;
display: block;
height: 1px;
width: 10px;
}
.p-footer__meta-link {
color: #ffffff;
font-size: 12px;
line-height: 1.8;
transition: opacity 0.28s ease;
}
.p-footer__meta-link:hover {
opacity: 0.7;
}
.p-footer__meta-link:hover {
color: #ffffff;
}
.p-footer__copyright {
color: #ffffff;
font-size: 12px;
line-height: 1.8;
text-align: center;
}
.p-footer__pagetop {
align-items: center;
background-color: #fff0f0;
border: 1px solid #b00a0a;
border-radius: 999px;
bottom: 12px;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 2px;
height: 46px;
justify-content: center;
opacity: 0;
padding: 0;
position: fixed;
right: 10px;
transform: translateY(10px);
transition: background-color 0.28s ease, opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
visibility: hidden;
width: 46px;
z-index: 30;
}
.p-footer__pagetop.is-visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
.p-footer__pagetop-arrow {
border-color: transparent transparent #777777;
border-style: solid;
border-width: 0 6px 8px;
height: 0;
transition: border-color 0.28s ease;
width: 0;
}
.p-footer__pagetop-text {
color: #d30d0d;
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1;
transition: color 0.28s ease;
}
/*
* utility 層 — 汎用ユーティリティ（u-*）
* 例: PC/SP 出し分け、visually-hidden など。着工時に追加する。
*/
/*
* u-display — PC / SP の表示出し分けユーティリティ（SPファースト）
* .u-pc … SP で非表示 / PC で表示
* .u-sp … SP で表示 / PC で非表示
*/
.u-pc {
display: none !important;
}
@media (any-hover: hover) {
.c-button:hover {
background-color: #ffffff;
color: var(--btn-color);
opacity: 1;
}
.c-button:hover .c-button__arrow {
background-color: var(--btn-color);
}
.okagawajuku-front .c-button:hover {
color: var(--btn-color);
}
.p-courses__tab:hover {
background-color: #d30d0d;
color: #ffffff;
}
.p-courses__tab:hover .p-courses__tab-arrow {
background-color: #ffffff;
}
.p-header__tel:hover .p-header__tel-num {
color: #d30d0d;
}
.p-header__button:hover {
background-color: #ffffff;
}
.p-header__button:hover .p-header__button-label {
color: var(--btn-color);
}
.p-header__button:hover .p-header__button-arrow {
background-color: var(--btn-color);
}
.p-header__link:hover .p-header__label::after {
transform: scaleX(1);
}
.p-header__item--has-child:hover .p-header__arrow,
.p-header__item--has-child:focus-within .p-header__arrow {
transform: rotate(180deg);
}
.p-header__item--has-child:hover .p-header__dropdown,
.p-header__item--has-child:focus-within .p-header__dropdown {
display: block;
}
.p-header__sublink:hover {
color: #d30d0d;
}
.p-drawer__sublink:hover {
color: #d30d0d;
}
.p-drawer__tel:hover .p-drawer__tel-num {
color: #d30d0d;
}
.p-drawer__button:hover {
background-color: #ffffff;
}
.p-drawer__button:hover .p-drawer__button-label {
color: var(--btn-color);
}
.p-drawer__button:hover .p-drawer__button-arrow {
background-color: var(--btn-color);
}
.p-footer__tel:hover .p-footer__tel-num {
color: #d30d0d;
}
.p-footer__button:hover {
background-color: #ffffff;
color: var(--btn-color);
}
.p-footer__pagetop:hover {
background-color: #d30d0d;
}
.p-footer__pagetop:hover .p-footer__pagetop-arrow {
border-bottom-color: #ffffff;
}
.p-footer__pagetop:hover .p-footer__pagetop-text {
color: #ffffff;
}
}
@media (prefers-reduced-motion: reduce) {
.c-button {
transition: none;
}
.c-post-list__link {
transition: none;
}
.p-mv__link {
transition: none;
}
.p-courses__card-link {
transition: none;
}
.p-strength__banner-link {
transition: none;
}
.p-strength__slide {
transition: none;
}
.p-strength__link {
transition: none;
}
.p-results__card {
transition: none;
}
.p-results__card:hover {
transform: none;
}
.p-trial-banner__link {
transition: none;
}
.p-about__banner-link {
transition: none;
}
.p-classroom__card {
transition: none;
}
.p-classroom__card:hover {
transform: none;
}
.p-free-trial__link {
transition: none;
}
.p-floating-cta__link {
transition: none;
}
.p-news-banner__link {
transition: none;
}
.p-message__youtube-link {
transition: none;
}
.p-header__logo {
transition: none;
}
.p-header__arrow {
transition: none;
}
.p-drawer {
transition: visibility 1s ease;
}
.p-drawer {
transition: none;
}
.p-drawer__link {
transition: none;
}
.p-drawer__trigger {
transition: none;
}
.p-drawer__submenu {
transition: none;
}
.p-footer__logo {
transition: none;
}
.p-footer__social-link {
transition: none;
}
.p-footer__heading--link {
transition: none;
}
.p-footer__meta-link {
transition: none;
}
.p-footer__pagetop {
transform: none;
transition: none;
}
}
@media screen and (min-width: 768px) {
.l-inner {
max-width: 1160px;
padding-inline: 40px;
}
.l-section {
padding-block: 48px;
}
.c-button__arrow {
height: 12px;
width: 10px;
}
.c-section-title {
gap: 16px;
}
.c-section-title__en {
font-size: 20px;
}
.c-post-list__link {
grid-template-areas: ". tag" "date title";
grid-template-columns: 110px 1fr;
-moz-column-gap: 16px;
column-gap: 16px;
row-gap: 8px;
}
.c-post-list__date {
align-self: start;
font-size: 14px;
line-height: 1.6;
}
.p-mv {
padding-block: 40px;
}
.p-mv::before {
height: 341px;
}
.p-mv__inner {
align-items: center;
display: flex;
gap: 24px;
margin-inline: auto;
padding-inline: 40px;
width: min(1220px, 100%);
}
.p-mv--single .p-mv__inner {
display: block;
max-width: 1000px;
width: 100%;
}
.p-mv__slider {
flex: 1 1 auto;
margin-inline: 0;
min-width: 0;
}
.p-mv__nav {
align-items: center;
background-color: #d30d0d;
border: 1px solid #b00a0a;
border-radius: 50%;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 46px;
justify-content: center;
padding: 0;
transition: background-color 0.28s ease, border-color 0.28s ease;
width: 46px;
}
.p-mv__nav:hover {
background-color: #ffffff;
border-color: #b00a0a;
}
.p-mv__nav.swiper-button-disabled {
cursor: not-allowed;
opacity: 0.35;
pointer-events: none;
}
.p-greeting.l-section {
padding-block: 80px 100px;
}
.p-greeting::before {
height: 234px;
}
.p-greeting__inner.l-inner {
gap: 48px;
padding-inline: 40px;
}
.p-greeting__catch {
font-size: 60px;
}
.p-greeting__card-sub {
font-size: 24px;
}
.p-greeting__card-name {
font-size: 68px;
}
.p-greeting__lead {
font-size: 18px;
font-weight: 700;
}
.p-greeting__text {
font-size: 16px;
}
.p-courses {
padding-block: 80px;
}
.p-courses__tablist {
gap: 24px;
max-width: 486px;
}
.p-courses__tab {
font-size: 28px;
padding: 9px 30px;
}
.p-courses__card {
padding: 31px;
}
.p-courses__card-title {
font-size: 24px;
}
.p-courses__card-text {
font-size: 16px;
}
.p-strength {
padding-block-end: 100px;
padding-block-start: 60px;
}
.p-strength__banner {
max-width: 654px;
}
.p-strength__slider {
margin-block-start: 60px;
}
.p-strength__slide {
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
width: 300px;
}
.p-strength__slide.swiper-slide-active {
position: relative;
transform: scale(1.2);
z-index: 1;
}
.p-strength__controls {
margin-block-start: 60px;
}
.p-strength__pagination {
gap: 4px;
}
.p-strength__pagination .swiper-pagination-bullet {
height: 16px;
width: 16px;
}
.p-results {
padding-block-end: 100px;
padding-block-start: 106px;
}
.p-results__inner.l-inner {
max-width: 908px;
}
.okagawajuku-front .p-results__hero {
margin-block-start: 13px;
}
.p-results__group {
gap: 32px;
}
.p-results__group:nth-of-type(2) {
gap: 24px;
}
.p-results__group-title {
font-size: 24px;
line-height: 1.6;
}
.p-results__slider {
width: 100%;
}
.p-results__item:last-child {
margin-right: 0 !important;
}
.p-results__year {
font-size: 20px;
}
.p-results__pagination {
display: none;
}
.p-trial-banner {
padding-block-end: 65px;
padding-block-start: 60px;
}
.p-trial-banner__inner.l-inner {
max-width: 740px;
}
.p-about {
border-radius: 60px;
margin-inline: auto;
max-width: 1280px;
padding-block-end: 100px;
padding-block-start: 106px;
}
.p-about__inner.l-inner {
max-width: 1280px;
padding-inline: 50px;
}
.p-about__card-title {
font-size: 22px;
}
.p-about__card-body {
font-size: 16px;
}
.p-about__banner {
margin-block-start: 60px;
max-width: 660px;
}
.p-classroom {
padding-block-end: 100px;
padding-block-start: 106px;
}
.p-classroom__inner.l-inner {
gap: 48px;
}
.p-classroom__slider {
max-width: none;
}
.p-classroom__date {
font-size: 14px;
}
.p-classroom__pagination {
display: none;
}
.p-free-trial {
padding-block: 60px;
}
.p-free-trial__inner.l-inner {
max-width: 740px;
}
.p-floating-cta {
display: flex;
}
.p-news {
padding-block: 100px;
}
.p-news__blocks {
gap: 30px;
}
.p-news__block {
border-radius: 20px;
padding: 32px;
}
.p-news-banner {
padding-block: 46px;
}
.p-news-banner__inner.l-inner {
max-width: 740px;
}
.p-message {
padding-block: 100px;
}
.p-message__inner.l-inner {
gap: 48px;
}
.p-message__card {
border-radius: 20px;
gap: 48px;
padding: 37px 32px 20px;
}
.p-message__youtube {
max-width: 550px;
}
.p-cta {
padding-block: 60px;
}
.p-cta::after {
height: 251px;
}
.p-cta__card {
border-radius: 30px;
min-height: 306px;
}
.p-cta__title {
font-size: 22px;
font-weight: 500;
line-height: normal;
}
.p-cta__button {
width: 200px;
}
.p-catch {
padding-block: 60px;
}
.p-catch__text {
font-size: 60px;
}
.u-pc {
display: block !important;
}
.u-sp {
display: none !important;
}
}
@media screen and (min-width: 1024px) {
.c-section-title__ja {
font-family: "Noto Sans JP", sans-serif;
font-size: 28px !important;
font-weight: 700;
}
.p-greeting__card {
border-radius: 20px;
display: flex;
max-width: 1080px;
}
.p-greeting__card-main {
border-bottom: 1px solid #b00a0a;
border-radius: 20px 0 0 20px;
border-right: none;
flex: 1 1 auto;
min-width: 0;
}
.p-greeting__card-head {
border-radius: 20px 0 0 0;
}
.p-greeting__figure {
align-self: stretch;
flex: 0 0 435px;
width: 435px;
}
.okagawajuku-front .p-greeting__figure .p-greeting__img {
aspect-ratio: auto;
border-radius: 0 20px 20px 0;
height: 100%;
}
.p-courses__tablist {
grid-template-columns: repeat(3, 1fr);
margin-block-start: 48px;
max-width: 741px;
}
.p-courses__panel {
margin-block-start: 36px;
max-width: 1079px;
}
.p-courses__card {
align-items: flex-start;
border-radius: 20px;
flex-direction: row;
gap: 32px;
justify-content: space-between;
padding: 32px 29px 29px 34px;
}
.p-courses__card-body {
flex: 0 0 460px;
gap: 35px;
width: 460px;
}
.p-courses__card-media {
flex: 0 0 447px;
width: 447px;
}
.p-courses__card--media-only .p-courses__card-media {
flex: 1 1 auto;
flex-direction: row;
gap: 16px;
width: 100%;
}
.p-courses__card-col {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.p-courses__card-col--left {
flex: 0 1 550px;
max-width: 550px;
}
.p-courses__card-col--right {
flex: 0 1 450px;
max-width: 450px;
}
.p-courses__card-col--full {
flex: 1 1 auto;
width: 100%;
}
.p-courses__card--media-only .p-courses__card-figure--o1 {
order: 0;
}
.p-courses__card--media-only .p-courses__card-figure--o2 {
order: 0;
}
.p-courses__card--media-only .p-courses__card-figure--o3 {
order: 0;
}
.p-courses__card--media-only .p-courses__card-figure--o4 {
order: 0;
}
.p-courses__card--media-only .p-courses__card-figure--o5 {
order: 0;
}
.p-courses__card--media-only .p-courses__card-figure--o6 {
order: 0;
}
.p-courses__card--media-only .p-courses__card-figure--o7 {
order: 0;
}
.p-courses__card--media-only .p-courses__card-figure--o1 {
margin-bottom: 0;
}
.p-courses__btn {
font-size: 18px;
padding: 16px 100px;
}
.p-courses__more {
margin-block-start: 49px;
}
.p-strength__slider {
margin-block-start: 90px;
}
.p-strength__controls {
margin-block-start: 90px;
}
.okagawajuku-front .p-results__hero {
margin-block-start: 60px;
}
.p-results__group-title {
margin-block-start: 49px;
}
.p-results__card-title {
font-size: 20px;
}
.p-results__more {
margin-block-start: 48px;
}
.p-about__cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 340px));
-moz-column-gap: 30px;
column-gap: 30px;
justify-content: center;
margin-block-start: 47px;
row-gap: 16px;
}
.p-about__card {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
margin-inline: 0;
max-width: 100%;
}
.p-about__card-title {
grid-row: 1;
}
.p-about__card-figure,
.p-about__gallery {
grid-row: 2;
}
.p-about__card-body {
grid-row: 3;
}
.p-about__card > .c-button {
grid-row: 4;
justify-self: center;
}
.p-classroom__title {
font-size: 18px;
}
.p-news__blocks {
margin-inline: 0;
max-width: 100%;
}
.p-news__block {
align-items: flex-start;
flex-direction: row;
gap: 0;
justify-content: space-between;
}
.p-news__aside {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 48px;
}
.p-news__heading {
align-items: flex-start;
text-align: left;
}
.p-news__more {
font-size: 18px;
order: 0;
}
.p-news__list {
flex-shrink: 0;
width: 620px;
}
.p-cta__cards {
flex-direction: row;
gap: 30px;
justify-content: space-between;
}
.p-header__inner {
gap: 19px;
margin-inline: auto;
padding: 24px 32px;
width: min(1280px, 100%);
}
.p-header__brand {
align-items: center;
display: flex;
flex-direction: column;
gap: 20px;
padding-block-start: 15px;
}
.p-header__logo-sp {
display: none;
}
.p-header__logo-img {
display: block;
}
.p-header__tagline {
display: block;
padding-inline-start: 10px;
}
.p-header__body {
align-items: flex-end;
display: flex;
flex: 1;
flex-direction: column;
gap: 15px;
min-width: 0;
}
.p-header__utility {
align-items: center;
display: flex;
gap: 8px;
}
.p-header__cta {
align-items: stretch;
display: flex;
gap: 8px;
}
.p-header__toggle {
display: none;
}
.p-drawer__overlay {
display: none;
}
.p-drawer {
display: none;
}
.p-footer {
--footer-split: calc(max(0px, (100vw - 1440px) / 2) + 414px);
background: linear-gradient(to right, #f5f5f5 0, #f5f5f5 var(--footer-split), #333333 var(--footer-split), #333333 100%);
}
.p-footer__inner {
align-items: stretch;
flex-direction: row;
}
.p-footer__brand {
flex-shrink: 0;
padding: 80px 13px 80px 57px;
width: 414px;
}
.p-footer__logo img {
width: 202px;
}
.p-footer__cta {
margin-block-start: 73px;
}
.p-footer__body {
flex: 1 1 auto;
gap: 68px;
padding: 80px 0;
}
.p-footer__nav {
padding-left: 80px;
}
.p-footer__columns {
flex-direction: row;
gap: 48px;
margin-inline: 0;
max-width: 100%;
}
.p-footer__item {
border-bottom: 0;
margin-block-end: 24px;
}
.p-footer__heading {
font-size: 16px;
justify-content: flex-start;
}
.p-footer__trigger {
display: none;
}
.p-footer__submenu {
max-height: none !important;
overflow: visible;
}
.p-footer__sublist {
padding-inline-start: 24px;
}
.p-footer__subitem {
background: transparent;
border-bottom: 0;
}
.p-footer__sublink {
color: #ffffff;
padding: 8px;
}
.p-footer__sublink:hover {
color: #ffffff;
}
.p-footer__meta {
align-items: flex-end;
gap: 2px;
padding-right: 80px;
text-align: right;
}
.p-footer__links {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
margin-inline: 0;
max-width: none;
}
.p-footer__links-item {
padding-block: 0;
padding-inline: 8px;
}
.p-footer__links-item + .p-footer__links-item::before {
background-color: #ffffff;
content: "";
display: inline-block;
height: 10px;
margin-inline-end: 16px;
margin-inline-start: -8px;
vertical-align: middle;
width: 1px;
}
.p-footer__meta-divider {
display: none;
}
.p-footer__copyright {
text-align: right;
}
.p-footer__copyright br {
display: none;
}
.p-footer__pagetop {
bottom: 40px;
right: 20px;
}
}
@media screen and (min-width: 1200px) {
.p-greeting__card-head {
flex-direction: row;
}
.p-message__youtube {
max-width: 660px;
}
.p-header__link {
padding-inline: 16px 15px;
}
}
@media screen and (min-width: 1280px) {
.p-footer {
--footer-edge: min(120px, calc(100vw * 120 / 1440));
}
.p-footer__columns {
justify-content: flex-start;
}
.p-footer__column {
display: flex;
flex: 0 0 auto;
flex-direction: column;
gap: 16px;
}
}