@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*プロフィールボックスの中の文字*/
.author-box {
  color: #535850;
}

/*フッターモバイルメニュー変更*/
.mobile-footer-menu-buttons,
.navi-menu-content,
.mobile-footer-menu-buttons .menu-button > a,
.mobile-footer-menu-buttons .menu-button:hover,
.navi-menu-content a,
.navi-menu-content a:hover {
  background:#d76735;	
	  color: #FFFFFF;
}

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

/*ボックス*/
/*箱だけ*/
.sample-box-6 {
    border: 2px solid #f7a771;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
	background-color: #ffffe0;
}
.sample-box-6::before {
    background-color:  #ffffe0;
    color: #f7a771;
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}
/*ココに注目*/
.sample-box-7 {
    border: 2px solid #f7a771;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
	background-color: #ffffe0;
}

.sample-box-7::before {
    background-color:  #ffffe0;
    color: #db6e62;
    content: "3行でまとめる「ここに注目！」";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}
.sample-box-5 {
    border: 2px solid #f7a771;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
	background-color: #ffffe0;
}
.sample-box-5::before {
    background-color:  #ffffe0;
    color: #db6e62;
    content: "今回の「ここが好き！」を3行でまとめると！";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

.sample-box-4 {
    border: 2px solid #f7a771;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
	background-color: #ffffe0;
}
.sample-box-4::before {
    background-color:  #ffffe0;
    color: #db6e62;
    content: "オススメ動画配信サイト一覧";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}
/*オススメショップ一覧*/
.sample-box-3 {
	background-color:  #ffffe0;
    border: 2px solid #f7a771;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.sample-box-3::before {
background-color:  #ffffe0;
    color: #db6e62;
    content: "オススメショップ一覧";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

/*製品仕様*/
.sample-box-13 {
	background-color:  #ffffe0;
    border: 2px solid #f7a771;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.sample-box-13::before {
background-color:  #ffffe0;
    color: #db6e62;
    content: "製品仕様";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

/*おしらせ*/
.sample-box-1 {
    border: 2px solid #f7a771;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
	background-color: #ffffe0;
}
.sample-box-1::before {
    background-color: #ffffe0;
    color: #db6e62;
    content: "おしらせ";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

/*注意事項*/
.sample-box-2 {
    border: 2px solid #e2041b;
	    background-color:  #fff0f5;

    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.sample-box-2::before {
    background-color:#fff0f5;
    color: #e2041b;
    content: "注意！";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

/*このページで紹介していること*/
.sample-box-20 {
    border: 2px solid #f7a771;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
	background-color: #ffffe0;
}

.sample-box-20::before {
    background-color:  #ffffe0;
    color: #db6e62;
    content: "このページで紹介していること";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

/*メリット（使ってない）*/
.sample-box-21 {
    border: 2px solid #f7a771;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
	background-color: #ffefd5;
}

.sample-box-21::before {
    background-color:  #ffefd5;
    color: #db6e62;
    content: "メリット";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

/*デメリット（使ってない）*/
.sample-box-22 {
    border: 2px solid #f7a771;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
	background-color: #f0f8ff;
}

.sample-box-22::before {
    background-color:  #f0f8ff;
    color: #f7a771;
    content: "デメリット";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}
/*--------------------------------------
  蛍光ペンのような下線を引く　　　↓
--------------------------------------*/
/*ピンク（太め）*/
.pink_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}
/*ブルー（太め）*/
.blue_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;}
/*イエロー（太め）*/
.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}
/*ピンク（細め）*/
.pink_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffb2d8 0%) repeat scroll 0 0;}
/*ブルー（細め）*/
.blue_line_narrow {background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #add6ff 0%) repeat scroll 0 0;}
/*イエロー（細め）*/
.yellow_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffff7f 0%) repeat scroll 0 0;}
/*マーカー（サイトカラー）*/
.keikou {
  background: linear-gradient(transparent 60%, #db6e62 20%);
}
.blogcard-snipet {
 display: none;
}
/* トップページのタブ（選択前） */
.index-tab-button{
	color: #FFF;/*文字色*/
	font-size: 16px!important;/*文字の大きさ*/
	background: #f7a771!important;/*背景色*/
	border: solid 1px #f7a771!important;/*枠線の種類・太さ・色*/
}

/* トップページのタブ（選択後） */
#index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1],
#index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2],
#index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3],
#index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4]{
	color: #FFF;/*選択後の文字色*/
	background:#db6e62!important;/*選択後の背景色*/
	font-weight: 400;/*文字の太さ*/
}



/*吹き出し フラット（ダークグリーン）*/
 .sbs-flat .speech-balloon{
    background-color: #f7a771;
    border-color: #f7a771;
    color: #fff;
}

    .sbs-flat .speech-balloon::before,
    .sbs-flat .speech-balloon::after{
      border-right-color: #f7a771;
      border-left-color: #f7a771;
}

.sb-id-13 .speech-balloon {
background-color:#db6e62; /* 吹き出しメイン部分の背景色 */
border: 2px solid #db6e62; /* 吹き出しメイン部分の枠 */
color: #fff; /* セリフの文字色 */
}
.sb-id-13 .speech-balloon::before {
border-right: 12px solid #db6e62; /* 三角部分の枠色 */
}
.sb-id-13 .speech-balloon::after {
border-right: 12px solid #db6e62; /* 三角部分の背景色 */
}
@media screen and (max-width: 480px){
.sb-id-13 .speech-balloon::before { border-right: 7px solid #db6e62; /* スマホでの三角部分の枠色 */
}
.sb-id-13 .speech-balloon::after { border-right: 7px solid #db6e62; /* スマホでの三角部分の背景色 */
}
}

.sb-id-15 .speech-balloon {
background-color:#db6e62; /* 吹き出しメイン部分の背景色 */
border: 2px solid #db6e62; /* 吹き出しメイン部分の枠 */
color: #fff; /* セリフの文字色 */
}
.sb-id-15 .speech-balloon::before {
border-right: 12px solid #db6e62; /* 三角部分の枠色 */
}
.sb-id-15 .speech-balloon::after {
border-right: 12px solid #db6e62; /* 三角部分の背景色 */
}
@media screen and (max-width: 480px){
.sb-id-15 .speech-balloon::before { border-right: 7px solid #db6e62; /* スマホでの三角部分の枠色 */
}
.sb-id-15 .speech-balloon::after { border-right: 7px solid #db6e62; /* スマホでの三角部分の背景色 */
}
}

.sb-id-14 .speech-balloon {
background-color:#db6e62; /* 吹き出しメイン部分の背景色 */
border: 2px solid #db6e62; /* 吹き出しメイン部分の枠 */
color: #fff; /* セリフの文字色 */
}
.sb-id-14 .speech-balloon::before {
border-right: 12px solid #db6e62; /* 三角部分の枠色 */
}
.sb-id-14 .speech-balloon::after {
border-right: 12px solid #db6e62; /* 三角部分の背景色 */
}
@media screen and (max-width: 480px){
.sb-id-14 .speech-balloon::before { border-right: 7px solid #db6e62; /* スマホでの三角部分の枠色 */
}
.sb-id-14 .speech-balloon::after { border-right: 7px solid #db6e62; /* スマホでの三角部分の背景色 */
}
}