/* =========================================================
   修理方針（/bodyshop-1/）  Studio の実測値（PC 1440px・スマホ 393px）で再現
   画面幅の切り替えは Studio と同じ 1140 / 840 / 540px（＋ 320px 以下）
   ========================================================= */

/* ---------- 上の帯の下の写真＋白いベール（高さ360px） ---------- */
.bodyshop-1-hero { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 360px; overflow: hidden; }
.bodyshop-1-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center bottom; }
.bodyshop-1-hero__veil { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 80px 48px 0; background: rgba(255, 255, 255, .9); }
.bodyshop-1-hero__inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.bodyshop-1-hero__ttl { display: flex; flex-direction: column; align-items: flex-start; }
.bodyshop-1-hero__ja { color: #000; font-weight: var(--w-l); font-size: 20px; line-height: 1.4; letter-spacing: .05em; }
.bodyshop-1-hero__en { color: #000; font-weight: var(--w-m); font-size: 40px; line-height: 1.4; letter-spacing: .25em; }

.bodyshop-1-main { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* ---------- テスラ修理方針（右上に写真・左下に白い箱の文） ---------- */
.bodyshop-1-about { position: relative; display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-end; width: 100%; min-height: 507.59px; margin-top: 80px; padding: 80px 0; }
.bodyshop-1-about__img { position: absolute; top: 0; right: 0; z-index: 0; width: 640px; height: auto; }
.bodyshop-1-about__wrap { position: relative; z-index: 1; display: flex; justify-content: flex-start; align-items: center; width: 1080px; max-width: 100%; padding: 0 48px; }
.bodyshop-1-about__box { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 66%; padding: 16px 48px 16px 0; background: #fff; }
.bodyshop-1-about__ttl { padding-bottom: 8px; border-bottom: 1px solid #a6a6a6; color: #333; font-weight: var(--w-m); font-size: 40px; line-height: 1.4; letter-spacing: .25em; }
.bodyshop-1-about__txt { color: #333; font-weight: var(--w-l); font-size: 18px; line-height: 1.4; letter-spacing: .1em; }

/* ---------- 4つの方針（写真と文が左右交互の横長カード） ---------- */
.bodyshop-1-list { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; width: 100%; padding: 80px 0; }
.bodyshop-1-item { flex: none; display: flex; justify-content: center; align-items: flex-start; width: 1080px; max-width: 100%; padding: 40px 48px; box-shadow: 6px 6px 15px rgba(0, 0, 0, .2); }
.bodyshop-1-item--rev { flex-direction: row-reverse; }
.bodyshop-1-item__img { flex: none; width: 40%; height: 198px; object-fit: cover; object-position: center; }
.bodyshop-1-item__img--4 { object-position: center top; }
.bodyshop-1-item__body { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 60%; padding: 0 0 0 24px; background: #fff; }
.bodyshop-1-item--rev .bodyshop-1-item__body { padding: 0 24px 0 0; }
.bodyshop-1-item__ttl { color: #333; font-weight: var(--w-b); font-size: 20px; line-height: 1.4; letter-spacing: .1em; }
.bodyshop-1-item__line { flex: none; display: block; width: 80px; height: 1px; background: #000; }
.bodyshop-1-item__txt { width: 100%; color: #333; font-weight: var(--w-l); font-size: 16px; line-height: 1.4; letter-spacing: .1em; }

/* =========================================================
   1140px 以下
   ========================================================= */
@media (max-width: 1140px) {
	.bodyshop-1-item { justify-content: flex-start; width: 90%; padding: 20px 48px; }
	.bodyshop-1-item__body,
	.bodyshop-1-item--rev .bodyshop-1-item__body { padding: 0 24px; }
}

/* =========================================================
   840px 以下：写真を上・文を下に積む
   ========================================================= */
@media (max-width: 840px) {
	.bodyshop-1-hero { height: 280px; }
	.bodyshop-1-hero__veil { flex-direction: column; padding: 80px 0 0; }
	.bodyshop-1-hero__inner { flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 0 32px; }
	.bodyshop-1-hero__ja { font-size: 18px; }
	.bodyshop-1-hero__en { font-size: 32px; }

	.bodyshop-1-about { flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: 0; padding: 0 32px 80px; }
	.bodyshop-1-about__img { position: relative; top: 1px; right: auto; width: 100%; }
	.bodyshop-1-about__wrap { flex-direction: column; width: 100%; padding: 16px 0; }
	.bodyshop-1-about__box { width: 100%; padding: 0; }
	.bodyshop-1-about__ttl { font-size: 32px; }
	.bodyshop-1-about__txt { font-size: 16px; }

	.bodyshop-1-list { justify-content: flex-end; align-items: flex-start; padding: 0 32px 80px; }
	.bodyshop-1-item,
	.bodyshop-1-item--rev { flex-direction: column; gap: 20px; width: 100%; padding: 20px; }
	.bodyshop-1-item__img { width: 100%; height: 300px; object-position: center top; }
	.bodyshop-1-item__body,
	.bodyshop-1-item--rev .bodyshop-1-item__body { width: 100%; padding: 0; }
	.bodyshop-1-item__ttl { font-size: 16px; }
}

/* =========================================================
   540px 以下：スマホ
   ========================================================= */
@media (max-width: 540px) {
	.bodyshop-1-hero { height: 240px; }
	.bodyshop-1-hero__inner { padding: 0 16px; }
	.bodyshop-1-hero__ja { font-size: 16px; }
	.bodyshop-1-hero__en { font-size: 28px; }

	.bodyshop-1-about { padding: 0 16px; }
	.bodyshop-1-about__ttl { font-size: 24px; }
	.bodyshop-1-about__txt { font-size: 14px; }

	.bodyshop-1-list { padding: 0 16px 40px; }
	.bodyshop-1-item,
	.bodyshop-1-item--rev { padding: 20px 10px; }
	.bodyshop-1-item__img { height: 200px; }
	.bodyshop-1-item__txt { font-size: 14px; }
}

@media (max-width: 320px) {
	.bodyshop-1-item__img { height: 170px; }
}