@charset "utf-8";
/* CSS Document */
:root {
	--bg: #fff;
	--card-bg: #fffdfa;
	--border: #e7e2d3;
	--text: #333;
	--title: #222;
	--accent: #0b7bdc;     /* デフォルト */
	--badge-mgr: #0b7bdc;  /* 店長施工 */
	--badge-pro: #ef6233;  /* 専門職人施工 */
	--badge-couple: #F06292;  /* 夫婦施工 */
	--shadow: 0 6px 18px rgba(0,0,0,.06);
	--radius: 14px;
}

html {
	-webkit-text-size-adjust: 100%;
}
html { font-synthesis-weight: none; }

.back_layout_01, 
.back_layout_01 * {
  box-sizing: border-box;
}

.services {
	padding: 24px 16px;
	background: var(--bg);
}

.services__heading {
	font-size: clamp(20px, 3.5vw, 28px);
	font-weight: 800;
	text-align: center;
	margin: 0 0 18px;
	color: var(--title);
}

/* GRID */
.cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
	width: 100%;
	min-width: 0;
	max-width: 1920px;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.cards {
		grid-template-columns: repeat(3, 1fr);
	}

}

@media (min-width: 1280px) {
	.cards {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* CARD */
.card {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 0px; /* ← 調整済み */
	display: flex;
	flex-direction: column;
	transition: transform .15s ease, box-shadow .15s ease;
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0,32,96,.10);
}

.card__title {
	font-size: clamp(18px, 2.5vw, 20px);
	font-weight: 800;
	color: var(--title);
	margin: 10px 2px 0px; /* ← 少しタイトに調整 */
	letter-spacing: .02em;
	position: relative;
	padding-left: 8px;
	text-align: center;
}

.card__title::before {
	content: "";
	position: absolute;
	left: 15px;
	top: .40em;
	width: 7px;
	height: 1.2em;
	background: var(--accent);
	border-radius: 3px;
}

/* PHOTO */
.card__media{
  position: relative;
  border-radius: 12px;
  overflow: hidden;      /* ← 角丸を効かせる */
  background: #f3f6fb;
  /* aspect-ratio は使わない */
  /* aspect-ratio: 16/9;  ← 削除 */
  margin-bottom: 10px;
  -webkit-mask-image: radial-gradient(#000 0 0); /* iOS角丸はみ出し対策は維持 */
}

/* 画像は“通常フロー”で等比表示（高さは自動） */
.card__media > img{
  position: static;      /* ← 絶対配置をやめる */
  display: block;
  width: 100%;
  height: auto;          /* ← 等比 */
  object-fit: contain;   /* 念のため。cover は不要 */
  transform: none !important;
}


/* BADGES */
.card__badges {
	position: absolute;
	inset: 10px auto auto 10px;
	display: flex;
	gap: 8px;
}

.badge {
	appearance: none;
	border: none;
	cursor: pointer;
	padding: 6px 10px;
	font-weight: 800;
	font-size: 13px;
	color: #fff;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
	line-height: 1;
	letter-spacing: .04em;
}

.badge--manager {
	background: var(--badge-mgr);
}

.badge--pro {
	background: var(--badge-pro);
}

.badge--couple {
	background: var(--badge-couple);
}

.badge:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* LEAD + dotted */
.card__lead {
	font-size: 16px;
	font-weight: 800;
	color: var(--title);
	padding-bottom: 4px;  /* ← 少しタイトに */
	margin: 2px 18px 4px;  /* ← 横余白調整 */
	border-bottom: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
}

.card__divider {
	border-top: 2px dotted #cfc8b4;
	height: 0;
	margin: 2px 2px 8px;
}

/* bullet list */
.card__list {
	margin: 4px 6px 8px 18px; /* ← 少しタイトに */
	color: var(--text);
	font-size: 15px;
	line-height: 1.7;
}

.card__list li {
	margin: .25em 0;
}

/* ===== THEMES ===== */

/* 茶 */
.theme-brown {
	--accent: #A97461;    
}

/* 紅葉 */
.theme-maple {
	--accent: #FFD633;
}

/* 緑 */
.theme-green {
	--accent: #00C853;
}

/* 青 */
.theme-blue {
	--accent: #1E90FF;
}

/* ピンク */
.theme-pink {
	--accent: #F06292;
}


@media (min-width: 1600px) {
		.card__title::before {
	left: 35px;
}
	.card__lead {
	margin: 2px 38px 4px;  /* ← 横余白調整 */
}
	.card__list {
	margin: 4px 6px 15px 38px; /* ← 少しタイトに */
}
}