/* ====================================================================
   Home styles (scoped to .content-container) — Desktop-first
   - ヒーロー背景はフル幅（100vw）
   - Services: PC=3列 / Tablet=2列 / Phone=1列
   - Strengths: PC=2列 / Phone=1列（1×4）
   - 下部：バナー型リンク（アイコン右／文字は中央寄せ→右アイコン近く）
   ==================================================================== */

/* ========== Base / Tokens ========== */
.content-container{
  --ink:#1c2333;
  --ink-weak:#6b7280;
  --card:#ffffff;
  --border:#e6e8ee;
  --shadow:0 8px 24px rgba(0,0,0,.12);
  --accent:#0d6efd;
  --accent-weak:#e7f1ff;
}
.content-container,*{ box-sizing:border-box; }
.content-container{ display:flex; flex-direction:column; gap:20px; width:100%; }

/* ========== Hero (Background) ========== */
.content-container .background-section{
  position:relative; display:flex; justify-content:center; align-items:center;
  width:100vw; height:clamp(420px,62vh,650px);
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:url('../images/laptop-820274_1920.jpg') center/cover no-repeat;
}
.content-container .background-section::before{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.35); }

.content-container .security-section{
  position:relative; z-index:1; max-width:960px; margin-inline:auto;
  padding:24px 28px; border-radius:12px;
  background:rgba(255,255,255,.75); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  box-shadow:var(--shadow);
}
.content-container .security-background{ display:none !important; }
.content-container .security-content{ color:var(--ink); }
.content-container .security-title1{ font-size:clamp(22px,2.2vw + 10px,30px); margin:12px 0 8px; text-align:center; font-weight:700; }
.content-container .security-title2{ font-size:clamp(20px,1.8vw + 10px,26px); margin:12px 0 8px; text-align:center; font-weight:700; }
.content-container .security-text{ font-size:clamp(16px,1.2vw + 8px,20px); margin:18px 12px 6px; line-height:1.7; text-align:center; text-indent:1em; }

/* ========== Troubles / Solution ========== */
.content-container .troubles-section{ padding-top:16px; }
.content-container .troubles-title{ text-align:center; font-size:28px; color:#000; font-weight:700; }
.content-container .troubles-title-iphone{ display:none; }

.content-container .hp2-troubles-illustration{ display:block; width:min(980px,92vw); margin:8px auto 0; }

.content-container .trouble-solution-section{
  display:flex; justify-content:center; align-items:center; gap:20px;
  width:min(1080px,95vw); margin:22px auto 6px; padding:20px;
  border:double 5px; border-radius:15px; background:lemonchiffon;
}
.content-container .trouble-solution-text{ margin:0; text-align:center; font-size:38px; font-weight:700; line-height:1.5; color:#0073e6; }
.content-container .trouble-solution-text-iphone{ display:none; }
.content-container .trouble-solution-image{ height:180px; width:auto; }

/* ========== Services (Grid) ========== */
.content-container section[aria-labelledby="consulting-menu"]{ padding:48px 0 32px; }
.content-container .parent1{
  width:min(1080px,92vw); margin:0 auto; padding:0 12px;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2vw, 28px); align-items:stretch;
}
.content-container .parent1 > div{ min-width:0; background:lemonchiffon; border:2px solid rgba(0,0,0,.4); border-radius:12px; padding:20px 18px; box-shadow:0 18px 30px rgba(0,0,0,.35); }
.content-container .service-item{ margin:0 0 10px; font-weight:700; font-size:22px; line-height:1.5; text-align:center; letter-spacing:.02em; }
.content-container .service-description{ margin:0; font-size:16px; line-height:1.9; color:#333; overflow-wrap:anywhere; }

/* ========== Intro（価格見出し帯） ========== */
.content-container .intro-section{ text-align:center; padding:40px; margin:50px; border:double 5px; border-radius:20px; }
.content-container .intro-section .main-title{ font-size:30px; }
.content-container .intro-section .pricing{ font-size:28px; margin-top:20px; }
.content-container .highlight-price{ color:#e60000; }

/* ========== Strengths ========== */
.content-container .strengths-section{ width:min(1200px,96vw); margin:0 auto; }
.content-container .section-title1,
.content-container .section-title2{ font-size:36px; text-align:center; font-weight:700; text-shadow:rgba(123,123,123,.7) 3px 3px; }
.content-container .section-title1{ margin:60px auto 10px; }
.content-container .section-title1-iphone{ display:none; }
.content-container .section-title2{ margin:30px; }

.content-container .all-strength-item{ display:flex; margin-bottom:60px; }
.content-container .strength-items{ display:grid; grid-template-columns:repeat(2, minmax(320px,1fr)); gap:32px; margin:30px auto; align-items:stretch; width:min(1080px, 96%); }
.content-container .strength-item{ width:auto; background:antiquewhite; border:double 5px #000; border-radius:15px; padding:20px; display:flex; flex-direction:column; }
.content-container .strength-title1,
.content-container .strength-title2,
.content-container .strength-title3,
.content-container .strength-title4{ font-size:30px; text-align:center; padding:20px 0; }
.content-container .strength-description{ font-size:20px; line-height:1.6; }

/* visuals */
.content-container .strengths-visual-group1{ display:block; align-items:center; justify-content:center; gap:14px; }
.content-container .expense_shock{ width:300px; margin:0 auto; }
.content-container .strengths-visual-group2{ display:flex; align-items:center; justify-content:center; height:300px; flex-wrap:nowrap; }
.content-container .strengths_image1{ width:160px; display:block; }
.content-container .strengths_image2{ width:40px; opacity:.8; display:block; }
.content-container .strengths_image3{ width:200px; display:block; }

/* ========== Banner-style quick links ========== */
.content-container .home-quick-links{ width:min(960px,96vw); margin:28px auto 48px; display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.content-container .home-quick-link{ position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; text-decoration:none; color:var(--ink); }

/* バナー（上段） */
.content-container .home-quick-link::before{
  content:""; display:block; width:100%; height:140px; border-radius:10px;
  background:#e8f5ff; border:1px solid #dbe8f7; box-shadow:0 10px 22px 0 rgba(12,15,20,.45);
  background-repeat:no-repeat; background-position:right 20px center; background-size:84px 84px;
}
/* アイコン（SVG埋め込み） */
.content-container .home-quick-link-plan::before{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><circle cx="22" cy="22" r="12" fill="%23f7fbff" stroke="%235a7ea8" stroke-width="4"/><rect x="30" y="30" width="14" height="6" rx="3" transform="rotate(45 30 30)" fill="%235a7ea8"/></svg>'); }
.content-container .home-quick-link-contact::before{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><rect x="5" y="10" width="38" height="28" rx="4" fill="%23ffffff" stroke="%232f7de6" stroke-width="3"/><path d="M6 12l18 13L42 12" fill="none" stroke="%232f7de6" stroke-width="3"/></svg>'); }

/* ボタン（下段） */
.content-container .home-quick-link-label{ display:inline-block; min-width:220px; text-align:center; padding:12px 22px; border-radius:8px; background:var(--accent); color:#fff; font-weight:800; letter-spacing:.02em; box-shadow:0 4px 0 #0b5ed7, 0 10px 20px rgba(13,110,253,.25); transition:transform .12s ease, box-shadow .18s ease, background .18s ease; }
.content-container .home-quick-link:hover .home-quick-link-label{ transform:translateY(-1px); box-shadow:0 6px 0 #0a54c5, 0 16px 26px rgba(13,110,253,.28); }

/* —— バナーのみ版（文字をアイコンのすぐ左へ） —— */
.content-container .home-quick-links.home-quick-links--banner-only .home-quick-link{ gap:0; }
.content-container .home-quick-links.home-quick-links--banner-only .home-quick-link-label{ display:none !important; }
.content-container .home-quick-links.home-quick-links--banner-only .home-quick-link-title{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end;
  padding:0 152px 0 0; font-size:28px; font-weight:800; letter-spacing:.02em; color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.65); pointer-events:none; text-align:right;
}
/* ========== Strengths（共通 / PC）========== */
.content-container .strength-title2-iphone{
  display: none;   /* ← PC ではスマホ版タイトルを消す */
}
/* ====== Tablet (≤1100px) ====== */
@media (max-width:1100px){
  .content-container .parent1{ width:min(920px, 92vw); grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(24px, 2vw, 24px); }
  .content-container .trouble-solution-text {
    margin: 0;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    color: #0073e6;
  }
  .content-container .intro-section .pricing {
    font-size: 20px;
    margin-top: 20px;
  }
  .content-container .strengths_image1 {
    width: 150px;
    display: block;
  }
  .content-container .strengths_image2 {
    width: 40px;
    display: block;
  }
  .content-container .strengths_image3 {
    width: 150px;
    display: block;
  }
}

/* ====== Smartphone (≤640px) ====== */
@media (max-width:640px){
  .content-container{ --banner-icon:64px; --banner-gap:12px; --title-extra:6px; }

  .content-container .background-section{ height:450px; }
  .content-container .security-section{ margin:0 20px; }
  .content-container .security-title1,
  .content-container .security-title2{ text-align:center; font-size:16px; }
  .content-container .security-text{ font-size:14px; text-align:justify; text-indent:1em; }

  /* 見出しの差し替え（トラブル見出し） */
  .content-container .troubles-title{ display:none; }
  .content-container .troubles-title-iphone{ display:block; font-size:22px; text-align:center; font-weight:700; line-height:1.6; }

  /* 解決カード */
  .content-container .trouble-solution-section{ display:flex; flex-direction:row; gap:12px; padding:16px; }
  .content-container .trouble-solution-text{ display:none; }
  .content-container .trouble-solution-text-iphone{ display:block; font-size:22px; font-weight:700; line-height:1.6; color:#0073e6; margin:0; }
  .content-container .trouble-solution-image{ height:100px; }

  /* Services: 1列 */
  .content-container .parent1{ grid-template-columns:1fr; }

  /* 弊社が提供するサービス内容（スマホ：H2差し替え） */
  .content-container .section-title1{ display:none !important; }
  .content-container .section-title1-iphone{ display:block; font-size:22px; text-align:center; font-weight:700; }

  /* Strengths: 1×4 */
  /* Strengths: 1×4 & タイトル差し替え */
  .content-container .all-strength-item{ display:block; }
  .content-container .strength-items{ grid-template-columns:1fr; width:92%; gap:20px; }

  .content-container .strengths_image1{ width:120px; }
  .content-container .strengths_image2{ width:40px; }
  .content-container .strengths_image3{ width:120px; }

  /* タイトル切り替え */
  .content-container .strength-title2{
    display: none;              /* PC 用タイトルを隠す */
  }
  .content-container .strength-title2-iphone{
    display: block;             /* スマホ用タイトルを表示 */
    font-size: 28px;
    text-align: center;
    margin: 10px auto;
  }
/* 

  .content-container .all-strength-item{ display:block; }
  .content-container .strength-items{ grid-template-columns:1fr; width:92%; gap:20px; }
  .content-container .strengths_image1{ width:120px; }
  .content-container .strengths_image2{ width:40px; }
  .content-container .strengths_image3{ width:120px; }
  .content-container .strength-title2{ display: none; }
  .content-container .strength-title2-iphone {
    font-size: 28px;
    text-align: center;
    margin: 10px auto;
  } */

  /* Quick links: 1列 & バナーのみ配置調整 */
  .content-container .home-quick-links{ width:min(640px, 94vw); margin:16px auto 28px; grid-template-columns:1fr; gap:14px; }
  .content-container .home-quick-links.home-quick-links--banner-only .home-quick-link{ position:relative; gap:0; align-items:stretch; text-decoration:none; }
  .content-container .home-quick-link::before{ height:96px; border-radius:12px; background-size:var(--banner-icon) var(--banner-icon); background-position:right var(--banner-gap) center; box-shadow:0 8px 18px rgba(0,0,0,.12); }
  .content-container .home-quick-links.home-quick-links--banner-only .home-quick-link-title{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-left:18px; padding-right:calc(var(--banner-icon) + var(--banner-gap) + var(--title-extra)); font-size:20px; font-weight:800; color:var(--ink); pointer-events:none; }
  .content-container .home-quick-links.home-quick-links--banner-only .home-quick-link-label{ display:none !important; }
}