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



.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: 1000px; overflow: hidden; line-height: 1.2;padding: 1em; border: 1px solid #8376B5; padding: 1em 2.2em;}
/* .btn svg{position: absolute; left: 0; top: 0; opacity: 0.2;}
a.btn span{color: #070A7D;text-align: center;-webkit-text-stroke-width: 3px;-webkit-text-stroke-color: #FFF;font-size: .9em;font-style: normal;font-weight: 800;position: relative; z-index: 10;paint-order: stroke; }
a.btn::after{content: ""; display: none;} */

/*------
  font
------*/
.noto-sans-jp{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.hina-mincho-regular {
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

/*------
 
------*/
body{position: relative;}

/*------
 hero
------*/
#hero{position: fixed; width: 100%; height: 100vh;top: 0; left: 0;background: url(../images/bg.jpg) no-repeat; background-size: cover; background-position: bottom 1px  center ; }
#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% - 396px); display: block;/* margin-top: 10px;  */top:0;z-index: 10; height: 100vh;height: calc(100vh - 78px);}
#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-family: "Hina Mincho", serif;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;}
.menu_area{position: absolute; bottom: 0; left: 0; width: 100%; background: #535353; padding: 0.8%;height: 78px; 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;}


/* .pc_sidemenu li{font-size: 1.1vw; padding: 2em 0 0 .5em; line-height: 1; display: flex; align-items: center;}
.pc_sidemenu li::before{content: "";display: inline-block; position: relative; clip-path: polygon(0 0, 0% 100%, 100% 50%); background: #fff;width: .5em; height: .5em; margin-right: .5em;}
.pc_sidemenu li a:hover{color: #0A89FF;text-decoration: none;}
.pc_sidemenu li:hover::before{background: #0A89FF;} */

/* .btn_hero{transition: all 0.2s linear;}
.btn_hero:hover{transform: scale(1.02);transition: all 0.2s linear;}
.btn_hero .click{position: absolute; top: .5vw; left: -3vw; background: #2589CA; text-align: center; width: 10vw; z-index: 20; border-radius: 1000px;}
.btn_hero .click .outfit{font-weight: 800; color: #fff;font-size: 1.5vw;}
.btn_hero .click::after{content: "";display: block;width: 2.2vw; height: 3vw;position: absolute; left: 2vw; bottom: -3vw; background: url(../images/fukidashi.svg) no-repeat; background-size: 100% auto;}
.btn_hero .arrow{position: absolute; width: 3vw; bottom: -.5em;right: 0;animation: arrow 3s linear infinite;z-index: 10; }
.btn_hero .arrow svg{width: 100%; height: auto;} */

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


.language,
.share{background: #fff;border-radius: 10px; padding: .4em 1.5em .4em 1em; align-items: center;height: 46px;font-weight: 700; font-size: .8em;border-radius: 100px;}
.language{margin-right: 1em;}
.language p,.share p{line-height: 1;}

.language p span{width: 1.5em; ; display: inline-block; vertical-align: text-bottom;line-height: 0;margin-right: .5em;}
.share p span{width: 1.3em; display: inline-block; vertical-align: sub;line-height: 0;margin-right: .5em;}
.language ul{align-items: center;gap: 10px; margin-left: 1em;}
.language li{font-weight: 600;line-height: 1;}
.language a{color: #000; 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: #fff; text-decoration: none; background: #8376B5;}
.share ul{gap: 10px;margin-left: 1em;}
.share li{line-height: 0; width: 25px;}

/*header*/
header{position: absolute}
header p{max-width: 150px;width: 30%;}
header .logo{gap: 10px;}

/*------
 main
------*/
main{max-width: 396px; width: 100%;position: relative; z-index: 4; background: #fff;margin-left: calc(87% - 396px);box-shadow: 0 0 10px #00000026;}
main p{margin-top: 1.5em;}
main h2{font-size: 2.5em; font-family: "Hina Mincho", serif;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 hr{border: none; background: url(../images/hr.svg);height: 13px; width: 100%; background-repeat: no-repeat;background-position: center; margin: 5em 0;}


/*------
 bg
------*/
.bg{background: url(../images/bg_purple.jpg);background-position: center bottom; background-size: 100% auto;position: relative; padding: 7em 0; margin: 7em 0;}
.bg::before{content: ""; background: url(../images/flower.png) no-repeat; background-size: 100% auto; display: block; width: 100%; height: 196px;position: absolute; top: -6em; left: 0;}
.bg::after{content: ""; background: url(../images/flower.png) no-repeat; background-size: 100% auto; display: block; width: 100%; height: 196px;position: absolute; bottom: -5em; left: 0;}


/*------
 lead
------*/
#lead h2{font-size: 1.7em; text-align: left; text-align: center;}
#lead{padding:0;}
#lead .inner{padding: 0 35px;}
#lead p{margin-top: 1em;}


/*------
 highlights
------*/
#highlights .inner{position: relative;padding: 0 35px;}
#highlights .inner .box{margin-top: 3em;}
#highlights .inner .box:first-of-type{margin-top: 1.5;}
#highlights .inner .box p{font-weight: 500; font-size: .9em;}


/*------
 voice
------*/
#voice .inner{padding: 0 35px; margin-top: 1.8em;}
#voice .lead{margin-top: 1.8em;padding: 0 35px;/* font-size: 1.1em; */word-wrap: break-word;text-align: center;}
#voice figure{margin-top: 1em; line-height: 1;}
#voice .main_voice{border: 1px solid #000; background: #fff; width: calc(100% - 75px); margin: 1.8em auto 0; padding: 10px 25px;font-size: 2em;position: relative;}
#voice .main_voice::before{content: "";width: 3em; height: 3em; display: block; position: absolute; left: -1em; top: -1em; background: url(../images/quote_top.png); background-repeat: no-repeat; }
#voice .main_voice::after{content: "";width: 3em; height: 3em; display: block; position: absolute; right: -1em; bottom: -1em; background: url(../images/quote_bottom.png); background-repeat: no-repeat; background-position: bottom center;}
#voice .main_voice p{margin: 0; text-align: center;}
#voice ul{padding-left: 1.5em; margin-top: 1.8em;}
#voice ul li{ list-style: disc;}
#voice .more{text-align: right; font-size: 2em;}

/*------
 movie
------*/
#movie .inner{padding: 0 35px; margin-top: 1.5em;}
#movie .inner p{text-align: center;}
#movie .youtube{position: relative;width: 100%;padding-top: 56.25%; margin-top: 1.5em;}
#movie .youtube iframe{ position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;}


/*------
 offshot
------*/
#offshot .inner{padding: 0 35px;margin-top: 1.5em;}
#offshot .comment{border: 1px solid #000; background: #fff; width: calc(100% - 75px); margin: 2em auto 0; padding: 50px 25px;box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);}
#offshot .lead{text-align: center;}
#offshot .comment h3{font-size: 2em; }
#offshot .comment p{margin-top: 1em;}
#offshot .comment p.name{text-align: right;font-size: 1.8em;}

/*------
 howto
------*/
#howto h3{font-weight: 400;text-align: center;}
#howto .inner{padding: 0 35px; margin-top: 1.5em;}
#howto .inner .box{margin-top: 3em;}
#howto .inner figure{width: 80%; margin: 1em auto;}

/*------
 products
------*/
#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: 80%; margin-top: 1em; font-size: .8em}
#products a.btn.en{font-size: .8em}
#products .inner{padding: 0 35px;}

.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 #0A89FF;border-width: 1px 0 0 0; margin: 3em 0;}

/*スライダー*/
.swiper .swiper-slide {filter: drop-shadow(0 0 3px #00000079);}
.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: #ECE7FF!important; width:13px!important;}
.swiper-pagination-bullet-active{background: #605298!important;width:22px!important;}

/*------
 specifications
------*/
#specifications{border: 1px solid #000; background: #fff; width: calc(100% - 75px); margin: 5em auto 0; padding:50px 25px;box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);}
#specifications h3{text-align: center;font-weight: 800; margin-top: 2em;color: #8376B5; font-size: .9em;}
#specifications h3:first-of-type{margin-top: 1em;}
#specifications p{text-align: center; margin-top: 0;}
/*------
 footer
------*/
footer{background: none; border: none; padding: 2em 0; margin-top: 5em;}
footer p{text-align: center;font-size: .8em;}


@media screen and (max-width: 1200px){
  
  #hero .img_area{width: calc(100% - 396px);}
  main{margin-left: calc(100% - 396px);}

  .pc_sidemenu{display: none;}
  /*  */
  .btn_hero{bottom: -10vw;}
  .btn_hero a.btn{width: 15vw; height: 15vw;font-size: 1vw;}
}

@media screen and (max-width: 1024px){
#hero{background: url(../images/mv_tablet.jpg); background-size: 70%;background-position: bottom 70px left 0em;background-repeat: no-repeat;background-color: #eff0f2; }
#hero .text_area{left: auto; bottom: 2%; right: 2em;}
#hero .text_area h1{font-size: 7vw; text-shadow: 0 0 10px #fff;}
}

@media screen and (max-width: 850px){
  #hero .img_area{height: calc(100vh - 120px);}
  #hero .text_area{ right: 1em;}
  .menu_area{height: 120px;}
  .menu_area .inner.flex{flex-direction: column; width: 250px;}
  .language, .share{height: 40px;}
  .language{margin-right: 0;width: 100%;}
  .share{margin-top: 1em; width: 100%;}
}




@media screen and (max-width: 768px){

  a.btn{width: 90%; margin-top: 1em; font-size: 4vw; font-weight: 500;}
  /*------
  header
  ------*/
  header.absolute{width: 100%;left:0; top: 0; border-radius: 10px; z-index: 999; height: 50px;}
  header p{width: auto; line-height: 1;}
  header p a{display: block; line-height: 0;}
  header p img{height: 30px; width: auto;}


  /*------
  hero
  ------*/
  #hero{position: relative; height: auto;width: 100%; overflow: hidden; 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:fixed; 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: #8376B5;}
  .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: #8376B5;}
  .btn_nav.active span::after{transform: rotate(45deg);bottom: calc(50% - 1px);transition: all 0.2s linear;background: #8376B5;}
  .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; margin-top: 2em;}

  .top_read figure{display: none;}

  .menu_area{width: 95%; transform: translateX(110%); display: flex;transition: all 0.5s linear; height: 100vh; background: #8376b5d4;z-index: 100; align-items: center; align-self: center; flex-direction: column; padding: 1em 5% 5%; position: fixed;}
  .menu_area.active{bottom: auto; height: 100vh;left: auto; right: 0; top: 0; transform: translateX(0);transition: all .5s linear;}

  .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%; justify-content: center; text-align: center;margin-left: 10%; margin-top: 0;}
  .language,.share{background: none; color: #fff; font-size: 1.2em; font-weight: 500; width: 100%; margin: 1em 0 0 0;}
  .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;}
  .language li.active a,
  .language li a:hover{text-decoration: underline; color: #efbdee;background: none; text-decoration: none;}
  .share li {width: 1.3em; 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
  ------*/
  footer{padding-bottom: 150px;}
}

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