/* TTC DX TYPE-B / about.css */

.about-intro{padding:clamp(60px,9vw,120px) 0;background:var(--c-white);}
.about-intro__inner{max-width:880px;text-align:center;margin:0 auto;}
.about-intro__lead{
  font-size:clamp(22px,3vw,34px);font-weight:700;color:var(--c-ink);line-height:1.5;
}
.about-intro__lead .blue{color:var(--c-primary-2);}
.about-intro__body{
  margin-top:28px;color:var(--c-ink-sub);font-size:15px;line-height:2;
}

.about-story{padding:clamp(60px,9vw,120px) 0;background:var(--c-blue-soft);}
.about-story__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.about-story__media{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-md);}
.about-story__media img{width:100%;height:100%;object-fit:cover;}
.about-story__title{font-size:clamp(24px,3vw,32px);margin:12px 0;color:var(--c-ink);line-height:1.4;}
.about-story__caption{display:inline-block;background:var(--c-primary);color:var(--c-white);padding:6px 14px;border-radius:999px;font-size:12px;margin-bottom:16px;letter-spacing:.04em;}
.about-story__body p{margin-top:14px;color:var(--c-ink-sub);font-size:14.5px;line-height:2;}
.about-story__body p strong{color:var(--c-primary-2);}
@media(max-width:820px){.about-story__grid{grid-template-columns:1fr;gap:32px;}}

.about-reasons{padding:clamp(60px,9vw,120px) 0;background:var(--c-white);}
.reasons__list{display:flex;flex-direction:column;gap:20px;}
.reasons__item{
  display:grid;grid-template-columns:120px 1fr;gap:32px;align-items:flex-start;
  background:var(--c-blue-tint);border-radius:var(--radius-lg);padding:36px;
}
.reasons__no{
  font-family:'Outfit',sans-serif;font-weight:800;
  color:var(--c-primary-3);font-size:76px;line-height:1;letter-spacing:-.03em;
}
.reasons__head{
  font-family:'Outfit',sans-serif;font-weight:700;
  color:var(--c-primary-2);font-size:12px;letter-spacing:.14em;margin-bottom:10px;
}
.reasons__title{font-size:clamp(19px,2vw,24px);color:var(--c-ink);margin-bottom:14px;}
.reasons__hook{
  color:var(--c-primary);font-weight:700;font-size:15px;margin-bottom:12px;
  background:var(--c-white);padding:12px 18px;border-radius:12px;border-left:3px solid var(--c-primary-2);
  display:inline-block;
}
.reasons__desc{color:var(--c-ink-sub);font-size:14.5px;line-height:2;}
@media(max-width:820px){
  .reasons__item{grid-template-columns:1fr;gap:16px;padding:26px;}
  .reasons__no{font-size:56px;}
}

.about-team{padding:clamp(60px,9vw,120px) 0;background:var(--c-blue-soft);}
.team__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.team__card{
  background:var(--c-white);border-radius:var(--radius-lg);padding:28px;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
}
.team__avatar{
  width:110px;height:110px;border-radius:50%;overflow:hidden;
  margin-bottom:18px;border:3px solid var(--c-blue-soft);
}
.team__avatar img{width:100%;height:100%;object-fit:cover;}
.team__role{
  display:inline-block;font-family:'Outfit',sans-serif;font-weight:700;
  color:var(--c-white);background:var(--c-primary-2);
  padding:4px 12px;border-radius:999px;font-size:11px;letter-spacing:.08em;align-self:flex-start;margin-bottom:10px;
}
.team__title{font-size:22px;margin-bottom:4px;color:var(--c-ink);}
.team__sub{color:var(--c-ink-sub);font-size:13px;margin-bottom:18px;}
.team__body dt{font-weight:700;font-size:12px;color:var(--c-primary-2);margin-top:10px;letter-spacing:.06em;}
.team__body dd{margin:4px 0 0;font-size:13px;color:var(--c-ink-sub);line-height:1.95;}
.team__note{
  margin-top:28px;text-align:center;color:var(--c-ink-sub);font-size:13px;
}
@media(max-width:820px){.team__grid{grid-template-columns:1fr;}}

.about-awards{padding:clamp(60px,9vw,120px) 0;background:var(--c-white);}
.awards__wrap{display:flex;flex-direction:column;gap:24px;}
.awards__card{
  background:var(--c-blue-tint);border-radius:var(--radius-lg);padding:32px 36px;
  border-top:3px solid var(--c-primary-2);
}
.awards__who{
  display:inline-block;font-family:'Outfit',sans-serif;font-weight:700;
  color:var(--c-primary-2);font-size:12px;letter-spacing:.14em;margin-bottom:10px;
}
.awards__title{font-size:20px;margin-bottom:16px;color:var(--c-ink);line-height:1.6;}
.awards__card > p{color:var(--c-ink-sub);font-size:14px;line-height:2;margin-bottom:16px;}
.awards__list h5{font-size:13px;color:var(--c-primary);margin:0 0 8px;letter-spacing:.04em;}
.awards__list ul{display:flex;flex-direction:column;gap:6px;}
.awards__list li{position:relative;padding-left:18px;font-size:13.5px;color:var(--c-ink-sub);line-height:1.9;}
.awards__list li::before{
  content:"";position:absolute;left:0;top:11px;
  width:6px;height:6px;border-radius:50%;background:var(--c-primary-2);
}

/*------------------------------------
page-hero 背景画像（about ページ限定）
- about.css は header.php で is_page('about') の時のみ読み込まれるため、
  この上書きは当ページにのみ適用される（common.css の .page-hero::before を置換）。
- ※CSSファイルでは PHP（get_template_directory_uri 等）は使えないため、
  画像URLは about.css の位置（/assets/css/）からの相対パスで指定する。
  /assets/images/about/hero.jpg → ../images/about/hero.jpg
- 白いかぶせ（.page-hero::after）と文字（.page-hero > .container）は common.css 側のまま有効。
------------------------------------*/
.page-hero::before{
  background-image:
    url("../images/about/hero.webp"),
    linear-gradient(135deg,var(--c-placeholder-1),var(--c-placeholder-2));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}