@charset "UTF-8";

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

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

/* フロップデザインフォント */
/*@font-face {
    font-family: "フロップデザインフォント";
    src: url("./webfont/FLOPDesignFont.woff2") format("woff2");
}
.FLOPDesignFont {
    font-family: "フロップデザインフォント";
}*/

/* ロゴたいぷゴシック フォント */
@font-face {
    font-family: "ロゴたいぷゴシック";
    src: url("./webfont/logotype-gothic.woff2") format("woff2");
}
.LOGOtype-Gothic-Font {
    font-family: "ロゴたいぷゴシック";
}

/* ほのか丸ゴシック フォント */
/*@font-face {
    font-family: "ほのか丸ゴシック";
    src: url("./webfont/font_1_honokamarugo_1.1.woff2") format("woff2");
}
.Honokamaru-Gothic-Font {
    font-family: "ほのか丸ゴシック";
}*/

/* フルーツパーラーmini フォント */
/*@font-face {
    font-family: "フルーツパーラーmini";
    src: url("./webfont/FruitPalor-mini.woff2") format("woff2");
}
.Fruit-Parlor-mini-Font {
    font-family: "フルーツパーラーmini";
}*/

/* タイトル：フォント */
.entry-title {
    font-family: "ロゴたいぷゴシック";
    font-size: 150%;
}

/* エントリーカードタイトル：フォント */
.entry-card-title,
.card-title,
.e-card-title {
    font-family: "ロゴたいぷゴシック";
}

/* 目次：フォント */
.toc {
    font-family: "ロゴたいぷゴシック";
}

/* 見出し：フォント */
/* .article h1, */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
    font-family: "ロゴたいぷゴシック";
}

/* 見出し2：吹き出し */
/*.article h2 {
    font-size: 24px;
    position: relative;
    margin: 30px 0 30px 0;
    padding: 18px 20px;
    color: #fff;
    background: #f09199;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

.article h2:after {
    position: absolute;
    content: "";
    top: 100%;
    left: 20px;
    border: 15px solid transparent;
    border-top: 15px solid #f09199;
    width: 0;
    height: 0;
}*/

/* 見出し2 */
.article h2 {
    position: relative;
    margin: 6rem 0rem 3rem 0rem;
    padding: initial;
    padding: 1rem 0rem 1rem 5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    border: initial;
    border-radius: 5px;
    background: #f7f6eb;
    background-position: left center;
    background-repeat: no-repeat;
    color: #333;
}

.article h2:before {
    position: absolute;
    content: "";
    background-color: #223a70;
    top: 0%;
    left: 0%;
    width: 4rem;
    height: 100%;
    border-radius: 5px;
    background-size: 3rem;
    background-position: center center;
    background-image: url("./images/light-bulb.svg");
    background-repeat: no-repeat;
}

.article h2:after {
    position: absolute;
    content: "";
    top: 100%;
    left: 1.5rem;
    border: 0.5rem solid transparent;
    border-top: 0.5rem solid #223a70;
    width: 0;
    height: 0;
}

/* 見出し3 */
.article h3 {
    position: relative;
    margin: 4rem 0rem 2rem 0rem;
    padding: initial;
    padding: 1rem 0rem 1rem 4rem;
    font-size: 1.3rem;
    line-height: 1.7rem;
    border: initial;
    border-radius: 5px;
    background: #f7f6eb;
    background-position: left center;
    background-repeat: no-repeat;
    color: #333;
}

.article h3:before {
    position: absolute;
    content: "";
    background-color: #223a70;
    top: 0%;
    left: 0%;
    width: 3rem;
    height: 100%;
    border-radius: 5px;
    background-size: 1.8rem;
    background-position: center center;
    background-image: url("./images/speech-bubble.svg");
    background-repeat: no-repeat;
}

/* 見出し4 */
.article h4 {
    position: relative;
    margin: 3rem 0rem 1.5rem 0rem;
    padding: initial;
    padding: 0.65rem 0rem 0.65rem 3rem;
    font-size: 1.3rem;
    line-height: 1.7rem;
    border: initial;
    border-radius: 4px;
    background: #f7f6eb;
    background-position: left center;
}

.article h4:before {
    position: absolute;
    background-color: #223a70;
    background-size: 100% 2rem;
    top: 0%;
    left: 0%;
    width: 2rem;
    height: 100%;
    border-radius: 4px 0px 0px 4px;
    font-family: "Font Awesome 5 Free";
    font-size: 1rem;
    line-height: 3rem;
    content: "\f00c";
    color: #fedf8f;
    text-align: center;
}

/* 見出し5 */
.article h5 {
    margin: 2rem 0rem 1.5rem 0rem;
    border: initial;
    border-left: 0.8rem solid #223a70;
    border-radius: 4px;
    font-size: 1.2rem;
    line-height: 1.6rem;
    background: #f7f6eb;
}

/* フローボックス */
.flowBox {
    padding-bottom: 30px;
    margin-bottom: 0px; /* 15 */
    display: block;
    overflow: hidden;
    background: url(./images/arrow_down.png) center bottom no-repeat;
}

.flowBox:last-child {
    background: none;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.flowBox dl {
    display: block;
    overflow: hidden;
    padding: 15px 20px;
    border: 3px solid #e5e5e5;
}

.flowBox dl dt {
    border-bottom: 1px dotted #ccc;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.flowBox dl dd {
    margin-bottom: 0px;
}

.flowBox dl dd h4 {
    margin: 0px;
    padding: 0px;
}

.flowBox dl dd p {
    margin-bottom: 10px;
}

.flowBox dl dd ul {
    margin-bottom: 0px;
}

/* 「タブボックス」ラベルの日本語化 */
.bb-check::before {
    content: "\f00c  チェック";
}

.bb-comment::before {
    content: "\f075  コメント";
}

.bb-point::before {
    content: "\f0eb  ポイント";
}

.bb-tips::before {
    content: "\f19d  ティップス";
}

.bb-hint::before {
    content: "\f0f3  ヒント";
}

.bb-pickup::before {
    content: "\f005  ピックアップ";
}

.bb-bookmark::before {
    content: "\f02e  ブックマーク";
}

.bb-memo::before {
    content: "\f040  メモ";
}

.bb-download::before {
    content: "\f019  ダウンロード";
}

/* アンダーライン，ラインマーカー */

/*赤色アンダーライン*/
.underline-red {
    background: linear-gradient(transparent 90%, #ff0000 90%);
}

/*黄色マーカー（太）*/
.marker-yellow-thick {
    background: linear-gradient(transparent 0%, #ffff66 0%);
}

/*黄色マーカー（細）*/
.marker-yellow-narrow {
    background: linear-gradient(transparent 60%, #ffff66 80%);
}

/*水色マーカー（太）*/
.marker-water-thick {
    background: linear-gradient(transparent 0%, #66ccff 0%);
}

/*水色マーカー（細）*/
.marker-water-narrow {
    background: linear-gradient(transparent 60%, #66ccff 80%);
}

/*ピンク色マーカー（太）*/
.marker-pink-thick {
    background: linear-gradient(transparent 0%, #ff66ff 0%);
}

/*ピンク色マーカー（細）*/
.marker-pink-narrow {
    background: linear-gradient(transparent 60%, #ff66ff 80%);
}

/*ブロックエディタ画像に隣接した<p>タグ*/
/*ブロックエディタ埋め込みブロックに隣接した<p>タグ*/
.wp-block-image + p,
.wp-block-embed + p {
    margin-top: 3em;
}

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