/* ============================================================
 * subaco Footer
 *
 * 左：会社情報 / 中央：News / 右：Menu の3カラム + 底部
 * subaco デザイントークン（Teal/Terracotta/Charcoal/Tinted/Gold）
 * ============================================================ */

:root {
  --sba-teal:        #427c89;
  --sba-terracotta:  #c45c3a;
  --sba-charcoal:    #1a1a1a;
  --sba-tinted:      #f5f4f2;
  --sba-gold:        #f7ba39;

  --sba-foot-text:        #333;
  --sba-foot-text-thin:   #888;
  --sba-foot-border:      #e0dccc;
  --sba-foot-border-thin: #f0eddf;
  --sba-foot-bg:          #f5f4f2;
}

/* ------------------------------------------------------------
 * Footer container
 * ------------------------------------------------------------ */

.sba-footer {
  background: #fff;
  color: var(--sba-foot-text);
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 80px;
}

.sba-footer__main {
  display: grid;
  grid-template-columns: 1.6fr 1.1fr 0.7fr;
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 56px;
}

@media (max-width: 960px) {
  .sba-footer__main {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 48px 20px 40px;
  }
}

/* ------------------------------------------------------------
 * Foot heading（News / Menu 共通）
 * ------------------------------------------------------------ */

.sba-foot-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sba-foot-border);
  font-weight: normal;
}

.sba-foot-heading__main {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--sba-foot-text);
  line-height: 1;
}

.sba-foot-heading__line {
  flex: 1;
}

.sba-foot-heading__sub {
  font-size: 12px;
  color: var(--sba-foot-text-thin);
  letter-spacing: 0.05em;
}

/* ------------------------------------------------------------
 * Info Column（左）
 * ------------------------------------------------------------ */

/* ロゴ（ヘッダーと同じ SVG を再利用、Teal カラーで表示） */
.sba-footer__logo {
  color: var(--sba-teal);
  margin-bottom: 1rem;
}

.sba-footer__logo svg {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
}

.sba-footer__logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--sba-teal);
}

.sba-info__brand {
  margin: 0 0 1.75rem;
  line-height: 1.5;
}

.sba-info__brand-tagline {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--sba-teal);
  margin: 0 0 0.25rem;
}

.sba-info__brand-kana {
  font-size: 0.8rem;
  color: var(--sba-charcoal);
  opacity: 0.7;
  letter-spacing: 0.05em;
  margin: 0;
}

.sba-info__list {
  margin: 0;
}

.sba-info__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.7;
}

.sba-info__row:last-child {
  margin-bottom: 0;
}

/* Hours / Closed を横並び2列に */
.sba-info__rows-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.sba-info__rows-double .sba-info__row {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .sba-info__rows-double {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sba-info__rows-double .sba-info__row:not(:last-child) {
    margin-bottom: 0;
  }
}

.sba-info__label {
  background: var(--sba-teal);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  text-align: center;
  width: 72px;
  box-sizing: border-box;
}

.sba-info__value {
  margin: 0;
  color: var(--sba-foot-text);
  padding-top: 1px;
}

.sba-info__value--mail {
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.02em;
}

/* ============================================================
 * Email Obfuscation（@ 擬似要素挿入方式）
 *
 * HTML ソースに完全なアドレスを出現させずに、CSS の ::after で
 * @ を挿入して視覚的にアドレスを再構成する。
 * フッター / プライバシーポリシー / 特商法 で共通使用。
 *
 * 関連PHP：inc/company-info.php の sba_render_obfuscated_email()。
 * 出力構造：<span class="sba-mail">
 *   <span class="sba-mail__local">contact</span>
 *   <span class="sba-mail__domain">subaco.co.jp</span>
 * </span>
 * ============================================================ */
.sba-mail {
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.02em;
}

.sba-mail__local::after {
  content: "@";
}

/* Googleマップ（公開埋め込みURL、APIキー不要）
 * AtoBoo 実装値（iframe height: 200px 固定）に合わせて aspect-ratio は使わず、
 * iframe側で高さを固定することでビューポート幅に左右されない表示にする。 */
.sba-footer__map {
  margin-top: 1.5rem;
  width: 100%;
  border: 0.5px solid rgba(26, 26, 26, 0.15);
  overflow: hidden;
}

.sba-footer__map iframe {
  width: 100%;
  height: 200px;
  border: 0;
  display: block;
}

/* ------------------------------------------------------------
 * News Column（中央）
 * ------------------------------------------------------------ */

.sba-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sba-news__item {
  border-bottom: 1px solid var(--sba-foot-border-thin);
}

.sba-news__item:last-child {
  border-bottom: none;
}

.sba-news__link {
  display: block;
  padding: 14px 0;
  text-decoration: none;
  color: var(--sba-foot-text);
  transition: opacity 0.2s ease;
}

.sba-news__link:hover {
  opacity: 0.6;
}

.sba-news__date {
  display: block;
  font-size: 11px;
  color: var(--sba-foot-text-thin);
  margin-bottom: 4px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.05em;
}

.sba-news__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
}

/* News 一覧リンク */
.sba-news__more {
  margin: 16px 0 0;
  text-align: right;
}

.sba-news__more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--sba-foot-text);
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.sba-news__more-link:hover {
  opacity: 0.8;
  color: var(--sba-teal);
}

.sba-news__more-icon {
  display: inline-block;
  font-size: 12px;
  transition: transform 0.2s ease;
}

.sba-news__more-link:hover .sba-news__more-icon {
  transform: translateX(2px);
}

/* ------------------------------------------------------------
 * Menu Column（右）
 * ------------------------------------------------------------ */

.sba-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sba-menu__item {
  margin-bottom: 14px;
}

.sba-menu__item:last-child {
  margin-bottom: 0;
}

.sba-menu__link {
  display: inline-block;
  text-decoration: none;
  color: var(--sba-foot-text);
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
  position: relative;
}

.sba-menu__link::before {
  content: "→";
  font-family: 'Outfit', sans-serif;
  margin-right: 8px;
  color: var(--sba-teal);
  transition: transform 0.2s ease;
  display: inline-block;
}

.sba-menu__link:hover {
  color: var(--sba-teal);
}

.sba-menu__link:hover::before {
  transform: translateX(2px);
}

/* ------------------------------------------------------------
 * Foot（底部）— AtoBoo準拠の中央寄せ構造
 * ------------------------------------------------------------ */

.sba-footer__foot {
  background: var(--sba-foot-bg);
  padding: 24px 20px;
  text-align: center;
}

.sba-footer__nav {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 0 0 12px;
  padding: 0;
  flex-wrap: wrap;
}

.sba-footer__nav-item a {
  font-size: 12px;
  color: #666;
  text-decoration: none;
  transition: color 0.2s ease;
  letter-spacing: 0.02em;
}

.sba-footer__nav-item a:hover {
  color: var(--sba-teal);
}

.sba-footer__copyright {
  font-size: 11px;
  color: var(--sba-foot-text-thin);
  margin: 0;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.05em;
}