/* ==========================================================
   T&Yについて（claude-design-output/about.dc.html）
   ========================================================== */

/* ===== 私たちについて ===== */
.ty-who { position: relative; overflow: hidden; padding: clamp(52px, 11vw, 160px) clamp(20px, 5vw, 64px); }
.ty-who__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: center; gap: clamp(40px, 8vw, 120px); }
.ty-who__body { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 32px); }
.ty-who__base { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding-top: 8px; }
.ty-who__badge { display: flex; align-items: center; padding: 7px 12px 7px 15px; border: 1px solid #B8933F; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: .34em; text-transform: uppercase; color: #8A6B25; }
.ty-who__places { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ty-who__place { display: flex; align-items: center; gap: 10px; }
.ty-who__place-ja { font-family: "Noto Serif JP", serif; font-size: 19px; line-height: 1; letter-spacing: .14em; color: #00132F; }
.ty-who__place-en { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .24em; text-transform: uppercase; color: #00132F; }
.ty-who__slash { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 300; line-height: 1; color: #B8933F; }
.ty-who__photo { position: relative; padding: 28px 0 0 28px; }
.ty-who__frame { position: absolute; inset: 0 28px 28px 0; border: 1px solid #B8933F; }
.ty-who__img { position: relative; overflow: hidden; aspect-ratio: 5 / 4; }
.ty-who__img img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; display: block; }

/* ===== 大切にしている考え方（ネイビー） ===== */
.ty-philo {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 11vw, 160px) clamp(20px, 5vw, 64px);
  color: #FAF8F4;
  background: radial-gradient(700px circle at var(--mx) var(--my), rgba(184,147,63,.16), transparent 60%), #00132F;
}
.ty-philo__net { opacity: .45; }
.ty-philo__bgword { right: -2vw; top: 20px; color: #001029; }
.ty-philo__inner { position: relative; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: center; gap: clamp(40px, 8vw, 120px); }
.ty-philo__chart { justify-self: center; width: 100%; max-width: 440px; }
/* 英字の大きさ（＝点の縦位置の基準） */
.ty-philo__grid { --ty-ph: clamp(32px, 3.4vw, 40px); display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: clamp(18px, 2.4vw, 28px); }
.ty-philo__mark { position: relative; display: flex; justify-content: center; }
.ty-philo__line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(184,147,63,.5); }
.ty-philo__mark--first .ty-philo__line { top: calc(.5 * var(--ty-ph)); }
.ty-philo__mark--last .ty-philo__line { bottom: auto; height: calc(.5 * var(--ty-ph)); }
.ty-philo__dot { position: relative; margin-top: calc(-6px + .5 * var(--ty-ph)); width: 13px; height: 13px; border-radius: 50%; border: 1px solid #B8933F; background: #00132F; }
.ty-philo__mark--last .ty-philo__dot { margin-top: calc(-7.5px + .5 * var(--ty-ph)); width: 15px; height: 15px; background: #D1B165; box-shadow: 0 0 18px rgba(184,147,63,.6); }
.ty-philo__ripple { position: absolute; top: calc(-7.5px + .5 * var(--ty-ph)); width: 15px; height: 15px; border-radius: 50%; background: rgba(201,164,82,.55); opacity: 0; }
.ty-philo__row { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 22px); padding-bottom: 40px; }
.ty-philo__row--last { padding-bottom: 0; }
.ty-philo__en { width: clamp(132px, 13vw, 170px); flex: 0 0 auto; font-family: "Cormorant Garamond", serif; font-size: var(--ty-ph); line-height: 1; letter-spacing: .08em; color: #B8933F; }
.ty-philo__ja { font-family: "Noto Serif JP", serif; font-size: clamp(18px, 1.9vw, 22px); letter-spacing: .14em; }
.ty-philo__body { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 32px); }
.ty-philo__body .ty-h2 { color: inherit; }
.ty-philo__em { font-family: "Noto Serif JP", serif; font-size: 1.15em; font-weight: 500; }

/* ===== T&Yの取り組み ===== */
.ty-ap { position: relative; overflow: hidden; padding: clamp(52px, 11vw, 160px) clamp(20px, 5vw, 64px); }
.ty-ap__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 6vw, 64px); }
.ty-ap__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(24px, 3vw, 32px) clamp(32px, 5vw, 56px); }
.ty-ap__title { flex: 1 1 300px; }
.ty-ap__lead { flex: 1.8 1 480px; }
.ty-ap__steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.ty-ap__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
/* 丸と丸をつなぐ線 */
.ty-ap__line { position: absolute; top: 44px; left: calc(50% + 44px); width: calc(100% - 64px); height: 1px; background: rgba(184,147,63,.5); display: block; }
.ty-ap__num { width: 90px; height: 90px; /* デザインは 88px＋枠線（content-box） */ flex: 0 0 auto; border-radius: 50%; border: 1px solid #B8933F; display: flex; align-items: center; justify-content: center; font-family: "Noto Serif JP", serif; font-variant-numeric: lining-nums; font-size: 22px; color: #8A6B25; }
.ty-ap__step--last .ty-ap__num { background: #B8933F; color: #FFFFFF; }
.ty-ap__label { font-family: "Noto Serif JP", serif; font-size: 15px; line-height: 1.8; letter-spacing: .06em; color: #8A6B25; }
@media (max-width: 959px) {
  .ty-ap__steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
  .ty-ap__line { display: none; }
}
@media (max-width: 767px) {
  .ty-ap__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .ty-ap__num { width: 70px; height: 70px; font-size: 19px; }
  .ty-ap__label { font-size: 16px; letter-spacing: .04em; }
  .ty-ap__dot { display: none; }
  .ty-ap__step--last { grid-column: 1 / -1; }
}

/* ===== 代表・メンバー紹介 ===== */
.ty-msg { position: relative; overflow: hidden; padding: 0 clamp(20px, 5vw, 64px) clamp(52px, 11vw, 160px); }
.ty-msg__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: clamp(80px, 10vw, 120px);
  border-top: 1px solid rgba(0,19,47,.12);
}
/* 写真枠を外したので、本文の枠は「いちばん長い行がちょうど入る幅」にして中央に置く。見出し・本文は中央寄せ、名前は枠の右端 */
.ty-msg__body { width: fit-content; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(22px, 3vw, 32px); }
/* 本文の後ろに大きな “ ” を薄く敷く */
.ty-msg__quote { position: relative; isolation: isolate; text-align: center; }
.ty-msg__quote::before, .ty-msg__quote::after { position: absolute; z-index: -1; font-family: "Cormorant Garamond", serif; font-size: clamp(100px, 12vw, 160px); line-height: 1; color: rgba(184,147,63,.18); pointer-events: none; }
.ty-msg__quote::before { content: '“'; left: clamp(-64px, -4vw, -16px); top: clamp(-56px, -3.6vw, -28px); }
.ty-msg__quote::after { content: '”'; right: clamp(-64px, -4vw, -16px); bottom: clamp(-110px, -7vw, -56px); }
.ty-msg__text { margin: 0; font-family: "Noto Serif JP", serif; font-size: clamp(16.5px, 1.6vw, 19px); line-height: 2.3; letter-spacing: .08em; color: #00132F; }
.ty-msg__text + .ty-msg__text { margin-top: 1em; } /* 段落の間（1文目と2文目）を少し空ける */
.ty-msg__sign { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.ty-msg__role { font-family: "Noto Serif JP", serif; font-size: 15px; letter-spacing: .12em; color: #5A6273; } /* 名前と同じ明朝・本文と同じ大きさ（作業者指示） */
.ty-msg__name { font-family: "Noto Serif JP", serif; font-size: 18px; letter-spacing: .16em; color: #00132F; }

/* ===== 事業概要 ===== */
.ty-outline { position: relative; overflow: hidden; padding: clamp(52px, 11vw, 140px) clamp(20px, 5vw, 64px); }
.ty-outline__inner { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(32px, 5vw, 56px); }
.ty-outline__list { margin: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(0,19,47,.2); }
.ty-outline__row { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: clamp(20px, 4vw, 28px) 8px; border-bottom: 1px solid rgba(0,19,47,.14); }
.ty-outline__dt { flex: 1 1 120px; max-width: 220px; font-family: "Noto Serif JP", serif; font-size: 17px; font-weight: 500; letter-spacing: .1em; color: #00132F; }
.ty-outline__dd { flex: 999 1 320px; min-width: 0; margin: 0; font-size: 15px; letter-spacing: .06em; line-height: 1.9; }
.ty-outline__btn { display: flex; justify-content: center; }
@media (max-width: 767px) {
  .ty-msg__quote { text-align: left; }
}