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

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

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

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

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

/* ロゴとタイトルの位置や横並びを保ちたいなら------------- */

.custom-header-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-header-title-wrap img {
  width: 60px; /* 必要に応じて調整 */
  height: auto;
  margin-right: 10px;
}
.custom-header-title-wrap .site-title-text {
  font-size: 28px;
  font-weight: bold;
}
/* ロゴとタイトルの位置や横並びを保ちたいなら　ここまで------------ */

/* ------------------------
   隷書体フォントを読み込む
------------------------ */
@font-face {
  font-family: 'HKReiKK';
  src: url('/wp/wp-content/themes/cocoon-child-master/fonts/hkreikk.woff') format('woff'),
       url('/wp/wp-content/themes/cocoon-child-master/fonts/hkreikk.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ------------------------
   サイトタイトルロゴテキストに適用
------------------------ */
.site-name {
  font-family: 'HKReiKK', sans-serif !important;
}

/* ------------------------
   サイトタイトルロゴの大きさ
------------------------ */

.site-name {
  font-size: 48px; /* ← ここで好きなサイズに変更 *//* これは効いていない */
  line-height: 1.2; /* 行間の調整、必要なら */
}

/* ------------------------
ロゴとタイトルを並べる目的   header,php 末尾に追加したクラスに隷書体を <div class="site-title-text"><?php bloginfo('name'); ?></div>
------------------------ */
.site-title-text {
  font-family: 'HKReiKK', sans-serif !important; /* ← ここを隷書体に */
  font-size: 48px; /* サイズ調整 *//* これは効いていない */
  line-height: 1.2;
}


/* 本来のサイトタイトル（併存できないロゴマークのヘッダー内表示）をオフとする */
.site-name-text {
  display: none;
}

/* ------------------------
   ロゴとタイトルをヘッダー内に置く
header-container.php のカズタマイズとともに
------------------------ */


/* 親ヘッダーコンテナを相対配置にする（必要なら） */
.header-in {
  position: relative;
}

/* タイトルラッパーを絶対配置して中央揃え */
.custom-header-title-wrap {
  position: absolute;
  top: 50%;
  left: 0; /* 左端に寄せたい場合 */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.custom-header-title-wrap img {
  width: 60px;
  height: auto;
  margin-right: 10px;
}

.custom-header-title-wrap .site-title-text {
  font-size: 32px; /* これのみが効いている */
  font-family: 'HKReiKK', sans-serif;
  font-weight: normal;
}

/* ------------------------
   ロゴとタイトルが左につまりすぎるのを防ぐ
------------------------ */
.custom-header-title-wrap {
  margin-left: 40px; /* ← 左の余白をここで調整 */
}

/* ------------------------
   馬ロゴのサイズ
------------------------ */
.custom-header-title-wrap img {
  width: 40px; /* ← ここでサイズを変更 */
  height: auto;
}

/* ------------------------
固定ページの日付非表示
------------------------ */
.home .date-tags,
.home .update-date {
  display: none !important;
}



/* ------------------------
ヘッダーがスクロール時に残るように
------------------------ */
.header-container {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}
.admin-bar .header-container {
  top: 32px; /* ログインバーがある場合のずれ補正 */
}
body {
  padding-top: 40px; /* 固定ヘッダーの高さ分だけ上に空ける */
}



/* ------------------------
確実な全幅
------------------------ */
/* 全ページ共通で左右の空きを消す場合 */
.wrap,
.content,
.article,
.entry-content,
.container,
#main,
.main,
#content,
.l-entry,
.l-content,
.l-inner,
.l-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* ページ内部にもし白い余白があれば */
body,
html {
  padding: 0 !important;
  margin: 0 !important;
}