/* custom-footer.css — footer.hbs 専用。document_head.hbs から全ページ共通で読み込まれる */

/* ===== トークン ===== */
:root {
  --spacing-sss: 4px;
  --spacing-ss: 8px;
  --spacing-s: 16px;
  --spacing-m: 24px;
  --color-text-lixil-gray: #3C3B38;
  --color-text-on-surface: #FFFFFF;
  --font-size-title-h4: 16px;
  --font-size-body-l: 16px;
  --font-size-body-m: 14px;
  --font-size-body-s: 8px;
  --font-weight-w3: 300;
  --font-weight-w6: 600;
  --line-height-base: 1.5;
}
@media (min-width: 768px) {
  :root {
    --spacing-sss: 8px;
    --spacing-ss: 16px;
    --spacing-s: 24px;
    --spacing-m: 40px;
  }
}

/* ===== フッター全体 ===== */
.custom-footer {
  background-color: var(--color-text-lixil-gray);
  padding-top: 24px;
  margin-top: 80px; /*! 必須。消すとコンテンツ⇔フッター間の余白が無くなる */
}

.custom-footer__inner {
  /*! 1200px はヘッダーと同値。ただし独立した直値なので変更時は2ファイル直す */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-s); /*! PCは24pxへ意図的に広げている（デザイン上は両BP 16px固定） */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

/* ===== 上段：ロゴ + タイトル + お問い合わせ2件 ===== */
.custom-footer__top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.custom-footer__logoRow {
  display: flex;
  align-items: center;
}

.custom-footer__logo {
  display: block;
  width: 96px; /* Mobile・PC共通。ヘッダーは80pxで別値 */
  /*! height を固定値に戻さないこと（アセットの比率をそのまま使うため） */
  height: auto;
  flex-shrink: 0;
}

.custom-footer__brandBlock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 0 var(--spacing-ss); /* ロゴ行にはない追加インデント */
}

.custom-footer__title {
  font-size: var(--font-size-title-h4);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
  color: var(--color-text-on-surface);
  text-decoration: none;
}
.custom-footer__title:hover {
  text-decoration: underline;
}

.custom-footer__contactList {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.custom-footer__contactLink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: var(--color-text-on-surface);
  font-size: var(--font-size-body-l);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
  text-decoration: none;
}
.custom-footer__contactLink:hover {
  text-decoration: underline;
}

/*! アイコンは footer.hbs 側の <img> + {{asset}} で読む。ここに background-image を書き戻さないこと */
.custom-footer__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-block;
}

/* ===== 区切り線 ===== */
.custom-footer__divider {
  border: none;
  border-top: 1px solid var(--color-text-on-surface);
  /*! width を 100% に戻すと左右marginと合算されて16pxはみ出す */
  width: auto;
  margin: 0 var(--spacing-ss); /* 左右は上段・下段リストと揃える。上下は gap が担当するので0 */
}

/* ===== 下段リンク一覧 ===== */
.custom-footer__linksList {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-ss);
  list-style: none;
  margin: 0;
  /*! 左右は上段と左端を揃える値。PC側の padding にも同じ値を入れること */
  padding: var(--spacing-s) var(--spacing-ss);
}

.custom-footer__linksLink {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--color-text-on-surface);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-w3);
  line-height: var(--line-height-base);
  text-decoration: none;
}
.custom-footer__linksLink:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .custom-footer__linksList {
    flex-direction: row;
    gap: 40px;
    padding: 0 var(--spacing-ss); /* 左右は上段と揃える。上下はPCでは持たない */
  }
  .custom-footer__linksLink {
    padding: 8px 0;
    font-size: var(--font-size-body-l);
  }
}

/* ===== コピーライト ===== */
.custom-footer__copyright {
  background-color: var(--color-text-lixil-gray);
  padding: var(--spacing-s) 0;
  text-align: center;
  color: var(--color-text-on-surface);
  font-size: 12px; /*! 可読性のため引き上げた確定値。body.s トークンに戻さないこと（パンくずと同じ扱い） */
  font-weight: var(--font-weight-w3);
  line-height: var(--line-height-base);
}
@media (min-width: 768px) {
  .custom-footer__copyright {
    font-size: var(--font-size-body-l);
  }
}