@charset "utf-8";
/*--基本--*/
:root{
	--font-size:20px;
	--max-width:1200px;
	--color: #676767;/*文字色*/
	--color-hover: #9EFFF9;/*マウスオーバー時の文字色・色を変えない場合は「color」と同値にする*/
  --lang-active: #FF3F8A;
	--background: #fff;/*背景*/
  --spec-border: #ff899f;
  --btn:#fff;/*ボタンの色*/
  --btn-hover:#fff;/*ボタンの色:hover*/
  --btn-color:#0E2553;/*ボタンの文字色*/
  --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;
}

/* @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;padding: 1em; border-radius: 100px;
background:linear-gradient(180deg, #FF596C 0%, #FF8A98 100%); color: #fff; margin: 1em 0 0;overflow: hidden; transition: .3s;padding-right: 2em;}
a.btn::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
   background:linear-gradient(180deg, #FF8A98 0%, #FF596C 100%); 
    opacity: 0;
    transition: .3s;
}
a.btn:hover::before {
    opacity: 1;
}
a.btn span{color: #fff;text-align: center;font-size: .9em;font-style: normal;font-size: 1em; position: relative;z-index: 1;}
a.btn::after{content: ""; border: 1px solid #fff; border-width: 2px 2px 0 0; transform:  rotate(45deg);clip-path:none; width: .5em; height: .5em; background: none;z-index: 1;}
a.btn:hover{color: #fff;/* background: transparent; */}
a.btn:hover::after{clip-path: none; background: none;}


/*------
 body
------*/
body{position: relative; background-color: #fff;/*  background-image: url(../images/bg.png); */}

.parallax-wrap {position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;z-index: -1;}
.parallax-bg {width: 100%;height: auto;display: block;}
/*------
 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;}
header h2{width: 30%; max-width: 180px; line-height: 1;}
header h2 a{display: block; line-height: 0;}
header .menu_area{display: flex;align-items: flex-start; flex-wrap: wrap; gap: 20px; margin-left: auto;}

/*language*/
header .language{background: #fff; border: 1px solid #FF596C; 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 #FF596C;border-width: 0 1px 0 0;list-style: none;padding: 0 1em;color: #FF596C;}
header .language li a{font-weight: 600;color: #FF596C;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: #FFB4BD; 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;/* padding: 5px; */}
.share:first-of-type{padding: 5px;}
.share > img {line-height: 60px;transition: all .2s ease-in-out;transition-delay: 2s;}
.share.share_top {background: #FF596C;}
.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%; }
#hero .hero_inner {position: relative;width: 100%; padding-top: 5px;}
#hero .hero_inner picture{width: 32%; position: relative; z-index: 100;margin-left: 20%;filter: drop-shadow(0 0 10px #fff);}

#hero .text_area{position: absolute; top: 21%; left: 51%; z-index: 20; }
#hero .text_area a.btn{margin-left: .8em;}
#hero h1{line-height: 1.2; font-weight: 800;text-align: left;color: #fff;animation: heroReveal 1.5s ease forwards;}


#hero h1 span{padding:.2vw .7vw; display:block; margin-top: 5px;}
#hero h1 .scale{font-size: 3vw; -webkit-text-stroke: .7vw transparent; text-stroke: .7vw transparent;mix-blend-mode: screen;background: linear-gradient(#ffbbc0, #ff9ea8);background-clip: text; margin-left: .3em;font-weight: 400;}
#hero h1 .ttl{font-size: 4.5vw; -webkit-text-stroke: .7vw transparent; text-stroke: .7vw transparent;mix-blend-mode: screen;background: linear-gradient(#ff996e, #43df81);background-clip: text}
#hero h1 .sub{font-size: 3vw; margin-left: -1.5vw; -webkit-text-stroke: .7vw transparent; text-stroke: .7vw transparent;mix-blend-mode: screen;background: linear-gradient(#ff919d, #f79192);background-clip: text}
#hero h1 .scale.zh{margin-left: .1em;}
#hero h1 .sub.zh{ padding-left:2.5vw;}
#hero h1 .scale.en{margin-left: .1em;}
#hero h1 .sub.en{padding-left:2.5vw; font-size: 2.5vw; padding-bottom: .5vw;}

@keyframes heroReveal{
  0%{
    clip-path: inset(0 100% 0 0);
  }
  100%{
    clip-path: inset(0 0 0 0);
  }
}

/*背景*/
.bg_img{overflow: hidden;position:  absolute; left: 0; top: 0; clip-path: polygon(100% 0, 0 0, 0 100%); background: #FF7182; width: 85vw; height:  60vw; z-index: 1;}
.bg_img img{width: 70%; position: relative; z-index: 10;}
.bg_img .box{width: 200%; transform: rotate(
-35.13deg); height: 35vw; background: #FFB4BD; position: absolute; left: -50%; top: -30%; display: block;z-index: 1;}

.bg_img .box::after{content: ""; display: block; width: 100%; height: 10px; background: #FFB4BD; position: absolute; left: 0; bottom: -10%;}
.bg_img .box::before{content: "Aston Machan";color: #ffffff7b;font-size: 10vw;position: absolute;left: 15%;bottom: -18%;display: block;z-index: 500;font-weight: 900;}


.dot_bg{display: block; width: 100%; height: 15vw; position: absolute;left: 0%; top: 90%; z-index: -1;transform:skew(0, -35.13deg);overflow: hidden;}
.dot_bg .img{display: block; width:100% ;background: url(../images/bg_dot.png);  height: 200vw; transform:skew(0, 35.13deg);background-size: 20px; margin-top: -100vw;}
.bar_bg{display: block; width: 100%; height: 15vw; position: absolute;left: 0%; top: 80%; z-index: -1;transform:skew(0, -35.13deg);overflow: hidden;background: rgba(255, 211, 216, 0.10);}

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


/*------
 lead
------*/
#lead {width: 93%; max-width: 1800px; margin: 3em auto 0; position: relative; z-index: 10;}
#lead h2 {color: #FF596C;}
#lead h2 br{display: none;}
#lead p{line-height: 2; margin: 1em auto 0;}

/*------
 point
------*/
#point {overflow: hidden;margin: 10em auto 0; padding-bottom: 20vw;}
#point .inner{width: 93%; max-width: 1800px; margin: 0 auto; gap: 50px;position: relative;}
#point .box{align-items: center; width:calc((100%  - 100px) / 3);position: relative;}
#point .box:nth-child(2){margin-top: 5em;-webkit-transition-delay: 100ms;transition-delay: 100ms;}
#point .box:nth-child(3){margin-top: 10em;-webkit-transition-delay: 200ms;transition-delay: 200ms;}
#point .box a{width: 100%;border: 4px solid #FF596C; border-radius: 30px; overflow: hidden; line-height: 0;}
#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: 1em;}


/*------
 swiper
------*/
.swiper_wrap{position: relative; margin: 4em 0;}
.swiper_wrap::before{content: "";display: block; width: 100%; height: 3em; background: url(../images/slider_top.png) repeat-x;background-size: contain;position: absolute; left: 0; top: -3em;}
.swiper_wrap::after{content: "";display: block; width: 100%; height: 3em; background: url(../images/slider_bottom.png) repeat-x;background-size: contain; position: absolute; left: 0; bottom: -3em;}
.swiper_inner{overflow-x: clip;padding:50px 0;background: #FFC3CA;}

.swiper {overflow: visible !important;}
.swiper-slide{overflow: hidden; border-radius: 30px;box-shadow: 0 0 20px 0 #FF7386; border: 1px solid #FF596C; aspect-ratio: 1 / 1;}
.swiper-slide a{display: block; line-height: 0;}
.swiper-slide a img{transform: scale(1);transition: all 0.3s linear;}
.swiper-slide a:hover img{transform: scale(1.1);transition: all 0.3s linear;}
.swiper-button-next, .swiper-button-prev{color: #FF596C!important; top: calc(50% - 20px)!important;}
.swiper-pagination{position: relative!important; bottom: 0!important; margin-top: 1em;}
.swiper-pagination-bullet{background: #FFF!important; opacity: 1!important;width: 10px!important; height: 10px!important;}
.swiper-pagination-bullet-active{background: #FF596C!important;}
/*------
 preorder/goodsmile(online)
------*/
#preorder{width: 93%; margin: 10em auto 0;}
#preorder p{font-size: 2vw; text-align: center; font-weight: 700; color: #FF596C;}
#preorder p.date{font-size: 3.5vw;line-height: 1.5;}
#preorder p.date.en{font-size: 2.5vw;}
#preorder a.btn{margin: 1em auto 0; font-weight: 700; font-size: 1.1em;}
#preorder a.btn.en{max-width: 700px;}
#preorder p.date br{display: none;}
#preorder p.small{font-size: .8em; margin-top: .5em; font-weight: 300; color: #676767;}
#preorder p.small a{color: #FF596C;}
#preorder p br{display: none;}
#preorder p.shopping{font-size: 1.2em; margin-top: 1em;}
#preorder p.shopping br{display: block;}

/*------
 goodsmile
------*/
#goodsmile{border-radius: 50px; max-width: 1500px; width: 90%; padding:100px; margin: 5em auto 0;background: #ffffff81; box-shadow: 0 0 30px 0 rgba(255, 89, 108, 0.50); backdrop-filter: blur(10px);}
#goodsmile h4{margin-top: 2em; font-size: 1.5em;font-weight: 600;}
#goodsmile h4:first-of-type{margin-top: 0;}
#goodsmile h4 span{line-height: 1;vertical-align: middle; margin-right: .4em; }
#goodsmile h4 span img{width: 1em;}
#goodsmile p{margin-top: 1em; line-height: 2;}
#goodsmile a{max-width: 300px; margin: 2em auto 0; background:#FF939F;border: 2px solid #FF939F;}
#goodsmile a.btn:hover::before{display: none;}
#goodsmile a.btn:hover{background:#fff; }
#goodsmile a.btn:hover span{color: #FF939F;}
#goodsmile a.btn:hover::after{border-color:#FF939F;}

/*------
 specifications
------*/
#specifications{ width: 100%; max-width: 100%; margin-top: 20em; position: relative;}
#specifications h4::before{display: none;}
#specifications h4{max-width: 932px; width: 80%; margin: 0 auto;}
#specifications .inner{background: url(../images/bg_dot.png); width: 100%;background-size: 20px auto; margin-top: -2em; padding: 5em 0 4em;}
#specifications dl{max-width: 932px; width: 90%; margin: 0 auto; font-size: 1.2em;}
#specifications dd{border:none;}

/*------
 footer
------*/
footer{border: none; padding: 10em 0 150px; position: relative;}
footer .logo.flex{align-items: center; gap: 20px; justify-content: center;}
footer .logo_gsc{width: 30%; max-width: 200px; display: block;line-height: 1;}
footer p.copyright{text-align: center; font-size: .7em;}
footer p.copyright span{width: 150px; margin-left: .5em;}

/*------
 fixed_area
------*/

#fixed_area{position: fixed; left: 0; bottom: -80px; width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; background-color: #ffffff70; 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: #fff;position: relative;z-index: 10;}
#fixed_area p.small{font-size: 12px; }/*サイズ変更NG*/
#fixed_area p.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;}



/*------
 Heart
------*/
.heart {position:absolute; opacity: 0.4;
filter: drop-shadow(0 0 30px rgba(255, 89, 108, 0.50)); z-index: 100;}
.circle {position:absolute; opacity: 0.4; box-shadow: 0 0 10px rgba(255, 89, 108, 0.70); z-index: 100; display: block; background: #fff; border-radius: 1000px;}

/*hero*/
.hero01{width: 10%; top: 12%; right: 5%;}
.hero02{width: 3%; top: 6%; left: 1%;}
.hero03{width: 4%; top: 4.5%; left: 44%;}
.hero04{width: 1.5%; top: 18%; left: 59%;}
.hero05{width: 7%; top: 62%; right: 28%; z-index: 1;}
.hero06{width: 4%; top: 58%; left: 19%;}
.hero01-c{width: 1.2em; height: 1.2em; top: 20%; right: 5%;}
.hero02-c{width: 1em; height: 1em; top: 8%; left: 48%;}
.hero02-c{width: .7em; height: .7em; top: 9%; left: 1%;}

/*lead*/
.lead01{width: 6%; top: -9%; left: -2%; z-index: -1;}
.lead01-c{width: 1.5em; height: 1.5em; /* bottom: -25%; */ bottom: 50%; left: 8%;}

/*point*/
.point01{width: 25%; top: 10%; left: -12%; z-index: 3;}
.point02{width: 10%; top: 50%; right: -3%; z-index: 3;}
.point03{width: 20%;/* top: 10%; */ top: -20%; right: -8%;z-index: 3;}
.point04{width: 8%; bottom: -27%; right: 12%; z-index: 3;}
.point05{width: 5%; /* bottom: -36%;  */ bottom: 0; left: 20%; z-index: 3;}
.point01-c{width: 1.2em; height: 1.2em; top: 5%; right: 45%;}
.point02-c{width: 1em; height: 1em; bottom: 0%; left: 5%;}
.point03-c{width: 3em; height: 3em;/*  bottom: 2%; */ bottom: 87%; left: 2%; z-index: -1;}
.point04-c{width: .8em; height: .8em; bottom: -30%; left: 24.3%;}

/*slider*/
.slider01{width: 7%; top: -1%; left: -2%; z-index: 3;}
.slider02{width: 7%; bottom: 5%; right: 2%; z-index: 3;}

/*preorder*/
.preorder01{width: 5%; top: -21%; left: 19%; z-index: -1;}
.preorder02{width: 6%; bottom: -5%; right: 12%; z-index: -1;}

/*goodsmile*/
.goodsmile01{width: 12%; bottom: -8%; left: -6%; z-index: 3;}
.goodsmile02{width: 4%; /* bottom: -15%;  */ bottom: 130%; right: 8%; z-index: 3;}

/*specifications*/
.specifications01{width: 5%; bottom: 20%; right: 25%; z-index: 3;}


/*footer*/
.footer01{width: 4%; top: 20%; left: 20%; z-index: 3;}

.heart-anime-a {
  animation: heart-anime-a 2s ease-in-out infinite alternate-reverse;
}
.heart-anime-b{
  animation: heart-anime-a 2.5s ease-in-out infinite alternate-reverse;
}

@keyframes heart-anime-a {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}


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

  .bg_img{overflow: hidden;position:  absolute; left: 0; top: 0; clip-path: polygon(100% 0, 0 0, 0 100%); background: #FF7182; width: 90%; height:  81em; z-index: 1;}
  .bg_img .box{ height: 49em; }

  #hero h1 span{padding:.2em .2em; display:block; margin-top: 5px;}
  #hero h1 .scale{font-size: 1.8em; -webkit-text-stroke: .2em transparent; text-stroke: .2em transparent;mix-blend-mode: screen;background: linear-gradient(#ffbbc0, #ff9ea8);background-clip: text; margin-left: .0em;font-weight: 400;}
  #hero h1 .ttl{font-size: 3em; -webkit-text-stroke: .2em transparent; text-stroke: .2em transparent;mix-blend-mode: screen;background: linear-gradient(#ff996e, #43df81);background-clip: text}
  #hero h1 .sub{font-size: 2em; margin-left: -1.5vw; -webkit-text-stroke: .2em transparent; text-stroke: .2em transparent;mix-blend-mode: screen;background: linear-gradient(#ff919d, #f79192);background-clip: text}
  #hero h1 .sub.en{ font-size: 2em; }

  /*------
  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){

  /* #point .inner{width: 100%; margin: 0 auto;}
  #point .box h3 span {padding: 1em 20px;font-size: .9em;}
  #point .box.left p{margin: 1em 50px 0 20px;}
  #point .box.right p{margin: 1em 20px 0 50px;}
 */
  /*------
  footer
  ------*/
  footer{ background-size: 60% auto;}
}

@media screen and (max-width: 900px){
   #lead.window-scroll{opacity: 1; transform: translateY(0); }

   #hero h1 .sub.zh{ padding-bottom: 1vw;}
  /*------
  point
  ------*/
  #point{margin-top: 7em;}
  #point .inner{gap: 20px; flex-direction: column;}
  #point .box {width: 100%; display: flex;gap: 10px;}
  #point .box:nth-child(2),
  #point .box:nth-child(3){margin-top: 0;}
  #point .box a{width: 50%;}
  #point .box .text_area{width: calc(50% - 10px);}


  .point02 {width: 8%;top: 70%;right: 10%;}
  .point03 {width: 12%; top: 20%; /* top: 37%; left: 42%;*/ right: 10%; z-index: -1;}
  .point01-c {width: 5em;height: 5em;top: 8%;right: -4%;z-index: -1;}
  .point02-c {bottom: 2%;width: 2em; height: 2em;}
  .point03-c {bottom: 5%;left: -3%;}


}

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

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

  /*------
  header
  ------*/
  header{z-index: 200; padding: 10px;}
  header .menu_area{position: fixed; right: -100%; top: 0; width: 100%; height: 100vh;background: rgba(255, 180, 189, 0.8); 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;}
  .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 #fff; border-width: 0 1px 0 0;}
  .menu_area .language li:first-of-type{width: 100%; text-align: center; padding: 0; margin-bottom: 1em;font-size: 1.4em;color: #fff;}
  .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;color: #FF596C;}

  
  /*Share*/
  .share_wrap {display: flex; gap: 0 20px;flex-wrap: wrap;width: 100%;justify-content: center;margin:0; position: relative;color: #fff; 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: #fff;font-size: 1.4em;}
  .share_top{display: none;}
  .share{width: 50px; height: auto; line-height: 1;}
  .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: #FFB4BD;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: 261951all 0.2s linear; background: var(--btn);}
  .btn_nav.active span::after{transform: rotate(45deg);bottom: calc(50% - 1px);transition: all 0.2s linear;background: var(--btn);}
  .btn_nav.active span{background: #ffffff00;}

  /*背景*/
  .bg_img{overflow: hidden;position:  absolute; left: 0; top: 0; clip-path: polygon(0 0, 100% 0, 100% 28%, 0% 100%); background: #FF7182; width: 100%; height:  98vw; z-index: 1;}
  .bg_img img{width: 75%; position: relative; z-index: 10; margin-left: -2.5%; margin-top: -2%;}
  .bg_img .box{/* width: 200%; transform: rotate(
  -35.13deg); */ height: 69vw; /* background: #FFB4BD; position: absolute; left: -50%; top: -30%; display: block;z-index: 1; */}

  .bg_img .box::before{/* content: "Aston Machan";color: #ffffff7b; */font-size: 15vw;/* position: absolute; */left: 8%;bottom: -17%;/* display: block;z-index: 500;font-weight: 900; */}


  .dot_bg{/* display: block; width: 100%; */ height: 40vw; top: 100%;/* position: absolute;left: 0%; top: 90%; z-index: -1;transform:skew(0, -35.13deg);overflow: hidden; */}
/*   .dot_bg .img{display: block; width:100% ;background: url(../images/bg_dot.png);  height: 200vw; transform:skew(0, 35.13deg);background-size: 20px; margin-top: -100vw;} */
  .bar_bg{/* display: block; width: 100%; */ height: 30vw; top: 110%  /* position: absolute;left: 0%; top: 80%; z-index: -1;transform:skew(0, -35.13deg);overflow: hidden;background: rgba(255, 211, 216, 0.10) */;}


  /*------
  hero
  ------*/
  #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;}

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

  #goodsmile{padding: 50px;}
  #goodsmile h4{font-weight: 700; /* font-size: 1.2em; */}
  /* #goodsmile p{font-size: .9em;} */
  #goodsmile a{font-size: 1.2em;}

  /*------
  specifications
  ------*/
  #specifications h4{max-width: 400px;}
  #specifications{width: 100%; padding: 0;}
  #specifications dl{width: 80%; margin: 0 auto;}
  #specifications dt{font-size: .9em;border-color: #67676797;}
  #specifications dd{font-size: 1.1em;font-weight: 500;}
  
  /*------
  footer
  ------*/
  footer{padding: 5em 0 100px; background-size: 60% auto;}


  /*------
  Heart
  ------*/
  .hero01 {top: 23%;right: 13%;}
  .hero03 {width: 9%;top: 5.5%;left: auto;right: 24%;}
  .hero05 {width: 11%;top: 42%;right: auto;left: 19%; }
  .hero06 {width: 15%;top: auto;bottom: 38%;left: 12%;z-index: 1;}
  .hero01-c {bottom: 74%;/* left: 20%; */top: auto;right: 20%;}
  .lead01-c {width: 1em;height: 1em;bottom: -10%;right: 8%;left: auto;}

  .lead01{width: 30%;left: auto; right: 5%; top: auto; bottom: -25%;}

  .slider01{width: 15%;/* left: 13%;top: 5%; */left: 4%;top: 2%;}
  .slider02{width: 12%;}

  .preorder01 {width: 15%;bottom: -6%;left: 5%;}
  .preorder02{width: 11%;}
  

  .goodsmile01 {width: 16%;bottom: -7%;left: 7%;}
  .goodsmile02{bottom: 70%; width: 14%;}

  .specifications01 {width: 15%;bottom: -4%;right: 8%;}



}

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

  #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: 20px; flex-direction: column;} */
  #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%;}

  .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;}

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

  #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%;}
}