@charset "UTF-8";
/* =========================================================
   サイト共通の微調整（全ページで読み込み）
   - assets/css/style.css はSCSSのコンパイル成果物のため直接編集せず、ここで上乗せする。
   - 依存は oneconnect-style（style.css の後に読み込み、同詳細度を読み込み順で上書き）。
   ========================================================= */

/* 共通ヘッダー：PCグローバルナビの文字を太く（500→600）。
   フォントは Montserrat のまま（font-family は変更しない）。
   ※ Montserrat 600 は Google Fonts で読込済み。 */
.header__link {
  font-weight: 600;
}

/* ===== 【2】ヘッダー高さ：PC=80px / SP=60px =====
   高さは .header__inner の min-height で決まる（CONTACTは stretch で全高に追従）。
   SP は既に 3.75rem=60px のため据置、PC のみ 5.25rem(84px)→5rem(80px)。 */
@media screen and (min-width: 768px) {
  .header__inner {
    min-height: 5rem; /* 80px */
  }
}

/* ===== 【3】SPメニュー（drawer）：ナビ項目の間隔を 32px に ===== */
.drawer__item {
  margin-top: 2rem; /* 24px→32px。:first-child の 0 は据置 */
}

/* ===== 【4】SPフッターナビ：中央揃え＋項目間隔 32px（SP限定） =====
   PC（@min-width:768px の横並び）は据置。 */
@media screen and (max-width: 767.98px) {
  .footer__list {
    align-items: center;
    gap: 2rem; /* 25px→32px */
  }
}

/* =========================================================
   2026-06-30 追加対応
   ========================================================= */

/* ===== 〔追加1〕ヘッダー左端 padding：PCのみ 60px（ロゴ左の余白） =====
   高さ80px・align-items:center は維持。SP は据置（20px）。 */
@media screen and (min-width: 768px) {
  .header__inner {
    padding-left: 60px;
  }
}

/* ===== 〔追加2〕フッターロゴをトップへのリンク化（href="/" は footer.php 側） ===== */
.footer__logo a {
  display: inline-block;
}

/* ===== 〔追加3〕ヘッダー CONTACT の文字太さを他ナビ（600）に揃える =====
   背景・余白・矢印は維持、font-weight のみ 500→600。 */
.header__contact {
  font-weight: 600;
}

/* =========================================================
   2026-07-05 追加対応：PCヘッダー(白) を Figma(node 2549-6404) に合わせて調整
   - Figma参照スクリーンショットを正とする。style.css(SCSS成果物)は無改変、ここで上乗せ。
   - 対象はPCヘッダーのみ。SPヘッダー／FV以降／アニメーションは未着手。
   ========================================================= */

/* 〔H1〕ナビ文字：字間 0.2em(=2.8px/14px)・色 #2b2b2b（Figma準拠） */
.header__link {
  letter-spacing: 0.2em;
  color: #2b2b2b;
}

/* 〔H2〕アクティブ（CONCEPT）とアンダーライン：ブランドカラー #1178a8 */
.header__link.is-current {
  color: #1178a8;
}
.header__link::after {
  background-color: #1178a8;
}

@media screen and (min-width: 768px) {
  /* 〔H3〕CONTACT を全高(stretch)→上下中央のインセット配置にするため中央揃え */
  .header {
    align-items: center;
  }

  /* 〔H3b〕ヘッダー高さを Figma 通り厳密に80pxへ。
     既存は inner の上下padding(14px)＋ナビ行高で約93pxに膨らむため、
     高さを固定し上下paddingを除去（min-height維持・中央揃えで各要素をy中央に）。 */
  .header__inner {
    height: 80px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* 〔H4〕ロゴを Figma のロゴ位置(x≈123px)へ左固定。
     右寄せ(margin-left:auto)だとナビ幅のレンダリング差がロゴ位置に転嫁されるため、
     ロゴ左端を padding-left で固定し、ナビは自然に右へ流す（各要素がFigma座標に一致）。 */
  .header__inner {
    padding-left: 128px;
    padding-right: 50px;
  }

  /* 〔H5〕ロゴ→ナビ間（Figma 86px）。Montserratのレンダリング差でナビが約3px左に出るため
     89pxに微調整し、ナビ各項目のx座標をFigmaに一致させる。 */
  .header__nav {
    margin-left: 89px;
  }

  /* 〔H5b〕アクティブ項目(CONCEPT)：Figmaでは下線幅=103pxで項目がテキストより広く、
     テキストは中央寄せ。項目幅103px・中央寄せにして後続ナビの開始位置をFigmaに合わせる。
     （下線 ::after は left:0/right:0 のため自動的に103px幅になる＝Figma下線105pxと一致） */
  .header__link.is-current {
    width: 103px;
    text-align: center;
  }

  /* 〔H7〕ナビ項目間：Figma gap-53。CSSのletter-spacing(0.2em=2.8px)は各項目の
     右側にtrailingスペースを足すため、margin-left は 51px にして項目間ピッチをFigmaに合わせる
     （CDP実測でSERVICE以降のピッチ133/110/122/104pxがFigmaと一致）。 */
  .header__item:not(:first-child) {
    margin-left: 51px;
  }

  /* 〔H8〕CONTACT：左#2193c8→右#1178a8 のグラデ＋高さ46px(インセット・角丸/影なし)
     ・横パディング(左32/右61)・幅260px・右端フラッシュは既存(style.css)を維持 */
  .header__contact {
    height: 46px;
    background: linear-gradient(to left, #1178a8 9.615%, #2193c8);
  }
}

/* =========================================================
   2026-07-06 追加：PC共通CTA(Figma node 2549-7130)＋フッター(node 2549-7132)
   - CTAは footer.php で全ページ共通出力（各テンプレの個別呼び出しは撤去）。
   - style.css(SCSS)は無改変。ここで後乗せ。PC(≥768px)のみ調整（SPは据置）。
   ========================================================= */
@media screen and (min-width: 768px) {
  /* ---- CTA(2549-7130) ---- */
  /* カード幅1140px・左右150px（Figma）。max-width1190+padding25(border-box)=内容1140px。 */
  .cta__inner {
    max-width: 1190px;
  }
  /* ボタン文字：Figma 29.14px（既存22px） */
  .cta__button {
    font-size: 29px;
  }

  /* ---- フッター(2549-7132) ---- */
  /* 左右padding120px相当：内容1200px・x120起点（max-width1250+padding25）。上下64px。 */
  .footer {
    padding-block: 64px;
  }
  .footer__inner {
    max-width: 1250px;
  }
  /* ロゴ277px（Figma・ヘッダーより大）。a(inline-block)の行余白でロゴ枠が54pxに膨らみ
     ロゴ→ナビが8px過大になるため、line-height:0＋img/a をblock化して枠を46pxに詰める
     （ロゴ→ナビ top-to-top をFigma実測75pxに一致）。 */
  .footer__logo {
    width: 277px;
    line-height: 0;
  }
  .footer__logo a {
    display: block;
  }
  .footer__logo img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* ロゴ→ナビ 29px。行高を詰めてナビ枠高を約17pxにし、ナビ→コピーの見た目間隔をFigmaに合わせる */
  .footer__nav {
    margin-top: 29px;
    line-height: 1.2;
  }
  /* ナビ項目間：Figma gap-60。CSSのletter-spacing(0.2em)は各項目右にtrailing(2.8px)を足すため
     gapは57.5pxにして実効60pxにし、CONTACTまでの累積ドリフトを解消。 */
  .footer__list {
    gap: 57.5px;
  }
  /* ナビ：Montserrat SemiBold(600)・字間0.2em(2.8px/14)・#2b2b2b。
     行高を詰めてナビ枠を約17pxにし、ナビ→コピー間隔をFigmaに合わせる。 */
  .footer__link {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.2em;
    color: #2b2b2b;
  }
  /* ナビ→コピー 57px。コピー：Noto Medium 14px・#7b7b7b・字間0.18em(2.52px/14)・左寄せ */
  .footer__copy {
    margin-top: 57px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    letter-spacing: 0.18em;
    color: #7b7b7b;
  }
}

/* =========================================================
   2026-07-07 追加：TOPページのCTA(node 2549-7130)をFigma実寸へ厳密一致（TOP限定スコープ）
   - .home（TOP固定ページ）にのみ適用。他ページの共通CTAは無改変。
   - Figma基準(1440)：カード1140×524・角丸24、コンテンツpad82/64、
     ボタンh82/px55/角丸12/文字29、黒地左~685/画像右~455、カード下→フッター77px、左右余白150px。
   - 狭幅では左右余白が縮んでCTAが過大に見えるため、カード幅を比率(79.2%)で縮小（1440で1140上限）。
   ========================================================= */
@media screen and (min-width: 768px) {
  /* カード幅1140px上限＋左右余白を1440基準150px（狭幅は比率維持で縮小＝過大に見えない） */
  .home .cta__inner {
    max-width: 1140px;
    width: 79.2%;
    padding-left: 0;
    padding-right: 0;
  }
  /* ボタン：行高を詰めて高さ 93px→82px（Figma） */
  .home .cta__button {
    line-height: 1.4;
  }
  /* 右画像エリア：Figma ~455px（黒地~685）。幅40%・右寄せ（現状479px→456px） */
  .home .cta__image {
    width: 40%;
    left: auto;
    right: 0;
  }
  /* カード下→フッター 77px（Figma。現状100px） */
  .home .cta {
    position: relative;
    padding-bottom: 77px;
  }
  /* 背景の薄グレー帯（Figma Rectangle7 #e6eaeb・全幅）を背後に敷く＝カード上側“半分”だけグレー、下側は白。
     帯の上端は .cta の上端(top:0)まで伸ばし、セクション上パディング30px由来の白ラインを消す。
     下端はカード上端+229px（Figma）に合わせるため 高さ=30(パディング)+229=259px。 */
  .home .cta::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 259px;
    background-color: #e6eaeb;
  }
  /* カード本体を帯より前面に */
  .home .cta__inner {
    position: relative;
    z-index: 1;
  }
}