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

body.black{background: #000;}
img{height: auto;}

@media screen and (max-width: 800px){
	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;}
}
/*-----------
ボタン
-----------*/
a.btn{
    position: relative;
    display: block;
    background: url(../images/btn_arw.png) 95% 50% no-repeat #6C474B;
    background-size: .5em auto;
    border: 4px solid #E6B57E;
    color: var(--btn-color);
    text-align: center;
    padding: 1em 2em;
    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);
}

a.btn:hover{
    color: #6C474B;
    background: url(../images/btn_arw.png) 95% 50% no-repeat #E6B57E;
    background-size: .5em auto;
    cursor: pointer;
    transition: all 0.2s linear;
}
/*---------
　Font
---------*/
/*Noto Sans Japanese*/
.font_notosans-jp{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
/*Zen Maru Gothic*/
.zen-maru-gothic {
    font-family: "Zen Maru Gothic", sans-serif;
    font-style: normal;
    font-weight: 500;
  }
/*Zilla Slab*/
.zilla-slab {
    font-family: "Zilla Slab", 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: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: 40px; }

/*-----------
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 {
    width: 800px;
    height: auto;
    margin: 6em 0 0 0;
}  
h1 { margin: 0 auto 1.5em auto; }
h1 span.title {
    position: relative;
    display: inline-block;
    font-size: 3em;
    font-weight: 800;
    line-height: 1.5em;
    letter-spacing: 1.5px;
    -webkit-text-stroke: 12px #FFF;
    text-stroke: 12px #FFF;
    text-rendering: optimizeLegibility;
}
h1 span.title::after {
    content: "初音ミク";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #296CE8;
    background: linear-gradient(180deg,rgba(41, 108, 232, 1) 0%, rgba(53, 231, 223, 1) 100%);
    -webkit-background-clip: text;
    color: transparent;
    z-index: 2;
    -webkit-text-stroke: #35E7DF;
    text-stroke: #35E7DF;
}
h1 span.small::after {
    content: "100番目の冒険Ver.";
    background: #296CE8;
    background: linear-gradient(180deg,rgba(41, 108, 232, 1) 0%, rgba(53, 231, 223, 1) 100%);
    -webkit-background-clip: text;
    color: transparent;
}
#EN h1 span.title::after {
    content: "Hatsune Miku";
}
#EN h1 span.small::after {
    content: "100th Adventure Ver.";
}
#ZH h1 span.title::after {
    content: "初音未來";
}
#ZH h1 span.small::after {
    content: "第100次的冒險Ver.";
}
h1 span.scale {
    font-size: .9em;
    letter-spacing: 0.3em;
    font-weight: bold;
    color: #FFF;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
h1 span.small { font-size: 2em; }
#mv_textbox .btn { margin: 0; }
#stickybar {
    position: fixed;
    bottom: 0;
    background: rgba(62, 129, 154, 0.6);
    width: 100%;
    height: 100px;
    z-index: 9999;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: 0.3s ease-in;
}
#stickybar a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 300px;
    height: 70px;
    margin: 15px auto 0 auto;
    background: #6C474B;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    border-radius: 20px;
    border: 4px solid #E6B57E;
    box-sizing: border-box;
    transition: 0.3s ease-in-out;
}
#stickybar a:hover {
    background: #E6B57E;
    color: #6C474B;
}
#stickybar a span {
    font-weight: bold;
    letter-spacing: .1em;
    text-rendering: optimizeLegibility;
    line-height: 1.5em;
}
#stickybar a span.small { font-size: 80%; }
#stickybar.visible { opacity: 1; }
#EN #stickybar a span {
    letter-spacing: normal;
}
/*-----------
#lead 
-----------*/
#lead {
    width: 100%;
    margin: 5em auto;
}
#lead .inner {
    position: relative;
    /*height: 320vh;*/
    min-height: 768px;
    /*display: flex;*/
    margin: 0 auto;
    z-index: 2;
}
.concept_image {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: url(../images/concept_bg.jpg) 50% 50% no-repeat;
    background-size: 90%;
}
.bg-container .bg {
    position: fixed;
    top: 0;
    left: 0; 
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.3s linear;
    background: url(../images/concept_bg.jpg) 50% 50% no-repeat;
    background-size: auto 85%;
    padding: 2rem;
}
.concept_image img {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}
.concept_image img.visible {
  opacity: 1;
}
.concept_textbox {
    width: 45%;
    position: absolute;
    top: 0;
    right: 10vw;
    height: 100vh;
    padding: 2rem;
    padding-top: 15vh;
    overflow: auto;
}
.concept_textbox h2 {
    color: #FFF;
    -webkit-text-stroke: 4px #3E819A;
    text-stroke: 4px #3E819A;
    paint-order: stroke;
    text-rendering: optimizeLegibility;
    margin: 0 auto 1em auto;
}
.concept_textbox p {
    font-size: 110%;
    line-height: 2;
    font-weight: 400 !important;
}
.concept_textbox p {
    color: #FFF;
    -webkit-text-stroke: 4px #3E819A;
    text-stroke: 4px #3E819A;
    paint-order: stroke;
    text-rendering: optimizeLegibility;
}
.image-nav {
    background: url(../images/change.png) 50% 50% no-repeat #6C474B;
    background-size: 75px auto;
    width: 100px;
    height: 100px;
    z-index: 100;
    border-radius: 50%;
    border: 4px solid #E6B57E;
    overflow: hidden;
    transition: transform 0.5s ease, background-color 0.5s ease;
    will-change: transform;
    margin-top: 2em;
}
#changeBtn {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 16px;
    border: none;
    background: none;
    cursor: pointer;
    color: #FFF;
    transition: transform 0.5s ease;
    will-change: transform; 
}

.image-nav:hover {
    background-color: #E6B57E;
    transform: rotate(45deg);
}

.image-nav:hover #changeBtn {
    transform: rotate(-45deg);
}
.fade-btn.active {
  opacity: 1;
}
/*-----------
#point
-----------*/
#point {
    /*position: -webkit-sticky;*/
    /*position: sticky;*/
    /*top: 0;*/
    background: url(../images/point_bg.jpg) 0 0 no-repeat;
    background-size: cover;
    padding: 5em 0;
    /*height: 100vh;*/
    /*max-height: 900px;*/
    display: flex;
    /*align-items: center;*/
}
#point #point_title {
    display: flex;
    align-items: center;
    margin: 0 0 2em 0;
}
#point #point_title h2 {
    margin: 0 1em 0 0;
}
#point #point_title p {
    font-size: 110%;
}
#point .inner{max-width: 1200px; width: 92%; margin: 0 auto; overflow: auto;}
#point .special_text {
    font-size: 160%;
    font-weight: bold;
    margin: 0 0 4em 0;
}
#point .box_wrap{margin-left: -20px; }
#point .box{margin:0 0 0 20px; line-height: 1;}
#point .box a{display: block; }

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

#point .img_wrap{margin-left: -20px; justify-content: space-between;}
#point .img_wrap a{margin-left: 20px;}
#point dt{margin-top: 20px; overflow: hidden;}
#point dd{line-height: 2; margin-left: 20px; margin-top: 1em; font-size: 92%; font-weight: bold;}
#EN #point dd{line-height: 1.6;}
/*-----------
Product
-----------*/
#product{
    /*position: -webkit-sticky;*/
    /*position: sticky;*/
    /*top: 0;*/
    /*transition: transform 0.5s ease-out;*/
    width: 100%;
    /*min-height: 100vh;*/
    overflow: hidden;
    padding: 100px 0;
    background: #FFF;
    /*display: flex;
    align-items: center;*/
}
#product h2 { margin: 0 0 2em 0;}
#comparison{border: none; padding: 0; max-width: 1500px; width: 80%; margin: 20% auto 0;}

#middle_section {

}
#bottom_section {
    position: -webkit-sticky;
    position: sticky;
    transition: transform 0.5s ease-out;
    background: url(../images/bg.jpg) 0 0 no-repeat #FFF;
    background-size: cover;
    padding: 5em 0;
}
/*-----------
Preorder
-----------*/
.preorder {  padding: 3em 0; }
.preorder h4{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;}

.preorder .btn{margin-top: 1rem;}
.preorder_tokuten {
    max-width: 1000px;
    background: url(../images/yoyaku_bg.jpg) 0 0 no-repeat;
    background-size: cover;
    margin: .5em auto 5em auto;
    position: relative;
}
.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 {
    font-size: 130%;
    margin: 0 0 1.5em 0;
    padding: 0 0 1.5em 0;
    background: url(../images/yoyaku_line_short.png) 50% 100% no-repeat;
    background-size: 90% auto;
}
.preorder_tokuten .text_box p {
    font-size: 130%;
    font-weight: bold;
}
.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 a.btn{
    background: url(../images/btn_arw.png) 95% 50% no-repeat #3E819A;
    background-size: .5em auto;
    margin-top: 3em;
}
.preorder a.btn:hover{
    color: #6C474B;
    background: url(../images/btn_arw.png) 95% 50% no-repeat #E6B57E;
    background-size: .5em auto;
    cursor: pointer;
    transition: all 0.2s linear;
}
/*-----------
Slider
-----------*/
.swiper-horizontal {
    background: #FFF;
    overflow: hidden;
}
.swiper-slide { height: auto !important; }
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px; 
  }
.swiper-button-next,
.swiper-button-prev{
    color: var(--slider-btn)!important; 
    top: initial; 
    bottom: 0; 
} 
.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-pagination { position: static !important; }
  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    width: auto !important;
  }
  .swiper-pagination-bullets {
    display: flex;
    align-items: center;
  }  
  .swiper-button-prev,
  .swiper-button-next {
    position: static !important;
    margin-top: initial !important;
    width: 50px !important;
    height: 100% !important;
    justify-content: flex-start !important;
    background-color: #6C474B;
  }
.swiper-button-next:after,
.swiper-button-prev:after {
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    height: 100% !important;
    width: 94px;
    position: absolute;
}
.swiper-button-prev:after {
    background: url(../images/slider_arw_left.png) 0 50% no-repeat;
    top: 0;
    left: 0;
}
.swiper-button-next:after {
    background: url(../images/slider_arw_right.png) 0 50% no-repeat;
    top: 0;
    right: 0;
}
/*-----------
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: 1px solid rgba(55, 56, 59, 0.4); margin: 25px 0; width: 100%; border-width: 2px 0 0 0 ;}
#online h4{font-size: 1.6em; font-weight: 900;}
#online p{margin-top: 1em;}
/*-----------
Specifications
-----------*/
.specifications{
    max-width: 1000px;
    background: url(../images/yoyaku_bg.jpg) 0 0 no-repeat;
    background-size: cover;
    margin: 5em auto;
    position: relative;
}
.specifications img.line_top,
.specifications img.line_bottom {
    width: 100%;
    position: absolute;
}
.specifications img.line_top { top: -.5em; }
.specifications img.line_bottom { bottom: -.6em; }
.specifications h2 { margin: 0 0 2em 0; }
.specifications_inner { padding: 3em; border-radius: 10px; }
.specifications h4{position: relative; font-size: 1.2em; font-weight: 500; line-height: 1;}
.specifications h4::before{content: ""; display: inline-block; width: .5em;height: .5em; background: var(--color); margin-right: .5em; }
.specifications dl,
.specifications dt,
.specifications dd{box-sizing: border-box;}

.specifications dl{margin-top: 1em;}
.specifications dt,
.specifications dd{padding: 10px 30px 0 10px;line-height: 1.5;}
.specifications dd{padding-left: 2em;}
.specifications dt{width: 200px; float: left; padding-left: 0; text-align: right; font-weight: bold;}
.specifications dd {margin-left: 200px;padding-bottom: 10px; border-left: 1px solid #3D2625;}
.specifications dd:after {content: ''; display: block;clear: both;}
/*-----------
footer
-----------*/
footer{
    border-width: 1px 0 0 0;
    background: #6C474B;
    position: relative;
    padding-top: 3em;
    padding-bottom: 100px;
}
footer .inner.flex{width: 100%; margin: 0 auto; flex-wrap: wrap;justify-content: space-between;}

.share_area { text-align: center; }
.share_area p {
    margin: 0 0 1em 0;
    color: #FFF;
    font-size: 120%;
    font-weight: bold;
}
.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; color: #FFF; 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;}


@media screen and (max-width: 1200px){
    #mv{
        background: url(../images/mv_pc.jpg) 65% 0 no-repeat;
        background-size: cover;
    } 
    #concept_inner_w {  background-size: 38% auto; }
    #lead { width: 100%; }
    #lead .inner{ width: 100%; }
    #lead h3 {
        font-size: 130%;
        margin:.5em 0;
    }
    #lead p {
        line-height: 2;
    }
     .concept_textbox {
        right: 0;
     }
    #lead .inner #concept_textbox { padding: 0 0 70px 0; }
    .preorder_tokuten img { width: 300px; }
    #point #point_title h2 { margin: 0 0 2em 0; }
    #point #point_title { display: block; }
    #point #point_title p { text-align: center; }
    #point .column-3 { width: calc((100%) / 3); }
}

@media screen and (max-width: 1024px){
    #mv { background-position: 65% 0; }
    #lead { margin: 0 !important; }
    #point,
    #product,
    #bottom_section {
        position: relative;
        min-height: inherit;
    }
    #point {
        height: auto;
        max-height: inherit;
        padding: 100px 0;
    }
    #product {
        padding: 100px 0;
    }
    .concept_image {
        padding: 0;
    }
    .concept_image img { 
        width: 100%;
        height: auto;
     }

    h1 { font-size: 2em; }
    .preorder_tokuten,
    .specifications {  width: 92%; }    
}
@media screen and (max-width: 820px){
     .concept_textbox { 
            padding-top: 20vh;
     }
    #lead .inner {
        background: url(../images/concept_bg_sp.jpg) 50% 50% no-repeat;
        background-size: cover;
    }
    .concept_image {
        background: none;
    }
}

@media screen and (max-width: 820px){
    body{ background-size: 150% auto }
    a.btn,
    a.btn:hover { 
        background-size: .6em auto;
        margin: 2em auto 0 auto !important
    }

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

    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: 950px;
    }
    #mv_inner {
        width: 100%;
        padding: 0 4%;
        min-height: 950px;
    }
    #mv_textbox { margin: auto 0 5em 0; }
    /*.bg-container .bg {
        background: url(../images/concept_bg_sp.jpg) 0 50% no-repeat;
        background-size: cover;
    }*/
    #lead { width: 100%; padding: 0; margin: 0; }
    #lead .inner {
        width: 100%;
        height: auto;
        display: flex !important;
        flex-direction: column-reverse !important;
        justify-content: center;
        align-items: stretch;
    }
    .concept_image {
        width: 100%;
        height: 100%;
        position: relative;
        padding: 60vw 0;
    }
    .concept_image img {
        top: 0;
        width: 100%;
        height: auto;
    }
    .concept_image img.visible { opacity: 1; }
    .concept_textbox {
        padding-top: 5em;
        padding-bottom: 80px;
        width: 100%;
        height: auto;
        min-height: 350px;
        position: relative;
        overflow: hidden;
    }
    .image-nav {
        background: url(../images/change.png) 50% 50% no-repeat #6C474B;
        background-size: 60px auto;
        width: 80px;
        height: 80px;
        position: absolute;
        bottom: 0;
        right: 2rem;
        left: inherit;
    }
    h1 {
        line-height: 10vw;
        margin: 0 0 3.125vw 0;
        text-align: center;
    }
    #EN h1 {
        line-height: 5vw;
    }
    h1 span.title {
        -webkit-text-stroke: 9px #FFF;
        text-stroke: 9px #FFF;
    }
    #stickybar {
        height: auto;
        padding: 1em 0;
    }
    #stickybar a {
        width: 96%;
        font-size: 110%;
        max-width: inherit;
        height: auto;
        margin: 0 auto;
        padding: .5em 0;
    }
    /*-----------
    #point
    -----------*/
    #point {
        position: relative;
        padding: 5em 4%;
        background: url(../images/bg_sp.jpg) 50% 0 no-repeat;
        background-size: cover;
        max-height: inherit;
        height: auto;
    }
    #point .inner { width: 100%; }
    #point .column-3{width: calc((100% - 40px) / 2);}
    #point dd { font-size: 110%; }
    .swiper-button-prev,
    .swiper-button-next { width: 20px !important; }
    .swiper-button-next:after,
    .swiper-button-prev:after { width: 8vw; }
    .swiper-button-prev:after { background-size: 100% auto; }
    .swiper-button-next:after { background-size: 100% auto; }

    #bottom_section {
        background: url(../images/bg_sp.jpg) 50% 0 no-repeat;
        background-size: cover;
        padding: 5em 4%;
    }

    /*-----------
    product
    -----------*/
    #product {
        position: relative;
        height: auto;
        min-height: auto;
    }

    .specifications{width: 100%;}
    .specifications dl {width: 100%; margin: 0 auto;}
    .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;}


    /*-----------
    preorder_fixd
    -----------*/
    .preorder {padding: 0;}
    .preorder h4,
    #point .special_text {font-size: 130%; width: 92%; margin: 0 auto 4em auto;}
    .preorder h4,
    .preorder p.date {
        width: 100%;
        margin: 0 auto;
    }
    .preorder_tokuten .inner {
        flex-direction: column-reverse;
        padding: 2em 0;
    }
    .preorder_tokuten img {
        display: block;
        margin: 0 auto;
        width: 70%;
    }
    .preorder_tokuten .text_box {
        margin: 0 0 1em 0;
        width: 100%;
    }
    .preorder_tokuten {
        background: url(../images/yoyaku_bg_sp.jpg) 0 0 repeat-y;
        background-size: 100% auto;
    }
    .specifications{
        background: url(../images/yoyaku_bg_sp.jpg) 0 0 repeat-y;
        background-size: 100% auto;
        margin: 0 auto;
    }
    .preorder_tokuten .text_box h2 { background-size: 80% auto;}
    .preorder_tokuten img.line_top,
    .specifications img.line_top { top: -1vw; }
    .preorder_tokuten img.line_bottom,
    .specifications img.line_bottom { bottom: -1vw; }

    /*-----------
    footer
    -----------*/
    /* footer{padding: 1em 10px 100px; border: 1px solid #666; border-width: 1px 0 0 0;} */
    footer{padding-top: 2em;}
    footer .inner.flex{flex-direction: column-reverse; align-items: center;}
    /*-----------
    Online
    -----------*/
    #online {
        width: 100%;
        padding: 2em;
        margin: 3em auto 5em auto;
    }
    #online h4 { font-size: 1.2em; }

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

}
@media screen and (max-width: 768px){
    #point .box{margin-top: 30px;}
    #point .box:first-of-type{margin-top: 0;}
    #point .column-2,
    #point .column-3{width: 100%;}
}