@charset "UTF-8";
/* ==========================================================================
   JOMONÖW — About Section Styles
   ファイル: about.css
   役割: About セクション (左: ABOUTタイトル / 右: iiYÖU紹介)
   ---
   仕様:
   - セクション高さ 600px、左右2カラム (左720px / 右720px)
   - 左: 背景色 #f7f6f6 + pattern-pc-1_2.svg (パターン図形は#e7e6e6)
   - 右: 背景色 #e7e6e6、iiYÖU + Designer + 本文 (筑紫Aオールド明朝)
   - 右カラム上下余白 H140
   ========================================================================== */

.about {
  position: relative;
  width: 100%;
  height: 600px;
  display: flex;
  background-color: var(--color-bg-light);
}

/* --------------------------------------------------------------------------
   左カラム — ABOUT タイトル
   背景色 #f7f6f6 (サイト背景と同色)、パターン pattern-pc-1_2.svg
   ※ パターン図形は #e7e6e6 なので、背景 #f7f6f6 との対比で浮かび上がる
   -------------------------------------------------------------------------- */
.about__left {
  width: 50%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-light);
  background-image: url("../svg/pattern-pc-1_2.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

/* 「ABOUT」見出し (Goudy Bookletter 1911 / 56pt)
   ---
   太く見える症状の対策:
   - font-weight: 400 を明示 (合成太字の無効化)
   - -webkit-text-stroke を明示的に 0 に
   - font-smoothing で細く */
.about__title {
  font-family: var(--font-goudy);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: var(--color-wine-typo);
  letter-spacing: var(--ls-display);  /* Goudy 共通の字間 */
  margin: 0;
  -webkit-text-stroke: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   右カラム — iiYÖU 紹介
   背景色 #e7e6e6、上下 H140 の余白
   -------------------------------------------------------------------------- */
.about__right {
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  background-color: var(--color-pattern-bg);
  padding: 140px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about__content {
  padding-left: 60px;
  padding-right: 60px;
}

/* iiYÖU + Designer of the Unseen の見出し行
   ---
   Designer SVG は "g" のディセンダーを含むため、
   flex-end (下端揃え) + Designer を translateY で微調整して
   「Designerの大文字の底」を「iiYÖUの底」に揃える。
   ---
   見出し行全体を 10px 下げる (CD指示)。 */
.about__heading {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 32px;
  padding-top: 10px;
}

/* iiYÖU ロゴタイプ (SVG原寸 W160.72px) */
.about__iiyou {
  width: 160.72px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* Designer of the Unseen (SVG原寸 W285.67px)
   ディセンダー("g")分、下に少しずらして大文字の底を iiYÖU の底に合わせる */
.about__designer {
  width: 285.67px;
  height: auto;
  display: block;
  flex-shrink: 0;
  /* ディセンダー補正: 大文字の底を iiYÖU 底に揃える */
  transform: translateY(12px);
}

/* --------------------------------------------------------------------------
   本文テキスト
   FOT-筑紫Aオールド明朝 Pr6N / 24pt / 行送り46pt / #720b2e
   ---
   文字詰め (CD指示):
   - font-feature-settings "palt": 約物 (句読点・括弧) のプロポーショナル詰め
   - letter-spacing: 全体も少し詰める
   - 行頭のカギ括弧は ぶら下げで頭を揃える
   -------------------------------------------------------------------------- */
.about__body {
  font-family: var(--font-tsuku-old);
  font-weight: 400;
  font-size: 24px;
  /* 行送り46pt → line-height 46/24 = 1.9167 */
  line-height: 1.9167;
  color: var(--color-wine-typo);
  margin: 0;
  /* 約物の自動詰め */
  font-feature-settings: "palt" 1;
  /* 全体を少し詰める */
  letter-spacing: -0.02em;
}

/* 本文の各行 */
.about__body-line {
  display: block;
}

/* 行頭がカギ括弧で始まる行
   ---
   font-feature-settings "palt" が約物を自動で詰めるため、
   カギ括弧「や引用符 " は行頭でほぼ揃う。
   text-indent によるぶら下げは不要 (入れると逆に左へ飛び出す)。 */
.about__body-line--bracket {
  text-indent: 0;
}

/* ルビ (「日縄」→「にちじょう」, 12pt)
   - ルビ文字は 12px
   - 親文字から上に離す
   - ルビ文字自体も少し詰める
   ---
   注意: <rt> への transform はブラウザによって無視されるため、
   position: relative + top で確実に動かす。 */
.about__body ruby {
  ruby-position: over;
}

.about__body ruby rt {
  font-size: 12px;
  font-family: var(--font-tsuku-old);
  font-weight: 400;
  color: var(--color-wine-typo);
  /* ルビ文字を詰め気味に */
  letter-spacing: -0.03em;
  /* 親文字から上に離す (position:relative + top で確実に。
     CD微調整の結果 -5px に確定) */
  position: relative;
  top: -5px;
}

/* --------------------------------------------------------------------------
   レスポンシブ簡易対応 (本格的なSP対応は Phase 6)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .about__content {
    padding-left: 40px;
    padding-right: 40px;
  }
}