@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* 見出しカスタマイズ */
/* H2 */
.article h2{
  background: #fcc083;
  font-size: 24px;
  margin-top: 100px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 0px 5px #fcc083;
  border: dashed 1px #ffffff;
  padding: 25px;
  color: #ffffff;
}
 
/* H3 */
.article h3{
 padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
　margin-top: 50px;
  background: #ffffff;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}
 
/* H4 */
.article h4{
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
}
 
/* H5 */
.article h5{
border-bottom: 2px solid #ccc;
}
 
/* H6 */
.article h6{
border-bottom: 1px solid #ccc;
}

.widget_categories ul li a { /*親カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 6px 0;
    display: block;
    padding-right: 4px;
    padding-left: 4px;
    border-top: 1px dotted #ccc; /*上部にボーダーを引く*/
    font-size: 16px;
}
.widget_categories ul li a::before { /*親カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "\f0da";
    padding-right: 10px;
}
.widget_categories > ul > li > a:first-child { 
    border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}
.widget_categories > ul > li > a:last-child {
    border-bottom: 1px dotted #ccc; /*最後の親カテゴリは下部ボーダーを引く*/
}
.widget_categories ul li a .post-count { /*記事数用のコード*/
    display: block;
    float: right;
    background: #ededed;
    padding: 0 1em;
    font-size: 14px;
    margin-top: .2em;
    border-radius: 4px;
}
.widget_categories ul li a:hover { /*親子共通マウスホバー時*/
    background: none;
    transition: 0.5s;
    color: #72c7e6;
}
.widget_categories ul li a:hover .post-count { /*記事数のマウスホバー時*/
    background: #72c7e6;
    color: #fff;
    transition: 0.5s;
}
.widget_categories ul li ul { /*子カテゴリのボックス*/
    border-bottom: 1px dotted #ccc;
}
.widget_categories ul li ul li a { /*子カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 0 4px 4px 4px;
    display: block;
    border: none;
}
.widget_categories ul li ul li a::before { /*子カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "・";
    padding: 0;
}
/*サイドバーのタイトルの装飾*/
.sidebar h3 {
    background: none; /*背景色を解除*/
    padding: 0; /*余白をなしに*/
    font-size: 16px; /*文字サイズを小さく*/
    letter-spacing: 2px; /*文字の間隔を少し広く*/
}
.sidebar h3:first-letter {
    font-size: 1.5em; /*最初の文字を1.5文字分に大きく*/
}
.sidebar h3:after { /*グラデーションのラインを引く*/
    content:"";
    display:block;
    height:1px;
    width:100%;
    background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
    background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
}

/*タグリスト*/
.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;
}
.tagcloud a .tag-caption::before {
    content: "#"; /*アイコンの変更*/
    padding-right: 3px;
}
.tagcloud a:hover { /*マウスホバー時*/
    background: #72c7e6;
    border: 1px solid #72c7e6;
    color: #fff;
    transition: 0.5s; /*アニメーションの時間*/
}

/*検索窓*/
.sidebar .search-box, .search-menu-content .search-box {
  width: 100%;
  margin: 1em 0 2em;
  position: relative;
  display: flex;
  border-radius: 50px; /*全体を囲むボックスの角丸*/
  box-shadow:0px 4px 6px 0px #c4c4c4; /*全体を囲むボックスのシャドウ*/
}
.search-menu-content .search-box {
  box-shadow:0px 4px 6px 0px #333; /*スライドイン表示でのシャドウ*/
}
.sidebar .search-edit, .search-menu-content .search-edit {
  width: 80%; /*入力部分の長さ*/
  background: #fff; /*入力部分の背景色*/
  padding: 0 10px;
  border: none; /*ボーダーを消す*/
  border-radius: 50px 0 0 50px; /*左上、左下のみ角丸*/
  font-size: 16px;
}
.search-submit {
  width: 20%; /*ボタン部分の長さ*/
  background: #444d53; /*ボタン部分の背景色*/
  color: #fff; /*アイコンの色*/
  position: static;
  right: auto;
  top: auto;
  font-size: 20px; /*アイコンの大きさ*/
  cursor: pointer;
  line-height: 40px; /*検索窓の高さ*/
  border: none;
  border-radius: 0 50px 50px 0; /*右上、右下のみ角丸*/
  padding: 0;
}
.search-box input::placeholder {
  color: #bbb; /*プレースホルダーの色*/
}
.search-box input:focus, .search-box button:focus {
  outline: 0; /*フォーカス時の枠線を消す*/
}

/*会話吹き出し*/
.balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.says p {
  margin: 0;
  padding: 0;
}
/*会話吹き出しEND*/
/*カエレバカスタマイズ↓  */
.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;
}
.cstmreba .booklink-box,.cstmreba .kaerebalink-box,.cstmreba .tomarebalink-box {
width: 100%;
background-color: #fff;  /* 全体の背景カラー */
overflow: hidden;
border:double #d2d7e6;
border-radius: 5px;
box-sizing: border-box;
padding: 12px 8px;
}
/* サムネイル画像ボックス */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:150px;
float:left;
margin:0 14px 0 0;
text-align: center;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
width:100%;
display:block;
}
/* サムネイル画像 */
.cstmreba .booklink-image a img,.cstmreba .kaerebalink-image a img,.cstmreba .tomarebalink-image a img {
margin:0 auto;
padding: 0;
text-align:center;
}
.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
overflow:hidden;
line-height:170%;
color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
text-decoration: none;	
}
/* 作品・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
border-bottom: 1px dotted ;
font-size:16px;
}
/* タイトル下にPタグ自動挿入された際の余白を小さく */
.cstmreba .kaerebalink-name p,
.cstmreba .booklink-name p,
.cstmreba .tomarebalink-name p {
margin: 0;
}
/* powered by */
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
font-size:10px;
line-height:150%;
}
.cstmreba .booklink-powered-date a,
.cstmreba .kaerebalink-powered-date a,
.cstmreba .tomarebalink-powered-date a {
border-bottom: 1px dotted ;
color: #333;
}
.cstmreba .booklink-powered-date a:hover,
.cstmreba .kaerebalink-powered-date a:hover,
.cstmreba .tomarebalink-powered-date a:hover {
color:#333;
}
/* 著者・住所 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
font-size:12px;
}
.cstmreba .kaerebalink-link1 img,.cstmreba .booklink-link2 img,.cstmreba .tomarebalink-link1 img {
display:none !important;
}
.cstmreba .kaerebalink-link1,.cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
display: inline-block;
width: 100%;
margin-top: 5px;
}
.cstmreba .booklink-link2>div, 
.cstmreba .kaerebalink-link1>div, 
.cstmreba .tomarebalink-link1>div {
float:left;
width:31%;
min-width:125px;
margin:0.5% 1%;
}
/***** ボタンデザインここから ******/
.cstmreba .booklink-link2 a, 
.cstmreba .kaerebalink-link1 a,
.cstmreba .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;
}
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
text-decoration: underline;
}
/***** ボタンデザインここまで ******/
.cstmreba .booklink-footer {
clear:both;
}
/***  解像度480px以下のスタイル ***/
@media screen and (max-width:480px){
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:100%;
float:none;
}
.cstmreba .booklink-link2>div, 
.cstmreba .kaerebalink-link1>div, 
.cstmreba .tomarebalink-link1>div {
width: 95%;
margin: 0 auto 8px auto !important;
float:none;
}
.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info {
text-align:center;
padding-bottom: 1px;
}
}
/*カエレバカスタマイズ↑  */
/*カッテネカスタマイズ↓  */
.kattene .kattene__btn {
	font-size:0.95em !important;
}
@media screen and (max-width: 480px){
  .kattene__btns>div {
	clear:both;
}
	.kattene__btns.__three>div {
		width:100% !important;
		padding-bottom:10px !important;
	}	
}
/*カッテネカスタマイズ↑  */
/*打消し線用に追加 <span class="utikesi"></span>*/
span.utikesi{
	text-decoration: line-through;
}

.grecaptcha-badge { visibility: hidden; } /*recaptchaのロゴ非表示*/


/*Cocoon商品リンクボタンカスタマイズ↓  */
.product-item-buttons>*>a {
    font-size: 16px;
}

@media screen and (max-width: 834px){
.booklink-link2>*>a, .kaerebalink-link1>*>a, .tomarebalink-link1>*>a, .product-item-buttons>*>a {
    width: auto;
    font-size: 15px;
}}

.shoplinkamazon a {
box-shadow: 0 5px 0 #cc7a01;
-webkit-box-shadow: 0 5px 0 #cc7a01;
}

.shoplinkrakuten a {
box-shadow: 0 5px 0 #9b0003;
-webkit-box-shadow: 0 5px 0 #9b0003;
}

.shoplinkyahoo a {
background: #e1325b;
box-shadow: 0 5px 0 #b42849;
-webkit-box-shadow: 0 5px 0 #b42849;
}

@media screen and (max-width: 480px){
.booklink-link2>*, .kaerebalink-link1>*, .tomarebalink-link1>*, .product-item-buttons>* {
    margin: 5px 0.5%!important;
}
}

.kaerebalink-link1 a, .booklink-link2 a, .tomarebalink-link1 a, .product-item-buttons a {
    padding: 8px 12px;
}
/*Cocoon商品リンクボタンカスタマイズ↑  */

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}