@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*
 * フロントページカスタマイズ
 * 全てをまとめて非表示
 */
 .home .main .entry-title,
 .home .main .sns-share,
 .home .main .sns-follow,
 .home .main .date-tags,
 .home .main .author-info{
	display: none;
}

/*---------------------------------
ヘッダーカスタマイズ
--------------------------------*/
/*ヘッダーロゴを左寄せにする*/
.logo{text-align:left;}

.header{
	background-size: contain;
}

/*---------------------------------
ページカスタマイズ
--------------------------------*/


/*見出しカスタマイズ（h1-6）*/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{ /*見出し初期化*/
	padding: 0;
	margin: 0;
	font-size: medium;
	border-collapse: separate;
	border-spacing: 0;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
	line-height: normal;
	position:relative;
}

.article h1{ /*見出し１（タイトル）カスタマイズ*/
	background: #ffffff; /*背景カラー*/
	font-size: 24px; /*フォントサイズ*/
	letter-spacing: 1px; /*文字間隔*/
/*   margin: -8px -8px 20px -8px;
	padding: 9px 10px 9px 10px;
	border-left: 10px solid #0068b7; 左ラインの太さとカラー*/
	line-height: 35px; /*高さ*/
/* border-radius: 3px; 角丸コーナー*/
}

.article h2{ /*見出し２カスタマイズ*/
	background: #ffffff; /*背景カラー*/
	font-size: 22px; /*フォントサイズ*/
	letter-spacing: 2px; /*文字間隔*/
	margin: 35px 8px 20px 8px;
	padding: 10px 7px 10px 10px;
	border-left: 7px solid #3580cc; /*左ラインの太さとカラー*/
	border-bottom: 1px solid #3580cc; /*アンダーラインの太さとカラー*/
	line-height: 27px; /*高さ*/
}

.article h3{ /*見出し３カスタマイズ*/
	font-size: 18px; /*フォントサイズ*/
	letter-spacing: 2px; /*文字間隔*/
	border-top: solid 3px #3580cc;/*上線*/
	border-bottom: solid 3px #3580cc;/*下線*/
	margin: 35px -8px 20px 8px;
	padding: 9px 7px 9px 10px;
	line-height: 25px; /*高さ*/
}

.article h4{ /*見出し４カスタマイズ*/
	font-size: 18px; /*フォントサイズ*/
	letter-spacing: 2px; /*文字間隔*/
  position: relative;
  background: #f1f8ff;
  margin: 35px 8px 20px 8px;
  padding: 0.25em 0.5em;
  border-left: solid 2em #5c9ee7;
}
.article h4::before{
  font-family: "Font Awesome 5 Free";
  content: '\f501'; /*目次タイトルのアイコン指定*/
  margin-right: 0.3em;
  font-size: 18px; /*フォントサイズ*/
  font-weight: 900; /*アイコンの太さ*/
  font-style: normal; /*通常フォント*/
position: absolute;
padding: 0em;
color: #ffffff;
left: -1.4em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.article h5{ /*見出し５カスタマイズ*/
	background: #c4e6ff; /*背景カラー*/
	font-size: 16px; /*フォントサイズ*/
	letter-spacing: 2px; /*文字間隔*/
	margin: 35px 20px 20px 20px;
	padding: 5px 5px 5px 5px;
	border: 1px solid #3580cc; /*周囲ラインの太さとカラー*/
	line-height: 27px; /*高さ*/
	text-align: center; /*文字位置中央*/
	border-radius: 6px; /*角丸コーナー*/
	box-shadow: 3px 3px 2px rgba(0,0,0,0.3); /*シャドー*/
	}

.article h6{ /*見出し６カスタマイズ*/
	font-size: 16px; /*フォントサイズ*/
	color:#ffffff;
	letter-spacing: 2px; /*文字間隔*/
	margin: 35px 0px 20px 0px;
	padding: 8px 16px 8px 25px;
	line-height: 25px; /*高さ*/
	background-color: #3580cc; /*背景カラー*/
	border-radius: 10px; /*角丸コーナー*/
	position: relative;
}
.article h6::after{ /*見出し６の逆三角部分のカスタマイズ*/
	position: absolute;
	top: 100%;
	left: 20px;
	content: '';
	width: 0;
	height: 0;
	border: 12px solid transparent;
	border-top: 13px solid #3580cc;
}

 /* HOME見出しデザイン 背景四角タイトル*/
.headline-square1 {
    margin:  0;                 /* デフォルトCSS打ち消し */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    font-size: 40px;            /* 文字サイズ指定 */
    text-align:  center;        /* 文字位置指定 */
    margin:  20px 0;            /* 周りの余白指定 */
    background-color:  #fff;    /* 背景色指定 */
}
p {
    margin:  0;                 /* デフォルトCSS打ち消し */
    line-height: 2;             /* 行間調整 */
}
 
.headline-square1:before {
    content: '';                /* 空の要素を作る */
    height: 150px;              /* 高さ指定 */
    width: 150px;               /* 幅指定 */
	border: solid 3px #000;/* 枠線指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left:  0;                   /* 位置調整 */
    right:  0;                  /* 位置調整 */
    top: 0;                     /* 位置調整 */
    bottom:  0;                 /* 位置調整 */
    margin:  auto;              /* 位置調整 */
    z-index: -1;                /* 重なり調整 */
}
 
.headline-square1-wrap {
    padding-bottom:  20px;/* 余白指定 */
}

/*吹き出しの頭を揃える*/
.speech-balloon{width:100%;}

/*複数の固定ページの日付を非表示にする*/
.post-25 .date-tags,
.post-28 .date-tags,
.post-40 .date-tags,
.post-2 .date-tags,
.post-10 .date-tags,
.post-3 .date-tags,
.post-9 .date-tags,
.post-42 .date-tags,
.post-44 .date-tags,
.post-258 .date-tags,
.post-355 .date-tags,
.post-448 .date-tags,
.post-711 .date-tags{
	display: none;
}

/*---------------------------------
 サイドバーカスタマイズ
 --------------------------------*/
/*sidebar見出しカスタマイズ*/
.sidebar h3 {
	background: none;
	font-size: 16px;
	letter-spacing: 2px;
	display: inline-block;
	position: relative;
	width: 100%;
	padding: 0;
	text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 28%; /*ラインの長さ*/
	border-top: 5px solid #3580cc; /*ラインの色*/
}
.sidebar h3::before {left: 0;}
.sidebar h3::after {right: 0;}

.author-description p{
word-break: break-all;
}


/*プロフィール下のSNSボタン非表示*/
/*Twitter
.author-follows .sns-follow .sns-follow-buttons .twitter-button{display: none;}*/
/*Facebook
.author-follows .sns-follow .sns-follow-buttons .facebook-button{display: none;}*/
/*Instagram
.author-follows .sns-follow .sns-follow-buttons .instagram-button{display: none;}*/
/*feedly*/
.author-follows .sns-follow .sns-follow-buttons .feedly-button{display: none;}
/*RSS*/
.author-follows .sns-follow .sns-follow-buttons .rss-button{display: none;}

.author-follows .sns-follow .sns-follow-buttons a{
	border-radius: 50%;
	width: 50px; /*ボタンの横の大きさ*/
	height: 50px; /*ボタンの縦の大きさ*/
	font-size: 25px; /*アイコンのサイズ*/
	margin: 0 6px; /*ボタン同士の間隔*/
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center; /*ボタンを中央寄せにする*/
	position: relative;
}

.author-box .sns-follow-buttons a.follow-button{
	color: #FFF;
	border:none;
}

.nwa .author-box .sns-follow-buttons {display: inline-flex;}

/*SNSボタンカスタマイズ*/
.sidebar .sns-follow-buttons {justify-content: center; /*ボタンを中央寄せにする*/}
.sidebar .sns-follow {margin: 0 0 12px 0;}

/*brand color*/
.sidebar .twitter-button {background-color: #1da1f2 !important;}
.sidebar .facebook-button {background-color: #3b5998 !important;}
.sidebar .instagram-button {background-color: #c522b8 !important;}

.sidebar .sns-follow-buttons a {
	border-radius: 50%;
	width: 40px; /*ボタンの横の大きさ*/
	height: 40px; /*ボタンの縦の大きさ*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 6px; /*ボタン同士の間隔*/
}


/*---------------------------------
 プラグインカスタマイズ
 --------------------------------*/
 /*Contact Form 7カスタマイズ*/
 /*スマホContact Form 7カスタマイズ*/
 @media(max-width:500px){
	.inquiry th,.inquiry td {
		 display:block!important;
		 width:100%!important;
		 border-top:none!important;
		 -webkit-box-sizing:border-box!important;
		 -moz-box-sizing:border-box!important;
		 box-sizing:border-box!important;
	}
	.inquiry tr:first-child th{border-top:1px solid #d7d7d7!important;}

	/* 必須・任意のサイズ調整 */	
	.inquiry .haveto,.inquiry .any {font-size:10px;}
}

/*見出し欄*/
.inquiry th{
	text-align:left;
	font-size:14px;
	color:#444;
	padding-right:5px;
	width:30%;
	background:#f7f7f7;
	border:solid 1px #d7d7d7;
}
		
/*通常欄*/
.inquiry td{
		font-size:14px;
		border:solid 1px #d7d7d7;	
	}
		
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{border:solid 1px #d7d7d7;}
		
/*必須の調整*/
.haveto{
	font-size:7px;
	padding:5px;
	background:#ff9393;
	color:#fff;
	border-radius:2px;
	margin-right:5px;
	position:relative;
	bottom:1px;
}

/*任意の調整*/
.any{
	font-size:7px;
	padding:5px;
	background:#93c9ff;
	color:#fff;
	border-radius:2px;
	margin-right:5px;
	position:relative;
	bottom:1px;
 }
 
 /*ラジオボタンを縦並び指定*/
 .verticallist .wpcf7-list-item{display:block;}
 
 /*送信ボタンのデザイン変更*/
 #formbtn{
	display: block;
	padding:15px;
	width:350px;
	background:#ffaa56;
	color:#fff;
	font-size:18px;
	font-weight:bold;	 
	border-radius:2px;
	margin:25px auto 0;
 }
 
 /*送信ボタンマウスホバー時*/
 #formbtn:hover{
	background:#fff;
	color:#ffaa56;
	border:2px solid #ffaa56;
 }

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

/*1030px以下*/
@media screen and (max-width: 1030px){
	/*必要ならばここにコードを書く*/
	.logo{text-align:center;}
	.header{background-image: none;}
	}

/*768px以下*/
@media screen and (max-width: 768px){
	/*必要ならばここにコードを書く*/
	.logo{text-align:center;}
	.header{background-image: none;}
	}

/*480px以下*/
@media screen and (max-width: 480px){
	/*必要ならばここにコードを書く*/
	.logo{text-align:center;}
	.header{background-image: none;}
	}