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

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

/**グローバルナビ 装飾**/
nav#navi, .menu-header .sub-menu{
font-weight: bold;
background-color:#ffffff;}

.menu-header .sub-menu .item-label{
font-size: 80%; }

.menu-header .item-label{
color: #929292 !important; }

.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
color: #333 !important;
border-bottom: 3px solid #dcdcdc;
transition: all .2s ease; }

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
border-bottom: none; }

.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
color: #333 !important;
transition: all .2s ease; }



/*モバイル　ハンバーガーメニュー*/
.menu-close-button {
    padding: 20px 40px 0 0;
    display: block;
    cursor: pointer;
    text-align: right;  }

.menu-content .menu-drawer {
	font-size: medium;
    font-weight: bold;
    padding: 10px 20px 30px 20px;
	line-height: 2em;  }

.menu-drawer a {
    color: #333;
    text-decoration: none;
    padding: 6px;
    display: block;
    border-bottom: 1px dotted #C6C6C6;  }



/*見出しタイトルの調整*/

.article h1 { 
margin: 0.8em 0 1em; /*上下のマージン*/ 
}

.article h2{
padding: 0.7em 0.7em;/*上下の余白*/ 
margin: 0.8em 0 1em !important ; /*上下のマージン*/ }

.article h3{
border-top: 0px ;/*上線*/
border-bottom: 0px ;/*下線*/
border-left: solid 0px #222222;/*左線*/ 
border-right: solid 0px ;/*右線*/
padding-left: 0.6em;/*上下のパディング*/
margin: 0.8em 0.15em 1em !important ; /*上下のマージン*/  }

.article h4{
font-size: 20px;
border-top: 0px ;/*上線*/
border-bottom: solid 1px #111111;/*線の種類（実線） 太さ 色*/ 
padding-left: 0em;/*左のパディング*/
margin: 0.8em 1em 1em 1em !important ; /*上下のマージン*/ }

.article h5{
font-size: 16px;
line-height: 1.25;
font-weight: 500;
color:#555555;
border-bottom: 0px ;/*下線*/
padding-left: 0em;/*左のパディング*/
margin: 0.2em 0 0.2em !important ; /*上下のマージン*/ }

.article h6{
font-size: 14px;
line-height: 1.05;
font-weight: 500;
color:#888888;
border-bottom: 0px ;/*下線*/
padding-left: 0em;/*上下のパディング*/
margin: 0.2em 0 0.2em !important ; /*上下のマージン*/ }


/*マーカー　線引きレッド→黒（タイトル用）に　カスタム調整*/
.marker-red {
    background-color: #000000;
    padding: 6px 3px 6px 3px;
	color: white;
	font-weight: 600;
}


/*マーカー　線引きレッド下線→黒（テキスト用）に　カスタム調整*/
.marker-under-red {
    background-color: #000000;
    padding: 5px 2px 5px 2px;
	color: white;
	font-weight: 500;
	background:#000000;
}



/*縦文字にする*/
.tategaki {
writing-mode: vertical-rl;
}


/*コンタクトフォーム　カスタマイズ*/
/* フォーム全体のスタイル */
.wpcf7 {
background-color: #f0f0f0; /* ライトグレー */
padding: 20px;
border-radius: 10px;
max-width: 600px;
margin: auto;
}
/* 必須フィールドのラベルスタイル */
.wpcf7-form .required {
background-color: #ff0000; /* レッド */
color: white;
padding: 2px 5px;
border-radius: 3px;
margin-left: 10px;
font-size: 12px;
}
/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
background-color: #222222	; /* ほぼ黒 */
color: white;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
border: none;
margin: 20px 0 0 0;
}
.wpcf7-form input[type="submit"]:hover {
background-color: #555555; /* 少し黒 */
}




/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
	
/*全幅表示にするため*/	
main.main, div.sidebar {
   padding: 32px 0px;
}
	
	
/*カテゴリーページの写真横のパディングを小さく*/
.ect-3-columns .entry-card-wrap {
width: 49%;
padding: 0 0 0 5px; !important ;
}
	
/*カテゴリーページの写真上下のパディングを小さく*/
.e-card-title {
font-size: 14px; !important ;
}
.list {
row-gap: 0em; !important ;
}
	
/*カテゴリーページのタイトル左に少しスペースを空ける*/
	.article h1 {
    margin: 0.8em 0 1em 0.2em;
}

	
	
}







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

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