@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){
  /*必要ならばここにコードを書く*/
}

/* ==========================================
   ヘッダータイトル・ロゴ装飾
   ========================================== */

/* ヘッダー全体の設定（背景画像の表示調整） */
.header-container-in {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40px 15px; /* 上下の余白 */
}

/* ヘッダーコンテナに背景画像をフィット＆横リピート設定 */
#header-container-in.header-container-in.hlt-center-logo {
  /* 画像の指定（メディアライブラリのパス） */
  background-image: url('https://cyoutaisyouji.com/wp-content/uploads/2026/08/head_back-1.png') !important;
  
  /* 横方向にのみリピート設定 */
  background-repeat: repeat-x !important;
  
  /* 高さは100%に固定し、横幅はアスペクト比を維持して自動伸縮 */
  background-size: auto 100% !important;
  
  /* 画像の位置を中央に配置 */
  background-position: center center !important;
}

/* 【変更点】ヘッダー内のタイトルフォント＆白抜き装飾＆可変サイズ */
#header-container-in .site-name-text,
#header-container-in .site-title a {
  /* ① フォントの変更（太く見やすい角ゴシック体） */
  font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W6", "Meiryo", sans-serif;
  font-weight: 900; /* 超太字 */

  /* ② 白抜き文字の設定（文字は白、周囲に緑の太線・黒影） */
  color: #ffffff !important;
  text-shadow:
    -2px -2px 0 #1e4a25,
     2px -2px 0 #1e4a25,
    -2px  2px 0 #1e4a25,
     2px  2px 0 #1e4a25,
    -3px  0   0 #1e4a25,
     3px  0   0 #1e4a25,
     0  -3px  0 #1e4a25,
     0   3px  0 #1e4a25,
     3px  3px 8px rgba(0, 0, 0, 0.7); /* くっきり見せるための影 */

  /* ③ 画面サイズに合わせた可変フォントサイズ */
  font-size: clamp(1.5rem, 4vw + 1rem, 2.6rem) !important;
  line-height: 1.3;
  display: inline-block;
  letter-spacing: 0.05em;
}

/* キャッチフレーズ（サブタイトル）もヘッダー内のみ白抜き調整 */
#header-container-in .tagline {
  color: #ffffff !important;
  font-weight: bold;
  font-size: clamp(0.9rem, 2vw + 0.5rem, 1.2rem) !important;
  text-shadow:
    -1px -1px 0 #1e4a25,
     1px -1px 0 #1e4a25,
    -1px  1px 0 #1e4a25,
     1px  1px 0 #1e4a25,
     2px  2px 5px rgba(0,0,0,0.8);
  margin-top: 5px;
}

/* 【追加】フッター内の会社名は白抜きを解除して通常の文字色にする */
#footer .site-name-text,
#footer .site-title a,
.footer-bottom .site-name-text,
.footer-bottom .site-title a {
  color: #2e6b38 !important; /* 深い緑色またはお好みの文字色 */
  text-shadow: none !important;
  font-weight: bold;
}

/* トップページのみ タイトル・SNSボタン・投稿日時を非表示 */
.home .entry-title,
.home .sns-share,
.home .sns-follow,
.home .date-tags,
.home .post-date-box {
  display: none !important;
}

/* ==========================================
   1. グローバルナビ（メニューバー）全体の背景透過
   ========================================== */
#navi,
.navi,
.navi-in,
#navi .navi-in > ul {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ==========================================
   2. メニュー項目のぷっくりシール風（茶色）デザイン
   ========================================== */
#navi .navi-in a {
  /* ベースデザイン（茶色・角丸・文字白） */
  background: linear-gradient(to bottom, #8b5a2b 0%, #5c3a1e 50%, #422813 51%, #6d4220 100%) !important;
  color: #ffffff !important;
  font-weight: bold;
  border-radius: 12px !important; /* 角丸 */
  padding: 8px 20px !important;
  margin: 0 6px !important;
  display: inline-block;
  
  /* 立体感・ぷっくり感を与えるシャドウとボーダー */
  border: 2px solid #a67c52 !important;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.3), /* 外側の影 */
    inset 0 2px 2px rgba(255, 255, 255, 0.5), /* 上部のテカリハイライト */
    inset 0 -2px 3px rgba(0, 0, 0, 0.4) !important;
  
  /* テキストの影で可読性UP */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  transition: all 0.2s ease;
}

/* ホバー時（マウスを乗せた時）のちょっと押し込まれるアニメーション */
#navi .navi-in a:hover {
  transform: translateY(2px);
  box-shadow: 
    0 2px 3px rgba(0, 0, 0, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
  opacity: 0.95;
}

/* ==========================================
   3. ページ見出し（会社概要などのH1）をヘッダー内に表示
   ========================================== */
/* ヘッダーコンテナの位置基準を設定 */
#header-container-in {
  position: relative !important;
}

/* ページ見出し（.entry-title）をヘッダー画像の上に重ねて配置 */
.page .entry-title,
.single .entry-title {
  position: absolute;
  top: -20px; /* 上からの位置（調整可） */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  
  /* --- 文字の範囲 ＋ 左右50px の設定 --- */
  display: inline-block;
  width: auto !important;
  max-width: calc(100% - 40px); /* 画面からはみ出るのを防止 */
  padding: 12px 50px !important; /* 左右50pxの余白 */
  margin: 0 !important;
  box-sizing: border-box;

  /* --- 背景デザインの設定 --- */
  /* 透過30%の薄茶色（#8b5a2bの30%透明度 = rgba(139, 90, 43, 0.3)） */
  /* SVGで10周期の横向き波線を背景として描画 */
  background-color: rgba(139, 90, 43, 0.3) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q25 20, 50 50 T100 50 T150 50 T200 50 T250 50 T300 50 T350 50 T400 50 T450 50 T500 50 T550 50 T600 50 T650 50 T700 50 T750 50 T800 50 T850 50 T900 50 T950 50 T1000 50' fill='none' stroke='%238b5a2b' stroke-width='6' stroke-opacity='0.6'/%3E%3C/svg%3E") !important;
  background-repeat: repeat-y !important; /* 上下に繰り返して波線を並べる */
  background-size: 100% 10% !important;   /* 高さを10%にすることでちょうど10本並ぶ */
  background-position: center !important;

  /* --- 枠線・角丸等の仕上げ --- */
  border: 1px solid rgba(139, 90, 43, 0.5) !important;
  border-radius: 8px !important;
  text-align: center;
  
  /* 文字デザイン（白抜き・深緑縁取り） */
  color: #ffffff !important;
  font-weight: 900;
  font-size: clamp(1.4rem, 3vw + 0.8rem, 2.2rem) !important;
  text-shadow:
    -2px -2px 0 #1e4a25,
     2px -2px 0 #1e4a25,
    -2px  2px 0 #1e4a25,
     2px  2px 0 #1e4a25,
     2px  2px 6px rgba(0, 0, 0, 0.6) !important;
}