/* Breadcrumb
   -------------------------------- */
.breadcrumb {
  background: #fff;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

.breadcrumb .container,
.breadcrumb .wrap {
  /* もし全体で .container を使っているなら nav を .container でラップしてもOK */
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb li a {
  color: #0060c0;
  text-decoration: none;
}

.breadcrumb li a:hover,
.breadcrumb li a:focus {
  text-decoration: underline;
}

/* 区切り（>）を CSS で生成 */
.breadcrumb li + li::before {
  content: ">";
  color: #999;
  margin: 0 6px 0 2px;
}

/* 現在ページ */
.breadcrumb [aria-current="page"] span {
  color: #222;
  font-weight: 600;
  /* リンクではないと分かるように */
  text-decoration: none;
  cursor: default;
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  /* 右寄せ */
  justify-content: flex-end;
}

/* ===== base.css 相当（簡易） ===== */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: #0b1a2a; font-family: monospace, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif; line-height: 2.0; background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1200px; padding: 0 16px; margin: 0 auto; }
.sec-title { justify-content: center; font-size: 22px; margin: 0 0 16px; font-weight: 800; display: flex; align-items: baseline; gap: 12px;}
.sec-title2 { justify-content: center; font-size: 22px; margin: 0 0 16px; font-weight: 800; display: flex; align-items: baseline; gap: 12px; color: #6495ed;}
.sec-title span { font-size: 14px; letter-spacing: 0.08em; color: #004077; }
.sec-title2 span { font-size: 14px; letter-spacing: 0.08em; color: #004077; } 
}

/* まずは非表示 */
.br-sp {
  display: none;
}

/* スマホ表示時のみ改行として表示 */
@media (max-width: 767px) {
  .br-sp {
    display: block;       /* ブロックにして改行効果を出す */
    height: 0;            /* 余計な高さを出さない */
    margin: 0;
  }
}

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 8px; font-weight: 700; transition: transform .06s ease, background .2s ease, color .2s ease; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: #727171; color: #fff; }/* 通常ボタン */
.btn--primary:hover { background: #949593; }
.btn--primary { padding: 8px 16px !important; }
.btn--primary2 { background: #4D4D4F; color: #fff; }/* Youtubeボタン */
.btn--primary2:hover { background: #77787B; }
.hero__cta a.btn.btn--primary2 > img {  width: 33px;  height: auto;}
.btn--primary3 { background: #0037C0; color: #fff; }/* 資料請求ボタン */
.btn--primary3:hover { background: #0067C0 ; }
.hero__cta a.btn.btn--primary3 > img {  width: 33px;  height: auto;}
.btn--primary4 { background: #00985C ; color: #fff; }/* お問い合わせボタン */
.btn--primary4:hover { background: #00B16B; }
.hero__cta a.btn.btn--primary4 > img {  width: 33px;  height: auto;}
.btn--ghost { border: 2px solid #fff; color: #fff; }
.btn--lg { padding: 16px 28px; font-size: 18px; }


/* ===== ナビゲーションメニュー ===== */
/* ベース */
:root {
  --bg: #E1F3FF;
  --text: #1a1a1a;
  --muted: #6b7280;
  --brand: #2563eb;
  --nav-bg: #ffffffcc; /* 半透明でヒーロー上でも読める */
  --border: #e5e7eb;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Sans", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

/* ヒーロー（TOP画像） */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;           /* 画像比率を保ってレイアウト安定 */
  max-height: 40vh;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* 画像切り抜きで全幅に合わせる */
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0.05));
  color: #fff;
  pointer-events: none;
}

.site-title {
  margin: 0 0 0.25rem 0;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
}

.site-subtitle {
  margin: 0;
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  color: #f1f5f9;
}

/* ナビゲーション */
.main-nav {
  position: sticky;               /* スクロールしても表示 */
  top: 0;
  z-index: 100;
  background: #F4FBFE;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 768px) {
  .main-nav {
    display: none !important;
  }
}

/* 横スクロール対応（10個以上も崩さない） */
.menu {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0.5rem clamp(0.75rem, 3vw, 2rem);
  list-style: none;
  overflow-x: auto;               /* 横スクロール */
  overscroll-behavior-x: contain;
  scrollbar-width: thin;          /* Firefox */
}

/* スクロールバー（WebKit） */
.menu::-webkit-scrollbar {
  height: 8px;
}
.menu::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 999px;
}
.menu::-webkit-scrollbar-track {
  background: transparent;
}

.menu-item {
  flex: 0 0 auto;                 /* 折り返さずチップ状に展開 */
}

.menu a {
  display: inline-block;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;            /* 折り返し防止 */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.menu a:hover,
.menu a:focus-visible {
  background: #BFC5CA;
  outline: none;
}

.menu a[aria-current="page"],
.menu a.active {
  background: var(--brand);
  color: #fff;
}

/* コンテンツ */
.content {
  padding: 2rem clamp(0.75rem, 3vw, 2rem);
}

/* ブレークポイントでの調整 */
@media (min-width: 768px) {
  /* PCでは中央寄せ＋等間隔 */
  .menu {
    justify-content: center;
    gap: 0.5rem;
    overflow-x: visible;          /* PCはスクロール不要なら非表示に */
  }
  .menu a {
    padding: 0.7rem 1rem;
  }
}

/* アクセシビリティ（キーボードフォーカス） */
.menu a:focus-visible {
  box-shadow: 0 0 0 3px rgba(37,99,235,0.35);
  border-radius: 999px;
}


/* ===== header ===== */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.96); backdrop-filter: saturate(1.2) blur(6px); border-bottom: 1px solid rgba(0,0,0,0.06); }
.site-header__brand img { height: 25px; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.site-nav__toggle { display: none; border: 1px solid #ccc; padding: 8px 12px; border-radius: 6px; background: #fff; }
.site-nav__list { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 840px) {
  .site-nav__toggle { display: inline-flex; }
  .site-nav__list { position: absolute; right: 16px; top: 64px; flex-direction: column; background: #fff; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; display: none; }
  .site-nav__list.is-open { display: flex; }
}

/* ベース */
.site-nav__list {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

/* CTAは右寄せ＆視認性を上げる */
.site-nav__cta { margin-left: 8px; }
.site-nav__list .site-nav__cta .btn { padding: 8px 12px; white-space: nowrap; }

/* ドロップダウン */
.has-sub { position: relative; }
.site-nav__parent {
  border: none; background: none; cursor: pointer;
  padding: 8px 0; font: inherit;
}
.site-nav__sub {
  display: none;
  position: absolute; left: 0; top: calc(100% + 8px);
  min-width: 220px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  list-style: none; margin: 0; padding: 8px;
}
.has-sub:hover .site-nav__sub,
.has-sub:focus-within .site-nav__sub { display: block; }
.site-nav__sub li a {
  display: block; padding: 8px 10px; border-radius: 6px;
}
.site-nav__sub li a:hover { background: #f5f7fb; }

/* スマホは既存のトグル＋縦並び */
@media (max-width: 840px) {
  .site-nav__list { position: absolute; right: 16px; top: 64px; flex-direction: column; background: #fff; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; display: none; width: min(88vw, 360px); }
  .site-nav__list.is-open { display: flex; }
  .has-sub { width: 100%; }
  .site-nav__sub { position: static; display: none; box-shadow: none; border: none; padding-left: 8px; }
  .has-sub.is-open .site-nav__sub { display: block; }
  .site-nav__parent { width: 100%; text-align: left; padding: 8px; border-radius: 6px; }
  .site-nav__parent[aria-expanded="true"] { background: #f5f7fb; }
}

/* ===== hero ===== */
.hero { position: relative; width: 100%; height: 30vh; min-height: 420px; max-height: 860px; display: grid; place-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background: url("/itam/header_top.jpg") center/cover no-repeat; transform: scale(1.02); }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.hero__inner { position: relative; z-index: 1; text-align: left; color: #fff; padding-left: 0px; transform: translateX(40px); /* 右へ40px、値で微調整 */ text-align: center;}
.hero__title { font-size: clamp(28px, 4.0vw, 52px); line-height: 1.1; margin: 0 0 12px; font-weight: 900; letter-spacing: .02em;}
.hero__lead { font-size: clamp(14px, 1.4vw, 30px);  opacity: .95; margin: 0 0 20px; text:aign:center;}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }


/* スマホで丸アイコンのみ表示 */
@media (max-width: 767.98px) {
  .hero__cta {
    display: flex;
    gap: 14px;
    align-items: center;
  }

  .hero__cta .btn {
    width: 56px;
    height: 56px;
    padding: 0;                  /* 外側余白をゼロに */
    border-radius: 50%;          /* 丸形 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;                      /* テキストを消すので隙間不要 */
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
  }

  /* テキストは視覚的に非表示。ただしスクリーンリーダーのためにDOMは残す */
  .hero__cta .btn .btn__label {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }

  /* アイコンは丸内にフィット */
  .hero__cta .btn__icon {
    width: 28px;
    height: 28px;
  }

  /* それぞれのブランド色の背景はPCと同じクラスで維持される */
  .btn--primary2 { background: #4D4D4F; }
  .btn--primary3 { background: #0037C0; }
  .btn--primary4 { background: #00985C; }

  /* ホバー/タップ時の軽いフィードバック（モバイル適用） */
  .hero__cta .btn:active {
    transform: translateY(1px) scale(0.98);
  }
}

/* PCでは従来どおり横並びテキスト+アイコン */
@media (min-width: 768px) {
  .hero__cta .btn {
    padding: 16px 16px;           /* 既存の設定と揃える */
    border-radius: 8px;
    gap: 8px;
  }
}

/* ===== logo (追加) ===== */
.hero__logo {
  display: flex;
  align-items: center;
  margin-bottom: clamp(5px, 1.5vw, 20px);
}
.hero__logo img {
  height: clamp(36px, 8vw, 72px);  /* 画面に応じて自動スケール */
  width: auto;
  align: center;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); /* 暗背景でも視認性UP */
  /* ロゴが白系で背景が明るい場合は下記で微調整：
  mix-blend-mode: normal;
  */
}
@media (min-width: 960px) {
  /* 大画面でタイトルと左揃えを合わせる */
  .hero__inner { text-align: center; }
  .hero__logo { justify-content: center; }
}

/* ロゴのサイズを拡大（モバイル〜PCで伸縮） */
.hero__logo img {
  height: clamp(56px, 12vw, 160px); /* ここを大きめにする */
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

/* PC幅でさらに少し大きくしたい場合 */
@media (min-width: 992px) {
  .hero__logo img { height: clamp(72px, 10vw, 140px); }
}

@media (min-width: 768px) {
  .hero__cta a:nth-child(1) { margin-left: -100px; } /* Youtubeを左へ */
  .hero__cta a:nth-child(2) { margin-left: 500px; } /* 資料DLを右へ */
  .hero__cta a:nth-child(3) { margin-left: 20px;  } /* お問い合わせを右へ */
}


/* スマホ（～767.98px）ではロゴ＋ボタン全体を中央寄せ */
@media (max-width: 767.98px) {
  /* ヒーロー内のコンテンツを中央に */
  .hero { 
    display: grid; 
    place-items: center; 
  }

 .hero__inner {
    padding-left: 0;       /* 左余白を消す */
    transform: none;       /* 横方向のズレを無効化 */
    text-align: center;    /* テキスト系を中央寄せ */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;        /* 念のため中央に */
  }

  /* ロゴを中央寄せ */
  .hero__logo {
    justify-content: center;
  }

  /* ボタンの並びを中央寄せ */
  .hero__cta {
    justify-content: center;
  }
}



/* ===== hero-FIRST ===== */
.hero-first { position: relative; width: 100%; height: 30vh; min-height: 280px; max-height: 860px; display: grid; place-items: center; overflow: hidden; }
.hero-first__bg { position: absolute; inset: 0; background: url("/itam/header_first.jpg") center/cover no-repeat; transform: scale(1.02); }
.hero-first::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.hero-first__inner { position: relative; z-index: 1; text-align: center; color: #fff; }
.hero-first__title { font-size: clamp(28px, 4.0vw, 52px); line-height: 1.1; margin:0 0 12px; font-weight: 900; letter-spacing: .02em; }
.hero-first__lead { font-size: clamp(14px, 1.4vw, 18px); opacity: .95; margin: 0 0 20px; }
.hero-first__cta { display: flex; gap: 12px; flex-wrap: wrap; }


/* タブレット以上のみタイトルを下へ移動（スマホは触らない） */
@media (min-width: 768px) {
  .hero-first__title {
    transform: translateY(50px);
  }
}

@media (min-width: 768px) {
  .hero-common__cta a:nth-child(1) { margin-left: -100px; margin-top:92px; }
  .hero-common__cta a:nth-child(2) { margin-left: 500px;  margin-top:92px; }
  .hero-common__cta a:nth-child(3) { margin-left: 20px;   margin-top:92px; }
}
/* ===== logo (TOP以外の各ページ共通) ===== */
.hero-common__logo {
  display: flex;
  align-items: center;
  margin-bottom: clamp(5px, 1.5vw, 20px);
}
.hero-common__logo img {
  height: clamp(36px, 8vw, 72px);  /* 画面に応じて自動スケール */
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); /* 暗背景でも視認性UP */
  /* ロゴが白系で背景が明るい場合は下記で微調整：
  mix-blend-mode: normal;
  */
}
@media (min-width: 960px) {
  /* 大画面でタイトルと左揃えを合わせる */
  .hero-common__inner { text-align: left; }
  .hero-common__logo { justify-content: flex-start; }
}

/* 左上固定 */
.hero-common__logo--top-left {
  position: absolute;
  top: 16px;     /* 上からの距離（赤枠に合わせて調整：例 16〜32px） */
  left: 30px;    /* 左からの距離（赤枠に合わせて調整） */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 2;    /* オーバーレイより前に出す */
}

/* ロゴサイズ（左上は小さめ） */
.hero-common__logo--top-left img {
  height: clamp(24px, 3.5vw, 56px); /* 端末幅に応じて可変。大きさは任意に調整 */
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

@media (min-width: 992px) {
  .hero-common__logo--top-left img {
    height: clamp(28px, 3vw, 64px);
  }
}

@media (min-width: 768px) {
  .hero-common__cta a:nth-child(1) { margin-left: -100px; margin-top:80px; } /* Youtubeを左へ */
  .hero-common__cta a:nth-child(2) { margin-left: 500px; margin-top:80px; } /* 資料DLを右へ */
  .hero-common__cta a:nth-child(3) { margin-left: 20px; margin-top:80px; } /* お問い合わせを右へ */
}


/* ===== スマホでのアイコンを小さくする ===== */
/* アイコン共通サイズ（PC/スマホ） */
.hero-common__cta .btn__icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* スマホで丸アイコンのみ表示 */
@media (max-width: 767.98px) {
  .hero-common__cta {
    display: flex;
    gap: 14px;
    align-items: center;
  }

  .hero-common__cta .btn {
    width: 56px;
    height: 56px;
    padding: 0;                  /* 外側余白をゼロに */
    border-radius: 50%;          /* 丸形 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;                      /* テキストを消すので隙間不要 */
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
  }

  /* テキストは視覚的に非表示。ただしスクリーンリーダーのためにDOMは残す */
  .hero-common__cta .btn .btn__label {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }

  /* アイコンは丸内にフィット */
  .hero-common__cta .btn__icon {
    width: 28px;
    height: 28px;
  }

  /* それぞれのブランド色の背景はPCと同じクラスで維持される */
  .btn--primary2 { background: #4D4D4F; }
  .btn--primary3 { background: #0037C0; }
  .btn--primary4 { background: #00985C; }

  /* ホバー/タップ時の軽いフィードバック（モバイル適用） */
  .hero-common__cta .btn:active {
    transform: translateY(1px) scale(0.98);
  }
}

/* PCでは従来どおり横並びテキスト+アイコン */
@media (min-width: 768px) {
  .hero-common__cta .btn {
    padding: 16px 16px;           /* 既存の設定と揃える */
    border-radius: 8px;
    gap: 8px;
  }
}



/* ===== hero-features ===== */
.hero-features { position: relative; width: 100%; height: 30vh; min-height: 280px; max-height: 860px; display: grid; place-items: center; overflow: hidden; }
.hero-features__bg { position: absolute; inset: 0; background: url("/itam/header_features.jpg") center/cover no-repeat; transform: scale(1.02); }
.hero-features::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.hero-features__inner { position: relative; z-index: 1; text-align: center; color: #fff; }
.hero-features__title { font-size: clamp(28px, 4.0vw, 52px); line-height: 1.1; margin: 0 0 12px; font-weight: 900; letter-spacing: .02em; }
.hero-features__lead { font-size: clamp(14px, 1.4vw, 18px); opacity: .95; margin: 0 0 20px; }
.hero-features__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* タブレット以上のみタイトルを下へ移動（スマホは触らない） */
@media (min-width: 768px) {
  .hero-features__title {
    transform: translateY(50px);
  }
}

@media (min-width: 768px) {
  .hero-common__cta a:nth-child(1) { margin-left: -100px; margin-top:92px; }
  .hero-common__cta a:nth-child(2) { margin-left: 500px;  margin-top:92px; }
  .hero-common__cta a:nth-child(3) { margin-left: 20px;   margin-top:92px; }
}

/* ===== hero-function ===== */
.hero-function { position: relative; width: 100%; height: 30vh; min-height: 280px; max-height: 860px; display: grid; place-items: center; overflow: hidden; }
.hero-function__bg { position: absolute; inset: 0; background: url("/itam/header_function.jpeg") center/cover no-repeat; transform: scale(1.02); }
.hero-function::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.hero-function__inner { position: relative; z-index: 1; text-align: center; color: #fff; }
.hero-function__title { font-size: clamp(28px, 4.0vw, 52px); line-height: 1.1; margin: 0 0 12px; font-weight: 900; letter-spacing: .02em; }
.hero-function__lead { font-size: clamp(14px, 1.4vw, 18px); opacity: .95; margin: 0 0 20px; }
.hero-function__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* タブレット以上のみタイトルを下へ移動（スマホは触らない） */
@media (min-width: 768px) {
  .hero-function__title {
    transform: translateY(50px);
  }
}

@media (min-width: 768px) {
  .hero-common__cta a:nth-child(1) { margin-left: -100px; margin-top:92px; }
  .hero-common__cta a:nth-child(2) { margin-left: 500px;  margin-top:92px; }
  .hero-common__cta a:nth-child(3) { margin-left: 20px;   margin-top:92px; }
}

/* ===== hero-service ===== */
.hero-service { position: relative; width: 100%; height: 30vh; min-height: 280px; max-height: 860px; display: grid; place-items: center; overflow: hidden; }
.hero-service__bg { position: absolute; inset: 0; background: url("/itam/header_service.jpg") center/cover no-repeat; transform: scale(1.02); }
.hero-service::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.hero-service__inner { position: relative; z-index: 1; text-align: center; color: #fff; }
.hero-service__title { font-size: clamp(28px, 4.0vw, 52px); line-height: 1.1; margin: 0 0 12px; font-weight: 900; letter-spacing: .02em; }
.hero-service__lead { font-size: clamp(14px, 1.4vw, 18px); opacity: .95; margin: 0 0 20px; }
.hero-service__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* タブレット以上のみタイトルを下へ移動（スマホは触らない） */
@media (min-width: 768px) {
  .hero-service__title {
    transform: translateY(50px);
  }
}

@media (min-width: 768px) {
  .hero-common__cta a:nth-child(1) { margin-left: -100px; margin-top:92px; }
  .hero-common__cta a:nth-child(2) { margin-left: 500px;  margin-top:92px; }
  .hero-common__cta a:nth-child(3) { margin-left: 20px;   margin-top:92px; }
}

/* ===== hero-price ===== */
.hero-price { position: relative; width: 100%; height: 30vh; min-height: 280px; max-height: 860px; display: grid; place-items: center; overflow: hidden; }
.hero-price__bg { position: absolute; inset: 0; background: url("/itam/header_price.jpg") center/cover no-repeat; transform: scale(1.02); }
.hero-price::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.hero-price__inner { position: relative; z-index: 1; text-align: center; color: #fff; }
.hero-price__title { font-size: clamp(28px, 4.0vw, 52px); line-height: 1.1; margin: 0 0 12px; font-weight: 900; letter-spacing: .02em; }
.hero-price__lead { font-size: clamp(14px, 1.4vw, 18px); opacity: .95; margin: 0 0 20px; }
.hero-price__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* タブレット以上のみタイトルを下へ移動（スマホは触らない） */
@media (min-width: 768px) {
  .hero-price__title {
    transform: translateY(50px);
  }
}

@media (min-width: 768px) {
  .hero-common__cta a:nth-child(1) { margin-left: -100px; margin-top:92px; }
  .hero-common__cta a:nth-child(2) { margin-left: 500px;  margin-top:92px; }
  .hero-common__cta a:nth-child(3) { margin-left: 20px;   margin-top:92px; }
}

/* ===== hero-usecase ===== */
.hero-usecase { position: relative; width: 100%; height: 30vh; min-height: 280px; max-height: 860px; display: grid; place-items: center; overflow: hidden; }
.hero-usecase__bg { position: absolute; inset: 0; background: url("/itam/header_usecase.jpg") center/cover no-repeat; transform: scale(1.02); }
.hero-usecase::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.hero-usecase__inner { position: relative; z-index: 1; text-align: center; color: #fff; }
.hero-usecase__title { font-size: clamp(28px, 4.0vw, 52px); line-height: 1.1; margin: 0 0 12px; font-weight: 900; letter-spacing: .02em; }
.hero-usecase__lead { font-size: clamp(14px, 1.4vw, 18px); opacity: .95; margin: 0 0 20px; }
.hero-usecase__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* タブレット以上のみタイトルを下へ移動（スマホは触らない） */
@media (min-width: 768px) {
  .hero-usecase__title {
    transform: translateY(50px);
  }
}

@media (min-width: 768px) {
  .hero-common__cta a:nth-child(1) { margin-left: -100px; margin-top:92px; }
  .hero-common__cta a:nth-child(2) { margin-left: 500px;  margin-top:92px; }
  .hero-common__cta a:nth-child(3) { margin-left: 20px;   margin-top:92px; }
}


/* ===== hero-column ===== */
.hero-column { position: relative; width: 100%; height: 30vh; min-height: 280px; max-height: 860px; display: grid; place-items: center; overflow: hidden; }
.hero-column__bg { position: absolute; inset: 0; background: url("/itam/header_column.jpg") center/cover no-repeat; transform: scale(1.02); }
.hero-column::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.hero-column__inner { position: relative; z-index: 1; text-align: center; color: #fff; }
.hero-column__title { font-size: clamp(28px, 4.0vw, 52px); line-height: 1.1; margin: 0 0 12px; font-weight: 900; letter-spacing: .02em; }
.hero-column__lead { font-size: clamp(14px, 1.4vw, 18px); opacity: .95; margin: 0 0 20px; }
.hero-column__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* タブレット以上のみタイトルを下へ移動（スマホは触らない） */
@media (min-width: 768px) {
  .hero-column__title {
    transform: translateY(50px);
  }
}

@media (min-width: 768px) {
  .hero-common__cta a:nth-child(1) { margin-left: -100px; margin-top:92px; }
  .hero-common__cta a:nth-child(2) { margin-left: 500px;  margin-top:92px; }
  .hero-common__cta a:nth-child(3) { margin-left: 20px;   margin-top:92px; }
}

/* ===== hero-faq ===== */
.hero-faq { position: relative; width: 100%; height: 30vh; min-height: 280px; max-height: 860px; display: grid; place-items: center; overflow: hidden; }
.hero-faq__bg { position: absolute; inset: 0; background: url("/itam/header_faq.jpg") center/cover no-repeat; transform: scale(1.02); }
.hero-faq::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.hero-faq__inner { position: relative; z-index: 1; text-align: center; color: #fff; }
.hero-faq__title { font-size: clamp(28px, 4.0vw, 52px); line-height: 1.1; margin: 0 0 12px; font-weight: 900; letter-spacing: .02em; }
.hero-faq__lead { font-size: clamp(14px, 1.4vw, 18px); opacity: .95; margin: 0 0 20px; }
.hero-faq__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* タブレット以上のみタイトルを下へ移動（スマホは触らない） */
@media (min-width: 768px) {
  .hero-faq__title {
    transform: translateY(50px);
  }
}

@media (min-width: 768px) {
  .hero-common__cta a:nth-child(1) { margin-left: -100px; margin-top:92px; }
  .hero-common__cta a:nth-child(2) { margin-left: 500px;  margin-top:92px; }
  .hero-common__cta a:nth-child(3) { margin-left: 20px;   margin-top:92px; }
}

/* ===== hero-faq2 ===== */
.hero-faq2 { position: relative; width: 100%; height: 30vh; min-height: 280px; max-height: 860px; display: grid; place-items: center; overflow: hidden; }
.hero-faq2__bg { position: absolute; inset: 0; background: url("/itam/header_faq2.jpg") center/cover no-repeat; transform: scale(1.02); }
.hero-faq2::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.hero-faq2__inner { position: relative; z-index: 1; text-align: center; color: #fff; }
.hero-faq2__title { font-size: clamp(28px, 4.0vw, 52px); line-height: 1.1; margin: 0 0 12px; font-weight: 900; letter-spacing: .02em; }
.hero-faq2__lead { font-size: clamp(14px, 1.4vw, 18px); opacity: .95; margin: 0 0 20px; }
.hero-faq2__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* タブレット以上のみタイトルを下へ移動（スマホは触らない） */
@media (min-width: 768px) {
  .hero-faq2__title {
    transform: translateY(50px);
  }
}

@media (min-width: 768px) {
  .hero-common__cta a:nth-child(1) { margin-left: -100px; margin-top:92px; }
  .hero-common__cta a:nth-child(2) { margin-left: 500px;  margin-top:92px; }
  .hero-common__cta a:nth-child(3) { margin-left: 20px;   margin-top:92px; }
}

/* ===== column / carousel ===== */
.column-section { background: #fff; padding: 56px 0; }
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; will-change: transform; transition: transform 400ms ease; }
.card { flex: 0 0 calc((100% - 48px)/3); background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.card__media { position: relative; width: 100%; padding-top: 56.25%; background: #e5e7eb; overflow: hidden; margin: 0; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.card__link:hover .card__media img { transform: scale(1.03); }
.card__body { padding: 16px; }
.card__title { margin: 0 0 6px; font-weight: 800; font-size: 16px; line-height: 1.5; }
.card__excerpt { margin: 0; font-size: 14px; color: #475569; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(0,0,0,0.5); color: #fff; cursor: pointer; }
.carousel__arrow.is-prev { left: -8px; }
.carousel__arrow.is-next { right: -8px; }
.carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.carousel__dots button { width: 8px; height: 8px; border-radius: 9999px; border: none; background: #cbd5e1; }
.carousel__dots button[aria-selected="true"] { background: #004077; }
@media (max-width: 1024px) { .card { flex-basis: calc((100% - 24px)/2); } }
@media (max-width: 600px) { .carousel__track { gap: 16px; } .card { flex-basis: 100%; } .carousel__arrow.is-prev { left: 0; } .carousel__arrow.is-next { right: 0; } }


/* ===== CTA ===== */
/* セクション全体は既存を流用 */
.cta-section {
  background: linear-gradient(135deg, #008000 0%, #0a5aa0 100%);
  color: #fff;
  padding: 48px 0;
}

/* インナーは横並び2カラム（必要数だけ横に並ぶ） */
.cta-section__inner {
  display: flex;
  align-items: center;     /* カラムの垂直中央 */
  justify-content: center; /* 全体を中央寄せ */
  gap: 24px;
  text-align: center;
  flex-wrap: nowrap;       /* 2つなら改行しない */
}

/* 1カラム（テキスト上・画像下の縦レイアウト） */
.cta-col {
  display: flex;
  flex-direction: column;     /* 縦積み */
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;             /* 親の白を継承 */
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 220px;           /* カラム幅の目安 */
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.cta-col:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.18);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.cta-col__text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.cta-col__img {
  display: block;
  width: 48px;
  height: 48px;
}

/* バリエーション例（色味を少し変えるなど） */
.cta-col--secondary {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}

/* モバイルでは縦並びに */
@media (max-width: 760px) {
  .cta-section__inner {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .cta-col {
    width: 100%;
    max-width: 420px; /* はみ出し防止の上限 */
    min-width: 0;
  }
}

/* ボタン行のラッパー */
.cta-section__actions {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap; /* 折り返さない */
}

/* ボタン内の配置を横方向に整える */
.cta-section__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;           /* 文字とアイコンの間隔 */
  white-space: nowrap;
}

/* モバイルでのレイアウト */
@media (max-width: 760px) {
  .cta-section__inner {
    flex-direction: column;   /* 見出しとボタン行は縦積み */
    align-items: center;
    gap: 12px;
  }

  .cta-section__actions {
    flex-direction: row;      /* ボタンを横並び */
    justify-content: center;
    width: 100%;
  }

  .cta-section__actions .btn {
    flex: 1 1 auto;           /* 2ボタンを均等に */
    max-width: 220px;         /* はみ出し抑制。必要なら調整 */
    text-align: center;
  }

  .cta-section__actions .btn img {
    width: 28px;              /* スマホで少し小さく（任意） */
    height: auto;
    display: block;
  }
}

/*ーーコラム個別ページ詳細ーーー*/
/* 基本色と余白 */
:root {
  --gap: 16px;
  --radius: 10px;
  --border: 1px solid #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  --link: #1d4ed8;
}

/* グリッド（PC:3カラム / スマホ:2カラム） */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gap);
}

/* カード */
.post-card {
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

/* サムネイル（一定比率） */
.post-card__thumb {
  display: block;
  aspect-ratio: 3 / 2;
  background: #f3f4f6;
}
.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タイトル・日付・抜粋 */
.post-card__title {
  font-size: 1rem;
  margin: 10px 12px 4px;
  line-height: 1.4;
}
.post-card__title a {
  color: var(--text);
  text-decoration: none;
}
.post-card__title a:hover { text-decoration: underline; }

.post-card__date {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 12px 8px;
}

.post-card__excerpt {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 12px 8px;
}

.post-card__more {
  margin: 0 12px 12px;
}
.post-card__more a {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}
.post-card__more a:hover { text-decoration: underline; }

/* スマホ：2カラム＋抜粋/続き非表示 */
@media (max-width: 768px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .post-card__excerpt,
  .post-card__more {
    display: none;
  }
}

/* レイアウト */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCで3カラム固定 */
  gap: 16px;
  max-width: 1200px; /* 任意で調整 */
  margin: 0 auto;
  padding: 16px;
}

/* カード基本 */
.post-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* サムネイルは一定比率 */
.post-card__thumb {
  display: block;
  aspect-ratio: 3 / 2;
  background: #f3f4f6;
}
.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タイトル・日付・抜粋・続き */
.post-card__title {
  font-size: 1rem;
  margin: 10px 12px 4px;
  line-height: 1.4;
}
.post-card__title a {
  color: #111827;
  text-decoration: none;
}
.post-card__title a:hover { text-decoration: underline; }

.post-card__date {
  display: block;
  color: #6b7280;
  font-size: 0.9rem;
  margin: 0 12px 8px;
}
.post-card__excerpt {
  color: #111827;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 12px 8px;
}
.post-card__more {
  margin: 0 12px 12px;
}
.post-card__more a {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
}
.post-card__more a:hover { text-decoration: underline; }

/* スマホ：2カラム＋抜粋/続き非表示 */
@media (max-width: 768px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr); /* スマホ2カラム */
    gap: 12px;
  }
  .post-card__excerpt,
  .post-card__more {
    display: none; /* スマホで非表示 */
  }
}
/* ===== features ===== */
.features-section { margin-top:10px; margin-bottom:30px; padding: 56px 0; background: #fff; }
.features2-section { margin-top:10px; margin-bottom:30px; padding: 56px 0; background: #f7f9fb; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.features-card { padding: 24px; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; }
/*.features-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }*/
.features-card__icon { font-size: 28px; }
.features-card__title { margin: 8px 0 6px; font-size: 18px; font-weight: 800; color: #0b1a2a; }
.features-card__title a:hover {
  text-decoration:underline;
}
.features-card__text { margin: 0; color: #334155; font-size: 14px; line-height: 1.8; }
@media (max-width: 960px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } }

.featurescontainer {
  max-width: 960px;       /* 任意の最大幅 */
  margin: 0 auto;         /* 中央寄せ */
  padding: 0 16px;        /* 画面端との余白 */
}

.featurestwo-column {
  display: flex;
  gap: 1.5rem;
  align-items: center;     /* 縦中央で揃える */
}

/* 横並び時に左右を反転 */
.featurestwo-column--reverse {
  flex-direction: row-reverse;
}

.featurestwo-column__left {
  flex: 0 0 40%;
  max-width: 400px;
}

.featurestwo-column__left img {
  width: 100%;
  height: auto;
  display: block;
}

.featurestwo-column__right {
  flex: 1 1 0;
  min-width: 260px;
}

.features {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 0.5rem;
}

.featuresdescription {
  line-height: 1.8;
}

/* レスポンシブ（任意） */
@media (max-width: 640px) {
  .featurestwo-column {
    flex-direction: column;
    align-items: stretch;  /* 縦並び時は通常配置に戻す */
  }
}

/* スマホレイアウト調整（上書き） */
@media (max-width: 640px) {
  .featurestwo-column {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .featurestwo-column--reverse {
    flex-direction: column;
  }

  .featurestwo-column__left {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* 幅いっぱい使う。必要なら max-width を任意値に */
  .featurestwo-column__left img {
    width: 100%;
    height: auto;
    max-width: none; /* 例: 上限を付けたいなら 480px 等に変更 */
  }

  .featurestwo-column__right {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
  }

  .featuresdescription {
    text-align: left;
  }
}


/* More リンク */
.features-card__more {
  margin-top:auto;           /* 下に寄せる */
  align-self:flex-end;     /* 左寄せ（右寄せにしたい場合は flex-end） */
  font-size:14px;
  color:#0b6bcb;
  text-decoration:none;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
  float: right;
}

.features-card__more::after {
  content:"▶";
  transition:transform .2s ease;
}

.features-card:hover .features-card__more::after {
  transform:translateX(2px);
}

/* 旧アイコン用（不要なら削除） */
.features-card__icon { display:none; }






/* ===== PROCESS ===== */
.process-section { margin-top:10px; margin-bottom:30px; padding: 56px 0; background: #fff; }
.process2-section { margin-top:10px; margin-bottom:30px; padding: 56px 0; background: #f7f9fb; }

/* 5列グリッド（自動折返し） */
.process-grid {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

/* カード（画像＋タイトル） */
.process-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* 視覚的なまとまりを出す（COLUMN のカード感に寄せるなら枠線や影を調整） */
  background:  #fff; /* COLUMN と同一背景に揃える transparent*/
  border: 1px solid #e5e7eb;        /* 薄い枠線（任意） */
  border-radius: 12px;
  padding: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


/* 画像エリア */
.process-card__media {
  margin: 0 0 12px;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #eef2f7; /* プレースホルダ。実画像がある場合は見えません */
}

.process-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タイトル */
.process-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  color: #111827;
}

/* レスポンシブ */
@media (max-width: 1200px) {
  .process-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .process-section {
    padding: 48px 0;
  }
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 420px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* グリッド直下の一文 */
.process-note {
  margin-top: 20px;        /* グリッドとの間隔 */
  font-size: 14px;         /* 読みやすいサイズに調整 */
  line-height: 1.8;
  color: #4b5563;          /* 落ち着いた色（任意） */
  text-align: center;      /* 中央寄せ（左寄せにしたい場合は削除） */
  max-width: 840px;        /* 横幅を絞って読みやすく */
  margin-left: auto;
  margin-right: auto;
}

/* ===== cases / contact / footer ===== */
.cases-section {  margin-top:10px ;margin:10px; padding: 56px 0; background: #fff; }
.cases2-section {  margin-top:10px ;margin:10px; padding: 56px 0; background: #f7f9fb; }
.contact-section {  margin:10px; padding: 56px 0; background: #fff; }
.site-footer { padding: 24px 0; background: #0b1a2a; color: #94a3b8; }

/* グリッドレイアウト */
.cases-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr); /* デスクトップで4列 */
  align-items: stretch;
}

/* カード全体 */
.case-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.case-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}

/* クリック範囲を広げる */
.case-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

/* サムネイル */
.case-thumb {
  aspect-ratio: 16 / 9; /* 16:9 → 16:8 など、比率を変更して高さを減らす */
  margin: 0;
  background: #e8edf3;
  overflow: hidden;
}

.case-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 本文 */
.case-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* カテゴリ、タイトル、概要 */
.case-category {
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.case-title {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #0b1a2a;
}

.case-excerpt {
  font-size: 14px;
  line-height: 1.7;
  color: #475569;
  margin: 0;
}

/* 小さな端末向け微調整（任意） */
@media (max-width: 480px) {
  .cases-section { padding: 40px 0; }
  .cases-grid { gap: 16px; }
  .case-body { padding: 12px; }
}

.cases-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}

/* 幅が狭くなったら列数を減らす */
@media (max-width: 1200px) {
  .cases-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .cases-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .cases-grid {
    grid-template-columns: 1fr;
  }
}

/* グリッド直下の一文 */
.cases-note {
  margin-top: 20px;        /* グリッドとの間隔 */
  font-size: 14px;         /* 読みやすいサイズに調整 */
  line-height: 1.8;
  color: #4b5563;          /* 落ち着いた色（任意） */
  text-align: center;      /* 中央寄せ（左寄せにしたい場合は削除） */
  max-width: 840px;        /* 横幅を絞って読みやすく */
  margin-left: auto;
  margin-right: auto;
}


/* ===== customer ===== */
.customer-section {  margin-top:10px ;margin:10px; padding: 56px 0; background: #fff; }
.customer2-section {  margin-top:10px ;margin:10px; padding: 56px 0; background: #f7f9fb; }

/* グリッドレイアウト */
.customer-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr); /* デスクトップで4列 */
  align-items: stretch;
}

/* カード全体 */
.customer-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* クリック範囲を広げる */
.customer-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

/* サムネイル */
.customer-thumb {
  aspect-ratio: 16 / 9; /* 16:9 → 16:8 など、比率を変更して高さを減らす */
  margin: 0;
  background: #e8edf3;
  overflow: hidden;
}

.customer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 本文 */
.customer-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* カテゴリ、タイトル、概要 */
.customer-category {
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.customer-title {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #0b1a2a;
}

.customer-excerpt {
  font-size: 14px;
  line-height: 1.7;
  color: #475569;
  margin: 0;
}

/* 小さな端末向け微調整（任意） */
@media (max-width: 480px) {
  .customer-section { padding: 40px 0; }
  .customer-grid { gap: 16px; }
  .customer-body { padding: 12px; }
}

.customer-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}

/* レスポンシブ */
@media (max-width: 1200px) {
  .customer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .customer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .customer-section {
    padding: 48px 0;
  }
  .customer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 420px) {
  .customer-grid {
    grid-template-columns: 1fr;
  }
}

/* グリッド直下の一文 */
.customer-note {
  margin-top: 20px;        /* グリッドとの間隔 */
  font-size: 14px;         /* 読みやすいサイズに調整 */
  line-height: 1.8;
  color: #4b5563;          /* 落ち着いた色（任意） */
  text-align: center;      /* 中央寄せ（左寄せにしたい場合は削除） */
  max-width: 840px;        /* 横幅を絞って読みやすく */
  margin-left: auto;
  margin-right: auto;
}

/* ===== footer ===== */

/* 横並び（著作権表記とリンク） */
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左右端に配置 */
  gap: 16px;
  flex-wrap: wrap; /* 画面が狭いとき折り返し */
}

/* 右側ナビを右端へ */
.footer-nav {
  margin-left: auto;  /* 可能ならこれだけで右端へ */
  text-align: right;
}

.footer-nav .footer-links {
  display: inline-flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
}

.site-footer a:hover {
  text-decoration: none;
}

/* ===== AT FIRST ===== */

/* sections (共通) */
.first-section { margin-top:10px; margin-bottom:30px; padding: 56px 0; background: #fff; }
.first2-section { margin-top:10px; margin-bottom:30px; padding: 56px 0; background: #f7f9fb; }
.first-section__body{
  margin: 0;
  color: #374151;
}

/* first2 セクションだけ左右反転（PC幅） */
.first2-section.reverse .firsttwo-column {
  flex-direction: row-reverse;
}

/* 横並びレイアウト */
.image-row {
  display: flex;
  gap: 16px;              /* 画像の間隔 */
  margin: 16px 0 24px;    /* タイトル下の余白 */
  flex-wrap: wrap;        /* 狭い幅では折り返し */
}

.image-row a {
  display: block;
  flex: 1 1 0;            /* 2枚で等分 */
  max-width: 100%;
  text-decoration: none;
}

.image-row img[src*="login_01.jpg"],
.image-row img[src*="login_02.jpg"] {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.image-row img:hover,
.image-row img:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

ーー
.firstcontainer {
  max-width: 960px;       /* 任意の最大幅 */
  margin: 0 auto;         /* 中央寄せ */
  padding: 0 16px;        /* 画面端との余白 */
}

.firsttwo-column {
  display: flex;
  gap: 1.5rem;
  align-items: center;     /* 縦中央で揃える */
}

/* 横並び時に左右を反転 */
.firsttwo-column--reverse {
  flex-direction: row-reverse;
}

.firsttwo-column__left {
  flex: 0 0 40%;
  max-width: 400px;
}

.firsttwo-column__left img {
  width: 70%;
  height: auto;
  display: block;
}

.firsttwo-column__right {
  flex: 1 1 0;
  min-width: 260px;
}

.first {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 0.5rem;
}

.firstdescription {
  line-height: 1.8;
}



/* レスポンシブ（任意） */
@media (max-width: 640px) {
  .firsttwo-column {
    flex-direction: column;
    align-items: stretch;  /* 縦並び時は通常配置に戻す */
  }
}

/* レスポンシブ（任意） */
@media (max-width: 640px) {
  .firsttwo-column {
    flex-direction: column;
    align-items: stretch;  /* 縦並び時は通常配置に戻す */
  }
}

/* 縦並び時は通常順に戻す（必要に応じて） */
@media (max-width: 640px) {
  .firsttwo-column--reverse {
    flex-direction: column;
  }
}


@media (max-width: 640px) {
  .firsttwo-column__left {
    text-align: center;
  }

  .firsttwo-column__left img[src*="first_illust_01.png"],
  .firsttwo-column__left img[src*="first_illust_02.png"] {
    max-width: 50%; 
    width: 50%; 
    height: auto; 
    margin: 0 auto; 
    display: inline-block; 
  }
}


/* スマホレイアウト調整（幅640px以下をスマホと想定） */
@media (max-width: 640px) {

  /* 画像→本文の順に縦並び */
  .firsttwo-column {
    flex-direction: column;    /* すでに定義ありでも再確認 */
    align-items: center;       /* セクション自体は中央に配置 */
    text-align: left;          /* テキストは左揃え */
  }

  /* reverse も通常順に戻す（画像→本文） */
  .firsttwo-column--reverse {
    flex-direction: column;
  }

  /* 画像ボックスは全幅基準で中央配置、サイズは約5割 */
  .firsttwo-column__left {
    flex: 0 0 auto;
    max-width: none;           /* PCでの max-width を解除 */
    width: 100%;               /* 親幅基準 */
    display: flex;
    justify-content: center;   /* 中央寄せ */
  }

  /* 画像は約50%に縮小しつつ、最大でも親幅を超えない */
  .firsttwo-column__left img {
    width: 60%;
    height: auto;
    max-width: 360px;          /* 必要なら上限を設ける（任意） */
  }

  /* 本文ブロックは中央に置くがテキストは左揃え */
  .firsttwo-column__right {
    width: 100%;
    max-width: 720px;          /* セクションの読みやすい横幅を確保（任意） */
    margin: 0 auto;            /* セクション全体を中央配置 */
    text-align: left;          /* テキスト左揃え */
  }

  .firstdescription {
    text-align: left;
  }
}

/* 画像リンクはクリック可能表示に */
.image-row a {
  cursor: pointer; /* 拡大できる雰囲気を出す */
}

/* 必要なら軽いホバー演出（任意） */
.image-row a:hover img,
.image-row a:focus img {
  transform: none;           /* 演出不要なら none のまま */
  box-shadow: none;          /* 演出不要なら none のまま */
  /* 例: 少しだけ明るくする場合
  filter: brightness(1.04);
  */
}

/* 既存の過剰な演出を無効化したい場合（競合対策） */
.image-row a:hover,
.image-row a:focus,
.image-row img:hover,
.image-row img:focus {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  /* filter/opacityを使う演出があれば追加で無効化 */
}

/* ===== FUNCTION ===== */
.function-section { margin-top:10px; margin-bottom:0; padding:56px 0; background:#fff; }
.function2-section {
  margin-top:10px;
  margin-bottom:0;
  padding:56px 0;
  background:#f7f9fb;
}

.function-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.function-card { padding:24px; border-radius:12px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.06); transition:transform .2s ease, box-shadow .2s ease; }
/* .function-card:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.08); } */
.function__icon { font-size:28px; }
.function__title { margin:8px 0 6px; font-size:18px; font-weight:800; color:#0b1a2a; }
.function__text { margin:0; color:#334155; font-size:14px; line-height:1.8; }

/* 画像 */
.function-card__image {
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#eef2f7;
  overflow:hidden;
}
.function-card__image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 本文領域 */
.function-card__meta {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px 20px 20px;
}
.function-card__title {
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#0b1a2a;
  line-height:1.4;
}
.function-card__title a {
  color:inherit;
  text-decoration:none;
  display:block;
}
.function-card__title a:hover { text-decoration:underline; }
.function-card__text {
  margin:0;
  color:#334155;
  font-size:14px;
  line-height:1.8;
}

/* More リンク */
.function-card__more {
  margin-top:auto;          /* 下に寄せる */
  align-self:flex-end;      /* 右寄せ（左寄せにしたい場合は flex-start） */
  font-size:14px;
  color:#0b6bcb;
  text-decoration:none;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.function-card__more::after {
  content:"▶";
  transition:transform .2s ease;
}
.function-card:hover .function-card__more::after { transform:translateX(2px); }

/* 旧アイコン用（不要なら削除） */
.function-card__icon { display:none; }

/* レスポンシブ（PC→タブ→モバイルの順に上書き） */
@media (max-width: 1200px) {
  .function-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .function-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .function-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .function-section { padding:48px 0; }
  .function-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
}
@media (max-width: 600px) {
  .function-grid { grid-template-columns:1fr; }
}

ーーー個別ページーーーー
/* function2 セクションだけ左右反転（PC幅） */
.function2-section.reverse .functiontwo-column {
  flex-direction: row-reverse;
}

/* 横並びレイアウト */
.image-row {
  display: flex;
  gap: 16px;              /* 画像の間隔 */
  margin: 16px 0 24px;    /* タイトル下の余白 */
  flex-wrap: wrap;        /* 狭い幅では折り返し */
}

.image-row a {
  display: block;
  flex: 1 1 0;            /* 2枚で等分 */
  max-width: 100%;
  text-decoration: none;
}


.image-row img[src*="function_illust_02_1.png"],
.image-row img[src*="function_illust_02_2.png"] {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.image-row img[src*="function_illust_03_1.png"],
.image-row img[src*="function_illust_03_2.png"] {
  width: 70%;
  max-width: 1200px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.image-row img:hover,
.image-row img:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

ーー
/* 2カラムの器（既存クラスを活用） */
.functioncontainer { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.functiontwo-column { display: flex; gap: 24px; align-items: flex-start; }

/* 横並び時に左右を反転 */
.functiontwo-column--reverse {
  flex-direction: row-reverse;
}

.functiontwo-column__left { flex: 0 0 46%; max-width: 520px; }

.functiontwo-column__left img {
  width: 100%;
  height: auto;
  display: block;
}

.functiontwo-column__right { flex: 1 1 0; min-width: 280px; }

.function {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 0.5rem;
}

.functiondescription {
  line-height: 1.8;
}

ーーー画像のサイズ個別

/* アラート機能セクション内の 04 だけ */
#function4 img[src*="function_illust_04.png"] {
  width: 100%;
  max-width: 520px;
  height: auto;
}

/* 棚卸支援セクション内の 05 だけ */
#function5 img[src*="function_illust_05.png"] {
  width: 100%;
  max-width: 420px;
  height: auto;
}

/* 多様なIT資産セクション内の 01 だけ */
#function img[src*="function_illust_01.png"] {
  width: 100%;
  max-width: 420px;
  height: auto;
}

ーーー06脆弱性
/* 2カラムのラッパー */
.functiontwo-column {
  display: grid;
  grid-template-columns: 1fr;       /* モバイルは1列 */
  gap: 24px;
  align-items: start;
}

/* 左右カラム共通 */
.functiontwo-column__left,
.functiontwo-column__right {
  min-width: 0; /* 画像やテキストのはみ出し防止 */
}

/* 本文 */
.functiondescription p {
  line-height: 1.8;
  margin: 0;
}

/* 画像＋注釈 */
.function-figure {
  margin: 0;
}

.function-figure img {
  display: block;
  width: 100%;
  height: auto;
　cursor: pointer; /* 拡大できる雰囲気を出す */
}

.function-figcaption {
  font-size: 0.9rem;
  color: #666;
  margin-top: 8px;
}

/* 赤枠の強調ボックス */
.function-highlight {
  border: 2px solid #e53935;
  background: #fff5f5;
  padding: 16px;
  margin-top: 28px;
  border-radius: 6px;
  max-width: 460px;     /* 好みで数値調整（例: 640px〜800px程度） */
  margin-left: auto;
  margin-right: auto;   /* 中央寄せ */
  text-align: center;   /* 中のテキストも中央にしたい場合 */
}

.function-highlight__title {
  margin: 0 0 8px;
  font-size: 1.2rem;
  color: #c62828;
  font-weight: 700;
  text-align: center;    /* タイトル中央 */
}

.function-highlight__list {
  margin: 0;
  padding-left: 1.2em;
  text-align: left;     /* リストのみ左揃え */
}

.function-highlight__list li + li {
  margin-top: 6px;
}

#function6 .functiondescription {
  margin-top: 16px; /* 好みで調整 */
}

@media (min-width: 768px) {
  #function6 .functiontwo-column__left {
    margin-top: 24px; /* PCで下げる量 */
  }
}

/* PCレイアウト（タブレット以上で2カラム） */
@media (min-width: 768px) {
  .functiontwo-column {
    grid-template-columns: 1fr 1fr; /* 左右2カラム */
    gap: 32px;
  }

  /* 画像を右、本文を左に固定したい場合 */
  .functiontwo-column__left {
    order: 1;
  }
  .functiontwo-column__right {
    order: 2;
  }
}

/* さらに横幅が広い場合の調整（任意） */
@media (min-width: 1024px) {
  .function-highlight {
    max-width: 50%;
    text-align: left;      /* スマホでは左揃えに戻したい場合 */
  }
  .function-highlight__title {
    text-align: center;    /* タイトルは中央のまま */
  }
}

/* ===== スマホ表示（768px以下）の体裁上書き ===== */
@media (max-width: 768px) {
  /* グリッドを2列に固定（既存の複数ブレークポイントより後勝ち） */
  .function-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px;
  }

  /* 画像は表示 */
  .function-card__image {
    display: block !important;
  }

  /* タイトルは表示 */
  .function-card__title {
    display: block !important;
    font-size: 16px;
    line-height: 1.4;
    margin: 8px 0 0;
  }

  /* 画像とタイトル以外（本文、More、旧クラス由来など）を非表示 */
  .function-card__text,
  .function-card__more,
  .function__text,
  .function__icon,
  .function-card__meta > *:not(.function-card__title) {
    display: none !important;
  }

  /* 余白の最適化 */
  .function-card {
    padding: 0;
  }
  .function-card__meta {
    padding: 10px 12px;
    gap: 0;
  }
}

ーーーーーーー


/* 縦並び時は通常順に戻す（必要に応じて） */
@media (max-width: 640px) {
  .functiontwo-column--reverse {
    flex-direction: column;
  }
}


@media (max-width: 640px) {
  .functiontwo-column__left {
    text-align: center;
  }

  .functiontwo-column__left img[src*="first_illust_01.png"],
  .functiontwo-column__left img[src*="first_illust_02.png"] {
    max-width: 40%; 
    width: 50%; 
    height: auto; 
    margin: 0 auto; 
    display: inline-block; 
  }
}


/* スマホレイアウト調整（幅640px以下をスマホと想定） */
@media (max-width: 640px) {

  /* 画像→本文の順に縦並び */
  .functiontwo-column {
    flex-direction: column;    /* すでに定義ありでも再確認 */
    align-items: center;       /* セクション自体は中央に配置 */
    text-align: left;          /* テキストは左揃え */
  }

  /* reverse も通常順に戻す（画像→本文） */
  .functiontwo-column--reverse {
    flex-direction: column;
  }

  /* 画像ボックスは全幅基準で中央配置、サイズは約5割 */
  .functiontwo-column__left {
    flex: 0 0 auto;
    max-width: none;           /* PCでの max-width を解除 */
    width: 100%;               /* 親幅基準 */
    display: flex;
    justify-content: center;   /* 中央寄せ */
  }



  /* 本文ブロックは中央に置くがテキストは左揃え */
  .functiontwo-column__right {
    width: 100%;
    max-width: 720px;          /* セクションの読みやすい横幅を確保（任意） */
    margin: 0 auto;            /* セクション全体を中央配置 */
    text-align: left;          /* テキスト左揃え */
  }

  .functiondescription {
    text-align: left;
  }
}

/* スマホ幅で画像を1列に */
@media (max-width: 640px) {
  .image-row {
    flex-direction: column; /* 縦並びに */
  }

  .image-row a {
    flex: 1 0 100%; /* 各要素を100%幅で1列に */
    width: 100%;
  }

  .image-row img {
    width: 100%;     /* 親幅いっぱいに */
    max-width: 100%; /* 既存の max-width を上書き */
    height: auto;
    display: block;
    margin: 0 auto 12px; /* 下に少し余白（任意） */
  }
}

/* スマホ幅だけ 04画像のサイズを調整 */
@media (max-width: 640px) {
  /* セクション限定にしたい場合は親IDを付けると安心 */
  #function4 img[src*="function_illust_04.png"] {
    width: 100%;      /* 親幅にフィット */
    max-width: 360px; /* 希望サイズに調整（例: 360px） */
    height: auto;     /* 縦横比維持 */
    display: block;
    margin: 0 auto;   /* 中央寄せ（任意） */
  }
}
ーー画像の拡大
/* 画像リンクはクリック可能表示に */
.image-row a {
  cursor: pointer; /* 拡大できる雰囲気を出す */
}

/* 必要なら軽いホバー演出（任意） */
.image-row a:hover img,
.image-row a:focus img {
  transform: none;           /* 演出不要なら none のまま */
  box-shadow: none;          /* 演出不要なら none のまま */
  /* 例: 少しだけ明るくする場合
  filter: brightness(1.04);
  */
}

/* 既存の過剰な演出を無効化したい場合（競合対策） */
.image-row a:hover,
.image-row a:focus,
.image-row img:hover,
.image-row img:focus {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  /* filter/opacityを使う演出があれば追加で無効化 */
}
/* ===== SERVICE ===== */
.service-section { margin-top:10px; margin-bottom:0px; padding: 56px 0; background: #fff; }
.service2-section { margin-top:10px; margin-bottom:0px; padding: 56px 0; background: #f7f9fb; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card { padding: 24px; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; }
/*.service-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }*/
.service__icon { font-size: 28px; }
.service__title { margin: 8px 0 6px; font-size: 18px; font-weight: 800; color: #0b1a2a; }
.service__text { margin: 0; color: #334155; font-size: 14px; line-height: 1.8; }
@media (max-width: 960px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .service-grid { grid-template-columns: 1fr; } }


/* 画像 */
.service-card__image {
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:16 / 9; /* 比率は必要に応じて変更 */
  background:#eef2f7;
  overflow:hidden;
}

.service-card__image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 本文領域 */
.service-card__meta {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px 20px 20px;
}

.service-card__title {
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#0b1a2a;
  line-height:1.4;
}

.service-card__title a {
  color:inherit;
  text-decoration:none;
  display:block;
}

.service-card__title a:hover {
  text-decoration:underline;
}

.service-card__text {
  margin:0;
  color:#334155;
  font-size:14px;
  line-height:1.8;
}

/* 5) 見出し下の余白を少し確保（任意） */
.service2-section .sec-title,
.service-section .sec-title {
  margin-bottom: 1.25rem;
}

/* More リンク */
.service-card__more {
  margin-top:auto;           /* 下に寄せる */
  align-self:flex-end;     /* 左寄せ（右寄せにしたい場合は flex-end） */
  font-size:14px;
  color:#0b6bcb;
  text-decoration:none;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.service-card__more::after {
  content:"▶";
  transition:transform .2s ease;
}

.service-card:hover .service-card__more::after {
  transform:translateX(2px);
}

/* 旧アイコン用（不要なら削除） */
.service-card__icon { display:none; }

/* レスポンシブ */
@media (max-width: 1200px) {
  .service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .service-section {
    padding: 48px 0;
  }
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 420px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 不一致クラスの修正（任意だが推奨） --- */
.service-card:hover .service-card__more::after {
  transform: translateX(2px);
}

/* --- スマホ表示: 768px以下で「画像＋タイトルのみ」 --- */
@media (max-width: 768px) {
  /* 画像は表示 */
  .service-card__image {
    display: block !important;
  }

  /* タイトルは表示 */
  .service-card__title {
    display: block !important;
    font-size: 16px;
    line-height: 1.4;
    margin: 8px 0 0;
  }

  /* 画像とタイトル以外を非表示（本文、アイコン、More など） */
  .service-card__text,
  .service-card__more,
  .service__text,
  .service__icon,
  .service-card__meta > *:not(.service-card__title) {
    display: none !important;
  }

  /* 余白の最適化（必要に応じて調整） */
  .service-card {
    padding: 0;
  }
  .service-card__meta {
    padding: 10px 12px;
    gap: 0;
  }
}

/* --- 420px以下で1列に戻したくない場合は2列を維持（必要な場合のみ有効化） --- */
/*
@media (max-width: 420px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
*/

ーーー
/* 4) セクション全体の横幅・中央寄せ（既存 .servicecontainer の補強） */
.servicecontainer {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

/* レイアウトの土台（左右2カラム） */
.servicetwo-column {
  display: flex;            /* これがないと flex-direction が効きません */
  align-items: center;
  gap: 24px;                /* 任意：左右の間隔 */
}

.servicetwo-column__left {
  flex: 0 0 40%;
  max-width: 400px;
}

/* 1) 画像サイズ（PCデフォルト） */
.servicetwo-column__left img,
.intro-support__col--image img {
  width: 80%;               /* PCでの基準幅（例） */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;           /* 横センター */
}

/* 右カラムの伸縮設定 */
.servicetwo-column__right {
  flex: 1 1 0;
  min-width: 260px;
}


.service {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 0.5rem;
}

.servicedescription {
  line-height: 1.8;
}

/* 画像と本文の左右入れ替え */
.servicetwo-column.is-reverse {
  flex-direction: row-reverse;
}

/* 3) スマホでは縦並び（画像→本文） */
@media (max-width: 640px) {
  .servicetwo-column {
    flex-direction: column;     /* 縦並び */
    align-items: center;        /* 子要素を中央に揃える（画像センター維持） */
  }
  .servicetwo-column.is-reverse {
    flex-direction: column;     /* 逆指定でも縦は同順に */
  }

  /* 画像サイズ（スマホ上書き例） */
  .servicetwo-column__left img,
  .intro-support__col--image img {
    width: 60%;                 /* スマホ時の画像幅（例） */
  }

  .servicetwo-column__left,
  .servicetwo-column__right {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .servicedescription,
  .servicetwo-column__right {
    margin-top: 0.75rem;
  }
}




ーーーーーservice01ーーーー
/* セクション全体 */
.intro-support { margin-top:10px; margin-bottom:0; padding: 56px 0; background: #fff; }

.intro-support__container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 上段の左右2カラム */
.intro-support__row {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 48px;
  align-items: center;
}

/* 左画像 */
.intro-support__col--image img {
  max-width: 100%;
  height: auto;
  display: block;
  padding: 8px;
}

/* 右テキスト */
.intro-support__title {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 800;
  color: #0b1a2a;
  line-height: 1.4;
}

.intro-support__lead {
  text-align: left;
  margin: 0 0 24px;
  color: #334155;
  font-size: 16px;
  line-height: 1.9;
}

/* 下段の2カード縦並び */
.intro-support__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* カード共通 */
.intro-card {
  border-radius: 12px;
  padding: 20px 22px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* 青カード */
.intro-card--primary { background: #e6f2fb; }

/* クリーム色カード */
.intro-card--secondary { background: #fbf3df; }

/* カード共通タイトル（ベース） */
.intro-card__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: #0b1a2a;
}

/* 青カードのタイトル色 */
.intro-card--primary .intro-card__title {
  color: #0b66c2; /* 好みの青に調整 */
}

/* クリーム色カードのタイトル色 */
.intro-card--secondary .intro-card__title {
  color: #ff4500; /* 好みの茶/オレンジ系に調整 */
}
.intro-card__list {
  margin: 0;
  padding-left: 20px;
  color: #334155;
  font-size: 14px;
  line-height: 1.8;
}

/* 画像下の補足テキスト（任意） */
.intro-support__note {
  max-width: 480px;
  margin: 28px 0 0;
  color: #334155;
  font-size: 15px;
  line-height: 1.9;
}

/* レスポンシブ */
@media (max-width: 960px) {
  .intro-support__row {
    grid-template-columns: 360px 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .intro-support__col--image img {
    width: 70%;
    margin: 0 auto;
    display: block;
  }
}

@media (max-width: 720px) {
  .intro-support__row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .intro-support__cards {
    grid-template-columns: 1fr;
  }
  .intro-support__title {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .intro-support {
    padding: 40px 0;
  }
  .intro-support__title {
    font-size: 22px;
  }
  .intro-support__col--image img {
    width: 60%;
  }
}

/* ===== PRICE ===== */
.price-section {  margin-top:10px; margin-bottom:0px; padding-top: 56px; padding-bottom: 0px background: #fff; }

.pricecontainer {
  max-width: 960px;       /* 任意の最大幅 */
  margin: 0 auto;         /* 中央寄せ */
  margin-bottom: 20px;
  padding: 0 16px;        /* 画面端との余白 */
}

/* 共通：2カラムの基本 */
.pricetwo-column {
  display: flex;
  gap: 1.5rem;
  align-items: center;      /* 縦中央 */
  justify-content: center;  /* 横中央（PC時も中央寄せ） */
  text-align: left;         /* PCでは左寄せ */
}

/* 左カラム（画像） */
.pricetwo-column__left {
  flex: 0 0 40%;
  max-width: 400px;
}

/* 画像のデフォルト（PC） */
.pricetwo-column__left img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右カラム（テキスト） */
.pricetwo-column__right {
  flex: 1 1 0;
  min-width: 260px;
}

/* スマホ（640px以下） */
@media (max-width: 640px) {
  .pricetwo-column {
    flex-direction: column;   /* 縦並び */
    align-items: center;      /* 中央揃え */
    text-align: center;       /* テキスト中央揃え */
  }

  /* スマホでは画像を登録サイズの約5割で表示し中央に */
  .pricetwo-column__left img {
    width: 90%;
    max-width: 100%;
    margin: 0 auto;           /* センター */
  }

  /* テキスト側も幅を絞って中央に */
  .pricetwo-column__right {
    width: 100%;
    max-width: 640px;
  }
}



/* ===== USECASE ===== */
.usecase-section { margin-top:10px; margin-bottom:30px; padding:56px 0; background:#fff; }
.usecase2-section { margin-top:10px; margin-bottom:30px; padding:56px 0; background:#f7f9fb; }
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.usecase-card { padding: 24px; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; }
/*.usecase-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }*/
.usecase__icon { font-size: 28px; }
.usecase__title { margin: 8px 0 6px; font-size: 18px; font-weight: 800; color: #0b1a2a; }
.usecase__text { margin: 0; color: #334155; font-size: 14px; line-height: 1.8; }
@media (max-width: 960px) { .usecase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .usecase-grid { grid-template-columns: 2fr; } }

/* 画像 */
.usecase-card__image {
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:16 / 9; /* 比率は必要に応じて変更 */
  background:#eef2f7;
  overflow:hidden;
}

.usecase-card__image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 本文領域 */
.usecase-card__meta {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px 20px 20px;
}

.usecase-card__title {
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#0b1a2a;
  line-height:1.4;
}

.usecase-card__title a {
  color:inherit;
  text-decoration:none;
  display:block;
}

.usecase-card__title a:hover {
  text-decoration:underline;
}

.usecase-card__text {
  margin:0;
  color:#334155;
  font-size:14px;
  line-height:1.8;
}

/* 本文 */
.usecase-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* More リンク */
.usecase-card__more {
  margin-top:auto;           /* 下に寄せる */
  align-self:flex-end;     /* 左寄せ（右寄せにしたい場合は flex-end） */
  font-size:14px;
  color:#0b6bcb;
  text-decoration:none;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.usecase-card__more::after {
  content:"▶";
  transition:transform .2s ease;
}

.usecase-card:hover .usecase-card__more::after {
  transform:translateX(2px);
}

/* 旧アイコン用（不要なら削除） */
.usecase-card__icon { display:none; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--text-900);
  line-height:1.7;
  background:#fff;
}

/* ===== usecase個別ページ ===== */
/* ベース: コンテナとタイポグラフィ */
.usecaseitasset-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #0f2138;
  line-height: 1.7;
}

/* 見出し */
.usecasesection-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.usecasesection-head .index {
  display: inline-block;
  background: #1e79ff;
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
}
.usecasesection-head h1 {
  font-size: 22px;
  margin: 0;
  font-weight: 700;
}

/* 役割ボックス（3カラム） */
.usecaseroles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.usecaserole-card {
  border: 1px solid #d8e3f5;
  background: #f8fbff;
  padding: 14px 16px;
  border-radius: 6px;
}
.usecaserole-card h2 {
  font-size: 16px;
  margin: 0 0 8px;
  font-weight: 700;
  color: #2b5fb7;
}
.usecaserole-card ul {
  margin: 0;
  padding-left: 18px;
}

/* フロー図：1枚画像で表示 */
.usecaseflow.single-image {
  margin: 12px 0 28px;
}
.usecaseflow-figure {
  margin: 0;
}
.usecaseflow-figure img {
  display: block;
  margin-left: auto;   /* 中央寄せ */
  margin-right: auto;  /* 中央寄せ */
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* スクリーンリーダー専用テキスト */
.usecasesr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 説明テキスト */
.usecasenotes p { margin: 0 0 10px; }

/* レスポンシブ */
@media (max-width: 900px) {
  .roles { grid-template-columns: 1fr; }
  /* フロー図は img の max-width による自動縮小で対応 */
}

ーーーーー03
#usecase3 .usecaseflow-figure {
  position: relative;
}
#usecase3 .usecaseflow-figure img {
  position: relative;
  top: 0px;  /* 上方向へ8px移動。好みで調整 */
}

#usecase3 .usecasenotes {
  margin-top: 8px;  /* 必要なら 0～12px 程度で調整 */
}
#usecase3 .usecasenotes p {
  margin-top: 0;    /* ブラウザのデフォルト余白対策 */
}

/* 「主な役割」ラベル */
.roles-label{
  display:inline-block;
  margin: 4px 0 10px;   /* 上に少し余白、下に少し広めの余白 */
  padding: 6px 10px;
  background: #1e79ff;  /* 既存の青(#1e79ff) */
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 4px;
  line-height: 1;
  vertical-align: middle;
  /* 影を少し入れて浮かせる感じに（任意） */
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* 小さめ画面での余白調整（任意） */
@media (max-width: 640px){
  .roles-label{
    margin: 2px 0 8px;
    font-size: 11px;
    padding: 6px 9px;
  }
}

/* スマホ時の縦レイアウトと表示順制御 */
@media (max-width: 768px) {
  .usecaseitasset-page {
    display: flex;
    flex-direction: column; /* 縦並び */
  }

  /* 並び順：役割 → 画像 → 説明 */
  .usecaseroles { order: 1; }
  .usecaseflow  { order: 2; }
  .usecasenotes { order: 3; }

  /* 役割ボックスは縦一列に */
  .usecaseroles {
    display: grid;
    grid-template-columns: 1fr; /* 1カラム */
    gap: 12px;
    margin-bottom: 20px;
  }
}

.usecaseflow-figure a {
  display: inline-block;
  cursor: pointer; /* 拡大できる雰囲気を出す */
}

/* 画像コンテナと画像を中央に */
.usecaseflow-figure {
  display: block;
  text-align: center;   /* インライン要素用の保険 */
}

.usecaseflow-figure a {
  display: inline-block; /* 中央寄せを安定させる */
}

/* 画像自体の中央寄せとサイズ制御 */
.usecaseflow-figure img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* セクション3で位置ズレ対策（top指定の影響を無効化） */
#usecase3 .usecaseflow-figure img {
  position: static;      /* もしくは relative のまま top:0 を明示 */
  top: 0;
}

/* セクション1～3だけに限定する場合 */
#usecase .usecaseflow-figure,
#usecase2 .usecaseflow-figure,
#usecase3 .usecaseflow-figure {
  display: block;
  text-align: center;
}
#usecase .usecaseflow-figure a,
#usecase2 .usecaseflow-figure a,
#usecase3 .usecaseflow-figure a {
  display: inline-block;
}
#usecase .usecaseflow-figure img,
#usecase2 .usecaseflow-figure img,
#usecase3 .usecaseflow-figure img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


ーーー
@media (min-width: 992px) {
  #usecase3 .usecaseroles {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px;
  }
}
ーーー

/* ===== TOPIC ===== */
.topic-section {  margin-top:10px ;margin:10px; padding: 56px 0; background: #fff; }
.topic2-section {  margin-top:10px ;margin:10px; padding: 56px 0; background: #f7f9fb; }

.topics-min { max-width: 960px; margin: 0 auto; padding: 16px; }
.topics-min-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; }

.topics-min-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e6eef8; }
.topics-min-item {
  display: grid;
  grid-template-columns: 120px 100px 1fr; /* 日付 / カテゴリ / タイトル */
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #e6eef8;
}

.topics-min-date { font-size: 14px; color: #5b6b85; white-space: nowrap; }
.topics-min-cat {
  font-size: 12px; font-weight: 700; color: #1e79ff; /* 必要なら色を変更 */
  white-space: nowrap;
}
.topics-min-link { color: #0f2138; text-decoration: none; }
.topics-min-link:hover, .topics-min-link:focus { text-decoration: underline; }

@media (max-width: 640px) {
  .topics-min-item { grid-template-columns: 1fr; gap: 4px; }
  .topics-min-cat, .topics-min-date { order: -1; } /* 上部にまと めて表示したい場合は調整 */
}

/* 箇条書きの点（・）を消す＋左右余白をリセット */
.topics-min-list {
  list-style: none;   /* ← これで「・」を非表示 */
  margin: 0;          /* ブラウザ既定の外側余白をリセット */
  padding: 0;         /* ブラウザ既定の内側余白（インデント）をリセット */
}

/* ===== FAQ ===== */
.faq-section {  margin-top:10px; margin-bottom:30px; padding: 56px 0; background: #fff; }
.faq2-section {  margin-top:10px; margin-bottom:30px; padding: 56px 0; background: #f7f9fb; }


.qa-2 {
  max-width: 1200px;
  margin: 0 auto 1em;
  border-bottom: 2px solid #d6dde3;
}

.qa-2 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 3em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

.qa-2 summary::before,
.qa-2 p::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 1.3em;
}

.qa-2 summary::before {
  color: #75bbff;
  content: "Q";
}

.qa-2 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  content: '';
  transition: transform .5s;
}

.qa-2[open] summary::after {
  transform: rotate(225deg);
}

.qa-2 p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 3em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.qa-2[open] p {
  transform: none;
  opacity: 1;
}

.qa-2 p::before {
  color: #ff8d8d;
  line-height: 1.2;
  content: "A";
}.qa-2 {
  max-width: 1200px;
  margin: 0 auto 1em;
  border-bottom: 2px solid #d6dde3;
}

.qa-2 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 3em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

.qa-2 summary::before,
.qa-2 p::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 1.3em;
}

.qa-2 summary::before {
  color: #75bbff;
  content: "Q";
}

.qa-2 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  content: '';
  transition: transform .5s;
}

.qa-2[open] summary::after {
  transform: rotate(225deg);
}

.qa-2 p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 3em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.qa-2[open] p {
  transform: none;
  opacity: 1;
}

.qa-2 p::before {
  color: #ff8d8d;
  line-height: 1.2;
  content: "A";
}

/* グリッド直下の一文 */
.faq-note {
  margin-top: 20px;        /* グリッドとの間隔 */
  font-size: 14px;         /* 読みやすいサイズに調整 */
  line-height: 1.8;
  color: #4b5563;          /* 落ち着いた色（任意） */
  text-align: center;      /* 中央寄せ（左寄せにしたい場合は削除） */
  max-width: 840px;        /* 横幅を絞って読みやすく */
  margin-left: auto;
  margin-right: auto;
}


/* ===== グローバルメニュー ===== */

/* ヘッダー基本 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 横並び */
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
}
.nav-item > a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #222;
  font-weight: 600;
}

/* ドロップダウン（PC） */
.nav-item { position: relative; }
.dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 10;
}
.dropdown a {
  display: block;
  padding: 10px 16px;
  color: #222;
  text-decoration: none;
  white-space: nowrap;
}
.dropdown a:hover { background: #f7f9fc; }

/* hover表示（PC） */
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover > .dropdown,
  .nav-item:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ハンバーガーとSP表示 */
.nav-toggle { display: none; background: none; border: none; padding: 8px; }
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .global-nav {
    position: absolute;
    top: 60px;
    right: 0; left: 0;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .global-nav.is-open { max-height: 80vh; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-item { border-bottom: 1px solid #f0f0f0; }
  .nav-item > a { padding: 14px 16px; }
  .dropdown {
    position: static;
    border: 0;
    box-shadow: none;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height .25s ease;
  }
  .nav-item.is-open > .dropdown { max-height: 1000px; padding: 8px 0; }
  .dropdown a { padding: 12px 20px; }
}

/* 既存の @media (max-width: 960px) の中に追記 */
@media (max-width: 960px) {
  /* CTAを通常リンク化 */
  .site-nav__cta a.btn {
    display: block;            /* 他リンクと高さを合わせる */
    padding: 14px 16px;        /* 他の .nav-item > a に合わせる */
    background: none !important;
    border: 0 !important;
    color: #222 !important;
    font-weight: 600;          /* 他リンクと同じ太さに */
    border-radius: 0;
    box-shadow: none;
  }
  /* 色指定が .btn--primary3/4 に入っている場合を上書き */
  .site-nav__cta a.btn.btn--primary3,
  .site-nav__cta a.btn.btn--primary4 {
    background: none !important;
    color: #222 !important;
  }
  /* アイコンを消す（文字リンク化を強調） */
  .site-nav__cta a img {
    display: none;
  }
  /* 余白・区切りを他と揃える */
  .site-nav__cta {
    border-bottom: 1px solid #f0f0f0;
  }
}

/* ===== BACK TO TOP ===== */
#backToTop {
  position: fixed;
  right: 16px;          /* 画面右からの距離 */
  bottom: 24px;         /* 画面下からの距離 */
  z-index: 9999;        /* ほかの要素より上に表示 */
  display: none;        /* 初期は非表示 */
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: #333;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  cursor: pointer;
  transition: opacity .2s ease;
}

/* スクロールで表示させるときに使う表示状態 */
#backToTop.show {
  display: block;
  opacity: 1;
}

#backToTop:hover {
  background: #000;
}

/* スムーススクロール（対応ブラウザのみ） */
html {
  scroll-behavior: smooth;
}


.sec-title, .sec-title * { text-align: center !important; }