## about-acero.css ```css

/* =============== 基本設定 =============== */
@import url("https://fonts.googleapis.com/css2?family=Aboreto&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
/* 自前のA-OTFを同梱して使う場合（任意） */
@font-face {
  font-family: 'AOTFShueiMinchoPro';
  src: url('fonts/AOTFShueiMinchoPro.woff2') format('woff2'), url('fonts/AOTFShueiMinchoPro.woff') format('woff');
  font-display: swap;
}

/* h2はAboreto。日本語は明朝にフォールバック */
h2 {
  font-family: "Aboreto", "A-OTF Shuei Mincho Pro", "AOTFShueiMinchoPro", "Hiragino Mincho ProN", "Yu Mincho", "HGS明朝E", serif !important;
  font-weight: 400;
}

/* ========== 基本設定 ========== */
.about {
  color: var(--ink);
  font-feature-settings: "palt" 1;
}

.section-title {
  text-align: center;
  letter-spacing: .2em;
  margin: 0 0 1.2rem;
  font-size: 45px;
}

/* =============== HERO =============== */
.about-hero {
  position: relative;
  background-image: var(--hero);
  background-repeat: no-repeat;
  background-position: var(--hero-pos, center);   /* ← 焦点 */
  background-size: var(--hero-size, cover);       /* ← ズーム */  
  min-height: clamp(340px, 38vw, 520px);
  display: grid;
  place-items: center;
  color: #fff;
}

.about-hero__overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
       180deg, 
       rgba(0, 0, 0,var(--ov1, .35)), 
       rgba(0, 0, 0,var(--ov2, .45))
       );
}

.about-hero__inner {
  position: relative;
  text-align: center;
  max-width: 500px;
  padding: 56px 20px;
}

.about-hero__title {
  font-size: clamp(26px, 3.6vw, 40px);
  letter-spacing: .1em;
  margin: 0 0 14px;
  font-size: 42px;

}

.about-hero__lead {
  font-size: clamp(12px, 1.4vw, 16px);
  line-height: 2;
  opacity: .9;
  margin-top: 3vw;
}

/* =============== SPLIT =============== */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  margin-top:10vh;
}

.about-split__text {
  display: flex;
  flex-direction: column; /* 上下に積む */
  gap: 55px; /* タイトルと本文の余白調整 */
  align-items: center;
}
.about-split__vlead {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .15em;
  line-height: 1.8;
  color: #2b332f;
  font-size: 25px;
}

.about-split__body {
  color: #1F1B13;
  line-height: 3;
  margin-left:5vw;
}

.about-split__media {
  overflow: hidden;
  width:50vw;
  height:auto;
}

.about-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============== WIDE PHOTO =============== */
.about-wide-photo {
  position: relative;
  background: var(--sage);
  padding: clamp(24px, 5vw, 56px) 0;
  z-index: 2;
  overflow-x: clip;   /* 右端(＝横方向)にはみ出た木目をカット */
  overflow-y: visible;
}

.about-wide-photo__frame {
  position: relative;
  margin: 0 auto;
  height:440px;
  overflow: hidden;
}

.about-wide-photo__frame img {
  width: 100%;
  height: 230%;
  display: block;
  border-radius: 2px;
  object-view-box: inset(800px 50px 0 100px);
  object-fit: cover;
  object-position: 70% center; 
}
.about-wide-photo__ring {
  position: absolute;
  right: clamp(8px, 6vw, 72px);
  bottom: -11vw;                       /* 下へはみ出し量。数値で調整 */
  width: 40vw;
  aspect-ratio: 1 / 1;
  background: var(--ring) no-repeat center / contain;
  pointer-events: none;
  z-index: 3; 
  transform: translateX(288px) translateY(110px)rotate(-30deg);
}

/* ============== WP CONTENT ============== */
.about-body {
  position: relative;
  z-index: 1;              /* ←追加：テキストが画像に埋もれないよう余白を確保 */
}

/* =============== PROFILE =============== */
.about-profile {
  background: var(--paper);
  padding: calc(var(--space) * 1.2) 0;
  margin: 5vw 20vw 0;
}

.profile-grid {
  max-width: 980px;
  margin: 0 auto;
}

.profile-grid .row {
  display: grid;
  grid-template-columns: 160px 1fr;
  border-bottom: 1px solid #7F7667;
}

.profile-grid dt,
.profile-grid dd {
  margin: 0;
  padding: 14px 12px;
  font-size: 16px;
  line-height: 1.8;
}

.profile-grid dt {
  color: #475147;
  font-weight: 600;
  letter-spacing: .05em;
}

.profile-grid dd {
  background: transparent;
  color: #2b332f;
}

/* ==========================
   768px 以下：ABOUT（acero）
   ========================== */
@media screen and (max-width: 768px) {

  /* ===== HERO ===== */
  .about-hero {
    min-height: 320px;
    background-size: cover;          /* モバイルでは素直に cover */
    background-position: 50% center; /* 中央寄せ */
  }

  .about-hero__inner {
    max-width: 100%;
    padding: 48px 8vw 40px;
    text-align: center;
  }

  .about-hero__title {
    font-size: 30px;
    letter-spacing: .12em;
    margin-bottom: 10px;
  }

  .about-hero__lead {
    font-size: 11px;
    line-height: 1.9;
    margin-top: 16px;
  }

  /* ===== SPLIT（写真＋縦書きコピー） ===== */
  .about-split {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
  }

  .about-split__media {
    order: -1;
    width: auto;
    height: 440px;
    transform: translateX(-45px);
  }

  .about-split__media img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .about-split__text {
    order: 0;
    gap: 24px;
    align-items: flex-start;
    margin: 0 6vw 8px;
  }

  /* スマホでは再び縦書きに戻す */
  .about-split__vlead {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: .6em;
    font-size: 22px;
    line-height: 1.8;
    margin: auto;
    font-weight: 500;
    margin: 0 auto 15vw;
  }

  .about-split__body {
    margin-left: 0;
    font-size: 14px;
    line-height: 3;
  }

  /* ===== WIDE PHOTO（下の大きい写真＋年輪） ===== */
  .about-wide-photo {
    padding: 32px 0 40px;
  }

  .about-wide-photo__frame {
    height: 340px;
  }

  .about-wide-photo__frame img {
    width: 100%;
    height: 200%;
    object-fit: cover;
    object-position: 35% center;
  }

  .about-wide-photo__ring {
    right: -30vw;
    bottom: -20vw;
    width: 80vw;
    transform: translateX(10px) translateY(10px) rotate(-30deg);
  }

  /* ===== COMPANY プロフィール表 ===== */
  .about-profile {
    margin: 40px 6vw 0;
    padding: 32px 0 40px;
  }

  .profile-grid .row {
    grid-template-columns: 110px 1fr;
    display: block; 
  }

  .profile-grid dt,
  .profile-grid dd {
    display: block;
    width: 100%;
    padding: 10px 8px;
    font-size: 13px;
    line-height: 1.8;
  }
  .profile-grid dt {
    margin-bottom: 4px;
    font-size: 14px;    
  }
  .profile-grid dt {
    font-size: 16px;  
  }

  .section-title {
    font-size: 28px;
    margin-bottom: 20px;
  }
}