@charset "UTF-8";
/* Final compatibility fixes: approved layout, original content and controls. */
.gi-legacy .legacy-content { overflow-wrap: anywhere; min-width: 0; }
.gi-legacy .legacy-content img { max-width: 100%; height: auto; }
.gi-legacy .legacy-content iframe { max-width: 100%; }
.gi-legacy .legacy-content .webmail { width: 100%; }
.gi-legacy .legacy-content select { max-width: 100%; font-size: 16px; }
.gi-legacy .legacy-content pre { overflow-x: auto; max-width: 100%; }
.gi-legacy .legacy-content table { max-width: 100%; }
.gi-legacy .gi-footer__copy .pr { display: block; margin-top: 8px; }
.gi-legacy .legacy-content .container { max-width: 840px; margin: 24px auto; }
.gi-legacy .legacy-content .check-icon { display: block; width: 120px; margin: 0 auto 24px; }
.gi-legacy .legacy-content .btn { display: inline-block; padding: 12px 28px; background: var(--gi-accent); color: #fff; text-decoration: none; }
/* 旧デザインのアコーデオン開閉アイコンの名残（見出しの中の空の <span class="btn">）。上のボタンの設定で赤い四角になるため消す（2026年9月17日） */
.gi-legacy .legacy-content h3 > .btn:empty { display: none; }
.gi-legacy .legacy-data-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.gi-legacy .legacy-data-table th, .gi-legacy .legacy-data-table td { padding: 16px 20px; border: 0; border-bottom: 1px solid var(--gi-line); vertical-align: middle; }
.gi-legacy .legacy-data-table th { background: #edf2f6; color: var(--gi-navy); }
/* 表の欄は上下中央。欄の最後の段落の下余白で文字が上に寄らないようにする（2026年9月17日） */
.gi-legacy .legacy-content td > :first-child, .gi-legacy .legacy-content th > :first-child { margin-top: 0; }
.gi-legacy .legacy-content td > :last-child, .gi-legacy .legacy-content th > :last-child { margin-bottom: 0; }
/* よくある質問の Q・A アイコン。欄が狭く max-width: 100% で幅0になり消えていたため、縮めない（2026年9月17日） */
.gi-legacy .legacy-content th > img[src$="images/q.gif"], .gi-legacy .legacy-content th > img[src$="images/a.gif"] { max-width: none; }
.gi-legacy .legacy-table-region { margin-bottom: 24px; }
/* These existing components depend on display/position rules from the retired CSS. */
.gi-legacy .legacy-content .hoverbox-with-title { max-width: 900px; margin: auto; }
.gi-legacy .legacy-content .hoverbox { position: relative; width: 100%; padding-top: 66.66%; overflow: hidden; }
.gi-legacy .legacy-content .hoverbox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1s ease; }
.gi-legacy .legacy-content .hoverbox img.active { opacity: 1; }
.gi-legacy .legacy-content .text-slide-wrapper { overflow-x: hidden; }
.gi-legacy .legacy-content .text-slide { display: flex; white-space: nowrap; font-size: 50px; opacity: .3; }
.gi-legacy .legacy-content .text-slide span { padding: 0 20px; }
.gi-legacy .legacy-content .works-container { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; margin: 32px 0; }
.gi-legacy .legacy-content .work-item { max-width: 300px; padding: 20px; border: 1px solid var(--gi-line); }
/* Terms are used both as standalone pages and in existing agreement iframes. */
.legacy-embedded .gi-header, .legacy-embedded .gi-footer, .legacy-embedded .gi-pagetop { display: none; }
.legacy-embedded .legacy-layout { width: 100%; padding: 12px 16px; margin: 0; }
.legacy-embedded .legacy-content h1 { margin-top: 0; }
@media (max-width: 767px) {
  .gi-legacy .legacy-indent { display: none; }
  .gi-legacy .legacy-data-table th, .gi-legacy .legacy-data-table td { padding: 12px; }
  .gi-legacy .legacy-data-table--wide { min-width: 760px; }
  .gi-legacy .legacy-table-region:has(> .legacy-data-table--wide)::before { content: "表は左右にスクロールできます"; display: block; position: sticky; left: 0; padding: 8px 0; font-size: 14px; color: var(--gi-sub); }
  .gi-legacy .legacy-content .p-bento__right { padding: 24px; }
  .gi-legacy .legacy-content .agreement-box { padding: 24px 16px; }
}

/* 本文の字下げ（2026年9月17日 テスト中）
   旧ページの本文は <section> の中に見出しと本文が並んでいるだけで、見出しごとのまとまりがない。
   そこで枠全体を右に寄せ、見出しだけを左に戻して「見出し → 本文」の段差を付ける。
   h2 が枠の直下に無いページ（会社情報など独自の枠を持つページ）は対象外。
   幅は下の2つの数字だけで調整できる。
     --gi-indent-body … 本文を下げる幅
     --gi-indent-h3   … h3 を下げる幅（0 にすると h2 と同じ左端） */
.gi-legacy #main > section:not([class]):has(> h2) { --gi-indent-body: 40px; --gi-indent-h3: 20px; padding-left: var(--gi-indent-body); }
.gi-legacy #main > section:not([class]):has(> h2) > :is(h1, h2) { margin-left: calc(var(--gi-indent-body) * -1); }
.gi-legacy #main > section:not([class]):has(> h2) > h3,
.gi-legacy #main > section:not([class]):has(> h2) > .legacy-service > h3 { margin-left: calc(var(--gi-indent-h3) - var(--gi-indent-body)); }
@media (max-width: 767px) {
  .gi-legacy #main > section:not([class]):has(> h2) { --gi-indent-body: 16px; --gi-indent-h3: 8px; }
}