/* =========================================================
   Stylesheet / Cleaned (vertical style)
   ========================================================= */

/* ===================== Base / Variables / Reset ===================== */
:root {
  /* Colors */
  --c-bg: #ffffff;
  --c-text: #333;
  --c-muted: #707070;
  --c-accent: #ffda64;
  --c-light-green: #00cd36;
  --c-middle-green: #38ac57;
  --c-green: #24614a;



  /* Rule Title / dotted 共通 */
  --rule-color: #24614a;
  /* 文字の基本色 */
  --rule-gap: .75rem;
  /* ラベルと線の距離 */
  --dot-color: #707070;
  /* すべての波線の色（グレー） */

  /* ↓ 点線パターン（見出し/ユーティリティ共通） */
  --dot-on: 4px;
  /* 線が出る長さ */
  --dot-off: 6px;
  /* 線が消える長さ（合計 = 14px） */
  --dot-height: 4px;
  /* 点線の太さ */
  --dot-opacity: .9;
  --dotted-image: repeating-linear-gradient(to right,
      var(--dot-color) 0 var(--dot-on),
      transparent var(--dot-on) calc(var(--dot-on) + var(--dot-off)));


  /* Header height for scroll adjustment */
  --header-h: 64px;
  /* ヘッダーの高さに合わせて調整 */
}



* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  /* 基本はbold */
  background: var(--c-bg);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

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

ruby {
  ruby-position: over;
  /* 上に表示（デフォルトもover） */
}

rt {
  font-size: 0.5em;
  /* ルビを小さめに */
  color: inherit;
  /* 親の文字色を継承 */
}



/* ===================== Layout & Utilities ===================== */
.container {
  width: min(1000px, 100% - 32px);
  margin-inline: auto;
}

.section {
  padding-block: clamp(32px, 5.33vw, 64px);
  padding-inline: 0;
}

.section.alt {
  background: var(--c-bg);
}

.sec-title {
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 0 0 24px;
}

/* ===================== Buttons ===================== */

.btn-img {
  display: inline-block;
  position: relative;
}

.btn-img img {
  display: block;
  height: auto;
  transition: transform .12s ease, box-shadow .12s ease;
  transform-origin: 50% 50%;
  will-change: transform;
}

.btn-img:hover img {
  transform: translateY(2px) scale(0.98);
}

.btn-img:active img {
  transform: translateY(3px) scale(0.96);
}



/* ===================== 共通パーツ: 点線（ユーティリティ） ===================== */
.dotted-line {
  height: var(--dot-height);
  background: var(--dotted-image);
  background-size: calc(var(--dot-on) + var(--dot-off)) var(--dot-height);
  background-repeat: repeat-x;
  border-radius: calc(var(--dot-height) / 2);
  opacity: var(--dot-opacity);
  pointer-events: none;
}

/* 余白ユーティリティ（必要な所だけ付ける） */
.dotted-line--sm {
  margin: 10px 0;
}

.dotted-line--md {
  margin: 16px 0;
}

.dotted-line--lg {
  margin: 24px 0;
}

/* FAQのグレー（親で切替） */
.faq {
  --rule-color: #707070;
}


/* ===================== Reusable: 飾り見出し（…… ラベル ……） ===================== */
.rule-title {
  display: flex;
  align-items: center;
  gap: var(--rule-gap);
  justify-content: center;
  color: var(--rule-color);
  font-weight: 800;
  font-size: clamp(16px, 2.2vw, 24px);
  line-height: 1.4;
  margin: 2rem 0;
  position: relative;
}

.rule-title::before,
.rule-title::after {
  content: "";
  height: var(--dot-height);
  flex: 1 1 0;
  background: var(--dotted-image);
  /* ← 変数参照に統一 */
  background-size: calc(var(--dot-on) + var(--dot-off)) var(--dot-height);
  background-repeat: repeat-x;
  border-radius: calc(var(--dot-height) / 2);
  opacity: var(--dot-opacity);
}

.rule-title__label {
  white-space: nowrap;
}

.rule-title__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(1px);
}

.rule-title--left {
  justify-content: flex-start;
}

.rule-title--left::before {
  display: none;
}

/* ===================== Calendar ===================== */

:root {
  --cal-border: #a8d5b6;
  --cal-accent: var(--c-green);
  --cal-event: var(--c-light-green);
}

/* Layout / Legend */
.trialcal {
  max-width: 760px;
}

.trialcal__legendwrap {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: .4rem 0 1.2rem;
}

.trialcal__heading {
  margin: 0;
  line-height: 1;
  font-size: clamp(16px, 2.3vw, 24px);
  font-weight: 900;
  color: var(--c-green);
  transform: translateY(1px);
}

.trialcal__legend {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  line-height: 1;
  color: var(--c-green);
}

.legend__chip {
  width: 1.8em;
  height: 1em;
  box-sizing: border-box;
  background: var(--cal-event);
  border: 2px solid #1d8b52;
  border-radius: 2px;
  transform: translateY(.5px);
}

/* Calendar Box */
.trialcal__calendar {
  border: none;
  box-shadow: none;
  background: var(--c-bg);
  padding: 0;
  box-sizing: border-box;
}

/* Calendar Header */
.cal__header {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  background: var(--cal-accent);
  color: #fff;
  padding: 6px 8px;
}

.cal__title {
  text-align: center;
  font-weight: 900;
  font-size: clamp(16px, 3vw, 20px);
}

.cal__nav {
  width: 38px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .6);
  background: transparent;
  position: relative;
}

.cal__nav::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

.cal__nav--prev::before {
  border-right-color: #fff;
  left: 6px;
}

.cal__nav--next::before {
  border-left-color: #fff;
  right: 6px;
}

.cal__nav:hover {
  background: rgba(255, 255, 255, .08);
}

/* Grid */
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fff;
  border: 1px solid var(--cal-border);
  border-top: none;
}

.cal__cell {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  background: #fff;
  font-weight: 700;
  color: var((--c-green));
  min-height: 30px;
  border-top: 1px solid var(--cal-border);
  border-right: 1px solid var(--cal-border);
}

.cal__cell:nth-child(7n) {
  border-right: none;
}

.cal__grid>.cal__cell:nth-last-child(-n + 7) {
  border-bottom: 1px solid var(--cal-border);
}

/* Weekdays */
.cal__cell--dow {
  background: var(--c-bg);
  padding: 0.05rem 0;
  line-height: 1.2;
  font-weight: 800;
  font-size: 12px;
  color: var(--c-green);
}

.cal__grid>.cal__cell--dow:nth-child(6) {
  color: #2a5dbb;
}

.cal__grid>.cal__cell--dow:nth-child(7) {
  color: #c93a3a;
}

/* Days */
.cal__day {
  font-size: clamp(14px, 2vw, 18px);
  color: #111;
}

.cal__day.is-event {
  background: var(--cal-event);
  color: #fff;
  font-weight: 900;
}

.cal__day--prev,
.cal__day--next {
  color: #b7bfc0;
}


/* ===================== Scroll 調整 ===================== */
html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: var(--header-h);
}

/* 例: 64px を :root で定義済み */


/* ===================== Header (Responsive drawer / JS制御) ===================== */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.brand__logo {
  height: 40px;
  width: auto;
  display: block;
}

.brand__text {
  font-weight: 800;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.25s ease;
  backdrop-filter: blur(5px);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 22px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 40px;
  width: auto;
  transition: all 0.25s ease;
}

/* ナビゲーション */
.nav-desktop .nav-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  color: var(--c-green);
  font-size: 1rem;
  font-weight: bolder;
}

.nav-desktop .nav-menu li {
  display: flex;
  align-items: center;
}

.nav-desktop .nav-menu li>a {
  display: inline-block;
  padding: 10px 4px;
  color: var(--c-green);
  text-transform: uppercase;
  letter-spacing: -0.6px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: color .2s ease;
}

.nav-desktop .nav-menu rt {
  font-size: 0.5em;
  line-height: 1;
  letter-spacing: -0.4em;
  /* ← ルビだけ詰める */
}

/* 全メニュー項目を“中央より少し下”に見せる */
.nav-desktop {
  --nav-nudge: 0.16em;
}

/* a全体を下にオフセット（ルビ有無どちらも対象） */
.nav-desktop .nav-menu a {
  position: relative;
  transform: translateY(var(--nav-nudge));
}

/* ルビの行間を詰めて上側の膨らみを抑える */
.nav-desktop .nav-menu rt {
  font-size: 0.5em;
  line-height: 1;
}

/* 幅に応じて微調整 */
@media (max-width: 1200px) {
  .nav-desktop {
    --nav-nudge: 0.14em;
  }
}

@media (min-width: 1400px) {
  .nav-desktop {
    --nav-nudge: 0.18em;
  }
}


.nav-desktop .nav-menu li>a:hover,
.nav-desktop .nav-menu li>a.active,
.nav-desktop .nav-menu li>a[aria-current="page"] {
  color: var(--c-light-green);
  text-decoration: none;
}

/* CTA（応募フォーム）だけ少し強め & 行揃え */
.nav-desktop .nav-menu .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  vertical-align: middle;
}

/* アクセシビリティ：キーボードフォーカス */
.nav-desktop .nav-menu li>a:focus-visible {
  outline: 2px solid var(--c-light-green);
  outline-offset: 2px;
}

/* ハンバーガーメニュー */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  cursor: pointer;
  z-index: 2000;
  position: relative;
}

.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary-navy);
  transition: var(--transition-default);
  border-radius: 2px;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 9px;
}

.hamburger span:nth-child(3) {
  top: 18px;
}

/* アクティブ状態（バツ印） */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 9px;
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 9px;
}

/* モバイルメニュー */
.nav-mobile {
  display: none;
  /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  right: -100%;
  /* 初期状態は画面外 */
  width: 80%;
  max-width: 400px;
  height: 70vh;
  background-color: var(--c-bg);
  z-index: 1000;
  padding: 3rem 1.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: right 0.3s ease;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
  z-index: 1500;
}

.nav-mobile .nav-menu {
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.nav-mobile .nav-menu a {
  font-size: 1.125rem;
}

/* モバイルメニューのアクティブ状態 */
.nav-mobile.active {
  display: flex;
  right: 0;
}

/* オーバーレイ（黒背景） */
.menu-overlay {
  display: none;
}

.menu-overlay.active {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 990;
}

/* =====================  FV ===================== */
.fv {
  position: relative;
  text-align: center;
  background: url("img/bg-blue.png") center / cover no-repeat;

  /* CTAが次セクションにまたがる量と、FV内の下余白 */
  --cta-overlap: 36px;
}

/* 中央のタイトル画像用コンテナ（背景は透明） */
.hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 auto -50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.hero-titleimg {
  width: min(920px, 92%);
  height: auto;
  display: block;
  image-rendering: auto;
  padding-top: 0.8rem;
}

/* FVのCTAだけを境界またぎにする（他の場所のボタンには影響なし） */
.btn-img--cta.btn-img--overlap {
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--cta-overlap) - 15px);
  transform: translateX(-50%);
  z-index: 10;
}

/* ===================== Grids ===================== */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}


/* ===================== Overview（魅力＋体験会＋テーマ詳細） ===================== */

/* 全体 */
.overview {
  position: relative;
  isolation: isolate;
}

/* ===================== 魅力（緑背景） ===================== */

/* セクション全体 */
#overview .overview__appeal {
  background: url("img/bg-green.png") center/cover no-repeat;
  padding: clamp(40px, 6vw, 72px) 0;
  --gap: 16px;
  --overlap: 22px;
  --raiseY: 24px;
}

/* コンテナ（中央寄せ＋flex） */
#overview .overview__appeal .container.appeal.appeal--revamp {
  max-width: 1000px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap);
  position: relative;
  overflow: visible;
  box-sizing: border-box;
}

/* 下段テキスト */
#overview .appeal__desc--white {
  max-width: 1000px;
  width: 100%;
  margin: 20px auto 5px;
  color: #fff;
  text-align: left;
  line-height: 1.4;
  font-size: clamp(14px, 2vw, 20px);
  max-inline-size: 82ch;
}

/* 左：見出し画像 */
#overview .appeal__titlewrap {
  order: 1;
  position: relative;
  z-index: 2;
}

#overview .appeal__titleimg {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  image-rendering: auto;
}

/* 右：トロフィー画像 */
#overview .appeal__visuals {
  order: 2;
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--overlap));
  transform: translateY(calc(-1 * var(--raiseY)));
}

#overview .appeal__heroimg {
  width: auto;
  max-width: 188px;
  height: auto;
  display: block;
  margin-bottom: var(--raiseY);
  object-fit: contain;
  image-rendering: auto;
}

/* 参加賞 */
.appeal__present {
  text-align: center;
}

.appeal__present img {
  display: block;
  max-width: 1000px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}


/* ---------- 魅力（緑背景）専用：調整ブレークポイント ---------- */

/* 1200〜1399px */
@media (min-width:1200px) and (max-width:1399px) {

  #overview .overview__appeal .container.appeal.appeal--revamp,
  #overview .appeal__desc--white {
    padding-inline: 0;
  }

  .appeal {
    --overlap: 10%;
  }

  .appeal__titleimg {
    width: clamp(700px, 40vw, 1080px);
  }

  .appeal__heroimg {
    width: min(32vw, 500px);
  }
}

/* 1400px以上 */
@media (min-width:1400px) {

  #overview .overview__appeal .container.appeal.appeal--revamp,
  #overview .appeal__desc--white {
    padding-inline: 0;
  }

  .appeal {
    --overlap: 9%;
  }

  .appeal__titleimg {
    width: clamp(820px, 38vw, 1000px);
  }

  .appeal__heroimg {
    width: min(30vw, 520px);
  }
}

/* タブレット以下（〜1199px） */
@media (max-width:1199.98px) {

  #overview .overview__appeal {
    --overlap: 18px;
    --raiseY: 16px;
  }

  #overview .overview__appeal .container.appeal.appeal--revamp {
    padding-inline: clamp(12px, 4vw, 24px);
  }

  #overview .appeal__desc--white {
    padding-inline: clamp(12px, 4vw, 40px);
  }

  /*参加賞の左右にマージン*/
  .appeal__present img {
    margin: 0 auto;
    /* 中央寄せを維持 */
    padding: 0 20px;
    /* 左右に余白を“内側”に確保 */
    box-sizing: border-box;
    /* paddingを幅に含める */
  }
}

/* ===================== 体験会（白背景） ===================== */
/* 白背景は cover、芝生は別レイヤー（::after）で下端固定＆repeat-x。 */

.overview__trial {
  position: relative;
  /* 芝生の絶対配置の基準 */
  --grass-h: clamp(36px, 7vw, 88px);
  /* 芝生帯の高さ（スマホで大きくなりすぎない） */

  background: url("img/bg-white.png") center/cover no-repeat;
  padding: clamp(40px, 6vw, 72px) 0;
  overflow: hidden;
}

/* 芝生レイヤー */
.overview__trial::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: var(--grass-h);
  background: url("img/trial-grass.png") center bottom / auto 100% repeat-x;
  pointer-events: none;
  z-index: 0;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

/* コンテンツ本体：芝生ぶんの安全余白を確保 */
.trial {
  position: relative;
  z-index: 1;
  /* 芝生より前面 */
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  align-items: flex-start;

  /* 下に芝生高さの半分を余白として確保 → コンテンツが被らない */
  padding-bottom: calc(var(--grass-h) * 0.5);
}

/* 外側＋緑のドット線 */
.trial-catch-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 100px 2rem;
  box-sizing: border-box;
  position: relative;
}

/* 下の緑ドット線（共通ルート変数利用） */
.trial-catch-wrap::after {
  content: "";
  display: block;
  width: 100%;
  height: var(--dot-height, 4px);
  margin-top: 2rem;
  /* ← 緑の点線を直接指定 */
  background-image: repeating-linear-gradient(to right,
      var(--c-middle-green) 0 var(--dot-on, 4px),
      transparent var(--dot-on, 4px) calc(var(--dot-on, 4px) + var(--dot-off, 6px)));
  background-size: auto var(--dot-height, 4px);
  opacity: var(--dot-opacity, 0.9);
}


/* 内側 */
.trial-catch {
  width: 1000px;
  margin: 0 auto;
  text-align: right;
  font-weight: 900;
  font-size: clamp(36px, 4.7vw, 56px);
  line-height: 1.53;
  color: var(--c-middle-green);
  letter-spacing: -1.2px;
  white-space: nowrap;
  word-break: keep-all;
  transition: font-size 0.2s ease;
}

/* ルビ */
.trial-catch ruby {
  ruby-position: over;
}

.trial-catch rt {
  font-size: 0.35em;
  color: inherit;
  letter-spacing: 0.02em;
}

/* 「体験会」＋カギ括弧をオレンジ（ルビも） */
.trial-catch .orange,
.trial-catch .orange rt {
  color: #F0A600;
}

/* 補足文（小さめ） */
.trial-catch__note {
  display: block;
  margin-top: 20px;
  font-size: 20px;
  color: var(--c-middle-green);
  text-align: right;
}

/* --- （1199px以下） --- */
@media (max-width: 1199px) {
  .trial-catch-wrap {
    padding: 0 40px 1.6rem;
  }

  .trial-catch {
    width: 100%;
    text-align: center;
    white-space: normal;
    line-height: 1.4;
    letter-spacing: -0.8px;
  }

  .trial-catch__note {
    text-align: center;
  }

  .trial-catch rt {
    font-size: 0.4em;
  }
}


/* 箱（芝生以外） */
.trial.trial--revamp {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 417px) 1fr;
  /* 左は “最大” 417px */
  column-gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding-inline: 0;
  /* 1200px時＝左右100px */
}

@media (min-width:1200px) {
  .trial.trial--revamp {
    column-gap: 36px;
  }

  /* 3vw@1200 = 36px */
}

@media (max-width:1199.98px) {
  .trial.trial--revamp {
    padding-inline: clamp(12px, 4vw, 24px);
  }
}

/* 左：カレンダー＋ボタン（親は “最大” 417px、画面に応じて縮む） */
.trial-left {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 417px;
  /* ← 上限だけ 417。狭い画面では自動で小さくなる */
}

.trial-left .trialcal,
.trial-left .trialcal__calendar,
.trial-left .btn-img--trial-left {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
}

.trial-left .btn-img--trial-left {
  display: inline-block;
  line-height: 0;
}

.trial-left .btn-img--trial-left img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 右：本文（吹き出しは中で絶対配置） */
.trial-body {
  grid-column: 2;
  position: relative;
  min-width: 0;
  --badge-h: clamp(120px, 18vw, 150px);
  /* 吹き出し＋緑タグの高さを想定 */
  --badge-gap: 16px;
  /* 吹き出しと本文の余白 */

  padding-top: 120px;
}

/* ---- 吹き出し本体 ---- */
/* ---- 吹き出しコンテナ ---- */
.trial-badge {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  /* 中央揃え */
  gap: 0;
  z-index: 2;
  font-family: "Noto Sans JP", sans-serif;
}

/* ---- 吹き出し ---- */
.trial-bubble {
  position: relative;
  display: inline-block;
  padding: 12px 20px 8px;
  border: 2px solid var(--c-middle-green);
  background-color: #fff;
  font-size: clamp(18px, 2.5vw, 32px);
  font-weight: 900;
  color: var(--c-middle-green);
  line-height: 1.6;
  white-space: nowrap;
}

.trial-bubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 60%;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: var(--c-middle-green) transparent transparent;
  translate: -50% 100%;
  transform: skew(-25deg);
}

.trial-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 60%;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-color: #fff transparent transparent;
  translate: calc(-50% - .4px) 100%;
  transform: skew(-25deg);
}

/* ---- 緑タグ ---- */
.trial-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--c-light-green);
  color: #fff;
  padding: 12px 6px;
  margin-left: -2px;
  line-height: 1.2;
  min-width: 100px;
  box-sizing: border-box;
  z-index: 2;
}

.trial-tag .small {
  font-size: clamp(14px, 2.4vw, 25px);
  font-weight: 700;
  white-space: nowrap;
}

.trial-tag .large {
  font-size: clamp(20px, 3.3vw, 39px);
  font-weight: 900;
  white-space: nowrap;
}

/* 見出し/本文 */
.trial-title {
  margin: 0 0 .4em;
  line-height: 1.17;
  letter-spacing: -2px;
  font-size: clamp(20px, 4vw, 46px);
  font-weight: 900;
  color: var(--c-light-green);
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.trial-title span,
.trial-title .trial-highlight {
  display: inline;
  white-space: nowrap;
}

.trial-desc {
  margin: 0 0 1.2em;
  line-height: 1.55;
  font-size: clamp(14px, 1.8vw, 18px);
  color: var(--c-text);
  text-align: right;
}

/* 若葉マーク */
.trialcal__legendwrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.trialcal__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
}

.trialcal__icon {
  height: 54px;
  width: auto;
  display: block;
  transform: rotate(-30deg);
}

.trialcal__legend {
  font-size: 14px;
  white-space: nowrap;
}

/* ===================== 表彰式 ===================== */
/* 表彰式セクション全体 */
.overview__award {
  background: url("img/bg-award-green.png") center top / cover no-repeat;
  padding: 40px 0 90px;
  text-align: center;
  color: var(--c-green);
}

/*タイトル見出し*/
.section-title-award {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.section-title-award img {
  display: block;
  width: 600px;
  /* 指定の幅 */
  height: auto;
  margin-top: min(40px, 6.5vw);
}

/* 表彰式緑枠 */
.overview__award .summary__box {
  max-width: 810px;
  margin: 0 auto;
  padding: 2.5rem 3rem;
}


/* 開催日時・開催場所 */
.award__info p,
.award__date,
.award__place {
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 800;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

/* ---- 日時・注釈 ---- */
.award__time {
  font-size: clamp(16px, 2.4vw, 22px); 
  font-weight: 800;
  margin-top: -0.5rem;  
  margin-bottom: 0.8rem;
  color: var(--c-green);
}

.award__note {
  font-size: clamp(14px, 2vw, 18px); 
  color: var(--c-green);
  margin-top: 0.2rem;
  margin-bottom: 1.2rem;
  text-align: center;
  line-height: 1.5;
}


/* 出演者名（黄色枠内） */
.guest__name {
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

/* その他テキスト（黄色枠内） */
.guest__role,
.guest__desc {
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 800;
  line-height: 1.35;
}

/* 表彰枠 */
.award__prizes ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 70px;
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.award__prizes li {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: clamp(16px, 2vw, 28px);
  width: auto;
}

.award__prizes li img {
  width: 28px;
  height: auto;
  margin-right: 10px;
}

/* 2個目以降のアイテムに左マージンを付ける（横の間隔用） */
.award__prizes li + li {
  margin-left: 2.5rem;  /* お好みで 2rem〜4rem くらいで調整 */
}

/* 4個目以降（2段目）の上にも少し余白がほしければ */
.award__prizes li:nth-child(n + 4) {
  margin-top: 0.8rem;
}

/* 出演者ボックス */
.guest__box {
  position: relative; /* ← 見出し画像を重ねるため必須 */
  background: #fff;
  box-shadow: 2px 4px 16px #00000058;
  border: 9px solid #FFCF2F;
  padding: 2rem;
  max-width: 800px;
  margin: 60px auto 20px; /* 枠ごとの余白 */
  text-align: left;
  box-sizing: border-box;
}

.guest__text .dotted-line {
  width: 260px;
  margin: 12px 0 16px 0;
}


/* -------------------- 枠上の見出し画像（MC / 特別審査員） -------------------- */
.guest__header {
  position: absolute;
  top: -25px;   /* ← 枠の上にかぶせる */
  left: -9px;   /* ← 左寄せ（デザインに合わせて調整） */
  z-index: 2;
}

/* -------------------- 枠内レイアウト -------------------- */
.guest__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.guest__text {
  flex: 1 1 50%;
  padding:0 clamp(16px, 4vw, 40px);
}

.guest__img {
  flex: 0 0 242px; /* ← 幅は固定のまま */
  margin: 0 auto;  /* ← 自動で中央寄せ */
  text-align: center;
}

.guest__img img {
  max-width: 242px; /* ← 最大幅を固定 */
  width: 100%;
  height: auto;
}

.guest__name {
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 800;
  margin: 0.3em 0;
}


/* ===================== テーマ詳細（オレンジ背景） ===================== */
.overview__summary {
  background: url("img/bg-orange.png") center/cover no-repeat;
  padding: 0 0 3.5rem;
}

.summary__box {
  border: 9px solid var(--c-green);
  padding: 2rem 4rem;
  background: var(--c-bg);
  margin: 0 3.5rem;
  box-shadow: 0px 3px 6px #00000029;
}

.summary__block+.summary__block {
  margin-top: 2rem;
}

.overview__summary .summary__box {
  max-width: 810px;
  margin-left: auto;
  margin-right: auto;
}

.summary__block--mb60 {
  margin-bottom: 60px;
}

/* コンテスト概要タイトル */
.section-title-summary {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  z-index: 2;
}

.section-title-summary img {
  display: block;
  width: 600px;
  height: auto;
  position: relative;
  top: 100px;
  /* 枠にかぶせたい量を調整 */
}

/* ---- 応募部門 ---- */
.dept-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 6vw, 40px);
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.dept-list li {
  color: var(--c-green);
  font-size: clamp(24px, 4.8vw, 40px);
  font-weight: 800;
  line-height: 1.17;
  white-space: nowrap;
  letter-spacing: -1.5px;
}

.dept-list li::before {
  content: "「";
}

.dept-list li::after {
  content: "」";
}

/* ---- 応募テーマ詳細 ---- */
.theme-list {
  margin: 0;
}

.theme-list__row {
  display: grid;
  grid-template-columns: minmax(9.5em, 18em) 1fr;
  padding: clamp(4px, 2vw, 8px);
  align-items: start;
  /* 左右を上揃え */
}

.theme-list__row:first-child {
  border-top: none;
}

/* 各テーマ行の区切り */
.theme-list__row+.theme-list__row {
  margin-top: 2rem;
  /* 自由制作部門とテーマ制作部門の間に余白 */
}

/* 左ラベル */
.theme-list__row dt {
  align-self: flex-start;
  /* 上揃え */
  display: flex;
  align-items: center;
  /* テキスト縦位置（中央→必要ならflex-startに変更可） */
  justify-content: left;
  margin: 0;
  font-weight: 900;
  color: var(--c-green);
  font-size: clamp(16px, 3.8vw, 30px);
  line-height: 0.8;
}

.theme-list__row dt::before {
  content: "「";
}

.theme-list__row dt::after {
  content: "」";
}

/* 右本文 */
.theme-list__row dd {
  margin: 0;
  color: var(--c-text);
  font-size: clamp(14px, 2.1vw, 16px);
}

.theme-list__row dd>*:first-child {
  margin-top: 0;
}

.theme-list__row dd>*:last-child {
  margin-bottom: 0;
}

/* 強調リード文（黄色帯） */
.theme-list__lead {
  background: var(--c-accent);
  font-weight: 800;
  padding: 0.6rem;
  display: block;
  text-align: center;
  position: relative;
  top: -10px;
}

.theme-list__row dd p {
  margin: 0;
  /* 下の本文用 */
}

/* 橋本ワールドへのリンク */
.link-accent {
  color: var(--c-middle-green);
}

.link-accent:hover,
.link-accent:focus-visible {
  opacity: .85;
}


/* 参加方法（本文寄せ） */
.flow-list {
  margin: .25rem 0 1rem 1.25rem;
  line-height: 1.8;
}

/* 応募フォームボタン */
.summary__cta {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

/* 応募資格リスト */
.notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notes-list li {
  background: var(--c-green);
  color: #fff;
  font-weight: 800;
  font-size: clamp(14px, 2.2vw, 20px);
  padding: 0.95rem 1.5rem;
  margin: 0;
}

.notes-list li+li {
  margin-top: 5px;
  /* 各項目の間に白線代わり */
}

/* ===================== 橋本ワールドDL ===================== */
.overview__worlddl {
  background: var(--c-bg);
  text-align: center;
  padding: clamp(48px, 6vw, 80px) 0;
}

.section-title-worlddl {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.section-title-worlddl img {
  display: block;
  width: 824.8px;
  height: auto;
  margin-top: min(40px, 6.5vw);
}

/* プレビュー枠 */
.worlddl__frame {
  width: min(1000px, 100%);
  margin: 0 auto 1.5rem;
  border: 9px solid var(--c-middle-green);
  box-sizing: border-box;
}

.worlddl__preview {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #ddd;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.worlddl__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキスト・ボタン */
.worlddl__note {
  color: var(--c-green);
  font-weight: 900;
  font-size: clamp(16px, 2.6vw, 30px);
  margin: 4rem 0 1.5rem;
}

.worlddl__btns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(40px, 8vw, 120px);
  margin-bottom: 1.5rem;
}

.btn-img--dl img {
  width: clamp(280px, 36vw, 440px);
  max-width: 100%;
  height: auto;
  display: block;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-img--dl:hover img {
  transform: translateY(2px) scale(0.98);
}

/* 補足リンク */
.worlddl__help {
  color: var(--c-green);
  font-weight: 900;
  font-size: clamp(14px, 2.6vw, 30px);
}

/* リンク（統合版 / Java版） */
.worlddl__link--green {
  color: var(--c-middle-green);
  text-decoration: none;
  transition: color 0.2s ease;
}

.worlddl__link--green:hover {
  color: var(--c-light-green);
}

/* 括弧とスラッシュ */
.worlddl__paren,
.worlddl__slash {
  color: var(--c-green);
}

/* ※補足 */
.worlddl__sub {
  font-size: clamp(14px, 1.6vw, 20px);
  color: var(--c-text);
}


/* ===================== Flow Section (応募ステップ) ===================== */
.section-title-method {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.section-title-method img {
  display: block;
  width: 600px;
  height: auto;
  margin-top: min(40px, 6.5vw);
}

.flow-section {
  --c-line: var(var(--c-green)) --gap: clamp(12px, 2vw, 24px);
  --circle: clamp(64px, 8vw, 125px);
}

.steps-wrap {
  position: relative;
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 36px 0;
  padding: 0;
  position: relative;
}

.steps-line {
  position: absolute;
  top: calc(var(--circle) / 2 + 4px);
  left: calc(var(--circle) * 0.65 + 16px);
  right: calc(var(--circle) * 0.65 + 16px);
  height: 2px;
  background: var(--c-green);
  z-index: 0;
}

.step {
  text-align: center;
  position: relative;
  z-index: 1;
  margin: 0 14px;
}

.step-circle {
  width: var(--circle);
  height: var(--circle);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-bg);
}

.step-circle img {
  display: block;
  width: min(calc(125px / 1.3), 100%);
  height: auto;
  transform: scale(1.3);
  transform-origin: 50% 50%;
  background-color: #fff;
}

.step-icon {
  background: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.step-icon img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  display: block;
  margin-top: 40px;
}

.step-title {
  margin: 16px 0;
  font-size: 24px;
  font-weight: bolder;
  color: var(--c-green);
}

.step-text {
  margin: 0 auto;
  max-width: 18em;
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.step-text__link {
  display: inline-block;
  margin-top: 0.4em;
  color: var(--c-green);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.step-text__link:hover {
  opacity: 0.7;
}


/* 提出物詳細リスト */
/* ===== 提出物詳細：点線は枠のみ／カードは縦積み ===== */

/* 見出しを枠の上にオーバーラップ */
.deliverables {
  position: relative;
  margin: clamp(16px, 4vw, 32px) 0;
  background: transparent;
}

.deliverables .rule-title {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
}

.deliverables .rule-title__label {
  display: inline-block;
  background: #fff;
  padding: 0 .8em;
}

/* ← この枠だけを点線で囲む（見出しは含めない） */
.deliverables__frame {
  border-radius: 4px;
  padding: clamp(24px, 4.2vw, 50px) clamp(16px, 6.7vw, 80px);
  margin-top: clamp(20px, 5vw, 60px);
  background:
    /* 上・下 */
    var(--dotted-image) top left / 100% var(--dot-height) repeat-x,
    var(--dotted-image) bottom left / 100% var(--dot-height) repeat-x,
    /* 左・右 */
    repeating-linear-gradient(to bottom,
      var(--dot-color) 0 var(--dot-on),
      transparent var(--dot-on) calc(var(--dot-on) + var(--dot-off))) top left / var(--dot-height) 100% repeat-y,
    repeating-linear-gradient(to bottom,
      var(--dot-color) 0 var(--dot-on),
      transparent var(--dot-on) calc(var(--dot-on) + var(--dot-off))) top right / var(--dot-height) 100% repeat-y;
  background-color: transparent;
}

.deliverables-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 10px;
}

.deliverables-list li {
  display: block;
  width: 100%;
  max-width: clamp(560px, 68vw, 960px);
  margin: 0 auto;
  background: #fff;
  border: 1px solid #CFCFCF;
  border-radius: 2px;
  overflow: hidden;
  box-sizing: border-box;
}

/* ラベル／本文が長くても枠外に伸びないように */
.deliverables-list__label,
.deliverables-list__desc {
  max-width: 100%;
  overflow-wrap: anywhere;
}


/* 上部のグリーン帯（タイトル） */
.deliverables-list__label {
  display: block;
  background: var(--c-green);
  color: #fff;
  font-weight: 800;
  font-size: clamp(16px, 3.2vw, 30px);
  letter-spacing: 1.8px;
  line-height: 1.13;
  padding: clamp(12px, 3vw, 20px) clamp(16px, 6.7vw, 80px);
  text-align: center;
}

/* 説明テキスト（白地＋上ボーダー） */
.deliverables-list__desc {
  display: block;
  padding: 10px clamp(16px, 6.7vw, 67px);
  font-size: clamp(14px, 2vw, 20px);
  line-height: 1.2;
  color: var(--c-text);
  border-top: 1px solid #CFCFCF;
}


/* ===================== 審査基準  ===================== */
/* 審査基準タイトル */
.section-title-criteria {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  z-index: 2;
}

.section-title-criteria img {
  display: block;
  width: 600px;
  /* PC・タブレット共通 */
  height: auto;
  position: relative;
  top: 100px;
  /* 下の枠にかぶせる量を調整 */
}


#criteria.gc {
  background: linear-gradient(180deg,
      #ffda64 0%,
      #98d551 70%,
      #00cd36 100%);
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(32px, 6vw, 56px);
}

.gc .container {
  position: relative;
  z-index: 2;
}

.gc__block {
  margin: clamp(20px, 5vw, 36px) 0;
}

.gc-title {
  display: block;
  margin: 0 auto clamp(12px, 2.2vw, 16px);
  width: min(460px, 80%);
}

#criteria .summary__box {
  margin: 0;
  /* 全方向ゼロ */
  padding-left: 0;
  padding-right: 0;
}

/* PCは改行する */
#criteria .criteria__intro .br--pc {
  display: inline !important;
}

.criteria__box {
  border: 9px solid var(--c-green);
  background: var(--c-bg);
  --grass-h: clamp(36px, 6vw, 72px);
  /* 芝生の高さ */
  position: relative;
  overflow: hidden;
  /* 枠外にはみ出させない */
  padding-bottom: calc(24px + var(--grass-h));
  /* 芝生ぶん下パディングを増やす */
  box-shadow: 2px 4px 16px #00000058;
}

/* 下ボーダーを消す（左右・上はそのまま） */
.criteria__box {
  border-bottom: none;
}

.criteria__box .accent {
  color: var(--c-light-green);
  font-weight: 800;
  font-size: 46px;
  line-height: 1.15;
}

.criteria__intro {
  margin: 40px;
  text-align: center;
  font-size: 26px;
  line-height: 1.53;
  color: var(--c-text);
}

/* リスト本体 */
.criteria__list {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  row-gap: 60px;
}

.criteria__item {
  text-align: center;
}

/* ---アイコン＋見出しを横並びで中央配置 --- */
.criteria__head {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* アイコン */
.criteria__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* icon横見出し */
.criteria__heading {
  margin: 0;
  font-size: 32px;
  line-height: 1.56;
  color: var(--c-middle-green);
  font-weight: 900;
  letter-spacing: .01em;
}

/* 説明文 */
.criteria__text p {
  margin: 0 auto;
  max-width: 780px;
  font-size: 20px;
  line-height: 1.35;
  color: var(--c-text);

}

/* 審査基準：説明文だけ左寄せ（アイコン＋見出しは中央のまま） */
#criteria .criteria__list .criteria__text {
  text-align: left;
}

#criteria .criteria__list .criteria__text p {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

/* 枠の一番下に、横幅ぴったりで芝生を敷く */
.criteria__grass {
  position: absolute;
  left: 0;
  right: 0;
  /* ← paddingボックス基準なので枠の内側ピッタリに収まる */
  bottom: 0;
  height: var(--grass-h);
  background: url("img/grass-bottom.png") center bottom / 100% auto no-repeat;
  pointer-events: none;
}



/* ===================== Concept（コンテストに込めた思い） ===================== */
.concept-section {
  background: url("img/bg-blue.png") center/cover no-repeat;
  padding: clamp(36px, 6vw, 68px) 0;
  position: relative;
  overflow: hidden;
}

/* タイトル画像（カードに重ねる） */
.concept-title {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-bottom: -60px;
  /* カードにかぶせる量 */
}

.concept-title img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
}

/* 白いカード */
.concept-card {
  position: relative;
  z-index: 1;
  background: var(--c-bg);
  border-radius: 0;
  border: 6px solid var(--c-light-green);
  padding: clamp(24px, 5vw, 40px);
  padding-top: calc(clamp(24px, 7vw, 80px) + 28px);
  padding-bottom: clamp(80px, 12vw, 140px);
  overflow: visible;
}

/* テキスト */
.concept-line {
  text-align: center;
  font-size: clamp(16px, 2.8vw, 32px);
  font-weight: 800;
  color: var(--c-green);
  margin: 0;
  letter-spacing: -1px;
  line-height: 1.5;
}

/* 区切り：ブロック画像 */
.concept-divider {
  display: block;
  width: 80px;
  height: auto;
  margin: clamp(14px, 4vw, 26px) auto;
}

/* 下部イラスト帯 */
.concept-city {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * clamp(20px, 7vw, 80px));
  /* 下に突き出す量（重なり具合） */
  margin: 0;
  pointer-events: none;
}

.concept-city img {
  width: 100%;
  height: auto;
  display: block;
}

/* セクション下に余白を足して、突き出した分が切れないようにする */
.concept-section {
  padding: clamp(36px, 6vw, 68px) 0;
  padding-bottom: calc(clamp(36px, 6vw, 68px) + clamp(20px, 4vw, 40px));
  position: relative;
  overflow: visible;
}




/* ===================== 大会賞品  ===================== */
/* 大会賞品タイトル */
.section-title-prizes {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.section-title-prizes img {
  display: block;
  width: 600px;
  /* PC・タブレット */
  height: auto;
}

#prize {
  margin-top: 10px;
}

#prize.section {
  background: var(--c-bg);
  padding: clamp(32px, 6vw, 56px) 0;
}

/* 賞品リスト */
.prize-list {
  list-style: none;
  margin: 0 0 60px;
  padding: 0;
  display: grid;
  gap: 20px;
}

/* 各賞の行 */
.prize-row {
  display: grid;
  grid-template-columns: 1fr auto;
  /* 左テキスト / 右写真 */
  align-items: center;
  gap: 12px;
  background: var(--c-bg);
  border: 8px solid #ffcf2f;
  border-radius: 0;
  padding: 20px;
}

/* 左側（メダル画像＋テキスト） */
.prize-left {
  display: grid;
  grid-template-columns: auto auto;
  /* [1]メダル [2]賞名 */
  grid-template-rows: auto auto;
  /* [1]上段 [2]下段=説明 */
  column-gap: 0;
  row-gap: 8px;
  justify-content: center;
  /* かたまりごと中央寄せ */
  justify-items: center;
  /* 各セルの中身も中央 */
  text-align: center;
  /* テキスト中央 */
}

.prize-text {
  display: contents;
}

.prize-text strong {
  grid-column: 2;
  /* 2列目（右） */
  grid-row: 1;
  /* 1行目 */
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--c-green);
  align-self: center;
  /* もしSafariでまだズレる場合は下2行も */
  display: inline-block;
  place-self: center;
}

/* 説明は2行目で左右にフルスパン */
.prize-text p {
  grid-column: 1 / -1;
  /* 1〜2列を横断 */
  grid-row: 2;
  /* 2行目 */
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text);
}

/* メダル画像 */
.prize-badge {
  width: 80px;
  height: 80px;
  grid-column: 1;
  /* 1列目（左） */
  grid-row: 1;
  /* 1行目 */
}


/* 右側（景品写真） */
.prize-right {
  display: flex;
  align-items: center;
}

/* 賞品画像 */
.prize-img {
  display: block;
  width: 420px;
  height: auto;
  object-fit: cover;
  /* 枠に合わせて切り取り表示 */
  border-radius: 10px;
  border: 3px solid #e5eef3;
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 rgba(0, 0, 0, .04);
}


/*  受賞作品発表会（prize-note）  */
.prize-note {
  margin-top: 16px;
  border: 6px solid var(--c-green);
  border-radius: 24px;
  padding: 12px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .12);
}

.prize-note .note {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 18px 22px 24px;
}

.note__heading {
  margin: 0 0 10px;
  text-align: center;
}

.note__heading .rule-title__label {
  margin-inline: auto;
  background: #fff;
  padding: 4px 10px;
}

/* 右上トロフィー */
.note__trophy {
  position: absolute;
  top: 18px;
  right: 60px;
  width: 84px;
  /* 64–84pxで調整可 */
  height: auto;
  pointer-events: none;
}

/* 日付＋場所（中央・太字） */
.note__date {
  margin: 6px 0 14px;
  text-align: center;
  font-size: clamp(20px, 3.4vw, 40px);
  font-weight: 800;
  color: var(--c-green);
}

.note__date strong {
  font-weight: 800;
}

.note__place {
  font-weight: 800;
}

/* 下段2カラム（左サムネ／右本文） */
.note__body {
  display: grid;
  grid-template-columns: clamp(180px, 32vw, 360px) 1fr;
  gap: 20px;
  align-items: start;
}

/* サムネ（グレー＋白インナー） */
.note__thumb {
  width: 100%;
  background: #fff;
  outline: 10px solid #fff;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.note__thumb img {
  width: 100%;
  height: auto;
  max-height: clamp(120px, 24vw, 220px);
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ===================== mid-CTA（呼びかけバナー） ===================== */
#mid-cta.bridge {
  position: relative;
  background: var(--c-bg);
  overflow: hidden;
  padding: clamp(28px, 5vw, 60px) 0 0;
}

/* 見出し行：［左あしらい］［タイトル］［右あしらい］ */
.bridge__headline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(8px, 1.6vw, 20px);
  margin: 0 0 clamp(14px, 2.4vw, 24px);
}

/* あしらい画像：PCでは大きく、モバイルでは自動で小さく */
.bridge__deco {
  position: static;
  width: clamp(140px, 14vw, 400px);
  height: auto;
  justify-self: center;
  pointer-events: none;
  /* ピクセル柄なら拡大時のにじみを抑える */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

/* タイトル */
.bridge__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.5;
  color: var(--c-green);
  letter-spacing: -2px;
}

.bridge__hash {
  color: var(--c-light-green);
  background: none !important;
  -webkit-background-clip: initial;
  background-clip: initial;
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  white-space: nowrap;
  letter-spacing: -2.8px;
}

/* 下部の横長画像（全幅ストリップ） */
.bridge__bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

.bridge__bottom img {
  width: 100%;
  height: auto;
  display: block;
}

.bridge__inner {
  text-align: center;
  margin-bottom: clamp(40px, 10vw, 200px);
  padding-bottom: 40px;
}

/* ===================== SPONSORS ==================== */

/* タイトル（画像＋※順不同） */
.section-title-sponsors {
  position: relative;
  margin-bottom: 2rem;
  text-align: center;
}

.section-title-sponsors img {
  display: block;
  width: 600px;
  height: auto;
  margin: 0 auto;
}

.section-title-sponsors .sponsors-note {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(calc(300px + 1rem));
  font-size: clamp(14px, 1.6vw, 24px);
  color: var(--c-middle-green);
  font-weight: 700;
  line-height: 1.2;
}

#sponsors .container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding-inline: clamp(12px, 4vw, 24px);
}

/* 見出し（左右ライン） */
#sponsors .sponsors-sub {
  width: 100%;
  margin: clamp(24px, 2vw, 48px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 40px);
  font-size: clamp(16px, 2vw, 24px);
  color: var(--c-middle-green);
}

#sponsors .sponsors-sub::before,
#sponsors .sponsors-sub::after {
  content: "";
  flex: 1 1 auto;
  height: clamp(1px, .3vw, 2px);
  background: var(--c-middle-green);
}

/* 共通ロゴリスト */
#sponsors .sponsors__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 60px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

#sponsors .sponsors__logos li {
  flex: 0 1 auto;
  max-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sponsors .sponsors__logos img {
  width: 100%;
  height: auto;
  max-height: 100px;
  object-fit: contain;
}

/* 後援（テキスト） */
#sponsors .sponsors__textlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

#sponsors .sponsors__textlist li {
  flex: 0 0 auto;
  font-size: clamp(16px, 2.8vw, 32px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--c-green);
  white-space: nowrap;
  text-align: center;
}

/* ---- 後援ロゴ ---- */
#sponsors .sponsors__logos--supporters li {
  max-width: 100%;
}

#sponsors .sponsors__logos--supporters img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

/* ---- メディア協賛・協力ロゴ（原寸維持） ---- */
#sponsors .sponsors__logos--media,
#sponsors .sponsors__logos--coopetation {
  display: flex;
  justify-content: center;
}

#sponsors .sponsors__logos--media li,
#sponsors .sponsors__logos--coopetation li {
  flex: 0 0 auto;
}

#sponsors .sponsors__logos--media img,
#sponsors .sponsors__logos--coopetation img {
  width: auto;              /* 原寸維持ベース */
  max-width: 100%;
  height: auto;
  max-height: none !important;
  display: block;
  object-fit: contain;
}

/* ---- メディア協賛＋協力 横並びレイアウト ---- */

/* メディア協賛 ＋ 協力 を横並びにするラッパー */
.sponsors__wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;      /* 画面が狭いときは縦並び */
  gap: 40px;            /* カラム間の余白 */
  margin-top: 32px;
}

/* 各ブロック（左：メディア協賛 / 右：協力） */
.sponsors__group {
  flex: 0 1 420px;      /* 横幅の目安。足りなければ折り返す */
  text-align: center;
}

/* .sponsors__wrap 内だけロゴリストを横並びに */
.sponsors__wrap .sponsors__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

/* スマホで縦並びに＆余白を詰める */
@media (max-width: 768px) {
  .sponsors__wrap {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
  }

  .sponsors__group {
    flex: 0 1 auto;
    width: 100%;
  }

  .sponsors__wrap .sponsors__logos {
    margin-top: 8px;
  }
}





/* ===================== NEWS ===================== */
.news .container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}

/** ニュースタイトル **/
.section-title-news {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.section-title-news img {
  display: block;
  width: 600px;
  height: auto;
}

/** 2カラムレイアウト **/
.news-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  /* 左：体験会／右：ニュース */
  gap: 36px;
}

/** 左カラム（体験会カレンダー＋ボタン） **/
.news-side {
  min-width: 0;
  width: 100%;
  max-width: 480px;
  /* ← 好きな幅に制限（例: 420〜480pxくらい） */
  margin-inline: auto;
}

.news-side .trialcal {
  width: 100%;
}

/* カレンダーとボタンの間隔 */
.news-side .cta-slot {
  margin-top: 24px;
}

/** 右カラム（ニュース一覧） **/
.news-main {
  min-width: 0;
}

.news-subtitle {
  font-weight: 900;
  font-size: clamp(16px, 2.3vw, 24px);
  margin: 0 0 12px;
  color: var(--c-green);
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-item {
  border-bottom: 1px solid var(--c-light-green);
}

.news-row {
  display: flex;
  /* 1行（サムネ左・テキスト右） */
  gap: 16px;
  padding: 16px 0;
}

.news-item:first-child .news-row {
  padding-top: 0;
}

.thumb-wrap {
  flex: 0 0 160px;
  height: 90px;
  border: 1px solid #d9dde3;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.news-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.news-date {
  font-size: 12px;
  color: var(--c-muted);
  margin: 0;
  align-self: flex-end;
}

.news-title {
  font-size: clamp(16px, 2.3vw, 20px);
  margin: 0;
  color: var(--c-green);
}

.news-excerpt {
  font-size: 12px;
  line-height: 1.6;
  color: #3a4a4a;
  margin: 0;
  overflow: hidden;
  max-height: calc(1.6em * 2);
}


/* ===================== FAQ ===================== */
/* FAQタイトル */
.section-title-faq {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.section-title-faq img {
  display: block;
  width: 600px;
  height: auto;
}

.faq {
  margin: 0;
  padding: 0;
  list-style: none;
  --faq-gap: 20px;
  --rule-color: #707070;
  --dotted-image: repeating-linear-gradient(to right,
      var(--rule-color) 0 var(--dot-on),
      transparent var(--dot-on) calc(var(--dot-on) + var(--dot-off)));
}

.faq .dotted-line {
  display: block;
  height: var(--dot-height);
  margin: 30px 0 0;
  background: var(--dotted-image);
  border-radius: 999px;
  opacity: .8;
}


/* 最初の上線だけ、線の直下にも余白を付与（質問文が近すぎないように） */
.faq-item:first-child>.dotted-line:first-of-type {
  margin-bottom: 30px;
}

.faq-item {
  position: relative;
  padding-block: var(--faq-gap);
}

.faq-q {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 6px 32px;
  text-align: left;
  cursor: pointer;
}

.faq-label {
  font-weight: bold;
  font-size: clamp(16px, 2vw, 24px);
  color: var(--c-green);
}

/* FAQのAラベルだけ色変更 */
.faq-a .faq-label {
  color: var(--c-text);
}


.faq-question {
  font-weight: bold;
  font-size: clamp(16px, 2vw, 24px);
  color: var(--c-green);
  line-height: 2;
}

.faq-caret {
  width: 20px;
  height: 20px;
  background: url("img/faq_arrow_up.png") no-repeat center/contain;
  transition: transform .2s ease;
}

/* 開いているときに下向きに回転 */
.faq-item.is-open .faq-caret {
  transform: rotate(180deg);
}

/* 回答領域 */
.faq-a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  margin-top: 10px;
  padding: 0 32px;
}

.faq-answer {
  font-size: clamp(14px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  color: #272727;
}

/* 開閉制御 */
.faq-a[hidden] {
  display: none;
}

.faq-item.is-open .faq-caret {
  transform: rotate(180deg);
}

/* ===================== Footer ===================== */
.site-footer {
  background: var(--c-green);
  color: #fff;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}

.footer-left {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-left: clamp(40px, 8.4vw, 100px);
}

.footer-logo {
  width: 400px;
  max-width: 100%;
  height: auto;
  margin-bottom: 22px;
  display: block;
}

.footer-note {
  margin: 0;
}

.footer-right {
  flex: 1 1 360px;
  display: grid;
  justify-items: end;
  row-gap: 0px;
  text-align: right;
  padding-right: clamp(40px, 8.4vw, 100px);
  padding-top: clamp(24px, 6vw, 60px);
  padding-bottom: clamp(24px, 6vw, 60px);
}

.footer-msg {
  max-width: 420px;
  justify-self: end;
  margin-bottom: 20px;
}

.btn-footer {
  justify-self: end;
}

.footer-right .btn-img {
  margin: 0;
  justify-self: end;
}

.btn-footer img {
  max-width: 420px;
  height: auto;
  display: block;
}

.footer-links {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px 50px;
  justify-content: end;
}

.footer-links li {
  text-align: right;
}

.footer-links a {
  font-size: 14px;
  color: #50E678;
  text-decoration: none;
  white-space: nowrap;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-disclaimer {
  color: #D1D1D1;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 12px;
  line-height: 1.7;
  text-align: right;
  margin: 26px 0 0;
  font-weight: normal;
  max-width: 100%;
}

/* コピーライト帯 */
.footer-copyright {
  background: #fff;
  text-align: center;
  padding: 9px 0;
}

.footer-copyright p {
  margin: 0;
  font-size: 9px;
  color: #38AC57;
  font-weight: 300;
}


/* =========================================================
   以下Responsive対応 (global)
   ========================================================= */

/* 1200px～ */
@media (min-width: 1200px) {

  /* ===================== 体験会（白背景）===================== */
  .trial.trial--revamp .trial-body {
    max-width: calc(1000px - 417px - 36px);
  }

  .trial.trial--revamp .trial-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ===================== コンテスト概要（テーマ詳細） ===================== */
  .dept-list {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0px;
  }

  .bridge__title .nowrap {
    white-space: nowrap;
  }

  /* ===================== SPONSORS ===================== */
  #sponsors .container {
    padding-inline: 0;
  }


  /* ===================== footer ===================== */
  .footer-disclaimer .no-break {
    white-space: nowrap;
  }

  .footer-logo {
    width: 400px;
    max-width: 400px;
    /* これ以上大きくならない */
  }
}



/* 1025~1278px  */
@media (min-width: 1025px) and (max-width: 1278px) {

  /* ===================== footer ===================== */
  .footer-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 32px;
  }

  .footer-logo {
    width: clamp(360px, 32vw, 400px);
  }

  .footer-msg,
  .btn-footer img {
    max-width: clamp(360px, 32vw, 420px);
  }

  .footer-links {
    gap: 6px 40px;
  }

  .footer-left,
  .footer-right {
    flex: 1 1 0;
  }
}

/* ～1024px */
@media (max-width: 1024px) {
  .container {
    padding: 0 48px;
  }

  .ph-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand__logo {
    width: 220px;
    height: auto;
  }

  /* ===================== Header ===================== */
  .nav-desktop .nav-menu {
    gap: 2px;
    font-size: 0.9rem;
  }


  /* ===================== 体験会（白背景）===================== */
  .trial.trial--revamp {
    grid-template-columns: 1fr;
    row-gap: clamp(12px, 3.2vw, 20px);
    padding-inline: clamp(28px, 8.5vw, 60px);
    padding-top: clamp(8px, 3vw, 14px);
    padding-bottom: clamp(10px, 3.2vw, 16px);
  }

  .trial-body {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: clamp(16px, 6vw, 32px);
  }

  .trial-left {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 417px;
    /* ここでも “上限だけ” 417。画面に合わせて縮む */
    margin-inline: auto;
    gap: 12px;
  }

  .trial-badge {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    justify-content: center;
  }

  .trial-badge>span {
    text-align: center;
  }

  .trial-badge>span::before,
  .trial-badge>span::after {
    left: 50%;
  }

  .trial-title {
    text-align: center;
  }

  .trial-desc {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }


  /* ===================== 表彰式 ===================== */
  /*見出しhead_img*/
  .section-title-award {
    padding: 0 20px;
    /* ← 親に左右余白を追加！ */
  }

  .section-title-award img {
    width: 100%;
    max-width: 600px;
  }

  
  /* ===================== テーマ詳細 (オレンジ背景) ===================== */
  /*見出しhead_img*/
  .section-title-summary img {
    width: 500px;
  }

  /* ===================== 橋本ワールドDL ===================== *
  /*見出しhead_img*/
  .section-title-worlddl img {
    width: 687px;
  }

  /* ===================== Flow Section (応募ステップ) ===================== */
  /*見出しhead_img*/
  .section-title-method img {
    width: 500px;
  }


  /* ===================== 審査基準 ===================== */
  #criteria .summary__box {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .section-title-criteria img {
    width: 500px;
  }

  /* =====================　大会賞品　===================== */
  /*見出しhead_img*/
  .section-title-prizes img {
    width: 500px;
  }

  /* =====================　CTA　===================== */


  /* ===================== SPONSORS ==================== */
  /*見出しhead_img*/
  .section-title-sponsors img {
    width: 500px;
  }

  /* ===================== NEWS ===================== */
  /*見出しhead_img*/
  .section-title-news img {
    width: 500px;
  }

  /* ===================== FAQ ===================== */
  /*見出しhead_img*/
  .section-title-faq img {
    width: 500px;
  }


  /* ===================== footer ===================== */
  .footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 20px;
  }

  .footer-left {
    padding-left: 0;
    margin-top: 60px;
  }

  .footer-logo {
    width: 360px;
    margin-bottom: 16px;
  }

  .footer-right {
    justify-items: center !important;
    text-align: center !important;
    padding-right: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 60px;
  }

  .footer-msg {
    justify-self: center !important;
  }


  .footer-right .btn-img {
    margin: 0 auto !important;
    justify-self: center !important;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: 8px;
    justify-content: center !important;
    justify-items: center !important;
    margin-top: 20px;
  }

  .footer-links li {
    text-align: center !important;
  }

  .footer-disclaimer {
    text-align: center !important;
    margin-top: 20px;
  }
}


/* ～900px */
@media (max-width: 900px) {
  /* ===================== Headerとハンバーガーメニュー ===================== */

  .header {
    z-index: 1600 !important;
    /* !importantで確実に上書き */
  }

  .brand__logo {
    width: 300px;
    height: auto;
  }

  /* ハンバーガーメニュー表示 */
  .hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    z-index: 2000 !important;
  }

  /* ハンバーガーメニューのバーをより見やすく */
  .hamburger span {
    background-color: #333 !important;
  }

  /* アクティブ状態のハンバーガーメニュー（バツ印） */

  .hamburger.active span:nth-child(1) {
    top: 14px !important;
    transform: rotate(45deg) !important;
    background-color: #333 !important;
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0 !important;
  }

  .hamburger.active span:nth-child(3) {
    top: 14px !important;
    transform: rotate(-45deg) !important;
    background-color: #333 !important;
  }

  /* 通常ナビを非表示に */
  .nav-desktop {
    display: none !important;
  }

  /* モバイルナビゲーションの初期設定 */
  .nav-mobile {
    display: flex !important;
    right: -100% !important;
    transition: right 0.3s ease !important;
  }

  /* アクティブ時のみ画面内に表示 */
  .nav-mobile.active {
    display: flex;
    right: 0 !important;
  }

  /* オーバーレイの調整 */
  .menu-overlay {
    z-index: 1400 !important;
  }

  .nav-mobile .nav-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    width: 100% !important;
    font-size: 1rem;
    color: var(--c-green) !important
  }

  /* ===================== Hero ===================== */
  .hero-visual {
    aspect-ratio: 16 / 10;
    max-height: none;
    border-radius: 12px;
  }

  .hero-titleimg {
    width: min(92%, 680px);
  }

  /* ===================== 魅力（緑背景） ===================== */

  #overview .overview__appeal {
    --mobile-gutter: clamp(32px, 9vw, 60px);
    --overlap: max(14px, 3.2vw);
    --raiseY: 12px;
    padding-top: clamp(32px, 7vw, 56px);
    padding-bottom: clamp(24px, 6vw, 40px);
  }

  #overview .overview__appeal .container.appeal.appeal--revamp,
  #overview .appeal__desc--white {
    padding-inline: var(--mobile-gutter);
  }

  #overview .overview__appeal .container.appeal.appeal--revamp {
    gap: max(8px, 2vw);
  }

  #overview .appeal__titlewrap {
    flex: 0 1 84%;
    min-width: 0;
  }

  #overview .appeal__visuals {
    flex: 0 1 16%;
    margin-left: calc(-1 * var(--overlap));
    transform: translateY(calc(-1 * var(--raiseY)));
  }

  #overview .appeal__heroimg {
    max-width: clamp(96px, 18vw, 140px);
    margin-bottom: clamp(2px, 1.2vw, 8px);
  }

  #overview .appeal__desc--white {
    margin-top: clamp(8px, 2.4vw, 12px);
    margin-bottom: clamp(16px, 6vw, 32px);
  }

 /* ===================== 表彰式 ===================== */
  .overview__award .summary__box {
    padding: 2rem 1rem;
    margin-left: clamp(16px, 5vw, 40px);
    margin-right: clamp(16px, 5vw, 40px);
    box-sizing: border-box;
  }


  /* ===================== テーマ詳細(オレンジ背景) ===================== */
  /*見出しhead_img*/
  .section-title-summary img {
    width: 460px;
    top: 88px;
  }

  .theme-list__row {
    grid-template-columns: 1fr;
    border-top: none;
    padding: 10px 0;
  }

  .theme-list__row dt {
    justify-self: center;
    text-align: center;
  }

  .theme-list__row dd {
    margin: 1.5rem 0;
  }

  /* ===================== 橋本ワールドDL ===================== *
  /*見出しhead_img*/
  .section-title-worlddl img {
    width: 626px;
  }

  .worlddl__btns {
    gap: 60px;
    /* 少し詰める */
  }

  .btn-img--dl img {
    width: clamp(240px, 60vw, 320px);
  }

  /* ===================== Flow Section (応募ステップ) ===================== */
  /*見出しhead_img*/
  .section-title-method img {
    width: 460px;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .steps-line {
    display: none;
  }

  .step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num title"
      "icon text";
    align-items: center;
    gap: 10px 12px;
    text-align: left;
    padding: 12px 10px;
  }

  .step-circle {
    grid-area: num;
    border-width: 3px;
    font-size: clamp(16px, 4.6vw, 20px);
    margin: 0 auto;
  }

  .step-circle img {
    transform: scale(1.2);
  }

  .step-title {
    grid-area: title;
    display: block;
    margin: 0;
    font-size: 24px;
    color: var(--c-green);
    align-self: center;
  }

  .step-icon {
    grid-area: icon;
    justify-self: start;
    margin: 0;
    width: clamp(96px, 32vw, 140px);
    height: clamp(72px, 24vw, 110px);
    justify-self: start;

  }

  .step-icon img {
    max-width: 92%;
    max-height: 92%;
    height: auto;
    width: auto;
    display: block;
    margin-top: 0;
  }

  .step-text {
    grid-area: text;
    margin: 0;
    max-width: none;
    line-height: 1.5;
  }

  /* =====================　審査基準　===================== */
  .criteria__box .accent {
    font-size: 36px;
  }

  /*見出しhead_img*/
  .section-title-criteria img {
    width: 460px;
    top: 88px;
  }


  /* =====================　大会賞品　===================== */
  /*見出しhead_img*/
  .section-title-prizes img {
    width: 460px;
  }

  .prize-row {
    grid-template-columns: 1fr;
  }

  .prize-left {
    display: block;
  }

  .prize-text p {
    margin: 10px 0;
  }

  .prize-right {
    display: flex;
    justify-content: center;
  }

  .prize-badge {
    width: 64px;
    height: 64px;
  }

  .note__body {
    grid-template-columns: 420px 1fr;
    gap: 24px;
  }

  .note__date .note__place {
    display: block;
    /* ← ここで改行 */
    margin-top: .2em;
  }

  /* 右上トロフィー */
  .note__trophy {
    top: 5px;
    right: 80px;
    width: 60px;
  }

  .note__body {
    grid-template-columns: 1fr;
    /* 1カラム化 */
    gap: 14px;
  }

  .note__thumb {
    height: auto;
  }

  /* ===================== mid-CTA（呼びかけバナー） ===================== */
  .bridge__headline {
    gap: clamp(6px, 2vw, 14px);
  }

  .bridge__deco {
    width: clamp(72px, 30vw, 140px);
  }

  .bridge__title {
    line-height: 1.32;
  }

  /* ===================== SPONSORS ==================== */
  /*見出しhead_img*/
  .section-title-sponsors img {
    width: 460px;
  }

  .sponsors-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  /* ===================== NEWS ===================== */
  /*見出しhead_img*/
  .section-title-news img {
    width: 460px;
  }

  .news-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .news-main {
    order: 1;
    padding: 0 20px;
  }

  .news-side {
    order: 2;
  }

  .news-row {
    gap: 12px;
    padding: 14px 0;
  }

  .thumb-wrap {
    flex: 0 0 96px;
    height: 72px;
  }

  /* ===================== FAQ ===================== */
  /*見出しhead_img*/
  .section-title-faq img {
    width: 460px;
  }
}


/* ～768px */
@media (max-width: 768px) {
  .container {
    padding: 24px;
  }

  /* ===================== テーマ詳細(オレンジ背景) ===================== */
  .summary__box {
    margin: 0;
    padding: 2rem 1rem;
  }

  /*見出しhead_img*/
  .section-title-summary img {
    width: 400px;
    top: 80px;
  }

  /* ===================== 橋本ワールドDL ===================== *
  /*見出しhead_img*/
  .section-title-worlddl img {
    width: 544px;
  }

  .worlddl__btns {
    flex-direction: column;
    gap: 24px;
  }

  .worlddl__note {
    font-size: 16px;
  }

  .worlddl__help {
    font-size: 14px;
  }


  /* ===================== Flow Section (応募ステップ) ===================== */
  /*見出しhead_img*/
  .section-title-method img {
    width: 400px;
  }


  /* ===================== 審査基準 ===================== */
  /*見出しhead_img*/
  .section-title-criteria img {
    width: 400px;
    top: 80px;
  }

  #criteria .criteria__intro .br--pc {
    display: none !important;
  }

  .criteria__item {
    grid-template-columns: 60px 1fr;
    column-gap: 16px;
  }

  .criteria__box .accent {
    font-size: 24px;
  }

  .criteria__intro {
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 26px;
    text-align: start;
  }

  .criteria__heading {
    font-size: 20px;
  }

  .criteria__text p {
    font-size: 16px;
  }

  .criteria__grass {
    height: 40px;
    background-size: auto 40px;
    background-repeat: repeat-x;
    transform: translateX(-20px);
    width: calc(100% + 40px);
  }

  /* ===================== Concept（コンテストに込めた思い） ==================== */
  .concept-title {
    margin-bottom: -44px;
  }

  /* =====================　大会賞品　===================== */
  /*見出しhead_img*/
  .section-title-prizes img {
    width: 400px;
  }

  /* ===================== SPONSORS ==================== */
  /*見出しhead_img*/
  .section-title-sponsors img {
    width: 400px;
  }

  .section-title-sponsors {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .section-title-sponsors .sponsors-note {
    position: static;
    transform: none;
  }

  #sponsors .sponsors__logos {
    gap: 20px;
  }

  #sponsors .sponsors__logos li {
    flex: 1 1 calc(50% - 20px);
    max-width: none;
    height: 80px;
  }

  #sponsors .sponsors__logos img {
    max-height: 75px;
  }

  #sponsors .sponsors__textlist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 24px;
  }

  #sponsors .sponsors__textlist li {
    flex: unset;
  }

  /* 協力ロゴだけリセット */
  #sponsors .sponsors__logos--coopetation li {
    flex: 0 0 auto;
    height: auto;
  }

  #sponsors .sponsors__logos--coopetation img {
    width: 70%;
    max-width: 70%;
    height: auto;
    max-height: none;
  }

  #sponsors .sponsors__logos--media img {
    max-width: 180px; /* ← お好みで160〜200pxくらいでもOK */
  }


  /* ===================== NEWS ===================== */
  /*見出しhead_img*/
  .section-title-news img {
    width: 400px;
  }

  /* ===================== FAQ ===================== */
  /*見出しhead_img*/
  .section-title-faq img {
    width: 400px;
  }
}

/* ～600px */
@media (max-width: 600px) {

  /* =====================  FV ===================== */
  .fv {
    --cta-overlap: 24px;
    --cta-space: 60px;
  }

  .hero-visual {
    aspect-ratio: 16 / 9;
    /* 高さを浅くする */
  }

  .fv .btn-img--cta.btn-img--overlap img {
    max-width: none !important;
    height: auto;
    width: 280px;
  }

  .hero-titleimg {
    width: min(820px, 100%);
  }

  /* ===================== 表彰式 ===================== */
  .award__prizes ul {
    flex-direction: column;
    align-items: flex-start;
  }

  /* マージンをリセットして上下に均等余白を付け直す */
  .award__prizes li {
    margin: 0.5rem 0 0 20px;
    width: 100%;
    white-space: normal;
    justify-content: flex-start;
  }

  .award__prizes li + li {
    margin-left: 20px; 
  }

  .award__prizes li:nth-child(n + 4) {
    margin-top: 0; /* ← 縦用は共通でmargin: 0.5rem 0 に統一 */
  }

  .guest__box {
    padding: 2rem 0; /* ← 上下だけ余白、左右は詰める */
  }

  /* ===================== 体験会（白背景） ===================== */
  .trial-catch-wrap {
    padding: 0 20px 1.4rem;
  }

  .trial-catch {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.4;
  }

  .trial-catch__note {
    font-size: 14px;
  }

  /* ===================== Flow Section (応募ステップ) ===================== */
  .step {
    gap: 10px 0px;
    padding: 12px 0px;
    margin: 0;
  }

  /* ===================== 審査基準・賞品 ===================== */

  .criteria__list {
    row-gap: 40px;
  }

  .gc-title {
    width: min(360px, 86%);
  }

  .criteria-frame {
    width: 96%;
    padding: 7% 7% 12%;
  }

  #criteria .summary__box {
    margin: 0;
    /* 全方向ゼロ */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* カレンダー */
  .cal__cell {
    min-height: 32px;
  }

  .cal__title {
    font-size: 20px;
  }

  .cal__nav {
    width: 34px;
    height: 28px;
  }

  .note__trophy {
    top: 0px;
    right: 40px;
    width: 60px;
  }

  .note__thumb {
    height: auto;
    outline-width: 8px;
    border-width: 8px;
    outline-width: 8px;
  }

  /* ===================== mid-CTA（呼びかけバナー） ===================== */

  #mid-cta .bridge__deco {
    width: clamp(40px, 30vw, 100px);
  }

  #mid-cta .bridge__headline {
    gap: clamp(4px, 1.6vw, 10px);
  }

  .bridge__title {
    font-size: 16px;
    letter-spacing: -1px;
  }

  /* ===================== footer ===================== */
  .footer-logo {
    width: 280px;
  }

  .footer-msg,
  .btn-footer img {
    max-width: 280px;
  }

  .footer-links a {
    font-size: 13px;
  }

  .footer-disclaimer {
    font-size: 11px;
    line-height: 1.6;
  }
}

/* ～480px */
@media (max-width:480px) {

  /* ===================== 魅力（緑背景）===================== */
  #overview .overview__appeal {
    padding-top: clamp(16px, 6vw, 36px);
  }

  #overview .overview__appeal .container.appeal.appeal--revamp {
    position: relative;
    gap: 0;
    padding-left: var(--mobile-gutter, 40px);
    padding-right: var(--mobile-gutter, 40px);
  }

  #overview .appeal__titlewrap {
    flex: 0 1 auto;
    width: 100%;
    margin-top: clamp(4px, 2vw, 12px);
    position: relative;
    z-index: 2;
  }

  #overview .appeal__visuals {
    position: absolute;
    right: var(--mobile-gutter, 40px);
    top: clamp(14px, 7vw, 36px);
    margin: 0;
    transform: none;
    z-index: 1;
  }

  #overview .appeal__heroimg {
    max-width: clamp(70px, 14vw, 110px);
    height: auto;
    object-fit: contain;
    margin: 0;
  }
}

/* ～400px */
@media (max-width: 400px) {
  .container {
    padding: 24px;
  }

  /* ===================== calendar ===================== */
  .trialcal__legendwrap {
    margin: .4rem 0 1rem;
  }

  /* ===================== Header ===================== */

  .brand__logo {
    width: 250px;
    height: auto;
  }

  /* ===================== 体験会（白背景）===================== */
  .trial.trial--revamp {
    padding-inline: clamp(32px, 11vw, 72px);
    padding-top: clamp(6px, 2.6vw, 12px);
    padding-bottom: clamp(8px, 2.8vw, 12px);
    row-gap: clamp(10px, 3vw, 16px);
  }

  .trial-badge>span {
    font-size: clamp(15px, 4.5vw, 26px);
  }

  .trial-title {
    font-size: clamp(18px, 6.6vw, 34px);
  }

  /* ===================== テーマ詳細(オレンジ背景) ===================== */
  /*見出しhead_img*/
  .section-title-summary img {
    width: 280px;
    top: 66px;
  }

  /* ===================== 橋本ワールドDL ===================== *
  /*見出しhead_img*/
  .section-title-worlddl img {
    width: 380px;
  }

  /* ===================== 応募方法 ===================== */
  /*見出しhead_img*/
  .section-title-method img {
    width: 280px;
  }

  .deliverables-list__label {
    padding: clamp(12px, 3vw, 20px) 0;
  }


  /* ===================== 審査基準 ===================== */
  /*見出しhead_img*/
  .section-title-criteria img {
    width: 280px;
    top: 70px;
  }

  .criteria__intro {
    margin: 20px 0;
  }

  /* ===================== Concept（コンテストに込めた思い） ==================== */
  .concept-title {
    margin-bottom: -22px;
  }

  /* ===================== 大会賞品 ===================== */
  /*見出しhead_img*/
  .section-title-prizes img {
    width: 280px;
  }

  /*  受賞作品発表会（prize-note）  */
  .prize-note .note {
    padding: 18px 6px 24px;
  }

  /* 右上トロフィー */
  .note__trophy {
    top: 15px;
    right: 30px;
    width: 40px;
  }

  /* ===================== mid-CTA（呼びかけバナー） ===================== */
  #mid-cta.bridge {
    padding: 0;
  }

  /* ===================== SPONSORS ==================== */
  /*見出しhead_img*/
  .section-title-sponsors img {
    width: 280px;
  }

  /* ===================== NEWS ===================== */
  /*見出しhead_img*/
  .section-title-news img {
    width: 280px;
  }

  /* ===================== FAQ ===================== */
  /*見出しhead_img*/
  .section-title-faq img {
    width: 280px;
  }

  .faq-q {
    padding: 6px 0;
  }

  .faq-a {
    padding: 0;
  }

}

/* ========== 横スク応急止：1200〜1218pxだけ ========== */
@media (min-width:1200px) and (max-width:1218.98px) {

  html,
  body {
    overflow-x: clip;
  }

  .footer-right {
    transform: scaleX(0.99);
    transform-origin: 100% 50%;
    /* 右端基準で圧縮＝見た目の位置は変えない */
    will-change: transform;
  }
}