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

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

.logo-image {
  padding: 0px 0;
  font-size: inherit;
}

.cta-box {
border: solid 1px #9d9d9d;
border-radius: 8px;
background-color: #fff;
color:#444;
}

/* ヘッダーのサイト名（立派に見せる） */
.site-name-text {
  display: inline-block;
  font-family: 'Caudex', 'Noto Sans JP', 'Roboto Condensed', sans-serif;
  /* font-size: 48px; */         /* PC用。大きさはお好みで */
  /* font-weight: 900; */
  /* letter-spacing: 3px; */
  text-transform: uppercase;
  color: #ffffff;          /* 白文字（黒背景想定） */
  /* text-shadow: 0 6px 18px rgba(0,0,0,0.6); */
  /* line-height: 1; */
  /* padding: 6px 12px; */
  /* border-radius: 6px; */
  /* background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.05)); */
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.4) inset; */
}
/*ヘッダーレイアウトがトップメニューのとき*/
.header-container-in.hlt-top-menu .site-name-text{
  font-size: 48px;
}

/*ヘッダーレイアウトがトップメニュー（小）のとき*/
.header-container-in.hlt-top-menu.hlt-tm-small .site-name-text{
  font-size: 48px;
}

/* 全体設定：ヘッダーを相対位置にして内部要素を配置 */
header.site-header, .site-header {
  position: relative;
}

/* ブランド補助エリア（サブタイトル＋電話） */
.site-branding-extra {
  position: relative;
  width: 100%;
  pointer-events: none; /* 電話リンクだけ有効にするための下準備 */
}

/* サブタイトル（HAIRCUT-B の下） */
.site-subtitle {
  display: block;
  text-align: center;
  font-family: 'Noto Sans JP', 'Roboto', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 2px;
  text-transform: lowercase;
  margin-top: 6px;
  pointer-events: none;
}

/* 右上の電話番号 */
.site-tel {
  position: absolute;
  top: 18px;  /* ヘッダー上端からの位置 調整可 */
  right: 24px; /* 右端からの余白 調整可 */
  pointer-events: auto;
  z-index: 20;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: rgba(0,0,0,0.25); /* アクセント背景（任意） */
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* 電話リンクの見た目 */
.site-tel a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
}

/* スマホ時の調整（小画面では右上を少し縮小） */
@media (max-width: 800px) {
  .site-subtitle { font-size: 11px; margin-top: 4px; }
  .site-tel { top: 12px; right: 12px; font-size: 13px; padding: 5px 8px; }
}


/* 共通スタイル：フッター内の電話リンク（最初は非表示） */
.site-tel-footer {
  display: none; /* 初期は非表示（デスクトップはヘッダーの電話を使う想定） */
  text-align: center;
  padding: 12px 0;
  background: transparent;
}

.site-tel-footer a {
  color: #ffffff;            /* フッター背景に合わせて調整 */
  background: rgba(0,0,0,0.45);
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* ヘッダーの電話（デスクトップで表示しているもの） */
.site-tel { /* 既にあるクラス名に合わせて調整 */
  display: block;
}

/* スマホ（例：幅800px以下）では ヘッダーの電話を非表示にして
   フッターの電話を表示する */
@media (max-width: 800px) {
  .site-tel {               /* ヘッダーの電話を消す */
    display: none !important;
  }

  .site-tel-footer {        /* フッターの電話を表示 */
    display: block !important;
  }

  /* フッターの電話を下端に固定（必要なら有効化）
     コメントアウトしておくので、下の2行を有効化すれば固定表示になります */
  /*
  .site-tel-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
  }
  .site-tel-footer a { width: calc(100% - 24px); display:block; margin: 0 auto; text-align:center; }
  */
}

/* 装飾画像を左に置く（デスクトップ） */
.article h2 {
  /* 親の装飾を上書きする（必要なら !important をつける） */
  background-image: url('https://f-hcb.sakura.ne.jp/haircut-b.com/wp-content/themes/cocoon-child-master/img/midashi_haircut.png');
  background-repeat: no-repeat;
  background-position: left center;          /* 左中央に配置 */
  background-size: auto 60px;               /* 高さを56pxに揃える（画像比率を維持） */
  padding-left: 100px;                       /* 画像幅 + 余白（調整可） */
  color: #0f0a00;                              /* 文字色 */
  background-color: rgb(255 255 255 / 18%);       /* 画像が薄い時の読みやすさ確保用 */
  border: none;                             /* 必要なら親の枠線を消す */
  /* box-shadow: 0 6px 18px rgba(0,0,0,0.6); */
  font-size: 28px;
  font-weight: 800;
}

/* モバイルでは画像を縮小して余白も詰める */
@media (max-width: 800px) {
  .article h2 {
    background-size: auto 40px;
    padding-left: 64px;
    font-size: 20px;
  }
}

/* すべての固定ページの日付を非表示 */
body.page .date-tags,
body.page .entry-meta {
  display: none !important;
}


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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  #header .site-name-text {
    font-size: 40px;
    letter-spacing: 1px;
    padding: 4px 8px;
  }

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  #header .site-name-text {
    font-size: 40px;
    letter-spacing: 1px;
    padding: 4px 8px;
  }

}