@charset "utf-8";

html {
  scroll-behavior: smooth;
  /* ローディングのフェード時にスクロールバーの出入りでロゴが横ずれするのを防ぐ */
  scrollbar-gutter: stable;
}

/* ── Section Label / Btn ── */
.section-label {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #fff;
  font-family: var(--font-serif-en);
}

.inner {
  width: 88%;
  margin: 0 auto;
  max-width: var(--content-max);
}

/* ============================================================
   firstview
   ============================================================ */
.firstview {
  position: relative;
  height: 100vh;
  min-height: 600px;
}

.firstview-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.firstview-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.18);
  z-index: 1;
  pointer-events: none;
}

.video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

/* Vertical catchphrase */
.firstview-catchphrase {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.firstview-catchphrase-inner {
  /* 通常の横並びflexで2列を並べる。writing-modeはspan側で指定 */
  display: flex;
  flex-direction: row;
  gap: 22px;
  align-items: center;
}

.firstview-catchphrase-line {
  /* 各spanを独立した縦書き1列にする */
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
  -webkit-text-orientation: mixed;
  text-orientation: mixed;
  font-family: var(--font-serif-jp);
  font-size: 19px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.16em;
  line-height: 0.8;
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.2);
}

/* ========== SCROLL INDICATOR DOT ========== */
/* .scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin-top: -150px;
}
.scroll-indicator-text {
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
  font-family: "Libre Baskerville", serif;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  margin-bottom: 10px;
  z-index: 100;
}
.scroll-indicator-line {
  width: 1px;
  height: 70px;
  background-color: #fff;
  position: relative;
}
.scroll-indicator-dot {
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-animation: scroll-dot-anim 4s ease-in-out infinite;
  animation: scroll-dot-anim 4s ease-in-out infinite;
}

@-webkit-keyframes scroll-dot-anim {
  0% {
    top: 30%;
  }
  50% {
    top: 70%;
  }
  100% {
    top: 30%;
  }
}

@keyframes scroll-dot-anim {
  0% {
    top: 30%;
  }
  50% {
    top: 70%;
  }
  100% {
    top: 30%;
  }
} */

.scroll {
  position: absolute;
  left: 50%;
  bottom: -80px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: translateX(-50%);
  transition: opacity 0.25s ease;
}

.scroll-text {
  color: #ffffff;
  font-family: var(--font-serif-en);
  font-size: 10px;
  letter-spacing: 1px;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;
  text-orientation: mixed;
  transition: opacity 0.25s ease;
}

.scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: 144px;
  background: rgba(255, 255, 255, 0.38);
  overflow: hidden;
  transition: background 0.25s ease;
}

.scroll-line-current {
  position: absolute;
  top: -48px;
  left: 0;
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-animation: ScrollLine 4.4s ease-in-out infinite;
  animation: ScrollLine 4.4s ease-in-out infinite;
  transition: height 0.25s ease, opacity 0.25s ease;
}

.scroll:hover {
  opacity: 0.82;
}

.scroll:hover .scroll-line {
  background: rgba(255, 255, 255, 0.58);
}

.scroll:hover .scroll-line-current {
  height: 30px;
  opacity: 0.9;
}

@-webkit-keyframes ScrollLine {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateY(236px);
    opacity: 0;
  }
}

@keyframes ScrollLine {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateY(236px);
    opacity: 0;
  }
}

/* ============================================================
   Concept
   ============================================================ */
.concept {
  position: relative;
  background-color: #A0A0A0;
  padding: 150px 0 100px;
  height: 11000px;
  text-align: center;
}

.concept::before {
  content: "";
  position: fixed;
  /* blur(12px) のにじみを画面外へ逃がすため上下左右に 40px はみ出させる */
  top: -40px;
  left: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)), url("/img/top/Concept_bg.webp") center top / cover no-repeat;
  /* 背景をやや寄りの構図に */
  transform: scale(1.07);
  -webkit-filter: blur(12px);
  filter: blur(12px);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  z-index: 0;
}

.concept.is-bg-active::before {
  opacity: 1;
}

.concept-title {
  width: 100%;
  letter-spacing: 0.05em;
  margin: 40px auto 0;
}

.concept-title img {
  width: 400px;
  max-width: 100%;
  height: auto;
  display: block;
}

.concept-text {
  font-size: 16px;
  line-height: 2.0;
  color: #f5f4f0;
  letter-spacing: 0.08em;
  font-weight: 300;
  text-align: left;
  margin-top: 40px;
  /* margin-left: 45px; */
}

.concept-fix {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  /* left: 50%; */
  /* transform: translateX(-50%); */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 100;
  overflow: hidden;
  margin: 0 auto;
}

.concept-fix-mask {
  /* JS が max-height を制御する */
}

/* パララックス画像群の配置基準。
   子は position:absolute の top/left/right % で配置されるため、
   ここを配置基準（containing block）にして幅を 1920px で頭打ちにする。
   top:0/bottom:0 で .concept の padding-box と同じ高さになるので、
   子の top:% の計算結果は 1920px 以下の画面では従来と完全に同一 */
.concept-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.parallax-wrap {
  overflow: hidden;
  position: relative;
}

.parallax-wrap .parallax-inner {
  position: absolute;
  top: -7.5%;
  left: 0;
  width: 100%;
  height: 115%;
  max-width: none;
  -o-object-fit: cover;
  object-fit: cover;
  will-change: transform;
}

.concept-img_1 {
  position: absolute;
  z-index: 10;
  top: 9%;
  right: 0;
  width: 940px;
  aspect-ratio: 3 / 2;
}

.concept-img_2 {
  position: absolute;
  z-index: 10;
  top: 19%;
  left: 7%;
  width: 640px;
  aspect-ratio: 2 / 3;
}

.concept-img_3 {
  position: absolute;
  z-index: 10;
  top: 34%;
  right: 5%;
  width: 720px;
  aspect-ratio: 3 / 2;
}

.concept-img_4 {
  position: absolute;
  z-index: 10;
  top: 37.5%;
  right: 12%;
  width: 720px;
  aspect-ratio: 3 / 2;
}

.concept-img_5 {
  position: absolute;
  z-index: 10;
  top: 45%;
  left: 0;
  width: 640px;
  aspect-ratio: 2 / 3;
}

.concept-img_6 {
  position: absolute;
  z-index: 10;
  top: 53%;
  right: 7%;
  width: 940px;
  aspect-ratio: 3 / 2;
}

.concept-img_7 {
  position: absolute;
  z-index: 10;
  top: 64%;
  left: 0;
  width: 720px;
  aspect-ratio: 3 / 2;
}

.concept-img_8 {
  position: absolute;
  z-index: 10;
  top: 67.5%;
  left: 6.5%;
  width: 720px;
  aspect-ratio: 3 / 2;
}

.concept-img_9 {
  position: absolute;
  z-index: 10;
  top: 71%;
  right: 0;
  width: 620px;
  aspect-ratio: 2 / 3;
}

.concept-img_10 {
  position: absolute;
  z-index: 10;
  top: 81%;
  left: 7%;
  width: 720px;
  aspect-ratio: 3 / 2;
}

.concept-img_11 {
  position: absolute;
  z-index: 10;
  top: 84.5%;
  left: 20%;
  width: 720px;
  aspect-ratio: 3 / 2;
}

/* .concept-symbol_01 {
  position: absolute;
  z-index: 5;
  top: 11%;
  left: -12%;
  width: 50%;
}

.concept-symbol_02 {
  position: absolute;
  z-index: 5;
  top: 29%;
  right: 24%;
  width: 20%;
}

.concept-symbol_03 {
  position: absolute;
  z-index: 5;
  top: 45%;
  left: 20%;
  width: 17%;
}

.concept-symbol_04 {
  position: absolute;
  z-index: 5;
  top: 68%;
  right: 18%;
  width: 27%;
}

.concept-symbol_05 {
  position: absolute;
  z-index: 5;
  top: 76%;
  left: 7%;
  width: 13%;
}

.concept-symbol_06 {
  position: absolute;
  z-index: 5;
  top: 89%;
  right: 13%;
  width: 15%;
} */

/* ============================================================
   MENU
   ============================================================ */
.menu {
  position: relative;
  padding: calc(var(--img-overhang) + 48px) 0 140px;
}

.menu img {
  position: absolute;
  place-self: center;
  inset: 0;
  top: -100%;
  z-index: 10;
  max-width: var(--content-max);
}

.menu-text {
  z-index: 20;
  margin: 40px auto 70px;
}

.menu .section-label {
  color: #1e1e1e;
}

.menu-text h2 {
  font-family: var(--font-serif-jp);
  font-size: 30px;
  margin-top: 28px;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.menu-text p {
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: 0.08em;
  margin-bottom: 30px;
}

.menu-text .nav-btn {
  background: #1E1E1E;
  color: #fff;
  width: 200px;
  border: solid 1px transparent;
  border-radius: 28px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s;
}

.menu-text .nav-btn:hover {
  background: #fff;
  color: #1E1E1E;
  border: solid 1px #1E1E1E;
}

#menu .button-flex {
  margin-top: 46px;
  gap: 20px;
  align-items: start;
}

.menu-text .nav-btn.attention {
  background: transparent;
  color: #1E1E1E;
  border: solid 1px #1E1E1E;
}

.menu-text .nav-btn.attention:hover {
  border-style: dashed;
}

.swiper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.swiper-wrapper {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.4s ease;
  will-change: transform;
}

.swiper-wrapper.dragging {
  transition: none;
}

.swiper-slide {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 530px;
}

.swiper-slide img {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  pointer-events: none;
}

/* ============================================================
   CHEF / FOOD ROW
   ============================================================ */
.chef {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.62)),
    radial-gradient(circle at left top, rgba(235, 225, 210, 0.75), transparent 32%),
    url(../img/top/Chef_bg.webp) center / cover no-repeat;
  padding: 140px 0;
}

.chef-profile {
  width: min(100% - 160px, 1010px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px minmax(0, 640px);
  gap: clamp(40px, 5vw, 70px);
  justify-content: center;
  align-items: center;
}

.chef-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 10;
}

.chef-photo img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  overflow: hidden;
  position: relative;
  margin-bottom: 22px;
}

.chef-role {
  font-size: 14px;
  line-height: 18px;
  font-family: var(--font-serif-en);
}

.chef-name {
  margin-top: 8px;
  font-size: 30px;
  line-height: 44px;
  font-family: var(--font-serif-jp);
  letter-spacing: 0.1em;
}

.chef-text {
  width: 100%;
  margin-left: 10px;
}

.chef-text h3 {
  font-size: 30px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: 0.08em;
  margin: 0 0 25px;
}

.chef-text .career-caption {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  text-align: left;
  font-family: var(--font-serif-en);
}

.chef-text .career {
  display: grid;
  row-gap: 10px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.08em;
  font-weight: 400;
  margin: 0;
}

.chef-text .career-item {
  display: flex;
}

.chef-text .career-item dt {
  width: 4.3em;
  font-weight: 400;
  padding-right: 0.6em;
  flex-shrink: 0;
}

.chef-text .career-item dd {
  margin: 0;
}

.chef-text p {
  font-size: 14px;
  line-height: 30px;
  letter-spacing: 0.08em;
  font-weight: 400;
  margin: 0 0 34px;
}

/* ============================================================
   FEATURE SLIDER
   ============================================================ */
.feature-slider-section {
  background: #ffffff;
  padding: 110px 0 calc(var(--img-overhang) + 110px);
  overflow: hidden;
}

.feature-slider-section .section-label {
  color: #1E1E1E;
  text-align: center;
}

.feature-slider-section h2 {
  margin-top: 28px;
  margin-bottom: 64px;
  text-align: center;
  font-family: var(--font-serif-jp);
  font-size: 30px;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

/* Outer wrapper */
.slider-wrapper {
  position: relative;
}

.slider-container {
  overflow: hidden;
}

.slider-track {
  display: flex;
  gap: 96px;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Each card (image stacked over text) */
/* カード幅は 590px で頭打ち。3枚がちょうど収まるのは 590*3 + 96*2 = 1962px まで。
   それ以上の画面幅では枚数側が増えて左右に見切れる（JS の getVisible() が算出） */
.slide {
  flex: 0 0 min(calc((100% - 192px) / 3), 590px);
  display: flex;
  flex-direction: column;
}

/* Card image */
.slide-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.slide-image>img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

.slide:hover .slide-image>img {
  transform: scale(1.04);
}

/* Card text */
.slide-text {
  padding-top: 30px;
}

.slide-title {
  font-family: var(--font-serif-jp);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.09em;
  line-height: 1.5;
  margin-bottom: 18px;
}

.slide-body {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.05em;
  font-weight: 400;
}

/* ── Controls bar ── */
.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 60px;
}

/* play / pause */
.slider-playpause {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1E1E1E;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
  flex-shrink: 0;
  transition: opacity 0.3s;
}

.slider-playpause:hover {
  opacity: 0.7;
}

.slider-playpause svg {
  fill: currentColor;
}

.slider-playpause .icon-play {
  display: none;
}

.slider-playpause.is-paused .icon-pause {
  display: none;
}

.slider-playpause.is-paused .icon-play {
  display: block;
}

/* progress line */
.slider-progress {
  position: relative;
  width: 150px;
  max-width: 34vw;
  height: 1px;
  background: #d8d6d1;
}

.slider-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #1E1E1E;
}

/* counter */
.slider-count {
  font-family: var(--font-serif-en);
  font-size: 14px;
  letter-spacing: 0.12em;
  min-width: 42px;
  margin: 0 16px;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* prev / next */
.slider-nav-btns {
  display: flex;
  gap: 14px;
}

.slider-arrow {
  width: 56px;
  height: 56px;
  background: #fff;
  border: 1px solid rgba(30, 30, 30, 0.12);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1E1E1E;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.3s,
    color 0.3s,
    border-color 0.3s;
}

.slider-arrow:hover {
  background: #1E1E1E;
  color: #fff;
  border-color: #1E1E1E;
}

@media screen and (max-width: 1670px) {
  .concept-img_1 {
    width: 50% !important;
  }

  .concept-img_2 {
    width: 35% !important;
  }

  .concept-img_3 {
    width: 38% !important;
  }

  .concept-img_4 {
    width: 38% !important;
    top: 37%;
  }

  .concept-img_5 {
    width: 33% !important;
    top: 44%;
  }

  .concept-img_6 {
    width: 50% !important;
    top: 50.5%;
  }

  .concept-img_7 {
    width: 38% !important;
    top: 61%;
  }

  .concept-img_8 {
    width: 38% !important;
    top: 64%;
  }

  .concept-img_9 {
    width: 33% !important;
    top: 67%;
  }

  .concept-img_10 {
    width: 38% !important;
    top: 77%;
  }

  .concept-img_11 {
    width: 38% !important;
    top: 79.5%;
  }
}

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

  /* メニュースライド画像：420×420 */
  .swiper-slide {
    width: 420px;
  }
}

@media screen and (max-width: 1199px) {
  .concept-img .parallax-wrap .parallax-inner {
    height: 122%;
    top: -1.5%;
  }

  /* .menu img {
    width: 900px;
    height: auto;
  } */

  .chef-profile {
    width: min(100% - 96px, 1010px);
  }
}

@media screen and (max-width: 899px) {
  .concept-img_1 {
    width: 45% !important;
  }

  .concept-img_2 {
    width: 35% !important;
  }

  .concept-img_3 {
    width: 40% !important;
  }

  .concept-img_4 {
    width: 40% !important;
    top: 35.5%;
  }

  .concept-img_5 {
    width: 35% !important;
    top: 44%;
  }

  .concept-img_6 {
    width: 50% !important;
    top: 51%;
  }

  .concept-img_7 {
    width: 40% !important;
    top: 61%;
  }

  .concept-img_8 {
    width: 40% !important;
    top: 62.5%;
  }

  .concept-img_9 {
    width: 35% !important;
    top: 67%;
  }

  .concept-img_10 {
    width: 40% !important;
    top: 77%;
  }

  .concept-img_11 {
    width: 40% !important;
    top: 78.5%;
  }

  .chef-profile {
    width: min(100% - 32px, 620px);
    grid-template-columns: 1fr;
    gap: 42px;
    padding-top: 0;
  }

  .chef-text {
    width: 100%;
    padding-top: 30px;
  }

  /* Feature slider: 1枚＋左右見切れ */
  .slider-track {
    gap: 12px;
  }

  .slide {
    flex: 0 0 68%;
    opacity: 0.2;
    transition: opacity 0.6s ease;
  }

  /* 中央（表示中）のスライドのみ不透明に */
  .slide.is-active {
    opacity: 1;
  }

  .slider-controls {
    margin: 48px auto 0;
    /* 中央スライド幅に合わせて中央寄せ */
    width: 68%;
  }
}

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

  /* メニュースライド画像：240×240 */
  .swiper-slide {
    width: 240px;
  }
}

@media screen and (max-width: 599px) {
  .br-sp {
    display: none;
  }

  .inner {
    width: 85%;
  }

  .inner img {
    width: 85%;
  }

  /* .scroll-indicator {
    align-items: flex-start;
    margin-left: 30px;
  }

  .scroll-indicator-text {
    margin-left: -10px;
  } */

  .section-label {
    font-size: 14px;
    letter-spacing: 0.08em;
    margin-left: 3%;
  }

  .scroll {
    left: 10%;
  }

  /* Concept */
  .concept {
    text-align: left;
    height: 4000px;
  }

  .concept-fix {
    width: 90vw;
    left: 5vw;
    transform: none;
  }

  .concept-title {
    width: 75%;
    margin-top: 32px;
    margin-left: 3%;
  }

  .concept-text {
    width: 100%;
    margin-left: 3%;
    font-size: 14px;
    margin-top: 32px;
  }

  /* .concept-img img {
    width: 45%;
    height: auto;
  } */

  .concept-img .concept-img_1 {
    width: 50% !important;
    height: auto;
    top: 16%;
  }

  .concept-img .concept-img_2 {
    width: 34% !important;
    height: auto;
    top: 22.5%;
    left: 7%;
  }

  .concept-img .concept-img_3 {
    width: 40% !important;
    height: auto;
    top: 33%;
    right: 5%;
  }

  .concept-img .concept-img_4 {
    width: 40% !important;
    height: auto;
    top: 35%;
    right: 12%;
  }

  .concept-img .concept-img_5 {
    width: 33% !important;
    height: auto;
    top: 40%;
    left: 0;
  }

  .concept-img .concept-img_6 {
    width: 50% !important;
    height: auto;
    top: 44.5%;
    right: 7%;
  }

  .concept-img .concept-img_7 {
    width: 38% !important;
    height: auto;
    top: 51%;
    left: 0;
  }

  .concept-img .concept-img_8 {
    width: 38% !important;
    height: auto;
    top: 53%;
    left: 7%;
  }

  .concept-img .concept-img_9 {
    width: 34% !important;
    height: auto;
    top: 55%;
  }

  .concept-img .concept-img_10 {
    width: 38% !important;
    height: auto;
    top: 61%;
    left: 7.5%;
  }

  .concept-img .concept-img_11 {
    width: 38% !important;
    height: auto;
    top: 63%;
    left: 20%;
  }

  /* .concept-symbol_01 {
    top: 13%;
    left: 10%;
    width: 80% ;
  }

  .concept-symbol_02 {
    top: 27%;
    right: 58%;
    width: 25%;
  }

  .concept-symbol_03 {
    top: 43%;
    left: 35%;
    width: 30%;
  }

  .concept-symbol_04 {
    top: 65%;
    left: 5%;
    width: 50%;
  }

  .concept-symbol_05 {
    top: 78%;
    left: 15%;
    width: 30%;
  }

  .concept-symbol_06 {
    top: 91.5%;
    right: 10%;
    width: 28%;
  } */



  /* MENU */
  .menu {
    padding: 140px 0 100px;
  }

  .menu .section-label {
    margin-left: 0;
  }

  .menu-text {
    left: 10%;
    margin: 15px auto 50px;
  }

  .menu-text h2 {
    font-size: 22px;
  }

  /* CHEF */
  .chef {
    padding: 100px 0;
  }

  .chef-profile {
    width: calc(100% - 60px);
    gap: 18px;
  }

  .chef-photo img {
    width: 200px;
    height: 200px;
    margin-bottom: 30px;
  }

  .chef-text {
    width: 100%;
    padding: 0;
  }

  .chef-text h3 {
    font-size: 22px;
    line-height: 1.5;
  }

  .chef-text p {
    line-height: 2;
    margin: 0;
  }

  .chef-text .career-item dt {
    text-align: left;
  }

  /* FEATURE SLIDER */

  .feature-slider-section h2 {
    font-size: 18px;
    margin-bottom: 44px;
  }

  /* Feature slider: 1枚＋左右見切れ */
  .slider-track {
    gap: 12px;
  }

  .slide {
    flex: 0 0 82%;
    opacity: 0.2;
    transition: opacity 0.6s ease;
  }

  /* 中央（表示中）のスライドのみ不透明に */
  .slide.is-active {
    opacity: 1;
  }

  .slide-title {
    font-size: 19px;
    margin-bottom: 12px;
  }

  .slide-text {
    padding-top: 22px;
  }

  .slide-body {
    font-size: 13px;
    line-height: 1.95;
  }

  .feature-slider-section {
    padding: 60px 0 172px;
  }

  .slider-controls {
    gap: 14px;
    margin: 36px auto 0;
    /* 中央スライド幅に合わせて中央寄せ */
    width: 82%;
  }

  .slider-progress {
    width: auto;
    flex: 1;
    max-width: none;
  }

  .slider-playpause {
    width: 36px;
    height: 36px;
  }

  /* 前後ボタンを「見切れる画像」と「中央画像」のちょうど中間に配置 */
  .slider-nav-btns {
    position: absolute;
    top: calc(82vw * 2 / 3);
    /* 幅82vw・縦横比3:4画像の縦中央 */
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    z-index: 3;
  }

  .slider-nav-btns .slider-arrow {
    position: absolute;
    top: 0;
    pointer-events: auto;
  }

  /* 左右の見切れ領域(各9vw)内、隙間(12px)の中央 = 9vw - 6px に矢印中心を合わせる */
  .slider-nav-btns .arrow-prev {
    left: calc(9vw - 6px);
    transform: translate(-50%, -50%);
  }

  .slider-nav-btns .arrow-next {
    right: calc(9vw - 6px);
    transform: translate(50%, -50%);
  }

  .slider-arrow {
    width: 48px;
    height: 48px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  }

  .swiper-slide img {
    aspect-ratio: 1 / 1;
    -o-object-fit: cover;
    object-fit: cover;
    height: auto;
  }
}

/* ============================================================
   ローディング（トップページのみ／7日間は再発火しない）
   ============================================================ */
#loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

/* ロゴマーク（〇△☐）の表示アニメーション */
.loading-mark {
  width: 38px;
  opacity: 0;
  -webkit-animation: loadingLogoShow 1.5s ease forwards;
  animation: loadingLogoShow 1.5s ease forwards;
}

.loading-mark img {
  display: block;
  width: 100%;
  height: auto;
}

@-webkit-keyframes loadingLogoShow {
  0% {
    opacity: 0;
    transform: translateY(8px);
    -webkit-filter: blur(6px);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@keyframes loadingLogoShow {
  0% {
    opacity: 0;
    transform: translateY(8px);
    -webkit-filter: blur(6px);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

/* フェードアウト（背景 2s／ロゴ 2.5s を JS の削除タイマー 2500ms と同期） */
#loading.is-hide {
  -webkit-animation: loadingHide 2s ease forwards;
  animation: loadingHide 2s ease forwards;
}

#loading.is-hide .loading-mark {
  -webkit-animation: loadingLogoHide 2.5s ease forwards;
  animation: loadingLogoHide 2.5s ease forwards;
}

@-webkit-keyframes loadingHide {
  0% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes loadingHide {
  0% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@-webkit-keyframes loadingLogoHide {
  0% {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    -webkit-filter: blur(6px);
    filter: blur(6px);
  }
}

@keyframes loadingLogoHide {
  0% {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    -webkit-filter: blur(6px);
    filter: blur(6px);
  }
}

/* 7日以内の再訪問はローディングを描画しない（チラつき防止） */
html.is-loading-skip #loading {
  display: none;
}

/* ローディング表示中はスクロールを固定 */
html.is-loading-active body {
  overflow: hidden;
}