@charset "UTF-8";

html {
  font-size: 0.4857142857vw;
}

@media screen and (min-width: 1400px) {
  html {
    font-size: 6.8px;
  }
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
}

.l-footer {
  padding: 0;
}

.pc-footer {
  margin: 0;
}

#feature {
  box-sizing: border-box;
  color: #323232;
  overflow: clip;
  position: relative;
  font-family: "ryo-gothic-plusn", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-feature-settings: "palt";
  display: flex;
  width: 100%;
  background: #fceef4;
}


.pc-left {
  position: sticky;
  top: 80px;
  width: 100%;
  height: calc(100vh - 80px);
  order: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pc-left .pc-ttl {
  width: 23.428571vw;
  max-width: 330px;
}

.pc-right {
  position: sticky;
  top: 80px;
  width: 100%;
  height: calc(100vh - 80px);
  order: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pc-right .allitem {
  width: 15.5832142857vw;
  max-width: 223.165px;
}

#feature .feature__inner {
  width: 75rem;
  position: relative;
  order: 2;
    background: #fff;
  overflow: clip;
}

#feature a {
  color: #000;
  transition: all 0.3s ease-in-out;
  display: block;
  transform: none;
  text-decoration: none;
}

#feature a:hover {
  opacity: 0.7;
  transition: 0.3s;
}

#feature img,
svg,
video {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}

.l-container {
  width: 100%;
  overflow: clip;
}


/*-------------------------
 fade
-------------------------*/
.fadeIn {
  opacity: 0;
  transition: opacity 1s ease-in;
}

.fadeIn.active {
  opacity: 1;
}

.fadeUp {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}

.sale figure .fadeUp {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}


.fadeUp.active,
.sale figure .fadeUp.active {
  opacity: 1;
  transform: translateY(0);
}

.fadeIn_anim {
  opacity: 0;
}

.fadeIn_anim.active {
  opacity: 1;
}


/*-------------------------
 slider
-------------------------*/
#feature .swiper {
  position: relative;
}

#feature .swiper01 {
  width: 71rem;
  height: fit-content;
  margin: 8.5rem auto 0 0;
}

#feature .swiper02 {
  width: 63rem;
  height: fit-content;
  margin: 10.3rem auto 0;
}


#feature .swiper03 {
  width: 57rem;
  height: fit-content;
  margin: 12rem auto 0;
}

#feature .swiper04 {
  width: 60rem;
  height: fit-content;
  margin: -14.5rem auto 0 0;
}

#feature .swiper05 {
  width: 75rem;
  height: fit-content;
  margin: 12rem auto 0;
}

#feature .swiper06 {
  width: 75rem;
  height: fit-content;
  margin: 19rem auto 0;
}


/*-------------------------
 hero
-------------------------*/
#feature .movie-area {
  width: 100%;
  height: auto;
  position: relative;
}

#feature .movie-area .sound-btn {
  background: url(../img/sound_off.svg);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 2.8rem;
  right: 3rem;
  height: 3rem;
  width: 16.57rem;
  z-index: 10;
}

#feature .movie-area .sound-btn.on {
  background: url(../img/sound_on.svg);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 2.9rem;
  right: 5.1rem;
  height: 2.76rem;
  width: 14.5rem;
}

#feature .scrolling,
#feature .scrolling02 {
  display: flex;
  width: 100%;
  overflow: clip;
}

#feature .scrolling {
  padding-top: 7.8rem;
}

#feature .scrolling02 {
  padding-top: 2rem;
}

#feature .scrolling_bg {
  width: 200%;
  display: flex;
  column-gap: 0;
  animation: scroll 40s linear infinite;
}


#feature .scrolling_bg02 {
  width: 250%;
  display: flex;
  align-items: start;
  column-gap: 7rem;
  padding: 10rem 5rem 0 0;
  animation: scroll 20s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

#feature .scrolling_bg span {
  width: 36rem;
}

#feature .scrolling_bg02 span:nth-child(1) {
  width: 60rem;
}

#feature .scrolling_bg02 span:nth-child(2) {
  width: 48rem;
  margin-top: 24rem;
}

#feature .scrolling_bg02 span:nth-child(3) {
  width: 28rem;
  margin-top: 17rem;
}

#feature .lead {
  font-size: 2.6rem;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 11.5rem;
  color: #a7a6a6;
}

#feature .lead p:nth-child(n+2) {
  margin-top: 3.4rem;
}

/*-------------------------
 content
-------------------------*/
#feature .section__inner {
  width: 100%;
  position: relative;
}

#feature .block_area {
  position: relative;
}

#feature .sticky {
  position: sticky;
}

#feature .movie-area.sticky {
  top: 80px;
  padding-bottom: 0;
}

#feature .sec01.sticky {
  z-index: 0;
}

#feature .sec02.sticky {
  z-index: 1;
}

#feature .sec03.sticky {
  top: calc(-1950* 100vw / 1400)!important;
  z-index: 2;
}

#feature .sticky_bottom {
  position: sticky;
  top: -578rem;
}


#feature .sec05.sticky {
  top: 0;
  z-index: 1;
}

/** sec01 **/
#feature .sec01 {
  padding-bottom: 60rem;
  background: #fefaf4;
}

#feature .top_deco {
  margin-top: -10.8rem;
  width: 75rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}

#feature .ttl01 {
  width: 61rem;
  margin: auto;
  padding-top: 10.5rem;
}

#feature .marie01 {
  width: 31.15324rem;
  margin: -5.8rem auto 0;
  position: relative;
  z-index: 10;
}

#feature .sale {
  width: 60.00713rem;
  margin: 6.9rem auto 0;
}

#feature .ribbon01 {
  position: absolute;
  top: -5.5rem;
  right: 9.6rem;
  width: 12.13309rem;
  z-index: 20;
}

#feature .ribbon02 {
  position: absolute;
  top: 18.2rem;
  left: 4rem;
  width: 12.13309rem;
  z-index: 20;
}

#feature .ribbon03 {
  position: absolute;
  top: 50rem;
  right: 1.7rem;
  width: 11.23726rem;
  z-index: 20;
}

#feature .ribbon04 {
  position: absolute;
  top: 85.2rem;
  left: -1rem;
  width: 12.13309rem;
  z-index: 20;
}

#feature .img01 {
  width: 75rem;
  margin: 20.5rem auto 0;
}

#feature .ttl02 {
  width: 39.02158rem;
  margin: 10rem auto 0;
}

#feature .bg_area {
  position: relative;
}

#feature .sec01 .bg:before {
  position: absolute;
  content: "";
  width: 75rem;
  height: 100%;
  background-image: url(../img/bg01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  top: 44rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

#feature .img03 {
  width: 69rem;
  margin: 15rem auto 0;
}

/** sec02 **/
#feature .sec02 .section__inner {
  background: #e8f0f3;
  padding-top: 0.2rem;
  padding-bottom: 33rem;
}

#feature .img05 {
  width: 75rem;
  margin: -16rem auto 0;
}

#feature .ttl02 {
  width: 39.02158rem;
  margin: 8.6rem auto 0 17.8rem;
}

#feature .img03 {
  width: 69rem;
  margin: 24rem auto 0;
}

#feature .fadeIn_anim_area {
  position: relative;
  z-index: 10;
}

#feature .fadeIn_anim_area figure:nth-child(1) {
  width: 6.8rem;
  position: absolute;
  top: -10rem;
  right: 2.5rem;
}

#feature .fadeIn_anim_area figure:nth-child(2) {
  width: 7rem;
  position: absolute;
  top: 6rem;
  right: 9.5rem;
}

#feature .fadeIn_anim_area figure:nth-child(3) {
  width: 6.8rem;
  position: absolute;
  top: 29rem;
  left: 4.5rem;
}

#feature .fadeIn_anim_area figure:nth-child(4) {
  width: 6.8rem;
  position: absolute;
  top: 107.5rem;
  left: 9.3rem;
}

#feature .marie02 {
  width: 37.3rem;
  margin: 11.2rem auto 0;
}

#feature .ttl03 {
  width: 64.57715rem;
  margin: 8rem auto 0 7rem;
}

#feature .img07 {
  width: 69rem;
  margin: -18.3rem auto 0 0;
}

#feature .img08 {
  width: 58.4rem;
  margin: 6rem 0 0 16.5rem;
}

#feature .credit04 {
  width: 22.44531rem;
  margin: -15.2rem 0 0 14rem;
}


/** sec03 **/
#feature .sec03 {
  padding-bottom: 13.3rem;
  background: #fefaf4;
}

#feature .top_deco02 {
  margin-top: -6.5rem;
  width: 75rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}

#feature .ttl04 {
  width: 57.29668rem;
  margin: 0 auto;
  padding-top: 13.7rem;
}

#feature .img09 {
  width: 75rem;
  margin: 4.6rem auto 0;
}

#feature .ttl05 {
  width: 45.12536rem;
  margin: 11rem 0 0 3.5rem;
}

#feature .img10 {
  width: 61.5rem;
  margin: -21rem auto 0;
}

#feature .credit06 {
  width: 23.5334rem;
  margin: -26.8rem 0 0 48rem;
}

#feature .marie03 {
  width: 42.87788rem;
  margin: -1rem 0 0 -1.2rem;
}

#feature .bottom_deco {
  width: 75rem;
  position: absolute;
  bottom: -20rem;
  left: 0;
  z-index: 20;
}

/** sec04 **/
#feature .sec04.sticky_bottom {
  position: sticky;
  bottom: -650rem;
  padding-bottom: 32rem;
  background: #fff;
}


#feature .sec04 .bg:before {
  position: absolute;
  content: "";
  width: 75rem;
  height: 728.20077rem;
  background-image: url(../img/bg02.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}


#feature .img11 {
  width: 75rem;
  margin: 0 auto;
  position: relative;
}

#feature .img13 {
  width: 63.9rem;
  margin-top: 8rem;
  position: relative;
}

#feature .circle {
  width: 19.54285rem;
  position: absolute;
  top: -7rem;
  right: -0.8rem;
  animation: rotate-anime 40s linear infinite;
  z-index: 10;
}

@keyframes rotate-anime {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

#feature .marie04 {
  width: 61.4rem;
  margin: 14rem auto 0;
}

#feature .ttl06 {
  width: 44.78955rem;
  margin: 7rem auto 0;
}

#feature .img14 {
  width: 75rem;
  margin: 15.7rem auto 0;
}

#feature .img15 {
  width: 63rem;
  margin: 10rem auto 0;
}

#feature .img16 {
  width: 63rem;
  margin: 5rem auto 0;
}

#feature .ttl07 {
  width: 25.85703rem;
  margin: 14.3rem 0 0 34.5rem;
}

/** sec05 **/
#feature .sec05.sticky_bottom {
  position: sticky;
  top: -511rem;
  z-index: 10;
}

#feature .sec05 .section__inner {
  background: #e8ecf3;
  padding-top: 5rem;
}

#feature .top_deco03 {
  margin-top: -6.5rem;
  width: 75rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}

#feature .ttl08 {
  width: 62.65479rem;
  margin: 8.8rem auto 0;
}

#feature .img17 {
  width: 75rem;
  margin: 8.8rem auto 0;
}

#feature .img18 {
  width: 75rem;
  margin: 12rem auto 0;
}

#feature .img19 {
  width: 75rem;
  margin: 19rem auto 0;
}

#feature .ribbon05 {
  position: absolute;
  top: 9.5rem;
  right: 0;
  width: 12.13309rem;
  z-index: 20;
}

#feature .ribbon06 {
  position: absolute;
  top: 104.5rem;
  left: 4rem;
  width: 12.13309rem;
  z-index: 20;
}


#feature .img20 {
  width: 67rem;
  margin: 8.2rem 0 0 auto;
}

#feature .btn {
  width: 54.43748rem;
  margin: 20.5rem auto 0;
}

#feature .copy {
  width: 8.29199rem;
  margin: 7rem auto 0;
  padding-bottom: 10rem;
}

/*-------------------------
 credit
-------------------------*/
#feature .credit.credit01 {
  width: 44rem;
  margin: 5.5rem auto 0;
}

#feature .credit.credit02 {
  width: 44rem;
  margin: 3rem auto 0;
}

#feature .credit.credit03 {
  width: 49rem;
  margin: 5rem auto 0;
}

#feature .credit.credit05 {
  width: 49rem;
  margin: 5.5rem auto 0;
}

#feature .credit.credit07,
#feature .credit.credit08 {
  width: 49rem;
  margin: 5.3rem auto 0;
}

#feature .credit.credit09 {
  width: 49rem;
  margin: 5.3rem auto 0 2.7rem;
}

#feature .credit.credit10 {
  width: 38rem;
  margin: 5.3rem auto 0;
}

#feature .credit.credit11 {
  width: 46rem;
  margin: 5.3rem auto 0;
}

#feature .credit {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3.2rem;
  justify-content: center;
}

#feature .credit a {
  font-size: 2.4rem;
  letter-spacing: 0.06em;
  color: #a7a6a6;
  line-height: 1.6;
  font-family: "spalla", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
}

#feature .credit>.item {
  margin: 0;
  text-align: left;
  position: relative;
  z-index: 50;
}