@charset "UTF-8";
/* ==========================================================
 おすすめツアー（エリアページのDPカセット流用）
 ※カセット部分は /kaigai/area/hawaii/__assets/css/common.css の .cassette を移植（rem→px）
========================================================== */
.rec-tour{margin:80px auto 0;padding:0 0 8px;max-width:1100px;width:100%}
.rec-tour__ttl{margin:0 auto;width:90%;text-align:center;font-size:23px;font-weight:bold;color:var(--color-orange,#F47D0C)}

/* SP：横スクロール */
.rec-tour__list{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:75%;gap:12px;margin-top:24px;padding:8px 5% 16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rec-tour__list .cassette__item{scroll-snap-align:center}

/* JSONごとのラッパーをレイアウト上は無視して、カセットを直接グリッドに並べる */
.rec-tour__parts,
.rec-tour__items{display:contents}

/* 先頭から指定件数のみ表示 */
.rec-tour__parts.-show1 .cassette__item:nth-child(n+2),
.rec-tour__parts.-show2 .cassette__item:nth-child(n+3),
.rec-tour__parts.-show3 .cassette__item:nth-child(n+4){display:none}

/* 読み込み前の雛形・ローダーの「読み込み中…」表示は出さない */
.rec-tour__parts:not(.__tup2Loaded) .cassette__item{display:none}
.rec-tour__parts::after{display:none!important}

@media screen and (min-width: 768px){
	.rec-tour__ttl{font-size:40px}
	.rec-tour__list{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;padding:8px 0;overflow:visible}
}

/* ---------- cassette ---------- */
.rec-tour .cassette__item{min-width:0;text-align:left;line-height:1.5;font-size:14px}
.rec-tour .cassette__link{display:block;position:relative;padding-bottom:16px;height:100%;border-radius:10px;background:#fff;overflow:hidden;color:#323743;text-decoration:none;box-shadow:0 2px 6px 0 rgba(0,0,0,.3);transition:opacity .3s ease-out}
.rec-tour .cassette__block{display:flex;flex-direction:column;justify-content:flex-start;height:100%}
.rec-tour .cassette__ttl{margin:8px 8px 0;font-size:15px;line-height:1.5;font-weight:700;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;word-break:break-word;min-height:calc(1.5em * 3);max-height:calc(1.5em * 3)}
.rec-tour .cassette__ttl span{font-weight:700}
.rec-tour .cassette__ttl .logo{display:inline-flex;align-items:center}
.rec-tour .cassette__ttl .logo img{max-width:100%;width:inherit;vertical-align:middle}
.rec-tour .cassette__ttl .logo+.cassette__ttl-txt{margin-left:8px}
.rec-tour .cassette__dept{position:absolute;left:8px;top:8px;z-index:1;margin:0;padding:4px 8px;color:#fff;font-size:13px;line-height:1.3;border-radius:50vw;background:#323743}
.rec-tour .cassette__price{margin:8px 8px 0;text-align:center}
.rec-tour .cassette__price-txt{color:#C00}
.rec-tour .cassette__pricenum{display:inline-block;letter-spacing:0;font-size:22px;font-family:"Noto Sans JP",sans-serif;font-weight:700}
.rec-tour .cassette__price-date{margin-left:4px;font-size:12px}
.rec-tour .cassette__emphasis{margin:8px 8px 0;text-align:center;font-size:12px}
.rec-tour .cassette__emphasis span{display:inline-block;padding:4px 8px 2px;font-weight:700;background-color:#ffff99}
.rec-tour .cassette__conditions{margin:8px 8px 0;line-height:1.3;text-align:center;color:#656972;font-size:11px}
.rec-tour .cassette__conditions::before{content:"※";margin-right:2px}
.rec-tour .cassette__icolist{display:flex;flex-wrap:wrap;gap:4px;margin:8px 8px 0;padding:0;list-style:none}
.rec-tour .cassette__icolistitem{padding:4px 8px;font-size:12px;font-weight:500;line-height:1.3;border-radius:50vw;background:#f3fafd}
.rec-tour .cassette__icolistitem:empty{display:none}
.rec-tour .cassette__txt{margin:8px 8px 0;line-height:1.5;font-size:13px}
.rec-tour .cassette__detail{margin:16px 8px 0;padding:8px 0 0;border-top:solid 1px #E4E5E7;list-style:none}
.rec-tour .cassette__detailitem{position:relative;padding-left:calc(1em + 12px);line-height:1.3;font-size:12px}
.rec-tour .cassette__detailitem:not(:first-child){margin-top:8px}
.rec-tour .cassette__detailitem-ico{position:absolute;left:0;top:-1px;font-size:18px}
.rec-tour .cassette__img{position:relative;order:-2;margin:0;overflow:hidden;padding-top:calc(2.5 / 4 * 100%);height:0}
.rec-tour .cassette__img img{position:absolute;left:50%;top:50%;object-fit:cover;object-position:50% 50%;width:100%;height:100%;transform:translate(-50%,-50%);transition:transform .4s ease-out}
.rec-tour .cassette__img .caption{position:absolute;right:0;bottom:0;padding:2px 4px;color:#fff;font-size:10px;line-height:1.3;background:rgba(0,0,0,.4)}
.rec-tour .cassette__img .caption:empty{display:none}

/* アイコンフォント（Material Icons Round） */
.rec-tour .m-ico{font-style:normal;vertical-align:middle;font-weight:400}
.rec-tour .m-ico::before{font-family:'Material Icons Round';content:attr(data-icon);font-size:100%;line-height:1}

@media screen and (min-width: 768px){
	.rec-tour a.cassette__link:hover{opacity:.6}
	.rec-tour a.cassette__link:hover .cassette__img img{transform:translate(-50%,-50%) scale(1.1)}
}