@charset "utf-8";

html {
  scroll-behavior: smooth;
}

body {
  height: 100%;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
  font-optical-sizing: auto;
  font-style: normal;
}

a {
  text-decoration: none !important;
}

.wrapper {
  width: 100%;
  margin: 0 auto;
  color: #000;
  background-color: #fff !important;
}



header {
  position: relative;
}

header h1 {
  position: absolute;
  width: 35%;
  max-width: 645px;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
}


header ul {
  position: absolute;
  width: auto;
  bottom: 15%;
  right: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
}

header ul li {
  position: relative;
  padding-right: 40px;
}

header ul li a {
  font-family: "Cinzel", serif;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 3px;
  color: #78716C;
  transition: color .3s ease, transform .3s ease;
}

header ul li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 30px;
  height: 2px;
  background-color: #A8A29E;
  transition: width .3s ease, background-color .3s ease;
}



section.cast {
  width: 100%;
  max-width: 1280px;
  margin: 120px auto;

}

.schedule-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px solid #A8A29E;
  margin-bottom: 90px;
}

.schedule-title h2 {
  font-size: 48px;
  font-family: "Cinzel", serif;
  font-weight: 100;
  letter-spacing: 5px;
}

.schedule-title p {
  font-size: 14px;
  font-family: "Zen Old Mincho", serif;
  font-weight: 100;
  color: #B91C1C;
}

.area-cast-list {
  margin-bottom: 90px;
}

.area-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-left: 8px solid;
  border-image: linear-gradient(to bottom,
      #B91C1C 0%,
      #D63939 100%) 1;
  padding-left: 14px;
  margin-bottom: 60px;
}

.area-title span:nth-of-type(1) {
  font-family: "Cinzel", serif;
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 3px;
  color: #000;
}

.area-title span:nth-of-type(2) {
  font-size: 14px;
  font-family: "Zen Old Mincho", serif;
  font-weight: 100;
  color: #78716C;
}

ul.cast-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  justify-content: center;
  /* max-width: calc(400px * 3 + 24px * 2);  */
  margin: 0 auto;
}

ul.cast-list li {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.cast-profile {
  border-left: 1px solid #E7E5E4;
  padding: 3px 0;
  padding-left: 16px;
  margin-top: 24px;
}

.cast-profile p:nth-of-type(1) {
  font-family: "Cinzel", serif;
  font-weight: bold;
  font-size: 9px;
  color: #8F661A;
  letter-spacing: 3px;
}

.cast-profile p:nth-of-type(2) {
  font-family: "Zen Old Mincho", serif;
  font-size: 24px;
  color: #1C1917;
}

.cast-profile p:nth-of-type(3) {
  font-family: "Cinzel", serif;
  font-weight: normal;
  font-size: 14px;
  color: #A8A29E;
  letter-spacing: 3px;
}

.cast-profile p:nth-of-type(4) {
  font-family: "Zen Old Mincho", serif;
  font-weight: normal;
  font-size: 16px;
  color: #78716C;
}

.cast-profile p:nth-of-type(5) {
  font-family: "Zen Old Mincho", serif;
  font-weight: normal;
  font-size: 13px;
  color: #78716C;
  padding-top: 5px;
}

/* エリア詳細 */
.area-btn {
  display: flex;
  width: 100%;
  height: 520px;
  overflow: hidden;
}

/* パネル */
.area-btn>div {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  transition: flex .85s cubic-bezier(.22, 1, .36, 1);
  /* ←ぬわっ */
}

/* 画像（中央基準で左右に広がる） */
.area-btn>div img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 600px;
  /* 固定サイズ（画像自体は変えない） */
  object-fit: cover;
  display: block;
  /* filter: brightness(.6); */
  transition:
    filter .35s ease,
    clip-path .9s cubic-bezier(.22, 1, .36, 1);
  /* ←ぬわっ */
  max-width: unset;
}




/* ✅ “ぬわっ”の正体：クリップをオーバーシュートさせて戻す */
.area-btn>div img {
  /* clip-path: inset(0 25% 0 25%);  */
  clip-path: inset(0);
  width: max(600px, 100%);
}


/* 既存の area-btn 一式はそのままでOK（貼ってくれたCSS） */
.area-wrap {
  background-color: #000 !important;
}

/* ボタン hover で「どれがhover扱いか」を作るためのクラス */
.area-wrap.is-1 .area-btn>div[data-i="1"],
.area-wrap.is-2 .area-btn>div[data-i="2"],
.area-wrap.is-3 .area-btn>div[data-i="3"],
.area-wrap.is-4 .area-btn>div[data-i="4"],
.area-wrap.is-5 .area-btn>div[data-i="5"],
.area-wrap.is-6 .area-btn>div[data-i="6"] {
  flex: 0 0 600px;
  z-index: 2;
}

/* ボタンhover中は「それ以外」を狭くする */
.area-wrap.is-1 .area-btn>div:not([data-i="1"]),
.area-wrap.is-2 .area-btn>div:not([data-i="2"]),
.area-wrap.is-3 .area-btn>div:not([data-i="3"]),
.area-wrap.is-4 .area-btn>div:not([data-i="4"]),
.area-wrap.is-5 .area-btn>div:not([data-i="5"]),
.area-wrap.is-6 .area-btn>div:not([data-i="6"]) {
  flex: 0.75;
}

/* “ぬわっ”画像（hover時と同じ） */
.area-wrap.is-1 .area-btn>div[data-i="1"] img,
.area-wrap.is-2 .area-btn>div[data-i="2"] img,
.area-wrap.is-3 .area-btn>div[data-i="3"] img,
.area-wrap.is-4 .area-btn>div[data-i="4"] img,
.area-wrap.is-5 .area-btn>div[data-i="5"] img,
.area-wrap.is-6 .area-btn>div[data-i="6"] img {
  filter: brightness(.95);
  clip-path: inset(0 -6% 0 -6%);
}

/* 1枚目（東京）：右側を見せる */
.area-btn>div:nth-child(1) img {
  left: auto;
  /* ← 中央基準を解除 */
  right: 0;
  /* ← 右基準 */
  transform: none;
  /* ← translateX解除 */

  /* 右側が見える窓 */
  clip-path: inset(0 0 0 30%);
}


.area-btn>div:nth-child(4) img {
  left: auto;
  /* ← 中央基準を解除 */
  right: 0;
  /* ← 右基準 */
  transform: none;
  /* ← translateX解除 */

  /* 右側が見える窓 */
  clip-path: inset(0 0 0 30%);
}

.area-btn>div:nth-child(5) img {
  /* left: auto; 
  right: 0;   
  transform: none;
  clip-path: inset(0 0 0 30%); */
}

.area-text {
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3; */
  pointer-events: none;
  /* hover邪魔しない */
  transition:
    opacity .3s ease,
    transform .6s cubic-bezier(.22, 1, .36, 1);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: self-end;
}


.btn-flex {
  /* display: flex;
  flex-direction: row;
  justify-content:  center;
  align-items: center; */
  position: absolute;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  z-index: 4;
}

.area-text span {
  display: block;
}

.area-text span:nth-of-type(1) {
  font-family: "Cinzel", serif;
  font-weight: normal;
  font-size: 14px;
  color: #DDB356;
  letter-spacing: 0.5px;
  padding-right: 10px;
  white-space: nowrap;
  line-height: 1;
}

.area-text span:nth-of-type(2) {
  font-family: "Zen Old Mincho", serif;
  font-size: 32px;
  letter-spacing: 0.25em;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}


/* ===== テキスト＋ボタンのラッパー（左揃え） ===== */
.btn-flex {
  position: absolute;
  top: 50%;
  left: 60px;
  /* left: 5%; */
  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* ★ 左揃え */
  gap: 18px;

  z-index: 4;

  transition:
    left 0.6s cubic-bezier(.22, 1, .36, 1),
    transform 0.6s cubic-bezier(.22, 1, .36, 1);
}

/* .area-btn > div[data-i="6"] .btn-flex { 
  left: 30px;
 } */

.area-btn>div[data-i="6"] .btn-flex .area-text span:nth-of-type(2) {
  letter-spacing: 0;
}

/* ===== テキスト ===== */
.area-text {
  position: static;
  /* absolute解除 */
  transform: none;

  display: flex;
  flex-direction: row;
  align-items: flex-end;
  /* gap: 14px; */

  color: #fff;
  pointer-events: none;
  white-space: normal;
}

/* 英字 */
.area-text .en {
  font-family: "Cinzel", serif;
  font-size: 14px;
  letter-spacing: 0.35em;
  line-height: 1.2;
  text-align: left;
}

/* 日本語 */
.area-text .jp {
  font-family: "Zen Old Mincho", serif;
  font-size: 26px;
  letter-spacing: 0.15em;
  text-align: left;
}

/* ===== ボタン（初期：非表示・右に隠す） ===== */
.area-btn-link {
  opacity: 0;
  transform: translate(40px, 8px);
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.6s cubic-bezier(.22, 1, .36, 1);
  background-color: #055E03;
}

.area-btn-link a {
  display: inline-block;
  padding: 10px 22px;
  border: 0.5px solid rgba(255, 255, 255, 0.6);

  font-family: "Zen Old Mincho", serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  color: #fff;
  text-decoration: none;
}

.btn-flex {
  transition-duration: 1s;
}

.area-btn-link {
  transition-duration: .9s;
}

#areaWrap {
  display: block;
}

#areaWrapSp {
  display: none;
}


@media (max-width: 1400px) {
  /* .area-btn > div[data-i="6"] .btn-flex { 
    left: 30px;
   } */
}

/* SPエリア全体 */
@media (max-width: 870px) {

  #areaWrap {
    display: none;
  }

  #areaWrapSp {
    display: block;
  }

  .area-btn {
    height: auto;
  }

  /* =====================
     SP：画像は完全に固定
  ===================== */
  .area-wrap.sp .area-btn>div img {
    transition: none !important;
    transform: none !important;
    clip-path: none !important;
  }

  br {
    display: none;
  }

  .area-text span:nth-of-type(1) {
    padding-right: 0;
  }

  .area-text {
    gap: 10px;
  }

  section.cast {
    padding: 0 20px;
  }

  .schedule-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .schedule-title p {
    margin-bottom: 10px
  }

  .area-title span:nth-of-type(1) {
    font-size: 18px;
  }

  header h1 {
    width: 80%;
    max-width: unset;
    top: 57%;
    left: 50%;
  }

}

/* デフォルト：彩度を下げる */
.cast-list li .cast-main-image {
  /* filter: saturate(0.5);
  transition: filter .4s ease; */
  /* filter: saturate(1); */
}




/* hover が使えるデバイス（＝PCなど）のみ hover を有効にする */
@media (hover: hover) and (pointer: fine) {

  /* hover時：元の色に戻す */
  .cast-list li:hover .cast-main-image {
    /* filter: saturate(1); */
    /* filter: saturate(0.6);
    transition: filter .4s ease; */
  }

  header ul li:hover a {
    color: #B91C1C;
    transform: translateX(-15px);
  }

  header ul li:hover::after {
    width: 35px;
  }

  /* hover中：他はさらに狭く（見える部分が減る） */
  .area-btn:hover>div:not(:hover) {
    flex: 0.75;
  }

  /* hoverしたパネル：表示領域だけ600pxに */
  .area-btn:hover>div:hover {
    flex: 0 0 600px;
    z-index: 2;
  }

  .area-btn:hover>div:hover img {
    filter: brightness(.95);
    clip-path: inset(0 -6% 0 -6%);
    /* ←少しはみ出し → ぬわっ感 */
  }

  .area-btn>div:hover .btn-flex {
    left: 50%;
    transform: translate(-50%, -50%);
    /* 横＋縦とも中央 */
  }

  .area-btn>div:hover .btn-flex {
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .area-btn>div:hover .area-btn-link {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    transition-delay: 0.18s;
    /* ★余韻 */
  }

  .area-btn>div:not(:hover) .btn-flex,
  .area-btn>div:not(:hover) .area-btn-link {
    transition-duration: .5s;
  }

  .area-btn>div:hover .btn-flex {
    width: 80%;
  }

}

/* 画像ラッパー */
.cast-list li .cast-main-image {
  position: relative;
}

/* 画像だけマスク（動かさない） */
.cast-list li .cast-main-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter .5s ease;
}

/* 中央に出す文字 */
.cast-list li .cast-main-image::before {
  content: "ご予約する"; /* ←表示したい文言 */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  letter-spacing: .12em;
  font-family: "Cinzel", serif;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s ease, transform .5s ease;
  z-index: 2;
  pointer-events: none;
}

/* hover時：画像だけ暗く */
.cast-list li:hover .cast-main-image img {
  filter: brightness(.7) saturate(1.1);
}

/* hover時：文字表示 */
.cast-list li:hover .cast-main-image::before {
  opacity: 1;
  transform: translateY(0);
}