@charset "utf-8";
/*~~~~~~General parameter~~~~~~*/
/*
===== 1: Clearfix & Float ==========================================
*/
.clearfix{
 zoom:1;/*for IE 5.5-7*/
}
.clearfix:after{/*for modern browser*/
 content:".";
 display: block;
 height:0px;
 clear:both;
 visibility:hidden;
 font-size: 0;/*これで解決させる*/
}
* html .clearfix{
 display:inline-table;
 display:block;
 height: 1px;
}
@media print,screen and (min-width:768px) {
  .flt_r {
    float: right;
  }
  .flt_l {
    float: left;
  }
}
.cr{
 height: 0;
 margin: 0;
 padding: 0;
 font-size: 1px;
 line-height: 1px;
 display: block;
 clear: both;
}/* clearboth */


/*
===== 2: Fonts ==========================================
*/
/*font-style*/
.font11{font-size:11px;}
.font12{font-size:12px;}
.font14{font-size:14px;} 
.font16{font-size:16px;}
.font20{font-size:20px;}
.font22{font-size:22px;}
.font32{font-size:32px;}
.font34{font-size:34px;}
.font35{font-size:35px;}
.font_cr{font-weight:normal;}
.font_b{font-weight:bold;}

/*font-color*/
.font_red{color:#E81733;}
.font_blue{
	color: var(--color-lightblue);
}
.font_white{color:#FFF;}

/*marker*/
.marker_blue{
	background:linear-gradient( transparent 65%, var(--color-main), 65%) ;
}
.marker_yellow{
	background:linear-gradient(transparent 65%, #ffff00 65%);
}

/*
===== 3: Text formatting ==========================================
*/
.text_c{text-align:center !important;}
.text_r{text-align:right !important;}
.text_l{text-align:left !important;}

.inline-block {display: inline-block;}
/*
===== 4: Background ==========================================
*/
.bg_red{background-color:#E81733;}
.bg_darkblue{background-color:#001833;}
.bg_blue{background-color:#0083B3;}
.bg_lightblue{background-color:#CFE1E8;}
.bg_lightgray{background-color:#F0F0F0;}
.bg_gray{background-color:#CCC;}
.bg_darkgray{background-color:#333;}
.bg_white{background-color:#FFF;}
.bg_page01{
 border:1px solid #E6E6E6;
 border-top:none;
 background:#fff;
}
.bg_thanks01,.err404{
 margin:20px 40px;
 padding:20px;
 font-size:14px;
 text-align:center;
 border:1px solid #E6E6E6;
}

/*
===== 5: Width ==========================================
*/
.w1140{width: 1140px;}
.w100p{width: 100%;}
.w90p{width: 90%;}
.w80p{width: 80%;}
.w70p{width: 70%;}
.w60p{width: 60%;}
.w50p{width: 50%;}
.w40p{width: 40%;}
.w30p{width: 30%;}
.w20p{width: 20%;}
.w10p{width: 10%;}
.w100p_max{max-width: 100%;}
.w96p_max{max-width: 96%;}
.w90p_max{max-width: 90%;}


/*
===== 6: Margin & Padding ==========================================
*/
.mgn2-5p{margin: 2.5%;}
.mgn5p{margin: 5%;}
.mgn10p{margin: 10%;}
.mgn20p{margin: 20%;}

.mgn2-5pw{margin-right: 2.5%;margin-left: 2.5%;}
.mgn5pw{margin-right: 5%;margin-left: 5%;}
.mgn10pw{margin: 0 10%;}
.mgn20pw{margin: 0 20%;}

.mgn2-5ph{margin-top: 2.5%;margin-bottom: 2.5%;}
.mgn5ph{margin-top: 5%;margin-bottom: 5%;}
.mgn10ph{margin: 10% 0;}
.mgn20ph{margin: 20% 0;}

.mgn2-5ptop{margin-top: 2.5%;}
.mgn5ptop{margin-top: 5%;}
.mgn10ptop{margin-top: 10%;}
.mgn20ptop{margin-top: 20%;}

.mgn2-5pbttm{margin-bottom: 2.5%;}
.mgn5pbttm{margin-bottom: 5%;}
.mgn10pbttm{margin-bottom: 10%;}
.mgn20pbttm{margin-bottom: 20%;}

.mgn2-5pleft{margin-left: 2.5%;}
.mgn5pleft{margin-left: 5%;}
.mgn10pleft{margin-left: 10%;}
.mgn20pleft{margin-left: 20%;}

.mgn2-5pright{margin-right: 2.5%;}
.mgn5pright{margin-right: 5%;}
.mgn10pright{margin-right: 10%;}
.mgn20pright{margin-right: 20%;}

.pdng2-5p{padding: 2.5%;}
.pdng5p{padding: 5%;}
.pdng10p{padding: 10%;}
.pdng20p{padding: 20%;}

.pdng2-5pw{padding-right: 2.5%;padding-left: 2.5%;}
.pdng5pw{padding-right: 5%;padding-left: 5%;}
.pdng10pw{padding: 0 10%;}
.pdng20pw{padding: 0 20%;}

.pdng2-5ph{padding-top: 2.5%;padding-bottom: 2.5%;}
.pdng5ph{padding: 5% 0;}
.pdng10ph{padding: 10% 0;}
.pdng20ph{padding: 20% 0;}

.pdng2-5top{padding-top: 2.5%;}
.pdng5top{padding-top: 5%;}
.pdng10top{padding-top: 10%;}
.pdng20top{padding-top: 20%;}

.pdng2-5pbttm{padding-bottom: 2.5%;}
.pdng5pbttm{padding-bottom: 5%;}
.pdng10pbttm{padding-bottom: 10%;}
.pdng20pbttm{padding-bottom: 20%;}

.pdng2-5pleft{padding-left: 2.5%;}
.pdng5pleft{padding-left: 5%;}
.pdng10pleft{padding-left: 10%;}
.pdng20pleft{padding-left: 20%;}

.pdng2-5pright{padding-right: 2.5%;}
.pdng5pright{padding-right: 5%;}
.pdng10pright{padding-right: 10%;}
.pdng20pright{padding-right: 20%;}


/*
===== 7: display ==========================================
*/
.disp_fl,.disp_fl_responsive{display: flex;}
.disp_bl{display: block;}
.disp_in{display: inline-block;}
@media screen and (max-width:767px){
 .disp_fl_responsive{
  flex-direction: column;
 }
}
@media screen and (min-width:1140px){
 .pc_wide{
  display: block;
 }
 .pc_wide_hidden{
  display: none;
 }
}
@media screen and (max-width:1139px){
 .pc_wide{
  display: none;
 }
}
@media screen and (min-width:768px){
 .pc_hidden{
  display: none !important;
 }
 .sp_only{
  display: none !important;
 }
}
@media screen and (max-width:767px){
 .sp_hidden{
  display: none !important;
 }
 .pc_only{
  display: none !important;
 }
}

/*
===== 8: button ==========================================
*/
/*shadow*/
.btn_shadow-black{
	background: #fff;
	box-shadow: 4px 4px 0 0 #111;
	border: 2px solid #111;
	color: #111;
}
.btn_shadow-black:hover{
	background: #ff0;
	opacity:1;
}
.btn_shadow-blue{
	background: #fff;
	box-shadow: 4px 4px 0 0 var(--color-main);
	border: 2px solid var(--color-main);
	color: var(--color-main);
}
.btn_shadow-blue:hover{
	background: #ff0;
	opacity:1;
}

/*arrow*/
.btn_arrow-black,
.btn_arrow-blue{
	position:relative;
	padding-right: 20px;
}

.btn_arrow-black::after{
	content:"";
	width: 12px;
	height: 12px;
	display:block;
	border-top:3px solid #111;
	border-right:3px solid #111;
	position:absolute;
	top:50%;
	right:8%;
	transform: rotate(45deg) translateY(-50%);
}
.btn_arrow-blue::after{
	content:"";
	width: 12px;
	height: 12px;
	display:block;
	border-top:3px solid var(--color-main);
	border-right:3px solid var(--color-main);
	position:absolute;
	top:50%;
	right:8%;
	transform: rotate(45deg) translateY(-50%);
}

/*シャドウありボタン（フォーム送信完了画面で使用）*/
.btnSend a {
  width: 210px;
  height: 60px;
  margin: 40px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid;
  background: #fff;
}

/*
===== 9: icon ==========================================
*/
.icon{
	display:inline-block;
	border:1px solid #111;
	padding:0.25em 1em;
	background:#fff;
	margin-right:0.5em;
	font-size: clamp(0.625rem, 0.527rem + 0.49vw, 0.875rem);
	position:relative;
	max-width:10em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}
.icon a::after{
	content:"";
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
}

.icon.icon_new {
	background:#ff0;
	font-weight: bold;
}
.icon.icon_reservabl e{
	background:var(--color-main);
	color:#ff0;
}
.icon.icon_end {
	border-color:#999;
	background:#999;
	color:#fff;
}

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

}
/*
===== 10: other ==========================================
*/
.centering {
 margin-right: auto;
 margin-left: auto;
}

/*************** フォームボタン共通（黒） ****************/
.btn_form {
  border-radius: 8px;
  color: #fff;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: bold;
  padding: 1em 2em;
  text-decoration: none;
  display: inline-block;
  min-width: 40%;
  text-align: center;
  background: var(--color-black);
  border: 2px solid var(--color-black) !important;
  margin: 0 1em;
}

@media (any-hover:hover) {
  .btn_form:hover {
    color: var(--color-black);
    background-color: #fff !important;
    opacity: 1 !important;
  }
}

/*************** ベタ塗ボタン(メインカラー) ****************/
.btn_type01 {
  background: var(--color-main) !important;
  border-color: var(--color-main) !important;
}

@media (any-hover:hover) {
  .btn_type01:hover {
    color: var(--color-main) !important;
    background-color: #fff !important;
    opacity: 1 !important;
  }
}

/*************** ベタ塗ボタン02(グレー／戻る) ****************/
.btn_type02 {
  background: var(--color-darkgray) !important;
  border-color: var(--color-darkgray) !important;
  min-width: 24% !important;
}

@media (anbtn_type02y-hover:hover) {
  .btn_type01:hover {
    color: var(--color-darkgray) !important;
    background-color: #fff !important;
    opacity: 1 !important;
  }
}

/*************** 登録ボタン01（赤／会員登録） ****************/
.btn_regist01 {
  background: var(--color-main) !important;
  border-color: var(--color-main) !important;
}

@media (any-hover:hover) {
  .btn_regist01:hover {
    color: var(--color-main) !important;
    background-color: #fff !important;
    opacity: 1 !important;
  }
}

/*************** 検索ボタン ****************/
.btn_search {
  color: #fff;
  background-color: var(--color-main);
  border-radius: var(--rad-full);
  width: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin: 0 auto !important;
  border: 2px solid var(--color-main) !important;
}

@media (any-hover:hover) {
  .btn_search:hover {
    color: var(--color-main);
    background-color: #fff;
    opacity: 1 !important;
  }
}

/*************** クリアボタン ****************/
.btn_clear {
  text-align: center;
}

.btn_clear a {
  color: #fff;
  background-color: var(--color-gray);
  border-radius: var(--rad-full);
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  min-width: 20rem;
  padding: 16px;
  display: inline-block;
  border: 2px solid var(--color-gray);
}

@media (any-hover:hover) {
  .btn_clear a:hover {
    color: var(--color-gray);
    background-color: #fff;
    opacity: 1 !important;
  }
}

.btn_logout {
  width: 10rem;
  padding: 0.8em;
  font-size: 1.4rem;
  line-height: 1;
  color: #fff;
  background: var(--color-darkgray);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  font-weight: normal;
  border: 2px solid var(--color-darkgray);
}

@media (any-hover:hover) {
  .btn_clear a:hover {
    color: var(--color-darkgray);
    background-color: #fff;
    opacity: 1 !important;
  }
}

@media only screen and (max-width: 767px) {
  .submit_box {
    margin-bottom: 2em;
  }
  .btn_form {
    min-width: 80%;
    margin: 0 0.5em;
  }

  .btnSend_float {
    flex-direction: column;
    align-items: center;
  }

  .btnSend_float .btn_type02 {
    width: 80%;
    min-width: 35%;
    margin: 1em 0.5em;
  }

  .btn_logout {
    padding: 1.2em;
  }
}

/*==================================================
  index common : btn_archive
==================================================*/
/* アーカイブリンク */
.indexPage .btn_archive,
.text_c .btn_archive {
  font-size: 18px;
  font-weight:bold;
  width: 60%;
  max-width:380px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align:center;
}
.text_c .btn_archive {
  margin: var(--gutter-narrow) 0;
}
/*==================================================
  スマホ版 index common : btn_archive
==================================================*/
@media only screen and (max-width: 767px) {
	.indexPage .btn_archive,
  .text_c .btn_archive {
		font-size: 1.2em;
		width: 90%;
		max-width:380px;
		padding-top: 0.8em;
		padding-bottom: 0.8em;
	}
}

/*==================================================
  PC / SP DISPLAY
==================================================*/
@media print, screen and (min-width: 768px) {
  .pc_hidden {
    display: none !important;
  }

  .sp_only {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .sp_hidden {
    display: none !important;
  }

  .pc_only {
    display: none !important;
  }

  .sp_block {
    display: block !important;
  }
}

@media print, screen and (min-width: 1200px) {
  .pc_wide_hidden {
    display: none !important;
  }
}

@media print, screen and (max-width: 1199px) {
  .pc_wide_only {
    display: none !important;
  }
}