@charset "utf-8";

/* top ページ用スタイル（common.css の後に読み込み） */
/* ---------- メインビジュアル ----------
   PC：グローバルメニューとの間をあける（スマホはメニューが隠れているので今のまま） */
@media (min-width: 1081px) {

  .l__mv {
    margin-top: 40px;
  }

}

/* ---------- セクション ----------
   トップは下層ページより詰めて、見出しの上下とも 30px */
.l__section {
  margin-top: 30px;
}

.l__section__headline {
  margin-bottom: 30px;
}

/* ---------- スペシャルムービー（YouTube） ----------
   映画のスクリーン風：黒い枠の上下にフィルムの穴、赤い SPECIAL MOVIE バッジ（再生マーク付き）、
   白いタイトル、赤いステッカー風のキャッチ。動画は 16:9 で枠の幅いっぱい */
.movie {
  --movie-red: #e5162b;   /* バッジ・キャッチの赤（YouTube の赤に近い色） */
  --movie-hole: 26px;     /* フィルムの穴の間隔 */
  margin-block: 60px;     /* メインビジュアル・下のメニューとの間隔 */
}

.movie__screen {
  position: relative;
  padding: 34px 26px 34px;
  background: #141414;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

/* 上下のフィルムの穴（角丸の四角を並べる） */
.movie__screen::before,
.movie__screen::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 10px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .8) 0 14px, transparent 14px) 0 0 / var(--movie-hole) 100% repeat-x;
}

.movie__screen::before {
  top: 12px;
}

.movie__screen::after {
  bottom: 12px;
}

.movie__head {
  margin-bottom: 22px;
  color: #fff;
  text-align: center;
}

/* 赤いバッジ（左に再生マーク） */
.movie__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 5px 14px 5px 10px;
  border-radius: 999px;
  background: var(--movie-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .25em;
}

.movie__badge::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}

.movie__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .12em;
}

.movie__title span {
  display: inline-block;
}

/* キャッチ：少し傾けた赤いステッカー */
.movie__catch {
  display: inline-block;
  margin: 14px 0 0;
  padding: 6px 16px 6px calc(16px + .12em);
  background: var(--movie-red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .12em;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--theme-main);
}

.movie__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.movie__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1080px) {

  .movie {
    margin-block: 40px;
  }

  .movie__screen {
    padding: 30px 12px 30px;
  }

  .movie__head {
    margin-bottom: 18px;
  }

  .movie__title {
    font-size: 20px;
  }

  .movie__catch {
    font-size: 13px;
  }

}

/* ---------- 座談会・インタビューのバナー（縦に並べる） ---------- */
.banner-list {
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

.banner-list__item + .banner-list__item {
  margin-top: 30px;
}

.banner-list img {
  display: block;
}

/* ---------- 旧 static.css 由来 ---------- */
.popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1999999999;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.80);
  opacity: 0;
  transition: opacity .35s ease;
}

.popup.popup--open {
  display: block;
}

.popup.popup--visible {
  opacity: 1;
}

.popup__box {
  position: relative;
  max-width: 100%;
  width: max-content;
  margin: 100px auto 40px;
  padding: 0;
}

.popup__content {
  color: #fff;
  font-weight: 300;
}

.popup__content p {
  margin: 0;
}

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

.popup__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  padding: 2px;
  border: none;
  border-radius: 45px;
  background-color: rgba(221, 51, 51, 1);
  color: #fff;
  font-family: inherit;
  font-weight: 100;
  font-size: 45px;
  line-height: 35px;
  cursor: pointer;
}

@media screen and (max-width: 840px) {

  .popup__box {
    margin-top: 40px;
    width: auto;
    padding: 0 10px;
  }

  .popup__close {
    right: 10px;
  }

}

/* ---------- カミングスーン ----------
   背景写真の上にテーマカラー（--theme-main）を不透明度80%で重ね、中央にロゴ（SVG）を置く */
.coming-soon {
  --coming-soon-overlay: .8;  /* テーマカラーを重ねる濃さ（不透明度 0〜1） */
  position: relative;
  overflow: hidden;
}

.coming-soon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--theme-main);
  opacity: var(--coming-soon-overlay);
}

.coming-soon__bg img {
  display: block;
  width: 100%;
  height: auto;
}

.coming-soon__title {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(357px, 70%);
  height: auto;
  transform: translate(-50%, -50%);
}

/* カミングスーンの角のデザイン（トップメニューのカード・見出しと同じ逆R）
   外側の四隅をくり抜き、内側に四隅が逆Rの細い枠線を引く。縦横比が変わっても角の形は崩れない */
.coming-soon {
  --cs-cut: 14px;     /* 外側の四隅をくり抜く半径 */
  --cs-inset: 10px;   /* 枠線の内側への位置 */
  --cs-corner: 14px;  /* 枠線の四隅の逆R の半径 */
  -webkit-mask:
    radial-gradient(circle at 0 0, transparent var(--cs-cut), #000 calc(var(--cs-cut) + .6px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--cs-cut), #000 calc(var(--cs-cut) + .6px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--cs-cut), #000 calc(var(--cs-cut) + .6px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--cs-cut), #000 calc(var(--cs-cut) + .6px)) bottom right / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 0 0, transparent var(--cs-cut), #000 calc(var(--cs-cut) + .6px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--cs-cut), #000 calc(var(--cs-cut) + .6px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--cs-cut), #000 calc(var(--cs-cut) + .6px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--cs-cut), #000 calc(var(--cs-cut) + .6px)) bottom right / 51% 51% no-repeat;
}

/* 枠線の直線部分（四隅の逆R の範囲は消す） */
.coming-soon__bg::before {
  content: "";
  position: absolute;
  inset: var(--cs-inset);
  z-index: 1;
  border: 1px solid var(--theme-on-main);
  pointer-events: none;
  -webkit-mask:
    radial-gradient(circle at 0 0, transparent var(--cs-corner), #000 calc(var(--cs-corner) + .5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--cs-corner), #000 calc(var(--cs-corner) + .5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--cs-corner), #000 calc(var(--cs-corner) + .5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--cs-corner), #000 calc(var(--cs-corner) + .5px)) bottom right / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 0 0, transparent var(--cs-corner), #000 calc(var(--cs-corner) + .5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--cs-corner), #000 calc(var(--cs-corner) + .5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--cs-corner), #000 calc(var(--cs-corner) + .5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--cs-corner), #000 calc(var(--cs-corner) + .5px)) bottom right / 51% 51% no-repeat;
}

/* 枠線の四隅の逆R（枠の角を中心にした四分円の線） */
.coming-soon__bg::after {
  content: "";
  position: absolute;
  inset: var(--cs-inset);
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 0, transparent calc(var(--cs-corner) - .5px), var(--theme-on-main) calc(var(--cs-corner)), var(--theme-on-main) calc(var(--cs-corner) + .5px), transparent calc(var(--cs-corner) + 1.2px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent calc(var(--cs-corner) - .5px), var(--theme-on-main) calc(var(--cs-corner)), var(--theme-on-main) calc(var(--cs-corner) + .5px), transparent calc(var(--cs-corner) + 1.2px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--cs-corner) - .5px), var(--theme-on-main) calc(var(--cs-corner)), var(--theme-on-main) calc(var(--cs-corner) + .5px), transparent calc(var(--cs-corner) + 1.2px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--cs-corner) - .5px), var(--theme-on-main) calc(var(--cs-corner)), var(--theme-on-main) calc(var(--cs-corner) + .5px), transparent calc(var(--cs-corner) + 1.2px)) bottom right / 51% 51% no-repeat;
}

@media (max-width: 1080px) {

  .coming-soon {
    --cs-cut: 10px;
    --cs-inset: 6px;
    --cs-corner: 10px;
  }

}

/* ---------- トップメニュー（写真＋明朝体ラベルのカード） ----------
   旧：文字・枠入りの画像（cont-*.webp）を CSS で再現。
   カードの外形（四隅の逆R）と内側の枠線は SVG のマスクで描き、枠の色はテーマカラー（--theme-main）。
   .top-menu__item--coming-soon … 写真にテーマカラーを重ねて COMING SOON を表示し、リンクを無効化（common.js） */
.top-menu__item {
  container-type: inline-size;  /* ラベルの文字サイズをカード幅に合わせる（cqw） */
}

.top-menu__link {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 780 / 600;
  background: #fff;
  color: var(--theme-main);
  text-decoration: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 600' preserveAspectRatio='none'%3E%3Cpath d='M21 0H759A21 21 0 0 0 780 21V579A21 21 0 0 0 759 600H21A21 21 0 0 0 0 579V21A21 21 0 0 0 21 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 600' preserveAspectRatio='none'%3E%3Cpath d='M21 0H759A21 21 0 0 0 780 21V579A21 21 0 0 0 759 600H21A21 21 0 0 0 0 579V21A21 21 0 0 0 21 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.top-menu__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--theme-main);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 600' preserveAspectRatio='none'%3E%3Cpath d='M38 18H742A20 20 0 0 0 762 38V562A20 20 0 0 0 742 582H38A20 20 0 0 0 18 562V38A20 20 0 0 0 38 18Z' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 600' preserveAspectRatio='none'%3E%3Cpath d='M38 18H742A20 20 0 0 0 762 38V562A20 20 0 0 0 742 582H38A20 20 0 0 0 18 562V38A20 20 0 0 0 38 18Z' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.top-menu__photo {
  position: relative;
  display: block;
}

.top-menu__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.top-menu__label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mincho);
  font-size: clamp(16px, 3vw, 32px);
  font-size: 6cqw;  /* カード幅に対する文字サイズ（6% = PC で約32px） */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .08em;
}

.top-menu__item--coming-soon .top-menu__link {
  pointer-events: none;
  cursor: default;
}

.top-menu__item--coming-soon .top-menu__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--theme-main);
  opacity: var(--coming-soon-overlay, .8);  /* テーマカラーを重ねる濃さ（不透明度） */
}

.top-menu__item--coming-soon .top-menu__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../images/top/comingsoon.svg") center / 60% auto no-repeat;
}