@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く_はじめは何もなかった*/


/*--追加class--*/
.clear {
    clear: both!important;
}

h2 h3 h4 h5 h6 {
    line-height: 1.8!important;
}

/*--table {
    border: solid 2px #c88578;
}--*/

.margin-t-5 {
	margin-top: -5px!important;
}
.margin-t-10 {
	margin-top: -10px!important;
}
.margin-t-15 {
	margin-top: -15px!important;
}
.margin-t-20 {
	margin-top: -20px!important;
}
.margin-t-30 {
	margin-top: -30px!important;
}


.margin-b-5 {
	margin-bottom: -5px!important;
}
.margin-b-10 {
	margin-bottom: -10px!important;
}
.margin-b-15 {
	margin-bottom: -15px!important;
}
.margin-b-20 {
	margin-bottom: -20px!important;
}
.margin-b-30 {
	margin-bottom: -30px!important;
}


.margin-t0 {
	margin-top: 0px!important;
}
.margin-t5 {
	margin-top: 5px!important;
}
.margin-t10 {
	margin-top: 10px!important;
}
.margin-t15 {
	margin-top: 15px!important;
}
.margin-t20 {
	margin-top: 20px!important;
}
.margin-t30 {
	margin-top: 30px!important;
}
.margin-t50 {
	margin-top: 50px!important;
}
.margin-t80 {
	margin-top: 80px!important;
}
.margin-t100 {
	margin-top: 100px!important;
}



.margin-b0 {
	margin-bottom: 0px!important;
}
.margin-b5 {
	margin-bottom: 5px!important;
}
.margin-b10 {
	margin-bottom: 10px!important;
}
.margin-b15 {
	margin-bottom: 15px!important;
}
.margin-b20 {
	margin-bottom: 20px!important;
}
.margin-b30 {
	margin-bottom: 30px!important;
}
.margin-b50 {
	margin-bottom: 50px!important;
}
.margin-b80 {
	margin-bottom: 80px!important;
}
.margin-b100 {
	margin-bottom: 100px!important;
}




.w10p {
	  width: 10%!important;
}

.w15p {
	  width: 15%!important;
}

.w20p {
	  width: 20%!important;
}
.w25p {
	  width: 25%!important;
}
.w33p {
	  width: 33%!important;
}
.w50p {
	  width: 50%!important;
}
.w100p {
	  width: 100%!important;
}
.w120 {
	  width: 120px!important;
}
.w200 {
	  width: 200px!important;
}
.w220 {
	  width: 220px!important;
}
.w240 {
	  width: 240px!important;
}
.w260 {
	  width: 260px!important;
}
.w300 {
	  width: 300px!important;
}
.w350 {
    width: 350px!important;
}
.w400 {
    width: 400px!important;
}
.w480 {
    width: 480px!important;
}
.w500 {
	  width: 500px!important;
}
.w600 {
	  width: 600px!important;
}
.w640 {
	  width: 640px!important;
}
.w800 {
	  width: 800px!important;
}


.txtC{
	text-align: center;
}
.txtL{
	text-align: left;
}
.txtR{
	text-align: right;
}


/*---【Cocoon】グローバルナビメニューの設定方法とカスタマイズから----
#navi .navi-in > ul li{
	height: 80px;
	line-height: 80px;
}

#navi .navi-in > .menu-header .item-label{
	font-size: 13px;
}

#navi .navi-in a:hover{
	color: #ff0000!important;
	background: #000000;
	transition: all 0.5s ease;
}
*/

/*---【超簡単】ブログタイトルとキャッチフレーズを左寄せにする方法。から----*/
.header-in .tagline {
text-align:left;
	padding-left: 0px;
}

.header-in .logo {
text-align: left;
	padding-left: 0px ;
	padding-top: 8px ;
	padding-bottom: 0px ;
	margin-bottom: 0px ;
}


/*---cocoonのタイトルとキャッチフレーズを太字にする方法から----*/
.site-name-text{
font-weight: 900;
}


/*---縦型カード3列の表示について | Cocoonテーマに関する質問 | Cocoon フォーラムから----
.ect-3-columns {
  justify-content: flex-start;
}


/*---【Cocoon】ブログ初心者でもできるヘッダーメニュー（グローバルメニュー）のおしゃれなカスタマイズ から----*/
.navi-in > ul{ /*-メニューを中央に配置したい場合はこちらを削除してください-*/
justify-content:flex-start;
}

.navi-in>ul li {
line-height: 46px;
height: 46px;
}
.navi-in a{
font-size:13px;
}
#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 {
font-size:12px;
color:#666;
/*border-top:#ba6553;*/
border-top:#DC3084;
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;*/
}


/*---【Cocoon】ブログ初心者でもできるサイドバーのおしゃれなカスタマイズ から----*/
#sidebar>.widget{
border-radius:10px;
}
.widget_search{
padding:0;
}
/*--
 * span.fas.fa-search::before{
color:#ba6553;
}
--*/
.sidebar h3{
color:#666;
border-radius: 0%;
/*border-bottom:3px dotted;*/
/*border-color:#ba6553;*/
border-color:#DC3084;
padding-bottom:0.3em;
margin-top:-0.5em;
margin-bottom:1em;
}
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {
font-size:12px;
background-color:#f7f7f7;
color:#666!important;
margin: 6px 0;
padding: 4px 10px;
border-radius:20px;
transition: 0.4s
}
.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{
/*background-color:#ba6553;*/
background-color:#DC3084;
color:#fffff4!important;
}
.tagcloud a{
font-size:12px;
background-color:#f7f7f7;
color:#666!important;
}
.tagcloud a:hover{
/*background-color:#ba6553;*/
background-color:#DC3084;
color:#fffff4!important;
transition: 0.4s ;
}
.nwa .recommended.rcs-card-margin a {
margin: 0 0 1em;
width: 90%;
}


/*---サイドバー、目次の幅（調査）----*/
.toc-content{
/*border-top: 1px solid #f4e7e5;*/
border-top: none;
width: 260px
}



/*---【Cocoon】ブログ初心者でもできる人気記事ランキングのおしゃれなカスタマイズ から----*/
.sidebar a.popular-entry-card-link.a-wrap{
margin:0;
padding:0;
border: solid 1px #fff;
}
.sidebar figure.popular-entry-card-thumb.widget-entry-card-thumb.card-thumb{
margin:.5em 0em .5em .5em;
}
.sidebar div.popular-entry-card-content.widget-entry-card-content.card-content{
font-size:12px;
padding:.5em .5em .5em .8em;
text-align: justify;
line-height:1.5;
}


/*---【上のパクリ】ブログ初心者でもできる関連記事のおしゃれなカスタマイズ　から----*/
.sidebar a.widget-related-entry-card-link.a-wrap{
margin:0;
padding:0;
border: solid 1px #fff;
}
.sidebar figure.widget-related-entry-card-thumb.widget-entry-card-thumb.card-thumb{
margin:.5em 0em .5em .5em;
}
.sidebar div.widget-related-entry-card-content.widget-entry-card-content.card-content{
font-size:12px;
padding:.5em .5em .5em .8em;
text-align: justify;
line-height:1.5;
}


/*---【Cocoon】YouTubeを中央orカラム一杯に表示する方法から----*/
.video-container {
margin: 0px auto;
  max-width: none;
}


/*---cocoon（コクーン）固定ページの日付を非表示にする方法から----*/
.post-281 .date-tags,
.post-289 .date-tags {
display: none;
}


/*--複数の固定ページの日付を非表示にする、おまじない-----*/
.post-8 .date-tags,
.post-42 .date-tags {
  display: none;
}


/*--写真2枚目の左に余白（山内さん）-----*/
@media (min-width: 782px) {
   .wp-block-column:not(:first-child) {
        margin-left: 1.0em;
    }
}


/*--写真下の余白縮める（調査）-----*/
.wp-block-columns {
 /* margin-bottom: 0em!important;→240420コメントアウトby玉野*/
}


/*--ギャラリーの余白など（調査）-----*/
.gallery-item {
/*--margin-top: 10px;--*/
    margin-top: 0px!important;
	margin-bottom: 0px!important;
}

#gallery-1 img {
/*--border: 2px solid #cfcfcf;--*/
    border: 1px solid #fff!important;
}
#gallery-2 img {
    border: 1px solid #fff!important;
}
#gallery-3 img {
    border: 1px solid #fff!important;
}
#gallery-4 img {
    border: 1px solid #fff!important;
}


/*--見出しの行間（調査）-----*/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
    /*--line-height: 1.25;--*/
  line-height: 1.8;
  font-weight: bold;
}


/*--[解決済] 縦型カード3列の表示について-----*/
.ect-3-columns {
  justify-content: flex-start;
}


/*--トップ一覧画像の角丸--*/
.list .card-thumb img {
	border: 3px solid #fff;
	/*border: none;*/
	border-radius: 20px;
	/*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/
	box-shadow: none;
	transition: all 0.4s ease-out;
}


/*--メイン窓（コンテンツ上部）の色・余白など--*/
.content-top {
    margin: 0 auto -20px;
    background-color: #F5C501;
	padding-top: 20px;
}

/*--フッタ（コンテンツ下部）の色・余白など--
background-color: #ba6553;茶
background-color: #DC3084;紫
background-color: #F5C501;黄--*/
.content-bottom {
    margin: 1em 0;
    margin-bottom: -2em;
    padding-top: 1px;
	padding-bottom: 1px;
}

/*--フッタ・（C）の余白など--*/
.footer-bottom {
    margin-top: 0;
    padding: 0;
}

.footer {
  margin-top: 10px;
  padding: 10px;
}

.btn-brown, .btn-wrap.btn-wrap-brown > a {/*ボタン色変更　ブラウン→青*/
    background-color: #60aee7;
}
.btn-ex, .btn-ex > a{
    background-color: var(--cocoon-brown-color);
}
/************************************
** モバイルフッターバー（変更）
************************************/
.mobile-menu-buttons {
	background: #DC3084;
}
.mobile-menu-buttons .menu-button:hover {
	background-color: #F5C501;
}
.navi-menu-content {
	background-color: #DC3084;
	font-size: 14px;
}

/*フッターの虫眼鏡色
span.fas.fa-search::before{color:#FFF;}*/

/*検索窓の虫眼鏡色
.search-submit {
  color: #894537;
}*/

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

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

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

/*481px以上（追加）*/
@media screen and (min-width: 481px){
  /*必要ならばここにコードを書く*/
  .mobile {
    display: none;
  }
}