@charset "UTF-8";
/* ============================================================
   教室日程バナー（school-schedule）
   MLR 教室日程バナー プラグイン同梱CSS（v2.0）

   このファイルは、ショートコード [school_schedule] が実際に
   使われているページでのみ読み込まれる。

   デザインの微調整は、まず下の変数（--mlr-◯◯）を変える。
   変数を変えれば全エリアのバナーに一括で反映される。
   ============================================================ */

.school-schedule {
    /* ---- 色 ---- */
    --mlr-blue:      #0074bf;   /* 主役。日付バッジ・電話枠 */
    --mlr-blue-deep: #174e9e;   /* 電話番号の文字 */
    --mlr-aqua:      #019fe6;   /* フォーカスリング */
    --mlr-red:       #c60019;   /* タイトル */
    --mlr-subtitle:  #174e9e;   /* サブタイトル（落ち着いた濃紺） */
    --mlr-text:      #222;      /* 本文 */
    --mlr-muted:     #5a6b78;   /* 補足テキスト */
    --mlr-surface:   #f4fafd;   /* カード下部の淡い水色 */
    --mlr-border:    #cde3f1;   /* カードの枠線 */

    /* ---- 寸法 ---- */
    --mlr-radius:    14px;      /* カードの角丸 */
    --mlr-gap:       24px;      /* 画像とコンテンツの間隔 */
    --mlr-btn-min:   220px;     /* ボタン1個の最小幅。これを下回ると1列になる */

    background: linear-gradient(180deg, #fff 0%, var(--mlr-surface) 100%);
    border: 1px solid var(--mlr-border);
    border-radius: var(--mlr-radius);
    box-shadow: 0 1px 2px rgba(23, 78, 158, .05),
                0 8px 24px rgba(23, 78, 158, .06);
    color: var(--mlr-text);
    padding: 24px;
    box-sizing: border-box;

	/* ---- フォントサイズ ---- */
	font-size: 15px;   /* ここを基準に各要素で倍率指定している */

}
.school-schedule * {
    box-sizing: border-box;
}

/* テーマ側の #Contents p { margin-bottom:1em } を打ち消す。
   間隔は .schedule-content の gap でまとめて管理する。 */
.school-schedule p,
#Contents .school-schedule p {
    margin: 0;
}

/* ---- レイアウト: 横並び（左画像・右コンテンツ） ---- */
.school-schedule.layout-side {
    display: flex;
    align-items: flex-start;
    gap: var(--mlr-gap);
}
.layout-side .school-image {
    flex: 0 0 44%;
    max-width: 44%;
    min-width: 0;
}
.layout-side .schedule-content {
    flex: 1 1 0;
    min-width: 0;
}

/* ---- レイアウト: 縦並び（中央揃え） ---- */
.school-schedule.layout-stack {
    display: block;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.layout-stack .school-image {
    max-width: 280px;
    margin: 0 auto 16px;
}

/* ---- コンテンツ側の縦間隔 ---- */
.schedule-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.layout-stack .schedule-content {
    align-items: center;
}

/* ---- 画像 ---- */
/* リンクURLを入れた場合だけ <a> で包まれる。ボタンと同じ反応にしてある。 */
.school-image-link {
    display: block;
    border-radius: 10px;
    /* 拡大した画像が角から はみ出さないように切り取る */
    overflow: hidden;
}
/* ホバーで画像だけを少し拡大する。枠の大きさは変わらない。
   拡大率を変えたいときは下の 1.06 を調整する（1.03=控えめ / 1.10=大きめ）。 */
.school-image-link img {
    transition: transform .35s ease;
}
.school-image-link:hover img,
.school-image-link:focus-visible img {
    transform: scale(1.06);
}
.school-image-link:focus-visible {
    outline: 3px solid var(--mlr-aqua);
    outline-offset: 3px;
}
.school-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* ---- 日付（青いバッジ） ---- */
.schedule-date {
    align-self: flex-start;
    background: var(--mlr-blue);
    color: #fff;
    font-weight: bold;
    font-size: 1.05em;
    line-height: 1.35;
    padding: 5px 16px;
    border-radius: 999px;
    letter-spacing: .02em;
}

/* ---- 日付の補足（「毎週土日開催」など） ---- */
.schedule-date-note {
    font-size: 1.1em;
    color: var(--mlr-muted);
}

/* ---- タイトル（ACFの「タイトル」＝ notice_red） ----
   バナーの見出し。案内文の上に出る。
   サイト共通の強調赤を使い、サイズで見出しらしさを出している。 */
.schedule-notice-red {
    color: var(--mlr-red);
    font-weight: bold;
    font-size: 1.35em;
    line-height: 1.4;
    letter-spacing: .01em;
}

/* ---- 案内文（ACFの「案内文」＝ notice_text） ----
   テキストエリアなので、入力した改行がそのまま反映される。 */
.schedule-notice {
    line-height: 1.6;
}

/* ---- サブタイトル（ACFの「サブタイトル」＝ set_label） ----
   ボタン群の直前に出る小見出し。
   赤はタイトルで使っているので、ここはテーマの濃紺で落ち着かせる。 */
.schedule-set-label {
    color: var(--mlr-subtitle);
    font-weight: bold;
    font-size: 1.05em;
    line-height: 1.5;
    letter-spacing: .02em;
    /* ボタンとの間隔を詰めて、ボタンの見出しに見えるようにする */
    margin-bottom: -4px;
}
/* グループを複数置いたとき、切れ目を少し広げて区切りを分かりやすくする */
.schedule-buttons + .schedule-set-label {
    margin-top: 8px;
}

/* ---- ボタン画像 ----
   幅に応じて列数が自動で決まる。
   右カラムが狭ければ1列（東京）、広ければ2列（名古屋）。
   列数を固定したいときは --mlr-btn-min を調整する。 */
.schedule-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--mlr-btn-min), 1fr));
    gap: 12px;
    width: 100%;
}
.layout-stack .schedule-buttons {
    grid-template-columns: 1fr;
}
.schedule-btn {
    display: block;
    border-radius: 10px;
    transition: transform .18s ease, box-shadow .18s ease;
}
/* ---- 画像のボタン ---- */
.schedule-btn img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* ---- 文字のボタン（CSSで描く） ----
   色は「青 / 緑 / 水色 / 濃紺」の4種類。
   編集画面では色名を選ぶだけで、実際の配色はここで決まる。
   色を変えたいときは、この4つのグラデーションを直せば
   全エリアの全ボタンに反映される。 */
.schedule-btn--text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 12px 16px;
    text-align: center;
    background: linear-gradient(180deg, #2f9fdc 0%, #1478bd 100%);
}
/* テーマ側の a:link / a:hover より強い指定にしておく */
.school-schedule .schedule-btn--text,
#Contents .school-schedule .schedule-btn--text,
.school-schedule .schedule-btn:hover,
#Contents .school-schedule .schedule-btn:hover {
    color: #fff;
    text-decoration: none;
}
.schedule-btn--text .btn-sub {
    display: block;
    font-size: 1em;
    line-height: 1.35;
    opacity: .95;
}
.schedule-btn--text .btn-label {
    display: block;
    font-size: 1.30em;
    font-weight: bold;
    line-height: 1.35;
}
.schedule-btn--text.is-green {
    background: linear-gradient(180deg, #6fc95f 0%, #3f9e3a 100%);
}
.schedule-btn--text.is-aqua {
    background: linear-gradient(180deg, #4cc3ef 0%, #019fe6 100%);
}
.schedule-btn--text.is-navy {
    background: linear-gradient(180deg, #2f5fa8 0%, #174e9e 100%);
}
.schedule-btn:hover,
.schedule-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 116, 191, .22);
}
.schedule-btn:focus-visible {
    outline: 3px solid var(--mlr-aqua);
    outline-offset: 3px;
}

/* ---- 電話番号 ----
   アイコン付きの青いブロック。左にアイコン、右上に事務所名、
   右下に番号を置いている。事務所名が空でも崩れない。 */
.schedule-tel {
    align-self: flex-start;
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "icon label"
        "icon number";
    align-items: center;
    column-gap: 12px;
    background: linear-gradient(135deg, var(--mlr-blue) 0%, var(--mlr-blue-deep) 100%);
    border-radius: 12px;
    padding: 10px 20px;
    box-shadow: 0 4px 12px rgba(0, 116, 191, .25);
    text-align: left;
    transition: transform .18s ease, box-shadow .18s ease;
}
.schedule-tel:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 116, 191, .3);
}
/* 受話器アイコン（画像ファイル不要。CSSに埋め込んである） */
.schedule-tel::before {
    grid-area: icon;
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .18);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 19px 19px;
}
.schedule-tel .tel-label {
    grid-area: label;
    align-self: end;
    font-size: .90em;
    font-weight: bold;
    color: rgba(255, 255, 255, .85);
    letter-spacing: .08em;
    line-height: 1.4;
}
/* テーマ側の a:link より強い指定にしておく */
.school-schedule .schedule-tel a,
#Contents .school-schedule .schedule-tel a {
    grid-area: number;
    align-self: start;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

/* ---- スマホ ---- */
@media (max-width: 768px) {
    .school-schedule {
        padding: 16px;
    }
    .school-schedule.layout-side {
        display: block;
    }
    .layout-side .school-image {
        max-width: 100%;
        margin-bottom: 16px;
    }
    .schedule-buttons {
        grid-template-columns: 1fr;
    }
}

/* ---- 動きを減らす設定にしている利用者への配慮 ---- */
@media (prefers-reduced-motion: reduce) {
    .schedule-btn,
    .schedule-tel,
    .school-image-link img {
        transition: none;
    }
    .schedule-btn:hover,
    .schedule-btn:focus-visible,
    .schedule-tel:hover,
    .school-image-link:hover img,
    .school-image-link:focus-visible img {
        transform: none;
    }
}