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

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


/* ポチップ内外部リンクアイコンなし */
 div.pochipp-box__btns a[target="_blank"]>span:last-of-type {
     display: none;
 }
/* ポチップアイコンなし */
.pochipp-box__logo {
	display: none!important;
}
/* ポチップ枠色追加 */
/* .pochipp-box {
	box-shadow: 0 1px 8px -4px rgb(96 214 30), 0 0 0 2px rgb(191 170 170 / 58%) !important;
} */
.pochipp-box {
    box-shadow: 0 2px 12px rgba(96, 214, 30, 0.7), 0 0 0 2px rgba(191, 170, 170, 0.5) !important;
/*     border: 1px solid rgba(96, 214, 30, 0.6); */
	border: 1px solid rgba(60, 180, 190, 0.6); /* より青色に近づける */
    transition: all 0.2s ease-in-out;
}

.pochipp-box:hover {
    box-shadow: 0 4px 15px rgba(96, 214, 30, 0.8), 0 0 0 2px rgba(191, 170, 170, 0.6) !important;
    transform: scale(1.01);
}

/*各種画像に影を*/

.wp-post-image {
	box-shadow: 2px 2px 6px gray;
}

.lazyautosizes {
	box-shadow: 2px 2px 6px gray;
}

.eye-catch-image {
	box-shadow: 2px 2px 6px gray;
}

.wp-image-907 {
	box-shadow: 2px 2px 6px gray;
}

.navi-entry-card-image {
	box-shadow: 1px 1px 5px ;
}


/*ボックスメニューの色変更*/
.box-menu-icon{
	text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
}
.box-menu {
	box-shadow: inset 1px 1px 0 0 #bfbdb8, 1px 1px 0 0 #bfbdb8, 1px 0 0 0 #ffffff;
	transition: background 0.2s;
}
.box-menu:hover{
	color:#bdfffd;
	box-shadow: none;
	opacity: 0.9;
    background: #2be0da;
}


/************************************
** 目次
************************************/
/*目次デザイン*/
/************************/
/* 目次全体枠 */
.toc{
border-top:5px solid; color:#9B7B6C;
padding: 20px;
}

/* 目次の文字 */
.toc-title {
text-align:left;
font-size: 20px;
font-weight: 600;
color: #839b5c;
}
/*見出し2（H2）の設定*/
.toc-content .toc-list li {
font-weight:600;
}
/*H3以降の文字サイズ*/
.toc-content .toc-list li li {
font-weight:normal;
}
.toc a:hover {
color: #333333;
text-decoration: underline;
}


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

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

.toc-title {
    font-weight: bold;
}

/* サイドバー見出し変更 */
.sidebar h3{
color: white;/*文字色*/
font-size: 16px;/*文字の大きさ*/
position: relative;
padding: 0.5em;/*余白*/
margin: 1.5em 0;/*余白*/
}

.sidebar h3:after{
position: absolute;
content: " ";
display: block;
}

/* サイドバーカテゴリー */
.widget_categories ul li a{
font-size: 15px;/*文字の大きさ*/
padding: 0.85em 0.5em 0.75em!important;/*余白*/
border-bottom: solid 1px brown;/*下の線の種類・太さ・色*/
}

/* サイドバー目次 */
#sidebar .toc{
margin-top: 4em;/*枠の上の余白*/
margin-bottom: 2em;/*枠の下の余白*/
padding: 1em 1.5em;/*枠の中の余白*/
border: 1px solid #9b7b6c;/*枠線の太さ・種類・色*/
border-radius: 2px;/*枠線の角の丸み*/
}

/************************************
** ブログカード
************************************/

.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;
  margin-top:15px;
}
.blogcard-title {
  color: #555;
  letter-spacing: 0.5px;
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 0 0;
  height: auto;
  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;
  }
}

/************************************
** グローバルナビメニュー
************************************/
#navi .navi-in > ul li {
	height: 58px;
	line-height: 58px;
}

/*グローバルナビメニュー マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 2px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #2be0c2;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/* グローバルナビ（下）影・線 */
#navi {
 box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important; /*ライン下にシャドー*/
}

.mobile-header-menu-buttons {
	box-shadow: 0 2px 6px rgba(0,0,0,0.3); /*ライン下にシャドー*/
}

/*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:1em 0;
 margin-top:30px;
 width:100%;
 background:#ffaa56;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 border: none;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#fff;
 color:#ffaa56;
}

/*フォントサイズ調整*/
html{
    font-size: 62.5%;
}
body{
    font-size:1.6rem;/* 16px*/
    line-height: 2;
}
h1 {
    font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
    line-height: 1.3;
}
h2 {
    font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.3;
}
@media (min-width: 1200px) {/* 1200px以上*/
    h1 {
        font-size: 3.6rem;/* 36px*/
    }
    h2 {
        font-size: 2.4rem;/* 24px*/
    }
}
@media screen and (max-width: 640px) {/* 640px以下*/
    body{
    line-height: 2;
    }
    h1{
        font-size: 2.4rem;/* 24px*/
    }
    h2 {
        font-size: 2rem;/* 20px*/
    }
}


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

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

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