@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/**
 * 全体
----------------------------------------------------------------*/
:root{
	
	/* 配色 */
	--main:rgb(23,209,239);
	--sub:rgb(255,72,116);
	--black:rgb(28,28,28);
	--water:rgb(23,209,239);
	--pink:rgb(255,72,116);
	--sky:rgb(217,238,248);
	--black:rgb(28,28,28);
	--jetblack:rgb(10,10,10);
	
	--main9:rgb(46,213,240);
	--sub9:rgb(255,90,129);
	--black9:rgb(50,50,50);
	--water9:rgb(46,213,240);
	--pink9:rgb(255,90,129);
	--sky9:rgb(220,239,248);
	--black9:rgb(50,50,50);
	--jetblack9:rgb(34,34,34);
	
	--main8:rgb(69,218,242);
	--sub8:rgb(255,108,143);
	--black8:rgb(73,73,73);
	--water8:rgb(69,218,242);
	--pink8:rgb(255,108,143);
	--sky8:rgb(224,241,249);
	--black8:rgb(73,73,73);
	--jetblack8:rgb(59,59,59);
	
	--main7:rgb(92,222,243);
	--sub7:rgb(255,126,157);
	--black7:rgb(96,96,96);
	--water7:rgb(92,222,243);
	--pink7:rgb(255,126,157);
	--sky7:rgb(228,243,250);
	--black7:rgb(96,96,96);
	--jetblack7:rgb(83,83,83);
	
	--main6:rgb(115,227,245);
	--sub6:rgb(255,145,171);
	--black6:rgb(118,118,118);
	--water6:rgb(115,227,245);
	--pink6:rgb(255,145,171);
	--sky6:rgb(232,244,250);
	--black6:rgb(118,118,118);
	--jetblack6:rgb(107,107,107);
	
	--main5:rgb(139,232,247);
	--sub5:rgb(255,163,185);
	--black5:rgb(141,141,141);
	--water5:rgb(139,232,247);
	--pink5:rgb(255,163,185);
	--sky5:rgb(236,246,251);
	--black5:rgb(141,141,141);
	--jetblack5:rgb(132,132,132);
	
	--main4:rgb(162,236,248);
	--sub4:rgb(255,181,199);
	--black4:rgb(164,164,164);
	--water4:rgb(162,236,248);
	--pink4:rgb(255,181,199);
	--sky4:rgb(239,248,252);
	--black4:rgb(164,164,164);
	--jetblack4:rgb(157,157,157);
	
	--main3:rgb(185,241,250);
	--sub3:rgb(255,200,213);
	--black3:rgb(186,186,186);
	--water3:rgb(185,241,250);
	--pink3:rgb(255,200,213);
	--sky3:rgb(243,249,252);
	--black3:rgb(186,186,186);
	--jetblack3:rgb(181,181,181);
	
	--main2:rgb(208,245,251);
	--sub2:rgb(255,218,227);
	--black2:rgb(209,209,209);
	--water2:rgb(208,245,251);
	--pink2:rgb(255,218,227);
	--sky2:rgb(247,251,253);
	--black2:rgb(209,209,209);
	--jetblack2:rgb(206,206,206);
	
	--main1:rgb(231,250,253);
	--sub1:rgb(255,236,241);
	--black1:rgb(232,232,232);
	--water1:rgb(231,250,253);
	--pink1:rgb(255,236,241);
	--sky1:rgb(251,253,254);
	--black1:rgb(232,232,232);
	--jetblack1:rgb(230,230,230);
	
	--gray:#ccc;
	--silver:#f5f5f5;
	--none:rgba(0,0,0,0);
	
	--gap:clamp(
	
		/* 【最小余白】SP時の余白(半分) */
		calc(1px * var(--gap-base) / 2),
		
		/* 【推奨余白】SP時の余白(半分)相当の画面比値 */
		calc(var(--gap-base) / var(--tab) * 100vw),
		
		/* 【最大余白】PC時の余白 */
		calc(1px * var(--gap-base))
	
	);
}

/* ボディ */
body{
	font-family:var(--mincho);
	font-size:var(--s);
	letter-spacing:.1em;
}

/**
 * プロトタイプ
----------------------------------------------------------------*/
/* ボタン */
.minbutton{
	display:inline-block;
	background:var(--main);
	color:white;
	border-radius:.3em;
	padding:.2em .5em;
	margin:0 .5em;
}
.minbutton:hover{ background:var(--sub); }
.minbutton + .minbutton{ margin-left:0; }
.minbuttons > .minbutton{ margin:0 .5em .5em 0; }

/* ラベル */
.label{
	display:inline-block;
	background:black;
	color:white;
	padding:0 .5em;
	margin:.2em .5em .2em 0;
}

/* 見出し */
.h2::after{
	content:'';
	display:inline-block;
	margin:0 auto;
	width:100px;
	height:4px;
	background:var(--main);
	margin:20px;
}
.h2.-pink::after{ background:var(--sub); }
.h3{
	background:var(--main);
	color:white;
	padding:10px 20px 10px 25px;
	border-radius:10px;
	margin-bottom:30px;
	position:relative;
}
.h3::before{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	width:10px;
	background:white;
	background:rgba(255,255,255,.5);
	content:'';
	display:block;
}
.h3.-pink{ background:var(--sub); }

/* テーブル */
.table > table{
	border-top:4px solid var(--main);
	border-bottom:4px solid var(--main);
}
.table > table tr > th{ color:var(--main); }
.table > table tr > *{ font-size:var(--m); }
.table > table tr:nth-child(odd) > *{ background:var(--sky3); }
.table.-pink > table{ border-color:var(--sub); }
.table.-pink > table tr > th{ color:var(--sub); }
.table.-pink > table tr:nth-child(odd) > *{ background:rgb(255,249,250); }

/* リスト */
.list > li::before{
	content:'●';
	color:var(--main);
}

/* 脚注 */
.note{
	background:var(--silver);
	padding:20px;
	font-size:var(--xs);
	margin-top:20px;
	border-radius:15px;
}

/* エラー */
.errors{
	background:rgb(255,245,248);
	padding:20px;
	margin:20px 0;
	border-radius:15px;
}

/* メインメニュー */
.mainmenu > ul > li > a{
	display:block;
	font-size:var(--l);
	font-weight:bold;
	padding:20px;
	color:var(--main);
	border-top:1px solid var(--main);
	border-left:1px solid var(--main);
	border-right:1px solid var(--main);
}
.mainmenu > ul > li:first-child > a{
	border-top-right-radius:10px;
	border-top-left-radius:10px;
}
.mainmenu > ul > li:last-child > a{
	border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
	border-bottom:1px solid var(--main);
}
.mainmenu > ul > li > a:hover{
	background:var(--sub);
	border-color:var(--sub);
	color:white;
}
.mainmenu > ul > li:hover + li > a{ border-top-color:white; }

/* セットリスト */
.setlist{
	background:rgb(255,249,250);
	border-bottom:4px solid var(--sub);
}
.setlist .minbutton{ background:var(--sub); }
.setlist .minbutton:hover{ background:var(--main); }
.setlist > section{
	padding:20px 20px 20px 130px;
	countercounter-reset:setlist;
	counter-increment:setlist 1;
	position:relative;
	overflow:hidden;
	min-height:130px;
}
.setlist > section:not(:last-child){ border-bottom:4px dashed var(--sub); }
.setlist > section > h4{
	font-size:var(--xl);
	line-height:1.3;
	padding:20px 0 10px;
}
.setlist > section > h4 > strong{
	background:var(--black);
	color:white;
	padding:4px 10px;
	font-size:80%;
}
.setlist > section > h4 > small{
	display:block;
	color:var(--black5);
	font-size:var(--s);
	padding-top:10px;
}
.setlist > section > h4::before{
	content:counter(setlist);
	font-family:"Libre Baskerville", serif;
	position:absolute;
	background:white;
	width:90px;
	height:90px;
	border-radius:50%;
	top:20px;
	left:20px;
	z-index:0;
	font-size:50px;
	line-height:90px;
	color:var(--sub5);
	text-align:center;
}
.setlist > section > section{
	padding:10px 0;
	border-top:1px solid #ccc;
}
.setlist > section > section > h5{
	font-size:var(--m);
	font-weight:bold;
}
.setlist > section > section > footer > .minbutton:first-child{ margin-left:0; }
.setlist > section > section > footer > .minbutton:last-child{ margin-right:0; }
.setlist > section > section > footer > section{
	display:flex;
	gap:10px;
}
.setlist > section > section > footer > section + section{ margin-top:10px; }
.setlist > section > section > footer > section > audio{ flex-basis:100%; }
.setlist > section > section > footer > section > .minbutton{
	flex-basis:240px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
	line-height:1.4;
}
@media screen and (max-width: 768px){
	.setlist > section{ padding:20px; }
	.setlist > section > h4{ padding:10px 0 10px 70px; }
	.setlist > section > h4::before{
		width:60px;
		height:60px;
		font-size:34px;
		line-height:60px;
	}
	.setlist > section > h4 > small{ padding-top:0; }
}
@media screen and (min-width: 768px){
	.setlist > section > section{ display:flex; }
	.setlist > section > section > h5{
		flex-basis:180px;
		padding-right:20px;
	}
	.setlist > section > section > footer{ flex-basis:100%; }
}

/**
 * ヘッダー
----------------------------------------------------------------*/
/* ヘッドカード */
#hcard{ height:80px; }
#logo{
	display:inline-block;
	padding:10px;
}
#logo > img{
	max-width:none;
	max-height:60px;
}
#open > img{
	max-width:none;
	max-height:80px;
}

/* モバイルメニュー */
#spmenu{ background:rgba(23,209,239,0.9); }
#close > img{
	max-width:none;
	max-height:80px;
}
@media screen and (max-width: 768px){
	#spmenu{ padding-top:100px; }
}

/* グロナビ */
.nav > ul{ font-size:0; }
.nav > ul > li{
	display:inline-block;
	border-right:1px solid white;
}
.nav > ul > li > a{
	display:inline-block;
	padding:6px 10px;
	color:white;
	font-size:var(--m);
	font-weight:bold;
}
.nav > ul > li > a:hover{
	background:var(--sub);
	color:white;
}
#bnav{ background:var(--black); }
#enav{ background:var(--main); }
@media screen and (max-width: 768px){
	#bnav,
	#enav{ background:none; }
	#bnav{ margin-bottom:40px; }
	.nav > ul > li{
		display:block;
		border:none;
	}
	.nav > ul > li > a{
		display:block;
		font-size:var(--l);
		padding:10px 20px;
	}
}

/**
 * フッター
----------------------------------------------------------------*/
#cr{
	background:var(--main);
	color:white;
	font-weight:bold;
	padding:6px 20px;
	text-align:center;
	margin-top:200px;
}

/**
 * コンテンツ
----------------------------------------------------------------*/
body > main{ min-height:1000px; }
#pan{ font-size:var(--xxs); }
#pan > ol > li{ display:inline-block; }
#pan > ol > li:not(:last-child)::after{ content:'>'; }
#pagename{
	padding:40px 20px;
	background:var(--main1);
	text-align:center;
}
#pagename > p{
	text-align:center;
	font-size:var(--m);
}
#pagename > h1{
	font-size:var(--xl);
	font-weight:bold;
}

/**
 * スポット：TOP
----------------------------------------------------------------*/
#schedules > section + section{ margin-top:60px; }
#login{
	margin:80px auto;
	max-width:768px;
}
#login > h1{
	max-width:512px;
	margin:0 auto;
	padding-bottom:40px;
}

/**
 * フォーム
----------------------------------------------------------------*/
/* リッチフォーム初期設定 */
.richform{

	/* 配色 */
	--black:var(--black);
	--gray:var(--gray);
	--silver:var(--silver);
	--blue:var(--sub);
	--blue-disabled:var(--sub5);
	--white:white;
	--red:crimson;
	--default-color:rgba(0,0,0,0);

}
:focus{ outline:none; }

/* 入力フォーム */
.richform input[type="text"],
.richform input[type="password"],
.richform input[type="tel"],
.richform input[type="email"],
.richform textarea{
	background:white;
	border:1px solid #ccc !important;
}

/* ラジオボタン */
.richform .radio input[type="radio"] + span{
	background:white;
	border:1px solid #ccc;
	padding:.2em .5em;
}
.richform .radio input[type="radio"]:checked + span{
	background:var(--sub);
	color:white;
}
.richform .radio .wpcf7-list-item{ margin:0; }
.richform .radio .wpcf7-list-item:not(:first-child) input[type="radio"] + span{
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}
.richform .radio .wpcf7-list-item:not(:last-child) input[type="radio"] + span{
	border-top-right-radius:0;
	border-bottom-right-radius:0;
	border-right:0;
}

/* 必須 */
.richform th{
	position:relative;
	padding:10px 0 10px 65px !important;
}
.richform th::before{
	position:absolute;
	content:'任意';
	background:var(--main);
	color:white;
	left:10px;
	border-radius:4px;
	display:inline-block;
	padding:4px 10px;
	font-size:12px;
	line-height:1.5;
	margin-top:6px;
}
.richform th.req::before{
	content:'必須';
	background:var(--main);
}

/* 送信ボタン */
.richform .submit{ padding:40px 20px; }
.richform .submit,
.richform .submit p{ text-align:center; }
.richform input[type="submit"]{
	padding:10px 100px;
	background:var(--main);
}
.richform input[type="submit"]:hover{
	background:var(--sub);
	color:white;
}
.richform .wpcf7-spinner{
	display:block !important;
	margin:20px auto !important;
}

/* スマホ */
{
	.richform table,
	.richform table thead,
	.richform table tbody,
	.richform table tr,
	.richform table th,
	.richform table td{ display:block; }
}

/**
 * 本文
----------------------------------------------------------------*/
/* 段落 */
.content p + p{ margin-top:10px; }

/* リンク */
.content a:not(.wp-block-button__link){ color:var(--sub); }
.content a:not(.wp-block-button__link):hover{ color:var(--main); }

/* 見出し */
.content h2,
.content h3,
.content h4,
.content h5,
.content h6{
	font-weight:bold;
	margin:10px 0;
}
.content h2{ font-size:var(--xxl); }
.content h3{ font-size:var(--xl); }
.content h4{ font-size:var(--l); }
.content h5{ font-size:var(--m); }
.content h6{ font-size:var(--s); }

/* リスト */
.content ul,
.content ol{ margin:10px 0; }
.content ul > li::before{
	content:'●';
	color:var(--sub);
}
.content ol{ counter-reset:content-ol; }
.content ol > li::before{
	content:counter(content-ol)". ";
	counter-increment:content-ol;
	color:var(--sub);
	font-weight:bold;
}

/* カラム */
.wp-block-columns{ margin:40px 0; }

/* ボタン */
.wp-block-buttons{ margin:40px 0; }
.wp-block-button__link:hover{ opacity:.7; }

/* 画像 */
.wp-block-image{ margin:20px 0; }
