@charset "utf-8";

@media screen and (max-width: 768px)and (min-width: 320px){
	
  /* ----------------
	base
	----------------*/
  #wrapper{
	width: 100%
  }
  
  /* ----------------
	nav
	----------------*/
  .menu-title{
    display: block;
    background-color: #ff294c;
    color: #FFF;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    font-family:"Arial Black", Gadget, sans-serif;
    text-decoration:bold;
    font-size:1em;
    padding: 10px 0 10px 10px;
    width: 95%;
    text-align: left;
    margin:10px auto;
    cursor: pointer;
  }
  
  nav{
    display: none;
  }
  
  nav{
    margin: 0 0 10px 0;
    border: none;
    width:100%;
    z-index:0;	
    position:relative;
    background-color: #ff294c;
    box-shadow:none;
  }

  nav ul {
	clear:none;
	margin:0 auto;
	width:100%;
	height:50%;
	list-style:none
  }
  
  nav ul li{
	float: none;
	width: 95%;
	vertical-align: none;
	height:auto;
	padding-left: 1em;
	text-align: left;
	border-bottom: 1px dotted #efc5cd;
  }

  nav ul li a {
  	width: 100%;
	text-decoration:bold;
  }
  
  /* ----------------
	main
	----------------*/
  #top h1{
	  margin: 0;
	  padding: 0;
  }
  
	#top h1 img{
	margin: 10px 0 0 0;
	width: 95%;
	max-width: 410px;
	} 
	
  #top p {
	  margin: 0;
	  padding: 0;
  }
  #top p img{
	margin: 10px 0 0 0;
	width:95%;
  }
  
  /* ----------------
	section共通
	----------------*/
	
  h2 {
	width: 95%;
	margin: 0;
	padding: 0;
	margin: 0 auto;
	padding-top: 5%;
	font-size: 120%;
	}
  
  /* ----------------
	section_
	works/illustration
	----------------*/
	
  #works {
	width: 100%;
	margin: 0;
	padding: 0;
	padding-bottom: 10%;
	}

	#works .box {
	width: 100%;
	margin: 0 auto;
	padding: 5% 0;
	}
	
	figure{
		width:30%;
		max-width: 150px;
	}
	
	#illustration {
	width: 100%;
	margin: 0;
	padding: 0;
	padding-bottom: 10%;
	}

	#illustration .box {
	width: 100%;
	margin: 0 auto;
	padding: 5% 0;
	}  
  
  /* ----------------
	section_
	movie
	----------------*/

	#movie {
	width: 100%;
	margin: 0;
	padding: 0;
	padding-bottom: 10%;
	}

	#movie .box {
	width: 95%;
	margin: 0 auto;
	padding: 5% 0;
	}

	#movie .box iframe {
	width: 100%;
	margin: 0;
	margin: 0 auto 5% auto;
	}
	
	#movie .box video {
	width: 100%;
	margin: 0;
	margin: 0 auto 5% auto;
	}
	
	#movie .box p img {
	width: 95%;
	margin: 0;
	padding: 0;
	margin: 0 0 5% 0;
	}
	
	#movie .box p.caption {
	width: 96%;
	margin: 0;
	margin: 0 0 2% 1%;
	padding: 2%;
	}
	
	/* ----------------
	section_
	biography 
	----------------*/
	#biography {
	width: 100%;
	margin: 0;
	padding: 0;
	padding-bottom: 5%;
	}

	#biography .box {
	width: 90%;
	margin: 0 auto;
	padding: 5% 0;
	}
	
	#biography .bio p {
	font-size: 80%;
	}

	#biography .profile {
	margin: 0;
	margin: 0 0 2% 0;
	}

	#biography .history_jp {
	width: 100%;
	margin: 0;
	padding: 0;
	margin: 2% auto 5% auto;
	padding: 5%;
	}
	
	#biography .history_jp tr{
	letter-spacing: 0;
	width: 20%;
	}
	
	#biography .history_jp td.year{
	letter-spacing: 0;
	width: 20%;
	vertical-align: top;
	}
	
	
	#biography .history_eng {
	width: 90%;
	margin: 0;
	padding: 0;
	margin: 2% auto 5% auto;
	padding: 5%;
	}

	#biography .link p {
	float: none;
	width: 96%;
	margin: 0;
	padding: 0;
	margin: 5% 0 2% 0;
	padding: 2%;
	}
	
	#biography .form {
	width: 100%;
	margin: 0;
	padding: 0;
	padding-bottom: 20px;
	}

	#biography .form p {
	margin: 0;
	padding: 0;
	margin: 5% 0 2% 0;
	padding: 2%;
	}
	
	/* ----------------
	footer
	----------------*/
	footer {
	width: 100%;
	height: 80px;
	}

	footer p{
	margin: 0;
	padding: 0;
	padding: 5% 0;
	}