/*
 * 固定ページ用のスタイル
 * - 「工房紹介（ワイド）」テンプレート（page-templates/page-wide.php）
 * - ブロックパターン「工房SlowField」（inc/slowfield-page.php）
 * 表示側とブロックエディターの両方で読み込まれる。
 *
 * メイン色 #455765 / サブ色 #6b7b6e / アクセント #1f3134
 */

/* =テンプレート：工房紹介（ワイド）
-------------------------------------------------------------- */

/* サイドバー用の2カラム幅を解除して1カラムに */
.page-template-page-wide #main.two-column #content,
.page-template-page-templates-page-wide-php #main.two-column #content,
.sf-wide-page #main.two-column #content {
	width: 100%;
	float: none;
}

.sf-wide-header {
	padding: 2em 0 1em;
	text-align: center;
}

.sf-wide-title {
	margin: 0;
	color: #455765;
	font-family: 'Rozha One', serif;
	font-size: 2em;
	font-weight: normal;
	letter-spacing: .04em;
}

/* アイキャッチ画像を全幅で表示して、タイトル（＋サブタイトル）を中央に重ねる
   高さ・オーバーレイは編集画面の「ページ上部の写真」で設定（inc/slowfield-page.php） */
.sf-wide-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 100vw;
	height: max(160px, calc(var(--sf-hero-h, 440px) * .55));
	margin: 0 0 2em calc(50% - 50vw);
	background-color: #455765;
}

.sf-wide-hero-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* オーバーレイ（色の膜）。濃さは --sf-overlay（0〜0.8） */
.sf-wide-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: var(--sf-overlay, .3);
}

.sf-hero-overlay--key::after { background-color: #6c848d; }
.sf-hero-overlay--main::after { background-color: #455765; }

.sf-wide-hero-text {
	position: relative;
	z-index: 1;
	padding: 0 1.5em;
	text-align: center;
}

.sf-wide-hero .sf-wide-title {
	color: #fff;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: .08em;
	text-shadow: 0 1px 12px rgba(31, 49, 52, .45);
}

.sf-wide-hero-sub {
	margin: .6em 0 0;
	color: #fff;
	font-size: .9em;
	letter-spacing: .12em;
	text-shadow: 0 1px 10px rgba(31, 49, 52, .45);
}

.sf-wide-content {
	color: #444;
	line-height: 2.1;
}

/* 普通の段落（クラスなし）も「写真＋文章」パターンと同じ文字サイズ・色・行間にそろえる */
.sf-wide-content p:not([class]) {
	color: #444;
	font-size: .9em;
	line-height: 2.1;
}

.sf-wide-edit {
	margin: 2em 0;
	font-size: .8em;
	text-align: right;
}

/* =パターン共通
-------------------------------------------------------------- */

.sf-p-heading {
	margin: 2.5em 0 0 !important;
	color: #455765 !important; /* サイト共通の見出し（白文字）を打ち消す */
	font-family: 'Rozha One', serif;
	font-size: 1.75em !important;
	font-weight: normal;
	line-height: 1.3;
	letter-spacing: .04em;
	text-align: center;
	border: none !important;
	background: none !important;
	padding: 0 !important;
}

.sf-p-sub {
	margin: .3em 0 2em !important;
	color: #888;
	font-size: .75em;
	letter-spacing: .1em;
	text-align: center;
}

/* 背景色を画面の端まで広げる */
.sf-p-bg {
	margin-top: 3em;
	margin-bottom: 3em;
	padding: 1em 0 3em;
	background-color: #f2f4f3;
	box-shadow: 0 0 0 100vmax #f2f4f3;
	clip-path: inset(0 -100vmax);
}

.sf-p-bg > .sf-p-heading:first-child {
	margin-top: 1.5em !important;
}

.sf-wide-content .wp-block-image,
.sf-wide-content .wp-block-image img {
	margin: 0;
}

/* =写真＋文章（2列）
-------------------------------------------------------------- */

.sf-p-split {
	margin: 3em 0;
}

.sf-p-split .wp-block-columns {
	gap: 1.5em 3em;
	margin: 0;
}

.sf-p-split .wp-block-image {
	overflow: hidden;
	margin: 0;
	aspect-ratio: 3 / 2;
}

.sf-p-split .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sf-p-split-title {
	margin: 0 0 .8em !important;
	color: #455765 !important;
	font-family: 'Rozha One', 'Noto Sans JP', serif;
	font-size: 1.5em !important;
	font-weight: normal;
	line-height: 1.4;
	border: none !important;
	background: none !important;
	padding: 0 !important;
}

.sf-p-split p {
	margin: 0 0 1em;
	color: #444;
	font-size: .9em;
	line-height: 2.1;
}

/* =こだわり3つ並び
-------------------------------------------------------------- */

.sf-p-points .wp-block-columns {
	gap: 2em;
}

.sf-p-points .wp-block-image {
	overflow: hidden;
	margin: 0 0 1em;
	aspect-ratio: 4 / 3;
}

.sf-p-points .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sf-p-points h3 {
	margin: 0 0 .4em !important;
	color: #455765 !important;
	font-size: 1.05em !important;
	border: none !important;
	background: none !important;
	padding: 0 !important;
}

.sf-p-points p {
	margin: 0;
	color: #555;
	font-size: .85em;
	line-height: 1.9;
}

/* =3点ならべ（ダーク背景・Nets ページ構成用）
-------------------------------------------------------------- */

.sf-p-points--dark {
	background-color: #455765;
	box-shadow: 0 0 0 100vmax #455765;
	clip-path: inset(0 -100vmax);
	margin-top: 0;
	margin-bottom: 0;
	padding: 2.5em 0 3em;
}

.sf-p-points--dark .sf-p-points-cols {
	gap: 0;
}

.sf-p-points--dark .wp-block-column {
	padding: 1em 1.5em;
	border-right: 1px solid rgba(255,255,255,.15);
}

.sf-p-points--dark .wp-block-column:last-child {
	border-right: none;
}

.sf-p-points--dark .sf-p-points-h {
	margin: 0 0 .5em !important;
	color: #fff !important;
	font-family: 'Rozha One', serif;
	font-size: 1.2em !important;
	letter-spacing: .08em;
	border: none !important;
	background: none !important;
	padding: 0 !important;
}

.sf-p-points--dark p {
	color: rgba(255,255,255,.8);
	font-size: .82em;
	line-height: 1.9;
	margin: 0;
}

.sf-point-en {
	font-family: 'Rozha One', sans-serif;
	font-size: .68em !important;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255,255,255,.55) !important;
	margin: 0 0 .3em !important;
}

/* =60/40 写真＋テキスト（Nets ページ構成用）
-------------------------------------------------------------- */

.sf-wide-split.wp-block-media-text {
	gap: 0;
	margin: 0;
	border-top: 3px solid #f2f4f3;
}

.sf-wide-split.wp-block-media-text:first-of-type {
	border-top: none;
}

.sf-wide-split .wp-block-media-text__media {
	margin: 0;
}

.sf-wide-split .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sf-wide-split .wp-block-media-text__content {
	padding: 2.5em 2.5em;
	align-self: center;
}

.sf-wide-split--alt .wp-block-media-text__content {
	background-color: #f2f4f3;
}

.sf-split-en {
	font-family: 'Rozha One', serif;
	font-size: .7em !important;
	letter-spacing: .14em;
	color: #6c848d !important;
	text-transform: uppercase;
	margin: 0 0 .3em !important;
}

.sf-p-cta-btn {
	margin-top: 3em;
	margin-bottom: 3em;
}

/* =写真ギャラリー
-------------------------------------------------------------- */

.sf-p-gallery {
	margin: 3em 0;
	gap: .6em !important;
}

.sf-p-gallery .wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* =メッセージ（中央揃え）
-------------------------------------------------------------- */

.sf-p-message {
	margin: 3em 0;
	padding: 1em 0 1em;
	text-align: center;
}

.sf-p-message::before {
	content: "";
	display: block;
	width: 1px;
	height: 3em;
	margin: 0 auto 2em;
	background-color: #9aa7b0;
}

.sf-p-message-ja {
	margin: 0 0 1.5em !important;
	color: #455765;
	font-size: 1em;
	line-height: 2.4;
	letter-spacing: .08em;
	text-align: center;
}

.sf-p-message-en {
	margin: 0 !important;
	color: #6b7b6e;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: .9em;
	font-style: italic;
	line-height: 1.9;
	text-align: center;
}

/* =工房情報
-------------------------------------------------------------- */

.sf-p-info-table {
	max-width: 40em;
	margin: 0 auto 2em;
}

.sf-p-info-table table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #d5dbdf;
}

.sf-p-info-table td {
	padding: .9em .5em;
	border: none;
	border-bottom: 1px solid #d5dbdf;
	font-size: .9em;
	line-height: 1.8;
	text-align: left;
	vertical-align: top;
}

/* 1列目を項目名として扱う */
.sf-p-info-table td:first-child {
	width: 7em;
	color: #455765;
	font-weight: bold;
	white-space: nowrap;
}

.sf-p-buttons {
	justify-content: center;
	gap: 1em;
}

.sf-p-btn .wp-block-button__link {
	padding: .7em 2.2em;
	border: 1px solid #455765;
	border-radius: 0;
	background-color: transparent;
	color: #455765 !important;
	font-size: .85em;
	transition: background-color .2s, color .2s;
}

.sf-p-btn .wp-block-button__link:hover {
	background-color: #455765;
	color: #fff !important;
}

/* =タブレット以上
-------------------------------------------------------------- */

@media screen and (min-width: 46.25em) {

	.sf-wide-title {
		font-size: 2.6em;
	}

	.sf-wide-hero {
		height: var(--sf-hero-h, 440px);
	}

	.sf-wide-hero .sf-wide-title {
		font-size: 2.6em;
	}

	.sf-p-split-title {
		font-size: 1.8em !important;
	}
}

/* 写真を右にするパターン（列が横並びになる幅から） */
@media screen and (min-width: 782px) {

	.sf-p-split--reverse .wp-block-column:first-child {
		order: 2;
	}
}

/* =幅広・全幅ブロック（カバー・画像など）
-------------------------------------------------------------- */

body.page-template-page-wide,
body.page-template-page-templates-page-wide-php,
body.sf-wide-page,
body.sf-post:not(.sf-post--sidebar) {
	overflow-x: clip;
}

/* 全幅：画面の端から端まで */
.sf-wide-content .alignfull,
.sf-post:not(.sf-post--sidebar) .sf-article-body .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* 幅広：本文より少し広く（最大 1200px） */
.sf-wide-content .alignwide,
.sf-post:not(.sf-post--sidebar) .sf-article-body .alignwide {
	width: min(1200px, 100vw);
	max-width: min(1200px, 100vw);
	margin-left: calc(50% - min(600px, 50vw));
	margin-right: calc(50% - min(600px, 50vw));
}

/* =カバーブロック内の見出し
   サイト共通の見出し（帯の背景＋左線）を外して、写真の上に白文字で載せる
-------------------------------------------------------------- */

.entry-content .wp-block-cover h2,
.entry-content .wp-block-cover h3 {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	color: #fff;
	font-weight: bold;
	letter-spacing: .08em;
	text-shadow: 0 1px 12px rgba(31, 49, 52, .45);
}

/* =ロゴ画像（画像ブロックに追加CSSクラス「sf-logo-mark」を付ける）
-------------------------------------------------------------- */

.sf-logo-mark img {
	display: block;
	width: 100%;
	height: auto;
}

/* スマホでは少し小さく、中央に */
@media screen and (max-width: 46.24em) {

	.sf-logo-mark,
	.wp-block-image.sf-logo-mark {
		max-width: 60%;
		margin: 0 auto 1.5em !important;
	}

	/* メッセージの和文がスマホで変な位置で折り返さないよう少し小さく */
	.sf-p-message-ja {
		font-size: .9em;
		letter-spacing: .04em;
	}
}

/* =背景色を付けたカラム・グループに内側の余白
   （ブロック側でパディングを指定した場合はそちらが優先される）
-------------------------------------------------------------- */

.sf-wide-content .wp-block-columns.has-background,
.sf-wide-content .wp-block-group.has-background:not(.sf-p-bg) {
	padding: 1.5em 1.25em;
}

@media screen and (min-width: 46.25em) {

	.sf-wide-content .wp-block-columns.has-background,
	.sf-wide-content .wp-block-group.has-background:not(.sf-p-bg) {
		padding: 2.5em 2.5em;
	}
}