/*-----------
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(--sub-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;}

/*list*/
ul.caution{font-size: 0.8em; margin-left: 2em;}
.caution li{margin-left: -1em;}
.caution li::before{content: "※"; margin-left: -1em;}
.caution.en li::before{content: "*"; margin-left: -1em;}

ul.disc{margin-left: 2em;}
.disc li{margin-left: -1em;}
.disc li::before{content: "・"; margin-left: -1em;}

ul.nmb{margin-left: 2em;}
.nmb li{margin-left: -1em; list-style: decimal;}
/* .disc li::before{content: "・"; margin-left: -1em;} */



/*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: 80%;
    margin: 0 auto;
    text-decoration: none;
    border-radius: var(--border-radiue);
}

a.btn::after{content: "";position: absolute; top: calc(50% - .25em); right: 1.5em;width: 0;height: 0;border: 1px solid #fff; border-width: 1px 1px 0 0; width: .5em; height: .5em;transform: rotate(45deg) }

a.btn:hover,
a.btn:active{color: var(--btn-color-hover); background:var(--btn-hover); transition: all 0.2s linear;}
a.btn:hover::after,
a.btn:active::after{border-color: var(--btn);}

/*---------
　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: 15px 20px;position: relative;z-index: 50; width: 100%; position: fixed; z-index: 200; background: #fff;padding-left: 2em;padding-right: 2em;}
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 .logo .logo_mxf{max-width: 130px; margin-left: 1em;}
header .logo a{line-height: 1; display: block;}
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:hspanover{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;}


/*-----------
footer
-----------*/
footer{padding: 3% 0 100px; border: 1px solid #666; border-width: 1px 0 0 0;background: var(--sub-color); color: #fff;}
footer .inner.flex{width: 95%; max-width: 1900px; margin: 0 auto; flex-wrap: wrap;justify-content: space-between; /* align-items: center; */}
footer a.btn{background: #fff; color: var(--sub-color); margin-top: 1em;border: 1px solid #fff;}
footer a.btn:hover{background: var(--btn); color: #fff;}
footer  a.btn::after{border-color: var(--btn);}
footer  a.btn:hover::after{border-color: #fff;}
footer .right{width: 500px;}
footer .right h5.ttl_social{font-size: 1.3em; line-height: 1; font-weight: 500; background: url(../images/commone/icon_sns.png) no-repeat; background-size: auto 1em; padding-left: 1.5em;line-height: 1;}
footer .right h5.ttl_social span{font-size: .7em; margin-left: -2em;}
footer .right .social li {width: 50%; line-height: 1; margin-top: 1em;}
footer .right .share{align-items: center; margin-top: 1.5em;}
footer .right .share h5{font-size: 1.2em; font-weight: 500;}
footer .right .share li{margin-left: .5em; width: 30px;}
footer .right .share li a{ line-height: 0; display: block;}
footer .right .logo_wrap{margin: 0 0 1em;}
footer .right .logo_wrap li{width: 30%; margin-right: 1em;}
footer .right .logo_wrap li:last-of-type{width: 35%;}
footer .right  hr{margin: 2em 0; border:1px #ffffff69 solid; border-width: 1px 0 0 0;}

footer .left{width: 400px;}
footer .left .btn{max-width: 100%; width: 500px;}
.logo_wrap a {margin-right: 1em; line-height: 1;}
.copyright{width: 100%; text-align: left; font-size: .9em; margin-top: .5em;}
.copyright span{vertical-align: middle; margin-left: .25em;}
.copyright span img{width: 3.5em;}
.copyright:last-of-type{margin-top: .5em;}

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

    /*-----------
    footer
    -----------*/
    footer{padding: 5em 0;}
    footer .inner.flex{align-items: flex-start;}

    footer .left{width: 40%;}
    footer .right{width: calc(60% - 2em); margin-left: 2em;}
} 

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

    /*-----------
    Header
    -----------*/
    /* header{} */
    header{top: 20px;}
    header .logo .flex{align-items: center;}
    header .logo .logo_gsc{max-width: 140px; width: 40%;}
    header .logo .logo_mxf{max-width: 150px; width: 40%;}

    header .right_wrap.flex{position: absolute; z-index: 10; width: 110%; left: -5%; top: calc(-2.5% + -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;opacity: 0;}
    header .right_wrap.flex.active{/* height: 0; */ transition: all 0.2s linear; opacity: 1;top: -21px;}

    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;}

    /*-----------
    footer
    -----------*/
    footer{padding-top: 2em;}
    footer .inner.flex{flex-direction: column; align-items: center;max-width: 1500px; width: 100%; margin: 0 auto;}
    footer .left{width: 60%;}
    footer .right{width: 95%; margin:3em auto;}

    footer .right .social li {width: auto; margin-right: 1em;}
    footer .right .social li:first-of-type{width: auto;}
    footer .right hr {margin-bottom: 5em;}
    footer .right .logo_wrap {/* margin-top: 5em;  */margin-bottom: 1em; margin: 0 auto; width: 100%; justify-content: center;}
    footer .right .logo_wrap li{width: 30%; max-width: 140px;}
    .copyright{text-align: center; }
    .copyright:last-of-type{margin-top: 2em;}
}

@media screen and (max-width: 600px){
    /*-----------
    Header
    -----------*/
    header .logo .logo_gsc{max-width: 120px; width: 30%;}
    header .logo .logo_mxf{max-width: 140px; width: 30%;}
}