/* =========================================================
   SAITOWORKS / assets/css/pages/front.css
   - Hero（ロゴ中央・配色修正）
   - セクション配色（.--problems / .--solutions / .--value）
   - 左上イラスト配置（.--problems）
   - h2見出しアイコン（has-illust）
   - 症状タグ／カード横並びフォールバック／解決ボタン
   ========================================================= */

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:clamp(420px,70vh,760px);
  display:grid;
  align-content:center;
  color:#fff;
  overflow:hidden;
}
.hero .bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center right;
  animation:swap var(--dur,20s) linear infinite both;
  will-change:opacity,transform;
  z-index:0;
}
.hero .bg.b{ animation-delay:calc(var(--dur,20s)/2); }
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  z-index:1;
}
@keyframes swap{
  0%{opacity:1; transform:scale(1.06);}
  40%{opacity:1}
  50%{opacity:0}
  90%{opacity:0; transform:scale(1.0);}
  100%{opacity:1}
}
.hero .inner{ position:relative; z-index:2; }

/* ロゴ中央寄せ */
.hero .logo{
  display:block;
  width:max-content;
  margin:0 auto 18px;
}

/* 見出し・リード */
.hero h1{
  font-size:clamp(26px,3.2vw,42px);
  line-height:1.25;
  margin:.2em 0 .3em;
  color:#fff; /* ← 修正: color: var() のタイプミスを修正 */
}
.hero .lead{
  font-size:clamp(14px,1.4vw,18px);
  opacity:.95;
  margin:0 0 16px;
  max-width:800px;
}

/* バッジ */
.badges{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 20px; }
.badge{
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:saturate(120%) blur(2px);
}

/* ヒーロー内リンク色 */
.hero a:not(.swx-btn){ color:#fff; }
.hero a:hover{ opacity:.9; }

/* ボタン */
.hero .actions{ display:flex; gap:10px; flex-wrap:wrap; }
.hero .swx-btn.primary{ background:#ffd400; color:#111; }
.hero .swx-btn.secondary{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
}

/* 補助リンク */
.swx-helper{ display:inline-block; margin-top:10px; color:#fff; opacity:.9; }

/* ===== セクション配色・区切り ===== */
.swx-section{ position:relative; }
.swx-section.--problems{
  background:#FFF7D6;
  border-top:1px solid rgba(0,0,0,.06);
}
.swx-section.--solutions{
  background:#F5F7FA;
  border-top:1px solid rgba(0,0,0,.06);
}
.swx-section.--value{
  background:#FFF9D1; /* ← 修正: 余分なセミコロンを削除 */
  border-top:1px solid rgba(0,0,0,.06);
}

/* ===== セクション左上イラスト（Problems） ===== */
.--problems .swx-container{ position:relative; z-index:1; }
.sec-ill{
  position:absolute; pointer-events:none; user-select:none;
  z-index:0; display:block;
}
.sec-ill--problems{
  top:-28px; left:-16px;
  width:clamp(140px, 18vw, 220px); height:auto;
  opacity:.95;
}
@media (max-width:640px){
  .sec-ill--problems{ top:-14px; left:0; width:160px; opacity:.9; }
}

/* ===== h2 見出し：テキスト左に“悩みアイコン” =====
   ※ CSS は PHP を解釈しないため、URL は固定パスで指定する
*/
.swx-sec-title.has-illust{
  --h2-illust-h: clamp(70px, 5.2vw, 86px);
  --h2-illust-gap: 12px;
  display:flex; align-items:center; gap:var(--h2-illust-gap);
  line-height:1.25;
}
.swx-sec-title.has-illust::before{
  content:"";
  flex:0 0 auto;
  height:var(--h2-illust-h);
  width:var(--h2-illust-h);
  background-image:url("/wp-content/themes/saitoworks-child/assets/img/illust/worried.svg");
  background-size:contain; background-repeat:no-repeat; background-position:center;
}

/* ===== カードの軽いホバー ===== */
.card:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  transform:translateY(-1px);
  transition:box-shadow .15s ease, transform .15s ease;
}

/* 可読性の補強（Problemsはやさしい背景のため） */
.--problems .swx-sec-title{ color:#111; }
.--problems .card-text{ color:#444; }

/* ===== Problems: 症状タグ＋アイコン（共通） ===== */
.swx-section.--problems .card .card-icon{
  background: rgba(255, 212, 0, .20);
  color:#111;
  border-radius:12px;
}

/* タグ */
.sym-tags{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:8px 0 10px;
}
.sym-tag{
  font-size:12px; line-height:1.2; color:#444;
  background:#F1F3F5; padding:4px 8px; border-radius:999px;
  white-space:nowrap;
}
.sym-tag.is-strong{ background:#FFF1A6; }

/* SP ではタグを最大3つに抑える（任意） */
@media (max-width:480px){
  .sym-tags .sym-tag:nth-child(n+4){ display:none; }
}

/* ===== “どう解決する？”：ロゴ＋テキストのボタン ===== */
.resolve-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  background:#fff; color:#111; text-decoration:none; font-weight:700;
  border:1px solid rgba(0,0,0,.08); box-shadow:0 2px 8px rgba(0,0,0,.04);
  margin-top:12px;
}
.resolve-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:all .15s ease;
}
.resolve-btn::before{
  content:""; width:20px; height:20px; flex:0 0 20px;
  background-image:url("../../img/top/saitoworks-logo-h2-onlight.webp");
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
.resolve-btn.ondark::before{
  background-image:url("../../img/top/saitoworks-logo-h2-ondark.webp");
}

/* ===== カード：アイコン＋タイトルを横並び ===== */
/* 1) 推奨：.card-head ラッパーがある場合 */
.card-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.card-head .card-title{ margin:0; }
.card-head .card-icon{
  width:36px; height:36px; display:grid; place-items:center;
  background: rgba(255,212,0,.20); color:#111; border-radius:12px;
  flex:0 0 36px;
}
.card-head .card-icon svg{ width:22px; height:22px; }

/* 2) フォールバック：.card-icon の直後に .card-title が来るだけのHTMLでも横並びにする */
.card .card-icon + .card-title{
  display:inline-block; vertical-align:middle; margin-left:12px; margin-top:0;
}
.card .card-icon{
  display:inline-grid; place-items:center; vertical-align:middle;
  width:36px; height:36px; margin-right:0; margin-bottom:6px; /* 既存マージンを抑える */
}
.card .card-title{ display:inline; }

/* =========================================================
   Solutions セクション（フル幅1枚スライダー + 要約 + CTA）
   ========================================================= */

/* 見出し下の要約バンド（2つまで） */
.sol-summary{
  display:flex; flex-wrap:wrap; gap:8px 12px;
  margin:10px 0 18px;
}
.sol-chip{
  display:inline-block;
  font-size:13px; line-height:1.6; color:#111;
  background:#FFF1A6; /* 薄い黄 */
  padding:6px 10px; border-radius:999px;
  white-space:nowrap;
}

/* ===== スライダー（CSSだけで最低限動く：scroll-snap） ===== */
.sol-slider{
  position:relative;
  margin-top:8px;
  overflow:visible; /* PCで矢印を外側に出すため（重複定義を一本化） */
}
.sol-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior:smooth;
  gap:0;
}
.sol-track::-webkit-scrollbar{ display:none; } /* スクロールバー非表示（見た目優先） */

.sol-slide{
  padding:0 0 18px; /* 画像下の本文・効果の余白 */
  scroll-snap-align:start;
}

/* 画像：16:9＋下端キャプションレイヤ */
.sol-media{
  position:relative;
  border-radius:16px; overflow:hidden;
  background:#e9ecef; /* プレースホルダ色 */
  aspect-ratio:16/9;
}
/* 旧オーバーレイは常に無効化（重複で暗くならないように） */
.sol-media::after{ display:none; }

.sol-img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

/* ▼ 画像内のキャプション統一（タイトル/本文/効果タグ） */
.sol-caption{
  position:absolute; inset:auto 0 0 0;
  padding:clamp(14px, 2.4vw, 22px);
  display:flex; flex-direction:column;
  gap:10px;
  color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.68) 100%);
  align-items:flex-start;
}
.sol-caption .sol-title{
  margin:0; font-weight:700; line-height:1.25;
  font-size:clamp(20px, 2.2vw, 28px);
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  color:#fff;
  /* 2行で省略（長文対策） */
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.sol-caption .sol-body{
  margin:0; color:#f1f3f5;
  font-size:clamp(14px,1.3vw,16px);
  line-height:1.85;
  max-width:60ch;
  /* 2行で省略（任意） */
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.sol-caption .sol-effect{
  align-self:flex-start;
  margin:2px 0 0;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:13px; line-height:1.4;
}

/* ナビ矢印（JSなしでも使えるシンプルボタン） */
.sol-prev, .sol-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:12px;
  background:rgba(0,0,0,.45);
  border:none; cursor:pointer;
  display:grid; place-items:center;
  z-index:3;
}
.sol-prev{ left:-56px; } /* PCは外側に */
.sol-next{ right:-56px; }
@media (max-width: 1024px){
  /* タブレット以下は画像の内側に戻す（安全側） */
  .sol-prev{ left:8px; }
  .sol-next{ right:8px; }
}
.sol-prev:hover, .sol-next:hover{ background:rgba(0,0,0,.6); }
.sol-prev:focus-visible, .sol-next:focus-visible{ outline:2px solid #ffd400; outline-offset:2px; }

/* 矢印アイコン（CSSのみで描画） */
.sol-prev::before, .sol-next::before{
  content:""; display:block; width:12px; height:12px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
}
.sol-prev::before{ transform:rotate(135deg); }
.sol-next::before{ transform:rotate(-45deg); }

/* ドット（タブ） */
.sol-dots{
  display:flex; justify-content:center; gap:10px;
  margin:6px 0 0;
}
.sol-dot{
  width:12px; height:12px; border-radius:999px;
  background:rgba(0,0,0,.25);
  border:none; cursor:pointer;
}
.sol-dot[aria-selected="true"]{ background:rgba(0,0,0,.8); }
.sol-dot:focus-visible{ outline:2px solid #ffd400; outline-offset:2px; }

/* CTA（右寄せ／SPは縦積み） */
.sol-ctas{
  display:flex; gap:12px; justify-content:flex-end;
  margin-top:24px;
}
@media (max-width: 720px){
  .sol-ctas{ flex-direction:column; align-items:stretch; }
}

/* ===== JSなしフォールバック（noscript内） ===== */
.sol-fallback{
  display:grid; gap:16px; margin-top:16px;
}
.sol-fallback.grid-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px){
  .sol-fallback.grid-2{ grid-template-columns:1fr; }
}
.sol-fb-card{
  background:#fff; border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.04);
  padding:12px;
}
.sol-fb-card img{
  width:100%; height:auto; border-radius:12px;
  display:block; margin-bottom:10px;
}
.sol-fb-title{ font-size:18px; line-height:1.35; margin:6px 0; color:#111; }
.sol-fb-body{ color:#444; line-height:1.7; margin:0 0 8px; }
.sol-fb-effect{
  display:inline-block; background:#F1F3F5; color:#111;
  border-radius:999px; padding:6px 10px; font-size:13px;
}

/* ===== 余白と密度の調整（Solutionsセクション専用） ===== */
.--solutions .swx-sec-title{ margin-bottom:6px; }
.--solutions .sol-summary{ margin-bottom:10px; }

/* ====== VALUE layout ====== */
.value-flex{
  display:flex; gap:32px; align-items:center; /* 左右とも上下中央 */
}
.value-aside{
  flex:0 0 42%;
  display:grid; place-items:center;
  min-height: 420px; /* 右のカード高さと釣り合わせ */
}
.value-logo{
  max-width:min(420px, 90%); height:auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.08));
}
.value-main{ flex:1; }

/* カード内のVALUEバッジ（各カード左上の角に重ねる） */
.vcard{
  /* ▼ バッジ用のデフォルト変数（PC） */
  --value-badge-size: 86px;
  --value-badge-top: -44px;
  --value-badge-left: -40px;

  position:relative;
  padding-top:22px;
}
.vcard::before{
  content:""; position:absolute; z-index:3; pointer-events:none;
  top: var(--value-badge-top);
  left: var(--value-badge-left);
  width: var(--value-badge-size);
  aspect-ratio:1/1;
  background-image: var(--value-badge);
  background-size:contain; background-repeat:no-repeat; background-position:center;
}

/* 既存テキストのトーン維持（任意で微調整） */
.vcard .kicker{font-weight:700;letter-spacing:.06em;color:#666;margin:0 0 .3em}
.vcard .card-title{font-size:clamp(18px,1.9vw,22px)}
.vcard .card-text{color:#444}

/* タブレット調整（変数だけ変更） */
@media (max-width: 1024px){
  .value-aside{ flex-basis:36%; min-height: 360px; }
  .vcard{
    --value-badge-size: 74px;
    --value-badge-top: -12px;
    --value-badge-left: -12px;
  }
}

/* スマホは縦積み＋中央寄せ（変数だけ変更） */
@media (max-width: 767px){
  .value-flex{ flex-direction:column; align-items:center; }
  .value-aside{ flex-basis:auto; min-height:0; }
  .value-logo{ max-width: 280px; }
  .value-grid{ width:100%; }
  .vcard{
    --value-badge-size: 64px;
    --value-badge-top: -10px;
    --value-badge-left: -10px;
  }
}
/* Value セクションの見出しアイコンを差し替え */
#value .swx-sec-title.has-illust::before{
  background-image: url('/wp-content/themes/saitoworks-child/assets/img/illust/value-midasi.svg');
  width: 82px;  /* お好みで調整 */
  height: 82px; /* お好みで調整 */
}

/* Solutions 見出しアイコン */
#solutions .swx-sec-title.has-illust{
  --sol-icon-size: 82px;        /* ← ここでサイズ調整可 */
}
#solutions .swx-sec-title.has-illust::before{
  background-image:url('/wp-content/themes/saitoworks-child/assets/img/illust/solution-midasi.svg');
  width: var(--sol-icon-size);
  height: var(--sol-icon-size);
  /* 既存の has-illust で left配置＆縦センターは効いています */
}

@media (max-width:767px){
  #solutions .swx-sec-title.has-illust{ --sol-icon-size: 28px; }
}

/* ===== Members (共同代表紹介) ===== */
/* ▼ セクションのパディングは base.css で統一するため削除 */
.swx-section.--members { /* padding-block: clamp(48px, 6vw, 88px); */ }
.swx-section.--members .swx-sec-lead {
  color: var(--ink-2, #666);
  margin-top: 6px;
}

.member-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 40px);
  align-items: center;
  padding: clamp(16px, 3vw, 24px) 0;
}
.member-row + .member-row { margin-top: clamp(8px, 2vw, 12px); }

/* 交互（B側） */
.member-row.reverse .member-photo { order: 2; }
.member-row.reverse .member-body  { order: 1; }

/* 写真 */
.member-photo {
  width: 100%; max-width: 520px;
  justify-self: center;
}
.member-photo img{
  width: 100%; height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

/* テキスト */
.member-body { width: 100%; }
.member-name{
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.3;
}
.member-role{
  font-size: .9em;
  font-weight: 600;
  color: var(--ink-2, #666);
  margin-left: .5em;
}
.member-tags{
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  margin: 12px 0 10px; padding: 0; list-style: none;
}
.member-tags li{
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-pill, #f2f4f7);
  color: var(--ink, #222);
  font-size: 12px; line-height: 1;
  border: 1px solid var(--bd-muted, rgba(0,0,0,.06));
}
.member-quote{
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--ink, #222);
  margin: 6px 0 0;
}

/* モバイル */
@media (max-width: 767px){
  .member-row{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .member-photo,
  .member-body{
    order: initial !important; /* スマホは写真→テキストの順で統一 */
  }
  .member-photo{ max-width: 460px; }
}

/* --- Reveal（左右スライド＋フェード） --- */
/* 初期状態（.reveal-* は透明＆オフセット） */
.reveal-left, .reveal-right{
  opacity: 0;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  transition: transform .6s ease, opacity .6s ease;
}
.reveal-left { transform: translateX(-24px); }
.reveal-right{ transform: translateX( 24px); }

/* 表示時（JSで .is-in を付与） */
.reveal-left.is-in,
.reveal-right.is-in{
  opacity: 1;
  transform: translateX(0);
}

/* --- メンバー配色（ここで色を決める） --- */
.swx-section.--members{
  /* A/Bのイメージカラー（背景） */
  --memberA-bg: #F3F7FF;  /* 例：A=淡いブルー */
  --memberB-bg: #FFF6EE;  /* 例：B=淡いオレンジ */

  /* A/Bのアクセント（左端ラインやタグの縁取りに使える） */
  --memberA-accent: #2B6AFF;
  --memberB-accent: #FF7A1A;
}

/* 行コンテナの見た目（背景・角丸・内側余白） */
.member-row{
  position: relative;
  background: var(--row-bg, transparent);
  border: 1px solid var(--bd-muted, rgba(0,0,0,.06));
  border-radius: 20px;
  padding: clamp(16px, 3vw, 28px);
}

/* A/Bで背景色を切替 */
.member-row.memberA{ --row-bg: var(--memberA-bg); }
.member-row.memberB{ --row-bg: var(--memberB-bg); }

/* 左端に細いアクセントライン（任意。外したければ削除） */
.member-row::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width: 6px; border-radius: 20px 0 0 20px;
  background: var(--accent, transparent);
}
.member-row.memberA{ --accent: var(--memberA-accent); }
.member-row.memberB{ --accent: var(--memberB-accent); }

/* タグが背景と近い色で埋もれる時は縁取りを少し強めに */
.member-row.memberA .member-tags li{ border-color: color-mix(in oklab, var(--memberA-accent), #000 85%); }
.member-row.memberB .member-tags li{ border-color: color-mix(in oklab, var(--memberB-accent), #000 85%); }

/* モバイルでも角丸＆余白は維持 */
@media (max-width: 767px){
  .member-row{ padding: clamp(14px, 4vw, 20px); }
}

/* --- 見出しアイコン（共通） --- */
.swx-sec-title.has-icon{
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.swx-sec-title .swx-sec-icon{
  width: 28px; height: 28px;
  inline-size: 28px; block-size: 28px; /* 互換 */
  object-fit: contain;
  flex: 0 0 auto;
  display: inline-block;
  translate: 0 .02em; /* 文字ベースライン微調整 */
}

/* 画面幅に応じて少しだけ拡縮 */
@media (min-width: 768px){
  .swx-sec-title .swx-sec-icon{ width: 82px; height: 82px; }
}

/* ——— Buttons in member blocks ——— */
.member-actions{
  margin-top: 14px;
}
.member-btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 14px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600; line-height: 1;
  text-decoration: none;
  border: 1px solid currentColor;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* A/B で色を自動切替（読みやすい中間濃度に） */
.member-row.memberA .member-btn{
  color: var(--memberA-accent);
}
.member-row.memberB .member-btn{
  color: var(--memberB-accent);
}

/* hover：淡塗りで主張しすぎない */
.member-row.memberA .member-btn:hover{
  background: color-mix(in oklab, var(--memberA-accent), white 88%);
  border-color: color-mix(in oklab, var(--memberA-accent), white 30%);
}
.member-row.memberB .member-btn:hover{
  background: color-mix(in oklab, var(--memberB-accent), white 88%);
  border-color: color-mix(in oklab, var(--memberB-accent), white 30%);
}

/* キーボード操作のフォーカス可視化 */
.member-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor, transparent 70%);
}

/* モバイル：指で押しやすい高さに少しだけUP */
@media (max-width: 767px){
  .member-btn{ height: 40px; padding: 0 16px; }
}
/* === Hero: secondary を作成中で無効化 === */
.hero .swx-btn.secondary.is-disabled[aria-disabled="true"]{
  pointer-events: none;            /* クリック不可 */
  cursor: not-allowed;
  opacity: .6;                     /* うっすら無効化表現 */
  filter: saturate(80%);           /* 見た目の差を少し強調 */
  text-decoration: none;
}