@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.logo{text-align:right;}

/*固定ページから日付を消す*/
#post-2 .date-tags,#post-3 .date-tags,#post-7 .date-tags,#post-9 .date-tags,#post-81 .date-tags,#post-108 .date-tags ,#post-157 .date-tags,#post-181 .date-tags,#post-185 .date-tags,#post-221 .date-tags,#post-276 .date-tags,#post-285 .date-tags,#post-693 .date-tags,#post-934 .date-tags,#post-1089 .date-tags{
  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){
  /*モバイル版サイトロゴ縮小表示*/
.site-name img {
	width: 200px;
	height :auto;
}
}



/************************/
/* 見出しタグ */
/************************/
h1 {
margin: 15px;
padding: 0.5em ;
border-bottom: 2px dotted #0099e3;
}

/* モバイルフッターメニューをヘッダー固定にする 
===========================================*/
.mobile-menu-buttons {
    min-height: 40px;
    top: 0; bottom: auto;
    padding-bottom: 0;
    align-items: stretch;
    transition: .3s;
}
.mobile-menu-buttons .menu-button .menu-button-in {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* 文字やアイコンを非表示 */
.mobile-menu-buttons .search-menu-caption,
.mobile-menu-buttons .home-menu-caption, 
.mobile-menu-buttons .home-menu-icon {
    display: none;
}

@media screen and (max-width: 768px) {
	.single #header-container {
		display: none;
	}
}
@media screen and (max-width: 1023px) {
    .mobile-button-slide-in {
        margin-top:40px;
    }
}


/* モバイルヘッダーメニューの横スクロール */
    #header-container .navi-in > ul li {
       height: auto;
       font-weight: 600;
       line-height:1.3;
    }
    #header-container #navi{
       background:#249de2; /* 背景色 */
    }
    #header-container #navi a{
       color:#fff; /* 文字色 */
       padding:0.8em 1em;
    }
    #header-container #navi a:hover{
       color:#89c997; /* マウスホバー時の文字色 */
    }
    #header-container .navi-in > ul .sub-menu{
       background:#89c997; /* サブメニュー背景色 */
    }
    #header-container .navi-in > ul > .menu-item-has-children > a::after {
       top: 0.8em;
       font-size: 1.2em;
       font-weight: 600;
    }
    #header-container .sub-menu .caption-wrap{
       padding-left:1em;
    }
    .navi-in > ul .menu-item-has-description > a > .caption-wrap{
       height:auto;
    }
    @media screen and (max-width: 1030px){
       .navi-in > .menu-header{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      overflow-x: scroll;
      white-space: nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
       }
       #header-container #navi a{
      font-size:0.8em;
      padding: 1em 1.2em; /* 余白 */
       }
       #header-container .navi-in > ul > .menu-item-has-children > a::after{
      display:none;
       }
    }

/* モバイルスライドメニュー */
.menu-drawer a{
	font-size: 1.5em;/*文字の大きさ*/
	color: #111;/*文字の色*/
	height: 3em;/*行の高さ*/
}


.mobile-menu-buttons .home-menu-button>a  {
    min-width: 200px;
    background: 50% 50%/contain no-repeat;
    background-image: url('画像URL'); /* タイトルロゴ画像 */
    margin: 0 auto;
}




/************************************
** トップページカスタマイズ
************************************/
.home #main h1{
    font-size: 1em;
    color: #555;
    letter-spacing: 1px;
    margin: 0;
    font-weight: 400;
    display: flex;
    align-items: center;
	border:none;
}
.home #main h1:before, .home #main h1:after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #aaa;
    display: block;
}
.home #main h1:before {
    margin-right: .4em;
}
.home #main h1:after {
    margin-left: .4em;
}
.home #main .large-thumb{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0.8em 0;
}
.home #main .large-thumb a{
    width: 50%;
    padding: 10px;
}
.home #main .large-thumb a:hover{
    background:unset;
}
.home #main .widget-entry-cards .e-card {
    font-size: 18px;
    box-shadow: 0 0 4px rgba(0,0,0,.15);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    height:100%;
}
.home #main .widget-entry-cards .e-card:hover {
    transform: translateY(-3px);
    box-shadow: 0px 3px 18px 3px rgba(0,0,0,.08);
}
.home #main .widget-entry-cards figure {
    float: none;
    width: 100%;
}
.home #main .widget-entry-cards figure img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 210px;
}
.home #main .widget-entry-cards .card-content {
    margin: 0 0 0.5em;
    padding:10px 15px;
    background:#fff;
}
.home #main .large-thumb .new-entry-card-title,.home #main .large-thumb .popular-entry-card-title {
    font-size: 0.9em;
    line-height: 1.5;
    font-weight: 600;
    color: #555;
    margin-top: 3px;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
    .home #main h1{
        margin: 0;
        padding: 0;
        font-size:0.8em;
    }
    .home #main .widget-entry-cards .e-card {
        margin:0 5px;
    }
    .home #main .large-thumb a {
        width: 100%;
        padding: 0;
        margin:0 0 15px;
    }
    .home .mobile-2{
        justify-content:space-between;
    }
    .home .mobile-2 a{
        width:48% !important;
    }
    .home .mobile-2 figure img {
        object-fit: unset !important;
        height: auto !important;
    }
    .home #main .large-thumb .new-entry-card-title{
        line-height:1.3;
    }
}
/************************************
** トップページもっと見るボタン
************************************/
.p-button {
    max-width: 300px;
    margin: 0 auto;
}
.p-button a {
    display: block;
    margin:25px 0;
    padding: 0.8em 1em;
    border-radius: 2em;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    background: #249de2;
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity:1;
}
.p-button a:hover{
    box-shadow:none;
    transform: translateY(3px);
	opacity:1;}

    .home header .sns-share,.home footer .sns-share,.home footer .sns-follow,.home header .post-date,.home .post-update,.home .author-info{
        display: none;
    }


/* SNSボタン開始 */
#main .button-caption {
  display: none;
}
#main .sns-share a {
  width: 2.5em;
  margin-left: 0.2em;
}
.sns-share-buttons {
  justify-content: center;
}
#main .social-icon {
  font-size: 25px;
}
/* SNSボタン終了 */



/* トップページ作品リストバナー */
#bookli {/*親div*/
  position: relative;/*相対配置*/
  }

#bookli a {
　font-size: 20px;
  font-weight:bold!important;
  color: #FFF!important;
  text-decoration: none!important;
  }

#bookli a.bookli2 {
border: solid white 3px; 
	border-radius:30px;
 width:25%;
	text-align:center;
  padding: 3px!important;/*文字と線の間の余白*/
	background: rgba(36, 157, 226,0.8)!important;
  position: absolute;/*絶対配置*/
  top: 70%;
  left: 50%;
  -ms-transform: translate(-50%,-70%);
  -webkit-transform: translate(-50%,-70%);
  transform: translate(-50%,-70%);

  }

#bookli img {
  width: 100%;
  }

/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
#bookli a.bookli2 {
  padding: .5px!important;/*文字と線の間の余白*/
}

}


/* ブックリストリンク */

.aflist_book{
	list-style:none;
	display:inline-block;
}
.aflist_book a{
	font-size:90%;
	background:#0271e0;
	color:#fff;
	padding: 5px 12px;
	white-space: nowrap;
	text-decoration:none;
	border-radius: 2em;
}

/* サムネイル幅限度 */
main img{
    max-height: 50vh;
    width: auto;
}
/* エントリーカード日付表示 */
.new-entry-card-date {
  display: block;
}


/* 記事コメント欄 */

    .comment-btn {
      background-color: #72c7e6;
      color: #fff;
      border: none;
      font-size: 20px;
      transition: 0.5s;
    }
    .comment-btn:hover {
      background-color: #49add1;
      color: #fff;
      transition: 0.5s;
    }

    .comment-respond { /*入力欄全体の枠*/
      border: 2px solid #72c7e6;
      margin-top: -2px;
    }
    .comment-respond p {
      margin: 1em 0;
    }
    #commentform { /*フォーム部分の枠*/
      padding: 20px;
    }
    p.comment-notes { /*注意書きの文字サイズ*/
      font-size: 14px;
    }
    p.form-submit {
      margin: 2em 0 1em 0;
    }
    #commentform input[type="text"], #commentform textarea { /*入力スペースの装飾*/
      padding: 11px;
      border: none;
      border-radius: 4px;
      font-size: 18px;
      width: 100%;
      background: #e2e2e2; /*入力スペースの背景色*/
    }
    #commentform input[type="submit"] { /*送信ボタンの装飾*/
      -webkit-appearance: none;
      padding: 11px;
      width: 100%;
      margin: 0;
      cursor: pointer;
      background: #72c7e6;
      color: #fff;
      border: none;
      font-size: 16px;
      transition: 0.5s;
    }
    #commentform input[type="submit"]:hover { /*送信ボタンのマウスホバー時*/
      background: #49add1;
      transition: 0.5s;
    }
    .comment-list { /*全体の枠*/
      border: 2px solid #72c7e6;
      padding: 0;
      border-radius: 10px 10px 0 0;
    }
    .comment-title { /*タイトルの装飾*/
      margin: 0;
      font-size: 24px;
      background: #72c7e6;
      color: #fff;
      padding-left: 20px;
      font-weight: normal;
    }
    .comment-title:before { /*タイトルにアイコンを付ける*/
      font-family: FontAwesome;
      content: '\f27b';
      color: #fff;
      margin-right: 4px;
    }
    .commets-list {
      padding: 20px 20px 0 20px;
    }
    .commets-list > li {
      border-top: 2px dashed #72c7e6; /*スレッドを区切る点線*/
      margin: 30px 0;
      padding-top: 20px;
    }
    .commets-list > li:first-child {
      border: none;
      margin-top: 0;
      padding-top: 0;
    }
    .commets-list .children {
      border-left: 2px solid #ccc; /*返信コメントの左側のボーダー*/
      margin: 0;
    }
    .commets-list .avatar { /*アバターの位置調整*/
      float: left;
      border-radius: 50%;
      margin-right: 10px;
    }
    .comment-content { /*コメントの吹き出し*/
      background: #e2e2e2;
      padding: 2px 10px;
      margin: 10px 0 6px 0;
      border-radius: 10px;
      position: relative;
    }
    .comment-content::before { /*吹き出しの三角部分*/
      content: "";
      position: absolute;
      top: -14px;
      left: 50px;
      border-style: solid;
      border-color: transparent transparent #e2e2e2 transparent;
      border-width: 0 20px 20px 0;
    }
    .comment-content p { /*吹き出し内の文字を調整*/
      font-size: 14px;
      margin: 1em 0;
      line-height: 1.5em;
    }
    .comment-reply-link { /*返信ボタンの装飾*/
      color: #fff;
      border: none;
      border-radius: 20px;
      background: #72c7e6;
      padding: 1px 12px;
      transition: 0.5s;
    }
    .comment-reply-link:hover { /*返信ボタンのマウスホバー時*/
      color: #fff;
      background: #49add1;
      transition: 0.5s;
    }
    .commets-list .comment-body {
      margin-bottom: 0;
    }


/* タグクラウド */

.tagcloud a {
    background: none; /*背景を消す*/
    border: 1px solid #ccc; 
    border-radius: 20px; /*角の丸み*/
    color: #555; /*文字色*/
    display: inline-block;
    padding: 3px 10px;
    text-decoration: none;
    font-size: 13px;
    margin: 2px;
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
}

/* reCAPTCHA保護マーク非表示 */
.grecaptcha-badge { visibility: hidden; }

/* youtube埋め込み中央寄せ */
.video-container {
margin: 0px auto;
}

/* ロゴ位置補正 */

.logo-image {
  padding: 10px 0 0;
  font-size: inherit;
}

/* スマホページ送りカスタマイズ */

@media screen and (min-width:600px) { 
.pagination-next-link a {
	text-decoration:none;
}


/************************************
** お問い合わせフォームの入力
************************************/

/*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;
 color:red;
}

/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:1em 0;
 margin-top:30px;
 width:100%;
 background:#249de2;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 border: none;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 color:#c0c0c0;
}
	
/*コンタクトフォーム送信後メッセージ*/
div.wpcf7-mail-sent-ok {
background-color: #249de2;
color:#ffffff;
font-weight:bold;
font-size:120%;
padding:10px;
border:2px solid #249de2;
}





/*=================================================================================
	カエレバ・ヨメレバ・トマレバ
=================================================================================*/

.cstmreba {
	width: 98%;
	height:auto;
	margin:36px 0;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
	line-height: 1.5;
	word-wrap: break-word;
	box-sizing: border-box;
	display: block;
}
/* WordPressで自動挿入されるPタグの余白を対処 */
.cstmreba p {
	margin: 0;
	padding: 0;
}
.cstmreba a {
	transition: 0.8s ;
	color:#285EFF; /* テキストリンクカラー */
}
.cstmreba a:hover {
	color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
.booklink-box, .kaerebalink-box, .tomarebalink-box {
	width: 100%;
	background-color: #fff;  /* 全体の背景カラー */
	overflow: hidden;
	border: 1px solid #ddd; /* 外枠 */
	border-radius: 0px;
	box-sizing: border-box;
	padding: 12px 8px;
}
/* サムネイル画像ボックス */
.booklink-image,
.kaerebalink-image,
.tomarebalink-image {
	width:150px;
	float:left;
	margin:0 14px 0 0;
	text-align: center;
}
.booklink-image a,
.kaerebalink-image a,
.tomarebalink-image a {
	width:100%;
	display:block;
}
/* サムネイル画像 */
.booklink-image a img, .kaerebalink-image a img, .tomarebalink-image a img {
	margin:0 ;
	padding: 0;
	text-align:center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info {
	overflow:hidden;
	line-height:170%;
	color: #333;
}
/* infoボックス内リンク下線非表示 */
.booklink-info a,
.kaerebalink-info a,
.tomarebalink-info a {
	text-decoration: none;	
}
/* 作品・商品・ホテル名 リンク */
.booklink-name>a,
.kaerebalink-name>a,
.tomarebalink-name>a {
	border-bottom: 1px dotted ;
	font-size:16px;
}
/* powered by */
.booklink-powered-date,
.kaerebalink-powered-date,
.tomarebalink-powered-date {
	font-size:10px;
	line-height:150%;
}
.booklink-powered-date a,
.kaerebalink-powered-date a,
.tomarebalink-powered-date a {
	border-bottom: 1px dotted ;
	color: #333;
}
.booklink-powered-date a:hover,
.kaerebalink-powered-date a:hover,
.tomarebalink-powered-date a:hover {
	color:#333;
}
/* 著者・住所 */
.booklink-detail, .kaerebalink-detail, .tomarebalink-address {
	font-size:12px;
}
.kaerebalink-link1 img, .booklink-link2 img, .tomarebalink-link1 img {
	display:none !important;
}
.kaerebalink-link1, .booklink-link2, .tomarebalink-link1 {
	display: inline-block;
	width: 100%;
	margin-top: 5px;
}
.booklink-link2>div, 
.kaerebalink-link1>div, 
.tomarebalink-link1>div {
	float:left;
	width:31%;
	min-width:125px;
	margin:0.5% 1%;
}
/***** ボタンデザインここから ******/
.booklink-link2 a, 
.kaerebalink-link1 a,
.tomarebalink-link1 a {
	width: 100%;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	font-size: 13px;
	font-weight: bold;
	line-height: 180%;
	padding:3% 1%;
	margin: 1px 0;
	border-radius: 4px;
	box-shadow: 0 2px 0 #ccc;
	background: -moz-linear-gradient(top,#fafafa,#EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eee));
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover,
.tomarebalink-link1 a:hover {
	text-decoration: underline;
}
/* トマレバ */
.tomarebalink-link1 .shoplinkrakuten a { color: #76ae25; }/* 楽天トラベル */
.tomarebalink-link1 .shoplinkjalan a { color: #ff7a15; }/* じゃらん */
.tomarebalink-link1 .shoplinkjtb a { color: #c81528; }/* JTB */
.tomarebalink-link1 .shoplinkknt a { color: #0b499d; }/* KNT */
.tomarebalink-link1 .shoplinkikyu a { color: #bf9500; }/* 一休 */
.tomarebalink-link1 .shoplinkrurubu a { color: #000066; }/* るるぶ */
.tomarebalink-link1 .shoplinkyahoo a { color: #ff0033; }/* Yahoo!トラベル */
/* カエレバ */
.kaerebalink-link1 .shoplinkyahoo a {color:#ff0033;} /* Yahoo!ショッピング */
.kaerebalink-link1 .shoplinkbellemaison a { color:#84be24 ; }	/* ベルメゾン */
.kaerebalink-link1 .shoplinkcecile a { color:#8d124b; } /* セシール */ 
.kaerebalink-link1 .shoplinkwowma a { color:#ea5404; } /* Wowma */ 
.kaerebalink-link1 .shoplinkkakakucom a {color:#314995;} /* 価格コム */
/* ヨメレバ */
.booklink-link2 .shoplinkkindle a { color:#007dcd;} /* Kindle */
.booklink-link2 .shoplinkrakukobo a{ color:#d50000; } /* 楽天kobo */
.booklink-link2  .shoplinkbk1 a { color:#0085cd; } /* honto */
.booklink-link2 .shoplinkehon a { color:#2a2c6d; } /* ehon */
.booklink-link2 .shoplinkkino a { color:#003e92; } /* 紀伊國屋書店 */
.booklink-link2 .shoplinkebj a { color:#f8485e; } /* ebookjapan */
.booklink-link2 .shoplinktoshokan a { color:#333333; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.kaerebalink-link1 .shoplinkamazon a, 
.booklink-link2 .shoplinkamazon a { color:#FF9901; } /* Amazon */
.kaerebalink-link1 .shoplinkrakuten a , 
.booklink-link2 .shoplinkrakuten a { color: #c20004; } /* 楽天 */
.kaerebalink-link1 .shoplinkseven a, 
.booklink-link2 .shoplinkseven a { color:#225496;} /* 7net */
/***** ボタンデザインここまで ******/
.booklink-footer {
	clear:both;
}
/***  解像度480px以下のスタイル ***/
@media screen and (max-width:480px){
.booklink-image,
.kaerebalink-image,
.tomarebalink-image {
	width:100%;
	float:none;
}
.booklink-link2>div, 
.kaerebalink-link1>div, 
.tomarebalink-link1>div {
	width: 49%;
	margin: 0.5%;
}
.booklink-info,
.kaerebalink-info,
.tomarebalink-info {
	text-align:center;
	padding-bottom: 1px;
}


}

===========================================*/
/* アイキャッチサイズ調整 
===========================================*/
.card-thumb img {
	object-fit: contain;
	height: 19vw;
}
	
/*コメント欄メールアドレス文言の非表示*/
.comment-note { display: none; }