@charset "UTF-8";


body{
overflow: hidden;
}
#work,#profile,#art{
height: 0px;
margin-left: -100px;
}
article{
background-color: rgba(161,161,161,1.00);
width: 90vw;
margin: 3vh auto 200px auto;
padding: 8px;
box-shadow: 7px 7px 0px 0px rgba(0,32,35,0.80);
position: relative;
z-index: 2;
}
article h2{
display: flex;
color: rgba(22,22,22,1.00);
line-height: 1.2;
font-size: 1.5rem;
border: solid 2px rgba(22,22,22,1.00);
justify-content: flex-start;
}
article h2 a{
text-decoration: none;
color: rgba(22,22,22,1.00);
padding-right: 5px;
padding-left: 5px;
}

article h2 p a:hover{
background-color: blue;
}
article h2 p.batu a{
color: rgba(22,22,22,1.00);
cursor: auto;
}
article h2 p{
color:rgba(3,255,28,1.00);
}
/*
article h8{
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
}
*/


article section{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 75vh;
overflow: scroll;
border-left: solid 2px rgba(22,22,22,1.00);
border-bottom: solid 2px rgba(22,22,22,1.00);
border-right: solid 2px rgba(22,22,22,1.00);
background-color: rgba(234,233,233,1.00);
}
article section a{
text-decoration: none;
}



article h2 p:nth-of-type(1),p:nth-of-type(2){
padding-right: 5px;
padding-left: 5px;
}
article h2 p:nth-of-type(2){
border-right: solid 2px rgba(22,22,22,1.00);
border-left: solid 2px rgba(22,22,22,1.00);
}
article h8{
border-right: solid 2px rgba(22,22,22,1.00);
}





article section div#profile2{
width:100%;
padding: 0;
margin: 0 0 50px 0;
}
article section div#profile2 h3{
text-align: left;
padding-left: 8px;
line-height: 1;
margin: 0 0 50px 0;
}
article section div#profile2 h4{
font-size: 2.5rem;
font-weight: 700;
font-family: serif;
margin: 0 0 10px 0;
}
article section div#profile2 p{
font-size: 1.5rem;
font-style: italic;
font-family: serif;
line-height: 1.3;
}











/*タブレット縦（portrait）ここから----------------------------*/
/*============================================
横幅768px以上
想定端末　:iPad9.7のportrait
============================================
*/
@media screen and (min-width:768px){
article h2{
font-size: 2rem;
}
article section{
height: 75vh;
}


article:nth-of-type(1) section{
align-items: flex-start;
}

article:nth-of-type(1) section div#profile2{
width: 600px;
}
article:nth-of-type(1) section div#profile2 h5{
display: flex;
}
article section div#profile2 h5 p:nth-of-type(1){
width: 500px;
/*とりあえず*/
height: 485px;
border-left: solid 2px #D8616D;
border-right: solid 2px #D8616D;
border-bottom: solid 2px #D8616D;
padding: 25px;
}

article section div h3{
border: solid 2px #D8616D;
display: block;
text-align: center;
line-height: 1.8;
padding: 8px 5px 5px 5px;
font-size: 1.8rem;
}
article:nth-of-type(1) section div figure{
border-left: solid 2px #D8616D;
border-right: solid 2px #D8616D;
border-top: solid 2px #D8616D;
border-bottom: none;
margin-top: 2px;
}
article section div:nth-of-type(1) figure img{
width: 226px;
}
article section div#profile2 h5 ul{
width: 261px;
}

}

/*============================================
横幅1024px以上
想定端末　:iPadproのportrait
============================================
*/
@media screen and (min-width:1024px){
article h2{
font-size: 2.5rem;
}
article section div#profile2 h5 p:nth-of-type(1){

padding: 40px 60px;
font-size: 1.4rem;
}

}




/*============================================
横幅1024px以上
想定端末:PC
============================================
*/
@media screen and (min-width:1024px) {

article:nth-of-type(1) section{
align-items: flex-start;
}

article:nth-of-type(1) section div#profile2{
width: 800px;
}









}


/*============================================
横幅1366px以上
想定端末:PC
============================================
*/
@media screen and (min-width:1440px) {
article section div{
margin-top: 7vh;
}

}

/*============================================
横幅1800px以上
想定端末:PC
============================================
*/
@media screen and (min-width:1800px) {


}

















body{
background-color: rgba(83,50,254,1.00);
font-family: 'DotGothic16', sans-serif;
}
nav{
position: fixed;
top: 0;
right: auto;
bottom: auto;
left: 0;
z-index: 1;
height: 100vh;
width: 100vw;
background-size: cover;
}
nav img{
height: 100%;
width: 100%;
}
aside{
position: fixed;
top: 0px;
right: auto;
bottom: auto;
left: 0px;
z-index: 0;
font-size: 1rem;
display: block;
width: 100vw;
height: 40px;
}
aside p{
height: 35px;
background-color: rgba(208,208,207,1.00);
border-bottom: solid 3px rgba(1,1,23,0.70);
color: rgba(1,1,23,0.87);
text-align: end;
margin-right: -1000px;
line-height: 2.3;
}
header{
position: fixed;
top: 0px;
right: auto;
bottom: auto;
left: 0px;
z-index: 2;
display: flex;
padding-left: 5px;
}
header figure{
padding-top: 5px;
padding-left: 15px;
}
header figure img{
width: 25px;
height: 25px;
margin-top: -3px;
}
header a{
font-size: 1.5rem;
padding-top: 5px;
padding-right: 15px;
text-decoration: none;
color: rgba(20,20,20,1.00);
}
header p.current{
background-color: rgba(16,239,0,1.00);
}
header p:hover{
background-color: rgba(16,239,0,1.00);
}
header p{
padding-top: 6px;
padding-bottom: 9px;
}
article h2 p.batu a:hover,article h2 p.batu a:active{
background-color: rgba(0,0,0,0.00);
}


/*
=============================================
横幅360px以上
想定端末　:iPhon12のportrait
=============================================*/
@media screen and (min-width:390px){
header a{
font-size: 1.8rem;

}
header p{
padding-top: 6px;
padding-bottom: 6px;
}

}

/*タブレット縦（portrait）ここから----------------------------*/
/*============================================
横幅768px以上
想定端末　:iPad9.7のportrait
============================================
*/
@media screen and (min-width:768px){

}



/*PCここから マウスあり　-----------------------------------------*/
/*============================================
横幅1366px以上
想定端末:PC
============================================
*/
@media screen and (min-width:768px) {

aside{
position: fixed;
top: 0px;
right: auto;
bottom: auto;
left: 0px;
z-index: 0;
font-size: 2rem;
display: block;
width: 100vw;
height: 40px;
}
aside p{
height: 40px;
background-color: rgba(208,208,207,1.00);
border-bottom: solid 3px rgba(1,1,23,0.70);
color: rgba(1,1,23,0.87);
text-align: end;
margin-right: 0;
padding-right: 33px;
line-height: 2.3;
}
header{
position: fixed;
top: 0px;
right: auto;
bottom: auto;
left: 0px;
z-index: 2;
display: flex;
padding-left: 20px;
}
header figure{
padding-top: 5px;
padding-left: 15px;
}
header figure img{
width: 25px;
height: 25px;
margin-top: -3px;
}
header a{
font-size: 2.5rem;
padding-top: 5px;
padding-right: 15px;
text-decoration: none;
color: rgba(20,20,20,1.00);
}
header p.current{
/*color: blue;*/
}
header p:hover{
background-color: rgba(16,239,0,1.00);
}
header p{
padding-top: 5px;
padding-bottom: 5px;
}


}