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

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

/* color:tomato */
.color-tomato {
    color:#ff6347;
}

/* 見出し first（緑系統） */
.subheading-green {
	color:#007b43;
    background-color:#d6e9ca;
	border-style: solid none;
	border-color:#55634C;
	padding:5px;
	font-size:larger;
}

/* 見出し first（桃色系統） */
.subheading-1 {
	color:#69821b;
    background-color:#fdeff2;
	border-style: solid none;
	border-color:#f09199;
	padding:5px;
	font-size:larger;
}

/* 見出し second（緑系統） */
.subheading-2 {
	color:#008080;
    background-color:#fff8dc;
	border-style: solid none;
	border-color:#008080;
	padding:5px;
	font-size:larger;
}

/* ボックス：枠線色／tomato、角／丸、一本線、margin有 */
.box-tomato {
	margin:1em;
	padding:1em;
	border:2px solid #ff6347;
	border-radius:0.5em;
}

/* ボックス：枠線色／teal、角／丸、一本線、margin有 */
.box-teal {
	margin:1em;
	padding:1em;
	border:2px solid #008080;
	border-radius:0.5em;
}

/* リスト：横１列並び */
ul.list-style01 {
	list-style:none;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	width:100%;
	margin:0;
	padding:0;
}

ul.list-style01 li{
	width:100%;
	margin:1%;
	padding:1em;
}

/* リスト：横２列並び */
ul.list-style02 {
	list-style:none;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	width:100%;
	margin:0;
	padding:0;
}

ul.list-style02 li{
	width:100%;
	margin:1%;
	padding:1em;
}

/* リスト；各項目にアンダーラインをつける */
ul.underline {
    list-style:none;
}

ul.underline li{
    border-bottom:1px solid #666666;
}

/* 画像を左に設定、文字を回り込ませる */
.img-left {
	float:left;
	margin-right:10px;
	margin-bottom:10px;
}

/* 画像を右に設定、文字を回り込ませる */
.img-right {
	float:right;
	margin-right:10px;
	margin-bottom:10px;
}

/* media screen */
@media screen and (min-width:960px) {
	ul.list-style02 li{
		float:left;
		width:48%;
		margin:1%;
		padding:1em;
	}
}

/* リスト：横３列並び */
ul.list-style03 {
	list-style:none;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	width:100%;
	margin:0;
	padding:0;
}

ul.list-style03 li{
	float:left;
	width:100%;
	margin:1%;
	padding:1em;
}

@media screen and (min-width:960px) {
	ul.list-style03 li{
		float:left;
		width:31%;
		margin:1%;
		padding:1em;
	}
}

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

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

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