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

/************************************
** ここから追加CSS
************************************/

/*ヘッダーの高さと背景色*/
.header{
  height: 80px;
  background: rgba(255,255,255) !important;
  backdrop-filter: blur(10px);
}

/*header-inのマージン*/
.header-in{
  margin-top:10px;
}

/* ロゴ画像サイズ調整 */
.header-container.fixed-header .site-logo img{
  max-height: 40px;
  width: auto;
}

/*ヘッダーロゴを左寄せ*/
.site-logo,
.logo{
  margin-left:0;
  text-align:left;
}

/* スマホ以外はnavi非表示*/
@media (min-width: 769px){
  .navi{
    display:none;
  }
} 

/* 追従ヘッダーの高さ */
.header-container.fixed-header{
  height: 80px;          /* ← 好きな高さに変更 */
}

/*ボタン透明化*/
/******************************************
** 透明にしたいボタンブロックをクリック
** 右の設定 → 高度な設定 → 追加CSSクラスにbtn-clear と入力
******************************************/
.btn-clear .wp-block-button__link{
  background: transparent !important;
  color: #000 !important;
  border: 0px solid #000 !important;
}

/* 透明ボタン（btn-clear）をホバーで1%拡大 */
.btn-clear .wp-block-button__link{
  transition: transform 0.25s ease, background 0.25s ease;
}

.btn-clear .wp-block-button__link:hover{
  transform: scale(1.01);
}

/*ホームの文字崩れ防止*/
.hero-mincho {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.hero-mincho h1 {
  font-size: clamp(25px, 5vw, 40px);
  line-height: 1.4;
}

.hero-mincho p {
  font-size: clamp(10px, 2.8vw, 18px);
  line-height: 1.8;
}

/*ホーム記事の背景画像設定*/
body.home .main{
  background-image: url("http://classy-vibes.info/wp-content/uploads/2026/02/background1.jpg");
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
}

/* ホーム(トップ)のH2リンクだけ：明朝＋影＋下線なし＋ホバー演出 */
body.home .entry-content h2 a,
body.front-page .entry-content h2 a{
  color: #000 !important;
  font-family: 'Sawarabi Mincho', serif !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
  text-decoration: none !important;
  display: inline-block; /* transformを安定させる */
  transition: transform 0.25s ease, text-shadow 0.25s ease, color 0.25s ease;
}

body.home .entry-content h2 a:hover,
body.front-page .entry-content h2 a:hover{
  transform: translateY(-2px) scale(1.01);
  text-shadow: 0 6px 14px rgba(0,0,0,0.18) !important;
  color: #666 !important;
}

/* ホームだけ：画像リンクをホバーで101% */
body.home a img:hover,
body.front-page a img:hover{
  transform: scale(1.01);
  transition: transform 0.25s ease;
}

/*フェードイン*/
/*function.phpと連動*/
.fadein{
  opacity:0;
  transform:translateY(25px) scale(0.98);
  filter:blur(2px);
  transition:opacity 1s ease, transform 1s ease, filter 1s ease;
}

.fadein.show{
  opacity:1;
  transform:none;
  filter:none;
}

/*.mainの背景を10秒ごとに切り替える用*/
/*function.phpと連動*/
/* 背景ベース */
body.home .main.bg1,
body.home .main.bg2,
body.home .main.bg3{
  transition: background 2.5s ease;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* 画像1 */
body.home .main.bg1{
  background-image:url("http://classy-vibes.info/wp-content/uploads/2026/02/background1.jpg");
}

/* 画像2 */
body.home .main.bg2{
  background-image:url("http://classy-vibes.info/wp-content/uploads/2026/02/background2-scaled.jpg");
}

/* 画像3 */
body.home .main.bg3{
  background-image:url("http://classy-vibes.info/wp-content/uploads/2026/02/background3.jpg");
}

@media (max-width:1000px){

  .fadein{
    transform: translateY(15px);
    transition: opacity 2s ease, transform 1s ease;
  }

body.home .main.bg1{
    background-image: /*url("https://classy-vibes.info/wp-content/uploads/2026/02/sp-background1.jpg")*/;
  }

body.home .main.bg2{
    background-image: /*url("https://classy-vibes.info/wp-content/uploads/2026/02/sp-background2.jpg")*/;
  }

body.home .main.bg3{
    background-image: /*url("https://classy-vibes.info/wp-content/uploads/2026/02/sp-background3.jpg")*/;
  }

}