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

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

/* === レイアウト === */
/* コンテンツ上の余白 */
.content {
    margin-top: 2rem;
}
/* カルーセル */
.carousel {
    margin-top: 2rem;
}
.card-thumb img {
    border-radius: 10px;
}
.carousel-entry-card-title {
    line-height: 1.4;
    height: auto;
}

/* === グローバルナビ === */
.navi-in > ul li {
    width: auto;
}
.navi-in a {
    padding: 0 30px;
}
.navi-in a:hover {
    background-color: #FFE34F;
}


/* === 景品表示法対応 === */
/* Cocoon設定メインカラム左上のPR表記 */
.pr-label-s {
  display: inline-block;
  position: absolute;
  top: -7px; /* メインカラム上端からの位置調整 */
  left: 27px; /* メインカラム左端からの位置調整 */
  margin: 0;
  padding: 6px 0 5px 0;
  width: 60px;
  text-align: center;
  color: #fff; /* 文字の色 */
  font-size: 12px;
  background: #37933F; /* ラベルの色 */
  border-radius: 3px 0 0 0;
  border: none;
}
.pr-label-s:before {
  position: absolute;
  content: '';
  top: 0;
  right: -6px;
  border: none;
  border-bottom: solid 6px #0D4C10;
  border-right: solid 6px transparent;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    padding: 1%;
    border-radius: 4px;
    box-shadow: none!important;
}


/* === メインコンテンツ装飾 === */
/* もくじ */
.toc {
    border: 3px solid #FFDC11;
    padding: 2em;
    border-radius: 24px;
}
.toc-title {
    font-size: 1.2em;
    padding: 4px 16px 12px;
}
.toc-center {
    margin: 4em auto !important;
}
.toc .toc-list {
    padding-left: 0;
}
.toc-content ol {
    padding: 0 .5em;
    position: relative;
}
.toc-content ol li {
    position:relative;
    line-height: 1.5;
    padding: .8em 0 .8em 1.4em;
    border-bottom: dotted 1px #bcb2a4;
    list-style-type: none !important;
}
.toc-content ol li:before {
    content: "";
    position: absolute;
    font-family: "Font Awesome 5 Free";
    content: "\f04b";
    position: absolute;
    left: -.1em;
    color: #FFDC11;
    font-weight: 700;
}

/* H2見出し */
.article h2 {
    position: relative;
    box-shadow: 6px 6px #332200;
    outline: 5px solid #fff;
    border: 1px solid #332200;
    background: #FFF5C2; /*背景色*/
    color:#332200;
    border-radius: 0;
    margin-top: 40px;
}

/* H3見出し */
.article h3 {
    --baloon-color:#37933F;
    position: relative;
    padding: 1rem 1.5rem;
    background: var(--baloon-color);
    color: #fff;
    border: none;
    margin-top: 40px;
}
.article h3:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    bottom: -10px;
    left: 1.5em;
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: var(--baloon-color) transparent transparent transparent;
} 

/* H4見出し */
.article h4{
    position:relative;
    padding:.5em 0; /*内側余白　上下・左右*/     
    color:#332200;
    border: none;
    margin-top: 30px;
    padding-left: .5em;
}
.article h4:after{
    --stripe-color:#FFDC11;/*ストライプの色*/
    position:absolute;
    content: "";
    width: 100%;
    height: 7px;
    bottom:0;
    left:0;
    background: linear-gradient(135deg, transparent 25%,var(--stripe-color)  25%,var(--stripe-color)  50%,transparent 50%,transparent 75%,var(--stripe-color) 75%,var(--stripe-color));
    background-size: 4px 4px;
}

/* タグクラウド */
.tagcloud a {
    background: none; /*背景を消す*/
    border: 1px solid #332200; 
    border-radius: 20px; /*角の丸み*/
    color: #332200; /*文字色*/
    display: inline-block;
    padding: 3px 10px;
    text-decoration: none;
    font-size: 13px;
    margin: 4px;
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
}
.tagcloud a:hover { /*マウスホバー時*/
    background: #332200;
    border: 1px solid #332200;
    color: #FFDC10;
    transition: 0.5s; /*アニメーションの時間*/
}


/* === footer === */
/* トップへ戻るボタン画像の表示調整 */
.go-to-top-button {
 width: 70px; /* ボタン画像の表示幅 */
 height: auto; /* ボタン画像の高さは自動調整 */
}
.go-to-top-button:hover { /* カーソルを合わせると少し拡大する */
  transform: scale(1.1);
  transition: .3s;
}
.go-to-top {
 right: 10px; /* 右から10pxの位置に配置 */
 bottom: 20px; /* 下から20pxの位置に配置 */
}


/* reCAPTCHA */
.grecaptcha-badge {
    bottom: 110px !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
    .footer-bottom {
        padding: 8px 0 110px!important;
    }
    .go-to-top-button {
        position: relative;
        width: 50px;
        bottom: 0px;
    }
      .go-to-top-button,
      .mblt-footer-mobile-buttons .go-to-top-button {
        display: block;
    }
    .grecaptcha-badge {
        bottom: 90px !important;
    }
}

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

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

/*記事をホバーした時*/
.a-wrap:hover {
    background-color: #FFFCF0;
    transition: all 0.3s ease-in-out;
    color: #333300;
}
/*記事上のカテゴリボタン-チェック時*/
#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"] {
    border: 0;
    background: #332200;
    color: #FFDC10;
}
/*記事上のカテゴリボタン*/
.blogcard, .ecb-entry-border .entry-card-wrap, .page-numbers, .pagination-next-link, .comment-btn, .index-tab-buttons .index-tab-button, .border-square a, .author-box{
    border-color: #332200;
}