/*@import url("style2.css");*/

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

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

/*ナビゲーションの空リンク対策*/
nav a:not([href]) {
	cursor:pointer;
}

/*目次のスタイル*/
ol.toc-list.open {
    font-weight: bold;
}
ol.toc-list.open ol li {
    font-weight: normal;
	list-style-type: disc;
}
ol.toc-list.open ol li ol li {
    font-size: 0.8em;
	list-style-type: circle;
}


/************************************
** 「カスタマイズ」に書いたCSS
************************************/
.label-box-content {
    margin-top: -0.9em;
    border-width: 1px;
    border-style: solid;
    border-color: #ebebeb !important;
    background-color: #fff!important;
    padding: 0.5em 0.4em;
    border-radius: var(--cocoon-middle-border-radius);
}

.header-container, .main, .sidebar, .footer {
    background-color: transparent;
}
/*チャンネル前説明の下部余白*/
p.ch-exp {
    padding-bottom: .5em!important;
}

.wp-block-cocoon-blocks-label-box-1.label-box.block-box.not-nested-style.cocoon-block-label-box {
    margin-bottom: -0.2em !important;
}

:root :where(.is-layout-constrained) > :first-child {
    margin-block-start: 2em;
}

.entry-title, .archive-title {
    font-size: 20px;
}

/*トグルボックスの文字寄せ*/
.toggle-button {
    text-align: left;
}
.toggle-wrap {
	margin-bottom:0.5em !important;
}
.wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained {
    margin-top: -1em;
}

span.ch-list-ch-number {
    background-color: #515f5d;
    border-radius: 3px;
    color: #eaedef;
    padding: 0.2em;
		margin-right:0.5em;
}
.ch-list-title{
	font-size:1.3em;
	padding:0.3em 0.3em;
	}
.ch-subtitle{
	font-size:0.8em;
}
@media screen and (max-width: 480px){
.ch-list-title{
	font-size:1.1em;
	}
	span.ch-list-ch-number {
		font-size:0.9em;
    padding: 0.2em;
}
}
/*ﾄｸﾞﾙﾎﾞｯｸｽのｱｲｺﾝ非表示*/
.toggle-button::before{display:none}


/*文字を小さくしたいときのスタイル*/
.em09{font-size:0.9em;}
.em08{font-size:0.8em;}
.em07{font-size:0.7em;}
.em06{font-size:0.6em;}
.em05{font-size:0.5em;}
/*文字を大きくしたいときのスタイル*/
.em11{font-size:1.1em;}
.em12{font-size:1.2em!important;}
.em13{font-size:1.3em;}
.em14{font-size:1.4em;}
.em15{font-size:1.5em;}


/*「H2」「H3」の背景*/
.article h2 {
    background-color: var(--wp--preset--color--ex-e);
}
.article h3 {
    background-color: var(--wp--preset--color--ex-e);
}
/*外部リンク右側アイコンの余白*/
.fa-external-link-alt:before {
    margin-right: 0.3em;
}

/************************************
** 行頭に「！」を付ける
************************************/
.aleart-1:before {
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f06a";
    margin-right: 0.3em;
    color:var(--cocoon-rakuten-room-color);
}

/************************************
** 編集リンク
************************************/
.post-edit-link {font-size:0.7em;margin-left:0.5em;}
.post-edit-link:hover {}

/************************************
** Loopsynth ボタンの色選択ブロック用
************************************/
/*オレンジ*/
.inline-button-red.select_ch {
    border-color: var(--wp--preset--color--luminous-vivid-orange);
    background-color: var(--wp--preset--color--luminous-vivid-amber);
	color: var(--wp--preset--color--luminous-vivid-amber);
	font-size:1.2em;
}
/*ライム*/
.inline-button-green.select_ch {
    border-color: #70cc04;
    background-color: #a7ff41;
	color: #a7ff41;
	font-size:1.2em;
}
/*グレー*/
.inline-button-black.select_ch {
    border-color: var(--cocoon-pallid-text-color);
    background-color: var(--cocoon-basic-border-color);
	color: var(--cocoon-basic-border-color);
	font-size:1.2em;
}
/*紫*/
.inline-button-white-blue.select_ch {
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--purple);
	background-color: #df9bf6;
	color: #df9bf6;
	font-size:1.2em;
}
/*青*/
.inline-button-blue.select_ch {
    border-color: var(--cocoon-blue-color);
    background-color: var(--wp--preset--color--pale-cyan-blue);
    color: var(--wp--preset--color--pale-cyan-blue);
	font-size:1.2em;
}
/*各色選択ボタン：共通のスタイル*/
[class*=inline-button-].select_ch {
    padding:0.1em 0.4em;
    border-radius:30px;
}
/*480px以下*/
@media screen and (max-width: 480px){
[class*=inline-button-].select_ch {
    padding:0.1em 0.5em;
    border-radius:30px;
}
}
/*ボタン色選択ブロックの説明テキスト*/
p.has-text-align-center.color-select-txt {
    margin-bottom: 0;
	font-size:0.8em;
	font-weight:bold;
}
/*ボタン色選択ブロックの囲み*/
.wp-block-cocoon-blocks-blank-box-1.blank-box.block-box.select-btn-box {
    border: 1px solid #515f5d;
	width: fit-content;
	margin:auto;
	padding:0.2em 0.5em;
}

h1.graybtnicn:before {
	content:url(/wp-content/themes/cocoon-child-master/img/G-B.svg);
	display:inline-block;
	width:1.5em;
	vertical-align:middle;
	line-height: 1em;
}
h1.limebtnicn:before {
	content:url(/wp-content/themes/cocoon-child-master/img/L-B.svg);
	display:inline-block;
	width:1.5em;
	vertical-align:middle;
	line-height: 1em;
}
h1.orangebtnicn:before {
	content:url(/wp-content/themes/cocoon-child-master/img/Y-B.svg);
	display:inline-block;
	width:1.5em;
	vertical-align:middle;
	line-height: 1em;
}
h1.bluebtnicn:before {
	content:url(/wp-content/themes/cocoon-child-master/img/B-B.svg);
	display:inline-block;
	width:1.5em;
	vertical-align:middle;
	line-height: 1em;
}
h1.purplebtnicn:before {
	content:url(/wp-content/themes/cocoon-child-master/img/P-B.svg);
	display:inline-block;
	width:1.5em;
	vertical-align:middle;
	line-height: 1em;
}

/*箇条書きの10個のパラメーター用*/
ol.wp-block-list.prm-10.has-ex-f-background-color.has-background {
    padding-left: 3em;
}

/************************************
** アイコンボックス
************************************/
.memo-box::before, .comment-box:before, .common-icon-box:before, .alert-box:before {
    font-family: "Font Awesome 5 free";
    font-size: 20px;
    position: absolute;
    line-height: 30px;
    top: 0%;
    margin-top: -1em;
    left: 10px;
    width: 30px;
    height: 30px;
    text-align: center;
    border: solid 2px #abb8c3;
    border-radius: 30px;
    padding: 0.1em;
    /*background: #fcfcfc;*/
    background: #ffffff;
}
.comment-box {
    background: #fefefe;
    border: 2px solid #abb8c3;
}
.memo-box:before {
    content: "\f303";
    color: #3ec29a;
    border-color: #3ec29a;
}
.memo-box, .comment-box, .common-icon-box {
    padding: 20px;
    border-radius: 4px;
    position: relative;
    display: block;
}
/*プロフィールボックスアイコンを手に*/
.profile-box:before {
    content: "\f0a6";
    content: "\f0eb";
	font-weight:normal;
	color:#ff9b00;
	background-color:#ffffff;
	border-color:#fe7b00;
}
/*プロフィールボックスの線と背景*/
.profile-box{
	border-color:#ffc997;
	background-color: #fffef7;
	}
/*アイコンボックス：警告アイコンの色と線の色*/
.alert-box:before{
	color: #ff8a86;
	border-color:#ff8a86 !important;
}
/*アイコンボックス：警告ボックスの背景色と線の色*/
.alert-box, .alert {
    background: #fcf8f8;
    border: 2px solid #e3b9b9;
}
/*アイコンボックス：情報アイコンの色と線の色*/
.information-box:before{
	color: #31b0ff;
	border-color:#87cefa !important;
}
/*アイコンボックス：情報ボックスの背景色と線の色*/
.information-box {
    background: #f7fafc;
    border: 2px solid #a6cadf;
}
/*アイコンボックス：メモボックスの背景色と線の色*/
.memo-box {
    background: #f6fbfa;
    border: 2px solid #98c6b8;
}

/*アイコンボックス：補足情報(クエスチョン)*/
.question-box, .question {
    background: #fffdf2;
    border: 1px solid #ebc600;
}
.question-box:before{
	color: #ebc600;
	border-color:#ebc600 !important;
}


/************************************
** snsシェア
************************************/
.sns-share-buttons a .button-caption {
    /*font-size: 16px;
    margin-left: 10px;*/
    display: none;
}
.sns-share.ss-col-4 a {
    width: auto;
    padding: 0 1em;
}


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

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

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