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

/* =========================================
   Footer / フッター
========================================= */
.grm-footer{
	padding:40px 0;
	background:#111;
	color:#fff;
}

.grm-footer-inner{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:20px;
}

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

.grm-footer-sns a{
	color:#fff;
	font-size:12px;
	letter-spacing:.05em;
	text-decoration:none;
	opacity:.8;
}

.grm-footer-sns a:hover{
	opacity:1;
	text-decoration:underline;
}

.grm-footer-copyright{
	font-size:12px;
	opacity:.7;
}

/* =========================================
   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 / 下層ページ共通
========================================= */
.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 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-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);
}