@charset "utf-8";
@import url(reset.css);
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&family=Zen+Old+Mincho&display=swap');

body {
    line-height: 0;
}

a {
    text-decoration: none;
    display:inline;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    cursor:pointer;  
}

#header {
    position: fixed;
    left: 50%;
    top: calc((50vh - 24rem)/2);
    z-index: 1;
    transition: all 0.2s;
}

img {
    vertical-align:bottom;
}

div {
    vertical-align: bottom;
}

.logo {
    padding: 0px 2px 0px 2px;
    height: .8rem;
    vertical-align:bottom;
    position: absolute;
    transform: translate(0%, -50%);
    left: -24rem;
    transition: all 0.2s;
}

.mono {
    height: 1rem;
    vertical-align:bottom;
    position: absolute;
    transform: translate(-100%, -50%);
    left: 24rem;
    transition: all 0.2s;
}

.center {
    transform: translate(-50%, 0%);
    display: flex;
    flex-wrap: nowrap;
    gap: 0px 10px;
}

.btn {
    padding: 9px 2px 9px 2px;
    margin: 0px;
    transform: translate(0%, -50%);
    background: rgba(255, 255, 255, 0);
    border: 1px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    background-color: #fff;
    font-size: 0.5rem;
    letter-spacing: 0.25rem;
    text-indent: 0.25rem;
    font-family: 'Zen Old Mincho';
    cursor: pointer;
    transition: 0.1s;
    z-index: 0;
}

.btn a{
    color: rgb(0, 0, 0);
}

.btn:hover {
    background: rgb(0, 0, 0);
}

.btn:hover a{
    color: #fff;
}

.backimage {
    width: 48rem;
}

#box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    backface-visibility:hidden;
}

.waku::-webkit-scrollbar {
    display: none;
    backface-visibility:hidden;
}


.waku {
    position: relative;
    width: 48rem;
    height: 48rem;
    border: solid rgb(0, 0, 0);
    border-width: 1px 1px 1px 1px;
    overflow: scroll;
    backface-visibility:hidden;
    font-size:0;
    vertical-align:bottom;
    scrollbar-width: none;
}

#front {
    animation: fadein 3s forwards;
    font-size:0;
    backface-visibility:hidden;
}

@keyframes fadein {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* これより下 枠内 */

/*フロント*/
.kawaii {
    width: 50px;
    height: 50px;

    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: -25px;
    margin-left: -25px;
}

.scroll {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 200px;
    margin-left: -25px;
}

.background {
    z-index: -1;
    width: 100%;
    height: 48rem;
}

.headline {
    margin: 0;
    position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    height: 100px;
    font-family: 'Zen Old Mincho'
}

/*WORKS*/

.worksback {
    background-color: black;
}

.videos {
	width:			calc(100%/3);
    overflow:		hidden;
    position:		relative;    
    display: inline-block;
    vertical-align: top;
    background-color:black;
    transition: all 0.2s;
    vertical-align: bottom;
}

.videos img {
	width:			100%;
	overflow:		hidden;
	position:		relative;
    backface-visibility: hidden;
    vertical-align: bottom;
}

.videos .caption {
	text-align: 		center;
    transform: translate(0 , 0);
	color:			rgb(0, 0, 0);
    margin-top: 25%;
    font-size: 1.4rem;
    font-family: 'Zen Old Mincho';
    width: 100%;
    line-height: 0.7rem;
}

.videos .caption2 {
	text-align: 		center;
	padding-top:	    1rem;
	color:			rgba(0, 0, 0);
    line-height: 0.4rem;
    font-size: 0.8rem;
    font-family: 'Zen Kaku Gothic New'
}

.caption2:empty {
    display: none;
}

.videos .mask {
	width:			100%;
	height:			100%;
    position:		absolute;
	top:			0%;
	left:			0%;
	opacity:		0;
	background-color:	rgb(255, 255, 255); 
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
    backface-visibility:hidden;

}

.videos:hover .mask {
	opacity:		1;

}

/*PROFILE*/

.profilebig {
    position: relative;
}

.profile {
    width: 90%;
    height: 30%;
    margin: 5%;
    background-color: rgb(255, 255, 255);
    outline: solid 1px black;
    transition:0.2s all;
}

.profile img{
    width: 100%;
    height: 100%;
}

.katasara img {
    position: absolute;
    top: 0;
    width: 15%;
    left: 5%;
    margin: 10%;
    transition:0.1s all;
}

.katasara img:hover{
    transform:scale(1.1,1.1);
}

.social {
    position: absolute;
    top: 40%;
    width: 15%;
    left: 5%;
    margin: 10%;
    transition: all 0.2s;
    justify-content: space-around;
    display: flex;
}

.social img{
    width: 2rem;
    transition:0.2s all;
}

.socialmask {
    opacity: 0;
}

/*CONTACT*/

.contactbox {
    width: 100%;
    background-color: rgb(0, 0, 0);
}

.contactbox_text {
    transform: translate(0%, 0);
    overflow:hidden;
    padding: 2rem;
}

.kakoi{
    color: rgb(255, 255, 255);
    outline: 1px solid rgb(255, 255, 255);
    padding: 0em 0.2em 0.15em 0.4em;
    transition:0.2s all;
}

.contactbox_text .on:hover{
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}

.contactbox div{
    color: rgb(255, 255, 255);
    font-size: min(3vmin, 1rem);
    line-height: 1rem;
    background-color: rgb(0, 0, 0);
    text-align: center;
    font-family: 'Zen Kaku Gothic New';
    line-height: 200%;
    letter-spacing: 0.2rem;
    text-indent: 0.2rem;
}

/*OTHER*/

.question {
    width: 80%;
    height: auto;
    padding: 10%;
}

.question h2{
    color: #000000;
    font-family: 'Zen Old Mincho';
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 0.5rem;
    text-indent: 0.5rem;
}

.question h3{
    color: #000000;
    background-color: rgb(200, 200, 200);
    font-family: 'Zen Kaku Gothic New';
    font-size: 1.1rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin: 2rem 0rem 1.5rem 0rem;
    line-height: 2rem;
    font-weight: normal;
}

.question p{
    color: #000;
    width: 100%;
    font-size: 1rem;
    font-family: 'Zen Kaku Gothic New';
    font-weight: normal;
    line-height: 1.5rem;
}

.credits {
    height: 5rem;
    outline: 1px solid rgb(200, 200, 200);
}

.credits_text {
    position: relative;
    color: rgb(0, 0, 0);
    top: 2.5rem;
    font-size: .8rem;
    text-align: center;
    font-family: 'Zen Kaku Gothic New';
    letter-spacing: 0.2em;
    text-indent: 0.2em;
}

/* ヨコ 48rem + マージン以下の時　ロゴ, 図形の透過 ボタンをアクティブ化*/

@media screen and (max-width: calc(48rem + (100vh - 48rem))) {

    .logo {
        opacity:0;
    }
    
    .mono {
        opacity:0;
    }

    .caption {
        visibility:hidden;
    }

    .caption2 {
        visibility:hidden;
    }

    .btn:hover {
        background: rgb(255, 255, 255);
    }
    
    .btn:hover a{
        color: #000000;
    }

    .btn:active {
        background: rgb(0, 0, 0);
    }    

    .btn:active a{
        color: rgb(255, 255, 255)
    }

}

/* ヨコ 48rem以下の時　タテを100vw (javascriptでレスポンシブ対応済) */

@media screen and (max-width: 48rem) {

    .waku {
        position: relative;
        width: calc(100vw + 1px);
        height: 48rem;
        overflow: auto;
        backface-visibility:hidden;
        font-size:0;
        border-left: none;
        border-right: none;
    }

    /*プロフィール比率*/

    .profile {
        width: 100%;
        height: calc(100%/3);
        margin: 0%;
        background-color: rgb(255, 255, 255);
        outline: solid 0px rgb(255, 255, 255);
    }

    .social img{
        width: 1.45rem;
        transition:0.2s all;
    }

    /*グラデーション画像をヨコ100%に*/

    .backimage {
        width: 100%;
        vertical-align: bottom;
    }
    
}

/* タテ 48rem + マージン以下の時　縦幅を100vh, ボタンを移動 */

@media screen and (max-height: calc(48rem + (50vh - 20rem))) {

    #header {
        top: 2rem;
    }
    
    .logo {
        opacity:0;
    }
    
    .mono {
        opacity:0;
    }

    .waku {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        border-width: 0px 1px 0px 1px;
    }
    
}

/* タテ 36rem以下の時　動画のサムネイルの並びを 3つ → 2つ に変更 */

@media screen and (max-width: 36rem) {
    .videos {
        width:			calc(100%/2);
    }    
}