/* ==========================
   Modern Base + Design Tokens
   ========================== */
:root {
  /* brand */
  --color-primary: #ffffff;
  --color-primary-600: #ffffff;
  --color-secondary: #ffffff;
  --color-accent: #ffffff;
  /* surface */
  --color-bg: #0b1220;
  --color-surface: #0f172a; /* slate-900-ish */
  --color-card: #111827; /* gray-900 */
  --color-elev: rgba(255,255,255,0.06);
  /* text */
  --color-text: #e6eaf2;
  --color-text-muted: #a9b3c6;
  /* borders/shadows */
  --border: 1px solid rgba(255,255,255,0.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-1: 0 6px 18px rgba(0,0,0,0.25);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.35);
  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --container: 1200px;
  /* schedule */
  --schedule-time-width: 8.5em; /* 時間ボックス幅 (以前:7em) */
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #f7f9fc;
    --color-surface: #ffffff;
    --color-card: #ffffff;
    --color-elev: rgba(0,0,0,0.06);
    --color-text: #1f2a44;
    --color-text-muted: #5b6b88;
    --border: 1px solid rgba(0,0,0,0.08);
  }
}

/* Reset (minimal) */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
/* 強制的に横スクロールを抑止（根本原因特定用の一時措置。原因特定後に外しても可）*/
html { overflow-x: clip; /* 対応していないブラウザ向け */ overflow-x: hidden; width:100%; }
body, h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding-left: 1.2rem; }
img, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }

/* Base */
body {
  width: 100%;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Mochiy Pop One", sans-serif;
  line-height: 1.7;
}

/* --- Global overflow helpers --- */
/* 任意のラッパーに付与して強制的に横スクロール抑止 */
.no-x-scroll { overflow-x: hidden !important; }
.clip-children { overflow: hidden !important; position: relative; }
/* デバッグ: はみ出している要素を視覚化（コンソール等で document.body.classList.add('debug-overflow')）*/
body.debug-overflow * { outline: 1px solid rgba(255,0,0,0.25); }
body.debug-overflow *:hover { outline-color: rgba(255,0,0,0.6); }

.container {
  /* 100% - 32px は calc() 必須。旧記法は無効値になり得るため修正 */
  width: min(calc(100% - 32px), var(--container));
  margin-inline: auto;
}

/* Sticky translucent header (also used by template/header.html) */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: saturate(120%) blur(10px);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border-bottom: var(--border);
  padding: 10px 0;
  font-size: 18px;
}
@media screen and (max-width: 861px) {
  .header { padding: 14px 0; font-size: 16px; }
}
.pcback_img {
  width: auto;
  height: 100%;
  position: relative;
  top: 0px;
  left: 0px;
  backdrop-filter: blur(40px);
  mask-image: linear-gradient(
      to top,
      rgb(0 0 0 / 100%) 100%,
      rgb(0 0 0 / 0%) 100%
    ),
    linear-gradient(to bottom, rgb(0 0 0 / 100%) 100%, rgb(0 0 0 / 0%) 100%),
    linear-gradient(to left, rgb(0 0 0 / 100%) 100%, rgb(0 0 0 / 0%) 100%),
    linear-gradient(to right, rgb(0 0 0 / 100%) 25%, rgb(0 0 0 / 0%) 45%);
  mask-composite: intersect;
  z-index: -1;
}
.countdown-timer {
  display: inline-flex;
  text-align: center;
}
/* anchor for overlay positioning */
.back-resize { position: relative; }
@media screen and (min-width: 861px) {
  div.back-resize img.pcback_img {
    display: block;
  }
  div.back-resize img.spback_img {
    display: none;
  }
  .image_overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 右側パネル内で中央寄せ */
    justify-content: center; /* 垂直中央 */
    text-align: center;
    font-size: 40px;
    padding-right: 0;
  }
  .logo_container { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .items { position: static; top: auto; right: auto; }
  .logo_image { width: clamp(220px, 28vw, 520px); height: auto; z-index: 5; }
}
@media screen and (max-width: 860px) {
  div.back-resize img.spback_img {
    position: relative;
    /* 100vw は縦スクロールバー幅分だけ横にはみ出すため 100% に */
    width: 100%;
    z-index: 1;
    filter: blur(5px);
  height: auto; /* allow shrink on small screens */
  }
  div.back-resize img.pcback_img {
    display: none;
  }
  .image_overlay {
  top: 0;
  position: absolute;
  left: 0;
    width: 100%;
    align-content: top;
    text-align: center;
    font-size: 30px;
    z-index: 10;
  /* 余白を詰める */
  padding-top: clamp(16px, 4vh, 40px);
  }
  .items::before,
  .countdown-timer::before,
  .logo_image::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: skyblue;
    filter: blur(5px);
    z-index: -2;
  }
  .logo_container {
    position: relative;
  /* 上部余白+絶対配置による重なりを解消 */
  padding-top: clamp(24px, 8vh, 72px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 3vh, 28px);
  }

  .logo_image {
  /* 通常フローに戻す */
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: clamp(180px, 55vw, 360px);
  height: auto; /* keep aspect */
  max-width: 100%;
  margin: 0 auto;
  }

  .items {
    position: relative;
    display: inline-block;
  }
  .countdown-title {
    position: relative;
    display: inline-block;
    text-align: center;
  margin-top: 4px; /* ロゴとの間隔 */
  text-shadow:
      0 2px 6px rgba(0,0,0,0.55),
      0 4px 14px rgba(0,0,0,0.45),
      0 0 2px rgba(0,0,0,0.6);
  }
  .countdown-timer {
    position: relative;
    display: inline-flex;
  margin-top: 4px; /* ロゴとの間隔 */
  }
}

/* ensure top hero section is not sticky/fixed */
.top-img { position: static; }



/* 校長挨拶 */
.overview {
  min-height: 100vh;
  background-color:white;
}

.overview_greet-container{
  margin: 0 auto;
  max-width: 1200px;
  text-align: left;
  line-height: 3;
}

.overview_greet-principal{
font-family: 'Oswald', sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 50px;
    text-align: center;
    letter-spacing: 0.03em;
    line-height: 1em;
    margin-bottom: 0;
}

.overview_greet-photo img{
  height: 500px;
}

.overview_greet-photo-alt{
  line-height: 1.5;
  text-align: center;
}

/* .ttl wrapper removed */

@media (max-width: 600px) {
  .overview { min-height: auto; }
  .overview_greet-container { padding: 40px 16px; line-height: 1.8; }
  .overview_greet-photo img { height: auto; max-height: 320px; width: auto; }
  /* .ttl removed */
}

/* Swiper */
/* Ensure container does not expand page width on mobile */
.swiper-container {
  width: 100%;
  max-width: 100%;
  padding: 24px 0 48px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  height: 550px;
}

/* Wrapper transparent background */
.swiper-wrapper {
  background: transparent;
  display: flex;
  align-items: stretch;
  height: 450px;
}

/* Common slide styles */
.swiper-slide {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

/* カードコンテンツ */
.exhib-card {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: var(--border);
  box-shadow: var(--shadow-1);
}

.exhib-card img.map {
  width: 60%;
  height: auto;
  border-radius: 12px;
}

.exhib-card .title,
.exhib-card .group {
  font-size: 24px;
  line-height: 1;
  color: var(--color-text); /* テーマに合わせて色を設定 */
}

/* スライドリンク - 共通 */
.swiper-slide a {
  text-decoration: none;
  color: inherit;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

@media (prefers-color-scheme: dark) {
  .swiper-pagination-bullet {
    background: #ffffff !important;
    opacity: 1;
  }

  .swiper-pagination-bullet-active {
    background-color: #007aff !important;
  }
}

/* 空要素対策 */
.swiper-slide:empty,
.swiper-slide > a:empty {
  display: none !important;
}

/* Mobile tuning for Swiper - 行350あたり */
@media (max-width: 600px) {
  .swiper-container {
    padding: 16px 0 36px;
    height: auto;
  }
  
  .swiper-wrapper {
    height: auto !important; /* 高さを自動に */
  }
  
  .swiper-slide {
    width: min(80vw, 300px); /* 幅をビューポートの80%か300pxの小さい方に */
    height: min(80vw, 300px); /* 高さも同じ値に指定してスクエアに */
    margin: 0 auto; /* センタリング */
  }
  
  .exhib-card {
    aspect-ratio: 1/1; /* 強制的に正方形に */
    padding: 8px !important; /* パディングを小さく */
  }
  
  /* カードコンテンツも調整 */
  .exhib-card .title,
  .exhib-card .group {
    font-size: 20px; /* スクエアになるので文字サイズを調整 */
  }
  
  .exhib-card img.map {
    width: 90%; /* 画像サイズを調整 */
  }
}

/* ==========================
   Modernized additions
   ========================== */
/* Headings */
.stylish-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  /* bottom margin reduced to ~half */
  margin: var(--space-6) auto var(--space-6);
  font-family: "Mochiy Pop One", "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
}
.stylish-heading .heading-text {
  font-size: clamp(22px, 3vw, 32px);
}

/* ダークモード時のグラデーションテキスト */
@media (prefers-color-scheme: dark) {
  .stylish-heading .heading-text {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.heading-line { position: relative; flex: 1; height: 1px; opacity: .7; }
.heading-line::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #333333);
  border-radius: 999px;
  transform: translateY(-50%);
}

/* ダークモードでの見出し線の色 */
@media (prefers-color-scheme: dark) {
  .heading-line::before {
    background: linear-gradient(90deg, #ffffff);
  }
}
.heading-line.left::before { right: 0; }
.heading-line.right::before { left: 0; }

/* Countdown blocks */
.countdown-title { font-size: clamp(18px, 2.5vw, 24px); color: var(--color-text-muted); margin-bottom: clamp(10px, 1.6vw, 24px); }
.countdown-timer { margin-top: clamp(8px, 1.2vw, 20px); margin-bottom: clamp(8px, 1.2vw, 20px); gap: clamp(8px, 1.6vw, 24px); }
.time-block {
  display: grid;
  place-items: center;
  min-width: clamp(56px, 8vw, 80px);
  padding: clamp(8px, 1.2vw, 14px) clamp(10px, 1.6vw, 16px);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: var(--border);
  box-shadow: var(--shadow-1);
}
.time-block > span:first-child { font-size: clamp(22px, 3vw, 34px); font-weight: 700; }
.time-block .label { font-size: clamp(10px, 1.2vw, 14px); color: var(--color-text-muted); }

/* Overview tuning */
.overview {
  min-height: 100vh;
  background: var(--color-surface);
  border-top: var(--border);
}
.overview_greet-container{
  max-width: var(--container);
  line-height: 2;
  padding: var(--space-10) var(--space-6) var(--space-16);
}
.overview_greet-principal{
  font-weight: 600;
  color: var(--color-text);
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.2;
  margin-bottom: var(--space-6);
}
.overview_greet-photo img{
  height: clamp(260px, 40vw, 500px);
  border-radius: var(--radius-lg);
  border: var(--border);
  box-shadow: var(--shadow-1);
  margin: 0 auto; /* 中央揃え */
}
.overview_greet-photo-alt{
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
.overview_greet .overview_greet-text p { line-height: 2.5; }
/* .ttl removed */

/* Access (moved from inline) */
.access { padding: 64px 20px; background: color-mix(in srgb, var(--color-surface) 94%, transparent); }
.access .contents {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 28px;
  background: var(--color-card);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  padding: 28px;
  border: var(--border);
}
.access .text { flex: 1 1 45%; color: var(--color-text); }
.access .text h2 {
  font-family: "Mochiy Pop One", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 28px;
  margin: 0 0 12px;
  letter-spacing: .04em;
  position: relative;
  display: inline-block;
}
.access .text h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #333333);
  border-radius: 3px;
  opacity: .9;
}

/* ダークモードでのアクセスセクション見出し下線の色 */
@media (prefers-color-scheme: dark) {
  .access .text h2::after {
    background: linear-gradient(90deg, #ffffff);
  }
}
.access .text h3 { margin: 22px 0 8px; font-size: 18px; color: var(--color-text-muted); }
.access .text p { margin: 6px 0; line-height: 1.9; color: var(--color-text); opacity: .9; }
.access .map { flex: 1 1 55%; min-width: 320px; }
.access .map .map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.access .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
  .access .contents { flex-direction: column; padding: 20px; gap: 20px; }
  .access .text h2 { font-size: 24px; }
  .access .map .map-embed { aspect-ratio: 16 / 10; }
}

/* --- 追加: ナビのアクティブ表示 --- */
a.is-active {
  text-decoration: underline;
}

/* --- 追加: 汎用ページセクション余白 --- */
.page-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) 16px;
}

/* --- 追加: Jページのリード文 --- */
.j-page .lead {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.8;
  opacity: 0.9;
}

/* --- 追加: 展示スライダー共通スタイル --- */
.exhib-slider .swiper-container { 
  padding: 16px 0 36px; 
  height: auto !important; 
  /* 元は overflow: visible; だったためスライドのはみ出しが切れなかった */
  overflow: hidden; 
  position: relative; /* クリップ基準 */
}
/* もし一部で意図的に外側へドロップシャドウ等を表示したい場合は below クラスを付与 */
.exhib-slider .swiper-container.overflow-visible {
  overflow: visible;
}
.exhib-slider .swiper-wrapper { 
  height: auto !important; 
}
.exhib-slider .swiper-slide { 
  background: transparent; 
  box-shadow: none; 
  display: flex; 
  align-items: stretch; 
  justify-content: stretch; 
  padding: 6px; 
  height: auto !important; 
  overflow: visible; 
}
.exhib-slider .swiper-slide a { 
  display: flex; 
  width: 100%; 
  height: 100%; 
  align-items: stretch; 
  justify-content: stretch; 
  text-decoration: none; 
}

.exhib_card { 
  background: var(--color-card, rgba(255,255,255,0.96)); 
  border: var(--border, 1px solid rgba(0,0,0,0.08)); 
  border-radius: 16px; 
  padding: 16px; 
  box-shadow: var(--shadow-1, 0 8px 24px rgba(0,0,0,0.08)); 
  display: flex; 
  flex-direction: column; 
  width: 100%; 
  height: auto; 
  box-sizing: border-box; 
  gap: 12px; 
  overflow: visible; 
}
.exhib_card .group { 
  display: inline-block; 
  font-weight: 700; 
  font-size: 14px; 
  background: rgba(200, 200, 200, 0.2); /* 薄いグレー背景 */
  padding: 4px 10px; 
  border-radius: 999px; 
}

/* ライトモードでの表示 */
@media (prefers-color-scheme: light) {
  .group {
    color: #333 !important;
   background: color-mix(in srgb, var(--color-primary, #6aa2ff) 14%, transparent);background: color-mix(in srgb, var(--color-primary, #6aa2ff) 14%, transparent);
  }
  }

/* ダークモードでの表示 */
@media (prefers-color-scheme: dark) {
  .exhib_card .group {
    color: #ffffff;
    background: color-mix(in srgb, var(--color-primary, #6aa2ff) 14%, transparent);
  }
}
.exhib_card img.map { 
  width: 100%; 
  aspect-ratio: 16 / 9; 
  object-fit: cover; 
  border-radius: 12px; 
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); 
}
.title { 
  font-size: 18px; 
  line-height: 1.4; 
  margin: 4px 0 2px; 
}
.desc { 
  display: block; 
  color: var(--color-text-muted, #666); 
  font-size: 14px; 
  line-height: 1.6; 
  word-break: break-word; 
}
.desc p { 
  margin: 0 0 8px; 
}
.desc p:last-child { 
  margin-bottom: 0; 
}

/* 展示コンテナレスポンシブレイアウト */
.exhib_container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

@media (min-width: 768px) {
  .exhib_container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }
  
  .exhib_card {
    flex: 1 1 calc(33% - 40px);
    max-width: 350px;
  }
}

/* --- 追加: 模擬店関連スタイル --- */
.food-notice {
  max-width: 800px;
  margin: 0 auto 32px;
  padding: 16px 24px;
  background: #a9b3c6;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.food-notice p {
  margin: 8px 0;
  line-height: 1.7;
}

.food-notice strong {
  color: #d35400;
}

.food-price {
  display: inline-block;
  background: #a9b3c6;
  color: white;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 16px;
  font-size: 14px;
  margin-top: 4px;
}

/* .groupクラス全般のスタイル（上記の特定のコンテナでオーバーライドされない場合） */
.group {
  color: #333333; /* ライトモードではデフォルトで黒色 */
}

/* ダークモードでの一般的な.groupクラス */
@media (prefers-color-scheme: dark) {
  .group {
    color: #ffffff; /* ダークモードではデフォルトで白色 */
  }
}

.schedule {
    position: relative;
    font-size: 14px;
    align-items: center;
  /* center and constrain width like other sections */
  width: min(calc(100% - 32px), var(--container));
  margin-inline: auto;
}

.schedule a{
  text-decoration: none;
  color: #fff;
}
.schedule::before {
    position: absolute;
    background-color: #deeef7;
    content: "";
}

.schedule ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.schedule li {
    position: relative;
}

.schedule_time {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  width: var(--schedule-time-width);
    height: 2em;
    border-radius: 6px;
    background-color: #3388dd;
    color: #fff;
    text-align: center;
}
.schedule_time::before {
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    z-index: -1;
    background-color: #3388dd;
    content: "";
}
.schedule_time::after {
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #3388dd;
    content: "";
}

.schedule_content_title {
    font-weight: bold;
}
.ttdate {
  text-align: center;
  font-size: 1.8em;
  font-weight: bold;
}
/* Normalize anchor wrapper inside timetable so it behaves like previous div layout */
.schedule li > a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
@media screen and (min-width: 861px) {
  .schedule li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  /* remove unintended gaps from flex children */
  .schedule li > a > .schedule_time { margin-bottom: 0.4em; }
}
@media screen and (max-width: 860px) {
  /* ===== Timetable Mobile Layout Fix ===== */
  .schedule { font-size: 13px; }
  .schedule::before { top: 0; bottom: 0; left: calc(var(--schedule-time-width) - 0.5em); width: 6px; height: auto; }
  .schedule ul { width: 100%; }
  .schedule li { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
  .schedule li + li { margin-top: 1.6em; }
  .schedule li > a { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 4px 0; }
  .schedule_time { flex: 0 0 var(--schedule-time-width); height: 2.2em; font-weight: 600; font-size: 0.9rem; }
  .schedule_time::before { top: 50%; right: -0.25em; left: auto; transform: translateY(-50%) rotate(45deg); }
  .schedule_time::after { top: 50%; left: calc(var(--schedule-time-width) - 1em); transform: translateY(-50%); }
  .schedule_content { margin: 0; width: auto; flex: 1 1 auto; }
  .schedule_content_title { text-align: left; line-height: 2.3; word-break: break-word; white-space: normal; }
}
@media screen and (min-width: 861px) {
  /* Desktop: force single row (10 items) per day so line connects first to last */
  .schedule { overflow: hidden; width: 100%;}
  .schedule ul { display: flex; flex-wrap: nowrap; margin: 0; padding: 0 4px; position: relative; width: 100%; }
  /* line + connectors slightly lowered (3.3em -> 3.5em) for better vertical centering under time bubble */
  .schedule ul::before { content:""; position:absolute; left:0; top:3.5em; width:100%; height:5px; background:#deeef7; border-radius:3px; }
  .schedule li { flex:1 0 10%; max-width:10%; position:relative; }
  .schedule_time { margin:0 auto; }
  .schedule_time::before { left:50%; bottom:0; transform:translateX(-50%) translateY(50%) rotate(45deg); }
  .schedule_time::after { top:3.5em; left:50%; transform:translateX(-50%) translateY(-50%); }
  .schedule_content { margin:2.0em 0 0; }
  .schedule_content_title { text-align:center; }
  .schedule_content_detail { margin-top:0.4em; }
}

@media screen and (min-width: 861px) {
  .goods-notice {
    width: min(calc(100% - 2rem), var(--container));
    margin-inline: auto;
    display: grid;
    gap: 1rem;
    text-align: left !important;
    line-height: 1.8 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .goods-img {
    grid-column: 1;
    grid-row: 1 / span 10;
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
  }
  .goods-notice .notice {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 .75rem;
  }
  .goods-notice .goods-desc {
    grid-column: 2;
    margin: 0;
    width: 100%;
  }
}