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

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

/* ①アピールエリア */
#appeal {
	height: calc(100vw * calc(200 / 1260));
}

/* ②アピールエリアのアニメーション設定 */
.home #appeal {
	animation : appeal-fadein 0.8s ease-in;
}

/* ③アピールエリアのアニメーション詳細 */
@keyframes appeal-fadein{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*----------------------------------------
  スマホ専用アピールエリア画像
----------------------------------------*/
@media screen and (max-width: 768px) {
  #appeal {
    background-image: url("http://masirin.sakura.ne.jp/lumber/wp-content/uploads/2025/10/topimege_sp1200x768_2025102.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    height: 0; /* 高さを0にしてpaddingで比率を作る */
    padding-top: calc(100vw * (768 / 1200)); /* 画面幅に応じた高さ */
  }
}

/*グローバルナビの文字を太字*/
#navi .navi-in{
 font-weight:bold;
}

/*グローバルナビメニュー マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #02c4a6;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/*アピールエリアの高さ調整*/
#appeal { 
height: calc(100vw * calc(760 / 1920)); 
}

/*固定ページでタイトルを非表示*/
.entry-title {
  display: none;
}

/*ページの余白　上 右 下 左の順番*/
.entry-content{
	margin: 10px 30px 0px 5px;
}

/* eyecatch画像の非表示 */
.eye-catch {
display: none;
}

/* PC用 見出しのデザイン設定 */
/* H1 */
.entry-content h1{
font-weight:470;
color:#2b513e;
}

/* H2 */
.entry-content h2{
color: #2b2b2b; /* 文字色 */
font-size: 2.0em; /* 文字サイズ */
font-weight:500;
color:#2b513e;
background-color: #ffffff; /* 背景色 */
padding-top:8px; /* 文字と上部の間隔 */
padding-left:10px;/* 文字と左線の間隔 */
padding-bottom:20px;/* 文字と下部の間隔 */
/*border-left: solid 7px #02C4A6; /* 左側に実線・色*/
border-bottom:solid 1px #bdc5b5;
margin-bottom:40px;
}

/* H3 */
.entry-content h3{
color:#2b513e; /* 文字色 */
line-height:1.2;
font-size:1.6em;
font-weight:500;
border:none;
border-radius:2px;
/*border-left:10px solid #02C4A6;/*H3の色の変更はこちら*/*/
/*border-bottom:1px solid #cccccc;*/
padding: 0.0em 0.7em 0.1em;/*「上、右、下、左」の順で、時計回り**に設定されます。*/
margin-top:90px;
}

/* H4 */
.entry-content h4{
color:#2b513e; /* 文字色 */
font-size: 1.2em; /* 文字サイズ */
font-weight:500;
padding-top:15px; /* 文字と上部の間隔 */
padding-bottom:15px;/* 文字と下部の間隔 */
border-top: solid 1px #bdc5b5;/* 上側に実線・色 */
border-bottom: solid 1px #bdc5b5;/* 下側に実線・色*/
}

/* H5 */
.entry-content h5{
color:#2b513e; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
font-weight:500;
padding: 10px;
border-bottom: dotted 3px #008000;/* 下側に点線・色*/
}

/* H6 */
.entry-content h6{
color:#2b513e; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
font-weight:500;
padding: 5px;
border-left: solid 7px #008000; /* 左側に実線・色*/
}

/* ===========================
   スマホ表示用（767px以下）
=========================== */
@media screen and (max-width: 767px) {

  /* H1 */
  .entry-content h1 {
    font-size: 1.3em;   /* やや小さく */
    line-height: 1.4;
    margin-bottom: 25px;
  }

   /* H2 */
  .entry-content h2 {
    font-size: 1.4em;   /* PCの70%程度に調整 */
    padding-top: 5px;
    padding-left: 8px;
    padding-bottom: 12px;
    margin-bottom: 25px;
  }

  /* H3 */
  .entry-content h3 {
    font-size: 1.2em;
    line-height: 1.4;
    margin-top: 50px;   /* スマホでは余白を詰める */
    padding: 0 0.5em 0.2em;
  }

  /* H4 */
  .entry-content h4 {
    font-size: 0.9em;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* H5 */
  .entry-content h5 {
    font-size: 0.95em;
    padding: 8px;
  }

  /* H6 */
  .entry-content h6 {
    font-size: 0.9em;
    padding: 4px;
  }
}


a{ /*リンクテキスト装飾無し*/
  text-decoration: underline #02c4a6;
  color:#2b2b2b;
}
a:hover { /*リンクテキストホバー時アンダーライン表示*/
  text-decoration: underline #02c4a6;
  color:#2b2b2b;
}

/*マウスオーバーで画像を拡大する*/
.img_wrap{
  /*border: 1px solid #ddd;*/
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
.img_wrap img{
  width: 100%;
  transition-duration: 0.5s;
}
.img_wrap:hover img{
  transform: scale(1.1);
  transition-duration: 0.5s;
}

/*ブロック要素の背景色を横いっぱいに*/
.haikei {
  background: ffca4a;
  margin: 0 calc((100% - 100vw) / 2);
}

/* 投稿ページでは投稿日を表示、更新日は非表示 */
body.single-post .date-tags .post-date {
  display: inline; /* 投稿日を表示 */
}
body.single-post .date-tags .post-update {
  display: none;   /* 更新日は非表示 */
}

/* 固定ページでは両方非表示 */
body.page .date-tags {
  display: none;
}

/* 投稿日の位置・見た目を調整 */
body.single-post .date-tags {
  margin-top: 10px;      /* 上の余白 */
  margin-bottom: 15px;   /* 下の余白 */
  margin-right:20px;
  text-align: right;     /* 右寄せ（中央ならcenter） */
  font-size: 1.3em;      /* 文字サイズ */
  color: #666;           /* 文字色 */
}

/* Cocoonの画像キャプション文字サイズを大きくする */
.wp-caption-text,
figcaption {
  font-size: 0.9em !important;  /* ←数値を好みに変える（例：1.5em, 18pxなど） */
  line-height: 1.1;
  color: #000;                  /* 文字色も調整可能 */
}



/* -------------------------------
単体画像のLightboxを無効化
（ギャラリー内は除外）
--------------------------------*/

/* ギャラリー外の .fancybox.image のみクリック無効 */
a.fancybox.image:not(.wp-block-gallery a):not(.wp-block-gallery .fancybox.image):not([rel^="gallery-"]) {
  pointer-events: none !important;
  cursor: default !important;
}

/* 念のため figure ブロック内にあるギャラリー以外も無効化 */
.wp-block-image:not(.wp-block-gallery .wp-block-image) a.fancybox.image {
  pointer-events: none !important;
  cursor: default !important;
}

/* ギャラリー内部（rel="gallery-0"など）は正常動作させる */
.wp-block-gallery a.fancybox.image,
a.fancybox.image[rel^="gallery-"] {
  pointer-events: auto !important;
  cursor: zoom-in !important;
}

/* リストビュー（最近の投稿ウィジェットなど）の記事間隔を広げる */
.recent-posts li {
  margin-bottom: 100px; /* この値を調整してください */
}

/* アーカイブ・カテゴリーページのサムネイル */
.archive .entry-card-thumb img,
.category .entry-card-thumb img {
  width: 120px;      /* 横幅を固定 */
  height: auto;      /* 高さは自動 */
  object-fit: cover; /* 縦横比を維持してトリミング */
  float: left;       /* 左に寄せる */
  margin-right: 12px;/* 文字との間隔 */
}

/* 投稿本文の横幅をサムネイルに合わせて調整 */
.archive .entry-card-content,
.category .entry-card-content {
  overflow: hidden;
}


/*フッターロゴサイズ*/
.footer-bottom-logo .logo-image {
	padding: 0;
	max-width: 512px;
	margin-bottom:30px;
}

.footer-bottom-logo img {
	height: 50px;
	width: auto;
}

/* フッターのコピーライトを中央 */
.footer-bottom-content {
  float: none;
  text-align: center;
	
}

/*サイドバーのカスタマイズ*/
.sidebar h2 {
    background-color: #02C4A6;
    padding: 7px 20px;
    margin: 20px 0 5px;
color: #fff;
 border-radius: 4px ;
	font-size: 1em;
}

/*サイドバーのウィジェットの間隔*/
#sidebar .widget {
    margin-bottom: -5px;
}

/* 固定ページウィジェットの見出し用（H3特選幅広板） */
.widget-sidebar-title.widget-title {
  background-color: #02c4a6 !important; /* 背景色 */
  color: #fff !important;               /* 文字色 */
  padding: 4px 20px !important;         /* 左右余白を広げる（左を特に増やす） */
  border-radius: 6px !important;        /* 角丸 */
  font-size: 1.2em !important;          /* 文字サイズ */
  margin-bottom: 10px !important;       /* 下の余白 */
  display: block !important;            /* 横幅いっぱい */
}

/* 固定ページウィジェット全体の下に余白を追加 */
.widget {
  margin-bottom: 30px !important; /* ウィジェット同士の間隔を広げる */
}