@charset "utf-8";
/* 案2「藍波（あいなみ）」——会社案内としての正統。

   白地に藍（#12243a）。海と空の境目を、見出しの下の細い罫と、ヒーローの下の
   太い一本線で表す。朱（#c8102e）は経営理念の縦罫だけに使い、それ以外では
   出さない。取引先・金融機関・採用など「会社を確かめに来た人」が読む前提で、
   文字を大きめ・行間広めにして、装飾より可読性を優先している。 */

:root {
  --paper: #ffffff;
  --panel: #f4f7fa;          /* 一段沈める面 */
  --panel2: #dde5ed;         /* 写真が無いときの枠 */
  --ai: #12243a;             /* 藍。見出しと締めの面 */
  --ai-d: #0a1728;
  --ink: #12243a;
  --sumi: #33465c;           /* 本文 */
  --dim: #8a99aa;            /* 補助 */
  --line: #d9e0e8;
  --shu: #c8102e;            /* 朱。理念の縦罫だけ */
  --font-h: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-b: "Noto Sans JP", system-ui, sans-serif;
  --font-n: "Barlow Condensed", "Noto Sans JP", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--paper); color: var(--sumi);
  font-family: var(--font-b); line-height: 2;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }

.inner { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.inner.narrow { max-width: 780px; }

/* この案では実績の帯は置かない（会社の姿勢を先に読ませる） */
.topbar { display: none; }

/* ---------------------------------------------------------- ヘッダー */
.hd { background: var(--paper); position: sticky; top: 0; z-index: 40; }
.hd-in { display: flex; align-items: center; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.logo { font-family: var(--font-h); font-size: 19px; color: var(--ai); text-decoration: none; line-height: 1.4; }
.logo em {
  display: block; font-style: normal; font-family: var(--font-n);
  font-size: 12px; letter-spacing: .18em; color: var(--dim);
}
.nav { display: flex; gap: 26px; margin-left: auto; font-size: 13.5px; }
.nav a { color: #45566b; text-decoration: none; padding-bottom: 3px; }
.nav a:hover, .nav a:focus-visible { color: var(--ai); }
.nav a.on { color: var(--ai); font-weight: 700; border-bottom: 2px solid var(--ai); }
.hd-tel {
  font-family: var(--font-n); font-size: 19px; letter-spacing: .05em;
  color: var(--ai); text-decoration: none; white-space: nowrap;
}
.hd-cta, .tel { display: none; }

/* スマホの引き出し。JSを使わず details で開閉する。 */
.spmenu { display: none; margin-left: auto; }
.spmenu > summary {
  list-style: none; cursor: pointer; width: 30px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}
.spmenu > summary::-webkit-details-marker { display: none; }
.spmenu > summary span,
.spmenu > summary span::before,
.spmenu > summary span::after {
  display: block; width: 24px; height: 2px; background: var(--ai); content: "";
}
.spmenu > summary span { position: relative; }
.spmenu > summary span::before { position: absolute; top: -8px; }
.spmenu > summary span::after { position: absolute; top: 8px; }
.spmenu[open] > summary span { background: transparent; }
.spmenu[open] > summary span::before { top: 0; transform: rotate(45deg); }
.spmenu[open] > summary span::after { top: 0; transform: rotate(-45deg); }
.spmenu-body {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(18, 36, 58, .12);
  display: flex; flex-direction: column; padding: 4px 24px 20px;
}
.spmenu-body a { padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 15px; color: var(--ai); }
.spmenu-tel {
  font-family: var(--font-n); font-size: 24px; letter-spacing: .06em;
  color: var(--ai); border-bottom: 0;
}

/* ---------------------------------------------------------- ヒーロー
   写真の上に見出しを重ね、下端で受ける。写真の下に藍の一本線を引き、
   ここから会社の話が始まることを示す。 */
/* 写真の高さ。PC 570px（もとの380pxの1.5倍）。 */
.hero { position: relative; min-height: 570px; display: flex; align-items: flex-end; }
.hero-ph {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(#c9d8e6, #8fa9c2 62%, #23405e);
}
/* 写真は重ねて置き、透明度だけを入れ替える。
   出していない写真は押せない・たどれないようにしておく。 */
/* 溶ける時間。管理画面の「写真が溶けて入れ替わる時間」（--fade）で決める。
   トップの大きな写真とブログのバナーで、同じ値を使っている。
   visibility は、消えるときだけ溶け終わってから切り替える。 */
.hero-slide {
  position: absolute; inset: 0;
  background: center / cover no-repeat;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--fade, 3s) ease, visibility 0s linear var(--fade, 3s);
}
.hero-slide.is-on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--fade, 3s) ease;
}
/* 写真を上から下へ流す（チルト）。カメラを上から下へ振る動き。

   写真そのものは動かさず、同じ画像を持つ層を重ねて、その層の見せる位置を
   上端から下端まで送る。枠に収まりきらない縦のぶんを端から端まで使うので、
   写真の全域がひととおり目に入る。

   かける時間は管理画面の「1枚を出す時間」と同じ（--hero-sec）。
   出ているあいだで動ききり、そのあと溶けて次へ移る。 */
@keyframes hero-tilt {
  from { background-position: center top; }
  to   { background-position: center bottom; }
}
.hero-slide::before {
  content: ""; position: absolute; inset: 0;
  background-image: inherit;
  background-position: center top; background-size: cover;
  background-repeat: no-repeat;
}
.hero-slide.is-on::before {
  animation: hero-tilt var(--hero-sec, 6s) linear both;
  will-change: background-position;
}

a.hero-slide { display: block; text-decoration: none; }
/* 見出しが写真に沈まないよう、下半分に藍をかける。
   どれだけかけるかは管理画面の「トップ写真の暗さ」（1〜10）で決める。
   ここの色は10のときの濃さで、8が元の見え方にあたる。 */
.hero-ph::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%; z-index: 1;
  pointer-events: none;
  opacity: calc(var(--hero-dim, 8) / 10);
  background: linear-gradient(transparent, rgba(6, 20, 38, .9));
}
.hero-cap {
  position: absolute; left: 20px; right: 20px; top: 20px; z-index: 1;
  color: #fff; font-size: 12.5px; line-height: 1.7;
  text-shadow: 0 1px 8px rgba(6, 20, 38, .7);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-dots {
  position: absolute; left: 0; right: 0; top: 16px; z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.hero-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .9); background: rgba(6, 20, 38, .3);
}
.hero-dot.is-on { background: #fff; }
/* 溶ける切り替えは、動きを減らす設定でも残す。ここを切ると写真が
   パッと入れ替わり、つながりが途切れて見えるため。 */
/* 見出しの面は写真の上に重なっている。そのままだと写真のリンクを覆ってしまい、
   ブログ記事へ飛べない。面そのものは押せなくして、中のリンクだけ押せるようにする。 */
.hero-in {
  position: relative; z-index: 2; width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 0 24px 36px; pointer-events: none;
}
.hero-in a, .hero-in button { pointer-events: auto; }
.hero h1 {
  font-family: var(--font-h); font-weight: 500; color: #fff;
  font-size: clamp(19px, 2.8vw, 32px); line-height: 1.6; letter-spacing: .04em;
  text-shadow: 0 2px 16px rgba(6, 20, 38, .55); text-wrap: balance;
}
.hero-mark { display: none; }
.hero-sub { margin-top: 14px; font-size: 13px; color: #dbe6f0; }

/* 海と空の境目。ヒーローの下に置く一本線。 */
.a-rule { height: 3px; background: var(--ai); }

/* この案では実績の札は出さない */
.badges { display: none; }
.badge b { font-family: var(--font-n); }

/* ---------------------------------------------------------- 理念 */
.msg { border-bottom: 1px solid var(--line); }
.msg-in {
  display: grid; grid-template-columns: 1fr 300px; gap: 48px;
  align-items: start; padding-top: 46px; padding-bottom: 46px;
}
.msg-body { font-size: 14px; line-height: 2.2; max-width: 44em; }
.msg-kv { border-left: 3px solid var(--shu); padding-left: 16px; }
.kv { font-family: var(--font-h); font-size: 22px; line-height: 1.75; letter-spacing: .05em; color: var(--ai); }
.kv b { color: var(--ai); font-weight: 700; }
.kv-note { font-size: 11.5px; color: var(--dim); margin-top: 6px; line-height: 1.8; }

.btn-line {
  display: inline-block; margin-top: 18px; padding: 9px 22px;
  border: 1px solid var(--line); text-decoration: none;
  font-size: 13px; letter-spacing: .04em; color: var(--ai);
  transition: border-color .15s, background .15s;
}
.btn-line:hover, .btn-line:focus-visible { border-color: var(--ai); background: var(--panel); }
.btn-shu {
  display: inline-block; padding: 13px 32px; background: var(--ai); color: #fff;
  text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .04em;
}
.btn-shu:hover { background: var(--ai-d); }

/* ---------------------------------------------------------- 見出し */
.sec { padding: 46px 0; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-h {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.sec-h h2 { font-family: var(--font-h); font-size: 18px; font-weight: 700; color: var(--ai); letter-spacing: .04em; }
.sec-en { font-family: var(--font-n); font-size: 11.5px; letter-spacing: .2em; color: var(--dim); }
.sec-more { margin-left: auto; font-size: 12.5px; color: var(--ai); text-decoration: none; }
.sec-more:hover { text-decoration: underline; }

/* ---------------------------------------------------------- 商品 */
.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
.pgrid-lg { grid-template-columns: repeat(4, 1fr); }
.pcard a { display: block; text-decoration: none; height: 100%; }
.pcard-ph {
  display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel2);
}
.pcard-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pcard a:hover .pcard-ph img { transform: scale(1.04); }
.pcard-ph.noimg::after {
  content: "写真"; display: flex; align-items: center; justify-content: center;
  height: 100%; font-size: 11px; letter-spacing: .1em; color: var(--dim);
}
.pcard-t { display: block; padding: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--sumi); }
.pcard a:hover .pcard-t { color: var(--ai); }
.pcard-l { display: block; padding: 3px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--dim); }

/* ---------------------------------------------------------- お知らせ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.sec-split .split { grid-template-columns: 1fr 340px; }
.nlist a {
  display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; font-size: 13px; line-height: 1.8;
}
.nlist a:hover { color: var(--ai); }
.nlist time {
  font-family: var(--font-n); color: var(--dim); letter-spacing: .08em;
  flex: none; font-variant-numeric: tabular-nums; padding-top: 1px;
}
.nlist-lg a { font-size: 15px; padding: 18px 0; }

.shopbox { border: 1px solid var(--line); padding: 24px; background: var(--panel); }
.shopbox-h { font-family: var(--font-n); font-size: 11px; letter-spacing: .22em; color: var(--dim); }
.shopbox-name { font-family: var(--font-h); font-size: 20px; color: var(--ai); margin: 4px 0 12px; }
.shopbox-body { font-size: 12.5px; line-height: 2; }

.empty { color: var(--dim); font-size: 13.5px; padding: 24px 0; }

/* ---------------------------------------------------------- 関連サイト
   プロダクツの上に置く2枚の帯。ありもののカードにせず、中身に合わせて
   別々の作りにしている。
     ツール … 4つの工程を番号で順に並べる（順番どおり片づくことが売りなので）
     ブログ … いま載っている実物の写真を大きく敷く
   骨組みは3案で同じ。色と囲みだけを案ごとに変える。 */
.promo-sec { padding: 46px 0 0; }
.promos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.promo { display: flex; }
/* バナーは6：4の横長。中身が入りきらないときだけ縦に伸びる（切れない）。 */
.promo > a, .promo > .promo-roll {
  display: flex; flex-direction: column; width: 100%; text-decoration: none;
  position: relative; overflow: hidden; aspect-ratio: 6 / 4;
}
.promo-eyebrow {
  font-family: var(--font-n); font-size: 11px; letter-spacing: .2em;
}
.promo-t {
  font-family: var(--font-h); font-weight: 500; font-size: 19px; line-height: 1.5;
  margin: 6px 0 10px; letter-spacing: .03em;
}
.promo-lead { font-size: 12px; line-height: 1.85; }
/* 工程。左に細い縦線を通し、番号を丸で置く。順番があることを線で見せる。 */
.promo-flow { margin: 10px 0 0; padding: 0 0 0 26px; position: relative; counter-reset: f; }
.promo-flow::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; }
.promo-flow li {
  counter-increment: f; position: relative; font-size: 12px; line-height: 1.7;
  padding: 2px 0; list-style: none;
}
.promo-flow li::before {
  content: counter(f); position: absolute; left: -26px; top: 5px;
  width: 17px; height: 17px; border-radius: 50%;
  font-family: var(--font-n); font-size: 11px; line-height: 17px; text-align: center;
}
.promo-note { margin-top: 10px; font-size: 11px; }
.promo-go {
  display: block; margin-top: auto; padding-top: 12px;
  font-family: var(--font-n); font-size: 12.5px; letter-spacing: .1em;
}

/* ブログ側は写真そのものがバナー。全面に敷き、下半分に暗い幕をかけて
   その上に白い文字を置く。写真が取れないときは幕だけが残る。

   新しい記事から順に、写真を1枚ずつ出す。コマは重ねて置き、透明度だけを
   入れ替えるので、**写真と文字がいっしょに溶けて**入れ替わる。
   出ていないコマは押せないようにしておく（重なった下のコマに当たらない）。 */
.promo-blog > a, .promo-blog .promo-roll { padding: 0; }
.promo-frame {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  text-decoration: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--fade, 3s) ease, visibility 0s linear var(--fade, 3s);
}
.promo-frame.is-on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--fade, 3s) ease;
}
/* バナーの名札。写真の上に白い板で置き、右上にずっと出しておく。
   「アルタシステム」は濃い灰、「BLOG」は赤。 */
.promo-badge {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  background: #fff; color: #3a3a3a; white-space: nowrap;
  font-family: var(--font-b); font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; padding: 5px 11px; border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
  pointer-events: none;
}
.promo-badge b { color: #d0021b; font-weight: 700; letter-spacing: .06em; }
/* ---- ツールのバナー ----
   飛び先（tools.altasystem.jp）の見た目をそのまま借りる。クリームの地に
   朱赤と黄、右下に「じゅんちゃん」。説明は置かず、雰囲気だけを渡す。
   3つの見た目で同じ色にしている。押した先と地続きに見えるほうが親切なので。 */
/* 見た目ごとの .promo > a と同じ強さだと、あとに書いたほうに負けてしまう。
   ここは飛び先の色で塗りたいので、少しだけ強く指定する。 */
.promo.promo-tools > a {
  border: 0; padding: 0; overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, #fdf6ec 55%, #f7e9d5 100%);
}
/* マウスを乗せたら、クリームを濃くして反応を返す。
   （明るくすると白に近づいて、押せることが伝わりにくい） */
.promo.promo-tools > a:hover {
  background: linear-gradient(160deg, #fdf6ec 0%, #f5e4cb 55%, #eed9b8 100%);
}
/* 上端の黄色い帯。飛び先の見出しに使われている色。 */
.promo.promo-tools > a::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, #d94218 0%, #f7b32b 100%);
}
.jun-in {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  padding: 22px 20px 18px; max-width: 68%;
}
.jun-eyebrow {
  font-size: 11.5px; letter-spacing: .06em; color: #a08a76; font-weight: 700;
}
.jun-t {
  font-size: 16px; line-height: 1.5; font-weight: 700; color: #3a2a1e;
  margin: 5px 0 0; letter-spacing: .01em;
}
.jun-t b { display: block; font-size: 18px; color: #d94218; font-weight: 700; }
.jun-lead {
  margin-top: 9px; font-size: 11.5px; line-height: 1.8; color: #7a675a;
}
/* 入口のボタン2つ。塗りが本命、枠線がもうひとつ。 */
.jun-acts { margin-top: auto; padding-top: 12px; display: flex; gap: 8px;
            align-items: center; flex-wrap: wrap; }
.jun-go {
  background: #d94218; color: #fff; font-size: 12px; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
}
.jun-sub {
  font-size: 12px; font-weight: 700; color: #d94218; white-space: nowrap;
  padding: 7px 12px; border: 1px solid #e8c3b4; border-radius: 999px;
}
.promo-tools > a:hover .jun-go { background: #b03312; }
.promo-tools > a:hover .jun-sub { border-color: #d94218; }
/* じゅんちゃん。右下から少しはみ出させて、動きを出す。 */
.jun-ph {
  position: absolute; right: -8px; bottom: -6px; width: 34%; height: 78%;
  background: url("https://tools.altasystem.jp/assets/img/junchan-happy.png")
              right bottom / contain no-repeat;
}
@media (max-width: 700px) {
  .jun-in { max-width: 100%; padding: 20px 16px 16px; }
  .jun-lead { font-size: 11px; }
  /* 狭い画面ではイラストを薄く敷いて、文字が上に乗るようにする */
  .jun-ph { width: 46%; height: 62%; opacity: .5; }
}

.promo-ph {
  position: absolute; inset: 0; background: center / cover no-repeat;
}
.promo-blog > a::after, .promo-frame::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 78%;
  background: linear-gradient(transparent, rgba(6, 10, 24, .88));
}
.promo-in {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  margin-top: auto; padding: 20px 10px 10px;
}
/* コマの中は「スタッフブログ…」と題名だけ。下の余白は10px。 */
.promo-frame .promo-t { margin-bottom: 0; }
.promo-blog .promo-eyebrow { color: rgba(255, 255, 255, .78); }
.promo-blog .promo-t { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.promo-blog .promo-lead { color: rgba(255, 255, 255, .88); }
.promo-blog .promo-go { color: #fff; padding-top: 10px; }
.promo-latest { font-size: 12px; line-height: 1.8; color: rgba(255, 255, 255, .9); }
.promo-latest i {
  font-style: normal; display: block; font-family: var(--font-n);
  font-size: 10.5px; letter-spacing: .18em; margin-bottom: 3px;
}

/* 白地の中では罫だけだと埋もれるので、囲みと淡い面を付けて立たせる。
   上端だけ藍を太くして、この案の「海と空の境目」の作りにそろえる。 */
.promo > a {
  border: 1px solid var(--line); border-top: 4px solid var(--ai);
  background: var(--panel); padding: 22px 24px;
  box-shadow: 0 2px 12px rgba(18, 36, 58, .07);
  transition: border-color .15s, box-shadow .15s;
}
.promo > a:hover {
  border-top-color: var(--shu); box-shadow: 0 4px 18px rgba(18, 36, 58, .14);
}
.promo-eyebrow { color: var(--dim); }
.promo-t { color: var(--ai); font-weight: 700; }
.promo-lead { color: var(--sumi); }
.promo-lead b { color: var(--ai); }
.promo-flow::before { background: var(--line); }
.promo-flow li { color: var(--sumi); }
.promo-flow li::before { background: var(--ai); color: #fff; }
.promo-note { color: var(--dim); }
.promo-go { color: var(--ai); }
/* ブログ側は写真が全面に来るので、内側の余白は文字の側だけに持たせる */
.promo-blog > a, .promo-blog .promo-roll { padding: 0; background: var(--panel2); }

/* ---------------------------------------------------------- 下層ページ */
.page { padding: 36px 0 72px; }
.crumb { font-size: 12px; color: var(--dim); margin-bottom: 24px; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--ai); }
.page-h {
  font-family: var(--font-h); font-size: 26px; font-weight: 700; color: var(--ai);
  letter-spacing: .04em; padding-bottom: 14px; border-bottom: 3px solid var(--ai);
  margin-bottom: 26px; display: flex; align-items: baseline; gap: 14px;
}
.page-h span { font-family: var(--font-n); font-size: 11.5px; letter-spacing: .22em; color: var(--dim); }
.page-lead { font-size: 13.5px; margin-bottom: 28px; max-width: 60em; }

.art-date { font-family: var(--font-n); font-size: 13px; letter-spacing: .1em; color: var(--dim); }
.art-h {
  font-family: var(--font-h); font-size: clamp(20px, 3.2vw, 27px); font-weight: 700;
  color: var(--ai); line-height: 1.65; letter-spacing: .02em; margin: 8px 0 20px; text-wrap: pretty;
}
.art-lead { font-size: 14px; color: var(--dim); margin-bottom: 20px; }
.art-fig { margin: 24px 0; border: 1px solid var(--line); }
.art-fig figcaption { font-size: 12px; color: var(--dim); padding: 8px 10px; }
.art-body { font-size: 15px; line-height: 2.2; }
.art-body a { color: var(--ai); }
/* 本文の飾り。編集画面で Ctrl+B / Ctrl+U を押して付ける。 */
.art-body strong { font-weight: 700; color: var(--ai); }
.art-body mark {
  background: linear-gradient(transparent 62%, #ffe680 62%);
  color: inherit; padding: 0 .08em;
}
.pblock + .pblock { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.pblock-h {
  font-family: var(--font-h); font-size: 18px; font-weight: 700; color: var(--ai);
  letter-spacing: .02em; margin-bottom: 12px; padding-left: 12px; border-left: 3px solid var(--ai);
}
.art-cta { margin-top: 34px; }
.art-foot { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }
.art-foot a { color: var(--dim); text-decoration: none; }
.art-foot a:hover { color: var(--ai); }

/* 会社案内 */
.about-grid { display: grid; grid-template-columns: 1fr 380px; gap: 44px; align-items: start; }
.about-read { display: grid; gap: 12px; }
.readcard {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px;
  border: 1px solid var(--line); background: var(--panel); text-decoration: none;
  transition: border-color .15s;
}
.readcard:hover { border-color: var(--ai); }
.readcard-t { font-family: var(--font-h); font-size: 16px; color: var(--ai); }
.readcard-go { margin-left: auto; font-size: 12px; color: var(--ai); }
.profile { font-size: 13.5px; line-height: 1.95; }
.profile dt {
  font-family: var(--font-n); font-size: 11.5px; letter-spacing: .18em;
  color: var(--dim); padding-top: 14px;
}
.profile dd { margin: 2px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--ai); }

/* ---------------------------------------------------------- お問合せ */
.ct-tel {
  border: 1px solid var(--line); background: var(--panel);
  padding: 22px 24px; margin-bottom: 34px; text-align: center;
}
.ct-tel-h { font-family: var(--font-n); font-size: 12px; letter-spacing: .2em; color: var(--dim); }
.ct-tel-no {
  display: block; font-family: var(--font-n); font-size: 40px; font-weight: 600;
  letter-spacing: .04em; color: var(--ai); text-decoration: none; line-height: 1.3;
}
.ct-tel-note { font-size: 12px; color: var(--dim); }

.ct-lead { font-size: 13.5px; margin-bottom: 24px; }
.ct-error {
  border-left: 3px solid var(--shu); background: #fdf2f4;
  padding: 12px 16px; font-size: 13.5px; color: #9c0c22; margin-bottom: 22px;
}
.ct-f { display: block; margin-bottom: 20px; }
.ct-f > span { display: block; font-size: 12.5px; color: var(--dim); margin-bottom: 6px; }
.ct-f > span em {
  font-style: normal; font-size: 11px; color: #fff; background: var(--shu);
  padding: 1px 7px; margin-left: 8px; border-radius: 2px;
}
.ct-f input, .ct-f textarea {
  width: 100%; padding: 11px 13px; font-size: 15px; font-family: inherit;
  border: 1px solid #c3cedb; border-radius: 2px; background: var(--paper); color: var(--ai);
}
.ct-f textarea { line-height: 1.9; resize: vertical; }
.ct-f input:focus, .ct-f textarea:focus { outline: 2px solid var(--ai); outline-offset: 1px; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-note { font-size: 12px; color: var(--dim); line-height: 1.9; margin-bottom: 24px; }
.ct-act { text-align: center; }

/* ---------------------------------------------------------- フッター
   藍の面で締める。会社の住所と連絡先を最後にはっきり置く。 */
.ft { background: var(--ai); color: #cbd8e6; }
.ft-in { display: flex; gap: 48px; padding-top: 40px; padding-bottom: 28px; flex-wrap: wrap; }
.ft-name { font-family: var(--font-h); font-size: 17px; color: #fff; margin-bottom: 10px; }
.ft-addr { font-size: 12.5px; color: #a9bccd; line-height: 2; }
.ft-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-left: auto; align-content: flex-start; }
.ft-nav a { font-size: 12.5px; color: #cbd8e6; text-decoration: none; }
.ft-nav a:hover { color: #fff; }
.copy { border-top: 1px solid rgba(255, 255, 255, .14); text-align: center; font-size: 11px; color: #8fa3b8; padding: 14px 0; }

.spcta { display: none; }

/* ---------------------------------------------------------- スマホ */
@media (max-width: 900px) {
  .msg-in { grid-template-columns: 1fr; gap: 30px; }
  .split, .sec-split .split { grid-template-columns: 1fr; gap: 34px; }
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
  /* 関連サイトの帯は縦に1枚ずつ。6：4のままなので横長に見える。 */
  .promos { grid-template-columns: 1fr; }
  .pgrid, .pgrid-lg { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 390px; }
  .hero-in { padding: 0 24px 22px; }
}
@media (max-width: 700px) {
  .inner { padding: 0 18px; }
  .nav, .hd-tel { display: none; }
  .spmenu { display: block; }
  .logo { font-size: 15px; }
  .sec { padding: 34px 0; }
  .msg-in { padding-top: 34px; padding-bottom: 34px; }
  .ft-in { flex-direction: column; gap: 22px; }
  .ft-nav { margin-left: 0; }
  .hero { min-height: 315px; }
  .hero-in { padding: 0 18px 18px; }
}