/* =========================================
   Top Page / トップページ専用（front-page.php）
   ・文字主体のレイアウト。左に英字の見出しラベル
   　（スクロール中は追従）、右に本文。
   ・functions.php の grmtheme_enqueue_top_assets() で
   　トップページのみ読み込む。
========================================= */

.home .head-margin{
	margin-top:0;
}

/* =========================================
   Hero / ファーストビュー
========================================= */
.grm-top-hero{
	position:relative;
	min-height:100svh;
	padding:140px 60px 60px;
	box-sizing:border-box;
	overflow:hidden;
}

/* 右半分の写真（ゆっくり拡大縮小して動かす） */
.grm-top-hero__photo{
	position:absolute;
	top:0;
	right:0;
	width:50%;
	height:100%;
	overflow:hidden;
	background:#e9e9ec;
}

.grm-top-hero__photo img{
	width:100%;
	height:100%;
	object-fit:cover;
	animation:grm-top-kenburns 24s ease-in-out infinite alternate;
}

/* =========================================
   Module Orbit / 写真未設定時：マーク＋周回するモジュール名
   ・マークは右端で半分切れる位置
   ・--d：軌道全体の直径
========================================= */
.grm-top-hero__photo.is-network{
	overflow:visible;
	background:none;
	pointer-events:none;
}

.grm-top-orbit{
	--d:min(80svh, 64vw);
	position:absolute;
	top:45%;
	left:84%;
	width:var(--d);
	height:var(--d);
	transform:translate(-50%, -50%);
	color:var(--color-main);
}

.grm-top-orbit__mark{
	position:absolute;
	top:50%;
	left:50%;
	width:calc(var(--d) * .72);
	transform:translate(-50%, -50%);
	animation:
		grm-top-orbit-size 23s ease-in-out infinite,
		grm-top-orbit-tone 13s ease-in-out infinite;
}

/* マークの大小と濃淡
   ・間隔も変化量もバラバラにし、大小（23秒）と濃淡（13秒）の周期も
   　ずらして、規則正しく見えないようにしている */
@keyframes grm-top-orbit-size{
	0%,100%{ transform:translate(-50%, -50%) scale(1); }
	9%     { transform:translate(-50%, -50%) scale(1.2); }
	17%    { transform:translate(-50%, -50%) scale(.85); }
	31%    { transform:translate(-50%, -50%) scale(.92); }
	38%    { transform:translate(-50%, -50%) scale(1.3); }
	52%    { transform:translate(-50%, -50%) scale(.7); }
	61%    { transform:translate(-50%, -50%) scale(1.05); }
	70%    { transform:translate(-50%, -50%) scale(.95); }
	83%    { transform:translate(-50%, -50%) scale(1.22); }
	91%    { transform:translate(-50%, -50%) scale(.8); }
}

@keyframes grm-top-orbit-tone{
	0%,100%{ color:#222; }
	18%    { color:#999; }
	27%    { color:#444; }
	49%    { color:#c4c4c4; }
	63%    { color:#666; }
	78%    { color:#bbb; }
}

.grm-top-orbit__mark svg{
	display:block;
	width:100%;
	height:auto;
	/* マーク自体も不規則に回転（名前の輪とは逆向き・別の周期）
	   ・回転の中心はGの円の中心（SVG内の座標 約280,280） */
	transform-origin:57.1% 57.1%;
	animation:grm-top-orbit-mark-spin 83s ease-in-out infinite;
}

@keyframes grm-top-orbit-mark-spin{
	0%{ transform:rotate(0deg); }
	7%{ transform:rotate(-40deg); }
	15%{ transform:rotate(-18deg); }
	24%{ transform:rotate(-110deg); }
	31%{ transform:rotate(-92deg); }
	42%{ transform:rotate(-205deg); }
	49%{ transform:rotate(-170deg); }
	58%{ transform:rotate(-250deg); }
	66%{ transform:rotate(-236deg); }
	77%{ transform:rotate(-330deg); }
	88%{ transform:rotate(-296deg); }
	100%{ transform:rotate(-360deg); }
}

/* 輪（回転する） */
.grm-top-orbit__ring{
	--r:calc(var(--d) * .46);
	--t:120s;
	position:absolute;
	top:50%;
	left:50%;
	width:0;
	height:0;
	margin:0;
	padding:0;
	list-style:none;
	animation:grm-top-orbit-spin var(--t) ease-in-out infinite;
}

.grm-top-orbit__ring--2{
	--r:calc(var(--d) * .62);
}

/* 名前の位置（輪の上に配置） */
.grm-top-orbit__ring li{
	position:absolute;
	top:0;
	left:0;
	transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
}

/* 今のサイズを基準に、1つずつタイミングをずらして拡大・縮小
   （大きい時は濃いグレー、小さい時は薄いグレー） */
.grm-top-orbit__ring li > span{
	position:absolute;
	top:0;
	left:0;
	transform:translate(-50%, -50%);
	animation:grm-top-orbit-scale 7s ease-in-out infinite;
	animation-delay:calc(var(--i) * -1.37s);
}

@keyframes grm-top-orbit-scale{
	0%,100%{ transform:translate(-50%, -50%) scale(1);   color:#777; }
	25%    { transform:translate(-50%, -50%) scale(2.8); color:#222; }
	60%    { transform:translate(-50%, -50%) scale(.5);  color:#c4c4c4; }
}

/* 輪の回転を打ち消して文字を常に水平に保つ */
.grm-top-orbit__ring li > span > span{
	display:block;
	font-size:13px;
	font-weight:500;
	line-height:1;
	white-space:nowrap;
	animation:grm-top-orbit-counter var(--t) ease-in-out infinite;
}

/* 回転：速さも向きも不規則に（進んだり少し戻ったりしながら1周）
   ・文字を水平に保つため、名前側は同じタイミングで逆回転させる */
@keyframes grm-top-orbit-spin{
	0%{ transform:rotate(0deg); }
	9%{ transform:rotate(55deg); }
	16%{ transform:rotate(30deg); }
	27%{ transform:rotate(120deg); }
	33%{ transform:rotate(105deg); }
	44%{ transform:rotate(190deg); }
	52%{ transform:rotate(150deg); }
	61%{ transform:rotate(230deg); }
	68%{ transform:rotate(215deg); }
	79%{ transform:rotate(300deg); }
	86%{ transform:rotate(265deg); }
	100%{ transform:rotate(360deg); }
}

@keyframes grm-top-orbit-counter{
	0%{ transform:rotate(0deg); }
	9%{ transform:rotate(-55deg); }
	16%{ transform:rotate(-30deg); }
	27%{ transform:rotate(-120deg); }
	33%{ transform:rotate(-105deg); }
	44%{ transform:rotate(-190deg); }
	52%{ transform:rotate(-150deg); }
	61%{ transform:rotate(-230deg); }
	68%{ transform:rotate(-215deg); }
	79%{ transform:rotate(-300deg); }
	86%{ transform:rotate(-265deg); }
	100%{ transform:rotate(-360deg); }
}


@keyframes grm-top-kenburns{
	from{ transform:scale(1) translate(0,0); }
	to  { transform:scale(1.12) translate(-2%,-2%); }
}

.grm-top-hero__inner{
	position:relative;
	z-index:1;
	display:flex;
	flex-direction:column;
	width:50%;
	min-height:calc(100svh - 200px);
	padding-right:60px;
	box-sizing:border-box;
}

.grm-top-hero__mark{
	font-size:clamp(64px, 9vw, 150px);
	font-weight:700;
	line-height:.9;
	letter-spacing:-.04em;
	color:var(--color-main);
}

/* GRM：最大ウェイト700に輪郭線を足してさらに太く */
.grm-top-hero__mark-strong{
	font-weight:700;
	-webkit-text-stroke:.025em currentColor;
}

/* Modules：細く */
.grm-top-hero__mark-light{
	font-weight:200;
}

/* 制作元の表記（GRM Modules の下） */
.grm-top-hero__by{
	margin-top:0;
	/* 「Modules」のMは文字の左に余白（サイドベアリング）があるため、
	   その分だけ右に寄せて、Mの縦線と「by」の左端を揃える
	   （Mの大きさ clamp(64px, 9vw, 150px) の約9.5%） */
	padding-left:calc(clamp(64px, 9vw, 150px) * .095);
	font-size:clamp(15px, 1.3vw, 19px);
	font-weight:600;
	letter-spacing:.02em;
	color:var(--color-main);
}

.grm-top-hero__by span{
	margin-right:.3em;
	font-weight:200;
	color:var(--color-sub);
}

.grm-top-hero__copy{
	max-width:520px;
	margin-top:clamp(60px, 14vh, 180px);
}

/* page.css の .site-main h1 に負けないよう .site-main を付ける */
.site-main .grm-top-hero__lead{
	font-size:clamp(28px, 2.8vw, 40px);
	white-space:nowrap;
	font-weight:600;
	line-height:1.5;
	letter-spacing:.02em;
	margin-bottom:32px;
}

.grm-top-hero__scroll{
	position:absolute;
	left:60px;
	bottom:40px;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:center;
	width:64px;
	height:64px;
	border:1px solid #ddd;
	border-radius:var(--radius-full);
	font-size:11px;
	font-weight:500;
	background:#fff;
}

.grm-top-hero__scroll:hover{
	background:var(--color-main);
	border-color:var(--color-main);
	color:#fff;
}

/* =========================================
   Common Text / 共通テキスト
========================================= */
.grm-top-lead{
	font-size:clamp(24px, 2.4vw, 34px);
	font-weight:600;
	line-height:1.55;
	letter-spacing:.02em;
	margin-bottom:36px;
}

.grm-top-text{
	font-size:15px;
	font-weight:500;
	line-height:2;
	margin-bottom:36px;
}

.grm-top-en-hl{
	font-size:15px;
	font-weight:600;
	line-height:1.6;
	color:var(--color-sub);
	margin-bottom:12px;
}

.grm-top-en-text{
	font-size:12px;
	line-height:1.9;
	color:var(--color-sub);
}

/* =========================================
   Section / 左ラベル＋右本文
========================================= */
.grm-top-sec{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:60px;
	max-width:var(--container-wide);
	margin:0 auto;
	padding:160px 60px 0;
	box-sizing:border-box;
}

.grm-top-sec:last-of-type{
	padding-bottom:160px;
}

.grm-top-sec__head{
	align-self:start;
	position:sticky;
	top:120px;
}

.grm-top-sec__title{
	font-size:clamp(30px, 3vw, 44px);
	font-weight:600;
	letter-spacing:0;
}

.grm-top-sec__title sup{
	margin-left:6px;
	font-size:14px;
	font-weight:500;
	vertical-align:super;
}

.grm-top-sec__body{
	max-width:640px;
}

/* =========================================
   Modules / モジュール一覧
========================================= */
.grm-top-modules{
	list-style:none;
	margin:0;
	padding:0;
	border-bottom:1px solid #e6e6e6;
}

.grm-top-modules__item{
	display:grid;
	grid-template-columns:72px 1fr auto;
	gap:0 20px;
	align-items:baseline;
	padding:24px 0;
	border-top:1px solid #e6e6e6;
}

.grm-top-modules__no{
	font-size:40px;
	font-weight:100;
	line-height:1;
	letter-spacing:-.02em;
	transform:translateY(12px);
}

.grm-top-modules__ver{
	font-size:12px;
	font-weight:500;
	color:var(--color-sub);
}

/* 説明ページ未公開のモジュールの印 */
.grm-top-modules__soon{
	display:inline-block;
	margin-right:10px;
	padding:1px 8px;
	border:1px solid #dcdce0;
	border-radius:999px;
	font-size:10px;
	font-weight:400;
	letter-spacing:.04em;
	line-height:1.6;
	vertical-align:1px;
	color:var(--color-sub);
}

.grm-top-modules__name{
	font-size:18px;
	font-weight:600;
	letter-spacing:0;
	line-height:1.4;
}

/* 説明ページがあるモジュールは行（ボックス）全体をクリック可能にする
   （名前のリンクを::afterで行いっぱいに広げる） */
.grm-top-modules__item{
	position:relative;
}

.grm-top-modules__name a::after{
	content:"";
	position:absolute;
	inset:0;
}

/* リンクのある行のホバー（unium.jp のNews一覧と同じ動き）
   ・行の背景がうっすらグレーになり、
   　左の番号は右へ、名前・説明・バージョンは左へ、
   　それぞれ12pxずつ内側に寄る */
/* 位置はリンクの有無に関係なく全行同じにして、縦の並びを揃える */
.grm-top-modules__item{
	padding-inline:12px;
	background-color:rgba(237, 238, 242, 0);
	transition:background-color .3s cubic-bezier(.82, .02, .83, .86);
}

.grm-top-modules__item .grm-top-modules__no{
	translate:-12px;
	transition:translate .3s cubic-bezier(.82, .02, .83, .86);
}

.grm-top-modules__item .grm-top-modules__main,
.grm-top-modules__item .grm-top-modules__ver{
	translate:12px;
	transition:translate .3s cubic-bezier(.82, .02, .83, .86);
}

@media (hover:hover) and (pointer:fine){

	.grm-top-modules__item:has(.grm-top-modules__name a):hover{
		background-color:rgba(237, 238, 242, .5);
		transition:background-color .3s cubic-bezier(.4, 1.07, 1, 1);
	}

	.grm-top-modules__item:has(.grm-top-modules__name a):hover .grm-top-modules__no,
	.grm-top-modules__item:has(.grm-top-modules__name a):hover .grm-top-modules__main,
	.grm-top-modules__item:has(.grm-top-modules__name a):hover .grm-top-modules__ver{
		translate:0;
		transition:translate .3s cubic-bezier(.4, 1.07, 1, 1);
	}

}

.grm-top-modules__desc{
	margin-top:8px;
	font-size:13px;
	line-height:1.8;
	color:var(--color-sub);
}

/* =========================================
   News / お知らせ
========================================= */
.grm-top-news{
	list-style:none;
	margin:0;
	padding:0;
	border-bottom:1px solid #e6e6e6;
}

.grm-top-news a{
	display:grid;
	grid-template-columns:100px 1fr;
	gap:20px;
	padding:22px 0;
	border-top:1px solid #e6e6e6;
	font-size:15px;
	font-weight:500;
}

.grm-top-news time{
	font-size:12px;
	color:var(--color-sub);
	line-height:2.2;
}

.grm-top-news a:hover span{
	text-decoration:underline;
	text-underline-offset:4px;
}

/* =========================================
   Tablet / SP
========================================= */
@media (max-width:991px){

	.grm-top-hero{
		display:flex;
		flex-direction:column;
		min-height:0;
		padding:100px 20px 40px;
	}

	.grm-top-hero__photo{
		order:2;
		position:relative;
		width:auto;
		height:56vw;
		margin:40px -20px 0;
	}

	.grm-top-hero__inner{
		width:auto;
		min-height:0;
		padding-right:0;
	}

	.grm-top-hero__scroll{
		display:none;
	}

	/* 放射図はスマホでも下に回さず、タイトルの右側（文字の背面）に薄く表示 */
	.grm-top-hero__photo.is-network{
		position:absolute;
		top:0;
		right:0;
		width:100%;
		height:100%;
		margin:0;
		overflow:hidden;
	}

	.grm-top-orbit{
		--d:130vw;
		top:48%;
		left:92%;
		opacity:.3;
	}

	.grm-top-orbit__ring li > span > span{
		font-size:9px;
	}

	.grm-top-hero__copy{
		margin-top:48px;
	}

	.grm-top-sec{
		grid-template-columns:1fr;
		gap:28px;
		padding:100px 20px 0;
	}

	.grm-top-sec:last-of-type{
		padding-bottom:100px;
	}

	.grm-top-sec__head{
		position:static;
	}

}

@media (max-width:767px){

	.grm-top-modules__item{
		grid-template-columns:52px 1fr;
	}

	.grm-top-modules__no{
		font-size:30px;
	}

	.grm-top-modules__ver{
		grid-column:2;
		margin-top:6px;
	}

	.grm-top-news a{
		grid-template-columns:1fr;
		gap:4px;
	}

}

@media (prefers-reduced-motion:reduce){
	.grm-top-hero__photo img{
		animation:none;
	}

	.grm-top-orbit__mark,
	.grm-top-orbit__mark svg,
	.grm-top-orbit__ring,
	.grm-top-orbit__ring li > span,
	.grm-top-orbit__ring li > span > span{
		animation:none;
	}
}

/* =========================================
   各セクションの「一覧を見る」ボタン
   ・枠線のピル型。右に丸い矢印、ホバーで黒く塗りつぶす
========================================= */
.grm-top-more{
	display:inline-flex;
	align-items:center;
	gap:14px;
	margin-top:40px;
	padding:10px 10px 10px 26px;
	border:1px solid var(--color-main);
	border-radius:var(--radius-full, 999px);
	font-size:14px;
	font-weight:600;
	color:var(--color-main);
	text-decoration:none;
	transition:background-color .4s ease, color .4s ease;
}

.grm-top-more__arrow{
	position:relative;
	width:32px;
	height:32px;
	border-radius:50%;
	background:var(--color-main);
	transition:background-color .4s ease, transform .4s ease;
}

.grm-top-more__arrow::before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:7px;
	height:7px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	transform:translate(-65%, -50%) rotate(45deg);
	transition:border-color .4s ease;
}

.grm-top-more:hover{
	background:var(--color-main);
	color:#fff;
}

.grm-top-more:hover .grm-top-more__arrow{
	background:#fff;
	transform:translateX(4px);
}

.grm-top-more:hover .grm-top-more__arrow::before{
	border-color:var(--color-main);
}