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

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

.admin-responsive {
	display:none;
}

#main{
	background : rgba(255,255,255,0.5)
}
.mobile-only {
	display:none;
}

/* トップへ戻るボタン画像の表示調整 */
.go-to-top-button {
 width: 100px; /* ボタン画像の表示幅 */
 height: auto; /* ボタン画像の高さは自動調整 */
}
.go-to-top-button:hover { /* カーソルを合わせると少し拡大する */
  transform: scale(1.1);
}
.go-to-top {
 right: -5px; /* 右から10pxの位置に配置 */
 bottom: 30px; /* 下から30pxの位置に配置 */
}

#reservation_menu {
	text-align:right;
}

#reservation_menu a{
	text-decoration:none;
	padding:5px 15px;
	text-align:center;
	width:180px;
}

.reservation{
	border-radius:5px;
	border:solid 1px #c30d23;
	font-size:0.9em;
	color:#c30d23;
}

.reservation:hover{
	background:rgb(255 0 0 / 0.5);
	transition: 0.5s;
}

.recruit {
	border-radius:5px;
	border:solid 1px #172A88;
	font-size:0.9em;
	color:#172A88;
	
}

.recruit:hover{
	background:rgb(23 46 136 / 0.5);
	transition: 0.5s;
	color:#172A88;
}

/*コンタクトフォーム*/
 .wpcf7 table p {
display: inline;
}
.wpcf7 table {
width:80%;
margin:20px auto;
}

.birthday{
	margin-top:-30px;
}
.wpcf7-turnstile{
text-align:center;
}

input[type="text"],input[type="email"],input[type="tel"]{
width:50%;
}
input[type="date"]{
width: 150px;
height:auto;
margin-right: 10px;
}
input.hope-day{
width: 170px;
height:auto;
margin-right: 10px;
}

.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
color: #cc0000;
font-weight: bold;
}

input[type="submit"],
input[type=button].wpcf7-previous {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 20px;
  font-weight: bold;
  width: 30%;
  margin:5px;
  padding: 10px;
  border-radius: 10px;
  background-color: #c30d23;
  border: none;
  color: #fff;
  cursor: pointer;
}
span.wpcf7-spinner {
  display: none;
}
input[type="submit"]:hover,
input[type=button].wpcf7-previous:hover{
	background:rgb(255 0 0 / 0.5);
	transition: 0.5s;
}
.form_btn{
  text-align:center;
}
select{
width: 150px;
margin-right: 10px;
}
.hissu{
font-size: 0.8em;
padding: 0 3px;
background: #cc0000;
color: #ffffff;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 2px;
display: inline-block;
}
.ninni{
font-size: 0.8em;
padding: 0 3px;
background: #036eb8;
color: #ffffff;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 2px;
display: inline-block;
}

.birthday select {
	width:25%;
}
span.wpcf7-list-item{
	display:block;
}

#address #zip{
	width:30%;
	min-width:120px;
}
#address #addr{
	width:50%;
	min-width:300px;
}
#address #add-other{
	width:50%;
	min-width:300px;
}
.wpcf7 input::placeholder{ 
	color: #888; 
}

.time select {
	width:65px;
}

/* 初期状態（無効っぽい表示） */
 .reservation_form {
 opacity: 0.2;
 pointer-events: none; 
 transition: 0.3s;
}

/* チェックされたらスタイルを変更 */
.toggle:checked ~ .reservation_form {
 opacity: 1;
 pointer-events: auto; 
}

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

	#reservation_menu {
		display:none;
	}
	.mobile {
		display:none;
	}
	.mobile-only {
		display:block;
	}
}

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

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