/*-----------
reset
-----------*/
html{scroll-behavior: smooth;}
.cnt * {margin: 0;padding: 0; box-sizing: border-box;}

.cnt .cf { zoom: 1; }
.cnt .cf:before,.cf:after { content: ""; display: table;}
.cnt .cf:after { clear: both;}

.cnt li{list-style: none;}
/*-----------
body
-----------*/
body{margin: 0;padding: 0; box-sizing: border-box;}
body .cnt{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 .cnt{background: #000;}
.cnt img{height: auto;}

@media screen and (max-width: 800px){
	body .cnt{width: 100%;}
	.cnt img{width: 100%;}
}

/*-----------
commone
-----------*/
.cnt a{color: var(--color-a);text-decoration: none;}
.cnt a:hover{text-decoration: underline;}
.cnt :hover img{filter:alpha(opacity=1); -moz-opacity: 1; opacity: 1;}
.cnt a.nolink{pointer-events: none;cursor: default;}

/*flex box*/
.cnt .flex{display: flex; align-items: flex-start; flex-wrap: wrap;}
.cnt .flex img{align-items: flex-start;}
.cnt .mleft{margin-left: auto;}
.cnt .mright{margin-right: auto;}
.cnt .mtop{margin-top: auto;}
.cnt .mbottom{margin-bottom: auto;}
.cnt .spacer {width: 100%; display: block;}

/*SP-on*/
.cnt .pc{display: block;}
.cnt .sp{display: none;}

@media screen and (max-width: 768px){
    .cnt .pc{display: none;}
    .cnt .sp{display: block;}
}


/*-----------
ボタン
-----------*/
.cnt 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: .5em 1em;width: 100%;  margin: 0 auto;text-decoration: none;border-radius: var(--border-radiue);font-size: .9em;}
.cnt a.btn:hover{background: var(--btn-arrow-color-hover);color: var(--btn-color-hover); transition: all 0.2s linear;}
.cnt a.btn::after{content: "";position: absolute; top: calc(50% - .3em); right: 1em;width: .6em;height: .6em; border: 1px solid var(--btn-arrow-color);border-width: 1px 1px 0 0; transform: rotate(45deg);}
.cnt a.btn:hover::after{border-color: var(--btn-arrow-color-hover);}

/*-----------
cnt
-----------*/
.cnt {max-width: 2650px; width: 100%; margin: auto 0;}
 
/*-----------
MV
-----------*/
.cnt #mv{max-width: 1200px; width: 95%; margin: 0 auto;} 

/*-----------
#menu 
-----------*/
.cnt #menu ul{max-width: 1200px; width: 95%; gap: 20px; justify-content: center;margin: 1em auto 0;}
.cnt #menu ul li{width:250px; }
.cnt #menu ul li a{display: block; text-decoration: none; color: var(--menu-font-color);text-align: center;font-size: .8em;padding: 1em .5em;background: var(--menu--bg-color);border-radius: 100px;border: 1px solid var(--menu--bg-color);}
.cnt #menu li a:hover{color: var(--menu-font-color-hove); background: var(--menu--bg-color-hover);}

/*-----------
cnt_inner
-----------*/
.cnt_inner{max-width: 1200px; width: 95%; margin: 3em auto 0;}
.cnt_inner.first{margin-top: 1em;}

.cnt_inner.explanation .inner{border: 1px solid var(--explanation-border-color); padding: 50px;border-radius: var(--explanation-border-radius);background: #fff;}
.cnt_inner.explanation .inner h4{border: 1px solid var(--color); border-width:0 0 0 .7em; padding: 0 0 0 .5em; line-height: 1.2em; margin-top: 1em;}
.cnt_inner.explanation .inner h4:first-of-type{margin-top: 0;}
.cnt_inner.explanation .inner h4 + p{margin-top: .5em;}
.cnt_inner .caution{font-size: .9em; margin-top: 1em;}
.cnt_inner .caution li{position: relative; padding-left: 1em; text-indent: -1em;}
.cnt_inner .caution li::before{content: "※";}


/*-----------
preorder&sales
-----------*/
.cnt_inner h2{font-size: 1.1em;}
.cnt_inner .inner.flex {gap: 15px; align-items: stretch;}
.cnt_inner.flex .box{width: calc((100% - 60px) / 5);padding: 20px;
flex-direction: column;border-radius: var(--product-border-radius);border: 1px solid var(--product-border-color);padding: 15px;background: #fff;}
.cnt_inner.flex .box h5{font-size: .75em;margin-top: .5em;}
.cnt_inner.flex .box h4{font-size: .9em; line-height: 1.4;margin-bottom: .5em;font-weight: 600;}

.cnt .cnt_inner.flex a.btn{margin-top: auto;}

/*-----------
fixd_btn
-----------*/
.cnt .fixd_btn{background: var(--fixd_bg); padding: 0 25px; height: 100px;display: none; align-items: center;}
.cnt .fixd_btn a.btn{width: 300px; height: 50px; margin: 0 auto; display: block; padding: .5em 1em;}
.cnt .fixd_btn.is-fixed {display: flex;position: fixed;bottom: 0;left: 0;width: 100%;}
.cnt .fixd_btn.is-static {display: flex;position: static;}

/*-----------
copyright
-----------*/
.cnt .kenri{width: 95%; max-width: 1200px; margin: 2em auto;}
.cnt .kenri p{text-align: center;}

@media screen and (max-width: 900px){
    /*-----------
    preorder&sales
    -----------*/
    .cnt_inner.flex .box{width: calc((100% - 45px) / 4);
    }
}


@media screen and (max-width: 768px){
   /*-----------
    #menu 
    -----------*/
    .cnt #menu ul li{width:calc((100% - 40px) / 3); }

    /*-----------
    cnt_inner
    -----------*/
    .cnt_inner.explanation .inner{padding: 30px 25px;}


    /*-----------
    preorder&sales
    -----------*/
    .cnt_inner.flex .box{width: calc((100% - 30px) / 3);
    }

    /*-----------
    fixd_btn
    -----------*/
    .cnt .fixd_btn{height: 80px;}
}

@media screen and (max-width: 600px){
    /*-----------
    #menu 
    -----------*/
    .cnt #menu ul li{width:calc((100% - 20px) / 2); }
    /*-----------
    preorder&sales
    -----------*/
    .cnt .cnt_inner.flex .box{width: calc((100% - 15px) / 2);}
}