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

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

/*ボックスメニュー用CSS*/
.box-menu{
	padding: 0;
	min-height: 0;
}

.box-menu:hover{
	box-shadow: none;
	opacity: 1.0;
} 

.box-menu-label,
.box-menu-description{
	display: none;
}

.box-menu-icon *{
	margin: 0!important;
	max-width: 100%;
	max-height: 300px;
}

@media screen and (min-width: 600px){
.wwa .box-menu {
	width: 18%;
}
}

@media screen and (min-width: 600px){
.wwa .box-menu{
	margin-right: 8%;
}
}

.box-menu:first-child {
    margin-left: auto;
}

.box-menu:last-child{
    margin-right: auto;
}

.content-top{
	margin-top: 2em;
	margin-bottom: 1em;
}

.main{
	padding-top: 1.2em;
	margin-top: 0.8em;
}

@media screen and (max-width: 599px){
.wwa .box-menu {
	width: 30%;
}
}

@media screen and (max-width: 599px){
.box-menu {
	margin: 0 0.3em;
}
}

/*ホバー時にボックスメニューの画像を大きくする*/
.box-menu-icon img{
	transition:0.3s all;
}

.box-menu-icon img:hover{
	transform: scale(1.1,1.1);
	transition: 0.5s all;
	opacity: 1.0;
}

/*グローバルナビメニュー メニュー項目の間隔*/
#navi .navi-in>ul>li>a{
padding: 0 2.0em;
}

/*ホバー時メニューの色が薄くなるのをやめる*/
#navi .navi-in a:hover {
    background-color: rgb(255 255 255 / 0);
}

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

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

/*選択中のメニュー項目にアンダーライン*/
.current-menu-item:not(:first-child):after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 0px;/*線の位置*/
height: 2px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #fcf404;/*線の色*/
}

/*内部ブログカードの抜粋文を消す*/
.internal-blogcard-snippet{
	display: none;
}

/*サイドバー カテゴリー下の余白*/
.widget-sidebar.widget_categories{
	margin-bottom: 3em;
}

/*アドセンス広告上の余白*/
.ad-area{
	margin-top: 2.5em;
}

/*メニュー下の通知エリアの余白*/
.notice-area.nt-notice{
	padding-bottom: 0;
}

/*1023px以下でメニュー下の通知エリアの余白上部を広げる*/
@media screen and (max-width: 1023px){
.notice-area.nt-notice{
	padding-top: 16.32px;
	padding-bottom: 0;
}
}

/*ヘッダーロゴ、キャッチフレーズ間の余白*/
.logo.logo-header.logo-image{
	padding-bottom: 0;
}

.tagline{
	color: #fcf404;
	margin: 0 8.4px 10px;
}

/*グローバルメニューのグラデーション*/
#navi.navi.cf{
	background: linear-gradient(#555555,#111111);
}

/*ブログカード上下の余白*/
.blogcard-type{
	margin: 3em 0!important;
}

/*吹き出し上下の余白*/
.speech-wrap{
	margin: 2em 0!important;}

/*色変更*/
.my-red{
	color: #ff0000
}

/*カテゴリーラベルを非表示*/
.cat-label{
	display: none;
}

/*アイキャッチ下の余白を広げる*/
.date-tags{
	margin-bottom: 50px;
}

/* 目次を変更 */
.toc-title {
	font-weight: bold;
}

.toc {
	background: #f4f5f7;
	border: 1px solid;
	color: #0693cd;
}

.toc a {
	color: #0693cd;
}

#toc{
	margin: 3em auto;
}

/* サイドバー目次 */
#sidebar .toc{
margin-top: 4em;/*枠の上の余白*/
margin-bottom: 2em;/*枠の下の余白*/
padding: 1em 1.5em;/*枠の中の余白*/
border: 1px solid #0693cd;/*枠線の太さ・種類・色*/
border-radius: 2px;/*枠線の角の丸み*/
}

/*見出し2*/
.article h2{
	padding: 1em;
	margin-top: 2em;
	border-radius: 0.2em;
}

/*見出し3*/
.article h3{
	margin-top: 2em;
}

/*見出し4*/
.article h4{
	margin-top: 2em;
}

/*ヘッダーモバイルボタンの色と高さ、アイコンの位置を変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #1e7cd1;
	color: #ffffff;
	height: 60px;
	padding-top: 10px;
}

.logo-menu-button.menu-button{
	background-color: #1e7cd1;
	height: 60px;
}

.mobile-menu-buttons{
	background: #1e7cd1;
}

/*1023px以下でキャッチフレーズを消す*/
@media screen and (max-width: 1023px){
.tagline{
	display: none;
}
}

/*768px以下でロゴの大きさを変更*/
@media screen and (max-width: 768px){
img.site-logo-image{
	width: 200px;
}
}

/*1023px以下でロゴの位置を変更*/
@media screen and (max-width: 1023px){
img.site-logo-image{
	margin-top: 7px;
}
}

/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: rgba(30,124,209,0.5);
	transform: translateX(101%);
}

.menu-drawer a{
	font-size: 1.1em;/*文字の大きさ*/
	color: #ffffff;/*文字の色*/
	height: 3em;/*行の高さ*/
}

.menu-drawer a:hover{
	color: rgba(255,255,255,0.7);
	background-color: rgba(30,124,209,0);
}

/*1023px以下でロゴを消す*/
@media screen and (max-width: 1023px){
	img.site-logo-image{
		visibility: hidden;
	}
}

/*1023px以下でモバイル用のロゴ表示*/
@media screen and (max-width: 1023px){
	.logo-menu-button.menu-button{
		background-image: url(https://wpb-tachiage.com/wp-content/uploads/2024/02/logo6.png);
		background-size: auto 40px;
		background-position: center;
		background-repeat: no-repeat;
}
}

/*reCAPTCHAバッジを非表示*/
.grecaptcha-badge { visibility: hidden; }

/* サイドバー見出し変更 */
.sidebar h3{
background: none!important;/*背景を消す*/
color: #333333;/*文字色*/
font-size: 16px;/*文字の大きさ*/
border-bottom: solid 1px skyblue;/*右側の線の種類・太さ・色*/
position: relative;
padding: 0.5em;/*余白*/
margin: 1.5em 0;/*余白*/
}

.sidebar h3:after{
position: absolute;
content: " ";
display: block;
border-bottom: solid 1px #1e7cd1;/*左側の線の種類・太さ・色*/
bottom: -1px;/*左側の線の位置*/
left: 0;/*左側の線の位置*/
width: 40%;/*左側の線の幅*/
}

/* サイドバーカテゴリー */
.widget_categories ul li a{
font-size: 15px;/*文字の大きさ*/
padding: 0.85em 0.5em 0.75em!important;/*余白*/
border-bottom: solid 1px skyblue;/*下の線の種類・太さ・色*/
}

/* サイドバー背景色 */
.sidebar{
	background: #f4f5f7;
}

/* マウスオーバーで浮く|リスブロ */
.home main, .archive main{
	background-color: transparent;
}

.entry-card-wrap{
	margin-bottom: 1em!important;
	background-color: white;
	border-radius: 4px;
}

.entry-card-wrap:hover{
	box-shadow: 0 10px 20px -5px rgba(0,0,0,0.25);
	transform: translateY(-2px);
	background-color: white;
	transition: all 0.3s ease;
}

/* マウスオーバーでリンクが貼られた画像を薄く */
a:hover img{ opacity: 0.7 }

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

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

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