@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}

html {
  visibility: hidden;
}

html.wf-active {
  visibility: visible;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.wrapper {
    width: 100%;
    height: 100%;
    background: url(images/back_4.png) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: scroll;
    animation: advent 2s ease-in;
}

.wrapper2 {
    width: 100%;
    height: 100%;
    background: url(images/back_2.png) no-repeat;
    background-size: contain;
    background-attachment: fixed;
    overflow: scroll;
}

.scrl {
    width: 100%;
    height: 100%;
    }

@media screen and (min-width:1100px) {
    .wrapper {
    background-size: cover;
    }
}

@keyframes advent {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

.border {
    margin: 2.8% 5% 0;
    width: 90%;
    height: 90%;
    border: 1px solid #fff;
    box-sizing: border-box;
}

header {
    width: 100%;
    height: 25%;
}

header a {
    display: block;
    width: 100%;
    height: 100%;
}

.logo {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    background: url(images/logo.svg) no-repeat;
}

main {
    width: 90%;
    height: 70%;
    margin: 0 auto;
    border-left: 1px solid #fff;
}

.content {
    overflow: scroll;
}

.myname {
    width: 80%;
    margin: 0 auto;
    padding: 0.5%;
    color: #fff;
    background-color: #33558B;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    font-size: 2.5vw;
    text-align: center;
    letter-spacing: 0.5vw;
}

.sign {
    width: 42%;
    height: 70%;
    margin-right: 0;
    background: url(images/sign.svg) no-repeat;
    position: relative;
    top: 17%;
    left: -3%;
}

.t_nav {
    width: 47%;
    height: 84%;
    position: relative;
    bottom: 63%;
    left: 52%;
    display: flex;
    flex-wrap: wrap;
}

.t_nav a {
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    align-items: center;
    justify-content: center;
}

.resp_btn {
    display: block;
    margin: 0;
    padding: 0;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    font-weight: 100;
    font-size: 3.2vw;
    line-height: 2.5vw;
}

.enter {
    display: block;
    font-size:  2.3vw;
}

.web {
    width: 60.7%;
    height: 65%;
    margin-right: 3.8%;
    background: url(images/tri_1.png) no-repeat;
    background-size: cover;
    background-position: center;
    transition: linear 0.3s;
    border: 1px solid #fff;
}

.web:hover {
    width: 60.7%;
    height: 65%;
    background: url(images/sq1.png) no-repeat;
    background-size: cover;
    transform: translate(0, -3%);
    box-shadow: 2px 2px 10px #000;
    transition: linear 0.3s;
}

.art {
    width: 34.5%;
    height: 65%;
    background: url(images/tri_2.png) no-repeat;
    background-size: cover;
    background-position: center;
    transition: linear 0.3s;
    border: 1px solid #fff;
}

.art:hover {
    width: 34.5%;
    height: 65%;
    background: url(images/sq1.png) no-repeat;
    background-size: cover;
    background-position: left;
    transform: translate(0, -3%);
    box-shadow: 2px 2px 10px #000;
    transition: linear 0.3s;
}

.bio {
    width: 61.2%;
    height: 28%;
    margin: 2% 0 0 38.3% ;
    background: url(images/tri_3.png) no-repeat;
    background-size: cover;
    background-position: center;
    transition: linear 0.3s;
    border: 1px solid #fff;
}

.bio:hover {
    width: 61.2%;
    height: 28%;
    background: url(images/sq1.png) no-repeat;
    background-size: cover;
    transform: translate(0, -3%);
    box-shadow: 2px 2px 10px #000;
    transition: linear 0.3s;
}

footer {
    width: 100%;
    text-align: center;
}

small {
    display: inline;
    color: #fff;
    font-size: 1vw;
    vertical-align: middle;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
}

/*WEBdesign*/

.slogo {
    width: 30%;
    height: 30%;
    margin-left: 5%;
    background: url(images/logo.svg) no-repeat;
    float: left;
}

.smyname {
    width: 62.5%;
    margin: 0.9% 0;
    padding: 0.2% 0.2% 0.2% 1.5%;
    color: #fff;
    background-color: #33558B;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    font-size: 1vw;
    text-align: left;
    letter-spacing: 0.3vw;
    float: right;
}

.smyname::after {
    clear: both;
}

.page_flex {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
}

.h_nav {
    width: 60%;
    height: 100%;
    margin: 1.5% 5% 0 0;
    display: flex;
    justify-content: flex-end;
}

.nav1 {
    width: 26%;
    height: 100%;
    margin-left: 2%;
    background: url(images/art_a.svg) no-repeat;
    background-size: contain;
    transition: linear 0.2s;
}

.nav3 {
    width: 26%;
    height: 100%;
    margin-left: 2%;
    background: url(images/web_a.svg) no-repeat;
    background-size: contain;
    transition: linear 0.2s;
}

.nav2 {
    width: 26%;
    height: 100%;
    margin-left: 2%;
    background: url(images/bio_a.svg) no-repeat;
    transition: linear 0.2s;
}

.nav1 a, .nav2 a, .nav3 a {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: inherit;
}

.nav1:hover {
    background: url(images/art_b.svg) no-repeat;
    transition: linear 0.2s;
}

.nav2:hover {
    background: url(images/bio_b.svg) no-repeat;
    transition: linear 0.2s;
}

.nav3:hover {
    background: url(images/web_b.svg) no-repeat;
    transition: linear 0.2s;
}

.page {
    width: 8em;
    padding: 1.5% 0 0 3%;
    color: #fff;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    font-weight: 100;
    font-size: 5vw;
    font-style: italic;
    line-height: 1em;
}

.web_sample {
    width: 100%;
    padding-bottom: 4%;
    border-bottom: 1px solid #fff;
}

.sample_flex {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.sample_description {
    width: 45%;
}

.sample_title {
    color: #fff;
    margin: 0 2%;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    font-weight: 600;
    font-size: 2vw;
    padding-left: 1.8%;
    border-left: 1px solid #fff;
}

.sample_table {
    width: 100%;
    color: #fff;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    font-weight: 100;
    font-size: 1vw;
    border-collapse: collapse;
}

th {
    width: 34%;
    text-align: right;
    padding: 2% 4% 2% 4%;
    vertical-align: top;
    border-bottom: 1px solid #fff;
}

td {
    text-align: left;
    padding: 2% 4% 2% 1%;
    vertical-align: top;
    border-bottom: 1px solid #fff;
}

th::after {
    content: ":";
    padding-left: 5%;
}

.web_link {
    width: 50%;
    height: 100%;
    margin: 0 0 0 4.5%;
    transition: linear 0.3s;
}

.web_link img {
    width: 100%;
}

.web_link:hover {
    opacity: 0.5;
    transition: linear 0.3s;
}

.web_link_w {
    width: 50%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 4.5%;
    transition: linear 0.3s;
}

.web_link_w a {
    width: 50%;
}

.s_pic {
    width: 100%;
    transition: linear 0.3s;
}

.s_pic:hover {
    opacity: 0.5;
    transition: linear 0.3s;
}

.bio_pic {
    width: 30%;
    height: 100%;
    margin: 0 10% 0 10%;
    transition: linear 0.3s;
}

@media screen and (max-width:1044px) {
    
    body {
        width: 1050px;
    }
    
    
}

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

    body {
    width: 100vw;
    height: 100vh;
    overflow: scroll;
}
    
    .border {
    width: 94%;    
    height: auto;
    margin: 3% 3% 0;
}

    .wrapper2 {
    height: 100%;
    background-attachment: fixed;
    overflow: scroll;
}
    
    .scrl {
    width: 100%;
    height: auto;
    overflow: visible;
    }
    
    .logo {
    width: 95%;
    height: 50px;
    margin: 0 2.5%;
}
    
    .myname {
    width: 80%;
    margin: 0 10%;
    padding: 1% 0;
    font-size: 3vw;
    text-align: center;
    letter-spacing: 1vw;
    line-height: 3vw;
}

    .sign {
    width: 50%;
    height: 150px;
    margin-right: 0;
    background: url(images/sign.svg) no-repeat;
    position: relative;
    top: 400px;
    left: 0;
}

.t_nav {
    width: 100%;
    height: 380px;
    margin: 0;
    position: relative;
    bottom: 140px;
    left: 0;
    display: flex;
    align-content: space-between;
    text-align: right;
}
    
    .t_nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    line-height: 8vw;
    color: #fff;
}
    
    .resp_btn {
    display: block;
    margin: 0;
    padding: 0;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    font-size: 8vw;
    text-align: center;
}
    
    .enter {
    display: inline-block;
    font-size:  8vw;
}
    
    .web {
    width: 80%;
    height: 30.5%;
    margin: 0 10%;
    background: url(images/tri_1.png) no-repeat;
    background-size: cover;
    background-position:center;
    border: 1px solid #fff;
    transition: linear 0.3s;
}

.web:hover {
    width: 80%;
    height: 30.5%;
    margin: 0 10%;
    background: url(images/tri_1.png) no-repeat;
    background-size: cover;
    background-position:center;
    border: 1px solid #fff;
    transform: none;
}

.art {
    width: 80%;
    height: 30.5%;
    margin: 0 10%;
    background: url(images/tri_2.png) no-repeat;
    background-size: cover;
    background-position: center;
    border: 1px solid #fff;
    transition: linear 0.3s;
}

.art:hover {
    width: 80%;
    height: 30.5%;
    margin: 0 10%;
    background: url(images/tri_2.png) no-repeat;
    background-size: cover;
    background-position: center;
    border: 1px solid #fff;
    transform: none;
}

.bio {
    width: 80%;
    height: 30.5%;
    margin: 0 10%;
    background: url(images/tri_3.png) no-repeat;
    background-size: cover;
    background-position:center;
    border: 1px solid #fff;
    transition: linear 0.3s;
}

.bio:hover {
    width: 80%;
    height: 30.5%;
    margin: 0 10%;
    background: url(images/tri_3.png) no-repeat;
    background-size: cover;
    background-position:center;
    border: 1px solid #fff;
    transform: none;
 }
    
    .slogo {
    width: 95%;
    height: 50px;
    margin: 0 2.5%;
    float: none;
}
    
    .smyname {
    width: 80%;
    margin: 0 10%;
    padding: 1% 0;
    font-size: 3vw;
    text-align: center;
    letter-spacing: 1vw;
    line-height: 3vw;
    float: none;
}

    .h_nav {
    width: 95%;
    height: 85px;
    margin: 0 2.5%;
    justify-content: space-between;
}

.nav1 {
    width: 48.5%;
    height: 100%;
    margin-left: 0;
}

.nav3 {
    width: 48.5%;
    height: 100%;
    margin-left: 0;
}

.nav2 {
    width: 48.5%;
    height: 100%;
    margin-left: 0;
}

    main {
    width: 100%;
    height: 70%;
    border-left: 0px solid #fff;
}
    
    .page_flex {
    width: 100%;
    height: 50%;
    margin: 2% 0 10% 0;
    display: flex;
    flex-direction: column-reverse;
}

    .page {
    width: 100%;
    margin: 10% 0 0 0;
    padding: 0;
    font-size: 10vw;
    line-height: 1em;
    text-align: center;
}
    
    .content {
    overflow: inherit;
}
    
    .web_sample {
    padding-bottom: 0;
    border-bottom: 0px solid #fff;
}
    
    .sample_flex {
    display: block;
}
    
    .sample_description {
    width: 100%;
}

    .sample_title {
    color: #fff;
    margin: 2% 2.5%;
    padding-left: 2%;
    font-size: 5.5vw;
    border-left: 1px solid #fff;
}

    .sample_table {
    width: 100%;
    color: #fff;
    font-size: 3.5vw;
    border-collapse: collapse;
}
    .web_link img {
    width: 95%;
    margin: 0 2.5%;
}

    th {
    width: 29%;
    padding: 2% 2% 2% 2%;
    font-size: 3vw;
}
    
    td {
    padding: 2% 2% 2% 0%;
}
    
    .web_link {
    width: 100%;
    margin: 0;
}
    
    .web_link_w {
    width: 95%;
    margin: 0 2.5%;
}
    
    .bio_pic {
    width: 95%;
    margin: 0 2.5%;
    }
    
    .bn {
        border-bottom: none;
    }

small {
    display: inline;
    padding: 0 0 1.5% 0;
    color: #fff;
    font-size: 2vw;
    vertical-align: middle;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
}
}