/* =========================================================================
 * KENSAKI theme — BAKE THE ONLINE 風レイアウト
 * ========================================================================= */

/* ---------- リセット & ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #0f172a;
  background: #ffffff;
  font-feature-settings: "palt";
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
a:hover { opacity: .7; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }
ul, ol { padding-left: 0; list-style: none; margin: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 700; letter-spacing: .02em; }
p { margin: 0 0 1em; }

/* ---------- レイアウト変数 ---------- */
:root {
  --max-w: 1280px;
  --pad-x: 24px;
  --c-text: #0f172a;
  --c-muted: #64748b;
  --c-line: #e2e8f0;
  --c-bg-soft: #f8fafc;
  --c-accent: #0f172a;
  --c-accent-2: #2563eb;
  --c-promo: #0f172a;
  --c-promo-text: #ffffff;
}

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }

/* ---------- プロモーションバー ---------- */
.promo-bar {
  background: var(--c-promo);
  color: var(--c-promo-text);
  font-size: 13px;
  letter-spacing: .05em;
  text-align: center;
  padding: 8px 16px;
}
.promo-bar a { text-decoration: underline; margin-left: 8px; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  font-size: 18px;
  text-decoration: none;
}
.site-logo__img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.site-logo__text { line-height: 1; }
.site-logo__dot { color: var(--c-accent-2); }

.global-nav { display: block; }
.global-nav,
.global-nav ul { list-style: none; padding: 0; margin: 0; }
.global-nav li { list-style: none; }

/* トップレベル (横並び) */
.global-nav__list {
  display: flex;
  gap: 28px;
  align-items: center;
}
.global-nav__list > li {
  position: relative; /* サブメニュー絶対配置の基準 */
}
.global-nav__list > li > a {
  font-size: 13px;
  letter-spacing: .12em;
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding: 4px 0;
}
.global-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.global-nav__list > li > a:hover::after,
.global-nav__list > li:focus-within > a::after { transform: scaleX(1); }

/* PRODUCT 等の親項目 (子をもつ) にキャレット (▾) を表示 */
.global-nav__list > li.menu-item-has-children > a::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
  margin-right: 6px;
  transition: transform .2s ease;
}
.global-nav__list > li.menu-item-has-children:hover > a::before,
.global-nav__list > li.menu-item-has-children:focus-within > a::before { transform: rotate(180deg); }

/* サブメニュー (ドロップダウン) */
.global-nav .sub-menu {
  position: absolute;
  top: calc(100% + 22px); /* 親の下線分 + 余白 */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  box-shadow: 0 18px 40px -12px rgba(15,23,42,.18);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 110;
}
/* ホバー or フォーカス時に展開 */
.global-nav__list > li.menu-item-has-children:hover > .sub-menu,
.global-nav__list > li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* マウスのギャップ落ちでメニューが消えないように、上側にホバー判定領域を確保 */
.global-nav .sub-menu::before {
  content: "";
  position: absolute;
  top: -22px; left: 0; right: 0;
  height: 22px;
}
.global-nav .sub-menu li { display: block; }
.global-nav .sub-menu a {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--c-text);
  border-radius: 4px;
  white-space: nowrap;
}
.global-nav .sub-menu a:hover {
  background: var(--c-bg-soft);
  color: var(--c-accent-2);
  opacity: 1;
}
.global-nav .sub-menu__ext {
  font-size: 11px;
  color: var(--c-muted);
  margin-left: 4px;
  letter-spacing: 0;
}

.header-actions { display: flex; gap: 12px; align-items: center; }
.icon-btn {
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  font-size: 16px;
  color: var(--c-text);
}
.menu-toggle { display: none; }

/* ---------- モバイル ---------- */
@media (max-width: 900px) {
  .global-nav { display: none; }
  .menu-toggle { display: inline-grid; }
  .header-actions .icon-btn:not(.menu-toggle) { display: none; }
}

/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  height: 78vh;
  min-height: 520px;
  /* 背景: 暗色オーバーレイ + hero.png + フォールバックの濃紺 */
  background-color: #0f172a;
  background-image:
    linear-gradient(120deg, rgba(15,23,42,.55), rgba(15,23,42,.65)),
    url('images/hero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* 装飾用の光彩 (画像の上にうっすら被せて奥行きを出す) */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(99,102,241,.15), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(14,165,233,.12), transparent 40%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero__eyebrow {
  letter-spacing: .35em;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
  opacity: .8;
}
.hero__title {
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.25;
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: .03em;
}
.hero__subtitle {
  font-size: clamp(14px, 1.5vw, 17px);
  max-width: 620px;
  margin-bottom: 40px;
  opacity: .9;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #fff;
  color: #0f172a;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .15em;
  border-radius: 4px;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.18); opacity: 1; }
.btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.btn--dark  { background: #0f172a; color: #fff; }

/* ---------- セクション共通 ---------- */
.section { padding: 88px 0; }
.section--soft { background: var(--c-bg-soft); }
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}
.section-head__title {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: .08em;
}
.section-head__sub {
  font-size: 12px;
  letter-spacing: .25em;
  color: var(--c-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-head__link {
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
}
.section-head__link::after { content: " →"; }

.section-head__lead {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.8;
  margin: 12px 0 0;
  max-width: 720px;
}

/* ---------- グリッドバナー (Service 4 つ) ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 900px) {
  .service-grid { grid-template-columns: repeat(4, 1fr); }
}
.service-card {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: #fff;
  background: #0f172a;
  overflow: hidden;
  border-radius: 4px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.service-card::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--bg, linear-gradient(135deg, #1e3a8a, #0ea5e9));
  opacity: .9;
  transition: transform .6s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15,23,42,.18); opacity: 1; }
.service-card:hover::before { transform: scale(1.05); }
.service-card__num {
  position: absolute;
  top: 18px; left: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .25em;
  opacity: .85;
  z-index: 1;
}
.service-card__title {
  position: relative;
  z-index: 1;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.service-card__sub {
  position: relative;
  z-index: 1;
  font-size: 13px;
  letter-spacing: .1em;
  opacity: .85;
}
.service-card[data-color="ai"]      { --bg: linear-gradient(135deg, #6366f1, #2563eb); }
.service-card[data-color="data"]    { --bg: linear-gradient(135deg, #0ea5e9, #06b6d4); }
.service-card[data-color="cloud"]   { --bg: linear-gradient(135deg, #10b981, #059669); }
.service-card[data-color="consult"] { --bg: linear-gradient(135deg, #f59e0b, #ef4444); }

/* ---------- プロダクトカード (HOME の Products セクション) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 800px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
/* MIGRATION セクションは大画面で 3 列表示にする (START は 2 列のまま) */
@media (min-width: 1100px) {
  #products-migrate .product-grid { grid-template-columns: repeat(3, 1fr); }
}

.product-card {
  display: grid;
  grid-template-rows: 200px 1fr;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 24px 48px -16px rgba(15,23,42,.18);
  opacity: 1;
}
.product-card__visual {
  position: relative;
  background: var(--p-bg, linear-gradient(135deg, #6366f1, #06b6d4));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product-card__visual::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.18), transparent 40%);
}
.product-card__mark {
  position: relative;
  z-index: 1;
  font-size: 96px;
  color: rgba(255,255,255,.95);
  line-height: 1;
  text-shadow: 0 8px 30px rgba(0,0,0,.2);
}
.product-card__mark--text {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: 14px;
}
.product-card__mark-icon {
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-card__mark-label {
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
/* MIGRATION カードは名前が長いためフォントを縮小 */
#products-migrate .product-card__mark--text {
  font-size: 26px;
  letter-spacing: .04em;
  gap: 12px;
}
.product-card[data-tone="onboarding"]  { --p-bg: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #06b6d4 100%); }
.product-card[data-tone="docforge"]    { --p-bg: linear-gradient(135deg, #0f766e 0%, #10b981 50%, #84cc16 100%); }
.product-card[data-tone="staticforge"] { --p-bg: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #ec4899 100%); }
.product-card[data-tone="batchforge"]  { --p-bg: linear-gradient(135deg, #8b5cf6 0%, #d946ef 50%, #06b6d4 100%); }
.product-card[data-tone="markforge"]   { --p-bg: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #1d4ed8 100%); }
.product-card[data-tone="pipelineforge"] { --p-bg: linear-gradient(135deg, #64748b 0%, #10b981 50%, #34d399 100%); }
.product-card[data-tone="pageforge"]     { --p-bg: linear-gradient(135deg, #f43f5e 0%, #fb923c 50%, #facc15 100%); }
.product-card[data-tone="csvforge"]      { --p-bg: linear-gradient(135deg, #1e40af 0%, #06b6d4 50%, #22c55e 100%); }
.product-card[data-tone="changeforge"]   { --p-bg: linear-gradient(135deg, #78716c 0%, #ea580c 50%, #facc15 100%); }
.product-card[data-tone="dashforge"]     { --p-bg: linear-gradient(135deg, #10b981 0%, #3b82f6 50%, #8b5cf6 100%); }

.product-card__body { padding: 24px 28px 28px; }
.product-card__name {
  font-size: 12px;
  letter-spacing: .25em;
  font-weight: 800;
  color: var(--c-accent-2);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.product-card__title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  margin: 0 0 12px;
}
.product-card__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-muted);
  margin: 0 0 16px;
}
.product-card__cta {
  font-size: 13px;
  letter-spacing: .15em;
  font-weight: 700;
  color: var(--c-accent-2);
}
.product-card__cta::after { content: " →"; }

/* ---------- カルーセル (NEW ARRIVAL = 最新事例) ---------- */
.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.carousel::-webkit-scrollbar { height: 6px; }
.carousel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
@media (min-width: 900px) {
  .carousel { grid-auto-columns: minmax(280px, 1fr); }
}
.case-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.case-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
  opacity: 1;
}
.case-card__media {
  aspect-ratio: 4 / 3;
  background: var(--media, linear-gradient(135deg, #e2e8f0, #cbd5e1));
}
.case-card__body { padding: 16px 18px 20px; }
.case-card__cat {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent-2);
  font-weight: 700;
  margin-bottom: 8px;
}
.case-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 8px;
}
.case-card__excerpt {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* カードのジャンル別カラー */
.case-card[data-cat="製造"]  { --media: linear-gradient(135deg, #fef3c7, #fbbf24); }
.case-card[data-cat="AI"]    { --media: linear-gradient(135deg, #ede9fe, #8b5cf6); }
.case-card[data-cat="IT"]    { --media: linear-gradient(135deg, #dbeafe, #2563eb); }
.case-card[data-cat="DATA"]  { --media: linear-gradient(135deg, #d1fae5, #10b981); }

/* ---------- タブ (RANKING = 業界別事例) ---------- */
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--c-line);
}
.tab-btn {
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--c-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s ease, border-color .2s ease;
}
.tab-btn[aria-selected="true"] {
  color: var(--c-text);
  border-bottom-color: var(--c-accent);
}
.tab-panel { display: none; }
.tab-panel[aria-hidden="false"] { display: block; }
.tab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 700px) { .tab-grid { grid-template-columns: repeat(2, 1fr); } }

.case-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
}
.case-row__num {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 900;
  line-height: 1;
  color: var(--c-accent);
  letter-spacing: -.02em;
}
.case-row__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.case-row__desc {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.6;
}

/* ---------- お知らせ (News) ---------- */
.news-list { border-top: 1px solid var(--c-line); }
.news-item {
  display: grid;
  grid-template-columns: 110px 90px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
}
@media (max-width: 700px) {
  .news-item { grid-template-columns: 100px 1fr; }
  .news-item__cat { display: none; }
}
.news-item__date { font-weight: 700; letter-spacing: .05em; color: var(--c-muted); }
.news-item__cat {
  font-size: 11px;
  letter-spacing: .15em;
  font-weight: 700;
  text-align: center;
  padding: 4px 8px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-muted);
}
.news-item__title { line-height: 1.5; }

/* ---------- CTA セクション ---------- */
.cta {
  background:
    linear-gradient(rgba(15,23,42,.85), rgba(15,23,42,.85)),
    radial-gradient(ellipse at center, #1e293b, #0f172a);
  color: #fff;
  text-align: center;
  padding: 88px 24px;
  border-radius: 4px;
}
.cta h2 {
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: .04em;
  margin-bottom: 16px;
}
.cta p { color: rgba(255,255,255,.85); margin-bottom: 32px; }

/* ---------- フッター ---------- */
.site-footer {
  background: #0f172a;
  color: #cbd5e1;
  padding: 64px 0 24px;
  font-size: 13px;
}
.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: #fff; opacity: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-col h4 {
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: #fff;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-brand { font-weight: 800; font-size: 16px; color: #fff; letter-spacing: .15em; margin-bottom: 14px; }
.footer-brand span { color: #60a5fa; }
.footer-desc { color: #94a3b8; line-height: 1.7; margin-bottom: 20px; }

.social-row { display: flex; gap: 12px; }
.social-row a {
  width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: #94a3b8;
  font-size: 12px;
}
.footer-bottom ul { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- 汎用ページ ---------- */
.page-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 64px 24px;
}
.page-content h1 {
  font-size: clamp(28px, 3vw, 40px);
  margin-bottom: 32px;
  letter-spacing: .04em;
}
.page-content h2 {
  font-size: 22px;
  margin: 48px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--c-line);
}
.page-content h3 {
  font-size: 17px;
  margin: 24px 0 8px;
}
.page-content table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.page-content th, .page-content td { padding: 12px 16px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.page-content th { width: 30%; background: var(--c-bg-soft); font-weight: 700; }
.page-content ul { list-style: disc; padding-left: 1.5em; margin: 12px 0; }