@charset "utf-8";
/* =========================================================================
   25_legal（業種テンプレ30／複数ページ型）の版面を移植したぶん
   指示 2026-09-17：ヘッダー・トップのヒーロー・そのすぐ下の紹介・導入の流れページを
   「リンクのデザインを完全に再現」

   ・原本（17-desamis）の13本は1バイトも触らない。このファイルを足すだけ。
   ・色は白×黒テーマ（mono.css）に合わせて置き換えた。元の緑との対応は下の表のとおり。
   ・書体はこのサイトのもの（和文 Zen Kaku Gothic New／欧文 Montserrat）を使っている。
     参考は Noto Sans JP + Jost なので、欧文の字面がわずかに違う。
   ・接頭辞は `lg-`。寸法は参考の実測値をそのまま使っている。
   ========================================================================= */

:root {
  --lg-ink:   #1a1a1a;        /* 参考 --c-ink #1b3a2b */
  --lg-key:   #1a1a1a;        /* 参考 --c-forest #1e4636（ボタン・バー） */
  --lg-deep:  #000000;        /* 参考 --c-deep #132e22 */
  --lg-sub:   #8a8a8a;        /* 参考 --c-moss #83a98f（小さいラベル） */
  --lg-plate: #e4e4e4;        /* 参考 --c-leaf #b7d8c1（写真の下敷き・罫） */
  --lg-mist:  #f0f0f0;        /* 参考 --c-mist #e8f6ec */
  --lg-mist2: #f7f7f7;        /* 参考 --c-mist-soft #f2faf4 */
  --lg-line:  #e5e5e5;        /* 参考 --c-line #dfe9e2 */
  --lg-rail:  110px;
  --lg-innerw: 1000px;

  /* ヒーローと紹介の寸法。スマホでもPCと同じ構成のまま、この値だけを画面幅に合わせて縮める */
  --lg-open-pad:  0px;      /* ヒーローの上の余白（スマホはロゴとメニューの分だけ空ける） */
  --lg-open-h:    min(1050px, 72.9vw);
  --lg-open-hmin: 620px;
  --lg-greet-col: 395px;    /* 紹介の写真の列 */
  --lg-greet-ml:  85px;     /* 写真の左の間 */
  --lg-greet-mr:  -65px;    /* 写真が版面から右にはみ出す量 */
  --lg-greet-pr:  57px;     /* 本文の右の間（縦組みラベルが入る） */
  --lg-cross-r:   398px;   /* 本文と写真の間に立てる1pxの縦罫（参考の実測値） */
  --lg-cross-h:   250px;
}

/* ---------------------------------------------------------------- 共通 */
.lg-wrap {
  width: 100%;
  max-width: var(--lg-innerw);
  margin-inline: auto;
  padding-inline: 20px;
}
.lg-vt { writing-mode: vertical-rl; text-orientation: upright; }

.lg-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.lg-reveal.is-in { opacity: 1; transform: none; }

/* =========================================================================
   ヘッダー（右上のロゴ＋左の縦レール／スマホはバーガー＋ドロワー）
   ========================================================================= */
.lg-brand {
  position: absolute;
  top: 80px;
  right: 47px;
  z-index: 40;
  line-height: 1;
  text-align: right;
}
.lg-brand__logo { display: block; width: 130px; height: 28px; margin-left: auto; }
.lg-brand__en {
  display: block;
  margin-top: 10px;
  font-family: var(--f-en);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .32em;
  line-height: 1;
  color: var(--lg-sub);
}

.lg-rail {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 45;
  width: var(--lg-rail);
  height: 100vh;
  padding: 80px 0 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  pointer-events: none;
}
.lg-rail > * { pointer-events: auto; }

.lg-rail__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}
.lg-rail__link {
  position: relative;
  display: block;
  padding-right: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--lg-ink);
  transition: color .3s var(--ease);
}
.lg-rail__link .lg-vt { line-height: 1; }
.lg-rail__link::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--lg-key);
  transition: height .4s var(--ease);
}
.lg-rail__link[aria-current="page"]::before,
.lg-rail__link:hover::before { height: 100%; }
.lg-rail__link:hover { color: var(--lg-deep); }

.lg-rail__tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
}
.lg-rail__mail {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--lg-key);
  color: #fff;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.lg-rail__mail:hover { background: var(--lg-deep); transform: translateY(-2px); }
.lg-rail__mail svg { display: block; width: 24px; height: 24px; }

.lg-rail__fee {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--lg-ink);
}
.lg-rail__fee span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--lg-key);
  border-radius: 50%;
  font-family: var(--f-en);
  font-size: 17px;
  line-height: 1;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.lg-rail__fee:hover span:first-child { background: var(--lg-key); color: #fff; }
.lg-rail__feeTxt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}

/* 画面の丈が低いときは間隔を詰める（参考と同じ） */
@media screen and (min-width: 1025px) and (max-height: 840px) {
  .lg-rail { padding: 56px 0 36px; }
  .lg-rail__list { gap: 22px; }
  .lg-rail__tools { gap: 14px; }
}

/* ---------- スマホのヘッダー ---------- */
.lg-burger {
  position: fixed;
  top: 20px;
  right: 18px;
  z-index: 70;
  width: 48px;
  height: 48px;
  display: none;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, .92);
  cursor: pointer;
}
.lg-burger.is-open { background: transparent; }
.lg-burger span {
  position: absolute;
  left: 7px;
  width: 34px;
  height: 1.5px;
  background: var(--lg-ink);
  transition: transform .38s var(--ease), opacity .28s var(--ease), background .3s var(--ease);
}
.lg-burger.is-open span { background: #fff; }
.lg-burger span:nth-child(1) { top: 16px; }
.lg-burger span:nth-child(2) { top: 24px; }
.lg-burger span:nth-child(3) { top: 32px; }
.lg-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(21deg); }
.lg-burger.is-open span:nth-child(2) { opacity: 0; }
.lg-burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-21deg); }

.lg-drawer {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: var(--lg-key);
  color: #fff;
  padding: 96px 30px 48px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.lg-drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.lg-drawer__list { border-top: 1px solid rgba(255, 255, 255, .16); }
.lg-drawer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.lg-drawer__list a span {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .62);
}
.lg-drawer__foot {
  margin-top: 34px;
  display: grid;
  gap: 10px;
  font-size: 14px;
}
.lg-drawer__cta {
  font-family: var(--f-en);
  font-size: 26px;
  letter-spacing: .04em;
  font-weight: 500;
}

/* =========================================================================
   ボタン
   ========================================================================= */
.lg-pill {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 26px 0 30px;
  border: 1px solid var(--lg-key);
  border-radius: 6px;
  color: var(--lg-key);
  background: transparent;
  transition: background .4s var(--ease);
}
.lg-pill:hover { background: var(--lg-mist); }
.lg-pill__label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
.lg-pill__ar { display: grid; place-items: center; transition: transform .4s var(--ease); }
.lg-pill__ar svg { display: block; width: 26px; height: 8px; }
.lg-pill:hover .lg-pill__ar { transform: translateX(5px); }

/* =========================================================================
   トップのヒーロー
   ========================================================================= */
.lg-open { position: relative; padding-top: var(--lg-open-pad); }
/* 写真・コピー・小さい写真はこの中の%で置く（上の余白の影響を受けない） */
.lg-open__stage {
  position: relative;
  height: var(--lg-open-h);
  min-height: var(--lg-open-hmin);
}
.lg-open__photo {
  position: absolute;
  top: 0;
  left: var(--lg-rail);
  width: 62.1%;
  height: 88.8%;
  overflow: hidden;
}
.lg-open__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: lg-zoom 1.6s var(--ease) both;
}
@keyframes lg-zoom {
  from { transform: scale(1.06); }
  to   { transform: none; }
}
.lg-open__copy {
  position: absolute;
  top: 44.4%;
  left: calc(var(--lg-rail) + 31.05%);
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  flex-direction: row-reverse;
  gap: 12px;
  margin: 0;
  font-size: 22.5px;
  font-weight: 700;
  letter-spacing: .10em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 22px rgba(0, 0, 0, .55), 0 0 6px rgba(0, 0, 0, .3);
}
.lg-open__copy b {
  font-weight: 700;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
}
.lg-open__copy b:nth-child(2) { margin-top: 20px; }
.lg-open__copy b:nth-child(3) { margin-top: 42px; }

.lg-open__sub {
  position: absolute;
  left: calc(var(--lg-rail) + 54.77%);
  top: 19.5%;
  width: 22.0%;
  height: 42.0%;
}
.lg-open__plate {
  position: absolute;
  inset: -19px -29px 0 -22px;
  background: var(--lg-plate);
  transform: rotate(4.2deg);
  transform-origin: 50% 100%;
}
.lg-open__sub img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
   トップのヒーロー直下（会社紹介）
   ========================================================================= */
.lg-greet { position: relative; padding: 30px 0 130px; }
.lg-greet .lg-wrap { position: relative; }
.lg-greet__grid {
  display: grid;
  grid-template-columns: 1fr var(--lg-greet-col);
  column-gap: 0;
  align-items: start;
}
.lg-greet__photo {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  margin: 0 var(--lg-greet-mr) 0 var(--lg-greet-ml);
  padding-top: 30px;
}
.lg-greet__photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 400 / 520;
  object-fit: cover;
  transform: rotate(-3.4deg);
}
.lg-greet__plate {
  position: absolute;
  right: -18px;
  top: 0;
  width: 92%;
  height: 88%;
  background: var(--lg-plate);
  transform: rotate(6deg);
}
.lg-greet__body {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  padding: 40px var(--lg-greet-pr) 0 0;
}
.lg-greet__body p.lg-greet__label {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
}
.lg-greet__ttl {
  margin: 0;
  font-size: 23.4px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
}
.lg-greet__body p {
  margin: 26px 0 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 2;
}
.lg-greet__btn { margin-top: 60px; }
.lg-greet__cross {
  position: absolute;
  right: var(--lg-cross-r);
  bottom: -20px;
  width: 1px;
  height: var(--lg-cross-h);
  background: var(--lg-line);
}

/* =========================================================================
   下層ページ（導入の流れ）
   ========================================================================= */
.lg-ph { position: relative; padding: 232px 0 96px; }
.lg-ph .lg-wrap { position: relative; z-index: 1; }
.lg-ph::before {
  content: "";
  position: absolute;
  right: 17.8%;
  top: 0;
  width: 20.2%;
  height: 484px;
  background: var(--lg-mist);
  border-radius: 0 0 0 100px;
}
.lg-ph__in {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 40px;
  align-items: center;
  margin: 0;
}
.lg-ph__label,
.lg-ph__en { display: block; }
.lg-ph__label {
  justify-self: start;
  padding: 12px 0 12px 13px;
  border-left: 1px solid var(--lg-ink);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
}
.lg-ph__en {
  font-family: var(--f-en);
  font-size: 46px;
  font-weight: 500;
  letter-spacing: .09em;
  line-height: 1.1;
}
.lg-ph__txt { margin: 30px 0 0; font-size: 17px; line-height: 1.9; }
.lg-crumbs {
  position: relative;
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.6px;
  font-weight: 700;
  color: var(--lg-sub);
}
.lg-crumbs a:hover { color: var(--lg-deep); }

.lg-sec { padding: 96px 0; }
.lg-sec--mist { background: var(--lg-mist2); }
.lg-hd { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: .05em; line-height: 1.5; }
.lg-hd + .lg-txt { margin-top: 24px; }
.lg-txt { margin: 0; font-size: 16.5px; line-height: 2; }
.lg-txt + .lg-txt { margin-top: 22px; }

.lg-steps { display: grid; gap: 0; }
.lg-step {
  position: relative;
  display: grid;
  grid-template-columns: 152px 1fr;
  column-gap: 44px;
  padding: 42px 0 46px;
  border-bottom: 1px solid var(--lg-line);
}
.lg-step:first-child { border-top: 1px solid var(--lg-line); }
.lg-step__no {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--f-en);
  font-size: 15px;
  letter-spacing: .16em;
  line-height: 1;
  color: var(--lg-sub);
}
.lg-step__no b { font-size: 42px; font-weight: 500; line-height: 1; color: var(--lg-key); }
.lg-step__ttl { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.lg-step__txt { margin: 16px 0 0; font-size: 16px; line-height: 1.9; }

.lg-ticks { display: grid; gap: 14px; margin-top: 26px; }
.lg-ticks li {
  position: relative;
  padding-left: 30px;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.8;
}
.lg-ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 14px;
  height: 1px;
  background: var(--lg-plate);
}

.lg-callout {
  margin-top: 40px;
  padding: 30px 34px;
  background: var(--lg-mist);
  border-radius: 12px;
  font-size: 15.5px;
  line-height: 1.9;
}
.lg-callout strong { font-weight: 700; }
.lg-links { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 18px; }

/* =========================================================================
   1025〜1240px：版面を縮めて左のレールに文字が重ならないようにする（参考と同じ手）
   ========================================================================= */
@media screen and (min-width: 1025px) and (max-width: 1240px) {
  :root { --lg-innerw: min(1000px, calc(100vw - 280px)); }
  .lg-greet__btn { margin-top: 32px; }
}
/* 原本の版面（1200px）も同じ考えでレールを避ける */
@media screen and (min-width: 1025px) and (max-width: 1420px) {
  .av-wrap, .av-wrap-n { max-width: calc(100% - 280px); }
}

/* =========================================================================
   〜1024px：レールをやめてバーガー＋ドロワー
   ========================================================================= */
@media screen and (max-width: 1024px) {
  :root { --lg-rail: 0px; --lg-innerw: 1000px; }
  .lg-wrap { padding-inline: 26px; }

  .lg-rail { display: none; }
  .lg-burger { display: block; }

  .lg-brand { top: 26px; left: 26px; right: auto; text-align: left; z-index: 20; }
  .lg-brand__logo { width: 104px; height: 22px; margin-left: 0; }
  .lg-brand__en { margin-top: 6px; font-size: 8px; letter-spacing: .26em; }

  /* ★ヒーローと紹介は PC と同じ構成のまま（指示 2026-09-18）。
     組み方（写真の位置・縦組みコピー・傾いた小さい写真・文章の左＋写真の右）は一切変えず、
     寸法のトークンだけを画面幅に合わせて縮める。上のロゴとメニューの分だけ余白を足す。 */
  :root {
    --lg-open-pad: 92px;
    --lg-greet-col: clamp(116px, 33vw, 300px);
    --lg-greet-ml:  clamp(10px, 4vw, 40px);
    --lg-greet-mr:  0px;     /* 版面からはみ出させない（傾いた下敷きの分だけで右端に届く） */
    --lg-greet-pr:  clamp(22px, 4.5vw, 46px);
    --lg-cross-r:   calc(var(--lg-greet-col) + 18px);
    --lg-cross-h:   170px;
  }

  /* 写真は幅が狭くなるほど左右が切り取られて人物が中央に寄る＝縦組みのコピーと重なるので、
     切り出しの中心を右にずらして人物を左に置く（※いまの写真は仮。差し替えたら要調整） */
  .lg-open__photo img { object-position: 86% center; }
  .lg-open__copy { font-size: 21px; }
  .lg-open__copy b:nth-child(2) { margin-top: 16px; }
  .lg-open__copy b:nth-child(3) { margin-top: 34px; }

  .lg-greet { padding: 40px 0 62px; }
  .lg-greet__photo { padding-top: 16px; }
  .lg-greet__plate { right: 0; }
  .lg-greet__body { padding-top: 22px; }
  .lg-greet__body p.lg-greet__label { font-size: 13px; letter-spacing: .10em; }
  .lg-greet__ttl { font-size: 19px; line-height: 1.4; }
  .lg-greet__body p { margin-top: 22px; font-size: 13.8px; line-height: 2; }
  .lg-greet__btn { margin-top: 30px; }

  .lg-ph { padding: 148px 0 62px; }
  .lg-ph::before { left: auto; right: 0; width: 46%; height: 300px; border-radius: 0 0 0 70px; }
  .lg-ph__in { grid-template-columns: 1fr; justify-items: center; row-gap: 22px; text-align: center; }
  .lg-ph__label { border-left: 0; border-right: 1px solid var(--lg-ink); padding: 12px 13px; font-size: 19px; }
  .lg-ph__en { font-size: 28px; }
  .lg-ph__txt { margin-top: 22px; font-size: 14.5px; text-align: left; }
  .lg-crumbs { justify-content: flex-start; }

  .lg-sec { padding: 62px 0; }
  .lg-hd { font-size: 20px; }
  .lg-txt { font-size: 15px; line-height: 1.95; }

  .lg-step { grid-template-columns: 1fr; row-gap: 14px; padding: 30px 0 32px; }
  .lg-step__no b { font-size: 32px; }
  .lg-step__ttl { font-size: 17.5px; }
  .lg-step__txt { font-size: 14.6px; }

  .lg-callout { padding: 24px 22px; font-size: 14.4px; }
  .lg-links { gap: 14px; }
  .lg-pill__label { font-size: 13px; }
}

@media screen and (max-width: 600px) {
  :root { --lg-open-hmin: 480px; }
  .lg-open__copy { font-size: 19px; }
  .lg-open__copy b:nth-child(2) { margin-top: 13px; }
  .lg-open__copy b:nth-child(3) { margin-top: 28px; }
  /* 幅が足りないと3行になるので、文節で折る（「…みるこ／とから」と割れないように） */
  .lg-greet__ttl { font-size: 17.5px; word-break: auto-phrase; }
}

@media screen and (max-width: 430px) {
  :root { --lg-open-hmin: 450px; }
  .lg-open__copy { font-size: 17.5px; }
  .lg-ph__en { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-open__photo img { animation: none; }
  .lg-reveal { opacity: 1; transform: none; transition: none; }
}