@charset "utf-8";

/* ===== index.html 専用スタイル ===== */

/* セクション区切り線 */
hr {
  border: none;
  border-top: 3px solid #c8c8c8;
  margin: 0;
}

/* スクロール時の固定ナビ分オフセット */
#online, #real, #salon, #voice { scroll-margin-top: 72px; }

/* ナビバー実高さに合わせて上書き（class_event.css の 50px を上書き） */
body { padding-top: 72px; }

/* 本文フォントサイズ（class_event.css の 1rem を上書き） */
p { font-size: 1.1rem; }

/* ヒーロー画像 */
.hero-img {
  max-width: 980px;
  width: 100%;
  display: block;
  margin: 0 auto;
}

/* セクション共通余白 */
.section-block {
  padding-top: 60px;
  padding-bottom: 50px;
}

/* サロンセクション背景 */
.salon-bg { background-color: #fafafa; }

/* ===== 受講のご案内（浮きラベルボックス） ===== */
.guide-box {
  border: 5px solid #008937;
  border-radius: 10px;
  padding: 35px 40px 30px;
  position: relative;
  margin-top: 30px;
}
.guide-box-title {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 0 12px;
  color: #008937;
  font-size: 1.875rem;
  font-weight: bold;
  white-space: nowrap;
}

/* ===== セクションタイトル ===== */
.section-sub-title {
  font-size: 1.5625rem;
  margin-bottom: 4px;
}
.section-main-title {
  font-size: 3.125rem;
  font-weight: bold;
  margin: 0 0 20px;
  text-shadow: none;
  line-height: 1.2;
}

/* ===== グリーンバナー（全幅） ===== */
.green-banner {
  background: #09743A;
  color: #fff;
  text-align: center;
  padding: 22px 20px;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.8;
  margin-bottom: 25px;
}

/* ===== コンテンツボックス ===== */
.content-box {
  border: 5px solid #000;
  border-radius: 10px;
  padding: 28px 32px;
  margin: 0 0 25px;
}
.content-box.green-border {
  border-color: #008937;
}
.content-box .label {
  font-weight: bold;
  margin-bottom: 4px;
}

/* ===== こんな方におすすめ - オンライン（オレンジ） ===== */
.recommend-box-orange {
  border: 7px solid #F15A24;
  border-radius: 10px;
  padding: 22px 28px;
  margin: 0 0 25px;
}
.recommend-title {
  font-size: 1.3rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}
.ko-badge-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F15A24;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 1.1rem;
  font-weight: bold;
  flex-shrink: 0;
  color: #fff;
}

/* ===== こんな方におすすめ - サロン（黄） ===== */
.recommend-box-yellow {
  border: 7px solid #FCEE21;
  border-radius: 10px;
  padding: 22px 28px;
  margin: 0 0 25px;
}
.ko-badge-yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FCEE21;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 1.1rem;
  font-weight: bold;
  flex-shrink: 0;
  color: #000;
}

/* ===== サロン「できること」浮きラベルボックス ===== */
.salon-can-box {
  border: 5px solid #09743A;
  border-radius: 10px;
  padding: 35px 32px 30px;
  position: relative;
  margin-top: 40px;
  margin-bottom: 25px;
}
.salon-can-box .box-title {
  position: absolute;
  top: -20px;
  left: 30px;
  background: #fafafa;
  padding: 0 10px;
  color: #09743A;
  font-size: 1.3rem;
  font-weight: bold;
  white-space: nowrap;
}

/* ===== 申し込みボタン ===== */
.btn-apply-wrap {
  margin: 15px 0 25px;
}
.btn-online {
  display: block;
  width: 100%;
  padding: 22px 20px;
  background-color: #F15A24;
  color: #fff;
  border: solid 2px #F15A24;
  font-size: 1.4rem;
  font-weight: bold;
}
.btn-online:hover {
  background-color: #fff;
  color: #F15A24;
}
.btn-real {
  display: block;
  width: 100%;
  padding: 22px 20px;
  background-color: #008937;
  color: #fff;
  border: solid 2px #008937;
  font-size: 1.4rem;
  font-weight: bold;
}
.btn-real:hover {
  background-color: #fff;
  color: #008937;
}
.btn-salon {
  display: block;
  width: 100%;
  padding: 22px 20px;
  background-color: #FCEE21;
  color: #000;
  border: solid 2px #FCEE21;
  font-size: 1.4rem;
  font-weight: bold;
}
.btn-salon:hover {
  background-color: #fff;
  color: #000;
}

/* お問い合わせボタン（リアルセクション） */
.btn-inquiry {
  padding: 12px 40px;
  font-size: 1.2rem;
  font-weight: bold;
}

/* ===== 講師プロフィール ===== */
.instructor-box {
  border: 5px solid #09743A;
  border-radius: 10px;
  padding: 30px;
}
.profile-name {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

/* ===== 参加者の声 ===== */
.voice-section {
  background-image: url(../images/yellow_line.png);
  background-repeat: repeat;
}
.voice-item {
  background-color: rgba(255,255,255,0.85);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
}

/* 丸数字アイコン */
.svg-num {
  display: block;
  margin: 0 auto 8px;
}

/* セクションヘッダーのバッジレイアウト */
.section-header-badge {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.badge-img {
  flex-shrink: 0;
  transform: rotate(-15deg);
  margin-left: 15px;
}

@media (max-width: 767px) {
  .section-main-title { font-size: 2.2rem; }
  .section-sub-title { font-size: 1.1rem; }
  .guide-box { padding: 25px 20px; }
  .guide-box-title { font-size: 1.4rem; }
  .content-box { padding: 20px; }
  .green-banner { font-size: 1rem; }
  .salon-can-box { padding: 25px 20px; }
  .instructor-box { padding: 20px; }
  .badge-img { width: 90px; height: 90px; }
}
@media (max-width: 575px) {
  .btn-online, .btn-real, .btn-salon { padding: 15px 20px; font-size: 1rem; }
}