@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
    --tk-white: #FFFFFF;
    --tk-dark: #111111;
    --tk-bg-base: #060B18;
    --tk-bg-base-0: rgba(6, 11, 24, 0);
    --tk-bg-deep: #05060C;
    --tk-bg-overlay: rgba(3, 6, 14, 0.72);
    --tk-red: #EC352B;
    --tk-red-condition: #E8120C;
    --tk-red-2-70: rgba(236, 53, 43, .7);
    --tk-blue: #3A6FE0;
    --tk-blue-70: rgba(58, 111, 224, .7);
    --tk-ink: #1A1A1A;
    --tk-note: #666666;
    --tk-placeholder: #6F6F72;
    --tk-input-bg: rgba(8, 12, 22, 0.55);
    --tk-input-border: #4A5566;
    --tk-btn-bg: rgba(8, 12, 24, .6);
    --tk-btn-disabled-bg: #4A4F5A;
    --tk-btn-disabled-ink: #CFD3DB;
    --tk-card-bg-2: rgba(4, 8, 18, 0.35);
    --tk-dashed: rgba(120, 150, 210, 0.6);
    --tk-black-25: rgba(0, 0, 0, .25);
    --tk-yellow: #FFEE00;
    /* スクリーンショット案内ボックスの背景 */
    /* ---- 言語スイッチャー（AIシュリーマン カスタム UI） ---- */
    /* スイッチャーが占める高さ（上マージン12px + トリガー32px）。safe-area は含まない
       （スイッチャー側の margin-top が別途 env(safe-area-inset-top) を持つため）。
       画面いっぱいの高さを指定する要素はこの分を差し引き、僅かな縦スクロールを防ぐ。 */
    --lang-switcher-h: 44px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    /* flow-root: 言語スイッチャーの margin-top が body の外へすり抜ける（マージン相殺）のを防ぐ。
       相殺すると body 自体が 12px 押し下げられ、その分だけ縦に溢れて僅かなスクロールが出る。 */
    display: flow-root;
    font-family: 'Noto Sans JP', sans-serif;
    background: #000000;
}

/* ============ レイアウト（.wrap / .bg / .footer 移植） ============ */
.wrap {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: 100vw;
    overflow-x: hidden;
    padding: env(safe-area-inset-top)
        max(28px, env(safe-area-inset-right))
        190px
        max(28px, env(safe-area-inset-left));
    min-height: calc(100% - var(--lang-switcher-h) - env(safe-area-inset-top));
    color: var(--tk-white);
}

.bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: #000000;
}

/* フッター（同意する）を画面下部に固定 */
.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    box-sizing: border-box;
    /* 横向き時のノッチ分も左右に確保 */
    padding: 16px
        max(28px, env(safe-area-inset-right))
        calc(16px + env(safe-area-inset-bottom))
        max(28px, env(safe-area-inset-left));
    background: linear-gradient(to top, var(--tk-bg-base) 60%, var(--tk-bg-base-0));
}

/* ============ Top Banner ============ */
.banner {
    margin-top: 20px;
    text-align: center;
}

.banner-texts {
    margin-top: 16px;
    padding: 0px 30px;
}

.banner-title {
    color: var(--tk-red);
    font-size: 42px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 5px;
    vertical-align: middle;
    margin: 0;
    text-shadow: 0 0 14px var(--tk-red-2-70);
    font-family: 'Noto Sans JP', sans-serif;
}

.banner-text {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-white);
    font-weight: 500;
    font-size: 15px;
    line-height: 24.75px;
    text-align: center;
    margin: 0;
}

.banner-text-2 {
    margin-top: 12px;
}

/* ============ White Card ============ */
.card {
    background: var(--tk-white);
    border-radius: 14px;
    padding: 25.2px 18px 20px 18px;
    margin-top: 16px;
}

.card-title {
    color: var(--tk-dark);
    font-weight: 500;
    font-size: 19px;
    line-height: 26.6px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
}

.card-divider {
    height: 1px;
    background-color: var(--tk-blue);
    margin: 12px 0;
}

.card-desc {
    color: var(--tk-ink);
    font-weight: 400;
    font-size: 15px;
    line-height: 27.75px;
    letter-spacing: 0%;
    vertical-align: middle;
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
}

/* ============ Checkbox List ============ */
.checklist {
    margin-top: 16px;
}

.check-group {
    margin-bottom: 16px;
    background: var(--tk-white);
    border-radius: 14px;
    padding: 18px;
}

/* セクション見出し（アトラクション / 迷惑行為の制限 など）。白カード上の黒文字 */
.group-title {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-dark);
    font-size: 15px;
    font-weight: 400;
    line-height: 27px;
    margin: 0 0 12px;
}

.check-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 23.25px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--tk-ink);
    margin: 0 0 16px;
}

.text-center {
    text-align: center;
}

.check-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 実 input は不可視化（キーボード/スクリーンリーダ対応のため残す） */
.check-wrap input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.checkbox {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tk-ink);
    border-radius: 4px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.checkbox svg {
    display: none;
}

.check-wrap input:checked+.checkbox {
    background: var(--tk-blue);
    border-color: var(--tk-blue);
}

.check-wrap input:checked+.checkbox svg {
    display: block;
}

.check-label {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 100%;
    vertical-align: middle;
    color: var(--tk-dark);
}

/* condition 内（白カード）の注記（※...）。checkbox の下に表示 */
.note {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 22.95px;
    color: var(--tk-note);
    margin: 14px 0 0;
}

/* ============ Form ============ */
.form {
    margin-top: 24px;
}

.form-group+.form-group {
    margin-top: 16px;
}

.form-label {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 8px;
}

.required {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-red);
    border: 1px solid var(--tk-red);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 1px 7px;
    margin-left: 8px;
    line-height: 100%;
    vertical-align: middle;
}

.input {
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    background: var(--tk-input-bg);
    border: 1px solid var(--tk-input-border);
    color: var(--tk-white);
    border-radius: 9px;
    padding: 13px 14px;
    font-size: 15px;
    box-sizing: border-box;
    margin-top: 8px;
}

.input::placeholder {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-placeholder);
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    vertical-align: middle;
}

.input:focus {
    border-color: var(--tk-blue);
    outline: none;
}

/* ============ 生年月日プルダウン（年・月・日） ============ */
.dob {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.select-wrap {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    /* flex アイテムが内容幅で横に溢れないように（モバイルで重要） */
}

.dob-year {
    flex: 1.4 1 0;
    /* 年は「2000」の分だけ少し広く */
}

/* 年・月・日 のラベル */
.dob-unit {
    flex: 0 0 auto;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--tk-white);
}

/* 選択ボックス（クリックでリストを開閉） */
.select-display {
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    background: var(--tk-input-bg);
    border: 1px solid var(--tk-input-border);
    color: var(--tk-white);
    border-radius: 9px;
    padding: 13px 22px 13px 12px;
    /* 右はシェブロン分・左は詰めて数字の表示領域を広く */
    font-size: 15px;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select-display.is-placeholder {
    color: var(--tk-white);
}

.select-wrap.is-open .select-display {
    border-color: var(--tk-blue);
}

/* input の上に開くカスタムドロップダウン。高さは 30vh まで・超えたらスクロール */
.select-list {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 30vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--tk-input-bg);
    border: 1px solid var(--tk-input-border);
    border-radius: 9px;
    box-shadow: 0 8px 20px var(--tk-black-25);
    display: none;
}

.select-wrap.is-open .select-list {
    display: block;
}

.select-option {
    font-family: 'Noto Sans JP', sans-serif;
    padding: 11px 12px;
    font-size: 15px;
    color: var(--tk-white);
    cursor: pointer;
    white-space: nowrap;
}

.select-option.is-selected,
.select-option:active {
    background: var(--tk-blue);
}

/* 外側タップ検知用の透明バックドロップ（リストの下・他要素の上） */
.select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
}

.select-backdrop.is-visible {
    display: block;
}

/* ドロップダウンの下向きシェブロン */
.select-wrap::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%239AA4B8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
    pointer-events: none;
}

/* 入力エラー表示 */
.error-msg {
    color: var(--tk-red);
    font-size: 13px;
    margin: 8px 0 0;
    display: none;
}

.error-msg.is-visible {
    display: block;
}

/* ============ Button ============ */
.btn-agree {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--tk-white);
    border: none;
    color: var(--tk-dark);
    width: 100%;
    padding: 16px 46px;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 2px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.btn-agree:disabled {
    background-color: var(--tk-btn-disabled-bg);
    color: var(--tk-btn-disabled-ink);
    opacity: 1;
    cursor: not-allowed;
}

/* 無効時: 左アイコンは currentColor で追従、右の chevron は非表示 */
.btn-agree:disabled .icon-right {
    display: none;
}

.btn-agree .icon-left {
    position: absolute;
    left: 16px;
    line-height: 0;
}

.btn-agree .icon-right {
    position: absolute;
    right: 16px;
    line-height: 0;
}

/* ============ 完了画面（completion.html） ============ */
.complete-title {
    color: var(--tk-red);
    font-size: 42px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 5px;
    text-align: center;
    margin: 0 0 18px;
}

.complete-desc {
    color: var(--tk-white);
    font-size: 15px;
    font-weight: 500;
    line-height: 25.5px;
    text-align: center;
    margin: 0;
}

/* スクリーンショット保存のご案内（黄色ボックス・黒文字） */
.screenshot-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 20px 0;
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--tk-yellow);
    color: var(--tk-dark);
}

.screenshot-note-icon {
    flex: 0 0 auto;
    line-height: 0;
}

.screenshot-note-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 21px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    text-align: left;
    color: var(--tk-dark);
}

/* 集合時間のご案内（黄色ボックスの下・白文字） */
.complete-notice {
    color: var(--tk-white);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 15px;
    padding: 0 20px;
    line-height: 25.5px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    margin: 24px 0 0;
}

.complete-card {
    border: 1px solid var(--tk-blue);
    border-radius: 14px;
    padding: 8px 20px;
    background: var(--tk-card-bg-2);
    margin-top: 34px;
}

.complete-card-title {
    color: var(--tk-red);
    font-size: 25px;
    font-weight: 500;
    line-height: 100%;
    margin: 12px 0;
}

.complete-card-divider {
    height: 1px;
    background: #3A6FE0B2;
}

.complete-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}

.complete-row+.complete-row {
    border-top: 1px dashed rgba(120, 150, 210, 0.6);
}

/* 1行目: アトラクション名（ラベルのみ・左寄せ） */
.complete-event {
    color: var(--tk-white);
    font-size: 20px;
    font-weight: 500;
}

.complete-label {
    color: var(--tk-white);
    font-size: 18px;
    font-weight: 500;
    /* 右側の値が長くてもラベルは 1 行のまま潰れないようにする */
    flex: 0 0 auto;
    min-width: 4em;
    white-space: nowrap;
    margin-right: 12px;
}

/* もう一度取得ボタン（fail 画面の trc4-btn-retry と同構成・白ボタン） */
.btn-retry {
    font-family: 'Noto Sans JP', sans-serif;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--tk-btn-bg);
    border: 1px solid var(--tk-blue);
    color: var(--tk-white);
    padding: 12.5px 16px;
    cursor: pointer;
}

.btn-retry-ico {
    width: 23px;
    display: flex;
    justify-content: center;
    line-height: 0;
}

.btn-retry-label {
    flex-grow: 1;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 1px;
}

.btn-retry-chev {
    width: 22px;
    display: flex;
    justify-content: flex-end;
    opacity: .85;
    line-height: 0;
}

.complete-value {
    color: var(--tk-white);
    font-size: 16px;
    font-weight: 500;
    text-align: right;
    /* 長い値はラベルを押し潰さず折り返す */
    overflow-wrap: anywhere;
}

/* =====================================================================
 * 言語切替スイッチャー（AIシュリーマン カスタム UI）
 *   通常フローでページ最上部に配置し、その下にタイトルが来るようにする。
 *   （position:fixed だとタイトルと重なるため採用しない）
 *   配色: ドロップダウンはアプリ背景色と同色、文字は白。選択中のみ青背景。
 *   ※ 3プロジェクトで同一デザイン。CSS 変数にはフォールバック値を持たせ、
 *     変数が未定義のプロジェクトでも同じ見た目になるようにしている。
 * ===================================================================== */
.lang-switcher {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    /* padding ではなく margin を使う: ドロップダウンは絶対配置で right:0 が
     * padding box 基準になるため、padding だとトリガーと右端がずれる。 */
    margin: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 0;
    font-family: 'Noto Sans JP', sans-serif;
}

/* ---- 言語スイッチャーの非表示（各フローの最初の画面のみ表示する） ----
   body に no-lang-switcher を付けたページではスイッチャーを隠す。
   あわせて占有高さを 0 にし、本文側の height / min-height 計算がずれないようにする
   （--lang-switcher-h はカスタムプロパティのため body 指定が子孫へ継承される）。 */
body.no-lang-switcher { --lang-switcher-h: 0px; }
body.no-lang-switcher .lang-switcher { display: none !important; }


/* ---- トリガー（地球アイコン + language + 矢印） ---- */
.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: var(--tk-white, #FFFFFF);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.lang-globe,
.lang-chevron {
    display: flex;
    align-items: center;
    line-height: 0;
}

/* 開いている間は矢印を反転 */
.lang-switcher.is-open .lang-chevron {
    transform: rotate(180deg);
}

/* ---- ローディング（AIシュリーマン の準備完了まで）----
 * order:-1 でトリガーの左に表示する。flex の通常フローに置くため
 * 絶対配置は使わず、トリガーのクリックを妨げない。 */
.lang-loading {
    order: -1;
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: var(--tk-white, #FFFFFF);
    border-radius: 50%;
    pointer-events: none;
    animation: lang-spin .8s linear infinite;
}

@keyframes lang-spin {
    to { transform: rotate(360deg); }
}

/* ---- ドロップダウン ----
 *   背景はアプリの背景色（--tk-bg-base）と同色にして UI を馴染ませる。
 *   透過にすると背後のコンテンツが透けて文字が読みにくくなるため不採用。
 */
.lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 168px;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--tk-bg-base, #060B18);
    border-radius: 8px;
}

.lang-menu[hidden] {
    display: none;
}

.lang-item {
    position: relative;
    padding: 10px 12px 10px 34px;
    border-radius: 6px;
    color: var(--tk-white, #FFFFFF);
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    text-align: right;
    cursor: pointer;
}

.lang-item:active {
    background: var(--tk-blue-70, rgba(58, 111, 224, .7));
}

/* 選択中: 青背景 + 白文字 + チェックマーク */
.lang-item.is-selected {
    background: var(--tk-blue, #3A6FE0);
    color: var(--tk-white, #FFFFFF);
}

.lang-item.is-selected::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    width: 5px;
    height: 9px;
    margin-top: -6px;
    border: solid var(--tk-white, #FFFFFF);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* AIシュリーマン 標準ウィジェットを非表示にする（独自スイッチャーを使用するため）。
 * body 直下に #ait-lang-floating が自動挿入されるので、
 * style.css はスクリプトより先に読み込まれる前提で最初から隠しておく。 */
#ait-lang-floating,
.ait-lang--floating {
    display: none !important;
}