/*
 Theme Name:   SWELL Child
 Template:     swell
 Version:      1.0
 Description:  ビフォアフ風ヘッダー（検索なし）
*/


/* =========================================================
   フォント上書き（Swellより優先）
========================================================= */
html, body, button, input, select, textarea {
  font-family:  'League Spartan', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'League Spartan', 'Noto Sans JP', sans-serif !important;
  font-weight: 500;
}

strong, b {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 700;
}


/* ========== ビフォアフ専用カラートークン ========== */
:root {
  --befaf-brand: #0aa0cc; /* 好みで調整可 */
  --befaf-text:  #333333;
  --befaf-bg:    #ffffff;
  --befaf-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ========== ヘッダー（Swellと衝突しないように完全独立） ========== */
/* ヘッダー全体 */
.befaf-header {
  background: white;
  border-bottom: 1px solid #eee;
  padding: 10px 16px;
}

/* flexで左のロゴを保持 */
.befaf-header__inner {
  position: relative;
  display: flex;
  align-items: center;
}

/* 左ロゴはそのまま */
.befaf-header__logo img {
  height: 28px;
}

/* 中央タイトルを絶対配置で中央に固定 */
.befaf-header__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
	letter-spacing: .25rem;
  font-weight: 500;
  margin: 0;
}


/* =========================================================
   ビフォアフ共通フッター（改訂版）
========================================================= */
.befaf-footer {
  background: #fff;
  border-top: 1px solid #e5e7eb;
  color: #555;
  font-size: 14px;
  margin-top: 2rem;
}

.befaf-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 16px 24px;
  text-align: center;
}

/* ===== バナー部分 ===== */
.befaf-footer__banners {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.befaf-footer__banner img {
  width: 100%;
  max-width: 420px; /* ← PC時サイズアップ */
  transition: opacity .25s ease;
}

.befaf-footer__banner img:hover {
  opacity: 0.85;
}

/* ===== リンク群 ===== */
.befaf-footer__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* ← 中央寄せ */
  gap: 8px;
  margin-top: 8px;
}

.befaf-footer__links a {
  text-decoration: none;
  transition: color .2s ease;
}

.befaf-footer__links a:hover {
  color: #0aa0cc;
}

/* ===== コピーライト ===== */
.befaf-footer__copy {
  font-size: 12px;
  color: #aaa;
  margin-top: 24px;
}

/* ===== レスポンシブ ===== */
@media (min-width: 768px) {
  /* PC時：バナー横並び・少し大きく中央配置 */
  .befaf-footer__banners {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
  }
  .befaf-footer__banner img {
    max-width: 320px; /* ← PCでも見やすく拡大 */
  }

  /* PC時：リンク群も中央配置＆間隔調整 */
  .befaf-footer__links {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 16px;
  }

  .befaf-footer__copy {
    margin-top: 28px;
  }
}

/* ===== スマホ時（SP） ===== */
@media (max-width: 767px) {
  .befaf-footer__banner img {
    width: 100%;   /* ← 横幅100% */
    max-width: none;
  }
}

/* =========================================================
   固定フッターボタン（ビフォアフへ戻る）スマホ調整版
========================================================= */
.befaf-fixed-return {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #00A2FF;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 40px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 9999;
  text-decoration: none;
  white-space: nowrap; /* ← 改行防止！ */
  transition: all 0.25s ease;
}

.befaf-fixed-return:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

.befaf-fixed-return i[data-lucide] {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

/* スマホ時は中央寄せ・折り返し防止 */
@media (max-width: 768px) {
  .befaf-fixed-return {
    left: 50%;              /* ← right:50% ではなく left に変更 */
    right: auto;
    bottom: 20px;
    transform: translateX(-50%);
    width: auto;
    max-width: 90vw;        /* ← 画面の90%以内に制限 */
    padding: 14px 28px;
    font-size: 15px;
    white-space: nowrap;    /* ← 改行防止 */
  }
}



/* =========================================================
   ビフォアフ仕様：著者ボックス（ブログパーツ用）
========================================================= */
.befaf-author-section {
  margin-top: 40px;
}

.befaf-author-title {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  border-left: 4px solid #00A2FF;
  padding-left: 10px;
  margin-bottom: 16px;
}

/* 全体枠 */
.befaf-author-box {
  display: flex;
  flex-direction: row; /* ← スマホでも横並び維持 */
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 24px;
  font-family: 'Noto Sans JP', 'League Spartan', sans-serif;
}

/* 左ブロック（アイコン＋名前） */
.befaf-author-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 160px;
  padding-right: 20px;
  border-right: 1px solid #ddd; /* ← 仕切り線 */
}

/* アバター */
.befaf-author-avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

/* 名前・肩書き */
.befaf-author-info {
  text-align: center;
}

.befaf-author-name {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}

.befaf-author-position {
  font-size: 13px;
  color: #888;
}

/* 右ブロック（説明・SNS） */
.befaf-author-right {
  flex: 1;
  padding-left: 10px;
}

.befaf-author-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 10px;
}

.befaf-author-sns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.befaf-author-sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #777;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.befaf-author-sns a:hover {
  opacity: 0.8;
}

.befaf-author-sns i[data-lucide] {
  width: 16px;
  height: 16px;
}

/* スマホ対応：横並びを維持しつつ余白調整 */
@media (max-width: 768px) {
  .befaf-author-box {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
  }

  .befaf-author-left {
    width: 120px;
    padding-right: 16px;
    border-right: 1px solid #ddd;
  }

  .befaf-author-avatar {
    width: 60px;
    height: 60px;
  }

  .befaf-author-desc {
    font-size: 13.5px;
  }
}