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

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

	/* トップページのスタイルここから -------------------------------------------- */

/* 背景色を白にする（不要なら削除） */
body {
	background-color: #fff !important; /* 背景色を白に指定 */
}

/* トップページヘッダー・フッター非表示 */
.home .article-header,
.home .article-footer {
	display: none; /* トップページのヘッダーとフッターを非表示に */
}

/* セクションの余白設定 */
.section-wrap {
	padding-top: 1em; /* 上部の内側余白 */
	padding-bottom: 1em; /* 下部の内側余白 */
	margin-bottom: 0; /* 下部の外側余白 0（固定） */
}

/* 見出し ------------------------------------------------------------ */
.heading {
	text-align: center; /* 見出しを中央揃え */
	font-size: 3rem; /* 見出しの文字サイズ */
	color: #3E3A39; /* 見出しの色を設定 */
	letter-spacing: 3px; /* 文字間隔を2px */
	line-height: 1.4; /* 行の高さを1.4倍 */
	font-weight: bold; /* 太字に設定 */
	position: relative; /* 基準点を設定 */
	padding-bottom: 1rem; /* 下部の内側余白を1rem */
	margin-bottom: 3rem; /* 下部の外側余白を3rem */
   font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
	
}

/*480px以下*/
@media screen and (max-width: 480px){
	.heading {
	font-size: 3rem; /* 見出しの文字サイズ */
	}
}

.heading span {
	display: block; /* サブ見出しをブロック要素化 */
	font-size: .9rem; /* サブ見出しの文字サイズ */
	font-weight: normal; /* サブ見出しを通常の太さに設定 */
}

/* 見出し下の線 */
.heading::after {
	display: block; /* 擬似要素をブロック要素に */
	content: ""; /* 内容を空に */
	width: 2.5rem; /* 線の幅を2.5rem */
	height: 1px; /* 線の高さを1px */
	border-radius: 10px; /* 線に丸みを追加 */
	background-color: #b5b5ae; /* 線の色を設定 */
	position: absolute; /* 位置を絶対配置に */
	bottom: 0; /* 下部の位置を基準に */
	left: 50%; /* 左から50%で中央揃え */
	transform: translateX(-50%); /* 中央寄せを調整 */
}

/* リンクボタン---------------------------------------------- */

/* ボタンの配置 */
.link-btn {
	display: block; /* ボタンをブロック要素に */
	text-align: center; /* ボタン内のテキストを中央揃え */
	font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    display: block;
    text-decoration: none;
    position: relative;
    margin: 1em auto;
    padding: 0em 20px;
    text-align: center;
   border: none;
   font-size: .9em;
   color: #333;
   width: 150px;
}


/* ボタンのスタイル */
.link-btn a {
	display: inline-block; /* インラインブロック要素 */
	color: var(--cocoon-text-color); /* 文字色 */
	width: auto; /* ボタンの幅を自動調整 */
	text-decoration: none; /* 下線を削除 */
	border-radius: 0; /* 角の丸みを0 */
	transition: .3s all; /* 変化をスムーズに */
	position: relative; /* 起点設定 */
}

/* 834px以下のボタン幅調整 */
@media screen and (max-width: 834px) {
	.link-btn a {
		min-width: 100%; /* モバイルでの最小幅を100%に */
	}
}


/* 記事カードの最大幅設定 --------------------------------------------- */
.widget-entry-cards.card-large-image .a-wrap {
	max-width: 600px; /* 最大幅を600pxに制限 */
	width: 100%;/*カード幅を揃える*/
}

/* サムネイル（大）記事を横並びにする(grid)------------------------------------------ */
.widget-entry-cards.large-thumb {
	display: grid; /* グリッドレイアウトを適用 */
	justify-items: center; /* アイテムを中央揃え */
	gap: 16px; /* アイテム間の隙間を16pxに */
}

/* 新着記事サムネイルのグリッド */
.new-entry-cards.large-thumb {
	grid-template-columns: repeat(3, 1fr); /* 3列で均等に分配 */
}
	.new-entry-card-date {
  display: block;
}
.new-entry-card-date .post-date::before {

  font-weight: bold;
  padding-right: 3px;
}
.new-entry-card-update-date {
  display: none;
}

/* 人気記事サムネイルのグリッド */
.popular-entry-cards.large-thumb {
	grid-template-columns: repeat(3, 1fr); /* 3列で均等に分配 */
	font-size: 20px !important; /* タイトル文字を小さく */
}

/* 834px以下のグリッド設定 */
@media screen and (max-width: 834px) {
	.new-entry-cards.large-thumb {
		grid-template-columns: 1fr; /* 1列に配置 */
		gap: 0; /* 隙間を0に */
	}
	.cate .new-entry-cards.large-thumb,
	.popular-entry-cards.large-thumb {
		grid-template-columns: repeat(2, 1fr); /* 2列に分配 */
		gap: 0; /* 隙間を0に */
	}
}

/* モバイルでのタイトル文字サイズ調整 */
@media screen and (max-width: 834px) {
	.cate .large-thumb .new-entry-card-title,
	.popular-entry-card-title {
		font-size: 14px !important; /* タイトル文字を小さく */
	}
}

/* タブ切り替え---------------------------------------------- */

/* タブコンテナの設定 */
.tab-switch {
	--active-tab-color: #b5b5ae; /* 選択タブの色 */
	display: flex; /* タブを横並びに */
	flex-wrap: wrap; /* 幅に応じて折り返し */
	max-width: 100%; /* コンテナの最大幅 */
	margin: auto; /* 中央寄せ */
	justify-content: center; /* 中央揃え */
	gap: 10px 5px; /* タブ間の隙間 */
	
}

/* タブボタンのスタイル */
.tab-switch > label {
	flex: 1 1 auto; /* タブ均等幅、幅を超えると折り返す */
	order: -1; /* コンテンツより上に表示 */
	position: relative; /* 起点 */
	padding: .7em 1em; /* 内側余白 */
	border-bottom: 1px solid var(-#d2b48c;); /* 下ボーダー */
	color: var(--active-tab-color); /* 文字色 */
	text-align: center; /* テキスト中央揃え */
	cursor: pointer; /* ポインタ表示 */
	transition:.3s all;/* ゆっくり変化 */
	font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
 border-radius: 10px 10px 0 0; /* 左上 右上 右下 左下 */
}

/* タブのホバーと選択時のスタイル */
.tab-switch > label:hover,
.tab-switch label:has(:checked) {
	background-color: #d2b48c; /* 背景色を変化 */
	color: #fff; /* 文字色 */
}

/* 選択タブの下三角形 */
.tab-switch label:has(:checked)::before {
	position: absolute; /* 三角形位置を絶対配置 */
	bottom: -8px; /* 下からの位置 */
	left: 50%; /* 中央寄せ */
	transform: translateX(-50%); /* 中央寄せを調整 */
	width: 18px; /* 三角形の幅 */
	height: 9px; /* 三角形の高さ */
	background-color: #d2b48c;; /* 三角形色 */
	content: ''; /* 内容なし */
	clip-path: polygon(0 0, 100% 0, 50% 100%);  /* 三角形の形 */
}

/* ラジオボタン非表示 */
.tab-switch input {
	display: none; /* 非表示 */
}

/* タブのコンテンツエリア */
.tab-switch > div {
	display: none; /* 初期非表示 */
	width: 100%; /* 幅設定 */
	padding: 1.5em 0; /* 内側余白 */
	
}

/* 選択されたタブの内容表示 */
.tab-switch label:has(:checked) + div {
	display: block; /* チェック時に表示 */
}

/* トップページのスタイルここまで -------------------------------------------- */


/************************************
** モバイルメニュー
************************************/
.menu-drawer a {
font-size: 0.9em;
line-height: 1.6em;
border-bottom: solid 1px #e6e6e6;
}
.menu-drawer a:hover {
background-color:#d2b48c;　/*マウスオーバー時の背景色*/
}
.sub-menu li {                                      
margin-left:-14px;
font-size: 0.9em;
color: #d2b48c;
}

/***トップページ プロフィール画像カスタマイズ***/
.home .wp-block-image{
	margin-top: 1.6px;
	margin-bottom: 1.6px;/*下の余白調節*/	
}

.home .has-text-align-center{
	margin-bottom: 4px;/*名前の下の余白を調節*/	
}


/***人気記事ランキングのカスタマイズ***/
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before{ /*順位数表示のカスタマイズ*/
	 border-radius: 50%; /*丸にする*/
	 top: -4px;  /*丸の位置上に*/
	 left: -4px;  /*丸の位置左に*/
	 width: 14px;  /*丸のサイズを小さく*/
	 height: 14px;  /*丸のサイズを小さく*/
	 font-family: 'Lato', sans-serif;  /*数字をグーグルフォントに変更*/
	 font-size: 12px;  /*数字のフォントサイズを小さく*/
}

.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {/*1位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {/*2位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {/*3位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-4 .card-thumb::before {/*4位の数字を上にし背景色変更*/
	background: #d0d0d1;
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-5 .card-thumb::before {/*5位の数字を上にし背景色変更*/
   background: #d0d0d1;
	line-height: 14px;
}

.home div.popular-entry-card-content.widget-entry-card-content.card-content{/*タイトル*/
   padding: 0.2em 0 0 0.8em !important;  /*タイトル周りの余白を調整*/
	letter-spacing: 0.8px;  /*字間を広げる*/
}

.home a.popular-entry-card-link.a-wrap{/*miniブログカード*/
	margin-bottom: 8px;  /*カード間の余白を広げる*/
}

.widget-entry-card-content {
	font-size: 17px;/*タイトルの文字サイズ*/
	line-height: 25px;
}

/****************************************
トップページ　タグクラウドのカスタマイズ
*****************************************/
.home .tagcloud a {
    background: none; /*背景を消す*/
　　border: none;/*枠線なし*/
    border-radius: 4px; /*角の丸み*/
　　background-color: #F9F9F9;
    color: #505050; /*文字色*/
    padding: 3px 14px 3px 6px; /*要素の内部余白*/
    text-decoration: none; /*文字の装飾なし*/
    font-size: 13px; /*文字サイズ*/
　　margin: 2px; /*要素の外部余白*/
　　flex: 1 1 auto; /*余白分の自動伸縮比率*/
　　justify-content: space-between;
}

.home .tag-cloud-link::before{
    content: "#"; /*アイコンの変更*/
　　font-family: "FontAwesome";
　　font-size: 12px; /*文字サイズ*/
　　padding-top: 2px;
    padding-right: 2px;
}

.home .tagcloud a:hover { /*マウスホバー時*/
    background: #333333;
　　color: #fff;
　　transition: 0.5s; /*アニメーションの時間*/
}

.search-submit {
  top: calc(36% - 12px);
}



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

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

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

/* フルワイド ---------------------------------------------- */

/* スクロールバーの幅分調整 */
html, body {
  overflow-x: clip; /* 要素からはみ出た部分を切り取る*/
}

/* フルワイド幅 */
body .full-wide {
  margin: 0 calc(50% - 50vw);  /* 左右の外側余白を調整 */
  padding: 0 calc(50vw - 50%); /* 左右の内側余白を調整 */
  padding-top:5em; /*内側の上余白*/
  padding-bottom:5em;/*内側の下余白*/
}

.content {
  margin-top: 0; /* コンテンツの上部余白 */
}

.main {
  padding-top: 0 !important; /* メインセクションの上部余白 */
  padding-bottom: 0 !important; /* メインセクションの下部余白 */
}

.entry-content {
  margin-top: 0; /* 記事コンテンツの上部余白 */
  margin-bottom: 0; /* 記事コンテンツの下部余白 */
}

.article {
  margin-bottom: 0 !important; /* 記事の下部余白 */
}

.footer {
  margin-top: 0; /* フッターの上部余白 */
}

.content-bottom {
  margin: 0; /* コンテンツボトムの余白 */
}
/*セクション背景色の設定*/
.color-area-1{
	background-color:#f0f0f0;/*背景色1をここで設定します*/
}

.color-area-2{
	background-color:#f0f0f0;/*背景色2をここで設定します*/
}

.color-area-3{
	background-color:#f0f0f0;/*背景色3をここで設定します*/
}


/* 複数画像切り替え---------------------------------------------- */
.slider-container {
	position: relative; /* コンテナ内でスライド位置を相対的に設定 */
	width: 100%; /* コンテナ幅を100%に */
	height: 700px; /* コンテナの高さを固定 */
	overflow: hidden; /* スライドがコンテナ外に出ないように非表示 */
	
	  clip-path: polygon(51% 0, 100% 18%, 100% 85%, 0 85%, 0 18% );
  height:60vmin;
  background-color:#D8E4E5;/*背景色*/
  margin-bottom: 0;/*下部余白を0にする*/
}

/*画像の配置*/
.slideimg {
	position: absolute; /* 位置を絶対指定で重ねて配置 */
 	inset: 0; /*親要素内にフルサイズで配置*/
	opacity: 0; /* 初期状態で透明に */
	background-size: cover; /* 画像をスライド全体にカバー */
	animation: slideAnime 15s infinite; /* 1サイクル15秒を無限ループ */
	
}

/* スライド個別設定 */
.slideimg:nth-of-type(1) { background-image: url('https://huuhublog.com/wp-content/uploads/2025/03/DSC00336-3-scaled.jpg'); animation-delay: 0s; }
.slideimg:nth-of-type(2) { background-image: url('https://huuhublog.com/wp-content/uploads/2025/03/DSC00468.jpg'); animation-delay: 3s; }
.slideimg:nth-of-type(3) { background-image: url('https://huuhublog.com/wp-content/uploads/2025/03/DSC00461.jpg'); animation-delay: 6s; }
.slideimg:nth-of-type(4) { background-image: url('https://huuhublog.com/wp-content/uploads/2025/06/DSC01409.jpg'); animation-delay: 9s; }
.slideimg:nth-of-type(5) { background-image: url('https://huuhublog.com/wp-content/uploads/2025/03/0T3A4725-3.jpg'); animation-delay: 12s; }

/*タイミング設定*/
@keyframes slideAnime {
	0%, 30%, 100% { opacity: 0; } /* 非表示のタイミング */
	10%, 20% { opacity: 1; } /* 表示されるタイミング */
}

/* 新着記事のNEW!（背景色付き） */
.new-txt {
    background-color: #fdf282; /* 背景色：赤 */
    color: #3E3A39; /* 文字色：白 */
    font-size: .8em;
    padding: .1em .5em; /* 内側余白 */
    border-radius: 1px; /* 角の丸み */
    margin-right: 5px; /* 右側の余白 */

  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
}
/* 点滅効果 */
.new-txt {
    animation: blinking 1s ease-in-out infinite alternate;
}

@keyframes blinking {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fixed-text-area {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  z-index: 10;
  pointer-events: none;
}

.fixed-text-box {
  writing-mode: vertical-rl;
  background-color: #fff;
  font-size: 22px;
  padding: 16px 12px;
  font-weight: 400;
  font-family: "Zen Maru Gothic", serif;
  letter-spacing: 0.1em;
  border: 2px solid #ccc;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ← 2行目を下にずらす（実際は右に） */
.fixed-text-box.second {
  transform: translateY(30px);
}

@media screen and (max-width: 768px) {
  .fixed-text-area {
    gap: 8px; /* ボックス同士の間隔を縮める */
    top: 10px; /* 位置を少し上へ */
    right: 10px;
  }

  .fixed-text-box {
    font-size: 16px;  /* 小さい画面用に文字を小さく */
    padding: 10px 8px;  /* パディングも調整して細く */
  }

  .fixed-text-box.first {
    transform: translateY(20px); /* 下げ幅も小さく */
  }
}

/* 一言ボックス */
.daily-quote-wrapper {
  max-width: 600px;
  margin: 40px auto;
  padding: 30px 20px;
  border: 1px solid #ccc;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  position: relative;
  background-color: #fff;
}

/* 上の2本線 */
.daily-quote-wrapper::before,
.daily-quote-wrapper::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #999;
  position: absolute;
  border-radius: 2px;
}

/* 短い線（上） */
.daily-quote-wrapper::before {
  top: -16px;
  width: 90%;          /* 短い線 */
  left: 50%;
  transform: translateX(-50%);
}

/* 長い線（下） */
.daily-quote-wrapper::after {
  top: -8px;
  width: 95%;         /* 長い線 */
  left: 50;
}