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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* viewport */
.viewpc {
	display: display !important;
}

.viewsp {
	display: none !important;
}

/* 装飾 */
.none {
	display:none;
}
.item-wrap {
margin:1em;
}
.item-yellow {
	margin-top:0;
	padding:1em;
	background:#ffcf37;
}
.margin-b0 {
	margin-bottom:0 !important;
}

.info {
	border: 4px solid #eee;
	background-color: #fff;
}

/* パンくずリストのアイコン非表示 */
.breadcrumb .fa-folder,
.breadcrumb .fa-file {
	display: none;
}

/* フォントの太さ */
p,
td,
li,
label {
    font-weight: 500;
}

/* 汎用 */
.center {
    justify-content: center;
}

/* 見出しスタイル */
h1.entry-title {
    color: #DDAC23;
}

h1.entry-title::before {
    font-family: "Font Awesome 5 Free";
    content: '\f7a5';
    font-weight: 900;
    margin-right: 5px;
}

h2 {
    color: #666666;
    font-size: 1.5rem;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: bold;
    margin-top: 2em;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ccc;
}

h2.wp-block-heading:before {
    font-family: "Font Awesome 5 Free";
    content: "\f101";
    padding-right: 6px;
    color: #DDAC23;
    font-weight: bold;
}

h2.brand {
	font-size: 1em;
	margin-bottom:0 !important;
	border-bottom:0;
}

h3 {
    color: #DDAC23;
    font-size: 1em;
    font-weight: bold;
    margin: 0.75em 0 0.25em 0;
    padding-bottom: 0;
}

h3:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c8";
    padding-right: 6px;
    color: #DDAC23;
    font-weight: bold;
}

.article h2 {
    background: #fff;
    border-left: none;
    padding: 0.5em 0.5em 0.5em 0;
    margin-bottom: 1em;
}

.article h3 {
    color: #DDAC23;
    font-size: 1em;
    font-weight: bold;
    margin: 0.75em 0 0.25em 0;
    padding-left: 0;
	padding-bottom: 0;
    border: none;
}

.txt-ki {
    color: #DDAC23;
	font-weight:bold;
}

/* ブログh3 */
.sidebar h3 {
    background: white;
    margin-bottom: 0;
    padding: 0;
}

/* 余白 */
.margin0 {
    margin: 0 !important;
}

.mb0 {
	margin-bottom:0 !important;
}

.mt0 {
	margin-top:0 !important;
}

.padding-t0 {
    padding-top: 0 !important;
}

/* 吹き出し */
.speech-person {
    width: 9%;
    min-width: 9%;
}

/* ブランド一覧 */
.brand-toggle label.toggle-bottun * {
  color: #000;
}

/* スマホサイドメニュー */
.menu-close-button {
    margin: 0.25em;
}

#navi-menu-input:checked~#navi-menu-content {
    background: #DDAC23;
}

.menu-drawer a {
    color: white;
}

.menu-drawer a:before {
    font-family: "Font Awesome 5 Free";
    content: '\f054';
    font-weight: 900;
    margin-right: 5px;
}

.fa-times:before {
    color: white;
}

.menu-drawer a:hover {
    background-color: #DDAC23;
    color: white;
}

/* 固定ページの日付非表示 */
.post-8 .date-tags,
.post-71 .date-tags,
.post-18 .date-tags,
.post-20 .date-tags {
    display: none;
}

/* オンマウス色 */
a:hover {
    color: #efcc69;
}

/* コンテンツ影 */
.main,
.sidebar,
.carousel-in,
.sbp-main-before,
.sbp-footer-before,
.pbp-main-before,
.pbp-footer-before {
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.13)
}

/* ボタンスタイル */
.wp-block-button__link {
    color: #fff !important;
    padding: 0.5em 2em;
    display: inline-block;
    border-radius: 50px;
    background: #DDAC23;
    text-decoration: none;
}

.wp-block-button__link::after {
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    align-items: center;
    content: "";
    display: inline-block;
    height: 8px;
    right: -0.5em;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 8px;
    position: relative;
}

/*リンク下線 */
#navi .navi-in a:hover {
    text-decoration: none;
}

/* リンク画像インライン化 */
.inline {
    display: inline-block;
}

/* モバイルヘッダー色 */
.mobile-menu-buttons {
    background-color: #FBFAF5;
    color: #65442c;
}

.mobile-menu-buttons .menu-button>a {
    background-color: #FBFAF5;
}

/* モバイル上へ戻るボタン */
.go-to-top-button {
    background-color: #DDAC23;
}

/* バナー並べるカラム幅 */
.bn-clm2 {
    max-width: 500px;
}

.bn-clm3 {
    max-width: 780px;
}

.bn-clm4 {
    max-width: 980px;
}

/* モバイルサイドメニュー */
.menu-drawer li a::before {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    padding-right: 6px;
    color: white;
    font-weight: 600;
}

/* 目次 */
.toc {
    border: 3px solid #DDAC20;
    font-size: 15px;
    padding: 0;
    display: table;
}

.toc .toc-list {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
    counter-reset: toc;
}

.toc .toc-list>li {
    margin: 15px 0 15px 40px;
    padding: 0;
    font-weight: 700;
    line-height: 1.3;
    position: relative;
}

.toc .toc-list>li:before {
    position: absolute;
    left: -40px;
    top: 0;
    color: #DDAC23;
    display: inline-block;
    padding-right: 8px;
    margin-right: 8px;
    border-right: 2px solid #DDAC23;
    counter-increment: toc;
    content: counter(toc, decimal-leading-zero);
}

.toc .toc-list>li ul,
.toc .toc-list>li ol {
    margin: 8px 0 8px -2px;
    padding-left: 0;
}

.toc .toc-list>li ul>li,
.toc .toc-list>li ol>li {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}

.toc .toc-checkbox:checked~.toc-content {
    padding: 20px 50px;
}

.toc a {
    color: #333;
    text-decoration: none;
}

.toc a:hover {
    text-decoration: underline;
}

.toc-title {
    color: #DDAC23;
    font-size: 1.1em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 5px 0;
    font-weight: 700;
}

.toc-title:before {
    display: inline-block;
    width: 38px;
    height: 32px;
    font-family: "Font Awesome 5 Free";
    font-size: .9em;
    text-align: center;
    line-height: 32px;
    content: "\f0c9";
    font-weight: 700;
}

.toc-checkbox:checked+.toc-title::after,
.toc-title::after {
    cursor: pointer;
    font-size: .8em;
    display: inline-block;
    margin-left: 0.8em;
    padding: 4px 16px;
    font-size: .7em;
    line-height: 1;
    background-color: #ececec;
    border-radius: 4px;
}

.toc-checkbox:checked+.toc-title::after {
    content: 'CLOSE';
}

.toc-title::after {
    content: 'OPEN';
}

ol.toc-list.open {
	padding-top:0;
}

/*カテゴリー付箋風*/
.entry-card-thumb .cat-label {
	top: 10%;
	left: -10px;
	padding: 0.25em 1em;
	/*background-color: #DDAC23;*/
	border: 0;
	line-height: 1.8;
	overflow: visible;
	font-weight: bold;
}

.entry-card-thumb .cat-label::before, .entry-card-thumb .cat-label::after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
}

.entry-card-thumb .cat-label::before {
	top: -6px;
	left: 0;
	border-bottom: 6px solid #9b7919;
	border-left: 10px solid transparent;
}

/*
.entry-card-thumb .cat-label::after {
	top: 0;
	right: -10px;
	border-top: 11.5px solid transparent;
	border-bottom: 11.5px solid transparent;
	border-left: 10px solid #DDAC23;
}*/

/*ブログカテゴリー*/
ul.children li a::before {
content: "└ ";
}
ul {
	line-height: 1.1;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	/* viewport */
	.viewpc {
		display: none !important;
	}

	.viewsp {
		display: block !important;
	}
	
  .mobile-menu-buttons .menu-caption {
        display: none;
    }

    .mobile-menu-buttons {
        align-items: center;
    }
	
	.sp-mt1 {
		margin-top:1em;
	}
}

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

/*480px以下*/
@media screen and (max-width: 480px){
  .toc ul,
    .toc ol {
        padding-left: 0;
    }

    .toc-checkbox:checked~.toc-content {
        padding: 20px;
    }
}