@charset "UTF-8";
/* =========================================================
   XD.GROWTH サイト共通 上書きCSS
   ・ベース（色・ヘッダー・ヒーロー・パンくず・CTA・フッター）は
     /news/css/news.css を正として読み込み、ここでは
     既存ページ（Bootstrap 4 + site-style.css）の本文を news.css のトーンに揃える。
   ・読み込み順：bootstrap.css → replacer.css → font-awesome.css → site-style.css
                 → /news/css/news.css → 本ファイル
   ========================================================= */

/* ---------- Base ---------- */
/* news ページの実表示（Noto Sans JP）に合わせる。
   既存ページは adobefont.js で tbudgothic を読み込むため、Noto Sans JP を先頭にして統一 */
:root { --font-site: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
html, body { font-family: var(--font-site); }
body { color: var(--c-text); line-height: 1.8; }
::selection { background: var(--c-primary); color: #fff; }

/* Bootstrapの .breadcrumb と news.css の .breadcrumb の衝突を解消 */
nav.breadcrumb {
  display: block; margin: 0; padding: 16px 0; background: none; border-radius: 0;
  border-bottom: 1px solid var(--c-border); font-size: 13.6px;
}
#breadcrumbs a { background: none; padding: 0; }

/* site-style.css のスマホ時 .btn{min-width:18rem} をヘッダー・CTA帯では解除 */
.site-header .btn, .site-footer .btn { min-width: 0 !important; white-space: nowrap !important; }

/* ---------- Header：ドロップダウン → /news/css/news.css へ移動 ---------- */

/* ---------- Top：動画ヒーロー ---------- */
#hero-01 .hero-video { height: 72vh; min-height: 520px; }
#hero-01 .hero-video.overlay::after { background: linear-gradient(90deg, rgba(2,9,39,.85), rgba(2,39,33,.8)); }
#hero-01 .body-copy h1 { font-size: 40px; font-weight: 900; line-height: 1.3; letter-spacing: .02em; }
#hero-01 .display-hero-lead { font-size: 17px; font-weight: 700; line-height: 1.9; }
#hero-01 .body-copy .btn { padding: 12px 28px; }
#hero-01 .body-copy .btn + .btn { background: #fff; color: var(--c-primary); border-color: #fff; }
@media (max-width: 767px) {
  #hero-01 .body-copy h1 { font-size: 28px; }
  #hero-01 .display-hero-lead { font-size: 14px; }
}

/* ---------- ボタン ---------- */
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--c-primary); border-color: var(--c-primary); color: #fff;
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--c-primary); border-color: var(--c-primary); opacity: .85; }
.btn-info, .btn-outline-primary, .btn-outline-secondary, .btn-light {
  background: #fff; color: var(--c-primary); border-color: var(--c-primary);
}
.btn-info:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-light:hover {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
.btn-lg { border-radius: 5px; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem rgba(76, 126, 190, .3); }

/* ---------- 背景・区切り ---------- */
.bg-light, .bg-gray { background-color: var(--c-bg-light) !important; }
.bg-grad-dark { background: linear-gradient(90deg, #020927, #0c2a5c); }
hr { border-color: var(--c-border); }

/* ---------- ページ内アンカー（できること等） ---------- */
#anchor-link li {
  border: 1px solid var(--c-border); border-radius: 999px; padding: 6px 18px; transition: border-color .15s;
}
#anchor-link li:hover { border-color: var(--c-primary); }
#anchor-link a { color: var(--c-text); }
#anchor-link a:hover { color: var(--c-primary); text-decoration: none; }

/* ---------- バッジ（ニュース等） ---------- */
.badge { border-radius: 3px; font-weight: 700; padding: .35em .8em; }
.badge-secondary, .badge-primary { background: var(--cat-info); }
.badge-pill { border-radius: 3px; }

/* ---------- カード ---------- */
.card { border-color: var(--c-border); border-radius: 4px; }
.card-header { background: var(--c-bg-light); border-color: var(--c-border); }
a.card:hover, .re__card-template:hover { text-decoration: none; }

/* ---------- 表 ---------- */
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--c-border); }
.table-price thead th, .table-price th, .table-function-list th { background-color: var(--c-bg-light); font-weight: 700; }
.table-price td .h3, .table-price td .display-3, .em { color: var(--c-primary); }

/* ---------- FAQ（アコーディオン） ---------- */
#faq-list .card { border: 0; border-bottom: 1px solid var(--c-border); border-radius: 0; }
#faq-list .card-text a { color: var(--c-text); font-weight: 700; }
#faq-list .card-text a:hover { color: var(--c-link); text-decoration: none; }

/* ---------- フォーム ---------- */
.form-control { border-color: var(--c-border); border-radius: 4px; font-weight: 400; }
.form-control:focus { border-color: var(--c-primary); box-shadow: 0 0 0 .2rem rgba(76, 126, 190, .2); }

/* ---------- 法務系ページの本文 ---------- */
.legal-body h2, .legal-body h3 { font-weight: 700; }

/* ---------- フッター（最下部バーは news.css） ---------- */
.site-footer h5 + h5 { margin-top: 10px; }



/* =========================================================
   タイポグラフィ：news.css のサイズ体系に統一
   本文16px / 行間1.8 ・ ページ見出し28px ・ h2 22px ・ h3 18px ・ 注記13.6px
   ========================================================= */
body, .lead, p, li, td, th, dd, dt { font-family: var(--font-site); }
body { font-size: 16px; line-height: 1.8; letter-spacing: 0; }

/* Bootstrap の display / 見出し */
.display-1 { font-size: 28px; font-weight: 900; line-height: 1.5; }
.display-2 { font-size: 22px; font-weight: 900; line-height: 1.5; color: var(--c-text); }
.display-3 { font-size: 18px; font-weight: 700; line-height: 1.6; }
.display-4 { font-size: 16px; font-weight: 700; line-height: 1.7; }
h1, .h1 { font-size: 28px; font-weight: 900; }
h2, .h2 { font-size: 22px; font-weight: 900; }
h3, .h3 { font-size: 18px; font-weight: 700; }
h4, .h4 { font-size: 16px; font-weight: 700; }
h5, .h5 { font-size: 14px; font-weight: 700; }
h1, h2, h3, h4, h5 { line-height: 1.5; }

/* リード文は本文と同じサイズ */
.lead { font-size: 16px; font-weight: 400; line-height: 1.8; }
h4.lead, h3.lead { font-size: 16px; font-weight: 700; }

/* 注記・小さい文字 */
.text-note, .font-small, small, .small { font-size: 13.6px; }
.text-min { font-size: 12.5px; }

/* ボタン（news.css：通常15px / 大16px・太字なし） */
.btn, .form-control { font-weight: 400; }
.btn { font-size: 15px; }
.btn-lg { font-size: 16px; padding: 12px 28px; }

/* 表・フォーム */
.table, table { font-size: 15px; }
.form-control, .form-control-lg { font-size: 16px; }

/* ヒーロー・CTA・フッター内は news.css の指定を優先 */
.hero__title { font-size: 40px; }
.hero__lead { font-size: 17px; }
.cta-band h2 { font-size: 26px; }
.site-footer { font-size: 13.6px; }
.site-footer h5 { font-size: 14px; }
#hero-01 .body-copy h1 { font-size: 40px; }
#hero-01 .display-hero-lead { font-size: 17px; }

@media (max-width: 767px) {
  .display-1, h1, .h1 { font-size: 22px; }
  .display-2, h2, .h2 { font-size: 20px; }
  .display-3, h3, .h3 { font-size: 17px; }
  .hero__title, #hero-01 .body-copy h1 { font-size: 30px; }
  .hero__lead, #hero-01 .display-hero-lead { font-size: 15px; }
  .cta-band h2 { font-size: 22px; }
}

/* ---------- ヒーロー内の補助リンク（サービス各ページの「他サービス」等） ---------- */
.hero__sub { margin-top: 32px; }
.hero__sub p { margin: 0 0 12px; font-size: 14px; opacity: .85; }
.hero__sub .btn {
  margin: 0 4px 8px; background: transparent; color: #fff; border-color: rgba(255,255,255,.7); min-width: 0 !important;
}
.hero__sub .btn:hover { background: #fff; color: var(--c-navy); border-color: #fff; }

/* 既存マークアップの .row はみ出しによる横スクロールを防止 */
html, body { overflow-x: clip; }

/* ---------- 画像の height 属性を有効に戻す ----------
   news.css の img { height: auto } により HTML の height 指定が無効になり、
   導入企業ロゴ・アイコン等が列幅いっぱいに拡大されるのを防ぐ */
img[height] { width: auto; max-width: 100%; }
img[height="16px"] { height: 16px; }
img[height="32px"] { height: 32px; }
img[height="36px;"], img[height="36px"] { height: 36px; }
img[height="48px"] { height: 48px; }
img[height="64px"] { height: 64px; }
img[height="70px"] { height: 70px; }
img[height="30vh"] { height: 30vh; }
#clients-01 img { object-fit: contain; }

/* ---------- トップ：コンテンツ欄のボタン ----------
   複数ボタンが幅違いで折り返していたため、同じ幅で縦に揃える */
#content-01 .text-center, #content-02 .text-center, #content-03 .text-center {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left !important;
}
#content-01 .text-center .btn, #content-02 .text-center .btn, #content-03 .text-center .btn {
  width: 340px; max-width: 100%; margin: 0 !important; padding: 12px 20px; text-align: center !important;
}
@media (max-width: 991px) {
  #content-01 .text-center, #content-02 .text-center, #content-03 .text-center { align-items: center; }
}

/* ---------- CTA帯「まずは『やってみる』」：test.xdata.jp と同じ背景画像 ---------- */
.cta-band {
  background: linear-gradient(90deg, rgba(0, 0, 0, .3) 10%, rgba(0, 0, 0, .3)),
              url('/assets/images/common/cta@2x.jpg') center center / cover no-repeat;
  padding: 80px 16px;
}
.cta-band h2, .cta-band p { text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.cta-band p { opacity: 1; }

/* ---------- トップ：重要なお知らせ（ヒーロー直下） ---------- */
#post-hero-01 { background: var(--c-bg-light) !important; padding: 24px 0; }
.important-notice {
  display: grid; grid-template-columns: 170px 1fr; align-items: stretch;
  background: #fff; border: 1px solid var(--c-border); border-radius: 6px; padding: 24px 28px;
}
.important-notice__label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--cat-maintenance); font-size: 13.6px; font-weight: 700;
  border-right: 1px solid var(--c-border); padding-right: 24px; margin-right: 28px;
}
.important-notice p { margin: 0; }
.important-notice__meta { font-size: 13.6px; color: var(--c-text-sub); display: flex; align-items: center; gap: 12px; }
.important-notice__meta .cat { min-width: 0; }
.important-notice__title { margin: 6px 0 4px !important; font-size: 17px; font-weight: 700; line-height: 1.6; }
.important-notice__title a { color: var(--c-text); }
.important-notice__title a:hover { color: var(--c-link); }
.important-notice__text { font-size: 14.5px; color: var(--c-text); line-height: 1.8; }
.important-notice__more { text-align: right; margin-top: 12px; }
.important-notice__more .btn { border-radius: 999px; padding: 8px 24px; font-size: 14px; }
@media (max-width: 767px) {
  .important-notice { grid-template-columns: 1fr; padding: 20px 16px; }
  .important-notice__label {
    flex-direction: row; justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--c-border);
    padding: 0 0 12px; margin: 0 0 12px;
  }
  .important-notice__more { text-align: center; }
}

/* ---------- トップ：動画ヒーローの高さを低めに（72vh → 56vh） ---------- */
#hero-01 .hero-video { height: 56vh; min-height: 440px; }
#hero-01 .body-copy h1 { margin-top: 32px !important; }
#hero-01 .display-hero-lead { margin-bottom: 28px !important; }
@media (max-width: 991.98px) {
  #hero-01 .hero-video { height: 64vh; min-height: 460px; }
}

/* ---------- トップ：XD.TARGET / XD.COMMERCE のプランカード ---------- */
#service-01 { background: var(--c-bg-light); padding-bottom: 72px; }
#service-01 .service { background: none; }
.plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.plan-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-border); border-radius: 8px;
  overflow: hidden; color: var(--c-text); transition: transform .2s, box-shadow .2s;
}
.plan-card:hover { text-decoration: none; color: var(--c-text); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(2, 9, 39, .12); }
.plan-card__head {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 48px 32px 40px; min-height: 180px;
}
.plan-card--target .plan-card__head { background: linear-gradient(135deg, #e3f4fc, #d2e9fb); }
.plan-card--commerce .plan-card__head { background: linear-gradient(135deg, #d3f0e7, #c4ebe2); }
.plan-card__tag {
  position: absolute; top: 20px; left: 24px; padding: 2px 12px; border-radius: 999px;
  background: #fff; font-size: 12.5px; font-weight: 700; color: var(--c-navy);
}
.plan-card__logo { width: 300px; max-width: 100%; height: auto; }
.plan-card__body { display: flex; flex-direction: column; flex: 1; padding: 28px 32px 32px; }
.plan-card__lead { margin: 0 0 16px; font-size: 15px; line-height: 1.8; }
.plan-card__points { list-style: none; margin: 0 0 24px; padding: 16px 0 0; border-top: 1px solid var(--c-border); }
.plan-card__points li { position: relative; padding-left: 26px; font-size: 15px; font-weight: 700; line-height: 1.6; }
.plan-card__points li + li { margin-top: 8px; }
.plan-card__points li::before {
  content: ""; position: absolute; left: 4px; top: .35em; width: 12px; height: 7px;
  border-left: 2px solid var(--c-primary); border-bottom: 2px solid var(--c-primary); transform: rotate(-45deg);
}
.plan-card__btn {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 5px; background: var(--c-primary); color: #fff; font-size: 15px;
}
.plan-card:hover .plan-card__btn { opacity: .9; }
@media (max-width: 767px) {
  .plan-cards { grid-template-columns: 1fr; gap: 20px; }
  .plan-card__head { min-height: 140px; padding: 44px 24px 28px; }
  .plan-card__body { padding: 24px 20px; }
}

/* ボタン内の文字がはみ出さないように（長い文言は折り返す） */
#content-01 .text-center .btn, #content-02 .text-center .btn, #content-03 .text-center .btn { white-space: normal !important; }

/* ---------- トップ：ニュースリリース欄（お知らせ一覧と同じ行レイアウト） ---------- */
.news-list--top { background: #fff; border: 1px solid var(--c-border); border-radius: 6px; padding: 0 24px; border-top: 1px solid var(--c-border); text-align: left; }
.news-list--top .news-list__item:last-child { border-bottom: 0; }
.news-list--top .news-list__link { padding: 22px 4px; }
@media (max-width: 767px) { .news-list--top { padding: 0 12px; } }

/* ---------- トップ：ニュースリリース欄（お知らせ一覧と同じ行レイアウト） ---------- */
.news-list--top { background: #fff; border: 1px solid var(--c-border); border-radius: 6px; padding: 0 24px; text-align: left; }
.news-list--top .news-list__item:last-child { border-bottom: 0; }
.news-list--top .news-list__link { padding: 22px 4px; }
@media (max-width: 767px) { .news-list--top { padding: 0 12px; } }

/* ---------- 特長カード（旧：チェックボックス画像の並び） ---------- */
.features { background: var(--c-bg-light); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px 0; }
.feature-card {
  position: relative; background: #fff; border: 1px solid var(--c-border); border-radius: 8px;
  padding: 28px 28px 24px; transition: box-shadow .2s, transform .2s;
}
.feature-card:hover { box-shadow: 0 10px 28px rgba(2, 9, 39, .08); transform: translateY(-2px); }
.feature-card__icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%;
  background: linear-gradient(135deg, #4c7ebe, #3fb6c6);
}
.feature-card__icon::before {
  content: ""; width: 16px; height: 9px; margin-top: -4px;
  border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg);
}
.feature-card__title { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--c-text); }
.feature-card__text { margin: 0; font-size: 15px; line-height: 1.8; color: var(--c-text); }
.feature-card__text a { color: var(--c-link) !important; }
@media (max-width: 991px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .feature-grid { grid-template-columns: 1fr; gap: 16px; } .feature-card { padding: 22px 20px; } }
/* 端数（5件など）の最終行は中央寄せ */
.feature-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.feature-card { flex: 0 1 calc((100% - 48px) / 3); }
@media (max-width: 991px) { .feature-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 575px) { .feature-card { flex-basis: 100%; } }

/* ---------- その他機能：新リリース機能カード ---------- */
.release-section { padding: 64px 0 72px; }
.release-section__title { margin: 0 0 32px; text-align: center; font-size: 22px; font-weight: 900; }
.release-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.release-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-border); border-radius: 8px;
  overflow: hidden; color: var(--c-text); transition: transform .2s, box-shadow .2s;
}
.release-card:hover { text-decoration: none; color: var(--c-text); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(2, 9, 39, .12); }
.release-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f0f3f8; border-bottom: 1px solid var(--c-border); }
.release-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.release-card:hover .release-card__img img { transform: scale(1.03); }
.release-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 24px; }
.release-card__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.release-card__text { font-size: 15px; line-height: 1.8; margin-bottom: 18px; }
.release-card__more { margin-top: auto; font-size: 14px; color: var(--c-primary); font-weight: 700; }
.release-card__more::after { content: " ›"; }
@media (max-width: 991px) { .release-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .release-cards { grid-template-columns: 1fr; } .release-section { padding: 40px 0 48px; } }

/* ---------- コンテンツ幅の統一（2026-10-22） ----------
   container-fluid の行が画面幅いっぱいに広がっていたのを、
   .container と同じ本文幅（1078px）に揃える。背景色は全幅のまま。 */
@media (min-width: 1140px) {
  .container-fluid > .row { max-width: 1108px; margin-left: auto; margin-right: auto; }
  .container-fluid .container-fluid > .row { max-width: none; margin-left: -15px; margin-right: -15px; }
}