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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 2024/9  .eo-event-dateコメントアウト*/
/* .eo-event-date, */
.eventorganiser-event-meta{
	display:none!important;
}
.eo-tc-event{
	margin: 0 0 4.8rem 0!important;
}
.eo-event-title{
	padding: 0 25px 25px 10px!important;
}

.eo-event-date{
	font-weight:bold;
	font-family: 'Noto Serif JP', serif;
}
.eo-event-header{
	font-style: normal!important;
	display: flex!important;
    align-items: baseline!important;
    justify-content: space-between!important;
}
.eo-tc-event .eo-event-date{
	font-style: normal!important;
}

.a-wrap{
	color:#f7f7f7;
}

.column-item{
	padding-bottom:80px;
}
.column-item img{
	text-align:center;
	padding:20px;
}


.fc-event{
/* 	border:#be780d!important; */
/* 	background:#be780d; */
}

#footer li a:hover{
	color:#001a33;
}

/* loading */
.loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #111;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
}
.loading.is-active {
  opacity: 0;
  visibility: hidden;
}
.loading-animation {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #111;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}
.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}



#map {
	overflow: hidden;
	position: relative;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}
.home .footer,.home .footer-center{
	padding:0;
}




.page .entry-title,.page .date-tags,.footer-meta{
	display:none;
}

#header{
	display:none;
}
.header-menu{
		background:#020202;
}
.header-item{
	display:flex;
	width:80%;
	margin:0 auto;
}
.logo-item{
	width:30%;
}
.logo-item2{
	width:100%;
}
.logo-item2 ul li{
	list-style:none;
	text-align:right;
}

#header-container{
	z-index:99;
}

#main{
	background:initial;
}
#container{
	overflow-x:hidden;
}

/* ヘッダー */
#menu-headermenu li a{
	position: relative;
	overflow: hidden;
	transition: all .2s;
}
#menu-headermenu li a:hover{
	background: #be780d!important;
	color:#fff!important;
}
#menu-headermenu li a:hover{
	transition-delay: .5s;
}
#menu-headermenu li a:before,
#menu-headermenu li a:after {
	content: "";
	position: absolute;
	left: 0;
	height: 2px;
	width:100%;
	background: #be780d;
	transition: all .5s;
}
#menu-headermenu li a::before {
	top: 0;
	transform: translateX(-100%);
}
#menu-headermenu li a::after {
	bottom: 0;
	transform: translateX(100%);
}
#menu-headermenu li a:hover::before ,
#menu-headermenu li a:hover::after {
	transform: translateX(0);
}


/* フォント */
*{
	font-family: 'Noto Serif JP', serif;
}
table th,table td{
	font-size:1rem;
}

/* 見出し */
.article h2,.article h3{
	border:none;
	background:none;
}
.double{
	width:100%;
	text-align:center;
}
.double h2{
	position:relative;
	display:inline-block;
}
.double h2:before, .double h2:after{
	content:"";
	display:block;
	width:200px;
	height:4px;
	border-top:1px solid #be780d!important;
	border-bottom:1px solid #be780d!important;
	position:absolute;
	top:50%;
	margin-top:-2px;
}
.double h2:before{left:-224px;}
.double h2:after{right:-224px;}
.pointBox{
	width:100%;
}
.point{
	position:relative;
	display:inline-block;
	padding:10px 40px;
	border-top:1px solid #be780d!important;
}
.point:before, .point:after{
	content:"";
	display:block;
	width:6px;
	height:6px;
	border-radius:50%;
	background:#be780d;
	position:absolute;
	top:-4px;
}
.point:before{
	left:-4px;
}
.point:after{
	right:-4px;
}


/* スライダー */
.flex-control-paging li a{
	 background: rgba(70,70,70,.9)!important;
}
.flex-control-paging li a.flex-active {
  background: rgba(240,240,240,.9)!important;
  cursor: default;
}


.onlineBox{
	position:relative;
	width:100%;
}
.online{
	position:absolute;
	margin:20px 0;
	top:80%;
	right:10px;
	padding:20px;
	border-radius:10px;
	background:rgba(0, 52, 102,0.7);
}

.top-gr{
	position:relative;
	padding:20px 0;
}
.gr{
	position:relative;
	padding:30px 0;
}
.img-sec{
	position:relative;
	height:300px;
}
.catchBox{
	position:relative;
	width:100%;
	height:60vh;
}

.reseveimg{
	position:relative;
	width:100%;
	height:400px;
	margin-bottom:0;
}
.reseveimg:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	height:100%;
	z-index:-2;
	background:url('https://tousa.bar/wp-content/uploads/2022/01/IMG_1504.jpg');
	background-position: center top!important;
	background-size: cover!important;
	background-repeat: no-repeat!important;
	background-attachment: fixed!important;
}
.catch-back{
	position:absolute;
	top:0;
	left:0;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	height:100%;
	z-index:-2;
	background:url('https://tousa.bar/wp-content/uploads/2022/01/catch-back.png');
	background-position: center top!important;
	background-size: cover!important;
	background-repeat: no-repeat!important;
	background-attachment: fixed!important;
}
.catch-text-inr{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.event-back{
	position:absolute;
	top:0;
	left:0;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	height:100%;
	z-index:-2;
	background:url('https://tousa.bar/wp-content/uploads/2022/01/IMG_1509.jpg');
	background-position: center top!important;
	background-size: cover!important;
	background-repeat: no-repeat!important;
	background-attachment: fixed!important;
	opacity:0.8;
}
.event-back:before{
	content: '';
	background: inherit;
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	z-index: -1;
}
.reseve-back{
	position:absolute;
	top:0;
	left:0;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	height:100%;
	z-index:-2;
	background:#001F3B;
}
/* .aboutitem{
	background:rgba(0,0,0,0.8);
	border-radius:5px;
	padding:20px;
	width:100%;
	height:100%;
} */
.text-center{
	margin: 16px auto;
	text-align: center;
	display: block;
}
.text-center .text-left{
	display:inline-block;
	text-align:left;
}
/* .about-back{
	position:absolute;
	top:-5%;
	left:0;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	height:119%;
	z-index:-2;
	background:url('https://tousa.bar/wp-content/uploads/2022/01/IMG_1496.jpg');
	background-position: center top!important;
	background-size: cover!important;
	background-repeat: no-repeat!important;
	background-attachment: fixed!important;
	opacity:0.8;
} */

/* ユーチューブ */
.video-container{
	margin: 0px auto;
	border: solid 1px #be780d ;
}
.video-container .video{
	margin-top:0;
}

/* sns-link */
.sns-link {
	color: #fff;
	transition: linear .3s;
}

.sns-link:hover {
	opacity: .6;
	color: #fff;
}

/* ボタン */
.btn-01{
	position:relative;
	max-width:500px;
	margin:0 auto;
	display:block;
	text-decoration:none;
	color:#fff;
	border:#fff solid 1px;
	padding:1rem;
	text-align:center;
	transition:0.2s;

	box-shadow:0 3px 10px rgba(255,255,255,0.5);
}
.btn-02{
	margin-top:10px;
	max-width:200px;
	margin-left: auto;
	display:block;
	text-decoration:none;
	color:#fff;
	border:#fff solid 1px;
	padding:1rem;
	text-align:center;
	transition:0.2s;

	box-shadow:0 3px 10px rgba(255,255,255,0.5);
}
.btn-01:hover,.btn-02:hover{
	color:#fff;
	box-shadow:0 3px 20px rgba(255,255,255,0.5);
}
.btn-reseve{
	padding:50px 0;
}
.reseveBox img{
	transition:0.3s;
}
.reseveBox img:hover{
	opacity:0.4;
}
.contact{
	height:100px;
}
.contact span{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:90%;
}

.fbbtn{
	display:block;
	text-decoration:none;
	padding:20px;
	background:#333;
	color:#fff!important;
	border:solid 1px #333;
	text-align:center;
	transition:0.3s;
}
.fbbtn:hover{
	background:#fff;
	color:#333!important;
}


.ContentOver-box{
	padding: 2rem 0;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}
.ContentOver-box-inner{
	margin: 0 8px;
}
.online-box{
	display:flex;
	width:100%;
	height:100%;
	flex-wrap: wrap;
}
.online-box-inner{
	width:50%;
	position:relative;
}
.inr1{
	padding:20px;
	text-align:center;
}
.inr1 p{
	display:inline-block;
	text-align:left;
}
.inr2{
	position:relative;
	background:url('https://tousa.bar/wp-content/uploads/2022/02/IMG_1569.jpg');
	background-size: cover!important;
	background-position: center top!important;
}
.inr2:before{
	content:'';
	position:absolute;
	top:20px;
	left:20px;
	width:100%;
	height:100%;
	background:#02315E;
	z-index:-1;
}
.inr2-1{
	position:relative;
	background:url('https://tousa.bar/wp-content/uploads/2022/02/IMG_1513.jpg');
	background-size: cover!important;
	background-position: center top!important;
}
.inr-left:before{
	left:-20px;
}

.spIMG{
	display:none;
}

/* 店舗案内 */
.pagetitle{
	position:relative;
	width:100%;
	height:100%;
}
.pagetitle .parts{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:3;
}
.parts p{
	 text-shadow:
            3px 3px 3px #000, -3px -3px 3px #000,
           -3px 3px 3px #000,  3px -3px 3px #000;
}
.item-center{
	text-align:center;
}
.item-center img{
	width:500px;
}

table tr:nth-of-type(2n+1) {
	background-color: initial;
}
.about-info th,.about-info td{
	border:none;
	background:none;
}
.about-info th{
	width:40%;
}
.about-info td{
	padding:10px;
}
.menu-table td{
	border:none;
}

/* メニュー */
.menu-midashi i{
	display:block;
	padding:5px 0;
}
.menu{
	border:#fff solid 1px;
	border-radius:10px;
	padding:20px 15px 40px;
}

/* イベント */
.sec-back{
	position:absolute;
	top:0;
	left:0;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	height:100%;
	z-index:-2;
	background:url('https://tousa.bar/wp-content/uploads/2022/01/drum-set-g6787bc885_1920.jpg');
	background-position: center top!important;
	background-size: cover!important;
	background-repeat: no-repeat!important;
	background-attachment: fixed!important;
}

/* レッスン予約 */
.monthly-calendar caption,.monthly-calendar span{
	font-family: 'Zen Kurenaido', sans-serif;
}
.monthly-calendar table th,.monthly-calendar .day-box.no-day,.day-calendar table th,.content-form th{
	background-color:initial;
}
.monthly-calendar .day-box.today {
  background-color: rgba(84, 157, 209,.6);
}
.content-form legend,.booking_client-fieldset{
	font-family: 'Zen Kurenaido', sans-serif;
}
#action-button button{
	font-family: 'Zen Kurenaido', sans-serif;
	font-size:1rem;
	font-weight:bold;
	padding:20px 40px;
	cursor:pointer;
}
.table td{
	border:none;
	border-bottom:solid 1px #fff;
}


/* お問い合わせ */
.search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select {
	background:#f0f0f0;
}
.wp-block-contact-form-7-contact-form-selector{
	width:80%;
	margin:0 auto;
}
.required,.optional{
	margin-left:20px;
	padding:0px 5px 2px;
	border-radius:5px;
	color:#fff;
}
.required{
	color:#f06565;
}
.optional{
	color:#5e94db;
}
.wpcf7 .wpcf7-submit:disabled{
	background:#fff;
	color:#707070;
	border:solid 1px #cfcfcf;
}
.wpcf7 .wpcf7-submit:disabled:hover{
	background:#fff;
	color:#707070;
	opacity:1;
	border:solid 1px #cfcfcf;
}
.wpcf7 .wpcf7-submit{
	margin:15px 0;
	background:#be780d;
	border:solid 2px #be780d;
	color:#fff;
	font-size:1.2rem;
	transition:0.3s;
	border-radius:5px;
	padding:15px;
}
.wpcf7 .wpcf7-submit:hover{
	border:solid 2px #be780d;
	background:#111111;
	color:#be780d;
}


/* モバイル */
.logo{
	height:80px!important;
}
#g-nav{
	/*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
	position:fixed;
	z-index: -1;
	opacity: 0;/*はじめは透過0*/
	/*ナビの位置と形状*/
	top:0;
	width:100%;
	height: 100vh;/*ナビの高さ*/
	background:rgba(0,0,0,0.8);
	/*動き*/
	transition: all 0.3s;
}
/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
	opacity: 1;
	z-index:999;
}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
	/*ナビの数が増えた場合縦スクロール*/
	position: fixed;
	z-index: 999; 
	width: 100%;
	height: 100vh;/*表示する高さ*/
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#g-nav ul {
	display: none;
	/*ナビゲーション天地中央揃え*/
	position: absolute;
	z-index: 999;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width:90%;
	text-align:center;
	padding-left:0!important;
}
#g-nav.panelactive ul {
	display: block;
}
#g-nav li{
	list-style: none;
}
#g-nav li a{
	color: #f7f7f7;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}
#g-nav li img{
	width:50%;
}

/* モバイルボタン */
.openbtn{
	position:fixed;
	z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	left: 10px;
	background:#000;
	cursor: pointer;
	width: 50px;
	height:55px;
	border-radius:10px;
}
/*ボタン内側*/
.openbtn span{
	display: inline-block;
	transition: all .4s;/*アニメーションの設定*/
	position: absolute;
	left: 14px;
	height: 2px;
	border-radius: 5px;
	background: #fff;
	width: 45%;
}
.openbtn span:nth-of-type(1) {
	top:13px; 
}
.openbtn span:nth-of-type(2) {
	top:19px;
}
.openbtn span:nth-of-type(3) {
	top:25px;
}
.openbtn span:nth-of-type(3)::after {
	content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
	position: absolute;
	top:5px;
	left:-2px;
	color: #fff;
	font-size: 0.8rem;
	text-transform: uppercase;
	text-align:center;
}
/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn.active span:nth-of-type(1) {
	top: 14px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
}
.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
.openbtn.active span:nth-of-type(3){
	top: 26px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}
.openbtn.active span:nth-of-type(3)::after {
	content:"Close";/*3つ目の要素のafterにClose表示を指定*/
	transform: translateY(0) rotate(-45deg);
	top:5px;
	left:-2px;
}

.sp{
	display:none;
}


.text-cl{
	padding:10px;
}
.text-cl h2 span{
	display:inline-block;
	text-align:left;
}
.br{
	display:none;
}


/* イベント状況 */
.fc-ltr .fc-basic-view .fc-day-number {
	text-align: center!important;
}
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table tbody td .fc-day-grid-event {
	display: block;
	margin-bottom: 5px;
	padding: 0 5px;
	line-height: 20px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	font-size: 10px;
	font-feature-settings: "palt";
	text-decoration: none;
	letter-spacing: 0;
	overflow: hidden;
	color:#000;
}
.fc-content .fc-time{
	display:none;
}
.eo-fullcalendar .fc-view > table > thead {
  background: none!important;
}
.eo-fullcalendar .fc-view > table > tbody {
  background: none!important;
}
.eo-fullcalendar-reset.fc-unthemed .fc-today {
  background: rgba(3, 62, 120,0.6)!important;
}

.sp-s{
	display:none;
}

/* mobile */
#menu-mobile-footer{
	background:#be780d;
}
#menu-mobile-footer .menu-icon{
	display:none;
}
#menu-mobile-footer .menu-caption{
	font-size:1rem;
	font-weight:bold;
	color:#111;
}

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

	.pagetitle .en{
		top:35%;
		right:18%;
	}
}
@media screen and (max-width: 860px){
  /*必要ならばここにコードを書く*/
	.eo-event-header{
		display: block!important;
	}
	.eo-event-title,
	.eo-event-date{
		padding: 0 25px 0 10px!important;
	}
}
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.pagetitle .en{
		top:30%;
		right:18%;
	}
	.online-box{
/* 		display:block; */
		width:100%;
	}
	.online-box-inner{
		width:100%;
		height:100%;
	}

	.spIMG{
		display:block;
	}

	.catchBox{
		height:80vh;
	}
	.catch-text-inr{
		width:90%;
	}

	.sp1{
		-ms-flex-order:0;
		-webkit-order:0;
		order:0;
	}
	.sp2{
		-ms-flex-order:1;
		-webkit-order:1;
		order:1;
	}

	#header{
		display:block;
		width:40%;
		margin:0 auto;
	}
	.header-menu{
		display:none;
	}

	.sp{
		display:block;
	}

	.wp-block-contact-form-7-contact-form-selector{
		width:95%;
	}


}

@media screen and (max-width: 768px) {
	.pc-s{
		display:none;
	}
	.sp-s{
		display:block;
	}
}

@media screen and (max-width: 599px) {
	.inverted {
		flex-direction:column-reverse!important;
	}
}

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

	.pagetitle .parts{
		left:52%;
	}

}