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

@media screen and (max-width: 1200px){
	:root{
       --clip-path-height: 15em;
    }
}

@media screen and (max-width: 900px){
	:root{
       --clip-path-height: 10em;
    }
}

@media screen and (max-width: 768px){
	:root{
    --font-size:15px;
    }
}

@media screen and (max-width: 550px){
	:root{
    --font-size:15px;
      --clip-path-height: 8em;
    }
}


a.btn {position: relative; width: 100%; border-radius: 1000px; overflow: hidden; line-height: 1.2;padding: 1em; border: none;}
a.btn span{color: #fff;text-align: center;font-size: .9em;font-style: normal;font-size: 1em;}
a.btn::after{content: ""; display: none;}



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

/*------
 header
------*/
header{position: absolute}
header p{max-width: 210px;width: 30%;}
header .inner.flex{align-items: flex-start;}
header h2{width: 30%; max-width: 180px;}

/*language*/
header .language{background: #003A99; border: 1px solid rgba(255, 255, 255, 0.50);border-radius: 100px; align-items: center;height: 50px;font-weight: 400; font-size: .8em; padding: 0 1em;}
header .language ul{align-items: center;gap: 10px; margin-left: 1em;}
header .language li{padding: 0;}
header .language li a{font-weight: 600;line-height: 1;background: #fff; padding: .5em 1em; border-radius: 100px; margin-left: 1em;}
header .language li:first-of-type{background: none;color: #fff;margin-left: 0;padding: 0 0 0 .5em;}
header .language li.active a,
header .language li:hover a{background: #78DFFF; cursor: pointer;}
header .language li:hover:first-of-type{background: none;}
header .language a{display: block; color: #003A99;}
header .language li.active a,
header .language li a:hover{color: #fff; text-decoration: none;}

/*Share*/
.share_wrap {top: 0;margin:0 1em 1em;right: 0;z-index: 100;}
.share_ttl{display: none;}
.share {display: block;width: 50px; height: 50px;border-radius: 50%;text-align: center;color: white;margin: 0 auto 15px;cursor: pointer;-webkit-transition: all .1s ease-out;transition: all .1s ease-out;position: relative;}
.share > img {line-height: 60px;transition: all .2s ease-in-out;transition-delay: 2s;}
.share.share_top {background: #003A99; border: 1px solid rgba(255, 255, 255, 0.50);}
.share:not(:first-child) {margin: 10px auto 0;opacity: 0;}
.share:not(:first-child) > i {font-size: 18px;line-height: 40px;transition: all .3s ease-in-out;}
.share_wrap:hover .share:not(:first-child) {opacity: 1;margin: 10px auto 0;}
.share:nth-last-child(1) {-webkit-transition-delay: 25ms;transition-delay: 25ms;}
.share:not(:last-child):nth-last-child(2) {-webkit-transition-delay: 20ms;transition-delay: 20ms;}
.share:not(:last-child):nth-last-child(3) {-webkit-transition-delay: 40ms;transition-delay: 40ms;}
.share:not(:last-child):nth-last-child(4) {-webkit-transition-delay: 60ms;transition-delay: 60ms;}
.share:not(:last-child):nth-last-child(5) {-webkit-transition-delay: 80ms;transition-delay: 80ms;}

.btn_nav{display: none;}
/*------
 hero
------*/
#hero {position: relative;}
#hero .hero_inner {position: relative;}
#hero .hero_inner .mv{width: 50%; position: relative;padding: 0; line-height: 0;}

#hero .hero_inner::before {content: "";position: absolute;left: 0;bottom: 0;clip-path: polygon(0 0, 0% 100%, 100% 100%);background: #ffffff;width: 50%;height:  var(--clip-path-height);display: block;z-index: 100;}
#hero .hero_inner::after {content: "";position: absolute;right: 0;bottom: 0;clip-path: polygon(100% 0, 0% 100%, 100% 100%);background: #ffffff;width: 50%;height:  var(--clip-path-height);
display: block;z-index: 100;}

#hero .text_area{position: absolute; bottom: 0; left: 5%; padding-bottom: var(--clip-path-height); width: 90%; justify-content: center;}
#hero .text_area h1{width: 80%;}
#hero .text_area .logo{width: 70%;}
#hero .scale_mv .text_area .logo{width: 65%;}
#hero .scale_mv .text_area h1.zh{width: 45%;}
#hero .scale_mv .text_area h1.en{width: 70%;}

#hero .btn_wrap{border: 2px solid #FFF; border-radius: 100px; padding: 5px; width: 70%; filter: drop-shadow(0 0 10px #00000067); margin-top: 2em;}
#hero .btn_wrap a.btn{padding: 1em 2.5em 1em; display: flex; flex-direction: column;justify-content: center; align-items: center; width: 100%;max-width: 100%;}
#hero .btn_wrap a.btn.estelle{background: linear-gradient(273deg, #F99D36 -2.04%, #F99D36 63.22%, #FFF 111.1%);}
#hero .btn_wrap a.btn.rixia{background: linear-gradient(269deg, #DFFBFF -22.93%, #45D1FF 19.68%, #000F34 83.87%, #000 134.27%);}
#hero .btn_wrap a.btn.estelle:hover{background: linear-gradient(273deg, #fff -2.04%, #F99D36 63.22%, #F99D36 111.1%);}
#hero .btn_wrap a.btn.rixia:hover{background: linear-gradient(269deg, #000 -22.93%, #000F34 19.68%, #45D1FF 83.87%, #DFFBFF 134.27%);}

#hero .btn_wrap .title{font-size: 1vw;}
#hero .btn_wrap .btn_text{font-size: 2vw; margin-top: .2em; font-weight: 500; display: inline-block;}
#hero .btn_wrap .btn_text.zh{font-size: 1.5vw;}

#hero .mv_preorder{position: absolute; bottom: 1.5%; z-index: 250; left: 25%;width: 50%;}
#hero .mv_preorder.en{bottom: 5%;}
#hero a.btn.sp{display: none;}

/*------
 main
------*/
.cnt{position: relative;min-height: 100vh;overflow:clip;}
.bg-pup{position: sticky;top: 0;height: 100vh;margin-bottom: -100vh;background: url(../images/bg_estelle.jpg) center / cover no-repeat; opacity: .8;}
.bg-scale{position: sticky;top: 0;height: 100vh;margin-bottom: -100vh;background-repeat: no-repeat; background-size: cover; background-image: url(../images/bg_chain.png),url(../images/bg_rixia.jpg);}
.section-content {position: relative;z-index: 1;}
.cnt p{margin-top: 1em;}
.cnt p:first-of-type{margin-top: 0;}
.cnt .preorder_date br{display: none;}
.cnt .img_area.flex{gap: 20px;}
.cnt .img_area img{border: 1px solid #fff;}
.cnt h3,
.cnt .preorder_date{text-align: center; color: #fff;position: relative;}
.cnt h3{font-weight: 400; margin-top: 2em;font-size: 2vw;}
.cnt h3 span,
.cnt .preorder_date{position: relative;}
/* .cnt h3 span::before{content: "グッドスマイルカンパニー公式ショップ予約期間"; -webkit-text-stroke: 0; position: absolute; } */
.cnt h3 span::after{display: none; }


.cnt .preorder_date{font-size: 3vw;font-weight: 700; line-height: 1.8;}
.cnt .preorder_date.en{font-size: 2.5vw;}
.cnt .preorder_date.zh{font-size: 2.5vw;}

.cnt h3 br,
.cnt .preorder_date br{display: none;}
.cnt .btn{margin-top: 1em;}

/*pup*/
#pup::before{content: '';display: block; width: 100%; height: 200px; position: absolute; left: 0; top: 0; background: linear-gradient(to bottom, #fff , #ffffff00);z-index: 1;}
#pup .bg{background: url(../images/dot.png);padding: 200px 2.5% 200px;}
#pup h2 {position: relative; z-index: 10; line-height: 1; align-items: center;}
#pup h2 span.logo{width: 15%; max-width: 378px;filter: drop-shadow(0 0 5px #fff); margin-right: .5em;}
#pup h2 span.title{font-size: 4.5vw; background: linear-gradient(180deg, #00096B 0%, #035AA7 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;color: #00096B;filter: drop-shadow(0 0 5px #fff); }
#pup h2 span.title.en{line-height: 1.4;}
#pup h2 span.title > span{font-size: 70%;}
#pup .text_area{padding:20px 0; border-radius: 10px;background: rgba(255, 255, 255, 0.60); box-shadow:  0 0 20px 20px rgba(255, 255, 255, 0.60); width: 97%; margin: 0 auto; color: #505050; margin: 2em auto 0;}
#pup .img_area{margin-top: 2em;}
#pup .img_area img{width: 100%;}
#pup .img_area img:nth-child(2),
#pup .img_area img:nth-child(3){width: calc((100% - 20px) / 2);}
#pup.cnt h3,
#pup.cnt .preorder_date{-webkit-text-stroke:#00096B 6px;text-stroke:#00096B 6px;paint-order: stroke fill; }
/* #pup.cnt .preorder_date span::before{content: "2026年4月3日（金）～2026年5月13日（水）23:59"; -webkit-text-stroke: 0; position: absolute;font-family: inherit;} */
#pup.cnt a.btn{border: 2px solid #fff; background:linear-gradient(273deg, #F99D36 -2.04%, #F99D36 63.22%, #FFF 111.1%);padding: 1.3em 2em;box-shadow: 0 0 10px #0000007e;}
#pup.cnt a.btn:hover{background: linear-gradient(273deg, #fff -2.04%, #F99D36 63.22%, #F99D36 111.1%);}

/*scale*/
/* #scale {background-image: url(../images/bg_chain.png),url(../images/bg_rixia.jpg); background-repeat: no-repeat; background-attachment: scroll;background-attachment: fixed; background-size: 100% auto;} */
#scale .bg{padding: 200px 2.5%;}
#scale .title{background: url(../images/title_rixia_bg.png) no-repeat left top; background-size: 50% auto;}
#scale h2{font-size: 4.5vw; color: #fff; padding-top: .25em;}
#scale h2 span{font-size: 80%;}
#scale h2 br{display: none;}
#scale .text_area{color: #fff;padding:20px 0;}
#scale .img_area{align-items: stretch;}
#scale .img_area img{width: 100%; align-items: flex-start;}
#scale .img_area .img_wrap,
#scale .img_area img:last-of-type{width: calc((100% - 20px) / 2);}
#scale .img_area .img_wrap.flex{line-height: 0;justify-content: space-around; align-items: stretch; flex-direction: column;}
#scale .img_area .img_wrap img{width: 100%; line-height: 0;}
#scale.cnt h3,
#scale.cnt .preorder_date{-webkit-text-stroke:#003A99 6px;text-stroke:#003A99 6px;paint-order: stroke fill;}
/* #scale.cnt .preorder_date span::before{content: "2026年4月23日（木）～2026年6月24日（水）23:59"; -webkit-text-stroke: 0; position: absolute;font-family: inherit;} */
#scale.cnt a.btn{border: 2px solid #fff; background: linear-gradient(269deg, #DFFBFF -22.93%, #45D1FF 19.68%, #000F34 83.87%, #000 134.27%); padding: 1.3em 2em;box-shadow: 0 0 10px #0000007e;}
#scale.cnt a.btn:hover{background: linear-gradient(269deg, #000 -22.93%, #000F34 19.68%, #45D1FF 83.87%, #DFFBFF 134.27%);}

/*next*/
#next{width: 83.33%; padding: 80px;margin: 100px auto; border-radius:100px;box-shadow: 0 0 20px #0000002f;}

#next h3{font-size: 5vw; text-align: center; line-height: 1.2;}
#next h3.en{font-size: 3.5vw;}
#next p{font-size: 2em; font-weight: 600;text-align: center; margin: 1em 0;}
#next figure{border: 1px solid #A0A0A0;margin: 2em auto 0; line-height: 0; border-radius: 10px; overflow: hidden;}
#next figure:first-of-type{max-width: 600px;width: 80%;}
#next figure:last-of-type{max-width: 890px; width: 100%;}
#next .info{border: 5px solid #59A1FF; border-radius: 50px;margin: 0 auto; overflow: hidden; align-items: stretch; width: 100%; max-width: 1000px;}
#next .info .title{background: #59A1FF;padding: 2em 0;display: flex; align-items: stretch; width:calc(50% - 50px); justify-content: center;position: relative;}
#next .info.en .title{padding-left: 2em;}
#next .info .sankaku{background-color:#59A1FF;width: 50px;clip-path: polygon(0 0, 0% 100%, 100% 50%);margin-left: -1px;}
#next .info p{ color: #fff; font-weight: 700; font-size: 1.2vw;width: 100%; text-align: center; display: flex; align-items: center; justify-content: center;margin: 0;}
#next .info .icon_area{padding: 2em; gap: 50px; justify-content: center; width: 50%;    align-items: center;}
#next .info .icon_area a{display: block; line-height: 1; width: 30%; max-width: 100px;}
#next .info.en .icon_area,
#next .info.zh .icon_area{gap: 30px;}
#next .info.en .icon_area a,
#next .info.zh .icon_area a{width: 20%;}

/*------
 aside
------*/
aside .inner{padding:50px 2.5%;width: 100%;background: #FF9621; background-image: url(../images/bg_smile.png); background-size: 20%; background-position: bottom 5em right 5%; background-repeat: no-repeat; color: #fff; }
aside .inner::before{content: "";position: absolute; left: calc(50% - 2em); top: -1px; clip-path: polygon(0 0, 100% 0, 50% 100%); background: #ffffff; width: 4em; height: 2em; display: block; z-index: 2em;} 

aside .inner h4{margin-top: 2em;font-size: 1.2em;}
aside .inner h4:first-of-type{margin-top: 0;}
aside .inner p{margin-top: .5em;}
aside .inner a.btn{background: #fff; color: #FF9621; margin-top: 50px; max-width: 300px;}
aside .inner a.btn:hover{box-shadow: 0 0 10px 5px #ffdc2e; font-width: 500;}

/*------
 footer
------*/
footer{background: none; border: none; padding: 5em 0 3em;}
footer .logo_gsc{width: 30%; max-width: 200px; display: block; margin: 0 auto; line-height: 1;}
footer p.copyright{text-align: center; color: #8d8d8d; font-size: .7em;}


@media screen and (min-width: 2560px){
 #hero,main,aside,footer{max-width: 2560px; width: 100%; margin: 0 auto;}
 .cnt h3{font-size: 3em;}
 .cnt .preorder_date{font-size: 4.5em;}

 #hero .btn_wrap .title{font-size: 1em;}
 #hero .btn_wrap .btn_text{font-size: 3em;}

 #pup h2 span.title{font-size: 5em;}
 #scale h2{font-size: 7em;}
 #next h3{font-size: 6em;}
 #next .info p{font-size: 1.5em;}
}

@media screen and (max-width: 1200px){
  #hero .btn_wrap{margin-top: 1em;}
  #hero .btn_wrap a.btn{padding-left: 1.5em; padding-right: 1.5em;}
  #hero .btn_wrap .title{font-size: .9vw;}
}

@media screen and (max-width: 768px){
  /*------
  header
  ------*/
  header{z-index: 200; /* overflow-x: hidden; */}
  .menu_area{position: fixed; right: -100%; top: 0; width: 100%; height: 100vh;background: #003b99d4; align-items: stretch;flex-direction: column; justify-content: center;display:flex;overflow-x: hidden; opacity: 0;transition: all .5s ease-out;/* display: none; */opacity: 0; }
  .menu_area.active{right: 0;transition: all .5s ease-out;opacity: 1; right: 0; }

  /*language*/
  .menu_area .language{background: none;  border: none;justify-content: center; width: 100%; height: auto;}
  .menu_area .language li{border: 1px solid #fff; border-width: 0 1px 0 0;}
  .menu_area .language li:first-of-type{width: 100%; text-align: center; padding: 0; margin-bottom: 1em;}
  .menu_area .language li:last-of-type{border: none;}
  header .language li a{padding: 0 1em; margin: 0; background: none; color: #fff;font-size: 1.5em;}
  header .language li.active a, header .language li:hover a{background: none;}

  /*Share*/
  .share_wrap {display: flex; gap: 0 20px;flex-wrap: wrap;width: 100%;justify-content: center;margin:0; }
  .share_ttl{text-align: center;width: 100%; max-width: 100%; margin-bottom: .5em; font-size: .9em; display: block; color: #fff; margin-top: 2em;}
  .share_wrap{color: #fff; width: 100%; text-align: center;}
  .share_top{display: none;}
  .share{width: 60px; height: auto;}
  .share:not(:first-child), .share_wrap:hover .share:not(:first-child){ opacity: 1;margin: 0;}

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

  /*------
  hero
  ------*/
  #hero .hero_inner {flex-direction: column;}
  #hero .hero_inner .mv{width: 100%; height: 60vh; min-height: 100vw; overflow: hidden;}
  #hero .hero_inner .mv:last-of-type{height: calc(60vh + 10em);}
  #hero .hero_inner .mv picture img{margin-top: -10%;}
  #hero .hero_inner::before {content: "";position: absolute;left: 0;bottom: 0;clip-path: polygon(0 0, 0% 100%, 100% 100%);background: #ffffff;width: 50%;height:  var(--clip-path-height);display: block;z-index: 100;}
  #hero .hero_inner::after {content: "";position: absolute;right: 0;bottom: 0;clip-path: polygon(100% 0, 0% 100%, 100% 100%);background: #ffffff;width: 50%;height:  var(--clip-path-height);
  display: block;z-index: 100;}

  #hero .pup_mv .text_area h1{margin-top: -.3em;}
  #hero .hero_inner .text_area{width: 80%;margin-left: 5%;padding-bottom: 0; bottom: 1em; }
  #hero .hero_inner .mv:last-of-type .text_area{padding-bottom:6em; }
  #hero .hero_inner .btn_wrap{width: 80%; margin: 0 auto;}
  #hero .btn_wrap {display: none;}

  #hero .mv_preorder{display: none;}
  #hero a.btn.sp{ width: 80%; margin: 0; position: absolute; z-index: 250; bottom: 1%; left: 10%; font-size: 1.5em; font-weight: 600;background: linear-gradient(0deg, #E2CC7A 0%, #FFF 66.9%); border: 2px solid #605018;box-shadow: 0 0 10px #75762F; font-weight: 700; display: block;}
  #hero a.btn.sp span{color: #605018; }
  #hero a.btn.sp:hover{background: linear-gradient(0deg, #fff 0%, #E2CC7A 66.9%);}
  /* #hero .btn_wrap .title{display: none;}
  #hero .btn_wrap .btn_text{font-size: 4vw;} */
  

  /*------
  main
  ------*/
  .cnt .img_area.flex{gap: 10px;}
  .cnt h3{font-size: 5vw;}
  .cnt h3.en{font-size: 3.5vw;}
  .cnt h3 span{display: block;}
  .cnt h3 span::before{left: 0;display:block; /* width: 100vw; */}
  .cnt h3 br{display: block;}
  .cnt .preorder_date{font-size: 7vw;}
  .cnt .preorder_date br{display: block;}
  .cnt .preorder_date.en{font-size: 5vw;}
  .cnt .preorder_date.zh{font-size: 5vw;}
  #pup.cnt .preorder_date span::before{left: 0;}
  #scale.cnt .preorder_date span::before{left: 0;}


  /*pup*/
  #pup {background-size: 200% auto; background-attachment: scroll;background-repeat: repeat;}
  #pup .bg{background-size: 3% auto; padding: 100px 2.5%;}
  #pup .text_area{margin-top: 0;}
  #pup h2{display: block;}
  #pup h2 span.title.en{margin-top: 0;}
  #pup h2 span.logo{width: 40%; display: block;}
  #pup h2 span.title{font-size: 8vw; margin-top: .25em;display: block;}
 /*  .cnt h3 span::before{content: "グッドスマイルカンパニー公式ショップ\A予約期間"; -webkit-text-stroke: 0; position: absolute; white-apace: pre; display: block;} */
/*  .cnt h3 span::before{content: "グッドスマイルカンパニー公式ショップ"; -webkit-text-stroke: 0; position: absolute;display: block; left: 0; left: 50%;transform: translateX(-50%); width: 100%;}
.cnt h3 span::after{content: "予約期間"; -webkit-text-stroke: 0;  display: inline; position: absolute;left: 50%;transform: translateX(-50%);} */

  
  /*scale*/
  #scale {background-size: 200% auto;background-attachment: scroll;background-repeat: repeat}
  #scale .bg{padding: 100px 2.5%;}
  #scale h2{font-size: 7.5vw;line-height: 1.4; }
  #scale h2.en{font-size: 9vw;line-height: 1.4;padding-top: 0;}
  #scale h2.en span{font-size: 60%;}
  #scale h2 br{display: block;}
  #scale .img_area {align-items: flex-start;flex-direction: column;}
  #scale .img_area .img_wrap,
  #scale .img_area img:last-of-type{width: 100%;}
  #scale .img_area .img_wrap.flex{line-height: 0;justify-content: space-around; align-items:  flex-start; flex-direction: column;gap: 10px;}

  /*next*/
  #next{padding: 35px; border-radius: 50px;margin: 50px auto;}
  #next h3{font-size: 5.5vw; font-weight: 700;}
  #next p{font-size: 4vw;}
  #next .info{flex-direction: column; border-radius: 30px;}
  #next .info .title{width: 100%; padding: 1.5em 0 1em;}
  #next .info .icon_area{width: 100%;padding: 0 0 1.5em;}
  #next .info .sankaku{width: 100%; height: 50px; background-color:#59A1FF;clip-path: polygon(0 0, 100% 0%, 50% 50%);}
  #next .info p{font-size: 3vw;}


  /*------
  aside
  ------*/
  aside .inner{padding:50px 5%; background-image: none;}
  aside .inner a.btn{padding: 1.5em;}

}