@font-face {
  font-family: 'ins';
  font-style: normal;
  font-weight: 100;
  src: url('../font/InriaSerif-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'ins';
  font-style: normal;
  font-weight: 300;
  src: url('../font/InriaSerif-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'ins';
  font-style: normal;
  font-weight: 600;
  src: url('../font/InriaSerif-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'in';
  font-style: normal;
  font-weight: 300;
  src: url('../font/InriaSans-Regular.ttf') format('truetype');
}


:root{
    --main-green-color: #110d42;
}

html{
    background-color: #141414;
}


html[theme="black"]:root{
    --main-green-color: #b8c522;
}


input, textarea{
    transition: all 1s 0s;
    opacity: .4;
}


body{
    font-family: 'in';
    font-weight: 300;
}


header{
    position: sticky;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 9999;
    padding: 20px 1vw;
    transition: padding-top .5s 0s, padding-bottom .5s 0s, background .5s 0s;
}

header.view{
    padding: 10px 1vw;
    background-color: var(--main-w06-color);
}


header #logo{}
header #logo h1{
    width: 200px;
    height: 40px;
    background-image: url(../img/logo.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 200px;
    filter: var(--main-invert-value);
    font-size: 0;
}


header #menu{}
header #menu .o1200 ul li{
}
header #menu .o1200 ul li a{
    line-height: 40px;
    padding: 0px 10px;
    font-size: 14px;
    position: relative;
    color:var(--main-b06-color);
    transition: color .4s 0s;
    letter-spacing: 1px;
    position: relative;
    z-index: 9;
    min-width: 80px;
}

header #menu .o1200 ul li:hover a{
    color:var(--main-black-color);
}


header #menu .o1200 ul li a:before{
    content: "";
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 70%;
    height: 1px;
    background-color:var(--main-b06-color);
    opacity: 0;
    transform: translateX(-50%);
}


header #menu .o1200 ul li:hover a:before{
    opacity: 1;
}


header #menu .o1200 ul li a:after{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 1000px;
    background-color: var(--main-black-color);
    content: "";
    opacity: 0;
    z-index: -1;
}

header #menu .o1200 ul li select{
    font-size: 14px;
    opacity: .4;
}
header #menu .o1200 ul li:hover select{
    opacity: 1;
}
header #menu .o1200 ul li select option{}




header #menu .x1200{}
header #menu .x1200 .button{
    width: 40px;
    height: 40px;
    border: 1px solid var(--main-b04-color);
    position: relative;
    cursor: pointer;
    z-index: 999999;
}

header #menu .x1200 .button:hover{
    border: 1px solid var(--main-black-color);
}


header #menu .x1200 .button span{
    width: 20px;
    height: 2px;
    background-color: var(--main-black-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all .5s 0s;
}


header #menu .x1200 .button span:nth-child(1){
    transform: translate(-50%,-50%) translateY(-6px);
}
header #menu .x1200 .button span:nth-child(3){
    transform: translate(-50%,-50%) translateY(6px);
}

header #menu.view .x1200 .button span:nth-child(1){
    transform: translate(-50%,-50%) rotate(45deg);
}
header #menu.view .x1200 .button span:nth-child(3){
    transform: translate(-50%,-50%) rotate(-45deg);
}
header #menu.view .x1200 .button span:nth-child(2){
    opacity: 0;
}






header #menu .x1200 .menuBox{
    position: fixed;
    top: 0px;
    right: 0px;
    width: 260px;
    height: 100%;
    background-color: var(--main-white-color);
    transform: translateX(100%);
    transition: all 1s 0s;
    z-index: 9999;
    padding-top: 60px;
}

header #menu.view .x1200 .menuBox{
    transform: translateX(0%);
}

header #menu .menuBox .logo{
    padding: 30px;
}

header #menu .menuBox .logo img{
    filter: var(--main-invert-value);
}

header #menu .menuBox .menu{}
header #menu .menuBox .menu li{
    line-height: 40px;
    width: 100%;
    padding: 0px 40px;
    text-align: left;
}

header #menu .menuBox .menu li a{
    position: relative;
    color:var(--main-b10-color);
    transition: color 1s 0s;
}
header #menu .menuBox .menu li:hover a{
    color:var(--main-black-color);
}



header #menu .menuBox .bottom{
    text-align: left;
    padding: 10px;
    border-top: 1px solid #fff1;
    margin: 20px;
    margin-top: 40px;
}

header #menu .menuBox .bottom li a{
    opacity: .5;
    transition: opacity .5s 0s;
}
header #menu .menuBox .bottom li:hover a{
    opacity: 1;
}

header #menu .menuBox .bottom .lng{}
header #menu .menuBox .bottom .lng li{}
header #menu .menuBox .bottom .lng li a{
    line-height: 30px;
    padding: 0px 4px;
    font-size: 12px;
}

header #menu .menuBox .bottom .sns{}
header #menu .menuBox .bottom .sns li{
    line-height: 1;
}
header #menu .menuBox .bottom .sns li a{
    padding: 0px 4px;
}
header #menu .menuBox .bottom .sns li a img{
    width: 16px;
    filter: var(--main-invert-value);
}




header #menu .x1200 .menuBg{
    position: fixed;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--main-bg-color);
    z-index: 9998;
    transform: translateX(100%);
    opacity: 0;
    transition: opacity 1s 0s, transform 0s 1s;
   
}

header #menu.view .x1200 .menuBg{
    transform: translateX(0%);
    opacity: 1;
    transition: opacity 1s 0s, transform 0s 0s;
}


header .button.theme{
    border-radius: 20px;
    height: 14px;
    position: relative;
    background-color: var(--main-black-color);
    width: 26px;
    margin: 0px 6px;
    opacity: .5;
    transition: all .5s 0s;
    margin-bottom: 4px;
}

header .button.theme:hover{
    opacity: 1;
    
}


header .button.theme:after{
    content: "";
    width: 60%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateX(-30%);
    background-color: var(--main-white-color);
    position: absolute;
    height: 100%;
    border-radius: 40px;
    transition: all .5s 0s;
}


html[theme="white"] header .button.theme:after{
    transform: translate(-50%, -50%) translateX(30%);
}













footer{
    padding: 40px 1vw 100px;
}

footer .link{
    text-align: left;
}
footer .link li{
    position: relative;
}
footer .link li:after{
    content: "";
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background-color: var(--main-line-color);
}
footer .link li:last-child:after{
    content: none;
}

footer .link li a{
    line-height: 40px;
    padding: 0px 10px;
    font-size: 14px;
    color: var(--main-b06-color);
    transition: color .5s 0s;
}
footer .link li:hover a{
    color: var(--main-b10-color);
}


footer .footer{
    grid-template-columns: 200px 1fr 200px;
    grid-gap: 2vw;
    margin-top: 20px;
}

footer .footer > li{}
footer .footer > li .logo{}
footer .footer > li .context{
    text-align: left;
    line-height: 2;
}
footer .footer > li .context .split{
    vertical-align: bottom;
    padding: 0px 10px;
}




footer .footer > li #sns{
}
footer .footer > li #sns li{
}
footer .footer > li #sns li a{
    padding: 0px 4px;
    opacity: .5;
    transition: opacity .5s 0s;
}
footer .footer > li #sns li a img{
    width: 20px;
}
footer .footer > li #sns li a:hover{
    opacity: 1;
}


*[button]{
    font-weight: 400;
}



@media all and (max-width:1200px){
    header.view{
        padding: 10px 1vw;
    }
}
@media all and (max-width:1000px){
    
    footer .footer{
        grid-template-columns: 1fr;
        grid-gap: 40px;
    }
    
    footer .link,
    footer .footer li .context{
        text-align: center;
    }
    
    footer .footer > li:nth-child(2){
        order: -1;
    }
    
}
@media all and (max-width:800px){
    
}
@media all and (max-width:600px){
    
}