@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){
  /*必要ならばここにコードを書く*/
}
/*Amazon用の自作CSSここから*/
/*ここからパソコン用*/
@media screen and (min-width: 900px)
{
	.aspla{
/*		width:100%;*//*コメントアウト 2020年6月27日*/
		border: 1px solid #dddddd;
		padding: 10px;
	}
	.aspla_left_block{
		width:200px;
		float:left;
	}
	.aspla_img_block{
/*		width:200px;
		float:left;*/
	}
	.aspla_img_block img{
		max-width:98%;
	}
	.aspla_right_block
	{
		padding-left:205px;
	}
	.aspla_title_block{
		width:100%;
		margin-bottom:20px;/*デザイン用*/
	}
	.aspla_title_block .detail_area{
		font-size:0.8em;
		line-height:1.6;
	}
	.aspla_button_block
	{
	/*	padding-top:0.9em;*/
		padding-bottom:5px;
		display:inline-block;
		width:98%;
	/*	width:49%;*//*50%ではだめっぽい*/
/*		float:left;*/
	}

	.aspla_button_block img{
		float:left;
	}

	.aspla_button_block a
	{
		margin-bottom: 5px;
		border-radius: 3px;
		text-align: center;
	/*	padding: 0.75em 0.5em;*/
		padding-top:0.75em;
		padding-bottom:0.75em;
		color:#ffffff;
		font-weight: 600;
/*		width:90%;*/
		display:block;
		text-decoration: none;/*アンダーバーを消す*/
	}
/*	.orange_box a
	{
		background-color: #FF9901;
		-webkit-box-shadow: 0 5px 0 #cc7a01;
		-moz-box-shadow: 0 5px 0 #cc7a01;
		box-shadow: 0 5px 0 #cc7a01;
		-o-box-shadow: 0 5px 0 #cc7a01;
		-ms-box-shadow: 0 5px 0 #cc7a01;
	}*/
	.orange_box a
	{
		background-color: #000000;
		-webkit-box-shadow: 0 5px 0 #94A78E;
		-moz-box-shadow: 0 5px 0 #94A78E;
		box-shadow: 0 5px 0 #94A78E;
		-o-box-shadow: 0 5px 0 #94A78E;
		-ms-box-shadow: 0 5px 0 #94A78E;
	}
	.blue_box a
	{
		background-color: #0066ff;
		-webkit-box-shadow: 0 5px 0 #006699;
		-moz-box-shadow: 0 5px 0 #006699;
		box-shadow: 0 5px 0 #006699;
		-o-box-shadow: 0 5px 0 #006699;
		-ms-box-shadow: 0 5px 0 #006699;
	}

	.red_box a
	{
		background-color: #bb0000;
		-webkit-box-shadow: 0 5px 0 #770000;
		-moz-box-shadow: 0 5px 0 #770000;
		box-shadow: 0 5px 0 #770000;
		-o-box-shadow: 0 5px 0 #770000;
		-ms-box-shadow: 0 5px 0 #770000;
	}

	.green_box a
	{
		background-color: #007700;
		-webkit-box-shadow: 0 5px 0 #004400;
		-moz-box-shadow: 0 5px 0 #004400;
		box-shadow: 0 5px 0 #004400;
		-o-box-shadow: 0 5px 0 #004400;
		-ms-box-shadow: 0 5px 0 #004400;
	}
}
/*ここからスマホ用*/
@media screen and (max-width: 900px)
{
	.aspla{
/*		width:100%;*//*コメントアウト 2020年6月27日*/
/*		margin:0 auto;*/
/*ここから追加 2020年6月27日*/
		border: 1px solid #dddddd;
		padding: 10px;
/*ここまで追加 2020年6月27日*/
	}
	.aspla_img_block{
		width:100%;
/*		float:left;*/
		text-align:center;
	}
	.aspla_img_block img{
		max-width:98%;
/*		margin:0 auto;*/
	}
	.aspla_right_block
	{
/*		padding-left:205px;*/
	}
	.aspla_right_block
	{
		max-width:98%;
	}

	.aspla_button_block
	{
	/*	padding-top:0.9em;*/
		padding-bottom:5px;
		display:inline-block;
		width:98%;
	/*	width:49%;*//*50%はダメ*/
	/*	float:left;*/
	}

	.aspla_button_block img{
		float:left;
	}

	.aspla_button_block a
	{
		margin-bottom: 5px;
		border-radius: 3px;
		text-align: center;
	/*	padding: 0.75em 0.5em;*/
		padding-top:0.75em;
		padding-bottom:0.75em;
		color:#ffffff;
		font-weight: 600;
/*		width:90%;*/
		display:block;
		text-decoration: none;/*アンダーバーを消す*/
	}
/*	.orange_box a
	{
		background-color: #FF9901;
		-webkit-box-shadow: 0 5px 0 #cc7a01;
		-moz-box-shadow: 0 5px 0 #cc7a01;
		box-shadow: 0 5px 0 #cc7a01;
		-o-box-shadow: 0 5px 0 #cc7a01;
		-ms-box-shadow: 0 5px 0 #cc7a01;
	}*/
	.orange_box a
	{
		background-color: #000000;
		-webkit-box-shadow: 0 5px 0 #94A78E;
		-moz-box-shadow: 0 5px 0 #94A78E;
		box-shadow: 0 5px 0 #94A78E;
		-o-box-shadow: 0 5px 0 #94A78E;
		-ms-box-shadow: 0 5px 0 #94A78E;
	}
	.blue_box a
	{
		background-color: #0066ff;
		-webkit-box-shadow: 0 5px 0 #006699;
		-moz-box-shadow: 0 5px 0 #006699;
		box-shadow: 0 5px 0 #006699;
		-o-box-shadow: 0 5px 0 #006699;
		-ms-box-shadow: 0 5px 0 #006699;
	}

	.red_box a
	{
		background-color: #bb0000;
		-webkit-box-shadow: 0 5px 0 #770000;
		-moz-box-shadow: 0 5px 0 #770000;
		box-shadow: 0 5px 0 #770000;
		-o-box-shadow: 0 5px 0 #770000;
		-ms-box-shadow: 0 5px 0 #770000;
	}

	.green_box a
	{
		background-color: #007700;
		-webkit-box-shadow: 0 5px 0 #004400;
		-moz-box-shadow: 0 5px 0 #004400;
		box-shadow: 0 5px 0 #004400;
		-o-box-shadow: 0 5px 0 #004400;
		-ms-box-shadow: 0 5px 0 #004400;
	}
}

/*Amazon用の自作CSSここまで*/

/*付箋のデザインCSS ここから*/
.husen{
	padding: 0.5em 1em;
	margin: 2em 0;
	color: #232323;
	background: #fff8e8;
	border-left: solid 10px #ffc06e;
}
/*付箋のデザインCSS ここまで*/

/*テープ風のデザイン ここから*/
.tape{
	position: relative;
	background: #fff0cd;
	box-shadow: 0px 0px 0px 5px #fff0cd;
	border: dashed 2px white;
	padding: 0.2em 0.5em;
	color: #454545;
}
.tape:after{
	position: absolute;
	content: '';
	right: -7px;
	top: -7px;
	border-width: 0 15px 15px 0;
	border-style: solid;
	border-color: #ffdb88 #fff #ffdb88;
	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
/*テープ風のデザイン ここまで*/

/*記事下用divブロック ここから*/
.next_step {
	position: relative;
	margin: 2em 0;
	padding: 0.5em 1em;
	border: solid 3px #62c1ce;
}
.next_step .box_title {
	position: absolute;
	display: inline-block;
	top: -27px;
	left: -3px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
	background: #62c1ce;
	color: #ffffff;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}
/*記事下用divブロック ここまで*/

/*ポイント用ブロック ここから*/
.point_box {
	position: relative;
	margin: 2em 0;
	padding: 0.5em 1em;
	border: solid 3px #00aa00;
}
.point_box .box_title {
	position: absolute;
	display: inline-block;
	top: -27px;
	left: -3px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
	background: #00aa00;
	color: #ffffff;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}
/*ポイント用ブロック ここまで*/

/*Caution用ブロック ここから*/
.caution_box {
	position: relative;
	margin: 2em 0;
	padding: 0.5em 1em;
	border: solid 3px #ff9900;
}
.caution_box .box_title {
	position: absolute;
	display: inline-block;
	top: -27px;
	left: -3px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
	background: #ff9900;
	color: #ffffff;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}
/*Caution用ブロック ここまで*/


/*フローチャート用CSS ここから*/
ul.arrowlist{
	list-style: none;
	padding: 0 10px 15px 10px;
	margin: 15px 0;
	border: 2px solid #e8e8e8; /* 外枠ボーダー 好みに合わせて */
	background-color: #e8fcf3; /* 背景色 好みに合わせて */
}
ul.arrowlist:before{
	content: attr(data-title)"";
	display: block;
	padding: 10px;
	margin: 0 -10px 15px -10px;
	background-color: #e8e8e8; /* タイトル背景色 好みに合わせて */
	text-align: center;
	font-weight: bold;
}
ul.arrowlist li{
	display: table;
	margin: 0 auto;
	display: table;
	position: relative;
	box-sizing: border-box;
	padding: 10px 20px;
	border: 2px solid #e8e8e8; /* ブロックボーダー 好みに合わせて */
	background-color: #FFF;
	border-radius: 10px;
	text-align: center;
}
ul.arrowlist li:not(:last-child){
	margin-bottom: 30px;
}
ul.arrowlist li:not(:last-child):after{
	content: "\f078";
	font-family: FontAwesome;
	/* FontAwesome5を使用する場合はこっちに置き換えてください */
	/* font-family: "Font Awesome 5 Free"; */
	position: absolute;
	left: 50%;
	bottom: -30px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	display: block;
	text-align: center;
	color: #37AB9D; /* 矢印の色 好みに合わせて */
}
/*フローチャート用CSS ここまで*/

/*サイドバー広告用CSS ここから*/
.side_ads img{
	max-width:95%;
}
/*サイドバー広告用CSS ここまで*/



/*Googleフォーム用 ここから*/
.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*Googleフォーム用 ここまで*/


/*電験2種用*/
.denken2 {
	position: relative;
	margin: 2em 0;
	padding: 0.5em 1em;
	border: solid 3px #ffd700;
	/*background:#ffedb3;*/
	/*background:#ffefcf;*/
}
.denken2 .box_title {
	position: absolute;
	display: inline-block;
	top: -27px;
	left: -3px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
	background: #ffd700;
	color: #000000;
/*	color: #ffffff;*/
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}
/*電験2種用*/


/**********************************************
** 固定ページの新着記事一覧(new_list)を
** 2カラム表示にする
**********************************************/
/*.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;
    width: 49.5%;
}*/

@media screen and (min-width: 900px)
{
	.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
	 /*   justify-content: space-between;*/
    box-sizing: border-box;
	}

	.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;
	width:33%;
  	/*  width: 49.5%;*/
	}
}

@media screen and (max-width: 900px)
{
	.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
	}

	.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;
    width: 49.5%;
	}
}

/*メモ用CSS*/
.memo{
    margin-bottom: 1.5em;
    padding: 1em;
    background: #fff9e5;
    color: #545454;
}

.memo_title{
    margin-bottom: 5px;
    color: #ffb36b;
    font-size: 1.2em;
    font-weight: 700;
    font-family: inherit !important;
}
.memo_title:before{
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
}