/* 第10回テーマ「人生の主導権を自分に」のファーストビュー
   PC：左に見出し・サブコピー・日付・申込ボタンを縦に並べ、T2Sロゴ（縦組み）を右下に置く
   スマホ：見出しの下にロゴ */

/* ---------- PC・タブレット（681px以上） ---------- */
@media (min-width: 681px) {
  .codex-edited-lp .hero-tagline-art.hero-tagline-2027 {
    top: 4.8%;
    left: 3.6%;
    width: 44.8%;
  }

  /* T2Sロゴの下端を、申込ボタンの下端にそろえる */
  .codex-edited-lp .hero-logo-art {
    top: auto;
    right: 1.5%;
    bottom: 4.2%;
    left: auto;
    width: 15.5%;
  }

  .codex-edited-lp .hero-message {
    top: 64.5%;
    left: 4.4%;
    width: 45%;
  }

  .codex-edited-lp .hero-message strong {
    font-size: clamp(22px, 2.15vw, 36px);
    letter-spacing: .02em;
  }

  /* 「未来は、先に決めることで…」はPCでは出さない */
  .codex-edited-lp .hero-message span {
    display: none;
  }

  .codex-edited-lp .hero-details {
    top: 72.4%;
    left: 4.4%;
    width: 39.8%;
    padding: 16px 0 0;
    border-top-color: rgba(255, 255, 255, .55);
  }

  .codex-edited-lp .hero-date,
  .codex-edited-lp .hero-venue {
    display: flex;
    align-items: center;
  }

  .codex-edited-lp .hero-date .hero-date-icon,
  .codex-edited-lp .hero-venue svg {
    flex: none;
    width: clamp(22px, 2vw, 34px);
    height: clamp(22px, 2vw, 34px);
    margin-right: clamp(18px, 2.4vw, 40px);
  }

  .codex-edited-lp .hero-venue svg {
    width: clamp(18px, 1.5vw, 26px);
    height: clamp(18px, 1.5vw, 26px);
    margin-left: clamp(2px, .25vw, 4px);
    margin-right: clamp(22px, 2.65vw, 44px);
  }

  .codex-edited-lp .hero-cta {
    top: 86.3%;
    left: 4.7%;
    width: 38%;
  }
}

/* 1101〜1400px、または高さが900px以下のPC：日付・会場と申込ボタンの間をあける */
@media (min-width: 1101px) and (max-width: 1400px), (min-width: 1101px) and (max-height: 900px) {
  .codex-edited-lp .hero-tagline-art.hero-tagline-2027 {
    width: 43%;
  }

  .codex-edited-lp .hero-message {
    top: 62.4%;
  }

  .codex-edited-lp .hero-details {
    top: 70.8%;
    padding-top: 10px;
  }

  .codex-edited-lp .hero-date {
    margin-bottom: 2px;
  }
}

/* タブレット・小さめのPC（681〜1100px）：日付・会場と申込ボタンが重ならないよう、間を詰める */
@media (min-width: 681px) and (max-width: 1100px) {
  .codex-edited-lp .hero-message {
    top: 63.5%;
  }

  .codex-edited-lp .hero-details {
    top: 71%;
    padding-top: 8px;
  }

  .codex-edited-lp .hero-date {
    margin-bottom: 2px;
  }

  .codex-edited-lp .hero-cta {
    top: 87.5%;
  }

  /* 申込ボタンを下げた分、T2Sロゴの下端もそろえる */
  .codex-edited-lp .hero-logo-art {
    bottom: 2.8%;
  }
}

/* ---------- スマホ（680px以下）：A0ポスターを背景にした縦長レイアウト ---------- */
@media (max-width: 680px) {
  /* 参考イメージに合わせ、ポスター背景が入る縦長の比率にする */
  .codex-edited-lp .hero {
    aspect-ratio: 941 / 1876;
  }

  /* 見出し：画面幅いっぱいに大きく */
  .codex-edited-lp .hero-tagline-art.hero-tagline-2027 {
    top: 2%;
    left: 3.5%;
    width: 93%;
  }

  /* T2Sロゴ：人物の右側、胸のあたり */
  .codex-edited-lp .hero-logo-art {
    top: 51.3%;
    right: auto;
    bottom: auto;
    left: 61%;
    width: 32%;
  }

  /* サブコピーはスマホでは出さない（ポスターと同じく見出し・ロゴ・日付・ボタンに絞る） */
  .codex-edited-lp .hero-message {
    display: none;
  }

  /* ポスターと同じく日付の上の線は付けない */
  .codex-edited-lp .hero-details {
    top: 70.3%;
    left: 4.5%;
    width: 91%;
    padding-top: 0;
    border-top: 0;
  }

  .codex-edited-lp .hero-cta {
    top: 85%;
  }

  .codex-edited-lp .hero-date,
  .codex-edited-lp .hero-venue {
    display: flex;
    align-items: center;
  }

  .codex-edited-lp .hero-date {
    margin-bottom: 3.5vw;
    font-size: clamp(24px, 7.9vw, 33px);
  }

  .codex-edited-lp .hero-date .hero-date-icon {
    display: none;
  }

  .codex-edited-lp .hero-date strong {
    font-size: clamp(40px, 13.6vw, 58px);
  }

  .codex-edited-lp .hero-date small {
    font-size: clamp(15px, 4.8vw, 20px);
  }

  .codex-edited-lp .hero-venue {
    font-size: clamp(14px, 4.4vw, 18px);
  }

  .codex-edited-lp .hero-venue svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    color: #e0242f;
  }
}

/* ---------- ヘッダー（PC：901px以上）：メニューをロゴの右に、文字とボタンを大きく ---------- */
@media (min-width: 901px) {
  .codex-edited-lp .header-inner {
    width: calc(100% - clamp(40px, 5vw, 84px));
    max-width: none;
    height: 70px;
  }

  .codex-edited-lp .company-brand {
    width: auto;
    height: 56px;
    margin-right: clamp(20px, 2.9vw, 48px);
  }

  .codex-edited-lp .company-brand {
    height: 64px;
  }

  /* ロゴ画像は周りの余白が大きいため、大きめに表示する */
  .codex-edited-lp .company-brand img {
    width: clamp(76px, 6.2vw, 104px);
    height: auto;
    margin-left: clamp(-18px, -1.1vw, -12px);
  }

  .codex-edited-lp .desktop-nav {
    gap: clamp(18px, 2.9vw, 48px);
    margin-left: 0;
    margin-right: auto;
    color: #fff;
    font-size: clamp(13px, 1.08vw, 18px);
    font-weight: 700;
    letter-spacing: .02em;
  }

  .codex-edited-lp .header-actions {
    gap: clamp(8px, .9vw, 15px);
    margin-left: clamp(16px, 2vw, 32px);
  }

  .codex-edited-lp .header-actions .button-small {
    min-height: clamp(40px, 3.3vw, 55px);
    padding: 6px clamp(12px, 1.4vw, 24px);
    justify-content: center;
    gap: clamp(10px, 1.4vw, 24px);
    font-size: clamp(13px, 1.15vw, 19px);
    font-weight: 700;
  }

  .codex-edited-lp .header-actions .header-movie-button {
    min-width: clamp(170px, 16.6vw, 277px);
    color: #fff;
    border-color: rgba(255, 255, 255, .8);
    background: transparent;
  }

  .codex-edited-lp .header-actions .button-primary.button-small {
    min-width: clamp(170px, 17.3vw, 290px);
    border-color: #e0242f;
    background: #d0111c;
    box-shadow: none;
  }

  .codex-edited-lp .header-actions .button-small svg {
    width: clamp(18px, 1.55vw, 26px);
    height: clamp(18px, 1.55vw, 26px);
  }
}

@media (min-width: 901px) {
  .codex-edited-lp .desktop-nav a,
  .codex-edited-lp .header-actions .button-small {
    white-space: nowrap;
  }
}

/* 901〜1100px：メニューが折り返さないよう、文字・間隔・ボタン幅を詰める */
@media (min-width: 901px) and (max-width: 1100px) {
  .codex-edited-lp .company-brand {
    margin-right: 18px;
  }

  .codex-edited-lp .desktop-nav {
    gap: 14px;
    font-size: 12px;
  }

  .codex-edited-lp .header-actions {
    gap: 8px;
    margin-left: 14px;
  }

  .codex-edited-lp .header-actions .header-movie-button,
  .codex-edited-lp .header-actions .button-primary.button-small {
    min-width: 0;
    padding-inline: 12px;
    gap: 8px;
    font-size: 12px;
  }
}

/* ---------- 1173px以上：横長の画面でも、デザイン画像と同じ見え方にする ----------
   元のCSSは、中身を16:9の枠に入れて左右中央に置くため、横長の画面では左右に余白ができ
   見出しが右に寄って小さくまとまって見える。枠を左端にそろえ、T2Sロゴはヒーローの右端を基準にする。
   ヘッダーの高さ（70px）に合わせて、ヒーローの高さも画面内に収める。 */
@media (min-width: 1173px) {
  .codex-edited-lp .hero {
    container-type: inline-size;
    height: max(660px, min(calc(100vh - 70px), calc(100vw / (3344 / 1882))));
  }

  .codex-edited-lp .hero-content {
    left: 0;
    transform: translateY(-50%);
  }

  /* 左端の余白をデザイン画像（画面幅1672pxで約105px）に合わせる */
  .codex-edited-lp .hero-tagline-art.hero-tagline-2027 {
    left: 6.3%;
  }

  .codex-edited-lp .hero-message,
  .codex-edited-lp .hero-details {
    left: 7.1%;
  }

  .codex-edited-lp .hero-cta {
    left: 7.4%;
  }

  /* T2Sロゴ：ヒーロー（画面）の右端から1.5%の位置。100cqw＝ヒーローの幅、100%＝中身の枠の幅 */
  .codex-edited-lp .hero-logo-art {
    right: 1.5%;
    right: calc(100% - 100cqw + 1.5cqw);
  }
}

/* ---------- ヘッダー（スマホ・タブレット：900px以下）：左上のロゴをPCと同じく一回り大きく ---------- */
@media (max-width: 900px) {
  .codex-edited-lp .company-brand {
    width: auto;
    height: 58px;
  }

  /* ロゴ画像は周りの余白が大きいため、大きめに表示して左の余白を詰める */
  .codex-edited-lp .company-brand img {
    width: 76px;
    max-width: none;
    height: auto;
    margin-left: -14px;
  }
}

/* スマホ：日付・会場名の後ろに観客写真が見えるので、文字に影を付けて読みやすくする */
@media (max-width: 680px) {
  .codex-edited-lp .hero-date,
  .codex-edited-lp .hero-venue {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .95), 0 0 3px rgba(0, 0, 0, .8);
  }
}

/* スマホ：見出しとT2Sロゴが人物や観客に溶け込まないよう、後ろに影を付けて浮かせる */
@media (max-width: 680px) {
  .codex-edited-lp .hero-tagline-art.hero-tagline-2027,
  .codex-edited-lp .hero-logo-art img {
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .8)) drop-shadow(0 0 2px rgba(0, 0, 0, .6));
  }
}