@charset "utf-8";
/* CSS Document */

/* Common
------------------------------ */
html { font-size: 62.5%; font-family: "TASA Orbiter", sans-serif; }
body { font-size: 1.6em; background: #111e33; color: rgba(235,235,235,1); } 

header,
main,
aside,
footer { overflow: hidden; }

footer { padding: 1em 0; background: rgba(0,0,0,0.66); }

/* Margin
------------------------------ */
.mt {
	/*
	上限 = var(--mt)px ／ 可変 = (var(--mt)/750)*親幅%
	上限 = var(--mt)px ／ 可変 = (var(--mt)/750)*親幅vw
	*/
	margin-block-start: min(
		calc(var(--mt) * 1px),
		calc(var(--mt) / 750 * 100vw)
	);
}

/* Index
------------------------------ */
.banner {
	width: 18%;
	position: relative;
	display: inline-block;
	line-height: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .2s ease;
}

@media (min-width:768px) {
	.banner {
		width: 13%;
		position: relative;
		display: inline-block;
		line-height: 0;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: transform .2s ease;
	}
}

.banner img {
	display: block;
	transition: transform .35s ease, filter .35s ease;
	will-change: transform, filter;
}

/* ==========================
   ② ホバー：ふわっと浮き＋フチ発光（::after）
   ========================== */
.banner::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 6px solid rgba(0, 150, 255, .6);
	transform: scale(.90) rotate(45deg);
	opacity: 0;
	box-shadow: none;
	transition: opacity .35s ease, transform .35s ease, box-shadow .35s ease;
}

.banner:hover img,
.banner:focus-visible img {
	transform: scale(1.04);
	filter: brightness(1.05);
}

.banner:hover::after,
.banner:focus-visible::after {
	opacity: 1;
	transform: scale(1.01) rotate(45deg);
	box-shadow: 0 0 22px rgba(0, 150, 255, .45);
}

/* クリック中：沈む（:active） */
.banner:active {
	transform: scale(.985);
}

.banner:active img {
	transform: scale(1.01);
	filter: brightness(.97);
}

/* クリック直後：閃光→収束（flashクラスで0.38s） */
.banner.flash::after {
	animation: clickFlash .38s ease-out both;
}

@keyframes clickFlash {
	0% {
		opacity: 1;
		transform: scale(.98) rotate(45deg);
		box-shadow:
			0 0 35px rgba(0, 200, 255, .9), 0 0 60px rgba(0, 200, 255, .55);
	}

	100% {
		opacity: 1;
		/* hover中は継続表示 */
		transform: scale(1.03) rotate(45deg);
		box-shadow: 0 0 22px rgba(0, 150, 255, .45);
		/* 余韻として収束 */
	}
}

/* 低モーション設定に配慮 */
@media (prefers-reduced-motion: reduce) {

	.banner,
	.banner img,
	.banner::before,
	.banner::after {
		transition: none;
		animation: none;
	}
}

/* バナー内だけ、画像の “グローバル max-width:100%/height:auto” を無効化し、
   .banner の箱サイズに “幅・高さとも100%” でフィットさせる */
.banner .logo{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;  /* ← これが効くとズレが止まる */
  object-fit:contain;
}

/* SVG も箱にピッタリ重ねる（inset:0; をベースにする） */
.orbit{
  position:absolute;
  inset: 0;
  pointer-events:none;
}

/* 周回光を外側へ出したい量は “等倍拡大” で対称に広げる（片側だけズレない） */
.banner{ --orbit-scale: 1.2; }       /* 旧 inset:-5% 相当の拡大率 1.10*/
.orbit{ transform: scale(var(--orbit-scale)); transform-origin:50% 50%; }

/* ここが“周回する光” */
.orbit-path {
	/* ダッシュ長: 走る光の長さ 12 / 残り 88（合計=pathLength 100） */
	stroke-dasharray: 50 50;
	stroke-dashoffset: 0;
	animation: dash 3.2s linear infinite;
	opacity: 0.9;	/* 0.7 全体の強さ（0.4〜0.8で調整） */
	stroke-width: 1.5%; /* 1.5 */
}
@keyframes dash {
	to {
		stroke-dashoffset: -100;
	}
	/* パス1周＝100 */
}

/* （任意）回転をかけている場合は、画像とSVGの両方に同じ回転を適用して基準を一致 */
.banner{ --theta: 0deg; }             /* 45deg などにするならここを同じ値に */
.banner .logo, .orbit{ transform: rotate(var(--theta)) scale(var(--orbit-scale)); }