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

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

/* 見出しカスタマイズ */
/* H2 */
.article h2{
background:none;
padding: 0;
}
 
/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
 
/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}
 
/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}
 
/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}

/* 花の見出し(H2) */
.article h2 {
	background-color: #f5d5da; /* 背景色 */
	border-radius: 5px;
	color: #ef858c; /* 文字色 */
	padding: 10px 10px 10px 60px; /* 上・右・下・左の余白 */
	position: relative;
	text-shadow: 0px 0px 10px #fff, 0px 0px 6px #fff, 0px 0px 4px #fff, 0 0 0.5px #fff; /* 文字の影 */
}
.article h2:before {
	content: '＊*'; /*花に見せかけるためのアスタリスク*/
	color: #fff; /* アスタリスクの色 */
	display: inline-block;
	font-size: 30px; /* アスタリスクの大きさ */
	font-weight: bold;
	margin-right: 10px;
	position: absolute;
	top: 0px;
	left: 0px;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	text-shadow: 0px 0px 3px #fff, 0px 0px 2px #fff, 0 0 0.5px #fff; /* アスタリスク周りの影 */
}
.article h2:after {
	border-bottom: 2px dotted #fff; /* 下線 */
	content: '';
	position: absolute;
	bottom: 3px;
	left: 3px;
	right: 3px;
}

/* 花の見出し(H3) */
.article h3 {
	color: #d04255; /* 文字色 */
	padding: 10px 10px 10px 60px; /* 上・右・下・左の余白 */
	position: relative;
}
.article h3:before {
	content: '＊*'; /*花に見せかけるためのアスタリスク*/
	color: #fff; /* アスタリスクの色 */
	display: inline-block;
	font-size: 30px; /* アスタリスクの大きさ */
	font-weight: bold;
	position: absolute;
	top: 0px;
	left: 0px;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	text-shadow: 0px 0px 6px #EAA8BF, 0px 0px 4px #EAA8BF, 0 0 0.5px #EAA8BF; /* アスタリスク周りの影 */
}
.article h3:after {
	border-bottom: 2px dotted #EAA8BF; /* 下線 */
	content: '';
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
}

/* ①ヘッダーロゴ */
.header-site-logo-image {
	transition:0.5s;
}

/* ②ヘッダーロゴ(hover時) */
@media screen and (min-width: 980px) {
	.header-site-logo-image:hover {
		opacity:0.8;
	}
}

/*③グローバルナビの下線*/
#navi .navi-in a:after{
	position: absolute;
	content: "";
	left: 0px;
	bottom: 1px;
	height: 2px;
	width: 100%;
	background: #8cab8b;
	transform: scale(0,1);
	transition: 0.5s;
}

/*④グローバルナビの下線(hover)*/
@media screen and (min-width: 980px) {
	#navi .navi-in a:hover:after{
		transform: scale(1);
	}
}

/*⑤メニュー項目の間隔*/
#navi .navi-in>ul>li>a{
	padding: 0 2.0em;
}

/*⑥選択中メニューに下線*/
.current-menu-item:after{
	position: absolute;
	content: "";
	left: 0px;
	bottom: 1px;
	height: 2px;
	width: 100%;
	background: "";
}

/* ヘッダー幅を全幅に */
.header-container-in.hlt-top-menu {
  width:100%;
}

/************************************
****　サイドバーの設定
************************************/
#sidebar>.widget{
border-radius:10px;
}
.sidebar {
padding-left:0px;

}
@media screen and (max-width: 1205px){
.sidebar {
padding: 0%;
padding-right: 1.5%;
}
}
.widget_search{
padding:0;
}
span.fas.fa-search::before{
color:#90C31F;/*検索マーク色変更はこちら*/
}
.sidebar h3{
background:transparent; /* Cocoon親テーマCSSリセット */
color:#7b7b7b;
border-radius: 0%;
border-bottom:3px dotted;
border-color:#90C31F;/*タイトル下のライン色変更はこちら*/
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 {
background-color:#f7f7f7;
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:#90C31F;/*マウスオーバー時の背景色変更はこちら*/
color:#fff!important;
}
.tagcloud a{
background-color:#f7f7f7;
}
.tagcloud a:hover{
background-color:#90C31F;/*マウスオーバー時の背景色変更はこちら*/
color:#fff!important;
transition: 0.4s ;
}
.nwa .recommended.rcs-card-margin a {
margin: 0 0 1em;
width: 90%;
}
.widget-entry-cards .widget-entry-card-content{
color: #565656;
}
/************************************
****　コンタクトフォームの外観
************************************/
.table-contactform7{
  overflow: hidden;
  table-layout: fixed;
}

.required-contactform7{
  padding: 5px;
  background: #DE8686;
  color: #fff;
  border-radius: 3px;
  margin-right: 3px;
  font-size: 10px;
}

.unrequired-contactform7{
  padding: 5px;
  background: #BDBDBD;
  color: #fff;
  border-radius: 3px;
  margin-right: 3px;
}

.table-contactform7 th{
  font-weight:bold!important;
}

.table-contactform7 input,
.table-contactform7 textarea{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
}

.address-100 input{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
}

.message-100 textarea{
  width: 100%;
  margin: 5px 10px 10px 5px;
}

/* cf7セレクトの枠線指定 */
.table-contactform7 select{
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #2b2b2b;
  padding: 8px 10px 7px;
}

select{
height: 50px;
}

.table-contactform7 input,
.table-contactform7 select{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
}

.btn-cf7 {
  border-radius: 10px;
}

@media screen and (min-width: 900px){
  .table-contactform7 th{
    width:28%;
    }
}

@media screen and (max-width: 900px){
  .table-contactform7{
    display:block;
    }

      .table-contactform7 tbody,
      .table-contactform7 tr{
        display: block;
        width: 100%;
        }

          .table-contactform7 th{
            width:100%;
            display:block;
            margin: 0 auto;
            border:none;
        }

          .table-contactform7 td{
            display: list-item;
            list-style-type:none;
            margin:0;
            padding:0;
            width: 100%;
            border-top: none !important;
        }
}

/*送信ボタンのデザイン*/
.wpcf7-form input[type="submit"] {
  font-size: 20px;
  
  padding: 8px 5px;
  width: 8em;
  max-width: 400px!important;
  background: #DE8686;
  color: #fff;
  font-weight: bold!important];
  box-shadow: 0 4px 0 #edd0d0;
}
/*送信ボタンマウスオン時*/
.wpcf7-form input[type="submit"]:hover {
  background: #c25b5b;
  box-shadow: none;
  transform: translateY(4px);
  transition-duration:0.3s;
  opacity: inherit;
}

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

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

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

/*固定ページのタイトル非表示*/
.page .entry-title{
  display: none;
}

/*投稿ページのタイトル非表示*/
.post .entry-title{
  display: none;
}

/* 固定ページの日付非表示 */
.page .date-tags {
display: none;
}