@charset "UTF-8";

/* ============================================================
   全ページ共通
   ============================================================ */

/* 背景色は html に置き body には置かない
   （z-index: -1 で背面に敷いた固定要素を body の背景が覆わないようにするため）。
   overscroll-behavior: none も同じ理由で外さない */
html {
    background-color: #f1f9ff;
    overscroll-behavior: none;
    scroll-behavior: smooth;
}

body {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #222;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* 桜の装飾が画面外にはみ出しても横スクロールが出ないようにする。
   overflow: hidden だと position: sticky が効かなくなるため clip を使う */
.wrapper {
    position: relative;
    overflow-x: clip;
}

/* ===== レイアウト幅 ===== */
.inner {
    width: 90%;
    max-width: 1060px;
    margin-inline: auto;
}

.inner__small {
    width: 90%;
    max-width: 630px;
    margin-inline: auto;
}

/* ===== セクション見出し（「＼ リード ／」+ タイトル） ===== */
.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.section-header__lead {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    line-height: 40px;
    color: #0b41a0;
}

/* 左右の斜線（＼ ／）。文字ではなく線で描くのはデザインの細さ・角度に合わせるため */
.section-header__lead::before,
.section-header__lead::after {
    content: "";
    width: 1px;
    height: 22px;
    background-color: #0b41a0;
    transform: rotate(-30deg);
}

.section-header__lead::after {
    transform: rotate(30deg);
}

.section-header__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    color: #0b41a0;
}

/* ===== 桜の装飾（共通） =====
   各セクションに絶対配置で散らす。位置は各セクションの CSS で指定。
   left はデザイン幅 1500px の中央基準（calc(50% ± px)）で書き、画面幅が変わっても本文との位置関係を保つ */
.sakura {
    position: absolute;
    z-index: 1;
    height: auto;
    pointer-events: none;
}

/* ===== ユーティリティ ===== */
/* スクリーンリーダー向けに文字だけ残して見た目を消す */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* PC で非表示・SP で表示 */
.pc-none {
    display: none;
}

@media (max-width: 768px) {
    .section-header__lead {
        gap: 8px;
        font-size: 14px;
        line-height: 1.6;
    }

    .section-header__lead::before,
    .section-header__lead::after {
        height: 18px;
    }

    .section-header__title {
        font-size: 26px;
        line-height: 1.4;
    }

    /* SP では桜が本文に被りやすいので装飾は出さない */
    .sakura {
        display: none;
    }

    .pc-none {
        display: revert;
    }

    /* SP で非表示 */
    .sp-none {
        display: none;
    }
}

/* 視差効果を減らす設定のときはスムーススクロールを止める */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}