/*
※フォントの読み込み
※ボックスモデルの変更
※初期設定
※グローバルメニュー（PC、モバイル）
※DND（PC、モバイル）
※フッタ
※clearfix
*/


/*General Setting******************************/

@font-face {
 font-family: 'JapanSans80';
 src: url('../webfont/JapanSans80.eot');
 src: url('../webfont/JapanSans80.eot?#iefix') format('embedded-opentype'),
 url('../webfont/JapanSans80.woff') format('woff'),
 url('../webfont/JapanSans80.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 }

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

*{
box-sizing: border-box;
	-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
          
}

html ,body{
		height:100%;
		margin:0;
		padding:0;
		}
		@media screen and (max-width: 767px) and (orientation:portrait) {
			html,body{	height:auto;}
		}

body{

	font-size:100%;
	background:#C7B299;
}
@media screen and (min-width: 768px) and (orientation:landscape) {	/*PC用にWEBフォント*/

body{
	font-family:'Noto Sans Japanese','ヒラギノ角ゴ Pro W3','Hiragino Kaku  Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	font-weight:300;
}

}


#container{
	position:relative;
/*	width : 98% ; /* IE8以下とAndroid4.3以下用フォールバック */
   width : -webkit-calc(100% - 260px) ;
   width : calc(100% - 260px) ;
   min-width:980px;
   height:100%;	/*こっちが先*/
   	height:auto;

	
	min-height: 100%;
	background: #fff;
	margin:0 auto;
	padding:0 0 50px 0;	/*下部コピーライト用*/
}

header{
	position:relative;
	width:100%;
	padding:0;
}

.mobile_on{
	display:none;
}


.ad_space{
	width:100%;
	text-align: center;
	margin:30px 0;
}






/*	PCサイト用グローバルメニュー	****************************/
@media only screen and (min-width:768px),(-webkit-min-device-pixel-ratio:1.9) and (orientation:landscape),(min-resolution: 1.9dppx) and (orientation:landscape){


nav#global_menu{	width:700px;}

#global_menu > ul{
	position:relative;	
	float:right;
	margin:0;
	padding:0;
	list-style: none;
	width:100%;
}

#global_menu > ul > li{
	display:table;
	position:relative;
	float:left;
	width:136px;
	height:80px;	
	font-size: 14px;
	margin:0 5px 0 0;
	padding:0;
	
	text-align:center;
	-webkit-transition:all 0.1s ;
	-o-transition:all 0.1s ;
	transition:all 0.1s;
}

#global_menu > ul > li span > span.m_en{
	font-weight: bold;
	display:block;
	font-size:9px;
	font-weight:200;
}

#global_menu > ul > li:first-child{	display: none;}
#global_menu > ul > li#about{	background:#7C6769 url(../images/g_menu/about_icn.png) center 16% no-repeat;	}
#global_menu > ul > li#about .m_en{	color:#544;	}
#global_menu > ul > li#peculiarity{	background:#762100 url(../images/g_menu/peculairity_icn.png) center 16% no-repeat;	}
#global_menu > ul > li#peculiarity .m_en{	color:#400;	}
#global_menu > ul > li#howto{	background:#5C7886 url(../images/g_menu/howto_icn.png) center 16% no-repeat;	}
#global_menu > ul > li#howto .m_en{	color:#145;	}
#global_menu > ul > li#recommend{	background:#BA8A00 url(../images/g_menu/reccomend_icon.png) center 18% no-repeat;	}
#global_menu > ul > li#recommend .m_en{	color:#750;	}
#global_menu > ul > li#webmaster{	margin-right:0;background:#7B783E url(../images/g_menu/webmaster_icn.png) center 16% no-repeat;	}
#global_menu > ul > li#webmaster .m_en{	color:#540;	}

#global_menu > ul > li > a{
	display:table-cell;	
	text-decoration: none;
	width:100%;
	height:100%;
	padding:20px 0 0 0;
	vertical-align : middle ;
	color:#eee;
}


#global_menu > ul > li:hover{	background-color:#ccc !important;}
#global_menu > ul > li:hover span{	font-weight: bold;color:#333 !important;}

nav#global_menu #toggle{	display:none;	}




footer p{
	text-align: center;
	position:fixed;
	margin:0;
	padding:20px 0 10px 0;
	bottom: 0;
	min-width:980px;
	width : 98% ; /* IE8以下とAndroid4.3以下用フォールバック */
   width : -webkit-calc(100% - 260px) ;
   width : calc(100% - 260px) ;
	
	vertical-align: bottom;
background:#fff;
background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.5));
background: -webkit-gradient(linear, left bottom, left top, from(#fff), color-stop(60%, #fff),to(rgba(255,255,255,0)));
background: -o-linear-gradient(bottom, #fff, rgba(255,255,255,0.5));
background: linear-gradient(bottom, #fff, rgba(255,255,255,0.5));
}

/*　一番上にもどる*****************/
#page-top{
	width:50px;
	height:50px;
	display:none;
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:99999;

}
 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#431;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
border-radius: 50px;
}
 
#page-top p:hover{
	background:#d36;
}
 
#move-page-top{
	color:#fff;
	line-height:50px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

}


/**　モバイル用メニュー　*****************************************************/
@media only screen and (max-width:767px) and (-webkit-max-device-pixel-ratio:1.9),only screen and (max-width:767px) and (max-resolution: 1.9dppx),(max-width:767px) and (-webkit-min-device-pixel-ratio:1.9) and (orientation:portrait),(max-width:767px) and (min-resolution: 1.9dppx) and (orientation:portrait){

.ellipsis{
	display:none;
}
.mobile_on{
	display:run-in;
/*width:100%;
display:block;
text-align: center;
margin:0 auto;*/
}


nav#global_menu{
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index: 9990;

}

#global_menu > ul{
	position:absolute;	
	margin:0;
	padding:0;
	list-style: none;
	width:100%;
	display:none;
	z-index: 9999;
}


#global_menu > ul > li{
	position:relative;
	width:100%;	
	font-size: 100%;
	margin:0;
	padding:0;
	text-align:center;
}

#global_menu > ul > li span > span.m_en{	display:none;	}
#global_menu > ul > li:first-child{	background:#000;color:#ccc;font-size: 10px;	padding:10px;}
#global_menu > ul > li#about{	background:rgba(124,103,105,0.9) url(../images/g_menu/about_icn.png) 10px center no-repeat;	}
#global_menu > ul > li#peculiarity{	background:rgba(118,33,0,0.9) url(../images/g_menu/peculairity_icn.png) 10px center no-repeat;	}
#global_menu > ul > li#howto{	background:rgba(92,120,134,0.9) url(../images/g_menu/howto_icn.png) 10px center no-repeat;	}
#global_menu > ul > li#recommend{	background:rgba(186,138,0,0.9) url(../images/g_menu/reccomend_icon.png) 10px center no-repeat;	}
#global_menu > ul > li#webmaster{ background:rgba(123,120,62,0.9) url(../images/g_menu/webmaster_icn.png) 10px center no-repeat;	}

#global_menu > ul > li > a{
	display:block;	
	text-decoration: none;
	width:100%;
	height:100%;
	padding:10px;
	text-align:center;
	color:#eee;
}

#toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #431;
    padding:4px 0 4px 0;

    -webkit-transition:all 0.5s ;
	-o-transition:all 0.5s ;
	transition:all 0.5s;
  }

  #toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px 30px;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }

  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 40%;
   left : -webkit-calc(50% - 36px) ;
   left : calc(50% - 36px) ;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 40%;
   left : -webkit-calc(50% - 36px) ;
   left : calc(50% - 36px) ;
    width: 20px;
    height: 4px;
    background: #431;
  }
  #toggle a:before{   margin-top: -6px; }
  #toggle a:after{   margin-top: 2px;	}

/*　一番上にもどる*****************/
#page-top{
	width:50px;
	height:50px;
	display:none;
	position:fixed;
	right:50%;
	bottom:10px;
	z-index:9998;
	margin-right:-25px;

}
 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#431;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	border:#ccc solid 1px ;
border-radius: 50px;
}
 



#move-page-top{
	color:#fff;
	line-height:50px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

}

 @media only screen and (orientation : landscape) { /*横向きの際に適用*/
	#toggle{ background: #431;}
	}




/*	SNS（PC用）**********************************	*/
#sns_area{
	position:fixed;
	bottom:40px;
	width:90px;
	margin:0 0 0 -90px;
	padding:20px 0 0 0;
	background:#333;
	border-radius:10px 0 0 10px ;
	z-index:8000;
}
#sns_area li{
	list-style: none;
	text-align:center;
	vertical-align: bottom;	
	margin-bottom:20px;
}

/**　SNS（モバイル用）　*****************************************************/
@media screen and (max-width: 980px){	/*iPad以下なら最下部*/
#sns_area{
	position:relative;
	width:100%;	
	height:105px;
	margin:50px 0 0 0px;
	padding:10px 0 0 0;
	background:#aaa;
	border-radius:0 ;
	text-align:center;
	z-index:8000;
}
#sns_area li{
	display:inline;
	list-style: none;
	vertical-align: bottom;	
	margin-bottom:20px;
	margin-left:20px;
}

}






/*	PC用フッタ***********************************	*/
/*@media screen and (min-width: 768px) and (orientation:portrait),(orientation:landscape){
footer p{
	text-align: center;
	position:fixed;
	margin:0;
	padding:20px 0 10px 0;
	bottom: 0;
	min-width:980px;
	width : 98% ;*/ /* IE8以下とAndroid4.3以下用フォールバック */
/*   width : -webkit-calc(100% - 260px) ;
   width : calc(100% - 260px) ;
	
	vertical-align: bottom;
background:#fff;
background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.5));
background: -webkit-gradient(linear, left bottom, left top, from(#fff), color-stop(60%, #fff),to(rgba(255,255,255,0)));
background: -o-linear-gradient(bottom, #fff, rgba(255,255,255,0.5));
background: linear-gradient(bottom, #fff, rgba(255,255,255,0.5));
}

}

*/



/* Usually */
.clear{
	clear:both;
}

.clearfix:after{
content: "";  
display: block; 
visibility: hidden; 
clear: both; 
height: 0px; 
width:0;
font-size: 5em; 
line-height: 0; 
overflow:hidden;
}



@media screen and (max-width: 980px) {	/*980pxのブレイクポイント根拠はiPad*/
#main{
	min-height:1024px;	/*　コンテンツが少ないとiPadで拡大されてしまう。*/
}
}



.amazon_ad{
	line-height: 1em !important;
}
.red{
	color:#f00;
}
.strong{
	font-size: 120%;
	font-weight: bold;
}