@charset "UTF-8";
/* CSS Document */

p { color: #4e4e4e;
	font-family: 'Prompt', sans-serif;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-style: normal;
	font-size: 0.8em;
  }

.jp {font-size: 0.7em;
	 line-height: 1.7em;
	}

h4 {color: #4e4e4e;
	font-family: 'Prompt', sans-serif;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-style: normal;
	font-weight: normal;
	margin-top: 2em;
	margin-bottom: 2em;
   }

li { list-style-type: none
   }
#site-logo { padding-bottom: 2em;
		   }

a { text-decoration: none;
  }



/*layout*/

#contents { background-color:#ffffff;
			display: flex;
			align-items: center;
			padding: 0em;
			position: absolute;
        	top: 50%;
        	left: 50%;
        	margin-right: -50%;
       	 	transform: translate(-50%, -50%)
         }
@media all and (max-width:1023px){
	#contents {height: 100%;
			  }					 }


.switch { position: fixed;
		  right: 20px;
		  top: 40px;
		  display: flex;
		  flex-direction: row;
		  justify-content: space-around;
		}

	
	
	
/*home-side*/

#side { width:20vw;
		flex-direction: column;
		text-align: center;
		line-height: 2em;
		justify-content: spacse-between;
		font-size: 0.5em;
}


#menue {padding-top: 5em;
		padding-bottom: 10em;
		line-height: 4em;
	   }

@media all and (max-width:1023px){
	#side {display: none;
			 }			   		 }

@media all and (min-width:1024px){
	#navArea {display: none;
			 }			   		 }

@media all and (max-width:1023px){
	#navArea #site-logo img { width:210px;
			 }			   		 }

.inner {text-align: center;
	   }



/*home-main*/

#main {  width: 75vw;
      }

#portfolio { display: flex;
			 align-items: center;
			 justify-content: space-around;
		   }







/*portfolio*/
	
#portfolio .photo { width: 55vw;
					vertical-align: middle;
	   }

@media all and (max-width:1023px){
	#portfolio {flex-flow: column;
			  }					 }

@media all and (max-width:1023px) and (orientation: portrait){
	#portfolio .photo { width: 80vw;
			  }					 }

@media all and (max-height:450px){
	#portfolio .photo { width:40vw;
				       
			  		   }		 }


#portfolio .photo-info { width: 15vw;
			}

#portfolio .photo-info p { font-size: 0.8em;
						   text-align: center;
						 }


/*bio*/

#bio { display:flex;
	   justify-content: space-around;
	   align-items: center;
	 }

@media all and (max-width:1023px){
	#bio {flex-flow: column;
		  justify-content: space-around;
		  align-items: center;
		
			  }					 }

.sentence { width: 40vw;
   		  }

@media all and (max-width:800px){
	#bio .sentence { width: 70vw;
			  }					 }
@media all and (max-width:600px){
	#bio picture img { width: 40vw;
			  }					 }
@media all and (max-height :780px){
	#bio picture img { width: 20vw;
			  }					 }

/*news*/

#news {display: flex;
	   justify-content: space-around;
	   align-items:center;
      }












/*============
startfade
=============*/

.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}


/*============
accordion
=============*/

.acd-check{
  display: none;
}
.acd-label{
  display: block;
  margin-bottom: 1px;
  padding: 10px;
}
.acd-content{
  height: 0;
  opacity: 0;
  padding: 0 10px;
  transition: .5s;
  visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
  height: 250px;
  opacity: 1;
  padding: 10px;
  visibility: visible;
}

/*============
humbergar
=============*/

/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 330px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}



.open nav {
  left: 0;
  opacity: 1;
}
nav .inner {
  padding: 0px;
  padding-top: 50px;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  position: relative;
  margin: 0;
}
nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 10px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}

nav address p {
	font-size: 0.5em;
	margin-top: 3em;
}

@media screen and (max-width: 767px) {
  nav {
    left: -220px;
    width: 220px;
  }
}
/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 30px;
  left: 30px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.open .toggle_btn {
  left: 330px;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #333;
}
.open .toggle_btn {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.open .toggle_btn span:nth-child(1), .open .toggle_btn span:nth-child(3) {
  width: 16px;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translate(-1px,4px) rotate(-45deg);
  transform: translate(-1px,4px) rotate(-45deg);
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translate(-1px,-4px) rotate(45deg);
  transform: translate(-1px,-4px) rotate(45deg);
}
@media screen and (max-width: 767px) {
  .open .toggle_btn {
    left: 250px;
  }
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 500vw;
  height: 500vw;
  background: #ffffff;
  opacity: .8;
  z-index: 2;
  cursor: pointer;