/**
 * Sylph LP
 */


/* ==================================================
   Sylph LP - Base Style
================================================== */

:root {
  /* Brand Colors */
  --sylph-purple: #665184;
  --sylph-purple-dark: #51406a;
  --sylph-purple-light: #9b8aae;

  --sylph-cream: #f7f3ed;
  --sylph-cream-dark: #eee7dd;

  --sylph-white: #ffffff;
  --sylph-text: #494544;
  --sylph-text-light: #77706d;
  --sylph-border: #d9d1ca;

  /* Layout */
  --sylph-inner: 520px;
  --sylph-side: 24px;

  /* Section spacing */
  --sylph-section-y: 88px;

  /* Radius */
  --sylph-radius: 4px;

  /* Animation */
  --sylph-ease: cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   LP Wrapper
================================================== */

.sylph-lp {
  position: relative;

  width: 100%;
  overflow: hidden;

  background: var(--sylph-cream);
  color: var(--sylph-text);

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 15px;
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: .055em;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ==================================================
   Reset within Sylph LP
================================================== */

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

.sylph-lp h1,
.sylph-lp h2,
.sylph-lp h3,
.sylph-lp h4,
.sylph-lp p,
.sylph-lp figure,
.sylph-lp ul,
.sylph-lp ol {
  margin: 0;
}

.sylph-lp ul,
.sylph-lp ol {
  padding: 0;
  list-style: none;
}

.sylph-lp img,
.sylph-lp picture,
.sylph-lp video {
  display: block;
  max-width: 100%;
}

.sylph-lp img {
  height: auto;
}

.sylph-lp a {
  color: inherit;
  text-decoration: none;
}

.sylph-lp button,
.sylph-lp input,
.sylph-lp textarea,
.sylph-lp select {
  font: inherit;
}


/* ==================================================
   Layout
================================================== */

.sylph-inner {
  width: min(
    calc(100% - (var(--sylph-side) * 2)),
    var(--sylph-inner)
  );

  margin-inline: auto;
}

.sylph-section {
  position: relative;
  padding-block: var(--sylph-section-y);
}

.sylph-section--white {
  background: var(--sylph-white);
}

.sylph-section--purple {
  background: var(--sylph-purple);
  color: var(--sylph-white);
}


/* ==================================================
   Typography
================================================== */

.sylph-lp h1,
.sylph-lp h2,
.sylph-lp h3,
.sylph-lp h4 {
  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  color: inherit;

  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .07em;
}

.sylph-lp p {
  color: inherit;
}


/* ----------------------------------------
   English Serif
---------------------------------------- */

.sylph-en {
  font-family:
    "Cormorant Garamond",
    "Times New Roman",
    serif;

  font-weight: 400;
  letter-spacing: .05em;
}


/* ----------------------------------------
   Section Title
---------------------------------------- */

.sylph-heading {
  margin-bottom: 32px;
}

.sylph-heading__en {
  display: block;

  color: var(--sylph-purple);

  font-family:
    "Cormorant Garamond",
    "Times New Roman",
    serif;

  font-size: clamp(38px, 11vw, 52px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .025em;
}

.sylph-heading__jp {
  display: block;

  margin-top: 14px;

  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .08em;
}


/* ----------------------------------------
   Lead Copy
---------------------------------------- */

.sylph-lead {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .075em;
}


/* ----------------------------------------
   Body Copy
---------------------------------------- */

.sylph-text {
  font-size: 14px;
  line-height: 2.15;
  letter-spacing: .055em;
}

.sylph-text + .sylph-text {
  margin-top: 1.6em;
}


/* ----------------------------------------
   Small Text
---------------------------------------- */

.sylph-note {
  color: var(--sylph-text-light);

  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .04em;
}


/* ==================================================
   Images
================================================== */

.sylph-image {
  width: 100%;
}

.sylph-image img {
  width: 100%;
  height: auto;

  object-fit: cover;
}


/* ==================================================
   Link / CTA
================================================== */

.sylph-lp .sylph-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 58px;
  margin-top: 30px;
  padding: 14px 24px;

  background: var(--sylph-purple);
  border: 1px solid var(--sylph-purple);

  color: var(--sylph-white);

  font-family:
    "Cormorant Garamond",
    "Times New Roman",
    serif;

  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;

  text-decoration: none;

  transition:
    background-color .35s ease,
    color .35s ease,
    border-color .35s ease;
}

@media (hover: hover) {

  .sylph-lp .sylph-btn:hover {
    background: var(--sylph-cream);
    border-color: var(--sylph-purple);
    color: var(--sylph-purple);
  }

}

.sylph-lp .sylph-btn--outline {
  background: transparent;
  color: var(--sylph-purple);
}


/* ==================================================
   Divider
================================================== */

.sylph-line {
  width: 100%;
  height: 1px;

  margin-block: 40px;

  background: var(--sylph-border);
}


/* ==================================================
   Utility
================================================== */

.sylph-center {
  text-align: center;
}

.sylph-left {
  text-align: left;
}

.sylph-purple {
  color: var(--sylph-purple);
}

.sylph-white {
  color: var(--sylph-white);
}

.sylph-bg-cream {
  background: var(--sylph-cream);
}

.sylph-bg-white {
  background: var(--sylph-white);
}

.sylph-bg-purple {
  background: var(--sylph-purple);
}


/* ==================================================
   Base Responsive
   PCは破綻防止程度に調整
================================================== */

@media (min-width: 768px) {

  :root {
    --sylph-side: 32px;
    --sylph-section-y: 104px;
  }

  .sylph-lp {
    font-size: 16px;
  }

  .sylph-heading__en {
    font-size: 56px;
  }

  .sylph-text {
    font-size: 15px;
  }

}


/* ==================================================
   Reduced Motion
================================================== */

@media (prefers-reduced-motion: reduce) {

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

}


/* ==================================================
   FV
================================================== */

.sylph-fv {
  position: relative;

  width: 100%;
  height: 100svh;
  min-height: 620px;

  overflow: hidden;

  background: var(--sylph-cream);
}


/* ----------------------------------------
   FV - Background
---------------------------------------- */

.sylph-lp .sylph-fv__bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  max-width: none;

  object-fit: cover;
  object-position: center center;

  transform: scale(1.04);

  animation:
    sylph-fv-zoom 2.6s var(--sylph-ease) forwards;
}


/* ----------------------------------------
   FV - Overlay
---------------------------------------- */

.sylph-fv__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(40, 28, 48, .08) 0%,
      rgba(40, 28, 48, .02) 45%,
      rgba(40, 28, 48, .18) 100%
    );
}


/* ----------------------------------------
   FV - Content
---------------------------------------- */

.sylph-fv__content {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;
}


/* ----------------------------------------
   FV - Logo
---------------------------------------- */

.sylph-fv__logo {
  position: absolute;

  top: 6.5%;
  left: 50%;

  width: 108px;
  max-width: none;
  height: auto;

  transform: translateX(-50%);

  opacity: 0;

  animation:
    sylph-fv-logo 1.2s .35s var(--sylph-ease) forwards;
}


/* ----------------------------------------
   FV - Catch Copy
---------------------------------------- */

.sylph-fv__catch {
  position: absolute;

  left: 50%;
  bottom: 16%;

  width: 95%;
  max-width: none;
  height: auto;

  transform:
    translateX(-50%)
    translateY(18px);

  opacity: 0;

  animation:
    sylph-fv-catch 1.3s .65s var(--sylph-ease) forwards;
}


/* ----------------------------------------
   FV - Scroll
---------------------------------------- */

.sylph-fv__scroll {
  position: absolute;
  z-index: 3;

  left: 50%;
  bottom: 2.5%;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  transform: translateX(-50%);

  color: var(--sylph-white);

  opacity: 0;

  animation:
    sylph-fv-scroll-in 1s 1.4s ease forwards;
}

.sylph-fv__scroll-text {
  font-size: 9px;
  line-height: 1;
  letter-spacing: .2em;
}

.sylph-fv__scroll-line {
  display: block;

  width: 1px;
  height: 28px;

  background: currentColor;

  transform-origin: top;

  animation:
    sylph-scroll-line 1.8s ease-in-out infinite;
}


/* ==================================================
   FV Animation
================================================== */

@keyframes sylph-fv-zoom {

  from {
    transform: scale(1.04);
  }

  to {
    transform: scale(1);
  }

}

@keyframes sylph-fv-logo {

  from {
    opacity: 0;

    transform:
      translateX(-50%)
      translateY(8px);
  }

  to {
    opacity: 1;

    transform:
      translateX(-50%)
      translateY(0);
  }

}

@keyframes sylph-fv-catch {

  from {
    opacity: 0;

    transform:
      translateX(-50%)
      translateY(18px);
  }

  to {
    opacity: 1;

    transform:
      translateX(-50%)
      translateY(0);
  }

}

@keyframes sylph-fv-scroll-in {

  from {
    opacity: 0;
  }

  to {
    opacity: .9;
  }

}

@keyframes sylph-scroll-line {

  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  45% {
    transform: scaleY(1);
    transform-origin: top;
  }

  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }

}


/* ==================================================
   BRAND STORY
================================================== */

.sylph-story {
  padding-top: 104px;
  padding-bottom: 112px;

  background: var(--sylph-cream);
  color: var(--sylph-text);
}

.sylph-story__inner {
  text-align: center;
}


/* ----------------------------------------
   BRAND STORY - Heading
---------------------------------------- */

.sylph-story__heading {
  margin-bottom: 58px;
}

.sylph-story__en {
  display: block;

  color: var(--sylph-purple);

  font-size: 46px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: .025em;
}

.sylph-story__title {
  margin-top: 30px;

  color: var(--sylph-text);

  font-size: 19px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .12em;
}


/* ----------------------------------------
   BRAND STORY - Body
---------------------------------------- */

.sylph-story__body {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.sylph-story__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 2.15;
  letter-spacing: .08em;
}


/* ==================================================
   QUICK INTRO
================================================== */

.sylph-intro {
  padding: 52px 0 54px;

  background: var(--sylph-purple);
  color: var(--sylph-white);
}

.sylph-intro__inner {
  text-align: center;
}

.sylph-intro__en {
  font-size: 13px;
  line-height: 1;
  letter-spacing: .14em;
}

.sylph-intro__text {
  margin-top: 18px;

  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .1em;
}


/* ==================================================
   TOKYO CITY
================================================== */

.sylph-city {
  background: var(--sylph-cream);
}


/* ----------------------------------------
   TOKYO CITY - Visual
---------------------------------------- */

.sylph-city__visual {
  position: relative;

  width: 100%;
  height: 100svh;
  min-height: 620px;

  overflow: hidden;

  background: var(--sylph-purple);
}

.sylph-lp .sylph-city__image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  max-width: none;

  object-fit: cover;
  object-position: center center;
}

.sylph-city__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(22, 16, 28, .28) 0%,
      rgba(22, 16, 28, .22) 38%,
      rgba(22, 16, 28, .08) 70%,
      rgba(22, 16, 28, .16) 100%
    );
}


/* ----------------------------------------
   TOKYO CITY - Headline
---------------------------------------- */

.sylph-city__headline {
  position: absolute;
  z-index: 2;

  top: 12%;
  right: var(--sylph-side);
  left: var(--sylph-side);

  color: var(--sylph-white);
}

.sylph-city__label {
  display: block;

  margin-bottom: 16px;

  font-size: 11px;
  line-height: 1;
  letter-spacing: .22em;
}

.sylph-city__title {
  color: inherit;

  font-size: clamp(38px, 11vw, 52px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .01em;
}


/* ----------------------------------------
   TOKYO CITY - Content
---------------------------------------- */

.sylph-city__content {
  padding-top: 88px;
  padding-bottom: 104px;

  background: var(--sylph-cream);
}

.sylph-city__lead {
  margin-bottom: 38px;

  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: .09em;
}

.sylph-city__text {
  font-size: 14px;
  line-height: 2.15;
  letter-spacing: .07em;
}

.sylph-city__text + .sylph-city__text {
  margin-top: 30px;
}

.sylph-city__message {
  margin-top: 52px;

  color: var(--sylph-purple);

  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .1em;
}


/* ----------------------------------------
   TOKYO CITY - PC
---------------------------------------- */

@media (min-width: 768px) {

  .sylph-city__headline {
    left: max(
      var(--sylph-side),
      calc((100% - var(--sylph-inner)) / 2)
    );
  }

  .sylph-city__title {
    font-size: 76px;
  }

}


/* ==================================================
   YOUR ESSENTIALS
================================================== */

.sylph-essentials {
  padding-top: 104px;
  padding-bottom: 112px;

  background: var(--sylph-white);
}


/* ----------------------------------------
   YOUR ESSENTIALS - Heading
---------------------------------------- */

.sylph-essentials__heading {
  margin-bottom: 42px;
}

.sylph-essentials__en {
  display: block;

  color: var(--sylph-purple);

  font-size: 13px;
  line-height: 1;
  letter-spacing: .18em;
}

.sylph-essentials__title {
  margin-top: 22px;

  font-size: 25px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .09em;
}


/* ----------------------------------------
   YOUR ESSENTIALS - Intro
---------------------------------------- */

.sylph-essentials__intro {
  margin-bottom: 52px;

  font-size: 14px;
  line-height: 2.15;
  letter-spacing: .07em;
}


/* ----------------------------------------
   YOUR ESSENTIALS - Visual
---------------------------------------- */

.sylph-lp .sylph-essentials__visual {
  position: relative;

  width: calc(100% - 32px);
  margin-inline: auto;

  overflow: hidden;
}

.sylph-lp .sylph-essentials__visual img {
  width: 100%;
  height: auto;
}

.sylph-lp .sylph-essentials__items {
  width: 100%;
  padding-inline: 16px;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(11px, 3.2vw, 15px);
  letter-spacing: .04em;
}


/* ----------------------------------------
   YOUR ESSENTIALS - Message
---------------------------------------- */

.sylph-essentials__message {
  padding-top: 54px;

  font-size: 14px;
  line-height: 2.15;
  letter-spacing: .07em;
}

.sylph-essentials__closing {
  margin-top: 34px;

  color: var(--sylph-purple);

  font-size: 19px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .1em;
}


/* ----------------------------------------
   YOUR ESSENTIALS - CTA
---------------------------------------- */

.sylph-essentials__cta {
  margin-top: 52px;
}


/* ==================================================
   FEATURES
================================================== */

.sylph-features {
  padding-top: 108px;

  background: var(--sylph-white);
}


/* ----------------------------------------
   FEATURES - Section Heading
---------------------------------------- */

.sylph-features__heading {
  margin-bottom: 72px;
}

.sylph-features__en {
  display: block;

  color: var(--sylph-purple);

  font-size: 13px;
  line-height: 1;
  letter-spacing: .2em;
}

.sylph-features__title {
  margin-top: 22px;

  font-size: 25px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .09em;
}

.sylph-features__lead {
  margin-top: 28px;

  color: var(--sylph-text-light);

  font-size: 13px;
  line-height: 2;
  letter-spacing: .06em;
}


/* ==================================================
   FEATURE - Common
================================================== */

.sylph-feature {
  padding-bottom: 104px;

  background: var(--sylph-white);
}

.sylph-feature--cream {
  padding-top: 88px;

  background: var(--sylph-cream);
}

.sylph-feature--last {
  padding-top: 88px;
}


/* ----------------------------------------
   FEATURE - Visual
---------------------------------------- */

.sylph-lp .sylph-feature__visual {
  width: 100%;
  margin: 0;
}

.sylph-lp .sylph-feature__visual img {
  display: block;

  width: 100%;
  height: auto;
}

.sylph-lp .sylph-feature__visual--inset {
  width: calc(100% - 48px);
  margin: 54px auto 0;
}

.sylph-lp .sylph-feature__visual--detail {
  width: calc(100% - 32px);
  margin-inline: auto;
}


/* ----------------------------------------
   FEATURE - Content
---------------------------------------- */

.sylph-feature__content {
  padding-top: 48px;
}

.sylph-feature__content--top {
  padding-top: 0;
}


/* ----------------------------------------
   FEATURE - Meta
---------------------------------------- */

.sylph-feature__meta {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 20px;

  color: var(--sylph-purple);
}

.sylph-feature__number {
  font-size: 12px;
  line-height: 1;
}

.sylph-feature__number::after {
  content: "";

  display: inline-block;

  width: 28px;
  height: 1px;

  margin-left: 14px;

  vertical-align: middle;

  background: currentColor;

  opacity: .5;
}

.sylph-feature__label {
  font-size: 11px;
  line-height: 1;
  letter-spacing: .16em;
}


/* ----------------------------------------
   FEATURE - Title
---------------------------------------- */

.sylph-feature__title {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .09em;
}


/* ----------------------------------------
   FEATURE - Text
---------------------------------------- */

.sylph-feature__text {
  margin-top: 28px;

  font-size: 14px;
  line-height: 2.15;
  letter-spacing: .06em;
}

.sylph-feature__text + .sylph-feature__text {
  margin-top: 20px;
}


/* ==================================================
   FEATURE 03 - COLOR
================================================== */

.sylph-feature--color {
  padding-top: 88px;

  background: var(--sylph-white);
}


/* ----------------------------------------
   COLOR - Grid
---------------------------------------- */

.sylph-color {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;

  width: calc(100% - 32px);
  max-width: var(--sylph-inner);

  margin: 54px auto 0;
}


/* ----------------------------------------
   COLOR - Item
---------------------------------------- */

.sylph-lp .sylph-color__item {
  min-width: 0;
  margin: 0;
}


/* ----------------------------------------
   COLOR - Image
---------------------------------------- */

.sylph-lp .sylph-color__item img {
  display: block;

  width: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;
}


/* ----------------------------------------
   COLOR - Content
---------------------------------------- */

.sylph-color__content {
  display: block;

  padding-top: 20px;
}

.sylph-color__name {
  display: block;

  color: var(--sylph-purple);

  font-size: 12px;
  line-height: 1;
  letter-spacing: .18em;
}

.sylph-color__catch {
  margin-top: 14px;

  color: var(--sylph-text);

  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .055em;
}

.sylph-color__text {
  margin-top: 12px;

  color: var(--sylph-text-light);

  font-size: 11px;
  line-height: 1.9;
  letter-spacing: .035em;
}


/* ==================================================
   FEATURE 06 - REAL LEATHER
================================================== */

.sylph-feature--leather {
  padding-bottom: 104px;

  background: var(--sylph-purple);
  color: var(--sylph-white);
}

.sylph-lp .sylph-feature__visual--leather {
  width: 100%;
}

.sylph-feature--leather .sylph-feature__content {
  padding-top: 54px;
}

.sylph-feature--leather .sylph-feature__meta {
  color: rgba(255, 255, 255, .75);
}

.sylph-feature--leather .sylph-feature__title,
.sylph-feature--leather .sylph-feature__text {
  color: var(--sylph-white);
}


/* ==================================================
   FEATURES CTA
================================================== */

.sylph-features__cta {
  padding-top: 8px;
  padding-bottom: 112px;
}

.sylph-features__cta-text {
  margin-bottom: 36px;

  color: var(--sylph-purple);

  font-size: 17px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .09em;

  text-align: center;
}


/* ----------------------------------------
   FEATURES - PC
---------------------------------------- */

@media (min-width: 768px) {

  .sylph-color {
    gap: 20px;

    width: min(
      calc(100% - (var(--sylph-side) * 2)),
      var(--sylph-inner)
    );
  }

  .sylph-color__catch {
    font-size: 15px;
  }

  .sylph-color__text {
    font-size: 12px;
  }

}


/* ==================================================
   SCENE
================================================== */

.sylph-scene {
  padding-top: 108px;

  background: var(--sylph-white);
}


/* ----------------------------------------
   SCENE - Heading
---------------------------------------- */

.sylph-scene__heading {
  margin-bottom: 72px;
}

.sylph-scene__en {
  display: block;

  color: var(--sylph-purple);

  font-size: 13px;
  line-height: 1;
  letter-spacing: .2em;
}

.sylph-scene__title {
  margin-top: 22px;

  font-size: 25px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .09em;
}

.sylph-scene__lead {
  margin-top: 28px;

  color: var(--sylph-text-light);

  font-size: 13px;
  line-height: 2;
  letter-spacing: .06em;
}


/* ----------------------------------------
   SCENE - Item
---------------------------------------- */

.sylph-scene-item {
  padding-bottom: 104px;

  background: var(--sylph-white);
}

.sylph-scene-item--cream {
  padding-top: 88px;

  background: var(--sylph-cream);
}


/* ----------------------------------------
   SCENE - Visual
---------------------------------------- */

.sylph-lp .sylph-scene-item__visual {
  position: relative;

  width: 100%;
  margin: 0;

  overflow: hidden;
}

.sylph-lp .sylph-scene-item__visual img {
  display: block;

  width: 100%;
  height: auto;
}

.sylph-lp .sylph-scene-item__visual--inset {
  width: calc(100% - 48px);
  margin: 54px auto 0;
}


/* ----------------------------------------
   SCENE - Number
---------------------------------------- */

.sylph-scene-item__number {
  position: absolute;

  right: 20px;
  bottom: 14px;

  color: rgba(255, 255, 255, .9);

  font-size: 46px;
  line-height: 1;
}


/* ----------------------------------------
   SCENE - Content
---------------------------------------- */

.sylph-scene-item__content {
  padding-top: 48px;
}

.sylph-scene-item__content--top {
  padding-top: 0;
}


/* ----------------------------------------
   SCENE - Label
---------------------------------------- */

.sylph-scene-item__label {
  display: block;

  margin-bottom: 20px;

  color: var(--sylph-purple);

  font-size: 12px;
  line-height: 1;
  letter-spacing: .18em;
}


/* ----------------------------------------
   SCENE - Title
---------------------------------------- */

.sylph-scene-item__title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .09em;
}


/* ----------------------------------------
   SCENE - Text
---------------------------------------- */

.sylph-scene-item__text {
  margin-top: 28px;

  font-size: 14px;
  line-height: 2.15;
  letter-spacing: .06em;
}

.sylph-scene-item__text + .sylph-scene-item__text {
  margin-top: 20px;
}

.sylph-scene-item__message {
  margin-top: 34px;

  color: var(--sylph-purple);

  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .08em;
}


/* ----------------------------------------
   SCENE - CTA
---------------------------------------- */

.sylph-scene__cta {
  padding-top: 8px;
  padding-bottom: 112px;
}

.sylph-scene__cta-message {
  margin-bottom: 38px;

  color: var(--sylph-purple);

  font-size: 18px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .1em;

  text-align: center;
}


/* ==================================================
   PRODUCT INFORMATION
================================================== */

.sylph-info {
  padding: 108px 0 72px;

  background: var(--sylph-cream);
}


/* ----------------------------------------
   Heading
---------------------------------------- */

.sylph-info__heading {
  margin-bottom: 52px;
}

.sylph-info__en {
  display: block;

  color: var(--sylph-purple);

  font-size: 13px;
  line-height: 1;
  letter-spacing: .2em;
}

.sylph-info__title {
  margin-top: 22px;

  font-size: 25px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .09em;
}


/* ----------------------------------------
   Intro
---------------------------------------- */

.sylph-info__intro {
  margin-bottom: 64px;
}

.sylph-info__lead {
  color: var(--sylph-purple);

  font-size: 18px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .08em;
}

.sylph-info__text {
  margin-top: 28px;

  font-size: 13px;
  line-height: 2.1;
  letter-spacing: .055em;
}


/* ==================================================
   Accordion
================================================== */

.sylph-info__accordion {
  border-top: 1px solid var(--sylph-border);
}

.sylph-info__item {
  border-bottom: 1px solid var(--sylph-border);
}

.sylph-info__summary {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 72px;

  cursor: pointer;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;

  list-style: none;
}

.sylph-info__summary::-webkit-details-marker {
  display: none;
}


/* ----------------------------------------
   + / -
---------------------------------------- */

.sylph-info__icon {
  position: relative;

  display: block;

  width: 16px;
  height: 16px;

  flex: 0 0 16px;
}

.sylph-info__icon::before,
.sylph-info__icon::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  background: var(--sylph-purple);

  transform: translate(-50%, -50%);

  transition: transform .3s ease;
}

.sylph-info__icon::before {
  width: 16px;
  height: 1px;
}

.sylph-info__icon::after {
  width: 1px;
  height: 16px;
}

.sylph-info__item[open]
.sylph-info__icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}


/* ----------------------------------------
   Accordion Body
---------------------------------------- */

.sylph-info__body {
  padding: 0 0 42px;
}

.sylph-info__subheading {
  margin-top: 36px;

  color: var(--sylph-purple);

  font-family:
    "Cormorant Garamond",
    "Times New Roman",
    serif;

  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .16em;
}

.sylph-info__subheading:first-child {
  margin-top: 8px;
}


/* ----------------------------------------
   List
---------------------------------------- */

.sylph-info__list {
  margin-top: 20px;
}

.sylph-info__list li {
  position: relative;

  padding-left: 16px;

  font-size: 12px;
  line-height: 2;
  letter-spacing: .045em;
}

.sylph-info__list li::before {
  content: "・";

  position: absolute;
  left: 0;
}


/* ----------------------------------------
   Notes
---------------------------------------- */

.sylph-info__note {
  margin-top: 24px;

  color: var(--sylph-text-light);

  font-size: 10px;
  line-height: 1.9;
  letter-spacing: .03em;
}


/* ----------------------------------------
   Spec
---------------------------------------- */

.sylph-info__spec > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;

  padding: 20px 0;

  border-bottom: 1px solid rgba(217, 209, 202, .65);
}

.sylph-info__spec > div:last-child {
  border-bottom: 0;
}

.sylph-info__spec dt {
  color: var(--sylph-text);

  font-size: 12px;
  font-weight: 500;
  line-height: 1.8;
}

.sylph-info__spec dd {
  margin: 0;

  color: var(--sylph-text-light);

  font-size: 12px;
  line-height: 1.8;
}


/* ----------------------------------------
   Devices
---------------------------------------- */

.sylph-info__device-label {
  margin-bottom: 22px;

  color: var(--sylph-purple);

  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
}

.sylph-info__devices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}

.sylph-info__devices li {
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .025em;
}


/* ----------------------------------------
   Notice
---------------------------------------- */

.sylph-info__notice {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sylph-info__notice li {
  position: relative;

  padding-left: 16px;

  color: var(--sylph-text-light);

  font-size: 10px;
  line-height: 1.9;
  letter-spacing: .03em;
}

.sylph-info__notice li::before {
  content: "※";

  position: absolute;
  left: 0;
}


/* ==================================================
   Final CTA
================================================== */

.sylph-info__cta {
  padding: 88px 0 82px;
}

.sylph-info__cta-text {
  margin-bottom: 38px;

  color: var(--sylph-purple);

  font-size: 18px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .1em;

  text-align: center;
}


/* ==================================================
   Social
================================================== */

.sylph-social {
  padding-top: 42px;

  border-top: 1px solid var(--sylph-border);

  text-align: center;
}

.sylph-social__title {
  color: var(--sylph-purple);

  font-size: 13px;
  line-height: 1;
  letter-spacing: .2em;
}

.sylph-social__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;

  margin-top: 26px;
}

.sylph-social__link {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  color: var(--sylph-purple);
}

.sylph-social__link svg {
  width: 24px;
  height: 24px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.sylph-social__link:nth-child(2) svg {
  fill: currentColor;
  stroke: none;
}

.sylph-social__dot {
  fill: currentColor;
  stroke: none;
}


/* ==================================================
   CIRCLE TEXT
================================================== */

.sylph-circle-text {
  width: 120px;
  aspect-ratio: 1;
  color: var(--sylph-purple);
  opacity: .36;
  pointer-events: none;
}

.sylph-circle-text svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: sylph-circle-rotate 26s linear infinite;
}

.sylph-circle-text text {
  fill: currentColor;
  font-family:
    "Cormorant Garamond",
    "Times New Roman",
    serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .1em;
}

@keyframes sylph-circle-rotate {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


/* ==================================================
   BRAND STORY - CIRCLE
================================================== */

.sylph-story {
  position: relative;
  overflow: hidden;
}

.sylph-story__circle {
  position: absolute;
  top: 42px;
  right: -22px;
  z-index: 1;
}

.sylph-story__inner {
  position: relative;
  z-index: 2;
}

/* ==================================================
   TOKYO CITY - CIRCLE TEXT
================================================== */

.sylph-city__content {
  position: relative;
  overflow: hidden;
}

.sylph-city__circle {
  position: absolute;
  top: 42px;
  right: -24px;
  z-index: 1;
  width: 138px;
  opacity: .26;
}

.sylph-city__content .sylph-inner {
  position: relative;
  z-index: 2;
}

/* ==================================================
   FEATURES - CIRCLE TEXT
================================================== */

.sylph-features__heading {
  position: relative;
}

.sylph-features__circle {
  position: absolute;
  top: -42px;
  right: -35px;
  z-index: 0;
  width: 165px;
  opacity: .18;
}

.sylph-features__heading > *:not(.sylph-features__circle) {
  position: relative;
  z-index: 1;
}

/* ==================================================
   EVERY SCENE - CIRCLE TEXT
================================================== */

.sylph-scene__heading {
  position: relative;
}

.sylph-scene__circle {
  position: absolute;
  top: -34px;
  right: -24px;
  z-index: 0;
  width: 148px;
  opacity: .22;
}

.sylph-scene__heading > *:not(.sylph-scene__circle) {
  position: relative;
  z-index: 1;
}

.sylph-scene__circle svg {
  animation-duration: 30s;
  animation-direction: reverse;
}


/* ==================================================
   SCROLL REVEAL
================================================== */

.sylph-lp .sylph-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .9s var(--sylph-ease),
    transform .9s var(--sylph-ease);
  will-change: opacity, transform;
}


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


/* ----------------------------------------
   Delay
---------------------------------------- */

.sylph-lp .sylph-reveal--delay-1 {
  transition-delay: .12s;
}

.sylph-lp .sylph-reveal--delay-2 {
  transition-delay: .24s;
}

.sylph-lp .sylph-reveal--delay-3 {
  transition-delay: .36s;
}

.sylph-lp .sylph-reveal--delay-4 {
  transition-delay: .48s;
}

/* ==================================================
   IMAGE REVEAL
================================================== */

.sylph-lp .sylph-image-reveal {
  overflow: hidden;
}

/* 画像本体 */
.sylph-lp .sylph-image-reveal img {
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 1.1s var(--sylph-ease),
    transform 1.6s var(--sylph-ease);
  will-change: opacity, transform;
}

/* 表示 */
.sylph-lp .sylph-image-reveal.is-visible img {
  opacity: 1;
  transform: scale(1);
}

/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {
  .sylph-lp .sylph-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sylph-lp .sylph-image-reveal img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}