@charset "utf-8";

/* ===============================
   ビューポート安定化（モバイル対策）
=============================== */
body#top,
header {
	height: 100dvh;
}

/* ===============================
   ロゴ（JSで width 制御）
=============================== */
#toplogo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: block;
	z-index: 3;
	animation: fade 2.5s both;
	animation-delay: 0.2s;
}
#toplogo img {
	display: block;
	width: 100%;
	height: auto;
}

/* ===============================
   メニュー基準面（画面いっぱい）
   ※正方形固定しない
=============================== */
#menubar-top {
	position: absolute;
	inset: 0;
	z-index: 2;
}

#menubar-top > ul.inner {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	transform-origin: 50% 50%;
}

/* ===============================
   li はJSが left/top(px) を入れる
=============================== */
#menubar-top li {
	position: absolute;
	transform: translate(-50%, -50%);
	animation: fade 3s both;
}

#menubar-top li#menu1 { animation-delay: 0.4s; }
#menubar-top li#menu2 { animation-delay: 0.6s; }
#menubar-top li#menu3 { animation-delay: 0.8s; }
#menubar-top li#menu4 { animation-delay: 1.0s; }
#menubar-top li#menu5 { animation-delay: 1.2s; }
#menubar-top li#menu6 { animation-delay: 1.4s; }

/* ===============================
   円ボタン
   vmin にして端末比率で暴れにくくする
=============================== */
#menubar-top li a {
	text-decoration: none;
	display: block;
	border: 5px solid #fff;
	border-radius: 50%;
	text-align: center;
	color: #fff;

	width: clamp(56px, 15vmin, 230px);
	height: clamp(56px, 15vmin, 230px);
	line-height: clamp(56px, 15vmin, 230px);
	font-size: clamp(9px, 1.2vmin, 16px);

	transition: transform 0.25s, box-shadow 0.25s;
	overflow: hidden;
}

#menubar-top li a:hover {
	color: #fff;
	box-shadow: 0 0 80px #fff;
	transform: scale(1.1);
}

/* 大きいボタン */
#menubar-top li#menu1 a,
#menubar-top li#menu2 a {
	width: clamp(72px, 19vmin, 300px);
	height: clamp(72px, 19vmin, 300px);
	line-height: clamp(72px, 19vmin, 300px);
	font-size: clamp(10px, 1.5vmin, 18px);
}

/* ===============================
   フェード
=============================== */
@keyframes fade {
	from { opacity: 0; }
	to { opacity: 1; }
}