/* 2段組レイアウト基本 */

body {
	text-align:center;
	background-color : #ffffff;

}  

@media (prefers-color-scheme: dark) {
	body {
		background-color : #080c1e;
		color: white;
	}
	a:link {
		color: lightblue;
	}
	a:visited {
		color: #dda0dd;
	}
	#linkbar {
		background-color: #eeffee;
	}
	#linkbar a {
		color: blue;
	}
	#linkbar, .game-header, .stop {
		color: black;
	}
}

.wrap {
/*	width: 920px;*/
	width: 700px; 
	text-align:left; 
	margin:0 auto; 
	background-color : #ffffff;

}

@media (prefers-color-scheme: dark) {
	.wrap {
		background-color : #080c1e;
		color: white;
	}
}  

/* コンテンツ表示枠*/
.naka {
/*	width: 900px;*/
	width: 680px;
	padding: 0 10px 0 10px;
	border-width: 1px;
	border-left:solid;
	border-right:solid;
	border-color : #eeeeee;
}

.inner {
	margin:0 10px; 

/*	background-color : red; */
}  

.mainWrap {
	width:660px;
	float:left;
/*	background-color:yellow; */
	margin: 10px 0 10px 0;
}

.mainWrap iframe {
	max-width: 100%;
	height: auto;
	aspect-ratio: 4/3;
}

.sideWrap { 
/*
	width:200px; 
	float:right; 
	margin:10px 0px 10px 0px;
	padding : 0px 0px 0px 0px;
	background-color:pink;
*/
width:0px;
margin:0px;
padding:0px;
}

.header  {
/*	background-color:#aaaaaa; */
}

.footer {
	width: 680px;
/*	background-color:#ffeeee;*/
	margin:0 auto 0px;
	font-size:14px;
	border-top:1px solid #aaaaaa;
	border-bottom:1px solid #aaaaaa;
}

.clear {
	clear:both;
}
.clear hr {
	display:none;
}

/*
	各ページヘッダ用
*/

/*リンクバー*/
#linkbar
{
/*	width: 900px;*/
	width: 680px;
	min-height: 32px;
	background-color:#eeffee;
	margin:0 auto 0px;
	font-size:14px;
	border-top:1px solid #aaaaaa;
	border-bottom:1px solid #aaaaaa;
}
#linkbar::after
{
	content:"";
	display:block;
	clear:both;
}


/*リンク見出し*/
#linkbar #midasi
{
/*	width :100px;*/
	text-align:center;
	float:left;
	border-right:1px solid #ddeedd;
	padding:7px 10px;
}


/* リンクバーリンク */
#linkbar a
{
/*	color:black;*/
/*	text-decoration:none;*/
	background-color:#cceecc;

	width: 130px;
	padding:7px 10px;
	text-align:center;
	float:right;
	border-left:1px solid #ffeeee;
}

/* リンクバーポイント*/
#linkbar a:hover
{
	background-color:#ddddee;
}

/* ゲームヘッダー */
.game-header
{
	width: 100%;
	box-sizing: border-box;
	background-color:#eeffee;
	margin:0 auto 5px;
	font-size:18px;
	border-top:1px solid #aaaaaa;
	border-bottom:1px solid #aaaaaa;
	text-align: center;
	padding: 10px 10px;
}

/*
	TOP用のproduct一覧
	BOXを並べる
*/
div.imagebox {
/*   background-color: #00ffff;  /* 背景色 */
   width: 200px; /* 横幅 */
   float: left; /* 左に配置 */
	margin: 10px;
}




/*
	製品説明ページ用
*/

/* アイコン＋説明のアイコン*/
.icondesc {
	width:180px;
	height:120px;
	float:left;
	margin: 0 10px 10px 0;
}

/* アイコン＋説明のテキスト */
.icondesctext {
	width:440px;
	float:right;
	margin: 0 10px 10px 0;
}


/* スクリーンショット */
img.screenshot {
	margin:10px;
	float: left; /* 左に配置 */
}

/*
	SPSoft紹介ページ用
*/

/* アイコン＋説明のアイコン*/
.photo {
	width:180px;
/*	height:180px; */
	float:right;
	margin: 0 10px 10px 0;
}

/* アイコン＋説明のテキスト */
.phototext {
	width:440px;
	float:left;
	margin: 0 10px 10px 0;
}

/* プレイバシーポリシー */
.privacytext {
	width:640px;
	float:left;
	margin: 0 10px 10px 0;
}


/*
	広告枠
*/
div.ad
{
	float: right;
}

/*
	公開停止枠
*/
div.stop
{
	background-color:#ffcccc;
	font-size:14px;
	border:1px solid #aaaaaa;
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
}

hr {
	width: 680px;
	margin-left: auto;
	margin-right: auto;
	border-top:1px solid #aaaaaa;
}

/*
	webgamesページ用
*/

/* ゲームタイトル行（タイトル左・ボタン右） */
.game-title-bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

/* フルスクリーンボタン */
.btn-fullscreen {
	padding: 7px 20px;
	background-color: #cceecc;
	border: 1px solid #aaaaaa;
	font-size: 14px;
	cursor: pointer;
}
.btn-fullscreen:hover {
	background-color: #ddddee;
}

/* スマートフォン対応 (〜720px) */
@media (max-width: 720px) {
	.wrap         { width: 100%; }
	.naka         { width: 100%; box-sizing: border-box; }
	.inner        { margin: 0 5px; }
	.mainWrap     { width: 100%; }
	#linkbar      { width: 100%; box-sizing: border-box; height: auto; }
	#linkbar a    { width: auto; padding: 7px 6px; font-size: 12px; line-height: 2; }
	.game-header  { width: 100%; box-sizing: border-box; }
	.footer       { width: 100%; box-sizing: border-box; }
	hr            { width: 100%; }
	.icondesctext { width: 100%; float: none; }
	.phototext    { width: 100%; float: none; }
	.privacytext  { width: 100%; }
	.mainWrap iframe { width: 100%;height: 60%; }
}

/* ゲームリスト用 */
.game-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.game-item {
    width: 48%; /* スマホで2列 */
    margin: 1%;
    text-align: center;
}

.game-item h3 {
    margin: 5px 0 5px 0;
    line-height: 1.2;
}

.game-item img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .game-item {
        width: 23%; /* PCで4列くらい */
    }
}