@charset "UTF-8";

body	{margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}

/*フッター固定*/


 


.menu ul li a i	{color: #556b2f;
		margin-right: 3px;
		font-size: 15px
}

.menu ul li a	{color: #556b2f;
}

/*サイト名*/
.site h1 a   {color: #000000;
                   text-decoration: none}

.site h1      {margin: 0;
                    font-size: 30px}

.site img	{border: none}


/*ヘッダー画像*/
.topimg	{display: inline;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
.topimg2	{display: none;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/*概要*/
.gaiyou a	{display: block;
	background-color: #222222;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	}

.gaiyou a:hover	{opacity: 0.8}

.gaiyou i	{display: block;
	padding-top: 40px;
	padding-bottom: 40px;
	font-size: 38px;
}

.gaiyou .fa-desktop	{background-color: #bfbd13}

.gaiyou .fa-info		{background-color: #c58839}

.gaiyou .fa-wrench		{background-color: #859f46}

.gaiyou h1	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 20px;
	font-weight: normal;
	}

.gaiyou p	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: #524e3c;
	font-size: 12px;
	}

/*お知らせ*/
.news	{padding: 20px;
	border: solid 5px #dddddd}

.news h1	{margin-top: 0;
	margin-bottom: 5px;
	font-size: 18px;
	color: #666666}

.news ul	{margin: 0;
	padding: 0;
	overflow: auto;
	height: 6.8em;
	list-style: none}

.news li a	{display:block;
	padding: 5px;
	border-bottom: dotted 2px #dddddd;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.news li a:hover	{background-color: #eeeeee}

.news time	{color: #888888;
		font-weight: bold}

.news a:after	{content: "";
		display: block;
		clear: both}

.news time	{float: left;
		width: 60px}

.news .text	{float: none;
		width: auto;
		margin-left: 60px}

/*コピーライト*/
.copyright p	{margin: 0;
		color: #666666;
		font-size: 14px}

/*ボックス５*/
.box5	{padding-top: 15px;
	padding-bottom: 15px;
	background-color: #dddddd;
}

/*ボックスの左右*/
.boxA, .box4, .box5, .box6
		{padding-left: 15px;
		padding-right: 15px}

/*ボックスの上下*/
.boxA	{padding-top: 20px;
	padding-bottom: 10px}

.box4	{padding-top: 20px;
	padding-bottom: 20px}

.box4-1	{padding-bottom: 20px}

.box6	{padding-top: 20px}

.box6-1, .box6-2, .box6-3
		{padding-bottom: 10px}

/*SNS*/
.follow ul	{margin: 0;
	padding: 0;
	list-style: none}

.follow li a	{display: block;
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 4px;
	color: #ffffff;
	font-size: 14px;
	text-decoration: none;
	}

.follow li a:hover	{opacity: 0.8}

.follow-yt	{background-color: #ff0000}

.follow i	{margin-right: 10px;
	font-size: 24px;
	vertical-align: middle}


ul.social-button-syncer{
	overflow: hidden;
	width: 238px;
	margin: 1em auto;
	padding: 0;
	border: none;
	list-style-type: none;
}


ul.social-button-syncer li{
	overflow: hidden;
	float: left;
	text-align: center;
	height: 71px;
	margin: 0 8px;
	padding:0;
}

/* [Twitter] */
.sc-tw{
	width: 71px;
}

/* [Facebook] */
.sc-fb{
	width: 69px;
}

/* [LINE] */
.sc-li{
	width: 50px;
}

.sc-li-img{
	border: none;
	margin: 0 auto;
	padding:0;
	width: 36px;
	height: 60px;
}

/* ########### 359px以下 ########### */
@media(max-width: 359px) {

/*サイト名*/
.site img	{width: 225px;
	height: auto}

}


* ########### 390px以下 ########### */
@media(max-width: 390px) {

ul.social-button-syncer{
		width: 238px;
	}

}


/* ########### 599px以下 ########### */
@media(max-width: 599px){


.topimg	{display: none;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.topimg2	{display: inline;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/*ナビゲーション*/
.menu li a	{padding: 10px 7px;
	font-size: 11px}

}


/* ########### 768px以下 ########### */

@media (min-width: 500px) and (max-width: 767px){

ul.social-button-syncer{
		width: 410px;
	}

}

/* ########### 768px以下 ########### */

@media (max-width: 767px) {

.news ul	{
	height: 13.2em;
}


/*トグルボタン*/

#menubtn		{padding: 6px 12px;
		border: solid 1px #aaaaaa;
		border-radius: 5px;
		background-color: #ffffff;
		position: absolute;
		top: 23px;
		right: 15px;
		cursor: pointer;
}

#menubtn:hover	{background-color: #dddddd}

#menubtn i	{color: #888888;
		font-size: 18px}

#menubtn span	{display: inline-block;
		text-indent: -9999px}

/*ナビゲーション縦*/
#menu	{display: none}

.menu ul	{margin: 0;
	padding: 0;
	list-style: none;
	}

.menu li a	{display: block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none;
}



.menu li a:hover	{background-color: #eeeeee}
}




/* ########### 768px以上 ########### */
@media (min-width: 768px) {

/*トグルボタン*/
#menubtn	{display: none}

/*ナビゲーション*/
#menu	{display: block !important}

.menu ul	{margin: 0;
	padding: 0;
	list-style: none}

.menu li a	{display: block;
	padding: 10px 15px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.menu li a:hover	{background-color: #eeeeee}

.menu ul:after	{content:"";
	display: block;
	clear: both}

.menu li	{float: left;
	width: auto}


/* BOX1とBOX2を横に並べる設定 */
.boxA:after	{content: "";
	display: block;
	clear: both}

.box1	{float: left;
	width: auto}

.box2	{float: right;
	width: auto}

/*Box4-1とBox4-2を横に並べる*/
.box4:after	{content: "";
		display: block;
		clear: both}

.box4-1	{float: left;
	width: 70%;
	padding-right: 35px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}

.box4-2	{float: left;
	width: 30%;
}

/* box6-1 box6-2 box6-3を横に並べる*/
.box6:after	{content: "";
		display: block;
		clear: both}

.box6-1	{float: left;
	width: 32%;
	margin-right: 2%}

.box6-2	{float: left;
	width: 32%;
	margin-right: 2%}

.box6-3	{float: left;
	width: 32%}



}



/* ########### 1190px以上 ########### */
@media (min-width: 1190px) {

/*全体の横幅を固定*/
.box3, .box4, .boxA-inner, .box5-inner, .box6, .box-game	
		{width: 1140px;
		margin-left: auto;
		margin-right: auto}

/*BOX　Aの下に線を挿入*/

.boxA	{margin-bottom: 20px;
	border-bottom: solid 1px #dddddd} 
	

}