#chat-box.dac-hidden {display: none !important;} /* チャット用VRMキャンバス */ #vrm-avatar {position: relative;} #vrm-avatar canvas {width: 100vw;height: 100svh;display: block;} /* VRM読み込み完了後の表示 */ #vrm-avatar.loaded {opacity: 1 !important;} /* safe-area 変数（通常端末では 0、iOS系では >0） */ :root{ --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); } /* ----- ランチャー ------------------ */ #chat-toggle-button {position: fixed;bottom: -2%;left: calc(40% + 30px);cursor: pointer;z-index: 9999;} /* 吹き出しスタイル */ .fukidashi-02-03 {position: absolute;left: 50%;bottom: 72%;transform: translateX(-50%) scaleX(-1);display: grid;place-items: center;width: 86px;height: 86px;border: 1px solid #333333;border-radius: 50%;cursor: pointer;} .fukidashi-02-03::before {content: "";position: absolute;bottom: -5px;left: 50%;transform: translateX(-50%) rotate(135deg);width: 15px;height: 15px;box-sizing: border-box;background-color: #ffffff;} .fukidashi-02-03::after {content: "";position: absolute;top: 104%;left: 50%;transform: translateX(-50%) rotate(50deg);width: 16px;height: 1px;box-sizing: border-box;background-color: #333333;} .fukidashi-02-03 > .ornament {position: absolute;width: 100%;height: 100%;transform: translateX(1px) translateY(3px); border-radius: 50%;background-color: #fcf9f7;pointer-events: none; mix-blend-mode: multiply;} .fukidashi-02-03 > div {position: relative;z-index: 1;color: #4c1c26;font-weight: bold;font-size: 11px;line-height: 1.3;text-align: center;white-space: nowrap;transform: scaleX(-1) translateY(5px);letter-spacing: 1px;} .fukidashi-02-03 > div em {color: #6b7fb8;font-style: normal;font-size: 14px;line-height: 24px;} /* 大きいバナー/画像はクリック無効化 */ #chat-toggle-button, #chat-toggle-image { pointer-events: none;} /* 小さい起動ボタンと×はクリック有効 */ #chat-open-hotspot, #chat-launch-close { pointer-events: auto;} /* 吹き出しもクリック可にする */ #chat-toggle-button .fukidashi-02-03 { pointer-events: auto; } /* 装飾や疑似要素はクリック優先しないよう保護（注意） */ #chat-toggle-button .fukidashi-02-03::before, #chat-toggle-button .fukidashi-02-03::after, #chat-toggle-button .fukidashi-02-03 .ornament { pointer-events: none; } /* ------ チャットボックス全体 -------------- */ #chat-box {position: fixed;bottom: 10px;right: 10px;z-index: 9998;width: 360px;height: 480px;border-radius: 100px 10px 10px 10px;display: flex;flex-direction: column;overflow: hidden;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);background: #fff;font-weight: 300;} #chat-box.fullscreen {position: fixed;top: 0;left: 0;height: 100vh;width: 100vw;z-index: 9999;border-radius: 0;} /*-----チャットボックスヘッダー（タイトル・3つのボタン・動画）---------------------------------- */ #chat-box .chat-header {padding: 0;box-sizing: border-box;overflow: hidden;} /* 上段：3つのボタン */ #chat-box .chat-header-top {display: flex;justify-content: flex-end;margin-bottom: 0px;} #chat-box .chat-buttons {display: flex;gap: 2px;justify-content: flex-end;align-items: center;} #chat-box .chat-buttons .chat-btn {background: none;border: none;margin-left: 0px;cursor: pointer;padding: 8px 6px;display: flex;align-items: center;justify-content: center;} #chat-box.fullscreen .chat-buttons .chat-btn {padding: 8px 10px;} #chat-box .chat-buttons svg {width: 22px;height: 22px;transition: transform 0.2s;} #chat-box.fullscreen .chat-buttons svg {width: 25px;height: 25px;transition: transform 0.2s;} #chat-box .chat-buttons .chat-btn:hover svg {transform: scale(1.2);} /* 下段：本体テキスト */ #chat-box .chat-header-main {display: flex;align-items: center;gap: 0px;width: 100%;margin: 0 auto;justify-content: center;} #chat-box.fullscreen .chat-header-main {width: 80%;max-width: 800px;} #chat-box .chat-character {width: 69%;height: 150px; transform: translateY(-1px) scale(1.0);position: relative;} #chat-box.fullscreen .chat-character {width: 42%;height: 285px;position: relative;transform: translateY(-7px) scale(1.2);} #chat-box .chat-character video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: transparent; opacity: 0; /* デフォルトは非表示 */ transition: opacity .18s linear; /* フェード用途 */ will-change: opacity; } #chat-box .chat-character video.is-active { opacity: 1; } #chat-box.fullscreen .chat-character video {width: 250px;height: 300px;object-fit: cover;object-position: top;transform: translate( 12%, -8%);} #chat-box .chat-description {width: 56%;text-align: center;padding-right: 24px;z-index: 100;transform: translateY(-8px);} #chat-box.fullscreen .chat-description {width: 56%;padding-right: 0px;transform: translateY( 0px) translateX(-32px);} #chat-box .chat-label-wrapper {position: relative;display: inline-block;width: 90%;height: 42px;} #chat-box.fullscreen .chat-label-wrapper {width: 250px;height: 50px;} #chat-box .chat-label-frame {position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;} #chat-box .chat-label-text {position: absolute;top: calc(56% + 2px);left: 50%;transform: translate(-50%, -50%);font-size: 10.5px;color: #1f1f1f;font-family: '游明朝', 'Yu Mincho', 'YuMincho', serif;white-space: nowrap;letter-spacing: 0px;} #chat-box.fullscreen .chat-label-text {font-size: 13.5px;} #chat-box .chat-description .chat-title {margin-top: 0;} #chat-box.fullscreen .chat-description .chat-title {width: 94%;margin: 16px auto 0;} #chat-box .chat-description .chat-title img {width: 100%;height: auto;} #chat-box .chat-description .chat-subtitle {font-size: 10px;color: #1f1f1f;font-family: '游明朝', 'Yu Mincho', 'YuMincho', serif;margin: 2px 0 0;letter-spacing: 0px;} #chat-box.fullscreen .chat-subtitle {font-size: 13px;margin-top: 8px;} /* -------　チャット本体エリア----------------- */ #chat-box .chat-body {flex: 1;overflow-y: auto;padding: 12px 12px;background: #edf1fa;margin: 0;} #chat-box.fullscreen .chat-body {width: 86%;max-width: 850px;margin: 0 auto;padding: 40px;padding-bottom: calc(env(safe-area-inset-bottom) + 120px) !important;} /* 外トラッパー */ #chat-box .chat-body-wrapper {display: flex;justify-content: center;margin: 0 auto;} /* 下段：本体テキスト */ #chat-box .chat-body-box {background: #fff;border-radius: 16px;padding: 6px 0 0;width: 100%;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);} #chat-box.fullscreen .chat-body-box {width: 92%;padding: 16px 0;padding-bottom: calc(env(safe-area-inset-bottom) + 24px) !important;} /* 以下の項目から選択 */ #chat-box .chat-intro {display: flex;align-items: center;justify-content: center;gap: 8px;color: #1f1f1f;font-family: '游明朝', 'Yu Mincho', 'YuMincho', serif;font-weight: 400;font-size: 12px;margin-bottom: 10px;padding: 8px 0;letter-spacing: 0.5px;} #chat-box.fullscreen .chat-intro {font-size: 14px;margin-bottom: 20px;} /* アイコン非表示（復活時はdisplay:noneを削除） */ #chat-box .chat-intro-icon {display: none;width: 24px;height: 24px;} /* -----------　　選択肢リスト（ボタン）　------------- */ #chat-box .chat-option-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 12px;width: 92%;margin: 0 auto;} #chat-box.fullscreen .chat-option-grid {width: 82%;margin: 0 auto;max-width: 825px;gap: 20px;grid-template-columns: repeat(4, 1fr);} /* 各カードスタイル */ #chat-box .chat-option-card {background: #fff;border-radius: 8px;padding: 7px 2px;text-align: center;cursor: pointer;transition: transform 0.2s, box-shadow 0.2s;display: flex;flex-direction: column;align-items: center;position: relative;overflow: visible;z-index: 0;} #chat-box .chat-option-card::before{content: "";position: absolute;left: -3px;right: -3px;top: -3px;bottom: -3px;background: url("../img/chatbot/btn_back.png") center / cover no-repeat;z-index: 0;pointer-events: none;border-radius: 8px;filter: blur(2px);} #chat-box .chat-option-card::after{content: "";position: absolute;inset: 0;background: #fff;border-radius: inherit;z-index: 1;pointer-events: none;} #chat-box .chat-option-card > *{position: relative;z-index: 2;} #chat-box.fullscreen .chat-option-card {padding: 20px 10px;width: 82%;margin: 0 auto;} #chat-box.fullscreen .chat-option-card::before{content: "";position: absolute;left: -5px;right: -5px;top: -5px;bottom: -5px;background: url("../img/chatbot/btn_back.png") center / cover no-repeat;z-index: 0;pointer-events: none;border-radius: 8px;filter: blur(3.5px);} #chat-box .chat-option-card img {width: 34px;height: 34px;margin-bottom: 4px;} #chat-box.fullscreen .chat-option-card img {width: 36px;height: 36px;margin-bottom: 8px;} #chat-box .chat-option-card p {margin: 0;font-size: 10px;color: #1f1f1f;font-family: '游明朝', 'Yu Mincho', 'YuMincho', serif;font-weight: 400;letter-spacing: 0px;} #chat-box.fullscreen .chat-option-card p {font-size: 12.5px;} #chat-box .chat-option-card:hover {transform: translateY(-3px);box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);} /* ----------　　入力エリア（テキスト＋送信ボタン）----------------- */ #chat-box .chat-input-area {background: #fff;border-top: 1px solid #eee;padding: 8px 10px;display: flex;gap: 8px;} #chat-box.fullscreen .chat-input-area {position: fixed;bottom: calc(env(safe-area-inset-bottom) + 0px);left: 50%;transform: translateX(-50%);width: 100%;max-width: none;background: #fff;padding: 16px 40px 20px;border-top: 1px solid #eee;box-sizing: border-box;z-index: 1000;margin: 0;} #chat-box .chat-input {flex: 1;border: 1px solid #ccc;border-radius: 6px;padding: 12px 8px;font-size: 13px;} #chat-box.fullscreen .chat-input {flex: 1;border: 1px solid #ccc;border-radius: 6px;padding: 16px 8px;font-size: 13px;} #chat-box .chat-send-btn {background: linear-gradient(to right, #6b7fb8, #8fa3d4);color: #fff;border: none;border-radius: 6px;padding: 6px 12px;font-weight: bold;cursor: pointer;font-size: 12px;letter-spacing: 0.15em;} /* マイクボタン */ #chat-box .chat-mic-btn {background: #edf1fa;border: 1.5px solid #8fa3d4;border-radius: 6px;padding: 6px 8px;cursor: pointer;display: flex;align-items: center;justify-content: center;color: #6b7fb8;transition: background 0.2s, border-color 0.2s, color 0.2s;} #chat-box .chat-mic-btn:hover {background: #dfe9ff;border-color: #6b7fb8;} /* 録音中 */ #chat-box .chat-mic-btn.recording {background: #fee2e2;border-color: #e05252;color: #e05252;animation: mic-pulse 1s ease-in-out infinite;} @keyframes mic-pulse {0%,100%{opacity:1;} 50%{opacity:0.5;}} /* ----------- chatlog（会話ログ）---------------------------- */ #chat-log {padding: 12px 4px 0;overflow-y: auto;width: 94%;margin: 0 auto;} #chat-log.fullscreen {width: 82%;margin: 0 auto;max-width: 800px;padding: 12px 0 0;} /* 吹き出し基本形 */ #chat-log .chat-message {display: flex;margin-bottom: 14px;} #chat-log .chat-message.user {justify-content: flex-end;} #chat-log .chat-message.bot {align-items: flex-start;} #chat-log .chat-bubble {padding: 10px 14px;border-radius: 16px;width: 75%;font-size: 13px;line-height: 1.4;letter-spacing: 0.5px;} #chat-log.fullscreen .chat-bubble {width: 70%;} #chat-log .chat-bubble p {letter-spacing: 0px;font-size: 12.5px;} #chat-log .user-bubble {background: #dfe9ff;border-radius: 16px 16px 0 16px;color: #333;justify-content: center;display: flex;max-width: 275px;} #chat-log .bot-bubble {background: #f7f7f7;border-radius: 0 16px 16px 16px;color: #333;} #chat-log .chat-avatar {width: 40px;height: 40px;margin-right: 8px;background: #D6ACAD;border-radius: 25px;object-fit: cover;} #chat-log.fullscreen .chat-avatar {width: 64px;height: 64px;border-radius: 100px;object-fit: cover;} /* 回答用リンクボタン */ #chat-log .link-button {display: block;margin-top: 8px;padding: 8px 12px;background: #edf1fa;border: 1px solid #c8d4ea;border-radius: 10px;color: #333;text-align: left;text-decoration: none;font-size: 12.5px;transition: background 0.2s;letter-spacing: 0px;} #chat-log.fullscreen .link-button {width: 400px;} #chat-log .link-button:hover {background: #dfe9ff;} /* 考え中表示（...）*/ .thinking-message {opacity: 0.8;} .thinking-bubble {background: #f0f0f0 !important;border: 1px solid #e0e0e0 !important;} .thinking-dots {display: inline-block;font-size: 24px;font-weight: bold;color: #666;animation: thinking-animation 1.5s infinite;} @keyframes thinking-animation { 0%, 20% {content: ".";} 40% {content: "..";} 60%, 100% {content: "...";}} /* 下段：本体テキスト */ #revive-button{position: fixed;bottom: 30px;right: 30px;width: 130px;height: 130px;z-index: 10000;display: none; border: 0;padding: 0;background: transparent url('../img/chatbot/revive.png') no-repeat center / contain;cursor: pointer;} #revive-button:focus-visible{outline: 2px solid #c3061c;outline-offset: 2px;} /* ------------------------------- レスポンシブ 1050px以下： ----------------------------------------- */ @media screen and (min-width:768px) and (max-width:1050px) { /* ----- ランチャー ------------------ */ #chat-toggle-button {bottom: -1.5%;left: 40.5%;} /* ------ チャットボックス全体 -------------- */ #chat-box.fullscreen { width: 100vw;height: 100dvh;box-shadow: none;padding-top: var(--safe-top);} /*-----チャットボックスヘッダー（タイトル・3つのボタン・動画）---------------------------------- */ #chat-box.fullscreen .chat-header-main {width: 80%;max-width: 700px;} #chat-box.fullscreen .chat-character {width: 42%;height: 275px;transform: translateY(4px) scale(1.05);} #chat-box.fullscreen .chat-character video {width: 250px;height: 325px;object-fit: cover;object-position: top;transform: translate( 0%, -16%);} #chat-box.fullscreen .chat-description {width: 56%;padding-right: 0px;transform: translateY(-10px) translateX(-32px);} #chat-box.fullscreen .chat-label-text {font-size: 14px;} #chat-box.fullscreen .chat-description .chat-title {width: 86%;margin: 16px auto 0;} #chat-box.fullscreen .chat-subtitle {font-size: 12px;margin-top: 8px;} /* -------　チャット本体エリア----------------- */ #chat-box.fullscreen .chat-body {width: 88%;margin: 0 auto;padding: 24px;padding-bottom: calc(env(safe-area-inset-bottom) + 140px);padding-bottom: 120px;} #chat-box.fullscreen .chat-intro {font-size: 13px;margin-bottom: 20px;} /* -----------　　選択肢リスト（ボタン）　------------- */ #chat-box.fullscreen .chat-option-grid {width: 88%;margin: 0 auto;gap: 16px 12px; grid-template-columns: repeat(4, 1fr);} #chat-box.fullscreen .chat-option-card {padding: 18px 8px;width: 85%;} #chat-box.fullscreen .chat-option-card p {font-size: 11.5px;} #chat-box.fullscreen .chat-option-card::before{content: "";position: absolute;left: -4px;right: -4px;top: -4px;bottom: -4px;background: url("../img/chatbot/btn_back.png") center / cover no-repeat;z-index: 0;pointer-events: none;border-radius: 8px;filter: blur(3px);} #chat-box.fullscreen .chat-input-area {position: fixed;bottom: calc(env(safe-area-inset-bottom) + 0px);left: 50%;transform: translateX(-50%);width: 100%;background: #fff;padding: 16px 24px;border-top: 1px solid #eee;box-sizing: border-box;z-index: 100;margin: 0 auto;} /* ----------- chatlog（会話ログ）---------------------------- */ #chat-log.fullscreen .link-button {width: 320px;} #chat-log.fullscreen .chat-bubble {max-width: 375px;width: 72%;} #chat-log.fullscreen .user-bubble {width: 40%;} } /* ------------------------------- レスポンシブ 768px以下： ----------------------------------------- */ @media screen and (min-width:451px) and (max-width:768px) { /* 下段：本体テキスト */ #chat-box .chat-buttons .chat-fullscreen-btn {display: none;} /* ----- ランチャー ------------------ */ #chat-toggle-button {bottom: 14%;left: 38.5%;transform: translateY(80px);} /* 吹き出しスタイル */ .fukidashi-02-03 {position: absolute;left: 50%;bottom: 62.5%;transform: translateX(-50%) scaleX(-1);display: grid;place-items: center;width: 72px;height: 72px;border: 1px solid #333333;border-radius: 50%;cursor: pointer;} .fukidashi-02-03::before {width: 12px;height: 12px;} .fukidashi-02-03::after {top: 105%;left: 50%;width: 14px;height: 1px;} .fukidashi-02-03 > .ornament {transform: translateX(2px) translateY(2px);} .fukidashi-02-03 > div {font-size: 9px;line-height: 1.2;transform: scaleX(-1) translateY(4px);} .fukidashi-02-03 > div em {font-size: 12px;line-height: 20px;} /*-----チャットボックスヘッダー（タイトル・3つのボタン・動画）---------------------------------- */ #chat-box.fullscreen .chat-header-main {width: 88%;max-width: 480px;} #chat-box.fullscreen .chat-character {width: 42%;height: 250px;transform: translateY(0px) scale(1);} #chat-box.fullscreen .chat-character video {width: 260px;height: 325px;object-fit: cover;object-position: top;transform: translate( -24%, -20%);} #chat-box.fullscreen .chat-description {width: 52%;padding-right: 0px;transform: translateY(-6px);} #chat-box.fullscreen .chat-label-text {font-size: 14px;} #chat-box.fullscreen .chat-description .chat-title {width: 100%;margin: 10px auto 0;} #chat-box.fullscreen .chat-subtitle {font-size: 11.5px;margin-top: 4px;} #chat-box.fullscreen .chat-label-wrapper {width: 82%;height: 48px;min-width: 200px;} /* -------　チャット本体エリア----------------- */ #chat-box.fullscreen .chat-body {width: 90%;margin: 0 auto;padding: 24px;} #chat-box.fullscreen .chat-intro {font-size: 13px;margin-bottom: 16px;} #chat-box.fullscreen .chat-body-box {width: 100%;padding: 12px 0;} /* -----------　　選択肢リスト（ボタン）　------------- */ #chat-box.fullscreen .chat-option-card {padding: 14px 2px;width: 90%;} #chat-box.fullscreen .chat-option-card p {font-size: 11px;} #chat-box.fullscreen .chat-option-grid {width: 90%;margin: 0 auto;gap: 16px 14px;grid-template-columns: repeat(3, 1fr);} /* ----------　　入力エリア（テキスト＋送信ボタン）----------------- */ #chat-box.fullscreen .chat-input-area {padding: 16px 24px 20px;} /* ----------- chatlog（会話ログ）---------------------------- */ #chat-log.fullscreen .link-button {max-width: 300px;width: 86%;} #chat-log.fullscreen .chat-bubble {max-width: 375px;width: 72%;} #chat-log.fullscreen .user-bubble {width: 40%;} #chat-log {padding: 16px 4px 0;overflow-y: auto;width: 92%;margin: 0 auto;} #chat-log.fullscreen {width: 90%;margin: 0 auto;padding: 12px 0 0;} /* 下段：本体テキスト */ #revive-button{width: 110px;height: 110px; bottom: 8px;right: 8px;} } /* ------------------------------------------ レスポンシブ 450px以下： --------------------------------------------- */ @media screen and (max-width: 450px) { #chat-box.fullscreen .chat-body {padding-bottom: calc(env(safe-area-inset-bottom) + 140px);} /* 下段：本体テキスト */ #chat-box .chat-buttons .chat-fullscreen-btn {display: none;} /* ----- ランチャー ------------------ */ #chat-toggle-button {position: fixed;bottom: 8%;left: 37.5%;cursor: pointer;z-index: 9999;transform: translateY(80px);} /* 吹き出しスタイル */ .fukidashi-02-03 {bottom: 58%;transform: translateX(-48%) scaleX(-1);width: 56px;height:56px;} .fukidashi-02-03::before {bottom: -3px;left: 50%;width: 8px;height: 8px;} .fukidashi-02-03::after {top: 104%;left: 50%;width: 12px;height: 1px;} .fukidashi-02-03 > .ornament {transform: translateX(1px) translateY(1px);} .fukidashi-02-03 > div {font-size: 8px;letter-spacing: 0.5px;line-height: 1.1;transform: scaleX(-1) translateY(4px);} .fukidashi-02-03 > div em {font-size: 10.5px;line-height: 18px;} /*-----チャットボックスヘッダー（タイトル・3つのボタン・動画）---------------------------------- */ #chat-box.fullscreen .chat-header {padding: 4px 0 0;box-sizing: border-box;} #chat-box.fullscreen .chat-header-main {width: 90%;} #chat-box.fullscreen .chat-label-wrapper {width: 88%;height: 46px;max-width: 200px;} #chat-box.fullscreen .chat-label-text {font-size: 12px;} #chat-box.fullscreen .chat-description {width: 56%;text-align: center;padding-right: 0px;z-index: 100;transform: translateY(-10px);} #chat-box.fullscreen .chat-description .chat-title {font-size: 28px;margin-top: 8px;} #chat-box.fullscreen .chat-subtitle {font-size: 11.5px;margin-top: 0px;} #chat-box.fullscreen .chat-character {width: 40%;height: 200px;transform: translateY(0px) scale(0.76);} #chat-box.fullscreen .chat-character video {width: 230px;height: 275px;object-fit: cover;object-position: top;transform: translate(-24%, -16%);} #chat-box.fullscreen .chat-buttons svg {width: 22px;height: 22px;transition: transform 0.2s;} #chat-box.fullscreen .chat-buttons .chat-btn {padding: 8px 10px 8px 0;} /* 下段：本体テキスト */ #chat-box .chat-buttons .chat-fullscreen-btn {display: none;} /* -------　チャット本体エリア----------------- */ #chat-box.fullscreen .chat-description .chat-title {width: 100%;margin: 4px auto 0;} #chat-box.fullscreen .chat-body {width: 100%;margin: 0 auto;padding: 20px 0;margin-top: 0px;} /* 下段：本体テキスト */ #chat-box.fullscreen .chat-body-box {width: 94%;padding: 10px 0 0;} /* 以下の項目から選択 */ #chat-box.fullscreen .chat-intro {font-size: 13px;margin-bottom: 16px;} /* -----------　　選択肢リスト（ボタン）　------------- */ #chat-box.fullscreen .chat-option-grid {width: 95%;margin: 0 auto;gap: 12px;} /* 各カードスタイル */ #chat-box.fullscreen .chat-option-card {padding: 14px 1px;width: 92%;} #chat-box.fullscreen .chat-option-card p {font-size: 10.5px;} #chat-box.fullscreen .chat-option-grid {width: 94%;margin: 0 auto;gap: 16px 10px;grid-template-columns: repeat(3, 1fr);} #chat-box.fullscreen .chat-option-card::before{content: "";position: absolute;left: -4px;right: -4px;top: -4px;bottom: -4px;background: url("../img/chatbot/btn_back.png") center / cover no-repeat;z-index: 0;pointer-events: none;border-radius: 8px;filter: blur(2.5px);} #chat-box.fullscreen .chat-option-card img {width: 34px;height: 34px;margin-bottom: 6px;} /* ----------　　入力エリア（テキスト＋送信ボタン）----------------- */ #chat-box.fullscreen .chat-input-area {padding: 16px 16px 20px;} /* ----------- chatlog（会話ログ）---------------------------- */ #chat-log.fullscreen {width: 90%;margin: 0 auto;} #chat-log.fullscreen .link-button {width: 80%;} #chat-log.fullscreen .chat-bubble {max-width: 375px;width: 72%;} #chat-log.fullscreen .user-bubble {width: 56%;} #chat-log .chat-avatar {width: 45px;height: 45px;margin-right: 8px;background: #D6ACAD;border-radius: 25px;} #chat-log.fullscreen .chat-bubble {padding: 10px 14px;border-radius: 16px;width: 70%;font-size: 13px;line-height: 1.4;letter-spacing: 0.5px;} /* 下段：本体テキスト */ #revive-button{width: 110px;height: 110px; bottom: 8px;right: 8px;} } /* ------------------------------------------ ランチャーとcloseボタンの配置 --------------------------------------------- */ #chat-launch-close {position: absolute;right: 47.5%;bottom: 16%;background: #fff;color: #6b7fb8;border: none;border-radius: 999px;font-size: 8px;font-weight: bold;padding: 14px 3px;line-height: 14px;text-align: center;cursor: pointer;writing-mode: vertical-rl;font-style: italic;opacity: 0.85;letter-spacing: 0.15em;} @media (max-width: 2200px) {#chat-launch-close { right: 47.5%; bottom: 16%;}} @media (max-width: 2000px) {#chat-launch-close { right: 47%; bottom: 16%;}} @media (max-width: 1800px) {#chat-launch-close { right: 46.5%; bottom: 16%;}} @media (max-width: 1600px) {#chat-launch-close { right: 46%; bottom: 16%;}} @media (max-width: 1400px) {#chat-launch-close { right: 45.5%; bottom: 16%;}} @media (max-width: 1200px) {#chat-launch-close { right: 45%; bottom: 16%;}} @media (max-width: 1100px) {#chat-launch-close { right: 44.5%; bottom: 16%;}} @media screen and (min-width:768px) and (max-width:1050px) {#chat-launch-close {right: 44.5%;bottom: 16%;padding: 16px 1px;}} @media (max-width: 950px) {#chat-launch-close { right: 44%; bottom: 16%;}} @media (max-width: 850px) {#chat-launch-close { right: 43.5%; bottom: 16%;}} @media screen and (max-width:768px) {#chat-launch-close {right: 44%;bottom: 15%;font-size: 6px;padding: 12px 1px;line-height: 12px;}} @media (max-width: 600px) {#chat-launch-close { right: 43%; bottom:15%;}} @media (max-width: 550px) {#chat-launch-close { right: 41.5%; bottom: 15%;}} @media (max-width: 450px) {#chat-launch-close { right: 40%; bottom:15%;}} @media (max-width: 400px) {#chat-launch-close { right: 40%; bottom: 15%;}} @media (max-width: 375px) {#chat-launch-close { right: 40%; bottom: 15%;}} /*-------------------------------------------------------------------------------------------------------------------------*/