/*ALL*/
body {
  font-family: 'Zen Kaku Gothic New', 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
padding: 0;
color: #1a212a;
}



html {
  scroll-behavior: smooth;
}
html, body {
  font-family: 'Zen Kaku Gothic New', 'Helvetica Neue', Arial, sans-serif;
}





/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  background: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
  z-index: 1000;
}

.header__inner {
  max-width: 95vw;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.header__nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
}

.header__nav a {
  text-decoration: none;
  color: #1a212a;
  font-weight: 500;
}

.header__buttons {
  display: flex;
  gap: 12px;
}

.btn {
  display: inline-block;
  padding: 0.5em 1.2em;
  border-radius: 24px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
  font-size: 16px;
}

.btn--outline {
  border: 2px solid #1e3080;
  color: #1e3080;
  background: #fff;
}

.btn--outline:hover {
  background: #f0f2ff;
}

.btn--primary {
  background: linear-gradient(0deg, #002eff, #003dd2);
  color: #fff;
}

.btn--primary:hover {
  background: #16245f;
}

.header__logo img {
  height: 32px;
  width: auto;
}

/* =========================
   Hero Section
========================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
   aspect-ratio: 1400 / 570; /* アスペクト比を固定 */
  overflow: hidden;
  margin-top: 72px;
}

.hero-image img {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  object-fit: cover; /* はみ出す分はトリミング */
}

.hero-content {
  position: relative;
  max-width: 900px;
  margin-left: 15%; /* 左寄せ */
  color: #fff;
  text-align: left;
  filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.6));
}

.hero-logo {
  height: 4.5rem;
  margin-left:10px;

}

.hero-sub {
  font-size: 28px;
  margin: 0 0 10px 0;
}

.hero-title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.3;
  margin-top:2px;
  display: flex;
  align-items: center;
  gap: px; /* ロゴと「で」の間隔 */
}

.hero h1.hero-title {
  margin-bottom: 0; /* 下の余白をなくす */
}

.hero-de {
  font-size: 60px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.hero-desc {
  font-size: 24px;
  margin-bottom: 30px;
  font-weight: 500;
    filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.6));
}

.hero p.hero-desc {
  margin: 0;              /* 一旦全部リセット */
  margin-top: 8px;       /* 上にだけ好きな値をつける */
  margin-bottom: 32px;       /* 下はなくすなら0 */
}

.hero-buttons {
  display: flex;
  gap: 20px;
}

.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}

.btn-gray {
  background: #58616E;
  color: #fff;
}

.btn-blue {
  background: #0051BA;
  color: #fff;
}


/* =========================
   Overview Section
========================= */
.overview {
  padding: 72px 5%;
  background: #fff;
  text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* サブコピー */
.overview__subtitle {
  font-size: 32px;
  line-height: 46px;
  font-weight: 700; /* Bold */
  margin-bottom: 0px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

/* メインコピー */
.overview__title {
  font-size: 52px;
  line-height: 75px;
  font-weight: 900; /* Black */
  margin: 8px 0 60px; /* ← 上だけ20pxに変更 */
  font-family: 'Zen Kaku Gothic New', sans-serif;
  padding-top: 0px;
}

/* =========================
   Overview Section - Feature Cards (CSS)
========================= */

/* グリッド：カード間は18px（デザイン準拠） */
.overview__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px; /* ← 24px から 18px に */
  margin-bottom: 40px;
}

/* カード本体：青枠・角丸・内側24px */
.feature-card {
  position: relative;
  background: #fff;
  border: 4px solid #004AAF;             /* 青枠を太めに */
  border-radius: 20px;                    /* 角丸強め */
  padding: 24px;                          /* 内側24px */
  /*box-shadow: 0 8px 24px rgba(0, 42, 119, 0.12);*/
}

/* 左上の番号バッジ：直径52px、重ね配置 */
.feature-card__badge {
  position: absolute;
  top: -26px;                              /* 52pxの半分だけ突き出す */
  left: -26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #004AAF;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  line-height: 52px;
  text-align: center;
  /*box-shadow: 0 4px 10px rgba(0,0,0,.12);*/
}

/* リード：20px/29、中央揃え、下余白8px */
.feature-card__lead {
  font-size: 20px;
  line-height: 29px;                       /* デザインの 29 に合わせる */
  font-weight: 700;                        /* Bold */
  text-align: center;
  margin: 0 auto;
}

/* タイトル：24px/35、青、中央、下余白24px */
.feature-card__title {
    font-size: 26px;
    line-height: 35px;
    font-weight: 700;
    color: #004AAF;
    text-align: center;
    margin: 0 0 16px;
}

/* 画像*/
.feature-card__image {
  border-radius: 16px;
  overflow: hidden;
}
.feature-card__image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3/ 2;
  object-fit: cover;
}

/* カード内の上下バランス（必要なら微調整） */
@media (min-width: 960px) {
  .feature-card {
    padding: 24px;
  }
}


.overview__subcopy {
  font-size: 1.1rem;
  margin-bottom: 24px;
}

.highlight {
  color: #004AAF;
  font-weight: 700;
}

.overview__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  list-style: none;
  font-weight: 200;
}

.overview__badges li {
  background: #1e3080;
  color: #fff;
  padding: 8px wpx;
  border-radius: 20px;
  font-size: 0.9rem;
}

/* =========================
   Overview Section - Subcopy
========================= */
.overview__subcopy {
  font-size: 32px;          /* デフォルトサイズ */
  line-height: 52px;        /* 行間を46に統一 */
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

/* 青色は全体で共通 */
.overview__subcopy .highlight {
  color: #004AAF;
  font-weight: 700;
}

/* 3 → 52px */
.overview__subcopy .highlight--num {
  font-size: 52px;
}

/* 機能 → 40px */
.overview__subcopy .highlight--big {
  font-size: 40px;
}

/* その他（補足部分）→ 32px */
.overview__subcopy .highlight--mid {
  font-size: 32px;
}

/* =========================
   Overview Section - Badges (3列×2段固定)
========================= */
/* 3列×2段。各列は内容幅ベースで可変 */
.overview__badges {
  display: flex;
  flex-wrap: wrap;         /* 横に並べて、収まらなければ折り返す */
  justify-content: center; /* どセンターに寄せる */
  gap: 24px;               /* 横・縦ともに24px間隔 */
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: 1000px;
}


.overview__badges li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 20px;
  border-radius: 9999px;
  background: #02b701;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 35px;
  white-space: nowrap; /* 折り返さずpillを1行 */
  font-weight: 500;
}
/* アイコン */
.badge-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;height:24px;
  top: 3px;   /* ↑↓ を数pxで調整 */
}

  .badge-icon img {
  width: 24px;
  height: 24px;
  display: block;
   vertical-align: middle;  /* ← テキスト中央に揃える */
}

/* タブレット2列、スマホ1列 */
@media (max-width:1024px){
  .overview__badges { grid-template-columns: repeat(2, max-content); }
}
@media (max-width:600px){
  .overview__badges { grid-template-columns: 1fr; justify-items: center; }
}



/* =========================
   Functions Section
========================= */
/* 外側：背景は幅いっぱい */
.functions {
  background: #f7f7f7;
  padding: 72px 5%;
}

/* 内側：コンテンツ幅を制御 */
.functions__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; /* 左右余白（スマホ対策） */
  flex-direction: column;
  gap: 60px;
  text-align: center;
}


/* セクションタイトル */
.functions__subtitle {
  font-size: 24px;
  line-height: 1.6;
  font-weight: 700;
  margin-bottom: 8px;
  margin-top: 0px;
}

.functions__title {
  font-size: 40px;
  line-height: 1.4;
  font-weight: 700;
  color: #1a212a;
  margin-top: 0px;
}

.functions__title .highlight {
  color: #004AAF;
}

/* 機能ブロック */
.function-item {
  display: flex;
  align-items: center;
  gap: 40px;
  text-align: left;
}

.function-item.reverse {
  flex-direction: row-reverse;
  margin-top: 40px;
  margin-bottom: 40px;
}

.function-image {
  width: 580px;       /* 横幅固定 */
  height: 400px;      /* 高さ固定 */
  border-radius: 12px;
  overflow: hidden;   /* 角丸に沿って画像を切る */
  flex-shrink: 0;     /* 小さく潰れないようにする */
}

.function-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* coverでトリミング */
  display: block;
}

.function-text {
  flex: 1;
}

.function-text h3 {
  font-size: 27px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #1a212a;
}

.function-text p {
  font-size: 20px;
  line-height: 1.8;
  color: #333;
  font-weight: 500;
  word-break: break-word;   /* 単語の途中でも折り返し */
  text-align: justify;        /* 両端揃え */
}


/* =========================
   CTA Section
========================= */
.cta {
  background:#172692;
  padding: 60px 20px;
  text-align: center;
}

.cta__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.cta__title {
  color: #fff;
  font-size: 35px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 0px;
}

.cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px; /* ボタン間の余白 */
}

/* ボタン共通 */
.cta .btn {
  display: inline-block;
  border-radius: 9999px;      /* pill型 */
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: 0.3s;
}


/* アウトライン白 */
.btn--outline-light {
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
}
.btn--outline-light:hover {
  background: rgba(255,255,255,0.1);
}

/* 白塗り */
.btn--white {
  background: #fff;
  color: #004AAF;
  border: 2px solid #fff;
}
.btn--white:hover {
  background: #f7f7f7;
}


/* =========================
   Roles Section
========================= */

/* セクションタイトル（Roles用） */
.functions__subtitle,
.functions__title {
  text-align: center;
}
.roles {
  background: #fff;
  padding-top: 72px;
  padding-bottom: 40px;
}
.roles__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
/* グリッド */
.roles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ---- カード本体（テーマ変数で色替え） ---- */
.role-card{
  --role-head-bg: #004AAF;     /* ヘッダー帯 */
  --role-border:  #004AAF;     /* 枠線色 */
  --badge-bg:     #00B900;     /* バッジ背景 */
  --badge-check:  #fff;        /* チェック色 */

  background: #fff;
  border: 3px solid var(--role-border);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ヘッダー帯（72px） */
.role-card__head{
  background: var(--role-head-bg);
  color: #fff;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 24px;


}

/* 本文領域 */
.role-card__body{
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 円形イメージ（直径=220px想定） */
.role-card__image{
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}
.role-card__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.role-card__text{
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
  font-weight: 500;
  margin:0;
}

/* バッジ（下部・左右に並ぶ） */
.role-card__badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;     /* スクショ目安：縦16 / 横32 */
  margin-top: 8px;
  list-style: none;
  padding: 0;
  margin:0 auto;
}
.role-card__badges li{
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: var(--badge-bg);
  color: #fff;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.role-card .badge-icon
{display: inline-block;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px
}
.role-card .badge-icon img{
  width:16px;
  height:16px;
  display: block;
  transform: translateY(2px);
}

/* ---- テーマ（色替え） ---- */
/* 作業者：青系（デフォルトままでもOK） */
.role-card--worker{
  --role-head-bg:#3C82F6;
  --role-border:#3C82F6;
  --badge-bg:#3C82F6;
  --badge-check:#fff;
}
/* リーダー：別色の例 */
.role-card--leader{
  --role-head-bg:#3149db;
  --role-border:#3149db;
  --badge-bg:#3149db;
  --badge-check:#fff;
}
/* 経営者：別色の例 */
.role-card--exec{
  --role-head-bg:#0f215c;
  --role-border:#0f215c;
  --badge-bg:#0f215c;
  --badge-check:#fff;
}


/* =========================
   Consultation CTA Section
========================= */
.consultation {
  background: #fff;
  padding-top: 0px;
  padding-bottom: 72px;
  text-align: center;
}

.consultation__inner {
  max-width: 800px;
  margin: 0 auto;
}

.consultation__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 40px;
  color: #1a212a;
}

/* ボタン（大きめのpill型） */
.btn--primary-lg {
  display: inline-block;
  padding: 18px 60px;     /* 高さと横幅を大きめに */
  border-radius: 9999px;
  background: #004AAF;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.btn--primary-lg:hover {
  background: #003080;
}


/* =========================
   Integration Section
========================= */
.integration {
  background: #f7f7f7;
  padding: 80px 20px;
  text-align: center;
}

.integration__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.integration__title {
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center; /* タイトル中央寄せ */
  gap: 12px;
  color: #1a212a;
  margin-bottom: 40px;
}

.integration__icon {
  width: 38px;
  height: 38px;
  vertical-align: middle;
  position: relative;
  top: 1px;
}


.integration__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.integration__item {
  background: #004AAF; /* デフォルト背景 */
  border-radius: 20px;
  aspect-ratio: 1 / 1; /* 正方形 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.integration__item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ロゴは切れないように表示 */
}

.integration__text {
  font-size: 20px;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  font-weight: 500;
}


/* =========================
   Pricing Section
========================= */
.pricing {
  background: #fff;
  padding: 80px 20px;
}

.pricing__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pricing__title {
  text-align: center;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  margin-bottom: 46px; /* 指示の46に合わせる */
}

.pricing__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 62px; /* スクショの間隔 */
  align-items: stretch;
}





.plan {
  background: #fff;
  border: 3px solid #0B4FB3;        /* 外枠 */
  border-radius: 28px;               /* 角丸 */
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}

.plan__head {
  background: #0B4FB3;
  color: #fff;
  padding: 24px 16px;
  text-align: center;
  border-radius: 24px 24px 0 0;      /* 上側だけ角丸を強めに */
}

.plan__label {
  font-size: 18px;  /* 16〜18相当 */
  line-height: 28px;
  margin: 0 0 0px;
}

.plan__name {
  font-size: 32px;  /* 大きめ見出し */
  line-height: 42px;
  margin: 0;
  font-weight: 700;
}

.plan__body {
  padding: 24px 0px 32px;
  display: flex;
  flex-direction: column;

}

.plan__lead {
  text-align: center;
  font-size: 18px;
  line-height: 1.6;         /* 24px行間に近似 */
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #D1E0F6; /* セクション区切り線 */
}

.plan__row {
  text-align: center;
  padding: 24px 16px;
  border-bottom: 1px solid #D1E0F6;
}

.plan__row:last-child { border-bottom: none; }

/* 月額 */
.plan__priceLabel {
  color: #6B7280;
  font-size: 16px;
  margin-bottom: 8px;
}

.plan__price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.plan__priceNum {
  font-size: 64px;         /* 大きな数字 */
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
}

.plan__priceUnit {
  font-size: 28px;
  font-weight: 800;
}

/* 参考価格 */
.plan__refLabel {
  color: #6B7280;
  font-size: 16px;
  margin-bottom: 8px;
}

.plan__ref {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.plan__refNum {
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
}

.plan__refUnit {
  font-size: 20px;
  font-weight: 800;
}

.plan__row--refSplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}

.plan__row--refSplit .plan__refCol {
  padding: 24px 16px;
}

.plan__row--refSplit .plan__refCol:first-child {
  border-right: 1px solid #D1E0F6;
}

.plan__note {
  font-size: 14px;
  color: #374151;
  margin-top: 6px;
}

/* アクション（緑ピル） */
.plan__actions {
  display: grid;
  gap: 8px;
  justify-content: center;
  padding-top: 16px;
}

.pill {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  width: 15rem;
}

.pill--success {
  background: #22B31F;
  color: #fff;
}

/* 下部の案内＋ボタン */
.pricing__more {
  margin-top: 52px; /* スクショに合わせて余白 */
  text-align: center;
}

.pricing__moreTitle {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 24px;
}

/* 既存の大ボタンを流用（高さ60px相当） */
.btn--primary-lg {
  display: inline-block;
  padding: 18px 60px;
  border-radius: 9999px;
  background: #004AAF;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}
.btn--primary-lg:hover { background: #003a8f; }


/* =========================
   Device Section
========================= */
.device {
  background: #f7f7f7;
  padding: 80px 20px;
}

.device__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.device__title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 40px;
  text-align: center;
}

.device__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  align-items: start;
}

/* 左側 */
.device__image {
  width: 100%;
  margin-bottom: 16px;
}
.device__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}
.device__name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}
.device__desc {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* 右側スペック表 */
.device__specs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.spec-row {
  display: grid;
  grid-template-columns: 200px 1fr; /* 小数点なしで固定 */
  gap: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.spec-label {
  background: #d9d9d9;
  font-size: 14px;
  font-weight: 500;
  padding: 16px 20px;
  text-align: left;
}
.spec-value {
  font-size: 14px;
  font-weight: 400;
  padding: 16px 20px;
  text-align: left;
  background: #fff;
}

/* ====== section base ====== */
.solve-section {
  padding: 80px 0 72px;              /* 整数だけ */
  background: #fff;
}

.solve__inner {
  width: 100%;
  max-width: 1080px;                 /* 1080 = 1000より少し広めでも整数 */
  margin: 0 auto;
  padding: 0 24px;                   /* 側余白も整数 */
  box-sizing: border-box;
  text-align: center;
}

/* タイトル */
.solve__eyebrow {
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
  margin: 0 0 16px;
}

.solve__title {
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  margin: 0 0 32px;
  letter-spacing: 1px;               /* 1px で小数点回避 */
}

/* ====== cards layout ====== */

.solve__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;                         /* デザイン指示の 40px */
  align-items: start;
}

/* ====== card ====== */
.solve-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  overflow: hidden;
  border: 4px solid #1b57b3;         /* 右カード色に合わせた枠（左は後で上書き） */
}

/* 左カードは枠線をグレー寄りに */
.solve-card--left {
  border-color: #475567;
}

/* ヘッダー（角丸強め・固定高さで小数回避） */
.solve-card__head {
  background: #475567;
  color: #fff;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  text-align: center;
  padding: 20px 16px;                /* 20/16px */
}

.solve-card__head--blue {
  background: #0a4aae;               /* ブランドブルー */
}

/* 画像プレースホルダー（ここを画像に差替え） */
/* 左カード用 */
.solve-card--left .solve-card__image {
  background-image: url("../image/solve-left.jpg");
  aspect-ratio: 9 / 5;   /* ← 9:5に固定 */
  background-size: cover;   /* ズームせず全体を表示 */
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  margin: 24px 24px 8px;
}

/* 右カード用 */
.solve-card--right .solve-card__image {
  background-image: url("../image/solve-right.jpg");
  aspect-ratio: 9 / 5;   /* ← 9:5に固定 */
  background-size: cover;   /* ズームせず全体を表示 */
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  margin: 24px 24px 8px;
}

/* リスト */
.solve-card__list {
  text-align: left;
  list-style: none;
  padding: 0 24px 24px;
  margin: 0;
  font-size: 18px;
  line-height: 32px;                 /* 行送りも整数 */
}

/* 箇条書きの丸（左=グレー／右=ブルー） */
.solve-card__list li {
  position: relative;
  padding-left: 24px;
  font-weight: 500;
  margin-left: 5%;
  margin-right: 5%;
}

.solve-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;                         /* 行高32pxに対して中央より少し上で整数 */
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: currentColor;
}

.solve-card__list--left {
  color: #5a5a5a;                    /* テキスト色 */
}
.solve-card__list--left li::before {
  background: #5a5a5a;
}

.solve-card__list--right {
  color: #202020;
}
.solve-card__list--right li::before {
  background: #0a4aae;               /* ブルーの丸 */
}

/* ====== responsive ====== */
@media (max-width: 768px) {
  .solve__title { font-size: 40px; line-height: 48px; }
  .solve__cards { grid-template-columns: 1fr; gap: 32px; }
  .solve-card__image { height: 200px; }
}

/* =======================
   CTA Section
======================= */
.cta {
  background-color: #172692; /* 青 */
  color: #fff;
  padding: 60px 0;
  text-align: center;
}

.cta__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

.cta__subtitle {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 24px;
}

.cta__logo img {
  max-width: 360px;   /* ロゴの横幅調整 */
  width: 100%;
  height: auto;
  margin-bottom: 40px;
}

.cta__buttons {
  display: flex;
  justify-content: center;
  gap: 24px;
}

/* ボタン共通 */
.btn {
  display: inline-block;
  padding: 12px 48px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s;
}

/* アウトライン（ヘッダ） */
.btn--outline {
  border: none;
  background: linear-gradient(0deg, #007aff, #032dec);
  color: #fff;
}

.btn--outline:hover {

  color: #004AAF;
}

/* 白ボタン（お問い合わせ） */
.btn--white {
  background: #fff;
  color: #004AAF;
}

.btn--white:hover {
  opacity: 0.8;
}






/* =======================
   Footer
======================= */
.footer {
  background-color: #1a212a;
  color: #fff;
  padding: 16px 0 16px; /* 上16px、下80px */
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 11px;
}

.footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.footer__links {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  justify-content: center;
  gap: 32px; /* 運営会社とプライバシーポリシーの間 */
}

.footer__links a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: opacity 0.3s;
}

.footer__links a:hover {
  opacity: 0.7;
}

.footer__copy {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
}


/* =========================
   Buttons (Global)
========================= */
.btn {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  line-height: 1.4;
}

/* --- 資料ダウンロード --- */
.btn-download {
  background: linear-gradient(0deg, #007aff, #032dec);
  color: #fff;

}
.btn-download:hover {
  opacity: 0.9;
}

/* --- お問い合わせ --- */
.btn-contact {
  background: linear-gradient(0deg, #002eff, #003dd2);
  color: #fff;
}
.btn-contact:hover {
  opacity: 0.9;
}

/* ===== ヘッダー以外のボタン幅統一 ===== */
.hero .btn,
.cta .btn,
.pricing .btn,
.footer .btn {
  width: 240px; /* ← 好きな共通幅に変更 */
}

/* ===== プランごとの色分け ===== */

/* ライトプラン */
.plan--light .plan__head {
  background: #3C82F6; /* 緑系 */
}
.plan--light {
  border-color: #3C82F6;
}


/* スタンダードプラン */
.plan--standard .plan__head {
  background: #3149db; /*  青系 */
}
.plan--standard {
  border-color: #3149db;
}


/* アドバンスプラン */
.plan--advance .plan__head {
  background: #0f215c; /* 紫系 */
}
.plan--advance {
  border-color: #0f215c;
}


/* === ピル色分け === */

.pill--basic {
  background-color:#3C82F6; /* 青系：基本性能 */
  color: #fff;
}

.pill--custom {
  background-color: #3149db; /* オレンジ系：カスタマイズ開発 */
  color: #fff;
}

.pill--consult {
  background-color: #0f215c; /* 緑系：専門家による業務整理 */
  color: #fff;
}




/* =========================
   Responsive Design
========================= */
/* === ヘッダー === */
/* PCではハンバーガー非表示 */
.hamburger {
  display: none;
}

/* モバイル用メニュー 初期状態は非表示 */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 70%;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0,0,0,0.15);
  transition: right 0.3s ease;
  z-index: 3000;
  padding: 40px 20px;
}
.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.mobile-nav ul li a {
  text-decoration: none;
  color: #000;
  font-size: 16px;
  font-weight: 500;
}
.mobile-nav.active {
  right: 0;
}

/* オーバーレイ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2500;
}
.overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ===================================
   レスポンシブ
====================================== */
/* PCではハンバーガー非表示 */
.hamburger {
  display: none;
}



@media (max-width: 767px) {
    /* コンテンツエリア */
  .overview {
      padding: 24px 5%;}

  .header__logo img {
        height: 28px;
        width: auto;
      }

  /* PCナビを隠してハンバーガー表示 */
  .header__nav,
  .header__buttons {
    display: none; /* PC用ナビ＆ボタンを隠す */
  }
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: #000;
    border-radius: 2px;
  }

  /* モバイルメニュー */
  .mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 50%;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    z-index: 1001;
    padding: 2rem 1.5rem;
  }

  .mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
  }

  .mobile-nav li {
    border-bottom: 1px solid #eee;
  }

  .mobile-nav li a {
    display: block;
    padding: 1rem 0;
    font-size: 1.1rem;
    color: #333;
    text-decoration: none;
  }

  .mobile-nav li a:hover {
    color: #0030a5;
  }

  /* 閉じるボタン */
  .mobile-nav__close {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1rem;
  }

  /* オーバーレイ */
  .overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1000;
  }

  /* 表示状態 */
  .mobile-nav.active {
    right: 0;
  }
  .overlay.active {
    opacity: 1;
    visibility: visible;
  }



/* ============================== エリアA ======================== */
.overview__subtitle {
    font-size:4vw;
    line-height: 1.5em;}

.overview__title {
    font-size:7vw;
    margin: 0px 0 32px;
    line-height: 1.5em;
  }

  .feature-card__badge {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    top: -16px;
    left: -16px;
  }
  .feature-card__lead {
    font-size: 16px;
}


.feature-card__title {
    font-size: 5.5vw;}

    .overview__subcopy .highlight--num{
        font-size: 8vw;

    }

    .overview__subcopy .highlight--big  {
        font-size: 6vw;
    }
    .overview__subcopy {
      font-size: 6vw;
  }
      .overview__subcopy{
        line-height: 1.5;
      }

      p.overview__subcopy{
      margin-top: 0px;
      }

.overview__features{
  margin-bottom: 20px;
}

  .overview__badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 12px;
    max-width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    margin: 24px auto;
    gap: 8px 0px;
  }

  .overview__badges li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 75%;
    border-radius: 100px;
    font-size: 14px;
    white-space: nowrap;
    gap: 2px;

  }

   .badge-icon {
     width: 18px;
     height: 18px;
   }
   .badge-icon img {
     width: 14px;
     height: 14px;
      transform: translateY(-1.5px);
   }
}



/* ============================== エリアB ======================== */
@media (max-width: 768px) {
.functions__inner {
 padding: 0px;}
.functions__subtitle {
    font-size: 4.5vw;}
.functions {
    padding: 40px 5%;
}
.functions__title {
    font-size: 7vw;
}}

@media (max-width: 768px) {

  .function-item {
    flex-direction: column !important; /* スマホは縦並びに強制 */
    gap:0px;
  }
.function-text h3 {
text-align: center; /* 中央寄せ */
margin-bottom: -5px;
}

  .function-image {
    width: 100%;     /* 横幅いっぱい */
    height: auto;    /* 高さは自動 */
  }

  .function-text h3 {
    font-size: 5vw;
    margin-bottom: px;
  }

  .function-text p {
    font-size: 15px;
    line-height: 1.6;
  }

  .function-item.reverse {
    margin-top: 24px;
    margin-bottom: 24px;
}
}

/* ============================== エリアC ======================== */
@media (max-width: 768px) {
.cta__title {
font-size: 6vw;
}

.cta__buttons {
    display: grid
;}}


/* ============================== エリアD ======================== */
@media (max-width: 767px) {
  .roles {
padding-top: 40px;}
  .roles__grid {
    grid-template-columns: 1fr; /* 1列に変更 */
    gap: 24px;                  /* 縦の余白調整 */
  }


.role-card__head {
    height: 52px;}
.role-card__head {
  font-size: 5vw;}
.role-card__text {
  font-size: 15px;}
.role-card__badges {
display: block;}

.consultation__title {
    font-size: 6vw;
    margin-bottom: 16px;}
h2.consultation__title {
    margin-top: 0px;}
}


/* ============================== エリアE ======================== */

@media (max-width: 768px) {
.integration {
    padding: 32px 32px;}

.integration__title {
font-size: 7vw;}

h2.integration__title{
margin-top: 0px;
padding-top: 0px;}

.integration__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap:8px;
margin-bottom: 24px;
}

.integration__item {
border-radius: 16px;}

.integration__title {
display: grid;            /* アイコンと文字を横並び */
align-items: center;      /* 垂直方向中央 */
justify-content: center;  /* 全体を中央寄せ */
margin-bottom: 24px;
line-height: 1.4;         /* 行間は少し詰める */
gap:1px;
}

.integration__icon {
width:32px;              /* アイコン大きめ */
height: 32px;
margin: 0 auto;
margin-bottom: 4px;
}
.integration__text {
  font-size: 14px;}
  }

/* ============================== エリアF ======================== */
/* スマホ専用：タブはflex */
@media (max-width: 1024px) {
  .tabs {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
  }

  .tab-button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    background: #eee;  /* 非アクティブ時は薄いグレー */
    color: #333;
  }

  /* アクティブ状態で色を各プランに合わせる */
  .tab-button[data-tab="light"].active {
    background-color: #3C82F6;
    color: #fff;
  }
  .tab-button[data-tab="standard"].active {
    background-color: #3149db;
    color: #fff;
  }
  .tab-button[data-tab="advance"].active {
    background-color: #0f215c;
    color: #fff;
  }

  /* プラン本体は通常表示 */
  .plan {
    display: none;   /* 初期非表示 */
  }
  .plan.active {
    display: block;  /* 選ばれたものだけ表示 */
  }
.pricing__cards {
    grid-template-columns: repeat(1, 1fr);
}

/*=====プランの文字======*/


.plan__head {
padding: 8px 16px;}
.plan__label {
font-size: 14px;
line-height: 1.5em;}
.plan__name {
font-size: 24px;
line-height: 1.5}
.plan__body {
padding: 16px 0px 24px;}
.plan__lead {
font-size: 16px;}
.plan__priceNum,.plan__refNum {
font-size: 40px;}
.plan__priceUnit{
  font-size: 20px;}
.plan__row {
padding: none;}
.pill {
font-size: 16px;
font-weight: 500;}

/*=====CTA======*/

.pricing__moreTitle {
    font-size: 18px;
      margin: none;}
      .pricing {
        padding: 40px 20px;
    }

}

/* PCではタブ非表示・カード横並び */
@media (min-width: 1025px) {
  .tabs {
    display: none;
  }
  .plan {
    display: block;  /* PCは全部表示 */
  }
}
/* ============================== エリアG ======================== */
@media (max-width: 768px) {
  .device__grid {
    grid-template-columns: 1fr; /* 1カラムに変更 */
    gap: 1px; /* 縦方向の余白を少し調整 */
  }

  .device__left {
    text-align: center; /* 中央寄せにすると見やすい */
  }

  .device__image img {
    max-width: 80%; /* 画像が大きすぎないように */
    margin: 0 auto;
  }

  .device__name {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .device__desc {
    font-size: 14px;
    line-height: 1.6;
  }

  .device__specs {
    gap: 16px; /* スペックの行間を少し詰める */
  }

  .spec-row {
    grid-template-columns: 1fr; /* ラベルと値を縦積み */
  }
  .spec-label {
    background: #f0f0f0;
    font-weight: 600;
    padding: 8px 20px;
  }
  .spec-value {
    padding: 8px 20px;
  }

  .device {
      padding: 40px 20px;
  }}

/* ============================== エリアE ======================== */
@media (max-width: 768px) {
.solve__eyebrow {
    font-size: 4.5vw;}
.solve__title {
    font-size: 6.4vw;}

p.solve__eyebrow{
margin:0px;
}
.solve__eyebrow{
margin:0px;
line-height: 1em;
}
.solve-card__head {
  font-size: 18px;
padding: 8px 16px;
font-weight: 500;}

.solve-card__image {
    height: 160px;
}
.solve-card__list {
    font-size: 16px;
  line-height: 1.5em;}


  /* 三角アイコン */
  .triangle-separator {
    width: 0;
    height: 0;
    margin: 0px auto; /* 上下に余白、中央寄せ */
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 24px solid #0a4aae; /* 青色の三角 */
  }

      .solve__cards {
          gap: 24px;
      }

}

  /* ===============CTA rust======================================= */
  /*=====CTA ラスト====*/
  @media (max-width: 768px) {
  .cta__subtitle{
  font-size: 1.25em;
  font-weight: 500;
  }
  p.cta__subtitle{
  margin-bottom: 8px;
  }
  .cta__logo img {
      max-width: 300px;
      margin-bottom: 8px;}

  .cta__buttons {
  gap: 16px;}

  }

  /* ===============各種タイトル======================================= */
  /*===見出し系==*/
    @media (max-width: 767px) {
  .device__title,.pricing__title,h2.integration__title,.functions__title{
    font-size: 6vw;
  margin-bottom: 16px;}}
}
/*===コミ出し系====*/


















/* === 横スクロール対処 === */
html, body {
  max-width: 100%;
  overflow-x: hidden; /* 横スクロールを封じる */
}

/* === HERO対処 === */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  aspect-ratio: 1400 / 570; /* PC基準で比率固定 */
  overflow: hidden;
  margin-top: 72px;
}

.hero-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* デフォルトは非表示 */
}

/* PC/タブレット */
@media (min-width: 1025px) {
  .hero-img--pc { display: block; }
}

/* スマホ */
@media (max-width: 768px) {
  .hero {
    margin-top: 72px; /* ヘッダーに被らせない */
    aspect-ratio: auto; /* ← 高さ制御を外す */
  }
  .hero-content {
    padding-top: 380px;
      margin-left: 5%; /* 左寄せ */
}


  .hero-img--sp {
    display: block;
    width: 100%;
    height: auto;       /* 縦横比を維持して全体表示 */
    object-fit: contain; /* ← 切らずに収める */
  }

  .hero-img--pc {
    display: none;
  } }


  @media (max-width: 1024px) {
  .hero-title {
    font-size: 7.5vw;   /* ← SP用の小さめ文字サイズ */
    line-height: 1.3;
  }

  .hero-de {
    font-size: 7.5vw;   /* 「で」も合わせて */
  }

  .hero-desc {
    font-size: 3.5vw;   /* サブコピー */
  }

  .hero-logo {
    height: 40px;      /* ロゴは固定してブレ防止 */
    margin-left: 5px;
  }
  .hero-buttons {
   display: none;
}
}

/*==========brクラス==========*/
/* デフォルトは非表示（PC用） */
.sp-only {
  display: none;
}

/* スマホだけ表示 */
@media (max-width: 767px) {
  .sp-only {
    display: inline;
  }
}




/*==========マージン処理==========*/
@media (max-width: 768px) {
  h2 {
    margin-top: 0;
    margin-bottom: 16px;
  }
}

/* === スマホ基準 === */
@media (max-width: 768px) {
  .hero-title,
  .hero-de { font-size: 7.5vw; }     /* H1 */
  .overview__title,
  .functions__title,
  .pricing__title,
  .device__title,
  .integration__title,
  .solve__title,
  .consultation__title,
  .cta__title { font-size: 6vw; }    /* H2 */
  .function-text h3 { font-size: 5vw; } /* H3 */
  p, .function-text p, .device__desc,
  .plan__lead, .integration__text,
  .solve-card__list, .role-card__text { font-size: 16px; } /* 本文 */
  .plan__note, .spec-value, .spec-label,
  .footer__copy { font-size: 12px; } }

/* ==== スマホ専用固定ボタン ==== */
.sp-fixed-buttons {
  display: none; /* デフォルト非表示（PC用） */
}

@media (max-width: 768px) {
  .sp-fixed-buttons {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.15);
  }

  .sp-btn {
    flex: 1;
    text-align: center;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
  }

  /* 左：資料ダウンロード */
  .sp-btn--download {
    background: linear-gradient(0deg, #007aff, #032dec);
  }

  /* 右：お問い合わせ */
  .sp-btn--contact {
    background:linear-gradient(0deg, #002eff, #003dd2);
  }

  /* 少し角丸に */
  .sp-btn:first-child {
    border-right: px solid rgba(255,255,255,0.2);
  }

  .footer {
    padding: 16px 0 72px;
}}

/*======hero調整=========*/
@media (max-width: 768px) {
  .hero {
    position: relative;
    width: 100%;
    height: auto;          /* 高さは中身で決めずに比率で決める */
    aspect-ratio: 375 / 500; /* ← SP用の比率に合わせて調整 */
    overflow: hidden;
  }

  .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../image/fv-sp.jpg"); /* SP用画像 */
    background-size: cover;   /* 縦横いっぱいに */
    background-position: center;
    z-index: 1;
  }

  .hero-image img {
    display: none; /* SPではimg非表示、背景に一本化 */
  }

  .hero-content {
    position: absolute;
    bottom: 0%;     /* 下からの位置 */
    left: 45%;
    transform: translateX(-50%);
    width: 90%;      /* テキスト幅 */
    color: #fff;
    text-align: center;
    z-index: 2;
  }
  .hero p.hero-desc {
    margin-bottom: 24px;
}
}

/*=======ビフォーアフター=====*/
/* PC: 2列 */
.solve__cards {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 横に2枚 */
  gap: 40px;                      /* PC時の間隔 */
  align-items: start;
}

/* スマホ: 1列に切り替え */
@media (max-width: 960px) {
  .solve__cards {
    grid-template-columns: 1fr;   /* 縦積み */
    gap: 24px;                    /* 縦の余白 */
  }
}
.triangle-separator { display: none; }
@media (max-width: 960px) {
  .triangle-separator { display: block; }
}





/* ====================================================== */
/* タブレット対処 (767px〜1024px) */
/* ====================================================== */
@media (min-width: 767px) and (max-width: 1024px) {

/*タイトル周り*/
.overview__title, .functions__title, .pricing__title, .device__title, .integration__title, .solve__title, .consultation__title, .cta__title {
    font-size: 32px;
}



  /* ===== Hero ===== */
  .hero {
    aspect-ratio: 1400 / 570;
  }
  .hero-img--pc { display: block !important; }
  .hero-img--sp { display: none !important; }

  .hero-image img {
    width: 110%;
    left: -5%;
  }
  .hero-content {
    position: absolute;
    bottom:  20%;              /* 画像の底辺から少し上 */
    left: 10%;
    transform: none;
    margin-left: 0;
    max-width: 80%;
    text-align: left;
  }
  .hero-title, .hero-de { font-size: 4.2vw; }
  .hero-desc { font-size: 2.5vw; }
  .hero-logo { height: 48px; }

  /* ===== Overview ===== */
  .overview {
    padding: 40px 5%;
  }
  .overview__subtitle { font-size: 28px; line-height: 1.5; }
  .overview__title { font-size: 32px; margin: 0 0 40px;    line-height: 1.25em; }
  .overview__subcopy .highlight--big { font-size: 32px; }
.overview__subcopy .highlight--num { font-size: 40px; }

  .overview__features {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .feature-card { padding: 20px; }
  .feature-card__title { font-size: 22px; }
  .feature-card__lead { font-size: 18px; }

  .overview__badges {
    width: 100%;
    justify-content: center;
    gap: 16px;
  }
  .overview__badges li {
    width: 40%;
    height: 40px;
    font-size: 18px;
    justify-content: center;
  }

  /* ===== Functions ===== */
  .function-item {
    gap: 24px;
  }
  .function-text h3 { font-size: 22px; }
  .function-text p { font-size: 16px; line-height: 1.7; }
  .functions__subtitle {font-size: 24px;}

  /* ===== Pricing ===== */
  .pricing__cards {
    grid-template-columns: repeat(1, 1fr);
    gap: 32px;
  }
  .plan__name { font-size: 28px; }
  .plan__priceNum { font-size: 40px; }

  /* ===== Roles ===== */
  .roles__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .consultation__title {
  font-size: 24px;   /* ← 好きなサイズに変更 */
}

  /* ===== Device ===== */
  .device__grid {
grid-template-columns: 1fr 2fr;
gap: 24px;
}
.device__image img {
max-width: 100%;}

.device__desc{
font-size: 14px;
text-align: left;
}
  .spec-row { grid-template-columns: 150px 1fr; }




  /* ===== Integration ===== */
  .integration__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  /*===解決=====*/
  .solve__cards {
    display: grid;                  /* gridに戻す */
    grid-template-columns: 1fr 1fr;     /* 1カラム */
    gap: 24px;
  }
  .triangle-separator {
    display: none!important;
}

  .triangle-separator {
    display: block;        /* 三角区切りも残すなら */
  }


  /* ===== CTA ===== */
  .cta__title { font-size: 28px; }
  .cta__buttons { gap: 20px; }

  /* ===== ヘッダー：SP仕様のまま ===== */
  .header__nav,
  .header__buttons { display: none !important; }
  .hamburger { display: flex !important; }
}





  /* ===== ヘッダーはSP仕様に固定 ===== */
  .header__nav,
  .header__buttons {
    display: none !important;
  }
  .hamburger {
    display: flex !important;
  }


/*=====タブ　バッジアイコン=====*/

.overview__badges .badge-icon {
top:-1px;
}
.overview__badges li {
    gap: 8px;
}


.integration__title {
  flex-direction: column; /* ← 縦並びに */
      align-items: center;    /* ← 中央寄せ */
      gap: 4px;
}
}

















/* PCだけ改行 */
.pc-only {
  display: none;
}
@media (min-width: 1025px) {
  .pc-only {
    display: block;
  }

}

/* タブレットでは非表示 */
.tab-hide {
  display: none;
}
@media (max-width: 768px), (min-width: 1025px) {
  .tab-hide {
    display: block;
  }
}


html, body {
 max-width: 100%;
 overflow-x: hidden; /* 横スクロールを封じる */
}


/* =========================
   Header Responsive Fix
========================= */
/* デフォルト: PC基準でナビ表示、ハンバーガー非表示 */
.hamburger { display: none; }

/* タブレット・スマホ (〜1024px) */
@media (max-width: 1024px) {
  .header__nav,
  .header__buttons { display: none !important; }

  .hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: #000;
    border-radius: 2px;
  }

  .role-card .badge-icon img{
    transform: translateY(2px);

}}

/* PC (1025px〜) */
@media (min-width: 1025px) {
  .header__nav,
  .header__buttons { display: flex !important; }
  .hamburger { display: none !important; }
}

/* ====================================================== */
/* タブレット用 ナビ調整 (767px〜1024px) */
/* ====================================================== */
@media (min-width: 767px) and (max-width: 1024px) {
  /* ===== メニューリスト ===== */
  .mobile-nav ul li {
    border-bottom: 1px solid #ddd;  /* 区切り線を復活 */
    padding: 20px;                 /* 余白少し広め */
  }

  .mobile-nav ul li a {
    font-size: 20px;               /* フォント少し大きめ */
  }

  /* ===== 閉じるボタン ===== */
  .mobile-nav__close {
    position: absolute;   /* ← 画面基準で配置 */
    top: 1rem;
    right: 1rem;          /* ← 右上に配置 */
    font-size: 3rem;
    background: none;     /* ← グレー背景消す */
    border: none;         /* ← 枠線も消す */
    cursor: pointer;
    line-height: 1;
  }
}
/* ====================================================== */
/* SP 調整 (767px〜1024px) */
/* ====================================================== */

@media (max-width: 767px) {
  .solve-section {
    padding: 40px 16px;   /* 上下40px 左右16pxくらいがスマホで自然 */
  }

  .solve__title {
    font-size: 20px;      /* スマホ用に少し小さめ */
    line-height: 1.5;
    margin-bottom: 24px;
  }

  .solve__cards {
    gap: 24px;            /* カード間も少し広めに */
  }
  p.solve__eyebrow {
      margin-bottom: 8px;
  }

  /* デフォルト非表示 */
  .back-to-top {
    display: none;
  }

  /* SPだけTOPに戻るボタン*/
  /* デフォルト非表示 */
  .back-to-top {
    display: none;
  }

  /* SP TOPに戻るボタン */
    .back-to-top {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 70px;          /* お問い合わせボタンの上 */
      right: 16px;
      width: 44px;
      height: 44px;
      background: #004AAF;   /* ブランドカラー */
      border-radius: 50%;
      text-decoration: none;
      z-index: 10000;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    /* 矢印アイコン（線で描く） */
    .back-to-top .arrow-up {
      display: block;
      width: 10px;
      height: 10px;
      border-left: 2px solid #fff;
      border-top: 2px solid #fff;
      transform: rotate(45deg);
      margin-bottom: -4px;
  }




}

/* ====================================================== */
/* PCだけ非表示にする改行
/* ====================================================== */
.pc-hide {
  display: inline; /* デフォルトは表示（SP・タブ） */
}

@media (min-width: 1025px) {
  .pc-hide {
    display: none; /* PCでは消す */
  }
}


/* ====================================================== */
/* 無料相談ボタン
/* ====================================================== */
.btn.btn--primary-lg {
  background: linear-gradient(180deg, #FF6B00, #e99700);  /* オレンジ→イエロー */
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 9999px;    /* pill型 */
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.btn.btn--primary-lg:hover {
  opacity: 0.9;             /* ホバーで少し暗く */
}

/* ====================================================== */
/*装飾
/* ====================================================== */
.cta {
  position: relative;
    z-index: 0;          /* 背景層にする */
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../image/texture.jpg") center/cover no-repeat;
  opacity: .2;        /* ← 半透明にする */
  pointer-events: none; /* クリックや操作に干渉しない */
    z-index: -1;           /* 背景として下に置く */
}

.overview__badges li {
  background: #01c600;

  color: #fff;
  border-radius: 9999px;
  padding: 8px 16px;
  font-weight: 600;
}


/* 共通：丸を消して独自マーカーにする */
.solve-card__list {
  list-style: none;   /* デフォルトの・を消す */
  padding: 0;
  margin: 0;
}

.solve-card__list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.75em;
  line-height: 1.6;
}

/* 既存の before を完全リセット */
.solve-card__list li::before {
  all: unset;         /* ← これで既存の背景や余計な設定を全部消す */
  content: "●";       /* 新しい丸を表示 */
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 0.9em;
  line-height: 1.6;
}

/* 左側（課題がたくさん）用：グレー丸 */
.solve-card--left .solve-card__list li::before {
  color: #666; /* グレー */
}

/* 右側（リベロサイトを使うと）用：ブルー丸 */
.solve-card--right .solve-card__list li::before {
  color: #004AAF; /* ブランドブルー */
}

/* グレー文字 */
.text-gray {
  color: #666; /* 左の●と同じグレー */
}

/* 青文字 */
.text-blue {
  color: #004AAF; /* 右の●と同じブランドブルー */
}

@media (min-width: 1025px) {
  .solve-card__list {
    padding: 20px;
  }
}

/* ====================================================== */
/*処置HERO
/* ====================================================== */
.hero-image,
.hero::before {
  z-index: -1;            /* 背景として下に */
  pointer-events: none;   /* 背景はクリック不可に */
}
.hero-content {
  position: relative;
  z-index: 1; /* 常に前面に */
}


@media (min-width: 767px) and (max-width: 1024px) {
  .hero-content {
    position: absolute;
    bottom: 5%;  /* 下から 5% の位置に */
    left: 5%;     /* 左から 5% の位置に */
    transform: none; /* 中央寄せ調整をリセット */
    margin: 0;       /* 余計なマージンがあればリセット */
    z-index: 2;      /* 背景に隠れないように前面に */
  }
}

/* ====================================================== */
/*タブレット以外改行
/* ====================================================== */
/* デフォルトは非表示（SPとタブレットでは改行しない） */
.tab-hide-br {
  display: none;
}

/* PCのみ改行する */
@media (min-width: 1025px) {
  .tab-hide-br {
    display: inline;
  }
}

/* ===== フローティングバナー ===== */
.floating-banner {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 300px; /* バナー幅は調整可 */
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.floating-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.floating-banner__close {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 16px;
  line-height: 24px;
}

/* スマホではフローティングバナーを非表示 */
@media screen and (max-width: 768px) {
  .floating-banner {
    display: none !important;
  }
}


/* スマホ専用 無料相談ボタン */
.sp-consult-btn {
  position: absolute;
  right: 60px;  /* ハンバーガーの幅＋余白分 */
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 12px;
  background: linear-gradient(180deg, #FF6B00, #e99700);
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}


@media screen and (min-width: 769px) {
  .sp-consult-btn {
    display: none; /* PCでは非表示 */
  }
}

/* ハンバーガーと横並びにする */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}



/*-------ボタン処理--------*/
.header__buttons .btn {
  display: inline-block;
  max-width: 150px;   /* ← お好みで幅を調整 */
  white-space: nowrap; /* 改行させない */
  overflow: hidden;    /* はみ出し部分を隠す */
  text-overflow: ellipsis; /* 「…」を付ける */
}


/* ========BAカード部分スマホ改良======= */

@media screen and (max-width: 767px) {

.solve-card--left .solve-card__image,.solve-card--right .solve-card__image {
    aspect-ratio: none;
    margin:  0 auto;
      width: 90%;
margin: 16px 16px 8px;
}
.solve__inner {
      padding:0;
}

.solve-card__image {
    height: 100%;
}

.solve-card__list li {
        font-size: 15.5px;
        letter-spacing: -.06em;
        padding-left: 1em;
        line-height: 1.2em;
    }
    .solve-card__list li::before {
    all: unset;
    content: "●";
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 0.8em;
    line-height: 1.6;
}

.solve-card__list {
    padding-top: .5em;
    padding-bottom: .5em;
}

}


/* =======スペック改良======= */

 .spec-value,.spec-label{
   font-size: 15px;
 }



  /*======特許=====*/
  .patent-badge {
      position: absolute;
      bottom: 24px;
      right: 24px;
      padding: 10px 24px;
      border: 2px solid #fff;
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      border-radius: 4px;
      z-index: 10;
      background-color: rgba(0, 0, 0, 0.0);
      font-family: 'Zen Kaku Gothic New', sans-serif;
    }


    @media (max-width: 600px) {
  .patent-badge {
    top: 16px;
    left:16px;
    bottom: auto;
    right: auto;
    font-size: 11px;
    padding: 4px 8px;
    border: 0px solid #fff;
    background-color: #00000070;
         font-weight: 400;
      }
    }


/*===タブレット　ボタン最終調整===*/
@media (min-width: 768px) and (max-width: 1024px) {
  header .header__buttons {
    display: flex !important;
    gap: 12px;
    margin-left: auto;
    margin-right: 16px;
  }
}

/*===PCチェックマーク　最終調整===*/
@media (min-width: 1025px) {
  .integration__title {
    flex-direction: row; /* 横並び */
      gap: 16px;
  }
}

/*===SP1stチェックマーク　最終調整===*/
@media (max-width: 767px) {
  .overview__badges .badge-icon img {
    transform: translateY(.5px);
  }
}


/* ====================================================== */
/*  ヘッダー上の青バー（特許出願中）                      */
/* ====================================================== */
.top-info-bar {
  width: 100%;
  background: #0A3FAE;
  padding: 8px 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000!important; /* header より前に */
}

.top-info-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center; /* ← ★中央寄せのポイント！ */
  gap: 12px;
  color: #fff;
  white-space: nowrap;
  font-family: "Zen Kaku Gothic New", sans-serif;
}


.top-info-badge {
  background: #246BF0;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.top-info-text {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* 青バーの高さ分だけ header を下げる */
.header {
  top: 40px !important;
}

/* ========================================= */
/*  スマホ最適化                              */
/* ========================================= */
@media (max-width: 768px) {

  .top-info-inner {
    justify-content: center;
    gap: 8px;
  }

  .top-info-badge {
    font-size: 11px;
    padding: 3px 10px;
  }

  .top-info-text {
    font-size: 12px;
    white-space: nowrap;
  }

  /* header の位置も縮める */
  .header {
    top: 38px !important;
  }
}

@media (max-width: 768px) {
  .hero {
    margin-top: 104px !important; /* 青バー＋ヘッダーの高さぶん */
  }
}