/*-----------
reset
-----------*/
* {margin: 0;padding: 0; box-sizing: border-box;}

.cf { zoom: 1; }
.cf:before,.cf:after { content: ""; display: table;}
.cf:after { clear: both;}

li{list-style: none;}
/*-----------
body
-----------*/
body{
    color: var(--color);
    font-size: var(--font-size); 
    width: 100%; 
    line-height: 1.8; 
    font-family: "Noto Sans JP", "ヒラギノ角ゴシック", Sanfransisco, Arial, "SF Pro SC", Meiryo, "メイリオ", "微软雅黑", "Microsoft YaHei";
    font-optical-sizing: auto; 
    font-weight: 400;
    border: 8px solid #1C1C1C;;
}
body.black{background: #000;}
img{height: auto;}

@media screen and (max-width: 768px){
	body{width: 100%;}
	img{width: 100%;}
}

/*-----------
commone
-----------*/
a{color: var(--color-a);text-decoration: none;}
a:hover{text-decoration: underline;}
a:hover img{filter:alpha(opacity=1); -moz-opacity: 1; opacity: 1;}
a.nolink{pointer-events: none;cursor: default;}

/*flex box*/
.flex{display: flex; align-items: flex-start; flex-wrap: wrap;}
.flex img{align-items: flex-start;}
.mleft{margin-left: auto;}
.mright{margin-right: auto;}
.mtop{margin-top: auto;}
.mbottom{margin-bottom: auto;}
.spacer {width: 100%; display: block;}

/*SP-on*/
.pc{display: block;}
.sp{display: none;}

@media screen and (max-width: 768px){
    .pc{display: none;}
    .sp{display: block;}
}
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.fadein-left{
      transform: translate(-30px,0);
  }
  &.fadein-right{
      transform: translate(30px,0);
  }
  &.fadein-up{
      transform: translate(0,-30px);
  }
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}
@keyframes floatInOut {
  0%   { opacity: 0; transform: scale(0.7) rotate(var(--rot)); }
  20%  { opacity: 1; transform: scale(1)   rotate(var(--rot)); }
  80%  { opacity: 1; transform: scale(1)   rotate(var(--rot)); }
  100% { opacity: 0; transform: scale(0.7) rotate(var(--rot)); }
}
/*-----------
ボタン
-----------*/
a.btn{
    position: relative;
    display: block;
    background: url(../images/commone/arrow_white.png) 95% 50% no-repeat #F268E3;
    background-size: .8em auto;
    border: 5px solid #1C1C1C;
    outline: 5px solid white;
    color: var(--btn-color);
    text-align: center;
    padding: 1em;
    max-width: var(--btn-max-w);
    width: 100%;
    margin: -2em auto 0 auto;
    text-decoration: none;
    border-radius: var(--border-radiue);
    font-weight: bold;
    z-index: 4;
    font-size: 110%;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}
a.btn:hover { 
    background: url(../images/commone/arrow_white.png) 96% 50% no-repeat #1c1c1c;
    background-size: .8em auto;
}
/*---------
　Font
---------*/
.noto-sans-jp{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
}
.dotgothic16 {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.shippori-mincho {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
/*-----------
scroll
-----------*/
.window-scroll,.window-open{transform: translateY(100px); opacity: 0;}
.window-open.up,.window-scroll.up{animation: up01 1s ease forwards; transform: translateY(0); opacity: 1;}

@keyframes up01{
	0%{transform: translateY(100px); opacity: 0;}
}

/*-----------
Header
-----------*/
header {padding:8px;position: relative;z-index: 50; width: 100%; height: 5vw;}
header .inner { padding: 1em;}
header.absolute{position: absolute; top:0; left: 0; width: 100%; height: 5vw;  }
header .logo ul {
    display: flex;
    align-items: center;
}
header .logo ul li { margin: 0 1em 0 0; }
header .logo ul li:first-child img { width: auto; height: 45px; }
header .logo ul li:last-child img { width: auto; height: 50px; }

/*-----------
MV
-----------*/
#mv-wrapper {
    position: relative;
    /*height: 150vh;*/
}
#mv{
    position: relative;
    background: url(../images/mv_pc.jpg) 50% 0 no-repeat;
    background-size: cover;
    height: 100vh;
    min-height: 768px;
    z-index: 1;
    overflow: hidden;
    position: sticky;
    top: 0;
} 
#mv::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
    ellipse 70vw 70vw at 50% 50%,
    transparent 65%,
    rgba(28, 28, 28, 0.7) 67%);
}
@media screen and (max-width: 1200px){
    #mv::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(
        ellipse 80vw 100vw at 50% 50%,
        transparent 65%,
        rgba(28, 28, 28, 0.7) 67%);
    }
}
#mv img.heart {
    position: absolute;
    height: 12vw; 
    width: auto;
    z-index: 1111;
}
#mv img.heart.h01 { top: calc(50% - 12vw); left: 2%;}
#mv img.heart.h02 { bottom: 5vw; right: 2%;}
#mv_inner {
    display: flex;
    align-items: flex-end;
    height: 100vh;
    min-height: 768px;
    padding: 0 2em;
}
#mv_textbox {
}
#mv img#c1 {
    position: absolute;
    top: -20%;
    left: 20%;
}
#mv img#c2 {
    position: absolute;
    top: 35%;
    right: -10%;
}
#mv img#c3 {
    position: absolute;
    bottom: -20%;
    left: 0;
}
h1 {
    position: relative;
    width: 35vw;
    margin: 0 auto 1.5em auto;
    z-index: 100;
}
h1 img {
  width: 100%;
  height: auto;
}
#stickybar {
    position: fixed;
    bottom: 0;
    background: #1c1c1c79;;
    width: 100%;
    z-index: 9999;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: 0.3s ease-in;
}
#stickybar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 350px;
    margin: 15px auto;
    background: url(../images/commone/arrow_white.png) 95% 50% no-repeat,#F268E3;
    background-size: .8em auto;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
    box-sizing: border-box;
    transition: 0.3s ease-in-out;
    padding: .5em 0;
    border: 3px solid #1C1C1C;
    outline: 3px solid white;
}
#stickybar a:hover { 
    background: url(../images/commone/arrow_white.png) 97% 50% no-repeat, #1c1c1c;
    background-size: .8em auto;
}
#stickybar a span {
    font-weight: bold;
    letter-spacing: .1em;
    text-rendering: optimizeLegibility;
    line-height: 1em;
}
#stickybar a span.small { 
    font-size: 70%;
    line-height: 1em;
    margin-bottom: .3em
 }
#stickybar.visible { opacity: 1; }
#EN #stickybar a span { letter-spacing: normal; }
#mv a.btn{
    font-size: 120%;
    max-width: 540px;
}
/*-----------
#lead 
-----------*/
#lead {
    width: 100%;
    position: relative;
    margin: 0 auto;
    padding: 5em 0 8em 0;
    background: url(../images/kirakira_bg.png) center / cover no-repeat,linear-gradient(45deg, rgb(238, 197, 255), rgb(242, 104, 227));
    background-size: cover;
    overflow: hidden;
    min-height: 768px;
}
#lead .inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 768px;
    margin: 0 auto;
    z-index: 100;
    overflow: hidden;
}
.concept_image {
   position: relative;
    width: 60%;
    height: 100%; 
    z-index: 999;
}
.concept_image img {
    width: auto; 
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
    margin: 0 auto; 
    object-fit: contain;
    object-position: bottom center;
}
.concept_textbox {
    position: absolute;
    right: 2%;
    bottom: 50px;
    padding: 0 0 50px 0;
    width: 60%;
    z-index: 1000;
} 
.textbox_inner {
    margin: 0 auto;
    text-align: center;
}
.concept_textbox img {
    width: 100%;
    width: 70%;
    margin: 0 0 1.5em 0;
    height: auto;
}
.concept_textbox p {
    text-align: right;
}
.concept_textbox p span {
    font-size: 2.3vw;
    line-height: 1.4em;
    font-weight: bold;
    margin: 0 0 0.5em;
    background: #1C1C1C;;
    padding: 0.3em 0.5em; 
    display: inline-block;
    color: #FFF;
}
.glitter_wrap {
    position: absolute;
    inset: 0;
    margin: auto; 
    width: 100%;
    height: 50%; 
    z-index: 99;
}
.glitter_bg {
    position: absolute;
    inset: 0;
    transform: skewY(6deg);
    transform-origin: center left;
    background: url(../images/glitter.jpg) 0 0 no-repeat;
    background-size: cover;
}
#lead h2 {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    font-size: 5vw;
    font-weight: bold;
    color: #FFF;
    text-shadow: 0 0 8px #FF008C;
    transform: skewY(6deg);
    transform-origin: center left; 
    text-align: justify;
    text-align-last: justify;
    z-index: 100;
    white-space: nowrap;
}
#EN #lead h2 {
    font-size: 4.3vw;
}
.sticker img {
    display: block;
    position: absolute;
    z-index: 1000;
    width: 25vw;
}
.sticker img#s1 {
    top: 50px;
    right: 15%;
}
.sticker img#s2 {
    top: calc(50% - 5vw);
    right: 2%;
}
.sticker img#s3 {
    bottom: 50px;
    left: 2%;
}
/*-----------
#point
-----------*/
#top_section {
    position: relative;
    background: url(../images/fuwafuwa.jpg) 0 0 no-repeat;
    background-size: cover;
    overflow: hidden;
}
#point .inner{
    position: relative;
    background: #ECD9E9;
    max-width: 1920px;
    width: 92%;
    margin: 100px auto;
    overflow: visible;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    z-index: 1;
}
#point .inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(../images/deco1.png) 2% 2% no-repeat, url(../images/deco2.png) 98% 98% no-repeat #ffffff;
  background-size: auto 100px;
  transform: rotate(2.5deg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
  z-index: -1;
  width: 99%;
}
#point .special_text {
    font-size: 160%;
    font-weight: bold;
    margin: 0 0 4em 0;
}
.box_wrap{
    position: relative;
    padding: 100px 50px;
}

#point .box{ line-height: 1;}
#point .box a{display: block; }

#point .column-1{width: 100%;}
#point .column-2{width: calc((100%) / 2);}
#point .column-3{width: calc((100%) / 3);}

#point .img_wrap{justify-content: space-between;}
#point .img_wrap a{}
#point dt{
    background: url(../images/glitter2.jpg) 0 0 no-repeat;
    margin-top: 20px;
    margin: 0 4%;
    overflow: hidden;
    padding: 8px;
    border-radius: 8px;
    
}
#point dd{line-height: 2; margin: 1em 4% 0 4%; font-size: 130%; font-weight: normal; }

.ticker-wrap {
    width: 100%;
    overflow: hidden;
    background: #A9B6F7;
    padding: .3em 0;
    white-space: nowrap;
    border-top: 8px solid #000;
    border-bottom: 8px solid #000;
}
.ticker-track {
    display: inline-block;
    animation: ticker 15s steps(60) infinite; 
    font-weight: bold;
    color: #000;
    font-size: 200%;
    font-weight: normal;
    font-style: italic;
}
@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/*-----------
Product
-----------*/
#product{
    width: 100%;
    position: relative;
    margin: 0 0 100px 0;
}
#product .dotline {
  top: 0;
  bottom: inherit;
}
#product h2 { margin: 0 0 100px 0;}
#comparison{border: none; padding: 0; max-width: 1500px; width: 80%; margin: 20% auto 0;}
.product_wrap {
    background:url(../images/deco3.png) 2% 2% no-repeat, url(../images/deco4.png) 98% 4% no-repeat, url(../images/deco5.png) 2% 98% no-repeat,url(../images/deco6.png) 98% 98% no-repeat, rgba(255,255,255,0.6);
    background-size: 10vw auto, 5vw auto, 5vw auto, 12vw auto;
    padding: 100px 0;
}
/*-----------
movie
-----------*/
#movie {max-width: 1200px; width: 95%; margin: 5em auto; padding: 30px; background: url(../images/glitter2.jpg) 0 0 repeat; padding: 8px; border-radius: 6px;}
#movie .inner { border: 5px solid #FFF; }
.movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*-----------
Preorder
-----------*/
.preorder {  }
.preorder h2{text-align: center;font-size:160%; font-weight: bold; margin: 0 0 1em 0;}
.preorder p.date{text-align: center; font-size: 200%; font-weight: bold; margin: 0 0 1em 0;}
.preorder .btn{margin-top: 1rem;}

/*-----------
Slider
-----------*/
.swiper-horizontal {
    padding-bottom: 5px !important;
}
.swiper-slide { 
    height: auto !important;
    overflow: hidden;
    border-radius: 10px; 
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
  }
.swiper-slide:hover img { transform:scale(1.05); }
.swiper-pagination-bullet-active{ background: var(--slider-page)!important; }
.slide-pagination-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between !important;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
  }
#middle_section {
    background: url(../images/kirakira_bg.png) center / cover no-repeat, linear-gradient(45deg, rgb(238, 197, 255), rgb(242, 104, 227));
    background-size: cover;
}
/*-----------
online
-----------*/
#online {width: 90%; max-width: 1000px; padding: 50px; margin: 0 auto; }
#online h3{font-size: 1.4em; background: #1C1C1C; display: inline-block; color: #FFF; padding: 0 .5em; margin-top: 2em;}
#online p{margin-top: 1em; line-height: 1.5em;}

/*-----------
Specifications
-----------*/
#bottom_section {
    position: relative;
    background: url(../images/bottom_bg.jpg) 50% 50% no-repeat;
    background-size: cover;
    padding-bottom: 200px;
}
#bottom_section canvas.sandstorm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* クリックやスクロールを透過 */
  z-index: 1;          /* コンテンツより上に重ねたい場合は調整 */
}
#bottom_section h2 {
    z-index: 99;
    position: relative;
}
.specifications{
    width: 90%;
    max-width: 1200px;
    background-size: cover;
    margin: 200px auto 0 auto;
    position: relative;
    z-index: 90;
}
.specifications h3 {
    padding: .5em 0 .5em 1em;
    background: #3A1F9B;
    background: url(../images/close.png) 99% 50% no-repeat, linear-gradient(180deg,rgba(58, 31, 155, 1) 0%, rgba(98, 56, 250, 1) 100%);
    background-size: auto 70%, auto;
    color: #fff;
    border-radius: 6px 6px 0 0;
}
.specifications_inner {
    background: #F7EDF7;
    padding: 60px;
    border-radius: 0 0 6px 6px;
    border: 5px solid #6238FA;
    border-top: none;
}
.specifications dl,
.specifications dt,
.specifications dd{box-sizing: border-box; font-size: 105%;}

.specifications dl{margin-top: 0; position: relative;font-weight: 500;}
.specifications dt,
.specifications dd{padding: 10px 30px 0 10px;line-height: 1.5;}
.specifications dd{ margin-left: 200px; padding-bottom: 10px; padding-left: 30px;}
.specifications dt{ width: 200px; float: left; padding-left: 0; text-align: right;}
.specifications dt span{padding: 0 .5em .1em .5em;  display: inline-block;}
#EN .specifications dt span {
    font-size: 92%;
}
#EN .specifications dt span {
    width: 250px;
}
#EN .specifications dd {
    margin-left: 250px;
}
/*-----------
footer
-----------*/
footer{
    background: #1C1C1C;
    border-width: 1px 0 0 0;
    position: relative;
    padding: 3em;
}
footer .inner.flex{width: 100%; margin: 0 auto; flex-wrap: wrap;justify-content: space-between;}
.share_area { text-align: center; }
.share_area p {
    width: 120px;
    margin: 0 auto 1em auto;
}
.share_area p img {
    width: 100%;
    height: auto;
}
.logo_wrap {
    margin: 3em 0 ;
    text-align: center;
}
.logo_wrap a { display: inline-block; margin: 0 .5em; }
.logo_wrap a img { max-width: 100%; height: 50px;}
.logo_wrap a:last-child img { max-width: 100%; height: 60px;}
.copyright_wrap {
    padding: 0 0 1em 0;
}
.copyright{text-align: left; font-size: .8em; text-align: center;  margin: 0 .5em; color: #FFF; font-weight: normal;}
.copyright span{vertical-align: middle;}
.copyright span img{width: 45px;}

footer .social{justify-content: center; align-items: center; margin: 0 auto;}
footer .social li{width: 40px; line-height: 0; margin-left: .6em; margin-right: .6em;}
footer .social li img{height: auto; width: 100%;}
footer .social a {margin-left: 0;}

/*-----------
responsive
-----------*/
@media screen and (max-width: 768px){
    a.btn,
    a.btn:hover { 
        background-size: .6em auto;
        margin: 2em auto 0 auto !important
    }
    body {
        background: none;
    }

    /*-----------
    Header
    -----------*/
	header .logo .logo_gsc img { height: 32px !important; }
	header .logo .logo_pup img { height: 37px !important;}

    header .right_wrap.flex{position: absolute; z-index: 100; width: 100%; left: 0; top: -200px; height: 200px; background: rgba(255,255,255,0.8); flex-direction: column; margin: 0; justify-content: center; align-items: center;transition: all 0.2s linear;}
    header .right_wrap.flex.active{top:0;transition: all 0.2s linear;}

    header .social { display: none; }
    header .right_wrap .language,
    header .right_wrap .social{width: 100%;justify-content: center; flex-wrap: wrap; font-size:1.2em; }
    header .language li.text,
    header .social li.text{width: 100%; text-align: center; margin-top: 1em; margin-bottom: 1em;}
    header .social li.text{margin-top: 2em;}
    header .language li{padding: 0 1em;}
    header .language li:first-of-type{border: none;}

    header .menu_btn{width: 30px; height: 30px; display: block;position: relative; z-index: 200;}
    header .menu_btn:hover{cursor: pointer;}
    header .menu_btn span{position: absolute; background: #000; width: 100%; height: 2px; display: block; right: 0; top: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn span::after,
    header .menu_btn span::before{content: ""; position: absolute; right: 0; height: 2px; background: #000; display: block;}
    header .menu_btn span::after{width: 100%; top: -10px;-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn span::before{width: 100%; bottom: -10px;-webkit-transition: .2s ease;transition: .2s ease;}
    
    header .menu_btn.active span::after{transform: rotate(45deg);width: 30px; top: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn.active span::before{transform: rotate(-45deg); width: 30px; bottom: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn.active span{background:transparent;-webkit-transition: .2s ease;transition: .2s ease;}
    .ticker-track {
        font-size: 130%;
    }
    .ticker-wrap {
        border-top: 4px solid #000;
        border-bottom: 4px solid #000;
    }
    /*-----------
    MV
    -----------*/
    #mv{
        background: url(../images/mv_sp.jpg) 50% 0 no-repeat;
        background-size: cover;
        height:100vh;
        min-height: 780px;
    }
    #mv_inner {
        width: 100%;
        flex-direction: column;
        padding: 0 2%;
        min-height: 780px;
    }
    #mv_textbox { 
        margin: auto 0 5em 0;
        width: 100%;
    }
    #mv img#c1,
    #mv img#c2,
    #mv img#c3 {width: 35vw;}
    #mv img#c1 {
        top: -20%;
        left: 5%;
    }
    #mv img#c2 {
        top: 35%;
        right: -35%;
    }
    #mv img#c3 {
        bottom: -15%;
        left: 0;
    }
    #mv::after {
        display: none;
    }
    #mv img.heart {
        height: 20vw; 
        z-index: 99;
    }
    #mv img.heart.h02 { bottom: 2vw; right: 2%;}
    #lead { 
        width: 100%;
        padding: 3em 0 0 0;
        margin: 0;
    }
    #lead .inner {
        width: 100%;
        height: auto;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center;
        align-items: stretch;
    }
    .concept_image {
        width: 100%;
        height: 100%;
        position: relative;
        margin: 0 auto 2.5em auto;
    }
    .concept_textbox img {
        width: 90%;
        margin: 0 0 1.5em -2%;
    }
    .concept_image img.visible { opacity: 1; }
    .concept_textbox {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;
        bottom: 0;
        z-index: 1000;
    }
    .textbox_inner {
        width: 92%;
    }
    h1 {
        width: 90%;
        max-width: 500px;
         margin: 0;

    }
    #stickybar {
        height: auto;
        padding: 1em 0;
    }
    #stickybar a {
        width: 86%;
        font-size: 110%;
        max-width: inherit;
        height: auto;
        margin: 0 auto;
        padding: .8em 0;
    }
    #mv a.btn { 
        width: 92%;
        font-size: 110%;
    }
    .sticker img {
        width: 30vw;
    }
    .sticker img#s1 {
        top: 50px;
        right: 2%;
    }
    .sticker img#s3 {
        bottom: 30%;
        left: 2%;
    }
    .concept_textbox p span {
        font-size: 120%;
    }
    /*-----------
    #point
    -----------*/
    #point {
        position: relative;
        max-height: inherit;
        height: auto;
    }
    .points-list {
        width: 100%;
        padding: 2.5em 2%;
    }
    #EN #point dd p {
        display: inline;
    }
    /*-----------
    product
    -----------*/
    #product {
        position: relative;
        height: auto;
        min-height: auto;
        }
    .box_wrap {
        padding: 10em 5%;
    }
    #point .column-3{width: calc((100%) / 2);}
    #point dl { margin-bottom: 2em; }
    #point dl:last-child { margin-bottom: 0; }
    .product_wrap {
        background-size: auto 90px, auto 70px, auto 70px, auto 90px;
    }
    #point dd{font-size: 100%; }
    .specifications{width: 92%; margin-top: 100px;}
    .specifications_inner {padding: 2em 10%;}
    .specifications dl {width: 100%; margin: 0 auto;}
    .specifications dl::after {background: none;}
    .specifications dt{float: none;width: 100%; padding: 0 0 .5em; margin-top: 2em; text-align: center;}
    .specifications dt:first-of-type{margin-top: 1em;}
    .specifications dd{width: 100%; margin-left: 0; padding: 0; border: none; text-align: center;}
    #EN .specifications dt span { font-size: 100%; }
    #bottom_section {padding-bottom: 100px;}
    /*-----------
    preorder_fixd
    -----------*/
    .preorder {
        width: 92%;
        margin: 0 auto;
        padding: 0;
    }
    .preorder h2,
    .preorder p.date {
        width: 100%;
        margin: 0 auto;
    }
    .preorder_tokuten .text_box h2 img {
        width: 80%; 
    }
    #EN .preorder_tokuten .text_box h2 img {
        width: 100%; 
    }
    .preorder_tokuten {
        width: 92%;
        margin: 0 auto 5em auto;
    }
    .preorder_tokuten .inner {
        flex-direction: column;
        padding: 2em 0;
    }
    .preorder_tokuten img {
        display: block;
        margin: 0 auto;
        width: 92%;
    }
    .preorder_tokuten .text_box {
        margin: 0 0 1em 0;
        width: 100%;
        background-position: 90% 75%;
    }
    .preorder_tokuten .text_box p {
        background-position: 95% 100%;
    }
    .specifications h2 { width: 80%;}
    .specifications h3 {
        font-size: 105%;
    }
    #EN .specifications dt span {
    width: auto;
    }
    #EN .specifications dd {
        margin-left: 0;
    }
    /*-----------
    footer
    -----------*/
    footer{padding: 2em 2%;}
    footer .inner.flex{flex-direction: column-reverse; align-items: center;}
    /*-----------
    Online
    -----------*/
    #online {
        width: 92%;
        padding: 2em 0 0 0;
    }
    #online h3 { font-size: 1.3em; }

    .logo_wrap{margin: 3em auto;}
    .copyright{text-align: center;}
    .copyright_wrap { display: block; }
    .copyright span img { width: 3.5em; }

}