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

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

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

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



a.btn {position: relative; width: 100%;line-height: 1.2; border-radius: 100px; background:#FFF3F3; color: #8D8D3B; margin: 1em 0 0;overflow: hidden; transition: .3s;padding-right: 2em; padding: 0; border: 2px solid #FFF3F3; height: 55px;display: flex; align-items: stretch;}
a.btn .div{border: 2px solid #8D8D3B;border-radius: 100px; width: 100%;display: flex; flex-direction: column; align-items: center;justify-content: center;}
a.btn span{color: #8D8D3B;text-align: center;font-size: .9em;font-style: normal;font-size: 1em; position: relative;z-index: 1; }
a.btn::after{content: ""; border: none; width: 20px;height: 6px; position: absolute; right: 25px; top: calc(50% - 3px);background: url(../images/icon_arrow.png);background-size: 100% auto; background-position: center center;clip-path:none;transition: all 0.2s linear;}
a.btn:hover{color: #8D8D3B;}
a.btn:hover::after{clip-path: none; right: 15px;background: url(../images/icon_arrow.png);background-size: 100% auto; background-position: center center;}


/*------
 body
------*/
body{position: relative; background-image: linear-gradient(to bottom,#170a1d,#320632);}

#starry_sky {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  background-image: linear-gradient(to bottom,#170a1d,#470a47);
}

.star {
  background-color: white;
  position: relative;
  border-radius: 50%;
  animation-name: twinkle;
  animation-iteration-count: infinite;
}


@keyframes twinkle {
  50% {
    transform: scale(0.2);   
  }
} 

/*------
 font
------*/
.kumar-one-outline-regular {
  font-family: "Kumar One Outline", system-ui;
  font-weight: 400;
  font-style: normal;
}
.kumar-one-regular {
  font-family: "Kumar One", serif;
  font-weight: 400;
  font-style: normal;
}


/*------
 commne
------*/
main h3{font-size: 4vw;position: relative; display: flex; gap: 20px;align-items: center;text-align: center;justify-content: center;filter: drop-shadow(0 0 10px #772121);}
main h3::after,
main h3::before{content: ""; background: url(../images/icon_ttl.png); width: .5em; height:.5em; background-size: contain;background-position: center center; justify-content: center; align-items: center; margin-top: -.4em;}

.bar_top,
.bar_bottom{position: relative; display: block; margin: 3em auto; border: 1px solid #E7D5AE;width: calc(93% - 6em); height: 8px;}
.bar_top{border-width: 3px 0 1px 0 ; }
.bar_bottom{ border-width: 1px 0 3px 0 ;}

.bar_top::before{content: ""; width: 3em; height: 1.5em; display: block; position: absolute; left: -3.5em; top: -.5em; background: url(../images/icon_bar-top-l.png) no-repeat; background-size: contain;}
.bar_top::after{content: ""; width: 3em; height: 1.5em; display: block; position: absolute; right: -3.5em; top: -.5em; background: url(../images/icon_bar-top-r.png) no-repeat; background-size: contain;}

.bar_bottom::before{content: ""; width: 3em; height: 1.5em; display: block; position: absolute; left: -3.5em; top: -.5em; background: url(../images/icon_bar-bottom-l.png) no-repeat; background-size: contain;}
.bar_bottom::after{content: ""; width: 3em; height: 1.5em; display: block; position: absolute; right: -3.5em; top: -.5em; background: url(../images/icon_bar-bottom-r.png) no-repeat; background-size: contain;}

/*------
 header
------*/
header{position: absolute;left: 0; top:0; padding: 10px 80px 10px 10px;z-index: 100;width: 100%; font-size: 15px;}
header p{max-width: 210px;width: 30%;}
header .inner.flex{display: flex;align-items: flex-start;flex-wrap: wrap;gap: 20px;}
header h2{width: 30%; max-width: 180px; line-height: 1;}
header h2 a{display: block; line-height: 0;}
header a.btn{margin: 0; width: 300px; /* padding: .5em; */}
header a.btn span.small{font-size: 12px;}
header .menu_area{display: flex;align-items: flex-start; flex-wrap: wrap; gap: 20px; margin-left: auto;}

header .menu_area a.btn{display: none;}

/*language*/
header .language{background: #FFF3F3; border: none; border-radius: 100px; height: 50px;font-weight: 400;padding: 0 1em; display: flex;flex-wrap: wrap;align-items: center;}
header .language ul{align-items: center;gap: 10px; margin-left: 1em;}
header .language li{border: 1px solid #8D8D3B;border-width: 0 1px 0 0;list-style: none;padding: 0 1em;color: #8D8D3B;}
header .language li a{font-weight: 600;color: #8D8D3B;text-decoration: none;display: block;}
header .language li:first-of-type{margin-left: 0;}
header .language li:last-of-type{border: none;}
header .language li.active a,
header .language li a:hover{color: #FFA3A3; text-decoration: none;}

/*Share*/
.share_wrap {position: absolute;top: 10px;right: 10px;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;cursor: pointer;-webkit-transition: all .1s ease-out;transition: all .1s ease-out;position: relative;}
.share:first-of-type{padding: 5px;}
.share > img {line-height: 60px;transition: all .2s ease-in-out;transition-delay: 2s;}
.share.share_top {background: #FFA3A3;}
.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; max-width: 2560px; margin: 0 auto; width: 100%; z-index: 100;}
#hero .hero_inner {position: relative;width: 100%; padding:0 1% 0 2%;}
#hero .hero_inner .mv{width: 55%; padding:0 0 0 50px; position: sticky;top: 0; }
#hero .hero_inner .mv img{filter: drop-shadow(0 0 10px #fff); margin-top: -10%;}
#hero .hero_inner .text_area{width: 42%;}
#hero .hero_inner .hero_text{height: 100vh; align-items: center;display: flex; }
#hero .hero_inner a.btn{display: none;}

#hero h1{color: #FFF; text-align: center;line-height: 1.2;}
#hero h1 .scale{font-size: 2.5vw; color: #E1F6FF;}
#hero h1 .ttl{font-size: 10vw;background: linear-gradient(180deg, #E1F6FF 0%,#ffffff 35%, #ffffff 64%, #FFB8F4 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#hero h1 .ttl.en{font-size: 4.5vw;}
#hero h1 .sub{font-size: 3vw;color: #FFB8F4;}

/*------
 main
------*/
main {width: 100%; max-width: 2560px; margin: -10% auto 0; position: relative; z-index: 10;}


/*------
 lead
------*/
#lead {width: 100%;color: #FEFFF3; margin: 0 auto; position: relative; z-index: 10; padding: 5px;text-shadow: 0 0 10px #ffffffc7;}
#lead h2{font-size: 3vw;}
#lead p{line-height: 2; margin-top: 1em;font-size: 1.3em; font-weight: 600; }
#lead p span{font-size: .8em;}

/*------
 sc
------*/
#sc.flex{gap: 20px; margin-top: 5em;}
#sc img{width: 100px;filter: drop-shadow(0 0 10px #ffffffc7);}
#sc p{width: calc(100% - 120px); font-size: 1.2em; font-weight: 600;text-shadow: 0 0 10px #ffffffc7;line-height: 2;margin-top: -.5em;}

/*------
 point
------*/
#point {overflow: hidden;margin: -40% auto 0; padding-bottom: 10px;}
#point .inner{width: 93%; max-width: 1800px; margin: 0 auto; gap: 50px;position: relative;/*  justify-content: center; */}
#point .box{align-items: center; width:calc((100%  - 100px) / 3);position: relative; }
#point .box:nth-child(2),
#point .box:nth-child(5){margin-top: 5em;-webkit-transition-delay: 100ms;transition-delay: 100ms;}
#point .box:nth-child(3),
#point .box:nth-child(5){/* margin-top: 10em; */-webkit-transition-delay: 200ms;transition-delay: 200ms;}
#point .box a{width: 100%; border-radius: 20px; overflow: hidden; line-height: 0;box-shadow: 0 0 10px #f1ffb9,0 0 10px #fff;position: relative;} 
#point .box a img{transition: all 0.3s linear;}
#point .box a:hover img{transform: scale(1.1);transition: all 0.3s linear;}
#point .box .text_area{width: 100%; margin-top: 2em;position: relative;}
#point .box .text_area p.no{position: absolute; right: .1em; top: -1.2em; font-size: 6em;color: #E7D5AE; text-shadow: 0 0 3px #00000046;}

#point a.btn{margin: 5em auto 0; height: 80px;}
#point a.btn::after{display: none;}
#point a.btn:hover{box-shadow: 0 0 10px #f1ffb9,0 0 20px #f1ffb9;}

/*------
 swiper/gallery
------*/
.gallery_wrap{position: relative; margin: 15em auto 0;}
.gallery_inner{overflow-x: clip;padding:0;}
.gallery {overflow: visible !important;}
.swiper-slide{ aspect-ratio: 1 / 1.3333; position: relative;}
.swiper-slide a{display: block; line-height: 0;overflow: hidden;}
.swiper-slide a img{transform: scale(1);transition: all 0.3s linear;aspect-ratio: 1 / 1.333;object-fit: cover;}
.swiper-slide a:hover img{transform: scale(1.1);transition: all 0.3s linear;}
.swiper-button-next, .swiper-button-prev{color: #E7D5AE!important; top: calc(50% - 20px)!important;}
.swiper-pagination{position: relative!important; bottom: 0!important; margin-top: 1em;}
.swiper-pagination-bullet{ background: url(../images/icon_page.png)!important; background-size: contain!important; opacity: 1!important;width: 10px!important; height: 10px!important;width: 1em!important; height: 1em!important; background-repeat: no-repeat!important;}
.swiper-pagination-bullet-active{background: url(../images/icon_page-a.png)!important; background-size: contain!important; opacity: 1!important;width: 10px!important; height: 10px!important;width: 1em!important; height: 1em!important; background-repeat: no-repeat!important;}



/*------
 history
------*/
#history {width: 93%;max-width: 1800px;margin: 15em auto 0;}
#history p{text-align: center;font-size: 1.2em;}
#history .img_area{position: relative; margin-top: 4em; }
#history .img_area:last-of-type{margin-top: 8em;}
#history .img_area h4,
#history .img_area h5{position: absolute; font-size: 4vw; line-height: 1;text-shadow: 0 0 10px #000000,0 0 10px #88EFFF;pointer-events:none;}
#history .img_area h4{right: -.25em; bottom: -.4em; text-align: right;}
#history .img_area h5{left: -.25em; top: -.5em; text-align: left;}
#history .img_area a{width: 50%; display: block; line-height: 0;}
#history .img_area + p{margin-top: 2em; text-align: left;}
#history .img_area + p span{font-size: .9em;}

/*------
 viewer
------*/
#viewe {width: 93%;max-width: 1800px;margin: 15em auto 0;}
#viewe p{text-align: center;font-size: 1.2em;}
#viewe .icon_viewer{max-width: 120px; width: 25%; position: absolute; right: -2em; top: 5em;}
#viewe .stage{position: relative;width: 100%; margin: 0 auto;}
#viewer.cloudimage-360 {/* width: 100%; height: auto; */ width: auto; height: 100vh; margin: 0 auto; max-width: 90%;}
/* #viewer .cloudimage-360-inner-box{height: 100vh!important;; width: auto!important;margin:  0 auto;} */
/*------
 preorder/goodsmile(online)
------*/
#preorder{width: 93%; max-width: 1800px; margin: 15em auto 0;}
#preorder p{font-size: 2vw; text-align: center; font-weight: 700;text-shadow: 0 0 10px #772121;}
#preorder p.date{font-size: 3vw;line-height: 1.5; text-shadow: 0 0 10px #772121;}
#preorder p.date.en{font-size: 2.5vw;}
/* #preorder p.shopping{} */
#preorder a.btn{margin:.5em auto 0; font-weight: 700; font-size: 1.2em; width: auto; height: auto;}
#preorder a.btn .div{padding: .8em 0;}
/* #preorder a.btn br{display: none;} */
#preorder a.btn.en{max-width: 700px;}
#preorder a.btn.en .div{padding: .8em 2em;}
#preorder p.date br{display: none;}
#preorder p.small{font-size: .8em; margin-top: .5em; font-weight: 300; color: #fff;}
#preorder p.small a{color: #ffa8ff;}
#preorder p br{display: none;}
#preorder p.shopping_wd{font-size: 1em; width: 93%; margin: 1em auto 0; text-align: center;}
#preorder p.shopping_wd br{display: block;}

/*------
 goodsmile
------*/
#goodsmile{border-radius: 50px; max-width: 1500px; width: 80%; margin: 5em auto 0; }
#goodsmile .inner{width: 85%; margin: 0 auto; padding: 25px 0;}
#goodsmile h4{margin-top: 2em; font-size: 1.5em;font-weight: 700;}
#goodsmile h4:first-of-type{margin-top: 0;}
#goodsmile p{margin-top: 1em; line-height: 2;}
#goodsmile a{max-width: 300px; margin: 2em auto 0;}
#goodsmile a.btn:hover::before{display: none;}


/*------
 specifications
------*/
#specifications{ width: 100%; max-width: 100%; margin: 20em auto 0; position: relative; }
#specifications .inner{position: relative; z-index: 5;}
#specifications h3{ margin: 0 auto; font-size: 2.8vw;}
#specifications h4::before{display: none;} 
#specifications h4{text-align: center; margin-top: 2em; text-shadow: 0 0 10px #772121;}
#specifications p{font-size: 1.6em; font-weight: 700;text-align: center; text-shadow: 0 0 10px #772121;width: 80%; margin: .5em auto 0; max-width: 1500px;}
#specifications p span{font-size: .8em;}
#specifications .bg{position: absolute; left: 0; top: 0;object-fit: cover;
  -webkit-mask-image: linear-gradient(to top, transparent 5%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 5%, black 20%);opacity: .4;height: 100%; background: url(../images/bg_footer.jpg); display: block; width: 100%; background-size: 100% auto;}

/*------
 footer
------*/
#specifications footer{border: none; padding: 20em 0 150px; position: relative; z-index: 5;}
#specifications footer .logo.flex{align-items: center; gap: 20px; justify-content: center;}
#specifications footer .logo a{display: block; line-height: 0;}
#specifications footer .logo a img{filter: drop-shadow(0 0 10px #772121);}
#specifications footer .logo_gsc{width: 30%; max-width: 200px; display: block;line-height: 1; margin: 0;}
#specifications footer .logo_gsc_sc{width: 35%; max-width: 230px; display: block;line-height: 1; margin: 0;}
#specifications footer p.copyright{text-align: center; font-size: .9em; margin-top: 1em; text-shadow: 0 0 10px #772121;}

/*------
 fixed_area
------*/
#fixed_area{position: fixed; left: 0; bottom: -80px; width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; background-color: #ffffff38; backdrop-filter: blur(10px); transition: .5s; z-index: 200; border: 1px solid #f7919315; border-width: 1px 0 0 0;}
#fixed_area.visible{bottom: 0;transition: .5s;}
#fixed_area a{display: flex;flex-direction: column;position: relative;}
/* #fixed_area a::after{content: "";display: block; width: .5em; height: .5em; position: absolute; right: 1em; top: calc(50% - .2em); border: 1px solid #fff; border-width: 2px 2px 0 0; transform: rotate(45deg);} */
#fixed_area p{color: #8D8D3B;position: relative;z-index: 10;}
#fixed_area span.small{font-size: 12px; }/*サイズ変更NG*/
#fixed_area span.middle{font-size: 16px;font-weight: bold;}/*サイズ変更NG*/
#fixed_area a.btn{/* background: #fff; */ display: flex; align-items: center; justify-content: center; text-decoration: none; width: 300px; height: 50px; /* border-radius: 100px; padding: .5em 1em;*/ margin-top: 0; }
#fixed_area a.btn .div{height: 100%;}



@media screen and (min-width: 2560px){

  #hero h1 .scale{font-size: 2em;}
  #hero h1 .ttl{font-size: 6em;}
  #hero h1 .sub{font-size: 3em;}

  #hero h1.en .ttl{font-size: 2.9em;}
  #hero h1.en .scale{font-size: 1.2em;}
  #hero h1.en .sub{font-size: 1.5em;}

  #lead h2 {font-size: 3em;}
  main h3{font-size: 4em;}

  #history .img_area h4, 
  #history .img_area h5{font-size: 3em;}
  #specifications h3{font-size: 2.5em;}

  
  

  /*------
  preorder/goodsmile(online)
  ------*/
  #preorder p{font-size: 2em; }
  #preorder p.date{font-size: 3.5em;}
  #preorder p.date.en{font-size: 2.5em;}
  }

@media screen and (max-width: 1200px){
  a.btn {height: 50px;}

  #hero .hero_inner .mv img{margin-top: 5%;}

  /*------
  header
  ------*/
  header{z-index: 200; padding: 10px;}
  header .menu_area a.btn{display: flex; margin: 0 auto;box-shadow: 0 0 10px #470a47a1;}
  header .menu_area{position: fixed; right: -100%; top: 0; width: 100%; height: 100vh;background: #ffe5fbcb; align-items: stretch;flex-direction: column; justify-content: center;display:flex;overflow-x: hidden; opacity: 0;transition: all .5s ease-out;opacity: 0; gap: 50px;z-index: 100;}
  .menu_area.active{right: 0;transition: all .5s ease-out;opacity: 1; right: 0; }
  header h2{max-width: 150px;}

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

  
  /*Share*/
  .share_wrap {display: flex; gap: 0 20px;flex-wrap: wrap;width: 100%;justify-content: center;margin:0; position: relative;color: #170a1d; text-align: center; margin-top: -50px;top: auto; right: auto}
  .share_ttl{text-align: center;width: 100%; max-width: 100%; margin-bottom: .5em; display: block; color: #170a1d;font-size: 1.4em;/* text-shadow: 0 0 10px #470a47a1; */}
  .share_top{display: none;}
  .share{width: 50px; height: auto; line-height: 1;/* box-shadow: 0 0 10px #470a47a1; */ /* filter: drop-shadow(0 0 10px #470a47a1); */}
  .share:not(:first-child), .share_wrap:hover .share:not(:first-child){ opacity: 1;margin: 0;}

  .share > img{line-height: 40px;}

  header a.btn{width: 300px;}
  .btn_nav{display: flex; background: none;width: 40px; height: 40px; border-radius: 100px;margin-left: auto; z-index: 200; padding: 5px; justify-content: center; align-items: center;position: fixed; right: 10px;}
  .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 span{background: var(--btn);}
  .btn_nav.active{background: none;}
  .btn_nav.active span::before{transform: rotate(-45deg);top: calc(50% - 1px);transition: all 0.2s linear; background: #170a1d;}
  .btn_nav.active span::after{transform: rotate(45deg);bottom: calc(50% - 1px);transition: all 0.2s linear;background: #170a1d;}
  .btn_nav.active span{background: #ffffff00;}

  /*------
    lead
    ------*/
    #lead h2{font-size: 1.8em;}
    #lead p{font-size: 1em;}
    #lead.window-scroll{opacity: 1; transform: translateY(0); }
    

    /*------
    sc
    ------*/
    #sc p,
    #history p,
    #viewe p{font-size: 1em; }
    #specifications p{font-size: 1.5em;}

    .gallery_wrap,
    #history,
    #viewe,
    #preorder{margin-top: 5em;}
}


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

  /*------
  commne
  ------*/
  main h3{font-size: 8vw;}
  #hero h1 .sub.zh{ padding-bottom: 1vw;}

  /*------
  hero
  ------*/
  /* #hero {position: relative; max-width: 2560px; margin: 0 auto; width: 100%; z-index: 100;}*/
  #hero .hero_inner {/* position: relative;width: 100%; padding:0 1% 0 2%; */flex-direction: column-reverse;} 
  #hero .hero_inner .mv{/* width: 55%; padding:0 0 0 50px;  */position: relative;/* top: 0;  */  width: 90%; margin: 0 auto; padding: 0;}
  /* #hero .hero_inner .mv img{filter: drop-shadow(0 0 10px #fff); margin-top: -10%;}
  
  #hero .hero_inner .hero_text{height: 100vh; align-items: center;display: flex; }
  #hero .hero_inner a.btn{display: none;}*/
  #hero .hero_inner .text_area{width: 90%; margin: 1em auto 0; z-index: 10;}
  #hero .hero_inner .hero_text{height: auto;}
  #hero h1{color: #FFF; text-align: center;line-height: 1.2;text-align: center; width: 100%;}
  #hero h1 .scale{font-size: 5vw; color: #E1F6FF;}
  #hero h1 .ttl{font-size: 20vw;/* background: linear-gradient(180deg, #E1F6FF 0%,#ffffff 35%, #ffffff 64%, #FFB8F4 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent; */}
  #hero h1 .sub{font-size: 6vw;/* color: #FFB8F4; */} 

  /*------
  main
  ------*/
  main {width: 100%; max-width: 2560px; margin: -10% auto 0; position: relative; z-index: 10;}


  /*------
  lead
  ------*/
  #lead {margin-top: 3em;}
  #lead h2{text-align: center; font-size: 2.5em;}
  #lead p{font-size: 1.1;}

  /*------
  sc
  ------*/
  #sc.flex{gap: 20px; margin-top: 2em; flex-direction: column; width: 100%;justify-content: center; align-items: center;}
  #sc img{width: 80px;}
  #sc p{width: 100%;}


  /*------
  point
  ------*/
  /* #point{margin-top: var(--font-size);} */
  #point .inner{gap: 20px; flex-direction: column;}
  #point .box {width: 100%; display: flex;gap: 10px;align-items: flex-start;}
  #point .box:nth-child(2),
  #point .box:nth-child(3),
  #point .box:nth-child(5){margin-top: 0;}
  #point .box a{width: 50%;}
  #point .box .text_area{width: calc(50% - 10px); margin-top: 0;}
  #point .box .text_area p{margin-top: -3em;}
  #point .box .text_area p.no{position: relative; top: auto;right: auto;margin-top: 0; }

  #point a.btn{font-size: 3vw;width: 80%; height: 60px;}

}

@media screen and (max-width: 768px){
  header a.btn{display: none;}
  .parallax-bg{width: 200%;}

  /*------
  body
  ------*/
  body{background-size: 200% auto; background-position: right 30% bottom 0;}

  

  /*------
  hero
  ------*/
  #hero .hero_inner a.btn{display:flex;}
  /* #hero h1{text-align: left; right: auto; left: 0; top: 8vh; width: 100%; }
  

  #hero .text_area {position: relative; z-index: 100; width: 80%; margin: -30% auto 0;top: auto; left: auto; filter: drop-shadow(0 0 20px #fff);}
  #hero .text_area h1{text-align: center;filter: drop-shadow(0 0 20px #fff);} */
 /*  #hero h1 span{-webkit-text-stroke: 1vw transparent; text-stroke: 1vw } */
/*   #hero h1 .scale{font-size: 4vw;-webkit-text-stroke: 1vw transparent; text-stroke: 1vw}
  #hero h1 .ttl{font-size: 8vw;-webkit-text-stroke: 1vw transparent; text-stroke: 1vw}
  #hero h1 .sub{font-size: 7vw;-webkit-text-stroke: 1vw transparent; text-stroke: 1vw;margin-left: 0;}
  #hero h1 .scale.zh{margin-left: 0; }
  #hero h1 .sub.zh{ padding-left:0;}
  #hero h1 .scale.en{margin-left: 0;}
  #hero h1 .sub.en{padding-left:0; font-size: 4vw; padding-bottom: .5vw;} */

  /* #hero .hero_inner picture{width: 70%; margin: 2.5%  0 0 15%;}
 

  #lead h2 span.border::before{display: none;}
  #lead h2 span{text-shadow: none;}
  #lead h2 span.border{font-size: 6.8vw;}
  #lead h2 span.text{padding: 0 10px; background: linear-gradient(transparent 40%, #1432709b 0%);display: inline;}
  #lead  p{text-align: left;}
  #lead h2 br{display: block;} */

  
  
  /* #viewe .stage{width: 100;} */
  #viewe .icon_viewer{max-width: 100px; width: 15%; right: 0; top: 1em;}

  /*------
  history
  ------*/
  /* #history {width: 93%;max-width: 1800px;margin: 15em auto 0;}
  #history p{text-align: center;font-size: 1.2em;} */
  #history .img_area{flex-direction: column;}
  #history .img_area a{width: 100%;}
   #history .img_area h4,
  #history .img_area h5{font-size: 7vw; text-align: center; width: 100%; left: auto; right: auto;}
  /* #history .img_area:last-of-type{margin-top: 8em;}
  #history .img_area h4,
  #history .img_area h5{position: absolute; font-size: 4vw; line-height: 1;text-shadow: 0 0 10px #000000,0 0 10px #88EFFF;pointer-events:none;}
  #history .img_area h4{right: -.25em; bottom: -.4em; text-align: right;}
  #history .img_area h5{left: -.25em; top: -.5em; text-align: left;}
  #history .img_area a{width: 50%; display: block; line-height: 0;}
  #history .img_area + p{margin-top: 2em; text-align: left;}
  #history .img_area + p span{font-size: .9em;} */

  /*------
  pointpreorder
  ------*/
  #preorder{position:relative;background: none; height: auto;}
  #preorder p{font-size: 3vw; }
  #preorder p.date{font-size: 5vw;}
  #preorder p.date br{display: block;}
  #preorder p.date.zh{font-size: 3.8vw;}
  #preorder p.date.en{font-size: 5vw;}
  #preorder a.btn{max-width: 500px;}
  #preorder p.shopping br{display: none;}
  

  #goodsmile{padding: 0px;width: 90%;}
  #goodsmile .inner{width: 100%; padding: 0 50px;}
  #goodsmile a{font-size: 1.2em;}


  footer{padding: 5em 0 100px; background-size: 60% auto;}

  #specifications h3{font-size: 5vw;}
  #specifications .bg{background-size: 200% auto;}

}

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

 /*  #hero h1 .scale{-webkit-text-stroke: 1.5vw transparent; text-stroke: 1.5vw}
  #hero h1 .ttl{-webkit-text-stroke: 1.5vw transparent; text-stroke: 1.5vw}
  #hero h1 .sub{-webkit-text-stroke: 1.5vw transparent; text-stroke: 1.5vw} */



  /*------
  point
  ------*/
  /* #point{margin-top: 5em;} */
  #point .inner{gap: 50px;}
  #point .box {width: 100%; display: flex;gap: 5px; flex-direction: column;}
  /* #point .box:nth-child(2),
  #point .box:nth-child(3){margin-top: 0;} */
  #point .box a{width: 100%;}
  #point .box .text_area{width: 100%; margin-top: -5em;}
  #point .box .text_area p.no{text-align: right;}

  .point03 {z-index: 3;}
  .slider01{left: 13%;top: 5%;}
  .preorder01 {top: -10%;left: 10%;}


}



@media screen and (max-width: 500px){
  
  #lead p br{display: none;}

  #img{width: 100%; aspect-ratio: 5 / 4; background-size: 300% auto; background-position: left top;}

  /* #viewe .stage{width: 100%;} */

  /*------
  pointpreorder
  ------*/
  #preorder{margin-top: 0;}
  #preorder p br,
  #preorder p.date br{display: block;}
  #preorder p{font-size: 4.5vw; }
  #preorder p.date{font-size: 6.2vw;}
  #preorder p.date.zh{font-size: 5.5vw;}

  #goodsmile .inner {padding: 0 30px;}

  /* #goodsmile {padding:40px 30px;} */
  /* #goodsmile h4 {position: relative; padding:  0 0 0 1em;}
  #goodsmile h4 span {position: absolute;z-index: -1; top: .5em; left:-.25em;}
  #goodsmile h4 span img{width: 50%;} */
}