.grid-cardlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px 6%;
  justify-content: center;
  margin: 20px auto;
  overflow-wrap: break-word; 
}

.grid-cardlist2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 3%;
  justify-content: center;
  margin: 20px auto;
  overflow-wrap: break-word; 
}


.fadeIn {
  opacity: 0;
  transition: 2s cubic-bezier(0.1, 0.6, 0.7, 0.2);
}
.fadeIn2 {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show,.fadeIn2.is-show {
  opacity: 1;
}

.anim-box.fadein {
  animation: fadeIn 5s cubic-bezier(0.1, 0.6, 0.7, 0.2) forwards;
}
 
@keyframes fadeIn {
   0%{opacity: 0;}
 100%{opacity: 1;}
 }


.anim-box.opacity{
   animation: opacity ease forwards;
 }

 @keyframes opacity{
   0%{opacity: 0;}
 100%{opacity: 1;}
 }







/* ------------------------------------------------------- */
.Semi_Place_List a {
  color: #01406b;
  text-decoration: underline;
}

.Semi_Place_List a:hover {
  text-decoration: none;
}

.Semi_Place_List img {
  width: 100%;
  max-width: 100%;
  height: 200px;
  object-fit: cover;
    transition: .2s ease-in-out;
}

@media screen and (max-width: 549px) {
  .Semi_Place_List_Item {
    margin-top: 2rem;
  }
}

@media screen and (min-width: 550px) {
  .Semi_Place_List {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    max-width: 1024px;
    margin: 0 auto;
  }
  .Semi_Place_List_Item {
    width: 48%;
  }
  .Semi_Place_List_Item:nth-of-type(n+3) {
    margin-top: 5%;
  }
}

.Semi_Place_Area {
  color: #01406b;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.Semi_Place_Area span {
  font-size: .8em;
  font-weight: normal;
}

.Semi_Place_Area span::before {
  content: "\A";
  white-space: pre;
}

.Semi_Place_Name ,.Semi_Place_Address {
  font-size: 1.3rem;
  font-weight: normal;
  margin: 8px 0 4px;
  line-height: 1.3;
}






/* ------------------------------------------------------- */
.enroll {
  width: 100%;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 40px);
}

.plan {
  margin: 5rem 0;
}

.plan__meta {
  margin: 0 0 0.75rem;
  color: #176b7a; /* メタ情報は青み */
  font-weight: 700;
}

.plan__btn {
  position: relative; /* 矢印用の基準にする */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* 中央揃え */
  padding: 1.2rem 2rem;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.3;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  transition: transform .04s ease, filter .2s ease, background-color .2s ease;
}

.plan__btn::after {
  content: "";
  position: absolute;
  right: 2rem; /* ボタン右端に配置 */
  width: 0.6em;
  height: 0.6em;
  border-top: 0.15em solid currentColor;
  border-right: 0.15em solid currentColor;
  transform: rotate(45deg);
}

.plan__btn:focus-visible {
  outline: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(0,0,0,.25);
}

.plan__btn:active {
  transform: translateY(1px);
}

/* 色指定 */
/* オレンジボタン */
.plan__btn--orange {
  background: #d4725f;
  color: #fff;
}
.plan__btn--orange:hover {
  background: #fff;
  color: #d4725f;
  border: 2px solid #d4725f; /* 境界が分かりやすいように追加 */
}

/* 青ボタン */
.plan__btn--blue {
  background: #2d99f0;
  color: #fff;
}
.plan__btn--blue:hover {
  background: #fff;
  color: #2d99f0;
  border: 2px solid #2d99f0;
}

/* グリーンボタン */
.plan__btn--green {
  background: #0e4c66;
  color: #fff;
}
.plan__btn--green:hover {
  background: #fff;
  color: #0e4c66;
  border: 2px solid #0e4c66;
}




/* 受講者の声 */
/* セクション全体（外枠あり・角丸なし） */
.tlist{
  max-width: 920px;
  margin: 56px auto;
  border: 3px solid rgba(0,0,0,0.25); /* 全体の枠 */
  background: #fff;
}

.tlist__head {
  background: 
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), /* ←黒のオーバーレイ */
    url("../image2/image-note08b.jpg") center/cover no-repeat;
  color: #fff;
  padding: 40px 20px;
  text-align: center;
  border-bottom: 3px solid rgba(0,0,0,0.25);
}

.tlist__head h2{
  margin: 0;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 400;
  letter-spacing: .05em;
  text-shadow: 0 2px 6px rgba(0,0,0,.4); /* 文字が読みやすいよう影 */
}

/* 各人のブロック */
.titem{
  padding: 28px 20px;
}

/* 区切り線：外枠に接続＆太め */
.titem + .titem{
  border-top: 3px solid rgba(0,0,0,0.25);
  margin-top: -1px; /* 外枠との間にスキマが出ないよう補正 */
}

/* ヘッダー（写真＋名前/肩書き） */
.thead{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.tavatar{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.tname{
  margin: 0 0 4px;
  font-weight: 400;
  letter-spacing: .01em;
  color: #111;
}

.tmeta{
  margin: 0;
  color: #55727a;
}

/* 本文 */
.tbody{
  margin: 0;
  color: #2a2a2a;
  line-height: 1.9;
  font-weight: 300;
  letter-spacing: .01em;
}

/* スマホ対応 */
@media (max-width: 520px){
  .titem{ padding: 22px 16px; }
  .thead{ grid-template-columns: 56px 1fr; gap: 12px; }
  .tavatar{ width:56px; height:56px; }
}






/* パーティクル */
/* sparkle.jsも使います */
.sparkle {
  position: relative;
  display: block;
}
.sparkle > img {
  display: block;
  width: 100%;
  height: auto;
}
.sparkle-canvas {
  position: absolute;
  inset: 0;               /* 画像にぴったり重ねる */
  width: 100%;
  height: 100%;
  pointer-events: none;   /* クリックを邪魔しない */
  mix-blend-mode: screen; /* 下の画像と自然に加算合成 */
}





/* スクロールでふわっと出す */
/* highlight-text.jsも使います */
.highlight-text{
  position: relative;
  display: block;     /* 1行占有にする：要素中心＝画面中心に近づく */
  width: 100%;
  z-index: 0;
  isolation: isolate;
}

.highlight-text::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(.8);   /* ←XもYも-50%に */
  width: 100dvw;                                /* モバイルのUI幅に追従 */
  height: 300px;
  background: url("../image/top03.png") center no-repeat;
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  z-index: -1;
  pointer-events: none;
}

.highlight-text.show::after{
  opacity: .8;
  transform: translate(-50%,-50%) scale(1);
}

/* モバイル時は親幅に収める */
@media (max-width: 640px) {
  .highlight-text::after{
    left: 50%;
    transform: translate(-50%, -50%) scale(.9);
    width: 100%;          /* 100dvw → 親幅 */
    max-width: 560px;     /* 任意。好みで上限 */
    height: 260px;        /* 比率に合わせて調整 */
    background-size: contain;   /* 画像を切らない */
    background-position: center;
  }
}


/* 見出しタイトル部分 */
.section-title {
  position: relative;
  text-align: center;
  margin: 4rem auto;
  max-width: 800px; /* コンテンツ幅制限 */
}

.section-title img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  position: relative;
  z-index: 1; /* 画像を前面に出す */
}

/* 背景の横線 */
.section-title::before {
  content: "";
  position: absolute;
  top: 50%; /* 画像の縦中央 */
  left: 50%;
  width: 100vw; /* 画面いっぱい */
  height: 1px;
  background: #ccc;
  transform: translate(-50%, -50%); /* 中央基準に補正 */
  z-index: 0;
}







/* スクロールで幅いっぱいの画像 */
/* highlight-text.jsに追記 */
/*
blur(12px) → もっとぼかすなら 20px など
brightness(0.6) → 最初の暗さ。0.4ならもっと暗く、0.8ならちょっと明るめ
transition の時間を伸ばすと「じわーっ」と出る
*/
.full-image {
  position: relative;
  width: 100%;
  overflow: hidden;

      /* 上下ぼかしマスク：回転いれたら画像の端っこ気になるので */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.full-image img {
  width: 100%;
  display: block;

  /* 初期状態：白っぽく + ぼかし + 拡大 + 180°回転 */
  opacity: 0;
  filter: blur(12px) brightness(2.2);
  transform: scale(1.8) rotate(180deg);
  transition: opacity .5s ease, filter 2.5s ease, transform 2.5s ease;
}

/* ビューポートに入ったら */
.full-image.show img {
  opacity: 1;
  filter: blur(0) brightness(1);
  transform: scale(1) rotate(0deg); /* ← 通常の大きさ＆角度に */
}



/* 世界が反転修正ver */
/* ラッパー。レイアウト影響なし（位置は変えない） */
/* テキストの位置・インデントは変更しない */
.bgflip{
  position: relative;
  z-index: 0;
}

/* 背景は擬似要素でフルブリード、初期は上下逆 */
.bgflip::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;               /* 画面いっぱい */
  height: min(92vh, 640px);   /* 必要に応じて調整 */
  transform: translateX(-50%) scaleY(-1); /* ← 初期は上下逆 */
  transform-origin: center;
  z-index: -1;                /* テキストの背面 */
  pointer-events: none;

  background: url("../image2/images-sizenhiro21.jpg") center / cover no-repeat;

  /* 上下を自然に溶かすマスク（%はお好みで調整） */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );

  /* 反転アニメ：向きだけ変える（フェードは任意） */
  transition: transform 2s ease-in-out;
  will-change: transform;

  filter: blur(12px) brightness(2.5);
   opacity: 0.2;
  transition: transform 1.2s ease-in-out,
              filter 0.6s ease-out,
              opacity 0.6s ease-out;
  will-change: transform, filter, opacity;
}

/* ビューインしたら元の向きへ（1回きりで固定） */
.bgflip.is-inview::before{
  transform: translateX(-50%) scaleY(1);
  filter: blur(0px) brightness(1);
  opacity: .7;
}

/* アニメ苦手なユーザーには反転しない（任意） */
@media (prefers-reduced-motion: reduce){
  .bgflip::before{ transition: none; }
  .bgflip.is-inview::before{ transform: translateX(-50%) scaleY(-1); }
}













/* 画像２枚重ね */
.full-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.image-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 横いっぱい、縦もはみ出さず */
}

.overlay-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央配置 */
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease; /* ふわっと */
}
.overlay-image.visible {
  opacity: 1;
    filter: blur(0) brightness(1.1);
}




/* 画像２枚重ね　その2 */
.photo-stack-bleed {
  position: relative;
  overflow: hidden;
}

/* 下地画像：流れに配置 */
.photo-stack .photost.bg {
  width: 100%;
  height: auto;
  display: block;
}

/* オーバーレイ画像：親の高さに追従 */
.photo-stack .photost.overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.08);
    width: 100%;
  opacity: 0;
  filter: blur(10px) brightness(1.1);
  transition: opacity 1.4s ease, filter 1.6s ease, transform 1.6s ease;
  z-index: 1;
  mix-blend-mode: screen; /* ★ ここで合成モードを指定 */
}
/*
multiply（乗算：暗く重なる）
screen（スクリーン：明るく重なる）
overlay（オーバーレイ：コントラスト強め）
lighten / darken
soft-light / hard-light
*/

/* フェードイン後 */
.photo-stack .photost.overlay.is-visible {
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%) scale(1);
}

/* スマホ対応 */
@media (max-width: 640px) {
  .photo-stack .photost.overlay {
    max-width: 90vw;
  }
}





/* 講師紹介
===================================== */
/* ====== Scoped tokens ====== */
.speaker-section{
  --ink:#111827;
  --brand:#c08a33;
  --line:#e5e7eb;
  --card:#fff;
  --radius:2px;
  --shadow:0 4px 8px rgba(0,0,0,.06);

  position: relative;
  max-width: 960px;
  width: 100%;
  margin: 100px auto;
  padding: 24px clamp(16px, 3vw, 28px);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /*box-shadow: var(--shadow);*/
  overflow: hidden; /* 擬似要素がはみ出ないように */
}
.speaker-section > * { position: relative; z-index: 1; }

/* ========== 1段目：タイトル ========== */
.session-header{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 640px){
  .session-header{ gap: .3rem; }
}

.ss-eyebrow, .ss-title{
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 16px;
  color: #111;
}

/* 開催日 */
.ss-date{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 320px;
  height: 3em;
  margin: 1.5em auto 0;
  border: 1px solid #111;
  border-radius: 3px;
  background: #fff;
  font-weight: 600;
  text-align: center;
}
.ss-date::before{
  content: "開催日";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  padding: 0 .4em;
  font-size: .8rem;
  font-weight: 500;
  color: #555;
  line-height: 1;
}
@media (max-width: 640px){
  .ss-date{ width: 100%; max-width: none; }
}

/* ========== 2段目：説明（テキストのみ） ========== */
.ss-row{ margin: 50px 0; }
.ss-desc{ font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.9; }
.ss-desc p{ margin: 0 0 .9rem; }

/* ========== 丸写真（プロフィールでも再利用） ========== */
.ss-photo{
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
  box-shadow: var(--shadow);
  justify-self: start;
}
.ss-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ========== 仕切り線 ========== */
.ss-divider{
  width: 100%;
  height: 1px;
  background: var(--line,#e5e7eb);
  margin: 24px auto;
}

/* ========== 3段目：プロフィール（写真左・本文右） ========== */
.ss-bio{
  display: grid;
  grid-template-columns: 180px 1fr;  /* 左：写真 / 右：本文 */
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
  margin-top: 6px;
  font-size: .98rem;
  line-height: 1.8;
}
.ss-bio strong{ color: var(--ink); font-weight: 700; }

/* スマホ：縦並び＆写真中央寄せ */
@media (max-width: 720px){
  .ss-bio{
    grid-template-columns: 1fr;
    text-align: left;
  }
  .ss-photo{
    justify-self: center;
    margin-bottom: .5rem;
  }
}

/* さらに小さい端末の微調整 */
@media (max-width: 420px){
  .speaker-section{ padding: 18px 14px; }
  .ss-photo{ width: 180px; height: 180px; }
}

/* ========== セッションごとのカラー ========== */

/* 第1回 オレンジ */
.session1::after{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-40px;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(192,138,51,.28) 0%, rgba(192,138,51,0) 70%);
  z-index:0;
  pointer-events:none;
}

/* 第2回 ブルー */
.session2::after{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-40px;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(37,99,235,.25) 0%, rgba(37,99,235,0) 70%);
  z-index:0;
  pointer-events:none;
}

/* 第3回 グリーン */
.session3::after{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-40px;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(22,163,74,.25) 0%, rgba(22,163,74,0) 70%);
  z-index:0;
  pointer-events:none;
}





/* ========== 高橋政史 紹介（冒頭） ========== */
.takahashi-intro{
  max-width: 960px;   /* ← 800px から 960px に変更 */
  margin: 1.5rem auto 0;
  padding: 1.5rem 2rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 2px;
  display: grid;
  grid-template-columns: 180px 1fr; /* 少し広めに調整 */
  gap: 20px;
}

.ti-photo{
  width: 160px; height: 160px;
  border-radius: 50%; overflow: hidden; margin: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,.06);
}
.ti-photo img{ width:100%; height:100%; object-fit: cover; object-position: center; }
.ti-dic{font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.9}
.ti-name{ margin: 0 0 .4rem;   font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 16px;
  color: #111; /* デフォルト黒 */}
.ti-list{ margin: 0 0 .4rem 1.2em; }
.ti-list li{ margin: 0 0 .25rem; line-height: 1.7; }
.ti-note{ margin: .4rem 0 0; color:#555; font-size: .95rem; }
@media (max-width: 640px){
  .takahashi-intro{ grid-template-columns: 1fr; text-align: left; }
  .ti-photo{ justify-self: start; }
}
@media (max-width: 640px){
  .takahashi-intro{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .takahashi-intro .ti-photo{
    justify-self: center;
    margin-bottom: .8rem;
    width: 140px; height: 140px;
  }

  /* ← 名前だけ中央寄せ（強いセレクタ & 後勝ち） */
  .takahashi-intro .ti-text .ti-name{
    text-align: center;
    margin-bottom: .6rem;
    font-size: 1.1rem;
    font-weight: 700;
  }

  /* ← 本文は左寄せのまま */
  .takahashi-intro .ti-text p:not(.ti-name){
    text-align: left;
  }
}


.ti-desc{font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.9}
.ti-desc p{margin: 0 0 .9rem;}

/* ========== 共通講師カード（各回セクション内） ========== */
.ss-cohost{
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: #fafafa;
  border: 1px dashed #d1d5db;
  border-radius: var(--radius, 2px);
}
.ss-cohost-photo{
  width: 72px; height: 72px; margin:0;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  flex: 0 0 72px;
}
.ss-cohost-photo img{ width:100%; height:100%; object-fit: cover; object-position: center; }
.ss-cohost-label{ font-size: .8rem; color:#6b7280; margin: 0; }
.ss-cohost-name{ margin: 2px 0 0; font-size: 1.05rem; }
@media (max-width: 640px){
  .ss-cohost{ padding: 10px 12px; }
}



/* ===== 配布案内カード ===== */
.kit-notice{
  --line:#e5e7eb; --ink:#111827;
  max-width: 960px;
  margin: 16px auto 0;
  padding: 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:2px;

  display:grid;
  grid-template-columns: 220px 1fr; /* 左:画像, 右:テキスト */
  gap:18px;
  align-items:center;
}

/* 画像 */
.kit-thumb{
  margin:0;
  overflow:hidden;
  border-radius:6px;
  width:200px;
  aspect-ratio:4/3;
  box-shadow:0 4px 8px rgba(0,0,0,.06);
}
.kit-thumb img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* テキスト */
.kit-text{ color:var(--ink); line-height:1.8; }
.kit-title{ margin:0; font-size:1.05rem; }

/* ===== スマホ: 画像→テキストの縦並び ===== */
@media (max-width: 640px){
  .kit-notice{
    grid-template-columns: 1fr;
    gap:14px;
    text-align:center;
  }
  .kit-thumb{
    width:90%; max-width:320px; height:auto;
    aspect-ratio:4/3;
    justify-self:center;
  }
  .kit-text{ text-align:center; }
}




/* グルコン日程 */
.seminar-dates .dates {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 0;
  list-style: none;
}

.seminar-dates .date-card {
  padding: 6px 12px;
  border: 1px solid #333;
  border-radius: 20px; /* ピル型 */
  background: #f9f9f9;
  /*font-size: 0.9rem;*/
  font-weight: 600;
}

/* スマホ用（例: 480px以下） */
@media (max-width: 480px) {
  .seminar-dates .date-card {
    font-size: 14px;      /* 少し小さめに */
    padding: 4px 10px;    /* 横幅も少し狭く */
    white-space: nowrap;  /* 改行させない */
  }
}






/* コース紹介部分 */
.courses {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
  /*border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;*/
}

.course {
  position: relative;
  padding: 4rem 1rem;
  border-top: 1px solid #eee;
  margin-top: 1.5rem; /* ← 追加：線とテキストの間が開く */
}

/*.course:first-child {
  border-top: none;
  margin-top: 0;
}*/
.course:last-child {
  border-bottom: 1px solid #ddd;
}


/* 背景の番号 */
.course .number {
  position: absolute;
  top: 1rem;         /* 上にはみ出す */
  left: -1rem;        /* 左にはみ出す */
  transform: none;    /* 中央揃えはやめる */
  font-size: 6rem;    /* さらに大きく */
  font-weight: 700;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0;
}
@media (max-width: 600px) {
  .course .number {
    top: -0.5rem;
    left: -0.3rem;
    font-size: 3.5rem;
    opacity: 0.1; /* 少し濃くすると小さい画面でも見える */
  }
}



/* 色を回ごとに */
.course:nth-child(1) .number {
  color: #f4a261; /* オレンジ */
}
.course:nth-child(2) .number {
  color: #457b9d; /* ブルー */
}
.course:nth-child(3) .number {
  color: #2a9d8f; /* グリーン */
}

/* コンテンツ部分 */
.course .content {
  position: relative;
  margin: 10px auto;
  z-index: 1; /* 番号より前に出す */
}

.course .content h3 {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: #222;
}

.course .content p {
  line-height: 1.7;
  color: #555;
  margin: 0;
}







/*** =========================
   セミナー会場・日程
   ========================= */
.venue-schedule { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; }
@media (max-width: 900px) { .venue-schedule { grid-template-columns: 1fr; } }


.venue-card { border: 1px solid #ddd; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.06); background: #fff; }
.venue-image img { display: block; width: 100%; height: auto; }
.venue-body { padding: 18px; display: grid; gap: 14px;}
.venue-name { font-size: 18px; font-weight: 700; }
.venue-meta { display: grid; gap: 10px; color: #555; font-size: 14px; }


.schedule { background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,.05);  }
.schedule-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 14px 14px 14px 14px;}
.schedule-item + .schedule-item { border-top: 1px solid #ddd; }


.photo-sc { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.photo-sc img { width: 100%; height: 100%; object-fit: cover; }


.date { font-size: 15px; color: #444; margin-bottom: 6px; }
.detail { display: grid; gap: 2px;}
.detail .title { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.detail .subtitle { font-weight: 400; font-size: 16px; }

@media (max-width: 600px) {
   .venue-schedule { gap: 0; }
  .schedule { gap: 4px; }
  .schedule-card { padding: 10px; }
  .venue-body {margin-bottom: 0; }
  .schedule-item { padding: 14px 14px 0 14px;margin-bottom: 0;}
  .detail { margin-bottom: 0;}
}

/* 講師＋共通写真を横並び（少し重ねる） */
.photo-sc-wrap {
  display: flex;
  align-items: center;
}

/* 2つとも同じ大きさ＆丸＆枠線あり */
.photo-sc,
.photo-sc.common {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,.3);
}

/* 共通写真を少し左に重ねる（下側に） */
.photo-sc.common {
  margin-left: -10px;   /* 重なり具合調整 */
  z-index: 0;           /* 下側に配置 */
}

/* 講師写真は上に来る */
.photo-sc {
  z-index: 1;
}


.venue-note {
  margin-top: 24px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
  font-size: 15px;
  line-height: 1.6;
  color: #333;

  /* 横幅を揃える：親のグリッド幅に合わせる */
  grid-column: 1 / -1;  /* 2カラムをまたいで全幅 */
}


/* 背景画像付き専用バージョン */
.venue-note--bg {
  position: relative;
  overflow: hidden; /* 擬似要素のはみ出し防止 */
  color: #fff; /* 背景が暗いので文字は白め推奨 */
}

.venue-note--bg::before {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left すべて0 */
  background: url("../image2/photo-mapu-nita2.jpg")
              center/cover no-repeat;
  z-index: 0;
}

.venue-note--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* 暗めのオーバーレイ */
  z-index: 1;
}

/* 中身を前面に */
.venue-note--bg > * {
  position: relative;
  z-index: 2;
}

/* 背景付きバージョンのときだけ適用 */
.venue-note--bg .seminar-dates .date-card {
  background: transparent;   /* 背景なし */
  border: 2px solid #fff;    /* 白枠 */
  color: #fff;               /* 文字も白 */
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* 黒い影で読みやすく */
}