/* ===== header .upper_kenko（SCSS → 純CSS 版 / md, lg のみ反映）===== */

/* base */
header .upper_kenko {
  height: 100%;
  position: relative;
  z-index: 2;
  box-shadow: 0px 1px 4px -2px rgba(0,0,0,0.24);
  background-color: #3364b3;
}
/* header .upper_kenko::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: 0;
  background-color: #45B035;
} */

header .upper_kenko .inner {
  height: 100%;
  overflow: hidden;
  position: relative;
}
header .upper_kenko .inner .home_icon {
  position: relative;
  opacity: 1;
  transition: 0.24s cubic-bezier(.25,.46,.45,.94); /* $cubic240ms */
  justify-content: center;
}
header .upper_kenko .inner .home_icon::before,
header .upper_kenko .inner .home_icon::after {
  content: none;
}

header .upper_kenko .inner .indicator {
  position: absolute;
  width: calc(100% - 120px);
  overflow: hidden;
  font-size: 14px;
  top: 100%;
  transform: translateY(0%);
  opacity: 0;
  transition: 0.24s cubic-bezier(.25,.46,.45,.94); /* $cubic240ms */
}
header .upper_kenko .inner .indicator span {
  display: block;
  word-break: keep-all;
  width: max-content;
  position: relative;
}

header .upper_kenko .inner .header_s_box {
  position: absolute;
  right: 8px;
}

/* ----- header.ts_active での upper_kenko の変化（base）----- */
header.ts_active .upper_kenko .header_s_box {
  background: #FFFFFF; /* $white */
  padding-left: 8px;
  box-shadow: -3px 0px 4px -3px rgba(0,0,0,0.4);
}
header.ts_active .upper_kenko .header_s_box::before {
  opacity: 0;
}
header.ts_active .upper_kenko .header_s_box .header_s_form {
  width: calc(64vw - 48px);
  padding: 4px 16px 4px 16px;
  margin-right: 48px;
  border-radius: 24px 0 0 24px;
  transition:
    width 0.48s cubic-bezier(.79,.21,.06,.81),
    padding 0.48s cubic-bezier(.79,.21,.06,.81),
    margin-right 0.48s cubic-bezier(.79,.21,.06,.81),
    border-radius 0.48s cubic-bezier(.79,.21,.06,.81); /* $cubic480ms */
}
header.ts_active .upper_kenko .header_s_box .header_s_btn {
  width: 48px;
  opacity: 1;
}


/* ===================== md (>=768px) ===================== */
@media screen and (min-width: 920px) {

  /* 親はflex＆絶対配置の基準。帯の上下も少し詰める */
  header .upper_kenko .inner{
    display: flex;
    align-items: center;        /* 下寄せなら flex-end でもOK */
    position: relative;
    /* padding-top: 10px;
    padding-bottom: 10px; */
    overflow: hidden;           /* 帯外にはみ出さない */
  }

  /* ロゴリンク：クリック範囲＝中身だけ／絶対中央固定 */
  header .upper_kenko .inner .home_icon{
    float: none;
    flex: 0 0 auto;             /* 0 auto はNG。0 0 auto が正 */
    min-width: auto;
    display: block;
    width: max-content;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
  }

  /* ロゴ画像：少し小さめ */
  header .upper_kenko .inner .home_icon img{
    display: block;
    margin: 0 auto;
    height: 52px;               /* 50–56pxでお好み調整 */
    width: auto;
    position: relative;
    z-index: 2;
  }

  /* 旧：home_icon の擬似要素は無効化（重複防止） */
  header .upper_kenko .inner .home_icon::before,
  header .upper_kenko .inner .home_icon::after{
    content: none;
  }

  /* === キャラ：青帯の下辺ピタッ＆小さめ。帯(.inner)に付与 === */
  header .upper_kenko .inner::before,
  header .upper_kenko .inner::after{
    content: "";
    position: absolute;
    bottom: -10px;                       /* 帯のpaddingぶん下げて“ピタ” */
    width:  clamp(80px, 10vw, 100px);
    height: clamp(80px, 10vw, 100px);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    pointer-events: none;                /* UIを塞がない */
    z-index: 1;                          /* ロゴ(2)の背面 */
  }
  /* 左キャラ：文字から離す（外側へ） */
  header .upper_kenko .inner::before{
    left: 50%;
    transform: translateX(calc(-50% - clamp(160px, 15vw, 180px)));
    background-image: url(/column/wp-content/themes/br-labo/images/header_nobita.webp);
  }
  /* 右キャラ：左右対称 */
  header .upper_kenko .inner::after{
    left: 50%;
    transform: translateX(calc(-50% + clamp(160px, 15vw, 180px)));
    background-image: url(/column/wp-content/themes/br-labo/images/header_kenshirou.webp);
  }

  /* インジケータ（必要なら調整） */
  header .upper_kenko .inner .indicator{
    width: calc(100% - 248px);
    font-size: 18px;
  }

  /* 検索：右端＆やや下寄せ、キャラより前面 */
  header .upper_kenko .inner .header_s_box{
    position: relative;          /* baseのabsoluteを打消し */
    margin-left: auto;
    align-self: flex-end;
    margin-top: 6px;
    flex: 0 0 auto;
    z-index: 3;
  }
  header .upper_kenko .inner .header_s_box .header_s_form{
    width: 200px;
  }
  header .upper_kenko .inner .header_s_box .header_s_form::placeholder{
    opacity: 1;
  }

  /* ts_active（既存維持） */
  header.ts_active .upper_kenko .header_s_box{
    box-shadow: none;
    padding-left: 16px;
    background: none;
    background-image: linear-gradient(90deg, rgba(255,255,255,0), #fff 16px);
  }
  header.ts_active .upper_kenko .header_s_box .header_s_form{
    width: min(50vw - 80px, 424px);
    margin-right: 64px;
  }
  header.ts_active .upper_kenko .header_s_box .header_s_btn{
    width: 64px;
  }
}

/* ===================== lg (>=920px) ===================== */
@media screen and (min-width: 920px) {
  header .upper_kenko .inner .header_s_box::before {
    left: 10px;
  }
  header .upper_kenko .inner .header_s_box .header_s_form {
    height: 40px;
    padding: 10px 16px 10px 32px;
  }
  header .upper_kenko .inner .header_s_box .header_s_btn {
    height: 38px;
  }
}
@media screen and (max-width: 768px) {
  header .upper_kenko .inner .home_icon img {
    width: min(32vw, 312px);
    height: 70%;
    /* max-height: 5vh; */
  }
}

/* 追加した下段の帯 */
header .lower_kenko {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  border-bottom: 1px solid #3364b3;
}
header .lower_kenko .inner {
  display: flex;
  justify-content: center;      /* 中央寄せ */
  align-items: center;
  gap: 20px;
  padding: 10px 16px;
  overflow: visible;
}

/* タブ風リンク */
header .kenko_tabs a {
  display: inline-block;
  padding: 2px 12px;
  font-size: 14px;
  border-radius: 9999px;
  text-decoration: none;
  color: #1c1c1c;
  font-weight: 600;
  white-space: nowrap;
}
@media (min-width: 920px){
  header .kenko_tabs a:hover {
    opacity: 0.7;
  }
}

@media (min-width: 1024px){
  header .kenko_tabs a {
    padding: 2px 20px;
  }
}

/* スマホは縦積みへ */
@media (max-width: 768px){
  .the_post .post_wrap.layout-two-column{ display:block; }
  .the_post .post_wrap.layout-two-column > .post_body,
  .the_post .post_wrap.layout-two-column > .sidebar,
  .the_post .post_wrap.layout-two-column > aside{ width:100%; }
}

/* ── ヘッダーは常にスクロール追従（共通） ── */
#header.header_kenkokeiei_dojo{
  position: sticky; top: 0; z-index: 9999;
  height: auto;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* SP/タブレットはぼかし無効＆帯色固定 */
@media (max-width: 920px){
  #header.header_kenkokeiei_dojo{
    background:#3364b3;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}

/* 上段／下段の余白 */
#header.header_kenkokeiei_dojo .upper_kenko .inner{ padding-top:16px; padding-bottom:16px; }
#header.header_kenkokeiei_dojo .lower_kenko .inner{ padding-top:16px; padding-bottom:16px; }
#header.header_kenkokeiei_dojo .lower_kenko{ position: static; }

/* SPは下段を非表示 */
@media (max-width: 768px){
  #header.header_kenkokeiei_dojo .lower_kenko{ display:none; }
}

/* ========= 920px以上（PC） ========= */
@media (min-width: 920px){
  .menu_toggle{ display:none; }
  header .lower_kenko{ display:block; }
  .kenko_drawer{ display:none; }
}

/* ========= 920px以下（SP/タブレット）：ヘッダー配置 ========= */
@media (max-width: 920px){
  header .upper_kenko .inner{
    display:flex; align-items:center; justify-content:flex-start;
    padding:10px 12px; position:relative; overflow:visible;
  }
  header .upper_kenko .inner .home_icon{
    position:static; transform:none; width:auto; text-align:left; z-index:2;
  }
  header .upper_kenko .inner .home_icon img{ height:40px; width:auto; }
  header .upper_kenko .inner::before,
  header .upper_kenko .inner::after{ content:none; }
  header .upper_kenko .inner .header_s_box{ display:none; } /* 検索はドロワー側 */
  header .lower_kenko{ display:none; }
}

/* === ハンバーガー === */
.header_kenkokeiei_dojo .menu_toggle{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:#fff; border-radius:4px; cursor:pointer; line-height:0;
}
.menu_toggle .bar{ display:none; }
.header_kenkokeiei_dojo .menu_toggle .menu_toggle__bar{
  position:absolute; left:50%; transform:translateX(-50%);
  width:22px; height:2px; border-radius:1px; background:#3364b3;
  transition:transform .24s ease, opacity .24s ease;
}
.header_kenkokeiei_dojo .menu_toggle .menu_toggle__bar:nth-child(1){ top:12px; }
.header_kenkokeiei_dojo .menu_toggle .menu_toggle__bar:nth-child(2){ top:19px; }
.header_kenkokeiei_dojo .menu_toggle .menu_toggle__bar:nth-child(3){ top:26px; }
.header_kenkokeiei_dojo .menu_toggle.is-open .menu_toggle__bar:nth-child(1){
  transform:translateX(-50%) translateY(7px) rotate(45deg);
}
.header_kenkokeiei_dojo .menu_toggle.is-open .menu_toggle__bar:nth-child(2){ opacity:0; }
.header_kenkokeiei_dojo .menu_toggle.is-open .menu_toggle__bar:nth-child(3){
  transform:translateX(-50%) translateY(-7px) rotate(-45deg);
}

/* === ドロワー === */
.kenko_drawer{
  position:fixed; inset:0; width:100vw; height:100dvh; background:#fff; z-index:1001;
  display:flex; flex-direction:column; padding:16px;
  opacity:0; transform:scale(0.98); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.kenko_drawer.is-open{ opacity:1; transform:none; pointer-events:auto; }

/* ドロワーヘッダー */
.kenko_drawer__head{ display:flex; align-items:center; justify-content:space-between; }
.kenko_drawer__logo img{ height:32px; width:auto; }
.kenko_drawer__close{ all:unset; width:36px; height:36px; position:relative; cursor:pointer; }
.kenko_drawer__close::before,
.kenko_drawer__close::after{
  content:""; position:absolute; left:50%; top:50%;
  width:22px; height:2px; background:#151515; border-radius:1px;
}
.kenko_drawer__close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.kenko_drawer__close::after { transform:translate(-50%,-50%) rotate(-45deg); }

/* ── Drawer 中身 ── */
.kenko_drawer__menu,
.kenko_drawer__search,
.kenko_drawer__sns{
  width:min(92vw, 520px);
  margin-left:auto; margin-right:auto;
}

/* メニュー：フラット＋下線区切り */
.kenko_drawer__menu{ padding:12px 0 0; margin-top:8px; }
.kenko_drawer__menu li{ border-bottom:1px solid #e6e9f2; }
.kenko_drawer__menu li:last-child{ border-bottom:0; }
.kenko_drawer__menu a{
  display:block; padding:16px 0; background:none; border-radius:0;
  text-decoration:none; color:#1a1a1a; font-weight:600;width: fit-content;
  padding-right: 0.2em !important;
}
@media (min-width: 768px){
.kenko_drawer__menu{ padding:12px 0 0; margin-top:20px; }
.kenko_drawer__menu a {padding: 20px 0;}
.kenko_drawer__sns {gap: 24px;}
}
/* 検索：右ボタンは使わず、左アイコンのみ */
.kenko_drawer__search{ position:relative; margin-top:18px; }
.kenko_drawer__search.s_box::before{
  left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; opacity:.6; z-index:1;
}
.kenko_drawer__search .s_form{
  width:100%; height:44px;
  padding:10px 16px 10px 40px;    /* 左アイコン分だけ確保 */
  border-radius:9999px; border:1px solid #e6e9f2;
  background:#fff; box-shadow:none;
}
/* 念のため：青い送信ボタンや追加アイコンは完全無効化 */
.kenko_drawer__search .s_btn{ display:none !important; }
.kenko_drawer__search .icon_search{ display:none !important; }

/* SNS：中央寄せ */
.kenko_drawer__sns{
  display:flex;
  justify-content:center;
  /* align-items:center; */
  gap:18px;
  margin-top:22px;
  padding-top:8px;
  list-style:none;
}
.kenko_drawer__sns a{
  text-decoration:none;
  font-size:10px;
  color:#0f3b38;
  font-weight:700;
}
.kenko_drawer__sns li a{
  display:flex;
  align-items:center;
  gap:4px; /* アイコンと文字の間の余白 */
}
.kenko_drawer__sns li a img{
  display:block;
}

/* ドロワー開時は背景スクロール固定 */
body.drawer-open{ overflow:hidden; }

/* ハンバーガー表示制御 */
@media (min-width:921px){ .header_kenkokeiei_dojo .menu_toggle{ display:none; } }
@media (max-width:919.98px){ .header_kenkokeiei_dojo .menu_toggle{ display:inline-flex; } }

/* にじみ抑制（微調整） */
.header_kenkokeiei_dojo .menu_toggle .menu_toggle__bar{
  transform: translateX(-50%) translateZ(0);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.header_kenkokeiei_dojo .menu_toggle.is-open .menu_toggle__bar:nth-child(1){
  transform: translateX(-50%) translateY(7px) rotate(45deg) translateZ(0);
}
.header_kenkokeiei_dojo .menu_toggle.is-open .menu_toggle__bar:nth-child(3){
  transform: translateX(-50%) translateY(-7px) rotate(-45deg) translateZ(0);
}
/* === Drawer検索のアイコン位置を固定（最優先で上書き） === */
.kenko_drawer__search { 
  position: relative;          /* ← 基準にする */
  height: 44px;                /* フォームと合わせる */
  margin-top: 40px;
  margin-bottom: 24px;
}

.kenko_drawer__search.s_box::before{
  position: absolute;          /* 明示（保険） */
  left: 14px;
  top: 50%;
  transform: translateY(-50%); /* 縦センター */
  width: 18px;
  height: 18px;
  opacity: .6;
  z-index: 1;
}

.kenko_drawer__search .s_form{
  width: 200px;
  height: 44px;
  padding: 10px 16px 10px 40px; /* 左はアイコンぶん */
  border-radius: 9999px;
  border: 1px solid #757575;
  background: #fff;
  box-shadow: none;
}

/* 念のため：右側の送信ボタンや追加アイコンは出さない */
.kenko_drawer__search .s_btn{ display:none !important; }
.kenko_drawer__search .icon_search{ display:none !important; }
/* Drawer検索の虫眼鏡を前面に＆クリックを邪魔しない */
.kenko_drawer__search.s_box::before{
  z-index: 5;              /* ← 入力欄より前面に */
  pointer-events: none;    /* ← クリックを邪魔しない */
  opacity: .75;            /* 少し濃く（見えづらければ調整） */
}

/* 念のため：入力欄の重なり順は下げておく */
.kenko_drawer__search .s_form{
  position: relative;
  z-index: 1;
}