/* 全体 */
:root {
    /* ブランドカラー */
    --base: #0A6FB7;

    /* ブランドカラー / 強調 */
    --base-600:#095F9C;

    /* アクセントカラー */
    --accent:#F47A1F;

    /*　背景色　*/
    --s-aqua: #22B8B0;

    /* 表面（背景色） */
    --surface: #F6FAFD;

    /* 見出し｜基本 */
    --heading: #0E3452;

    /* 本文｜基本 */
    --text: #133A55;

    /* 本文｜強調 */
    --text-strong:#0E3452;

    /* 背景色｜基本 */
    --bg:   #fff; 

    /* 背景色｜青地 */
    --bluebg: #0A6FB7; 

    /* 背景色｜水色 */
    --aquabg: #F6FAFD;

    /* リンク色 */
    --link: #085791;

    /* ホバー */
    --hover: #54b8ff34;

    /* 枠線色 */
    --border: #CFE6F5;

    /* 余白 */
    --space: 1rem;

    /* 日本語フォント */
    --font-sans-jp: "Noto Sans JP",
                    "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                    "Yu Gothic Medium", "Yu Gothic", Meiryo,
                    system-ui, -apple-system, "Segoe UI", Arial, sans-serif,
                    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

    /* 英語フォント */
    --font-sans-en: "Montserrat",
                    Inter, "Segoe UI", "Helvetica Neue",
                    Arial, system-ui, sans-serif,
                    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    
    /* CTAボタン / 背景 */
    --cta-bg: #F47A1F;

    /* CTAボタン / 文字色 */
    --cta-text: #0E3452;

    /* CTAボタン2 / 背景 */
    --cta-bg-alt: #C45000;

    /* CTAボタン2 / 文字色 */
    --cta-text-alt: #FFFFFF;

    /* スライドショー */
    /* スライド枚数 */
    --n: 7;

    /* 1枚あたりの表示時間（フェード含む） */
    --step: 5s; 
    /* 固定ヘッダー高さ */
    --header-h:7vh;
}

/* スタイルシートのリセット */
/* すべての要素の幅・高さにpadding/borderを含めて計算し、サイズずれを防ぐ */
html {
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
}

*::before,
*::after {
    box-sizing: inherit;
}

/* htmlにまとめて適用：
   - scroll-snap-type: 縦方向スクロールで“近い位置”にだけスナップ（強制しすぎないproximity）。
   - scroll-padding-top: 固定ヘッダー分(ここでは7vh)をオフセット。アンカーリンクや scrollIntoView のズレ防止。
   - color: サイト全体の文字色を CSS変数(--text)で集中管理（テーマ切替も容易）。
   - height: 100%を基準化。body側の min-height:100% と組み合わせると全高レイアウトが安定。
*/
html {
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--header-h);
    color: var(--text);
    height: 100%;
}

/* 行頭記号と余白の削除 */
ul {
    padding: 0;
    list-style-type: none;
}

/* 見出し・段落の余白を一旦ゼロに（予期せぬmargin相殺を防ぐ） */
:where( h1, h2, h3, h4, h5, h6, p) {
    margin: 0;
}

/* olもulに合わせて余白/マーカーを整理（横並びやカスタムマーカー前提） */
:where(ol) {
    list-style-type: none;
    padding: 0;
}

:where(ol) {
    list-style-type: decimal;
    margin:0;
    padding-left: var(--space) * 1.25;
}

/* 画像・メディアは行内の“ベースライン隙間”回避＆親幅にフィット */
:where( img, svg, video, canvas) {
    display:block;
    max-width:100%;
    height:auto;
}

/* aは色・装飾を文脈に合わせやすく（クラス未指定のみ） */
a:not([class]) {
    color:inherit;
    text-decoration-skip-ink:auto;
}

/* テーブルの二重線を防ぐ＆余白起因のズレ削減 */
table {
    border-collapse:collapse;
    border-spacing:0;
}

:where(th) {
    text-align:left;
    font-weight:600;
}

:where(td,th) {
    padding: 0;
}

/* フォーム系は“OS依存のフォント差”を吸収 */
:where(button,input,select,textarea) {
    font:inherit; color:inherit;
}

button {
    cursor:pointer;
}

/* 英語のフォント指定 / Montserrat使用 */
.en {
    font-family: var(--font-sans-en);
    font-weight: 400;
}

a {
    color: inherit;
    text-decoration: none;
}

body {
    height: 100%;
    font-size: 100%;
    margin: 0;
    position: relative;
    color: var(--text);
    font-family: var(--font-sans-jp);
    line-height: 1.7;
    letter-spacing: 0.02em; /* 日本語はやや詰まりやすいので微調整 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* メインコンテンツ */
/* ヘッダーメニュー分の余白を確保 */

main {
    margin-top: var(--header-h);
}