@charset "UTF-8";

/* ==========================================================
   SOMA WEB DESIGN — About page（page-about.php 専用）
   ヘッダー / メニュー / フッター / セクション枠 / page-head / reveal は
   テーマの style.css 側で定義済み。このファイルは About 固有分のみ。
   Colors: ink #1A1A1A / text #2A2A2A / accent #5B9BD5 / gray #F5F5F4
   ========================================================== */

/* page-head の直後に来るセクションは上余白を詰める */
.about-first { padding-top: 78px; }

/* ---------- Intro（写真 + 自己紹介） ---------- */
.about-intro {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 68px;
  align-items: center;
}
.about-intro > img {
  width: 100%;
  height: auto;   /* WPのheight属性がaspect-ratioを潰すため */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 60% 50%;
  display: block;
}
.about-intro .t p {
  margin: 0 0 26px;
  font-weight: 300;
  font-size: 15px;
  line-height: 2.35;
  letter-spacing: .05em;
  color: #2A2A2A;
}
.about-intro .t .quote {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  line-height: 2.1;
  letter-spacing: .06em;
  color: #1A1A1A;
}
.about-intro .t .sign {
  margin-top: 8px;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  letter-spacing: .18em;
  color: #1A1A1A;
}
.about-intro .t .sign small {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(42,42,42,.55);
  font-family: 'Noto Sans JP', sans-serif;
}

/* ---------- Values（人となり・大切にしていること） ---------- */
.about-values {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 52px;
}
.av-item .num {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  letter-spacing: .2em;
  color: #5B9BD5;
}
.av-item .en {
  display: block;
  margin-top: 16px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  letter-spacing: .14em;
  color: #1A1A1A;
}
.av-item h3 {
  margin: 10px 0 0;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .1em;
  color: #1A1A1A;
}
.av-item .rule {
  width: 26px;
  height: 1px;
  background: rgba(26,26,26,.25);
  margin: 20px 0;
}
.av-item p {
  margin: 0;
  font-weight: 300;
  font-size: 13px;
  line-height: 2.15;
  letter-spacing: .04em;
  color: rgba(42,42,42,.82);
}

/* ---------- できること（強み） ---------- */
.about-do { max-width: 820px; margin: 0 auto; }
.about-do .do-lead {
  text-align: center;
  margin: 0 0 44px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: .06em;
  color: #1A1A1A;
}
.do-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 26px;
  align-items: baseline;
  padding: 28px 4px;
  border-top: 1px solid rgba(26,26,26,.12);
}
.do-item:last-child { border-bottom: 1px solid rgba(26,26,26,.12); }
.do-item .n {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  letter-spacing: .12em;
  color: #5B9BD5;
}
.do-item h3 {
  margin: 0 0 10px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .08em;
  color: #1A1A1A;
}
.do-item p {
  margin: 0;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 2.1;
  letter-spacing: .04em;
  color: rgba(42,42,42,.82);
}

/* ---------- Off time（趣味） ---------- */
.about-hobby {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.hobby-card figure { margin: 0; overflow: hidden; }
.hobby-card img {
  width: 100%;
  height: auto;   /* WPのheight属性がaspect-ratioを潰すため */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  filter: grayscale(.12);
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.hobby-card:hover img { transform: scale(1.05); }
.hobby-card .en {
  display: block;
  margin: 20px 0 0;
  font-size: 9.5px;
  letter-spacing: .3em;
  color: #5B9BD5;
}
.hobby-card h3 {
  margin: 10px 0 0;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .1em;
  color: #1A1A1A;
}
.hobby-card p {
  margin: 12px 0 0;
  font-weight: 300;
  font-size: 12.5px;
  line-height: 2;
  letter-spacing: .04em;
  color: rgba(42,42,42,.82);
}

/* ---------- 画面幅いっぱいの写真 ----------
   左右の余白を持たないので、main の端から端まで広がる。
   セクションの区切りとして、OFF TIME と「思い」の間に挟んでいる。 */
.about-full {
  margin: 0;
  overflow: hidden;
}
.about-full img {
  width: 100%;
  height: auto;   /* WPのheight属性がaspect-ratioを潰すため */
  /* 元画像は 1400x927。16/6 まで細くすると上下あわせて4割が消え、
     足元と右下の猫が画面から切れてしまうため 2/1 にとどめる。
     縦位置を 85% まで下げているのは、切り捨てる分を上の背景側に寄せるため
     （下を残す）。※640px以下は下の 4/3 に切り替わり、縦の切り取りは発生しない。 */
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 62% 85%;
  display: block;
}

/* ふわっと現れる演出。
   既定の .reveal は「下から持ち上げる」動きだが、画面いっぱいの写真だと
   ずれが目立つので、ここでは打ち消して
   「明るくなりながら、わずかに引く」だけにしている。
   .about-full の overflow:hidden が拡大分のはみ出しを受け止める。 */
.about-full.reveal {
  transform: none;
  transition: opacity 1.5s cubic-bezier(.33, 1, .68, 1);
}
.about-full.reveal img {
  transform: scale(1.05);
  transition: transform 2.2s cubic-bezier(.16, 1, .3, 1);
}
.about-full.reveal.in img { transform: none; }

/* 動きを減らす設定のときは止める（style.css 側の指定を上書きしないように） */
@media (prefers-reduced-motion: reduce) {
  .about-full.reveal { transition: none; }
  .about-full.reveal img,
  .about-full.reveal.in img { transform: none; transition: none; }
}

/* ---------- 思い ---------- */
.about-thought {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.about-thought .mark {
  width: 1.5px;
  height: 34px;
  background: #5B9BD5;
  margin: 0 auto 32px;
}
.about-thought .big {
  margin: 0 0 30px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 2.1;
  letter-spacing: .08em;
  color: #1A1A1A;
}
.about-thought p {
  margin: 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 2.4;
  letter-spacing: .06em;
  color: #2A2A2A;
}

/* ---------- CTA ---------- */
.about-cta { margin-top: 64px; text-align: center; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1024px) {
  .about-intro { grid-template-columns: 1fr; gap: 40px; max-width: 560px; }
  .about-intro > img { aspect-ratio: 16 / 11; }
  .about-values { gap: 40px; }
}
@media (max-width: 720px) {
  .about-values { grid-template-columns: 1fr; gap: 40px; max-width: 460px; }
  .av-item .rule { margin: 16px 0; }
  .about-hobby { grid-template-columns: 1fr; gap: 30px; max-width: 420px; }
}
@media (max-width: 640px) {
  .about-full img { aspect-ratio: 4 / 3; }
  .about-first { padding-top: 56px; }
  .do-item { grid-template-columns: 40px 1fr; gap: 16px; }
}