/* common/css/menu.css */ /* ★★ DESIGN-RULES GATE ― このファイル(CSS)を触る前に必読（design-rules.md §6/§0.5 P-6）★★ * 1) 色は確定パレットのみ・直書き禁止: 本文=--ink / 補助=--ink-soft / 見出し強調=--m-plum / * 金の【文字・線・枠・フォーカス】=--gold-1(#5C4318) / 副次・取消ボタン塗り=--btn2(#6A6A73)。 * 明るい金 --m-gold は【面(background)】専用＝文字/線/枠に使うな。淡グレー#9a9aa2＋白は禁止(2.8:1)。 * 2) 入力 font-size>=16px(iOS) / 文字>=12px。:hover は color:#fff を再宣言＋暗転方向(brightness<1)。 * クリックできない要素に :hover を付けない。 * 3) 変更後 必ず `php doc/contrast-check.php` を【全PASS＋禁止トークン0件】にしてから納品する。 * ===================================================================== */ /* ===================================================================== * Luna Lotus 会員/管理メニューUI * ベース＝FEDA/LEAPS の menu系CSS（menu_wrap/menu_logo/menu_price/menu_list/menu_box/ * menu_blank/menu_manager/menu_manager_box）を踏襲し、Luna の色・ロゴを上載せ。 * ・機能は menu_box タイルで全表示（絵文字・背景色なし＝絵文字が見える） * ・メンバー機能/運営機能/ログアウトは menu_manager（枠線ボタン・大アイコンなし） * ・ロゴは大きく中央／紺→白のグラデは廃止（紺ブロックと白を直接切替） * version: menu.css?4 * ===================================================================== */ :root{ --m-navy:#222A44; --m-navy2:#161C30; --m-plum:#5A2E56; --m-gold:#C7A153; /* --m-gold=面(fill)専用。文字/線/枠は --gold-1(#5C4318) */ --m-gold3:#EBD49A; --m-line:#E4DBCF; --btn2:#6A6A73; /* 代行バー(.imp-bar)の実高さは padding:7px と中身から決まる可変値。 追随させるヘッダー等は、この高さを1箇所で定義した変数を使う。 文言やボタンが変わっても崩れない。 */ --imp-bar-h:45px; /* 副次/取消ボタン塗り（白文字5.35:1）。淡グレー#9a9aa2は使用禁止 */ } body.luna-app{ margin:0; color:#2C2430; background:#fff; background: radial-gradient(46% 40% at 4% 10%, rgba(248,158,196,.5), transparent 60%), radial-gradient(44% 38% at 98% 6%, rgba(194,172,250,.5), transparent 58%), radial-gradient(50% 44% at 104% 64%, rgba(252,186,138,.45),transparent 62%), radial-gradient(50% 44% at -4% 94%, rgba(158,231,200,.45),transparent 62%), radial-gradient(46% 40% at 54% 110%, rgba(176,202,251,.5), transparent 60%), #ffffff; background-attachment:fixed; /* メイリオ・ＭＳ明朝・游明朝は Windows 11 の「任意インストール(Feature On Demand)」であり、 標準では入っていない。標準搭載なのは游ゴシック(Yu Gothic)。実在するフォント名を 明示的に列挙し、標準搭載の游ゴシックを最優先の受け皿にする。 body（本文の基底）はブランド書体を使わずOS標準フォントのみとする（Webフォントの ダウンロード待ちによる2段階描画を避けるため）。ブランド書体はLP等の 限定的な見出し・装飾要素（.pname/.price 等の個別クラス）にのみ使う。 */ font-family: "Yu Gothic UI", "游ゴシック体", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Helvetica, Arial, sans-serif; } /* メニュー画面（管理者TOP等）は暗色背景＝白タイルがはっきり浮く（FEDA踏襲） */ body.luna-app.menu-mode{ color:#fff; background:linear-gradient(165deg,#05070D 0%,#0E1322 38%,#161C30 70%,#222A44 100%); background-attachment:fixed; } /* ===== メニュー画面（管理者TOP等）：紺ロゴブロック→白（グラデ無し） ===== */ .luna-app .menu-head{background:transparent; color:#fff; text-align:center; padding:14px 16px 10px} .luna-app .menu-head .menu_logo{margin:0} .luna-app .menu-head .menu_logo img{width:auto; height:140px; max-width:none} /* 固定サイズ・縮小しない（FEDA/LEAPS同様） */ .luna-app .menu-head .menu-who{margin-top:16px; font-size:14px; color:var(--m-gold3); letter-spacing:.05em} .luna-app .submenu-back{margin-top:14px} .luna-app .submenu-back a{color:var(--m-gold3); font-size:13px; text-decoration:none} .luna-app .submenu-back a:hover{color:#fff; text-decoration:underline} .luna-app .menu{margin-bottom:15px} .luna-app .menu_wrap{width:90%; max-width:960px; margin:26px auto 0} /* セクション見出し（「運営機能」「アカウント」等）。暗いメニュー背景上＝明るい金で可読に。 旧状態は class 定義が無く h3 既定の暗色(--ink)を継承し、暗背景に暗文字でコントラスト約1.1:1の違反だった。 --m-gold3(#EBD49A) で約12:1（design-rules §6 AA/AAA 余裕クリア）。 */ .luna-app .menu_sec{color:var(--m-gold3); font-size:15px; font-weight:700; letter-spacing:.08em; margin:22px 0 10px; padding:0 4px} /* メンバー数/ポイント（白カード・Luna配色） */ .luna-app .menu_price{margin:0 0 20px; padding:12px 20px; border-radius:12px; text-align:center; color:var(--m-navy); font-size:13px; font-weight:700; letter-spacing:.06em; background:#fff; background-image: radial-gradient(40% 82% at 0% 0%, rgba(248,158,196,.62), transparent 46%), radial-gradient(40% 82% at 100% 0%, rgba(194,172,250,.60), transparent 46%), radial-gradient(46% 92% at 100% 100%,rgba(252,186,138,.55), transparent 48%), radial-gradient(46% 92% at 0% 100%, rgba(158,231,200,.55), transparent 48%); box-shadow:0 10px 26px rgba(0,0,0,.34)} .luna-app .menu_price .mp_num{font-size:16px; color:#5C4318} /* タイルの列数（--ww-cols）の定義は luna.css の冒頭に集約する。 会員トップ(home.php)は menu.css を読み込まず luna.css だけを読むため、 ここに置くと会員トップに変数が届かない。luna.css が全画面共通の唯一のCSS。 */ /* 機能アイコン（FEDA menu_list/menu_box 踏襲。絵文字は背景色なし） */ .luna-app .menu_list{display:flex; flex-wrap:wrap; justify-content:space-between} /* 幅＝100%÷列数−2%（隙間ぶん）。5列→18% / 3列→31.33% / 2列→48% と、従来の実値および本家(48%)に一致する。 */ .luna-app .menu_box{width:calc(100% / var(--ww-cols, 5) - 2%); margin-bottom:16px; padding:16px 6px 14px; box-sizing:border-box; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; border-radius:12px; background:#fff; color:#3a3340; font-size:12px; font-weight:700; text-align:center; text-decoration:none} /* バッジは括弧書きテキストではなく、本家 LEAPS(common/css/add.css) の赤丸バッジを使う。 */ .luna-app .menu_new_badge{position:absolute; top:6px; right:6px; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:#d32222; color:#fff; font-size:12px; font-weight:700; line-height:20px; text-align:center; z-index:3; box-shadow:0 1px 4px rgba(211,34,34,.5)} /* FEDA 同様、土台はボーダーなし・box-shadow なしの「のっぺり白カード」。暗い背景で浮かせる＝hover の groove 枠がやわらかく見える */ /* ホバー：FEDA と完全同一CSS（:before の枠が -8px に広がる groove 枠） */ .luna-app .menu_box:before{ -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-property:top,right,bottom,left; transition-property:top,right,bottom,left; position:absolute; top:0; right:0; bottom:0; left:0; content:''} .luna-app .menu_box:hover:before,.luna-app .menu_box:focus:before,.luna-app .menu_box:active:before{ z-index:2; top:-8px; right:-8px; bottom:-8px; left:-8px; border:#C7A153 solid 4px; border-radius:0.7em; box-shadow:0 0 10px #FBF3D0, 0 0 30px #E3B23C} /* FEDA add.css の「ぼんやり光る」グロー（暖色）。Lunaは金系で */ .luna-app .menu_box .emo{width:54px; height:54px; max-width:100%; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; border-radius:50%; border:2px solid #E7D8B8; background:transparent; font-size:26px; line-height:1; box-sizing:border-box} /* 枠線リング。中央寄せは flex(align/justify center)+line-height:1 のみ。padding等の絵文字別オフセット禁止（絵文字ごとに最適値が異なり再発するため＝design-rules §2-icon） */ /* 旧 案2 の明るい各色を「枠線だけ」で復活（塗りつぶしにしない・濃くしない） */ .luna-app .menu_box.cluster_rose .emo{border-color:#F8C9DE} .luna-app .menu_box.cluster_plum .emo{border-color:#D8C0E5} .luna-app .menu_box.cluster_gold .emo{border-color:#F3DA9C} .luna-app .menu_box.cluster_navy .emo{border-color:#B9C3E0} .luna-app .menu_box.cluster_mint .emo{border-color:#BDE8D4} /* 絵文字=Twemoji SVG(self-host)。リングは flex 中央寄せ、imgは実寸でその中央に来る＝環境差/字ごとのインクずれを排除（design-rules §0.5 P-1） */ .luna-app .emo-i{display:block; object-fit:contain} .luna-app .menu_box .emo .emo-i{width:30px; height:30px} .luna-app .header .title .title_ico .emo-i{width:26px; height:26px} /* FEDA の menu_upper(2行)/menu_middle(1行) 相当：ラベルを固定高(2行分)にして縦中央寄せ。 絵文字は上で揃い、1行ラベルは2行の中央位置に来て、列の縦幅が揃う。 */ .luna-app .menu_box .lbl{display:flex; align-items:center; justify-content:center; text-align:center; min-height:2.7em; line-height:1.35; min-width:0; overflow-wrap:anywhere} /* flex項目の既定 min-width:auto と .lbl-keep の word-break:keep-all が重なると、 ラベルは「メールアドレスの変更」を1語として扱い最小幅174pxを主張し、狭幅でタイルから溢れた。 overflow-wrap:break-word は最小幅を縮めないため効かない（anywhere だけが最小幅を縮める）。 意味単位改行()は通常どおり優先され、どうしても入らない時だけ語中で折れる。 */ .luna-app .menu_blank{width:calc(100% / var(--ww-cols, 5) - 2%)} /* 幅は menu_box と同一。列数は --ww-cols（冒頭の集約ブロック）が唯一の正 */ /* メンバー機能/運営機能/ログアウト（FEDA menu_manager/menu_manager_box 踏襲・枠線ボタン・大アイコンなし） */ .luna-app .menu_manager{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:8px 0 30px} .luna-app .menu_manager_box{position:relative; flex:1 1 0; min-width:140px; max-width:240px; padding:18px 14px; border:1px solid var(--m-line); border-radius:12px; background:#fff; color:var(--m-navy); font-size:13px; font-weight:700; text-align:center; text-decoration:none} /* FEDA踏襲：色は変えず、枠＋ぼんやり光るグローが出るマウスオーバー */ .luna-app .menu_manager_box:before{ -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-property:top,right,bottom,left; transition-property:top,right,bottom,left; position:absolute; top:0; right:0; bottom:0; left:0; content:''} .luna-app .menu_manager_box:hover:before,.luna-app .menu_manager_box:focus:before,.luna-app .menu_manager_box:active:before{ z-index:2; top:-8px; right:-8px; bottom:-8px; left:-8px; border:#C7A153 solid 3px; border-radius:0.7em; box-shadow:0 0 10px #FBF3D0, 0 0 30px #E3B23C} /* 本家(common/css/style.css)には .logout という専用クラス自体が存在せず、 「メンバー機能／運営機能／ログアウト」は全て同色（グレー系の枠線ボタン）。 */ /* Font Awesomeアイコン追加に伴い、本家(style.css: i.fas{margin-right:7px})と同じ余白を移植 */ .luna-app .menu_manager_box i.fas{margin-right:7px} /* ===== 下層ページ：紺帯（グラデ無し）＋戻る＋ハンバーガー＋ドロワー ===== */ .luna-app .topband{position:relative; background:var(--m-navy); color:#fff; padding:14px 70px 16px 16px} .luna-app .topband-inner{max-width:960px; margin:0 auto} .luna-app .brandrow a.logolink{display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:#fff} .luna-app .header_logo{margin:0; line-height:0} .luna-app .header_logo img{height:40px; width:auto} .luna-app .topband .title{margin:0; font-size:16px; font-weight:700; color:#fff; /* Noto Serif JP は読み込み対象外（＝当たらない）、Hiragino は Mac 専用。 実際に読み込んでいるブランド明朝 Zen Old Mincho を先頭にし、 フォールバックは Windows に実在する游明朝/ＭＳ Ｐ明朝で受ける。 */ font-family:"Zen Old Mincho","游明朝","Yu Mincho","YuMincho","ＭＳ Ｐ明朝","MS PMincho",serif} .luna-app .who{font-size:12.5px; color:var(--m-gold3); margin:8px 2px 0} .luna-app .bandnav{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap} .luna-app .bandnav a{display:inline-flex; align-items:center; padding:6px 13px; border-radius:999px; font-size:12.5px; text-decoration:none; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff} .luna-app .bandnav a:hover{background:rgba(255,255,255,.22)} .luna-app .bandnav a.admintop{background:var(--m-gold3); color:#2C2430; border-color:transparent; font-weight:700} .luna-app .bread{list-style:none; margin:10px 0 20px; padding:0; display:flex; flex-wrap:wrap; align-items:center} .luna-app .bread li{display:flex; align-items:center} .luna-app .bread li:not(:last-child){position:relative; margin-right:16px} .luna-app .bread li:not(:last-child):after{content:""; position:absolute; top:50%; right:-11px; width:0; height:0; transform:translateY(-50%); border-width:3px 0 3px 5px; border-style:solid; border-color:transparent transparent transparent var(--gold-1)} .luna-app .bread li a{display:inline-block; padding:2px 10px; border:1px solid var(--gold-1); border-radius:.5em; font-size:12px; text-decoration:none; color:#5C4318; background:rgba(255,255,255,.5); transition:background .25s, filter .25s} /* C: 囲み（クリック可）pill は半透明#fff背景＋濃色文字（明背景でAA確保）。ホバーがふわっと変化するようtransitionを追加（他箇所の慣習.25s〜.3sに合わせる） */ .luna-app .bread li a:hover{background:rgba(255,255,255,.75); color:#5C4318; filter:brightness(1.05)} .luna-app .bread li span{font-size:12px; color:rgba(255,255,255,.85)} /* 現在地は枠なし */ .luna-app .header_spnav_wrap{position:fixed; top:0; right:0; width:80px; height:73px; z-index:6; background:linear-gradient(135deg,#C9A24E 0%,#7E6224 100%); cursor:pointer; transition:filter .25s} .luna-app .header_spnav_wrap:hover{filter:brightness(1.08)} .luna-app.imp .header_spnav_wrap{top:var(--imp-bar-h)} /* 代行バー分だけ下げてヘッダと整列 */ .luna-app .header_spnav{position:absolute; top:50%; left:50%; width:25px; height:20px; transform:translate(-50%,-50%)} .luna-app .header_spnav span,.luna-app .header_spnav:before,.luna-app .header_spnav:after{content:""; position:absolute; left:0; width:100%; height:3px; border-radius:4px; background:#2C2430; transition:all .3s} .luna-app .header_spnav:before{top:0} .luna-app .header_spnav span{top:50%; transform:translateY(-50%)} .luna-app .header_spnav:after{bottom:0} .luna-app.nav-open .header_spnav:before{top:50%; transform:translateY(-50%) rotate(45deg)} .luna-app.nav-open .header_spnav span{opacity:0} .luna-app.nav-open .header_spnav:after{bottom:50%; transform:translateY(50%) rotate(-45deg)} .luna-app .main{padding:20px} /* FEDA一致：全幅・padding:20px（max-width/中央寄せ無し） */ .luna-app .drawer{position:fixed; top:0; right:0; width:300px; max-width:84vw; height:100%; z-index:1; background:#fff; box-shadow:-10px 0 40px rgba(20,20,30,.25); transform:translateX(105%); transition:transform .3s ease; overflow-y:auto; padding:70px 16px 24px} .luna-app.nav-open .drawer{transform:translateX(0)} .luna-app .drawer-mask{position:fixed; inset:0; z-index:1; background:rgba(20,20,30,.4); opacity:0; pointer-events:none; transition:opacity .3s} .luna-app.nav-open .drawer-mask{opacity:1; pointer-events:auto} /* .drawer の列数は冒頭の集約ブロックで --ww-cols:3 として指定済み（幅指定はここに書かない） */ .luna-app .drawer .menu_manager{margin-top:14px} .luna-app .footer{background:linear-gradient(180deg, #000 0%, #161C30 55%, var(--navy-1) 100%); color:rgba(255,255,255,.8); text-align:center; font-size:12px; padding:16px; flex-shrink:0} /* TOPナビバー(.nav)と同一カラーリング */ /* 代行（impersonation）バーの見た目は luna.css の .imp-bar に一本化（ここには置かない） */ @media(max-width:640px){ /* 列数(3列)は冒頭の集約ブロックの --ww-cols が担う。幅をここに書かない（二重管理の再発防止） */ .luna-app .main{padding-left:10px; padding-right:10px} /* FEDA add.css モバイル padding:20px 10px 相当 */ } /* 2列への切替（≤330px）は冒頭の集約ブロックの --ww-cols:2 が担う。幅指定をここに書かない。 */ /* ===== メッセージバー（FEDA putMsg/setMsg 踏襲・最上部の色違いバー） ===== */ .luna-app .msgbars{max-width:960px; margin:0 auto; padding:14px 16px 0} .luna-app .message{position:relative; display:block; margin:7px 0; padding:16px 34px 16px 20px; border-radius:5px; color:#fff; font-size:14px; font-weight:700; letter-spacing:.02em; text-decoration:none; box-shadow:0 0 10px rgba(0,0,0,.3)} /* FEDA .message（add.css実効＝グラデ・角丸5px・影）準拠 */ .luna-app a.message:hover{filter:brightness(1.06)} .luna-app a.message:after{content:"›"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:18px; opacity:.85} .luna-app .message_normal{background:linear-gradient(to left,#4bc2a6,#2f8670)} /* 通常 */ .luna-app .message_success{background:linear-gradient(to left,#51a5e0,#39749B)} /* 成功 */ .luna-app .message_error{background:linear-gradient(to left,#f5a93e,#724f1d)} /* 注意 */ .luna-app .message_fault{background:linear-gradient(to left,#db6356,#933E36)} /* 警告/エラー */ .luna-app .message_conf{background:linear-gradient(to left,#db6356,#933E36)} /* ===== ログイン後メニュー画面のみ：中心から広がる白(body::after)をカット ===== * 端のパステルにじみ(body::before)と暗色(黒紺)背景は残す。ログイン前ページ(.menu-mode無し)は不変。 */ body.luna-app.menu-mode::after{ background:none !important; } /* ============================================================ FEDA 下層ページ・コンポーネント（クラス名はFEDA完全一致／色のみLuna化） ページ側 body に feda-page を付けたときだけ有効（既存LUNAページは非干渉）。 FEDA赤(#d32222)→Luna金(--m-gold)/プラム(--m-plum)に色変え。 ============================================================ */ /* feda-page の幅上限は撤廃（FEDA .main は全幅） */ .luna-app.feda-page .box{max-width:1300px; margin:30px auto; background:#fff; color:var(--ink,#0A0A0A); border-radius:10px; box-shadow:0 8px 24px rgba(20,20,30,.10); overflow:hidden} /* FEDA一致：max-width:1300px・margin:30px auto（中央寄せ） */ /* .box は背景を白にしながら文字色を戻していなかった。 メニュー画面(body.menu-mode)は白文字が既定のため、.box の中の素のテキストが 白地に白文字となり読めない状態だった。白い面を作ったら文字色も必ず戻す。 */ .luna-app.feda-page .box_wrap{padding:18px 22px; border-bottom:solid 1px var(--m-line); display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px} /* .box_wrap は flex のため、子は既定の min-width:auto で【縮まない】。 見出し「メールアドレスの変更」が最小幅269pxを主張し、280pxの親からはみ出していた （実測：320px幅・文字2倍で右端333px）。既存の .dash-main>* と同じ min-width:0 を当て、 最後の手段として語中でも折れるようにする（anywhere は最小幅も縮む・break-wordは縮まない）。 */ .luna-app.feda-page .box_wrap > *{min-width:0} .luna-app.feda-page .box_title{margin:0; min-width:0; overflow-wrap:anywhere; color:var(--m-navy); font-size:16px; font-weight:700; font-family:"Yu Gothic UI","游ゴシック体",YuGothic,"Yu Gothic","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS P Gothic",Helvetica,Arial,sans-serif} /* 明朝禁止：見出しh3継承のserifを打ち消しゴシック（design-rules §2）。実務画面の基幹要素のためブランド書体を外しOS標準に統一（2段階描画の回避） */ .luna-app.feda-page .box_subtitle{margin:0; min-width:0; overflow-wrap:anywhere; color:#6d6d6d; font-size:13px} .luna-app.feda-page .box_subtitle.red{color:#c0533f} .luna-app.feda-page .box_content{padding:20px 22px} .luna-app.feda-page .box_content a:not([class*="btn"]),.luna-app.feda-page .box_subtitle a{color:var(--gold-1)} .luna-app.feda-page .box_info img{max-width:100%; max-height:250px} /* FEDA add.css 移植（告知内の画像上限） */ .luna-app.feda-page .box_info p{margin:1.2em 0} /* FEDA add.css 移植（告知内の段落余白） */ .luna-app.feda-page label{display:block; margin:10px 0 2px; font-size:13px; color:#4a4450; font-weight:700} .luna-app.feda-page .entry{width:100%; border-collapse:collapse; color:#333; font-size:14px} .luna-app.feda-page .entry tr th,.luna-app.feda-page .entry tr td{position:relative; padding:5px 10px; text-align:left} /* FEDA add.css 実効値=padding:5px 10px（間延び防止） */ .luna-app.feda-page .entry tr td:after{display:block; clear:both; content:""} /* FEDA: 浮動した入力/ラジオの回り込み解除 */ .luna-app.feda-page .entry tr th{width:10%; padding-right:20px; white-space:nowrap; clear:both; color:#4a4450; font-weight:700} /* FEDA add.css=width:10%・padding-right:20px・clear:both（ラベル列を内容幅に） */ .luna-app.feda-page .entry tr.entry_border th,.luna-app.feda-page .entry tr.entry_border td{padding-bottom:12px; border-bottom:solid 1px var(--m-line)} .luna-app.feda-page .entry tr th.entry_must:after{content:"必須"; display:inline-block; margin-left:8px; padding:2px 7px; border-radius:4px; background:#c0533f; color:#fff; font-size:12px; vertical-align:middle} .luna-app.feda-page .entry_short tr th{width:20%} /* FEDA: 短い表はラベル列を広めに */ .luna-app.feda-page .form_small{margin-top:4px; color:#6d6d6d; font-size:12px; line-height:1.5} /* 入力欄の下の補足 */ .luna-app.feda-page .form{-webkit-appearance:none; appearance:none; width:100%; margin:6px 0; padding:12px 14px; border:none; border-radius:8px; background:#f2f2f4; font-size:16px; box-sizing:border-box; transition:box-shadow .2s, background-color .2s} .luna-app.feda-page .form:focus{outline:none; background:#fff; box-shadow:0 0 0 3px rgba(199,161,83,.35)} .luna-app.feda-page textarea.form{min-height:120px; line-height:1.7} .luna-app.feda-page #event_edit_form .form_small{margin-top:2px; color:#6d6d6d; font-size:12px; line-height:1.6} .luna-app.feda-page #event_edit_form .event_time{display:inline-block; width:90px; max-width:100%} /* select：FEDA form_select_wrap をそのまま移植（色のみ Luna化）。矢印はラッパーの ::before/::after で描く＝フォーカスで消えない・FEDA と同サイズ */ .luna-app.feda-page .form_select_wrap{display:inline-block; position:relative} .luna-app.feda-page .form_select_wrap select{-webkit-appearance:none; -moz-appearance:none; appearance:none; z-index:1; position:relative; height:25px; margin:0; margin-right:5px; padding:0 28px 0 10px; border:1px solid var(--m-line); border-radius:5px; background:transparent} .luna-app.feda-page .form_select_wrap select::-ms-expand{display:none} .luna-app.feda-page .form_select_wrap:before{z-index:0; position:absolute; top:0; right:5px; width:20px; height:100%; border-top-right-radius:5px; border-bottom-right-radius:5px; background:var(--gold-1); content:''} .luna-app.feda-page .form_select_wrap:after{z-index:0; position:absolute; top:0; right:12px; bottom:0; width:0; height:0; margin:auto 0; border-width:3px 3px 0 3px; border-style:solid; border-color:#fff transparent transparent transparent; content:''} /* 短い入力欄（日付・姓名など全幅不要なもの）。FEDA 同様、内容に応じた幅に */ .luna-app.feda-page .form.short{width:auto; min-width:180px; max-width:100%; display:inline-block} .luna-app.feda-page input.form[type=date]{width:auto; min-width:200px; display:inline-block} /* 姓名・かなの横並び（FEDA edit-agent.php の内部 方式）。td 内で2列に分けて横並び */ .luna-app.feda-page .name_split{width:auto; border-collapse:separate; border-spacing:0} /* イベント編集表は固定幅ラベルと横並び時刻欄で320px幅を押し広げていた。 */ @media screen and (max-width:480px){ .luna-app.feda-page #event_edit_form table.entry{table-layout:fixed} .luna-app.feda-page #event_edit_form table.entry th{width:28%; padding:5px 6px; white-space:normal; overflow-wrap:anywhere} .luna-app.feda-page #event_edit_form table.entry td{width:72%; padding:5px 6px} .luna-app.feda-page #event_edit_form .event_time{width:64px} .luna-app.feda-page #event_edit_form input.udate{padding-left:10px; padding-right:10px; font-size:15px} } .luna-app.feda-page .name_split td{padding:0 6px 0 0} .luna-app.feda-page .name_split td .form{width:auto; min-width:130px; display:inline-block} .luna-app.feda-page .entry_btn_wrap{margin-top:16px; text-align:center} .luna-app.feda-page .entry_btn{display:inline-block; width:auto; min-width:0; max-width:100%; margin:8px; padding:15px 28px; border:none; border-radius:8px; background:var(--btn2); color:#fff; font-size:15px; font-weight:700; letter-spacing:.04em; text-align:center; text-decoration:none; cursor:pointer; transition:filter .2s; box-sizing:border-box} /* background は修飾クラス欠落時のフォールバック（白文字5.35:1）。_submit/_delete/_return があればそれで上書き＝背景未指定で薄地に白文字になる破綻を構造的に防止 */ /* min-width:260px を撤去。CSSでは min-width が max-width より【常に優先】されるため、 max-width:100% を併記していても 260px より下には縮まず、狭幅＋拡大表示でボタンが画面外へ出て押せなかった （実測：375px幅・文字1.5倍で幅390px＝260×1.5、右端450pxまではみ出し）。 本家(FEDA/LEAPS style.css)は .entry_btn に min-width を一切使わず width:40%（スマホは100%）で組んでおり、 だからこの症状が起きない。本家と同じ「%で組む」方針に揃える。 */ .luna-app.feda-page .entry_btn_submit{background:var(--gold-grad); color:#000; text-shadow:0 0 4px #fff,0 1px 2px #fff} .luna-app.feda-page .entry_btn_return{background:var(--btn2)} .luna-app.feda-page .entry_btn_delete{background:#c0533f} .luna-app.feda-page .entry_btn_return:hover,.luna-app.feda-page .entry_btn_delete:hover{filter:brightness(.92)} /* 白文字ボタンは暗くしてコントラスト維持 */ .luna-app.feda-page .entry_btn_submit:hover{filter:brightness(1.08)} /* 金＋黒文字は明るくしてコントラストを下げない */ /* FEDA踏襲：会員編集の上位者系譜ツリー（agent/edit-agent.php の
）。色のみLuna化（罫線/下線=--gold-1） */ .luna-app.feda-page .tree{width:100%; overflow-x:auto; margin:8px 0 4px} .luna-app.feda-page .tree ul{padding-left:0; list-style:none} .luna-app.feda-page .tree li{white-space:nowrap; color:var(--ink)} .luna-app.feda-page .tree a{color:var(--gold-1); border-bottom:1px dashed var(--gold-1); text-decoration:none} .luna-app.feda-page .tree a:hover{border-bottom:1px solid var(--gold-1)} .luna-app.feda-page .tree ul li ul{margin:.5em 0 .75em 41px} .luna-app.feda-page .tree ul li ul li{position:relative; margin-bottom:.25em} .luna-app.feda-page .tree ul li ul li::before{position:absolute; top:-0.5em; left:-16px; width:10px; height:calc(100% + .75em); border-left:1px solid var(--gold-1); content:""} .luna-app.feda-page .tree ul li ul li:last-child::before{height:calc(1em + .25em)} .luna-app.feda-page .tree ul li ul li::after{position:absolute; top:.75em; left:-16px; width:10px; border-bottom:1px solid var(--gold-1); content:""} /* 入会URLコピー欄（検索ボックスCSSとは別系統。入力欄＋コピーボタンを横並び） */ .luna-app.feda-page .copy_row{display:flex; gap:8px; align-items:stretch} .luna-app.feda-page .copy_input{flex:1 1 auto; min-width:0; margin:0} .luna-app.feda-page .copy_btn{flex:0 0 auto; min-width:100px; margin:0; padding:0 22px; background:var(--btn2); color:#fff} /* entry_btn は背景未指定のため副次ボタン色(--btn2 白文字5.35:1)を明示＝薄地に白文字のコントラスト破綻を防ぐ */ .luna-app.feda-page .copy_btn:hover{filter:brightness(.92); color:#fff} /* 白文字は暗くしてコントラスト維持 */ /* 入会URL発行 2ステップUI（①紹介者を大きく表示 ②プラン指定） */ .luna-app.feda-page .invite_step{margin:0 0 18px} .luna-app.feda-page .invite_step_head{margin:0 0 8px; font-weight:700; color:var(--ink)} .luna-app.feda-page .invite_step_no{display:inline-block; margin-right:8px; padding:2px 10px; border-radius:4px; background:var(--m-navy); color:#fff; font-size:12px; letter-spacing:.06em} .luna-app.feda-page .invite_referrer{display:flex; align-items:baseline; gap:14px; padding:14px 18px; border:1px solid var(--gold-1); border-radius:8px; background:rgba(199,161,83,.08)} .luna-app.feda-page .invite_referrer_name{font-size:18px; font-weight:700; color:var(--ink)} .luna-app.feda-page .invite_referrer_id{font-size:13px; color:var(--ink-soft)} .luna-app.feda-page .invite_referrer_badge{display:inline-block; padding:3px 10px; border-radius:4px; background:var(--gold-1); color:#fff; font-size:12px; font-weight:700; letter-spacing:.04em; align-self:center} .luna-app.feda-page .invite_referrer_clear{margin-left:auto; align-self:center; color:var(--gold-1); font-size:13px; text-decoration:underline} .luna-app.feda-page .invite_referrer_ope{border-color:var(--m-line); background:rgba(0,0,0,.03)} .luna-app.feda-page .invite_referrer_ope .invite_referrer_badge{background:var(--ink-soft)} .luna-app.feda-page .btn.entry_btn{display:inline-block; width:auto} /* min-width:260px を撤去（.entry_btn と同一の罠）。 min-width は max-width より常に優先されるため、max-width:100% があっても260pxより縮まず、 狭幅で画面外へ出て押せなくなる（実測：300px幅で幅260px・右端310px）。 ★前回 .entry_btn だけを直して、同じファイル内の兄弟である .btn を掃き出していなかった。 本家(FEDA/LEAPS)のボタンは min-width を一切持たない。 */ .luna-app.feda-page .btn{display:inline-block; width:auto; min-width:0; max-width:100%; margin:8px; padding:16px 18px; border:none; border-radius:8px; background:var(--gold-grad); color:#000; text-shadow:0 0 4px #fff,0 1px 2px #fff; font-size:15px; font-weight:700; letter-spacing:.06em; text-align:center; text-decoration:none; cursor:pointer; transition:filter .2s; box-sizing:border-box} .luna-app.feda-page .btn.btn-navy{background:#222A44; color:#fff; text-shadow:none; box-shadow:0 2px 6px rgba(0,0,0,.18); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition:text-shadow .2s ease} .luna-app.feda-page .btn.btn-navy:hover{background:#222A44; color:#fff; text-shadow:0 0 4px #fff,0 1px 3px #fff; box-shadow:0 2px 6px rgba(0,0,0,.18); filter:none} .luna-app.feda-page .btn:hover{text-shadow:0 0 5px #fff,0 0 9px #fff,0 1px 2px #fff} .luna-app.feda-page .btn_cancel{background:var(--btn2)} .luna-app.feda-page .btn_cancel:hover{filter:brightness(.92)} /* 灰＋白文字は暗くしてコントラスト維持 */ .luna-app.feda-page .list{width:100%; border-collapse:collapse; color:#333; font-size:14px} .luna-app.feda-page .list tr th,.luna-app.feda-page .list tr td{padding:14px 8px; border-bottom:solid 1px var(--m-line); text-align:left; vertical-align:middle} .luna-app.feda-page .list tr:last-child th,.luna-app.feda-page .list tr:last-child td{border-bottom:none} /* 出金一覧/口座フォーム用（FEDA .list_btn/.form_type/.radio を色変え踏襲） */ /* ===== レスポンシブ表（FEDA add.css 踏襲・色のみLuna化）：横スクロール禁止 ===== */ /* 右切れ防止：FEDA同型の auto レイアウト。.list_td_btn{width:1%} が内容幅に縮み、1列目が残り幅を取り word-break で折返す＝ボタンは常に収まる。 （旧 table-layout:fixed は width:1% を「1%固定」にしてボタンを見切れさせるため廃止） */ .luna-app.feda-page .list{table-layout:auto} .luna-app.feda-page .auto{table-layout:auto} /* 内容幅にしたい広い表だけ（コンテナ内に収まる前提で list_* と併用） */ .luna-app.feda-page .list th,.luna-app.feda-page .list td{word-break:break-word; overflow-wrap:anywhere} /* FEDA踏襲：リスト行ホバー＋行クリックで既定処理。tr[href] を付けた行が対象（内側のa/button/inputクリックは除外＝JS側） */ .luna-app .list tr[href]{cursor:pointer;transition:background .15s} .luna-app .list tr[href]:hover{background:rgba(199,161,83,.10)} .luna-app.feda-page .list_wrap{} /* 旧 overflow-x:auto は廃止（横スクロールさせない） */ .luna-app.feda-page .list_sp{display:none} /* PC非表示。狭幅でセルの見出しラベルとして表示 */ /* 縦積み（ラベル付きカード化）：list_* ごとに“積み替わる幅”が違う＝見やすさ基準で使い分け。320px まで想定 */ /* 出金指示画面(point/req-point.php)は list_flex2（≤660px）を使う。 list_flex は list_column（orientation条件なし）とは別のメディアクエリで、 orientation:portrait 付きの条件を使う（本家 style.css:1679 と同一の条件）。 */ @media only screen and (max-device-width:640px) and (orientation:portrait), only screen and (max-device-width:812px) and (orientation:portrait), only screen and (max-width:480px) and (orientation:portrait){ .luna-app.feda-page .list_flex,.luna-app.feda-page .list_flex tbody,.luna-app.feda-page .list_flex tr,.luna-app.feda-page .list_flex th,.luna-app.feda-page .list_flex td{display:block; width:auto} .luna-app.feda-page .list_flex tr{padding:12px 0; border-bottom:solid 1px var(--m-line)} .luna-app.feda-page .list_flex tr:last-child{border-bottom:none} .luna-app.feda-page .list_flex th,.luna-app.feda-page .list_flex td{padding:8px; border:none; text-align:left; white-space:normal} .luna-app.feda-page .list_flex th{background-color:#f2f2f4} .luna-app.feda-page .list_flex .list_pc{display:none !important} .luna-app.feda-page .list_flex .list_sp{display:block} .luna-app.feda-page .list_flex .list_cell_pc{display:none} .luna-app.feda-page .list_flex .list_td_btn{text-align:left; width:auto; white-space:normal} } /* list_column … 狭幅(≤480/device640・812)で積み替え。横を比較的粘る＝少〜中カラムの一覧向け */ @media only screen and (max-device-width:640px), only screen and (max-device-width:812px), only screen and (max-width:480px){ /* 本家(FEDA/LEAPS style.css)は【この同じメディアクエリ】に .entry_btn の スマホ用ブロックを持っているが、Lunaはクエリだけ移植して .entry_btn の行が欠落していた。 そのため狭幅でもボタンが横並びのまま残り、はみ出しの原因になっていた。本家と同一の指定を移植する。 */ .luna-app.feda-page .entry_btn{display:block; width:100%; min-width:0; margin:10px 0; padding:15px 0; font-size:14px; text-align:center} .luna-app.feda-page .list_column,.luna-app.feda-page .list_column tbody,.luna-app.feda-page .list_column tr,.luna-app.feda-page .list_column th,.luna-app.feda-page .list_column td{display:block; width:auto} .luna-app.feda-page .list_column tr{padding:12px 0; border-bottom:solid 1px var(--m-line)} .luna-app.feda-page .list_column tr:last-child{border-bottom:none} .luna-app.feda-page .list_column th,.luna-app.feda-page .list_column td{padding:8px; border:none; text-align:left; white-space:normal} .luna-app.feda-page .list_column th{background-color:#f2f2f4} .luna-app.feda-page .list_column .list_pc{display:none !important} .luna-app.feda-page .list_column .list_sp{display:block} .luna-app.feda-page .list_column .list_cell_pc{display:none} .luna-app.feda-page .list_column .list_td_btn{text-align:left; width:auto; white-space:normal} } /* list_flex2 … やや早め(≤660、PCを狭めても効く)で積み替え＝中カラム向け */ @media screen and (max-width:660px){ .luna-app.feda-page .list_flex2,.luna-app.feda-page .list_flex2 tbody,.luna-app.feda-page .list_flex2 tr,.luna-app.feda-page .list_flex2 th,.luna-app.feda-page .list_flex2 td{display:block; width:auto} .luna-app.feda-page .list_flex2 tr{padding:12px 0; border-bottom:solid 1px var(--m-line)} .luna-app.feda-page .list_flex2 tr:last-child{border-bottom:none} .luna-app.feda-page .list_flex2 th,.luna-app.feda-page .list_flex2 td{padding:8px; border:none; text-align:left; white-space:normal} .luna-app.feda-page .list_flex2 th{background-color:#f2f2f4} .luna-app.feda-page .list_flex2 .list_pc{display:none !important} .luna-app.feda-page .list_flex2 .list_sp{display:block} .luna-app.feda-page .list_flex2 .list_cell_pc{display:none} .luna-app.feda-page .list_flex2 .list_td_btn{text-align:left; width:auto; white-space:normal} } /* list_wide … 早め(≤1000)で積み替え＝多カラム・操作列の多い管理表向け（横で粘ると潰れるため早くカード化） */ @media screen and (max-width:1000px){ .luna-app.feda-page .list_wide,.luna-app.feda-page .list_wide tbody,.luna-app.feda-page .list_wide tr,.luna-app.feda-page .list_wide th,.luna-app.feda-page .list_wide td{display:block; width:auto} .luna-app.feda-page .list_wide tr{padding:12px 0; border-bottom:solid 1px var(--m-line)} .luna-app.feda-page .list_wide tr:last-child{border-bottom:none} .luna-app.feda-page .list_wide th,.luna-app.feda-page .list_wide td{padding:8px; border:none; text-align:left; white-space:normal} .luna-app.feda-page .list_wide th{background-color:#f2f2f4} .luna-app.feda-page .list_wide .list_pc{display:none !important} .luna-app.feda-page .list_wide .list_sp{display:block} .luna-app.feda-page .list_wide .list_cell_pc{display:none} .luna-app.feda-page .list_wide .list_td_btn{text-align:left; width:auto; white-space:normal} } /* list_cell_pc：list auto（縦積みしない表）でも狭幅で重要でない列を隠して横並びを保つ（LEAPS踏襲） */ @media screen and (max-width:600px){ .luna-app.feda-page .list_cell_pc{display:none} } .luna-app.feda-page .list_td_btn{text-align:right;white-space:nowrap;width:1%} /* ボタン列は内容幅で右寄せ（FEDA踏襲） */ /* 狭い画面・文字拡大時は、長いボタン名（「銀行振込の入金待ちにする」等）が折り返さずに表を枠外へ押し出す。折り返して枠内に収める */ @media screen and (max-width:600px){ .luna-app.feda-page .list_td_btn{white-space:normal} .luna-app.feda-page .list_td_btn .list_btn{white-space:normal; max-width:100%} } /* ===== 検索フォーム（FEDA .form_wrap/.form_send_input/.form_send_btn 踏襲・色変え。虫眼鏡は左に配置） ===== */ .luna-app.feda-page .form_wrap{display:flex; width:100%} .luna-app.feda-page .form_send_input{width:80%; flex:0 0 auto; min-width:0; padding:14px 16px 14px 46px; border:1px solid var(--m-line); border-right:none; border-radius:8px 0 0 8px; background:#f4f2f6 url(../img/icon_search.png) 15px center/19px no-repeat; font-size:16px; color:var(--ink); -webkit-appearance:none; appearance:none} .luna-app.feda-page .form_send_input::placeholder{color:#9a93a0} .luna-app.feda-page .form_send_input:focus{outline:none; background-color:#fff; background-image:url(../img/icon_search.png); background-position:15px center; background-size:19px; background-repeat:no-repeat; box-shadow:inset 0 0 0 2px var(--gold-1)} .luna-app.feda-page .form_send_btn{width:20%; flex:0 0 auto; padding:14px 10px; border:none; border-radius:0 8px 8px 0; background:var(--m-navy); color:#fff; font-size:15px; font-weight:700; letter-spacing:.08em; text-align:center; cursor:pointer; transition:filter .2s} .luna-app.feda-page .form_send_btn:hover{filter:brightness(1.25); color:#fff} @media(max-width:480px){.luna-app.feda-page .form_send_input{padding-left:42px; font-size:16px} .luna-app.feda-page .form_send_btn{padding:14px 8px}} /* 狭い画面・文字拡大時は入力欄が細くなり案内文が切れるため、入力欄と検索ボタンを縦に並べて入力欄を全幅にする。 * 長いボタン名・URL欄も枠内で折り返す */ @media screen and (max-width:600px){ .luna-app.feda-page .form_wrap{flex-wrap:wrap} .luna-app.feda-page .form_send_input{width:100%; border-right:1px solid var(--m-line); border-radius:8px 8px 0 0} .luna-app.feda-page .form_send_btn{width:100%; border-radius:0 0 8px 8px} .luna-app.feda-page .list_btn{white-space:normal; max-width:100%; box-sizing:border-box} /* 入力表（見出し＋入力欄の2列）は、見出しの下に入力欄を置く1列にして枠内に収める */ .luna-app.feda-page .entry, .luna-app.feda-page .entry tbody, .luna-app.feda-page .entry tr{display:block; width:100%} .luna-app.feda-page .entry tr th, .luna-app.feda-page .entry tr td{display:block; width:auto; box-sizing:border-box} .luna-app.feda-page .entry .form{max-width:100%; box-sizing:border-box} } .luna-app.feda-page .list_btn{display:inline-block;margin:5px 0 0 5px;padding:8px 24px;border-radius:6px;border:none;background:var(--m-navy);color:#fff;font-size:14px;font-weight:700;letter-spacing:.06em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:filter .2s} /* 主ボタン=ベタ塗りネイビー＋白＝AA約14:1。FEDA同様 margin-left:5px で隣接ボタン間に隙間 */ .luna-app.feda-page .list_btn:hover{filter:brightness(1.25);color:#fff} .luna-app.feda-page .list_btn_off{background:var(--btn2)} .luna-app.feda-page .list_btn_off:hover{filter:brightness(.9);color:#fff} /* ===== 入力フォームの寸法・浮動・ラジオ：FEDA add.css をそのまま踏襲（色のみLuna化） ===== */ /* 入力幅（これが無いと .form の width:100% で伸び、単位「円/銀行」が改行する） */ .luna-app.feda-page input.ltext{width:12em; text-align:right} .luna-app.feda-page input.utext{width:8em; text-align:right} .luna-app.feda-page input.utext2{width:7em; text-align:right} .luna-app.feda-page input.uzip{width:8em} .luna-app.feda-page input.udate{width:12em} .luna-app.feda-page .unit{white-space:nowrap} .luna-app.feda-page .fleft{float:left} .luna-app.feda-page .inline{display:inline} .luna-app.feda-page .rspc{margin-right:20px} /* ラジオ（支店/本店・普通/当座）：FEDA のカスタムラジオ。選択色のみ赤#d32222→ネイビー var(--m-navy) */ .luna-app.feda-page .form_type{margin:0 0 10px 0} .luna-app.feda-page .form_type:after{display:block; clear:both; content:""} /* 横並び(float)した検索対象ラジオの回り込み解除 */ .luna-app.feda-page .form_type_box{margin-right:20px; float:left; font-size:15px} .luna-app.feda-page .form_type_box input[type=radio]{display:none} .luna-app.feda-page .form_type_box .radio{display:inline-block; position:relative; padding:0 0 0 28px; vertical-align:middle; cursor:pointer; color:#333; font-size:14px} .luna-app.feda-page .form_type_box .radio:after{display:block; position:absolute; top:50%; left:0; width:16px; height:16px; margin-top:-10px; border:solid 1px #d2d2d2; border-radius:30px; background-color:#f2f2f4; content:''; transition:border-color .2s linear} .luna-app.feda-page .form_type_box .radio:before{display:block; z-index:1; position:absolute; top:50%; left:6px; width:6px; height:6px; margin-top:-4px; border-radius:50%; background-color:#fff; content:''; opacity:0; transition:opacity .2s linear} .luna-app.feda-page .form_type_box input[type=radio]:checked+.radio:before{opacity:1} .luna-app.feda-page .form_type_box input[type=radio]:checked+.radio:after{border-color:var(--m-navy); background-color:var(--m-navy)} .luna-app.feda-page .center{text-align:center} /* FEDAメッセージ（フォーム結果）：既存 .message 配色を流用しつつ下層でも使用可 */ .luna-app.feda-page .message{position:relative; display:block; margin:12px 0; padding:16px 20px; border-radius:5px; color:#fff; font-size:14px; font-weight:700; box-shadow:0 0 10px rgba(0,0,0,.3)} .luna-app.feda-page .message_success{background:linear-gradient(to left,#51a5e0,#39749B)} .luna-app.feda-page .message_normal{background:linear-gradient(to left,#4bc2a6,#2f8670)} .luna-app.feda-page .message_error{background:linear-gradient(to left,#f5a93e,#724f1d)} .luna-app.feda-page .message_fault{background:linear-gradient(to left,#db6356,#933E36)} /* 退会のお手続き（leave.php）の引き止め表示。定義が無いままクラス名だけが書かれていた。 金の縦線＋淡い面で「読ませたい注意書き」として立て、失効ポイントの数値を見落とさせない。 色は確定パレットのみ（文字=--ink / 線・強調=--gold-1）。 */ .luna-app.feda-page .leave_warn{margin:0 0 18px; padding:16px 18px; border-left:4px solid var(--gold-1); border-radius:6px; background:#FBF7EF; color:var(--ink)} .luna-app.feda-page .leave_warn p{margin:0 0 10px; font-size:15px; line-height:1.9} .luna-app.feda-page .leave_warn p:last-child{margin-bottom:0} .luna-app.feda-page .leave_warn_lead{font-weight:700; color:var(--gold-1)} .luna-app.feda-page .leave_warn_sub{font-size:14px; color:var(--ink-soft)} .luna-app.feda-page .leave_warn_keep{font-weight:700} .luna-app.feda-page .leave_lead{margin:0 0 14px; font-size:15px; line-height:1.9; color:var(--ink)} /* ===== 下層ページ：FEDA header/footer/nav（クラス名一致・色のみLuna化。FEDA style.css+add.css 踏襲） ===== */ /* ヘッダは上部固定（FEDA .header position:fixed）。代行中(imp)は代行バー分だけ下げる */ .luna-app .header{position:fixed; top:0; left:0; right:0; z-index:4; min-height:73px; display:flex; align-items:center; background:linear-gradient(180deg, #000 0%, #161C30 55%, var(--navy-1) 100%); box-shadow:0 2px 10px rgba(0,0,0,.2); padding-right:80px} /* TOPナビバー(.nav)と同一カラーリング（180deg 黒→紺） */ .luna-app.imp .header{top:var(--imp-bar-h)} body.luna-app:not(.menu-mode){display:flex; flex-direction:column; min-height:100vh} /* スティッキーフッター（FEDA .wrap 相当） */ .luna-app .main{flex:1 0 auto; padding-top:88px} /* 固定ヘッダ(73)分の余白＋余白を伸ばしてフッターを最下端へ */ .luna-app.imp .main{padding-top:calc(88px + var(--imp-bar-h))} /* ＋代行バー分 */ .luna-app.imp.menu-mode .msgbars{margin-top:var(--imp-bar-h)} /* 代行中のメニュー画面：最上部msgbar（○○さんの運営メニュー等）を固定代行バー分だけ下げる（上切れ防止 #25） */ .luna-app .header_wrap{flex:1; min-width:0; display:flex; align-items:center} .luna-app .header_wrap>a{display:flex; align-items:center; gap:12px; min-width:0; padding:0 16px; text-decoration:none} .luna-app .header_logo{margin:0; flex:0 0 auto; line-height:0} .luna-app .header_logo img{height:40px; width:auto; display:block; transition:filter .3s ease} .luna-app .header_wrap>a:hover .header_logo img,.luna-app .header_wrap>a:focus .header_logo img{filter:drop-shadow(0 0 10px rgba(235,212,154,.85)) drop-shadow(0 0 4px rgba(255,255,255,.45))} /* ログイン前ナビロゴ(.nav-brand)と同じ「ぼんやり光る」hover */ .luna-app .header .title{margin:0; min-width:0; display:flex; align-items:center; gap:12px; color:#fff; font-family:"Yu Gothic UI","游ゴシック体",YuGothic,"Yu Gothic","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS P Gothic",Helvetica,Arial,sans-serif; font-size:16px; font-weight:700; line-height:1.5} /* 全画面で必ず出るタイトルのためブランド書体を外しOS標準に統一 */ /* 従来は white-space:nowrap + overflow:hidden + text-overflow:ellipsis で切り捨てていた。 本家 LEAPS の仕組み（$m_title の を に置換し、 .wbr{white-space:normal} / .wbr span{display:inline-block} で折り返して全文見せる）を そのまま移植する（320pxまで正常表示が必須）。 */ /* 本家(LEAPS style.css)の .wbr は全体で使える汎用クラス。 Lunaはヘッダータイトル限定で定義していたため、テーブル内の日時など他の箇所で使えなかった。 本家同様、汎用として定義する（日付と時刻を span で分け、意味の区切りで折り返す）。 */ /* .wbr の定義は luna.css へ一本化した（本家と同じ接頭辞なしの汎用クラス）。 ここに .luna-app 限定で置いていたため、会員トップ(class="lp dash-mode")では使えなかった。 ヘッダータイトル用の個別指定も汎用定義で足りるため撤去。幅の指定と同じく【定義は1箇所】に保つ。 */ @media screen and (max-width:480px){ .luna-app .header .title{font-size:13px; gap:8px} } @media screen and (max-width:359px){ .luna-app .header .title{font-size:12px; gap:6px} } .luna-app .header .title .title_ico{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:43px; height:43px; border-radius:50%; background:transparent; border:2px solid #F3DA9C; box-sizing:border-box; font-size:24px; line-height:1} .luna-app .header .title .title_ico.cluster_rose{border-color:#F8C9DE} .luna-app .header .title .title_ico.cluster_plum{border-color:#D8C0E5} .luna-app .header .title .title_ico.cluster_gold{border-color:#F3DA9C} .luna-app .header .title .title_ico.cluster_navy{border-color:#B9C3E0} .luna-app .header .title .title_ico.cluster_mint{border-color:#BDE8D4} .luna-app .header_subnav{flex:0 0 auto; display:flex; align-items:center; padding:0 10px} /* 戻る：FEDA .return をピクセルまで踏襲（padding:5px 30px・border solid 3px・radius 5px・font 12px）。赤→金/プラム色変え。アイコンは絵文字。ホバーは色不変・枠(:before)が -7/-6/-7/-7 に展開（FEDA add.css 同値） */ .luna-app .return{position:relative; display:inline-block; padding:5px 30px; border:solid 2px var(--gold-1); border-radius:5px; background:#fff; color:var(--m-navy); font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap} .luna-app .return span{display:inline-block; padding-left:20px; background:url(../img/icon_return.png) left center/11px no-repeat} .luna-app .return:before{-webkit-transition-duration:.3s; transition-duration:.3s; -webkit-transition-property:top,right,bottom,left; transition-property:top,right,bottom,left; position:absolute; top:-3px; right:-3px; bottom:-3px; left:-3px; content:""} .luna-app .return:hover:before,.luna-app .return:focus:before,.luna-app .return:active:before{top:-7px; right:-6px; bottom:-7px; left:-7px; border:#C7A153 solid 3px; border-radius:0.7em} /* 拡大枠線のみ（グローなし）・枠色#C7A153 */ .luna-app .return:hover,.luna-app .return:focus{background:#fff; color:var(--m-navy)} /* メニューオープン：FEDA .nav 全画面オーバーレイ。上から「しゅるしゅる」スライドイン／格納（transform translateY） */ .luna-app .nav{z-index:5; position:fixed; inset:0; padding:84px 5% 40px; overflow-y:auto; background:rgba(13,17,30,.97); visibility:hidden; transform:translateY(-100%); transition:transform .38s cubic-bezier(.4,0,.2,1), visibility .38s} .luna-app.nav-open .nav{visibility:visible; transform:translateY(0)} .luna-app .nav>h2{margin:6px 0 14px; color:#fff; text-align:center; font-size:18px; font-weight:700} .luna-app .nav .bread_wrap, .luna-app .menu_wrap .bread_wrap{margin:0 0 16px} .luna-app .nav .bread{justify-content:flex-start} .luna-app .nav .bread li a, .luna-app .menu_wrap .bread li a{background:rgba(255,255,255,.85)} /* C: 暗いnav/メニュー上は#fff寄りにして濃色文字のAA確保 */ /* パンくず：main（明るい背景）は濃色に上書き（nav側は既定の白テキスト） */ .luna-app .title_wrap{margin:0} .luna-app .title_wrap .bread li span{color:var(--m-navy)} .luna-app .title_wrap .bread li a{color:#5C4318; border-color:var(--gold-1)} .luna-app .title_wrap .bread li a:hover{background:rgba(199,161,83,.18); color:#5C4318} .luna-app .title_wrap .bread li:last-child span{font-weight:700} @media(max-width:480px){ .luna-app .header_logo img{height:34px} .luna-app .header .title{font-size:14px} .luna-app .return{padding:4px 18px; font-size:12px} } /* 会員種別＋受講状態バッジ（一覧で名前前。FEDA getIcon 式の色枠1文字） */ .luna-badge{display:inline-block; font-size:12px; font-weight:700; line-height:1; padding:2px 5px; border-radius:5px; margin-right:4px; vertical-align:middle; border:1.5px solid} .luna-badge.bdg-luna{background:#FCE7EE; color:#9a3b5b; border-color:#F8C9DE} /* L=LunaLotus会員 */ .luna-badge.bdg-sponsor{background:#E8ECF7; color:#2b3a66; border-color:#B9C3E0} /* 協=協賛会員 */ .luna-badge.bdg-aff{background:#F0EAF7; color:#5A2E56; border-color:#D6C6E4} /* ア=アフィリエイト会員 */ /* 6つの有料プランでアイコンが全て変わるようにする。 既存の bdg-luna（薄ピンク系＝会員）と bdg-sponsor（薄青系＝協賛）を土台に、 同じ系統のまま濃淡・色相をずらしてプランごとに分ける（配色体系を壊さない）。 */ .luna-badge.bdg-luna1{background:#FCE7EE; color:#9a3b5b; border-color:#F8C9DE} /* 居=居場所プラン（既存Ｌと同色） */ .luna-badge.bdg-luna2{background:#FBDCE9; color:#8A2E52; border-color:#F3B6D0} /* 影=影響力プラン（一段濃い） */ .luna-badge.bdg-luna3{background:#F7CBDE; color:#78244A; border-color:#EC9CBF} /* ス=スター育成プラン（最も濃い） */ .luna-badge.bdg-sp1{background:#E8ECF7; color:#2b3a66; border-color:#B9C3E0} /* 出=協賛：出会い（既存協と同色） */ .luna-badge.bdg-sp2{background:#DCE3F3; color:#24325C; border-color:#A8B6D8} /* 体=協賛：体験（一段濃い） */ .luna-badge.bdg-sp3{background:#CBD6EC; color:#1D2A52; border-color:#93A5CC} /* 共=協賛：共創（最も濃い） */ .luna-badge.bdg-active{background:#FBF1D9; color:#5C4318; border-color:#F3DA9C} /* 受=バックエンド受講中 */ .luna-badge.bdg-done{background:#E4F5EC; color:#1e6b48; border-color:#BDE8D4} /* 修=バックエンド修了 */ .luna-badge.bdg-producer{background:#5C4318; color:#fff; border-color:#5C4318} /* Ｐ=Lunaプロデューサー（濃金地×白＝格を表す・AA約8:1） */ /* QR全画面オーバーレイ（inc/qr-lib.php）。QRを相手に見せる際、背後の謝礼率等の記載を隠すため不透明背景で全画面を覆う */ /* 本家 LEAPS(common/css/add.css:442) は .chart_wrap で高さを固定し、 Chart.js 側は maintainAspectRatio:false にして親の高さに従わせる（本家の値をそのまま使う）。 */ .luna-app.feda-page .chart_wrap{ position:relative; width:100%; height:350px; margin:0 auto; } @media screen and (max-width:660px){ .luna-app.feda-page .chart_wrap{ height:250px; } } /* 狭幅でタイトルが折り返したときヘッダーが内容に合わせて伸びるようにする。 従来 height:73px 固定だったため、3行に折り返したタイトルが「戻る」ボタンと重なっていた。 本家 LEAPS の .header は display:table で高さを固定しておらず、内容に応じて伸びる。 Luna は flex のため min-height に変更し、同じ挙動にする。 */ /* ★狭幅での幅配分。ハンバーガー(.header_spnav_wrap)は position:fixed で右上80pxを占めるため、 .header の padding-right はそれ未満にしてはならない（重なる）。 実測：padding-right を 64px にしたら「戻る」(〜252px)とハンバーガー(240px〜)が12px重なった。 狭幅ではハンバーガー自体を小さくし、その幅に padding-right を合わせる。 */ @media screen and (max-width:480px){ .luna-app .header_spnav_wrap{ width:60px } .luna-app .header{ padding-right:60px } .luna-app .header_wrap>a{ padding:0 10px } .luna-app .return{ padding:4px 12px } } @media screen and (max-width:359px){ .luna-app .header_spnav_wrap{ width:52px } .luna-app .header{ padding-right:52px } .luna-app .header_wrap>a{ padding:0 6px; gap:6px } .luna-app .header .title .title_ico{ width:34px; height:34px; font-size:19px } .luna-app .header .title .title_ico .emo-i{ width:20px; height:20px } .luna-app .return{ padding:3px 8px } /* ★font-size は指定しない（§1で12px未満は禁止。既定12pxのまま） */ } /* 狭幅のイベントフォームでは ud* のem固定幅がセルを押し広げないようにする。 */ @media screen and (max-width:480px){ .luna-app.feda-page #event_edit_form input.udate, .luna-app.feda-page #event_edit_form input.utext{width:100%; max-width:100%; box-sizing:border-box} }