@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ヘッダー固定 */
/* 常時表示のフィックスヘッダーを非表示にする　*/
.l-fixHeader {
display:none;
}
/* 通常のヘッダーをトップに固定する　ヘッダーの高さ指定*/
.l-header {
position: sticky;
position: -webkit-sticky;
top: var(--swl-adminbarH,0);
/* ボーダーの設定
border-bottom: solid 1px rgba(0,0,0,.1);
border-color: #000000;*/
}

/* =========================================================
   HonkiEigo / SWELL 追加CSS（整理・全部入り）
   - ヘッダー固定：PC 72px / SP 48px
   - 言語バー：固定表示（SPは2行、<=360pxだけ横スワイプ）
   - ドロワー：スクロール可 / 背景スクロールロック / 言語バー直下に密着
   - PCでは「Episode一覧ボタン」を非表示（SPのみ表示）
   - hiddenは必ず勝つ
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --he-header-pc: 72px;
  --he-header-sp: 48px;
  --he-header-h: var(--he-header-pc);

  /* WP管理バー（ログイン時） */
  --he-adminbar: var(--wp-admin--admin-bar--height, 0px);

  /* ヘッダー直下の開始位置 */
  --he-top: calc(var(--he-header-h) + var(--he-adminbar));

  --he-z: 9999;

  /* JSが実測して上書き（保険値） */
  --he-langbar-h: 56px;

  /* 本文押し下げ微調整（PC/SP別） */
  --he-langbar-adjust-pc: 14px;
  --he-langbar-adjust-sp: 20px;

  /* ドロワーを言語バーに密着（隙間調整） */
  --he-drawer-gap: 0px;
}

@media (max-width: 768px){
  :root{ --he-header-h: var(--he-header-sp); }
}

/* ---------- Hidden must win ---------- */
.he-drawer[hidden],
.he-overlay[hidden]{
  display: none !important;
}

/* ---------- Scroll lock (drawer open) ---------- */
html.he-scrolllock,
body.he-scrolllock{
  overflow: hidden !important;
  height: 100%;
}

/* =========================================================
   Lang bar (fixed)
   ========================================================= */
.he-langbar{
  position: fixed;
  top: var(--he-top);
  left: 0;
  right: 0;
  z-index: var(--he-z);

  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;

  padding: 10px 12px;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-sizing: border-box;
}

/* Pill / Buttons */
.he-pill{
  font-weight: 700;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.he-pill--current{
  background: #FFF3D6;
  border: 1px solid #F1D18A;
}

.he-btn{
  font-weight: 700;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.he-btn--menu{ cursor: pointer; }
.he-btn--close{ cursor: pointer; }

/* =========================================================
   PC: Episode一覧ボタンを非表示（SPのみ残す）
   ========================================================= */
@media (min-width: 769px){
  .he-langbar .he-btn--menu,
  .he-langbar #he-episodes-btn,
  .he-langbar #he-open-episodes{
    display: none !important;
  }
}

/* =========================================================
   Overlay / Drawer
   ========================================================= */
.he-overlay{
  position: fixed;
  inset: 0;
  z-index: calc(var(--he-z) - 1);
  background: rgba(0,0,0,.35);
}

/* hiddenを壊さない：開いた時だけflex */
.he-drawer{
  position: fixed;
  z-index: var(--he-z);

  /* 言語バー直下 */
  top: calc(var(--he-top) + var(--he-langbar-h) + var(--he-drawer-gap));

  right: 12px;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - (var(--he-top) + var(--he-langbar-h) + 18px));

  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  overflow: hidden;

  flex-direction: column;
}
.he-drawer:not([hidden]){
  display: flex;
}

.he-drawer__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.he-drawer__title{ font-weight: 800; }

.he-drawer__body{
  padding: 10px 12px 14px;

  /* Drawer scroll fix */
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Drawer inside */
.he-series-links{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.he-episodes details{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 8px 10px;
  margin: 10px 0;
}
.he-episodes summary{
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.he-episodes summary::-webkit-details-marker{ display:none; }

.he-episodes a{
  display:block;
  padding: 6px 8px;
  border-radius: 10px;
  text-decoration: none;
}
.he-episodes a:hover{ background: rgba(0,0,0,.04); }
.he-episodes a.is-current{
  background: rgba(0,0,0,.06);
  font-weight: 800;
}

/* =========================================================
   Epページ：本文が言語バーに隠れないように（PC/SP）
   ※JSが body に .he-ep-page を付与し、--he-langbar-h を実測更新
   ========================================================= */
body.he-ep-page .l-content{
  padding-top: calc(var(--he-langbar-h) + var(--he-langbar-adjust-pc)) !important;
}

@media (max-width: 768px){
  body.he-ep-page .l-content{
    padding-top: calc(var(--he-langbar-h) + var(--he-langbar-adjust-sp)) !important;
  }

  /* 見出しジャンプ対策 */
  body.he-ep-page .c-postContent h2,
  body.he-ep-page .c-postContent h3,
  body.he-ep-page .c-postContent h4{
    scroll-margin-top: calc(var(--he-langbar-h) + 60px);
  }
}

/* =========================================================
   SP: 言語バーを2行表示（切れ対策）
   ========================================================= */
@media (max-width: 768px){

  .he-langbar{
    padding: 6px 8px !important;
    min-height: 56px;
    gap: 8px !important;
    justify-content: center !important;
  }
  .he-langbar > *{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* <br> を活かして2行に */
  .he-pill,
  .he-btn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    line-height: 1.1;
    white-space: normal !important;
    padding: 6px 6px !important;
  }

  /* Episodeボタンだけ少し狭めたい時（任意） */
  .he-btn--menu{
    flex: 0.85 1 0 !important;
  }
}

/* =========================================================
   超小画面だけ：横スワイプ（<=360px）
   ========================================================= */
@media (max-width: 360px){

  .he-langbar{
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x proximity;
    padding-left: 10px !important;
    padding-right: 10px !important;

    scrollbar-width: none;
  }
  .he-langbar::-webkit-scrollbar{ display:none; }

  .he-langbar > *{
    flex: 0 0 auto !important;
    min-width: 120px;
    scroll-snap-align: start;
  }
}

/* =========================================================
   SP: Drawerを言語バー直下に密着＆下まで
   ========================================================= */
@media (max-width: 768px){
  #he-episodes-panel.he-drawer{
    left: 0;
    right: 0;
    width: 100vw;

    top: calc(var(--he-top) + var(--he-langbar-h) + var(--he-drawer-gap)) !important;
    bottom: 0;

    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  @supports (height: 100dvh){
    #he-episodes-panel.he-drawer{
      height: calc(100dvh - (var(--he-top) + var(--he-langbar-h) + var(--he-drawer-gap))) !important;
      max-height: none !important;
    }
  }
}

/* =========================================================
   並び順（SP）：表示中 / Episode一覧 / 言語切替
   ========================================================= */
@media (max-width: 768px){
  .he-langbar .he-pill--current,
  .he-langbar #he-current-lang{ order: 1; }

  .he-langbar .he-btn--menu,
  .he-langbar #he-episodes-btn,
  .he-langbar #he-open-episodes{ order: 2; }

  .he-langbar .he-btn--switch,
  .he-langbar #he-switch-lang{ order: 3; }
}

/* =========================================================
   並び順（PC）：US表示中だけ左右入れ替え（任意）
   ※JSが body に .he-lang-us を付けている前提
   ========================================================= */
@media (min-width: 769px){

  body.he-lang-us .he-langbar .he-pill--current,
  body.he-lang-us .he-langbar #he-current-lang{
    order: 1;
  }

  /* EpisodeボタンはPCで非表示なので orderは残しても害なし */
  body.he-lang-us .he-langbar .he-btn--menu,
  body.he-lang-us .he-langbar #he-episodes-btn,
  body.he-lang-us .he-langbar #he-open-episodes{
    order: 2;
  }

  body.he-lang-us .he-langbar .he-btn--switch,
  body.he-lang-us .he-langbar #he-switch-lang{
    order: 3;
  }
}

/* ===== Menu title + Course TOP button ===== */
.he-drawer__title{
  font-size: 16px;
  font-weight: 900;
}

/* ドロワー/サイドバー共通ボタン */
.he-toplink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.he-toplink:hover{ background: rgba(0,0,0,.04); }

/* PCサイドバー見出し（JSが自動で挿入） */
.he-ep-sidebar-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.he-ep-sidebar-title{
  font-size: 18px;
  font-weight: 900;
}