@charset "UTF-8";
/*
$c_main: #DB0000;
$c_sub: #E9A87D;
$c_accent: #E64D4D;
$c_btn: #FF7043;
$c_btn_hover: #F4511E;
$c_sns_line: #06C755;
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap&family=Oswald&display=swap");
/* ============================================================
   ai-es.scss
   - ES作成・添削AI（固定ページ）
   - BEM / mobile-first（min-width）
   - Buttons: common.scss の .c-common-btn を使用
============================================================ */
/* ------------------------------------------------------------
  Page Title / Page Hero（ai-es 用の色設定）
------------------------------------------------------------ */
.page-title--default {
  --page-title-bg: #E3F5FF;
  --page-title-color: #00AAFF;
  background-image: radial-gradient(circle, #ffffff 1px, transparent 1px);
  background-size: 5px 5px;
}

.page-title--default {
  --page-hero-bg: var(--bg-white);
  --page-hero-accent: #00AAFF;
  --page-hero-title-color: #00AAFF;
  --page-hero-text-color: #555555;
}

.ai-es {
  --ai-es-strong: #00aaff;
  --ai-es-accent: #4dc4ff;
  --ai-es-bg: #e3f5ff;
  background-color: var(--bg-white);
  padding-top: 4rem;
  padding-bottom: 6.4rem;
  /* =========================
     Header
     ========================= */
  /* =========================
     Layout wrappers
     ========================= */
  /* =========================
     Card
     ========================= */
  /* Login gate actions */
  /* =========================
     Start blocks (click to switch)
     ========================= */
  /* =========================
     Chat area
     ========================= */
  /* =========================
     Tips
     ========================= */
}
.ai-es__header {
  max-width: 980px;
  margin-inline: auto;
  margin-bottom: 2.4rem;
}
.ai-es__title {
  margin: 0;
  font-size: clamp(1.6rem, 1.526rem + 0.23vw, 1.8rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}
.ai-es__lead {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  line-height: 1.9;
  color: var(--text);
}
.ai-es__layout {
  margin-top: 2rem;
}
.ai-es__stack {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.6rem 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.ai-es__card {
  border-radius: 12px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
          box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  padding-top: 2rem;
  padding-right: 1.6rem;
  padding-bottom: 2.4rem;
  padding-left: 1.6rem;
}
.ai-es__card--center {
  text-align: center;
}
.ai-es__card--chat {
  padding-bottom: 2rem;
}
.ai-es__card-title {
  margin: 0;
  font-size: clamp(1.6rem, 1.526rem + 0.23vw, 1.8rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
.ai-es__card-lead {
  margin-top: 0.8rem;
  margin-bottom: 0;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  line-height: 1.8;
  color: var(--text);
}
.ai-es__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.8rem;
  margin-top: 1.6rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.ai-es__actions--center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.ai-es__help {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: clamp(1.2rem, 1.126rem + 0.23vw, 1.4rem);
  line-height: 1.8;
  color: var(--text-muted);
}
.ai-es__start-block {
  border: 1px solid rgba(0, 0, 0, 0.06);
  background-color: #ffffff;
  -webkit-transition: border-color 0.2s ease, background-color 0.2s ease, -webkit-transform 0.12s ease;
  transition: border-color 0.2s ease, background-color 0.2s ease, -webkit-transform 0.12s ease;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.12s ease;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.12s ease, -webkit-transform 0.12s ease;
}
.ai-es__start-block.is-clickable {
  cursor: pointer;
}
.ai-es__start-block.is-clickable:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.ai-es__start-block.is-emphasis {
  border-color: rgba(0, 170, 255, 0.26);
  background-color: rgba(0, 170, 255, 0.06);
}
.ai-es__start-block:focus-within {
  outline: 3px solid rgba(0, 170, 255, 0.25);
  outline-offset: 2px;
}
.ai-es__chatbot {
  margin-top: 1.2rem;
}
.ai-es__chat-pane {
  display: none;
}
.ai-es__chat-pane.is-active {
  display: block;
}
.ai-es__tipsbox {
  margin-top: 1.2rem;
  border-radius: 12px;
  background-color: #f6f6f6;
  padding-top: 1.2rem;
  padding-right: 1.2rem;
  padding-bottom: 1.2rem;
  padding-left: 1.2rem;
}
.ai-es__tips {
  margin: 0;
  padding-left: 1.2rem;
}
.ai-es__tip {
  font-size: clamp(1.2rem, 1.126rem + 0.23vw, 1.4rem);
  line-height: 1.9;
  color: var(--text);
}
.ai-es__tip + .ai-es__tip {
  margin-top: 0.4rem;
}

/* ============================================================
     AI Engine (mwai) styling
     - 見やすさ：吹き出し / 行間 / 最大幅 / 整列
     - ChatGPT テーマの DOM を前提に「過不足なく」当てる
============================================================ */
.ai-es__chatbot {
  /* 生成ルート（テーマ差異吸収） */
  /* 会話エリア：余白＋タイポ */
  /* スクロール領域 */
  /* 1メッセージ（カード） */
  /* 画像を全部巻き込まない：avatar だけに限定 */
  /* メッセージ本文の最大幅（読める行長） */
  /* 吹き出し：見た目を確実に付与 */
  /* 「あなた」「こんにちは」など分割行の詰まりを改善 */
  /* p が入る場合 */
  /* リスト */
  /* ユーザー発話：右寄せ＆色（クラス差異を広めに吸収） */
  /* 逆にAI側を少し落ち着かせる（判別クラスがある場合だけ） */
  /* 入力エリア */
  /* 送信以外のボタン（リセット等） */
}
.ai-es__chatbot .mwai-chatbot-container {
  width: 100%;
}
.ai-es__chatbot .mwai-chat {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background-color: #ffffff;
}
.ai-es__chatbot .mwai-conversation,
.ai-es__chatbot .mwai-messages,
.ai-es__chatbot .mwai-chat-body {
  padding-top: 1.4rem;
  padding-right: 1.2rem;
  padding-bottom: 1rem;
  padding-left: 1.2rem;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  line-height: 1.9;
  color: var(--text);
}
.ai-es__chatbot .mwai-chat-body {
  min-height: 320px;
}
.ai-es__chatbot .mwai-message,
.ai-es__chatbot .mwai-msg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.8rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.ai-es__chatbot .mwai-message:first-child,
.ai-es__chatbot .mwai-msg:first-child {
  margin-top: 0.6rem;
}
.ai-es__chatbot .mwai-avatar,
.ai-es__chatbot .mwai-message .mwai-avatar,
.ai-es__chatbot .mwai-msg .mwai-avatar {
  width: 28px;
  height: 28px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-top: 0.2rem;
  overflow: hidden;
}
.ai-es__chatbot .mwai-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.ai-es__chatbot .mwai-message .mwai-text,
.ai-es__chatbot .mwai-msg .mwai-text,
.ai-es__chatbot .mwai-message .mwai-bubble,
.ai-es__chatbot .mwai-msg .mwai-bubble,
.ai-es__chatbot .mwai-message .mwai-message-text,
.ai-es__chatbot .mwai-msg .mwai-message-text,
.ai-es__chatbot .mwai-message .mwai-content,
.ai-es__chatbot .mwai-msg .mwai-content {
  max-width: 720px;
  min-width: 0;
}
.ai-es__chatbot .mwai-reply {
  border-bottom: 1px solid #E3F5FF;
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
}
.ai-es__chatbot .mwai-bubble,
.ai-es__chatbot .mwai-message-text,
.ai-es__chatbot .mwai-content,
.ai-es__chatbot .mwai-text {
  padding-top: 1rem;
  padding-right: 1.2rem;
  padding-bottom: 1rem;
  padding-left: 1.2rem;
  word-break: break-word;
  overflow-wrap: anywhere;
  /* 1行ずつ分割されても読みやすい密度に */
  letter-spacing: 0.01em;
}
.ai-es__chatbot .mwai-bubble > *:first-child,
.ai-es__chatbot .mwai-message-text > *:first-child,
.ai-es__chatbot .mwai-content > *:first-child,
.ai-es__chatbot .mwai-text > *:first-child {
  margin-top: 0;
}
.ai-es__chatbot .mwai-bubble > * + *,
.ai-es__chatbot .mwai-message-text > * + *,
.ai-es__chatbot .mwai-content > * + *,
.ai-es__chatbot .mwai-text > * + * {
  margin-top: 0.6rem;
}
.ai-es__chatbot .mwai-bubble p,
.ai-es__chatbot .mwai-message-text p,
.ai-es__chatbot .mwai-content p,
.ai-es__chatbot .mwai-text p {
  margin-top: 0.6rem;
  margin-bottom: 0;
}
.ai-es__chatbot .mwai-bubble p:first-child,
.ai-es__chatbot .mwai-message-text p:first-child,
.ai-es__chatbot .mwai-content p:first-child,
.ai-es__chatbot .mwai-text p:first-child {
  margin-top: 0;
}
.ai-es__chatbot .mwai-bubble ul,
.ai-es__chatbot .mwai-message-text ul,
.ai-es__chatbot .mwai-content ul,
.ai-es__chatbot .mwai-text ul {
  margin-top: 0.6rem;
  margin-bottom: 0;
  padding-left: 1.2rem;
}
.ai-es__chatbot .mwai-bubble ol,
.ai-es__chatbot .mwai-message-text ol,
.ai-es__chatbot .mwai-content ol,
.ai-es__chatbot .mwai-text ol {
  list-style: decimal;
  list-style-position: inside;
}
.ai-es__chatbot .mwai-message.user,
.ai-es__chatbot .mwai-message.mwai-user,
.ai-es__chatbot .mwai-message.mwai-user-message,
.ai-es__chatbot .mwai-message.mwai-user-msg,
.ai-es__chatbot .mwai-msg.user,
.ai-es__chatbot .mwai-msg.mwai-user,
.ai-es__chatbot .mwai-msg.mwai-user-message,
.ai-es__chatbot .mwai-msg.mwai-user-msg {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.ai-es__chatbot .mwai-message.user .mwai-bubble,
.ai-es__chatbot .mwai-message.user .mwai-message-text,
.ai-es__chatbot .mwai-message.user .mwai-content,
.ai-es__chatbot .mwai-message.user .mwai-text,
.ai-es__chatbot .mwai-message.mwai-user .mwai-bubble,
.ai-es__chatbot .mwai-message.mwai-user .mwai-message-text,
.ai-es__chatbot .mwai-message.mwai-user .mwai-content,
.ai-es__chatbot .mwai-message.mwai-user .mwai-text,
.ai-es__chatbot .mwai-message.mwai-user-message .mwai-bubble,
.ai-es__chatbot .mwai-message.mwai-user-message .mwai-message-text,
.ai-es__chatbot .mwai-message.mwai-user-message .mwai-content,
.ai-es__chatbot .mwai-message.mwai-user-message .mwai-text,
.ai-es__chatbot .mwai-message.mwai-user-msg .mwai-bubble,
.ai-es__chatbot .mwai-message.mwai-user-msg .mwai-message-text,
.ai-es__chatbot .mwai-message.mwai-user-msg .mwai-content,
.ai-es__chatbot .mwai-message.mwai-user-msg .mwai-text,
.ai-es__chatbot .mwai-msg.user .mwai-bubble,
.ai-es__chatbot .mwai-msg.user .mwai-message-text,
.ai-es__chatbot .mwai-msg.user .mwai-content,
.ai-es__chatbot .mwai-msg.user .mwai-text,
.ai-es__chatbot .mwai-msg.mwai-user .mwai-bubble,
.ai-es__chatbot .mwai-msg.mwai-user .mwai-message-text,
.ai-es__chatbot .mwai-msg.mwai-user .mwai-content,
.ai-es__chatbot .mwai-msg.mwai-user .mwai-text,
.ai-es__chatbot .mwai-msg.mwai-user-message .mwai-bubble,
.ai-es__chatbot .mwai-msg.mwai-user-message .mwai-message-text,
.ai-es__chatbot .mwai-msg.mwai-user-message .mwai-content,
.ai-es__chatbot .mwai-msg.mwai-user-message .mwai-text,
.ai-es__chatbot .mwai-msg.mwai-user-msg .mwai-bubble,
.ai-es__chatbot .mwai-msg.mwai-user-msg .mwai-message-text,
.ai-es__chatbot .mwai-msg.mwai-user-msg .mwai-content,
.ai-es__chatbot .mwai-msg.mwai-user-msg .mwai-text {
  background-color: rgba(0, 170, 255, 0.1);
  border-color: rgba(0, 170, 255, 0.2);
}
.ai-es__chatbot .mwai-message.mwai-assistant .mwai-bubble,
.ai-es__chatbot .mwai-message.mwai-assistant .mwai-message-text,
.ai-es__chatbot .mwai-message.mwai-assistant .mwai-content,
.ai-es__chatbot .mwai-message.mwai-assistant .mwai-text,
.ai-es__chatbot .mwai-message.mwai-ai .mwai-bubble,
.ai-es__chatbot .mwai-message.mwai-ai .mwai-message-text,
.ai-es__chatbot .mwai-message.mwai-ai .mwai-content,
.ai-es__chatbot .mwai-message.mwai-ai .mwai-text,
.ai-es__chatbot .mwai-message.mwai-assistant-message .mwai-bubble,
.ai-es__chatbot .mwai-message.mwai-assistant-message .mwai-message-text,
.ai-es__chatbot .mwai-message.mwai-assistant-message .mwai-content,
.ai-es__chatbot .mwai-message.mwai-assistant-message .mwai-text,
.ai-es__chatbot .mwai-msg.mwai-assistant .mwai-bubble,
.ai-es__chatbot .mwai-msg.mwai-assistant .mwai-message-text,
.ai-es__chatbot .mwai-msg.mwai-assistant .mwai-content,
.ai-es__chatbot .mwai-msg.mwai-assistant .mwai-text,
.ai-es__chatbot .mwai-msg.mwai-ai .mwai-bubble,
.ai-es__chatbot .mwai-msg.mwai-ai .mwai-message-text,
.ai-es__chatbot .mwai-msg.mwai-ai .mwai-content,
.ai-es__chatbot .mwai-msg.mwai-ai .mwai-text,
.ai-es__chatbot .mwai-msg.mwai-assistant-message .mwai-bubble,
.ai-es__chatbot .mwai-msg.mwai-assistant-message .mwai-message-text,
.ai-es__chatbot .mwai-msg.mwai-assistant-message .mwai-content,
.ai-es__chatbot .mwai-msg.mwai-assistant-message .mwai-text {
  background-color: #f7f7f7;
}
.ai-es__chatbot .mwai-input {
  display: -ms-grid;
  display: grid;
  gap: 0.8rem;
  padding-top: 1.2rem;
  padding-right: 1.2rem;
  padding-bottom: 1.2rem;
  padding-left: 1.2rem;
  background-color: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.ai-es__chatbot textarea,
.ai-es__chatbot input[type=text] {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  line-height: 1.6;
  color: var(--text);
  background-color: #ffffff;
}
.ai-es__chatbot textarea:focus-visible,
.ai-es__chatbot input[type=text]:focus-visible {
  outline: 3px solid rgba(0, 170, 255, 0.25);
  outline-offset: 2px;
}
.ai-es__chatbot button,
.ai-es__chatbot .mwai-submit {
  border-radius: 999px;
  padding-top: 1rem;
  padding-right: 1.4rem;
  padding-bottom: 1rem;
  padding-left: 1.4rem;
  background-color: var(--ai-es-strong);
  color: #ffffff;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.ai-es__chatbot button:focus-visible,
.ai-es__chatbot .mwai-submit:focus-visible {
  outline: 3px solid rgba(0, 170, 255, 0.25);
  outline-offset: 2px;
}
.ai-es__chatbot .mwai-input button:not(.mwai-submit) {
  font-size: clamp(1.2rem, 1.126rem + 0.23vw, 1.4rem);
  padding-top: 0.8rem;
  padding-right: 1rem;
  padding-bottom: 0.8rem;
  padding-left: 1rem;
  opacity: 0.92;
}