@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: var(--color-main);
}

.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 ==========================================
*/
.w1200 {
	width: 1200px;
}

.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:1080px) {
	.tb_sp_only {
		display: none !important;
	}
}

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

@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 ==========================================
*/


/*==================================================
  linkBtn（共通リンクボタン）
==================================================*/
.linkBtn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 56px;
	padding: 0 55px 0 45px;
	border: 1px solid var(--color-main);
	border-radius: 60px;
	background: var(--color-main);
	color: var(--color-white);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
	overflow: hidden;
	transition: color .3s cubic-bezier(0.22, 0.61, 0.36, 1) .1s;
}

/* ホバーで左から広がり、色をワイプする円 */
.linkBtn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: calc(100% + 10px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--color-white);
	transform: translate(-50%, -50%) scale(0, 1);
	transform-origin: right top;
	transition: transform .45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 先頭アイコン付き（左右paddingを詰める） */
.linkBtn--icon {
	padding: 0 45px 0 35px;
}

/* 先頭アイコン */
.linkBtn__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url(/share/img/common/ico_contact_01.svg) no-repeat center / contain;
	mask: url(/share/img/common/ico_contact_01.svg) no-repeat center / contain;
}

.linkBtn__icon--instagram {
	-webkit-mask-image: url(/share/img/common/ico_instagram_01.svg);
	mask-image: url(/share/img/common/ico_instagram_01.svg);
}

/* 大サイズ（お問い合わせ誘導）のアイコンは25px */
.linkBtn--lg .linkBtn__icon {
	width: 25px;
	height: 25px;
}

/* 末尾の矢印 */
.linkBtn__arrow {
	position: absolute;
	top: 50%;
	right: 19px;
	width: 16px;
	height: 16px;
	background: currentColor;
	transform: translateY(-50%);
	transition: transform .35s cubic-bezier(0.22, 0.61, 0.36, 1);
	-webkit-mask: url(/share/img/common/ico_arrow_01.svg) no-repeat center / contain;
	mask: url(/share/img/common/ico_arrow_01.svg) no-repeat center / contain;
}

/* アイコン付き（normal）は矢印を内側へ */
.linkBtn--icon .linkBtn__arrow {
	right: 14px;
}

/* 小サイズ（ヘッダーCTA・44px・矢印なし） */
.linkBtn--sm {
	gap: 5px;
	min-height: 44px;
	padding: 0 25px;
	font-size: var(--fs-sm);
	white-space: nowrap;
}

/* 大サイズ（65px）。padding はアイコン無し（FV）基準 */
.linkBtn--lg {
	min-height: 65px;
	padding: 0 64px 0 54px;
	font-size: 18px;
}

/* 大サイズ＋アイコン付き（お問い合わせ誘導） */
.linkBtn--lg.linkBtn--icon {
	padding: 0 50px 0 40px;
}

.linkBtn--lg .linkBtn__arrow {
	right: 24px;
}

/* アウトライン（白背景・オレンジ文字） */
.linkBtn--outline {
	background: var(--color-white);
	color: var(--color-main);
}

/* アウトラインはオレンジの円でワイプ */
.linkBtn--outline::before {
	background: var(--color-main);
}

/* 外部リンク（矢印を外部リンクアイコンに差し替え） */
.linkBtn--external .linkBtn__arrow {
	-webkit-mask-image: url(/share/img/common/ico_external_01.svg);
	mask-image: url(/share/img/common/ico_external_01.svg);
}

/* ホバー時の動き（円が左から広がって色が変わる＋矢印の移動） */
@media (any-hover: hover) {

	/* 塗り：文字／アイコンをオレンジへ（白い円が左から広がる） */
	.linkBtn:hover {
		color: var(--color-main);
		opacity: 1;
	}

	/* アウトライン：文字／アイコンを白へ（オレンジの円が左から広がる） */
	.linkBtn--outline:hover {
		color: var(--color-white);
	}

	/* 円を全体へ広げる */
	.linkBtn:hover::before {
		transform-origin: left top;
		transform: translate(-50%, -50%) scale(1, 1);
	}

	/* 矢印の移動 */
	.linkBtn:hover .linkBtn__arrow {
		transform: translateY(-50%) translateX(3px);
	}

	.linkBtn--external:hover .linkBtn__arrow {
		transform: translateY(calc(-50% - 2px));
	}
}

/*==================================================
  textLink（矢印＋下線の控えめなテキストリンク）
==================================================*/
/* 下線は矢印の位置まで引く（ホバーで動く3px分の余白を右に確保する） */
.textLink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 5px 2px 5px;
	border-bottom: 1px solid currentColor;
	color: var(--color-black);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
}

.textLink__arrow {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background: currentColor;
	transition: transform .35s cubic-bezier(0.22, 0.61, 0.36, 1);
	-webkit-mask: url(/share/img/common/ico_arrow_01.svg) no-repeat center / contain;
	mask: url(/share/img/common/ico_arrow_01.svg) no-repeat center / contain;
}

@media (any-hover: hover) {
	.textLink:hover {
		opacity: 1;
		color: var(--color-main);
	}

	.textLink:hover .textLink__arrow {
		transform: translateX(3px);
	}
}

/*==================================================
  returnBtn（トップへ戻るボタン）
==================================================*/
.returnBtn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 56px;
	padding: 0 40px 0 60px;
	border: 1px solid var(--color-main);
	border-radius: 60px;
	background: var(--color-white);
	color: var(--color-main);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
	overflow: hidden;
	transition: color .3s cubic-bezier(0.22, 0.61, 0.36, 1) .1s;
}

/* ホバーで右から広がり、色をワイプする円 */
.returnBtn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: calc(100% + 10px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--color-main);
	transform: translate(-50%, -50%) scale(0, 1);
	transform-origin: left top;
	transition: transform .45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 先頭の矢印（左向き） */
.returnBtn__arrow {
	position: absolute;
	top: 50%;
	left: 24px;
	width: 16px;
	height: 16px;
	background: currentColor;
	transform: translateY(-50%) rotate(180deg);
	transition: transform .35s cubic-bezier(0.22, 0.61, 0.36, 1);
	-webkit-mask: url(/share/img/common/ico_arrow_01.svg) no-repeat center / contain;
	mask: url(/share/img/common/ico_arrow_01.svg) no-repeat center / contain;
}

/* 小サイズ（44px） */
.returnBtn--sm {
	min-height: 44px;
	padding: 0 25px 0 40px;
	font-size: var(--fs-sm);
}

.returnBtn--sm .returnBtn__arrow {
	left: 14px;
}

/* ホバー時の動き（円が右から広がって色が変わる＋矢印の移動） */
@media (any-hover: hover) {

	/* 文字／矢印を白へ（黒い円が右から広がる） */
	.returnBtn:hover {
		color: var(--color-white);
		opacity: 1;
	}

	/* 円を全体へ広げる */
	.returnBtn:hover::before {
		transform-origin: right top;
		transform: translate(-50%, -50%) scale(1, 1);
	}

	/* 矢印の移動 */
	.returnBtn:hover .returnBtn__arrow {
		transform: translateY(-50%) translateX(-3px) rotate(180deg);
	}
}

/*
===== 9: icon ==========================================
*/

.iconWrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(5px, 1.5vw, 10px);
}

.icon {
	display: inline-block;
	border: 1px solid var(--color-black);
	border-radius: var(--rad-sm);
	padding: 0.35em 0.7em;
	background: #fff;
	font-size: var(--fs-sm);
	line-height: 1.1;
	letter-spacing: .05em;
	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_cate {
	border-color: var(--color-main);
	color: var(--color-main);
	font-weight: bold;
	transition: .3s;
}

/* カテゴリーがリンクの場合（詳細ページ）は絞り込みボタンと同じホバーにする */
@media (any-hover:hover) {
	.iconWrap a:hover {
		opacity: 1;
	}

	.iconWrap a:hover .icon.icon_cate {
		background: var(--color-main);
		color: var(--color-white);
	}
}

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

.icon.icon_reservable {
	background: var(--color-main);
	color: #fff;
	border-color: var(--color-main);
	font-weight: bold;
}

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

@media screen and (max-width: 767px) {
	.icon {
		font-size: var(--fs-2xs);
	}
}

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