/*-----------
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{position: relative; color: var(--color);font-size: var(--font-size); width: 100%; line-height: 1.8; overflow-x: hidden;font-family: "Hiragino Sans", "ヒラギノ角ゴシック", Sanfransisco, Arial, "SF Pro SC", Meiryo, "メイリオ", "微软雅黑", "Microsoft YaHei";font-optical-sizing: auto; font-weight: 400;background:var(--background);}

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: var(--btn);
    border: 1px solid #000;
    border-color: var(--btn);
    color: var(--btn-color);
    text-align: center;
    padding: .8em 2em .8em 1em;
    max-width: var(--btn-max-w);
    width: 90%;
    margin: 0 auto;
    text-decoration: none;
    border-radius: var(--border-radiue);
}

a.btn::after{content: "";position: absolute; top: calc(50% - .3em); right: 1.5em;width: .6em;height: .8em; background:var(--btn-color) ; clip-path: polygon(0 0, 100% 50%, 0 100%);}
a.btn:hover{color: var(--btn-color-hover); background:var(--btn-hover); transition: all 0.2s linear;}
a.btn:hover::after{background:  var(--btn-color-hover);}

/*---------
　Font
　使用したいフォントのクラスをbodyに付与
---------*/
/*Noto Sans Japanese*/
.font_notosans-jp{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;/*適切に変更*/
    font-style: normal;
}
/*Noto Serif Japanese*/
.font_notosans-serif-jp{
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    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: 10px;position: relative;z-index: 50; width: 100%;}
header.absolute{position: absolute; top:0; left: 0; width: 100%; }

header .inner{align-items: center;}
header li{line-height: 1;}
header .logo .logo_gsc{max-width: 120px;}
header .right_wrap{align-items: center;}
header .language li{padding: 0 .5em; /* border: 1px solid var(--color); border-width: 0 1px 0 0; */}
header .language li.active a{color: var(--lang-active);}
header .language li a:hover{color: var(--color-hover); text-decoration: none;}
/* header .language li:last-child{border-width: 0; margin-right: 1em;} */
header .social {align-items: center;}
header .social li{width: 30px;margin-left: .5em;}
header .social li.text{width: auto; margin-left: 0;}
header .menu_btn{display: none;}

/*-----------
MV
-----------*/
#mv{position: relative; } 

/*-----------
#lead 
-----------*/
#lead .inner{max-width: 1200px; width: 95%; margin: 0 auto;}

/*-----------
#point
-----------*/
#point .inner{max-width: 1200px; width: 95%; margin: 0 auto;}
#point .box_wrap{margin-left: -20px; }
#point .box{margin:0 0 0 20px; line-height: 1;}
#point .box a{margin-top: 20px; 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;}
#point .img_wrap a{margin-left: 20px;}

#point p{line-height: 1.8;}

/*-----------
Product
-----------*/
#produt{margin-top: 5em;}
#comparison{border: none; padding: 0; max-width: 1500px; width: 80%; margin: 20% auto 0;}

/*予約*/
.preorder {width: 95%; max-width: 1200px; margin: 3em auto 0;}
.preorder h4{text-align: center;font-size:120%;}
.preorder p{text-align: center; font-size: 180%;}

.preorder .btn{margin-top: 1rem;}


/*スライダー　ナビボタン・ページネーションの色を変更*/
.swiper-button-next,
.swiper-button-prev{color: var(--slider-btn)!important;}
.swiper-pagination-bullet-active{background: var(--slider-page)!important;}

/*仕様*/
.specifications{max-width: 800px; width: 80%; margin: 3em auto; font-size: .8em;}
.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; clip-path: polygon(0 0, 100% 50%, 0 100%);}
.specifications dl,
.specifications dt,
.specifications dd{box-sizing: border-box;}

.specifications dl{margin-top: 1em;}
.specifications dt,
.specifications dd{padding: 10px 10px 0 10px;line-height: 1.5;}
.specifications dd{border-left: 1px solid var(--spec-border); padding-left: 2em;}
.specifications dt{width: 200px;float: left; padding-left: 0;}
.specifications dd {margin-left: 200px;padding-bottom: 10px;}
.specifications dd:after {content: ''; display: block;clear: both;}


/*-----------
footer
-----------*/
footer{padding: 1em 10px 100px; border: 1px solid #666; border-width: 1px 0 0 0;}
footer .inner.flex{width: 100%; margin: 0 auto; flex-wrap: wrap;justify-content: space-between;}

.logo_wrap a {margin-right: 1em; line-height: 1;}
.copyright{width: 100%; text-align: left; font-size: .8em; margin-top: .5em;}
.copyright span{vertical-align: middle;}
.copyright span img{width: 3.5em;}
.copyright:last-of-type{margin-top: .5em;}

footer .social{justify-content: center; align-items: center;}
footer .social li{width: 30px; line-height: 0; margin-left: .5em;}
footer .social li:first-of-type{margin: 0;width: auto;}
footer .social li img{height: auto; width: 100%;}


@media screen and (max-width: 960px){
}

@media screen and (max-width: 768px){
    a.btn{font-size: 0.8em;}

    /*-----------
    Header
    -----------*/
    header .logo .logo_gsc{max-width: 100%; width: 80%;}

    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 .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;}


    /*-----------
    #point
    -----------*/
    #point .column-3{width: calc((100% - 40px) / 2);}

    /*-----------
    product
    -----------*/
    .specifications{width: 85%;}
    .specifications dl {width: 100%; margin: 0 auto;}
    .specifications dt{float: none;width: 100%; border-bottom: 1px solid var(--color); padding: 0 0 .5em; margin-top: 2em;}
    .specifications dt:first-of-type{margin-top: 1em;}
    .specifications dd{width: 100%; margin-left: 0; padding: 1em 0 0; border: none;}

    /*-----------
    preorder_fixd
    -----------*/
    #preorder{width: 100%; background: #000; position: fixed;bottom: 0px;left: 0; padding: 1em; z-index: 100; height: 90px;transition: all 0.2s linear;}


    /*-----------
    footer
    -----------*/
    footer{padding-top: 2em;}
    footer .inner.flex{flex-direction: column-reverse; align-items: center;}

    .logo_wrap{margin-top: 3em; margin-bottom: 1em;}
    .copyright{text-align: center;}

    footer .social li:first-of-type{width: 100%; text-align: center; line-height: 1; margin-bottom: .5em;}
}

@media screen and (max-width: 600px){

    /*-----------
    #point
    -----------*/
    #point .box{margin-top: 30px;}
    #point .box:first-of-type{margin-top: 0;}
    #point .column-2,
    #point .column-3{width: 100%;}
}
