@charset "utf-8";
/* ▼▼▼ レスポンシブ対応のための最終・確定版CSS ▼▼▼ */

/* --- ページ全体の基本設定 --- */
.page-container {
  max-width: 880px; /* PCでの最大幅 */
  margin: 0 auto;   /* ページ全体を中央揃え */
}
.header-image {
  max-width: 100%;
  height: auto;
}
main.main-content {
  width: 100%;
  padding: 0 10px; /* スマホでの左右の余白 */
  box-sizing: border-box;
}

/* --- リンクグループの設定 --- */
.link-group-container {
  margin: 20px 0;
}
.internal-links, 
.social-media-buttons, 
.main-action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; 
  gap: 15px;      
  padding: 10px 0;
}

/* --- テーブル横スクロール設定 --- */
.scroll-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #ccc;
}
.scroll-table table {
  width: 100%;
  min-width: 700px; /* テーブルの最小幅 */
}
.scroll-table th,
.scroll-table td {
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
}
.scroll-table th {
  background-color: #e9ecef;
}

/* --- フッターの設定 --- */
footer {
  margin-top: 20px;
  text-align: center;
  padding: 0 10px;
  box-sizing: border-box;
}
.disclaimer {
  text-align: left;
  margin-bottom: 10px;
}

/* PCなどの広い画面では非表示 */
.br-sp {
  display: none;
}

  .day {
    font-size: 20px;
  }

/* --- スマホ表示用の特別ルール（画面幅が680px以下の時に適用） --- */
@media screen and (max-width: 680px) {
  /* 「地場者の立ち話」などの文字サイズを少し調整 */
  .internal-links a {
    font-size: 0.8em; 
  }
  
  .day {
    font-size: 16px;
  }

  /* Twitterの「フォローしてください」画像を小さくする */
  .social-media-buttons img[alt*="フォロー"] {
    height: 20px; /* 高さを20pxに固定 */
    width: auto;
  }

  /* 「入会案内へ」「資料ダウンロード」ボタンを小さくする */
  .main-action-buttons a.btnbk2 {
    font-size: 13px;       /* 文字を少し小さく */
    padding: 6px 10px;   /* ボタンの余白を詰める */
  }
  /* 「画面小さい時だけ改行する */  
  .br-sp {
    display: block; /* 必要に応じて inline-block など */
  }
/* ▼▼▼ このブロックをここに追加 ▼▼▼ */
  .bubble-content {
      font-size: 0.9em;
  }
  /* ▲▲▲ ここまで ▲▲▲ */  
}

/* ▼▼▼ 新しい共有ボタンのためのCSS ▼▼▼ */

.share-container {
  position: relative; /* 子要素（メニュー）を配置する基準点になります */
  display: inline-block; /* 他の要素と並べられるようにします */
}
/* 共有ボタン本体のアイコンサイズ */
#share-button-trigger i {
    font-size: 29px; /* ←この数字をお好みの大きさに変更してください */
}
/* 親ボックス（ドロップダウンメニュー全体）のスタイル */
#share-options {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 10;
    margin-bottom: 8px;
    padding: 5px; /* メニューの内側の余白 */
    width: 180px; /* メニューの幅を広げる */
}

/* 子要素（各リンク）のスタイル */
#share-options a {
    display: flex; /* 中身（アイコンと文字）を横並びにする */
    align-items: center; /* 上下中央に揃える */
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
    transition: background-color 0.2s;
}

/* アイコンと文字の間の隙間 */
#share-options a > * { /* アイコン(i, b)と文字(span)の両方に適用 */
    margin-right: 10px;
}
#share-options a > b { /* B!だけ少し調整 */
    font-size: 1.2em;
}

/* マウスが乗った時のスタイル */
#share-options a:hover {
  background-color: #f0f0f0; /* 色が反転するように少し濃いグレーに */
  color: #000;
}

/* ★★★ このクラスで表示・非表示を切り替えます ★★★ */
.hidden {
  display: none !important;
}

/* ▼▼▼ ヘッダー下のボタンを配置するためのCSS ▼▼▼ */

.header-buttons {
  text-align: center; /* ボタンを中央揃えにする */
  padding: 15px 0;    /* ボタンの上下に余白を作る */
  border-bottom: 1px solid #eee; /* ボタンエリアの下に薄い区切り線を入れる（任意） */
  
}

/* ▼▼▼ 見出しとボタンを横並びにするためのCSS ▼▼▼ */

.page-header {
  display: flex; /* 中身を横並びにする */
  justify-content: space-between; /* 両端に寄せる */
  align-items: center; /* 上下中央に揃える */
  flex-wrap: wrap; /* スマホで画面が狭くなったら折り返す */
  gap: 15px; /* 折り返した時の隙間 */
  margin-bottom: 20px; /* 下に少し余白を作る */
}

/* ▼▼▼ 共有ボタンとフォローアイコンを横並びにするCSS ▼▼▼ */

/* 全体を囲むラッパー */
.social-actions-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* フォローアイコンのグループ */
.follow-icons {
    display: flex;
    gap: 20px;
}

/* フォローアイコン自体のスタイル */
.follow-icons a {
    font-size: 29px;
    text-decoration: none;
    display: flex;
    align-items: center;
}	
	
	/* ▼▼▼ アイコンの配置バランスを整えるための最終調整CSS ▼▼▼ */

.social-actions-wrapper .btnbk2 {
    display: inline-flex;    /* 中のアイコンを中央揃えにするための設定 */
    align-items: center;     /* 上下中央に揃える */
    justify-content: center; /* 左右中央に揃える */
    
    width: 44px;  /* 3つのボタンの幅を固定して揃える */
    height: 38px; /* 3つのボタンの高さを固定して揃える */

    box-sizing: border-box; /* paddingやborderを幅と高さに含める */
}

/* ▼▼▼ チャット形式のためのCSS ▼▼▼ */

/* チャット全体を囲むコンテナ */
.chat-container {
    padding: 10px;
    background-color: #FFFFFF; /* 会話全体の背景色 */
    border: 1px solid #eee;
    border-radius: 8px;
	font-size: 16px;
}

/* 吹き出しの基本スタイル */
.chat-bubble {
    display: flex;
    margin-bottom: 15px;
    max-width: 100%; /* 吹き出しの最大幅 */
}

/* 吹き出しの中身 */
.bubble-content {
    padding: 12px 16px;
    border-radius: 18px;
    line-height: 1.6;
}

/* 発言者の名前 */
.speaker-name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #555;
}

/* --- H氏（左側）のスタイル --- */
.h-san {
    justify-content: flex-start; /* 左寄せ */
}
.h-san .bubble-content {
    background-color: #e6ffed; /* 薄緑色の吹き出し */
}

/* --- K氏（右側）のスタイル --- */
.k-san {
    justify-content: flex-end; /* 右寄せ */
    flex-direction: row-reverse; /* ★アイコンと吹き出しの順番を反転させる */
}
.k-san .bubble-content {
    background-color: #e6f3ff; /* 青い吹き出し */
}
.k-san .speaker-name {
    text-align: right;
}

/* ▼▼▼ チャットアイコン用の追加CSS ▼▼▼ */

/* アイコン自体のスタイル */
.chat-icon {
    width: 60px;          /* アイコンの幅 (直径) */
    height: 60px;         /* アイコンの高さ (直径) */
    border-radius: 50%;   /* 角を50%丸めて完全な円にする */
    object-fit: cover;    /* 画像が引き伸ばされないように調整 */
    flex-shrink: 0;       /* ★スマホで縦に伸びるのを防ぐ最重要設定 */
}

/* 吹き出しとアイコンの縦位置を揃える */
.chat-bubble {
    align-items: flex-start;
}

/* H氏（左側）のアイコンと吹き出しの隙間 */
.h-san .chat-icon {
    margin-right: 12px;
}

/* K氏（右側）のアイコンと吹き出しの隙間 */
.k-san .chat-icon {
    margin-left: 12px;
}

/* ▼▼▼ 入会案内ボタンの位置を調整するCSS ▼▼▼ */

.action-buttons-container {
    text-align: center; /* ボタンを中央に配置 */
    margin: 20px 0;   /* ボタンの上下に余白を設ける */
}