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

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

.front-top-page .main {
  padding-top: 0;
}

/* リンクホバー時カラー */
.entry-content a:hover { color: #787c7b; }

/* 目次リンクホバー色 */
.toc-content a:hover { color: #70A9A1; }

/* 目次リンク選択時下線消す */
.toc-content a:hover{
text-decoration: none;
}

/* リンク下線消す */
a{
text-decoration: none;
}

/* サイト画像の角を丸く */
figure > img{
  border-radius: 5px;
}

/* トップページ「次のページ」 */

.pagination-next-link {
  background-color: #70A9A1;
  color: #fff;
  border: 3px solid #70A9A1;
  border-radius: 30px;
}
.pagination-next-link:hover {
  background-color: #fff;
  color: #70A9A1;
  transition: all 0.5s ease;
  color: #70A9A1;
}

/* トップナンバリング */
.page-numbers {
  color: #70A9A1;
  border: 1px solid #70A9A1;
  border-radius: 50%;
}
.pagination .current {
  background-color: #70A9A1;
  color: #fff;
}
.page-numbers.dots {
  opacity: 1;
  background: none;
}
.pagination a:hover {
  background-color: #70A9A1;
  color: #fff;
}
.page-numbers {
border: 0;
}

/* 記事上部に戻るボタン背景透明化 */
.go-to-top .go-to-top-button {
  background: transparent;
}


/* 見出しリセットと変更 */

/* 見出し2 */
.article h2{
background:none;
padding: 0;
}

.article h2 {
color: #008080;
}

/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

.article h3 {
  font-weight: bold;
  padding: 0.3em 1em 0.5em;
  border-radius: 0 0 0 10px;
  border-left: 3px solid #70A9A1;
  border-bottom: 3px solid #70A9A1;
  position: relative;
}
.article h3::before, .ttl_balloon3:after {
  content: '';
  height: 0;
  width: 0;
  border: solid transparent;
  position: absolute;
  left: 30px;
}
.article h3::before {
  border-color: transparent;
  border-top-color: #70A9A1;
  border-right-color: #70A9A1;
  border-width: 10px;
  top: 100%;
  left: 26px;
}
.article h3:after {
  border-color: transparent;
  border-top-color: #fff;
  border-right-color: #fff;
  border-width: 6.5px;
  top: 99%;
}


/* 見出し4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}


/* 見出し5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* 記事下 関連記事カスタマイズ */
.related-entry-card-title {
  font-weight: normal;
  font-size: 14px !important;
}

/* コメント書き込み・送信ボタン */
input[type='submit'] , /*送信ボタン*/
.comment-btn{ /*コメント書き込みボタン*/
padding: 10px;
margin: 5px 0;
background: #70A9A1; /*背景色*/
border-radius: 30px; /*角丸め*/
color:#fff; /*文字色*/
font-size:16px; /*文字サイズ*/
font-weight: bold; /* 太字 */
border: 2px solid #70A9A1;
}

/*ホバー時*/
.comment-btn:hover {
border: 2px solid #70A9A1;
background-color: #fff;
color: #70A9A1;
transition: 0.5s;
}


/* フッターパソコン縦線消去 */
#navi-footer li {
  border: none;
}

/* フッターモバイル */
@media screen and (max-width: 834px){
	.navi-footer-in a{
	font-size: 85%;/*フッターメニューの文字の大きさを変更*/
	}
}


/* ①ボックス部分 */
.search-edit, .search-box input[type="text"] {
	color: #4d4435;
	font-size: 14px;
	border-radius: 50px;
	outline: none;
	padding-left: 20px;
}

/* ②検索ボタン */
[type=submit].search-submit {
	top: 0;
	right: 0;
	height: 100%;
	padding: 8px 15px;
	background: #70A9A1; 
	color: #fff; 
	font-size: 13px;
	font-weight: bold;
	border: none;
	border-radius: 0 50px 50px 0;
	transition:0.3s;
}

/* ③検索ボタン(hover) */
@media screen and (min-width: 980px) {
	[type=submit].search-submit:hover {
		color: #fff;
		background: #F7F9F9;
	}
}



/*トップページカスマイズ***************************************/
body {
  background-color:#fff;/*背景色を白に*/
}

.section-wrap{
	padding-top:0em;/*内側余白をあける（上）*/
	padding-bottom:3em;/*内側余白をあける（下）*/
}

/* 見出し---------------------------------------------- */
div.title{
	margin:2rem 0;/*外側余白*/
	padding:0;/*内側余白*/
	text-align:center;/*中央寄せ*/
	font-size:2.5rem;/*文字の大きさ*/
	letter-spacing:4px;/*文字間の余白*/
	line-height:1.6;/*行の高さ*/
	font-weight: bold;
}

div.title:after{
	display:block;
	font-size:.7rem;/*下段サブ見出しの文字の大きさ*/
	font-weight: normal;
}

div.newpost:after{
	content:'新着記事';
}
div.category:after{
	content:'カテゴリー別の記事';
}
div.items:after{
	content:'よかったモノ';
}
div.popular:after{
	content:'今日、読まれている記事';
}


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

.link-btn{
	display:block;/*ブロック要素にする*/
	margin:1em auto;/*外側余白*/
	padding: 0.7em 2.5em;/*内側余白*/
	text-align: center;/*中央寄せ*/
	text-decoration: none;/*文字装飾なし*/
	border:3px solid #70A9A1; /*枠線（太さ、種類、色）*/   
	background-color:#70A9A1;
	font-size:.9em;/*文字の大きさ*/
	font-weight: bold;
	color:#fff;/*文字色*/
    border-radius: 50px;
	width:250px;/*ボタンの幅*/
	letter-spacing:2px;/*文字間の余白*/
}




/* 記事横並べ(flex)---------------------------------------------- */
.widget-entry-cards.large-thumb{
	display: flex; /* フレックス配置にする */
	flex-wrap: wrap;
}

/*新着、人気記事サムネイル（大）*/
.new-entry-cards.large-thumb a{
	width:calc(100% / 2);/*pcで横2列に並べる*/
}

.popular-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横3列に並べる*/
}

/*834px以下*/
@media screen and (max-width: 834px){
       .new-entry-cards.large-thumb a{
		width:100%;/*スマホで横１列に*/
	}
       .cate .new-entry-cards.large-thumb a,
       .popular-entry-cards.large-thumb a{
	       width:calc(100% / 2);/*スマホで横２列*/	
	}	
}


       .large-thumb 
	   .popular-entry-card-title{
		font-size: 0.8em!important;/*人気記事タイトルを少し小さめに*/
		font-weight: bolder;
	}




/*モバイルで文字の大きさを調整する場合*/
/*834px以下*/
@media screen and (max-width: 834px){
       .cate .large-thumb .new-entry-card-title,
	    .popular-entry-card-title{
		font-size: 14px!important;/*カテゴリー、人気記事タイトルを少し小さめに*/
	}
}

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

/* タブの横並びのため親要素にflexを指定*/
.tab-wrap {
	--active-tab-color:#70A9A1; /*選択したタブの色をここに指定*/
	display: flex;
	flex-wrap: wrap;
	gap:0 5px; /*タブ間の余白*/
}

/* タブ１～３と書いているタブメニュー部分*/
.tab-label {
	color: var(--active-tab-color);
	text-align: center;
	padding: .5em 1em;
	order: -1;/*タブを上段に表示する*/
	cursor: pointer;
	flex: 1;/*flexアイテムを伸ばす*/
	position:relative;
    border-radius: 20px;
}

/* タブのコンテンツ部分*/
.tab-content {
	width: 100%;
	display: none;/*いったん非表示状態に設定*/
}

/* アクティブなタブ、チェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
	background-color:var(--active-tab-color);
	color:#fff;
}

/*吹き出し部分*/
.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% + 5px);
	margin-left: -15px;
	border: 10px solid transparent;
	border-top:10px solid var(--active-tab-color);
	width: 0;
	height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
	display: block;/*選択されたらコンテンツ表示する*/
	padding: 1em 0 0 0;
}
	
/* radioボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
	display: none;
}




@media screen and (max-width: 834px){
	.page-body {padding: 0 15px;}
}

.copyright {
	margin-top: 1;
	font-size: 70%; /*クレジットサイズ*/ 
}

 /* サイト名消去 ロゴ高さ */
	
  .site-name-text {
    display: none;
  }

  .logo-image{
    padding: 2em;
  }



#main .button-caption {
	display: none; /*キャプション非表示*/
}



/* カテゴリーページタイトル */
 .archive-title {
 font-size:1.2em; /*大きさ*/
}

/* 記事下カテゴリーデザイン */
.cat-link {
 font-size:12px;
 margin-top: 3.0em;
 background-color: #f6f6f6;
 color: #262626;
 border-radius: 100px;
 padding: 3px 13px;
}

.cat-link:hover {
    background-color: #262626;
}

/* 記事下タグデザイン */
.tag-link {
 font-size:12px;
 background-color: #ffffff;
 color: #262626;
 border: 0px solid #ffffff;
}


/*SNSシェアボタン*/
.sns-share-message{
	display:none;
}
.sns-share-buttons {
	margin-top: 2.0em;
	margin-bottom: 3.0em;
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: flex-end; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 11px; /*アイコンのサイズ*/
	margin: 0 5px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 30px; /*ボタンの横幅*/
	height: 30px; /*ボタンの高さ*/
	border:none;
}




/*大きいエントリーカードの下にスペースを入れて見栄え良く*/
.card-content {
padding-top: 18px;
line-height: 1.6;
}

/** アイキャッチラベル非表示 */
.cat-label {
display: none;
}

/** アイキャッチ画像を記事タイトルの上に移動する **/

/*記事ヘッダーの枠組み*/
.article-header {
	display: flex; /*フレックスボックスレイアウト*/
	flex-direction: column; /*ブロック要素を縦に並べる*/
}

/*アイキャッチの枠組み*/
.eye-catch-wrap {
	order: -1; /*順番*/
	overflow: hidden; /*はみ出した部分を非表示 ※IE対策*/
}

/*アイキャッチ*/
.eye-catch {
	margin-bottom: ; /*下の余白*/
}


/*---------------------------------
トップページリストのカスタマイズ
--------------------------------*/
.entry-card-title {
	font-size: 1.1em; /* スマホは10px */
}

@media screen and (max-width: 834px){
	
.entry-card-title {
  font-weight: 500;
}

}

/******** もしもアフィリエイトかんたんリンク *******/
/* 全体 */
div.easyLink-box {
    box-shadow: 0px 0px 0px -0px rgba(0,0,0,.25); /* 影 */
     transform: scale(0.8, 0.8); /* 全体を小さく表示 */
}

/* 商品ボタン */
.easyLink-info-btn a{
    margin: 5px 10px 5px 0!important;
    padding: 0 12px!important;
    line-height: 35px!important;
    display: inline-block!important;
    width: 100%!important; /* 幅広 */
    box-shadow: 0 0px 0px -0px rgba(0,0,0,.25)!important; /* 影 */
    font-size: 1em!important;
}
/* ボタン色 */
a.easyLink-info-btn-amazon {
    background: #cca087 !important; /* 背景色 */
    border: 2px solid #cca087 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-rakuten {
    background: #cc8790 !important; /* 背景色 */
    border: 2px solid #cc8790 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-yahoo {
    background: #8790cc !important; /* 背景色 */
    border: 2px solid #8790cc !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
/* ボタン色_マウスオーバー時 */
a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important; /* 透明度 */
    background: #fff !important; /* 背景色 */
    color: #cca087 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important; /* 透明度 */
    background: #fff !important; /* 背景色 */
    color: #cc8790 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important; /* 透明度 */
    background: #fff !important; /* 背景色 */
    color: #8790cc !important; /* 文字色 */
}
/* メーカーと型番非表示 */
.easyLink-info-maker { /* メーカー非表示 */
 display: none;
 }
.easyLink-info-model { /* 型番非表示 */
 display: none;
 }

/* 最後のボタン下の空白を削除 */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {
    margin-bottom: 0 !important;
}
/* PC以外の時 */
@media screen and (max-width: 767px) {
/* 全体 */
div.easyLink-box {
    box-shadow: 0px 0px 0px -0px rgba(0,0,0,.25); /* 影 */
     transform: scale(0.9, 0.9); /* 全体を小さく表示 */
}
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img p.easyLink-img-box,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht{
  max-width: 170px !important; /*(画像をPCより小さく調整）*/
  max-height: 170px !important; /*(画像をPCより小さく調整）*/
  margin: auto;
}}
/******** もしもアフィリエイトかんたんリンクここまで *******/



/* 見出し毎の段落余白設定 */
.entry-content *:has(+ h2){
	margin-bottom: 6em !important;
}
.entry-content *:has(+ h3){
	margin-bottom: 5em !important;
}
.entry-content *:has(+ h4){
	margin-bottom: 3em !important;
}
.entry-content *:has(+ h5){
	margin-bottom: 3em !important;
}

.article h2,{
	margin-bottom: 1.5em;
}

.article h3,
.article h4,
.article h5,
.article h6{
	margin-bottom: 2.5em;
}

/* リスト●下行間設定 */
ul li, ol li {
line-height:2.1;}


/* 記事画像やや小さく */
.wp-block-image {
margin: 1em;
}


/* サイドバー見出し */
.sidebar h3 {
    background-color: #70A9A1;
    padding: 7px 20px;
    margin: 40px 0 20px;
color: #fff;
 border-radius: 50px ;
	font-size: 1.1em;
}

/* カテゴリー文字 */
.widget-sidebar ul li a {
font-size: 0.9em;
}


/* タグクラウド */
.tagcloud a {
   background: none; /*背景を消す*/
   border-radius: 50px; /*角の丸み*/
   color: #262626; /*文字色*/
   padding: 3px 10px; /*要素の内部余白*/
   text-decoration: none; /*文字の装飾なし*/
   display: flex; /*横並びにする*/
   flex: 1 1 auto; /*余白分の自動伸縮比率*/
   justify-content: space-between; /*左右幅いっぱいに均等に配置する*/
}
.tagcloud a:hover { 
   background: #F6F6F6; /*カーソルを合わせた時の背景色*/
   border: 1px solid #F6F6F6; /*カーソルを合わせた時の線色*/
   color: #262626; /*カーソルを合わせた時の文字色*/
   transition: 0.1s; /*アニメーションの時間*/
}


/* 人気記事 */
.widget-entry-card {
font-size: 13px;
line-height: 1.5em;
}









/***見出しH6カスタマイズ***/
.article h6 {
	padding: 0;
	border-bottom: 0;
	font-size:1.2em;/*文字の大きさ*/
	color: #333;/*文字の色*/
	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: #70A9A1;
}




/**********************
タグクラウドのカスタマイズ
**********************/
.wp-block-tag-cloud a{
    color: #505050; /*文字色*/
	font-size: 0.9em;
}
.fa-tag:before {
	padding-right: 3px;
}


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

.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;
}

.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;  /*カード間の余白を広げる*/
}



/* カバーブロック用：全幅 */
.cstm-blk-fullwide-inner {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
}


/* カバーブロック用：なみなみ */

.cstm-wave-bottom {
  --mask:
    radial-gradient(34.99px at 50% calc(100% - 48px),#000 99%,#0000 101%) calc(50% - 60px) 0/120px 100%,
    radial-gradient(34.99px at 50% calc(100% + 18px),#0000 99%,#000 101%) 50% calc(100% - 30px)/120px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

.cstm-wave-top {
  --mask:
    radial-gradient(34.99px at 50% 48px,#000 99%,#0000 101%) calc(50% - 60px) 0/120px 100%,
    radial-gradient(34.99px at 50% -18px,#0000 99%,#000 101%) 50% 30px/120px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}



/* 画像ブロックは以下で画面幅に */
.cstm-blk-fullwide {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}

/*参考 画像ブロックの高さ調整 */
.cstm-blk-fullwide.cstm-blk-img-height img{
  height: 50vmin;
}



/*カテゴリーのアイコンを変更*/
.widget_categories ul li a::before{
  font-family: "Font Awesome 5 Free"; /*Font Awesomeのバージョン*/
  content: "\f07b"; /*アイコンのフォント*/
  color: #7d7d7d; /*アイコンの色*/
  padding-right:10px; /*アイコンとフォントの間の余白*/
  font-weight: 900; /*アイコンの太さ（なくてもOK）*/
  font-size:14px; /*アイコン・フォントの大きさ（なくてもOK）*/
}

.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}



/*フロントタイトルリスト */
.info-list-item {
flex-direction: row-reverse;/*前後逆に*/
justify-content: flex-end;/*前後逆に*/
padding-bottom:0px;/*文字間調整*/
}
.info-list-item-categorys {
display:none;/*カテゴリ消す*/
}
.info-list-item-date {
font-size:1.2em;/*日付大きさ*/
margin-left:5px;/*文字間調整*/
color:#70A9A1;/*日付文字色変更*/
}
.info-list-content{
margin:0px;/*文字間調整*/
}
.info-list-caption {
display:none;/*キャプション消す*/
}

/* 以下PCで日付とタイトル横並び */
@media screen and (min-width: 1024px) {
.info-list-item {
display:flex;/*横並びに変更*/
}
}


/* ブログカードカスタマイズ */
.blogcard-snippet{
display:none;
}
.blogcard-title{
font-size:1.0em;
font-weight: bold;
}


/*ヘッダーロゴ下*/

.front-top-page .main {
  padding-top: 0;
}

.logo-image * {
  display: block;
}



/*************************
** フッターのカスタマイズ
*************************/
.footer {
	margin-top: 0px; /*フッターとコンテンツの間余白*/
}
.footer-bottom {
	margin-top: -30px; /*フッター内上部の余白を詰める*/
}




/**********************
タグクラウドのカスタマイズ
**********************/
.wp-block-tag-cloud a{
        border-radius: 50px; /*角の丸み*/
        border: 1px solid #dddddd;
      
	background-color: #fff;
        padding: 3px 14px 3px 6px; /*要素の内部余白*/
        font-size: 12px; /*文字サイズ*/
        margin: 2px; /*要素の外部余白*/
        flex: 1 1 auto; /*余白分の自動伸縮比率*/
	justify-content: space-between;
}
.fa-tag:before {
	padding-right: 3px;
}










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

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

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