/* ==========================================================================
   SIAORB Corporate — custom.css

   考え方:
     ・地は白 + ブランド2色だけで作った淡いグラデーション。
     ・ロゴは外環・内環・上昇曲線の3層に分けた SVG。カーソルに合わせて
       層ごとに違う量だけずれ、スクロールで手前の環から広がって消える。
     ・写真は使わない。ヒーローのロゴがそのままサービスへ移り、上昇曲線が
       折れ線 → 工程 → 広がる円 と、章ごとの図版に形を変えていく。
       そのためヒーローとサービスの間だけは断ち切らず、ひと続きにしてある。
     ・角丸のピルは使わない。ボタンも面の切り替えも角ゼロ・直線で、
       セクションは -9deg の斜めで断ち切る。
     ・ジャンプ率を大きく取る。極大の欧文 : 小さな和文 = およそ 10 : 1。

   構成:
     0. トークン
     1. ベース / SWELL 上書き
     2. スクロール演出の共通定義
     3. 共通パーツ
     4. フロントページ
     5. ブログ（一覧・カテゴリ・サイドバー）
     6. レスポンシブ
   ========================================================================== */

/* ==========================================================================
   0. トークン
   ========================================================================== */
:root {
  --sia-blue:   #0f2fb4;
  --sia-blue-d: #0a2087;
  --sia-cyan:   #68d4e0;

  --sia-ink:    #080d1c;
  --sia-ink-2:  #5b6478;
  --sia-tint:   #eef1ff;
  --sia-rule:   #dfe3f0;

  /* --- 旧トークン（ブログ側が参照）--- */
  --siaorb-accent-cyan:  var(--sia-cyan);
  --siaorb-primary-blue: var(--sia-blue);
  --siaorb-dark:         var(--sia-blue);
  --siaorb-dark-mid:     var(--sia-blue-d);
  --siaorb-light:        var(--sia-tint);
  --siaorb-text:         var(--sia-ink);
  --siaorb-text-muted:   var(--sia-ink-2);
  --siaorb-primary:      var(--sia-ink);

  /* 欧文 Chakra Petch / 和文 Murecho。
     Chakra Petch を先に置くことで、ラテン文字だけがそちらに落ちる。 */
  --sia-font: 'Chakra Petch', 'Murecho', -apple-system, BlinkMacSystemFont,
              'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'BIZ UDPGothic', Meiryo, sans-serif;

  --sia-gut: clamp(20px, 5vw, 76px);
  --sia-max: 1440px;
  --sia-r-s: clamp(10px, 1.2vw, 16px); /* 写真の角。ここだけ僅かに丸める */

  --sia-night: #05070f;  /* 固定背景の地。暗いのはここだけ。 */

  --sia-tilt: -9deg;
  --sia-cut:  clamp(26px, 3.4vw, 58px);  /* セクションを断ち切る斜めの深さ */
  --sia-gap:  clamp(56px, 7.5vw, 122px); /* セクションどうしの隙間（固定背景が覗く幅）*/
}

/* ==========================================================================
   1. ベース / SWELL 上書き
   ========================================================================== */
html { overflow-x: clip; }

body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, dt, dd, td, th,
input, textarea, button, select {
  font-family: var(--sia-font) !important;
}

body { color: var(--sia-ink); background-color: #fff; }

.sia-hero, .sia-sec { line-break: strict; }

/* フロントページの地は固定背景（.sia-bg）が担うので、素の地は透かす */
body.siaorb-is-front { background-color: transparent; }

/*
   フロントページの地は .sia-bg（固定の黒）なので、
   ヒーローより上に少しでも余白が残ると、そこから黒が覗いてしまう。
   SWELL 側のラッパーが持つ上余白を、名前の候補をひと通り並べて打ち消す。
   それでも残る環境差は custom.js が実測して詰める。
*/
body.siaorb-is-front { padding-top: 0 !important; }

body.siaorb-is-front #all_wrap,
body.siaorb-is-front #body_wrap,
body.siaorb-is-front #content,
body.siaorb-is-front #contents,
body.siaorb-is-front #main_content,
body.siaorb-is-front #main,
body.siaorb-is-front .l-container,
body.siaorb-is-front .l-content,
body.siaorb-is-front .l-contents,
body.siaorb-is-front .l-main,
body.siaorb-is-front .l-mainContent,
body.siaorb-is-front .l-mainContent__inner,
body.siaorb-is-front .w-beforeContents,
body.siaorb-is-front .p-article,
body.siaorb-is-front .l-article,
body.siaorb-is-front .p-wrap,
body.siaorb-is-front .p-entry,
body.siaorb-is-front .p-entryBody {
  padding-top: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
}

body.siaorb-is-front #post_slider,
body.siaorb-is-front .p-postSlider,
body.siaorb-is-front .c-mv { display: none !important; }

body:not(.siaorb-is-front) .l-wrap,
body:not(.siaorb-is-front) .l-content,
body:not(.siaorb-is-front) .l-contents,
body:not(.siaorb-is-front) #contents,
body:not(.siaorb-is-front) .l-main,
body:not(.siaorb-is-front) #main,
body:not(.siaorb-is-front) .p-article,
body:not(.siaorb-is-front) .l-article,
body:not(.siaorb-is-front) .p-wrap,
body:not(.siaorb-is-front) .p-entry {
  background-color: #ffffff !important;
}

body:not(.siaorb-is-front) .siaorb-footer-logo { display: none !important; }

@media (min-width: 960px) {
  .single .l-contents,
  .single #contents,
  .single .l-contentsInner {
    display: flex !important;
    flex-direction: row !important;
  }
  .single #sidebar,
  .single .l-sidebar { order: 2 !important; flex-shrink: 0; }
  .single #main,
  .single .l-main { order: 1 !important; flex: 1; min-width: 0; }
}

.l-footer, footer, .p-footer, #footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.sia-nav a:focus-visible,
.sia-btn:focus-visible,
.sia-badge:focus-visible,
.sia-news__link:focus-visible,
.sia-form :focus-visible,
.siaorb-btn:focus-visible {
  outline: 3px solid var(--sia-blue);
  outline-offset: 3px;
}

.sia-sec--blue a:focus-visible,
.sia-sec--blue input:focus-visible,
.sia-sec--blue textarea:focus-visible { outline-color: var(--sia-cyan); }

/* ==========================================================================
   2. スクロール演出の共通定義
   ========================================================================== */

/*
   初期状態は html.sia-js が付いたときだけ適用する。
   JS が動かない環境でも reduced-motion の環境でも、素のまま全部表示される。
   さらに custom.js が保険として、一定時間後に画面内の要素を必ず表示させる。
*/
.sia-js [data-reveal] {
  will-change: transform, opacity;
  transition:
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.55s ease;
}

.sia-js [data-reveal="shear"] {
  opacity: 0;
  transform: translateY(80px) skewY(-4deg);
}

.sia-js [data-reveal="slide"] {
  opacity: 0;
  transform: translateX(-12%) skewX(9deg);
}

/* 斜めに払って現れる。写真用。
   clip-path は figure ではなく img にかける。figure 側を潰すと
   IntersectionObserver が「画面に入っていない」と判定して is-in が付かない。 */
.sia-js [data-reveal="wipe"] img {
  clip-path: polygon(0 0, 0 0, -24% 100%, -24% 100%);
  transform: scale(1.18);
  transition:
    clip-path 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path, transform;
}
.sia-js [data-reveal="wipe"].is-in img {
  clip-path: polygon(0 0, 124% 0, 100% 100%, -24% 100%);
  transform: none;
}

.sia-js [data-reveal].is-in { opacity: 1; transform: none; }

/* 欧文はスクランブルしてから確定する。
   実際の文字は .sia-sr（読み上げ用）に残し、
   動かす側は aria-hidden にしてあるので読み上げは乱れない。 */
.sia-scr {
  display: inline-block;
  white-space: pre;
  /* 幅だけ JS で固定する。overflow は切らない。
     切ると y や p のディセンダまで一緒に落ちてしまう。 */
  overflow: visible;
  vertical-align: top;
}

.sia-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* 線を描いて現れる。SVG 用。
   描く線に .sia-draw と pathLength="100" を付ける。
   途中までしか描かない線（開いた環）は --len で長さを指定する。 */
.sia-js [data-reveal="draw"] .sia-draw {
  stroke-dasharray: var(--len, 100) 100;
  stroke-dashoffset: var(--len, 100);
  transition: stroke-dashoffset 1.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.sia-js [data-reveal="draw"].is-in .sia-draw { stroke-dashoffset: 0; }

.sia-js [data-reveal="draw"] .sia-fig__node {
  opacity: 0;
  transition: opacity 0.4s ease 0.9s;
}
.sia-js [data-reveal="draw"].is-in .sia-fig__node { opacity: 1; }

.sia-js [data-drift] { will-change: transform; }

/*
   動きを減らす設定のとき（html.sia-calm）。

   Android は「ユーザー補助 → アニメーションを削除」だけでなく、
   省電力モードでも この設定が有効になる。全部止めると画面が死んで見えるので、
   位置の移動・回転・視差・スクランブルだけを止め、
   現れ方は不透明度のフェードに置き換える。
*/
.sia-calm [data-reveal] {
  opacity: 0;
  transform: none !important;
  clip-path: none !important;
  transition: opacity 0.6s ease !important;
}

.sia-calm [data-reveal].is-in { opacity: 1; }

.sia-calm [data-reveal] img {
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}

.sia-calm .sia-draw { stroke-dashoffset: 0 !important; transition: none !important; }
.sia-calm .sia-fig__node { opacity: 1 !important; transition: none !important; }

/* 流れ（data-drift）は translate なので、transform とは別に止める */
.sia-calm [data-drift] { translate: none !important; }

/* ==========================================================================
   3. 共通パーツ
   ========================================================================== */
.sia-hero,
.sia-sec {
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.sia-wrap {
  box-sizing: border-box;
  max-width: var(--sia-max);
  margin-inline: auto;
  padding-inline: var(--sia-gut);
}

.sia-sec {
  position: relative;
  padding-block: clamp(76px, 9vw, 140px);
}

/* --- セクションの断ち切り。
       上下を -9deg で断ち切り、セクションどうしを --sia-gap だけ離す。
       その隙間から、後ろに敷いた固定背景（黒 + 粒子）が覗く。 --- */
.sia-hero,
.sia-sec {
  position: relative;
  z-index: 1;
}

.sia-hero {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sia-cut)), 0 100%);
}

.sia-sec {
  margin-top: var(--sia-gap);
  padding-block: calc(clamp(76px, 9vw, 140px) + var(--sia-cut));
  clip-path: polygon(0 var(--sia-cut), 100% 0, 100% calc(100% - var(--sia-cut)), 0 100%);
}

/* 最後のセクションは下辺を切らない。フッターに接するため。 */
.sia-sec--last {
  padding-bottom: clamp(76px, 9vw, 140px);
  clip-path: polygon(0 var(--sia-cut), 100% 0, 100% 100%, 0 100%);
}

.sia-sec--services { background: var(--sia-tint); }
.sia-sec--news     { background: #fff; }
.sia-sec--company  { background: #fff; }

.sia-sec--blue {
  background: var(--sia-blue);
  color: #fff;
}

.sia-sec__foot { margin: clamp(32px, 4vw, 52px) 0 0; }

/* --- セクション見出し。ページで一番大きい欧文。
       SWELL の h2 スタイルに潰されないよう、装飾を明示的に打ち消す。 --- */
.sia-sechead { margin-bottom: clamp(40px, 5vw, 76px); }

.sia-sechead__en {
  display: flex !important;
  align-items: center;
  gap: 0.3em;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: clamp(2.9rem, 9vw, 7.5rem) !important;
  font-weight: 500 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.02em;
  color: var(--sia-blue) !important;
}

.sia-sechead__en::before,
.sia-sechead__en::after { content: none !important; display: none !important; }

.sia-sec--blue .sia-sechead__en { color: #fff !important; }

.sia-sechead__ja {
  margin: 1.1em 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sia-ink-2);
}

.sia-sec--blue .sia-sechead__ja { color: rgba(255, 255, 255, 0.66); }

/* 見出しの前に立つ斜めの線 */
.sia-slash {
  flex: none;
  width: 0.1em;
  height: 0.7em;
  background: var(--sia-cyan);
  transform: skewX(var(--sia-tilt));
}

/* --- ボタン。角ゼロ。 --- */
.sia-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 1.15em 2.6em;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-decoration: none !important;
  border: 2px solid var(--sia-blue);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sia-btn--sm { padding: 0.85em 1.7em; font-size: 0.78rem; }

.sia-btn--solid { background: var(--sia-blue); color: #fff !important; }
.sia-btn--solid:hover { background: var(--sia-blue-d); border-color: var(--sia-blue-d); }

.sia-btn--line { background: transparent; color: var(--sia-blue) !important; }
.sia-btn--line:hover { background: var(--sia-blue); color: #fff !important; }

.sia-sec--blue .sia-btn--solid {
  background: #fff;
  color: var(--sia-blue) !important;
  border-color: #fff;
}
.sia-sec--blue .sia-btn--solid:hover { background: var(--sia-cyan); border-color: var(--sia-cyan); }

/* --- ブログ側で使う旧ボタン --- */
.siaorb-btn {
  display: inline-block;
  border-radius: 0;
  padding: 1.05em 2.3em;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.siaorb-btn--outline {
  border: 2px solid var(--sia-blue);
  color: var(--sia-blue) !important;
  background: transparent;
}
.siaorb-btn--outline:hover { background: var(--sia-blue); color: #fff !important; }

/* ==========================================================================
   4. フロントページ
   ========================================================================== */

/* --------------------------------------------------------------------------
   4-0. 固定背景
        ページ全体の後ろに敷きっぱなしにする一枚。position: fixed なので
        スクロールしても一切動かず、セクションの隙間から覗く。
        方眼は CSS、粒子は canvas、ブランドの環は SVG。
   -------------------------------------------------------------------------- */
.sia-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--sia-night);
  background-image:
    radial-gradient(58% 52% at 78% 24%, rgba(15, 47, 180, 0.36), transparent 70%),
    radial-gradient(50% 46% at 12% 84%, rgba(104, 212, 224, 0.12), transparent 72%),
    linear-gradient(rgba(104, 212, 224, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 212, 224, 0.075) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
}

.sia-bg__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ブランドの環。ページ全体の進み具合 --pp でゆっくり回る。 */
.sia-bg__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(86vw, 92vh);
  height: auto;
  margin: calc(min(86vw, 92vh) / -2) 0 0 calc(min(86vw, 92vh) / -2);
  overflow: visible;
  rotate: calc(var(--pp, 0) * 150deg);
  scale: calc(0.86 + var(--pp, 0) * 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .sia-bg__mark { rotate: none; scale: none; }
}

/* --------------------------------------------------------------------------
   4-1. ナビゲーション
   -------------------------------------------------------------------------- */
.sia-nav {
  position: fixed;
  top: 0;
  left: 0;
  /* 祖先の幅ではなく画面幅で確定させる */
  width: 100vw;
  box-sizing: border-box;
  z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.sia-nav.is-solid {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: var(--sia-rule);
}

.sia-nav__inner {
  box-sizing: border-box;
  max-width: var(--sia-max);
  margin-inline: auto;
  padding: 13px var(--sia-gut);
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 44px);
}

.sia-nav__logo { display: block; line-height: 0; margin-right: auto; }
.sia-nav__logo img { height: clamp(46px, 5vw, 64px); width: auto; display: block; }

.sia-nav__logo-text {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sia-blue);
  line-height: 1;
}

.sia-nav__menu { display: flex; gap: clamp(14px, 2vw, 32px); }

.sia-nav__menu a {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sia-ink) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.sia-nav__menu a:hover { color: var(--sia-blue) !important; }

/* --------------------------------------------------------------------------
   4-2. ヒーローとサービスをつなぐ面（.sia-lead）
        この2つだけは断ち切らず、ひと続きの面にする。
        地は白からサービスの淡い青へ、境目を作らずに移る。
        下辺だけ、ほかのセクションと同じ斜めで断ち切る。
   -------------------------------------------------------------------------- */
.sia-lead {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(#fff 0, #fff 70vh, var(--sia-tint) 135vh);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sia-cut)), 0 100%);
  /* 中の飾りが横にはみ出しても、ページの幅を広げさせない */
  overflow-x: clip;
}

.sia-lead > .sia-hero,
.sia-lead > .sia-sec {
  width: auto;
  margin-inline: 0;
  margin-top: 0;
  background: transparent;
  clip-path: none;
}

.sia-lead > .sia-sec { padding-top: clamp(40px, 5vw, 80px); }

/* 追従するロゴを載せる面。画面いっぱいに固定する。
   .sia-lead の clip-path が中身ごと切り抜くので、.sia-lead が画面から
   出ていけば、この面も下辺の斜めに沿って一緒に見えなくなる。
   position: sticky は使わない。SWELL が body に overflow-x: hidden を
   指定しており、その中では画面に張り付かないため。
   既定では出さない（4-3 の「JS が動くとき」で出す）。 */
.sia-lead__stage {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 位置と大きさは custom.js が決める。
   出発点は動かないロゴ（.sia-logo）を測って合わせるので、ここでは指定しない。 */
.sia-lead__logo {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.sia-lead__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* --g は「ロゴ → 1章の図版」の進み具合（0〜1）。手前の環ほど大きく広がり、先に消える。 */
.sia-lead__layer--outer {
  translate: calc(var(--mx, 0) * 34px) calc(var(--my, 0) * 34px);
  scale: calc(1 + var(--g, 0) * 1.4);
  opacity: calc(1 - var(--g, 0) * 1.5);
}

.sia-lead__layer--inner {
  translate: calc(var(--mx, 0) * 20px) calc(var(--my, 0) * 20px);
  scale: calc(1 + var(--g, 0) * 0.7);
  opacity: calc(1 - var(--g, 0) * 1.25);
}

.sia-lead__layer--main {
  translate: calc(var(--mx, 0) * 8px) calc(var(--my, 0) * 8px);
  filter: drop-shadow(0 14px 22px rgba(15, 47, 180, 0.14));
}

.sia-stage__line { stroke-width: 56; }
.sia-stage__under,
.sia-stage__nodes .sia-fig__node { opacity: 0; }
.sia-lead__stage .sia-fig__branch { stroke-dasharray: 100 100; stroke-dashoffset: 100; }

/* 外へ広がる円。中心から膨らみながら薄れていく動きを、1本ずつずらして繰り返す。 */
@keyframes sia-ripple {
  0%   { transform: scale(0.62); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: scale(1.24); opacity: 0; }
}

.sia-stage__under--pulse .sia-fig__branch {
  transform-origin: 600px 600px;
  animation: sia-ripple 3.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.sia-stage__under--pulse .sia-fig__branch:nth-of-type(2) { animation-delay: 1.2s; }
.sia-stage__under--pulse .sia-fig__branch:nth-of-type(3) { animation-delay: 2.4s; }

/* --------------------------------------------------------------------------
   4-2b. ヒーロー
   -------------------------------------------------------------------------- */
.sia-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  min-height: max(640px, 94svh);
  display: flex;
  align-items: center;
  padding-block: clamp(150px, 18vh, 210px) clamp(70px, 10vh, 120px);
}

/* 地のにじみと粒子は .sia-lead の直下に置く。追従するロゴより奥。 */
.sia-hero__wash {
  position: absolute;
  top: -12vh;
  left: 0;
  right: 0;
  height: 130vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 46% at 74% 34%, rgba(104, 212, 224, 0.34), transparent 68%),
    radial-gradient(44% 44% at 92% 74%, rgba(15, 47, 180, 0.20), transparent 68%),
    radial-gradient(40% 40% at 10% 12%, rgba(15, 47, 180, 0.10), transparent 70%),
    radial-gradient(38% 38% at 30% 96%, rgba(104, 212, 224, 0.16), transparent 70%);
  filter: blur(10px);
  /* --s はスクロール、--mx / --my はカーソルの位置（-0.5〜0.5）。custom.js が入れる。 */
  translate: calc(var(--mx, 0) * -30px) calc(var(--s, 0) * 60px + var(--my, 0) * -30px);
}

.sia-hero__dots {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  display: block;
  pointer-events: none;
}

/* --- 動かないロゴ ---
   追従するロゴを出さないとき（スマホ・動きを減らす設定・JS なし）に見せる。
   手前から 外環 → 内環 → 上昇曲線 の3層。
   スクロールすると手前の層ほど大きく広がり、先に消える。 */
.sia-logo {
  --w: min(62vw, 98vh, 980px);
  position: absolute;
  top: 50%;
  left: 54%;
  z-index: 0;
  width: var(--w);
  height: var(--w);
  translate: 0 -50%;
  pointer-events: none;
}

.sia-logo__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sia-logo__layer--outer {
  scale: calc(1 + var(--s, 0) * 1.2);
  opacity: calc(1 - var(--s, 0) * 1.5);
}

.sia-logo__layer--inner {
  scale: calc(1 + var(--s, 0) * 0.6);
  opacity: calc(1 - var(--s, 0) * 1.25);
}

.sia-hero__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: var(--sia-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--sia-gut);
}

.sia-hero__title {
  margin: 0;
  font-size: clamp(3rem, 9.6vw, 9rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--sia-ink);
}

.sia-hero__line { display: block; padding-bottom: 0.02em; }
.sia-hero__line:nth-child(2) { color: var(--sia-blue); }

.sia-hero__ja {
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  font-size: clamp(0.95rem, 1.35vw, 1.18rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--sia-ink);
}

.sia-hero__lead {
  margin: 0.9em 0 0;
  max-width: 30em;
  font-size: clamp(0.82rem, 0.95vw, 0.9rem);
  line-height: 2.05;
  color: var(--sia-ink-2);
}

.sia-hero__actions {
  margin-top: clamp(28px, 3vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- 読み込み時 ---
   線は 0.9 秒で描き終える。文字はそれを待たずに出る。 */
@keyframes sia-draw { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 0; } }
@keyframes sia-drawOpen { from { stroke-dashoffset: 78; } to { stroke-dashoffset: 0; } }
@keyframes sia-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* 外環は一部が開いているので、78% までしか描かない */
.sia-logo__layer--outer circle,
.sia-lead__layer--outer circle {
  stroke-dasharray: 78 100;
  animation: sia-drawOpen 0.9s cubic-bezier(0.3, 0.6, 0.2, 1) both;
}

.sia-logo__layer--inner circle,
.sia-logo__layer--wave path,
.sia-lead__layer--inner circle,
.sia-stage__line {
  stroke-dasharray: 100 0;
  animation: sia-draw 0.9s cubic-bezier(0.3, 0.6, 0.2, 1) both;
}

.sia-hero__ja      { animation: sia-fade 0.8s ease 0.5s both; }
.sia-hero__lead    { animation: sia-fade 0.8s ease 0.6s both; }
.sia-hero__actions { animation: sia-fade 0.8s ease 0.7s both; }

@media (prefers-reduced-motion: reduce) {
  .sia-logo__layer circle, .sia-logo__layer path,
  .sia-hero__ja, .sia-hero__lead, .sia-hero__actions {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .sia-logo__layer { scale: none; opacity: 1; }
  .sia-hero__wash { translate: none; }
}

/* --------------------------------------------------------------------------
   4-3. サービス
        図版は線だけで描く。色は青・シアン・墨の3つ。
   -------------------------------------------------------------------------- */
.sia-fig { display: block; width: 100%; height: auto; overflow: visible; }

.sia-fig__guide,
.sia-fig__axis,
.sia-fig__branch,
.sia-fig__line { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* 線は細く保つ。主線でも画面上で 3〜4px ほど。 */
.sia-fig__guide  { stroke: rgba(15, 47, 180, 0.2); stroke-width: 2; }
.sia-fig__axis   { stroke: var(--sia-ink); stroke-width: 2; }
.sia-fig__branch { stroke: var(--sia-cyan); stroke-width: 6; }
.sia-fig__line   { stroke: var(--sia-blue); stroke-width: 8; }
.sia-fig__node   { fill: #fff; stroke: var(--sia-blue); stroke-width: 5; }

.sia-chapter {
  position: relative;
  padding-block: clamp(30px, 5vw, 48px);
}

/* 章番号。輪郭だけの大きな数字を本文の面の右上から覗かせ、
   本文より遅く流して奥に見せる。下半分は面の後ろに隠れる。 */
.sia-chapter__num {
  position: relative;
  z-index: 0;
  display: none; /* 追従の図版を出す組み方のときだけ見せる */
  align-self: flex-end;
  width: fit-content;
  margin: 0 0 -0.4em auto;
  font-size: clamp(7rem, 13vw, 12rem);
  font-weight: 700;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(15, 47, 180, 0.28);
  pointer-events: none;
  user-select: none;
  translate: 0 calc(var(--p, 0) * var(--drift, 0) * 1px);
}

.sia-chapter__fig {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(18px, 4vw, 28px);
  max-width: 460px;
}

/* 本文は半透明の白い面に載せる。角は丸めない。 */
.sia-chapter__body {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 560px;
  padding: clamp(24px, 3.4vw, 44px);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 60px rgba(15, 47, 180, 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* --- JS が動くとき ---
   ヒーローのロゴを画面に張り付かせ、章ごとの置き場所へ運ぶ（custom.js）。
   図版は本文の面の後ろを通る。大きく見せ、面に一部が隠れてもよいものとする。
   面は画面に固定するだけで、スクロールそのものには手を入れない。
   動きを減らす設定のときは、この組み方をせず各章の図版を出す。 */
.sia-js:not(.sia-calm) .sia-lead__stage { display: block; }
.sia-js:not(.sia-calm) .sia-logo { visibility: hidden; } /* 場所だけ残す。位置を測るため。 */
.sia-js:not(.sia-calm) .sia-chapter__fig { display: none; }

/* PC：本文の面を、章ごとに右・左・右と入れ替える。図版はその反対側に来る。 */
@media (min-width: 901px) {
  .sia-js:not(.sia-calm) .sia-chapter {
    min-height: 96vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
  }

  .sia-js:not(.sia-calm) .sia-chapter__body,
  .sia-js:not(.sia-calm) .sia-story .sia-sechead {
    box-sizing: border-box;
    width: min(100%, 600px);
    max-width: none;
  }

  .sia-js:not(.sia-calm) .sia-chapter__num { display: block;        z-index: 3; }

  .sia-js:not(.sia-calm) .sia-chapter:nth-of-type(even) { align-items: flex-start; }
  .sia-js:not(.sia-calm) .sia-chapter:nth-of-type(even) .sia-chapter__num {
    align-self: flex-start;
    margin: 0 auto -0.4em 0;
  }

  /* 見出しは最初の章と同じ右側に置く。左はロゴが通るので空けておく。 */
  .sia-js:not(.sia-calm) .sia-story .sia-sechead { margin: 0 0 0 auto; }
  .sia-js:not(.sia-calm) .sia-story .sia-sechead__en { font-size: clamp(2.6rem, 6vw, 5rem) !important; }
}

/* スマホ：図版は画面の上半分に張り付く。章と章の間を空け、そこで変形を見せる。 */
@media (max-width: 900px) {
  .sia-js:not(.sia-calm) .sia-chapter { margin-top: 56vh; padding-block: 0; }
  .sia-js:not(.sia-calm) .sia-story { padding-bottom: 8vh; }
}

.sia-chapter__en {
  margin: 0 0 0.5em;
  font-size: clamp(0.74rem, 0.9vw, 0.84rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sia-blue);
}

.sia-chapter__group {
  margin: 0 0 1.2em;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--sia-ink-2);
}

.sia-chapter__name {
  margin: 0 0 0.8em;
  font-size: clamp(1.35rem, 2.5vw, 2.3rem);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.03em;
  color: var(--sia-ink);
}

.sia-chapter__desc {
  margin: 0;
  max-width: 30em;
  font-size: clamp(0.84rem, 0.95vw, 0.92rem);
  line-height: 2.05;
  color: var(--sia-ink-2);
}

/* タグは下線だけ。角丸のチップにしない。 */
.sia-chapter__tags {
  list-style: none;
  margin: 1.6em 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.4em;
}

.sia-chapter__tags li {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sia-ink);
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--sia-blue);
}

/* --------------------------------------------------------------------------
   4-4. 最新記事
   -------------------------------------------------------------------------- */
.sia-news {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
}

/* 3枚が少しずつ遅れて出る */
.sia-js .sia-news__item:nth-child(2) { transition-delay: 0.08s; }
.sia-js .sia-news__item:nth-child(3) { transition-delay: 0.16s; }

.sia-news__link {
  display: block;
  min-width: 0;
  text-decoration: none !important;
  color: inherit !important;
}

.sia-news__thumb { overflow: hidden; border-radius: var(--sia-r-s); }

.sia-news__thumb img,
.sia-news__nothumb {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.sia-news__nothumb { background: var(--sia-tint); }
.sia-news__link:hover .sia-news__thumb img { transform: scale(1.05); }

.sia-news__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 10px;
  font-size: 0.74rem;
  color: var(--sia-ink-2);
  font-variant-numeric: tabular-nums;
}

/* 日付は欧文なので Chakra Petch が当たる。字間を少し開けて読みやすくする。 */
.sia-news__meta time { letter-spacing: 0.06em; }

.sia-news__cat {
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sia-blue);
  padding-bottom: 0.2em;
  border-bottom: 2px solid var(--sia-blue);
}

.sia-news__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: -0.01em;
  color: var(--sia-ink);
  transition: color 0.2s ease;
}

.sia-news__link:hover .sia-news__title { color: var(--sia-blue); }

/* --------------------------------------------------------------------------
   4-5. 会社概要
   -------------------------------------------------------------------------- */
.sia-vision {
  margin: 0 0 clamp(48px, 6vw, 88px);
  max-width: 19em;
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.46;
  letter-spacing: -0.04em;
  color: var(--sia-blue);
}

.sia-vision__line { display: block; }
.sia-js .sia-vision__line:nth-child(2) { transition-delay: 0.1s; }

.sia-def {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--sia-rule);
}

.sia-def__label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sia-blue);
}
.sia-def__body { min-width: 0; }

.sia-mission {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 32em;
  display: flex;
  flex-direction: column;
  gap: 0.85em;
}

.sia-mission li {
  position: relative;
  padding-left: 1.5em;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.85;
  color: var(--sia-ink);
}

/* 印は小さな正方形。角丸を使わない語彙にそろえる。 */
.sia-mission li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 8px;
  height: 8px;
  background: var(--sia-cyan);
  transform: skewX(var(--sia-tilt));
}

.sia-greeting {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 52px);
  align-items: start;
}

.sia-greeting__media { margin: 0; }

.sia-greeting__media img,
.sia-greeting__noimg {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 12%;
  border-radius: var(--sia-r-s);
}
.sia-greeting__noimg { background: var(--sia-tint); }

.sia-greeting__text p {
  margin: 0 0 1.4em;
  max-width: 32em;
  font-size: 0.9rem;
  line-height: 2.1;
  color: var(--sia-ink-2);
}

.sia-greeting__sign {
  margin: 2em 0 0 !important;
  display: flex;
  align-items: baseline;
  gap: 0.9em;
}
.sia-greeting__role { font-size: 0.76rem; color: var(--sia-ink-2); }
.sia-greeting__name {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sia-ink);
}

.siaorb-company-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.siaorb-company-table th,
.siaorb-company-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.95em 0;
  border-bottom: 1px solid var(--sia-rule);
  font-size: 0.88rem;
  line-height: 1.9;
}

.siaorb-company-table th { width: 8rem; font-weight: 600; color: var(--sia-ink-2); }
.siaorb-company-table td { color: var(--sia-ink); }
.siaorb-company-table tr:last-child th,
.siaorb-company-table tr:last-child td { border-bottom: 0; }

.siaorb-company-table td ul { list-style: none; margin: 0; padding: 0; }
.siaorb-company-table td li { margin: 0 0 0.3em; }
.siaorb-company-table td li:last-child { margin-bottom: 0; }

.siaorb-company-table a {
  color: var(--sia-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   4-6. お問い合わせ（Contact Form 7）
   -------------------------------------------------------------------------- */
/* 右の補足ブロックを外したので、1カラムで組む。
   幅は .sia-form 側の max-width で決まる。 */
.sia-contact { display: block; }

/* 右に置くロゴの線画。白とシアンだけで、フォームの邪魔をしない濃さにする。 */
.sia-contact__mark {
  position: absolute;
  top: 50%;
  right: max(var(--sia-gut), calc((100vw - var(--sia-max)) / 2 + var(--sia-gut)));
  z-index: 0;
  width: min(36vw, 500px);
  height: auto;
  overflow: visible;
  pointer-events: none;
  translate: 0 calc(-50% + var(--p, 0) * var(--drift, 0) * 1px);
}

.sia-contact__mark circle,
.sia-contact__mark path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 20;
  stroke-linecap: round;
}
.sia-contact__mark .sia-contact__mark-inner { stroke: var(--sia-cyan); stroke-width: 16; }
.sia-contact__mark path { stroke-width: 34; }

.sia-sec--blue > .sia-wrap { position: relative; z-index: 1; }

.sia-contact__lead {
  margin: 0 0 clamp(36px, 4.5vw, 60px);
  max-width: 30em;
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  line-height: 2.05;
  color: rgba(255, 255, 255, 0.85);
}

.sia-form { max-width: 38rem; }
.sia-form__fallback { font-size: 0.95rem; line-height: 2; color: rgba(255, 255, 255, 0.85); }
.sia-form__fallback a { color: var(--sia-cyan); }

/* --- Contact Form 7 の実マークアップに合わせる --- */
.sia-form .wpcf7 { margin: 0; }
.sia-form .wpcf7-form p { margin: 0 0 1.8em; }
.sia-form .wpcf7-form br { display: none; }
.sia-form .wpcf7-form-control-wrap { display: block; }

.sia-form label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0.6em;
}

.sia-form .sia-req,
.sia-form label .required {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.18em 0.7em;
  background: var(--sia-cyan);
  color: var(--sia-blue);
  font-size: 0.68rem;
  font-weight: 700;
}

.sia-form input[type="text"],
.sia-form input[type="email"],
.sia-form input[type="tel"],
.sia-form input[type="url"],
.sia-form input[type="date"],
.sia-form input[type="number"],
.sia-form select,
.sia-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85em 1.1em;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.7;
  border: 2px solid transparent;
  border-radius: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.sia-form select {
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%),
                    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 3em;
}

.sia-form textarea { min-height: 9em; resize: vertical; }
.sia-form input::placeholder, .sia-form textarea::placeholder { color: rgba(255, 255, 255, 0.45); }

.sia-form input:focus,
.sia-form select:focus,
.sia-form textarea:focus {
  border-color: var(--sia-cyan);
  background: rgba(255, 255, 255, 0.16);
}

.sia-form .wpcf7-list-item { display: block; margin: 0 0 0.5em; }
.sia-form .wpcf7-list-item-label { color: rgba(255, 255, 255, 0.9); font-size: 0.88rem; }
.sia-form input[type="checkbox"],
.sia-form input[type="radio"] { width: auto; margin-right: 0.6em; accent-color: var(--sia-cyan); }
.sia-form .wpcf7-acceptance .wpcf7-list-item { margin-left: 0; }

.sia-form input[type="submit"],
.sia-form button[type="submit"] {
  width: auto;
  border-radius: 0;
  padding: 1.15em 2.8em;
  background: #fff;
  color: var(--sia-blue);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 2px solid #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sia-form input[type="submit"]:hover,
.sia-form button[type="submit"]:hover { background: var(--sia-cyan); border-color: var(--sia-cyan); }

.sia-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.55em;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffc9bd;
}

.sia-form .wpcf7-not-valid { border-color: #ffc9bd; }

.sia-form .wpcf7-response-output {
  margin: 1.8em 0 0 !important;
  padding: 1em 1.3em !important;
  border-radius: 0;
  font-size: 0.86rem;
  line-height: 1.8;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.sia-form form.invalid .wpcf7-response-output,
.sia-form form.unaccepted .wpcf7-response-output { border-color: #ffc9bd !important; }
.sia-form form.sent .wpcf7-response-output { border-color: var(--sia-cyan) !important; }

.sia-form .wpcf7-spinner { filter: invert(1); }

/* --------------------------------------------------------------------------
   4-7. 追従の相談ボタン
        SWELL の「TOPへ戻る」は右下に出るので、こちらは左下に置いて重ならない
        ようにしている。角丸も使わない。
   -------------------------------------------------------------------------- */
.sia-badge {
  position: fixed;
  left: clamp(14px, 2.2vw, 28px);
  bottom: clamp(14px, 2.2vw, 28px);
  right: auto;
  z-index: 90;
  border-radius: 0;
  padding: 1.15em 2em;
  background: var(--sia-blue);
  color: #fff !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  box-shadow: 0 12px 34px rgba(15, 47, 180, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.26s ease, transform 0.26s ease, visibility 0.26s, background-color 0.2s ease;
}

.sia-badge.is-shown { opacity: 1; visibility: visible; transform: none; }
.sia-badge:hover { background: var(--sia-blue-d); }

/* 念のため、SWELL の「TOPへ戻る」が左下に出る設定でも重ならないように */
body.siaorb-is-front .p-fixBtn,
body.siaorb-is-front #pagetop,
body.siaorb-is-front .c-pagetop { left: auto !important; right: clamp(14px, 2.2vw, 28px) !important; }

/* ==========================================================================
   5. ブログ（一覧・カテゴリ・サイドバー）
   ========================================================================== */
.siaorb-archive {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.siaorb-archive__hero {
  width: 100%;
  background: var(--sia-blue);
  padding: 100px 0 80px;
  color: #fff;
}

/* 記事カードは少しずつ遅れて出る */
.sia-js .siaorb-archive__item:nth-child(even) { transition-delay: 0.08s; }

.siaorb-archive__hero-inner {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sia-gut);
}

.siaorb-archive__hero-en {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sia-cyan);
  margin-bottom: 14px;
}

.siaorb-archive__hero-title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff !important;
  margin-bottom: 14px;
}

.siaorb-archive__hero-desc {
  font-size: 0.88rem;
  line-height: 2;
  max-width: 32em;
  color: rgba(255, 255, 255, 0.8);
}

.siaorb-archive__body { width: 100%; background: #fff; padding: 64px 0 96px; }

.siaorb-archive__inner {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sia-gut);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 56px;
  align-items: start;
}

.siaorb-archive__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
}

.siaorb-archive__link {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit !important;
  height: 100%;
}

.siaorb-archive__thumb { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--sia-r-s); }

.siaorb-archive__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.siaorb-archive__link:hover .siaorb-archive__img { transform: scale(1.04); }

.siaorb-archive__no-thumb { width: 100%; height: 100%; background: var(--sia-tint); }
.siaorb-archive__body-inner { padding: 16px 0 0; display: flex; flex-direction: column; flex: 1; }

.siaorb-archive__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.siaorb-archive__date { font-size: 0.74rem; color: var(--sia-ink-2); }
.siaorb-archive__cat { font-size: 0.72rem; font-weight: 700; color: var(--sia-blue); }

.siaorb-archive__title {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--sia-ink);
  margin-bottom: 10px;
}

.siaorb-archive__excerpt {
  font-size: 0.83rem;
  color: var(--sia-ink-2);
  line-height: 1.95;
  flex: 1;
  margin-bottom: 14px;
}

.siaorb-archive__more { font-size: 0.78rem; font-weight: 700; color: var(--sia-blue) !important; }

.siaorb-archive__pagination { margin-top: 56px; }
.siaorb-archive__pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }

.siaorb-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 2px solid var(--sia-rule);
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sia-ink);
  text-decoration: none;
  background: transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.siaorb-archive__pagination .page-numbers:hover,
.siaorb-archive__pagination .page-numbers.current {
  background: var(--sia-blue);
  border-color: var(--sia-blue);
  color: #fff;
}

.siaorb-archive__empty { padding: 64px 0; color: var(--sia-ink-2); grid-column: 1 / -1; }
.siaorb-archive__empty p { margin-bottom: 24px; }

.siaorb-archive__sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: 96px;
}

.siaorb-sidebar__widget {
  background: var(--sia-tint);
  padding: 24px;
}

.siaorb-sidebar__title { font-size: 0.8rem; font-weight: 700; color: var(--sia-blue); margin-bottom: 14px; }

.siaorb-sidebar__search-inner { display: flex; background: #fff; }

.siaorb-sidebar__search-input {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  font-size: 0.86rem;
  border: none;
  outline: none;
  color: var(--sia-ink);
  background: transparent;
}
.siaorb-sidebar__search-input::placeholder { color: var(--sia-ink-2); }

.siaorb-sidebar__search-btn {
  padding: 0 18px;
  background: var(--sia-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.2s;
}
.siaorb-sidebar__search-btn:hover { background: var(--sia-blue-d); }

.siaorb-sidebar__cat-list,
.siaorb-sidebar__archive-list { list-style: none; margin: 0; padding: 0; }

.siaorb-sidebar__cat-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 0.84rem;
  color: var(--sia-ink);
  text-decoration: none;
  transition: color 0.2s;
}
.siaorb-sidebar__cat-link:hover { color: var(--sia-blue); }

.siaorb-sidebar__cat-count { font-size: 0.74rem; color: var(--sia-ink-2); font-variant-numeric: tabular-nums; }

.siaorb-sidebar__archive-list li { font-size: 0; margin: 0; padding: 0; }

.siaorb-sidebar__archive-list li a {
  display: block;
  padding: 10px 0;
  font-size: 0.84rem;
  color: var(--sia-ink);
  text-decoration: none;
  transition: color 0.2s;
}
.siaorb-sidebar__archive-list li a:hover { color: var(--sia-blue); }

.blog #sidebar, .blog .l-sidebar,
.category #sidebar, .category .l-sidebar,
.archive #sidebar, .archive .l-sidebar { display: none !important; }

.siaorb-footer-logo {
  box-sizing: border-box;
  text-align: center;
  padding: 56px 24px 40px;
  background: var(--sia-blue);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.siaorb-footer-logo img { display: inline-block; width: 180px; max-width: 70%; height: auto; }
.siaorb-footer-logo__fallback {
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}

/* ==========================================================================
   6. レスポンシブ
   ========================================================================== */
@media (max-width: 900px) {
  :root { --sia-cut: 7vw; }

  .sia-hero {
    align-items: flex-start;
    min-height: 0;
    /* 下余白はロゴの見えている高さ + 44px */
    padding-block: clamp(130px, 17vh, 180px) calc(min(96vw, 620px) * 0.66 + 44px);
  }

  .sia-logo {
    --w: min(96vw, 620px);
    top: auto;
    bottom: calc(min(96vw, 620px) * -0.34);
    left: auto;
    right: -24vw;
    translate: none;
  }

  /* スマホでは粒子を出さない */
  .sia-hero__dots { display: none; }

  .sia-contact__mark { display: none; }

  .sia-nav__cta { display: none; }

}

@media (max-width: 860px) {
  .sia-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .siaorb-archive__inner { grid-template-columns: 1fr; gap: 48px; }
  .siaorb-archive__sidebar { position: static; }
}

@media (max-width: 720px) {
  /* 記事一覧のヘッダーは、スマホでは高さを詰める */
  .siaorb-archive__hero { padding: 40px 0 32px; }
  .siaorb-archive__hero-en { margin-bottom: 8px; }
  .siaorb-archive__hero-title { margin-bottom: 8px; }
  .siaorb-archive__hero-desc { font-size: 0.82rem; line-height: 1.85; }
  .siaorb-archive__body { padding: 40px 0 72px; }
  .sia-def { grid-template-columns: 1fr; gap: 12px; }
  .sia-greeting { grid-template-columns: 1fr; }
  .sia-greeting__media { max-width: 200px; }
  .sia-news { grid-template-columns: 1fr; }
  .siaorb-archive__grid { grid-template-columns: 1fr; }

  .siaorb-company-table th,
  .siaorb-company-table td { display: block; width: auto; }
  .siaorb-company-table th { border-bottom: 0; padding-bottom: 0.2em; }
  .siaorb-company-table td { padding-top: 0.3em; }

  .sia-badge { padding: 1em 1.5em; font-size: 0.74rem; }
}

@media (max-width: 460px) {
  .sia-nav__menu { gap: 12px; }
  .sia-nav__menu a { font-size: 0.8rem; }
  .sia-hero__actions .sia-btn { font-size: 0.8rem; padding: 1.05em 1.9em; }
}