/* ***************************************************
 SP
*************************************************** */
@media screen and (max-width:1099px) {
.header-nav .header-bottom {
	padding-bottom: 90px;
	}
.header-nav .language .lang-list {
	position: absolute;
	bottom: 45px;
	left: 4vw;
	right: 4vw;
	border-top: 1px solid #cccccc;
	}
.header-nav .language h2::after {
	transform: rotate(-135deg);
	}
.header-nav .language h2.active::after {
	transform: rotate(45deg);
	}
}
/* ***************************************************
 PC
*************************************************** */
@media all and (min-width:1100px) {}

/* 言語毎の表示調整 */
:root:not([lang="ja"]) .for-lang-ja{
	display: none !important;
}

/* リンク削除（日本語専用コンテンツ） */
:root:not([lang="ja"]) :is(.footer-nav, .sp-sub-nav) li:has( :is(a[href*="/contact/"], a[href*="//drhm.jp/"]) ):not( :has(a[href="https://drhm.jp/privacypolicy-en/"]) ){
	display: none;
}
:root:not([lang="ja"]) a[href*="//drhm.jp/"]:not(a[href="https://drhm.jp/privacypolicy-en/"]){
	color: inherit !important;
	text-decoration: none;
	user-select: none;
	pointer-events: none;
}

/* ruby 削除 (英語のみ) */
:root[lang="en"] :is(.page-title, .section-title) > small{
	display: none;
}
:root[lang="en"] .allic-points .point h2 > small{
	display: none;
}

/* footer nav 改行問題 */
.footer-nav{
	flex-wrap: wrap;
	gap: 1em 0;
}

/* pankz スマホ折返し対策 */
@media screen and (max-width: 1099px) {
.pankz {
	flex-wrap: wrap;
	gap: .5em 0;
	}
}

/* access > 時刻表 (崩れ対策) */
th:where(thead *){
	white-space: normal;
}

/* top > the hotel (レイアウト調整) */
@media all and (min-width:1100px){

/* facilities > facilities-archive > card */
.page-facilities .facilities-archive .card dl{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
}
.page-facilities .facilities-archive .card dl > div{
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span 2;
}
.page-facilities .facilities-archive .card dl dt{
	width: auto;
	&:where(:root[lang="en"] *){
		width: min-content;
	}
}
.page-facilities .facilities-archive .card dl dd{
	padding-left: 0;
}

/* access > SP表示でのフォントカラー修正 */
@media screen and (max-width: 1099px){
.page-access .access-route #access-tab li.active {
    background-color: #53514f;
    color: #fff;
	}
}

@media screen and (max-width: 1099px){
.page-access .access-route #access-tab li {
    padding: 15px 2vw;
    text-align: center;
    color: #53514f;
    border-right: 1px solid #53514f;
    border-bottom: 1px solid #53514f;
	}
}

@media screen and (max-width: 1099px){
.page-access .access-route .route-wrapper h2 {
    margin-bottom: 20px;
    padding-left: 15px;
    font-size: 20px;
    font-weight: 500;
    color: #a790c4;
    line-height: 1.5em;
    border-left: 5px solid #a790c4;
	}
}

@media screen and (max-width: 1099px){
.page-access .access-route .route-wrapper h2, .page-access .access-route .route-wrapper h3 {
    font-weight: 400;
    color: #a790c4;
	}
}

/*スパページ 画像の余白表示調整*/
@media (min-width: 1100px) {
.page-wellness .wellness-col2 {
	padding: 1em 2em;
	}
}

/*トップページ PLAN-THE HOTELの余白調整*/
@media (min-width: 1100px) {
.section-front-plan {
	margin-bottom: 0!important;
    }
}
/*トップページ　THE HOTEL ボタン箇所の余白*/
@media (min-width: 1100px) {
.front-spend .inner .text .btn {
	margin-top: 40px!important;
	}
}

/*トップページ　EXPERIENCES背景色*/
@media (min-width: 1100px) {
    .front-main .section-experiences {
        margin-bottom: 0;
        padding: 120px;
        background-color: #f6f4f9;
    }
}
/*-------- よくあるご質問ページ お問い合わせ導線追加など --------*/
.faq-intro > p{
	color: #777777;
}
.faq-intro a{
	color: #a790c4;
}
.faq-intro a:hover{
	opacity: 0.8;
}
@media (min-width: 1100px) {
.faq-intro {
	width: 1200px;
	margin: 0 auto 80px;
	text-align: center;
	}
}
@media screen and (max-width: 1099px) {
.faq-intro {
	width: 100%;
	padding: 0 4vw;
	margin: 0 auto 50px;
	}
	.faq-intro p{
		font-size: .875em;
	}
}

/*-------- 温泉LP導線バナー追加 --------*/
@media screen and (max-width:1099px) {
	.front-banner {
	text-align: center;
	}
	.front-banner a {
	display: inline-block;
	margin: 2em auto 0;
	padding: 0 4vw;
	}
	.front-banner2 {
	text-align: center;
	}
	.front-banner2 a {
	display: inline-block;
	margin: 0 auto;
	padding: 0 4vw;
	}
}
@media all and (min-width:1100px) {
	.front-banner {
	text-align: center;
	}
	.front-banner a {
	display: inline-block;
	margin: 4em auto 0;
	}
	.front-banner a:hover {
	opacity: 0.8;
	}
	.front-banner2 {
	text-align: center;
	}
	.front-banner2 a {
	display: inline-block;
	margin: 0 auto;
	}
	.front-banner2 a:hover {
	opacity: 0.8;
	}
}
/*--イヤーエンドバナー追加設置 20241129--*/
@media screen and (min-width: 1100px) {
	.front-banner--top{
		/*display: inline-block;*/
		justify-content: space-evenly;
		margin-top: 4em;
	}
	.front-banner--top a{
		margin: 0 1.25em;
		/*max-width: 27%;*/
		/*max-width: 39%;*/
		max-width: 33%;
	}
	.front-banner--top2{
	}
	.front-banner--top2 a{
	}
	.year-end{
		/*width: 12.3%;*/
		width: 14.9%;
	}
	.bnr-onsen{
		/*width: 24%;*/
		width: 29%;
	}
	.bnr-1stannive {
	 	max-width: 33%;
	}
}

@media screen and (max-width:1099px) {
	.front-banner--top2{
		margin: 0 auto;
	}
}

/*--予約人数箇所の変更・調整 20241220--*/
@media (min-width: 1100px) {
	#reservation-modal .callendar {
		width: 490px;
		}
	#reservation-modal .guests {
		position: relative;
		width: 490px;
		padding-left: 10px;
		}
	#reservation-modal #guests-modal {
		display: none;
		position: absolute;
		top: 62px;
		width: 480px;
		padding: 20px 15px;
		font-size: 14px;
		background-color: #fff;
		color: #6e6e6e;
		border: 1px solid #cccccc;
		}
}
/*--EN > TOPリニューアル > タイトル英字削除 @ 250529--*/
[lang="en"] .front-section-title small{
	display: none;
}
[lang="en"] .front-section-title b{
	margin-bottom: 0;
}
/*--EN > グローバルナビ調整 @ 250529--*/
[lang="en"] #headerBottom .header-list > li > a:hover .en,
[lang="en"] #headerBottom .header-list > li > a.current .en,
[lang="en"] #headerBottom .header-list > li > span:hover .en,
[lang="en"] #headerBottom .header-list > li > span.current .en{
	display: block;
}
[lang="en"] #headerBottom .header-list > li > a:hover .ja,
[lang="en"] #headerBottom .header-list > li > a.current .ja,
[lang="en"] #headerBottom .header-list > li > span:hover .ja,
[lang="en"] #headerBottom .header-list > li > span.current .ja{
	display: none;
}