/*-----------
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: "Zen Maru Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", Sanfransisco, Arial, "SF Pro SC", Meiryo, "メイリオ", "微软雅黑", "Microsoft YaHei";
    font-optical-sizing: auto; 
    font-weight: 400;
    background: url(../images/concept_bg.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;}
.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;
  }
}

/*-----------
ボタン
-----------*/
a.btn{
    position: relative;
    display: block;
    background: #EE7CB0;
    background-size: .5em auto;
    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::after {
  content: "＞";
  display: inline-block;
  margin-left: 10px;
  font-size: 80%;
  font-weight: bold;
  transition: 0.3s;
}
a.btn:hover { background: #2C91DF; }
a.btn:hover::after { transform: translateX(5px); }

/*---------
　Font
---------*/
/*Zen Maru Gothic*/
.zen-maru-gothic {
    font-family: "Zen Maru Gothic", sans-serif;
    font-style: normal;
    font-weight: 500;
  }

/*-----------
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:1em 10px;position: relative;z-index: 50; width: 100%; height: 5vw;}
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; }

/*-----------
MV
-----------*/
#mv{
    position: relative;
    background: url(../images/mv_pc.jpg) 50% 0 no-repeat;
    background-size: cover;
    height: 100vh;
    min-height: 768px;
    z-index: 1;
} 
#mv_inner {
    display: flex;
    align-items: center;
    height: 100vh;
    min-height: 768px;
    padding: 0 5em;
}
#mv_textbox {
}  
h1 {
    width: 30vw;
    margin: 0 auto 1.5em auto;
}
h1 img {
  width: 100%;
  height: auto;
}
#stickybar {
    position: fixed;
    bottom: 0;
    background: #2c91df7a;
    width: 100%;
    height: 80px;
    z-index: 9999;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: 0.3s ease-in;
}
#stickybar a {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 350px;
    height: 50px;
    margin: 15px auto 0 auto;
    background: #EE7CB0;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
    box-sizing: border-box;
    transition: 0.3s ease-in-out;
}
#stickybar a:hover { background: #2C91DF; }
#stickybar a span {
    font-weight: bold;
    letter-spacing: .1em;
    text-rendering: optimizeLegibility;
    line-height: 50px;
}
#stickybar a span.small { font-size: 80%; }
#stickybar.visible { opacity: 1; }
#EN #stickybar a span { letter-spacing: normal; }
#stickybar a::after {
  content: "＞";
  display: inline-block;
  margin-left: 15px;
  font-size: 70%;
  font-weight: bold;
  transition: 0.3s;
}
#stickybar a:hover::after { transform: translateX(5px); }
#mv a.btn{
    font-size: 120%;
    max-width: 540px;
}
/*-----------
MV Snow
-----------*/
.snows div{
  position: absolute;
  top: -250px;
  left: 0;
  border-radius: 50%;
  background: #fff;
  opacity: 0.6;
}
.snows div:nth-child(1){
  width: 8px;
  height: 8px;
  filter: blur(2px);
  box-shadow:
    5vw -40px 0 #fff,
    10vw 150px #fff,
    15vw -230px #fff,
    22vw 240px #fff,
    30vw 120px #fff,
    35vw -180px #fff,
    44vw 240px #fff,
    50vw 0 #fff,
    60vw 180px #fff,
    68vw 40px #fff,
    74vw -130px #fff,
    81vw -240px #fff,
    88vw 100px #fff,
    95vw 60px #fff;
    animation: fall 12s linear infinite;
}
.snows div:nth-child(2){
  width: 10px;
  height: 10px;
  filter: blur(2px);
  box-shadow:
    7vw 220px 0 #fff,
    35vw 20px #fff,
    68vw 100px #fff,
    93vw -190px #fff;
  animation: fall 12.5s linear infinite;
  animation-delay: 6s;
}
.snows div:nth-child(3){
  width: 14px;
  height: 14px;
  filter: blur(3px);
  box-shadow:
    12vw 5px 0 #fff,
    32vw -100px #fff,
    45vw -180px #fff,
    68vw 40px #fff,
    77vw 65px #fff,
    94vw 230px #fff;
  animation: fall 10s linear infinite;
  animation-delay: 6s;
}
.snows div:nth-child(4){
  width: 20px;
  height: 20px;
  filter: blur(8px);
  box-shadow:
    40vw -200px #fff,
    80vw 220px #fff;
  animation: fall 15s linear infinite;
  animation-delay: 4s;
}
@keyframes fall{
  0%{
    top: -250px;
  }
  100% {
    top: calc(100% + 250px);
  }
}
/*-----------
#lead 
-----------*/
#lead {
    width: 100%;
    position: relative;
    margin: 0 auto;  
}
#lead .inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 92%;
    max-width: 1920px;
    min-height: 768px;
    margin: 0 auto;
    z-index: 2;
}
.concept_image {
    position: relative;
    width: 50%;
    z-index: 999;
}
.concept_image img {
    width: 100%;
    height: auto;
    margin: 30px 0 -70px 0;
}
.concept_textbox {
    background: url(../images/heart_bottom.png) 80% 100% no-repeat;
    text-align: center;
    padding: 100px 0;
    width: 50%;
} 
.textbox_inner {
    margin: 0 auto;
    text-align: center;
}
.concept_textbox img {
    width: 100%;
    width: 70%;
    margin: 0 0 1.5em -10%;
    height: auto;
}
.concept_textbox p {
    font-size: 130%;
    line-height: 1.4em;
    font-weight: bold;
    margin: 0 0 1em;
}
.dotline {
    position: absolute;
    bottom: -8px;
    left: 0;
    background: url(../images/line.png) 0 100% repeat-x;
    width: 100%;
    height: 15px;
    z-index: 1;
}
/*-----------
#point
-----------*/
#top_section {
    position: relative;
    background: #FFF;
    overflow: hidden;
}
.flex-container {
  display: flex;
  position: relative;
  align-items: stretch;
}
.points-list {
  width: 47%;
  z-index: 2;
  padding: 5vw 2% 0 2%;
}
.main-visual {
  width: 53%;
  top: 0;
}
.main-visual img {
    width: 100%;
    object-fit: cover; 
    object-position: left center; 
}
.point-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5vw;
    position: relative;
}
.line-box {
  flex: 1;
  position: relative;
  height: 2.5vw;
}
.point-line svg {
  width: 100%;
  overflow: visible;
}
.point-line line {
  stroke: #EE7CB0;
  stroke-width: 0.2vw;
  min-stroke-width: 2px;
}
#point .box_wrap,
#point .box.column-1 { height: auto; }
#point dl{ 
  display: flex;
  z-index: 30;
}
#point dt{ 
  width: 34%;
  min-width: 5vw;
  margin: 30px 4% 0 0;
}
#point dt a {
  display: block;
  border-radius: 100%;
  overflow: hidden;
}
#point dt a img{ transition: 0.3s; }
#point dt a:hover img{ transform:scale(1.1); }
#point dd { flex: 1; }
#point dd img {
  width: auto !important;
  height: 8vw !important;
  margin-bottom: 1vw;
  height: auto;
  display: block;
}
#point dd p{
  display: inline;
  padding: 2px 7px 3px 7px;
  margin: 0 0 0 12px;
  font-size: 1.05vw;
  line-height: 2;
  font-weight: bold;
  background: linear-gradient(transparent 0%, #EE7CB0 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #FFF;
}
#point .point-item img{ width: 100%; height: auto; padding: 0; border-radius: 100%; }
.point { z-index: 11; }
#point_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10; 
    pointer-events: none; 
}
#point .inner{margin: 0 auto; flex: 1;}
#point {
    display: flex;
    overflow: visible;
    margin: 0 auto;
    background: #FFF;
}
.line-container {
    flex: 1; 
    position: relative;
}
.point-line {
    position: absolute;
    top: 6vw;
    left: -12px;
    transform-origin: left center;
    z-index: 20;
}
.point-line.line-01 { transform: rotate(-4.5deg); width: 25.5vw; /*top: -2vw;*/ }
.point-line.line-02 { transform: rotate(25deg); width: 18.5vw; /*top: -2vw;*/ }
.point-line.line-03 { transform: rotate(33deg); width: 25vw; /*top: -2vw;*/ }
#EN .point-line {
    left: -15px;
}
#EN .textbox_inner {
    padding: 0 2%;
    max-width: 600px;
}
#EN #point dd p{
    display: block;
}
#EN .concept_textbox img {
    margin: 0 0 1.5em 0;
}


html[lang="zh-cmn-Hant"] .point-line.line-01 {
}
@media screen and (min-width: 1920px) {
  .point-line line { stroke-width: 4px; }
    #point {
        min-width: 1024px;
        max-width: 1920px;
    }
    .points-list { padding: 150px 2% 0 2%;  }
    #point dd p { font-size: 110%; }
    #point dd img {
        width: 140px !important;
        height: auto !important;
        margin-bottom: 15px;
    }
    .point-item { margin-bottom: 30px; }
    .point-line { left: -8px; }
    #point dt { min-width: inherit; }
    .point-line.line-01 { width: 490px; transform: rotate(-10deg); top: 130px; }
    .point-line.line-02 { width: 355px; transform: rotate(20deg); top: 120px; }
    .point-line.line-03 { width: 480px; transform: rotate(33deg); top: 120px; }
}
@media screen and (max-width: 1919px) {
    /*#point dd p { font-size: 18px;}*/
    .point-line.line-01 { transform: rotate(-3deg); width: 25.5vw; /*top: -10px;*/ }
    .point-line.line-02 { transform: rotate(29deg); width: 18vw; /*top: -10px;*/ }
    .point-line.line-03 { transform: rotate(40deg); width: 24vw; /*top: -10px;*/ }
}
@media screen and (max-width: 1550px) {
    /*#point dd p { font-size: 16px;}*/
    .point-line { top: 5vw;}
}
@media screen and (max-width: 1400px) {
    /*#point dd p { font-size: 15px;}*/
}
@media screen and (max-width: 1300px) {
    /*#point dd p { font-size: 14px; }*/
    .point-line { top: 4vw;}
}
@media screen and (max-width: 1080px) {  
    /*#point dd p { font-size: 12px; }*/
    .point-line { 
        top: 3vw;
     }
}
@media screen and (max-width: 920px) {  
    #point .inner { flex-direction: column-reverse; }
    .main-visual { width: 100% }
    .points-list {
        width: 100%;
        padding: 1.5em 2%;
    }
    #point dt {
        width: 34%;
        margin: 1em 2% 0 0;
    }
    #point dd img { width: 12vw !important; height: auto !important; }
    #point dd p { font-size: 110%; }
    .point-line.line-01,
    .point-line.line-02,
    .point-line.line-03 { display: none; }
}

/*-----------
Product
-----------*/
#product{
    width: 100%;
    padding: 100px 0;
    margin: -15px 0 0 0;
    position: relative;
}
#product .dotline {
  top: 0;
  bottom: inherit;
}
#product h2 { margin: 0 0 2em 0;}
#comparison{border: none; padding: 0; max-width: 1500px; width: 80%; margin: 20% auto 0;}

/*-----------
Preorder
-----------*/
.preorder { padding: 3em 0; }
.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;}
.preorder_tokuten {
    max-width: 1000px;
    background: #FFF;
    margin: .5em auto 5em auto;
    position: relative;
    border-radius: 20px;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
}
.preorder_tokuten .inner {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding: 2em 0;
    display: flex;
    justify-content: space-between;
}
.preorder_tokuten img {
    width: 400px;
    display: block;
    border-radius: 100%;
}
.preorder_tokuten .text_box {
    margin: 0 0 0 2.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    text-align: center;
}
.preorder_tokuten .text_box h2 {
    width: 100%;
}
.preorder_tokuten .text_box h2 img {
    width: 100%;
    height: auto;
    border-radius: inherit;
}
.preorder_tokuten .text_box .tokuten_text {
    min-height: 150px;
    background: url(../images/heart_bottom.png) 95% 90% no-repeat;
    background-size: 20% auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.preorder_tokuten .text_box .tokuten_text p {
    font-size: 140%;
    font-weight: bold;
}
.preorder_tokuten .text_box .tokuten_text p.size {
    font-size: 100%;

}
.preorder_tokuten .text_box ul { margin: 1.5em 0; }
.preorder_tokuten .text_box .btn { margin: 0; }
.preorder_tokuten img.line_top,
.preorder_tokuten img.line_bottom {
    width: 100%;
    position: absolute;
}
.preorder_tokuten img.line_top { top: -.5em; }
.preorder_tokuten img.line_bottom { bottom: -.6em; }
.preorder_tokuten a.btn {
    font-size: 100%;
}
/*-----------
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;
  }
.swiper-button-prev,
.swiper-button-next {
    width: 60px !important; 
    height: 60px !important;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px; 
    opacity: 1 !important;
    transition: 0.3s;
    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.3));
}
.swiper-button-prev::after,
.swiper-button-next::after {
    display: none !important;
    content: "" !important;
}
.swiper-button-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 6 L6 12 L16 18 Z' fill='%23EE7CB0' stroke='%23EE7CB0' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.swiper-button-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6 L18 12 L8 18 Z' fill='%23EE7CB0' stroke='%23EE7CB0' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.swiper-button-prev:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 6 L6 12 L16 18 Z' fill='%232C91DF' stroke='%232C91DF' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.swiper-button-next:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6 L18 12 L8 18 Z' fill='%232C91DF' stroke='%232C91DF' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 768px) {
    .swiper-button-prev,
    .swiper-button-next {
        width: 40px !important;
        height: 40px !important;
        background-size: 40px; /* 矢印サイズ */
    }
}
#bottom_section {
    position: relative;
    background: url(../images/bottom_bg.jpg) 0 0 no-repeat;
    background-size: cover;
    padding: 5em 0 0 0;
}
#bottom_section .dotline {
  bottom: inherit;
  top: -8px;
}
/*-----------
online
-----------*/
#online {width: 90%; max-width: 1000px; border-radius: 15px; background: #FFF; padding: 50px; margin: 0 auto 4em auto; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);}
#online hr{border: 2px dashed #EE7CB0; margin: 25px 0; width: 100%; border-width: 2px 0 0 0 ;}
#online h3{font-size: 1.6em; font-weight: bold; background: #EE7CB0; display: inline-block; color: #FFF; padding: 0 .5em;}
#online p{margin-top: 1em; font-weight: bold; line-height: 1.5em;}

/*-----------
Specifications
-----------*/
.specifications{
    width: 90%;
    max-width: 1000px;
    background-size: cover;
    margin: 5em auto;
    position: relative;
}
.specifications h2 {
    width: 40%;
}
.specifications h2 img {
    width: 100%;
    height: auto;
}
.specifications_inner {
    background: #FFF;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
}
.specifications dl,
.specifications dt,
.specifications dd{box-sizing: border-box;}

.specifications dl{margin-top: 0; position: relative;font-weight: 500;}
.specifications dl::after{content: ""; display: block; width: 2px; height: 100%; position: absolute; left: 200px; top: 0; background-image: repeating-linear-gradient(0deg, #ee7cb0, #ee7cb0 5px, #ffffff 5px, #ffffff 10px);}
.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; background: #EE7CB0; display: inline-block; color: #FFF;}
.specifications dd:after {content: ''; display: block; clear: both;}
#EN .specifications dt span {
    font-size: 92%;
}
/*-----------
footer
-----------*/
footer{
    border-width: 1px 0 0 0;
    position: relative;
    padding-top: 3em;
    padding-bottom: 80px;
}
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 .2em; }
.logo_wrap a img { max-width: 100%;}
.copyright_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 1em 0;
}
.copyright{text-align: left; font-size: .8em; text-align: center;  margin: 0 .5em;}
.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{max-width: 100%; width: 80%;}

    header .logo ul li:first-child img,
    .logo_wrap a:first-child img { width: auto; height: 9vw; }

    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{
        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; }
    #lead { 
        width: 100%;
        padding: 0;
        margin: 0;
        background: url(../images/concept_bg_sp.jpg) 0 0 no-repeat;
        background-size: cover;
    }
    #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 {
        padding-top: 5em;
        width: 100%;
        height: auto;
        min-height: 350px;
        position: relative;
        overflow: hidden;
        background-size: 30% auto;
        background-position: 100% 100%;
    }
    .textbox_inner {
        width: 92%;
    }
    h1 {
        width: 90%;
        max-width: 500px;
    }
    #stickybar {
        height: auto;
        padding: 1em 0;
    }
    #stickybar a {
        width: 86%;
        font-size: 110%;
        max-width: inherit;
        height: auto;
        margin: 0 auto;
        padding: .5em 0;
    }
    #stickybar a span {
        line-height: 40px;
    }
    #mv a.btn { 
        width: 92%;
        font-size: 110%;
    }
    .snows div:nth-child(1){
    box-shadow:
        5vw -40px 0 #fff,
        10vw 150px #fff,
        81vw -240px #fff,
        95vw 60px #fff;
    }
    .snows div:nth-child(2){
    box-shadow:
        7vw 220px 0 #fff,
        68vw 100px #fff;
    }
    .snows div:nth-child(3){
    box-shadow:
        12vw 5px 0 #fff,
        94vw 230px #fff;
    }
    .snows div:nth-child(4){
    box-shadow:
        20vw -200px #fff,
        80vw 220px #fff;
    }
    /*-----------
    #point
    -----------*/
    #point {
        position: relative;
        max-height: inherit;
        height: auto;
    }
    .points-list {
        width: 100%;
        padding: 2.5em 2%;
    }
    #point dd img {
        width: 18vw !important;
    }
    .dotline {
        bottom: -1vw;
        background: url(../images/line.png) 0 100% repeat-x;
        background-size: auto 2vw;
        height: 2vw;
    }
    #EN #point dd p {
        display: inline;
    }
    /*-----------
    product
    -----------*/
    #product {
        position: relative;
        height: auto;
        min-height: auto;
        padding: 5em 0;
        margin: -1vw 0 0 0;
        }

    .specifications{width: 92%;}
    .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%; }

    /*-----------
    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%;}
    #middle_section {
        background: url(../images/concept_bg_sp.jpg) 0 0 no-repeat;
        background-size: cover;
    }
    #bottom_section {
        position: relative;
        background: url(../images/bottom_bg.jpg) 50% 0 no-repeat;
        background-size: cover;
        padding: 5em 0 0 0;
    }

    /*-----------
    footer
    -----------*/
    footer{padding-top: 2em;}
    footer .inner.flex{flex-direction: column-reverse; align-items: center;}
    /*-----------
    Online
    -----------*/
    #online {
        width: 92%;
        padding: 2em;
        margin: 3em auto 5em auto;
    }
    #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; }

}