@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* 記事本文の背景をグレーにする */
/* ページ全体の背景を #333333 に */
body {
  background: #333333;
  color: #ffffff;  /* 文字色を白にしないと読めなくなるので必須 */
}

/* 記事本文の背景も #333333 に */
.article {
  background: #333333;
  color: #ffffff;  /* 記事内の文字も白に */
  padding: 20px;   /* 内側余白を付けて見やすく */
  border-radius: 8px; /* 角を丸める（不要なら消す） */
}


/* ======== Week Nav Floating Buttons ======== */
.week-fab {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  line-height: 1;
  opacity: .96;
}
.week-fab:hover { opacity: 1; }

.week-fab-left  { left: 12px; }
.week-fab-right { right: 12px; }

.week-fab.is-disabled {
  pointer-events: none;
  opacity: .4;
}

:root{
  /* フッターが見えていない通常時の下余白（調整OK） */
  --week-fab-base-bottom: 12px;
  /* JSで動的に上乗せする量（初期0） */
  --week-fab-bottom-dyn: 0px;
}

/* ======== Mobile: 追従ボタンを下部寄せ（やや上にずらす） ======== */
:root{
  /* 好みで 40px〜120px くらいに調整可（ずらし量） */
  --week-fab-mobile-bottom-gap: 72px;
}

@media (max-width: 768px) {
  .week-fab {
    top: auto;                          /* 上固定を無効化 */
    bottom: calc(var(--week-fab-mobile-bottom-gap) + env(safe-area-inset-bottom, 0px));
    transform: none;                     /* 縦中央補正を解除 */
    padding: .5rem .7rem;
    font-size: 90%;
  }
  .week-fab-left  { left: 8px;  right: auto; }
  .week-fab-right { right: 8px; left:  auto; }
}

/* （任意）横向きは少しだけ上げたい場合 */
@media (max-width: 768px) and (orientation: landscape) {
  .week-fab { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* もしフッターに固定バーがあるなら、その分だけさらに上げたい場合の例 */
body.has-sticky-footer .week-fab {
  bottom: calc(var(--week-fab-mobile-bottom-gap) + env(safe-area-inset-bottom, 0px) + 56px);
}