@charset "UTF-8";

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

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


/*****************************
/***** ナビゲーションバーデザイン
/*****************************/
#navi .item-label {
    font-weight: bold;
}

/*****************************
/***** エントリーカードデザイン
/*****************************/

/* マウスオーバーでふわっと浮かせる */
a.entry-card-wrap:hover {
    box-shadow: 0 10px 20px -5px rgba(0,0,0,.2);
}

/************************************
** サイドバーデザイン
************************************/
.sidebar{
	padding: 0px;
	border: 0px;
}

.sidebar h3 {
    background-color: #ffc9b0;
    margin: 0px;
	color: #FFF;
}

/*****************************
/***** ボックスデザイン
/*****************************/
/* 角四角のボックスデザイン */
.box_square {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: solid 1px;
}
.box_square p {
    margin: 0; 
    padding: 0;
}

/* 角丸のボックスデザイン */
.box_circle {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box_circle p {
    margin: 0; 
    padding: 0;
}

/* 破線のボックスデザイン */
.box_broken_line {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: dashed 2px;/*点線*/
}
.box_broken_line p {
    margin: 0; 
    padding: 0;
}

/*****************************
/***** ボーダーカラーデザイン
/*****************************/
.border_color_glay{
	border-color:#C0C0C0; /* グレー */
}

.border_color_ligthblue{
	border-color:#D7E6EF; /* 薄い青 */
}
.border_color_ligthblue2{
	border-color:#aec4e5; /* 薄い青 */
}

.border_color_pink{
	border-color:#FFB2AE; /* ピンク */
}

.border_color_orange{
	border-color:#F68655; /* オレンジ */
}

.border_color_lightyellow{
	border-color:#fddea5; /* 薄い黄色 */
}

/*****************************
/***** リストデザイン
/*****************************/
/* チェックのリスト */
.check_icon_list {
  padding: 0 0.5em;
  position: relative;
}

.check_icon_list li {
  padding: 0.2em 0 0.5em 1.2em;
  list-style-type: none!important;
}

.check_icon_list li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
}

/* 区切り線付きのリスト */
.separate_line_list li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
}

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

/* 付箋風のリスト */
.tagstyele_list, ol {
  padding: 0;
}

.tagstyele_list li, tagstyele_list ol li {
  color: #404040;
  border-left: solid 6px #1fa67a;/*左側の線*/
  border-bottom: solid 2px #dadada;/*下に灰色線*/
  background: whitesmoke;
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5;
  padding: 0.5em;
  list-style-type: none!important;/*ポチ消す*/
  font-weight: bold;
}

/* リスト構造 */
.good_bad_list {
	padding: 0em 0em 0em 2.3em;
	position: relative;
}
.good_bad_list li{
	line-height: 1.5;
	padding: 0.2em 0;
	list-style-type: none!important;/*ポチ消す*/
	  border-bottom: dashed 1px silver;
}
.good_bad_list li:last-of-type {
  border-bottom: none;
}
/* goodリスト */
.good_list li:before{
	font-family: "Font Awesome 5 Free";
	content: "\f59a";
	position: absolute;
	left : 0.3em; /*左端からのアイコンまで*/
	color: #ffb03f; /*アイコン色*/
	font-size: 1.3em;
	margin-top: -0.15em;
}
/* badリスト */
.bad_list li:before{
	font-family: "Font Awesome 5 Free";
	content: "\f567";
	position: absolute;
	left : 0.3em; /*左端からのアイコンまで*/
	color: #1e50a2; /*アイコン色*/
	font-size: 1.3em;
	margin-top: -0.15em;
}
/* コメントリスト */
.comment_list li:before{
	font-family: "Font Awesome 5 Free";
	content: "\f075";
	position: absolute;
	left : 0.3em; /*左端からのアイコンまで*/
	color: #1e50a2; /*アイコン色*/
	font-size: 1.3em;
	margin-top: -0.15em;
}
/* 右三角リスト */
.chevron_right_list li{
	list-style-type: none!important;/*ポチ消す*/
}
.chevron_right_list li:before{
	font-family:'Font Awesome 5 Free';
	content:'\f105';
	font-weight:bold;
	color: #5FB3F5; /* アイコンの色 */
	padding-right: 6px;
}
/* チェックリスト */
.check_list li{
	list-style-type: none!important;/*ポチ消す*/
}
.check_list li:before{
	font-family:'Font Awesome 5 Free';
	content:'\f00c';
	font-weight:bold;
	color: #5FB3F5; /* アイコンの色 */
	padding-right: 6px;
	position: absolute;
	left : 0.3em; /*左端からのアイコンまで*/
	font-size: 1.3em;
	margin-top: -0.15em;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}

/* 2023/12/13テスト追加*/
/************************************
** ローディング画面を表示する
************************************/
/* ベースの本体 */
#loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: #fef4eb;
  z-index: 9999;
}

#loading .loading-img{
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  max-width: 300px;
  /* -webkit-animation: loadanime 1.1s infinite linear; 
  animation: loadanime 1.1s infinite linear;*/
}
/*
@-webkit-keyframes loadanime {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loadanime {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
*/