@charset "UTF-8";

/*---------- reset ----------*/
.main-area .main-inner {
  margin: 0;
  width: 100%;
}

/*---------- reset ----------*/
/*---------- all common ----------*/
/* html {
  font-size: 62.5%;
  box-sizing: border-box;
} */

/* @media screen and (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
} */

@font-face {
  font-family: "notoserif";
  src: url("../font/NotoSerifJP-Regular.otf") format("opentype");
}

@font-face {
  font-family: "notoserif-semibold";
  src: url("../font/NotoSerifJP-SemiBold_0.otf") format("opentype");
}

.FR250425FlowerBotanical img,
.FR250425FlowerBotanical svg,
.FR250425FlowerBotanical picture,
.FR250425FlowerBotanical video {
  width: 100%;
  height: auto;
}

.FR250425FlowerBotanical a,
.FR250425FlowerBotanical picture {
  display: block;
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
}

/*---------- all common ----------*/
/*---------- animation ----------*/

.js-fade-Vr {
  opacity: 0;
  transform: translate(0, 0);
  filter: blur(5px);
  transition: all 1.1s ease;
}

.js-fade-Vr.slow {
  transition: all 1.1s ease;
}

.js-fade-Vr.active {
  opacity: 1;
  filter: blur(0px);
  transform: translate(0, 0);
}

/* ===============================================
* テキストアニメーション *
=============================================== */
.text_anim p {
  line-height: 1;
  color: #fff;
}

.text_anim p.serif {
  font-family: "argent-cf", serif;
  font-weight: 100;
  font-style: normal;
}

.text_anim p.serif span {
  font-weight: 100;
}

.text_anim p.sanserif {
  font-family: "aktiv-grotesk", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.text_anim p.sanserif span {
  font-weight: 500;
}

.text_anim span {
  opacity: 0;
  display: inline-block;
  transform: translateY(0.5rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
  font-style: normal;
  position: relative;
  z-index: 10;
}

/* ===============================================
* slick *
=============================================== */

.FR250425FlowerBotanical .slick-dots li {
  width: calc(10 *(100vw / 750));
  height: calc(10 *(100vw / 750));
  margin: 0 0 0 calc(20* (100vw /750));
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

}

.FR250425FlowerBotanical .slick-dots li button {
  width: calc(10 *(100vw / 750));
  height: calc(10 *(100vw / 750));
  border-radius: 50%;
  padding: 0;
  background-color: rgba(255, 255, 255, 0);
  border: #fff 1px solid;
}

.FR250425FlowerBotanical .slick-dots li.slick-active button {
  background-color: rgba(255, 255, 255, 1);
}

.FR250425FlowerBotanical .slick-dots li button:before {
  content: none !important;
}

.FR250425FlowerBotanical .slick-dots {
  position: absolute;
  width: fit-content;
  right: calc(20*(100vw / 750));
  bottom: calc(20*(100vw / 750));
  margin: 0;
}

.FR250425FlowerBotanical .slick-arrow {
  display: none !important;
}

.FR250425FlowerBotanical .slick-prev:before,
.FR250425FlowerBotanical .slick-next:before {
  display: none;
}

.FR250425FlowerBotanical .slick-dotted.slick-slider {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {

  .FR250425FlowerBotanical .slick-dots li {
    width: calc(5.8* (100vw /1400));
    height: calc(5.8* (100vw /1400));
    margin: 0 0 0 calc(11.7* (100vw /1400));
  }

  .FR250425FlowerBotanical .slick-dots li button {
    width: calc(5.8* (100vw /1400));
    height: calc(5.8* (100vw /1400));
  }

  .FR250425FlowerBotanical .slick-dots {
    right: calc(11* (100vw /1400));
    bottom: calc(11* (100vw /1400));
  }
}

/*---------- animation ----------*/
/*---------- font ----------*/
.FR250425FlowerBotanical {
  color: #58595B;
  font-feature-settings: "palt";
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(24 *(100vw / 750));
  line-height: 2.2;
  letter-spacing: 0.05em;
}


@media screen and (min-width: 768px) {

  .FR250425FlowerBotanical {
    /* font-size: 1.3rem; */
  }
}


/*---------- font ----------*/


/*---------- common ----------*/
.model__img {
  position: relative;
}

@media screen and (min-width: 768px) {
  .model__img {
    background: #fff;
  }
}

.model__img::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.FR250425FlowerBotanical {
  overflow: clip;
}

.firstviewArea {
  position: relative;
}

.firstviewArea__img {
  margin-inline: auto;
  margin-bottom: calc(104 *(100vw / 750));
}

.firstviewArea__lead {
  text-align: center;
  font-size: calc(26* (100vw /750));
  line-height: 2;
  letter-spacing: 0.1em;
  margin-top: calc(108 * (100vw / 750));
  color: #58595B;
}

.firstview__title {
  text-align: center;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.05));
  position: absolute;
  top: calc(756 * (100vw / 750));
  left: 50%;
  transform: translateX(-50.4%);
  width: 100%;
}

.firstview__title .serif {
  font-size: calc(132.5* (100vw /750));
  letter-spacing: -0.018em;
}

.firstview__title .sanserif {
  font-size: calc(36* (100vw /750));
  margin-top: calc(20 * (100vw / 750));
  letter-spacing: 0.5em;
  padding-left: calc(20 * (100vw / 750));
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
  .sticky_area {
    margin-top: calc(-142* (100vw /1400));
  }
}

@media screen and (min-width: 768px) {
  .FR250425FlowerBotanical {
    display: flex;
    justify-content: center;
    gap: calc(140* (100vw /1400));
  }

  .firstviewArea {
    top: 50%;
    transform: translateY(-50%)
  }

  .sticky_area {
    width: calc(540* (100vw /1400));
    position: sticky;
    top: 0;
    height: 100vh;
  }

  .scroll_area {
    width: calc(440* (100vw /1400));
  }

  .firstviewArea__img {
    margin-bottom: calc(67* (100vw /1400));
  }

  .firstviewArea__lead {
    font-size: calc(13* (100vw /1400));
    margin-top: calc(-15* (100vw /1400));
    letter-spacing: 0.15em;
  }

  .firstview__title {
    top: calc(305* (100vw /1400));
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.04));
  }

  .firstview__title .serif {
    font-size: calc(76* (100vw /1400));
    color: #FCF4D2;
  }

  .firstview__title .sanserif {
    font-size: calc(19* (100vw /1400));
    margin-top: calc(11* (100vw /1400));
    padding-left: calc(16* (100vw /1400));
    color: #FCF4D2;
  }

}

/* ▽_____________ common ______________▽ */
.sec__content-item {
  position: relative;
}

.credit__wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(40*(100vw / 750));
  gap: calc(19*(100vw / 750)) calc(13*(100vw / 750));
}

.credit__wrap::after {
  content: "";
  width: 100%;
}

.credit__wrap li {
  font-size: calc(25* (100vw / 750));
  font-family: "argent-cf", serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
  color: #95B6CA;
}

@media screen and (min-width: 768px) {
  .credit__wrap {
    margin-top: calc(26* (100vw /1400));
    gap: calc(11* (100vw /1400)) calc(7* (100vw /1400));
  }

  .credit__wrap li {
    font-size: calc(14.67* (100vw /1400));
  }
}


/* △_____________ common ______________△ */




/* ===============================================
* sec *
=============================================== */
.sec__content-wrap {
  position: relative;
}

.sec__content-wrap::before,
.sec__content-wrap::after,
.sec__content-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* ===============================================
* sec1 *
=============================================== */
/* SP___________________________*/
.sec1 .sec__content-wrap::before {
  background: url(../img/ttl01.svg) center / contain no-repeat;
  width: calc(53 * (100vw / 750));
  height: calc(694 * (100vw / 750));
  top: calc(848 * (100vw / 750));
  right: calc(30 * (100vw / 750));
}

.sec1 .sec__content-item--1 {
  width: calc(585* (100vw /750));
  margin: calc(126 * (100vw / 750)) calc(30 * (100vw / 750)) 0 auto;
}

.sec1 .sec__content-item--2 {
  width: calc(510* (100vw /750));
  margin: calc(60 * (100vw / 750)) 0 0 0;
}

.bg__img {
  position: absolute;
}

.sec1 .sec__content-item--2 .bg__img {
  width: calc(600* (100vw /750));
  top: calc(355* (100vw /750));
  z-index: -1;
}

.sec1 .sec__content-item--3 {
  width: calc(660* (100vw /750));
  margin: calc(90*(100vw / 750)) 0 0 auto;
}

.sec1 .credit__wrap {
  justify-content: flex-end;
  margin-right: calc(40* (100vw /750));
  margin-left: auto;
  width: calc(520* (100vw /750));
}

@media screen and (min-width: 768px) {
  .sec1 .sec__content-wrap::before {
    width: calc(32* (100vw /1400));
    height: calc(395* (100vw /1400));
    top: calc(503* (100vw /1400));
    right: calc(18* (100vw /1400));
  }

  .sec1 .sec__content-item--1 {
    width: calc(343* (100vw /1400));
    margin: calc(46* (100vw /1400)) calc(18* (100vw /1400)) 0 auto;
  }

  .sec1 .sec__content-item--2 {
    width: calc(299* (100vw /1400));
    margin: calc(35* (100vw /1400)) 0 0 0;
  }

  .sec1 .sec__content-item--2 .bg__img {
    width: calc(351* (100vw /1400));
    top: calc(208* (100vw /1400));
  }

  .sec1 .sec__content-item--3 {
    width: calc(387* (100vw /1400));
    margin: calc(52* (100vw /1400)) 0 0 auto;
  }

  .sec1 .credit__wrap {
    margin-right: calc(23* (100vw /1400));
    width: calc(300* (100vw /1400));
  }
}

/* ===============================================
* sec2 *
=============================================== */
/* SP___________________________*/
.sec2 .sec__content-item--1 {
  width: calc(555 * (100vw / 750));
  margin: calc(185 * (100vw / 750)) auto 0;
}

.sec2 .sec__content-item--1::before {
  background: url(../img/bg02.jpg) center/contain no-repeat;
  width: calc(605* (100vw /750));
  height: calc(790* (100vw /750));
  top: calc(-27 * (100vw / 750));
  left: 50%;
  transform: translateX(-50%);
}

.sec2 .sec__content-item--2 {
  width: calc(750* (100vw /750));
  margin: calc(103 * (100vw / 750)) 0 0 0;
}

.sec2 .credit__wrap {
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .sec2 .sec__content-item--1 {
    width: calc(325* (100vw /1400));
    margin: calc(107* (100vw /1400)) auto 0;
  }

  .sec2 .sec__content-item--1::before {
    width: calc(355* (100vw /1400));
    height: calc(463* (100vw /1400));
    top: calc(-14* (100vw /1400));
  }

  .sec2 .sec__content-item--2 {
    width: calc(440* (100vw /1400));
    margin: calc(64* (100vw /1400)) 0 0 0;
  }

}


/* ===============================================
* sec3 *
=============================================== */
/* SP___________________________*/
.sec3 .sec__content-wrap::before {
  width: calc(750* (100vw /750));
  height: calc(2230* (100vw /750));
  background: #F2EDD7;
  top: calc(230 * (100vw / 750));
  left: 50%;
  transform: translateX(-50%);
}

.sec3 .sec__content-item--1 {
  width: calc(585* (100vw /750));
  margin: calc(157 * (100vw / 750)) calc(30 * (100vw / 750)) 0 auto;
}

.sec3 .sec__content-item--1 .text_anim {
  position: absolute;
  width: calc(750 * (100vw / 750));
  top: calc(710 * (100vw / 750));
  left: calc(-139 * (100vw / 750));
  text-align: center;
}

.sec3 .sec__content-item--1 .text_anim .serif {
  font-size: calc(153 * (100vw / 750));
  letter-spacing: -0.018em;
}

.sec3 .sec__content-item--1 .text_anim .sanserif {
  font-size: calc(42 * (100vw / 750));
  margin-top: calc(20 * (100vw / 750));
  letter-spacing: 0.5em;
  padding-left: calc(28* (100vw /750));
}

.sec3 .sec__content-item--2 {
  width: calc(540 * (100vw / 750));
  margin: calc(220 * (100vw / 750)) 0 0 0;
}

.sec3 .sec__content-item--3 {
  width: calc(675 * (100vw / 750));
  margin: calc(80 * (100vw / 750)) 0 0 auto;
}

.sec3 .credit__wrap {
  justify-content: flex-end;
  margin-right: calc(40 * (100vw / 750));
  margin-left: auto;
  width: calc(510 * (100vw / 750));
}

@media screen and (min-width: 768px) {
  .sec3 .sec__content-wrap::before {
    width: calc(440* (100vw /1400));
    height: calc(1310* (100vw /1400));
    top: calc(135* (100vw /1400));
  }

  .sec3 .sec__content-item--1 {
    width: calc(343* (100vw /1400));
    margin: calc(90* (100vw /1400)) calc(20* (100vw /1400)) 0 auto;
  }

  .sec3 .sec__content-item--1 .text_anim {
    width: calc(440* (100vw /1400));
    top: calc(415* (100vw /1400));
    left: calc(-79* (100vw /1400));
  }

  .sec3 .sec__content-item--1 .text_anim .serif {
    font-size: calc(89.76* (100vw /1400));
  }

  .sec3 .sec__content-item--1 .text_anim .sanserif {
    font-size: calc(24.64* (100vw /1400));
    margin-top: calc(13* (100vw /1400));
    padding-left: calc(19* (100vw /1400));
  }

  .sec3 .sec__content-item--2 {
    width: calc(316* (100vw /1400));
    margin: calc(128* (100vw /1400)) 0 0 0;
  }

  .sec3 .sec__content-item--3 {
    width: calc(396* (100vw /1400));
    margin: calc(47* (100vw /1400)) 0 0 auto;
  }

  .sec3 .credit__wrap {
    margin-right: calc(23.5* (100vw /1400));
    width: calc(300* (100vw /1400));
  }
}

/* ===============================================
* sec4 *
=============================================== */
/* SP___________________________*/
.sec4 .sec__content-item--1 {
  width: calc(750 * (100vw / 750));
  margin: calc(156 * (100vw / 750)) auto 0;
}

.sec4 .sec__content-item--2 {
  width: calc(555 * (100vw / 750));
  margin: calc(130 * (100vw / 750)) auto 0;
}

.sec4 .sec__content-item--2::before {
  background: url(../img/bg03.jpg) center / contain no-repeat;
  width: calc(645 * (100vw / 750));
  height: calc(830 * (100vw / 750));
  top: calc(-46 * (100vw / 750));
  left: 50%;
  transform: translateX(-50%);
}

.sec4 .credit__wrap {
  justify-content: flex-end;
  margin-right: calc(-45 * (100vw / 750));
  margin-left: auto;
  width: calc(390 * (100vw / 750));
  margin-top: calc(84 * (100vw / 750));
}

@media screen and (min-width: 768px) {
  .sec4 .sec__content-item--1 {
    width: calc(440* (100vw /1400));
    margin: calc(90* (100vw /1400)) auto 0;
  }

  .sec4 .sec__content-item--2 {
    width: calc(325* (100vw /1400));
    margin: calc(75* (100vw /1400)) auto 0;
  }

  .sec4 .sec__content-item--2::before {
    width: calc(378* (100vw /1400));
    height: calc(487* (100vw /1400));
    top: calc(-28* (100vw /1400));
  }

  .sec4 .credit__wrap {
    margin-right: calc(-26* (100vw /1400));
    width: calc(230* (100vw /1400));
    margin-top: calc(51* (100vw /1400));
  }
}

/* ===============================================
* sec5 *
=============================================== */
/* SP___________________________*/
.sec5 .sec__content-wrap::before {
  background: url(../img/ttl02.svg) center/contain no-repeat;
  width: calc(53 * (100vw / 750));
  height: calc(638 * (100vw / 750));
  top: calc(920 * (100vw / 750));
  left: calc(30 * (100vw / 750));
}

.sec5 .sec__content-item--1 {
  width: calc(630* (100vw /750));
  margin: calc(160 * (100vw / 750)) 0 0 0;
}

.sec5 .sec__content-item--1 .bg__img {
  width: calc(600* (100vw /750));
  top: calc(590* (100vw /750));
  right: calc(-120 * (100vw / 750));
  z-index: -1;
}

.sec5 .sec__content-item--2 {
  width: calc(480* (100vw /750));
  margin: calc(80 * (100vw / 750)) 0 0 auto;
}

.sec5 .sec__content-item--3 {
  width: calc(660* (100vw /750));
  margin: calc(80*(100vw / 750)) auto 0;
}

.sec5 .credit__wrap {
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .sec5 .sec__content-wrap::before {
    width: calc(32* (100vw /1400));
    height: calc(378* (100vw /1400));
    top: calc(539* (100vw /1400));
    left: calc(17* (100vw /1400));
  }

  .sec5 .sec__content-item--1 {
    width: calc(370* (100vw /1400));
    margin: calc(93* (100vw /1400)) 0 0 0;
  }

  .sec5 .sec__content-item--1 .bg__img {
    width: calc(352* (100vw /1400));
    top: calc(347* (100vw /1400));
    right: calc(-70* (100vw /1400));
  }

  .sec5 .sec__content-item--2 {
    width: calc(282* (100vw /1400));
    margin: calc(47* (100vw /1400)) 0 0 auto;
  }

  .sec5 .sec__content-item--3 {
    width: calc(387* (100vw /1400));
    margin: calc(47* (100vw /1400)) auto 0;
  }
}

/* ===============================================
* foot_content *
=============================================== */
.foot_content {
  margin: calc(137 * (100vw / 750)) 0 calc(150 * (100vw / 750));
}

.lp_btn {
  width: calc(450* (100vw /750));
  margin: auto;
}

.staff-credit {
  font-family: "argent-cf", serif;
  font-weight: 300;
  font-style: normal;
  font-size: calc(25* (100vw /750));
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: #95B6CA;
  text-align: center;
  margin-top: calc(150*(100vw / 750));
}

@media screen and (min-width: 768px) {
  .foot_content {
    margin: calc(78* (100vw /1400)) 0 calc(100* (100vw /1400));
  }

  .lp_btn {
    width: calc(264* (100vw /1400));
  }

  .staff-credit {
    font-size: calc(14.67* (100vw /1400));
    margin-top: calc(79* (100vw /1400));
  }
}

@media screen and (min-width: 768px){
  .FR250425FlowerBotanical{
    position: relative;
  }
  .FR250425FlowerBotanical::before{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    height: 1px;
    margin-inline: auto;
    background-color: #58595b;
    width: calc(1100 * var(--util));
    content: '';
  }
}