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

/* デスクトップレイアウト :ここにPC用のCSSを書く */



#wrapper {
	position: fixed;
	height: 100%;
	width: 100%;
}


/*ここからへッダー*/
#header{
	width: 100%;
	height: 20px;
	color: #ffa43c;
	background-attachment: scroll;
	margin-bottom: 10px;
	float: left;
	position: fixed;
	top: 0;
}


#header h1{
	line-height: 20px;
	margin-left: 1%;
}

/*ここからナビ*/
#navi{ 
	margin-bottom: 10px;
	position: absolute;
	right: 0;
	z-index: 10;
	width: 34.3em;
	
}


#navi ul li a{
	float: left;
	background: #fffabc;
	border: 1px solid #ffffff;
	font-size: 100%;
	height: 18px;
	line-height: 18px;
	display: block;
}


/*ナビを入れ替える*/
#shounavi{
	visibility: hidden;
	display: none;
}

/*ここからイラスト*/

#hyouji {
	margin-left: 3%;
	z-index: 100;
	height: 100%;
	max-width: 70%;
	position: fixed;
}

#copyguard {
	margin-left: 3%;
	z-index: 110;
	height: 100%;
	max-width: 70%;
	position: fixed;
}


/*縦を中揃え*/
#hyouji img{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    max-height:100%;
}

#samune {

	height: 60%;
	width: 20%;
	position: absolute;
	top: 55px;
	right:1%;
	max-width: 200px;
}

#samune img {
	margin:0 0.5% 1% 0;
}


/*イラストの説明文*/

#kaisetu {
	clear: both;
	width: 35%;
	position: absolute;
	right:0;
	bottom:10px;
	background-color: rgba(255,255,255,0.7);
	border-radius: 10px;
	color:#696969;
	letter-spacing:4px;
	line-height:1.8em;
	padding:1% 1% 0 1%;
}


/*ここからフッター*/

#footer{
	background-color: #ffa43c;
	width: 100%;
	clear: both;
	position: fixed;
	bottom: 0px;	
}






#footer p {
	clear: both;
	float: right;
	font-size: xx-small;
	margin: 1px;
}


/* タブレットレイアウト : 800 px ～  */
@media screen and (max-width: 800px) {


/*タブレットレイアウト ここからへッダー*/
	
#header{
	background-color: #ffa43c;
	position: static;
	margin-bottom: 0;
	float: none;
}

#header h1{
	color:#FFFFFF;
}		
	
/*タブレットレイアウト ここからナビ*/	
#navi{ 
	margin-bottom: 10px;
	position: absolute;
	right: 0;
	z-index: 10;
	width: 34.3em;
	
}


#navi ul li a{
	float: left;
	background: #fffabc;
	border: 1px solid #ffffff;
	font-size: 100%;
	height: 18px;
	line-height: 18px;
	display: block;	
}


/*タブレットレイアウト ナビの入れ替え*/

#dainavi{
	visibility:hidden;
	display:none;
}

#shounavi{
	visibility:visible;
	display:block;
}

#navi ul li .eiji {
	font-size:77%;
}


/*タブレットレイアウト ナビ(正方形バージョン)の文字調整*/
#navi ul li a .jikan1{
	letter-spacing:0.1em;
}

#navi ul li a .jikan2 {
	letter-spacing:0.66em;
}

#navi ul li a .jikan3 {
	letter-spacing:0.4em;
}
#navi ul li a .jikan4 {
line-height:9px;
}
	
#navi ul li a .jikan5 {
line-height:14px;
}
		
	
/*タブレットレイアウト ここからイラスト*/

#hyouji {
	margin-left:5%;
	margin-top:38px;
	height:70%;
	min-width:70%;
	position: static;
	float:left;
	max-width: none;
}

#copyguard {
	margin-left:5%;
	margin-top:38px;
	height:70%;
	min-width:70%;
	float:left;
}

#samune {
	width: 25%;
	position: absolute;
	top: 98px;
}


/*タブレットレイアウト イラストの説明文*/

#kaisetu {
	clear:both;
	width:90%;
	position:absolute;
	left: 5%;
	bottom:25px;
	letter-spacing:4px;
	line-height:1.2em;
	color:#696969;
}


/* スマホレイアウト : 400 px ～  */
@media screen and (max-width: 400px) {

}