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

/* ------------------------------------------------------------
   Philosophy
------------------------------------------------------------ */
.philosophy { padding: 80px 0; background: var(--c_white); }
.philosophy_inner {
  max-width: 896px;
  text-align: center;
}
.philosophy_label { text-align: center; margin-bottom: 32px; }
.philosophy_heading {
  font-size: 72px;
  font-weight: 500;
  color: var(--c_accent);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 32px;
}
.philosophy_subheading {
  font-size: 24px;
  color: var(--c_dark);
  letter-spacing: 0.05em;
  margin: 0 0 48px;
}
.philosophy_text {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.philosophy_text p { letter-spacing: 0.05em; margin: 0; }

@media (max-width: 1200px) {
  .philosophy { padding: 120px 0; }
  .philosophy_heading { font-size: 56px; }
}
@media (max-width: 960px) {
  .philosophy_heading { font-size: 44px; }
  .philosophy_subheading { font-size: 20px; margin-bottom: 32px; }
}
@media (max-width: 568px) {
  .philosophy { padding: 80px 0; }
  .philosophy_heading { font-size: 32px; }
}

/* ------------------------------------------------------------
   Mission
------------------------------------------------------------ */
.mission { padding: 80px 0; background: var(--c_bg_alt); }
.mission_inner { max-width: 896px; text-align: center; }
.mission_head { margin-bottom: 48px; }
.mission_head .section_label { text-align: center; margin-bottom: 16px; }
.mission_heading {
  font-size: 48px;
  font-weight: 500;
  color: var(--c_accent);
  letter-spacing: 0.03em;
  line-height: 1.25;
  margin: 0;
}
.mission_text {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mission_text p { letter-spacing: 0.04em; margin: 0; }

@media (max-width: 1200px) {
  .mission { padding: 120px 0; }
  .mission_heading { font-size: 40px; }
}
@media (max-width: 960px) {
  .mission_heading { font-size: 34px; }
}
@media (max-width: 568px) {
  .mission { padding: 80px 0; }
  .mission_head { margin-bottom: 32px; }
  .mission_heading { font-size: 28px; }
}

/* ------------------------------------------------------------
   Vision
------------------------------------------------------------ */
.vision { padding: 80px 0; background: var(--c_white); }
.vision_inner {
  display: flex;
  align-items: center;
  gap: 96px;
}
.vision_media { width: 528px; flex-shrink: 0; overflow: hidden; }
.vision_media img { width: 100%; height: 660px; object-fit: cover; }
.vision_body { flex: 1; min-width: 0; }
.vision_heading {
  font-size: 36px;
  font-weight: 500;
  color: var(--c_black);
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin: 0 0 24px;
}
.vision_text { display: flex; flex-direction: column; gap: 16px; }
.vision_text p { letter-spacing: 0.04em; margin: 0; }

@media (max-width: 1200px) {
  .vision { padding: 120px 0; }
  .vision_inner { gap: 56px; }
  .vision_media { width: 420px; }
  .vision_media img { height: 520px; }
}
@media (max-width: 960px) {
  .vision_inner { flex-direction: column; }
  .vision_media { width: 100%; }
  .vision_media img { height: 70vw; max-height: 460px; }
}
@media (max-width: 568px) {
  .vision { padding: 80px 0; }
  .vision_heading { font-size: 26px; }
}

/* ------------------------------------------------------------
   Values
------------------------------------------------------------ */
.values { padding: 80px 0; background: var(--c_bg_alt); }
.values_head { text-align: center; margin-bottom: 112px; }
.values_head .section_label { text-align: center; margin-bottom: 16px; }
.values_heading {
  font-size: 48px;
  font-weight: 500;
  color: var(--c_accent);
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0;
}
.values_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.value_card_no {
  display: block;
  font-size: 60px;
  font-weight: 500;
  color: var(--c_border);
  margin-bottom: 24px;
}
.value_card_title { font-size: 24px; font-weight: 500; color: var(--c_black); letter-spacing: 0.05em; margin: 0 0 8px; }
.value_card_subtitle { font-size: 14px; letter-spacing: 0.1em; color: var(--c_label); margin: 0 0 24px; }
.value_card_text { letter-spacing: 0.02em; margin: 0; }

@media (max-width: 1200px) {
  .values { padding: 120px 0; }
  .values_head { margin-bottom: 88px; }
  .values_grid { gap: 40px; }
}
@media (max-width: 960px) {
  .values_grid { grid-template-columns: repeat(2, 1fr); gap: 48px; }
}
@media (max-width: 568px) {
  .values { padding: 80px 0; }
  .values_head { margin-bottom: 56px; }
  .values_heading { font-size: 36px; }
  .values_grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Message (代表メッセージ)
------------------------------------------------------------ */
.message { padding: 80px 0; background: var(--c_white); }
.message_inner { max-width: 768px; text-align: center; }
.message_head { margin-bottom: 48px; }
.message_head .section_label { text-align: center; margin-bottom: 16px; }
.message_heading {
  font-size: 48px;
  font-weight: 500;
  color: var(--c_accent);
  letter-spacing: 0.02em;
  margin: 0;
}
.message_text {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.message_text p { letter-spacing: 0.04em; margin: 0; }
.message_profile {
  margin: 40px auto 0;
  padding-top: 24px;
  max-width: 320px;
  border-top: 1px solid var(--c_border);
}
.message_profile_name { font-size: 20px; font-weight: 500; color: var(--c_black); letter-spacing: 0.05em; margin: 0 0 8px; }
.message_profile_role { font-size: 14px; letter-spacing: 0.1em; color: var(--c_label); margin: 0; }

@media (max-width: 1200px) {
  .message { padding: 120px 0; }
}
@media (max-width: 960px) {
  .message_heading { font-size: 40px; }
}
@media (max-width: 568px) {
  .message { padding: 80px 0; }
  .message_head { margin-bottom: 32px; }
  .message_heading { font-size: 30px; }
}

/* ------------------------------------------------------------
   Commitment (full-bleed image + centered statement)
------------------------------------------------------------ */
.culture {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}
.culture_media { position: absolute; inset: 0; z-index: 0; }
.culture_media img { width: 100%; height: 100%; object-fit: cover; }
.culture_overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1; }
.culture_inner {
  position: relative;
  z-index: 2;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}
.culture_label { text-align: center; color: rgba(255, 255, 255, 0.5); margin: 0 0 24px; }
.culture_heading {
  font-size: 48px;
  font-weight: 500;
  color: var(--c_white);
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin: 0 0 32px;
}
.culture_text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 auto;
}
.culture_text p {
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

@media (max-width: 1200px) {
  .culture { padding: 120px 0; }
  .culture_heading { font-size: 38px; }
}
@media (max-width: 960px) {
  .culture_heading { font-size: 32px; }
}
@media (max-width: 568px) {
  .culture { padding: 80px 0; }
  .culture_heading { font-size: 26px; }
}