@charset "utf-8";
/*--基本--*/
:root{
	--font-size:16px;
	--max-width:1200px;
	--color: #333;/*文字色*/
	--color-hover: #FF3F8A;/*マウスオーバー時の文字色・色を変えない場合は「color」と同値にする*/
  --lang-active: #FF3F8A;
	--background: #fff;/*背景*/
  --spec-border: #ff899f;
  --btn:#E01A6E;/*ボタンの色*/
  --btn-hover:#fff;/*ボタンの色:hover*/
  --btn-color:#fff;/*ボタンの文字色*/
  --btn-color-hover:#E01A6E;/*ボタンの文字色:hover*/
  --btn-max-w:600px;/*ボタンの最大幅*/
  --border-radiue:0;/*ボタンの角R。角Rにしない時は0・可愛くしたい時は100*/
  --slider-btn: #000;/*スライダー矢印*/
  --slider-page: #000;/*スライダーページネーション*/
}



.swiper-slide a,
.swiper-slide .no_img,
.no_img,
a.no_img {
  -webkit-touch-callout: none;
  -moz-touch-callout: none;
  touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}


a.btn {position: relative; width: 100%; border-radius: 10px; overflow: hidden; line-height: 1.2;padding: 1em; border: 1px solid #E01A6E; padding: 1em 2.2em;}

/*------
 
------*/
body{position: relative;}
/*------
 hero
------*/
#hero{position: fixed; width: 100% ; height: 100vh; top: 0; left: 0;background: url(../images/bg.jpg) no-repeat; background-size: 90% auto; background-position: calc(50% - 40px) 50% ;  }
#hero .name{position: absolute; left: 0; top: 50%; z-index: 1;color: #fff; font-weight: 700;font-size: 6.75vw; line-height: 1; transform: translateY(-50%); text-align: center; opacity: .8;}
#hero .img_area{position: sticky; width: calc(87% - 480px); display: block;/* margin-top: 10px;  */top:0;z-index: 10; height: 100vh;height: 100vh;}
#hero .img_area_sp{display: none;}
#hero .text_area{position: absolute; left: 2%; bottom: 15em;z-index: 20;font-weight: 900;z-index: 100;}
#hero .text_area h1{line-height: 1.1;font-size: 5vw; margin-top: .2em;font-weight: 200;font-style: normal; text-shadow: 0 0 10px rgba(255, 255, 255),0 0 10px rgba(255, 255, 255);-webkit-text-stroke: 2px rgb(255, 255, 255);text-stroke: 2px rgb(255, 255, 255);paint-order: stroke;}
#hero .text_area h1.en{font-size: 4vw;}
#hero .text_area .small{font-size: .5em;}
#hero .text_area a.btn{margin-top: 1.5em;box-shadow: 0 0 10px #fff;}
#hero a.btn {position: absolute; bottom: 1em; left: 5%; max-width: 400px;padding: .6em 2.5em .6em 2em; width: 90%; font-weight: bold; }
.menu_area{position: absolute; bottom: 0; right: 0; width: 80px; height: 100%; background: #333; padding: 0.8%; align-items: center; flex-direction: column; justify-content: center;}
.menu_area .inner {flex-direction: column; justify-content: center; align-items: center;}
.menu_cnt_sp{display: none;}

.pc_sidemenu{width: 13%; height: 100vh; position: absolute; right: 0; top: 0; padding: 10px; font-weight: 600;z-index: 5;}
.pc_sidemenu ul{padding-left: 2.5em;}
.pc_sidemenu ul li{margin-top: .8em;word-break: break-all;}
.nav-link{position: relative;}
.nav-link:hover{text-decoration: none;}
.nav-link::before {content: "";margin-right: 0;/* opacity: 0; */transition: opacity 0.3s, margin-right 0.3s;}
.nav-link.active::before {content: "";background-image: url(../images/icon_nav.svg); background-repeat: no-repeat; background-size: contain; opacity: 1;position: absolute;top: -.2em;left: -2.3em;width: 12em; height: 1.8em; display: block;}

#changeimg_pc {
  position: absolute;
  top: 20px;
  width: 100%;
  height: 100%;
}

#changeimg_pc .frame {
  position: relative; 
  width: 100%;
  height: 100%;
}
#changeimg_pc .frame img {
  position: absolute; 
  inset: 0;
  right: 0;
  left: auto;
  width: auto;
  height: calc(100% - 20px);
  opacity: 0;
  transition: opacity 0.5s ease;
  min-height: 700px;
}
#changeimg_pc .changeimg_toggle:not(:checked) ~ .frame .pic1,
#changeimg_pc .changeimg_toggle:checked ~ .frame .pic2 {opacity: 1;}
#changeimg_pc label {
    position: absolute;
    bottom: calc(70% - 100px);
    right: 10%;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(../images/change.png) 50% 50% no-repeat #E01A6E;
    background-size: 80% auto;
    width: 100px;
    height: 100px;
    z-index: 100;
    border-radius: 50%;
    border: 4px solid #fff;
    overflow: hidden;
    transition: transform 0.5s ease, background-color 0.5s ease;
    will-change: transform;
    cursor: pointer;
    text-align: center;
}
#changeimg_pc label:hover {
    background-color: #333333;
    transform: rotate(45deg);
}
#changeimg_pc label span {
  color: #FFF;
  display: inline-block; /* transformを効かせるために必要 */
  transition: transform 0.5s ease;
}
#changeimg_pc label:hover span {
  transform: rotate(-45deg);
}
#changeimg_pc .changeimg_toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
#changeimg_sp {display: none;}
.bg_title {
  width: 80%;
  max-width: 956px;
  position: absolute;
  bottom: 20%;
  left: 10%;
}

@keyframes arrow {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-10px, -10px);
  }
  100% {
    transform: translate(0, 0);
  }
}


.language,
.share{font-weight: 700; font-size: .8em; flex-direction: column; justify-content: center;align-items: center; margin: 2em auto;}
.language .icon,
.share .icon{ width: 1.5em; margin-bottom: 20px; }
.language{flex-direction: column;}
.language p,.share p{line-height: 1;}


.language ul{justify-content: center;gap: 10px;}
.language li{font-weight: 600;line-height: 1;}
.language a{color: #FFF; padding: .5em; border-radius: 100px;width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; line-height: 0;}
.language li.active a,
.language li a:hover{color: #E01A6E; text-decoration: none;}
.share ul{justify-content: center;gap: 20px; flex-direction: column;}
.share li{line-height: 0; width: 25px;}

.icon_x:hover { content: url('../images/commone/icon_x_p.svg');}
.icon_fb:hover { content: url('../images/commone/icon_facebook_p.svg');}
.icon_line:hover { content: url('../images/commone/icon_line_p.svg');}

/*header*/
header{position: absolute}
header p{max-width: 180px;width: 35%;}
header .logo{gap: 10px; margin-top: .5em; align-items: center;}

/*------
 main
------*/
main{max-width: 480px; width: 100%;position: relative; z-index: 4; background: #fff;margin-left: calc(87% - 480px);box-shadow: 0 0 10px #00000026;background: linear-gradient(to bottom,
    #FB1C6D 0      14.28%,
    #2589CA 14.28% 28.57%,
    #7153C2 28.57% 42.85%,
    #FEC3DC 42.85% 57.14%,
    #9FDE02 57.14% 71.42%,
    #FFCD78 71.42% 85.71%,
    #74F1ED 85.71% 100%);}
main p{margin-top: 1.5em;}
main h2{font-size: 2.5em; font-weight: 400;font-style: normal; line-height: 1.4; text-align:  center;}
main h2.ttl{line-height: 1.8;}
main h2.ttl span {margin-right: .2em;}
main h2.ttl span img{width:50px;}
main .inner p:first-of-type{margin-top: 0;}
main .inner .bg{padding: 2em 10% 0;}
#main_wrap {max-width: 470px;background: url(../images/lace_bg.png) 0 0 repeat-y #F4F5F7; background-size: 100% auto; margin: 0 auto;}

/*------
 top
------*/
#top {
  height: 100vh;
  min-height: 768px;
  overflow: hidden;
  position: relative;
  margin-bottom: 2.5em;
}
h1 {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 2.5em;
  padding: 2.5em 2%;
  color: #FFF;
  font-weight: bold;
  font-size: 140%;
  font-family: "Jost", "Hiragino Sans", "ヒラギノ角ゴシック", Sanfransisco, Arial, "SF Pro SC", Meiryo, "メイリオ", "微软雅黑", "Microsoft YaHei";
  z-index: 2;
  letter-spacing: .1em;
}
h1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e01a6cb2;
  clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
  z-index: 1;
}
h1 span {
  position: relative;
  z-index: 3;
}
h1 strong {
  display: block;
  font-weight: bold;
  font-size: 180%;
  z-index: 4;
  position: relative;
}
/*------
 lead
------*/
#lead h2{
  font-size: 1.7em;
  text-align: center;
  font-family: "Jost", "Hiragino Sans", "ヒラギノ角ゴシック", Sanfransisco, Arial, "SF Pro SC", Meiryo, "メイリオ", "微软雅黑", "Microsoft YaHei";
  font-weight: bold;
  background: linear-gradient(120deg, #FF3EAB 0%, #43D9E0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#lead{padding:0;}
#lead .inner{padding: 0 35px;}
#lead p{margin-top: 2.5em; text-align: center;}


/*------
 highlights
------*/
#highlights .inner{position: relative;padding: 0 35px;}
#highlights .inner .box{margin-top: 3em;}
#highlights .inner .box figure img {border: 1px solid #E01A6E;border-radius: 10%;overflow: hidden;}
#highlights .inner .box:first-of-type{margin-top: 1.5;}
#highlights .inner .box p{font-weight: 500; font-size: .9em;}


/*------
 products
------*/
#products {margin-top: 2.5em;}
#products h3{text-align: center; font-size: 1.2em; font-weight: 800; margin-top: 2em;}
#products h3 + p{text-align: center; margin: 0; font-weight: 800; font-size: 1.5em;}
#products a.btn{width: 88%; margin-top: 1em; font-weight: bold;}
#products a.btn.en{font-size: .8em}
#products .inner{padding: 0 35px;}
#products p.shipping {font-size: .9em;padding: 0 35px; text-align: center;}

.online{margin-top: 3em;padding: 0 35px;}
.online h4{font-size: .95em;text-align: center; font-weight: 800;}
.online p{font-size: .9em;  margin-top: 1em; text-align: center;}
main .online p:first-of-type{margin-top: 1em;}

.online hr{border: 2px solid #333;border-width: 1px 0 0 0; margin: 2em 0;}
.online a.btn {width: 100% !important; background-color: #333 !important; border-color: #333;margin-top: 2em !important;}
.online a:hover.btn {background-color: #FFF !important; color: #333; background-image: url(../images/commone/arrow_g.svg);}

/*スライダー*/
.swiper .swiper-slide {border-radius: 15px; overflow: hidden;}
.swiper .swiper-slide a{display: block; line-height: 0;}
.swiper_wrap{padding: 3em 0 1em 0;}
.swiper-pagination{position: relative!important; margin-top: 1em;}
.swiper-pagination-bullet,
.swiper-pagination-bullet-active{border-radius:1000px!important; height: 7px!important;opacity: 1!important;}
.swiper-pagination-bullet{background: #A0A0A0!important; width:13px!important;}
.swiper-pagination-bullet-active{background: #E01A6E!important;width:22px!important;}

/*------
 specifications
------*/
#specifications{padding:50px 0 0 0;}
#specifications h2{ 
  font-size: 2em;
  text-align: center;
  font-family: "Jost", "Hiragino Sans", "ヒラギノ角ゴシック", Sanfransisco, Arial, "SF Pro SC", Meiryo, "メイリオ", "微软雅黑", "Microsoft YaHei";
  font-weight: bold;
  background: linear-gradient(120deg, #FF3EAB 0%, #43D9E0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#specifications h3:first-of-type{margin-top: 0;}
#specifications h3 {margin-top: 1em; font-size: 1em;}
#specifications .inner { padding: 2em 50px; border: 1px solid #E01A6E; background: #fff; width: calc(100% - 75px); margin: 0 auto;  border-radius: 10px; text-align: center;}
#specifications p{text-align: center; margin-top: 0; font-size: .9em;}
/*------
 footer
------*/
footer{background: none; border: none; padding: 0 0 2em 0;}
footer p{text-align: center;font-size: .5em;}
footer .copyright span img{vertical-align: middle; margin-left: .4em; width: 38px;}
footer .logo { justify-content: center; align-items: center;gap: 10px; margin: 2em 0;}
footer .logo p{max-width: 180px;width: 35%;}

@media screen and (max-width: 1500px){
  #changeimg_pc {
    top: 0;
    right: 0;
    margin-top: 5em;
  }
  #changeimg_pc .frame img {left: 10%;}
  #changeimg_pc label { left: 2% }
}
@media screen and (max-width: 1200px){
  #hero .img_area{width: calc(100% - 560px);}
  main{margin-left: calc(100% - 560px);}
  .btn_hero{bottom: -10vw;}
  .btn_hero a.btn{width: 12vw; height: 12vw;font-size: 1vw;}
  .bg_title { left: 2%; bottom: 15%;}
}

@media screen and (max-width: 1024px){
  .menu_area {
    width: calc(100% - 480px);
    height: 80px;
    left: 0;
    right: auto;
    z-index: 1000;
  }
  .menu_area .inner,
  .share ul,
  .language,
  .share {
    flex-direction: row;
    margin: 0;
    align-items: center;
  }
  .language,.share {margin: 0 1em;}
  .language .icon, .share .icon {margin: 0 1em 0 0;}
  .language ul,.share ul {margin: .5em 0;}
  .language ul { gap: 12px;}
  #hero{ }
  main{margin-left: calc(100% - 480px);}
  #hero .img_area { width: calc(100% - 480px); height: calc(100% - 80px);}
  #hero .text_area{left: auto; bottom: 2%; right: 2em;}
  #hero .text_area h1{font-size: 7vw; text-shadow: 0 0 10px #fff;}
  #changeimg_pc { left: 0;}
  .bg_title { width: 96%; }
  #changeimg_pc label { width: 10vw; height: 10vw;}
}

@media screen and (max-width: 960px){
  #changeimg_pc .frame img {left: 0%;}
}

@media screen and (max-width: 820px){
  #changeimg_pc .frame img  { left: -30%;}
  #hero .img_area{ width: (100% - 80px);}
  #hero .text_area{ right: 1em;}
  #main_wrap {max-width: inherit; width: calc(100% - 10px);}
  #changeimg_pc .frame img {height: auto;}
}


@media screen and (max-width: 768px){
  h1 { font-size: 125%;}
  #specifications h2 { font-size: 160%;}
  #specifications .inner { padding: 2em 5%;}
  #changeimg_sp {
    width: 96%;
    height: auto;
    position: relative;
    aspect-ratio: 3 / 4;
    margin: 2.5em auto;
  }
  #changeimg_sp .frame {
    position: relative;
    width: 100%;
    height: 100%;
  }
  #changeimg_sp .frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  #changeimg_sp .changeimg_toggle:not(:checked) ~ .frame .pic1,
  #changeimg_sp .changeimg_toggle:checked ~ .frame .pic2 {opacity: 1;}
  #changeimg_sp label {
    position: absolute;
    top: 5%;
    right: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(../images/change.png) 50% 50% no-repeat #E01A6E;
    background-size: 15vw auto;
    width: 20vw;
    height: 20vw;
    z-index: 100;
    border-radius: 50%;
    border: 3px solid #fff;
    overflow: hidden;
    transition: transform 0.5s ease, background-color 0.5s ease;
    cursor: pointer;
    text-align: center;
  }
  #changeimg_sp label:active {background-color: #333333;}
  #changeimg_sp label span {
    color: #FFF;
    font-size: 11px;
    display: inline-block;
  }
  #changeimg_sp .changeimg_toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  #changeimg_pc {display: none;}
  #changeimg_sp {display: block;}
  a.btn{width: 90%; margin-top: 1em; font-size: 4vw; font-weight: 500;}

  #top {
    background: url(../images/main_sp.jpg) 50% 0 no-repeat;
    background-size: cover;
  }
  #top figure img {display: none;}
  /*------
  header
  ------*/
  header.absolute{width: calc(100% - 10px);left:5px; top: 0; z-index: 999; background: #ffffff63; padding: 15px 1em; }
  header p{width: auto; line-height: 1;}
  header p a{display: block; line-height: 0;}
  header p img{height: 30px; width: auto;}
  header .logo{margin-top: 0;}

  /*------
  hero
  ------*/
  #hero{position: relative; height: auto;width: 100%; background: none;}
  #hero::before{content: ""; display: block; width: 100%; height: 20%; position: absolute; bottom: 0; left: 0; background:linear-gradient(to top ,#ffffff 0, #ffffff00 100%);}
  #hero .img_area{width: 100%; margin-top: 0; position: relative; padding: 0;height: auto;}
  #hero .img_area_sp{display: block; position: relative;}
  #hero .img_area_sp .top_flower{position: absolute; bottom: -18%; left: 0;width: 100%;}

  #hero .text_area{position: relative; margin-top: 17%;bottom: auto; left: auto;right: auto;}
  #hero .text_area h1{text-align: center;font-size: 17vw; line-height: 1.2;}
  #hero .text_area h1.en{font-size: 12vw;}

  .name{display: none;}

  

  .menu_area{display: none;}
  .menu_cnt_sp{display: block;}
  .btn_nav{position:absolute; top: 10px; right: 2%; display: flex;  width: 40px; height: 40px; border-radius: 100px;margin-left: auto; z-index: 200; padding: 5px; justify-content: center; align-items: center; z-index: 1005;background: #E01A6E;}
  .btn_nav:hover{cursor: pointer;}
  .btn_nav span{width: 80%; height: 3px; background:#fff; display: flex; position: relative; align-items: center; border-radius: 1000px;} 
  .btn_nav span::before,
  .btn_nav span::after{content: "";display: block; width: 100%; height: 3px;background:#fff;position: absolute;transition: all 0.2s linear;border-radius: 1000px;}
  .btn_nav span::before{top: -8px;}
  .btn_nav span::after{bottom: -8px;}
  .btn_nav.active{background: #fff;}
  .btn_nav.active span::before{transform: rotate(-45deg);top: calc(50% - 1px);transition: all 0.2s linear; background: #E01A6E;}
  .btn_nav.active span::after{transform: rotate(45deg);bottom: calc(50% - 1px);transition: all 0.2s linear;background: #E01A6E;}
  .btn_nav.active span{background: #ffffff00;}

  .btn_hero{position: fixed;opacity: 0; bottom: 10px; right: 15px;}
  .btn_hero.show{opacity: 1;transition: all 0.2s linear;}
  .btn_hero a.btn{width: 120px; height: 120px;flex-direction: column;font-size: .45em;}
  .btn_hero a.btn .line{font-size: 1.8em;}
  .btn_hero a.btn br{display: none;}
  .btn_hero .click{padding: 0 .7em;width: auto;top: -1.5vw;}
  .btn_hero .click::after{left: 6vw;}
  .btn_hero .click .outfit{font-size: 1em;}
  .btn_hero .arrow{width: 2em;bottom: -1em;right: -.5em;}

  /*------
  main
  ------*/
  main{width: 100%;max-width:100%; margin-left: 0; border: none;box-shadow: none;}

  .menu_area{
    width: 100vw;
    height:auto;
    padding: 1em 5% 5%;
    transform: translateY(-100%);
    display: flex;
    transition: transform .3s linear;
    top: 0;
    left: 0;
    bottom: auto;
    background: #333333d0;
    z-index: 100;
    align-items: center;
    align-self: center;
    flex-direction: column;
    position: absolute;
    visibility: hidden; 
    pointer-events: none;
}
  .menu_area.active{
  transform: translateY(0);
  transition: transform .3s linear;
  visibility: visible;
  pointer-events: auto;
}

  .menu_area .menu_cnt_sp{width: 100%;}
  .menu_area .menu_cnt_sp li {border: 1px solid #fff; border-width: 0 0 1px 0;padding: 1em 0; text-align: left; font-weight: 700;}
  .menu_area .menu_cnt_sp li a{display: block; color: #fff;}
  .menu_area .menu_cnt_sp li a:hover{text-decoration: none;}
  .menu_area .inner.flex{width: 90%; flex-direction: column; justify-content: center; text-align: center; margin-top: 0;}
  .language,.share{background: none; color: #fff; font-size: 1.2em; font-weight: 500; width: 9em; margin: 1em 0;align-items: center; justify-content: flex-start;}
  .language .icon, .share .icon {width: 1.4em;}
  .language .icon.sp, .share .icon.sp {display: block; }
  .language p,
  .share p{padding-right: 1em; border: 1px solid #fff; border-width: 0 1px 0 0; width: 40%;}
  .language p span,
  .share p span{display: none;}
  .language a{color: #fff; font-weight: 500;}
  .language ul,
  .share ul{gap: 15px; flex-direction: row; align-items: center;}
  .language li.active a,
  .language li a:hover{text-decoration: underline; color: #E01A6E;background: none; text-decoration: none;}
  .share li {width: 1.6em; line-height: 1;}
  /* .share li img{height: 100%; width: auto;} */

  /*------
  read
  ------*/
  #read{width: 100%;padding:0;}

  #highlights .inner .box:first-of-type{margin-top: 1em;}
  #movie .inner{margin-top: 1em;}
  #offshot .inner{margin-top: 1em;}
  #voice .lead{margin-top: 1em;}
  #howto .inner{margin-top: 1em;}
  .swiper_wrap{padding-top: 1.5em;}
  #products a.btn.en{font-size: 3vw}

  /*------
  footer
  ------*/
}

@media screen and (max-width: 500px){
  #lead h2{font-size: 1.6em;}
  #lead .inner {padding: 0;}
  .menu_area .inner.flex{width: 100%; margin-left: 0%;}
.btn_hero .click::after{left: 8vw;}
}