@charset "UTF-8";

/*Zen Kaku Gothic New の読み込み（未インストールの環境でもデザイン通りに出すため）*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

/* --共通部分-- */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}

:root {
    --main-color: #B51D2C;
    --accent1-color: #FED472;
    --accent2-color: #668834;
    --accent3-color: #F88E5E;
    --font-color: #470000;
    --sub-color: #FFF4D8;
    --back-color: #F9F9F9;
    --supplement1-color: #7C7473;
    --supplement2-color: #DCE2E5;
    --lattice-color: #E7EBED;
    --placeholder-color: #d9d9d9;
    /*写真・画像のプレースホルダー用の臰色*/
}

body,
h1,
h2,
h3,
p,
ol,
ul,
li {
    /*max-width: 414px;*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*
      overflow-x: clip … hidden と違い、スクロールコンテキストを作らないので
      overflow-y が auto に変わる副作用がなく、各所に書いていた
      overflow: visible の上書きが不要になる
    */
    overflow-x: clip;
}

h2 {
    border-left: 4px solid var(--main-color);
    padding: 0 8px;
}

body {
    font-family: 'Zen Kaku Gothic New';
    color: var(--font-color);
    line-height: 1.6;
    background-color: var(--back-color);
    background-image:
        linear-gradient(0deg, var(--lattice-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--lattice-color) 1px, transparent 1px);
    background-size: 40px 40px;
}

img {
    max-width: 100%;
}

.header-band {
    height: 20px;
    background-color: var(--main-color);
}

.content-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

/* --ページヘッダー-- */
.page-header {
    text-align: center;
    margin-top: -14px;
    margin-bottom: 2px;
}

.logo-area {
    display: inline-block;
    position: relative;
    overflow: visible;
}

.title {
    display: block;
    position: relative;
    z-index: 2;
}

.sub-logo {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.main-logo-text {
    font-size: 28px;
    color: var(--main-color);
    font-weight: bold;
}

/*タイトル背後の足跡*/
.footprints {
    display: flex;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 370px;
    max-width: none;
    justify-content: center;

    pointer-events: none;
}

/* --最初のページ-- */
.description {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    color: var(--font-color);
    margin-bottom: 0;
    letter-spacing: 3px;
}

.highlight-num {
    font-size: 20px;
    color: var(--main-color);
    font-weight: bold;
}

.highlight-2 {
    font-size: 20px;
    color: var(--accent2-color);
    font-weight: bold;
}

/*ステップ*/
.steps-card {
    margin: 5px -5px 4rem;
    background: var(--sub-color);
    border-radius: 14px;
    padding: 5px 20px 6px;
}

.step-image {
    max-width: 100%;
    margin: auto;
    display: block;
}

.step {
    padding: 10px 0 12px;
    border-bottom: 1px dashed var(--accent2-color);
    text-align: center;
}

.step:last-child {
    border-bottom: none;
}

.step h3 {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--font-color);
    font-weight: 700;
}

.step p {
    margin: 0;
    font-size: 12.5px;
    color: var(--supplement1-color);
    /*元: --ink-soft（未定義変数）*/
    line-height: 1.6;
}

/*参加方法*/

.participation-section {
    margin-bottom: 64px;
}

.section-title {
    font-size: 20px;
    text-align: left;
    margin-bottom: 10px;
}

.section-desc {
    font-size: 14px;
    text-align: left;
    margin-bottom: 25px;
}

.method-card {
    margin: 5px -5px 30px;
    background: var(--sub-color);
    border-radius: 14px;
    padding: 5px 20px 6px;
}

.method-title {
    font-weight: bold;
    font-size: 16px;
    margin-left: 31px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.method-card ol {
    font-size: 14px;
    list-style-type: none;
    counter-reset: my-counter;
}

.method-card ol li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}

.method-card ol li:last-child {
    margin-bottom: 0;
}

.method-card ol li::before {
    counter-increment: my-counter;
    content: counter(my-counter) ". ";
    color: #795548;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.line {
    margin-top: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--font-color);
    text-align: center;
}

/* アクションボタン */
.action-buttons {
    text-align: center;
}

.btn-register {
    display: inline-block;
    background-color: var(--main-color);
    color: #fff;
    text-decoration: none;
    padding: 12px 60px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    transition: background-color 0.3s;
}

.btn-register:hover {
    opacity: 0.85;
}

.link-login {
    display: block;
    font-size: 14px;
    color: var(--accent2-color);
    text-decoration: underline;
}

.coming-soon {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 0;
    color: var(--font-color);
    margin-bottom: 50px;
}

/* --新規作成ページ-- */

.page-title {
    font-size: 24px;
    margin-bottom: 30px;
}

/*1つ分の入力欄（黄色い帯＋白い枠）*/
.input-group {
    margin-bottom: 40px;
}

/*エラー文が入る分だけ下の余白を詰める*/
.input-group.has-error {
    margin-bottom: 15px;
}

/*黄色いラベルの帯*/
.input-label {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent1-color);
    border-radius: 10px 10px 0 0;
    font-size: 14px;
    font-weight: bold;
    color: var(--font-color);
}

/*白い入力エリア*/
.input-box {
    min-height: 62px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    border: 1px solid var(--accent1-color);
    border-top: none;
    /*上辺は黄色い帯と接するので無し*/
    border-radius: 0 0 10px 10px;
}

/*「※英数字」などの注意書きが入る白枠*/
.input-box.has-note {
    min-height: 87px;
    padding-top: 15px;
    justify-content: flex-start;
}

.input-note {
    font-size: 14px;
    line-height: 20px;
    color: var(--supplement1-color);
}

.input-row {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

/*入力欄はデザイン上、枠線の無いテキスト*/
.input-field {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--font-color);
}

.input-field:focus {
    outline: none;
}

.input-field:focus-visible {
    outline: 2px solid var(--accent2-color);
    outline-offset: 2px;
    border-radius: 4px;
}


/*パスワード表示/非表示切替ボタン*/
.btn-toggle-password {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--supplement1-color);
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.btn-toggle-password:hover {
    color: var(--font-color);
    background-color: rgba(0, 0, 0, 0.05);
}

.btn-toggle-password:focus-visible {
    outline: 2px solid var(--accent2-color);
    outline-offset: 2px;
}

.btn-toggle-password .eye-icon,
.btn-toggle-password .eye-off-icon {
    display: block;
    width: 20px;
    height: 20px;
}

.btn-toggle-password .eye-off-icon {
    display: none;
}

.btn-toggle-password.is-visible {
    color: var(--main-color);
}

.btn-toggle-password.is-visible .eye-icon {
    display: none;
}

.btn-toggle-password.is-visible .eye-off-icon {
    display: block;
}

/*緑の「入力する」ボタン*/
.btn-input {
    flex-shrink: 0;
    width: 116px;
    height: 32px;
    border: none;
    border-radius: 70px;
    background-color: var(--accent2-color);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.error-text {
    margin-top: 5px;
    font-size: 14px;
    line-height: 20px;
    color: var(--main-color);
}

.form-error-text {
    text-align: center;
    margin-top: 16px;
    margin-bottom: -10px;
    font-weight: 500;
}

/*「登録」は最初のページの .btn-register を流用。button 用の調整だけ追加*/
button.btn-register {
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.register-form .action-buttons {
    margin-top: 89px;
}

/* --ログインページ-- */

/*タイトルはFigma通り少し下げる*/
.login-page {
    padding-top: 47px;
}

/*入力欄はタイトルからしっかり離して、画面の中ほどに置く*/
.login-form {
    margin-top: 129px;
}

.login-form .input-group {
    margin-bottom: 52px;
}

/*エラー文が入る分だけ下の余白を詰める（新規作成と同じ考え方）*/
.login-form .input-group.has-error {
    margin-bottom: 27px;
}

/*「進む」「アカウントがまだ無い方はこちら」は画面の下の方に置く*/
.login-form .action-buttons {
    margin-top: 239px;
    /*直前の入力欄の margin-bottom と相殺されるので、この値がそのまま間隔になる*/
}

/*「進む」は .btn-register を流用し、大きさだけFigmaに合わせる*/
.btn-login {
    width: 255px;
    max-width: 100%;
    height: 58px;
    padding: 0;
    border-radius: 33px;
    font-size: 20px;
    margin-bottom: 21px;
}

/*リンク（<a>）で使うときも、ボタンと同じく文字を真ん中に置く（index.html の「新規登録」）*/
a.btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.link-register {
    font-size: 20px;
    font-weight: 500;
}

/* --TOPページ（ログイン後）-- */

/*ロゴの右にMENUを置くためのヘッダー*/
.top-header {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}

.menu-button {
    position: absolute;
    right: 0;
    top: 20px;
    z-index: 30;
    /*開いたメニューより手前に置く*/
    padding: 0;
    border: none;
    background: none;
    color: var(--font-color);
    font-family: inherit;
    cursor: pointer;
}

.menu-icon {
    display: block;
    width: 41px;
    height: 15px;
}

/*開いている間は✕に入れ替える*/
.menu-button .icon-close {
    display: none;
}

.menu-button.is-open .icon-open {
    display: none;
}

.menu-button.is-open .icon-close {
    display: block;
}

.menu-text {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.02em;
}

/*ハンバーガーメニュー*/

/*メニューを開いている間は後ろのページをスクロールさせない*/
body.is-menu-open {
    overflow: hidden;
}

/*メニュー本体（画面の上から下りてくる板）*/
.global-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 21;
    max-height: 100vh;
    padding-top: 160px;
    /*ロゴの下から項目が始まる（js/menu.js が実寸で上書きする）*/
    overflow-y: auto;
    background-color: var(--back-color);
}

/*開いたときに上から0.1秒で下りてくる（hidden が外れた瞬間に再生される）*/
.global-menu:not([hidden]) {
    animation: menu-slide-down 0.2s ease-out;
}

@keyframes menu-slide-down {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/*閉じるときは0.2秒で上に戻る（時間を変えたら js/menu.js の CLOSE_TIME も合わせる）*/
.global-menu.is-closing {
    animation: menu-slide-up 0.2s ease-in forwards;
}

@keyframes menu-slide-up {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}

/*TOPページ：ロゴはメニューの板に貼り付けてあるので、ヘッダーの高さは測らない*/
.global-menu.has-logo {
    padding-top: 26px;
    /*ページのロゴと同じ高さに置く*/
}

/*メニューの板に貼り付けた小さいロゴ（Figmaのメニュー画面に合わせて左寄せ）*/
.menu-logo-area {
    max-width: 600px;
    /*ページの本文幅に合わせる*/
    margin: 0 auto;
    padding: 0 20px;
    margin-bottom: 20px;
    /*ロゴと項目の間隔*/
}

.menu-logo {
    display: block;
    width: 129px;
    /*大きさを変えたいときはこの数値*/
}

/*後ろのページを暗くする*/
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.3);
}

.menu-list {
    max-width: 600px;
    /*他のページの本文幅に合わせる*/
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.menu-list li {
    border-top: 1px solid var(--supplement2-color);
}

.menu-list a {
    display: flex;
    align-items: center;
    height: 62px;
    padding: 0 20px;
    color: var(--font-color);
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
}

.menu-list a:hover {
    background-color: var(--sub-color);
}

/*チェックイン済みの数*/
.checkin-status {
    margin-bottom: 40px;
}

.user-name {
    font-size: 20px;
    font-weight: bold;
}

/* ニックネーム取得前の非表示＆取得後のフェードイン */
.user-name:has(#user-nickname:empty) {
    visibility: hidden;
}

.user-name:not(:has(#user-nickname:empty)) {
    animation: uiFadeIn 0.3s ease-out forwards;
}

.status-label {
    font-size: 17px;
    font-weight: 500;
}

.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/*「0 / 12」の斜線付きの表示*/
.status-count {
    display: flex;
    align-items: flex-end;
    height: 83px;
    padding-left: 76px;
    /*デザイン通り、少し内側から始める*/
}

.count-now {
    font-size: 54px;
    font-weight: 900;
    line-height: 1;
    padding-bottom: 28px;
    min-width: 0.6em;
}

.count-now:not(:empty) {
    animation: uiFadeIn 0.35s ease-out forwards;
}

/*数字の間の斜線（縦棒を45度かたむけて「/」にする）*/
.count-slash {
    position: relative;
    width: 34px;
    align-self: stretch;
}

.count-slash::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 82px;
    margin: -41px 0 0 -1.5px;
    background-color: var(--main-color);
    transform: rotate(45deg);
}

.count-total {
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    padding-bottom: 4px;
}

.btn-mypage {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 39px;
    padding: 0 12px;
    border-radius: 10px;
    background-color: var(--accent2-color);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}

.arrow-icon {
    width: 20px;
    height: 20px;
}

/*チェックインのカード*/
.checkin-card {
    margin-bottom: 50px;
    border: 1px solid var(--accent1-color);
    border-radius: 20px;
    background-color: var(--sub-color);
    overflow: hidden;
}

.checkin-card-title {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: none;
    /*共通のh2の縦棒はここでは使わない*/
    padding: 0;
    background-color: var(--accent1-color);
    font-size: 28px;
    font-weight: bold;
}

.checkin-card-body {
    padding: 18px 10px 24px;
}

.checkin-steps {
    margin-bottom: 20px;
    padding-left: 30px;
    font-size: 15px;
    font-weight: 500;
    list-style-position: outside;
}

.checkin-steps li {
    margin-bottom: 4px;
}

/*赤い大きなボタン（内側に細い白フチ）*/
.btn-checkin {
    display: block;
    width: 100%;
    max-width: 286px;
    height: 85px;
    margin: 0 auto;
    border: none;
    border-radius: 48px;
    background-color: var(--main-color);
    box-shadow: inset 0 0 0 4px var(--main-color), inset 0 0 0 5.5px var(--back-color);
    color: #fff;
    font-family: inherit;
    font-size: 24px;
    font-weight: 900;
    cursor: pointer;
    transition: background-color 0.25s, box-shadow 0.25s, opacity 0.25s;
}

/*チェックインできないとき（非アクティブ・supplement1-color）*/
.btn-checkin:disabled,
.btn-checkin.is-disabled {
    background-color: var(--supplement1-color);
    box-shadow: inset 0 0 0 4px var(--supplement1-color), inset 0 0 0 5.5px var(--back-color);
    cursor: not-allowed;
    opacity: 0.85;
}

/*コンプリート達成バナー（12局コンプリート時にチェックインカードの代わりに表示）*/
.complete-banner {
    margin-bottom: 50px;
    width: 100%;
}

.complete-banner[hidden],
.checkin-card[hidden] {
    display: none !important;
}

.complete-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

/*現在地と付近の郵便局*/
.nearby-section {
    margin-bottom: 40px;
}

.nearby-message {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--supplement1-color);
}

.nearby-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
    margin-bottom: 10px;
    padding-left: 0;
}

.nearby-list li {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    background-color: var(--sub-color);
    font-weight: 500;
    padding: 8px 15px;
}

.nearby-list li p {
    margin: 0;
}

.nearby-list li p:last-child {
    font-weight: 400;
}

.nearby-list li.nearby-post-available p:last-child {
    font-weight: 500;
}

.nearby-list li.nearby-post-checkedin p:last-child {
    color: var(--supplement1-color);
}

.nearby-list .nearby-post-available {
    background-color: var(--accent1-color);
}

.nearby-list .nearby-post-checkedin {
    background-color: var(--supplement2-color);
}

/* 10km以内に対象郵便局がない場合のメッセージ表示 */
.nearby-list li.nearby-empty-item {
    justify-content: center;
    text-align: center;
    color: var(--supplement1-color);
    background-color: #fff;
    border: 1px dashed var(--supplement2-color);
    font-size: 14px;
    padding: 14px 15px;
}

/* 付近の郵便局マップ (OpenStreetMap / Leaflet) */
.nearby-map {
    width: 100%;
    height: 260px;
    margin-top: 15px;
    border-radius: 12px;
    border: 1px solid var(--lattice-color);
    box-shadow: 0 2px 8px rgba(71, 0, 0, 0.06);
    position: relative;
    z-index: 1;
    /* 固定メニューやモーダルより背面に配置 */
    isolation: isolate;
}

/* マップ上のカスタム郵便局ピン */
.custom-post-marker {
    background: transparent;
    border: none;
}

.marker-pin {
    position: relative;
    width: 30px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    transition: transform 0.2s ease;
}

.marker-pin-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 40px;
    overflow: visible;
}

.marker-pin-svg .pin-body {
    fill: var(--main-color, #B51D2C);
    transition: fill 0.3s ease;
}

.marker-pin-svg .pin-symbol-text {
    fill: var(--main-color, #B51D2C);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: fill 0.3s ease;
}

/* チェックイン済みのピン（落ち着いたグレー） */
.marker-pin.is-checkedin .pin-body {
    fill: var(--supplement1-color, #8A8A8A);
}

.marker-pin.is-checkedin .pin-symbol-text {
    fill: var(--supplement1-color, #8A8A8A);
}

/* チェックイン可能（60m以内）のピン（アニメーション） */
.marker-pin.is-available .pin-body {
    fill: var(--accent3-color, #F88E5E);
}

.marker-pin.is-available .pin-symbol-text {
    fill: var(--accent3-color, #F88E5E);
}

.marker-pin.is-available {
    animation: marker-bounce 0.8s ease-in-out infinite alternate;
}

@keyframes marker-bounce {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-6px);
    }
}

/* マップ上の現在地ピン（ブルーサークル + パルス波紋） */
.custom-current-marker {
    background: transparent;
    border: none;
}

.marker-current-dot {
    width: 16px;
    height: 16px;
    background-color: #2A7BFF;
    border: 2.5px solid #FFFFFF;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 6px rgba(42, 123, 255, 0.5);
}

.marker-current-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    translate: -50% -50%;
    border-radius: 50%;
    background-color: rgba(42, 123, 255, 0.35);
    animation: pulse-ring 2s infinite ease-out;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.5);
        opacity: 0.9;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Leaflet ポップアップのスタイル調整 */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--font-color);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.leaflet-popup-content {
    margin: 10px 14px;
    line-height: 1.4;
}

.popup-title {
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--font-color);
}

.popup-desc {
    color: var(--supplement1-color);
    font-size: 12px;
}

/*チェックイン確認モーダル（<dialog> を showModal() で開く）*/
.checkin-modal {
    box-sizing: border-box;
    width: calc(100% - 40px);
    max-width: 350px;
    padding: 30px 20px 34px;
    border: none;
    border-radius: 20px;
    background-color: var(--back-color);
    color: var(--font-color);
    font-family: inherit;
    text-align: center;
}

.checkin-modal [tabindex="-1"]:focus {
    outline: none;
}


/*後ろのページを暗くする（メニューの背景と同じ濃さ）*/
.checkin-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.3);
}

/*モーダルを開いている間は後ろのページをスクロールさせない*/
body.is-modal-open {
    overflow: hidden;
}

.checkin-modal-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 15px;
}

/*郵便局の写真（写真が無い間は灰色の枠）*/
.checkin-modal-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 248px;
    max-width: 100%;
    height: 140px;
    margin: 20px auto 0;
    border-radius: 10px;
    background-color: var(--placeholder-color);
    overflow: hidden;
}

.checkin-modal-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkin-modal-photo-placeholder {
    color: #000;
    font-size: 16px;
}

.checkin-modal-office {
    margin-top: 7px;
    font-size: 18px;
    line-height: 1.2;
}

.checkin-modal-question {
    margin-top: 32px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
}

/*赤い「チェックインする」ボタン*/
.btn-modal-checkin {
    display: block;
    width: 255px;
    max-width: 100%;
    height: 58px;
    margin: 20px auto 0;
    border: none;
    border-radius: 33px;
    background-color: var(--main-color);
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

/*文字だけの「キャンセル」*/
.btn-modal-cancel {
    display: block;
    margin: 20px auto 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--font-color);
    font-family: inherit;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    cursor: pointer;
}

/*プロフィール変更モーダル内のinput領域*/
.modal-input-group {
    width: 100%;
    margin-bottom: 8px;
    text-align: left;
}

.modal-input-label {
    margin: 10px 0 4px;
    font-size: 14px;
    color: var(--font-color);
    opacity: 0.75;
}

.modal-input-label:first-child {
    margin-top: 0;
}

.modal-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--accent1-color);
    border-radius: 6px;
    background-color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--font-color);
    outline: none;
}

.modal-input:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 2px rgba(181, 29, 44, 0.15);
}

.modal-input-wrapper {
    position: relative;
    width: 100%;
}

.modal-input-wrapper .modal-input {
    padding-right: 42px;
}

.modal-input-wrapper .btn-toggle-password {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.modal-input-group .error-text {
    margin-top: 6px;
    font-size: 13px;
    color: var(--main-color);
}

/*チェックイン失敗モーダル（確認モーダルの見た目を流用）*/
.checkin-modal-error {
    padding-bottom: 30px;
}

.checkin-modal-message {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.2;
}

/*赤い「閉じる」ボタン（確認モーダルの赤ボタンより少し細い）*/
.btn-modal-close {
    width: 235px;
    margin-top: 34px;
}

/*チェックイン成功モーダル（もらったマンガを見せる。確認モーダルの見た目を流用）*/
.checkin-modal-manga {
    padding: 25px 20px 30px;
}

.manga-modal-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
}

.manga-reward-badge {
    margin-top: 6px;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.2;
}

/*マンガの画像（画像が無い間は灰色の枠）*/
.manga-modal-image {
    width: 90%;
    margin: 16px auto 0;
    background-color: var(--placeholder-color);
    overflow: hidden;
}

.manga-modal-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/*画像と「閉じる」の間隔*/
.checkin-modal-manga .btn-modal-close {
    margin-top: 30px;
}

/*コンプリート達成モーダル（12箇所達成時に表示）*/
.complete-modal {
    padding: 26px 20px 28px;
    max-width: 350px;
}

.complete-modal-title {
    color: var(--main-color);
    font-size: 19px;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 12px;
}

.complete-modal-desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--font-color);
    text-align: left;
    margin: 0 auto 16px;
    word-break: break-word;
}

.complete-modal-photo {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
}

.complete-modal-photo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.complete-modal .btn-modal-close {
    margin-top: 24px;
}

/*下からフェードインするアニメーション（最初透明で下から浮き上がる）*/
@keyframes completeModalSlideUpFade {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.complete-modal[open] {
    animation: completeModalSlideUpFade 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/*地図*/
.map-area {
    height: 450px;
    background-color: #e9f3e2;
    /*地図が出るまでの下地（Figmaの仮の色）*/
}

.map-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* --詳細ページ（楽しみ方）-- */

/*赤いヘッダー（戻る / ページ名 / MENU）。他のサブページでも使える形にしておく*/
.sub-header {
    position: relative;
    z-index: 30;
    /*開いたメニューより手前に残す*/
    display: flex;
    align-items: center;
    justify-content: center;
    height: 67px;
    background-color: var(--main-color);
}

.sub-header-title {
    overflow: visible;
    /*p タグに clip が掛かるとスクロールバーが出るため、タイトルだけ visible に戻す*/
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

.back-button {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px;
    /*押しやすいようにタップ範囲を広げる*/
    margin-left: -8px;
    border: none;
    background: none;
    cursor: pointer;
}

.back-icon {
    display: block;
    width: 13px;
    height: 24px;
}

/*MENUボタンはTOPと共通。位置と文字色だけ赤いヘッダー用にする*/
.sub-header .menu-button {
    top: 15px;
    right: 15px;
    color: #fff;
}

/*本文*/
.detail-page {
    padding-top: 38px;
}

.detail-section {
    margin-bottom: 60px;
}

.detail-section:last-child {
    margin-bottom: 0;
}

.detail-section .page-title {
    margin-bottom: 16px;
}

.detail-logo {
    display: block;
    max-width: 300px;
    width: 100%;
    margin: 35px auto 34px;
    /*上はタイトルの margin-bottom と相殺されるので、この値がそのまま間隔になる*/
}

/*イベント概要（ノートのような点線の罫線つき）*/
.overview-text {
    padding: 6px 12px 6px 13px;
    border-radius: 10px;
    background-color: var(--sub-color);
    font-size: 14px;
    line-height: 27px;
    /*罫線：27px ごとに 1px の線（下の層）を引き、
      その上から背景色の縦縞を重ねて 2px 間隔の点線にする。
      最後の行の下には線を引かない（高さから1行分を引く）*/
    background-image:
        repeating-linear-gradient(to right, var(--sub-color) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(to bottom, transparent 0 26px, rgba(102, 136, 52, 0.6) 26px 27px);
    background-size: calc(100% - 26px) calc(100% - 27px);
    background-position: 13px 6px;
    background-repeat: no-repeat;
}

/*Web版の参加方法（左に赤い番号の帯がつくカード）*/
.web-steps {
    list-style: none;
}

.web-steps .web-step {
    display: flex;
    margin-bottom: 10px;
    border: 1px solid var(--main-color);
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    /*角丸の中に赤い帯を収める*/
}

.web-step-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    /*枠線 1px と合わせて 32px*/
    background-color: var(--main-color);
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

.web-step-body {
    padding: 14px 15px 14px 14px;
    font-size: 15px;
    line-height: 1.45;
}

.web-steps .web-step:last-child {
    margin-bottom: 0;
}

.detail-section .action-buttons {
    margin-top: 30px;
}

/*「チュートリアルを見る」はログインの「進む」と同じ大きさ*/
.btn-tutorial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 255px;
    max-width: 100%;
    height: 58px;
    padding: 0;
    margin-bottom: 0;
    border-radius: 33px;
    font-size: 20px;
}

/*Q&A（黄色い質問の帯＋白い回答の枠）*/
.qa-list {
    margin: 0;
}

.qa-item {
    margin-bottom: 20px;
}

.qa-item:last-child {
    margin-bottom: 0;
}

.qa-question {
    padding: 10px 20px;
    border-radius: 10px 10px 0 0;
    background-color: var(--accent1-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
}

.qa-answer {
    margin: 0;
    padding: 14px 20px;
    border: 1px solid var(--accent1-color);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background-color: #fff;
    font-size: 15px;
    line-height: 1.45;
}

/* --画面下の固定バー（全ページ共通）-- */

/*バーに本文の最後が隠れないよう、下に余白をとる*/
body.has-tab-bar {
    padding-bottom: 140px;
}

body.has-tab-bar .content-wrapper {
    padding-bottom: 0;
}

body.has-tab-bar .page-main > :last-child,
body.has-tab-bar .content-wrapper > :last-child {
    margin-bottom: 0;
}

.tab-bar {
    position: fixed;
    left: 50%;
    bottom: 49px;
    z-index: 10;
    /*ハンバーガーメニュー（20〜）より下*/
    width: calc(100% - 16px);
    max-width: 374px;
    height: 70px;
    transform: translateX(-50%);
    border-radius: 180px;
    background-color: #fff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.tab-bar-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 100%;
    margin: 0;
    padding: 0 20px;
    list-style: none;
}

/*共通リセットの overflow-x:clip で、選択中の丸い背景が切れないようにする（clip は絶対位置の子孫を制限するため残す）*/
.tab-bar-list li {
    overflow: visible;
}

.tab-bar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    color: var(--font-color);
    text-decoration: none;
}

/*今いるページの項目だけ、うすいグレーの丸い背景をつける*/
.tab-bar-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 104px;
    height: 56px;
    transform: translateX(-50%);
    border-radius: 30px;
    background-color: #f6f6f6;
}

.tab-bar-icon {
    position: relative;
    /*丸い背景より手前に出す*/
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: 10px;
}

.tab-bar-icon img {
    display: block;
    max-width: none;
}

.tab-bar-label {
    position: relative;
    margin-top: 1px;
    font-size: 14px;
    line-height: 15px;
    white-space: nowrap;
}

/* --マイページ-- */

.mypage {
    padding-top: 25px;
}

/*「ニックネーム さん」。ニックネームが空（DB未接続）の間は行の高さだけ残して見えなくする*/
.mypage-name {
    font-weight: bold;
    line-height: 1.45;
}

.mypage-name:has(.mypage-nickname:empty) {
    visibility: hidden;
}

.mypage-name:not(:has(.mypage-nickname:empty)) {
    animation: uiFadeIn 0.3s ease-out forwards;
}

.mypage-nickname {
    margin-right: 0.3em;
    font-size: 28px;
}

.mypage-san {
    font-size: 20px;
    font-weight: 500;
}

/*アイコン＋ふきだし*/
.mypage-greeting {
    display: flex;
    align-items: flex-start;
    margin-top: 8px;
    padding-left: 30px;
}

.mypage-avatar {
    flex-shrink: 0;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    object-fit: cover;
}

.mypage-bubble {
    position: relative;
    flex: 1;
    max-width: 216px;
    margin-left: 26px;
    /*しっぽの分だけ離す*/
    margin-top: 2px;
    padding: 15px 10px;
    border-radius: 20px;
    background-color: var(--sub-color);
    font-size: 15px;
    line-height: 1.45;
}

/* ふきだしが空の間は枠としっぽを非表示、取得後にフェードイン */
.mypage-bubble:empty {
    visibility: hidden;
}

.mypage-bubble:not(:empty) {
    animation: uiFadeIn 0.3s ease-out forwards;
}

/*ふきだしのしっぽ（Figma の三角）*/
.mypage-bubble::before {
    content: "";
    position: absolute;
    top: 19px;
    left: -16px;
    width: 16px;
    height: 18px;
    background: url("../img/bubble-tail.svg") no-repeat center / 16px 18px;
}

/*緑の「プロフィールの確認・変更」（TOPの「マイページへ」と同じボタン）*/
.mypage-profile-link {
    display: flex;
    justify-content: flex-end;
    margin-top: 23px;
}

.btn-profile {
    box-sizing: border-box;
    white-space: nowrap;
    justify-content: center;
    width: 241px;
    max-width: 100%;
}

.mypage-section {
    margin-top: 50px;
}

/*マンガ一覧は丸の名前（2行）のすぐ下なので、少しだけ詰める*/
.mypage-section+.mypage-section {
    margin-top: 45px;
}

.mypage-section .page-title {
    margin-bottom: 16px;
}

/*「現在のチェックイン済郵便局 3/12」の帯*/
.mypage-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    height: 49px;
    border-radius: 10px;
    background-color: var(--sub-color);
}

.mypage-count-label {
    font-size: 15px;
    font-weight: 500;
}

.mypage-count-num {
    display: flex;
    align-items: flex-end;
    height: 49px;
    font-weight: bold;
    line-height: 1;
}

.mypage-count-now {
    align-self: flex-start;
    padding-top: 4px;
    font-size: 24px;
    min-width: 0.6em;
}

.mypage-count-now:not(:empty) {
    animation: uiFadeIn 0.35s ease-out forwards;
}

/* 非同期データ反映時のスムーズなフェードイン */
@keyframes uiFadeIn {
    from {
        opacity: 0;
        transform: translateY(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*数字の間の斜線（TOPと同じ作り。こちらは細い文字色の線）*/
.mypage-count-slash {
    position: relative;
    width: 14px;
    align-self: stretch;
}

.mypage-count-slash::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 40px;
    margin: -20px 0 0 -0.5px;
    background-color: var(--font-color);
    transform: rotate(45deg);
}

.mypage-count-total {
    padding-bottom: 7px;
    font-size: 20px;
}

/*12局の丸（4列）。未チェックインは補足2の色、チェックイン済みはメインの赤*/
.office-stamps {
    display: grid;
    grid-template-columns: repeat(4, 90px);
    justify-content: center;
    row-gap: 14px;
    margin: 20px -5px 0;
    /*丸の間隔をFigmaに合わせるため、本文幅より少しだけ広げる*/
    padding: 0;
    list-style: none;
}

.office-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.office-stamp-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--supplement2-color);
    overflow: hidden;
}

.office-stamp-name {
    color: var(--supplement1-color);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    white-space: nowrap;
}

/* チェックイン済み（赤丸ではなく post_X.png スタンプ画像を表示） */
.office-stamp.is-done .office-stamp-circle {
    background-color: transparent;
}

.office-stamp-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.office-stamp.is-done .office-stamp-name {
    color: var(--main-color);
}

/*取得したマンガ一覧（2列。0件の間は何も出ない）*/
.manga-empty-text {
    text-align: center;
    color: var(--text-color, #333);
    font-size: 16px;
    font-weight: bold;
    margin: 24px 0;
    padding: 16px;
    background-color: var(--card-bg, #f8f8f8);
    border-radius: 8px;
    letter-spacing: 0.05em;
    border-radius: 5px;
    border: 1px solid var(--supplement1-color);
}

.manga-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.manga-thumb {
    aspect-ratio: 45/33;
    background-color: var(--placeholder-color);
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.manga-thumb:hover {
    opacity: 0.85;
    transform: scale(1.02);
}

.manga-thumb:active {
    transform: scale(0.98);
}

.manga-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 33.5%;
}

.manga-title {
    margin-top: 5px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.45;
}

/*画面には出さず、読み上げだけする文字*/
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --プロフィールの確認・変更-- */

.profile {
    padding-top: 25px;
}

/*パンくず「マイページ > プロフィールの確認・変更」*/
.breadcrumb {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
}

.breadcrumb a {
    color: var(--font-color);
}

.breadcrumb-current {
    display: inline;
    font-size: inherit;
}

.profile-list {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.profile-item+.profile-item {
    margin-top: 25px;
}

/*黄色い見出し（項目名）*/
.profile-item-label {
    height: 34px;
    border-radius: 10px 10px 0 0;
    background-color: var(--accent1-color);
    font-size: 14px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
}

/*白い中身。ボタンがある行は 62px、無い行は 49px*/
.profile-item-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
    min-height: 49px;
    padding: 0 19px 0 20px;
    border: 1px solid var(--accent1-color);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background-color: #fff;
}

.profile-item-body:has(.btn-profile-edit) {
    min-height: 62px;
}

.profile-item-value {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    word-break: break-all;
    /*長いメールアドレスでもはみ出さない*/
}

/*緑の「変更する」「設定する」*/
.btn-profile-edit {
    flex-shrink: 0;
    width: 116px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 70px;
    background-color: var(--accent2-color);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

/*「アカウント削除」「ログアウト」*/
.account-actions {
    display: flex;
    justify-content: center;
    gap: 17px;
    margin-top: 55px;
}

.btn-account {
    width: 166px;
    height: 58px;
    padding: 0;
    border: none;
    border-radius: 33px;
    color: #fff;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
}

.btn-account-delete {
    background-color: var(--main-color);
    font-size: 16px;
}

.btn-account-logout {
    background-color: var(--accent2-color);
    font-size: 18px;
}

/*アカウント削除モーダルの説明文（1行空けて「本当に削除しますか?」）*/
.account-modal-message {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.2;
}

.account-modal-message p+p {
    margin-top: 1.2em;
}

/* --郵便局一覧-- */

.offices {
    padding-top: 25px;
}

.offices-section+.offices-section {
    margin-top: 50px;
}

/*地図（Figma の「縦横3:5」）*/
.offices-map {
    aspect-ratio: 5 / 4;
    background-color: var(--placeholder-color);
    /*地図が出るまでの下地*/
}

.office-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.office-card {
    display: flex;
}

.office-card+.office-card {
    margin-top: 25px;
}

/*左の写真（写真が無い間は灰色の枠に「写真」）*/
.office-card-photo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 134px;
    height: 96px;
    background-color: var(--placeholder-color);
    color: #000;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
}

.office-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.office-card-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

/*黄色い帯の局名*/
.office-card-name {
    height: 34px;
    margin: 0;
    border-radius: 0 10px 0 0;
    background-color: var(--accent1-color);
    font-size: 17px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
    white-space: nowrap;
}

/*白い枠の営業時間・定休日*/
.office-card-body {
    flex: 1;
    box-sizing: border-box;
    padding: 9px 10px 0 43px;
    border: 1px solid var(--accent1-color);
    border-top: none;
    border-left: none;
    border-radius: 0 0 10px 0;
    background-color: #fff;
}

.office-card-row {
    color: var(--supplement1-color);
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
}

.office-card-term {
    font-weight: 500;
}

/* --作った人たちの紹介（おまけ）-- */

.credits {
    padding-top: 25px;
}

/*「作った人たちの紹介」は他ページの h2 見出しと同じ見た目にする*/
.credits .page-title {
    padding: 0 8px;
    border-left: 4px solid var(--main-color);
    line-height: 1.2;
}

.credit-group+.credit-group {
    margin-top: 25px;
}

/*黄色い見出し（企画・制作 / デザイン班 …）。共通の h2 の赤線は付けない*/
.credit-group-label {
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 10px 10px 0 0;
    background-color: var(--accent1-color);
    font-size: 14px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
}

/*白い枠*/
.credit-lead,
.credit-members {
    margin: 0;
    padding: 20px;
    border: 1px solid var(--accent1-color);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background-color: #fff;
}

/*「江別市内郵便局 × 北海道情報大学 …」*/
.credit-lead {
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
}

.credit-members {
    list-style: none;
}

/*1人分（丸いアイコン＋名前・担当箇所・一言コメント）*/
.credit-member {
    display: flex;
    align-items: center;
    gap: 15px;
}

.credit-member+.credit-member {
    margin-top: 25px;
}

.credit-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.credit-text {
    min-width: 0;
}

.credit-name {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
}

.credit-role {
    margin-top: 4px;
    color: var(--supplement1-color);
    font-size: 13px;
    line-height: 1.2;
}

.credit-comment {
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.2;
}

/* --ロード画面（全ページ共通 / js/loading.js）-- */

.loading {
    position: fixed;
    inset: 0;
    z-index: 100;
    /*メニュー・モーダルより手前*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--back-color);
    background-image:
        linear-gradient(0deg, var(--lattice-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--lattice-color) 1px, transparent 1px);
    background-size: 40px 40px;
    transition: opacity 0.3s;
}

/*hidden の間は出さない（display:flex で hidden が効かなくなるのを防ぐ）*/
.loading[hidden] {
    display: none;
}

.loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/*表示中は後ろのページをスクロールさせない*/
body.is-loading {
    overflow: hidden;
}

/*
  郵便車のコマ送り（1周 1.2秒）
    0〜45%   Group 130 … 平らな道を走る
    45〜60%  Group 129 … 前輪が段差に乗って、前が上がる
    60〜75%  Group 128 … 後輪が段差に乗って、後ろが上がる
    75〜100% Group 130 … 着地して走る
  速さを変えたいときは .loading-frame の 1.2s を変える
*/
.loading-car {
    position: relative;
    width: 310px;
    max-width: 90vw;
    height: 108px;
}

.loading-frame {
    position: absolute;
    max-width: none;
    opacity: 0;
    animation: 1.2s infinite;
    animation-timing-function: step-end;
    /*コマ送り（なめらかにつながないで切り替える）*/
}

/*3枚で画像の余白が違うので、車の先頭と地面に着いているタイヤの位置をそろえる*/
.loading-frame-flat {
    left: -1px;
    bottom: -1px;
    animation-name: loading-frame-flat;
}

.loading-frame-front {
    left: -3px;
    bottom: -2px;
    animation-name: loading-frame-front;
}

.loading-frame-rear {
    left: -4px;
    bottom: -2px;
    animation-name: loading-frame-rear;
}

@keyframes loading-frame-flat {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    45% {
        opacity: 0;
    }

    75% {
        opacity: 1;
        transform: translateY(2px);
    }

    /*着地でちょっと沈む*/
    82% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loading-frame-front {
    0% {
        opacity: 0;
    }

    45% {
        opacity: 1;
        transform: translateY(-8px);
    }

    /*はねて浮く*/
    60% {
        opacity: 0;
    }
}

@keyframes loading-frame-rear {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 1;
        transform: translateY(-5px);
    }

    75% {
        opacity: 0;
    }
}

/*道路（点線が後ろに流れて、走っているように見せる）*/
.loading-road {
    width: 310px;
    max-width: 90vw;
    height: 3px;
    margin-top: 4px;
    background-image: repeating-linear-gradient(90deg, var(--supplement1-color) 0 18px, transparent 18px 32px);
    background-size: 32px 3px;
    animation: loading-road 0.4s linear infinite;
}

@keyframes loading-road {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 32px 0;
    }
}

.loading-text {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

/*動きを減らす設定の端末では、止まった車だけ出す*/
@media (prefers-reduced-motion: reduce) {

    .loading-frame,
    .loading-road {
        animation: none;
    }

    .loading-frame-flat {
        opacity: 1;
    }
}

/*ボタンサイズ変更*/
.page-main .action-buttons .btn-register,
.register-form .action-buttons .btn-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 255px;
    max-width: 100%;
    height: 58px;
    padding: 0;
    border-radius: 33px;
    font-size: 20px;
    margin-bottom: 21px;
}

.page-main .action-buttons .link-login,
.register-form .action-buttons .link-login {
    font-size: 20px;
    font-weight: 500;
}

/* ==========================================================================
   チュートリアルモーダル (fullscreen, swipeable carousel)
   ========================================================================== */
.tutorial-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    padding: 0;
    margin: 0;
    border: none;
    background-color: var(--back-color);
    color: var(--font-color);
    display: none;
    z-index: 10000;
    overflow: hidden;
}

.tutorial-modal[open] {
    display: flex;
    flex-direction: column;
}

.tutorial-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.tutorial-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 540px;
    height: 100%;
    margin: 0 auto;
    padding: 8px 12px 14px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.tutorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2px 4px 4px;
    flex-shrink: 0;
}

.tutorial-step-indicator {
    font-size: 14px;
    font-weight: 700;
    color: var(--font-color);
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.05em;
}

.tutorial-step-current {
    color: var(--main-color);
    font-size: 16px;
}

.tutorial-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--supplement1-color);
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    transition: background-color 0.2s, color 0.2s;
    font-family: inherit;
}

.tutorial-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--font-color);
}

.tutorial-slider-wrapper {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.tutorial-slider-wrapper:active {
    cursor: grabbing;
}

.tutorial-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.tutorial-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 2px 4px;
}

.tutorial-slide-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.12));
}

.tutorial-slide-card img {
    max-width: 100%;
    max-height: min(76vh, 720px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 18px;
    pointer-events: none;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.tutorial-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--font-color);
    z-index: 5;
    transition: transform 0.2s, background-color 0.2s;
    backdrop-filter: blur(4px);
}

.tutorial-nav-prev {
    left: 4px;
}

.tutorial-nav-next {
    right: 4px;
}

.tutorial-nav-btn:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}

.tutorial-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding-top: 6px;
}

.tutorial-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}

.tutorial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background-color: var(--supplement2-color);
    cursor: pointer;
    padding: 0;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.tutorial-dot.is-active {
    width: 22px;
    border-radius: 10px;
    background-color: var(--main-color);
}

.tutorial-swipe-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--supplement1-color);
    margin: 4px 0 8px;
    line-height: 1;
}

.tutorial-swipe-icon {
    color: var(--supplement1-color);
    flex-shrink: 0;
}

.tutorial-action-area {
    width: 100%;
    display: flex;
    justify-content: center;
    min-height: 56px;
}

.btn-tutorial-end {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 255px;
    max-width: 100%;
    height: 54px;
    padding: 0;
    border: none;
    border-radius: 33px;
    font-size: 19px;
    font-weight: 700;
    background-color: var(--main-color);
    color: #fff;
    cursor: pointer;
    margin: 0;
    font-family: inherit;
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s, background-color 0.2s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
}

.btn-tutorial-end.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.btn-tutorial-end:hover {
    opacity: 0.9;
}

/* ==================================================================
   位置情報「正確」警告トースト
   ================================================================== */
.geo-accuracy-toast {
    position: fixed;
    top: max(14px, env(safe-area-inset-top, 14px));
    left: 50%;
    transform: translate(-50%, -150%);
    width: calc(100% - 28px);
    max-width: 440px;
    z-index: 9999;
    background-color: var(--back-color);
    border: 1.5px solid var(--accent3-color);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(71, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 12px 14px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
}

.geo-accuracy-toast.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.geo-toast-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}

.geo-toast-icon {
    flex-shrink: 0;
    color: var(--main-color);
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(181, 29, 44, 0.08);
}

.geo-toast-text {
    flex: 1;
    min-width: 0;
    padding-right: 22px;
}

.geo-toast-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color);
    margin: 0 0 2px 0;
    line-height: 1.3;
}

.geo-toast-desc {
    font-size: 15px;
    color: var(--font-color);
    margin: 0;
    line-height: 1.45;
}

.geo-toast-close {
    position: absolute;
    top: -4px;
    right: -4px;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--supplement1-color);
    padding: 0;
    transition: background-color 0.2s, color 0.2s;
}

.geo-toast-close:hover,
.geo-toast-close:active {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--font-color);
}

/* プロフィール画面のエラーおよび完了通知トースト */
.modal-error-text {
    margin: 8px 0 16px;
    font-size: 13px;
    color: var(--main-color);
    text-align: center;
}

.profile-toast {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background-color: var(--back-color);
    border: 1.5px solid var(--accent2-color);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    width: calc(100% - 48px);
    max-width: 300px;
    box-sizing: border-box;
    text-align: center;
}

.profile-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==================================================================
   プロフィール登録案内トースト（初回チュートリアル後 / 緑系・丸み・右下配置）
   ================================================================== */
.profile-guide-toast {
    position: fixed;
    right: 8px;
    bottom: 128px;
    transform: translateX(60px);
    width: 70%;
    max-width: 340px;
    z-index: 100;
    background-color: var(--accent2-color, #668834);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(45, 68, 18, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
    padding: 10px 14px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
}

/* 下の丸いタブバー（max-width: 374px / 左右余白 8px）の右端に正確に合わせる */
@media (min-width: 390px) {
    .profile-guide-toast {
        right: calc(50% - 187px);
    }
}

.profile-guide-toast.is-visible {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.profile-toast-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
}

.profile-toast-text {
    flex: 1;
    min-width: 0;
}

.profile-toast-title {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
    padding: 0 18px;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.profile-toast-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    line-height: 1.35;
}

.profile-toast-btn {
    display: block;
    width: fit-content;
    text-align: center;
    flex-shrink: 0;
    background-color: #ffffff;
    color: var(--accent2-color, #668834) !important;
    font-size: 16px;
    font-weight: 700;
    padding: 6px 24px;
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.1s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.profile-toast-btn:hover {
    background-color: #f7faf2;
}

.profile-toast-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

.profile-toast-close {
    position: absolute;
    top: 10px;
    right: 12px;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s ease, transform 0.1s ease;
}

.profile-toast-close:hover {
    color: #ffffff;
    transform: scale(1.1);
}

.profile-toast-close:active {
    transform: scale(0.9);
}