@charset "UTF-8";

/* ============================================
   ABOUT ページ専用スタイル
   - 共通パーツ（header / drawer / footer / banner-full）は style.css を継承
============================================ */

/* ============================================
   Page Hero タイトル（ABOUT は大きなEN＋小さなJAサブ）
   - page-hero 土台と共通の小EN＋大JA は base.css。ここで ABOUT 用に上書き
============================================ */
.page-hero__en {
  font-size: min(5.3rem, 2.76vw);
  color: var(--color-white);
}

.page-hero__ja {
  margin-top: min(1vw, 20px);
  font-weight: 500;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   Message（会社メッセージ）
============================================ */
.about-message {
  background-color: #f8f8f8;
  padding: min(7.8vw, 150px) var(--side-padding-pc);
}

.about-message__inner {
  /* max-width: 1010px; */
  margin: 0 auto;
  text-align: center;
}

.about-message__catch {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(3.2rem, 1.66vw);
  letter-spacing: 0.2em;
  color: #000;
  line-height: 1.6;
}

.about-message__body {
  margin-top: min(2.9vw, 56px);
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.15em;
  line-height: 2.1;
  color: #000;
}

.about-message__body p + p {
  margin-top: 1.8em;
}

/* ============================================
   Our Strengths（5件・左右交互の50/50レイアウト）
============================================ */
.strengths {
  background-color: #1C2023;
}

.strength {
  display: flex;
  align-items: stretch;
  flex-direction: row-reverse; /* 既定：画像=右 / テキスト=左 */
}

.strength--reverse {
  flex-direction: row; /* 画像=左 / テキスト=右 */
}

.strength__media {
  flex: none;
  width: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.strength__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.strength__body {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: min(4vw, 80px);
  /* 外側160px(8.33vw) / 内側133px(6.93vw) */
  padding-inline: min(8.33vw, 160px) min(6.93vw, 133px);
  color: var(--color-white);
}

.strength--reverse .strength__body {
  padding-inline: min(6.93vw, 133px) min(8.33vw, 160px);
}

/* 見出し行：アクセントバー＋ラベル＋番号＋アクセントバー */
/* 各セクションの色を定義 */
.strength-01 {
  --strength-color: #D1F1F5;
}
.strength-02 {
  --strength-color: #D1DFF5;
}
.strength-03 {
  --strength-color: #DAD1F5;
}
.strength-04 {
  --strength-color: #EDD1F5;
}
.strength-05 {
  --strength-color: #F5D1D2;
}

.strength__head {
  display: flex;
  align-items: center;
  gap: min(2.5vw, 48px);
  margin-bottom: min(2.43vw, 47px);
}

.strength__bar {
  flex: none;
  width: min(11px, 0.57vw);
  height: min(46px, 2.4vw);
  background-color: var(--strength-color, #d1f1f5);
}

.strength__label {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--strength-color, #d1f1f5);
  line-height: 1;
  white-space: nowrap;
}

.strength__no {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(6rem, 3.13vw);
  letter-spacing: 0.3em;
  color: var(--strength-color, #d1f1f5);
  line-height: 1;
}

.strength__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(3.2rem, 1.66vw);
  letter-spacing: 0.2em;
  line-height: 1.667;
  color: var(--color-white);
}

.strength__lead {
  margin: min(0.94vw, 18px) 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.2em;
  line-height: 2.11;
  color: var(--color-white);
  text-align: justify; /* 両端揃え */
  text-justify: inter-ideograph;/* 両端揃えの種類 */
}

.strength__text {
  margin: min(2.7vw, 52px) 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(1.8rem, 0.94vw);
  letter-spacing: 0.2em;
  line-height: 2.375;
  color: var(--color-white);
  text-align: justify; /* 両端揃え */
  text-justify: inter-ideograph;/* 両端揃えの種類 */
}

/* ============================================
   下部バナー WORKS（base.css の banner-full を拡張）
============================================ */
.banner-full--works {
  background-color: var(--color-base);
}

.banner-full--works .banner-full__en {
  color: var(--color-white);
}

.banner-full--works .banner-full__ja {
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   SP（375px基準）
============================================ */
@media print, screen and (max-width: 768px) {
  .page-hero__en {
    font-size: 7.73vw; /* 29 */
  }

  .page-hero__ja {
    margin-top: 5.3vw; /* 20 */
    font-size: 4vw; /* 15 */
  }

  .about-message {
    padding: 16vw var(--side-padding-sp);
  }

  .about-message__catch {
    font-size: 4.8vw;
    line-height: 1.7;
  }

  .about-message__body {
    margin-top: 4.8vw;
    font-size: 3.6vw;
    line-height: 2;
  }

  /* 縦積み（画像→テキスト） */
  .strength,
  .strength--reverse {
    flex-direction: column;
  }

  .strength__media {
    width: 100%;
  }

  .strength__body,
  .strength--reverse .strength__body {
    width: 100%;
    padding-block: 10.6vw;
    padding-inline: var(--side-padding-sp);
  }

  .strength__head {
    gap: 4.2vw;
    margin-bottom: 8vw;
  }

  .strength__bar {
    width: 1.6vw;
    height: 9vw;
  }

  .strength__label {
    font-size: 3.7vw;
  }

  .strength__no {
    font-size: 11vw;
  }

  .strength__title {
    font-size: 5.3vw;
    line-height: 1.6;
  }

  .strength__lead {
    margin-top: 4.2vw;
    font-size: 3.7vw;
  }

  .strength__text {
    margin-top: 4em;
    font-size: 3.4667vw;
    line-height: 2.2;
  }
}