/**
 * Lincoln Custom Styles - 全体の基本スタイル
 * design-tokens.css の CSS変数を使って、サイト全体のベースを定義する。
 *
 * SWELL親テーマのスタイルを最低限上書きする形で書き、
 * ページ別の細かいスタイルは別ファイルに分割する予定。
 */

/* =========================================================
 *  ベース挙動
 * ========================================================= */

html { scroll-behavior: smooth; }

/* =========================================================
 *  本文・タイポグラフィのベース
 * ========================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-main);
  background-color: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading-jp);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--color-text-main);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
  line-height: var(--lh-body);
  color: var(--color-text-main);
}

small,
.is-caption {
  font-size: var(--fs-caption);
  color: var(--color-text-sub);
}

/* =========================================================
 *  リンク
 * ========================================================= */

a {
  color: var(--color-mint-deep);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-text-main);
  text-decoration: underline;
}

/* =========================================================
 *  ボタン(プライマリ・セカンダリ・イエロー)
 *  ※ docs/09 のコントラスト指摘により CTA は Mint Deep を基準とする
 * ========================================================= */

.btn-primary,
.btn-secondary,
.btn-yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-catch);
  font-weight: var(--fw-medium);
  line-height: var(--lh-button);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.btn-primary {
  background: var(--color-mint-deep);
  color: var(--color-white);
  padding: var(--space-md) var(--space-xl);
  font-size: var(--fs-body);
}

.btn-primary:hover {
  background: var(--color-mint-text);
  color: var(--color-white);
  text-decoration: none;
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-main);
  padding: 14px 28px;
  font-size: var(--fs-small);
  border: var(--border-width-emphasis) solid var(--color-mint-main);
}

.btn-secondary:hover {
  background: var(--color-mint-light);
  color: var(--color-text-main);
  text-decoration: none;
}

.btn-yellow {
  background: var(--color-yellow-main);
  color: var(--color-text-yellow);
  padding: var(--space-md) var(--space-xl);
  font-size: var(--fs-body);
}

.btn-yellow:hover {
  background: var(--color-yellow-deep);
  color: var(--color-text-yellow);
  text-decoration: none;
}

/* LINE 専用ボタン(主導線・LINEブランドカラー)
 * 2026-06 導線方針: LINEを最優先の窓口とし、フォームは残す。
 * LINEグリーンで「LINEで完結する」ことを直感的に伝える。 */
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-catch);
  font-weight: var(--fw-bold);
  line-height: var(--lh-button);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  background: #06C755;
  color: var(--color-white);
  padding: var(--space-md) var(--space-xl);
  font-size: var(--fs-body);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}
.btn-line:hover {
  background: #05B34C;
  color: var(--color-white);
  text-decoration: none;
}
.btn-line svg { flex: none; }

/* =========================================================
 *  コンテナ
 * ========================================================= */

.l-container,
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-desktop);
}

@media (max-width: 959px) {
  .l-container,
  .container {
    padding-inline: var(--container-padding-tablet);
  }
}

@media (max-width: 599px) {
  .l-container,
  .container {
    padding-inline: var(--container-padding-mobile);
  }
}

/* =========================================================
 *  カード・タグ・引用(基本コンポーネント)
 * ========================================================= */

.card {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: background var(--transition-base), border-color var(--transition-base);
}

.card:hover {
  background: var(--color-bg-white);
  border-color: var(--color-mint-soft);
}

.tag {
  display: inline-block;
  background: var(--color-mint-light);
  color: var(--color-text-main);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: var(--fw-medium);
}

.tag--highlighted {
  background: var(--color-yellow-soft);
  color: var(--color-text-yellow);
}

.quote {
  background: var(--color-bg-mint);
  border-left: 3px solid var(--color-mint-main);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-sm);
}

/* =========================================================
 *  SWELL のヘッダーバー(画面最上部のダークネイビーの細いバー)を非表示
 *  カスタマイザー側でも切れるが、設定漏れ防止のため強制で消す
 * ========================================================= */

.c-headBar,
.l-header__bar,
[class*="c-headBar"] {
  display: none !important;
}

/* =========================================================
 *  ヘッダー上の空白を全ページで除去
 *  ・SWELL は .l-header に margin-top / padding-top を入れることがある
 *  ・c-headBar 非表示時でもラッパの余白が残るケースを潰す
 *  ・全ページ共通(`.home` 以外でも適用)
 * ========================================================= */
.l-header,
#header.l-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

body,
#body_wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* SWELL がヘッダー直前に空 div を挟むことがあるので隠す */
#body_wrap > div:empty,
#body_wrap > .c-headBar:empty,
.l-header + div:empty {
  display: none !important;
}

/* =========================================================
 *  フッター(lincoln-footer)
 *  SWELL の parts/footer/footer_contents.php を上書きした実装
 *  4カラムナビ・葉のあしらい・波形ディバイダで「おしゃれ」を実装
 * ========================================================= */

.l-footer {
  background: var(--color-mint-soft);
  position: relative;
}

.lincoln-footer {
  position: relative;
  font-family: var(--font-body);
  color: var(--color-text-main);
}

/* 上端の波形ディバイダ(本文と footer の境目を曲線に) */
.lincoln-footer__wave {
  height: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0,20 C200,0 400,40 600,20 C800,0 1000,40 1200,20 L1200,40 L0,40 Z' fill='%23C8E3B3'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: -1px;
}

/* ブランドブロック(中央・葉+ロゴ+キャッチ) */
.lincoln-footer__brand {
  text-align: center;
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.lincoln-footer__leaf {
  display: block;
  margin: 0 auto var(--space-md);
}

.lincoln-footer__logo {
  display: inline-block;
  font-family: var(--font-heading-jp);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  color: var(--color-mint-text);
  text-decoration: none !important;
  letter-spacing: 0.02em;
}

.lincoln-footer__logo:hover {
  color: var(--color-mint-deep);
}

.lincoln-footer__catch {
  font-family: var(--font-catch);
  font-size: var(--fs-body);
  color: var(--color-mint-text);
  margin: var(--space-sm) 0 0;
  opacity: 0.7;
}

/* ナビゲーション 4 カラム */
.lincoln-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2xl);
  padding: var(--space-xl) 0 var(--space-3xl);
}

.lincoln-footer__eyebrow {
  font-family: var(--font-heading-en);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--color-mint-deep);
  margin: 0 0 4px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

.lincoln-footer__eyebrow--secondary {
  margin-top: var(--space-xl);
}

.lincoln-footer__heading {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  letter-spacing: 0.03em;
  position: relative;
}

/* 見出し下のドット装飾(セクション見出しと統一) */
.lincoln-footer__heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 4px;
  background-image: radial-gradient(circle, var(--color-mint-deep) 1.5px, transparent 1.5px);
  background-size: 8px 8px;
  background-repeat: repeat-x;
}

.lincoln-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lincoln-footer__col li {
  margin-bottom: var(--space-xs);
}

.lincoln-footer__col a {
  display: inline-block;
  font-size: var(--fs-small);
  color: var(--color-mint-text);
  text-decoration: none;
  line-height: 1.7;
  transition: transform var(--transition-base), color var(--transition-base);
}

.lincoln-footer__col a:hover {
  color: var(--color-mint-deep);
  text-decoration: none;
  transform: translateX(3px);
}

/* 連絡先リスト(アイコン付き) */
.lincoln-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}

.lincoln-footer__contact svg {
  color: var(--color-mint-deep);
  flex-shrink: 0;
}

.lincoln-footer__contact a:hover svg {
  color: var(--color-mint-text);
}

/* サブリスト(法定ページなど) */
.lincoln-footer__sublist a {
  font-size: var(--fs-caption);
  opacity: 0.75;
}

.lincoln-footer__sublist a:hover {
  opacity: 1;
}

/* 運営会社 */
.lincoln-footer__company {
  padding: var(--space-xl) 0 var(--space-2xl);
  text-align: center;
  border-top: var(--border-width) solid rgba(31, 63, 24, 0.15);
}

.lincoln-footer__company-label {
  font-family: var(--font-heading-en);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--color-mint-deep);
  margin: 0 0 4px;
  text-transform: uppercase;
}

.lincoln-footer__company-name {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-sm);
}

.lincoln-footer__company-links {
  font-size: var(--fs-small);
  color: var(--color-mint-text);
  margin: 0;
  display: inline-flex;
  gap: var(--space-md);
  align-items: center;
}

.lincoln-footer__company-links a {
  color: var(--color-mint-text);
  text-decoration: none;
  transition: color var(--transition-base);
}

.lincoln-footer__company-links a:hover {
  color: var(--color-mint-deep);
  text-decoration: underline;
}

.lincoln-footer__company-links span {
  color: var(--color-mint-deep);
  opacity: 0.5;
}

/* コピーライト */
.lincoln-footer__copyright {
  background: var(--color-mint-text);
  padding: var(--space-md) 0;
  text-align: center;
}

.lincoln-footer__copyright p {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--color-white);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
}

.lincoln-footer__copyright span[lang="en"] {
  font-family: var(--font-heading-en);
  margin-right: var(--space-xs);
}

/* レスポンシブ */
@media (max-width: 959px) {
  .lincoln-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

@media (max-width: 599px) {
  .lincoln-footer__brand { padding-top: var(--space-2xl); }
  .lincoln-footer__logo { font-size: var(--fs-h3); }
  .lincoln-footer__nav {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* SWELL デフォルトのフッター要素を非表示 */
.l-footer__foot,
.l-footer__nav,
.l-footer .copyright,
.l-footer .c-iconList--sns {
  display: none !important;
}

/* =========================================================
 *  装飾ユーティリティ
 * ========================================================= */

.bg-mint-light { background: var(--color-mint-light); }
.bg-mint       { background: var(--color-bg-mint); }
.bg-white      { background: var(--color-bg-white); }

.text-main    { color: var(--color-text-main); }
.text-sub     { color: var(--color-text-sub); }
.text-mint    { color: var(--color-mint-deep); }
.text-yellow  { color: var(--color-text-yellow); }

.font-en      { font-family: var(--font-heading-en); }
.font-number  { font-family: var(--font-number); }

/* =========================================================
 *  スマホ用フローティングフッター(.sp-fixed-footer)
 *
 *  狙い:
 *  - 派手な原色を避け、リンカーンのミントトーンで統一(AIテンプレ感を排除)
 *  - 中央項目だけミントの主導線、両端は控えめなアウトライン
 *  - PCでは完全非表示、768px以下のみ表示
 *  - safe-area-inset-bottom で iPhone のホームバーを回避
 *  - 表示中は body 下部にパディングを足して、本文が隠れないように
 * ========================================================= */

.sp-fixed-footer { display: none; }

@media (max-width: 768px) {

  .sp-fixed-footer {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr 1fr;
    align-items: stretch;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: #ffffff;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 22px rgba(31, 63, 24, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
    font-family: var(--font-heading-jp);
  }

  /* 上端に細いミントのアクセントライン(1pxの罫線では弱いので装飾を1点追加) */
  .sp-fixed-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-mint-main), var(--color-mint-deep));
    border-radius: 0 0 3px 3px;
  }

  .sp-fixed-footer__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px 12px;
    color: var(--color-mint-text);
    text-decoration: none;
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    line-height: 1.2;
    transition: background-color 0.15s ease;
    position: relative;
  }

  .sp-fixed-footer__item + .sp-fixed-footer__item {
    border-left: 1px solid var(--color-border);
  }

  .sp-fixed-footer__item:active {
    background: var(--color-bg-mint);
  }

  .sp-fixed-footer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--color-mint-deep);
  }

  .sp-fixed-footer__icon svg {
    width: 100%;
    height: 100%;
  }

  .sp-fixed-footer__label {
    font-size: 11px;
  }

  /* 中央の主導線(ご相談) ── ミントで塗って一段持ち上げる */
  .sp-fixed-footer__item--primary {
    background: linear-gradient(180deg, var(--color-mint-main) 0%, var(--color-mint-deep) 100%);
    color: #ffffff;
    margin: -1px 0;
    border-radius: 0;
  }
  .sp-fixed-footer__item--primary .sp-fixed-footer__icon { color: #ffffff; }
  .sp-fixed-footer__item--primary:active { background: var(--color-mint-deep); }

  /* primary との境界線は消す(色が変わるので線は不要) */
  .sp-fixed-footer__item--primary,
  .sp-fixed-footer__item--primary + .sp-fixed-footer__item {
    border-left: 0;
  }

  /* 本文が隠れないように body 下に空間を確保 */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
  }

  /* SWELLの「トップへ戻る」ボタンが固定フッターに隠れないよう持ち上げる */
  .p-pageTop,
  .c-pageTop,
  [class*="pageTop"],
  [class*="pagetop"],
  #page_top,
  #pagetop {
    bottom: calc(76px + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* =========================================================
 *  グローバルナビ:.menu-cta(お問い合わせ)をピル型CTAボタン化
 *
 *  WP管理画面 → 外観 → メニュー で「お問い合わせ」項目に
 *  CSS class「menu-cta」を付けた場合に、ピル型の緑ボタンに装飾。
 *  PCでもタブレットでも一目で「ここがCV」と分かる導線として機能。
 * ========================================================= */

/* メニュー項目(li)を上下中央に */
.l-header .menu-cta,
.l-header__menu .menu-cta,
.c-gnav .menu-cta,
.p-pcMenu .menu-cta {
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
}

/* PC/タブレットのグローバルナビ */
.l-header .menu-cta > a,
.l-header__menu .menu-cta > a,
.c-gnav .menu-cta > a,
.p-pcMenu .menu-cta > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--color-mint-main) 0%, var(--color-mint-deep) 100%) !important;
  color: #ffffff !important;
  padding: 12px 26px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: var(--fw-bold) !important;
  font-family: var(--font-heading-jp) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 44px !important;
  max-height: 52px !important;
  box-shadow: 0 4px 12px rgba(75, 143, 44, 0.18) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.l-header .menu-cta > a:hover,
.l-header__menu .menu-cta > a:hover,
.c-gnav .menu-cta > a:hover,
.p-pcMenu .menu-cta > a:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(75, 143, 44, 0.32) !important;
  background: var(--color-mint-deep) !important;
  color: #ffffff !important;
}

/* メニューアイテムの hover 下線などを無効化 */
.l-header .menu-cta > a::before,
.l-header .menu-cta > a::after,
.c-gnav .menu-cta > a::before,
.c-gnav .menu-cta > a::after {
  display: none !important;
}

/* メニュー項目同士の余白 + 右端からの距離を確保 */
.c-gnav > .menu-cta,
.l-header__menu > .menu-cta,
.l-header .menu-cta {
  margin-left: 16px !important;
  margin-right: 8px !important;
}

/* ヘッダー全体の右端に少し余白を追加(ボタンが画面端に張り付かないように) */
.l-header__inner,
.l-header__inner > div:last-child,
.c-gnav {
  padding-right: 8px !important;
}

/* SP メニュー(ドロワー)の場合は通常リンクのまま(ボタン形は崩れるので) */
@media (max-width: 959px) {
  .p-spMenu .menu-cta > a,
  .c-spNav .menu-cta > a {
    display: block !important;
    background: none !important;
    color: var(--color-mint-text) !important;
    padding: inherit !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* =========================================================
 *  ヘッダー/フッターのテキストロゴを画像ロゴに置き換え
 *
 *  assets/images/logo-horizontal.png(横長)を使用
 *  暫定:水色版。後日 緑版に差し替え予定(同じファイル名で上書き)
 * ========================================================= */

/* SWELL ヘッダーのサイトタイトル/ロゴ要素をすべて画像化 */
.c-headLogo,
.l-header .c-siteTitle,
.l-header__logo,
.c-headLogo__inner,
.l-header__logoLink {
  /* テキストを非表示にしつつ、サイズは確保 */
  font-size: 0 !important;
  line-height: 0 !important;
}

.c-headLogo a,
.l-header .c-siteTitle a,
.l-header__logo a,
.l-header__logoLink {
  display: inline-block !important;
  background-image: url('../images/logo-horizontal.png') !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  width: 260px !important;
  height: 56px !important;
  text-indent: -9999px !important;
  vertical-align: middle !important;
  text-decoration: none !important;
}

/* タブレット以下 */
@media (max-width: 959px) {
  .c-headLogo a,
  .l-header .c-siteTitle a,
  .l-header__logo a {
    width: 220px !important;
    height: 48px !important;
  }
}

/* スマホ */
@media (max-width: 599px) {
  .c-headLogo a,
  .l-header .c-siteTitle a,
  .l-header__logo a {
    width: 180px !important;
    height: 40px !important;
  }
}

/* フッターのロゴも画像に */
.lincoln-footer__logo {
  display: inline-block !important;
  background-image: url('../images/logo-horizontal.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  width: 320px !important;
  height: 68px !important;
  text-indent: -9999px !important;
  font-size: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 599px) {
  .lincoln-footer__logo {
    width: 240px !important;
    height: 52px !important;
  }
}