@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* ライター情報（投稿者名/サイト名の署名行）を非表示にする。
   Cocoon本体はこのブロックの表示/非表示テーマ設定を持たないため
   （post_author_visibleは「著者名かサイト名か」の切替のみでブロック自体は消えない）、
   子テーマのCSSで非表示にする。 */
.footer-meta {
  display: none;
}

/* フッター最下部の、サイト名テキストリンク（ロゴ枠）を削除する。
   Cocoon本体はここに表示/非表示のテーマ設定を持たない（常に出力される）ため、
   子テーマのCSSで非表示にする。直下の著作権表記（.source-org.copyright）に
   同じサイト名がすでに入っているため重複表示にもなる。 */
.footer-bottom-logo {
  display: none;
}

/* 著作権表記を中央寄せにする。
   .footer-bottom-content は float: right; のため幅が文字幅に縮んでおり、
   text-align だけでは中央寄せにならない。float を解除して全幅化した上で
   著作権行だけ中央寄せにする（フッターメニューの寄せは変更しない）。 */
.footer-bottom-content {
  float: none;
  width: 100%;
}
.footer-bottom-content .source-org.copyright {
  text-align: center;
}

/* ==================================================================
   ヘッダーをショップサイト（www.twin-stars.co.jp / new-shop）に合わせる。
   マークアップは tmp/header-container.php（子テーマ上書き）、
   スクロール連動スクリプトは tmp-user/footer-insert.php を参照。
   グローバルメニュー（検索・ナビ・ハンバーガー）は削除し、
   ロゴ横の「ブログ／ショップ」切り替えタブ（.site-switch）に置き換えている。
   ================================================================== */

/* ショップサイト本体のフォント（#site-top-header専用）。
   Cocoon本体のbodyフォント（Hiragino系・18px）を継承すると、行の高さが変わって
   align-items:centerのロゴ位置が数pxずれるため、ショップ側と同じ指定を明示する。

   フォントファイルは /new-shop/css/fonts/ を直接参照せず、子テーマ内に
   サブセット（fonts/NotoSansJP-Regular-jis.woff2、約1.2MB）として自前で持つ。
   理由：本番で /new-shop 側がwwwありに301リダイレクトする構成になっており、
   ページ（wwwなし）とは別オリジン扱いになるため、フォントはCORSでブロックされる
   （画像やCSSと違い、フォントはブラウザがクロスオリジンを許可しない）。
   同一オリジンの自前ファイルにすることでCORS自体を回避している。

   サブセットの収録文字は cp932（JIS第1・第2水準漢字＋かな・記号・NEC特殊文字）全部。
   以前はヘッダーの文字だけ（約33KB）にしていたが、本文でNoto Sans JPと
   フォールバック（Windowsでは游ゴシック）が1文字単位で混ざり、太さが不揃いに
   見えたため本文もカバーする範囲に広げた。元ファイルは
   /new-shop/css/fonts/NotoSansJP-Regular.ttf（pyftsubset --flavor=woff2 で作成）。 */
@font-face {
  src: url("fonts/NotoSansJP-Regular-jis.woff2") format("woff2");
  font-family: "Noto Sans JP";
  font-style: normal;
  font-display: swap;
}

/* --- #site-top-header（ロゴ＋サイト切り替えタブ＋電話番号バー） --- */
#site-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  font: 300 14px/1.9 "Noto Sans JP", Arial, Verdana, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  color: #000;
}
#site-top-header .site-top-header__brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
#site-top-header .site-top-header__logo { display: inline-block; line-height: 0; }
#site-top-header .site-top-header__logo img { height: 48px; width: auto; }
#site-top-header .site-top-header__contact-wrap { text-align: right; }
#site-top-header .site-top-header__contact {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}
#site-top-header .site-top-header__sub {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: normal;
  color: #666;
  line-height: 1.4;
}
#site-top-header .site-top-header__contact a { color: #c8161d; text-decoration: none; }
#site-top-header .site-top-header__hours { font-size: 13px; font-weight: normal; color: #666; }

/* --- .shop-link（ロゴ＝ブログトップと役割を分けるための「ショップへ」導線ボタン） --- */
.shop-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #c8161d;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s ease;
}
.shop-link:hover {
  background: #a3121a;
  color: #fff;
  text-decoration: none;
}
.shop-link__arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.shop-link:hover .shop-link__arrow {
  transform: translateX(3px);
}

@media screen and (max-width: 799px) {
  #site-top-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
  }
  #site-top-header .site-top-header__brand { flex-direction: column; gap: 8px; }
  #site-top-header .site-top-header__logo img { height: 36px; }
  #site-top-header .site-top-header__contact-wrap { text-align: center; }
  #site-top-header .site-top-header__contact { font-size: 14px; white-space: normal; }
  #site-top-header .site-top-header__sub { font-size: 12px; }
}
/* スクロール連動表示（fixed化・隠す/降りてくる）用。tmp-user/footer-insert.php のJSが付け外しする */
#site-top-header.sth-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 600;
  transform: translateY(-100%);
  transition: transform .6s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
#site-top-header.sth-fixed.sth-show { transform: translateY(0); }
#site-top-header.sth-notrans { transition: none !important; }

/* ==================================================================
   コンテンツ部分（一覧ページ／サイドバー／記事詳細ページ）を
   ヘッダーとトンマナを合わせる。リンク色はテーマ設定（外観 > Cocoon設定 >
   全体 > サイトリンク色）を site_link_color = #c8161d に変更済みで、
   ここでは設定側に無いフォントと、リンク色の対象外になっている
   カテゴリーバッジ／ページネーションだけを最小限で上書きする。
   ================================================================== */

/* フォントをヘッダーと同じ Noto Sans JP に統一する（@font-face はヘッダーCSSで宣言済み）。
   文字サイズはCocoon既定（読みやすさ優先）のまま変えない。 */
body {
  font-family: "Noto Sans JP", Arial, Verdana, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}

/* カテゴリーバッジ（本文下・記事一覧）。Cocoon既定は黒（--cocoon-text-color）で、
   リンク色設定の対象外（link_cancelで打ち消されている）ため個別に上書きする。 */
.cat-link {
  background-color: #c8161d;
}

/* ページネーションの現在ページ。同じくリンク色設定の対象外のため個別に上書きする。 */
.pagination .current,
.page-numbers.current {
  background-color: #c8161d;
  border-color: #c8161d;
  color: #fff;
}

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

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

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