/* =========================================
   HD(HARD DISK) サイト共通デザイン
   ・白黒を基調に、ロゴの「遊び心」（跳ねる文字・d の穴・i のきらめき）を
   　動きとアクセントで表現する。差し色は1色で、時間帯によって変わる（朝・昼・夕方・夜）。
   ・英字見出し：Fraunces（形が少し揺れる“WONK”軸を使ったセリフ）
   ・和文：Zen Kaku Gothic New
   ・サイン的なモチーフ＝「ディスク」（同心円の溝＋中心の穴）。
   　ヒーロー・メニュー・ローディング等で回転させて使う。
========================================= */
:root{
	--hd-ink:#141414;
	--hd-paper:#f3f2ee;
	--hd-white:#ffffff;
	--hd-sub:#7a7a76;
	--hd-line:rgba(20,20,20,.14);
	--hd-accent:#b23a2b;
	--hd-accent-soft:#f3dcd6;
	--hd-accent-light:#e9a497;
	--hd-accent-tint:rgba(178,58,43,.14);
	--hd-en:"Fraunces", "Times New Roman", serif;
	--hd-ja:"Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	--hd-gutter:clamp(20px, 4.4vw, 64px);
	--hd-max:1440px;
	--hd-ease:cubic-bezier(.22, 1, .36, 1);
	--hd-ease-io:cubic-bezier(.76, 0, .24, 1);

	/* テーマ共通変数（base／form.css等）もHDの値に揃える */
	--font-base:var(--hd-ja);
	--color-main:var(--hd-ink);
	--color-text:var(--hd-ink);
	--color-sub:var(--hd-sub);
	--color-gray:#ebe9e3;
}

/* =========================================
   時間帯で差し色を変える
   ・閲覧者の端末の時刻で <html data-hd-time="…"> を付ける（hd-functions.php）
   　朝 5〜10時：橙／昼 10〜17時：弁柄（:root の標準）／
   　夕方 17〜20時：緑／夜 20〜5時：くすんだ青
   ・判定はページを開いた時だけ。URLに ?hd-time=morning 等を付けると確認できる
========================================= */
:root[data-hd-time="morning"]{
	--hd-accent:#ee8a1f;
	--hd-accent-soft:#fce7cf;
	--hd-accent-light:#f6be80;
	--hd-accent-tint:rgba(238,138,31,.14);
}

:root[data-hd-time="evening"]{
	--hd-accent:#3e845a;
	--hd-accent-soft:#daeadf;
	--hd-accent-light:#9cc8ac;
	--hd-accent-tint:rgba(62,132,90,.14);
}

:root[data-hd-time="night"]{
	--hd-accent:#3a5a8c;
	--hd-accent-soft:#dde4f0;
	--hd-accent-light:#a9bcdc;
	--hd-accent-tint:rgba(58,90,140,.14);
}

html{
	scroll-behavior:smooth;
}

body{
	background:var(--hd-paper);
	color:var(--hd-ink);
	font-family:var(--hd-ja);
	font-weight:500;
	letter-spacing:.03em;
	-webkit-font-smoothing:antialiased;
}

::selection{
	background:var(--hd-accent);
	color:#fff;
}

/* 一覧の黒丸を消す（テーマ既存の .site-main ul のスタイルを打ち消す） */
/* :where() で詳細度を0にして、各コンポーネント側の余白指定を優先させる */
:where(.hd-list-reset, .hd-list-reset > li, .hd-menu__list, .hd-menu__list > li){
	margin:0;
	padding:0;
	list-style:none;
}

.site-main .hd-list-reset > li::marker{
	content:none;
}

.hd-wrap{
	width:100%;
	max-width:var(--hd-max);
	margin-inline:auto;
	padding-inline:var(--hd-gutter);
}

/* ヘッダー固定分の余白（旧テーマの値を上書き） */
.head-margin{
	margin-top:0 !important;
}

.hd-en{
	font-family:var(--hd-en);
	font-variation-settings:"SOFT" 50, "WONK" 1;
	letter-spacing:-.01em;
}

/* 小見出しラベル（● 付き） */
.hd-label{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-family:var(--hd-en);
	font-size:14px;
	font-weight:500;
	letter-spacing:.06em;
}

.hd-label::before{
	content:"";
	width:9px;
	height:9px;
	border-radius:50%;
	background:var(--hd-accent);
}

/* =========================================
   ボタン
========================================= */
.hd-btn{
	--bg:var(--hd-ink);
	--fg:#fff;
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:18px;
	padding:14px 16px 14px 26px;
	border-radius:999px;
	background:var(--bg);
	color:var(--fg);
	font-size:14px;
	font-weight:700;
	letter-spacing:.06em;
	overflow:hidden;
	isolation:isolate;
	transition:color .4s var(--hd-ease);
}

.hd-btn::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:var(--hd-accent);
	border-radius:inherit;
	transform:scaleX(0);
	transform-origin:right center;
	transition:transform .5s var(--hd-ease);
}

.hd-btn:hover::before{
	transform:scaleX(1);
	transform-origin:left center;
}

.hd-btn__arrow{
	display:grid;
	place-items:center;
	width:30px;
	height:30px;
	border-radius:50%;
	background:#fff;
	color:var(--hd-ink);
	transition:transform .5s var(--hd-ease);
}

.hd-btn__arrow svg{
	width:12px;
	height:12px;
}

.hd-btn:hover .hd-btn__arrow{
	transform:rotate(-45deg);
}

.hd-btn--line{
	--bg:transparent;
	--fg:var(--hd-ink);
	box-shadow:inset 0 0 0 1px var(--hd-ink);
}

.hd-btn--line:hover{
	color:#fff;
}

.hd-btn--line .hd-btn__arrow{
	background:var(--hd-ink);
	color:#fff;
}

.hd-btn--light{
	--bg:#fff;
	--fg:var(--hd-ink);
}

.hd-btn--light:hover{
	color:#fff;
}

.hd-btn--light .hd-btn__arrow{
	background:var(--hd-ink);
	color:#fff;
}

/* =========================================
   ディスク（サインモチーフ）
   ・ハードディスクのプラッター（銀色の円盤）。
   　金属の反射（conic-gradient）は固定、中央のハブと
   　ぐるりと回る英字だけが回転する。
   ・hd_disk($text, true) で読み取りアーム付き（アームがゆっくり動く）。
========================================= */
.hd-disk{
	position:relative;
	aspect-ratio:1;
	border-radius:50%;
	background:
		repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.025) 3px 4px),
		conic-gradient(from 12deg, #d9d9d4, #fbfbf9 9%, #b8b8b2 21%, #eeeeea 33%, #c6c6c0 47%, #fdfdfb 58%, #b9b9b3 72%, #f0f0ec 85%, #d9d9d4);
	box-shadow:
		inset 0 0 0 1px rgba(20,20,20,.12),
		inset 0 0 0 10px rgba(255,255,255,.35),
		0 30px 60px -30px rgba(20,20,20,.35);
}

.hd-disk__spin{
	position:absolute;
	inset:0;
	rotate:var(--hd-scroll-rot, 0deg);
	animation:hd-spin 22s linear infinite;
}

/* 中央のハブ（黒い円＋差し色の穴） */
.hd-disk__label{
	position:absolute;
	inset:36%;
	border-radius:50%;
	background:
		radial-gradient(circle, var(--hd-accent) 0 22%, var(--hd-ink) 23%);
	box-shadow:0 0 0 6px rgba(20,20,20,.08);
}

/* ハブのネジ */
.hd-disk__label::before{
	content:"";
	position:absolute;
	inset:14%;
	border-radius:50%;
	background:
		radial-gradient(circle at 50% 8%, #9a9a96 0 5%, transparent 6%),
		radial-gradient(circle at 92% 50%, #9a9a96 0 5%, transparent 6%),
		radial-gradient(circle at 50% 92%, #9a9a96 0 5%, transparent 6%),
		radial-gradient(circle at 8% 50%, #9a9a96 0 5%, transparent 6%);
}

/* ※ 以前は inset:24% だけで大きさを決めていたが、iPhone（Safari）では
   　SVG は inset で引き伸ばされず、本来の大きさ（ディスクの幅いっぱい）で
   　表示されるため、回る文字がディスクより大きく中心からずれて回っていた
   　（トップのディスク・フッターのディスクとも）。位置と大きさを明示する。 */
.hd-disk__text{
	position:absolute;
	top:24%;
	left:24%;
	width:52%;
	height:52%;
	overflow:visible;
}

.hd-disk__text text{
	fill:var(--hd-ink);
	font-family:var(--hd-en);
	font-size:7.4px;
	font-weight:600;
	letter-spacing:.18em;
}

/* 読み取りアーム */
.hd-disk__arm{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	overflow:visible;
	transform-origin:94% 92%;
	animation:hd-seek 6s var(--hd-ease-io) infinite;
	filter:drop-shadow(0 10px 12px rgba(20,20,20,.25));
}

@keyframes hd-seek{
	0%, 100% { transform:rotate(0deg); }
	30%      { transform:rotate(-9deg); }
	55%      { transform:rotate(-4deg); }
	80%      { transform:rotate(-12deg); }
}

/* きらめき（ロゴの i の上の線） */
.hd-spark{
	position:absolute;
	width:18%;
	aspect-ratio:1;
	color:var(--hd-ink);
}

.hd-spark path{
	stroke:currentColor;
	stroke-width:6;
	stroke-linecap:round;
	fill:none;
	animation:hd-spark 2.4s var(--hd-ease) infinite;
}

.hd-spark path:nth-child(2){ animation-delay:.12s; }
.hd-spark path:nth-child(3){ animation-delay:.24s; }

@keyframes hd-spin{
	to { transform:rotate(360deg); }
}

@keyframes hd-spark{
	0%, 55%, 100% { opacity:1; transform:none; }
	70% { opacity:0; transform:translate(-4px, 4px) scale(.6); }
}

/* =========================================
   ヘッダー
========================================= */
/* ページ上部ではページと一緒に流れ、少しスクロールすると
   上からスッと降りてきて固定される（.is-stuck、assets/js/hd.js）。
   スクロール中にナビが消えることはない。 */
.hd-header{
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index:1000;
	padding-top:18px;
	pointer-events:none;
}

.hd-header.is-stuck{
	position:fixed;
	animation:hd-header-drop .7s var(--hd-ease) both;
}

@keyframes hd-header-drop{
	from { transform:translateY(-130%); }
	to   { transform:none; }
}

/* メニューを開いている間は常に固定 */
.is-menu-open .hd-header{
	position:fixed;
}

.hd-header__inner{
	display:flex;
	align-items:stretch;
	justify-content:space-between;
	gap:24px;
}

.hd-header__logo,
.hd-header__right{
	pointer-events:auto;
}

/* ロゴの白い下地も、右側のメニューと同じ左右が丸い形（高さも揃える） */
.hd-header__logo{
	display:flex;
	align-items:center;
	padding:0 24px;
	border-radius:999px;
	background:rgba(243,242,238,.72);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	transition:transform .6s cubic-bezier(.3, 1.8, .5, 1);
}

/* マウスを乗せると、ロゴの跳ねる文字のように大きく傾いて弾む */
.hd-header__logo:hover{
	transform:rotate(-8deg) scale(1.08);
}

.hd-header__logo img{
	transition:transform .6s cubic-bezier(.3, 1.8, .5, 1);
}

.hd-header__logo:hover img{
	transform:rotate(4deg) translateY(-2px);
}

.hd-header__logo img{
	display:block;
	width:clamp(80px, 7.6vw, 106px);
	height:auto;
}

.hd-header__right{
	display:flex;
	align-items:center;
	gap:10px;
	padding:6px;
	border-radius:999px;
	background:rgba(243,242,238,.72);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
}

.hd-header__nav{
	display:flex;
	gap:4px;
	margin-right:6px;
}

.hd-header__nav a{
	display:block;
	padding:10px 14px;
	border-radius:999px;
	font-family:var(--hd-en);
	font-size:15px;
	font-weight:500;
	transition:background .3s ease;
}

.hd-header__nav a:hover{
	background:rgba(20,20,20,.06);
}

.hd-header__contact{
	padding:12px 22px;
	border-radius:999px;
	background:var(--hd-accent);
	color:#fff;
	font-family:var(--hd-en);
	font-size:15px;
	font-weight:600;
	transition:background .3s ease;
}

.hd-header__contact:hover{
	background:var(--hd-ink);
}

.hd-menu-btn{
	position:relative;
	display:grid;
	place-items:center;
	width:46px;
	height:46px;
	border-radius:50%;
	background:var(--hd-ink);
	color:#fff;
	cursor:pointer;
}

.hd-menu-btn span{
	position:absolute;
	width:16px;
	height:1.5px;
	background:currentColor;
	transition:transform .4s var(--hd-ease), top .4s var(--hd-ease);
}

.hd-menu-btn span:nth-child(1){ transform:translateY(-3px); }
.hd-menu-btn span:nth-child(2){ transform:translateY(3px); }

.is-menu-open .hd-menu-btn span:nth-child(1){ transform:rotate(45deg); }
.is-menu-open .hd-menu-btn span:nth-child(2){ transform:rotate(-45deg); }

/* メニューを開いている間は、ヘッダー右側をボタンだけにする */
.hd-header__nav,
.hd-header__contact{
	transition:opacity .3s ease;
}

.hd-header__right{
	transition:background .3s ease;
}

.is-menu-open .hd-header__nav,
.is-menu-open .hd-header__contact{
	opacity:0;
	pointer-events:none;
}

.is-menu-open .hd-header__right{
	background:transparent;
	backdrop-filter:none;
	-webkit-backdrop-filter:none;
}

.is-menu-open .hd-menu-btn{
	background:#fff;
	color:var(--hd-ink);
}

@media (max-width:991px){
	.hd-header__nav{
		display:none;
	}
	.hd-header__contact{
		padding:11px 18px;
		font-size:14px;
	}
}

/* =========================================
   全画面メニュー
========================================= */
.hd-menu{
	position:fixed;
	inset:0;
	z-index:999;
	display:flex;
	align-items:center;
	background:var(--hd-ink);
	color:#fff;
	clip-path:circle(0 at calc(100% - 50px) 42px);
	transition:clip-path .8s var(--hd-ease-io);
	visibility:hidden;
}

.is-menu-open .hd-menu{
	clip-path:circle(150% at calc(100% - 50px) 42px);
	visibility:visible;
}

.is-menu-open{
	overflow:hidden;
}

.hd-menu__inner{
	display:grid;
	grid-template-columns:1fr auto;
	align-items:center;
	gap:40px;
	width:100%;
}

.hd-menu__list{
	counter-reset:hd-menu;
}

.hd-menu__list li{
	counter-increment:hd-menu;
	overflow:hidden;
}

.hd-menu__list a{
	display:flex;
	align-items:baseline;
	gap:18px;
	padding:4px 0;
	font-family:var(--hd-en);
	font-variation-settings:"SOFT" 50, "WONK" 1;
	font-size:clamp(40px, 7vw, 96px);
	font-weight:400;
	line-height:1.08;
	letter-spacing:-.02em;
	transform:translateY(110%);
	transition:transform .8s var(--hd-ease), color .3s ease;
}

.hd-menu__list a::before{
	content:"0" counter(hd-menu);
	font-family:var(--hd-ja);
	font-size:13px;
	font-weight:500;
	letter-spacing:.08em;
	color:rgba(255,255,255,.45);
	transform:translateY(-1.6em);
}

.hd-menu__list a small{
	font-family:var(--hd-ja);
	font-size:13px;
	font-weight:500;
	letter-spacing:.08em;
	color:rgba(255,255,255,.55);
}

.hd-menu__list a:hover{
	color:var(--hd-accent);
	font-style:italic;
}

.is-menu-open .hd-menu__list a{
	transform:none;
}

.is-menu-open .hd-menu__list li:nth-child(1) a{ transition-delay:.25s; }
.is-menu-open .hd-menu__list li:nth-child(2) a{ transition-delay:.31s; }
.is-menu-open .hd-menu__list li:nth-child(3) a{ transition-delay:.37s; }
.is-menu-open .hd-menu__list li:nth-child(4) a{ transition-delay:.43s; }
.is-menu-open .hd-menu__list li:nth-child(5) a{ transition-delay:.49s; }
.is-menu-open .hd-menu__list li:nth-child(6) a{ transition-delay:.55s; }

.hd-menu__side{
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:28px;
}

.hd-menu__disk{
	width:clamp(160px, 22vw, 320px);
}

.hd-menu__sub{
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:8px;
	font-size:13px;
	color:rgba(255,255,255,.6);
}

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

@media (max-width:767px){
	.hd-menu__inner{
		grid-template-columns:1fr;
	}
	.hd-menu__side{
		align-items:flex-start;
	}
	.hd-menu__disk{
		display:none;
	}
	.hd-menu__sub{
		align-items:flex-start;
	}
}

/* =========================================
   下層ページの見出し（共通）
========================================= */
.hd-page-hero{
	padding-top:clamp(140px, 16vw, 200px);
	padding-bottom:clamp(40px, 6vw, 80px);
}

.hd-page-hero__label{
	margin-bottom:22px;
}

.site-main .hd-page-hero__title{
	font-family:var(--hd-en);
	font-variation-settings:"SOFT" 50, "WONK" 1;
	font-size:clamp(56px, 10vw, 150px);
	font-weight:400;
	line-height:.95;
	letter-spacing:-.03em;
}

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

.hd-page-hero__lead{
	max-width:640px;
	margin-top:32px;
	font-size:clamp(15px, 1.3vw, 17px);
	line-height:2.1;
}

/* 旧テーマの固定ページタイトル（page.php）も同じ見た目に */
.site-main .grm-single-head{
	padding-top:clamp(140px, 16vw, 200px);
	padding-bottom:clamp(30px, 4vw, 50px);
}

.site-main .grmrc-cat-header .grm-index-title,
.site-main .grm-single-head h1{
	font-family:var(--hd-en);
	font-variation-settings:"SOFT" 50, "WONK" 1;
	font-size:clamp(48px, 8vw, 120px);
	font-weight:400;
	line-height:1;
	letter-spacing:-.03em;
}

.site-main .grm-container{
	max-width:var(--hd-max);
	padding-inline:var(--hd-gutter);
}

nav.grm-breadcrumb{
	display:none;
}

/* =========================================
   スクロールで現れる
========================================= */
.hd-reveal{
	opacity:0;
	transform:translateY(40px);
	transition:opacity 1s var(--hd-ease), transform 1s var(--hd-ease);
}

.hd-reveal.is-in{
	opacity:1;
	transform:none;
}

/* 1行ずつせり上がる見出し */
.hd-lines > span{
	display:block;
	overflow:hidden;
	padding-bottom:.06em;
}

.hd-lines > span > span{
	display:block;
	transform:translateY(105%);
	transition:transform 1.1s var(--hd-ease);
}

.hd-lines.is-in > span > span{
	transform:none;
}

.hd-lines.is-in > span:nth-child(2) > span{ transition-delay:.1s; }
.hd-lines.is-in > span:nth-child(3) > span{ transition-delay:.2s; }
.hd-lines.is-in > span:nth-child(4) > span{ transition-delay:.3s; }

@media (prefers-reduced-motion:reduce){
	.hd-reveal,
	.hd-lines > span > span{
		opacity:1;
		transform:none;
		transition:none;
	}
	.hd-disk__spin{
		animation:none;
	}
}

/* =========================================
   フッター
========================================= */
.hd-footer{
	position:relative;
	margin-top:0;
	padding:clamp(80px, 10vw, 140px) 0 36px;
	background:var(--hd-ink);
	color:#fff;
	overflow:hidden;
}

.hd-footer__cta{
	display:grid;
	grid-template-columns:1fr auto;
	align-items:end;
	gap:40px;
	padding-bottom:clamp(60px, 8vw, 110px);
	border-bottom:1px solid rgba(255,255,255,.14);
}

.hd-footer__cta-title{
	font-family:var(--hd-en);
	font-variation-settings:"SOFT" 50, "WONK" 1;
	font-size:clamp(56px, 11vw, 170px);
	font-weight:400;
	line-height:.92;
	letter-spacing:-.035em;
}

.hd-footer__cta-title em{
	font-style:italic;
	color:var(--hd-accent);
}

.hd-footer__cta-text{
	margin-top:24px;
	font-size:15px;
	line-height:2;
	color:rgba(255,255,255,.7);
}

.hd-footer__circle{
	position:relative;
	display:grid;
	place-items:center;
	width:clamp(120px, 14vw, 190px);
	aspect-ratio:1;
	border-radius:50%;
	background:var(--hd-accent);
	color:#fff;
	font-family:var(--hd-en);
	font-size:18px;
	font-weight:500;
	transition:transform .6s var(--hd-ease), background .3s ease;
}

.hd-footer__circle:hover{
	transform:scale(1.06) rotate(-8deg);
	background:#fff;
	color:var(--hd-ink);
}

.hd-footer__body{
	display:grid;
	grid-template-columns:1.2fr 1fr 1fr;
	gap:40px;
	padding-top:56px;
}

.hd-footer__logo{
	width:150px;
	filter:invert(1);
}

.hd-footer__address{
	margin-top:24px;
	font-size:13px;
	font-weight:400;
	line-height:2;
	color:rgba(255,255,255,.7);
	font-style:normal;
}

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

.hd-footer__nav{
	display:grid;
	grid-template-columns:repeat(2, max-content);
	gap:12px 40px;
	align-content:start;
	font-family:var(--hd-en);
	font-size:18px;
}

.hd-footer__nav a{
	position:relative;
}

.hd-footer__nav a::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:-2px;
	height:1px;
	background:currentColor;
	transform:scaleX(0);
	transform-origin:right;
	transition:transform .4s var(--hd-ease);
}

.hd-footer__nav a:hover::after{
	transform:scaleX(1);
	transform-origin:left;
}

.hd-footer__links{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:10px;
	font-size:13px;
	color:rgba(255,255,255,.7);
}

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

.hd-footer__grm{
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin-top:6px;
	padding:10px 16px;
	border:1px solid rgba(255,255,255,.25);
	border-radius:999px;
	color:#fff !important;
	font-family:var(--hd-en);
	font-size:14px;
	transition:background .3s ease, color .3s ease;
}

.hd-footer__grm:hover{
	background:#fff;
	color:var(--hd-ink) !important;
}

.hd-footer__bottom{
	display:flex;
	justify-content:space-between;
	gap:20px;
	margin-top:70px;
	font-family:var(--hd-en);
	font-size:13px;
	color:rgba(255,255,255,.5);
}

.hd-footer > .hd-wrap{
	position:relative;
	z-index:1;
}

.hd-footer__disk{
	position:absolute;
	right:-12vw;
	top:-10vw;
	width:34vw;
	opacity:.14;
	pointer-events:none;
}

@media (max-width:991px){
	.hd-footer__cta{
		grid-template-columns:1fr;
	}
	.hd-footer__body{
		grid-template-columns:1fr;
	}
	.hd-footer__bottom{
		flex-direction:column;
	}
}

/* ページトップボタン（テーマ既存）をHDの色に */
#page_top{
	background:var(--hd-ink) !important;
	color:#fff !important;
	border:1px solid rgba(255,255,255,.2) !important;
}

/* 旧テーマのフッター・ヘッダーは使わない */
.grm-footer,
.grm-fallback-header{
	display:none !important;
}