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

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

/*----------------------------------------------------------------------
全体
----------------------------------------------------------------------*/

/* ページタイトル変更 */
.site-name.site-name-text-link span{font-size:40px;margin:50px 5px;} 

/* ページ見出し変更（h2～h6） */
h2{margin:30px 0px 20px;padding:15px 20px !important;
  background-color:#fff !important;
  font-size : 18px !important;
  color : #111;border-bottom:solid 2px;
}
h3{margin:10px 0px !important;
	padding:5px 20px !important;
	border:none !important;
	border: solid 1px #111 !important;
	font-size : 18px !important;
}
h4{padding:10px 20px !important;
	border:none !important;
	border-left:solid 7px #59d600 !important;
	font-size : 18px !important;
}
h5{padding:10px 20px !important;
	border:none !important;
	border-bottom: solid 1px #59d600 !important;
	font-size : 16px !important;
}
h6{padding:10px 0px !important;
	border:none !important;
	font-size : 16px !important;
}

/*table表*/
table{margin:10px;padding:0px;margin-top:0px}
th, td{border-color:#606060 !important;}
th {background-color:#dbffb7 !important;}
td {background-color:#fff !important;}

/*目次*/
.toc {padding:10px 50px;border-color:#606060;}
.toc-title{font-weight:bold;}

/* アコーディオンの表示変更 */
summary {cursor: pointer;}
details[open] summary {color: gray;}
details{margin-left:20px;}

/* カテゴリーラベル消去 */
.cat-label {display: none;}

/* 更新日・投稿日 */
.date-tags span{font-size:13px;}

/* ページタイトル変更 */
img{border:none;}

/*----------------------------------------------------------------------
ヘッダー
----------------------------------------------------------------------*/

/*ヘッダー2段組*/
.header-2row{display: flex;height:100px;}
.header-2row div{width: 50%;}
.header-2row,.header-2row>div{padding: 10px;}

/*ヘッダータイトル調整*/
.header-in {text-align:left;height:60px;}
.tagline {text-align:left;padding: 0px;margin:0px;}
.logo.logo-header.logo-text {padding: 0px;text-align:left;padding-left: 20px;}

/*文字タイトル表示*/
#header-in .site-name {
	position: relative;
}

#header-in .site-name-text:before {
	content: "susumena";
	position: absolute;
	top: 30%; /*どこに入れたいのか不明だから真ん中あたり※適当な数値*/
	left: 100px; /*文字列の長さに合わせ数値変更*/
	color: #111; /*分かりやすいよう赤文字に*/
	font-size:30px;
	font-family:fantasy;
}

.logo{padding:0px;
	text-align:left;
}

/*検索窓*/
.search-box {float:right;
margin:0px 1.5px;margin-top:-40px;
}
.search-edit {
width:auto; /*入力部分の長さ*/
height:40px ;/*検索窓の高さ*/ 
background: #fff; /*入力部分の背景色*/
 font-size: 15px;
}	
.search-submit {
background: #fff; /*ボタン部分の背景色*/
color: #aeab92;/*アイコンの色*/
position: absolute; margin:3px 6px 3px; 
cursor: pointer; line-height:0; /*検索アイコンの高さや位置*/ 
border:none;padding: 0;}

.search-box input::placeholder {
font-size: 14px; color: #aeab92;/*プレースホルダーのフォント大きさと色*/
}

@media screen and (max-width: 844px){
	.search-box {width:400px;padding-left:100px;margin-top:-30px;}	
}

@media screen and (max-width: 480px){
	.search-box {display:block;width:300px;margin-top:10px;padding-left:100px;}	
}
/*----------------------------------------------------------------------
ユーザー表示
----------------------------------------------------------------------*/

/*----------------------------------------------------------------------
SNSシェアボタン
----------------------------------------------------------------------*/
/*SNSシェアボタン変更*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
    margin:10px auto;
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*----------------------------------------------------------------------
ウィジェット
----------------------------------------------------------------------*/
/* widgetタイトル変更 */
h3.widget-sidebar-title.widget-title{padding:5px;font-size:16px;background-color:#fff;color:#111;text-align:center;height:80% !important;border-radius: 5%;}

/* widgetタイトル変更（新着記事） */
div.new-entry-card-title.widget-entry-card-title.card-title{font-size:14px;margin:0.8em 0.5em;line-height:1.8;padding:0;}

div.new-entry-card-title.widget-entry-card-title.card-title{font-size:15px;font-weight:bold;margin:0.8em 0.5em;line-height:1.8;padding-top:1em;vertical-align:middle;}
.wp-post-image{border-radius:5%;}

.new-entry-card-link.widget-entry-card-link.a-wrap:hover {
  -webkit-transform: translateY(-4px); /*浮かす*/
  -ms-transform: translateY(-4px); /*浮かす*/
  transform: translateY(-4px); /*浮かす*/
	font-weight:bold;
	background-color:#fff;
	transition-duration: 0.4s; /*アニメーション*/}

/*----------------------------------------------------------------------
固定ページ
----------------------------------------------------------------------*/
/* 固定ページの日時を非表示 */
.page .date-tags, /*投稿日・更新日*/
.page .author-info, /*投稿者情報*/
.page .eye-catch-wrap { /*アイキャッチ*/
display: none;
}

/*----------------------------------------------------------------------
トップページ
----------------------------------------------------------------------*/
/*トップページタイトル削除*/
.front-top-page #main .entry-title{
  display: none;
}

/*新着一覧を3カラム*/
.entry-content .new-entry-card-link.widget-entry-card-link.a-wrap{
	display: inline-block;width: 30% !important;height:220px;vertical-align:top;margin:10px 5px 10px;}
.entry-content .new-entry-card-link.widget-entry-card-link.a-wrap:hover {
  -webkit-transform: translateY(-4px); /*浮かす*/
  -ms-transform: translateY(-4px); /*浮かす*/
  transform: translateY(-4px); /*浮かす*/
	font-weight:bold;
	background-color:#fff;
	transition-duration: 0.4s; /*アニメーション*/}

.entry-content .new-entry-card-thumb.widget-entry-card-thumb.card-thumb{width:240px;height:auto;text-align:center;margin:10px 3px 0px;padding:0px !important;}
.entry-content .new-entry-card-thumb.widget-entry-card-thumb.card-thumb img{border-radius:5%;}
.entry-content .new-entry-card-content.widget-entry-card-content.card-content{display:inline !important;width:100%;margin-top:0px;}
.entry-content .new-entry-card-title .widget-entry-card-title.card-title{margin-top:0px;}
.new-entry-card-title.widget-entry-card-title.card-title{font-size:14px !important;font-weight:normal !important;padding-top:0px !important;}

@media screen and (max-width: 844px){
.new-entry-card-title.widget-entry-card-title.card-title{width: 40% !important;}
}

@media screen and (max-width: 480px){
	.entry-content .new-entry-card-link.widget-entry-card-link.a-wrap{width:100% !important;}
	.new-entry-card-thumb.widget-entry-card-thumb.card-thumb img{margin-left:20px !important;}
	.new-entry-card-title.widget-entry-card-title.card-title{width:300px !important;}
}

/*----------------------------------------------------------------------
カテゴリーページ
----------------------------------------------------------------------*/

/* カテゴリー一覧ラベル */
.catlist {list-style:none;}
.caticon {width:60px;height:60px;vertical-align:middle;margin:0px 20px;}

/* カテゴリーウィジェット */
.catlist a{color:#111;}
.catlist li:hover {
  -webkit-transform: translateY(-4px); /*浮かす*/
  -ms-transform: translateY(-4px); /*浮かす*/
  transform: translateY(-4px); /*浮かす*/
	font-weight:bold;
	background-color:#fff;
	transition-duration: 0.4s; /*アニメーション*/}

/*----------------------------------------------------------------------
お問い合わせ
----------------------------------------------------------------------*/
/*送信ボタン*/
input.wpcf7-submit{width:200px;height:40px;
	text-decoration: none;
	display: inline-block;
	padding:5px;
	background-color:#59d600;
	color: #fff;
	text-align: center;
	box-shadow:2px 2px #59d600;
	border-radius: 5%;
	font-size:15px;
	font-weight:normal;
}

input.wpcf7-submit a{text-decoration: none;color: #fff;}
input.wpcf7-submit:hover {padding:3px;background-color: #fff;border:solid 1px #59d600;transition-duration: 0.6s;color:#59d600; /*アニメーション*/}

/*----------------------------------------------------------------------
フッター
----------------------------------------------------------------------*/
/*区切り線なし*/
#navi-footer li {border: none;margin:5px 10px;}

/*メニュー文字*/
.navi-footer-in a:hover { /*メニューのマウスホバー時の指定*/
  color: #111 !important;border-radius: 7px;
}

/*----------------------------------------------------------------------
投稿ページ
----------------------------------------------------------------------*/
/* 投稿アイキャッチ */
.eye-catch-wrap{width:300px;}

/*投稿のタイトル*/
.eye-catch-wrap{display:inline-block !important;width:110px;float:left;}
.eye-catch-image.wp-post-image{width:100px;display:inline;}
h1.entry-title{vertical-align:middle !important;display:inline;margin-top:0px;width:670px;float:right;}

.page h1.entry-title{float:left;}

.page
.eye-catch-wrap.display-none {
  display: none !important;
}

@media screen and (max-width: 844px){
h1.entry-title{width:600px}
}

@media screen and (max-width: 480px){
h1.entry-title{width:350px;float:left;}
}

/*投稿の要約*/
.summary{margin:50px 10px;border:solid #111 1px;padding:20px 15px;border-radius:10px;	box-shadow:1px 1px #808080;
}
.summary{font-weight:bold;font-size:14px;}

/* ランキング表示 */
.rank {margin:20px 5%;padding:20px;}
.rank-title span{font-size:20px;font-weight:bold;vertical-align:base-line;margin-left:10px;}
.rank-title img{width:45px;vertical-align:middle;margin:0px 10px !important;padding:0px;}
.rank-circle {width:60px;height:60px;font-size:20px !important;padding:3px;margin:0px 10px;vertical-align:middle;border:solid 1px;border-radius: 50%;}
.rank-comment p{margin:10px;line-height:30px;}

/* まとめ表示 */
.conclusion {margin:20px 0px;}
.conclusion p{line-height:2.2;margin:1.8em 0;}

/* 投稿者 */
.author-link{color:#111;}

/*関連記事*/
.related-entry-card-content.card-content.e-card-content h3.related-entry-card-title.card-title.e-card-title{font-size:14px;border:none;}
.related-entry-card-wrap.a-wrap.border-element:hover {
  -webkit-transform: translateY(-4px); /*浮かす*/
  -ms-transform: translateY(-4px); /*浮かす*/
  transform: translateY(-4px); /*浮かす*/
	font-weight:bold;
	background-color:#fff;
	transition-duration: 0.4s; /*アニメーション*/}
.related-entry-card-title.e-card-title {margin-top:0px;
font-weight: normal;
font-size: 14px !important;
border:none !important;
}

/*タグカスタマイズ*/
.fa-tag:before {
  content: "#";
}
.tag-link {font-size:12px;border:none;margin:10px;padding:0.1em 1em;
}

.tag-link {transition-duration: 0.2s; /*アニメーション*/
}
.tag-link:hover { /*ピックアップ記事*/
  -webkit-transform: translateY(-4px); /*浮かす*/
  -ms-transform: translateY(-4px); /*浮かす*/
  transform: translateY(-4px); /*浮かす*/
  box-shadow: 4px 4px 4px rgba(0,0,0,0.2)!important; /*シャドー（影）*/
  background-color: #fff; /*背景色*/
  transition-duration: 0.6s; /*アニメーション*/
  font-weight:bold;
  text-decoration:none;
}

/*----------------------------------------------------------------------
コメント
----------------------------------------------------------------------*/
/* 「コメントを書き込む」ボタン */
.comment-btn.key-btn{background-color:#fff;width:50%;font-size:15px;border:none;text-align:left;}
.comment-btn.key-btn:before {content:"▼　";}
#reply-title.comment-reply-title{border:none !important;}
.logged-in-as a{color:#111;}

/*コメントボタン*/
#commentform .form-submit input[type='submit']{width:200px;height:40px;
	text-decoration: none;
	display: inline-block;
	padding:5px;
	background-color:#59d600;
	color: #fff;
	text-align: center;
	box-shadow:2px 2px #59d600;
	border-radius: 5%;
	font-size:15px;
	font-weight:normal;
}

#commentform .form-submit input[type='submit'] a{text-decoration: none;color: #fff;}
#commentform .form-submit input[type='submit']:hover {padding:3px;background-color: #fff;border:solid 1px #59d600;transition-duration: 0.6s;color:#59d600; /*アニメーション*/}

.form-submit{text-align:center;}

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

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

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