@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.entry-card-title, .related-entry-card-title, .entry-card-snippet, .related-entry-card-snippet  {
  margin: 6px;
		padding:6px;
}
h1.entry-title{
  line-height: 1.45;
	margin:24px 0 26px 0;
}
.wp-post-image{
	margin:8px;
	border:#f0f0f0 1px solid;
}
.sns-share-buttons a .share-count{
	font-size:1rem;
	font-weight: bold;
}
.emphasis {
font-weight: bold;
font-size:1.0rem;
color :#333B32;
text-decoration: #ccc wavy underline;
}
/* ヘッダー広告表示対応 */

/* 基本的な設定 */
.header-ad {
	margin: 0 0 20px;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 100px;
	background: rgba(0, 128, 128, .05);
}

/* 340px以上 */
@media screen and (min-width: 340px){

	.header-ad {
		margin: 0 10px 20px;
		max-width: calc(100% - 20px);
	}	

}

/* 768px以上 */
@media screen and (min-width: 768px){

	#header-in {
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.tagline {
		width: 100%;
	}

	.header-ad {
		margin: 0 10px 0 0;
		max-width: calc(100% - 420px);
	}

	.header-ad .ad-area {
		text-align: right;
	}

}

/* 1200px以上 */
@media screen and (min-width: 1200px){

	.header-ad {
		margin: 0;
		max-width: 728px;
	}

}
.article h3{
font-size : 1.15rem;
color: #fff;
background: #257ec2;
margin:30px 0;
padding:16px 0 18px 20px;
box-shadow:1px 3px 7px 0  #666 ;
text-shadow:1px 1px 2px #333;
border:none;
}
.article ul ul, .article ul ol,
.article ol ul,
.article ol ol {
  margin-bottom: 20px;
}
.article h3:before, .sidebar h3:before{
font-size : 1.5rem;
color :#fff;
content: "\f06d";
font-family: FontAwesome;
padding:3px 14px 0 0;
}
.highlight{
display:inline-block;
position: relative;
padding: 0 8px 3px 2px;
margin-bottom: 0.6rem;
color: #333;
background: linear-gradient(90deg, #26A69A 0%, #16b5dd 100%);
background-repeat: no-repeat;
background-size: 100% 6px;
background-position: bottom;
font-weight: bold;
font-size: 1.2rem;
}
.notice {
position: relative;
font-size:0.96rem;
background:#DEEBF5;
color : #222;
padding:20px;
margin:20px auto;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
width:94%;
}
.notice:before{
	position: absolute;
	content: "\f06a";
    font-family: FontAwesome;
	padding: 2px 10px; /* タイトルの余白 上下・左右 */
	top: -10px;
	left: 30px;
	text-align: center;    
    color: #3488EA;
	background-color: transparent;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
}
.relation{
list-style: none;
position: relative;
border: 3px solid #ccc;
border-radius: 5px;
background: #fbfbfb;
margin: 28px 10px 36px;
padding: 26px 24px 24px 0;
}
.relation::before {
font-size :1.1rem;
content: "関連";
position: absolute;
background:linear-gradient(180deg,#fff 0%,#fff 50%,#fbfbfb 50%,#fbfbfb 100%);
color: #033;
font-weight: bold;
left: 20px;
top: -23px;
padding: 10px 14px;
}
.relation li {
position: relative;
padding: 4px;
}
.relation li:before {
position: absolute;
color: #257EC2;
font-size :1.5rem;
content: "\f0c6";
font-family: FontAwesome;
padding:12px;
left: 4px;
top: -14px;
}
.relation li a {
display: block;
padding-left: 2.6rem;
}
hr.separate {
border-top: 1px solid #ddd;
border-bottom: 1px solid #fff;
}
li {
margin-bottom: 5px;
}
.sidebar h3{
font-size : 1.15rem;
color: #fff;
background: #257ec2;
margin:20px 0;
padding:10px 0 12px 18px;
box-shadow:1px 3px 7px 0  #666 ;
text-shadow:1px 1px 2px #333;
border:none;
}
.sidebar h3:before{
font-size : 1.5rem;
color :#fff;
content: "\f06d";
font-family: FontAwesome;
padding:3px 14px 0 0;
}
a.back {
display:block;
text-align:center;
font-size:0.8rem;
background:#f9f9f9;
color : #444;
border:#ccc 1px solid;
padding:8px;
margin:20px 20px 15px auto;
width:100px;
}
a.back:hover, a.back:active {
text-align:center;
color : #444; 
background-color : #f2f2f2;
}
#index{
list-style: none;
color : #444;
vertical-align:top;
border:1px solid #257EC2;
border-radius: 8px;
padding:30px;
width:90%;
}
#index:before {
display: inline-block;
content: "目次";
font-weight: bold;
font-size:1.0rem;
color: #fff;
background: #257ec2;
padding:10px 20px;
margin-bottom:22px;
box-shadow:1px 3px 7px 0  #666 ;
text-shadow:1px 1px 2px #333;
}
#index li:before {
color: #257EC2;
font-size:1.5rem;
content: "\f101";
font-family: "FontAwesome";
padding:8px;
}
.scrnshot{
text-align:center;
margin-top:12px;
margin-bottom:12px;
}
.caption {
color : #898989;
margin-top: 4px;
}
video{
margin:12px 0;
padding:8px;
border: solid 1px #f0f0f0;
text-align: center;
}
.video-container{
margin: 0px auto;
}
.ribbon {
display: inline-block;
color: #fff;
font-weight: bold;
font-size:1.0rem;
line-height: 40px;
padding:1px 20px;
margin-left:15px;
position: relative;
text-align: center;
background-color: #257ec2;
box-shadow:1px 3px 7px 0  #666;
text-shadow:1px 1px 2px #333;
}
.ribbon:before, .ribbon:after{
content: "";
border-style: solid;
border-width: 0;
position: absolute;
width: 0;
height: 0;
}
.ribbon:after, ribbon:before {
border-width: 19px 0 19px 19px;
}
.ribbon:before {
border-color: #257ec2 transparent;
left: -19px;
}
.ribbon:after {
border-color: transparent #257ec2;
right: -19px;
}
.arrow {
display: inline-block;
color: #fff;
font-weight: bold;
font-size:1.0rem;
line-height: 40px;
padding:1px 20px;
margin-left:15px;
position: relative;
text-align: center;
background-color: #257ec2;
box-shadow:1px 3px 7px 0  #666;
text-shadow:1px 1px 2px #333;
}
.arrow-ribbon {
display: inline-block;
color: #fff;
font-weight: bold;
font-size:1.0rem;
line-height: 40px;
padding:1px 20px;
margin:25px 25px;
position: relative;
text-align: center;
background-color: #257ec2;
box-shadow:1px 3px 7px 0  #666;
text-shadow:1px 1px 2px #333;
}
.arrow-ribbon:before, .arrow-ribbon:after{
content: "";
border-style: solid;
border-width: 0;
position: absolute;
width: 0;
height: 0;
}
.arrow-ribbon:after, arrow-ribbon:before {
border-width: 19px 0 19px 19px;
}
.arrow-ribbon:before {
border-color: #257ec2 transparent;
left: -19px;
}
.arrow-ribbon:after {
border-color: transparent #257ec2;
right: -19px;
}
.arrow:before{
content: "";
border-style: solid;
border-width: 0;
position: absolute;
width: 0;
height: 0;
}
.arrow:after{
border-width: 19px 0 19px 19px;
}
.arrow:before {
border-color: #257ec2 transparent;
left: -19px;
}
.arrow:after {
border-color: transparent #257ec2;
right: -19px;
}
ul.title>li {
display: inline-block;
font-weight: bold;
color: #4A4E52;
border-bottom: solid 2px #257EC2;
list-style-type: none;
margin: 20px 0;
}
kbd {
display: inline-block;
width: auto;
height: auto;
padding: 3px 10px;
margin: 6px 4px;
background: #F5F5F5;
border-radius: 3px;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
font: 15px/22px Helvetica, Arial, serif;
text-align: center;
color: #333;
}
table.list {
border-collapse: collapse;
width: 100%;
margin: 30px 0;
}
table.list td {
padding: 1rem 2rem;
text-align: center;
border-bottom: 1px solid #ddd;
}
table.list tr:nth-of-type(1) {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
table.list tr:nth-of-type(even) {
background-color: #ffffff;
}
table.list tr:nth-of-type(odd) {
background-color: #f0f0f0;
}
.example{
    display: flex;
}
.example>div{
    width: 50%;
}
.example,.example>div{
    border: 0;
    padding: 10px;
}
img.bottom {
	vertical-align: bottom;
}
.popular-entry-card-title, .widget-related-entry-card-title, .widget-entry-card-title{
  font-size: 16px;
}
.widget-entry-card-update-date {
  display: none;
}
.widget_new_entries .display-none {
	display: block;
	padding-top: 0.2em;
	text-align: right;
}
.widget_related_entries .display-none {
	display: block;
	padding-top: 0.2em;
	text-align: right;
}
.widget_popular_entries .display-none {
	display: block;
	padding-top: 0.2em;
	text-align: right;
}
.download:before{
font-size : 1.5rem;
color :#2e5d90;
content: "\f019";
font-family: FontAwesome;
padding:6px 14px 0 0;
}
.widget_archive li:before{
font-size : 1.5rem;
color :#328EBE;
content: "\f073";
font-family: FontAwesome;
padding:6px 14px 0 0;
}

.related:before{
font-size : 1.5rem;
color :#4C5762;
content: "\f0c1";
font-family: FontAwesome;
padding:6px 14px 0 0;
}
.morelink:before{
font-size : 1.5rem;
color :#2e5d90;
content: "\f0f6";
font-family: FontAwesome;
padding:6px 14px 0 0;
}
.sidebar #recentcomments li:before{
content: "\f075";
font-family: FontAwesome;
font-size : 1.5rem;
color :#328EBE;
padding:6px 10px 0 0;
}
#yarpp_widget-3 li:before{
content: "\f0c1";
font-family: FontAwesome;
font-size : 1.5rem;
color :#328EBE;
padding:6px 10px 0 0;
}
.pagetopspace{
background-color:#E3E6E9;
text-align :center;
width:1040px;
margin-top:20px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
padding:30px 0 30px 0;
height: auto;
}
.pagetopspace-sub{
background-color:#C6CDD3;
text-align :center;
width:1040px;
margin-top:20px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
padding : 30px 0 30px 0;
height: auto;
}
.pagesidespace{
margin-bottom: 20px;
}
.adslot_1{
width: 336px;
height: 280px;
}
.adsleft{
float:left;
width :50%;
vertical-align:top;
}
.paragraph{
margin-top:60px;
margin-bottom:60px;
}
.ver-container{
text-align:right;
margin-right:42px;
}
.ver-comment{
display: inline-block;
font-size:0.8rem;
text-align:right;
color : #fafafa;
background:#1F6BA5;
border:#658DAB 1px solid;
border-radius: 4px;
padding:6px 10px;
}
.source{
padding:16px;
margin:16px;
background:#F1F3F4;
border: 1px solid #F1F3F4;
border-radius:4px;
width:75%;
}
.adsright{
float:right;
width :50%;
vertical-align:top;
}
.leftbox{
float:left;
width :50%;
vertical-align:top;
}
.rightbox{
float:left;
width :50%;
vertical-align:top;
}
.clear{
clear:both;
}
#article_bottom{
text-align :center;
margin-bottom:14px;
}
.note {
display: inline-block;
background:#f0f0f0;
color : #444;
vertical-align:top;
border:#ccc 2px solid;
padding:15px 14px 14px 14px;
margin:5px 8px 14px 2px;
width:97%;
}
.annotate {
display: inline-block;
position: relative;
background:#f9f9f9;
color : #444;
vertical-align:top;
border:#ccc 2px solid;
border-radius: 10px;
padding:15px 14px 14px 14px;
margin:5px 8px 14px 2px;
width:97%;
z-index: 0;
}
.annotate:before {
border-right: 10px solid transparent;
border-bottom: 15px solid #f9f9f9;
border-left: 10px solid transparent;
border-top-width:0;
top:-14px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
z-index:1;
}
.annotate:after {
border-right: 10px solid transparent;
border-bottom: 15px solid #ccc;
border-left: 10px solid transparent;
border-top-width:0;
top:-17px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
}
.em {
background-color:#F1F3F4;
}
.in-article{
margin-top: 20px;
margin-bottom: 24px;
}
.download{
display: block;
text-align:center;
color: #fff;
font-size:0.85rem;
border-top: 1px solid #257ec2;
background: #4C5762;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
text-shadow:1px 1px 2px #333;
box-shadow:inset -1px -1px 2px rgba(0,0,0, 0.6),inset 1px 1px 2px rgba(255,255,255,0.8);width:97%;
text-decoration: none;
font-weight : bold;
vertical-align: middle;
padding: 8px 11px 6px 7px;
line-height:2.1rem;
margin-left: auto;
margin-right: auto;
width:70%;
}
.external-link{
margin-left:38px;
padding:20px;
background: #F0F7F9;
	width:85%;
}
.external-link:before{
font-size : 1.5rem;
color :#2e5d90;
content: "\f08e";
font-family: FontAwesome;
padding:6px 14px 0 0;
}
.download,.external-link:link{
text-decoration: none;
color: #fff;
}
.download:visited {
text-decoration: none;
color: #fff;
}
.download:hover {
text-decoration: none;
border-top-color: #4C5762;
background: #7E868D;
color: #fff;
}
.download:active {
text-decoration: none;
border-top-color: #4C5762;
background: #7E868D;
}
.download:before{
font-size : 1.5rem;
color :#fff;
content: "\f019";
font-family: FontAwesome;
padding:6px 14px 0 0;
}
.widget_archive li:before{
font-size : 1.5rem;
color :#328EBE;
content: "\f073";
font-family: FontAwesome;
padding:6px 14px 0 0;
}
.related:before{
font-size : 1.5rem;
color :#4C5762;
content: "\f0c1";
font-family: FontAwesome;
padding:6px 14px 0 0;
}
.morelink:before{
font-size : 1.5rem;
color :#2e5d90;
content: "\f0f6";
font-family: FontAwesome;
padding:6px 14px 0 0;
}
.card-title {
  line-height: 1.4;
}
.yarpp-related-widget ol{
list-style: none;
}
#yarpp_widget-3 li:before{
content: "\f0c1";
font-family: FontAwesome;
font-size : 1.5rem;
color :#328EBE;
padding:6px 10px 0 0;
}
ul.wpp-list li {
overflow:hidden;
clear:both;
vertical-align:top;
border-bottom: 1px solid #D4D9DE;
margin: 0 0 6px 0;
padding-bottom:8px;
}
#wpp-2 .wpp-thumbnail:hover{
opacity:0.8;
}
ul.wpp-list li a.wpp-post-title {
float:none;
display:block;
}
ul.mgn{
padding-top:15px;
padding-bottom:5px;
}
ul.key{
padding-top:15px;
padding-bottom:5px;
}
ul.key li{
padding:6px;
}
ol.mgn{
padding-top:15px;
padding-bottom:0;
}
.accent {
font-weight: bold;
font-size:0.95rem;
color :#446477;
}
.code{
background-color:#eee;
margin:8px;
padding:16px;
}
.img-border{
border: 1px solid #D4D9DE;
}
.grey {
color : #898989;
}
.clearfix:after {
content:"."; 
display:block;
height:0.1px;
visibility:hidden;
font-size:0.1em;
line-height:0;
clear:both;
}
.clearfix {
display:inline-block;
}
.cat-item {
	font-size:1.1rem;
	font-weight: bold;
	padding-left:8px;
	}
p {
	padding:8px 0;
}
.marker {
background: linear-gradient(rgba(255, 255, 255, 0) 40%, #BFE1FC 70%);
font-weight: bold; 
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}