@charset "utf-8";
/* CSS Document */

/*voice
----------------------------------------------------------------------*/

#voice {
	display:none;
	/*position: absolute; top: -9999px; left: -9999px;*/
}
@media screen and (min-width:801px) {

/*音声ボタンブロック全体*/
#voice {
	display: block;
	position: absolute;
	right: 100px;		/*ヘッダーブロックに対して右から100pxの場所に配置*/
	top: 0px;		/*ヘッダーブロックに対して上から0pxの場所に配置*/
	width: 260px;	/*ブロック幅*/
	background: #fff;	/*背景色*/
	box-shadow: 0px 0px 8px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は20%色がついた状態の事。*/
	border-radius: 0px 0px 5px 5px;	/*角丸のサイズ。左上、右上、右下、左下への順。*/
	line-height: 20px;	/*高さ*/
	padding: 0px;	/*上下、左右へのボックス内の余白*/
	background-color: #e5005e;
}
/*「文字サイズ」のテキスト*/
#voice p {
	float: left;
	font-size: 18px;
	padding: 0 20px;
	color:#fff;
}
/*文字サイズボタン１個あたり*/
#voice ul li {
	float: left;	/*左に回り込み*/
	list-style: none;
}

.play_mark {
	font-size: 26px;
	position: relative;
	width: 1.3em;
	height: 1.3em;
	border: 0.1em solid #fff;
	border-radius: 100%;
	margin-top:10px;
	margin-right:7px;
	margin-bottom: 7px;
	cursor: pointer;
}
/* マーク */
.play_mark::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0.4em;
	width: 0;
	height: 0;
	border-top: 0.4em solid transparent;
	border-left: 0.6em solid #fff;
	border-bottom: 0.4em solid transparent;
}
.play_mark:hover {
	background: #fff100;
}

.stop_mark {
	font-size: 26px;
	position: relative;
	width: 1.3em;
	height: 1.3em;
	border: 0.1em solid #fff;
	border-radius: 100%;
	margin-top:10px;
	margin-right:8.4px;
	cursor: pointer;
}
/* マーク */
.stop_mark::before {
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0.25em;
	width: 0.65em;
	height: 0.65em;
	background-color: #fff;
}

.stop_mark:hover {
	background: #fff100;
}

.pause_mark {
	font-size: 26px;
	position: relative;
	width: 1.3em;
	height: 1.3em;
	border: 0.1em solid #fff;
	border-radius: 100%;
	margin-top:10px;
	cursor: pointer;
}
/* マーク */
.pause_mark::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.3em;
	height: 1.3em;
	background:
	linear-gradient(to bottom, #fff 0%, #fff 100%) 0.35em 0.3em,
	linear-gradient(to bottom, #fff 0%, #fff 100%) 0.65em 0.3em
	;
	background-size: 0.2em 0.6em;
	background-repeat: no-repeat;
}

.pause_mark:hover {
	background: #fff100;
}
.video_a {
	visibility: hidden;
}
}/*追加設定終わり*/



/*その他
---------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #e94a08 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mt30 {margin-top: 30px !important;}
.mb30 {margin-bottom: 30px !important;}
.mt30 {margin-top: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee; border: 1px solid #ccc; border-radius: 3px;margin: 2px 0; word-break: break-all;}
.large {font-size: 1.1em !important;}
.block {display: block !important;}
.mt-50 {margin-top: 0!important;}

@media screen and (min-width:801px) {
.ws {width: 48%;display: inline;}
.large {font-size: 1.8em !important;}
.mt-50 {margin-top: -100px;}
}/*追加設定終わり*/

/* time-schedule */
.time-schedule {
  min-width: 200px;
  max-width: 100%;
  list-style: none;
  margin: 0 auto 1em 6em;
  padding-left: 20px;
  border-left: 6px solid #f9d5e5;
  box-sizing: border-box;
	line-height: 1.3em;
}

.time-schedule li {
  width: 100%;
  margin: 0 0;
  padding: 5px 0;
  position: relative;
}

.time-schedule span.time {
  width: 5em;
  display: inline-block;
  margin-left: -8em;
  padding: 0 0 5px;
  margin-top: 15px;
  vertical-align: top;
  position: relative;
  text-align: right;
  box-sizing: border-box;
}

.time-schedule span.time::after {
  content: "";
  position: absolute;
  right: -26px;
  top: 0;
  background: #e5005e;
  width: 16px;
  height: 16px;
	border:#fff solid 2px;
  border-radius: 10px;
}

.time-schedule .sch_box {
  display: inline-block;
  width: 100%;
  margin-left: 30px;
  padding: 15px 10px 15px 10px;
  vertical-align: middle;
  background: #efefef;
  box-sizing: border-box;
  border-radius: 6px;
}

.time-schedule .sch_title {
  font-size: 16px;
  font-weight: 700;
/*  line-height: 1.5;*/
}

.time-schedule .sch_tx {
  font-size: 14px;
  font-weight: normal;
/*  line-height: 1.5;*/
}

@media screen and (min-width:801px) {

.time-schedule span.time::after {
  content: "";
  position: absolute;
  right: -29px;

}
}/*追加設定終わり*/






/*btn2（準備中ボタン）
---------------------------------------------------------------------*/
.btn2 a {
  text-shadow: none;
  display: block;
  text-decoration: none;
  background: var(--base-inverse-color); /*背景色。冒頭のprimary-colorを読み込みます。*/
  color: var(--base-color); /*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
  font-size: 1.4rem; /*文字サイズ。140%に。*/
  padding: 0.5rem 2rem; /*ボタン内の余白。上下、左右へ。*/
  border-radius: 100px; /*角を丸くする*/
  text-align: center; /*テキストをセンタリング*/
}
/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn2 a {
  background: var(--primary-inverse-color); /*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
  color: var(--primary-color); /*文字色。冒頭のprimary-colorを読み込みます。*/
}
/*マウスオン時*/
.btn2 a:hover {
  opacity: 1;
  transform: scale(1.05); /*105%に拡大*/
  background: var(--base-inverse-color); /*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
  color: var(--base-color); /*文字色。冒頭のprimary-colorを読み込みます。*/
}
/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn2 a:hover {
  background: #fff; /*背景色*/
  color: #333; /*文字色*/
}
/*矢印アイコン*/
.btn2 a::after {
  font-family: "Font Awesome 6 Free"; /*Font Awesomeを使う指示*/
  content: "\f0a9"; /*使いたいアイコン名（Font Awesome）をここで指定*/
  font-weight: bold; /*この手の設定がないとアイコンが出ない場合があります*/
  margin-left: 0.5em; /*アイコンとテキストとの間に空けるスペース*/
}


/*map
---------------------------------------------------------------------*/
.map {
 align-items: center;
  width: 100%; 
  margin:0 auto 2rem; 
}
/*画面幅801px以上の追加指定*/
@media screen and (min-width:801px) {
.map {
  width: 80%; 
}
} /*追加指定ここまで*/



/*list-grid_video1（2カラムボックス）
---------------------------------------------------------------------------*/
.list-grid_video1 .list * {
	margin: 0;padding: 0;
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid_video1 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 3vw;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-grid_video1 .list {
    display: grid;
	margin-bottom: 3rem;	/*ボックスの下に空けるスペース*/
	position: relative;
	border-radius: 5px;	/*角を少しだけ丸く*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	box-shadow: 2px 5px 5px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.1は色が10%出た状態。*/
	padding: 2rem;	/*ボックス内の余白。２文字分。*/
}

/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {

/*ボックス１個あたり*/
.list-grid_video1 .list {
		margin-bottom: 0;
	}
}/*追加指定ここまで*/

/*bg-black内のボックスへの追加設定*/
.list-grid_video1 .list.bg-black {
	background: #111;	/*背景色*/
	color: #fff;		/*文字色*/
}

/*ナンバー（01〜03の飾り番号）*/
.list-grid_video1 .list .num {
	position: absolute;
	left: -20px;		/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -30px;			/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	font-size: 60px;	/*文字サイズ*/
	line-height: 1;
	font-family: "MonteCarlo", cursive;	/*フォント指定*/
	opacity: 0.2;	/*透明度。色を20%出す。*/
}

/*ボックス内のh4見出し*/
.list-grid_video1 .list h4 {
	font-size: 1.8rem;	/*文字サイズを120%に*/
	line-height: 1.6;	/*行間*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
	position: relative;
	text-align: center;
}

/*ボックス内のp要素*/
.list-grid_video1 .list p {
	font-size: 1rem;
	line-height: 1.6;	/*行間*/
	font-weight: normal;
	text-align: justify;
}

/*bg-black内のp要素への追加設定*/
.list-grid_video1 .list.bg-black p {
	color: #999;
}
/*ボックス内のa要素*/
.list-grid_video1 .list a {
	text-decoration: underline;
	color: #e5005e;
	
}
.list-grid_video1 .list a:hover {
	text-decoration: underline;
	color: #e95b8e;
}


/*list-grid-video(各動画)
---------------------------------------------------------------------*/
.list-grid-video .list * {
  margin: 0;
  padding: 0;
}
/*listブロック全体を囲むブロック*/
.list-grid-video {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
  gap: 3rem; /*ブロックの間に空けるマージン的な指定*/
}
/*ボックス１個あたり*/
.list-grid-video .list {
  display: grid;
  position: relative;
}
/*h4見出し*/
.list-grid-video .list h4 {
  margin-top: 0.5rem; 
  font-weight: normal; 
}

/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {
  /*listブロック全体を囲むブロック*/
  .list-grid-video {
    grid-template-columns: repeat(3, 1fr); /*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
  }
} /*追加指定ここまで*/





/*youtube
---------------------------------------------------------------------------*/

.youtube {
position:relative; 
	padding-bottom:56.25%; 
	height:0; 
	overflow: hidden;
  }
.youtube iframe {
position: absolute; 
	top:0; left:0;
	width:100%; 
	height:100%;
  }	

/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {
/*.youtube {
    height: auto;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100% ;
  }	*/
}/*追加指定ここまで*/