@font-face {
  font-family:"Shippori Mincho";
  src:url("../fonts/ShipporiMincho-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap
}

:root {
  --cream:#fffaf0;
  --brown:#2d1e1a
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  min-width:320px;
  color:var(--brown);
  background:linear-gradient(180deg, #efb8d7 0%, #f8c8c4 28%, #d6c9eb 63%, #fff170 100%)
}

img {
  display:block;
  max-width:100%
}

body p {
  color:#2d1e1a
}

.display-heading {
  margin:0;
  color:var(--brown);
  font-family:"Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size:clamp(26px, 4.8vw, 60px);
  font-weight:400;
  line-height:1.75;
  letter-spacing:.02em
}

.body-copy {
  margin:0;
  color:var(--brown);
  font-family:"Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", serif;
  font-size:clamp(8px, 2.1vw, 20px);
  font-weight:300;
  line-height:1.75;
  letter-spacing:.01em;
  white-space:nowrap
}

.footnote {
  margin:0;
  color:var(--brown);
  font-family:"Kozuka Gothic Pr6N", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size:clamp(6px, 1.575vw, 15px);
  font-weight:400;
  line-height:1.8
}

.note-ref {
  font-size:.65em;
  line-height:0;
  vertical-align:baseline
}

.lp {
  width:min(100%, 940px);
  margin:auto;
  overflow:hidden;
  background:var(--cream);
  box-shadow:0 0 55px rgba(75, 30, 48, .1)
}

.section {
  position:relative;
  padding-inline:8%
}

.section--rose {
  background:linear-gradient(145deg, #f8ddd8, #edd0c8)
}

.section--cream {
  background:var(--cream)
}

.section--linen {
  background:linear-gradient(rgba(233, 228, 226, .89), rgba(238, 228, 227, .87)), repeating-linear-gradient(90deg, #ddd 0 1px, transparent 1px 8px)
}

.hero {
  position:relative;
  min-height:0;
  aspect-ratio:940 / 1740;
  overflow:hidden;
  background:var(--cream)
}

.hero__decor {
  position:absolute;
  top:13%;
  left:3.5%;
  width:95%
}

.hero__logo {
  position:absolute;
  top:1.5%;
  left:6%;
  width:45%;
  z-index:10
}

.hero__products .product {
  position:absolute;
  width:64%;
  filter:drop-shadow(0 15px 13px rgba(71, 32, 30, .08))
}

.product--vanilla {
  z-index:6;
  top:22%;
  right:0
}

.product--berry {
  z-index:5;
  top:41%;
  left:0
}

.product--choco {
  z-index:4;
  top:63.5%;
  right:0
}

.hero__title {
  position:absolute;
  z-index:10;
  left:50%;
  right:auto;
  translate:-50% 0
}

.hero__title--top {
  top:10.5%;
  width:88%
}

.intro {
  min-height:0;
  aspect-ratio:3004 / 4110;
  padding-top:7.8%;
  overflow:hidden
}

.intro__title {
  position:relative;
  z-index:2;
  width:64%
}

.intro__copy {
  position:relative;
  z-index:2;
  width:83%;
  margin-top:5.2%
}

.intro__photo {
  position:absolute;
  z-index:1;
  left:0;
  bottom:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform-origin:center bottom
}

.gift {
  min-height:0;
  aspect-ratio:940 / 1750;
  padding-top:8.5%
}

.gift__title {
  width:65%;
  margin:0;
  font-size:clamp(22px, 4.8vw, 60px)
}

.gift__title span {
  white-space:nowrap
}

.voices {
  margin-top:7%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5% 3.5%
}

.voice {
  position:relative;
  min-height:0;
  aspect-ratio:1.75 / 1;
  display:flex;
  align-items:end
}

.voice__person {
  width:40%;
  align-self:end
}

.voice__bubble-wrap {
  width:58%;
  margin-left:2%;
  align-self:start
}

.voice__bubble {
  width:100%
}

.voice--reverse {
  flex-direction:row-reverse
}

.voice--reverse .voice__bubble-wrap {
  margin-left:0;
  margin-right:2%
}

.gift__fruit {
  position:absolute;
  width:12%;
  top:49%;
  left:45%
}

.gift__accent {
  position:absolute;
  width:10%;
  top:1.8%;
  left:45%
}

.keeping {
  position:absolute;
  left:8%;
  right:8%;
  top:60%;
  bottom:auto
}

.keeping__title {
  width:100%;
  margin-bottom:6%
}

.keeping__title span,
.history__title span,
.history__guide span {
  white-space:nowrap
}

.history__guide a {
  color:inherit;
  text-decoration:underline;
  text-underline-offset:0.15em
}

.keeping__copy {
  width:90%
}

.keeping__copy rt {
  font-size:.5em;
  letter-spacing:.08em
}

.keeping__nuts {
  position:absolute;
  width:13%;
  top:116%;
  right:auto;
  bottom:auto;
  left:50%;
  transform:translateX(-50%)
}

.keeping__nuts.float {
  animation-name:float-centered
}

.story {
  min-height:0;
  padding:5% 8% 7%;
  background:var(--cream)
}

.story__brand {
  position:relative;
  z-index:1;
  width:49%;
  margin:0 auto 10%;
  text-align:center
}

.story__brand-ja {
  display:block;
  margin-bottom:-1%;
  font-family:"Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size:clamp(9px, 1.5vw, 15px);
  letter-spacing:.45em;
  translate:.22em 0
}

.story__logo {
  width:100%
}

.story__block {
  position:relative;
  z-index:1;
  width:88%;
  margin:0 auto;
  display:grid;
  grid-template-columns:29% 1fr;
  align-items:center;
  gap:9%
}

.story__block+.story__block {
  margin-top:11%
}

.story__photo {
  width:100%
}

.story__heading {
  margin:0 0 3%;
  font-size:clamp(24px, 4vw, 48px);
  line-height:1.35
}

.story__copy {
  width:100%;
  font-size:clamp(8.5px, 1.65vw, 16px);
  line-height:1.8;
  white-space:normal
}

.story__notes {
  width:100%;
  margin-top:3%
}

.flavors {
  padding:3% 3% 10%;
  background:var(--cream)
}

.flavors__title {
  width:51%;
  margin:0 auto;
  padding:0 0 8%
}

.flavor-cards {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:3%
}

.flavor-card:nth-child(1) {
  transition-delay:0s
}

.flavor-card:nth-child(2) {
  transition-delay:.28s
}

.flavor-card:nth-child(3) {
  transition-delay:.56s
}

.flavor-card__photo {
  width:100%
}

.flavor-card__copy {
  width:100%;
  margin-top:9%;
  padding-inline:4%;
  font-size:clamp(8px, 1.55vw, 15px);
  line-height:1.95;
  white-space:normal
}

.sp-only-break {
  display:none
}

.sp-only-content {
  display:none
}

.price {
  position:relative;
  min-height:0;
  margin:0;
  padding:6% 3%;
  background:var(--cream)
}

.price::before,
.price::after {
  content:"";
  position:absolute;
  left:3%;
  width:94%;
  height:8px;
  border-top:2px solid #c69a58;
  border-bottom:2px solid #c69a58
}

.price::before {
  top:2%
}

.price::after {
  bottom:2%
}

.price__all {
  width:94%;
  margin:auto
}

.history {
  position:relative;
  min-height:0;
  aspect-ratio:940 / 1740;
  padding:0
}

.history__vertical {
  position:absolute;
  z-index:0;
  height:45%;
  width:auto;
  right:2.5%;
  top:4.5%;
  opacity:.16
}

.history__title {
  position:absolute;
  z-index:1;
  width:48%;
  left:7.5%;
  top:8%
}

.history__copy {
  position:absolute;
  z-index:1;
  width:90%;
  left:7.5%;
  top:22%
}

.history__guide {
  position:absolute;
  z-index:1;
  width:100%;
  left:0;
  top:60%;
  font-size:clamp(18px, 4vw, 40px);
  text-align:center
}

.history__mark {
  position:absolute;
  z-index:1;
  width:32%;
  left:34%;
  top:72%
}

.js-reveal {
  opacity:0;
  transform:translateY(38px);
  transition:opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1)
}

.js-reveal.is-visible {
  opacity:1;
  transform:none
}

.voice.js-reveal .voice__bubble {
  transform:scale(.35);
  transform-origin:bottom center;
  transition:transform .8s cubic-bezier(.18, .86, .28, 1.3) .25s
}

.voice.js-reveal.is-visible .voice__bubble {
  transform:scale(1)
}

.float {
  animation:float 6.5s ease-in-out infinite
}

.float--delay {
  animation-delay:-2.2s
}

.float--late {
  animation-delay:-4.1s
}

.hover-zoom {
  transition:transform .9s cubic-bezier(.2, .7, .2, 1), filter .9s ease
}

.hover-zoom:hover {
  transform:scale(1.035);
  filter:saturate(1.04) drop-shadow(0 20px 18px rgba(64, 31, 29, .13))
}

@keyframes float {
  0%, 100% {
    transform:translateY(0)
  }

  50% {
    transform:translateY(-16px)
  }

}

@keyframes float-centered {
  0%, 100% {
    transform:translate(-50%, 0)
  }

  50% {
    transform:translate(-50%, -16px)
  }
}

@media(max-width:640px) {
  .sp-only-break {
    display:block
  }

  .pc-only-content {
    display:none
  }

  .sp-only-content {
    display:block
  }

  .body-copy {
    font-size:clamp(8.5px, 2.65vw, 11px);
    letter-spacing:-.05em
  }

  .footnote {
    font-size:clamp(6.375px, 1.9875vw, 8.25px);
    white-space:nowrap
  }

  .lp {
    box-shadow:none
  }

  .hero {
    min-height:0
  }

  .intro {
    min-height:0;
    aspect-ratio:3004 / 4300;
    padding-top:7.8%
  }

  .intro__copy {
    margin-top:5.2%
  }

  .intro__photo {
    top:auto;
    bottom:0;
    height:100%;
    object-position:center 85%
  }

  .gift {
    min-height:0;
    aspect-ratio:940 / 3100;
    padding-top:10%;
    padding-inline:6%
  }

  .voices {
    margin-top:7%;
    grid-template-columns:1fr;
    gap:4vw
  }

  .voice {
    min-height:0;
    aspect-ratio:2.05 / 1
  }

  .voice:nth-child(odd) {
    flex-direction:row
  }

  .voice:nth-child(even) {
    flex-direction:row-reverse
  }

  .voice__person {
    width:34%
  }

  .voice__bubble-wrap {
    width:64%;
    margin-right:0;
    margin-left:2%
  }

  .voice:nth-child(even) .voice__bubble-wrap {
    margin-right:2%;
    margin-left:0
  }

  .gift__fruit {
    top:66%
  }

  .keeping {
    right:6%;
    bottom:auto;
    left:6%;
    top:75%
  }

  .keeping__title {
    margin-bottom:6%
  }

  .keeping__copy {
    width:100%
  }

  .story {
    min-height:0;
    padding:5% 5% 7%
  }

  .story__brand {
    width:56%;
    margin-bottom:11%
  }

  .story__block {
    width:100%;
    grid-template-columns:28% 1fr;
    gap:7%
  }

  .story__copy,
  .story__notes {
    width:100%;
    margin-left:0
  }

  .story__heading {
    margin-left:0
  }

  .flavors__title {
    width:58%;
    padding:0 0 9%
  }

  .flavors {
    padding:3% 3% 10%
  }

  .flavor-cards {
    gap:2%
  }

  .flavor-card__copy {
    padding-inline:1%;
    font-size:clamp(7px, 2.2vw, 10px);
    line-height:1.8
  }

  .price {
    min-height:0;
    padding:7% 3%
  }

  .history {
    min-height:0;
    padding-top:0
  }

  .history__copy {
    width:92%;
    left:4%
  }

  .history__title {
    left:4%
  }

  .history__vertical {
    height:32%;
    right:1.5%;
    top:5%
  }

  .hover-zoom:hover {
    transform:none
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *, *::before, *::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }

  .js-reveal {
    opacity:1;
    transform:none
  }

}