/* ==============================================
   education.css - Greenexpo Theme
   教職員用ページ専用
============================================== */
@charset "utf-8";

/* ▼ 共通変数 */
.page-edu {
  --edu-blue: #0068b7;
  --edu-border-gray: #ccc;
  --edu-radius-pill: 100px;
  --edu-radius-lg: 20px;
}

.edu-img {
  display: block;
}

/* PW入力用デザイン */
.edu-password-form input[type="password"] {
  margin: auto;
  display: block;
  border: 1px solid #0068b7;
  border-radius: 10px;
  padding: 10px 15px;
  width: 100%;
  font-size: 16px;
}
.edu-password-form button[type="submit"] {
  display: block;
  margin: 20px auto;
  padding: 12px 32px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  width: fit-content;
  transition: filter 0.2s, transform 0.1s;
  border: none;
  cursor: pointer;
  font: inherit;
}

/* 共通パーツ　*/
.page-edu {
  letter-spacing: 0.05rem;
}
.page-edu .page-inner {
  max-width: 1200px;
  border-radius: 40px;
}
.page-edu .page-close-btn {
  top: 16px;
  right: 24px;
}
.page-title {
  border-radius: 20px;
  padding: 16px 24px 13px;
}
.edu-text{
  margin: 0 1.2rem;
}
.page-challenge .edu-tab-panel__note {
  margin-top: 5%;
  font-weight: bold;
  font-size: clamp(16px, 14.18px + 0.49vw, 20px);
  color: var(--edu-blue);
}
.edu-content {
  margin-top: 2.5rem;
  font-family: "Noto Sans JP", sans-serif;
}
.edu-content h2, .edu-content h3, .edu-content h4, .edu-content h5, .edu-content h6, .edu-content p {
  font-family: "Noto Sans JP", sans-serif;
}

.page-edu h3 {
  font-size: clamp(16px, 14.18px + 0.49vw, 20px);
  font-weight: 700;
  color: #333;
  margin: 0 0 24px;
  padding: 14px;
  border-left: 4px solid var(--accent);
  background: rgba(0,104,183,0.05);
  border-radius: 0 6px 6px 0;
  border-bottom: none;
}

/* ==============================================
   タブ切替え（体験プログラム一覧）
============================================== */

/* ▼ カードとパネルに共通の箱 */
.edu-tab-card,
.edu-tab-panel,
.edu-static-box {
  background: #fff;
  border: 2px solid var(--edu-blue);
  border-radius: var(--edu-radius-lg);
}
.edu-static-box {
  padding: 24px;
  margin-bottom: 40px;
}

/* ▼ 問い合わせ先ボックス（他パーツと共有しない、事務的な見た目） */
.edu-contact-box {
  border-top: 1px solid var(--edu-border-gray);
  border-bottom: 1px solid var(--edu-border-gray);
  margin: 40px auto 0;
  padding: 20px 10px 10px;
  width: min(850px, 95%);
}
.edu-contact-box h6 {
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  font-weight: 700;
}
.edu-contact-box .edu-section-heading {
  border: none;
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: 16px;
}
.edu-contact-box > p {
  font-size: 90%;
  line-height: 1.5;
}

/* ▼ 見出し（■ ○○）に共通のスタイル */
.edu-pdf-section h6,
.edu-jtb-section h6,
.edu-section-heading {
  color: var(--edu-blue);
  font-size: clamp(16px, 13.64px + 0.36vw, 18px);
  font-weight: 700;
  margin: 0 0 18px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--edu-blue);
}

/* ▼ 資料セクション（PDF資料4種／JTB体験申込）に共通の余白 */
.edu-pdf-section,
.edu-jtb-section {
  padding-top: 20px;
  margin-top: 40px;
}

/* ▼ プレビュー・ダウンロードボタンのアイコンサイズ */
.edu-pdf-btn__icon.edu-img {
  width: 22px;
  height: 22px;
  border-radius: 0;
  margin-bottom: 0;
}

/* ▼ カード一覧（ボタン置き場） */
.edu-tab-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px;
  margin-bottom: 14px;
}
.edu-tab-card {
  width: 100%;
}
.edu-tab-card__img {
  position: relative;
}
.edu-tab-card__img .edu-img {
  width: 100%;
  aspect-ratio: 6 / 3;
  object-fit: cover;
  border-radius: 18px 18px 0 0;
  margin-bottom: 0;
}
.edu-tab-card__badge {
  position: absolute;
  right: 4px;
  bottom: 12px;
  background: #0068b7;
  color: #fff;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 600;
  padding: 2px 16px 4px;
  border-radius: 100px;
  /*width: min(192px, 90%);*/
  text-align: center;
}
.edu-tab-card__text {
  padding: 12px 12px 20px;
}
.edu-tab-card__text h4 {
  font-size: clamp(15px, 13.64px + 0.36vw, 18px);
  font-weight: 700;
  color: #333;
  margin: 0 0 8px;
  padding-bottom: 10px;
  letter-spacing: 0;
  text-align: center;
  border-bottom: 1px dashed #0068b7;
}
.edu-tab-card__text h4 span {
  display: block;
  background: #ffffff;
  border: 2px solid #0068b7;
  border-radius: 100px;
  font-size: 80%;
  color: #1256a5;
  padding: 0 3px 2px;
  margin-bottom: 4px;
  text-align: center;
  letter-spacing: 0.05rem;
}
.edu-tab-card__text p {
  padding-bottom: 10px;
  line-height: 1.7;
}
.edu-tab-btn {
  display: block;
  width: 100%;
  cursor: pointer;
  background: var(--edu-blue);
  color: #fff;
  border: none;
  border-radius: var(--edu-radius-pill);
  padding: 10px 12px 12px;
  font-size: clamp(13px, 12.09px + 0.24vw, 15px);
  font-weight: 700;
  margin-top: 8px;
}
.edu-tab-btn:hover,
.edu-jtb-btn--solid:hover {
  opacity: 0.85;
}
.edu-tab-btn.is-active {
  box-shadow: 0 0 0 3px rgba(0,104,183,0.3) inset;
}
.edu-tab-btn:disabled {
  cursor: auto;
  opacity: 0.5;
}
@media (min-width: 681px) {
  .edu-tab-card {
    width: calc((100% - 11px) / 2);
  }
  .edu-tab-card__img .edu-img {
    aspect-ratio: 5 / 3;
  }
  .edu-contact-box {
    padding: 20px 20px 10px;
  }
}
@media (min-width: 950px) {
  .edu-tab-card {
    width: calc(100% / 4 - 9px);
  }
  .edu-tab-card__img .edu-img {
    aspect-ratio: 4 / 3;
  }
}

/* ▼ 切替え先のコンテンツ枠 */
.edu-tabs [data-tab-panel] {
  display: none;
}
.edu-tabs [data-tab-panel].is-active {
  display: block;
}
.edu-tab-panel {
  padding: 24px 15px 24px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.edu-tp_head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 0;
}
.edu-tp_head-text {
  flex: 1 1 0;
  min-width: 0;
}
.edu-tp_head .edu-tab-panel__img.edu-img {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: var(--edu-radius-lg);
  margin: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.edu-tab-panel h5 {
  font-size: clamp(16px, 14.18px + 0.49vw, 20px);
  font-weight: 700;
  color: var(--edu-blue);
  margin: 0 0 18px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--edu-blue);
}
@media (min-width: 681px) {
  .edu-tab-panel {
    padding: 24px 24px 50px;
  }
  .edu-tp_head {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    margin-bottom: 2rem;
  }
  .edu-tp_head .edu-tab-panel__img.edu-img {
    width: min(460px, 45%);
  }
  .page-experience .edu-tp_head {
    display: grid;
    grid-template-columns: min(460px, 45%) 1fr;
    align-items: start;
  }
  .page-experience .edu-tp_head .edu-tab-panel__img.edu-img {
    width: 100%;
    height: 100%;
  }
}
.edu-tab-panel__badge {
  display: block;
  background: #ffffff;
  color: var(--edu-blue);
  border: 2px solid var(--edu-blue);
  font-size: clamp(15px, 13.64px + 0.36vw, 18px);
  font-weight: 700;
  padding: 0px 15px 2px 20px;
  border-radius: var(--edu-radius-pill);
  margin-right: 0;
  margin-bottom: 5px;
  text-align: center;
}
@media (min-width: 681px) {
  .edu-tab-panel__badge {
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 0;
  }
}
.edu-tp_head-text .edu-tab-panel__desc {
  font-size: clamp(16px, 13.09px + 0.24vw, 16px);
  margin: 0 0 20px;
  padding-bottom: 0;
}
.edu-tab-panel .edu-tab-panel__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
}
@media (min-width: 681px) {
  .edu-tab-panel .edu-tab-panel__table {
    margin-bottom: 0;
  }
}
.edu-tab-panel .edu-tab-panel__table th,
.edu-tab-panel .edu-tab-panel__table td {
  border: 1px solid var(--edu-border-gray);
  padding: 10px 12px;
  font-size: clamp(13px, 12.09px + 0.24vw, 15px);
  text-align: left;
}
.edu-tab-panel .edu-tab-panel__table th {
  background: #f4f8fc;
  width: min(180px, 30%);
  font-weight: 700;
}

/* ▼ PDF資料セクション（授業スライド／台本／ワークシート／教師用手引き） */
.edu-pdf-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.edu-pdf-col {
  flex: 1 1 240px;
  background: #fff;
  border: 1px solid var(--edu-border-gray);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}
.edu-pdf-col__head {
  background: var(--edu-blue);
  color: #fff;
  font-weight: 700;
  font-size: clamp(14px, 13.09px + 0.24vw, 16px);
  border-radius: 10px;
  padding: 4px 6px 6px;
  margin-bottom: 15px;
  text-align: center;
}
.edu-pdf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--edu-blue);
  color: var(--edu-blue);
  background: #fff;
  border-radius: 100px;
  padding: 10px;
  font-size: clamp(14px, 13.09px + 0.24vw, 16px);
  font-weight: 700;
  text-decoration: none;
  margin-top: 8px;
  margin: 8px auto 0;
  width: min(372px, 100%);
}
.edu-pdf-btn:hover {
  background: rgba(0,104,183,0.08);
}
.edu-pdf-cols--single {
  justify-content: center;
}
.edu-pdf-btn-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.edu-pdf-btn-row .edu-pdf-btn {
  /*flex: 1 1 0;*/
  width: min(372px, 100%);
  margin: 0 0;
}
@media (min-width: 681px) {
  .edu-pdf-btn-row {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }
}
.page-challenge .edu-pdf-btn {
  width: min(372px, 100%);
  margin: 0 auto;
  line-height: 1.3;
}
.page-challenge .center {
  padding-bottom: 0;
}

/* 映像セクションのカード間隔だけPDFセクション（gap:16px）より詰める */
.edu-movie-cols {
  gap: 6px;
}
.edu-movie-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
}

/* 体験プログラムC-①の映像（5本）：PC表示時は上段1本・中段2本・下段2本の並びに固定する。
   .edu-pdf-colsの標準flex-wrapだと画面幅次第で崩れるため、
   6分割グリッドで1本目をspan6（1本で1行）、2〜5本目をspan3（2本で1行）にする。 */
@media (min-width: 681px) {
  [data-tab-panel="c1"] .edu-movie-cols {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
  [data-tab-panel="c1"] .edu-movie-cols .edu-pdf-col:nth-child(1) {
    grid-column: span 6;
  }
  [data-tab-panel="c1"] .edu-movie-cols .edu-pdf-col:nth-child(n+2) {
    grid-column: span 3;
  }
}
.edu-movie-info {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  margin-top: 6px;
}
.edu-movie-info > p {
  font-size: 90%;
  line-height: 1.5;
}
.edu-movie-info > p > span {
  display: block;
  font-weight: bold;
}

/* ▼ JTB体験申込セクション */
.edu-jtb-section .center {
  margin-bottom: 0;
  padding-bottom: 0;
}
/* 申込セクション内に.edu-movie-info（■クイズカード提出など）が入る場合の余白調整。
   直前のリード文は.page-inner pのpadding-bottom:16pxを打ち消し、
   ボックス側のmargin-bottomで次の要素との間隔を確保する。 */
.edu-jtb-section .edu-jtb-lead {
  padding-bottom: 0;
}
.edu-jtb-section .edu-movie-info {
  margin-bottom: 12px;
}
@media (min-width: 681px) {
  .edu-jtb-section .edu-movie-info {
    margin-bottom: 16px;
  }
}
.edu-jtb-btn {
  display: inline-block;
  border-radius: var(--edu-radius-pill);
  width: min(450px, 100%);
  padding: 8px 32px 11px;
  font-size: clamp(14px, 13.09px + 0.24vw, 16px);
  font-weight: 500;
  text-decoration: none;
}
.edu-jtb-btn--outline {
  border: 1px solid var(--edu-blue);
  color: var(--edu-blue);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 6px;
}
.edu-jtb-btn--outline:hover {
  background: rgba(0,104,183,0.08);
}
.edu-jtb-btn--solid {
  color: #fff;
  background: var(--edu-blue);
}

/* ==============================================
   学んで咲かせよう 専用パーツ
============================================== */

/* ▼ 生徒用クイズを確認いただけます → のような下線付きテキストリンク */
.edu-quiz-link {
  display: inline-block;
  color: #333;
  font-weight: 700;
  font-size: clamp(14px, 13.09px + 0.24vw, 16px);
  text-decoration: none;
  border-bottom: 1px solid #333;
  padding-bottom: 4px;
}
.edu-quiz-link:hover {
  opacity: 0.7;
}

/* ▼ トピック切替えタブ（ネイチャーポジティブ／カーボンニュートラル／サーキュラーエコノミー） */
.edu-topic-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-bottom: 14px;
}
.edu-topic-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: #fff;
  color: #333;
  border: 2px solid var(--edu-blue);
  border-radius: var(--edu-radius-lg);
  padding: 12px 16px;
  text-align: left;
}
.edu-topic-btn.is-active {
  background: var(--edu-blue);
  color: #fff;
}
.edu-topic-btn:not(.is-active):hover {
  background: rgba(0,104,183,0.08);
}
.edu-topic-btn__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 12px;
}
.edu-topic-btn__icon .edu-img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  margin-bottom: 0;
}
.edu-topic-btn__label {
  font-size: 18px;
  font-weight: 900;
}
@media (min-width: 681px) {
  .edu-topic-btn {
    width: calc(100% / 3 - 8px);
    gap: clamp(6px, 1.5vw, 12px);
    padding: 12px clamp(8px, 2vw, 16px);
  }
  .edu-topic-btn__icon {
    width: clamp(40px, 10px + 5vw, 60px);
    height: clamp(40px, 10px + 5vw, 60px);
  }
  .edu-topic-btn__label {
    font-size: clamp(13px, 6px + 1vw, 18px);
  }
}

/* ▼ タブ内、上部のアイコン＋見出し＋説明文の、アイコン側の白い丸角ボックス */
.edu-topic-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 215px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 10px;
  margin: 0 auto;
}
.edu-topic-icon-box .edu-img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
@media (min-width: 681px) {
  .edu-topic-icon-box {
    width: min(215px, 45%);
    margin: 0;
  }
}

/* ▼ 基礎→発展のペア（2枚のカードの間に▶アイコンを挟む） */
.edu-content-pair {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 10px auto;
  align-items: center;
}
.edu-content-pair .edu-content-card {
  width: 100%;
}
.edu-content-pair .edu-content-card:last-child {
  padding-top: 34px;
}
@media (min-width: 681px) {
  .edu-content-pair {
    grid-template-columns: 1fr 10px 1fr;
    grid-template-rows: auto;
    align-items: stretch;
  }
  .edu-content-pair .edu-content-card:last-child {
    padding-top: 16px;
  }
}
.edu-content-pair__arrow {
  display: block;
  width: 45px;
  height: 45px;
  justify-self: center;
  align-self: center;
  z-index: 1;
  transform: rotate(90deg);
}
.edu-content-pair__arrow .edu-img {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
}
@media (min-width: 681px) {
  .edu-content-pair__arrow {
    width: 57px;
    height: 57px;
    transform: none;
  }
}

/* ▼ 基礎／発展のコンテンツカード（生き物たちのつながり、ときわの森 など） */
.edu-content-card {
  background: #fff;
  border: 1px solid var(--edu-border-gray);
  border-radius: var(--edu-radius-lg);
  padding: 16px 16px 26px;
  display: flex;
  flex-direction: column;
}
.edu-content-card > p.center:last-child {
  margin-top: auto;
}
.edu-content-card .edu-pdf-col__head {
  font-size: clamp(16px, 14.18px + 0.49vw, 20px);
}
.edu-content-card__title {
  font-size: clamp(15px, 13.64px + 0.36vw, 18px);
  font-weight: 700;
  color: #333;
  margin: 0;
}
.edu-content-card .edu-content-card__desc {
  font-size: clamp(15px, 12.09px + 0.24vw, 15px);
  color: #333;
  margin: 10px 0 16px;
  padding-bottom: 0;
}
.page-challenge .edu-content-card__title,
.page-challenge .edu-content-card .edu-content-card__desc {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 681px) {
  .page-challenge .edu-content-card__title,
  .page-challenge .edu-content-card .edu-content-card__desc {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ==============================================
   体験プログラム簡易ダウンロードページ 専用パーツ
============================================== */
.page-download .edu-dl-item {
  margin-bottom: 14%;
}
.page-download .edu-dl-item h5 {
  font-size: clamp(18px, 14.18px + 0.49vw, 20px);
  font-weight: 700;
  color: var(--edu-blue);
  margin: 0 0 18px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--edu-blue);
  text-align: center;
}
.page-download .edu-dl-item h5 .edu-tab-panel__badge {
  display: block;
  margin-bottom: 5px;
  margin-right: 0;
}
.page-download .edu-dl-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0px;
}
.page-download .edu-dl-buttons .edu-pdf-btn {
  width: 100%;
}
@media (min-width: 681px) {
  .page-download .edu-dl-item {
    margin-bottom: 72px;
  }
  .page-download .edu-dl-item h5 {
    text-align: left;
  }
  .page-download .edu-dl-item h5 .edu-tab-panel__badge {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 12px;
  }
  .page-download .edu-dl-buttons {
    grid-template-columns: 1fr 1fr;
    gap: 0 6px;
  }
}