@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:#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;
  --grd01:to bottom, #3F2B10, #E8D08E;
  --grd01-base:#E8D08E;
  --grd-left:to left, #3F2B10, #E8D08E;
  --grd-right:to right, #3F2B10, #E8D08E;
  --grd45:45deg, #897447, #a08958;
  --grd-45:-45deg, #897447, #a08958;
}

/* @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: 0;background:linear-gradient(var(--grd45)); color: #fff; margin: 1em 0 0;overflow: hidden; transition: .3s;padding-right: 30x;border: 2px solid var(--grd01-base);border-image: linear-gradient(var(--grd-45)) 1;}
a.btn::before {content: "";width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;z-index: 1;background:linear-gradient(var(--grd-45)); border-image: linear-gradient(var(--grd45)) 1; 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{display: none;/* content: ""; border: 1px solid #fff; border-width: 1px 1px 0 0; transform:  rotate(45deg);clip-path:none; width: .5em; height: .5em; background: none;z-index: 1; */}
a.btn .arrow {
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 1px;
  background-color: #ffffff;
  right: 10px;
  top: calc(50% + 2.5px);
  transition: all 0.2s linear;
}
a.btn .arrow::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 15px;
  height: 1px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform: rotate(45deg);
  transform-origin: calc(100% - 0.5px) 50%;
}
a.btn:hover{color: #fff;/* background: transparent; */}
a.btn:hover::after{clip-path: none; background: none;}
a.btn:hover .arrow {
  right: 5px;
  transition: all 0.2s linear;
}

/*------
 font
------*/
.lovers-quarrel-regular {
  font-family: "Lovers Quarrel", cursive;
  font-weight: 400;
  font-style: normal;
  text-shadow: 0 2px 0 #009BAA, 0 4px 10px #009BAA;
}


/*------
 body
------*/
/* body{position: relative; background-image: url(../images/bg.png);background-color: #4a4a4a7a;background-attachment: fixed; background-position: top center;}
body.blend{background-blend-mode: darken;} */
body {
  position: relative;
  background-image: url(../images/bg.png);
  background-color: #000000a9;
  background-attachment: fixed;
  background-position: top center;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* bodyと同じ背景指定をコピー */
  background-image: url(../images/bg.png);
  background-color: #000000a9;
  background-attachment: fixed;
  background-position: top center;
  background-blend-mode: darken;

  opacity: 0;
  transition: opacity 0.5s linear;
}

body.blend::before {
  opacity: 1;
}

/*両サイドグラデ*/
#bg{width: 100%; position: relative;}
#bg::before,
#bg::after{content: ""; width: 30%; height: 100%; display: block; position: absolute; top:0;z-index: -1;}
#bg::before{left: 0; background: linear-gradient(to right, #000000b8,#00000000); }
#bg::after{right: 0; background: linear-gradient(to left, #000000b8,#00000000);}

/*ホコリ*/
canvas {display: block;position: fixed;top: 0;left: 0;
pointer-events: none; /* z-index: 100; */}
/*------
 header
------*/
header{position: absolute;left: 0; top:0; padding: calc(3em + 20px) calc(4em + 20px)  0;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.logo{width: 30%; max-width: 150px; line-height: 1; filter: drop-shadow(0 0 2px #000);}
header h2.logo a{display: block; line-height: 0;}

/**/
header .menu_area{display: flex;align-items: flex-start; flex-wrap: wrap; flex-direction: column; gap: 20px; margin-left: auto; position:absolute; right:30px; top: 150px;width: 30px;align-items: center;}

/*language*/
header .language{font-weight: 400;padding: 0; display: flex;flex-wrap: wrap;align-items: center;flex-direction: row; writing-mode: vertical-rl;align-items: center;gap: 5px;}
header .language li{/* border: 1px solid #FF596C; */border-width: 0 1px 0 0;list-style: none;padding: 0;writing-mode: vertical-rl;overflow-wrap: break-word; }
header .language li a{text-decoration: none;display: block; color: #fff;padding: .75em .25em;}
header .language li:first-of-type{margin-left: 0; }
header .language li:nth-child(2){margin-top: .25em;}
header .language li:last-of-type{border: none;}
header .language li.active a,
header .language li a:hover{color: #fff; text-decoration: none; background: #555; background-image: linear-gradient(var(--grd-left));}

/*Share*/
.share_wrap {z-index: 100;}
.share_ttl{writing-mode: vertical-rl; width: auto; margin-top: 1em; }

.share_wrap a{display: block; line-height: 1; margin-top: 1em;}
.share_wrap a:first-of-type{margin-top: 0;}


header .btn{margin-left: auto; margin-top: 0; width: 200px;}
header .btn.en{width: 250px;}
.btn_nav,
header .menu_area a.btn.menu_area_btn{display: none;}
/*------
 hero
------*/
#hero {position: relative; max-width: 2560px; margin: 0 auto; width: 100%; background: url(../images/mv_bg.png) no-repeat;    background-position: top center; background-size: 100% auto;}
#hero::after,
#hero::before{content: ""; width: 5em; height: 5em; top: 20px; position: absolute;}
#hero::before{background: url(../images/decoration_top-l.png); background-repeat: no-repeat; background-size: 100% auto;left: 20px;}
#hero::after{background: url(../images/decoration_top-r.png); background-repeat: no-repeat; background-size: 100% auto;right: 20px;}
#hero .hero_inner {position: relative;width: 100%; padding-top: 5px; align-items: center;}
#hero .hero_inner picture{width: 45%; position: relative; z-index: 100; padding: 3% 0; margin-left: 5%;filter: drop-shadow(0 0 10px #fff);}

#hero .hero_inner .text_area{width: 40%;}
#hero .hero_inner .text_area a.btn{margin-left: .8em; max-width: 100%; background-image: linear-gradient(to left, #009BAA , #1bbfce); border-image: linear-gradient(to right, #009BAA , #1bbfce) 1;}
#hero .hero_inner .text_area a.btn::before{background-image: linear-gradient(to right, #009BAA , #1bbfce);}
#hero .hero_inner .text_area a.btn:hover{border-image: linear-gradient(to left, #009BAA , #1bbfce) 1;}
#hero h1{background-image: linear-gradient(var(--grd-45)); font-size: 1vw; padding: .25em 1em; text-align: center;}
#hero h2{line-height: 1; text-align: center; color: #fff;font-family: "Lovers Quarrel", cursive;font-weight: 400;font-style: normal;text-shadow: 0 4px 4px #009BAA,1px 1px 1px #009BAA;}
#hero h2 .ttl{font-size: 9vw;}
#hero h2 .sub{font-size: 7vw;}

#hero a.btn.sp_btn{display: none;}


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


/*------
 lead
------*/
#lead {width: 93%; max-width: 1220px; margin: 0 auto; position: relative; z-index: 10; padding: 3px;border: 1px solid var(--grd01-base);border-image: linear-gradient(var(--grd01)) 1}
#lead .inner{width: 100%; max-width: 100%; padding: 3em 2em; border: 2px solid var(--grd01-base);border-image: linear-gradient(var(--grd01)) 1; background: #0000006d;}
#lead .inner h3{ text-align: center;text-shadow: 0 0 5px #000}
#lead .inner p{margin-top: 0; text-align: center; line-height: 2;text-shadow: 0 0 5px #000; font-size: 1.1vw; margin-top: 1em;}
#lead .decoration{position: absolute; width: 4em; }
#lead .decoration.top-l{top: 10px; left: 10px;}
#lead .decoration.top-r{top: 10px; right: 10px;}
#lead .decoration.bottom-l{bottom: 10px; left: 10px;}
#lead .decoration.bottom-r{bottom: 10px; right: 10px;}
#lead .logo_sc{width: 50px; margin: 0 auto; filter: drop-shadow(0 0 5px #000);}
#lead .hr img{width: 25px; display: block; margin: 0 auto;}
#lead .hr{width: 100%;position: relative; margin: 3em auto; filter: drop-shadow(0 0 5px #fff);}
#lead .hr::after,
#lead .hr::before{content: ""; width: calc(50% - 30px); display: block; height: 2px; background: #A5871C; position: absolute; top: calc(50% - 1px);}
#lead .hr::after{left: 0;}
#lead .hr::before{right: 0;}
#lead p br.sp{display: block;}
/*------
 point
------*/
#point {overflow: hidden;margin: 2em auto 0;position: relative; padding-bottom: 10em; }
#point .inner{width: 100%; max-width: 2560px; margin: 0 auto;position: relative;}
#point .box{width:100%;position: relative; display: flex; padding: 10px 50px 10px 0;align-items: flex-end; margin-top: 3em;}

#point .box a{width: 50%;line-height: 0;position: relative;}
#point .box a::after{content: ""; border: 2px solid var(--grd01-base);border-width: 2px 0 5px; border-image: linear-gradient(var(--grd-left)) 1; width: 100%; height: 5px; display: block; position: absolute; top: -15px; left: 0;}
#point .box a::before{content: ""; border: 2px solid var(--grd01-base);border-width: 5px 0 2px; border-image: linear-gradient(var(--grd-right)) 1; width: 100%; height: 5px; display: block; position: absolute; bottom: -15px; left: 0;}

#point .box a .point_inner{overflow: hidden; line-height: 0; display: block;}
#point .box a img{transition: all 0.3s linear;}
#point .box .text_area{position: relative; display: flex; z-index: 10; width: 65%; margin-left: -15%; gap: 10px; padding-bottom: 10px; text-shadow: 0 2px 0 #009BAA, 0 4px 10px #009BAA;}
#point .box:nth-child(2) .text_area{flex-direction: row-reverse;}
#point .box .text_area .no{font-size: 13vw; line-height:.8;  font-family: "Pathway Gothic One", sans-serif;font-weight: 400;font-style: normal;}
#point .box .text_area .text{font-size: 1.8vw;}
#point .box:nth-child(2){flex-direction: row-reverse;padding: 10px 0 10px 50px;}
#point .box:nth-child(2) .text_area{margin-left: auto; margin-right: -15%;}

#point.en .box{align-items: flex-start;}
#point.en .box .text_area{margin-top: 18em;}


#point .box a:hover img{transform: scale(1.1);transition: all 0.3s linear;}

#point .circle{position: absolute; border-radius: 10000px; border: 1px solid rgba(255, 255, 255, 0.50);
; display: block;opacity: 0; animation-delay: .5ms;}
#point .circle.c-1{width: 15em; height: 15em; left: 8%; bottom: -10em;animation:6s linear infinite;}
#point .circle.c-2{width: 8em; height: 8em; left: 4%; bottom: -10em;animation:4.5s linear infinite;}
#point .circle.c-3{width: 20em; height: 20em; right: 25%; bottom: -15em;animation:6.5s linear infinite;}
#point .circle.c-4{width: 8em; height: 8em; right: 20%; bottom: -5em;animation:4.5s linear infinite;}
#point .circle.c-5{width: 18em; height: 18em; left:1%; bottom: -5em;animation:6.5s linear infinite;}
#point .circle.c-6{width: 6em; height: 6em; left: 14%; bottom: -7em;animation: 4s linear infinite;}
#point .circle.up{animation-name: c-anime;}

@keyframes c-anime{
  0% {transform: scale(0);opacity: 1;}
  25% {transform: scale(1);opacity: 1;}
  50% {transform: scale(2); opacity: 0;}
  100% {transform: scale(2); opacity: 0;}
}


#point .kira{position: absolute; filter: drop-shadow(0 4px 10px #009BAA ) drop-shadow(2px 0 0 #009BAA);}
#point .kira.k-1{width: 30px; bottom: 1em; left: 31%;}
#point .kira.k-2{width: 50px; bottom: -1.1em; left: 28%;}
#point .kira.k-3{width: 25px; bottom: 1.2em; right: 45%;}
#point .kira.k-4{width: 50px; bottom: -1.1em; right: 46%;}
#point .kira.k-5{width: 30px; bottom: 1em; left: 31%;}
#point .kira.k-6{width: 50px; bottom: -1.1em; left: 28%;}
#point .kira.k-7{width: 50px; bottom: -7em; left: 20%;}

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

/*------
 illust
------*/
.bg_illust{background: url(../images/illust_bg.png) no-repeat; background-size: 100% auto; padding-top: 20%;}
#illust{ padding:0 2.5% 0;}
#illust figure{line-height: 0; position: relative; width: 50%;}
#illust figure::after{content: ""; border: 2px solid var(--grd01-base);border-width: 2px 0 5px; border-image: linear-gradient(var(--grd-left)) 1; width: 100%; height: 5px; display: block; position: absolute; top: -15px; left: 0;}
#illust figure::before{content: ""; border: 2px solid var(--grd01-base);border-width: 5px 0 2px; border-image: linear-gradient(var(--grd-right)) 1; width: 100%; height: 5px; display: block; position: absolute; bottom: -15px; left: 0;}
#illust p{width: 70%; font-size: 1.5vw; margin-top: 2%; font-weight: 600; line-height: 2;text-shadow: 0 2px 0 #009BAA, 0 4px 10px #009BAA;}
.illust_sp{display: none;}

/*------
 swiper
------*/
.swiper_wrap{position: relative; margin: 20% 0 0;}
.swiper_inner{overflow-x: clip;padding:50px 0;}
.swiper-slide{ /* aspect-ratio: 1 / 1.3333;  */position: relative;}
.swiper_inner .swiper-slide::after{content: ""; border: 2px solid var(--grd01-base);border-width: 2px 0 5px; border-image: linear-gradient(var(--grd-left)) 1; width: 100%; height: 5px; display: block; position: absolute; top: -15px; left: 0;}
.swiper_inner .swiper-slide::before{content: ""; border: 2px solid var(--grd01-base);border-width: 5px 0 2px; border-image: linear-gradient(var(--grd-left)) 1; width: 100%; height: 5px; display: block; position: absolute; bottom: -15px; left: 0;}
.swiper {overflow: visible !important;}

.swiper_wrap h3{font-size: 5.5em; padding:0 1em;text-align: center; line-height: 1.2;}
.swiper_wrap h3 br{display: none;}
.swiper_wrap h3 + p{text-align: center; margin-top: 1em;}

/*------
 swiper/gallery
------*/
.gallery_wrap{position: relative; margin:0;}
.gallery_wrap::after{content: ""; border: 2px solid var(--grd01-base);border-width: 2px 0 5px; border-image: linear-gradient(var(--grd-left)) 1; width: 100%; height: 5px; display: block; position: absolute; top: -15px; left: 0;}
.gallery_wrap::before{content: ""; border: 2px solid var(--grd01-base);border-width: 5px 0 2px; border-image: linear-gradient(var(--grd-left)) 1; width: 100%; height: 5px; display: block; position: absolute; bottom: -15px; left: 0;}

.gallery_inner{overflow-x: clip;padding:0;}
.gallery {overflow: visible !important;}


.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-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{corner-shape:scoop}
.swiper-button-next, .swiper-button-prev{color: #A5871C!important; top: calc(50% - 20px)!important;}
.swiper-pagination{position: relative!important; bottom: 0!important; margin-top: 1em;}
.swiper-pagination-bullet{background: #A5871C!important; opacity: 1!important;width: 20px!important; height: 20px!important;}
.swiper-pagination-bullet-active{background: #D8C993!important;}

/*------
 preorder
------*/
#preorder{width: 93%; margin: 5em auto;}
#preorder p{font-size: 2vw; text-align: center; font-weight: 700;text-shadow: 0 2px 0 #009BAA, 0 4px 10px #009BAA;}
#preorder p.date{font-size: 3vw;line-height: 1.5;}
#preorder p.date.en{font-size: 2vw;}
#preorder p.shopping{font-size: .8em; color: #D6FFF5;text-shadow: none;}
#preorder a.btn{margin: .5em auto 0; font-weight: 700; font-size: 1.1em;}
#preorder a.btn br{display: none;}
#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: #e8e8e8;text-shadow: none;}
#preorder p.small a{color: #D6FFF5;}
#preorder p br{display: none;}
#preorder p.shopping{font-size: 1.2em; margin-top: 1em;}
#preorder p.shopping br{display: block;}

/*------
 goodsmile
------*/
#goodsmile {width: 95%; max-width: 1220px; margin: 5em auto 0; position: relative; z-index: 10; padding: 3px;border: 1px solid var(--grd01-base);border-image: linear-gradient(var(--grd01)) 1}
#goodsmile .inner{width: 100%; max-width: 100%; padding: 2em; border: 2px solid var(--grd01-base);border-image: linear-gradient(var(--grd01)) 1; background: #0000006d;}
#goodsmile h4{margin-top: 2em; font-size: 1.1em;font-weight: 700;}
#goodsmile h4:first-of-type{margin-top: 0;}
#goodsmile p{margin-top: .5em; line-height: 1.8; text-align: left; font-size: .9em;}
#goodsmile a{max-width: 300px; margin: 1em auto 0;}

#goodsmile .img-kira{position: absolute;}
#goodsmile .img-kira.kira01{width: 6%; max-width: 40px; left: 3%; top: -7%;}
#goodsmile .img-kira.kira02{width: 1.5%; max-width: 15px; left: 2%; top: 1%;}
#goodsmile .img-kira.kira03{width: 1.5%; max-width: 15px;right: 2%; bottom: 8%;}
#goodsmile .img-kira.kira04{width: 1.5%; max-width: 15px; right: 4%; bottom: 3%;}
#goodsmile .img-kira.kira05{width: 6%; max-width: 40px; right: 5%; bottom: 5%;}
/*------
 specifications
------*/
.bg_bottom{background: url(../images/footer_bg.jpg) no-repeat; background-position: top center; background-size: cover; padding: 5em 0; margin-top: 10em;}
#specifications{width: 100%; max-width: 100%;}
#specifications h4::before{display: none;}
#specifications h4{font-size: 7vw;text-align: center; width: 100%;}
#specifications h3,#specifications p{text-align: center;text-shadow: 0 2px 0 #009BAA, 0 4px 10px #009BAA;}
#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; 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 .logo_gsc a{line-height: 0; display: block;}
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: #0000002a; backdrop-filter: blur(10px); transition: .5s; z-index: 200;}
#fixed_area.visible{bottom: 0;transition: .5s;}
#fixed_area a{display: flex;flex-direction: column;position: relative;}
#fixed_area a::after{display: none;}
#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{display: flex; align-items: center; justify-content: center; text-decoration: none; width: 300px; height: 50px;padding: .5em 1em; margin-top: 0;}




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

  #hero h2 .ttl{font-size: 8em;}
  #hero h2 .sub{font-size: 6.5em;}

  #point .box .text_area .no{font-size: 12em;}
  #point .box .text_area .text{font-size: 2.5em;}

  .swiper_wrap h3{font-size: 5em;}
  #specifications h4{font-size: 7em;}

  /*------
  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){
  #lead .inner p{font-size: .8em;}
  /*------
  footer
  ------*/
  footer{ background-size: 60% auto;}
}


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

  /*------ 
  header
  ------*/
  header{position: absolute;left: 0; top:0; padding: calc(20px + 1em) calc(20px + 2vw)  0;z-index: 100;width: 100%; font-size: 15px;}

  #hero::after,
  #hero::before{content: ""; width: 7vw; height: 7vw; position: absolute;}

  #hero .hero_inner picture{width: 60%; }
  #hero .hero_inner .text_area{margin-left: -15%;z-index: 100;}

  #lead .inner p{font-size: .8em;}
  #lead br.sp{display: none;}

  /*------
  point
  ------*/
  #point{margin-top: 7em; padding-bottom: 3em;}
  #point .inner{gap: 20px; flex-direction: column;}
  #point .box {width: 100%; display: flex;gap: 10px;}
  #point .box a{width: 60%;}


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

  #img{margin-top: 0; background-size: 150% auto;}
  #img {aspect-ratio: 5 / 2.5;}

  .swiper_wrap h3{font-size: 8vw;}
  .swiper_wrap p{width: 90%; margin: 0 auto;}



}

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

  /*------
  body
  ------*/
  body {
    background-image: none;
    background-attachment: scroll;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background-image: url(../images/bg.png);
    background-color: #4a4a4a7a;
    background-position: top center;
    background-attachment: scroll;
  }

  body::before {
    background-attachment: scroll;
  }

  /*------
  header
  ------*/
  header{z-index: 200; padding: 20px;}
  header .inner.flex{justify-content: right; padding-right: 40px;}
  header .menu_area{position: fixed; right: -100%; top: 0; width: 100%; height: 100vh;background: #342a02b9; 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.logo{max-width: 120px;}
  header .menu_area a.btn.menu_area_btn{display: block; margin: 0 auto;}
  header .menu_area a.btn.menu_area_btn span{font-size: 1.2em;}
  

  /*language*/
  header .menu_area .language{background: none;  border: none;justify-content: center; width: 100%; height: auto;writing-mode: horizontal-tb;}
  header .menu_area .language li{border: 1px solid #fff; border-width: 0 1px 0 0;writing-mode: horizontal-tb; text-shadow: 0 0 5px #000;}
  .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;writing-mode: horizontal-tb;text-shadow: 0 0 5px #000;}
  .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{display: none;}
  .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; filter: drop-shadow(0 0 2px #000);}
  .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;}

  /*------
  hero
  ------*/
  #hero{background: none;}
  #hero h1{text-align: left; right: auto; left: 0; top: 8vh; width: 100%; }
  #hero::after{display: none;}
  #hero .hero_inner .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 .hero_inner  h1 {font-size: 2.2vw; text-align: center;}
  #hero .hero_inner  h2 .ttl{font-size: 15vw;}
  #hero .hero_inner  h2 .sub{font-size: 10vw;}

  #hero .hero_inner{overflow: hidden;}
  #hero .hero_inner picture{width: 150%; margin:0 auto; padding: 0;}
  #hero .hero_inner picture img{width: 150%; max-width: 150%;margin-left: -25%;}
  #hero .hero_inner .text_area a.btn{font-size: 1.2em; margin-left: 0; margin: 2em auto 0; max-width: 400px;}

  #point.en .box .text_area{margin-top: -8em;}
 

  /*------
  lead
  ------*/
  #lead{margin-top: 5em;}
  #lead .inner{width: 100%; max-width: 100%; padding: 4.5em 2em; border: 2px solid var(--grd01-base);border-image: linear-gradient(var(--grd01)) 1; background: #0000006d;}

  #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;font-size: .9em;}
  #lead h2 br{display: block;}

  #hero a.btn.sp_btn{display: block;}

  /*------
  point
  ------*/
  #point{padding-bottom: 5em;}
  #point .box,
  #point .box:nth-child(2) {width: 100%; display: flex;gap: 5px; flex-direction: column;margin-top: 50px; text-align: start; padding: 0;}
  #point .box .text_area,
  #point .box:nth-child(2) .text_area{padding: 2em 1em 0; margin: 0; flex-direction: column; width: 100%; margin-top: -8em;}
  
  #point .box .text_area .text{font-size: 1.2em; padding-top:0; padding: 0 0.5em;}
  #point .box .text_area .no{font-size: 10em;}
  #point .box a{width: 100%;}

  #point .kira.k-1 {width: 20px;bottom: 11em; left: calc(10em + -2%);}
  #point .kira.k-2 {width: 35px;top: 14.9em;left: 34%;}
  #point .kira.k-3 {width: 20px;bottom: 10em;right: auto;left: calc(10em + 3%);}
  #point .kira.k-4 {width: 28px;bottom: 12em;right: auto;left: calc(10em + 5%);}
  #point .kira.k-5 {width: 20px;bottom: 10em;right: auto;left: 36%;}
  #point .kira.k-6 {width: 30px;bottom: -3em;right: 5%;left: auto;}
  #point .kira.k-7 {width: 30px;bottom: auto;top: 2em;left: auto;right: 3em;}

  #point .circle.c-1{left: auto; right: 3%; width: 10em; height: 10em; bottom: 10%;}
  #point .circle.c-2{left: auto; right: 6%; bottom: 3%; width: 5em; height: 5em;}


  /*------
  img
  ------*/
  #img{aspect-ratio: 3 / 2; margin-top: 0;background-size: 150% auto;}

  /*------
  swiper
  ------*/
  .swiper_wrap{margin-top: -3em;}
  .swiper_wrap h3 {font-size: 10vw;}
  .swiper_wrap h3 br{display: block;}
  /* .swiper_wrap h3 + p{padding: 0 1em;} */
  .swiper_inner{padding-bottom: 0;}
  .swiper-pagination{margin-top: 1.5em;}
  

  /*------
  illust
  ------*/
  .bg_illust{background: none; padding-top: 5%;}
  #illust figure{width: 100%;}
  #illust p{width: 100%; font-size: 1.1em; margin-top: 5%;line-height: 2;text-shadow: 0 2px 0 #009BAA, 0 4px 10px #009BAA;}
  .illust_sp{display: block; width: 120%; margin-left: -20%;}
  .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{corner-shape: unset;width: 10px !important;height: 10px !important;}

  /*------
  pointpreorder
  ------*/
  #preorder{position:relative;background: none; height: auto; margin-top: 2em;}
  #preorder p{font-size: 3.5vw; }
  #preorder p.date{font-size: 6vw;}
  #preorder p.date.zh{font-size: 3.8vw;}
  #preorder p.date.en{font-size: 5vw;}
  #preorder a.btn{max-width: 500px; padding-right: 2.5em;}
  #preorder p.shopping br{display: none;}
  #preorder a.btn.en{max-width: 500px;}
  #preorder p.date br{display: block;}

  /* #goodsmile{padding: 50px;} */
  #goodsmile h4{font-weight: 700;}
  #goodsmile a{font-size: 1.2em;}
  #goodsmile .img-kira.kira01{width: 7%; max-width: 100%; left: 6%; top: -4%;}
  #goodsmile .img-kira.kira02{width:3%; max-width: 100%; left: 3%; top: 1%;}
  #goodsmile .img-kira.kira03{width: 2%; max-width: 100%;right: 2%; bottom: 5%;}
  #goodsmile .img-kira.kira04{width: 3%; max-width: 100%; right: 4%; bottom: 3%;}
  #goodsmile .img-kira.kira05{width: 5%; max-width: 100%; right: 5%; bottom: 5%;}


  /*------
  specifications
  ------*/
  #specifications h3{font-size: 1.5em;}
  #specifications p{font-size: 1.2em;font-weight: 700;}

  

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

}




@media screen and (max-width: 500px){
  
  #goodsmile .img-kira.kira03,
  #goodsmile .img-kira.kira04,
  #goodsmile .img-kira.kira05{display: none;}

}