@charset "UTF-8";
/* --------------------------------------------------
    COMMON
-------------------------------------------------- */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
body, p { line-height: 1.8rem !important;color: #fff; }
p.wt { line-height: 1.8rem !important;color: #fff;  font-size:20px;}
p.bl { line-height: 1.8rem !important;color: #fff;  font-size:20px;}
.border { border-width: 2px !important; }
.bg-lightblue {	background: #EAF2F4; }

.background {
  background-image: url('../img/back.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.fixedwrap {
  position: relative;
}

.fixedwrap::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url('../img/back.jpg') center/cover no-repeat;
  z-index:-1;
}

.bl{
	color: #000;
}
.wt{
	color: #fff;
}

/* 半円背景各種
-------------------------------------------------- */
/* 半月（背景白） */
.half-white:after { background-color: #fff; }
/* 半月（背景薄青） */
.half-lightblue:after { background: #EAF2F4;}
/* 半月（背景緑） */
.half-info:after { background: #17a2b8; }
/* 共通 円*/
.half {
    width: 120%;
    height: 150px;
    border-top-left-radius: 50% 100px;
    border-top-right-radius: 50% 100px;
    position: absolute;
    top: 0;
    left: -10%;   
}


#logo {
	margin: 0;padding: 0;
	position: fixed;
	margin: 0;padding: 0 10px;
	width: 200px;
	z-index: 99;
}
.logoimg{
	width: 200px;
	z-index: 99;
}

.half:after {
	content: ' ';
	position: absolute;
	left: 0;
	right: 0;

	bottom: 0;
	z-index: -1;
}


.back1{
	background-color: #17a2b8;
	color: #000;
}



#blend{
	display:flex;
	justify-content:center;
	flex-wrap: wrap;
	z-index: 1;
}

#blend li{
	color: #fff !important;
	font-size:16px;
	width:130px;
	height:130px;
	padding:50px 0;
	text-align:center;
	list-style:none;
	margin:10px;
}

.shape1 {
	text-align: center;
	font-weight: bold;
	background: #ffbf00;
	border-radius: 70% 50% 70% 60% / 40% 80% 60% 70%;
}

.bggreen{
background-color:#17a2b8;
}

/* 見出し青丸
-------------------------------------------------- */
.dot {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}
.dot:before, .dot:after {
	font-family: "Font Awesome 5 Free";/*忘れずに*/
	content: "\f005";/*アイコンのユニコード*/
	font-size: 1.2rem;/*サイズ*/
	color: #17a2b8;
	padding: 0 5px;
	vertical-align: middle;
}
.dot2 {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}
.dot2:before, .dot2:after {
	font-family: "Font Awesome 5 Free";/*忘れずに*/
	content: "\f005";/*アイコンのユニコード*/
	font-size: 1.2rem;/*サイズ*/
	color: #FFFFFF;
	padding: 0 5px;
	vertical-align: middle;
}


/* --------------------------------------------------
    header
-------------------------------------------------- */
header .container-fluid {
	height: 100vh;
	width: 100%;
	background: url(../img/image-top.jpg);
	background-size: cover;
	background-position: 50% 100%;
}

/*    グローバルナビ
-------------------------------------------------- */
.breadcrumb {
	background: transparent;
}
.breadcrumb-item + .breadcrumb-item::before {
	content: '>';
	color: #fff;
}
/* --------------------------------------------------
    トップページ
-------------------------------------------------- */
.balloon {
	width: 130px;
	height: 130px;
	top: -50px;
	z-index: 10;
	left: -20px;
	font-size: 15px;
}
.balloon-s {
	width: 110px;
	height: 110px;
	top: -20px;
	z-index: 10;
	left: -20px;
	font-size: 14px;
}
.balloon:before, .balloon-s:before {
	content: "";
	position: absolute;
	bottom: -5px;
	right: -5px;
	margin-top: -15px;
	border: 10px solid transparent;
	border-left: 30px solid #17a2b8;
	z-index: 0;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

table tr:last-child {
	border-bottom: 1px solid #dee2e6;
}
table tr:nth-child(even) {
	background-color: #F9F9F9;
}
table tr:nth-child(odd) {
	background-color: #E4E9EF;
}
/* --------------------------------------------------

-------------------------------------------------- */
.season {
	width: 70px;
	height: 70px;
	left: 10px;
	padding: 0.34em;

}
.season div {
	display: block;
	width: 100%;
	height: 100%;
	border: 2.4px dotted #fff;

}
.title {
	border-bottom: 2px solid #17a2b8;
}
.stripe {
	background: repeating-linear-gradient(90deg, #fff 0, #fff 40%, #17a2b8 40%, #17a2b8 60%, #fff 60%, #fff 70%);
}

#secmov {
	margin: 0px auto;
	width: 100%;
	padding: 2.34em;
  text-align: center;
}

#seccal {
	margin: 0px auto;
	width: 100%;
	padding: 2.34em;
  text-align: center;
}


.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
	margin: 0px auto;
}
.youtube iframe {
  width: 85%;
  height: 85%;
  max-width: 1100px;
}

.no-wrap {
    white-space: nowrap;
}

/* --------------------------------------------------
    予定表テーブル
-------------------------------------------------- */

.table_design08 {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  max-width: 1100px;
  text-align: center;
  margin: 0px auto; 20px auto;
  padding: 1em;
}
.table_design08 th, .table_design08 td {
  border: 2px solid #d2e8f1;
  padding: 1em;
    color:#000;
}
.table_design08 thead th {
  background-color: #4d9bc1;
  color: #fff;
  border: 2px solid #4d9bc1;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.table_design08 thead th:last-of-type {
  border-right: 2px solid #4d9bc1;
}
.table_design08 tbody th {
  color: #4d9bc1;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 787px) {
  .table_design08 {
    text-align: left;
  }
  .table_design08 thead {
    display:none;
  }
  .table_design08 th{
    display: block;
    border: 0;
    border-bottom: 2px solid #e6f1f6;
    color:#000;
  text-align: left;
  }
  .table_design08 td {
    display: block;
    border: 0;
    border-bottom: 2px solid #e6f1f6;
    color:#000;
  text-align: center;
  }
  .table_design08 tbody th{
    background: #4d9bc1;
    color:#FFF;
  }
  .table_design08 td::before{
    content: attr(data-label);
    color: #4d9bc1;
    font-weight: bold;
    display: inline-block;
    width: 20%;
    min-width: 4em;
  text-align: left;
  }
}

/* --------------------------------------------------
    Q&A
-------------------------------------------------- */

.qa-1 {
    max-width: 100%;
    margin-bottom: 7px;
    border: 1px solid #d6dde3;
    border-radius: 25px;
  background-color: #ffffff;
}

.qa-1 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.qa-1 summary::before,
.qa-1 p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-1 summary::before {
    color: #75bbff;
    content: "Q";
}

.qa-1 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform 2s;
}

.qa-1[open] summary::after {
    transform: rotate(225deg);
}

.qa-1 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform 2s, opacity 2s;
}

.qa-1[open] p {
    transform: none;
    opacity: 1;
}

.qa-1 p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}

/* --------------------------------------------------
    場所
-------------------------------------------------- */

.col-md-6{
    color: #000;
}

.col-md-6 .mb-0{
    color: #000;
}

/* --------------------------------------------------
    iphone自動リンク
-------------------------------------------------- */
p.text-white a {
    color:#FFFF00;
    text-decoration:none;
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}

/*上で非表示にしたメニューを表示させる為の設定*/
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100vh;
	background: url('../../../images/bg2.gif') repeat center center / 198px;	/*背景画像の読み込み。最後の数字は画像幅。このサイズでリピートします。*/
	animation: animation1 0.2s both;	/*animation1を実行する。0.2sは0.2秒の事。*/
	display: flex;
	justify-content: center;
}

/*メニュー本体が記載されているボックス*/
.small-screen #menubar > div {
	position: relative;overflow: auto;
	background: #fff;	/*背景色*/
	padding: 10vw;		/*ボックス内の余白*/
	max-width: 70%;		/*最大幅*/
}

/*nav要素*/
.small-screen #menubar nav {
	font-size: 1.3rem;	/*文字サイズを130%に*/
	margin-bottom: 3vw;	/*メニューブロックの下にとるスペース*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar a {
	display: block;text-decoration: none;
	/*上下、左右へのメニュー内の余白*/
}

/*メニュー横のアイコンの共通設定*/
.small-screen #menubar li a::before {
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指定*/
	padding-right: 0.8em;	/*アイコンとテキストの間の余白*/
	font-weight: bold;		/*この設定がないとアイコンが出ない場合があります*/
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}

/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
.small-screen #menubar li:nth-of-type(1) a::before {
	content: "\f015";		
}
.small-screen #menubar li:nth-of-type(2) a::before {
	content: "\f05a";		
}
.small-screen #menubar li:nth-of-type(3) a::before {
	content: "\f651";		
}
.small-screen #menubar li:nth-of-type(4) a::before {
	content: "\f815";		
}
.small-screen #menubar li:nth-of-type(5) a::before {
	content: "\f3c5";		
}
.small-screen #menubar li:nth-of-type(6) a::before {
	content: "\f549";		
}
.small-screen #menubar li:nth-of-type(7) a::before {
	content: "\f7c5";		
}
.small-screen #menubar li:nth-of-type(8) a::before {
	content: "\f518";		
}
.small-screen #menubar li:nth-of-type(9) a::before {
	content: "\f075";		
}
.small-screen #menubar li:nth-of-type(10) a::before {
	content: "\f815";		
}
.small-screen #menubar li:nth-of-type(11) a::before {
	content: "\f086";		
}



/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0s 0.2s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	top: 5px;		/*上からの配置場所*/
	right: 5px;	/*右からの配置場所*/
	width: 60px;	/*幅*/
	height: 60px;	/*高さ*/
	padding: 15px 15px 15px 15px;	/*ブロック内の余白。上、右、下、左への順番*/
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s;

background-color: #00b1f4;
border: solid 6px #fff;

-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
box-shadow: 0 0 0 3px #00b1f4;
-webkit-box-shadow: 0 0 0 3px #00b1f4;
-moz-box-shadow: 0 0 0 3px #00b1f4;
}

/*以下は変更不要*/
#menubar_hdr div {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/*バーの設定*/
#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 3px;			/*線の太さ*/
	background-color: #fff;	/*線の色*/
	border-radius: 2px;		/*コーナーを少しだけ丸く*/
	transition: all 0.5s ease-in-out;
	position: absolute;
}

/*以下変更不要*/
#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {top: 50%;transform: translateY(-50%);}
#menubar_hdr div span:nth-child(3) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {opacity: 0;}
#menubar_hdr.ham div span:nth-child(3) {top: 50%;transform: translateY(-50%) rotate(-45deg);}


/*2カラム
---------------------------------------------------------------------------*/
.main-contents {
	margin-bottom: 5rem;	/*ボックスの下に空けるスペース。subとの間の余白です。5文字分。*/
}

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

	/*カラムで使う為の指定*/
	main.column {
		display: flex;					/*横並びにする*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		gap: 2rem;						/*main-contentsとsub-contentsの間のマージン的な隙間*/
	}
	
	/*main-contentsブロック*/
	.main-contents {
		margin-bottom: 0;
		order: 2;		/*並び順。数字の小さい順番に表示されます。*/
		flex: 1;
	}
	
	/*sub-contentsブロック共通*/
	.sub-contents {
		width: 230px;	/*幅*/
	}
	
	/*1つ目のsub-contents*/
	.sub-contents:nth-child(2) {
		order: 1;	/*並び順。数字の小さい順番に表示されます。*/
	}
	
	/*2つ目のsub-contents（※３カラムで使う場合用）*/
	.sub-contents:nth-child(3) {
		order: 3;	/*並び順。数字の小さい順番に表示されます。３番目という意味なので一番右側に表示されます。*/
	}
	
	}/*追加指定ここまで*/


/*サブコンテンツ設定
---------------------------------------------------------------------------*/
/*サブコンテンツ内のh3要素(見出し)*/
.sub-contents h3 {
	display: block;
	margin: 0;
	text-align: center;	/*テキストをセンタリング*/
	padding: 0.5rem 0;	/*上下、左右への見出し内の余白*/
	border-radius: 5px 5px 0px 0px;	/*角を丸くする指定。左上、右上、右下、左下の順番。*/
	border: 1px solid #ccc;			/*下線の幅、線種、色*/
	background: linear-gradient(#fff, #eee);/*背景グラデーション*/
	color: #555;	/*文字色*/
}


/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu {
	padding: 0;
	margin: 0 0 1rem;	/*上、左右、下へのマージン*/
}

/*メニュー１個あたり*/
.submenu a {
	display: block;text-decoration: none;
	padding: 0.2rem 1rem;	/*上下、左右へのメニュー内の余白*/
	background: #fff;	/*背景色*/
}

/*メニュー１個あたり（子メニュー以外）*/
.submenu > li {
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-top: none;		/*上の線だけなくす*/
}

/*子メニュー*/
.submenu li li a {
	padding-left: 2rem;	/*左に余白を空ける*/
}

/*h3見出しの下にサブメニューが続く場合にメニューの上の線をなくす*/
.sub-contents h3 + nav .submenu {
	border-top: none;
}


/*固定お知らせ*/


#statuswaku{
	display: block;text-decoration: none;text-align: center;z-index: 100;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	bottom: 0px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 0.9rem;	/*文字サイズ*/
	background: rgba(12,116,192,0.8);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 100%;		/*幅*/
	white-space:nowrap;
	overflow: hidden;
	animation: blinking 6s ease-in-out infinite alternate;
    height: 2rem;
}


@keyframes blinking {
   0% {
	background: rgba(12,116,192,0.8);
   }
   50% {
	background: rgba(130,36,68,0.8);
   }
   100% {
	background: rgba(28,146,68,0.8);
   }
}

ul#item-list{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}

ul#item-list li{
 /* すべてのliを同じ位置に配置 */
position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
bottom: 0px;
width: 100%;
	color: #fff;		/*文字色*/
	font-size: 0.9rem;
z-index: 110;
/* テキストを中央揃えにするための設定 */
display: flex;
align-items: center;
justify-content: center;

/* 最初はすべて非表示にする */
opacity: 0;

/* アニメーションを適用 */
/* アニメーション名: fadeInOut, 全体の時間: 16s, 繰り返し: infinite */
animation: fadeInOut 12s infinite;
}

/* アニメーションのキーフレームを定義 */
@keyframes fadeInOut {
0%   { opacity: 0; transform: translateY(10px); }
10% { opacity: 1; transform: translateY(0); } /* フェードイン */
40%  { opacity: 1; transform: translateY(0); } /* 表示 */
50%{ opacity: 0; transform: translateY(-10px); } /* フェードアウト */
100% { opacity: 0; }
}

/* * 各liに遅延（delay）を設定して、表示タイミングをずらす
* 各アイテムは4秒ずつ表示される (16s / 2アイテム)
*/
ul#item-list li:nth-child(1) {
animation-delay: 0s;
}
ul#item-list li:nth-child(2) {
animation-delay: 6s; /* 1つ目の表示が終わる頃に開始 */
}



/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 40px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}