/* =========================================
   トップページ（HD）
========================================= */

/* 共通：セクション */
.hd-sec{
	padding-block:clamp(90px, 12vw, 170px);
}

.hd-sec__head{
	display:grid;
	gap:22px;
	margin-bottom:clamp(40px, 6vw, 80px);
	justify-items:start;
}

.hd-sec__head--row{
	grid-template-columns:1fr auto;
	align-items:end;
}

.hd-sec__head--row > div{
	display:grid;
	gap:22px;
	justify-items:start;
}

.site-main .hd-sec__title{
	font-family:var(--hd-en);
	font-variation-settings:"SOFT" 50, "WONK" 1;
	font-size:clamp(48px, 7.4vw, 112px);
	font-weight:400;
	line-height:.98;
	letter-spacing:-.03em;
}

.site-main .hd-sec__title em{
	font-style:italic;
	color:var(--hd-accent);
}

/* =========================================
   1. Hero
========================================= */
.hd-hero{
	position:relative;
	min-height:100svh;
	padding-top:clamp(130px, 15vw, 190px);
	padding-bottom:60px;
	overflow:hidden;
}

.hd-hero__inner{
	position:relative;
	display:grid;
	grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
	grid-template-areas:
		"label  visual"
		"title  visual"
		"foot   visual"
		"scroll scroll";
	column-gap:40px;
}

.hd-hero__label{
	grid-area:label;
	margin-bottom:28px;
}

.site-main .hd-hero__title{
	grid-area:title;
	position:relative;
	z-index:2;
	font-family:var(--hd-en);
	font-variation-settings:"SOFT" 60, "WONK" 1, "opsz" 144;
	font-size:clamp(72px, 12.4vw, 200px);
	font-weight:400;
	line-height:.9;
	letter-spacing:-.045em;
}

.hd-hero__title em{
	font-style:italic;
	font-weight:300;
	color:var(--hd-accent);
}

.hd-hero__foot{
	grid-area:foot;
	display:grid;
	grid-template-columns:auto minmax(0, 380px);
	gap:clamp(20px, 3vw, 48px);
	align-items:start;
	margin-top:clamp(40px, 5vw, 70px);
	transition-delay:.4s;
}

.hd-hero__catch{
	font-size:clamp(18px, 1.7vw, 24px);
	font-weight:700;
	line-height:1.7;
	letter-spacing:.06em;
}

.hd-hero__text{
	font-size:14px;
	font-weight:400;
	line-height:2.1;
	color:#3a3a38;
}

.hd-hero__visual{
	grid-area:visual;
	position:relative;
	align-self:center;
	justify-self:end;
	width:min(100%, 560px);
}

.hd-hero__disk{
	width:100%;
	will-change:transform;
}

.hd-hero__spark{
	top:-6%;
	right:4%;
	width:16%;
	transform:rotate(8deg);
}

.hd-hero__scroll{
	grid-area:scroll;
	justify-self:start;
	display:inline-flex;
	align-items:center;
	gap:12px;
	margin-top:60px;
	font-family:var(--hd-en);
	font-size:13px;
	letter-spacing:.1em;
}

.hd-hero__scroll::before{
	content:"";
	width:44px;
	height:44px;
	border:1px solid var(--hd-ink);
	border-radius:50%;
	background:
		linear-gradient(var(--hd-ink), var(--hd-ink)) center / 1px 12px no-repeat;
	animation:hd-scroll-dot 2.2s var(--hd-ease) infinite;
}

@keyframes hd-scroll-dot{
	0%   { background-position:center 8px; }
	60%  { background-position:center 24px; }
	100% { background-position:center 8px; }
}

@media (max-width:991px){
	.hd-hero__inner{
		grid-template-columns:1fr;
		grid-template-areas:
			"label"
			"title"
			"foot"
			"scroll";
	}
	.hd-hero__visual{
		position:absolute;
		top:-40px;
		right:calc(var(--hd-gutter) * -1 - 26vw);
		width:78vw;
		opacity:.45;
		z-index:0;
	}
	.hd-hero__foot{
		grid-template-columns:1fr;
	}
}

/* =========================================
   2. Marquee
========================================= */
.hd-marquee{
	overflow:hidden;
	padding-block:26px;
	border-block:1px solid var(--hd-line);
	background:var(--hd-paper);
}

.hd-marquee__track{
	display:flex;
	align-items:center;
	gap:clamp(24px, 3vw, 48px);
	width:max-content;
	animation:hd-marquee 32s linear infinite;
}

.hd-marquee:hover .hd-marquee__track{
	animation-play-state:paused;
}

.hd-marquee__item{
	font-family:var(--hd-en);
	font-variation-settings:"SOFT" 50, "WONK" 1;
	font-size:clamp(40px, 6vw, 88px);
	font-weight:400;
	line-height:1;
	letter-spacing:-.02em;
	white-space:nowrap;
}

.hd-marquee__item:nth-child(4n+3){
	font-style:italic;
	color:transparent;
	-webkit-text-stroke:1px var(--hd-ink);
}

.hd-marquee__dot{
	flex:none;
	width:clamp(26px, 3vw, 40px);
	aspect-ratio:1;
	border-radius:50%;
	background:
		radial-gradient(circle, var(--hd-paper) 0 16%, var(--hd-accent) 17% 44%, var(--hd-ink) 45%);
}

@keyframes hd-marquee{
	to { transform:translateX(-50%); }
}

/* =========================================
   3. About
========================================= */
.hd-about__inner{
	display:grid;
	grid-template-columns:minmax(120px, .3fr) 1fr;
	align-items:start;
	gap:40px;
}

.hd-about__statement{
	font-size:clamp(24px, 3.2vw, 46px);
	font-weight:700;
	line-height:1.65;
	letter-spacing:.02em;
}

.hd-about__statement mark{
	background:linear-gradient(transparent 62%, var(--hd-accent-soft) 62%);
	color:inherit;
}

.hd-about__spin{
	position:relative;
	display:inline-block;
	color:var(--hd-accent);
}

.hd-about__spin .hd-spark{
	top:-.3em;
	right:-.62em;
	width:.62em;
	color:var(--hd-accent);
}

.hd-about__text{
	max-width:640px;
	margin:40px 0 44px;
	font-size:15px;
	font-weight:400;
	line-height:2.2;
	transition-delay:.1s;
}

@media (max-width:767px){
	.hd-about__inner{
		grid-template-columns:1fr;
	}
}

/* =========================================
   4. Service
========================================= */
.hd-service{
	background:var(--hd-white);
	border-radius:clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
}

.hd-service__list{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:16px;
}

.hd-service__item a{
	position:relative;
	display:grid;
	grid-template-columns:auto 1fr;
	grid-template-areas:
		"no   en"
		".    ja"
		".    text"
		".    tags";
	column-gap:22px;
	row-gap:6px;
	height:100%;
	padding:clamp(28px, 3.4vw, 48px);
	border-radius:28px;
	background:var(--hd-paper);
	overflow:hidden;
	isolation:isolate;
	transition:color .5s var(--hd-ease);
}

/* ホバー：ディスクの穴のような円が広がって色が変わる */
.hd-service__item a::before{
	content:"";
	position:absolute;
	right:-10%;
	bottom:-30%;
	z-index:-1;
	width:60%;
	aspect-ratio:1;
	border-radius:50%;
	background:var(--hd-ink);
	transform:scale(0);
	transition:transform .8s var(--hd-ease);
}

.hd-service__item a:hover{
	color:#fff;
}

.hd-service__item a:hover::before{
	transform:scale(5);
}

.hd-service__no{
	grid-area:no;
	font-family:var(--hd-en);
	font-size:14px;
	font-weight:500;
	padding-top:.9em;
}

.hd-service__en{
	grid-area:en;
	font-family:var(--hd-en);
	font-variation-settings:"SOFT" 50, "WONK" 1;
	font-size:clamp(32px, 3.6vw, 52px);
	font-weight:400;
	line-height:1.1;
	letter-spacing:-.02em;
	transition:font-style .3s;
}

.hd-service__item a:hover .hd-service__en{
	font-style:italic;
}

.hd-service__ja{
	grid-area:ja;
	font-size:13px;
	font-weight:700;
	color:var(--hd-accent);
}

.hd-service__item a:hover .hd-service__ja{
	color:var(--hd-accent-light);
}

.hd-service__text{
	grid-area:text;
	margin-top:14px;
	font-size:14px;
	font-weight:400;
	line-height:2;
}

.hd-service__tags{
	grid-area:tags;
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin-top:16px;
}

.hd-service__tags span{
	padding:4px 12px;
	border:1px solid currentColor;
	border-radius:999px;
	font-size:11px;
	font-weight:500;
	opacity:.7;
}

.hd-service__arrow{
	position:absolute;
	top:clamp(28px, 3.4vw, 48px);
	right:clamp(28px, 3.4vw, 48px);
	display:grid;
	place-items:center;
	width:44px;
	height:44px;
	border-radius:50%;
	border:1px solid currentColor;
	transition:transform .5s var(--hd-ease), background .3s ease, color .3s ease;
}

.hd-service__arrow svg{
	width:12px;
}

.hd-service__item a:hover .hd-service__arrow{
	transform:rotate(45deg);
	background:var(--hd-accent);
	border-color:var(--hd-accent);
}

@media (max-width:767px){
	.hd-service__list{
		grid-template-columns:1fr;
	}
	.hd-service__arrow{
		width:36px;
		height:36px;
	}
}

/* =========================================
   5. Works
========================================= */
.hd-works{
	background:var(--hd-white);
	padding-top:0;
}

.hd-works__grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:40px 20px;
}

.hd-works__item:nth-child(3n+2){
	margin-top:60px;
}

.hd-works__thumb{
	display:grid;
	place-items:center;
	aspect-ratio:4 / 3;
	border-radius:22px;
	background:
		radial-gradient(circle at 70% 30%, var(--hd-accent-tint), transparent 55%),
		repeating-radial-gradient(circle at 70% 30%, transparent 0 14px, rgba(20,20,20,.04) 14px 15px),
		var(--hd-paper);
	font-family:var(--hd-en);
	font-style:italic;
	font-size:15px;
	color:var(--hd-sub);
	transition:transform .6s var(--hd-ease);
}

.hd-works__item:hover .hd-works__thumb{
	transform:scale(.97) rotate(-1deg);
}

.hd-works__cat{
	margin-top:16px;
	font-family:var(--hd-en);
	font-size:13px;
	color:var(--hd-accent);
}

.hd-works__title{
	margin-top:4px;
	font-size:15px;
	font-weight:700;
}

@media (max-width:767px){
	.hd-works__grid{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:28px 12px;
	}
	.hd-works__item:nth-child(3n+2){
		margin-top:0;
	}
	.hd-works__item:nth-child(2n){
		margin-top:40px;
	}
	.hd-sec__head--row{
		grid-template-columns:1fr;
	}
}

/* =========================================
   6. GRM Modules
========================================= */
.hd-grm{
	position:relative;
	padding-block:clamp(100px, 13vw, 180px);
	background:var(--hd-ink);
	color:#fff;
	overflow:hidden;
}

.hd-grm .hd-label{
	color:rgba(255,255,255,.7);
}

.hd-grm__inner{
	display:grid;
	grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
	gap:60px;
	align-items:center;
}

.site-main .hd-grm__title{
	margin:22px 0 30px;
	font-family:var(--hd-en);
	font-variation-settings:"SOFT" 50, "WONK" 1;
	font-size:clamp(64px, 9vw, 140px);
	font-weight:600;
	line-height:.9;
	letter-spacing:-.04em;
}

.hd-grm__title em{
	font-weight:300;
	color:var(--hd-accent);
}

.hd-grm__text{
	max-width:520px;
	margin-bottom:36px;
	font-size:14px;
	font-weight:400;
	line-height:2.1;
	color:rgba(255,255,255,.75);
}

/* モジュール名のチップ：ディスクの軌道のように少しずつ回転して並ぶ */
.hd-grm__chips{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:12px;
}

.hd-grm__chips li{
	padding:12px 22px;
	border:1px solid rgba(255,255,255,.2);
	border-radius:999px;
	font-family:var(--hd-en);
	font-size:clamp(14px, 1.4vw, 18px);
	rotate:calc((var(--i) - 5.5) * 1.6deg);
	transition:background .3s ease, color .3s ease, rotate .5s var(--hd-ease);
}

.hd-grm__chips li:nth-child(3n+1){
	background:rgba(255,255,255,.06);
}

.hd-grm__chips li:nth-child(5n+2){
	background:var(--hd-accent);
	border-color:var(--hd-accent);
}

.hd-grm__chips li:hover{
	background:#fff;
	color:var(--hd-ink);
	rotate:0deg;
}

@media (max-width:991px){
	.hd-grm__inner{
		grid-template-columns:1fr;
	}
	.hd-grm__chips{
		justify-content:flex-start;
	}
}

/* =========================================
   7. News
========================================= */
.hd-news__inner{
	display:grid;
	grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
	gap:40px;
}

.hd-news__list{
	border-top:1px solid var(--hd-ink);
}

.hd-news__list li{
	border-bottom:1px solid var(--hd-line);
}

.hd-news__list a{
	display:grid;
	grid-template-columns:auto auto 1fr auto;
	align-items:center;
	gap:20px;
	padding:26px 4px;
	transition:padding .5s var(--hd-ease), color .3s ease;
}

.hd-news__list a:hover{
	padding-inline:16px 4px;
	color:var(--hd-accent);
}

.hd-news__list time{
	font-family:var(--hd-en);
	font-size:14px;
}

.hd-news__cat{
	padding:3px 12px;
	border:1px solid currentColor;
	border-radius:999px;
	font-size:11px;
}

.hd-news__title{
	font-size:15px;
	font-weight:500;
	line-height:1.7;
}

.hd-news__arrow svg{
	width:12px;
}

.hd-news__empty{
	padding:26px 4px;
	font-size:14px;
	color:var(--hd-sub);
}

@media (max-width:767px){
	.hd-news__inner{
		grid-template-columns:1fr;
	}
	.hd-news__list a{
		grid-template-columns:auto 1fr;
		gap:8px 14px;
	}
	.hd-news__title{
		grid-column:1 / -1;
	}
	.hd-news__arrow{
		display:none;
	}
}