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

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



}

/*---------------------------------
親カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}
				
.widget_categories > ul > li > a:first-child{ 
  border-top: none;
}


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

/*メニューのタグ表示装飾*/
.tag_display a{
	padding:10px 0;
	 color:#666;
	 display:inline-block;
	 width:48.5%;
 	background:none;
	 font-size:12px;
 	text-decoration:none;
	 border-bottom:dotted 1px #ddd;

}
.tag_display a:hover{
	color:#7fbfff;
 	background:#fafafa;
 	font-weight:bold;
}
.tag_display a:before{
	text-shadow:none;
 	font-family:"Font Awesome 5 Free";
 	content:"\f02b";
 	font-weight:900;
	 color:#eedcb3;
	 padding-right:6px;
}

/*モバイルヘッダーの破線を消す*/
.menu-button{
	border: none!important;
}



/************************************
** ボックスナビ
************************************/
.p-nav{
margin:2em 0;/* 全体外余白 */
padding:0;/* 全体内余白 */
}
.p-nav ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style:none;
margin:0 !important;
padding:0 !important;
border:none;
}
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/4);/* 4列 */
flex-basis: calc(100%/3);/* 4列 */
margin:0 !important;
padding:0 !important;
text-align:center;
box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
min-height:100px;/* 最低の高さ */
cursor:pointer;
background:#fff;/* 背景色 */
}
.p-nav ul li:hover{
z-index:2;
box-shadow: inset 2px 2px 0 0 #f6a068, 2px 2px 0 0 #f6a068, 2px 0 0 0 #f6a068, 0 2px 0 0 #f6a068;/* 罫線(マウスホバー) */
transition: 0.35s ease-in-out;
}
.p-nav ul li:before{
content:unset !important;
}
.p-nav ul li a{
display:block;
padding: 0.5em 1em;/* 内余白 */
text-decoration:none;
width:100%;
}
.p-nav ul li a:hover{
background:none;
opacity:1;
}
.p-nav ul li a img{
max-width:50% !important;/* 画像横幅 */
height: auto !important;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
display: inline-block;
}
.p-nav .p-nav-title{
display: block;
color: #666;/* 文字色 */
font-size: 0.7em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 600;/* 文字太さ */
text-align: center;
line-height: 1.5;/* 文字行間高さ */
}
/* サイドバー */
.sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
/* スマホ */
@media screen and (max-width: 559px) {
  .p-nav ul li{
    -ms-flex-preferred-size: calc(100%/2);/* 2列 */
    flex-basis: calc(100%/2);/* 2列 */
  }
}
/* fontawesome */
.p-nav ul li a i,.p-nav ul li a svg{
font-size: 40px;/* アイコン大きさ */
padding: 10px 0;/* アイコン余白 */
color: #f6a068;/* アイコン色 */
display:inline-block;
}
/* fontawesome(2番目) */
.p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(3番目) */
.p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(4番目) */
.p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
color:#f6a068;/* アイコン色 */
}

/************************************
** グローバルメニュー PC
************************************/
 /* ロゴの大きさ・幅に関するもの */
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 100%;
  height: auto;
  max-width: 210px;
  vertical-align: middle;
  margin: 10px 0px 50px 100px;
	/*margin: 上、右、下、左*/
}

#header-container {
  box-shadow: 0 0 10px rgba(30, 30, 30, .1);
  position: static;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
}
.site-name-text-link {
  color: #fff;
}
.navi {
  background: none;
}
.navi-in > ul .sub-menu {
  background: #fff;
  box-shadow: 0 0 10px rgba(30, 30, 30, .1);
}
.navi-in > ul li {
  width: auto;
}
.navi-in a {
  font-size: 13px; /* ナビ文字大きさ */
  font-weight: bold;
  position: relative;
  color: #fff; /* ナビ文字色 */
  padding: 0 20px;
  display: block;
  text-decoration: none;
}
.navi-in a:hover {
  background: none;
}

.navi-in a:before {
  position: absolute;
  left: 0;
  bottom: 6px;
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #fff; /* マウスON時の下線色 */
  transform: scale(0, 1);
  transition: 0.4s;
}
.navi-in a:hover:before {
  transform: scale(1);
}



/************************************
** プロフィール-サイドバー
************************************/
.sidebar .widget_author_box {
  background: #fff;
  padding-top: 1.2em;
  border-radius: 3px 3px 0 0;
  max-width: 360px;
  margin: 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.sidebar .author-box {
  padding: 120px 0 0;
  border: none;
  position: relative;
  margin: 0 0 3em;
  max-width: 100%;
  overflow:hidden;
}
.sidebar .author-content {
  background: #89c997;
  border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;
  color: #fff;
  padding: 20px;
  width:110%;
  margin-left:-5% !important;
}
.sidebar .author-box .author-name a {
  color: #89c997;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 18px;
}
.sidebar .author-box .author-description {
  padding: 45px 25px 0px;
  text-align: justify;
  text-justify: inter-ideograph;
}
.sidebar .author-box p {
  line-height: 1.8;
  font-size: 14px;
}
.sidebar .author-box .author-thumb {
  width: 120px;
  margin: 0 auto;
  position: absolute;
  top: 50px;
  right: 0;
  left: 0;
  bottom: 0;
}
.sidebar .author-box .author-name {
  font-size: 1.1em;
  font-weight: bold;
  position: absolute;
  margin-bottom: 0.4em;
  top: 23px;
  bottom: 0;
  right: 0;
  left: 0;
}
.sidebar .author-box .author-widget-name {
  position: absolute;
  top: 3px;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 0.7em;
  color: #bbb;
}
.sidebar .author-box .sns-follow {
  padding: 15px 10px;
}
.sidebar .author-box .sns-follow-buttons {
  display: flex;
  justify-content: space-evenly;
}
.sidebar .author-box .sns-follow-buttons a {
  border-radius: 50%;
  border: none;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 30px;
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
  background:#fff;
}
.sidebar .author-box .sns-follow-buttons a:hover {
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
  opacity: 1;
}
.sidebar .author-box .sns-follow-buttons .follow-button span:before {
  color: #ffff;
}
.sidebar .icon-instagram-new:before {
  content: "\ea92";
  font-size: 24px;
}
.sidebar .author-box .to-profile {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  color: #ffff;
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
  top: 105px;
  right: 45px;
  font-size: 0.9em;
  font-weight: bold;
}
.sidebar .author-box .to-profile:hover {
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
}
.sidebar .author-box .sns-follow-message {
  margin-bottom: 10px;
  font-size: 13px;
}
.sidebar .author-box .sns-follow-message:before {
  content: "＼";
  margin-right: 5px;
}
.sidebar .author-box .sns-follow-message:after {
  content: "／";
  margin-left: 5px;
}
.sidebar .icon-twitter-logo:before {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 0;
}
.sidebar .icon-facebook-logo:before {
  position: absolute;
  top: 6px;
  bottom: 0;
  right: 8px;
  left: 0;
}
.sidebar .icon-hatebu-logo:before {
  position: absolute;
  top: 8px;
  bottom: 0;
  right: 0;
  left: 0;
}
.sidebar .icon-feedly-logo:before {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 0;
}
.sidebar .icon-rss-logo:before {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 0;
}



/************
検索フォーム
**************/
.search-edit {
height:50px;
padding:0 10px; 
border-radius: 25px !important;
outline:0;
background:#ffff;
}
[type="submit"].search-submit {
height:50px;
width:50px;
top:0;
right:0;
background:#89c997;
color:#fff;
border:none;
border-radius:0 25px 25px 0;
}
[type="submit"].search-submit:hover{
color:#839b5c;
background:#ddd;
}


/************************************
** 検索フォーム風
************************************/
/*キーワード枠*/
.search-form > div { 
border: 1px solid #89c997; /*枠線種・太さ・色*/
}
/*検索ボタン*/
.search-form div.sbtn {
background-color: #89c997; /*背景色*/
color: #ffff; /*文字色*/
border-radius:3px; /*角丸め*/
}
.search-form div.sbtn:after {
font-family:"Font Awesome 5 Free";
 content:"\f0a6";
color: #555; /*アイコン色*/
top:1.1em;
font-size: 30px; /*アイコンサイズ*/
}


/*********************************
* Cocoon 通知エリア2つ
*********************************/
.twice-notice{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}
.twice-notice a{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position:relative;
    flex-basis:50%;
    text-align:center;
    color:#fff; /* 文字色 */
    font-size: 0.8em; /* 文字サイズ */
    line-height: 1.4;
    font-weight: bold;
    padding: 1em 2em;
    letter-spacing: 1px;
    text-decoration:none;
}
.twice-notice a:first-child{
    background:#40e0d0; /* 左背景色 */
    border-right:1px solid #fff; /* 中央線 */
}
.twice-notice a:last-child{
    background:#40e0d0; /* 右背景色 */
}
.twice-notice a:hover{
    opacity:0.8;
}


/*********************************
*都道府県検索ボックス
*********************************/
/*
          .boxFEECD2 {
               max-width: 600px;
               padding: 0.5em 1em;
               margin: 2em auto;
               border-left: solid 8px #D7A861;
               border-radius: 3px;
               color: #232323;
               background: #FEECD2;
               box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
               display: none;
          }

          .boxFEECD2 p {
               padding-left: 10px;
               margin: 0;
               padding: 1px;
          }

          .boxD5EAD8 {
               max-width: 600px;
               padding: 0.5em 1em;
               margin: 2em auto;
               border-left: solid 8px #5AA572;
               border-radius: 3px;
               color: #232323;
               background: #D5EAD8;
               box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
               display: none;
          }

          .boxD5EAD8 p {
               padding-left: 10px;
               margin: 0;
               padding: 1px;
          }

          .boxECF4D9 {
               max-width: 600px;
               padding: 0.5em 1em;
               margin: 2em auto;
               border-left: solid 8px #A7BE70;
               border-radius: 3px;
               color: #232323;
               background: #ECF4D9;
               box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
               display: none;
          }

          .boxECF4D9 p {
               padding-left: 10px;
               margin: 0;
               padding: 1px;
          }

          .boxD4ECEA {
               max-width: 600px;
               padding: 0.5em 1em;
               margin: 2em auto;
               border-left: solid 8px #53A8A6;
               border-radius: 3px;
               color: #232323;
               background: #D4ECEA;
               box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
               display: none;
          }

          .boxD4ECEA p {
               padding-left: 10px;
               margin: 0;
               padding: 1px;
          }

          .line {
               border-bottom: 3px dashed #a9a9a9;
               font-weight: bold;
          }

          .sumarry {
               border: 2px dotted #f19ec2;
          }

          .selectbox select {
               position: relative;
               width: 30%;
               padding: 10px;
               float: left;
               border-radius: 25px;
               border: #8BC34A 3px solid;
               text-align: center;
          }

          .secondBox {
               left: 5px;
               width: auto;
          }

          .btn {
               position: relative;
               top: 0;
               right: 0;
               left: 10px;
               bottom: 0;
               width: 100px;
               height: 45px;
               border-radius: 25px;
               background: #8BC34A;
               font-size: 100%;
               color: black;
               cursor: pointer;
          }
          .errorBtn {
               display: none;
               position: relative;
               top: 0;
               right: 0;
               left: 10px;
               bottom: 0;
               width: 100px;
               height: 45px;
               border-radius: 25px;
               background: #8BC34A;
               font-size: 100%;
               color: black;
               cursor: pointer;
          }

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



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

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