/* ============================================================
   business.html - page-specific stylesheet
   PC-first / breakpoints: 1200px, 960px, 568px
============================================================ */

/* ------------------------------------------------------------
   Service blocks (Wholesale / Corporate Styling / Visual Branding)
------------------------------------------------------------ */
.service { padding: 96px 0; }
.service-alt { background: var(--c_bg_alt); }
.service_inner {
  display: flex;
  align-items: center;
  gap: 64px;
}
.service_inner-reverse { flex-direction: row-reverse; }
.service_media { width: 544px; flex-shrink: 0; overflow: hidden; }
.service_media img { width: 100%; height: 408px; object-fit: cover; }
.service_body { flex: 1; min-width: 0; }
.service_heading {
  font-size: 48px;
  font-weight: 500;
  color: var(--c_accent);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 24px;
}
.service_text { letter-spacing: 0.04em; margin: 0 0 32px; }
.service_tags_head {
  border-top: 1px solid var(--c_border);
  padding-top: 25px;
}
.service_tags_label { font-size: 13px; letter-spacing: 0.15em; color: var(--c_label); margin: 0 0 12px; }
.service_tags { display: flex; flex-wrap: wrap; gap: 12px; }
.service_tags li {
  border: 1px solid var(--c_border);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--c_text);
  padding: 7px 17px;
}

@media (max-width: 1200px) {
  .service_inner { gap: 48px; }
  .service_media { width: 440px; }
  .service_media img { height: 340px; }
  .service_heading { font-size: 40px; }
}
@media (max-width: 960px) {
  .service { padding: 72px 0; }
  .service_inner,
  .service_inner-reverse { flex-direction: column; }
  .service_media { width: 100%; order: -1; margin-bottom: 32px; }
  .service_media img { height: 60vw; max-height: 420px; }
}
@media (max-width: 568px) {
  .service { padding: 56px 0; }
  .service_heading { font-size: 30px; }
}

/* ------------------------------------------------------------
   Process (事業フロー)
------------------------------------------------------------ */
.process { padding: 160px 0; background: var(--c_white); }
.process_head { text-align: center; margin-bottom: 112px; }
.process_head .section_label { text-align: center; margin-bottom: 16px; }
.process_heading {
  font-size: 48px;
  font-weight: 500;
  color: var(--c_accent);
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0;
}
.process_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.process_step { position: relative; }
.process_step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  left: calc(100% + 0px);
  width: 40px;
  height: 1px;
  background: var(--c_border);
}
.process_step_no { display: block; font-size: 60px; font-weight: 500; color: var(--c_border); margin-bottom: 24px; }
.process_step_title { font-size: 20px; font-weight: 500; color: var(--c_black); letter-spacing: 0.05em; margin: 0 0 4px; }
.process_step_label { font-size: 13px; letter-spacing: 0.15em; color: var(--c_label); margin: 0 0 16px; }
.process_step_text { margin: 0; }

@media (max-width: 1200px) {
  .process { padding: 120px 0; }
  .process_head { margin-bottom: 88px; }
  .process_grid { gap: 24px; }
}
@media (max-width: 960px) {
  .process_grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .process_step:not(:last-child)::after { display: none; }
}
@media (max-width: 568px) {
  .process { padding: 80px 0; }
  .process_head { margin-bottom: 56px; }
  .process_heading { font-size: 36px; }
  .process_grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Strengths (BETRSの強み)
------------------------------------------------------------ */
.strengths { padding: 160px 0; background: var(--c_bg_alt); }
.strengths_head { text-align: center; margin-bottom: 112px; }
.strengths_head .section_label { text-align: center; margin-bottom: 16px; }
.strengths_heading {
  font-size: 48px;
  font-weight: 500;
  color: var(--c_accent);
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0;
}
.strengths_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
}
.strength_card { border-left: 2px solid var(--c_accent); padding-left: 34px; }
.strength_no { display: block; font-size: 36px; font-weight: 500; color: var(--c_border); margin-bottom: 16px; }
.strength_title { font-size: 24px; font-weight: 500; color: var(--c_black); letter-spacing: 0.03em; margin: 0 0 16px; }
.strength_text { line-height: 1.9; margin: 0; }

@media (max-width: 1200px) {
  .strengths { padding: 120px 0; }
  .strengths_head { margin-bottom: 88px; }
  .strengths_grid { gap: 40px; }
}
@media (max-width: 960px) {
  .strengths_grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 568px) {
  .strengths { padding: 80px 0; }
  .strengths_head { margin-bottom: 56px; }
  .strengths_heading { font-size: 36px; }
}

/* ------------------------------------------------------------
   Numbers (数字で見るBETRS)
------------------------------------------------------------ */
.biz_numbers { padding: 160px 0; background: var(--c_white); }
.biz_numbers_head { text-align: center; margin-bottom: 112px; }
.biz_numbers_head .section_label { text-align: center; margin-bottom: 16px; }
.biz_numbers_heading {
  font-size: 48px;
  font-weight: 500;
  color: var(--c_accent);
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0;
}
.biz_numbers_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}
.biz_numbers_value {
  font-size: 60px;
  font-weight: 500;
  color: var(--c_black);
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}
.biz_numbers_value span { font-size: 20px; font-weight: 400; color: var(--c_label); margin-left: 2px; }
.biz_numbers_label { font-size: 14px; letter-spacing: 0.1em; color: var(--c_text); margin: 0 0 4px; }
.biz_numbers_sub { font-size: 14px; color: var(--c_label); margin: 0; }

@media (max-width: 1200px) {
  .biz_numbers { padding: 120px 0; }
  .biz_numbers_head { margin-bottom: 88px; }
  .biz_numbers_value { font-size: 48px; }
}
@media (max-width: 960px) {
  .biz_numbers_grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
}
@media (max-width: 568px) {
  .biz_numbers { padding: 80px 0; }
  .biz_numbers_head { margin-bottom: 56px; }
  .biz_numbers_heading { font-size: 36px; }
  .biz_numbers_value { font-size: 40px; }
}