@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; /* 文字の内側余白リセット*/
}



/************************/
/*目次デザイン*/
/************************/
/* 目次全体枠 */
.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; /* 文字の内側余白リセット*/
}





/*-------左の列背景薄い文字サイズ小さい比較表-------------------*/
.table-scroll-middle {
	overflow:auto;
}

.table-scroll-middle td {
font-size:12px;
}

.table-scroll-middle table tr td:nth-of-type(1) {
    background-color: #e9f0f7;
    position: sticky;
    left: 0;
    border: 1px solid #d9d9d9;
}
.table-scroll-middle table tr:nth-of-type(2n+1) {
    background-color: #fafbfc;
}
.table-scroll-middle table tr th:nth-of-type(1) {
	position: sticky;
    left: 0;
    background-color: #f5f6f7;
    border: 1px solid #eee;
}
.table-scroll-middle table tr th {
    background-color: #f5f6f7;
    color: #333;
}


	

/*********************************
* タイムライン
*********************************/
.timeline-box {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 16px 5px;
  box-sizing: border-box;
}
 
.timeline-box *{
  box-sizing: border-box;
}
 
.timeline-box .timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.timeline-title {
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
}
 
.timeline > li {
  margin-bottom: 60px;
}
 
.timeline > li.timeline-item {
  overflow: hidden;
  margin: 0;
  position: relative;
}
 
.timeline-item-label {
  width: 110px;
  float: left;
  padding-top: 18px;
  text-align: right;
  padding-right: 1em;
  font-size: 14px;
}
 
.timeline-item-title {
  font-weight: bold;
}
 
.timeline-item-content {
  width: calc(100% - 110px);
  float: left;
  padding: .8em 1.4em;
  border-left: 3px #e5e5d1 solid;
}
 
.timeline-item:before {
  content: '';
  width: 12px;
  height: 12px;
  background: #6fc173;
  position: absolute;
  left: 105px;
  top: 24px;
  border-radius: 100%;
}
 
/* for Smartphone */
@media screen and (max-width: 480px) {
  .timeline-box .timeline {
    padding-left: 10px;
  }
 
  .timeline > li.timeline-item {
    overflow: visible;
    border-left: 3px #e5e5d1 solid;
  }
 
  .timeline-item-label {
    width: auto;
    float: none;
    text-align: left;
    padding-left: 16px;
  }
 
  .timeline-item-content {
    width: auto;
    padding: 8px;
    float: none;
    border: none;
  }
 
  .timeline-item::before {
    left: -12px;
    top: 19px;
    width: 21px;
    height: 21px;
  }
}


.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; /* 文字の内側余白リセット*/
}
/*640px以下*/
@media screen and (max-width: 640px){
  .box3-blue,.box3-pink  {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:100%; /* ボックスの横幅 */
	margin: 1em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.5em 1em;	/* ボックスの内側余白(上下:1.5em　左右:1em) */
	}
	.box3-pink .box-title,.box3-blue .box-title {
		font-size: 18px;
	}
}



.sidebar h3 {
    background: none;
    font-size: 14px;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%; /*ラインの長さ*/
    border-top: 3px solid #444d53; /*ラインの色*/
}
.sidebar h3::before {
    left: 0;
}
.sidebar h3::after {
    right: 0;
}


.table-scroll{overflow:auto;-webkit-overflow-scrolling:touch}
}




/*--------------------------
①横スクロールなしのものを作成する
-----------------------*/
.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;
}

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



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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;
}	  
}