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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
/*ContactForm7カスタマイズ*/
/************************************
table.CF7_table{
	width:80%;
	margin:0 auto;
	border: 3px solid #e5e5e5;
}

table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 1px solid #d8d8d8;
}

.CF7_table ::placeholder {
	color:#797979;
}

/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #ffb6c1;/*ピンク*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	width:30%;/*横幅*/
	background-color:#ebedf5;/*ブルーグレー*/
	}
}

/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#ebedf5;
	}
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#ffb6c1;/* ピンク*/
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}
/************************************
** アイキャッチ画像を記事タイトルの上に移動する
************************************/

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

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

/*アイキャッチ*/
.eye-catch {
	margin-bottom: 0; /*下の余白*/
}
/************************************
** SNS ボタンをまとめてシンプルにする
************************************/

/*シェア・フォローボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons,
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
	justify-content: center; /*中央に寄せる*/
	flex-wrap: wrap; /*折り返す*/
}

/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border: none; /*線*/
}

/*フォローボタン（プロフィール）のリンク*/
.sns-follow.sf-profile .sns-buttons a {
	border: none; /*線*/
}

/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 20px; /*アイコンの大きさ*/
}

/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
	font-size: 25px; /*アイコンの大きさ*/
}

/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*シェア・フォローボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
	right: 0; /*右側からの距離*/
	bottom: -10px; /*下側からの距離*/
	left: 0; /*左側からの距離*/
	font-size: 10px; /*文字の大きさ*/
	color: #333; /*文字の色*/
}

/*シェア・フォローボタンの各アイコンをまとめて指定*/
[class*="sns-share"][class*="ss-"] [class*="-button"],
[class*="sns-follow"][class*="sf-"] [class*="-button"] {
	background-color: inherit; /*背景の色*/
}

/*ボタンカラーがモノクロ時のアイコンをまとめて指定*/
[class*="sns-"][class*="bc-monochrome"] [class*="icon-"]:before {
	color: #333; /*アイコンの色*/
}


/* シェアボタンの各アイコン
-----------------------------------*/

/*Twitterアイコン*/
.icon-twitter:before {
	color: #1da1f2; /*アイコンの色*/
}

/*Facebookアイコン*/
.icon-facebook:before {
	color: #3b5998; /*アイコンの色*/
}

/*はてブアイコン*/
.icon-hatena:before {
	color: #2c6ebd; /*アイコンの色*/
}

/*Pocketアイコン*/
.icon-pocket:before {
	color: #ef4056; /*アイコンの色*/
}

/*LINEアイコン*/
.icon-line:before {
	color: #00c300; /*アイコンの色*/
}

/*Pinterestアイコン*/
.icon-pinterest:before {
	color: #bd081c; /*アイコンの色*/
}

/*LinkedInアイコン*/
.icon-linkedin:before {
	color: #0077b5; /*アイコンの色*/
}

/*コピーアイコン*/
.icon-copy:before {
	color: #333; /*アイコンの色*/
}

/*コメントアイコン*/
.icon-comment:before {
	color: #333; /*アイコンの色*/
}


/* フォローボタンの各アイコン
-----------------------------------*/

/*ウェブサイトアイコン*/
.sns-follow.sf-bottom .icon-home-logo:before,
.sns-follow.sf-widget .icon-home-logo:before {
	color: #002561;/*アイコンの色*/
}

/*Twitterアイコン*/
.sns-follow.sf-bottom .icon-twitter-logo:before,
.sns-follow.sf-widget .icon-twitter-logo:before {
	color: #1da1f2; /*アイコンの色*/
}

/*Facebookアイコン*/
.sns-follow.sf-bottom .icon-facebook-logo:before,
.sns-follow.sf-widget .icon-facebook-logo:before {
	color: #3b5998; /*アイコンの色*/
}

/*はてブアイコン*/
.sns-follow.sf-bottom .icon-hatebu-logo:before,
.sns-follow.sf-widget .icon-hatebu-logo:before {
	color: #2c6ebd; /*アイコンの色*/
}

/*Instagramアイコン*/
.sns-follow.sf-bottom .icon-instagram-logo:before,
.sns-follow.sf-widget .icon-instagram-logo:before {
	color: #405de6; /*アイコンの色*/
}

/*YouTubeアイコン*/
.sns-follow.sf-bottom .icon-youtube-logo:before,
.sns-follow.sf-widget .icon-youtube-logo:before {
	color: #cd201f; /*アイコンの色*/
}

/*LinkedInアイコン*/
.sns-follow.sf-bottom .icon-linkedin-logo:before,
.sns-follow.sf-widget .icon-linkedin-logo:before {
	color: #0077b5; /*アイコンの色*/
}

/*noteアイコン*/
.sns-follow.sf-bottom .icon-note-logo:before,
.sns-follow.sf-widget .icon-note-logo:before {
	color: #41c9b4; /*アイコンの色*/
}

/*SoundCloudアイコン*/
.sns-follow.sf-bottom .icon-soundcloud-logo:before,
.sns-follow.sf-widget .icon-soundcloud-logo:before {
	color: #ff8800; /*アイコンの色*/
}

/*Flickrアイコン*/
.sns-follow.sf-bottom .icon-flickr-logo:before,
.sns-follow.sf-widget .icon-flickr-logo:before {
	color: #111; /*アイコンの色*/
}

/*Pinterestアイコン*/
.sns-follow.sf-bottom .icon-pinterest-logo:before,
.sns-follow.sf-widget .icon-pinterest-logo:before {
	color: #bd081c; /*アイコンの色*/
}

/*LINEアイコン*/
.sns-follow.sf-bottom .icon-line-logo:before,
.sns-follow.sf-widget .icon-line-logo:before {
	color: #00c300; /*アイコンの色*/
}

/*Amazonアイコン*/
.sns-follow.sf-bottom .icon-amazon-logo:before,
.sns-follow.sf-widget .icon-amazon-logo:before {
	color: #ff9900; /*アイコンの色*/
}

/*ROOMアイコン*/
.sns-follow.sf-bottom .icon-rakuten-room-logo:before,
.sns-follow.sf-widget .icon-rakuten-room-logo:before {
	color: #c61e79; /*アイコンの色*/
}

/*Slackアイコン*/
.sns-follow.sf-bottom .icon-slack-logo:before,
.sns-follow.sf-widget .icon-slack-logo:before {
	color: #e01563; /*アイコンの色*/
}

/*GitHubアイコン*/
.sns-follow.sf-bottom .icon-github-logo:before,
.sns-follow.sf-widget .icon-github-logo:before {
	color: #4078c0; /*アイコンの色*/
}

/*CodePenアイコン*/
.sns-follow.sf-bottom .icon-codepen-logo:before,
.sns-follow.sf-widget .icon-codepen-logo:before {
	color: #333; /*アイコンの色*/
}

/*Feedlyアイコン*/
.sns-follow.sf-bottom .icon-feedly-logo:before,
.sns-follow.sf-widget .icon-feedly-logo:before {
	color: #2bb24c; /*アイコンの色*/
}

/*RSSアイコン*/
.sns-follow.sf-bottom .icon-rss-logo:before,
.sns-follow.sf-widget .icon-rss-logo:before {
	color: #f26522; /*アイコンの色*/
}


/************************************
** マウスオーバー背景色設定
************************************/
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.navi-in a:hover,
.navi-footer-in a:hover,
.a-wrap:hover,
.comment-reply-link:hover,
.recent-comments .a-wrap:hover .recent-comment-content,
.pagination a:hover,
.pagination-next-link:hover, .comment-btn:hover,
.pager-links a:hover span,
.pager-links a:hover span,
.mobile-menu-buttons .menu-button:hover,
.menu-drawer a:hover,
.bp-login-widget-register-link a:hover{
background-color: #EEEEEE; /*背景色*/
color:  #EEEEEE/*フォントカラー*/
transition: all 0.5s ease;
}

/************************************
タイトル周り変更
************************************/
/* H1 */
.article h1{
	
	font-size:48px;
	 background:none;
	border:none;
	color:none;
		
}
/* H2 */
.article h2{
	font-size:36px;
	background:none;
	border:none;
	color:none;
}
 
/* H3 */
.article h3{
	font-size:24px;
	background:none;
	border:none;
	color:none;
}
 
/* H4 */
.article h4{
	font-size:22px;
	background:none;
	border:none;
	color:none;
}
 
/* H5 */
.article h5{
	font-size:20px;
	background:none;
	border:none;
	color:none;
}
 
/* H6 */
.article h6{
	font-size:18px;
	 background:none;
	color:none;
}

/************************************
** テーブルの色透明に
************************************/
.container table tr {
  background-color: transparent;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
		/* H1 */
.article h1 {
    font-size: 31px;
	}
	
	/* H2 */
.article h2{
	font-size:120%;
	 background:none;
	border:none;	
}
 
/* H3 */
.article h3{
	font-size:164%;
	background:none;
	border:none;
}
	/* H4 */
.article h4{
	font-size:100%;
	background:none;
	border:none;
}
	.article h5{
	font-size:100%;
	background:none;
	border:none;
}
}