@charset "UTF-8";

/*//////////////////////////////////////////////////

Chocomoo × ecostore｜エコストア日本上陸10周年記念

//////////////////////////////////////////////////*/

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


/* calc(xx * yyrem / zz);
xx：SPデザインの各値
yy：PCデザインのメインコンテンツの横幅
zz：SPデザインの横幅 */

html {
  font-size: calc(10 * (100vw/750));
}

@media (min-width: 751px) {
  html {
    font-size: calc(10 * (100vw/1920));
  }
}

@media (min-width: 1920px) {
  html {
    font-size: 62.5%
  }

}


/* ========================================================
                      * root *
========================================================= */
:root {
  --rate: calc(var(--pcMainContentWidth) / var(--spWidth));

  /* PCデザインのメインコンテンツの横幅 */
  --pcMainContentWidth: 75rem;

  /* PCデザインの横幅 */
  --pcWidth: 1920;

  /* SPデザインの横幅 */
  --spWidth: 750;

  --color-lp_bg: #70a590;
  --color-lp_txt_font: #000000;
  --color-lp_accent: #b0d4ca;
  --color-lp_white: #fff;
  --font-regular: "AlrightSans", "MFW-YuGoPr6N-Regular";
  --font-medium: "AlrightSans", "MFW-YuGoPr6N-Medium";
  --font-demi: "AlrightSans", "MFW-YuGoPr6N-Demi";
  --font-bold: "AlrightSans", "MFW-YuGoPr6N-Bold";
  --font-eng: "AlrightSans", sans-serif;
  --font-mix: "AlrightSans", "MFW-YuGoPr6N-Regular", sans-serif;
}

@media (min-width: 751px) {
  :root {}
}

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
  padding-top: var(--header-height);
}


/* ========================================================
                      * lp_contents *
========================================================= */

.lp_contents * {
  box-sizing: border-box;
  font-feature-settings: "palt";
  font-variant-numeric: lining-nums;
  line-height: 1;
  letter-spacing: .07em;
  font-weight: 600;
  text-align: center;
}

.lp_contents {
  width: 100%;
  /* max-width: var(--pcMainContentWidth); */
  height: 100%;
  font-family: var(--font-bold);
  overflow-x: clip;
  color: var(--color-lp_txt_font);
}

@media (min-width: 751px) {
  .lp_contents {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100%;
  }
}

.lp_contents .pc_only {
  display: none;
}

.lp_contents img,
.lp_contents figure {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.lp_contents a {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.lp_contents h1,
.lp_contents h2,
.lp_contents h3,
.lp_contents h4,
.lp_contents h5 {
  font-weight: 300;
}

.lp_contents_inner {
  position: relative;
  z-index: 1;
  overflow: clip;
  background: var(--color-lp_white);
}

.lp_contents a,
.lp_contents button,
.lp_contents .lp_contents .lp_contents .slick-dots li,
.lp_contents .btn_accordion {
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Android Chrome用 */
}

.lp_contents svg {
  overflow: visible;
}

/* ========================================================
                      * PC *
========================================================= */
@media (min-width: 751px) {

  .lp_contents .fixed_area {
    position: relative;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: var(--color-lp_bg);
  }

  .lp_contents .fixed_area .fixed_nav {
    display: grid;
    place-items: center;
    width: calc((100% - var(--pcMainContentWidth)) / 2);
    height: 100vh;
  }

  .fixed_left_inner {
    width: 100%;
  }

  .fixed_left_inner .logo {
    padding-top: 34rem;
  }

  .fixed_left_inner .logo a {
    width: 20.5rem;
  }

  .lp_contents_inner {
    width: var(--pcMainContentWidth);
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow: clip;
  }
}

.fixed_area .pc_fv_area {
  height: 83rem;
  display: flex;
  justify-content: center;
}

.fixed_area figure {}

.fixed_area .intro_deco_area {
  position: relative;
  width: 100%;
  height: 71.5rem;
  margin-top: 119.3rem;
}

.fixed_area .intro_deco_area figure {
  position: absolute;
}


/* ========================================================
            * fixed_nav fixed_left   *
========================================================= */

.fixed_area .fixed_left .intro_deco_area .deco_01 {
  width: 9.3rem;
  top: 41.8rem;
  left: 4.4rem;
}

.fixed_area .fixed_left .intro_deco_area .deco_02 {
  width: 10rem;
  top: 0;
  left: 21.9rem;
}

.fixed_area .fixed_left .intro_deco_area .deco_03 {
  width: 7.9rem;
  top: 42.5rem;
  left: 18.1rem;
}

.fixed_area .fixed_left .intro_deco_area .deco_04 {
  width: 26.2rem;
  top: 13.5rem;
  left: 25.9rem;

}

.fixed_area .fixed_left .intro_deco_area .deco_05 {
  width: 16.3rem;
  top: 11rem;
  left: 7.1rem;
}

.fixed_area .fixed_left .intro_deco_area .deco_06 {
  width: 26.2rem;
  top: 61.4rem;
  left: 23.5rem;
}

.fixed_area .fixed_left .intro_deco_area .deco_07 {
  width: 6.5rem;
  top: 30.1rem;
  left: 11.8rem;
}

.fixed_area .fixed_left .intro_deco_area .deco_08 {
  width: 13.2rem;
  top: 57rem;
  left: 11.5rem;
}

.fixed_area .fixed_left .deco_09 {
  width: 18.4rem;
  margin-top: 94.3rem;
  margin-left: -2.3rem;
  translate: -18rem 0;
}

.fixed_area .fixed_left .deco_10 {
  width: 100%;
  margin-top: 41.8rem;
  margin-inline: 0;
  overflow: hidden;
  position: relative;
  height: 22.8rem;
}

.fixed_area .fixed_left .deco_10 .loop-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.fixed_area .fixed_left .deco_10 .loop-track img {
  width: 22.8rem;
  position: absolute;
  top: 0;
  left: 100%;
  animation: deco10Loop 8s linear infinite,
    1s steps(1) .5s infinite normal both running step;
  will-change: left;
}

.fixed_area .fixed_left .deco_11 {
  width: 7.8rem;
  margin-top: -3.4rem;
  margin-inline: auto 10.2rem;
}

.fixed_area .fixed_left .deco_12 {
  width: 5.2rem;
  position: absolute;
  bottom: 68rem;
  animation: butterflyLoop 10s linear infinite, butterflyFlap 8s ease-in-out infinite;
  will-change: right;
}

@keyframes butterflyLoop {
  0% {
    right: 110%;
  }

  100% {
    right: -50%;
  }
}

@keyframes butterflyFlap {
  0% {
    transform: translateY(0);
  }

  15% {
    transform: translateY(-100px);
  }

  30% {
    transform: translateY(10px);
  }

  45% {
    transform: translateY(-120px);
  }

  60% {
    transform: translateY(-0px);
  }

  75% {
    transform: translateY(-160px);
  }

  100% {
    transform: translateY(0);
  }
}

/* ========================================================
            * fixed_nav fixed_right   *
========================================================= */

.fixed_area .fixed_right .nav_wrap {
  margin-top: 29rem;
}

.fixed_area .fixed_right .nav_wrap ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4.7rem;
}

.fixed_area .fixed_right .nav_wrap li {
  color: var(--color-lp_white);
  font-size: 2.7rem;
  font-family: var(--font-eng);
  font-weight: 500;
  display: flex;
  justify-content: flex-start;
}

.fixed_area .fixed_right .nav_wrap li span {
  font-size: 1.7rem;
  color: var(--color-lp_txt_font);
  font-family: var(--font-bold);
  display: inline-block;
  margin-left: 1rem;
}

.fixed_area .fixed_right .intro_deco_area .deco_12 {
  width: 9.4rem;
  top: 24.1rem;
  left: 5.6rem;
}

.fixed_area .fixed_right .intro_deco_area .deco_13 {
  width: 14.8rem;
  top: 5rem;
  left: 26.6rem;
}

.fixed_area .fixed_right .intro_deco_area .deco_14 {
  width: 24rem;
  top: 57.7rem;
  left: 12.8rem;
}

.fixed_area .fixed_right .intro_deco_area .deco_15 {
  width: 10.9rem;
  top: 42.9rem;
  left: 10.2rem;
}

.fixed_area .fixed_right .intro_deco_area .deco_16 {
  width: 8.8rem;
  top: 27rem;
  left: 21.7rem;
}

.fixed_area .fixed_right .intro_deco_area .deco_17 {
  width: 14rem;
  top: 0.4rem;
  left: 4.2rem;
}

.fixed_area .fixed_right .intro_deco_area .deco_18 {
  width: 9rem;
  top: 11.8rem;
  left: 14.6rem;
}

.fixed_area .fixed_right .intro_deco_area .deco_19 {
  width: 23.1rem;
  top: 23.9rem;
  left: 28rem;
}

.fixed_area .fixed_right .intro_deco_area .deco_20 {
  width: 8.2rem;
  top: 10.8rem;
  left: 44.3rem;
}

.fixed_area .fixed_right .deco_21 {
  width: 12.8rem;
  margin-top: 103.8rem;
  margin-left: auto;
  margin-right: 3rem;
  transform: translate(100%, 0) rotate(30deg);
}

.fixed_area .fixed_right .deco_22 {
  width: 10.2rem;
  margin-top: 120rem;
  margin-inline: auto 24.2rem;
  position: relative;
}

.fixed_area .fixed_right .deco_22::before {
  content: "";
  width: 18.5rem;
  height: 16.7rem;
  position: absolute;
  background: url(../img/pc_deco_img_022.png) no-repeat center / 100%;
  top: -22rem;
  left: -4rem;
  transform-origin: 50% calc(100% + 19rem);
  margin-left: 1rem;
  animation: deco22PendulumMirror 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.fixed_area .fixed_right .deco_24 {
  width: 23.1rem;
  position: absolute;
  bottom: 0;
  right: 18rem;
}

.kirakira_wrap {
  opacity: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28.6rem;
  height: 20rem;
}

.kirakira_wrap {
  opacity: 1;
}

.kirakira_wrap .deco_kirakira {
  position: absolute;
  right: 0;
  bottom: 0;
}

.kirakira_wrap .deco_kirakira {
  transition: opacity 0.5s ease;
}

.kirakira_wrap.is-hidden .deco_kirakira {
  opacity: 0 !important;
}

.kirakira_wrap .deco_kirakira img {
  opacity: 1;
  transform-origin: 50% 50%;
  animation: kirakiraBlink 2.6s ease-in-out infinite;
  will-change: opacity, transform;
}

.fixed_area .fixed_right .kirakira_01 {
  width: 3.8rem;
  right: 33.9rem;
  bottom: 17.8rem;
}

.fixed_area .fixed_right .kirakira_01 img {
  animation-delay: 0s;
}

.fixed_area .fixed_right .kirakira_02 {
  width: 3.2rem;
  right: 18.7rem;
  bottom: 15.8rem;
}

.fixed_area .fixed_right .kirakira_02 img {
  animation-delay: .35s;
}

.fixed_area .fixed_right .kirakira_03 {
  width: 1.3rem;
  right: 43.3rem;
  bottom: 9.4rem;
}

.fixed_area .fixed_right .kirakira_03 img {
  animation-delay: .8s;
}

.fixed_area .fixed_right .kirakira_04 {
  width: 1.7rem;
  right: 38.7rem;
  bottom: 5.4rem;
}

.fixed_area .fixed_right .kirakira_04 img {
  animation-delay: 1.1s;
}

.fixed_area .fixed_right .kirakira_05 {
  width: 1.9rem;
  right: 20rem;
  bottom: 6.2rem;
}

.fixed_area .fixed_right .kirakira_05 img {
  animation-delay: 1.55s;
}

.fixed_area .fixed_right .kirakira_06 {
  width: 2.1rem;
  right: 16.2rem;
  bottom: 18.8rem;
}

.fixed_area .fixed_right .kirakira_06 img {
  animation-delay: 1.9s;
}



/* ========================================================
                      * 共通設定  *
========================================================= */


.lp_contents section {
  position: relative;
}

.lp_contents .inner {
  height: 100%;
}

.lp_contents .fukidashi {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp_contents .fukidashi_txt span {
  display: block;
  text-align: justify;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ========================================================
                      * sec_mv  *
========================================================= */

.sec_mv {
  background: var(--color-lp_accent);
  height: calc(750 * (var(--rate)));
}

.sec_mv .inner {}

.sec_mv .mv_ttl {
  width: calc(486 * (var(--rate)));
  position: absolute;
  top: calc(214 * (var(--rate)));
  left: calc(128 * (var(--rate)));
}

.sec_mv .character_wrap {}

.sec_mv figure {
  position: absolute;
}

.sec_mv figure:nth-of-type(1) {
  width: calc(166 * (var(--rate)));
  top: calc(53 * (var(--rate)));
  left: calc(30 * (var(--rate)));
}

.sec_mv figure:nth-of-type(2) {
  width: calc(171 * (var(--rate)));
  bottom: calc(22 * (var(--rate)));
  left: calc(43 * (var(--rate)));
}

.sec_mv figure:nth-of-type(3) {
  width: calc(198 * (var(--rate)));
  top: calc(37 * (var(--rate)));
  right: calc(30 * (var(--rate)));
}

.sec_mv figure:nth-of-type(4) {
  width: calc(84 * (var(--rate)));
  top: calc(79 * (var(--rate)));
  left: calc(354 * (var(--rate)));
}

.sec_mv figure:nth-of-type(5) {
  width: calc(103 * (var(--rate)));
  top: calc(412 * (var(--rate)));
  right: calc(30 * (var(--rate)));
}

.sec_mv figure:nth-of-type(6) {
  width: calc(168 * (var(--rate)));
  bottom: calc(28 * (var(--rate)));
  right: calc(28 * (var(--rate)));
  transition-delay: .6s !important;
}

.sec_mv figure:nth-of-type(7) {
  width: calc(128 * (var(--rate)));
  bottom: calc(48 * (var(--rate)));
  right: calc(211 * (var(--rate)));
  transition-delay: .3s !important;
}

.sec_mv figure:nth-of-type(8) {
  width: calc(124 * (var(--rate)));
  bottom: calc(100 * (var(--rate)));
  right: calc(344 * (var(--rate)));
  transition-delay: 0s !important;
}

.sec_mv figure:nth-of-type(9) {
  width: calc(80 * (var(--rate)));
  top: calc(341 * (var(--rate)));
  left: calc(33 * (var(--rate)));
}


.sec_mv figure:nth-of-type(10) {
  width: calc(56 * (var(--rate)));
  top: calc(34 * (var(--rate)));
  right: calc(228 * (var(--rate)));
}

.sec_mv figure:nth-of-type(11) {
  width: calc(36 * (var(--rate)));
  bottom: calc(299 * (var(--rate)));
  right: calc(167 * (var(--rate)));
}

.sec_mv figure:nth-of-type(12) {
  width: calc(74.67 * (var(--rate)));
  bottom: calc(28 * (var(--rate)));
  left: calc(264 * (var(--rate)));
}

.sec_mv figure:nth-of-type(13) {
  width: calc(59.33 * (var(--rate)));
  top: calc(455 * (var(--rate)));
  left: calc(70 * (var(--rate)));
}

.sec_mv figure:nth-of-type(14) {
  width: calc(48.67 * (var(--rate)));
  top: calc(34 * (var(--rate)));
  left: calc(211 * (var(--rate)));
}

.sec_mv figure:nth-of-type(15) {
  width: calc(43.33 * (var(--rate)));
  top: calc(215 * (var(--rate)));
  left: calc(53 * (var(--rate)));
}

.sec_mv figure:nth-of-type(16) {
  width: calc(36.67 * (var(--rate)));
  top: calc(193 * (var(--rate)));
  right: calc(239 * (var(--rate)));
}

.sec_mv figure:nth-of-type(17) {
  width: calc(49.33 * (var(--rate)));
  top: calc(547 * (var(--rate)));
  left: calc(153 * (var(--rate)));
}

.sec_mv figure:nth-of-type(18) {
  width: calc(48.67 * (var(--rate)));
  top: calc(241 * (var(--rate)));
  right: calc(34 * (var(--rate)));
}

.sec_mv figure:nth-of-type(19) {
  width: calc(69.33 * (var(--rate)));
  top: calc(89 * (var(--rate)));
  left: calc(249 * (var(--rate)));
}

.sec_mv figure:nth-of-type(20),
.sec_mv figure:nth-of-type(21),
.sec_mv figure:nth-of-type(22) {
  width: calc(31 * (var(--rate)));
}

.sec_mv figure:nth-of-type(20) {
  top: calc(401 * (var(--rate)));
  left: calc(171 * (var(--rate)));
}

.sec_mv figure:nth-of-type(21) {
  top: calc(323 * (var(--rate)));
  right: calc(41 * (var(--rate)));
}

.sec_mv figure:nth-of-type(22) {
  bottom: calc(156 * (var(--rate)));
  right: calc(141 * (var(--rate)));
}




/* ========================================================
                      * sec_intro  *
========================================================= */

.sec_intro {
  padding-top: calc(103 * (var(--rate)));
}

.sec_intro .inner {}

.sec_intro .ttl {
  width: calc(463 * (var(--rate)));
  margin: 0 auto;
}

.sec_intro .intro_txt {
  font-size: calc(25 * (var(--rate)));
  line-height: calc(60/25);
  margin-top: calc(57 * (var(--rate)));
}

.sec_intro figure {
  position: absolute;
}

.sec_intro figure:nth-of-type(1) {
  width: calc(74 * (var(--rate)));
  top: calc(64 * (var(--rate)));
  left: calc(30 * (var(--rate)));
}

.sec_intro figure:nth-of-type(2) {
  width: calc(49 * (var(--rate)));
  top: calc(90 * (var(--rate)));
  right: calc(57 * (var(--rate)));
}

.sec_intro figure:nth-of-type(3) {
  width: calc(62 * (var(--rate)));
  top: calc(404 * (var(--rate)));
  left: calc(73 * (var(--rate)));
}

.sec_intro figure:nth-of-type(4) {
  width: calc(134 * (var(--rate)));
  top: calc(316 * (var(--rate)));
  right: calc(44 * (var(--rate)));
}

.sec_intro figure:nth-of-type(5) {
  width: calc(155 * (var(--rate)));
  top: calc(644 * (var(--rate)));
  left: calc(24 * (var(--rate)));
}

.sec_intro figure:nth-of-type(6) {
  width: calc(50 * (var(--rate)));
  top: calc(588 * (var(--rate)));
  right: calc(62 * (var(--rate)));
}

.sec_intro figure:nth-of-type(7) {
  width: calc(64 * (var(--rate)));
  top: calc(781 * (var(--rate)));
  right: calc(72 * (var(--rate)));
}

.sec_intro figure:nth-of-type(8) {
  width: calc(34 * (var(--rate)));
  top: calc(848 * (var(--rate)));
  right: calc(456 * (var(--rate)));
}

.sec_intro figure:nth-of-type(9) {
  width: calc(38 * (var(--rate)));
  top: calc(857 * (var(--rate)));
  right: calc(251 * (var(--rate)));
}

/* ========================================================
                      * sec_collabo  *
========================================================= */

.sec_collabo {
  padding-top: calc(217 * (var(--rate)));
}

.sec_collabo .inner {}

.sec_collabo .ttl {
  font-size: calc(46 * (var(--rate)));
  letter-spacing: .07em;
  line-height: calc(68/46);
  font-weight: 700;
}

.sec_collabo .collabo_lead {
  font-size: calc(25 * (var(--rate)));
  letter-spacing: .12em;
  line-height: calc(42/25);
  margin-top: calc(25 * (var(--rate)));
  padding-left: calc(5 * (var(--rate)));
}

.sec_collabo .item_wrap {
  margin-top: calc(75 * (var(--rate)));
}

.sec_collabo .item_wrap ul {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(30 * (var(--rate)));
}

.sec_collabo .item_wrap li {
  position: relative;
  cursor: pointer;
  opacity: 1;
}

.sec_collabo .item_wrap .item_01.is-mask {
  opacity: .2;
}

.sec_collabo .item_wrap .item_02.is-mask {
  opacity: .4;
}

.sec_collabo .item_wrap li .character {
  position: absolute;
}

.sec_collabo .item_wrap li .character_01 {
  width: calc(122 * (var(--rate)));
  z-index: -1;
  top: calc(58 * (var(--rate)));
  left: calc(-49 * (var(--rate)));
}

.sec_collabo .item_wrap li .character_02 {
  width: calc(133 * (var(--rate)));
  top: calc(434 * (var(--rate)));
  right: calc(-37 * (var(--rate)));
  z-index: 3;
}

.sec_collabo .item_wrap li .item_img {
  width: calc(267 * (var(--rate)));
  position: relative;
  transition: transform .3s ease;

  -webkit-tap-highlight-color: transparent;
  /* iOS Safari用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Android Chrome用 */
}


.sec_collabo .item_wrap ul:not(.is-mask) .item_img:hover {
  transform: scale(1.1, 1.1);
}

@media (max-width: 750px) {

  .sec_collabo .item_wrap ul:not(.is-mask) .item_img {
    animation: gunyagunya 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
}


.sec_collabo .item_wrap li.is-active .item_img {
  z-index: 2;
  transition: transform .3s 0s cubic-bezier(.45, .01, .33, 1);
}

.sec_collabo .item_wrap li.is-active .item_img:hover {}

.sec_collabo .item_wrap li .item_img_01 {}

.sec_collabo .item_wrap li .item_img_02 {}


.sec_collabo .item_wrap li .fukidashi {
  top: 0;
  width: calc(451 * (var(--rate)));
  height: calc(332 * (var(--rate)));
  background: url(../img/item_01_fukidashi.png) no-repeat center / 100%;
  opacity: 0;
  z-index: -1;
}

.sec_collabo .item_wrap li.is-active .fukidashi {
  opacity: 1;
  z-index: 1;
}

.sec_collabo .item_wrap li .item_fukidashi_01 {
  top: calc(-8 * (var(--rate)));
  left: calc(151 * (var(--rate)));
}

.sec_collabo .item_wrap li .item_fukidashi_02 {
  width: calc(399 * (var(--rate)));
  height: calc(326 * (var(--rate)));
  background: url(../img/item_02_fukidashi.png) no-repeat center / 100%;
  top: calc(-8 * (var(--rate)));
  left: calc(-317 * (var(--rate)));
}


.sec_collabo .item_wrap li .fukidashi_txt {
  font-size: calc(19 * (var(--rate)));
  margin-top: calc(-26 * (var(--rate)));
  margin-left: calc(23 * (var(--rate)));
}

.sec_collabo .item_wrap li .fukidashi_txt_02 {
  margin-top: calc(22 * (var(--rate)));
  margin-left: calc(26 * (var(--rate)));
}

.sec_collabo .item_wrap li .fukidashi_txt span {
  line-height: calc(39.5/19);
}

.sec_collabo .item_wrap li .fukidashi_txt_01 span:nth-of-type(1) {
  margin-left: calc(12 * (var(--rate)));
}

.sec_collabo .item_wrap li .fukidashi_txt_01 span:nth-of-type(2) {
  margin-left: calc(23 * (var(--rate)));
}

.sec_collabo .item_wrap li .fukidashi_txt_01 span:nth-of-type(3) {
  margin-left: calc(54 * (var(--rate)));
}

.sec_collabo .item_wrap li .fukidashi_txt_01 span:nth-of-type(4) {
  margin-left: calc(44 * (var(--rate)));
}

.sec_collabo .item_wrap li .item_name {
  font-size: calc(25 * (var(--rate)));
  letter-spacing: .05em;
  line-height: calc(40/25);
  color: var(--color-lp_txt_font);
}

.sec_collabo .item_wrap li.is-mask .item_name {
  color: #d9d9d9;
}

.sec_collabo .item_wrap li .item_name_01 {
  margin-top: calc(10 * (var(--rate)));
}

.sec_collabo .item_wrap li .item_name_02 {
  margin-top: calc(30 * (var(--rate)));
}


.sec_collabo .item_wrap li .decoration {
  position: absolute;
}

.sec_collabo .item_wrap li.item_01 .decoration_01 {
  width: calc(47 * (var(--rate)));
  bottom: calc(30 * (var(--rate)));
  right: calc(140 * (var(--rate)));
}

.sec_collabo .item_wrap li.item_01 .decoration_02 {
  width: calc(35 * (var(--rate)));
  top: calc(2 * (var(--rate)));
  right: calc(69 * (var(--rate)));
}

.sec_collabo .item_wrap li.item_01 .decoration_03 {
  width: calc(18 * (var(--rate)));
  bottom: calc(-54 * (var(--rate)));
  left: calc(110 * (var(--rate)));
}

.sec_collabo .item_wrap li.item_01 .decoration_04 {
  width: calc(24 * (var(--rate)));
  top: calc(25 * (var(--rate)));
  right: calc(179 * (var(--rate)));
}

.sec_collabo .item_wrap li.item_01 .decoration_05 {
  width: calc(27 * (var(--rate)));
  bottom: calc(27 * (var(--rate)));
  right: calc(25 * (var(--rate)));
}

.sec_collabo .item_wrap li.item_02 .decoration_01 {
  width: calc(33 * (var(--rate)));
  top: calc(2 * (var(--rate)));
  right: calc(32 * (var(--rate)));
}

.sec_collabo .item_wrap li.item_02 .decoration_02 {
  width: calc(38 * (var(--rate)));
  bottom: calc(-50 * (var(--rate)));
  right: calc(80 * (var(--rate)));
}

.sec_collabo .item_wrap li.item_02 .decoration_03 {
  width: calc(58 * (var(--rate)));
  bottom: calc(-186 * (var(--rate)));
  right: calc(67 * (var(--rate)));
}

.sec_collabo .item_wrap li.item_02 .decoration_04 {
  width: calc(114 * (var(--rate)));
  top: calc(197 * (var(--rate)));
  left: calc(-33 * (var(--rate)));
}

.sec_collabo .item_wrap li.item_02 .decoration_05 {
  width: calc(115 * (var(--rate)));
  top: calc(1 * (var(--rate)));
  left: calc(-5 * (var(--rate)));
}

.sec_collabo .illustration_wrap {
  position: relative;
  margin-top: calc(315 * (var(--rate)));
}

.sec_collabo .illustration_wrap .round_ttl {
  width: calc(235 * (var(--rate)));
  position: absolute;
  top: calc(205 * (var(--rate)));
  right: calc(137 * (var(--rate)));
}

.sec_collabo .illustration_wrap .round_ttl path {}

.sec_collabo .illustration_wrap .illustration_fukidashi {
  width: calc(432 * (var(--rate)));
  height: calc(374 * (var(--rate)));
  background: url(../img/illustration_fukidashi.png) no-repeat center / 100%;
  top: calc(-204 * (var(--rate)));
  right: calc(53 * (var(--rate)));
}

.sec_collabo .illustration_wrap .illustration_fukidashi .fukidashi_txt {
  font-size: calc(18 * (var(--rate)));
  margin-top: calc(-31 * (var(--rate)));
}

.sec_collabo .illustration_wrap .illustration_fukidashi .fukidashi_txt span {
  line-height: calc(33/18);
}

.sec_collabo .illustration_wrap .illustration_fukidashi .fukidashi_txt span:nth-of-type(1) {
  margin-left: calc(71 * (var(--rate)));
}

.sec_collabo .illustration_wrap .illustration_fukidashi .fukidashi_txt span:nth-of-type(2) {
  margin-left: calc(33 * (var(--rate)));
}

.sec_collabo .illustration_wrap .illustration_fukidashi .fukidashi_txt span:nth-of-type(3) {
  margin-left: calc(15 * (var(--rate)));
}

.sec_collabo .illustration_wrap .illustration_fukidashi .fukidashi_txt span:nth-of-type(4) {
  margin-left: calc(34 * (var(--rate)));
}

.sec_collabo .illustration_wrap .illustration_fukidashi .fukidashi_txt span:nth-of-type(5) {
  margin-left: calc(15 * (var(--rate)));
}

.sec_collabo .illustration_wrap .illustration_fukidashi .fukidashi_txt span:nth-of-type(6) {
  margin-left: calc(0 * (var(--rate)));
}

.sec_collabo .illustration_wrap .illustration_fukidashi .fukidashi_txt span:nth-of-type(7) {
  margin-left: calc(15 * (var(--rate)));
}

.sec_collabo .illustration_wrap .illustration_fukidashi .fukidashi_txt span:nth-of-type(8) {
  margin-left: calc(34 * (var(--rate)));
}

.sec_collabo .illustration_wrap .illustration_img {
  width: calc(255 * (var(--rate)));
  height: calc(321 * (var(--rate)));
  margin-inline: calc(87 * (var(--rate))) auto;
  z-index: 1;
  position: relative;
}

.sec_collabo .bnr_wrap {
  width: calc(660 * (var(--rate)));
  overflow: hidden;
  margin: calc(74 * (var(--rate))) auto 0;
  position: relative;
}

.sec_collabo .bnr_wrap.close::before {
  content: "ご好評につき\A終了いたしました";
  white-space: pre;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: rgba(110, 110, 110, .85);
  color: var(--color-lp_white);
  font-size: calc(36 * (var(--rate)));
  letter-spacing: .1em;
  line-height: calc(53/36);
  display: grid;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: calc(16 * (var(--rate)));
}

.sec_collabo .note {
  font-size: calc(18 * (var(--rate)));
  margin-top: calc(30 * (var(--rate)));
}

.sec_collabo .refill_wrap {
  background: #e2eae6;
  position: relative;
  margin-top: calc(76 * (var(--rate)));
}

.sec_collabo .refill_wrap .inner {
  padding: calc(39 * (var(--rate))) calc(113 * (var(--rate))) calc(42 * (var(--rate)));
}

.sec_collabo .refill_ttl {
  font-size: calc(42 * (var(--rate)));
  letter-spacing: .07em;
  line-height: calc(56/42);
  white-space: nowrap;
  margin-top: calc(24 * (var(--rate)));
  margin-left: calc(-7 * (var(--rate)));
  font-weight: 700;
}

.sec_collabo .refill_tag {
  background: var(--color-lp_bg);
  width: calc(145 * (var(--rate)));
  height: calc(48 * (var(--rate)));
  clip-path: polygon(0% 0%, 81% 0%, 100% 50%, 81% 100%, 0% 100%);
  display: grid;
  place-items: center;
}

.sec_collabo .refill_tag span {
  font-size: calc(26 * (var(--rate)));
  letter-spacing: .07em;
  font-family: var(--font-eng);
  font-weight: 700;
  color: var(--color-lp_white);
  margin-left: calc(-20 * (var(--rate)));
  margin-top: calc(9 * (var(--rate)));
}


.sec_collabo .refill_img {
  width: calc(427 * (var(--rate)));
  margin-top: calc(36 * (var(--rate)));
  margin-inline: calc(96 * (var(--rate))) auto;
}

.sec_collabo .refill_fukidashi {
  width: calc(314 * (var(--rate)));
  height: calc(208 * (var(--rate)));
  background: url(../img/refill_fukidashi.png) no-repeat center / 100%;
  top: calc(177 * (var(--rate)));
  left: calc(66 * (var(--rate)));
  transition-delay: .5s;
}

.sec_collabo .refill_fukidashi .fukidashi_txt {
  font-size: calc(19 * (var(--rate)));
  margin-top: calc(-5 * (var(--rate)));
  margin-left: calc(5 * (var(--rate)));
}

.sec_collabo .refill_fukidashi .fukidashi_txt span {
  line-height: calc(32/19);
  letter-spacing: .01em;
}

.sec_collabo .refill_fukidashi .fukidashi_txt span:nth-of-type(1) {
  margin-left: calc(10 * (var(--rate)));
}

.sec_collabo .refill_fukidashi .fukidashi_txt span:nth-of-type(3) {
  margin-left: calc(5 * (var(--rate)));
}

.sec_collabo .refill_fukidashi .fukidashi_txt span:nth-of-type(4) {
  margin-left: calc(15 * (var(--rate)));
}

.sec_collabo .btn_all {
  background: var(--color-lp_bg);
  border-radius: calc(32.37 * (var(--rate)));
  margin: calc(39 * (var(--rate))) auto 0;
  width: calc(532 * (var(--rate)));
}

.sec_collabo .btn_all a {
  font-size: calc(25.5 * (var(--rate)));
  letter-spacing: .2em;
  color: var(--color-lp_white);
  padding: calc(21 * (var(--rate))) calc(39 * (var(--rate))) calc(18 * (var(--rate))) 0;
  white-space: nowrap;
  position: relative;
}

.sec_collabo .btn_all a::before {
  content: "";
  background: url(../img/arrow.svg) no-repeat center / 100%;
  width: calc(12 * (var(--rate)));
  height: calc(20.5 * (var(--rate)));
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(60 * (var(--rate)));
}

.sec_collabo.comison {
  padding-top: calc(58 * (var(--rate)));
}

.sec_collabo.comison .inner {}

.sec_collabo.comison .comison_wrap {
  position: relative;
  margin-top: calc(179 * (var(--rate)));
}

.sec_collabo.comison .comison_wrap::before {
  content: "";
  background: url(../img/comison_bg.svg) no-repeat center /100%;
  width: calc(522 * (var(--rate)));
  height: calc(341 * (var(--rate)));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  margin-top: calc(13 * (var(--rate)));
}

.sec_collabo.comison .comison_wrap span {
  display: block;
  color: var(--color-lp_white);
}

.sec_collabo.comison .comison_wrap span:nth-of-type(1) {
  font-size: calc(46 * (var(--rate)));
  letter-spacing: .07em;
}

.sec_collabo.comison .comison_wrap span:nth-of-type(2) {
  font-size: calc(37 * (var(--rate)));
  letter-spacing: .06em;
  margin-top: calc(20 * (var(--rate)));
}

.sec_collabo.comison .character_wrap {
  position: relative;
  width: calc(750 * (var(--rate)));
  height: calc(153 * (var(--rate)));
}

.sec_collabo.comison .character_wrap.bottom {
  height: calc(181 * (var(--rate)));
}

.sec_collabo.comison figure {}

.sec_collabo.comison .top,
.sec_collabo.comison .bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(32 * (var(--rate)));
}

.sec_collabo.comison .bottom {
  position: relative;
  margin-top: calc(224 * (var(--rate)));
}

.sec_collabo.comison .bottom.js-loop {
  display: block;
}

.sec_collabo.comison .bottom.js-loop .loop-tracks {
  display: flex;
  width: max-content;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.sec_collabo.comison .bottom.js-loop .loop-track {
  display: flex;
  align-items: center;
  gap: calc(32 * (var(--rate)));
  width: max-content;
  animation: characterLoop 24s infinite linear;
  padding-left: calc(20 * (var(--rate)));
}

.sec_collabo.comison .bottom.js-loop .loop-track .js-step_02 img {}

.sec_collabo.comison .bottom::before {
  content: "";
  background: url(../img/loop_character_bg.png) repeat-x calc(139 * (var(--rate))) center / 100%;
  width: calc(980 * (var(--rate)));
  height: calc(61 * (var(--rate)));
  position: absolute;
  z-index: -1;
  top: calc(-8 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  animation: loop 80s infinite linear;
}

.sec_collabo.comison .top figure {}

.sec_collabo.comison .top figure:nth-of-type(1) {
  width: calc(97 * (var(--rate)));
}

.sec_collabo.comison .top figure:nth-of-type(2) {
  width: calc(86 * (var(--rate)));
  margin-top: calc(48 * (var(--rate)));
}

.sec_collabo.comison .top figure:nth-of-type(3) {
  width: calc(156 * (var(--rate)));
  margin-top: calc(-6 * (var(--rate)));
}

.sec_collabo.comison .top figure:nth-of-type(4) {
  width: calc(93 * (var(--rate)));
  margin-top: calc(48 * (var(--rate)));
}

.sec_collabo.comison .top figure:nth-of-type(5) {
  width: calc(101 * (var(--rate)));
}

.sec_collabo.comison .bottom .loop_character_001 {
  width: calc(175 * (var(--rate)));
  margin-left: calc(46 * (var(--rate)));
}

.sec_collabo.comison .bottom .loop_character_003 {
  width: calc(172 * (var(--rate)));
  margin-left: calc(46 * (var(--rate)));
}

.sec_collabo.comison .bottom .loop_character_005 {
  margin-left: calc(52 * (var(--rate)));
  width: calc(172 * (var(--rate)));
}

.loop-tracks02 {
  position: absolute;
  inset: 0;
}

.sec_collabo.comison .bottom.js-loop .loop-track02 {
  animation: characterLoop02 24s infinite linear;
}

.sec_collabo.comison .bottom .loop_character_002 {
  width: calc(59 * (var(--rate)));
  margin-left: calc(235 * (var(--rate)));
  margin-top: calc(91 * (var(--rate)));
}

.sec_collabo.comison .bottom .loop_character_004 {
  width: calc(77 * (var(--rate)));
  margin-left: calc(145 * (var(--rate)));
  margin-top: calc(110 * (var(--rate)));
}


/* ========================================================
                      * sec_designer  *
========================================================= */

.sec_designer {
  padding-top: calc(56 * (var(--rate)));
  padding-bottom: calc(124 * (var(--rate)));
}

.sec_designer .inner {
  padding-inline: calc(108 * (var(--rate)));
}

.sec_designer .designer_img {
  width: calc(346 * (var(--rate)));
  margin-inline: calc(107 * (var(--rate))) auto;
}

.sec_designer .designer_name {
  font-size: calc(30 * (var(--rate)));
  letter-spacing: .07em;
  margin-top: calc(44 * (var(--rate)));
  font-weight: 700;
}

.sec_designer .designer_name span {
  font-size: calc(17 * (var(--rate)));
}

.sec_designer .designer_txt {
  font-size: calc(19 * (var(--rate)));
  line-height: calc(39.5/19);
  letter-spacing: .04em;
  text-align: justify;
  margin-top: calc(32 * (var(--rate)));
}

.sec_designer a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(6 * (var(--rate)));
  font-size: calc(19 * (var(--rate)));
  letter-spacing: .04em;
  margin-top: calc(3 * (var(--rate)));
}

.sec_designer a figure {
  width: calc(31 * (var(--rate)));
}


/* ========================================================
                      * アニメーション  *
========================================================= */

.js-bound {
  opacity: 0;
  scale: .6;
  transform-origin: center;
  transition: opacity .45s ease, scale .45s cubic-bezier(0.49, 0.25, 0.3, 1.31);
}

.js-bound.is-show {
  opacity: 1;
  scale: 1;
}

.js-bound02 {
  transform: scale(0);
  transform-origin: 50% 100%;
  transition: transform 0.5s cubic-bezier(0.17, 0.88, 0.30, 1.28);
}

.js-bound02.is-show {
  transform: scale(1);
}

.js-bound03 {
  opacity: 0;
  transform-origin: center;
}

.js-bound03.is-show {
  animation: logoBound03 .8s cubic-bezier(0.22, 0.82, 0.28, 1.06) forwards;
}

@keyframes logoBound03 {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  48% {
    opacity: 1;
    transform: scale(1.2);
  }

  72% {
    transform: scale(0.8);
  }

  86% {
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes logoBound0 {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  40% {
    opacity: 1;
    transform: scale(1.2);
  }

  65% {
    transform: scale(0.8);
  }

  86% {
    transform: scale(1.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.js-floatUp.is-show img {
  animation: floatUp 1.2s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}

@keyframes floatUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

.js-floatUp_02 img {
  animation: floatUp 1.2s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}

.js-step.is-show {
  animation: none;
}

.js-step.is-show img {
  animation: 1s steps(1) .5s infinite normal both running step;
}

.js-step_02 img {
  animation: 1s steps(1) .5s infinite normal both running step;
}

.is-gunyagunya.is-show {
  transform-origin: 50% 50%;
  animation: gunyagunya 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}


@keyframes step {
  0% {
    transform: rotate(-1deg)
  }

  50% {
    transform: rotate(1deg)
  }

  100% {
    transform: rotate(-1deg)
  }
}

@keyframes gunyagunya {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(.9);
  }

  100% {
    transform: scale(1);
  }
}

.js-jump img {
  animation: jump 1s .1s steps(1) infinite both
}

@keyframes jump {
  0% {
    transform: translateY(-3px)
  }

  50% {
    transform: translateY(3px)
  }

  100% {
    transform: translateY(-3px)
  }
}

.sec_collabo .item_wrap .item_01:not(.is-mask) .character.js-tokotoko {
  animation: tokotoko 2s steps(1) infinite;
}

.is-active .decoration.js-tokotoko {
  animation: tokotoko 2s steps(1) infinite;
}

@keyframes tokotoko {
  0% {
    transform: translateX(0) rotate(0deg);
  }

  50% {
    transform: translateX(0) rotate(-3deg);
  }

  100% {
    transform: translateX(0) rotate(0deg);
  }
}

.is-active .js-tokotoko_02 {
  animation: tokotoko02 2s steps(1) infinite;
}

@keyframes tokotoko02 {
  0% {
    transform: translateX(0) rotate(0deg);
  }

  50% {
    transform: translateX(0) rotate(-12deg);
  }

  100% {
    transform: translateX(0) rotate(0deg);
  }
}

.sec_collabo .item_wrap .item_02:not(.is-mask) .character.js-yurayura {
  animation: yurayura 3s linear infinite;
}

.is-active .decoration.js-yurayura {
  animation: yurayura 3s linear infinite;
}

@keyframes yurayura {
  0% {
    transform: translate3d(0px, 0px, 0px) rotate(0deg);
  }

  50% {
    transform: translate3d(-10px, -5px, 0px) rotate(7deg);
  }

  100% {
    transform: translate3d(0px, 0px, 0px) rotate(0deg);
  }
}


.js-loop {
  animation: loop 80s infinite linear;
}

@keyframes loop {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 2000px 0;
  }
}

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

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

@keyframes characterLoop02 {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0%);
  }
}

@keyframes deco10Loop {
  0% {
    left: 100%;
  }

  100% {
    left: -22.8rem;
  }
}

@keyframes deco22PendulumMirror {

  /* 往路: 通常向き */
  0% {
    transform: rotate(-40deg) scaleX(-1);
  }

  49.9% {
    transform: rotate(40deg) scaleX(-1);
  }

  /* 折り返し点で瞬間反転 */
  50% {
    transform: rotate(40deg) scaleX(1);
  }

  /* 復路: 反転向き */
  100% {
    transform: rotate(-40deg) scaleX(1);
  }
}

@keyframes kirakiraBlink {
  0% {
    opacity: .25;
    transform: scale(.82);
  }

  18% {
    opacity: 1;
    transform: scale(1);
  }

  36% {
    opacity: .35;
    transform: scale(.86);
  }

  54% {
    opacity: .95;
    transform: scale(1);
  }

  100% {
    opacity: .25;
    transform: scale(.82);
  }
}

.js-hide {
  animation: hide 7s ease infinite;
}

@keyframes hide {
  0% {
    translate: -18rem 0
  }

  5% {
    translate: 0 0
  }

  15% {
    translate: 0 0
  }

  20% {
    translate: -18rem 0
  }

  to {
    translate: -18rem 0
  }
}

.js-hide_02 {
  overflow: hidden;
}

.js-hide_02 img {
  translate: 0 18rem;
  animation: hide02 7s 1s ease infinite;
}

@keyframes hide02 {
  0% {
    translate: 0 18rem
  }

  5% {
    translate: 0 0
  }

  15% {
    translate: 0 0
  }

  60% {
    translate: 0 0
  }

  65% {
    translate: 0 18rem
  }

  100% {
    translate: 0 18rem
  }
}

.js-pyon.is-show {
  /* animation: pyon .4s 1s forwards; */
  animation: pyon 10s 1s infinite;
  transform-origin: bottom center;
  transform: translate(100%, 0) rotate(15deg);
}

@keyframes pyon {
  0% {
    transform: translate(100%, 0) rotate(30deg);
  }

  3% {
    transform: translate(0, 0) rotate(0deg);
  }

  /* 7% {
    transform: translate(0, 0) rotate(0deg);
  } */
  18% {
    transform: translate(0, 0) rotate(0deg);
  }

  23% {
    transform: translate(100%, 0) rotate(30deg);
  }

  100% {
    transform: translate(100%, 0) rotate(30deg);
  }

}