/* ==========================================================
   Asia Sustainability Symposium 2026 (JP) - styles.css (CLEAN)
   - Pure CSS (no Bootstrap)
   - Header: fixed (stable)
   - Mobile nav: right dropdown
   - Footer: dark green (screenshot vibe)
   ========================================================== */

/* =========================
   Variables
========================= */
:root{
  --bg: #ffffff;
  --bg-alt: #f6f8fb;
  --ink: #0f172a;
  --muted: rgba(15,23,42,.70);
  --line: rgba(15,23,42,.10);
  --shadow: 0 12px 32px rgba(15,23,42,.08);
  --radius: 18px;

  --emerald: #008c82;
  --emerald-2: #00a394;
  --emerald-soft: rgba(0,140,130,.14);
  --hero-dark: rgba(0,0,0,.55);
  --hero-bg: url("../img/hero_tokyo.jpg");

  --hero-leaves-top: url("../img/reaf_ue.svg");
  --hero-leaves-bottom: url("../img/reaf_shita.svg");

  /* もし既存で使ってるなら残してOK */
  /* --hero-green: url("../img/hero_green_bottom.png"); */
  --hero-green: url("../img/hero_green_bottom.png");
  --parallax-bg: url("../img/tokyo_parallax.jpg");

  /* header height (JSが更新する前提 / 保険で固定値も入れる) */
  --header-h: 76px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{
  scroll-behavior: smooth;
  /* 固定ヘッダー分、アンカーの着地を下げる保険 */
  scroll-padding-top: calc(var(--header-h) + 18px);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.7;
  overflow-x: hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width: min(1120px, calc(100% - 32px));
  margin-inline:auto;
}

.muted{ color:var(--muted); }

/* =========================
   Header / Nav (FIXED)
========================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);

  /* Safari/合成で消えるの防止 */
  transform: translateZ(0);
  will-change: transform;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.brand-mark{
  width: 12px; height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--emerald), var(--emerald-2));
  box-shadow: 0 10px 22px rgba(0,140,130,.25);
}
.brand-text{
  font-size: .95rem;
  color: rgba(15,23,42,.88);
}

.site-nav{
  display:flex;
  align-items:center;
  gap: 8px;
}

.nav-link{
  font-size: .95rem;
  color: rgba(15,23,42,.82);
  padding: 6px 8px;
  border-radius: 10px;
}
.nav-link:hover{
  background: rgba(0,140,130,.08);
  text-decoration:none;
}
.nav-link.is-active{
  background: rgba(0,140,130,.12);
  color: rgba(15,23,42,.92);
}

.nav-divider{
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 4px;
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.9rem;
}
.lang-link{
  padding: 4px 8px;
  border-radius: 10px;
  color: rgba(15,23,42,.75);
}
.lang-link.is-active{
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.92);
  font-weight:700;
}
.lang-sep{ color: rgba(15,23,42,.35); }

.nav-toggle{
  display:none;
  border: 1px solid var(--line);
  background:#fff;
  border-radius: 12px;
  padding: 10px 10px;
  cursor:pointer;
}
.nav-toggle-bar{
  display:block;
  width: 22px;
  height: 2px;
  background: rgba(15,23,42,.75);
  margin: 4px 0;
  border-radius: 999px;
}

/* fixed header spacing */
main#top{
  padding-top: var(--header-h);
}

/* anchors: どんなidでもズレない保険 */
[id]{
  scroll-margin-top: calc(var(--header-h) + 18px);
}

/* Mobile nav: right dropdown */
@media (max-width: 980px){
  .nav-toggle{ display:block; }

  .site-nav{
    position: fixed;
    top: calc(var(--header-h) + 10px);
    right: 16px;
    left: auto;
    width: min(340px, calc(100vw - 32px));

    background: rgba(255,255,255,.98);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: 16px;
    padding: 14px;

    display:none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;

    z-index: 10001;
  }
  .site-nav.is-open{ display:flex; }
  .nav-divider{ display:none; }
  .brand-text{ font-size:.9rem; }
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing:.02em;
  cursor:pointer;
  transition: transform .08s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
  user-select:none;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  color:#fff;
  background: linear-gradient(135deg, var(--emerald), var(--emerald-2));
  box-shadow: 0 14px 30px rgba(0,140,130,.22);
}
.btn-primary:hover{ opacity:.95; text-decoration:none; }

.btn-ghost{
  color:#fff;
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{
  border-color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.14);
  text-decoration:none;
}

/* =========================
   Sections
========================= */
.section{ padding: 72px 0; }
.section-alt{ background: var(--bg-alt); }

.section-head{ margin-bottom: 22px; }

.section-title{
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0;
}
.section-lead{
  margin: 10px 0 0;
  color: rgba(15,23,42,.70);
  max-width: 70ch;
  font-weight: 400;
}

.purpose-divider{
  width: 92px;
  height: 4px;
  background: linear-gradient(90deg, var(--emerald), rgba(0,140,130,.25));
  border-radius: 999px;
  margin: 12px 0 0;
}

/* Cards */
.card{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad{ padding: 18px; }

/* Purpose */
.purpose-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.purpose-block{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.purpose-block p{ margin:0; }
.purpose-note{
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.06);
  font-size: .95rem;
  color: rgba(15,23,42,.78);
}
.purpose-highlight{
  border-color: rgba(0,140,130,.18);
  background: linear-gradient(180deg, rgba(0,140,130,.10), rgba(255,255,255,1));
}
/* flexレイアウト時の保険 */
.purpose-layout{
  flex-wrap: wrap;
}
.purpose-layout .purpose-highlight{
  flex: 0 0 100%;
  width: 100%;
}
/* =========================
   Parallax (Tokyo)
========================= */
.parallax-tokyo{
  position: relative;
  height: clamp(220px, 34vh, 360px);
  overflow:hidden;
  border-top: 1px solid rgba(255,255,255,.20);
  border-bottom: 1px solid rgba(15,23,42,.10);
  z-index: 0;
}
.parallax-inner{
  position:absolute;
  inset: -35% 0 -35% 0;
  background:
    linear-gradient(180deg,
      rgba(0,140,130,.55) 0%,
      rgba(0,140,130,.18) 45%,
      rgba(0,0,0,.55) 100%
    ),
    var(--parallax-bg) center/cover no-repeat;
  transform: translateY(0px);
  will-change: transform;
}

/* =========================================
   Hero (Emerald + Readability)
========================================= */

:root{
  /* hero用の色を変数化（後で調整しやすい） */
  --hero-ink: #e9f7f4;               /* 白すぎない文字 */
  --hero-ink-soft: rgba(230,248,245,.95);
  --hero-kicker: rgba(220,245,240,.95);

  --hero-overlay: rgba(8, 42, 38, 0.78);  /* 深いエメラルド黒 */
  --hero-overlay-mid: rgba(8, 42, 38, 0.55);
  --hero-overlay-light: rgba(8, 42, 38, 0.30);

  --hero-accent-1: rgba(16,185,129,0.22);
  --hero-accent-2: rgba(20,184,166,0.18);
}

.hero{
  position: relative;
  min-height: 560px;
  height: 65vh;
  display: flex;
  align-items: center;
  color: var(--hero-ink);
  overflow: hidden;

  background-image: url("../img/hero_tokyo.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 58%;
}

/* エメラルド寄りの影＋淡い発光（読みやすさの核） */

/* 粒子（ごく薄く） */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.6px);
  background-size: 18px 18px;
  opacity: 0.18;
  mix-blend-mode: soft-light;
  z-index: 0;
}

/* “降ってくる”装飾用のレイヤー（画像を後から差し替え可能）
   例：透過PNG / SVG を --hero-fall-img に指定して使う */
.hero .hero-fall{
  position: absolute;
  inset: -10% -10% -10% -10%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
  filter: blur(0px);
  background-image: var(--hero-fall-img, none);
  background-repeat: repeat;
  background-size: 260px 260px;
  animation: heroFall 18s linear infinite;
  mix-blend-mode: screen;
}

@keyframes heroFall{
  from { transform: translateY(-6%) translateX(0); }
  to   { transform: translateY(10%) translateX(-2%); }
}

.hero-inner{
  position: relative;
  width: 100%;
  z-index: 1;
}

.hero-content{
  max-width: 760px;
}

.hero-kicker{
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hero-kicker);
  margin: 0 0 12px;
}

.hero-title{
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.12;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
  color: var(--hero-ink);
  text-shadow: 0 6px 24px rgba(0,0,0,0.45);
}

.hero-subtitle{
  font-size: 16px;
  margin: 0 0 22px;
  color: var(--hero-ink-soft);
  text-shadow: 0 3px 16px rgba(0,0,0,0.45);
}

/* ボタンが“くっつく”問題：gap強化＋行間 */
.hero-actions{
  display: flex;
  gap: 14px;            /* ここで解決 */
  row-gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
/* スマホ：縦長は上→下で読みやすく */
@media (max-width: 820px){
  .hero{
    height: 100vh;
    min-height: 640px;
    background-position: center 62%;
  }
  .hero-actions{ gap: 12px; }
}

  .hero{
    height: 100vh;
    min-height: 640px;
    background-position: center 62%;
  }
/* =========================================
   Hero (整理版：マスク + ドーナツ装飾)
   ※ :root は触らず、Hero内だけで色を管理
========================================= */
/* =========================================
   Hero（マスク + ドーナツ装飾 / 白なし・シャープ版）
   ※このブロックを丸ごと貼り替えでOK
========================================= */

.hero{
  /* Hero専用カラー（エメラルド寄り） */
  --hero-dark-80: rgba(2, 44, 40, 0.80);
  --hero-dark-58: rgba(2, 44, 40, 0.58);
  --hero-dark-30: rgba(2, 44, 40, 0.30);

  --hero-emerald-22: rgba(16, 185, 129, 0.22);
  --hero-teal-18: rgba(20, 184, 166, 0.18);

  position: relative;
  min-height: 560px;
  height: 65vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;

  background-image: url("../img/hero_tokyo.jpg");
  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;
}

/* 文字を読ませるための“暗めマスク”（エメラルド寄り） */

.hero-deco::before,
.hero-deco::after{
  content:"";
  position: absolute;
  border-radius: 999px;

  background:
    radial-gradient(circle,
      transparent 0 44%,
      rgba(43,191,155,0.42) 44% 58%,
      rgba(15,118,110,0.30) 58% 72%,
      transparent 72% 100%
    );

  opacity: 0.85;
}
/* 左：上の方にずらす（画面外から入る） */
.hero-deco::before{
  width: 640px;
  height: 640px;
  left: -230px;
  top: -170px;
  transform: rotate(-10deg);
}

/* 右：下の方にずらす（少し薄め＆小さめ） */
.hero-deco::after{
  width: 560px;
  height: 560px;
  right: -210px;
  bottom: -160px;
  opacity: 0.62;
  transform: rotate(14deg);
}

/* コンテンツは最前面 */
.hero-inner{
  position: relative;
  width: 100%;
  z-index: 2;
}

.hero-content{
  max-width: 660px;

  /* 文字ブロックに薄いガラス背景（強め） */
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,0.40);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255,255,255,0.12);
}

/* タイトル・サブなどの“読みやすさ”を底上げ */
.hero-title,
.hero-subtitle,
.hero-kicker{
  text-shadow: 0 10px 28px rgba(0,0,0,0.38);
}

/* ボタンの“くっつき”防止 */
.hero-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* スマホは縦グラデで読みやすく */
@media (max-width: 820px){
  .hero{
    height: 100vh;
    min-height: 640px;
    background-position: center 62%;
  }


  /* スマホは輪っかを小さく＆位置も追従 */
  .hero-deco::before{
    width: 440px;
    height: 440px;
    left: -170px;
    top: -140px;
    opacity: 0.62;
  }

  .hero-deco::after{
    width: 400px;
    height: 400px;
    right: -150px;
    bottom: -140px;
    opacity: 0.52;
  }

  .hero-content{
    padding: 16px;
    background: rgba(0,0,0,0.24);
  }
}
.hero{
  position: relative;
  overflow: hidden; /* はみ出し調整したい場合に効く */
}
/* =========================================
   Hero案A：Grid + Ripple（国際会議っぽい）
========================================= */
.hero{
  position: relative;
  min-height: 560px;
  height: 65vh;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;

  background-image: url("../img/hero_tokyo.jpg");
  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;

  --dark-85: rgba(2, 44, 40, 0.85);
  --dark-60: rgba(2, 44, 40, 0.60);
  --dark-20: rgba(2, 44, 40, 0.20);
  --emerald-18: rgba(16,185,129,0.18);
  --teal-14: rgba(20,184,166,0.14);
}

/* 読ませるマスク＋格子＋波紋 */

/* コンテンツ最前面 */
.hero-inner{ position:relative; z-index:1; }

@media (max-width: 820px){
  .hero{ height: 100vh; min-height: 640px; background-position:center 62%; }
}
/* =========================================
   HERO 修正パッチ：左に寄りすぎ問題 + パネル濃く
   ※ styles.css の一番最後に貼る
========================================= */

/* 1) ヒーロー内に「左右余白 + 最大幅」を作る（これが左寄りの根本対策） */
.hero .hero-inner{
  /* 既存を壊さず“container”として機能させる */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;          /* ← これが効くとスクショの余白に戻ります */
  width: 100%;
  position: relative;
  z-index: 2;
}

/* 2) パネル（文字ブロック）の幅と位置 */
.hero .hero-content{
  max-width: 760px;         /* スクショ寄せ（660→760くらいが安定） */
  margin: 0;                /* 左寄せのまま（container内で余白が出る） */
}

/* 3) パネル色を“濃く”する（ここだけ触ればOK） */
.hero .hero-content{
  background: rgba(6, 36, 33, 0.46);   /* ← 濃さ調整：0.38〜0.58 でお好み */
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 46px rgba(0,0,0,0.22);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: 18px;
  padding: 18px 18px 16px;
}

/* 4) スマホ：左右余白を少し減らして読みやすく */
@media (max-width: 820px){
  .hero .hero-inner{
    padding: 0 16px;
  }
  .hero .hero-content{
    max-width: 100%;
    background: rgba(6, 36, 33, 0.52); /* スマホは少し濃いめでも◎ */
  }
}


/* =========================
   Program table
========================= */
.table-responsive{ overflow-x:auto; }

.program-table-wrap{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 36px rgba(15,23,42,.06);
}
.program-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
  margin:0;
}
.program-table thead th{
  text-align:left;
  font-size:.95rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(15,23,42,.70);
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
}
.program-table tbody td{
  vertical-align: top;
  padding: 18px 16px;
  border-top: 1px solid rgba(15,23,42,.06);
}
.program-table tbody tr:nth-child(even) td{
  background: rgba(15,23,42,.015);
}

.program-time{
  white-space: nowrap;
  font-weight: 700;
  color: rgba(15,23,42,.86);
  width: 140px;
}
.program-sessionline{
  display:flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.program-sessionname{
  font-weight: 700;
  color: rgba(15,23,42,.88);
}
.program-duration{
  font-weight: 400;
  color: rgba(15,23,42,.55);
}
.program-row-title{
  font-weight: 600;
  color: rgba(15,23,42,.86);
  margin: 8px 0 4px;
  line-height: 1.75;
}
.program-row-subtitle{
  font-weight: 400;
  color: rgba(15,23,42,.62);
  margin: 0 0 10px;
  line-height: 1.7;
}
.program-subhead{
  margin-top: 10px;
  margin-bottom: 6px;
  font-weight: 650;
  letter-spacing: .02em;
  color: rgba(15,23,42,.76);
}
.program-list{ margin: 0; padding-left: 1.1rem; }
.program-list li{ margin: 7px 0; }

.program-speaker{
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
	font-size: 1.3rem;
  font-weight: 600;
  color: rgba(0,140,130,.95);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.program-speaker:hover{ opacity: .85; }

.program-affil{
  margin-left: 8px;
  color: rgba(15,23,42,.65);
  font-weight: 400;
}
.program-chip{
  display:inline-flex;
  align-items:center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(0,140,130,.10);
  border: 1px solid rgba(0,140,130,.18);
  color: rgba(15,23,42,.78);
}
.program-note,
.program-mini-note{
  margin-top: 8px;
  color: rgba(15,23,42,.62);
  font-weight: 400;
  line-height: 1.7;
}
.program-muted{ color: rgba(15,23,42,.50); }
.program-more{
  margin-top: 10px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(15,23,42,.02);
}
.program-more summary{
  cursor: pointer;
  font-weight: 600;
  color: rgba(15,23,42,.74);
}
.program-more-body{ margin-top: 10px; }

@media (max-width: 640px){
  .program-table thead th,
  .program-table tbody td{ padding: 14px 12px; }
  .program-time{ width: 112px; }
  .program-affil{ display:block; margin-left: 0; margin-top: 4px; }
}

/* =========================
   Register (cards)
========================= */
.register-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-top: 12px;
}
@media (max-width: 980px){
  .register-cards{ grid-template-columns: 1fr; }
}

.register-card2{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 36px rgba(15,23,42,.06);
  padding: 18px;
  overflow: hidden;
}
.register-card2::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(0,140,130,.25), rgba(0,140,130,0) 60%);
  pointer-events:none;
}

.register-card2-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.register-badge{
  display:flex;
  align-items:center;
  gap: 10px;
}
.register-dot{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(0,140,130,.10);
  border: 1px solid rgba(0,140,130,.18);
  position: relative;
  flex: 0 0 auto;
}
.register-dot::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,140,130,.95);
}
.register-badge-text{
font-size: 1.2rem; /* ←少し大きく（必要なら 1.1rem） */
	font-weight: 700;
  color: rgba(15,23,42,.88);
}
.register-head-note{
  color: rgba(15,23,42,.60);
  font-size: .95rem;
  line-height: 1.5;
  text-align: right;
}
.register-kv{
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.register-row{
  display:grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid rgba(15,23,42,.06);
}
.register-row:first-child{ border-top: none; padding-top: 0; }
.register-row dt{
  margin: 0;
  color: rgba(15,23,42,.55);
  font-weight: 600;
  letter-spacing: .02em;
}
.register-row dd{
  margin: 0;
  color: rgba(15,23,42,.86);
  font-weight: 500;
}

.register-cta{
  margin-top: 14px;
  display:flex;
  justify-content: center;
}
/* 登録カード内のCTAボタン 共通強化 */
.register-cta .btn-register{
  width: 100%;
  max-width: 360px; /* 既存に合わせて不要なら削除OK */
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  text-decoration: none; /* 念のため下線対策 */
}

/* hover/focusで「浮く」 */
.register-cta .btn-register:hover,
.register-cta .btn-register:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
  filter: saturate(1.05);
  text-decoration: none;
}

/* 押した瞬間 */
.register-cta .btn-register:active{
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(0,0,0,.10);
}
/* 対面（通常）＝グリーンを少し締めてCTA感UP */
.register-cta .btn-register:not(.is-soft){
  background: linear-gradient(135deg, #2f8f86, #1f7f74);
  border: 1px solid rgba(31,127,116,.35);
  color: #fff;
  box-shadow: 0 10px 22px rgba(31,127,116,.18);
}

.register-cta .btn-register:not(.is-soft):hover,
.register-cta .btn-register:not(.is-soft):focus-visible{
  background: linear-gradient(135deg, #278a80, #176f65);
  box-shadow: 0 16px 34px rgba(31,127,116,.26);
}
/* 対面（通常）＝グリーンを少し締めてCTA感UP */
.register-cta .btn-register:not(.is-soft){
  background: linear-gradient(135deg, #2f8f86, #1f7f74);
  border: 1px solid rgba(31,127,116,.35);
  color: #fff;
  box-shadow: 0 10px 22px rgba(31,127,116,.18);
}

.register-cta .btn-register:not(.is-soft):hover,
.register-cta .btn-register:not(.is-soft):focus-visible{
  background: linear-gradient(135deg, #278a80, #176f65);
  box-shadow: 0 16px 34px rgba(31,127,116,.26);
}
.btn-register{
  width: min(460px, 100%);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
}
.register-footnote{
  margin-top: 10px;
  color: rgba(15,23,42,.50);
  font-size: .9rem;
  text-align: left;
}
.register-info{
  margin-top: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(15,23,42,.18);
  background: rgba(15,23,42,.02);
  padding: 14px 16px;
}
.register-info-title{
  font-weight: 700;
  color: rgba(15,23,42,.80);
  margin-bottom: 6px;
}
.register-info-text{
  color: rgba(15,23,42,.70);
  line-height: 1.8;
}
/* ボタンの末尾に矢印を付ける（自動） */
.register-cta .btn-register::after{
  content: "→";
  display: inline-block;
  margin-left: .6em;
  transition: transform .18s ease;
  opacity: .95;
}

.register-cta .btn-register:hover::after,
.register-cta .btn-register:focus-visible::after{
  transform: translateX(4px);
}
/* オンライン（is-soft）＝オレンジCTA */
.register-cta .btn-register.is-soft{
  background: linear-gradient(135deg, #ff8a3d, #ff5a3d);
  border: 1px solid rgba(255,90,61,.35);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255,90,61,.22);
}

/* hoverでさらに強く */
.register-cta .btn-register.is-soft:hover,
.register-cta .btn-register.is-soft:focus-visible{
  background: linear-gradient(135deg, #ff7a22, #ff3f2a);
  box-shadow: 0 16px 34px rgba(255,90,61,.30);
}
/* =========================
   Access (50:50)
========================= */
.access-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 12px;
}
@media (max-width: 980px){
  .access-grid{ grid-template-columns: 1fr; }
}

.access-card{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 36px rgba(15,23,42,.06);
  padding: 18px;
  overflow: hidden;
  height: 100%;
}

.access-card-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.access-card-title{
  font-weight: 650;
  color: rgba(15,23,42,.88);
  font-size: 1.05rem;
}
.access-map-link{
  font-size: .95rem;
  font-weight: 600;
  color: rgba(0,140,130,.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.access-map-link:hover{ opacity: .85; }

.access-map-frame{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.02);
  aspect-ratio: 16 / 11;
}
.access-map-frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display:block;
}
.access-note{
  margin-top: 10px;
  color: rgba(15,23,42,.58);
  font-size: .95rem;
  line-height: 1.7;
}

.access-kv{
  margin: 0;
  padding: 0;
  display:grid;
  gap: 10px;
}
.access-row{
  display:grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(15,23,42,.06);
}
.access-row:first-child{ border-top: none; padding-top: 0; }
.access-row dt{
  margin: 0;
  color: rgba(15,23,42,.55);
  font-weight: 600;
  letter-spacing: .02em;
}
.access-row dd{
  margin: 0;
  color: rgba(15,23,42,.86);
  font-weight: 500;
  line-height: 1.75;
}
.access-subtitle{
  margin-top: 14px;
  margin-bottom: 6px;
  font-weight: 650;
  color: rgba(15,23,42,.78);
  letter-spacing: .02em;
}
.access-list{
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(15,23,42,.76);
  line-height: 1.85;
}
.access-list li{ margin: 6px 0; }
.access-box{
  border-radius: 16px;
  border: 1px dashed rgba(15,23,42,.18);
  background: rgba(15,23,42,.02);
  padding: 12px;
  color: rgba(15,23,42,.72);
  line-height: 1.8;
}
.access-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================
   Speakers (grid)
========================= */
.speaker-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px){
  .speaker-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px){
  .speaker-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .speaker-grid{ grid-template-columns: 1fr; }
}

.speaker-card{
  appearance:none;
  border: 1px solid var(--line);
  background:#fff;
  border-radius: 18px;
  padding: 14px 14px 16px;
  text-align:left;
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .18s ease;
}
.speaker-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,140,130,.22);
}
.speaker-tag{
  display:inline-block;
  font-size:.78rem;
  font-weight: 800;
  letter-spacing:.06em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,140,130,.10);
  border: 1px solid rgba(0,140,130,.18);
  color: rgba(15,23,42,.82);
  margin-bottom: 10px;
}
.speaker-photo{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0,140,130,.22), rgba(15,23,42,.08));
  margin-bottom: 10px;
}
.speaker-name{
  font-weight: 900;
  line-height: 1.25;
}
.speaker-role{
  margin-top: 6px;
  color: rgba(15,23,42,.72);
  font-size: .95rem;
  line-height: 1.45;
}

/* =========================
   Modal (custom)
========================= */
.modal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 10020;
}
.modal.is-open{ display:block; }

.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
}

.modal-panel{
  position: relative;
  width: min(860px, calc(100% - 32px));
  margin: 72px auto 24px;
  background:#fff;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 70px rgba(15,23,42,.28);
  overflow:hidden;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.02);
}
.modal-title{ font-weight: 600; }
.modal-close{
  appearance:none;
  border: 1px solid rgba(15,23,42,.12);
  background:#fff;
  border-radius: 12px;
  width: 40px; height: 40px;
  cursor:pointer;
  font-size: 20px;
  line-height: 1;
  color: rgba(15,23,42,.75);
}
.modal-close:hover{ background: rgba(15,23,42,.04); }

.modal-body{ padding: 16px; }

.modal-speaker{
  display:flex;
  gap: 14px;
  align-items:center;
  margin-bottom: 12px;
}
.modal-photo{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0,140,130,.22), rgba(15,23,42,.08));
}
.modal-name{
  font-weight: 600;
  font-size: 1.2rem;
}
.modal-aff{ color: rgba(15,23,42,.75); }
.modal-bio{
  color: rgba(15,23,42,.82);
  line-height: 1.8;
  white-space: pre-line;
}
.modal-photo{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(15,23,42,.06);
  flex: 0 0 auto;
}

/* 登壇者カード：名前の右のCMAバッジ */
.speaker-name{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.cma-badge--card{
  height: 2.35em;      /* 文字と同じくらい〜少し大きめ */
  width: auto;
  transform: translateY(.05em);
  opacity: .95;
}
/* ===== CMA badge: speaker card name right ===== */
.speaker-card .speaker-name{
  display: inline-flex;          /* バッジと横並びにする */
  align-items: center;
  gap: .35em;                    /* 名前とロゴの間 */
}

.speaker-card .speaker-name img.cma-badge--card{
  width: 50px !important;        /* ←ここを大きく(24〜34くらいで) */
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  transform: translateY(1px);    /* 上下位置微調整 */
  vertical-align: middle;
}
/* Program list: bullet（・）を消す */
.program-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* （任意）各行の間を少し整える */
.program-list > li{
  margin: 0 0 .8rem;
}

/* （任意）最後だけ余白なし */
.program-list > li:last-child{
  margin-bottom: 0;
}
/* =========================
   Footer
========================= */
.site-footer{
  background: #163b3f; /* 深めのグリーン */
  color: #e6f1ef;
  margin-top: 0rem;
  position: relative;
}

/* 上の細いグラデライン */
.footer-accent{
  height: 3px;
  background: linear-gradient(
    90deg,
    #6fc2a8,
    #9ad7c3,
    #6fc2a8
  );
}

/* レイアウト */
.footer-inner{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  padding: 3rem 0;
}

/* 各カラム */
.footer-col{
  font-size: 0.95rem;
  line-height: 1.7;
}

.footer-title{
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ad7c3;
  margin-bottom: 0.5em;
}

.footer-text{
  color: #ffffff;
}

/* 右寄せコピー */
.footer-right{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.footer-copy{
  font-size: 0.75rem;
  color: #b7dcd2;
}
/* 3カラムに変更 */
.footer-inner{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  padding: 3rem 0 1.2rem; /* 下はコピーライト用に少し詰める */
}

/* 4つ目（footer-right）は使わない想定なので無効化（残しててもOK） */
.footer-right{
  display: none;
}

/* コピーライト：下段1カラムで中央、白文字、上下マージン */
.footer-copy{
  grid-column: 1 / -1;
  text-align: left;
  color: #fff;
  font-size: 0.85rem;
  margin: 12px 0 0;      /* 下はmarginじゃなくて… */
  padding-bottom: 22px;  /* ここで下の余白を作る（確実） */
  opacity: .92;
}
/* Footer links - stylish */
.site-footer a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 650;
  letter-spacing: .01em;
  border-bottom: 1px solid rgba(154,215,195,.35); /* アクセント色で細いライン */
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease, transform .18s ease, filter .18s ease;
}

/* 小さめの矢印を付与（外部リンク感） */
.site-footer a::after{
  content: "↗";
  font-size: .95em;
  opacity: .75;
  transform: translateY(-.02em);
  transition: transform .18s ease, opacity .18s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible{
  color: #ffffff;
  border-bottom-color: rgba(154,215,195,.75);
  transform: translateY(-1px);
  filter: saturate(1.05);
  outline: none;
}

.site-footer a:hover::after,
.site-footer a:focus-visible::after{
  transform: translate(2px,-2px);
  opacity: .95;
}

/* クリック時 */
.site-footer a:active{
  transform: translateY(0);
  filter: none;
}
/* ===== Anchor offset（確定版） ===== */
:root{
  --header-h: 72px; /* JSで上書きされる保険値 */
}

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

/* fixedヘッダーなら本文を下げる（すでにあるなら重複しないよう注意） */
main#top{
  padding-top: var(--header-h);
}

/* #top へ飛ぶ時だけ余計なズレを避ける */
#top{
  scroll-margin-top: 0;
}

/* =========================================================
   OVERVIEW (実施概要) - force apply (place at END of CSS)
   ========================================================= */

/* 1) まず overview セクションの基本 */
#overview{
  position: relative;
}

/* 2) 2カラム（PCは2列、SPは1列） */
#overview .overview-2col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px){
  #overview .overview-2col{
    grid-template-columns: 1fr;
  }
}

/* 3) カードの見た目（.card が別で潰されても大丈夫なように指定） */
#overview .overview-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 36px rgba(15,23,42,.06);
}

/* 4) ヘッダー部分 */
#overview .overview-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.02);
}
#overview .overview-card-title{
  font-weight: 800;
  letter-spacing: .02em;
}

/* 5) ピル */
#overview .overview-pill{
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .10em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,140,130,.10);
  border: 1px solid rgba(0,140,130,.16);
  color: rgba(15,23,42,.82);
}
#overview .overview-pill.is-info{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.10);
}

/* 6) KV（行） */
#overview .kv{
  padding: 8px 18px 18px;
}
#overview .kv-row{
  display: grid;
  grid-template-columns: 7.2rem 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
#overview .kv-row:last-child{
  border-bottom: none;
}
@media (max-width: 980px){
  #overview .kv-row{
    grid-template-columns: 6.5rem 1fr;
  }
}
/* 右カラムを縦積みにする */
.overview-right-col{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* もし既存のoverview-contactにmargin-topがあるなら不要 */
.overview-contact{ margin-top: 0; }
/* 7) Key / Val の見た目（太さ抑えめ） */
/* #overview の kv を「key狭く / val広く」＋ weight を明示 */
#overview .kv-row{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

#overview .kv-key{
  flex: 0 0 92px;          /* ←ここでkey幅調整 */
  color: rgba(15,23,42,.68);
  font-weight: 700;        /* ★これを明示 */
  letter-spacing: .06em;
  white-space: nowrap;
}

#overview .kv-val{
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(15,23,42,.84);
  font-weight: 500;
  line-height: 1.8;
}

/* カード見出し（開催情報 / 主催・協力 / お問い合わせ先 など）も 700 */
#overview .overview-card-title{
  font-weight: 700;        /* ★ここ */
}
/* 2カラム（既にあるなら不要。無い場合のみ） */
.overview-2col{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
}

/* 右カラムを縦積みにする（重要） */
.overview-right-col{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* お問い合わせが左に落ちないよう保険（右ラップしてれば基本不要） */
.overview-contact{
  margin-top: 0;
}

/* スマホは縦並び */
@media (max-width: 900px){
  .overview-2col{
    grid-template-columns: 1fr;
  }
  .overview-right-col{
    gap: 16px;
  }
}
/* お問い合わせカード：中の余白を整える */
.overview-contact .overview-contact-body{
  padding: 16px 20px 18px; /* ←ここで調整（上下・左右） */
}

.overview-contact .overview-contact-body p{
  margin: 0 0 10px;
  line-height: 1.7;
}

.overview-contact .overview-contact-mail{
  margin: 0;
  font-weight: 700;
}
/* お問い合わせ：メールリンク（pill + underline演出） */
.overview-contact a{
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .32em .65em;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: #0f766e;
  background: rgba(46,167,154,.12);
  border: 1px solid rgba(46,167,154,.28);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.overview-contact a:hover,
.overview-contact a:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  filter: saturate(1.05) contrast(1.05);
}

/* 右上がり矢印（外部リンクっぽい見た目に） */
.overview-contact a::after{
  content: "↗";
  font-size: .95em;
  opacity: .9;
  transform: translateY(-.02em);
}
/* 8) 引用 */
#overview .kv-quote{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(0,140,130,.08);
  border: 1px dashed rgba(0,140,130,.22);
  color: rgba(15,23,42,.72);
  font-weight: 500;
}

/* 9) 下のノート */
#overview .overview-notebox{
  margin: 14px 18px 18px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.06);
  color: rgba(15,23,42,.74);
  font-weight: 500;
  line-height: 1.7;
}
/* =========================================================
   Supporters / 後援（ロゴカード）
========================================================= */
.supporters-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* PCは4列 */
  gap: 18px;
}

.supporter-card{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 18px 16px;
  min-height: 120px;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.supporter-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15,23,42,.10);
  border-color: rgba(0,140,130,.22);
}

.supporter-card img{
  width: min(280px, 92%);
  height: 72px;               /* ロゴ高さを揃える */
  object-fit: contain;        /* はみ出さずに収める */
  display: block;
}

/* Tablet */
@media (max-width: 980px){
  .supporters-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 640px){
  .supporters-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supporter-card{ min-height: 104px; padding: 14px 12px; }
  .supporter-card img{ height: 62px; }
}

/* Very small */
@media (max-width: 420px){
  .supporters-grid{ grid-template-columns: 1fr; }
}
.brand-logo{
  width: 200px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: 0px;
  /* もし“アイコンっぽく”見せたいなら薄い背景 */
  /* background: rgba(255,255,255,0.6); */
  /* padding: 4px; */
}


/* =========================
  Speakers (International conference feel)
========================= */

.speaker-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

@media (max-width: 980px){
  .speaker-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .speaker-grid{ grid-template-columns: 1fr; }
}

.speaker-card{
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.92);
  border-radius: 20px;
  padding: 16px 16px 14px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(2, 12, 27, 0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  position: relative;
  overflow: hidden;
}

/* 上品な“会議資料感”の薄い光 */
.speaker-card::before{
  content:"";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 120%;
  background: radial-gradient(520px 220px at 20% 40%, rgba(43,191,155,0.10), transparent 60%);
  pointer-events: none;
}

.speaker-card:hover{
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, 0.22);
  box-shadow: 0 14px 34px rgba(2, 12, 27, 0.10);
  background: rgba(255,255,255,0.96);
}

.speaker-card:active{
  transform: translateY(0);
}

.speaker-card:focus-visible{
  outline: 3px solid rgba(43,191,155,0.35);
  outline-offset: 3px;
}

/* 写真（今は空でもOK） */
.speaker-photo{
  width: 76px;
  height: 76px;
  border-radius: 18px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  background:
    radial-gradient(220px 140px at 30% 35%, rgba(43,191,155,0.22), transparent 60%),
    linear-gradient(135deg, rgba(15,118,110,0.16), rgba(11,59,71,0.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

/* 文字階層 */
.speaker-name{
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(11,18,32,0.92);
  line-height: 1.25;
}

.speaker-role{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(11,18,32,0.64);
}

/* 右下の“More”っぽい矢印（国際会議資料感） */
.speaker-card::after{
  content:"→";
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-weight: 600;
  color: rgba(15,118,110,0.50);
  transform: translateX(-2px);
  transition: transform .18s ease, color .18s ease;
}

.speaker-card:hover::after{
  transform: translateX(2px);
  color: rgba(15,118,110,0.75);
}

/* 調整中（TBD） */
.speaker-card.is-muted{
  opacity: 0.65;
  cursor: default;
}
.speaker-card.is-muted:hover{
  transform: none;
  box-shadow: 0 10px 26px rgba(2, 12, 27, 0.06);
  border-color: rgba(15, 23, 42, 0.10);
}
.speaker-card.is-muted::after{
  content:"";
}.speaker-tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(15,118,110,0.92);
  background: rgba(15,118,110,0.08);
  border: 1px solid rgba(15,118,110,0.14);
  padding: 6px 10px;
  border-radius: 999px;
}
.speaker-tag{
  margin-bottom: 10px;
}
/* ===== Hero CTA: パネル外に出す ===== */
.hero-inner {
  position: relative;
}

.hero-cta {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* パネルの下に「浮いてる」感を出す（必要なら） */
.hero-cta .btn {
  position: relative;
  z-index: 2;
}

/* ===== 申込CTA（暖色・目立つ） ===== */
.btn-cta-warm {
  background: #f08a24;   /* オレンジ系 */
  color: #fff;
  border: 1px solid rgba(0,0,0,0.05);
}

.btn-cta-warm:hover,
.btn-cta-warm:focus-visible {
  filter: brightness(0.95);
}

/* ===== サブCTA（アウトライン） ===== */
.btn-cta-outline {
  background: rgba(255,255,255,0.0);
  color: inherit; /* 既存の文字色に追従 */
  border: 1px solid rgba(255,255,255,0.6); /* 背景が暗い想定。明るい場合は調整 */
  backdrop-filter: blur(2px);
}

.btn-cta-outline:hover,
.btn-cta-outline:focus-visible {
  background: rgba(255,255,255,0.12);
}

/* ===== 矢印（遷移感） ===== */
.btn-arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.18s ease;
}

.hero-cta a:hover .btn-arrow,
.hero-cta a:focus-visible .btn-arrow {
  transform: translateX(4px);
}
/* Hero CTA内のリンクは下線を出さない（hover/focusも含む） */
.hero-cta a,
.hero-cta a:hover,
.hero-cta a:focus,
.hero-cta a:focus-visible,
.hero-cta a:active {
  text-decoration: none !important;
}
/* ===== プログラムCTA（緑系） ===== */
.btn-cta-green {
  background: #1f8f5f;  /* 緑系 */
  color: #fff;
  border: 1px solid rgba(0,0,0,0.05);
}

.btn-cta-green:hover,
.btn-cta-green:focus-visible {
  filter: brightness(0.95);
}
/* 固定ヘッダー分だけアンカーの停止位置を下げる（ブラウザ標準の #hash 遷移も全部安定） */
html {
  scroll-padding-top: calc(var(--header-h, 80px) + 16px);
}

/* どのidに飛んでもズレないように（対象を絞りたいなら #program,#registration だけでもOK） */
[id] {
  scroll-margin-top: calc(var(--header-h, 80px) + 16px);
}
/* =========================
   Purpose block (smart list)
========================= */

.purpose-block{
  margin: 24px auto 0;
  padding: 22px 22px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  backdrop-filter: blur(6px);
}

/* ulを“きれいなカード内リスト”に */
.purpose-block > ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

/* liを1項目ずつカードっぽく */
.purpose-block > ul > li{
  position: relative;
  padding: 14px 14px 14px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.06);
  line-height: 1.85;
  letter-spacing: .02em;
  color: rgba(0,0,0,.82);
}

/* 左のアクセントバー（上品に） */
.purpose-block > ul > li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,160,150,.95), rgba(0,120,90,.95));
  opacity: .9;
}

/* strong（見出し）を“タグ”風に */
.purpose-block strong{
  display: inline-block;
  padding: 2px 10px;
  margin-right: 6px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95em;
  color: rgba(0,80,60,.95);
  background: rgba(0,160,150,.12);
  border: 1px solid rgba(0,160,150,.22);
  vertical-align: baseline;
}

/* 余白の微調整：文末が詰まらないように */
.purpose-block > ul > li:last-child{
  margin-bottom: 0;
}

/* hoverで“少しだけ”浮く（やりすぎない） */
.purpose-block > ul > li:hover{
  transform: translateY(-1px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.10);
}

/* モバイル */
@media (max-width: 600px){
  .purpose-block{
    padding: 18px 14px 14px;
    border-radius: 14px;
  }
  .purpose-block > ul > li{
    padding: 12px 12px 12px 16px;
  }
}

/* 登録カード：ヘッダー内を縦積みにして、注記を一段下へ */
.register-card2-head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px; /* バッジと注記の間隔 */
}

/* 注記をバッジの直下に、少し控えめな見た目に */
.register-head-note{
  margin: 0;              /* 余計な余白を消す */
  font-size: 0.9rem;
  opacity: 0.85;
  line-height: 1.4;
}

/* CMAロゴ（Program用：小さめ・上品・崩れにくい） */
.program-text .cma-badge,
.program-affil .cma-badge{
  height: 1.05em;
  width: auto;
  vertical-align: -0.12em;
  margin-right: .28em;
  opacity: .95;
  display: inline-block;
}

/* スラッシュの詰め（見た目の間隔を整える） */
.program-text .cma-slash,
.program-affil .cma-slash{
  margin-right: .4em;
  opacity: .7;
}

/* 言語切替リンクだけ下線を無効化 */
.lang-switch a{
  text-decoration: none;
}
.lang-switch a:hover,
.lang-switch a:focus-visible{
  text-decoration: none;
}
.lang-switch a{
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: border-color .15s ease, background-color .15s ease;
}

.lang-switch a:hover,
.lang-switch a:focus-visible{
  border-color: rgba(15, 23, 42, .22);
  background: rgba(15, 23, 42, .03);
}

/* モーダル内の写真枠 */
.modal-photo{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}
.modal-photo.is-empty{
  background-image: none !important;
}
/* ===== Modal scroll fix (bioが長い時にスクロールできるように) ===== */

/* モーダル外はスクロール禁止のままでOK（JSで body overflow:hidden してる前提） */

/* パネル自体を画面内に収め、縦方向は中でスクロールさせる */
#modal-speaker .modal-panel{
  max-height: min(86vh, 760px);   /* 画面に収める */
  overflow: hidden;              /* パネル外へはみ出させない */
  display: flex;
  flex-direction: column;
}

/* ヘッダーは固定（上に残す） */
#modal-speaker .modal-head{
  flex: 0 0 auto;
}

/* 本文エリアが伸びて、余った分だけスクロールする */
#modal-speaker .modal-body{
  flex: 1 1 auto;
  overflow: hidden;              /* スクロールはbio側に寄せる */
  min-height: 0;                 /* flexのスクロールに必須 */
  display: flex;
  flex-direction: column;
}

/* bioだけスクロールさせる（ここが肝） */
#modal-speaker #modal-speaker-bio,
#modal-speaker .modal-bio{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  padding-right: 6px;            /* スクロールバー分の見切れ防止 */
}

/* もしbioの改行が詰まりすぎる場合 */
#modal-speaker .modal-bio{
  line-height: 1.8;
}


.modal-speaker-namewrap{
  display:flex;
  align-items:center;
  gap:10px;
}

.modal-speaker-badges .cma-badge{
  width: 34px;  /* お好みで 28〜40px */
  height: auto;
  display:block;
}
/* モーダルの名前行：右にCMAロゴを並べる */
#modal-speaker [data-speaker-name],
#modal-speaker #modal-speaker-name{
  display: inline-flex;
  align-items: center;
  gap: 10px;            /* 名前とロゴの間 */
}

/* CMAロゴ：少し大きく */
#modal-speaker .cma-badge{
  width: 48px;          /* ここを 26〜32px で好みに */
  display: inline-block;
  vertical-align: middle;
  transform: translateY(1px); /* 微調整（不要なら消してOK） */
}
.cma-badge{
  width: 34px;
  height: auto;
  margin-left: .4em;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* 写真枠を丸（角丸）にする */
.speaker-photo{
  width: 72px;          /* 既存に合わせてOK */
  height: 72px;
  border-radius: 16px; /* 丸。角丸だけなら 16px などでもOK */
  overflow: hidden;     /* ここが重要：画像を枠で切る */
}

/* 画像を枠にフィットさせる */
.speaker-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Hero CTA：太さを戻す＋ボタンを「パネルの半分」くらいまで伸ばす ===== */
.hero-cta{
  display:flex;
  gap: 18px;                 /* ボタン間はしっかり */
  margin-top: 18px;
  align-items: center;

  /* ← ボタン全体の最大幅を“パネル”に合わせる（必要なら調整） */
  max-width: 620px;          /* パネル幅の半分×2 + gap 程度を想定 */
}

.hero-cta .btn{
  /* 2つのボタンが“半分ずつ”になる */
  flex: 1 1 0;
  min-width: 0;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 16px 22px;
  font-size: 1.12rem;
  font-weight: 700;          /* ← 太すぎを解消（読める） */
  letter-spacing: .02em;
  line-height: 1.1;

  border-radius: 999px;

  box-shadow: 0 16px 36px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.28);

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.hero-cta .btn:hover,
.hero-cta .btn:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(0,0,0,.24);
  filter: saturate(1.06) contrast(1.06);
}

/* 矢印：太くしすぎない／見やすい */
.hero-cta .btn-arrow{
  display:inline-block;
  margin-left: .6em;
  font-size: 1.25em;
  font-weight: 700;
  transform: translateY(.02em);
  transition: transform .18s ease;
}
.hero-cta .btn:hover .btn-arrow,
.hero-cta .btn:focus-visible .btn-arrow{
  transform: translate(5px, .02em);
}

/* 色はコントラスト強めのまま（必要なら調整） */
.hero-cta .btn-cta-warm{
  color:#fff;
  background: linear-gradient(135deg, #ff8a2a 0%, #e24a1a 100%);
}
.hero-cta .btn-cta-green{
  color:#fff;
  background: linear-gradient(135deg, #2ea79a 0%, #16786d 100%);
}

/* スマホは縦積み */
@media (max-width: 640px){
  .hero-cta{
    max-width: 100%;
    flex-direction: column;
    gap: 12px;
  }
  .hero-cta .btn{
    width: 100%;
  }
}
/* HTMLの矢印文字を変えるなら：→ を › または ➜ に */

/* ===========================
   registration CTA を hero と同じ挙動に
=========================== */

/* hover/focus（heroと同じ） */
.register-cta .btn:hover,
.register-cta .btn:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(0,0,0,.24);
  filter: saturate(1.06) contrast(1.06);
}

/* 矢印（heroと同じ） */
.register-cta .btn-arrow{
  display:inline-block;
  margin-left: .6em;
  font-size: 1.25em;
  font-weight: 700;
  transform: translateY(.02em);
  transition: transform .18s ease;
}
.register-cta .btn:hover .btn-arrow,
.register-cta .btn:focus-visible .btn-arrow{
  transform: translate(5px, .02em);
}

/* registration用：暖色 / 緑（heroと同じ見た目） */
.register-cta .btn-cta-warm{
  color:#fff;
  background: linear-gradient(135deg, #ff8a2a 0%, #e24a1a 100%);
}
.register-cta .btn-cta-green{
  color:#fff;
  background: linear-gradient(135deg, #2ea79a 0%, #16786d 100%);
}

/* サイズ：カードの「半分くらい」まで伸ばす（ここだけ調整ポイント） */
.register-cta .btn{
  width: min(520px, 100%);   /* ←大きさはここで調整 */
  padding: 20px 20px;
  border-radius: 999px;
  font-weight: 650;
  text-decoration: none;
}
/* registration CTA の文字を大きく */
.register-cta .btn{
  font-size: 1.08rem;   /* まずはこれ */
  line-height: 1.2;
}
/* スマホ：縦積みで100%（heroと同じ考え方） */
@media (max-width: 640px){
  .register-cta{
    flex-direction: column;
    gap: 12px;
  }
  .register-cta .btn{
    width: 100%;
  }
}

/* KV内リンクだけ、洗練されたリンク表現に */
.kv .kv-val a{
  display: inline-flex;
  align-items: baseline;
  gap: .35em;

  color: rgba(15,23,42,.86);
  text-decoration: none;

  border-bottom: 1px solid rgba(46,167,154,.35); /* うっすら下線 */
  padding-bottom: .08em;

  transition: color .18s ease, border-color .18s ease, transform .18s ease, background-color .18s ease;
  border-radius: 8px;
}

/* 外部リンクっぽく矢印（控えめ） */
.kv .kv-val a::after{
  content: "↗";
  font-size: .95em;
  opacity: .75;
  transform: translateY(-.02em);
  transition: transform .18s ease, opacity .18s ease;
}

/* hover/focus */
.kv .kv-val a:hover,
.kv .kv-val a:focus-visible{
  color: rgba(15,23,42,.95);
  border-color: rgba(46,167,154,.75);
  background: rgba(46,167,154,.10); /* うっすらハイライト */
  transform: translateY(-1px);
  outline: none;
}

.kv .kv-val a:hover::after,
.kv .kv-val a:focus-visible::after{
  opacity: 1;
  transform: translate(2px,-.02em);
}

/* 押したとき */
.kv .kv-val a:active{
  transform: translateY(0);
  background: rgba(46,167,154,.14);
}
/* アクセス：リスト文字を少し小さく（このブロックだけ） */
.access-card .access-list{
  font-size: .95rem;     /* 少し小さく */
  line-height: 1.75;     /* 読みやすさ維持 */
}

/* ついでに行間/間隔を整えたい場合（不要なら削除OK） */
.access-card .access-list li{
  margin: .35em 0;
}

/* アクセス内のリンクを「概要(KV)リンク」と同じ雰囲気に */
.access-card a{
  display: inline-flex;
  align-items: baseline;
  gap: .35em;

  color: rgba(15,23,42,.86);
  text-decoration: none;

  border-bottom: 1px solid rgba(46,167,154,.35);
  padding-bottom: .08em;

  transition: color .18s ease, border-color .18s ease, transform .18s ease, background-color .18s ease;
  border-radius: 8px;
}

.access-card a::after{
  content: "↗";
  font-size: .95em;
  opacity: .75;
  transform: translateY(-.02em);
  transition: transform .18s ease, opacity .18s ease;
}

.access-card a:hover,
.access-card a:focus-visible{
  color: rgba(15,23,42,.95);
  border-color: rgba(46,167,154,.75);
  background: rgba(46,167,154,.10);
  transform: translateY(-1px);
  outline: none;
}

.access-card a:hover::after,
.access-card a:focus-visible::after{
  opacity: 1;
  transform: translate(2px,-.02em);
}

.access-card a:active{
  transform: translateY(0);
  background: rgba(46,167,154,.14);
}

/* program内のリンクを「概要(KV)リンク」と同じ雰囲気に */
/* アクセス内のリンクを「概要(KV)リンク」と同じ雰囲気に */
.program-meta a{
  display: inline-flex;
  align-items: baseline;
  gap: .35em;

  color: rgba(15,23,42,.86);
  text-decoration: none;

  border-bottom: 1px solid rgba(46,167,154,.35);
  padding-bottom: .08em;

  transition: color .18s ease, border-color .18s ease, transform .18s ease, background-color .18s ease;
  border-radius: 8px;
}

.program-meta a::after{
  content: "↗";
  font-size: .95em;
  opacity: .75;
  transform: translateY(-.02em);
  transition: transform .18s ease, opacity .18s ease;
}

.program-meta a:hover,
.program-meta a:focus-visible{
  color: rgba(15,23,42,.95);
  border-color: rgba(46,167,154,.75);
  background: rgba(46,167,154,.10);
  transform: translateY(-1px);
  outline: none;
}

.program-meta a:hover::after,
.program-meta a:focus-visible::after{
  opacity: 1;
  transform: translate(2px,-.02em);
}

.program-meta a:active{
  transform: translateY(0);
  background: rgba(46,167,154,.14);
}


/* =========================
   EN page only: fix long kv-key
   ========================= */
html[lang="en"] #overview .kv-row{
  grid-template-columns: 170px 1fr; /* ← key列を少し広げる（好みで160-190px） */
  align-items: start;               /* ← keyが2行になっても右側がズレない */
}

html[lang="en"] #overview .kv-key{
  white-space: normal;   /* ← nowrap を解除して自然に折り返す */
  line-height: 1.25;
  letter-spacing: 0;     /* ← 英語は詰めすぎると読みにくい＆幅も増える */
}

/* 「Registration<br>Deadline」など改行入りキーの見た目を安定 */
html[lang="en"] #overview .kv-key br{
  content: "";
}
/* =========================
   spacing utilities (Bootstrap風)
   mg = margin, pd = padding
   0〜5（必要なら増やせます）
========================= */

/* margin: all */
.mg-0{ margin:0!important; }
.mg-1{ margin:.25rem!important; }
.mg-2{ margin:.5rem!important; }
.mg-3{ margin:1rem!important; }
.mg-4{ margin:1.5rem!important; }
.mg-5{ margin:3rem!important; }

/* padding: all */
.pd-0{ padding:0!important; }
.pd-1{ padding:.25rem!important; }
.pd-2{ padding:.5rem!important; }
.pd-3{ padding:1rem!important; }
.pd-4{ padding:1.5rem!important; }
.pd-5{ padding:3rem!important; }

/* margin/padding: x方向（左右） */
.mgx-0{ margin-left:0!important; margin-right:0!important; }
.mgx-1{ margin-left:.25rem!important; margin-right:.25rem!important; }
.mgx-2{ margin-left:.5rem!important; margin-right:.5rem!important; }
.mgx-3{ margin-left:1rem!important; margin-right:1rem!important; }
.mgx-4{ margin-left:1.5rem!important; margin-right:1.5rem!important; }
.mgx-5{ margin-left:3rem!important; margin-right:3rem!important; }

.pdx-0{ padding-left:0!important; padding-right:0!important; }
.pdx-1{ padding-left:.25rem!important; padding-right:.25rem!important; }
.pdx-2{ padding-left:.5rem!important; padding-right:.5rem!important; }
.pdx-3{ padding-left:1rem!important; padding-right:1rem!important; }
.pdx-4{ padding-left:1.5rem!important; padding-right:1.5rem!important; }
.pdx-5{ padding-left:3rem!important; padding-right:3rem!important; }

/* margin/padding: y方向（上下） */
.mgy-0{ margin-top:0!important; margin-bottom:0!important; }
.mgy-1{ margin-top:.25rem!important; margin-bottom:.25rem!important; }
.mgy-2{ margin-top:.5rem!important; margin-bottom:.5rem!important; }
.mgy-3{ margin-top:1rem!important; margin-bottom:1rem!important; }
.mgy-4{ margin-top:1.5rem!important; margin-bottom:1.5rem!important; }
.mgy-5{ margin-top:3rem!important; margin-bottom:3rem!important; }

.pdy-0{ padding-top:0!important; padding-bottom:0!important; }
.pdy-1{ padding-top:.25rem!important; padding-bottom:.25rem!important; }
.pdy-2{ padding-top:.5rem!important; padding-bottom:.5rem!important; }
.pdy-3{ padding-top:1rem!important; padding-bottom:1rem!important; }
.pdy-4{ padding-top:1.5rem!important; padding-bottom:1.5rem!important; }
.pdy-5{ padding-top:3rem!important; padding-bottom:3rem!important; }

/* 個別：t r b l（必要な分だけ） */
.mgt-1{ margin-top:.25rem!important; }  .mgt-2{ margin-top:.5rem!important; }  .mgt-3{ margin-top:1rem!important; }
.mgr-1{ margin-right:.25rem!important;} .mgr-2{ margin-right:.5rem!important;} .mgr-3{ margin-right:1rem!important;}
.mgb-1{ margin-bottom:.25rem!important;} .mgb-2{ margin-bottom:.5rem!important;} .mgb-3{ margin-bottom:1rem!important;}
.mgl-1{ margin-left:.25rem!important;}  .mgl-2{ margin-left:.5rem!important;}  .mgl-3{ margin-left:1rem!important;}

.pdt-1{ padding-top:.25rem!important; }  .pdt-2{ padding-top:.5rem!important; }  .pdt-3{ padding-top:1rem!important; }
.pdr-1{ padding-right:.25rem!important;} .pdr-2{ padding-right:.5rem!important;} .pdr-3{ padding-right:1rem!important;}
.pdb-1{ padding-bottom:.25rem!important;} .pdb-2{ padding-bottom:.5rem!important;} .pdb-3{ padding-bottom:1rem!important;}
.pdl-1{ padding-left:.25rem!important;}  .pdl-2{ padding-left:.5rem!important;}  .pdl-3{ padding-left:1rem!important;}

/* ===== Footer: EN only 2 columns ===== */
.page-en .footer-inner{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr; /* 2カラム */
  gap: 18px;
  align-items: start;
}

/* 右寄せ用の既存クラスが邪魔するのでENだけ無効化 */
.page-en .footer-col.footer-right{
  grid-column: 1 / -1;   /* 著作権は下段に回す */
  text-align: right;
  margin-top: 6px;
}
/* ===== Footer: iPad以下は1カラム ===== */
@media (max-width: 768px){
  .footer-inner{
    grid-template-columns: 1fr;  /* 3カラム → 1カラム */
    gap: 1.25rem;
    padding: 2rem 0 1rem;
  }

  /* ENも同様に1カラムへ（上書き） */
  .page-en .footer-inner{
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* 著作権表示も自然に（右寄せ解除して読みやすく） */
  .page-en .footer-col.footer-right{
    grid-column: auto;
    text-align: left;
    margin-top: .25rem;
  }
}
.site-footer{
	padding-bottom: 7rem;
}
/* =========================
   Program Responsive Fix
   ========================= */

/* 1) どの構造でも「横はみ出し」を止める */
#program, .program, .program-section, .program-list, .program-wrap {
  overflow-x: clip; /* だめなら hidden */
}
#program *, .program * {
  min-width: 0;      /* flex内のはみ出し防止 */
  word-break: break-word;
}

/* 2) flex/div構造（時間+本文の2カラム）を縦積みに */
@media (max-width: 900px){
  /* よくある命名にまとめて対応 */
  .program-row, .program-item, .schedule-row, .agenda-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .program-time, .schedule-time, .agenda-time, .time-col {
    width: auto !important;
    flex: none !important;
    font-weight: 700;
    letter-spacing: .01em;
    opacity: .9;
  }

  .program-body, .schedule-body, .agenda-body, .detail-col {
    width: auto !important;
  }
}

/* 3) table構造（<table>）をスマホでカード化 */
@media (max-width: 900px){
  table.program-table, table.schedule, table.agenda {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0 12px; /* 行ごとに余白 */
  }
  table.program-table tr, table.schedule tr, table.agenda tr {
    display: block;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    padding: 12px 14px;
  }
  table.program-table td, table.schedule td, table.agenda td,
  table.program-table th, table.schedule th, table.agenda th {
    display: block;
    width: 100% !important;
    padding: 0 !important;
  }
  /* 時間セルっぽいものを上に */
  table.program-table td:first-child,
  table.schedule td:first-child,
  table.agenda td:first-child{
    margin-bottom: 6px;
    font-weight: 700;
  }
}

/* 4) 長い肩書き・所属が横に伸びないように */
.program-speaker, .speaker, .panelists, .moderator, .role,
.program-body p, .program-body li {
  overflow-wrap: anywhere;
}

/* 5) iPhone級では余白と文字を少し詰める */
@media (max-width: 480px){
  .program-row, .program-item, .schedule-row, .agenda-row {
    gap: 8px !important;
  }
  .program-title, .session-title, .agenda-title {
    font-size: 16px;
    line-height: 1.5;
  }
}

.share-icons{
  display:flex;
  gap:12px;
  align-items:center;
}

.share-link{
  display:inline-flex;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: #ffffff;         /* フッターが白文字ならこれでOK（必要なら外す） */
  opacity:.9;
  transition: opacity .15s ease, transform .15s ease;
}

.share-link:hover{
  opacity:1;
  transform: translateY(-1px);
}

.share-link svg{
  width:100%;
  height:100%;
  display:block;
  fill: currentColor;
}
/* footer share icons - force size */
.footer-share .share-icons{
  display:flex;
  gap:14px;
  align-items:center;
}

.footer-share .share-link{
  display:inline-flex;
  width:40px;      /* ←ここで大きさ調整（例：36〜44） */
  height:40px;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  opacity:.9;
}

.footer-share .share-link:hover{
  opacity:1;
}

.footer-share .share-link svg{
  width:28px;      /* ←アイコン本体サイズ（例：24〜30） */
  height:28px;
  display:block;
  fill: currentColor;
}
.footer-share .share-link--fb svg{
  transform: scale(1.30);   /* ← 1.15〜1.35で調整 */
  transform-origin: 50% 50%;
}
/* link側はそのまま（下線位置を固定） */
.footer-share{
  display:flex;
  align-items:center;
  gap:14px;
}
.footer-share .share-link{
  display:inline-flex;
  align-items:center;
  line-height:1;
}

/* ここがポイント：FBはsvgだけ上げる（下線はそのまま） */
.footer-share .share-link--fb svg{
  position: relative;
  top: -1px; /* -1〜-2pxで微調整 */
}