/**/
/*@import url('https://fonts.googleapis.com/css?family=Antic+Didone');*/

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

body{
	/*height: 100vh;*/
	background-color: #000000;
	font-family: sans-serif,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック";
}

h2{
	font-size: 22px;
}

/*ページ全体（余白も含める）を制御*/
#page{
	background-color: #43270c;
}

p{
	line-height: 1.875;
	font-size: 16px;
}

/*左右のページを制御*/
#pageBody{
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	

	background: black;
	color: #cccccc;

	margin: 0 auto 0 0;
	padding: 0;
}

/*ページの左側*/
#pageBodyLeft{
	/*flex: 0 0 200px;*/
	/*-webkit-flex: 0 0 200px;*/

	min-width: 50px;
	max-width: 200px;
	width: 20%;

	/*background-color: #1a3a55;*/
	background-color: #103550;
	/*background-color: #04183f;*/
	border-right: 1px solid #3e7c73;
	box-sizing: border-box;
}

#pageBodyLeft .globalNavi{
	position: sticky;
	top: 17px;
}

#pageBodyLeft .globalNavi .siteName{
	color: #ff0000;
	text-align: center;
	margin: 0 auto 0.67em;
	padding-top: 10px;
	/*font-family: "Antic Didone",serif,sans-serif,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック";*/
	font-family: serif,sans-serif,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック";
	font-size: 32px;
	font-weight: bold;
	line-height: 1.875;
}

#pageBodyLeft ul{
	padding-top: 10px;
	padding-left: 0;
}

#pageBodyLeft ul li{
	list-style: none;
	border-bottom: 1px solid #cccccc;
	padding: 6px 0;
}

#pageBodyLeft ul li:first-child{
	border-top: 1px solid #cccccc;
}

#pageBodyLeft ul li a{
	font-size: 18px;
	color: #dddddd;
	line-height: 2.0;

	display: block;
	text-align: center;

	/*hover時にゆっくりと色が変わる*/
	transition: 0.3s;
	text-decoration: none;

	/*font-family: 'Antic Didone', serif;*/
	font-family: "Noto Serif",sans-serif,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック";
}

#pageBodyLeft ul li a:hover{
	background-color: #295bb5;
	color: #abcc9c;
}

/*ページの右側*/
#pageBodyRight{
	margin: 0 auto;
	min-width: 200px;
	width: 100%;

	/*画面の高さ　- フッターの高さ*/
	min-height: calc(100vh - 64px);

	padding: 0;

	/*background-image: url("/common/images/stars-1118077_1280.jpg");*/
	background-attachment: fixed;
}

.webp #pageBodyRight{
	background-image: url("/common/images/stars-1118077_1280.webp");
}

.no-webp #pageBodyRight{
	background-image: url("/common/images/stars-1118077_1280.jpg");
}

#pageBodyRight #pageBodyRightBackgroundImage{
	background: rgba(0,0,20,0.1);
	height: 100%;
	padding: 0;
	margin: 0;
}

#pageBodyRight #pageBodyRightContents{
	background: rgba(0,0,0,0.6);
	padding-top: 20px;
	margin: 0 auto;
	box-sizing: border-box;
	max-width: 610px;
	height: 100%;
}

#pageBodyRight #pageBodyRightContents p{
	padding-right: 10px;
}

#pageBodyRight .freeGameIndex{
	/*border-top: 1px solid red;*/
	padding: 30px 0;
}

/*******************************************テスト中*/
#pageBodyRight .freeGameIndex img{
	/*親要素のwidth幅を100%とし、それに合わせて画像をリサイズ*/
	max-width: 100%;
	height: auto;
}
/********************************************/

#pageBodyRight .freeGameIndex .articleList{
	padding: 15px;
}

#pageBodyRight .freeGameIndex .articleList p{
	line-height: 1.666;
}

#pageBodyRight .freeGameIndex .articleList ul{
	padding-left: 30px;
}

#pageBodyRight .freeGameIndex .articleList ul li{
	color: #cccc00;
	font-size: 18px;
	line-height: 1.666;
}

#pageBodyRight .freeGameIndex .articleList a{
	color: #cccc00;
}

#pageBodyRight .freeGameIndex .articleList a:hover{
	color: #cc0000;
}

#pageBodyRight .freeGameIndex .articleList:after{
	content: "";
	clear: both;
	display: block;
}

#pageBodyRight .freeGameIndex .articleList .articleListImage{
	width: 200px;
	/*width: 40%;*/
	/*max-width: 220px;*/

	float: left;

	/*border: 3px solid blue;*/

	vertical-align: bottom;
	padding-right: 30px;
}

#pageBodyRight .freeGameIndex .articleList .articleListImage a{
	display: block;
}

#pageBodyRight .freeGameIndex .articleList .articleListImage a:active{
	/*background: #a00;*/
}

#pageBodyRight .freeGameIndex .articleList .articleListImage a:hover{
	background: #400;
}

#pageBodyRight .freeGameIndex .articleList .articleListImage a img{
	vertical-align: bottom;
}

#pageBodyRight .freeGameIndex .articleList .articleListImage a img:hover{
	opacity: 0.8;
}

#pageBodyRight .freeGameIndex .articleList .articleListText{
	width: 250px;
	/*width: 60%;*/

	/*float: right;*/

	float: left;

	/*border: 3px solid yellow;*/

	/*position: absolute;*/
	/*left: 220px;*/
	/*top: 25%;*/
}

#pageBodyRight .freeGameIndex .articleList .articleListText h2 a{
	font-size: 20px;
	color: #cccccc;
}

#pageBodyRight .freeGameIndex .articleList .articleListText h2 a:hover{
	color: #cc0000;
}

#pageBodyRight .freeGameIndex .termsList{
	padding: 15px;
}

#pageBodyRight .freeGameIndex .termsList p{
	margin: 10px 0 30px;
	line-height: 1.333;
}

#pageBodyRight .freeGameIndex .termsList ul > li{
	margin-bottom: 10px;
}

#pageBodyRight .freeGameIndex .termsList ul ol{
	line-height: 1.333;
	margin-bottom: 30px;
}

#pageBodyRight .news{
	margin: 0 15px;
	padding-top: 0;
	line-height: 1.375;
	padding-bottom: 40px;
}


#pageBodyRight .title{
	font-size: 24px;
	border-bottom: 1px solid red;
	padding: 10px;
	margin-top: 0;
	margin-bottom: 10px;
	font-weight: bold;
}


/*フッター*/
#pageFoot{
	color: #cccccc;
	background-color: black;

	margin: 0;
	padding: 1px;
	border-top: 1px solid red;
	
	text-align: center;
}

/*guides*/
#pageBodyRight .freeGameIndex .hints h2{
	margin: 30px 0 50px;
}

#pageBodyRight .freeGameIndex .hints hr{
	margin: 45px 0 30px;
}

/*games詳細*/
#pageBodyRight .freeGameIndex .games h2{
	margin: 30px 0 40px;
}

#pageBodyRight .freeGameIndex .games hr{
	margin: 75px 0 30px;
}

#pageBodyRight .freeGameIndex .games .hr{
	margin: 75px 0 30px;
	border-bottom: 2px solid #808080;
}

#pagetop{
	position: fixed;
	bottom: 15px;
	right: 15px;
	opacity: 0.4;
	margin: 0;
}

#pagetop:hover{
	opacity: 0.9;
}

#pagetop img{
	vertical-align: bottom;
	width: 55px;
}


@media screen and (min-width: 1281px){
	#pageBodyRight{
		background-size: cover;
	}
}

@media screen and (max-width: 610px){
	#pageBodyLeft .globalNavi .siteName{
		font-size: 26px;
	}

}

/*@media screen and (max-width: 480px){*/
@media screen and (max-width: 505px){
	#pageBody{
		display: block;
		/*border-right: 10px solid #aaaaaa;*/
	}

	#pageBodyLeft{
		width: 100%;
		max-width: initial;
		min-width: initial;
		border-bottom: 5px solid #4a7a95;
		border-right: none;
	}

	#pageBodyLeft .globalNavi .siteName{
		font-size: 32px;
		padding-top: 2px;
		margin-bottom: 2px;
	}

	#pageBodyLeft .globalNavi h1{
		padding-top: 35px;
	}

	#pageBodyLeft ul{
		padding: 5px 0 20px;
		margin: 0 35px;
	}

	#pageBodyLeft ul li{
		padding: 4px 0;
	}

	#pageBodyRight{
		min-height: initial;
	}

	#pageBodyRight #pageBodyRightContents p{
		padding: 0;
	}

	#pageBodyRight .freeGameIndex .articleList ul{
		padding: 0 10px;
	}

	#pageBodyRight .freeGameIndex .articleList ul li{
		line-height: 1.5;
		font-size: 16px;
	}

	#pageBodyRight .freeGameIndex .articleList .articleListImage{
		width: 100%;
		text-align: center;
		padding-right: 0;
	}

	#pageBodyRight .freeGameIndex .articleList .articleListImage a{
		display: inline-block;
	}

	#pageBodyRight .freeGameIndex .articleList .articleListText{
		width: 100%;
		text-align: center;
	}


	#pageBodyRight .title{
		padding-left: 20px;
	}

	#pagetop img{
		width: 50px;
	}
}

.breadcrumbs{
	padding: 6px 10px 0;
	margin-bottom: 0.67em;
}

.breadcrumbs ol{
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 0;
	box-sizing: border-box;
}

.breadcrumbs ol li{
	font-size: 14px;
	font-weight: bold;
	display: inline;
	/*font-family: "Antic Didone",serif,sans-serif,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック";*/
	font-family: "Noto Serif", arial, serif,sans-serif,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック";
}

.breadcrumbs ol li:after{
	content: '>';
	padding: 0 5px;
	display: inline-block;
	font-size: 14px;
}

.breadcrumbs ol li:last-child:after{
	content: '';
}

.breadcrumbs ol li a{
	color: #cccc00;
	/*text-decoration: none;*/
	padding: 2px 5px;
}

.breadcrumbs ol li a:hover{
	/*text-decoration: underline;*/
	color: #cc0000;
}


.lazyload {
  opacity: 0;
  transition: opacity .8s ease-out;
}
.lazyloaded {
  opacity: 1;
}