@charset "UTF-8";

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

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


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

.cstmreba {
  background-color: #fff;
  color: #333;
  font-size: 4vw;
  line-height: 1.75;
}

@media screen and (min-width: 640px) {
  .cstmreba {
    font-size: 16px;
  }
}

.cstmreba a {
  color: #1565c0;
  text-decoration: underline;
}

.cstmreba a:visited {
  color: #6a1b9a;
}

.cstmreba a:hover {
  color: #c62828;
  text-decoration: none;
}

.cstmreba a img:hover {
  opacity: .6;
}

.cstmreba p,
.cstmreba img {
  margin: 0;
  padding: 0;
}

.cstmreba + .cstmreba {
  margin-top: 20px;
}

/*
 * 外枠
 */

.cstmreba .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box,
.cstmreba .taberebalink-box {
  position: relative;
  padding: 4%;
  border: 1px solid #ddd;
  border-radius: 4px;
}

@media screen and (min-width: 640px) {
  .cstmreba .booklink-box,
  .cstmreba .kaerebalink-box,
  .cstmreba .tomarebalink-box,
  .cstmreba .taberebalink-box {
    padding: 12px;
  }
}

/*
 * 画像の枠
 */

.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image,
.cstmreba .taberebalink-image {
  margin-bottom: 4%;
  height: 240px;
}

@media screen and (min-width: 640px) {
  .cstmreba .booklink-image,
  .cstmreba .kaerebalink-image,
  .cstmreba .tomarebalink-image,
  .cstmreba .taberebalink-image {
    float: left;
    margin: 0 12px 0 0;
    width: 30%;
    height: auto;
    line-height: 0;
  }
}

/* 画像の表示方法 */
.cstmreba .booklink-image a img,
.cstmreba .kaerebalink-image a img,
.cstmreba .tomarebalink-image a img,
.cstmreba .taberebalink-image a img {
  max-width: 100%;
  max-height: 100%;
}

/*
 * 情報枠
 */

.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info,
.cstmreba .taberebalink-info {
  overflow: hidden;
  margin-bottom: 1.5em;
}

/* 名前 */
.cstmreba .booklink-name,
.cstmreba .kaerebalink-name,
.cstmreba .tomarebalink-name,
.cstmreba .taberebalink-name {
  overflow: hidden;
}

/* posted with */
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date,
.cstmreba .taberebalink-post {
  position: absolute;
  bottom: 12px;
  font-size: x-small;
}

/* キャッチコピー */
.cstmreba .taberebalink-catch {
  font-weight: bold;
  font-size: small;
}

/* 詳細情報（名前と年月日または住所） */
.cstmreba .booklink-detail,
.cstmreba .kaerebalink-detail,
.cstmreba .tomarebalink-address,
.cstmreba .taberebalink-address {
  font-size: small;
}

/* ボタン枠 */
.cstmreba .booklink-link2,
.cstmreba .kaerebalink-link1,
.cstmreba .tomarebalink-link1,
.cstmreba .taberebalink-link1 {
  margin: .5em -1% 0;
}

@media screen and (min-width: 640px) {
  .cstmreba .booklink-link2,
  .cstmreba .kaerebalink-link1,
  .cstmreba .tomarebalink-link1,
  .cstmreba .taberebalink-link1 {
    margin-left: 0;
  }
}

/* ボタン配置 */
.cstmreba .booklink-link2 > div,
.cstmreba .kaerebalink-link1 > div,
.cstmreba .tomarebalink-link1 > div,
.cstmreba .taberebalink-link1 > div {
  float: left;
  margin: 0 1% 2%;
  width: 48%;
}

@media screen and (min-width: 640px) {
  .cstmreba .booklink-link2 > div,
  .cstmreba .kaerebalink-link1 > div,
  .cstmreba .tomarebalink-link1 > div,
  .cstmreba .taberebalink-link1 > div {
    margin: 0 1.5% 2% 0;
    width: 31.8%;
  }
}

/* ボタンのアイコン */
.cstmreba .booklink-link2 img,
.cstmreba .kaerebalink-link1 img,
.cstmreba .tomarebalink-link1 img {
  display: none;
}

/*
 * フロート解除
 */

.cstmreba .booklink-footer {
  clear: both;
}

/********************
 * ボタンデザイン
 ********************/

.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a,
.cstmreba .taberebalink-link1 a {
  display: block;
  padding: 8px 0;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: small;
}

.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover,
.cstmreba .taberebalink-link1 a:hover {
  opacity: .6;
}

/*
 * レバ共通
 */

/* Amazon, Kindle */
.cstmreba .shoplinkamazon a,
.cstmreba .shoplinkkindle a {
  background-color: #37475a;
}

/* 楽天市場, 楽天ブックス, 楽天Kobo */
.cstmreba .shoplinkrakuten a,
.cstmreba .shoplinkrakukobo a {
  background-color: #bf0000;
}

/* Yahoo!ショッピング, Yahoo!トラベル */
.cstmreba .shoplinkyahoo a {
  background-color: #f03;
}

/* セブンネット */
.cstmreba .shoplinkseven a {
  background-color: #e89312;
}

/*
 * ヨメレバ
 */

/* honto */
.cstmreba .shoplinkbk1 a {
  background-color: #0085cd;
}

/* e-hon */
.cstmreba .shoplinkehon a {
  background-color: #122981;
}

/* 紀伊國屋書店 */
.cstmreba .shoplinkkino a {
  background-color: #004097;
}

/* ジュン */
.cstmreba .shoplinkjun a {
  background-color: #086f78;
}

/* ebookjapan */
.cstmreba .shoplinkebj a {
  background-color: #d90000;
}

/* 図書館 */
.cstmreba .shoplinktoshokan a {
  background-color: #999;
}

/* ネットオフ */
.cstmreba .shoplinknetoff a {
  background-color: #6db131;
}

/*
 * カエレバ
 */

/* Yahoo!オークション（ヤフオク） */
.cstmreba .shoplinkyahooAuc a {
  background-color: #ffcf0f;
}

/* ベルメゾン */
.cstmreba .shoplinkbellemaison a {
  background-color: #7dbe24;
}

/* セシール */
.cstmreba .shoplinkcecile a {
  background-color: #8e0848;
}

/* Wowma! */
.cstmreba .shoplinkwowma a {
  background-color: #eb5505;
}

/* 価格コム */
.cstmreba .shoplinkkakakucom a {
  background-color: #023a96;
}

/*
 * トマレバ
 */

/* 楽天トラベル */
.cstmreba .tomarebalink-box .shoplinkrakuten a {
  background-color: #4bcd00;
}

/* じゃらんnet */
.cstmreba .shoplinkjalan a {
  background-color: #ff5800;
}

/* JTB */
.cstmreba .shoplinkjtb a {
  background-color: #c71628;
}

/* 近畿日本ツーリスト */
.cstmreba .shoplinkknt a {
  background-color: #0062b2;
}

/* 一休.com */
.cstmreba .shoplinkikyu a {
  background-color: #bf9500;
}

/* るるぶトラベル */
.cstmreba .shoplinkrurubu a {
  background-color: #006;
}

/*
 * タベレバ
 */

/* ホットペッパーグルメ */
.cstmreba .shoplinkhotpepper a {
  background-color: #d0111b;
}

#sidebar h3{
font-size: 1.0em;
background: #222222; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
border-radius: 0.3em;/*角の丸み*/
letter-spacing: 0.2em;/*文字間*/
}

.article h2 {
border: none; 
position: relative;
padding: .7em .75em;
margin-bottom: 1.5em;
background-color: #20b2aa;
color: #fff;
border-radius: 6px;
border-bottom: 0px
}
.article h2::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #20b2aa;
border-bottom: 0px
}

.video-container, 
.instagram-container, 
.facebook-container,
.twitter-tweet {
    margin: 30px auto;
} 
.video-container, 
.instagram-container, 
.facebook-container,
.twitter-tweet {
    margin: 30px auto;
} 

.comment-form-email, .comment-form-url, .comment-notes {
  display: none;
}



.comment-respond { /*入力欄全体の枠*/
  border: 2px solid #165e83;
  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: #ebebeb; /*入力スペースの背景色*/
}
#commentform input[type="submit"] { /*送信ボタンの装飾*/
  -webkit-appearance: none;
  padding: 11px;
  width: 100%;
  margin: 0;
  cursor: pointer;
  background: #2a4073;
  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 #165e83;
  padding: 0;
  border-radius: 10px 10px 0 0;
}
.comment-title { /*タイトルの装飾*/
  margin: 0;
  font-size: 24px;
  background: #165e83;
  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: 5px Solid #165e83; /*スレッドを区切る点線*/
  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: #ebebeb;
  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 #ebebeb 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: #2a4073;
  padding: 1px 12px;
  transition: 0.5s;
}
.comment-reply-link:hover { /*返信ボタンのマウスホバー時*/
  color: #fff;
  background: #49add1;
  transition: 0.5s;
}
.commets-list .comment-body {
  margin-bottom: 0;
}

.main, 
.sidebar {
  background-color: #f8f8f8;
}



.twitter-box .twitter-tweet iframe {
  padding-bottom: 9.5vh !important; /* 要調整 */
  margin-bottom: -9.4vh; /* 要調整 */
  border-radius: 15px;
}

.twitter-box .twitter-tweet {
  margin: 0 auto !important;
}

.twitter-box {
  margin: 1rem auto 2rem;
  max-width: 100%;
  width: 95%;
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 480px) {
  .twitter-box {
    max-width: 83%;
  }
}



.twitter-tweet {
  max-width: 550px !important;
  margin: 16px auto !important;
}



/* flashy-toggle 用にめちゃくちゃ目立たせる */
.flashy-toggle.su-toggle {
  border: 3px solid #ff0000;         /* 赤い太枠 */
  border-radius: 8px;                 /* 角丸 */
  margin: 1em 0;
  background: linear-gradient(90deg, #fffa00, #ff6600); /* グラデーション背景 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* 影で浮き上がらせる */
}

/* タイトル全体 */
.flashy-toggle .su-toggle-title {
  background: none;                   /* 背景は親のグラデーション */
  color: #ffffff !important;          /* 白文字で目立たせる */
  font-weight: bold;                  /* 強調 */
  font-size: 1.2em;                   /* 少し大きめ */
  padding: 0.5em 1em;
  text-shadow: 1px 1px 2px #000;      /* 文字の影で強調 */
  cursor: pointer;                     /* クリック感 */
}

/* タイトルの文字 */
.flashy-toggle .su-toggle-title-text {
  font-size: 1.2em !important;
}

/* アイコンを目立たせる */
.flashy-toggle .su-toggle-icon {
  font-size: 1.5em;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px #000;
}

/* 開いたときは少し色を変える */
.flashy-toggle.su-toggle-open .su-toggle-title {
  color: #ffff00 !important;
}