/* ============================================================
   ページ固有スタイル
   assets/css/pages.css
   ============================================================ */

/* ------------------------------------------------------------
   トップページ ヒーロー
   ------------------------------------------------------------ */

.hero {
    position: relative;
    padding-block: var(--sp-10);
    background:
        radial-gradient(circle at 15% 20%, rgba(15, 123, 138, 0.10), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(239, 108, 26, 0.10), transparent 45%),
        var(--c-bg-subtle);
    overflow: hidden;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--sp-8);
    align-items: center;
}

.hero__eyebrow {
    display: inline-block;
    padding: var(--sp-1) var(--sp-4);
    margin-bottom: var(--sp-4);
    background: var(--c-primary);
    color: var(--c-text-inverse);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.hero__title {
    font-size: var(--fs-3xl);
    line-height: 1.35;
    color: var(--c-primary-dark);
}

.hero__title em {
    font-style: normal;
    color: var(--c-accent-dark);
}

.hero__text {
    margin-top: var(--sp-5);
    font-size: var(--fs-md);
    color: var(--c-text-muted);
    max-width: 34em;
}

.hero__actions {
    margin-top: var(--sp-7);
}

.hero__points {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-6);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.hero__point {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

.hero__point-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--c-accent-light);
    color: var(--c-accent-dark);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.hero__point-body strong {
    display: block;
    color: var(--c-primary-dark);
}

.hero__point-body span {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

@media (max-width: 900px) {
    .hero {
        padding-block: var(--sp-8);
    }

    .hero__inner {
        grid-template-columns: 1fr;
    }
}

/*
   訴求ポイントの箇条書き。
   管理画面から <ul><li><strong>見出し</strong>説明</li></ul> の形で書いた内容を、
   番号付きのカードとして見せる。
*/
.hero__point-list ul,
.hero__point-list ol {
    /* 上の料金カードが1番なので、この一覧は2番から始める */
    counter-reset: hero-point 1;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sp-3);
}

/* 料金カードを出していないときは1番から */
.hero__point-list--first ul,
.hero__point-list--first ol {
    counter-reset: hero-point 0;
}

.hero__point-list li {
    counter-increment: hero-point;
    position: relative;
    margin: 0;
    padding-left: calc(34px + var(--sp-3));
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: 1.7;
}

.hero__point-list li::before {
    content: counter(hero-point);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--c-accent-light);
    color: var(--c-accent-dark);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.hero__point-list li strong {
    display: block;
    color: var(--c-primary-dark);
    font-size: var(--fs-base);
}

/* ------------------------------------------------------------
   手順（管理画面で書いた番号付きリストを steps 風に見せる）
   ------------------------------------------------------------ */

.steps-prose ol {
    counter-reset: step;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sp-4);
}

.steps-prose ol > li {
    counter-increment: step;
    position: relative;
    margin: 0;
    padding: var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-9) + var(--sp-2));
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.steps-prose ol > li::before {
    content: counter(step);
    position: absolute;
    top: var(--sp-5);
    left: var(--sp-5);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-text-inverse);
    font-weight: 700;
}

.steps-prose ol > li strong {
    display: block;
    font-size: var(--fs-md);
    color: var(--c-primary-dark);
    margin-bottom: var(--sp-2);
}

/* ------------------------------------------------------------
   トップページ お知らせ欄
   ------------------------------------------------------------ */

.home-news__more {
    margin-top: var(--sp-6);
    text-align: center;
}

/* ------------------------------------------------------------
   教室案内 時間割
   ------------------------------------------------------------ */

.schedule-group + .schedule-group {
    margin-top: var(--sp-6);
}

.schedule-group__title {
    display: inline-block;
    padding: var(--sp-1) var(--sp-4);
    margin-bottom: var(--sp-3);
    background: var(--c-primary-light);
    color: var(--c-primary-dark);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
}

.fee-highlight {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: center;
}

.fee-card {
    flex: 1 1 220px;
    max-width: 320px;
    padding: var(--sp-6);
    text-align: center;
    background: var(--c-bg);
    border: 2px solid var(--c-primary-border);
    border-radius: var(--radius-lg);
}

.fee-card__label {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.fee-card__price {
    margin-top: var(--sp-2);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--c-accent-dark);
    line-height: 1.2;
}

.fee-card__note {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

/* ------------------------------------------------------------
   地図の埋め込み
   ------------------------------------------------------------ */

.map-embed {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
}

.map-embed iframe {
    width: 100%;
    height: 380px;
    border: 0;
}

@media (max-width: 640px) {
    .map-embed iframe {
        height: 280px;
    }
}

/* ------------------------------------------------------------
   写真ギャラリー
   ------------------------------------------------------------ */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-4);
}

.gallery figure {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-bg);
}

.gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.gallery figcaption {
    padding: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    text-align: center;
}

/* ------------------------------------------------------------
   お知らせ詳細
   ------------------------------------------------------------ */

.article-head {
    padding-bottom: var(--sp-5);
    margin-bottom: var(--sp-6);
    border-bottom: 2px solid var(--c-primary-border);
}

.article-head__date {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

.article-head__title {
    margin-top: var(--sp-2);
    font-size: var(--fs-xl);
    color: var(--c-primary-dark);
}

.article-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-border);
}

.article-nav a {
    max-width: 45%;
    font-size: var(--fs-sm);
}

@media (max-width: 640px) {
    .article-nav a {
        max-width: 100%;
    }
}

/* ------------------------------------------------------------
   年別アーカイブ
   ------------------------------------------------------------ */

.archive-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    padding: 0;
    list-style: none;
}

.archive-filter li {
    margin: 0;
}

.archive-filter a,
.archive-filter button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-inline: var(--sp-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    text-decoration: none;
    color: var(--c-text);
    background: var(--c-bg);
}

.archive-filter a:hover,
.archive-filter button:hover {
    background: var(--c-primary-light);
    color: var(--c-primary-dark);
}

.archive-filter button {
    font-family: inherit;
    cursor: pointer;
}

.archive-filter a.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-text-inverse);
    font-weight: 700;
}

/* ------------------------------------------------------------
   404
   ------------------------------------------------------------ */

.error-page {
    padding-block: var(--sp-10);
    text-align: center;
}

.error-page__code {
    font-size: var(--fs-3xl);
    color: var(--c-primary);
    letter-spacing: 0.1em;
}

.error-page__title {
    margin-top: var(--sp-3);
    font-size: var(--fs-xl);
}

.error-page__text {
    margin-top: var(--sp-4);
    color: var(--c-text-muted);
}

.error-page__actions {
    margin-top: var(--sp-7);
}

/* ------------------------------------------------------------
   フォームページ
   ------------------------------------------------------------ */

.form-page {
    padding-block: var(--sp-8);
}

.form-intro {
    margin-bottom: var(--sp-7);
}

.form-steps {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-7);
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.form-steps li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-pill);
    background: var(--c-bg-sunken);
    color: var(--c-text-muted);
}

.form-steps li.is-current {
    background: var(--c-primary);
    color: var(--c-text-inverse);
    font-weight: 700;
}

.form-steps li.is-done {
    background: var(--c-primary-light);
    color: var(--c-primary-dark);
}

@media (max-width: 640px) {
    .form-steps {
        font-size: var(--fs-xs);
    }

    .form-steps li {
        padding: var(--sp-2) var(--sp-3);
    }
}

.complete-panel {
    padding: var(--sp-8);
    text-align: center;
    background: var(--c-success-bg);
    border: 1px solid var(--c-success);
    border-radius: var(--radius-lg);
}

.complete-panel__title {
    font-size: var(--fs-xl);
    color: var(--c-success);
    margin-bottom: var(--sp-4);
}