@charset "UTF-8";

/*Reset =============================================*/
*{
  box-sizing: border-box;
  background-repeat: no-repeat;
}
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,figure,figcaption,button{
  margin: 0;
  padding: 0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
a[href^="tel:"] {
  pointer-events: all;
}
img,svg{
vertical-align: bottom;
border: none;
width: 100%;
max-width:100%;
height:auto;
}
svg{
  vertical-align: bottom;
}
button{
  background-color: inherit;
  border: none;
}
table {
  border-collapse: collapse;
}

@font-face {
  font-family: "YakuHanJP"; font-style: normal; font-display: swap;
  font-weight: 400;
  src: url("/font/YakuHanJP/YakuHanJP-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "YakuHanJP"; font-style: normal; font-display: swap;
  font-weight: 500;
  src: url("/font/YakuHanJP/YakuHanJP-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "YakuHanJP"; font-style: normal; font-display: swap;
  font-weight: 600;
  src: url("/font/YakuHanJP/YakuHanJP-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "ZenKakuGothicNew"; font-style: normal; font-display: swap;
  font-weight: 400;
  src:  local('Noto Sans CJK JP'),
  local('ZenKakuGothicNew-Regular'),
  url('/font/ZenKakuGothicNew/ZenKakuGothicNew-Regular.woff2') format('woff2');
}
@font-face {
  font-family: "ZenKakuGothicNew"; font-style: normal; font-display: swap;
  font-weight: 500;
  src: local('ZenKakuGothicNew-Medium'),
  url('/font/ZenKakuGothicNew/ZenKakuGothicNew-Medium.woff2') format('woff2');
}
@font-face {
  font-family: "ZenKakuGothicNew"; font-style: normal; font-display: swap;
  font-weight: 700;
  src: local('NotoSansCJKjp-Bold'),
  local('ZenKakuGothicNew-Bold'),
  url('/font/ZenKakuGothicNew/ZenKakuGothicNew-Bold.woff2') format('woff2');
}


/* lazyload ================================= */
.lazyload{opacity: 0;}
.lazyloaded, .lazyloading  {opacity: 1; transition: opacity 1000ms;}

/* Module =============================================*/
:root {
  --c-black: #4d4d4d;
  --c-black2: #a3a39b;
  --c-grey: #dbd9d9;
  --c-grey2: #999;
  --c-grey3: #f1f1ef;
  --c-white: #fafafa;
  --c-red: #CB9999;
  --c-pink: #CB9999;
  --c-pink2: #e7d8d8;
  --c-blue: #a7bec3;

  --c-lp-pink: #e39ba2;
  --c-lp-pink2: #cd7582;
  --c-shadow-pink: rgba(195, 152, 152 , .9);

  --font-comp: futura-pt, "YakuHanJP", "ZenKakuGothicNew", sans-serif;
  --font-ja: "YakuHanJP","ZenKakuGothicNew",sans-serif;
  --font-en: "YakuHanJP",futura-pt, sans-serif;
  --font-yu: "YakuHanJP","游ゴシック体", YuGothic, sans-serif;
  --filter-w: invert(100%) sepia(98%) saturate(8%) hue-rotate(236deg) brightness(105%) contrast(98%);
  --filter-b: invert(27%) sepia(0%) saturate(0%) hue-rotate(155deg) brightness(106%) contrast(94%);
  --filter-wg: invert(96%) sepia(8%) saturate(14%) hue-rotate(314deg) brightness(86%) contrast(111%);
  --filter-p: invert(55%) sepia(4%) saturate(2284%) hue-rotate(314deg) brightness(121%) contrast(84%);
  --inn-w: 2rem;
  --inn-w-minus: -2rem;

  --kv-fill-color: #fff;
}

/* font-size =============================================*/
html {
  font-size: clamp(10px,3.125vw,17.5px);
  /*
    計算式：　10(px) / 320(px) * 100 = 3.125
    画面幅320pxの時に "font-size: 10px" 相当になる
  */
}

/* BODY  
============================================*/
.body{
  font-family: var(--font-ja);
  line-height:1.5;
  position: relative;
  color: var(--c-black);
}
.body::before{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -20000;
  width: 100%;
  height: 100vh;
  background-color: var(--c-pink2);
  /* background-image: url(/lp/imgs/bg_01.jpg); */
  background-size: cover;

  /* -webkit-animation: AnimationName 20s ease infinite;
  -moz-animation: AnimationName 20s ease infinite; */
  animation: AnimationName 30s ease infinite;
}
.body.on::before{
  background-image: url(/lp/imgs/bg_01.jpg);
}

/* @-webkit-keyframes AnimationName {
  0%{background-position:0% 97%}
  50%{background-position:100% 4%}
  100%{background-position:0% 97%}
}
@-moz-keyframes AnimationName {
  0%{background-position:0% 97%}
  50%{background-position:100% 4%}
  100%{background-position:0% 97%}
} */
@keyframes AnimationName {
  0%{background-position:0% 97%}
  50%{background-position:100% 4%}
  100%{background-position:0% 97%}
}

.all_wrap{
  position:relative;
  display:block;
  overflow:hidden;
  max-width: 560px;
  margin:0 auto;
}
.all_wrap::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10000;
  width: 100%;
  height: 100%;
  background-color: var(--c-white);
  opacity: .6;
  transition: background-color 1s;
}



/* SECTION
========================================= */
.sec_bloc{
  padding: 3em 0;
}
._top0{ padding-top: 0 !important;}
._bottom0{ padding-bottom: 0 !important;}
._top_w{ padding-top: 6em;}
._bottom_w{ padding-bottom: 6em;}

.c_wide{
  max-width: 1400px;
  margin: 0 auto;
}
.c_wide_narrow{
  max-width: 960px;
  margin: 0 auto;
}
.c_inner{
  padding: 0 var(--inn-w);
}

.sec_ttl{
  font-size: 1rem;
  padding: 2em 0;
}
.sec_ttl .en._s{
  font-weight: 400;
  font-size: 5em;
  line-height: 1;
}
.sec_ttl .en{
  display: block;
  font-weight: 300;
  font-size: 5em;
  line-height: 1;
}
.sec_ttl .ja{
  display: block;
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1.7;
}
.sec_sub{
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  padding-bottom: 2em;
}

@media (min-width: 769px) {
  .c_inner_pc{
    padding: 0 var(--inn-w);
  }
}


/* Parts ================================= */
html.smooth{
  scroll-behavior: smooth;
}

/* SVG color */
._icon_w{filter: var(--filter-w);}
._icon_b{filter: var(--filter-b);}

.center{ text-align: center;}
.left-center{ text-align: left;}
.center-left{ text-align: center;}
.left{ text-align: left;}

.comp{ font-family: var(--font-comp);}
.en{ font-family: var(--font-en);}
.ja{ font-family: var(--font-ja); letter-spacing: .5px;}
.yu{ font-family: var(--font-yu); letter-spacing: .5px;}
.koi{ font-family: "YakuHanJP","ta-koigokoro" , sans-serif; }
.min{ font-family: var(--font-min); letter-spacing: 0.08em;}
.red{ color: var(--c-pink);}
.pink{ color: var(--c-lp-pink);}
.w_600{font-weight: 600 !important;}
.w_500{font-weight: 500 !important;}
.w_400{font-weight: 400 !important;}
.small{font-size: .9em;}
.small2{font-size: .8em;}
.small3{font-size: .7em;}
.small4{font-size: .6em;}
.small5{font-size: .5em;}

.block{
  display: block;
}
.asterisk{
  position: relative;
  display: block;
  padding-left: 1.2em;
  margin-top: 0.2em;
  font-size: .8em;
}
.asterisk::before{
  content: "※";
  position: absolute;
  left: 0;
}
.hov a,.hover,.r-over,button{
  transition: opacity .5s;
}
.hov a:hover,.hover:hover,.r-over:hover,button:hover{
  opacity: .6;
}
.youtube_box{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube_box iframe{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

/* LINK */
.link_circle_arrow{
  display: flex;
  width: fit-content;
  align-items: center;
  font-size: 1rem;
  padding: 1em 0;
  transition: transform .2s;
  
  &._right{
    margin-left: auto;
  }
  &._center{
    margin: auto;
  }
  & .txt{
    display: inline-block;
    font-family: var(--font-comp);
    font-size: 1.4rem;
    font-weight: 500;
  }
}
.arrow_circle{
  position: relative;
  display: inline-block;
  width: 4em;
  height: 3em;
  margin-left: .8em;
  overflow:hidden;
}
.arrow_circle_img{
  position: absolute;
  top: 0;
  bottom: .1em;
  left: 0;
  right: 0;
  margin: auto;
  width: 100% !important;
  filter: var(--filter-b);
  transition: transform .25s ease-in, opacity .25s;
}
.arrow_circle_img._w{filter: var(--filter-w);}
.header_w .arrow_circle{filter: var(--filter-w);}
.header_w .arrow_circle::before{filter: none;}
.header_w .bg_black .arrow_circle_img._w {
  filter: none;
}
.header_w .bg_black .arrow_circle::before {
  filter: var(--filter-p);
}

.arrow_circle_img._pdf{
  width: 44%;
}
.arrow_circle_img.contents{
  top: 1em;
  width: 100% !important;
}
.arrow_circle::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  /* width: 38%; */
  /* height: 38%; */
  background-image: url(/imgs/elem_arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  transform: translateX(-200%);
  opacity: 0;
  transition: transform .25s ease-out, opacity .25s ease-out;
  filter: var(--filter-p);
}

.link_circle_arrow:hover{
  transform: translateX(.3em);
  color: var(--c-pink);
  /* color: var(--c-white); */
}
.link_circle_btn_wrap .link_circle_arrow:hover{
  /* transform: translateX(.3em); */
  /* color: var(--c-pink); */
  color: var(--c-white);
}
.link_circle_arrow._w:hover{
  transform: translateX(.3em);
  /* color: var(--c-pink); */
  /* color: var(--c-white); */
}
.link_circle_arrow:hover .arrow_circle_img,
.top_cont_box:hover .arrow_circle_img{
  transform: translateX(200%);
  opacity: 0;
}
.link_circle_arrow:hover .arrow_circle::before,
.top_cont_box:hover .arrow_circle::before{
  transform: translateX(0);
  opacity: 1;
}
.arrow_circle._line{
  background-color: inherit;
  border: 1px solid var(--c-white);
}
.arrow_circle._line .arrow_circle_img{
  bottom: 0;
}

/* LINK CIRCLE + BUTTON */
.link_circle_btn_wrap{
  background-color: var(--c-pink);
  border-radius: .1em;
  margin: 1.5em auto;
  max-width: 36rem;
  color: var(--c-white);
  width: 82%;
}
/* .link_circle_btn_wrap:hover {
  color: #fff;
} */
.link_circle_btn_wrap._left{
  /* margin: 1.5em auto 1.5em 0; */
  margin: 1.5em auto;
}
.link_circle_btn_wrap._right{
  margin: 1.5em 0 1.5em auto;
}
.link_circle_btn_wrap .link_circle_arrow{
  width: 100%;
  justify-content: center;
}
/* .link_circle_btn_wrap .arrow_circle{
  background-color: currentColor;
} */
.link_circle_btn_wrap .arrow_circle_img,
.link_circle_btn_wrap .arrow_circle::before{
  filter: var(--filter-w);
}

.link_circle_btn_wrap._border{
  background-color: transparent;
  color: currentColor;
  border: 1px solid var(--c-black3);
  /* min-width: 30rem; */
}
.link_circle_btn_wrap._border .arrow_circle_img,
.link_circle_btn_wrap._border .arrow_circle::before {
  filter: var(--filter-w);
}

/* speech_border ============== */
.speech_border {
  position: relative;
  display: block;
  width: fit-content;
  height: 100%;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.1;
  padding: 0 .7em;
  margin: auto;
}
.speech_border::before, .speech_border::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  width: 1.5px;
  height: 1em;
  background-color: currentColor;
}
.speech_border::before {
  left: 0;
  transform: rotateZ(-30deg);
}
.speech_border::after {
  right: 0;
  transform: rotateZ(30deg);
}

/* mt */
.mt05{ margin-top: .5em;}.mt1{ margin-top: 1em;}.mt2{ margin-top: 2em;}.mt3{ margin-top: 3em;}.mt4{ margin-top: 4em;}.mt5{ margin-top: 5em;}.mt6{ margin-top: 6em;}.mt7{ margin-top: 7em;}.mt8{ margin-top: 8em;}.mt9{ margin-top: 9em;}

/* mb */
.mb05{ margin-bottom: .5em;}.mb1{ margin-bottom: 1em;}.mb2{ margin-bottom: 2em;}.mb3{ margin-bottom: 3em;}.mb4{ margin-bottom: 4em;}.mb5{ margin-bottom: 5em;}.mb6{ margin-bottom: 6em;}.mb7{ margin-bottom: 7em;}.mb8{ margin-bottom: 8em;}.mb9{ margin-bottom: 9em;}


/* LP NAV ======================= */
.lp_nav{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10000;

  animation: lp_nav_anime .4s ease-out 2s 1  forwards ;
  transform: translateY(100%);
  opacity: 0;
}
@keyframes lp_nav_anime{
  0% { transform: translateY(100%); opacity: 0;}
  100% { transform: translateY(0); opacity :1;}
}

.lp_nav_list{
  display: flex;
  justify-content: space-between;
  max-width: 560px;
  margin: auto;
}
.lp_nav_list_box{
  width: 100%;
  height: 5rem;
  font-size: 1.7em;
  font-weight: 500;
  text-align: center;
  border: 1px solid var(--c-lp-pink);
  border-bottom: none;
  border-radius: .8em .8em 0 0;

  display: flex;
  justify-content: center;
  align-items: center;
}
.lp_nav_list_box._web{
  background-color: rgba(227, 155, 162, .9);
  color: #fff;
}
.lp_nav_list_box._tel{
  background-color: rgba(255,255, 255,.9);
  color: var(--c-lp-pink);
}
.lp_nav_list_box._tel i {
  font-size: 1.2em;
}
.speech_border{
  position: relative;
  display: block;
  width: fit-content;
  height: 100%;
  font-size: 0.7em;
  line-height: 1.1;
  padding: 0 .7em;
  margin: auto;
}
.speech_border::before,
.speech_border::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  width: 1.5px;
  height: 1em;
  background-color: currentColor;
}
.speech_border::before{
  left: 0;
  transform: rotateZ(-30deg);
}
.speech_border::after{
  right: 0;
  transform: rotateZ(30deg);
}

.lp_nav_list_box .speech_border{
  display: inline-block;
  margin-right: .8em;
}


/* KEY ========================================= */
.lp_keyvis_block{
  position: relative;
}
.lp_key_img {
  width: 100%;
  aspect-ratio: 64/110;
}
.lp_key_tex_01{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 50%;
  opacity: .3;
}
.lp_key_tex_02{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 75%;
  opacity: .4;
  mix-blend-mode: multiply;
}
.lp_key_logo{
  position: absolute;
  top: 1.5rem;
  left: 1.1rem;
  width: 12.5rem;
  font-size: 1em;
  z-index: 1
}
.lp_key_logo .txt {
  display: block;
  font-size: 1.8em;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.05em;
  margin-bottom: .7em;
  color: var(--c-lp-pink2);
}
span.lh {
  display: block;
  line-height: .8;
}
.lp_key_logo img{
  margin: auto;
  display: block;
  width: 92%;
}
.fadeSaturate{
  filter: saturate(0);
  transition: filter .5s;
  animation: saturate 1s ease-out 1 forwards ;
}

@keyframes saturate{
  0%   { filter: saturate(0);}
  100% { filter: saturate(1);  }
}
.key_copy{
  position: absolute;
  top: 39rem;
  left: 1.3rem;
  font-family: "ZenKakuGothicNew", sans-serif;
  font-size: 1.65em;
  /* writing-mode: vertical-rl; */
  color: #fff;
}
.key_copy .sub{
  display: block;
  font-size: 2em;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.key_copy .ttl{
  position: relative;
  display: block;
  width: fit-content;
  height: fit-content;
  letter-spacing: 0.05em;
  line-height: 1.8;
  z-index: 1;
  padding:0 .3em;
  text-shadow: .05em .05em 0 #c39898;
}
.key_copy .ttl:last-child{
  padding-left: 0;
}
.key_copy .ttl:before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  width: 100%;
  /* background-color: rgba(229,159,174,1); */
  background-color: var(--c-lp-pink2);
  z-index: -1;
  opacity: .8;
  height: 0;
}
/* .key_copy .ttl:after{
  content: "";
  position: absolute;
  top: -.05rem;
  left: .05em;
  display: inline-block;
  width: 80%;
  background: linear-gradient(90deg, rgb(233,230,230) 0%, rgb(250,236,235) 37%, rgb(244,220,220) 100%);
  opacity: .5;
  z-index: -2;

  height: 0;
} */
/* .key_copy .ttl:last-of-type{
  margin-top: 8rem;
} */
.ker {
  display: inline-block;
  width: .5em;
}
.ker2 {
  display: inline-block;
  width: 1em;
  margin: 0 0 0 -.2em;
}

/* animation */
.key_copy .ttl.on:before,
.key_copy .ttl.on:after{
  animation-name: key_copy_anime;
  animation-duration: .7s;
  animation-fill-mode: forwards;
}
.key_copy .ttl.on:after{
  animation-delay: .6s;
}
.key_copy .ttl:last-of-type.on:before{
  animation-delay: .4s;
}
.key_copy .ttl:last-of-type.on:after{
  animation-delay: .8s;
}
@keyframes key_copy_anime{
  0% { height: 0;}
  100%   { height: 90%;}
}

.key_ttl{
  position: absolute;
  bottom: 10.2rem;
  font-size: 1.8rem;
  left: 1.5rem;
  color: #fff;
}
.border_b{
  position: relative;
  display: inline-block;
  line-height: 1.4;
  margin: 0 0 .1em;
}
.border_b::after{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}


/* key foot */
.lp_key_foot_ttl{
  font-size: 1.6em;
  font-weight: 600;
  text-align: center;
  margin-bottom: .8em;
}
.lp_key_price_wrap{
  position: absolute;
  top: 9.2rem;
  right: .7rem;
  width: 10em;
  z-index: 10;
}
.lp_key_price{
  position: absolute;
  width: 100%;
  /* top: 6rem;
  right: 1.2rem;
  width: 13em;
  z-index: 10; */
}
/* .lp_key_price img{
  filter: drop-shadow(.2em .2em .1em #bb9191);
} */
.lp_key_price::before{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  content: "";
  display: block;
  width: 96%;
  aspect-ratio: 1 / 1;
  /* background-color: #e798a0; */
  background-color: var(--c-white);
  border-radius: 50%;
  /* mix-blend-mode: color; */
  opacity: 0;
}
.on .lp_key_price::before{
  opacity: .7;
  transition-delay: 1s;
}

.lp_key_foot_block{
  position: relative;
  margin-top: -23em;
}

.lp_key_foot_inner{
  padding: 0 0 3em;
}
.cam_block{
  padding-top: 1.5em;
  margin-bottom: 4em;
}

.gradient_bg{
  position: relative;
  display: block;
  z-index: 0;
}
.gradient_bg::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(/lp/imgs/noise.jpg);
  opacity: .6;
  z-index: -1;
  mix-blend-mode: overlay;
} 
.gradient_bg::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #e9e6e6;
  background: linear-gradient(90deg, rgb(225 232 234) 0%, rgb(250 236 235) 45%, rgb(244 220 220) 100%);
  z-index: -2;
}

.lp_key_foot_inner_top{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 0.71875;
  background-image: url(/lp/imgs/lp_key_foot_curb_top.svg);
  filter: drop-shadow(0 0 1em var(--c-shadow-pink) );
  margin-bottom: -1px;
}
.lp_key_foot_inner_bottom{
  width: 100%;
  height: auto;
  aspect-ratio: 150/47;
  background-image: url(/lp/imgs/lp_key_foot_curb_bottom.svg);
  filter: drop-shadow(0 0 1em var(--c-shadow-pink) );
  z-index: -1;
}
.lp_key_foot_inner_top::before,
.lp_key_foot_inner_top::after{
  mask-image: url(/lp/imgs/lp_key_foot_curb_top.svg);
}
.lp_key_foot_inner_bottom::before,
.lp_key_foot_inner_bottom::after{
  mask-image: url(/lp/imgs/lp_key_foot_curb_bottom.svg);
}
.lp_key_foot_bg{
  position: absolute;
  bottom: -10em;
  left: 0;
  width: 100%;
  height: 20em;
  z-index: -2;
}

/* banner */
.lp_key_banner_list{
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 84%;
  margin: .5em auto;
  z-index: 5;
}
.lp_key_banner_list li{
  width: 48%;
  /* background-color: #fff; */
  border-radius: 50%;
  filter: drop-shadow(.2em .2em .1em rgba(191,181,181,.9));
}
.lp_youtube_box{
  margin-top: 2.5em;
  margin-bottom: .3em;
}

/* LOOP */
.loop-logo{
  position: absolute;
  width: 100%;
  bottom: -1em;
  z-index: 5;
  overflow: hidden;
}
.loop-logo-inner{
  display: flex;
}
.loop-logo img{
  width: inherit;
  max-width: inherit;
  width: auto;
  height: 1.7em;
  padding-right: 3em;
  animation :infinity-scroll-left 10s infinite linear 0.5s both;
  filter: var(--filter-w);
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}


/* INTRO 
========================================= */
.intro_inner{
  position: relative;
}
.intro_inner::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 75 / 32;
  margin-bottom: -1px;
  background-image: url(/lp/imgs/lp_intro_curb_top.svg);
  z-index: 1;
}
.intro_inner::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 25em;
  background: linear-gradient(0deg, rgba(250, 250, 250, 0) 0%, rgba(249, 249, 249, 1) 90%);
}
.lp_intro_sec {
  margin-top: 5rem;
  padding-bottom: 10rem;
}
.lp_intro_img{
  position: relative;
  filter: drop-shadow(0 .7em .5em var(--c-shadow-pink) );
}
.lp_intro_img img{
  border-radius: 0 0 70% 70% / 0 0 30% 30% ;
  overflow: hidden;
}

.intro_list{
  position: absolute;
  top: 14em;
  z-index: 10;
}
.intro_list_box{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10rem;
  aspect-ratio: 1/1;
}
.intro_list_box::before{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(/lp/imgs/sticky_note.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
  opacity: .8;
  filter: drop-shadow(.5em .5em .8em rgba(169, 200, 206, 0.9));
}
.intro_list_box._01{
  top: -4rem;
  left: 3rem;
  transform: rotateZ(10deg);
  z-index: 100;
  transition-delay: .3s;
}
.intro_list_box._02{
  top: 1em;
  left: 11rem;
  transform: rotateZ(-5deg);
  z-index: 100;
  transition-delay: .5s;
}
.intro_list_box._03{
  top: -6rem;
  left: 19rem;
  transform: rotateZ(10deg);
}
.intro_list_box._04{
  top: 5.5rem;
  left: 1em;
  transform: rotateZ(-10deg);
  transition-delay: .7s;
}
.intro_list_box._05{
  top: 6rem;
  left: 11rem;
  transform: rotateZ(12deg);
  transition-delay: 1s;
}
.intro_list_box._06{
  top: 7rem;
  left: 20.5rem;
  transform: rotateZ(10deg);
  transition-delay: .6s;
}

.intro_list_box p{
  font-size: 1.1em;
  font-weight: 500;
}

.intro_list_box{
  opacity: 0;
  margin-top: -1em;
  transition: opacity .5s  , margin-top 1s;
}
.intro_list_box.on{
  opacity: 1;
  margin-top: 0;
}


.intro_copy{
  position: absolute;
  width: fit-content;
  left: 0;
  right: 0;
  top: -.5em;
  margin: auto;
  font-size: 3em;
  line-height: 1.3;
  z-index: 10;
  transform: rotateZ(-8deg) skewX(-10deg);
}
.intro_copy .under_line{
  display: inline-block;
}
.under_line{
  position: relative;
}
.under_line::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: .3em;
  background-color: var(--c-pink2);
  border-radius: .2em;
  opacity: .6;
  z-index: -1;

}
.intro_copy .under_line::before{
  width: 0;
  transition: width .5s;
  transition-delay: .5s;
}
.intro_copy .under_line.on::before{
  width: 100%;
}

.scroll_nav {
  position: absolute;
  top: -13em;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  width: 2px;
  border-radius: 1px;
  height: 9em;
  background-color: rgb(167,190,195,.5);
  overflow: hidden;
  z-index: 50;
}
.scroll_nav_bar{
  position: absolute;
  display: block;
  width: 100%;
  height: 50%;
  border-radius: 1px;
  background-color: #fff;
  background: linear-gradient(0deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 256, 0) 100%);
  opacity: .8;
  top: 100%;
  animation: kvScroll 2s infinite ease-in-out;
}
.reason_sec .scroll_nav{
  top: inherit;
  bottom: -11.5em;
  height: 7em;
}
@keyframes kvScroll{
  0%{
    top: -60%;
  }
  100%{
    top: 110%;
  }
}

/* EFFECT 
========================================= */
.lp_effect_sec{
  position: relative;
  background-color: #fafafa;
  z-index: 21;
}
.lp_effect_sec::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 74;
  margin-bottom: -1px;
  background-image: url(/lp/imgs/lp_effect_curb_top.svg);
  z-index: 1;
}
.lp_effect_head{
  position: relative;
  text-align: center;
  z-index: 1;
}
.lp_effect_sec_ttl{
  font-size: 1rem;
  padding: .5em 0;
}
.lp_effect_sec_ttl .sub{
  display: block;
  font-size: 1.8em;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.lp_effect_sec_ttl .ttl{
  font-size: 2.9em;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--c-lp-pink);
}
.under_boder{
  position: relative;
}
.under_boder::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}
.lp_effect_sec_desc{
  font-size: 1.6em;
  letter-spacing: 0.05em;
  line-height: 1.9;
  padding: 1em 0;
}
.marker{
  position: relative;
}
.marker::before{
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  display: block;
  /* width: 100%; */
  height: .45em;
  background-color: var(--c-lp-pink);
  opacity: .6;
  z-index: -1;

  transition: width .5s;
  width: 0;
}
.on.marker::before,
.on .marker::before{
  width: 100%;
  transition-delay: .5s;
}
.lp_effect_sec_desc .marker:first-of-type::before{
  transition-delay: .3s;
}
.lp_effect_sec_desc .marker:nth-of-type(2)::before{
  transition-delay: .6s;
}
.lp_effect_sec_desc .marker:last-of-type::before{
  transition-delay: .9s;
}

/* EFFECT NOTE ==============*/
.lp_effect_note_block{
  width: 95%;
  background-image: url(/lp/imgs/effect_note_bg.jpg);
  background-repeat: repeat-y;
  background-size: 100%;
  border-radius: 0 1.5em 1.5em 0;
  padding: 2em 1.5em 2em 3em;
  filter: drop-shadow(.5em .5em .5em rgba(182, 190, 192, 0.9));
  margin-top: 1.5em;
  position: relative;
  z-index: 30;
}

.lp_effect_list{
  padding: 1em 0;
  background-image: linear-gradient( #ccc .1px, transparent .1em );
  background-size: auto 2rem;
  background-repeat: repeat-y;
}

.lp_effect_note_ttl{
  font-size: 1.6em;
  line-height: 1.3;
  transform: rotateZ(-3deg);
  margin: 0 0 1em;
}
.lp_effect_note_ttl .ttl{
  display: block;
  width: fit-content;
  font-size: 2.8em;
  margin-left: .4em;
}
.lp_effect_note_ttl .marker::before{
  background-color: #fff;
}
.lp_effect_note_ttl .small{
  font-size: .8em;
  margin-left: -.6em;
}
.lp_effect_note_ttl .pink{
  margin-left: -.6em;
}

.lp_effect_list_ttl{
  position: relative;
  z-index: 1;
  font-size: 2.1em;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--c-white);
}
.back_line{
  position: relative;
  width: fit-content;
  padding: 0 .4em;
  margin: 0 0 .15em;
  display: block;
}
.back_line::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--c-lp-pink);
  z-index: -1;
}
.back_line.fadeCoverRight::before{
  background: linear-gradient(90deg, rgb(226 203 203) 20%, rgb(200 219 225) 100%);
}

.lp_effect_list_desc{
  width: fit-content;
  font-size: 1.3em;
  line-height: 1.6;
  padding: 1.5em 1em 1em;
  /* margin-left: 0.6em; */
  margin-top: -1em;
  background-color: var(--c-white);
  filter: drop-shadow(.2em .2em .3em rgba(207, 189, 196, 0.88));
}
.under_wave{
  position: relative;
}
.under_wave::before{
  content: "";
  position: absolute;
  bottom: -.2em;
  left: 0;
  display: block;
  width: 100%;
  height: .22em;
  /* background-color: currentColor; */
  background-image: url(/lp/imgs/wave_line_pink.svg);
  background-repeat: repeat-x;
  background-size: auto;
  border-radius: .2em;
  opacity: .6;
  z-index: -1;
}

.lp_effect_list_box{
  position: relative;
  margin: 2em 0;
}
.lp_effect_list_box:not(:last-child){
  margin-bottom: 4em;
}
.lp_effect_list_box:nth-child(odd){
  text-align: right;
}
.lp_effect_list_box:nth-child(odd) .back_line{
  margin-left: auto;
}  
.lp_effect_list_box:nth-child(odd) .lp_effect_list_desc{
  margin-left: auto;
  margin-right: -.3em;
}
.lp_effect_list_num{
  position: absolute;
  display: inline-block;
  width: 5rem;
  z-index: 10;
}
.lp_effect_list_img{
  position: absolute;
  bottom: 1rem;
  width: 10em;
  z-index: 5;
}
.lp_effect_list_box._01{
  padding-bottom: 4.5em;
}
._01 .lp_effect_list_num{
  top: -.5em;
  left: 7.5em;
}
._01 .lp_effect_list_img{
  width: 11em;
  left: -1em;
  bottom: -2rem;
}
._01 .lp_effect_list_img._b {
  width: 9em;
  left: 9em;
  bottom: -2.5em;
}
.lp_effect_list_box._02{
  padding-top: 1.5em;
  padding-bottom: 3em;
}
._02 .lp_effect_list_num{
  top: 1em;
  right: 7.5em;
}
._02 .lp_effect_list_img{
  width: 13.5em;
  bottom: -2em;
  right: -2.2em;
}
.lp_effect_list_box._03{
  padding-bottom: 2.5em;
}
._03 .lp_effect_list_num{
  top: -.5em;
  left: 3.2em;
}
._03 .lp_effect_list_img{
  width: 13em;
  left: -1.2em;
}
._03 .a_swing{
  transform-origin: center;
  animation-delay: 2.5s;
}

.a_swing{
  animation: anime_swing 2s infinite alternate;
  transform-origin: center bottom;
}
@keyframes anime_swing {
	0% {	transform: translate(0, 0);}
	/* 5% {	transform: translate(-.2em, -0) rotateZ(3deg);} */
	7% {	transform: translate(.2em, 0) rotateZ(3deg);}
	14% {	transform: translate(0, 0);}
	100% {	transform: translate(0, 0);}
}

.a_swing_b{
  animation: a_swing_b 3s infinite alternate;
}
@keyframes a_swing_b {
	0% {	transform: translate(0, 0);}
	5% {	transform: translate(0, -.4em) ;}
	/* 10% {	transform: translate(.1em, 1em) rotateZ(-1deg);} */
	10% {	transform: translate(0, 0);}
	100% {	transform: translate(0, 0);}
}


/* USER VOICE 
========================================= */
.lp_user_sec{
  position: relative;
  z-index: 20;
}

.lp_user_sec_inner{
  position: relative;
  padding: 4em 0;
  z-index: 1;
}

.lp_user_sec_inner::before{
  background-image: url(/lp/imgs/user_bg_texture.jpg);
  background-size: 100%;
  background-repeat: repeat;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* height: calc(100% - 5em); */
}
/* .lp_user_sec_bottom::after{
  content: "";
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 150/59;
  background-image: url(/lp/imgs/user_bg_texture.jpg);
  background-size: 100%;
  background-repeat: repeat;
  mask-image: url(/lp/imgs/user_curb_bottom.svg);
  z-index: -1;
  margin-top: -5em;
} */
.user_slider_wrap{
  padding: 3em 0;
  background-color: var(--c-white);
  border-radius: 70% 70% 70% 70% / 20% 20% 20% 20%;
  filter: drop-shadow(.5em .5em .5em rgba(182, 190, 192, 0.9));
}
#lp_user_list_slider{
  opacity: 0;
  height: 52rem;
  transition: opacity .5s;
}
#lp_user_list_slider.slick-initialized{
  height: inherit;
  opacity: 1;
}
.lp_user_list_box_inner{
  position: relative;
  z-index: 1;
  padding: 1em 5em 2em;
}
.lp_user_list_box_inner::before{
  content: "";
  display: block;
  width: 26em;
  aspect-ratio: 1/1;
  /* height: 24em; */
  background: radial-gradient(circle, rgb(206, 210, 209) 0%, rgba(250,250,250,1) 70%, rgba(250,250,250,1) 100%);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
  filter: blur(2em);
  opacity: .5;
}
.lp_user_img{
  position: relative;
  z-index: 1;
  width: 17em;
  height: fit-content;
  aspect-ratio: 1 / 1;
  margin: 0 auto ;
}

.lp_user_ttl{
  font-size: 2.1em;
  letter-spacing: .01em;
  text-align: center;
}
.block_line{
  position: relative;
  display: block;
  margin-bottom: 0.2em;
  background-color: #fff;
  border: 1px solid var(--c-grey);
}
.block_line::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  display: block;
  width: 100%;
  height: 1.45em;
  background-color: var(--c-lp-pink);
  opacity: .6;
  z-index: -1;
}

.lp_user_name{
  font-size: 1.1em;
  text-align: center;
}
.lp_user_desc{
  font-size: 1.2em;
  line-height: 1.8;
  letter-spacing: .05em;
  padding: 1em 0;
}
#lp_user_list_slider .slick-dots li {
  width: 1.5em;
  height: 1.5em;
  margin: 0;
}
#lp_user_list_slider .slick-dots {
  bottom: 0;
}
#lp_user_list_slider .slick-dots li.slick-active button:before,
#lp_user_list_slider .slick-dots li button:before{
  color: var(--c-lp-pink);
}
#lp_user_list_slider .slick-prev,
#lp_user_list_slider .slick-next{
  top: 40%;
  width: 2rem;
  height: 2rem;
  z-index: 100;
  color: var(--c-lp-pink);
  border-bottom: 2px solid ;
}
#lp_user_list_slider .slick-prev {
  left: 1.5rem;
  border-left: 2px solid ;
  transform: rotateZ(45deg) skew(10deg, 10deg);
}
#lp_user_list_slider .slick-next {
  right: 1.5rem;
  border-right: 2px solid ;
  transform: rotateZ(-45deg) skew(-10deg, -10deg);
}
#lp_user_list_slider .slick-prev:before, 
#lp_user_list_slider .slick-next:before{
  content: "";
  color: #000;
}


/* FEATRUE
========================================= */
.feature_sec{
  position: relative;
  display: block;
  z-index: 0;
  padding: 16.6rem 0 18rem;
  margin-top: -6em;
  margin-bottom: -1px;
}
.feature_sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #e9e6e6;
  background: linear-gradient(155deg,rgb(215, 224, 227) 0%,rgb(240, 216, 216) 15%,rgb(215, 224, 227) 45%,rgb(240, 216, 216)  57%,rgb(240, 216, 216)  65%,rgb(215, 224, 227) 70%,rgb(240, 216, 216) 90%,rgb(240, 216, 216) 100%);
  z-index: -20;
}
.feature_sec::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(/lp/imgs/noise.jpg);
  opacity: .6;
  z-index: -10;
  mix-blend-mode: overlay;
}
.feature_bg_spacer{
  content: "";
  position: absolute;
  top: -5em;
  left: 0;
  display: block;
  width: 100%;
  height: 5rem;
  background-color: var(--c-white);
}
.feature_sec_inner::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 289/150;
  background-color: var(--c-white);
  mask-image: url(/lp/imgs/feature_cover_top.svg);
  mask-repeat: no-repeat;
}
.feature_sec_inner::after{
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 180;
  background-color: #f5f5f5;
  mask-image: url(/lp/imgs/feature_cover_bottom.svg);
}

.feature_sec_ttl{
  width: 84%;
  mix-blend-mode: multiply;
  padding: 1em 0;
  margin: -3.5em auto 0;
}

.feature_list_box{
  position: relative;
  padding: 5em 0;
}
.feature_list_box::before{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .9;
  filter: drop-shadow(0 .4em .2em rgba(207, 189, 196, 0.85) );
}
.feature_img{
  height: 26rem;
}
.feature_img img{
  height: 100%;
  width: auto;
}
/* .feature_img{
  filter: blur(1em);
  transition: filter .4s;
} */

.feature_list_num{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.7em;
  height: 1.7em;
  aspect-ratio: 1/1;
  font-size: 2.2em;
  font-weight: 400;
  color: var(--c-lp-pink);
  border: 1px solid currentColor;
  border-radius: 50%;
  mix-blend-mode: multiply;
  opacity: .5;
}
.feature_list_num .txt {
  margin-top: -.15em;
}
.feature_list_desc{
  position: absolute;
  font-size: 1.5em;
  letter-spacing: 0.04em;
}

.feature_list_ttl{
  position: absolute;
  font-size: 3.2em;
  font-weight: 500;
  line-height: 1.2;
  z-index: 10;
}
.feature_list_ttl .back_line {
  padding: 0 .2em;
}
.feature_list_ttl .back_line::after {
  background: linear-gradient(90deg, rgb(226 203 203) 20%, rgb(200 219 225) 100%);
  z-index: -1;
  opacity: .8;
  /* mix-blend-mode: multiply; */
}

.feature_list_en {
  position: absolute;
  font-size: 3.6em;
  width: fit-content;
  line-height: .9;
  color: transparent;
  background: linear-gradient(60deg, rgb(226 203 203) 0%, rgb(200 219 225) 100%);
  mix-blend-mode: multiply;
  opacity: .5;
  background-clip: text;
  -webkit-background-clip: text;
}

.feature_list_box._01{
  padding-bottom: 7em;
}
.feature_list_box._01::before{
  top: 1rem;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 530;
  background-color: var(--c-white);
  mask-image: url(/lp/imgs/feature_cover_list_box_.svg);
  background-size: 100%;
}
._01 .feature_img{
  position: relative;
  width: fit-content;
  margin-left: auto;
}
._01 .feature_img::before{
  content: "";
  position: absolute;
  bottom: -3rem;
  left: 0;
  display: block;
  width: 90%;
  height: 4em;
  background: linear-gradient(60deg, rgb(226 203 203) 30%, rgb(200 219 225) 100%);
}
._01 .feature_list_num{
  top: 1rem;
  left: 1rem;
}
._01 .feature_list_ttl{
  font-size: 3.7em;
  top: 11.8rem;
  left: 1rem;
}
._01 .feature_list_ttl .back_line:nth-child(2){
  margin-left: 1rem;
  letter-spacing: -.1em;
}
._01 .feature_list_desc{
  top: 6.5rem;
  left: 1rem;
}
._01 .feature_list_en{
  bottom: -1rem;
  left: 3rem;
}

.feature_list_box._02{
  margin-top: 6em;
  margin-bottom: 4em;
}
.feature_list_box._02::before{
 display: none;
}
._02 .feature_list_num{
  top: 1rem;
  right: 3rem;
}
._02 .feature_list_ttl{
  bottom: 1.5rem;
  right: .5em;
}
._02 .feature_list_ttl .back_line{
  margin-left: auto;
}
._02 .feature_list_desc{
  /* writing-mode: vertical-rl; */
  top: 10.5rem;
  right: 3rem;
}
._02 .feature_list_en{
  top: 3rem;
  left: 10rem;
}

.feature_list_box._03{
  padding: 7em 0;
}
.feature_list_box._03::before{
  width: 140%;
  height: 135%;
  bottom: -4rem;
  left: -8em;
  border-radius: 34% 66% 52% 48% / 61% 54% 46% 39%;
  background-color: var(--c-white);
}
._03 .feature_img{
  width: fit-content;
  margin-left: auto;
  margin-right: 1.5rem;
}
._03 .feature_list_num{
  top: 2rem;
  right: 5rem;
}
._03 .feature_list_ttl{
  font-size: 3.8em;
  bottom: .5rem;
  left: .5em;
}
._03 .feature_list_ttl .back_line:nth-child(2){
  margin-left: 6rem;
}
._03 .feature_list_desc{
  /* writing-mode: vertical-rl; */
  top: 24rem;
  left: 3rem;
}
._03 .feature_list_en{
  top: 3rem;
  left: 2rem;
}


/* REASON 
========================================= */
.reason_sec{
  background-color: #f5f5f5;
  position: relative;
  z-index: 2;
  margin-bottom: 10em;
}
.reason_sec_ttl {
  width: 25rem;
  margin: 0 auto 1em;
}

.reason_inner_block{
  position: relative;
  margin-top: 10em;
}
.reason_inner_block::before{
  content: "";
  position: absolute;
  left: 0;
  /* top: -7.4rem; */
  bottom: 100%;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 74;
  background-image: url(/lp/imgs/lp_effect_curb_top.svg);
  z-index: 0;
  filter: drop-shadow(0 -.5em .3em rgba(235, 233, 234, 0.9) );
  margin-bottom: -1px;
}
.reason_inner_block::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: calc(100% + 8em);
  background-color: var(--c-white);
  border-radius: 0 0 90% 90% / 0 0 15% 15% ;
  z-index: 0;
  filter: drop-shadow(0 .5em .3em rgba(225, 218, 221, 0.9) );
}
.reason_list{
  position: relative;
  z-index: 2;
}
.reason_list_box{
  position: relative;
  padding: 2em 0 4em;
}
.reason_list_box:last-child{
  padding-bottom: 0;
}
.reason_img{
  aspect-ratio: 360 / 157;
  width: calc( 100% + 1.5em);
  margin-left: .5em;
}
.reason_list_num{
  position: absolute;
  top: -2em;
  right: -2em;
  color: var(--c-lp-pink);
  font-size: 1rem;
  line-height: 1;
  mix-blend-mode: multiply;
}
.reason_list_num .num{
  display: block;
  font-size: 6em;
  font-weight: 500;
  top: -2em;
}
.reason_list_num .txt{
  position: absolute;
  display: block;
  font-weight: 100;
  font-size: 1.8em;
  writing-mode: vertical-rl;
  padding-top: 1rem;
  /* right: 0; */
}
.reason_list_box:nth-child(odd) .reason_img{
  margin-left: -2em;
}
.reason_list_box:nth-child(odd) .reason_list_num{
  right: -2em;
}
.reason_list_box:nth-child(odd) .reason_list_num .txt{
  right: 0;
}
.reason_list_box:nth-child(odd) .reason_detail {
  padding-right: 1.5em;
}
.reason_list_box:nth-child(even) .reason_list_num{
  left: -2em;
}
.reason_list_box:nth-child(even) .reason_list_num .txt{
  padding-left: .8rem;
}
.reason_list_box:nth-child(even) .reason_detail {
  padding-left: 1.5em;
}
.reason_detail{
  position: relative;
}
.reason_detail::before{
  content:"";
  position: absolute;
  bottom: 0;
  right: -.8rem;
  width: 1px;
  height: calc(100% + 4em);
  display: block;
  background-color: var(--c-blue);
  z-index: 9;
}
.reason_detail::after{
  content:"";
  position: absolute;
  bottom: 0;
  right: -.8rem;
  width: 1px;
  height: calc(100% + 4em);
  display: block;
  background-color: var(--c-lp-pink);
  z-index: 10;

  animation: reason_bar_anime 3s ease-out 2s infinite forwards ;
  transform: scaleY(0);
  transform-origin: top;
}
.reason_list_box:nth-child(even) .reason_detail:before,
.reason_list_box:nth-child(even) .reason_detail:after{
  right: calc(100% + .8rem);
}
@keyframes reason_bar_anime{
0% { transform: scaleY(0); transform-origin: top; }
30% { transform: scaleY(100%); transform-origin: top; }
70% { transform: scaleY(100%); transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}

.reason_list_ttl{
  font-size: 1rem;
  color: var(--c-lp-pink);
  padding: 1em 0;
  line-height: 1.3;
}
.reason_list_ttl .ttl{
  display: block;
  font-size: 2em;
  font-weight: 600;
  white-space: nowrap;
}
.reason_list_ttl .sub{
  display: block;
  font-size: 1.6em;
  font-weight: 300;
  margin-top: 0.1em;
}
.reason_desc{
  font-size: 1.15em;
  line-height: 1.7;
}


/* TRIAL 
========================================= */
.trial_sec {
  /* padding-top: 10.4rem; */
  padding-bottom: 4em;
  /* margin-top: -3rem; */
  background: linear-gradient(175deg,#fafafa 0%,rgb(244, 233, 233) 30%,rgb(215, 224, 227) 60%,#fafafa 90%);

  position: relative;
  z-index: 1;
}
.trial_sec_inner{
  padding-top: 5em;
}

.trial_sec_ttl{
  font-size: 1rem;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 2em;
}
.trial_sec_ttl .sub{
  display: block;
  font-size: 1.8em;
  font-weight: 500;
}
.trial_sec_ttl .ttl{
  display: block;
  font-size: 3.4em;
  font-weight: 600;
  color: var(--c-lp-pink);
  filter: drop-shadow(0 .1em 0 rgba(255, 255, 255, 0.8) );
}
.trial_campaign_icon{
  position: relative;
  display: block;
  width: fit-content;
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  padding: .3em .9em .4em;
  margin: .5em auto;
}
.trial_campaign_icon::before,
.trial_campaign_icon::after{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}
.trial_campaign_icon::before{
  top: -.2em;
  right: -.2em;
  border-top: 1px solid;
  border-right: 1px solid;
}
.trial_campaign_icon::after{
  bottom: -.2em;
  left: -.2em;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

.trial_list {
  padding: .5em 0 1em ;
}
.trial_list_box{
  position: relative;
  background-color: var(--c-white);
  border-radius: .7em;
  text-align: center;
  padding: 2em;
  margin: 2em 0;
  filter: drop-shadow(0 .5em .5em rgba(227,185,185,.5) );
  filter: drop-shadow(0 .5em .3em rgba(225, 218, 221, 0.9) );
}
.trial_list_box:not(:last-child):after{
  content: "";
  position: absolute;
  bottom: -3.5rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 1px;
  height: 5rem;
  background-color: var(--c-blue);
  animation: trial_bar_anime 3s ease-out 1s infinite forwards ;
  transform: scaleY(0)
}
@keyframes trial_bar_anime{
  0% { transform: scaleY(0); transform-origin: top;}
  10% { transform: scaleY(100%); transform-origin: top; }
  90% { transform: scaleY(100%); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
  
.trial_img{
  position: absolute;
  width: 3em;
}
._01 .trial_img{
  right: -1.2rem;
  top: -3.6rem;
  width: 8.5em;
  transform: rotateZ(3deg);
}
._02 .trial_img{
  left: -1rem;
  top: 10rem;
  width: 6em;

  transform: rotateZ(-18deg);
}
._03 .trial_img{
  right: .5rem;
  top: -2.5rem;
  width: 9em;
}
._04 .trial_img{
  left: 2rem;
  top: -1rem;
  width: 4.5em;

  transform: rotateZ(-25deg);
}
.trial_list_num{
  font-size: 1.4em;
  color: var(--c-lp-pink);
  margin: .5em 0;
}
.trial_list_num .num{
  font-weight: 500;
  margin-left: .2em;
}
.trial_list_ttl{
  font-size: 2.5em;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  padding-bottom: 0.2em;
}
.trial_desc{
  font-size: 1.2em;
  padding: 1em 0;
  line-height: 1.7;
}
.trial_btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 1.8em;
  font-weight: 600;
  height: 3.5em;
  border-radius: .1em;
  margin: .5em 0;
}
.trial_btn._web {
  background-color: var(--c-lp-pink);
  color: #fff;
}
.trial_btn._tel {
  background-color: #fff;
  color: var(--c-lp-pink);
  border: 1px solid ;
}

/* 準備・必要 =============*/
.trial_item_block{
  padding: 1.5em 0;
  margin: 1em 0;
  border-top: 1px solid var(--c-grey) ;
  border-bottom: 1px solid var(--c-grey) ;
}
.trial_item_block_ttl{
  font-size: 1.6em;
  margin-bottom: 1em;
}
.need{
  border: solid 1px var(--c-grey);
}
.need_item{
  width: fit-content;
  font-size: 1.4rem;
  margin: 0 auto;
}
.need_item_li{
  padding: .2em 0 .2em 3rem;
  position: relative;
  margin: .7em 0;
  letter-spacing: .05em;
  text-align: left;
  width: fit-content;
}
.need_item_li::before{
  content: "";
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  background: url(https://www.noapilates.jp/imgs/icon_checkbox.svg) no-repeat center;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  left: 0;
}
/* .need_item li:not([class]){
  letter-spacing: 0.03em;
  margin-bottom: 1em;
  text-align: left;
} */
.need_item_li:last-child{
  margin-bottom: 0;
}
.trial_rental_banner{
  margin: .5em 0;
}


/* BEGINNER TRIAL 
================================================ */
.beg_trial_block{
  position: relative;
  display: block;
  padding: 3.5em 2em;
  background-color: var(--c-beg-blue3);
  color: var(--c-white);
  background-image: url(/lp/imgs/lp_key_img_01.jpg);
  background-position: top -1em center;
  background-size: cover;
  margin-bottom: 4em;
}
.beg_trial_block::before,
.beg_trial_block::after{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  transition: opacity .5s;
}
.beg_trial_block::before{
  background-color: var(--c-lp-pink2);
  mix-blend-mode: screen;
}
.beg_trial_block::after{
  /* background-color: var(--c-lp-pink); */
  background: linear-gradient(-65deg, #e39ba2 0%, #cd7487 90%);
  mix-blend-mode: multiply;
}
.beg_trial_block .arrow_circle_img {
  filter: var(--filter-w);
}
.beg_trial_block_inner{
  position: relative;
  z-index: 1;
}
.beg_trial_ttl{
  font-size: 3em;
  line-height: 1;
  margin-bottom: .9em;
}
.beg_trial_copy {
  font-size: 3.6em;
  font-weight: 600;
  line-height: 1.45;
}
.beg_trial_desc{
  font-size: 1.3em;
  font-weight: 500;
  padding: .7em 0;
  margin-bottom: .2em;
}


/* Q&A 
========================================= */
/* .lp_qa_sec {
  filter: brightness(1.2);
} */
.lp_qa_sec {
  padding: 3em 0 0;
}

.accordion-001/* :not([open]) */ {
  padding: .5rem 0;
}

.accordion-001 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--c-black);
  border-bottom: 1px solid var(--c-grey);
  padding: 1rem 0;
  margin-bottom: 1em;
}
.accordion-001 summary::-webkit-details-marker {
    display: none;
}
.accordion-001 summary i {
  font-size: 1.4em;
  color: var(--c-lp-pink);
  transition: transform .2s;
}
.accordion-001 p{
  font-size: 1.15em;
  line-height: 1.8;
  opacity: 0;
  margin: 0 0 1em;
  padding: 1em 1.1em;
  background-color: #fff;
  border-radius: 1em;
  transform: translateY(-10px);
  transition: transform .5s, opacity .5s;
}
.accordion-001 .fadeCoverRight::before{
  background-color: var(--c-white)
}

.accordion-001[open] summary {
  color: var(--c-lp-pink);
  border-color: var(--c-lp-pink);
}
.accordion-001[open] summary i{
  transform: rotateZ(135deg);
  color: var(--c-grey2);
}
.accordion-001[open] p {
  transform: translateY(0);
  opacity: 1;
  transition: transform .5s, opacity .5s;
}



/* TOP - STUDIO
========================================= */
.sec_top_studio{
  margin-bottom: var(--inn-w);
}
/* SLICK */
.top_studio_slider_block{
  position: relative;
  margin-bottom: 3em;
  width: 100%;
}

.top_studio_img_box{
  position: relative;
  overflow: hidden;
}
.top_studio_img_box::before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 67%;
}
.top_studio_img{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform .5s ease ,opacity .5s ease;
}
.top_studio_slider_li:hover .top_studio_img{
  transform: scale(1.08);
}
.st_new_open{
  position: absolute;
  bottom: -1.6em;
  right: 0.6em;
  z-index: 999;
  width: 90px;
  height: 90px;
  font-size: 1.2rem;
  /* font-weight: 400; */
  line-height: 1.1;
  text-align: center;
  /* padding: 2.1em 0; */
  /* background-color: var(--c-red); */
  border-radius: 10em;
  color: var(--c-white);
  background: linear-gradient(-80deg, #f2d4ce, #cf9f9f);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
 
  @media screen and (min-width: 769px) {
    font-size: 1.4rem;
  }
  @media screen and (min-width: 1200px) {
    width: 110px;
    height: 110px;
  }
}
.st_new_open .ja{
  font-size: .85em;
}
.top_studio_img_warp{
  position: relative;
}

/* .st_new_open{
  display: none;
} */

.top_studio_ttl{
  font-size: 1rem;
  /* padding: 2em 2em 2.2em; */
  /* opacity: 0;
  transition: opacity .8s; */
}

.top_studio_ttl .en{
  font-size: 2.4em;
  line-height: 1.1;
/*font-family: var(--font-comp);*/
	font-weight: 400;
}
.top_studio_ttl .ja{
  font-size: 1.2em;
  display: block;
}
/* .slick-active .top_studio_ttl{
  opacity: 1;
} */

.top_studio_nav_block{
  display: flex;
  flex-wrap: wrap;
  padding: 1.5em 0;
}
.top_studio_nav_li{
  font-size: 1.2em;
  font-weight: 500;
  padding: .3em 0;
  margin-right: .8em;
  color: var(--c-black3);
}
.top_studio_nav_li.active{
  color: var(--c-white);
}
.top_studio_nav_li .ja{
  display: none;
}
.pro_bar_box{
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  background-color: rgba(180, 180, 180, 1);
  bottom: 8.5em;
}
.pro_bar{
  position: absolute;
  display: block;
  background-color: #fff;
  opacity: .9;
  transition: width .5s ease;
  height: 100%;
  width: 0;
}

/* SLICK ARROW DOTS CUSTOM */
.top_studio_slider .slick-prev,
.top_studio_slider .slick-next{
  top: 38%;
  z-index: 10;
  width: 4rem;
  height: 4rem;
  filter: var(--filter-w);
  transition: filter .5s;
}
.top_studio_slider .slick-prev:hover,
.top_studio_slider .slick-next:hover{
  filter: var(--filter-red);
}
.top_studio_slider .slick-prev::before,
.top_studio_slider .slick-next::before{
  content: '';
}
.top_studio_slider .slick-prev{
  left: 1rem;
  background-image: url(/imgs/top_studio_slick_arrow_left.svg);
}
.top_studio_slider .slick-next{
  right: 1rem;
  background-image: url(/imgs/top_studio_slick_arrow_right.svg);
}
.top_studio_slider .slick-dots{
  padding: 0 var(--inn-w);
  text-align: left;
  top: 100%;
}
.top_studio_slider .slick-dots li{
  width: fit-content;
  height: fit-content;
  margin: 0 1em 0 0;
}
.top_studio_slider .slick-dots li button{
  width: fit-content;
  height: fit-content;
  padding: 0;
}
.slick-dots li button:before{
  opacity: .4;
}
.slick-dots li.slick-active button:before,
.slick-dots li.slick-active button:after{
  opacity: .85;
}
.top_studio_slider .slick-dots li button:before{
  width: fit-content;
  height: fit-content;
  display: block;
  position: inherit;
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--c-white);
  padding: .4em 0;
}
.top_studio_slider .slick-dots li:first-child button:before{content: 'KICHIJOJI ANNEX';}
.top_studio_slider .slick-dots li:nth-child(2) button:before{content: 'NAKANO';}
.top_studio_slider .slick-dots li:nth-child(3) button:before{content: 'IKEBUKURO';}
.top_studio_slider .slick-dots li:nth-child(4) button:before{content: 'TORITSUDAI';}
.top_studio_slider .slick-dots li:nth-child(5) button:before{content: 'SHINJUKU';}
.top_studio_slider .slick-dots li:nth-child(6) button:before{content: 'SHINJUKU ANNEX';}
.top_studio_slider .slick-dots li:nth-child(7) button:before{content: 'AKIHABARA';}
.top_studio_slider .slick-dots li:nth-child(8) button:before{content: 'NAKAMEGURO';}
.top_studio_slider .slick-dots li:nth-child(9) button:before{content: 'KOMAZAWA';}
.top_studio_slider .slick-dots li:nth-child(10) button:before{content: 'EBISU';}
.top_studio_slider .slick-dots li:nth-child(11) button:before{content: 'GINZA';}
.top_studio_slider .slick-dots li:nth-child(12) button:before{content: 'KICHIJOJI';}
.top_studio_slider .slick-dots li:nth-child(13) button:before{content: 'AKASAKA';}
.top_studio_slider .slick-dots li:nth-child(14) button:before{content: 'HARAJUKU';}
.top_studio_slider .slick-dots li:nth-child(15) button:before{content: 'OCHANOMIZU';}

.women-navi{
  display: inline-block;
  /* background-color: var(--c-pink); */
  font-size: .9rem;
  font-weight: 500;
  padding: .8em .8em 1em;
  line-height: 0;
  letter-spacing: .1em;
  border-radius: 1.2em;
  border: 1px solid var(--c-pink);
  transform: scale(.85);
  transform-origin: top center;
  margin-left: 0.2em;
  color: var(--c-pink);
}

/* STUDIO SLIDER SP解除用  */
@media (max-width: 768px) {
  .top_studio_slider{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* padding:  0 2em; */
    color: #fff;
  }
  .top_studio_slider_li{
    position: relative;
    width: calc(50% - .5px);
    margin-bottom: 1px;
  }
  .top_studio_img_box{
    aspect-ratio: 3 / 1.9;
  }
  .top_studio_img{
    margin: 0;
    height: 100%;
  }
  .top_studio_img_box::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding-top: initial;
    background-color: #000;
    background: linear-gradient(-20deg, rgba(0, 0, 0, .7) 0%,rgba(0, 0, 0, .3) 30%,rgba(0, 0, 0, .5) 70%, rgba(0, 0, 0, 1) 100%);
    opacity: .9;
    mix-blend-mode: multiply;
  }
  .top_studio_detail_box{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: .8em ;
    pointer-events: none;
  }
  .top_studio_ttl .en {
    font-size: 2em;
    font-weight: 400;
  }
  .top_studio_ttl .ja {
    font-size: 1em;
  }
  .sec_top_studio .link_circle_arrow{
    margin-left: auto;
  }
  .st_new_open{
    top: .5em;
    transform: scale(.6);
    transform-origin: top right;
  }
}/*  */

.top_studio_ttl .ja {
  position: relative;
  display: block;
  width: fit-content;
  font-weight: 500;
  padding-right: 1.3em;
  padding-top: .1em;
}
.top_studio_ttl .ja::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: .17em;
  display: block;
  width: 1.1em;
  height: 1.1em;
  mask-image: url(/imgs/icon_map.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  /* filter: var(--filter-w); */
  background-color: currentColor;
  letter-spacing: .1em;
}
.studio_anchor_box {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  /* flex-direction: column; */
  align-items: flex-end;
  padding-right: .8em;
  padding-bottom: .6em;
}
.studio_anchor {
  position: relative;
  display: block;
  pointer-events: visible;
  width: fit-content;
  font-size: 1em;
  font-weight: 500;
  padding: .1em 2.2em .1em .7em;
  margin-bottom: .1em;
}
.studio_anchor::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: .2em;
  margin: auto;
  display: block;
  width: 1.9em;
  height: 1em;
  background-image: url(/imgs/icon_arrow_right_b.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: var(--filter-w);
}
.top_studio_detail_box .women-navi {
  position: absolute;
  display: block;
  left: .3em;
  bottom: .8em;
  width: max-content;
  font-size: .4em;
  margin: 0;
  background-color: var(--c-pink);
  color: #fff;
  padding: .7em;
  /* border: none; */
}




/* FOOTER
========================================= */
.n_footer {
  position: relative;
  color: #fff;
  font-size: clamp(10px,1rem,12px);
  padding: 4em 0 10em;
  /* min-height: 600px; */
}
.n_footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #debfbf;
  mix-blend-mode: multiply;
}
.n_foot_logo{
  a{
    width: 85%;
    margin: 1em auto 1.2em;
    display: block;
  }
}
.n_foot_logo_img{
  filter: var(--filter-w);
}

.footer_sns{
  display: flex;
  justify-content: center;
  margin: 0 auto 1em;

  i{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    padding: .7em .5em;
    color: var(--c-white);
  }

}
.n_foot-lede-desc{
  padding: 4em 0 0;
  line-height: 1.8;
  color: #fff;
}
.n_copyright {
  padding: 4em 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--c-pink2);
}
.tiktok_icon{
  position: relative;
  filter: var(--filter-w);
  /* width: 4.5rem; */
  /* height: 6rem; */
  padding-bottom: 0.76em !important;
}
.tiktok_icon img{
  width: 2rem;
  height: auto;
  max-width: 23px;
}



/* Campaign top ================================ */
.cam_btn_banner {
    display: block;
    padding: 1em 0;
}

.campaign_inner {
    padding: 0 1.2em;
}