/* 2026-09-30 oddeye（1.8.8）: テーマと同じく、768〜1049px で小さくなりすぎないよう各 font-size に max(下限px, Nrem) を併記。1行目と2行目はセットで直すこと */
@charset "UTF-8";
/* ==========================================================================
   フジアール CSRレポート
   既存 assets/css/csr.css の値をそのまま継承しています。
   - アクセント       #45A7DC
   - ボックス背景     #F7F7F7 / 角丸 1rem
   - 注記             #7B7B7B / 1.4rem / 上罫線 #ccc
   - SPブレイクポイント 767px、SPは vw 指定（既存と同じ換算 430px 基準）
   ========================================================================== */

:root {
	--csr-blue: #45A7DC;
	--csr-bg: #F7F7F7;
	--csr-note: #7B7B7B;
	--csr-line: #ccc;
}

/* --------------------------------------------------------------------------
   0. SDGsページ上部（スマホのみ）
      「SDGs」見出しと「すべての人の人権を尊重し、…」の間が開きすぎるので詰める。
      テーマの .p-csr-lead2 は SP 用の margin 指定がなく、PCの 8rem がそのまま
      効いてしまっている。PCは触らない。
   -------------------------------------------------------------------------- */
/*
 * 下部3バナーの間隔（PCのみ）。
 * バナー画像は左右に 13px ずつ余白を持っていて、見た目の隙間は約 24.5px。
 * これを 1.5倍（約36.8px）にする。
 *
 * gap を足すだけだとバナー自体が縮んで余白も一緒に縮むので、
 * 増やすぶんだけ左右のネガティブマージンを広げ、
 * バナーの大きさ（380px）は変えずに隙間だけ広げる。
 */
@media print, screen and (min-width: 768px) {
	.p-csr .p-csr-list {
		gap: 12.25px;
		margin-left: -32.25px;
		margin-right: -32.25px;
	}
}

@media screen and (max-width: 767px) {
	.p-csr .p-csr-lead2 {
		margin-top: 4rem;
		margin-bottom: 3.5rem;
	}

	/* 活動報告カードと下の3バナーの間を広げる（テーマ既定 4.65116vw の倍） */
	.p-csr .p-csr-list {
		margin-top: 9.30232vw;
	}
}

/* --------------------------------------------------------------------------
   1. 一覧カード（SDGsページの Action Report）
   -------------------------------------------------------------------------- */
.p-report-cards {
	margin-top: 5.5rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4rem 3rem;
}

@media screen and (max-width: 767px) {
	.p-report-cards {
		grid-template-columns: repeat(1, 1fr);
		gap: 6.976744186vw;
		margin-top: 9.3023255814vw;
	}
}

/*
 * タイトルの行数が違ってもカードの下端が揃うよう、
 * 縦フレックスにして青帯を下まで伸ばす。
 */
.p-report-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	border-radius: 1rem;
	overflow: hidden;
	background: var(--csr-bg);
}

.p-report-card-img {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	flex: 0 0 auto;
}

.p-report-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: 0.3s;
}

/* ホバーのズームは既存サイト（.c-other / .c-memberGrid）と同じ scale(1.1) / 0.3s */
@media (any-hover: hover) and (min-width: 768px) {
	.p-report-card:hover .p-report-card-img img {
		transform: scale(1.1, 1.1);
	}
}

.p-report-card-ttl {
	background: var(--csr-blue);
	color: #fff;
	font-size: 1.6rem; font-size: max(14px, 1.6rem);
	font-weight: 600;
	line-height: 1.5;
	padding: 1.6rem 5.5rem 1.6rem 2.4rem;
	position: relative;
	min-height: 6.5rem;
	display: flex;
	align-items: center;
	flex: 1 1 auto; /* タイトルが1行でも帯が下端まで伸びて、カードの高さが揃う */
}

@media screen and (max-width: 767px) {
	.p-report-card-ttl {
		font-size: 3.2558139535vw;
		padding: 3.488372093vw 11.627906977vw 3.488372093vw 4.6511627907vw;
		min-height: 0;
	}
}

.p-report-card-arrow {
	position: absolute;
	right: 2rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	background: #fff;
	display: block;
}

.p-report-card-arrow::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.7rem;
	height: 0.7rem;
	border: 0;
	border-top: 2px solid var(--csr-blue);
	border-right: 2px solid var(--csr-blue);
	border-radius: 0;
	background: none;
	transform: translate(-65%, -50%) rotate(45deg);
}

.p-report-card-arrow::after {
	content: none;
}

@media screen and (max-width: 767px) {
	.p-report-card-arrow {
		right: 4.186046511vw;
		width: 5.813953488vw;
		height: 5.813953488vw;
	}
	.p-report-card-arrow::before {
		width: 1.395348837vw;
		height: 1.395348837vw;
		border-top-width: 2px;
		border-right-width: 2px;
	}
}

/* --------------------------------------------------------------------------
   1-b. ページャ
   Others一覧（.c-innerPager）と同じ寸法・同じ見た目。
   テーマ側にスタイルが無いページでも崩れないよう、必要な指定を自前で持つ。
   -------------------------------------------------------------------------- */
.p-report .c-innerPager,
.p-csr .c-innerPager {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	font-family: "Outfit", sans-serif;
	font-weight: 500;
	margin-top: 6rem;
}

.p-csr .c-innerPager-item {
	font-size: 1.8rem; font-size: max(15px, 1.8rem);
	letter-spacing: 0.05em;
	position: relative;
	color: #181818;
	text-decoration: none;
}

.p-csr .c-innerPager-item .icn {
	width: 7.6rem;
	height: 7.6rem;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--csr-cursor-icon) left top / contain no-repeat;
}

.p-csr .c-innerPager-item.m-prev {
	padding-left: 9.5rem;
}

.p-csr .c-innerPager-item.m-prev .icn {
	left: 0;
	transform: translateY(-50%) scale(-1, 1);
}

.p-csr .c-innerPager-item.m-next {
	padding-right: 9.5rem;
}

.p-csr .c-innerPager-item.m-next .icn {
	right: 0;
}

.p-csr .c-innerPager-item.is-none {
	color: #ccc;
	filter: grayscale(1);
	pointer-events: none;
}

.p-csr .c-innerPager-item.is-none .icn {
	opacity: 0.5;
}

.p-csr .c-innerPager-list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.p-csr .c-innerPager-list li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5.6rem;
	height: 5.6rem;
	border-radius: 10rem;
	background: #F7F7F7;
	color: #181818;
	text-decoration: none;
	font-size: 1.6rem; font-size: max(14px, 1.6rem);
	transition: 0.3s;
}

.p-csr .c-innerPager-list li a.is-current {
	background: #181818;
	color: #fff;
}

.p-csr .c-innerPager-list li span {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2.2rem; font-size: max(17px, 2.2rem);
	line-height: 1;
	margin-bottom: 1rem;
}

@media (any-hover: hover) and (min-width: 768px) {
	.p-csr .c-innerPager-list li a:not(.is-current):hover {
		background: var(--csr-blue);
		color: #fff;
	}
	.p-csr .c-innerPager-item:not(.is-none):hover {
		color: var(--csr-blue);
	}
}

@media screen and (max-width: 767px) {
	.p-report .c-innerPager,
	.p-csr .c-innerPager {
		margin-top: 6rem;
		justify-content: center;
	}
	.p-csr .c-innerPager-item {
		font-size: 3.72093vw;
	}
	.p-csr .c-innerPager-item .icn {
		width: 10.6977vw;
		height: 10.6977vw;
	}
	.p-csr .c-innerPager-item.m-prev {
		padding-left: 13.9535vw;
	}
	.p-csr .c-innerPager-item.m-next {
		padding-right: 13.9535vw;
	}
	.p-csr .c-innerPager-list {
		gap: 0.697674vw;
		margin: 0 4.65116vw;
	}
	.p-csr .c-innerPager-list li a {
		width: 8.37209vw;
		height: 8.37209vw;
		font-size: 3.48837vw;
	}
	.p-csr .c-innerPager-list li span {
		font-size: 4.18605vw;
	}
}

/* --------------------------------------------------------------------------
   2. 詳細ページ
   -------------------------------------------------------------------------- */

/* 詳細では見出しが複数行になりうるので、固定幅ではなく可変に */
.p-csr-single .p-report-headline {
	width: auto;
	max-width: 78.9rem;
	height: auto;
	min-height: 6.5rem;
	padding: 1.4rem 4rem;
	line-height: 1.5;
}

@media screen and (max-width: 767px) {
	/*
	 * 既存の一覧ページでは見出しが position:absolute でボックスの上に重なる作りだが、
	 * 詳細ページは見出しが複数行になりうるので、SPでも通常フローに戻して
	 * PCと同じ「ボックスから少し飛び出す」挙動に揃える。
	 */
	.p-csr-single .p-report-box {
		padding: 0 6.976744186vw 6.976744186vw;
	}
	.p-csr-single .p-report-headline {
		position: relative;
		left: auto;
		right: auto;
		top: -3.488372093vw;
		width: auto;
		max-width: 100%;
		margin: 0 auto;
		padding: 2.790697674vw 4.6511627907vw;
		height: auto;
		min-height: 0;
	}
}

.p-report-body {
	margin-top: 1.5rem;
}

.p-report-body > *:first-child {
	margin-top: 0;
}

.p-report-body p {
	font-size: 1.6rem; font-size: max(14px, 1.6rem);
	line-height: 1.875;
	font-weight: 300;
	margin-top: 2.4rem;
}

@media screen and (max-width: 767px) {
	.p-report-body p {
		font-size: 3.2558139535vw;
		line-height: 1.8;
		margin-top: 4.6511627907vw;
	}
}

.p-report-body a {
	color: var(--csr-blue);
	text-decoration: underline;
}

.p-report-body img {
	max-width: 100%;
	height: auto;
}

/* --- 見出し（ブロックスタイル「青帯見出し」） ------------------------------ */
.p-report-body h2,
.p-report-body h3,
.p-report-body h4 {
	font-size: 2rem; font-size: max(16px, 2rem);
	font-weight: 600;
	line-height: 1.6;
	margin-top: 5rem;
	color: #222;
}

@media screen and (max-width: 767px) {
	.p-report-body h2,
	.p-report-body h3,
	.p-report-body h4 {
		font-size: 3.720930232vw;
		margin-top: 8.139534883vw;
	}
}

/*
 * 中タイトル（青文字・枠なし）
 * Figmaどおり。文字サイズは大タイトル（.p-report-headline）と同じ 2rem。
 * 枠を持たず、青文字・太字で【左詰】に置く。
 */
.p-report-body .is-style-csr-ribbon {
	background: none;
	color: var(--csr-blue);
	border-radius: 0;
	text-align: left;
	font-size: 2rem; font-size: max(16px, 2rem);
	font-weight: 700;
	line-height: 1.5;
	padding: 0;
	margin: 6rem 0 0;
	display: block;
	width: auto;
	max-width: 100%;
}

/* 中タイトルの直後は余白を詰める（本文 1.2rem ／ 写真は少し広めに 1.6rem） */
.p-report-body .is-style-csr-ribbon + p {
	margin-top: 1.2rem !important;
}

.p-report-body .is-style-csr-ribbon + .wp-block-gallery,
.p-report-body .is-style-csr-ribbon + .wp-block-image,
.p-report-body .is-style-csr-ribbon + figure {
	margin-top: 1.6rem !important;
}

@media screen and (max-width: 767px) {
	/* SPでは大タイトル（.p-report-headline = 3.2558139535vw）より大きくならないよう
	   同寸に合わせる。3.7209vw のままだと「中 > 大」の逆転が起きる（2026-09-17 実測） */
	.p-report-body .is-style-csr-ribbon {
		font-size: 3.2558139535vw;
		padding: 0;
		margin-top: 9.3023255814vw;
	}
	.p-report-body .is-style-csr-ribbon + p {
		margin-top: 2.325581395vw !important;
	}
	.p-report-body .is-style-csr-ribbon + .wp-block-gallery,
	.p-report-body .is-style-csr-ribbon + .wp-block-image,
	.p-report-body .is-style-csr-ribbon + figure {
		margin-top: 3.100775193vw !important;
	}
}

/* --- 小タイトル（グレーの角丸枠・太字・左寄せ） ---------------------------- */
.p-report-body .is-style-csr-subhead {
	font-size: 1.6rem; font-size: max(14px, 1.6rem);
	font-weight: 700;
	line-height: 1.5;
	color: #222;
	margin: 4rem 0 0;
	background: #CFCFCF;
	padding: 0.48rem 1.92rem;
	border-radius: 0.8rem;
	display: inline-block;
	width: auto;
	max-width: 100%;
	text-align: left;
}

.p-report-body .is-style-csr-subhead + p {
	margin-top: 1.05rem;
}

@media screen and (max-width: 767px) {
	.p-report-body .is-style-csr-subhead {
		font-size: 3.2558139535vw;
		margin-top: 6.976744186vw;
		padding: 1.116279069vw 3.720930232vw;
		border-radius: 1.860465116vw;
	}
	.p-report-body .is-style-csr-subhead + p {
		margin-top: 2.441860465vw;
	}
}

/* --- 写真キャプション（写真グループの下にまとめて置く段落） ---------------- */
.p-report-body .is-style-csr-caption {
	font-size: 1.4rem !important; font-size: max(12.25px, 1.4rem) !important;
	line-height: 1.8;
	font-weight: 300;
	color: var(--csr-note);
	margin-top: 2rem !important;
}

@media screen and (max-width: 767px) {
	.p-report-body .is-style-csr-caption {
		font-size: 2.7906976744vw !important;
		margin-top: 3.488372093vw !important;
	}
}

/* --- 区切り線（青・太め・角丸） --------------------------------------------
   ボックス（.p-report-box）の左右パディング分まではみ出させて、
   本文より左右に長く見せる。
   -------------------------------------------------------------------------- */
.p-report-body .wp-block-separator {
	border: 0 !important;
	background: var(--csr-blue);
	height: 3px;
	border-radius: 10rem;
	margin: 5rem -3.5rem 0;
	opacity: 1;
	width: calc(100% + 7rem);
	max-width: none;
}

@media screen and (max-width: 767px) {
	.p-report-body .wp-block-separator {
		margin: 8.139534883vw -4.6511627907vw 0;
		width: calc(100% + 9.3023255814vw);
	}
}

/* --- 写真グリッド ----------------------------------------------------------
   制作実績ページ（.c-meDetail-body .photoset-grid）と同じ寸法に統一。
   PC : 2列固定 / 1枚あたり 高さ 40.2rem / gap 3rem / 角丸 2rem / object-fit:cover
   SP : 1列     / 高さ 68.1395vw        / gap 3.48837vw / 角丸 3.48837vw
   枚数や列指定にかかわらず、大小が混ざらないよう常に同じ大きさで出す。
   -------------------------------------------------------------------------- */
.p-report-body .wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 3rem !important;
	margin: 5rem 0 0;
}

/*
 * 図版の枠。
 * 写真そのものは 40.2rem の固定高さで cover、
 * キャプションはその「下」に独立した領域として置く（重ねない）。
 */
.p-report-body .wp-block-gallery figure.wp-block-image {
	margin: 0 !important;
	width: 100% !important;
	flex-basis: auto !important;
	flex-grow: 0 !important;
	display: flex;
	flex-direction: column;
	background: none;
	border-radius: 0;
	overflow: visible;
	position: static;
}

/*
 * WordPress 標準の
 *   .wp-block-gallery.has-nested-images figure.wp-block-image img { height:auto }
 * のほうが詳細度が高いので、!important で上書きする。
 */
.p-report-body .wp-block-gallery figure.wp-block-image img {
	width: 100% !important;
	height: 40.2rem !important;
	object-fit: cover !important;
	display: block;
	background: #ccc;
	border-radius: 2rem;
	flex: none !important;
}

/* --- クリックで拡大（Magnific Popup） --------------------------------------
   制作実績ページ（.c-meDetail-body .photoset）と同じ挙動。
   ホバーで青いカバー＋拡大アイコン、クリックで白背景のポップアップ。
   表示サイズだけ 1000px → 1500px（1.5倍）にしている。
   -------------------------------------------------------------------------- */
.p-report-body a.js-popup {
	display: block;
	position: relative;
	line-height: 0;
	cursor: zoom-in;
}

.p-report-body a.js-popup::before {
	content: "";
	width: 100%;
	height: 100%;
	background: var(--csr-blue);
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: 0.3s;
	border-radius: 2rem;
	z-index: 1;
	pointer-events: none;
}

.p-report-body a.js-popup::after {
	content: "";
	width: 6rem;
	height: 6rem;
	background: var(--csr-open-icon) left top / cover no-repeat;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: 0.3s;
	z-index: 2;
	pointer-events: none;
}

@media (any-hover: hover) and (min-width: 768px) {
	.p-report-body a.js-popup:hover::before {
		opacity: 0.6;
	}
	.p-report-body a.js-popup:hover::after {
		opacity: 1;
	}
}

@media screen and (max-width: 767px) {
	.p-report-body a.js-popup::before {
		border-radius: 3.48837vw;
	}
	.p-report-body a.js-popup::after {
		width: 11.627906976vw;
		height: 11.627906976vw;
	}
}

/* 拡大表示。制作実績ページと同じ見た目で、サイズだけ 1000px → 1500px */
.mfp-csr.mfp-bg {
	background: #fff;
	opacity: 0.9;
}

.mfp-csr .mfp-container {
	padding-top: 3rem;
	padding-bottom: 13rem;
}

/*
 * Magnific 既定の「虫めがね（−）」カーソルを出さない。
 * 写真の外や画像の上でカーソルが変わると操作しづらいため、
 * 常に通常の矢印にする（閉じるボタンだけ pointer）。
 */
.mfp-csr.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-csr,
.mfp-csr,
.mfp-csr .mfp-wrap,
.mfp-csr .mfp-container,
.mfp-csr .mfp-content,
.mfp-csr .mfp-figure,
.mfp-csr .csr-figure,
.mfp-csr img.mfp-img,
.mfp-csr .mfp-gallery .mfp-image-holder .mfp-figure {
	cursor: default !important;
}

.mfp-csr button.mfp-close,
.mfp-csr .mfp-close,
.mfp-wrap.mfp-csr button.mfp-close {
	cursor: pointer !important;
}

/* body 側に付く zoom-out カーソルも打ち消す */
html.mfp-csr-open,
html.mfp-csr-open body,
body.mfp-zoom-out-cur,
.mfp-zoom-out-cur {
	cursor: default !important;
}

/*
 * 拡大表示もページ上と同じトリミング（480 : 402）で見せる。
 * 枠の幅は「最大1500px」「画面幅の92%」「画面の高さから閉じるボタン分を引いた値」の
 * いちばん小さいものを採用するので、どんな画面でも枠ごと画面内に収まる。
 */
.mfp-csr .mfp-figure {
	position: relative;
	line-height: 0;
}

.mfp-csr .mfp-figure::after {
	content: none;
}

.mfp-csr .csr-figure {
	margin: 0;
	width: min(1500px, 92vw, calc((100vh - 19rem) * 480 / 402));
	aspect-ratio: 480 / 402;
	overflow: hidden;
	border-radius: 3rem;
	background: #ccc;
}

.mfp-csr img.mfp-img {
	padding: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	border-radius: 0;
	display: block;
}

/*
 * 閉じるボタン。mainClass は .mfp-wrap にも付くので、そちら側から指定する。
 * （.mfp-container は .mfp-wrap の子）
 */
.mfp-wrap.mfp-csr .mfp-container button.mfp-close,
.mfp-csr .mfp-container button.mfp-close,
.mfp-csr button.mfp-close {
	top: auto !important;
	right: 0 !important;
	bottom: -9.5rem !important;
	left: 0 !important;
	margin: 0 auto !important;
	width: 7.5rem !important;
	height: 7.5rem !important;
	background: var(--csr-close-icon) left top / cover no-repeat !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	opacity: 1 !important;
	padding: 0 !important;
	text-align: center !important;
}

@media screen and (max-width: 767px) {
	/*
	 * SPでは画像が画面上部に寄ってしまうので、
	 * Magnific 既定の vertical-align 方式をやめて flex で縦中央に固定する。
	 * 閉じるボタンが画像の下に出るぶん、画像の最大高さも抑える。
	 */
	.mfp-csr .mfp-container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 4.6511627907vw;
		padding-right: 4.6511627907vw;
		padding-top: 4.6511627907vw;
		padding-bottom: 27.906976744vw;
	}

	.mfp-csr .mfp-container::before {
		content: none;
	}

	.mfp-csr .mfp-content {
		margin: 0 auto;
		vertical-align: middle;
		width: auto;
		max-width: 100%;
	}

	.mfp-csr .mfp-figure {
		display: block;
	}

	.mfp-csr .csr-figure {
		width: min(92vw, calc((100vh - 32.5581395vw) * 480 / 402));
		border-radius: 3.48837vw;
	}

	.mfp-csr img.mfp-img {
		border-radius: 0;
	}

	.mfp-wrap.mfp-csr .mfp-container button.mfp-close,
	.mfp-csr .mfp-container button.mfp-close,
	.mfp-csr button.mfp-close {
		bottom: -17.441860465vw !important;
		width: 13.953488372vw !important;
		height: 13.953488372vw !important;
	}
}

/* --- キャプション領域（写真の下） --- */
.p-report-body .wp-block-gallery figure.wp-block-image figcaption,
.p-report-body > .wp-block-image figcaption {
	position: static !important;
	margin: 0 !important;
	padding: 1.4rem 0.4rem 0 !important;
	font-size: 1.4rem; font-size: max(12.25px, 1.4rem);
	line-height: 1.7;
	font-weight: 300;
	color: var(--csr-note);
	text-align: left;
	background: none !important;
	max-height: none !important;
	overflow: visible !important;
	text-overflow: clip !important;
	white-space: normal !important;
}

/* 単独の画像ブロックも同じ大きさに揃える */
.p-report-body > .wp-block-image {
	margin: 5rem 0 0;
	width: calc((100% - 3rem) / 2);
}

.p-report-body > .wp-block-image img {
	width: 100% !important;
	height: 40.2rem !important;
	object-fit: cover !important;
	display: block;
	background: #ccc;
	border-radius: 2rem;
}

@media screen and (max-width: 767px) {
	.p-report-body .wp-block-gallery {
		grid-template-columns: repeat(1, 1fr) !important;
		gap: 3.488372093vw !important;
		margin-top: 3.48837vw;
	}
	.p-report-body .wp-block-gallery figure.wp-block-image img,
	.p-report-body > .wp-block-image img {
		height: 68.1395vw !important;
		border-radius: 3.48837vw;
	}
	.p-report-body .wp-block-gallery figure.wp-block-image figcaption,
	.p-report-body > .wp-block-image figcaption {
		font-size: 2.7906976744vw;
		padding: 2.325581395vw 0 0 !important;
	}
	.p-report-body > .wp-block-image {
		width: 100%;
		margin-top: 3.48837vw;
	}
}

/* --- 注記（ブロックスタイル） ---------------------------------------------- */
.p-report-body .is-style-csr-note {
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--csr-line);
	font-size: 1.4rem; font-size: max(12.25px, 1.4rem);
	color: var(--csr-note);
	line-height: 1.8;
}

@media screen and (max-width: 767px) {
	.p-report-body .is-style-csr-note {
		margin-top: 4.6511627907vw;
		padding-top: 4.6511627907vw;
		font-size: 2.7906976744vw;
	}
}

/* --- グレーの囲み ---------------------------------------------------------- */
.p-report-body .is-style-csr-box {
	background: #fff;
	border-radius: 1rem;
	padding: 3rem;
	margin-top: 3rem;
}

@media screen and (max-width: 767px) {
	.p-report-body .is-style-csr-box {
		padding: 4.6511627907vw;
	}
}

/* --------------------------------------------------------------------------
   3. 一覧へ戻る
   -------------------------------------------------------------------------- */
.p-report-back {
	margin-top: 6rem;
	text-align: center;
}

@media screen and (max-width: 767px) {
	.p-report-back {
		margin-top: 9.3023255814vw;
	}
}

/*
 * 制作実績ページのページャ（.l-pager-item）と同じ寸法に合わせる。
 * 文字 2.2rem / weight 500 / 丸アイコン 9.8rem
 * SP : 文字 3.72093vw / 丸 14.8837vw
 */
.p-report-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 2.4rem;
	font-family: "Outfit", sans-serif;
	font-size: 2.2rem; font-size: max(17px, 2.2rem);
	font-weight: 500;
	letter-spacing: 0.05em;
	color: #222;
	text-decoration: none;
	transition: 0.3s;
}

.p-report-back-btn:hover {
	color: var(--csr-blue);
}

.p-report-back-arrow {
	width: 9.8rem;
	height: 9.8rem;
	border-radius: 50%;
	background: var(--csr-blue);
	position: relative;
	flex: 0 0 auto;
	display: block;
}

/*
 * 「く」の字の矢印。
 * border は必ず辺ごとに指定する。まとめて border-width を書くと
 * 4辺すべてに幅が入ってひし形に見えることがある。
 */
.p-report-back-arrow::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.8rem;
	height: 1.8rem;
	border: 0;
	border-top: 3px solid #fff;
	border-left: 3px solid #fff;
	border-radius: 0;
	background: none;
	transform: translate(-30%, -50%) rotate(-45deg);
}

.p-report-back-arrow::after {
	content: none;
}

@media screen and (max-width: 767px) {
	.p-report-back-btn {
		font-size: 3.72093vw;
		gap: 3.488372093vw;
	}
	.p-report-back-arrow {
		width: 14.8837vw;
		height: 14.8837vw;
	}
	.p-report-back-arrow::before {
		width: 3.488372093vw;
		height: 3.488372093vw;
		border-top-width: 2px;
		border-left-width: 2px;
	}
}

/* --------------------------------------------------------------------------
   4. 編集画面でもフロントと同じ見え方にする
      （rem ではなく px で書く。編集画面はテーマの 10px 基準を持たないため）
   -------------------------------------------------------------------------- */
.editor-styles-wrapper {
	background: #F7F7F7;
}

/* 中タイトル（青文字・枠なし・左詰・太字） */
.editor-styles-wrapper .is-style-csr-ribbon,
.editor-styles-wrapper h1.is-style-csr-ribbon,
.editor-styles-wrapper h2.is-style-csr-ribbon,
.editor-styles-wrapper h3.is-style-csr-ribbon,
.editor-styles-wrapper h4.is-style-csr-ribbon {
	background: none;
	color: var(--csr-blue, #45A7DC);
	font-size: 20px;
	font-weight: 700;
	text-align: left;
	padding: 0;
	margin: 48px 0 0;
	border-radius: 0;
}

/* 小タイトル（グレーの角丸枠・太字・左寄せ） */
.editor-styles-wrapper .is-style-csr-subhead,
.editor-styles-wrapper h1.is-style-csr-subhead,
.editor-styles-wrapper h2.is-style-csr-subhead,
.editor-styles-wrapper h3.is-style-csr-subhead,
.editor-styles-wrapper h4.is-style-csr-subhead {
	background: #CFCFCF;
	color: #222;
	font-size: 16px;
	font-weight: 700;
	padding: 5px 19px;
	border-radius: 8px;
	display: inline-block;
	width: auto;
	text-align: left;
	margin: 32px 0 0;
}

/* 写真キャプション */
.editor-styles-wrapper .is-style-csr-caption {
	font-size: 14px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--csr-note, #7B7B7B);
}

/* 注記 */
.editor-styles-wrapper .is-style-csr-note {
	border-top: 1px solid var(--csr-line, #ccc);
	padding-top: 15px;
	color: var(--csr-note, #7B7B7B);
	font-size: 14px;
}

/* グレーの囲み */
.editor-styles-wrapper .is-style-csr-box {
	background: #fff;
	border-radius: 10px;
	padding: 24px;
}

/* 区切り線（青・太め・角丸） */
.editor-styles-wrapper .wp-block-separator {
	border: 0;
	background: var(--csr-blue, #45A7DC);
	height: 3px;
	border-radius: 100px;
	opacity: 1;
	max-width: none;
	width: 100%;
}

/* 写真は2列・同じ大きさ（フロントと同じ見え方） */
.editor-styles-wrapper .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.editor-styles-wrapper .wp-block-gallery.has-nested-images figure.wp-block-image {
	width: 100% !important;
	flex-basis: auto !important;
}

.editor-styles-wrapper .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100% !important;
	height: 240px !important;
	object-fit: cover !important;
	border-radius: 20px;
}