@charset "UTF-8";

/* =========================================================
   TOP ページ固有
   ヒーロー / CONCEPT / 店内写真 / STYLE / NEWS（一覧の枠のみ）
   ※ NEWS のカード本体は components/post-card.css（--top）
   ========================================================= */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 104px 0 112px;
  background: #fff;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

/* Figma: 1444×1888 の画像を x:-4 / y:-378 に配置（1440×684 の枠内） */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../images/common/bg-texture.jpg") 50% 31.5% / 100.3% auto no-repeat;
  opacity: 0.4;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(171, 217, 241, 0.2);
}

.hero__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: min(1135px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.hero__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 365 / 466;
  border: 2px solid #fff;
  background: var(--c-hero-bg);
  opacity: 0;
  transform: translateY(30px);
  animation: heroIn 1.2s ease forwards;
}

.hero__item:nth-child(2) { animation-delay: 0.2s; }
.hero__item:nth-child(3) { animation-delay: 0.4s; }

@keyframes heroIn {
  to { opacity: 1; transform: none; }
}

/* 各枠に 2 枚重ね、.is-active の画像だけ表示（assets/js/pages/top-hero.js がランダムに切り替え） */
.hero__img {
  position: absolute;
  max-width: none;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s ease, transform 7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero__img.is-active {
  opacity: 1;
  transform: none;
}

/* Figma の切り抜き位置を％で再現（a = 1 枚目 / b = 2 枚目） */
.hero__img--1 { width: 101.1%; left: -0.55%; top: -7.08%; }
.hero__img--2 { width: 110.4%; left: -6.58%; top: -1.93%; }
.hero__img--3 { width: 118.1%; left: -13.4%; top: -3.65%; }
/* 2 枚目は枠の内側（白枠 2px を除く 361×462）を基準に計算 */
.hero__img--1b { width: 101.11%; left: -0.55%; top: -7.14%; }
.hero__img--2b { width: 103.88%; left: -3.32%; top: -2.38%; }
.hero__img--3b { width: 106.65%; left: -6.09%; top: -4.55%; }

@media (prefers-reduced-motion: reduce) {
  .hero__img {
    transform: none;
    transition: opacity 0.6s ease;
  }
}

/* ---------- Concept ---------- */
.concept {
  margin-top: 22px;
  padding: 164px 0 136px;
  border-top: 2px solid var(--c-blue-line-light);
}

.concept__text {
  margin-top: 55px;
  font-family: var(--f-mincho);
  font-size: clamp(15px, 1.39vw, 20px);
  line-height: 2.4;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--c-brown);
}

.concept__text p + p {
  margin-top: 1.8em; /* 段落の間 */
}

/* 狭い画面で行が折り返す時、行の長さをそろえる */
.concept__text p {
  text-wrap: balance;
}

/* ---------- 店内写真 ---------- */
.interior {
  position: relative;
  height: clamp(220px, 28.9vw, 416px);
  overflow: hidden;
}

/* スクロールでふわっと表示（js-fade）。大きな写真なので少しゆっくり */
.interior.js-fade {
  transition-duration: 1.4s;
}

/* パララックス：上下 15% ずつ大きくし、assets/js/common/parallax.js が ±15% 動かす */
.interior img {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: 100% 13%;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .interior img {
    top: 0;
    height: 100%;
  }
}

/* ---------- Style ---------- */
.style {
  padding: 206px 0 111px;
  background: var(--c-style-bg);
}

.style .sec-head {
  align-items: flex-end;
}

.style .link-more {
  margin-right: 19px;
  margin-bottom: 11px;
}

.style__box {
  width: min(1254px, 100% - var(--gutter) * 2);
  margin: 41px auto 0;
  padding: 38px 48px;
  background: #fff;
}

.style__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.style__link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--c-gray);
}

/* どんな比率の画像でも正方形に切り抜く */
.style__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- News（一覧の枠） ---------- */
.news {
  padding-top: 124px;
}

.sec-head--news {
  padding-bottom: 28px;
}

.sec-head--news .btn-outline {
  margin-right: 30px;
}

.news__body {
  padding: 53px 0 54px;
  border-top: 1px solid var(--c-blue-line);
  border-bottom: 1px solid var(--c-blue-line);
}

.news__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 画像幅（241px）より狭い画面でも列をはみ出させない */
  width: min(1227px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.news__item {
  padding: 47px 20px 59px;
}

.news__item + .news__item {
  border-left: 1px solid var(--c-blue-line);
}

.news__empty {
  text-align: center;
  font-family: var(--f-maru);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--c-brown);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .concept { padding: 124px 0 104px; }
  .style { padding: 120px 0 90px; }
  .news { padding-top: 100px; }

  .style__box { padding: 32px; }
  .style__list { gap: 20px; }

  .news__item { padding-inline: 16px; }
}

@media (max-width: 768px) {
  /* Hero : 3 枠を重ねて 1 枠で表示（.is-current の枠だけ表示。切り替えは top-hero.js） */
  .hero {
    padding: 48px 0 56px;
  }

  .hero__bg::before {
    background-size: cover;
  }

  .hero__list {
    grid-template-columns: 1fr;
    width: min(420px, 100% - var(--gutter) * 2);
    opacity: 0;
    transform: translateY(30px);
    animation: heroIn 1.2s ease forwards; /* 登場アニメーションは枠全体で 1 回 */
  }

  .hero__item {
    grid-area: 1 / 1;
    opacity: 0;
    transform: none;
    animation: none;
    transition: opacity 1.6s ease;
  }

  .hero__item.is-current {
    opacity: 1;
  }

  /* Concept */
  .concept {
    margin-top: 14px;
    padding: 88px 0 80px;
  }

  .concept__text {
    margin-top: 32px;
    padding-inline: 20px;
  }

  /* Style */
  .style {
    padding: 72px 0 64px;
  }

  .style .link-more {
    margin: 0 0 6px;
  }

  .style__box {
    margin-top: 28px;
    padding: 16px;
  }

  .style__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* News */
  .news {
    padding-top: 72px;
  }

  .sec-head--news {
    padding-bottom: 20px;
  }

  .sec-head--news .btn-outline {
    margin-right: 0;
  }

  .news__body {
    padding: 0;
  }

  .news__list {
    grid-template-columns: 1fr;
  }

  .news__item {
    padding: 32px 0;
  }

  .news__item + .news__item {
    border-left: 0;
    border-top: 1px solid var(--c-blue-line);
  }
}

@media (max-width: 480px) {
  .concept__text {
    font-size: 14px;
  }
}