:root{
      /* Blue theme */
      --brand:#1E40AF;       /* メインブルー */
      --accent:#00A0D9;      /* アクセント水色 */
      --accent-2:#e6f2ff;    /* 薄い青の背景 */
      --fg:#0b1324;          /* テキスト */
      --muted:#667085;       /* サブテキスト */
      --line:#e5e7eb;        /* 枠線 */
      --bg:#ffffff;
      --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.08);
      --w:1024px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      background:var(--bg);
      color:var(--fg);
      font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",Meiryo,sans-serif;
      -webkit-font-smoothing:antialiased;
      min-height: 100dvh;            /* モバイルでも安定 */
      display: flex;
      flex-direction: column;
    }
    img{max-width:100%;height:auto;display:block}
    a{color:var(--brand);text-decoration:none}
    strong,.strong{font-weight:800}
    .container{width:min(100%,var(--w));margin-inline:auto;padding:0 20px}
    .row{display:flex;gap:20px}

    /* Announcement bar */
    .bar{background:var(--brand);color:#fff}
    .bar .container{display:flex;align-items:center;justify-content:center;padding:8px 20px;gap:12px;font-weight:800}
    .bar .phone{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);padding:6px 10px;border-radius:999px}

    /* Header */
    header{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);z-index:50;border-top: 4px solid #1E40AF; /* お好みで色や太さ調整 */}
    header .inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
    .logo{display:flex;align-items:center;gap:.6rem;font-weight:900;color:var(--brand)}
    .sitetitle{font-size:clamp(20px,4.2vw,34px);line-height:1.2;margin:14px 0;color:#093A95;font-weight:900;padding-right: 20px;}
    .sitesubtitle{font-size: 1em;}
    .nav{display:flex;gap:12px}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      border-radius:12px;
      padding:.85rem 1.1rem;
      border:1px solid transparent
    }
    .btn-primary{
      background:linear-gradient(180deg,var(--accent),#379ef1);
      color:#fff;
      box-shadow:var(--shadow)
    }
    .btn-outline{
      background:#fff;
      border-color:var(--line);
      color:var(--brand)
    }
    
    @media (max-width: 720px){
      .hide-sp { display: none !important; }
    }
    .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:900;color:var(--brand);background:var(--accent-2);border:1px solid #d7eaff;border-radius:999px;padding:.35rem .7rem}
    h1{font-size:clamp(28px,4.8vw,48px);line-height:1.2;margin:14px 0;color:var(--brand);font-weight:900}
    h2{font-size:clamp(22px,3.2vw,32px);line-height:1.25;margin:0 0 12px;color:var(--brand);font-weight:900}
    h3{font-size:18px;margin:.2rem 0 .4rem;color:var(--brand);font-weight:800}
    .lead{color:var(--muted);max-width:60ch;margin-bottom:18px;font-weight:500}

    /* 電話番号画像（ヘッダー内）の高さをボタンと一致させる */
.nav a[href^="tel:"] img {
  height: 50px;          /* 「無料相談を予約」と同じ高さに */
  width: auto;
  display: block;
}

/* ボタンと画像の垂直位置を中央揃えに */
.nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

    /* Hero */
    .hero{background:linear-gradient(180deg,#f7fbff,#fff)}
    .hero .container{
      display:grid;
      grid-template-columns: 1fr 480px;
      justify-content: center; /* 両カラムを中央寄せ */
      gap:24px;
      align-items:center;
      padding:52px 20px
    }
    .hero .container > :first-child {
      justify-self: stretch;
    }
      .hero .panel{
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      aspect-ratio:16/10;
      width:100%;
      max-width:none;
    }
    .hero .panel img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
    }
    .hero .cta{
      display:flex;
      gap:12px;
      flex-wrap:wrap
    }
  

    /* Section shells */
    section{padding:56px 0}
    p.sub{color:var(--muted);margin:0 0 22px}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 2px 10px rgba(0,0,0,.02)}

    /* Problems */
    .problems{background:#fbfdff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .problem-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    .problem{padding:14px 16px;border-radius:12px;background:#e6f2ff;border:1px solid #e6f2ff}

    /* Trust KPIs */
    .metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
    .kpi{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:16px;padding:18px;background:#fff}
    .kpi .num{font-size:32px;font-weight:900;color:var(--brand)}
    .kpi .cap{color:var(--muted);font-weight:600}

    /* KPIカード：縦は上揃え、横は中央のまま */
    .kpi{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  text-align:center;
  gap:6px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  background:#fff;
}
    
    .kpi .num{ margin-top:0; }
    .kpi .cap{ margin-top:6px; }

    /* Flow */
    .flow{background:var(--accent-2)}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
    .step strong{color:var(--brand)}

    /* Experts */
    .experts .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .expert{display:flex;gap:16px;align-items:flex-start}
    .avatar{width:120px;height:120px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:1px solid #d9e7ff;background:#eef5ff}
    .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
    @media (max-width:720px){
      .expert{
        flex-direction:column;
        align-items:center;
        text-align:center
      }
      .expert > div:not(.avatar){
        width: 100%;
        min-width: 0;
      }
      .experts .grid-2{            /* 2枚→1枚の縦積み */
        grid-template-columns: 1fr;
      }
      .expert p.title{
        text-align: center;
      }
      .expert p.bio{
        text-align: left;
      }
      .avatar{                      /* モバイル用に正方形を維持 */
        width: 100px;
        height: 100px;
        flex: 0 0 auto;             /* 自動拡縮させない */
        margin-bottom: 8px;
      }
      .avatar img{
        width: 100%;
        height: 100%;
        object-fit: cover;          /* 枠いっぱいに顔写真を収める */
        border-radius: 50%;
      }
    }

    /* FAQ */
    details{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff}
    details+details{margin-top:12px}
    summary{cursor:pointer;font-weight:900;color:var(--brand)}

    /* Company + Form two columns */
    .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .form{border:1px solid var(--line);border-radius:16px;background:#fff;padding:20px;box-shadow:var(--shadow)}
    .form .field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}

    /* Sticky CTA (mobile) */
    .sticky{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.98);border-top:1px solid var(--line);padding:8px 12px;display:none}
    .sticky .container{display:flex;gap:10px}
    .sticky .btn{flex:1}

    footer{
      background:#0b1220;
      color:#cdd6e6;
      padding:36px 0;
      /*margin-top:24px;*/
      margin-top: auto;   
      text-align:center;
    }
    footer a{
      color:#e6efff;
      font-weight:700
    }
    footer .container {
      display: flex;
      justify-content: center; /* 中央寄せ */
      align-items: center;
    }
    /* Responsive */
    @media (max-width:1100px){
      .hero .container{
        grid-template-columns:1fr
      }
      .problem-list{
        grid-template-columns:1fr
      }
      .grid-3{
        grid-template-columns:1fr 1fr
      }
      .metrics{
        grid-template-columns:1fr 1fr 1fr
      }
      .steps{
        grid-template-columns:1fr 1fr
      }
    }
    @media (max-width:720px){
      .grid-3{
        grid-template-columns:1fr
      }
      .metrics{
        grid-template-columns:1fr
      }
      .steps{
        grid-template-columns:1fr 1fr
      }
      .two{
        grid-template-columns:1fr
      }
      .sticky{
        display:block
      }
    }

    /* header logo image */
    .logo img{ height:38px; width:auto; display:block; }

/* 1カラム用のコンテナは通常のブロック表示 */
#contact .container.one{
  display:block;
}

/* フォームのscriptが生成する中身だけ中央寄せ */
#external-form-embed{
  display:flex;                /* 内側の要素を中央に */
  justify-content:center;
}

/* BowNowが生成する最上位要素を中央＆幅制御 */
#external-form-embed > *{
  width:100%;
  max-width:920px;             /* 好みに合わせて調整 */
  margin-inline:auto !important;
}

/* モバイルは全幅でOK */
@media (max-width:720px){
  #external-form-embed > *{ max-width:100%; }
}
/* BowNowフォームの最下部余白を調整 */
#external-form-embed form {
  margin-bottom: 0 !important;   /* デフォルトの大きな余白を打ち消す */
  padding-bottom: 10px !important; /* 必要なら少しだけ残す */
}

/* 確認・送信ボタン部分の直後の余白も調整 */
#external-form-embed form > div:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#form .row {
  justify-content: center;
  margin-left: 0 !important; /* インラインstyleの margin-left:10px を無効化 */
}

/* 背景帯つき見出し */
.section-title-bar{
  background:#0000cd;        /* ご指定の青 (#0000cd) */
  color:#fff;                /* 白文字 */
  font-size:clamp(18px,2.8vw,24px);
  font-weight:700;
  padding:8px 16px;          /* 上下左右の余白 */
  margin:0 0 22px;
  border-radius:2px;         /* 角を少し丸める（不要なら削除） */
}
.company-grid{
  display:grid;
  grid-template-columns: 1fr 350px; /* 左テキスト + 右画像 */
  gap:24px;
  align-items:start;
}

.company-image img{
  width:100%;
  height:auto;
  border-radius:8px; /* お好みで角丸 */
}
/* Consult block */ 
.consult { 
  background: #fbfdff; 
  border-top: 1px solid var(--line); 
  border-bottom: 1px solid var(--line); 
}

/* ===== Consult cards (2枚構成) ===== */
.consult-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;   /* 2枚を並べる */
  gap:18px;
  align-items:stretch;
}

.consult-card{
  display:flex;
  flex-direction:column;
  height:100%;                      /* 2枚の高さをそろえる */
}

/* モバイルは縦積み */
@media (max-width:1100px){
  .consult-cards{ grid-template-columns:1fr; }
}

/* リストの行間をややタイトに */
.place-list{ margin:8px 0 0; padding-left:1.2em; }
.place-list li{ margin:4px 0; }

/* 地図カード内の背景帯（#e6f2ff） */
.map-wrap{
  background:#e6f2ff;               /* ご指定色 */
  padding:16px;
  border:1px solid #d7eaff;
  border-radius:12px;
  flex:1;                            /* カード内で縦に伸ばす */
  display:flex;
  align-items:center;
  justify-content:center;
}

.map-wrap img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:6px;
}



/* ご相談方法 */
.methods { padding-top: 32px; }
.method { display:flex; flex-direction:column; gap:10px; }
.method .icon{
  width:44px; height:44px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800;
  background:var(--accent-2); border:1px solid #d7eaff; /* 既存配色に合わせる */
}
.method .btn{ margin-top:auto; }  /* ボタンを下に固定して高さ揃え */

/* 運営者情報レイアウトのスマホ最適化 */
@media (max-width: 720px){
  .company-grid{
    grid-template-columns: 1fr;   /* 縦積み（1カラム） */
    gap:16px;
  }
  .company-image{
    justify-self: center;         /* 画像を中央寄せ */
  }
  .company-image img{
    width: auto;                  /* 既存の width:100% を上書き */
    max-width: 220px;             /* はみ出し防止。必要なら数値調整OK */
    height: auto;
    margin-top: 8px;
  }
  header .inner{
    padding:8px 0;
  }
  .bar .container{
    padding:6px 12px;
  }
  /* section共通の56pxが重いので、heroだけ上書き */
  .hero{
    padding:16px 0 32px;
    flex: 1 0 auto;
  }              /* 上16 / 下32 */
  .hero .cta{
    display: none !important;
  }
  .hero .cta .btn{
    width: 100%;         /* 各セルいっぱいに */
    padding: .9rem 0;    /* 高さをそろえて押しやすく */
    text-align: center;
  }
  /* ヒーローブロックの内側余白も軽く＆1カラム */
  .hero .container{
    grid-template-columns: 1fr;
    gap:16px;
    padding:16px 16px;   /* 52px → 16px */
  }
  .hero .eyebrow{
    margin-top:0;
  }
  .hero h1{
    margin:10px 0;
  }                 /* 14px → 10px */
}

/* かなり狭い端末では1列に戻す（任意） */
@media (max-width: 360px){
  .hero .cta{ grid-template-columns: 1fr; }
}