@charset "UTF-8";

/* ================================
   Reset & Base
================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --blue: #0B5198;
  --pink: #C85D88;
  --orange: #E73C0D;
  --bg: #FCFCFC;
  --gray: #8C8C8C;
  --grad: linear-gradient(90deg, #0B5198 0%, #C85D88 63.94%, #E73C0D 100%);
  --grad-q: linear-gradient(137.5deg, #0B5198 15%, #C85D88 61.05%, #E73C0D 87.01%);
}

html {
  scroll-behavior: smooth;
}

/* 装飾写真などの横はみ出しでモバイルのレイアウトビューポートが
   広がるのを防ぐ（広がると right:0 のドロワー等が画面外に切れる） */
html, body {
  overflow-x: hidden; /* clip未対応の旧ブラウザ向けフォールバック */
  overflow-x: clip;
}

/* ローディング完了後にふわっと表示。
   is-loadingはhead内スクリプトで付与→main.jsのload時に除去（JS無効時は即時表示） */
body {
  transition: opacity .6s ease;
}

html.is-loading body {
  opacity: 0;
}

/* スクロールに合わせたふわっと表示（.revealはJSが付与） */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}

.reveal.is-inview {
  opacity: 1;
  transform: none;
}

/* OSで「動きを減らす」設定中はアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  body,
  .btn,
  .sp-menu-cta,
  .fixed-cta-btn,
  .reveal {
    transition: none !important;
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: var(--blue);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* 769px以上はJS（js/main.js）で body に zoom を掛け、
   1440pxカンプを画面幅に合わせて等倍縮小する */

/* PC/SP出し分け */
.sp-only,
.sp-br,
.menu-toggle,
.sp-menu,
.sp-menu-overlay,
.fixed-cta {
  display: none;
}

.sp-inline {
  display: none;
}

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

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

ul, li {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.flip-x img {
  transform: scaleX(-1);
}

/* ================================
   共通パーツ
================================ */

/* グラデーション文字 */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* グラデーション枠線 */
.g-border {
  position: relative;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--gb-bg, var(--bg)), var(--gb-bg, var(--bg))) padding-box,
    var(--grad) border-box;
}

/* 見出し */
.h2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.h2 h2 {
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--blue);
  text-align: center;
  line-height: normal;
  white-space: nowrap;
}

.slash-title {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.slash {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--slash-w, 8.4px);
  height: var(--slash-h, 24.4px);
}

.slash img {
  width: 26px;
  min-width: 26px;
  height: 2px;
}

.slash-l img {
  transform: rotate(71.03deg);
}

.slash-r img {
  transform: rotate(108.97deg); /* デザイナーFB: 「／」向きに修正 */
}

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
  transition: transform .15s ease;
}

/* ホバーで少し凹み、クリック（押下中）でさらに沈む「押し込み」の表現 */
@media (hover: hover) {
  .btn:hover {
    transform: translateY(2px);
  }
}

.btn:active {
  transform: translateY(3px) scale(.985);
  transition-duration: .06s;
}

.btn-pill {
  height: 60px;
  padding: 8px 24px;
  font-size: 16px;
  border: 3px solid transparent;
  border-radius: 70px;
  background:
    linear-gradient(#F1F3F6, #F1F3F6) padding-box,
    var(--grad) border-box;
}

.btn-fv {
  height: 60px;
  padding: 8px 24px;
  font-size: 16px;
  border: 3px solid transparent;
  border-radius: 70px;
  background:
    linear-gradient(#F1F3F6, #F1F3F6) padding-box,
    var(--grad) border-box;
}

/* ================================
   ヘッダー
================================ */
.header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 118px;
  padding: 0 40px 0 72px;
}

.header-nav {
  display: flex;
  gap: 36px;
}

.header-nav a {
  font-size: 14px;
  font-weight: 700;
  line-height: 32px;
  color: var(--blue);
  white-space: nowrap;
  transition: opacity .3s;
}

.header-nav a:hover {
  opacity: .7;
}

.header-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header-btns {
  display: flex;
  gap: 8px;
}

/* ================================
   FV
================================ */
.fv {
  position: relative;
  height: auto;
  overflow: hidden;
}

/* 背景写真とキャッチコピーを同じ基準ボックスに入れ、
   写真のアスペクト比に合わせて一緒に伸縮させる */
.fv-bg {
  position: relative;
  margin-top: 118px;
  width: 100%;
  aspect-ratio: 1441 / 786;
}

.fv-bg picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv-catch {
  position: absolute;
  top: 2.67%;   /* 21px / 786px */
  left: 6.32%;  /* 91px / 1441px */
  width: 46.08%; /* 664px / 1441px */
  transform: rotate(-8.57deg);
}

.fv-title {
  position: absolute;
  top: 391px;
  left: calc(50% + 394px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.fv-tagline {
  display: flex;
  gap: 16px;
  font-size: 16px;
  color: var(--blue);
  white-space: nowrap;
}

.fv-tagline-ja {
  letter-spacing: 0.2em;
}

.fv-tagline-en {
  font-family: "Lato", sans-serif;
  letter-spacing: 0.3em;
}

.fv-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.fv-main-row {
  display: flex;
  align-items: center;
}

.fv-main-logo {
  margin-right: -5px;
}

.fv-badge {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  font-size: 16px;
  line-height: normal;
  text-align: center;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
  white-space: nowrap;
}

.fv-period {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.fv-period-label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 15px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #fff;
  background: var(--blue);
  border-radius: 4px;
}

.fv-period-dates {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "Lato", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: #fff;
}

.fv-period-dates .date {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fv-period-dates small {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ================================
   イベント概要（コンセプト）
================================ */
.overview {
  position: relative;
  padding-top: 180px;
  background-color: #F1EAE7;
}

.overview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/texture-overview.webp") top left / 341px 256px repeat;
  pointer-events: none;
}

.overview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0) 89.55%, #FCFCFC 100%);
  pointer-events: none;
}

.concept {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  width: 100%;
}

.concept-heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.concept-heading-row {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  font-size: 40px;
  letter-spacing: 0.1em;
  line-height: 1.7;
  white-space: nowrap;
}

.concept-maru {
  color: #FC4411;
}

.concept-underline {
  position: absolute;
  top: 57px;
  left: 236.7px;
}

.concept-heading-sub {
  font-size: 40px;
  letter-spacing: 0.1em;
  line-height: 1.7;
  white-space: nowrap;
}

.concept-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 18px;
  letter-spacing: 0.08em;
  line-height: 2.6;
  color: var(--blue);
  text-align: left;
  white-space: nowrap;
}

.concept-body b {
  font-weight: 700;
}

/* 装飾写真 */
.concept-ph {
  position: absolute;
  overflow: hidden;
}

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

.ph1 { left: 0; top: 80px; width: 240px; height: 204px; }
.ph1 img { transform: scaleX(-1); }
.ph2 { left: 226px; top: 533px; width: 102px; height: 72px; filter: blur(2px); }
.ph3 { right: 181px; top: 484px; width: 148px; height: 104px; filter: blur(6px); }
.ph4 { right: 142px; top: -64px; width: 206px; height: 144px; }
.ph5 { left: 98px; top: 392px; width: 179px; height: 126px; }
.ph5 img { transform: scaleX(-1); }
.ph6 { right: 0; top: 320px; width: 294px; height: 196px; }

/* ================================
   テーマ
================================ */
.theme {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200px 120px 100px;
}

.theme-heading {
  position: absolute;
  top: 123px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.theme-heading .slash-title {
  font-size: 24px;
  letter-spacing: 0.1em;
}

.theme-band {
  position: relative;
  width: 353px;
  height: 76.3px;
}

.theme-band img {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 361px;
  height: 84px;
  max-width: none;
}

.band-char-unused {
  position: absolute;
  width: 47px;
  font-size: 44px;
  line-height: 1.6;
  text-align: center;
  color: #fff;
}

.band-char.c1 { left: 14px; top: 3px; }
.band-char.c2 { left: 83px; top: 2px; }
.band-char.c3 { left: 152px; top: 1px; }
.band-char.c4 { left: 223px; top: 1px; }
.band-char.c5 { left: 294px; top: 1px; }

.theme-heading-bottom {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
}

.theme-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 1200px;
  padding: 100px 60px 80px;
  border-radius: 8px;
}

/* 透過背景のグラデーション枠線 */
.theme-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.theme-lead {
  font-size: 18px;
  line-height: 2.2;
  text-align: center;
  color: var(--blue);
}

.theme-cards {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.theme-card {
  position: relative;
  flex: 1;
  filter: drop-shadow(10px 10px 10px rgba(54, 47, 47, .07));
}

.theme-card2 {
  flex: 0 0 344px;
  margin-top: 80px;
}

.theme-card-title {
  position: absolute;
  top: -39px;
  left: 74px;
  z-index: 2;
  display: flex;
  align-items: center;
}

.theme-card-title-center {
  left: 50%;
  transform: translateX(-50%);
}

.theme-card-title .grad-text {
  font-size: 48px;
  line-height: 1.6;
  white-space: nowrap;
}

.mesen {
  position: relative;
  width: 53px;
  height: 53px;
}

.mesen i {
  position: absolute;
  top: 13.5px;
  left: 10.8px;
  font-style: normal;
  font-size: 16.2px;
  line-height: 1.6;
  color: var(--blue);
  white-space: nowrap;
}

.theme-card-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  padding: 40px 32px 32px;
  background: #F9F9F9;
  border-radius: 8px 8px 0 0;
}

.theme-card-text p {
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
  color: var(--blue);
}

.theme-card-img {
  height: 170px;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

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

/* ================================
   参加特典
================================ */
.benefits {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  padding: 100px 187px;
  background: var(--bg);
  overflow: hidden;
}

.award-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 800px;
}

.award-card {
  display: flex;
  gap: 40px;
  align-items: center;
  border-radius: 8px;
}

.award-card1 {
  padding: 32px 120px 32px 24px;
  align-items: flex-start;
  min-height: 170px; /* カンプのカード高。広報紙モックは右下に接地 */
}

.award-card2 {
  padding: 24px;
  min-height: 134px; /* カンプのカード高。スマホイラストは下端に接地 */
}

.award-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  flex: 0 0 180px;
}

.award-name {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
  white-space: nowrap;
}

.award-name2 {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--blue);
}

.award-count {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--blue);
}

.award-count em {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  letter-spacing: 0.1em;
  line-height: 1.1;
}

.award-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.award-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}

/* 特典のモック画像はカードの下端に接地させ、右端はスマホイラストと縦ラインを揃える */
.award-sample {
  position: absolute;
  right: 71px; /* .award-illust と同じ右位置 */
  bottom: 0;
  display: block;
  width: 117px;
  height: auto;
}

.award-illust {
  position: absolute;
  right: 71px;
  bottom: 0;
}

/* ================================
   応募の流れ
================================ */
.flow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  padding: 100px 0;
  background: var(--bg);
  overflow: hidden;
}

/* アーチ形の背景。画像一枚バケをやめ、注意事項セクションと同一の
   焼き込み済みタイル（texture-beige.webp ＝ #E2DDDA×lighten80%合成済み）を敷いて
   色・質感を完全に一致させ、境目を消す。
   ※mix-blend-modeでのライブ合成はbodyのzoom縮小と併用すると描画されないため不使用 */
.flow-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width: 1441px;
  height: 473px;
  background: url("../assets/texture-beige.webp") top left / 351px 263px repeat #E2DDDA;
  border-radius: 200px 200px 0 0;
}

.flow-cards {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 1200px;
}

.flow-arrow {
  display: flex;
  align-items: center;
}

.step-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  width: 360px;
  padding: 40px 24px;
  border-radius: 16px;
}

.step-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.step-mid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.step-foot {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
  margin-top: auto; /* カードの高さが揃うとき、ボタン等を下端に寄せる */
}

.step-label {
  padding: 8px 0;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--blue);
  border-bottom: 1px solid rgba(11, 81, 152, .5);
}

.step-title {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--blue);
  line-height: 1.5;
}

.step-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.step-desc {
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-align: center;
  color: var(--blue);
}

.step-desc .u,
.note-body .u {
  text-decoration: underline;
  text-underline-position: from-font;
}

.step-btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.btn-step {
  width: 100%;
  height: 72px;
  padding: 8px 24px;
  font-size: 20px;
  letter-spacing: 0.1em;
  border: 3px solid transparent;
  border-radius: 70px;
  background:
    linear-gradient(#F2F3F5, #F2F3F5) padding-box,
    var(--grad) border-box;
  filter: drop-shadow(4px 4px 10px rgba(71, 67, 66, .2));
}

.step-note {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--gray);
}

.step-tags {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.step-tags span {
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.step-card .step-note {
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1.6;
}

.step-btn-wrap .step-note {
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* ================================
   注意事項
================================ */
.notes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  padding: 100px 120px;
  border-radius: 0 0 80px 80px; /* カンプ指定（SPは32pxに上書き） */
  background-color: #E2DDDA;
  border-radius: 0 0 80px 80px;
  overflow: hidden;
}

.notes::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* flow-bgと同一の焼き込み済みタイルで境目を出さない（旧: texture-notes.webp） */
  background: url("../assets/texture-beige.webp") top left / 351px 263px repeat;
  pointer-events: none;
}

.notes-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
}

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

.note-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: rgba(255, 255, 255, .7);
  border-radius: 8px;
}

.note-title {
  display: flex;
  gap: 16px;
  align-items: center;
}

.note-title img {
  flex-shrink: 0;
}

.note-title p {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
  line-height: normal;
}

.note-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--blue);
}

.notes-msg {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notes-msg-main {
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
}

.notes-msg-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray);
}

.terms {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.terms-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
}

.terms-label span {
  font-weight: 400;
}

.terms-box {
  --gb-bg: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 284px;
  padding: 32px;
  border-radius: 8px;
  overflow-y: auto;
}

.terms-box p {
  font-size: 14px;
  line-height: 20.8px;
  color: #4D4D4D;
}

.terms-box .terms-h {
  font-size: 16px;
  font-weight: 700;
}

.terms-h-center {
  padding-top: 24px; /* デザイナーFB: 見出しは全て左揃えに（centerを廃止） */
}

/* ================================
   審査スケジュール
================================ */
.schedule {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  padding: 100px 120px;
  background: var(--bg);
}

.schedule-wrap {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: stretch;
  width: 1200px;
}

/* 審査スケジュールは「応募期間→選考→発表」の順に左から表示し、
   繋ぎの棒線は最後にフェードイン（デザイナーFB対応） */
/* 応募期間→棒(前半)→選考→棒(後半)→発表 のリズムで連動出現。
   棒は2段階キーフレーム（下記 schedule-line-draw）：
   0.7sから0.8sかけて前半→選考が出る間0.4s待機→0.8sかけて後半 */
.col1 .sched-card.reveal { transition-delay: 0s; }    /* 出現完了 0.7s */
.col2 .sched-card.reveal { transition-delay: 1.4s; }  /* 棒が中間に届く1.5sに合わせる */
.col3 .sched-card.reveal { transition-delay: 2.5s; }  /* 棒の到達2.7sに合わせる */

/* 棒線は透明フェードではなく、左から右へ描かれるワイプで出現させる
   （clip-pathの右辺を動かして描画領域を広げる。-5%は端の欠け防止）。
   カードの出現リズムに合わせ「前半を描く→選考が出る間待つ→後半を描く」の2段階 */
.schedule-line.reveal {
  opacity: 1;
  transform: none;
  clip-path: inset(-5% 100% -5% -5%);
}

.schedule-line.reveal.is-inview {
  animation: schedule-line-draw 2s ease .7s forwards;
}

@keyframes schedule-line-draw {
  0% {
    clip-path: inset(-5% 100% -5% -5%);
    animation-timing-function: ease-in-out;
  }
  40% {
    clip-path: inset(-5% 50% -5% -5%); /* 前半（応募期間→選考）を0.8sで描く */
    animation-timing-function: linear;
  }
  60% {
    clip-path: inset(-5% 50% -5% -5%); /* 選考カードが出る間0.4s待機 */
    animation-timing-function: ease-in-out;
  }
  100% {
    clip-path: inset(-5% -5% -5% -5%); /* 後半（選考→発表）を0.8sで描く */
  }
}

.schedule-line {
  position: absolute;
  top: 25px;
  left: 0;
  width: 1200px;
  height: 244px;
}

.schedule-col {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 388px;
}

.col1 { padding-bottom: 80px; }
.col2 { justify-content: center; }
.col3 { justify-content: flex-end; }

.sched-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  height: 210px;
  padding: 40px 24px;
  border-radius: 16px;
}

.col3 .sched-card {
  gap: 16px;
  justify-content: flex-start;
}

.sched-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.sched-body-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.sched-body {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-align: center;
  color: var(--blue);
  white-space: nowrap;
}

.sched-note {
  font-size: 12px;
  letter-spacing: 0.09em;
  line-height: 1.8;
  color: var(--blue);
  white-space: nowrap;
}

/* ================================
   よくある質問
================================ */
.faq {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 100px 120px;
  background-color: #F1EBE9;
  border-radius: 80px 80px 0 0;
  overflow: hidden;
}

.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/texture-faq.webp") top left / 341px 256px repeat;
  pointer-events: none;
}

.faq .h2 {
  width: 259px;
}

.faq-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 800px;
}

.faq-item {
  width: 100%;
}

.faq-q {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 40px;
  text-align: left;
  background: #fff;
  border-radius: 8px;
}

.q-badge {
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--grad-q);
  border-radius: 50%;
}

.q-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
}

.q-caret {
  transform: scaleY(-1);
  transition: transform .3s;
}

.faq-item.is-open .q-caret {
  transform: scaleY(1);
}

.faq-a {
  display: none;
  padding: 8px 40px 24px;
}

.faq-item.is-open .faq-a {
  display: block;
}

.faq-a p {
  font-size: 15px;
  letter-spacing: 0.03em;
  line-height: 1.8;
  color: var(--blue);
}

/* ================================
   CTA
================================ */
.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: auto;
  aspect-ratio: 1440 / 612; /* デザイナーFB: どの幅でも写真の見え方の比率を固定 */
  padding: 100px 120px;
  overflow: hidden;
}

.cta-bg {
  position: absolute;
  inset: 0;
}

/* PCはカンプ自体が「4:3写真を横長枠に引き伸ばした」構図のためfillで再現
   （coverにするとせら坊の顔がアップになりすぎる）。SPはcoverに上書き */
/* PC/SPとも切り出し済み画像の比率が枠とほぼ一致するため、
   coverで歪ませずに表示（旧: fillで引き伸ばし → せら坊が伸縮していた） */
.cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(21, 20, 35, .2);
}

.cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.cta-catch {
  transform: rotate(-5deg);
}

.btn-cta {
  padding: 32px 48px;
  font-size: 24px;
  border: 3px solid transparent;
  border-radius: 48px;
  background:
    linear-gradient(#F1F3F6, #F1F3F6) padding-box,
    var(--grad) border-box;
}

/* ================================
   フッター
================================ */
.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 120px;
  background-color: #706C6B;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/texture-footer.webp") top left / 341px 256px repeat;
  pointer-events: none;
}

.footer-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-host {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.footer-host a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .3s;
}

.footer-host a:hover {
  opacity: .7;
}

.footer-contact {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 16px;
  color: #fff;
  transition: opacity .3s;
}

.footer-contact:hover {
  opacity: .7;
}

.footer-contact span {
  text-decoration: underline;
}

.footer-copy {
  position: relative;
  font-size: 11px;
  line-height: 20.8px;
  color: #BFBFBF;
}

/* ================================
   SP（〜768px）
================================ */
/* ================================
   PC文字サイズ引き上げ（デザイナーFB: PCの文字が小さい）
   本文系テキストを一律+2px。ボタン文字と、サイズ固定の円形バッジ
   （開催決定 .fv-badge／目線 .mesen i）は対象外
================================ */
@media (min-width: 769px) {
  /* ヘッダーを追従固定。最上部では従来通り透明、スクロールすると白背景+影
     （.is-scrolledはjs/main.jsが付与） */
  .header {
    position: fixed;
    transition: background-color .3s ease, box-shadow .3s ease;
  }

  .header.is-scrolled {
    background-color: rgba(252, 252, 252, .92);
    box-shadow: 0 2px 12px rgba(11, 81, 152, .08);
  }

  /* 固定ヘッダーの高さぶん、アンカージャンプの着地位置を下げる */
  #overview,
  #benefits,
  #flow,
  #faq,
  #notes {
    scroll-margin-top: 118px;
  }

  /* 応募の流れカードの余白詰め（デザイナーFB。SPは従来値のまま） */
  .step-card {
    padding: 24px;  /* 旧値: 40px 24px */
    gap: 16px;      /* 旧値: 20px（説明文とボタンの間） */
  }

  .step-tags {
    gap: 8px;       /* 旧値: 16px（ハッシュタグ2行の間） */
  }

  .step-foot {
    gap: 16px;      /* 旧値: 24px（ハッシュタグと注記の間） */
    margin-top: 0;  /* 旧値: auto（下端吸着）。カンプ通り本文直下に16pxで続ける */
  }

  .slash-title { font-size: 20px; }          /* 旧値: 18px */
  .header-nav a { font-size: 16px; }         /* 旧値: 14px */
  .fv-tagline { font-size: 18px; }           /* 旧値: 16px */
  .fv-period-label { font-size: 17px; }      /* 旧値: 15px */
  .fv-period-dates small { font-size: 20px; }/* 旧値: 18px */
  .concept-body { font-size: 20px; }         /* 旧値: 18px */
  .theme-lead { font-size: 20px; }           /* 旧値: 18px */
  .theme-card-text p { font-size: 17px; }    /* 旧値: 15px */
  .award-list li { font-size: 20px; }        /* 旧値: 18px */
  .step-label { font-size: 16px; }           /* 旧値: 14px */
  .step-desc { font-size: 17px; }            /* 旧値: 15px */
  .step-note { font-size: 14px; }            /* 旧値: 12px */
  .step-card .step-note { font-size: 13px; } /* 旧値: 11px */
  .step-btn-wrap .step-note { font-size: 14px; } /* 旧値: 12px */
  .note-body { font-size: 18px; }            /* 旧値: 16px */
  .notes-msg-main { font-size: 20px; }       /* 旧値: 18px */
  .notes-msg-sub { font-size: 17px; }        /* 旧値: 15px */
  .terms-label { font-size: 20px; }          /* 旧値: 18px */
  .terms-box p { font-size: 16px; }          /* 旧値: 14px */
  .terms-box .terms-h { font-size: 18px; }   /* 旧値: 16px */
  .sched-note { font-size: 14px; }           /* 旧値: 12px */
  .q-badge { font-size: 20px; }              /* 旧値: 18px */
  .q-text { font-size: 20px; }               /* 旧値: 18px */
  .faq-a p { font-size: 17px; }              /* 旧値: 15px */
  .footer-host { font-size: 18px; }          /* 旧値: 16px */
  .footer-contact { font-size: 18px; }       /* 旧値: 16px */
  .footer-copy { font-size: 13px; }          /* 旧値: 11px */
}

@media (max-width: 768px) {
  .pc-only,
  .pc-br,
  .pc-inline {
    display: none !important;
  }

  .sp-only {
    display: block;
  }

  .sp-br {
    display: inline;
  }

  .sp-inline {
    display: inline;
  }

  /* 固定CTA */
  .fixed-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    display: flex;
  }

  .fixed-cta-btn {
    position: relative;
    display: flex;
    flex: 1;
    gap: 8px;
    align-items: center;
    justify-content: center;
    height: 60px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    border: 3px solid #fff;
    background: linear-gradient(106.42deg, #0B5198 0%, #C85D88 59.78%, #E73C0D 93.49%);
    overflow: hidden;
    transition: transform .15s ease;
  }

  .fixed-cta-btn:active {
    transform: translateY(2px);
    transition-duration: .06s;
  }

  .fixed-cta-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../assets/texture.png") top left / 341px 256px repeat;
    opacity: .1;
    pointer-events: none;
  }

  .fixed-cta-btn img,
  .fixed-cta-btn span {
    position: relative;
  }

  /* FV */
  .fv {
    height: auto;
  }

  .fv-bg {
    margin-top: 41px;
    aspect-ratio: 375 / 601;
  }

  .fv-catch-sp {
    position: absolute;
    /* 旧値: top 39.27%（写真基準）。写真上端が41px固定のため広い画面でタイトルとの
       間隔だけ詰まる。画面幅比例(277/375=73.87vw)から固定分41pxを引いた値にして
       どの幅でも375と同じ間隔を保つ */
    top: calc(73.87vw - 41px);
    left: 16.27%; /* 61px / 375px */
    width: 25.6%; /* 96px / 375px */
    transform: rotate(4deg);
  }

  .fv-title {
    top: 38.4vw;  /* 旧値: 144px（375基準。写真が375比率で伸びるためタイトルも同率で拡大） */
    left: 0;
    transform: none;
    width: 100%;
    gap: 4.27vw;  /* 旧値: 16px */
    align-items: center; /* デザイナーFB: SPでタイトル一式を中央揃えに */
  }

  /* タイトル一式（バッジ含む）をインラインのまま中央揃え＝左右の余白が常に均等 */
  .fv-main {
    align-items: center;
  }

  .fv-tagline {
    gap: 4.27vw;        /* 旧値: 16px */
    font-size: 3.73vw;  /* 旧値: 14px */
  }

  .fv-tagline-ja {
    letter-spacing: 0.2em;
  }

  .fv-tagline-en {
    letter-spacing: 0.3em;
  }

  .fv-main {
    gap: 2.13vw; /* 旧値: 8px */
  }

  .fv-main-logo {
    width: 79.47vw; /* 旧値: 298px */
    height: auto;
    margin-right: -0.27vw; /* 旧値: -1px */
  }

  .fv-badge {
    width: 10.67vw;    /* 旧値: 40px */
    height: 10.67vw;   /* 旧値: 40px */
    font-size: 3.2vw;  /* 旧値: 12px */
  }

  .fv-period {
    gap: 2.13vw; /* 旧値: 8px */
  }

  .fv-period-label {
    padding: 1.07vw;   /* 旧値: 4px */
    font-size: 3.2vw;  /* 旧値: 12px */
    letter-spacing: 0.04em;
  }

  .fv-period-dates {
    gap: 2.13vw;       /* 旧値: 8px */
    font-size: 4.8vw;  /* 旧値: 18px */
    color: var(--blue);
  }

  .fv-period-dates .date {
    gap: 1.07vw; /* 旧値: 4px */
  }

  .fv-period-dates small {
    font-size: 3.47vw; /* 旧値: 13px */
  }

  /* イベント概要（コンセプト） */
  .overview {
    padding-top: 180px;
  }

  .concept {
    gap: 80px;
    padding: 0 20px;
  }

  .concept-heading {
    gap: 0;
  }

  .concept-heading-row {
    gap: 11px;
    font-size: 24px;
  }

  .concept-union {
    width: 104px;
    height: 34px;
  }

  .concept-underline {
    top: 30px;
    left: 143px;
    width: 114px;
    height: 16px;
  }

  .concept-heading-sub {
    font-size: 24px;
    text-align: center;
  }

  .concept-body {
    gap: 16px;
    /* 375pxでは290px、タブレット幅では60vw（768pxで約460px）まで流動。旧値: width: 290px */
    width: clamp(290px, 60vw, 460px);
    font-size: 15px;
    letter-spacing: 0.05em;
    line-height: 2.1;
    white-space: normal;
  }

  /* 装飾写真
     375pxカンプ基準の割合(vw)で指定し、〜768pxの画面幅に追従させる。
     旧値（375px固定）:
     .ph1 { left: -4px;  top: -96px;  width: 88px; height: 75px; }
     .ph2 { right: 19px; top: -136px; width: 83px; height: 59px; }
     .ph3 { right: 25px; top: 134px;  width: 46px; height: 32px; }
     .ph5 { left: -48px; top: 111px;  width: 78px; height: 55px; }
     .ph6 { right: -45px; top: 79px;  width: 95px; height: 63px; } */
  .ph1 { left: -1.07vw; top: -25.6vw; width: 23.47vw; height: 20vw; }
  .ph2 { left: auto; right: 5.07vw; top: -36.27vw; width: 22.13vw; height: 15.73vw; filter: none; }
  .ph3 { left: auto; right: 6.67vw; top: 35.73vw; width: 12.27vw; height: 8.53vw; filter: blur(2px); }
  .ph4 { display: none; }
  .ph5 { left: -12.8vw; top: 29.6vw; width: 20.8vw; height: 14.67vw; }
  .ph6 { left: auto; right: -12vw; top: 21.07vw; width: 25.33vw; height: 16.8vw; }

  /* テーマ */
  .theme {
    padding: 130px 20px 100px;
  }

  .theme-heading {
    top: 72px;
    gap: 8px;
  }

  .theme-heading .slash-title {
    font-size: 18px;
  }

  .theme-band {
    width: 259px;
    height: 56px;
  }

  .theme-band img {
    top: -3px;
    left: -3px;
    width: 265px;
    height: 62px;
  }

  .band-char {
    width: 21px;
    font-size: 28px;
  }

  .band-char.c1 { left: 12px; top: 11px; }
  .band-char.c2 { left: 63px; top: 11px; }
  .band-char.c3 { left: 114px; top: 10px; }
  .band-char.c4 { left: 166px; top: 10px; }
  .band-char.c5 { left: 218px; top: 10px; }

  .theme-heading-bottom {
    font-size: 18px;
  }

  .theme-box {
    width: 100%;
    padding: 100px 3px 40px; /* デザイナーFB: カードが枠線を覆わないよう枠幅ぶん内側に */
    gap: 60px;
  }

  .theme-lead {
    /* 375pxでは279px、タブレット幅では58vw（768pxで約445px）まで流動。旧値: width: 279px */
    width: clamp(279px, 58vw, 445px);
    font-size: 15px;
    line-height: 1.8;
    text-align: left;
  }

  .theme-cards {
    flex-direction: column;
    gap: 60px;
  }

  .theme-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
  }

  .theme-card2 {
    flex: none;
    flex-direction: row-reverse;
    margin-top: 0;
    height: 180px;
  }

  .theme-card3 {
    height: 170px;
  }

  .theme-card-text {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 40px 16px 32px;
    border-radius: 0;
  }

  .theme-card-text p {
    font-size: 14px;
    text-align: left;
  }

  .theme-card-img {
    flex: 1;
    min-width: 0;
    height: auto;
    border-radius: 0;
  }

  .theme-card-title {
    top: -8px; /* デザイナーFB: カンプ同様カード上端にわずかに乗る程度に（旧: -23px） */
    left: calc(50% - 83.5px);
    transform: translateX(-50%);
    gap: 2px;
  }

  .theme-card2 .theme-card-title {
    left: calc(50% + 83.5px);
  }

  .theme-card-title-center {
    left: calc(50% - 83.5px);
  }

  .theme-card-title .grad-text {
    font-size: 28px;
  }

  .mesen {
    width: 32px;
    height: 32px;
  }

  .mesen i {
    top: 6px;
    left: 4px;
    font-size: 12px;
  }

  /* 見出し共通 */
  .h2 {
    gap: 12px;
  }

  .h2 h2 {
    font-size: 30px;
    letter-spacing: 0.1em;
  }

  .slash-title {
    font-size: 16px;
  }

  .slash {
    width: 6.5px;
    height: 19px;
  }

  .slash img {
    width: 20px;
    min-width: 20px;
  }

  /* 参加特典 */
  .benefits {
    padding: 80px 20px;
    gap: 40px;
  }

  .award-cards {
    width: 100%;
  }

  .award-card1 {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    min-height: 0;
    height: 389px; /* カンプのカード高。縦型の誌面モックが右下に接地 */
    padding: 32px 32px 150px;
  }

  .award-card2 {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    height: 238px;
    padding: 24px 32px;
  }

  .award-title {
    flex: none;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .award-name {
    font-size: 28px;
  }

  .award-name2 {
    font-size: 28px;
  }

  .award-count {
    font-size: 18px;
  }

  .award-count em {
    font-size: 28px;
  }

  .award-list {
    gap: 8px;
  }

  .award-list li {
    font-size: 15px;
  }

  .award-sample {
    right: 46px; /* .award-illust と同じ右位置 */
    width: 117px;
  }

  .award-illust {
    right: 46px;
    width: 96px;
  }

  /* 応募の流れ */
  .flow {
    padding: 80px 20px;
    gap: 40px;
  }

  .flow-bg {
    width: 100%;
    min-width: 0;
    /* 編集後カンプ（SP_375）: 背景がステップカード全体を覆う高さに拡張 */
    height: 1162px;
    border-radius: 80px 80px 0 0;
  }

  .flow-cards {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .flow-arrow {
    align-self: center;
    transform: rotate(90deg);
  }

  .step-card {
    width: 100%;
    padding: 32px 24px;
    gap: 16px;
  }

  .step-title {
    font-size: 22px;
  }

  .step-mid {
    flex-direction: row;
    gap: 16px;
    align-items: center;
  }

  .step-illust {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
  }

  .step-desc {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    text-align: left;
    overflow-wrap: anywhere; /* （@seraphotocontest）等の長い英字で枠からはみ出さない */
  }

  .btn-step {
    padding: 16px 24px;
    height: auto;
    font-size: 16px;
  }

  .step-btn-wrap .step-note {
    color: #5B5B5B;
  }

  .step-tags {
    gap: 8px;
  }

  .step-tags span {
    font-size: 20px;
    line-height: normal;
  }

  .step-card .step-note {
    color: #383B3F;
  }

  /* 注意事項 */
  .notes {
    padding: 80px 20px;
    gap: 40px;
    border-radius: 0 0 32px 32px;
  }

  .notes-inner {
    gap: 36px;
  }

  .note-grid {
    grid-template-columns: 1fr;
  }

  .note-title img {
    width: 16px;
    height: 16px;
  }

  .note-title p {
    font-size: 18px;
  }

  .note-body {
    font-size: 13px;
  }

  .notes-msg-main {
    font-size: 15px;
  }

  .terms-label {
    font-size: 15px;
  }

  .terms-box {
    padding: 32px 24px;
  }

  .terms-box p {
    font-size: 13px;
  }

  .terms-box .terms-h {
    font-size: 16px;
  }

  /* 審査スケジュール */
  .schedule {
    padding: 80px 20px;
    gap: 40px;
  }

  .schedule-wrap {
    flex-direction: column;
    gap: 18px;
    width: 100%;
  }

  .schedule-line {
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 516px;
  }

  /* SPは縦棒なので上から下へのワイプ。transformはセンタリング専用に保つ */
  .schedule-line.reveal {
    transform: translateX(-50%);
    clip-path: inset(-5% -5% 100% -5%);
  }

  .schedule-line.reveal.is-inview {
    transform: translateX(-50%);
    animation-name: schedule-line-draw-sp;
  }
}

@keyframes schedule-line-draw-sp {
  0% {
    clip-path: inset(-5% -5% 100% -5%);
    animation-timing-function: ease-in-out;
  }
  40% {
    clip-path: inset(-5% -5% 50% -5%);
    animation-timing-function: linear;
  }
  60% {
    clip-path: inset(-5% -5% 50% -5%);
    animation-timing-function: ease-in-out;
  }
  100% {
    clip-path: inset(-5% -5% -5% -5%);
  }
}

@media (max-width: 768px) {

  .schedule-line img {
    width: 48px;
    height: 516px;
    object-fit: fill;
  }

  .schedule-col {
    width: 100%;
  }

  .col1 { padding-bottom: 0; }

  .sched-card {
    height: auto;
    padding: 32px 24px;
    gap: 24px;
  }

  .col3 .sched-card {
    gap: 16px;
  }

  .sched-title {
    font-size: 22px;
  }

  .sched-body {
    font-size: 16px;
  }

  .sched-note {
    font-size: 11px;
  }

  /* よくある質問 */
  .faq {
    flex-direction: column;
    gap: 40px;
    align-items: center;
    padding: 80px 20px;
    border-radius: 32px 32px 0 0;
  }

  .faq .h2 {
    width: auto;
  }

  .faq-list {
    width: 100%;
    padding-left: 10px;
  }

  .faq-q {
    gap: 16px;
    padding: 24px 16px 24px 32px;
  }

  .q-badge {
    width: 32px;
    height: 32px;
    left: -16px;
    font-size: 14px;
  }

  .q-text {
    flex: 1;
    min-width: 0;
    font-size: 16px;
  }

  .q-caret {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .faq-a {
    padding: 8px 0 24px;
  }

  /* CTA */
  .cta {
    height: auto;
    /* ⚠️PC用のaspect-ratioは必ず解除すること。min-heightと組み合わさると
       高さから幅が逆算されてセクションが画面外に膨張し、中身が右に流れて切れる */
    aspect-ratio: auto;
    /* 375カンプ（375×250.29）の比率。451px以上は下の帯域別指定で上書き */
    min-height: 66.75vw;
    padding: 44px 20px;
  }

  /* SP専用の切り出し画像を使用。万一枠が縦長化してもせら坊側を優先 */
  .cta-bg img {
    object-position: right center;
  }

  .cta-inner {
    width: 100%;
    gap: 40px;
  }

  .cta-catch {
    width: 100%;
    max-width: 337px;
    height: auto;
    transform: none;
  }

  .btn-cta {
    padding: 18px 24px;
    font-size: 14px;
    align-self: flex-start;
  }

  .btn-cta img {
    width: 20px;
    height: 20px;
  }

  /* フッター */
  .footer {
    padding: 24px 20px 80px;
  }

  .footer-row {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .footer-host {
    font-size: 14px;
  }

  .footer-contact {
    align-self: flex-end;
    font-size: 14px;
  }

  .footer-contact img {
    width: 18px;
    height: 18px;
  }
}

/* ================================
   お問い合わせページ（contact.html）
================================ */
.contact {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 180px 40px 120px;
}

.contact-lead {
  font-size: 15px;
  line-height: 2;
  color: var(--blue);
  text-align: center;
}

.contact-note {
  font-size: 13px;
  color: var(--gray);
}

.contact-form {
  --gb-bg: #fff;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  padding: 48px;
  border-radius: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label,
.form-field .field-label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
}

.req {
  flex-shrink: 0;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--orange);
  border-radius: 4px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--blue);
  background: #FCFCFC;
  border: 2px solid #D8D3D0;
  border-radius: 8px;
  transition: border-color .2s;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--blue);
}

.form-field textarea {
  resize: vertical;
}

.field-help {
  font-size: 12px;
  color: var(--gray);
}

.form-radios {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-radios label,
.form-consent label {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 15px;
  font-weight: 400;
  color: var(--blue);
  cursor: pointer;
}

.form-radios input[type="radio"],
.form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
  flex-shrink: 0;
}

.form-consent {
  align-items: center;
}

.form-consent a {
  text-decoration: underline;
  transition: opacity .2s;
}

.form-consent a:hover {
  opacity: .7;
}

/* スパム対策の不可視フィールド */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.form-error {
  font-size: 14px;
  font-weight: 700;
  color: var(--orange);
  text-align: center;
}

.contact-submit {
  align-self: center;
  height: 60px;
  padding: 8px 64px;
  font-size: 16px;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 70px;
  background: linear-gradient(106.42deg, #0B5198 0%, #C85D88 59.78%, #E73C0D 93.49%);
  box-shadow: 4px 4px 20px rgba(81, 78, 77, .2);
}

.contact-submit:disabled {
  opacity: .6;
  cursor: default;
}

.contact-thanks {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  padding: 48px 0;
  text-align: center;
}

.thanks-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--blue);
}

.thanks-body {
  font-size: 15px;
  line-height: 2;
  color: var(--blue);
}

@media (max-width: 768px) {
  .contact {
    gap: 32px;
    padding: 120px 20px 80px;
  }

  .contact-lead {
    font-size: 14px;
  }

  .contact-form {
    gap: 24px;
    padding: 32px 20px;
  }

  .contact-submit {
    width: 100%;
    padding: 8px 24px;
  }
}

/* ================================
   SPヘッダー（〜768px）
================================ */
@media (max-width: 768px) {
  .header {
    height: 80px;
    padding: 0 20px;
    justify-content: space-between;
  }

  .header-logo {
    position: static;
    transform: none;
  }

  .header-logo img {
    width: 82px;
    height: auto;
  }

  .menu-toggle {
    display: block;
  }

  /* 開いている間、背面（FV）をぼかすオーバーレイ */
  .sp-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: block;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }

  /* ドロワー本体（右から。375pxでは90%＝337px、広い画面では460pxで頭打ち） */
  .sp-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    width: min(90%, 460px); /* 旧値: width: 90% */
    height: 100dvh;
    padding-bottom: 40px;
    overflow-y: auto;
    background: url("../assets/texture-overview.webp") top left / 341px 256px repeat #F1EAE7;
    transform: translateX(100%);
    visibility: hidden; /* 閉時は不可視化（画面外へのフォーカス移動・はみ出し判定を防ぐ） */
    transition: transform .35s ease, visibility .35s;
  }

  .sp-menu-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 0 20px;
  }

  .menu-close {
    display: block;
  }

  .sp-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 24px;
  }

  /* 文字・余白は375pxカンプ基準のvwで追従させ、clampで上下限をキャップ */
  .sp-menu-nav a {
    padding: clamp(20px, 6.4vw, 28px) 16px; /* 旧値: padding: 24px 16px */
    font-size: clamp(13px, 3.73vw, 15px); /* 旧値: font-size: 14px */
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--blue);
    text-align: center;
    border-bottom: 1px solid #fff;
    transition: opacity .2s;
  }

  /* テキストリンクはタップ中に色が薄くなる */
  .sp-menu-nav a:active {
    opacity: .5;
  }

  .sp-menu-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: clamp(32px, 10.67vw, 48px) 24px 0; /* 旧値: margin: 40px 24px 0 */
  }

  .sp-menu-cta {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 6.4vw, 26px) 8px; /* 旧値: padding: 24px 8px */
    font-size: clamp(16px, 4.8vw, 20px); /* 旧値: font-size: 18px */
    font-weight: 700;
    color: #fff;
    border: 3px solid #fff;
    border-radius: 92px;
    background: linear-gradient(111deg, #0B5198 0%, #C85D88 59.78%, #E73C0D 93.49%);
    box-shadow: 4px 4px 20px rgba(81, 78, 77, .2);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
  }

  /* タップ中は沈み込み＋影が弱まる（押し込みの表現） */
  .sp-menu-cta:active {
    transform: translateY(2px) scale(.99);
    box-shadow: 2px 2px 10px rgba(81, 78, 77, .25);
    transition-duration: .06s;
  }

  .sp-menu-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../assets/texture.png") top left / 341px 256px repeat;
    opacity: .15;
    pointer-events: none;
  }

  .sp-menu-cta img,
  .sp-menu-cta span {
    position: relative;
  }

  /* アイコンは文字サイズに連動（18px時に目=24px・Instagram=22pxとなる比率） */
  .sp-menu-cta img {
    width: auto;
    height: 1.34em;
  }

  .sp-menu-cta:last-child img {
    height: 1.23em;
  }

  /* ヘッダー(z:100)はスタッキングコンテキストのため、開いている間は
     固定CTA(z:150)より上に持ち上げてドロワー・オーバーレイで覆う */
  .header.is-open {
    z-index: 300;
  }

  .header.is-open .sp-menu {
    transform: translateX(0);
    visibility: visible;
  }

  .header.is-open .sp-menu-overlay {
    opacity: 1;
    visibility: visible;
  }

  body.menu-open {
    overflow: hidden;
  }
}

/* ================================
   CTA帯域別の枠比率（デザイナー支給の550/768カンプ対応）
   picture出し分けと対になっており、各帯域で枠比率＝カンプ画像比率に一致させる
   （比率が一致するためcoverでもトリミング・歪みが発生しない）
================================ */
@media (max-width: 350px) {
  .cta {
    min-height: 72.08vw; /* 320カンプ（320×230.67） */
  }
}

@media (min-width: 451px) and (max-width: 768px) {
  .cta {
    min-height: 60vw; /* 550カンプ（550×330） */
  }
}

@media (min-width: 660px) and (max-width: 768px) {
  .cta {
    min-height: 42.97vw; /* 768カンプ（768×330） */
  }
}

/* ================================
   320カンプ対応（〜350px）
   FVタイトル一式の縮小（375のままだとロゴ+バッジ=338pxで320pxからはみ出す）
   数値は320_カンプ（Figma 58:419）実測より
================================ */
@media (max-width: 350px) {
  /* カンプ(320_FV): 写真は375×601のまま左右を約26pxずつ切る＝高さを保ち
     キャッチの居場所を確保する（幅比例で縮めるとタイトル直下まで詰まる） */
  .fv-bg {
    aspect-ratio: auto;
    height: 601px;
  }

  /* カンプ: タイトル一式(303px)はブロックごと中央、中の行は左揃え */
  .fv-title {
    top: 149px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    gap: 14px;
    align-items: flex-start;
  }

  .fv-catch-sp {
    top: 41.76%;  /* 251px / 601px */
    left: 15.63%; /* 50px / 320px */
    width: 22.19%; /* 71px / 320px */
  }

  .fv-tagline {
    font-size: 13px;
  }

  .fv-main {
    gap: 7px;
    align-items: flex-start;
  }

  .fv-main-logo {
    width: 268px;
    max-width: none; /* 100%制約が親幅と循環してロゴが縮み、バッジがはみ出すのを防ぐ */
    flex-shrink: 0;
  }

  .fv-badge {
    width: 36px;
    height: 36px;
    font-size: 11px;
  }

  .fv-period {
    gap: 7px;
  }

  .fv-period-label {
    padding: 3px;
    font-size: 11px;
  }

  .fv-period-dates {
    gap: 7px;
    font-size: 16px;
  }

  .fv-period-dates .date {
    gap: 6px;
  }

  .fv-period-dates small {
    font-size: 14px;
  }

  /* --- 参加特典（320カンプ: リストは枠から12px・タイトルは32px位置のまま） --- */
  .award-card1 {
    padding: 32px 12px 150px;
  }

  .award-card1 .award-title {
    padding: 0 20px;
  }

  .award-list li {
    font-size: 14px; /* 15pxだと15文字の行が枠内幅(218px)を超えるため1段階縮小 */
    white-space: normal; /* それでも収まらない環境では枠を越えず折り返す */
  }

  .award-sample {
    right: 15px; /* カンプ: カード右端から15px */
  }

  .award-illust {
    right: 26px;
  }

  /* --- 応募の流れ（320カンプ: イラスト105px・テキスト列111px相当） --- */
  .step-illust {
    width: 105px;
    height: 105px;
  }

  .step-tags p {
    font-size: 17px;
  }

  .btn-step {
    padding: 14px 18px;
    font-size: 14px;
  }

  /* --- イベント概要・テーマ（320カンプ: リード文は枠から10px内側） --- */
  .theme-lead {
    width: calc(100% - 20px);
    max-width: 260px;
  }

  .theme-band {
    width: 207px;
    height: 45px;
  }

  .theme-band img {
    top: -3px;
    left: -3px;
    width: 213px;
    height: 51px;
  }

  .theme-heading-bottom {
    font-size: 16px;
    white-space: nowrap; /* カンプ通り1行（をぜひシェアしてください！） */
  }

  /* 目線タイトルはカード幅(280)に合わせて中央からのオフセットを縮小 */
  .theme-card-title {
    left: calc(50% - 70px);
  }

  .theme-card2 .theme-card-title {
    left: calc(50% + 70px);
  }

  .theme-card-title-center {
    left: calc(50% - 70px);
  }

  .theme-card-title .grad-text {
    font-size: 24px;
  }

  /* --- CTA（320カンプ: ボタン200×42・フォント12px） --- */
  .btn-cta {
    padding: 12px 18px;
    font-size: 12px;
  }

  .btn-cta img {
    width: 14px;
    height: 14px;
  }
}