@charset "UTF-8";
/* //////////////////////////////////////////////////

Title : style.scss
For   : Page/issue/issue_250227/

Created       : 2025-02-19
Last Modified : 2025-02-19

==========================================

Content

////////////////////////////////////////////////// */
/**
 * variables, layouts
 */
#FU250227harulook {
  --color-dark: #000;
  --color-peach-blush: #F9A58F;
  --color-coral-blush: #FFB9A1;
  --color-mint-haze: #F3FFEE;
  --color-cream-haze: #FFF9EE;
  --color-lime-mist: #F5FFEB;
  --font-en: "alumni-sans", sans-serif;
  --font-ja: 游ゴシック体, 游ゴシック Medium, Yu Gothic Medium, Yu Gothic, Yu Gothic, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  --zindex-behind: -1;
  --zindex-base: 1;
  --zindex-overlay: 10;
  --zindex-floating-element: 20;
}

#FU250227harulook {
  position: relative;
  width: 100%;
  margin-inline: auto;
}

.main-area .main-inner {
  max-width: 100%;
  width: 100%;
  padding-inline: 0;
}

#breadcrumb {
  max-width: 1200px;
  margin-inline: auto;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  #FU250227harulook {
    --rate: 100vw / 750;
    -webkit-padding-before: calc(20 * var(--rate));
            padding-block-start: calc(20 * var(--rate));
    -webkit-padding-after: calc(140 * var(--rate));
            padding-block-end: calc(140 * var(--rate));
  }
  #FU250227harulook .hidden-sml {
    display: none !important;
  }
  #FU250227harulook .hidden-lrg {
    display: block !important;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #FU250227harulook {
    --rate: .1rem;
    -webkit-padding-before: calc(60 * var(--rate));
            padding-block-start: calc(60 * var(--rate));
    -webkit-padding-after: calc(110 * var(--rate));
            padding-block-end: calc(110 * var(--rate));
  }
  #FU250227harulook .hidden-lrg {
    display: none !important;
  }
  #FU250227harulook .hidden-sml {
    display: block !important;
  }
}
/* --- for middle viewport --- */
@media screen and (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: 0.7142857143vw;
  }
}
/**
 * common
 */
.lp-furfur {
  background-image: linear-gradient(to top, var(--color-mint-haze) 0%, var(--color-cream-haze) var(--borderline), var(--color-lime-mist) 100%);
  box-sizing: border-box;
}
.lp-furfur img,
.lp-furfur picture {
  display: var(--display, block);
}
.lp-furfur img,
.lp-furfur video,
.lp-furfur svg {
  width: 100%;
  height: auto;
}
.lp-furfur iframe {
  width: 100%;
  height: 100%;
}
.lp-furfur a {
  display: var(--display, inline-block);
}
.lp-furfur a:has(img) {
  --display: block;
}
.lp-furfur a.splide__list {
  --display: flex;
}
.lp-furfur a.swiper-wrapper {
  --display: flex;
}
.lp-furfur * {
  font-family: var(--font-family, var(--font-ja-primary));
  box-sizing: border-box;
  text-align: var(--text-align, center);
  font-feature-settings: "palt";
  color: var(--color, var(--color-dark));
}
.lp-furfur button {
  outline: none;
  border: var(--border, none);
}

.carouselPager {
  --swiper-pagination-bullet-horizontal-gap: 0;
  position: absolute;
  display: flex;
  -moz-column-gap: var(--gap-carousel-dots);
       column-gap: var(--gap-carousel-dots);
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  left: initial !important;
}
.carouselPager__dots,
.carouselPager .swiper-pagination-bullet {
  border: 1px solid var(--color-coral-blush);
  position: relative;
  display: block;
  width: var(--size-carousel-dots);
  height: var(--size-carousel-dots);
  padding: 0;
  border-radius: 50vh;
  outline: none;
  background: none;
  z-index: var(--zindex-floating-element);
  opacity: 1;
}
.carouselPager__dots.is-active,
.carouselPager .swiper-pagination-bullet.is-active {
  background-color: var(--color-coral-blush);
}
.carouselPager__dots-active,
.carouselPager .swiper-pagination-bullet-active {
  background-color: var(--color-coral-blush);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lp-furfur {
    --borderline: 70%;
    padding-inline: calc(20 * var(--rate));
  }
  .carouselPager {
    --swiper-pagination-bottom: calc(20 * var(--rate));
    bottom: calc(20 * var(--rate));
    left: calc(20 * var(--rate)) !important;
    --gap-carousel-dots: calc(16 * var(--rate));
  }
  .carouselPager__dots,
.carouselPager .swiper-pagination-bullet {
    --size-carousel-dots: calc(16 * var(--rate));
    margin: 0;
  }
  main:has(#FU250227harulook) .archive__container {
    -webkit-margin-before: 24vw;
            margin-block-start: 24vw;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lp-furfur {
    --borderline: 70%;
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
  }
  .carouselPager {
    --swiper-pagination-bottom: calc(10 * var(--rate));
    bottom: calc(10 * var(--rate));
    right: calc(10 * var(--rate));
    --gap-carousel-dots: calc(10 * var(--rate));
  }
  .carouselPager__dots,
.carouselPager .swiper-pagination-bullet {
    --size-carousel-dots: calc(8 * var(--rate));
  }
  main:has(#FU250227harulook) .archive__container {
    -webkit-margin-before: 16rem;
            margin-block-start: 16rem;
  }
}
/**
 * first view
 */
.lp-furfur__firstview-hero {
  position: relative;
  margin-inline: auto;
  width: 100%;
}
.lp-furfur__firstview-title {
  position: absolute;
  font-family: var(--font-en);
  pointer-events: none;
}
.lp-furfur__firstview-title span {
  display: block;
}
.lp-furfur__firstview-title--logo {
  margin-inline: auto;
}
.lp-furfur__firstview-title--letter {
  letter-spacing: 0.04em;
  line-height: 1;
}
.lp-furfur__firstview-title--letter:nth-child(4) {
  --color: var(--color-peach-blush);
}
.lp-furfur__firstview-lead-title {
  font-family: var(--font-en);
  --color: var(--color-peach-blush);
  letter-spacing: 0.04em;
  line-height: 1;
}
.lp-furfur__firstview-lead-text {
  font-family: var(--font-ja);
  letter-spacing: 0.05em;
  transition-delay: 0.5s !important;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lp-furfur__firstview-title {
    top: calc(50 * var(--rate));
    left: calc(15 * var(--rate));
  }
  .lp-furfur__firstview-title--logo {
    width: calc(128 * var(--rate));
  }
  .lp-furfur__firstview-title--letter:nth-child(2) {
    -webkit-margin-before: calc(26 * var(--rate));
            margin-block-start: calc(26 * var(--rate));
    font-size: calc(32 * var(--rate));
  }
  .lp-furfur__firstview-title--letter:nth-child(3) {
    -webkit-margin-before: calc(7 * var(--rate));
            margin-block-start: calc(7 * var(--rate));
    font-size: calc(98 * var(--rate));
  }
  .lp-furfur__firstview-title--letter:nth-child(4) {
    -webkit-margin-before: calc(0 * var(--rate));
            margin-block-start: calc(0 * var(--rate));
    font-size: calc(50 * var(--rate));
  }
  .lp-furfur__firstview-lead-title {
    -webkit-margin-before: calc(132 * var(--rate));
            margin-block-start: calc(132 * var(--rate));
    font-size: calc(70 * var(--rate));
  }
  .lp-furfur__firstview-lead-text {
    -webkit-margin-before: calc(47 * var(--rate));
            margin-block-start: calc(47 * var(--rate));
    font-size: calc(24 * var(--rate));
    line-height: 2.2;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lp-furfur__firstview-hero {
    max-width: 480px;
  }
  .lp-furfur__firstview-title {
    top: 37px;
    left: 19px;
  }
  .lp-furfur__firstview-title--logo {
    width: 80px;
  }
  .lp-furfur__firstview-title--letter:nth-child(2) {
    -webkit-margin-before: 18px;
            margin-block-start: 18px;
    font-size: 18px;
  }
  .lp-furfur__firstview-title--letter:nth-child(3) {
    -webkit-margin-before: 5px;
            margin-block-start: 5px;
    font-size: 58px;
  }
  .lp-furfur__firstview-title--letter:nth-child(4) {
    -webkit-margin-before: 5px;
            margin-block-start: 5px;
    font-size: 28px;
  }
  .lp-furfur__firstview-lead-title {
    -webkit-margin-before: 105px;
            margin-block-start: 105px;
    font-size: 40px;
  }
  .lp-furfur__firstview-lead-text {
    -webkit-margin-before: 28px;
            margin-block-start: 28px;
    font-size: 13px;
    line-height: 2.2;
  }
}
/**
 * contents
 */
.lp-furfur__contents-container {
  position: relative;
}
.lp-furfur__contents-shell {
  position: relative;
  width: 100%;
  margin-inline: auto;
}
.lp-furfur__contents-heading-container {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: var(--zindex-floating-element);
}
.lp-furfur__contents-heading {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  height: var(--lp-images-height);
  font-family: var(--font-en);
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
}
.lp-furfur__contents-heading img {
  margin: auto;
}
.lp-furfur__contents-heading span {
  --color: var(--color-peach-blush);
}
.lp-furfur__contents-block {
  display: grid;
  margin-inline: auto;
}
.lp-furfur__contents-cell {
  position: relative;
  overflow: hidden;
}
.lp-furfur__contents-cell::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: var(--zindex-overlay);
  opacity: var(--opacity, 0);
  visibility: var(--visibility, hidden);
  pointer-events: none;
  transition: all 0.5s;
}
.lp-furfur__contents-cell:not(.is-show-prices):has(.lp-furfur__contents-prices) a {
  pointer-events: none;
}
.lp-furfur__contents-cell.is-show-prices {
  --opacity: 1;
  --visibility: visible;
  --pointer-events: auto;
}
.lp-furfur__contents-cell.is-show-prices a:hover {
  opacity: 1;
}
.lp-furfur__contents-prices {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: auto;
  font-family: var(--font-en);
  --color: #fff;
  letter-spacing: 0.04em;
  z-index: var(--zindex-floating-element);
  opacity: var(--opacity, 0);
  visibility: var(--visibility, hidden);
  pointer-events: var(--pointer-events, none);
  transition: all 0.5s;
}
.lp-furfur__contents-prices a {
  display: block;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lp-furfur__contents-container {
    -webkit-margin-before: calc(130 * var(--rate));
            margin-block-start: calc(130 * var(--rate));
  }
  .lp-furfur__contents-heading-container {
    right: calc(20 * var(--rate));
    width: calc(22 * var(--rate));
  }
  .lp-furfur__contents-heading {
    top: 25svh;
    font-size: calc(30 * var(--rate));
  }
  .lp-furfur__contents-block {
    grid-template-columns: 100%;
    row-gap: calc(20 * var(--rate));
  }
  .lp-furfur__contents-prices {
    font-size: calc(30 * var(--rate));
    line-height: 1.5;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lp-furfur__contents-container {
    -webkit-margin-before: calc(105 * var(--rate));
            margin-block-start: calc(105 * var(--rate));
  }
  .lp-furfur__contents-heading-container {
    right: calc(43 * var(--rate));
    width: calc(15 * var(--rate));
  }
  .lp-furfur__contents-heading {
    top: calc(50% - var(--heading-height) / 2);
    font-size: 20px;
  }
  .lp-furfur__contents-block {
    max-width: 820px;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: calc(20 * var(--rate));
         column-gap: calc(20 * var(--rate));
    row-gap: calc(19.5 * var(--rate));
  }
  .lp-furfur__contents-cell {
    max-width: 400px;
  }
  .lp-furfur__contents-prices {
    font-size: calc(16 * var(--rate));
    line-height: 1.5;
  }
}
/**
 * lp footer
 */
.lp-furfur__footer {
  --font-family: var(--font-en);
}
.lp-furfur__footer > * {
  letter-spacing: 0.04em;
}
.lp-furfur__sraff-credit > dd > dl {
  display: flex;
  justify-content: center;
}
.lp-furfur__button {
  --display: grid;
  position: relative;
  place-items: center;
  max-width: 820px;
  margin-inline: auto;
  background-color: var(--color-coral-blush);
  --color: #fff;
  letter-spacing: 0.04em;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lp-furfur__footer {
    -webkit-margin-before: calc(135 * var(--rate));
            margin-block-start: calc(135 * var(--rate));
  }
  .lp-furfur__sraff-credit {
    font-size: calc(30 * var(--rate));
    line-height: 1.5;
  }
  .lp-furfur__button {
    height: calc(116 * var(--rate));
    -webkit-margin-before: calc(60 * var(--rate));
            margin-block-start: calc(60 * var(--rate));
    font-size: calc(50 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lp-furfur__footer {
    -webkit-margin-before: calc(106 * var(--rate));
            margin-block-start: calc(106 * var(--rate));
  }
  .lp-furfur__sraff-credit {
    font-size: calc(16 * var(--rate));
    line-height: 1.5;
  }
  .lp-furfur__button {
    height: calc(66 * var(--rate));
    -webkit-margin-before: calc(35 * var(--rate));
            margin-block-start: calc(35 * var(--rate));
    font-size: calc(32 * var(--rate));
  }
}
/**
 * animation
 */
.lp-furfur__firstview-hero {
  opacity: 0;
  transition: all 1.5s;
  transform: translateY(50px);
}
.lp-furfur__firstview-hero.is-show {
  opacity: 1;
  transform: translateY(0);
}
.lp-furfur__firstview-hero.is-show .lp-furfur__firstview-title span {
  opacity: 1;
  transform: translateY(0);
}
.lp-furfur__firstview-hero.is-show .lp-furfur__firstview-title span:nth-child(1) {
  transition-delay: 0.5s;
}
.lp-furfur__firstview-hero.is-show .lp-furfur__firstview-title span:nth-child(2) {
  transition-delay: 1s;
}
.lp-furfur__firstview-hero.is-show .lp-furfur__firstview-title span:nth-child(3) {
  transition-delay: 1.5s;
}
.lp-furfur__firstview-hero.is-show .lp-furfur__firstview-title span:nth-child(4) {
  transition-delay: 2s;
}
.lp-furfur__firstview-title span {
  opacity: 0;
  transition: all 1.5s;
  transform: translateY(25px);
}

.js-animation-trigger.anim-fade-in {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-animation-trigger.anim-fade-in.is-show {
  transform: translateY(0);
  opacity: 1;
}
/*# sourceMappingURL=style.css.map */