@charset "UTF-8";

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

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

/*シェアボタン
===================================*/
.sns-share-message{
    font-weight: bold;
    color: #499eda;
}
.sns-share-buttons {
    justify-content: center;
}
.sns-share-buttons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 8px;
}
.button-caption{
    display:none;
}

/*著者情報を消す場合*/
.page .author-info {
    display: none;
}

/*著者情報を消す場合*/
.post .author-info {
    display: none;
}

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

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

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

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

/************************************
** グローバルメニューデザイン変更CSS
************************************/
nav#navi, .menu-header .sub-menu{
    font-weight: bold;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}

.menu-header .sub-menu .item-label{
    font-size: 80%;
}
.menu-header .item-label{
    color: #b5b5b5 !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
    color: #333 !important;
    border-bottom: 3px solid #FDD835;
    transition: all .2s ease;
}

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
    border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
    color: #333 !important;
    transition: all .2s ease;
}

/************************************
** 記事一覧がマウスオーバーで浮くCSS
************************************/
.home main, .archive main{
background-color: transparent;
margin-top: 0;
padding-top: 0;
}

.home main{
    background: #ffffff;
}

.category-content{
background-color: white;
padding: 1em 1em 0.2em;
margin-bottom: 1em;
}

.entry-card-wrap{
transition: all .3s ease;
margin-bottom: 1em!important;
background-color: white;
border-radius: 4px;
}

.entry-card-wrap:hover{
box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
transform: translateY(-2px);
background-color: white;
}

/************************************
** ブログ記事内の画像を自動でちょうどいい見やすいサイズに調整
************************************/
/*投稿日・更新日を消す場合*/
.page .date-tags {
    display: none;
}

/************************************
** 検索窓の変更
************************************/
.search-box{
	margin: 1em;
}

.search-edit{
	height: 40px;
	border-radius: 40px;
}

.search-submit{
	line-height: 0;
	top: 0;
	bottom: 0;
}

.search-edit:focus{
	outline: none;
	border-color: pink; /* フォーカス時の枠色 */
}

/* ウィジェットタイトルにFAアイコン */
.widget h3::before { font-family: FontAwesome; font-size: 80%; vertical-align: middle; font-weight: normal; margin-right: 5px; } /* 共通設定 */
.widget_popular_entries h3::before { content: '\f135'; } /* 人気記事 */
.widget_new_entries h3::before, .widget_recent_entries h3::before { content: '\f005'; } /* 新着記事 */

/************************************
** フェードインデザイン
************************************/
#main{
    animation: fadeIn 1s ease-out 0s 1 normal;
}
#sidebar {
    animation: fadeIn 1s ease-out 0s 1 normal;
}

@keyframes fadeIn {
    from {transform: translateY(10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
    animation: Down 1s ease-out 0s 1 normal;
}

@keyframes Down {
    from {transform: translateY(-10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}

#breadcrumb {
    animation: Right 1s ease-out 0s 1 normal;
}

@keyframes Right {
    from {transform: translateX(10%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}

/************************************
** 記事一覧の画像とテキストの余白調整
************************************/
.entry-card-title {
    margin-top: 10px; /*上に余白を付ける*/
    line-height: 1.5; /*行間を広く*/
}
.entry-card-title:hover {
    color: #49add1; /*マウスホバー時の色*/
}
@media screen and (max-width: 768px){
    .entry-card-title {
        font-size: 14px; /*スマホでの文字の大きさ*/
        line-height: 1.4; /*スマホでの行間*/
    }
}

/************************************
** ページネーションのCSS
************************************/
.pagination-next, .next, .prev, .pager-prev-next{ display: none; }
.pager-numbers a { text-decoration: none; }

.page-numbers{
    border: none !important;
    border-radius: 50%;
    font-family: sans-serif;
    font-size: 80%;
    color: #666 !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
    transition: all .1s ease;
    background-color: #ffffff;
}

.pagination a.page-numbers:hover,.pager-numbers a:hover .page-numbers{
    background-color: #f44336; /* マウスオーバー時の背景色 */
    color: #fff !important;
}

.pagination .current, .pager-links .current{
    background-color: #ccc;
    color: #fff;
}

/************************************
 * 箇条書き変更（番号あり）
************************************/
.entry-content ol {
  counter-reset: li;
}
.entry-content ol > li {
  list-style: none;
  position: relative;
  padding-left: 2.5em;
}
.entry-content ol > li:before {
    counter-increment: li;
    content: counter(li);
    margin-right: 1em;
    left: 0em;
    top: 2px;
    border-radius: 50%;
    background: #02b774;
    color: #ffffff;
    text-align: center;
    width: 1.75em;
    height: 1.75em;
    font-size: 14px;
    line-height: 1.75em;
    position: absolute;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
}

/************************************
 * 内部ブログカードを変更
************************************/
.blogcard {
  padding: 1rem;
  color: #666;
  position: relative;
  border-color: #02b774 !important;
}
a.blogcard-wrap:hover{
  background-color: transparent!important;
  opacity: 0.8;
}
a.blogcard-wrap:hover img.blogcard-thumb-image{
  transform: scale(1.1);
  transition: .3s;
}
.blogcard-thumbnail {
  line-height: 0;
  margin-right: 1rem;
  overflow: hidden;
}
.blogcard-title{
  margin-bottom: .5rem;
}
.blogcard-snipet{
  font-size: 70%;
  line-height: 1.7;
  padding-right: 10%;
}
@media screen and (max-width: 480px){
  .blogcard-thumbnail{
    width: 40%;
  }
  .blogcard-snipet{
    display: none;
  }
}
.internal-blogcard-footer{
  display: none;
}
.blogcard::before{
  content: 'あわせて読みたい';
  position: absolute;
  top: -.8rem;
  left: auto;
  font-size: 50%;
  background-color: #02b774;
  padding: .6em 1em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
}
.internal-blogcard::after{
  content: '続きを読む \00bb';
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #ffd242;
  padding: .4em 3em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
}

/************************************
** 目次の設定
************************************/
.toc{
	display:block;
	padding:0;
}
.toc-title{
	position:relative;
	background:#02b774;/*最上部背景色*/
	padding:10px 0;
	color:#fff;
	font-weight:bold;
}
.toc-title:before{
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	right:50%;
	transform: translate(-50%,0%);
	border:15px solid transparent;
	border-top:15px solid #02b774;/*toc-titleの背景色と同色*/
}
.toc .toc-content{
	padding:10px
}
.toc .toc-content ol li a,
.toc .toc-content ul li a{
	display:block;
	border-bottom:1px dashed #02b774;
	margin-left:-20px;
	padding-left:20px;
}
.toc-list li li::before {
  content: "・";
  font-size: 0.3em;
  margin-right: 0.3em;
  color: #02b774;
  vertical-align: middle; /* 中央揃えの基本指定 */
  top: 2.0em; /* 微調整。必要に応じて上下に調整（例：0.1em, -0.1em） */
}

/************************************
** ヘッダー画像の調整
************************************/
/* header, logo */
.header-container {
    border-top: 4px solid #02b774;
}
.site-logo-image {
    display:block;
    max-width: 375px;
    width: 100%;
    padding: 0 32px;
}
@media ( min-width:992px )  {
    .site-logo-image {
        max-width: 460px;
    }
}

/************************************
** アイキャッチのカテゴリ表示位置調整
************************************/
.cat-label {
position: relative;
padding: .4em .8em;
border: 0;
border-radius: 3px;
background: #f0f0f0 !important;
color: #02b774;
}


/************************************
** カテゴリアイコンのカラー設定
************************************/
.cat-label.cat-label-25 {
    background: #ff6c60 !important;
    color: #fff;
    font-weight: bold;
}
.cat-label.cat-label-33 {
    background: #ECDF2B !important;
    color: #fff;
    font-weight: bold;
}
.cat-label.cat-label-34 {
    background: #00bfff !important;
    color: #fff;
    font-weight: bold;
}

/************************************
** フォームの設定
************************************/
/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
.inquiry th,.inquiry td {
 display:block!important;
 width:100%!important;
 border-top:none!important;
 -webkit-box-sizing:border-box!important;
 -moz-box-sizing:border-box!important;
 box-sizing:border-box!important;
}
.inquiry tr:first-child th{
 border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 */	
.inquiry .haveto,.inquiry .any {	
font-size:10px;
}}
/*見出し欄*/
.inquiry th{
 text-align:left;
 font-size:14px;
 color:#444;
 padding-right:5px;
 width:30%;
 background:#f7f7f7;
 border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
 font-size:13px;
 border:solid 1px #d7d7d7;	
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}
/*必須の調整*/
.haveto{
 font-size:7px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:15px;
 width:350px;
 background:#ffaa56;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 margin:25px auto 0;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#fff;
 color:#ffaa56;
 border:2px solid #ffaa56;
}