/* ============================================================
   AXIS 共通デザイン
   ・ビジネス系（会社・SX・AX・MX・お問い合わせ）… 写真＋濃紺、左揃えの落ち着いた見せ方
   ・クリエイティブ系（DX・カプセルトイ）… 太い線・ずらし影・原色のポップな見せ方
   ============================================================ */
:root {
  --ac-navy: #0E4C74;
  --ac-navy-d: #082f4a;
  --ac-ink: #10202c;
  --ac-orange: #E79620;
  --ac-mist: #f3f6f8;
  --ac-line: #d9e1e7;
  --ac-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --ac-head: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  /* pop */
  --pp-y: #ffd92e; --pp-r: #e8362d; --pp-b: #1e5bd8; --pp-t: #2aa3bd; --pp-p: #f3a99c; --pp-k: #14110f; --pp-w: #fffdf5;
  --pp-disp: "Dela Gothic One", "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --pp-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", sans-serif;
}
.ac img, .pp-hero img { max-width: 100%; height: auto; }
body { font-family: var(--ac-sans); color: var(--ac-ink); -webkit-font-smoothing: antialiased; }
.ac *, .ac *::before, .ac *::after, .pp *, .pp *::before, .pp *::after { box-sizing: border-box; }
main.ac { overflow-x: clip; }
.ac-wrap { box-sizing: border-box; width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* ---------- 見出しの小ラベル ---------- */
.ac-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--ac-sans); font-size: 12px; font-weight: 700; letter-spacing: .28em; color: var(--ac-orange); }
.ac-eyebrow::before { content: ""; width: 32px; height: 2px; background: currentColor; }
.ac-h2 { margin: 0; font-family: var(--ac-head); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.4; letter-spacing: .02em; color: var(--ac-ink); }
.ac-text { margin: 18px 0 0; font-size: 16px; line-height: 2; color: #44535f; }

/* ---------- ビジネス系ヒーロー（写真＋濃紺） ---------- */
.ac-hero { position: relative; display: flex; align-items: flex-end; min-height: 420px; padding: 120px 0 64px; overflow: hidden; color: #fff;
  background: var(--ac-navy-d) var(--img) var(--pos, 50% 50%) / cover no-repeat; }
.ac-hero::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,47,74,.94) 0%, rgba(8,47,74,.82) 38%, rgba(8,47,74,.35) 72%, rgba(8,47,74,.15) 100%); }
.ac-hero::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(38%, 420px); height: 6px; background: var(--ac-orange); }
.ac-hero .ac-wrap { position: relative; z-index: 1; }
.ac-hero__title { margin: 0; max-width: 16em; font-family: var(--ac-head); font-weight: 700; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.3; letter-spacing: .03em; }
.ac-hero__lead { margin: 20px 0 0; max-width: 36em; font-size: clamp(15px, 1.6vw, 17px); line-height: 2; color: rgba(255,255,255,.88); }
.ac-hero--mx::after { background: var(--ac-orange); }
@media (max-width: 767px) { .ac-hero::before { background: linear-gradient(180deg, rgba(8,47,74,.55) 0%, rgba(8,47,74,.88) 45%, rgba(8,47,74,.95) 100%); } }
@media (min-width: 768px) { .ac-hero { min-height: 520px; padding-bottom: 84px; } }

/* ---------- ボタン ---------- */
.ac-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 2px solid var(--ac-navy); border-radius: 2px;
  font-weight: 700; font-size: 15px; letter-spacing: .06em; text-decoration: none; transition: background .2s, color .2s; }
.ac-btn::after { content: "→"; transition: transform .2s; }
.ac-btn:hover::after { transform: translateX(4px); }
.ac-btn--fill { background: var(--ac-navy); color: #fff; }
.ac-btn--fill:hover { background: var(--ac-navy-d); border-color: var(--ac-navy-d); }
.ac-btn--line { background: #fff; color: var(--ac-navy); }
.ac-btn--line:hover { background: var(--ac-mist); }
.ac-btn--orange { background: var(--ac-orange); border-color: var(--ac-orange); color: #fff; }
.ac-btn--orange:hover { background: #cf8212; border-color: #cf8212; }
.ac-btn--white { background: transparent; border-color: #fff; color: #fff; }
.ac-btn--white:hover { background: #fff; color: var(--ac-navy); }

/* ---------- 写真＋文章の2カラム ---------- */
.ac-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 88px; padding-bottom: 88px; }
.ac-split__fig { position: relative; margin: 0 14px 14px 0; }
.ac-split__fig::before { content: ""; position: absolute; right: -14px; bottom: -14px; width: 70%; height: 70%; background: var(--ac-navy); }
.ac-split__fig img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) { .ac-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; padding-top: 120px; padding-bottom: 120px; } }

/* ---------- サービス一覧カード ---------- */
.ac-services { padding: 88px 0 100px; background: var(--ac-mist); }
.ac-services__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.ac-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 720px) { .ac-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ac-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ac-cards > .ac-card { grid-column: span 2; } .ac-cards > .ac-card--pop { grid-column: span 3; } .ac-cards > .ac-card--pop .ac-card__img { aspect-ratio: 16 / 8; } }
.ac-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ac-line); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.ac-card:hover { border-color: var(--ac-navy); transform: translateY(-3px); }
.ac-card__img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ac-navy-d); }
.ac-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ac-card:hover .ac-card__img img { transform: scale(1.04); }
.ac-card__tag { position: absolute; left: 0; top: 0; padding: 6px 14px; background: var(--ac-navy); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.ac-card__body { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 26px; }
.ac-card__title { margin: 0; font-family: var(--ac-head); font-size: 19px; font-weight: 700; line-height: 1.5; }
.ac-card__en { margin: 2px 0 0; font-size: 12px; letter-spacing: .08em; color: #7a8893; }
.ac-card__text { margin: 12px 0 0; font-size: 14px; line-height: 1.9; color: #4d5b66; }
.ac-card__more { margin-top: auto; padding-top: 16px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ac-navy); }
.ac-card__more::after { content: " →"; }

/* クリエイティブ系カード（ポップ） */
.ac-card--pop { border: 3px solid var(--pp-k); border-radius: 14px; overflow: hidden; box-shadow: 6px 6px 0 var(--pp-k); background: var(--pp-w); font-family: var(--pp-body); }
.ac-card--pop:hover { border-color: var(--pp-k); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--pp-k); }
.ac-card--pop .ac-card__img { border-bottom: 3px solid var(--pp-k); background: var(--pp-y); }
.ac-card--pop .ac-card__tag { left: 12px; top: 12px; border: 2px solid var(--pp-k); border-radius: 999px; background: var(--pp-y); color: var(--pp-k); font-family: var(--pp-disp); font-weight: 400; letter-spacing: .06em; }
.ac-card--pop .ac-card__title { font-family: var(--pp-disp); font-weight: 400; letter-spacing: .02em; }
.ac-card--pop .ac-card__more { color: var(--pp-r); }

/* ---------- 写真を背景にした帯（理念・CTA） ---------- */
.ac-band { position: relative; padding: 110px 0; overflow: hidden; color: #fff; background: var(--ac-navy-d) var(--img) var(--pos, 50% 50%) / cover no-repeat; }
.ac-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,47,74,.9) 0%, rgba(8,47,74,.8) 55%, rgba(8,47,74,.55) 100%); }
.ac-band .ac-wrap { position: relative; z-index: 1; }
.ac-band .ac-h2 { color: #fff; }
.ac-poem { margin-top: 28px; max-width: 40em; }
.ac-poem p { margin: 0 0 22px; font-size: clamp(15px, 1.7vw, 17px); line-height: 2.1; color: rgba(255,255,255,.88); }
.ac-poem p.ac-poem__last { margin: 34px 0 0; padding-left: 16px; border-left: 3px solid var(--ac-orange); font-weight: 700; color: #fff; }
.ac-band--plain { padding: 80px 0; }
.ac-band--plain::before { background: linear-gradient(120deg, var(--ac-navy) 0%, var(--ac-navy-d) 100%); }
.ac-cta { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .ac-cta { grid-template-columns: minmax(0, 1.4fr) auto; } }
.ac-cta .ac-btns { margin-top: 0; }

/* ---------- クリエイティブ系ヒーロー（ポップ） ---------- */
.pp-hero { position: relative; overflow: hidden; padding: 72px 0 88px; background-color: var(--pp-w); color: var(--pp-k); font-family: var(--pp-body); font-weight: 500;
  background-image: radial-gradient(rgba(20,17,15,.13) 1.4px, transparent 1.6px); background-size: 18px 18px; }
.pp-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
@media (min-width: 960px) { .pp-hero { padding: 96px 0 110px; } .pp-hero__in { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; } }
.pp-kicker { display: inline-block; margin: 0 0 18px; padding: 4px 16px; background: var(--pp-k); color: var(--pp-y); font-family: var(--pp-disp); font-size: 14px; letter-spacing: .12em; transform: rotate(-2deg); }
.pp-title { margin: 0; font-family: var(--pp-disp); font-weight: 400; font-size: clamp(3.2rem, 9vw, 5.2rem); line-height: 1.2; letter-spacing: .01em; }
.pp-title em { font-style: normal; color: var(--pp-t); -webkit-text-stroke: 2px var(--pp-k); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--pp-k); }
.pp-title small { display: block; margin-top: 10px; font-family: var(--pp-body); font-size: .42em; font-weight: 900; letter-spacing: .04em; }
.pp-lead { margin: 22px 0 0; max-width: 30em; font-size: 16px; font-weight: 700; line-height: 1.9; }
.pp-fig { position: relative; margin: 0 10px 10px 0; padding: 0; border: 4px solid var(--pp-k); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 10px 10px 0 var(--pp-k); transform: rotate(1.8deg); }
.pp-fig img { display: block; width: 100%; height: auto; }
.pp-sticker { position: absolute; z-index: 2; display: grid; place-items: center; width: 96px; height: 96px; border: 4px solid var(--pp-k); border-radius: 50%; background: var(--pp-r); color: #fff;
  font-family: var(--pp-disp); font-size: 15px; line-height: 1.2; text-align: center; box-shadow: 4px 4px 0 var(--pp-k); transform: rotate(12deg); }
.pp-hero__art { position: relative; }
.pp-hero__art .pp-sticker { right: -6px; top: -26px; }
.pp-dot { position: absolute; z-index: 0; border: 4px solid var(--pp-k); border-radius: 50%; }
.pp-dot--y { width: 64px; height: 64px; left: -18px; bottom: -22px; background: var(--pp-y); }
.pp-dot--p { width: 34px; height: 34px; left: 42%; top: -22px; background: var(--pp-p); }
.pp-strip { position: relative; z-index: 1; padding: 10px 0; background: var(--pp-k); color: var(--pp-y); overflow: hidden; white-space: nowrap; font-family: var(--pp-disp); font-size: 18px; letter-spacing: .1em; transform: rotate(-1.2deg); margin: -18px -2% 0; }
.pp-strip span { display: inline-block; padding-left: 100%; animation: pp-mq 26s linear infinite; }
@keyframes pp-mq { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .pp-strip span { animation: none; padding-left: 20px; } }