@charset "utf-8";
/* CSS Document */
.event-h2box {
  display: block;
  margin: 0px;

  color: #231815;
}
.bg-before-img, .bg-after-img {
  max-width: 144px;
  width: 11%;
}
.tab-content-header {
  display: flex;
  margin: auto;
  width: 100%;
  max-width: 1300px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2vw;
}
.course-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 横2列 */
  gap: 78px;
  max-width: 1280px;
  margin: 0 auto; /* 中央寄せ */
  width: 100%;
}
/* スマホで1列 */
@media (max-width: 768px) {
  .course-flow {
    grid-template-columns: 1fr;
  }
}
:root {
  --card-green: #6BB981; /* コーナー＆枠のグリーン */
  --card-bg: #fff; /* カード背景 */
  --page-bg: #DCEBD8; /* 全体の薄グリーン */
  --accent: #E47E31; /* 見出しのオレンジ */
  /*--radius: 14px;*/
}
/* 背景は任意。カードだけ使うなら削除可 */
.page-bg {
  /*  background: var(--page-bg);
  padding: 24px;*/
}
.step-card {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 3px solid var(--card-green);
  border-radius: 14px;
  /*box-shadow: 0 6px 14px rgba(0,0,0,.06);*/
  padding: 28px 24px 24px;
}
/* 左上の“ひょこっと”コーナー */
.step-card__corner {
  position: absolute;
  inset: -3px auto auto -3px; /* 枠線厚みぶん持ち上げ */
  width: 96px;
  height: 96px;
  background: var(--card-green);
  border-radius: 14px 0 100% 0; /* 1/4円の角 */
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.step-card__corner::after {
  /* 白いえぐれ（内側の曲線） */
  /*  content:"";
  position:absolute;
  right:-8px; bottom:-8px;
  width: 82px; height:82px;
  background: var(--card-bg);
  border-radius: 50%;*/
}
/* 番号（1～6を入れ替え） */
.step-card__num {
  font-size: 30px;
  transform: translate(-6px, -6px);
}
/* 見出し */
.step-card__head {
  text-align: center;
  margin-bottom: 18px;
}
.step-card__title {
  color: var(--accent);
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  height: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(18px, 1.875vw, 36px) !important;
  /* ←サイズは好きに調整してOK */
}
/* 画像＋本文 */
.step-card__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.step-card__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}
.step-card__text {
  font-weight: 700;
  line-height: 1.4;
  font-size: clamp(16px, 1.146vw, 22px) !important;
  text-align: left;
  /* ←サイズは好きに調整してOK */
  padding: 0;
  margin: 0;
  font-feature-settings: "palt";
}
/* スマホ：縦積み */
@media (max-width: 600px) {
  .step-card {
    padding: 22px 18px 20px;
    box-sizing: inherit;
  }
  .step-card__content {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .step-card__text {
    text-align: left;
  }
}
.course-step {
  padding: 0.7vw 0;
}
/*各コースinclude部分*/
.tab-wrap {
  width: 100%;
  /*max-width: 900px;*/
  margin: 0 auto;
  text-align: center;
}
.tab-menu {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tab-menu li {
  position: relative;
  border-radius: 8px 8px 0 0;
  padding: 20px 30px;
  cursor: pointer;
  font-weight: bold;
  transition:
    padding 0.25s ease, margin 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 1;
  margin-bottom: 0;
}
/* 下基準をキープして、上に浮かせる */
.tab-menu li.active {
  --pb-active: clamp(10px, 2vw, 18px); /* 下paddingをすこし増やす */
  padding-top: 20px; /* 上は固定（テキスト位置キープ） */
  padding-bottom: var(--pb-active); /* 下の余白を伸ばす */
  margin-top: calc(10px - var(--pb-active)); /* 浮いた分だけ上にずらす */
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
}
.tab-menu1 {
  background-color: #bae3f9;
  color: #231815;
}
.tab-menu2 {
  background-color: #6fb16b;
  color: #fff;
}
.tab-menu3 {
  background-color: #f08437;
  color: #fff;
}
.tab-menu4 {
  background-color: #1db3db;
  color: #fff;
}
.tab-menu5 {
  background-color: #248a66;
  color: #fff;
}
.tab-menu6 {
  background-color: #fce3cd;
  color: #231815;
}
.tab-content {
  display: none;
  background: #e9f2e8;
  padding: 40px 20px;
  /*border-radius: 0 0 8px 8px;*/
  /*color: #275a3d;*/
}
.tab-content.active {
  display: block;
  background: #e9f2e8;
}
/*やじるし*/
.course-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 78px; /* カード間のスペース */
  position: relative;
}
.course-step {
  position: relative;
}
/* 横方向の矢印 */
.course-step:nth-child(odd)::after {
  content: "";
  position: absolute;
  top: calc(50% - 37px);
  right: -74px;
  width: 70px;
  height: 70px;
  background: url('<?php echo get_stylesheet_directory_uri(); ?>/img/model-course/arrow-right.png') no-repeat center / contain;
}
/* 下方向の矢印（行の最後のカードに） */
.course-step:nth-child(2)::after, .course-step:nth-child(4)::after {
  content: "";
  position: absolute;
  bottom: -74px;
  left: -74px;
  width: 70px;
  height: 70px;
  background: url('<?php echo get_stylesheet_directory_uri(); ?>/img/model-course/arrow-leftdown.png') no-repeat center / contain;
}
@media (max-width: 768px) {
  .course-flow {
    grid-template-columns: 1fr;
    gap: 60px;
    width: 96%;
    margin: auto;
  }
  /* 一旦すべての疑似要素を消す */
  .course-step::after {
    display: none;
  }
  /* スマホ専用矢印を別指定で再表示 */
  .course-step::before {
    content: "";
    position: absolute;
    bottom: -52px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(40px, 10vw, 54px);
    height: clamp(40px, 10vw, 54px);
    background: url('<?php echo get_stylesheet_directory_uri(); ?>/img/model-course/arrow-down.png') no-repeat center / contain;
    display: block;
  }
  /* 最後のステップには矢印を出さない */
  .course-step:last-child::before {
    display: none;
  }
  .tab-menu li {
    padding: 5px;
    font-size: clamp(10px, 1.042vw, 20px) !important;
  }
  .tab-content {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .tab-content-inner {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .tab-content.active {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .tab-content-header {
    width: 96%;
  }
  .tab-content-header h2 {
    font-size: clamp(16.5px, 1.719vw, 33px) !important;
  }
}
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
  scroll-margin-top: 60px;
}
#model-course-anchor {
  scroll-margin-top: 370px;
}