/* =========================================================
   認定制度（/bodyshop/）  Studio の実測値（PC 1440px・スマホ 393px）で再現
   画面幅の切り替えは Studio と同じ 1140 / 840 / 540px
   ========================================================= */

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

/* ---------- 本文の共通 ---------- */
.bodyshop-txt { color: #333; font-weight: var(--w-l); font-size: 18px; line-height: 1.4; letter-spacing: .1em; }
.bodyshop-sttl { display: flex; flex-direction: column; align-items: flex-start; color: #333; }
.bodyshop-sttl__ja { font-weight: var(--w-l); font-size: 20px; line-height: 1.4; letter-spacing: .05em; }
.bodyshop-sttl__en { font-weight: var(--w-m); font-size: 40px; line-height: 1.4; letter-spacing: .25em; }

/* ---------- テスラ認定制度とは（右上に写真・左下に白い箱の文） ---------- */
.bodyshop-about,
.bodyshop-equip { position: relative; display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-end; width: 100%; min-height: 507.59px; padding: 80px 0; }
.bodyshop-about { margin-top: 80px; }
.bodyshop-about__img,
.bodyshop-equip__img { position: absolute; top: 0; right: 0; z-index: 0; width: 640px; height: auto; }
.bodyshop-equip__img { opacity: .5; }
.bodyshop-about__wrap,
.bodyshop-equip__wrap { position: relative; z-index: 1; display: flex; justify-content: flex-start; align-items: center; width: 1080px; max-width: 100%; padding: 0 48px; }
.bodyshop-about__box,
.bodyshop-equip__box { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 66%; padding: 16px 48px 16px 0; background: #fff; }
.bodyshop-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; }

/* ---------- QUALIFICATIONS（右に修了証・左に文） ---------- */
.bodyshop-qual { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 24px; width: 1080px; max-width: 100%; padding: 80px 48px; margin: 0 auto; }
.bodyshop-qual__img { flex: none; width: calc(40% - 14.4px); height: auto; border-radius: 2px; }
.bodyshop-qual__body { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: calc(55% - 10.8px); }

/* ---------- 設備のカード（3列＋2列） ---------- */
.bodyshop-cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px 24px; width: 1080px; max-width: 100%; padding: 0 48px 80px; margin: 0 auto; }
.bodyshop-card { flex: none; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: calc(33% - 16.08px); height: 480px; box-shadow: 6px 6px 15px rgba(0, 0, 0, .2); }
.bodyshop-card:first-child { justify-content: center; }
.bodyshop-card__pic { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 16px 0; background: #eee; }
.bodyshop-card__img { flex: none; width: 206px; height: 198px; max-width: 100%; object-fit: cover; }
.bodyshop-card__img--touch { width: 126px; }
.bodyshop-card__img--rm { width: 327px; height: 145px; }
.bodyshop-card__img--welder { width: 196px; height: 145px; }
.bodyshop-card__body { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; width: 100%; padding: 16px 24px 32px; background: #fff; }
.bodyshop-card__ttl { color: #333; font-weight: var(--w-b); font-size: 16px; line-height: 1.4; letter-spacing: .1em; text-align: center; }
.bodyshop-card__line { flex: none; display: block; width: 80px; height: 1px; background: #000; }
.bodyshop-card__txt { width: 100%; color: #333; font-weight: var(--w-l); font-size: 14px; line-height: 1.4; letter-spacing: .1em; }

/* =========================================================
   1140px 以下
   ========================================================= */
@media (max-width: 1140px) {
	.bodyshop-qual__img { width: calc(43% - 13.68px); }
	.bodyshop-card { width: calc(50% - 12px); }
	.bodyshop-card:first-child { justify-content: flex-start; }
	.bodyshop-card__img--rm { width: 447px; height: 198px; }
	.bodyshop-card__img--welder { width: 266px; height: 198px; }
}

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

	.bodyshop-txt { font-size: 16px; }
	.bodyshop-sttl__ja { font-size: 18px; }
	.bodyshop-sttl__en { font-size: 32px; }

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

	.bodyshop-qual { flex-direction: column; gap: 32px; width: 100%; padding: 0 32px 80px; }
	.bodyshop-qual__img { width: 60%; }
	.bodyshop-qual__body { width: 100%; }

	.bodyshop-cards { padding: 0 32px 80px; }
	.bodyshop-card { width: 100%; height: auto; }
	.bodyshop-card__img--rm { width: 357px; height: 158px; }
	.bodyshop-card__img--welder { width: 236px; height: 178px; }
	.bodyshop-card__txt { font-size: 16px; }
}

/* =========================================================
   540px 以下：スマホ
   ========================================================= */
@media (max-width: 540px) {
	.bodyshop-hero { height: 240px; }
	/* 右を少し広く取る：Studio の書体は幅が広く、393px では「TESLA BODY／SHOP」の2行になる。代わりの書体でも同じ所で折れるように */
	.bodyshop-hero__inner { padding: 0 32px 0 16px; }
	.bodyshop-hero__ja { font-size: 16px; }
	.bodyshop-hero__en { font-size: 28px; }

	.bodyshop-txt { font-size: 14px; }
	.bodyshop-sttl__ja { font-size: 14px; }
	.bodyshop-sttl__en { font-size: 24px; }

	.bodyshop-about { padding: 0 16px; }
	.bodyshop-about__ttl { font-size: 24px; }
	.bodyshop-equip { padding: 64px 16px; }

	.bodyshop-qual { padding: 64px 16px 0; }
	.bodyshop-qual__img { width: 100%; }
	.bodyshop-qual__body { padding: 20px 0; }

	.bodyshop-cards { padding: 0 16px 80px; }
	.bodyshop-card__img--rm { width: 310px; height: 138px; }
	.bodyshop-card__ttl { font-size: 14px; }
	.bodyshop-card__txt { font-size: 14px; }
}