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

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


/************************************
全体のバランス
************************************/
.entry-content {
padding:1em;
padding-top:0;
margin: 0 auto;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}

a {
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}

/************************************
****　フッター
************************************/
.footer-title{
color:#7b7b7b;
border-bottom:3px dotted;
border-color:#90C31F;
margin-bottom:1em;
}
#footer, #footer a{
color:#7b7b7b;
}
.widget-entry-cards .widget-entry-card-content {
color:#7b7b7b;
font-size:13px;
padding-left:.5em;
}
@media (max-width:1023px){
.footer {
margin-top: 0;
padding-top: 0;
}}
@media (max-width:880px){
.footer-title{
margin-top:2em;
}}
@media screen and (max-width: 480px){
h2, h3 {
font-size: 1.17em;
}
.widget-entry-cards .widget-entry-card-content {
line-height:1.3;
}
}
.footer-widgets, .footer-widgets-mobile {
margin: 0 auto;
}
.footer-left, .footer-center, .footer-right, .footer-mobile {
padding: 0 10px;
}
.widget.widget-footer-mobile{
padding:0;
}
aside#popular_entries-3.widget.widget-footer-mobile.widget_popular_entries div.popular-entry-cards.widget-entry-cards.no-icon.cf{
padding:0 .4em 0;
}
.widget-footer-mobile div.tagcloud,.widget-footer-mobile ul li a{
margin-right:.2em;
margin-left:.2em;
}
.source-org.copyright{
color: #7b7b7b;
}
@media screen and (max-width: 1023px){/*スマホ画面でサイドバーを非表示*/
div.sidebar {
display: none;
}
}

/************************************
** 本文記事タイトル
************************************/
header.article-header.entry-header {
text-align:center;
}
.article-header h1 {
position: static;
font-size: 1.4em;
color: #333333;
background-color:#fff;
line-height:1.8em;
text-shadow: none;
margin:0;
padding: 1.5em .95em 1.1em;
}
.eye-catch{
box-shadow: 0px 3px 7px 0 rgba(0,0,0,.2);
}
.eye-catch img{
height:auto!important;
-webkit-filter:none;
filter:none;
opacity:1;
transform: none;
width: 100%;
}
a.cat-link, a.tag-link{
font-size:.7em;
border-radius:10px;
border:0;
margin:0.5em;
padding:0 0.5em 0;
background:#90C31F!important;/*タグ色の変更はこちら*/
color:#fff!important;
}
.cat-link:hover ,.tag-link:hover {
opacity: .5;
transition: all .3s ease-in-out;
}
.entry-categories-tags {
margin-bottom: 0.4em;
}
.date-tags{
font-size:1.2em;
color:#7b7b7b;
top:5px;
right:0;
left: 0;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
div.date-tags span.post-update{
order: 1;
}
span.fas.fa-history::before{
content:"\f2f1"
}
div.date-tags span.post-update,div.date-tags span.post-date{
margin-right: 10px;
}
@media (max-width:1023px){
.entry-categories-tags.ctdt-one-row {
padding: 0;
}
}
@media (max-width:420px){
.article-header h1 {
font-size: 1.2em;
}
.date-tags{
top:3px;
}
}
@media (max-width:834px){
main.main, div.sidebar {
padding:0;
}}
@media screen and (min-width: 601px) and (max-width: 834px){
div#content.content.cf{
margin:1em;
}}

/************************************
** contact form7 カスタマイズ
************************************/
.haveto{
font-size:9px;
padding:2px 5px;
background:#90C31F;/*必須 色の変更はこちら*/
color:#fff;
border-radius:20px;
margin-right:5px;
position:relative;
bottom:2px;
}
#formbtn{
display: block;
padding:10px;
width:300px;
background:#f7f7f7;
color:#545454;
font-size:17px;
border:none;
border-radius:50px;
margin:25px auto 0;
transition:0.2s;
}
#formbtn:hover{
background:#90C31F;/*送信 色の変更はこちら*/
color:#fffff4;
border-radius:50px;
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}

/************************************
**ヘッダーロゴ
************************************/
@media screen and (max-width: 834px){
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:0;
margin-top:1em;
margin-bottom:1em;
max-height:60px;/*大きなロゴ画像を使いたい方は、ここの数字を大きくしてみてください*/
}

/************************************
**ヘッダー　モバイル表示
************************************/
@media screen and (max-width: 1023px) and (min-width: 835px){
.admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons {
margin-top: 0;
}}
@media (min-width:835px){
ul.mobile-header-menu-buttons.mobile-menu-buttons{
display:none;
}
}
@media (max-width:834px){
.header-container {
display:none;
}
img.site-logo-image{
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
.mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/
background: #fff;
}
}

/*——————-
おすすめカード
———————-*/
div#recommended-in.recommended-in.wrap.cf{
margin-top: 20px;
max-height:220px;
}
@media screen and (min-width: 1024px){
div#recommended-in.recommended-in.wrap.cf{
padding:0 2em;
}}
div#content.content.cf{
margin-top:0;
}
.widget-entry-cards .a-wrap{
transition: all .2s;
}
.widget-entry-cards .a-wrap:hover {
transform: translateY(-1px);
transition: all .2s;
}
figure.navi-entry-card-thumb.widget-entry-card-thumb.card-thumb{
opacity:.8;
}
.recommended.rcs-center-white-title .a-wrap:hover .card-content {
transition: all .1s;
opacity: 1;
}
.widget-entry-cards.large-thumb-on .card-content{
background: rgba(151, 151, 151, 0);
}
a.navi-entry-card-link.widget-entry-card-link.a-wrap{
border-radius:10px!important;
margin:1em .5em;
background-color:#FFFFFF;/*Cocoon設定「全体」の「サイト背景色」に合わせてください*/
}
div.navi-entry-card-title.widget-entry-card-title.card-title{
color:#333333;
font-weight:bold;
font-size:.8em;
background-color: rgba(255, 255, 255, 0.8);
padding: .6em .5em;
border-radius:30px;
}
@media (max-width:834px){
a.navi-entry-card-link.widget-entry-card-link.a-wrap{
margin:.3em 0em;
}
div.navi-entry-card.widget-entry-card.e-card.cf{
border-radius:10px!important;
overflow:hidden;
max-height:100px;
margin:0 .3em 0;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1)!important;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
box-shadow:none;
}
}
@media (max-width:834px){
div.navi-entry-card-title.widget-entry-card-title.card-title{
font-size:.6em;
padding: .5em;
}
div#recommended-in.recommended-in.wrap.cf{
margin: .7em .2em .3em;
}
.widget-entry-cards.large-thumb-on .card-content{
background: rgba(151, 151, 151, 0.2);
}
}
main#main.main{
margin:0;
}

/************************************
**　ヘッダーメニュー
************************************/
.navi-in>ul li {
line-height: 40px;
height: 40px;
}
.navi-in a{
font-size:15px;
}
#navi .navi-in a:hover {
transform: none!important;
}
.navi-in > ul .sub-menu a {
padding: 0;
}
.sub-menu{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.sub-menu .caption-wrap {
color:#333;
border-top: dotted #dddddd;
background:#fff;
padding:0 0 0 2em;
margin:0;
}
.navi-in > ul .sub-menu a:hover {
transform: none!important;
}
div#header-container {
box-shadow: none;
}
div.item-label{
font-weight:bold;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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