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

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

.f08em {font-size: 0.8em;}

.swpm-button-wrapper input[type="submit"] {
  color: #fff;
	background-color: #094;
	border-bottom: 2px solid #00662d;
	padding: 1rem 3rem 1rem 2rem;
    border-radius: 1em;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

.swpm-button-wrapper:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}

/*著者紹介*/
.profile-box{
	margin-bottom: 30px;
	padding: 10px;
	overflow: hidden;
	/*background-color: #e8f7f7;*/
	line-height: 1.5;
}

.prof-box-thumb{
	display: block;
	max-width: 120px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

.prof-box-thumb img{
	border-radius: 95px;
}

.keni-section .prof-box-author{
	margin: 20px 0;
	padding-bottom: 0;
	border: 0;
	text-align: center;
}

.keni-section .prof-box-desc-title{
	margin: 20px 0;
	padding-bottom: 0;
	border-bottom: 0;
	text-align: center;
}

.link-author-list {
	margin: 15px 10px 0 0;
	text-align:  right;
}

@media (min-width : 480px){
	/*著者紹介*/
	.prof-box-thumb{
		float: left;
		margin-right: 30px;
	}

	.prof-box-desc{
		overflow: hidden;
	}
}


/*■■■スマホ非表示■■■*/
@media only screen and (max-width: 480px)
{.pc {display: none!important}}

/*■■■ＰＣ非表示■■■*/
@media only screen and (min-width: 481px)
{.sumaho {display: none!important}}


strong.tomato { color: tomato !important;}
.tomato { color: tomato !important;}
strong.red { color: red !important;}
.red { color: red !important;}
strong.green { color: green !important;}
.green { color: green !important;}
.page .main-body .article-body h2{font-size: 1.3em}

.page .main-body .article-body h3{
     font-size: 100%;
     text-align: left;
     color: #330;
     clear: both;
     border: solid 1px #AAA;
     border-left: solid 8px #FF8000;
     padding: 3px;
     padding-left: 5px;
}
.main-body h3::after {content: none}

p {margin: 0 0 1.7em}

.section-in .textwidget .menu     {
	text-align: center;
	width: 200px;
    float: left;
    border: solid 1px #AAA;
    border-bottom: solid 2px;
    border-right: solid 2px;
    padding: 10px;
	font-size: 10px;
}

.menu ul, ol {list-style-type: none}

ul, menu, dir {
    list-style-type: disc;
    -webkit-margin-start: 0px;
    -webkit-padding-start: 0px;
}

.menu_sb1 ul li a {
    display: block;
    overflow: auto;
    font: bold 17px Verdana;
	color: black;
    padding: 8px;
    text-indent: -5px;
	line-height: 5px;
}

article ol{list-style-type: decimal}
figcaption {text-align:center; font-size:12px}

/* ヘッダー画像の背景を黒に */
.site-header-conts {background-color: #000;padding: 0;}


/*タグのデザイン*/
.post-tag{display:inline-block}
.post-tag dd li {
    background-color: #fff;
	margin:0px;
	padding:0px;
}
.post-tag dd li a {
    margin: 0 0 5px 5px;
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 2px 2px 0 0 #ddd;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    vertical-align: middle;
}
.post-tag dd li a::before {
    display: inline-block;
    margin-right: 5px;
    content: "\e91f";
    font-size: 12px;
    color:  #e3504c;
}
.tagcloud a,.post-tag a{
 font-size: 12px !important; /* 文字のサイズ */
 margin: 2px 0px;
 white-space: nowrap;
 border:solid 1px #aaa;
}
.tagcloud a:hover,.post-tag a:hover {
 border:solid 1px #f60; /* マウスホバー時の枠色*/
}



/*-------------------- 吹き出しを作る（ここから）--------------------*/
.kaiwa {
 margin: 40px 0;
 padding : 0 40px;
 position: relative;
}
.kaiwa:after,.bal:before {
 clear: both;
 content: "";
 display: block;
}
.kaiwa-img-left {
 position: absolute;
 left: 0;
 margin: 0;
 width: 60px;
 height: 60px;
}
.kaiwa-img-right {
 position: absolute;
 right: 0;
 margin: 0;
 width: 60px;
 height: 60px;
}
.kaiwa  figure img {
 width: 100%;
 height: 100%;
 border: 1px solid #aaa;
 border-radius: 50%;
 margin: 0;
}
.kaiwa-img-description {
 padding: 5px 0 0;
 font-size: 10px;
 text-align: center;
 line-height: 1;
}
.kaiwa-text-right {
 position: relative;
 margin-left: 40px;
 padding: 10px;
 border: 1px solid #192f60;
 border-radius: 10px;
 float: left;
 max-width: 100%;
}
.kaiwa-text-left {
 position: relative;
 margin-right: 40px;
 padding: 10px;
 border: 1px solid #006400;
 border-radius: 10px;
 float: right;
 max-width: 100%;
}
.kaiwa p {
 margin: 0 0 20px;
}
.kaiwa p:last-child {
 margin-bottom: 0;
}
/* 会話 */
.kaiwa-text-right:before {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-right: 10px solid #192f60;
 top: 15px;
 left: -20px;
}
.kaiwa-text-right:after {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-right: 10px solid #fff;
 top: 15px;
 left: -19px;
}
.kaiwa-text-left:before {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-left: 10px solid #006400;
 top: 15px;
 right: -20px;
}
.kaiwa-text-left:after {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-left: 10px solid #fff;
 top: 15px;
 right: -19px;
}
/* 考え毎 */
.think .kaiwa-text-right,.think .kaiwa-text-left {
 border-radius: 30px;
}
.think .kaiwa-text-right:before {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 8px;
 height: 8px;
 top: 15px;
 left: -12px;
}
.think .kaiwa-text-right:after {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 4px;
 height: 4px;
 top: 20px;
 left: -19px;
}
.think .kaiwa-text-left:before {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 8px;
 height: 8px;
 top: 15px;
 right: -12px;
}
.think .kaiwa-text-left:after {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 4px;
 height: 4px;
 top: 20px;
 right: -19px;
}
/*-------------------- 吹き出しを作る（ここまで）--------------------*/

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

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

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