/* === Scroll Snap: 1画面=1セクション（PC/スマホ両対応） === */

:root{
  /* 必要ならテーマ色を調整 */
  --hamburger-bg: color-mix(in srgb, #fff 78%, transparent);
  --hamburger-bg-hover: color-mix(in srgb, #fff 92%, transparent);
  --hamburger-bg-active: #fff;
  --hamburger-ring: #4fd8c9;  /* フォーカスリング色 */
  --hamburger-bar: #3e3380;   /* 三本線の色（背景が明るいので濃色に） */
  
  --msg-side: 12px;      /* 左右の基本余白 */
  --msg-peek: 20px;      /* 右に覗かせる幅（お好みで） */
  
  --z-header: 1000;
  --z-fab: 1500;
  --z-drawer: 3000;
  --z-hamburger: 3500;
  --z-modal: 3800;
  --z-popup: 3800;

}

.lock-mobile #site{
  width: 390px;          /* 好きなモバイル幅 */
  margin: 0 auto;        /* 中央寄せ */
}

/* 背景は画面いっぱい、内容だけスマホ幅 */
body.lock-mobile { overflow-x: hidden; }
body.lock-mobile #site {
  width: 390px;
  margin: 0 auto;
}


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

html, body {
  height: 100%;
  margin: 0;
  color: #3e3380;
}

body {
  font-family: 'M PLUS 1p', sans-serif;
}
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden; /* 念のため横スクロール防止 */
}

/* 背景を擬似要素で敷く */
body::before {
  content: "";
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; と同じ */
  background: var(--bg-url, url("/bg/001.webp")) no-repeat center center;
  background-size: cover;
  z-index: -1; /* ページの背面に */
}

body.drawer-open .fab {
  opacity: 0;
  pointer-events: none; /* 押せなくする */
  transition: opacity .25s ease;
}

/* 画面には出さないが、アクセシビリティツリー/SEOには残す */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* 汎用 */
img{ max-width:100%; height:auto; vertical-align:middle; }

a{ color:#b71b8f; }

a:hover{ text-decoration:underline }

a:hover {
  text-decoration: underline; /* ホバー時に下線表示 */
}

h2 {
  margin-top: 0.2em;   /* 上の余白 少なめ */
  margin-bottom: 0.2em; /* 下の余白 少なめ */
  text-align: center;
}

h3 {
  margin-top: 0.2em;   /* 上の余白 少なめ */
  margin-bottom: 0.2em; /* 下の余白 少なめ */
  text-align: center;
}

h4 {
  margin-top: 0.2em;   /* 上の余白 少なめ */
  margin-bottom: 0.2em; /* 下の余白 少なめ */
  text-align: center;
}

/* === セクション共通 === */
section{
  display: block;          /* grid である必要がなければ block でOK（必要なら grid のままでも可） */
  padding: 0;              /* 好みで */

}

/* === 各セクションの中身 === */

.container{
  width: 100%;
  max-width: 1000px;
  margin-block: 20px;
  margin-inline: auto;
  box-sizing: border-box;
  padding: 20px;
  background: rgba(255, 255, 255, 0.5); /* ← 白を50%の透過に */
  border-radius: 16px;
}


/* ========== star ========== */

  .star-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1300;
    overflow: hidden;
  }
  .shooting-star {
    position: absolute;
    width: 40px;  /* JSで乱数変更 */
    height: auto;
    opacity: 1;   /* 常に不透明 */
    animation: starMove linear forwards;
  }
  /* 右上 → 左下へ、角度ゆるめ（フェードなし） */
  @keyframes starMove {
    0%   { transform: translate(0,0); }
    100% { transform: translate(-120vw, 40vh); }
  }



/* ========== FM ========== */

#FM .fm-video {
  border-bottom: 20px;
}

#FM .container{
  border-radius: 16px;   /* 念のため明示 */
  overflow: hidden;      /* ← ここがポイント（角の外を切る） */
}

/* 内側ラッパーも親の角丸を継承してクリップ */
#FM .fm-video{
  border-radius: inherit;
  overflow: hidden;
}

/* 余計な隙間防止（インライン要素の行間対策） */
#FM .fm-video video{
  display: block;
}

/* ▼ FMは常にヘッダーの下から開始（PC/スマホ共通） */
#FM{
  /* ヘッダー＋セーフエリア分だけ下げる */
  padding-top: calc(var(--header-h, 60px) + var(--safe-top, 0px)) !important;

  /* 画面高からヘッダー分を引いた高さを確保（全画面風でも被らない） */
  min-height: calc(100svh - var(--header-h, 72px)) !important;

  /* パディングを高さ計算に含める */
  box-sizing: border-box !important;

  /* 余白管理はFM側に集約（必要なら値を調整） */
  padding-bottom: clamp(24px, 6svh, 72px);
}

/* ▼ FMのコンテナは角丸＆クリップ（動画がはみ出しても角丸が出る） */
#FM .container{
  border-radius: 16px !important;
  overflow: hidden !important;
  margin-top: 0 !important;        /* 上余白はFMのpadding-topで管理 */
}

/* ▼ 内側もはみ出し防止 */
#FM .fm-video{ border-radius: inherit; overflow: hidden; }
#FM .fm-video video{ display: block; }

/* ▼ 競合しがちな既存指定を“無効化/置き換え”（ある場合だけ効く） */
#FM{
  /* 以前の height や margin-bottom に勝つための保険 */
  height: auto !important;
  margin-bottom: 0 !important;
  /* ヘッダー下に潜る原因になる hidden は禁止 */
  overflow: visible !important;
}


/* ===== PC向け（幅768px以上） ===== */

@media (min-width: 768px) {

  #FM {
    display: flex;
    align-items: center;
    justify-content: center;

    /* ヘッダー高さ分だけ下げる */
    padding-top: var(--header-h, 72px);

    /* 画面高 - ヘッダーのぶんだけ確保 */
    min-height: calc(100svh - var(--header-h, 72px));
    box-sizing: border-box;
  }

  .fm-video {
    width: 100%;
    height: calc((100svh - var(--header-h, 72px)) * 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .fm-video video {
    width: 300px;
    max-height: 80%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}

/* ===== スマホ向け（幅768px未満） ===== */
@media (max-width: 767px) {
  #FM {
    display: flex;
    align-items: center;
    justify-content: center;

    /* ヘッダーにかぶらないように余白を追加 */
    padding-top: calc(var(--header-h, 56px) + var(--safe-top, 0px));
    min-height: calc(100svh - var(--header-h, 86px));
    box-sizing: border-box;
  }


  #FM{
    padding-bottom: clamp(8px, 2svh, 20px); /* 好みで調整OK */
  }
  #FM .container{
    margin-bottom: 0 !important; /* 相殺対策：子側の余白は消す */
  }

  .fm-video {
    width: 100%;
    height: calc((100svh - var(--header-h, 56px)) * 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .fm-video video {
    width: 100%;
    max-height: 80%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}

/* ===== ABOUT ===== */

#ABOUT img {
  width: 80%;   /* 横幅を80％に縮小 */
  height: auto; /* アスペクト比を維持して高さを自動調整 */
  display: block;
  margin: 0 auto; /* 中央寄せ */
}

#ABOUT .note {
  font-size: 0.85em;   /* 少し小さめ（本文より約85％） */
  line-height: 1.6;    /* 読みやすさ確保 */
}

#ABOUT .container .container-title,
#MOSAIC_ART .container .container-title,
#PRINCESS_PROFILES .container .container-title,
#SHOW_TIME .container .container-title,
#MAGAZINE .container .container-title,
#MESSAGE .container .container-title,
#HASHTAG .container .container-title,
#LETS_SHARE .container .container-title,
#SPECIAL_THANKS .container .container-title {
  height: 30px;       /* 高さを固定 */
  width: auto;         /* 縦横比を維持するため横幅は自動 */
  display: block;
  margin: 0 auto;
}

/* =============== MOSAIC_ART  =============== */


#MOSAIC_ART img{
  display: inline-block; /* text-alignの中央寄せを効かせる */
  width: 400px; height: auto; 
}

#mosaicart_img {
  text-align: center;         /* 横方向中央寄せ */
}

#mosaicart_img img {
  max-width: 100%;            /* はみ出さないよう調整 */
  height: auto;               /* 縦横比を維持 */
  display: inline-block;      /* 中央寄せに効かせる */
}

/* モーダル全体 */
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index: var(--z-modal);
  background:rgba(0,0,0,.9);
}

/* × ボタン */
.modal .close {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;       /* タップしやすい大きさ */
  height: 48px;
  line-height: 48px; /* 中央に配置 */
  font-size: 32px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  z-index: 1;
  background: rgba(0,0,0,0.4); /* 背景を薄く敷いて見やすく（任意） */
}

/* hover 時の背景を透明に固定 */
.modal .close:hover {
  background: rgba(0,0,0,0.4); /* ← 元のまま or 完全透明にしたいなら transparent */
}

/* 余白なしで全面フィット */
.modal-content{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:0; margin:0;
}

/* 画像は画面いっぱいに収める（隙間を作らない） */
.modal-content img{
  width:100vw; height:100vh;
  max-width:none; max-height:none;      /* 90%制限を外す */
  object-fit:contain;                    /* 画面内に収める */
  touch-action:none;                     /* ピンチ・ドラッグ用 */
  cursor:grab; transition:transform .15s ease-out;
  
}

/* ===========================
   MAGAZINE（完全スコープ安定版）
   =========================== */
#MAGAZINE{
  --side: clamp(12px, 4vw, 32px);
  --vpad: clamp(8px, 2svh, 20px);
  --peek: clamp(12px, 8vw, 72px); /* 右側だけチラ見え */
  --slide-gap: 16px;
  --z-mag-modal: var(--z-modal, 4000);
}

/* スクロール領域 */
#MAGAZINE .carousel__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* 先頭スライドの左端を揃える */
  scroll-padding-inline: var(--side);

  /* 左右のインセット & 右だけ覗きスペース */
  padding-inline: var(--side);
  padding-inline-end: calc(var(--side) + var(--peek));

  padding-block: var(--vpad);
  max-block-size: 100svh;

  /* スクロールバー非表示 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#MAGAZINE .carousel__viewport::-webkit-scrollbar{ display: none; }

/* トラックは gap で間隔を作る */
#MAGAZINE .carousel__track{
  display: flex;
  gap: var(--slide-gap);
}

/* スライド：幅は常に100%（=1枚表示） */
#MAGAZINE .carousel__slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;

  /* はみ出し対策 */
  min-width: 0;

  /* 拡大できる雰囲気 */
  cursor: zoom-in;
  position: relative; /* 指マークのため */
}

/* 画像はcontainで表示 */
#MAGAZINE .carousel__slide img{
  display: block;
  margin: 0 auto;
  max-inline-size: 100%;
  max-block-size: calc(100svh - var(--vpad) * 2);
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 16px;
  background: transparent;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  min-width: 0;
  image-rendering: auto;
}

/* 掴めるカーソル／ドラッグ中の見た目 */
#MAGAZINE .carousel__viewport { cursor: grab; }
#MAGAZINE .carousel__viewport.is-dragging { cursor: grabbing; }

/* Reduce Motion 対応 */
@media (prefers-reduced-motion: reduce){
  #MAGAZINE .carousel__viewport{ scroll-behavior: auto; }
}

/* ===========================
   MAGAZINE モーダル
   =========================== */
#MAGAZINE .mag-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-mag-modal);
  background: rgba(0,0,0,.8);
  justify-content: center;
  align-items: center;
}
#MAGAZINE .mag-modal.is-open{ display: flex; }

#MAGAZINE .mag-modal__img{
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
}

#MAGAZINE .mag-modal__close{
  position: absolute;
  top: 12px;
  right: 16px;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

/* モーダル開時にbodyを止める */
.body--mag-modal-open{ overflow: hidden; }

/* （任意）前後ボタン・ドット */
#MAGAZINE .carousel__controls{
  position: relative;
  margin-top: 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
#MAGAZINE .carousel__nav{
  all: unset;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(62,51,128,.08);
}
#MAGAZINE .carousel__nav[disabled]{
  opacity: .4;
  pointer-events: none;
}
#MAGAZINE .carousel__dots{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: -8px;
  margin-bottom: 10px;
}
/* ベース（真円） */
#MAGAZINE .carousel__dots .carousel__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  margin: 0 4px;
  cursor: pointer;
  transition: background .2s;
}

/* アクティブ */
#MAGAZINE .carousel__dots .carousel__dot[aria-selected="true"] {
  background: #3e3380;
}

/* フォーカス見やすく（任意） */
#MAGAZINE .carousel__dots .carousel__dot:focus-visible {
  outline: 2px solid #3e3380;
  outline-offset: 2px;
}


/* ===========================
   虫眼鏡マーク（タップヒント）

   
#MAGAZINE .carousel__slide::after{
  content:"";
  position:absolute;
  right:12px;
  bottom:12px;
  inline-size:40px;
  block-size:40px;
  background:url("/img/magnifying_glass.webp") no-repeat center / contain;
  opacity:.6;
  pointer-events:none;
  animation: magTapHintFade 3s ease 800ms forwards; 
}
@keyframes magTapHintFade{
  0%   { opacity:.6; }
  80%  { opacity:.6; }
  100% { opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  #MAGAZINE .carousel__slide::after{
    animation: magTapHintFade 0.01s linear 800ms forwards;
  }
}
   =========================== */

/* ===========================
   MESSAGE 全体
   =========================== */
   
   
.message{
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  gap: 16px;

  /* ★先頭位置合わせ＆右だけ広めに取る */
  padding-block: 8px;
  padding-inline: var(--msg-side);
  padding-inline-end: calc(var(--msg-side) + var(--msg-peek));
  scroll-padding-inline: var(--msg-side);

  overscroll-behavior-x: contain;
  scroll-behavior: smooth;

  /* ★flex 内スクロールの計算安定化 */
  min-width: 0;
}


/* 各ページ（縦2段セット） */
.message-page{
  /* ★1ページ＝画面幅−覗き幅 */
  flex: 0 0 calc(100% - var(--msg-peek));
  scroll-snap-align: start;

  display: grid;
  grid-template-rows: 1fr 1fr;      /* 常に縦2段（=2枚） */
  grid-auto-rows: minmax(120px, 1fr);
  gap: 12px;

  /* ★はみ出し計算の安定化 */
  min-width: 0;
}

/* カード（メッセージ1つ分） */
.message-block {
  background-color: #d6f9fb;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-size: 10px;
  line-height: 1.4;

  display: flex;
  flex-direction: column;
  justify-content: center;   /* 縦方向で中央に寄せる */
  align-items: stretch;      /* 横幅いっぱいを使う */
  padding-inline: 20px;     /* 本文テキストに余白を付与 */
  min-height: 160px;
}



/* 名前（投稿者） */
.message-name {
  text-align: right;         /* 右寄せ */
  margin-top: 4px;           /* 本文との距離を調整 */
  font-size: 10px;
  color: #3e3380;
  font-weight: bold;         /* ← font-style: bold は誤記なので修正 */
  
}



/* ========== スプラッシュ ========== */
#splash {
  position: fixed; inset: 0;
  background: #ffffaf;
  display: flex; justify-content: center; align-items: center;
  z-index: 9999;
  transition: opacity 1s ease;
}
#splash.hidden { opacity: 0; pointer-events: none; }
#splash img { width: 200px; height: auto; }
/* ← ここに余計な } が入っていたら削除すること */

/* ========== セクション別レイアウト（必要最低限だけ残す） ========== */



/* ========== PRINCESS_PROFILES ========== */

#PRINCESS_PROFILES_img {
  display: grid;
  grid-template-columns: 1fr; /* ブロックごとに縦並び */
  gap: 24px; /* ブロック間の余白 */
}

#PRINCESS_PROFILES a {
  text-decoration: underline;
}

.profile-block {
  text-align: center;
}

.profile-block .title {
  font-weight: bold;
  margin-bottom: 8px;
}

.profile-block img {
  width: 45%;    /* 横に2枚並べる */
  margin: 0 4px; /* 間隔 */
  border-radius: 8px;
}

h3.howto {
  margin-bottom: 0.2em;
}

.howto + p {
  margin-top: 0;
}

h3.download {
  margin-bottom: 0.2em;
}

.download + p {
  margin-top: 0;
}

p.note {
  font-size: 0.85em;   /* 親要素の85%くらいの大きさ */
  line-height: 1.4;    /* 読みやすいように行間も少し調整 */
}


/* ========== SHOW TIME ========== */
.showtime {
  background-image: url("/img/SHOWTIME_TikTok_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;

  padding: 40px 20px;
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央（高さがある場合） */
}

/* フレックス子 = a をサイズ指定（ここが“センタリング対象”） */
.showtime > a {
  display: block;
  width: clamp(160px, 50%, 320px); /* 好みで調整: 最小/割合/最大 */
  margin-left: 0px;
}

.showtime img {
  display: block;
  height: 240px;    /* ← 好きな高さに調整 */
  width: auto;      /* アスペクト比を保つ */
  margin: 0 auto;   /* 中央寄せ */
}

.showtime-top{
	margin-top:0px;	
}

.showtime-bottom{
	margin-bottom:0px;	
}



/* ========== HASHTAG ========== */


#HASHTAG.howto {
  margin-bottom: 0.2em;
}

.howto + p {
  margin-top: 0;
}

.hashtag_box {
  background: url("/img/HASHTAG_bg.png") no-repeat center center;
  background-size: contain;     /* 切れずに全部表示 */
  background-color: transparent;
  padding: 20px 30px;
  border-radius: 8px;
  text-align: center;
}
.hashtag_box p {
  padding-top:5px;
  font-weight: bold;
  font-size: 12px;
}

/* ========== LETS_SHARE ========== */

.share {
  display: flex;          /* 横並びにする */
  justify-content: center; /* 中央寄せ */
  align-items: center;    /* 垂直方向も揃える */
  gap: 20px;              /* 画像の間隔（お好みで） */
}

.share img {
  width: 24px;   /* アイコンサイズを揃える（必要なら） */
  height: auto;  /* アスペクト比維持 */
  display: block;
  margin-top:10px;
}
/* ========== SPECIAL_THANKS ========== */

#SPECIAL_THANKS .container {
  text-align: center;
}

#SPECIAL_THANKS .container h3 {
  margin-top: 20px;
  margin-bottom: -5px; 
}

#SPECIAL_THANKS .container h4 {
  margin-top: 10px;
}

#SPECIAL_THANKS .container .lazy img {
  width: 25%;       /* 画像を50%に縮小 */
  height: auto;     /* アスペクト比維持 */
  display: block;   /* ブロック化で中央寄せ可能に */
  margin: 20px auto 0;   /* 上20px、左右auto、下0 */
  
}

/* ========== fotter ========== */

#footer {
  padding-bottom: 80px; /* margin ではなく padding にする */
}
#footer .note{
  text-align: left;	
}
#footer p{
  text-align: center;
}
#footer .container {
  padding-bottom: 10px;  /* デフォルトより小さめに調整 */
}

/* ========== popup ========== */

#popup {
  
  position: fixed;   /* 必須：z-indexを効かせるため */
  z-index: var(--z-popup);
}

/* 見出しを中央揃え */
#popupTitle {
  text-align: center;
  width: 100%;
  margin: 0 0 5px;
}

/* プロフィール画像を中央寄せ */
#taishomaeda_profile {
  display: flex;
  justify-content: center;
  margin: 0 auto 20px; /* ← 下に20px余白 */
}

#taishomaeda_profile img {
  max-width: 240px;   /* サイズはお好みで */
  height: auto;
  border-radius: 12px;
}

#popup .modal-body h2 {
  margin-bottom: 24px;          /* 好きな値に */
}
#popup .modal-body {
  /* 上 右 下 左 */
  padding: var(--modal-pad, 16px) 32px
           calc(var(--modal-pad, 16px) + env(safe-area-inset-bottom, 0px) + 16px)
           32px;
}


/* 右下固定ボタン */
.fab {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-fab);

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

  padding: 0;                 /* ← 画像だけにしたので余白不要 */
  border: none;               /* ← 枠なし */
  background: none;           /* ← 背景透明 */
  cursor: pointer;

  width: clamp(120px, 20vw, 200px);
}

.fab img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateX(4px); /* ← 好きなpxで調整 */
}

/* オーバーレイ（初期は非表示） */
.popup { 
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 1400;
}
.popup.show { display: flex; }

/* モーダル本体 */
.popup-content {
  background: #ffffaf;
  color: #3e3380;
  width: min(92vw, 760px);
  max-height: min(88svh, 720px);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  display: grid;
  grid-template-rows: auto 1fr auto; /* header / body / footer */
}

/* 固定ヘッダー＆フッター */
.modal-header, .modal-footer {
  padding: 14px 18px;
  background: #ffffaf;
}
.modal-header {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 12px;
}
.modal-header h2 { font-size: 18px; margin: 0; }

.close {
  margin-left: auto; border:0; background: transparent; font-size: 24px; cursor: pointer; color: #3e3380;
  line-height: 1; width: 40px; height: 40px; border-radius: 8px;
}
.close:hover { background: #f4f4f4; }



/* 内側スクロール領域 */
.modal-body {
  overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 18px;
}

/* ボタン体裁 */
.btn-primary, .btn-secondary {
  min-height: 40px; padding: 8px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: #111; color: #fff; }
.btn-primary:hover { opacity: .9; }
.btn-secondary { background: #f5f5f5; color: #111; border-color: #ddd; }
.btn-secondary:hover { background: #eee; }

/* スマホは全画面化（安全領域考慮） */
@media (max-width: 768px) {
  .popup-content {
    width: 100vw; max-height: none; height: 100svh; border-radius: 0;
    grid-template-rows: auto 1fr auto;
  }
  .modal-header, .modal-footer {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .modal-body {
    padding-bottom: max(18px, calc(18px + env(safe-area-inset-bottom, 0px)));
  }
}


/* ========== Responsive（コンテナ幅のみ調整。高さは100%維持） ========== */

@media (max-width: 939px) {
   body { font-size: 14px; }
  .container { width: 90%; }

}
@media (max-width: 767px) {
   body { font-size: 14px; }
  .container { width: 90%; }
}
@media (max-width: 393px) and (orientation: portrait) {
   body { font-size: 14px; }
  .container { width: 90%; }
}

/* フェード演出（任意） */
.willfade{ opacity:0; transform:translateY(12px); transition:.6s ease }
.inview{ opacity:1; transform:none }

/* ===== Header ===== */
.site-header{
  position: fixed;       /* ← sticky から fixed に */
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  padding-top: var(--safe-top);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
 /* background: color-mix(in srgb, #000 45%, transparent);*/
 
 /*  width: 390px;          /* ← 幅を390pxに固定 */
 /*  margin: 0 auto;        /* ← 画面中央に配置 */
 
}
.site-header__inner{
  height: var(--header-h);
  display: flex;
  gap: 12px;
  padding-inline: clamp(12px, 3vw, 24px);
  align-items: center;
  justify-content: space-between;
}
width: 390px
/* ロゴ */
.brand img{
  display:block; 
  height:auto; 
  inline-size:auto; 
  margin-top:8px;  
  margin-left:8px;
}
/* ロゴサイズ制御 */
.site-header .brand img {
  max-height: 50px; width: auto; max-width: 150px; object-fit: contain;
}

/* Desktop nav */
.nav-desktop{ display:none; align-items:center; gap: clamp(12px, 1.8vw, 24px); }
.nav-desktop a{
  color:#fff; text-decoration:none; font-weight:600; font-size: clamp(12px, 1.2vw, 14px); opacity:.9;
}
.nav-desktop a:hover{ opacity:1; text-decoration: underline; }

/* PCだけヘッダー背景を消す */
@media (min-width: 992px){
  .site-header{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;    /* 影があれば消す */
  }
  /* 万一、擬似要素で背景を敷いていた場合の保険 */
  .site-header::before,
  .site-header::after{
    content: none !important;
  }
}/* PCだけヘッダー背景を消す */
@media (min-width: 992px){
  .site-header{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;    /* 影があれば消す */
  }
  /* 万一、擬似要素で背景を敷いていた場合の保険 */
  .site-header::before,
  .site-header::after{
    content: none !important;
  }
}

/* ハンバーガーボタン */
.hamburger {
  position: fixed;  /* ← これで画面右上に固定 */
  top: calc(6px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: var(--z-hamburger);

  inline-size: 44px;
  block-size: 44px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  border: none;
  margin: 0;
  padding: 0;
}

/* PCで非表示にされないように */
@media (min-width: 992px) {
  .hamburger { display: flex !important; }
}

/* 二本線 */
.hamburger__bar {
  width: 20px;
  height: 2px;
  background: #3e3380;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

/* 展開時にクロスさせる */
.hamburger[aria-expanded="true"] .hamburger__bar:first-child {
  transform: translateY(4px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__bar:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* Drawer */

.fab {
z-index: var(--z-fab); 
}
.menu-drawer{
  position: fixed; inset: 0; z-index: var(--z-drawer);
  display: grid;
  place-items: end; /* ← ドロワー自体は右下配置のまま（変更不要ならこのままでOK） */
  background: color-mix(in srgb, #000 55%, transparent);
  z-index: var(--z-drawer);
}
.menu-drawer[hidden]{ display:none; }

.menu-drawer__panel{
  position: relative; /* ← 絶対配置の基準にする（必須） */
  width: min(92vw, 480px);
  height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  background: #c6f9e8;
  border-radius: 16px 0 0 16px;
  padding: calc(12px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom));
  translate: 100% 0;
  transition: translate .28s ease;

  /* メニュー（nav）を縦横センターに */
  display: flex;
  flex-direction: column;
  align-items: center;      /* 横中央 */
}
.menu-drawer.is-open .menu-drawer__panel{ translate: 0 0; }

.menu-drawer__close{
  position: absolute;  /* ドロワー右上 */
  top: 12px;
  right: 12px;
  z-index: 4000000;

  /* 見た目：背景なし・白 */
  background: none;
  border: none;
  color: #3e3380;
  font-size: 28px;
  line-height: 1;

  /* タップ領域を確保（44px以上推奨） */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;

  cursor: pointer;
}

.menu-drawer__nav{
	
margin-top:40px;


}

.menu-drawer__nav h2 {
  margin: 0;          /* デフォルト余白を完全になくす */
  padding: 0;         /* 内側余白もゼロ */
  font-size: 18px;    /* 少し小さめにするとさらに詰まった印象に */
  line-height: 1;     /* 行間を最小限に（文字サイズと同じ高さ） */
}


.menu-drawer__nav h2 a {
  color: #3e3380;
  text-decoration: none;
  display: block;
  text-align: center;   /* 中央寄せ */
  font-weight: 700; 
  font-size: clamp(16px, 2.8vw, 20px); 
  text-decoration: none;
  padding: 6px 4px; display: inline-block;
  text-decoration: underline;
}

.menu-drawer__nav a {
  display: inline-block;
  margin: 0 0px;   /* ← 横の間隔を調整（デフォルトはブラウザ依存で大きめ） */
}

.menu-drawer__nav img {
  width: 24px;     /* 必要に応じてサイズ調整 */
  height: auto;
  vertical-align: middle;
}

#global-menu h2.space {
  margin-top: 20px;
}

#global-menu .menu-drawer__panel {
  text-align: center; /* 中央寄せ */
}

#global-menu .menu-drawer__panel img {

  margin: 10px;                 /* アイコンの間隔 */
}

#global-menu h3 {
  color: #3e3380;
}

#global-menu h3.space {
  margin-top: 20px;
}

@media (max-width: 480px) {
  #global-menu .menu-drawer__panel img {
    margin: 5px;                /* 間隔も少し狭める */
  }
}

/* PC表示でデスクトップナビ & ヘッダー80px（要望） */
@media (min-width: 992px){
  :root { --header-h: 80px; }
  .nav-desktop{ display: flex; }
  .hamburger{ display: none; }
}

/* 見出しアンカー時にヘッダーに隠れにくく */
.section__title{ scroll-margin-top: calc(var(--header-h) + 8px); }

#FM {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100svh - 40px); /* スマホで余白が出にくい */

}

#FM .fm-video {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#FM .fm-video video {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
@media (min-width: 768px) {
  #FM {
    margin-top: 20px;
  }
}


/* PC幅で左右余白を少し広げる（中央寄せ最大幅を付けたい場合は max-width を追加） */
@media (min-width: 768px){
  .site-modal__panel{
    left: clamp(32px, 6vw, 64px);
    right: clamp(32px, 6vw, 64px);
  }
  /* 例：最大幅を付けるなら
  .site-modal__panel{ max-width: 960px; margin-inline: auto; }
  */
}

/* === Mobile: ヘッダーを透明（色なし & ぼかしなし） === */
@media (max-width: 991px){
  .site-header{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}