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

/***************************
** グローバルナビのカスタマイズ
****************************/
/* ナビメニュー 文字*/
#navi {
	font-family: 'Lato', sans-serif;/*〇〇にはお好きなGoogleフォントを入力*/
	font-weight: bold; /* 太文字 */
	letter-spacing: 0.12em;/*字間を広げる*/
	color: #3c4a4b;
}
.navi-in a {
	font-size: 14px;/*文字サイズ*/
}

/* safari文字の太さ指定 */
_::-webkit-full-page-media, _:future, :root  
#navi {
	-webkit-text-stroke-width: .1px !important; 
}

 /* ブラウザChromeのみ太文字にする */
@media screen and (-webkit-min-device-pixel-ratio:0){
  #navi {
	-webkit-text-stroke-width: .4px !important;
}
}

/* ナビメニュー 下線*/
#navi .navi-in a::after {
	position: absolute;/*線の位置を絶対配置に*/
	bottom: 12px;/*線の位置*/
	left: 0;
	content: '';
	width: 100%;
	height: 2px;/*線の太さ*/
	background: #e28578;/*線の色*/
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform 0.3s;/*変形の時間*/
}

#navi .navi-in a:hover::after {
	transform: scale(1, 1);
}

/* タブレットメニュー中央寄せ */
@media screen and (max-width: 768px){
#navi-in{
	display: flex;
	justify-content: center;
}
}

/*スマホメニューを横スクロール*/
@media screen and (max-width: 480px){
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi a{
   color:#222; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#222; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
}	
@media screen and (max-width: 1030px){
  #header-container .menu-mobile{
    display:none;
  }
  .navi-in > .menu-mobile{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  #header-container #navi a{
    font-size:0.8em;
    padding: 1em 1.2em;
  }
  #header-container .navi-in > ul > .menu-item-has-children > a::after{
    display:none;
  }
  #navi .navi-in > .menu-mobile li {
    height: auto;
    line-height: 1.8;
  }
  .mblt-header-mobile-buttons {
    margin-top: 53px;
  }
}

/* ================================================
   ピックアップ画像一覧（4枚表示）
   背景は白、影なし。ホバー時のみふわっと浮く。
   ================================================ */

/* 全体のコンテナ設定 */
.pickup-wrap {
  display: flex; /* 横並び配置 */
  flex-wrap: wrap; /* 画面幅が狭いとき折り返す */
  justify-content: center; /* 中央寄せ */
  gap: 15px; /* ← 画像の間の余白（変更OK：20〜40px程度） */
  margin: 20px auto; /* ← 上下の余白（変更OK：20〜60px程度） */
  max-width: 1120px; /* ← 全体の最大幅（変更OK） */
  background-color: #fff; /* 背景を白に固定 */
  padding: 20px 0; /* 内側の上下余白（変更OK） */
}

/* 各画像ブロック */
.pickup-item {
  flex: 1 1 calc(25% - 30px); /* ← 4列配置。値を変えると列数変更可能 */
  box-sizing: border-box;
  text-align: center;
}

/* 画像設定 */
.pickup-item img {
  width: 100%; /* 親要素の幅に合わせる */
  height: auto; /* 縦横比を維持 */
  border-radius: 10px; /* ← 角を丸くする（不要なら削除または0） */
  transition: transform 0.4s ease; /* ← 動きの速さ（変更OK：0.3〜0.6s） */
  display: block;
  margin: 0 auto;
}

/* ホバー時の動き */
.pickup-item img:hover {
  transform: translateY(-6px); /* ← 浮き上がり高さ（変更OK：-3px〜-10px） */
}

/* ----------------------------------------------
   レスポンシブ対応
   ---------------------------------------------- */

/* タブレット（1024px以下）では2列 */
@media (max-width: 1024px) {
  .pickup-item {
    flex: 1 1 calc(50% - 30px);
  }
}

/* スマホ（600px以下）では1列 */
@media (max-width: 600px) {
  .pickup-item {
    flex: 1 1 calc(50% - 15px); /* ← 2列になる */;
  }
}

/***見出しH6カスタマイズ***/
.article h6 {
	padding: 0;
	border-bottom: 0;
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; 
	font-size:1.2rem;/*文字の大きさ*/
	color: #3c4a4b;/*文字の色*/
	letter-spacing:1px;/*文字間の余白*/
	position: relative;
	border-bottom: 2px solid #ddd;
	padding: 10px 0;
	margin-bottom: 10px;
}

h6:before {
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 20%;
	height: 2px;
	content: '';
	background: #e28578;
	}

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

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

/***リンクボタンのカスタマイズ***/
/*リンクボタン*/
.link-btn{
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; 
	display:block;/*ブロック要素にする*/
	text-decoration: none;/*文字装飾なし*/
	 /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;/*形状*/
        margin:1em auto;/*外側余白*/
        padding: 0em 20px;/*内側余白*/
        text-align: center;/*中央寄せ*/
        border:none /*枠線（太さ、種類、色）*/
        font-size:.9em;/*文字の大きさ*/
        color:#3c4a4b;/*文字色*/
        width:150px;/*ボタンの幅*/
}

/*矢印と下線の形状*/
.link-btn::before{
	content: ''; /*絶対配置で下線の位置を決める*/
	position: absolute;
	bottom:-8px;
	left:15%;/*下線の形状*/    
	width: 85%;
	height: 1px;
	background:#3c4a4b;/*アニメーションの指定*/
	transition: all .3s;
}

.link-btn::after{
	content: '';/*絶対配置で矢印の位置を決める*/
	position: absolute;
	bottom:-3px;
	right:0;/*矢印の形状*/    
	width: 15px;
	height:1px;
	background:#3c4a4b;
	transform: rotate(35deg);/*アニメーションの指定*/
	transition: all .3s;
}

/*hoverした際の移動*/
.link-btn:hover::before{
    left:20%;
}

.link-btn:hover::after{
    right:-5%;
}

.link-btn:hover {
	color: #3c4a4b;
}

/* ================================================
   【Read moreボタン専用デザイン設定】
   このCSSは「.link-btn a」に対してデザインを適用します。
   下線を消して、ホバー時に少し浮かせるアニメーションを追加。
   ================================================ */

.link-btn a {
  /* 下線を消す */
  text-decoration: none !important;

  /* 文字色（通常時） */
  color: #3c4a4b !important; /* ← 後で変更可能 */

  /* アニメーション（ホバー時の動きや色変化の速さを調整） */
  transition: transform 0.3s ease, color 0.3s ease;

  /* ブロック的に扱うことで、ホバー時のアニメーションを滑らかに */
  display: inline-block;
}

/* ================================================
   【ホバー時の動きと色】
   マウスを乗せたときに、少し浮くように動かします。
   浮き具合やホバー時の色は自由に変更可能です。
   ================================================ */
.link-btn a:hover {
  /* 上に4px浮く（数値を変えると浮き具合を調整可能） */
  transform: translateY(0px);

  /* ホバー時の文字色（固定したいときは通常時と同じにする） */
  color: #3c4a4b !important;
}

/* ================================================
   【調整のヒント】
   - 文字色を変えたい場合：
       通常時 → .link-btn a の color 値を変更
       ホバー時 → .link-btn a:hover の color 値を変更
   - 浮き上がりの高さを変えたい場合：
       transform: translateY(-4px); の数値を変更（例：-2px〜-10px）
   - 浮き上がりの速さを変えたい場合：
       transition: transform 0.3s ease; の「0.3s」を変更（例：0.2s〜0.6s）
   - 下線を復活させたい場合：
       text-decoration: none → underline に変更
   ================================================ */

/***人気記事ランキングのカスタマイズ***/
.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: 12px;/*タイトルの文字サイズ*/
	line-height: 17px;
}

/***検索ボックスのカスタマイズ***/
input::placeholder{
	font-size: 0.75em;/*「サイト内を検索」の文字サイズ*/
	line-height:1.9;
}

.search-submit {
	font-size: 15px;/*「サイト内を検索」のアイコンサイズ*/
	line-height:1.6;
}

/*************************
** フッターのカスタマイズ
*************************/
.footer {
	margin-top: 40px; /*フッターとコンテンツの間に余白追加*/
}
.footer-bottom {
	margin-top: -8px; /*フッター内上部の余白を詰める*/
}
.footer-bottom-content { /*メニュー＆クレジットの位置調整*/
	margin-bottom: 0.6em;
}
.navi-footer-in a {
	color: #666666; /*メニューの文字色*/
	font-size: 12px;/*文字サイズ*/
}
.navi-footer-in a:hover { /*メニューのマウスホバー時の指定*/
	background: none; /*背景色をなしに*/
}
.footer-bottom.fnm-text-width .menu-footer li {
	line-height: 1; /*メニューの区切りボーダーの高さを1文字分にする*/	
}
.copyright {
	font-size: 12px;/*文字サイズ*/
}
@media screen and (max-width: 834px) {
	.navi-footer-in > .menu-footer li.menu-item {
		line-height: 0; /*行間*/
		margin-top: 20px; 
  }
}
@media screen and (max-width: 460px) {
  .navi-footer-in > .menu-footer li.menu-item { /*モバイルでメニューを1カラムにする*/
	  width: 100%;
	  display: block;
	  flex: auto;
	  padding: 0.3em 0;
	  line-height: 0; /*行間*/
	  margin-top: 12px; 
  }
}

.search-edit,
.search-box input[type="text"] {
	border-radius: 3px; /* 少し角丸にする*/
	height:40px;
}

/* 記事カードの最大幅設定 --------------------------------------------- */
.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); /* 2列で均等に分配 */
}

/* 人気記事サムネイルのグリッド */
.popular-entry-cards.large-thumb {
   grid-template-columns: repeat(3, 1fr); /* 3列で均等に分配 */
}

/* 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; /* タイトル文字を小さく */
   }
}

/* ================================================
   見出し（.heading）スタイル
   ・下線なしバージョン
   ・中央揃え、文字サイズ、色、フォントなどを調整可能
   ================================================ */
.heading {
   text-align: center;                     /* 見出しを中央揃え */
   font-size: 1.5rem;                        /* 見出しの文字サイズ（後から変更可能） */
   color: #3c4a4b;                         /* 文字色（後から変更可能） */
   font-family: "Lato", "Noto Sans JP", sans-serif; /* 英字はLato、日本語はNoto Sans JP、その他はsans-serif */
   letter-spacing: 2px;                     /* 文字間隔（スペースの広さ） */
   line-height: 1.4;                        /* 行間（高さ） */
   font-weight: bold;                        /* 太字（bold / 600など変更可能） */
   position: relative;                       /* 擬似要素配置基準（下線なしでも安全） */
   padding-bottom: 1rem;                     /* 下部余白（必要に応じて調整） */
   margin-bottom: 3rem;                      /* 下部の外側余白（次の要素との間隔） */
}

/* ----------------------------------------
   スマホなど画面幅480px以下用
----------------------------------------- */
@media screen and (max-width: 480px){
   .heading {
      font-size: 1.7rem;                      /* 文字サイズ調整（レスポンシブ対応） */
   }
}

/* ----------------------------------------
   サブ見出し用スタイル（span内）
----------------------------------------- */
.heading span {
   display: block;                           /* サブ見出しをブロック化（改行される） */
   font-size: .9rem;                         /* 文字サイズ（調整可能） */
   font-weight: normal;                       /* 通常の太さ */
   font-family: "Lato", "Noto Sans JP", sans-serif; /* サブ見出しも同じフォントに統一 */
}

/* ================================================
   【カスタマイズのヒント】
   ・文字色 → .heading { color: #XXXXXX; }
   ・文字サイズ → font-size: 5rem; を変更
   ・サブ見出しサイズ → .heading span { font-size: ...; }
   ・フォントを変更したい場合は font-family の値を書き換え
   ・下線なしのため .heading::after は使用していません
   ================================================ */

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

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

/* タブボタンのスタイル */
.tab-switch > label {
   order: -1; /* コンテンツより上に表示 */
   position: relative; /* 起点 */
   padding: .2em 1em; /* 内側余白 */
   border-bottom: 1px none; /* 下ボーダー */
   color: #3c4a4b; /* 文字色 */
   text-align: center; /* テキスト中央揃え */
   cursor: pointer; /* ポインタ表示 */
   transition:.3s all; /* ゆっくり変化 */
   flex: 1;
}

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

/* 選択タブの下三角形 */
.tab-switch label:has(:checked)::before {
   position: absolute; /* 三角形位置を絶対配置 */
   bottom: -8px; /* 下からの位置 */
   left: 50%; /* 中央寄せ */
   transform: translateX(-50%); /* 中央寄せを調整 */
   width: 18px; /* 三角形の幅 */
   height: 9px; /* 三角形の高さ */
   background-color: var(--active-tab-color); /* 三角形色 */
   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; /* チェック時に表示 */
}

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

/* 固定ページ本文 余白調整 */

/* PC用（幅600pxより大きい画面） */
@media (min-width: 601px) {
  .page .content,
  .page .entry-content {
    padding-left: 0px;  /* 適度な余白 */
    padding-right: 0px;
  }
}

/* スマホ用（幅600px以下の画面） */
@media (max-width: 600px) {
  .page .content,
  .page .entry-content {
    padding-left: 5px;  /* スマホは少し狭め */
    padding-right: 5px;
  }
}

/* --------------------------------------------
   Cocoon サイドバーウィジェットタイトル左に縦ラインを追加
   --------------------------------------------
   💡 色を変えるときは --accent-color を書き換えるだけ！
   -------------------------------------------- */
:root {
  --accent-color: #E28578; /* ← 縦ラインの色をここで指定 */
}

/* サイドバーウィジェットタイトル装飾 */
.sidebar .widget .widget-title {
  position: relative;
  padding-left: 14px; /* タイトル文字とラインの距離 */
  font-weight: bold; /* 強調（任意） */
}

/* タイトル左の縦ライン */
.sidebar .widget .widget-title::before {
  content: "";
  position: absolute;
  left: 0;                   /* 左端に配置 */
  top: 50%;                  /* 縦位置を中央に */
  transform: translateY(-50%);
  width: 4px;                /* ラインの太さ */
  height: 60%;               /* タイトル高さの約6割の長さ */
  background: var(--accent-color);
  border-radius: 2px;        /* 角を少し丸める（不要なら削除OK） */
}

/* カテゴリー記事のレイアウト変更 */
.cate .new-entry-cards.large-thumb{
   grid-template-columns: repeat(3, 1fr); /* PCは3列で均等に分配 */
}

/*モバイル対応：画面幅834px以下*/
@media screen and (max-width: 834px){
   .cate .new-entry-cards.large-thumb{
   grid-template-columns: repeat(2, 1fr); /* モバイル2列 */
   gap: 0;
   }   
}

.new-entry-cards.large-thumb {
   grid-template-columns: repeat(3, 1fr); /* 3カラムに */
}