@charset "utf-8";
/* ハンバーガーメニュースタイル------ */
.menu-btn{
    right:0px;
    top:50px;
}
.hamburger-menu .menu-btn span,
.hamburger-menu .menu-btn span::after,
.hamburger-menu .menu-btn span::before{
    width:38px; 
}
.hamburger-menu .menu-btn span::before{
    width:34px;
    bottom:8px;
}
.hamburger-menu .menu-btn span::after{
    width:29px;
    top:8px;
}

/* ハンバーガーメニュースタイルここまで------ */
/* メニュースタイル */
nav.nav-menu{
    right:2px;
    top:111px;
}
/* メニュースタイルここまで */
/* ヘッダースタイル----- */
#header .kashida-title{
    width:87%;
    top:15px;
}
#header.fixed .kashida-title{
    width:100%;
    max-width:540px;
    top:0;
}
/* ヘッダースタイルここまで----- */
/* #homeメインスタイル---------- */
main{

	padding:0;
}
#home{
    padding-top:14%;
}
#home .inner .item{
    width:50%;
}
#home .inner .item a{
    font-size: 40px;
}
/* #homeメインスタイルここまで---------- */

/* プロフィールアイテムスタイル*/
#home .item1 a{
    padding:12px;
}
#home .item1 .inner-item1,
#home .item1 .inner-item1 .inner-item2,
#home .item1 .inner-item1 .inner-item3{
    padding:12px;
}
#home .item1 .inner-item1 .inner-item3 ul li{
    padding:0;
}
/* プロフィールアイテムスタイルここまで */

/* ワークススタイル */
#home .item2 a{
	padding:7%;
}
#home .item2 a .inner-item1 .inner-item2 .keyboard .key li{
    font-size: 39%;
}
/* pcスクリーンのホバー */
#home .item2:active{
    background-image:url(../img/works-img.jpg);
}
#home .item2 a .inner-item1 .inner-item2{
	width:90%;
	height:102%;
	background-color:rgb(245,244,243);
	transform:translateY(-2%);
}
#home .item2:active a .inner-item1 .inner-item2 .pc{
    background-color:rgb(255,221,0);
}
#home .item2:active a .inner-item1 .inner-item2 .pc .works-text p{
    height:0;
}
#home .item2:active a .inner-item1 .inner-item2 .pc .web-text p{
    height:auto;
    font-size:60px;
    text-align: center;
    letter-spacing:.02em;
    transform:translateY(-11px);
    animation: funwari .6s linear infinite;
}
/* pcスクリーンのホバーここまで */
/* 真上のhoverスタイル */
#home .item2:active a .inner-item1 .inner-item2 .keyboard .key li{
    animation: katakata 1.6s  infinite;
}
#home .item2:active a .inner-item1 .inner-item2 .keyboard .key li.w2{
    animation-delay:.2s;
}
#home .item2:active a .inner-item1 .inner-item2 .keyboard .key li.w3{
    animation-delay:.4s;
}
#home .item2:active a .inner-item1 .inner-item2 .keyboard .key li.w4{
    animation-delay:.6s;
}
#home .item2:active a .inner-item1 .inner-item2 .keyboard .key li.w5{
    animation-delay:.8s;
}
#home .item2:active a .inner-item1 .inner-item2 .keyboard .key li.w6{
    animation-delay:1s;
}
#home .item2:active a .inner-item1 .inner-item2 .keyboard .key li.w7{
    animation-delay:1.2s;
}
#home .item2:active a .inner-item1 .inner-item2 .keyboard .key li.w8{
    animation-delay:1.4s;
}
/* 真上のhoverスタイルここまで */
#home .item2 a .inner-item1 .inner-item2 .keyboard .key li{
	font-size:37%;
	border-bottom:7px solid rgba(4,5,6,0.6);
	border-right:7px solid rgba(4,5,6,0.4);
    border-left:3px solid rgba(4,5,6,0.15);
    border-top:3px solid rgba(4,5,6,0.1);
}
/* ワークススタイルここまで */

/* ミュージックスタイル */
#home .item3:active #music-logo{
	height:auto;
	margin:auto auto;
}
#home .item3:active #music-text{
	height:0;
}
#home .item3:active a .inner-item1 .inner-item2 .inner-item3{
	animation:play 6s linear infinite;
}
@keyframes play{
	0%{
		transform:rotate(0);
	}
	100%{
		transform:rotate(360deg)
	}
}
#home .item3:active a .inner-item1,
#home .item3:active a .inner-item1 .inner-item2,
#music-logo{
	animation:hazumu .7s infinite;
}
/* ミュージックスタイル */
/* グラフィックスタイル */
#home .item4:active .inner-item1 .inner-item2 .inner-item3{
    animation-duration:4s;
}
/* グラフィックスタイル */
/* 空欄スタイル */
#home .inner .item5:active{
    transform:translate(0,0);
    box-shadow:none;
    margin-bottom:-2px;
    border-left:1px solid rgb(4,5,6);
}
#home .item5:active .blank-item1 .cat-img img{  
    animation:fuyu 2s infinite;
}
#home .item5:active .blank-item1 .cat-img{
    width:83%;
    height:83%;
    border-radius:50%;
}
#home .item5:active .blank-item1 .cat-img img{
    filter:grayscale(0);
    border-radius:50%;
}
#home .item5:active .blank-item1::after{
    bottom:-86%;
    left:-86%;
}
/* 空欄スタイルここまで */
/* コンタクトスタイル */
#home .item6 .mail-text a p{
    font-size:25px;
}
/* アクティブイベント */
#home .item6 .mail-text:active{
    background-color:rgb(4,5,6);
}
#home .item6 .mail-text:active a p{
    color:rgb(245,244,243);
    text-decoration:underline;
}
/* アクティブここまで */
#home .item6 .sns-icon .inner-item1 .inner-wrap-icon li{
    width:30px;
    height:100%;
    transition:100ms;
}
/* アクティブイベント */
#home .item6 .sns-icon:active{
    background-color:rgb(4,5,6);
}
#home .item6 .sns-icon:active .inner-item1 .inner-wrap-icon li a img{
    filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
}
/* アクティブイベントここまで */
/* コンタクトスタイルここまで */

/* #another-mainスタイル---------------------- */
#another-main .inner .inner2{
    max-height:915px;
}
/* #another-mainスタイルここまで---------------------- */