/* ==============================================
   3tive.design | AI導入支援 共通スタイル
   /ai-support/ 配下3ページで共用（common.css の後に読み込む）
   ============================================== */

/* セクション配色（web.html と同じ流儀） */
.dark{background:#1a1a1a;color:#fff;}
.dark .sec-title{color:#fff;}
.dark .sec-lead{color:rgba(255,255,255,.72);}
.mid{background:#111;color:#fff;}
.mid .sec-title{color:#fff;}

/* ===== こんな状態になっていませんか？（チェックリスト） ===== */
.ai-check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:40px;}
.ai-check-item{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid rgba(0,0,0,.07);border-left:3px solid var(--yellow);border-radius:12px;padding:16px 18px;font-size:.86rem;font-weight:700;color:#333;line-height:1.7;}
.ai-check-item::before{content:'✓';color:var(--yellow);font-weight:900;flex-shrink:0;font-size:1rem;line-height:1.5;}

/* ===== 考え方・姿勢の引用ブロック ===== */
.ai-policy{margin-top:36px;background:rgba(223,196,31,.07);border-left:4px solid var(--yellow);border-radius:0 14px 14px 0;padding:26px 28px;font-size:.94rem;font-weight:700;line-height:2;color:#333;}
.dark .ai-policy,.mid .ai-policy{background:rgba(223,196,31,.08);color:rgba(255,255,255,.85);}

/* ===== 代表プロフィール（写真＋経歴） ===== */
.ai-profile{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start;margin-top:44px;}
.ai-profile-photo{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);}
.ai-profile-photo img{width:100%;height:auto;object-fit:cover;}
.ai-profile-body h3{font-size:1.1rem;font-weight:900;color:#fff;margin-bottom:4px;}
.ai-profile-role{font-size:.76rem;font-weight:700;color:rgba(255,255,255,.5);margin-bottom:16px;}
.ai-profile-body p{font-size:.86rem;font-weight:700;color:rgba(255,255,255,.72);line-height:1.9;margin-bottom:14px;}
.ai-profile-tags{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 18px;}
.ai-profile-tag{font-size:.68rem;font-weight:900;letter-spacing:.05em;padding:4px 12px;border-radius:999px;background:rgba(223,196,31,.12);border:1px solid rgba(223,196,31,.3);color:var(--yellow);}
.ai-emphasis{margin-top:32px;text-align:center;font-size:clamp(1.05rem,2vw,1.5rem);font-weight:900;color:#fff;line-height:1.7;}
.ai-emphasis strong{color:var(--yellow);}

/* ===== 自社活用事例カード ===== */
.ai-case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px;}
.ai-case-card{background:#fff;border:1px solid rgba(0,0,0,.07);border-top:3px solid var(--yellow);border-radius:14px;padding:26px 24px;}
.ai-case-status{display:inline-block;font-size:.64rem;font-weight:900;letter-spacing:.1em;padding:3px 12px;border-radius:999px;margin-bottom:12px;background:rgba(223,196,31,.14);color:#6b5c00;border:1px solid rgba(223,196,31,.35);}
.ai-case-status.trial{background:rgba(26,157,226,.1);color:#0d6ba0;border-color:rgba(26,157,226,.3);}
.ai-case-card h3{font-size:1rem;font-weight:900;color:#111;margin-bottom:10px;line-height:1.5;}
.ai-case-card p{font-size:.8rem;font-weight:700;color:#555;line-height:1.85;}
.ai-case-card p + p{margin-top:10px;}
.ai-case-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.ai-case-tool{font-size:.64rem;font-weight:900;padding:3px 10px;border-radius:999px;background:#f0efe9;color:#666;}

/* ===== 対応できる内容（カード一覧） ===== */
.ai-scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px;}
.ai-scope-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:18px 16px;display:flex;align-items:center;gap:12px;font-size:.84rem;font-weight:900;color:rgba(255,255,255,.85);line-height:1.5;}
.ai-scope-item::before{content:'⚙';color:var(--yellow);opacity:.75;flex-shrink:0;font-size:1.05rem;}

/* ===== 料金プラン ===== */
.ai-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
.ai-plan-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;}
.ai-plan-card.rec{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow),6px 6px 0 rgba(223,196,31,.15);}
.ai-plan-label{display:inline-block;align-self:flex-start;font-size:.66rem;font-weight:900;letter-spacing:.1em;padding:3px 12px;border-radius:999px;margin-bottom:14px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);}
.ai-plan-card.rec .ai-plan-label{background:var(--yellow);color:#050505;}
.ai-plan-card h3{font-size:1.02rem;font-weight:900;color:#fff;margin-bottom:6px;line-height:1.45;}
.ai-plan-price{font-size:1.9rem;font-weight:900;color:var(--yellow);line-height:1.15;margin:12px 0 2px;letter-spacing:.02em;}
.ai-plan-price small{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.45);margin-left:4px;}
.ai-plan-unit{font-size:.74rem;font-weight:700;color:rgba(255,255,255,.4);margin-bottom:18px;}
.ai-plan-card ul{display:flex;flex-direction:column;gap:9px;}
.ai-plan-card li{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.7);display:flex;align-items:flex-start;gap:9px;line-height:1.55;}
.ai-plan-card li::before{content:'✓';color:var(--yellow);flex-shrink:0;}
.ai-plan-note{margin-top:22px;font-size:.76rem;font-weight:700;color:rgba(255,255,255,.45);line-height:1.85;}
.ai-plan-single{max-width:640px;margin:40px auto 0;}
.ai-plan-steps-note{margin-top:26px;text-align:center;font-size:.82rem;font-weight:900;color:rgba(255,255,255,.6);}
.ai-plan-steps-note a{color:var(--yellow);text-decoration:underline;}

/* ===== 支援の流れ（web.html の flow を踏襲） ===== */
.flow-list{display:flex;flex-direction:column;gap:0;margin-top:44px;}
.flow-item{display:grid;grid-template-columns:72px 1fr;gap:0 24px;position:relative;padding-bottom:36px;}
.flow-item:last-child{padding-bottom:0;}
.flow-item:not(:last-child)::after{content:'';position:absolute;left:35px;top:72px;bottom:0;width:2px;background:rgba(255,255,255,.1);}
.flow-step{width:72px;height:72px;border-radius:50%;background:rgba(223,196,31,.12);border:2px solid rgba(223,196,31,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;}
.flow-step-en{font-family:var(--en);font-size:.55rem;letter-spacing:2px;color:var(--yellow);opacity:.7;}
.flow-step-n{font-family:var(--en);font-size:1.5rem;color:var(--yellow);line-height:1;}
.flow-body{padding-top:14px;}
.flow-body h3{font-size:1rem;font-weight:900;color:#fff;margin-bottom:5px;}
.flow-body p{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.54);line-height:1.75;}

/* ===== 導入前後の比較（製造業ページ） ===== */
.ba-list{display:flex;flex-direction:column;gap:24px;margin-top:40px;}
.ba-item{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:16px;overflow:hidden;}
.ba-head{padding:14px 22px;background:#111;color:#fff;font-size:.92rem;font-weight:900;}
.ba-body{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;}
.ba-col{padding:22px;}
.ba-col-label{display:inline-block;font-size:.64rem;font-weight:900;letter-spacing:.12em;padding:3px 12px;border-radius:999px;margin-bottom:12px;}
.ba-col.before .ba-col-label{background:#f0efe9;color:#888;}
.ba-col.after .ba-col-label{background:rgba(223,196,31,.16);color:#6b5c00;border:1px solid rgba(223,196,31,.4);}
.ba-col p{font-size:.8rem;font-weight:700;color:#555;line-height:1.85;}
.ba-col.after{background:rgba(223,196,31,.05);}
.ba-arrow{display:flex;align-items:center;justify-content:center;padding:0 6px;color:var(--yellow);font-size:1.4rem;font-weight:900;}

/* ===== AIにすべてを任せない（人の確認） ===== */
.ai-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;}
.ai-role-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:28px 26px;}
.ai-role-card.human{border-color:rgba(223,196,31,.4);}
.ai-role-card h3{font-size:1rem;font-weight:900;color:#fff;margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.ai-role-card h3 .ai-role-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(223,196,31,.14);color:var(--yellow);font-size:1rem;flex-shrink:0;}
.ai-role-card ul{display:flex;flex-direction:column;gap:9px;}
.ai-role-card li{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.68);display:flex;align-items:flex-start;gap:9px;line-height:1.6;}
.ai-role-card li::before{content:'–';color:var(--yellow);flex-shrink:0;}

/* ===== FAQ（web.html の見た目を踏襲） ===== */
.faq-list{margin-top:40px;display:flex;flex-direction:column;gap:12px;}
.faq-item{border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;background:#fff;}
.faq-q{padding:18px 22px;font-size:.92rem;font-weight:900;color:#111;display:flex;align-items:flex-start;gap:12px;line-height:1.5;}
.faq-q-mark{font-family:var(--en);font-size:1.1rem;color:var(--yellow);flex-shrink:0;line-height:1.4;}
.faq-a-wrap{padding:0 22px 18px 22px;display:flex;gap:12px;}
.faq-a-mark{font-family:var(--en);font-size:1.1rem;color:rgba(0,0,0,.2);flex-shrink:0;line-height:1.4;}
.faq-a-wrap p{font-size:.8rem;font-weight:700;color:#555;line-height:1.82;}

/* ===== CTAバナー ===== */
.cta-banner{background:rgba(223,196,31,.08);border:2px solid rgba(223,196,31,.3);border-radius:20px;padding:40px;text-align:center;margin-top:56px;}
.cta-banner h2{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:900;color:#fff;margin-bottom:10px;}
.cta-banner p{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.54);margin-bottom:26px;}

/* ===== 関連ページカード（AI導入支援内の回遊） ===== */
.ai-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;}
.ai-related-card{display:block;background:#fff;border:1px solid rgba(0,0,0,.08);border-top:3px solid var(--yellow);border-radius:16px;padding:28px 26px;transition:var(--sc);}
.ai-related-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.1);}
.ai-related-en{font-family:var(--en);font-size:.68rem;letter-spacing:3px;color:var(--yellow);display:block;margin-bottom:8px;}
.ai-related-card h3{font-size:1.05rem;font-weight:900;color:#111;margin-bottom:8px;line-height:1.5;}
.ai-related-card p{font-size:.8rem;font-weight:700;color:#555;line-height:1.8;margin-bottom:14px;}
.ai-related-more{font-size:.8rem;font-weight:900;color:#111;}
.ai-related-more::after{content:' →';color:var(--yellow);}

/* ===== 初期相談 入口カード ===== */
.ai-entry{max-width:640px;margin:0 auto 40px;background:rgba(223,196,31,.08);border:2px solid rgba(223,196,31,.45);border-radius:20px;padding:30px 28px;text-align:center;}
.ai-entry .ai-plan-label{background:var(--yellow);color:#050505;align-self:center;}
.ai-entry-price{font-size:1.15rem;font-weight:900;color:#fff;margin:10px 0 8px;}
.ai-entry-price strong{color:var(--yellow);font-size:1.9rem;letter-spacing:.02em;}
.ai-entry-price small{font-size:.8rem;color:rgba(255,255,255,.55);}
.ai-entry-lead{font-size:.84rem;font-weight:700;color:rgba(255,255,255,.75);line-height:1.85;margin-bottom:16px;}
.ai-entry-list{display:flex;flex-direction:column;gap:8px;margin:0 0 22px;text-align:left;}
.ai-entry-list li{list-style:none;display:flex;align-items:flex-start;gap:9px;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.72);line-height:1.6;}
.ai-entry-list li::before{content:'✓';color:var(--yellow);font-weight:900;flex-shrink:0;}
.ai-entry-note{margin-top:14px;font-size:.74rem;font-weight:700;color:rgba(255,255,255,.5);}
.ai-entry-note a{color:rgba(255,255,255,.7);text-decoration:underline;}

/* ===== ヒーロー内ジャンプ（タップしやすい大きさに） ===== */
.hero-jump{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 18px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:.8rem;font-weight:900;color:rgba(255,255,255,.85);}

/* ===== FAQ 折りたたみ ===== */
details.faq-item > summary{cursor:pointer;list-style:none;}
details.faq-item > summary::-webkit-details-marker{display:none;}
details.faq-item .faq-q::after{content:'＋';margin-left:auto;color:var(--yellow);font-weight:900;flex-shrink:0;}
details[open].faq-item .faq-q::after{content:'−';}

/* ===== 可読性の底上げ（50〜60代のスマホ閲覧向け） ===== */
.ai-plan-unit{color:rgba(255,255,255,.66);}
.ai-plan-note{color:rgba(255,255,255,.6);}
.flow-body p{color:rgba(255,255,255,.7);}
.cta-banner p{color:rgba(255,255,255,.72);}
@media(max-width:768px){
  .ai-case-card p,.flow-body p,.faq-a-wrap p,.ai-plan-card li,.ba-col p{font-size:.875rem;}
  .ai-check-item{padding:13px 15px;}
}
@media(max-width:560px){
  .ai-scope-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .ai-scope-item{padding:12px 10px;font-size:.76rem;gap:8px;}
  .hero-jump{flex:1;}
}

/* ===== セクションイラスト ===== */
.ai-illust{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:14px;overflow:hidden;max-width:760px;margin:0 auto 44px;}
.ai-illust img{width:100%;height:auto;display:block;}

/* ===== 画像プレースホルダー（本番前に実写真へ差し替え） ===== */
.img-placeholder{display:flex;align-items:center;justify-content:center;text-align:center;background:repeating-linear-gradient(45deg,#ececec,#ececec 12px,#f6f6f6 12px,#f6f6f6 24px);border:2px dashed rgba(0,0,0,.15);border-radius:14px;min-height:220px;padding:20px;font-size:.76rem;font-weight:700;color:#888;line-height:1.7;}
.dark .img-placeholder,.mid .img-placeholder{background:repeating-linear-gradient(45deg,#222,#222 12px,#2b2b2b 12px,#2b2b2b 24px);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.45);}

/* ===== レスポンシブ ===== */
@media(max-width:900px){
  .ai-scope-grid{grid-template-columns:repeat(2,1fr);}
  .ai-plan-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .ai-check-grid{grid-template-columns:1fr;}
  .ai-case-grid{grid-template-columns:1fr;}
  .ai-profile{grid-template-columns:1fr;gap:24px;}
  .ai-profile-photo{max-width:300px;}
  .ai-role-grid{grid-template-columns:1fr;}
  .ai-related-grid{grid-template-columns:1fr;}
  .ba-body{grid-template-columns:1fr;}
  .ba-arrow{transform:rotate(90deg);padding:2px 0;}
  .cta-banner{padding:26px 18px;}
}
@media(max-width:560px){
  .ai-scope-grid{grid-template-columns:1fr;}
  .ai-policy{padding:20px;font-size:.86rem;}
  .ai-plan-price{font-size:1.6rem;}
}