@charset "UTF-8";


/*
* 共通項目
*/
body {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.6;
	background-color: #F5F5F5;
  overflow-x: hidden;
}



/*
* レイアウト
*/
.mypage {

}
.artBase {
  margin: 0 auto 80px auto;
  padding: 20px;
  background-color: #FFFFFF;
}
.artBase h3 {
  margin: 0 0 20px 0;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
}


/*
* サイド ステータス
*/
#sideStatus {
	margin: 0 auto 60px auto;
	padding: 0;
}
#sideStatus h3 {
  margin: 0 0 30px 0;
  padding: 0 0 10px 0;
  font-size: 16px;
  font-weight: 600;
  border-bottom: #000000 1px solid;
}
#sideStatus dl {
  margin: 0 0 30px 0;
  padding: 0;
}
#sideStatus dt {
  margin: 0 0 5px 0;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
}
#sideStatus dd {
  margin: 0;
  padding: 5px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
	background-color: #FFFFFF;
  border: #CCCCCC 1px solid;
}


/*
* サイド メニュー
*/
#sideMenu {
	margin: 0 auto 60px auto;
	padding: 0;
}
#sideMenu h3 {
  margin: 0 0 5px 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
}
#sideMenu hr {
  margin: 10px 10px;
  border: none;
  border-top: #CCCCCC 1px solid;
}
#sideMenu ul {
  margin: 0;
  padding: 0;
	background-color: #FFFFFF;
  border: #CCCCCC 1px solid;
}
#sideMenu ul li {
  margin: 0;
  padding: 0;
}
#sideMenu ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 10px;
  font-size: 14px;
  line-height: 1;
}
#sideMenu ul li a::before {
  content: "▶";
  margin: 0;
  padding: 0;
}
#sideMenu ul li.home a {
  font-weight: 700;
  background-color: #F7F7F7;
}
#sideMenu ul li.link a {
  font-weight: 400;
}



/*
* ログインフォーム
*/
#loginForm {
  margin: 0 auto;
  padding: 50px;
  background-color: #FFFFFF;
}
/* テキスト */
#loginForm .text {
  margin: 0 0 40px 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
}
/* フォーム */
#loginForm .formItems {
  margin-bottom: 4rem;
}
#loginForm input[name="memberEmail"] {
  min-width: 50%;
}
#loginForm input[name="memberPass"] {
  min-width: 50%;
}


/*
* マイページTOP
*/
#mypageCont {
  margin: 0 auto;
  padding: 50px;
  background-color: #FFFFFF;
}
#mypageCont .text {
  margin: 0 0 40px 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
}



/*
* キャンプ場予約
*/
#reserve {
  margin: 0 auto 80px auto;
  padding: 20px;
  background-color: #FFFFFF;
}
#reserve .text {
  margin: 0 0 40px 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
}


/*
* 厨房予約
*/
#kitchen {
  margin: 0 auto 80px auto;
  padding: 20px;
  background-color: #FFFFFF;
}
#kitchen .text {
  margin: 0 0 40px 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
}



/*
* 予約カレンダー
*/
#reserveCal {
	position: relative;
	margin: 30px 0;
	padding: 0;
}
#reserveCal .calHead {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	z-index: 80001;
}
#reserveCal .calHead .calArrow {
	width: 10em;
	margin: 0 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
	cursor: pointer;
}
#reserveCal .calHead .calLeft {
  text-align: left;
}
#reserveCal .calHead .calRight {
  text-align: right;
}
#reserveCal h5.calMonth {
	display: flex;
	height: 30px;
	align-items: center;
	justify-content: center;
	margin: 0 0 20px 0;
	padding: 0;
  color: #53576A;
	font-size: 30px;
	font-weight: 700;
}
/* カレンダー */
#reserveCal section {
	position: relative;
	z-index: 80000;
}
#reserveCal .slick-slide:focus {
  outline: none;
}
#reserveCal section .cal {
	position: relative;
	max-height: 70vh;
	border: #999999 1px solid;
	overflow: scroll;
}
#reserveCal section table {
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 14px;
	border-collapse: collapse;
}
#reserveCal section thead th {
	position: sticky;
	top: -1px;
	background-color: #bcc0d4;
	border-top: #999999 1px solid;
  z-index: 3;
}
#reserveCal section th,
#reserveCal section td {
  width: calc(14.2%);
	margin: 0;
	padding: 5px;
	text-align: center;
	vertical-align: top;
	line-height: 1;
	border: #999999 1px solid;
}
#reserveCal section tbody {
	z-index: 1;
}
#reserveCal section tbody th {
  position: sticky;
  left: -1px;
  border-right: #999999 1px solid;
  background-color: #FFFFFF;
	z-index: 2;
}
#reserveCal section tbody td.cell {
  margin: 0;
  padding: 10px 5px;
}
#reserveCal section tbody td.cell.open {
  cursor: pointer;
}
#reserveCal section tbody td.cell.open:not(.reserve):hover {
	background-color: #fafad9;
}
/* 予約指定日 */
#reserveCal section tbody td.cell.reserve {
  background-color: #bcc0d4;
}
/* 日付 */
#reserveCal tbody h5 {
  margin: 0 0 5px 0;
  padding: 5px;
  font-size: 16px;
  font-weight: 700;
  background-color: #DDDDDD;
  border-radius: 9999px;
}
/* 宿泊予約 */
#reserveCal p.stay.open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 0 5px 0;
  padding: 5px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
	background-color: #53576A;
  border-radius: 3px;
}
#reserveCal p.stay.open span.eclc {
  margin: 0;
  padding: 2px 5px;
  color: #53576A;
  font-size: 12px;
  font-weight: 400;
  background-color: #FFFFFF;
}
#reserveCal p.stay.off {
  margin: 0 0 5px 0;
  padding: 5px;
  color: #CCCCCC;
  font-size: 12px;
  font-weight: 400;
	border: #CCCCCC 1px solid;
  border-radius: 3px;
}
/* 価格 */
#reserveCal p.price {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 300;
}


/*
* オプション選択
*/
#reserveOption {

}
#reserveOption section {
  margin: 0;
  padding: 0;
}
#reserveOption section + section {
  margin-top: 40px;
}
#reserveOption section h4 {
  margin: 0 0 10px 0;
  padding: 5px 5px 5px 10px;
  font-size: 18px;
  font-weight: 600;
  border-left: #000000 5px solid; 
}
/* アイテム */
#reserveOption ul.itemList {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px;
  margin: 0;
  padding: 0;
}
#reserveOption ul.itemList li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: calc(33.3% - 13.4px);
  margin: 0;
  padding: 10px;
  border: #CCCCCC 1px solid;
  cursor: pointer;
}
#reserveOption ul.itemList li.active {
  background-color: #fafad9;
}
#reserveOption ul.itemList .wrap {
  flex: 1;
}
#reserveOption ul.itemList label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 2em;
  margin: 0;
  padding: 0;
}
#reserveOption ul.itemList input.amount {
  width: 2em;
  margin: 0;
  padding: 5px 10px;
  text-align: center;
  font-size: 18px;
  background-color: #FFFFFF;
  border: none;
  border: #E6E6E6 2px solid;
  border-radius: 5px;
  /*pointer-events: none;*/
}
#reserveOption ul.itemList img.thumb {
  display: none; /* temp */
  object-fit: cover;
  width: 30%;
  height: 80px;
}


/*
* 予約内容
*/
#reserveConfirm {

}
.pointAddcatch {
  margin: 0 0 80px 0;
}
.pointAddcatch .buttonWrap {
  margin-top: 20px;
  margin-bottom: 0px;
}



/*
* 登録フォーム
*/
#registForm {

}
#registForm .formItems {
  width: 100%;
  margin: 0 0 40px 0;
  padding: 0;
}
/* プラン選択 */
#planForm {
  margin: 0 0 4rem 0;
  padding: 0;
}
#planForm h5 {
	display: block;
	align-items: center;
	width: 100%;
	margin: 0 0 2rem 0;
	padding: 1rem 2rem;
	font-size: 1.6rem;
	font-weight: 700;
	background-color: #EEEEEE;
	border-radius: 0;
}
/* 名前 */
#registForm .userName label {
  display: flex;
  align-items: center;
  width: calc(50% - 2rem);
  margin: 0;
  padding: 0.5rem 0 0.5rem 2rem;
}
#registForm .userName span {
  display: inline-block;
  width: 3em;
  font-weight: 700;
}
#registForm .userName input {
  flex: 1;
}
/* メールアドレス */
#registForm .email input {
  flex: 1;
}
/* 住所 */
#registForm .address {
  flex-direction: column;
  align-items: stretch;
}
#registForm .address #zip {
  width: 10em;
}
#registForm .address #city,
#registForm .address #addr {
  display: block;
  flex: 1;
}
/* 振込口座情報 */
#registForm .bank label {
  display: flex;
  align-items: center;
  width: calc(50% - 2rem);
  margin: 0;
  padding: 0.5rem 0 0.5rem 2rem;
}
#registForm .bank span {
  display: inline-block;
  width: 6em;
  font-weight: 700;
}
#registForm .bank input {
  flex: 1;
}
/* アカウントID */
#registForm .slug {
  flex-direction: column;
  align-items: stretch;
}
#registForm .slug label {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0;
}
/* パスワード */
#registForm .pass {
  flex-direction: column;
  align-items: stretch;
}
#registForm .pass label {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0;
}
#registForm .pass span {
  display: inline-block;
  width: 4em;
  font-weight: 700;
}
#registForm .pass input {
  width: 16em;
}
/* クレジットカード情報 */
#registForm .cc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
#registForm .stripe-input {
  display: inline-block;
  width: calc(100% - 10px);
  max-width: 390px;
  margin: 5px;
  padding: 5px 10px;
  font-size: 18px;
  background-color: #FFFFFF;
  border: none;
  border: #E6E6E6 2px solid;
  border-radius: 5px;
}
#registForm .expWrap {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  max-width: 400px;
}
#registForm #stripe_err {
  margin: 0;
  padding: 0;
  color: #FF0000;
  font-weight: 600;
}



/*
* 登録完了
*/
#registComplete {

}
#registComplete .text {
  margin-bottom: 4rem;
}


/*
* キャンプ場予約リスト
*/
#reserveList {
  margin: 0 auto 80px auto;
  padding: 0;
  border: #CCCCCC 1px solid;
  background-color: #FFFFFF;
}


/*
* 厨房予約リスト
*/
#kitchenList {
  margin: 0 auto 80px auto;
  padding: 0;
  border: #CCCCCC 1px solid;
  background-color: #FFFFFF;
}


/*
* 厨房予約詳細
*/
#kitchenConfirm {
  margin: 0 auto 40px auto;
  padding: 20px;
  border: #CCCCCC 1px solid;
  background-color: #FFFFFF;
}



/*
* ログインフォーム
*/
#loginForm {

}
#loginForm .passRemain {
	margin: -20px 0 20px 0;
	padding: 0;
	text-align: center;
}
#loginForm .passRemain a {
	font-size: 14px;
}



/*
* パスワード再設定
*/
#passMail .formItems {
  width: 100%;
  margin: 0;
  padding: 40px;
  border: #CCCCCC 1px solid;
}
/* パスワード */
#passMail .pass {
  flex-direction: column;
  align-items: stretch;
}
#passMail .pass label {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0;
}
#passMail .pass span {
  display: inline-block;
  width: 4em;
  font-weight: 700;
}
#passMail .pass input {
  width: 16em;
}













/*
* スマホ用 
*/


@media screen and (max-width:992px){



  /*
  * レイアウト header 80px
  */
  #mypage {

  }
  .artBase {
    margin: 0 auto 60px auto;
    padding: 20px 10px;
  }
  .artBase h3 {
    margin: 0 0 20px 0;
    font-size: 16px;
  }


  /*
  * ログインフォーム
  */
  #loginForm {
    padding: 50px 10px;
  }
  /* テキスト */
  #loginForm .text {
    font-size: 14px;
  }







  /*
  * マイページTOP
  */
  #mypageCont {
    
  }
  #mypageCont .text {
    margin: 0 0 40px 0;
    font-size: 14px;
  }


  /*
  * キャンプ場予約
  */
  #reserve {
    margin: 0 auto 60px auto;
    padding: 20px 0;
  }
  #reserve .text {
    font-size: 14px;
  }


  /*
  * 厨房予約
  */
  #kitchen {
    margin: 0 auto 60px auto;
  }
  #kitchen .text {
    font-size: 14px;
  }



  /*
  * 予約カレンダー
  */
  #reserveCal {
  	margin: 30px 0;
  	padding: 0;
  }
  #reserveCal .calHead {
  	top: 8px;
  }
  #reserveCal .calHead .calArrow {
    font-size: 16px;
  }
  #reserveCal h5.calMonth {
  	font-size: 20px;
  }
  /* カレンダー */
  #reserveCal section .cal {
  	max-height: auto;
  }
  /* 日付 */
  #reserveCal tbody h5 {
    margin: 0 0 5px 0;
    padding: 5px;
    font-size: 14px;
  }


  /*
  * オプション選択
  */
  /* アイテム */
  #reserveOption ul.itemList {
    flex-wrap: wrap;
    gap: 20px;
  }
  #reserveOption ul.itemList li {
    flex-direction: column;
    gap: 10px;
    width: calc(50% - 10px);
  }
  #reserveOption ul.itemList .wrap {
    order: 2;
    flex: none;
  }
  #reserveOption ul.itemList label {
    order: 3;
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    width: auto;
    margin: 0 0 0 auto;
  }
  #reserveOption ul.itemList input.amount {
    width: 3em;
    padding: 5px 10px;
    font-size: 14px;
  }
  #reserveOption ul.itemList img.thumb {
    order: 1;
    width: 100%;
    height: 80px;
  }


  /*
  * 予約内容
  */
  #reserveConfirm {

  }
  .pointAddcatch {
    margin: 0 0 60px 0;
  }
  .pointAddcatch .buttonWrap {
    margin-top: 20px;
    margin-bottom: 0px;
  }


  /*
  * 登録フォーム
  */
  #registForm {

  }
  /* テキスト */
  #registForm .text {
    margin: 0 0 40px 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
  }
  /* 名前 */
  #registForm .userName label {
    display: flex;
    align-items: center;
    width: calc(50% - 2rem);
    margin: 0;
    padding: 0.5rem 0 0.5rem 2rem;
  }
  #registForm .userName span {
    display: inline-block;
    width: 3em;
    font-weight: 700;
  }
  #registForm .userName input {
    flex: 1;
  }
  /* メールアドレス */
  #registForm .email input {
    flex: 1;
  }
  /* 住所 */
  #registForm .address {
    flex-direction: column;
    align-items: stretch;
  }
  #registForm .address #zip {
    width: 10em;
  }
  #registForm .address #city,
  #registForm .address #addr {
    display: block;
    flex: 1;
  }
  /* 振込口座情報 */
  #registForm .bank label {
    display: flex;
    align-items: center;
    width: calc(50% - 2rem);
    margin: 0;
    padding: 0.5rem 0 0.5rem 2rem;
  }
  #registForm .bank span {
    display: inline-block;
    width: 6em;
    font-weight: 700;
  }
  #registForm .bank input {
    flex: 1;
  }
  /* アカウントID */
  #registForm .slug {
    flex-direction: column;
    align-items: stretch;
  }
  #registForm .slug label {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0;
  }
  /* パスワード */
  #registForm .pass {
    flex-direction: column;
    align-items: stretch;
  }
  #registForm .pass label {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0;
  }
  #registForm .pass span {
    display: inline-block;
    width: 4em;
    font-weight: 700;
  }
  #registForm .pass input {
    width: auto;
  }

	/*
	* パスワード再設定
	*/
	#passMail .formItems {
	  padding: 10px;
	}
	/* パスワード */
	#passMail .pass {
	  flex-direction: column;
	  align-items: stretch;
	}
	#passMail .pass label {
	  display: flex;
	  align-items: center;
	  width: 100%;
	  margin: 0;
	  padding: 0.5rem 0;
	}
	#passMail .pass span {
	  display: inline-block;
	  width: 4em;
	  font-weight: 700;
	}
	#passMail .pass input {
	  width: auto;
	}













}


/* end */