@charset "UTF-8";

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

Fabric Softener Eucalyptus｜エコストア（ecostore）日本公式オンラインショップ

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

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


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

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

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

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

}

/* ========================================================
             * EC限定 header footer　設定 *
========================================================= */

#FooterWrap {
  position: relative;
  background: #fff;
  z-index: 5;
}

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

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

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

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

  --color-lp_bg: #b8d4c2;
  --color-lp_bg_main: #dfece4;
  --color-lp_txt_font: #000000;
  --color-lp_accent: #4d5a31;
  --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: 769px) {
  :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;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  letter-spacing: .1em;
  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: 769px) {
  .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: 769px) {

  .lp_contents .fixed_area {
    position: fixed;
    top: 0;
    left: 50%;
    translate: -50% 0;
    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 a {
    width: 20.5rem;
  }

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

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

.lp_contents section {
  position: relative;
}

.lp_contents .inner {
  height: 100%;
}

.lp_contents .cta_wrap {
  background: var(--color-lp_accent);
  margin: 0 auto;
}

.lp_contents .cta_wrap a {
  font-weight: 700;
  letter-spacing: .17em;
  color: var(--color-lp_white);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.lp_contents .under_line {
  width: fit-content;
  margin: 0 auto;
  position: relative;
}

.lp_contents .under_line::after {
  content: "";
  width: 100%;
  height: 1.5px;
  background: var(--color-lp_accent);
  position: absolute;
  bottom: calc(-5 * (var(--rate)));
  left: 0;
}

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

.sec_mv {
  background: url(../img/mv.jpg) no-repeat center top / 100%;
  position: relative;
  width: calc(750 * (var(--rate)));
  height: calc(750 * (var(--rate)));
}

.sec_mv .inner {
  padding-inline: calc(57 * (var(--rate))) calc(13 * (var(--rate)));
}

.sec_mv .sec_ttl {
  padding-top: calc(55 * (var(--rate)));
  width: calc(570 * (var(--rate)));
  transition-delay: .5s;
}

.sec_mv .release_badge {
  width: calc(116 * (var(--rate)));
  height: calc(116 * (var(--rate)));
  position: absolute;
  top: calc(148 * (var(--rate)));
  right: calc(38 * (var(--rate)));
  transition-delay: 1.6s;
}

.sec_mv .caption_group {
  position: absolute;
  bottom: calc(10 * (var(--rate)));
  right: calc(9 * (var(--rate)));
}

.sec_mv .caption_group .caption_txt {
  color: var(--color-lp_white);
  text-align: right;
}

.sec_mv .caption_group .caption_txt:nth-of-type(1) {
  font-size: calc(16 * (var(--rate)));
  letter-spacing: .02em;
}

.sec_mv .caption_group .caption_txt:nth-of-type(2) {
  font-size: calc(13 * (var(--rate)));
  margin-top: calc(7 * (var(--rate)));
}

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

.sec_intro {
  padding-bottom: calc(100 * (var(--rate)));
}

.sec_intro .inner {}

.sec_intro .sec_txt {
  font-size: calc(28 * (var(--rate)));
  line-height: calc(60/28);
  margin-top: calc(70 * (var(--rate)));
}

.sec_intro .item_list_wrap {
  margin-top: calc(64 * (var(--rate)));
  padding-inline: calc(65 * (var(--rate))) 0;
}

.sec_intro .item_list_wrap ul {
  display: flex;
  justify-content: flex-start;
  gap: calc(86 * (var(--rate)));
}

.sec_intro .item_list_wrap li {
  /* flex-grow: 1; */
  display: flex;
  flex-direction: column;
}

.sec_intro .item_list_wrap li.item_1 {}

.sec_intro .item_list_wrap li .item_img {
  /* flex-grow: 1;
  display: flex;
  justify-content: center; */
}

.sec_intro .item_list_wrap li.item_1 .item_img {}

.sec_intro .item_list_wrap li.item_2 .item_img {}

.sec_intro .item_list_wrap li figure {
  margin: 0 auto;
  width: calc(242 * (var(--rate)));
}

.sec_intro .item_list_wrap li.item_1 figure {}

.sec_intro .item_list_wrap li.item_2 figure {
  margin-inline: 0 auto;
}

.sec_intro .item_list_wrap li .item_name {
  font-size: calc(27 * (var(--rate)));
  line-height: calc(40/27);
  margin-top: calc(31 * (var(--rate)));
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: start;
}

.sec_intro .item_list_wrap li .item_name span {
  font-size: calc(20 * (var(--rate)));
  display: block;
  margin-top: calc(4 * (var(--rate)));
}

.sec_intro .item_list_wrap li .item_price {
  flex-grow: 1;
  display: flex;
  align-items: end;
  justify-content: center;
  font-size: calc(25 * (var(--rate)));
  letter-spacing: .06em;
  margin-top: calc(36 * (var(--rate)));
}

.sec_intro .item_list_wrap li .item_price .price_size {
  font-size: calc(18 * (var(--rate)));
}

.sec_intro .item_list_wrap li .item_price .price_tax {
  font-size: calc(17 * (var(--rate)));
}

.sec_intro .cta_wrap {
  border-radius: calc(33 * (var(--rate)));
  margin: calc(42 * (var(--rate))) 0 0 0;
}

.sec_intro .cta_wrap a {
  font-size: calc(38 * (var(--rate)));
  padding: calc(20 * (var(--rate))) 0 calc(10 * (var(--rate)));
}

/* ========================================================
                      * sec_point  *
========================================================= */

.sec_point {
  padding-top: calc(164 * (var(--rate)));
  background: var(--color-lp_bg_main);
}

.sec_point .inner {
  padding-inline: calc(50 * (var(--rate)));
}

.sec_point .inner_1 {
  padding-bottom: calc(56 * (var(--rate)));
}

.sec_point .inner_2 {
  background: var(--color-lp_white);
  padding-top: calc(78 * (var(--rate)));
  padding-bottom: calc(114 * (var(--rate)));
}

.sec_point .main_visual {}

.sec_point .point_main_visual {
  width: calc(653 * (var(--rate)));
  margin-left: calc(24 * (var(--rate)));
  margin-right: 0;
}

.sec_point .sec_ttl {
  font-size: calc(43 * (var(--rate)));
  line-height: calc(61.36/42.85);
  color: var(--color-lp_accent);
  margin-top: calc(9 * (var(--rate)));
}

.sec_point .sec_txt {
  font-size: calc(28 * (var(--rate)));
  line-height: calc(64/28);
  margin-top: calc(12 * (var(--rate)));
}

.sec_point .recommend_wrap {
  background: var(--color-lp_white);
  border-radius: calc(39 * (var(--rate)));
  margin-inline: calc(0 * (var(--rate)));
  margin-top: calc(124 * (var(--rate)));
  position: relative;
}

.sec_point .recommend_wrap::after {
  content: "";
  background: url(../img/recommend_wrap_decoration.png) no-repeat center / 100%;
  width: calc(366 * (var(--rate)));
  height: calc(230 * (var(--rate)));
  position: absolute;
  top: calc(-135 * (var(--rate)));
  right: calc(-103 * (var(--rate)));
}

.sec_point .recommend_inner {
  padding-inline: calc(96 * (var(--rate)));
}

.sec_point .recommend_wrap .recommend_ttl {
  font-size: calc(32 * (var(--rate)));
  color: var(--color-lp_accent);
  padding-top: calc(58 * (var(--rate)));
}

.sec_point .recommend_wrap ul {
  margin-top: calc(60 * (var(--rate)));
  padding-bottom: calc(50 * (var(--rate)));
}

.sec_point .recommend_wrap li {
  font-size: calc(33 * (var(--rate)));
  letter-spacing: .09em;
  white-space: nowrap;
}

.sec_point .recommend_wrap li:nth-of-type(n+2) {
  margin-top: calc(40 * (var(--rate)));
}

.sec_point .check_list li {
  text-align: left;
  position: relative;
  display: flex;
}

.sec_point .check_list li::before {
  content: "";
  background: url(../img/icon_check.svg) no-repeat center /100%;
  width: calc(39 * (var(--rate)));
  height: calc(29 * (var(--rate)));
  display: block;
  flex-shrink: 0;
  margin-right: calc(29 * (var(--rate)));
}

.sec_point .sec_txt_2 {
  margin-top: calc(50 * (var(--rate)));
  margin-left: calc(15 * (var(--rate)));
  line-height: calc(44/28);
}

.sec_point .point_list_wrap {}

.sec_point .point_card {
  background: var(--color-lp_bg_main);
  padding-top: calc(58 * (var(--rate)));
  padding-bottom: calc(63 * (var(--rate)));
  position: relative;
}

.sec_point .point_card:nth-of-type(n+2) {
  margin-top: calc(58 * (var(--rate)));
  padding-top: calc(68 * (var(--rate)));
  padding-bottom: calc(55 * (var(--rate)));
}

.sec_point .point_label {
  font-size: calc(39 * (var(--rate)));
  letter-spacing: .12em;
  color: var(--color-lp_accent);
}

.sec_point .point_label::after {
  bottom: calc(-10 * (var(--rate)));
}

.sec_point .point_lead {
  font-size: calc(28 * (var(--rate)));
  line-height: calc(60/28);
  margin-top: calc(52 * (var(--rate)));
}

.sec_point .point_visual {
  width: calc(539 * (var(--rate)));
  margin: calc(34 * (var(--rate))) auto 0;
}

.sec_point .point_visual_2 {
  margin: calc(70 * (var(--rate))) auto 0;
}

.sec_point .point_list_wrap ul {
  margin-top: calc(53 * (var(--rate)));
  padding-inline: calc(38 * (var(--rate)));
}

.sec_point .point_list_wrap .point_card:nth-of-type(2) ul {
  margin-top: calc(62 * (var(--rate)));
}

.sec_point .point_list_wrap li {
  font-size: calc(27 * (var(--rate)));
  letter-spacing: .09em;
}

.sec_point .point_list_wrap li::before {
  width: calc(27 * (var(--rate)));
  height: calc(20 * (var(--rate)));
  display: block;
  margin-right: calc(20 * (var(--rate)));
}

.sec_point .point_list_wrap li:nth-of-type(n+2) {
  margin-top: calc(25 * (var(--rate)));
}

.sec_point .cta_wrap {
  border-radius: calc(40 * (var(--rate)));
  margin-top: calc(97 * (var(--rate)));
}

.sec_point .cta_wrap a {
  font-size: calc(28 * (var(--rate)));
  letter-spacing: .3em;
  padding: calc(33 * (var(--rate))) 0 calc(26 * (var(--rate)));
  line-height: 0;
}

.sec_point .cta_wrap a::after {
  content: "";
  background: url(../img/icon_arrow.svg) no-repeat center / 100%;
  width: calc(13 * (var(--rate)));
  height: calc(22 * (var(--rate)));
  display: block;
  margin-left: calc(14 * (var(--rate)));
  margin-top: calc(-3 * (var(--rate)));
}

/* ========================================================
                      * sec_set  *
========================================================= */

.sec_set {
  background: var(--color-lp_accent);
  padding-top: calc(58 * (var(--rate)));
  padding-bottom: calc(52 * (var(--rate)));
}

.sec_set .inner {
  background: var(--color-lp_white);
  border-radius: calc(39 * (var(--rate)));
  margin-inline: calc(49 * (var(--rate)));
  padding-top: calc(95 * (var(--rate)));
  padding-bottom: calc(100 * (var(--rate)));
}

.sec_set .anniversary_ttl {
  width: calc(437 * (var(--rate)));
  margin: 0 auto;
  transition-delay: .2s;
}

.sec_set .sec_ttl {
  font-size: calc(44 * (var(--rate)));
  letter-spacing: .07em;
  margin-top: calc(150 * (var(--rate)));
  transition-delay: .2s;
}

.sec_set .sec_ttl span {
  display: block;
  font-size: calc(31 * (var(--rate)));
  letter-spacing: .07em;
  margin-top: calc(17 * (var(--rate)));
}

.sec_set .main_visual {}

.sec_set .set_main_visual {
  width: calc(541 * (var(--rate)));
  margin: calc(60 * (var(--rate))) auto 0;
}

.sec_set .sec_txt {
  font-size: calc(25 * (var(--rate)));
  letter-spacing: .07em;
  line-height: calc(48/25);
  margin-top: calc(46 * (var(--rate)));
}


.sec_set .set_sub_visual {
  width: calc(650 * (var(--rate)));
  margin-top: calc(5 * (var(--rate)));
  position: relative;
  z-index: 0;
}

.sec_set .sec_lead {
  width: calc(356 * (var(--rate)));
  position: absolute;
  top: calc(191 * (var(--rate)));
  left: calc(46 * (var(--rate)));
  z-index: -1;
  transition-delay: .4s;
}

.sec_set .item_discription {
  font-size: calc(25 * (var(--rate)));
  letter-spacing: .1em;
  line-height: calc(35.5/25);
  margin-top: calc(30 * (var(--rate)));
}

.sec_set .item_discription .item_price {
  letter-spacing: .06em;
}

.sec_set .item_discription .price_tax {
  font-size: calc(17 * (var(--rate)));
  letter-spacing: .06em;
}

.sec_set .cta_wrap {
  width: fit-content;
  margin-top: calc(25 * (var(--rate)));
  border-radius: calc(33 * (var(--rate)));
}

.sec_set .cta_wrap a {
  font-size: calc(38 * (var(--rate)));
  padding: calc(18 * (var(--rate))) calc(125 * (var(--rate))) calc(11 * (var(--rate)));
}

.sec_set .set_list_wrap {
  margin-top: calc(44 * (var(--rate)));
  margin-inline: calc(47 * (var(--rate)));
  padding-inline: calc(23 * (var(--rate)));
  border-radius: calc(21 * (var(--rate)));
  border: solid 2px var(--color-lp_accent);
}

.sec_set .set_list_wrap .set_list_ttl {
  font-size: calc(20 * (var(--rate)));
  text-align: left;
  color: var(--color-lp_accent);
  padding-top: calc(34 * (var(--rate)));
}

.sec_set .set_list_wrap ul {
  margin-top: calc(32 * (var(--rate)));
  padding-bottom: calc(33 * (var(--rate)));
}

.sec_set .set_list_wrap li {
  font-size: calc(21 * (var(--rate)));
  text-align: left;
  letter-spacing: .01em;
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.sec_set .set_list_wrap li:nth-of-type(n+2) {
  margin-top: calc(21 * (var(--rate)));
}

.sec_set .set_list_wrap li::before {
  content: "";
  background: var(--color-lp_accent);
  width: calc(9 * (var(--rate)));
  height: calc(9 * (var(--rate)));
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  margin-right: calc(12 * (var(--rate)));
}

.sec_set .set_list_wrap li span {
  font-size: calc(17 * (var(--rate)));
}

.sec_set .point_list_wrap {
  margin-top: calc(100 * (var(--rate)));
}

.sec_set .point_list_wrap .point_label {
  font-size: calc(39 * (var(--rate)));
  letter-spacing: .18em;
}

.sec_set .point_list_wrap .point_label::after {
  background: var(--color-lp_txt_font);
}

.sec_set .point_list_wrap ul {
  margin-top: calc(50 * (var(--rate)));
}

.sec_set .point_list_wrap li {}

.sec_set .point_list_wrap li figure {
  margin: 0 auto;
}

.sec_set .point_list_wrap li:nth-of-type(1) figure {
  width: calc(537 * (var(--rate)));
  margin-left: calc(85 * (var(--rate)))
}

.sec_set .point_list_wrap li:nth-of-type(2) figure {
  width: calc(519 * (var(--rate)));
  margin-top: calc(52 * (var(--rate)));
  margin-left: calc(85 * (var(--rate)))
}

.sec_set .point_list_wrap li:nth-of-type(3) figure {
  width: calc(534 * (var(--rate)));
  margin-top: calc(94 * (var(--rate)));
  margin-left: calc(73 * (var(--rate)));
}

.sec_set .point_list_wrap li .point_txt {
  font-size: calc(42 * (var(--rate)));
  line-height: calc(76 / 42);
  letter-spacing: .17em;
  margin-top: calc(27 * (var(--rate)));
  margin-left: calc(-6 * (var(--rate)));
}

.sec_set .point_list_wrap li .point_txt span {
  line-height: calc(78/42);
  letter-spacing: .17em;
  display: block;
  position: relative;
}

.sec_set .point_list_wrap li .point_txt span::after {
  content: "";
  height: 5px;
  position: absolute;
  top: calc(23 * (var(--rate)));
  left: 50%;
  transform: translateX(calc(-50% - 30px));
  margin-top: calc(37 * (var(--rate)));
}

.sec_set .point_list_wrap li .point_txt.md span::after {
  width: calc(444 * (var(--rate)));
  background: url(../img/line_md.png) no-repeat center / 100%;
}

.sec_set .point_list_wrap li .point_txt.lg span::after {
  width: calc(497 * (var(--rate)));
  background: url(../img/line_lg.png) no-repeat center / 100%;
}

.sec_set .point_list_wrap li:nth-of-type(2) .point_txt {
  margin-top: calc(0 * (var(--rate)));
}

.sec_set .point_list_wrap li:nth-of-type(3) .point_txt {
  margin-top: calc(15 * (var(--rate)));
  margin-left: calc(0 * (var(--rate)));
}

.sec_set .point_list_wrap li:nth-of-type(3) .point_txt span {
  letter-spacing: .07em;
}


/* ========================================================
                      * sec_artist  *
========================================================= */

.sec_artist {
  padding-top: calc(200 * (var(--rate)));
  padding-bottom: calc(196 * (var(--rate)));
}

.sec_artist .inner {
  padding-inline: calc(46 * (var(--rate)));
}

.sec_artist .sec_label {
  font-size: calc(45 * (var(--rate)));
  letter-spacing: .025em;
  position: relative;
}

.sec_artist .sec_label::after {
  content: "";
  width: calc(154 * (var(--rate)));
  height: 1.5px;
  background: var(--color-lp_txt_font);
  position: absolute;
  bottom: calc(-25 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
}

.sec_artist .sec_ttl {
  font-size: calc(36 * (var(--rate)));
  letter-spacing: .15em;
  margin-top: calc(60 * (var(--rate)));
}

.sec_artist .sec_artist_name {
  font-size: calc(42 * (var(--rate)));
  letter-spacing: .15em;
  margin-top: calc(90 * (var(--rate)));
}

.sec_artist .sec_artist_img {
  width: calc(412 * (var(--rate)));
  margin: calc(52 * (var(--rate))) auto 0;
}

.sec_artist .sec_txt {
  font-size: calc(25 * (var(--rate)));
  letter-spacing: .07em;
  line-height: calc(48/25);
  text-align: justify;
  margin-top: calc(50 * (var(--rate)));
  padding-inline: calc(35 * (var(--rate)));
}

.sec_artist .sec_artist_gallery {
  width: calc(595 * (var(--rate)));
  margin: calc(34 * (var(--rate))) auto 0;
}

.sec_artist .account_txt {
  font-size: calc(23 * (var(--rate)));
  letter-spacing: .07em;
  text-align: right;
  margin-top: calc(18 * (var(--rate)));
  margin-right: calc(40 * (var(--rate)));
}

.sec_artist .link_insta {
  width: calc(125 * (var(--rate)));
  margin: calc(68 * (var(--rate))) auto 0;
}

.sec_artist .cta_wrap {
  margin-top: calc(74 * (var(--rate)));
  border-radius: calc(40 * (var(--rate)));
}

.sec_artist .cta_wrap a {
  font-size: calc(28 * (var(--rate)));
  letter-spacing: .3em;
  padding: calc(33 * (var(--rate))) 0 calc(27 * (var(--rate)));
  line-height: 0;
}

.sec_artist .cta_wrap a::after {
  content: "";
  background: url(../img/icon_arrow.svg) no-repeat center / 100%;
  width: calc(16 * (var(--rate)));
  height: calc(25 * (var(--rate)));
  display: block;
  margin-left: calc(14 * (var(--rate)));
  margin-top: calc(-6 * (var(--rate)));
}

/* ========================================================
            * 洗濯バサミのデコレーション  *
========================================================= */

.deco_clothespins {
  position: absolute;
}

.deco_clothespins_1 {
  width: calc(154 * (var(--rate)));
  top: calc(-38 * (var(--rate)));
  right: calc(-15 * (var(--rate)));
}

.deco_clothespins_2 {
  width: calc(168 * (var(--rate)));
  top: calc(30 * (var(--rate)));
  left: calc(12 * (var(--rate)));
}

.deco_clothespins_3 {
  width: calc(221 * (var(--rate)));
  top: calc(46 * (var(--rate)));
  right: calc(19 * (var(--rate)));
}

.deco_clothespins_4 {
  width: calc(144 * (var(--rate)));
  top: calc(929 * (var(--rate)));
  left: calc(12 * (var(--rate)));
}

.deco_clothespins_5 {
  width: calc(198 * (var(--rate)));
  top: calc(-75 * (var(--rate)));
  left: calc(-30 * (var(--rate)));
}

.deco_clothespins_6 {
  width: calc(136 * (var(--rate)));
  top: calc(-75 * (var(--rate)));
  right: calc(-21 * (var(--rate)));
}

.deco_clothespins_7 {
  width: calc(194 * (var(--rate)));
  top: calc(62 * (var(--rate)));
  right: calc(-5 * (var(--rate)));
}

.deco_clothespins_8 {
  width: calc(155 * (var(--rate)));
  top: calc(336 * (var(--rate)));
  left: calc(28 * (var(--rate)));
}

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

.js-clip {
  display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s .2s ease-out;
}

.js-intersection.is-show .js-clip {
  clip-path: inset(0 0 0 0);
}

.js-fade {
  opacity: 0;
  transition: opacity 1s cubic-bezier(.4, .4, 0, 1);
}

.js-fade.is-show {
  opacity: 1;
}

/* .js-yurayura {
  animation: yurayura 2s linear infinite;
}

@keyframes yurayura {

  0%,
  100% {
    transform: rotate(-10deg)
  }

  50% {
    transform: rotate(10deg)
  }
} */

.js-fadeup {
  opacity: 0;
  transform: translateY(60px);
  transition: all .8s ease-out;
}

.js-fadeup.is-show {
  opacity: 1;
  transform: translateY(0);
}

.js-fadeup_2 {
  opacity: 0;
  transform: translateY(80px);
  transition: all .7s ease-out;
}

.js-fadeup_2.is-show {
  opacity: 1;
  transform: translateY(0);
}

.js-fadein_child {
  opacity: 0;
  transition: 1s;
  transform: translateX(-30px);
}

.js-fadein.is-show .js-fadein_child {
  opacity: 1;
  transform: translateX(0);
}

.js-fadein .order_1 {
  transition-delay: .2s;
}

.js-fadein .order_2 {
  transition-delay: .4s;
}

.js-fadein .order_3 {
  transition-delay: .6s;
}

.js-fadein .order_4 {
  transition-delay: .8s;
}

.js-fadein_2 span::after {
  opacity: 0;
  transition: .8s;
  transform: translateX(calc(-50% + -50px)) !important;
}

.js-fadein_2 span:nth-of-type(1):after {
  transition-delay: .4s;
}

.js-fadein_2 span:nth-of-type(2):after {
  transition-delay: .8s;
}

.js-fadein_2.is-show span::after {
  opacity: 1;
  transform: translateX(calc(-50%)) !important;
}