:root{
  /* Brand color */
  --bs-primary: #47C1BB;
  --bs-primary-rgb: 71,193,187;

  /* Optional tuning */
  --asa-text: #123;
  --asa-accent-weak: rgba(71, 193, 187, .14);
}

/* Background & base */
html, body{
  margin:0;
  padding:0;
  color: var(--asa-text);
  background: linear-gradient(180deg, var(--asa-accent-weak), #fff 40%);
  font-family: system-ui, -apple-system, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Yu Gothic",
    "Meiryo", sans-serif;
}

/* Slight blur effect for sticky header */
.backdrop-blur{
  backdrop-filter: blur(10px);
}

/* ヘッダーロゴ（dbsupport525.jpg 用） */
.brand-logo {
  width: 510px;      /* ★ 指定どおり 525px */
  max-width: 100%;   /* ★ スマホで画面からはみ出さない */
  height: auto;
  display: block;
}

.brand-title{
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

/* Hero image: 全体を見せる（拡大しない） */
.hero-ratio{
  position: relative;
  width: 100%;
  aspect-ratio: 85 / 20;   /* 850x200 と同じ比率（4.25） */
  background: #fff;        /* 余白が出た時の背景 */
}

.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;     /* ★ここが重要：拡大して埋めない */
  object-position: center;
}

/* =========================================
   Hero以下・Main・Footer の幅を 1000px に固定
   ※ ヘッダー（navbar）の container には影響しない
========================================= */
/* Hero セクションの container */
section.py-2 .container,
section.py-lg-3 .container {
  max-width: 1000px;
}

/* Main コンテンツの container */
main > .container {
  max-width: 1000px;
}

footer > .container {
  max-width: 1000px;
}

/* On small screens: taller crop so text doesn't become tiny */
@media (max-width: 768px){
  .hero-ratio{ aspect-ratio: 4 / 3; }
  .hero-img{ object-position: left center; } /* text on left side in your image */
}

/* Content typography */
.content h2{
  margin-top: 0.8rem;	/* margin-top: 1.6rem; */
  padding: .6rem .9rem;
  font-size: 1.25rem;
  font-weight: 700;
  border-left: 6px solid var(--bs-primary);
  background: rgba(71, 193, 187, .14);
  border-radius: 14px;
}
.content h3{
  margin-top: 0.6rem;	/* margin-top: 1.2rem; */
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f6f6a;
}
.content p{ line-height: 1.85; }
.content ul, .content ol{ line-height: 1.9; }

/* Nav pills */
.navbar .nav-link{
  border-radius: 999px;
  padding: .45rem .7rem;
}
.navbar .nav-link.active{
  background: rgba(71, 193, 187, .14);
  border: 1px solid rgba(71, 193, 187, .35);
}

/* Safety net */
img{ max-width:100%; height:auto; }

/* ============================
   共通 見出しデザイン（H2 / H3）
   ブランドカラー：#47C1BB
============================ */

/* H2 見出し */
h2 {
  margin: 28px 0 18px 0;
  padding: 10px 14px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #0a5f5b;                 /* 文字は少し濃い目 */
  background-color: rgba(71,193,187,0.18); /* #47C1BB を薄く */
  border-left: 8px solid #47C1BB;
  border-radius: 6px;
  letter-spacing: 1px;
}

/* H3 見出し */
h3 {
  margin: 22px 0 12px 10px;
  padding: 6px 0 6px 14px;
  font-size: 1.15rem;
  font-weight: bold;
  color: #0a6f6a;
  border-left: 6px solid #47C1BB;
}

/* スマホ用 微調整 */
@media (max-width: 575px) {
  h2 {
    font-size: 1.2rem;
    padding: 8px 12px;
  }
  h3 {
    font-size: 1.05rem;
    margin-left: 5px;
  }
}

/* スマホ：ヒーロー画像の上下余白をなくす ---2026/01/15 調整中--- */
@media (max-width: 575px) {
  .hero-ratio {
    aspect-ratio: auto;   /* ★固定比率を解除 */
  }

  .hero-img {
    position: static;     /* absolute を解除 */
    width: 100%;
    height: auto;         /* 画像の実サイズに合わせる */
    object-fit: unset;
  }
}

/* ============================
   Hero 背景画像（1000px幅）
   sub-img1 〜 sub-img10
   index.html（分割レイアウト）の左カードにも対応
============================ */
.hero-bg{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 1 〜 10 個別指定 */
.hero-1  { background-image: url("image/sub-img1.jpg"); }
.hero-2  { background-image: url("image/sub-img2.jpg"); }
.hero-3  { background-image: url("image/sub-img3.jpg"); }
.hero-4  { background-image: url("image/sub-img4.jpg"); }
.hero-5  { background-image: url("image/sub-img5.jpg"); }
.hero-6  { background-image: url("image/sub-img6.jpg"); }
.hero-7  { background-image: url("image/sub-img7.jpg"); }
.hero-8  { background-image: url("image/sub-img8.jpg"); }
.hero-9  { background-image: url("image/sub-img9.jpg"); }
.hero-10 { background-image: url("image/sub-img10.jpg"); }

/* 背景画像方式のとき、hero-ratio の白背景を透明にする */
.hero-bg .hero-ratio{
  background: transparent;
}

/* Access 無料相談ボタン（アイコン付き） */
.btn-access-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: #A4373A;
  color: #fff;
  font-size: 1.20rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(164,55,58,0.35);
  transition: all .2s ease;
}

.btn-access-icon:hover {
  background: #8E2F32;
  color: #fff;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #A4373A;
  font-weight: 900;
}

/* Index.html --- What’s New 本文：4文字分 字下げ */
.content .subsection > p {
  padding-left: 2em;       /* 全角4文字相当 */
}

/* pricing.html 年間サポート料金 表（色分け） */
.support-price-table th{
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.support-price-table td{
  line-height: 1.6;
}

/* 行ごとの色（小規模／中規模を強調） */
.support-price-table .row-small  > * { background: rgba(164, 55, 58, 0.10); } /* 赤茶系 */
.support-price-table .row-medium > * { background: rgba(255, 193, 7, 0.14); } /* 落ち着いた黄 */
.support-price-table .row-large  > * { background: rgba(13, 110, 253, 0.08); } /* 薄い青 */

/* 注釈 */
.support-note{
  margin-top: 10px;
  font-size: 0.92rem;
  color: #555;
}

/* 年間サポート料金 表：列幅調整 */
.support-price-table {
  table-layout: fixed;   /* 列幅指定を有効にする */
  width: 100%;
}

/* 列ごとの幅指定 */
.support-price-table th:nth-child(1),
.support-price-table td:nth-child(1) {
  width: 18%;            /* 区分：広め */
}

.support-price-table th:nth-child(2),
.support-price-table td:nth-child(2) {
  width: 12%;            /* 月額 */
}

.support-price-table th:nth-child(3),
.support-price-table td:nth-child(3) {
  width: 12%;            /* 拠点・LAN環境（←月額と同じ） */
}

.support-price-table th:nth-child(4),
.support-price-table td:nth-child(4) {
  width: 18%;            /* システムの種類 */
}

.support-price-table th:nth-child(5),
.support-price-table td:nth-child(5) {
  width: 20%;            /* サポート方法（説明多めなので広め） */

.support-price-table th:nth-child(6),
.support-price-table td:nth-child(6) {
  width: 10%;            /* 遠隔保守サービス */
}

.support-price-table th:nth-child(7),
.support-price-table td:nth-child(7) {
  width: 10%;            /* 電話・メール対応 */
}