@charset "utf-8";  
*{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

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;
}


/*------------------------------------------------------------ 
  カラールール
------------------------------------------------------------*/  
html,body{background:#fff;color:#000;scroll-behavior: smooth;}
a {color:#fff;}
.header,.footer{color:#fff;background: #b89274;}

h2 {
	width: 97%;
	margin: 0 0 5px auto;
	font-size: 17px;
	font-weight: normal;
}

/*------------------------------------------------------------ 
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;}

/*------------------------------------------------------------ 
テキスト寄せ
------------------------------------------------------------*/ 
.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;
	margin: 0;
	font-size: 17px;
	border-radius: 5px;
	padding: 10px 20px;
}
.middleBtn {
	width: 200px;
	margin: 0;
	font-size: 17px;
}
.delBtn  { background: #de6464; }
.addBtn  { background: #74b774; }
.editBtn { background: orange; }

.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;}



/*------------------------------------------------------------ 
ウィンドウ
------------------------------------------------------------*/  
.baseWindow {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 98%;
	height: fit-content;
	max-width: 900px;
	padding: 10px 10px;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	z-index: 200;
	animation: fadeInUp 0.2s ease-out 1 forwards;
}
.baseWindow h2 {
	text-align: center;
	margin: 5px 0 0 0;
}
.baseWindow h3 {
	font-size: 20px;
	border-left: 10px solid #7594d4;
	line-height: 10px;
	margin: 15px 0;
}

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

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

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

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

.baseWindow .formBtnArea {
	display: flex;
	justify-content: space-between;
	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;
}

/*------------------------------------------------------------ 
右ペイン領域
------------------------------------------------------------*/  
.rightPane {
	width: 100%;
}
/*------------------------------------------------------------ 
ナビ
------------------------------------------------------------*/  
.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;
	flex-direction: column;
}

/*------------------------------------------------------------ 
コンテンツエリア
------------------------------------------------------------*/  
.contents_area {
	display: block;
	min-height: calc(100vh - 90px);
	width: 100%;
	max-width: 1500px;
	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;
}

/*------------------------------------------------------------ 
	汎用的なエリア
------------------------------------------------------------*/  
.normalContentsArea {
	background: #fff;
	border-radius: 5px;
	padding: 20px 30px;
	text-align: center;
	margin-bottom: 60px;
}


/*------------------------------------------------------------ 
	ページャー
------------------------------------------------------------*/  
#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;
}


/*------------------------------------------------------------ 
	デフォルトスタイル 
------------------------------------------------------------*/  
html{
	height: auto;
	width: 100%;
	padding: 0;
	margin: 0;
	background: #d8e0e1;
}
body{
	height: auto;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 0;
	padding-top: 90px;
	z-index: 0;
	border: 0;
	outline: 0;
}

label {
	padding: 5px 0 0 5px;
	font-weight: bold;
}

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

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

.header {
  box-sizing: border-box;
  height: 90px;
  padding: 24px;
  margin: 0 0 0 0;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: -1px;
}


a.head_mypage {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	right: 0;
	width: 45px;
	height: 40px;
	font-size: 7px;
	letter-spacing: -1px;
}
.head_mypage img {
	width: 20px;
	height: auto;
	margin: 5px 5px 1px 5px;
}



.middleContents {
	width: 95%;
	margin: 0 auto 20px;
	padding: 20px;
	background: rgb(229 235 239);
}
.middleContents h3 {
	font-size: 15px;
	margin: 0 0 10px;
}
.middleContents label {
	font-size: 13px;
	margin: 0 0 10px;
}

.middleContents input {
	width: calc(100% - 10px);
	padding: 7px;
	margin: 5px;
	border: 1px solid #aaa;
	font-size: 19px;
	text-align: left;
}

.copyright {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px;
	padding: 30px 0;
	margin-top: 10px;
	background: #d60000;
	color: #fff;
	font-size: 10px;
}
.copyright img {
	width: 130px;
}





.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;
}


/** 追記***/
.h2subText{
  padding-bottom: 15px;
}
  .btnLoginRemind{
    display: inline-block;
    width: 100%;
    text-align: center;}


.btn_reserve_not,
.btnReserveWindow{
  position: sticky;
  bottom: 70px;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 1020px;
}

input {
	width: calc(100% - 10px);
	padding: 10px;
	margin: 5px;
	border: 1px solid #aaa;
	font-size: 23px;
	text-align: left;
}

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

button {
	border: none;
	margin: 30px;
	width: 200px;
	padding: 10px;
	background: #d60000;
	color: #fff;
	font-size: 15px;
}

table {
	background: #c8c8c8;
	width: 100%;
	max-width: 1500px;
	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;
	text-align: right;
}


.mark_registed {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
	width: 100%;
	color: #1dbe33;
	font-weight: bold;
}

.btnEdit {
	background: #ff7400;
	padding: 5px;
	text-align: center;
	border-radius: 5px;
	color: #fff;
}

.btn{
	display: inline;
	padding: 7px 20px;
	margin: 0 10px;
	border-radius: 5px;
	background: #ff9600;
	color: #fff;
}

.window {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 600px;
	height: fit-content;
	margin: auto;
	padding: 20px 0 0 0;
	background: #fff;
	border-radius: 10px;
	z-index: 300;
}
.window h2 {
	text-align: center;
}
.window .managerName {
	text-align: center;
	font-size: 24px;
	margin: 20px auto;
	font-weight: bold;
}
.window select {
	display: block;
	margin: 0 auto;
	width: fit-content;
}
.window .btnArea {
	display: flex;
	width: 100%;
	margin-top: 30px;
}
.windowBtn {
	width: 50%;
	text-align: center;
	padding: 10px;
	color: #fff;
	font-weight: bold;
}
.btnOK{
	background-color: #74c792;
}
.btnCancel{
	background-color: #c23535;
}

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

/* ==================================== 
	header
==================================== */ 
header {
	position: fixed;
	width: 100%;
	z-index: 120;
}
header h1, header #logo {
	width: 60px;
	height: 60px;
	left: 0;
	position: fixed;
	top: 10px;
	left: 0;
	margin: 0;
	z-index: 999;
}
header h1 a, header h1#logo.mini a, header #logo a, header #logo.mini a {
	background-size: 60px 60px;
	width: 60px;
	height: 60px;
}

header #logo{
	display: block;
	background: url(/cmmn/img/logo.svg);
	background-position: center center;
	background-size: 60px 60px;
	width: 60px;
	height: 60px;
	text-indent: 200%;
	white-space: nowrap;
	overflow: hidden;
	-webkit-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}



header .navigation2 {
	width: 100%;
	height: 40px;
	background-color: #D60000;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 900;
}
header .navigation2 #slogan {
	font-family: HelveticaNowDisplay-Bd, sans-serif;
	position: fixed;
	display: flex;
	width: 100%;
	height: 40px;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: #fff;
	font-weight: 600;
}



/* ==================================== 
	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 {
  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.3);
  backdrop-filter: blur(3px);
}
.loadingArea {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	width: 100%;
	height: 100%;
}
.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: #ffffff;
	width: 8px;
	height: 50px;
	margin: 5px;
	box-shadow: 0 0 4px #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;}

@keyframes loadingAnim {
  0% {transform: scaleY(0.3);box-shadow: 0 0 0 #fff;}
100% {transform: scaleY(1.0);box-shadow: 0 0 4px #fff;}
}






/* ウィンドウ表示時のカバー */
#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;}
}

.sct_link {
	display: block;
	width: fit-content;
	margin: 0 auto;
	text-decoration: underline;
	color: #97aab3;
	margin: 50px auto 0px auto;
}