/*-----------
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: "hiragino-kaku-gothic-pron", "ヒラギノ角ゴシック", Sanfransisco, Arial, "SF Pro SC", Meiryo, "メイリオ", "微软雅黑", "Microsoft YaHei";
    font-optical-sizing: auto; 
    font-weight: 400;
    overflow-x: hidden;
    background: url(../images/bg_paper.jpg) 0 0 no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
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;}

/*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 2s;
  &.fadein-left{
      transform: translate(-40px,0);
  }
  &.fadein-right{
      transform: translate(40px,0);
  }
  &.fadein-up{
      transform: translate(0,-40px);
  }
  &.fadein-bottom{
      transform: translate(0,40px);
  }
  &.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: linear-gradient(
        90deg,
        rgba(131, 196, 255, 1) 0%,
        rgba(213, 181, 214, 1) 25%,
        rgba(255, 131, 133, 1) 50%,
        rgba(213, 181, 214, 1) 75%,
        rgba(131, 196, 255, 1) 100%
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
    filter: hue-rotate(0deg);
    transition: background-position 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.8s ease;
    color: #FFF;
    text-align: center;
    padding: 1.2em 1em;
    max-width: var(--btn-max-w);
    width: 100%;
    margin: 0 auto;
    text-decoration: none;
    border-radius: var(--border-radiue);
    font-weight: bold;
    z-index: 4;
    font-size: 110%;
    border: 4px solid #FFF;
    box-shadow: 0px 5px 5px 0px #d6d6d6;
}
a.btn::after {
    content: "";
    background: url(../images/commone/arrow_white.png) 0 50% no-repeat;
    background-size: 15px auto;
    position: absolute;
    top: 0;
    right: 4%;
    z-index: 2;
    width: 15px;
    height: 100%;
     transition: 0.3s ease-in-out;
}
a.btn:hover { 
    background-position: 100% 0%;
    filter: hue-rotate(5deg);
}
a.btn:hover::after { 
    right: 3%;
}
/*---------
　Font
---------*/
.noto-sans-jp{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
}
.caveat {
  font-family: "Caveat", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
}
/*-----------
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 1em 1em 0;}
header.absolute{position: absolute; top:0; left: 0; width: 100%; height: 5vw;  }
header .logo ul {
    display: flex;
    align-items: center;
    background: #FFF;
    padding-left: 1em;
    padding-bottom: calc(1em + 8px);
    padding-right: 1em;
}
header .logo ul li { margin: 0 1em 0 0; }
header .logo ul li img { width: auto; height: 40px; display: block;}

@media screen and (max-width: 1024px){
    header .logo ul li img { width: auto; height: 30px; }
}
@media screen and (max-width: 820px){
    header .logo ul li img { width: auto; height: 25px; }
}
/*-----------
MV
-----------*/
#mv-wrapper {position: relative; background: #FFF;}
#mv{
    position: relative;
    padding: 40px 20px;
}
.catch div {
    position: absolute;
    z-index: 99;
    font-size: 7vw;
    color: #FFF;
    font-weight: normal;
}
.catch div:first-child {
    top: 80px;
    left: 20px;
}
.catch div:last-child{
    bottom: 30px;
    right: 40px;
}
.catch div .mask{
    display:inline-block;

}
.catch div:first-child .txt { animation-delay: 0.2s; }
.catch div:last-child .txt { animation-delay: 1.3s; }
.catch div .txt{
    display:inline-block;
    animation: wipe 1.1s cubic-bezier(.65,0,.35,1) forwards;
    clip-path: inset(0 100% 0 0);
    padding-right: 0.1em;
}
@keyframes wipe{
    to{ clip-path: inset(0 0% 0 0); }
}
#mv_inner {
    background: #FFCECF;
    background: linear-gradient(280deg,rgba(255, 206, 207, 1) 0%, rgba(222, 219, 239, 1) 50%, rgba(171, 215, 255, 1) 100%);
    display: flex;
    justify-content: space-between;
    height: 100%;
    padding: 80px 20px;
    gap: 20px;
}
#mv_inner::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: url(../images/bg.png) 0 0 repeat;
    background-size: 150px auto;
}
#mv_inner div {
    border: 4px solid #FFF;
    z-index: 3;
}
#mv_inner div.mv_fubuki,
#mv_inner div.mv_mio {
    flex: 1 1 0%; 
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    align-self: flex-end; 
}
#mv_inner div.mv_fubuki {
    margin-bottom: -40px;
}
#mv_inner div.mv_mio {
    align-self: flex-start;
    margin-top: -40px;
}
#mv_inner div.two_shot {
    flex: 0 0 45%; 
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    align-self: center;
}
#mv_inner div img.kv {
    width: 100%;
    height: auto;
    object-fit: cover;
}
#mv_inner div h2 {
    position: absolute;
    bottom: 0;
    text-align: center;
}
#mv_inner div.mv_fubuki h2{
    background: #83C4FF;
    background: linear-gradient(0deg,rgba(131, 196, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);

} 
#mv_inner div.mv_mio h2{
    background: #FF8385;
    background: linear-gradient(0deg,rgba(255, 131, 133, 1) 0%, rgba(255, 255, 255, 0) 100%);
} 
#mv_inner div h2 img {
    width: 90%;
    height: auto;
}

#stickybar {
    position: fixed;
    bottom: 0;
    background: #ffffff40;
    width: 100%;
    z-index: 9999;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: 0.3s ease-in;
}
#stickybar a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 350px;
    margin: 15px auto;
    background: #83C4FF;
    background: linear-gradient(
        90deg,
        rgba(131, 196, 255, 1) 0%,
        rgba(213, 181, 214, 1) 25%,
        rgba(255, 131, 133, 1) 50%,
        rgba(213, 181, 214, 1) 75%,
        rgba(131, 196, 255, 1) 100%
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
    filter: hue-rotate(0deg);
    transition: background-position 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s ease;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
    box-sizing: border-box;
    padding: .5em 0;
    border: 3px solid #fff;
}
#stickybar a::after { 
    content: "";
    background: url(../images/commone/arrow_white.png) 0 50% no-repeat ;
    background-size: 12px auto;
    position: absolute;
    top: 0;
    right: 4%;
    width: 12px;
    height: 100%;
    z-index: 5;
    transition: 0.3s ease-in-out;
}
#stickybar a:hover::after { 
    right: 3%;
}
#stickybar a:hover { 
    background-position: 100% 0%;
    filter: hue-rotate(5deg);
}
#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;
}
/*-----------
#point
-----------*/
#point_wrap {

}
.point {
    position: relative;
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 0;
}
.point .inner{
    display: flex;
    flex-wrap: wrap;
}
.point.mio .inner{ flex-direction: row-reverse; }
.point h2 {
    width: 100%;
    margin-bottom: 80px;
}
.point h2 img {
    width: 100%;
    height: auto;
}
.point .visual {
    display: block;
    position: sticky;
    top: 10px;
    width: 40%;
    height: calc(100vh - 115px);
    margin-right: 6%;
    border: 4px solid #FFF;
    flex: 0 0 40%;
    align-self: flex-start;
    overflow: hidden;
    z-index: 2;
}
.point .visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.point.mio .visual {
    margin-right: 0;
    margin-left: 6%;
}
.box_wrap {
    flex: 1;
}
.point .box{ line-height: 1;}
.point .box a{display: block; }

.point .img_wrap{
    flex-direction: column;
    justify-content: space-between;
}
.point dl {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 80px;
}
.point dl:nth-of-type(1) { margin-top: 80px; }
.point dl:nth-of-type(2) { flex-direction: row-reverse; }
.point dl:nth-of-type(3) {margin-bottom: 140px;}
.point dt{
    width: 320px;
}
.point dt img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 15px;
}
.point dt a{
    display: block;
    width: 100%;
    overflow: hidden;
}
.point dd {
    flex: 1;
    margin: 0 20px;
    line-height: 1.8;
}
.point dd.illust {
    position: absolute;
}
.point dd.illust.check {
    bottom: -75px;
    right: 25%;
}
.point dd.illust.kirakira {
    bottom: -120px;
    right: 0;
}
.point dd.illust.heart {
    bottom: -120px;
    left: 0;
}
.point.mio dd.illust.heart {
    bottom: -120px;
    left: 40%;
}
.point_text {
    position: relative;
    background: url(../images/grid.png) 50% 50% repeat #FFF;
    background-size: 60px auto;
    width: calc(100vw - var(--scrollbar-width, 0px));
    margin-left: calc(50% - 50vw + (var(--scrollbar-width, 0px) / 2));
    margin-right: calc(50% - 50vw + (var(--scrollbar-width, 0px) / 2));
    margin-bottom: 100px;
    padding: 100px 0;
    z-index: 1;
    box-shadow: 0px 5px 5px 0px #d6d6d6;
}
.point_text .inner {
    display: flex;
    margin: 0 auto;
    max-width: 1400px;
    width: 90%;
    flex-wrap: nowrap;
}

.point_text .inner .spacer {
    width: 40%;
    flex: 0 0 40%;
    align-self: flex-start;
    margin-right: 6%;
    overflow: hidden;
}
.point_text .inner .point_text_content{
    flex: 1;
}
.point_text .inner .point_text_content h3 {
    margin-bottom: 1em;
}
.point_text .inner .point_text_content h3 img {
    width: auto;
    height: 27px;
}
#EN .point_text .inner .point_text_content h3 img {
    max-width: 100%;
    height: auto;
}
.point_text .catch {
    font-size: 6vw;
    position: absolute;
    top: -7.5vw;
    right: 2%;
    z-index: 10;
    color: #FFF;
    font-weight: normal;
}
.point.mio .point_text .catch {
    right: inherit;
    left: 2%;
}

@media screen and (max-width: 1024px){
    .point .visual,
    .point_text .inner .spacer {
        width: 50%;
        flex: 0 0 50%;
        margin-right: 4%;
    }
    .point dl {
        flex-direction: column !important;
    }
    .point dd {
        width: 100%;
        margin: 20px 0 0 0;
    }
    .point_text .inner .point_text_content h3 img {
        width: 100%;
        height: auto;
    }
    .point dd.illust {
        position: static;
    }
    .point dd.illust.check,
    .point dd.illust.heart {
        text-align: right;
    }
    .point dl:nth-of-type(3) {
        margin-bottom: 80px;
    }
    .point .visual img {
        object-position: 75% 0;
    }
    .point.mio .visual img {
        object-position: 50% 0;
    }
}
/*-----------
Product
-----------*/
#product{
    width: 100%;
    position: relative;
    padding: 8em 0 0 0;
}
#product .dotline {
  top: 0;
  bottom: inherit;
}
#product h2 { margin: 0 0 1em 0; text-align: center;}
#comparison{border: none; padding: 0; max-width: 1500px; width: 80%; margin: 20% auto 0;}
.product_wrap {
    padding: 0 0 100px 0;
    position: relative;
}
.product_wrap .heart {
    max-width: 300px;
    width: 15vw;
    top: -8vw;
    right: -5%;
    z-index: 100;
}
/*-----------
Preorder
-----------*/
.preorder_wrap {
    padding: 80px 0;
}
.preorder {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    padding: 40px;
    text-align: center;
}
.preorder h2 { margin: 0 auto 1em auto;}
.preorder h3{text-align: center;font-size:160%; font-weight: 900; margin: 40px 0 0 0;}
.preorder p.date{text-align: center; font-size: 200%; font-weight: 900; margin: 0 0 40px 0;}
.preorder .btn{margin-top: 1rem;}
.shipping {
    margin: 40px auto 0 auto;
    font-size: 120%;
}
/*-----------
Slider
-----------*/
.swiper_wrap {
    position: relative;
    padding-bottom: 40px;
    text-align: center;
}
.swiper_wrap::before {
    display: block;
    content: "";
    position: absolute;
    background: #FFCECF;
    background: linear-gradient(280deg,rgba(255, 206, 207, 1) 0%, rgba(222, 219, 239, 1) 50%, rgba(171, 215, 255, 1) 100%);
    width: 100%;
    height: 455px;
    z-index: 0;
    bottom: 0;
}
.swiper_wrap::after {
    display: block;
    content: "";
    position: absolute;
    background: url(../images/bg.png) 0 0 repeat;
    background-size: 150px auto;
    width: 100%;
    height: 455px;
    z-index: 0;
    bottom: 0;
}
.swiper-horizontal {padding-bottom: 5px !important;}
.swiper-slide { 
    height: auto !important;
    overflow: hidden;
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
  }
.swiper-slide:hover img { transform:scale(1.05); }
.swiper-pagination{position: relative!important; bottom: 0!important; margin-top: 1em;}
.swiper-pagination-bullet{background: #fff!important; opacity: 1!important;width: 13px!important; height: 10px!important; border-radius: 100px!important;}
.swiper-pagination-bullet-active{width: 22px!important; background: #372D2D!important;}
.swiper-button-prev,
.swiper-button-next {
    display: block !important;
    width: 66px !important;
    height: 66px !important;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 ;
    border-radius: 66px;
    border: 3px solid #FFF;
}
.swiper-button-prev {background: url(../images/commone/arrow_white_left.png) 50% 50% no-repeat #372D2D;}
.swiper-button-next {background: url(../images/commone/arrow_white_right.png) 50% 50% no-repeat #372D2D;}
.annotation {
    display: inline-block;
    position: relative;
    background: #FFF;
    margin: 1em auto 0 auto;
    padding: .5em 1em;
    text-align: center;
    border-radius: 100px;
    z-index: 4;
}
.swiper-slide {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8) !important;
    transform-origin: center bottom;
    align-self: flex-end;
}
.swiper-slide-active,
.swiper-slide-duplicate-active  {
    transform: scale(1) !important;
    transform-origin: center bottom;
}
.swiper-wrapper {
    align-items: flex-end;
}
/*-----------
online
-----------*/
#online { 
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 2.5em auto;
    background: url(../images/grid.png) 50% 50% repeat #FFF;
    background-size: 60px auto;
    box-shadow: 0px 5px 5px 0px #d6d6d6;
    padding: 80px;

}
#online h3:first-of-type{margin-top: 0;}
#online h3{font-size: 1.4em; margin-top: 1em; font-size: 130%; font-weight: bold; }
#online p{margin-top: 1em; font-size: 90%;}
#online a.btn {
    margin: 2em auto auto auto;
    background: #372D2D;
    padding: .6em 1em;
    max-width: 400px;
    border: none;
    box-shadow: none;
    transition: 0.3s ease-in-out;
}
#online a.btn:hover {
    background: #806868;
}
.online_wrap .heart {
    max-width: 300px;
    width: 10vw;
    top: 20%;
    left: 2%;
    z-index: 100;
}
/*-----------
Specifications
-----------*/
.specifications{
    width: 90%;
    position: relative;
    z-index: 90;
    margin: 0 auto;
}
.specifications h2 {
    max-width: 1400px;
    margin: 0 auto;
}
.specifications h2 img {
    width: 100%;
    height: auto;
}
.specifications_inner {
    padding: 60px 8%;
    max-width: 1200px;
    margin: 0 auto;
    color: #FFF;
    text-align: center;
}
.specifications h3:first-of-type{margin-top: 0;}
.specifications h3 {margin-top: 2em; font-size: 110%;}
.specifications p{text-align: center; margin-top: 1em;}

/*-----------
footer
-----------*/
#footer_wrap {
    background: url(../images/fubuki_bg.png) -10% 100% no-repeat, url(../images/mio_bg.png) 100% 100% no-repeat#372D2D;
    background-size: auto 80%, auto 80%;
    padding: 80px 0 0 0;
}
@media screen and (max-width: 1280px){
    #footer_wrap {
        background-position: -30% 100%, 110% 100%;
    }
}

footer{
    border-width: 1px 0 0 0;
    position: relative;
    padding: 0 3em 6em 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;}
.copyright_wrap {padding: 0 0 1em 0;}
.copyright{text-align: left; font-size: .8em; text-align: center;  margin: 0 .5em; font-weight: normal; color: #FFF;}
.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){
    body {
        background-size: 200% auto;
        background-repeat: repeat;
    }
    /*-----------
    Header
    -----------*/
    header {padding: 0;}
	header .logo .logo_gsc img,
    header .logo .logo_gscollection img { height: 32px !important; }
    header .logo ul { padding-bottom: 1em; }

    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;}
    /*-----------
    MV
    -----------*/
    #mv{
        padding: 0;
    }
    #mv_bg {
        height: 60vh;
        max-height: 500px;
    }
    #mv_bg img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .mv_bg {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .mv_bg.title {
        width: 90%;
        margin: 0 auto;
        bottom: 20px;
    }
    #mv_inner {
        display: block;
        width: 100%;
        padding: 0;
        padding: 20px;
    }
    #mv_inner::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 50%;
        background: #FFF;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #mv_inner::after {
        background-size: 60px auto;
        background-repeat: repeat;
    }
    #mv_inner div.two_shot {
        aspect-ratio: inherit;
    }
    #stickybar {
        height: auto;
        padding: 1em 0;
    }
    #stickybar a {
        width: 86%;
        font-size: 110%;
        max-width: inherit;
        height: auto;
        margin: 0 auto;
        padding: .8em 0;
    }
    .catch div {
        font-size: 12vw;
        text-align: center;
        left: 0 !important;
        right: 0 !important;
        margin: auto;
    }
    .catch div:first-child {
        top:50px;
    }
    .catch div:last-child{
        bottom: 63vw;
    }
    /*-----------
    #point
    -----------*/
    .point {
        width: 100%;
        padding: 40px 0;
    }
    .point.fubuki {
        padding-top: 70px;
    }
    .point h2 {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 40px;
    }
    .point .inner,
    .point.mio .inner {
        flex-direction: column;
    }
    .point .visual {
        width: 90%;
        margin: 0 auto;
        position:relative;
        order: -1;
    }
    .point .visual p {
        width: 100%;
        position: absolute;
        bottom: 20px;
        z-index: 3;
        font-size: 12vw;
        font-weight: normal;
        color: #FFF;
        text-align: center;
    }
    .box_wrap {
        order: 2;
        display: block;
    }
    .point_text {
        overflow: hidden;
        width: 100%;
        order: 1;
        margin-top: -60px;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 40px;
    }
    .point .img_wrap {
        width: 90%;
        align-items: center;
        margin: 0 auto;
    }
    .point dl,
    .point dl:nth-of-type(3) {
        margin-bottom: 40px;
    }
    .point dt{
        width: 90%;
    }
    
    /*-----------
    product
    -----------*/
    #product {
        padding: 40px 0;
        position: relative;
        height: auto;
        min-height: auto;
        }
    .product_wrap {padding-bottom: 5em;}
    .swiper-button-prev,
    .swiper-button-next {
        width: 12vw !important;
        height: 12vw !important;
        background-size: 2vw auto !important;
    }
    .swiper_wrap::before,
    .swiper_wrap::after {
        height: 60%;
    }
    .swiper_wrap::after {
        background-size: 60px auto;
    }
    .annotation { width: 92%;}
    .preorder_wrap {
        padding: 40px 0 0 0;
    }
    .specifications{width: 92%; margin: 0 auto;}
    .specifications h2 {margin: 0 auto; width: 90%;}
    .specifications_inner {padding: 40px 0;}
    .specifications h3 {font-size: 105%;}
    .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: 5em 0;}
    /*-----------
    preorder_fixd
    -----------*/
    .preorder {
        width: 90%;
        margin: 0 auto;
        padding: 0;
    }
    .preorder h3 {
        margin: 1em auto;
        font-size: 120%;
    }
    .preorder h3,
    .preorder p.date {
        width: 100%;
    }
    #EN .preorder p.date {
        font-size: 140%;
    }
    .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%;
    }
    #EN .specifications dt span {width: auto;}
    #EN .specifications dd {margin-left: 0;}
    /*-----------
    footer
    -----------*/
    #footer_wrap {
        background-size: 60% auto, 60% auto;
        background-position: -60% 100%, 130% 100%;
    }
    footer {
        width: 100%;
        padding: 0;
        margin: 0 auto;
        padding-bottom: 6em;
    }
    footer .inner.flex{flex-direction: column-reverse; align-items: center;}
    .logo_wrap a img {
        max-width: 100%;
        height: 40px;
    }
    /*-----------
    Online
    -----------*/
    #online {
        width: 90%;
        margin: 40px auto;
        padding: 40px 5%;
    }
    #online a.btn {
        margin: 40px auto 0 auto;
        padding: 1em;
    }
    .online_wrap {padding: 5em 4% 0 4%;}
    #online h3 { font-size: 1.3em; }

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

}