@charset 'UTF-8';
/*
 課金まわりの法定表示 (運営者情報 / 特定商取引法 / 資金決済法)。

 配色と枠の作りはランキング (ranking.css) にそろえる。
   .lgWrap  … クリームの器 (#fdf6d8) + 影 + 角丸 14px       … .rkWrap 相当
   .lgTtl   … 黄色の見出し帯 (#fce97c) + こげ茶の文字        … .rkTtl 相当
   .lgPanel … ふちどり (#d9b45a) のある生成りのパネル (#fffdf0) … .rkPanel 相当
   .lgClose … 器の外・下に置く「とじる」                      … .rkClose 相当

 スクロールはパネルの中だけで起こす (見出しは常に見えるようにする)。
*/

/* 器。画面の高さに収め、はみ出す分はパネルの中でスクロールさせる。
   内訳: 下部ナビ 52px + セーフエリア + 上余白 14px
         + とじる (margin 14px + 高さ 32px) + 下余白 12px */
.lgWrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 52px - 72px);
    height: calc(100dvh - 52px - env(safe-area-inset-bottom, 0px) - 72px);
    margin: 14px 14px 0;
    background-color: #fdf6d8;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* 見出し帯 */
.lgTtl {
    flex-shrink: 0;
    margin: 0;
    padding: 12px 10px;
    border-radius: 14px 14px 0 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #5b4636;
    background-color: #fce97c;
}

/* パネルの器。余白だけ持ち、スクロールはパネル側で起こす */
.lgScroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 14px 12px 12px;
}

/* 中身のパネル。ここがスクロールする */
.lgPanel {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 14px;
    background-color: #fffdf0;
    border: 2px solid #d9b45a;
    border-radius: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 端まで来ても背後 (マイページ本体) にスクロールを連鎖させない */
    overscroll-behavior: contain;
}

/* ===== 中身 ===== */
.lgList { margin: 0; }

.lgLabel {
    margin: 14px 0 4px;
    font-size: 12px;
    font-weight: bold;
    color: #8a6d3b;
}
.lgLabel:first-child { margin-top: 0; }

.lgValue {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #5b4636;
    /* 長いメールアドレスのように、1 行に収まらない切れ目の無い文字列だけを割る。
       break-all / anywhere だと「森JPタワー」が「森J / Pタワー」のように
       まだ余裕があるのに途中で割れてしまう */
    word-break: normal;
    overflow-wrap: break-word;
    white-space: pre-line;   /* 住所などの改行をそのまま出す */
}

/* ボタンだけで出す項目 (問い合わせ窓口) の行 */
.lgBtnRow {
    margin: 16px 0 0;
    text-align: center;
}

/* 行き先を持つ項目 (問い合わせ窓口) のボタン。
   色はランキングの緑 (.rkToggle の active) にそろえる */
.lgBtn,
a.lgBtn {
    display: inline-block;
    margin: 2px 0 0;
    padding: 9px 18px;
    border-radius: 999px;
    background-color: #84c52b;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 2px 0 #5f9a17;
}

.lgBtn:active,
a.lgBtn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #5f9a17;
}

/* 見出しを付けたままボタンで出す項目 (資金決済法の問い合わせ窓口・約款)。
   ボタンだけは項目の中で左右中央に置く (見出しは左のまま)。
   .lgValue の white-space: pre-line がボタンの前後に隙間を作るので戻す */
.lgValue--btn {
    white-space: normal;
    line-height: 1;
    margin-top: 6px;
    text-align: center;
}

/* まだ文言が入っていない項目。抜けていることが目で分かるようにする */
.lgValue.is-pending { color: #b3a692; }

/* 注意文の枠。見出し + 箇条書きにする場合も同じ色を使う (色はここだけで決める) */
.lgNotice,
.lgNoticeList {
    background-color: #edf7dc;
    border: 1px solid #cde9a6;
    font-size: 12px;
    line-height: 1.7;
    color: #4c8a1f;
}

.lgNotice {
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
}

/* 注意事項が 2 つ以上あるとき。見出し + 箇条書きで、緑の枠は一続きに見せる。
   見出しの下の角と一覧の上の角を落として、2 つで 1 つの箱にする。 */
.lgNotice--head {
    margin-bottom: 0;
    padding-bottom: 6px;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    font-weight: bold;
}

.lgNoticeList {
    margin: 0;
    padding: 0 12px 10px 28px;
    border-top: 0;
    border-radius: 0 0 6px 6px;
}

.lgNoticeList li { margin: 0 0 4px; }
.lgNoticeList li:last-child { margin-bottom: 0; }

/* とじる: ランキング (.rkClose) と同じく器の外・下に置く */
.lgClose {
    flex: 0 0 auto;
    margin: 14px 0 0;
    text-align: center;
}

/* 小さめのボタン。ボタンを 2 つ並べる導線 (法定表示) 用 */
.lgBtn--sm,
a.lgBtn--sm {
    padding: 8px 14px;
    font-size: 12px;
}

/* ショップとコイン購入モーダルから開く法定表示への導線。
   運営者情報の画面と同じ見た目 (緑のボタン + 緑の枠の注意文) にそろえる。 */
.lgEntry {
    margin: 12px 0 0;
    text-align: center;
}

/* 導線のボタンは 1 つずつ段落を分ける (.lgBtnRow)。
   モーダルの中なので、本文の 16px より詰める */
.lgEntry .lgBtnRow {
    margin-top: 8px;
}

/* 導線の中の注意文。枠は運営者情報 (.lgNotice) と同じものを使うが、
   ここは本文ではないので少し詰める */
.lgEntry .lgNotice {
    margin-top: 10px;
    text-align: left;
}


/* ===== 約款の本文 (コイン利用規約) =====
   条文が続く長い文章なので、見出しと本文の区切りをはっきりさせる。
   枠は他の法定表示と同じ (.lgPanel)。 */
.lgDoc {
    font-size: 12px;
    line-height: 1.8;
    color: #5b4636;
}

.lgDoc p {
    margin: 0 0 12px;
}

.lgDoc h2 {
    margin: 20px 0 8px;
    padding: 0 0 4px;
    border-bottom: 1px dashed #e0ce8f;
    font-size: 13px;
    font-weight: bold;
    color: #8a6d3b;
}

.lgDoc h2:first-of-type {
    margin-top: 16px;
}

.lgDoc ol {
    margin: 0 0 12px;
    padding-left: 1.4em;
}

.lgDoc ol > li {
    margin: 0 0 6px;
    list-style: decimal;
}

/* 名称 / 住所 のような「項目と中身」の並び */
.lgDocList {
    margin: 0 0 12px;
    padding: 10px 12px;
    background-color: #fdf6d8;
    border-radius: 8px;
}

.lgDocList > dt {
    margin: 8px 0 2px;
    font-size: 11px;
    font-weight: bold;
    color: #8a6d3b;
}

.lgDocList > dt:first-child {
    margin-top: 0;
}

.lgDocList > dd {
    margin: 0;
    white-space: pre-line;   /* 住所の改行をそのまま出す */
}

/* 本文中の未記入 (準備中) は行の中に出るので、行内で色だけ変える */
.lgDoc .lgValue.is-pending {
    display: inline;
}