/* ベースとなるスタイル */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN';
  background-color: #ffd700; /* 黄色の背景 */
  color: #64605f;
  margin: 0;
}

.h3 {
  font-family: 'Hiragino Kaku Gothic ProN';
  color: #211915;
  margin: 0;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
}

/* ヘッダー */
.hero img {
  width: 100%;
  padding: 20px 0;
}

/* メインコンテンツの背景 */
main {
  background-color: #fef9f1;
  padding: 20px;
  border-radius: 40px;
  margin-bottom: 20px;
}

/* セクション共通 */
section {
  margin-bottom: 40px;
}

/* タイトル共通 */
section h2 {
  color: #7d7e81;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

/* タイトルの下線共通 */
section h2::after {
  content: '';
  display: block;
  margin: 0 auto;
  height: 4px;
  width: 130px; /* 下線の幅 */
  background-color: #00bfa5;
  border-radius: 2px;
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 10px;
}

/* 画像コンテナ */
.about-images {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.interview {
  background-color: #fef9f1;
  text-align: center;
  padding: 20px;
  margin-bottom: 40px; /* セクションの下の余白 */
}

.speech-bubble {
  position: relative;
  left: 70px;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #ede5df;
  border-radius: 15px;
}

.speech-bubble::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 97%; /* 三角形の位置 */
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #ede5df;
}

.speech-bubble p {
  margin: 0;
  padding: 0;
}

.interview-item {
  display: flex; /* フレックスボックスを利用してアイテムを横に並べる */
  align-items: center; /* アイテムを垂直方向に中央揃えに */
  margin-bottom: 20px; /* アイテム間の余白 */
}

.balloon {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon .faceicon img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

.balloon .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative;
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #64605f; /* 吹き出しの背景色 */
}

.says:after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #64605f;
}

.says p {
  margin: 0;
  padding: 0;
}

.interviewee-name {
  font-size: 15px; /* 名前の文字サイズ */
  font-weight: bold; /* 太字 */
  margin-bottom: 5px; /* 下の余白 */
  position: relative; /* 画像と名前を重ねるために相対位置に */
  top: -20px; /* 画像と名前を重ねるために上にずらす */
  right: 108px; /* 画像と名前を重ねるために左にずらす */
}

.interview-link {
  color: #faf8f7; /* リンクの色 */
  text-decoration: none; /* 下線を消す */
  /* リンクのスタイルを追加する場合はここに */
}

.request-information-link {
  position: relative; /* 相対位置指定 */
  right: -25%; /* ボタンを真ん中に調整 */
  display: inline-block; /* リンクをインラインブロック要素に */
  margin-top: 30px; /* 上の余白 */
  margin-bottom: 50px; /* 下の余白 */
  background-color: #ffffff; /* ボタンの背景色 */
  color: #ee762b; /* ボタンのテキスト色 */
  text-decoration: none; /* 下線を消す */
  padding: 10px 20px; /* テキストのパディング */
  border: 2px solid #ee762b; /* ボタンのボーダー */
  border-radius: 25px; /* ボタンの角を丸くする */
  font-weight: bold; /* フォントを太字に */
  transition: all 0.3s ease; /* 背景色とボーダーカラーの変化をスムーズに */
  text-align: center; /* テキストを中央揃えに */
  width: auto; /* ボタンの幅を内容に合わせる */
  cursor: pointer; /* ホバー時のカーソルをポインターに */
}

.request-information-link:hover {
  background-color: #ee762b; /* ホバー時の背景色を明るいオレンジに */
  color: #ffffff; /* ホバー時のテキスト色を白に */
  text-decoration: none; /* ホバー時も下線を消す */
  border-color: #ee762b; /* ホバー時のボーダーカラーも明るいオレンジに */
}

.request-information-link::after {
  content: ' \2192'; /* 矢印のアイコンを追加 */
  color: #ee762b; /* アイコンの色 */
  font-weight: bold; /* アイコンも太字に */
  position: relative; /* 相対位置指定 */
  top: 0;
  right: -5px; /* アイコンの位置を調整 */
}

/* インタビューページのみのスタイル */

.interview-feature {
  background-color: #fef9f1;
  padding: 20px 20px 60px 20px; /* 上下左右の余白を調整 */
  border-top-right-radius: 50px; /* 右上の角を丸くする */
  border-bottom-right-radius: 50px; /* 右下の角を丸くする */
  margin-top: 20px; /* 上の余白 */
  margin-bottom: 20px; /* 下の余白 */
  margin-right: 20px; /* 右の余白 */
}

.interview-underline {
  position: relative;
  display: inline-block;
}

.interview-underline::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 100%; /* 線の幅を調整 */
  height: 4px; /* 線の太さを調整 */
  background: #00bfa5; /* 線の色を指定 */
  border-radius: 2px; /* 角を丸くする場合 */
  box-shadow: 0 5px 5px -5px #000000; /* 縦のシャドウを作成 */
}

.interview-number {
  position: relative;
  left: 200px;
  font-size: 32px;
  color: #ee762b;
  margin-right: 10px;
}

.interview-name {
  position: relative;
  left: 140px; /* 名前の位置調整 */
  font-size: 18px;
  font-weight: bold;
}

.interview-contents {
  font-weight: bold;
  font-size: 24px;
  position: relative; /* 擬似要素のポジショニング基準 */
  left: 200px;
  display: inline-block; /* 下線がテキストの幅に合わせるため */
}

.interview-contents::after {
  content: '';
  position: absolute;
  left: 60%;
  transform: translateX(-30%);
  bottom: -10px; /* 下線の位置を調整 */
  width: 200px; /* 下線の幅をh3タグの幅に合わせる */
  height: 4px; /* 下線の太さ */
  background: #00bfa5; /* 下線の色 */
  border-radius: 2px; /* 下線の角を丸くする場合 */
  box-shadow: 0 5px 5px -5px #000000; /* 縦のシャドウを作成 */
}

.interview-faceicon {
  width: 100px;
}

.interview-faceicon-container {
  position: relative;
  left: 100px;
  background-color: #71c5bb; /* 円の背景色 */
  border-radius: 50%; /* 円形にする */
  width: 150px; /* 円のサイズ */
  height: 150px; /* 円のサイズ */
  display: flex;
  justify-content: center;
  align-items: center;
}

.interview-qna {
  margin-bottom: 20px;
}

.interview-question-number {
  position: relative;
  top: 35px; /* 質問番号の位置調整 */
  left: 145px; /* 質問番号の位置調整 */
  font-weight: bold;
  color: #ee762b;
}

.interview-question {
  position: relative;
  display: inline-block;
  margin: 1.5em 10px 1.5em 10px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #ede5df;
  border-radius: 15px;
}

.interview-question::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 97%; /* 三角形の位置 */
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #ede5df;
}

.interview-question p {
  margin: 0;
  padding: 0;
}

.interview-answer {
  position: relative;
  display: inline-block;
  margin: 1.5em 10px 1.5em 15px; /* 質問と回答の間の余白 */
  padding: 7px 9px; /* 回答のパディング */
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #71c5bb;
  border-radius: 15px;
}

.interview-answer::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -23px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #71c5bb;
}

.interview-answer p {
  color: #ffffff;
  margin: 0;
  padding: 0;
}

.interview-comment {
  position: relative;
  display: inline-block;
  margin: 1.5em 10px 1.5em 50px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #fef9f1;
  border-radius: 20px; /* 角を丸くする */
}

.interview-comment::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 98%; /* 三角形の位置 */
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #fef9f1;
}

.interview-comment p {
  margin: 0;
  padding: 0;
}

.lesson-image img {
  width: 90%;
  border-radius: 20px;
  margin: 10px 0px 0px 20px; /* 画像の余白 */
}

.lesson-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
  margin-left: 20px;
}

.lesson-description {
  font-size: 15px;
  margin-left: 20px;
  margin-right: 10px;
}

.back-to-list {
  margin: 40px 0px 30px 150px; /* リンクの余白 */
}

/* フッター */
footer {
  background-color: #e6e6e6;
  color: #64605f;
  padding: 16px;
  text-align: left; /* センター揃えに変更 */
}

footer img {
  width: 100px;
  margin-bottom: 10px;
}