/* ============================================
   凸会 TOTSUKAI ティザーサイト（縦スクロール版）
   ============================================ */

:root {
  --color-key-blue: #0A0AFD;
  --color-gray: #DBDBDB;
  --color-ink: #1a1a1a;
  --font-en: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-jp-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--color-gray);
  color: var(--color-ink);
  font-family: var(--font-jp-serif);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   キービジュアル：幅フィット・通常縦スクロール
   ============================================ */

.poster {
  position: relative;
  width: 100%;
  margin-inline: auto;
  container-type: inline-size;
}

/* PCでは中央76%幅＋左右グレー余白（B案確定） */
@media (min-width: 900px) {
  .poster {
    width: 76%;
  }
}

/* 日時・キャッチの絶対配置基準（常に画像と同じ高さ） */
.poster__frame {
  position: relative;
}

.poster__img {
  display: block;
  width: 100%;
  height: auto;
  /* 縁のJPEGエッジ画素を削り、周囲のグレーと完全に地続きに見せる */
  clip-path: inset(0 2px 2px 2px);
}

/* ------ 日時（左上のグレー面）------
   位置・サイズはポスター幅基準（cqw）→
   どの画面幅でもオーロラに重ならない */
.poster__date {
  position: absolute;
  left: 2.7%;
  top: 29.5%;
  display: flex;
  flex-direction: column;
  gap: 0.9cqw;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 2.35cqw;
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: var(--color-key-blue);
  white-space: nowrap;
}

/* ------ キャッチ（左下のグレー面）------
   画像側の焼き込みは除去済み。元位置基準でやや大きめに */
.poster__catch {
  position: absolute;
  left: 3.2%;
  bottom: 1.9%;
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: 1.75cqw;
  letter-spacing: 0.14em;
  line-height: 1.95;
  color: var(--color-key-blue);
  white-space: nowrap;
}

/* スマホ幅：ポスター全体が1画面に収まり文字が小さくなりすぎるため、
   グレー面に収まる範囲で日時・キャッチを拡大 */
@media (max-width: 600px) {
  .poster__date {
    font-size: 3.1cqw;
    gap: 1.2cqw;
  }
  .poster__catch {
    font-size: 2.3cqw;
    letter-spacing: 0.12em;
  }
}

/* ------ コンセプト ------
   広い画面：KV上部のグレー帯（ロゴと日時の間、三角上辺の左側）に
   image-relativeで重ねる。狭い画面：フロー配置に切替 */

@media (min-width: 1200px) {
  .poster__concept {
    position: absolute;
    left: 2.7%;
    top: 14%;
  }
  .poster__concept-label {
    display: none;
  }
  .poster__concept-text span {
    display: block;
    white-space: nowrap;
  }
  .poster__concept-text {
    font-family: var(--font-jp-serif);
    font-weight: 500;
    font-size: 1.7cqw;
    line-height: 2.2;
    letter-spacing: 0.08em;
    color: var(--color-key-blue);
  }
}

@media (max-width: 1199px) {
  /* フロー配置：画像直下、グレー地続き面の先頭に */
  .poster__concept {
    padding: clamp(48px, 7vw, 72px) 24px 0;
  }
  .poster__concept-text {
    font-size: clamp(14px, 1.6vw, 16px);
    font-weight: 500;
    line-height: 2.3;
    letter-spacing: 0.08em;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .poster__concept {
    padding-inline: 2.7%;
  }
}

/* ============================================
   セクション共通（ポスターと地続きのグレー面）
   ============================================ */

.section {
  padding-block: clamp(40px, 6vw, 72px);
}

/* ポスターのグリッドに揃うコンテンツ列：
   ≥900pxではポスターと同じ76%幅＋左2.7%（KV内の日時・キャッチと左端が通る） */
.grid-col {
  padding-inline: 24px;
}

@media (min-width: 900px) {
  .grid-col {
    width: 76%;
    margin-inline: auto;
    padding-inline: 2.7% 0;
  }
}

.section__label {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-key-blue);
  border-top: 1px solid var(--color-key-blue);
  padding-top: 16px;
  margin-bottom: clamp(24px, 4vw, 36px);
}

/* ------ 開催概要 ------
   ラベル=青・小さめ、値=墨色・一段大きく。左寄せ（グリッド軸） */

.overview {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 26px);
}

.overview__row {
  display: flex;
  gap: clamp(16px, 4vw, 40px);
  line-height: 1.9;
  font-size: clamp(14px, 1.8vw, 16px);
}

.overview__row dt {
  flex: 0 0 4em;
  padding-top: 0.2em;
  font-weight: 600;
  color: var(--color-key-blue);
  letter-spacing: 0.1em;
}

.overview__row dd {
  font-size: clamp(17px, 2.1vw, 20px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.overview__note {
  display: inline-block;
  font-size: 0.85em;
}

/* 語中で折り返させない塊（住所の建物名など） */
.nb {
  display: inline-block;
}

.overview__map-link {
  color: inherit;
  font-size: 1em;
  text-decoration: underline;
  text-decoration-color: rgba(10, 10, 253, 0.35);
  text-underline-offset: 4px;
}

.overview__map-link:hover {
  color: var(--color-key-blue);
}

/* ------ 参加申込 ------ */

.section--apply {
  padding-top: clamp(16px, 3vw, 32px);
  padding-bottom: clamp(96px, 14vw, 160px);
}

.cta-button {
  display: inline-block;
  background: var(--color-key-blue);
  color: #fff;
  font-family: var(--font-jp-serif);
  font-weight: 600;
  font-size: clamp(16px, 2.2vw, 19px);
  letter-spacing: 0.16em;
  text-decoration: none;
  padding: 1.1em 3.2em;
  border-radius: 2px;
  transition: opacity 0.25s ease;
}

.cta-button:hover {
  opacity: 0.82;
}

/* フォームURL未設定時 */
.cta-button[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.45;
}