/* =========================================
 * About page — Cleaned & Organized
 * モバイル優先 → 680px 以上で2カラム化
 * ========================================= */

/* ===== 基本トークンとレイアウト ===== */
#about{ --ink:#222; --ink-2:#666; --bd:rgba(0,0,0,.08); --bg:#fff; --about-bg:none; position:relative; z-index:0; }
#about .swx-section{ padding-block: clamp(48px, 7vw, 96px); }
#about .swx-container{ max-width:1040px; margin:0 auto; padding-inline: clamp(16px, 4vw, 28px); }
#about .swx-sec-title{ font-size: clamp(20px, 2.2vw, 28px); font-weight:800; letter-spacing:.02em; position:relative; display:inline-block; padding-bottom:.35em; }

/* タイトル下線（グラデ＋くさび） */
#about .swx-sec-title::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:8px; pointer-events:none;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(0,0,0,0) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 18%, 0 100%); border-radius:8px;
}
#about .swx-sec-title.js-reveal::after{ transform-origin:left center; transform:scaleX(0); transition:transform .5s ease; }
#about .swx-sec-title.js-reveal.is-in::after{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
  #about .swx-sec-title.js-reveal::after{ transition:none; transform:none; }
}

/* ===== カラーテーマ（A/B切替） ===== */
#about[data-member="ryutaro"]{ --accent:#2B6AFF; --accent-bg:#F3F7FF; }
#about[data-member="shigeru"]{ --accent:#FF7A1A; --accent-bg:#FFF6EE; }

/* 背景パターン（--about-bg は PHP 側で注入） */
#about::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.06; background-image: var(--about-bg);
  background-repeat: repeat; background-position: 0 0; background-size: auto 1500px;
}
@media (max-width:1200px){ #about::before{ background-size:auto 1000px; opacity:.10; } }
@media (max-width:768px){  #about::before{ background-size:auto 460px;  opacity:.10; } }

/* ===== 共通：小要素 ===== */
a{ color: color-mix(in oklab, var(--accent), #000 8%); text-underline-offset:2px; }
a:hover{ opacity:.9; }
img{ display:block; }

/* =========================================
 * 0) ヒーロー（写真＋本文）
 * モバイル：1カラム / 680px～：2カラム
 * ========================================= */
.--about-hero{ background: color-mix(in oklab, var(--accent-bg), transparent 8%); }
.hero-wrap{ display:grid; gap: clamp(18px, 4vw, 36px); }
@media (min-width:680px){
  .hero-wrap{ grid-template-columns: minmax(260px, 42%) 1fr; align-items:center; }
}
.hero-photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:24px; box-shadow:0 6px 24px rgba(0,0,0,.06);
  /* 顔が切れる場合は以下を調整
  object-position:center 20%;
  */
}
.hero-body .role{ font-size:.8em; font-weight:700; color:var(--ink-2); margin-left:.5em; }
.hero-tagline{ margin-top:8px; font-size:clamp(16px, 1.8vw, 20px); font-weight:700; color:var(--accent); }
.hero-tags{ margin-top:10px; display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; }
.hero-tags li{
  border:1px solid color-mix(in oklab, var(--accent), #000 85%); border-radius:999px;
  padding:6px 10px; font-size:12px; background:#fff;
}

/* =========================================
 * 1) できること（チップス表示）
 * ========================================= */
#about .--summary{ padding-block: clamp(36px, 6vw, 72px); background: color-mix(in oklab, var(--accent-bg), transparent 12%); }
#about .--summary .swx-sec-title{ margin-bottom:.2em; }
#about .summary-points{
  list-style:none; padding:0; margin-top:14px;
  display:flex; flex-wrap:wrap; gap:12px;
}
#about .summary-points li{
  font-size:14px; font-weight:700; line-height:1.6;
  padding:10px 14px; border-radius:999px; white-space:normal; word-break:keep-all;
  background:#fff; border:1px solid color-mix(in oklab, var(--accent), #000 85%);
  box-shadow:0 2px 8px rgba(0,0,0,.03);
  transition: background-color .2s ease, border-color .2s ease, transform .12s ease;
}
#about .summary-points li:hover{
  background: color-mix(in oklab, var(--accent), white 90%);
  border-color: color-mix(in oklab, var(--accent), #000 70%);
  transform: translateY(-1px);
}

/* =========================================
 * 2) ストーリー
 * モバイル：1カラム / 680px～：2カラム
 * ========================================= */
.story-grid{ display:grid; gap: clamp(18px, 4vw, 36px); align-items:start; }
@media (min-width:680px){
  .story-grid{ grid-template-columns: 1.4fr .9fr; }
}
.story-body p{ margin:0 0 1em; line-height:1.9; color:var(--ink); }
.story-photo img{ width:100%; border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.05); }

/* =========================================
 * 3) スキルセット
 * モバイル：1カラム / 680px～：2カラム
 * ========================================= */
.skills-grid{ display:grid; gap: clamp(16px, 3vw, 28px); }
@media (min-width:680px){
  .skills-grid{ grid-template-columns: 1fr 1fr; }
  /* 自動可変にしたい場合は ↑ を↓に変更
  .skills-grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  */
}
.card{ background:#fff; border:1px solid var(--bd); border-radius:16px; padding:clamp(16px, 3vw, 22px); }
.card-title{ font-size:16px; font-weight:800; margin:0 0 .6em; color:var(--accent); }
.skill-list{ list-style:none; padding:0; margin:0; display:grid; gap:.6em; }
.skill-list li strong{ font-weight:800; }

/* =========================================
 * 4) ミニ実例
 * モバイル：1カラム / 680px～：2カラム / 1100px～：3カラム
 * ========================================= */
.cases-grid{ display:grid; gap: clamp(16px, 3vw, 28px); }
@media (min-width:680px){
  .cases-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width:1100px){
  .cases-grid{ grid-template-columns: repeat(3, 1fr); }
  /* 自動可変にしたい場合は ↑ を↓に変更
  .cases-grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  */
}
.case-thumb{ margin:0 0 .8em; }
.case-thumb img{ width:100%; border-radius:12px; }
.case-title{ font-weight:800; margin:.2em 0 .3em; }
.case-text{ color:var(--ink-2); line-height:1.8; }

/* =========================================
 * 5) 行動原則
 * ========================================= */
.principles-list{ list-style:none; padding:0; margin:0; display:grid; gap:.6em; }
.principles-list li strong{ color:var(--accent); }

/* =========================================
 * 6) FAQ アコーディオン
 * ========================================= */
.faq-accordion{ display:block; margin-top:14px; }
.acc-item{
  position:relative; margin-top:12px; border:1px solid color-mix(in oklab, var(--accent), #000 92%);
  border-radius:14px; overflow:hidden;
  background: color-mix(in oklab, var(--accent-bg), white 70%);
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.acc-item:first-child{ margin-top:0; }
/* 左の薄帯 */
.acc-item::before{
  content:""; position:absolute; inset:0 auto 0 0; width:6px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent), transparent 30%), transparent);
  opacity:.6;
}
.acc-header{ margin:0; }
.acc-trigger{
  all:unset; position:relative; display:block; width:100%;
  padding:16px 44px 16px 18px; cursor:pointer;
}
.acc-q{ font-weight:800; }
.acc-item:hover{ border-color: color-mix(in oklab, var(--accent), #000 80%); }
.acc-trigger:focus-visible{
  outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%); border-radius:12px;
}
/* 右端シェブロン */
.acc-trigger::after{
  content:""; position:absolute; right:16px; top:50%; width:10px; height:10px;
  transform: translateY(-50%) rotate(45deg); border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  opacity:.85; transition: transform .2s ease, opacity .2s ease;
}
.acc-trigger[aria-expanded="true"]::after{ transform: translateY(-50%) rotate(-135deg); opacity:1; }
.acc-panel{ padding:0 18px 16px; }
.acc-a{ margin:0; color:var(--ink-2); line-height:1.8; }
/* 開状態の微強調（JSで .is-open を付与） */
.acc-item.is-open{
  border-color: color-mix(in oklab, var(--accent), #000 70%);
  background: color-mix(in oklab, var(--accent-bg), white 62%);
}

/* =========================================
 * 7) CTA
 * ========================================= */
.--cta{ background: color-mix(in oklab, var(--accent-bg), transparent 6%); text-align:center; }
.cta-lead{ margin:.4em 0 1em; color:var(--ink-2); }
.cta-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 18px;
  border-radius:999px; font-weight:700; text-decoration:none; border:1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-ghost{ background:transparent; color:var(--accent); border-color:color-mix(in oklab, var(--accent), #000 85%); }
.btn-ghost:hover{ background:color-mix(in oklab, var(--accent), white 88%); }

/* =========================================
 * モバイル最適化（微調整）
 * ========================================= */
@media (max-width:679px){
  #about .summary-points{ gap:10px; }
  /* grid は上でモバイル1カラム前提のため明示不要 */
}

/* =========================================
 * Safety Net（他CSSの上書きを潰す保険／必要時のみ）
 * 最後に置くことで“後勝ち”＋ !important で強制適用
 * ========================================= */
/*
@media (min-width:680px){
  #about .hero-wrap,
  #about .story-grid,
  #about .skills-grid,
  #about .cases-grid{
    display:grid !important; gap: clamp(18px, 4vw, 36px) !important;
  }
  #about .hero-wrap{ grid-template-columns:minmax(260px,42%) 1fr !important; align-items:center !important; }
  #about .story-grid{ grid-template-columns:1.4fr .9fr !important; }
  #about .skills-grid{ grid-template-columns:1fr 1fr !important; }
  #about .cases-grid{ grid-template-columns:1fr 1fr !important; }
}
@media (min-width:1100px){
  #about .cases-grid{ grid-template-columns: repeat(3, 1fr) !important; }
}
*/
/* ===== Mini Cases: PCで横幅いっぱいに2分割 ===== */

/* === Mini Cases: 他セクションと同幅 + PCも2カラム固定 === */

/* コンテナ幅を他セクションと同じに戻す */
#about .--cases .swx-container{
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding-inline: clamp(16px, 4vw, 28px) !important;
  width: 100%;
}

/* 既存CSSでは 1100px～で3列にしているので、2列のままに上書き */
@media (min-width: 1100px){
  #about .cases-grid{
    grid-template-columns: 1fr 1fr !important;  /* 3→2 に固定 */
  }
}

/* 念のためPCレンジのギャップも統一（任意） */
@media (min-width: 1024px){
  #about .cases-grid{
    gap: clamp(20px, 2vw, 28px) !important;
  }
}