/* ==========================================================================
   アプリケーション外枠スタイル
   - PCサイズ：スマホの枠を表示
   - SPサイズ：全画面のフルリキッドレイアウトに切り替え
   ========================================================================== */
/* --- 共通定義 --- */
:root {
/* ヘッダーフッター */
--header-height: 70px;
--footer-height: 100px;
/* コンテンツの余白 */
--content-padding-top: 25px;
--content-padding-bottom: calc(var(--footer-height) + 30px);
/* PCレイアウト */
--pc-layout-width: 393px; /* Figmaモックアップ作成時のサイズ */
--pc-layout-height: 95svh;
--pc-layout-max-height: 852px; /* Figmaモックアップ作成時のサイズ */
--pc-layout-border-width: 10px;
}

/* --- ページ全体の基本設定 --- */
html, body {
    height: 100% !important;
    margin: 0;
    padding: 0;
    overflow: hidden;   /* PCブラウザ自体のスクロールバーを隠す */
}

body {
    display: flex;
    justify-content: center;
    align-items: center;    /* 上下左右中央に枠を配置 */
    background-image: url('../image/pic/pc-background.png');    /* あらかじめ作成したタイル背景画像をループ */
    background-repeat: repeat;  /* 画像を連続させる設定 */
    background-size: 300px auto;    /* 画像の大きさを調整 */
}

/* --- アプリコンテンツ外枠 (#allContent) --- */
#allContent {
    background-color: var(--theme-base-color);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    
    /* 枠内スクロールを許可しつつ、スクロールバー自体は非表示にする */
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;    /* IE, Edge用 */
    scrollbar-width: none;       /* Firefox用 */
    
    /* [PC用レイアウト] デフォルト設定 */
    min-height: auto !important;    /* min-heightが100vhになっていると縮まないので、autoで上書き */
    width: var(--pc-layout-width);
    height: var(--pc-layout-height);
    max-height: var(--pc-layout-max-height);
    border: var(--pc-layout-border-width) solid #243E57;
    border-radius: 40px;
    margin: auto;
}

/* Google Chrome, Safari, Webkit系ブラウザのスクロールバーを非表示にする */
#allContent::-webkit-scrollbar {
    display: none;
}

/* --- [モバイル用レイアウト] 画面幅が414px以下の場合に適用 --- */
@media screen and (max-width: 414px) {
    html, body {
        overflow: auto; /* スマホ実機ではOS標準のスクロールを許可 */
    }

    #allContent {
        /* PC用の固定サイズを解除して全画面表示に強制上書き */
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        
        /* 枠線・角丸・影などの装飾をリセット */
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
    }
}
/* =========================================
   PC背景用の左右エリア
========================================= */
.pc-side-area {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    height: 93svh;
    max-height: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 左右エリアの位置指定 */
.side-area-left {
    left: 20px;
    right: calc(50% + 210px); 
}
.side-area-right {
    right: 20px;
    left: calc(50% + 210px);
}

.pc-sidebar-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 460px;
    gap: 20px;
}

.pc-side-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
}

.pc-side-img {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pc-side-img svg,
.pc-side-img img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 31svh;
    object-fit: contain;
    display: block;
}

/* 個別グループの幅指定と左右マージン中央寄せ */
.group1, .group2, .group3, .group4, .group5, .group6 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.group1, .group2 {
    width: 95% !important;
}
.group3 {
    width: 90% !important;
}
.group4, .group5, .group6 {
    width: 70% !important;
}

.group2 svg, .group2 img {
    transform: scale(0.9);
    margin-top: 25px;
}

/* 縦幅の非常に狭いディスプレイ用設定 */
@media (max-height: 750px) {
    .pc-side-img svg,
    .pc-side-img img {
        max-height: 26svh;
    }
}

/* 画面幅が狭くなった場合：非表示 */
@media (max-width: 1000px) {
    .side-area-left, 
    .side-area-right {
        display: none !important;
    }
}

/* =========================================
   ヘッダー
========================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100%;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 25px 0;
    border-bottom: 1.5px solid var(--theme-header-nav-border); /* 下線 */
}
/* 中身をしっかり横並びに広げる */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}
/* タイトル（中央配置） */
.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
.header-title {
    font-size: 15px;
    font-weight: bold;
    margin: 0;
}
/* 左右のエリア */
.header-left, .header-right {
    width: auto;
    min-width: 60px; /* 最低限の幅だけ確保 */
    height: 100%;
    display: flex;
    align-items: center; /* 垂直中央 */
    position: relative;
    z-index: 2;
}
.header-left {
    justify-content: flex-start;
}
.header-right {
    justify-content: flex-end;
}
/* ボタン系アイコン */
.header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}
/* 左側のアイコン */
.header-left .header-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke: var(--theme-text-main);
}
/* ボタン系アイコン（共通）　リンクホバー時に青くなるのを防ぐ */
.header-btn:hover {
    color: inherit; /* 元の色を維持 */
    text-decoration: none;
}
/* ボタン系アイコン（共通）　押下時の黒枠を消す */
.header-btn:focus,
.header-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

/* --- ふりがな表示切替 --- */
.ruby-toggle {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    line-height: 1;
}
.ruby-label {
    font-size: 12px;
    color: inherit;
    margin: 0;
    white-space: nowrap; /* 文字が2行に折り返されるのを防ぐ */
    padding: 4px 0 4px 3.5px;
    cursor: pointer;
}
.show-ruby .ruby-label {
    color: var(--theme-main-color);
    font-weight: bold;
}
/* スイッチの外枠 */
.ruby-toggle .switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 19px;
    margin: 0;
}
/* チェックボックスを隠す */
.ruby-toggle .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
/* スライダーの土台 */
.ruby-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; /* OFF時の色 */
    transition: .3s;
    border-radius: 20px;
}
/* 白い丸部分 */
.ruby-toggle .slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* ON時の背景色 */
.ruby-toggle input:checked + .slider {
    background-color: var(--theme-main-color);
}
/* ON時の丸の移動 */
.ruby-toggle input:checked + .slider:before {
    transform: translateX(11px);
}

/* --- ふりがな（ルビ）の表示制御 --- */
/* 初期状態：ふりがな（rtタグ）を非表示にする */
body:not(.show-ruby) ruby rt {
    display: none;
}
/* bodyタグに 'show-ruby' クラスが付いた時だけ、ふりがなを表示する */
body.show-ruby ruby rt {
    display: ruby-text;
    font-size: 0.8em;
    padding: 2px;
    text-align: left;
}

/* --- 各ヘッダーテーマ --- */
/* デフォルトヘッダー */
.header-default {
    background-color: var(--theme-base-color);
    color: var(--theme-text-main);
}
/* ホーム画面用ヘッダー */
.header-pointhome {
    background-color: var(--theme-main-color);
    color: #FFFFFF;
    border-bottom: none;
    padding-right: 30px;
    padding-left: 30px;
}
/* スキャン画面用ヘッダー */
.header-scan {
    background-color: #000000; 
    color: #FFFFFF;
    border-bottom: none;
}
.header-scan .header-left .header-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: inherit;
}

/* --- ポイントホーム画面用ヘッダー　マイページメニュー --- */
/* 左側 */
.header-pointhome .header-left {
    display: none; /* 左側の戻るボタン用スペースを無くす */
}
/* タイトル */
.header-pointhome .header-center {
    position: static; /* 中央固定（absolute）を解除 */
    transform: none;
    left: auto;
    margin-right: auto; /* 右側の設定アイコンを右端へ押しやる */
}
.header-pointhome .header-title {
    font-size: 20px;
    text-align: left;
}
/* 設定アイコン */
#settings-trigger {
    padding-right: 0 !important;
}
#settings-trigger svg {
    width: 23px;
    height: 23px;
    flex-shrink: 0;
}
.header-pointhome .header-right svg,
.header-pointhome .header-right svg path {
    color: #FFFFFF;
    fill: currentColor;
}
/* ドロップダウンのトグルボタン横に付く自動の「▼」マークを消す */
#settings-trigger::after {
    display: none;
}
/* メニューの大枠 */
.mypage-menu {
    margin-top: 5px; /* 歯車アイコンから少し離す */
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 8px 0;
    width: auto;
}
/* マイページ　各メニュー項目 */
.mypage-menu .dropdown-item {
    display: flex;
    align-items: center;
    padding: 4px 24px;
    color: var(--theme-text-main);
    gap: 10px;
    font-size: 14.4px;
}
.mypage-menu .dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.mypage-menu .dropdown-item svg, 
.mypage-menu .dropdown-item svg path {
    color: var(--theme-text-main);
    fill: currentColor;
}
/* タップ時の背景色をBootstrapの規定色から上書き */
.mypage-menu .dropdown-item:active,
.mypage-menu .dropdown-item:hover {
    background-color: var(--theme-link-hover-bg);
}
/* ログアウト */
.mypage-menu .dropdown-item.logout-item,
.mypage-menu .dropdown-item.logout-item svg,
.mypage-menu .dropdown-item.logout-item svg path {
    color: var(--theme-text-danger) !important;
    fill: var(--theme-text-danger) !important;
}

/* =========================================
   下部ナビゲーション
========================================= */
footer.bottom-nav {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    margin-top: auto; /* コンテンツが短い場合でも強制的に一番下に配置する */
    width: 100%;
    z-index: 1030;
    background-color: #FFFFFF;
}
/* ナビゲーションの土台 */
footer .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background-color: #FFFFFF;
    height: var(--footer-height);
    border-top: 1px solid var(--theme-header-nav-border);   /* この線とボタンのアーチを繋げる */
    padding: 0 13px 22px 13px;
}
/* 各メニューアイテム */
footer .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    margin-bottom: 10px;
    color: var(--theme-menu-inactive); /* 非アクティブ状態 */
}
footer .nav-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* SVG本体を枠にピッタリ合わせる */
footer .nav-icon svg {
    width: 100%;
    height: 100%;
    margin-bottom: 3px;
    flex-shrink: 0;
    /* アニメーションを滑らかに */
    transition: color 0.2s ease, fill 0.2s ease, stroke 0.2s ease; 
}
footer .nav-text {
    font-size: 11px;
    line-height: 1;
}
/* 各メニューアイテム アクティブ状態 */
footer .nav-item.active {
    color: var(--theme-menu-active);
}
/* 各メニューアイテム アクション */
footer .nav-item:active,
footer .nav-item-scan:active .scan-btn-inner > * {
    transform: scale(0.95);
    transition: transform 0.1s;
}
/* スキャンボタン */
footer .nav-item-scan-wrapper {
    position: relative;
    width: 100px;
    display: flex;
    justify-content: center;
}
footer .nav-item-scan {
    position: absolute;
    bottom: -7px; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #FFFFFF;
}
footer .scan-btn-inner {
    width: 110px;
    height: 110px;
    background-color: var(--theme-btn-scan);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;    
    border: 10px solid #FFFFFF;  /* 白い太枠でナビの線をへこませる */
    position: relative; /* アーチ線を重ねるための基準点として追加 */
}
footer .scan-btn-inner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--theme-header-nav-border);
    /* 白い太枠の外側に1pxの線を引くため、上下左右を広げる */
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    clip-path: inset(0 0 76% 0);    /* 下から線を切り取って隠す。*/    
    pointer-events: none; /* クリックの邪魔にならないようにする */
}
footer .nav-icon-scan {
    width: 39px;
    height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
}
footer .nav-icon-scan svg {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}
footer .nav-text-scan {
    font-size: 12px;
    line-height: 1;
}

/* =========================================
   上部へのスクロールボタン
========================================= */
#scroll-top {
    position: absolute !important;
    right: -5px;
    bottom: calc(var(--footer-height) + 15px);
    z-index: 1040;
    cursor: pointer;
    margin-top: calc(var(--header-height) * -1); /* 要素の高さを相殺してレイアウト崩れを防ぐ */
    transition: opacity 0.3s, transform 0.2s ease;
    /* 右側に寄せる設定 */
    margin-left: auto;
    margin-right: 10px;
}
#scroll-top:hover {
    transform: translateY(-4px);
}
#scroll-top img {
    width: 110px;
    height: auto;
    filter: drop-shadow(0 0px 15px rgba(0,0,0,0.25));
}
/* クリックした時の沈み込み演出 */
#scroll-top:active {
    transform: scale(0.97);
}