/* Touchez du bois 公式サイト：かき氷ページ専用 */
.kakigori-page {
  --ice-pale: #e4dfc9;
  --ice-lemon: #d8bd68;
  background: var(--cream);
}

.kakigori-page .desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.kakigori-page .breadcrumb {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0 0 28px;
  color: rgba(24, 32, 25, 0.56);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.kakigori-page .breadcrumb a {
  border-bottom: 1px solid rgba(24, 32, 25, 0.35);
}

.kakigori-hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(390px, 0.82fr) minmax(0, 1.18fr);
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}

.kakigori-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(72px, 8vw, 126px) 5vw;
}

.kakigori-hero-copy .eyebrow {
  max-width: 560px;
  margin-bottom: 22px;
  color: var(--clay);
}

.kakigori-hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(58px, 6vw, 94px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.07em;
}

.kakigori-lead {
  max-width: 570px;
  margin: 31px 0 0;
  font-size: 13px;
  line-height: 2.08;
}

.kakigori-hero-copy .button {
  margin-top: 38px;
}

.kakigori-hero-image {
  position: relative;
  min-height: 680px;
  margin: 0;
  overflow: hidden;
  background: #e5dac8;
}

.kakigori-hero-image img {
  object-position: center;
}

.kakigori-hero-image figcaption {
  position: absolute;
  right: clamp(22px, 3vw, 45px);
  bottom: clamp(22px, 3vw, 45px);
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 20px;
  min-width: 250px;
  padding: 18px 21px;
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(24, 32, 25, 0.76);
  backdrop-filter: blur(10px);
}

.kakigori-hero-image figcaption span {
  align-self: end;
  color: #e8ce91;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.kakigori-hero-image figcaption strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-family: var(--display);
  font-size: 29px;
  font-weight: 400;
}

.kakigori-hero-image figcaption small {
  font-size: 7px;
  letter-spacing: 0.12em;
}

.kakigori-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--ink);
  background: var(--ice-pale);
}

.kakigori-facts > div {
  min-height: 138px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 25px 3vw;
  border-right: 1px solid rgba(24, 32, 25, 0.24);
}

.kakigori-facts > div:last-child {
  border-right: 0;
}

.kakigori-facts small {
  color: rgba(24, 32, 25, 0.58);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.kakigori-facts strong {
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 400;
}

.kakigori-espuma {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
  gap: clamp(55px, 8vw, 126px);
  align-items: center;
  padding: clamp(82px, 10vw, 150px) 5vw;
  color: var(--cream);
  background: var(--forest);
}

.kakigori-espuma-image {
  aspect-ratio: 1.27;
  margin: 0;
  overflow: hidden;
  background: #ded1bc;
}

.kakigori-espuma-copy .eyebrow {
  margin-bottom: 18px;
  color: #e8ce91;
}

.kakigori-section-label {
  margin: 0 0 16px;
  color: rgba(250, 247, 240, 0.68);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.kakigori-espuma h2,
.kakigori-section-heading h2,
.kakigori-story h2,
.kakigori-service h2,
.kakigori-visit h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(46px, 5.3vw, 80px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.058em;
}

.kakigori-espuma-copy > p:not(.eyebrow):not(.kakigori-section-label) {
  max-width: 590px;
  margin: 28px 0 0;
  color: rgba(250, 247, 240, 0.72);
  font-size: 12px;
  line-height: 2.05;
}

.kakigori-espuma-points {
  margin: 43px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
}

.kakigori-espuma-points li {
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
}

.kakigori-espuma-points span {
  color: #e8ce91;
  font-family: var(--display);
  font-size: 11px;
}

.kakigori-espuma-points p {
  margin: 0;
  font-size: 11px;
}

.kakigori-menu {
  color: var(--ink);
  background: var(--paper);
}

.kakigori-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 50px;
  align-items: end;
  margin-bottom: clamp(62px, 8vw, 112px);
}

.kakigori-section-heading .eyebrow {
  margin-bottom: 18px;
  color: var(--clay);
}

.kakigori-price-note {
  min-width: 210px;
  padding: 22px 0 5px;
  border-top: 1px solid var(--ink);
  text-align: right;
}

.kakigori-price-note small {
  display: block;
  color: var(--clay);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.kakigori-price-note strong {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--display);
  font-size: 38px;
  font-weight: 400;
}

.kakigori-price-note span {
  margin-left: 8px;
  font-size: 8px;
}

.kakigori-menu-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 36px;
  align-items: stretch;
}

.kakigori-menu-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream);
}

.kakigori-menu-card-1 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.18fr);
}

.kakigori-menu-card-2 { grid-column: 1 / span 6; }
.kakigori-menu-card-3 { grid-column: 7 / span 6; }

.kakigori-menu-card figure {
  aspect-ratio: 1.02;
  margin: 0;
  overflow: hidden;
  background: #e4d8c7;
}

.kakigori-menu-card-1 figure {
  min-height: 610px;
  aspect-ratio: auto;
}

.kakigori-menu-card figure img {
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kakigori-menu-card:hover figure img {
  transform: scale(1.025);
}

.kakigori-menu-card-copy {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 52px);
}

.kakigori-menu-card-1 .kakigori-menu-card-copy {
  justify-content: center;
}

.kakigori-menu-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 34px;
}

.kakigori-menu-card-meta span {
  color: var(--clay);
  font-family: var(--display);
  font-size: 13px;
}

.kakigori-menu-card-meta small {
  max-width: 78%;
  padding: 7px 9px;
  color: var(--cream);
  background: var(--forest);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-align: right;
}

.kakigori-menu-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 61px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.045em;
}

.kakigori-menu-card-copy > strong {
  display: block;
  margin-top: 20px;
  font-family: var(--display);
  font-size: clamp(25px, 2.5vw, 38px);
  font-weight: 400;
}

.kakigori-menu-card-copy > strong small {
  margin-left: 6px;
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 500;
}

.kakigori-menu-card-copy > p {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: rgba(24, 32, 25, 0.68);
  font-size: 11px;
  line-height: 2;
}

.kakigori-photo-note {
  margin: 44px 0 0;
  color: rgba(24, 32, 25, 0.5);
  font-size: 8px;
  text-align: right;
}

.kakigori-story {
  display: grid;
  grid-template-columns: minmax(360px, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(60px, 9vw, 140px);
  align-items: start;
  padding: clamp(90px, 11vw, 168px) 5vw;
  color: var(--cream);
  background: var(--clay);
}

.kakigori-story-heading {
  position: sticky;
  top: 124px;
}

.kakigori-story .eyebrow {
  margin-bottom: 18px;
  color: #f0d8ab;
}

.kakigori-story h2 {
  font-size: clamp(46px, 4.9vw, 72px);
}

.kakigori-story-heading > p:last-child {
  margin: 29px 0 0;
  color: rgba(250, 247, 240, 0.72);
  font-size: 12px;
  line-height: 2.05;
}

.kakigori-story-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.46);
}

.kakigori-story-steps li {
  min-height: 190px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px 24px;
  align-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.46);
}

.kakigori-story-steps span {
  grid-row: 1 / span 2;
  color: #f0d8ab;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.kakigori-story-steps strong {
  font-family: var(--display);
  font-size: clamp(29px, 3.2vw, 48px);
  font-weight: 400;
}

.kakigori-story-steps p {
  margin: 0;
  color: rgba(250, 247, 240, 0.7);
  font-size: 10px;
}

.kakigori-service {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: clamp(55px, 9vw, 140px);
  align-items: center;
  padding: clamp(90px, 11vw, 164px) 5vw;
  background: #ddd1b9;
}

.kakigori-service .eyebrow {
  margin-bottom: 18px;
  color: var(--clay);
}

.kakigori-service .kakigori-section-label {
  color: rgba(24, 32, 25, 0.58);
}

.kakigori-service h2 {
  max-width: 820px;
  font-size: clamp(45px, 5.2vw, 76px);
}

.kakigori-service-copy > p:not(.eyebrow):not(.kakigori-section-label) {
  max-width: 680px;
  margin: 29px 0 0;
  font-size: 12px;
  line-height: 2.05;
}

.kakigori-service-copy > small {
  display: block;
  margin-top: 20px;
  color: rgba(24, 32, 25, 0.57);
  font-size: 8px;
}

.kakigori-service-visual {
  position: relative;
  min-height: 470px;
  display: grid;
  grid-template-columns: 1fr 35px 1fr;
  gap: 8px;
  align-items: center;
  padding-bottom: 54px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.kakigori-service-visual > div {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: 1px solid rgba(24, 32, 25, 0.48);
  border-radius: 50%;
  text-align: center;
}

.kakigori-service-visual span {
  color: var(--clay);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.kakigori-service-visual strong {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 400;
}

.kakigori-service-visual i {
  font-family: var(--display);
  font-size: 25px;
  font-style: normal;
  text-align: center;
}

.kakigori-service-visual > p {
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  margin: 0;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-align: center;
}

.kakigori-visit {
  padding: clamp(92px, 11vw, 168px) 24px;
  text-align: center;
  color: var(--cream);
  background: var(--forest);
}

.kakigori-visit > p {
  margin: 0 0 22px;
  color: #e8ce91;
  font-size: 8px;
  letter-spacing: 0.22em;
}

.kakigori-visit > span {
  display: block;
  margin-top: 25px;
  color: rgba(250, 247, 240, 0.66);
  font-size: 10px;
}

.kakigori-visit > div {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 42px;
}

.kakigori-visit a {
  min-width: 220px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  font-size: 10px;
}

@media (max-width: 1120px) {
  .kakigori-hero { grid-template-columns: 0.92fr 1.08fr; }
  .kakigori-hero-copy { padding-inline: 4vw; }
  .kakigori-menu-card-1 { grid-template-columns: 0.9fr 1.1fr; }
  .kakigori-service-visual { min-height: 400px; }
}

@media (max-width: 760px) {
  .kakigori-page .breadcrumb { margin-bottom: 22px; }

  .kakigori-hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .kakigori-hero-copy { padding: 68px 20px 62px; }
  .kakigori-hero h1 { font-size: clamp(51px, 15.4vw, 68px); }
  .kakigori-lead { font-size: 12px; }

  .kakigori-hero-image {
    min-height: 0;
    aspect-ratio: 1.08;
  }

  .kakigori-hero-image figcaption {
    right: 16px;
    bottom: 16px;
    min-width: 220px;
  }

  .kakigori-facts { grid-template-columns: repeat(2, 1fr); }

  .kakigori-facts > div {
    min-height: 112px;
    padding: 20px;
    border-bottom: 1px solid rgba(24, 32, 25, 0.24);
  }

  .kakigori-facts > div:nth-child(2n) { border-right: 0; }
  .kakigori-facts strong { font-size: 25px; }

  .kakigori-espuma,
  .kakigori-story,
  .kakigori-service { grid-template-columns: 1fr; }

  .kakigori-espuma {
    gap: 45px;
    padding: 20px 20px 88px;
  }

  .kakigori-espuma-image {
    width: calc(100% + 40px);
    margin-left: -20px;
    aspect-ratio: 1.08;
  }

  .kakigori-espuma h2,
  .kakigori-section-heading h2,
  .kakigori-story h2,
  .kakigori-service h2,
  .kakigori-visit h2 { font-size: 43px; }

  .kakigori-section-heading {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 54px;
  }

  .kakigori-price-note {
    min-width: 0;
    text-align: left;
  }

  .kakigori-menu-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .kakigori-menu-card-1,
  .kakigori-menu-card-2,
  .kakigori-menu-card-3 { grid-column: 1; }

  .kakigori-menu-card-1 { display: block; }

  .kakigori-menu-card figure,
  .kakigori-menu-card-1 figure {
    min-height: 0;
    aspect-ratio: 1.03;
  }

  .kakigori-menu-card-copy { padding: 27px 21px 34px; }
  .kakigori-menu-card h3 { font-size: 34px; }

  .kakigori-menu-card-meta {
    align-items: flex-start;
    gap: 12px;
  }

  .kakigori-menu-card-meta small { font-size: 6px; }
  .kakigori-photo-note { text-align: left; }

  .kakigori-story {
    gap: 53px;
    padding: 88px 20px;
  }

  .kakigori-story-heading { position: static; }

  .kakigori-story-steps li {
    min-height: 156px;
    grid-template-columns: 64px 1fr;
  }

  .kakigori-story-steps strong { font-size: 32px; }

  .kakigori-service {
    gap: 52px;
    padding: 88px 20px;
  }

  .kakigori-service-visual {
    min-height: 340px;
    grid-template-columns: 1fr 24px 1fr;
    padding-bottom: 50px;
  }

  .kakigori-service-visual strong { font-size: 22px; }

  .kakigori-visit { padding: 90px 20px 106px; }
  .kakigori-visit > div { flex-direction: column; }
  .kakigori-visit a { min-width: 0; }
}