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


/************************************
** 子テーマ用のスタイル
************************************/


/* ==================================================
   ブログ全体
   ================================================== */

.article {
    color: #4A5963;
}


/* ==================================================
   記事本文 H2
   ================================================== */

/*
   編集画面で使用している
   「ブルー背景＋白文字」のデザイン
*/

.article h2,
.entry-content h2 {
    color: #ffffff !important;

    font-size: 1.3em !important;
    font-weight: bold !important;

    background-color: #7BA5CC !important;

    padding: 15px 25px !important;

    margin-top: 40px !important;
    margin-bottom: 30px !important;

    border: none !important;
    border-left: none !important;

    border-radius: 0 !important;

    line-height: 1.5 !important;
}


/* ==================================================
   記事本文 H3
   ================================================== */

/*
   編集画面で使用している
   「白背景＋ブルー枠＋左側太線」のデザイン
*/

.article h3,
.entry-content h3 {
    color: #4A5963 !important;

    font-size: 1.3em !important;
    font-weight: bold !important;

    background-color: #ffffff !important;

    padding: 12px 20px !important;

    margin-top: 30px !important;
    margin-bottom: 25px !important;

    border: 1px solid #7BA5CC !important;

    border-left: 7px solid #7BA5CC !important;

    border-radius: 0 !important;

    line-height: 1.5 !important;
}


/* ==================================================
   記事本文 H4
   ================================================== */

.article h4,
.entry-content h4 {
    color: #4A5963 !important;

    font-size: 1.2em !important;

    padding: 10px !important;

    border-top: solid 3px #7BA5CC !important;
    border-bottom: solid 3px #7BA5CC !important;
}


/* ==================================================
   記事本文 H5
   ================================================== */

.article h5,
.entry-content h5 {
    color: #4A5963 !important;

    font-size: 1em !important;

    padding: 10px !important;

    border-bottom: dotted 3px #7BA5CC !important;
}


/* ==================================================
   記事本文 H6
   ================================================== */

.article h6,
.entry-content h6 {
    color: #4A5963 !important;

    font-size: 1em !important;

    padding: 5px !important;

    border-left: solid 7px #7BA5CC !important;
}


/* ==================================================
   サイドバー見出し
   ================================================== */

.sidebar h2,
.sidebar h3 {
    background-color: #DDEAF0 !important;

    color: #4A5963 !important;

    padding: 8px 20px !important;

    margin: 40px 0 20px !important;

    border-radius: 8px !important;

    font-size: 1em !important;
}


/* ==================================================
   プロフィール サイドバー
   ================================================== */


/* プロフィール上部の名前 */

.sidebar .author-box .author-widget-name {
    top: -5px !important;
    color: #aaa !important;
}


/* @アイコン */

.fa-at:before {
    content: "\f1fa";
    color: #7BA5CC;
}


/* プロフィール説明 */

.author-description,
.author-description>*:last-child {
    padding: 10px;
}


/* プロフィール画像 */

.circle-image img {
    width: 80%;
}


/* プロフィールボックス */

.sidebar .widget_author_box {
    background: #fff;

    border-radius: 3px 3px 0 0;

    max-width: 360px;

    margin: 0 auto;

    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}


/* プロフィール全体 */

.sidebar .author-box {
    padding: 120px 0 0;

    border: none;

    position: relative;

    margin: 0 0 3em;

    max-width: 100%;

    overflow: hidden;
}


/* プロフィール背景 */

.sidebar .author-content {
    background: #C9DFEC;

    border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;

    color: #fff;

    padding: 20px !important;

    width: 110%;

    margin-left: -5% !important;
}


/* プロフィール名前 */

.sidebar .author-box .author-name a {
    color: #2596be;

    text-decoration: none;

    letter-spacing: 1px;

    font-size: 18px;

    position: relative;

    top: -2px;
}


/* プロフィール説明文 */

.sidebar .author-box .author-description {
    padding: 45px 25px 0px;

    text-align: justify;

    text-justify: inter-ideograph;

    color: #0a0a0a;
}


/* プロフィール文章 */

.sidebar .author-box p {
    line-height: 1.8;

    font-size: 14px;
}


/* プロフィール名前 */

.sidebar .author-box .author-name {
    font-size: 1.1em;

    font-weight: bold;

    position: absolute;

    margin-bottom: 0.4em;

    top: 23px;

    bottom: 0;

    right: 0;

    left: 0;
}


/* プロフィールウィジェット名 */

.sidebar .author-box .author-widget-name {
    position: absolute;

    top: 3px;

    bottom: 0;

    right: 0;

    left: 0;

    font-size: 0.7em;

    color: #bbb;
}


/* SNSエリア */

.sidebar .author-box .sns-follow {
    padding: 15px 10px;
}


/* SNSボタン */

.sidebar .author-box .sns-follow-buttons {
    display: flex;

    justify-content: space-evenly;
}


.sidebar .author-box .sns-follow-buttons a {
    border-radius: 50%;

    border: none;

    width: 45px;

    height: 45px;

    line-height: 45px;

    font-size: 30px;

    background: #fff !important;
}


/* SNSボタン ホバー */

.sidebar .author-box .sns-follow-buttons a:hover {
    box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);

    opacity: 1;
}


/* SNSアイコン */

.sidebar .author-box .sns-follow-buttons .follow-button span:before {
    color: #7BA5CC;
}


/* Instagram */

.sidebar .icon-instagram-new:before {
    content: "\ea92";

    font-size: 24px;
}


/* プロフィールボタン */

.sidebar .author-box .to-profile {
    position: absolute;

    background: #fff;

    border-radius: 50%;

    width: 50px;

    height: 50px;

    line-height: 50px;

    text-align: center;

    text-decoration: none;

    color: #2596be;

    box-shadow:
        0 0 10px rgba(66, 172, 231, .5),
        0 0 5px -5px rgba(66, 172, 231);

    top: 105px;

    right: 45px;

    font-size: 0.9em;

    font-weight: bold;
}


/* プロフィールボタン ホバー */

.sidebar .author-box .to-profile:hover {
    box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
}


/* SNSフォローメッセージ */

.sidebar .author-box .sns-follow-message {
    margin-bottom: 10px;

    font-size: 13px;
}


.sidebar .author-box .sns-follow-message:before {
    content: "＼";

    margin-right: 5px;
}


.sidebar .author-box .sns-follow-message:after {
    content: "／";

    margin-left: 5px;
}


/* Twitter */

.sidebar .icon-twitter-logo:before {
    position: absolute;

    top: 8px;

    right: 0;

    bottom: 0;

    left: 0;
}


/* Facebook */

.sidebar .icon-facebook-logo:before {
    position: absolute;

    top: 6px;

    bottom: 0;

    right: 8px;

    left: 0;
}


/* はてなブックマーク */

.sidebar .icon-hatebu-logo:before {
    position: absolute;

    top: 8px;

    bottom: 0;

    right: 0;

    left: 0;
}


/* ==================================================
   目次
   ================================================== */

.toc,
.toc a {
    color: #4A5963;
}


/* ==================================================
   記事内リンク
   ================================================== */

.article a {
    color: #2596be;
}


/* ==================================================
   ボタン
   ================================================== */

.wp-block-button__link {
    background-color: #2596be !important;

    color: #ffffff !important;

    border-radius: 8px !important;
}


/* ==================================================
   シェアボタン
   ================================================== */

.sns-share,
.sns-share a {
    color: #ffffff;
}


/* ==================================================
   囲みボックス
   ================================================== */

.custom-box {
    background-color: #F3F8FB;

    padding: 20px;

    border-radius: 10px;
}


/* ==================================================
   画像直下の出典
   ================================================== */

.image-source {
    font-size: 9px !important;

    color: #7A8790;

    margin: 0 !important;

    padding: 0 !important;

    line-height: 1.2 !important;
}


.image-source a {
    color: #7A8790;

    text-decoration: underline;
}


/* ==================================================
   出典＋本文ボックス
   ================================================== */

.article-source-box {
    margin: 0;

    padding: 0;
}


/* ==================================================
   出典
   ================================================== */

.article-source {
    font-size: 8px !important;

    color: #8A9399 !important;

    line-height: 1.4 !important;

    margin: 0 0 8px 0 !important;

    padding: 0 !important;
}


.article-source a {
    font-size: 8px !important;

    color: #8A9399 !important;

    text-decoration: underline;
}


/* ==================================================
   商品説明
   ================================================== */

.article-description {
    margin-left: 12px;

    margin-right: 5px;

    font-size: 16px;

    line-height: 1.9;
}


.article-description p {
    margin: 0 0 14px 0;
}


/* ==================================================
   スタバ記事：商品説明
   ================================================== */

.product-description {
    margin-left: 18px !important;

    margin-right: 5px !important;

    font-size: 16px !important;

    line-height: 1.9 !important;

    margin-bottom: 14px !important;
}


/* ==================================================
   レスポンシブデザイン
   ================================================== */


/* 1023px以下 */

@media screen and (max-width: 1023px) {

}


/* 834px以下 */

@media screen and (max-width: 834px) {

}


/* 768px以下 */

@media screen and (max-width: 768px) {

    /* H2 */

    .article h2,
    .entry-content h2 {
        font-size: 1.2em !important;

        padding: 13px 18px !important;

        margin-top: 30px !important;

        margin-bottom: 25px !important;

        line-height: 1.5 !important;
    }


    /* H3 */

    .article h3,
    .entry-content h3 {
        font-size: 1.15em !important;

        padding: 10px 15px !important;

        margin-top: 25px !important;

        margin-bottom: 20px !important;

        line-height: 1.5 !important;
    }


    /* 商品説明 */

    .product-description {
        margin-left: 10px !important;

        margin-right: 5px !important;

        font-size: 15px !important;
    }

}


/* 480px以下 */

@media screen and (max-width: 480px) {

    /* H2 */

    .article h2,
    .entry-content h2 {
        font-size: 1.1em !important;

        padding: 12px 15px !important;
    }


    /* H3 */

    .article h3,
    .entry-content h3 {
        font-size: 1.05em !important;

        padding: 9px 12px !important;

        border-left-width: 6px !important;
    }

}