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

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

/***** コンタクトフォーム *****/
input[type="submit"] {
	font-size:16px;
	font-family:Arial;
	font-weight:500;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #dcdcdc;
	padding:9px 18px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background-color:#ededed;
	color:#172846;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}
input[type="submit"]:hover {
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color:#dfdfdf;
}
input[type="submit"]:active {
	position:relative;
	top:1px;
}
.table-contactform7{
  overflow: hidden;
  font-size:15px;
  table-layout: fixed;
  border:5px solid #253762;
  border-radius:8px;
  border-spacing: 0;
  border-collapse: separate;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
} 
.required-contactform7{
  padding: 5px;
  background: #DE8686;
  color: #fff;
  border-radius: 3px;
  margin-right: 3px;
}
.unrequired-contactform7{
  padding: 5px;
  background: #BDBDBD;
  color: #fff;
  border-radius: 3px;
  margin-right: 3px;
}
.table-contactform7 th{
  font-weight:500;
  padding: 8px;
}
.table-contactform7 td{
  padding: 8px;
}
.table-contactform7 input[name="your-name"]{
  width: 50%;
  height: 25px !important;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px 6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.table-contactform7 input[name="your-email"]{
  width: 80%;
  height: 25px !important;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px 6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.table-contactform7 input[name="zip"]{
  width: 50%;
  height: 25px !important;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px 6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.table-contactform7 input[name="addr"]{
  width: 80%;
  height: 25px !important;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px 6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.table-contactform7 input[name="tel-737"]{
  width: 50%;
  height: 25px !important;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px 6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.table-contactform7 textarea{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px 6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
 
.message-100 textarea{
  width: 100%;
  margin: 5px 10px 10px 5px;
}

@media screen and (min-width: 900px){
  .table-contactform7 th{
    width:28%;
  }
    }
     
@media screen and (max-width: 900px){
.table-contactform7{
  display:block;
}     
       
  .table-contactform7 tbody,
  .table-contactform7 tr{
    display: block;
    width: 100%;
  }
  .table-contactform7 th{
  width:100%;
  display:block;
  margin: 0 auto;
  border:none;
}
.table-contactform7 td{
  display: list-item;
  list-style-type:none;
  margin:0;
  padding:0;
  width: 100%;
  border-top: none !important;
}
}
/***** コンタクトフォーム End*****/


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

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

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