/* CH-1062 サービスの紹介ページ（/siteb/lp・/azit/lp・/ebay/lp）で共通の CSS。3 つの LP のレイアウト（plugins/{Siteb,Azit,Ebay}Plus/templates/layout/Lp.php）が、
   サービスの CSS（webroot/account/{siteb,azit,ebay}/style.css）のあとに読む。
   1. SISTEMA の共通のヘッダーとフッター（HTML は templates/element/Lp/sistema_header.php・sistema_footer.php）
      見た目は s-m.biz のトップ（WordPress の子テーマ cocoon-child-master の assets/css/fsc-site-colors.css・fsc-home.css）の値をそのまま写した。
      子テーマの CSS は Cake から読まないので、トップの見た目を変えたら、ここも同じに直す。
      トップの Noto Sans JP（子テーマの中のフォントのファイル）は読まない（字の形は端末の字。大きさ・太さ・色・余白は同じ）。
   2. LP の中のヘッダー（サービスのロゴ・ログイン・新規登録）：下へスクロールしたら小さく（JS は webroot/js/lp-header.js・CH-1060）
   3. スマホの下の固定ボタン（.mobile-footer-nav）の分の余白を、ページのいちばん下に（CH-1060）
   4. reCAPTCHA のラベル（GearPort のお問い合わせ・Google が右下に出す）を画面の中に（CH-1062）
   5. 見出しとラベルの語の途中の折り返しを防ぐ（.lp-keep・区切りはテンプレートの <wbr>・CH-1060） */

/* ---- 1. 色（トップの fsc-site-colors.css の黒の 1 組と同じ値） ---- */
.fsc-lp {
  --fsh-sans: system-ui, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', Meiryo, sans-serif;
  --fsh-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fsh-gutter: 24px;
  --fsh-bg: #0E141B;
  --fsh-white: #161F29;
  --fsh-ink: #E8EDF2;
  --fsh-mute: #98A4B0;
  --fsh-line: #2A3542;
  --fsh-blue: #5AB4FF;
  --fsh-blue-dark: #8FCBFF;
  --fsh-on-ink: #0E141B;
  --fsh-on-blue: #0B1620;
  --fsh-logo-bg: #1B2734;
  --fsh-logo-letter: #5AB4FF;
  font-family: var(--fsh-sans);
  color: var(--fsh-ink);
  background: var(--fsh-bg);
  line-height: 1.8;
  font-size: 16px;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

.fsc-lp,
.fsc-lp *,
.fsc-lp *::before,
.fsc-lp *::after {
  box-sizing: border-box;
}

.fsc-lp p {
  margin: 0;
}

.fsc-lp a {
  color: var(--fsh-blue);
}

.fsc-lp a:hover {
  color: var(--fsh-blue-dark);
}

.fsc-lp a:focus-visible {
  outline: 3px solid var(--fsh-blue);
  outline-offset: 3px;
}

.fsc-lp .fsc-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--fsh-gutter);
  padding-right: var(--fsh-gutter);
}

/* ---- いちばん上の「ポートフォリオ｜システム開発」の帯（トップと同じ・高さ 30px） ---- */
.fsc-lp .fsc-switch {
  height: 30px;
  overflow: hidden;
  background: var(--fsh-white);
  border-bottom: 1px solid var(--fsh-line);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.fsc-lp .fsc-switch__inner {
  display: flex;
  align-items: center;
  height: 100%;
}

.fsc-lp .fsc-switch__item {
  display: inline-grid;
  grid-auto-flow: column;
  align-content: center;
  align-items: baseline;
  column-gap: 8px;
  height: 100%;
  padding: 0 14px;
  color: var(--fsh-mute);
  text-decoration: none;
}

.fsc-lp .fsc-switch__item:first-child {
  padding-left: 0;
}

.fsc-lp .fsc-switch__item + .fsc-switch__item {
  border-left: 1px solid var(--fsh-line);
}

.fsc-lp .fsc-switch a.fsc-switch__item:hover {
  color: var(--fsh-blue-dark);
}

.fsc-lp .fsc-switch a.fsc-switch__item:hover .fsc-switch__name {
  text-decoration: underline;
}

.fsc-lp .fsc-switch a.fsc-switch__item:focus-visible {
  outline-offset: -3px;
}

.fsc-lp .fsc-switch__name {
  letter-spacing: 0.04em;
}

.fsc-lp .fsc-switch__item[aria-current="page"] {
  color: var(--fsh-blue);
}

.fsc-lp .fsc-switch__item[aria-current="page"] .fsc-switch__name {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.fsc-lp .fsc-switch__brand {
  font-family: var(--fsh-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

/* ---- ヘッダー（ロゴ・メニュー・相談する） ---- */
.fsc-lp .fsc-header {
  box-shadow: inset 0 -1px 0 var(--fsh-line);
  background: transparent;
}

.fsc-lp .fsc-header__inner {
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.fsc-lp .fsc-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--fsh-ink);
  text-decoration: none;
}

.fsc-lp .fsc-logo:hover {
  color: var(--fsh-ink);
}

.fsc-lp .fsc-logo__mark {
  flex: none;
}

.fsc-lp .fsc-logo__bg {
  fill: var(--fsh-logo-bg);
}

.fsc-lp .fsc-logo__f {
  stroke: var(--fsh-logo-letter);
}

.fsc-lp .fsc-logo__text {
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.fsc-lp .fsc-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  font-size: 15px;
}

.fsc-lp .fsc-nav__links {
  display: contents;
}

.fsc-lp .fsc-nav a {
  color: var(--fsh-ink);
  text-decoration: none;
  padding: 10px 0;
}

.fsc-lp .fsc-nav a:hover {
  color: var(--fsh-blue);
}

.fsc-lp .fsc-nav .fsc-nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--fsh-ink);
  color: var(--fsh-on-ink);
  font-weight: 700;
}

.fsc-lp .fsc-nav .fsc-nav__cta:hover {
  color: var(--fsh-on-blue);
  background: var(--fsh-blue);
}

/* ---- フッター ---- */
.fsc-lp .fsc-footer {
  border-top: 1px solid var(--fsh-line);
}

.fsc-lp .fsc-footer__inner {
  padding-top: 28px;
  padding-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  color: var(--fsh-mute);
}

.fsc-lp .fsc-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}

.fsc-lp .fsc-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fsh-ink);
  text-decoration: none;
}

.fsc-lp .fsc-footer__nav a:hover {
  color: var(--fsh-blue);
}

.fsc-lp .fsc-footer__about {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

.fsc-lp .fsc-footer__about a {
  font-weight: 700;
}

.fsc-lp .fsc-footer__copy {
  font-size: 12px;
}

/* ---- スマホ（トップと同じ：1 段目にロゴと「相談する」・2 段目にメニュー） ---- */
@media (max-width: 600px) {
  .fsc-lp {
    --fsh-gutter: 16px;
  }

  .fsc-lp .fsc-switch__brand {
    display: none;
  }

  .fsc-lp .fsc-header__inner {
    padding-top: 12px;
    padding-bottom: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
  }

  .fsc-lp .fsc-nav {
    display: contents;
  }

  .fsc-lp .fsc-nav .fsc-nav__cta {
    grid-column: 2;
    grid-row: 1;
    min-height: 40px;
    padding: 0 16px;
  }

  .fsc-lp .fsc-nav__links {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
    font-size: 14px;
  }
}

/* ---- LP のページ全体：共通のヘッダーとフッターを画面の端まで（サービスの CSS の body の 20px の余白を外す） ---- */
body.lp-sistema {
  margin: 0;
  padding: 0;
}

/* ---- 2. LP の中のヘッダー（サービスのロゴ・ログイン・新規登録）。共通のヘッダーの下にあり、画面の上に来たら貼り付く（sticky）。
   下へスクロールしたら、lp-header.js が .is-compact を付けて高さを詰める ---- */
body.lp-sistema .main-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: padding 0.2s ease;
}

body.lp-sistema .main-header .logo {
  margin: 0;
  line-height: 0;
}

body.lp-sistema .main-header .logo img {
  transition: height 0.2s ease;
}

body.lp-sistema .main-header .header-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.lp-sistema .main-header.is-compact {
  padding-top: 4px;
  padding-bottom: 4px;
}

body.lp-sistema .main-header.is-compact .logo img {
  height: 32px;
  width: auto;
}

/* 「ログイン」：枠だけのボタン（「新規登録」の左・CH-1060） */
body.lp-sistema .main-header .btn-login {
  display: inline-block;
  background: #fff;
  color: #1a2944;
  border: 2px solid #1a2944;
  padding: 6px 15px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.6;
  white-space: nowrap;
}

body.lp-sistema .main-header .btn-login:hover {
  background: #eef2f7;
}

body.lp-sistema .main-header .btn-contact {
  border: 2px solid #1a2944;
  line-height: 1.6;
  white-space: nowrap;
}

/* 「新規登録」のボタンの文：PC は長い文、スマホは短い文 */
body.lp-sistema .lp-nav-short {
  display: none;
}

@media (max-width: 768px) {
  /* ログインと新規登録のある LP（.has-account-nav）は、スマホでもロゴの右に 2 つのボタンを 1 行で出す
     （サービスの CSS はスマホでヘッダーのボタンを消していた）。共通のヘッダーとは別の段なので重ならない */
  body.lp-sistema .main-header.has-account-nav .header-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
  }

  body.lp-sistema .main-header.has-account-nav .logo {
    margin: 0;
    min-width: 0;
  }

  body.lp-sistema .main-header.has-account-nav .logo img {
    height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
  }

  body.lp-sistema .main-header.has-account-nav .header-nav {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    width: auto;
    gap: 6px;
  }

  body.lp-sistema .main-header.has-account-nav .header-nav a {
    display: inline-block;
    width: auto;
    max-width: none;
    padding: 5px 12px;
    font-size: 13px;
  }

  body.lp-sistema .main-header.has-account-nav .lp-nav-long {
    display: none;
  }

  body.lp-sistema .main-header.has-account-nav .lp-nav-short {
    display: inline;
  }

  body.lp-sistema .main-header.is-compact .header-inner {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  body.lp-sistema .main-header.is-compact .logo img {
    height: 26px;
  }

  /* ---- 3. 下の固定ボタン（高さ 60px・下から 20px）の分の余白を、いちばん下の共通のフッターの下に（地の色はフッターと同じ）。
     サービスの CSS の body の padding-bottom（地の色が違う帯になる）は使わない ---- */
  body.lp-sistema {
    padding-bottom: 0;
  }

  body.lp-sistema .fsc-lp-bottom {
    padding-bottom: calc(20px + 60px + 20px);
  }
}

/* ---- 4. reCAPTCHA のラベル（Google が右下に position: fixed・right: -186px で出す）を、画面の中に収める。
   ふだんはマークの幅（70px）だけを右下に出し、指やマウスを乗せたときに全体（256px）を出す。
   位置は Google が style 属性で入れるので !important で上書きする（スマホの下の固定ボタンの上にずらすのは account/ebay/style.css） ---- */
.grecaptcha-badge {
  right: 0 !important;
  width: 70px !important;
  overflow: hidden !important;
  transition: width 0.3s ease !important;
}

.grecaptcha-badge:hover,
.grecaptcha-badge:focus-within {
  width: 256px !important;
}

/* ---- 5. 見出しとラベル：語の途中で折り返さない（区切りはテンプレートの <wbr> と「、」など）。収まらないときだけ、どこでも折り返す ---- */
.lp-keep {
  word-break: keep-all;
  overflow-wrap: anywhere;
}