@charset "UTF-8";
/* Premiun */
/* c-hero */
@media all and (max-width: 767px) {
  .c-hero {
    padding-bottom: calc(30 / var(--fontSize) * 1em);
  }
}

/* ==================================================
premium-hotel-tab
================================================== */
@media all and (min-width: 768px) {
	.premium-hotel-tab {
		position: relative;
		margin-top: calc(40 / var(--fontSize) * 1em);
	}
	.premium-hotel-tab-list {
		display: flex;
		overflow: hidden;
		border-bottom: calc(2 / var(--fontSize) * 1em) solid #04489D;
	}
	.premium-hotel-tab-list__item {
		width: calc((100% - calc(4 / var(--fontSize) * 1em) * 8) / 9);
		position: relative;
		z-index: 1;
		padding: calc(14 / var(--fontSize) * 1em) calc(10 / var(--fontSize) * 1em);
		text-align: center;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #F4F4F4;
	}
	.premium-hotel-tab-list__item:not(:last-child) {
		margin-right: calc(4 / var(--fontSize) * 1em);
	}
	.premium-hotel-tab__label {
		font-family: var(--font-NotoSans);
		font-size: calc(16 / var(--fontSize) * 1em);
		font-weight: 400;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--color-brand-blue);
	}
	.premium-hotel-tab-list__item[aria-selected="false"] {
		transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
	}
	.premium-hotel-tab-list__item[aria-selected="false"]:hover {
		opacity: .7;
	}
	.premium-hotel-tab-list__item[aria-selected="true"] {
		background-color: #04489D;
		pointer-events: none;
	}
	.premium-hotel-tab-list__item[aria-selected="true"] .premium-hotel-tab__label {
		color: #fff;
	}
	.premium-hotel-tab-panel {
		position: relative;
		z-index: 1;
		background-color: #F4F4F4;
	}
	.premium-hotel-tab-panel__item {
		padding: calc(40 / var(--fontSize) * 1em) calc(115 / var(--fontSize) * 1em);
	}

	/* premium-hotel-tab-panel__ttl */
	.premium-hotel-tab-panel__ttl {
		color: var(--color-brand-navy);
		font-size: calc(18 / var(--fontSize) * 1em);
		line-height: 2;
	}
	.premium-hotel-list + .premium-hotel-tab-panel__ttl {
		margin-top: calc(10 / 16 * 1em);
	}

	/* premium-hotel-list */
	.premium-hotel-list {
		display: flex;
		flex-flow: wrap;
	}
	.premium-hotel-list > li {
		width: calc((100% - calc(18 / var(--fontSize) * 1em) * 2) / 3);
		margin-bottom: calc(10 / var(--fontSize) * 1em);
	}
	.premium-hotel-list > li:not(:nth-child(3n)) {
		margin-right: calc(18 / var(--fontSize) * 1em);
	}
	.premium-hotel-list > li > a {
		font-size: calc(13 / var(--fontSize) * 1em);
		color: #525252;
		text-decoration: underline;
		transition: opacity .2s ease;
	}
	.premium-hotel-list > li > a:hover {
		opacity: .7;
	}
	.premium-hotel-tab__note {
		margin-bottom: calc(10 / var(--fontSize) * 1em);
	}
}
@media all and (max-width: 767px) {
	.premium-hotel-tab-panel__item[aria-hidden="true"] {
		height: 0!important;
		display: block!important;
		visibility: hidden;
		overflow-x: hidden;
	}
	.premium-hotel-tab {
		position: relative;
		margin-top: calc(40 / var(--fontSize) * 1em);
	}
	.premium-hotel-tab-list {
		display: flex;
		overflow: hidden;
		border-bottom: calc(2 / var(--fontSize) * 1em) solid #04489D;
		overflow-x: scroll;
	}
	.premium-hotel-tab-list__item {
		position: relative;
		z-index: 1;
		padding: calc(6 / var(--fontSize) * 1em) calc(20 / var(--fontSize) * 1em);
		text-align: center;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		background-color: #F4F4F4;
	}
	.premium-hotel-tab__label {
		font-family: var(--font-NotoSans);
		font-size: calc(15 / var(--fontSize) * 1em);
		font-weight: 400;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--color-brand-blue);
	}
	.premium-hotel-tab-list__item[aria-selected="true"] {
		background-color: #04489D;
	}
	.premium-hotel-tab-list__item[aria-selected="true"] .premium-hotel-tab__label {
		color: #fff;
	}
	.premium-hotel-tab-panel {
		position: relative;
		z-index: 1;
		background-color: #F4F4F4;
	}
	.premium-hotel-tab-panel__item {
	}

	/* premium-hotel-list__wrap */
	.premium-hotel-list-wrap {
		padding: calc(26 / var(--fontSize) * 1em) calc(25 / var(--fontSize) * 1em);
	}
	.premium-hotel-list-wrap.js-hotel-more-list {
		overflow: hidden;
	}

	/* premium-hotel-tab-panel__ttl */
	.premium-hotel-tab-panel__ttl {
		color: var(--color-brand-navy);
		font-size: calc(16 / var(--fontSize) * 1em);
		line-height: 2;
	}
	.premium-hotel-list + .premium-hotel-tab-panel__ttl {
		margin-top: calc(10 / 16 * 1em);
	}

	/* premium-hotel-list */
	.premium-hotel-list {
		display: flex;
		flex-flow: wrap;
	}
	.premium-hotel-list > li {
		width: calc((100% - calc(18 / var(--fontSize) * 1em)) / 2);
		margin-bottom: calc(10 / var(--fontSize) * 1em);
	}
	.premium-hotel-list > li:not(:nth-child(2n)) {
		margin-right: calc(18 / var(--fontSize) * 1em);
	}
	.premium-hotel-list > li > a {
		font-size: calc(13 / var(--fontSize) * 1em);
		color: #525252;
		text-decoration: underline;
	}

	.premium-hotel-list-more-btn__wrap {
		position: relative;
		padding-bottom: calc(30 / var(--fontSize) * 1em);
	}
	.premium-hotel-list-more-btn__wrap::before {
		content: "";
		height: calc(50 / var(--fontSize) * 1em);
		width: 100%;
		position: absolute;
		top: calc(-50 / var(--fontSize) * 1em);
		display: block;
		background: rgb(244,244,244);
		background: linear-gradient(0deg, rgba(244,244,244,1) 10%, rgba(244,244,244,0) 100%);
	}
	.premium-hotel-list-more-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: calc(1 / var(--fontSize) * 1em) solid var(--color-brand-blue);
    height: calc(57 / var(--fontSize) * 1em);
    padding: 0 calc(37 / var(--fontSize) * 1em);
    text-decoration: none!important;
		margin: 0 calc(25 / var(--fontSize) * 1em);
	}
	.premium-hotel-list-more-btn__label {
		position: relative;
    color: var(--color-brand-blue);
    font-size: calc(14 / var(--fontSize) * 1em);
    font-family: var(--font-NotoSans);
    letter-spacing: .05em;
	}
	.premium-hotel-list-more-btn__label::after {
		content: "";
    display: inline-block;
    background-image: url(../../../../img/v2/ico_arw_right_blue.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: calc(6 / 14 * 1em);
    height: calc(10 / 14 * 1em);
    margin-left: calc(20 / 14 * 1em);
    transform: rotate(90deg);
	}
	.premium-hotel-tab__note {
	margin-bottom: calc(14 / var(--fontSize) * 1em);
	}
}