/* ＜基礎土台＞ページ設定 ------------------------------------------- */

/* マージン・パディング [上][右][下][左] */

/* body -> .parent -> .grid -> .cell */ 

@charset "utf-8"; *{ margin: 0; padding: 0; }

*{ box-sizing:border-box; }

html,body,.container{ height: 100%; }

img{ margin:0 0 -5px 0; }

body{ /* ボディー 背景色変更可 */

	-webkit-text-size-adjust:100%; /* 文字サイズ固定 */
	-webkit-user-select:none;      /* テキスト選択を無効化 */
	-webkit-touch-callout:none;    /* 長押しメニューを無効化 */

	text-size-adjust:100%;
	user-select:none;
	touch-callout:none;

	top:0; left:0;
	margin:0; padding:0; width:100%; height:100%;
	font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro,sans-serif;
	font-size:100%; color:#fff; background-color:gray; fixed; z-index: -1;
}

	/* ＜親要素＞[z1]構成枠設定 センタリング自動 -------------------- */

	div.container{ /* 画面枠組み コンテンツ運用枠 スクロールあり */

		position:absolute; top:0; left:50%; transform:translateX(-50%);
		margin:0; padding:0; width:100%; max-width:400px; min-width:300px;
		container-type: inline-size; background:transparent; z-index:1;
	}

	/* ＜親要素＞[z200]戻りボタン枠設定 センタリング自動 ------------ */

	div.bottomBtn{ /* 固定:スクロール無し */

		position: fixed; top: 24px; left:50%; transform:translateX(-50%); 
		margin:0; padding:1px; width:100%; max-width:400px; min-width:300px;
		container-type: inline-size; background:silver; border-radius:0.2em; z-index:200;
	}
		/* 戻りボタン枠 -> グリッド */
		.bottom-grid{ display:grid; background:#000; grid-template-columns:20fr 56fr 24fr; border-radius:0.2em; border:5px solid #444; }

			/* 戻りボタン枠 -> グリッド -> セル */
			.bottom-cellA{ padding:3px 0 4px 0; font-size:1.2em; transform: scaleY(1.2); text-align:center; color:Orange; }
			.bottom-cellB{ padding:3px 0 4px 0; font-size:1.2em; transform: scaleY(1.0); text-align:center; color:GreenYellow; }
			.bottom-cellC{ padding:3px 0 4px 0; font-size:1.2em; transform: scaleY(1.2); text-align:center; color:Orange; }

	/* ＜表示：横長＞ＰＣ窓（幅 > 高さ）----------------------------- */
	@media(min-aspect-ratio:3/4){ .container{ width: 360px; font-size:120%; } .bottomBtn{ width: 320px; font-size:120%; }} /* PC */
	/* ＜表示：縦長＞スマホ（高さ > 幅）フォントサイズ調整 （枠組み：スマホベース）*/
	@media(max-aspect-ratio:3/4) and (min-width: 320px){ .container{ font-size:100%; } .bottomBtn{ font-size:100%; }}
	@media(max-aspect-ratio:3/4) and (min-width: 360px){ .container{ font-size:120%; } .bottomBtn{ font-size:120%; }}
	@media(max-aspect-ratio:3/4) and (min-width: 400px){ .container{ font-size:130%; } .bottomBtn{ font-size:130%; }}

		/* ＜container下位＞ブロック単位 コンテンツ --------------------------- */

		div[ class*="layer" ]{ width:100%; margin:0; top:0; left:0; padding:0; position:absolute; background:transparent; }

		/* [L100]アプリ説明*/
		div.layer100{ height:auto; z-index:100; }
		/* [L90]速度超過(center) */
		div.layer90 { height:100%; z-index:90; }
		/* [L50]メイン画面 */
		div.layer50 { height:auto; top:5px; z-index:50; }
		/* [L10]伝言板 */
		div.layer10 { height:auto; top:5px; z-index:10; }

		/* ---------------------------------------------------------- */

			/* [L90]状態通知枠 */
			.noticeThank{ 
				position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; background:transparent; }

				.cont-thank{
					margin:5px 0; padding:9px 5px; width 100%; border-radius: 0.5em; border: solid 3px #fff; 
					background:green; color: #fff; line-height: 132%; color:#fff; }

		/* ---------------------------------------------------------- */

			/* [L50]タイトル枠 -> グリッド -> (T1) */
			.head-grid1{ 
				margin:5px 5px 0 5px; display:grid; grid-template-columns:7fr 3fr; background:#444; 
				border-radius: 0.2em 0.2em 0 0; }
				/* (T1) -> セル */
				.head-cellA{ padding:5px 5px; font-size:0.7em; }
				.head-cellB{ padding:5px 5px; font-size:0.7em; text-align:right; }

			/* [L50]タイトル枠 -> グリッド -> (T2) */
			.head-grid2{ margin:0 5px;display:grid; grid-template-columns:22fr 56fr 22fr; 
						 border-left:5px solid #444; border-right:5px solid #444; background:#000; line-height:1.7em; }
				/* (T2) -> セル */
				.head-cellC{ padding:0px 5px; font-size:1.3em; transform: scaleY(1.2); text-align:center; color:Orange; }
				.head-cellD{ padding:0px 0px; font-size:1.8em; transform: scaleY(1.0); text-align:center; color:GreenYellow; }
				.head-cellE{ padding:0px 5px; font-size:1.1em; transform: scaleY(1.5); text-align:center; color:Orange; }

			/* [L50]タイトル枠 -> グリッド -> (T3) */
			.head-grid3{ margin:0 5px 5px 5px; background:#000;
						 border-left:5px solid #444; border-right:5px solid #444; border-bottom:7px solid #444; border-radius: 0 0 0.2em 0.2em; }
				/* (T3) -> セル */
				.head-cellF{
					font-size:1.5em; transform: scaleY(1.0); text-align:center; color:Orange;
					width:100%; height:auto; overflow:hidden; line-height:auto; white-space:nowrap; }
					/* セル -> コンテンツ */
					#msg{ display:inline-block; }

		/* ---------------------------------------------------------- */

			/* [L10]タイトル枠 -> 基点名枠 */
			.cont-top{ margin:10px 5px 0 5px; padding:0 5px; line-height:1.2; background:#444; border-radius: 0.2em 0.2em 0 0; }
				#exp { font-size:0.6em; } #name{ font-size:1.1em; }
				#gap { font-size:0.8em; } #cnct{ font-size:0.8em; }

			/* [L10]タイトル枠 -> 画像枠 */
			.cont-image{ margin:0 5px 5px 5px; border:5px solid #444; border-radius: 0 0 0.2em 0.2em; } 
				#pic{ width:100%; }

			/* [L10]絞り込みワード枠 */
			.cont-search{ margin:0px; padding:0 px; }
				/* セル(B) -> コンテンツ */
				#word{  width:100%; margin:0; padding:7px; background:transparent; border:2px solid #aaa;
						outline:none; resize:none; overflow:hidden; font:inherit; font-size:1.0em; color:#080; }
				#word::placeholder{ color:var(--placeholder-color, #aaa); }

			/* [L10]ヒット件数枠 -> テキストのみ */
			.cont-number{ font-size:1.0em; text-align:center; }

			/* [L10]伝言板タイトル -> グリッド -> (3) */
			.cont-grid{ margin:0 5px; display:grid; grid-template-columns:2.5fr 5fr 2.5fr; border-radius: 0.2em 0.2em 0 0; background:#050; }
				/* (3) -> セル */
				.c3-cellA{ padding:5px 0 2px 0; text-align:center; }
				.c3-cellB{ padding:5px 0 2px 0; font-size:1.7em; text-align:center; }
				.c3-cellC{ padding:5px 0 2px 0; text-align:center; }
					/* セル -> コンテンツ */
					#enlarge{ margin-top:5px; width:40%;}
					#send{ margin-top:5px; width:40%; }

		/* ---------------------------------------------------------- */

			/* [L50/L10]内部データ表示枠 -> 単体 */
			.both-info{ margin:3px 5px; padding:5px; border:3px solid #fff; background:#050; font-size:0.7em; color:rgba(255,255,255,0.8); }
			/* [L100/L50/]見出し -> シングル */
			.both-index{ padding:3px 5px; font-size:1.0em; }
			/* [L50/L10]上飾り枠 */ 
			.both-ftop{ margin:0 5px; height:6px; border-radius: 0.2em 0.2em 0 0; background:#050; }
			/* [L50/L10]項目枠 -> グリッド(２) */
			.both-grid{ margin:0 5px;padding:0 5px 0 5px; display:grid; grid-template-columns:25fr 75fr; background:#050; }

				/* (AB)項目セル */
				.c2T-cellA{ padding:3px;text-align:center; border:2px solid #fff; }
				.c2T-cellB{ padding:3px;text-align:center;
							  border-top:2px solid #fff; border-bottom:2px solid #fff; border-right:2px solid #fff; }

				/* (AB)表示セル */
				.c2C-cellA{ padding:4px 2px; font-size:0.8em; line-height:1.3; text-align:center; color:rgba(255,255,255,0.8); 
							 border-left:2px solid #fff; border-right:2px solid #fff; border-bottom:2px solid #fff; }
				.c2C-cellB{ padding:4px 4px; font-size:0.8em; line-height:1.3; color:rgba(255,255,255,0.8);
							 border-right:2px solid #fff; border-bottom:2px solid #fff; }

				/* (AB)入力セル */
				.c2C-writeA{ 
					padding:3px; font-size:0.8em; font-Weight:bold; line-height:1.3; text-align:center; color:rgba(255,255,255,0.8); 
					border-bottom:2px solid #fff; border-Left:2px solid #fff; border-right:2px solid #fff; }
					/* セル -> 画像 */
					.c2C-writeA.img{ width:75%; }

				.c2C-writeB{ padding:0; border-bottom:2px solid #fff; border-right:2px solid #fff; }
					/* セル(B) -> コンテンツ */
					#mes{ display: block;
						width: 100%; margin:2px 0 0 0; padding:3px 7px 3px 7px; background:transparent;
						border:none; outline:none; resize:none; overflow:hidden;
						font:inherit; font-size:24px; font-Weight:bold; line-height:1.0; color:rgba(255,255,255,0.8); }
					#mes::placeholder{ font-size:20px; font-Weight:normal; color:var(--placeholder-color, #0f0); }
					#cautionA{ display: block; padding:0px 7px 3px 7px; font-size:10px; color:rgba(255,255,255,0.7); }

			/* [L50/L10]下飾り枠 */ 
			.both-fbotm{ margin:0 5px 5px 5px; height:6px; border-radius: 0 0 0.2em 0.2em; background:#050; }
			/* [L100/L50]単体枠 -> アプリ説明/すれ違い設定 */
			.both-frame{ margin:0 5px 5px 5px; padding:5px; border-radius:0.2em; }

				/* (1)表示 ->セル */
				.frame-cell{ padding:7px; color:rgba(255,255,255,0.8); border:2px solid #fff; }
				/* (1)入力 ->セル */
				.cross-cell{ padding:0; border:2px solid #fff; }
					/* セル -> コンテンツ */
					#crs{ display: block;
						width: 100%; padding:7px 7px 0px 7px; background:transparent;
						border:none; outline:none; resize:none; overflow:hidden;
						font:inherit; font-size:24px; line-height:1.0; color:rgba(255,255,255,0.8); }
					#crs::placeholder{ font-size:20px; color:#fff; }
					#cautionB{ display: block; padding:0px 7px 3px 7px; font-size:10px; color:#fff;  }

			/* [L50/L10]次へ進む・次の30件ボタン */
			.both-next{ margin:5px; padding:5px; font-size:1.2em; text-align:center; background:#070; }
			/* [L100/L50/L10]レイヤー共通 -> 遷移ボタン */
			.both-button{ margin:5px; padding:5px; font-size:1.2em; text-align:center; background:#070; border:3px solid #0f0;}
			/* [L50/L10]制作者明示Ａ枠 */
			.both-power{ margin:0; padding:0; background:transparent; font-size:1.1em; text-align:center; color:#fff; }
			/* [L50/L10]制作者明示Ｂ枠 */
			.both-made{ margin-bottom:15px; padding:0; background:transparent; font-size:0.9em; text-align:center; color:#fff;  }

		/* ---------------------------------------------------------- */

				/* セル内 テキスト色 */
				span.white{  color: White; }
				span.aqua{   color: Aqua; }
				span.yellow{ color: Yellow; }
				span.green{  color: Lime; }
				span.red{    color: Tomato; }
				span.pink{   color: HotPink; }
				span.brown{  color: Chocolate; }