@charset "UTF-8";
/**
 * 石経石材 — 施工事例（case_study）用スタイル
 *
 * ワイヤーフレーム（jirei_wireframe.html）の構成を、既存サイトの
 * トンマナに乗せ直したもの。合わせている決まりは次のとおり。
 *
 *   ルート     html は font-size:62.5%（1rem = 10px）。サイズはremで書く
 *   本文       1.6rem / line-height 2 / letter-spacing .05em / #394049
 *   見出し     Noto Serif JP、#034059、font-weight 500
 *   色         #034059（紺）・#c12d1c（赤）・#394049（本文）
 *              ・#b4b4b4（淡い文字）・#f8f8f8（地）・#ccc（罫）
 *   囲み       角丸なし。チップだけ操作部品なので丸める
 *   骨格       #pageHead → nav#breadcrumb → section#page.subpage_sec > .wrapper
 *
 * ワイヤーフレームのクリーム地（#f4f1ea）とゴールド（#c5b891）は
 * サイトのどこにも出てこない色なので使わない。ここが他サイトに
 * 見えるいちばんの原因だった。
 *
 * 見出しは .subpage_sec の中に置く前提。素の main h2 は中央寄せで
 * 装飾アイコンが付くが、.subpage_sec h2 が左寄せ＋アイコン無効に
 * 上書きしてくれるため、そこに乗せている。
 *
 * クラスは .isj-* で名前空間を切っている。
 */

/* ------------------------------------------------------------------ *
 * トークン
 * ------------------------------------------------------------------ */
.isj {
	--isj-navy: #034059;
	--isj-red: #c12d1c;
	--isj-text: #394049;
	--isj-mute: #b4b4b4;
	--isj-wash: #f8f8f8;
	--isj-line: #cccccc;
	--isj-white: #ffffff;

	/* 紺と赤をごく薄めた地色。タグの背景にだけ使う。 */
	--isj-navy-wash: #eef3f6;
	--isj-red-wash: #fdeceb;

	--isj-serif: 'Noto Serif JP', serif;
	--isj-hover: .7;
}

.isj a {
	transition: opacity .3s;
}

.isj a:hover {
	opacity: var(--isj-hover);
}

.isj img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ *
 * パンくず
 *
 * マークアップは nav#breadcrumb をそのまま使うので、色や区切り線は
 * style.css 側の指定がそのまま効く。ここでは何も足さない。
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * リード文（#pageHead の下に置く説明）
 * ------------------------------------------------------------------ */
.isj-lead {
	margin: 0 auto 50px;
	max-width: 76rem;
	text-align: center;
	font-size: 1.5rem;
	line-height: 2;
	color: var(--isj-text);

	/*
	 * 折り返しの制御。
	 *
	 * balance は行の長さを揃える。これが無いと1行目いっぱいまで詰めてから
	 * 折るので、「…ご紹介し／ます。」のように最後の数文字だけが
	 * 2行目に落ちる。行数の少ない見出し・リード文向けの指定。
	 *
	 * auto-phrase は日本語を文節の切れ目で折る。対応は Chrome 系だけだが、
	 * 未対応のブラウザは無視するだけなので害はない。
	 */
	text-wrap: balance;
	word-break: auto-phrase;
}

@media only screen and (max-width: 767px) {
	.isj-lead {
		margin-bottom: 30px;
		text-align: left;
		font-size: 1.4rem;
	}
}

/* ------------------------------------------------------------------ *
 * 絞り込みバー
 * ------------------------------------------------------------------ */
.isj-filter {
	margin: 0 0 30px;
	padding: 25px 30px;
	background: var(--isj-wash);
	border: 1px solid var(--isj-line);
}

.isj-filter__row {
	display: flex;
	flex-wrap: wrap;
	gap: 25px 35px;
}

.isj-filter__group {
	flex: 1 1 22rem;
	min-width: 0;
}

.isj-filter__group--area {
	max-width: 28rem;
}

.isj-filter__label {
	display: block;
	margin: 0 0 12px;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .1em;
	color: var(--isj-navy);
}

.isj-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.isj-chip {
	display: inline-block;
	padding: 6px 16px;
	background: var(--isj-white);
	border: 1px solid var(--isj-line);
	border-radius: 20px;
	font-size: 1.3rem;
	line-height: 1.6;
	letter-spacing: .05em;
	color: var(--isj-text);
}

.isj-chip.is-selected {
	background: var(--isj-navy);
	border-color: var(--isj-navy);
	color: var(--isj-white);
}

.isj-select {
	width: 100%;
	padding: 10px 12px;
	background: var(--isj-white);
	border: 1px solid var(--isj-line);
	font-family: inherit;
	font-size: 1.4rem;
	line-height: 1.6;
	color: var(--isj-text);
}

@media only screen and (max-width: 767px) {
	.isj-filter {
		padding: 20px;
	}

	.isj-filter__row {
		flex-direction: column;
		gap: 20px;
	}

	.isj-filter__group--area {
		max-width: none;
	}
}

/* ------------------------------------------------------------------ *
 * 件数
 * ------------------------------------------------------------------ */
.isj-count {
	margin: 0 0 20px;
	font-size: 1.3rem;
	line-height: 1.8;
	color: var(--isj-mute);
}

/* ------------------------------------------------------------------ *
 * 事例カード
 * ------------------------------------------------------------------ */
.isj-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 0 0 60px;
}

.isj-card {
	display: block;
	background: var(--isj-white);
	border: 1px solid var(--isj-line);
	overflow: hidden;
	color: var(--isj-text);
}

.isj-ba {
	display: flex;
	background: var(--isj-wash);

	/*
	 * 高さは固定せず、カード幅に対する比率で決める。
	 *
	 * 3カラムと2カラムでカード幅が変わるので、高さを固定すると
	 * 画面幅によって切り取られ方が変わってしまう。比率で持てば
	 * どの幅でも同じ見え方になる。
	 *
	 * 4:3 にしているのは、墓石が縦長の被写体のため。横長の枠だと
	 * 上下が大きく切れて何の写真か分からなくなる。
	 * 施工前・施工後の2枚並びでも、単独表示でも同じ比率にして、
	 * 同じ行に並んだカードの画像の高さが揃うようにしている。
	 */
	aspect-ratio: 4 / 3;
}

.isj-ba__half {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-size: 1.2rem;
	color: var(--isj-mute);
}

.isj-ba__half img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.isj-ba--single .isj-ba__half {
	flex: none;
	width: 100%;
}

.isj-ba__tag {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 2px 10px;
	background: rgba(3, 64, 89, .8);
	font-size: 1.1rem;
	line-height: 1.8;
	letter-spacing: .05em;
	color: var(--isj-white);
}

.isj-card__body {
	padding: 20px;
}

.isj-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
}

.isj-pill {
	display: inline-block;
	padding: 3px 10px;
	font-size: 1.1rem;
	line-height: 1.8;
	letter-spacing: .05em;
}

.isj-pill--type {
	background: var(--isj-red-wash);
	color: var(--isj-red);
}

.isj-pill--area {
	background: var(--isj-navy-wash);
	color: var(--isj-navy);
}

.isj-card__title {
	margin: 0 0 10px;
	font-family: var(--isj-serif);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .05em;
	color: var(--isj-navy);
}

.isj-card__desc {
	margin: 0 0 12px;
	font-size: 1.3rem;
	line-height: 1.8;
	color: var(--isj-text);
}

.isj-card__date {
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--isj-mute);
}

/* 0件のときの差し込みカード */
.isj-card--empty {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	text-align: center;
	font-size: 1.4rem;
	line-height: 2;
	color: var(--isj-text);
}

.isj-card--empty span {
	display: block;
}

.isj-card--empty a {
	color: var(--isj-navy);
	text-decoration: underline;
}

@media only screen and (max-width: 896px) {
	.isj-grid {
		gap: 20px;
	}
}

@media only screen and (max-width: 767px) {
	.isj-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		margin-bottom: 40px;
	}

	.isj-card__body {
		padding: 14px;
	}

	.isj-card__title {
		font-size: 1.4rem;
	}

	.isj-card__desc {
		font-size: 1.2rem;
	}
}

/* ------------------------------------------------------------------ *
 * ページネーション
 * ------------------------------------------------------------------ */
.isj-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 20px;
}

.isj-pager .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.6rem;
	height: 3.6rem;
	background: var(--isj-white);
	border: 1px solid var(--isj-line);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--isj-text);
}

.isj-pager .page-numbers.current {
	background: var(--isj-navy);
	border-color: var(--isj-navy);
	color: var(--isj-white);
}

.isj-pager .page-numbers.dots {
	background: none;
	border-color: transparent;
}

/* ------------------------------------------------------------------ *
 * CTA（詳細ページのサイドバー専用）
 *
 * 一覧・エリア別一覧の下部には置かない。サイト共通の contactbox が
 * 各ページの締めに入るため、同じ用件のブロックが二重になる。
 * ------------------------------------------------------------------ */
.isj-cta {
	padding: 30px 25px;
	background: var(--isj-navy);
	text-align: center;
	color: var(--isj-white);
}

.isj-cta__text {
	margin: 0 0 18px;
	font-size: 1.4rem;
	line-height: 1.9;
	color: var(--isj-white);
}

.isj-btn {
	display: inline-block;
	padding: 15px 30px;
	background: var(--isj-red);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .05em;
	color: var(--isj-white);
}

/* ------------------------------------------------------------------ *
 * 詳細ページ
 * ------------------------------------------------------------------ */
.isj-posthead {
	margin: 0 0 25px;
}

/*
 * 帯の固定文言。見出しタグではないので #pageHead h1 の指定が効かない。
 * 同じ見え方になるよう、位置と字だけこちらで揃える。
 */
.isj #pageHead .isj-pagehead__label {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0 -50% 0 0;
	transform: translate(-50%, -50%);
	font-family: var(--isj-serif);
	font-size: 4rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .05em;
}

/* 本文側のH1。事例タイトルはここが受け持つ。 */
.isj-posthead__title {
	margin: 0 0 12px;
	font-family: var(--isj-serif);
	font-size: 2.6rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .05em;
	color: var(--isj-navy);
	text-wrap: balance;
	word-break: auto-phrase;
}

.isj-posthead__date {
	margin: 10px 0 0;
	font-size: 1.3rem;
	line-height: 1.8;
	color: var(--isj-mute);
}

.isj-hero-ba {
	display: flex;
	gap: 2px;
	margin: 0 0 40px;
	background: var(--isj-wash);
}

.isj-hero-ba__half {
	position: relative;
	flex: 1;
	min-height: 26rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-size: 1.3rem;
	color: var(--isj-mute);
}

.isj-hero-ba__half img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.isj-hero-ba--single .isj-hero-ba__half {
	flex: none;
	width: 100%;
	min-height: 34rem;
}

.isj-hero-ba__label {
	position: absolute;
	bottom: 14px;
	left: 14px;
	padding: 4px 14px;
	background: rgba(3, 64, 89, .8);
	font-size: 1.3rem;
	line-height: 1.8;
	letter-spacing: .1em;
	color: var(--isj-white);
}

.isj-layout {
	display: grid;
	grid-template-columns: 1fr 28rem;
	gap: 50px;
}

.isj-main {
	min-width: 0;
}

@media only screen and (max-width: 896px) {
	.isj-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media only screen and (max-width: 767px) {
	.isj-hero-ba {
		flex-direction: column;
	}

	.isj-hero-ba__half,
	.isj-hero-ba--single .isj-hero-ba__half {
		min-height: 22rem;
	}

	.isj-hero-ba {
		margin-bottom: 30px;
	}
}

/* その他の写真（横スワイプ）
 *
 * ライブラリは使わない。scroll-snap だけで、スマホは指、PCは
 * トラックパッドや shift+ホイールで送れる。読み込みも増えない。 */
.isj-gallery {
	margin: 0 0 40px;
}

.isj-gallery__strip {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0 0 12px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.isj-gallery__item {
	flex: 0 0 auto;
	width: 26rem;
	scroll-snap-align: start;
}

.isj-gallery__item img {
	display: block;
	width: 100%;
	height: 18rem;
	object-fit: cover;
	background: var(--isj-wash);
}

.isj-gallery__note {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.8;
	color: var(--isj-mute);
}

@media only screen and (max-width: 767px) {
	.isj-gallery {
		margin-bottom: 30px;
	}

	.isj-gallery__item {
		width: 22rem;
	}

	.isj-gallery__item img {
		height: 15rem;
	}
}

/* 概要テーブル */
.isj-table {
	width: 100%;
	margin: 0 0 45px;
	border-collapse: collapse;
	border: 1px solid var(--isj-line);
}

.isj-table th,
.isj-table td {
	padding: 15px 20px;
	text-align: left;
	border-bottom: 1px solid var(--isj-line);
	font-size: 1.4rem;
	line-height: 1.8;
	vertical-align: top;
}

.isj-table th {
	width: 16rem;
	background: var(--isj-wash);
	font-weight: 500;
	white-space: nowrap;
	color: var(--isj-navy);
}

.isj-table tr:last-child th,
.isj-table tr:last-child td {
	border-bottom: none;
}

@media only screen and (max-width: 767px) {
	.isj-table th,
	.isj-table td {
		padding: 12px 14px;
		font-size: 1.3rem;
	}

	.isj-table th {
		width: 34%;
		white-space: normal;
	}
}

/* セクション見出し
 *
 * .subpage_sec の中なので、style.css 側で既に
 * 左寄せ・margin-bottom 0・::after 無効になっている。
 * ここではサイズと下線だけを足す。 */
.isj-section {
	margin: 0 0 50px;
}

.isj-section__title {
	margin: 0 0 20px;
	padding: 0 0 12px;
	border-bottom: 2px solid var(--isj-navy);
	font-family: var(--isj-serif);
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .1em;
	color: var(--isj-navy);
	text-align: left;
}

.isj-section p {
	margin: 0 0 1.5em;
	font-size: 1.5rem;
	line-height: 2;
	color: var(--isj-text);
}

.isj-section p:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
	.isj-section {
		margin-bottom: 35px;
	}

	.isj-section__title {
		font-size: 1.8rem;
	}

	.isj-section p {
		font-size: 1.4rem;
	}
}

/* 施工の流れ */
.isj-flow {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: isj-flow;
}

.isj-flow li {
	counter-increment: isj-flow;
	position: relative;
	padding: 0 0 25px 45px;
	font-size: 1.5rem;
	line-height: 2;
}

.isj-flow li::before {
	content: counter(isj-flow);
	position: absolute;
	top: 4px;
	left: 0;
	width: 2.8rem;
	height: 2.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--isj-navy);
	font-size: 1.3rem;
	line-height: 1;
	color: var(--isj-white);
}

.isj-flow li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 3.2rem;
	bottom: 0;
	left: 1.4rem;
	width: 1px;
	background: var(--isj-line);
}

.isj-flow__title {
	display: block;
	font-family: var(--isj-serif);
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--isj-navy);
}

@media only screen and (max-width: 767px) {
	.isj-flow li {
		font-size: 1.4rem;
	}
}

/* お客様の声 */
.isj-voice {
	position: relative;
	padding: 30px 30px 30px 55px;
	background: var(--isj-wash);
	border: 1px solid var(--isj-line);
}

.isj-voice__mark {
	position: absolute;
	top: 20px;
	left: 22px;
	font-family: var(--isj-serif);
	font-size: 3.6rem;
	line-height: 1;
	color: var(--isj-navy);
	opacity: .3;
}

.isj-voice p {
	margin: 0 0 1em;
	font-size: 1.4rem;
	line-height: 2;
	color: var(--isj-text);
}

.isj-voice__attr {
	text-align: right;
	font-size: 1.3rem;
	line-height: 1.8;
	color: var(--isj-mute);
}

/* 担当者より */
.isj-comment {
	padding: 30px;
	background: var(--isj-white);
	border: 1px solid var(--isj-line);
	border-left: 4px solid var(--isj-navy);
}

.isj-comment__who {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .05em;
	color: var(--isj-navy);
}

.isj-comment__icon {
	flex-shrink: 0;
	width: 2.8rem;
	height: 2.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--isj-navy);
	font-family: var(--isj-serif);
	font-size: 1.3rem;
	line-height: 1;
	color: var(--isj-white);
}

.isj-comment p {
	margin: 0 0 1em;
	font-size: 1.4rem;
	line-height: 2;
	color: var(--isj-text);
}

.isj-comment p:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
	.isj-voice {
		padding: 25px 20px 25px 45px;
	}

	.isj-comment {
		padding: 25px 20px;
	}
}

/* 本文（エディタで書いた部分） */
.isj-body p {
	margin: 0 0 1.5em;
	font-size: 1.5rem;
	line-height: 2;
}

.isj-body h3,
.isj-body h4 {
	margin: 1.8em 0 .8em;
	font-family: var(--isj-serif);
	font-weight: 500;
	font-size: 1.8rem;
	letter-spacing: .05em;
	color: var(--isj-navy);
}

.isj-body img {
	margin: 1em 0;
}

/* ------------------------------------------------------------------ *
 * サイドバー
 * ------------------------------------------------------------------ */
.isj-side {
	min-width: 0;
}

.isj-sideblock {
	margin: 0 0 25px;
	padding: 25px;
	background: var(--isj-white);
	border: 1px solid var(--isj-line);
}

.isj-sideblock--flush {
	padding: 0;
	border: none;
	overflow: hidden;
}

.isj-sideblock__title {
	margin: 0 0 18px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--isj-line);
	font-family: var(--isj-serif);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .1em;
	color: var(--isj-navy);
	text-align: left;
}

.isj-banner {
	display: block;
	margin: 0 0 25px;
}

.isj-mini {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 18px;
	color: var(--isj-text);
}

.isj-mini:last-child {
	margin-bottom: 0;
}

.isj-mini__thumb {
	flex-shrink: 0;
	width: 7rem;
	height: 5.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--isj-wash);
	font-size: 1rem;
	color: var(--isj-mute);
}

.isj-mini__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.isj-mini__info {
	display: block;
	min-width: 0;
}

.isj-mini__title {
	display: block;
	margin: 0 0 4px;
	font-size: 1.3rem;
	line-height: 1.7;
}

.isj-mini__tag {
	display: block;
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--isj-mute);
}

/* ------------------------------------------------------------------ *
 * エリア別ページ
 * ------------------------------------------------------------------ */
.isj-arealinks {
	margin: 0 0 35px;
}

.isj-arealinks .isj-sideblock {
	margin-bottom: 15px;
}

/* ------------------------------------------------------------------ *
 * サイト側ルールとの調整
 *
 * style.css の指定のほうが詳細度が高く、こちらが負ける箇所がある。
 * ここだけ .isj を重ねて競り勝たせる。増やしすぎないよう最小限に。
 * ------------------------------------------------------------------ */

/*
 * .subpage_sec h2（0,1,1）が margin-bottom:0 を当ててくるため、
 * .isj-section__title（0,1,0）だけでは下の余白が消える。
 */
.isj .isj-section__title {
	margin: 0 0 20px;
	text-align: left;
}

/*
 * #pageHead h1 は絶対配置で幅の指定が無い。短い固定文言なら問題ないが、
 * 事例のタイトルは長いので、そのままだと1行で横にはみ出す
 * （html の overflow-x:hidden で切れて読めなくなる）。
 * 幅を持たせて折り返させ、詳細ページだけ少し小さくする。
 */
.isj #pageHead h1 {
	width: 90%;
	max-width: 90rem;
	line-height: 1.5;
}

@media only screen and (max-width: 767px) {
	.isj #pageHead .isj-pagehead__label {
		font-size: 2.8rem;
	}

	.isj-posthead__title {
		font-size: 2rem;
	}
}