@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: #d9331e;
}

.font_blue {
	color: #0083B3;
}

.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 ==========================================
*/
/*************** トップへ戻るボタン ****************/
.btn__backTop {
	background-color: #fff;
	border: 0.2rem solid var(--black);
	border-radius: 4rem;
	box-shadow: 0 3px 7px rgb(0 0 0 / 35%);
	margin: 0 auto;
	font-size: 1.8rem;
	font-weight: bold;
	text-indent: 2rem;
	width: 36rem;
	height: 7rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transform: rotate(0.03deg);
	z-index: 2;
}

.btn__backTop::before {
	position: absolute;
	content: '';
	width: 3.9rem;
	height: 2rem;
	background: url(/share/img/common/icon_backArrow.png) center/100% no-repeat;
	top: 45%;
	left: 3rem;
	transform: translateY(-50%);
}

@media print,
screen and (max-width:767px) {
	.btn__backTop {
			width: 80%;
			font-size: 1.6rem;
			height: 6rem;
	}
	.btn__backTop::before {
			width: 8vw;
			height: 5vw;
			max-width: 3.9rem;
	}
}

.btn__backTop:hover {
	background-color: #4e9151;
	color: #fff;
	opacity: 1;
}

.btn__backTop:hover::before {
	background: url(/share/img/common/icon_backArrowWhite.png) center/100% no-repeat;
}
/*shadow*/
.btn_shadow-black {
	background: #fff;
	box-shadow: 4px 4px 0 0 #111;
	border: 2px solid #111;
	color: #111;
}

.btn_shadow-black:hover {
	background: var(--color-main);
	border: 2px solid #111;
	color: #fff;
	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%);
}

/*
===== 9: icon ==========================================
*/
.icon {
	display: inline-block;
	position: relative;
	max-width: 10em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
	font-weight: 700;
	font-size: 1.6rem;
	background-color: var(--color-main);
	color: #fff;
	padding: 0.7rem;
	transform: rotate(0.03deg);
}

.icon a::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.icon+.icon {
	margin-left: 0.7rem;
}

.icon_new {
	font-weight: 700;
	font-size: 1.6rem;
	background-color: yellow;
	color: #333;
	padding: 0.7rem;
	display: inline-block;
	flex-shrink: 0;
	letter-spacing: 0.04em;
	line-height: 1;
}

.icon.icon_reservable {
	background: var(--color-main);
	color: #ff0;
}

.icon.icon_popular {
	background: var(--orange);
}

.icon.icon_end {
	border-color: #999;
	background: #999;
	color: #fff;
}

@media screen and (min-width: 1024px) {
	.icon {
		font-size: 1.6rem;
	}
}

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

a.btn-hover:hover {
	background-color: #4e9151;
	color: #fff;
	opacity: 1;
}

a.btn-hover:hover::after {
	background: url('/share/img/common/icon_arrowWhite.png') center/100% no-repeat;
}

a.btn-brown__hover:hover {
	background-color: var(--brown);
	color: #fff;
	opacity: 1;
}

a.btn-brown__hover:hover::after {
	background: url('/share/img/common/icon_arrowWhite.png') center/100% no-repeat;
}

a.btn-white__hover:hover {
	border: 2px solid var(--brown);
	background-color: #fff;
	color: var(--black);
	opacity: 1;
}

a.btn-white__hover:hover::after {
	background: url('/share/img/index/icon_arrowBrown.png') center/100% no-repeat;
}