/* 共通CTA帯・フッター（2026リニューアル）
   Figma 01 共通部品：CTA帯 508:6431 ／ 途中のCTA帯 508:6473 ／ フッター 508:6389 ／ SP CTA・フッター 508:7124 */

/* ================= CTA帯 ================= */
.c-ctab {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 21.875rem;
  padding: 4rem 0 0;
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.c-ctab::before { /* 写真の上に紺の乗算 */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 40, 85, .4);
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}
.c-ctab > * { position: relative; }
.c-ctab__body { width: 54.5rem; max-width: 100%; }
.c-ctab .p-cta__subttl { margin-bottom: 1.875rem; font-size: 1.3125rem; line-height: 3.125rem; letter-spacing: .05em; }
.c-ctab .p-cta__subttl-inner::after { bottom: 0.5625rem; }
.c-ctab .p-cta__ttl { margin-bottom: 2rem; padding: 0; font-size: 1.625rem; line-height: 2.8125rem; letter-spacing: .05em; }
.c-ctab .p-cta__btn-wrapper { gap: 1.5rem; }

.c-ctab__btn.c-btn {
  justify-content: flex-end;
  gap: 1.25rem;
  width: 14.875rem;
  min-width: 0;
  height: 4rem;
  padding: 0 1.875rem 0 0;
  border: 0.125rem solid #1e78eb;
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: .1em;
}
.c-ctab__btn.c-btn::after {
  width: 0.8125rem;
  height: 0.64581rem;
  transform: scaleX(-1);
}
.c-ctab__btn--doc.c-btn { background: #fff; color: #1e78eb; }
.c-ctab__btn--doc.c-btn::after { background-image: url("../images/common/cta/arrow-blue.svg"); }
.c-ctab__btn--contact.c-btn { background: #1e78eb; color: #fff; }
.c-ctab__btn--contact.c-btn::after { background-image: url("../images/common/cta/arrow-white.svg"); }
.c-ctab__btn--doc.c-btn { padding-right: 1.875rem; }
/* Figma 269:1114／269:1119：文字は左から（資料請求は左56・98幅の右寄せ＝文字の頭が66、相談するは左60・96幅＝68）、矢印は文字の20右。右側は余る */
@media screen and (min-width: 769px) {
  .c-ctab__btn.c-btn { justify-content: flex-start; padding: 0 0 0 4.125rem; }
  .c-ctab__btn--contact.c-btn { padding-left: 4.25rem; }
}

/* 右端の「効果シミュレーション」 */
.c-ctab__sim {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  width: 15.4375rem;
  height: 20.375rem;
  border-radius: 0.625rem;
  color: #fff;
  text-align: left;
}
.c-ctab__nb { white-space: nowrap; }
.c-ctab__sim-txt { width: 13.0625rem; margin: 0; white-space: nowrap; font-size: 1.25rem; line-height: 1.875rem; letter-spacing: .05em; }
.c-ctab__sim-img { position: relative; width: 11.4375rem; height: 9.6875rem; }
.c-ctab__sim-img img { position: absolute; max-width: none; height: auto; }
.c-ctab__sheet--a { left: 0; top: 0; width: 7.8125rem; }
.c-ctab__sheet--b { left: 3.625rem; top: 1.125rem; width: 7.8125rem; }
.c-ctab__app { width: 2.75rem; }
.c-ctab__app--w1 { left: 6.85938rem; top: 0.25rem; }
.c-ctab__app--w2 { left: 7.76562rem; top: 7.09375rem; width: 2.8125rem; }
.c-ctab__app--x { left: 9.15625rem; top: 7.09375rem; }

/* ページ途中の帯：PCは角丸＋影（ページ末尾・SPは影なし） */
.c-ctab--mid {
  width: calc(100% - 3.5rem);
  max-width: 86.5rem;
  margin-inline: auto;
  border-radius: 1.25rem;
  box-shadow: 0 0.625rem 1.875rem rgba(30, 40, 85, .18);
  overflow: hidden;
}

/* Figma 269:1955：途中の帯の文字・ボタンの列は帯の左から239（帯の中心より17左。右の効果シミュレーションの分） */
@media screen and (min-width: 769px) {
  .c-ctab--mid .c-ctab__body { position: relative; left: -1.0625rem; }
}

@media screen and (max-width: 1100px) {
  .c-ctab__sim { display: none; }
}

@media screen and (max-width: 768px) {
  .c-ctab,
  .c-ctab--mid {
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 26.875rem;
    padding: 2.5rem 1.5rem 2rem;
    border-radius: 0;
    box-shadow: none;
  }
  .c-ctab__body { width: 17.6875rem; }
  .c-ctab .p-cta__subttl { margin-bottom: 1rem; font-size: 0.75rem; line-height: 1.25rem; }
  .c-ctab .p-cta__subttl-inner::after { bottom: -2px; }
  .c-ctab .p-cta__ttl { margin-bottom: 2rem; font-size: 1.125rem; line-height: 2rem; }
  .c-ctab .p-cta__btn-wrapper { gap: 0.75rem; width: 20.3125rem; margin-inline: -1.3125rem; }
  .c-ctab__btn.c-btn {
    width: 9.0625rem;
    height: 2.875rem;
    padding: 0 1.125rem 0 0;
    gap: 1rem;
    border-width: 1px;
    font-size: 0.875rem;
    line-height: 1.625rem;
    letter-spacing: .05em;
  }
  .c-ctab__btn.c-btn::after { width: 0.75rem; height: 0.5625rem; }
  .c-ctab__sim {
    display: flex;
    position: relative; /* 写真の上の色かぶせ（::before）より手前に出す */
    top: auto;
    right: auto;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 0.5rem;
    width: 20.4375rem;
    height: 9rem;
    margin-top: 2rem;
    padding: 0 1rem;
    border: 1px solid #fff;
  }
  .c-ctab__sim-txt { width: auto; font-size: 1rem; line-height: 1.875rem; white-space: nowrap; }
  .c-ctab__sim-img { width: 6.625rem; height: 5.625rem; flex: none; }
  .c-ctab__sheet--a { width: 4.5rem; }
  .c-ctab__sheet--b { left: 2.09375rem; top: 0.65rem; width: 4.5rem; }
  .c-ctab__app { width: 1.5875rem; }
  .c-ctab__app--w1 { left: 3.9625rem; top: 0.14375rem; }
  .c-ctab__app--w2 { left: 4.48438rem; top: 4.08125rem; width: 1.60625rem; }
  .c-ctab__app--x { left: 5.2875rem; top: 4.09375rem; }
}

/* ================= フッター ================= */
.l-gf {
  background: #47505f;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
}
.l-gf a { color: inherit; }
.l-gf ul { margin: 0; padding: 0; list-style: none; }
.l-gf li { margin: 0; line-height: 1.5rem; }
.l-gf p { margin: 0; }
.l-gf__inner {
  position: relative;
  display: grid;
  grid-template-columns: 22.5625rem 1fr 12rem;
  grid-template-areas:
    "brand nav btns"
    "btm   btm btns";
  max-width: 90rem;
  min-height: 35.625rem;
  margin-inline: auto;
  padding: 4rem 6.875rem 1.875rem 5.8125rem;
}
.l-gf__brand { grid-area: brand; display: flex; flex-direction: column; gap: 3.25rem; }
.l-gf__logo { display: block; width: 11.9375rem; }
.l-gf__logo img { width: 100%; height: auto; }
.l-gf__sns { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 1.0625rem; font-size: 0.875rem; line-height: 1.5rem; letter-spacing: .05em; }
.l-gf__sns img { width: 1.25rem; height: 1.25rem; }

.l-gf__nav { grid-area: nav; display: flex; gap: 0; }
.l-gf__col { display: flex; flex-direction: column; gap: 2rem; }
.l-gf__col--service { width: 16.9375rem; } /* Figma 508:6389：列の頭は 454・725・905 */
.l-gf__col:nth-child(2) { width: 11.25rem; }
.l-gf__col--small { width: 7.5rem; }
.l-gf__head, .l-gf__single { font-size: 0.875rem; line-height: 1.5rem; letter-spacing: .05em; }
.l-gf__single { letter-spacing: .1em; line-height: 1.625rem; }
.l-gf__group { display: flex; flex-direction: column; gap: 1rem; }
.l-gf__label { margin: 0; font-size: 0.75rem; line-height: 1.5rem; letter-spacing: .05em; color: #7c818a; }
.l-gf__group ul { display: flex; flex-direction: column; gap: 1rem; }
.l-gf__group li a { font-size: 0.875rem; line-height: 1.5rem; letter-spacing: .05em; white-space: nowrap; }
.l-gf__small { display: flex; flex-direction: column; gap: 1rem; }
.l-gf__small a { font-size: 0.75rem; line-height: 1.5rem; letter-spacing: .05em; white-space: nowrap; }
.l-gf__small--sp { display: none !important; }

.l-gf__btns { grid-area: btns; display: flex; flex-direction: column; gap: 1.25rem; width: 12rem; }
.l-gf__btn.c-btn {
  justify-content: center;
  gap: 1.125rem;
  width: 12rem;
  min-width: 0;
  height: 4rem;
  padding: 0;
  border: 0.125rem solid #1e78eb;
  border-radius: 3.125rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: .1em;
}
.l-gf__btn.c-btn::after { width: 0.8125rem; height: 0.64581rem; transform: scaleX(-1); }
.l-gf__btn--doc.c-btn { background: #fff; color: #1e78eb; }
.l-gf__btn--doc.c-btn::after { background-image: url("../images/common/cta/arrow-blue.svg"); }
.l-gf__btn--contact.c-btn { background: #1e78eb; color: #fff; }
.l-gf__btn--contact.c-btn::after { background-image: url("../images/common/cta/arrow-white.svg"); }

.l-gf__btm { grid-area: btm; align-self: end; display: flex; flex-direction: column; gap: 1.25rem; padding-left: 1.0625rem; }
.l-gf__policy { font-size: 0.875rem; line-height: 1.5rem; letter-spacing: .05em; }
.l-gf__copy { margin: 0; font-size: 1rem; line-height: 1rem; letter-spacing: .05em; }
.l-gf__copy small { font-size: inherit; }

@media (hover: hover) {
  .l-gf a:hover { opacity: .7; }
  .l-gf__btn.c-btn:hover { opacity: .8; }
}

@media screen and (max-width: 1200px) {
  .l-gf__inner { grid-template-columns: 16.25rem 1fr 12rem; padding-inline: 2.5rem; }
}

@media screen and (max-width: 768px) {
  .l-gf__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nav   nav"
      "brand btns"
      "btm   btm";
    row-gap: 3.75rem;
    min-height: 0;
    padding: 1.75rem 1.5rem 1.875rem;
  }
  .l-gf__brand { align-self: start; padding-top: 4.5rem; gap: 0; }
  .l-gf__logo { width: 10rem; }
  .l-gf__sns { display: none; }
  .l-gf__nav { justify-content: space-between; }
  .l-gf__col { gap: 1rem; }
  .l-gf__col--service { width: auto; gap: 1.5rem; }
  .l-gf__col:nth-child(2) { width: 6.875rem; }
  .l-gf__col--small { display: none; }
  .l-gf__small--sp { display: flex !important; }
  .l-gf__head { font-size: 0.75rem; }
  .l-gf__single { font-size: 0.75rem; letter-spacing: .1em; }
  .l-gf__group { gap: 0.5rem; }
  .l-gf__group ul { gap: 0.5rem; }
  .l-gf__group li a, .l-gf__small a { font-size: 0.75rem; }
  .l-gf__label { font-size: 0.6875rem; }
  .l-gf__btns { width: 8.125rem; gap: 1rem; }
  .l-gf__btn.c-btn { width: 8.125rem; height: 2.5rem; gap: 0.875rem; border-width: 0; font-size: 0.75rem; line-height: 1.34375rem; letter-spacing: .05em; }
  .l-gf__btn.c-btn::after { width: 0.75rem; height: 0.5625rem; }
  .l-gf__btm { flex-direction: row; justify-content: space-between; padding-left: 0; font-size: 0.75rem; }
  .l-gf__btm { display: grid; grid-template-columns: 1fr auto; gap: 0.375rem; }
  .l-gf__policy { font-size: 0.75rem; }
  .l-gf__copy { grid-column: 1; font-size: 0.75rem; line-height: 1.5rem; }
}

/* 帯は追従する目次（.c-toc__wrapper z-index:3）より手前に出す */
.c-ctab { z-index: 4; }

/* 本文カラム内など帯が狭いときは、右端の「効果シミュレーション」を出さない（PC） */
.c-ctab { container-type: inline-size; }
@media screen and (min-width: 769px) {
  @container (max-width: 68.75rem) {
    .c-ctab__sim { display: none; }
  }
}

/* SP：本文カラム内に置いた途中の帯も、画面幅いっぱいに広げる（Figma SP 508:7166） */
@media screen and (max-width: 768px) {
  .c-ctab--mid { width: 100vw; max-width: none; margin-left: calc(50% - 50vw - var(--ctab-shift, 0px)); margin-right: calc(50% - 50vw + var(--ctab-shift, 0px)); }
}

/* 横はみ出し対策（事例スライダーの右側のカードが画面外に伸び、横スクロールが出ていた。本番からある不具合）。clip は追従要素を壊さない */
.l-all__wrapper { overflow-x: clip; }

/* CTA帯の写真（Figma 508:6395・SP 508:7012：ガラス扉越しのオフィス）。全ページの帯で共通 */
.c-ctab.l-cta { background: url("../images/common/cta/bg-pc.jpg") center top / cover no-repeat; }
@media screen and (max-width: 768px) {
  .c-ctab.l-cta { background: url("../images/common/cta/bg-sp.jpg") center top / cover no-repeat; }
}

/* 本文カラムの中に置いた途中の帯も、PCでは画面幅いっぱい（左右28px残し・最大1384px）に広げる（Figma SNS 269:1926 ほか） */
@media screen and (min-width: 769px) {
  /* 親カラムの中心が画面の中心からずれている（サービスページは左に目次がある）分を --ctab-shift で戻し、画面の中央に置く。値は js/header-2026.js が入れる */
  .c-ctab--mid { width: min(86.5rem, calc(100vw - 3.5rem)); max-width: none; margin-left: calc(50% - min(43.25rem, calc(50vw - 1.75rem)) - var(--ctab-shift, 0px)); margin-right: calc(50% - min(43.25rem, calc(50vw - 1.75rem)) + var(--ctab-shift, 0px)); }
}

/* 企業ロゴの帯（TOP以外でも流す。top.css と同じ指定） */
.p-logo-slider__wrapper { display: flex; overflow: hidden; }
.p-logo-slider { display: flex; will-change: transform; }
.p-logo-slider.--js-odd { animation: 50s linear -25s infinite normal none running logo-scroll-odd; }
.p-logo-slider.--js-even { animation: 50s linear 0s infinite normal none running logo-scroll-even; }
.p-logo-slider__wrapper.--row1 .p-logo-slider { animation-delay: -37.5s; }
.p-logo-slider__wrapper.--row1 .p-logo-slider.--js-even { animation-delay: -12.5s; }
.p-logo-slider__list { display: flex; }
.p-logo-slider__item { display: flex; flex-shrink: 0; justify-content: center; width: max(6.75rem, calc(100vw / (var(--n, 20) - 1))); }
.p-logo-slider__item img { width: 6.75rem; height: 3.75rem; object-fit: contain; }
@keyframes logo-scroll-odd { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes logo-scroll-even { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } }
@media (prefers-reduced-motion: reduce) { .p-logo-slider.--js-odd, .p-logo-slider.--js-even { animation: none; } }

/* 下層の見出し帯（PC）。Figmaの座標に合わせる：黒背景（サービス一覧・支援事例・制作事例・資料DL 269:7789）は英字見出しが上259・帯の高さ400 */
@media screen and (min-width: 769px) {
  .l-lower-mv.--color-reverse { padding-top: 11.1875rem; } /* 10/10谷「縦幅を小さく」：Figmaの400→320（英字は上179） */
}

/* SP CTA帯（Figma 387:4134）：上40、CONTACT（行20・箱23）の下16で本文（18px・行32）、本文の下32でボタン、ボタンの下32で効果シミュレーション枠。
   既存の .l-cta 系の指定が padding・行の高さを上書きしていたので、.c-ctab.l-cta で指定し直す */
@media screen and (max-width: 768px) {
  .c-ctab.l-cta { padding-top: 2.5rem; padding-bottom: 1.79rem; }
  .c-ctab.l-cta .p-cta__subttl { margin-bottom: 1.2125rem; line-height: 1.25rem; }
  .c-ctab.l-cta .p-cta__ttl { margin-bottom: 2rem; line-height: 2rem; }
}

/* 目次が途中のCTA帯と重なっている間は隠す（js/header-2026.js が is-under-band を付ける） */
.c-toc__wrapper { transition: opacity .2s; }
.c-toc__wrapper.is-under-band { opacity: 0; pointer-events: none; }

/* 目次のあるページ（サービス下層）の途中のCTA帯は、目次の列にかけず本文の列の左端から右へ広げる。
   目次を隠さずに済むようにする（10/10谷「CTAの所で左側が消えるのが気になる」）。--ctab-right は js/header-2026.js */
@media screen and (min-width: 769px) {
  .l-lower-service .c-ctab--mid { width: auto; max-width: none; margin-left: 0; margin-right: calc(-1 * var(--ctab-right, 0px)); }
}

/* 白背景の下層見出し帯（企業情報・採用情報・お知らせ・イベント・お問い合わせ・プライバシーポリシー）も、黒背景と同じ縦幅にそろえる（英字の上179・10/11谷） */
@media screen and (min-width: 769px) {
  .l-main .l-lower-mv:not(.--color-reverse):has(.p-lower-mv__hgroup-txt.u-font__en) { padding-top: 11.1875rem; }
}


/* 10/13谷：サービス下層の支援事例・制作事例のスライドの写真は比率をそろえる（写真ごとの比率で高さが変わらないように・全サービスページ共通） */
.p-lower-service__example-article-img { width: 100%; height: auto; aspect-ratio: 380 / 238; object-fit: cover; }

/* 10/14谷「SPのここ縦幅改修していない？」：下層ページ上部の帯をSPでもPCと同じく約8割に（250→約200）。英字見出しはヘッダーのすぐ下から */
@media screen and (max-width: 768px) {
  body .l-main .l-lower-mv,
  body .l-main .l-lower-mv.--color-reverse,
  body .l-main .l-lower-mv:not(.--color-reverse):has(.p-lower-mv__hgroup-txt.u-font__en) { padding-top: 6.75rem; }
}

/* 10/14 Astra監査（改行）：句末の1〜2文字だけが次の行に落ちないようにする。
   text-wrap-style は継承するので l-main に1回置く（:where で詳細度0。個別に wrap/balance を指定した要素はそちらを優先）。
   見出し・短い項目は語の途中で切らない（auto-phrase）。style.css の p,li,dt… の word-break に勝つよう、こちらは .l-main 付きで書く。
   本文の段落は行末をそろえるため auto-phrase にしない。 */
:where(.l-main) { text-wrap-style: pretty; }
.l-main :is(h1, h2, h3, h4, dt, .p-inner-svc__faq-q, .p-news__card-ttl, .p-news__modal-ttl, .p-lower-service__reason-item-ttl, .p-lower-service__overview-cont-item, .p-job__intro-msg p), .l-main :is(h1, h2, h3, h4, dt, .p-inner-svc__faq-q, .p-news__card-ttl, .p-news__modal-ttl, .p-lower-service__reason-item-ttl, .p-lower-service__overview-cont-item, .p-job__intro-msg p) * { word-break: auto-phrase; } /* style.css の * {word-break} が子要素ごとに戻すので子にも指定 */
/* 2〜3行で終わる短い項目は行の長さもそろえる（「メラメ／ラと」「9／階」「濃／い。」対策） */
.l-main :is(.p-inner-svc__cases td p, .p-single__bullet-item, .p-overview__ditem, .p-service__cont-card-txt, .p-service__item-txt) { text-wrap: balance; }
.l-main :is(.p-inner-svc__cases td p, .p-single__bullet-item, .p-overview__ditem, .p-service__cont-card-txt, .p-service__item-txt), .l-main :is(.p-inner-svc__cases td p, .p-single__bullet-item, .p-overview__ditem, .p-service__cont-card-txt, .p-service__item-txt) * { word-break: auto-phrase; }
.p-inner-svc .p-lower-service__overview-cont-item .u-color__accent { display: inline-block; } /* 強調の句を途中で折らない */
/* SPのメール欄の注記（js/form.js が作る） */
.c-form__email-note { display: block; margin-top: 0.375rem; font-size: 0.75rem; line-height: 1.5; color: #777; }
.c-form__email-note[hidden] { display: none; }