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

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

table , td, th {
	border: 2px solid #595959;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	width: 100px;
	height: 50px;
}
th {
	background: #f0e6cc;
}
.even {
	background: #fbf8f0;
}
.odd {
	background: #fefcf9;
}


/*スマホContact Form 7カスタマイズ

/*予約フォームのスマホ対応*/

/* 必須・任意のサイズ調整 */	
.inquiry .haveto,.inquiry .any {	
font-size:10px;
}

/*見出し欄*/
.inquiry th{
 text-align:left;
 font-size:14px;
 color:#444;
 padding-right:5px;
 width:30%;
 background:#f7f7f7;
 border:solid 1px #d7d7d7;
}

/*通常欄*/
.inquiry td{
 font-size:13px;
 border:solid 1px #d7d7d7;	
}

/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}

/*必須の調整*/
.haveto{
 font-size:7px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}

/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}

/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}

/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:20px;
 width:90%;
 background:#ffaa56;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 margin:25px auto 0;
}

/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#fff;
 color:#ffaa56;
 border:2px solid #ffaa56;
}

/* contact form 解答欄 サイズ調整*/

#short{
	width: 20%;
}

#short2{
	width: 35%;
}

#middle{
	width: 50%;
}

#long{
	width: 80%;
}

#zip{
	width: 30%;
}

#pref{
	width: 30%;
}


/*チェックボックス拡大*/
input[type=checkbox] {
  transform : scale(1.5);
}

/*送信後、フォーム消し*/
form.sent p{
display:none;
}

/* 見出し用CSS */
/* H1 */
.article h1 {
	color: #555;
	border-bottom: solid 2px #00B7EE;
	padding: 10px 0;
}
.article h1:first-letter {
	color: #00B7EE;
}


/* H1
h1 {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
}
h1:before, h1:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: black;
}
h1:before {
  left: 7px;
}
h1:after {
  right: 7px;
}
*/

.article h2{
  background: #a9e1ff; /*背景色*/
  padding: 0.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em;/*角の丸み*/
}

/* H3 */

 
/* H4 */
.article h4{
color: #364e96;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #00B7EE;/*上線*/
  border-bottom: solid 3px #F7B146;/*下線*/
}
 
/* H5 */
.article h5{
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #F7B146;/*左線*/
} 
/* H6 
.article h6{
border-bottom:none;
padding: 0;
}*/

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

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

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