/* =========================================
   撮影ジャンルのページ（page-photo.php）
   ・メイン画像 → リード文 → 撮影パターン（写真）→ 本文
   ・撮影パターンの写真は縦横比に合わせて1行に並べ、
   　行ごとに高さを揃える（最後の行は引き伸ばさない）
   ・撮影パターンはPCでは本文幅より広く、最大1800px
   ・本文（Flow／Service／Price／Glossary）はブロックに
   　下記のクラスを付けて組む
========================================= */

/* タイトル下の日本語（Works／制作実績と同じ詰め方にする） */
.grm-photo-page .grm-single-head.grmrc-cat-header.is-title-first .grmrc-cat-label{
	margin-top:-15px;
}

/* =========================
   メイン画像
   ・16:9でトリミング（位置は object-position で調整）
========================= */
.grm-photo-hero{
	margin:0 0 40px;
}
.grm-photo-hero img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:16 / 9;
	object-fit:cover;
	/* メイン画像は16:9に切り抜いた画像を使う（背景紙の端が写らないよう調整済み） */
	object-position:50% 50%;
	border-radius:var(--radius-sm);
}

.grm-photo-lead{
	margin:0 0 100px;
	font-size:16px;
	font-weight:400;
	line-height:2;
	color:var(--color-main);
}

/* =========================
   セクション見出し（英語＋日本語）
   ・撮影パターンと、本文のグループ「grm-photo-sec-head」で共通
========================= */
.grm-photo-patterns-head,
.grm-photo-content .grm-photo-sec-head{
	margin:0 0 40px;
}
.grm-photo-patterns-title,
.grm-photo-content .grm-photo-sec-head h2{
	margin:0;
	font-size:32px;
	font-weight:300;
	line-height:1.3;
	color:var(--color-main);
}
.grm-photo-patterns-label,
.grm-photo-content .grm-photo-sec-head p{
	margin:6px 0 0;
	font-size:12px;
	font-weight:400;
	line-height:1.6;
	color:var(--color-main);
}

/* =========================
   撮影パターン（本文幅より広く）
========================= */
.grm-photo-patterns{
	position:relative;
	left:50%;
	width:min(1800px, calc(100vw - 60px));
	margin:0 0 120px;
	transform:translateX(-50%);
}
.grm-photo-pattern{
	margin:0 0 60px;
}
.grm-photo-pattern:last-child{
	margin-bottom:0;
}
.grm-photo-pattern-title{
	margin:0 0 14px;
	font-size:16px;
	font-weight:400;
	color:var(--color-main);
}
.grm-photo-justify{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
}
.grm-photo-justify::after{
	content:"";
	flex-grow:999999;
}
.grm-photo-item{
	flex-grow:calc(var(--r) * 100);
	flex-basis:calc(var(--r) * 200px);
	margin:0;
}
.grm-photo-item img{
	display:block;
	width:100%;
	height:auto;
	border-radius:var(--radius-sm);
}

/* 写真のリンク（クリックで拡大） */
.grm-photo-link{
	display:block;
	overflow:hidden;
	border-radius:var(--radius-sm);
	cursor:zoom-in;
}
.grm-photo-link img{
	transition:transform .4s ease, opacity .3s;
}
.grm-photo-link:hover img{
	transform:scale(1.03);
	opacity:.92;
}

/* =========================
   拡大表示（assets/js/photo.js）
========================= */
html.grm-lightbox-open{
	overflow:hidden;
}
.grm-lightbox{
	position:fixed;
	inset:0;
	z-index:10000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:60px 80px;
	background:rgba(0,0,0,.88);
}
.grm-lightbox[hidden]{
	display:none;
}
.grm-lightbox-figure{
	margin:0;
	max-width:100%;
	max-height:100%;
}
.grm-lightbox-img{
	display:block;
	max-width:100%;
	max-height:calc(100vh - 120px);
	width:auto;
	height:auto;
	border-radius:var(--radius-sm);
	cursor:default;
}
.grm-lightbox button{
	position:absolute;
	width:48px;
	height:48px;
	padding:0;
	border:0;
	border-radius:50%;
	background:rgba(255,255,255,.12);
	cursor:pointer;
	transition:background .2s;
}
.grm-lightbox button:hover{
	background:rgba(255,255,255,.28);
}
.grm-lightbox button::before,
.grm-lightbox button::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	background:#fff;
}
.grm-lightbox-close{
	top:16px;
	right:16px;
}
.grm-lightbox-close::before,
.grm-lightbox-close::after{
	width:20px;
	height:1.5px;
	margin:-1px 0 0 -10px;
}
.grm-lightbox-close::before{ transform:rotate(45deg); }
.grm-lightbox-close::after{ transform:rotate(-45deg); }
.grm-lightbox-prev,
.grm-lightbox-next{
	top:50%;
	margin-top:-24px;
}
.grm-lightbox-prev{ left:16px; }
.grm-lightbox-next{ right:16px; }
.grm-lightbox .grm-lightbox-prev::before,
.grm-lightbox .grm-lightbox-next::before{
	width:12px;
	height:12px;
	margin:-6px 0 0 -6px;
	background:none;
	border-top:1.5px solid #fff;
	border-left:1.5px solid #fff;
}
.grm-lightbox .grm-lightbox-prev::before{ transform:translateX(2px) rotate(-45deg); }
.grm-lightbox .grm-lightbox-next::before{ transform:translateX(-2px) rotate(135deg); }
.grm-lightbox .grm-lightbox-prev::after,
.grm-lightbox .grm-lightbox-next::after{
	display:none;
}
.grm-lightbox-count{
	position:absolute;
	bottom:18px;
	left:0;
	right:0;
	margin:0;
	font-size:12px;
	letter-spacing:.1em;
	color:rgba(255,255,255,.8);
	text-align:center;
}

/* =========================
   本文のセクション（グループ「grm-photo-sec」）
========================= */
.grm-photo-content .grm-photo-sec{
	margin:0 0 120px;
}
.grm-photo-content .grm-photo-sec:last-child{
	margin-bottom:40px;
}

/* =========================
   Flow（グループ「grm-flow-step」を縦に並べる）
   ・左にSTEP番号の丸、丸どうしを縦線でつなぐ
   ・右に内容のカード（グループ「grm-flow-body」）
========================= */
.grm-photo-content .grm-flow-step{
	position:relative;
	padding:0 0 40px 136px;
}
.grm-photo-content .grm-flow-step:last-child{
	padding-bottom:0;
}
.grm-photo-content .grm-flow-step::before{
	content:"";
	position:absolute;
	top:96px;
	bottom:0;
	left:47px;
	width:1px;
	background:#4bc1c3;
	opacity:.5;
}
.grm-photo-content .grm-flow-step:last-child::before{
	display:none;
}
.grm-photo-content p.grm-flow-num{
	position:absolute;
	top:0;
	left:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:96px;
	height:96px;
	margin:0;
	border:1px solid #4bc1c3;
	border-radius:50%;
	background:#fff;
	color:#4bc1c3;
	font-size:30px;
	font-weight:200;
	line-height:1;
	letter-spacing:.04em;
}
.grm-photo-content p.grm-flow-num span{
	margin:0 0 6px;
	font-size:10px;
	font-weight:400;
	letter-spacing:.2em;
}
.grm-photo-content .grm-flow-body{
	padding:34px 40px 36px;
	border-radius:var(--radius);
	background:var(--color-gray);
}
.grm-photo-content .grm-flow-body h3{
	margin:0 0 16px;
	font-family:var(--font-mincho);
	font-size:22px;
	font-weight:500;
	line-height:1.5;
}
.grm-photo-content .grm-flow-body p{
	margin:0 0 16px;
}
.grm-photo-content .grm-flow-body > *:last-child,
.grm-photo-content .grm-flow-body > .wp-block-group__inner-container > *:last-child{
	margin-bottom:0;
}
/* お伺いする内容などの白いボックス */
.grm-photo-content .grm-flow-box{
	margin:0 0 16px;
	padding:22px 26px;
	border-radius:var(--radius-sm);
	background:#fff;
}
.grm-photo-content .grm-flow-box p.grm-flow-box-title{
	margin:0 0 10px;
	font-size:13px;
	font-weight:500;
	color:#4bc1c3;
	letter-spacing:.08em;
}
.grm-photo-content .grm-flow-box ul{
	margin:0;
	padding:0;
	list-style:none;
}
.grm-photo-content .grm-flow-box li{
	position:relative;
	margin:0 0 8px;
	padding-left:18px;
}
.grm-photo-content .grm-flow-box li::before{
	content:"";
	position:absolute;
	top:.75em;
	left:2px;
	width:6px;
	height:6px;
	border-radius:50%;
	background:#4bc1c3;
}
.grm-photo-content p.grm-flow-note{
	font-size:12px;
	color:var(--color-sub);
}

/* =========================
   Service（カラム「grm-service」、各カラム「grm-service-item」）
========================= */
.grm-photo-content .wp-block-columns.grm-service{
	gap:24px;
	margin:0;
}
.grm-photo-content .grm-service-item{
	overflow:hidden;
	border-radius:var(--radius);
	background:var(--color-gray);
}
.grm-photo-content .grm-service-item .wp-block-image{
	margin:0;
}
.grm-photo-content .grm-service-item .wp-block-image img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:16 / 9;
	object-fit:cover;
}
/* 動画の静止画（画像ブロック「grm-video-thumb」）
   ・中央に再生アイコンを重ねるだけ（リンクなし） */
.grm-photo-content .grm-video-thumb{
	position:relative;
	display:block;
}
.grm-photo-content .grm-video-thumb::before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	z-index:1;
	width:64px;
	height:64px;
	margin:-32px 0 0 -32px;
	border-radius:50%;
	background:rgba(0,0,0,.55);
}
.grm-photo-content .grm-video-thumb::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	z-index:2;
	margin:-11px 0 0 -7px;
	border-style:solid;
	border-width:11px 0 11px 19px;
	border-color:transparent transparent transparent #fff;
}

/* 動画の拡大表示 */
.grm-lightbox-video{
	position:relative;
	width:min(1200px, 100%);
	aspect-ratio:16 / 9;
	max-height:calc(100vh - 120px);
}
.grm-lightbox-video iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
}
.grm-lightbox.is-video .grm-lightbox-prev,
.grm-lightbox.is-video .grm-lightbox-next,
.grm-lightbox.is-video .grm-lightbox-count{
	display:none;
}

/* 動画（YouTubeの埋め込みブロック）も写真と同じ16:9で表示 */
.grm-photo-content .grm-service-item .wp-block-embed{
	margin:0;
}
.grm-photo-content .grm-service-item .wp-block-embed__wrapper{
	position:relative;
	aspect-ratio:16 / 9;
	background:#000;
}
.grm-photo-content .grm-service-item .wp-block-embed iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
}
.grm-photo-content .grm-service-item p.grm-service-en{
	margin:22px 24px 6px;
	font-size:11px;
	font-weight:400;
	letter-spacing:.2em;
	color:#4bc1c3;
}
.grm-photo-content .grm-service-item h3{
	margin:0 24px 12px;
	font-family:var(--font-mincho);
	font-size:20px;
	font-weight:500;
	line-height:1.5;
}
.grm-photo-content .grm-service-item p{
	margin:0 24px 26px;
}

/* =========================
   Price（グループ「grm-price-box」）
   ・濃い背景で目立たせ、お問い合わせボタンを大きく
========================= */
.grm-photo-content .grm-price-box{
	padding:64px 40px 70px;
	border-radius:var(--radius);
	background:#222;
	color:#fff;
	text-align:center;
}
.grm-photo-content .grm-price-box p.grm-price-en{
	margin:0 0 4px;
	font-size:32px;
	font-weight:300;
	line-height:1.3;
	color:#fff;
}
.grm-photo-content .grm-price-box p.grm-price-ja{
	margin:0 0 28px;
	font-size:12px;
	color:#fff;
}
.grm-photo-content .grm-price-box h3{
	margin:0 0 18px;
	font-family:var(--font-mincho);
	font-size:clamp(22px, 2.6vw, 30px);
	font-weight:500;
	line-height:1.5;
	color:#fff;
}
.grm-photo-content .grm-price-box p{
	margin:0 0 34px;
	color:#fff;
}
.grm-photo-content .grm-price-box .wp-block-buttons{
	justify-content:center;
}
.grm-photo-content .wp-block-button.grm-btn-cta .wp-block-button__link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:14px;
	min-width:300px;
	padding:20px 44px !important;
	border:0 !important;
	border-radius:999px !important;
	background:#4bc1c3 !important;
	color:#fff !important;
	font-size:16px !important;
	font-weight:500 !important;
	letter-spacing:.08em;
	text-decoration:none !important;
	transition:.2s;
}
.grm-photo-content .wp-block-button.grm-btn-cta .wp-block-button__link::after{
	content:"→";
	font-size:16px;
}
.grm-photo-content .wp-block-button.grm-btn-cta .wp-block-button__link:hover{
	background:#fff !important;
	color:#222 !important;
}

/* =========================
   Glossary（カラム「grm-glossary-card」）
   ・タイトルも含めてコラム記事のカード風に
   ・左に写真、右にラベル・タイトル・説明・ボタン
========================= */
.grm-photo-content .wp-block-columns.grm-glossary-card{
	gap:0;
	align-items:stretch;
	margin:0;
	overflow:hidden;
	border-radius:var(--radius);
	background:var(--color-gray);
}
.grm-photo-content .grm-glossary-card .wp-block-image{
	height:100%;
	margin:0;
}
.grm-photo-content .grm-glossary-card .wp-block-image img{
	display:block;
	width:100%;
	height:100%;
	min-height:280px;
	object-fit:cover;
}
.grm-photo-content .grm-glossary-card .grm-glossary-text{
	align-self:center;
	padding:44px 48px;
}
.grm-photo-content .grm-glossary-card p.grm-glossary-en{
	margin:0 0 10px;
	font-size:11px;
	letter-spacing:.2em;
	color:#4bc1c3;
}
.grm-photo-content .grm-glossary-card h2{
	margin:0 0 4px;
	font-size:32px;
	font-weight:300;
	line-height:1.3;
}
.grm-photo-content .grm-glossary-card p.grm-glossary-ja{
	margin:0 0 20px;
	font-size:12px;
	color:var(--color-main);
}
.grm-photo-content .grm-glossary-card p{
	margin:0 0 22px;
}
.grm-photo-content .grm-glossary-card .wp-block-buttons{
	margin:0;
}

@media(max-width:767px){
	.grm-photo-hero{
		margin-bottom:24px;
	}
	.grm-photo-lead{
		margin-bottom:60px;
		font-size:14px;
	}
	.grm-photo-patterns{
		width:calc(100vw - 30px);
		margin-bottom:80px;
	}
	.grm-photo-patterns-title,
	.grm-photo-content .grm-photo-sec-head h2,
	.grm-photo-content .grm-price-box p.grm-price-en{
		font-size:26px;
	}
	.grm-photo-pattern{
		margin-bottom:40px;
	}
	.grm-photo-justify{
		gap:6px;
	}
	.grm-photo-item{
		flex-basis:calc(var(--r) * 110px);
	}
	.grm-photo-content .grm-photo-sec{
		margin-bottom:80px;
	}
	.grm-photo-content .grm-flow-step{
		padding:0 0 30px 0;
	}
	.grm-photo-content .grm-flow-step::before{
		display:none;
	}
	.grm-photo-content p.grm-flow-num{
		position:relative;
		width:72px;
		height:72px;
		margin:0 0 -36px 20px;
		font-size:22px;
		z-index:1;
	}
	.grm-photo-content .grm-flow-body{
		padding:48px 20px 26px;
	}
	.grm-photo-content .grm-flow-body h3{
		font-size:19px;
	}
	.grm-photo-content .grm-flow-box{
		padding:18px 16px;
	}
	.grm-photo-content .grm-price-box{
		padding:44px 20px 48px;
	}
	.grm-photo-content .wp-block-button.grm-btn-cta .wp-block-button__link{
		min-width:0;
		width:100%;
		padding:18px 24px !important;
	}
	.grm-photo-content .grm-glossary-card .wp-block-image img{
		min-height:0;
		aspect-ratio:16 / 9;
	}
	.grm-photo-content .grm-glossary-card .grm-glossary-text{
		padding:28px 22px 32px;
	}
	.grm-photo-content .grm-glossary-card h2{
		font-size:26px;
	}
	.grm-lightbox{
		padding:56px 10px;
	}
	.grm-lightbox-prev,
	.grm-lightbox-next{
		top:auto;
		bottom:6px;
		margin-top:0;
	}
}