@charset "UTF-8";

/* ==========================================================
   1. 下層ページ共通のスタイル（見出し・パンくずなど）
========================================================== */

/* パンくずリスト */
.breadcrumb {
  padding: 20px 0;
  font-size: 0.85rem;
  color: #666666;
  text-align: left;
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.breadcrumb ol li {
  display: inline;
}

.breadcrumb ol li:not(:last-child)::after {
  content: "/";
  margin: 0 8px;
  color: #cccccc;
}

.breadcrumb a {
  text-decoration: none;
  color: #47B3EC;
  transition: opacity 0.2s ease;
}

.breadcrumb a:hover {
  opacity: 0.7;
}

.breadcrumb span[itemprop="name"] {
  color: #777777;
}

/* 下層ページ共通のヘッダーエリア */
.page-header-area {
  background-color: #ffffff;
  padding: 40px 0 60px;
  text-align: center;
}

.header-content {
  max-width: 800px;
  margin: 0 auto;
}

.page-header-area .page-label {
  font-size: 0.9rem;
  color: #D97757;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.page-main-title {
  font-size: 2.8rem;
  color: #333333;
  line-height: 1.3;
  font-weight: bold;
  margin: 0;
}


/* ==========================================================
   2. 学習支援詳細ページ 特有のスタイル
========================================================== */

/* 共通レイアウト調整 */
.section-inner { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.section-inner-wide { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.mt-10 { margin-top: 10px; }
.mt-60 { margin-top: 60px; }
.mb-30 { margin-bottom: 30px; }
.text-small { font-size: 0.9rem; line-height: 1.4; }
.white-text { color: #ffffff; }
.bg-cream { background-color: #FDFBF7; }
.bg-orange { background-color: #D97757; }

/* ボタン共通 */
.btn-primary {
  display: inline-block;
  background-color: #D97757;
  color: #ffffff;
  font-weight: bold;
  padding: 16px 40px;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-primary:hover { background-color: #c46545; transform: translateY(-2px); }

/* 写真エリア（見出しの下） */
.event-mv-photo {
  background-color: #ffffff;
  padding-bottom: 80px;
}
.mv-image-full {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.mv-image-full img {
  width: 100%;
  height: auto;
  display: block;
}

/* 開催概要セクション */
.event-summary { padding: 80px 0; background-color: #FDFBF7; text-align: center; }
.summary-card { background-color: #ffffff; border-radius: 20px; padding: 60px; border: 2px solid #F0DED0; max-width: 800px; margin: 0 auto; box-shadow: 0 5px 20px rgba(0,0,0,0.03); }
.summary-card h2 { color: #D97757; font-size: 2rem; margin-bottom: 30px; }
.summary-list { text-align: left; }
.summary-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid #eeeeee; }
.summary-item:last-child { border-bottom: none; }
.summary-item dt { flex: 0 0 140px; font-weight: bold; color: #333333; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.summary-item dt i { color: #47B3EC; }
.summary-item dd { flex: 1; color: #555555; line-height: 1.8; }
.summary-btn-wrap { margin-top: 40px; }

/* イベントの特徴セクション */
.event-features { padding: 80px 0; background-color: #ffffff; text-align: center; }
.event-features h2 { font-size: 2rem; color: #333333; margin-bottom: 50px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.feature-item { background-color: #FDFBF7; padding: 40px; border-radius: 20px; }
.feature-item img { height: 80px; margin-bottom: 20px; object-fit: contain; }
.feature-item h3 { font-size: 1.3rem; color: #333333; margin-bottom: 15px; }
.feature-item p { font-size: 0.95rem; color: #555555; line-height: 1.8; }

/* お楽しみ＆講師紹介セクション */
.event-pleasure { padding: 80px 0; background-color: #ffffff; text-align: center; }
.event-pleasure h2 { font-size: 2rem; color: #333333; margin-bottom: 50px; }
.pleasure-cols { display: flex; gap: 30px; }
.pleasure-item { flex: 1; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.pleasure-text { padding: 40px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.pleasure-text h3 { font-size: 1.5rem; margin-bottom: 15px; }
.pleasure-text p { font-size: 1rem; line-height: 1.8; }
.pleasure-img { height: 250px; }
.pleasure-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.teacher-box { background-color: #FDFBF7; padding: 30px; border-radius: 15px; display: flex; align-items: center; gap: 20px; text-align: left; max-width: 700px; margin: 0 auto; }
.teacher-icon { font-size: 3rem; color: #47B3EC; flex: 0 0 60px; text-align: center; }
.teacher-detail h3 { font-size: 1.2rem; color: #333333; margin-bottom: 5px; }
.teacher-detail p { font-size: 0.95rem; color: #555555; line-height: 1.6; }
.event-message { font-size: 1.3rem; font-weight: bold; color: #D97757; line-height: 1.8; }

/* お申し込み・お問い合わせセクション */
.event-booking { padding: 80px 0; background-color: #FDFBF7; text-align: center; }
.event-booking h2 { font-size: 2rem; color: #333333; margin-bottom: 20px; }
.booking-method { display: flex; justify-content: center; gap: 40px; margin-top: 40px; }
.method-item { width: 300px; }
.method-link { display: flex; align-items: center; gap: 20px; background-color: #ffffff; padding: 30px; border-radius: 15px; text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.method-link:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.method-link i { font-size: 2.5rem; color: #D97757; }
.method-text { display: flex; flex-direction: column; text-align: left; }
.small-title { font-size: 0.9rem; color: #666666; }
.large-data { font-size: 1.6rem; color: #333333; font-weight: bold; margin-top: 5px; }

/* 【CVエリア】LINE登録促進 */
.cv-line-section { padding: 80px 0; background-color: #ffffff; }
.cv-line-box { background-color: #FDFBF7; border: 4px solid #47B3EC; border-radius: 30px; padding: 60px; display: flex; align-items: center; gap: 40px; }
.cv-left { flex: 1; text-align: left; }
.cv-sub-title { color: #666666; font-size: 1rem; }
.cv-line-box h2 { font-size: 2.5rem; color: #47B3EC; margin: 10px 0; }
.cv-lead { font-size: 1rem; color: #555555; line-height: 1.8; margin-bottom: 30px; }
.cv-btn-wrap { text-align: left; }
.btn-line { display: inline-flex; align-items: center; gap: 1px; background-color: #00B900; color: #ffffff; font-size: 1.2rem; font-weight: bold; padding: 18px 40px; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; }
.btn-line:hover { background-color: #00a000; transform: translateY(-3px); }
.btn-line i { font-size: 1.5rem; }
.cv-right { flex: 0 0 200px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.qr-image { width: 100%; max-width: 180px; height: auto; margin-bottom: 10px; }
.qr-text { font-size: 0.9rem; color: #55555, #555555; font-weight: bold; }

/* スマホ対応（レスポンシブ） */
@media (max-width: 768px) {
  .breadcrumb { padding: 15px 0; font-size: 0.8rem; }
  .page-header-area { padding: 20px 0 40px; }
  .page-main-title { font-size: 2.0rem; }
  .mv-image-full { border-radius: 12px; }
  .summary-card { padding: 30px; }
  .summary-item { flex-direction: column; gap: 5px; }
  .summary-item dt { flex: 0 0 auto; font-size: 1rem; }
  .features-grid { grid-template-columns: 1fr; }
  .pleasure-cols { flex-direction: column; }
  .booking-method { flex-direction: column; align-items: center; gap: 20px; }
  .method-item { width: 100%; max-width: 300px; }
  .cv-line-box { flex-direction: column; text-align: center; padding: 40px 20px; }
  .cv-left, .cv-btn-wrap { text-align: center; }
  .btn-line { width: 100%; justify-content: center; font-size: 1.1rem; padding: 16px 30px; }
  .event-message { font-size: 1.1rem; }
}