@charset "UTF-8";

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

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






.box3-pink {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #f27398;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box3-pink .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #f27398; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box3-pink p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

.box3-blue {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #0e7ac4;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box3-blue .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #0e7ac4; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box3-blue p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}




.box3-red {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #ff0000;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box3-red .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #ff0000; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box3-red p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}


/*--------------------------
①横スクロールなしのものを作成する
-----------------------*/
.top-table {
    table-layout: fixed;
    border-collapse:separate !important;
    border-spacing: 2px; /* 隙間のサイズを指定 */
    font-size: 14px;
    border: 1px solid #cbcbcb;
    white-space: nowrap !important;
}
  
.table-title th{
    background-color: #01937F !important;
    color: #fff;
    left: 0;
    font-weight: 700;
    border: 1px solid #cbcbcb;
    z-index: 1;
}
  
.table-title,.table-item{
    padding: 20px !important;
}
  
.item-left{
    background-color: #FDF9EE !important;
    font-weight: 700;
    width: 30% !important; /* 適切な幅に調整してください */
    text-align: center;
}
  
.double-border{
    border: 1px solid #cbcbcb;
    padding: 10px 3px !important;
    white-space: normal;
    /* 他のスタイルプロパティ */
}
  
.table-item {
    border-collapse: separate !important;
    border-spacing: 2px !important; /* 隙間のサイズを指定 */
}
  
.double-border {
    border: 1px solid #cbcbcb;
    padding: 10px 3px !important;
}
/*--------------ここまで--------------------------*/

/*--------------------------
②上部の見出し無しのものを作成する
-----------------------*/
.top-table {
    table-layout: fixed;
    border-collapse:separate !important;
    border-spacing: 2px; /* 隙間のサイズを指定 */
    font-size: 14px;
    border: 1px solid #cbcbcb;
    white-space: nowrap !important;
}
  
.table-title th{
    background-color: #01937F !important;
    color: #fff;
    left: 0;
    font-weight: 700;
    border: 1px solid #cbcbcb;
    z-index: 1;
}
  
.table-title,.table-item{
    padding: 20px !important;
}
  
.item-left{
    background-color: #FDF9EE !important;
    font-weight: 700;
    width: 30% !important; /* 適切な幅に調整してください */
    text-align: center;
}
  
.double-border{
    border: 1px solid #cbcbcb;
    padding: 10px 3px !important;
    white-space: normal;
    /* 他のスタイルプロパティ */
}
  
.table-item {
    border-collapse: separate !important;
    border-spacing: 2px !important; /* 隙間のサイズを指定 */
}
  
.double-border {
    border: 1px solid #cbcbcb;
    padding: 10px 3px !important;
}
  
@media (max-width: 600px) {
    .table2 td {
      display: block;
      width: 100% !important;
    }
  
    .table2 td:not(.item-left) {
      border-top: 1px solid #cbcbcb; /* 上側の境界線を設定 */
    }
}
/*--------------ここまで--------------------------*/

/*--------------------------
③横スクロールありのものを作成する
-----------------------*/

.scrollable-table-container {
    overflow-x: auto;
}
  
.scroll-top-table2{
    width: max-content;
    white-space: nowrap;
    border-collapse:collapse !important;
    border-spacing: 0; /* 隙間のサイズを指定 */
    font-size: 14px;
    border: 1px solid #cbcbcb;
    width: 100%;
  }

.item-left_scroll{
    background-color: #FDF9EE !important;
    font-weight: 700;
    width: 500px !important; /* 適切な幅に調整してください */
    text-align: center;
    padding: 10px 20px !important;
}
  
.double-border_plus_scroll{
    border: 1px solid #cbcbcb;
}

.table-title th{
    background-color: #01937F !important;
    color: #fff;
    left: 0;
    font-weight: 700;
    border: 1px solid #cbcbcb;
    z-index: 1;
}
  
.table-title,.table-item{
    padding: 20px !important;
}

.double-border_plus{
    border: 1px solid #cbcbcb;
    padding: 10px !important;
}

.table-item {
    border-collapse: separate !important;
    border-spacing: 2px !important; /* 隙間のサイズを指定 */
}
/*--------------ここまで--------------------------*/

/*--------------------------
修正版④横スクロールありのもの（一列目固定）を作成する
-----------------------*/

.scrollable-table-container {
    overflow-x: auto;
}
  
.scroll-top-table2{
    width: max-content;
    white-space: nowrap;
    border-collapse:collapse !important;
    border-spacing: 0; /* 隙間のサイズを指定 */
    font-size: 14px;
    border: 1px solid #cbcbcb;
    width: 100%;
}

.item-left_scroll{
    background-color: #FDF9EE !important;
    font-weight: 700;
    width: 500px !important; /* 適切な幅に調整してください */
    text-align: center;
    padding: 10px 20px !important;
}
  
.double-border_plus_scroll{
    border: 1px solid #cbcbcb;
}

.table-title th{
    background-color: #01937F !important;
    color: #fff;
    left: 0;
    font-weight: 700;
    border: 1px solid #cbcbcb;
    z-index: 1;
}
  
.table-title,.table-item{
    padding: 20px !important;
}

.item-left2{
    background-color: #FDF9EE !important;
    font-weight: 700;
    position: sticky;
    left: 0;
    padding: 10px 20px !important;
    width: 500px !important; /* 適切な幅に調整してください */
}

.double-border_plus2{
    border: 1px solid #cbcbcb;
    padding: 10px;
  }

.double-border_plus{
    border: 1px solid #cbcbcb;
    padding: 10px !important;
}

.table-item {
    border-collapse: separate !important;
    border-spacing: 2px !important; /* 隙間のサイズを指定 */
}

/*--------------ここまで--------------------------*/


/*--------------------------
修正版⑤修正版枠線が2重線（一列目固定）を作成する
-----------------------*/

.scrollable-table-container {
    overflow-x: auto;
}
  
.scroll-top-table2-doubleline{
    width: max-content;
    white-space: nowrap;
    border-collapse:separate !important;
    border-spacing: 2px; /* 隙間のサイズを指定 */
    font-size: 14px;
    border: 1px solid #cbcbcb;
    width: 100%;
}

.item-left_scroll{
    background-color: #FDF9EE !important;
    font-weight: 700;
    width: 500px !important; /* 適切な幅に調整してください */
    text-align: center;
    padding: 10px 20px !important;
}
  
.double-border_plus_scroll{
    border: 1px solid #cbcbcb;
}

.table-title th{
    background-color: #01937F !important;
    color: #fff;
    left: 0;
    font-weight: 700;
    border: 1px solid #cbcbcb;
    z-index: 1;
}
  
.table-title,.table-item{
    padding: 20px !important;
}

.item-left2{
    background-color: #FDF9EE !important;
    font-weight: 700;
    position: sticky;
    left: 0;
    padding: 10px 20px !important;
    width: 500px !important; /* 適切な幅に調整してください */
}

.double-border_plus2{
    border: 1px solid #cbcbcb;
    padding: 10px;
  }

.double-border_plus{
    border: 1px solid #cbcbcb;
    padding: 10px !important;
}

.table-item {
    border-collapse: separate !important;
    border-spacing: 2px !important; /* 隙間のサイズを指定 */
}

/*--------------ここまで--------------------------*/

/*--------------------------
②上部の見出し無しのものを作成する（スマホ画面でも反転しないもの）
-----------------------*/
.top-table {
    table-layout: fixed;
    border-collapse:separate !important;
    border-spacing: 2px; /* 隙間のサイズを指定 */
    font-size: 14px;
    border: 1px solid #cbcbcb;
    white-space: nowrap !important;
}
  
.table-item{
    padding: 20px !important;
}
  
.item-left{
    background-color: #FDF9EE !important;
    font-weight: 700;
    width: 30% !important; /* 適切な幅に調整してください */
    text-align: center;
}
  
.double-border{
    border: 1px solid #cbcbcb;
    padding: 10px 3px !important;
    white-space: normal;
    /* 他のスタイルプロパティ */
}
  
.table-item {
    border-collapse: separate !important;
    border-spacing: 2px !important; /* 隙間のサイズを指定 */
}
  
.double-border {
    border: 1px solid #cbcbcb;
    padding: 10px 3px !important;
}

/*--------------ここまで--------------------------*/




/************************/
/*目次デザイン*/
/************************/
/* 目次全体枠 */
.toc{
border-top:5px solid; color:#839b5c;
padding: 20px;
}
/* 目次アイコン */
.toc-title:before {
width: 40px;
height: 40px;
font-family: "Font Awesome 5 Free";
content: '\f03a';
font-size:18px;
margin-right:8px;
color:#FFF;
background-color:#839b5c;
border-radius: 50%;
padding:10px;
}
/* 目次の文字 */
.toc-title {
text-align:left;
font-size: 20px;
font-weight: 600;
color: #839b5c;
}
/*見出し2（H2）の設定*/
.toc-content > .toc-list > li:before { 
font-family: "Font Awesome 5 Free";
content: '\f35a';
font-weight: 900;
color: #839b5c;
padding-right:8px;
}
.toc-content .toc-list li {
font-weight:600;
}
/*H3以降の文字サイズ*/
.toc-content .toc-list li li {
font-weight:normal;
}



	
.box5-yellow {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 2em 2em 1.7em;	/* ボックスの内側余白(上:2em　左右:2em 下：1.7em) */
	border: 1px solid #fdc44f;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
	background: #fef9ed;/* ボックス背景色 */
}
.box5-yellow .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -18px; /* 上から（-18px）移動*/
	left: 27px; /* 左から(27px)移動 */
	background: #fdc44f; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	padding: 0.6em 1em;/* タイトルの内側余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 17px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
	border-radius:4px;/* タイトルの角丸 */
}
.box5-yellow p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}


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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  .article h1{
    font-size: 20px !important;
}	  
}

/*480px以下*/
@media screen and (max-width: 480px){
  .article h2{
    font-size: 20px !important;
}	  
}