/* ================================
   ABOUT ページ専用スタイル
================================ */



/* ================================
   Intro
================================ */
.about-intro {
  margin: 0 0 40px 0;
  text-align: center;
}

.about-intro__text {
  font-size: var(--font-size-5);
  font-weight: 500;
  line-height: 2;
  color: #333;
  letter-spacing: 0.1em;
  margin: 0;
}

/* ================================
   Philosophy / Mission 共通
================================ */
.about-philosophy,
.about-mission {
  margin: 120px 0;
  text-align: center;
}

.about-philosophy__eyebrow,
.about-mission__eyebrow {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.1em;
  background: linear-gradient(45deg, #E2C395 0%, #B49A72 100%);
  -webkit-background-clip: text;   /* Safari/Chrome 用 */
  background-clip: text;
  color: transparent;              /* 文字を透明にして背景を見せる */
  margin: 0px;
  display: block;
}

.about-philosophy__title,
.about-mission__title {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 24px 0;
  letter-spacing: 0.1em;
}

.about-philosophy__desc {
  font-size: 16px;
  margin-top: 24px;
}

/* ================================
   Value
================================ */
.about-value {
  margin: 0 0;
  padding-bottom: var(--spacing-5xl);
}

.about-value__eyebrow {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.1em;
  background: linear-gradient(45deg, #E2C395 0%, #B49A72 100%);
  -webkit-background-clip: text;   /* Safari/Chrome 用 */
  background-clip: text;
  color: transparent;              /* 文字を透明にして背景を見せる */
  display: block;
  text-align: center;
  margin: 0px;
}

.about-value__title {
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin: 0px;
}

.about-value__list {
  list-style: none;
  margin-top: 40px;
  padding: 0;
}

.about-value__item {
  display: flex;
  align-items: flex-start;
  align-items: center; /* 縦方向の中央揃え */
  gap: 40px;
  padding: 24px 40px;
  background: rgba(255, 255, 255, 0.95); /* 白の95%不透明 */
  border-radius: 8px;
}
.about-value__item + .about-value__item {
  margin-top: var(--spacing-xl);
}

.about-value__number {
  font-family: var(--font-family-open-sans);
  font-size: 96px;
  line-height: 1.5em;
  font-style: italic;
  font-weight: 100;
  background: linear-gradient(
    45deg, 
    rgba(226, 195, 149, 0.25) 0%,   /* #E2C395 → 25% */
    rgba(180, 154, 114, 0.25) 100%  /* #B49A72 → 25% */
  );
  -webkit-background-clip: text;   /* Safari/Chrome 用 */
  background-clip: text;
  color: transparent;         
}

.about-value__content h4 {
  font-size: var(--font-size-5);
  font-weight: 500;
  color: #333;
  margin: 0px;
}

.about-value__content p {
  font-size: 16px;
  margin: 16px 0 0 0;
}

/* ================================
   Message
================================ */
.message {
  background: var(--color-dark-gradient);
  border-radius: 50px 0 0 0;
  padding-block: var(--spacing-2xl);
  color: #fff;
}

.message .section-heading {
  text-align: center;
  margin-bottom: 48px;
}

.message__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1xl);
  margin: var(--spacing-1xl) auto 0;
  text-align:justify;
}

.message__image {
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.message__text {
  flex: 1;
  font-size: 16px;
}

/* ================================
   Company
================================ */
.about-company {
  padding: var(--spacing-4xl) 0 var(--spacing-2xl);
}

.about-company__eyebrow {
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.1em;
  background: linear-gradient(45deg, #E2C395 0%, #B49A72 100%);
  -webkit-background-clip: text;   /* Safari/Chrome 用 */
  background-clip: text;
  color: transparent;              /* 文字を透明にして背景を見せる */
  margin: 0;
  display: block;
}

.about-company__title {
  text-align: center;
  font-size: 32px;
  font-weight: 500;
  margin: 0 0 40px 0;
}


.about-company__table {
  max-width: 872px;
  border-top: 1px solid #ccc;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.8;
  margin: var(--spacing-1xl) auto 0;
  width: 100%;
}

.about-company__table th,
.about-company__table td {
  padding: 16px;
  border-bottom: 1px solid #ccc;
  text-align: left;
}

.about-company__table th {
  width: 180px;
  font-weight: 600;
  color: #555;
}


@media screen and (max-width: 960px) {
  .about-value {
    padding-bottom: var(--spacing-xl);
  }
  .about-intro__text {
    font-size: var(--font-size-9);
  }
  .about-philosophy__desc {
    font-size: var(--font-size-9);
  }
  .about-philosophy, .about-mission {
    margin: var(--spacing-1xl) 0;
  }

  .about-value__item {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-sm);
  }
  .about-value__number {
    font-size: var(--font-size-3);
    line-height: 1;
  }
  .about-value__content h4 {
    font-size: var(--font-size-7);
    text-align: center;
  }
  .about-value__content p {
    font-size: var(--font-size-9);
  }
  .about-value__item + .about-value__item {
    margin-top: var(--spacing-md);
  }

  .message {
    border-top-left-radius: 20px;
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }
  .message__content {
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
  }
  .message__text {
    font-size: var(--font-size-9);
  }

  .about-company {
    padding: var(--spacing-xl) 0;
  }
  .about-company__table {
    margin-top: var(--spacing-md);
  }
  .about-company__table th {
    font-size: var(--font-size-9);
    width: auto;
    white-space: nowrap;
  }
  .about-company__table td {
    font-size: var(--font-size-9);
    width: 100%;
  }
}