@charset "utf-8";  
*{
	font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif
}

div, span, p, blockquote, h1, h2, h3, h4,
a, font, img, strong, 
b, u, i, center,  
dl, dt, dd, ol, ul, li, 
table, tbody, tr, th, td {  
	user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
	margin:0;
  padding:0;
  background: transparent;
  border:0;
  border-collapse:  collapse; 
  outline:0;
  font-size:1em;
  box-sizing: border-box;
  padding-inline-start:0;
}


/*------------------------------------------------------------ 
ヘッダーコンテンツ
------------------------------------------------------------*/  
header {
	position: sticky;
	display: flex;
	align-items: center;	
	height: 90px;
	background: #75bfd4;
	z-index: 150;
	box-shadow: 0 0 3px rgb(7 51 81 / 59%);
}

header .logo {
	height: 100%;
	width: 275px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 23px;
	font-weight: bold;
	color: #fff;
}

header .facilityListSelectArea {
	width: fit-content;
	max-width: 500px;
	color: #fff;
	font-weight: bold;
}

header select {
	width: fit-content;
	max-width: 490px;
	margin: 0;
	box-shadow: inset 0 0 5px rgb(0 37 82 / 20%);
	font-size: 17px;
	color: #828282;
}


/*------------------------------------------------------------ 
javascriptで利用するパーツ用
------------------------------------------------------------*/  
._parts{
	display: none;
}

/*------------------------------------------------------------ 
テーブルなどの幅
------------------------------------------------------------*/  
.w40 {width: 40px;}
.w60 {width: 60px;}
.w80 {width: 80px;}
.w100{width:100px;}
.w120{width:120px;}
.w140{width:140px;}
.w160{width:160px;}
.w180{width:180px;}
.w200{width:200px;}
.w220{width:220px;}
.w240{width:240px;}
.w260{width:260px;}
.w280{width:280px;}
.w300{width:300px;}
.w320{width:320px;}
.w340{width:340px;}
.w360{width:360px;}
.w380{width:380px;}
.w400{width:400px;}
.w420{width:420px;}
.w440{width:440px;}
.w460{width:460px;}
.w480{width:480px;}
.w500{width:500px;}
.w520{width:520px;}
.w540{width:540px;}
.w560{width:560px;}
.w580{width:580px;}

/*------------------------------------------------------------ 
マージン
------------------------------------------------------------*/  
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}

.mr10 {margin-right:10px;}
.mr15 {margin-right:15px;}
.mr20 {margin-right:20px;}
.mr25 {margin-right:25px;}
.mr30 {margin-right:30px;}

.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.ml25 {margin-left:25px;}
.ml30 {margin-left:30px;}

.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb25 {margin-bottom:25px;}
.mb30 {margin-bottom:30px;}




/*------------------------------------------------------------ 
テキスト寄せ
------------------------------------------------------------*/ 
.ta_r{text-align: right;}
.ta_c{text-align: center;}
.ta_l{text-align: left;}

/*------------------------------------------------------------ 
フォントウェイト
------------------------------------------------------------*/ 
.font_b{font-weight: bold;}
.font_n{font-weight: normal;}

/*------------------------------------------------------------ 
フォントサイズ
------------------------------------------------------------*/ 
.fontSize_10{font-size:10px;}
.fontSize_12{font-size:12px;}
.fontSize_14{font-size:14px;}
.fontSize_16{font-size:16px;}
.fontSize_18{font-size:18px;}
.fontSize_20{font-size:20px;}
.fontSize_22{font-size:22px;}
.fontSize_24{font-size:24px;}
.fontSize_26{font-size:26px;}
.fontSize_28{font-size:28px;}
.fontSize_30{font-size:30px;}
.fontSize_32{font-size:32px;}
.fontSize_34{font-size:34px;}
.fontSize_36{font-size:36px;}
.fontSize_38{font-size:38px;}

/*------------------------------------------------------------ 
ボタンレイアウト
------------------------------------------------------------*/ 
.btn_left{margin-left:0;margin-right:auto;}
.btn_center{margin-left:auto;margin-right:auto;}
.btn_right{margin-left:auto;margin-right:0;}

/*------------------------------------------------------------ 
バックグラウンド基本色
------------------------------------------------------------*/ 
.bg_paleGreen{background: #a4d2bf;color: #fff;}



/*------------------------------------------------------------ 
料金ランクボックスの色
------------------------------------------------------------*/ 
.rankBoxColor_A{background: #a9cbb2;}
.rankBoxColor_B{background: #a3c5d5;}
.rankBoxColor_C{background: #a7cfd4;}
.rankBoxColor_D{background: #d8bd9f;}
.rankBoxColor_E{background: #b38280;}
.rankBoxColor_F{background: #d5b3af;}
.rankBoxColor_G{background: #b38280;}
.rankBoxColor_H{background: #af8fac;}
.rankBoxColor_I{background: #ddeee4;}
.rankBoxColor_J{background: #dce8ef;}
.rankBoxColor_K{background: #dceeef;}
.rankBoxColor_L{background: #e5d3d3;}
.rankBoxColor_M{background: #f0e4e4;}
.rankBoxColor_N{background: #f0e4e8;}
.rankBoxColor_O{background: #e4d9e3;}
.rankBoxColor_P{background: #d8bd9f;}
.rankBoxColor_Q{background: #b38280;}
.rankBoxColor_R{background: #d5b3af;}
.rankBoxColor_S{background: #e8d681;}
.rankBoxColor_T{background: #b38280;}
.rankBoxColor_U{background: #d5b3af;}
.rankBoxColor_V{background: #af8fac;}
.rankBoxColor_W{background: #dce8ef;}
.rankBoxColor_X{background: #777;}
.rankBoxColor_Y{background: #e5d3d3;}
.rankBoxColor_Z{background: #e8d681;}





/*-------------------------------------------------------- 
作成・削除ボタンなどのの表示領域
------------------------------------------------------------*/  
.editBtnArea {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 0;
	margin: 0 0 10px 0;
}
.editBtnArea_middle {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 0;
	margin: 10px 0 10px 0;
}
/* 編集ボタン系 */
.miniBtn {
	display: inline-block;
	width: fit-content;
	margin: 0;
	font-size: 17px;
	border-radius: 5px;
	padding: 10px 20px;
	user-select: none;
}

.middleBtn {
	width: 200px;
	margin: 0;
	font-size: 17px;
}
.delBtn  { color:#fff;background: #de6464; }
.addBtn  { color:#fff;background: #74b774; }
.editBtn { color:#fff;background: orange; }


.btnOK{
	background-color: #74c792;
}
.btnCancel{
	background-color: #c23535;
}

.btn_w100{width: 100px;}
.btn_w120{width: 120px;}
.btn_w140{width: 140px;}
.btn_w160{width: 160px;}
.btn_w180{width: 180px;}
.btn_w200{width: 200px;}
.btn_w220{width: 220px;}
.btn_w240{width: 240px;}



/*------------------------------------------------------------ 
画像なし
------------------------------------------------------------*/  
.noImage {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100px;
	height: 100px;
	background: #d2d2d2;
	text-align: center;
	color: #fff;
	font-weight: bold;
}
/*------------------------------------------------------------ 
ウィンドウ
------------------------------------------------------------*/  
.baseWindow {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: fit-content;
	height: fit-content;
	min-width: 500px;
	max-width: 900px;
	padding: 10px 20px;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	z-index: 200;
}

.baseWindow h3 {
	font-size: 20px;
	border-left: 10px solid #7594d4;
	line-height: 10px;
	margin: 15px 0;
	border-bottom: 0;
	padding: 0 10px 0 9px;
}

.baseWindow form {
	display: flex;
	flex-direction: column;
}

.baseWindow label {
	display: block;
	border-left: 5px solid #9aadd4;
	line-height: 5px;
	margin: 30px 0 5px 5px;
	padding-left: 4px;
	font-weight: bold;
}
.baseWindow select {
	width: fit-content;
}
.baseWindow input[type="text"] {
	padding: 5px 10px;
	width: 100%;
	text-align: left;
}

.baseWindow input[type="number"] {
	padding: 5px 10px;
	text-align: center;
	width: 33%;
}

.baseWindow input[type="submit"] {
	text-align: center;
	border: 0;
	background: #73b774;
	color: #fff;
	font-weight: bold;
}

.baseWindow .formBtnArea {
	display: flex;
	justify-content: center;
	gap: 20px;
	width: 100%;
	margin: 30px auto 10px auto;
}
.baseWindow .formBtn {
	width: 180px;
	height: fit-content;
	padding: 10px;
	margin: 0;
	font-weight: normal;
	font-size: 19px;
}
.formBtnArea .cancelBtn{
	background: #de6464;
	text-align: center;
	color: #fff;
	border-radius: 5px;
}

.windowBtnArea {
	display: flex;
	width: 100%;
	justify-content: center;
}

.doneWindow h4 {
	text-align: center;
	font-size: 23px;
	margin-top: 20px;
}


/*------------------------------------------------------------ 
ビジネスタイプ説明
------------------------------------------------------------*/  
.businessIntroBox {
	display: grid;
	grid-template-columns: repeat(3, auto);
	width: fit-content;
	margin: 5px 0 5px 15px;
	gap: 1px 20px;
	font-size: 14px;
	color: #858e9c;
}

.businessIntroBox .head {
	text-align: left;
	font-weight: bold;
}
.businessIntroBox .useText {
	text-align: left;
}

/*------------------------------------------------------------ 
右ペイン領域
------------------------------------------------------------*/  
.rightPane {
	width: calc(100% - 300px);
}
/*------------------------------------------------------------ 
ナビ
------------------------------------------------------------*/  
.naviArea{
	display: flex;
	width: 100%;
	background: #96d5e7;
	padding: 0;
	box-shadow: 0 0 3px rgb(68 68 68 / 50%);
}

.naviArea .arrow {
	width: 50px;
	height: 27px;
	position: relative;
	border: 2px solid #fff;
	border-bottom: 0;
	border-left: 0;
	transform: rotate(45deg) skew(20deg, 20deg);
}

.naviArea a {
	display: block;
	padding: 13px;
	width: 280px;
	text-align: center;
}

.naviArea img {
	height: 50px;
}

/*------------------------------------------------------------ 
サイドメニューとコンテンツのラッパー
------------------------------------------------------------*/  
.allWrapper {
	display: flex;
}

/*------------------------------------------------------------ 
コンテンツエリア
------------------------------------------------------------*/  
.contents_area {
	display: block;
	min-height: calc(100vh - 90px);
	width: 100%;
	padding: 60px;
	margin: 0 auto;
}

.contents_area h1 {
	font-size: 30px;
	border-bottom: 1px solid #cfcfcf;
	margin: 0 auto 20px 0;
}

/*------------------------------------------------------------ 
サイドメニューエリア
------------------------------------------------------------*/  
.sideMenu {
	display: block;
	position: relative;
	width: 300px;
	min-width: 200px;
	min-height: calc(100vh - 90px);
	background: #e7e4df;
	box-shadow: 0 0 6px rgb(127 78 38 / 30%);
}

.sideMenu a{
	display: block;
	padding: 20px;
	border-left: 10px solid #92b2c8;
	border-bottom: 1px solid #c8c8c8;
	color: #333;
}

.sideMenu a.selected{
	background: #fff;
	border-left: 10px solid #69c1fe;
}
.sideMenu a:hover{
	border-left: 10px solid #7694d4;
	background: #f7f4ef;
}

.sideMenu .logo{
	padding: 30px 10px;
	text-align: center;
	background: #75bfd4;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}


/*------------------------------------------------------------ 
	検索系エリア
------------------------------------------------------------*/  
.searchContentsArea {
	background: #fff;
	border-radius: 5px;
	padding: 20px 30px;
	text-align: center;
	margin-bottom: 60px;
}

.searchContentsArea select{
	width: 400px;
	text-align: left;
}


/*------------------------------------------------------------ 
	施設指定の必要があるときのアラート
------------------------------------------------------------*/  
.facilityNoselectalert {
	width: 100%;
	background: #fff;
	padding: 30px 50px;
	margin: 0 0 30px 0;
	text-align: center;
	font-size: 17px;
	color: #c80000;
	border-radius: 5px;
}
/*------------------------------------------------------------ 
	ページャー
------------------------------------------------------------*/  
#pagerArea {
	width: 1000px;
	margin: 50px auto;
	text-align: center;
}

#pagerArea a {
	display: inline-block;
	padding: 10px;
	width: 50px;
	border: 1px solid #c3c3c3;
	border-radius: 5px;
	background: #fff;
	color: #333;
}
#pagerArea a.selectedPage {
	background: #999;
	color: #fff;
}


/*------------------------------------------------------------ 
	アクティブ、非アクティブボタン
------------------------------------------------------------*/  
.activateBtn {
	background: #76d376;
	color: #fff;
	width: 120px;
	border-left: 15px solid #929292;
	letter-spacing: -1px;
}
.inactivateBtn {
	background: #c45050;
	color: #fff;
	width: 120px;
	border-right: 15px solid #929292;
	letter-spacing: -1px;
}


/*------------------------------------------------------------ 
	編集エリアの開閉トグルボタン
------------------------------------------------------------*/  
.editDispToggle {
	margin: -110px auto 100px auto;
	width: 40px;
	height: 40px;
	background: #cbcbcb;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
}
.editDispToggle img {
	width: 17px;
	margin: 2px 0 0 0;
}

/* 開閉トグルのエリア、ボタン */
#editArea {
	position: relative;
	height: 190px;
	mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%);
	overflow-y: hidden;
	transition: height 0.2s ease-out;
	margin-bottom: 100px;
}

#editArea.heightExpand{
	mask-image:none;
}
.editDispToggle {
	margin: -110px auto 100px auto;
	width: 40px;
	height: 40px;
	background: #cbcbcb;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
}


/*------------------------------------------------------------ 
	デフォルトスタイル 
------------------------------------------------------------*/  
html, body{
  height:auto;
	width:100%;
  margin:0;
  padding:0;
  z-index: 0;
  border:0;
  outline:0;
	background:#eeeeee;
	color:#484848;
	scroll-behavior:smooth;
}

.header, .footer{color:#fff;}

h1, h2, h3, h4{
	padding-inline-start:5px;
}
h2{
	font-size: 1.4em;
	color: #525151;
	margin: 0 auto 20px;
	border-left: 8px solid #a6b9e0;
}

img	{
	display: block;
	margin:0;
}

br	{ clear:both;}
blockquote, q {quotes: none;}
a {
	text-decoration: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0); 
	color:#fff;
}

article, aside, canvas, details, figcaption, figure,  
hgroup, menu, nav, section, summary {  
	display: block;  
}  

input {
	padding: 7px;
	margin: 5px;
	border: 1px solid #aaa;
	border-radius: 5px;
	font-size: 20px;
	color: #444;
}

select {
  margin: 5px;
  border: 1px solid #aaa;
  border-radius: 5px;
  font-size: 23px;
  color: #444;
  direction: rtl;
}

button {
  border: none;
  margin: 30px;
  width: 200px;
  padding: 10px;
  background: #f9b63a;
  color: #fff;
  font-size: 20px;
  border-radius: 5px;
}

table {
	background: #c8c8c8;
	width: 100%;
	margin: 20px 0 0 0;
	border-collapse: separate;
	border-spacing: 1px;
}

thead th {
	font-weight: bold;
	background: #d0ebd7;
}

tbody th {
	text-align: right;
	font-weight: bold;
	background: #edf2f6;
}

th {
	background: #d0ebd7;
	padding: 10px;
	text-align: center;
	color: #525151;
}
td {
	background: #fff;
	padding: 10px;
}


/* -------------------
開発環境、ステージング環境識別
------------------- */

.env_disp_area_dev, .env_disp_area_stg {
	position: fixed;
	width: 100%;
	text-align: center;
	z-index: 10000;
	font-size: 12px;
}

.env_disp_area_dev{
	background: #00ff14;
}
.env_disp_area_stg {
	background: #ff00f7;
	color: #fff;
}


/* ==================================== 
	Loading
==================================== */ 
#cvrAll{
	display: none;
	position: fixed;
	top:0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 9999;
	backdrop-filter: blur(5px);
	background: rgba(0,0,0,0.2);
}

.loading{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 200px;
  height: 300px;
  margin: auto;
}

.loading img {
	width: 50%;
	margin: 0 auto 20px auto;
  transform: rotate3d(1, 0.5, 0.5, 504deg);
  border-radius: 10px;
  animation: loadingCard 3s ease-in-out 0s infinite alternate forwards;
}

@keyframes loadingCard{
    0% {transform: rotate3d(1, 0.5, 0.5, 0deg);}
  100% {transform: rotate3d(1, 0.5, 0.5, 720deg);}
}

.loading p {
	letter-spacing: 1px;
  color: #fff;
	font-size: 1.3em;
  animation: loadingtext 0.4s ease-in-out 0s infinite alternate forwards;
}

@keyframes loadingtext{
    0% {text-shadow: 0 0 1px #fff;}
  100% {text-shadow: 0 0 5px #fff;}
}



#loading {
  display: none;
	position: fixed;
	color: #fff;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 0;
	text-align: center;
	z-index: 3000;
	margin: 0;
	background: rgba(0,0,0,0.2);
	backdrop-filter: blur(3px);
}
.loadingAnims {
	position: absolute;
	display: flex;
	gap: 9px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	height: fit-content;
	width: fit-content;
}
.loading_letter {
	background: #585858;
	width: 29px;
	height: 34px;
	margin: 1px;
	font-size: 20px;
	border-radius: 3px;
	box-shadow: 0 0 9px #fff;
}
.delay_1 {animation: loadingAnim 0.6s   0s ease-in-out infinite alternate forwards;}
.delay_2 {animation: loadingAnim 0.6s 0.1s ease-in-out infinite alternate forwards;}
.delay_3 {animation: loadingAnim 0.6s 0.2s ease-in-out infinite alternate forwards;}
.delay_4 {animation: loadingAnim 0.6s 0.3s ease-in-out infinite alternate forwards;}
.delay_5 {animation: loadingAnim 0.6s 0.4s ease-in-out infinite alternate forwards;}
.delay_6 {animation: loadingAnim 0.6s 0.5s ease-in-out infinite alternate forwards;}
.delay_7 {animation: loadingAnim 0.6s 0.6s ease-in-out infinite alternate forwards;}

@keyframes loadingAnim {
  0% {border-radius: 3px;}
100% {border-radius: 20px;}
}
/*
0% {transform:scale(1, 0.1);}
100% {transform:scale(1, 1);}
*/






/* ウィンドウ表示時のカバー */
#coverAll{
	display: none;
	position: fixed;
  top: 0;
  left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	z-index: 200;
  backdrop-filter: blur(3px);
}




@keyframes zoomIn {
  0% { transform: scale(0.9); opacity: 0;}
100% { transform: scale(  1); opacity: 1;}
}

@keyframes zoomOut {
0% { transform: scale(  1); opacity: 1;}
100% { transform: scale(0.9); opacity: 0;}
}

@keyframes fadeInUp {
  0% {transform: translateY(30px);opacity: 0;}
100% {transform: translateY(   0);opacity: 1;}
}
@keyframes fadeOutUp {
  0% {transform: translateY(   0);opacity: 1;}
100% {transform: translateY(-30px);opacity: 0;}
}

@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}

@keyframes cutInOut {
0%   {transform: translateY( 30px);opacity: 0;}
20%  {transform: translateY(  0px);opacity: 1;}
80%  {transform: translateY(  0px);opacity: 1;}
100% {transform: translateY(-30px);opacity: 0;}
}