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

/*flex-box*/
.flex-center{display:flex;justify-content:center;flex-wrap:wrap;}
.flex-between{display:flex;justify-content:space-between;flex-wrap:wrap;}
.flex-start{display:flex;justify-content:start;flex-wrap:wrap;}

.flex-p100{flex: 0 1 100px;box-sizing:border-box;}
.flex-p150ex{flex: 1 1 150px;box-sizing:border-box;}
.flex-p150{flex: 0 1 150px;box-sizing:border-box;}
.flex-p200{flex: 1 1 200px;box-sizing:border-box;}
.flex-p300{flex: 0 1 300px;box-sizing:border-box;}
.flex-p400{flex: 0 1 400px;box-sizing:border-box;}
.flex-p450{flex: 0 1 450px;box-sizing:border-box;}
.flex-p500{flex: 0 1 500px;box-sizing:border-box;}

/*padding*/
.pd5{padding:5px;}
.pd10{padding:10px;}

/*align*/
.center{text-align:center;}
.right{text-align:right;}
.left{text-align:left;}

/*ボタン*/
.button{border-radius:10px;text-align:center;line-height:48px;}
.button a{text-decoration:none;display:block;}

/*border*/
.bdr-s{border:1px #cccccc solid;}
.bdr-d{border:1px #cccccc dotted;}
.bdr-r{border-radius:5px;}
.noborder{border:0 #000000 solid!important;}
.bdr-s a{text-decoration:none;display:block;color:#000000;}

/*Background-color*/
.bg_green{background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);}
.bg_pink{background-image: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);}
.bg_blue{background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);}
.bg_orange{background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);}
.bg_gray{background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);}
.bg_white{background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);}
.bg_beige{background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);}


/*color*/
.red{color:#cc0000;}
.orange{color:#ff9900;}
.blue{color:#3399ff;}
.purple{color:#cc33ff;}
.black{color:#000000;}
.white{color:#ffffff;}

/*font-size*/
.f10px{font-size:10px;}
.f12px{font-size:12px;}
.f14px{font-size:14px;}
.f16px{font-size:16px;}
.f18px{font-size:18px;}
.f20px{font-size:20px;}

/*box*/
	.yellowbox, /* 黄色ボックス */
	.graybox, /* グレーボックス */
	.redbox, /* 薄赤ボックス */
	 {
		font-size: 16px;
		line-height: 30px;
	}

.yellowbox {
	padding:20px 20px 20px 20px;
	border:solid 1px #ffcc00;
	background-color:#ffffe0;
	margin-bottom:20px;
	font-size: 14px;
}

.redbox {
	padding:20px 20px 20px 20px;
	border:solid 1px #ef5350;
	background-color:#ffebee;
	margin-bottom:20px;
	font-size: 14px;
}

.graybox {
	padding:20px 20px 20px 20px;
	border:solid 1px #ccc;
	background-color:#f3f3f3;
	margin-bottom:20px;
	font-size: 14px;
}

.purplebox {
	padding:20px;
	border:solid 1px #8c1aff;
	background-color:#f2e6ff;
	margin-bottom:20px;
	font-size: 14px;
}

/*Google recaptchaロゴ削除
.grecaptcha-badge { visibility: hidden; }*/

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


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

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

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