/* =========================================================
   Reasons（選ばれる理由）
   Figma node 113:19043。筆記体見出し＋Reason.1〜4の2カラム。
   1ブロックを繰り返す構造（ACFリピーター化前提）。
   ※ 細部余白は後で調整。まず構造優先。モバイルは後回し。
   ========================================================= */

.reasons {
	position: relative;
	width: 100%;
	background: var(--bg-reasons); /* #e0d6d1 */
	padding: 70px 0 100px;
	overflow: hidden;
}

.reasons__inner {
	/* 幅は共通クラス .l-wide（980px）。位置のみ保持 */
	position: relative;
}

/* --- 見出しエリア --- */
.reasons__header {
	position: relative;
	text-align: center;
	margin-bottom: 60px;
}

/* 筆記体大見出し Reasons */
.reasons__title {
	margin: 0;
	font-family: var(--font-script);
	font-weight: 400;
	font-size: 80px;
	line-height: 1;
	color: var(--color-script-ink); /* #231f20 */
}

/* サブ見出し 選ばれる理由 */
.reasons__sub {
	margin: 0;
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 16px;
	line-height: 30px;
	color: var(--color-subhead); /* #a3937c */
}

/* 菊の線画（見出し左。Figmaどおり少し傾ける） */
.reasons__deco-kiku {
	position: absolute;
	left: calc(50% - 295px);
	top: -6px;
	width: 108px;
	height: 108px;
	transform: rotate(6.8deg);
	pointer-events: none;
}

/* 右側の葉の線画 */
.reasons__deco-leaf {
	position: absolute;
	right: -10px;
	top: 50%;
	width: 150px;
	height: 175px;
	transform: rotate(28deg);
	pointer-events: none;
	z-index: 0;
}

/* =========================================================
   グリッド（枚数非依存・auto-fit）
   カードが何枚でも画面幅に入るだけ自動で並び、狭ければ1列に折り返す。
   min(450px,100%) で狭幅は100%＝はみ出し防止。l-wide(content940)に2列を収めるため
   column-gap は最大32pxにクランプ（92pxだと450×2+92>940で1列化するため）。
   ========================================================= */
.reasons__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
	justify-content: center;
	column-gap: clamp(20px, 4vw, 32px);
	row-gap: clamp(32px, 5vw, 56px);
	position: relative;
	z-index: 1;
}

/* --- 1ブロック（Reason.x）：幅はgridセルに従わせる。min-width:0で中身による膨張を防ぐ --- */
.reasons__item {
	width: auto;
	min-width: 0;
}

/* タグ「Reason.x」：白本体の周囲5pxに 45°斜めストライプ（2px・#A3937C）の縁取り。
   上レイヤー=白(content-box)が内側を覆い、下レイヤー=斜めストライプ(padding-box)が外周5pxだけ見える。 */
.reasons__tag {
	display: block;
	box-sizing: border-box;   /* width:200 に padding を含める */
	width: 200px;
	margin: 0 auto;
	padding: 5px;             /* 斜めストライプが見える外周5pxの帯 */
	text-align: center;
	border-radius: 5px;
	background-image:
		linear-gradient(var(--bg-white), var(--bg-white)),
		repeating-linear-gradient(45deg, var(--color-subhead) 0 2px, transparent 2px 8px); /* 2px線＋6px間隔 */
	background-clip: content-box, padding-box;
	background-origin: content-box, padding-box;
	background-repeat: no-repeat, repeat;
	font-family: var(--font-label);   /* Fredericka the Great */
	font-weight: 400;
	font-size: 24px;
	letter-spacing: 3.6px;
	color: var(--color-text);         /* #524635 */
}

/* 写真2枚（横並び。各200×300、枠＋影） */
.reasons__photos {
	display: flex;
	gap: 30px;
	margin-top: 32px;
}

.reasons__photo {
	width: 200px;
	height: 300px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--color-subhead); /* #a3937c */
	box-shadow: var(--shadow-photo);        /* 8px 6px 0 0 rgba(163,147,124,.3) */
}

.reasons__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ブロック見出し */
.reasons__item-head {
	margin: 32px 0 0;
	text-align: center;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.5;
	letter-spacing: 0.52px;
	color: var(--color-script-ink); /* #231f20 */
	/* 管理画面から可変（textarea）。長文・長い連続文字でも横はみ出し／崩壊しない受け。
	   ※ 行数は制限しない（長く入れれば縦に伸びる＝間延びは許容）。 */
	max-width: 100%;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

/* ブロック本文 */
.reasons__body {
	margin: 28px 0 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.75;
	color: var(--color-text);
}

/* =========================================================
   スマホ（≤599px）：固定pxの可変化。タブレット/PCは変更しない。
   ※ 1列化はグリッド側 auto-fit + min(450px,100%) が自動で行う。
   ========================================================= */
@media (max-width: 599px) {
	/* グリッド行間 */
	.reasons__grid {
		row-gap: clamp(50px, 5vw, 56px);
	}
	/* 1: 写真2枚を 1fr で均等に縮小。縦横比2/3維持・固定高は撤廃 */
	.reasons__photos {
		gap: 16px;
		margin-top: 15px;
	}
	.reasons__photo {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		height: auto;
		aspect-ratio: 2 / 3;
	}
	/* 2: 装飾の縮小＋再配置（2列前提の calc 座標を破棄） */
	.reasons__deco-kiku {
		left: 8px;
		top: 0;
		width: 60px;
		height: auto;
	}
	.reasons__deco-leaf {
		right: -8px;
		top: auto;
		bottom: 16px;
		width: 80px;
		height: auto;
	}
	/* 3: 文字サイズ縮小 */
	.reasons__tag       { font-size: 18px; }
	.reasons__item-head { font-size: 20px; }
	.reasons__body      { font-size: 14px; margin-top: 15px; }
	/* 筆記体タイトル60px＋サブ詰め */
	.reasons__title { font-size: 60px; }
	.reasons__sub   { margin-top: 0; }
}

/* =========================================================
   PC（≥1025px）専用の微調整。タブレット(600〜1024)/スマホは変更しない。
   ========================================================= */
@media (min-width: 1025px) {
	.reasons__item-head { font-size: 24px; }
}