@charset "utf-8";
* {
    margin : 0;
    padding: 0;

    font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
    color: #C6C6C6;
}
html {
    overflow-y: scroll;
}
body {
    background-color: #262626;
}

.anti-copy{
    pointer-events: none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag: none;
}

.anti-drag{
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag: none;
}

.allow-drag{
    user-select:auto;
    -webkit-user-select:text;
    -webkit-user-drag:auto;
}

.shutter{
    width: 100%;
    height: 100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    background-color: #0D0D0D;
    z-index:99;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-animation: shutter 4s forwards;
    animation: shutter 4s forwards;
}

.shutter-text {
    position: relative;
}

.shutter-text::after {
    background: white;
    content: '';
    display: block;
    height: 3px;
    width: 0;
    transform: translateX(-50%);
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 50%;
    animation: shutterTextShow 3s cubic-bezier(.4, 0, .2, 1) forwards;
}
.shutter-text.is-animated::after {
    width: 100%;
}

.shutter-text::before {
    background: white;
    content: '';
    display: block;
    height: 3px;
    width: 0;
    transform: translateX(-50%);
    position: absolute;
    top: -15px;
    bottom: 0;
    left: 50%;
    animation: shutterTextShow 3s cubic-bezier(.4, 0, .2, 1) forwards;
}
.shutter-text.is-animated::before {
    width: 100%;
}

@keyframes shutter {
    70% {
        opacity: 1;
    }
    100% {
        display: none;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes shutterTextShow {
    50% {
        width: 150%;
    }
    100% {
        width: 0%;
    }
}

.box-top {
    position: relative;
}

.img-top {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: 92% 92%;
    opacity: 0.7;
}

.img-cover {
    width: 100%;
    height: 100vh;
    top: 0;
    position: absolute;
    background: rgba(28, 102, 166, 0.2);
}

.box-top p {
    position: absolute;
    font-size: 400%;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

.shadow {
    text-shadow: 3px 3px 5px #aaa;
    font-weight: bold;
}

.marker.active{
    background-position: -100% .5em;
}
.marker {
    display: inline;
    background-repeat: repeat-x;
    background-size: 200% 58%;
    background-position: 0 .5em;
    transition: all 1.5s ease;
    font-weight: bold;
}
.marker.black{
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(13, 13, 13, 0.5) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(13, 13, 13, 0.5) 50%);
    background-image: linear-gradient(to rigth, transparent 50%, rgba(13, 13, 13, 0.5) 50%);
}
.marker.white{
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(198, 198, 198, 0.7) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(198, 198, 198, 0.7) 50%);
    background-image: linear-gradient(to rigth, transparent 50%, rgba(198, 198, 198, 0.7) 50%);
    color: #0D0D0D;
}
.marker.red{
    background-image: -webkit-linear-gradient(left, transparent 50%, red 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, red 50%);
    background-image: linear-gradient(to rigth, transparent 50%, red 50%);
}
.marker.blue {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(28, 102, 166, 0.7) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(28, 102, 166, 0.7) 50%);
    background-image: linear-gradient(to rigth, transparent 50%, rgba(28, 102, 166, 0.7) 50%);
}
.marker.green {
    background-image: -webkit-linear-gradient(left, transparent 50%, #cfc 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, #cfc 50%);
    background-image: linear-gradient(to right, transparent 50%, #cfc 50%);
}
.marker.yellow {
    background-image: -webkit-linear-gradient(left, transparent 50%, #ff6 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, #ff6 50%);
    background-image: linear-gradient(to right, transparent 50%, #ff6 50%);
}

.main-container {
    width: 960px;
    margin-top: 128px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 128px;
}

.heading {
    width: 100%;
    text-align: center;
    margin-top: 64px;
    margin-bottom: 32px;
}

.heading span {
    font-weight: bold;
    font-size: 300%;
    position: relative;
}

.heading span::after {
    content: "";
    display: block;
    width: 130%;
    height: 3px;
    background-color: #C6C6C6;
    position: absolute;
    bottom: -16px;
    left: -15%;
}

table.simple {
    margin: 16px;
    width: 100%;
    font-weight: bold;
    font-size: 150%;
    border-spacing: 8px 32px;
    text-align: left;
}

table.simple tr th {
    white-space: nowrap;
    vertical-align: text-top;
}

a.simple {
    text-decoration: none;
}

.fa-sp {
    margin-right: 0.5em;
}

ul.skill {
    list-style-type: none;
}

ul.skill li {
    display: inline-block;
    background-color: #C6C6C6;
    margin: 8px;
    border-radius: 24px;
    padding: 8px 24px;
    color: #0D0D0D;
    font-size: 150%;
    font-weight: bold;
}

ul.skill li i {
    color: #0D0D0D;
}

@media screen and (max-width: 960px) {
    .main-container {
        width: 100%;
    }
    table.simple {
        font-size: 100%;
        margin: 0;
    }
    ul.skill li {
        font-size: 100%;
        padding: 8px 8px;
        margin-left: 4px;
        margin-right: 4px;
    }
    .heading span::after {
        content: "";
        display: block;
        width: 116%;
        height: 3px;
        background-color: #C6C6C6;
        position: absolute;
        bottom: -16px;
        left: -8%;
    }
}