@charset "utf-8";

/* ============================================================
   about ページ
   - テキスト主体・センターカラム（本文幅はデザインカンプ準拠 683px）
   - 見出しはブランド共通の skewX(-6deg)
   - 本文の意図的な改行は <br class="u-pc"> でPC/タブレットのみ適用し、
     SPでは自然にリフローさせる（text-align: justify）
============================================================ */
/* overflow-x は指定しない：overflow-y が auto に変化して #main がスクロール
   コンテナ化し、初回スクロール時に一瞬固まる原因になるため（横方向のはみ出しが
   無いことは全ブレークポイントで確認済み） */
#main {
  font-family: var(--font-hiragino);
  font-feature-settings: "palt";
}

/* 共通コンテンツ幅 */
.about__content {
  margin: 0 auto;
  width: 73rem;
  max-width: 90%;
}
.about__inner {
  margin: 0 2.5rem;
}

/* ============================================================
   ヒーロー
============================================================ */
.about-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10rem 0;
}
.about-hero__head {
  margin-bottom: 5.6rem;
  text-align: center;
}
.about-hero__ttl {
  display: inline-block;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.82;
  letter-spacing: 0.03em;
  transform: skewX(-6deg);
}
.about-hero__en {
  margin-top: 2.4rem;
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.08em;
  color: #666;
}
.about-hero__lead {
  line-height: 2.15;
  letter-spacing: 0.03em;
  word-wrap: break-word;
  font-feature-settings: "palt";
}

/* ============================================================
   本文セクション
============================================================ */
.about-section {
  margin-top: 13rem;
}
/* ヒーローは画面高（100vh）で確保するため、直後のセクションはフォールド直下から */
@media (min-width: 768px) {
  .about-hero + .about-section {
    margin-top: 6rem;
  }
}
/* margin 14px + line-height の半分余白 16px ＝ 見た目の余白 30px（1366px時） */
.about-section__ttl {
  display: inline-block;
  margin-bottom: 1.4rem;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  transform: skewX(-6deg);
}
.about-section__body p {
  margin-bottom: 3rem;
  line-height: 2.15;
  letter-spacing: 0.03em;
  word-wrap: break-word;
  font-feature-settings: "palt";
}
.about-section__body p:last-child {
  margin-bottom: 0;
}

/* ページ下部の余白 */
#main {
  padding-bottom: 16rem;
}

/* ============================================================
   レスポンシブ：タブレット（768〜1023px）
============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .about__content { max-width: 89.3%; }
  .about-hero { padding: 8rem 0; }
  .about-hero__head { margin-bottom: 4.4rem; }
  .about-hero__ttl { font-size: 2.4rem; line-height: 1.72; }
  .about-hero__en { margin-top: 2rem; font-size: 1.4rem; }
  .about-hero__lead { font-size: 1.32rem; line-height: 2.1; }
  .about-section { margin-top: 9.5rem; }
  .about-section__ttl { margin-bottom: 3rem; font-size: 1.9rem; }
  .about-section__body p { font-size: 1.32rem; line-height: 2.1; }
  #main { padding-bottom: 12rem; }
}

/* ============================================================
   レスポンシブ：SP（〜767px）
============================================================ */
@media (max-width: 767px) {
  .about__content {
    margin: 0 1.9rem;
    width: auto;
    max-width: none;
  }
  .about__inner { margin: 0; }

  /* SPは画面高固定にせず、上部から自然に流す */
  .about-hero {
    min-height: auto;
    display: block;
    padding: 12rem 0 0;
  }
  .about-hero__head { margin-bottom: 4rem; }
  .about-hero__ttl {
    font-size: 2rem;
    line-height: 1.85;
    letter-spacing: 0.02em;
  }
  .about-hero__en { margin-top: 1.8rem; font-size: 1.3rem; }
  .about-hero__lead { line-height: 2.05; text-align: justify; }

  .about-section { margin-top: 8rem; }
  .about-section__ttl {
    margin-bottom: 2.8rem;
    font-size: 1.9rem;
    line-height: 1.55;
  }
  .about-section__body p { line-height: 2.05; text-align: justify; }

  #main { padding-bottom: 10rem; }
}