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

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

/* 見出しリセット */
/* 見出し2 */
.article h2 {
  background:none;
  position: relative;
  letter-spacing: 1px;
  margin: 60px 0 20px 0;
  font-weight: 700;
  padding: 24px 0px;
  border-top: solid 2px #f1eeee;
  border-bottom: solid 2px #f1eeee;
}



/* 見出し3 */
.article h3 {
	border: none;
    position: relative;
    color: #5b3810;
    background: #fff;
    letter-spacing: 1px;
	margin: 60px 0 20px 0;
    padding: 24px 0px;
    font-weight: 700;
}

.article h3:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 5px;
    background: -webkit-repeating-linear-gradient(135deg,#fff, #fff 3px, #f1eeee 3px, #f1eeee 6px);
	background: repeating-linear-gradient(135deg,#fff, #fff 3px, #f1eeee 3px, #f1eeee 6px);  /* 背景 グラデーション*/
}

.article h4 {
    color: #5b3810;
    background: #fff;
    letter-spacing: 1px;
    margin: 60px 0 20px 0;
    padding: 24px 0px;
    font-weight: 700;
}

.article h5 {
    color: #5b3810;
    background: #fff;
    letter-spacing: 1px;
    margin: 60px 0 20px 0;
    padding: 24px 0px;
    font-weight: 700;
}

.article h6 {
    color: #5b3810;
    background: #fff;
    letter-spacing: 1px;
    margin: 60px 0 20px 0;
    padding: 24px 0px;
    font-weight: 700;
}

/*メインコンテンツ上の余白を消す*/
.main{
	padding: 0 29px;
}

@media screen and (max-width: 834px){
main.main, div.sidebar {
    padding: 0 16px 
}
}

/*目次のアンダーラインを消す*/
.toc-content a:hover {
	color: #e3acae;
	text-decoration : underline;
}


/*記事を浮き上がらせる*/
.new-entry-card:hover { /*マウスオン時*/
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 10px 20px -5px #f2f2f2; /*影の色*/
}


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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/************************************
** 背景色設定
************************************/
.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: #f7f6f5; /*背景色*/
color: #5B3810; /*フォントカラー*/
transition: all 0.5s ease;
}
/****************
タブ見出しボックス
****************/
.caption-box-label{ 
	padding: 6px 16px; /*タブ内側余白*/
	font-size: 17px; /*タイトル文字の大きさ*/
	font-weight: bold; /*タイトル文字の太さ*/
}
/********************************
ボックスメニューのカスタマイズ
********************************/

.box-menu{
	padding: 0;
	min-height: 0;
}

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

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

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

/* 4カテゴリーの幅に変更 */
@media screen and (min-width: 600px){
.wwa .box-menu {
	width: 25%;
}
}

/* 枠線を消す */
.box-menu{
box-shadow:none;
}

/************************************
** 人気記事ランキング表示のカスタマイズ
************************************/
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before{ /*順位数表示のカスタマイズ*/
	 border-radius: 50%; /*丸にする*/
	 top: -4px;  /*丸の位置上に*/
	 left: -4px;  /*丸の位置左に*/
	 width: 14px;  /*丸のサイズを小さく*/
	 height: 14px;  /*丸のサイズを小さく*/
	 font-family: 'Lato', sans-serif;  /*数字をグーグルフォントに変更*/
	 font-size: 12px;  /*数字のフォントサイズを小さく*/
}

.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {/*1位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {/*2位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {/*3位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-4 .card-thumb::before {/*4位の数字を上にし背景色変更*/
	background: #d0d0d1;
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-5 .card-thumb::before {/*5位の数字を上にし背景色変更*/
	background: #d0d0d1;
	line-height: 14px;
}

.popular-entry-card-content.widget-entry-card-content.card-content{/*タイトル*/
	padding: 0 ;/*タイトル周りの余白を調整*/
	letter-spacing: 0px;/*字間を広げる*/
	font-size: 13px;
	font-weight: 500;
	color: #786141; 
}

.widget-entry-cards-content{
	margin-left: 120px;
}

.sidebar a.popular-entry-card-link.a-wrap{/*miniブログカード*/
        margin-bottom: 2px;  /*カード間の余白を広げる*/
}

.widget-entry-cards.ranking-visible .a-wrap{
		border: none !important;
} 
.widget-entry-cards.ranking-visible .widget-entry-card-thumb{
	width: 42%;
	padding-top: 10px;
}

@media screen and (max-width: 834px){
	.widget-entry-cards.ranking-visible .widget-entry-card-thumb{
	width: 30%;
	padding-top: 10px;
   }
	.popular-entry-card-content.widget-entry-card-content.card-content{/*タイトル*/
	padding: 0;/*タイトル周りの余白を調整*/
	letter-spacing: 0.7px;  /*字間を広げる*/
	font-size: 1em;
	font-weight: 700;
	color: #5B3810; 
   }
}
@media screen and (max-width: 480px){
	.widget-entry-cards.ranking-visible .widget-entry-card-thumb{
	width: 30%;
	padding-top: 0px;
   }
	.popular-entry-card-content.widget-entry-card-content.card-content{/*タイトル*/
	padding: 0;/*タイトル周りの余白を調整*/
	letter-spacing: 0.2px;  /*字間を広げる*/
	font-size: 1em;
	font-weight: 700;
	color: #5B3810; 
   }
}
/*--------------------------------------
パンくずリストの文字色
--------------------------------------*/
.breadcrumb-home{
	color: #ccc4bc;
}

.breadcrumb-item{
	color: #ccc4bc;
}

.breadcrumb-caption{
	color: #ccc4bc;
}

/* === 景品表示法対応 === */
/* Cocoon設定本文上のPR表記 */
.pr-label-l {
    border-top: 1px dotted #e9dacb; /* 上の点線 */
    border-bottom: 1px dotted #e9dacb; /* テキスト下の点線 */
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 13px; /* 文字サイズ */
    color: #7b5544; /* 文字の色 */
    text-align: center; /* テキスト中央揃え */
    background: #fff;
    padding: 2px 0;
    margin-bottom: 3em;
}



/************************************
** TOP画面カスタマイズ
************************************/
body .entry-content>*:first-child {
    margin-top: .1em !important;
}
h2.top_menu {
    font-size: 1.9em;
	font-weight: 600;
	letter-spacing: 1.2px;
	border-top: none;
    border-left: none;
	border-bottom: 2px solid;
	border-image: linear-gradient(90deg, #FFC7EA 0%, #FFC7EA 33%, #FFDFDF 33%, #FFDFDF 67%, #CAEDFF 67%, #CAEDFF 100%  );  /* 背景 グラデーション*/
    border-image-slice: 1;
	background: #ffffff;
	color: #7b5544;
    overflow: hidden;
    text-align: left;
    margin-top: 4em;
	margin-bottom: 1em;
    padding-bottom: 0px !important;
	margin-left: auto; /* 中央寄せにするため */
	margin-right: auto; /* 中央寄せにするため */
}


h2.top_menu:after {
    margin: .7rem auto 0;
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    background-color: #FFFFFF;
}

h3.top_menu {
    font-size: 1.2em;
	font-weight: 600;
	letter-spacing: 1.2px;
    border: none;
	border-bottom: 2px solid;
	border-image: linear-gradient(90deg, #FFC7EA 0%, #FFC7EA 33%, #FFDFDF 33%, #FFDFDF 67%, #CAEDFF 67%, #CAEDFF 100%  );  /* 背景 グラデーション*/
    border-image-slice: 1;
	background: #ffffff;
	color: #7b5544;
    overflow: hidden;
    text-align: left;
    margin-top: 4em;
	margin-bottom: 1em;
    padding-bottom: 0.1em !important;
	margin-left: auto; /* 中央寄せにするため */
	margin-right: auto; /* 中央寄せにするため */
}


h3.top_menu:after {
    margin: .7rem auto 0;
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    background-color: #FFFFFF;
	background: none;
}
.page .breadcrumb,
.page .article-header,
.page .article-footer{
    display: none;
}
.p-button {
    max-width: 300px;
    margin: 0 auto;
}
.p-button a {
    display: block;
	margin-top: 3em;
	margin-bottom: 6em;
    padding: 0.6em 0.8em;
    border-radius: 2em;
    color: #7b5544;
    font-size: 15px;
    font-weight: 300;
    text-decoration: none;
    background: #f7f6f5; /* 「もっと見る」ボタンの色*/
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity:1;
}
.p-button a:hover{
    box-shadow: none;
    transform: translateY(3px);
    opacity:1;
}
.new-entry-cards.large-thumb a {
  width: 100%; /* カードサイズの大きさ */
  margin: 10px auto;
}

.widget-entry-cards.card-large-image .a-wrap {
    max-width: 480px;
	margin-top: 0 ;
	border: none !important;
}

.new-entry-cards-thumb a {
  width: 100%; /* カードサイズの大きさ */
  margin: 10px auto;
}

.widget-entry-cards figure {
    width: 180px; 
}

.widget-entry-cards .a-wrap {
   	padding-top: 0;
    padding-bottom: 0;
	margin-bottom: 0;
	line-height: 1.6;
	font-size: 16px;
	font-weight: 700;
	color: #786141;
	border-bottom: 1px dotted #ccc;
} 

.widget-entry-card-title {
	padding-top: 10px;
}
@media screen and (max-width: 834px){
	.widget-entry-cards.card-large-image .a-wrap {
    max-width: 750px;
 	margin-top: 0 ;
    }
	.widget-entry-cards figure {
    width: 45%; 
    }
	.widget-entry-cards .a-wrap {
   	margin-bottom: 10px
	}
	.widget-entry-card-title {
	padding-top: 10px;
	
}
}
@media screen and (max-width: 480px){
	.widget-entry-cards figure {
    width: 35%; 
}
	.widget-entry-card-title {
	padding-top: 0px;
	font-size: 0.7em;
	letter-spacing: 0em;
}
}

/*検索ボックスのカスタマイズ（一体型・丸縁）*/
/* ①ボックス部分 */
.search-edit, .search-box input[type="text"] {
	color: #5b3810;
	border-radius: 50px;
	outline: none;
	padding-left: 20px;
	font-size: 14px;
}
[type=submit].search-submit {
	padding: 0px 15px;
}

@media screen and (min-width: 980px) {
	[type=submit].search-submit:hover {
		color: #e9dacb;
		background: #fff;
	}
}