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

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

/*Hタグ（見出し）の設定　ここから*/

/*カスタマイズH2*/

.article h2 {
  position: relative;/*相対位置*/
  padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #6cb4e4;/*文字色*/
  border-top: dotted 1px gray;
  border-bottom: dotted 1px gray;
  border-left: none;
  background: #f9ffff;
}

.article h2:before {
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f35a";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0.25em;/*アイコンの位置*/
  top: 0.5em;/*アイコンの位置*/
  color: #6cb4e4; /*アイコン色*/
}

/*カスタマイズH3*/

.article h3 {
  color: #6594e0;/*文字色*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #6594e0;
  border-left: none;
}

/*Hタグ（見出し）の設定　ここまで*/

/*目次の設定　ここから*/

/* 目次h2見出しの前 */
.toc-list>li>a::before {
font-family: "Font Awesome 5 Free";
content: "\f14b";/* Font Awesomeで変更可能 */
font-weight: 900;
padding-right: 5px;
color: #77c3df;/* アイコンの色 */
}

/* 目次h3見出しの前 */
.toc-list>li li a::before {
font-family: "Font Awesome 5 Free";
content: "\f0fe";
font-weight: 900;
padding-right: 5px;
color: #6594e0;/* アイコンの色 */
}

.toc-list li a {
font-size: 1.1em;
font-weight: 500;
}
.toc-list>li li a {
font-size: 1em;
font-weight: 500;
}
.toc a:hover {
color: #333;
text-decoration: underline;
}

/*目次の設定　ここまで*/

/*動画中央寄せ（YouTube）　ここから*/
.video-container {
margin: 0px auto;
}

/*Cocoon商品リンクボタンカスタマイズ　ここから*/

.shoplinkamazon a {
    background: #dd8e03;
    color: #fff;
    box-shadow: 0 8px 12px -5px rgba(0,0,0,.3);
    transition: .4s;
}
.shoplinkamazon a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -5px rgba(0,0,0,.3);
    color: #fff;
    opacity: 1;
}
.shoplinkrakuten a {
    background: #d01010;
    color: #fff;
    box-shadow: 0 8px 12px -5px rgba(0,0,0,.3);
    transition: .4s;
}
.shoplinkrakuten a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -5px rgba(0,0,0,.3);
    color: #fff;
    opacity: 1;
}
.shoplinkyahoo a {
    background: #1a9bc5;
    color: #fff;
    box-shadow: 0 8px 12px -5px rgba(0,0,0,.3);
    transition: .4s;
}
.shoplinkyahoo a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -5px rgba(0,0,0,.3);
    color: #fff;
    opacity: 1;
}
@media screen and (max-width: 480px){
    .shoplinkamazon a, .shoplinkrakuten a {
  margin-bottom: 14px;
    }
    .shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a {
  box-shadow: 0 8px 8px -4px rgba(0,0,0,.3);
    }
}

/*Cocoon商品リンクボタンカスタマイズ　ここまで*/

/*Cocoon商品リンク：枠線を細く Amazonここから*/
.amazon-item-box{
margin: 0;
padding: 22px 25px; /*余白調整*/
border: solid 1px #ccc; /*線の太さ*/
}
/*Cocoon商品リンク：枠線を細く Amazonここまで*/

/*Cocoon商品リンク：枠線を細く 楽天ここから*/

.rakuten-item-box{
margin: 0;
padding: 22px 25px; /*余白調整*/
border: solid 1px #ccc; /*線の太さ*/
}

/*Cocoon商品リンク：枠線を細く 楽天ここまで*/

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

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

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