/* グローバルなbox-sizingリセット */
*, *::before, *::after {
  box-sizing: border-box;
}

/* グローバルなHTML/Bodyの調整: オーバーフローを防ぐ */
html, body {
    width: 100%;
    overflow-x: hidden; /* 横方向のスクロールを禁止 */
    margin: 0;
    padding: 0;
}

/* サイト全体のコンテナが適切にレスポンシブになるように調整 (Astraテーマの構造に依存) */
/* Astraテーマのデフォルトコンテナは通常 .ast-container または #primary など */
/* これらはテーマのCSSによって既に設定されていることが多いですが、念のため */
.site-content, .ast-container, .ast-row {
    max-width: 100%;
    /* padding はテーマのデフォルトに任せるか、必要に応じてここで追加 */
    /* padding-left: 15px; padding-right: 15px; */
    box-sizing: border-box;
}

/* Astraテーマのヘッダーの調整（ボイラープレートの右切れ対策） */
.site-header, .site-header-primary-wrap, .ast-main-header-wrap {
    max-width: 100%;
    /* padding はテーマのデフォルトに任せるか、必要に応じてここで追加 */
    /* padding-left: 15px; padding-right: 15px; */
    box-sizing: border-box;
}


/* --- キャラクター会話のスタイル --- */
.character-dialogue-wrapper {
  max-width: 700px; /* 会話セクション全体の最大幅 (PC用) */
  margin: 0 auto 30px; /* 中央寄せと下部の余白 (PC用) */
}

.dialogue-line {
  position: relative;
  display: block; /* アイコンを絶対配置するための基準 */
  margin-bottom: 20px;
  min-height: 80px; /* アイコンの高さ分のスペースを確保 */
}

/* 顔アイコン：絶対配置で左右端に固定 */
/* 左側と右側のアイコンに共通のスタイル */
.character-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  object-fit: cover;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10; /* 吹き出しより手前に表示 */
}

/* 各位置に合わせたアイコンの配置 */
.dialogue-line.left .character-icon {
  left: 0;
}

.dialogue-line.right .character-icon {
  right: 0;
}

/* 画像がない場合のテキストアイコン（functions.phpでtext-iconクラスが追加される場合） */
.character-icon.text-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0; /* デフォルトの背景色 */
    color: #666; /* デフォルトの文字色 */
    font-size: 1.8em;
    font-weight: bold;
    line-height: 1; /* 行の高さを調整 */
}

/* 吹き出し（テキスト部分） */
.bubble-text {
  background-color: #fff9e6; /* 吹き出しの背景色 */
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: inset 0 0 0 2px rgba(255, 223, 120, 0.3), /* 内側の枠線のような影 */
              2px 2px 8px rgba(0, 0, 0, 0.1); /* 柔らかい外側の影 */
  color: #333;
  font-size: 1.05em;
  line-height: 1.6;
  word-break: break-word; /* 長い単語の途中で改行 */
  position: relative;
}

/* アイコンが左にある場合の吹き出しのスタイル */
.dialogue-line.left .bubble-text {
  margin-left: calc(80px + 15px); /* アイコン幅 + 余白 */
  margin-right: 15px; /* 反対側の余白 */
  max-width: calc(100% - (80px + 15px + 15px)); /* 全体幅からアイコンと両側の余白を引く */
}

/* アイコンが右にある場合の吹き出しのスタイル */
.dialogue-line.right .bubble-text {
  margin-right: calc(80px + 15px); /* アイコン幅 + 余白 */
  margin-left: 15px; /* 反対側の余白 */
  max-width: calc(100% - (80px + 15px + 15px)); /* 全体幅からアイコンと両側の余白を引く */
}

/* --- ゲームカクテルメイン画像 (gamecocktail-main-image) の調整 --- */
/* single-gamecocktail.php でこのクラスが適用されます */
.gamecocktail-main-image { /* HTMLのクラス名に合わせてください */
  display: block;
  max-width: 700px; /* PCでの画像の最大幅 */
  height: auto;
  margin: 0 auto 20px; /* 中央寄せと下部の余白 */
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  object-fit: contain; /* PCでは 'contain' を維持 */
  padding: 0; /* 画像自体にpaddingは設けない */

  /* Astraテーマの contain-intrinsic-size を無効にする (問題の原因となる場合があるため) */
  contain-intrinsic-size: none !important;
}

/* --- PC表示時の見出しやコンテンツの揃え --- */
/* .entry-content はWordPressの記事コンテンツの標準的なラッパーです */
/* その中の h1, h2, h3 などの見出しや、p, ul, ol などのテキストコンテンツを対象とします */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content pre,
.entry-content blockquote,
.entry-content figure, /* 画像ブロックなども含める */
.entry-content table {
    max-width: 700px; /* ゲームカクテル画像と同じ幅に揃える */
    margin-left: auto; /* 中央寄せ */
    margin-right: auto; /* 中央寄せ */
    box-sizing: border-box; /* パディングやボーダーを含めて幅を計算 */
    /* 必要に応じて、左右に最小限のパディングを追加することも検討 (PCでの見栄えのため) */
    /* padding-left: 15px; */
    /* padding-right: 15px; */
}


/* --- レスポンシブデザイン --- */
@media (max-width: 768px) {
  .character-dialogue-wrapper {
    max-width: 100%; /* メインラッパーをモバイルで100%幅にする */
    /* ラッパー自体に左右の余白を設定 - これがコンテンツ全体に影響する */
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto 15px; /* マージンをモバイル用に調整 */
  }

  .dialogue-line {
    display: flex; /* モバイルではFlexboxに戻す */
    align-items: flex-start; /* アイコンとテキストを上揃え */
    flex-wrap: nowrap; /* 折り返しを防ぐ */
    min-height: auto; /* 高さを自動調整 */
    margin-bottom: 15px; /* マージンを少し狭く */
    padding: 0; /* dialogue-line 自体は character-dialogue-wrapper の子なので、そのパディングは親から継承 */
  }

  /* アイコンが左にある場合の並び */
  .dialogue-line.left {
    flex-direction: row;
  }

  /* アイコンが右にある場合の並び */
  .dialogue-line.right {
    flex-direction: row-reverse; /* アイコンを右に配置 */
  }

  .character-icon {
    position: static !important; /* 絶対配置を解除 */
    transform: none !important; /* 変換をリセット */
    width: 55px !important; /* アイコンサイズを小さく */
    height: 55px !important;
    box-shadow: none !important; /* シャドウを解除 */
    border: none !important; /* ボーダーを解除 */
    flex-shrink: 0; /* 縮小しない */
  }

  /* 左アイコンの場合のアイコンと吹き出しの間隔 */
  .dialogue-line.left .character-icon {
      margin: 0 10px 0 0;
  }
  /* 右アイコンの場合のアイコンと吹き出しの間隔 */
  .dialogue-line.right .character-icon {
      margin: 0 0 0 10px;
  }

  .bubble-text {
    flex-grow: 1; /* テキストが残りのスペースを埋める */
    margin: 0 !important; /* 絶対配置のためのマージンをリセット */
    /* アイコンのサイズ + gap を考慮した max-width */
    max-width: calc(100% - (55px + 10px)) !important;
    padding: 10px 14px; /* パディングを調整 */
    text-align: left; /* 強制的に左寄せに */
  }

  /* ゲームカクテルメイン画像のモバイル調整 */
  .gamecocktail-main-image {
    max-width: 100%; /* 親要素の幅に合わせて100%にする */
    width: 100%; /* 明示的に100%に設定 */
    height: auto; /* 高さを自動調整し、アスペクト比を保持 */
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: auto; /* 中央寄せ */
    margin-right: auto;
    padding: 0; /* paddingは持たない */
    object-fit: cover; /* コンテナ全体を覆う */
    object-position: center center; /* 中央を基準にトリミング */
  }

  /* モバイル表示時の見出しやコンテンツの揃えのリセット */
  /* モバイルでは100%幅になるようにリセットまたは調整 */
  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6,
  .entry-content p,
  .entry-content ul,
  .entry-content ol,
  .entry-content pre,
  .entry-content blockquote,
  .entry-content figure,
  .entry-content table {
      max-width: 100%; /* モバイルでは100%幅にする */
      margin-left: auto;
      margin-right: auto;
      /* 必要に応じてモバイル用のパディングを追加 */
      padding-left: 15px; /* 例: 左右に15pxのパディング */
      padding-right: 15px;
  }
}

@media (max-width: 480px) {
  /* character-dialogue-wrapper のパディングをさらに狭く */
  .character-dialogue-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }

  .character-icon {
    width: 45px !important; /* さらに小さく */
    height: 45px !important;
  }

  .bubble-text {
    font-size: 0.95em;
    padding: 8px 12px;
    /* アイコンのサイズ + gap を考慮した max-width を再調整 */
    max-width: calc(100% - (45px + 10px)) !important;
  }

  /* ゲームカクテルメイン画像のさらに小さなモバイル調整 */
  .gamecocktail-main-image {
    width: 70%; /* 画像の幅を70%に縮小 */
    max-width: 70%; /* 念のためmax-widthも */
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  /* 最も小さい画面サイズでのコンテンツのパディング調整 */
  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6,
  .entry-content p,
  .entry-content ul,
  .entry-content ol,
  .entry-content pre,
  .entry-content blockquote,
  .entry-content figure,
  .entry-content table {
      padding-left: 10px; /* 例: 左右に10pxのパディング */
      padding-right: 10px;
  }
}