*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* D-DIN (open-source, OFL) — self-hosted; shared with the HQ admin console so both consoles read as one product. Japanese always falls through to Noto Sans JP. */ @font-face{font-family:'D-DIN';src:url('/app/fonts/d-din.woff') format('woff');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'D-DIN';src:url('/app/fonts/d-din-bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap} /* ── Night (dark) theme — palette shared 1:1 with admin.css ── */ :root{ --bg:#08080a; --surface:#111113; --surface-2:#19191c; --surface-3:#222225; --border:#2a2a2e; --border-light:#38383d; --text:#f0f0f2; --text-2:#9d9da5; --text-3:#8a8a93; /* Editor accent: a calm, natural teal-green (fits 自然素材の家) — high-contrast and colour-vision-safe. In night mode the fill is a BRIGHT teal so the button pops on the near-black bg (8:1) with dark text on it — a dark teal recedes into the page. Kept distinct from the success green (公開中) below. */ --accent:#14b8a6; /* bright teal fill — pops on the dark bg (8:1) */ --accent-hover:#2dd4bf; --accent-dim:rgba(20,184,166,.16); --accent-text:#2dd4bf; /* light teal for TEXT/links on dark surfaces (~10:1) */ --on-accent:#04231f; /* near-black teal — text/icon sitting ON the bright teal fill (6.7:1) */ /* Colour-vision-safe semantic palette. Red↔green is the common confusion, so success is a blue-leaning (teal) green and warning is amber — pushing them onto the blue↔yellow axis that all CVD types can see — and danger stays a darker red so success/danger also separate by luminance (grayscale). Meaning is never carried by colour alone: every status also has a text label. */ --green:#4ade80; /* success / 公開中 — grass green, kept clear of the teal accent */ --green-dim:rgba(74,222,128,.13); --blue:#60a5fa; /* info / 新着 */ --blue-dim:rgba(96,165,250,.12); /* 明るい青の“上に載せる”文字。白を載せると2.5:1で、新着の件数が読めなかった。 */ --on-blue:#07203a; --orange:#f5a524; /* warning / 一時停止 — amber */ --orange-dim:rgba(245,165,36,.12); --red:#f2555a; /* danger / エラー / 終了 */ --red-dim:rgba(242,85,90,.12); --glass:rgba(17,17,19,.8); /* 入力の高さは1つの値で決める。1行のコントロール（text/date/select/number…）は すべてこの高さちょうどに揃える＝行内で上端・下端がズレない。44pxのタップ最小より 大きく取り、屋外・手袋・老眼でも押しやすい寸法にしている。 */ --control-h:48px; --control-h-sm:44px; /* 写真スロット等、密度を上げたい場所（それでも44px下限は死守） */ --radius:14px; --radius-sm:8px; --radius-xs:6px; --shadow:0 2px 8px rgba(0,0,0,.3); --shadow-lg:0 12px 40px rgba(0,0,0,.5); --font-display:'D-DIN','Noto Sans JP',sans-serif; --font-body:'D-DIN','Inter','Noto Sans JP',sans-serif; --font-num:'D-DIN','Inter','Noto Sans JP',sans-serif; color-scheme:dark; } /* ── Day (light) theme — toggled via [data-theme="light"] on . Same WCAG-AA palette as the HQ console: body text ≥7:1, secondary ≥4.5:1. ── */ :root[data-theme="light"]{ --bg:#f3f3f5; --surface:#ffffff; --surface-2:#eeeef1; --surface-3:#e3e3e8; --border:#e2e2e7; --border-light:#cfcfd6; --text:#191920; --text-2:#54545e; --text-3:#5f5f69; --accent:#0f766e; /* teal as BG (white text ≥5.4:1) */ --accent-hover:#0c5f59; --accent-dim:rgba(15,118,110,.10); --accent-text:#0f766e; /* teal for TEXT/links on light surfaces (~5.5:1) */ --on-accent:#ffffff; /* Colour-vision-safe on light too: teal-leaning success, amber warning, deep red danger — all ≥4.5:1 as text on white, and always paired with a text label. */ /* 白の上では4.5:1あったが、公開中の札は薄い緑の地の上に載るので4.27:1まで落ちていた。 地色ぶんを見込んで少し濃くする（白の上では5.4:1）。 */ --green:#10652f; /* success / 公開中 — grass green, kept apart from the teal accent */ --green-dim:rgba(21,128,61,.12); --blue:#1d4ed8; /* info / 新着 */ --blue-dim:rgba(29,78,216,.1); --on-blue:#ffffff; /* 濃い青の上なので白でよい（8.5:1） */ --orange:#9a5b00; /* warning / 一時停止 — dark amber */ --orange-dim:rgba(154,91,0,.1); --red:#c81e1e; /* danger / エラー / 終了 */ --red-dim:rgba(200,30,30,.1); --glass:rgba(255,255,255,.82); --shadow:0 2px 8px rgba(0,0,0,.08); --shadow-lg:0 12px 40px rgba(0,0,0,.14); color-scheme:light; } html{font-size:16px;-webkit-font-smoothing:antialiased} body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh} /* Smooth theme cross-fade on the main surfaces */ body,.header,.card,.panel,.modal-box,input,textarea,select{transition:background-color .25s ease,color .25s ease,border-color .25s ease} @media (prefers-reduced-motion: reduce){ body,.header,.card,.panel,.modal-box,input,textarea,select{transition:none} } /* ── Day / Night toggle (identical to the HQ console) ── */ .theme-toggle{ /* 幅が狭いと横に潰されて39pxになっていた。44pxは縮めない。 */ flex:none; display:inline-grid;place-items:center;width:44px;height:44px;padding:0; border:1px solid var(--border);border-radius:var(--radius-sm); background:transparent;color:var(--text-2);cursor:pointer;transition:all .2s; } .theme-toggle:hover{border-color:var(--border-light);color:var(--text);background:var(--surface-2)} .theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Dark theme shows the sun (tap → switch to day); light theme shows the moon */ .theme-toggle .ic-moon{display:none} .theme-toggle .ic-sun{display:block} :root[data-theme="light"] .theme-toggle .ic-sun{display:none} :root[data-theme="light"] .theme-toggle .ic-moon{display:block} /* ── Header ── */ .header{ background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:0 2.5rem;height:72px;display:flex;align-items:center;justify-content:space-between; position:sticky;top:0;z-index:100; } .logo{display:flex;align-items:center;gap:.75rem} .logo-mark{ width:36px;height:36px;background:var(--accent); border-radius:8px;display:grid;place-items:center; font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--on-accent); } .logo-text{font-family:var(--font-display);font-size:1.4rem;font-weight:600;letter-spacing:.08em;color:var(--text)} .logo-sub{font-size:.75rem;color:var(--text-3);letter-spacing:.15em;text-transform:uppercase;margin-top:2px} .header-right{display:flex;align-items:center;gap:1.25rem} .header-badge{ font-size:.75rem;letter-spacing:.1em;text-transform:uppercase; background:var(--accent-dim);color:var(--accent-text); padding:.375rem 1rem;border-radius:20px;font-weight:600; border:1px solid rgba(15,118,110,.2); } .header-logout{ background:none;border:1px solid var(--border);color:var(--text-2); border-radius:8px;padding:.4rem .6rem;cursor:pointer;font-size:.9rem; line-height:1;transition:background .2s,color .2s,border-color .2s; } .header-logout:hover{background:var(--surface-2);color:var(--text);border-color:var(--text-3)} /* ── Progress ── */ .wizard-topbar{background:var(--surface);padding:.85rem 2.5rem 0;display:flex;align-items:center;gap:1rem} /* 自動保存インジケータ（常時「保存済み ✓ HH:MM」を表示） */ .autosave-indicator{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--text-3);white-space:nowrap} .autosave-indicator:empty{display:none} .autosave-indicator.saved{color:var(--green)} .autosave-indicator .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto} .btn-back-list{ display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:8px 16px; background:transparent;color:var(--text-2);border:1px solid var(--border); border-radius:var(--radius-sm);font-size:.85rem;cursor:pointer; transition:border-color .2s,color .2s; } .btn-back-list:hover{border-color:var(--border-light);color:var(--text)} .btn-back-list svg{flex-shrink:0} @media(max-width:640px){.wizard-topbar{padding:.75rem 1rem 0}} .progress-bar{ background:var(--surface);border-bottom:1px solid var(--border); padding:1.25rem 2.5rem;display:flex;justify-content:center;align-items:center;gap:0; } .step-item{display:flex;align-items:center} .step-node{ display:flex;align-items:center;gap:.75rem;cursor:pointer; padding:.5rem 1rem;border-radius:var(--radius-sm);transition:all .2s; } .step-node:hover{background:var(--surface-2)} .step-num{ width:32px;height:32px;border-radius:50%;display:grid;place-items:center; font-size:.75rem;font-weight:600;letter-spacing:.02em; border:1.5px solid var(--border-light);color:var(--text-3);transition:all .3s; } .step-label{font-size:.8rem;color:var(--text-3);font-weight:500;letter-spacing:.04em;transition:all .3s} .step-line{width:56px;height:1px;background:var(--border);transition:all .4s} .step-item.active .step-num{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .step-item.active .step-label{color:var(--text)} .step-item.done .step-num{background:transparent;border-color:var(--accent);color:var(--accent-text)} .step-item.done .step-num::after{content:"\2713"} .step-item.done .step-num span{display:none} .step-item.done .step-label{color:var(--text-2)} .step-item.done + .step-line, .step-item.done ~ .step-line{background:var(--accent)} /* ── Main ── */ .main{max-width:1040px;margin:0 auto;padding:3rem 2rem} .panel{ background:var(--surface);border-radius:var(--radius); border:1px solid var(--border); padding:3rem; animation:fadeUp .5s cubic-bezier(.22,1,.36,1); } @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} .panel-header{margin-bottom:2.5rem} .panel-title{ font-family:var(--font-display);font-size:1.75rem;font-weight:400; letter-spacing:.04em;margin-bottom:.5rem; } .panel-desc{font-size:.85rem;color:var(--text-3);letter-spacing:.02em} /* ── Step 1: LP Type ── */ .type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .type-card{ border:1.5px solid var(--border);border-radius:var(--radius); cursor:pointer;transition:all .35s cubic-bezier(.22,1,.36,1); position:relative;overflow:hidden;background:var(--surface-2); } @media (hover:hover){ .type-card:hover{border-color:var(--border-light);transform:translateY(-4px);box-shadow:var(--shadow-lg)} } /* キーボード操作時にフォーカス位置が見えるようにする（role=button のカード用） */ .type-card:focus-visible,.taste-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .type-card.selected{border-color:var(--accent)} .type-card.selected .type-check{opacity:1;transform:scale(1)} .type-check{ position:absolute;top:1rem;right:1rem;z-index:3; width:28px;height:28px;background:var(--accent);color:var(--on-accent); border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700; opacity:0;transform:scale(.5);transition:all .3s cubic-bezier(.22,1,.36,1); box-shadow:0 0 0 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.35); } .type-photo{ aspect-ratio:16/10;overflow:hidden;position:relative; } .type-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)} .type-card:hover .type-photo img{transform:scale(1.05)} .type-photo::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%); } .type-body{padding:1.5rem} .type-name{ font-family:var(--font-display);font-size:1.15rem;font-weight:500; letter-spacing:.06em;margin-bottom:.375rem; } .type-name-en{font-size:.75rem;color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.625rem} .type-desc{font-size:.78rem;color:var(--text-2);line-height:1.7} /* ── Step 2: Design Taste ── */ .taste-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .taste-card{ border:1.5px solid var(--border);border-radius:var(--radius); cursor:pointer;transition:all .35s cubic-bezier(.22,1,.36,1); overflow:hidden;position:relative;background:var(--surface-2); } /* 持ち上げ演出はマウス環境だけに閉じる。タッチだとタップ後もhoverが残り、 持ち上がった/影が付いたまま固着するため（自動で動くUIはtapで止める方針）。 */ @media (hover:hover){ .taste-card:hover{border-color:var(--border-light);transform:translateY(-4px);box-shadow:var(--shadow-lg)} } .taste-card.selected{border-color:var(--accent)} .taste-card.selected .taste-check{opacity:1;transform:scale(1)} .taste-check{ position:absolute;top:1rem;right:1rem;z-index:3; width:28px;height:28px;background:var(--accent);color:var(--on-accent); border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700; opacity:0;transform:scale(.5);transition:all .3s cubic-bezier(.22,1,.36,1); /* 写真の明るさに左右されず選択チェックが浮くよう、写真非依存のリングを足す */ box-shadow:0 0 0 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.35); } .taste-preview{ aspect-ratio:3/4;position:relative;overflow:hidden; } .taste-preview img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)} @media (hover:hover){ .taste-card:hover .taste-preview img{transform:scale(1.05)} } /* 名前・タグを写真の中央に置く。写真の雰囲気が似ていても（特に土地はどれも 「土地」なので背景が似る）、テイストの判別が文字だけで完結するようにする。 スクリムは「文字の乗る中央帯」だけを沈める左右いっぱいの帯グラデーション。 楕円（中央が濃い放射状）にすると白い壁や空の上で形そのものが「黒いシミ」として 浮くので、必ず全幅の帯にして上下へ滑らかに抜く。濃さは全9枚のカード中央帯を実測し、 いちばん明るい土地Natural（4.5:1に必要なalpha=0.37）に対して余裕を持つ .45 をピークに採用。 */ .taste-preview::after{ content:"";position:absolute;inset:0; background:linear-gradient(to bottom, transparent 0%,rgba(0,0,0,.05) 18%,rgba(0,0,0,.45) 36%, rgba(0,0,0,.45) 64%,rgba(0,0,0,.05) 82%,transparent 100%); } .taste-label{ position:absolute;inset:0;padding:1.5rem 1.25rem;z-index:2; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; } /* 種類選択の .type-name-en と同じく大文字で統一（画面をまたいでも英字の見た目を揃える）。 HTMLは Modern のまま持ち、表示だけ text-transform で大文字にする。 */ .taste-name{ font-family:var(--font-display);font-size:2.5rem;font-weight:400; letter-spacing:.1em;color:#fff;line-height:1.1;margin-bottom:.6rem; text-transform:uppercase; text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5); } /* タグは「A / B / C」。各語をflexアイテムにして nowrap で固め、折り返しを 区切り「/」の位置だけに限定する。素の折り返しだと「分譲/地向け」のように 語の途中で割れて読めなくなるため。 */ /* テイストを実際に見分ける差分（分譲地向け 等）はここ。名前(40px)に対して小さすぎると 「一番読ませたい差分が一番小さい」逆転になるため .95rem(≈15px) に上げる。中央ラベルの 塊は濃いスクリム帯(36〜64%)に収まる範囲。 */ .taste-tag{ display:flex;flex-wrap:wrap;justify-content:center;column-gap:.4em;row-gap:.1em; font-size:.95rem;line-height:1.7;color:#fff;letter-spacing:.03em; max-width:17em;text-shadow:0 1px 8px rgba(0,0,0,.8); } .taste-tag-part{white-space:nowrap} .taste-tag-part:not(:last-child)::after{content:" /";color:rgba(255,255,255,.55)} .taste-color-bar{ display:flex;gap:6px;margin-top:1rem;justify-content:center; } .taste-color-dot{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25)} /* ── Step 3: Form ── */ /* ── 大きなまとまり（写真／建物の詳細／会社情報…）。 見出しを帯にして、どこからどこまでが1つのまとまりかを目で追えるようにする。 帯はそのまま開け閉めのボタンでもある（.section-toggle）。 ── */ .form-section{margin-bottom:2.75rem} .form-section:last-child{margin-bottom:0} .form-section-title{ display:flex;align-items:center; font-family:var(--font-display);font-size:1.25rem;font-weight:700; letter-spacing:.04em;color:var(--text);line-height:1.4; margin:0 0 1.5rem;padding:.25rem .75rem .25rem 1rem; background:var(--surface-2);border:1px solid var(--border); border-left:4px solid var(--accent);border-radius:var(--radius-sm); } .form-section-hint{font-size:.875rem;line-height:1.8;color:var(--text-2);margin:-.75rem 0 1.5rem} /* ── まとまりの中の小見出し。入力欄が長く続くところを、意味ごとに区切る ── */ .form-sub{ display:flex;align-items:baseline;gap:.625rem;flex-wrap:wrap; margin:2rem 0 .875rem;padding-bottom:.5rem; border-bottom:1px solid var(--border); font-size:1rem;font-weight:700;letter-spacing:.02em;color:var(--text); } .form-section-title + .form-sub,.form-section-hint + .form-sub{margin-top:0} .form-sub-note{font-size:.8125rem;font-weight:400;line-height:1.7;color:var(--text-2)} .form-sub + .form-section-hint{margin:-.375rem 0 1.125rem} /* 入力欄の真下に添える一言（この欄が何に効くのか）。本文と同じ14pxまで底上げする。 */ .form-hint{font-size:.875rem;line-height:1.7;color:var(--text-2);margin:.375rem 0 0} /* LPカードの掲載期限の知らせ。消える前に予告し、消えたあとは戻し方を書く。 */ .lp-card-expiry{font-size:.78rem;line-height:1.6;margin:.5rem 0 0;font-weight:500} /* お客様の情報を消すボタン。取り返しがつかない操作なので、他と同じ顔にしない。 */ .inquiry-delete{color:var(--red,#f87171);border-color:var(--red,#f87171)} .inquiry-delete:hover{background:var(--red,#f87171);color:#fff} /* ── 計測タグの設定 ── 番号を「どこで探すか」まで書く欄。設定済みかどうかが一目で分かるようにする。 */ .tag-field{margin-bottom:1.5rem} .tag-state{margin-left:.5rem;font-size:.75rem;font-weight:600;letter-spacing:.02em} .tag-state.is-on{color:var(--green,#4ade80)} .tag-state.is-bad{color:var(--red,#f87171)} .tag-caution{display:block;margin-top:.5rem;padding:.5rem .625rem;border-left:3px solid var(--orange,#f5a524); background:var(--surface-2);border-radius:0 4px 4px 0;color:var(--text-2)} /* ── ステップ3：残りの必須項目バナー（終わりが見える入力に） ── */ .req-progress{ display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap; margin:0 0 1.75rem;padding:.85rem 1.15rem;border-radius:var(--radius-sm); font-size:.95rem;font-weight:700; background:var(--accent-dim);color:var(--accent-text);border:1px solid var(--accent-dim); } .req-progress.done{background:var(--green-dim);color:var(--green);border-color:var(--green-dim)} .req-progress b{font-size:1.1em} .req-progress .rp-cta{font-size:.8rem;font-weight:500;opacity:.9} .req-progress:empty{display:none} /* ── 折りたたみできるセクション（見出しがそのままボタンになる） ── */ .section-toggle{ display:flex;align-items:center;justify-content:space-between;gap:1rem; width:100%;min-height:48px;padding:0;margin:0; background:none;border:0;cursor:pointer;color:inherit;font:inherit;text-align:left; } .section-toggle-icon{ flex:0 0 auto;width:9px;height:9px;margin-right:4px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s; } .form-section.collapsed .section-toggle-icon{transform:rotate(-45deg) translate(-2px,-2px)} .form-section.collapsed .form-section-title{margin-bottom:0} .form-section.collapsed > *:not(.form-section-title){display:none} .section-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-xs)} @media (prefers-reduced-motion: reduce){.section-toggle-icon{transition:none}} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem} .form-row.full{grid-template-columns:1fr} .form-group{display:flex;flex-direction:column;gap:.375rem} .form-label{font-size:.8rem;font-weight:500;color:var(--text-2);letter-spacing:.04em} /* 必須マークは赤に固定（アクセント色は主アクション/現在地に限定し、意味の飽和を防ぐ） */ .form-label .req{color:var(--red);font-size:.75rem;margin-left:.25rem;font-weight:700} .form-input{ padding:.8rem 1rem;min-height:var(--control-h); border:1px solid var(--border);border-radius:var(--radius-xs); font-size:16px;font-family:var(--font-body);color:var(--text); background:var(--surface-2);transition:all .25s; } /* 1行のコントロールは高さを固定する。min-height だけだと中身の作りが違うぶん 勝手に伸び、実測で text=44.6 / select=44.0 / date=53.6px とバラついていた （同じ行に並ぶと段差になって見える）。高さを1つに決めれば必ず揃う。 */ input.form-input:not([type="checkbox"]):not([type="radio"]), select.form-input{height:var(--control-h)} .form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)} .form-input::placeholder{color:var(--text-3)} textarea.form-input{resize:vertical;height:auto;min-height:88px} select.form-input{ cursor:pointer;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .75rem center; } /* The date field must follow the theme: color-scheme was pinned to dark, so in the light theme it rendered a dark box with an inverted (invisible) picker icon. */ input[type="date"].form-input{cursor:pointer;color-scheme:dark} input[type="date"].form-input::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer;opacity:1;padding-left:6px} :root[data-theme="light"] input[type="date"].form-input{color-scheme:light} :root[data-theme="light"] input[type="date"].form-input::-webkit-calendar-picker-indicator{filter:none} /* 開催時間のプリセット。選択中は塗りで示し、色だけに頼らないよう aria-pressed でも 伝える。高さは他の1行コントロールと同じ --control-h に揃える。 */ .time-presets{display:flex;flex-wrap:wrap;gap:.5rem} .time-preset{ /* 高さは入力欄と同じ --control-h ちょうど。2行組みにすると背が伸びて 入力欄と段差になるので、ラベルは横に並べて1行に収める。 */ display:inline-flex;flex-direction:row;align-items:center;gap:.5rem; height:var(--control-h);padding:0 16px; background:transparent;border:1px solid var(--border);border-radius:999px; color:var(--text);font-family:var(--font-body);font-size:.95rem;white-space:nowrap; cursor:pointer;transition:border-color .15s,background .15s,color .15s; } .time-preset:hover{border-color:var(--accent)} .time-preset[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700} .time-preset:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .time-preset .tp-tag{font-size:.68rem;color:var(--text-3);font-weight:600;letter-spacing:.04em} .time-preset[aria-pressed="true"] .tp-tag{color:var(--on-accent);opacity:.8} @media (prefers-reduced-motion: reduce){.time-preset{transition:none}} /* ═══ 取引条件（法定表示）の入力を軽くする部品 ═══════════════════════════ 取引条件は「毎回ほとんど同じ値を打ち直す」欄の集まり。同じ分譲地の2区画目も、 同じ市の次の物件も、用途地域・建ぺい率・接道・免許番号はたいてい前回と同じ。 ・.legal-preset … 前回の一式を1タップで呼び出すバー（空いている欄だけ埋める） ・.mini-chip … よく使う値を1タップで入れる小さなボタン 入力欄そのものは残す。0から書きたい人の逃げ道を消さないため。 高さは 44px を下回らない（屋外・手袋・老眼でも押せることを優先する）。 */ .legal-preset{ display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem; margin:0 0 1.25rem;padding:.85rem 1rem; border:1px dashed var(--border);border-radius:var(--radius-sm);background:var(--surface-2); } .legal-preset .lpz-text{flex:1 1 14rem;font-size:.85rem;color:var(--text-2);line-height:1.7} .legal-preset .lpz-text b{color:var(--text)} .legal-preset button{ min-height:44px;padding:0 18px; border:1px solid var(--accent);border-radius:999px;background:var(--accent); color:var(--on-accent);font-family:var(--font-body);font-size:.9rem;font-weight:700; white-space:nowrap;cursor:pointer;transition:opacity .15s; } .legal-preset button:hover{opacity:.85} .legal-preset button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .legal-preset button.lpz-undo{background:transparent;border-color:var(--border);color:var(--text-2);font-weight:600} .legal-preset button.lpz-undo:hover{border-color:var(--accent);color:var(--text)} .mini-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem} /* チラシの登録行。右に並ぶ「ボタンの文字」欄と高さをそろえる（--control-h）。 高さを min-height ではなく height で決めるのは、中身の作りが違うと勝手に伸びて 隣の入力欄と段差になるため（このファイル上部の .form-input の但し書きと同じ理由）。 */ .flyer-pick{display:flex;align-items:center;gap:10px;height:var(--control-h)} .flyer-pick-btn{ height:var(--control-h);padding:0 16px;flex:0 0 auto; background:transparent;border:1px solid var(--border);border-radius:var(--radius-xs); color:var(--text-2);font-family:var(--font-body);font-size:.9rem;white-space:nowrap; cursor:pointer;transition:border-color .15s,color .15s; } .flyer-pick-btn:hover{border-color:var(--accent);color:var(--text)} .flyer-pick-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .flyer-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;color:var(--text-3)} .flyer-name.is-set{color:var(--text)} .flyer-clear{ height:44px;padding:0 12px;flex:0 0 auto; background:transparent;border:1px solid var(--border);border-radius:var(--radius-xs); color:var(--text-3);font-family:var(--font-body);font-size:.85rem;cursor:pointer; transition:border-color .15s,color .15s; } .flyer-clear:hover{border-color:var(--red);color:var(--red)} .flyer-clear:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media (prefers-reduced-motion: reduce){.flyer-pick-btn,.flyer-clear{transition:none}} .mini-chip{ min-height:44px;padding:0 14px; background:transparent;border:1px solid var(--border);border-radius:999px; color:var(--text-2);font-family:var(--font-body);font-size:.85rem;white-space:nowrap; cursor:pointer;transition:border-color .15s,color .15s,background .15s; } .mini-chip:hover{border-color:var(--accent);color:var(--text)} .mini-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .mini-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700} @media (prefers-reduced-motion: reduce){.mini-chip,.legal-preset button{transition:none}} /* 開催日は自前の2ヶ月カレンダーで選ぶので、ブラウザ標準のピッカーアイコンは隠す （アイコンからは標準ピッカー、他の場所からは自前、というチグハグを防ぐ）。 代わりに同じ位置へカレンダーの絵を敷いて「押せる」ことは見せ続ける。 readonly にはしない：新規作成時のクリアが readonly をスキップする作りのため、 付けると前のLPの日付が残ってしまう。手入力も逃げ道として残す。 */ .date-cal::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none} .date-cal{ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a93' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:18px; padding-right:40px; } /* ── 開催日カレンダー（2ヶ月レンジピッカー） ───────────────────────────── 開始日と終了日は「範囲」なので、2つの欄で1つのカレンダーを共有する。 両端は塗り、あいだは淡い帯で示す。色だけに頼らないよう、両端は太字にし aria-selected / aria-label（「〜から」「〜まで」）でも必ず伝える。 */ .cal-pop{ position:absolute;z-index:1200;display:none; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow-lg);padding:1rem; } .cal-pop.open{display:block} .cal-months{display:flex;gap:1.5rem} .cal-month{min-width:308px} .cal-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem;min-height:44px} .cal-title{font-size:1rem;font-weight:700;color:var(--text);font-family:var(--font-num)} .cal-nav{ width:44px;height:44px;min-width:44px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:transparent;border:1px solid var(--border);color:var(--text); font-size:1rem;cursor:pointer;transition:background .15s,border-color .15s; } .cal-nav:hover:not(:disabled){background:var(--surface-2);border-color:var(--border-light)} .cal-nav:disabled{opacity:.35;cursor:default} .cal-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* 帯が隣の日と途切れないよう、セルは隙間なしで敷き詰める（Airbnbと同じ作り） */ .cal-grid{display:grid;grid-template-columns:repeat(7,44px);gap:0} .cal-wd{height:30px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:var(--text-3)} .cal-wd.sun{color:var(--red)} .cal-wd.sat{color:var(--blue)} .cal-cell{ position:relative;width:44px;height:44px; display:inline-flex;align-items:center;justify-content:center; font-size:1rem;font-family:var(--font-num); background:transparent;border:none;border-radius:50%;color:var(--text); cursor:pointer;transition:background .12s,color .12s,box-shadow .12s; } .cal-cell.empty{visibility:hidden;pointer-events:none} .cal-cell:disabled{color:var(--text-3);text-decoration:line-through;cursor:default} .cal-cell:not(:disabled):hover{box-shadow:inset 0 0 0 1.5px var(--accent)} .cal-cell:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* あいだの日：帯。角丸を殺して左右の日とつながって見せる */ .cal-cell.in-range{background:var(--accent-dim);border-radius:0;color:var(--text)} .cal-cell.range-open{border-radius:50% 0 0 50%} .cal-cell.range-close{border-radius:0 50% 50% 0} /* 開始日・終了日：塗りつぶし */ .cal-cell.is-edge{background:var(--accent);color:var(--on-accent);font-weight:700;border-radius:50%;box-shadow:none} .cal-cell.is-today::after{ content:'';position:absolute;bottom:5px;left:50%;transform:translateX(-50%); width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.75; } .cal-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-top:.875rem;padding-top:.875rem;border-top:1px solid var(--border)} .cal-hint{font-size:.8rem;color:var(--text-2)} .cal-actions{display:flex;gap:.5rem} .cal-btn{min-height:44px;padding:10px 16px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit} .cal-btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text-2)} .cal-btn.ghost:hover{border-color:var(--border-light);color:var(--text)} .cal-btn.primary{background:var(--accent);color:var(--on-accent);border:none} .cal-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media (max-width:760px){ .cal-months{flex-direction:column;gap:1rem} .cal-month{min-width:0} .cal-pop{padding:.75rem} } @media (prefers-reduced-motion: reduce){.cal-cell,.cal-nav,.cal-btn{transition:none}} /* Feature Inputs */ .feature-item{ background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm); padding:1.25rem;margin-bottom:.75rem; } .feature-item .form-row{margin-bottom:.5rem} .feature-item .form-row:last-child{margin-bottom:0} .feature-num{ font-family:var(--font-display);font-size:.8rem;font-weight:500; color:var(--accent-text);letter-spacing:.1em;margin-bottom:.75rem; } /* Photo Upload */ .upload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .upload-zone{ /* Cap the height: at 4/3 a full-width slot ran ~300px tall, which is what made the form 6+ screens long. The preview image still fills it via object-fit. */ aspect-ratio:4/3;max-height:180px; border:1.5px dashed var(--border-light);border-radius:var(--radius-sm); display:flex;flex-direction:column;align-items:center;justify-content:center; cursor:pointer;transition:all .3s;position:relative;overflow:hidden; background:var(--surface-2); } .upload-zone:hover{border-color:var(--accent);background:var(--accent-dim)} .upload-zone:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .upload-zone.has-image{border-style:solid;border-color:var(--border)} .upload-zone.has-image img{width:100%;height:100%;object-fit:cover} .upload-icon{ width:40px;height:40px;border:1.5px solid var(--border-light);border-radius:50%; display:grid;place-items:center;margin-bottom:.5rem; color:var(--text-3);font-size:1.1rem;transition:all .3s; } .upload-zone:hover .upload-icon{border-color:var(--accent);color:var(--accent-text)} .upload-text{font-size:.75rem;color:var(--text-3);text-align:center;letter-spacing:.02em} .upload-hero{grid-column:1/-1;aspect-ratio:16/7} .upload-label{font-size:.7rem;color:var(--text-2);font-weight:500;letter-spacing:.04em;margin-bottom:.5rem} .photo-slot{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;margin-bottom:1rem} .photo-slot-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem} .photo-slot-name{font-size:.82rem;font-weight:600;color:var(--text-1)} .photo-slot-role{font-size:.7rem;color:var(--text-3);margin-left:auto} /* Added frames (見どころ / ギャラリー): the "＋" row and the per-frame remove. */ .photo-slot-remove{margin-left:.5rem;padding:6px 10px;min-height:32px;font-size:.7rem;color:var(--text-3);background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:color .15s,border-color .15s} .photo-slot-remove:hover{color:var(--red,#e05252);border-color:var(--red,#e05252)} .photo-slot-add{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin:-.25rem 0 1.25rem} .btn-add-slot{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:10px 20px;font-size:.85rem;font-weight:600;color:var(--accent-text);background:var(--surface-2);border:1.5px dashed var(--accent);border-radius:var(--radius-sm);cursor:pointer;transition:background .15s} .btn-add-slot:hover{background:var(--surface-3)} .photo-slot-add-hint{font-size:.75rem;color:var(--text-3)} /* 開発用のサンプル写真バー（localhost のみ表示） */ .demo-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem;padding:.75rem 1rem;background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--radius-sm)} .btn-demo-photos{min-height:44px;padding:10px 20px;font-size:.85rem;font-weight:600;color:var(--text-1);background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap} .btn-demo-photos:hover{border-color:var(--accent);color:var(--accent-text)} .btn-demo-photos:disabled{opacity:.6;cursor:default} .demo-autofill{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .5rem;font-size:.8rem;color:var(--text-2);cursor:pointer;user-select:none} .demo-autofill input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer} .demo-bar-hint{font-size:.75rem;color:var(--text-3)} .photo-slot-body{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start} .photo-slot-body .upload-zone{aspect-ratio:4/3;margin:0} .photo-slot-body .upload-zone.is-hero{aspect-ratio:16/7} .photo-slot-fields{display:flex;flex-direction:column;gap:.5rem} /* 写真スロット内は密度を上げるが、42pxはタップ最小44pxを割っていたので下限に揃える */ .photo-slot-fields .form-input{font-size:16px;padding:.6rem .75rem;min-height:var(--control-h-sm)} .photo-slot-fields input.form-input,.photo-slot-fields select.form-input{height:var(--control-h-sm)} .photo-slot-fields textarea.form-input{min-height:60px;resize:vertical} .photo-slot-floor{border-color:var(--accent);border-style:dashed} .photo-slot-floor .upload-zone{aspect-ratio:3/4} .photo-delete-btn{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;border:none;font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;transition:background .2s} .photo-delete-btn:hover{background:rgba(200,40,40,.85)} .upload-zone{position:relative} /* ── 写真の位置あわせ ── 一覧側は結果の表示だけ。構図を決める作業は全画面の専用画面で行う （180pxのフォーム項目の中で構図を決めさせる作りは3回作って3回失敗した）。 */ .photo-edit-btn{ position:absolute;left:8px;bottom:8px;z-index:6; min-height:44px;padding:10px 16px;font-size:.85rem;font-weight:600; color:#fff;background:rgba(0,0,0,.66);border:1px solid rgba(255,255,255,.55); border-radius:999px;cursor:pointer;backdrop-filter:blur(2px); } .photo-edit-btn:hover{background:rgba(0,0,0,.8)} .photo-edit-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* ── 全画面の写真エディタ（SNSのプロフィール写真の編集と同じ作り）── */ .photo-editor{ position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column; background:rgba(10,10,12,.96);color:#fff; } .pe-head{ display:flex;align-items:center;gap:1rem;padding:.75rem 1rem; border-bottom:1px solid rgba(255,255,255,.14); } .pe-title{flex:1;margin:0;text-align:center;font-size:.95rem;font-weight:600} .pe-cancel,.pe-done{ min-height:44px;padding:8px 14px;font-size:.9rem;background:none;border:none; color:#fff;cursor:pointer;border-radius:8px; } .pe-done{font-weight:700;color:#7cc4ff} .pe-cancel:hover,.pe-done:hover{background:rgba(255,255,255,.12)} .pe-cancel:focus-visible,.pe-done:focus-visible{outline:3px solid #7cc4ff;outline-offset:2px} /* 舞台：写真は全体が見えたまま、明るい窓の中だけが公開される */ .pe-stage{ position:relative;flex:1;overflow:hidden;touch-action:none;cursor:grab; min-height:240px; } .photo-editor.is-dragging .pe-stage{cursor:grabbing} .pe-photo-wrap{position:absolute;left:0;top:0} .pe-photo{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none} /* 窓の外を暗くする。box-shadow の広がりで覆うので、対応の怪しい mask を使わない */ .pe-window{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); pointer-events:none;border:2px solid #fff;border-radius:2px; box-shadow:0 0 0 9999px rgba(0,0,0,.62); } .pe-hint{margin:0;padding:.7rem 1rem 0;text-align:center;font-size:.8rem;color:rgba(255,255,255,.85)} .pe-shapes{ display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:.7rem 1rem 0; } .pe-chip{ min-height:40px;padding:8px 14px;font-size:.76rem;cursor:pointer; color:rgba(255,255,255,.85);background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28);border-radius:999px; } .pe-chip.is-on{background:#fff;color:#111;border-color:#fff;font-weight:600} .pe-chip:focus-visible{outline:3px solid #7cc4ff;outline-offset:2px} .pe-foot{display:flex;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap;padding:.9rem 1rem 1.2rem} /* 拡大：スライダーは太く長く（屋外・手袋・老眼でもつまめること） */ .pe-zoom{ display:flex;align-items:center;gap:.8rem; padding:.5rem 1.1rem;border-radius:999px;background:rgba(255,255,255,.14); } .pe-zoom-ico{font-size:1.1rem;line-height:1;color:rgba(255,255,255,.9);width:1rem;text-align:center} .pe-zoom-range{ width:min(260px,42vw);height:44px;background:none;cursor:pointer;-webkit-appearance:none;appearance:none; } .pe-zoom-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(255,255,255,.35)} .pe-zoom-range::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-11px; border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5); } .pe-zoom-range::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.35)} .pe-zoom-range::-moz-range-thumb{ width:28px;height:28px;border:none;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5); } .pe-zoom-range:focus-visible{outline:3px solid #7cc4ff;outline-offset:4px;border-radius:999px} .pe-reset{ min-height:44px;padding:10px 22px;font-size:.85rem;cursor:pointer; color:#fff;background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);border-radius:999px; } .pe-reset:hover{background:rgba(255,255,255,.2)} .pe-reset:disabled{opacity:.4;cursor:default} .pe-reset:disabled:hover{background:rgba(255,255,255,.12)} .pe-reset:focus-visible{outline:3px solid #7cc4ff;outline-offset:2px} /* Drag & drop highlight (reuses the hover accent) */ .upload-zone.drag-over{border-color:var(--accent);background:var(--accent-dim);border-style:dashed} .upload-zone.drag-over .upload-icon{border-color:var(--accent);color:var(--accent-text)} .logo-preview.drag-over{outline:2px dashed var(--accent);outline-offset:2px} @media(max-width:768px){.photo-slot-body{grid-template-columns:1fr}} /* ── Step 4: Preview ── */ .preview-frame{ border:1px solid var(--border);border-radius:var(--radius);overflow:hidden; background:var(--surface-2); } .preview-toolbar{ display:flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem; background:var(--surface-3);border-bottom:1px solid var(--border); } .preview-dots{display:flex;gap:6px} .preview-dot{width:10px;height:10px;border-radius:50%} .preview-dot:nth-child(1){background:#ff5f57} .preview-dot:nth-child(2){background:#febc2e} .preview-dot:nth-child(3){background:#28c840} .preview-url{ flex:1;margin-left:.75rem;padding:.5rem 1rem; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs); font-size:.7rem;color:var(--text-3);font-family:'Inter',monospace;letter-spacing:.02em; } .preview-device-btns{display:flex;gap:.375rem} .preview-device-btn{ padding:.375rem .75rem;min-height:44px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--border);border-radius:var(--radius-xs); background:transparent;cursor:pointer;font-size:.7rem;color:var(--text-3); font-family:var(--font-body);transition:all .2s;letter-spacing:.04em; } .preview-device-btn:hover{border-color:var(--border-light);color:var(--text-2)} .preview-device-btn.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} /* The desktop preview renders the LP at a real 1280px and scales it down to fit. The iframe must therefore be laid out from the top-left corner — centering it while it is still 1280px wide pushed the (scaled) content off to the left and clipped its right edge, which is what made narrow windows look broken. */ .preview-iframe-wrap{ width:100%;overflow:hidden;transition:all .4s ease; display:block;background:#fff; } .preview-iframe-wrap iframe{width:1280px;height:900px;border:none;background:#fff;transform-origin:top left;display:block} /* Mobile preview: a real 390px viewport, centered, no scaling. */ .preview-iframe-wrap.mobile{padding:1.5rem;display:flex;justify-content:center} .preview-iframe-wrap.mobile iframe{ width:390px!important;max-width:100%;height:720px;transform:none!important; border-radius:var(--radius);box-shadow:var(--shadow-lg); } /* ── Buttons ── */ .btn-row{display:flex;justify-content:space-between;align-items:center;margin-top:2.5rem} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.8rem 1.75rem;min-height:46px;border-radius:var(--radius-xs); font-size:.85rem;font-weight:600;font-family:var(--font-body);cursor:pointer; border:none;transition:all .25s;letter-spacing:.04em; } .btn-primary{ background:var(--accent);color:var(--on-accent); } .btn-primary:hover{box-shadow:0 4px 20px rgba(15,118,110,.35);transform:translateY(-1px)} .btn-primary:disabled{background:var(--surface-3);color:var(--text-3);cursor:not-allowed;box-shadow:none;transform:none} .btn-secondary{background:transparent;color:var(--text-2);border:1px solid var(--border)} .btn-secondary:hover{border-color:var(--border-light);color:var(--text)} .btn-success{background:#0e8a52;color:#fff} .btn-success:hover{box-shadow:0 4px 20px rgba(5,150,105,.35);transform:translateY(-1px)} /* 下書き保存：塗りつぶしの主役（公開する）と競合しないよう、アクセントの枠線ボタンに */ .btn-save{background:transparent;color:var(--accent-text);border:1px solid var(--accent)} .btn-save:hover{background:var(--accent-dim);color:var(--accent-text);transform:translateY(-1px)} /* ── プレビュー画面の操作バー ── */ .preview-actions{ display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--border); } .preview-actions .pa-nav{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap} .preview-actions .pa-actions{display:flex;align-items:center;gap:.6rem;margin-left:auto;flex-wrap:wrap} .pa-back{ display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:8px 16px; background:transparent;color:var(--text-2);border:1px solid var(--border); border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;cursor:pointer; transition:border-color .2s,color .2s; } .pa-back:hover{border-color:var(--border-light);color:var(--text)} .pa-back svg{flex-shrink:0} .pa-sep{width:1px;height:22px;background:var(--border);margin:0 .4rem} .pa-link{ min-height:44px;padding:8px 14px;background:transparent;color:var(--text-3); border:none;border-radius:var(--radius-sm);font-size:.82rem;font-weight:500;cursor:pointer; transition:color .2s,background .2s; } .pa-link:hover{color:var(--text);background:var(--surface-2)} /* いまの公開状態バッジ（下書き＝注意色／公開中＝緑） */ .pa-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;padding:.4rem .75rem;border-radius:999px;white-space:nowrap} .pa-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor} .pa-status.is-draft{color:var(--orange);background:var(--orange-dim)} .pa-status.is-live{color:var(--green);background:var(--green-dim)} @media(max-width:680px){ .preview-actions{flex-direction:column;align-items:stretch;gap:.85rem} .preview-actions .pa-nav{justify-content:center} .preview-actions .pa-actions{margin-left:0;flex-direction:column;align-items:stretch;gap:.6rem} .preview-actions .pa-actions .btn{width:100%;min-height:52px} .pa-sep{display:none} } .btn-icon{font-size:.85rem} /* ── Responsive ── */ @media(max-width:768px){ .header{padding:0 1.25rem} .main{padding:1.5rem 1rem} .panel{padding:2rem 1.5rem} .type-grid,.taste-grid{grid-template-columns:1fr} /* テイストカードは3:4で縦長。1列に積むと「次へ進む」が画面外へ沈むため、 step2の操作行を画面下に貼り付けて常に押せるようにする（パネル余白1.5remを 負マージンで食って左右いっぱいのフッター帯にする）。デスクトップは無改変。 */ #step2 .btn-row{ position:sticky;bottom:0;z-index:5; margin:2rem -1.5rem 0;padding:.85rem 1.5rem; background:var(--surface);border-top:1px solid var(--border); } .form-row{grid-template-columns:1fr} /* 1列に積むので、揃えるための44px確保は不要（余白になるだけ）に戻す */ .form-row:has(.ai-field-header) .form-group > .form-label{min-height:0;display:block} .upload-grid{grid-template-columns:1fr 1fr} .progress-bar{padding:.75rem 1rem;overflow-x:auto} .step-line{width:24px} .step-label{font-size:.7rem} } .hidden{display:none!important} /* Respect users who prefer reduced motion (accessibility) */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } } /* ── Toast ── */ .toast{ position:fixed;bottom:2rem;right:2rem; background:var(--surface-2);color:var(--text); border:1px solid var(--border); padding:1rem 1.75rem;border-radius:var(--radius-sm); font-size:.85rem;box-shadow:var(--shadow-lg); transform:translateY(100px);opacity:0;transition:all .35s cubic-bezier(.22,1,.36,1); z-index:200; } .toast.show{transform:translateY(0);opacity:1} /* ── AI Generate ── */ .ai-block{ background:var(--accent-dim); border:1px solid rgba(15,118,110,.25);border-radius:var(--radius); padding:2rem;margin-bottom:2rem;position:relative;overflow:hidden; } .ai-block::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px; background:var(--accent); } .ai-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem} .ai-title{display:flex;align-items:center;gap:.75rem} .ai-icon{ width:36px;height:36px;border-radius:50%; background:var(--accent); display:grid;place-items:center;font-size:.9rem; } .ai-icon svg{width:18px;height:18px} .ai-label{font-family:var(--font-display);font-size:1.1rem;font-weight:500;letter-spacing:.06em;color:var(--accent-text)} .ai-sublabel{font-size:.7rem;color:var(--text-3);letter-spacing:.04em;margin-top:2px} .ai-desc{font-size:.8rem;color:var(--text-2);line-height:1.7;margin-bottom:1.25rem} .btn-ai{ display:inline-flex;align-items:center;gap:.625rem; padding:.75rem 2rem;border-radius:var(--radius-xs); font-size:.85rem;font-weight:600;font-family:var(--font-body);cursor:pointer; border:1.5px solid var(--accent); background:transparent;color:var(--accent-text); transition:all .3s;letter-spacing:.04em; } .btn-ai:hover{background:var(--accent);color:var(--on-accent);box-shadow:0 4px 24px rgba(15,118,110,.3)} .btn-ai:disabled{opacity:.5;cursor:not-allowed;box-shadow:none} .btn-ai svg{width:16px;height:16px;fill:currentColor} .btn-ai-sm{ display:inline-flex;align-items:center;justify-content:center; padding:.6rem 1rem;min-height:40px;font-size:.8rem; border:1px solid rgba(15,118,110,.4);border-radius:var(--radius-xs); background:transparent;color:var(--accent-text);cursor:pointer; font-family:var(--font-body);font-weight:500;letter-spacing:.04em;transition:all .2s; position:relative; } .btn-ai-sm:hover{background:var(--accent-dim);border-color:var(--accent);transform:scale(1.05)} .btn-ai-sm.loading{pointer-events:none;opacity:.7;color:transparent} .btn-ai-sm.loading::after{ content:'';position:absolute;top:50%;left:50%;width:14px;height:14px; margin:-7px 0 0 -7px;border:2px solid var(--accent-dim);border-top-color:var(--accent); border-radius:50%;animation:spin .6s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .ai-status{ display:none;align-items:center;gap:.625rem; margin-top:1rem;font-size:.8rem;color:var(--accent-text); } .ai-status.show{display:flex} .ai-spinner{ width:16px;height:16px;border:2px solid var(--accent-dim); border-top-color:var(--accent);border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .ai-field-header{display:flex;align-items:center;justify-content:space-between} .ai-field-header .form-label{flex:1} /* AI生成ボタンのある列はラベル行が44px（ボタン高さ）になる。隣の「ラベルだけ」の 列も同じ44pxに揃えて、同じ行の入力欄の上端をそろえる（2列表示のときだけ）。 */ .form-row:has(.ai-field-header) .form-group > .form-label{ min-height:44px;display:flex;align-items:center; } /* ── 掲載ブロックのON/OFFトグル（土地販売LPの任意ブロック） ── */ .block-toggles{ border:1px solid var(--border);border-radius:12px; padding:1rem 1.25rem;margin-bottom:1.75rem;background:var(--surface-2); } .block-toggles-head{margin-bottom:.5rem} .block-toggles-title{font-size:1rem;font-weight:700;display:block} .block-toggles-note{font-size:.78rem;color:var(--text-3);display:block;margin-top:2px;line-height:1.6} .block-toggle{ display:flex;align-items:center;gap:1rem;min-height:56px; padding:.35rem 0;cursor:pointer;border-top:1px solid var(--border); } .block-toggle-main{flex:1;min-width:0} .block-toggle-name{font-size:.95rem;font-weight:600;display:block} .block-toggle-desc{font-size:.78rem;color:var(--text-3);display:block;margin-top:2px;line-height:1.6} .block-toggle-cb{position:absolute;opacity:0;width:0;height:0} /* ON/OFF を色・位置だけでなく文字でも見せる（老眼・非テック層でも状態が分かる） */ .block-toggle-state{flex:none;min-width:3em;text-align:right;font-size:.82rem;font-weight:700;color:var(--text-3)} .block-toggle-state::after{content:"非表示"} .block-toggle-cb:checked ~ .block-toggle-state{color:var(--accent)} .block-toggle-cb:checked ~ .block-toggle-state::after{content:"表示"} .block-toggle-sw{ flex:none;width:52px;height:30px;border-radius:15px; /* OFF は薄い塗り＋輪郭で背景に埋もれさせない（低コントラスト対策） */ background:var(--surface-3);border:1px solid var(--border-light);position:relative;transition:background .2s,border-color .2s; } .block-toggle-sw::after{ content:"";position:absolute;top:2px;left:2px;width:24px;height:24px; border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .2s; } .block-toggle-cb:checked ~ .block-toggle-sw{background:var(--accent);border-color:var(--accent)} .block-toggle-cb:checked ~ .block-toggle-sw::after{transform:translateX(22px)} .block-toggle-cb:focus-visible ~ .block-toggle-sw{outline:2px solid var(--accent);outline-offset:2px} .block-toggles-hint{font-size:.78rem;color:var(--text-3);margin-top:.6rem;line-height:1.7} /* 各グループ（コンセプト / 参考プラン）の見出しに置く、その場で切り替えるトグル */ .slot-group-toggle{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.85rem 1.1rem;margin:.5rem 0;border:1px solid var(--border); border-radius:12px;background:var(--surface-2); } .slot-group-toggle-name{font-size:.95rem;font-weight:700;display:block} .slot-group-toggle-desc{font-size:.78rem;color:var(--text-3);display:block;margin-top:2px;line-height:1.5} .block-toggle-inline{display:flex;align-items:center;gap:.6rem;cursor:pointer;flex:none;position:relative;min-height:44px} /* ── 資料請求フォーム（小見出し・プリセットチップ・チェックリスト） ── */ .form-subsection-title{font-size:.95rem;font-weight:700;margin:1.75rem 0 .85rem;padding-top:1.25rem;border-top:1px solid var(--border)} .form-subsection-title:first-of-type{border-top:none;padding-top:0;margin-top:.5rem} .preset-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.55rem} .preset-chip{font-family:inherit;font-size:.8rem;padding:.5rem .9rem;min-height:48px;border:1px solid var(--border);border-radius:20px;background:var(--surface-2);color:var(--text-2);cursor:pointer;transition:border-color .15s,color .15s} .preset-chip:hover{border-color:var(--accent);color:var(--accent-text)} .preset-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .check-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden} .check-item{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;line-height:1.5;padding:.85rem 1rem;min-height:48px;cursor:pointer;background:var(--surface);border-bottom:1px solid var(--border)} .check-item:last-child{border-bottom:none} .check-item input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--accent);cursor:pointer} /* ── Profile Modal ── */ .modal-overlay{ position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px); z-index:300;display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none; /* 閉じているダイアログを Tab の順路から外す。opacity:0 だけだと、画面には 見えないのにフォーカスは入る。この画面ではそれが43か所あり、キーボードで 操作する人は見えない入力欄を延々と通らされていた（読み上げにも出る）。 消えるときだけ visibility の切り替えを遅らせるので、フェードは元のまま。 */ visibility:hidden; transition:opacity .3s, visibility 0s .3s; } .modal-overlay.show{ opacity:1;pointer-events:all;visibility:visible; transition:opacity .3s, visibility 0s 0s; } .modal{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); width:90%;max-width:640px;max-height:85vh;overflow-y:auto; padding:2.5rem;transform:translateY(20px);transition:transform .35s cubic-bezier(.22,1,.36,1); } .modal-overlay.show .modal{transform:translateY(0)} .modal-title{ font-family:var(--font-display);font-size:1.4rem;font-weight:400; letter-spacing:.06em;margin-bottom:.375rem; } .modal-desc{font-size:.8rem;color:var(--text-3);margin-bottom:2rem} .modal-close{ position:absolute;top:1.25rem;right:1.25rem; background:none;border:none;color:var(--text-3);cursor:pointer;font-size:1.2rem; /* 押せる大きさの下限は44px（手袋・老眼・スマホでも確実に閉じられること）。 32pxだと×を狙って外し、ダイアログの外を押して閉じてしまう事故が起きる。 */ width:44px;height:44px;display:grid;place-items:center;border-radius:50%; transition:all .2s; } .modal-close:hover{background:var(--surface-2);color:var(--text)} /* ── Confirm dialog ── */ .confirm-overlay{z-index:400} .confirm-modal{max-width:380px;text-align:center;padding:2.25rem 2rem 1.75rem} .confirm-icon{ width:52px;height:52px;margin:0 auto 1.25rem;border-radius:50%; display:grid;place-items:center;font-size:1.5rem;font-weight:600; background:var(--accent-dim);color:var(--accent-text); border:1px solid rgba(15,118,110,.25); } .confirm-modal.danger .confirm-icon{ background:var(--red-dim,rgba(248,113,113,.12));color:var(--red,#f87171); border-color:rgba(248,113,113,.3); } .confirm-title{font-size:1.15rem} .confirm-message{margin-bottom:1.75rem;line-height:1.7;color:var(--text-2);white-space:pre-line} .confirm-actions{display:flex;gap:.75rem;justify-content:center} .confirm-actions .btn{flex:1;justify-content:center;max-width:160px} .confirm-modal.danger #confirmOk{background:#d92d2d;color:#fff} .confirm-modal.danger #confirmOk:hover{box-shadow:0 4px 20px rgba(239,68,68,.35)} /* 破棄系の第3ボタン（例「保存せずに戻る」）：主アクションより控えめだが、 取り返しがつかないことが伝わる赤の縁取り。 */ .btn-ghost-danger{background:transparent;color:var(--red);border:1px solid var(--red-dim)} .btn-ghost-danger:hover{background:var(--red-dim);border-color:var(--red)} /* 3択のときは縦積み（長い日本語ラベルを1行に詰め込まない）。 安全な「保存して戻る」を上に、破棄を中、「編集を続ける」を下に。 */ .confirm-actions--stack{flex-direction:column;gap:.6rem} .confirm-actions--stack .btn{max-width:none;width:100%;min-height:48px} .confirm-actions--stack #confirmOk{order:1} .confirm-actions--stack #confirmThird{order:2} .confirm-actions--stack #confirmCancel{order:3} /* ── 未入力の必須項目ダイアログ ── */ .missing-modal{max-width:440px} .missing-modal .modal-desc{margin-bottom:1.25rem;line-height:1.8;color:var(--text-2)} .missing-list{list-style:none;margin:0 0 1.5rem;padding:0;text-align:left;display:flex;flex-direction:column;gap:.5rem} .missing-list li{ display:flex;align-items:baseline;justify-content:space-between;gap:1rem; padding:.8rem .9rem;background:var(--surface-2); border-left:2px solid var(--red);border-radius:var(--radius-xs); } .missing-list .m-name{font-size:1rem;font-weight:600;color:var(--text)} .missing-list .m-why{flex:0 0 auto;font-size:.8rem;color:var(--text-2)} /* the dialog has a single next step, so let it fill the width and stay thumb-sized */ .missing-modal .confirm-actions .btn{max-width:none;min-height:56px} /* also point at the field itself, not only at the list */ .form-input.field-missing,.form-select.field-missing,.form-textarea.field-missing, textarea.field-missing,select.field-missing{ border-color:var(--red);box-shadow:0 0 0 3px var(--red-dim); } @media(max-width:480px){ .missing-list li{flex-direction:column;align-items:flex-start;gap:.15rem} } .logo-upload-area{ display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem; } .logo-preview{ width:80px;height:80px;border-radius:var(--radius-sm);overflow:hidden; border:1.5px dashed var(--border-light);display:grid;place-items:center; background:var(--surface-2);cursor:pointer;transition:all .3s;flex-shrink:0; } .logo-preview:hover{border-color:var(--accent)} .logo-preview img{width:100%;height:100%;object-fit:contain} .logo-preview-text{font-size:.6rem;color:var(--text-3);text-align:center;line-height:1.4} .logo-info{flex:1} .logo-info-title{font-size:.8rem;font-weight:500;color:var(--text);margin-bottom:.25rem} .logo-info-desc{font-size:.7rem;color:var(--text-3)} /* Header tenant */ .header-tenant{ display:flex;align-items:center;gap:.75rem;cursor:pointer; padding:.375rem .75rem;border-radius:var(--radius-xs);transition:all .2s; } .header-tenant:hover{background:var(--surface-2)} .tenant-logo{width:28px;height:28px;border-radius:6px;overflow:hidden;background:var(--surface-3);display:grid;place-items:center} .tenant-logo img{width:100%;height:100%;object-fit:contain} .tenant-logo-placeholder{font-size:.55rem;color:var(--text-3)} .tenant-name{font-size:.8rem;font-weight:500;color:var(--text-2)} .tenant-edit{font-size:.75rem;color:var(--accent-text);letter-spacing:.04em} /* Profile saved indicator */ .profile-saved{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--green-dim);border:1px solid rgba(74,222,128,.2);border-radius:var(--radius-xs);margin-bottom:1.5rem;font-size:.8rem;color:var(--green)} .profile-dot{width:8px;height:8px;border-radius:50%;background:var(--green)} /* ── Dashboard ── */ .dash{max-width:1120px;margin:0 auto;padding:3rem 2rem} .dash-welcome{margin-bottom:3rem} .dash-greeting{font-size:.75rem;color:var(--accent-text);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.5rem} .dash-title{font-family:var(--font-display);font-size:2rem;font-weight:400;letter-spacing:.04em;margin-bottom:.25rem} .dash-subtitle{font-size:.85rem;color:var(--text-3)} /* Stats */ .stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-bottom:3rem} @media(max-width:900px){.stats-row{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.stats-row{grid-template-columns:repeat(2,1fr)}} .stat-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:1.5rem;transition:all .3s; } .stat-card:hover{border-color:var(--border-light)} .stat-label{font-size:.7rem;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.75rem} .stat-value{font-family:var(--font-display);font-size:2rem;font-weight:400;letter-spacing:.02em} .stat-unit{font-size:.8rem;color:var(--text-3);margin-left:.25rem} .stat-change{font-size:.7rem;color:var(--green);margin-top:.375rem} /* 3枚集約レイアウト＋反響を主役にするヒーローカード */ .stats-row.stats-3{grid-template-columns:repeat(3,1fr)} .stat-card.stat-hero{border-color:var(--accent);background:var(--accent-dim)} .stat-card.stat-hero .stat-value{color:var(--accent-text)} .stat-card[role="button"]{transition:border-color .2s,transform .2s} .stat-card[role="button"]:hover{transform:translateY(-2px)} .stat-card[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media(max-width:760px){.stats-row.stats-3{grid-template-columns:1fr}} /* ダッシュボードのタブ（作る / 反響を見る の分離） */ .dash-tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--border);margin:0 0 1.75rem} .dash-tab{ display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.15rem; font-size:.95rem;font-weight:600;font-family:inherit;color:var(--text-3); background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px; cursor:pointer;transition:color .15s,border-color .15s; } .dash-tab:hover{color:var(--text)} .dash-tab.active{color:var(--text);border-bottom-color:var(--accent)} .dash-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-xs)} .dash-tab-badge{ display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px; padding:0 6px;font-size:.75rem;font-weight:700;border-radius:999px;background:var(--blue);color:var(--on-blue); } .dash-tab-panel[hidden]{display:none} /* ② 閲覧→反響ファネル（数字だけでなくバーで一目で分かるように） */ .funnel{display:flex;flex-direction:column;gap:.5rem;margin:.4rem 0 .15rem} .funnel-row{display:flex;align-items:center;gap:.6rem} .funnel-k{font-size:.75rem;color:var(--text-3);width:2.4em;flex:0 0 auto} .funnel-track{flex:1;height:10px;background:var(--surface-3);border-radius:999px;overflow:hidden} .funnel-fill{height:100%;border-radius:999px;transition:width .5s cubic-bezier(.22,1,.36,1)} .funnel-fill.is-views{background:var(--border-light)} .funnel-fill.is-leads{background:var(--accent);min-width:4px} .funnel-v{font-size:.78rem;color:var(--text-2);white-space:nowrap;min-width:3.6em;text-align:right} .funnel-v b{font-size:1.05rem;color:var(--text);font-family:var(--font-num)} /* ③ 利用状況バー（プランの上限に対する使用量） */ .usage-plan{font-size:.75rem;font-weight:600;color:var(--text-3);margin-left:.5rem;letter-spacing:0;text-transform:none} .usage{display:flex;flex-direction:column;gap:.55rem;margin:.5rem 0 .1rem} .usage-row{display:flex;flex-direction:column;gap:.28rem} .usage-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.78rem;color:var(--text-2)} .usage-head b{font-size:1.05rem;color:var(--text);font-family:var(--font-num)} .usage-lim{color:var(--text-3); /* 「/200」の分母。.85em だと親(.78rem)から 10.6px まで下がり、全体ルールの 「本文12px未満は使わない」を割っていた。上限の数は電話口でも読む数字なので、 小さく見せたい意図（.85em）は残しつつ12pxを下限にする。 */ font-size:max(12px, .85em)} .usage-track{height:8px;background:var(--surface-3);border-radius:999px;overflow:hidden} .usage-fill{height:100%;width:0;border-radius:999px;background:var(--green);transition:width .5s cubic-bezier(.22,1,.36,1)} .usage-fill.warn{background:var(--orange)} .usage-fill.danger{background:var(--red)} /* 上限に近づく／達したときの「次の一手」（逃げ道） */ .usage-escape{ margin-top:.7rem;padding:.6rem .7rem;border-radius:var(--radius-xs); font-size:.75rem;line-height:1.65; background:var(--orange-dim);color:var(--text-2);border:1px solid transparent; } .usage-escape.danger{background:var(--red-dim)} .usage-escape b{color:var(--text)} /* Section header */ .dash-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem} .dash-section-title{font-family:var(--font-display);font-size:1.2rem;font-weight:400;letter-spacing:.06em} .dash-section-count{font-size:.7rem;color:var(--text-3);letter-spacing:.04em} /* Inquiry list (leads from published LP forms) */ .inquiry-card{ display:flex;gap:1rem;justify-content:space-between;align-items:flex-start; /* 実体のある白いカードに（枠だけで沈むのを解消）。主役は一覧＝反響そのもの。 */ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm); padding:1rem 1.25rem;margin-bottom:.75rem;box-shadow:var(--shadow); transition:border-color .15s,box-shadow .15s; } .inquiry-card:hover{border-color:var(--border-light);box-shadow:var(--shadow-lg)} /* 新着＝いま対応すべきもの。アクセント色はここ（＝行動の合図）に集約する。 */ .inquiry-card.is-new{border-color:var(--accent);border-left:3px solid var(--accent)} /* 対応済み＝役目を終えたもの。白ベタをやめて少しグレーに沈め、新着を引き立てる。 */ .inquiry-card.is-done{background:var(--surface-2);box-shadow:none} .inquiry-card-main{flex:1;min-width:0} .inquiry-card-head{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap;margin-bottom:.4rem} .inquiry-name{font-size:.95rem;font-weight:600;color:var(--text)} .inquiry-date{font-size:.75rem;color:var(--text-3)} .inquiry-meta{font-size:.8rem;color:var(--text-2);margin-bottom:.45rem} .inquiry-message{ font-size:.88rem;color:var(--text-2);line-height:1.7;white-space:pre-wrap;word-break:break-word; background:var(--surface-2);border-radius:var(--radius-xs);padding:.625rem .75rem; } /* 通知メールにしか無かった項目（ご希望日・ご来場人数・ご住所など）を、 お名前や本文と同じ大きさで一覧にも出す。ここが空だと来訪日も送付先も分からない */ .inquiry-fields{display:flex;flex-wrap:wrap;gap:.3rem .75rem;margin-top:.5rem} .inquiry-field{display:flex;gap:.4rem;align-items:baseline;font-size:.875rem;line-height:1.7} .inquiry-field-k{color:var(--text-3);white-space:nowrap} .inquiry-field-v{color:var(--text);font-weight:500;word-break:break-word} .inquiry-badge-new{font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--on-accent);background:var(--accent);padding:.2rem .5rem;border-radius:10px} .inquiry-badge-done{font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--text-2);background:var(--surface-3);padding:.2rem .5rem;border-radius:10px} .inquiry-card-actions{display:flex;flex-direction:column;gap:.4rem;flex-shrink:0;align-items:stretch} .inquiry-card-actions .btn-ai-sm{text-decoration:none;text-align:center;white-space:nowrap} @media(max-width:768px){ .inquiry-card{flex-direction:column} .inquiry-card-actions{flex-direction:row;flex-wrap:wrap} } /* LP Cards grid */ /* LP一覧の「種類で絞り込み」タブ（混在時のみ表示） */ .lp-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0} /* 絞り込み1段ぶん。左に「種類」「状態」の見出しを置く（お問い合わせ側と同じ形） */ .lp-filter-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .375rem} .lp-filter-label{font-size:.75rem;color:var(--text-3);font-weight:500;min-width:56px;flex-shrink:0} .lp-filter-clear{min-height:44px;padding:8px 16px;font-size:.85rem;font-weight:600;color:var(--text-2); background:transparent;border:1px solid var(--border);border-radius:999px;cursor:pointer; font-family:var(--font-body);transition:border-color .15s,color .15s} .lp-filter-clear:hover{border-color:var(--accent);color:var(--accent-text)} .lp-filter-clear:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* 公開中カードの「URLをコピー」「QRをダウンロード」。ホバーではなく常に見える位置に置く （指で触る端末にはホバーが無いため）。高さ44pxはこのプロジェクトのタップ領域の下限。 */ /* 縦に2つ積むと、カードの下半分がボタンで埋まる。横に半分ずつ並べる。 枠線をやめて薄い面にし、カードの中で浮かないようにする（押せる高さ48pxは維持）。 */ .lp-card-share{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:auto;padding-top:.875rem} /* まだ公開していないカードは「編集をつづける」1つだけ。横いっぱいに伸ばす */ .lp-card-share--single{grid-template-columns:1fr} .lp-card-share-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:48px;padding:8px 10px;font-size:.9rem;font-weight:500;color:var(--text-2);background:var(--surface-2);border:1px solid transparent;border-radius:8px;cursor:pointer;font-family:var(--font-body);white-space:nowrap;transition:background .15s,color .15s} .lp-card-share-btn:hover{background:var(--surface-3);color:var(--text)} .lp-card-share-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .lp-card-share-btn svg{flex:0 0 auto} /* QRを作っている間。押せなくして、連打で同じ絵が何枚も落ちるのを防ぐ */ .lp-card-share-btn[disabled]{opacity:.55;cursor:progress} .lp-card-share-btn[disabled]:hover{border-color:var(--border);color:var(--text-2)} /* 「掲載をやめる」。配るための2つ（URL・QR）より一段静かに、でも押せると分かる形にする。 取り下げるだけで内容は残る操作なので、削除と同じ赤にはしない（押すのが怖くなる）。 */ .lp-card-stop{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:48px;margin-top:.5rem;padding:8px 10px;font-size:.9rem;font-weight:500;color:var(--text-3);background:transparent;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-family:var(--font-body);white-space:nowrap;transition:background .15s,color .15s,border-color .15s} .lp-card-stop:hover{background:var(--surface-2);color:var(--text-2);border-color:var(--text-3)} .lp-card-stop:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .lp-card-stop svg{flex:0 0 auto} /* 確認ダイアログの中に置く追加の入力（公開のタイミングなど）。 入力欄の高さは48pxで統一する（数値で揃えないと、日付と時刻で段差が出る）。 */ .confirm-extra{margin:1rem 0 0;text-align:left} .pub-when{padding:.875rem 1rem;background:var(--surface-2);border-radius:8px} .pub-when-title{font-size:.8rem;font-weight:700;color:var(--text-3);letter-spacing:.04em;margin-bottom:.5rem} .pub-when-opt{display:flex;align-items:center;gap:.6rem;min-height:44px;font-size:.95rem;color:var(--text);cursor:pointer} .pub-when-opt input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex:0 0 auto} .pub-when-fields{display:flex;gap:.5rem;margin:.25rem 0 .5rem 1.85rem} /* 日付と時刻は中身の作りが違うぶん勝手に伸びる。min-height では揃わないので height で固定する */ .pub-when-fields .form-input{height:48px;min-height:48px;font-size:.95rem;padding:0 .75rem} .pub-when-fields .form-input[type=date]{flex:1 1 60%} .pub-when-fields .form-input[type=time]{flex:1 1 40%} .pub-when-note{margin:0 0 0 1.85rem;font-size:.8rem;line-height:1.7;color:var(--text-3)} /* いま公開中のページを予約で止めるときだけ、注意として色を変える */ .pub-when-note.is-warn{color:var(--orange,#f5a524);font-weight:500} @media (max-width:480px){ .pub-when-fields{flex-direction:column;margin-left:1.85rem} .pub-when-fields .form-input[type=date],.pub-when-fields .form-input[type=time]{flex:1 1 auto} } /* 選んでいないものは「ただの文字」。選んだ1つだけが塗られる。 枠線の丸を7個並べると、一覧より絞り込みのほうが目立ってしまう。 押せる大きさ（44px）は変えていない——見た目を静かにしただけ。 */ .lp-filter-tab{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:8px 14px;font-size:.9rem;font-weight:500;color:var(--text-2);background:transparent;border:1px solid transparent;border-radius:999px;cursor:pointer;transition:background .15s,color .15s} .lp-filter-tab:hover{background:var(--surface-2);color:var(--text)} .lp-filter-tab.active{background:var(--surface-3);color:var(--text);font-weight:700} .lp-filter-count{font-size:.78rem;font-weight:500;color:var(--text-3)} .lp-filter-tab.active .lp-filter-count{color:var(--text-2)} /* もう片方の絞り込みのせいで0件になったものは、押せない見た目にする */ .lp-filter-tab.is-empty{opacity:.4;cursor:default} .lp-filter-tab.is-empty:hover{background:transparent;color:var(--text-2)} .lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:3rem} .lp-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); overflow:hidden;transition:all .35s cubic-bezier(.22,1,.36,1);cursor:pointer; /* 同じ行のカードは同じ高さになる。余った高さは本文側で吸収し、 共有ボタンはどのカードでも同じ高さ（カードの下端）に並ぶようにする。 */ display:flex;flex-direction:column; } .lp-card:hover{border-color:var(--border-light);transform:translateY(-3px);box-shadow:var(--shadow-lg)} .lp-card-thumb{ aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--surface-2); } .lp-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)} .lp-card:hover .lp-card-thumb img{transform:scale(1.04)} .lp-card-thumb-overlay{ position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 40%); opacity:0;transition:opacity .3s;display:flex;align-items:flex-end;justify-content:center;padding:1rem;gap:.5rem; } /* マウスを乗せたときだけ出る帯なので、キーボードで中のボタンに移ったときも出す。 出さないと、フォーカスは当たっているのに画面には何も見えない。 */ .lp-card:hover .lp-card-thumb-overlay, .lp-card:focus-within .lp-card-thumb-overlay{opacity:1} .lp-card-open-badge{ position:absolute;top:10px;right:10px;z-index:2; display:inline-flex;align-items:center;gap:4px; padding:6px 10px;border-radius:999px; background:rgba(0,0,0,.65);backdrop-filter:blur(6px); color:#fff;font-size:.75rem;font-weight:500;font-family:inherit; border:1px solid rgba(255,255,255,.2); cursor:pointer;transition:background .2s; } /* 札は小さいままにしたいので、丸は太らせずに当たり判定だけ44pxに広げる （見学会・土地のLPで拡大ビューの×に使ったのと同じやり方）。 */ .lp-card-open-badge::after{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:max(100%,44px);height:44px; } .lp-card-open-badge:hover{background:rgba(0,0,0,.85)} .lp-card-action{ display:inline-flex;align-items:center;justify-content:center; /* 押せる大きさの下限44px。指で触る端末でも確実に押せること */ min-height:44px; padding:.5rem 1.25rem;background:rgba(255,255,255,.15);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-xs); font-size:.75rem;font-family:inherit;color:#fff;font-weight:500;letter-spacing:.04em;cursor:pointer;transition:all .2s; } .lp-card-action:hover{background:rgba(255,255,255,.25)} .lp-card-action-danger{border-color:rgba(248,113,113,.3);color:var(--red)} .lp-card-action-danger:hover{background:rgba(248,113,113,.2)} /* Status dropdown */ .lp-card-status-wrap{position:relative;display:inline-flex} .status-menu{ position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%); background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm); /* 固定ヘッダー（z-index:100）の裏に潜らせない。潜ると「押しても何も出ない」に見える */ padding:.375rem;min-width:140px;z-index:120; box-shadow:0 8px 24px rgba(0,0,0,.5); display:none; } /* 上に収まらないときは下へ開く（JS が付け外しする） */ .status-menu.drop-down{bottom:auto;top:calc(100% + 6px)} .status-menu.show{display:block} .status-menu-item{ display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:var(--radius-xs); /* button に直したので、見た目は元のままになるよう素の装飾を消す */ width:100%;text-align:left;background:none;border:none;font-family:inherit; min-height:44px; font-size:.75rem;color:var(--text-2);cursor:pointer;transition:all .15s;white-space:nowrap; } .status-menu-item:hover{background:var(--surface-2);color:var(--text)} .status-dot{width:6px;height:6px;border-radius:50%;flex:none;display:block} /* More badges */ .badge-ended{background:var(--red-dim,rgba(248,113,113,.12));color:var(--red,#f87171)} .badge-active-event{background:var(--blue-dim);color:var(--blue)} .lp-card-body{padding:1.25rem;flex:1;display:flex;flex-direction:column} .lp-card-title{font-size:.9rem;font-weight:500;margin-bottom:.25rem} .lp-card-meta{font-size:.75rem;color:var(--text-3);display:flex;align-items:center;gap:.75rem} .lp-card-badge{ /* 12px未満にしない（全体ルール）。押すとメニューが出るボタンでもあるので、 丸は太らせずに当たり判定だけ44pxへ広げる。 */ position:relative;font-size:.75rem;padding:.2rem .5rem;border-radius:4px;font-weight:600;letter-spacing:.04em; border:none;font-family:inherit; } button.lp-card-badge::after{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:max(100%,44px);height:44px; } .badge-live{background:var(--green-dim);color:var(--green)} /* 下書きは「まだ公開前」の中立状態。アクセント色を外して無彩色にする */ .badge-draft{background:var(--surface-3);color:var(--text-2)} /* New LP card */ .lp-card-new{ background:var(--surface);border:1.5px dashed var(--border-light);border-radius:var(--radius); display:flex;flex-direction:column;align-items:center;justify-content:center; min-height:240px;cursor:pointer;transition:all .3s; } .lp-card-new:hover{border-color:var(--accent);background:var(--accent-dim)} .lp-card-new-icon{ width:48px;height:48px;border-radius:50%;border:1.5px solid var(--border-light); display:grid;place-items:center;margin-bottom:.75rem; font-size:1.25rem;color:var(--text-3);transition:all .3s; } .lp-card-new:hover .lp-card-new-icon{border-color:var(--accent);color:var(--accent-text)} .lp-card-new-text{font-size:.8rem;color:var(--text-3);font-weight:500;transition:color .3s} .lp-card-new:hover .lp-card-new-text{color:var(--accent-text)} /* Notice board (from admin) */ .notice-board{margin-bottom:2.5rem} .notice-board-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem} .notice-board-title{font-size:.78rem;color:var(--text-2);letter-spacing:.12em;text-transform:uppercase;font-weight:500} .notice-board-title::before{content:"📣";margin-right:.4rem} .notice-count{font-size:.75rem;color:var(--text-3);padding:2px 8px;background:var(--surface-2);border-radius:10px} .notice-list{display:flex;flex-direction:column;gap:.65rem} .notice-card{ background:var(--surface);border:1px solid var(--border);border-radius:12px; padding:14px 18px;display:flex;gap:14px;align-items:flex-start; transition:border-color .2s,background .2s;cursor:pointer; /*