@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
header .google-auto-placed {
	display: none;
}

.entry-content h2 {
	background-color: #fff;
	border-left: solid 8px #222;
	border-right: solid 8px #222;
	border-top: solid 1px #222;
	border-bottom: solid 1px #222;
	color: #222;
	margin-top: 50px;
}

.nohighlight > code {
	color: #fff;
}

#header-container {
    background-color: #f4f5f7;
}

.header {
    background-color: #222;
    color: #fff;
}

.site-name-text {
    color: #fff !important;
}

pre {
    background-color: #333;
    color: #fff;
	font-size: 0.8em;
	line-height: 1em !important;
}

th {
	background-color: #f2f2ff;
}

.entry-content h2 {
	margin-top: 70px !important;
	margin-bottom: 30px !important;
}

.entry-content h3 {
	margin-top: 25px !important;
	line-height: 1.5em !important;
}

.entry-content h4 {
	margin-top: 35px !important;
	line-height: 1.1em !important;
}

.entry-content a > img {
	border: solid 1px #ccc !important;
	box-shadow: 2px 2px 4px #eee;
	margin: 30px auto;
	padding: 5px;
}

.entry-card-wrap.a-wrap:nth-of-type(3n + 1),
.entry-card-wrap.a-wrap:nth-of-type(3n + 2),
.entry-card-wrap.a-wrap:nth-of-type(3n + 3),
.related-entry-card-wrap.a-wrap:nth-of-type(3n + 1),
.related-entry-card-wrap.a-wrap:nth-of-type(3n + 2),
.related-entry-card-wrap.a-wrap:nth-of-type(3n + 3) {
    border: solid 1px #888;
	border-radius: 15px;
}

.first-contribution {
	font-size: 0.9em;
	margin-top: 3.5em;
	text-align: right;
}

.vtx_frame {
    background-color : #ebeddf;
    border           : 2px solid #85beab;
    border-radius    : 10px;
    margin           : 20px 10px;
    padding          : 1.3em;
}
.vtx_link {
    background-color : #e4f0fc;
    border           : solid 2px #66b7ec;
    border-radius    : 10px;
    margin           : 1em 0.5em 2.5em;
    padding          : 1.3em;
    padding-bottom   : 0.9em;
    position         : relative;
}
.vtx_link:before {
    background-color : #66b7ec;
    border-radius    : 4px;
    color            : #fff;
    content          : "LINK";
    font-size        : 90%;
    font-weight      : bold;
    left             : 35px;
    padding          : 1px 10px 0px 10px;
    position         : absolute;
    top              : -14px;
    z-index          : 1;
}
.vtx_link > a {
    color            : #0074bf;
    text-decoration  : none;
}
.vtx_link > a:hover {
    text-decoration  : underline;
    font-weight      : normal;
}
.vtx_code {
    background-color : #eef;
    border           : solid 2px #88f;
    border-radius    : 7px;
    color            : #444;
    font-size        : 12px;
    line-height      : 15px;
    margin           : 1em 0.5em 2.5em;
    padding          : 10px;
    padding-top      : 18px;
    position         : relative;
    text-align       : left;
}
.vtx_code:before {
    background-color : #88f;
    border-radius    : 4px;
    color            : #fff;
    content          : "CODE";
    font-size        : 90%;
    font-weight      : bold;
    left             : 35px;
    padding          : 3px 10px 1px 10px;
    position         : absolute;
    top              : -12px;
    z-index          : 1;
}
.vtx_warn {
    background-color : #faede5;
    border           : solid 2px #b80117;
    border-radius    : 7px;
    color            : #444;
    font-size        : 12px;
    line-height      : 15px;
    margin           : 1em 0.5em 2.5em;
    padding          : 10px;
    padding-top      : 18px;
    position         : relative;
    text-align       : left;
}
.vtx_warn:before {
    background-color : #b80117;
    border-radius    : 4px;
    color            : #fff;
    content          : "ERROR";
    font-size        : 90%;
    font-weight      : bold;
    left             : 35px;
    padding          : 3px 10px 1px 10px;
    position         : absolute;
    top              : -12px;
    z-index          : 1;
}
.vtx_command {
    background-color : #000;
    border           : solid 2px #999;
    border-radius    : 7px;
    color            : #eee;
    font-size        : 12px;
    line-height      : 15px;
    margin           : 1em 0.5em 2.5em;
    padding          : 10px;
    padding-top      : 18px;
    position         : relative;
    text-align       : left;
}
.vtx_command:before {
    background-color : #ccc;
    border-radius    : 4px;
    color            : #222;
    content          : "COMMAND";
    font-size        : 90%;
    font-weight      : bold;
    left             : 35px;
    padding          : 3px 10px 1px 10px;
    position         : absolute;
    top              : -12px;
    z-index          : 1;
}
.vtx_quote {
    background-color : #ffc;
    border           : solid 2px #ebcc00;
    border-radius    : 7px;
    color            : #666;
    font-size        : 12px;
    line-height      : 1.5em;
    margin           : 1em 0.5em 2.5em;
    padding          : 10px;
    padding-top      : 18px;
    position         : relative;
    text-align       : left;
}
.vtx_quote:before {
    background-color : #ebcc00;
    border-radius    : 4px;
	color            : #222;
    content          : "QUOTE";
    font-size        : 90%;
    font-weight      : bold;
    left             : 35px;
    padding          : 3px 10px 1px 10px;
    position         : absolute;
    top              : -12px;
    z-index          : 1;
}
.vtx_think{
    border-bottom    : solid 2px #000;
    border-top       : solid 2px #000;
	font-size        : 0.85em;
	margin           : 2em 0;
    padding          : 1em 1.5em;
    position         : relative;
}
.vtx_think:before,
.vtx_think:after {
    background-color : #000;
    content          : '';
    height           : -webkit-calc(100% + 20px);
    height           : calc(100% + 20px);
    position         : absolute;
    top              : -10px;
    width            : 2px;
}
.vtx_think:before {
    left             : 10px;
}
.vtx_think:after {
    right            : 10px;
}
.vtx_point {
    border           : solid 5px #eee;
	font-size        : 12px;
    line-height      : 15px;
    margin           : 10px;
    padding          : 10px;
    position         : relative;
    z-index          : 0;
}
.vtx_point:before {
    border-top       : solid 5px #b0d7f4;
    border-left      : solid 5px #b0d7f4;
    content          : '';
    display          : block;
    height           : 20px;
    left             : -5px;
    position         : absolute;
    top              : -5px;
    width            : 20px;
    z-index          : 1;
}

.contents-banner-area {
    margin           : 15px auto;
    text-align       : center;
}

.contents-banner-area img {
    margin           : 0 !important;
}


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

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

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