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

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


/************************************
** サイドバー見出しカスタマイズ
************************************/
.sidebar h3 {
  background: #A1D6E2;/*背景色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
  color: #fff;/*文字色*/
}

/************************************
** サイドバー背景色
************************************/

.sidebar {
	background: #F1F1F2;
}
/************************************
** 関連記事見出しカスタマイズ
************************************/
.related-entry-heading {
  background: #A1D6E2;/*背景色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
  color: #fff;/*文字色*/
}

/************************************
** 見出しのデフォルトをリセット
　　→カスタマイズ
************************************/
/* H2 */

.article h2{
	position: relative;
	background-color:#97C8C1;
	color:#fff;
}

.article h2:before,
.article h2:after {
	position: absolute;
	left: 0;
	width: 100%;
	content: '';
	border-top: 1px solid #fff;/*ライン：太さ・実線・色*/
}

.article h2:before {
	top: 3px;
}

.article h2:after {
	bottom: 3px;
}
 
/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #DAEBE9;/*背景色*/
border-left: solid 5px #97C8C1;/*左線（実線 太さ 色）*/	
}
 
/* H4 */
.article h4{
  /*線の種類（二重線）太さ 色*/
border-top:double 5px #97C8C1;	
  border-bottom: double 5px #97C8C1;
}
 
/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}
 
/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}

/************************************
** 目次
************************************/
.toc {
    border: 1px solid #BCBABE; /*全体の枠線の色*/
    font-size: 0.9em;
    line-height: 1.5;
    padding: 0;
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
	background: #FFF;
}
.toc-title {
    background: #BCBABE; /*目次タイトルの背景色*/
    color: #fff; /*目次タイトルの文字色*/
    font-size: 1.1em;
    text-align: center;
    padding: 6px 16px;
}
.toc-title::before {
        font-family: "Font Awesome 5 Free";
	content : "\f03a"; /* アイコンを変える場合はここを変更 */
	font-weight: 700;
    margin-right: 0.5em;
}
.toc-content {
    padding: 8px;
}
.toc ul li a, .toc ol li a {
    display: block;
    border-bottom: 1px dashed #BCBABE; /*h3以下の下側ボーダー*/
    margin-left: -20px;
    padding-left: 20px;
	color: #5E5F62;	
}
.toc ul.toc-list>li, .toc ol.toc-list>li {
    margin-top: 1em;
	color: #414444;
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
    border-bottom: 2px solid #BCBABE; /*h2の下側ボーダー*/

	color: #5E5F62; /*h2見出し*/
}
/************************************
** 外部＆内部ブログカード 説明文を非表示 
************************************/
.blogcard-snippet {
    display: none;
}

/************************************
** 記事の区切り線
************************************/
.border-partition .a-wrap:first-of-type {
    border-top: 1px solid transparent; /*一番上の線の色を透明にする*/
	padding-top:0px;
}
.border-partition .a-wrap {
  border-bottom: 2px dashed #C09567; /*区切り線の太さと種類と色*/
}

/* === 景品表示法対応 === */
/* Cocoon設定本文上のPR表記 */
.pr-label-l {
    border-top: 1px dotted #333; /* 上の点線 */
    border-bottom: 1px dotted #333; /* テキスト下の点線 */
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 13px; /* 文字サイズ */
    color: #333; /* 文字の色 */
    text-align: center; /* テキスト中央揃え */
    background: #fff;
    padding: 3px 0;
    margin-bottom: 2em;
}

/************************************
** ポチップ内外部リンクアイコン非表示
************************************/

 div.pochipp-box__btns a[target="_blank"]>span:last-of-type {
     display: none;
 }


/************************************
** 導入文囲み枠1
************************************/

.intro-box1 {
  border: solid 1px #F9C763;
  margin: 0 0 1em 0;
  border-radius: 2px;
  background: #fff;
  display: inline-block;	
}
.intro-box1 .box-title {
  font-size: 1.0em;
  background: #F9C763;
  padding: 1px 12px 1px 12px; /* 上 | 右 | 下 | 左 */
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.intro-box1 ul {
  position: relative;
 margin: 0;
  padding: 0 0.5em 0 0.5em;
  color: #6D6A6A;
  border: none;
  list-style-type: none;
}

.intro-box1 ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.3em;/* 上 | 右 | 下 | 左 */
}
.intro-box1 ul li:before {
  position: absolute;
  font-family:"Font Awesome 5 Free";
  content: "\f621";
  left : 0.7em;
  color: #F9C763;
  font-weight: bold;
font-size: 0.9em;
}

.intro-box1 ul li:last-of-type{
  border-bottom: none;
}

/************************************
** 囲み枠+リスト　くすみグリーン 
************************************/
.listbox1  {
  margin: 0;	
}

.listbox1 .list {
  border: solid 1px #93C16A;
  border-radius: 2px;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  display: inline-block;	
}

.listbox1 .list li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.listbox1 .list li:before {

  font-family: "Font Awesome 5 Free";
  font-weight: 900;	
	content: "\f14a";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: #93C16A;/*アイコン色*/
}

/************************************
** 囲み枠+リスト　ピンク 
************************************/
.listbox1-2  {
  margin: 0;	
}

.listbox1-2 .list {
  border: solid 1px #F597A5;
  border-radius: 2px;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  display: inline-block;	
}

.listbox1-2 .list li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.listbox1-2 .list li:before {

  font-family: "Font Awesome 5 Free";
  font-weight: 900;	
	content: "\f14a";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: #F597A5;/*アイコン色*/
}

/************************************
** 囲み枠+リスト　オレンジ
************************************/
.listbox1-3  {
  margin: 0;	
}

.listbox1-3 .list {
  border: solid 1px #f6ae54;
  border-radius: 2px;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  display: inline-block;	
}

.listbox1-3 .list li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.listbox1-3 .list li:before {

  font-family: "Font Awesome 5 Free";
  font-weight: 900;	
	content: "\f14a";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: #f6ae54;/*アイコン色*/
}



/************************************
** 囲み枠+リスト　くすみグリーン 
************************************/
.listbox2 .list {
  border: solid 1px #93C16A;
  border-radius: 2px;
  padding: 0.5em 1em 0.5em 2.0em; /* 上 | 右 | 下 | 左 */
  position: relative;
  display: inline-block;	
}

.listbox2 .list li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.listbox2 .list li:before {

  font-family: "Font Awesome 5 Free";
  font-weight: 900;	
	content: "\f00c";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: #93C16A;/*アイコン色*/
	font-size: 0.9em;
}




/************************************
** タイトル付き　囲み枠リスト
　　グリーン
************************************/

/*左上に背景色ありタイトル*/
.t_listA {
	padding:2.5em 0.5em 0.5em; /* ボックス内側余白 上・左右・下*/
	position:relative; /* 配置(ここを基準に)*/
	border: 1px solid #5BB3B5; /* ボックスの線 (太さ・種類・色)*/
	background-color:#FFF; /* ボックス背景色*/
}
.t_listA .box-title {
	background-color:#5BB3B5; /* タイトル背景色 */
	font-size: 1em;/* タイトル文字の大きさ */
	color: #fff ; /* タイトル文字色 */
	padding: 7px 12px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;/* 配置(ここを動かす) */
	top: 0; /*上からの距離*/
	left: 0; /*左からの距離*/
	font-weight: bold;	
}

.t_listA ul {
  position: relative;
 margin: 0;
  padding: 0 0.5em 0 0.5em;
  color: #6D6A6A; /*箇条書きのテキスト色*/
  border: none;
  list-style-type: none;
}

.t_listA ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.6em;
}
.t_listA ul li:before {
  position: absolute;
  font-family:"Font Awesome 5 Free";
  content: "\f14a";
  left : 0.7em;
  color: #5BB3B5;
  font-weight: bold;		
}

.t_listA ul li:last-of-type{
  border-bottom: none;
}

/************************************
** タイトル付き囲み枠+リスト 
************************************/

.t_listB-1 {
  margin: 5px 0 10px 0;
  display: inline-block;	
}
.t_listB-1 .title {
  display: inline-block;
  padding: 1px 10px 0 10px;
  background: #E8A5B7;
  color: #fff;
  letter-spacing: 0.1em;
  font-weight: bold;
}
.t_listB-1 ul {
  position: relative;
  border: solid 2px #E8A5B7;
  margin: 0;
  padding: 0;
}

.t_listB-1 ul li  {
  color: #646766;
  line-height: 1.5;
  padding: 0.5em 0.9em 0.5em 1.8em;
  border-bottom: dashed 1px #E8A5B7;
  list-style-type: none;

}
.t_listB-1 ul li:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  left : 0.5em;
  color: #E8A5B7;
  font-weight: bold;		
}

.t_listB-1 ul li:last-of-type{
  border-bottom: none;
}

/************************************
** 囲み枠+リスト+タイトル　green 
************************************/

.t_listB-2 {
  margin: 5px 0 10px 0;
  display: inline-block;	
}
.t_listB-2 .title {
  display: inline-block;
  padding: 1px 10px 0 10px;
  background: #87CEEB;
  color: #fff;
  letter-spacing: 0.1em;
  font-weight: bold;
}
.t_listB-2 ul {
  position: relative;
  border: solid 2px #87CEEB;
  margin: 0;
  padding: 0;
}

.t_listB-2 ul li  {
  color: #646766;
  line-height: 1.5;
  padding: 0.5em 0.9em 0.5em 1.8em;
  border-bottom: dashed 1px #87CEEB;
  list-style-type: none;

}
.t_listB-2 ul li:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  left : 0.5em;
  color: #87CEEB;
  font-weight: bold;		
}

.t_listB-2 ul li:last-of-type{
  border-bottom: none;
}

/************************************
** 囲み枠　左右二重線
************************************/

.Abox1{
    padding: 0.5em 1em;
    margin: 0 auto 2em;
    color: #474747;
    background: whitesmoke;/*背景色*/
    border-left: double 7px #4ec4d3;/*左線*/
    border-right: double 7px #4ec4d3;/*右線*/
  display: inline-block;
}

/************************************
** 破線囲み枠+リスト くすみピンク
************************************/


.listbox-dashed1 {
  color: #333333;/*文字色*/
  border: dashed 2px #da81b2;/*破線 太さ 色*/
  background: #fff; /*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;
  display: inline-block;	
}

.listbox-dashed1 li {
  line-height: 1;
  padding: 0.5em 0;
}

/* リストの点*/
.listbox-dashed1 {
	list-style: none!important;
  line-height:1.2;/*行の高さ*/
}

.listbox-dashed1 > li{ 
	position: relative;/*ここを基準に*/
}

.listbox-dashed1 > li:before {
	background-color: #da81b2;/*色はここで変更*/
	position: absolute;/*ここを動かす*/
	content: '';
	width: 7px;/*円の幅*/
	height: 7px;/*円の高さ*/

	top:14px;/*高さの位置調整*/
	left: -1em;/*左側位置調整*/
	border-radius: 50%;
}

/************************************
** 破線囲み枠+リスト グレー
************************************/

.listbox-dashed1-2 {
  color: #333333;/*文字色*/
  border: dashed 2px #7d7d7d;/*破線 太さ 色*/
  background: #fff; /*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;
  display: inline-block;	
}

.listbox-dashed1-2 li {
  line-height: 1;
  padding: 0.5em 0;
}

/* リストの点*/
.listbox-dashed1-2 {
	list-style: none!important;
  line-height:1.2;/*行の高さ*/
}

.listbox-dashed1-2 > li{ 
	position: relative;/*ここを基準に*/
}

.listbox-dashed1-2 > li:before {
	background-color: #7d7d7d;/*色はここで変更*/
	position: absolute;/*ここを動かす*/
	content: '';
	width: 7px;/*円の幅*/
	height: 7px;/*円の高さ*/

	top:14px;/*高さの位置調整*/
	left: -1em;/*左側位置調整*/
	border-radius: 50%;
}


/************************************
** 順序付きリスト+囲み枠
************************************/
.numlistbox1 {
margin: 0;	
}
.numlistbox1 ol {
  border: solid 2px #93C16A;
  padding: 0.3em 0.5em;
  position: relative;
  display: inline-block;
  list-style-type: none;
}
.numlistbox1 ol {
  counter-reset: number;
}
.numlistbox1 ol li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;

}

.numlistbox1 ol li:before {
  display: inline-block;
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #93C16A;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
.numlistbox1 ol li:last-of-type{
  border-bottom: none;
}

/************************************
** 順序付きリスト+囲み枠
************************************/
.numlistbox2 {
margin: 0;	
}
.numlistbox2 ol {
  border: solid 2px #F597A5;
padding: 0.3em 0.5em;
  position: relative;
  display: inline-block;
  list-style-type: none;
}
.numlistbox2 ol {
  counter-reset: number;
}
.numlistbox2 ol li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;

}

.numlistbox2 ol li:before {
  display: inline-block;
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #F597A5;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
.numlistbox2 ol li:last-of-type{
  border-bottom: none;
}



/************************************
** Amazon・楽天・Yahoo!バッジ 長方形
************************************/
.badge77 {
    display: inline-block;
    color: #fff;
    padding: 0.2rem 0.3rem;
    border-radius: 0.1rem;
    font-size: 0.8rem;
    text-transform: none;
    text-align: center;
    white-space: nowrap;
	font-weight: bold;
	vertical-align: 4px;
}

.bg-amazon {
    background-color: #FF9900;
}

.bg-rakuten {
    background-color: #BF0000;
}

.bg-yahoo {
    background-color: #FF0033;
}

/************************************
** テストテーブル
************************************/
/************************************
** 横長テーブル
************************************/
.scrolltable1{
	white-space: nowrap;

}
.scrolltable1 table{
	border-collapse: collapse;
	word-break: break-all;
	table-layout: fixed;
	display:block;
	overflow:scroll;
}

.scrolltable1 thead th {
	border: 1px solid #ADA99A;
	text-align:center;
}
.scrolltable1 tbody th {
  text-align:center;
	border: 1px solid #ADA99A;	
}
.scrolltable1 td {
	border: 1px solid #ADA99A;
	font-size: 16px;
	text-align:center;
		padding: 5px;
}
.scrolltable1 th{
	background:#BBB7A5 ;
	letter-spacing: 1px;
	font-weight: 600 ;
	color: #FFF ;
}

.scrolltable1 tr:nth-child(odd) td {  
  background-color: #f7f6f5;  
}
.scrolltable1 tr:nth-child(even) td {  
  background-color: #fff;  
}


/* スマホ */
@media screen and (max-width: 560px) {
	.scrolltable1 table {
		max-height: 60vh;
  	}
	.scrolltable1 thead th:first-child, .p-sticky-table tbody th:first-child {
    		min-width: 25vw;
  	}
 	.scrolltable1 th, .scrolltable1 td {
    		font-size: 12px !important;
    		padding: 7px !important;
  	}
}

/************************************
** レスポンシブテーブル　
　wpcのizaを女性が使う
************************************/
.table100 {
	width:100%;
	border-right:#ADA99A solid 1px;
	border-collapse: collapse;
}
.table100 thead th {
	background:#BBB7A5;
	color:#FFF;
	padding:10px 15px;
	border-right:#FFF solid 1px;
	border-bottom:#FFF solid 1px;
}
.table100 thead th:last-child {
	border-right:#ADA99A solid 1px;
}
.table100 tbody th {
	background:#BBB7A5;
	color:#FFF;
	padding:10px 15px;
	border-bottom:#FFF solid 1px;
	vertical-align:top;
}
.table100 tbody tr:last-child th {
	border-bottom:#ADA99A solid 1px;
}
.table100 tbody td {
	background:#FFF;
	padding:10px 15px;
	border-left:#ADA99A solid 1px;
	border-bottom:#ADA99A solid 1px;
	vertical-align:top;
}
.table100 td {
  border: 1px solid #ADA99A;
  border-collapse: collapse;
}
.table100 .highlight{
    background: #fff799 ;
}


/************************************
** テーブル　

************************************/
.table200 {
	width: auto;
	border-right:#ADA99A solid 1px;
	border-collapse: collapse;
}
.table200 thead th {
	background:#BBB7A5;
	color:#FFF;
	padding:10px 15px;
	border-right:#FFF solid 1px;
	border-bottom:#FFF solid 1px;
}
.table200 thead th:last-child {
	border-right:#ADA99A solid 1px;
}
.table200 tbody th {
	background:#BBB7A5;
	color:#FFF;
	padding:10px 15px;
	border-bottom:#FFF solid 1px;
	vertical-align:top;
}
.table200 tbody tr:last-child th {
	border-bottom:#ADA99A solid 1px;
}
.table200 tbody td {
	background:#FFF;
	padding:10px 15px;
	border-left:#ADA99A solid 1px;
	border-bottom:#ADA99A solid 1px;
	vertical-align:top;
}
.table200 td {
  border: 1px solid #ADA99A;
  border-collapse: collapse;

}





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

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

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