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

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

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

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

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

/************************************
** 自分で設定したCSS
************************************/

/*　reCAPTCHAロゴ非表示　*/
.grecaptcha-badge { visibility: hidden; }

/*　プロフィール調整　*/
.author-box .author-name {
    margin: 1em 0;
}
.author-box .author-name {
    font-size: 1em;
}

/*　プロフィール頭上吹き出し　*/
.author-widget-name {
    position: relative;
    display: inline-block;
    background-color: rgba(var(--primary-color), 1);
    padding: 1em;
    color: rgba(var(--black-color), 1);
    font-size: 13px;
    margin-bottom: 5px;
}

/*--------------------------------- 
ピンク数字リスト 
--------------------------------*/
.list-5{
    counter-reset:number; 
    list-style-type: none; 
    padding:0;
    margin:0;
 }
 .list-5 li { 
    position: relative;
    margin:1em auto 1em 10px !important;
    padding-left: 1.7em;
    padding-top: 0.2em;
 }
 .list-5 li:before {
    counter-increment: number;
    content: counter(number);
    background-color: #ED9D9D; /* 文字背景色 */
    color: #fff; /*文字色*/
    position: absolute;
    font-weight:bold;
    font-size: 14px;
    border-radius: 50%;
    left: 0;
    top: 0.5em;
    width: 1.6em;
    height: 1.6em;
    line-height: 1.6;
    text-align: center;
 } 

@media screen and (max-width: 768px) {
  .article .list-5 { 
    padding-left: 0px; /* スマホ時の .list-5 の余白リセット */
  }
}

/*--------------------------------- 
オレンジ数字リスト 
--------------------------------*/
.list-6{
    counter-reset:number; 
    list-style-type: none; 
    padding:0;
    margin:0;
 }
 .list-6 li { 
    position: relative;
    margin:1em auto !important;
    padding-left: 1.7em;
    padding-top: 0.2em;
 }
 .list-6 li:before {
    counter-increment: number;
    content: counter(number);
    background-color: #f195068a; /* 文字背景色 */
    color: #fff; /*文字色*/
    position: absolute;
    font-weight:bold;
    font-size: 14px;
    border-radius: 50%;
    left: 0;
    top: 0.5em;
    width: 1.6em;
    height: 1.6em;
    line-height: 1.6;
    text-align: center;
 } 

@media screen and (max-width: 768px){
  .article .list-6 { 
    padding-left: 0px; /* スマホ時の .list-5 の余白リセット */
  }
}

/*--------------------------------- 
シンプルなリストボックス
--------------------------------*/

 /* 外枠の設定 */
.list-box-20{
	background: #fff;/* 背景色 */
	border-radius: 4px;
	max-width: 600px;
	padding: 2em 2em 0 2em;
	margin: 0 auto 2em auto;
	border:1px solid;
	border-color:#cdcdcd; /* 線の色 */
}

@media screen and (max-width: 834px) {
  .article .list-box-20 ul,
  .article .list-box-20 ol {
    padding-left: 0px;
  }
}

 /* 中のリストの設定 */
.list-20{
   list-style: none;
   padding:0;
   margin:0;
}

ol.list-20 {
   margin-bottom: 2em;
}

.list-20 li { 
   border-bottom:2px dotted;
   border-color:#cdcdcd; /* 線の色 */
   position: relative;
   margin: 0.5em 0 !important;
   max-width:500px; /* 横幅 */
   padding-left: 25px;
	 padding-bottom: 0.5em;
}
.list-20 li:last-child{ 
   border:none;
}
.list-20 li:before {
	font-family: "Font Awesome 5 Free";
	content: "\f14a"; /*アイコン*/
	font-weight: 900;  /* アイコンを太字に */
	color:  #f195068a; /* 色 */
	position: absolute;
	left:0;
}

/*--------------------------------- 
文章の前のチェックマーク
--------------------------------*/
.pink-checkmark::before {
  content: "\f14a";  /* FontAwesomeのチェックマーク */
  font-family: "Font Awesome 5 Free";  /* FontAwesomeのフォントを指定 */
  font-weight: 900;  /* アイコンを太字に */
  color: #ED9D9D;  /* チェックマークの色 */
  font-size: 1.2em;  /* サイズ調整 */
  margin-right: 8px;  /* 文章との間にスペース */
  display: inline-block;
}

.orange-checkmark::before {
  content: "\f14a";  /* FontAwesomeのチェックマーク */
  font-family: "Font Awesome 5 Free";  /* FontAwesomeのフォントを指定 */
  font-weight: 900;  /* アイコンを太字に */
  color: #f195068a;  /* チェックマークの色 */
  font-size: 1.2em;  /* サイズ調整 */
  margin-right: 8px;  /* 文章との間にスペース */
  display: inline-block;
}

/*--------------------------------- 
リストの改行を少しあける
--------------------------------*/
.article ul li, 
.article ol li {
    margin-bottom: 1em; /* 既存の 0.2em を上書き */
}

/*--------------------------------- 
リストのスマのでの左インデント調整
--------------------------------*/
/* アイコン付きリスト用 */
@media screen and (max-width: 767px) {
  .article ul.wp-block-list.has-list-style,
  .article ol.wp-block-list.has-list-style {
    padding-left: min(3%, 24px);
  }
}

/*--------------------------------- 
リストアイコンの色変更
--------------------------------*/
/* チェックマーク */
ul.is-style-icon-list-check > li::before {
  color: #ED9D9D; /* ピンク */
  font-weight: bold !important;
}

/* 四角の中のチェックマーク */
ul.is-style-icon-list-check-valid > li::before {
  color: #ED9D9D; /* ピンク */
}

/* 丸数字 */
ul.is-style-numeric-list-enclosed > li::before {
  background-color: #f195068a; /* 黄色 */
}

/*--------------------------------- 
タイトル入のボックスのタイトル下の空き調整
--------------------------------*/
.blank-box p.has-text-align-center {
  padding-top: 1em;
  margin-bottom: 0.5em;
}

/*--------------------------------- 
タイトル入のボックスの上の空き調整
--------------------------------*/
.blank-box.bb-tab {
    margin-top: 3em;
}

/*--------------------------------- 
目次リストの空き調整
--------------------------------*/

#toc ol li {
  margin-bottom: 0.2em; /* または 0 にしてもOK。好みに応じて調整可 */
}

.toc .toc-list ul, .toc .toc-list ol {
    padding-left: 1.5em;
    margin: 0;
}

/*--------------------------------- 
目次リストの前を中黒に
--------------------------------*/

.toc-list > li > ol li a:before {
  width: 6px;
  height: 6px;
  background-color: rgba(var(--primary-color), 1); /* 緑色の塗りつぶし */
  border: none;/* 枠を消す */
  border-radius: 50%;/* 丸く保つ */
  top: 0.8em;/* 表示位置は元のまま調整OK */
  left: -10px;/* 必要に応じて微調整 */
  content: '';
  display: inline-block;
  position: absolute;
}

/* スマホ向け */
@media (max-width: 767px) {
.toc-list > li > ol li a:before {
top: 1.2em; /* スマホ用に微調整 */
  }
}

/* タブレット向け（iPad縦〜横） */
@media (min-width: 768px) and (max-width: 1024px) {
.toc-list > li > ol li a:before {
top: 1.2em; /* タブレット用に微調整 */
  }
}

/*--------------------------------- 
youtubeショートを縦型に
--------------------------------*/
.youtube_short iframe {
  position: relative;
  aspect-ratio:9 /16; /* ビデオの横/縦比 */
}

.youtube_short .video {
  height: 100%;
  margin: 0 auto;
  overflow: visible;
  padding-bottom: 0;
  width: 300px;   /* ビデオ横幅 */
}

/*--------------------------------- 
固定ページの更新日を非表示
--------------------------------*/
.post-8 .date-tags, /* お問い合わせ */
.post-815 .date-tags, /* プライバシーポリシー */
.post-820 .date-tags /* 運営者情報 */ {
display: none;
}

/*--------------------------------- 
固定ページのSNSボタンを非表示
--------------------------------*/
.page-id-8 .sns-share, /* お問い合わせ */
.page-id-8 .sns-follow,
.page-id-815 .sns-share, /* プライバシーポリシー */
.page-id-815 .sns-follow,
.page-id-820 .sns-share, /* 運営者情報 */
.page-id-820 .sns-follow {
display: none;
}

/*--------------------------------- 
タイムライン
--------------------------------*/
.timeline-item-title {
    font-weight: 700;
    font-size: 1em;
}

.timeline-title {
    font-weight: 700;
    font-size: 1em;
}

@media screen and (max-width: 480px) {
	.timeline-item::before {
		left: -9px;
		top: 24px;
		width: 15px;
		height: 15px;
	}
}

@media screen and (max-width: 480px) {
	.timeline-box .timeline {
		padding-left: 20px;
	}
}

@media screen and (max-width: 480px) {
	.timeline-item-content {
		padding: 8px 10px 8px 8px;
	}
}

/*--------------------------------- 
引用
--------------------------------*/
 /* 参考元 */
.reference-link {
    display: block;
    margin-bottom: 2em;
    font-style: normal;
    font-size: 0.8em;
}

 /* 引用 */
.wp-block-quote.wp-block-quote-is-layout-flow {
    position:relative;
    border:1px solid #8BC0B8;
    border-radius:10px;
    padding: 2em !important;
}

.wp-block-quote.wp-block-quote-is-layout-flow p {
    padding: 0 !important;
}

.wp-block-quote:before{
    position:absolute;
    font-family:'FontAwesome';
    content:'\f10d';
    font-size: 20px;
    color:#8BC0B8;
    top:10px;
    left:10px;
}
.wp-block-quote:after{
    position:absolute;
    font-family:'FontAwesome';
    content:'\f10e';
    font-size: 20px;
    color:#8BC0B8;
    right:10px;
    bottom:10px;
}
.wp-block-quote cite {
    display: block;
    font-size: 0.8rem;
	font-style: normal;
    text-align: right;
    color: #D4DED7;
    padding-right:20px;
}

.wp-block-quote.wp-block-quote-is-layout-flow p {
    padding: 0 !important;
}
.wp-block-quote.wp-block-quote-is-layout-flow {
    padding: 2em !important;
}

/*--------------------------------- 
カスタムテキスト
--------------------------------*/
.cocoon-custom-text-1{
	color: #fcb900;
}
.cocoon-custom-text-2{
	color: #f78da7;
}