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

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

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

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

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

/************************************
** ブログカード
************************************/
.blogcard-snippet,
.blogcard-footer {
  display: none;
}
.blogcard-wrap {
  transition: all .3s;
  max-width: 600px;
  margin: 2em auto;
}
.blogcard {
  border:1px solid #eaeaea !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  padding: 10px;
}
.blogcard-wrap:hover {
  background: none;
  transform: translateY(-3px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
}
.blogcard-thumbnail {
  margin: 0;
}
.blogcard-thumbnail img {
  display: block;
}
.blogcard-title {
  color: #555;
  letter-spacing: 0.5px;
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 0 0;
  height: 45px;
  overflow: hidden;
}
.blogcard-content {
  min-height: auto;
  margin-left: 185px;
  padding-right: 6px;
}
.blogcard-label {
  top: -11px;
  left: 9px;
  padding: 3px 0.6em;
  background:#aaa;
  padding: 1px 10px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
}
.blogcard-content:after {
  content: "クリックして読む";
  background: #66c2c3; /* 背景色 */
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  width: 180px;
  border-radius: 20px;
  font-size: 13px;
  padding: 1px 0;
  margin-top: 6px;
}
@media screen and (max-width: 834px) {
  .blogcard-content {
    margin-left: 130px;
  }
  .blogcard-title {
    font-size:12px;
    line-height: 1.5;
    height: 35px;
    margin:0;
  }
  .blogcard-content:after {
    content: "タップして読む";
  }
  .blogcard-thumbnail{
    width:120px;
  }
}
@media screen and (max-width: 560px) {
  .blogcard-content:after {
    width: 120px;
    font-size: 12px;
  }
  .blogcard-title {
    margin:0;
  }
}
@media screen and (max-width: 320px) {
  .blogcard-thumbnail {
    width: 100px;
  }
  .blogcard-content {
    margin-left: 110px;
  }
  .blogcard-title {
    height: 35px;
  }
}
/**************************
 タブ切り替え
***************************/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
margin:5px 0;
}

.tab-label {
  color: #3badc9;
  background:lightgray;
  text-align: center;
  padding: .5em 1em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
  border-radius: 2px;
  position: relative;
}

.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
 background:#f6ecba;/*背景色*/
}
.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 10px solid transparent;
border-top:10px solid #f6ecba;
	width: 0;
	height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px 0 0 0;
  opacity: 1;
  transition: .5s opacity;
}

/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}


/*固定ページ（トップページカスタマイズ）*/
/*フロント固定ページのタイトルを非表示*/ .home.page .entry-title{ display: none; } /*フロント固定ページのシェアボタンを非表示*/ .home.page .sns-share{ display: none; } /*フロント固定ページのフォローボタンを非表示*/ .home.page .sns-follow{ display: none; } /*フロント固定ページの投稿日を非表示*/ .home.page .post-date{ display: none; } /*フロント固定ページの更新日を非表示*/ .home.page .post-update{ display: none; } /*フロント固定ページの投稿者名を非表示*/ .home.page .author-info{ display: none; }


/* 折り畳み月別アーカイブのデザイン---------------------------------------------- */

.widget_archive a.year{ /*各年*/
	cursor: pointer;
}

/*各年右横のアイコン*/
.widget_archive a.year::after{ 
font-family: "Font Awesome 5 Free";
content: "\f063"; /* アイコンの指定 */
position: relative; /* 相対配置 */
left: 5px; /* アイコンの位置 */
font-weight: bold;
}

/*各月*/
.widget_archive .years ul { 
display:block;
margin-left: 20px; /*インデント*/
font-size: 1em;
-webkit-transition: 300ms ease;
  transition: 300ms ease-out;
}

.widget_archive ul.years li {
border-bottom: 2px dotted #ccc;
}

/*マウスホバー時*/
#sidebar .widget_archive ul.years li :hover {
	background: none;
}

 /*各年をクリックすると開閉*/
.widget_archive ul.years .hide {
	margin: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
}

/*人気記事ランキングの番号デザイン*/
.widget-entry-cards.ranking-visible .card-thumb::before {
top:-6px!important;
left:-5px!important;
border-radius:50%;
padding:2px;
}

/*サイドバー*/

.sidebar h3 {
	background:transparent; /* Cocoon親テーマCSSリセットのため */
	padding: 8px 0px;
	border-bottom: 2px #3badc9 dotted; /* ドット下線追加 */
	letter-spacing: 0.2em; /* 字間を広げる */
}
.sidebar h3{
  background-color:#fffaf0;/*好きな背景色にする*/
  color:#3badc9;/*好きな文字色にする*/
  padding:16px 10px;
  margin:16px 0;
}
div.sidebar {
	padding: 20px;
	background-color:#fffaf0;
}
/*モバイルフッターメニュー色*/

.mobile-footer-menu-buttons,
.navi-menu-content,
.mobile-footer-menu-buttons .menu-button > a,
.mobile-footer-menu-buttons .menu-button:hover,
.navi-menu-content a,
.navi-menu-content a:hover {
  background: #3badc9;
  color: #fff;
}

/*見出し*/

/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}
.article h6 {
	position: relative;
	padding: 16px 25px 16px 25px;
	border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
	border-bottom: 4px solid #f6ecba;
	border-right: 4px solid #f6ecba;
	background: #3badc9;
	color: #fff;
}

/*media Queries 1030px以下
-----------------------------------------------------------------------------*/
@media screen and (max-width: 1030px){
.article h2 {
	padding: 10px 0.8em;
}


カラーコードの部分は好きな色に変えて使ってみてください。

/* Contact Form 7 */

/* 必須マーク */
.must {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #ff7a7a; /* 背景色 */
	border-radius: 5px;
}

/* 必須マーク */
.must {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #ff7a7a; /* 背景色 */
	border-radius: 5px;
}

/* 任意マーク */
.free {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #7fbfff; /* 背景色 */
	border-radius: 5px;
}


/* 項目名を太字にする */
form p {
	font-weight: 600;
}

/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8; /* 枠線の色 */
	border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

/* 必須項目の入力欄を見やすくする */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	background: #eff1f5; /* 背景色 */
}

/* 送信ボタンを見やすくする */
input.wpcf7-submit {
	width: 100%; /* 好みで60〜80%でもOK */
	height: 50px;
	border-color: #ffbf7f; /* 枠線の色 */
	background: #ffbf7f; /* ボタンの色 */
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	border-radius: 2px;
}

/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}
	
	/*ヘッダーの破線を消す*/
.menu-button{
	border: none!important;
}
		
	/*ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color:#3badc9;
	color: #FFFFFF;
}

.logo-menu-button.menu-button{
	background-color: #3badc9;
}
	
body.page-id-1148 {
background-color: #fffaf0 !important;
}