@charset "utf-8";
/* 共通スタイル--------- */
body{
	width:100%;
    background-color:rgb(245,244,243);
	color:rgb(4,5,6);
}
/* ヘッダースタイル----- */
#header{
    width:100%;
    height:3px;
    text-align: center;
}
#header .kashida-title{
    width:100%;
    max-width: 980px;
    position: fixed;
    top:23px;
    left:50%;
    transform: translateX(-50%);
    transition: .3s;
    z-index: 50;
}
#header .kashida-title h1{
    width:100%;
	max-width: 980px;
}
#header .kashida-title h1 img{
    width:100%;
}
#header.fixed .kashida-title{
    width:100%;
    max-width:630px;
    top:0;
}
/* ハンバーガーメニュースタイル------ */
.menu-btn{
    position:fixed;
    top:70px;
    right:35px;
    /*position:fixed;が必須*/
    width:50px;
    height:50px;
    display:flex;
    justify-content: center;
    align-items: center;
    z-index: 90;
}
.hamburger-menu .menu-btn span,
.hamburger-menu .menu-btn span::after,
.hamburger-menu .menu-btn span::before{
    content: "";
    display:block;
    background-color:rgb(4,5,6);/**/
    width:45px;
    height:2px;
    border-radius: 20px;
    position:absolute;
    transition:300ms;
}
.hamburger-menu .menu-btn span::before{
    width:39px;
    bottom:9px;
}
.hamburger-menu .menu-btn span::after{
    width:31px;
    top:9px;
}
#menu-btn-check:checked ~ .menu-btn span{
    background-color: rgba(255,255,255,0);
}
#menu-btn-check:checked ~ .menu-btn span::before{
    bottom:0;
    width:33px;
    transform:rotate(-45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after{
    top:0;  
    width:33px;
    transform:rotate(45deg);
}
#menu-btn-check{
    display:none;
}
/* hamburger menuここまで */
/* メニュースタイル */
nav.nav-menu{
    width:300px;
    height:0;
    /* position:fixedは必須*/
    position:fixed;
    top:111px;
    right:0;
    z-index: 70;
    transition: 300ms;
    overflow-y:hidden;
	background-color:rgb(245,244,243);
}
nav.nav-menu .ul-menu{
    height:70%;
}
nav.nav-menu ul li{
    text-align: center;
    padding-top:30px;
    font-size:28px;
    font-weight: bold;
	color:rgb(4,5,6);
    letter-spacing:0.07em;
}
nav.nav-menu .sub-menu{
    height:30%;
    border-top:1px solid rgb(4,5,6);
}
nav.nav-menu .sub-menu .mail-menu{
    height:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom:1px solid rgb(4,5,6);
}
nav.nav-menu .sub-menu .mail-menu p{
    font-size: 18px;
    text-align: center;
    padding:5px 0 5px 1.6em;
    background:url(../img/contact-icon.png) no-repeat left center/ 1.4em;
}
nav.nav-menu .sub-menu .sns-menu{
    height:50%;
    display: flex;
    justify-content: center;
    align-items: center;
	padding:5px;
}
nav.nav-menu .sub-menu .sns-menu ul{
	display:flex;
    justify-content:space-around;
}
nav.nav-menu .sub-menu .sns-menu .item{
	padding:10px;
	display:flex;
	justify-content:center;
	align-items:center;
	width:16%;
}
nav.nav-menu .sub-menu .sns-menu .item a{
	display:flex;
	justify-content:center;
	align-items:center;
}
#menu-btn-check:checked ~ .nav-menu{
    height: 490px;
    border:1px solid rgb(4,5,6);
    transition: 300ms;
}
/* ハンバーガーメニュースタイルここまで------ */
/* ヘッダースタイルここまで----- */

/* メインスタイル-------- */
main{
    width:100%;
	max-width:1450px;
    margin:0 auto;
	padding:0 0 0 5px;
}
main div.inner{
    width:100%;
}
/* メインスタイル-------- */

/* フッタースタイル------- */
footer{
    width:100%;
    height:150px;
    border-top:2px solid rgb(4,5,6);/**/
}
footer .inner-footer{
    width:100%;
    height:100%;
}
footer .inner-footer .footer-address{
    height:50%;
    border-bottom:2px solid rgb(4,5,6);/**/
    display:flex;
    justify-content: center;
    align-items: center;
}
footer .inner-footer .footer-address a p{
    font-size: 23px;
    letter-spacing:0.1em;
    text-align: center;
    padding:5px 0 5px 1.9em;
    background:url(../img/contact-icon.png) no-repeat left center/ 1.4em;
}
footer .inner-footer .footer-sns{
    height:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}
footer .inner-footer .footer-sns ul{
    width:960px;
    display:flex;
    justify-content: space-around;
}
footer .inner-footer .footer-sns ul li{
    width:35px;
}
/* フッタースタイルここまで------- */
/* 共通スタイルここまで--------- */


/* #homeメインスタイル---------- */
#home{
    padding-top: 152px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#home .inner{
    width:100%;
    display: flex;
    flex-wrap: wrap;
    border-left:1px solid rgb(4,5,6);
}
#home .inner .item{
    width:calc(100%/3);
    aspect-ratio:1/1;
    border-top:2px solid rgb(4,5,6);
    border-left:1px solid rgb(4,5,6);/**/
    border-right:2px solid rgb(4,5,6);/**/
    margin-right:-1px;/**/
    transition:150ms;
}
#home .inner .item:hover{
    transform:translate(-4px,-3px);
    box-shadow:4px 3px 0 rgb(4,5,6);
    border:2px solid rgb(4,5,6);
}
#home .inner .item a{
    display: block;
    width:100%;
    height: 100%;
    font-size: 44px;
}
/* プロフィールアイテムスタイル */
#home .item1{
    background:url(../img/profile-img.jpg);
    background-size:cover;
    background-position:center center;
}
#home .item1 a{
    padding:15px;
    font-weight:bold;
    background-color:rgb(245,244,243);
}
#home .item1 .inner-item1,
#home .item1 .inner-item1 .inner-item2,
#home .item1 .inner-item1 .inner-item3{
    border:1px solid;
    display:block;
    aspect-ratio:1/1;
    padding:15px;
    background-color:rgb(245,244,243);
    transition:.6s;
}
#home .item1:hover a,
#home .item1:hover .inner-item1,
#home .item1:hover .inner-item2{
    background-color:rgba(255,255,255,0);
    border:0px none;
}
#home .item1:hover .inner-item3{
    border-radius: 50%;
}
#home .item1 .inner-item1 .inner-item3{
    display:flex;
    justify-content:center;
    align-items:center;
}
#home .item1 .inner-item1 .inner-item3 ul{
    display:flex;
}
#home .item1 .inner-item1 .inner-item3 ul li{
    padding:1px;
    animation:hazumu 420ms infinite;
}
#home .item1 .inner-item1 .inner-item3 ul li.r{
    animation-delay:70ms;
}
#home .item1 .inner-item1 .inner-item3 ul li.o{
    animation-delay:140ms;
}
#home .item1 .inner-item1 .inner-item3 ul li.f{
    animation-delay:210ms;
}
#home .item1 .inner-item1 .inner-item3 ul li.i{
    animation-delay:280ms;
}
#home .item1 .inner-item1 .inner-item3 ul li.l{
    animation-delay:350ms;
}
#home .item1 .inner-item1 .inner-item3 ul li.e{
    animation-delay:420ms;
}
@keyframes hazumu{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-4px);}
}
/* プロフィールアイテムスタイルここまで */
/* ワークススタイル */
#home .item2{
	background-color:rgb(255,221,0);
    transition:200ms;
}
#home .item2 a{
	padding:9%;
}
#home .item2 a .inner-item1{
	width:100%;
	height:100%;
    border:1px solid rgb(4,5,6);
	background-color:rgb(245,244,243);
	display:flex;
	justify-content:center;
	align-items:center;
	
}
#home .item2 a .inner-item1 .inner-item2{
	width:90%;
	height:102%;
	background-color:rgb(245,244,243);
	transform:translateY(-1%);
}
#home .item2 a .inner-item1 .inner-item2 .pc{
	width:100%;
	height:67%;
	border:2px solid rgb(4,5,6);
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:rgb(4,5,6);
    transition:300ms;
}
#home .item2 a .inner-item1 .inner-item2 .pc .works-text p{
    color:rgb(245,244,243);
    letter-spacing:0.03em;
    overflow:hidden;
    transition:300ms;
}
#home .item2 a .inner-item1 .inner-item2 .pc .web-text p{
    overflow:hidden;
    height:0;
    transition:300ms;
}
/* pcスクリーンのホバー */
#home .item2:hover{
    background-image:url(../img/works-img.jpg);
}
#home .item2:hover a .inner-item1 .inner-item2 .pc{
    background-color:rgb(255,221,0);
}
#home .item2:hover a .inner-item1 .inner-item2 .pc .works-text p{
    height:0;
}
#home .item2:hover a .inner-item1 .inner-item2 .pc .web-text p{
    height:auto;
    font-size:65px;
    text-align: center;
    letter-spacing:.02em;
    transform:translateY(-11px);
    animation: funwari .6s linear infinite;
}
@keyframes funwari{
    0%,100%{transform:translateY(-7px);}
    50%{transform:translateY(-16px);}
}
/* pcスクリーンのホバーここまで */
#home .item2 a .inner-item1 .inner-item2 .keyboard{
	width:100%;
	height:33%;
	padding:6%;
}
#home .item2 a .inner-item1 .inner-item2 .keyboard .key{
	width:100%;
	height:100%;
	display:flex;
	flex-wrap:wrap;
    overflow: hidden;
}
#home .item2 a .inner-item1 .inner-item2 .keyboard .key li{
	flex-basis:25%;
    height:50%;
	font-size:42%;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:rgb(245,244,243);
	border-bottom:8px solid rgba(4,5,6,0.6);
	border-right:8px solid rgba(4,5,6,0.4);
    border-left:4px solid rgba(4,5,6,0.15);
    border-top:4px solid rgba(4,5,6,0.1);
	animation:katakata 3.2s linear infinite;
}
#home .item2 a .inner-item1 .inner-item2 .keyboard .key li.w2{
    animation-delay:0.4s;
}
#home .item2 a .inner-item1 .inner-item2 .keyboard .key li.w3{
    animation-delay:0.10s;
}
#home .item2 a .inner-item1 .inner-item2 .keyboard .key li.w4{
    animation-delay:1.2s;
}
#home .item2 a .inner-item1 .inner-item2 .keyboard .key li.w5{
    animation-delay:1.6s;
}
#home .item2 a .inner-item1 .inner-item2 .keyboard .key li.w6{
    animation-delay:2.1s;
}
#home .item2 a .inner-item1 .inner-item2 .keyboard .key li.w7{
    animation-delay:2.2s;
}
#home .item2 a .inner-item1 .inner-item2 .keyboard .key li.w8{
    animation-delay:2.5s;
}
/* 真上のhoverスタイル */
#home .item2:hover a .inner-item1 .inner-item2 .keyboard .key li{
    animation: katakata .8s  infinite;
}
#home .item2:hover a .inner-item1 .inner-item2 .keyboard .key li.w2{
    animation-delay:.1s;
}
#home .item2:hover a .inner-item1 .inner-item2 .keyboard .key li.w3{
    animation-delay:.2s;
}
#home .item2:hover a .inner-item1 .inner-item2 .keyboard .key li.w4{
    animation-delay:.3s;
}
#home .item2:hover a .inner-item1 .inner-item2 .keyboard .key li.w5{
    animation-delay:.4s;
}
#home .item2:hover a .inner-item1 .inner-item2 .keyboard .key li.w6{
    animation-delay:.5s;
}
#home .item2:hover a .inner-item1 .inner-item2 .keyboard .key li.w7{
    animation-delay:.6s;
}
#home .item2:hover a .inner-item1 .inner-item2 .keyboard .key li.w8{
    animation-delay:.7s;
}
/* 真上のhoverスタイルここまで */

@keyframes katakata{
	0%,100%{
        transform:translateY(0);
	}
	5%{
        transform: translateY(5px);
	}
    7%{
        transform:translateY(0);
    }
}
#home .item2 a .inner-item1 .inner-item2 .keyboard .key li p{
	font-family:'Edu SA Beginner',cursive,"Segoe Script","Skia-Regular_Condensed",serif;
}
/* ワークススタイルここまで */
/* ミュージックスタイル */
#home .item3{
    background-color:rgb(245,244,243);	
}
#home .item3 a{
	padding:5%;
}
#home .item3 a .inner-item1{
	width:100%;
	height:100%;
	border-radius:50%;
	background-color:rgb(4,5,6);
	display:flex;
	justify-content:center;
	align-items:center;
}
#home .item3 a .inner-item1 .inner-item2{
	width:55%;
	height:55%;
	background-color:rgb(245,244,243);
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
}
#home .item3 a .inner-item1 .inner-item2 .inner-item3{
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
#music-logo{
	width:55%;
	height:0;
	overflow:hidden;
}
#music-text{
	overflow:hidden;
	display:block;
	text-align:center;
}
#home .item3:hover #music-logo{
	height:auto;
	margin:auto auto;
}
#home .item3:hover #music-text{
	height:0;
}
#home .item3:hover a .inner-item1 .inner-item2 .inner-item3{
	animation:play 6s linear infinite;
}
@keyframes play{
	0%{
		transform:rotate(0);
	}
	100%{
		transform:rotate(360deg)
	}
}
#home .item3:hover a .inner-item1,
#home .item3:hover a .inner-item1 .inner-item2,
#music-logo{
	animation:hazumu .7s infinite;
}
/* ミュージックスタイルここまで */

/* グラフィックスタイル */
#home .item4 .inner-item1 li{
    writing-mode:vertical-rl;
    padding:10px 0;
}
#home .inner .item4{
    position:relative;
    background-color:rgb(245,244,243);
}
#home .inner .item4 a{
    display:flex;
    justify-content:center;
    align-items:center;
}
#home .item4 .inner-item1{
    width:70%;
    height:70%;
    background-color:rgb(255,221,0);
}
#home .item4 .inner-item1 .inner-item2{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    height:100%;
    border-left:1px solid rgb(4,5,6);
    border-right:1px solid rgb(4,5,6);
    box-shadow:2px 0 2px rgba(54,52,52,0.7);
    width:20%;
    z-index:20;
    background-color:rgb(245,244,243);
}
#home .item4 .inner-item1 .inner-item2 .inner-item3{
    width:100%;
    height:100%;
    background:url(../img/graphic-logo.png) repeat-y 50% 0;
    background-size:43%;
    animation:slideGraph 15s linear infinite;
    animation-play-state:running;
}
@keyframes slideGraph{
    0%{
        background-position:50% 0;
    }
    100%{
        background-position:50% 300%;
    }
}
#home .item4:hover .inner-item1 .inner-item2 .inner-item3{
    animation-duration:4s;
}
/* グラフィックスタイルここまで */
 
/* 空欄スタイル */
#home .inner .item5{
    transition:none;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    z-index:5;
    position:relative;
}
#home .inner .item5:hover{
    transform:translate(0,0);
    box-shadow:none;
    margin-bottom:-2px;
    border-left:1px solid rgb(4,5,6);
}
#home .item5 .blank-item1{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0;
}

#home .item5 .blank-item1::after{
    content:"";
    display: block;
    width:91%;
    height:91%;
    border-radius: 50%;
    background-color:rgb(255,221,0);
    position:absolute;
    bottom:-38%;
    left:-38%;
    transition:.7s;
    animation:fuyu 2s infinite;
}
#home .item5 .blank-item1 .cat-img{
    width:50%;
    height:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    overflow:hidden;
    transition:.2s;
}
#home .item5 .blank-item1 .cat-img img{
    filter:grayscale(100%);
    min-width:350px;
    min-height:350px;
    border-radius: 50%;
    transition:.2s;
}
/* ホバースタイル */
#home .item5:hover .blank-item1 .cat-img img{  
    animation:fuyu 2s infinite;
}
@keyframes fuyu{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
}
#home .item5:hover .blank-item1 .cat-img{
    width:83%;
    height:83%;
    border-radius:50%;
}
#home .item5:hover .blank-item1 .cat-img img{
    filter:grayscale(0);
    border-radius:50%;
}
#home .item5:hover .blank-item1::after{
    bottom:-86%;
    left:-86%;
}
/* ホバースタイルここまで */
/* 空欄スタイルここまで */

/* コンタクトスタイル */
#home .item6{
    background-color:rgb(245,244,243);
    z-index: 39;
}
#home .item6 .mail-text{
    width:100%;
    height:50%;
    background-color:rgb(255,221,0);
	overflow:hidden;
}
/* ホバーイベント */
#home .item6 .mail-text:hover{
    background-color:rgb(4,5,6);
}
#home .item6 .mail-text:hover a p{
    color:rgb(245,244,243);
    text-decoration:underline;
/* ホバーイベントここまで */

}
#home .item6 .mail-text a{
    display: flex;
    justify-content:center;
    align-items:center;
}
#home .item6 .mail-text a p{
    display:inline-block;
    width:100%;
    text-align: center;
    color:rgb(4,5,6);
    font-size:25px;
}
#home .item6 .sns-icon{
    width:100%;
    height:50%;
    border-top:2px solid rgb(4,5,6);
    background-color:rgb(245,244,243);
    z-index:40;
}
/* ホバーイベント */
#home .item6 .sns-icon:hover{
    background-color:rgb(4,5,6);
}
#home .item6 .sns-icon:hover .inner-item1 .inner-wrap-icon li a img{
    filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
}
/* ホバーイベントここまで */

#home .item6 .inner-item1{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
#home .item6 .inner-item1 .inner-wrap-icon{
    width:100%;
    display:flex;
    justify-content:space-around;
}
#home .item6 .sns-icon .inner-item1 .inner-wrap-icon li{
    width:37px;
    height:100%;
    transition:100ms;
}
/* コンタクトスタイルここまで */
/* #homeメインスタイルここまで---------- */

/* #anotherスタイル---------- */
#another-body #header .kashida-title{
    width:100%;
    max-width:630px;
    top:0;
    margin:0 auto;
}
#another-body footer .inner-footer .footer-address p{
    font-size:20px;
}
#another-main{
    position:fixed;
    width:100%;
    height:100%;
    max-width:none;
    padding:0;
    margin: 0;
    display:flex;
    justify-content:center;
    align-items:center;
}
#another-main .inner{
    border-right:1px solid rgb(4,5,6);
    border-left:1px solid rgb(4,5,6);
    background:url(../img/profile-bg.jpg) no-repeat center center;
    background-size:cover;
    width:100%;
    max-width:1054px;
    height: 100%;
    display: flex;
    justify-content:center;
    align-items:center;
}
#another-main .inner .inner2{
    background-color:rgb(4,5,6);
    border-radius:8px;
    width:100%;
    max-width:600px;
    height:100%;
    max-height:790px;
    padding:15px;
}
#another-main .inner .screen-sumaho{
    width:100%;
    height:100%;
    background-color:rgb(245,244,243);
    overflow: scroll;
}
#another-main .inner .screen-sumaho::-webkit-scrollbar{
    display: none;
}
#another-main .screen-sumaho h2{
    width:50%;
    margin:0 auto;
    padding-top:55px;
    animation: screen-sumaho-h2 1s linear infinite;
    z-index: 100;
}
@keyframes screen-sumaho-h2{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-5px);}
}
/* #anotherスタイルここまで------- */

/* #profileスタイル */
#profile .my-icon{
    width:25%;
    aspect-ratio:1/1;
    border-radius:50%;
    border:8px solid rgb(4,5,6);
    overflow: hidden;
    margin-left:15px;
    transition:200ms;
}
#profile .my-icon img{
    filter:grayscale(100%);
    border-radius:50%;
}
#profile .my-icon:hover,
#profile .my-icon:active{
    width:27%;
}
#profile .my-icon:hover img,
#profile .my-icon:active img{
    filter:grayscale(0);
}
#profile .id-content h3{
    font-size: 25px;
    font-weight:bold;
    padding:15px 26px 10px;
}
#profile .id-content p{
    padding:0 26px 15px;
    font-family:'Reggae One', cursive,serif;
    font-weight:bold;
}
#profile .prof-sns-icon{
    width:100%;
    display: flex;
}
#profile .prof-insta,
#profile .prof-mail{
    background:url(../img/insta-icon.png) no-repeat center 12px;
    background-size: 2em;
    padding:2.9em 0 12px;
    border:3px solid rgb(4,5,6);
    text-align: center;
    width:80px;
    font-weight: bold;
    border-radius:10px;
    margin-left:15px;
    box-shadow: 4px 4px 1px rgb(4,5,6);
    transition:.2s;
	font-size:13px;
}
#profile .prof-mail{
    background: url(../img/contact-icon.png) no-repeat center 10px;
    background-size:2em;
}
#profile .prof-insta:hover,
#profile .prof-mail:hover{
    transform:translate(4px,4px);
    box-shadow:none;
}
#profile .id-middle{
    background-color:rgb(4,5,6);
    color:rgb(245,244,243);
    padding:20px 23px;
    line-height:1.6em;
    margin-top:27px;
    font-size:15px;
    position:relative;
}
#profile .id-bottom{
    padding:23px 15px 23px;
    line-height:1.4em;
    font-size:15px;
}
#profile .id-bottom div{
    padding:6px 0;
}
#profile .id-bottom .th{
    text-decoration:underline;
    text-decoration-thickness: 3px;
    text-decoration-color:rgb(255,221,0);
    font-weight:bold;
    font-size:16px;
    padding-bottom:1px;
}
/* #profileスタイルここまで---------- */

/* worksスタイル---------- */
#works{
    padding:0 0 30px;
}
#works .toggle-item{
    width:90%;
    border:3px solid rgb(4,5,6);
    margin:49px auto 0;
    display: flex;
    box-shadow:6px 6px 1px rgb(4,5,6);
    transition:200ms;
    line-height:1.3;
    position:relative;
}
#works .toggle-item #can-click{
    position:absolute;
    top:-11px;
    left:-11px;
}
#works .toggle-item:hover{
    transform:translateY(2px);
    box-shadow:4px 4px 1px rgb(4,5,6);
    cursor:pointer;
}
#works .toggle-item:active{
    transform:translateY(6px);
    box-shadow:none;
}
#works .works-date{
    flex-basis:30%;
    display:flex;
    justify-content: center;
    align-items: center;
    border-right:3px solid rgb(4,5,6);
    font-size: 19px;
}
#works .works-date p{
    padding:8px;
    background-color:rgb(245,244,243);
    font-weight:bold;
}
#works .works-content{
    flex-basis:70%;
    height:100%;
}
#works .works-content .works-title{
    height:40%;
    padding:15px 7px 8px;
    display:flex;
    align-items:center;
}
#works .works-content .works-title p{
    text-decoration:underline;
    font-weight: bold;
    text-decoration-thickness: 3px;
    text-decoration-color:rgb(255,221,0);
}
#works .works-content .works-detail{
    height:60%;
    padding:3px 7px 15px;
}
#works .toggle-content{
    width:100%;
    padding:30px 0 20px;
}

#works .toggle-content .pc-and-mobile{
    display:flex;
    width:100%;
	padding:0 5px;
}
#works .pc-screen{
    flex-basis:78%;
}
#works .mobile-screen{
    flex-basis:22%;
    position:relative
}
#works .mobile-screen img{
    position:absolute;
    bottom:0;
    right:0;
}
#works .toggle-content .pointer{
    display:flex;
    justify-content:center;
    align-items:center;
    padding-bottom:20px;
}
#works .toggle-content .pointer p{
    font-size: 20px;
    animation: pointer 1s linear infinite;
}
@keyframes pointer{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(6px);}
}
#works .toggle-content .toggle-content-text h3{
    font-size: 19px;
    font-weight:bold;
    display: block;
    padding:19px 11px 0;
}
#works .toggle-content .toggle-content-text p{
	padding:7px 11px 11px;
	font-size:14px;
	line-height:1.5em;
}
#works .toggle-content .link-button{
    padding-top:18px;
    display:flex;
    justify-content:center;
    align-items:center;
}
#works .toggle-content .link-button p{
    background-color:rgb(242, 133, 189);
    color:rgb(245,244,243);
    margin:0 auto;
    width:120px;
    padding:12px 0;
    text-align: center;
    transition:200ms;
}
#works .toggle-content .link-button p:hover{
    background-color:rgb(4,5,6);
}
/* worksスタイルここまで---------- */
/* musicスタイル---------- */
#music .truck-list{
    width:100%;
    padding-top:25px;
}
#music .truck-list ul{
    width:100%;
    display:flex;
    flex-wrap:wrap;
}
#music .truck-list ul li{
    flex-basis:50%;
    aspect-ratio:1/1;
    filter:grayscale(100%);
    transition:200ms;
}
#music .truck-list ul li.float{
    float:left;
}
#music .truck-list ul li:hover{
    filter:grayscale(0);
}
#music .truck-list ul li:active{
    filter:grayscale(0);
}
/* musicスタイルここまで---------- */
/* graphicスタイル------ */
#graphic .graphic-list{
    padding:25px 0 25px;
    width:100%;
}
#graphic .graphic-item{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    padding-left:2px;
    padding-right:2px;
}
#graphic .graphic-item li{
    flex-basis:calc(100%/3);
    aspect-ratio: 1/1;
    padding:2px;
}
#graphic .graphic-item li a{
    display: block;
    width:100%;
    height:100%;
    background-position:top left;
    background-size:cover;
}
#graphic .graphic-item li .item01{
    background-image:url(../img/graphic/IMG_4405.jpg);
}
#graphic .graphic-item li .item02{
    background-image:url(../img/graphic/IMG_4407.jpg);
}
/* graphicスタイルここまで------ */

/* #errorスタイル---------- */
#error-body{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#error-body footer{
    position:fixed;
    bottom:0;
    left:0;
}
#error{
    width:100%;
    height:100%;
    display: flex;
    justify-content:center;
    align-items:center;
}
#error .inner-error h2{
    font-size: 23px;
    display: block;
    text-align: center;
}
#error .inner-error p{
    font-size:15px;
    display: block;
    text-align: center;
    padding:5px;
}
#error .inner-error ul{
    display: flex;
    justify-content:center;
}
#error .inner-error ul li{
    padding:12px;
}
#error .inner-error ul li a{
    font-size: 16px;
    font-weight:bold;
}
/* #errorスタイルここまで---------- */