@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){
  /*必要ならばここにコードを書く*/
}

/*ボックス1*/

.box1{
    position: relative;
    background: #dcefff;
    box-shadow: 0px 0px 0px 5px #dcefff;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
}
.box1:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #5fb3f5 #fff #5fb3f5;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box1 p {
    margin: 0; 
    padding: 0;
}






/*検索ボックスのカスタマイズ*/

.search-box .search-edit {
	border-radius: 50px;
	width: 40%;
}

.search-box {
	text-align: center;
}

.search-submit {
	position: initial;
}

@media only screen and (max-device-width: 480px) {
 .search-box .search-edit {
	border-radius: 50px;
	width: 60%;
	 font-size: 14px;
}
}



































/* 共通 */
 
.balloon-simple {
 width: 100%;
 margin: 20px 0;
 overflow: hidden;　
}
 
.balloon-simple .icon-right img,
.balloon-simple .icon-left img{
 width: 100%;
 background-size:cover;
}
 
.icon-right p.name,
.icon-left p.name{
 text-align: center;
 font-size: 85%;
 top: -20px;
 position: relative;
}
 
.balloon-simple .balloon {
 width: 100%; 
}
 
.serif-right,
.serif-left {
 position: relative;
 padding: 45px 30px 20px 15px;
 border-radius: 10px;　//吹き出しの形を変更できます
}
 
.serif-right:after,
.serif-left:after {
 content: "";
 position: absolute;
 top: 15px;
 border-top: 10px solid transparent;
 border-bottom: 5px solid transparent;
 border-left: 5px solid transparent;
}
 
.serif-right p,
.serif-left p  {
 margin: 0;
 padding: 0;
 color: #fff;　//吹き出しのセリフの文字色を変更できます
}
 
/* 共通 end */
 
/* 右の吹き出し */
 
.balloon-simple .icon-right {
 float: right;
 width: 100px;
 margin-right: 10px;
}

.serif-right {
 margin: 40px 40px 0 0px;
 background: #85e3ff;　//右の吹き出しの背景色を変更できます
 float: right;   
}
 
.serif-right:after {
 transform: scale(-1, 1);
 right: -22px;
 border-right: 20px solid #85e3ff;　//右の吹き出しの三角部分の色を変更できます
}
 
/* 右の吹き出し end */
 
/* 左の吹き出し */
 
.balloon-simple .icon-left {
 float: left;
 width: 100px;
 margin-left: 10px;
}

@media only screen and (max-device-width: 480px) {
.balloon-simple .icon-left {
 float: left;
 width: 50px;
 margin-left: 10px;
}
}
 
.serif-left{
 display: block;
 margin: 0 0 0 140px;
 background: #dcefff;　//左の吹き出しの背景色を変更できます
}

@media only screen and (max-device-width: 480px) {
.serif-left{
 display: block;
 margin: 0 0 0 85px;
 background: #dcefff;　//左の吹き出しの背景色を変更できます
}
}
 
.serif-left:after{
 left: -22px;
 border-right: 20px solid #dcefff;　//左の吹き出しの三角部分の色を変更できます
}
 
/* 左の吹き出し end */





/* カルーセルの画像サイズ指定 */
.card-thumb img {
    width: 100em;
}

















#main .button-caption {
	display: none; /*キャプション非表示*/
}


/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字にする*/
	color: #875d5b; /*文字色を指定*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央揃え*/
}
.sns-share-buttons a {
	border-radius: 50%; /*アイコンを丸くする（カスタマイズを！）*/
	font-size: 20px; /*アイコンのサイズ（カスタマイズを！）*/
	margin: 0 5px; /*ボタン同士の間隔（カスタマイズを！）*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅（カスタマイズを！）*/
	height: 40px; /*ボタンの高さ（カスタマイズを！）*/
}


/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字にする*/
	color: #875d5b; /*文字色を指定*/
}
.sns-follow-buttons {
	justify-content: center; /*中央揃え*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*アイコンを丸くする（カスタマイズを！）*/
	font-size: 20px; /*アイコンのサイズ（カスタマイズを！）*/
	margin: 0 5px; /*ボタンの間隔（カスタマイズを！）*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅（カスタマイズを！）*/
	height: 40px; /*ボタンの高さ（（カスタマイズを！）*/
}

/*投稿日および更新日の余白調整*/
.date-tags {
    line-height: 3;
}