@charset "UTF-8";
/* ==========================================================================
   医学薬学祭（医薬祭）2026 公式サイト 共通スタイル

   【設計方針】
   ・スマートフォンでの閲覧が中心のため、モバイルファーストで書いています。
     　→ 何も条件が付いていない指定 = スマートフォン用（基準）
     　→ @media (min-width: ○○px) = 画面が広いときだけ上書き
   ・緑基調・高コントラスト・装飾最小・アニメーション最小・角丸は小さめ
   ・タップしやすいよう、押せるものは高さ44px以上を確保しています

   色を変えたい場合は下の :root の変数だけを書き換えれば全ページに反映されます。
   ========================================================================== */

:root{
  /* 配色 */
  --c-bg:         #ffffff;
  --c-bg-subtle:  #f4f6f4;
  --c-green:      #1B5E20;
  --c-green-mid:  #2E7D32;
  --c-green-pale: #E8F5E9;
  --c-text:       #161A16;
  --c-text-muted: #556055;
  --c-border:     #d3dad3;
  --c-warn-bg:    #FFF8E1;
  --c-warn-border:#E6C34A;

  /* 形状 */
  --radius: 3px;
  /* 押せるものの最小サイズ（指でタップしやすい大きさ） */
  --tap: 44px;

  /* 余白（スマホ基準。画面が広いと下で拡張） */
  --pad-x:    16px;
  --gap:      14px;
  --section-y:32px;
  --container:1040px;
}

/* --- リセット ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  /* 追従ヘッダーの分だけ、ページ内リンクの着地位置を下げる */
  scroll-padding-top: 68px;
}
body{
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Noto Sans JP', -apple-system, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  font-size: 16px;   /* スマホで読みやすい基準サイズ。これ以上小さくしないこと */
  line-height: 1.8;
  overflow-wrap: break-word;   /* 長いURLなどで横にはみ出すのを防ぐ */
}
img{ max-width: 100%; height: auto; }
/* hidden属性を常に優先させる（display指定を持つ要素の絞り込み・タブ切替のため） */
[hidden]{ display: none !important; }
h1,h2,h3,p,ul,ol,dl,dd,figure{ margin: 0; }
ul,ol{ padding: 0; list-style: none; }
a{ color: var(--c-green); }
a:hover{ color: var(--c-green-mid); }

/* タップ時の挙動（スマホ）
   ・touch-action: manipulation … タップ後の待ち時間とダブルタップ拡大を無くす
   ・user-select: none … ボタンを押したときに文字が選択されてしまうのを防ぐ
   ・tap-highlight … タップ時の青い塗りつぶしを、控えめな緑の反応に変える */
a, button, select, .tab, .btn{
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(27, 94, 32, .15);
}
button, .tab, .btn, .nav-toggle, .site-logo{
  -webkit-user-select: none;
  user-select: none;
}

/* キーボード操作時のフォーカスを明確にする（アクセシビリティ） */
a:focus-visible,
button:focus-visible,
select:focus-visible{
  outline: 3px solid var(--c-green-mid);
  outline-offset: 2px;
}

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link{
  position: absolute; left: 0; top: -100px;
  background: #fff; color: var(--c-green);
  padding: 12px 16px; z-index: 100; font-weight: 700;
}
.skip-link:focus{ top: 0; }

/* --- ヘッダー ------------------------------------------------------------
   スマホでは画面上部に固定し、どこまでスクロールしてもメニューを開けるようにする */
.site-header{
  background: var(--c-green);
  border-bottom: 3px solid #0e3f13;
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-nav{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 56px;
}
/* ワードマーク。ロゴ画像ができたら <img> に差し替えるだけでよい */
.site-logo{
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .04em;
}
.site-logo:hover{ color: #fff; }
.site-logo img{ display: block; height: 32px; width: auto; }

/* 開閉ボタンはJSが動く環境でのみ表示する（JS無効時はナビを常時展開） */
.nav-toggle{ display: none; }
.js .nav-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: 76px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* スマホ基準: ナビは縦積み。JSが動く場合のみ折りたたむ */
.nav-links{
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 8px;
}
.js .nav-links{ display: none; }
.js .nav-links.is-open{ display: flex; }

.nav-links a{
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  padding: 6px 4px;
  border-top: 1px solid rgba(255,255,255,.25);
}
.nav-links a:hover{ color: #fff; }
.nav-links a[aria-current="page"]{
  color: #fff;
  font-weight: 700;
  padding-left: 12px;
  border-left: 4px solid #fff;
}

/* --- ヒーロー ------------------------------------------------------------ */
.hero{
  background: var(--c-green);
  color: #fff;
  padding: 32px 0 36px;
}
.hero-theme{
  display: inline-block;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: var(--radius);
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 14px;
}
/* テーマは文字組みで強く見せる（装飾エフェクトは使わない）
   clamp = 最小 / 画面幅に応じた可変 / 最大 */
.hero-catch{
  font-size: clamp(21px, 7vw, 34px);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.35;
  margin-bottom: 12px;
}
.hero-title{
  font-size: clamp(20px, 5.4vw, 34px);
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 16px;
}
.hero-meta{
  font-size: 15px;
  line-height: 2;
  border-top: 1px solid rgba(255,255,255,.35);
  padding-top: 14px;
  max-width: 700px;
}
.hero-actions{
  margin-top: 20px;
  display: grid;      /* スマホでは縦積み・横幅いっぱい */
  gap: 10px;
}

/* --- ページ見出し（下層ページ） ------------------------------------------ */
.page-hero{
  background: var(--c-green);
  color: #fff;
  padding: 24px 0 26px;
}
.page-hero h1{
  font-size: clamp(21px, 5.6vw, 28px);
  font-weight: 700;
  line-height: 1.45;
}
.page-hero p{ margin-top: 6px; font-size: 15px; }

/* --- ボタン -------------------------------------------------------------- */
.btn{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 50px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
}
.btn-primary{ background: #fff; color: var(--c-green); border-color: #fff; }
.btn-primary:hover{ background: var(--c-green-pale); color: var(--c-green); }
.btn-outline{ background: transparent; color: #fff; border-color: #fff; }
.btn-outline:hover{ background: rgba(255,255,255,.14); color: #fff; }
/* 白背景セクション上で使うアウトラインボタン（協賛募集ページなど） */
.btn-outline-green{
  display: inline-flex;
  min-height: var(--tap);
  padding: 8px 22px;
  background: #fff;
  color: var(--c-green);
  border-color: var(--c-green);
}
.btn-outline-green:hover{ background: var(--c-green-pale); color: var(--c-green); }
.btn-sm{ min-height: 40px; padding: 8px 20px; font-size: 14px; }

/* --- セクション ---------------------------------------------------------- */
.section{ padding: var(--section-y) 0; border-bottom: 1px solid var(--c-border); }
.section:last-of-type{ border-bottom: 0; }
.section--subtle{ background: var(--c-bg-subtle); }

.section-title{
  font-size: clamp(19px, 5vw, 23px);
  font-weight: 700;
  color: var(--c-green);
  padding-bottom: 8px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--c-green);
}
.section-lead{ margin-bottom: 18px; color: var(--c-text-muted); font-size: 15px; }
.section-lead--after{ margin-top: 18px; margin-bottom: 0; }

/* --- 定義テーブル（開催概要・お問い合わせ） ------------------------------
   スマホ基準: 表を縦積みにして、項目名→内容の順に読ませる */
.data-table{
  width: 100%;
  border-collapse: collapse;
  display: block;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.data-table tbody{ display: block; }
.data-table tr{
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
}
.data-table tr:last-child{ border-bottom: 0; }
.data-table th,
.data-table td{
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
  line-height: 1.8;
}
.data-table th{
  color: var(--c-green);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.data-table td{ font-size: 16px; }
/* 表の中のリンク（電話・メール・SNS）はタップしやすいよう高さを確保する */
.data-table td a{
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 2px 0;
}
.data-table td .note{
  display: block;
  font-size: 13px;
  color: var(--c-text-muted);
  line-height: 1.7;
}

/* --- 情報カード（トップの3項目） ----------------------------------------- */
.info-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.info-block{
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-green);
  border-radius: var(--radius);
  padding: 16px;
  background: #fff;
}
.info-block h3{
  font-size: 17px;
  font-weight: 700;
  color: var(--c-green);
  margin-bottom: 6px;
}
.info-block p{ font-size: 15px; line-height: 1.85; }

/* --- 地図 ---------------------------------------------------------------- */
.access-map{
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}
.access-map iframe{
  width: 100%;
  height: clamp(240px, 60vw, 380px);
  border: 0;
}

/* --- SNS ----------------------------------------------------------------- */
.sns-links{ display: grid; gap: 10px; }
.sns-links a{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 2px solid var(--c-green);
  border-radius: var(--radius);
  color: var(--c-green);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 6px 16px;
  background: #fff;
}
.sns-links a:hover{ background: var(--c-green); color: #fff; }

/* --- 準備中・注意書き ---------------------------------------------------- */
.empty-state{
  border: 1px dashed var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-subtle);
  color: var(--c-text-muted);
  padding: 28px 16px;
  text-align: center;
  font-size: 15px;
}
.empty-state strong{ display: block; color: var(--c-text); font-size: 17px; margin-bottom: 6px; }

.notice{
  border: 1px solid var(--c-warn-border);
  border-left: 4px solid var(--c-warn-border);
  border-radius: var(--radius);
  background: var(--c-warn-bg);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 18px;
}

/* --- タブ（タイムテーブル） ----------------------------------------------
   タブはJSが動く環境でのみ表示する。JS無効時はタブを出さず、
   両日のタイムテーブルをそのまま縦に並べて表示する（情報が欠けない）。
   スマホ基準: 2つのタブを画面幅いっぱいに等分する */
.tabs{ display: none; }
.js .tabs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}
.tab{
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  min-height: 48px;
  padding: 6px 8px;
  border: 2px solid var(--c-green);
  border-radius: var(--radius);
  background: #fff;
  color: var(--c-green);
  cursor: pointer;
}
.tab:hover{ background: var(--c-green-pale); }
.tab[aria-selected="true"]{ background: var(--c-green); color: #fff; }

/* --- タイムテーブル ------------------------------------------------------
   スマホ基準: 表組みをやめて、1企画=1ブロックの縦並びにする */
.day-block{ margin-bottom: 28px; }
.day-block:last-child{ margin-bottom: 0; }
.day-heading{
  font-size: 18px;
  font-weight: 700;
  color: var(--c-green);
  border-left: 5px solid var(--c-green);
  padding-left: 10px;
  margin-bottom: 2px;
}
.day-sub{ font-size: 14px; color: var(--c-text-muted); margin-bottom: 12px; }

.tt-table{ width: 100%; display: block; }
.tt-table caption{
  display: block;
  text-align: left;
  font-weight: 700;
  padding: 8px 12px;
  background: var(--c-green-pale);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--c-green);
  margin-bottom: 10px;
}
/* 見出し行はスマホでは読み上げ用に隠す（内容は各ブロックで自明） */
.tt-table thead{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.tt-table tbody{ display: block; }
.tt-table tr{
  display: block;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-green);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.tt-table td{
  display: block;
  border: 0;
  padding: 0;
}
.tt-table td:empty{ display: none; }
.tt-time{
  font-size: 15px;
  font-weight: 700;
  color: var(--c-green);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
.tt-name{
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
}

.badge{
  display: inline-block;
  margin-top: 6px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border: 1px solid var(--c-warn-border);
  background: var(--c-warn-bg);
  color: #7a5c00;
  white-space: nowrap;
}

/* --- 出展情報 ------------------------------------------------------------
   絞り込みUIもJSが動く環境でのみ表示（JS無効時は全件表示のまま） */
.filter-bar{ display: none; }
.js .filter-bar{
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}
.filter-bar label{ font-size: 14px; font-weight: 700; color: var(--c-green); }
.filter-count{
  font-size: 14px;
  color: var(--c-text-muted);
  margin-bottom: 16px;
}
.filter-bar select{
  font-family: inherit;
  /* 16px未満にすると、iPhoneでタップ時に画面が勝手に拡大するため下げないこと */
  font-size: 16px;
  min-height: 48px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--c-text);
}

.exh-grid{
  display: grid;
  /* min() を使い、画面が300px未満でも横にはみ出さないようにする */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--gap);
}
.exh-card{
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 画像枠。各企画に1枚ずつ掲載する前提。
   画像が未設置・読み込み失敗のときは自動でプレースホルダーに差し替わる（js/main.js） */
.exh-image{
  aspect-ratio: 4 / 3;
  background: var(--c-bg-subtle);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.exh-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.exh-image .img-placeholder{
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text-muted);
  text-align: center;
  padding: 12px;
}
.exh-body{
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.exh-group{
  font-size: 14px;
  color: var(--c-text-muted);
  margin-bottom: 8px;
}
.exh-cat{
  align-self: flex-start;
  background: var(--c-green);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.exh-name{ font-size: 18px; font-weight: 700; color: var(--c-green); margin-bottom: 8px; }
.exh-meta{
  font-size: 14px;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 8px 0;
  margin-bottom: 8px;
}
.exh-meta div{ display: flex; gap: 8px; }
.exh-meta dt{ color: var(--c-text-muted); min-width: 4.5em; }
.exh-meta dd{ margin: 0; font-weight: 500; }
.exh-desc{ font-size: 15px; line-height: 1.85; }
.exh-sns{ margin-top: 10px; }
.exh-sns a{
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 15px;
  font-weight: 700;
}

/* --- 協賛企業ロゴ -------------------------------------------------------- */
.tier-block{ margin-bottom: 30px; }
.tier-block:last-child{ margin-bottom: 0; }
.tier-heading{
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.tier-heading h3{ font-size: 17px; font-weight: 700; color: var(--c-green); }
.tier-heading span{ font-size: 13px; color: var(--c-text-muted); }

.sponsor-grid{ display: flex; flex-wrap: wrap; gap: var(--gap); }
/* 掲載枠のサイズは協賛メニューの規定値（大150 / 中104 / 小66）。
   狭い画面でも規定サイズを保ちつつ、はみ出さないよう max-width で保険をかける */
.sponsor-grid--large  .sponsor-cell{ width: 150px; height: 150px; }
.sponsor-grid--medium .sponsor-cell{ width: 104px; height: 104px; }
.sponsor-grid--small  .sponsor-cell{ width: 66px;  height: 66px; }

.sponsor-cell{
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  padding: 6px;
  text-decoration: none;
  overflow: hidden;
}
a.sponsor-cell:hover{ border-color: var(--c-green); }
.sponsor-cell img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sponsor-cell .placeholder{
  font-size: 11px;
  line-height: 1.4;
  color: var(--c-text-muted);
  text-align: center;
  word-break: break-all;
}

/* --- 協賛募集ページ：ごあいさつ文 ----------------------------------------- */
.letter-date{ text-align: right; font-size: 14px; color: var(--c-text-muted); margin-bottom: 4px; }
.letter-from{ text-align: right; font-size: 14px; line-height: 1.9; margin-bottom: 20px; }
.letter-body p{ margin-bottom: 14px; }
.letter-body p:last-child{ margin-bottom: 0; text-align: right; }

/* --- 協賛募集ページ：協賛メニュー（カード形式） --------------------------
   単品メニュー・パッケージメニューの両方で使う共通カード */
.plan-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.plan-card{
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  padding: 18px;
}
.plan-card--package{ border-top: 3px solid var(--c-green); }
.plan-card-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.plan-card-name{ font-size: 17px; font-weight: 700; color: var(--c-green); }
.plan-card-unit{ font-size: 13px; color: var(--c-text-muted); }
.plan-card-price{ font-size: 24px; font-weight: 700; color: var(--c-green); margin-bottom: 10px; }
.plan-card-price small{ font-size: 13px; font-weight: 500; color: var(--c-text-muted); }
.plan-card ul{ margin: 0; }
.plan-card li{
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.9;
}
.plan-card li::before{
  content: "";
  position: absolute; left: 3px; top: 12px;
  width: 6px; height: 6px;
  background: var(--c-green);
  border-radius: 50%;
}
.plan-card-note{ margin-top: 10px; font-size: 12.5px; color: var(--c-text-muted); }

@media (min-width: 600px){
  .plan-grid--package{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px){
  .plan-grid--package{ grid-template-columns: repeat(3, 1fr); }
}

/* --- 協賛募集ページ：アイコンサイズ確認ウィジェット ----------------------- */
.icon-check{
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-subtle);
  padding: 18px;
}
.icon-check-block{ margin-bottom: 26px; }
.icon-check-block:last-child{ margin-bottom: 0; }
.icon-check h3{ font-size: 16px; font-weight: 700; color: var(--c-green); margin-bottom: 6px; }
.icon-check-block > p{ font-size: 14px; color: var(--c-text-muted); margin-bottom: 16px; }

/* サイズ比較（大・中・小を並べて見せる） */
.size-compare{ display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.size-compare-item{ display: flex; flex-direction: column; align-items: center; gap: 8px; }
.size-mark{
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-muted); font-size: 12px; text-align: center; line-height: 1.4;
}
.size-compare-item[data-tier="large"] .size-mark{ width: 150px; height: 150px; }
.size-compare-item[data-tier="medium"] .size-mark{ width: 104px; height: 104px; }
.size-compare-item[data-tier="small"] .size-mark{ width: 66px; height: 66px; }
.size-compare-label{ font-size: 13px; text-align: center; color: var(--c-text); }

/* 画像アップロード（お手元のロゴでその場確認。送信はしない＝ブラウザ内だけで完結） */
.upload-panel{ display: flex; flex-direction: column; gap: 20px; }
.drop-zone{
  border: 2px dashed var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  padding: 26px 16px;
  text-align: center;
  cursor: pointer;
}
.drop-zone.is-dragover{ background: var(--c-green-pale); border-color: var(--c-green); }
.drop-zone input[type="file"]{ display: none; }
.drop-zone p{ font-size: 14px; color: var(--c-text-muted); margin-bottom: 12px; }
.error-msg{ display: none; margin-top: 10px; color: #b3261e; font-size: 13px; line-height: 1.7; }
.error-msg.is-show{ display: block; }

.mini-preview-row{ display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.mini-preview-col{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mini-tile{
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--c-text-muted); font-size: 12px;
}
.mini-tile img{ width: 100%; height: 100%; object-fit: contain; }
#miniLarge{ width: 150px; height: 150px; }
#miniMedium{ width: 104px; height: 104px; }
#miniSmall{ width: 66px; height: 66px; }
.mini-preview-col-label{ font-size: 11px; color: var(--c-text-muted); }

/* 入稿スペック */
.spec-note{ border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; padding: 14px 16px; }
.spec-note h4{ font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--c-green); }
.spec-note dl{ margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; }
.spec-note dt{ font-size: 12.5px; color: var(--c-text-muted); white-space: nowrap; }
.spec-note dd{ margin: 0; font-size: 12.5px; line-height: 1.8; }

/* 掲載シミュレーション（表示幅の切り替え） */
.sim-controls{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.sim-controls span{ font-size: 13px; color: var(--c-text-muted); }
.sim-btn{
  font-family: inherit; font-size: 13px; font-weight: 700;
  min-height: var(--tap); padding: 0 14px;
  border: 2px solid var(--c-green); border-radius: var(--radius);
  background: #fff; color: var(--c-green); cursor: pointer;
}
.sim-btn:hover{ background: var(--c-green-pale); }
.sim-btn[aria-pressed="true"]{ background: var(--c-green); color: #fff; }

/* 枠が画面より広い場合は横スクロールで確認する（スマホでPC幅を見るときなど） */
.sim-frame-outer{ overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.sim-frame{ border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; }
.sim-frame-inner{ padding: 16px; }
.sim-frame-title{ font-size: 12px; color: var(--c-text-muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }

/* シミュレーション内で「貴社アイコン」を強調表示 */
.sponsor-cell.is-you{ border: 2px solid var(--c-green); }

/* サイズ仕様表（列が多いので、スマホでは横スクロールで確認する） */
.spec-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.spec-table{ width: 100%; min-width: 460px; border-collapse: collapse; }
.spec-table th,
.spec-table td{
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-border);
}
.spec-table thead th{ background: var(--c-green); color: #fff; font-weight: 700; font-size: 13px; }
.spec-table tbody tr:last-child td{ border-bottom: 0; }
.spec-table tbody tr:nth-child(even){ background: var(--c-bg-subtle); }

/* --- フッター ------------------------------------------------------------ */
.site-footer{
  background: var(--c-green);
  color: #fff;
  padding: 28px 0 24px;
  font-size: 14px;
}
.site-footer a{ color: #fff; }
.site-footer-logo{ font-size: 16px; font-weight: 700; letter-spacing: .04em; margin-bottom: 10px; }
/* スマホ基準: リンクは1列。指で押しやすいよう1件44px以上を確保 */
.site-footer-links{
  display: grid;
  grid-template-columns: 1fr;
  padding: 6px 0 10px;
  margin-bottom: 12px;
  border-top: 1px solid rgba(255,255,255,.28);
  border-bottom: 1px solid rgba(255,255,255,.28);
}
.site-footer-links a{
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.site-footer-links li:last-child a{ border-bottom: 0; }
.site-footer-links a:hover{ text-decoration: underline; }
.site-footer-meta{ color: rgba(255,255,255,.85); line-height: 1.9; font-size: 13px; }

/* ==========================================================================
   ここから下は「画面が広いとき」だけの上書き
   ========================================================================== */

/* --- 小型タブレット / 横向きスマホ（600px〜） ---------------------------- */
@media (min-width: 600px){
  :root{ --pad-x: 20px; --gap: 16px; --section-y: 40px; }

  .hero{ padding: 44px 0 48px; }
  .hero-actions{ display: flex; flex-wrap: wrap; }
  .btn{ display: inline-flex; min-height: 48px; padding: 10px 24px; }

  .sns-links{ display: flex; flex-wrap: wrap; }
  .sns-links a{ min-width: 180px; }

  .js .tabs{ display: flex; flex-wrap: wrap; }
  .tab{ padding: 6px 24px; }

  .info-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

  .filter-bar{ align-items: center; }
  .js .filter-bar{ display: flex; flex-wrap: wrap; gap: 10px; }
  .filter-bar select{ width: auto; min-width: 220px; }

  /* フッターリンクを2列に */
  .site-footer-links{ grid-template-columns: 1fr 1fr; column-gap: 20px; }

  .page-hero{ padding: 30px 0 32px; }
  .empty-state{ padding: 40px 20px; }
}

/* --- タブレット〜PC（900px〜） -------------------------------------------
   ここで初めて「横並びナビ」と「本来の表組み」に戻す */
@media (min-width: 900px){
  :root{ --section-y: 48px; }

  /* ナビゲーションを横並びに戻す */
  .site-nav{ min-height: 60px; }
  .site-logo{ font-size: 19px; letter-spacing: .06em; }
  .site-logo img{ height: 34px; }
  .nav-toggle,
  .js .nav-toggle{ display: none; }
  .nav-links,
  .js .nav-links{
    display: flex;
    flex-direction: row;
    width: auto;
    gap: 4px;
    padding-bottom: 0;
  }
  .nav-links a{
    min-height: 0;
    font-size: 15px;
    padding: 10px 14px;
    border-top: 0;
    border-radius: var(--radius);
  }
  .nav-links a:hover{ background: rgba(255,255,255,.14); }
  .nav-links a[aria-current="page"]{
    background: #fff;
    color: var(--c-green);
    padding-left: 14px;
    border-left: 0;
  }

  .hero{ padding: 56px 0 60px; }
  .hero-theme{ font-size: 13px; padding: 4px 14px; margin-bottom: 20px; }
  .hero-catch{ letter-spacing: .22em; margin-bottom: 16px; }
  .hero-meta{ font-size: 16px; padding-top: 16px; }

  /* 開催概要・連絡先を本来の2列テーブルに戻す */
  .data-table{ display: table; border-radius: 0; }
  .data-table tbody{ display: table-row-group; }
  .data-table tr{ display: table-row; padding: 0; border-bottom: 0; }
  .data-table th,
  .data-table td{
    display: table-cell;
    width: auto;
    border: 1px solid var(--c-border);
    padding: 13px 16px;
    vertical-align: top;
    font-size: 15px;
  }
  .data-table th{
    background: var(--c-bg-subtle);
    white-space: nowrap;
    width: 210px;
    font-size: 15px;
    margin-bottom: 0;
  }
  .data-table td a{ min-height: 0; padding: 0; }

  /* タイムテーブルを本来の表組みに戻す */
  .tt-table{ display: table; border-collapse: collapse; border: 1px solid var(--c-border); }
  .tt-table caption{
    display: table-caption;
    border: 1px solid var(--c-border);
    border-bottom: 0;
    border-radius: 0;
    margin-bottom: 0;
    padding: 10px 12px;
  }
  .tt-table thead{
    position: static; width: auto; height: auto;
    overflow: visible; clip: auto;
  }
  .tt-table tbody{ display: table-row-group; }
  .tt-table tr{
    display: table-row;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
  }
  .tt-table th,
  .tt-table td{
    display: table-cell;
    border: 1px solid var(--c-border);
    padding: 12px 14px;
    text-align: left;
    font-size: 15px;
    vertical-align: middle;
  }
  .tt-table td:empty{ display: table-cell; }
  .tt-table thead th{
    background: var(--c-green);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
  }
  .tt-table tbody tr:nth-child(even){ background: var(--c-bg-subtle); }
  .tt-time{ white-space: nowrap; width: 150px; font-size: 15px; }
  .tt-name{ font-size: 15px; font-weight: 500; }
  .badge{ margin-top: 0; }

  .day-block{ margin-bottom: 40px; }
  .day-heading{ font-size: 19px; padding-left: 12px; }

  .site-footer{ padding: 36px 0 28px; }
  .site-footer-logo{ font-size: 17px; margin-bottom: 14px; }
  .site-footer-links{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 16px 0;
    margin-bottom: 14px;
  }
  .site-footer-links a{ min-height: 0; border-bottom: 0; font-size: 14px; }
  .site-footer-meta{ font-size: 14px; }

  .exh-sns a{ min-height: 0; }

  .icon-check{ padding: 24px; }
  .upload-panel{ flex-direction: row; align-items: flex-start; }
  .upload-panel > *{ flex: 1 1 0; min-width: 0; }
  .sim-btn{ min-height: 0; padding: 8px 18px; }
}

/* --- 動きを減らす設定にしている利用者への配慮 ---------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- 印刷 ---------------------------------------------------------------- */
@media print{
  .site-header, .site-footer, .hero-actions, .nav-toggle, .tabs{ display: none; }
  body{ font-size: 12pt; }
  .hero, .page-hero{ background: #fff; color: #000; }
  .tt-table thead th{ background: #eee; color: #000; }
  /* 印刷時は両日とも表示する */
  .day-block[hidden]{ display: block !important; }
}