/* #全体方針
   - ビューポート高さを使う箇所は全て svh を採用（スマホ基準）。
   - 横向き時のみ orientation: landscape で最小限の圧縮を行う。
   - セクション毎に役割をコメントで明示。
   - プレミアム感のある配色とアニメーションを採用。 */

/* #フォント: Noto Serif JP を自己ホスト（Regular/Bold） */
@font-face {
    font-family: "Noto Serif JP";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/35689.ttf") format("truetype");
}

@font-face {
    font-family: "Noto Serif JP";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/fonts/35690.ttf") format("truetype");
}

/* #フォント: Point Number Font */
@font-face {
    font-family: "NumberFont";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/Font_completed/numberfont.ttf") format("truetype");
}

/* #フォント: Point 2 Sub-labels (Press Regular 1) */
@font-face {
    font-family: "PressNumberFont";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/Font_completed/Press_Regular_1.ttf") format("truetype");
}

/* #全体のカラー・フォント定義 */
:root {
    --bg: #fdfdfd;
    --text: #1a202c;
    --maintext: #192146;
    --muted: #4a5568;
    --accent: #283779;
    --accent-light: #e6f0f5;
    --gold: #f6d392;
    --border: #e2e8f0;
    --shadow-sm: 0 1.07vw 1.6vw -0.27vw rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2.67vw 4vw -0.8vw rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 5.33vw 6.67vw -1.33vw rgba(0, 0, 0, 0.1);
    --font-main: "Noto Serif JP", "Hiragino Mincho ProN", serif;
    --font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;

    /* Text Shadows (Relative) */
    --text-shadow-sm: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.4);
    --text-shadow-md: 0.15em 0.15em 0.3em rgba(0, 0, 0, 0.8);
    --text-shadow-lg: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.8);

    --intro-bg-dark: #01081c;
}

/* #リセット: ボックスサイズを統一 */
* {
    box-sizing: border-box;
}

/* #共通: ベース */
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.75;
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* 横スクロール防止 */
}

/* #共通: リンク */
a {
    color: inherit;
    text-decoration: none;
    transition: 0.3s ease;
}

/* #共通: アクセシビリティ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* #共通: ページ幅 */
.page {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    /* overflow-x: hidden; 削除: bodyに移動 */
}

.page--lp-a {
    box-shadow: 0 0 10.67vw rgba(0, 0, 0, 0.05);
}

/* #アニメーション用ユーティリティ */
.fade-up,
.slide-in,
.scale-in {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up {
    transform: translateY(8vw);
}

.slide-in {
    transform: translateX(-5.33vw);
}

.scale-in {
    transform: scale(0.9);
}

.is-visible {
    opacity: 1;
    transform: none;
}

.page {
    max-width: 100%;
}

/* #共通: アニメーションキーフレーム (各ファイルから集約) */
@keyframes fadeInText {
    to {
        opacity: 1;
    }
}

@keyframes fadeUpPerson {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.8;
        transform: translateX(-50%) translateY(0);
    }

    50% {
        opacity: 0.4;
        transform: translateX(-50%) translateY(1.33vw);
    }
}