/* ============================================================ 金蛇水神社 崇敬会DX — LIFFモック コンセプト（v3 トンマナ改修）: 白ベース × 黒文字 × 朱赤アクセント／ゴシック統一 ※旧「金蛇」墨黒×金×明朝版は versions/2026-07-13_v2-金蛇ダーク版 に凍結。 トークン名は互換維持のため据え置き、値のみ光テーマへ再定義。 --sumi=黒インク(文字), --washi=白カード, --kin*=中立/朱赤, --shu=朱赤#b12634。 ============================================================ */ :root{ --bg-img:url("../images/bg-gradient.6ce3f081a4f7.jpg"); --sumi: #1a1714; /* 黒インク（本文・見出しの文字色） */ --sumi-2: #f4f3f1; /* 明パネル（旧・暗面2の置換） */ --sumi-3: #ecebe9; --kinari: #ffffff; /* 端末内スクリーン・面の白 */ --kinari-2: #eeecea; /* 明グレー（トラック・タブ地・OFF地） */ --washi: #ffffff; /* カード地（白＋ヘアライン枠） */ --kin: #d3d5d8; /* 中立ライン／矢印（旧・金の構造用途） */ --kin-bright: #b12634; /* 明アクセント→朱赤 */ --kin-deep: #b12634; /* 見出し添え・価格・日付の朱赤アクセント */ --kin-grad: linear-gradient(135deg,#c8384a 0%,#b12634 100%); /* 主要CTA・ONの朱赤 */ --shu: #b12634; /* 朱赤（Figma準拠） */ --shu-bright: #c8384a; --ok: #3f8f4f; /* 有効・成功の緑 */ --danger: #b45309; /* 警告・エラー表示（赤・朱は避けた落ち着いた警告色） */ /* 260920 クライアント指示により本文の下限を引き上げ・副次テキストを濃色化（Figma差分）。 --muted は白地で約6.5:1（旧#6b7280は約4.8:1）。--muted を淡色地(cream/rank色等)に 重ねる箇所は個別に濃色(#6b5a20等)で対応済みのためトークン自体は据え置き影響なし。 */ --muted: #555f6d; /* 副次テキストの中立グレー（濃色化） */ --line: rgba(0,0,0,.12); --line-soft: rgba(0,0,0,.09); /* --- v6 Figma刷新トークン（kanahebisui_LINE 最新版 2026-08） --- */ --rk-ippan: #72b65c; /* 一般会員（旧・応援）＝緑 */ --rk-sushin: #204c97; /* 崇敬会員＝紺 */ --rk-regular: #b12634; /* 正会員＝朱赤 */ --rk-special: #6a549a; /* 特別会員＝紫 */ --rk-corp: #303030; /* 法人会員＝墨黒 */ --rank: var(--rk-regular); /* 現在ランク色（rk-クラスで切替） */ --ui-green: #8dc391; /* 選択・トグル・案内ピルの緑 */ --teal: #88c1ce; /* S4特典のアクションボタン淡青 */ --teal-bg: #f0f7f8; /* S4特典のセクション淡青磁地 */ --btn-gray: #6b7280; /* 汎用CTA（会員特典・確認ボタン）のグレー */ --bg-gray: #f5f5f5; /* 情報ボックス・画面地のグレー */ --ink: #141414; /* Figma黒 */ --mincho: "Zen Kaku Gothic New", sans-serif; /* 明朝廃止→ゴシック統一 */ --gothic: "Zen Kaku Gothic New", sans-serif; --r: 14px; } *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; } html{ scroll-behavior:smooth; } /* 261019 L: LIFF でページ先頭から下へ引っ張ると LINE 画面ごと閉じる動きを抑える。 慣性スクロール（iOS）を殺す overflow:hidden / touch-action:none の全体指定は入れない。 */ html,body{ overscroll-behavior-y:none; } body{ font-family:var(--gothic); background:#ececeb; /* 外側ギャラリー地：白い端末が映える明グレー */ color:var(--sumi); min-height:100vh; padding:48px 24px 96px; } /* リンク既定：下線なし（ボタン系リンクを含む）。本文中のテキストリンクのみ下線 */ a{ text-decoration:none; color:inherit; } .text-link{ text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:3px; color:var(--shu); } /* ---------- ランク切替バー ---------- */ .rankbar{ position:sticky; top:0; z-index:50; margin:-48px -24px 32px; padding:14px 24px; background:rgba(16,13,8,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .rankbar .rb-label{ font-family:var(--mincho); font-weight:700; font-size:14px; color:var(--kin-bright); letter-spacing:.06em; } .rankbar .rb-btns{ display:flex; gap:8px; flex-wrap:wrap; } .rankbar button{ font-family:var(--gothic); font-weight:700; font-size:14px; color:#b6ac95; letter-spacing:.04em; background:transparent; border:1px solid var(--line); border-radius:999px; padding:7px 15px; cursor:pointer; transition:.15s; } .rankbar button:hover{ color:var(--kin-bright); border-color:var(--kin); } .rankbar button.on{ background:var(--kin-grad); color:#2a200c; border-color:var(--kin); } .rankbar .rb-hint{ font-size:12.5px; color:#7e745f; margin-left:auto; } /* 会員証 ランク別意匠（Velvet Rope） */ .memcard.rk-none{ border-color:rgba(140,130,112,.5); filter:saturate(.6) brightness(.85); } .memcard.rk-support{ border-color:#8c8270; } .memcard.rk-sushin{ border-color:var(--kin-deep); } .memcard.rk-regular{ border-color:var(--kin); } /* 260921 T180(A-1): 鈴木様指摘によりドロップシャドウを全廃（border-colorで境界は維持） */ .memcard.rk-special{ border-color:var(--kin-bright); } .memcard.rk-nenkito{ border-color:var(--kin); } .memcard.rk-corp{ border-color:#c9b896; } /* ---------- ギャラリー外装 ---------- */ .gallery-head{ max-width:1320px; margin:0 auto 44px; } .brandline .mark{ font-family:var(--mincho); font-weight:800; font-size:30px; letter-spacing:.14em; color:var(--washi); } .brandline .mark b{ color:var(--kin-bright); font-weight:800; } .gallery-head .sub{ margin-top:14px; color:#b6ac95; font-size:14px; line-height:1.9; max-width:760px; letter-spacing:.02em; } .gallery-head .sub b{ color:var(--kin-bright); font-weight:700; } .legend{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; } .legend span{ font-size:12.5px; letter-spacing:.08em; padding:6px 13px; border-radius:999px; border:1px solid var(--line); color:#d8c9a3; background:rgba(197,164,92,.06); } .rule{ max-width:1320px; margin:34px auto 40px; height:1px; background:linear-gradient(90deg,transparent,var(--kin),transparent); opacity:.5; } /* ---------- リッチメニュー作図 ---------- */ .section-label{ max-width:1320px; margin:0 auto 22px; } .section-label .sl-no{ font-family:var(--mincho); font-weight:700; color:var(--kin-bright); font-size:14px; letter-spacing:.1em; } .section-label h2{ font-family:var(--mincho); font-weight:800; font-size:24px; color:var(--washi); letter-spacing:.08em; margin-top:6px; } .section-label p{ color:#b6ac95; font-size:14px; line-height:1.9; margin-top:8px; max-width:740px; } .richmenu-row{ max-width:1320px; margin:0 auto 48px; display:flex; gap:36px; flex-wrap:wrap; } .rm{ flex:1; min-width:430px; container-type:inline-size; } .rm-cap{ display:flex; align-items:center; gap:11px; margin-bottom:13px; } .rm-cap .tab{ font-family:var(--mincho); font-weight:700; font-size:15px; padding:5px 14px; border-radius:8px; letter-spacing:.06em; } .rm-cap .tab.a{ background:rgba(197,164,92,.12); color:var(--kin-bright); border:1px solid var(--line); } .rm-cap .tab.b{ background:var(--kin-grad); color:#2a200c; } .rm-cap small{ color:#9a9079; font-size:13px; } /* リッチメニュー：3列×2行（Figma準拠）。右列＝主役。左2列＝白セル */ .rm-img{ aspect-ratio:2500/1686; border-radius:14px; overflow:hidden; border:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr 1.28fr; grid-template-rows:1fr 1fr; gap:1.5px; /* 260921 T180(A-1): ドロップシャドウ全廃（既存border:1px solid var(--line)で境界維持） */ background:rgba(0,0,0,.12); font-family:var(--gothic); } .rm-cell{ display:flex; align-items:center; justify-content:center; padding:8px; text-align:center; background:#fff; color:#141414; font-size:13px; font-weight:700; line-height:1.4; cursor:pointer; } /* 主役セルは S0b「崇敬会に入会する」ボタン準拠：白地＋join-iconエンブレム＋黒太字 */ .rm-hero{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px 10px; text-align:center; color:#141414; cursor:pointer; overflow:hidden; background:#fff; } .rm-hero b{ font-weight:800; font-size:15px; letter-spacing:.02em; line-height:1.3; color:#141414; } .rm-hero small{ font-size:10px; font-weight:600; color:var(--muted); line-height:1.45; } .rm-emblem{ width:58px; height:40px; object-fit:contain; } .rm-hero--tall .rm-emblem{ width:84px; height:58px; } .rm-hero--tall{ grid-column:3; grid-row:1 / span 2; } .rm-dark{ display:flex; align-items:center; justify-content:center; padding:8px; text-align:center; background:#b12634; color:#fff; font-size:13px; font-weight:700; line-height:1.4; cursor:pointer; } .rm-cell:hover,.rm-hero:hover,.rm-dark:hover{ filter:brightness(1.05); } /* ---------- 端末グリッド ---------- */ .grid{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(390px,1fr)); gap:56px 40px; justify-items:center; } .device-wrap{ width:390px; } .device-cap{ margin:0 4px 14px; } .device-cap .id{ font-family:var(--mincho); font-weight:700; font-size:14px; color:#fff; background:#1f1c17; letter-spacing:.08em; padding:2px 9px; border:1px solid #1f1c17; border-radius:6px; } .device-cap .name{ font-family:var(--mincho); font-weight:700; font-size:17px; color:var(--washi); margin-left:10px; letter-spacing:.06em; } .device-cap .note{ display:block; margin-top:8px; font-size:12.5px; color:#9a9079; line-height:1.7; letter-spacing:.02em; } /* ---------- LIFF 端末枠 390×844 ---------- */ /* 260921 T180(A-1): ドロップシャドウ全廃。境界役だった0 0 0 1pxリングはborderへ置換、 flashアニメのリング演出（0 0 0 Npx）のみ残し落ち影部分は外す */ .device{ width:390px; height:844px; position:relative; border-radius:30px; background:var(--kinari); overflow:hidden; border:1px solid rgba(197,164,92,.18); isolation:isolate; } .device.flash{ animation:devflash 1.2s ease; } @keyframes devflash{ 0%,100%{ box-shadow:0 0 0 1px rgba(197,164,92,.18); } 25%,55%{ box-shadow:0 0 0 4px var(--kin-bright); } } [data-goto]{ cursor:pointer; } /* 画面内ヘッダー: ‹ は親画面への実リンク、× は LIFF クライアント内でのみ liff.closeWindow() */ .line-header{ height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:#ffffff; border-bottom:1px solid rgba(0,0,0,.06); position:relative; z-index:5; } .lh-back, .lh-close, .lh-reload{ font-size:20px; color:#3a352c; width:30px; text-decoration:none; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; text-align:left; } /* 261022 再読み込み(↻)を×の左に足す。タイトルが中央からずれないよう左右を同じ幅にする */ .lh-back{ width:64px; } /* 261030 ‹ の右にマイページ（家）を足す。左右の幅は 64px のまま（タイトルの位置を変えない） */ .lh-left{ display:flex; align-items:center; width:64px; } .lh-left .lh-back{ width:30px; } .lh-home{ display:flex; align-items:center; justify-content:center; width:34px; height:40px; color:#3a352c; text-decoration:none; } .lh-actions{ display:flex; align-items:center; justify-content:flex-end; width:64px; } .lh-reload, .lh-close{ width:32px; height:40px; text-align:center; } /* 260929 Figma文字設定の照合(§4-1): Figma実在ウェイトMedium(500)へ（旧600はGoogle Fonts未読込） */ .lh-title{ font-family:var(--mincho); font-size:14px; font-weight:500; color:#3a352c; letter-spacing:.08em; } .screen{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; background:var(--kinari); } .screen::-webkit-scrollbar{ width:0; } .screen.on-dark{ background:var(--sumi); } .pad{ padding:20px 20px 40px; } .safe-bottom{ height:34px; } /* ---------- 共通: ボタンの矢印（.ar/.arr）Figma準拠の細い矢印 ---------- テンプレート側は従来どおり「→」「›」等のテキストを持つが、ここで見た目を 文字グリフから細い罫線の矢印（山形）に統一する。各画面の position:absolute や right オフセットの個別指定はそのまま活かせるよう、形状のみをここで定義する。 （9/14 Figma差分A#5: ボタン矢印の共通化） */ .ar, .arr{ position:relative; display:inline-block; font-size:0; line-height:0; } .ar::before, .arr::before{ content:""; position:absolute; top:50%; left:50%; width:7px; height:7px; margin:-4px 0 0 -5px; border-style:solid; border-color:currentColor; border-width:1.6px 1.6px 0 0; transform:rotate(45deg); } /* ボタン内の矢印（.ar）と入会ボタンは Figma の軸付き矢印（→）。一覧行の .arr は山形（›）のまま */ .ar::before, .fs0-cta .arr::before{ width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border:0; transform:none; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.3537 15.603'%3E%3Cpath d='M6.60376 0.954052L12.771 7.12126H0V8.47059H12.771L6.59265 14.6489L7.5467 15.603L15.3537 7.79593L7.55781 0L6.60376 0.954052Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.3537 15.603'%3E%3Cpath d='M6.60376 0.954052L12.771 7.12126H0V8.47059H12.771L6.59265 14.6489L7.5467 15.603L15.3537 7.79593L7.55781 0L6.60376 0.954052Z'/%3E%3C/svg%3E") center/contain no-repeat; } .washi-tex{ position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0; background-image: radial-gradient(circle at 20% 30%, rgba(154,124,58,.05) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(40,33,22,.04) 0 1px, transparent 1px); background-size:7px 7px, 11px 11px; } /* ===== 共通 ===== */ /* 260929 Figma実測は12pxだがtest_readability_0920の下限12.5pxを維持するため 12.5pxに据え置く（瀬野尾さん決定Q1）。太さはMedium(500)へ。letter-spacingは 画面ごとに異なるため既定値はそのまま残し、判明している画面（S10/S11/夏催事/反映待ち） だけ個別に上書きする（後方の各screen定義参照）。 */ .kicker{ font-family:var(--mincho); font-weight:500; font-size:12.5px; color:var(--kin-deep); letter-spacing:.28em; margin-bottom:8px; display:flex; align-items:center; gap:9px; } .kicker::before{ content:""; width:22px; height:1px; background:var(--kin); display:inline-block; } /* 260929 Figma文字設定の照合(§4-2): letter-spacingをFigma実測値(0.4px≒0.02em)へ */ h2.sec{ font-family:var(--mincho); font-weight:700; font-size:20px; color:var(--sumi); letter-spacing:.02em; margin-bottom:14px; position:relative; z-index:1; } /* 260921 T180(A-1): ドロップシャドウ全廃（既存borderで境界維持） */ .card{ background:var(--washi); border-radius:var(--r); padding:16px; border:1px solid var(--line-soft); position:relative; z-index:1; } .btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px; border:none; border-radius:11px; cursor:pointer; font-family:var(--gothic); font-weight:700; font-size:16px; letter-spacing:.06em; } /* 260921 T180(A-1): ドロップシャドウ全廃 */ .btn-gold{ background:var(--kin-grad); color:#2a200c; } .btn-sumi{ background:var(--sumi); color:var(--kin-bright); border:1px solid var(--kin); } .btn-ghost{ background:transparent; color:var(--sumi); border:1px solid var(--line-soft); font-weight:500; } .btn-disabled{ background:#ddd4c0; color:#a59c86; cursor:not-allowed; } .btn:active{ transform:translateY(1px); } /* 金額表示：ゴシック・立体・読みやすく */ .price{ font-family:var(--gothic); font-style:normal; font-weight:700; font-size:14.5px; color:var(--kin-deep); letter-spacing:.02em; white-space:nowrap; } .seal{ position:absolute; width:62px; height:62px; border:2.5px solid var(--shu); border-radius:9px; color:var(--shu); font-family:var(--mincho); font-weight:700; display:flex; align-items:center; justify-content:center; text-align:center; font-size:14px; line-height:1.15; letter-spacing:.04em; transform:rotate(-7deg); opacity:.9; writing-mode:vertical-rl; } .pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; letter-spacing:.06em; } .pill-gold{ background:rgba(197,164,92,.16); color:var(--kin-deep); border:1px solid var(--line); } .pill-shu{ background:rgba(154,43,30,.1); color:var(--shu); border:1px solid rgba(154,43,30,.25); } .pill-ok{ background:rgba(79,122,82,.12); color:var(--ok); border:1px solid rgba(79,122,82,.3); } .pill-mute{ background:rgba(40,33,22,.06); color:var(--muted); border:1px solid var(--line-soft); } /* 漢字アイコン（絵文字の代替） */ .kic{ width:42px; height:42px; border-radius:10px; flex:0 0 42px; display:flex; align-items:center; justify-content:center; font-family:var(--mincho); font-weight:700; font-size:21px; background:rgba(197,164,92,.13); color:var(--kin-deep); } .kic.gold{ background:var(--kin-grad); color:#2a200c; } /* ===== S0b 未会員LP ===== */ .hero0{ position:relative; height:300px; background:linear-gradient(160deg, #241c10 0%, #14110c 60%, #100d08 100%); color:var(--kinari); padding:30px 22px; overflow:hidden; } .hero0 .v{ position:relative; z-index:2; } .hero0 .crest{ font-family:var(--mincho); font-size:14px; letter-spacing:.4em; color:var(--kin-bright); } .hero0 h1{ font-family:var(--mincho); font-weight:800; font-size:33px; line-height:1.3; margin-top:16px; color:#fbf6ea; letter-spacing:.08em; } .hero0 h1 b{ color:var(--kin-bright); } .hero0 p{ margin-top:14px; font-size:14px; line-height:2; color:#e7dcc4; max-width:280px; } .menu-list{ display:flex; flex-direction:column; gap:11px; } .menu-item{ display:flex; align-items:center; gap:14px; padding:15px 16px; background:var(--washi); border-radius:12px; border:1px solid var(--line-soft); position:relative; z-index:1; } .menu-item .tx b{ display:block; font-family:var(--mincho); font-weight:700; font-size:15.5px; color:var(--sumi); letter-spacing:.04em; } .menu-item .tx small{ color:var(--muted); font-size:12.5px; } .menu-item .arr{ margin-left:auto; color:var(--kin); } .menu-item.feat{ background:var(--sumi); border-color:var(--kin); } .menu-item.feat .tx b{ color:var(--kin-bright); } .menu-item.feat .tx small{ color:#b3a787; } /* ===== S2 会員証 ===== */ .screen.on-dark .pad{ color:var(--kinari); } .memcard{ position:relative; width:100%; aspect-ratio:1.586/1; border-radius:18px; padding:22px; overflow:hidden; color:#f3ead2; background:linear-gradient(150deg,#241c10 0%,#100d08 55%,#211a0f 100%); border:1.5px solid var(--kin); /* 260921 T180(A-1): ドロップシャドウ全廃（既存borderで境界維持） */ } .memcard .scale-tex{ position:absolute; inset:0; opacity:.16; pointer-events:none; background-image:radial-gradient(circle at 50% 0, var(--kin) 0 2px, transparent 2px); background-size:18px 16px; mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);} .memcard .rank-jp{ font-family:var(--mincho); font-weight:800; font-size:27px; color:var(--washi); letter-spacing:.14em; } .memcard .shrine{ position:absolute; top:20px; right:22px; text-align:right; font-family:var(--mincho); font-size:12.5px; letter-spacing:.24em; color:var(--kin); } .memcard .holder{ position:absolute; left:22px; bottom:22px; } .memcard .holder small{ font-size:10px; color:#b3a787; letter-spacing:.18em; } .memcard .holder b{ display:block; font-family:var(--mincho); font-weight:700; font-size:20px; color:var(--washi); letter-spacing:.08em; margin-top:2px; } .memcard .holder .no{ font-family:var(--mincho); font-size:14px; color:var(--kin); letter-spacing:.1em; } .memcard .qr{ position:absolute; right:20px; bottom:20px; width:78px; height:78px; border-radius:10px; background:#f3ead2; padding:7px; } .memcard .qr svg{ width:100%; height:100%; } .gold-foil{ position:absolute; right:-26px; top:-26px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(224,200,132,.5),transparent 65%); filter:blur(2px); } .valid-row{ display:flex; gap:10px; margin-top:16px; } .valid-box{ flex:1; background:var(--sumi-2); border:1px solid var(--line); border-radius:11px; padding:12px 14px; } .valid-box small{ font-size:10.5px; color:#a89c80; letter-spacing:.08em; display:block; } .valid-box b{ font-family:var(--mincho); font-size:16px; color:var(--kin-bright); letter-spacing:.04em; } .cache-note{ margin-top:14px; font-size:12.5px; color:#9a9079; line-height:1.7; background:rgba(197,164,92,.06); border:1px solid var(--line); border-radius:10px; padding:11px 13px; } /* ===== S3 マイページ ===== */ .mp-card-mini{ position:relative; border-radius:16px; padding:18px 20px; color:#f3ead2; background:linear-gradient(135deg,#241c10,#15110a); border:1px solid var(--kin); /* 260921 T180(A-1): ドロップシャドウ全廃（既存borderで境界維持） */ overflow:hidden; } .mp-card-mini .rank-jp{ font-family:var(--mincho); font-weight:800; font-size:21px; color:var(--washi); letter-spacing:.1em; } .mp-card-mini .nm{ font-size:13px; color:#c6b89a; margin-top:3px; letter-spacing:.06em; } .mp-card-mini .go{ position:absolute; right:16px; bottom:14px; font-size:13px; color:var(--kin-bright); font-weight:700; } .mp-card-mini .mini-qr{ position:absolute; right:18px; top:16px; width:42px; height:42px; background:#f3ead2; border-radius:7px; padding:4px;} .mp-card-mini .mini-qr svg{ width:100%;height:100%; } .progress-wrap .lab{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; } .progress-wrap .lab b{ font-family:var(--mincho); font-size:14.5px; color:var(--sumi); letter-spacing:.04em; } .progress-wrap .lab span{ font-size:12.5px; color:var(--muted); } .bar{ height:11px; border-radius:99px; background:var(--kinari-2); overflow:hidden; border:1px solid var(--line-soft); } /* 260921 T180(A-1): ドロップシャドウ（グロー）全廃 */ .bar i{ display:block; height:100%; width:62%; border-radius:99px; background:var(--kin-grad); } .progress-wrap .hint{ margin-top:10px; font-size:13px; color:var(--shu); font-weight:700; letter-spacing:.03em; } .func-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; } .func{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; padding:15px 14px; position:relative; } .func .fic{ width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:var(--mincho); font-weight:700; font-size:19px; background:rgba(197,164,92,.13); color:var(--kin-deep); } .func b{ display:block; font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); margin-top:2px; letter-spacing:.04em; } .func small{ font-size:10.5px; color:var(--muted); } .func .lock{ position:absolute; top:11px; right:12px; font-size:13px; color:#bdb39c; } .func.hot{ background:var(--sumi); border-color:var(--kin); } .func.hot .fic{ background:var(--kin-grad); color:#2a200c; } .func.hot b{ color:var(--kin-bright); } .func.hot small{ color:#b3a787; } .func.off .fic{ opacity:.45; } .func.off b{ color:#a59c86; } /* ===== S1 入会フォーム ===== */ .steps{ display:flex; align-items:center; gap:6px; margin-bottom:20px; } .step{ flex:1; text-align:center; } .step .dot{ width:28px; height:28px; border-radius:50%; margin:0 auto 7px; display:flex; align-items:center; justify-content:center; font-family:var(--mincho); font-size:14px; background:var(--kinari-2); color:var(--muted); border:1px solid var(--line-soft); } .step.active .dot{ background:var(--kin-grad); color:#fff; border-color:var(--shu); font-weight:700; } .step.done .dot{ background:var(--sumi); color:var(--kin-bright); border-color:var(--kin); } .step small{ font-size:10.5px; color:var(--muted); letter-spacing:.02em; } .step.active small{ color:var(--sumi); font-weight:700; } /* 260924 T180(A-4): カード間gapをFigma実測値10pxへ（旧11px） */ .type-choices{ display:flex; flex-direction:column; gap:10px; } .type-opt{ display:flex; align-items:flex-start; gap:13px; padding:15px; border-radius:13px; border:1.5px solid var(--line-soft); background:var(--washi); cursor:pointer; position:relative; } .type-opt.sel{ border-color:var(--kin); background:rgba(197,164,92,.07); box-shadow:0 0 0 3px rgba(197,164,92,.12); } /* 260924 正会員以上の受付を止めるスイッチ: 選択不可の種別を控えめに減光する */ .type-opt.disabled{ opacity:.5; cursor:default; pointer-events:none; } /* 260924 T180(A-4): ラジオ未選択枠をFigma実測値rgba(0,0,0,.18)へ（旧var(--line)=.12。 このカード内限定の値で、グローバルな--lineトークンは他箇所へ影響するため変更しない） */ .type-opt .radio{ width:20px; height:20px; border-radius:50%; border:2px solid rgba(0,0,0,.18); margin-top:2px; flex:0 0 20px; position:relative; } .type-opt.sel .radio{ border-color:var(--kin); } .type-opt.sel .radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--kin-grad); } .type-opt .ti b{ font-family:var(--mincho); font-weight:700; font-size:15.5px; color:var(--sumi); letter-spacing:.04em; } .type-opt .ti .price{ margin-left:9px; } /* 260924 T180(A-4): Figmaは説明文11.5px/#6b7280だが、9/20確定の可読性ポリシー （本文・注記の下限12.5px・--mutedの濃色化）と衝突するため、2-5ラベルの判断（見送り）に 揃えて現行の12.5px/var(--muted)を維持する。対象ピルの文字色（同じ#6b7280指定）も同様。 */ .type-opt .ti p{ font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.7; } /* 文節単位の改行制御: 包んだ範囲の途中では改行させない（収まらない場合は範囲ごと次行へ） */ .nb{ white-space:nowrap; display:inline-block; } .type-opt .flow-tag{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; } /* 「対象：ご来社が可能な方（仙台・県南エリア）」等の長文ピルが狭幅端末で 折り返さないよう、可変サイズ+字間圧縮+改行禁止 */ .type-opt .flow-tag .pill{ white-space:nowrap; letter-spacing:.03em; font-size:clamp(9.5px, 3vw, 11px); /* 260924 T180(A-4): 対象ピルの左右/上下paddingをFigma実測値9px/3pxへ（旧.pill共通の10px/4px。 .pillは他画面でも汎用利用のためグローバルは変更せず、このカード内限定で上書き） */ padding:3px 9px; } /* 260918 瀬野尾指摘: 種別変更（上位）の「説明会のご案内をいたします（住所のご登録が必要です）」が カード幅を超えてはみ出していた。枠内に収まらない長さのピルは折り返す */ .type-opt .flow-tag .pill{ white-space:normal; max-width:100%; line-height:1.5; } .field{ margin-bottom:14px; } /* 260929 Figma実測は12pxだがtest_readability_0920の下限12.5pxを維持するため 12.5pxに据え置く（瀬野尾さん決定Q1。letter-spacing .04emは既に一致）。 */ .field label{ font-size:12.5px; font-weight:700; color:var(--sumi); letter-spacing:.04em; display:flex; gap:6px; align-items:center; margin-bottom:7px; } /* 261020 必須／任意の表示を全画面で統一（基準=入会フォーム）。必須=緑のバッジ・任意=グレー。 どちらもラベル行の右端に寄せ、文字サイズ・行の高さを揃える（画面ごとの色の上書きは持たない）。 */ .field label .req, .field label .opt{ margin-left:auto; font-size:10px; line-height:1.4; flex:none; } .field label .req{ color:var(--ui-green); } .field label .opt{ font-weight:400; color:var(--muted); } .field input, .field select, .field textarea{ width:100%; height:46px; border-radius:10px; border:1px solid var(--line-soft); /* 16px 未満だと iOS Safari / LINE 内蔵ブラウザがフォーカス時に自動ズームし画面幅からはみ出るため 16px 固定 */ background:var(--washi); padding:0 13px; font-family:var(--gothic); font-size:16px; color:var(--sumi); } /* 261020 入力済みと見分けがつくよう、プレースホルダーは薄いグレーに全画面共通（祈祷の備考欄の個別指定は廃止）。 Firefoxは既定で不透明度を下げるため opacity:1 で色を固定。セレクトの「選択してください」（値が空）は select_placeholder.js が付ける .is-empty で同じ色にし、開いた一覧の文字は通常色に戻す。 */ /* 261026 打合せ: iOS Safari / LINE 内蔵ブラウザは type=date に固有の最小幅を持たせ、width:100% でも 画面からはみ出す（安産祈願の出産予定日）。標準の見た目を外して幅を親に合わせ、値は左寄せにする。 */ .field input[type="date"]{ -webkit-appearance:none; appearance:none; display:block; min-width:0; max-width:100%; box-sizing:border-box; text-align:left; line-height:46px; } .field input[type="date"]::-webkit-date-and-time-value{ text-align:left; } input::placeholder, textarea::placeholder{ color:#9ca3af; opacity:1; } .field select.is-empty{ color:#9ca3af; } .field select option{ color:var(--sumi); } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--kin); box-shadow:0 0 0 3px rgba(197,164,92,.13); } .field select{ appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%233a352c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; } /* 入力エラー表示（追加タスク: 送信後にどこがエラーか分かるようにする）。 .field .error / .field small[style*="--danger"] の直下に出るエラー文言。 .err-block は .field に収まらないラジオボタン群・単体チェックボックス用の 汎用ラッパー（form_errors.js 参照）で、同じ .error スタイルを適用する。 */ .field .error, .err-block .error{ color:var(--danger); font-size:12.5px; margin:5px 0 0; line-height:1.7; } .field:has(.error) input, .field:has(.error) select, .field:has(.error) textarea{ border-color:var(--danger); } /* フォーム先頭に差し込むエラーサマリー（form_errors.js が動的生成） */ .form-error-summary{ background:#fdf3e7; border:1px solid var(--danger); border-radius:10px; padding:12px 14px; margin-bottom:16px; } .form-error-summary-title{ font-size:14px; font-weight:700; color:var(--danger); margin:0 0 6px; } .form-error-summary-list{ margin:0; padding-left:18px; } .form-error-summary-list li{ font-size:13px; line-height:1.8; } .form-error-summary-list a{ color:var(--danger); text-decoration:underline; } /* Stripe Elements（お支払い画面 /front/payment//）: カード番号・有効期限・ セキュリティコードの3分割マウント枠。Stripe.js が iframe を差し込むため .field と同じ外枠の見た目を .card-split .se に持たせる。 */ .card-split{ margin-bottom:14px; } .card-split .cs-label{ font-size:13px; font-weight:700; color:var(--sumi); letter-spacing:.04em; display:block; margin-bottom:7px; } .card-split .se{ border:1px solid var(--line-soft); border-radius:10px; padding:13px 13px; background:var(--washi); } .card-split .se.StripeElement--focus{ border-color:var(--kin); box-shadow:0 0 0 3px rgba(197,164,92,.13); } .card-split .se.StripeElement--invalid{ border-color:var(--shu); } .card-split .cs-cols{ display:flex; gap:10px; margin-top:12px; } .card-split .cs-cols > div{ flex:1; } /* 260929 事務局プレビュー用: Stripe 入力欄の代わりの見本文字（stripe_card.js の CARD_STYLE に合わせる） */ .card-split .se.preview-card-sample{ font-size:15px; line-height:1.2; color:#9ca3af; } /* 261026 カード番号欄の右端に使えるカードのロゴ（env PAYMENT_CARD_BRANDS_NOTE・front/_card_brand_logos.html）。 iframe の外に重ね、入力した番号と重ならないよう .se の右側に余白を取る（ロゴ3つ＋右の余白ぶん）。 */ .card-number-wrap{ position:relative; } .card-brand-logos{ position:absolute; right:10px; top:50%;transform:translateY(-50%); display:flex; gap:4px; z-index:1; pointer-events:none; } .card-brand-logos img{ display:block; width:auto; height:20px; } .card-brand-logos ~ .se{ padding-right:122px; } @media (max-width:400px){ .card-brand-logos{ right:8px; gap:3px; } .card-brand-logos img{ height:16px; } .card-brand-logos ~ .se{ padding-right:98px; } } /* 320px 前後の端末は番号が読める幅を優先してロゴを出さない（入力中のブランドは Stripe の左アイコンで分かる） */ @media (max-width:340px){ .card-brand-logos{ display:none; } .card-brand-logos ~ .se{ padding-right:13px; } } .payment-countdown{ font-size:14px; color:var(--muted); margin:4px 0 16px; } /* 生年月日「年/月/日」3分割入力（260908 client指摘: type=dateはスマホで使いにくいため代替）。 1行に収まるよう年欄を広め・月日欄を狭めにする。フォントサイズ16pxはiOS自動ズーム防止のため .field input と同じ値を明示指定する。 */ /* 260920 バグ修正: 元号selectが.field select{width:100%}を継承して行全体を占有し、 年月日欄が画面外にはみ出ていた（375px幅で確認）。flex-wrapで折り返しを許可し、 元号selectには明示的な上限幅を持たせて.field selectのwidth:100%指定に勝つようにする。 */ .ymd-field{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; row-gap:8px; } /* min-width:0 必須: flex アイテムの既定 min-width:auto だと input の固有幅（size=20 相当）で縮まず 375px 幅で溢れる */ .ymd-field input{ width:auto; min-width:0; height:46px; text-align:center; font-size:16px; border-radius:10px; border:1px solid var(--line-soft); padding:0 4px; } /* 260920 client指摘: 「日」欄が2行目へ折り返していたため各欄を詰めて1行に収める。 和暦の年は2桁入力（maxlength=2）なので、西暦時代の 5.2em は不要。320px幅でも1行に収まる。 */ .ymd-field input[name$="_year"]{ flex:0 0 2.9em; width:2.9em; } .ymd-field input[name$="_month"], .ymd-field input[name$="_day"]{ flex:0 0 2.9em; width:2.9em; } .ymd-field .ymd-sep{ flex:0 0 auto; color:var(--muted); font-size:14px; white-space:nowrap; margin:0 -1px; } /* 260919 F-1: 生年月日入力を元号選択式に変更（birth_era select）。 input と同じ理由でfont-size:16pxを明示（iOS自動ズーム防止）。 260920: flex-basisをauto（=widthプロパティに追従）のままにすると.field selectの width:100%が効いて行全体まで広がってしまうため、幅を明示指定して上限を固定する。 矢印アイコンの余白も.field selectの36pxから詰めて、狭い元号欄でも文字が収まるようにする。 */ .ymd-field select[name$="_era"]{ flex:0 0 4.6em; width:4.6em; min-width:0; height:46px; font-size:16px; border-radius:10px; border:1px solid var(--line-soft); padding:0 18px 0 6px; background-position:right 5px center; } .agree{ display:flex; gap:11px; align-items:flex-start; background:var(--washi); border:1px solid var(--line-soft); border-radius:12px; padding:14px; margin:6px 0 18px; cursor:pointer; } /* 実チェックボックス化: デフォルト未チェック（空枠）。:checked 時のみ従来の金グラデ+✓を表示する。 */ .agree input.chk{ appearance:none; -webkit-appearance:none; width:22px; height:22px; border-radius:6px; border:2px solid var(--kin); flex:0 0 22px; margin:0; position:relative; cursor:pointer; background:var(--washi); /* 261014 .field 内に置くと .field input の padding:0 13px を受けて横長に崩れていた（実績の引き継ぎ） */ padding:0; min-width:22px; } .agree input.chk:checked{ background:var(--kin-grad); border-color:transparent; } .agree input.chk:checked::after{ content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#2a200c; font-size:14px; line-height:1; } .agree input.chk:focus-visible{ outline:2px solid var(--kin); outline-offset:2px; } .agree p{ font-size:13px; color:var(--sumi); line-height:1.7; } /* ===== S5 ご祈祷 ===== */ .pray-card{ background:var(--washi); border:1px solid var(--line-soft); border-radius:14px; padding:16px; margin-bottom:13px; position:relative; } .pray-card.locked-visible{ border-color:var(--kin); background:rgba(197,164,92,.06); } .pray-card .ph{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; } .pray-card .ph b{ font-family:var(--mincho); font-weight:700; font-size:17px; color:var(--sumi); letter-spacing:.05em; } .pray-card p{ font-size:13px; color:var(--muted); line-height:1.8; margin:9px 0 14px; } .pray-card .badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; } .pray-card.hidden-rank{ opacity:.55; } .stores-note{ font-size:12.5px; color:var(--muted); margin-top:18px; text-align:center; letter-spacing:.02em; } .stores-note span{ color:var(--kin-deep); font-weight:700; } /* ===== S11 相談 ===== */ .consult-state{ border-radius:14px; padding:18px; margin-bottom:16px; position:relative; overflow:hidden; } .consult-state.available{ background:var(--sumi); border:1px solid var(--kin); color:var(--kinari); } .consult-state.used{ background:var(--washi); border:1px solid var(--line-soft); color:var(--sumi); } /* 260918 修正: Figma(s11.png)の「今月のご利用状況」は黒系・太字のゴシック。 実装は明朝・中立グレー(--muted #6b7280)で、Figma より薄く見えていた。 ピンクは st-main の一行のみに使う方針（260917）は維持。 */ .consult-state .st-lab{ font-family:var(--gothic); font-weight:700; font-size:13px; letter-spacing:.08em; color:var(--sumi); } .consult-state.available .st-lab{ color:var(--sumi); } .consult-state.used .st-lab{ color:var(--sumi); } .consult-state .st-main{ font-family:var(--mincho); font-weight:700; font-size:19px; margin-top:6px; letter-spacing:.06em; } .consult-state.available .st-main{ color:var(--washi); } .consult-state .st-sub{ font-size:13px; margin-top:8px; line-height:1.8; } /* 260917 修正: #c6b89a は暗背景(--sumi)前提の淡色で、実際の明るい背景(#faf7f6)ではほぼ視認不可だった。 .used と同じ var(--muted) にして Figma のグレー本文色に合わせる。 */ .consult-state.available .st-sub{ color:var(--muted); } .consult-state.used .st-sub{ color:var(--muted); } .guard-list{ margin-top:18px; } /* 260929 Figma文字設定の照合(§4-4): letter-spacingをFigma実測値.1emへ（サイズは可読性下限12.5pxを維持） */ .guard-list .gtitle{ font-size:12.5px; color:var(--muted); letter-spacing:.1em; margin-bottom:10px; font-weight:700; } .guard{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--sumi); line-height:1.7; margin-bottom:10px; } .guard .gn{ width:20px; height:20px; border-radius:50%; flex:0 0 20px; background:rgba(197,164,92,.16); color:var(--kin-deep); font-family:var(--mincho); font-size:13px; display:flex; align-items:center; justify-content:center; font-weight:600; } .flow-note{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:8px; } /* 261028 瀬野尾さん: 会員種別の変更（確認）の注記は下の要素と詰まらないよう下に余白 */ .tc-note{ margin-bottom:16px; } /* ===== S4 会員特典 ===== */ .perk{ display:flex; gap:13px; align-items:flex-start; padding:14px 15px; background:var(--washi); border:1px solid var(--line-soft); border-radius:12px; margin-bottom:10px; position:relative; } .perk .pk-stat{ flex:0 0 auto; } .perk .pk-body b{ font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); letter-spacing:.04em; } .perk .pk-body p{ font-size:12.5px; color:var(--muted); line-height:1.7; margin-top:5px; } .perk.locked{ opacity:.6; } .perk.crown{ background:var(--sumi); border-color:var(--kin); } .perk.crown .pk-body b{ color:var(--kin-bright); } .perk.crown .pk-body p{ color:#b3a787; } .perk-prog{ margin-top:6px; } .perk-prog .bar{ height:8px; } .perk-prog .bar i{ width:78%; } /* ===== S10 厄年診断 ===== */ .diag-result{ border-radius:16px; padding:22px; text-align:center; color:#f3ead2; position:relative; overflow:hidden; background:linear-gradient(155deg,#241c10,#15110a); border:1px solid var(--kin); margin-bottom:16px; } .diag-result .dr-lab{ font-family:var(--mincho); font-size:13px; letter-spacing:.2em; color:var(--kin-bright); } .diag-result .dr-main{ font-family:var(--mincho); font-weight:700; font-size:34px; color:var(--washi); letter-spacing:.1em; margin:8px 0 4px; } /* 「厄年ではありません」など長文は 375px 幅で折り返さないよう縮小 */ .diag-result .dr-main--long{ font-size:clamp(16px, 4.6vw, 22px); letter-spacing:.02em; white-space:nowrap; } .diag-result .dr-sub{ font-size:13px; color:#c6b89a; line-height:1.8; } .diag-result .dr-age{ display:inline-block; margin-top:12px; font-size:13px; color:#2a200c; background:var(--kin-grad); padding:5px 14px; border-radius:999px; font-weight:700; } .kichinichi{ display:flex; flex-direction:column; gap:9px; margin:6px 0 16px; } .kichi{ display:flex; align-items:center; justify-content:space-between; padding:13px 15px; background:var(--washi); border:1px solid var(--line-soft); border-radius:11px; } .kichi .kd{ font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); letter-spacing:.04em; } .kichi .kd span{ font-size:12.5px; color:var(--muted); margin-left:9px; font-family:var(--gothic); font-weight:400; } .kichi .ktag{ font-size:12.5px; color:var(--shu); font-weight:700; } /* 本命星・吉方位/凶方位（追加タスク: 厄年・方位診断の修正 #30・C-10） */ .honmei-star{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 16px; padding:12px; background:var(--washi); border:1px solid var(--line-soft); border-radius:11px; } .honmei-star .hs-lab{ font-size:12.5px; color:var(--muted); letter-spacing:.1em; } .honmei-star .hs-val{ font-family:var(--mincho); font-weight:700; font-size:16px; color:var(--sumi); letter-spacing:.06em; } .hoi-block{ margin-bottom:16px; } .hoi-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 16px; } .hoi-chip{ display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.04em; } .hoi-chip span{ font-size:11px; font-weight:400; margin-left:3px; } .hoi-chip--kichi{ background:var(--washi); border:1px solid var(--kin); color:var(--sumi); } .hoi-chip--kyo{ background:var(--washi); border:1px solid var(--shu); color:var(--shu); } /* ===== S12 各種設定 ===== */ .set-group{ margin-bottom:20px; } .set-group .sg-title{ font-size:12.5px; color:var(--muted); letter-spacing:.1em; font-weight:700; margin:0 4px 9px; } .set-list{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; overflow:hidden; } .set-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px; border-bottom:1px solid var(--line-soft); } .set-row:last-child{ border-bottom:none; } .set-row .sr-tx b{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); letter-spacing:.03em; } .set-row .sr-tx small{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; } .set-row .sr-arr{ color:var(--kin); font-size:18px; } .switch{ width:46px; height:27px; border-radius:999px; background:var(--kin-grad); position:relative; flex:0 0 46px; } .switch{ cursor:pointer; } .switch.off{ background:var(--kinari-2); border:1px solid var(--line-soft); } /* 260921 T180(A-1): ドロップシャドウ全廃 */ .switch i{ position:absolute; top:3px; left:22px; width:21px; height:21px; border-radius:50%; background:#fff; transition:.2s; } .switch.off i{ left:3px; background:#cfc6b2; } /* 会員証 画面を明るく（背景が明色化するので文字色も濃色へ調整） */ .screen.on-dark.bright{ background:#f3ead2; } /* 260921 T180(A-1): ドロップシャドウ全廃（.memcard既存borderで境界維持のため装飾のみ削除） */ /* 会員証カード内（カードは暗色のまま）は元の淡色を維持。カード外の地の文を濃色化 */ .screen.on-dark.bright .kicker{ color:var(--kin-deep); } .screen.on-dark.bright .valid-box{ background:#fff7ea; border-color:var(--line); } .screen.on-dark.bright .valid-box small{ color:var(--muted); } .screen.on-dark.bright .valid-box b{ color:var(--sumi); } .screen.on-dark.bright .cache-note{ background:#fff7ea; border-color:var(--line); color:#6e6552; } .screen.on-dark.bright .btn-sumi{ background:var(--sumi); color:var(--kin-bright); } .screen.on-dark.bright .btn-ghost{ color:var(--kin-deep) !important; border-color:var(--line) !important; } .danger-zone{ border:1px solid rgba(154,43,30,.3); border-radius:13px; overflow:hidden; } .danger-zone .set-row b{ color:var(--shu); } .modal-hint{ margin-top:12px; font-size:12.5px; color:var(--muted); text-align:center; line-height:1.7; } /* ===== S13 個人/法人切替 ===== */ .seg{ display:flex; background:var(--kinari-2); border:1px solid var(--line-soft); border-radius:12px; padding:4px; margin-bottom:18px; } .seg button{ flex:1; min-height:42px; border:none; border-radius:9px; background:transparent; cursor:pointer; font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--muted); letter-spacing:.06em; } /* 260921 T180(A-1): ドロップシャドウ全廃 */ .seg button.on{ background:var(--sumi); color:var(--kin-bright); } /* 260924 お悩み相談のご希望フォーム: ラジオボタンを .seg と同じ見た目のボタン群にする （03_LIFFモック/_deploy/frames_consult_wish.py の検討案どおり）。 input はネイティブのまま非表示にし、直後の label を button 相当にする （:checked + label のみで動作・JS不要。flex:1 のため 390px でも横あふれしない）。 */ .seg input[type="radio"]{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; } .seg label{ flex:1; min-height:42px; border-radius:9px; display:flex; align-items:center; justify-content:center; text-align:center; cursor:pointer; font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--muted); letter-spacing:.06em; } .seg input[type="radio"]:checked + label{ background:var(--sumi); color:var(--kin-bright); } .seg input[type="radio"]:focus-visible + label{ outline:2px solid var(--kin); outline-offset:-2px; } .acct-card{ border-radius:16px; padding:20px; color:#f3ead2; position:relative; overflow:hidden; margin-bottom:16px; background:linear-gradient(135deg,#241c10,#15110a); border:1px solid var(--kin); } .acct-card .ac-role{ font-family:var(--mincho); font-size:13px; letter-spacing:.18em; color:var(--kin-bright); } .acct-card .ac-name{ font-family:var(--mincho); font-weight:800; font-size:23px; color:var(--washi); letter-spacing:.06em; margin:6px 0 3px; } .acct-card .ac-no{ font-size:13px; color:#c6b89a; letter-spacing:.06em; } .acct-card .ac-meta{ display:flex; gap:18px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); } .acct-card .ac-meta div small{ font-size:10px; color:#a89c80; letter-spacing:.08em; display:block; } .acct-card .ac-meta div b{ font-family:var(--mincho); font-size:14px; color:var(--kin-bright); } .acct-note{ font-size:12.5px; color:var(--muted); line-height:1.8; background:rgba(197,164,92,.06); border:1px solid var(--line); border-radius:11px; padding:13px 15px; } /* 260929 郵便番号の下の都道府県・市区町村の表示欄（プロフィール・入会フォーム）は、住所を引くまで 中身が空。空のあいだは枠と余白だけが出て崩れて見えるため隠す（JS が文字を入れると表示される） */ .acct-note:empty{ display:none; } .info-strip{ font-size:12.5px; color:var(--sumi); line-height:1.8; background:var(--washi); border:1px solid var(--line-soft); border-radius:11px; padding:13px 15px; margin:16px 0; } /* ===== S6 オンライン授与所（EC） ===== */ .ec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .ec-card{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; overflow:hidden; position:relative; } .ec-thumb{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:#e9e1cf; position:relative; } .ec-noimg{ display:flex; flex-direction:column; align-items:center; gap:7px; font-family:var(--gothic); font-size:12.5px; color:#a89c80; letter-spacing:.14em; } .ec-noimg::before{ content:""; width:42px; height:34px; border:1.5px solid #c2b69c; border-radius:4px; background:linear-gradient(135deg,transparent 45%,#c2b69c 45%,#c2b69c 55%,transparent 55%); } .ec-thumb .mem-badge{ position:absolute; top:9px; left:9px; } .ec-info{ padding:11px 12px 13px; } /* 260929 Figma文字設定の照合(§4-6, S6商品名): サイズ13.5px・letter-spacing .27pxへ */ .ec-info b{ display:block; font-family:var(--mincho); font-weight:700; font-size:13.5px; color:var(--sumi); letter-spacing:.27px; line-height:1.4; } .ec-info .price{ font-size:14px; margin-top:7px; display:block; } .ec-info .price s{ color:#bdb39c; font-size:12.5px; margin-left:6px; font-weight:400; } /* ===== S7 祭事カレンダー ===== */ .cal-month{ margin-bottom:18px; } .cal-mhead{ display:flex; align-items:baseline; gap:10px; margin-bottom:11px; } .cal-mhead b{ font-family:var(--mincho); font-weight:800; font-size:22px; color:var(--sumi); letter-spacing:.06em; } .cal-mhead span{ font-size:12.5px; color:var(--muted); letter-spacing:.1em; } .cal-mhead .ln{ flex:1; height:1px; background:var(--line-soft); } .cal-event{ display:flex; gap:14px; padding:13px 15px; background:var(--washi); border:1px solid var(--line-soft); border-radius:12px; margin-bottom:9px; position:relative; } .cal-event .ce-date{ text-align:center; flex:0 0 38px; } .cal-event .ce-date b{ font-family:var(--mincho); font-weight:700; font-size:19px; color:var(--kin-deep); display:block; line-height:1; } .cal-event .ce-date small{ font-size:10px; color:var(--muted); } .cal-event .ce-body b{ font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); letter-spacing:.03em; } .cal-event .ce-body p{ font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.7; } .cal-event.feat{ background:var(--sumi); border-color:var(--kin); } .cal-event.feat .ce-date b{ color:var(--kin-bright); } .cal-event.feat .ce-body b{ color:var(--kin-bright); } .cal-event.feat .ce-body p{ color:#b3a787; } /* ===== S8 限定情報アーカイブ ===== */ .media-card{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; overflow:hidden; margin-bottom:13px; } .media-thumb{ aspect-ratio:16/9; overflow:hidden; background:linear-gradient(150deg,#241c10,#15110a); position:relative; display:flex; align-items:center; justify-content:center; } .media-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; } .lc-thumb{ width:74px; height:74px; flex:0 0 74px; border-radius:10px; overflow:hidden; object-fit:cover; object-position:center; display:block; } /* 260921 T180(A-1): ドロップシャドウ全廃 */ .media-thumb .play{ position:relative; z-index:2; width:54px; height:54px; border-radius:50%; background:rgba(224,200,132,.92); display:flex; align-items:center; justify-content:center; } .media-thumb .play::after{ content:""; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #15110a; margin-left:4px; } .media-thumb .dur{ position:absolute; right:10px; bottom:10px; font-size:12.5px; color:#f3ead2; background:rgba(0,0,0,.55); padding:2px 8px; border-radius:6px; font-family:var(--mincho); } .media-thumb .ribbon{ position:absolute; left:10px; top:10px; } .media-card{ display:block; width:100%; cursor:pointer; transition:border-color .15s; -webkit-appearance:none; appearance:none; padding:0; text-align:left; font:inherit; } .media-card:hover{ border-color:var(--kin); } /* 9/14 Figma差分A#11: 動画URL未設定でも大きなカードUIを維持するフォールバック（再生不可・非クリック） */ .media-card--static{ cursor:default; } .media-card--static:hover{ border-color:var(--line-soft); } /* 動画カード＋「説明を読む」フッター（button 内に a を置けないため兄弟要素として結合） */ .media-block{ margin-bottom:13px; } .media-block .media-card{ margin-bottom:0; } .media-block.has-detail .media-card{ border-radius:13px 13px 0 0; border-bottom:0; } .media-detail-link{ display:flex; align-items:center; justify-content:space-between; padding:11px 15px 12px; background:var(--washi); border:1px solid var(--line-soft); border-top:1px dashed var(--line-soft); border-radius:0 0 13px 13px; font-size:13px; color:var(--shu); text-decoration:none; } .media-detail-link:hover{ background:#f6f1e6; } .media-card-detail{ margin-bottom:18px; } .media-card:hover .play{ transform:scale(1.06); } .media-thumb .play{ transition:transform .15s; } .media-info{ padding:13px 15px; } .media-info b{ display:block; font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); letter-spacing:.03em; line-height:1.45; } .media-info .meta{ font-size:12.5px; color:var(--muted); margin-top:6px; letter-spacing:.04em; } /* 動画モーダル */ .video-modal{ position:absolute; inset:0; z-index:30; background:rgba(8,6,4,.86); backdrop-filter:blur(3px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:.2s; } .video-modal.show{ opacity:1; pointer-events:auto; } .vm-close{ position:absolute; top:16px; right:18px; width:38px; height:38px; border-radius:50%; background:rgba(246,240,226,.12); border:1px solid var(--line); color:#f6f0e2; font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .vm-player{ width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; position:relative; background:#000; display:flex; align-items:center; justify-content:center; border:1px solid var(--kin); } .vm-player .play{ width:58px; height:58px; border-radius:50%; background:rgba(224,200,132,.95); display:flex; align-items:center; justify-content:center; } .vm-player .play::after{ content:""; border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent #15110a; margin-left:5px; } .vm-bar{ position:absolute; left:0; right:0; bottom:0; padding:10px 12px; display:flex; align-items:center; gap:10px; background:linear-gradient(transparent,rgba(0,0,0,.6)); } .vm-bar .vm-track{ flex:1; height:4px; border-radius:2px; background:rgba(246,240,226,.3); position:relative; } .vm-bar .vm-track i{ position:absolute; left:0; top:0; bottom:0; width:32%; background:var(--kin-bright); border-radius:2px; } .vm-bar .vm-time{ font-size:12.5px; color:#f6f0e2; font-family:var(--mincho); } .vm-meta{ width:100%; margin-top:16px; } .vm-meta .vm-tag{ margin-bottom:9px; } .vm-meta h3{ font-family:var(--mincho); font-weight:800; font-size:18px; color:var(--washi); letter-spacing:.04em; line-height:1.5; } .vm-meta p{ font-size:13px; color:#c6b89a; margin-top:9px; line-height:1.8; } .letter-card{ display:flex; align-items:center; gap:12px; padding:15px; background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; margin-bottom:13px; cursor:pointer; transition:border-color .15s, background .15s; } .letter-card:hover{ border-color:var(--kin); background:rgba(197,164,92,.05); } .letter-card .lc-body{ flex:1; } .letter-card .lc-meta{ font-size:10.5px; color:var(--kin-deep); font-weight:700; letter-spacing:.08em; margin-bottom:6px; } /* 260929 Figma文字設定の照合(§4-6, S8お便り): letter-spacingをFigma実測値.29pxへ */ .letter-card b{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); letter-spacing:.29px; } .letter-card p{ font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.7; } .letter-card .lc-arrow{ color:var(--kin); font-size:20px; flex:0 0 auto; } /* お便り 記事詳細（画面遷移） */ .article-hero{ position:relative; border-radius:0; margin:-20px -20px 20px; padding:30px 22px 24px; background:linear-gradient(160deg,#241c10,#15110a); color:#f3ead2; } .article-hero .ah-meta{ font-family:var(--mincho); font-size:12.5px; color:var(--kin-bright); letter-spacing:.16em; } .article-hero h1{ font-family:var(--mincho); font-weight:700; font-size:23px; color:var(--washi); letter-spacing:.06em; line-height:1.55; margin-top:12px; } .article-img{ aspect-ratio:16/9; border-radius:12px; background:#e9e1cf; display:flex; align-items:center; justify-content:center; margin-bottom:18px; } .article-body p{ font-size:14px; color:var(--sumi); line-height:2.05; margin-bottom:16px; letter-spacing:.01em; } .article-body h3{ font-family:var(--mincho); font-weight:700; font-size:16px; color:var(--sumi); letter-spacing:.04em; margin:6px 0 12px; padding-left:11px; border-left:3px solid var(--kin); } /* 追加タスク: 本文リッチエディター(Quill)対応タグのLIFF幅向けスタイル */ .article-body h4{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); letter-spacing:.03em; margin:6px 0 10px; } .article-body img{ display:block; max-width:100%; height:auto; border-radius:10px; margin:10px 0; } .article-body ul,.article-body ol{ margin:0 0 16px 1.2em; font-size:14px; color:var(--sumi); line-height:1.9; } .article-body li{ margin-bottom:4px; } .article-body blockquote{ margin:0 0 16px; padding:10px 14px; border-left:3px solid var(--line); color:rgba(0,0,0,.6); font-size:14px; } .article-body a{ color:var(--shu); text-decoration:underline; word-break:break-all; } .article-body strong{ font-weight:700; } .article-share{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:8px; font-size:13px; color:var(--kin-deep); font-weight:700; border:1px solid var(--line); border-radius:11px; padding:13px; } /* YouTube埋め込み再生モーダル（S8 動画カード共通） */ .yt-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; } .yt-modal[hidden]{ display:none; } .yt-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.82); } /* 閉じるボタン分の上余白(56px)を確保し、動画枠は角丸＋余白付きの黒地に載せる */ .yt-modal-body{ position:relative; width:100%; max-width:720px; padding:56px 0 12px; } /* 260921 T180(A-1): ドロップシャドウ全廃。暗背景上で境界が消えるため.vm-playerに倣いborderへ置換 */ .yt-modal-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; border:1px solid var(--kin); } .yt-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .yt-modal-close{ position:absolute; top:4px; right:0; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:var(--washi); font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; } .yt-modal-close:hover{ background:rgba(255,255,255,.24); } /* ===== S9 限定チャット ===== */ .chat-hero{ border-radius:16px; padding:26px 22px; text-align:center; color:#f3ead2; margin-bottom:18px; background:linear-gradient(155deg,#241c10,#15110a); border:1px solid var(--kin); } .chat-hero .ch-mark{ width:64px; height:64px; border-radius:50%; margin:0 auto 14px; background:var(--kin-grad); display:flex; align-items:center; justify-content:center; font-family:var(--mincho); font-weight:700; font-size:30px; color:#2a200c; } .chat-hero h3{ font-family:var(--mincho); font-weight:800; font-size:20px; color:var(--washi); letter-spacing:.08em; } .chat-hero p{ font-size:13px; color:#c6b89a; line-height:1.9; margin-top:10px; } .rule-list{ margin:4px 0 18px; } .rule-row{ display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--sumi); line-height:1.7; margin-bottom:11px; } .rule-row .rn{ width:22px; height:22px; border-radius:6px; flex:0 0 22px; background:rgba(197,164,92,.14); color:var(--kin-deep); font-family:var(--mincho); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; } .approve-note{ background:rgba(154,43,30,.07); border:1px solid rgba(154,43,30,.22); border-radius:11px; padding:13px 15px; font-size:13px; color:#7d3328; line-height:1.8; margin-top:14px; text-align:center; } .ec-card{ cursor:pointer; } /* ===== 入会フロー（段階性） ===== */ .confirm-list{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; overflow:hidden; margin-bottom:16px; } .confirm-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line-soft); } .confirm-row:last-child{ border-bottom:none; } .confirm-row .cr-k{ font-size:13px; color:var(--muted); letter-spacing:.04em; flex:0 0 auto; } .confirm-row .cr-v{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); text-align:right; letter-spacing:.03em; } .confirm-row .cr-v .price{ font-size:14.5px; } /* 261026: 括弧書き（一回払い・自動更新なし 等）を途中で折らず、折るときは括弧ごと次の行へ */ .nw-block{ display:inline-block; } /* 260929 確認一覧の行の間に入る注記（御朱印帳の発送時期など）。枠・角丸を持たせず、行と同じ幅・区切り線で一覧に溶け込ませる */ .confirm-note{ margin:0; padding:10px 16px 12px; border-bottom:1px solid var(--line-soft); background:#fafaf9; font-size:12.5px; line-height:1.7; color:var(--muted); letter-spacing:.02em; } .confirm-note:last-child{ border-bottom:none; } /* 予約申込・決済画面の金額内訳（参加費／お志／合計）: dl.profile > .row(dt/dd)。confirm-row と同じ見た目 左右の余白は .row 側だけが持つ。.row 以外を入れるときは同じ 16px の余白を持たせる（例: .ap-summary-table） */ dl.profile{ margin:14px 0 0; background:var(--washi); border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; } dl.profile .row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line-soft); } dl.profile .row:last-child{ border-bottom:none; } dl.profile dt{ font-size:13px; color:var(--muted); letter-spacing:.04em; flex:0 0 auto; } dl.profile dd{ margin:0; font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); text-align:right; letter-spacing:.03em; } dl.profile dd b{ font-size:16px; color:var(--kin-deep); } .success-hero{ text-align:center; border-radius:18px; padding:32px 22px 26px; color:#f3ead2; margin-bottom:18px; background:linear-gradient(160deg,#241c10,#15110a); border:1px solid var(--kin); position:relative; overflow:hidden; } .success-hero .sh-seal{ width:84px; height:84px; border-radius:50%; margin:0 auto 18px; background:var(--kin-grad); display:flex; align-items:center; justify-content:center; font-family:var(--mincho); font-weight:800; font-size:38px; color:#2a200c; /* 260921 T180(A-1): オフセット0・ブラー0のリング演出。ドロップシャドウではないため残置。鈴木様へ要確認。 */ box-shadow:0 0 0 8px rgba(197,164,92,.14), 0 0 0 16px rgba(197,164,92,.07); } .success-hero h3{ font-family:var(--mincho); font-weight:800; font-size:20px; color:var(--washi); letter-spacing:.03em; white-space:nowrap; } .success-hero p{ font-size:13px; color:#c6b89a; line-height:1.9; margin-top:11px; } .status-line{ display:flex; align-items:center; justify-content:center; gap:9px; margin:16px 0; } .status-line .sl-pill{ font-family:var(--mincho); font-weight:700; font-size:13px; padding:6px 16px; border-radius:999px; letter-spacing:.08em; } .apply-card{ background:var(--washi); border:1px solid var(--line-soft); border-radius:14px; padding:18px; margin-bottom:16px; } .apply-card .ac-no{ text-align:center; padding-bottom:15px; border-bottom:1px dashed var(--line); margin-bottom:15px; } .apply-card .ac-no small{ font-size:12.5px; color:var(--muted); letter-spacing:.08em; } .apply-card .ac-no b{ display:block; font-family:var(--mincho); font-weight:700; font-size:24px; color:var(--kin-deep); letter-spacing:.1em; margin-top:5px; } .flow-steps{ counter-reset:fs; } .flow-step{ display:flex; gap:13px; align-items:flex-start; padding-bottom:16px; position:relative; } .flow-step:not(:last-child)::before{ content:""; position:absolute; left:14px; top:30px; bottom:0; width:2px; background:var(--line); } /* 260929 Figma文字設定の照合(§8): ステップ番号はFigma実測どおりBlack(900)。 Google Fontsは400/500/700/900のみ読み込み済みのため追加コストなし。 */ .flow-step .fs-n{ width:29px; height:29px; border-radius:50%; flex:0 0 29px; z-index:1; background:var(--kinari-2); color:var(--muted); border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; font-family:var(--mincho); font-weight:900; font-size:14px; } .flow-step.now .fs-n{ background:var(--kin-grad); color:#fff; border-color:var(--shu); } .flow-step.done .fs-n{ background:var(--sumi); color:var(--kin-bright); border-color:var(--kin); } .flow-step .fs-b b{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); letter-spacing:.03em; } .flow-step .fs-b p{ font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.7; } .flow-step.now .fs-b b{ color:var(--kin-deep); } .interstitial{ text-align:center; padding:24px 8px 8px; } .pay-brand{ display:inline-flex; align-items:center; gap:10px; background:var(--sumi); border:1px solid var(--kin); border-radius:12px; padding:12px 22px; margin-bottom:20px; } .pay-brand .pb-from{ font-family:var(--mincho); color:#b3a787; font-size:14px; } .pay-brand .pb-ar{ color:var(--kin); font-size:16px; } .pay-brand .pb-to{ font-family:var(--mincho); color:var(--kin-bright); font-weight:700; font-size:16px; letter-spacing:.04em; } .amount-box{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; padding:18px; margin-bottom:18px; } .amount-box .am-row{ display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; } .amount-box .am-row.total{ border-top:1px solid var(--line-soft); margin-top:6px; padding-top:13px; } .amount-box .am-k{ font-size:14px; color:var(--muted); } .amount-box .am-v{ font-family:var(--mincho); font-weight:700; color:var(--sumi); } .amount-box .am-row.total .am-v{ font-size:21px; color:var(--kin-deep); } .secure-note{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--muted); line-height:1.7; background:rgba(197,164,92,.06); border:1px solid var(--line); border-radius:11px; padding:13px 15px; margin-bottom:8px; text-align:left; } .secure-note .sn-mark{ font-family:var(--mincho); color:var(--kin-deep); font-weight:700; } /* ===== 夏催事（先行スポット） ===== */ .event-hero{ position:relative; border-radius:16px; overflow:hidden; padding:26px 22px 24px; margin-bottom:18px; background:linear-gradient(155deg,#2a1d12 0%,#14110c 60%,#1f1810 100%); border:1px solid var(--kin); color:#f3ead2; } .event-hero .eh-tag{ font-family:var(--mincho); font-size:13px; letter-spacing:.3em; color:var(--kin-bright); } .event-hero h3{ font-family:var(--mincho); font-weight:700; font-size:30px; color:var(--washi); letter-spacing:.1em; margin:10px 0 4px; } .event-hero .eh-date{ font-family:var(--mincho); font-size:15px; color:var(--kin-bright); letter-spacing:.06em; } .event-hero .eh-place{ font-size:13px; color:#c6b89a; margin-top:8px; letter-spacing:.04em; } .ticket-type{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--washi); border:1px solid var(--line-soft); border-radius:12px; margin-bottom:10px; } .ticket-type .tt-body{ flex:1; } .ticket-type .tt-body b{ font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); letter-spacing:.03em; } .ticket-type .tt-body small{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; } .ticket-type .tt-price{ font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--kin-deep); white-space:nowrap; } .ticket-type.onsite{ background:rgba(154,43,30,.05); border-color:rgba(154,43,30,.2); } .stepper{ display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; } .stepper button{ width:34px; height:34px; border:none; background:var(--washi); color:var(--kin-deep); font-size:18px; font-family:var(--mincho); cursor:pointer; } .stepper .qty{ width:34px; text-align:center; font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); } .bulk-note{ background:rgba(197,164,92,.08); border:1px solid var(--line); border-radius:11px; padding:12px 14px; font-size:12.5px; color:var(--kin-deep); line-height:1.7; margin:4px 0 14px; } .bulk-note b{ color:var(--kin-deep); } /* 261025 句ごとに折り返す（「ます。」だけが次の行に落ちて読みにくいため）。全域の .nb{white-space:nowrap} を継承するので、 句の途中では折り返さず、句と句のあいだでだけ折り返す。1句が箱の幅より長くなる文には使わない（はみ出す） */ .bulk-note .nb{ display:inline-block; } .ticket-stub{ position:relative; background:linear-gradient(155deg,#241c10,#15110a); border:1px solid var(--kin); border-radius:16px; padding:22px; color:#f3ead2; margin-bottom:16px; overflow:hidden; } .ticket-stub .ts-perf{ position:absolute; left:0; right:0; top:50%; height:0; border-top:2px dashed rgba(197,164,92,.4); } .ticket-stub .ts-name{ font-family:var(--mincho); font-weight:700; font-size:20px; color:var(--washi); letter-spacing:.08em; } .ticket-stub .ts-meta{ font-size:13px; color:#c6b89a; margin-top:6px; } .ticket-stub .ts-code{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line); text-align:center; } .ticket-stub .ts-code small{ font-size:10.5px; color:#a89c80; letter-spacing:.1em; } .ticket-stub .ts-code b{ display:block; font-family:var(--mincho); font-weight:700; font-size:26px; color:var(--kin-bright); letter-spacing:.18em; margin-top:5px; } .ticket-stub .ts-bars{ display:flex; gap:3px; justify-content:center; margin-top:14px; height:42px; align-items:stretch; } .ticket-stub .ts-bars i{ width:3px; background:#f3ead2; border-radius:1px; } /* ===== 会員状態別カード ===== */ .statuscard{ position:relative; border-radius:16px; overflow:hidden; color:#f3ead2; margin-bottom:16px; /* 260921 T180(A-1): ドロップシャドウ全廃（既存borderで境界維持） */ background:linear-gradient(150deg,#241c10 0%,#100d08 55%,#211a0f 100%); border:1.5px solid var(--kin); } .statuscard .sc-band{ padding:8px 16px; text-align:center; font-family:var(--mincho); font-weight:700; font-size:13px; letter-spacing:.1em; } .statuscard .sc-band.warn{ background:linear-gradient(90deg,#e7d098,#c5a45c); color:#2a200c; } .statuscard .sc-band.mute{ background:rgba(140,130,112,.95); color:#f6f0e2; } .statuscard .sc-band.danger{ background:rgba(154,43,30,.95); color:#f6f0e2; } .statuscard .sc-body{ padding:18px 20px 20px; } .statuscard .sc-rank{ font-family:var(--mincho); font-weight:800; font-size:23px; color:var(--washi); letter-spacing:.12em; } .statuscard .sc-no{ font-size:13px; color:#c6b89a; margin-top:4px; letter-spacing:.06em; } .statuscard .sc-exp{ display:flex; gap:18px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); } .statuscard .sc-exp div small{ font-size:10px; color:#a89c80; letter-spacing:.08em; display:block; } .statuscard .sc-exp div b{ font-family:var(--mincho); font-size:15px; color:var(--kin-bright); letter-spacing:.04em; } .statuscard.dim{ filter:grayscale(.55) brightness(.82); border-color:#8c8270; } .statuscard.dim-strong{ filter:grayscale(.85) brightness(.62); border-color:rgba(140,130,112,.6); } .renew-card{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; padding:16px; margin-bottom:14px; } .renew-card b{ font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); letter-spacing:.03em; } .renew-card p{ font-size:13px; color:var(--muted); line-height:1.8; margin:7px 0 0; } /* ===== 退会確認モーダル（ボトムシート） ===== */ /* ビューポート固定（position:absolute だと文書全体基準になり、スクロール位置で シートが見切れるため fixed に変更。シートは常に画面下部に全体が見える） */ .modal-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(20,17,12,.62); backdrop-filter:blur(2px); display:flex; align-items:flex-end; justify-content:center; } .modal-sheet{ width:100%; max-width:430px; background:var(--kinari); border-top-left-radius:22px; border-top-right-radius:22px; padding:20px 20px calc(26px + env(safe-area-inset-bottom)); border-top:2px solid var(--shu); /* 260921 T180(A-1): ドロップシャドウ全廃（不透明地×半透明backdropで境界は十分視認可） */ /* 長文でも画面内に収める。既定はシート全体スクロール */ max-height:min(85dvh, 85vh); overflow-y:auto; overscroll-behavior-y:contain; display:flex; flex-direction:column; } /* 規約・個人情報モーダル: 見出しと閉じるボタンを固定し、本文のみ内部スクロール */ #legal-modal .modal-sheet{ overflow:hidden; } #legal-modal-body{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; } .modal-sheet .ms-handle{ width:42px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 18px; } .modal-sheet h3{ font-family:var(--mincho); font-weight:700; font-size:19px; color:var(--shu); letter-spacing:.04em; text-align:center; } /* 261020 Q: 規約・個人情報の取扱いを読む画面（/front/legal/）。本文は左寄せ */ .legal-title{ font-size:17px; font-weight:700; text-align:center; margin:8px 0 12px; } .legal-body{ text-align:left; overflow-wrap:anywhere; } .modal-sheet .ms-lead{ font-size:13px; color:var(--sumi); line-height:1.9; margin:12px 0 16px; text-align:center; } .ms-warn{ background:rgba(154,43,30,.06); border:1px solid rgba(154,43,30,.2); border-radius:12px; padding:14px 15px; margin-bottom:18px; } .ms-warn .mw-row{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#7d3328; line-height:1.7; margin-bottom:9px; } .ms-warn .mw-row:last-child{ margin-bottom:0; } .ms-warn .mw-row .mw-k{ color:var(--shu); font-family:var(--mincho); font-weight:700; flex:0 0 auto; } .btn-danger{ background:var(--shu); color:#f6f0e2; } /* ===== 反映待ち（同期遅延） ===== */ .pending-card{ background:var(--sumi); border:1px solid var(--kin); border-radius:14px; padding:20px; color:var(--kinari); text-align:center; margin-bottom:16px; } .pending-card .dots{ display:flex; gap:7px; justify-content:center; margin-bottom:14px; } .pending-card .dots i{ width:10px; height:10px; border-radius:50%; background:var(--kin); animation:pdot 1.2s infinite ease-in-out; } .pending-card .dots i:nth-child(2){ animation-delay:.2s; } .pending-card .dots i:nth-child(3){ animation-delay:.4s; } @keyframes pdot{ 0%,80%,100%{ opacity:.25; transform:scale(.8);} 40%{ opacity:1; transform:scale(1);} } .pending-card b{ font-family:var(--mincho); font-weight:700; font-size:17px; color:var(--washi); letter-spacing:.06em; } .pending-card p{ font-size:13px; color:#c6b89a; margin-top:9px; line-height:1.8; } .sync-strip{ display:flex; align-items:center; gap:9px; background:var(--washi); border:1px solid var(--line-soft); border-radius:11px; padding:12px 14px; font-size:12.5px; color:var(--muted); line-height:1.7; margin-bottom:13px; } .sync-strip .ss-dot{ width:9px; height:9px; border-radius:50%; background:var(--ok); flex:0 0 9px; /* 260921 T180(A-1): オフセット0・ブラー0のリング演出。ドロップシャドウではないため残置。鈴木様へ要確認。 */ box-shadow:0 0 0 3px rgba(79,122,82,.18); } .resv-row{ display:flex; align-items:center; gap:12px; background:var(--washi); border:1px solid var(--line-soft); border-radius:12px; padding:14px 15px; margin-bottom:10px; } .resv-row .rr-body{ flex:1; } .resv-row .rr-body b{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); } .resv-row .rr-body small{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; } /* ===== LINE通知フキダシ ===== */ .line-bg{ background:#8caab6; min-height:100%; padding:18px 14px 40px; } .lc-day{ text-align:center; margin:6px 0 16px; } .lc-day span{ font-size:11px; color:#f6f0e2; background:rgba(0,0,0,.18); padding:3px 13px; border-radius:999px; } .lc-msg{ display:flex; gap:9px; align-items:flex-end; margin-bottom:16px; } .lc-ava{ width:38px; height:38px; border-radius:50%; flex:0 0 38px; background:#1a1714; display:flex; align-items:center; justify-content:center; font-family:var(--mincho); font-weight:700; font-size:18px; color:#fff; } .lc-col{ max-width:255px; } .lc-name{ font-size:10.5px; color:#f6f0e2; margin:0 0 4px 3px; } .lc-bubble{ background:#fff; border-radius:4px 16px 16px 16px; padding:13px 15px; position:relative; } .lc-bubble b{ font-family:var(--gothic); font-weight:700; font-size:14px; color:var(--sumi); letter-spacing:.02em; } .lc-bubble p{ font-size:13px; color:#3a352c; line-height:1.7; margin-top:6px; } .lc-bubble .lc-cta{ display:inline-block; margin-top:11px; font-size:13px; font-weight:700; color:var(--ink); border-top:1px solid var(--line-soft); padding-top:10px; width:100%; } .lc-time{ font-size:10px; color:#f0ece2; margin-left:6px; } /* ===== 法人ビュー ===== */ .corp-meta{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; overflow:hidden; margin-bottom:14px; } .corp-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line-soft); } .corp-row:last-child{ border-bottom:none; } .corp-row .cp-k{ font-size:13px; color:var(--muted); } .corp-row .cp-v{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); text-align:right; } .corp-note{ background:rgba(154,43,30,.06); border:1px solid rgba(154,43,30,.2); border-radius:11px; padding:13px 15px; font-size:13px; color:#7d3328; line-height:1.8; } .gallery-foot{ max-width:1320px; margin:64px auto 0; color:#7e745f; font-size:13px; line-height:2; letter-spacing:.02em; } .gallery-foot b{ color:var(--kin); } /* 遷移先トースト */ .toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); z-index:100; background:var(--sumi); border:1px solid var(--kin); border-radius:13px; /* 260921 T180(A-1): ドロップシャドウ全廃（既存borderで境界維持） */ padding:15px 20px; max-width:520px; width:calc(100% - 48px); opacity:0; pointer-events:none; transition:.25s; } .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } .toast .t-head{ font-family:var(--mincho); font-weight:700; font-size:14px; color:var(--kin-bright); letter-spacing:.06em; } .toast .t-url{ font-size:13px; color:#cfc4a8; margin-top:6px; word-break:break-all; line-height:1.7; } .toast .t-note{ font-size:12.5px; color:#9a9079; margin-top:8px; line-height:1.7; } @media (max-width:520px){ body{ padding:24px 10px 60px; } .device,.device-wrap{ width:100%; max-width:390px;} } /* ============================================================ v3 光テーマ・オーバーライド層（白ベース × 黒文字 × 朱赤アクセント） 旧・暗色コンポーネントを白地・黒文字・朱赤へ上書き。 元定義より後方に置くことで同一詳細度でも優先させる。 ============================================================ */ /* --- 外側ギャラリー外装（明地化） --- */ .rankbar{ background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); } .rankbar button{ color:var(--sumi); } .rankbar button.on{ color:#fff; } .rankbar .rb-hint{ color:var(--muted); } .brandline .mark{ color:var(--sumi); } .gallery-head .sub{ color:var(--muted); } .legend span{ color:var(--muted); background:rgba(177,38,52,.05); border-color:rgba(177,38,52,.16); } .section-label h2{ color:var(--sumi); } .section-label p{ color:var(--muted); } .device-cap .name{ color:var(--sumi); } .device-cap .note{ color:var(--muted); } .gallery-foot{ color:var(--muted); } .gallery-foot b{ color:var(--shu); } /* --- 端末クローム（ダークヘッダー／on-dark画面を白へ） --- */ .screen.on-dark{ background:#fff; } .screen.on-dark .pad{ color:var(--sumi); } .washi-tex{ display:none; } /* --- リッチメニュー作図：タブ見出しのみ光テーマ化（作図本体は基盤CSSで定義） --- */ .rm-cap .tab.a{ background:rgba(177,38,52,.09); color:var(--shu); border-color:rgba(177,38,52,.2); } .rm-cap .tab.b{ background:var(--kin-grad); color:#fff; } /* --- アイコンチップ・ピル（金→朱赤の淡地） --- */ .kic,.func .fic,.guard .gn,.rule-row .rn{ background:rgba(177,38,52,.09); color:var(--shu); } .kic.gold,.func.hot .fic{ background:var(--kin-grad); color:#fff; } .pill-gold{ background:rgba(177,38,52,.09); color:var(--shu); border-color:rgba(177,38,52,.2); } /* --- 選択・フォーカス（金→朱赤） --- */ .type-opt.sel{ border-color:var(--shu); background:rgba(177,38,52,.05); box-shadow:0 0 0 3px rgba(177,38,52,.1); } .type-opt.sel .radio{ border-color:var(--shu); } .type-opt.sel .radio::after{ background:var(--kin-grad); } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--shu); box-shadow:0 0 0 3px rgba(177,38,52,.12); } /* --- ボタン --- */ /* 260921 T180(A-1): ドロップシャドウ全廃 */ .btn-gold{ background:var(--kin-grad); color:#fff; } .btn-sumi{ background:#26221f; color:#fff; border:none; } .agree input.chk:checked{ background:var(--kin-grad); color:#fff; border:none; } /* --- feature 強調面（暗面→白地・朱赤縁、見出しは朱赤=--kin-bright） --- */ .menu-item.feat,.func.hot,.perk.crown,.cal-event.feat{ background:#fff; border-color:var(--shu); } .menu-item.feat .tx small,.func.hot small,.perk.crown .pk-body p,.cal-event.feat .ce-body p{ color:var(--muted); } /* --- セグメント／ステップ／決済ブランド（ON＝朱赤） --- */ .seg button.on{ background:var(--kin-grad); color:#fff; } .step.done .dot,.flow-step.done .fs-n{ background:var(--kin-grad); color:#fff; border-color:var(--shu); } .pay-brand{ background:#fff; border:1px solid var(--line); } .pay-brand .pb-from{ color:var(--muted); } .pay-brand .pb-ar,.pay-brand .pb-to{ color:var(--shu); } /* --- 会員証・アカウント＝朱赤ブランドカード（白文字） --- */ /* 260921 T180(A-1): ドロップシャドウ全廃（border:noneは色写真自体の縁で境界を示す意図のため維持） */ .memcard,.mp-card-mini,.acct-card,.statuscard{ background:linear-gradient(135deg,#c1394a 0%,#9e2230 55%,#7d1f2a 100%); border:none; } /* S3マイページ・S13アカウント・状態カード（更新期/休会/失効）は署名グラデ写真そのまま（S2会員証と同じ鮮やかさ） */ .mp-card-mini,.acct-card,.statuscard{ background:var(--bg-img) left top/cover; } .mp-card-mini,.acct-card,.statuscard{ text-shadow:none; } /* S3・S13・状態カードは文字影なし */ /* 休会/失効は状態変化としてグレースケール（背景写真を活かしつつ沈める） */ .statuscard.dim{ filter:grayscale(.5) brightness(.9); } .statuscard.dim-strong{ filter:grayscale(.8) brightness(.72); } .memcard .scale-tex{ background-image:radial-gradient(circle at 50% 0,#fff 0 2px,transparent 2px); opacity:.10; } .memcard .shrine,.memcard .holder .no{ color:rgba(255,255,255,.85); } .memcard .holder small{ color:rgba(255,255,255,.75); } .memcard .qr,.mp-card-mini .mini-qr{ background:#fff; } .gold-foil{ background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%); } .valid-box{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); } .valid-box small{ color:rgba(255,255,255,.7); } .valid-box b{ color:#fff; } .statuscard .sc-band.warn{ background:var(--kin-grad); color:#fff; } .acct-card .ac-role,.mp-card-mini .go{ color:#fff; } .acct-card .ac-no,.mp-card-mini .nm,.statuscard .sc-no{ color:rgba(255,255,255,.8); } .acct-card .ac-meta div small,.statuscard .sc-exp div small{ color:rgba(255,255,255,.7); } .acct-card .ac-meta div b,.statuscard .sc-exp div b{ color:#fff; } /* S13アカウント・状態カードは文字色を白で統一 */ .acct-card .ac-no,.acct-card .ac-meta div small, .statuscard .sc-no,.statuscard .sc-exp div small{ color:#fff; } /* on-dark「画面を明るく」は既に明地なので整合のみ */ .screen.on-dark.bright{ background:#fff; } .screen.on-dark.bright .valid-box{ background:rgba(255,255,255,.14); } .screen.on-dark.bright .valid-box b{ color:#fff; } .screen.on-dark.bright .cache-note{ background:#f5f5f4; color:var(--muted); } /* --- 情報ヒーロー（暗面→淡地・黒文字・朱赤ラベル） --- */ .hero0,.diag-result,.chat-hero,.success-hero,.event-hero,.article-hero,.ticket-stub,.pending-card,.consult-state.available{ background:#faf7f6; border:1px solid var(--line); color:var(--sumi); } .hero0{ background:linear-gradient(160deg,#fbeef0 0%,#faf7f6 60%,#fff 100%); border:none; } .article-hero{ border:none; } .hero0 h1,.diag-result .dr-main,.chat-hero h3,.success-hero h3,.event-hero h3,.article-hero h1,.ticket-stub .ts-name,.pending-card b,.consult-state.available .st-main{ color:var(--sumi); } .hero0 h1 b{ color:var(--shu); } .hero0 p,.diag-result .dr-sub,.chat-hero p,.success-hero p,.event-hero .eh-place,.pending-card p,.consult-state.available .st-sub{ color:var(--muted); } .consult-state.available{ border-left:4px solid var(--shu); } .diag-result .dr-age,.chat-hero .ch-mark,.success-hero .sh-seal{ background:var(--kin-grad); color:#fff; } .event-hero .eh-date,.ticket-stub .ts-code b{ color:var(--shu); } .ticket-stub .ts-meta{ color:var(--muted); } .article-hero .ah-meta{ color:var(--shu); } .pending-card .dots i{ background:var(--shu); } .ticket-stub .ts-bars i{ background:var(--sumi); } .ticket-stub .ts-perf{ border-top-color:var(--line); } /* --- メディアサムネ（暗→淡グレー・朱赤の再生ボタン） --- */ .media-thumb{ background:#e9e8e6; } .media-thumb .play{ background:var(--shu); } .media-thumb .play::after{ border-color:transparent transparent transparent #fff; } .media-thumb .dur{ color:#fff; } /* --- 淡い金地のノート類→中立の淡地 --- */ .acct-note,.secure-note,.cache-note,.bulk-note,.pray-card.locked-visible{ background:#f7f7f6; } /* ============================================================ S0b 未会員ランディング / S2 デジタル会員証 Figma「260702_kanahebisui_LINE」忠実再現 署名グラデ（緑→黄→橙）＋白い蛇社紋（インラインSVG）＋グラス白カード ※背景は元・購入ストック写真をCSSグラデで近似（ライセンス回避・非失効・自己完結） ============================================================ */ :root{ --brand-grad:linear-gradient(135deg,#7cc088 0%,#bccf6c 25%,#e8c95f 46%,#eeb15c 68%,#e37d63 100%); } /* ---------- S0b ---------- */ /* 9/14 Figma差分A#1: ロゴ・タイトル・カード・入会ボタンを Figma 準拠の大きさへ拡大 */ /* 260921 T180(A-7): Figmaは中央基準の敷き方（left top→center） */ .fs0{ position:relative; min-height:100%; padding:14px 20px 18px; background:var(--bg-img) center/cover no-repeat; } .fs0-hero{ text-align:center; padding:34px 0 26px; } /* 260921 T180(A-1): 鈴木様指摘によりドロップシャドウを全廃 */ .fs0-crest{ width:180px; height:132px; margin:0 auto; display:block; } /* 260922 T180(A-3): 鈴木様書き出し画像へ差し替え。書体が手元にないため画像化。 素材は2倍解像度(636x86)のため、表示は等倍(318x43)に抑えてRetina対応する。 固定318pxにはせず、狭幅端末で左右の余白が足りなくならないよう max-width で縮める。 */ /* 260923 瀬野尾さん指摘: ロゴと「ようこそ崇敬会へ」の間が詰まっていた。Figma（390px幅）では ロゴ下端〜文字上端が約30px。実測で margin-top:25px が一致（390px幅で約30px）。 */ .fs0-title{ max-width:318px; width:100%; height:auto; display:block; margin:25px auto 0; } /* 260921 T180(A-10): 行間gapをFigma準拠の15pxへ */ .fs0-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px; } /* 261006 未会員S0b: 白カード2枚は横幅いっぱいで縦に並べる（鈴木様9/24修正デザイン） */ .fs0-grid--stack{ grid-template-columns:1fr; } /* 260921 T180(A-10): カード高さ100px固定・中央揃え・gap14px・padding15px 16pxへ。 ラベルはwhite-space:nowrap（上記.fs0-card b）で常に1行のため、 固定heightでも2行化して溢れる心配はない（確認済み）。 */ .fs0-card{ background:rgba(255,255,255,.94); backdrop-filter:blur(2px); /* 260921 T180(A-10): Figma は 100px 固定だが min-height にする。 .fs0-grid が 1fr 1fr の grid（align-items:stretch）のため行内の高さは自動で揃い、 固定にする利点がない。一方で端末の文字拡大時に固定だと中身が溢れる。 */ border-radius:14px; padding:15px 16px; min-height:100px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; gap:14px; cursor:pointer; transition:transform .12s; } .fs0-card:active{ transform:scale(.98); } /* 260921 T180(A-10): アイコン高さをFigma準拠の32pxへ（34pxからのズレが位置ズレの一因） */ .fs0-card .ic{ height:32px; width:auto; } /* 「オンライン授与所」等が折り返さないよう可変サイズ+改行禁止 */ .fs0-card b{ font-family:var(--gothic); font-weight:700; font-size:clamp(13px, 4.2vw, 15px); color:#141414; letter-spacing:.01em; text-align:center; white-space:nowrap; } /* 260924 Figma差異: 高さをFigma実測値(38:1587)へ。padding 上30/下22/左右18・gap 22・ ロゴ85×57で、高さ84px→109px（30+57+22）。 */ .fs0-cta{ position:relative; margin-top:28px; background:#fff; border-radius:16px; padding:30px 18px 22px; display:flex; align-items:center; gap:22px; cursor:pointer; transition:transform .12s; } .fs0-cta:active{ transform:scale(.99); } .fs0-cta .logo{ width:85px; height:57px; flex:0 0 85px; object-fit:contain; } .fs0-cta b{ font-family:var(--gothic); font-weight:700; font-size:20px; color:#141414; letter-spacing:.03em; } .fs0-cta .arr{ margin-left:auto; color:#141414; } .fs0-ribbon{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:#8dc391; color:#fff; font-family:var(--gothic); font-size:12px; font-weight:500; letter-spacing:.01em; padding:5px 16px; border-radius:15px; white-space:nowrap; } .fs0-ribbon::after{ content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); border:7px solid transparent; border-top-color:#8dc391; border-bottom:0; } .fs0-foot{ display:flex; align-items:center; justify-content:center; margin-top:18px; opacity:.92; } .fs0-foot-link{ display:flex; align-items:center; text-decoration:none; } /* 260921 T180(A-2): 書体が手元にないため、Figma(38:1753 / 173x32)のロゴ画像をそのまま使う */ .fs0-foot .fs0-logo{ width:173px; height:32px; object-fit:contain; display:block; } /* ---------- S2 ---------- */ /* 260911 Figma指摘対応: 上部帯を1行表示に変更（高さ220px・帯上端から20pxにテキスト中央配置） */ .fs2-top{ background:var(--rank); height:220px; box-sizing:border-box; padding-top:20px; text-align:center; display:flex; align-items:baseline; justify-content:center; gap:10px; } .fs2-top .t{ font-family:var(--gothic); font-weight:700; font-size:15px; color:#fff; letter-spacing:.04em; white-space:nowrap; } .fs2-top .tt{ min-width:0; font-family:var(--gothic); font-weight:700; font-size:20px; color:#fff; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fs2-body{ padding:0 20px 30px; } /* カードは帯に150px食い込む位置(帯上端から70px)に配置。350x300(aspect-ratio 7/6) */ .fs2-card{ position:relative; width:350px; max-width:100%; aspect-ratio:7/6; margin:-150px auto 0; border-radius:20px; overflow:hidden; padding:20px; box-sizing:border-box; background-image:url("../images/card-bg.81d6c0f65b98.jpg"); background-repeat:no-repeat; /* 260921 T180(A-1): ドロップシャドウ全廃 */ background-size:202.4% auto; background-position:48.2% 80.7%; } /* 260929 Figma実測は12pxだがtest_readability_0920の下限12.5pxを維持するため 12.5pxに据え置く（瀬野尾さん決定Q1） */ .fs2-card .cn{ position:relative; z-index:1; font-family:var(--gothic); font-weight:700; font-size:12.5px; color:#fff; letter-spacing:.04em; } .fs2-card .fs2-badge{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; margin-top:8px; min-width:100px; height:30px; padding:0 10px; border:1px solid #fff; font-family:var(--gothic); font-weight:700; font-size:16px; color:#fff; letter-spacing:.02em; white-space:nowrap; } /* 紋章はカード中央よりやや下（Figma S2: top 85px相当）に配置 */ .fs2-card .crest{ position:absolute; left:50%; top:85px; transform:translateX(-50%); width:181px; height:131px; opacity:.97; z-index:0; } .fs2-card .holder{ position:absolute; right:20px; bottom:16px; text-align:right; z-index:1; max-width:calc(100% - 40px); } /* 260929 瀬野尾さん決定(Q4修正): サイズ20pxへ。長い氏名・法人名は省略記号(…)で切らず、 front/templatetags/name_size.py が付与する.nm-size-*クラスで段階的に縮めて1行に収める（S3と同方式）。 */ .fs2-card .holder b{ font-family:var(--gothic); font-weight:700; font-size:20px; color:#fff; letter-spacing:.03em; display:block; white-space:nowrap; } /* 260929 瀬野尾さん決定(Q4修正): 会員証(S2)氏名・会員証ミニ(S3)氏名 共通の段階縮小クラス。 name_size_classフィルタ(front/templatetags/name_size.py)が氏名の表示幅（全角2・半角1換算）に 応じて付与する。最小の12.5pxはtest_readability_0920の下限に合わせている。 */ .fs2-card .holder b.nm-size-18, .s3-hero .s3-nm b.nm-size-18{ font-size:18px; } .fs2-card .holder b.nm-size-16, .s3-hero .s3-nm b.nm-size-16{ font-size:16px; } .fs2-card .holder b.nm-size-14, .s3-hero .s3-nm b.nm-size-14{ font-size:14px; } .fs2-card .holder b.nm-size-12-5, .s3-hero .s3-nm b.nm-size-12-5{ font-size:12.5px; } /* 260929 レビュー指摘(必須2): 最小段(12.5px)でも入りきらない極端に長い法人名は、 省略も欠けもさせず折り返す。S2は氏名が単独行（.holder はブロック要素）のため white-space:normalにするだけで自然に折り返る。 */ .fs2-card .holder b.nm-size-12-5{ white-space:normal; line-height:1.3; } /* 260929 レビュー指摘: FigmaのOpen Sans Semibold指定に合わせ、太さを明記する（旧は既定400のまま） */ .fs2-card .holder .no{ font-family:"Open Sans",var(--gothic); font-weight:600; font-size:14px; color:rgba(255,255,255,.9); letter-spacing:.04em; } .fs2-info{ display:flex; background:#f5f5f5; border-radius:14px; padding:16px 20px; margin-top:16px; } .fs2-info > div{ flex:1; } .fs2-info small{ font-size:14px; color:rgba(0,0,0,.55); font-weight:500; } /* 260929 Figma文字設定の照合(§5, S2状態値「有効」): サイズ16pxへ（有効期限の値はOpen Sansで別途上書き。§Q3） */ .fs2-info b{ display:block; margin-top:8px; font-family:var(--gothic); font-weight:700; font-size:16px; color:#141414; } /* 瀬野尾さん決定(Q3): 会員証の有効期限（.fs2-info内2番目の項目）だけOpen Sans Semibold 20pxへ。 テンプレート側(cert.html)は会員状態/有効期限とも同じ .fs2-info b を使うため、 常に2番目のdivが有効期限になる構造（views._build_cert_context参照）を利用しnth-childで区別する。 260929 レビュー指摘(推奨): 和暦表示（例「令和9年12月31日」）は漢字と数字が混在するため、 要素全体にOpen Sansを当てず、wareki_numspanフィルタ（persons/templatetags/wareki.py）が 数字だけ囲むにのみOpen Sansを適用する。漢字部分は.fs2-info bの既定 （Zen Kaku Gothic New Bold）のまま20pxを継承する。 */ /* 260929 実機確認で判明: .fs2-infoは2列flexで「有効期限」列の幅が約150pxしかなく、 20pxだと和暦（例「令和8年10月19日」）が2行に折り返した。瀬野尾さん指示 （収まらなければ大きさを調整）に従い16pxへ縮小して1行に収める。 */ .fs2-info > div:nth-child(2) b{ font-size:16px; } .fs2-info > div:nth-child(2) b .num{ font-family:"Open Sans",var(--gothic); font-weight:600; } .fs2-info .ok{ display:flex; align-items:center; gap:6px; } .fs2-info .ok svg{ width:18px; height:18px; } /* 260929 Figma文字設定の照合(§4-9, S2「※電波が届きにくい…」): 太さMedium(500)・色rgba(0,0,0,.6)へ */ .fs2-note{ font-size:12.5px; font-weight:500; color:rgba(0,0,0,.6); line-height:1.75; margin-top:14px; } .fs2-shinso b{ margin-top:6px; } .fs2-shinso p{ margin:8px 0 0; font-size:13px; line-height:1.7; color:rgba(0,0,0,.6); } .fs2-pill{ display:inline-block; border-radius:999px; padding:3px 14px; font-size:14px; font-weight:700; } .fs2-pill-ok{ background:var(--rank, #6b7a5a); color:#fff; } .fs2-pill-no{ background:#e5e1d8; color:#6a6357; } .fs2-btns{ display:flex; gap:12px; margin-top:16px; } .fs2-btn{ flex:1; position:relative; display:flex; align-items:center; justify-content:center; min-height:56px; background:var(--btn-gray); border:none; border-radius:12px; font-family:var(--gothic); font-weight:700; font-size:16px; color:#fff; letter-spacing:.06em; cursor:pointer; transition:filter .12s; } .fs2-btn:active{ filter:brightness(.92); } .fs2-btn .ar{ position:absolute; right:20px; font-weight:700; } /* 261007 領収書一覧（S16）: 日時と祈祷名を2行に分けるボタン。矢印(.ar 右20px)と重ならないよう右に余白 */ .fs2-btn .fs2-btn-2l{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 44px; line-height:1.4; text-align:center; } .fs2-btn .fs2-btn-2l-sub{ font-size:13px; font-weight:500; letter-spacing:.02em; opacity:.9; } .fs2-btn .fs2-btn-2l .fs2-nw{ display:inline-block; } /* 祈祷名と「の領収書を発行する」の間で折り返す（名前の途中で切らない） */ /* ============================================================ v6 Figma刷新オーバーライド層（kanahebisui_LINE 最新版 2026-08） 淡彩デザイン言語: 種別カラー制（一般=緑/崇敬=紺/正=朱/特別=紫/法人=墨） ＋UI緑（選択・トグル）＋グレーCTA＋淡青磁（S4） v3層より後方＝優先。元定義は温存し値のみ上書き。 ============================================================ */ /* --- 種別カラー切替（data-rank-theme 要素に rk-* が付与される） --- */ .rk-none{ --rank:#9ca3af; } .rk-support{ --rank:var(--rk-ippan); } .rk-sushin{ --rank:var(--rk-sushin); } .rk-regular{ --rank:var(--rk-regular); } .rk-special{ --rank:var(--rk-special); } .rk-nenkito{ --rank:var(--rk-regular); } /* 年祈祷=S2種別外。暫定で朱（要確認） */ .rk-corp{ --rank:var(--rk-corp); } /* --- 選択状態・フォーカス（朱赤→UI緑） --- */ /* 260924 T180(A-4): 選択時の枠をFigma実測値2pxへ（色は既存var(--ui-green)=#8dc391で一致済み） */ .type-opt.sel{ border-color:var(--ui-green); border-width:2px; padding:14.5px; /* 基底枠1.5px→2pxの差0.5pxを吸収し選択時に中身が動かないようにする */ background:#f4faf5; box-shadow:0 0 0 3px rgba(141,195,145,.18); } .type-opt.sel .radio{ border-color:var(--ui-green); } .type-opt.sel .radio::after{ background:var(--ui-green); } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--ui-green); box-shadow:0 0 0 3px rgba(141,195,145,.2); } .agree input.chk:checked{ background:var(--ui-green); } /* 260921 T180(A-13): 鈴木様指摘88:977。緑地の背景に対しbase層(:452)の✓色#2a200cが 未上書きで濃茶のまま出ていた。Figma実測値(#ffffff)に上書き。base層の値は 旧v3版の記録として残置（テーマ切替機構は無く、このv6層が全経路で後勝ちする） */ .agree input.chk:checked::after{ color:#fff; } .type-opt .price{ color:var(--ink); } /* 260921 T180(A-12): 判読性の懸念からS1限定で朱赤据え置きにしていたが、 260929瀬野尾さん決定(Q5)で画面ごとにFigmaどおりの色を使う方針が確定。 S1=#8dc391・S10=#f89059・夏催事=黒の上書きは各screen定義側（.s1-screen 等）で行う。 */ /* --- 主要CTA（朱赤グラデ→グレー #6b7280、Figma「会員特典」「入力内容を確認する」準拠） --- */ .btn-gold{ background:var(--btn-gray); color:#fff; border-radius:12px; letter-spacing:.06em; } .seg button.on{ background:var(--btn-gray); } .step.done .dot,.flow-step.done .fs-n{ background:var(--ui-green); border-color:var(--ui-green); } /* --- S4 会員特典（v6: 淡青磁リスト＋淡青ボタン） --- 背景色は Figma フレーム(38:731)から画素採取した #c3dfe6（9/14差分A#2）。 見出し下の区切り線は Figma になし（9/14差分A#3）。 */ .s4-screen{ background:#c3dfe6; } /* 260921 T180(A-1): ドロップシャドウ全廃。境界役だったためborderへ置換 */ .s4-card{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:18px 16px; margin-bottom:14px; } .s4-card > b{ display:block; font-family:var(--gothic); font-weight:700; font-size:15px; color:var(--ink); letter-spacing:.04em; margin-bottom:10px; } /* 260929 瀬野尾さん決定(Q1): 本文は12.5px以上を維持しつつ行間はFigma実測値1.7へ（旧1.9） */ .s4-card p{ font-size:13px; line-height:1.7; color:rgba(0,0,0,.62); } .s4-btn{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:46px; margin-top:14px; background:var(--teal); border:none; border-radius:10px; font-family:var(--gothic); font-weight:700; font-size:14px; color:#fff; letter-spacing:.14em; cursor:pointer; } .s4-btn:active{ filter:brightness(.94); } .s4-btn .ar{ position:absolute; right:16px; } .s4-badge{ display:block; margin-top:14px; padding:11px; text-align:center; border:1.5px solid var(--teal); border-radius:10px; font-family:var(--gothic); font-weight:700; font-size:14px; color:#4d97a8; letter-spacing:.06em; } /* --- S5 ご祈祷（v6: 淡緑リスト＋緑ボタン） --- */ .s5-screen{ background:#d1e7d3; } /* 260921 T180(A-1): ドロップシャドウ全廃。境界役だったためborderへ置換 */ .s5-card{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:18px 16px; margin-bottom:16px; } .s5-card .ph{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; } /* 260929 Figma文字設定の照合(§4-6, S5祈祷カード): サイズ17px・letter-spacing .05emへ */ .s5-card .ph b{ font-family:var(--gothic); font-weight:700; font-size:17px; letter-spacing:.05em; color:var(--ink); } /* 260929 Figma文字設定の照合(§8): 金額表示にOpen Sansの指定なし（Figma要求はS2会員番号・有効期限の2箇所のみ）のため他画面共通のZen Kaku Gothic Newへ揃える */ .s5-card .ph .price{ font-family:var(--gothic); font-weight:700; font-size:14px; color:var(--ink); } /* 260929 瀬野尾さん決定(Q1): 行間をFigma実測値1.8へ（サイズ13pxは据え置き） */ .s5-card p{ font-size:13px; line-height:1.8; color:rgba(0,0,0,.55); margin-top:8px; } .s5-btn{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:46px; margin-top:14px; background:var(--ui-green); border:none; border-radius:10px; font-family:var(--gothic); font-weight:700; font-size:14px; color:#fff; letter-spacing:.14em; cursor:pointer; } .s5-btn:active{ filter:brightness(.94); } .s5-btn .ar{ position:absolute; right:16px; } /* 261020: 2行のボタン（授与所の一般会員向け）。2行目は小さく、矢印と重ならないよう左右に余白 */ .s5-btn--2line{ padding:8px 40px; line-height:1.45; text-align:center; } .s5-btn--2line .s5-btn-tx small{ display:block; font-size:12.5px; font-weight:500; letter-spacing:.06em; } .s5-screen .stores-note{ background:transparent; border:none; color:rgba(0,0,0,.55); text-align:center; } /* --- S7 祭事カレンダー（v6: 暖灰リスト＋灰茶ボタン） --- */ .s7-screen{ background:#e1dbd9; } .s7-month{ display:flex; align-items:baseline; gap:8px; margin:6px 2px 10px; } /* 260929 Figma文字設定の照合(§5, S7月見出し): サイズ22px・letter-spacing .06emへ */ .s7-month b{ font-family:var(--gothic); font-weight:700; font-size:22px; letter-spacing:.06em; color:var(--ink); } .s7-month small{ font-size:12.5px; color:rgba(0,0,0,.45); letter-spacing:.1em; } /* 9/14 Figma差分A#8: 月見出し「6月 水無月」右の横罫線 */ .s7-month-line{ flex:1; height:1px; background:rgba(0,0,0,.12); margin-left:4px; align-self:center; } /* 260921 T180(A-1): ドロップシャドウ全廃。境界役だったためborderへ置換 */ .s7-card{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:16px; margin-bottom:14px; overflow:hidden; } .s7-card-row{ display:flex; gap:14px; } .s7-card .dt{ flex:0 0 40px; text-align:center; } /* 260929 Figma文字設定の照合(§8): 日付数字にOpen Sansの指定なし（Figma要求はS2会員番号・有効期限の2箇所のみ）のためZen Kaku Gothic Newへ。サイズもFigma実測19pxへ */ .s7-card .dt b{ display:block; font-family:var(--gothic); font-weight:700; font-size:19px; color:#8D7B78; line-height:1.1; } .s7-card .dt small{ font-size:12.5px; color:rgba(0,0,0,.5); } .s7-card .bd{ flex:1; min-width:0; } /* 260929 Figma文字設定の照合(§4-6, S7イベント名): サイズ15px・letter-spacing .03emへ */ .s7-card .bd b{ font-family:var(--gothic); font-weight:700; font-size:15px; letter-spacing:.03em; color:var(--ink); } /* 260929 瀬野尾さん決定(Q1): 行間をFigma実測値1.6へ（サイズ12.5pxは可読性下限のため維持） */ .s7-card .bd p{ font-size:12.5px; line-height:1.6; color:rgba(0,0,0,.55); margin-top:4px; } .s7-btn{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:40px; margin-top:10px; background:#b3a4a1; border:none; border-radius:8px; font-family:var(--gothic); font-weight:700; font-size:13px; color:#fff; letter-spacing:.14em; cursor:pointer; } .s7-btn:active{ filter:brightness(.94); } .s7-btn .ar{ position:absolute; right:14px; } /* --- S7 行事サムネイル・横スワイプギャラリー（LIFF幅=430px系で崩れない設計） --- */ /* 261022 瀬野尾さん指示: 画像はカードの上端・左右まで広げる（角丸は .s7-card の overflow:hidden で切り取る）。黒帯を出さないよう cover */ .s7-thumb{ width:calc(100% + 32px); margin:-16px -16px 12px; border-radius:0; overflow:hidden; background:#eee; } .s7-thumb img{ display:block; width:100%; height:200px; object-fit:cover; background:#eee; cursor:zoom-in; } .s7-gallery{ position:relative; margin-left:-16px; margin-right:-16px; width:calc(100% + 32px); border-radius:0; margin-top:-16px; margin-bottom:12px; } .s7-gallery-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .s7-gallery-track::-webkit-scrollbar{ display:none; } .s7-gallery-slide{ flex:0 0 100%; scroll-snap-align:start; } .s7-gallery-slide img{ display:block; width:100%; height:200px; object-fit:cover; background:#eee; cursor:zoom-in; } .s7-gallery-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px; } .s7-dot{ width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.55); } .s7-dot.on{ background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); } /* --- S10 厄年・方位診断（v6: 淡橙×橙 #f89059） --- */ .s10-screen{ background:#fcd3bd; } /* 260929 Figma文字設定の照合(§4-5): キッカーのletter-spacingは画面ごとにFigma実測値 */ .s10-screen .kicker{ color:#c2551a; letter-spacing:.2em; } .s10-screen .kicker::before{ background:currentColor; } .s10-screen .btn-sumi{ background:#f89059; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; } .s10-screen .btn-gold{ background:#f89059; } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったためborderへ置換 */ .s10-screen .diag-result{ background:#fff; border:1px solid var(--line-soft); border-radius:14px; text-align:center; } .s10-screen .diag-result .dr-lab{ color:var(--ink); font-weight:700; } /* 260929 Figma文字設定の照合(§6-2 K): letter-spacingをFigma実測値.1emへ戻す（旧.3emは基本形L532と食い違っていた） */ .s10-screen .diag-result .dr-main{ color:#f89059; font-size:34px; letter-spacing:.1em; } /* 「厄年ではありません」など長文: 375px 幅でも1行に収める（上の34px/.1emを上書き） */ .s10-screen .diag-result .dr-main--long{ font-size:clamp(15px, 4.4vw, 21px); letter-spacing:.06em; white-space:nowrap; } .s10-screen .diag-result .dr-sub{ color:rgba(0,0,0,.5); } .s10-screen .diag-result .dr-age{ background:#fff; color:#f89059; border:1.5px solid #f89059; border-radius:999px; font-weight:700; } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったためborderへ置換 */ .s10-screen .kichi{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; } .s10-screen .kichi .kd{ color:var(--ink); } .s10-screen .kichi .ktag{ background:transparent; border:none; color:var(--ink); font-weight:700; } .s10-screen .field input, .s10-screen .field select{ background-color:#fff; border-color:transparent; } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったためborderへ置換 */ .s10-screen .honmei-star{ background:#fff; border:1px solid var(--line-soft); } .s10-screen .honmei-star .hs-lab{ color:rgba(0,0,0,.5); } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったため各バリアントへborderを付与 */ .s10-screen .hoi-chip--kichi{ background:#fff; border:1px solid var(--line-soft); color:#f89059; } .s10-screen .hoi-chip--kyo{ background:#fff; border:1px solid var(--line-soft); color:#c2551a; } /* 260918: 厄年・方位診断の説明文。従来は .flow-note（11px・中央寄せ・淡色）で 色地の上に直接置いていたため読みづらかった。白カードに載せて本文として読める サイズ・行間にする。ボタンは結果全体で1本に集約している。 */ /* 260921 T180(A-1): ドロップシャドウ全廃。境界役だったためborderへ置換 */ .diag-note{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:13px 15px; margin:10px 0; font-size:14px; line-height:1.9; color:var(--sumi); text-align:left; } .diag-note + .diag-note{ margin-top:8px; } .s10-screen .diag-note{ background:#fff; border:1px solid var(--line-soft); } /* --- S11 お悩み相談（v6: 淡桃×桃 #e66ba0） --- */ .s11-screen{ background:#fae0eb; } .s11-screen .kicker{ color:rgba(0,0,0,.5); letter-spacing:.16em; } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったためborderへ置換 */ .s11-screen .consult-state{ background:#faf7f6; border:1px solid var(--line-soft); border-radius:14px; } .s11-screen .consult-state.available{ border-left:none; } .s11-screen .consult-state.available .st-main{ color:#e66ba0; } .s11-screen .btn-gold{ background:#e66ba0; border-radius:12px; } .s11-screen .btn-disabled{ background:#f4bdd5; color:#fff; border:none; border-radius:12px; } .s11-screen .btn-gold{ position:relative; } .s11-screen .btn-gold .ar{ position:absolute; right:16px; } /* --- S13 アカウント切替（v6: 淡青#d3dfef×青#91afd7） --- */ .s13-screen{ background:#d3dfef; } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったためborderへ置換 */ .s13-screen .seg{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:5px; } .s13-screen .seg button{ font-family:inherit; color:#a3a7af; letter-spacing:.12em; } .s13-screen .seg button.on{ background:#91afd7; color:#fff; } .s13-screen .acct-card{ background:#fff; border:1.5px solid #b9cbe4; color:var(--ink); } .s13-screen .acct-card .ac-role{ font-family:inherit; font-weight:700; color:#c8384a; } .s13-screen .acct-card .ac-name{ font-family:inherit; color:var(--ink); } .s13-screen .acct-card .ac-no{ color:#6b7280; } .s13-screen .acct-card .ac-meta{ border-top:none; } .s13-screen .acct-card .ac-meta div small{ color:#6b7280; } .s13-screen .acct-card .ac-meta div b{ font-family:inherit; color:var(--ink); } .s13-screen .btn-sumi{ background:#91afd7; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; position:relative; } .s13-screen .btn-sumi .ar{ position:absolute; right:16px; } .s13-screen .corp-meta{ background:#fff; border:none; } .s13-screen .corp-note{ background:#fff; border:none; color:#7d3328; } .s13-screen .acct-note{ background:#fff; border:none; color:#4b5563; } /* --- 入会フロー（v6: 淡灰#f5f5f5×灰#6b7280×緑#8dc391） --- 背景色はS1（下記 .s1-screen）と同値のため統合済み。子孫ルール（.confirm-list等）は .flow-screen 限定で.s1-screenには波及しないため統合しても影響なし（確認済み）。 */ .flow-screen, .s1-screen{ background:#f5f5f5; } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったためborderへ置換 */ .flow-screen .confirm-list{ background:#fff; border:1px solid var(--line-soft); border-radius:14px; } .flow-screen .confirm-row .cr-v{ font-family:inherit; color:var(--ink); } .flow-screen .info-strip{ background:#f2ebec; border:none; border-radius:12px; color:#8d909b; } .flow-screen .info-strip b{ color:#c8384a; display:block; margin-bottom:4px; } .flow-screen .btn-gold,.flow-screen .btn-sumi{ background:#6b7280; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; position:relative; } .flow-screen .btn-gold .ar,.flow-screen .btn-sumi .ar{ position:absolute; right:16px; } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったためborderへ置換 */ .flow-screen .apply-card{ background:#fff; border:1px solid var(--line-soft); border-radius:14px; } .flow-screen .apply-card .ac-no b{ font-family:inherit; color:var(--ink); } .flow-screen .flow-step .fs-n{ background:#fff; border:1.5px solid #d5d7db; color:#a3a7af; } .flow-screen .flow-step.done .fs-n{ background:#8dc391; border-color:#8dc391; color:#fff; } .flow-screen .flow-step.now .fs-n{ background:#fff; border-color:#8dc391; color:#8dc391; } .flow-screen .flow-step.now .fs-b b{ color:var(--ink); } .flow-screen .flow-step:not(:last-child)::before{ background:#e4e6e9; } .flow-screen .price{ color:var(--ink); } .flow-screen .am-k{ white-space:nowrap; } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったためborderへ置換 */ .flow-screen .amount-box{ background:#fff; border:1px solid var(--line-soft); border-radius:14px; } .flow-screen .amount-box .am-v{ font-family:inherit; color:var(--ink); } .flow-screen .amount-box .am-row.total .am-v{ color:var(--ink); font-size:24px; } .flow-screen .secure-note{ background:#f7f7f6; border:none; border-radius:12px; } .flow-screen .secure-note .sn-mark{ font-family:inherit; color:#8d909b; } .flow-screen .flow-note{ color:#8d909b; line-height:1.9; } /* 完了A（署名グラデ全面） */ .flowA-screen{ background:var(--bg-img) center/cover; } .flowA-hero{ text-align:center; padding:40px 10px 30px; } .flowA-hero .fa-crest{ width:150px; height:110px; } .flowA-hero h3{ font-size:17px; font-weight:700; color:#fff; letter-spacing:.08em; line-height:2; margin-top:60px; } .flowA-screen .btn-gold{ background:#fff; color:#6b7280; border:none; border-radius:12px; letter-spacing:.14em; position:relative; } .flowA-screen .btn-sumi{ background:transparent; color:#fff; border:1.5px solid #fff; border-radius:12px; letter-spacing:.14em; position:relative; } .flowA-screen .btn-gold .ar,.flowA-screen .btn-sumi .ar{ position:absolute; right:16px; } /* --- 夏催事（v6: 淡灰#f5f5f5×灰#6b7280×薄赤#f2ebec×薄ベージュ#faf7f6） --- */ .natsu-screen{ background:#f5f5f5; } /* 261006 祈祷予約（空き状況・申込・完了）は祈祷の入口 S5 と同じ緑。行事（EVENT）は従来のグレーのまま */ .natsu-screen.pray-screen{ background:#d1e7d3; } /* 260918: 予約系画面（グレー地）の日時キッカーが朱赤(--kin-deep #b12634)で浮いていた。 Figma では黒系のため黒インクに。添えの罫線も currentColor に揃える。 */ .natsu-screen .kicker{ color:var(--sumi); letter-spacing:.3em; } .natsu-screen .kicker::before{ background:currentColor; } .natsu-screen .event-hero{ background:#faf7f6; border:none; } .natsu-screen .event-hero .eh-tag{ font-family:inherit; color:var(--ink); } .natsu-screen .event-hero h3{ font-family:inherit; color:var(--ink); } .natsu-screen .event-hero .eh-date{ font-family:inherit; color:var(--ink); font-weight:700; } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったためborderへ置換 */ .natsu-screen .ticket-type{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; } .natsu-screen .ticket-type .tt-body b{ font-family:inherit; } .natsu-screen .ticket-type .tt-price{ font-family:inherit; color:var(--ink); } .natsu-screen .ticket-type.onsite{ background:#f2ebec; } .natsu-screen .btn-gold,.natsu-screen .btn-sumi{ background:#6b7280; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; } .natsu-screen .bulk-note{ background:#f2ebec; border:none; border-radius:12px; color:#8d909b; } .natsu-screen .bulk-note b{ color:var(--ink); display:block; margin-bottom:3px; } /* 261025 見出し（b）を block にしているので、直後の
が空行になる（キャンセル規定・お支払いの注釈）。その
を消して詰める */ .natsu-screen .bulk-note b + br{ display:none; } .natsu-screen .stepper{ border:none; gap:8px; overflow:visible; } .natsu-screen .stepper button{ background:#fff; border:1.5px solid #d5d7db; border-radius:50%; color:#6b7280; } .natsu-screen .stepper .qty{ font-family:inherit; } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったためborderへ置換 */ .natsu-screen .amount-box{ background:#fff; border:1px solid var(--line-soft); border-radius:14px; } .natsu-screen .amount-box .am-v{ font-family:inherit; color:var(--ink); } .natsu-screen .amount-box .am-row.total .am-v{ color:var(--ink); font-size:24px; } /* 261025 FigJam C10: background の一括指定だと .field select の▼（background-image）まで消えてプルダウンに見えない。色だけ指定する */ .natsu-screen .field input, .natsu-screen .field select{ background-color:#fff; border-color:transparent; } .natsu-screen .ticket-stub{ background:#faf7f6; border:none; } .natsu-screen .ticket-stub .ts-name{ font-family:inherit; color:var(--ink); } .natsu-screen .ticket-stub .ts-meta{ color:#8d909b; } .natsu-screen .ticket-stub .ts-code{ border-top:2px dashed #e5d9d5; } .natsu-screen .ticket-stub .ts-code small{ color:#b0a596; } .natsu-screen .ticket-stub .ts-code b{ font-family:inherit; color:var(--ink); } .natsu-screen .cache-note{ background:#f6f6f5; border:none; border-radius:12px; color:#8d909b; } .natsu-screen .stores-note{ color:#8d909b; } /* --- 状態画面（v6: S2会員証ベース＋状態ボックス#f5f5f5×赤#c8384a） --- */ .fs2-state{ background:#f5f5f5; border-radius:14px; padding:16px 20px; margin-top:16px; } .fs2-state .state-pill{ display:block; text-align:center; border:1.5px solid #c8384a; color:#c8384a; border-radius:10px; padding:9px; font-size:14px; font-weight:700; letter-spacing:.06em; margin-bottom:14px; } /* 状態別の配色: warn=休会中(琥珀) / alert=期限切れ・失効(赤=既定) / mute=手続き中(灰) */ .fs2-state .state-pill.state-warn{ border-color:#b8860b; color:#8a6508; background:#fdf6e3; } .fs2-state .state-pill.state-mute{ border-color:#9e9e9e; color:#6f6f6f; background:#f0efec; } .fs2-state .state-pill.state-alert{ background:#fdf0f1; } .fs2-state .st-rows{ display:flex; } .fs2-state .st-rows > div{ flex:1; } .fs2-state small{ font-size:14px; color:rgba(0,0,0,.55); font-weight:500; } /* 260929 Figma文字設定の照合(§5, S2状態値): サイズ16pxへ（有効期限の値は下でOpen Sansへ上書き。§Q3） */ /* 260929 実機確認で判明: display:flexのまま和暦テキスト＋を入れると、 アイコンが無いのに flex アイテム化されて折り返してしまった。white-space:nowrap で 1行に固定する（svgアイコンを使う箇所は現状無いが、あってもnowrapは影響しない）。 */ .fs2-state .st-rows b{ display:flex; align-items:center; gap:6px; margin-top:8px; font-weight:700; font-size:16px; color:#141414; white-space:nowrap; } .fs2-state .st-rows b svg{ width:18px; height:18px; flex:0 0 18px; } .fs2-state .st-rows b.gray{ color:#9e9e9e; } /* 瀬野尾さん決定(Q3): renewal等の状態カードでも「有効期限」は2番目のdiv固定（cert.html参照）のためnth-childで区別。 260929 レビュー指摘(推奨): 上のfs2-infoと同じく、和暦の数字部分（wareki_numspanが 付与する.num）だけOpen Sansにする。漢字部分は.fs2-state .st-rows bの既定のまま。 */ /* 260929 実機確認で判明: .fs2-info側と同じ理由で16pxへ縮小（上のコメント参照） */ .fs2-state .st-rows > div:nth-child(2) b{ font-size:16px; } .fs2-state .st-rows > div:nth-child(2) b .num{ font-family:"Open Sans",var(--gothic); font-weight:600; } .fs2-card .state-tag{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; border:1.5px solid #1a1714; color:#1a1714; padding:5px 20px; font-weight:700; font-size:14px; letter-spacing:.14em; z-index:3; white-space:nowrap; } .fs2-card .dimmer{ position:absolute; inset:0; background:rgba(30,28,26,.55); z-index:2; } .proc-card{ background:#fff; border:1.5px solid #c8384a; border-radius:14px; padding:20px; margin-top:16px; } .proc-card .pc-title{ text-align:center; color:#c8384a; font-weight:700; font-size:15px; letter-spacing:.08em; margin-bottom:12px; } .proc-card p{ font-size:13px; font-weight:700; color:var(--ink); line-height:1.9; } .btn-red,.btn-gray{ display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; color:#fff; border:none; border-radius:12px; font-weight:700; font-size:14.5px; letter-spacing:.14em; position:relative; cursor:pointer; font-family:inherit; } .btn-red{ background:#c8384a; margin-top:14px; } .btn-gray{ background:#6b7280; } .btn-red .ar,.btn-gray .ar{ position:absolute; right:16px; } .flow-screen .set-list{ background:#fff; border-radius:13px; } .flow-screen .danger-zone{ border:1.5px solid #e0b9be; } .flow-screen .danger-zone .set-row b{ color:var(--ink); } .flow-screen .set-row .sr-tx b{ font-family:inherit; } .flow-screen .set-row .sr-arr{ color:#a3a7af; } .flow-screen .switch{ background:#8dc391; } .flow-screen .switch.off{ background:#c8ccd2; border:none; } .flow-screen .switch.off i{ background:#5b6472; } .flow-screen .sg-title{ color:rgba(0,0,0,.55); } .flow-screen .modal-hint{ color:#8d909b; } /* --- 反映待ち（v6: 淡灰#f5f5f5×薄ベージュ#faf7f6×緑#3f8f4f） --- */ .pend-screen{ background:#f5f5f5; } .pend-screen .kicker{ color:rgba(0,0,0,.5); letter-spacing:.48px; } .pend-screen .pending-card{ background:#faf7f6; border:none; border-radius:16px; color:var(--ink); } .pend-screen .pending-card b{ font-family:inherit; color:var(--ink); } .pend-screen .pending-card p{ color:#8d909b; } .pend-screen .pending-card .dots i{ background:#1a1714; animation:none; } .pend-screen .pending-card .dots i:nth-child(2){ background:#ce7a81; } .pend-screen .pending-card .dots i:nth-child(3){ background:#e1aeb2; } .pend-screen .sync-strip{ background:#fff; border:none; border-radius:12px; } .pend-screen .sync-strip .ss-dot{ background:#3f8f4f; } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったためborderへ置換 */ .pend-screen .resv-row{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; } .pend-screen .resv-row .rr-body b{ font-family:inherit; color:var(--ink); } .pend-screen .pill-gold{ background:#fff; color:var(--ink); border:1px solid #d5d7db; } .pend-screen .pill-ok{ background:#e8f1e9; color:#3f8f4f; border:none; } /* --- 退会モーダル（v6: 白×薄赤#fbf2f3×赤#c8384a×灰ボタン#6b7280） --- */ .modal-sheet{ background:#fff; } .modal-sheet h3{ font-family:inherit; color:var(--ink); } .modal-sheet .ms-warn{ background:#fbf2f3; border:1.5px solid #e0b9be; border-radius:14px; } .modal-sheet .ms-warn .mw-row{ color:#c8384a; } .modal-sheet .ms-warn .mw-row .mw-k{ color:#c8384a; font-family:inherit; } .modal-sheet{ border-top:none; } .flow-screen .set-row .sr-tx small{ color:#8d909b; } .modal-sheet .btn-danger{ background:#6b7280; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; } .modal-sheet .btn-ghost{ background:#fff; color:var(--ink); border:1px solid #d5d7db; border-radius:12px; font-weight:700; letter-spacing:.14em; } .modal-sheet .btn-gold{ background:#6b7280; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; } /* --- S6 オンライン授与所（v6: クリーム#fbf0d5×金バッジ#d4ad52） --- */ .s6-screen{ background:#fbf0d5; } /* 261007 瀬野尾さん指示: S6 オンライン授与所のボタンは #F3C55D（白文字だと読みにくいため文字は墨色） */ .s6-screen .s5-btn{ background:#F3C55D; color:var(--ink); } /* 261024 瀬野尾さん指示: 授与所の「会員種別を変更する」ボタン（一般会員向け・s4-btn）も授与所の基調色にそろえる */ .s6-screen .s4-btn{ background:#F5B524; color:var(--ink); } .s6-note{ font-size:13px; font-weight:700; color:var(--ink); text-align:center; margin-bottom:16px; line-height:1.8; } /* カテゴリタブ（260920 A1: 横スクロール・sticky）。.screen が overflow-y:auto の スクロールコンテナのため、.pad 内先頭に置いて position:sticky; top:0 で効かせる。 */ .s6-tabs{ position:sticky; top:0; z-index:4; display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -20px 16px; padding:10px 20px; background:#fbf0d5; } .s6-tabs::-webkit-scrollbar{ display:none; } .s6-tab{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; min-height:40px; padding:0 16px; border-radius:999px; background:#fff8ec; border:1px solid #e9dcb8; color:var(--ink); font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; letter-spacing:.02em; } /* 260920 reviewer指摘: 白文字×#d4ad52 は約2.0:1でAA未達のため、地の金を 濃くして白文字とのコントラストを確保する（約5.0:1）。トンマナの金基調は維持。 */ /* 261024 FigJam B16（インテグ様指定）: 選択中のカテゴリ・「会員種別を変更する」は #F5B524（墨色文字）。10/24 の #F3C55D より優先 */ .s6-tab.is-active{ background:#F5B524; border-color:#F5B524; color:var(--ink); } .s6-screen .s4-card .flow-tag{ display:flex; margin:0 0 8px; } .s6-tab-cnt{ font-size:11px; font-weight:700; opacity:.75; } /* キーワード絞り込み（260920計画）。iOSズーム防止のためinputは16px以上を維持。 */ .s6-search{ display:flex; gap:8px; margin:0 0 8px; } .s6-search-input{ flex:1 1 auto; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid #e9dcb8; background:#fff8ec; color:var(--ink); font-size:16px; font-family:inherit; } .s6-search-btn{ flex:0 0 auto; min-height:40px; padding:0 18px; border-radius:999px; border:none; background:#8a6a1f; color:#fff; font-size:14px; font-weight:700; letter-spacing:.02em; } .s6-search-clear{ display:inline-block; font-size:12.5px; color:#6b5a20; margin:0 0 16px; text-decoration:underline; } /* 一覧見出し（すべての授与品／カテゴリ名／検索結果）。新着見出しとトンマナを揃える。 */ .s6-list-title{ font-size:16px; margin-bottom:10px; } .s6-list-cnt{ font-size:13px; font-weight:700; opacity:.7; } /* もっと見るページャー（260920計画: 24件ずつ） */ .s6-more-wrap{ text-align:center; margin:18px 0 6px; } .s6-more-btn{ display:inline-block; min-height:40px; line-height:40px; padding:0 22px; border-radius:999px; background:#fff8ec; border:1px solid #e9dcb8; color:var(--ink); font-size:13px; font-weight:700; text-decoration:none; letter-spacing:.02em; } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったためborderへ置換 */ .s6-screen .ec-card{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; } .s6-screen .ec-thumb{ background:#f1efec; } .s6-screen .ec-noimg{ color:#b0a898; } .s6-badge{ display:inline-block; background:#d4ad52; color:#fff; font-size:11px; font-weight:700; padding:4px 12px; border-radius:999px; letter-spacing:.04em; } .s6-screen .ec-info b{ color:var(--ink); } .s6-screen .ec-info .price{ color:var(--ink); font-weight:700; } a.ec-card{ display:block; text-decoration:none; color:inherit; } div.ec-card{ cursor:default; } .ec-thumb img{ width:100%; height:100%; object-fit:cover; } .ec-card.ec-soldout .ec-thumb img{ opacity:.5; } .ec-sold-label{ position:absolute; top:9px; right:9px; background:rgba(0,0,0,.55); color:#fff; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; letter-spacing:.04em; } /* 授与の条件ラベル（260920: 会員限定＝非表示ではなくラベルで案内する） */ /* 260920 reviewer指摘: #a08a4a 10.5px は背景#fbf0d5に対し約3.0:1でAA未達。 フォントサイズを11px以上にし、インクを濃くして約6.0:1を確保する。 */ .s6-condition{ display:block; font-size:12.5px; color:#6b5a20; margin-top:3px; letter-spacing:.02em; } /* 会員価格が未確定な会員種別への注記（makeshop 会員価格API未開放のため） */ .s6-price-note{ font-size:12.5px; color:#8d7a4a; background:#fff8ec; border:1px solid #e9dcb8; border-radius:10px; padding:9px 12px; margin:0 0 16px; line-height:1.7; } /* 新着の授与品（260920 A1: 横スクロールストリップ、makeshop_code 降順） */ .s6-new{ margin-bottom:20px; } .s6-new-title{ font-size:16px; margin-bottom:10px; } .s6-new-strip{ display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity; margin:0 -20px; padding:0 20px 4px; } .s6-new-strip::-webkit-scrollbar{ display:none; } .s6-new-card{ flex:0 0 132px; width:132px; scroll-snap-align:start; } .s6-new-card .ec-info{ padding:8px 9px 10px; } .s6-new-card .ec-info b{ font-size:12.5px; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; } .s6-new-card .ec-info .price{ font-size:13px; margin-top:5px; } /* オンライン授与所（makeshop）への案内注記 */ /* 260920 reviewer指摘: #9b9282 は背景#fbf0d5に対し約2.9:1でAA未達。 インクを濃くして約5.0:1を確保する（文言・レイアウトは変更しない）。 */ .s6-footer-note{ font-size:12.5px; color:#6e6558; text-align:center; margin-top:16px; line-height:1.7; } /* --- S8 限定情報（v6: 淡紫#e4d5e8×紫#bb96c5） --- */ .s8-screen{ background:#e4d5e8; } /* 260921 T180(A-1): ドロップシャドウ全廃。border:noneで境界役だったためborderへ置換 */ .s8-screen .media-card,.s8-screen .letter-card{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; } .s8-screen .media-thumb{ background:#d5d5d5; border-radius:0; } .s8-screen .media-thumb .play{ background:#bb96c5; } .s8-screen .ribbon .pill{ background:#bb96c5; color:#fff; border:none; border-radius:999px; } .s8-screen .lc-meta{ color:var(--ink); font-weight:700; } .s8-screen .media-info b,.s8-screen .lc-body b{ color:var(--ink); } /* --- S9 会員コミュニティ（v6: 淡緑#b2d2b9×深緑#51815a） --- */ .s9-screen{ background:#b2d2b9; } .s9-note{ font-size:15px; font-weight:700; color:var(--ink); text-align:center; line-height:2; margin-bottom:16px; } /* 260921 T180(A-1): ドロップシャドウ全廃。境界がなくなるためborderを付与 */ .s9-card{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:18px 16px; margin-bottom:16px; } /* 260929 Figma文字設定の照合(§4-6, S9): letter-spacing .03emを追加 */ .s9-title{ display:block; font-family:var(--gothic); font-weight:700; font-size:15px; letter-spacing:.03em; color:var(--ink); margin-bottom:10px; } .s9-list{ list-style:none; padding:0; margin:0; } .s9-list li{ position:relative; padding-left:14px; font-size:13px; line-height:1.9; color:rgba(0,0,0,.65); margin-bottom:4px; } .s9-list li::before{ content:"・"; position:absolute; left:0; } /* 9/14 Figma差分A#13: ニックネーム注意カード（!丸アイコン＋赤見出しは横並び、 本文・例は縦積み。旧 .s9-warn/.wm/.s9-body（未使用の重複定義）はここに統合した） 9/17: A#13対応時に誤って背景・枠線(淡赤)まで追加していたが、Figma(s9.png)は 他カードと同じ白背景・同じ枠線のため削除。.s9-card の指定に委ねる。 赤いのは .wm（!アイコン）と b（見出し）のみで、これは変更しない。 */ .s9-warn .wm-head{ display:flex; align-items:center; gap:7px; margin-bottom:8px; } .s9-warn .wm{ flex:none; width:18px; height:18px; border-radius:50%; border:2px solid #d0342c; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#d0342c; line-height:1; } .s9-warn b{ font-family:var(--gothic); font-weight:700; font-size:14px; color:#c8384a; } .s9-warn p{ font-size:13px; line-height:1.9; color:rgba(0,0,0,.65); } .s9-warn small{ display:block; font-size:12.5px; color:rgba(0,0,0,.5); margin-top:8px; } .s9-oc{ text-align:center; } .s9-lead{ font-size:13px; line-height:1.9; color:rgba(0,0,0,.45); margin:8px 0 12px; } /* 260929 Figma文字設定の照合(§4-21): letter-spacingをFigma実測値.12emへ */ .s9-keyword{ font-family:var(--gothic); font-weight:700; font-size:26px; color:#51815a; letter-spacing:.12em; margin-bottom:16px; } .s9-btn{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; background:#51815a; border:none; border-radius:999px; font-family:var(--gothic); font-weight:700; font-size:14px; color:#fff; letter-spacing:.14em; cursor:pointer; } .s9-btn:active{ filter:brightness(.94); } .s9-btn .ar{ position:absolute; right:20px; } /* --- S8-記事 お便り詳細（v6: S8の淡紫パレットを継承） --- */ /* 260921 T180(A-1): ドロップシャドウ全廃。境界がなくなるためborderを付与 */ .s8-article .article-hero{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:18px 16px; margin:0 0 16px; } .s8-article .article-hero .ah-meta{ color:#9b6fae; font-weight:700; } .s8-article .article-hero h1{ color:var(--ink); } .s8-article .article-img{ background:#d5d5d5; border:none; border-radius:12px; margin-bottom:16px; } .s8-article .ec-noimg{ color:#9b6fae; } .s8-article .ec-noimg::before{ border-color:#bb96c5; background:linear-gradient(135deg,transparent 46%,#bb96c5 46% 54%,transparent 54%); } /* 260921 T180(A-1): ドロップシャドウ全廃。境界がなくなるためborderを付与 */ .s8-article .article-body{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:18px 16px; margin:0 0 16px; } .s8-article .article-body h3{ color:#9b6fae; } .s8-article .article-body p{ color:rgba(0,0,0,.65); } .s8-article .article-share{ background:#bb96c5; color:#fff; border:none; border-radius:999px; margin-top:0; font-weight:700; text-align:center; cursor:pointer; } /* --- S12 各種設定（v6: 緑トグル） --- */ .switch{ background:var(--ui-green); } .switch.off{ background:#c3c8cf; border:none; } /* --- S1 入会フォーム（v6: 署名グラデヒーロー＋説明会注記） --- */ /* 260921 T180(A-12): Figmaフレーム背景は#f5f5f5だが.screenは全画面共有のため S1限定の.s1-screenクラス（plan_list.htmlの.screenに付与）でのみ上書きする。 背景値そのものは .flow-screen（:1320）と統合済み。 */ /* 261020 「必須」「任意」の位置・大きさ・括弧なしの表記は上の .field label .req / .opt で全画面共通。 色だけは 260929 瀬野尾さん決定(Q5)「必須の色は画面ごとにFigmaどおり」に従い、次の2画面で元のFigma指定に戻す （S1=緑は基底に統一済み）。厄年診断=#f89059（画面テーマのオレンジと同系）、夏催事=黒。 夏催事の黒は.natsu-screen全体（17テンプレート共有）ではなく.natsu-req-black（行事=EVENT種別の申込フォーム）限定。 任意（.opt）の色は全画面グレーのまま。 */ .s10-screen .field label .req{ color:#f89059; } .natsu-req-black .field label .req{ color:#1a1714; } /* 260921 T180(A-7): Figmaはグラデーションをヘッダー直下から1049px(幅390px比)敷き、 ヒーロー+会員種別カード5枚の全体を覆う。.s1-heroの帯だけに敷いていたのを、 .s1-screen::beforeで比率固定の全面背景に変更（端末幅が変わっても390:1049を保つ）。 コントラスト変更はしない（グラデ自体の色・敷く範囲を広げるのみ）。 */ .s1-screen{ position:relative; } /* 260924 Figma差異: 比率固定(390:1049)だと会員種別カードの方が長く（390px幅でカード下端 1278px）、背景が途中で切れていた。plan_list.html のスクリプトがカード群の下端までの 高さを --s1-bg-min に入れ、min-height で比率より長い場合も最後のカードまで覆う。 */ .s1-screen::before{ content:""; position:absolute; top:0; left:0; width:100%; aspect-ratio:390/1049; min-height:var(--s1-bg-min, 0px); background:var(--bg-img) center/cover no-repeat; z-index:0; pointer-events:none; } .s1-screen > *{ position:relative; z-index:1; } .s1-hero{ position:relative; background:none; text-align:center; padding:34px 20px 22px; } /* 260921 T180(A-1): 鈴木様指摘によりロゴ・文字のドロップシャドウを全廃 */ .s1-hero .s1-crest{ width:120px; height:88px; } .s1-hero .t{ margin-top:6px; font-family:var(--gothic); font-weight:700; font-size:18px; color:#fff; letter-spacing:.3em; } .s1-pad{ padding-top:18px; } /* 260924 T180(A-4): Figmaの注記色は#c8384aだが、9/15確定「赤・朱は使わない」方針により 既存のvar(--shu)（朱赤の警告色として既に運用中）のまま据え置く。サイズは12.5pxで 9/20可読性ポリシーの下限を満たすため変更なし（260929瀬野尾さん決定Q1で再確認）。 行間はFigma実測値1.7へ。 */ /* 261024 FigJam B6: 入会画面の受付開始予定の帯。センタリング・黒文字（朱赤の注釈にしない） */ .signup-reopen-banner{ margin:0 0 12px; font-size:12.5px; font-weight:700; color:#000; text-align:center; line-height:1.7; } /* 261025 FigJam B1: 赤文字にしない注釈（崇敬会員の※） */ .setsumei-note-plain{ display:block; margin-top:8px; font-size:12.5px; color:var(--muted); line-height:1.7; } .setsumei-note{ display:block; margin-top:8px; font-size:12.5px; font-weight:700; color:var(--shu); line-height:1.7; } /* --- リッチメニュー（v6: 署名グラデ地＋白丸角タイル＋カラーアイコン） --- */ /* サイズはコンテナ幅比例（cqw）: 実機390px幅時の Figma 比率を保ったままPCプレビューでも拡大 */ /* 260921 T180(A-1): ドロップシャドウ全廃（border:noneは写真地の意図のため維持） */ .rm-v6{ aspect-ratio:2500/1686; border:none; background:var(--bg-img) center/cover; gap:2.6cqw; padding:3cqw; display:grid; grid-template-rows:1fr 1fr; } .rm-guest{ grid-template-columns:1fr 1fr 1.15fr; } .rm-member{ grid-template-columns:1fr 1fr 1fr; } .rm-tile{ background:rgba(255,255,255,.94); border-radius:3.6cqw; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.2cqw; padding:2cqw; text-align:center; cursor:pointer; } .rm-tile b{ font-size:3.3cqw; font-weight:700; color:#141414; line-height:1.35; letter-spacing:.02em; } .rm-tile svg{ height:8cqw; width:auto; } .rm-tile .mp-ic{ height:9.5cqw; width:auto; } .rm-join{ grid-column:3; grid-row:1 / span 2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.8cqw; text-align:center; cursor:pointer; color:#fff; } /* 260921 T180(A-1): 鈴木様指摘によりロゴ・文字のドロップシャドウを全廃 */ .rm-join .rm-crest{ width:22cqw; height:16cqw; } .rm-join b{ font-size:4cqw; font-weight:700; line-height:1.5; letter-spacing:.06em; } .rm-join .ar{ font-weight:700; } .rm-tile:hover,.rm-join:hover{ filter:brightness(1.04); } /* --- S3 マイページ（v6: 種別カラーヒーロー＋ご縁リング＋アイコングリッド） --- */ /* 260914 レビュー指摘: マイページ背景をFigmaどおり#f5f5f5に（他画面へ波及させないためS3限定クラス）。 タイル(.s3-item)は白背景のまま。 */ /* 261026 実機指摘: 縮小版会員証の「会員状態・有効期限」（.fs2-info #f5f5f5）が画面の地と同化していたため、マイページの地だけ少し明るく。白のカード・タイルとの差も残る程度（他の画面の地・--bg-gray は変えない）。LINE内の上余白30pxもこの背景が下に敷かれる */ .screen.s3-screen{ background:#fdfdfd; } .s3-hero{ background:var(--rank); color:#fff; text-align:center; padding:24px 20px 96px; } /* 260911 Figma指摘: 円グラフのない種別（一般・崇敬・法人）は帯下の余白を詰める */ .s3-hero.s3-hero-noring{ padding-bottom:24px; } /* 260929 Figma文字設定の照合(§5, S3会員証ミニ): サイズ21px・letter-spacing .08emへ */ .s3-hero .s3-rank{ font-family:var(--gothic); font-weight:700; font-size:21px; letter-spacing:.08em; } /* 260929 瀬野尾さん決定(Q4修正): 氏名はFigmaどおり20px Medium・行高40。長い氏名・法人名は 省略記号(…)で切らず、front/templatetags/name_size.py が付与する.nm-size-*クラスで 段階的に文字サイズを下げて1行に収める（No.を押し出さないようflexで分離）。 */ .s3-hero .s3-nm{ margin-top:10px; font-size:14px; display:flex; align-items:baseline; justify-content:center; gap:4px; max-width:100%; } .s3-hero .s3-nm b{ font-family:var(--gothic); font-size:20px; font-weight:500; line-height:40px; letter-spacing:.06em; min-width:0; white-space:nowrap; } /* 260929 レビュー指摘(必須2): 最小段(12.5px)でも入りきらない極端に長い法人名を overflow:hiddenで黙って切っていたのは誤り（省略・欠落は不可）。最小段のときだけ 行を折り返し可能にし（親.s3-nmはflex-wrap:wrapで会員番号を次の行へ逃がす）、 それでも入らなければ名前自体も折り返す。 */ .s3-hero .s3-nm:has(> b.nm-size-12-5){ flex-wrap:wrap; row-gap:2px; } .s3-hero .s3-nm b.nm-size-12-5{ white-space:normal; line-height:1.3; overflow-wrap:break-word; } /* 瀬野尾さん決定(Q3): 会員証ミニの会員番号はZen Kaku Gothic New（Open Sansではない）。サイズもFigma実測15pxへ */ .s3-hero .s3-nm .no{ font-family:var(--gothic); font-weight:500; font-size:15px; color:rgba(255,255,255,.85); flex:0 0 auto; white-space:nowrap; } /* 260929 Figma実測は12pxだがtest_readability_0920の下限12.5pxを維持するため 12.5pxに据え置く（瀬野尾さん決定Q1） */ .s3-hero .s3-open{ display:inline-block; margin-top:10px; font-size:12.5px; font-weight:700; color:#fff; cursor:pointer; } .s3-ring-wrap{ display:flex; justify-content:center; margin-top:-78px; margin-bottom:10px; } /* 260911 Figma指摘: 固定一周ではなく継続月数÷120の進捗(--p、ビュー計算)で弧を描画する。 0%は全周グレー、100%で一周（従来の固定表示）になる。直径202px・太さ約7px（内側188px白円）。 */ .s3-ring{ position:relative; width:202px; height:202px; border-radius:50%; padding:7px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:conic-gradient(from 0deg, #f2c94c 0%, #a8d08d calc(var(--p, 0%) * .2), #7fb069 calc(var(--p, 0%) * .4), #f2994a calc(var(--p, 0%) * .6), #e8896b calc(var(--p, 0%) * .8), #f2c94c var(--p, 0%), #e5e1d8 var(--p, 0%) 100%); /* 260921 T180(A-1): ドロップシャドウ全廃（conic-gradient自体の縁で境界は視認可） */ } .s3-ring::after{ content:""; position:absolute; inset:7px; background:#fff; border-radius:50%; z-index:0; } .s3-ring > *{ position:relative; z-index:1; } /* 260929 Figma文字設定の照合(§5, S3リング中央): 太さBold(700)・サイズ14pxへ */ .s3-ring small{ font-size:14px; color:var(--ink); font-weight:700; } .s3-ring b{ font-family:var(--gothic); font-weight:700; font-size:25px; color:var(--ink); margin-top:2px; } .s3-ring b span{ font-size:18px; } .s3-ring b i{ font-style:normal; font-size:13px; margin-left:2px; } .s3-ring .tk{ display:inline-block; font-size:12.5px; font-weight:700; color:var(--ink); margin-top:2px; text-decoration:none; cursor:pointer; } /* 260911 Figma指摘: タイル寸法168x100・背景rgba(255,255,255,.94)・枠rgba(0,0,0,.09)・間隔11px・ラベル15px */ /* 261025 Q9: マイページの御朱印帳スライド。トラックの横送り・矢印・ドットは祭事カレンダーのギャラリー（.s7-gallery-*）と共通。幅は画面幅に合わせ、画像は16:9で切り取り */ /* 261026 FigJam 構成案: 授与品の枠は会員特典ページの画像（白背景・ドロップシャドウ込み）をそのまま見せる。枠は横長なので contain、題字は画像の下 */ .s3-gs{ position:relative; margin:4px 20px 14px; border-radius:14px; overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,.09); } .s3-gs-slide{ position:relative; display:block; flex:0 0 100%; min-width:0; scroll-snap-align:start; color:inherit; text-decoration:none; } .s3-gs-slide img{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; background:#fff; } .s3-gs-cap{ display:block; padding:2px 12px 28px; text-align:center; color:var(--ink); font-size:14px; letter-spacing:.08em; } .s3-gs .s7-dot{ background:rgba(0,0,0,.18); } .s3-gs .s7-dot.on{ background:var(--ink); box-shadow:none; } .s3-gs .s7-gallery-dots{ bottom:8px; } /* 261026 FigJam 構成案: マイページの区画（会員証・授与品・ご祈祷の予約・オンライン授与所）。色・角丸は既存の会員証・タイル・授与所の部品のものを使う */ .s3-sec{ margin:16px 20px; } .s3-sec-head{ margin:16px 20px 4px; } .s3-sec-head h2.sec{ margin-bottom:0; } .s3-cert-link{ display:block; color:inherit; text-decoration:none; } /* 261026 縮小版にも会員証画面と同じ種別色の帯（.fs2-top）を敷き、カードを帯に重ねる。画面幅いっぱいに広げ（区画の左右余白20pxぶん）、 高さ・食い込みは会員証画面（帯220px・食い込み150px）の0.75倍。カードの margin は zoom:.75 で縮むので、-150px → 実寸-112.5px（カードの半分） */ .s3-cert[data-first]{ margin-top:0; } .s3-cert .s3-cert-top{ height:165px; padding-top:15px; margin-inline:-20px; } /* LINE内は上端の30pxぶん帯を伸ばす（.in-liff-client .fs2-top.liff-top-band{height:250px} より後で、会員証画面と同じ 165+30） */ .in-liff-client .s3-cert .s3-cert-top.liff-top-band{ height:195px; } .s3-cert .fs2-card{ margin:-150px auto 0; width:350px; max-width:none; zoom:.75; } .s3-cert .fs2-info{ margin-top:12px; } .s3-pray-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; } /* 261026 実機指摘: 「交通安全車/祓」のように1〜2文字だけ次の行へ落ちないよう、名前を折り返してよい位置（「・」の直後・6文字以上は先頭4文字の後）で nowrap のかたまり（.s3-pray-w。front/templatetags/pray_name.py）に分け、かたまりの間でだけ折れるようにする。入りきるなら1行のまま。字間・余白は元のまま */ .s3-pray-btn{ background:rgba(255,255,255,.94); border:1px solid rgba(0,0,0,.09); border-radius:14px; min-height:56px; padding:6px 4px; display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; font-family:var(--gothic); font-weight:700; font-size:12.5px; line-height:1.35; letter-spacing:.02em; color:var(--ink); overflow-wrap:anywhere; } .s3-pray-t{ display:block; } .s3-pray-w{ white-space:nowrap; } .s3-sec-more{ display:block; margin-top:10px; text-align:right; font-size:12.5px; font-weight:700; color:var(--ink); text-decoration:none; } .s3-shop{ border-radius:14px; padding:14px 16px; } /* 261026 実機指摘: scroll-snap（start）が padding を無視して最初のカードを左端へ寄せていた。区画の内側の余白16pxぶんを scroll-padding でも空ける（授与所画面の .s6-new-strip は変えない） */ .s3-shop .s6-new-strip{ margin:0 -16px; padding:0 16px 4px; scroll-padding-inline:16px; } /* 261031 瀬野尾さん指摘: 開店前の予告（マイページの授与所の区画）の下に余白がない → 下の帯・リンクと離す */ .s3-shop [data-shop-open-notice]{ margin-bottom:12px; } /* 261031 瀬野尾さん指摘: 授与所ページで予告の「す。」だけが次の行に落ちる → 文中の空白（「授与所は」の後）でだけ折る。入らない時だけ文字の途中で折る（全画面共通） */ [data-shop-open-notice]{ word-break:keep-all; overflow-wrap:anywhere; } /* 261031 瀬野尾さん指示: 授与所ページ・マイページの開店前の予告を赤・太字で強調（パスワード画面は変えない）。折り返しは上の keep-all で「授与所は」の後の空白だけ */ [data-shop-open-notice].is-strong{ color:#c62828; font-weight:700; } [data-shop-open-notice] .nb{ display:inline-block; white-space:nowrap; } .s3-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; } /* 260921 T180(A-1): ドロップシャドウ全廃（既存borderで境界維持） */ .s3-item{ background:rgba(255,255,255,.94); border:1px solid rgba(0,0,0,.09); border-radius:14px; min-height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; } .s3-item.s3-locked{ opacity:.45; filter:grayscale(1); cursor:not-allowed; position:relative; pointer-events:none; } .s3-item.s3-locked::after{ content:attr(data-lock); font-size:10px; color:#6f6f6f; letter-spacing:.06em; margin-top:-4px; } .fs2-btn.fs2-btn-locked{ opacity:.5; filter:grayscale(1); cursor:not-allowed; pointer-events:none; } .s3-item .ic{ display:flex; align-items:center; gap:2px; height:32px; } .s3-item .ic svg{ height:30px; width:auto; display:block; } .s3-item b{ font-family:var(--gothic); font-weight:700; font-size:15px; color:var(--ink); letter-spacing:.04em; } /* ================================================================ 実装ページ層（05_コーディング）: ギャラリー用 .device 枠を外し、 1画面=1ページとしてスマホ全画面で表示するためのオーバーライド。 ================================================================ */ body.liff{ display:block; padding:0; margin:0; background:#ececeb; } body.liff .liff-app{ position:relative; max-width:430px; margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--kinari); overflow:clip; } body.liff .line-header{ position:sticky; top:0; z-index:20; flex:0 0 52px; } /* LINEアプリ内表示: ネイティブヘッダーと重複するため line-header を隠す （各 base.html の UA 判定スクリプトが html 要素に付与。PC等の外部ブラウザでは表示） */ .in-liff-client .line-header{ display:none; } /* 261022 再読み込み: LINEアプリ内は帯が無いので画面の上端・右端（幅430pxの枠の右端の内側）に丸ボタンを置く。 fixed にはせず、スクロールすると画面と一緒に流れる（ブラウザは帯の中の↻を使うので出さない）。 見出し・注意書きと重ならないよう、下の .screen の先頭にボタン分の余白を空ける */ .liff-reload-fab{ display:none; } .in-liff-client .liff-reload-fab{ display:flex; align-items:center; justify-content:center; position:absolute; z-index:30; top:3px; right:6px; width:40px; height:40px; padding:0; border-radius:50%; line-height:1; font-family:inherit; color:var(--sumi); background:rgba(255,255,255,.82); border:1px solid rgba(26,23,20,.28); cursor:pointer; } .liff-reload-fab svg{ display:block; width:22px; height:22px; } /* 261030 マイページへ戻る丸ボタン（LINEアプリ内だけ）。↻と同じ形で左上に置く */ .liff-home-fab{ display:none; } .in-liff-client .liff-home-fab{ display:flex; align-items:center; justify-content:center; position:absolute; z-index:30; top:3px; left:6px; width:40px; height:40px; border-radius:50%; text-decoration:none; color:var(--sumi); background:rgba(255,255,255,.82); border:1px solid rgba(26,23,20,.28); } .liff-home-fab svg{ display:block; width:22px; height:22px; } /* 決済の送信中は↻を押せなくする（reload_btn.js が disabled を付ける） */ .liff-reload-fab:disabled, .lh-reload:disabled{ opacity:.4; cursor:default; } /* 余白は「一番外側の .screen」に付け、その中の画面ごとの .screen（背景色を持つ側。front/base.html は二重構造）や 赤い見出し帯などの一番上の要素は、余白の分だけ上へ引き上げて背景を上端まで伸ばす（background は border の下まで塗られる）。 一番上が色付きの帯の画面はテンプレートで .liff-top-band を付ける。:has() は使わない（古い WebView 対策） */ .in-liff-client .liff-app > .screen{ padding-top:30px; } /* 261023 .pad を持たずカードを直に置く画面（エラー・例外系）で、↻ボタンがカードの角にかからないよう少し下げる */ .in-liff-client .liff-app > .screen > .card:first-child{ margin-top:16px; } .in-liff-client .liff-app > .screen > .screen, .in-liff-client .liff-top-band{ margin-top:-30px; border-top:30px solid transparent; background-origin:border-box; } .in-liff-client .fs2-top.liff-top-band{ height:250px; } /* 260921 T180(A-11): line-headerと本文見出しのタイトル重複トルツメ。 ブラウザではline-headerが出るため本文側の見出し(.dup-title)を隠し、 LINEアプリ内はline-header自体が消える（上記）ため本文側の見出しだけ出す。 .in-liff-client は html（UA判定・描画前）/ body（liff.isInClient()・描画後）の どちらに付いても子孫セレクタなので同じ規則で両方効く。 */ .dup-title{ display:none; } .in-liff-client .dup-title{ display:block; } body.liff .screen{ position:relative; inset:auto; top:auto; flex:1; overflow:visible; display:flex; flex-direction:column; } body.liff .screen > *{ flex:0 0 auto; } body.liff .screen > .fs0, body.liff .screen > .screen, body.liff .screen > .line-bg{ flex:1 0 auto; } /* S0b・LINE通知・入れ子screen: 全面背景を画面下端まで */ body.liff .screen > .screen{ display:flex; flex-direction:column; } body.liff .screen > .screen > .pad{ flex:1 0 auto; } body.liff .modal-overlay{ position:fixed; z-index:50; } body.liff .video-modal{ position:fixed; z-index:60; } body.liff .toast{ position:fixed; z-index:70; } body.liff .richmenu-row{ margin:40px auto; } /* ギャラリー矢印ナビ（PCでも2枚目以降に到達できるように） */ .s7-gallery-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:32px; height:32px; border:none; border-radius:50%; cursor:pointer; background:rgba(20,20,20,.45); color:#fff; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; } .s7-gallery-nav.prev{ left:8px; } .s7-gallery-nav.next{ right:8px; } .s7-gallery-nav:active{ background:rgba(20,20,20,.65); } .s7-dot{ cursor:pointer; } /* 画像の拡大表示（ライトボックス） */ .img-lightbox{ position:fixed; inset:0; z-index:100; background:rgba(10,8,6,.92); display:none; align-items:center; justify-content:center; padding:16px; } .img-lightbox.show{ display:flex; } /* 260921 T180(A-1): ドロップシャドウ全廃 */ .img-lightbox img{ max-width:100%; max-height:92vh; object-fit:contain; border-radius:6px; } .img-lightbox .lb-close{ position:absolute; top:14px; right:16px; width:36px; height:36px; border:none; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .img-lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:40px; height:40px; border:none; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .img-lightbox .lb-nav.prev{ left:10px; } .img-lightbox .lb-nav.next{ right:10px; } .img-lightbox .lb-counter{ position:absolute; bottom:16px; left:0; right:0; text-align:center; color:rgba(255,255,255,.85); font-size:13px; letter-spacing:.1em; } /* --------------------------------------------------------------------- 0903 実機不具合修正: .type-opt 内の文字あふれ対策（会員種別の変更） --------------------------------------------------------------------- */ .type-opt .ti{ flex:1; min-width:0; } .type-opt .ti p, .type-opt .ti .flow-tag{ overflow-wrap:anywhere; } /* --------------------------------------------------------------------- 0903 実機不具合修正: 休会・退会（ボトムシート .modal-sheet 由来の構造を ページ直下で使う専用スコープ .ms-page）。 見た目は v6 上書き層（.modal-sheet 系: 1276行付近）に合わせ、 base 層（740行付近の朱・明朝の h3）はコピーしない。 既存の .modal-sheet（ダウングレード確認モーダル等）には影響しない。 --------------------------------------------------------------------- */ .ms-page h3{ font-family:inherit; font-weight:700; font-size:19px; color:var(--ink); letter-spacing:.04em; text-align:center; } .ms-page .ms-lead{ font-size:13px; color:var(--sumi); line-height:1.9; margin:12px 0 16px; text-align:center; } .ms-page .ms-warn{ background:#fbf2f3; border:1.5px solid #e0b9be; border-radius:14px; padding:14px 15px; margin-bottom:18px; } .ms-page .ms-warn .mw-row{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#c8384a; line-height:1.7; margin-bottom:9px; } .ms-page .ms-warn .mw-row:last-child{ margin-bottom:0; } .ms-page .ms-warn .mw-row .mw-k{ color:#c8384a; font-family:inherit; font-weight:700; flex:0 0 auto; } .ms-page .ms-warn + p{ margin-top:0; margin-bottom:16px; font-size:12.5px; color:var(--muted); line-height:1.8; text-align:center; } .ms-page .btn-danger{ background:#6b7280; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; } .ms-page .btn-ghost{ background:#fff; color:var(--ink); border:1px solid #d5d7db; border-radius:12px; font-weight:700; letter-spacing:.14em; } .ms-page .btn-gold{ background:#6b7280; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; } /* --------------------------------------------------------------------- 260921 第3便 T101（任意）: 設定ハブに埋め込む退会の確認シート。 見た目は上の .ms-page（v6上書き層）と同じ配色に揃える。 --------------------------------------------------------------------- */ /* 260929 レビュー指摘(必須1): 見出し・数字はFigmaのBold(700)へ統一する方針に漏れていた */ #withdraw-modal .modal-sheet h3{ font-family:inherit; font-weight:700; font-size:19px; color:var(--ink); letter-spacing:.04em; text-align:center; } #withdraw-modal .ms-warn{ background:#fbf2f3; border:1.5px solid #e0b9be; border-radius:14px; } #withdraw-modal .ms-warn .mw-row{ color:#c8384a; } #withdraw-modal .ms-warn .mw-row .mw-k{ color:#c8384a; font-family:inherit; } /* 261025 FigJam A3: 退会の確認の「ご留意事項」（シート・単独ページ共通） */ .ms-notes{ margin:0 0 16px; font-size:12.5px; line-height:1.8; color:var(--muted); } .ms-notes h4{ margin:0 0 6px; font-size:13px; font-weight:700; color:var(--ink); } .ms-notes h5{ margin:10px 0 2px; font-size:12.5px; font-weight:700; color:var(--ink); } .ms-notes p{ margin:0; text-align:left; } #withdraw-modal .btn-ghost{ background:#fff; color:var(--ink); border:1px solid #d5d7db; } /* 誤タップ防止: 確認チェックが入るまでグレーアウトし押せないことを見た目でも示す （送信ボタン自体は disabled 属性でも制御。JSでチェック時に解除）。 */ #withdraw-modal .btn-danger{ background:#6b7280; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; } #withdraw-modal .btn-danger:disabled{ background:#c3c8cf; cursor:not-allowed; } /* 確認チェック行: タップ領域44px以上を確保（iOS想定） */ .withdraw-confirm-check{ display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 2px; margin-bottom:6px; font-size:13px; color:var(--sumi); cursor:pointer; } .withdraw-confirm-check input[type="checkbox"]{ width:22px; height:22px; flex:0 0 22px; } /* ---------- 共通: position:absolute の矢印(.ar)を文字中心に縦centering ---------- 9/14 レビュー指摘: right のみ指定・top未指定だと static position 頼みで ボタン文字の中心からずれる場合がある。各コンテキストの right 指定はそのまま、 top:50%+transform:translateY(-50%) を同一セレクタで追記して確実に中央揃えする （同一詳細度のため後勝ちで上書きされる）。 */ .fs2-btn .ar, .s4-btn .ar, .s5-btn .ar, .s7-btn .ar, .s11-screen .btn-gold .ar, .s13-screen .btn-sumi .ar, .flow-screen .btn-gold .ar,.flow-screen .btn-sumi .ar, .flowA-screen .btn-gold .ar,.flowA-screen .btn-sumi .ar, .btn-red .ar,.btn-gray .ar, .s9-btn .ar{ top:50%; transform:translateY(-50%); } /* --------------------------------------------------------------------- 260922 祈祷明細: 明細（複数名）入力の折りたたみカード。 T180でドロップシャドウを全廃済みのため、box-shadow/text-shadowは使わない。 --------------------------------------------------------------------- */ .applicant-card{ background:var(--washi); border:1px solid var(--line); border-radius:var(--r); padding:0; margin-bottom:12px; overflow:visible; } /* 261023 打合せ: カードの overflow:hidden が「？」の吹き出し（年祈祷の説明など）を切り取っていたため visible に。 角丸は見出し（summary）に同じ丸みを付けて保つ */ .applicant-card > summary{ border-radius:var(--r); } .applicant-card[open] > summary{ border-radius:var(--r) var(--r) 0 0; } /* 260922: 申込画面は natsu-screen（色付きの地に白い入力欄・枠線なし、の前提）だが、 明細は白い申込者カード（--washi=#fff）の中に置くため、白い入力欄の境目が消えていた。 カードの中の入力欄にだけ枠線を戻す（他の natsu-screen の画面には影響させない）。 */ .natsu-screen .applicant-card .field input, .natsu-screen .applicant-card .field select, .natsu-screen .applicant-card .field textarea{ border-color:var(--line); } /* 260922: 入力欄の下に出す説明文。エラー（.error＝朱赤・form_errors.js が「不備」として集計） とは別物なので、目立ちすぎない色にし、集計の対象にもしない。 */ .field-hint{ margin-top:6px; font-size:12.5px; line-height:1.6; color:var(--muted); } .applicant-card summary{ list-style:none; cursor:pointer; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:14px; color:var(--sumi); } .applicant-card summary::-webkit-details-marker{ display:none; } .applicant-card summary .ap-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .applicant-card summary .ap-toggle::after{ content:"▾"; margin-left:8px; color:var(--muted); } .applicant-card[open] summary .ap-toggle::after{ content:"▴"; } .applicant-card .ap-body{ padding:0 16px 16px; border-top:1px solid var(--line-soft); } .applicant-card .ap-remove{ background:none; border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:12.5px; color:var(--muted); cursor:pointer; margin-top:10px; } /* 261021 「会員情報を入力する」: ap-remove と同じ小さなボタン（緑系・12.5px以上） */ .applicant-card .same-as-first{ margin:0 0 10px; } .applicant-card .ap-prefill-btn{ background:none; border:1px solid var(--ok); border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:700; color:var(--ok); cursor:pointer; margin-top:12px; /* 261025 FigJam C6: 幅いっぱい */ display:block; width:100%; box-sizing:border-box; min-height:40px; } /* 261021 瀬野尾さん指示: ボタンの下に余白（次の入力欄とくっつかないように） */ .applicant-card .member-prefill{ margin-bottom:16px; } .applicant-card .member-prefill .field-hint{ margin:6px 0 0; } /* 261025 FigJam C8: カードは開閉式をやめ、2人目以降は右上の×ですぐ消す（タップ領域 44px）。 住所・生年月日・電話は「＋ 任意項目を入力」（details.ap-optional）に閉じておく */ .applicant-card .ap-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:48px; padding:2px 4px 2px 16px; font-weight:700; font-size:14px; color:var(--sumi); } .applicant-card .ap-head .ap-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .applicant-card .ap-x{ flex:0 0 auto; min-width:44px; min-height:44px; padding:0; background:none; border:0; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; } .applicant-card .ap-x:focus-visible{ outline:2px solid var(--kin); outline-offset:2px; } .applicant-card .ap-optional{ margin:0 0 16px; } .applicant-card .ap-optional > summary{ list-style:none; cursor:pointer; display:block; box-sizing:border-box; width:100%; min-height:44px; padding:11px 14px; text-align:center; background:none; border:1.5px dashed var(--line); border-radius:var(--r); font-size:13.5px; font-weight:700; color:var(--sumi); } .applicant-card .ap-optional > summary::-webkit-details-marker{ display:none; } .applicant-card .ap-optional[open] > summary{ margin-bottom:16px; } .checkbox-row{ display:flex; align-items:center; gap:8px; min-height:32px; font-size:13px; color:var(--sumi); margin-bottom:8px; } .checkbox-row input[type="checkbox"]{ width:18px; height:18px; flex:0 0 18px; } /* 261013 No.61: 申込区分のラジオが .field input（幅100%・高さ46px）を受けて大きくなっていた */ .checkbox-row input[type="radio"]{ width:18px; height:18px; min-width:18px; flex:0 0 18px; padding:0; margin:0; border:0; border-radius:50%; box-shadow:none; accent-color:var(--ok); } .checkbox-row input[type="radio"]:focus-visible{ outline:2px solid var(--kin); outline-offset:2px; } .checkbox-row.is-disabled{ color:var(--muted); } .ap-add-btn{ width:100%; background:none; border:1.5px dashed var(--line); border-radius:var(--r); padding:12px; font-size:13.5px; font-weight:700; color:var(--sumi); cursor:pointer; margin-bottom:14px; } /* 261001: 祈祷申込の合計欄（dl.profile 直下）に置くため、左右の内側余白 16px を dl.profile .row と揃える（以前は padding 0 で枠線に貼り付き、合計行と位置がずれていた） */ .ap-summary-table{ width:100%; border-collapse:collapse; margin:0; } .ap-summary-table td{ padding:10px 0 10px 16px; font-size:12.5px; border-bottom:1px solid var(--line-soft); vertical-align:baseline; overflow-wrap:anywhere; } .ap-summary-table td.ap-summary-amount{ padding:10px 16px 10px 14px; text-align:right; white-space:nowrap; } /* ============================================================ 261002 瀬野尾さん決定: 祈祷の空き状況カレンダー（front:pray_reserve_list） 3か月分・○/数字/△/✕/－。PCは横3列・390pxは縦積み（赤・朱ボタンは使わない。 祈祷予約=緑トーン。kanahebi-tone-manner-green.md 参照）。 クラス名は既存の「.cal-」接頭辞（260920以前のイベントカレンダー用 .cal-mhead/.cal-event。現状未使用だが将来の衝突回避のため）と区別し、 「.avail-cal-」接頭辞にする。 260920可読性ルール（test_readability_0920.py）に合わせ、本文相当の文字は 12.5px以上にする（凡例・曜日見出し等の補助表示のみ10.5px以下に抑える）。 ============================================================ */ .avail-cal-legend{ display:flex; flex-wrap:wrap; gap:10px 16px; margin:10px 0 14px; font-size:12.5px; color:var(--muted); } .avail-cal-leg-item{ display:flex; align-items:center; gap:5px; } .avail-cal-sym{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; font-size:12.5px; font-weight:700; border-radius:50%; line-height:1; } /* 261004 再レビュー対応: 凡例の「残1」（「残」＋残数の2〜3文字）は○/△/✕/－の 1文字記号より横幅が要るため、width固定だと文字が丸からはみ出す／折り返される。 flex-shrink:0・white-space:nowrapで親(.avail-cal-leg-item、display:flex)に 圧縮・折り返しされないようにし、min-widthで横幅が必要な表記は自然に広がる ようにする（ページ全体のスクロール幅には影響しない。見た目上の調整）。 */ .avail-cal-leg-item .avail-cal-sym{ min-width:20px; height:20px; padding:0 4px; font-size:13px; flex-shrink:0; white-space:nowrap; } .avail-cal-sym-ok{ color:var(--ok); } .avail-cal-sym-low{ color:var(--muted); } /* 261004 再レビュー対応（🟡）: △（祈祷のみ可・昇殿不可）は✕（空きなし）より 軽い注意のため、--dangerとは別の黄系（darkgoldenrod系）にして見分けやすくする。 */ .avail-cal-sym-warn{ color:#9a7b06; } .avail-cal-sym-full{ color:var(--danger); } .avail-cal-sym-none{ color:var(--line); } .avail-cal-nav{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; } .avail-cal-nav-btn{ font-size:13px; font-weight:700; color:var(--ok); text-decoration:underline; text-underline-offset:3px; background:none; border:none; padding:6px 2px; cursor:pointer; } .avail-cal-nav-btn.disabled{ color:var(--line); text-decoration:none; pointer-events:none; } /* 261024 No.22: 3か月は常に縦積み（会員画面は430px枠。横並びだと601px以上のPC・新しいタブ表示で1か月が11px幅に潰れた）。 */ .avail-cal-months{ display:flex; flex-direction:column; gap:18px; } .avail-cal-month{ flex:0 0 auto; width:100%; min-width:0; } .avail-cal-month-title{ font-size:13.5px; font-weight:700; color:var(--sumi); margin:0 0 8px; text-align:center; } .avail-cal-table{ width:100%; border-collapse:collapse; table-layout:fixed; } /* 曜日見出し1文字のみの極小ラベル。既存.memcard .holder small(10px)等と同じ 「タイトなチップ内の表示」に準じ、本文可読性ルールの対象外（RAISED_RANGE外の10px）とする。 */ .avail-cal-table th{ font-size:10px; font-weight:700; color:var(--muted); padding:4px 0; text-align:center; } .avail-cal-table td.avail-cal-cell{ padding:2px; text-align:center; vertical-align:top; } .avail-cal-table td.avail-cal-empty{ padding:2px; } .avail-cal-day{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; width:100%; aspect-ratio:1/1; border-radius:8px; border:1px solid transparent; text-decoration:none; background:none; cursor:pointer; } a.avail-cal-day{ color:var(--sumi); } /* 日付の数字（1〜31）も曜日見出しと同じ理由で極小許容（10px）。 */ .avail-cal-day .avail-cal-day-num{ font-size:10px; color:var(--sumi); } .avail-cal-day .avail-cal-sym{ width:auto; height:auto; border-radius:0; font-size:12.5px; } .avail-cal-day.today{ border-color:var(--ok); } .avail-cal-day.sel{ background:rgba(63,143,79,.14); border-color:var(--ok); } .avail-cal-day.disabled{ opacity:.35; } .avail-cal-day.disabled .avail-cal-day-num{ color:var(--muted); } .cancel-policy{ font-size:12.5px; color:var(--muted); line-height:1.8; } /* 261007 お札の選択（初穂料の区分と別）。カード群の下に余白を空けて置く。 */ .ap-fuda-choice{ margin-top:12px; } .ap-fuda-choice-label{ display:block; margin-bottom:4px; } /* 261007 お札ボタン: 金額ごとの見出し（高い順）の下に2列で並べる。金額は出さない。 */ .ap-fuda-section{ margin-top:12px; } .ap-fuda-heading{ margin:0 0 6px; font-size:13px; font-weight:700; color:var(--ok); } /* 261030 会員の画面: 金額の見出しを出さず、全カードを2列のグリッドに続けて並べる。区画は display:contents で外す（金額の絞り込みは JS が区画の style.display で行う） */ .ap-fuda-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:12px; } .ap-fuda-grid > .ap-fuda-section, .ap-fuda-grid .ap-fuda-group{ display:contents; } .ap-fuda-group{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } .ap-fuda-card{ display:flex; flex-direction:column; align-items:center; gap:4px; width:auto; min-width:0; padding:8px; border:1.5px solid var(--line); border-radius:10px; cursor:pointer; text-align:center; /* 261024 和紙はカード側の背景（画像はお札だけの透過PNG）。タイルは約190px・表示96px（2倍密度） */ background:#f4f1e9 url("../images/fuda/washi_tile.b02859f53b79.jpg") repeat 0 0 / 96px 96px; } /* 261024 画像のない選択肢（お札なし・名前だけの区分）は和紙を敷かない */ .ap-fuda-card:not(:has(.ap-fuda-image)){ background:#fff; } /* 選択中: 和紙を隠さず、緑の枠＋内側の縁取りと淡い緑のにじみで示す */ .ap-fuda-card:has(input:checked){ border-color:var(--ok); box-shadow:inset 0 0 0 1.5px var(--ok), inset 0 0 16px rgba(63,143,79,.30), 0 0 0 2px rgba(63,143,79,.18); } .field .ap-fuda-card input[type="radio"], .ap-fuda-card input[type="radio"]{ width:18px; height:18px; min-width:18px; flex:0 0 auto; padding:0; margin:0 0 2px; border:0; box-shadow:none; accent-color:var(--ok); } /* お札カードは