:root {
   --work-bg: var(--cre-color-accent-sub-blue);
   --work-border: var(--cre-color-accent-blue);
   --work-title-bg: var(--cre-color-accent-blue-dark);
   --work-title-text: #ffffff;
}

.c-work {
   margin: 4rem 0 0;
   padding: 2rem 2.2rem;
   border-radius: 12px;
   background: var(--work-bg);
   border: 1px solid var(--work-border);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.c-work-title {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   padding: 0.4rem 0.9rem;
   border-radius: 999px;
   background: var(--work-title-bg);
   color: var(--work-title-text);
   font-weight: 700;
   font-size: 0.95rem;
   letter-spacing: 0.03em;
}

.c-work-title::before {
   content: "▶";
   font-size: 0.9rem;
}

.c-work-lead {
   margin-top: 1.4rem;
}

.c-work-steps {
   margin: 1.8rem 0 0;
   padding-left: 0;
   list-style: none;
   counter-reset: work-step;
}

.c-work-step {
   list-style: none;
   position: relative;
   padding: 1rem 1.2rem 1rem 3rem;
   margin-bottom: 1rem;
   border-radius: 8px;
   background: #ffffff;
   border: 1px solid rgba(62, 141, 207, 0.18);
}

.c-work-step::before {
   counter-increment: work-step;
   content: counter(work-step);
   position: absolute;
   left: 1rem;
   top: 50%;
   transform: translateY(-50%);
   width: 1.6rem;
   height: 1.6rem;
   border-radius: 50%;
   background: var(--work-border);
   color: #ffffff;
   font-size: 0.85rem;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
}

.c-work-step-title {
   font-weight: 700;
   margin-bottom: 0.3rem;
}

.c-work-step-body {
   margin: 0;
}

@media (max-width: 768px) {
   .c-work {
      padding: 1.6rem 1.4rem;
   }
}

/* --------------------------------------------------------------------------------
 * Vimeo Timeline Index (Video Chapter Navigation)
 * -------------------------------------------------------------------------------- */

.video-frame {
   position: relative;
   margin-bottom: 5.5rem;
   /* 余白を広めに確保 */
   overflow: visible !important;
   /* ボタンが枠外に出られるように */
}

.c-timeline-index {
   margin: 4rem 0;
   padding: 0;
}

/* セクションの見出し */
.c-timeline-section {
   margin-bottom: 2rem;
}

.c-timeline-section__title {
   font-size: 1.15rem;
   font-weight: bold;
   margin: 2.5rem 0 1rem;
   padding-left: 0.8rem;
   border-left: 4px solid var(--cre-color-accent);
   color: var(--cre-color-text);
   line-height: 1.3;
}

.c-timeline-section:first-child .c-timeline-section__title {
   margin-top: 0;
}

/* タイムラインアイテム */
.c-timeline-item {
   margin-bottom: 0.6rem;
}

/* --------------------------------------------------------------------------------
 * Audio Timeline Index
 * -------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------
 * Audio Timeline Index
 * -------------------------------------------------------------------------------- */

/* コンテナのリセット（動画版と同じにするため余白や背景を削除） */
.c-timeline-index--audio {
   margin-top: 40px;
   padding: 0;
   background: transparent;
   border-radius: 0;
}

.c-timeline-index--audio .c-timeline-item {
   border-bottom: none;
   padding: 0;
   margin-bottom: 0.6rem;
}

.c-timeline-index--audio .c-timeline-item:hover {
   background-color: transparent;
}

/* リンクのスタイルは共通クラス (.c-timeline-item__link) を利用 */
/* 時間表示のみ色を変更（オレンジ） */
.c-timeline-index--audio .c-timeline-item__time {
   background: var(--cre-color-accent-orange) !important;
   color: #fff !important;
   border: none;
}

/* アクティブ時のハイライトカラーもオレンジに */
.c-timeline-index--audio .c-timeline-item__link:hover {
   background-color: var(--cre-color-accent-sub-orange);
   text-decoration: none !important;
}

.c-timeline-index--audio .c-timeline-item__link.active {
   background-color: var(--cre-color-accent-sub-orange);
   border: 1px solid var(--cre-color-accent-orange-light);
}

.c-timeline-index--audio .c-timeline-item__link.active::after {
   background-color: var(--cre-color-accent-orange);
}

.c-timeline-item__link {
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
   /* タイトルと時間はセンター合わせ */
   gap: 0 1rem;
   text-decoration: none;
   color: inherit;
   cursor: pointer;
   padding: 0.5rem 0.8rem;
   border-radius: 6px;
   transition: all 0.2s ease;
}

/* 時間エリアは常に左上 */
.c-timeline-item__time {
   grid-row: 1;
   grid-column: 1;
   /* 以下共通スタイル保持 */
   flex-shrink: 0;
   background: var(--cre-color-accent);
   color: #fff !important;
   font-weight: bold;
   font-size: 0.75rem;
   font-family: 'Courier New', monospace;
   padding: 3px 10px;
   border-radius: 4px;
   min-width: 65px;
   text-align: center;
}

/* タイトルエリアは右上 */
.c-timeline-item__title {
   grid-row: 1;
   grid-column: 2;
   /* 以下共通スタイル保持 */
   font-weight: 600;
   color: var(--cre-color-text);
   font-size: 1rem;
   line-height: 1.5;
}

/* 新設: メッセージエリアは右下（タイトルの次行） */
.c-timeline-item__message {
   grid-row: 2;
   grid-column: 2;
   width: 100%;
   margin-top: 5px;
   font-size: 0.9em;
   color: #666;
   line-height: 1.5;
}


.c-timeline-item__link.active {
   background-color: var(--cre-color-accent-sub);
   border: 1px solid var(--cre-color-accent-light);
   position: relative;
   overflow: hidden;
}

/* 進捗インジケーター（背景） */
.c-timeline-item__link.active::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   height: 3px;
   background-color: var(--cre-color-accent);
   width: var(--timeline-progress, 0%);
   transition: width 0.3s linear;
}


.c-timeline-item__link:hover {
   background-color: var(--cre-color-accent-sub);
}

.c-timeline-item__link:hover .c-timeline-item__title {
   color: var(--cre-color-accent-dark);
}

.c-timeline-item__link.active .c-timeline-item__title {
   color: var(--cre-color-accent-dark);
   font-weight: bold;
}

/* 説明リスト */
.c-timeline-item__desc {
   list-style: disc;
   padding-left: 6.2rem;
   /* ラベルの幅+αに合わせる */
   margin: 0.2rem 0 0.8rem 0;
   color: #666;
   font-size: 0.9rem;
   line-height: 1.6;
}

.c-timeline-item__desc li {
   margin-bottom: 0.2rem;
}

/* 説明文内の自動タイムリンク */
.c-timeline-timestamp-link {
   color: var(--cre-color-accent-dark);
   text-decoration: none;
   font-weight: bold;
   padding: 1px 4px;
   border-radius: 3px;
   background: rgba(64, 87, 150, 0.08);
   transition: all 0.2s;
}

.c-timeline-timestamp-link:hover {
   background: var(--cre-color-accent);
   color: #fff !important;
}

/* サマリーセクション */
.c-timeline-summary {
   margin-top: 3rem;
   padding: 1.5rem;
   background: var(--cre-color-bg-light);
   border: 1px solid #eee;
   border-radius: 8px;
}

.c-timeline-summary__title {
   display: flex;
   align-items: center;
   font-size: 1.1rem;
   font-weight: bold;
   margin: 0 0 0.8rem 0;
   color: var(--cre-color-text);
}

.c-timeline-summary__title::before {
   content: "✅";
   margin-right: 0.5rem;
}

.c-timeline-summary__text {
   font-size: 1rem;
   line-height: 1.7;
   margin: 0;
   color: #444;
}

.c-timeline-summary__text strong {
   color: var(--cre-color-accent-dark);
}

/* レスポンシブ */
@media (max-width: 768px) {
   .c-timeline-section__title {
      font-size: 1.1rem;
   }

   .c-timeline-item__link {
      padding: 0.4rem 0.5rem;
      gap: 0.6rem;
   }

   .c-timeline-item__desc {
      padding-left: 1.5rem;
      font-size: 0.85rem;
   }

   .c-timeline-item__time {
      min-width: 55px;
      padding: 2px 6px;
   }
}

/* --------------------------------------------------------------------------------
 * ChatGPT Style Chat (Modern AI UI)
 * -------------------------------------------------------------------------------- */

.c-chat-gpt {
   margin: 4rem 0;
   display: flex;
   flex-direction: column;
   gap: 2rem;
   padding: 2rem;
   background: #fff;
   border: 1px solid #e5e5e5;
   /* 全体の境界線 */
   border-radius: 16px;
   font-family: var(--cre-font-family-base);
}

/* アコーディオンの中に入る場合は枠線を消してスッキリさせる */
.c-accordion__inner>.c-chat-gpt {
   margin: 0;
   border: none;
   padding: 1rem 0;
   background: transparent;
}

/* スクロールオプション */
.c-chat-gpt-scroll,
.c-chat-gemini-scroll {
   max-height: 500px !important;
   max-width: 100% !important;
   /* 幅を 100% に制限 */
   box-sizing: border-box !important;
   /* パディングを含めた幅計算 */
   overflow-y: auto !important;
   overflow-x: hidden !important;
   /* 横スクロールを完全に禁止 */
   /* 内側の枠線は不要になるため調整 */
   box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.01);
   /* スクロールバーのカスタマイズ */
   scrollbar-width: thin;
   scrollbar-color: #ccc transparent;
}

.c-chat-gpt__item {
   display: flex;
   flex-direction: column;
   width: 100%;
}

/* ユーザーの発言 (右寄せバブル) */
.c-chat-gpt__item--user {
   align-items: flex-end;
}

.c-chat-gpt__item--user .c-chat-gpt__bubble {
   display: block !important;
   background-color: #f4f4f4;
   color: #0d0d0d;
   font-size: 0.8rem;
   border-radius: 1.2rem;
   padding: 0.4rem 0.9rem !important;
   max-width: 85% !important;
   width: fit-content !important;
   /* 内容に確実に合わせる */
   margin-left: auto;
   line-height: 1.4 !important;
   border: 1px solid transparent;
   flex-grow: 0;
   /* 勝手に広がらないように */
   flex-shrink: 1;
}

/* 内部に自動挿入されたタグの余白を強制リセット */
.c-chat-gpt__bubble p,
.c-chat-gpt__bubble div {
   margin: 0 !important;
   padding: 0 !important;
   line-height: inherit !important;
}

/* アシスタント（AI）の発言 (左寄せ・装飾なし) */
.c-chat-gpt__item--assistant {
   align-items: flex-start;
}

.c-chat-gpt__bubble {
   line-height: 1.7;
   font-size: 0.8rem;
   white-space: pre-wrap;
   /* 改行をそのまま反映 */
   word-break: break-word;
}

.c-chat-gpt__item--assistant .c-chat-gpt__bubble {
   padding-left: 0;
   width: 100%;
   margin-bottom: 0.5rem;
   /* アイコンとの間隔 */
}

/* アクションアイコン群 */
.c-chat-gpt__actions {
   display: flex;
   gap: 0.8rem;
   margin-top: 0.5rem;
   opacity: 0.6;
   /* 少し薄めに */
   transition: opacity 0.2s;
}

.c-chat-gpt__item--assistant:hover .c-chat-gpt__actions {
   opacity: 1;
   /* ホバーでハッキリ表示 */
}

.c-chat-gpt__action-btn {
   background: none;
   border: none;
   padding: 4px;
   cursor: pointer;
   color: #666;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: color 0.2s, background 0.2s;
   border-radius: 4px;
}

.c-chat-gpt__action-btn:hover {
   color: #000;
   background-color: #f0f0f0;
}

.c-chat-gpt__action-btn svg {
   width: 16px;
   height: 16px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* Markdown Lite 装飾 (JS変換後用) */
.c-chat-gpt__bubble strong {
   font-weight: 700;
   color: #000;
}

.c-chat-gpt__bubble .c-chat-gpt__h1,
.c-chat-gpt__bubble .c-chat-gpt__h2,
.c-chat-gpt__bubble .c-chat-gpt__h3,
.c-chat-gpt__bubble .c-chat-gpt__h4,
.c-chat-gpt__bubble .c-chat-gpt__h5,
.c-chat-gpt__bubble .c-chat-gpt__h6 {
   margin: 1.5rem 0 0.8rem !important;
   font-weight: bold !important;
   line-height: 1.4 !important;
   display: block !important;
}

.c-chat-gpt__bubble .c-chat-gpt__h1 {
   font-size: 1.4rem !important;
   border-bottom: 2px solid #eee;
   padding-bottom: 5px !important;
}

.c-chat-gpt__bubble .c-chat-gpt__h2 {
   font-size: 1.25rem !important;
}

.c-chat-gpt__bubble .c-chat-gpt__h3 {
   font-size: 1.15rem !important;
}

.c-chat-gpt__bubble .c-chat-gpt__h4 {
   font-size: 1.05rem !important;
}

.c-chat-gpt__bubble .c-chat-gpt__h5 {
   font-size: 1rem !important;
}

.c-chat-gpt__bubble .c-chat-gpt__h6 {
   font-size: 0.95rem !important;
   color: #666;
}

.c-chat-gpt__hr {
   border: 0;
   border-top: 1px solid #e5e5e5;
   margin: 1rem 0 0.6rem !important;
   /* 他のリセットを上書きして確実に詰める */
   display: block;
}

/* スマホ対応 */
@media (max-width: 768px) {
   .c-chat-gpt {
      gap: 2rem;
   }

   .c-chat-gpt__item--user .c-chat-gpt__bubble {
      max-width: 90%;
      font-size: 0.95rem;
   }

   .c-chat-gpt__bubble {
      font-size: 0.95rem;
   }
}

/* --------------------------------------------------------------------------------
 * Floating Timeline Drawer
 * -------------------------------------------------------------------------------- */

/* フローティングボタン（動画の下に配置） */
.c-timeline-float-btn {
   position: absolute;
   right: 0;
   top: 100%;
   margin-top: 15px;
   width: auto;
   min-width: 100px;
   height: 40px;
   padding: 0 15px;
   background: var(--cre-color-accent);
   color: #fff;
   border: 2px solid #fff;
   /* 白縁を追加して目立たせる */
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   cursor: pointer;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
   z-index: 999999 !important;
   /* 最前面に */
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   opacity: 1;
   visibility: visible;
   font-weight: bold;
   font-size: 0.9rem;
}

.c-timeline-float-btn::after {
   content: "目次チャプター";
}

.c-timeline-float-btn.is-visible {
   opacity: 1;
   visibility: visible;
   transform: scale(1);
}

.c-timeline-float-btn:hover {
   transform: scale(1.1);
   background: var(--cre-color-accent-dark);
}

.c-timeline-float-btn svg {
   width: 24px;
   height: 24px;
}

/* ドロワー本体 */
.c-timeline-drawer {
   position: fixed;
   top: 0;
   right: -340px;
   /* 初期状態は隠す */
   width: 300px;
   height: 100%;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
   z-index: 2147483647;
   /* ブラウザ最大値付近の z-index */
   transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
   display: flex;
   flex-direction: column;
}

.c-timeline-drawer.is-open {
   right: 0;
}

.c-timeline-drawer__header {
   padding: 1.5rem 1rem;
   border-bottom: 1px solid #eee;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.c-timeline-drawer__title {
   margin: 0;
   font-size: 1.1rem;
   font-weight: bold;
   color: var(--cre-color-text);
}

.c-timeline-drawer__close {
   background: none;
   border: none;
   cursor: pointer;
   padding: 5px;
   color: #999;
   transition: color 0.2s;
}

.c-timeline-drawer__close:hover {
   color: var(--cre-color-accent);
}

/* ドロワー内リスト */
.c-timeline-drawer__body {
   flex: 1;
   overflow-y: auto;
   padding: 1rem 0;
}

.c-timeline-drawer .c-timeline-item {
   margin-bottom: 0;
}

.c-timeline-drawer .c-timeline-item__link {
   border-radius: 0;
   padding: 0.8rem 1rem;
   border: none !important;
   /* ドロワー内では枠線を消す */
   align-items: flex-start;
   /* 長文タイトル時に上に合わせる */
}

.c-timeline-drawer .c-timeline-item__link.active {
   background-color: var(--cre-color-accent-sub);
}

.c-timeline-drawer .c-timeline-item__title {
   font-size: 0.9rem;
   line-height: 1.4;
   word-break: break-all;
   white-space: normal;
   /* 折り返しを有効に */
}

.c-timeline-drawer .c-timeline-item__time {
   font-size: 0.7rem;
   padding: 2px 6px;
   min-width: 50px;
}

/* ドロワーの背景（オーバーレイ） */
.c-timeline-drawer-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.2);
   z-index: 2147483646;
   /* ドロワーの直下 */
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s;
}

.c-timeline-drawer-overlay.is-visible {
   opacity: 1;
   visibility: visible;
}

@media (min-width: 769px) {
   .c-timeline-drawer-overlay {
      display: none !important;
      /* PCではオーバーレイを完全に消す */
   }
}

/* 元のレスポンシブを上書き（重複防止のため削除） */
#dummy-deleted-section {
   display: none;
}

@media (max-width: 768px) {
   .c-timeline-section__title {
      font-size: 1.1rem;
   }

   .c-timeline-item__link {
      padding: 0.4rem 0.5rem;
      gap: 0.6rem;
   }

   .c-timeline-item__desc {
      padding-left: 1.5rem;
      font-size: 0.85rem;
   }

   .c-timeline-item__time {
      min-width: 55px;
      padding: 2px 6px;
   }
}

/* --------------------------------------------------------------------------------
 * c-flow-chart: 改良版コネクテッド・タイムライン
 * -------------------------------------------------------------------------------- */

.c-flow-chart {
   max-width: 650px;
   margin: 4rem auto;
   position: relative;
   padding-left: 45px;
   /* 左側に線と番号のスペースを確保 */
   counter-reset: flow-step;
   /* 自動採番の初期化 */
}

/* 垂直のコネクト線 */
.c-flow-chart::before {
   content: "";
   position: absolute;
   top: 10px;
   bottom: 15px;
   left: 17px;
   width: 2px;
   background: #e0e6ed;
   z-index: 1;
}

.c-flow-chart__item {
   position: relative;
   background: #fff;
   padding: 1.5rem 1.8rem;
   margin-bottom: 2rem;
   border-radius: 12px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   border: 1px solid #f0f4f8;
   transition: all 0.3s ease;
   z-index: 2;
}

.c-flow-chart__item:last-child {
   margin-bottom: 0;
}

.c-flow-chart__item:hover {
   transform: translateX(5px);
   box-shadow: 0 8px 25px rgba(64, 87, 150, 0.12);
   border-color: var(--cre-color-accent);
}

/* ステップ番号（ドット部分） */
.c-flow-chart__item::before {
   counter-increment: flow-step;
   content: counter(flow-step);
   position: absolute;
   top: 20px;
   left: -44px;
   /* 番号を中央の線上に配置 */
   width: 26px;
   height: 26px;
   background: var(--cre-color-accent);
   color: #fff;
   font-size: 0.85rem;
   font-weight: bold;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   border: 4px solid #fff;
   box-shadow: 0 0 0 2px var(--cre-color-accent);
   z-index: 3;
}

.c-flow-chart__content strong {
   display: block;
   font-size: 1.15rem;
   color: var(--cre-color-text);
   margin-bottom: 0.5rem;
   border-bottom: 1px solid #f0f4f8;
   padding-bottom: 0.3rem;
}

.c-flow-chart__content p {
   margin: 0;
   font-size: 0.95rem;
   color: #333;
   line-height: 1.7;
}

/* モバイル対応 */
@media (max-width: 600px) {
   .c-flow-chart {
      margin: 2rem 0 2rem 10px;
      padding-left: 35px;
   }

   .c-flow-chart::before {
      left: 13px;
   }

   .c-flow-chart__item {
      padding: 1.2rem;
   }

   .c-flow-chart__item::before {
      left: -33px;
      width: 22px;
      height: 22px;
      font-size: 0.75rem;
   }
}

/* --------------------------------------------------------------------------------
 * Gemini Style Chat (Gemini AI UI)
 * -------------------------------------------------------------------------------- */

.c-chat-gemini,
.c-chat-gemini * {
   box-sizing: border-box !important;
}

.c-chat-gemini {
   margin: 4rem 0;
   display: flex;
   flex-direction: column;
   gap: 2.5rem;
   padding: 2rem;
   background: #fff;
   border: 1px solid #e5e5e5;
   /* 全体の境界線 */
   border-radius: 16px;
   font-family: var(--cre-font-family-base);
   max-width: 100%;
   /* 親の幅を超えないように */
}

.c-chat-gemini__item {
   display: flex;
   flex-direction: column;
   width: 100%;
}

/* ユーザーの発言 (右寄せバブル) */
.c-chat-gemini__item--user {
   align-items: flex-end;
}

.c-chat-gemini__item--user .c-chat-gemini__bubble {
   background-color: #f0f4f9;
   /* Gemini風の淡いブルーグレー */
   color: #1f1f1f;
   font-size: 0.8rem;
   border-radius: 1.5rem;
   padding: 0.8rem 1.2rem;
   max-width: 85%;
   width: fit-content;
   line-height: 1.5;
   border: none;
}

/* アシスタント（Gemini）の発言 */
.c-chat-gemini__item--assistant {
   align-items: flex-start;
   position: relative;
   padding-left: 2.5rem;
   /* アイコン用のスペース */
}

/* キラキラ星アイコン (Gemini Icon) - アップロード画像に基づき修正 */
.c-chat-gemini__item--assistant::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0.2rem;
   width: 1.5rem;
   height: 1.5rem;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285f4' d='M12 2c0 5.514 4.486 10 10 10-5.514 0-10 4.486-10 10 0-5.514-4.486-10-10-10 5.514 0 10-4.486 10-10z'/%3E%3C/svg%3E");
   background-size: contain;
   background-repeat: no-repeat;
}

.c-chat-gemini__bubble {
   font-size: 1rem;
   font-size: 0.8rem;
   line-height: 1.7;
   color: #1f1f1f;
   width: 100%;
   white-space: pre-wrap;
   /* 改行を反映させる */
   word-break: break-word;
   /* 長い単語での折り返し */
   overflow-wrap: break-word;
}

/* 画像表示の特別対応 (横幅 2/3、角丸、影なし) */
.c-chat-gemini__bubble img {
   display: block;
   width: 66.66% !important;
   /* 画面横幅の2/3 */
   max-width: 500px;
   /* 過剰な巨大化を防止 */
   max-height: 400px;
   /* 縦長すぎる画像への配慮 */
   object-fit: contain;
   /* アスペクト比を維持 */
   height: auto;
   margin: 1.5rem 0;
   border-radius: 16px;
   /* 強めの角丸 */
   box-shadow: none;
   /* 影を削除 */
   transition: transform 0.3s ease;
}

.c-chat-gemini__bubble img:hover {
   transform: scale(1.02);
}

/* モバイル対応 */
@media (max-width: 768px) {
   .c-chat-gemini {
      gap: 2rem;
      padding: 0.5rem;
   }

   .c-chat-gemini__bubble img {
      width: 100% !important;
      /* スマホでは幅いっぱいに */
   }

   .c-chat-gemini__item--user .c-chat-gemini__bubble {
      max-width: 90%;
   }
}

/* --------------------------------------------------------------------------------
 * Gemini Action Icons
 * -------------------------------------------------------------------------------- */

.c-chat-gemini__actions {
   display: flex;
   gap: 0.6rem;
   margin-top: 0.8rem;
   opacity: 0.5;
   transition: opacity 0.2s;
   padding-left: 0.2rem;
}

.c-chat-gemini__item--assistant:hover .c-chat-gemini__actions {
   opacity: 1;
}

.c-chat-gemini__action-btn {
   background: none;
   border: none;
   padding: 6px;
   cursor: pointer;
   color: #444;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s, color 0.2s;
   border-radius: 50%;
   width: 32px;
   height: 32px;
}

.c-chat-gemini__action-btn:hover {
   background-color: #f0f4f9;
   color: #1a73e8;
}

.c-chat-gemini__action-btn svg {
   width: 18px;
   height: 18px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* --------------------------------------------------------------------------------
 * SNS Post Card (X/Twitter風のポストカード)
 * -------------------------------------------------------------------------------- */

.sns-post-card {
   background: #fff;
   border: 1px solid #e1e8ed;
   border-radius: 12px;
   padding: 16px;
   margin: 24px 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   color: #0f1419;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   max-width: 500px;
   margin-left: auto;
   margin-right: auto;
}

.sns-post-header {
   display: flex;
   align-items: center;
   margin-bottom: 12px;
}

.sns-post-icon {
   width: 48px;
   height: 48px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 50%;
   margin-right: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: bold;
   font-size: 20px;
   flex-shrink: 0;
}

.sns-post-user-info {
   display: flex;
   flex-direction: column;
}

.sns-post-user-name {
   font-weight: 800;
   font-size: 15px;
   line-height: 20px;
}

.sns-post-user-id {
   color: #536471;
   font-size: 14px;
}

.sns-post-content {
   font-size: 16px;
   line-height: 1.5;
   white-space: pre-line;
   margin-bottom: 16px;
}

/* アクションアイコン（コメント、リツイート、いいね）を擬似要素で自動生成 */
.sns-post-card::after {
   content: "";
   display: block;
   border-top: 1px solid #eff3f4;
   padding-top: 12px;
   margin-top: 12px;
   height: 20px;
   background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="180" height="20" viewBox="0 0 180 20"%3E%3C!-- コメントアイコン(丸枠なし) --%3E%3Cg transform="translate(0, 0)"%3E%3Cpath d="M 6 7 Q 6 6 7 6 L 13 6 Q 14 6 14 7 L 14 12 Q 14 13 13 13 L 8 13 L 6 15 Z" fill="none" stroke="%23cbd5e0" stroke-width="1.5" stroke-linejoin="round"/%3E%3C/g%3E%3C!-- リツイートアイコン --%3E%3Cg transform="translate(70, 0)"%3E%3Cpath d="M 14 6 L 17 3 L 14 0 M 17 3 L 7 3 Q 4 3 4 6 L 4 9" fill="none" stroke="%23cbd5e0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M 6 14 L 3 17 L 6 20 M 3 17 L 13 17 Q 16 17 16 14 L 16 11" fill="none" stroke="%23cbd5e0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3C!-- いいね(ハート)アイコン - よりハートらしい形 --%3E%3Cg transform="translate(140, 0)"%3E%3Cpath d="M 10 17.5 C 10 17.5 3.5 12 3.5 7.5 C 3.5 5 5 3.5 7 3.5 C 8.5 3.5 9.5 4.5 10 5.5 C 10.5 4.5 11.5 3.5 13 3.5 C 15 3.5 16.5 5 16.5 7.5 C 16.5 12 10 17.5 10 17.5 Z" fill="none" stroke="%23cbd5e0" stroke-width="1.5" stroke-linejoin="round"/%3E%3C/g%3E%3C/svg%3E');
   background-repeat: no-repeat;
   background-position: left center;
   background-size: auto 100%;
}

/* モバイル対応 */
@media (max-width: 768px) {
   .sns-post-card {
      max-width: 100%;
      margin: 16px 0;
      padding: 12px;
   }

   .sns-post-icon {
      width: 40px;
      height: 40px;
      font-size: 18px;
   }

   .sns-post-content {
      font-size: 15px;
   }
}

/* --------------------------------------------------------------------------------
 * Variation Boxes & Text Points (User Added)
 * -------------------------------------------------------------------------------- */

.box_blue {
   padding: 1rem 1rem .7rem;
   background: var(--cre-color-accent-sub-blue);
   margin: 2rem 0;
}

.text_point_blue {
   font-weight: bold;
   padding: 0 !important;
}

.text_point_blue:before {
   color: var(--cre-color-accent-blue-light);
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f138";
   margin-right: .4rem;
   font-size: 1.25rem;
}


.box_orange {
   padding: 1rem 1rem .7rem;
   background: var(--cre-color-accent-sub-orange);
   margin: 2rem 0;
}


.text_point_orange {
   font-weight: bold;
   padding: 0 !important;
   padding-left: 1.5rem !important;
   text-indent: -1.7rem;
}

.text_point_orange:before {
   color: var(--cre-color-accent-orange);
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f138";
   margin-right: .4rem;
   font-size: 1.25rem;
}

.box_green {
   padding: 20px 20px 20px 72px;
   border-radius: 4px;
   position: relative;
   display: block;
   background: var(--cre-color-accent-sub-green);
   margin: 1.5rem 0;
}

.box_green:before {
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f00c";
   color: var(--cre-color-accent-green-light);
   border-right: 1px solid var(--cre-color-accent-green-light);
   font-size: 2rem;
   position: absolute;
   padding-right: .4rem;
   line-height: 1em;
   top: 50%;
   margin-top: -.5em;
   left: 10px;
   width: 44px;
   text-align: center;
}


.box_green p {
   padding-left: .5rem;
   margin-bottom: 0;
}

.box_red {
   padding: 20px 20px 20px 72px;
   border-radius: 4px;
   position: relative;
   display: block;
   background: var(--cre-color-accent-sub-red);
   margin: 1.5rem 0;
}

.box_red:before {
   content: "×";
   color: var(--cre-color-accent-red);
   border-right: 1px solid var(--cre-color-accent-red);
   font-size: 3rem;
   position: absolute;
   padding-right: .4rem;
   line-height: 1em;
   top: 50%;
   margin-top: -.5em;
   left: 10px;
   width: 44px;
   text-align: center;
}


.box_red p {
   padding-left: .5rem;
   margin-bottom: 0;
}

.box_green_q {
   padding: 20px 20px 20px 72px;
   border-radius: 4px;
   position: relative;
   display: block;
   background: var(--cre-color-accent-sub-green);
   margin: 1.5rem 0;
}

.box_green_q:before {
   content: "Q";
   color: var(--cre-color-accent-green-light);
   border-right: 1px solid var(--cre-color-accent-green-light);
   font-size: 2.7rem;
   position: absolute;
   padding-right: .4rem;
   line-height: 1em;
   top: 50%;
   margin-top: -.5em;
   left: 10px;
   width: 44px;
   text-align: center;
}


.box_green_q p {
   padding-left: .5rem;
   margin-bottom: 0;
}

.box_red_a {
   padding: 20px 20px 20px 72px;
   border-radius: 4px;
   position: relative;
   display: block;
   background: var(--cre-color-accent-sub-red);
   margin: 1.5rem 0;
}

.box_red_a:before {
   content: "A";
   color: var(--cre-color-accent-red);
   border-right: 1px solid var(--cre-color-accent-red);
   font-size: 3rem;
   position: absolute;
   padding-right: .4rem;
   line-height: 1em;
   top: 50%;
   margin-top: -.5em;
   left: 10px;
   width: 44px;
   text-align: center;
}


.box_red_a p {
   padding-left: .5rem;
   margin-bottom: 0;
}

.box_red_02 {
   position: relative;
   padding: .5rem 1.1rem 1.2rem;
   background: var(--cre-color-accent-sub-red);
   margin: 2rem 0;
}

.box_red_02 .box-title {
   text-align: center;
   color: var(--cre-color-accent-red);
   font-size: 1.25rem;
   font-weight: bold;
   border-bottom: solid 1px var(--cre-color-accent-red);
   padding: 0 0 .5rem;
   text-indent: -.9rem;
   line-height: 1.4;
   margin: 0 0 1rem;
}

.box_red_02 .box-title:before {
   margin-right: .4rem;
   display: inline-block;
   color: var(--cre-color-accent-red);
   text-align: center;
   content: "×";
}

.box_red_02 p {
   margin: 0 1rem 1rem;
}


.box_green_02 {
   position: relative;
   padding: .5rem 1.1rem 1.2rem;
   background: var(--cre-color-accent-sub-green);
   margin: 2rem 0;
}

.box_green_02 .box-title {
   text-align: center;
   color: var(--cre-color-accent-green-light);
   font-size: 1.25rem;
   font-weight: bold;
   border-bottom: solid 1px var(--cre-color-accent-green-light);
   padding: 0 0 .5rem;
   text-indent: -.9rem;
   line-height: 1.4;
   margin: 0 0 1rem;
}

.box_green_02 .box-title:before {
   font-size: .9rem;
   margin-right: .2rem;
   display: inline-block;
   color: var(--cre-color-accent-green-light);
   font-weight: 900;
   text-align: center;
   font-family: "Font Awesome 5 Free";
   content: "\f00c";
}

.box_green_02 p {
   margin: 0 1rem 1rem;
}


.box_gray {
   padding: 1rem 1rem .7rem;
   background: var(--cre-color-bg-light);
   margin: 2rem 0;
}


.box_gray_02 {
   padding: 1rem 1rem 1.5rem;
   background: #fdfdfd;
   margin: 2rem 0;
}

.text_point_gray_02 {
   font-weight: bold;
   padding: 0 !important;
}