@charset "utf-8"; /* ============================================================ クルマの相談窓口共通スタイル（css/soudan.css） ------------------------------------------------------------ 設置範囲： - soudan/index.html・soudan/thanks.html（フォーム版・独立ページ） - html/SpSlct.html（追従バナー・チャットパネルのみ。この2ファイルからのみ読み込む）既存の css/style.css・js/common.js には統合しない専用ファイル。他ページへ影響を出さないため、body等への裸のタグセレクタは使わず .sd-page（独立ページ用）／.sd-banner／.sd-panel 配下のクラスのみで完結させる。 ============================================================ */ :root{ --sd-red:#e30613; --sd-red-dark:#b00010; --sd-bg:#0b0c0d; --sd-panel-bg:#141719; --sd-panel-bg-2:#1b1f22; --sd-line:#2b3036; --sd-line-strong:#3a4046; --sd-txt:#e9ecee; --sd-txt-sub:#9aa1a9; --sd-txt-mute:#6f767d; --sd-font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; } /* ============================================================ フォーム版ページ全体 soudan/index.html・thanks.html はで使う ============================================================ */ .sd-page{ margin:0; background:var(--sd-bg); color:var(--sd-txt); font-family:var(--sd-font); font-size:15px; line-height:1.8; padding-top:40px; /* 固定サイトヘッダー分（html/SpSlct.htmlと同じ値） */ } .sd-page a{color:inherit;} .sd-page img,.sd-page svg{vertical-align:top;} .sd-wrap{max-width:720px;margin:0 auto;padding:0 20px 72px;} /* ---- ヘッダー ---- */ .sd-head{ padding:52px 0 34px; text-align:center; border-bottom:1px solid var(--sd-line); margin-bottom:34px; } .sd-icon{width:82px;height:82px;margin:0 auto 16px;display:block;} .sd-eyebrow{ font-size:10px;letter-spacing:.24em;font-weight:700;color:var(--sd-red); margin:0 0 6px; } .sd-title{font-size:26px;font-weight:700;letter-spacing:.04em;margin:0;line-height:1.4;} .sd-lead{font-size:14px;color:var(--sd-txt-sub);margin:14px 0 0;} /* ---- カード（フォーム版の外枠） ---- */ .sd-card{ background:var(--sd-panel-bg); border:1px solid var(--sd-line); border-radius:14px; padding:26px 24px; } .sd-card + .sd-card{margin-top:18px;} .sd-card h2{ font-size:16px;font-weight:700;letter-spacing:.04em; margin:0 0 4px; padding-left:12px;border-left:3px solid var(--sd-red); } .sd-card .sd-note{font-size:12px;color:var(--sd-txt-mute);margin:0 0 22px;padding-left:12px;} /* ============================================================ フォーム部品（フォーム版・パネル版共通） ============================================================ */ .sd-field{margin-bottom:20px;} .sd-label{ display:flex;align-items:center;gap:8px; font-size:13px;font-weight:700;margin-bottom:7px; } .sd-req,.sd-any{ font-size:9.5px;font-weight:700;letter-spacing:.06em; padding:2px 6px;border-radius:3px;line-height:1.5; } .sd-req{background:var(--sd-red);color:#fff;} .sd-any{background:#2b3036;color:var(--sd-txt-sub);} .sd-hint{font-size:11.5px;color:var(--sd-txt-mute);margin:6px 0 0;line-height:1.6;} .sd-note-inline{font-size:11.5px;color:var(--sd-red);margin:8px 0 0;line-height:1.6;} .sd-input,.sd-select,.sd-textarea{ width:100%; background:#0e1112; border:1px solid var(--sd-line-strong); border-radius:8px; color:var(--sd-txt); font-family:inherit;font-size:15px; padding:12px 13px; transition:border-color .2s ease, box-shadow .2s ease; } .sd-textarea{min-height:118px;resize:vertical;line-height:1.7;} .sd-select{ appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239aa1a9'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center;background-size:20px; padding-right:38px; } .sd-input::placeholder,.sd-textarea::placeholder{color:#565c62;} .sd-input:focus,.sd-select:focus,.sd-textarea:focus{ outline:none;border-color:var(--sd-red);box-shadow:0 0 0 3px rgba(227,6,19,.18); } .sd-input.is-error,.sd-select.is-error,.sd-textarea.is-error{border-color:#ff5a4d;} .sd-choices{display:flex;flex-wrap:wrap;gap:8px;} .sd-choice{position:relative;} .sd-choice input{position:absolute;opacity:0;width:0;height:0;} .sd-choice span{ display:block;cursor:pointer; font-size:13px;padding:9px 15px; border:1px solid var(--sd-line-strong);border-radius:999px; color:var(--sd-txt-sub); transition:all .18s ease; } .sd-choice input:checked + span{background:var(--sd-red);border-color:var(--sd-red);color:#fff;font-weight:700;} .sd-choice input:focus-visible + span{outline:2px solid #fff;outline-offset:2px;} .sd-consent{ display:flex;gap:10px;align-items:flex-start; background:var(--sd-panel-bg-2);border:1px solid var(--sd-line);border-radius:8px; padding:14px;font-size:12.5px;color:var(--sd-txt-sub);line-height:1.7; } .sd-consent input{margin:3px 0 0;width:17px;height:17px;accent-color:var(--sd-red);flex:none;} .sd-consent a{color:#fff;text-underline-offset:3px;} .sd-error{ display:none;color:#ff6b5e;font-size:12.5px;margin-top:8px; } .sd-error.is-shown{display:block;} .sd-submit{ width:100%;height:56px;margin-top:8px; border:0;border-radius:10px;cursor:pointer; background:linear-gradient(135deg,var(--sd-red) 0%,var(--sd-red-dark) 100%); color:#fff;font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.06em; display:flex;align-items:center;justify-content:center;gap:8px; transition:filter .2s ease, transform .1s ease; } .sd-submit:hover{filter:brightness(1.12);} .sd-submit:active{transform:scale(.99);} .sd-submit:disabled{opacity:.55;cursor:default;filter:none;} .sd-foot{ text-align:center;font-size:12px;color:var(--sd-txt-mute); margin-top:34px;padding-top:22px;border-top:1px solid var(--sd-line); } .sd-foot a{color:var(--sd-txt-sub);} /* ---- 送信完了 ---- */ .sd-done{display:none;text-align:center;padding:20px 0 10px;} .sd-done.is-shown{display:block;} .sd-done h2{border:0;padding:0;font-size:19px;margin:16px 0 10px;} .sd-done p{font-size:13.5px;color:var(--sd-txt-sub);margin:0;} .sd-done .sd-check{ width:62px;height:62px;margin:0 auto;border-radius:50%; background:rgba(227,6,19,.14);border:1px solid var(--sd-red); display:flex;align-items:center;justify-content:center; font-size:28px;color:var(--sd-red); } .is-hidden{display:none !important;} /* ---- ハニーポット（視覚的に隠す。display:noneはボットに検出されやすいためオフスクリーン方式） ---- */ .sd-hp{ position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px !important;height:1px !important; overflow:hidden !important; } /* ============================================================ チャットUI（フォーム版のフォールバック説明には使わず、パネル版で使用） ============================================================ */ .sd-chat{ display:flex;flex-direction:column; height:min(70vh,560px); background:var(--sd-panel-bg);border:1px solid var(--sd-line);border-radius:14px;overflow:hidden; } .sd-chat-head{ display:flex;align-items:center;gap:10px; padding:12px 16px;border-bottom:1px solid var(--sd-line);background:var(--sd-panel-bg-2); } .sd-chat-head-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0;} .sd-chat-head .nm{font-size:13px;font-weight:700;} .sd-chat-head .st{font-size:10.5px;color:var(--sd-txt-mute);} .sd-log{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px;} .sd-msg{display:flex;gap:9px;max-width:88%;} .sd-msg .bubble{ font-size:14px;line-height:1.75;padding:11px 14px;border-radius:12px;white-space:pre-wrap;word-break:break-word; } .sd-msg.bot .bubble{background:var(--sd-panel-bg-2);border:1px solid var(--sd-line);border-top-left-radius:3px;} .sd-msg.me{align-self:flex-end;} .sd-msg.me .bubble{background:var(--sd-red);color:#fff;border-top-right-radius:3px;} .sd-avatar{width:30px;height:30px;flex:none;border-radius:50%;} .sd-typing span{ display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%; background:var(--sd-txt-mute);animation:sd-blink 1.2s infinite; } .sd-typing span:nth-child(2){animation-delay:.2s;} .sd-typing span:nth-child(3){animation-delay:.4s;} @keyframes sd-blink{0%,60%,100%{opacity:.25;}30%{opacity:1;}} .sd-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;} .sd-chip{ background:transparent;border:1px solid var(--sd-line-strong);border-radius:999px; color:var(--sd-txt-sub);font-family:inherit;font-size:12.5px;padding:7px 13px;cursor:pointer; } .sd-chip:hover{border-color:var(--sd-red);color:#fff;} .sd-inputbar{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--sd-line);background:var(--sd-panel-bg-2);} .sd-inputbar textarea{ flex:1;min-height:44px;max-height:120px;resize:none; background:#0e1112;border:1px solid var(--sd-line-strong);border-radius:10px; color:var(--sd-txt);font-family:inherit;font-size:15px;padding:11px 12px;line-height:1.5; } .sd-inputbar textarea:focus{outline:none;border-color:var(--sd-red);} .sd-send{ flex:none;width:48px;border:0;border-radius:10px;cursor:pointer; background:var(--sd-red);color:#fff;font-size:17px; } .sd-send:disabled{opacity:.45;cursor:default;} /* フォームで送るへのフォールバック導線 */ .sd-fallback-link{ display:flex;align-items:center;justify-content:center;gap:5px; font-size:13px;font-weight:700;color:var(--sd-txt); padding:10px 12px; background:var(--sd-panel-bg-2); border-bottom:1px solid var(--sd-line); text-decoration:underline;text-underline-offset:3px; } .sd-fallback-link:hover{color:#fff;background:var(--sd-line);} /* パネル内の連絡先フォーム表示切替。会話ログは隠さず、フォームを会話の下に追加する形にする（フォーム表示の瞬間に最後のAIメッセージが見えなくなる問題を避けるため） */ .sd-panel-form{display:none;padding:18px 16px;} .sd-chat.is-form-mode{overflow-y:auto;} .sd-chat.is-form-mode .sd-log{flex:none;overflow:visible;} .sd-chat.is-form-mode .sd-chips, .sd-chat.is-form-mode .sd-inputbar{display:none;} .sd-chat.is-form-mode .sd-panel-form{display:block;} .sd-panel .sd-field{margin-bottom:14px;} @media (max-width:600px){ .sd-head{padding:36px 0 26px;} .sd-title{font-size:21px;} .sd-card{padding:22px 16px;border-radius:12px;} .sd-chat{height:calc(100vh - 320px);min-height:380px;} } /* ============================================================ 追従バナー（html/SpSlct.html 専用） PC：右下フローティングカード／SP：下部フル幅バー ============================================================ */ .sd-banner{ position:fixed; z-index:9990; /* 旧・試乗バナー（css/style.css内コメントアウト分）の9999と衝突しない値 */ font-family:var(--sd-font); opacity:0;visibility:hidden;transform:translateY(24px); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1), visibility .45s; } .sd-banner.is-visible{opacity:1;visibility:visible;transform:translateY(0);} .sd-banner.is-closed{display:none;} .sd-banner.is-hidden-footer{opacity:0;visibility:hidden;pointer-events:none;} .sd-banner-link{ display:block;width:100%;text-align:left; font:inherit;color:#fff;text-decoration:none;cursor:pointer;padding:0; background:linear-gradient(160deg,#1d2126 0%,#101214 100%); border:1px solid var(--sd-line); box-shadow:0 18px 40px rgba(0,0,0,.55); -webkit-tap-highlight-color:transparent; } .sd-banner-art{position:relative;flex:none;display:block;} /* flexアイテムはデフォルトmin-width:autoで縮まないため、明示的に0にしないと sd-banner-lead(nowrap)がボタンの下に潜り込んで重なって見える */ .sd-banner-txt{min-width:0;overflow:hidden;} .sd-banner-art img{display:block;width:100%;height:100%;} .sd-banner-art::after{ content:"";position:absolute;inset:0;border-radius:50%; box-shadow:0 0 0 0 rgba(227,6,19,.45); animation:sd-banner-pulse 2.8s ease-out infinite; } @keyframes sd-banner-pulse{ 0%{box-shadow:0 0 0 0 rgba(227,6,19,.45);} 70%{box-shadow:0 0 0 14px rgba(227,6,19,0);} 100%{box-shadow:0 0 0 0 rgba(227,6,19,0);} } .sd-banner-eyebrow{display:block;font-size:9px;letter-spacing:.18em;font-weight:700;color:var(--sd-red);} .sd-banner-title{display:block;font-weight:700;line-height:1.25;letter-spacing:.02em;} .sd-banner-lead{display:block;color:#9aa1a9;line-height:1.5;} .sd-banner-cta{ display:flex;align-items:center;justify-content:center;gap:6px; background:linear-gradient(135deg,var(--sd-red) 0%,var(--sd-red-dark) 100%); color:#fff;font-weight:700;white-space:nowrap; transition:filter .2s ease; } .sd-banner-cta svg{width:12px;height:12px;fill:currentColor;transition:transform .2s ease;} .sd-banner-link:hover .sd-banner-cta{filter:brightness(1.12);} .sd-banner-link:hover .sd-banner-cta svg{transform:translateX(3px);} .sd-banner-close{ position:absolute;display:flex;align-items:center;justify-content:center; width:26px;height:26px;padding:0;border-radius:50%; border:1px solid var(--sd-line);background:#0d0f11;color:#c8ccd2; font-size:15px;line-height:1;cursor:pointer;z-index:2; } .sd-banner-close:hover{background:var(--sd-red);border-color:var(--sd-red);color:#fff;} .sd-banner-link:focus-visible,.sd-banner-close:focus-visible{outline:2px solid #fff;outline-offset:2px;} @media (min-width:768px){ /* bottom:96pxは既存の#page-top（トップへ戻るボタン、css/style.css：bottom20px+height48px）と Y軸で重ならないようにするためのオフセット。#page-topを変更する場合はこの値も見直すこと */ .sd-banner{right:24px;bottom:96px;width:322px;} .sd-banner-link{border-radius:14px;padding:18px 18px 16px;overflow:hidden;position:relative;} .sd-banner-link::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--sd-red),#ff5a4d); } .sd-banner-head{display:flex;align-items:center;gap:13px;} .sd-banner-art{width:62px;height:62px;} .sd-banner-title{font-size:17px;margin-top:2px;} .sd-banner-lead{font-size:11.5px;margin-top:10px;} .sd-banner-cta{margin-top:13px;border-radius:8px;height:42px;font-size:14px;} .sd-banner-close{top:-9px;right:-9px;} } @media (max-width:767px){ .sd-banner{ left:0;right:0;bottom:0;width:100%; padding-bottom:env(safe-area-inset-bottom); background:#101214;border-top:1px solid var(--sd-line); box-shadow:0 -8px 24px rgba(0,0,0,.5); } .sd-banner-link{display:flex;align-items:center;gap:10px;background:none;border:0;box-shadow:none;padding:9px 12px;} .sd-banner-head{display:flex;align-items:center;gap:10px;flex:1;min-width:0;} .sd-banner-art{width:42px;height:42px;} .sd-banner-eyebrow{font-size:8px;letter-spacing:.14em;} .sd-banner-title{font-size:14px;} .sd-banner-lead{font-size:10px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sd-banner-cta{flex:none;border-radius:999px;height:38px;padding:0 16px;font-size:13px;} .sd-banner-close{top:-13px;right:10px;background:#181b1e;} } /* ============================================================ チャットパネル本体（html/SpSlct.html 専用） .sd-chat（チャットUI）を配置専用の外枠でラップする ============================================================ */ .sd-panel{ position:fixed; z-index:9991; /* バナー(9990)より前面。remodalのライトボックスとの重なりは実機確認要 */ display:none; flex-direction:column; font-family:var(--sd-font); color:var(--sd-txt); font-size:15px; line-height:1.8; } .sd-panel.is-open{display:flex;} .sd-panel .sd-chat{height:100%;} @media (min-width:768px){ /* バナーと同じ理由で#page-topとの重なりを避ける */ .sd-panel{right:24px;bottom:96px;width:340px;} .sd-panel .sd-chat{height:min(64vh,560px);border-radius:14px;} } @media (max-width:767px){ .sd-panel{ left:0;right:0;bottom:0;width:100%; max-height:min(82vh,640px); padding-bottom:env(safe-area-inset-bottom); } .sd-panel .sd-chat{ height:100%; border-top-left-radius:16px;border-top-right-radius:16px;border-bottom:0; } } /* 最小化ボタン */ .sd-minimize{ flex:none;width:30px;height:30px;border-radius:50%; border:1px solid var(--sd-line-strong);background:transparent;color:var(--sd-txt-sub); font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center; line-height:1; } .sd-minimize:hover{background:var(--sd-red);border-color:var(--sd-red);color:#fff;} .sd-minimize:focus-visible{outline:2px solid #fff;outline-offset:2px;} @media (prefers-reduced-motion:reduce){ .sd-banner,.sd-panel,.sd-input,.sd-select,.sd-textarea,.sd-submit,.sd-minimize,.sd-choice span{ transition:none !important; } .sd-banner-art::after,.sd-typing span{animation:none !important;} }