@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&display=swap");

:root {
  --ht-page-max-width: 390px;
  --ht-cream: #fffcf3;
  --ht-paper: #fffefa;
  --ht-text: #36190B;
  --ht-accent: #e8755f;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-padding-top: 18px;
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

html.menu-open,
body.menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0 !important;
  color: var(--ht-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.75;
  text-align: center;
  background: var(--ht-cream);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

#home-tile-lp sup {
  font-size: 100%;
  top: 0;
}

.home-tile-lp img {
  display: block;
  max-width: 100% !important;
  height: auto;
}

.home-tile-lp a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.home-tile-lp button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.home-tile-lp :where(figure, h1, h2) {
  margin: 0 !important;
}

.home-tile-lp :where(.home-tile-page, .menu-panel) p {
  margin: 0 !important;
  text-align: center !important;
}

.home-tile-page {
  position: relative;
  width: 100%;
  max-width: var(--ht-page-max-width);
  margin: 0 auto !important;
  overflow: hidden;
  background: var(--ht-paper);
  box-shadow: 0 0 24px rgba(79, 55, 37, .12);
}

.desktop-side,
.desktop-nav {
  display: none;
}

.home-tile-hero {
  position: relative;
  scroll-margin-top: 0;
  opacity: 0;
  animation: hero-fade-in 1.8s ease .12s both;
  will-change: opacity;
}

@keyframes hero-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hero-main {
  width: 100%;
}

.hero-copy,
.hero-series-logo {
  position: absolute;
  z-index: 2;
}

.hero-copy {
  top: 71.0606%;
  left: 5.3846%;
  width: 67.9487%;
}

.hero-series-logo {
  top: 89.5455%;
  left: 30%;
  width: 40.5128%;
  background: #655243;
  box-shadow: 0 0 0 2px #655243;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  height: 0;
}

.mobile-hero-logo {
  position: absolute;
  top: 24px;
  left: 23px;
  z-index: 110;
  width: 72px;
}

.menu-toggle {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(19px, calc((100% - var(--ht-page-max-width)) / 2 + 19px), env(safe-area-inset-right));
  z-index: 400;
  width: 46px;
  height: 40px;
  padding: 0;
  color: #fff;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: 0;
}

.menu-toggle.is-scrolled,
.menu-toggle.is-open {
  color: var(--ht-text);
}

.menu-toggle span {
  position: absolute;
  left: 7px;
  width: 31px;
  height: 1px;
  background: currentColor;
  transform-origin: center;
  transition: top .32s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1), color .2s ease;
}

.menu-toggle span:first-child {
  top: 17px;
}

.menu-toggle span:last-child {
  top: 23px;
}

.menu-toggle.is-open span:first-child {
  top: 20px;
  transform: rotate(11deg);
}

.menu-toggle.is-open span:last-child {
  top: 20px;
  transform: rotate(-11deg);
}

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow-y: auto;
  color: var(--ht-text);
  background: var(--ht-cream);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  overscroll-behavior: contain;
  transition: clip-path .38s cubic-bezier(.64, 0, .78, 0), visibility 0s linear .38s;
}

.menu-panel.is-open {
  visibility: visible;
  clip-path: inset(0);
  pointer-events: auto;
  transition: clip-path .52s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}

.menu-panel__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--ht-page-max-width);
  min-height: max(844px, 100svh);
  margin: 0 auto;
  padding: 70px 0 38px;
}

.menu-panel__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 229px;
  font-size: 0;
  line-height: 0;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .18s ease, transform .28s cubic-bezier(.64, 0, .78, 0);
}

#home-tile-lp .menu-panel__title-copy {
  width: 212px !important;
}

#home-tile-lp .menu-panel__title-series {
  width: 184px !important;
  margin-top: 18px !important;
}

.menu-panel__links {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 38px 0 0 !important;
  padding: 0 28px !important;
  list-style: none !important;
  text-align: left;
}

.menu-panel__links li {
  margin: 0 !important;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .18s ease, transform .28s cubic-bezier(.64, 0, .78, 0);
}

.menu-panel__links a {
  display: block;
  padding: 1px 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
  white-space: nowrap;
}

.menu-panel__links a span {
  display: inline-block;
  padding-left: 24px;
}

.menu-panel__footer {
  width: 100%;
  margin-top: 58px;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .18s ease, transform .28s cubic-bezier(.64, 0, .78, 0);
}

.menu-panel .copyright {
  margin-top: 30px !important;
}

.menu-panel.is-open .menu-panel__title,
.menu-panel.is-open .menu-panel__links li,
.menu-panel.is-open .menu-panel__footer {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .52s cubic-bezier(.22, 1, .36, 1);
}

.menu-panel.is-open .menu-panel__title {
  transition-delay: .02s;
}

.menu-panel.is-open .menu-panel__links li:nth-child(1) { transition-delay: .07s; }
.menu-panel.is-open .menu-panel__links li:nth-child(2) { transition-delay: .11s; }
.menu-panel.is-open .menu-panel__links li:nth-child(3) { transition-delay: .15s; }
.menu-panel.is-open .menu-panel__links li:nth-child(4) { transition-delay: .19s; }
.menu-panel.is-open .menu-panel__links li:nth-child(5) { transition-delay: .23s; }
.menu-panel.is-open .menu-panel__links li:nth-child(6) { transition-delay: .27s; }
.menu-panel.is-open .menu-panel__links li:nth-child(7) { transition-delay: .31s; }
.menu-panel.is-open .menu-panel__links li:nth-child(8) { transition-delay: .35s; }
.menu-panel.is-open .menu-panel__links li:nth-child(9) { transition-delay: .39s; }
.menu-panel.is-open .menu-panel__links li:nth-child(10) { transition-delay: .43s; }
.menu-panel.is-open .menu-panel__footer { transition-delay: .49s; }

.brand-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 27px;
}

.brand-links a:first-child img {
  width: 94px;
}

.brand-links a:last-child img {
  width: 47px;
}

.copyright {
  margin-top: 38px !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important;
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .045em;
  white-space: nowrap;
}

.intro,
.lp-section,
.closing {
  position: relative;
  scroll-margin-top: 50px;
}

.pattern-diamond {
  background-color: var(--ht-paper);
  background-image: var(--ht-section-background, url("../img/pattern-diamond-long.png"));
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.pattern-circles {
  background-color: var(--ht-paper);
  background-image: var(--ht-section-background, url("../img/pattern-circles.png"));
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.pattern-grid {
  background-color: var(--ht-paper);
  background-image: var(--ht-section-background, url("../img/pattern-grid.png"));
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.intro {
  min-height: 302.5px;
  padding: 77px 20px 48px;
  font-size: 15px;
}

.intro p + p {
  margin-top: 27px !important;
}

.lp-section {
  padding: 66px 20px 0;
}

.section-number {
  position: absolute;
  top: -39.5px;
  left: calc(50% - 39.5px);
  z-index: 3;
  width: 79px;
  height: 79px;
  margin: 0;
}

.section-number__ring,
.section-number__core {
  position: absolute;
}

.section-number__ring {
  inset: 0;
  z-index: 2;
  width: 79px;
  animation: rotate-section-number 18s linear infinite;
  will-change: transform;
}

.section-number__core {
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 66px;
  transform: translate(-50%, -50%);
}

@keyframes rotate-section-number {
  to {
    transform: rotate(360deg);
  }
}

.image-heading {
  margin-inline: auto !important;
}

.image-heading img {
  width: 100%;
}

.content-photo {
  width: 278px;
  margin-inline: auto;
}

.photo-copy figcaption {
  margin-top: 25px;
}

.product-button {
  display: block;
  width: 144px;
  margin-inline: auto;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}

.section-01 {
  min-height: 707.5px;
  padding-top: 66px;
  background-color: var(--ht-paper);
  background-image: var(--ht-section-background, url("../img/arch-pink-short.png"), url("../img/pattern-diamond-long.png"));
  background-position: center top, center top;
  background-repeat: no-repeat;
  background-size: cover, 100% auto;
}

.heading-01 {
  width: 176px;
  margin-top: 56px !important;
}

.section-01 > .content-photo {
  margin-top: 53px;
}

.copy-block--section01 {
  margin-top: 24px;
}

.copy-block--section01 p + p {
  margin-top: 17px !important;
}

.section-02 {
  min-height: 1131.5px;
  padding: 66px 0 0;
}

.heading-02 {
  width: 194px;
  margin-top: 31px !important;
}

.section-02 > h2 + p {
  margin-top: 42px !important;
}

.section-02 > p + p {
  margin-top: 17px !important;
}

.before-photo {
  margin-top: 65px !important;
}

.photo-label--before {
  position: relative;
  top: 9px;
  width: 101px;
  margin: 0 auto -1px;
}

.down-arrow {
  position: relative;
  top: -23px;
  width: 58px;
  margin: 9px auto 17px;
}

.after-photo {
  position: relative;
}

.after-photo > img:last-child {
  width: 100%;
}

.photo-label--after {
  position: absolute;
  top: -23px;
  left: 50%;
  z-index: 2;
  width: 211px;
  transform: translateX(-50%);
}

.section-03 {
  min-height: 956.5px;
  padding-top: 66px;
  background-color: var(--ht-paper);
  background-image: var(--ht-section-background, url("../img/arch-yellow-tall.png"), url("../img/pattern-diamond-long.png"));
  background-position: center top, center top;
  background-repeat: no-repeat;
  background-size: cover, 100% auto;
}

.heading-03 {
  width: 189px;
  margin-top: 34px !important;
}

.section-03 .photo-copy:first-of-type {
  margin-top: 73px !important;
}

.section-03 .photo-copy + .photo-copy {
  margin-top: 53px !important;
}

.section-03 .product-button {
  margin-top: 32px;
}

.section-04 {
  min-height: 807.5px;
  padding-top: 66px;
}

.heading-04 {
  width: 212px;
  margin-top: 35px !important;
}

.section-04 > h2 + p {
  margin-top: 44px !important;
}

.section-04 > p + p {
  margin-top: 0 !important;
}

.section-04 .photo-copy {
  margin-top: 79px !important;
}

.section-04 .product-button {
  margin-top: 28px;
}

.section-05 {
  min-height: 749.5px;
  padding-top: 66px;
  background-color: var(--ht-paper);
  background-image: var(--ht-section-background, url("../img/arch-green.png"), url("../img/pattern-circles.png"));
  background-position: center top, center top;
  background-repeat: no-repeat;
  background-size: cover, 100% auto;
}

.heading-05 {
  width: 225px;
  margin-top: 33px !important;
}

.section-05 > h2 + p {
  margin-top: 48px !important;
}

.section-05 > p + p {
  margin-top: 0 !important;
}

.section-05 .photo-copy {
  margin-top: 75px !important;
}

.section-05 .product-button {
  margin-top: 27px;
}

.section-06 {
  min-height: 608.5px;
  padding: 66px 0 44px;
}

.heading-06 {
  width: 185px;
  margin-top: 34px !important;
}

.section-06 > h2 + p {
  margin-top: 44px !important;
}

.function-icons {
  width: 320px;
  margin: 34px auto 0;
}

.section-06 .note {
  margin-top: 24px !important;
  font-size: 10px;
  line-height: 1.8;
}

.section-07 {
  min-height: 1509.5px;
  padding: 66px 20px 75px;
  background-color: var(--ht-paper);
  background-image: var(--ht-section-background, url("../img/arch-pink-tall.png"), url("../img/pattern-grid.png"));
  background-position: center top, center top;
  background-repeat: no-repeat;
  background-size: cover, 100% auto;
}

.heading-07 {
  width: 140px;
  margin-top: 35px !important;
}

.care-icons {
  width: 332px;
  margin: 48px auto 0;
}

.section-07 > p {
  margin-top: 31px !important;
}

.care-list {
  margin-top: 50px;
}

.care-list .photo-copy + .photo-copy {
  margin-top: 50px !important;
}

.care-list figcaption {
  margin-top: 25px;
}

.section-08 {
  min-height: 959px;
  padding: 66px 20px 95px;
  background-image: var(--ht-section-background, url("../img/pattern-diamond-short.png"));
}

.heading-08 {
  width: 226px;
  margin-top: 34px !important;
}

.section-08 .photo-copy:first-of-type {
  margin-top: 50px !important;
}

.section-08 .photo-copy + .photo-copy {
  margin-top: 51px !important;
}

.section-08 .photo-copy figcaption {
  margin-top: 25px;
}

.closing {
  min-height: 571px;
  padding: 70px 20px 75px;
  background-color: var(--ht-paper);
  background-image: var(--ht-section-background, url("../img/arch-yellow-short.png"), url("../img/pattern-diamond-short.png"));
  background-position: center top, center top;
  background-repeat: no-repeat;
  background-size: cover, 100% auto;
}

.heading-closing {
  width: 212px;
}

.closing > .content-photo {
  margin-top: 55px;
}

.closing > p {
  margin-top: 34px !important;
}

.site-footer {
  min-height: 286px;
  padding: 118px 20px 26px;
  background: #fff;
}

.site-footer .copyright {
  margin-top: 86px !important;
}

.fade-reveal {
  opacity: 0;
  transition: opacity .85s ease var(--reveal-delay, 0ms), transform .85s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms);
}

.fade-reveal--up {
  transform: translateY(20px);
}

.fade-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Futureshop style isolation */
#home-tile-lp.home-tile-page {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: var(--ht-page-max-width) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--ht-text) !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
  text-align: center !important;
  background: var(--ht-paper) !important;
}

#home-tile-lp,
#home-tile-lp *,
#home-tile-lp *::before,
#home-tile-lp *::after {
  box-sizing: border-box !important;
}

#home-tile-lp > main,
#home-tile-lp > footer,
#home-tile-lp section {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

#home-tile-lp img {
  display: block !important;
  float: none !important;
  max-width: 100% !important;
  height: auto !important;
  border: 0 !important;
  vertical-align: top !important;
}

#home-tile-lp :where(figure, h1, h2) {
  display: block !important;
  float: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

#home-tile-lp .home-tile-hero {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  animation: hero-fade-in 1.8s ease .12s both !important;
}

#home-tile-lp .hero-main {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  margin: 0 !important;
}

#home-tile-lp .hero-copy,
#home-tile-lp .hero-series-logo {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  margin: 0 !important;
}

#home-tile-lp .hero-copy {
  top: 71.0606% !important;
  left: 5.3846% !important;
  width: 67.9487% !important;
}

#home-tile-lp .hero-series-logo {
  top: 89.5455% !important;
  left: 30% !important;
  width: 40.5128% !important;
}

#home-tile-lp .image-heading,
#home-tile-lp .content-photo,
#home-tile-lp .product-button,
#home-tile-lp .function-icons,
#home-tile-lp .care-icons {
  float: none !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

#home-tile-lp .before-photo {
  position: relative !important;
  float: none !important;
  width: 100% !important;
  margin: 65px 0 0 !important;
  padding: 0 !important;
}

#home-tile-lp .photo-label--before {
  position: relative !important;
  inset: auto !important;
  top: 9px !important;
  width: 101px !important;
  margin: 0 auto -1px !important;
  transform: none !important;
}

#home-tile-lp .down-arrow {
  position: relative !important;
  inset: auto !important;
  top: -23px !important;
  width: 58px !important;
  margin: 9px auto 17px !important;
  transform: none !important;
}

#home-tile-lp .after-photo {
  position: relative !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#home-tile-lp .after-photo > img:last-child {
  width: 100% !important;
  margin: 0 !important;
}

#home-tile-lp .photo-label--after {
  position: absolute !important;
  inset: auto !important;
  top: -23px !important;
  right: auto !important;
  left: 50% !important;
  z-index: 2 !important;
  width: 211px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

@media (hover: hover) {
  .product-button:hover {
    filter: brightness(1.04) saturate(1.04);
    transform: translateY(-4px);
  }

  .desktop-side a,
  .desktop-nav a {
    transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
  }

  .desktop-side a:hover {
    opacity: .78;
  }

  .desktop-nav a:hover {
    transform: translateX(4px);
  }
}

@media (max-width: 430px) {
  #home-tile-lp.home-tile-page,
  #home-tile-lp .menu-panel__inner {
    max-width: none !important;
  }

  #home-tile-lp.home-tile-page {
    box-shadow: none !important;
  }

  .menu-toggle {
    right: max(19px, env(safe-area-inset-right));
  }

}

@media (min-width: 1000px) {
  .desktop-side,
  .desktop-nav {
    display: block;
    position: fixed;
    z-index: 50;
  }

  .desktop-side {
    top: 0;
    bottom: 0;
    left: 0;
    width: calc((100% - var(--ht-page-max-width)) / 2);
    pointer-events: none;
  }

  .desktop-side a {
    pointer-events: auto;
  }

  .desktop-side__logo,
  .desktop-side__instagram {
    position: absolute;
    display: block;
  }

  .desktop-side__logo {
    top: 5.2%;
    left: 14.2%;
    width: calc(100% - 32px);
    max-width: 108px;
  }

  .desktop-side__instagram {
    top: 68%;
    left: 50%;
    width: calc(100% - 24px);
    max-width: 290px;
    transform: translate(-50%, -50%);
  }

  .desktop-nav {
    top: 238px;
    right: max(20px, calc((100vw - var(--ht-page-max-width)) * .08));
    width: min(315px, calc((100vw - var(--ht-page-max-width)) / 2 - 24px));
  }

  .desktop-nav ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .desktop-nav li {
    margin: 0 !important;
  }

  .desktop-nav a {
    display: block;
  }

  .desktop-nav img {
    width: auto;
    max-height: 27px;
  }

  .mobile-hero-logo,
  .menu-toggle,
  .menu-panel {
    display: none;
  }
}

@media (min-width: 1000px) and (max-width: 1150px) {
  .desktop-nav {
    right: max(12px, calc((100vw - var(--ht-page-max-width)) / 2 - 327px));
  }
}

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

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

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

  .section-number__ring {
    animation: none !important;
  }
}