/*
Theme Name: AppBank
Theme URI: https://www.appbank.co.jp/
Description: AppBank株式会社 コーポレートサイト 2026リニューアルテーマ(Figmaデザイン準拠)
Version: 2.0.0
Author: AppBank Inc.
*/

/* =====================================================
   Reset / Base
===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 500;
  color: #1a1c1d;
  background: #fff;
  line-height: 1.8;
  font-size: 16px;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: inherit; text-decoration: none; transition: opacity .25s ease, color .25s ease, background .25s ease; }
a:hover { opacity: .75; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.4; }
::selection { background: #de1e40; color: #fff; }

.l-wrap { max-width: 1580px; margin: 0 auto; padding: 0 40px; }
.l-wrap-narrow { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.u-object-fit { width: 100%; height: 100%; object-fit: cover; }
.u-pc { display: block; }
.u-sp { display: none; }

/* =====================================================
   Buttons
===================================================== */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-width: 198px; height: 57px; padding: 0 32px;
  border-radius: 20px; font-size: 14px; font-weight: 500;
  background: #fff; color: #1a1c1d; border: 1px solid #1a1c1d;
  cursor: pointer;
}
.btn-pill::after {
  content: ""; width: 7px; height: 12px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%231a1c1d' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.btn-pill.is-black { background: #1a1c1d; color: #fff; border-color: #1a1c1d; }
.btn-pill.is-black::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E"); }
.btn-pill.is-red { background: #de1e40; color: #fff; border-color: #de1e40; }
.btn-pill.is-red::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E"); }
.btn-pill.is-outline-red { background: #fff; color: #de1e40; border-color: #de1e40; }
.btn-pill.is-outline-red::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23de1e40' stroke-width='1.6'/%3E%3C/svg%3E"); }
.btn-pill.is-outline-white { background: transparent; color: #fff; border-color: #fff; }
.btn-pill.is-outline-white::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E"); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  color: #de1e40; font-size: 14px; font-weight: 500;
}
.link-arrow::after {
  content: ""; width: 7px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23de1e40' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.link-arrow--prev::after { content: none; }
.link-arrow--prev::before {
  content: ""; width: 7px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23de1e40' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: scaleX(-1);
}

/* =====================================================
   Section headings (red line + label)
===================================================== */
.sec-label { color: #de1e40; font-size: 20px; font-weight: 700; letter-spacing: .08em; }
.sec-title { font-size: 38px; font-weight: 700; letter-spacing: .12em; margin-top: 4px; }
.sec-bar { width: 40px; height: 4px; background: #de1e40; margin-top: 24px; }

/* =====================================================
   Header
===================================================== */
:root { --header-h: 109px; }
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: #fff; height: var(--header-h);
  display: flex; align-items: center;
  transition: box-shadow .3s ease, background-color .35s ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 18px rgba(0,0,0,.07); }
/* 下層ページ: 最上部ではヘッダー背景を透過し、ヒーロー背景を透かす */
.site-header.is-transparent:not(.is-scrolled) { background: transparent; }
/* モバイルメニュー展開中は白背景に戻す(パネルとの継ぎ目対策) */
.site-header.is-transparent:has(.gnav.is-open) { background: #fff; }
.site-header .header-inner {
  width: 100%; max-width: 1846px; margin: 0 auto;
  padding: 0 40px 0 74px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.header-logo { display: block; flex: none; }
.header-logo img { width: 150px; height: auto; display: block; }
.header-right { display: flex; align-items: center; gap: 34px; flex: 1; min-width: 0; }
.gnav { display: flex; align-items: center; gap: 42px; margin-left: 48px; margin-right: auto; }
.gnav a {
  position: relative; font-size: 14px; font-weight: 500; color: #1a1c1d;
  padding: 8px 0; letter-spacing: .02em; white-space: nowrap;
}
.gnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 3px; border-radius: 1.5px; background: #de1e40;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.gnav a:hover::after, .gnav a.is-current::after { transform: scaleX(1); }
.gnav a.is-current { color: #de1e40; }
/* サブメニュー(PC: hoverでヘッダー直下に全幅表示) */
.gnav-item.has-sub { display: flex; align-items: center; height: var(--header-h); }
.gnav-sub-toggle { display: none; }
/* パネル自体は動かさず(ヘッダーとの重なり防止)、中身だけをスライドさせる。
   フェード時間はヘッダー背景(.35s)と揃え、透過ヘッダー上でも継ぎ目が見えないようにする */
.gnav-sub {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
  background: #fff; overflow: hidden;
  box-shadow: 0 18px 28px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.gnav-sub-inner {
  transform: translateY(-12px); opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
/* 開くときはheader背景のフェード(.35s)を先に開始し、120ms遅れてサブメニューをフェードイン
   (デバイスによる描画タイミングのズレで重なりが見えるのを防ぐ)。閉じるときは遅延なし */
.gnav-item.has-sub:hover .gnav-sub,
.gnav-item.has-sub:focus-within .gnav-sub {
  opacity: 1; visibility: visible;
  transition: opacity .35s ease .12s;
}
.gnav-item.has-sub:hover .gnav-sub-inner,
.gnav-item.has-sub:focus-within .gnav-sub-inner {
  transform: translateY(0); opacity: 1;
  transition: transform .35s ease .12s, opacity .35s ease .12s;
}
/* 別サブメニューへマウス移動する間(猶予時間内)は開いたままにする(JSがis-holdを付与) */
.gnav-item.has-sub.is-hold .gnav-sub { opacity: 1; visibility: visible; }
.gnav-item.has-sub.is-hold .gnav-sub-inner { transform: translateY(0); opacity: 1; }
/* サブメニュー間の切り替え時(JSがis-sub-quickを一瞬付与):
   パネル背景は即時表示のまま、テキストのみ遅延なしでフェード+スライドさせる */
.gnav.is-sub-quick .gnav-sub { transition: none !important; }
.gnav.is-sub-quick .gnav-sub-inner { transition: transform .35s ease, opacity .35s ease !important; }
/* 文字の開始位置は親メニュー直下に揃える(--gnav-sub-left はJSが親メニューの位置から算出) */
.gnav-sub-inner {
  width: 100%;
  padding: 26px 40px 30px var(--gnav-sub-left, 74px);
  display: flex; align-items: center; gap: 40px;
}
.gnav-sub-inner a { font-size: 13px; padding: 6px 0; }
/* 下層ページの透過ヘッダー上でサブメニュー展開中は白背景に戻す */
.site-header.is-transparent:has(.gnav-item.has-sub:hover),
.site-header.is-transparent:has(.gnav-item.has-sub:focus-within),
.site-header.is-transparent:has(.gnav-item.has-sub.is-hold) { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .gnav-sub, .gnav-sub-inner,
  .gnav.is-sub-quick .gnav-sub-inner { transition: none !important; }
  .gnav-sub-inner { transform: none; }
}
.header-search {
  width: 41px; height: 41px; border-radius: 50%;
  border: 1px solid #d4d6d8; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
  transition: background-color .25s ease, border-color .25s ease;
}
.header-search svg { width: 16px; height: 16px; }
.header-search svg circle,
.header-search svg path { transition: stroke .25s ease; }
.header-search:hover { background: #de1e40; border-color: #de1e40; }
.header-search:hover svg circle,
.header-search:hover svg path { stroke: #fff; }
.header-contact {
  display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 22px; border-radius: 16px;
  background: #1a1c1d; color: #fff !important; font-size: 13px; letter-spacing: .04em;
  flex: none;
}
.header-contact { transition: background-color .25s ease; }
.header-contact:hover { background: #de1e40; opacity: 1; }
.header-contact svg { width: 18px; height: 18px; }
/* 全幅検索パネル(ヘッダーを覆うオーバーレイ) */
.header-search-panel {
  position: absolute; inset: 0; z-index: 20;
  background: #fff;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden; transform: translateY(-14px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.header-search-panel.is-open {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease;
}
.header-search-form {
  width: 100%; max-width: 1846px; margin: 0 auto;
  padding: 0 40px 0 74px;
  display: flex; align-items: center; gap: 20px;
}
.header-search-form-icon { width: 22px; height: 22px; flex: none; }
.header-search-form input[type="text"] {
  flex: 1; min-width: 0; height: 56px;
  border: 0; border-bottom: 2px solid #1a1c1d; border-radius: 0;
  background: transparent; font-size: 20px; letter-spacing: .02em;
  padding: 0 4px; outline: none;
  transform: scaleX(.96); transform-origin: left;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .25s ease;
}
.header-search-panel.is-open .header-search-form input[type="text"] { transform: scaleX(1); }
.header-search-form input[type="text"]:focus { border-color: #de1e40; }
.header-search-form input[type="text"]::placeholder { color: #a9adb2; }
.header-search-submit {
  border: 0; background: #de1e40; color: #fff; border-radius: 16px;
  height: 46px; padding: 0 30px; font-size: 14px; letter-spacing: .04em;
  cursor: pointer; flex: none; transition: opacity .25s ease;
}
.header-search-submit:hover { opacity: .85; }
.header-search-close {
  width: 41px; height: 41px; border-radius: 50%;
  border: 1px solid #d4d6d8; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
}
.header-search-close svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .header-search-panel,
  .header-search-form input[type="text"] { transition: none; transform: none; }
}

/* mobile nav */
.nav-toggle { display: none; }

/* =====================================================
   Footer
===================================================== */
.site-footer { background: #d92643; color: #fff; margin-top: 0; }
.site-footer a { color: #fff; }
.footer-inner {
  max-width: 1760px; margin: 0 auto; padding: 72px 40px 64px 100px;
  display: flex; gap: 60px; flex-wrap: wrap;
}
.footer-brand { max-width: 330px; margin-right: 40px; }
.footer-logo img { width: 190px; filter: brightness(0) invert(1); }
.footer-lead { font-size: 14px; line-height: 2.1; margin-top: 24px; letter-spacing: .04em; }
.footer-sns { display: flex; gap: 18px; margin-top: 30px; }
.footer-sns a {
  width: 44px; height: 44px; border-radius: 50%; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.footer-sns svg { width: 20px; height: 20px; fill: #d92643; }
.footer-nav { display: flex; gap: 56px; flex-wrap: wrap; flex: 1; justify-content: space-between; }
.footer-nav-col { min-width: 120px; }
.footer-nav-col > p { font-size: 16px; font-weight: 700; letter-spacing: .06em; margin-bottom: 18px; }
.footer-nav-col > p a { font-weight: 700; }
.footer-nav-col ul li { margin-bottom: 12px; }
.footer-nav-col ul a { font-size: 14px; letter-spacing: .04em; opacity: .95; }
.footer-bottom { background: #26282b; }
.footer-bottom-inner {
  max-width: 1846px; margin: 0 auto; padding: 20px 40px 20px 100px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-bottom-links { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.footer-bottom-links a { color: #fff; font-size: 13px; }
.footer-bottom-links .sep { color: rgba(255,255,255,.5); font-size: 12px; }
.footer-copy { color: #fff; font-size: 12px; letter-spacing: .03em; }

/* =====================================================
   TOP: hero
===================================================== */
.top-hero { position: relative; background: #fff; padding: 62px 0 0; overflow: hidden; }
/* ヒーロー高さはデバイスの表示領域に追従:
   100svh - header(109px) - top-hero padding-top(62px) = 171px。
   低い画面でも崩れないよう下限640pxを確保し、コピーとビジュアルは上下中央に配置 */
.top-hero-inner {
  position: relative; max-width: 1920px; margin: 0 auto;
  display: flex; align-items: center;
  min-height: 640px;
  min-height: max(640px, calc(100svh - 171px));
}
.top-hero-visual {
  position: absolute; right: 0; top: 50%; transform: translateY(calc(-50% - 24px));
  width: 62.4%; max-width: 1160px;
}

/* ヒーロービジュアル: SVGパス(path.svg)によるクリップ形状+赤グラフィック
   背景画像は要素基準で配置し、マスク形状と常に一体で動く(スクロール位置に依らず切れない)。
   パララックスはJSが .hero-collage 全体を translateY で僅かに遅らせる方式。
   形状モーフはインラインSVGのclipPath内 <animate attributeName="d"> (SMIL) で行う。
   ループのkeyframeは基準形状からの偏差を2.5倍に増幅、登場時は1.08倍のオーバーシュートあり
   (_outputs/gen_hero_masks.py で生成)。
   background-size/position はモーフ全キーフレーム+オーバーシュートのマスク外接矩形
   を覆う前提(1920px/1500pxの全キーフレームでスクショ検証済み)。縮小・増幅率変更時は要再検証 */
.hero-collage { position: relative; width: 100%; aspect-ratio: 848.79 / 565.89; }
/* マスク描画領域: モーフのオーバーシュートが基準座標系(848.79x565.89)を
   最大±11ユニットはみ出すため、各要素の箱を全方向に14ユニット分拡張し、
   clipPath側は transform="scale(1/876.79, 1/593.89) translate(14 14)" で再マッピング。
   これによりアニメーション中もマスク形状が箱の縁で欠けない。
   拡張に伴い background-position も +14ユニット(=1.0292vw / @1860px+は19.13px)シフト済み。
   14ユニット = y: 14/565.89=2.474%, x: 14/848.79=1.6494% */
.hero-collage .hc-img {
  position: absolute; inset: -2.474% -1.6494%;
  background-repeat: no-repeat;
}
/* 二枚貝シェイプ(SVG st3) */
.hc-office {
  z-index: 2;
  clip-path: url(#hcClipOffice);
  background-image: url('_assets/img/hero-photo-office.png');
  background-size: 52.9vw auto;
  background-position: 9.43vw 0.6vw;
}
/* 斜めの三角形シェイプ(SVG st1) */
.hc-phone {
  z-index: 3;
  clip-path: url(#hcClipPhone);
  background-image: url('_assets/img/hero-photo-phone.png');
  background-size: auto 15.1vw;
  background-position: 0.65vw 0.27vw;
}
/* 円形ブロブシェイプ(SVG st0) */
.hc-laptop {
  z-index: 3;
  clip-path: url(#hcClipLaptop);
  background-image: url('_assets/img/hero-photo-laptop.png');
  background-size: 21.95vw auto;
  background-position: 0vw 24.23vw;
}
/* 赤グラフィック(SVG st2) */
.hc-red {
  position: absolute; inset: -2.474% -1.6494%; z-index: 1;
  background: linear-gradient(160deg, #f2314f 0%, #d51f3f 100%);
  clip-path: url(#hcClipRed);
}
@media (min-width: 1860px) {
  /* .top-hero-visual が max-width: 1160px で頭打ちになるため px 指定に切り替え */
  .hc-office { background-size: 984px auto; background-position: 175px 11px; }
  .hc-phone  { background-size: auto 280px; background-position: 12px 5px; }
  .hc-laptop { background-size: 408px auto; background-position: 0px 450px; }
}
/* 見出し・リード・ボタンの左端をheaderロゴと揃える(header-inner: max-width 1846px + padding-left 74px と同一式) */
.top-hero-copy { position: relative; z-index: 2; transform: translateY(-24px); padding-left: max(74px, calc((100% - 1846px) / 2 + 74px)); }
.top-hero-title {
  font-weight: 900; font-size: clamp(44px, 4.7vw, 90px);
  line-height: 1.33; letter-spacing: .1em; color: #1a1c1d;
}
.top-hero-title em { font-style: normal; color: #dd092b; }
.top-hero-lead { margin-top: 44px; font-size: 14px; letter-spacing: .15em; line-height: 1.9; color: #1a1c1d; }
.top-hero-sub { margin-top: 56px; font-size: 20px; font-weight: 700; letter-spacing: .15em; }
/* 1540px超は1行表示。1540px以下は2行に折り返し、hero-collageに文字が載らないようにする */
.top-hero-sub br { display: none; }
@media (max-width: 1540px) {
  .top-hero-sub br { display: inline; }
}
.top-hero .btn-pill { margin-top: 36px; }

/* hero 登場アニメーション
   1) タイトルを1行ずつ → 2) リード・サブ・ボタン → 3) グラフィック
   ページロード起点のCSSアニメーションで一本のタイムラインとして制御する。
   (パララックスJSは .hero-collage 親に transform を掛けるため子要素側で animate しても競合しない) */
@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.top-hero-title .hero-line {
  display: inline-block;
  animation: hero-text-in .7s cubic-bezier(.22, .61, .36, 1) both;
}
.top-hero-title .hero-line:nth-of-type(2) { animation-delay: .25s; }
.top-hero-title .hero-line:nth-of-type(3) { animation-delay: .5s; }
.top-hero-lead,
.top-hero-sub,
.top-hero-copy .btn-pill {
  animation: hero-text-in .7s cubic-bezier(.22, .61, .36, 1) both;
}
.top-hero-lead           { animation-delay: .75s; }
.top-hero-sub            { animation-delay: .9s; }
.top-hero-copy .btn-pill { animation-delay: 1.05s; }

/* 文字が出揃ってから、各マスクが「穴が無から広がる」ように登場(少しずつ時差)。
   登場はインラインSVG clipPath内のSMIL <animate attributeName="d">のみで行う:
   基準dとentry valuesの先頭 = ゼロ面積に潰した点(→何も見えない)
   → オーバーシュート → フル形状。
   ゼロ面積スタートのためSMIL開始前は完全に不可視で、CSS側のopacityフェードは不要
   (CSSアニメーションとSMILは時計が別で、同期ズレで極小マスクが静止表示される
   不具合の原因になったため廃止)。
   登場の時差は front-page.php 側 entry <animate> の begin(0/.2/.4/.6s)で制御 */

.top-ticker { position: relative; z-index: 3; margin-top: 36px; padding-bottom: 40px; /* .top-heroのoverflow:hiddenで影が切れないように */ }
/* height 168px = 3行 × 56px。padding無しで .top-ticker-list を align-self: stretch させ、
   各 .top-ticker-item を flex:1 で均等3分割 → 行同士の境界にborderが等間隔で並ぶ。
   高さを固定するのは .top-business の margin-top(カード中央=白/グレー境界)を確定させるため */
.top-ticker-card {
  max-width: 1500px; margin: 0 auto;
  background: #fff; border-radius: 24px; box-shadow: 0 4px 28px rgba(0,0,0,.06);
  height: 168px; padding: 14px 48px;
  display: flex; align-items: center; gap: 36px;
}
.top-ticker-label { color: #de1e40; font-weight: 700; font-size: 16px; letter-spacing: .1em; flex: none; }
.top-ticker-list { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; align-self: stretch; display: flex; flex-direction: column; }
.top-ticker-item { flex: 1; display: flex; align-items: center; gap: 36px; min-width: 0; }
.top-ticker-item + .top-ticker-item { border-top: 1px solid #e7eaef; } /* 3行=2本の区切り線 */
.top-ticker-date { font-size: 14px; color: #1a1c1d; flex: none; }
.top-ticker-cat { flex: none; } /* デザインは .u-cat-chip と共通。色は is-cat-* で指定 */
.top-ticker-title { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.top-ticker-more { flex: none; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.top-ticker-more::after {
  content: ""; width: 7px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%231a1c1d' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =====================================================
   TOP: business
===================================================== */
/* margin-top: -124px = ティッカーの padding-bottom(40px) + カード高さ(168px)の半分(84px)。
   position: relative でヒーロー(白背景・positioned)より上に描画し、カード中央が白/グレーの境目になる */
.top-business { position: relative; background: #f3f5f9; padding: 220px 0 136px; margin-top: -124px; }
.top-business-grid { display: flex; gap: 60px; align-items: flex-start; }
.top-business-head { width: 360px; flex: none; }
.top-business-head .ttl-en { color: #de1e40; font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.top-business-head .ttl-ja { font-size: 43px; font-weight: 700; letter-spacing: .04em; margin-top: 8px; }
.top-business-head .desc { margin-top: 36px; font-size: 16px; line-height: 1.85; letter-spacing: .04em; }
.top-business-head .btn-pill { margin-top: 48px; }
.top-business-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; flex: 1; align-self: center; }
.biz-card {
  border-radius: 16px; color: #fff; min-height: 300px; padding: 40px 32px 16px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative;
}
.biz-card.is-red { background: #dd2240; }
.biz-card.is-blue { background: #0160c7; }
.biz-card.is-green { background: #7fb410; }
.biz-card .biz-title { font-size: 20px; font-weight: 700; letter-spacing: .04em; color: #fff; }
.biz-card .biz-icon {
  width: 87px; height: 87px; background: #fff; border-radius: 12px; margin: 26px auto 0;
  display: flex; align-items: center; justify-content: center; font-size: 38px;
}
.biz-card .biz-desc { margin-top: 26px; font-size: 12px; line-height: 2; letter-spacing: .04em; color: #fff; }
.biz-card .biz-arrow {
  margin-top: auto; align-self: flex-end;
  width: 30px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14' viewBox='0 0 30 14'%3E%3Cpath d='M0 12h27M21 2l7 10' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =====================================================
   TOP: about
===================================================== */
.top-about { position: relative; padding: 120px 0 110px; background: #fff; overflow: hidden; }
.top-about-ghost {
  font-weight: 900; font-size: clamp(40px, 3.4vw, 66px); letter-spacing: .04em;
  color: #f3f5f9; line-height: 1; user-select: none;
}
.top-about-grid { display: flex; gap: 56px; align-items: center; margin-top: 10px; }
.top-about-text { width: 400px; flex: none; }
.top-about-title { font-size: 34px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.top-about-desc { margin-top: 34px; font-size: 16px; line-height: 1.85; letter-spacing: .04em; }
.top-about-text .link-arrow { margin-top: 30px; }
/* 3枚カード: 幅比・高さ比は旧合成画像(top-about-photos.png)の 393:413:253(高さ287)を維持したまま
   ウィンドウ幅に応じて拡縮。コンテナはl-wrap(max-width 1580px + padding 40px)の外・画面右端まで
   ブリードし、カード群が上限サイズ(l-wrapキャップ時=合計1164px)に達したら右側は空白になる */
.top-about-photos {
  flex: 1; min-width: 0;
  display: grid;
  /* テキスト400px + カラムgap56px + l-wrap左padding40px を除いた、画面右端までの幅 */
  --ab-total: calc(100vw - (100vw - min(100vw, 1580px)) / 2 - 496px);
  /* カード3枚の合計幅(gap 16px×2 を除く)。上限 1164px でそれ以上は拡大しない */
  --ab-w: calc(min(var(--ab-total), 1164px) - 32px);
  grid-template-columns: calc(var(--ab-w) * .371) calc(var(--ab-w) * .390) calc(var(--ab-w) * .239);
  grid-template-rows: calc(var(--ab-w) * .271); /* = カード1の幅 × 287/393 */
  gap: 16px;
  margin-right: calc((min(100vw, 1580px) - 100vw) / 2 - 40px);
}
.top-about-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* =====================================================
   TOP: IR
===================================================== */
.top-ir { background: #fbfafa; padding: 90px 0 100px; }
.top-ir-head .ttl-en { color: #de1e40; font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.top-ir-head .ttl-ja { font-size: 43px; font-weight: 700; letter-spacing: .04em; margin-top: 8px; }
.top-ir-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; margin-top: 56px; }
.ir-card {
  background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.05);
  padding: 36px 24px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.ir-card .icon { height: 110px; display: flex; align-items: center; justify-content: center; }
.ir-card .icon svg { width: 82px; height: 82px; }
.ir-card h3 { font-size: 17px; font-weight: 700; margin-top: 18px; letter-spacing: .05em; }
.ir-card p { font-size: 13px; color: #55585b; line-height: 1.9; margin-top: 14px; }
.ir-card .link-arrow { margin-top: auto; padding-top: 20px; font-weight: 700; align-self: flex-end; }
@media (hover: hover) {
  .ir-card { position: relative; }
  .ir-card .link-arrow { opacity: 0; transition: opacity .3s; }
  .ir-card:hover .link-arrow { opacity: 1; }
  .ir-card .link-arrow::before { content: ""; position: absolute; inset: 0; }
}

/* =====================================================
   TOP: news + shared news list
===================================================== */
.top-news { background: #fff; padding: 110px 0 60px; }
.lists-news { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 56px; }
.lists-news[data-column-desktop="4"] { grid-template-columns: repeat(4, 1fr); }
.lists-news-item a { display: block; }
.lists-news-photo {
  position: relative; aspect-ratio: 335 / 210; border-radius: 10px; overflow: hidden; background: #f3f5f9;
}
.lists-news-info { margin-top: 16px; }
.lists-news-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lists-news-categories span, .u-cat-chip, .top-ticker-cat {
  display: inline-block; font-size: 12px; color: #fff; border-radius: 999px;
  padding: 2px 14px; letter-spacing: .03em; line-height: 1.7;
}
.is-cat-orange { background: #ef8200; }
.is-cat-blue { background: #2a6bdd; }
.is-cat-green { background: #6cb52d; }
.is-cat-gray { background: #7d8084; }
.is-cat-red { background: #dd4a2a; }
.lists-news-date { font-size: 13px; color: #7d8084; }
.lists-news-title { font-size: 15px; font-weight: 500; line-height: 1.75; margin-top: 10px; }
.lists-news-companies { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.lists-news-companies span {
  font-size: 11px; color: #7d8084; border: 1px solid #d4d6d8; border-radius: 999px; padding: 1px 10px;
}

/* =====================================================
   TOP: feature banner
===================================================== */
.top-feature { padding: 30px 0 120px; background: #fff; }
.feature-banner {
  background: #faf0ef; border-radius: 24px; overflow: hidden;
  display: flex; align-items: stretch; gap: 0;
}
.feature-banner-text { flex: 0 0 41.67%; min-width: 0; padding: 70px 20px 70px 66px; }
.feature-banner-text .label { color: #de1e40; font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.feature-banner-text h2 { font-size: 30px; font-weight: 700; letter-spacing: .06em; margin-top: 18px; line-height: 1.6; margin-right: -72px; white-space: nowrap; }
.feature-banner-text p { font-size: 14px; line-height: 2.1; margin-top: 22px; letter-spacing: .03em; }
.feature-banner-text p:not(.label) { margin-right: -56px; }
.feature-banner-text .btn-pill { margin-top: 34px; }
.feature-banner-photo { flex: 0 0 58.33%; min-width: 0; }
.feature-banner-photo img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }

/* =====================================================
   Sub page hero (共通)
===================================================== */
.page-hero { position: relative; overflow: hidden; background: #fff; }
/* 透過ヘッダーの背後までヒーロー背景を届かせる(ヘッダー高さぶん引き上げ+同量のpadding) */
.site-main > .page-hero:first-child,
.site-main > .page-hero-simple:first-child,
.site-main > section:first-child > .page-hero:first-child,
.site-main > section:first-child > .page-hero-simple:first-child {
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
}
.site-main > .page-hero-simple:first-child { min-height: calc(420px + var(--header-h)); }
.page-hero .hero-bg { position: absolute; inset: 0; }
.page-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* 右側の大きい写真(グレー背景の上にのせるオーバーレイ) */
.page-hero .hero-photo {
  position: absolute; top: 0; right: 0; height: 92%; z-index: 1;
  line-height: 0; pointer-events: none;
  animation: heroPhotoIn 1s cubic-bezier(.22, 1, .36, 1) .25s backwards;
}
.page-hero .hero-photo img { height: 100%; width: auto; display: block; }
@keyframes heroPhotoIn { from { opacity: 0; transform: translateX(70px); } }
@media (prefers-reduced-motion: reduce) { .page-hero .hero-photo { animation: none; } }
@media (max-width: 1100px) { .page-hero .hero-photo { display: none; } }
/* 旧wave画像はカーブ境界(::after)に置き換え */
.hero-waves { display: none; }
/* ヒーロー下端のカーブ境界(カーブ.svg準拠)。背景・写真・モチーフをカーブ内に収める */
.page-hero::after,
.page-hero-simple::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  aspect-ratio: 1366 / 117.21;
  background: url('_assets/img/hero-curve.svg') no-repeat center / 100% 100%;
  pointer-events: none;
}
/* 会社概要: ヒーロー末尾にタブカードがあるため、カーブがカード背後を通るよう持ち上げる
   (border-bottom がカーブ以下を白で埋める) */
.body-company .page-hero::after { border-bottom: 46px solid #fff; }
/* 下端カーブ(::after 高さ 8.58vw)にテキストが隠れないよう、カーブ高さ+余白ぶんの下padding */
.page-hero-inner { position: relative; z-index: 2; padding: 84px 0 calc(8.58vw + 48px); }
/* 会社概要: ヒーロー内にタブカードが続くため下paddingは控えめに(タブ側のmargin 40pxと合わせて64px) */
.body-company .page-hero-inner { padding-bottom: 24px; }
.topicpath { position: relative; z-index: 2; }
.topicpath-lists { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.topicpath-lists-item { font-size: 14px; letter-spacing: .04em; position: relative; }
.topicpath-lists-item + .topicpath-lists-item::before {
  content: ""; position: absolute; left: -18px; top: 50%;
  width: 6px; height: 6px; border-top: 1.5px solid #1a1c1d; border-right: 1.5px solid #1a1c1d;
  transform: translateY(-50%) rotate(45deg);
}
.page-hero-big {
  font-weight: 900; font-size: clamp(56px, 6.8vw, 130px);
  line-height: 1; letter-spacing: .04em; margin-top: 48px; color: #1a1c1d;
}
.page-hero-big .red { color: #de1e40; display: block; }
.page-hero-title-ja { font-size: 30px; font-weight: 700; letter-spacing: .2em; margin-top: 44px; }
.page-hero-lead { margin-top: 24px; font-size: 18px; line-height: 1.95; letter-spacing: .2em; max-width: 780px; }
.page-hero-wave { position: relative; z-index: 1; margin-top: 60px; line-height: 0; }
.page-hero-wave img { width: 100%; }

/* シンプル版サブページヒーロー(役員紹介等) */
.page-hero-simple { position: relative; overflow: hidden; min-height: 420px; }
.page-hero-simple .hero-bg { position: absolute; inset: 0; }
.page-hero-simple .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.page-hero-simple .page-hero-inner { padding: 84px 0 90px; }
.page-hero-simple h1 { font-size: clamp(38px, 3.4vw, 64px); font-weight: 700; letter-spacing: .1em; margin-top: 54px; }
.page-hero-simple .hero-sub { color: #de1e40; font-size: 22px; font-weight: 700; letter-spacing: .1em; margin-top: 18px; }

/* =====================================================
   Company page
===================================================== */
.company-tabs { position: relative; z-index: 3; margin-top: 40px; padding-bottom: 40px; /* .page-heroのoverflow:hiddenで影が切れないように */ }
.page-hero + .company-section { padding-top: 70px; /* 上のpadding-bottom分を相殺 */ }
.company-tabs-card {
  background: #fff; border-radius: 20px; box-shadow: 0 4px 28px rgba(0,0,0,.08);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  padding: 34px 80px;
  max-width: 1500px; margin: 0 auto; gap: 20px;
}
.company-tabs-card a { display: inline-flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 500; }
.company-tabs-card a svg { width: 30px; height: 30px; stroke: #de1e40; }
.company-section { padding: 110px 0 40px; }
/* 社長メッセージ: スプリットカード(ダークパネル + 写真パネル) */
.company-message-card { display: flex; margin-top: 60px; border-radius: 28px; overflow: hidden; }
.company-message-panel { flex: 1.15; background: #17191c; color: #fff; padding: 68px 64px 72px; }
.company-message-panel .panel-label { color: #de1e40; font-size: 14px; font-weight: 700; letter-spacing: .3em; }
.company-message-panel .catch { font-size: 40px; font-weight: 700; letter-spacing: .12em; line-height: 1.55; margin-top: 26px; }
.company-message-panel .bar { display: block; width: 46px; height: 3px; background: #de1e40; margin: 30px 0; }
.company-message-panel .desc { font-size: 15px; line-height: 2.2; letter-spacing: .1em; color: #b9bdc2; max-width: 480px; }
.company-message-panel .btn-pill { margin-top: 44px; }
.company-message-visual {
  flex: 1; position: relative; background: #eef1f5;
  display: flex; align-items: flex-end; justify-content: center;
}
/* 画像は絶対配置(カードの高さは左パネルの内容で決める) */
.company-message-visual img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 94%; width: auto; }
.company-message-visual .sign-chip {
  position: absolute; left: 28px; bottom: 28px;
  display: inline-flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 999px; padding: 12px 26px;
  font-size: 14px; letter-spacing: .08em; color: #3a3c3e;
}
.company-message-visual .sign-chip b { color: #de1e40; font-size: 17px; font-weight: 700; letter-spacing: .1em; }

.company-stats { margin-top: 90px; border-top: 1px solid #e8eaec; border-bottom: 1px solid #e8eaec; padding: 44px 0; }
.company-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.stat-item { display: flex; align-items: center; gap: 22px; justify-content: center; }
.stat-item .icon { font-size: 44px; line-height: 1; }
.stat-item .icon svg { width: 64px; height: 64px; }
.stat-item .label { font-size: 15px; font-weight: 500; }
.stat-item .value { font-size: 44px; font-weight: 700; color: #de1e40; line-height: 1.2; letter-spacing: .02em; }
.stat-item .value small { font-size: 20px; color: #1a1c1d; font-weight: 700; margin-left: 4px; }
.stat-item .note { display: block; font-size: 11px; color: #9a9da0; margin-top: 4px; }

.company-info { background: #fbfafa; padding: 100px 0 110px; margin-top: 90px; }
.company-info-grid { display: flex; gap: 90px; margin-top: 60px; align-items: flex-start; }
.company-info-table { flex: 1; max-width: 690px; }
.company-info-table dl {
  display: grid; grid-template-columns: 180px 1fr;
  border-top: 1px solid #dcdee0; padding: 20px 0; font-size: 18px; letter-spacing: .12em;
}
.company-info-table dl:last-child { border-bottom: 1px solid #dcdee0; }
.company-info-table dt { font-weight: 700; }
.company-info-table dd { font-weight: 500; }
.company-access { flex: 1; max-width: 721px; }
.company-access .place { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; letter-spacing: .1em; }
.company-access .place svg { width: 26px; height: 26px; }
.company-access .addr { font-size: 16px; margin-top: 12px; padding-left: 38px; line-height: 1.6; letter-spacing: .1em; }
.company-access .map { margin-top: 26px; border-radius: 28px; overflow: hidden; }
.company-access .map svg { display: block; width: 100%; height: auto; filter: grayscale(1); }
.company-access .map .map-pc { aspect-ratio: 721 / 340; }
.company-access .map .map-sp { aspect-ratio: 375 / 330; }
.company-access .map .map-sp { display: none; }
@media (max-width: 600px) {
  .company-access .map { margin: 26px -24px 0; border-radius: 0; }
  .company-access .map .map-pc { display: none; }
  .company-access .map .map-sp { display: block; }
}

.company-vision { padding: 130px 0 90px; position: relative; overflow: hidden; }
.company-vision-grid { display: flex; gap: 60px; align-items: flex-start; }
.company-vision-text { max-width: 880px; }
.company-vision .label { color: #de1e40; font-size: 20px; font-weight: 900; letter-spacing: .08em; }
.company-vision .catch { font-size: clamp(44px, 4.1vw, 80px); font-weight: 700; line-height: 1.3; margin-top: 26px; letter-spacing: .02em; }
.company-vision .catch em { font-style: normal; color: #de1e40; }
.company-vision .dots { display: flex; gap: 42px; margin-top: 40px; }
.company-vision .dots span { width: 10px; height: 10px; border-radius: 50%; }
.company-vision .body { margin-top: 56px; font-size: 16px; line-height: 2; letter-spacing: .04em; color: #000; }
.company-vision .body p + p { margin-top: 32px; }
.company-vision-img { flex: 1; min-width: 320px; }
/* PC版のみ：左位置は維持したまま、右端を画面端より約20px先までブリードさせ大きく見せる */
@media (min-width: 901px) {
  .company-vision-img { margin-right: calc(50% - 50vw - 20px); }
  .company-vision-img img { width: 100%; }
}
.company-vision .doc-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 48px; font-size: 16px; }
.company-vision .doc-link svg { width: 18px; height: 18px; }

.company-history { padding: 90px 0 130px; }
.history-timeline { margin-top: 80px; position: relative; padding-left: 8px; }
.history-year { display: flex; gap: 56px; position: relative; padding-bottom: 64px; }
.history-year::before {
  content: ""; position: absolute; left: 11px; top: 30px; bottom: -6px; width: 2px; background: #de1e40;
}
/* 最終年(現在は2026年)もラインを引く。ただし次の年が無いので、
   ブロック下paddingの分だけ手前(=最後の項目の下端)で止める */
.history-year:last-child::before { bottom: 64px; }
.history-year .year {
  /* align-self: flex-start が無いと行全体の高さにストレッチし、
     small(年)の align-self: flex-end が行の最下部まで落ちてしまう */
  flex: none; align-self: flex-start; width: 240px; display: flex; align-items: flex-start; gap: 24px;
  color: #de1e40; font-weight: 700; font-size: 42px; line-height: 1; letter-spacing: .02em;
  white-space: nowrap;
}
.history-year .year::before {
  content: ""; flex: none; width: 24px; height: 24px; margin-top: 8px;
  border: 3px solid #de1e40; border-radius: 50%; background: #fff; position: relative; z-index: 1;
}
.history-year .year small { font-size: 20px; align-self: flex-end; margin-left: -16px; padding-bottom: 2px; }
.history-items { flex: 1; padding-top: 4px; }
.history-item { display: flex; gap: 26px; padding: 12px 0; border-bottom: 1px solid #f0f1f3; align-items: baseline; }
.history-item:last-child { border-bottom: 0; }
.history-item .month {
  flex: none; min-width: 64px; text-align: center; color: #de1e40; font-weight: 700; font-size: 15px;
  background: #fdf3f4; border-radius: 4px; padding: 2px 10px; position: relative;
}
.history-item .month::before {
  content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; background: #de1e40; border-radius: 50%;
}
.history-item .text { font-size: 16px; line-height: 1.9; letter-spacing: .02em; }

/* =====================================================
   CTA banner (共通)
===================================================== */
.cta-banner { padding: 40px 0 110px; }
.cta-banner-card {
  max-width: 1204px; margin: 0 auto;
  background: #fff; border: 1px solid #e8eaec; border-radius: 20px;
  box-shadow: 0 4px 28px rgba(0,0,0,.05);
  padding: 44px 60px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
}
.cta-banner-card .text { flex: 1; min-width: 260px; }
.cta-banner-card h2 { font-size: 24px; font-weight: 700; letter-spacing: .06em; }
.cta-banner-card p { font-size: 14px; color: #55585b; margin-top: 10px; }
.cta-banner-card .buttons { display: flex; gap: 20px; flex-wrap: wrap; }
/* 1000px以下: テキストを上・ボタンを下の縦積みにし、内容を中央揃え */
@media (max-width: 1000px) {
  .cta-banner-card { flex-direction: column; align-items: center; text-align: center; gap: 28px; }
  .cta-banner-card .text { flex: none; width: 100%; min-width: 0; }
  .cta-banner-card .buttons { width: 100%; justify-content: center; }
}

/* =====================================================
   Executive page
===================================================== */
.executive-section { padding: 100px 0 40px; }
.executive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 40px; }
.exec-card {
  background: #fff; border-radius: 16px; box-shadow: 0 6px 30px rgba(0,0,0,.06);
  overflow: hidden; display: flex; flex-direction: column;
}
.exec-card .photo { aspect-ratio: 44 / 39; background: linear-gradient(160deg, #f3f5f9 0%, #e6e9ee 100%); position: relative; overflow: hidden; }
.exec-card .photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.exec-card .photo .placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.exec-card .photo .placeholder svg { width: 120px; height: 120px; opacity: .35; }
.exec-card .body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.exec-card .position { color: #de1e40; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.exec-card .name { font-size: 24px; font-weight: 700; margin-top: 6px; letter-spacing: .1em; }
.exec-card .name-en { font-size: 11px; color: #de1e40; letter-spacing: .14em; margin-top: 2px; text-transform: uppercase; }
.exec-card .bio { font-size: 14px; line-height: 1.95; margin-top: 16px; color: #35383b; }

/* =====================================================
   Message page
===================================================== */
.message-section { padding: 90px 0 60px; }
.message-grid { display: flex; gap: 70px; }
.message-body { flex: 1; max-width: 951px; font-size: 16px; line-height: 2.2; letter-spacing: .12em; }
.message-body p + p { margin-top: 34px; }
.message-side { width: 300px; flex: none; text-align: center; }
.message-side .note-img { margin-bottom: 20px; }
.message-side .president-photo img { width: 100%; max-width: 259px; }

/* =====================================================
   Service page
===================================================== */
.service-hero-visual { position: absolute; right: 0; top: 60px; width: 50%; max-width: 955px; z-index: 1; }
.service-nav { position: relative; z-index: 3; margin-top: 60px; }

.service-block { position: relative; padding: 150px 0 60px; }
/* 2026-07デザイン更新: 番号・タイトルは手描き風SVG置換をやめ、プレーンテキスト表示(番号は薄グレー) */
.service-block .num {
  color: #d4d6d8; font-weight: 500; font-size: clamp(80px, 7.3vw, 140px); line-height: 1.2; letter-spacing: -0.01em;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}
.service-block-head { position: relative; z-index: 2; }
/* PCでは1行固定(あふれる場合は script.js がそのタイトルのみ縮小)。SPは折り返し許可 */
.service-block-title { font-size: clamp(52px, 5vw, 96px); font-weight: 700; letter-spacing: .02em; margin-top: 8px; white-space: nowrap; }
.service-block-title .amp { font-size: .6em; } /* 「&」は40%縮小 */
.service-block .en-label { font-size: 20px; font-weight: 700; margin-top: 12px; letter-spacing: .08em; color: #de1e40; }
/* en-label も番号(num)と同様にビューポート進入時に開始アニメーション(番号の塗りと同じ斜めワイプ)。
   .js-wipe は script.js がアニメ実行時のみ付与するため、JS無効・reduced-motion 時は常時表示のまま */
.service-block .en-label.js-wipe { clip-path: polygon(0 0, 0 0, -18% 100%, -18% 100%); transition: clip-path .55s cubic-bezier(.45, 0, .55, 1); }
.service-block .en-label.js-wipe.is-wiped { clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%); }
.service-block .catch { font-size: 24px; font-weight: 700; letter-spacing: .14em; margin-top: 32px; line-height: 1.6; }
.service-block .desc { font-size: 18px; line-height: 1.95; letter-spacing: .04em; margin-top: 32px; max-width: 680px; }
/* 画像プレースホルダー: _assets/img に該当ファイルを置くと自動で実画像表示(page-service.php の ab_img_or_placeholder) */
.img-ph { background: #d9d9d9; display: flex; align-items: center; justify-content: center; }
.img-ph span { color: #96999d; font-size: 13px; letter-spacing: .1em; }
.service-card-img img, .media-band-photo img, .subsidiary-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}
/* ビジュアルはテキスト(head)エリアに対して上下中央寄せ。
   セクションのpaddingが上下非対称(150px/60px)のため、その差の半分(+45px)を足して
   コンテンツ領域の中心に合わせる(js-revealのtransformと競合するため内側のimgにリビール付与) */
.service-block-visual { position: absolute; top: calc(50% + 45px); transform: translateY(-50%); right: 0; width: 50%; max-width: 952px; z-index: 1; }
/* 反転ブロック(IP&コマース等): ビジュアル左・テキスト右 */
.service-block.is-flip .service-block-visual { right: auto; left: 0; }
.service-block.is-flip .service-block-head { margin-left: auto; max-width: 680px; }
/* セクションごとのアクセントカラー */
#ip .en-label { color: #007cd6; }
#media .en-label { color: #80c600; }
/* グレー背景の直後に番号ブロックが続く場合は白余白を足して背景の切り替わりを緩める */
.service-sub + .service-block { margin-top: 40px; }

.service-sub { position: relative; padding: 80px 0; }
/* グレー背景ブロックが連続する場合は背景同士が密着しないよう白余白を確保 */
.service-sub + .service-sub { margin-top: 80px; }
.service-sub-bg {
  position: absolute; top: 0; bottom: 0; left: 100px; right: 0; /* 右へのはみ出し(-60px)は横スクロールの原因になるため0に */
  background: #fbfafa; border-radius: 40px 0 0 40px;
}
.service-sub.is-flip .service-sub-bg { left: 0; right: 100px; border-radius: 0 40px 40px 0; }
/* 1800px以下: 片側100pxのインデントをやめて背景を全幅(=100vw)に伸ばす。
   width:100vw はスクロールバー幅ぶん溢れて横スクロールの原因になるため left/right:0 で全幅にする */
@media (max-width: 1800px) {
  .service-sub-bg, .service-sub.is-flip .service-sub-bg { left: 0; right: 0; border-radius: 0; }
}
/* メディア事業カード(.media-band直後のグレーブロック)は背景同士が密着するため白余白を確保 */
.media-band + .service-sub { margin-top: 80px; }
.service-sub-inner { position: relative; z-index: 2; }
.service-sub h3 { font-size: 40px; font-weight: 700; letter-spacing: .12em; }
.service-sub .sec-bar { margin-top: 22px; }
.service-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 56px; }
.service-card {
  background: #fff; border-radius: 21px; box-shadow: 0 4px 40px rgba(0,0,0,.04);
  padding: 56px 58px 48px;
}
/* 上部に画像エリアを持つカード(AIソリューション事業) */
.service-card--visual { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.service-card--visual .service-card-img { aspect-ratio: 730 / 330; border-radius: 21px 21px 0 0; }
/* フラットイラストSVG(AIマーケティング事業カード): 写真と違い切り抜くと図が壊れるため
   cover ではなく contain で全体を表示する。左右に余白を確保。
   カードを横並びにしたとき下のキャッチ(赤ボタン)の位置を揃えるため、img側に共通の
   aspect-ratio を持たせて4枚の画像枠の高さを統一する(比率の異なるSVGは枠内で中央寄せ)。
   22/10 = 2.2 は4枚のうち最も縦長なSVG(aio_seo_media.svg 787.39:357.5 = 2.2025)基準。
   SVGを差し替えて最縦長の比率が変わったときはこの値だけ更新する */
.service-card--visual .service-card-img--flat {
  aspect-ratio: auto; background: #fbfafa; padding: 40px 40px 24px;
}
.service-card-img--flat img {
  aspect-ratio: 22 / 10; width: 100%; height: auto; object-fit: contain;
}
/* SVG下のキャッチコピー(元はSVG内に描かれていた赤ボタン+補足をHTML化したもの) */
.service-card-cta { background: #fbfafa; padding: 0 40px 40px; text-align: center; }
.service-card-cta-pill {
  display: inline-block; background: #d8434e; color: #fff;
  font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: .04em;
  padding: 15px 34px; border-radius: 999px; text-wrap: balance;
}
.service-card-cta-note {
  margin-top: 14px; color: #96999d; font-size: 13px; line-height: 1.7; letter-spacing: .04em;
}
/* 補足コピーが無いカードでも1行分の高さを確保し、横並びカードの本文開始位置を揃える */
.service-card-cta-note:empty::after { content: "\00a0"; }
.service-card--visual .service-card-body { padding: 48px 58px; }
.service-card h4 { color: #de1e40; font-size: 24px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; }
.service-card .lead { font-size: 16px; line-height: 2.15; margin-top: 22px; letter-spacing: .04em; }
.service-card ul { margin-top: 26px; }
.service-card ul li {
  position: relative; padding-left: 36px; font-size: 16px; line-height: 2.15; letter-spacing: .04em;
}
.service-card ul li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='none' stroke='%23de1e40' stroke-width='1.6'/%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%23de1e40' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 2026-07コンテンツ拡充: AIソリューション事業(AX/DX資料統合) ---------- */
.ax-lead { margin-top: 30px; max-width: 1160px; font-size: 16px; line-height: 2.1; letter-spacing: .04em; }

/* 対応領域 4分野 */
.ax-domains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
/* 上端のカラーバー(border-top: 4px)は廃止。分野の色分けは見出し色のみで表現する */
.ax-domain {
  background: #fff; border-radius: 16px; box-shadow: 0 4px 40px rgba(0,0,0,.04);
  padding: 22px 24px 20px;
}
.ax-domain h5 { font-size: 17px; font-weight: 700; letter-spacing: .08em; }
.ax-domain p { font-size: 13px; line-height: 1.8; margin-top: 8px; color: #555; }
.ax-domain--1 h5 { color: #0130EE; }
.ax-domain--2 h5 { color: #0C910B; }
.ax-domain--3 h5 { color: #FF5004; }
.ax-domain--4 h5 { color: #F00A49; }

/* セクション内小見出し */
.ax-subttl { margin-top: 76px; font-size: 24px; font-weight: 700; letter-spacing: .1em; display: flex; align-items: center; gap: 16px; }
.ax-subttl::before { content: ""; width: 20px; height: 4px; background: #de1e40; flex: none; }

/* 4つの強み */
.ax-strengths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.ax-strength { background: #fff; border-radius: 21px; box-shadow: 0 4px 40px rgba(0,0,0,.04); padding: 32px 30px 28px; }
.ax-strength .n { font-size: 13px; font-weight: 700; color: #de1e40; letter-spacing: .18em; }
.ax-strength h5 { font-size: 17px; line-height: 1.6; margin-top: 10px; letter-spacing: .04em; }
.ax-strength p { font-size: 13.5px; line-height: 1.9; margin-top: 12px; color: #555; }

/* 導入事例コンパクトカード */
.ax-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.ax-case { background: #fff; border-radius: 21px; box-shadow: 0 4px 40px rgba(0,0,0,.04); padding: 32px 32px 28px; display: flex; flex-direction: column; }
.ax-case h5 { font-size: 17.5px; line-height: 1.6; letter-spacing: .04em; }
.ax-case p { font-size: 13.5px; line-height: 1.9; margin-top: 12px; color: #555; flex: 1; }
.ax-case .kpi { margin-top: 16px; font-size: 13px; font-weight: 700; color: #de1e40; letter-spacing: .04em; padding-top: 14px; border-top: 1px solid #eee; }

/* 実績数値ストリップ */
.ax-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 44px; }
.ax-stat { background: #fff; border-radius: 21px; box-shadow: 0 4px 40px rgba(0,0,0,.04); text-align: center; padding: 30px 12px 26px; }
.ax-stat .v { font-size: 40px; font-weight: 700; color: #de1e40; line-height: 1.2; letter-spacing: .02em; }
.ax-stat .v small { font-size: 20px; margin-left: 2px; }
.ax-stat .l { font-size: 13px; margin-top: 8px; letter-spacing: .08em; color: #555; }
.ax-note { margin-top: 18px; font-size: 12px; color: #999; }

/* 推進モデル 5ステップ */
.ax-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; margin-top: 40px; }
.ax-step { background: #fff; border-radius: 16px; box-shadow: 0 4px 40px rgba(0,0,0,.04); padding: 24px 22px; position: relative; }
.ax-step .n { font-size: 12px; font-weight: 700; color: #de1e40; letter-spacing: .18em; }
.ax-step h6 { font-size: 15.5px; font-weight: 700; margin-top: 6px; line-height: 1.5; }
.ax-step p { font-size: 12.5px; line-height: 1.8; margin-top: 8px; color: #555; }
.ax-step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -22px; width: 14px; height: 14px;
  border-top: 2.5px solid #de1e40; border-right: 2.5px solid #de1e40; transform: translateY(-50%) rotate(45deg);
}

/* 業態別パッケージ */
.ax-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.ax-package { background: #fff; border-radius: 21px; box-shadow: 0 4px 40px rgba(0,0,0,.04); padding: 36px 36px 32px; }
.ax-package h5 { font-size: 19px; letter-spacing: .08em; }
.ax-package--1 h5 { color: #0130EE; }
.ax-package--2 h5 { color: #0C910B; }
.ax-package--3 h5 { color: #FF5004; }
.ax-package ul { margin-top: 18px; }
.ax-package ul li { position: relative; padding-left: 20px; font-size: 14px; line-height: 2; letter-spacing: .02em; }
.ax-package ul li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: #de1e40; }

/* 2026-07コンテンツ圧縮: 強み=アコーディオン / 事例=モーダル / パッケージ=タブ
   ※本文テキストはすべてHTMLに保持し、表示制御のみCSSで行う(AIO/SEOでクロール対象に残すため) */

/* --- 4つの強み: アコーディオン --- */
.ax-acc { margin-top: 32px; background: #fff; border-radius: 21px; box-shadow: 0 4px 40px rgba(0,0,0,.04); overflow: hidden; }
.ax-acc-item + .ax-acc-item { border-top: 1px solid #eef0f1; }
.ax-acc-h { margin: 0; font-size: inherit; font-weight: inherit; }
.ax-acc-head {
  appearance: none; -webkit-appearance: none; width: 100%; background: none; border: 0; cursor: pointer;
  font-family: inherit; color: inherit; text-align: left;
  display: flex; align-items: center; gap: 18px; padding: 24px 30px; transition: background .25s;
}
.ax-acc-head:hover { background: #fafbfb; }
.ax-acc-head:focus-visible { outline: 2px solid #de1e40; outline-offset: -3px; }
.ax-acc-head .n { font-size: 13px; font-weight: 700; color: #de1e40; letter-spacing: .18em; flex: none; }
.ax-acc-head .t { font-size: 17px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; flex: 1; }
.ax-acc-icon { flex: none; position: relative; width: 16px; height: 16px; }
.ax-acc-icon::before, .ax-acc-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #de1e40; border-radius: 1px;
  transform: translate(-50%, -50%); transition: transform .3s ease, opacity .3s ease;
}
.ax-acc-icon::before { width: 16px; height: 2px; }
.ax-acc-icon::after { width: 2px; height: 16px; }
.ax-acc-head[aria-expanded="true"] .ax-acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.ax-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.ax-acc-panel > .ax-acc-inner { overflow: hidden; min-height: 0; }
.ax-acc-item.is-open .ax-acc-panel { grid-template-rows: 1fr; }
.ax-acc-inner p { font-size: 13.5px; line-height: 1.9; color: #555; padding: 0 30px 26px 71px; }

/* --- 導入事例: 3件表示 + モーダル --- */
.ax-case {
  appearance: none; -webkit-appearance: none; border: 0; font-family: inherit; color: inherit;
  text-align: left; cursor: pointer; transition: transform .3s ease, box-shadow .3s ease;
}
.ax-case:hover { transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0,0,0,.09); }
.ax-case:focus-visible { outline: 2px solid #de1e40; outline-offset: 3px; }
.ax-case.is-folded { display: none; }
.ax-case-more { margin-top: 14px; font-size: 12.5px; font-weight: 700; color: #de1e40; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 7px; }
.ax-case-more::after { content: ""; width: 7px; height: 7px; border-top: 2px solid #de1e40; border-right: 2px solid #de1e40; transform: rotate(45deg); }
.ax-cases-foot { margin-top: 28px; text-align: center; }
.ax-more {
  appearance: none; -webkit-appearance: none; font-family: inherit; cursor: pointer;
  background: #fff; border: 1.5px solid #de1e40; color: #de1e40; border-radius: 100px;
  font-size: 14px; font-weight: 700; letter-spacing: .08em; padding: 15px 46px; transition: background .3s, color .3s;
}
.ax-more .c { font-weight: 500; font-size: 12.5px; }
.ax-more:hover { background: #de1e40; color: #fff; }
.ax-more:focus-visible { outline: 2px solid #de1e40; outline-offset: 3px; }

/* モーダル本体 */
.ax-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ax-modal[hidden] { display: none; }
.ax-modal-veil { position: absolute; inset: 0; background: rgba(20,22,24,.62); opacity: 0; transition: opacity .3s ease; }
/* 下部に実績数値ストリップ(.ax-stats)を内包するため、680px→940pxに拡大しスクロールなしで収める */
.ax-modal-panel {
  position: relative; width: min(940px, 100%); max-height: min(86vh, 860px); overflow-y: auto;
  background: #fff; border-radius: 24px; padding: 52px 56px 44px; text-align: left;
  opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .3s ease, transform .3s ease;
  -webkit-overflow-scrolling: touch;
}
.ax-modal.is-open .ax-modal-veil { opacity: 1; }
.ax-modal.is-open .ax-modal-panel { opacity: 1; transform: none; }
.ax-modal-close { appearance: none; -webkit-appearance: none; position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; border-radius: 50%; transition: background .25s; }
.ax-modal-close:hover { background: #f3f4f5; }
.ax-modal-close::before, .ax-modal-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 17px; height: 2px; background: #1a1c1d; }
.ax-modal-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.ax-modal-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.ax-modal-eyebrow { font-size: 12px; font-weight: 700; color: #de1e40; letter-spacing: .16em; display: flex; align-items: center; gap: 12px; }
.ax-modal-count { color: #b9bcbf; letter-spacing: .1em; }
.ax-modal-title { font-size: 24px; font-weight: 700; line-height: 1.55; letter-spacing: .04em; margin-top: 14px; }
.ax-modal-body p { font-size: 14.5px; line-height: 2; color: #555; margin-top: 20px; }
.ax-modal-kpi { margin-top: 26px; padding-top: 20px; border-top: 1px solid #eee; font-size: 14px; font-weight: 700; color: #de1e40; letter-spacing: .04em; }
/* モーダル下部の実績数値ストリップ: 白背景のパネル上なのでカードの影は消し、薄いグレー地に */
.ax-modal .ax-stats { gap: 12px; margin-top: 30px; }
.ax-modal .ax-stat { background: #fbfafa; box-shadow: none; border-radius: 14px; padding: 20px 10px 18px; }
.ax-modal .ax-stat .v { font-size: 28px; }
.ax-modal .ax-stat .v small { font-size: 14px; }
.ax-modal .ax-stat .l { font-size: 11.5px; line-height: 1.6; letter-spacing: .04em; margin-top: 6px; }
.ax-modal .ax-note { margin-top: 12px; font-size: 11.5px; }
.ax-modal-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.ax-modal-arrow {
  appearance: none; -webkit-appearance: none; font-family: inherit; cursor: pointer;
  background: none; border: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #1a1c1d;
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 2px; transition: color .25s;
}
.ax-modal-arrow:hover { color: #de1e40; }
.ax-modal-arrow::before, .ax-modal-arrow::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.ax-modal-prev::after { display: none; }
.ax-modal-prev::before { transform: rotate(-135deg); }
.ax-modal-next::before { display: none; }
.ax-modal-next::after { transform: rotate(45deg); }
body.is-ax-modal-open { overflow: hidden; }

/* --- 業態別パッケージ: タブ --- */
.ax-tabs { margin-top: 40px; }
.ax-tablist { display: flex; gap: 10px; flex-wrap: wrap; }
.ax-tab {
  appearance: none; -webkit-appearance: none; font-family: inherit; cursor: pointer;
  background: #fff; border: 1.5px solid #e4e7e9; color: #7b8085; border-radius: 100px;
  font-size: 14.5px; font-weight: 700; letter-spacing: .08em; padding: 12px 34px; transition: all .28s ease;
}
.ax-tab:hover { border-color: #c9ced2; color: #1a1c1d; }
.ax-tab:focus-visible { outline: 2px solid #de1e40; outline-offset: 2px; }
.ax-tab--1.is-active { background: #0130EE; border-color: #0130EE; color: #fff; }
.ax-tab--2.is-active { background: #0C910B; border-color: #0C910B; color: #fff; }
.ax-tab--3.is-active { background: #FF5004; border-color: #FF5004; color: #fff; }
.ax-tabs .ax-package { margin-top: 20px; }
.ax-tabs .ax-package[hidden], .ax-tabs .ax-package.is-hidden { display: none; }
.ax-tabs .ax-package h5 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ax-tabs .ax-package ul { margin-top: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
.ax-tabs .ax-package.is-enter { animation: axFade .35s ease both; }
@keyframes axFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1280px) {
  .ax-domains, .ax-strengths, .ax-cases { grid-template-columns: repeat(2, 1fr); }
  .ax-flow { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .ax-step:not(:last-child)::after { display: none; }
}
@media (max-width: 900px) {
  .ax-lead { margin-top: 24px; }
  .ax-subttl { margin-top: 48px; font-size: 20px; }
  .ax-domains, .ax-strengths, .ax-cases, .ax-packages, .ax-flow { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .ax-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
  .ax-stat .v { font-size: 32px; }
  .ax-package { padding: 28px 26px; }
  .ax-acc { margin-top: 24px; }
  .ax-acc-head { padding: 20px 22px; gap: 14px; }
  .ax-acc-head .t { font-size: 15.5px; }
  .ax-acc-inner p { padding: 0 22px 22px 22px; }
  .ax-cases-foot { margin-top: 20px; }
  .ax-more { width: 100%; padding: 15px 20px; }
  .ax-modal { padding: 0; align-items: flex-end; }
  .ax-modal-panel { width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; padding: 44px 24px 32px; transform: translateY(24px); }
  .ax-modal-title { font-size: 19px; }
  .ax-modal-nav { margin-top: 26px; }
  .ax-tabs { margin-top: 28px; }
  .ax-tablist { gap: 8px; }
  .ax-tab { flex: 1 1 auto; padding: 11px 12px; font-size: 13px; letter-spacing: .04em; }
  .ax-tabs .ax-package ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ax-acc-panel, .ax-modal-veil, .ax-modal-panel, .ax-case { transition: none; }
  .ax-tabs .ax-package.is-enter { animation: none; }
}

/* 2026-07デザイン更新: 全幅の図版の下にステップを2×2グリッドで配置 */
.service-ip-flow { border-top: 1px solid #e8eaec; margin: 70px 0 60px; padding-top: 100px; }

/* IP CROSS 循環図(旧 service-ip-diagram.png のコード版)
   PC: 左ラベル(8-5) / 円グラフィック / 右ラベル(1-4) の3カラム
   SP(900px以下): 円グラフィック → 1〜8の順にラベルを縦積み */
.ip-diagram-cg { display: grid; grid-template-columns: 25.5% minmax(0, 1fr) 25.5%; column-gap: 46px; }
.ipc-circle { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
.ipc-col--l { grid-column: 1; grid-row: 1; }
.ipc-col--r { grid-column: 3; grid-row: 1; }
.ipc-svg { display: block; width: 100%; height: auto; }
.ipc-col { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 2px 0; }
.ipc-item { position: relative; display: flex; gap: 26px; }
/* 図の各項目をクリックすると対応するステップカードへジャンプ */
.ipc-jump {
  position: absolute; inset: -14px -18px; z-index: 2; border-radius: 16px;
  overflow: hidden; white-space: nowrap; text-indent: -200vw;
  transition: background .25s;
}
.ipc-jump { cursor: pointer; }
.ipc-jump:focus-visible { outline: 2px solid #de1e40; outline-offset: 2px; }
.ipc-item:has(.ipc-jump:hover) .ipc-title { text-decoration: underline; text-underline-offset: 4px; }
.ipc-item:has(.ipc-jump:hover) .ipc-num { transform: scale(1.08); }
.ipc-num { transition: transform .25s; }
.ipc-num {
  flex: none; width: 40px; height: 40px; border-radius: 50%; margin-top: -4px;
  color: #fff; font-size: 24px; font-weight: 700; line-height: 37px; text-align: center;
}
.ipc-item--1 .ipc-num { background: #0149EC; }
.ipc-item--2 .ipc-num { background: #00A5AD; }
.ipc-item--3 .ipc-num { background: #009C52; }
.ipc-item--4 .ipc-num { background: #639C00; }
.ipc-item--5 .ipc-num { background: #FF7300; }
.ipc-item--6 .ipc-num { background: #EF2918; }
.ipc-item--7 .ipc-num { background: #D60052; }
.ipc-item--8 .ipc-num { background: #6329A5; }
.ipc-title { font-size: 23px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; }
.ipc-title .s { font-size: 19px; }
/* 元画像同様、長いタイトルは1行に収まるよう少し小さく */
.ipc-item--2 .ipc-title { font-size: 19px; }
.ipc-item--4 .ipc-title { font-size: 20px; }
.ipc-item--1 .ipc-title { color: #0130EE; }
.ipc-item--2 .ipc-title { color: #028573; }
.ipc-item--3 .ipc-title { color: #0C910B; }
.ipc-item--4 .ipc-title { color: #479603; }
.ipc-item--5 .ipc-title { color: #FF5004; }
.ipc-item--6 .ipc-title { color: #FD0304; }
.ipc-item--7 .ipc-title { color: #F00A49; }
.ipc-item--8 .ipc-title { color: #2C02AF; }
/* PC: 右カラムは円グラフィックとの間隔を確保するため文字を少し小さく */
@media (min-width: 1151px) {
  .ipc-col--r { padding-left: 10px; }
  .ipc-col--r .ipc-title { font-size: 20px; }
  .ipc-col--r .ipc-item--2 .ipc-title { font-size: 18px; }
  .ipc-col--r .ipc-item--4 .ipc-title { font-size: 18px; }
  .ipc-col--r .ipc-list li { font-size: 15px; }
  .ipc-col--r .ipc-item--4 .ipc-list li { font-size: 13.5px; }
}
.ipc-list { margin: 10px 0 0 2px; }
.ipc-list li {
  position: relative; padding-left: 19px; font-size: 16px; font-weight: 700;
  line-height: 1.6; letter-spacing: .02em; color: #111; margin-top: 9px;
}
.ipc-list li::before { content: "・"; position: absolute; left: 0; }
/* 元画像同様、項目4は行が長いためリストも少し小さく(1行に収める) */
.ipc-item--4 .ipc-list li { font-size: 14px; }
.ipc-logos { display: flex; align-items: center; gap: 36px; margin: 18px 0 0 21px; }
.ipc-logo { width: auto; height: 40px; }
.ipc-logo--semagency { height: 38px; }
.ipc-logo--planagroup { height: 56px; }
.ipc-logo--nudge { height: 46px; }
.ipc-logo--zaiko { height: 50px; }
@media (min-width: 1151px) and (max-width: 1280px) {
  .ipc-title { font-size: 19px; }
  .ipc-list li { font-size: 14px; }
  .ipc-num { width: 34px; height: 34px; font-size: 20px; line-height: 31px; margin-top: -2px; }
  .ipc-item { gap: 18px; }
  .ipc-logo, .ipc-logo--semagency { height: 32px; }
  .ipc-logo--planagroup { height: 46px; }
  .ipc-logo--nudge { height: 38px; }
  .ipc-logo--zaiko { height: 42px; }
}
/* タブレット幅(901〜1150px): 円を上、その下に1〜4/5〜8の2カラム */
@media (min-width: 901px) and (max-width: 1150px) {
  .ip-diagram-cg { grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 36px; }
  .ipc-circle { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 620px; margin: 0 auto 12px; }
  .ipc-col { display: contents; }
  .ipc-item--1 { grid-column: 1; grid-row: 2; }
  .ipc-item--2 { grid-column: 1; grid-row: 3; }
  .ipc-item--3 { grid-column: 1; grid-row: 4; }
  .ipc-item--4 { grid-column: 1; grid-row: 5; }
  .ipc-item--5 { grid-column: 2; grid-row: 2; }
  .ipc-item--6 { grid-column: 2; grid-row: 3; }
  .ipc-item--7 { grid-column: 2; grid-row: 4; }
  .ipc-item--8 { grid-column: 2; grid-row: 5; }
}
@media (max-width: 900px) {
  .ip-diagram-cg { display: flex; flex-direction: column; gap: 30px; }
  .ipc-circle { width: 100%; max-width: 540px; margin: 0 auto 8px; }
  .ipc-col { display: contents; }
  .ipc-item--1 { order: 1; }
  .ipc-item--2 { order: 2; }
  .ipc-item--3 { order: 3; }
  .ipc-item--4 { order: 4; }
  .ipc-item--5 { order: 5; }
  .ipc-item--6 { order: 6; }
  .ipc-item--7 { order: 7; }
  .ipc-item--8 { order: 8; }
  .ipc-title { font-size: 20px; }
  .ipc-list li { font-size: 15px; }
}
/* ステップは1枚ずつ独立したカード */
.ip-steps {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px;
}
.ip-step {
  display: flex; gap: 24px; padding: 32px 34px;
  background: #fbfafa; border-radius: 20px; scroll-margin-top: 120px;
  transition: background .3s, box-shadow .3s;
}
/* 番号はIP CROSS図(.ipc-title)の配色に対応 */
.ip-step--1 { --c: #0130EE; }
.ip-step--2 { --c: #028573; }
.ip-step--3 { --c: #0C910B; }
.ip-step--4 { --c: #479603; }
.ip-step--5 { --c: #FF5004; }
.ip-step--6 { --c: #FD0304; }
.ip-step--7 { --c: #F00A49; }
.ip-step--8 { --c: #2C02AF; }
.ip-step .n { color: var(--c, #007cd6); font-size: 40px; font-weight: 900; line-height: 1; flex: none; width: 40px; }
/* 図からジャンプしてきたカードを強調 */
.ip-step:target { background: #fff; box-shadow: 0 0 0 2px var(--c, #007cd6), 0 10px 34px rgba(0,0,0,.07); }
.ip-step h4 { font-size: 19px; font-weight: 700; letter-spacing: .04em; }
.ip-step p { font-size: 14px; line-height: 1.95; margin-top: 8px; color: #35383b; }

/* 2026-07デザイン更新: 自社メディア運営は黒帯セクションに独立 */
.media-band {
  position: relative; width: min(1800px, calc(100% - 120px)); margin: 90px auto 0;
  background: #000; border-radius: 40px; min-height: 645px;
  display: flex; align-items: center; justify-content: flex-end; padding: 48px;
}
.media-band-photo {
  position: absolute; left: 0; top: 44px; bottom: 51px; width: 53.5%;
  border-radius: 0 18px 18px 0; background: #26292c;
}
.media-band-photo span { color: #6f7377; }
.media-band-card {
  position: relative; z-index: 1; width: min(1004px, 62%);
  background: #fff; border-radius: 26px; box-shadow: 0 2px 30px rgba(0,0,0,.05);
  padding: 56px 24px 56px 82px; display: flex; align-items: center; gap: 24px;
}
.media-band-text { flex: 1; min-width: 0; }
.media-band-text h4 { font-size: 24px; font-weight: 700; letter-spacing: .1em; }
.media-band-text .logo { margin-top: 26px; }
.media-band-text .logo img { width: 300px; max-width: 100%; height: auto; }
.media-band-text ul { margin-top: 30px; }
.media-band-text ul li {
  position: relative; font-size: 15px; line-height: 1.95; letter-spacing: .03em;
  padding-left: 20px; margin-bottom: 6px;
}
.media-band-text ul li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 11px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath d='M3 1.5l4 4-4 4' fill='none' stroke='%2375b400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ボタン2つ(サイトへ / お問い合わせ)を横並び。幅が足りなくなったら折り返す */
.media-band-text .btn { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
.media-band-visual { width: 44%; flex: none; }
.media-band-visual img { width: 100%; height: auto; }

/* 出版・動画配信(2カラム) + PRimePR(全幅) */
.media-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 34px; margin-top: 56px; }
/* 見出しなしでカードから始まる場合は上余白を背景paddingのみにして上下を均等に */
.service-sub-inner > .media-cards:first-child { margin-top: 0; }
.media-card {
  background: #fff; border-radius: 20px; box-shadow: 0 4px 40px rgba(0,0,0,.04);
  padding: 34px 45px 44px; text-align: left;
}
.media-card h4 {
  position: relative; color: #6eaa00; font-size: 24px; font-weight: 700; letter-spacing: .08em;
  line-height: 1.4;
}
.media-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 37px; }
.media-card-head .url { font-size: 13px; }
.media-card-head .url a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px; color: #7d8084; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.media-card-head .url a:hover { background: #f0f2f4; color: #35383b; }
.media-card-head .url a svg { flex: none; opacity: .8; }
.media-card .img {
  margin-top: 28px; height: 180px;
  background: #f2f4f6; border-radius: 16px; padding: 0; overflow: hidden;
}
.media-card .img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.media-card ul { margin-top: 32px; }
.media-card ul li {
  position: relative; font-size: 14px; line-height: 1.85; letter-spacing: .03em;
  padding-left: 20px; margin-bottom: 6px;
}
.media-card ul li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 11px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath d='M3 1.5l4 4-4 4' fill='none' stroke='%2375b400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.media-card .note { margin-top: 14px; font-size: 12px; color: #999; line-height: 1.7; }
.media-card--wide {
  grid-column: 1 / 3; background: #efefef; box-shadow: none;
  display: grid; grid-template-columns: 432px 1fr; column-gap: 48px; align-items: center;
  padding: 32px;
}
.media-card--wide .img {
  margin: 0; height: 230px; border-radius: 18px; background: #25303f; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
/* PRimePRはデザイン通り紺パネル中央にロゴ配置(全面表示の対象外) */
.media-card--wide .img img { width: auto; height: auto; max-height: 164px; max-width: 100%; object-fit: contain; }
.media-card-wide-body { padding: 8px 24px 8px 0; }
.media-card--wide ul { margin-top: 20px; }
.media-card--wide .note { margin-top: 16px; }

/* 事業内ナビ(固定ピル): 現行サイト /service の svc-nav を踏襲 */
.svc-nav {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 100; width: min(92%, 880px);
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(0,0,0,.08); border-radius: 100px;
  box-shadow: 0 4px 6px rgba(0,0,0,.04), 0 12px 28px rgba(0,0,0,.09), inset 0 0 0 1px rgba(255,255,255,.6);
  transition: opacity .3s, transform .3s, visibility .3s;
}
/* お問い合わせバナー(.cta-banner)が画面内に入ったら退避(JSで付与)。
   visibility:hidden でフォーカス・読み上げ対象からも外す */
.svc-nav.is-hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(16px);
}
.svc-nav__inner { display: flex; height: 54px; padding: 6px 8px; gap: 4px; }
.svc-nav__item { flex: 1 1 0%; }
.svc-nav__link {
  display: flex; align-items: center; justify-content: center; height: 100%;
  padding: 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  line-height: 1.2; text-align: center; color: #8a8f94; position: relative;
  border-radius: 100px; transition: color .25s, background .25s;
}
.svc-nav__link:hover { color: #1a1d20; background: rgba(0,0,0,.05); }
.svc-nav__item:nth-child(1) .svc-nav__link.is-active { color: #de1e40; background: rgba(222,30,64,.08); }
.svc-nav__item:nth-child(2) .svc-nav__link.is-active { color: #007cd6; background: rgba(0,124,214,.08); }
.svc-nav__item:nth-child(3) .svc-nav__link.is-active { color: #80c600; background: rgba(128,198,0,.10); }
.svc-nav__sp-br { display: inline; }
@media (min-width: 768px) {
  .svc-nav__inner { height: 62px; padding: 6px 10px; }
  .svc-nav__link { font-size: 15px; }
  .svc-nav__sp-br { display: none; }
}
@media (max-width: 375px) {
  .svc-nav { width: min(95%, 880px); bottom: 10px; }
}

.service-subsidiary { padding: 120px 0 80px; }
.service-subsidiary .sec-label { color: #7d8084; }
.service-subsidiary .sec-title { font-size: 48px; }
.subsidiary-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 56px; }
.subsidiary-card {
  background: #fff; border: 1px solid #e8eaec; border-radius: 20px; box-shadow: 0 4px 40px rgba(0,0,0,.04);
  padding: 0; overflow: hidden;
}
.subsidiary-photo { aspect-ratio: 730 / 305; border-radius: 20px 20px 0 0; }
.subsidiary-body { padding: 42px 56px 54px; }
.subsidiary-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.subsidiary-card .logo { font-size: 30px; font-weight: 900; letter-spacing: .02em; line-height: 1; }
.subsidiary-card .logo img { display: block; width: auto; }
.subsidiary-card .logo.musica img { height: 52px; }
.subsidiary-card .logo.pwan img { height: 52px; }
.subsidiary-card .url { font-size: 13px; margin-top: 0; margin-left: auto; }
.subsidiary-card .url a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px; color: #7d8084; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.subsidiary-card .url a:hover { background: #f0f2f4; color: #35383b; }
.subsidiary-card .url a svg { flex: none; opacity: .8; }
.subsidiary-card .desc { font-size: 15px; line-height: 2; margin-top: 22px; color: #35383b; }
.subsidiary-card dl { margin-top: 24px; border-top: 1px solid #eceef0; }
.subsidiary-card dl div { display: flex; gap: 20px; padding: 12px 0; border-bottom: 1px solid #eceef0; }
.subsidiary-card dl div:last-child { border-bottom: 0; }
.subsidiary-card dt { flex: none; width: 196px; font-weight: 700; font-size: 14px; color: #1a1c1d; } /* PCで「ソリューションシステム事業」等が折り返さない幅 */
.subsidiary-card dd { font-size: 14px; color: #35383b; line-height: 1.9; }

/* =====================================================
   News archive / single
===================================================== */
.title-page { padding: 84px 0 0; position: relative; z-index: 2; }
.title-page-en { color: #de1e40; font-size: 20px; font-weight: 700; letter-spacing: .1em; }
.title-page-ja { font-size: clamp(38px, 3.4vw, 64px); font-weight: 700; letter-spacing: .1em; margin-top: 8px; }
.news-archive, .news-detail { position: relative; }
.news-archive .archive-hero, .news-detail .archive-hero {
  position: relative; overflow: hidden; min-height: 380px; margin-bottom: 70px;
}
.archive-hero .hero-bg { position: absolute; inset: 0; z-index: 0; }
.archive-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.archive-hero .topicpath { margin-top: 40px; }
.news-archive .lists-news { margin-top: 0; margin-bottom: 80px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px 0 110px; }
.pagination a, .pagination span {
  min-width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 500; border: 1px solid #e3e5e8; background: #fff;
}
.pagination .pagination-current { background: #de1e40; border-color: #de1e40; color: #fff; }
.pagination a svg, .pagination-prev svg, .pagination-next svg { width: 10px; height: 16px; }
.pagination-prev svg { transform: scaleX(-1); }
.pagination .is-disabled { opacity: .3; pointer-events: none; }

.news-detail-inner { max-width: 980px; margin: 0 auto; padding: 0 40px 120px; }
.news-detail-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.news-detail-title { font-size: 30px; font-weight: 700; line-height: 1.7; margin-top: 20px; }
.news-detail-body { margin-top: 48px; font-size: 16px; line-height: 2.1; }
.news-detail-body p { margin-bottom: 1.6em; }
.news-detail-body img { border-radius: 12px; }
.news-detail-body a { color: #de1e40; text-decoration: underline; }
.news-detail-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 80px; padding-top: 40px; border-top: 1px solid #e8eaec; }

/* =====================================================
   Recruit
===================================================== */
.recruit-section { padding: 90px 0 130px; }
.recruit-empty {
  background: #fbfafa; border-radius: 21px; padding: 90px 40px; text-align: center; margin-top: 60px;
}
.recruit-empty h2 { font-size: 22px; font-weight: 700; letter-spacing: .06em; }
.recruit-empty p { font-size: 15px; color: #55585b; margin-top: 14px; }
.recruit-list { margin-top: 60px; display: grid; gap: 24px; }
.recruit-list-item {
  background: #fff; border: 1px solid #e8eaec; border-radius: 16px; padding: 32px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.recruit-list-item h3 { font-size: 20px; font-weight: 700; }
.recruit-list-item .cat { font-size: 13px; color: #de1e40; font-weight: 700; }

/* =====================================================
   Contact
===================================================== */
.contact-section { padding: 90px 0 130px; }
.contact-frame { max-width: 980px; margin: 60px auto 0; }
.contact-form-lead { font-size: 16px; text-align: center; letter-spacing: .06em; }
.contact-form-detail { margin-top: 50px; }
.contact-form dl { margin-bottom: 30px; }
.contact-form dt { font-size: 15px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.contact-form dt .required {
  background: #de1e40; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 4px; padding: 1px 8px; letter-spacing: .05em;
}
.contact-form dt .optional { background: #9a9da0; color: #fff; font-size: 11px; border-radius: 4px; padding: 1px 8px; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"],
.contact-form select, .contact-form textarea {
  width: 100%; border: 1px solid #d4d6d8; border-radius: 10px;
  padding: 14px 18px; font-size: 15px; font-family: inherit; background: #fff;
}
.contact-form textarea { min-height: 220px; resize: vertical; }
.contact-form .note { font-size: 13px; color: #7d8084; margin-top: 8px; }
.contact-form .agree { text-align: center; margin-top: 40px; font-size: 15px; }
.contact-form .agree a { color: #de1e40; text-decoration: underline; }
.contact-form .submit { text-align: center; margin-top: 36px; }
.contact-form .submit button, .contact-form .submit input[type="submit"] {
  min-width: 280px; height: 60px; border: 0; border-radius: 30px;
  background: #de1e40; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  font-family: inherit; letter-spacing: .1em;
}
.contact-form .error { color: #de1e40; font-size: 13px; margin-top: 6px; }
.contact-thanks { text-align: center; padding: 60px 0; }
.contact-thanks-title { font-size: 26px; }
.contact-thanks-text { margin-top: 20px; font-size: 15px; }
.contact-thanks-back { margin-top: 40px; }
.contact-confirm-table dd { background: #fbfafa; border-radius: 10px; padding: 14px 18px; font-size: 15px; }

/* 既存フォーム構造(contact/index.php)用 */
.contact-form-detail__block { margin-bottom: 32px; }
.contact-form-label { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.contact-form-required {
  background: #de1e40; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 4px; padding: 1px 8px; letter-spacing: .05em;
}
.contact-form-parts .u-r-input, .contact-form-parts .u-r-select {
  width: 100%; border: 1px solid #d4d6d8; border-radius: 10px;
  padding: 14px 18px; font-size: 15px; font-family: inherit; background: #fff;
}
.contact-form-parts textarea.u-r-input { min-height: 220px; resize: vertical; }
.contact-form-parts .is-reemail { margin-top: 12px; }
.contact-form-parts__note { font-size: 13px; color: #7d8084; margin-top: 8px; }
.contact-form-text { font-size: 15px; background: #fbfafa; border-radius: 10px; padding: 14px 18px; }
.contact-form-error { color: #de1e40; font-size: 13px; margin-top: 6px; }
.contact-form-agree { text-align: center; margin-top: 44px; font-size: 15px; }
.contact-form-agree a { color: #de1e40; text-decoration: underline; }
.contact-form-agree input[type="checkbox"] { width: 18px; height: 18px; accent-color: #de1e40; margin-right: 8px; vertical-align: -3px; }
.contact-form-btns { display: flex; justify-content: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; }
.contact-form-btns__item .u-r-btn, .contact-form-btns__item a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 280px; height: 60px; border: 0; border-radius: 30px;
  background: #de1e40; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  font-family: inherit; letter-spacing: .1em;
}
.contact-form-btns__item a { background: #fff; color: #1a1c1d; border: 1px solid #1a1c1d; }
.contact-thanks-back a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 280px; height: 60px; border-radius: 30px;
  background: #de1e40; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .1em;
}

/* =====================================================
   Policy / text pages
===================================================== */
.textpage-section { padding: 90px 0 130px; }
.textpage-body { max-width: 1100px; margin-top: 30px; }
.textpage-body h2 {
  font-size: 22px; font-weight: 700; margin: 56px 0 20px; padding-left: 18px;
  border-left: 4px solid #de1e40; letter-spacing: .04em;
}
.textpage-body h3 { font-size: 18px; margin: 32px 0 12px; }
.textpage-body p { font-size: 15px; line-height: 2.05; margin-bottom: 1.2em; }
.textpage-body ul { margin: 0 0 1.4em; }
.textpage-body ul li { position: relative; padding-left: 20px; font-size: 15px; line-height: 2; }
.textpage-body ul li::before { content: ""; position: absolute; left: 0; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: #de1e40; }
.textpage-body ol { margin: 0 0 1.4em; padding-left: 1.6em; list-style: decimal; }
.textpage-body ol li { font-size: 15px; line-height: 2; }
.textpage-date { text-align: right; font-size: 14px; color: #55585b; margin-top: 40px; }

/* sitemap */
.sitemap-lists { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; max-width: 1100px; }
.sitemap-group > a, .sitemap-group > p {
  display: block; font-size: 17px; font-weight: 700; padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 2px solid #de1e40;
}
.sitemap-group ul li { margin-bottom: 10px; }
.sitemap-group ul a { font-size: 14px; color: #35383b; }
.sitemap-group ul ul { margin: 8px 0 12px 18px; }

/* =====================================================
   Search / 404
===================================================== */
.search-section, .notfound-section { padding: 90px 0 130px; }
.notfound-section { text-align: center; }
.notfound-section .code { font-size: 100px; font-weight: 900; color: #de1e40; line-height: 1; }

/* =====================================================
   IR page
===================================================== */
.ir-section-notice { padding: 70px 0 0; }
.ir-section-cards { padding: 90px 0 20px; }
.ir-section-cards .top-ir-cards { margin-top: 56px; }
.ir-section-index { padding: 90px 0 60px; }
.ir-note { font-size: 13px; color: #7d8084; margin-top: 18px; }
.ir-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 56px; }
.ir-group-card {
  background: #fff; border: 1px solid #e8eaec; border-radius: 21px;
  box-shadow: 0 4px 40px rgba(0,0,0,.04); padding: 40px 40px 32px;
}
.ir-group-card .head {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 20px; font-weight: 700; letter-spacing: .08em; color: #de1e40;
}
.ir-group-card .head::after {
  content: ""; width: 7px; height: 12px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23de1e40' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ir-group-card ul { margin-top: 20px; border-top: 1px solid #eceef0; }
.ir-group-card ul li { border-bottom: 1px solid #eceef0; }
.ir-group-card ul li a { display: flex; align-items: center; gap: 12px; padding: 14px 4px; font-size: 15px; letter-spacing: .04em; }
.ir-group-card ul li a::before {
  content: ""; width: 6px; height: 10px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%231a1c1d' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ir-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.ir-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fbfafa; border: 1px solid #e8eaec; border-radius: 14px;
  padding: 22px 28px; font-size: 16px; font-weight: 700; letter-spacing: .06em;
}
.ir-tile::after {
  content: ""; width: 7px; height: 12px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23de1e40' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =====================================================
   Reveal animation
===================================================== */
.js-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.js-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1; transform: none; transition: none; }
  .top-hero-title .hero-line,
  .top-hero-lead,
  .top-hero-sub,
  .top-hero-copy .btn-pill,
  .hc-red, .hero-collage .hc-img { animation: none; }
}

/* =====================================================
   Responsive
===================================================== */
@media (max-width: 1280px) {
  .top-hero-title { letter-spacing: .06em; }
  .top-business-grid { flex-direction: column; }
  .top-business-head { width: auto; }
  .top-ir-cards { grid-template-columns: repeat(3, 1fr); }
  .ir-groups { gap: 20px; }
  .ir-group-card { padding: 32px 28px 26px; }
  .executive-grid { grid-template-columns: repeat(2, 1fr); }
  .company-message-card { flex-direction: column; }
  .company-message-panel { flex: none; }
  .company-message-visual { flex: none; height: 400px; }
  .company-info-grid { flex-direction: column; }
  .company-info-table, .company-access { max-width: none; width: 100%; }
  .service-block-visual { position: static; transform: none; width: 100%; max-width: 720px; margin-top: 40px; }
  .service-hero-visual { position: static; width: 100%; max-width: 720px; margin: 40px auto 0; padding: 0 40px; }
  .message-grid { flex-direction: column-reverse; }
  .message-side { width: auto; }
  .message-side .president-photo img { max-width: 200px; }
  .media-cards { grid-template-columns: 1fr 1fr; gap: 24px; }
  .media-card--wide { grid-column: 1 / 3; grid-template-columns: 1fr 1.2fr; column-gap: 28px; }
  .media-band { width: calc(100% - 48px); min-height: 0; flex-direction: column; gap: 28px; padding: 24px 24px 40px; }
  .media-band-photo { position: static; width: 100%; aspect-ratio: 963 / 550; border-radius: 18px; }
  .media-band-card { width: 100%; padding: 40px 32px 40px 44px; }
  /* タブレット: 背景を全幅(100vw)に。left/right:0で実現(width:100vwはスクロールバー分はみ出すため) */
  .service-sub-bg, .service-sub.is-flip .service-sub-bg { left: 0; right: 0; border-radius: 0; }
}
/* タブレット(901px〜1140px): ヒーローのマスク形状を縦長構成のタブレット用(path_tablet.svg / viewBox 733.8x679)に差し替え。
   静的形状のためモーフアニメーションは無し。オーバーシュート用の箱拡張(±14ユニット)も不要なので inset: 0。
   背景の数値は 1ユニット = 62.4vw / 733.8 ≒ 0.085vw で各マスクの外接矩形に合わせて算出(プレビューで検証済み)。
   コラージュが縦長になるため、低い画面での上下クロップが偏らないよう translateY の -24px シフトは外す */
@media (min-width: 901px) and (max-width: 1140px) {
  .top-hero-visual { transform: translateY(-50%); }
  .hero-collage { aspect-ratio: 733.8 / 679; }
  .hero-collage .hc-img, .hc-red { inset: 0; }
  .hc-office { clip-path: url(#hcClipOfficeTablet); background-size: 58vw auto; background-position: 1.5vw 4.4vw; }
  .hc-phone  { clip-path: url(#hcClipPhoneTablet); background-size: auto 13.7vw; background-position: -0.3vw 0; }
  .hc-laptop { clip-path: url(#hcClipLaptopTablet); background-size: 22.9vw auto; background-position: 0vw 36.5vw; }
  .hc-red    { clip-path: url(#hcClipRedTablet); }
}
@media (max-width: 900px) {
  body { font-size: 15px; }
  .u-pc { display: none; }
  .u-sp { display: block; }
  .l-wrap, .l-wrap-narrow { padding: 0 24px; }

  /* SP: ヒーロー背景SVG(1920x538)はcoverで大きく引き伸ばされ、右側にあるモチーフが
     画面外に出てしまう。SVGごとにモチーフが見える横位置へ寄せる(縦はtop固定のまま) */
  .hero-bg img[src*="hero-bg-news"] { object-position: 68% top; }
  .hero-bg img[src*="hero-bg-recruit"] { object-position: 57% top; }
  .hero-bg img[src*="hero-bg-sub"] { object-position: 70% top; }
  .hero-bg img[src*="hero-bg-executive"] { object-position: 88% top; }

  :root { --header-h: 64px; }
  .site-header .header-inner { padding: 0 20px; }
  .header-logo img { width: 118px; }
  .gnav {
    position: fixed; inset: 64px 0 0 0; margin: 0; background: #fff; z-index: 999;
    flex-direction: column; align-items: flex-start; gap: 0; padding: 24px;
    display: none; overflow-y: auto;
  }
  .gnav.is-open { display: flex; }
  .gnav a { display: block; font-size: 16px; padding: 16px 4px; width: 100%; border-bottom: 1px solid #f0f1f3; }
  /* SP: カレントは文字色のみ赤。下線(赤ライン)は出さない */
  .gnav a.is-current::after, .gnav a:hover::after { content: none; }
  /* サブメニュー(SP: タップでアコーディオン展開) */
  .gnav-item { width: 100%; }
  .gnav-item.has-sub { display: block; height: auto; position: relative; }
  .gnav-item.has-sub > a { padding-right: 74px; }
  /* タップ領域を左へ0.5個分(22px)拡張し、リンク側の誤タップを防ぐ。
     アイコンは flex-end + padding-right で従来と同じ位置に維持 */
  .gnav-sub-toggle {
    display: inline-flex; align-items: center; justify-content: flex-end;
    position: absolute; top: 6px; right: 0;
    width: 66px; height: 44px; padding: 0 16px 0 0;
    background: none; border: 0; cursor: pointer;
  }
  .gnav-sub-toggle svg { width: 12px; height: 8px; transition: transform .3s ease; }
  .gnav-item.is-sub-open .gnav-sub-toggle svg { transform: rotate(180deg); }
  .gnav-sub {
    position: static; box-shadow: none; background: transparent;
    opacity: 1; visibility: visible; transform: none;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
  }
  .gnav-item.is-sub-open .gnav-sub { grid-template-rows: 1fr; }
  .gnav-sub-inner {
    overflow: hidden; min-height: 0;
    display: block; padding: 0; max-width: none;
    transform: none; opacity: 1; transition: none;
  }
  .gnav-sub-inner a {
    font-size: 14px; color: #55595e;
    padding: 13px 4px 13px 20px;
    border-bottom: 1px solid #f4f5f7;
  }
  .gnav-sub-inner a::after { content: none; }
  @media (prefers-reduced-motion: reduce) {
    .gnav-sub { transition: none; }
  }
  .header-right { gap: 12px; flex: none; }
  .header-search { display: none; }
  .header-search-form { padding: 0 20px; gap: 12px; }
  .header-search-form input[type="text"] { height: 44px; font-size: 16px; }
  .header-search-submit { height: 38px; padding: 0 18px; border-radius: 12px; }
  .header-contact { padding: 0 14px; height: 36px; border-radius: 12px; font-size: 12px; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 8px; background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: #1a1c1d; border-radius: 1px; transition: transform .25s ease, opacity .25s ease; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .top-hero { padding-top: 24px; }
  /* モバイルも表示領域に追従: 100svh - header(64px) - padding-top(24px) = 88px */
  .top-hero-inner {
    flex-direction: column; align-items: stretch; justify-content: center;
    min-height: 0;
    min-height: calc(100svh - 88px);
    padding-bottom: 20px;
  }
  .top-hero-visual { position: static; transform: none; width: 100%; max-width: none; padding: 0 0 24px 24px; }
  /* SP: マスク形状をスマホ用(path_sp.svg / viewBox 556.79x586)に差し替え。静的形状のためモーフ無し。
     赤は2形状(左中央+右下)を1つのclipPathに統合。箱の拡張(±14ユニット)は不要なので inset: 0。
     背景は%指定(=箱基準)でビューポート幅に依存させない。officeはcoverで箱全面をカバー、
     phone/laptopは各マスクの外接矩形に合わせて配置 */
  .hero-collage { aspect-ratio: 556.79 / 586; }
  .hero-collage .hc-img, .hc-red { inset: 0; }
  .hc-office { clip-path: url(#hcClipOfficeSp); background-size: cover; background-position: center; }
  .hc-phone  { clip-path: url(#hcClipPhoneSp); background-size: auto 33%; background-position: 0 0; }
  .hc-laptop { clip-path: url(#hcClipLaptopSp); background-size: 48.5% auto; background-position: 0 100%; }
  .hc-red    { clip-path: url(#hcClipRedSp); }
  .top-hero-copy { padding: 36px 20px 0; } /* 左右はheaderロゴ(モバイル padding 20px)と揃える。上はタイトル上の余白 */
  .top-hero-lead br { display: none; }
  .top-hero-sub { margin-top: 36px; font-size: 17px; }
  /* PC同様、カード縦サイズの50%位置から下をtop-businessの背景色にする
     (カード高さが可変のため、下padding 40pxを除いた中間点 = 50% - 20px から下を塗る) */
  .top-ticker {
    margin-top: 36px; padding: 0 24px 40px;
    background: linear-gradient(to bottom, transparent calc(50% - 20px), #f3f5f9 calc(50% - 20px));
  }
  .top-ticker-card { height: auto; padding: 22px 22px; gap: 14px; flex-wrap: wrap; min-height: 0; }
  .top-ticker-list { flex-basis: 100%; align-self: auto; }
  .top-ticker-item { flex: none; flex-wrap: wrap; gap: 10px; padding: 12px 0; }
  .top-ticker-title { white-space: normal; flex-basis: 100%; order: 5; }
  .top-business { margin-top: 0; padding: 70px 0; }
  /* タブレット: 2カラム、カードはページ幅に追従して縮小。
     縦積みflex(align-items:flex-start)でfit-content幅に縮まないようstretchし、
     さらにl-wrapのpadding(24px)を一部相殺してウィンドウ幅近くまで広げる */
  .top-business-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; align-self: stretch; margin: 0 -12px; }
  .biz-card { min-height: 0; padding: 28px 22px 14px; }
  .biz-card .biz-icon { width: 72px; height: 72px; }
  .top-about-grid { flex-direction: column; }
  .top-about-text { width: auto; }
  /* SP: 100vwフルブリード(親flexの中央揃えでl-wrapのpadding分が左右均等にはみ出す)。
     画面端に接する角の角丸は無し */
  .top-about-photos {
    grid-template-columns: 393fr 413fr 253fr; grid-template-rows: auto; aspect-ratio: 1075 / 287; gap: 8px;
    width: 100vw; margin: 0; align-self: center;
  }
  .top-about-photos img:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .top-about-photos img:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .top-ir-cards { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ir-card { padding: 26px 16px 14px; }
  .ir-card .link-arrow { font-size: 0; gap: 0; padding-top: 12px; }
  .ir-card .link-arrow::after { content: none; }
  .lists-news { grid-template-columns: 1fr 1fr; gap: 20px; }
  .feature-banner { flex-direction: column; }
  .feature-banner-text { padding: 40px 28px; }
  .feature-banner-text p:not(.label) { margin-right: 0; }
  .feature-banner-text h2 { margin-right: 0; white-space: normal; }

  .page-hero-inner, .title-page { padding-top: 40px; }
  .page-hero-big { margin-top: 28px; }
  .page-hero-title-ja { margin-top: 28px; letter-spacing: .1em; }
  .page-hero-lead { letter-spacing: .08em; font-size: 15px; }
  /* SP: 2カラムの左寄せグリッド。各リンクは折り返さない(アイコン/余白/文字を詰めて1行に収める) */
  .company-tabs-card { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: start; padding: 20px 14px; gap: 14px 8px; }
  .company-tabs-card a { font-size: 13px; gap: 8px; letter-spacing: 0; white-space: nowrap; }
  .company-tabs-card a svg { width: 20px; height: 20px; }
  .company-section { padding-top: 55px; }
  .page-hero + .company-section { padding-top: 35px; }
  .company-message-card { border-radius: 22px; }
  .company-message-panel { padding: 40px 26px 48px; }
  .company-message-panel .catch { font-size: 29px; letter-spacing: .1em; }
  .company-message-panel .bar { margin: 24px 0; }
  .company-message-panel .desc { font-size: 14px; line-height: 2; }
  .company-message-visual { height: 330px; }
  .company-message-visual .sign-chip { left: 16px; bottom: 16px; padding: 10px 20px; font-size: 12px; gap: 10px; }
  .company-message-visual .sign-chip b { font-size: 15px; }
  .company-stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item { justify-content: flex-start; }
  .stat-item .value { font-size: 34px; }
  .company-info-table dl { grid-template-columns: 1fr; gap: 4px; font-size: 15px; }
  .company-info { margin-top: 0; padding-bottom: 55px; }
  .company-vision { padding: 65px 0 45px; }
  .company-vision-grid { flex-direction: column; }
  .history-year { flex-direction: column; gap: 20px; padding-bottom: 40px; }
  .history-year .year { font-size: 34px; }
  .history-item { gap: 14px; flex-direction: column; }
  .history-item .month::before { display: none; }
  .history-year::before { top: 26px; }
  .history-year:last-child::before { bottom: 40px; } /* SPの padding-bottom に合わせる */
  /* 縦ライン(left:11px)にテキストが重ならないよう内容を右へ逃がす */
  .history-items { padding-left: 44px; }
  .executive-grid { grid-template-columns: 1fr; }
  .service-sub { padding: 56px 0; }
  .service-sub + .service-sub, .media-band + .service-sub { margin-top: 40px; }
  .service-sub + .service-block { margin-top: 8px; }
  /* 全幅背景は max-width:1800px の指定で適用済み */
  .service-cards { grid-template-columns: 1fr; gap: 24px; }
  .service-card { padding: 32px 26px; }
  .service-card--visual { padding: 0; }
  .service-card--visual .service-card-body { padding: 28px 26px 32px; }
  .service-card--visual .service-card-img--flat { padding: 24px 20px 16px; }
  .service-card-cta { padding: 0 20px 24px; }
  /* SP: カード幅内で1行に収まるよう縮小(収まらない端末幅では text-wrap:balance で均等改行) */
  .service-card-cta-pill { font-size: 13px; padding: 12px 18px; letter-spacing: 0; }
  .service-card-cta-note { margin-top: 12px; font-size: 12px; }
  /* 上余白: PC比1/3(80px→27px)からさらに1/3の9px。01は .page-hero + 側で同値 */
  .service-block { padding: 9px 0 40px; }
  /* 03 メディア事業: 直後のmedia-bandとの間が空きすぎるため下余白を1/4 */
  .service-block#media { padding-bottom: 10px; }
  /* 02/03のビジュアル上余白を1/3相当に圧縮(40px→14px)。01は従来どおり40pxを維持 */
  .service-block-visual { margin-top: 14px; }
  .page-hero + .service-block .service-block-visual { margin-top: 40px; }
  /* AIマーケティング事業ブロック(先頭service-subの直後): 上marginを消し、上余白を1/3 */
  .service-sub + .service-sub.is-flip { margin-top: 0; padding-top: 19px; }
  .service-block-head { margin-top: 28px; }
  .service-ip-flow { margin: 0 0 13px; padding-top: 48px; }
  .media-cards { gap: 24px; margin-top: 40px; }
  .media-card { padding: 28px 26px 32px; }
  /* SP: 見出しとリンクを別行に分離(どちらも左寄せ)。改行させない */
  .media-card-head { display: block; min-height: 0; }
  .media-card-head h4 { text-align: left; }
  .media-card-head .url { display: block; text-align: left; margin-top: 10px; }
  .media-card-head .url a { padding: 4px 0; white-space: nowrap; }
  /* SP: 画像は切り抜かず全体を表示(アスペクト比維持)。ワイドカードは対象外 */
  .media-card:not(.media-card--wide) .img { height: auto; }
  .media-card:not(.media-card--wide) .img img { height: auto; object-fit: contain; }
  .media-card--wide { grid-column: auto; display: block; padding: 26px; }
  .media-card--wide .img { height: 200px; }
  .media-card-wide-body { padding: 22px 0 0; }
  .media-band { width: calc(100% - 32px); border-radius: 28px; padding: 16px 16px 28px; gap: 20px; margin-top: 45px; }
  /* SP: media-band-textをdisplay:contentsでカード直下に展開し、
     ビジュアル画像をリストとボタンの間(=p.btnの直前)に差し込む。テキストは中央揃え */
  .media-band-card { flex-direction: column; padding: 32px 26px; gap: 0; align-items: stretch; }
  .media-band-text { display: contents; text-align: center; }
  .media-band-text h4 { order: 1; }
  .media-band-text .logo { order: 2; }
  .media-band-text ul { order: 3; align-self: center; text-align: left; }
  .media-band-visual { order: 4; width: 100%; margin-top: 30px; }
  .media-band-text .btn { order: 5; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 30px; }
  /* SP: 2つのボタンをカード幅いっぱいの同サイズに */
  .media-band-text .btn .btn-pill { width: 100%; min-width: 0; }
  .media-band-text .logo img { width: 240px; }
  .service-block .num { font-size: 64px; }
  .service-block .catch { font-size: 21px; }
  /* SP: フォントサイズは変えず折り返しを許可 */
  .service-block-title { white-space: normal; }
  .ip-steps { max-width: none; grid-template-columns: 1fr; gap: 16px; }
  .ip-step { padding: 26px 24px; gap: 18px; }
  .ip-step .n { font-size: 34px; width: 32px; }
  .media-cards { grid-template-columns: 1fr; }
  .subsidiary-cards { grid-template-columns: 1fr; }
  .subsidiary-body { padding: 28px 26px 32px; }
  .service-subsidiary { padding-top: 30px; padding-bottom: 16px; } /* 上余白1/4(120→30px) / 下余白1/5(80→16px) */
  .service-subsidiary .sec-title { font-size: 38px; }
  /* SP: URLをロゴ画像の下に配置 */
  .subsidiary-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .subsidiary-card .url { margin-left: 0; }
  .subsidiary-card dt { width: 120px; }
  .cta-banner-card { padding: 32px 26px; }
  /* SP: 見出し・本文を1段階小さく(PC 24/14px → SP 20/12px) */
  .cta-banner-card h2 { font-size: 20px; }
  .cta-banner-card p { font-size: 12px; }
  .sitemap-lists { grid-template-columns: 1fr; }
  .ir-section-cards, .ir-section-index { padding-top: 70px; }
  .ir-groups { grid-template-columns: 1fr; }
  .ir-tiles { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ir-tile { padding: 18px 22px; font-size: 14px; }
  .lists-news[data-column-mobile="1"] { grid-template-columns: 1fr; }
  .news-detail-inner { padding: 0 24px 80px; }

  .footer-inner { padding: 48px 24px; gap: 40px; }
  .footer-bottom-inner { padding: 16px 24px; }
  .footer-nav { gap: 28px; }
}
@media (max-width: 560px) {
  .lists-news { grid-template-columns: 1fr; }
  .ir-tiles { grid-template-columns: 1fr; }
  .top-ir-cards { grid-template-columns: 1fr; }
  .company-stats-grid { grid-template-columns: 1fr; }
  /* スマホ: 1カラム */
  .top-business-cards { grid-template-columns: 1fr; }
}
/* 極小幅端末: 会社概要タブが1行に収まらなくなるため文字をもう一段縮小 */
@media (max-width: 374px) {
  .company-tabs-card a { font-size: 12px; gap: 6px; }
}