@charset "UTF-8";

/*---------------------------------------------
sp.css

スマートフォン（幅767px以下、または高さ480px以下の横向き）用の配置と、
幅768〜1099px（タブレットや狭いPC画面）でトップのロゴが切れないようにする調整。
幅1100px以上のPCの配置は layer.css などのまま変えない。

resize.js や各ページのスクリプトが位置や大きさを style 属性で
書き込むため、それを上書きする指定には !important を付けている。
---------------------------------------------*/

@media screen and (max-width: 767px), screen and (max-height: 480px) {

	html, body{
		-webkit-text-size-adjust: 100%;
	}

	/* ---------- メニュー：画面下に固定 ---------- */
	#top_menu{
		position: fixed !important;
		top: auto !important;
		bottom: 0;
		left: 0 !important;
		right: 0;
		width: 100%;
		min-width: 0;
		margin: 0;
		background: rgba(255,255,255,0.94);
		border-top: 1px solid #cccccc;
		font-size: 13px;
	}
	#top_menu ul.lavaLampNoImage{
		display: flex;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	#top_menu ul.lavaLampNoImage li{
		flex: 1 1 0;
		float: none;
		margin-top: 0 !important;
		opacity: 1 !important;
		text-align: center;
	}
	#top_menu ul.lavaLampNoImage li a{
		float: none;
		display: block;
		position: static;
		height: auto;
		margin: 0;
		padding: 15px 0;
		font: bold 12px arial, sans-serif;
		letter-spacing: 0.04em;
	}

	/* ---------- 中央の表示領域：メニューの上を縦スクロール ---------- */
	#top_main{
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0;
		bottom: 48px;
		width: auto !important;
		height: auto !important;
		min-width: 0;
		min-height: 0;
		margin: 0 !important;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* ---------- トップ（top.html） ---------- */
	.main_text{
		position: static;
		top: auto !important;
		margin: 0;
		padding: 150px 24px 0 24px;
		font-size: 22px !important;
		line-height: 1.6;
		text-shadow: 0 1px 6px rgba(0,0,0,0.6);
	}
	.main_img{
		position: static;
		top: auto !important;
		left: auto;
		margin: 28px 24px 24px 24px;
		text-align: center;
	}
	.main_img img{
		max-width: 80%;
		height: auto;
	}

	/* ---------- NEWS・ABOUT・GAME・SUPPORT の枠 ---------- */
	#page{
		position: relative;
		top: auto;
		width: auto;
		height: auto;
		min-height: 100%;
		margin: 0 !important;
		padding: 16px 16px 32px 16px;
		box-sizing: border-box;
		overflow: visible;
		border: none;
	}
	#page_wrap{
		position: static;
	}
	.page_title{
		display: none !important;
	}
	.p_title{
		margin: 8px 0 12px 0;
		font-size: 22px;
	}
	.p_text{
		margin-left: 0;
		font-size: 15px;
		letter-spacing: 0.04em;
		line-height: 1.7;
	}
	.p_text img{
		max-width: 100%;
		height: auto;
	}
	.news_date{
		width: auto;
		margin: 5px 0;
	}
	.news_content{
		display: inline-block;
		margin: 0 0 0 4px;
	}
	.space{
		height: 20px;
	}

	/* ---------- ゲーム紹介（u_1.html） ---------- */
	#game_intro{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 48px;
		width: auto;
		height: auto !important;
		margin-left: 0;
		overflow-y: auto;
	}

	#explain{
		display: none !important;
	}
}
/* 横向き（高さが低い）ではトップの文章とロゴを詰めて1画面に収める */
@media screen and (max-height: 480px) {
	.main_text{
		padding-top: 120px;
		font-size: 20px !important;
	}
	.main_img{
		margin-top: 12px;
	}
	.main_img img{
		width: auto;
		max-height: 120px;
	}
}
/* 幅768〜1099px：ロゴ（left:60%）が右端で切れるため、「ようこそ」の文章の下へ移す。
   ロゴの高さはメニューの上に収まるよう画面の高さに合わせる */
@media screen and (min-width: 768px) and (max-width: 1099px) and (min-height: 481px) {
	.main_img{
		left: 0;
		top: 47% !important;
		margin-left: 120px;
		padding-top: 16px;
	}
	.main_img img{
		width: auto;
		height: clamp(60px, calc(76vh - 400px), 260px);
	}
}
/* 高さ768px以下では top.html が文章を top:40%・20px に変えるので、ロゴの位置と高さも合わせる */
@media screen and (min-width: 768px) and (max-width: 1099px) and (min-height: 481px) and (max-height: 768px) {
	.main_img{
		top: 40% !important;
	}
	.main_img img{
		height: clamp(60px, calc(76vh - 330px), 260px);
	}
}