@charset "UTF-8";

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

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

/* ロゴ */
.logo {
    text-align: left;
}
.tagline {
    text-align: left;
	margin: 0;
}

/* 見出し */
.article h2 {
	font-size: 26px;
	color: #333;
    padding: 0.5em 0 0.5em 0.75em;
    border-left: 0.5rem solid #65a060;
    margin: 28px 0px;
}
.article h3 {
    margin: 28px 0px;
}
.article h4 {
    margin: 28px 0px;
    border-bottom: 3px dotted #64a25f;
}

.article h5 {
	margin: 28px 0px;
    border-bottom: 2px solid #89c685;
}

#header-container .navi {
    background-color: #65a060;
}

/* 目次 */
.toc ol.toc-list, .toc ul.toc-list {
    margin: 20px !important;
}

/* コンテンツ */
.entry-content {
    margin-bottom: 1em;
}

.header-container, .main, .sidebar, .footer {
    background-color: #f2f2f2;
}

/* ナビゲーションバー */
.navi-in a:hover {
    background-color: #558551;
    color: #fff;
}

/* 記事情報文字 */
.entry-category, .post-date, .post-update, .post-author, .amp-back {
    padding: 2px;
    display: inline;
    font-size: 1em;
}

/* 強調 */
.emphasis {
	font-weight:bold;
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #2196f31f 0%) repeat scroll 0 0;
}

/* 赤ボールド */
.red-bold {
	font-weight:bold;
	color: #dd4b39;
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffeb3b6e 0%) repeat scroll 0 0;
}

/* ボックス */
.blank-box {
    padding: 0em 1em;
    margin: 1em 0%;
}

.blank-box.bb-tab {
    margin-top: 2.5em;
}

.blank-box.bb-red {
    border-color: #bd3c33;
}
.blank-box.bb-tab.bb-red::before {
    background-color: #bd3c33;
}

.blank-box.bb-yellow {
    border-color: #f79901;
}
.blank-box.bb-tab.bb-yellow::before {
    background-color: #f79901;
}

/* ボックスラベル赤 */
.blank-box.bb-tab.bb-red .bb-label {
    background-color: #bd3c33;
}

/* ボックスラベル黄 */
.blank-box.bb-tab.bb-yellow .bb-label {
    background-color: #f79901;
}

/* サイドバー */
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {
    padding-right: 10px;
    padding-left: 10px;
}

/* 参考記事 */
.blogcard-wrap {
    margin: 35px auto;
    padding: 0;
    width: 100%;
    background-color: #fff;
}

/* カテゴリラベル */
.cat-label {
    font-size: 14px;
}

/* ブログカード */
.blogcard-snipet {
    font-size: 0.7em;
    margin-top: 10px;
}
.blogcard-title {
    margin-top: 10px;
}

/* Amazonリンク */
.booklink-box, .kaerebalink-box, .tomarebalink-box, .product-item-box {
    background-color: #fff;
}

/* AdSense */
.ad-label {
    font-size: 13px;
}

.adsense-area {
    text-align: center;
    padding: 10px 10px;
    background: #ffffff;
   -margin: 30px 0;
}

.adsense-area p {
    color: #333;
    font-size: 13px;
    margin: -5px 0px 1px;
}

iframe {
    max-height: 350px;
}

@media screen and (max-width: 789px) {
.adsense-area {
    padding: 0px 0px;
    margin: 20px 0px;
}
.adsense-area p {
    font-size: 12px;
}
}

/* インデックスタイトル */
.entry-card-title {
    font-size: 20px;
}

/* 関連記事 */
.related-entry-card-snippet {
    display: none;
}

/* 次の記事 */
.pager-post-navi a.prev-post {
    padding: 6px;
}

/* ブログカードラベル */
.blogcard-label {
    position: absolute;
    top: -18px;
    left: 16px;
    font-size: 13px;
    padding: 3px 0.6em;
    background-color: #64a25f;
    color: #fff;
    border-radius: 3px;
    letter-spacing: 0.7px;
    display: none;
}

/* ページネーション */
.pagination-next-link {
    background-color: #65a25f;
}
.pagination-next-link:hover {
    background-color: #7ead7a;
    color: #fff;
}

/* フッターメニュー */
.footer-bottom.fnm-text-width .menu-footer li a {
    padding: 3px 25px 5px;
}

/* モバイルメニュー */
.mobile-menu-buttons {
    background: #7bb277;
    border-top: 1px solid #7bb277;
}

/* olリスト ブルー */
ol.blue-ol{
    counter-reset:number; /*数字をリセット*/
    list-style-type: none!important; /*数字を一旦消す*/
    padding: 1em 25px 0.7em 25px;
    color: #333;
    border: 3px solid #0095d9;
}
ol.blue-ol li{
    position: relative;
    padding-left: 30px;
    line-height: 1.5em;
    padding: 5px 0.5em 10px 35px;
	border-bottom: dashed 1px #0095d9;
}
ol.blue-ol li:before{
/* 以下数字をつける */
    position: absolute;
    counter-increment: number;
    content: counter(number);
/*以下数字のデザイン変える*/
    display:inline-block;
    background: #0095d9;
    color: white;
    font-family: 'Avenir','Arial Black','Arial',sans-serif;
    font-weight:bold;
    font-size: 15px;
    border-radius: 50%;
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 24px;
    text-align:center;
}
ol.blue-ol li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}

/* olリスト ブルー　枠線なし */
ol.blue-ll-ol{
    counter-reset:number; /*数字をリセット*/
    list-style-type: none!important; /*数字を一旦消す*/
    padding: 1em 1em 0.7em 10px;
    color: #333;
}
ol.blue-ll-ol li{
    position: relative;
    padding-left: 30px;
    line-height: 1.5em;
    padding: 5px 0.5em 10px 35px;
	border-bottom: dashed 1px #0095d9;
}
ol.blue-ll-ol li:before{
/* 以下数字をつける */
    position: absolute;
    counter-increment: number;
    content: counter(number);
/*以下数字のデザイン変える*/
    display:inline-block;
    background: #0095d9;
    color: white;
    font-family: 'Avenir','Arial Black','Arial',sans-serif;
    font-weight:bold;
    font-size: 15px;
    border-radius: 50%;
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 24px;
    text-align:center;
}
ol.blue-ll-ol li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}

/* olリスト レッド */
ol.red-ol{
    counter-reset:number; /*数字をリセット*/
    list-style-type: none!important; /*数字を一旦消す*/
    padding: 1em 25px 0.7em 25px;
    color: #333;
    border: 3px solid #bd3c33;
}
ol.red-ol li{
    position: relative;
    padding-left: 30px;
    line-height: 1.5em;
    padding: 5px 0.5em 10px 35px;
	border-bottom: dashed 1px #ff766c;
}
ol.red-ol li:before{
/* 以下数字をつける */
    position: absolute;
    counter-increment: number;
    content: counter(number);
/*以下数字のデザイン変える*/
    display:inline-block;
    background: #bd3c33;
    color: white;
    font-family: 'Avenir','Arial Black','Arial',sans-serif;
    font-weight:bold;
    font-size: 15px;
    border-radius: 50%;
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 24px;
    text-align:center;
}
ol.red-ol li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}

/* olリスト レッド　枠線なし */
ol.red-ll-ol{
    counter-reset:number; /*数字をリセット*/
    list-style-type: none!important; /*数字を一旦消す*/
    padding: 1em 1em 0.7em 10px;
    color: #333;
}
ol.red-ll-ol li{
    position: relative;
    padding-left: 30px;
    line-height: 1.5em;
    padding: 5px 0.5em 10px 35px;
	border-bottom: dashed 1px #bd3c33;
}
ol.red-ll-ol li:before{
/* 以下数字をつける */
    position: absolute;
    counter-increment: number;
    content: counter(number);
/*以下数字のデザイン変える*/
    display:inline-block;
    background: #bd3c33;
    color: white;
    font-family: 'Avenir','Arial Black','Arial',sans-serif;
    font-weight:bold;
    font-size: 15px;
    border-radius: 50%;
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 24px;
    text-align:center;
}
ol.red-ll-ol li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}


/* olリスト イエロー */
ol.yellow-ol{
    counter-reset:number; /*数字をリセット*/
    list-style-type: none!important; /*数字を一旦消す*/
    padding: 1em 25px 0.7em 25px;
    color: #333;
    border: 3px solid #f79901;
}
ol.yellow-ol li{
    position: relative;
    padding-left: 30px;
    line-height: 1.5em;
    padding: 5px 0.5em 10px 35px;
	border-bottom: dashed 1px #f79901;
}
ol.yellow-ol li:before{
/* 以下数字をつける */
    position: absolute;
    counter-increment: number;
    content: counter(number);
/*以下数字のデザイン変える*/
    display:inline-block;
    background: #f79901;
    color: white;
    font-family: 'Avenir','Arial Black','Arial',sans-serif;
    font-weight:bold;
    font-size: 15px;
    border-radius: 50%;
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 24px;
    text-align:center;
}
ol.yellow-ol li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}

/* olリスト イエロー　枠線なし */
ol.yellow-ll-ol{
    counter-reset:number; /*数字をリセット*/
    list-style-type: none!important; /*数字を一旦消す*/
    padding: 1em 1em 0.7em 10px;
    color: #333;
}
ol.yellow-ll-ol li{
    position: relative;
    padding-left: 30px;
    line-height: 1.5em;
    padding: 5px 0.5em 10px 35px;
	border-bottom: dashed 1px #f79901;
}
ol.yellow-ll-ol li:before{
/* 以下数字をつける */
    position: absolute;
    counter-increment: number;
    content: counter(number);
/*以下数字のデザイン変える*/
    display:inline-block;
    background: #f79901;
    color: white;
    font-family: 'Avenir','Arial Black','Arial',sans-serif;
    font-weight:bold;
    font-size: 15px;
    border-radius: 50%;
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 24px;
    text-align:center;
}
ol.yellow-ll-ol li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}

/* ulリスト ブルー */
ul.blue-ul {
    padding:0.5em 0.5em 0.3em 50px;
    position: relative;
    border: 3px solid #0095d9;

}
ul.blue-ul li {
    line-height: 1.5;
    padding: 5px 0.5em 10px 5px;
    list-style-type: none!important;
	border-bottom: dashed 1px #0095d9;
}
ul.blue-ul li:before {/*疑似要素*/
    font-family: FontAwesome;
    content: "\f054";/*アイコンの種類*/
    position: absolute;
    left : 2em; /*左端からのアイコンまで*/
    color: #0095d9; /*アイコン色*/
}
ul.blue-ul li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}

/* ulリスト レッド */
ul.red-ul {
    padding:0.5em 0.5em 0.3em 50px;
    position: relative;
    border: 3px solid #bd3c33;

}
ul.red-ul li {
    line-height: 1.5;
    padding: 5px 0.5em 10px 5px;
    list-style-type: none!important;
	border-bottom: dashed 1px #bd3c33;
}
ul.red-ul li:before {/*疑似要素*/
    font-family: FontAwesome;
    content: "\f054";/*アイコンの種類*/
    position: absolute;
    left : 2em; /*左端からのアイコンまで*/
    color: #bd3c33; /*アイコン色*/
}
ul.red-ul li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}

/* ulリスト イエロー */
ul.yellow-ul {
    padding:0.5em 0.5em 0.3em 50px;
    position: relative;
    border: 3px solid #f79901;

}
ul.yellow-ul li {
    line-height: 1.5;
    padding: 5px 0.5em 10px 5px;
    list-style-type: none!important;
	border-bottom: dashed 1px #f79901;
}
ul.yellow-ul li:before {/*疑似要素*/
    font-family: FontAwesome;
    content: "\f054";/*アイコンの種類*/
    position: absolute;
    left : 2em; /*左端からのアイコンまで*/
    color: #f79901; /*アイコン色*/
}
ul.yellow-ul li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}

/*タイトル付きボックス　青 */
.blue-t-box {
    margin: 0em;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.blue-t-box .box-title {
    font-size: 1em;
    background: #5fc2f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.blue-t-box p {
    padding: 15px 20px;
    margin: 0;
}

/*タイトル付きボックス　橙 */
.orange-t-box {
    margin: 0em;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.orange-t-box .box-title {
    font-size: 1em;
    background: #FF9800;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.orange-t-box p {
    padding: 15px 20px;
    margin: 0;
}

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

/* カテゴリラベル */
.cat-label {
    font-size: 15px;
    padding: 4px 5px;
}

.logo {
    text-align: center;
}
.tagline {
    text-align: center;
}

}

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

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

/* フッターメニュー */
.navi-footer-in > .menu-footer li.menu-item {
    flex: 0 1 auto;
}

}

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

.article h2 {
	font-size: 24px;
    margin: 23px 0px;
}
.article h3 {
    margin: 23px 0px;
}

/* インデックスサムネイル */
.entry-card-content {
    padding: 0.5em 0 0.5em;
}

/* インデックスタイトル */
.entry-card-title {
    font-size: 17px;
	margin-bottom: 15px;
}

/* カラム */
.container .column-wrap > div {
    padding: 0;
}

/* ボックス */
.information-box, .question-box, .alert-box, .memo-box, .comment-box {
    padding: 15px;
}

}