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

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

body {
	font-family: "Kosugi Maru",
		"Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;

	font-weight: 400;
	font-style: normal;
}

/*以下どわこくらぶ専用追加分*/

/*横スクロール禁止*/
html,body {
	overflow-x: hidden;
}

/*@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@500&display=swap');*/

strong {
	font-weight:bold;
	background: linear-gradient(transparent 60%, #ffe8ec 60%);
}

.copyright {
	margin:1em;
	padding: 1em;
	padding-bottom:3em;
	font-size:12px;
}

.copyright a {
	font-weight:bold;
}

.copyright a:hover {
	background-color:#fff;
}

.dowako_logo {
	max-width:100%;
	height:auto;
}

.balloon1{
  position: relative;
  padding: 10px;
  border-radius: 10px;
  color: #111;
  background-color: #98fb98;
	box-shadow: 3px 3px 0px 0px #318c30;
  margin-left: 110px;
	margin-bottom:15px;
}
.balloon1 .icon{
  position: absolute;
  left: -110px;
  top: 0;
	text-align:center;
	font-size:12px;
}

.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #98fb98;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.balloon2{
  position: relative;
  padding: 10px;
  border-radius: 10px;
  color: #111;
  background-color: #98fb98;
	box-shadow: 3px 3px 0px 0px #318c30;
  margin-right: 110px;
	margin-bottom:15px;
}
.balloon2 .icon{
  position: absolute;
  right: -110px;
  top: 0;
	text-align:center;
	font-size:12px;
}

.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #98fb98;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.comment2 {
	margin:0px 0px 10px 0px;
	padding: 5px;
	border-top: 2px #ff7f50 solid;
	border-bottom: 2px #ff7f50 solid;
	background-color:#fffacd;
	font-size:14px;
	color:#555;
	line-height:1.2em;
}

.balloon_comment{
	margin-bottom: 20px;
  position: relative;
  padding: 10px;
  background-color: #ffc0cb;
  box-shadow: 0px 0px 10px 0px #a7a7a7;
	font-size:14px;
	line-height:1.2em;
}

.balloon_comment::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -15px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #ffc0cb;
  border-left: 15px solid transparent;
}

a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: “alpha( opacity=80 )”;
}

.balloon3{
  position: relative;
  padding: 10px;
  border-radius: 10px;
  color: #111;
  background-color: #98fb98;
	box-shadow: 3px 3px 0px 0px #318c30;
	margin-top: 10px;
  margin-left: 170px;
	margin-bottom:15px;
}

.balloon3 .icon{
  position: absolute;
  left: -170px;
  top: 0;
	text-align:center;
	font-size:12px;
}

.balloon3 .icon img {
	height:90px;
}

.balloon3::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #98fb98;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.balloon4{
  position: relative;
  padding: 10px;
  border-radius: 10px;
  color: #111;
  background-color: #98fb98;
	box-shadow: 3px 3px 0px 0px #318c30;
	margin-top: 10px;
  margin-right: 170px;         
	margin-bottom:15px;
}

.balloon4 .icon{
  position: absolute;
  right: -170px;
  top: 0;
	text-align:center;
	font-size:12px;
}

.balloon4 .icon img {
	height:90px;
}

.balloon4::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #98fb98;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

/*clearfix*/

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
}

.bold {
	background: linear-gradient(transparent 60%, #ffff66 60%);
}

/*太字のみ*/
.bold2 {
	font-weight:bold;
}

.entry-content a {
	font-weight:bold;
}

.small_font {
	font-size:90%;
}

/*ブログランキング*/
.ranking_area {
	width:100%;
	font-size:12px;
	/*border: 1px #ccc solid;*/
	margin:1em;
	padding:1em;
	text-align:center;
}

.ranking_area a {
	font-weight:bold;
	text-decoration:none;
	color:#000;
}

.ranking_area a:hover {
	text-decoration:underline;
	color:#000;
}

/*ランダムイメージ*/
.rand_img {
	position:relative;
	width:100%;
}

.rand_img img {
	width:100%;
	object-fit: cover;
}

.rand_img .dowako_copy {
	position:absolute;
	padding:1px;
	left:5px;
	bottom:2px;
	color:#fff;
	background-color:rgba(153,153,153,0.5);
}

.rand_img .dowako_date {
	position:absolute;
	padding:1px;
	right:5px;
	top:2px;
	color:#fff;
	background-color:rgba(153,153,153,0.5);
}

.speech-balloon {
	/*font-family: 'M PLUS 1', sans-serif;*/
}

/*h1デザイン*/
.entry-title {
	padding-left:35px;
	background-repeat: no-repeat;
	background-image:url(https://dowako-club.com/blog/wp-content/uploads/2023/01/yaachanthanks.png);
	border-bottom: 2px dashed #D26466;

}

/*打ち消し線を目立たせる*/
.strike {
	text-decoration: line-through 3px solid #ff0000;
}

/*一言コメントを吹き出しで表示*/
.custom_comment {
    position: relative;
    padding: 0.5em 0.7em;
    margin: 2em 0;
    background: #008000;
	border-radius: 10px;
	/*font-family: 'M PLUS 1', sans-serif;*/
}
.custom_comment:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #008000;
    width: 0;
    height: 0;
}
.custom_comment p {
    margin: 0; 
    padding: 0;
	color: #fff;
}

/*一言コメントを吹き出しで表示 その2*/
.custom_comment2 {
	position: relative;
	padding: 10px;
	background: #fff;
	border: 2px solid #008000;
	border-radius: 10px;
	/*font-family: 'M PLUS 1', sans-serif;*/
}
.custom_comment2:after, .custom_comment2:before {
	top: 100%;
	left: 20%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.custom_comment2:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 30px;
	margin-left: -30px;
}
.custom_comment2:before {
	border-color: rgba(0, 128, 0, 0);
	border-top-color: #008000;
	border-width: 33px;
	margin-left: -33px;
}

/*PC用*/

/*PCでは無効（改行しない）*/
	.sp_br{
		display: none;
	}
	
	.rand_img {
	height: 400px;
	}
	
	.rand_img img {
	height: 400px;
	}

	.rand_img .dowako_copy {
	font-size:12px;
	}

	.rand_img .dowako_date {
	font-size:12px;
	}

	.speech-name {
		letter-spacing:-2px;
		font-weight:bold;
	}

/*834px以下*/
@media screen and (max-width: 834px){

	.rand_img {
	height: 300px;
	}

	.rand_img img {
	height: 300px;
	}
	
	.rand_img .dowako_copy {
	font-size:11px;
	}

	.rand_img .dowako_date {
	font-size:11px;
	}
	
	.speech-name {
		font-size:12px;
		letter-spacing:-2px;
		font-weight:bold;
	}

}

/*480px以下*/
@media screen and (max-width: 480px){
	
	.rand_img {
	height: 200px;
	}

	.rand_img img {
	height: 200px;
	}
	
	.rand_img .dowako_copy {
	font-size:10px;
	}

	.rand_img .dowako_date {
	font-size:10px;
	}
	
	.speech-name {
		font-size:10px;
		letter-spacing:-2px;
		font-weight:bold;
	}

}

/*300px以下*/
@media screen and (max-width: 300px){
	
	.rand_img {
	height: 120px;
	}

	.rand_img img {
	height: 120px;
	}
	
	.rand_img .dowako_copy {
		line-height:1em;
	}

	.speech-name {
		font-size:10px;
		letter-spacing:0px;
		line-height:1.2em;
		font-weight:bold;
	}

}

.ad_error {
	font-size:12px;
	color:#f00;
}

/*box内フォント指定*/
.common-icon-box {
	/*font-family: 'M PLUS 1', sans-serif;*/
	font-size:90%;
}

/*バッジの上下paddingを上げる*/
.badge-grey, .badge-brown, .badge-yellow, .badge-green, .badge-blue, .badge-purple, .badge-pink, .badge-red, .badge, .ref, .reffer, .sankou {
	padding: 3px 3px;
	border-radius: 4px;
}

/*PCのみ表示*/
.pc_only{
  display:block;
}

/*モバイルのみ表示*/
.mb_only{
  display:none;
}

/*横スクロール禁止*/
html,body {
	overflow-x: hidden;
}

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

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

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
	/*スマホのみ有効（改行する）*/
	.sp_br{
		display: block;
	}
	
}