/* =========================================
   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;
}

/* =========================================
   CTA / 問い合わせ誘導（全ページ共通）
   ※ designstudio-l.jp 参考版
========================================= */
.grm-cta{
	margin-top:120px;
	padding:60px 0;
	text-align:center;
	background:var(--color-gray);
}

.grm-cta-text{
	font-size:14px;
	line-height:2;
	color:var(--color-text);
}

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

.grm-cta-buttons{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:16px;
	list-style:none;
	margin:32px 0 0;
	padding:0;
}

.grm-cta-buttons .button,
.grm-cta-buttons .button-outline{
	line-height:1.2;
}

.grm-cta-buttons .button span,
.grm-cta-buttons .button-outline span{
	display:block;
	font-size:10px;
	letter-spacing:.1em;
	margin-top:1px;
	opacity:.7;
}

/* =========================================
   Note Picks / おすすめ記事
========================================= */
.grm-note-picks{
	margin-top:80px;
	padding-bottom:80px;
}

.grm-note-card{
	flex:0 0 260px;
	max-width:260px;
	padding:20px;
	border:1px solid var(--color-border);
}

.grm-note-card a{
	display:block;
	color:inherit;
	text-decoration:none;
}

.grm-note-title{
	font-size:13px;
	font-weight:500;
	line-height:1.8;
	margin-bottom:12px;
}

.grm-note-meta{
	font-size:11px;
	color:var(--color-sub);
}

/* =========================================
   Footer / フッター
   ・designstudio-l.jp を参考に、「見出し（リンクなし）＋配下項目を
   　縦に並べた1カラム」を横に並べる構成にリニューアル。
   ・ロゴはメニューの上に単独配置（横並びにしない）。
   ・ナビ本体（.grm-footer-nav-cols／.grm-footer-nav-policy／
   　.grm-footer-sns）は grm_render_footer_nav() が出力するので、
   　ここでは見た目のみを定義する。
   ・見出し（.grm-footer-nav-col-title）はリンクなし・太字なし。
   　配下項目（.grm-footer-nav-list）は「›」付き・太字なし。
   　さらにその子（例：制作実績の下の動画撮影／料理撮影／…）は
   　「／」区切りの説明文として小さく添える（.grm-footer-nav-desc）。
   ・プライバシーポリシー等（sub-foot-navクラス）はカラムの下に
   　小さめの1行でまとめる（.grm-footer-nav-policy）。
   ・SNSはURLのホスト名で自動判定してアイコン表示
   　（.grm-footer-sns、grm_get_social_icon_svg()）。
========================================= */
.grm-footer{
	position:relative;
	padding:100px 0 100px;
	background:var(--color-white);
	color:var(--color-text);
	overflow:hidden;
}

.grm-footer-top-row{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	align-items:start;
	gap:24px 40px;
	padding-bottom:36px;
	margin-bottom:44px;
	border-bottom:1px solid var(--color-border);
}

.grm-footer-logo{
	display:inline-flex;
	margin-bottom:0;
}

.grm-footer-logo img{
	display:block;
	height:42px;
	width:auto;
}

.grm-footer-address-col{
	min-width:0;
}

.grm-footer-address-title{
	margin:0 0 8px;
	font-size:14px;
	font-weight:400;
	letter-spacing:.05em;
	color:var(--color-sub);
}

.grm-footer-address-text{
	margin:0;
	font-size:14px;
	line-height:1.8;
	color:var(--color-sub);
}

.grm-footer-nav-cols{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:36px 40px;
	list-style:none;
	margin:0;
	padding:0;
}

.grm-footer-nav-col{
	min-width:0;
}

.grm-footer-nav-col-title{
	margin:0 0 14px;
	font-size:13px;
	font-weight:400;
	letter-spacing:.05em;
	color:var(--color-sub);
}

.grm-footer-nav-list{
	list-style:none;
	margin:0;
	padding:0;
}

.grm-footer-nav-list > li{
	margin-top:12px;
}

.grm-footer-nav-list > li:first-child{
	margin-top:0;
}

.grm-footer-nav-list > li > a{
	display:inline-flex;
	align-items:baseline;
	gap:.4em;
	font-size:16px;
	font-weight:400;
	letter-spacing:.05em;
	color:var(--color-main);
	text-decoration:none;
}

.grm-footer-nav-list > li > a:hover{
	text-decoration:underline;
}

.grm-footer-nav-arrow{
	color:var(--color-sub);
}

.grm-footer-nav-desc{
	margin:8px 0 0;
	max-width:320px;
	font-size:14px;
	line-height:2;
	color:var(--color-sub);
}

.grm-footer-nav-desc a{
	font-size:14px;
	color:var(--color-sub);
	text-decoration:none;
	white-space:nowrap;
}

.grm-footer-nav-desc a:hover{
	color:var(--color-main);
	text-decoration:underline;
}

.grm-footer-nav-policy{
	display:flex;
	flex-wrap:wrap;
	gap:8px 1em;
	list-style:none;
	margin:0;
	padding:0;
}

.grm-footer-nav-policy a{
	display:inline-flex;
	align-items:baseline;
	gap:.4em;
	font-size:12px;
	color:var(--color-sub);
	text-decoration:none;
}

.grm-footer-nav-policy a:hover{
	color:var(--color-main);
	text-decoration:underline;
}

/* プライバシーポリシー等（左）とSNSアイコン＋コピーライト（右）を
   同じ1行に横並びで表示する、フッター最下部の行 */
.grm-footer-bottom{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:12px 24px;
	margin:32px 0 0;
	padding:16px 0 0;
	border-top:1px solid var(--color-border);
}

.grm-footer-bottom-right{
	display:flex;
	align-items:center;
	gap:20px;
}

.grm-footer-sns{
	display:flex;
	gap:12px;
	list-style:none;
	margin:0;
	padding:0;
}

.grm-footer-sns a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border:1px solid var(--color-border);
	border-radius:var(--radius-full);
	color:var(--color-main);
	text-decoration:none;
}

.grm-footer-sns a:hover{
	background:var(--color-main);
	border-color:var(--color-main);
}

.grm-footer-sns a:hover svg{
	stroke:var(--color-white);
}

.grm-footer-sns svg{
	width:16px;
	height:16px;
	fill:none;
	stroke:var(--color-main);
	stroke-width:1.6;
}

.grm-footer-sns-label{
	font-size:11px;
	letter-spacing:.02em;
	color:var(--color-main);
}

.grm-footer-sns a:hover .grm-footer-sns-label{
	color:var(--color-white);
}

.grm-footer-copyright{
	font-size:11px;
	letter-spacing:.03em;
	color:var(--color-sub);
}

/* grm-menu-heading クラスの項目は、フッター以外（ハンバーガー
   メニュー等、grm-global-menuプラグインが出力する箇所）では
   リンクとして機能しないよう、見た目・挙動を無効化しておく
   （見出しラベル用途のため、そもそも実URLを持たない想定） */
.menu-item.grm-menu-heading > a{
	pointer-events:none;
	color:var(--color-sub);
	text-decoration:none;
}

/* grm-menu-desktop-hide クラスの項目は、PCヘッダーの
   メインメニュー（.grm-menu-list）にだけ表示しない。
   ハンバーガーメニュー（.grm-mobile-menu-list）とフッターには
   影響しない（例：Instagramリンクをメインメニューには出したくない場合に使用） */
.grm-menu-list .menu-item.grm-menu-desktop-hide{
	display:none;
}

@media (max-width:767px){

	.grm-footer{
		padding:70px 0 80px;
	}

	.grm-footer-top-row{
		grid-template-columns:1fr;
		gap:20px;
		padding-bottom:28px;
	}

	.grm-footer-nav-cols{
		grid-template-columns:repeat(2, 1fr);
		gap:28px 24px;
	}

}

@media (max-width:480px){

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

}

/* =========================================
   All Page / 全ページ共通
========================================= */
.head-margin {
	margin-top: 100px;
}
nav.grm-breadcrumb {
	margin: 140px 0 80px !important;
}

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

/* =========================================
   ログインページ関連
========================================= */
.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 / 検索結果
========================================= */
.grmsf-results-title {
	font-size:18px;
	text-align: center;
	margin:-30px 0 10px;
}
.grmsf-results-count {
	font-size:16px;
	text-align: center;
	margin:0 0 50px;
}

/* =========================================
   Page / レシピページレイアウト調整
========================================= */
.grmrc-page {
	padding: 0 !important;
}

.grmrc-card-meta-ac {
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  margin-top: 0;
  margin-bottom: 10px;
  justify-content: center;
}
.grmrc-card-meta-ac span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(155, 123, 69, 0.25);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  line-height: 1;
  color: #9b7b45;
  background: #fbf7ef;
  font-weight: 400;
}
/* =========================
   Recipe Layout Badge
========================= */

.grmrc-card-meta-ac .grmrc-layout-page {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.grmrc-card-meta-ac .grmrc-layout-half {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}

.grmrc-card-meta-ac .grmrc-layout-third {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}


/* =========================================
   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;
}
/* ページタイトル内の<span>〜</span>（例：「レンタル」）と、
   本文のh3内の<span>〜</span>（スタジオ一覧の見出し等）
   ・#4bc1c3のベタに白抜き文字。左側は少しだけ間を空ける。
   ・ベタの天地は英文字（大文字）の天地に合わせる：
     overflow:hiddenのinline-blockはベースラインが下端になるため、
     下端を英文字のベースラインに揃え、高さを英文字の高さ
     （Noto Sans JPのキャップハイト≒0.74em）にしている。
     文字は0.55emに縮小しているため、高さ等は 0.74÷0.55≒1.345em。 */
.grmrc-cat-title .grm-title-badge,
.grm-page-content h3 span {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  font-size: 0.45em;
  height: 1.6em;
  line-height: 1.6em;
  margin-left: 0.55em;
  padding: 0 1em;
  background: #4bc1c3;
  color: #fff;
  letter-spacing: 0.05em;
}
/* h3はラベルの文字を少し大きく（0.68em）。ベタの天地は英文字の天地のまま
   （0.74÷0.68≒1.088em） */
.grm-page-content h3 span {
  font-size: 0.68em;
  height: 1.5em;
  line-height: 1.5em;
  margin-left: 0.6em;
  position: relative;
  top: 3px;   /* ← 下げたい分だけ数字を増やす（1px、2px…） */
}
.grmrc-cat-header.is-title-first .grmrc-cat-label {
  margin: -15px 0 0;
  font-size: 13px;
  color: #222;
  text-transform: none;
}

/* =========================================
   Works一覧（archive-grm_works.php / taxonomy-grm_works_category.php）
   ・見出し（Works／制作実績）とカテゴリーチップを左寄せに
========================================= */
.grm-works-archive .grmrc-cat-header.is-title-first {
  max-width: none;
  margin: 0 0 48px;
  text-align: left;
}
.grm-works-archive .grm-works-chips {
  justify-content: flex-start;
  margin-bottom: 90px;
}

/* =========================================
   grm-works カテゴリーチップ
   ・通常時：グレー背景＋黒文字（文字は細め）
   ・選択時：黒背景＋白文字（既存の is-active を踏襲）
========================================= */
.grm-works-chips .grm-works-chip {
  border-color: transparent;
  color: #222;
  background: #eee;
  font-weight: 400;
}
.grm-works-chips .grm-works-chip:hover {
  background: #e0e0e0;
}
.grm-works-chips .grm-works-chip.is-active {
  background: #222;
  color: #fff;
  border-color: #222;
}
.grmrc-cat-description {
  margin: 30px auto 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.9;
  color: #666;
}

/* =========================================
   カテゴリーチップ
   ・制作実績（grm-works）アーカイブと同じ見た目
========================================= */
.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 transparent;
	border-radius:999px;
	font-size:13px;
	font-weight:400;
	letter-spacing:.03em;
	color:#222;
	text-decoration:none;
	background:#eee;
	transition:.2s;
}

.grm-cat-chip:hover{
	background:#e0e0e0;
}

.grm-cat-chip.is-active{
	background:#222;
	color:#fff;
	border-color:#222;
}

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

/* =========================================
   記事詳細ページ（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;
}

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

/* =========================================
   カテゴリー記事一覧グリッド
   ・制作実績（grm-works）アーカイブと同じ3列グリッド
========================================= */
.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 */

/* =========================================
   THANKS PAGE / お問い合わせ完了ページ
   ・page-thanks.php（固定ページのスラッグが
   　「thanks」の場合にWordPressが自動で使用する
   　テンプレート）は、他の固定ページ（page.php）と
   　同じ grmrc-cat-header / grm-single-back を
   　そのまま使うデザインにしたため、専用CSSは無し。
========================================= */

/* =========================================
   固定ページ本文 / 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);
}

.grm-page-content h2.maincopy-h2 {
	font-size: clamp(32px, 5vw, 64px) !important;
	white-space: nowrap !important;
	display: block !important;
	line-height: 130% !important;
	font-family: var(--font-mincho) !important;
	/* ▼ ここを400!importantにすることで、h2特有の太字(bold)を確実に解除して細くします */
	font-weight: 400 !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	margin-bottom: 0px !important;
}
.grm-page-content h2.maincopy-h2-small {
	font-size: clamp(32px, 5vw, 58px) !important;
	white-space: nowrap !important;
	display: block !important;
	line-height: 130% !important;
	font-family: var(--font-mincho) !important;
	/* ▼ ここを400!importantにすることで、h2特有の太字(bold)を確実に解除して細くします */
	font-weight: 400 !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	margin-bottom: 0px !important;
}
.grm-page-content p.maincopy-p {
	font-size: clamp(28px, 4vw, 64px) !important
	white-space:nowrap;
	display:block;
	padding-top:1em;
	font-family:var(--font-mincho);
	margin-top: 0px !important;
}

/* グーテンベルクのページ内リンクのズレ。 */
.wp-block-heading[id] {
	scroll-margin-top: 100px;
}

/* スマホ */
@media (max-width: 2000px) {
	.wp-block-heading[id] {
		scroll-margin-top: 70px;
	}
}
/* =========================================
   PAGE TOP / ページトップへ戻るボタン
   ・全ページ共通。一定量スクロールすると表示される
   　（表示/非表示の判定は grm-pagetop.js）。
========================================= */
.grm-pagetop{
	position:fixed;
	right:24px;
	bottom:24px;
	width:52px;
	height:52px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--color-main);
	border-radius:var(--radius-full);
	opacity:0;
	visibility:hidden;
	transform:translateY(10px);
	transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
	z-index:500;
}

.grm-pagetop.is-visible{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

.grm-pagetop:hover{
	background:var(--color-sub);
}

.grm-pagetop-arrow{
	width:9px;
	height:9px;
	border-top:2px solid var(--color-white);
	border-right:2px solid var(--color-white);
	transform:translateY(2px) rotate(-45deg);
}

@media (max-width:767px){

	.grm-pagetop{
		right:16px;
		bottom:16px;
		width:44px;
		height:44px;
	}

}

/* =========================================
   画像の上の余白を詰める（.grm-img-trim-top）
   ・Studioページのアクセス欄の建物イラスト（acc02.svg）は、
   　画像データ自体の上側に余白があるため、TEL表記との間が
   　広く見えていた。画像ブロックの「追加CSSクラス」に
   　grm-img-trim-top を付けると、その分を上に詰める
   　（幅に対する%なので、画面幅が変わっても比率は同じ）。
========================================= */
.grm-page-content .grm-img-trim-top {
  margin-top: -8% !important;
}

/* =========================================
   料金表示（金額を大きく／（税込）を小さく）
   ・見出しブロック等の中で
   　<span class="grm-price">￥3,300</span><span class="grm-tax">(税込)</span>
   　のように囲むと、金額を大きく、（税込）を小さく表示する。
   ・Studioページの料金一覧の見出しには、行間を広げる
   　grm-price-list クラスを付けている。
   ・エディタで入れる場合は、見出しブロックの「HTMLとして編集」で入力する。
========================================= */
.grm-page-content .grm-price {
  font-size: 1.5em;
  letter-spacing: 0.02em;
}
.grm-page-content .grm-tax {
  margin-left: 0.15em;
  font-size: 0.5em;
}
.grm-page-content .grm-price-list {
  line-height: 1.3;
}

/* 明朝体にする（ブロックの「追加CSSクラス」に grm-mincho）
   ・メインコピー等と同じ書体（--font-mincho：Shippori Mincho） */
.grm-page-content .grm-mincho,
.grm-page-content .grm-mincho * {
  font-family: var(--font-mincho) !important;
}

/* =========================================
   スタジオレンタル（/studio-rental/ の料金案内ボックス）
   ・見出し（ラベル）→キャッチ（明朝）→説明文→注記→料金表 の順。
   ・料金表は「カスタムHTML」ブロックで、1行ずつ
   　.grm-rental-price-row（左：フロア＋スタジオ名／右：1時間＋金額）。
========================================= */
.grm-page-content .wp-block-columns:has(.grm-rental-price) {
  padding: 40px 40px 44px;
}
@media (max-width: 781px) {
  .grm-page-content .wp-block-columns:has(.grm-rental-price) {
    padding: 28px 20px 32px;
  }
}
.grm-page-content .grm-rental-label {
  margin: 0 0 6px !important;
  font-size: 14px !important;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: #4bc1c3;
}
.grm-page-content .grm-rental-catch {
  margin: 0 0 20px !important;
  font-size: clamp(22px, 2.4vw, 28px) !important;
  font-weight: 500;
  line-height: 1.5;
  word-break: auto-phrase; /* 文節で改行（「2つの空間」の途中で切れないように） */
}
.grm-page-content .grm-rental-lead {
  margin: 0 0 16px;
  line-height: 2;
}
.grm-page-content .grm-rental-note {
  margin: 0 0 32px;
  padding-left: 12px;
  border-left: 3px solid #4bc1c3;
  font-size: 14px;
  line-height: 1.6;
}

.grm-page-content .grm-rental-price {
  border-top: 1px solid #222;
}
.grm-page-content .grm-rental-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 16px 0;
  border-bottom: 1px solid #d6d6d6;
}
.grm-page-content .grm-rental-price-row:last-child {
  border-bottom-color: #222;
}
.grm-page-content .grm-rental-price-row p {
  margin: 0 !important;
}
.grm-page-content .grm-rental-price-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  word-break: auto-phrase;
}
.grm-page-content .grm-rental-floor {
  display: inline-block;
  min-width: 4.4em;
  padding: 2px 6px;
  background: #4bc1c3;
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.05em;
}
.grm-page-content .grm-rental-price-row .grm-rental-price-value {
  margin-left: auto !important;
  white-space: nowrap;
  font-size: 16px;
}
.grm-page-content .grm-rental-unit {
  margin-right: 10px;
  font-size: 13px;
  color: #555;
}
.grm-page-content .grm-rental-price .grm-price {
  font-size: 30px;
  line-height: 1;
}
.grm-page-content .grm-rental-price .grm-tax {
  font-size: 11px;
}

/* =========================================
   固定ページ：左右分割（.grm-split）の左列をPCで固定
   ・About us などの左側（タイトル・サブコピー）を、
   　PC（1024px以上）ではスクロールしても画面上部に固定する。
   ・ヘッダー（70px）＋余白分だけ下げた位置で止める。
========================================= */
@media(min-width:1024px){
	.grm-page-content .grm-split > *:first-child{
		position:sticky;
		top:110px;
		align-self:flex-start;
	}
}

/* =========================================
   投稿ページ（single.php）本文 .entry-content
   ・旧サイトから一括移行したブログ記事（Gutenbergの段落・画像・
   　ボタン・カラム・ギャラリー等）を、固定ページ本文
   　（.grm-page-content）と同じトーンで読みやすく整える。
========================================= */
.entry-content{
	color:var(--color-text);
	font-size:15px;
	line-height:1.9;
	font-weight:300;
	word-break:break-word;
}

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

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

.entry-content p{
	margin:0 0 1.6em;
	font-size:15px;
	line-height:1.9;
	font-weight:300;
}

.entry-content h2{
	margin:56px 0 20px;
	padding-bottom:10px;
	border-bottom:1px solid var(--color-border);
	font-size:22px;
	font-weight:400;
	line-height:1.5;
	color:var(--color-main);
}

.entry-content h3{
	margin:44px 0 16px;
	font-size:19px;
	font-weight:400;
	line-height:1.5;
	color:var(--color-main);
}

.entry-content h4{
	margin:36px 0 12px;
	font-size:16px;
	font-weight:500;
	line-height:1.6;
	color:var(--color-main);
}

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

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

.entry-content ul,
.entry-content ol{
	margin:0 0 1.6em;
	padding-left:1.6em;
}

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

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

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

.entry-content blockquote{
	margin:0 0 1.6em;
	padding:16px 20px;
	border-left:3px solid var(--color-border);
	color:var(--color-sub);
}

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

.entry-content table{
	width:100%;
	margin:0 0 1.6em;
	border-collapse:collapse;
}

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

/* ---- 画像 ----
   ・移行記事は画像に width:684px 等の固定幅が入っているものがあるため、
   　親幅を超えないよう max-width:100% と height:auto で抑える。 */
.entry-content figure,
.entry-content .wp-block-image{
	margin:0 0 2em;
}

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

.entry-content .wp-block-image.aligncenter img,
.entry-content .wp-block-image .aligncenter img,
.entry-content figure.aligncenter img{
	margin-left:auto;
	margin-right:auto;
}

.entry-content figcaption,
.entry-content .wp-element-caption{
	margin-top:8px;
	font-size:12px;
	line-height:1.6;
	color:var(--color-sub);
	text-align:center;
}

/* ---- ギャラリー ---- */
.entry-content .wp-block-gallery{
	gap:12px;
	margin:0 0 2em;
}

.entry-content .wp-block-gallery figure{
	margin:0;
}

/* ---- カラム ---- */
.entry-content .wp-block-columns{
	gap:24px;
	margin:0 0 2em;
}

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

/* ---- ボタン ----
   ・テーマ共通のアウトラインボタンと同じ見た目にそろえる
   　（旧サイトで付いていた背景色・文字サイズ指定は打ち消す）。 */
.entry-content .wp-block-buttons{
	gap:12px;
	margin:0 0 2em;
}

.entry-content .wp-block-button__link{
	display:inline-block;
	padding:12px 32px;
	border:1px solid var(--color-main);
	border-radius:var(--radius-full);
	background:transparent !important;
	color:var(--color-main) !important;
	font-size:14px !important;
	line-height:1.5;
	text-decoration:none;
	transition:.3s;
}

.entry-content .wp-block-button__link:hover{
	background:var(--color-main) !important;
	color:#fff !important;
}

/* ---- 動画（YouTube等の埋め込み） ---- */
.entry-content .wp-block-embed{
	margin:0 0 2em;
}

@media(max-width:575px){
	.entry-content,
	.entry-content p{
		font-size:14px;
	}
	.entry-content h2{
		margin-top:44px;
		font-size:19px;
	}
	.entry-content h3{
		font-size:17px;
	}
}

/* ===== 写真グリッド（撮影用語集など） ===== */
.grm-page-content .grm-photo-grid > .wp-block-group__inner-container,
.grm-page-content .grm-photo-grid:not(:has(> .wp-block-group__inner-container)){
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;
	margin:24px 0 8px;
}
.grm-page-content .grm-photo-grid .wp-block-image{
	margin:0;
}
.grm-page-content .grm-photo-grid img{
	width:100%;
	height:auto;
	border-radius:var(--radius-sm);
}
.grm-page-content .grm-photo-grid figcaption,
.grm-page-content .grm-photo-note{
	font-size:12px;
	line-height:1.6;
	color:var(--color-sub);
	margin:6px 0 0;
}
.grm-page-content .grm-photo-note{
	margin:0 0 24px;
}
@media(max-width:767px){
	.grm-page-content .grm-photo-grid > .wp-block-group__inner-container,
	.grm-page-content .grm-photo-grid:not(:has(> .wp-block-group__inner-container)){
		grid-template-columns:repeat(2,1fr);
		gap:10px;
	}
}
