@charset "utf-8";
/*--基本--*/
:root{
	--font-size:20px;
	--max-width:1200px;
	--color: #fff;/*文字色*/
	--color-hover: #9EFFF9;/*マウスオーバー時の文字色・色を変えない場合は「color」と同値にする*/
  --lang-active: #FF3F8A;
	--background: #0E2553;/*背景*/
  --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%; /* 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
------*/
body{position: relative; background-image: url(../images/bg.png); background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto;}

/*------
 header
------*/
header{position: fixed;font-size: 15px; background: rgba(14, 37, 83, 0.41); padding-right: 70px; max-width: 2560px;}
/* header.wd{font-size: 15px;} */
header p{max-width: 210px;width: 30%;}
header .inner.flex{align-items: flex-start;}
header h2{width: 30%; max-width: 180px; line-height: 1;}
header .menu_area{gap: 20px;}

/*language*/
header .language{background: none; align-items: center;height: 50px;font-weight: 400; /* padding: 0 1em; */}
header .language ul{align-items: center;gap: 10px; margin-left: 1em;}
header .language li{padding: 0; border: 1px solid #fff; border-width: 0 1px 0 0;}
header .language li a{font-weight: 600;line-height: 1;/* background: #fff;  */padding: .25em 1em; border-radius: 100px; /* margin-left: 1em; */}
header .language li:first-of-type{background: none;color: #fff;margin-left: 0;padding: .25em 1em;}
header .language li.active a,
header .language li:hover a{background: none; cursor: pointer;}
header .language li:hover:first-of-type{background: none;}
header .language a{display: block; color: #fff;}
header .language li.active a,
header .language li a:hover{color: #fff; text-decoration: none;}

header a.btn{width: auto;background: none; height: 50px; display: flex; align-items: center; justify-content: center; padding: 0 2em; border: 1px solid #FFF; /* border-radius: 0;font-weight: 600; */ color: #fff;}
header a.btn:hover{color: #0E2553; background: #fff;}
header a.btn::after{content: ""; display: none;} 

/*Share*/
.share_wrap {top: 12px;margin:0;right: 10px;z-index: 100; position: absolute;}
.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 > img {line-height: 60px;transition: all .2s ease-in-out;transition-delay: 2s;}

.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: 20px 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%;}
#hero .hero_inner picture{width: 100%; position: relative;}
#hero .hero_inner picture::after{content: ""; display: block;width: 100%; height: 200px; position: absolute; bottom: 0; left: 0; background-image: linear-gradient(0deg, #0e2553 50%, transparent);}

#hero h1{line-height: 1.5; text-align: center; position: absolute; top: 15%; right: 2.5%; z-index: 20; font-weight: 800;text-align: right;}
#hero h1.en{top: 60%;}
#hero h1 .scale{font-size: 2vw;}
/* #hero h1.en .ttl{font-size: 7vw;} */
#hero h1 .ttl{font-size: 3vw;;text-decoration: underline;text-decoration-thickness: 0.8em;  text-decoration-color:#1432709b; text-underline-offset: -0.5em;text-decoration-skip-ink: none;}
#hero h1 .sub{display: inline-block;margin-top: 0;font-size: 3vw;text-decoration: underline;text-decoration-thickness: 0.8em;  text-decoration-color:#1432709b; text-underline-offset: -0.5em;text-decoration-skip-ink: none}


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


/*------
 lead
------*/
#lead {width: 93%; max-width: 1800px; margin: -15% auto 0; position: relative; z-index: 10;}
#lead h2 {text-align: center;}
#lead h2 span {position: relative; font-size: 1.2em;text-shadow: 0 0 10px #0e2553,0 0 10px #0e2553;}
#lead h2 span.border::before{content: ""; background:  rgba(14, 37, 83, 0.60);position: absolute; left: -5%; top: .5em; width: 110%; height: 1em; display: block;}
#lead h2 span.text{position: relative; z-index: 10;}
#lead h2 br{display: none;}
#lead p{text-align: center; line-height: 2; margin: 1em auto 0; text-shadow: 0 0 10px #0e2553,0 0 10px #0e2553,0 0 10px #0e2553;}

/*------
 point
------*/
#point {overflow: hidden;margin-top: 3em;}
#point .inner{width: 93%; max-width: 1800px; margin: 0 auto; }
#point .box{align-items: center; margin-top: 5em;}
#point .box a{width: 50%;}
#point .box .text_area{width: 50%;}
#point .box h3{line-height: 1.8;}
#point .box h3 span{background: rgba(68, 104, 178, 0.50);padding: 1em 40px;display: inline-block;}

#point .box.left h3{text-align: left;}
#point .box.left p{ margin: 1em 100px 0 40px; }

#point .box.right{flex-direction: row-reverse;}
#point .box.right h3{text-align: right;}
#point .box.right p{margin: 1em 40px 0 100px;}

/*------
 img
------*/
#img{width: 100%; aspect-ratio: 5 / 2; display: block; background: url(../images/img.jpg); background-size: 100% auto; margin: 5em auto; max-width: 2560px;background-repeat: no-repeat;background-position: center top;}

/*------
 shippingfees
------*/
#shippingfees {border: 1px solid #fff; max-width: 1200px; width: 90%; padding:20px 50px 30px; margin: 0 auto;}
#shippingfees .inner{gap: 10px;align-items: center; margin-bottom: 1em;}
#shippingfees h3{font-size: 4em; width: 30%;}
#shippingfees .en h3{width: 23%; font-size: 2.5em; line-height: 1.2;}
#shippingfees p{width: calc(70% - 10px);font-size: 1.1em;}
#shippingfees .en p{width: calc(77% - 10px);font-size: 1em;}

/*------
 swiper
------*/
.swiper_inner{overflow-x: clip;padding:150px 0 100px;}

.swiper {overflow: visible !important;}
.swiper-slide{overflow: hidden;}
.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-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: #4468B2!important;}
/*------
 preorder/goodsmile(online)
------*/
#preorder{width: 93%; margin: 0 auto;}
#preorder p{font-size: 2vw; text-align: center; font-weight: 700;}
#preorder p.date{font-size: 3vw;line-height: 1.5;}
#preorder p.date.en{font-size: 2.5vw;}
#preorder .btn{margin-top: 1em;}
#preorder p.date br{display: none;}
#preorder p.small{font-size: .8em; margin-top: .5em; font-weight: 300;}
#preorder p.small a{color: #9EFFF9;}
#preorder p br{display: none;}
#preorder p.shopping{font-size: 1.2em; margin-top: 1em;}
#preorder p.shopping br{display: block;}

/*------
 goodsmile
------*/
#goodsmile{border: 1px solid #fff; max-width: 1200px; width: 90%; padding:50px; margin: 5em auto 0;background: rgba(14, 37, 83, 0.30);}
#goodsmile h4{margin-top: 2em; font-size: 1.5em;font-weight: 600;}
#goodsmile h4:first-of-type{margin-top: 0;}
#goodsmile p{margin-top: 1em; line-height: 2;}
#goodsmile a{max-width: 400px; margin-top: 2em;}
/*------
 specifications
------*/
#specifications{width: 90%; margin-top: 20em; text-shadow: 0 0 10px #0e2553,0 0 10px #0e2553,0 0 10px #0e2553;}
#specifications h4::before{display: none;}
#specifications h4{font-size: 3em;font-weight: 700;text-align: center;}
#specifications h3,#specifications p{text-align: center;}
#specifications h3{margin-top: 2em;font-weight: 400;}
#specifications p{font-size: 1.5em;font-weight: 600;}
#specifications p span{font-size: 80%;}

/*------
 footer
------*/
footer{border: none; padding: 10em 0 150px;}
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;}

@media screen and (min-width: 2560px){
  /*------
  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: 1400px){
  /*------
  shippingfees
  ------*/
  #shippingfees .inner{gap: 10px;}
  #shippingfees h3{font-size:5.8vw;}
  #shippingfees p{font-size: 1.6vw;}
  #shippingfees .en h3{font-size: 3.5vw;}
  #shippingfees .en p{font-size: 1.5vw;}
}
@media screen and (max-width: 768px){

  /*------
  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(14, 37, 83, 0.779); 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;}
  .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; position: relative;}
  .share_ttl{text-align: center;width: 100%; max-width: 100%; margin-bottom: .5em; font-size: .9em; display: block; color: #fff;}
  .share_wrap{color: #fff; width: 100%; text-align: center; margin-top: -50px;}
  .share_top{display: none;}
  .share{width: 40px; 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: none;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 span{background: var(--btn);}
  .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;}


  /*------
  hero
  ------*/
  #hero h1{text-align: left; right: auto; left: 0; top: 8vh; width: 100%; }
  #hero h1 .scale,
  #hero h1 .ttl,
  #hero h1 .sub{padding: 0  5%;}
  #hero h1 .scale{font-size: 4vw;}
  #hero h1 .ttl{font-size: 6.8vw;text-decoration: underline;text-decoration-thickness: 0.8em;  text-decoration-color:#1432709b; text-underline-offset: -0.5em;text-decoration-skip-ink: none;}
  #hero h1 .sub{font-size: 5vw;text-decoration: underline;text-decoration-thickness: 0.8em;  text-decoration-color:#1432709b; text-underline-offset: -0.5em;text-decoration-skip-ink: none}

  #lead{margin-top: -60%;}
  #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;}


  
 /*------
  point
  ------*/
  #point .box{flex-direction: column;}
  #point .box a{width: 100%;}
  #point .box .text_area{width: 100%; margin-top: 1em;}
  #point .box.right h3{text-align: left;}
  #point .box.left p,
  #point .box.right p{margin: 1em 20px;}

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

  
  /*------
  shippingfees
  ------*/
  #shippingfees{padding: 30px;}
  #shippingfees .inner{ flex-direction: column; }
  #shippingfees h3{width: 100%; font-size:8vw; text-align: left; line-height: 1;}
  #shippingfees p{width: 100%; font-size: 1.1em;}
  #shippingfees .en h3{font-size: 5vw; width: 100%;text-align: left;}
  #shippingfees .en p{font-size: 1.1em; width: 100%;}
  #shippingfees p br{display: none;}
  #shippingfees a.btn{margin-top: 1.5em;}

  /*------
  swiper
  ------*/
  .swiper_inner{padding:10vh 0}

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

  #goodsmile{padding: 30px;}
  #goodsmile h4{font-weight: 700;}

  /*------
  specifications
  ------*/
  #specifications{width: 85%; padding: 50px 25px;}
  
  /*------
  footer
  ------*/
  footer{padding: 5em 0 100px; background-size: 60% auto;}


}

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