/* =========================================
   Fallback Header
   ※ grm-global-menu プラグイン未導入時の簡易表示
========================================= */
.grm-fallback-header{
	padding:20px 0;
	border-bottom:1px solid var(--color-border);
}

.grm-fallback-header a{
	font-size:14px;
	font-weight:400;
	color:inherit;
	text-decoration:none;
}

/* =========================================
   Start a Project / フッター上のお問い合わせ導線（footer.php）
   ・unium.jp の Contact Us と同じ構成：薄いグレーの面に
   　見出し・コピー・英文、右に丸い「Get in Touch」ボタン
========================================= */
.grm-contact{
	padding:0 60px;
	margin-top:120px;
}

.grm-contact-inner{
	display:grid;
	grid-template-columns:1fr auto;
	grid-template-areas:
		"title title"
		"body  btn";
	gap:40px 60px;
	align-items:center;
	max-width:var(--container-wide);
	margin:0 auto;
	padding:80px 110px 100px;
	box-sizing:border-box;
	background:#edeef2;
	border-radius:var(--radius-lg);
}

.grm-contact-title{
	grid-area:title;
	margin:0 0 0 -40px;
	font-size:clamp(40px, 5.6vw, 88px);
	font-weight:600;
	line-height:1;
	letter-spacing:-.03em;
}

.grm-contact-body{
	grid-area:body;
}

.grm-contact-lead{
	font-size:clamp(20px, 2vw, 28px);
	font-weight:600;
	line-height:1.6;
	letter-spacing:.02em;
	margin-bottom:28px;
}

.grm-contact-en{
	font-size:13px;
	font-weight:500;
	line-height:1.8;
	color:var(--color-sub);
}

/* 丸いボタン（ホバーで黒に反転し、点が少し大きくなる） */
.grm-contact-btn{
	grid-area:btn;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:120px;
	height:120px;
	margin-right:80px;
	border-radius:var(--radius-full);
	background:#fff;
	color:var(--color-main);
	font-size:15px;
	font-weight:600;
	transition:background-color .4s ease, color .4s ease, transform .4s ease;
}

.grm-contact-btn::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:24px;
	width:5px;
	height:5px;
	margin-left:-2.5px;
	border-radius:50%;
	background:currentColor;
	transition:transform .4s ease;
}

.grm-contact-btn:hover{
	background:var(--color-main);
	color:#fff;
	transform:scale(1.05);
}

.grm-contact-btn:hover::after{
	transform:scale(1.8);
}

/* =========================================
   Footer / フッター
   ・左上にロゴ、右上にメニュー（3列）、
   　右下に補足リンクとコピーライト
========================================= */
.grm-footer{
	padding:120px 60px 96px;
	background:#fff;
	color:var(--color-text);
}

.grm-footer-inner{
	display:grid;
	grid-template-columns:1fr auto;
	grid-template-areas:
		"logo nav"
		"logo bottom";
	gap:80px 60px;
	max-width:var(--container-wide);
	margin:0 auto;
}

.grm-footer-brand{
	grid-area:logo;
	align-self:start;
}

.grm-footer-logo{
	display:block;
	width:260px;
}

/* by harddisk（トップと同じ表記） */
.grm-footer-by{
	margin-top:14px;
	font-size:15px;
	font-weight:600;
	letter-spacing:.02em;
	color:var(--color-main);
}

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

/* 住所・電話・FAX */
.grm-footer-address{
	margin-top:28px;
	font-size:13px;
	font-style:normal;
	font-weight:500;
	line-height:1.9;
}

.grm-footer-address span{
	color:var(--color-sub);
}

/* harddisk.jp へのリンクボタン */
.grm-footer-site{
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin-top:24px;
	padding:10px 22px;
	border:1px solid var(--color-main);
	border-radius:var(--radius-full);
	font-size:13px;
	font-weight:600;
	line-height:1;
	color:var(--color-main);
	transition:background-color .3s ease, color .3s ease;
}

.grm-footer-site::after{
	content:"\2197";
	font-size:12px;
	font-weight:400;
}

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

.grm-footer-logo img{
	display:block;
	width:100%;
	height:auto;
}

.grm-footer-nav{
	grid-area:nav;
	display:grid;
	grid-template-columns:repeat(3, minmax(90px, auto));
	gap:14px 48px;
	list-style:none;
	margin:0;
	padding:0;
}

.grm-footer-bottom{
	grid-area:bottom;
	align-self:end;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:28px;
}

.grm-footer-subnav{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	gap:10px 32px;
	list-style:none;
	margin:0;
	padding:0;
}

/* メニューのリンク：ホバーで文字が下から入れ替わる */
.grm-footer-nav a,
.grm-footer-subnav a{
	display:inline-block;
	overflow:hidden;
	font-size:13px;
	font-weight:500;
	line-height:1.5;
	color:var(--color-text);
	vertical-align:top;
}

.grm-footer-nav a span,
.grm-footer-subnav a span{
	position:relative;
	display:block;
	transition:transform .45s cubic-bezier(.22, 1, .36, 1);
}

.grm-footer-nav a span::after,
.grm-footer-subnav a span::after{
	content:attr(data-text);
	position:absolute;
	top:100%;
	left:0;
	white-space:nowrap;
}

.grm-footer-nav a:hover span,
.grm-footer-subnav a:hover span{
	transform:translateY(-100%);
}

/* sub-foot-nav（プライバシーポリシー等）はメインのナビより小さく */
.grm-footer-subnav a{
	font-size:11px;
	font-weight:400;
}

.grm-footer-copyright{
	font-size:12px;
	font-weight:500;
}

/* 制作元の表記（コピーライトの上） */
.grm-footer-credit{
	margin-bottom:-18px;
	font-size:12px;
	font-weight:400;
	color:var(--color-sub);
}

.grm-footer-credit strong{
	font-weight:600;
	color:var(--color-main);
}

.grm-footer-credit a:hover{
	text-decoration:underline;
	text-underline-offset:3px;
}

/* =========================================
   Contact Us / Footer：タブレット・スマホ
========================================= */
@media (max-width:991px){

	.grm-contact{
		padding:0 20px;
		margin-top:80px;
	}

	.grm-contact-inner{
		grid-template-columns:1fr;
		grid-template-areas:
			"title"
			"body"
			"btn";
		gap:28px;
		padding:48px 28px 56px;
	}

	.grm-contact-title{
		margin-left:0;
		font-size:clamp(34px, 10vw, 48px);
	}

	.grm-contact-btn{
		justify-self:end;
		width:104px;
		height:104px;
		margin-right:0;
	}

	.grm-footer{
		padding:72px 20px 96px;
	}

	.grm-footer-inner{
		grid-template-columns:1fr;
		grid-template-areas:
			"logo"
			"nav"
			"bottom";
		gap:48px;
	}

	.grm-footer-logo{
		width:200px;
	}

	.grm-footer-nav{
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}

	.grm-footer-bottom{
		align-items:flex-start;
	}

	.grm-footer-subnav{
		justify-content:flex-start;
	}

}

/* =========================================
   All Page / 全ページ共通
========================================= */
/* 本文の幅を、Start a Projectの枠・フッター・トップ・
   モジュールページと同じ幅（最大1400px、左右60px／
   991px以下は20px）に揃える（grid.css の .grm-container を上書き） */
.grm-container{
	max-width:var(--container-wide);
	padding-left:60px;
	padding-right:60px;
}

@media (max-width:991px){
	.grm-container{
		padding-left:20px;
		padding-right:20px;
	}
}

.head-margin {
	margin-top: 100px;
}
nav.grm-breadcrumb {
	margin: 140px 0 0 !important;
}

@media (max-width: 991px) {
	.head-margin {
		margin-top: 70px;
	}
	nav.grm-breadcrumb {
		margin: 80px 0 0 !important;
	}
}
.site-main article {
	margin-bottom: 60px;
}

/* 記事一覧のグリッド（.grm-cat-grid）の中のカードには付けない。
   間隔はグリッドの gap で取っているため、付けると最後の行の下に
   60px が余分に足され、本文の下（お問い合わせ欄との間）が開きすぎる */
.site-main .grm-cat-grid article {
	margin-bottom: 0;
}

/* =========================================
   ログインページ関連
========================================= */
.grm-login-main{
	max-width:500px;
	margin:0 auto;
	padding:60px 20px;
}

.grm-login-logo{
	text-align:center;
	margin-bottom:40px;
}

.grm-login-logo img{
	max-width:240px;
	height:auto;
}

/* =========================================
   Page / 下層ページ共通
========================================= */
.site-main h1 {
	font-size: 1.6em;
	line-height: 1.6;
	margin-bottom: 30px;
}

@media (max-width: 991px) {
	.site-main h1 {
		font-size: 1.2em;
		line-height: 1.2;
		margin-bottom: 30px;
	}
}

/* =========================================
   PDF Thumbnail
========================================= */

.entry-content{
	width:100%;
}

.entry-content .link-to-pdf{
	display:block;
	width:100%;
}

.entry-content .thumb-of-pdf{
	display:block;
	width:100% !important;
	max-width:none !important;
	height:auto !important;
}

/* =========================================
   Content Video
========================================= */

.entry-content iframe{
	width:100%;
}

.entry-content .iframe-wrap{
	position:relative;
	width:100%;
	aspect-ratio:16 / 9;
}

.entry-content .iframe-wrap iframe,
.entry-content .wp-block-embed iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
}

/* =========================================
   タイトル関係
========================================= */
.grmrc-cat-header {
  max-width: none;
  margin: 0 0 48px;
  text-align: left;
}
.grmrc-cat-label {
  margin: 0 0 5px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9b7b45;
  font-weight: 400;
}
.grmrc-cat-title {
  margin: 0;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* =========================================
   見出し：英語を大きく／日本語を小さく
   （grm-worksの「Works」用。.grmrc-cat-title を
   　英語側に、.grmrc-cat-label を日本語側に付け替えて使う） */
.grmrc-cat-header.is-title-first .grmrc-cat-title {
  font-size: clamp(25px, 4.05vw, 43px);
  line-height: 1;
  font-weight: 100;
}
.grmrc-cat-header.is-title-first .grmrc-cat-label {
  margin: -15px 0 0;
  font-size: 13px;
  color: #222;
  text-transform: none;
}

.grmrc-cat-description {
  margin: 30px auto 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.9;
  color: #666;
}

/* =========================================
   カテゴリーチップ
========================================= */
.grm-cat-chips{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content:flex-start;
	margin:0 0 90px;
}

.grm-cat-chip{
	display:inline-block;
	padding:10px 22px;
	border:1px solid var(--color-main);
	border-radius:999px;
	font-size:13px;
	font-weight:400;
	letter-spacing:.03em;
	color:var(--color-main);
	text-decoration:none;
	background:#fff;
	transition:.2s;
}

.grm-cat-chip:hover,
.grm-cat-chip.is-active{
	background:var(--color-main);
	color:#fff;
}

/* =========================================
   カテゴリー絞り込みチップ（GRM FAQ／GRM Rental共用）
   ・プラグイン側は .grm-subcat-nav / .grm-subcat-pill の
     見た目をテーマに任せているため、ここで定義する。
   ・枠線＋白抜き（ホバーで塗りつぶし）。
   ・.grm-page-content a（下線・文字色）に負けないよう
     .grm-page-content 付きのセレクタも併記している。
   ・色はサイトごとに --color-main 等で変わる。
========================================= */
.grm-subcat-nav{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content:flex-start;
	margin:0 0 20px;
	padding:0;
	list-style:none;
}
.grm-subcat-pill,
.grm-page-content .grm-subcat-pill{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:10px 22px;
	border:1px solid var(--color-main);
	border-radius:999px;
	font-size:13px;
	font-weight:400;
	letter-spacing:.03em;
	color:var(--color-main);
	text-decoration:none;
	background:#fff;
	transition:.2s;
}
.grm-subcat-pill:hover,
.grm-page-content .grm-subcat-pill:hover{
	background:var(--color-main);
	color:#fff;
	text-decoration:none;
}

/* =========================================
   カテゴリーアーカイブ全体の上下余白
   ・Works一覧（.grm-works-archive）と同じ上下100pxにして、
   　タイトル上の空きを揃える
========================================= */
.grm-cat-archive{
	padding:60px 0 100px;
}
@media (max-width:991px){
	.grm-cat-archive{
		padding-top:32px;
	}
}

/* =========================================
   記事詳細ページ（single.php）
   ・Works／Blog一覧ページと同じく、タイトル上に100pxの余白
========================================= */
.grm-single-head{
	padding-top:100px;
}
/* is-title-first の label（Works／Blogページ用に-15pxで詰めている）を
   そのまま使うと、記事タイトルの上に小さく置くこの用途では
   カテゴリー名の文字とラベルの文字が近すぎて重なって見えることが
   あるため、ここだけ余白をあける */
article .grm-single-head.grmrc-cat-header.is-title-first .grmrc-cat-label{
	margin-top:8px;
}

/* 投稿一覧ページのタイトル
   ・.site-main h1（1.6em）に負けないよう .site-main を付ける
   ・固定ページ等と同様に、上はグローバルナビとの空きを
     .grm-single-head の padding-top で確保する */
.site-main .grmrc-cat-header .grm-index-title{
	font-size:32px;
	line-height:1.4;
	font-weight:400;
}
@media (max-width: 991px){
	.site-main .grmrc-cat-header .grm-index-title{
		font-size:24px;
	}
}

/* 全ページのタイトル上の空きを、モジュールページ
   （「Modules / 00」の上）と同じにする */
.grm-single-head{
	padding-top:60px;
}
@media (max-width:991px){
	.grm-single-head{
		padding-top:32px;
	}
}

/* 固定ページ（Contact等）のタイトルは太く */
body.page .site-main .grmrc-cat-header .grm-index-title{
	font-weight:600;
}

/* 一覧に戻るボタン */
.grm-single-back{
	text-align:center;
	margin-top:60px;
}

/* =========================================
   カテゴリー記事一覧グリッド
========================================= */
.grm-cat-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:40px 30px;
}

@media(max-width:991px){
	.grm-cat-grid{
		grid-template-columns:repeat(2, 1fr);
	}
}

@media(max-width:575px){
	.grm-cat-grid{
		grid-template-columns:1fr;
	}
}

/* =========================================
   Blog一覧ページのカード文字サイズ
   ・トップページのBlogスライダーのカードと同じ大きさに揃える
========================================= */
.grm-cat-grid .grm-card-title{
	font-size:14px;
}
.grm-cat-grid .grm-card-date{
	font-size:13px;
}
.grm-cat-grid .grm-card-excerpt{
	font-size:13.5px;
}
.grm-cat-grid .grm-card-noimage{
	font-size:12px;
}

.entry-date {
	font-size: 14px;
	line-height: 1.4;
	margin-bottom: 5px;
}

/* =========================================
   Search Page
========================================= */

/* =========================
	 Search Header START
========================= */
.page-header{
	margin-bottom:30px;
}

.page-title{
	margin:0 0 10px;
	font-size:32px;
	font-weight:300;
	letter-spacing:.04em;
	line-height:1.4;
}
/* Search Header END */


/* =========================
	 Search Card START
========================= */
.card{
	height:100%;
	border:none;
	border-radius:0;
	overflow:hidden;
	background:#fff;
	transition:0.3s;
}

.card:hover{
	transform:translateY(-3px);
	box-shadow:0 10px 20px rgba(0,0,0,.08);
}

.card a{
	display:flex;
	flex-direction:column;
	height:100%;
	color:inherit;
	text-decoration:none;
}
/* Search Card END */


/* =========================
	 Search Image START
========================= */
.card-image{
	position:relative;
	aspect-ratio:1 / 1;
	overflow:hidden;
}

.card-image img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
/* Search Image END */


/* =========================
	 Search Body START
========================= */
.card-body{
	padding:15px;
	background:#fff;
}
/* Search Body END */


/* =========================
	 Search Date START
========================= */
.card-body .small{
	font-size:12px;
	line-height:1.5;
}
/* Search Date END */


/* =========================
	 Search Title START
========================= */
.card-body h2{
	margin:0 0 10px;
	font-size:16px;
	font-weight:400;
	line-height:1.6;
}
/* Search Title END */


/* =========================
	 Search Taxonomy START
========================= */
.search-taxonomy{
	display:flex;
	flex-wrap:wrap;
	gap:5px;
	margin-bottom:10px;
}

.search-taxonomy .badge{
	display:inline-block;
	padding:4px 10px;
	background:#f5f5f5;
	color:#333;
	font-size:12px;
	font-weight:400;
	line-height:1.4;
	border-radius:20px;
}
/* Search Taxonomy END */


/* =========================
	 Search Post Type START
========================= */
.card-body .text-muted{
	color:#999;
}
/* Search Post Type END */


/* =========================
	 Pagination START
========================= */
.nav-links{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:10px;
	margin-top:50px;
}

.page-numbers{
	display:flex;
	justify-content:center;
	align-items:center;
	min-width:40px;
	height:40px;
	padding:0 10px;
	border:1px solid #ddd;
	border-radius:var(--radius-full);
	text-decoration:none;
	color:#333;
	background:#fff;
}

.page-numbers.current{
	color:#fff;
	background:#333;
	border-color:#333;
}

.page-numbers:hover{
	color:#fff;
	background:#333;
	border-color:#333;
}
/* Pagination END */


/* =========================
	 SP START
========================= */
@media(max-width:575px){

	.page-title{
		font-size:24px;
	}

	.card-body{
		padding:10px;
	}

	.card-body h2{
		font-size:14px;
	}

}
/* SP END */

/* =========================================
   固定ページ本文 / GRM Page Content
   ・Gutenbergの標準ブロック（見出し／段落／リスト等）
   　だけで組んでも、プライバシーポリシーのような
   　長文ページの体裁が自動で整うようにするための
   　共通タイポグラフィ。page.phpの<?php the_content(); ?>を
   　.grm-page-contentで囲って使用する。
========================================= */
.grm-page-content{
	color:var(--color-text);
}

.grm-page-content > *:first-child{
	margin-top:0;
}

.grm-page-content > *:last-child{
	margin-bottom:0;
}

/* =========================================
   固定ページ用 2カラム（左右分割）レイアウト
   ・Contactページ（.grm-cf-page）と同じ比率
   　「左320px固定・右は残り全部」をGutenbergだけで
   　再現するための汎用クラス。
   ・使い方：グループブロックを1つ作り、
   　「追加CSSクラス」に grm-split を指定。
   　その中にさらにグループブロックを2つ（左用・右用）
   　配置すると、自動的にグリッドの1列目・2列目になる。
   ・見出し(h2/h3)などブロックの先頭要素が持つ
   　margin-topのせいで片方のカラムだけ開始位置が
   　下にズレるのを防ぐため、各カラムの先頭要素の
   　margin-topも合わせて0にしている。
========================================= */
.grm-split{
	display:grid;
	grid-template-columns:1fr;
	gap:60px;
}
@media(min-width:768px){
	.grm-split{
		grid-template-columns:320px 1fr;
		gap:100px;
	}
}

.grm-split > * > *:first-child{
	margin-top:0;
}

/* =========================================
   Google Map埋め込み（カスタムHTMLブロックの<iframe>）
   ・widthやheightをHTML属性で指定していない場合、
   　ブラウザ標準サイズ（300×150px）のまま表示され、
   　カラム幅いっぱいに広がらない。
   ・幅は常に親要素いっぱい（100%）にし、高さはaspect-ratioで
   　16:9に自動追従させる。
   　※ heightをpx指定したままaspect-ratioを追加しても、
   　　widthとheightの両方が確定値になっている場合
   　　aspect-ratioは無視される仕様のため効かない。
   　　heightはautoにして、aspect-ratio側だけで
   　　高さを決めるようにする。
========================================= */
.grm-page-content iframe[src*="google.com/maps"]{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:16 / 9;
	border:0;
}

.grm-page-content p{
	font-size: 14px;
	margin:0 0 24px;
	line-height:1.8;
	font-weight:300;
}

.grm-page-content h2{
	margin:40px 0 16px;
	font-size:24px;
	font-weight:400;
	color:var(--color-main);
}

.grm-page-content h3{
	margin:32px 0 14px;
	font-size:18px;
	font-weight:400;
	color:var(--color-main);
}

.grm-page-content a{
	color:var(--color-main);
	text-decoration:underline;
}

.grm-page-content strong,
.grm-page-content b{
	font-weight:600;
}

.grm-page-content ol,
.grm-page-content ul{
	margin:0 0 24px;
	padding-left:1.6em;
	font-size:14px;
	line-height:1.8;
	font-weight:300;
}

.grm-page-content ol{
	list-style:decimal;
}

.grm-page-content ul{
	list-style:disc;
}

.grm-page-content li{
	margin-bottom:8px;
}

.grm-page-content li:last-child{
	margin-bottom:0;
}

.grm-page-content li ol,
.grm-page-content li ul{
	margin:8px 0 0;
	padding-left:1.6em;
}

/* 親項目（例：「撮影・スタイリング」）だけ少し太く。
   ※「.grm-page-content > ul > li」だと効かなかった。
   　Gutenbergの「カラム」ブロック（.grm-splitの2カラム等）を
   　挟んでいる場合、ulは.grm-page-contentの直接の子ではなく
   　wp-block-columns > wp-block-column の下に入るため、
   　直接子セレクタ（>）だと一致しなかった。
   　どんな入れ子のブロック構造でも「親項目 or 子項目」を
   　正しく区別できるよう、li同士の入れ子関係
   　（子項目は必ずliの中のul/olのさらに中のli）で判定する。 */
.grm-page-content li{
	font-weight:300;
}
.grm-page-content li li{
	font-weight:300;
}

.grm-page-content blockquote{
	margin:0 0 24px;
	padding:16px 20px;
	border-left:3px solid var(--color-border);
	color:var(--color-sub);
	line-height:1.8;
}

.grm-page-content table{
	width:100%;
	margin:0 0 24px;
	border-collapse:collapse;
}

.grm-page-content table th,
.grm-page-content table td{
	padding:12px 14px;
	border:1px solid var(--color-border);
	text-align:left;
	line-height:1.7;
}

.grm-page-content figure{
	margin:0 0 24px;
}

.grm-page-content img{
	border-radius:var(--radius-sm);
}

/* single：カテゴリー名はタイトル下の小さなチップ */
.grm-single-meta{
	display:flex;
	align-items:center;
	gap:12px;
	margin-top:12px;
}
.grm-single-chip{
	display:inline-block;
	padding:2px 14px;
	border-radius:999px;
	background:#fdecd0;
	color:#b85f08;
	font-size:14px;
	line-height:1.6;
	letter-spacing:.08em;
}
.grm-single-head{
	row-gap:0;
}

/* =========================================
   Global Menu / 全画面メニュー
   ・GRM Base Kit グローバルメニューの「スマホ切り替え幅」を
   　9999px にして、PCでも常にハンバーガーメニューにしている前提
   ・プラグインは変更せず、テーマ側で見た目だけを上書き：
   　横から出る細いパネル → 画面全体の白いメニュー
   ・第1階層を大きな文字で左に、子ページを番号付きで右に並べる
   　（トップのModules一覧と同じ組み方）
========================================= */

/* PCではヘッダーの高さ・ロゴ幅をPC用の値に戻す */
@media (min-width:992px){

	body .grm-global-menu{
		height:var(--grm-header-height-pc);
	}

	body .grm-global-menu-inner{
		padding:0 30px;
	}

	body .grm-global-menu-logo img{
		width:var(--grm-logo-width-pc);
	}

}

/* メニューを開いてもロゴは上に表示したまま */
body .grm-global-menu-logo{
	position:relative;
	z-index:100000;
}

/* 背景を暗くするオーバーレイは使わない */
body .grm-mobile-overlay{
	display:none;
}

/* メニュー本体：画面全体の白い面（フェードで表示） */
body .grm-mobile-menu,
body .grm-mobile-menu-right,
body .grm-mobile-menu-left{
	inset:0;
	width:100%;
	max-width:none;
	height:100vh;
	height:100dvh;
	padding:calc(var(--grm-header-height-pc) + 60px) 60px 80px;
	background:#fff;
	transform:none;
	opacity:0;
	visibility:hidden;
	transition:opacity .5s ease, visibility .5s ease;
}

body.grm-mobile-menu-open .grm-mobile-menu-right,
body.grm-mobile-menu-open .grm-mobile-menu-left{
	transform:none;
	opacity:1;
	visibility:visible;
}

body.grm-mobile-menu-open{
	overflow:hidden;
}

/* 一覧 */
body .grm-mobile-menu-list{
	max-width:var(--container-wide);
	margin:0 auto;
	border-bottom:1px solid #e6e6e6;
}

/* 第1階層：左に大きな文字、右に子ページ */
body .grm-mobile-menu-list > li{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px 60px;
	align-items:start;
	padding:36px 0;
	border-top:1px solid #e6e6e6;
	opacity:0;
	transform:translateY(16px);
	transition:opacity .6s ease, transform .6s ease;
}

body.grm-mobile-menu-open .grm-mobile-menu-list > li{
	opacity:1;
	transform:none;
	transition-delay:.15s;
}

body .grm-mobile-menu-list > li > a{
	padding:0;
	border:0;
	font-size:clamp(32px, 4.4vw, 64px);
	font-weight:600;
	line-height:1.1;
	letter-spacing:-.02em;
	color:var(--color-main);
	background:none;
}

/* 子ページ：常に表示（アコーディオンは使わない） */
body .grm-mobile-accordion-button{
	display:none;
}

body .grm-mobile-menu-list .menu-item-has-children > a{
	padding-right:0;
}

body .grm-mobile-menu-list > li > .sub-menu{
	display:block;
	padding:0;
	counter-reset:grm-menu -1; /* 最初の項目を 00 から数える */
	border-bottom:1px solid #e6e6e6;
}

body .grm-mobile-menu-list > li > .sub-menu > li{
	counter-increment:grm-menu;
}

body .grm-mobile-menu-list > li > .sub-menu > li > a{
	display:grid;
	grid-template-columns:48px 1fr;
	align-items:baseline;
	padding:16px 0;
	border:0;
	border-top:1px solid #e6e6e6;
	font-size:16px;
	font-weight:500;
	color:var(--color-main);
	background:none;
}

body .grm-mobile-menu-list > li > .sub-menu > li > a::before{
	content:counter(grm-menu, decimal-leading-zero);
	font-size:24px;
	font-weight:100;
	line-height:1;
}

/* 3階層目以降は小さく */
body .grm-mobile-menu-list .sub-menu .sub-menu{
	display:block;
	padding-left:48px;
}

body .grm-mobile-menu-list .sub-menu .sub-menu a{
	padding:8px 0;
	border:0;
	font-size:13px;
	color:var(--color-sub);
	background:none;
}

/* ホバー：少し薄く */
body .grm-mobile-menu-list li:hover > a{
	color:var(--color-main) !important;
	background:none;
}

body .grm-mobile-menu-list a:hover{
	opacity:.5;
}

/* sub-foot-nav（プライバシーポリシー等）：
   メインの項目から少し離して、小さい文字で並べる */
body .grm-mobile-menu-list:has(> li.sub-foot-nav){
	border-bottom:0;
}

body .grm-mobile-menu-list > li.sub-foot-nav{
	display:block;
	padding:56px 0 0;
}

body .grm-mobile-menu-list > li.sub-foot-nav + li.sub-foot-nav{
	padding-top:12px;
	border-top:0;
}

body .grm-mobile-menu-list > li.sub-foot-nav > a{
	font-size:13px;
	font-weight:400;
	letter-spacing:.04em;
}

@media (max-width:991px){

	body .grm-mobile-menu,
	body .grm-mobile-menu-right,
	body .grm-mobile-menu-left{
		padding:calc(var(--grm-header-height-sp) + 32px) 20px 48px;
	}

	body .grm-mobile-menu-list > li{
		grid-template-columns:1fr;
		padding:28px 0;
	}

}

/* =========================================
   Privacy Policy（固定ページ本文）
   ・お問い合わせページと同じ構成：左にキャッチコピー＋説明、
   　右に番号付きの項目（項目名＋英語表記／右端にグレーの番号）
   ・ポップアップ表示（popup.js）の時は説明を隠して1カラムにする
========================================= */
.grm-pp-page{
	display:grid;
	grid-template-columns:1fr;
	gap:60px;
	margin-top:40px;
}
@media(min-width:768px){
	.grm-pp-page{
		grid-template-columns:320px 1fr;
		gap:100px;
	}
}

.grm-pp-intro{
	display:flex;
	flex-direction:column;
	gap:24px;
}

.grm-page-content .grm-pp-catch{
	margin:0;
	font-size:clamp(22px, 2vw, 28px);
	font-weight:600;
	line-height:1.6;
	letter-spacing:.04em;
	color:var(--color-main);
}

.grm-page-content .grm-pp-intro-text{
	margin:0;
	font-size:14px;
	line-height:2;
	font-weight:300;
}

.grm-pp-body{
	counter-reset:grm-pp;
}

.grm-pp-sec{
	counter-increment:grm-pp;
	margin:0 0 48px;
}

.grm-page-content .grm-pp-head{
	display:grid;
	grid-template-columns:1fr auto;
	grid-template-areas:
		"title num"
		"en    num";
	align-items:center;
	gap:4px 10px;
	margin:0 0 16px;
	padding:0;
	border:0;
	font-size:15px;
	font-weight:500;
	line-height:1.8;
	letter-spacing:.02em;
}

.grm-pp-title{
	grid-area:title;
}

.grm-pp-en{
	grid-area:en;
	font-size:11px;
	font-weight:300;
	letter-spacing:.08em;
	color:var(--color-sub);
}

.grm-pp-head::after{
	content:counter(grm-pp, decimal-leading-zero);
	grid-area:num;
	align-self:end;
	font-size:32px;
	font-weight:100;
	line-height:1;
	color:var(--color-sub);
}

.grm-page-content .grm-pp-sec p,
.grm-page-content .grm-pp-sec li{
	margin:0;
	font-size:14px;
	line-height:2;
	font-weight:300;
}

.grm-page-content .grm-pp-sec p + p,
.grm-page-content .grm-pp-sec p + ul{
	margin-top:12px;
}

.grm-page-content .grm-pp-sec ul{
	margin:12px 0 0;
	padding:0;
	list-style:none;
}

.grm-page-content .grm-pp-sec li{
	position:relative;
	padding-left:18px;
}

.grm-page-content .grm-pp-sec li::before{
	content:"";
	position:absolute;
	left:0;
	top:1em;
	width:8px;
	height:1px;
	background:var(--color-main);
}

/* 項（1. 2. …）：番号付きの段落 */
.grm-page-content .grm-pp-sec ol{
	margin:0;
	padding:0;
	list-style:none;
	counter-reset:grm-pp-ol;
}

.grm-page-content .grm-pp-sec ol > li{
	counter-increment:grm-pp-ol;
	padding-left:24px;
}

.grm-page-content .grm-pp-sec ol > li + li{
	margin-top:12px;
}

.grm-page-content .grm-pp-sec ol > li::before{
	content:counter(grm-pp-ol) ".";
	top:0;
	width:auto;
	height:auto;
	background:none;
	font-weight:400;
}

.grm-page-content .grm-pp-sec li > ul{
	margin-top:8px;
}

/* お問い合わせ窓口の表 */
.grm-pp-info{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:6px 24px;
	margin:16px 0 0;
	font-size:14px;
	line-height:2;
	font-weight:300;
}

.grm-pp-info dt{
	font-weight:500;
}

.grm-pp-info dd{
	margin:0;
}

.grm-pp-info a,
.grm-pp-address a{
	color:var(--color-main);
	text-decoration:underline;
	text-underline-offset:3px;
}

.grm-page-content .grm-pp-date{
	margin:0;
	font-size:12px;
	color:var(--color-sub);
	text-align:right;
}

@media(max-width:767px){
	.grm-pp-head::after{
		font-size:26px;
	}
}

/* ポップアップ表示時：説明を隠して1カラム */
.grm-popup-body .grm-pp-page{
	display:block;
	margin-top:24px;
}

.grm-popup-body .grm-pp-intro{
	display:none;
}

/* =========================================
   サイトマップ（GRM Base Kit の [sitemap]）
   ・スマホのメニューと同じ組み方：第1階層は大きな文字、
   　子ページは 00〜 の番号付きで右側（スマホは下）に並べる
========================================= */
body .grm-sitemap{
	margin-top:clamp(24px, 4vw, 56px);
}

body .grm-sitemap ul{
	margin:0;
	padding:0;
}

body .grm-sitemap li{
	margin:0;
}

body .grm-sitemap > ul{
	border-bottom:1px solid #e6e6e6;
}

body .grm-sitemap > ul > li{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px 60px;
	align-items:start;
	padding:36px 0;
	border-top:1px solid #e6e6e6;
}

body .grm-sitemap > ul > li > a{
	justify-self:start;
	font-size:clamp(32px, 4.4vw, 64px);
	font-weight:600;
	line-height:1.1;
	letter-spacing:-.02em;
	color:var(--color-main);
	text-decoration:none;
	transition:opacity .3s ease;
}

body .grm-sitemap > ul > li > ul{
	counter-reset:grm-sitemap -1; /* 最初の項目を 00 から数える */
	border-bottom:1px solid #e6e6e6;
}

body .grm-sitemap > ul > li > ul > li{
	counter-increment:grm-sitemap;
}

body .grm-sitemap > ul > li > ul > li > a{
	display:grid;
	grid-template-columns:48px 1fr;
	align-items:baseline;
	padding:16px 0;
	border-top:1px solid #e6e6e6;
	font-size:16px;
	font-weight:500;
	color:var(--color-main);
	text-decoration:none;
	transition:opacity .3s ease;
}

body .grm-sitemap > ul > li > ul > li > a::before{
	content:counter(grm-sitemap, decimal-leading-zero);
	font-size:24px;
	font-weight:100;
	line-height:1;
}

/* 3階層目以降は小さく */
body .grm-sitemap ul ul ul{
	padding:0 0 12px 48px;
}

body .grm-sitemap ul ul ul a{
	display:block;
	padding:6px 0;
	font-size:13px;
	color:var(--color-sub);
	text-decoration:none;
}

body .grm-sitemap a:hover{
	opacity:.5;
}

@media (max-width:991px){
	body .grm-sitemap > ul > li{
		grid-template-columns:1fr;
		padding:28px 0;
	}
}

/* =========================================
   GRM Map 動作サンプルの注意書き（functions.php 参照）
========================================= */
.grm-demo-note{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:6px 12px;
	margin:0 0 32px;
	padding:14px 20px;
	border-radius:8px;
	background:#f3f4f6;
	font-size:13px;
	line-height:1.7;
	color:var(--color-text);
}

.grm-demo-note strong{
	font-weight:700;
}

.grm-demo-note__label{
	padding:2px 10px;
	border-radius:999px;
	background:var(--color-main);
	font-size:11px;
	font-weight:600;
	letter-spacing:.06em;
	color:#fff;
}

/* MAPページ：地図の左上に重ねる（右上は検索ボタン） */
.grm-demo-note.is-map{
	position:absolute;
	left:16px;
	top:16px;
	z-index:500;
	max-width:min(460px, calc(100% - 32px));
	margin:0;
	background:rgba(255,255,255,.94);
	box-shadow:0 6px 24px -8px rgba(0,0,0,.25);
}

/* GRM Map 店舗詳細：メイン写真を横長（3:2）にそろえる
   （縦位置の写真も、中央を基準に横長に切り抜いて表示） */
body .grm-single-store .grm-hero img{
	width:100%;
	height:auto;
	aspect-ratio:3 / 2;
	object-fit:cover;
}


/* =========================================
   投稿本文 / Single Entry Content
   ・投稿（single.php）の <div class="entry-content"> 内の
   　Gutenberg標準ブロック（見出し・段落・リスト・表・引用・
   　画像・区切り・コード等）の基本スタイル。
   ・destyle.cssで余白がすべて0になっているため、ここで付け直す。
   ・スペーサーブロックの直後は、見出しの上余白を0にして
   　余白が二重にならないようにしている。
========================================= */
.entry-content{
	color:var(--color-text);
	font-size:15px;
	line-height:1.9;
	font-weight:300;
}

.entry-content > *:first-child{
	margin-top:0;
}

.entry-content > *:last-child{
	margin-bottom:0;
}

/* 段落 */
.entry-content p{
	margin:0 0 1.4em;
	line-height:1.9;
	font-weight:300;
}

/* 見出し */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6{
	color:var(--color-main);
	line-height:1.5;
	letter-spacing:.02em;
}

.entry-content h2{
	margin:56px 0 20px;
	padding-bottom:12px;
	border-bottom:1px solid var(--color-border);
	font-size:24px;
	font-weight:400;
}

.entry-content h3{
	margin:40px 0 16px;
	padding-left:14px;
	border-left:3px solid var(--color-main);
	font-size:19px;
	font-weight:400;
}

.entry-content h4{
	margin:32px 0 12px;
	font-size:16px;
	font-weight:500;
}

.entry-content h5,
.entry-content h6{
	margin:24px 0 10px;
	font-size:15px;
	font-weight:500;
}

.entry-content .wp-block-spacer + h2,
.entry-content .wp-block-spacer + h3,
.entry-content .wp-block-spacer + h4{
	margin-top:0;
}

/* リンク・強調 */
.entry-content a{
	color:var(--color-main);
	text-decoration:underline;
	text-underline-offset:3px;
}

.entry-content a:hover{
	opacity:.6;
}

.entry-content strong,
.entry-content b{
	font-weight:600;
}

.entry-content mark{
	padding:0 .2em;
}

/* リスト */
.entry-content ul,
.entry-content ol{
	margin:0 0 1.4em;
	padding-left:1.6em;
}

.entry-content ul{
	list-style:disc;
}

.entry-content ol{
	list-style:decimal;
}

.entry-content li{
	margin-bottom:6px;
	line-height:1.8;
}

.entry-content li:last-child{
	margin-bottom:0;
}

.entry-content li ul,
.entry-content li ol{
	margin:6px 0 0;
}

.entry-content li ul{
	list-style:circle;
}

/* 引用 */
.entry-content blockquote{
	margin:0 0 1.6em;
	padding:20px 24px;
	border-left:3px solid var(--color-border);
	background:var(--color-gray);
	border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}

.entry-content blockquote p:last-of-type{
	margin-bottom:0;
}

.entry-content blockquote cite{
	display:block;
	margin-top:10px;
	color:var(--color-sub);
	font-size:13px;
	font-style:normal;
}

/* 表 */
.entry-content .wp-block-table{
	margin:0 0 1.6em;
	overflow-x:auto;
}

.entry-content table{
	width:100%;
	border-collapse:collapse;
	font-size:14px;
}

.entry-content table th,
.entry-content table td{
	padding:12px 14px;
	border:1px solid var(--color-border);
	text-align:left;
	vertical-align:top;
	line-height:1.7;
}

.entry-content table th,
.entry-content table thead td{
	background:var(--color-gray);
	font-weight:500;
}

.entry-content .wp-block-table figcaption,
.entry-content .wp-block-image figcaption{
	margin-top:8px;
	color:var(--color-sub);
	font-size:12px;
	text-align:center;
}

/* 画像 */
.entry-content figure{
	margin:0 0 1.6em;
}

.entry-content img{
	max-width:100%;
	height:auto;
	border-radius:var(--radius-sm);
}

/* 区切り */
.entry-content hr,
.entry-content .wp-block-separator{
	margin:48px 0;
	border:0;
	border-top:1px solid var(--color-border);
}

/* コード */
.entry-content code{
	padding:2px 6px;
	background:var(--color-gray);
	border-radius:4px;
	font-size:.9em;
}

.entry-content pre{
	margin:0 0 1.6em;
	padding:16px 20px;
	overflow-x:auto;
	background:#1e1e1e;
	color:#f5f5f5;
	border-radius:var(--radius-sm);
	font-size:13px;
	line-height:1.7;
}

.entry-content pre code{
	padding:0;
	background:none;
	color:inherit;
	font-size:inherit;
}

@media(max-width:767px){
	.entry-content{
		font-size:14px;
	}
	.entry-content h2{
		margin-top:44px;
		font-size:20px;
	}
	.entry-content h3{
		margin-top:32px;
		font-size:17px;
	}
}
/* Single Entry Content END */
