@charset "utf-8";

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
ul ,ol {
    list-style: none;
}
html {
    font-size: 12.5px
}

body {
    line-height:1;
    font-family: 'Source Sans Pro', sans-serif;
    letter-spacing:  0.15em;
    background: #f4f4ed;
}
body .ja {
    font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
    color: #000;
}
a:hover {
    /* text-decoration: underline */
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

* {
    box-sizing: border-box;
    cursor: auto;
    cursor: url(cursor.cur) 4 4,auto
}
a:hover {
    cursor: auto;
    cursor: url(cursor.cur) 4 4,auto
}
#cursor {
    position: fixed;
    top: calc(50% - 70px);
    left: calc(50% - 70px);
    width: 140px;
    height: 140px;
    pointer-events: none;
    z-index: 9999;
    transition: .5s transform;
    transform-origin: center center;
    overflow: visible;
    /* padding: 10px; */
    display: none;
}
#cursor svg {
    overflow: visible;
    width: 140px;
    height: 140px;
    transform: scale(1);
    transform-origin: center center;
    transition: transform .5s cubic-bezier(.79,.17,.15,.96);
    padding:  10px;
}
#cursor svg .line,
#cursor svg .stroke {
    transform-origin: center center;
    stroke-dasharray: 376.382,376.382;
    stroke-dashoffset: 0;
    animation: STROKE_END 1s ease both
}
#cursor svg .line {
    opacity: 0;
    stroke-dashoffset: 376.382;
}
@keyframes STROKE_END {
    0% {
        transform: rotate(-360deg) scale(1);
        stroke-dashoffset: 376.382
    }

    to {
        transform: rotate(0deg) scale(1);
        stroke-dashoffset: 0
    }
}
#shutter {
    display: flex;
    position: fixed;
    width: 100%;
    height: calc(100% - 150px);
    height: 100%;
    /*    display: none; */
    z-index: 20;
    bottom: 0;
}
#shutter > div {
    overflow: hidden;
    width: calc(105%/3);
    /* position:  absolute; */
    height: 100%;
    /* left: 0; */
}
#set #shutter > div > div {
    width: 101%;
    height: 100%;
    transition: .5s cubic-bezier(.79,.17,.15,.96);
    transform: translateX(101%);
}
#shutter > div > div > div {
    width: 0;
    width: 100%;
    height: 100%;
    transition: .5s cubic-bezier(.79,.17,.15,.96);
    background: #fff;
    background: #231815;
    transform: translateX(-101%);
    /*    transform: translateX(0);*/
}
#set #shutter > div > div > div {
    transform: translateX(0%);
}
#shutter #shutter1 > div > div {transition-delay: .0s;}
#shutter #shutter2 > div > div {transition-delay: .2s;}
#shutter #shutter3 > div > div {transition-delay: .4s;}
#shutter #shutter1 > div {transition-delay: 1.15s!important;}
#shutter #shutter2 > div {transition-delay: 1.35s!important;}
#shutter #shutter3 > div {transition-delay: 1.55s!important;}
@media screen and (min-width: 769px) {
    .section {
        position: absolute!important;
        left: 0px;
        top: 0px;
    } 
}
#fMenu {
    position: fixed;
    height: 100%;
    left: -250px;
    top: 0;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    background: #fff;
    width: 250px;
    padding: 8vh 0;
    overflow: hidden;
    transition: .75s cubic-bezier(0.79, 0.13, 0.37, 0.99);
}
#fMenu.active {
    left: 0
}
#logo {
    width: 250px;
    text-align: center;
}
#logo img {
    width: 110px;
}
#nav {
    /* width: 250px; */
    margin:  auto;
    /* text-align:  center; */
}
#studio {
    width: 100%;
    text-align: center;
    font-weight: 100;
    letter-spacing: 6px;
    font-size: 1.0rem;
}
#studio a img {
    width: 45%;
}
@media screen and (min-width: 769px) {
    #spMenu {
        display: none!important
    }
}
#menuList {
    margin: 0 auto 7vh;
    transition: 1s cubic-bezier(0.15, 0.46, 0.36, 1);
    /* transition-delay: .5s */
    /* display:  inline-block; */
    /* text-align:  left; */
    /* width:  auto; */
}
#menuList.data1 {
}
#menuList.data2 {
    transform: translateY(-34px);
}
#menuList.data3 {
    transform: translateY(-68px);
}
#menuList.data4 {
    transform: translateY(-102px);
}
#menuList li {
    padding: 0px 0 0px 25px;
    font-size: .6rem;
    margin-bottom: 25px;
    position:  relative;
    /* transition: .5s cubic-bezier(0.645, 0.045, 0.355, 1); */
    height: 1em;
    overflow: hidden;
    transition-delay: 0s;
}
#menuList li a {
    display: block;
    height: 100%;
}
#menuList li a span {
    display: inline-block;
    position: relative;
    height: 100%;
    transition: .5s cubic-bezier(0.32, 1.1, 0.43, 1.05);
    transition-property:  font-size,transform;
    transition-delay:  0s;
    font-size:  .6rem;
    vertical-align: bottom;
    /* transition: none!important; */
    transform: translateY(0);
}
.pc #menuList li a:hover span {
    transform: translateY(-150%);
}

#menuList li a span:nth-child(1)  {transition-delay: 0.00s;}
#menuList li a span:nth-child(2)  {transition-delay: 0.05s;}
#menuList li a span:nth-child(3)  {transition-delay: 0.10s;}
#menuList li a span:nth-child(4)  {transition-delay: 0.15s;}
#menuList li a span:nth-child(5)  {transition-delay: 0.20s;}
#menuList li a span:nth-child(6)  {transition-delay: 0.25s;}
#menuList li a span:nth-child(7)  {transition-delay: 0.30s;}
#menuList li a span:nth-child(8)  {transition-delay: 0.35s;}
#menuList li a span:nth-child(9)  {transition-delay: 0.40s;}
#menuList li a span:nth-child(10) {transition-delay: 0.45s;}
#menuList li a span:nth-child(11) {transition-delay: 0.50s;}
#menuList li a span:nth-child(12) {transition-delay: 0.55s;}


#menuList li a span:after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 150%;
}
#menuList li:last-child {
    margin-bottom: 0;
}
#menuList li.current {
    /* transition-delay: 1s; */
}
@media screen and (min-width: 769px) {
    #menuList.data1 li:nth-child(1) ,
#menuList.data2 li:nth-child(2) ,
#menuList.data3 li:nth-child(3) ,
#menuList.data4 li:nth-child(4) {
    /* font-size: 1.25rem; */
    /* transition-delay: .25s; */
    height:  1em;
    font-size:  1.25rem;
}
#menuList.data1 li:nth-child(1) a span ,
#menuList.data2 li:nth-child(2) a span ,
#menuList.data3 li:nth-child(3) a span ,
#menuList.data4 li:nth-child(4) a span {
    transform: translateY(-150%);
    font-size: 1.25rem;
}
#menuList li:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 2px;
    background: #000;
    left: 0;
    top: 50%;
    transform-origin: right center;
    transition: .5s cubic-bezier(0.645, 0.045, 0.355, 1);
    margin-left: 6px;
    margin-top: -1px;
}
#menuList.data1 li:nth-child(1):before ,
#menuList.data2 li:nth-child(2):before ,
#menuList.data3 li:nth-child(3):before ,
#menuList.data4 li:nth-child(4):before {
    width: 13px;
    transition-delay: 0.0s;
}
#menuList li.current:before { width: 13px;}
}

#nav #lang {
    width: 155px;
    margin:  auto;
}
#nav #lang ul {
    display: flex;
    width: 100%;
    justify-content: space-around
}
#nav #lang li {
    text-align: center;
    font-size: 0.6rem;
    position:  relative;
}
#nav #lang li.current:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background: #000;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
}
#pageMain {
    padding: 20px 0;
    /* overflow:  scroll; */
}

#pageMain .section {
    /* padding: 0 150px; */
    /* transition: 1s; */
    opacity: 0;
    transition: .5s cubic-bezier(0.3,0.1,1,1) opacity;
    z-index: 1;
    /* background: #f4f4ed; */
    transition-delay: .5s;
    overflow-x: auto;
}
#pageMain .section:not(#top) {
    padding-left: 250px;
}
#pageMain .section.active {
    opacity: 1;
    z-index: 10;
}
#pageMain article {
    width: 100%;
    /* height:  100%; */
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    max-width: 1050px;
    padding: 0 50px;
    /* align-content: space-evenly; */
    margin-bottom: 70px;
    align-items: center;
    align-content:  center;
}
#pageMain #top article {
    max-width: 100%
}
#pageMain article:last-child {

    margin-bottom: 0;
}
#pageMain article h1 {
    font-size: 3.4rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-bottom: 2.7rem;
    width: 100%;
    /*     transition: .75s cubic-bezier(0.3,0.1,1,1);
    transition-delay: 1.5s; */
}

#pageMain article h1 span {
    display: inline-block;
    /*     transition: 1.25s cubic-bezier(0.32, 1.1, 0.43, 1.05); */
}
    #pageMain .section:not(#top) article h1 {
        height: 1.65em;
        padding-top: 0.15em;
        /* padding-bottom: 0.7em; */
        margin-bottom: 1rem;
        margin-bottom: 0.4em;
        overflow:  hidden;
        /*         transition: .5s cubic-bezier(0.3,0.1,1,1); */
        /*        opacity: 0;*/
    }
@media screen and (min-width: 769px) {
    #pageMain .section {
        min-height: 0!important
    }
    #pageMain .active:not(#top) article h1 {
        /*         opacity: 1;
        padding-top: 0; */
    }
    #pageMain .fp-completely:not(#top) article h1 ,
    #pageMain .fp-completely:not(#top) article h1 span{
        /*         transition-delay: 1s; */
    }
    #pageMain article h1 span {
        transform: translateY(250%);
        /* opacity: 0; */
    }
    #pageMain .active h1 span {
        /*         transform: translateY(0);
        opacity: 1; */
    }

}
#pageMain article h2 {
    font-size: 1.35rem;
    font-weight: 800;
    width: 100%;
    margin-bottom:  1.85rem;
    letter-spacing: 0.15em;
}
#top article {
    padding: 0;
    opacity: 0;
    transition: .5s;
}
#set #top article {
    opacity: 1;
    transition-delay: 0.5s;
}
#top #topLogo {
    width: 100%;
    max-width: 350px;
    margin:  auto;
    /* height:  87px; */
    overflow:  hidden;
    position: relative;
    padding: 10px 0;
    text-align:  center;
}
#top #topLogo svg {
    width: 100%;
    max-width: 300px;
    position:  relative;
    vertical-align: bottom;
}
#top #topLogo:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    left: 0;
    top: 0;
    box-sizing: border-box;
    transform: translate3d(0%, 0, 0);
}
#top #topLogo span {
    transform:  none;
    position:  relative;
    line-height: 1;
    width: 100%;
}
#top #topLogo span:after {
    content: "";
    display: block;
    width: 100%;
    height: 200%;
    position:  absolute;
    background: rgba(244, 244, 237, 0.4);
    left: 0;
    top: -50%;
    z-index: 1;
    transition: transform .75s;
    transform: rotate(5deg) translate3d(-102%,0,0);
    transition-delay: 2.25s;
}
#set #top #topLogo span:after {
    transform: rotate(5deg) translate3d(102%,0,0);
}
#set #top #topLogo:after {
    transform: translate3d(110%, 0, 0);
    transition: transform 0.7s cubic-bezier(0.65, 0.05, 0.36, 1) , background-color 0.7s cubic-bezier(0.65, 0.05, 0.36, 1);
    transition-delay: .9s;
    background-color: #231815;
}
#top #topLogo img {
    /* transform: translate(-100%,0); */
    /* transform: translate(0,0); */
}
#top #topLogo img {
    transition: 0s;
    /* transition-delay: 1s; */
    opacity: 0;
}
#top.active #topLogo img {
    transition-duration: 1s;
    /* transition-delay:  1s; */
}
#top.fp-completely #topLogo img {
    opacity: 1;
    /* transition-delay: 0s; */
}
#about h2 {
    /* transition: .65s cubic-bezier(0.3,0.1,1,1); */
    display: block;
    transform: translateY(20px);
    opacity: 0;
}
#about p.text {
    letter-spacing: 2.7px;
    line-height: 2.0;
    font-weight: 500;
    font-size: 1.1rem;
    /* transition: .65s cubic-bezier(0.3,0.1,1,1); */
    display: block;
    transform: translateY(20px);
    opacity: 0;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}
#about p.text.ja {
    font-size: 1.05rem;
    letter-spacing: 0;
    line-height: 2.3;
}
#about.active h2,
#about.active p.text {
    /* transform: translateY(0); */
    /* opacity: 1; */
    /* transition-delay: 1.2s; */
}
/* #about.active article:nth-child(1) p.text {
transition-delay: 1.3s
}
#about.active article:nth-child(2) h2 {
transition-delay: 1.25s
}
#about.active article:nth-child(2) p.text {
transition-delay: 1.35s
} */
#about.fp-completely h2,
#about.fp-completely p.text {
    /* transform: translateY(0); */
    /* opacity: 1; */
    /* transition-delay: 0s!important; */
}
#pageMain #company article h1 {
    margin-bottom: 1em!important;
}
#compDetail {
    display:  flex;
    width: 100%;
}
#compMain {
    font-size: 1.2rem;
    letter-spacing:  0;
    font-weight: 600;
    width: 50%;
    display:  flex;
    flex-wrap:  wrap;
    opacity:  0;
    transform: translateY(20px);
    align-content:  flex-start;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}
#compMain.ja {
    text-shadow: none;
    font-weight:  normal;
    font-size: 1.05rem;
}
#compMain dt {
    /* float: left; */
    /* clear: left; */
    width:  6.6em;
    /* overflow: hidden; */
    align-self: flex-start;
    margin-bottom: 2.3em;
}
#compMain dd {
    /* padding-left: 6.6em; */
    margin-bottom: 2.4em;
    width: calc(100% - 6.6em);
    align-self: flex-start;
    /* overflow:  hidden; */
}

#compMain.ja dt, #compMain.ja dd {
    margin-bottom: 2.8em;
    line-height: 1.6;
}
#pageMain #compMain dt span ,
#pageMain #compMain dd span {
    /* transition: .5s cubic-bezier(0.3,0.1,1,1); */
    display: block;
    /* transform: translateY(20px); */
    /* opacity: 0; */
}
#pageMain .active #compMain dt span{
    /* transform: translateY(0); */
    /* opacity: 1; */
    /* transition-delay: 1.2s; */
}
#pageMain .active #compMain dd span {
    /* transform: translateY(0); */
    /* opacity: 1; */
    /* transition-delay: 1.3s; */
    /* line-height: 1.6; */
    /* margin-top: -.3em; */
}
#pageMain .fp-completely #compMain dt span ,
#pageMain .fp-completely #compMain dd span {
    /* transition-delay: 1s; */
}
#pageMain #compMain dd span br {
    line-height: 1
}
#access {
    width: 50%;
    letter-spacing:  0;
    opacity:  0;
    transform: translateY(20px);
}
#access ul {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    height:  100%;
}
#access li {
    /* margin-bottom: 5em; */
    width:  100%;
    /* transition: .5s cubic-bezier(0.3,0.1,1,1); */
    display: block;
    /* transform: translateY(20px); */
    /* opacity: 0; */
    margin-bottom: 3.1em;
}
.active #access li {
    /* transform: translateY(0); */
    /* opacity: 1; */
    /* transition-delay: 1.3s; */
}
.active #access li:nth-child(2) {
    /* transition-delay: 1.4s; */
}
#pageMain .fp-completely #access li {
    /* transition-delay: 1s; */
}
#access li h2 {
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    letter-spacing: 0;
}
#access li .detail {
    line-height: 1.7;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.4em;
}
#access li .detail.ja {
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.4em;
}
#access li .map {
    display: inline-block;
    background: #000;
    color: #fff;
    font-size: .9rem;
    padding: .125rem .25rem;
    line-height: 1;
    vertical-align: bottom;
}

#project article {
    justify-content: center;
    text-align: center;
}

#contact article {
    justify-content: center;
    text-align: center;
}
#contact .mail {
    font-size: 1.25rem;
    position: relative;
    letter-spacing:  0;
    /* transition: .65s cubic-bezier(0.3,0.1,1,1); */
    display: block;
    transform: translateY(20px);
    opacity: 0;
}
#contact.active .mail {
    /* transition-delay: 1.05s; */
    /* transform: translateY(0); */
    /* opacity: 1; */
}
#contact .mail:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #000;
    bottom: -2px;
    left: 0;
}

@media screen and (max-width: 768px) {
    html,body {
        height: 100%;
    }
    #top #topLogo {
        width: 60%;
        max-width: 320px;
        height:  auto;
        opacity: 1 !important;
    }
    #fMenu {
        position: fixed;
        width: 100%;
        height: 44px;
        left:  0;
        flex-wrap: nowrap;
        padding: 0 10px;
        align-content: center;
        align-items: center;
        justify-content: space-between;
        z-index: 9998;
        overflow: visible
    }
    #pageMain {
        padding-top: 44px;
    }
    #pageMain #top {
        height: 100%;
    }
    #pageMain .section {
        padding: 44px 8%!important;
        opacity: 1;
        min-height: 100vh;
        display:  flex;
        flex-wrap:  wrap;
        align-content: center;
        align-self: center;
        align-items: center;
    }
    #pageMain .section#project {
        padding-top: 50px !important;
    }
    #pageMain .section#contact {
        padding-top: 38px !important;
    }
    #pageMain .section:not(#top) article h1 {
        opacity: 0;
        font-size: 2.7rem;
        letter-spacing: .15em;
        height: 1.65em;
        margin-bottom: 0.8rem;
    }
    #pageMain .section:not(#top) .show > h1 {
        opacity:  1;
        transition-delay: .5s;
        transform: translateY(0);
        white-space: nowrap;
    }
    #pageMain article h1 span {
        display: inline-block
    }
    #pageMain article h2 {
        line-height: 1.4;
    }
    #pageMain article  .js_sp-point2 {
        transform: translate(0px,20px)!important;
        opacity: 0!important;
    }
    #pageMain article  .js_sp-point2.show {
        opacity: 1!important;
        transform: translate(0,0)!important;
        transition: .65s cubic-bezier(0.3,0.1,1,1)!important;
        /* padding: 0 0 0 1em; */
    }
    #top article {
        height: 100%;
    }
    #pageMain article {
        min-width: 0;
        padding: 50px 0;
        align-content: center;
        margin:  0;
        /* min-height: 50vh; */
    }
    #about .show h2 {
        opacity: 1;
        transition-delay: .9s;
        transform:  translateY(0);
    }
    #about .show p.text {
        opacity: 1;
        transition-delay: 1.2s;
        transform: translateY(0);
    }
    #studio {
        display: none;
    }
    #logo {
        /* width: 20%; */
        display: flex;
        padding: 0;
        width: 100px;
    }
    #logo img {
        width: 100%;
    }
    #menuTrigger {
        display: inline-flex;
        position: relative;
        height: 13px;
        width: 20px;
        /* cursor: pointer; */
    }
    #spMenu {
        display: none;
        position: fixed;
        top: 44px;
        right:  0;
        background: #fff;
        box-shadow: 0 2px 5px -4px black;
        padding: 4rem 0;
        width: 100%;
        z-index: 100;
    }
    #spLang {
        text-align: center;
        width: 100%;
    }
    #spLang h2 {
        text-align: center;
        font-size: 1.15rem;
        font-weight: 400;
        display: inline-block;
        margin-bottom: 1.5rem;
        display: none;
    }
    #spLang ul {
        display: flex;
        width: 50%;
        justify-content: space-around;
        margin: 0 auto 4rem;
    }
    #spLang li {
        font-size: 1rem;
        opacity: 0;
        transform: translateY(-10px);
        transition: 0.75s;
    }
    .on #spLang li {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.5s;
    }
    #spLang li a {
        padding: .5em 9.125px .5em 11px;
        position:  relative;
        display:  inline-block;
    }
    #spLang li a:before,
    #spLang li a:after {
        content: "";
        display: block;
        width: 0;
        height: 1px;
        background: #3a3a3a;
        position: absolute;
        left: 50%;
        transition: .5s
    }
    #spLang li a:before {
        top: 0;
        display: none;
    }
    #spLang li a:after {
        bottom: 0;
    }
    .pc #spLang li a:hover:before,
    .pc #spLang li a:hover:after,
    #spLang li.current a:before,
    #spLang li.current a:after {
        width: 100%;
        left: 0;
    }
    #spStudio {
        width: 100%;
        text-align:  center;
        opacity: 0;
        transform: translateY(-10px);
        transition: 0.75s;
    }
    .on #spStudio {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.75s;
    }
    #spStudio a {
        display: inline-block;
        width: 30%;
        max-width: 135px;
    }
    #spStudio img {
    }
    #menuTrigger .line {
        display: block;
        position: absolute;
        width: 20px;
        border-top: 1px solid #000;
    }

    #menuTrigger .line:nth-child(1) {
        top: 0
    }

    #menuTrigger .line:nth-child(2) {
        top: 6px;
        opacity: 1;
        transition: transform .4s ease-out,opacity 0s linear .2s;
    }

    #menuTrigger .line:nth-child(3) {
        top: 12px;
    }

    #menuTrigger .line:nth-child(1) {animation: close-top .4s ease-out forwards;}
    #menuTrigger .line:nth-child(3) { animation: close-bot .4s ease-out forwards}
    #menuTrigger.active .line { border-top-width: 1px}
    #menuTrigger.active .line:nth-child(1) { animation: open-top .4s ease-out forwards}
    #menuTrigger.active .line:nth-child(2) {
        opacity: 0;
        transition: transform .4s ease-out,opacity 0s linear .2s
    }
    #menuTrigger.active .line:nth-child(3) { animation: open-bot .4s ease-out forwards}

    #nav {
        /* position: fixed; */
        right:  0;
        /* display:  none; */
        height: 100%;
        width: calc(100% - 130px);
    }
    #menuList {
        display: inline-flex;
        margin:  0;
        flex-wrap:  wrap;
        height: 100%;
        align-content: space-around;
        align-items: center;
        width: 100%;
        padding: 0 3%;
        transform: translateY(0)!important;
        /* width: auto; */
    }
    #menuList li {
        margin-bottom: 0;
        padding:  0;
        width: 25%;
        display:  flex;
        justify-content: center;
        align-content:  center;
        height: calc(1em + 4px);
    }
    #menuList li a:after {
        content: "";
        display: block;
        width: 0%;
        position: absolute;
        top: calc(100% + 1px);
        left: 50%;
        transition: .5s;
        height: 1px;
        background: #000;
    }
    #menuList li.on a:after {
        width: calc(100% + 0.4em);
        left: -0.3em;
    }
    #menuList li a {
        display: inline-flex;
        height:  auto;
        position:  relative;
        align-self:  center;
        padding: 0 2px;
    }
    #nav #lang {
        display: none;
    }
    #compDetail {
        flex-wrap: wrap;
    }
    #compMain,
    #access {
        width: 100%;
        opacity: 1!important;
    }
    #access {
        transform: none!important;
    }
    #compMain {
        margin-bottom: 1em;
    }
    #compMain dd {
        text-align: right;
    }
    #access ul {
        justify-content: space-between;
    }
    #access li {
        /* min-width: 50%; */
        width: auto;
        margin-bottom: 40px;
    }
    #contact .mail {
        opacity: 1;
        transform: none;
        padding: 0!important;
    }
}

@keyframes open-top {
    50%  { transform: translate3d(0,6px,0)}
    100% { transform: translate3d(0,6px,0) rotate(45deg)}
}
@keyframes open-bot {
    50%  { transform: translate3d(0,-6px,0)}
    100% { transform: translate3d(0,-6px,0) rotate(-45deg)}
}
@keyframes close-top {
    0%   { transform: translate3d(0,6px,0) rotate(45deg)}
    50%  { transform: translate3d(0,6px,0) rotate(0deg)}
    100% { transform: translate3d(0,0,0)}
}
@keyframes close-bot {
    0%   { transform: translate3d(0,-6px,0) rotate(-45deg)}
    50%  { transform: translate3d(0,-6px,0) rotate(0deg)}
    100% { transform: translate3d(0,0,0)}
}
@media screen and (max-width: 480px) {
    html {
        font-size: 2.7vw;
    }
    #logo {
        width: 20%;
    }
    #nav {
        width: calc(80% - 30px);
    }
    #menuList {
        padding: 0 15px;
        justify-content: space-between;
    }
    #menuList li {
        /* width: 50%; */
        width:  auto;
    }
    #pageMain .section {
        padding: 0 1.5rem!important;
    }
    #pageMain #project,
    #pageMain #contact {
        padding: 0!important;
    }
    #pageMain article h1:not(#topLogo) {
        font-size: 2.5rem;
        white-space: nowrap;
    }
    #about p.text {
        font-size: 1.1rem
    }
    #compMain {
        margin-bottom: 2em;
        /* transform: translate(0px,20px); */
    }
    #compMain dt {
        width: 100%;
        margin-bottom: 10px;
        font-weight: 600;
    }
    #compMain dt br {
        display: none
    }
    #compMain dd {
        width: 100%;
        text-align: left;
        padding-bottom: 1.5em;
        margin-bottom:  0;
        font-weight: 500;
    }
    #compMain.ja dt, #compMain.ja dd {
        margin-bottom: 5px;
        line-height: 1.4;
    }
    #access li {
        width: 100%;
        margin-bottom:  60px;
    }
    #access li:last-child {
        margin-bottom: 0
    }
}
@media screen and (max-width: 360px) {
    html {
        font-size: 11px;
    }
    #pageMain article h1 {
        font-size: 2.6rem;
        letter-spacing: .1em!important;
    }
}