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

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


/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}


/* 見出しのデザインリセット */
/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}


/* H2の見出しを変える */
.article h2 {
  padding: 0.5em;/*文字周りの余白: 幅+em(単位)*/
  color: #2d2d2d;/*文字色: 色コード*/
  background: #f0fff0;/*背景色: 色コード*/
  border-left: solid 5px #007b43;/*左線: 実線 太さ+単位(px) 色コード*/
}

/* H3の見出しを変える */
h3 {
  position: relative;
  color: #333;
  text-shadow: 0 0 2px white;
}
h3:before {
  content: "";
  position: absolute;
  background: #EF5B9C;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: 50%;
  /* border: dashed 1px white; */
  left: 0px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}




/* お問い合わせフォームを変える */
/* Contact Form 7 */
/* 必須マーク */
.must{
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #f58694; /* 背景色 */
	border-radius: 5px;
}

/* 任意マーク */
.free {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #7fbfff; /* 背景色 */
	border-radius: 5px;
}



/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8; /* 枠線の色 */
	border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

/* 必須項目の入力欄を見やすくする */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	background: #eff1f5; /* 背景色 */
}

/* 送信ボタンを見やすくする */
input.wpcf7-submit {
	width: 50%; 
	margin-right: 10px;
	padding: 6px 10px;
	border-color: #C84772; /* 枠線の色 */
	background: #C84772; /* ボタンの色 */
	color: #fff;
	font-size: 20px;
	font-weight: 300;
	border-radius: 5px;
}

/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}







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

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

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