/*-----------
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;}
html{scroll-behavior: smooth;}
/*-----------
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,
button.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);
    transition: all 0.2s linear;
}
a.btn,
button.btn{ padding: 0;  max-width: 400px; margin-top: 2em; border-radius: 100px; width: 100%; padding: .8em; font-weight: 700; cursor: pointer; }
a.btn:hover{background: #796BAF; color: #FFF; border-color: #796BAF;}
a.btn span,
button.btn span{border:5px solid #FFF; display: block; border-radius: 100px; padding: 1em; background-color: #796BAF;  font-weight: 700;}
a.btn::after,
button.btn::after {content: "";position: absolute;top: calc(50% - .5em);right: 1.5em;width: 1em;height: 1em;transition: all 0.2s linear;background: url(../images/btn_arrow.svg) 50% 50% no-repeat; background-size: .5em auto;}

button.btn:disabled{cursor: default; border:3px solid #494949; background: #494949 !important; padding: 0; color: #000; max-width: 400px; margin-top: 2em; border-radius: 100px; }
button.btn:disabled span {cursor: default; border:5px solid #000; display: block; border-radius: 100px; padding: 1em; background-color: #494949; font-weight: 700;pointer-events: none;}
button[disabled] {pointer-events: none;background: #494949;}
button[disabled]::after {background-image: none !important;}
button[disabled] span {color: #000;}

a.btn:hover::after{ background: url(../images/btn_arrow.svg)50% 50% no-repeat;background-size: .5em auto;}
a.btn:hover::after,
button.btn:hover::after {transform: translateX(5px);}

/*a.caution.btn{position: relative; margin-top: 3em;}
a.caution.btn img{position: absolute; width: 12%; top: -20% ;left: 10%;transition: all 0.2s linear;}
a.caution.btn:hover img{transition: all 0.2s linear;}*/

/*---------
　Font
　使用したいフォントのクラスをbodyに付与
---------*/
/*Noto Sans Japanese*/
.m-plus-rounded-1c{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;/*適切に変更*/
    font-style: normal;
}

/*-----------
scroll
-----------*/
.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;
  }
}
/*-----------
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 {max-width: 120px;}
header .logo_yukimiku {max-width: 200px;}
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{gap: 40px;}
#point .box{margin:0 0 0 20px; line-height: 1;}
#point .box a{margin-top: 20px; display: block; position: relative;}
#point .box a::after{content: ""; position: absolute;right: .5em; bottom: .5em; width: 2em; height: 2em; background: url(../images/commone/icon_zoom.png) no-repeat; background-size: 100% auto;}


#point .column-1{width: 100%;}
#point .column-2{width: calc((100% - 40px) / 2);}
#point .column-3{width: calc((100% - 80px) / 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; color: #FFF;}
.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:first-of-type{margin: 0;width: auto;}
footer .social li img{height: auto; width: 100%;}
footer .social li.text {
    margin: 0 0 1em 0;
    color: #FFF;
    font-weight: bold;
    display: block;
    width: 100% !important;
    text-align: center;
    line-height: normal;
}

@media screen and (max-width: 960px){
}

@media screen and (max-width: 768px){
    a.btn{font-size: 1em; padding: 1em 2em 1em 1em;}

    /*-----------
    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: #fff; 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: #fff; 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: 10px;}
    /* #point .box a:nth-child(n+2){margin-top: 10px;}  */
    #point .box:first-of-type{margin-top: 0;}
    /* #point .column-2,
    #point .column-3{width: 100%;} */
}