@charset "utf-8";

/*
 * SAFE CLEANUP 0803_02
 * 完全に同一なCSSブロックだけを後勝ちで1件へ統合。
 * TOPにないホテル詳細用セレクタは削除していません。
 */

/* ==============================
   layout / utility
============================== */
.contentsInr .contentsUnit{ padding: 0 10px; }

.content_full{
  width: 100vw;
  box-sizing: border-box;
  margin-left: calc(-50vw + 50%);
}
.bgWT01{
  background: #fff;
  padding: 35px 15px !important;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.bgWT02{ background: #fff; }

.bgWT02{
  padding: 35px 15px !important;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/*ただ背景を白くする用*/
.bgWT05{
  background: #fff;
  padding: 10px;
}

/* ==============================
   部屋・planごとの色分け
============================== */


/* .mgl25_pc { margin-left: 25px !important; } */

@media (min-width: 740px) {
  .contentsInr .contentsUnit{
    width: 1000px;
    padding: 0;
    margin: 0 auto;
  }

  .bgWT .clm_1_3col.colWrap .col{ width: 290px; }
  .bgWT .clm_1_3col.colWrap .col:nth-child(3n + 1){ margin-left: 16px; }
}


/* ==============================
   seat map scroll
============================== */
@media (min-width: 740px) {
  .ac_conf .contInr .seatmap{ padding: unset; }
  .ac_conf .contInr .seatmap_scloll p{ width: auto; }
}

@media (max-width: 739px) {
  .ac_conf .contInr .acodBlock .icon li{ display: inline-block; }
  .ac_conf .contInr .acodBlock .icon li + li{ padding-left: 5px; }


  .ac_conf .contInr .seatmap{ padding: 10px; }

  .ac_conf .contInr .seatmap_scloll{
    width: 100%;
    overflow-x: auto;
  }

  .ac_conf .contInr .seatmap_scloll p{ width: 900px; }
  .ac_conf .contInr .seatmap_scloll::-webkit-scrollbar{ height: 15px; }
  .ac_conf .contInr .seatmap_scloll::-webkit-scrollbar-track{ background: #ccc; }
  .ac_conf .contInr .seatmap_scloll::-webkit-scrollbar-thumb{
    background: #c5c9cc;
    border-radius: 10px;
  }
}

/*上部STEP1~3 Style*/
.--stepTtl h3.ttlLv2{
	margin-bottom: 0;
	margin-top: -10px;
	padding: 0;
	border: none;
}
.--stepTtl span.stepLabel{
	padding-left: 10px;
	margin-right: 15px;
}
.--stepTtl .stepLabel::after{
	border-style: none;
}
.--stepTtl .ttlLv2 span.heading{
	font-weight: normal;
}
@media (max-width: 740px) {
	.--stepTtl span.stepLabel{
		position: absolute;
	}
	.--stepTtl .ttlLv2 span.heading{
		margin-left: 80px;
	}
	.--stepTtl h3.ttlLv2{
		margin-top: -5px;
	}
}

/*上部STEP4 Style*/
.--step4Acod .acodBlock{
	margin-top: 10px;
}
.accordion > .--step4Acod > .acodBlock > h3.heading{
	background-color: transparent;
}
.--step4Acod span.inr.tglSld_iconRD.close.JS_tglSldP.JS_accordionAria{
	font-size: 20px;
	padding: 0;
	font-weight: normal;
}
.--step4Acod span.inr.tglSld_iconRD.JS_tglSldP.JS_accordionAria.open{
	font-size: 20px;
	padding: 0;
	font-weight: normal;
}
@media (max-width: 740px) {
	.--step4Acod span.inr.tglSld_iconRD.close.JS_tglSldP.JS_accordionAria{
		font-size: 18px;
		padding: 0;
	}
	.--step4Acod span.inr.tglSld_iconRD.JS_tglSldP.JS_accordionAria.open{
		font-size: 18px;
		padding: 0;
	}
}
.--step4Acod span.stepLabel{
	padding-left: 10px;
	margin-right: 20px;
}
.--step4Acod .stepLabel::after{
	border-style: none;
}

/*STEP4 SP（横スクロール）/PCの間隔　調整*/
@media (max-width: 739px) {
	.SP-width .--grid.--scroll-x-forSP > div > div{
		width: calc(90vw - 35px) !important;
	}
	.SP-width .--grid.--gap-30.--gtc-2col-forPC.--scroll-x-forSP .cmp-image__image{
		width: 93%;
	}
}
.--step4Acod .--grid{
	gap: 20px;
}

/*プラスプラン　クラスTTL色分け*/
.txt_bc_PE{
	background-color: #006634;
	width: fit-content;
	padding: 3px;
	color: #fff;
}
.txt_bc_BC{
	background-color: #00346a;
	width: fit-content;
	padding: 3px;
	color: #fff;
}

/*モーダル内カレンダー Style*/
img.mfp-img{
    width: 450px;
}
/*モーダル内カレンダー Style*/

/*カレンダーモーダルのサイズ調整*/
@media (min-width: 740px){
	.alC .calender-Btn .btn.iconModal{
    padding: 20px 30px 20px 20px;
    font-size: 1.6rem;
	}
}

/* MV h1テキスト */
.--heroBnr-h1-hidden .heroimgWrap .mainHeading .mainTtl{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==============================
   grid
============================== */
.--grid{ display: grid; }
.--grid::before,
.--grid::after{ display: none; }
.--grid.--gtc-2col-forPC{ grid-template-columns: repeat(2, 1fr); }
.--grid.--gap-30{ gap: 30px; }

.--grid > .responsivegrid{
  /* width: 100% !important;
  min-width: 1px !important; */
  padding: 10px;
  border: 1px solid #ccc;
}

.--grid .slick-box .slidControl{
  bottom: 10px;
  padding: 10px 15px !important;
}

.--grid .slick-dots li{ margin: 0 5px; }

@media (max-width: 739px) {
  .--grid.--scroll-x-forSP{
    display: flex;
    gap: 20px;
    overflow-x: auto;
  }

  .--grid.--scroll-x-forSP > div > div,
.SP-width .--grid.--scroll-x-forSP > div > div,
.SP-width.--grid.--scroll-x-forSP > div > div{
    width: calc(100vw - 40px) !important;
  }

}


/* ==============================
   page title / text
============================== */
.ctm_pageTtl,
.ctm_text,
.ctm_text02{
  font-family: Yu Gothic, Meiryo, Hiragino Sans, Noto Sans JP, sans-serif;
}

.ctm_pageTtl{
  padding: 10px;
  color: #392f3a;
}

.custom_button::after{ background: #caaa49; }

.custom_button_01::after{ background: #609cff; }

.custom_button_02::after{ background: #f79156; }

.custom_button_03::after{ background: #efcf02; }

.custom_button_04::after{ background: #609cff; }

/*
 * 【0807修正】ここには壊れたCSSブロックが残っていました。
 * コメント内に「{」が入っていたため、セレクタが閉じられず
 * 直後の .ctm_text{ color:#392f3a } まで巻き込んで無効化されていました。
 * 未使用の記述だったため、ブロックごと削除しています。
 */

.ctm_text{ color: #392f3a; }

.ctm_text02{ color: #a6766b; }

/* --------------------------------------------------------------
   見出しの背景画像（ホテルを選ぶ／ご利用便／4ステップ など）

   【0807修正】背景の共通指定（no-repeat・中央・サイズ）が
   リファクタ時に消えており、画像がタイル状に繰り返されて
   右端が途切れて見えていました。以下で共通指定を復活させます。

   画像は「両端に花・中央はベタ色 #a0d8ef」の帯です（PC 950×109）。
   background-size: 100% auto で横幅いっぱいに表示すると、
   両端の花が必ず入り、足りない上下は background-color で埋まります。
   -------------------------------------------------------------- */
.ctm_pageTtl[class*="bgImg"]{
  background-color: #a0d8ef;      /* 帯画像の地色。画像の届かない部分を埋める */
  background-repeat: no-repeat;
  background-position: center;
  /* 【0812修正】100% auto（横幅いっぱい・縦は比率維持）だと、見出しが画像より
     背が高いときに上下へ花の無い帯が残っていました。
     cover なら縦横の比率を保ったまま敷き詰め、はみ出す分だけ左右を切るので、
     上下いっぱいまで花柄が入り、花の形も崩れません。 */
  background-size: cover;

  /* 【0807-2修正】上の角丸と影が抜けていて、上部の角が四角くなっていました。
     本番と同じ指定に戻します。ホテル見出し(bgImg04)は別途10px全周指定が
     効くため、ここの指定には影響されません。 */
  border-radius: 10px 10px 0 0;
  box-shadow: 0 0 4px rgb(0 0 0 / 18%);
}

.ctm_pageTtl.bgImg01{
  background-image: url(/content/dam/sites/wwwjalcojp/jp/ja/intltour/hwi/package-tour/viv-shimo/img_sites/img_bg01.png);
}

@media (min-width: 740px) {
  .ctm_pageTtl .ttlLv1 .heading{ font-size: 3rem; }
}

@media (max-width: 739px) {
  /* SPは専用画像（710×118）に差し替え。サイズ指定はPCと共通です。 */
  .ctm_pageTtl.bgImg01{
    background-image: url(/content/dam/sites/wwwjalcojp/jp/ja/intltour/hwi/package-tour/viv-shimo/img_sites/img_bg01_sp.png);
  }

  /* 【0807-3修正】SPで見出しの上下が開きすぎていたので詰めます。
     AEM既定の見出し余白が上下で揃っていないため、いったん0にしてから
     このブロックの padding だけで上下の余白を決めています。
     余白を変えたいときは下の padding の 1つ目の値（14px）を調整してください。
     ホテル大見出し(bgImg04)は専用の指定があるため対象外にしています。 */
  .ctm_pageTtl[class*="bgImg"]:not(.bgImg04){
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
  }

  .ctm_pageTtl[class*="bgImg"]:not(.bgImg04) > [class^="ttlLv"]{
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .ctm_pageTtl[class*="bgImg"]:not(.bgImg04) .heading{
    margin: 0;
    padding: 0;
  }
}

.ctm_contentsFull_img.bgi01{
  background: url(/content/dam/sites/wwwjalcojp/jp/ja/intltour/hwi/package-tour/viv-shimo/img_sites/img_top-bg01.png);
}

.ctm_contentsFull_img.bgi02{
  background: url(/content/dam/sites/wwwjalcojp/jp/ja/intltour/hwi/package-tour/viv-shimo/img_sites/img_top-bg02.png);
}

.hotel-card{
    position: relative;
}

.hotel-card::before{
    content:"朝食特典";
    position:absolute;
    right:370px;
    bottom:0;
    width:120px;
    height:33px;
    line-height:33px;
    background:#f5a623;
    color:#fff;
    text-align:center;
    font-weight:bold;
}

/* ==============================
   list / image / frame
============================== */

.img_Size .cmp-image__image,
.container-div img{
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}

.txt-Frame{
  position: relative;
  padding: 2px;
  border: 2px solid #a6766b;
}

.txt-Frame.--side{
  border-right-width: 30px;
  border-left-width: 30px;
}

  .img_Size .cmp-image__image{ width: 100%; }

.custom_button::after{ background: #caaa49; max-width: 70px; }

.custom_button_01::after{ background: #609cff; max-width: 70px; }

.custom_button_02::after{ background: #f79156; max-width: 70px; }

.custom_button_03::after{ background: #efcf02; max-width: 70px; }

.custom_button_04::after{ background: #609cff; max-width: 70px; }


/* image grade badge */
.image-container{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main-image{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[class*="new-icon-css-text_"]{
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  color: #333;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  border-radius: 50%;
}

[class*="new-icon-css-text_"]::before{
  content: "グレード";
  padding-top: 20px;
  color: #333;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

[class*="new-icon-css-text_"]::after{
  position: absolute;
  top: 10px;
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

/* custom button grade */
[class*="custom_button"]{
  position: relative;
  display: inline-block;
}

[class*="custom_button"]::after{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin: 5px;
  padding: 4px 6px;
  color: #000;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
  text-align: left;
  border-radius: 2px;
}

.custom_button::after{ content: "S"; }
.custom_button_01::after{ content: "L"; }
.custom_button_02::after{ content: "A"; }
.custom_button_03::after{ content: "B"; }

@media (max-width: 739px) {
  [class*="custom_button"]::after{
    top: 15px;
    left: 35px;
    font-size: 14px;
  }
}

.my-link-div{ cursor: pointer; }
.my-link-div:hover{ opacity: .8; }


.card-image{
  display: block;
  width: 100%;
  height: auto;
}

.card-text-primary{
  font-size: 1em;
  font-weight: bold;
}


@media (max-width: 480px) {
  .card-text-primary{ font-size: .9em; }
}

/* ==============================
   POINT 2-column card
============================== */
.point-grid,
.point-grid *{ box-sizing: border-box; }

.point-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 2.4vw, 20px);
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
}

.jhw-point-card{
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5dcd7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.jhw-point-img{
  position: relative;
  height: 100%;
  overflow: hidden;
}

.jhw-point-img img,
.jhw-point-img .cmp-image__image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jhw-point-badge{
  position: absolute;
  top: 0;
  left: -5px;
  z-index: 2;
  width: 77px;
  height: 73px;
  padding: 3px 0 0 9px;
  color: #9d4c4b;
  font-family: Georgia, "Times New Roman", serif;
  background: linear-gradient(134deg, #f8d7d4 0 52%, transparent 53%);
}

.jhw-point-badge span,
.jhw-point-badge b{
  display: block;
  font-weight: 700;
  line-height: 1;
}

.jhw-point-badge span{
  font-size: 13px;
  letter-spacing: .04em;
}

.jhw-point-badge b{
  margin-top: 4px;
  font-size: 34px;
}

.jhw-point-label{
  position: absolute;
  top: 10px;
  right: 11px;
  z-index: 2;
  min-width: 82px;
  height: 34px;
  padding: 7px 14px 0;
  color: #607d8b;
  background: rgba(214, 244, 249, .94);
  border-radius: 7px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.jhw-point-label::before{
  content: "";
  position: absolute;
  top: 0;
  left: -18px;
  width: 18px;
  background: linear-gradient(135deg, transparent 0 50%, rgba(214, 244, 249, .94) 51%);
}

.jhw-point-body{
  min-height: 86px;
  padding: 10px;
  background: #fff9f9;
  text-align: center;
}

.jhw-point-lead{
  margin-bottom: 8px;
  color: #4f4f4f;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.jhw-point-text{
  color: #bd5552;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 739px) {

  .jhw-point-img{ height: 100%; }
  .jhw-point-text{ font-size: 15px; }
}

/* room color */
.hotelplan_01{ background-color: #fff; }


/* =====================================
   ホテル特典部分
===================================== */
.information-box,
.information-box *{
  box-sizing: border-box;
}

.information-box{
    position: relative;
    width: 100%;
    max-width: 472px;
    min-height: 180px;
    max-height: 250px;
    padding: 12px 20px 10px;
    background: #fff7e4;
    border: 1px solid #efbd69;
    box-shadow: inset 3px 0 6px rgba(234, 161, 55, 0.25), inset -3px 0 6px rgba(234, 161, 55, 0.25), 0 2px 5px rgba(157, 101, 20, 0.18);
}

.information-box::before,
.information-box::after{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  content: "";
  background: rgba(235, 168, 64, 0.35);
}

.information-box::before{
  left: 8px;
}

.information-box::after{
  right: 8px;
}


/* 上部の横線 */

.information-box__line{
  height: 1px;
  margin: 0 0 4px;
  background: #eadbb7;
}


/* リスト */

.information-list{
  margin: 0;
  padding: 0;
  list-style: none;
}
/* テキスト */

.information-list__content{
  min-width: 0;
}

.information-list__title{
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #654321;
}

.information-list__text{
  margin: 0;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}


/* スマートフォンで横幅いっぱいにする場合 */

@media (max-width: 480px) {
  .information-box{
    max-width: none;
  }
}


/* ==========================================
  0727追加
   ホテルボタンの3つ目の要素
========================================== */
.badge{
  position: absolute;
  bottom: 0;
}

/* ==================================================
   ホテル特典：文章量に追従する背景・装飾
   overflow:hiddenでAEM Grid内のfloatを包含する
================================================== */

.information-box{
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden;
}

/* 左右の装飾線をボックスの実際の高さへ追従させる */
.information-box::before,
.information-box::after{
  top: 0;
  bottom: 0;
  height: auto;
  pointer-events: none;
}

/* 長文やAEM内部ラッパーが横方向へ押し出すのを防ぐ */
.information-box .information-list__content,
.information-box .information-list__text,
.information-box > .text{
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ==================================================
   2. TOP下部：2カラム
   2枚を包むAEM Gridの大枠へ custom_point_2col を追加
================================================== */

.custom_point_2col{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
  width: 100%;
  max-width: 950px;
  margin-right: auto !important;
  margin-left: auto !important;
  box-sizing: border-box;
}

.custom_point_2col::before,
.custom_point_2col::after{
  content: none !important;
  display: none !important;
}

.custom_point_2col > [class*="aem-GridColumn"]{
  float: none !important;
  grid-column: auto !important;
  width: auto !important;
  min-width: 0;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.custom_point_2col > [class*="aem-GridColumn"] > .aem-Grid,
.custom_point_2col .image,
.custom_point_2col .cmp-image,
.custom_point_2col .cmp-image__link{
  height: 100%;
}

.custom_point_2col .cmp-image__image,
.custom_point_2col img{
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

@media (max-width: 739px) {

  .custom_point_2col{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 10px;
  }
}

/* =========================================================
   3. POINT 05・06だけ横型カードに変更
   grid-itemはHTML上で下2枚だけに付いている
   ========================================================= */

.point-grid .jhw-point-card.grid-item,
.point-grid .jhw-point-card.grid-item *{
  box-sizing: border-box;
}

.point-grid .jhw-point-card.grid-item{
  position: relative !important;
  display: grid !important;
  grid-template-columns: 56% 44%;
  width: 100% !important;
  min-height: 160px;
  margin: 0 !important;
  overflow: hidden !important;
  background: #fffafa !important;
  border: 1px solid #e3d9d4 !important;
  border-radius: 1px !important;
  box-shadow:
    0 5px 14px rgba(72, 61, 57, .09),
    inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

.point-grid .jhw-point-card.grid-item > .responsivegrid{
  float: none !important;
  width: auto !important;
  height: 100%;
  min-width: 0;
  margin: 0 !important;
}

.point-grid .jhw-point-card.grid-item .jhw-point-img{
  position: static !important;
  height: 100% !important;
  min-height: 160px;
  overflow: visible !important;
}

.point-grid .jhw-point-card.grid-item .jhw-point-img > .img,
.point-grid .jhw-point-card.grid-item .jhw-point-img .card-image,
.point-grid .jhw-point-card.grid-item .jhw-point-img .imgParts,
.point-grid .jhw-point-card.grid-item .jhw-point-img .cmp-image,
.point-grid .jhw-point-card.grid-item .jhw-point-img .cmp-image__image{
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.point-grid .jhw-point-card.grid-item .cmp-image__image{
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* POINT 05・06の番号を画像左上へ */
.point-grid .jhw-point-card.grid-item .jhw-point-badge{
  position: absolute !important;
  z-index: 4;
  top: 0 !important;
  left: 0 !important;
  width: 82px !important;
  height: 82px !important;
  padding: 7px 0 0 9px !important;
  color: #894745 !important;
  background: linear-gradient(135deg, rgba(252, 211, 207, .96) 0 51%, transparent 52%) !important;
  filter: drop-shadow(2px 2px 2px rgba(91, 53, 51, .10));
  pointer-events: none;
}

.point-grid .jhw-point-card.grid-item .jhw-point-badge p{
  margin: 0 !important;
  color: inherit !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: left !important;
}

.point-grid .jhw-point-card.grid-item .jhw-point-badge p + p{
  margin-top: 4px !important;
}

.point-grid .jhw-point-card.grid-item .jhw-point-badge em{
  color: inherit !important;
  font-size: 31px !important;
  font-style: normal !important;
  line-height: 1 !important;
}

/* 買い物／食事ラベルを右パネル上部へ */
.point-grid .jhw-point-card.grid-item .jhw-point-label{
  position: absolute !important;
  z-index: 5;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  display: grid !important;
  place-items: center;
  min-width: 88px !important;
  height: 34px !important;
  padding: 0 14px !important;
  color: #466a78 !important;
  background: linear-gradient(135deg, #dff7fb, #bfeaf3) !important;
  border: 1px solid rgba(112, 186, 204, .35) !important;
  border-radius: 5px !important;
  box-shadow: 0 3px 8px rgba(54, 113, 128, .10) !important;
}

/* .point-grid .jhw-point-card.grid-item .jhw-point-label::before {
  content: "" !important;
  position: absolute;
  top: -1px !important;
  left: -14px !important;
  width: 15px !important;
  height: 34px !important;
  background: linear-gradient(135deg, transparent 0 49%, #dff7fb 50%) !important;
} */

.point-grid .jhw-point-card.grid-item .jhw-point-label p{
  margin: 0 !important;
  color: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.point-grid .jhw-point-card.grid-item .jhw-point-body{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100%;
  min-height: 160px !important;
  padding: 48px 12px 14px !important;
  background:
    radial-gradient(circle at 100% 0, rgba(237, 218, 214, .22), transparent 42%),
    #fffafa !important;
  text-align: center;
}

.point-grid .jhw-point-card.grid-item .jhw-point-lead{
  width: 100% !important;
  margin: 0 0 5px !important;
  color: #4b4545 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

.point-grid .jhw-point-card.grid-item .jhw-point-text{
  width: 100% !important;
  margin: 0 !important;
  color: #a84f4c !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.point-grid .jhw-point-card.grid-item .jhw-point-lead p,
.point-grid .jhw-point-card.grid-item .jhw-point-text p{
  margin: 0 !important;
}

/* =========================================================
   SP
   ========================================================= */

@media screen and (max-width: 739px) {

  .point-grid .jhw-point-card.grid-item{
    grid-template-columns: 55% 45%;
    min-height: 142px;
  }

  .point-grid .jhw-point-card.grid-item .jhw-point-img,
.point-grid .jhw-point-card.grid-item .jhw-point-body{
    min-height: 142px !important;
  }

  .point-grid .jhw-point-card.grid-item .jhw-point-badge{
    width: 70px !important;
    height: 70px !important;
    padding-top: 6px !important;
  }

  .point-grid .jhw-point-card.grid-item .jhw-point-badge p{
    font-size: 11px !important;
  }

  .point-grid .jhw-point-card.grid-item .jhw-point-badge em{
    font-size: 27px !important;
  }

  .point-grid .jhw-point-card.grid-item .jhw-point-label{
    top: 8px !important;
    right: 8px !important;
    min-width: 75px !important;
    height: 30px !important;
    padding: 0 10px !important;
  }

  /* .point-grid .jhw-point-card.grid-item .jhw-point-label::before {
    height: 30px !important;
  } */

  .point-grid .jhw-point-card.grid-item .jhw-point-label p{
    font-size: 13px !important;
  }

  .point-grid .jhw-point-card.grid-item .jhw-point-body{
    padding: 43px 8px 10px !important;
  }

  .point-grid .jhw-point-card.grid-item .jhw-point-lead{
    font-size: 12px !important;
  }

  .point-grid .jhw-point-card.grid-item .jhw-point-text{
    font-size: 14px !important;
  }
}

/* =========================================================
   TOP 2. POINT05・06だけを正しい横型カードへ戻す

   grid-itemはPOINT05・06にしか付いていません。
   カード直下にある2つのresponsivegridを画像列／本文列に固定します。
   ========================================================= */

.point-grid .jhw-point-card.grid-item{
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 54%) minmax(0, 46%) !important;
  grid-template-rows: minmax(164px, auto) !important;
  width: 100% !important;
  min-height: 164px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.point-grid .jhw-point-card.grid-item > .responsivegrid{
  float: none !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.point-grid .jhw-point-card.grid-item > .responsivegrid:first-child{
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.point-grid .jhw-point-card.grid-item > .responsivegrid:nth-child(2){
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.point-grid .jhw-point-card.grid-item
> .responsivegrid:first-child
> .jhw-point-img{
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 164px !important;
  margin: 0 !important;
}

.point-grid .jhw-point-card.grid-item .jhw-point-img > .img,
.point-grid .jhw-point-card.grid-item .jhw-point-img .card-image,
.point-grid .jhw-point-card.grid-item .jhw-point-img .imgParts,
.point-grid .jhw-point-card.grid-item .jhw-point-img .cmp-image,
.point-grid .jhw-point-card.grid-item .jhw-point-img .cmp-image__image{
  float: none !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.point-grid .jhw-point-card.grid-item .jhw-point-img .cmp-image__image{
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

.point-grid .jhw-point-card.grid-item
> .responsivegrid:nth-child(2)
> .jhw-point-body{
  width: 100% !important;
  height: 100% !important;
  min-height: 164px !important;
  margin: 0 !important;
  padding: 48px 12px 14px !important;
}

/* =========================================================
   SP
   ========================================================= */

@media screen and (max-width: 739px) {

  .point-grid .jhw-point-card.grid-item{
    grid-template-columns: minmax(0, 50%) minmax(0, 50%) !important;
    grid-template-rows: minmax(142px, auto) !important;
    min-height: 142px !important;
  }

  .point-grid .jhw-point-card.grid-item
  > .responsivegrid:first-child
  > .jhw-point-img,
.point-grid .jhw-point-card.grid-item
  > .responsivegrid:nth-child(2)
  > .jhw-point-body{
    min-height: 142px !important;
  }

  .point-grid .jhw-point-card.grid-item
  > .responsivegrid:nth-child(2)
  > .jhw-point-body{
    padding: 42px 8px 10px !important;
  }
}

/* ---------------------------------------------------------
   3 / 8. POINT 01〜06：右上ラベルの寸法・文字・影を統一
   --------------------------------------------------------- */
.point-grid .jhw-point-label,
.point-grid .jhw-point-card.grid-item .jhw-point-label{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  min-width: 88px !important;
  height: 34px !important;
  padding: 0 14px !important;
  color: #466a78 !important;
  background: linear-gradient(135deg, #dff7fb, #bfeaf3) !important;
  border: 1px solid rgb(112 186 204 / .38) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 10px rgb(54 113 128 / .18) !important;
  filter: none !important;
}

.point-grid .jhw-point-label::before,
.point-grid .jhw-point-card.grid-item .jhw-point-label::before{
  content: none !important;
  display: none !important;
}

.point-grid .jhw-point-label p,
.point-grid .jhw-point-card.grid-item .jhw-point-label p{
  margin: 0 !important;
  color: inherit !important;
  font: 700 15px/1 "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
}

/* ---------------------------------------------------------------------
   POINT01のラベルだけが表示されない件（0807対応）

   原因はCSSではなく、AEM側にラベル部品（.jhw-point-label）が
   置かれていないことです。他のカードには 機内／送迎／観光／買い物／食事 が
   ありますが、POINT01にだけ部品がありません。

   本来はAEMでラベル部品を追加するのが正しい直し方です。
   それまでの暫定として、ラベル部品が無いカードにだけCSSで表示します。
   AEMで部品を追加すれば :not(:has(...)) が外れ、この指定は自動で消えます。

   文言を変えるときは下の --point-fallback-label を書き換えてください。
   --------------------------------------------------------------------- */
.point-grid .jhw-point-card:not(:has(.jhw-point-label)) {
  --point-fallback-label: "空港";
}

.point-grid .jhw-point-card:not(:has(.jhw-point-label)) .jhw-point-img::after {
  content: var(--point-fallback-label);
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-width: 88px;
  height: 34px;
  padding: 0 14px;
  color: #466a78;
  font: 700 15px/1 "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: linear-gradient(135deg, #dff7fb, #bfeaf3);
  border: 1px solid rgb(112 186 204 / 38%);
  border-radius: 6px;
  box-shadow: 0 4px 10px rgb(54 113 128 / 18%);
  pointer-events: none;
}

@media (max-width: 739px) {
  .point-grid .jhw-point-card:not(:has(.jhw-point-label)) .jhw-point-img::after {
    top: 8px;
    right: 8px;
    min-width: 75px;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 5px;
    box-shadow: 0 3px 8px rgb(54 113 128 / 17%);
  }
}

@media (max-width: 739px) {
  .point-grid .jhw-point-badge,
.point-grid .jhw-point-card.grid-item .jhw-point-badge{
    top: 0 !important;
    left: 0 !important;
    width: 70px !important;
    height: 70px !important;
    padding: 6px 0 0 7px !important;
  }

  .point-grid .jhw-point-badge :is(span, p),
.point-grid .jhw-point-card.grid-item .jhw-point-badge :is(span, p){
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .point-grid .jhw-point-badge :is(b, em),
.point-grid .jhw-point-card.grid-item .jhw-point-badge :is(b, em){
    margin-top: 4px !important;
    font-size: 14px !important;
    font-style: normal !important;
    line-height: 1 !important;
  }

  .point-grid .jhw-point-label,
.point-grid .jhw-point-card.grid-item .jhw-point-label{
    top: 8px !important;
    right: 8px !important;
    min-width: 75px !important;
    height: 30px !important;
    padding: 0 10px !important;
    border-radius: 5px !important;
    box-shadow: 0 3px 8px rgb(54 113 128 / .17) !important;
  }

  .point-grid .jhw-point-label p,
.point-grid .jhw-point-card.grid-item .jhw-point-label p{
    font-size: 13px !important;
  }
}

@media (min-width: 740px){
 .mgl25_pc{margin-left: 25px !important;}
}


/* ========================================================================
   AEM HOTEL MODULE 2026-08-06

   この章だけで、次のホテル関連デザインを管理します。
   1. 客室見出し（青／赤／ラベンダー）
   2. 背景画像入りホテル見出し
   3. ホテル選択ボタンと特典ラベル
   4. TOPホテルカードとラウンジ装飾

   色を変更するときは、最初の変数だけを変更してください。
   ======================================================================== */

:root {
  --hotel-text: #344257;
  --hotel-line-blue: #89bfd2;
  --hotel-line-pink: #d9a4a6;
  --hotel-line-lavender: #a99bd2;

  --hotel-label-season: #f28a4e;
  --hotel-label-breakfast: #df1737;
  --hotel-label-free: #5b94ed;
  --hotel-label-lounge: #c66cba;

  /*
   * 見出し用の花柄バナーPNG（AEM DAM登録済み）。
   *
   * 【0807修正】ここが img_top-bg02.png になっていました。
   * それはページ全体用の 1920×924 の大きな背景画像で、見出しに
   * cover で敷くと中央のベタ色部分だけが拡大表示され、花が消えて
   * ベージュ一色に見えていました（大見出し・ホテル見出しの背景消失）。
   *
   * 正しくは見出し帯用の 950×120 バナー img_bg03.png です。
   * 「左右の端に花・中央はベタ色 #a0d8ef」という作りになっています。
   */
  --hotel-floral-image: url("/content/dam/sites/wwwjalcojp/jp/ja/intltour/hwi/package-tour/viv-shimo/img_sites/img_bg03.png");
  --hotel-floral-image-sp: url("/content/dam/sites/wwwjalcojp/jp/ja/intltour/hwi/package-tour/viv-shimo/img_sites/img_bg02_sp.png");

  /* 花柄バナーの地色。画像が届かない上下をこの色で埋めて継ぎ目を消します。 */
  --hotel-floral-base: #a0d8ef;

}

/* ========================================================================
   1. 客室見出し＋本文枠
   ======================================================================== */

div.ctm_pageTtl03,
div.ctm_pageTtl04,
div.ctm_pageTtl05,
div.aem-Grid.bgWT06,
div.aem-Grid.bgWT07 {
  box-sizing: border-box;
  width: 100%;
}

div.ctm_pageTtl03,
div.ctm_pageTtl04,
div.ctm_pageTtl05 {
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--hotel-text);
  border-radius: 10px 10px 0 0;
}

div.ctm_pageTtl03 {
  background: linear-gradient(180deg, #dff3f8, #effafd);
  border: 1px solid var(--hotel-line-blue);
  border-bottom: 0;
  box-shadow: inset 0 -3px var(--hotel-line-blue);
}

div.ctm_pageTtl04 {
  background: linear-gradient(180deg, #fbe5e1, #fff2e9);
  border: 1px solid var(--hotel-line-pink);
  border-bottom: 0;
  box-shadow: inset 0 -3px #f5c5b8;
}

/* 「ホテルラウンジでゆったり過ごす」などの大見出し
   【0807修正】背景を cover で敷いていたため、画像中央のベタ色だけが
   引き伸ばされ、両端の花が画面外に切れていました（SPで顕著）。
   横幅いっぱい・縦は比率維持に変更し、余った上下は地色で埋めます。 */
div.ctm_pageTtl05 {
  /* 【0807-4修正】ラウンジ関連の見出しなので薄紫にそろえます。
     花柄はそのまま残したいので、うすい紫を「重ねる」のではなく
     background-blend-mode: luminosity で「明暗は画像のまま・色だけ差し替え」
     しています。うすい色を重ねる方法だと花柄が消えてしまうためです。

     色を変えるときは --heading-color だけを変更してください。
     縦幅は下の .ttlLv1 の padding で決まります。 */
  --heading-color: #c9c0ea;

  background-color: var(--heading-color);
  background-image: var(--hotel-floral-image);
  background-repeat: no-repeat;
  background-position: center;
  /* 【0807-11】100% 100% だと横に広い見出しで花が縦につぶれていました。
     cover なら縦横の比率を保ったまま敷き詰め、はみ出す分だけ上下を切ります。
     花の形が崩れません。 */
  background-size: cover;
  background-blend-mode: luminosity;
  border: 1px solid var(--hotel-line-lavender);
  border-bottom: 0;
  box-shadow: inset 0 -3px var(--hotel-line-lavender);
}


div.ctm_pageTtl03 > .ttlLv2,
div.ctm_pageTtl04 > .ttlLv2,
div.ctm_pageTtl05 > .ttlLv1 {
  position: relative;
  margin: 0;
  padding: 19px 24px 21px;
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* 【0807-4修正】大見出し（ホテルラウンジでゆったり過ごす など）の縦幅。
   上下の 32px を増やすと見出しが高く、減らすと低くなります。
   ※上の共通指定より後に置くこと。前に置くと打ち消されます。 */
div.ctm_pageTtl05 > .ttlLv1 {
  /* 【0807-11】背景の花を自然に見せるため、縦幅を少し大きくしています。 */
  padding: 44px 24px;
}

div.ctm_pageTtl03 > .ttlLv2::before,
div.ctm_pageTtl03 > .ttlLv2::after,
div.ctm_pageTtl04 > .ttlLv2::before,
div.ctm_pageTtl04 > .ttlLv2::after,
div.ctm_pageTtl05 > .ttlLv1::before,
div.ctm_pageTtl05 > .ttlLv1::after,
div.ctm_pageTtl03 .heading::before,
div.ctm_pageTtl03 .heading::after,
div.ctm_pageTtl04 .heading::before,
div.ctm_pageTtl04 .heading::after,
div.ctm_pageTtl05 .heading::before,
div.ctm_pageTtl05 .heading::after {
  content: none !important;
  display: none !important;
}

div.ctm_pageTtl03 .heading,
div.ctm_pageTtl04 .heading,
div.ctm_pageTtl05 .heading {
  margin: 0;
  padding: 0;
  color: var(--hotel-text);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.035em;
  text-align: center;
  background: transparent;
  border: 0;
}

div.ctm_pageTtl03 .heading,
div.ctm_pageTtl04 .heading {
  font-size: 2.2rem;
}

div.ctm_pageTtl05 .heading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 2.8rem;
}

div.ctm_pageTtl04 .heading strong,
div.ctm_pageTtl05 .heading strong {
  color: #c70018;
}

div.aem-Grid.bgWT06,
div.aem-Grid.bgWT07 {
  display: flow-root;
  margin-top: 0;
  padding: 30px 15px 36px;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

div.aem-Grid.bgWT06 {
  background: linear-gradient(180deg, #fbfeff, #f5fbfd);
  border: 1px solid var(--hotel-line-blue);
  border-top: 0;
  box-shadow: inset 0 0 0 5px rgb(184 228 245 / 34%), 0 10px 22px rgb(56 104 118 / 10%);
}

div.aem-Grid.bgWT07 {
  background: linear-gradient(180deg, #fffdfc, #fff7f5);
  border: 1px solid var(--hotel-line-pink);
  border-top: 0;
  box-shadow: inset 0 0 0 5px rgb(255 233 214 / 55%), 0 10px 22px rgb(123 74 66 / 9%);
}

/* ========================================================================
   1-2. 客室見出しの特典ラベル（0807-8 追加）

   ホテル名の見出し（bgImg04）からラベルを外し、その配下の客室見出しへ移しました。

   種別はAEMの既存クラスで判別しています。
     ・通常の客室見出し   … div.ctm_pageTtl03（水色）
     ・年末年始の客室見出し … div.ctm_pageTtl04（ピンク）

   ページの出し分けは「そのページにしか無いホテルID」で判定します。
     ・ページ1（nrt）      … #Moana がある
     ・ページ2（index02）  … #Hyatt がある

   ラベルは右端で2個まで連結して並びます。
   文言や幅を変えるときは、下の「ページ別の設定」の --room-label-○-width だけを直してください。
   見出し本文の右余白は幅から自動計算されるので、触る必要はありません。
   ======================================================================== */

div.ctm_pageTtl03,
div.ctm_pageTtl04 {
  /* 【0807-9】ラベルは角丸のピル型で、6pxのすき間をあけて並べます */
  --room-label-gap: 6px;

  --room-label-1-text: "";
  --room-label-1-display: none;
  --room-label-1-width: 0px;
  --room-label-1-color: transparent;

  --room-label-2-text: "";
  --room-label-2-display: none;
  --room-label-2-width: 0px;
  --room-label-2-color: transparent;

  /* 2個目が無いときは、すき間も0にして1個目を右端へ寄せます */
  --room-label-2-slot: 0px;

  position: relative;
}

/* 【0807-13】ラベルの置き場所をPC・SPとも「見出し本文の下（右寄せ）」に統一しました。
   以前はPCだけ本文の右横に置いていましたが、部屋名が長いと本文の幅が
   ラベルのぶんだけ削られて折り返しが増えていたためです。
   下に置くぶん、見出しの下に余白（padding-bottom）を確保しています。 */
div.ctm_pageTtl03::before,
div.ctm_pageTtl03::after,
div.ctm_pageTtl04::before,
div.ctm_pageTtl04::after {
  position: absolute;
  top: auto;
  bottom: 10px;          /* 見出しの下端からの距離 */
  z-index: 3;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  /* 【0807-10】さらに1.2倍（16px → 19px）。高齢のお客さま向けに視認性優先。 */
  height: 30px;
  margin: 0;
  padding: 0 11px;
  overflow: hidden;
  color: #fff;
  font: 700 16px/1 "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;   /* 角丸のピル型 */
  box-shadow: none;
  text-shadow: none;
  transform: none;
  pointer-events: none;
}

/* 左側のラベル（2個組のときの1個目／1個だけのときもこちら） */
div.ctm_pageTtl03::before,
div.ctm_pageTtl04::before {
  content: var(--room-label-1-text);
  right: calc(14px + var(--room-label-2-slot));
  display: var(--room-label-1-display);
  width: var(--room-label-1-width);
  background: var(--room-label-1-color);
}

/* 右端のラベル（2個組のときだけ使います） */
div.ctm_pageTtl03::after,
div.ctm_pageTtl04::after {
  content: var(--room-label-2-text);
  right: 14px;
  display: var(--room-label-2-display);
  width: var(--room-label-2-width);
  background: var(--room-label-2-color);
}

/* ラベルを置く場所を見出しの下に確保します（ラベル高さ38px＋下10px＋すき間）。
   本文の下余白は詰めて、部屋名とラベルが離れて見えないようにしています。
   ラベルを大きくするときは、この padding-bottom も一緒に増やしてください。 */
div.ctm_pageTtl03,
div.ctm_pageTtl04 {
  padding-bottom: 52px;
}

div.ctm_pageTtl03 > .ttlLv2,
div.ctm_pageTtl04 > .ttlLv2 {
  padding-bottom: 6px;
}

/* SPは置き方（本文の下・右寄せ）はPCと同じで、大きさと余白だけ詰めます。 */
@media (max-width: 739px) {
  div.ctm_pageTtl03,
  div.ctm_pageTtl04 {
    /* ラベル高さ32px＋下6px＋すき間 */
    padding-bottom: 44px;
  }

  /* 本文の下余白も詰めて、部屋名とラベルを近づけます */
  div.ctm_pageTtl03 > .ttlLv2,
  div.ctm_pageTtl04 > .ttlLv2 {
    padding-bottom: 4px;
  }

  div.ctm_pageTtl03::before,
  div.ctm_pageTtl03::after,
  div.ctm_pageTtl04::before,
  div.ctm_pageTtl04::after {
    bottom: 6px;
    height: 32px;
    padding: 0 9px;
    font-size: 16px;   /* SPも1.2倍 */
  }

  div.ctm_pageTtl03::before,
  div.ctm_pageTtl04::before {
    right: calc(8px + var(--room-label-2-slot));
  }

  div.ctm_pageTtl03::after,
  div.ctm_pageTtl04::after {
    right: 8px;
  }
}

/* ---------- ページ別の設定 ---------- */

/* ページ1（nrt）通常の客室：朝食特典 ＋ 7・8日間は1泊お得 */
html:has(#Moana) div.ctm_pageTtl03 {
  --room-label-1-text: "朝食特典";
  --room-label-1-display: flex;
  --room-label-1-width: 98px;
  --room-label-1-color: var(--hotel-label-breakfast);

  --room-label-2-text: "7・8日間は1泊お得";
  --room-label-2-display: flex;
  --room-label-2-width: 184px;
  --room-label-2-color: var(--hotel-label-free);
  /* 2個目があるので、幅＋すき間を1個目の位置計算に渡します */
  --room-label-2-slot: calc(var(--room-label-2-width) + var(--room-label-gap));
}

/* 年末年始の客室：年末年始（ページ1・ページ2の両方） */
div.ctm_pageTtl04 {
  --room-label-1-text: "年末年始";
  --room-label-1-display: flex;
  --room-label-1-width: 98px;
  --room-label-1-color: var(--hotel-label-season);

  /* ラベル1個のときは、2個目を必ず消してください。
     消し忘れると、他のルールで入った2個目がそのまま残ります。 */
  --room-label-2-text: "";
  --room-label-2-display: none;
  --room-label-2-width: 0px;
  --room-label-2-slot: 0px;
}

/* ページ2（index02）ハイアット／アロヒラニ／アウトリガー配下：ラウンジ（1個だけ）
   :not(:has(#Moana)) は、確認用ページのように両方のホテルIDが載っている場合に
   ページ1の設定が勝つようにするための保険です。実ページでは片方しかありません。 */
/* ページ2（index02）の年末年始の客室：年末年始 ＋ ラウンジ
   ハイアットの「エヴァタワー/35階以上オーシャンフロント」など、
   年末年始の部屋にもラウンジが付くため2個表示します。
   ページ1（nrt）の年末年始の部屋は「年末年始」だけなので、
   このルールはページ2に限定しています。 */
html:has(#Hyatt):not(:has(#Moana)) div.ctm_pageTtl04 {
  --room-label-1-text: "年末年始";
  --room-label-1-display: flex;
  --room-label-1-width: 102px;
  --room-label-1-color: var(--hotel-label-season);

  --room-label-2-text: "ラウンジ";
  --room-label-2-display: flex;
  --room-label-2-width: 102px;
  --room-label-2-color: var(--hotel-label-lounge);
  --room-label-2-slot: calc(var(--room-label-2-width) + var(--room-label-gap));
}

html:has(#Hyatt):not(:has(#Moana)) div.ctm_pageTtl03 {
  --room-label-1-text: "ラウンジ";
  --room-label-1-display: flex;
  --room-label-1-width: 98px;
  --room-label-1-color: var(--hotel-label-lounge);

  --room-label-2-text: "";
  --room-label-2-display: none;
  --room-label-2-width: 0px;
  --room-label-2-slot: 0px;
}

/*
 * シェラトン・プリンセス・カイウラニ配下だけ「7・8日間は1泊お得」です。
 *
 * ★AEM作業★
 *   シェラトン・プリンセスのセクション、または配下の客室見出しに
 *   クラス「sp-free」を1つ追加してください。
 *   セクションに付けても、客室見出しに直接付けても、どちらでも効きます。
 *   ブロックを増減・並び替えしても崩れません。
 */
/*
 * 【0807-11】ここは必ず :not(:has(#Moana)) を付けてください。
 * 上のページ2ルールが「html + :has(#Hyatt) + :not(:has(#Moana))」でID2個分の
 * 優先度になっており、これを付けないと sp-free が負けて効きません。
 * （AEMでクラスを付けたのに変わらない、という状態になります）
 */
html:has(#Hyatt):not(:has(#Moana)) .sp-free div.ctm_pageTtl03,
html:has(#Hyatt):not(:has(#Moana)) div.ctm_pageTtl03.sp-free {
  --room-label-1-text: "7・8日間は1泊お得";
  --room-label-1-display: flex;
  --room-label-1-width: 184px;
  --room-label-1-color: var(--hotel-label-free);

  /* ラベル1個なので2個目は必ず消します */
  --room-label-2-text: "";
  --room-label-2-display: none;
  --room-label-2-width: 0px;
  --room-label-2-slot: 0px;
}

/* 【0807-10】SPは文字が17px（PCは19px）なので、幅も専用に詰めます。
   320px幅でも収まる値です。
   ※必ず上のページ別定義より「後ろ」に置いてください。
     前に置くと同じ優先度でPCの幅に負けて効きません。 */
@media (max-width: 739px) {
  html:has(#Moana) div.ctm_pageTtl03 {
    --room-label-1-width: 86px;
    --room-label-2-width: 162px;
  }

  div.ctm_pageTtl04,
  html:has(#Hyatt):not(:has(#Moana)) div.ctm_pageTtl03 {
    --room-label-1-width: 86px;
  }

  /* ページ2の年末年始の部屋は2個（年末年始＋ラウンジ） */
  html:has(#Hyatt):not(:has(#Moana)) div.ctm_pageTtl04 {
    --room-label-1-width: 86px;
    --room-label-2-width: 86px;
  }

  html:has(#Hyatt):not(:has(#Moana)) .sp-free div.ctm_pageTtl03,
  html:has(#Hyatt):not(:has(#Moana)) div.ctm_pageTtl03.sp-free {
    --room-label-1-width: 162px;
  }
}

/* ========================================================================
   ラウンジのホテルは、見出しも本文枠も紫にそろえます（0807-9）
   シェラトン・プリンセスは対象外なので、sp-free が付いたセクションは青へ戻します。
   ★sp-free は「セクション（入れ物）」に付けてください★
     客室見出しだけに付けると、本文枠(bgWT06)が紫のまま残ります。
   ======================================================================== */
html:has(#Hyatt):not(:has(#Moana)) div.ctm_pageTtl03 {
  background: linear-gradient(180deg, #e9e4f8, #f4f1fc);
  border-color: var(--hotel-line-lavender);
  box-shadow: inset 0 -3px var(--hotel-line-lavender);
}

html:has(#Hyatt):not(:has(#Moana)) div.aem-Grid.bgWT06 {
  background: linear-gradient(180deg, #fdfcff, #f7f4fd);
  border-color: var(--hotel-line-lavender);
  box-shadow: inset 0 0 0 5px rgb(226 216 250 / 34%), 0 10px 22px rgb(88 65 118 / 10%);
}

/* シェラトン・プリンセスのセクションだけ、元の水色へ戻す */
html:has(#Hyatt):not(:has(#Moana)) .sp-free div.ctm_pageTtl03,
html:has(#Hyatt):not(:has(#Moana)) div.ctm_pageTtl03.sp-free {
  background: linear-gradient(180deg, #dff3f8, #effafd);
  border-color: var(--hotel-line-blue);
  box-shadow: inset 0 -3px var(--hotel-line-blue);
}

html:has(#Hyatt):not(:has(#Moana)) .sp-free div.aem-Grid.bgWT06 {
  background: linear-gradient(180deg, #fbfeff, #f5fbfd);
  border-color: var(--hotel-line-blue);
  box-shadow: inset 0 0 0 5px rgb(184 228 245 / 34%), 0 10px 22px rgb(56 104 118 / 10%);
}

/* ========================================================================
   2. 背景画像入りホテル見出し

   特典ラベルは、左から label-1 / label-2 / label-3 の順です。
   各ホテルの内容は、この章の「ホテル別設定」で変更できます。
   ======================================================================== */

:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04 {
  --heading-color-1: #d9eff7;
  --heading-color-2: #c8e9f4;

  --label-1-text: "";
  --label-1-display: none;
  --label-1-width: 0px;
  --label-1-color: transparent;
  --label-1-radius: 9px 0 0 9px;

  --label-2-text: "";
  --label-2-display: none;
  --label-2-width: 0px;
  --label-2-color: transparent;
  --label-2-radius: 0;

  --label-3-text: "";
  --label-3-display: none;
  --label-3-width: 0px;
  --label-3-color: transparent;
  --label-3-radius: 0 9px 9px 0;

  /* 見出し全面にかける色味。薄めるほど白っぽくなります。 */
  --heading-tint: rgb(255 255 255 / 34%);

  position: relative;
  box-sizing: border-box;
  min-height: 142px;
  margin: 0;
  padding: 0 0 46px;
  overflow: hidden;
  color: var(--hotel-text);

  /*
   * 【0807修正】背景の敷き方を変更しました。
   * 旧: cover → 画像中央のベタ色だけが拡大され、両端の花が消えていました。
   * 新: 花柄は「横幅いっぱい・縦は比率維持」で必ず両端の花が入ります。
   *     画像が届かない上下は、画像の地色と同じ --hotel-floral-base で
   *     埋めるため継ぎ目が出ません。
   *     色味は全面にかかる --heading-tint の1枚で調整します。
   */
  background-color: var(--hotel-floral-base);
  background-image:
    linear-gradient(var(--heading-tint), var(--heading-tint)),
    var(--hotel-floral-image);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  /* 【0807-2修正】花柄を 100% auto にしていたため、見出しが画像より背が高いと
     上下に花の無い帯ができ、上部が見切れて見えていました。
     縦もいっぱいに伸ばして、上端まで花柄が入るようにします。 */
  background-size: 100% 100%, 100% 100%;

  border: 1px solid color-mix(in srgb, var(--heading-color-2) 70%, #5d96aa);
  border-radius: 10px;
  box-shadow: inset 0 -3px color-mix(in srgb, var(--heading-color-2) 75%, #6caec4), 0 8px 18px rgb(56 104 118 / 9%);
}

/* ラウンジ3ホテルは紫。【0807-9】大見出し（ホテルラウンジでゆったり過ごす）と
   同じ出し方（luminosity＝明暗は画像のまま・色だけ差し替え）にそろえたので、
   花柄がはっきり残ったまま紫になります。 */
:is(#Hyatt, #Alohilani, #Outrigger).ctm_pageTtl.bgImg04 {
  --heading-color-1: #ece9f8;
  --heading-color-2: #ddd7f1;

  background-color: var(--heading-color, #c9c0ea);
  background-image: var(--hotel-floral-image);
  background-size: 100% 100%;
  background-blend-mode: luminosity;
  border-color: var(--hotel-line-lavender);
  box-shadow: inset 0 -3px var(--hotel-line-lavender), 0 8px 18px rgb(88 65 118 / 9%);
}

/*
 * SPは横幅が狭いので、SP用の花柄バナー（710×118）へ差し替えます。
 * 画像を変えるだけで、敷き方（横幅いっぱい・比率維持）は共通です。
 */
@media (max-width: 739px) {
  div.ctm_pageTtl05,
  :is(
    #Moana,
    #Sheraton,
    #Royal-hawaiian,
    #Hyatt,
    #Alohilani,
    #Outrigger,
    #Sheraton-princess
  ).ctm_pageTtl.bgImg04 {
    --hotel-floral-image: var(--hotel-floral-image-sp);

    /* 【0807-9修正】ラベルを客室見出しへ移して見出しが低くなったため、
       比率維持（100% auto）だと上下に花の無い帯が残るようになりました。
       上下いっぱいまで花柄を敷きます。見出しが低くなったので間延びもしません。
       ※3行になる見出しは縦に伸びる度合いが大きくなります。 */
    background-size: 100% 100%, 100% 100%;
  }
}

:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04 > .ttlLv1,
:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04 > .ttlLv2 {
  position: static;
  box-sizing: border-box;
  margin: 0;

  /* 【0807-2修正】上下 22px の固定余白だったため、ロイヤル ハワイアンのように
     2行になる見出しで上下が大きく開いていました。
     余白を詰めたうえで「1行のときの高さ」を min-height で確保し、
     中で上下中央そろえにします。1行はゆったり、2行は詰まって見えます。
     見出しの高さを変えたいときは min-height を調整してください。 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 12px 24px;

  background: transparent;
  border: 0;
  box-shadow: none;
}

:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04 .heading {
  margin: 0;
  padding: 0;
  color: var(--hotel-text);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.035em;
  text-align: center;
  text-shadow: 0 1px rgb(255 255 255 / 70%);
  background: transparent;
  border: 0;
}

:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04 > :is(.ttlLv1, .ttlLv2)::before,
:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04 .heading::before,
:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04 .heading::after {
  content: none !important;
  display: none !important;
}

/* 特典ラベル共通 */
:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04::before,
:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04::after,
:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04 > :is(.ttlLv1, .ttlLv2)::after {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 8px;
  left: auto;
  z-index: 4;
  transform: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  /* 【0807-7修正】視認性のため 13px → 15px、高さ 38px → 40px。
     幅は下のホテル別ブロックの --label-N-width で調整します。 */
  height: 44px;
  margin: 0;
  padding: 0 10px;
  overflow: hidden;
  color: #fff;
  font: 700 17px/1 "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  border: 1px solid rgb(255 255 255 / 82%);
  box-shadow: none;
  text-shadow: none;
}

/* 左端のラベル */
:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04::before {
  content: var(--label-1-text);
  right: calc(14px + var(--label-3-width) + var(--label-2-width));
  display: var(--label-1-display);
  width: var(--label-1-width);
  background: var(--label-1-color);
  border-radius: var(--label-1-radius);
}

/* 中央、または2個組の右端ラベル */
:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04::after {
  content: var(--label-2-text);
  right: calc(14px + var(--label-3-width));
  display: var(--label-2-display);
  width: var(--label-2-width);
  background: var(--label-2-color);
  border-radius: var(--label-2-radius);
}

/* 3個組の右端ラベル */
:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04 > :is(.ttlLv1, .ttlLv2)::after {
  content: var(--label-3-text);
  right: 14px;
  display: var(--label-3-display);
  width: var(--label-3-width);
  background: var(--label-3-color);
  border-radius: var(--label-3-radius);
}

/* ---------- ホテル別設定 ---------- */

/* モアナ／シェラトン：年末年始＋朝食特典＋1泊お得 */
:is(#Moana, #Sheraton).ctm_pageTtl.bgImg04 {
  --label-1-text: "年末年始";
  --label-1-display: flex;
  --label-1-width: 112px;
  --label-1-color: var(--hotel-label-season);

  --label-2-text: "朝食特典";
  --label-2-display: flex;
  --label-2-width: 92px;
  --label-2-color: var(--hotel-label-breakfast);

  --label-3-text: "7・8日間は1泊お得";
  --label-3-display: flex;
  --label-3-width: 180px;
  --label-3-color: var(--hotel-label-free);
}

/* ロイヤル：朝食特典＋1泊お得 */
#Royal-hawaiian.ctm_pageTtl.bgImg04 {
  --label-1-text: "朝食特典";
  --label-1-display: flex;
  --label-1-width: 116px;
  --label-1-color: var(--hotel-label-breakfast);

  --label-2-text: "7・8日間は1泊お得";
  --label-2-display: flex;
  --label-2-width: 205px;
  --label-2-color: var(--hotel-label-free);
  --label-2-radius: 0 9px 9px 0;
}

/* ハイアット：年末年始＋ラウンジ */
#Hyatt.ctm_pageTtl.bgImg04 {
  --label-1-text: "年末年始";
  --label-1-display: flex;
  --label-1-width: 112px;
  --label-1-color: var(--hotel-label-season);

  --label-2-text: "ラウンジ";
  --label-2-display: flex;
  --label-2-width: 116px;
  --label-2-color: var(--hotel-label-lounge);
  --label-2-radius: 0 9px 9px 0;
}

/* アロヒラニ／アウトリガー：ラウンジのみ */
:is(#Alohilani, #Outrigger).ctm_pageTtl.bgImg04 {
  --label-1-text: "ラウンジ";
  --label-1-display: flex;
  --label-1-width: 116px;
  --label-1-color: var(--hotel-label-lounge);
  --label-1-radius: 9px;
}

/* プリンセス・カイウラニ：1泊お得のみ（添付CSSの設定を維持） */
#Sheraton-princess.ctm_pageTtl.bgImg04 {
  --label-1-text: "7・8日間は1泊お得";
  --label-1-display: flex;
  --label-1-width: 180px;
  --label-1-color: var(--hotel-label-free);
  --label-1-radius: 9px;
}

/* ------------------------------------------------------------------------
   【0807-8】ホテル見出しからラベルを外し、余白を詰めます。
   ラベルは配下の客室見出し（上の「1-2」の章）へ移しました。

   上のホテル別 --label-○ の設定は、元に戻せるよう残してあります。
   ホテル見出しにラベルを戻したくなったら、この1ブロックを消すだけで復活します。
   ------------------------------------------------------------------------ */
:is(
  #Moana,
  #Sheraton,
  #Royal-hawaiian,
  #Hyatt,
  #Alohilani,
  #Outrigger,
  #Sheraton-princess
).ctm_pageTtl.bgImg04 {
  --label-1-display: none;
  --label-2-display: none;
  --label-3-display: none;

  /* ラベル用に空けていた下余白と最低高さを詰める */
  min-height: 0;
  padding-bottom: 0;
}

/* ========================================================================
   3. ホテル選択ボタン

   矢印はa.btn::afterだけで表示します。
   AEM既定の矢印も同じ要素へ集約し、二重表示を防ぎます。
   ======================================================================== */

.custom_hotelbutton {
  --button-label-season: var(--hotel-label-season);
  --button-label-breakfast: var(--hotel-label-breakfast);
  --button-label-free: var(--hotel-label-free);
  --button-label-lounge: var(--hotel-label-lounge);
  position: relative;
  display: flow-root;
}

.custom_hotelbutton .colWrap.clm_1_3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.custom_hotelbutton .colWrap.clm_1_3col::before,
.custom_hotelbutton .colWrap.clm_1_3col::after {
  content: none;
  display: none;
}

.custom_hotelbutton .colWrap.clm_1_3col > .col {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
}

/* カードの外枠はホテル名の長さに左右されず、列幅いっぱいに揃えます。 */
.custom_hotelbutton .col > .aem-Grid,
.custom_hotelbutton .linkbtn.btnBox,
.custom_hotelbutton [class*="custom_button"] {
  width: 100%;
  min-width: 0;
  height: 100%;
}

.custom_hotelbutton [class*="custom_button"] {
  position: relative;
  transition: transform 180ms ease, filter 180ms ease;
}

.custom_hotelbutton [class*="custom_button"]:hover,
.custom_hotelbutton [class*="custom_button"]:focus-within {
  z-index: 2;
  transform: translateY(-3px);
  filter: drop-shadow(0 7px 7px rgb(72 57 36 / 16%));
}

.custom_hotelbutton .linkbtn a.btn {
  /* ------------------------------------------------------------------
     特典ラベルの並べ方（0807修正）

     旧: 各ラベルに translateX(-101px) のような固定値を直接指定していたため、
         ラベルの文言や幅を変えると隙間が空いたりカードからはみ出しました。
         （モアナ／シェラトンで右にはみ出していた原因です）

     新: 幅だけを指定すれば、合計幅とそれぞれの位置は下の計算式が
         自動で出します。カード中央に、等間隔で並びます。
         幅を変えたいときは --○○-width だけを直してください。
     ------------------------------------------------------------------ */
  --label-gap: 6px;                 /* ラベル同士の隙間 */

  --season-text: "";                /* 年末年始 */
  --season-display: none;
  --season-width: 0px;
  --season-x: 0px;                  /* 左端からの位置（ホテル別に指定） */

  --before-text: "";                /* 朝食特典 */
  --before-display: none;
  --before-width: 0px;
  --before-x: 0px;

  --after-text: "";                 /* ラウンジ ／ 7・8日間は1泊お得 */
  --after-display: none;
  --after-width: 0px;
  --after-x: 0px;
  --after-color: transparent;

  --labels-width: 0px;              /* 表示するラベルの合計幅（ホテル別に指定） */
  --labels-start: calc(50% - var(--labels-width) / 2);  /* 中央そろえの左端 */

  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* ホテル名の長さに関係なくカード幅を統一 */
  min-height: 166px;
  /* 【0807-2修正】下の余白が42pxで、ラベル（下から10px・高さ22px）との
     すき間が10pxしかなく、料金の文字とラベルが近すぎました。
     54pxにしてラベルとの間を約22px確保します。 */
  padding: 34px 34px 54px 18px;
  overflow: visible;
  color: #111;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  background-color: #fffdfa;
  /* グレードバッジは下のホテル別ルールで background-image として敷きます。
     カード角からの距離を変えたいときは、この background-position を調整します。 */
  background-image: none;
  background-repeat: no-repeat;
  background-position: 11px 11px;
  border: 1px solid #dfbd7c;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgb(48 39 25 / 12%);
}

.custom_hotelbutton .linkbtn a.btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  box-sizing: border-box;
  display: block;
  width: 9px;
  height: 9px;
  background: transparent;
  border: 0;
  border-right: 2px solid #e60012;
  border-bottom: 2px solid #e60012;
  transform: translateY(-50%) rotate(-45deg);
}

.custom_hotelbutton .linkbtn a.btn.iconDown::after {
  transform: translateY(-65%) rotate(45deg);
}

.custom_hotelbutton .linkbtn a.btn:focus-visible {
  outline: 3px solid rgb(32 108 180 / 38%);
  outline-offset: 2px;
}

.custom_hotelbutton .linkbtn .btnInr {
  position: static;
  display: block;
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.custom_hotelbutton .linkbtn .btnInr > br:first-child {
  display: none;
}

/* 特典ラベル共通 */
.custom_hotelbutton .linkbtn a.btn::before,
.custom_hotelbutton .linkbtn a.btn > .btnInr::before,
.custom_hotelbutton .linkbtn a.btn > .btnInr::after {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 10px;
  z-index: 4;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  /* ▼▼ ホテル選択ボタンのラベル（年末年始／朝食特典／7・8日間は1泊お得）▼▼
     文字サイズはこのすぐ下の  font: 700 14px/1 ...  の「14px」です。

     ※カード幅315pxに3個（68+68+136＋すき間12＝284px）でギリギリ収まる値です。
       大きくするときは、下のホテル別ブロックの --season-width /
       --before-width / --after-width も必ず一緒に広げてください。
       幅が足りないと overflow:hidden で文字が切れます。 */
  height: 27px;
  margin: 0;
  padding: 0 5px;
  overflow: hidden;              /* 万一文字が幅を超えても外へはみ出さない */
  color: #fff;
  font: 700 14px/1 "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  text-shadow: none;
  transform: none;
  pointer-events: none;
}

.custom_hotelbutton .linkbtn a.btn::before {
  content: var(--season-text);
  left: calc(var(--labels-start) + var(--season-x));
  display: var(--season-display);
  width: var(--season-width);
  background: var(--button-label-season);
}

.custom_hotelbutton .linkbtn a.btn > .btnInr::before {
  content: var(--before-text);
  left: calc(var(--labels-start) + var(--before-x));
  display: var(--before-display);
  width: var(--before-width);
  background: var(--button-label-breakfast);
}

.custom_hotelbutton .linkbtn a.btn > .btnInr::after {
  content: var(--after-text);
  left: calc(var(--labels-start) + var(--after-x));
  display: var(--after-display);
  width: var(--after-width);
  background: var(--after-color);
}

/* ---------- ホテルボタン別の特典 ---------- */

/* 並び順は必ず 年末年始（season）→ 朝食特典（before）→ 右端（after）です。
   使わないラベルは幅0のままにして、位置の計算から外します。         */

/* モアナ／シェラトン：年末年始＋朝食特典＋7・8日間は1泊お得 */
.custom_hotelbutton a.btn:is([href$="#Moana"], [href$="#Sheraton"]) {
  --season-text: "年末年始";
  --season-display: flex;
  --season-width: 68px;

  --before-text: "朝食特典";
  --before-display: flex;
  --before-width: 68px;

  --after-text: "7・8日間は1泊お得";
  --after-display: flex;
  --after-width: 136px;
  --after-color: var(--button-label-free);

  /* 3個ぶん＝3つの幅＋隙間2つ */
  --labels-width: calc(var(--season-width) + var(--before-width) + var(--after-width) + var(--label-gap) * 2);
  --season-x: 0px;
  --before-x: calc(var(--season-width) + var(--label-gap));
  --after-x:  calc(var(--season-width) + var(--before-width) + var(--label-gap) * 2);
}

/* ロイヤル：朝食特典＋7・8日間は1泊お得 */
.custom_hotelbutton a.btn[href$="#Royal-hawaiian"] {
  --before-text: "朝食特典";
  --before-display: flex;
  --before-width: 68px;

  --after-text: "7・8日間は1泊お得";
  --after-display: flex;
  --after-width: 136px;
  --after-color: var(--button-label-free);

  /* 2個ぶん＝2つの幅＋隙間1つ */
  --labels-width: calc(var(--before-width) + var(--after-width) + var(--label-gap));
  --before-x: 0px;
  --after-x:  calc(var(--before-width) + var(--label-gap));
}

/* ハイアット：年末年始＋ラウンジ */
.custom_hotelbutton a.btn[href$="#Hyatt"] {
  --season-text: "年末年始";
  --season-display: flex;
  --season-width: 68px;

  --after-text: "ラウンジ";
  --after-display: flex;
  --after-width: 68px;
  --after-color: var(--button-label-lounge);

  --labels-width: calc(var(--season-width) + var(--after-width) + var(--label-gap));
  --season-x: 0px;
  --after-x:  calc(var(--season-width) + var(--label-gap));
}

/* アロヒラニ／アウトリガー：ラウンジのみ */
.custom_hotelbutton a.btn:is([href$="#Alohilani"], [href$="#Outrigger"]) {
  --after-text: "ラウンジ";
  --after-display: flex;
  --after-width: 68px;
  --after-color: var(--button-label-lounge);

  --labels-width: var(--after-width);
  --after-x: 0px;
}

/* プリンセス・カイウラニ：7・8日間は1泊お得のみ */
.custom_hotelbutton a.btn[href$="#Sheraton-princess"] {
  --after-text: "7・8日間は1泊お得";
  --after-display: flex;
  --after-width: 136px;
  --after-color: var(--button-label-free);

  --labels-width: var(--after-width);
  --after-x: 0px;
}

/* ---------- 左上のグレードラベル ----------
   【0812修正】疑似要素での配置をやめ、カード（a.btn）の背景画像にしました。

   理由: iPhoneでバッジがカードの外（上）へ飛び出す報告があり、
   PC/Chromeでは再現しませんでした。バッジは
   .linkbtn > .custom_button_0N > a.btn の「中間のラッパー」を基準に
   絶対配置していましたが、このラッパーには旧CSSの display:inline-block と
   height:100pct が効いており、環境によって高さ・位置が変わり得ます。

   背景画像は要素の外に描画されないため、どの環境でもカード内に必ず収まります。

   色や文字を変えるときは、下のデータURI内の fill と文字を直してください
   （CSSの font-size / color では変わりません）。
   位置は a.btn 側の background-position で調整します。
   ------------------------------------------------------------------- */

/* 旧・疑似要素のバッジは完全に停止（二重表示を防ぐ） */
.custom_hotelbutton [class*="custom_button"]::before,
.custom_hotelbutton [class*="custom_button"]::after {
  content: none;
  display: none;
}

.custom_hotelbutton .linkbtn a.btn[href$="#Moana"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%3E%3Crect%20x%3D%220%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%225%22%20fill%3D%22%235b94ed%22%2F%3E%3Ctext%20x%3D%2211%22%20y%3D%2215.5%22%20fill%3D%22%23243242%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%2212%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%3EL%3C%2Ftext%3E%3C%2Fsvg%3E");
}

.custom_hotelbutton .linkbtn a.btn:is(
  [href$="#Sheraton"],
  [href$="#Hyatt"],
  [href$="#Alohilani"],
  [href$="#Outrigger"]
) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%3E%3Crect%20x%3D%220%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%225%22%20fill%3D%22%23f28a4e%22%2F%3E%3Ctext%20x%3D%2211%22%20y%3D%2215.5%22%20fill%3D%22%23243242%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%2212%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%3EA%3C%2Ftext%3E%3C%2Fsvg%3E");
}

.custom_hotelbutton .linkbtn a.btn[href$="#Sheraton-princess"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%3E%3Crect%20x%3D%220%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%225%22%20fill%3D%22%23efd500%22%2F%3E%3Ctext%20x%3D%2211%22%20y%3D%2215.5%22%20fill%3D%22%23243242%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%2212%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%3EB%3C%2Ftext%3E%3C%2Fsvg%3E");
}

/* ロイヤルだけ A と L の2連（1枚の画像に両方入れています） */
.custom_hotelbutton .linkbtn a.btn[href$="#Royal-hawaiian"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2222%22%20viewBox%3D%220%200%2048%2022%22%3E%3Crect%20x%3D%220%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%225%22%20fill%3D%22%23f28a4e%22%2F%3E%3Ctext%20x%3D%2211%22%20y%3D%2215.5%22%20fill%3D%22%23243242%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%2212%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%3EA%3C%2Ftext%3E%3Crect%20x%3D%2226%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%225%22%20fill%3D%22%235b94ed%22%2F%3E%3Ctext%20x%3D%2237%22%20y%3D%2215.5%22%20fill%3D%22%23243242%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%2212%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%3EL%3C%2Ftext%3E%3C%2Fsvg%3E");
}

/* ---------- ホテルボタン下のラベル説明 ----------
   色付きラベルと説明文を1つの疑似要素にまとめています。
   行間を変更するときは line-height、左列幅は padding-left を調整します。
   -------------------------------------------------------------------- */
.custom_hotelbutton::after {
  /* 【0807-3修正】補足文が実際の特典内容と合っていなかったため差し替え。
     並び順は下のSVG（朝食特典／7・8日間は1泊お得／ラウンジ／年末年始）と同じです。
     文言を変えるときは、この4行と下のSVG内の文字を必ずセットで直してください。 */
  content:
    "・・・ホテルから朝食のおもてなしあり（1回または泊数分）\A"
    "・・・6・7日間は同額、8日間も1泊分がお安くなっています\A"
    "・・・ラウンジでの軽朝食やドリンクが無料\A"
    "・・・年末年始コースあり";
  box-sizing: border-box;
  display: block;
  clear: both;
  width: min(680px, 100%);
  min-height: 124px;
  margin: 16px 0 0 auto;
  padding: 10px 16px 10px 167px;
  color: #4a4055;
  font: 600 15px/26px "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  white-space: pre;
  background-color: #fefcff;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22132%22%20height%3D%2296%22%20viewBox%3D%220%200%20132%2096%22%3E%3Cstyle%3Etext%7Bfill%3Awhite%3Bfont-family%3AArial%2Csans-serif%3Bfont-size%3A11px%3Bfont-weight%3A700%3Btext-anchor%3Amiddle%3Bdominant-baseline%3Amiddle%7D%3C%2Fstyle%3E%3Crect%20y%3D%221%22%20width%3D%22132%22%20height%3D%2221%22%20rx%3D%2210.5%22%20fill%3D%22%23df1737%22%2F%3E%3Ctext%20x%3D%2266%22%20y%3D%2211.5%22%3E%E6%9C%9D%E9%A3%9F%E7%89%B9%E5%85%B8%3C%2Ftext%3E%3Crect%20y%3D%2225%22%20width%3D%22132%22%20height%3D%2221%22%20rx%3D%2210.5%22%20fill%3D%22%235b94ed%22%2F%3E%3Ctext%20x%3D%2266%22%20y%3D%2235.5%22%3E7%E3%83%BB8%E6%97%A5%E9%96%93%E3%81%AF1%E6%B3%8A%E3%81%8A%E5%BE%97%3C%2Ftext%3E%3Crect%20y%3D%2249%22%20width%3D%22132%22%20height%3D%2221%22%20rx%3D%2210.5%22%20fill%3D%22%23c66cba%22%2F%3E%3Ctext%20x%3D%2266%22%20y%3D%2259.5%22%3E%E3%83%A9%E3%82%A6%E3%83%B3%E3%82%B8%3C%2Ftext%3E%3Crect%20y%3D%2273%22%20width%3D%22132%22%20height%3D%2221%22%20rx%3D%2210.5%22%20fill%3D%22%23f28a4e%22%2F%3E%3Ctext%20x%3D%2266%22%20y%3D%2283.5%22%3E%E5%B9%B4%E6%9C%AB%E5%B9%B4%E5%A7%8B%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  /* 【0807-3修正】見出し行（【ラベルの見方】）を無くしたので、
     色ラベルの開始位置を1行ぶん上へ（33px → 10px）。
     【0807-9】文字を12px→15pxにしたので、行間26pxに合わせて
     SVGも143pxへ拡大しています（24px × 143/132 = 26px）。 */
  background-size: 143px auto;
  background-position: 12px 10px;
  border: 1px solid #d7c8e6;
  border-radius: 10px;
  box-shadow: 0 5px 14px rgb(76 50 90 / 8%);
}
.custom_hotelbutton::before { content: none; display: none; }

/* 【0807-6修正】ラベル説明を、最終行の空いているマス（右2列ぶん）へ移動します。
   最終行はホテルが1つだけで右2マスが空くため、そこに収めます。
   SPは1列で空きが無いので、これまで通りボタンの下に置きます（この指定はPCのみ）。 */
@media (min-width: 740px) {
  .custom_hotelbutton::after {
    position: absolute;
    right: 0;
    bottom: 0;
    /* 3列のうち右2列ぶん＝ 2/3 から、列と列のすき間(12px)の分だけ引く */
    width: calc(66.6667% - 4px);
    margin: 0;
  }
}

/* ========================================================================
   4. TOPホテルカード／ラウンジ装飾
   ======================================================================== */

/* ラウンジ3ホテルの見出し */
div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row) {
  position: relative;
  z-index: 4;
  box-sizing: border-box;

  /* 【0807-5修正】見出しが左に寄る件。
     この要素はAEMのグリッド列（.aem-GridColumn）で float: left が効いており、
     float 中は margin: auto の中央そろえが無視されるため左端に寄っていました。

     ※ float: none で外すのは不可です。前後のAEM列がfloatのままなので、
        この見出しだけがカード列の下へ回り込み、見出しが極端に縦長になります。

     floatは残したまま、左右の余白を同じ数値で明示して中央に見せます。
     幅 = 100% - (左12px + 右12px) なので、下のホテル枠と左右がそろいます。 */
  width: calc(100% - 24px);
  margin: 10px 12px -18px;
  padding: 0;
  /* 【0812-2修正】ラウンジのラベルと同じ紫でベタ塗りにしました。
     色を変えるときは --hotel-label-lounge（:root の変数）を変更すると、
     カードのラウンジラベルとこの見出しが同時に変わります。 */
  color: #fff;
  background: var(--hotel-label-lounge);
  border: 1px solid #b25aa6;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgb(88 65 118 / 18%);
}

div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row)::before,
div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row)::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  background: rgb(255 255 255 / 72%);
  transform: translateY(-50%) rotate(45deg);
}

div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row)::before {
  left: 18px;
}

div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row)::after {
  right: 18px;
}

div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row) > .ttlLv2 {
  margin: 0;
  padding: 14px 48px;
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row) .heading {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 紫地の上なので白抜き。高齢のお客さま向けに 2rem → 2.2rem へ拡大し、
     字間を少し開けて読みやすくしています。 */
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-align: center;
  background: transparent;
  border: 0;
}

div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row) > .ttlLv2::before,
div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row) > .ttlLv2::after,
div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row) .heading::before,
div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row) .heading::after {
  content: none !important;
  display: none !important;
}

/* 外枠は1本＋四隅だけに整理 */
.hotel-lounge-row {
  position: relative;
  box-sizing: border-box;
  margin: 0 12px 34px;
  padding: 42px 28px 27px;
  background: rgb(253 252 255 / 72%);
  border: 1px solid var(--hotel-line-lavender);
  border-radius: 2px;
  box-shadow: 0 6px 16px rgb(88 65 118 / 9%);
}

.hotel-lounge-row::before {
  content: none !important;
  display: none !important;
}

.hotel-lounge-row::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 3;
  background:
    linear-gradient(#8f7fc0, #8f7fc0) left top / 28px 1px no-repeat,
    linear-gradient(#8f7fc0, #8f7fc0) left top / 1px 28px no-repeat,
    linear-gradient(#8f7fc0, #8f7fc0) right top / 28px 1px no-repeat,
    linear-gradient(#8f7fc0, #8f7fc0) right top / 1px 28px no-repeat,
    linear-gradient(#8f7fc0, #8f7fc0) left bottom / 28px 1px no-repeat,
    linear-gradient(#8f7fc0, #8f7fc0) left bottom / 1px 28px no-repeat,
    linear-gradient(#8f7fc0, #8f7fc0) right bottom / 28px 1px no-repeat,
    linear-gradient(#8f7fc0, #8f7fc0) right bottom / 1px 28px no-repeat;
  pointer-events: none;
}

.hotel-lounge-row > .colWrap.clm_1_3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.hotel-lounge-row > .colWrap.clm_1_3col::before,
.hotel-lounge-row > .colWrap.clm_1_3col::after {
  content: none;
  display: none;
}

.hotel-lounge-row > .colWrap.clm_1_3col > .col {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
}

.hotel-lounge-row .image-container > .text.mgtXS,
.hotel-lounge-row .image-container > .textlink {
  box-sizing: border-box;
  min-width: 0;
  padding-right: 10px;
  padding-left: 10px;
  overflow-wrap: anywhere;
}


/* ========================================================================
   TOPページ：ラベルの見方（凡例）

   シェラトン・プリンセスの行は、3マスのうち左1マスしかカードが無く
   右側が空いています。そこへ凡例を入れます。

   行の特定は「Bグレードのカードを含む colWrap」で行っています。
   Bグレードはシェラトン・プリンセスだけなので、並び替えても崩れません。

   文言を変えるときは、下の content の4行とSVG内の文字をセットで直してください
   （ホテル選択ボタン側の凡例も同じ文言です。そちらも合わせてください）。
   ======================================================================== */

.colWrap.clm_1_3col:has(.new-icon-css-text_B) {
  position: relative;
}

.colWrap.clm_1_3col:has(.new-icon-css-text_B)::after {
  content:
    "・・・ホテルから朝食のおもてなしあり（1回または泊数分）\A"
    "・・・6・7日間は同額、8日間も1泊分がお安くなっています\A"
    "・・・ラウンジでの軽朝食やドリンクが無料\A"
    "・・・年末年始コースあり";
  box-sizing: border-box;
  display: block;
  color: #4a4055;
  font: 600 15px/26px "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  white-space: pre;
  background-color: #fefcff;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22132%22%20height%3D%2296%22%20viewBox%3D%220%200%20132%2096%22%3E%3Cstyle%3Etext%7Bfill%3Awhite%3Bfont-family%3AArial%2Csans-serif%3Bfont-size%3A11px%3Bfont-weight%3A700%3Btext-anchor%3Amiddle%3Bdominant-baseline%3Amiddle%7D%3C%2Fstyle%3E%3Crect%20y%3D%221%22%20width%3D%22132%22%20height%3D%2221%22%20rx%3D%2210.5%22%20fill%3D%22%23df1737%22%2F%3E%3Ctext%20x%3D%2266%22%20y%3D%2211.5%22%3E%E6%9C%9D%E9%A3%9F%E7%89%B9%E5%85%B8%3C%2Ftext%3E%3Crect%20y%3D%2225%22%20width%3D%22132%22%20height%3D%2221%22%20rx%3D%2210.5%22%20fill%3D%22%235b94ed%22%2F%3E%3Ctext%20x%3D%2266%22%20y%3D%2235.5%22%3E7%E3%83%BB8%E6%97%A5%E9%96%93%E3%81%AF1%E6%B3%8A%E3%81%8A%E5%BE%97%3C%2Ftext%3E%3Crect%20y%3D%2249%22%20width%3D%22132%22%20height%3D%2221%22%20rx%3D%2210.5%22%20fill%3D%22%23c66cba%22%2F%3E%3Ctext%20x%3D%2266%22%20y%3D%2259.5%22%3E%E3%83%A9%E3%82%A6%E3%83%B3%E3%82%B8%3C%2Ftext%3E%3Crect%20y%3D%2273%22%20width%3D%22132%22%20height%3D%2221%22%20rx%3D%2210.5%22%20fill%3D%22%23f28a4e%22%2F%3E%3Ctext%20x%3D%2266%22%20y%3D%2283.5%22%3E%E5%B9%B4%E6%9C%AB%E5%B9%B4%E5%A7%8B%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 143px auto;
  background-position: 12px 10px;
  border: 1px solid #d7c8e6;
  border-radius: 10px;
  box-shadow: 0 5px 14px rgb(76 50 90 / 8%);
}

@media (min-width: 740px) {
  /* カードは3マスのうち左1マス。凡例は右2マスぶんに収めます。
     px ではなく割合で指定しているので、カード幅が変わってもぶつかりません。 */
  .colWrap.clm_1_3col:has(.new-icon-css-text_B)::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(680px, 66%);
    min-height: 124px;
    padding: 10px 16px 10px 167px;
  }
}

@media (max-width: 739px) {
  /* SPは1列でカードの横に空きが無いため、カードの下へ流します。
     ラベルと説明の2段組み（ホテル選択ボタン側の凡例と同じ作り）。 */
  .colWrap.clm_1_3col:has(.new-icon-css-text_B)::after {
    content:
      "\A・・・朝食のおもてなしあり（1回または泊数分）\A"
      "\A・・・6・7日間は同額、8日間も1泊分お得\A"
      "\A・・・ラウンジの軽朝食・ドリンクが無料\A"
      "\A・・・年末年始コースあり";
    width: 100%;
    min-height: 228px;
    margin-top: 14px;
    padding: 8px;
    font-size: 14px;
    line-height: 26.5px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22212%22%20viewBox%3D%220%200%20160%20212%22%3E%3Cstyle%3Etext%7Bfill%3Awhite%3Bfont-family%3AArial%2Csans-serif%3Bfont-size%3A13px%3Bfont-weight%3A700%3Btext-anchor%3Amiddle%3Bdominant-baseline%3Amiddle%7D%3C%2Fstyle%3E%3Crect%20y%3D%220.25%22%20width%3D%22160%22%20height%3D%2226%22%20rx%3D%2213%22%20fill%3D%22%23df1737%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%2213.75%22%3E%E6%9C%9D%E9%A3%9F%E7%89%B9%E5%85%B8%3C%2Ftext%3E%3Crect%20y%3D%2253.25%22%20width%3D%22160%22%20height%3D%2226%22%20rx%3D%2213%22%20fill%3D%22%235b94ed%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%2266.75%22%3E7%E3%83%BB8%E6%97%A5%E9%96%93%E3%81%AF1%E6%B3%8A%E3%81%8A%E5%BE%97%3C%2Ftext%3E%3Crect%20y%3D%22106.25%22%20width%3D%22160%22%20height%3D%2226%22%20rx%3D%2213%22%20fill%3D%22%23c66cba%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%22119.75%22%3E%E3%83%A9%E3%82%A6%E3%83%B3%E3%82%B8%3C%2Ftext%3E%3Crect%20y%3D%22159.25%22%20width%3D%22160%22%20height%3D%2226%22%20rx%3D%2213%22%20fill%3D%22%23f28a4e%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%22172.75%22%3E%E5%B9%B4%E6%9C%AB%E5%B9%B4%E5%A7%8B%3C%2Ftext%3E%3C%2Fsvg%3E");
    background-size: 160px auto;
    background-position: 8px 8px;
  }
}

/* ---------- TOPカードのグレードメダル ---------- */

.gradeIcon-wrap {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 9;
  width: 70px;
  height: 82px;
  pointer-events: none;
}

.gradeIcon-wrap .ribbon-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.gradeIcon-wrap .ribbon-placeholder::before,
.gradeIcon-wrap .ribbon-placeholder::after {
  content: "";
  position: absolute;
  top: 52px;
  width: 27px;
  height: 36px;
  background: #e60012;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 62%, 0 82%);
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 18%));
}

.gradeIcon-wrap .ribbon-placeholder::before {
  left: 7px;
  transform: rotate(8deg);
}

.gradeIcon-wrap .ribbon-placeholder::after {
  right: 7px;
  transform: rotate(-8deg);
}

.gradeIcon-wrap :is(
  .new-icon-css-text_A,
  .new-icon-css-text_B,
  .new-icon-css-text_L,
  .new-icon-css-text_AL
) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  box-sizing: border-box;
  display: block;
  width: 68px;
  max-width: none;
  height: 68px;
  padding: 0;
  color: #243242;
  font-size: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgb(28 47 70 / 18%);
}

.gradeIcon-wrap .new-icon-css-text_A {
  background: #f28a4e;
}

.gradeIcon-wrap .new-icon-css-text_B {
  background: #efd500;
}

.gradeIcon-wrap .new-icon-css-text_L,
.gradeIcon-wrap .new-icon-css-text_AL {
  background: #609cff;
}

.gradeIcon-wrap :is(
  .new-icon-css-text_A,
  .new-icon-css-text_B,
  .new-icon-css-text_L,
  .new-icon-css-text_AL
)::after {
  position: absolute;
  /* 【0807-3修正】文字が丸の上寄りだったので、丸の中央へ寄せました。
     「グレード」と合わせた2行ぶん（24px＋12px）が丸(68px)の中央に来る位置です。 */
  top: 14px;
  left: 0;
  /* 【0807-6修正】文字が左寄りだった原因。
     疑似要素は既定が inline のままで、position:absolute にしても
     right:0 が効かず「文字の幅だけの箱が左端に置かれる」状態でした。
     display:block と width:100% を明示して初めて text-align:center が効きます。 */
  display: block;
  width: 100%;
  /* 【0807-2修正】旧CSSの margin / padding が残っていて、文字が丸の外へ
     ずれていました。ここで打ち消します。 */
  margin: 0;
  padding: 0;
  color: #243242;
  font: 700 24px/1 Arial, sans-serif;
  text-align: center;
}

.gradeIcon-wrap .new-icon-css-text_A::after {
  content: "A";
}

.gradeIcon-wrap .new-icon-css-text_B::after {
  content: "B";
}

.gradeIcon-wrap .new-icon-css-text_L::after {
  content: "L";
}

.gradeIcon-wrap .new-icon-css-text_AL::after {
  content: "A･L";
  font-size: 22px;
}

.gradeIcon-wrap :is(
  .new-icon-css-text_A,
  .new-icon-css-text_B,
  .new-icon-css-text_L,
  .new-icon-css-text_AL
)::before {
  content: "グレード";
  position: absolute;
  top: 38px;   /* 上のL/Aなどの文字（14px〜38px）のすぐ下 */
  left: 0;
  /* 上のL/A文字と同じ理由で、display:block と width:100% が必要です。 */
  display: block;
  width: 100%;
  /* 【0807-2修正】旧CSSの padding-top: 20px が残っていたため、この文字だけが
     20px下へ押し出され、丸からはみ出して赤いリボンに重なっていました。 */
  margin: 0;
  padding: 0;
  color: #243242;
  font: 600 12px/1 Arial, sans-serif;
  text-align: center;
}

/* 旧プランラベルは、カード下の特典ラベルへ置き換えます。 */
:is(.new-icon-jalpak, .new-icon-lounge) {
  display: none !important;
}

/* ---------- TOPカード下のホテル別特典 ---------- */

:where(
  .image-container:has(.new-icon-jalpak),
  .hotel-lounge-row .image-container:has(.gradeIcon-wrap),
  .image-container:has(.new-icon-css-text_AL),
  .image-container:has(.new-icon-css-text_B)
) {
  /* ------------------------------------------------------------------
     TOPカードの特典ラベル（0807修正）
     ホテル選択ボタンと同じ考え方です。幅だけ指定すれば、
     合計幅と位置は計算式が出します。カード中央に等間隔で並びます。
     ------------------------------------------------------------------ */
  --card-label-gap: 4px;

  --card-label-1: "";
  --card-label-1-display: none;
  --card-label-1-width: 0px;
  --card-label-1-x: 0px;
  --card-label-1-color: transparent;

  --card-label-2: "";
  --card-label-2-display: none;
  --card-label-2-width: 0px;
  --card-label-2-x: 0px;
  --card-label-2-color: transparent;

  --card-label-3: "";
  --card-label-3-display: none;
  --card-label-3-width: 0px;
  --card-label-3-x: 0px;
  --card-label-3-color: transparent;

  --card-labels-width: 0px;
  --card-labels-start: calc(50% - var(--card-labels-width) / 2);

  position: relative;
  box-sizing: border-box;
  /* 【0807-11】ラベルの上をさらに10px広げました（60px→70px）。 */
  padding-bottom: 70px;
}

:is(
  .image-container:has(.new-icon-jalpak),
  .hotel-lounge-row .image-container:has(.gradeIcon-wrap),
  .image-container:has(.new-icon-css-text_AL),
  .image-container:has(.new-icon-css-text_B)
) > .textlink {
  position: static;
  display: block;
  margin-bottom: 38px;
}

:is(
  .image-container:has(.new-icon-jalpak),
  .hotel-lounge-row .image-container:has(.gradeIcon-wrap),
  .image-container:has(.new-icon-css-text_AL),
  .image-container:has(.new-icon-css-text_B)
)::before,
:is(
  .image-container:has(.new-icon-jalpak),
  .hotel-lounge-row .image-container:has(.gradeIcon-wrap),
  .image-container:has(.new-icon-css-text_AL),
  .image-container:has(.new-icon-css-text_B)
)::after,
:is(
  .image-container:has(.new-icon-jalpak),
  .hotel-lounge-row .image-container:has(.gradeIcon-wrap),
  .image-container:has(.new-icon-css-text_AL),
  .image-container:has(.new-icon-css-text_B)
) > .textlink::after {
  position: absolute;
  bottom: 8px;
  z-index: 12;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  /* 【0807-12】本番のカード幅は278pxしかありません（確認ページの324pxではない）。
     3個並ぶモアナ／シェラトンが左右で見切れていたため、
     文字13px・左右padding6px・すき間4px・合計268pxに収めています。
     文字を大きくするときは、必ず278pxに収まるか確認してください。 */
  height: 26px;
  padding: 0 6px;
  overflow: hidden;              /* 万一文字が幅を超えても外へはみ出さない */
  color: #fff;
  font: 700 13px/1 "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  white-space: nowrap;
  border-radius: 999px;
  transform: none;
  pointer-events: none;
}

:is(
  .image-container:has(.new-icon-jalpak),
  .hotel-lounge-row .image-container:has(.gradeIcon-wrap),
  .image-container:has(.new-icon-css-text_AL),
  .image-container:has(.new-icon-css-text_B)
)::before {
  content: var(--card-label-1);
  left: calc(var(--card-labels-start) + var(--card-label-1-x));
  display: var(--card-label-1-display);
  width: var(--card-label-1-width);
  background: var(--card-label-1-color);
}

:is(
  .image-container:has(.new-icon-jalpak),
  .hotel-lounge-row .image-container:has(.gradeIcon-wrap),
  .image-container:has(.new-icon-css-text_AL),
  .image-container:has(.new-icon-css-text_B)
)::after {
  content: var(--card-label-2);
  left: calc(var(--card-labels-start) + var(--card-label-2-x));
  display: var(--card-label-2-display);
  width: var(--card-label-2-width);
  background: var(--card-label-2-color);
}

:is(
  .image-container:has(.new-icon-jalpak),
  .hotel-lounge-row .image-container:has(.gradeIcon-wrap),
  .image-container:has(.new-icon-css-text_AL),
  .image-container:has(.new-icon-css-text_B)
) > .textlink::after {
  content: var(--card-label-3);
  left: calc(var(--card-labels-start) + var(--card-label-3-x));
  display: var(--card-label-3-display);
  width: var(--card-label-3-width);
  background: var(--card-label-3-color);
}

/* 並び順は 1 → 2 → 3 です。使わない番号は幅0のままにしてください。 */

/* モアナ／シェラトン：年末年始＋朝食特典＋7・8日間は1泊お得 */
.image-container:has(.new-icon-jalpak) {
  --card-label-1: "年末年始";
  --card-label-1-display: flex;
  --card-label-1-width: 66px;
  --card-label-1-color: var(--hotel-label-season);

  --card-label-2: "朝食特典";
  --card-label-2-display: flex;
  --card-label-2-width: 66px;
  --card-label-2-color: var(--hotel-label-breakfast);

  --card-label-3: "7・8日間は1泊お得";
  --card-label-3-display: flex;
  --card-label-3-width: 128px;
  --card-label-3-color: var(--hotel-label-free);

  --card-labels-width: calc(var(--card-label-1-width) + var(--card-label-2-width) + var(--card-label-3-width) + var(--card-label-gap) * 2);
  --card-label-1-x: 0px;
  --card-label-2-x: calc(var(--card-label-1-width) + var(--card-label-gap));
  --card-label-3-x: calc(var(--card-label-1-width) + var(--card-label-2-width) + var(--card-label-gap) * 2);
}

/* ハイアット：年末年始＋ラウンジ */
.hotel-lounge-row > .colWrap.clm_1_3col > .col:nth-child(1) .image-container:has(.gradeIcon-wrap) {
  --card-label-1: "年末年始";
  --card-label-1-display: flex;
  --card-label-1-width: 66px;
  --card-label-1-color: var(--hotel-label-season);

  --card-label-2: "ラウンジ";
  --card-label-2-display: flex;
  --card-label-2-width: 66px;
  --card-label-2-color: var(--hotel-label-lounge);

  --card-labels-width: calc(var(--card-label-1-width) + var(--card-label-2-width) + var(--card-label-gap));
  --card-label-1-x: 0px;
  --card-label-2-x: calc(var(--card-label-1-width) + var(--card-label-gap));
}

/* アロヒラニ／アウトリガー：ラウンジのみ */
.hotel-lounge-row > .colWrap.clm_1_3col > .col:nth-child(2) .image-container:has(.gradeIcon-wrap),
.hotel-lounge-row > .colWrap.clm_1_3col > .col:nth-child(3) .image-container:has(.gradeIcon-wrap) {
  --card-label-1: "ラウンジ";
  --card-label-1-display: flex;
  --card-label-1-width: 66px;
  --card-label-1-color: var(--hotel-label-lounge);

  --card-labels-width: var(--card-label-1-width);
  --card-label-1-x: 0px;
}

/* ロイヤル：朝食特典＋7・8日間は1泊お得 */
.image-container:has(.new-icon-css-text_AL) {
  --card-label-1: "朝食特典";
  --card-label-1-display: flex;
  --card-label-1-width: 66px;
  --card-label-1-color: var(--hotel-label-breakfast);

  --card-label-2: "7・8日間は1泊お得";
  --card-label-2-display: flex;
  --card-label-2-width: 128px;
  --card-label-2-color: var(--hotel-label-free);

  --card-labels-width: calc(var(--card-label-1-width) + var(--card-label-2-width) + var(--card-label-gap));
  --card-label-1-x: 0px;
  --card-label-2-x: calc(var(--card-label-1-width) + var(--card-label-gap));
}

/* プリンセス・カイウラニ：7・8日間は1泊お得のみ */
.image-container:has(.new-icon-css-text_B) {
  --card-label-2: "7・8日間は1泊お得";
  --card-label-2-display: flex;
  --card-label-2-width: 128px;
  --card-label-2-color: var(--hotel-label-free);

  --card-labels-width: var(--card-label-2-width);
  --card-label-2-x: 0px;
}

/* ---------- 客室詳細にある横型グレード表示 ---------- */

:is(.btn_colorA, .btn_colorB, .btn_colorL) {
  --grade-letter: "A";
  --grade-color: #f28a4e;
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px 0 38px;
  color: var(--hotel-text);
  background: #f7faff;
  border: 1px solid var(--grade-color);
  border-radius: 6px;
}

.btn_colorB {
  --grade-letter: "B";
  --grade-color: #d7bd00;
}

.btn_colorL {
  --grade-letter: "L";
  --grade-color: #5b94ed;
}

:is(.btn_colorA, .btn_colorB, .btn_colorL)::before {
  content: var(--grade-letter);
  position: absolute;
  inset: 0 auto 0 0;
  display: grid;
  place-items: center;
  width: 27px;
  color: #fff;
  font: 700 12px/1 Arial, sans-serif;
  background: var(--grade-color);
  border-radius: 5px 0 0 5px;
}

:is(.btn_colorA, .btn_colorB, .btn_colorL)::after {
  content: none;
  display: none;
}

:is(.btn_colorA, .btn_colorB, .btn_colorL) p {
  margin: 0;
}

:is(.btn_colorA, .btn_colorB, .btn_colorL) em {
  color: var(--hotel-text);
  font-size: 0;
  font-style: normal;
  font-weight: 700;
}

:is(.btn_colorA, .btn_colorB, .btn_colorL) em::after {
  content: "グレード";
  font-size: 12px;
}

/* AEMではA/Lが別々のtext部品です。グレード部品の親だけ横並びにします。 */
.aem-Grid > .text.aem-GridColumn:has(> .btn_colorA),
.aem-Grid > .text.aem-GridColumn:has(> .btn_colorB),
.aem-Grid > .text.aem-GridColumn:has(> .btn_colorL) {
  display: inline-block;
  float: none;
  width: auto;
  margin: 0 6px 8px 0;
  vertical-align: top;
}

/* ========================================================================
   5. SP調整
   ======================================================================== */

@media (max-width: 739px) {
  div.ctm_pageTtl03 > .ttlLv2,
  div.ctm_pageTtl04 > .ttlLv2,
  div.ctm_pageTtl05 > .ttlLv1 {
    padding: 15px 14px 5px;
  }

  /* 大見出しはSPでもPCと同じ比率でゆったりめにします。 */
  div.ctm_pageTtl05 > .ttlLv1 {
    padding: 24px 14px;
  }

  div.ctm_pageTtl03 .heading,
  div.ctm_pageTtl04 .heading {
    font-size: 1.8rem;
    line-height: 1.5;
  }

  div.ctm_pageTtl05 .heading {
    font-size: 2rem;
    line-height: 1.45;
  }

  div.aem-Grid.bgWT06,
  div.aem-Grid.bgWT07 {
    padding: 20px 16px 26px;
    border-radius: 0 0 8px 8px;
  }

  :is(
    #Moana,
    #Sheraton,
    #Royal-hawaiian,
    #Hyatt,
    #Alohilani,
    #Outrigger,
    #Sheraton-princess
  ).ctm_pageTtl.bgImg04 {
    /* 【0807-5修正】SPで上下が開きすぎていたので詰めました（132px → 96px）。
       【0807-8修正】ラベルを客室見出しへ移したため、さらに余白を詰めています。 */
    min-height: 0;
    padding-bottom: 0;
  }

  :is(
    #Moana,
    #Sheraton,
    #Royal-hawaiian,
    #Hyatt,
    #Alohilani,
    #Outrigger,
    #Sheraton-princess
  ).ctm_pageTtl.bgImg04 > :is(.ttlLv1, .ttlLv2) {
    /* 【0807-5修正】PC用の min-height:96px がSPでも効いており、
       ホテル名の上下に20px以上の空きができていました。
       SPは56pxまで下げて、余白は下の padding で決めるようにします。 */
    min-height: 56px;
    padding: 14px 12px;
  }

  :is(
    #Moana,
    #Sheraton,
    #Royal-hawaiian,
    #Hyatt,
    #Alohilani,
    #Outrigger,
    #Sheraton-princess
  ).ctm_pageTtl.bgImg04 .heading {
    font-size: 1.8rem;
    line-height: 1.4;
  }

  :is(
    #Moana,
    #Sheraton,
    #Royal-hawaiian,
    #Hyatt,
    #Alohilani,
    #Outrigger,
    #Sheraton-princess
  ).ctm_pageTtl.bgImg04::before,
  :is(
    #Moana,
    #Sheraton,
    #Royal-hawaiian,
    #Hyatt,
    #Alohilani,
    #Outrigger,
    #Sheraton-princess
  ).ctm_pageTtl.bgImg04::after,
  :is(
    #Moana,
    #Sheraton,
    #Royal-hawaiian,
    #Hyatt,
    #Alohilani,
    #Outrigger,
    #Sheraton-princess
  ).ctm_pageTtl.bgImg04 > :is(.ttlLv1, .ttlLv2)::after {
    bottom: 4px;
    height: 34px;
    padding: 0 7px;
    font-size: 12px;
  }

  :is(
    #Moana,
    #Sheraton,
    #Royal-hawaiian,
    #Hyatt,
    #Alohilani,
    #Outrigger,
    #Sheraton-princess
  ).ctm_pageTtl.bgImg04::before {
    right: calc(6px + var(--label-3-width) + var(--label-2-width));
  }

  :is(
    #Moana,
    #Sheraton,
    #Royal-hawaiian,
    #Hyatt,
    #Alohilani,
    #Outrigger,
    #Sheraton-princess
  ).ctm_pageTtl.bgImg04::after {
    right: calc(6px + var(--label-3-width));
  }

  :is(
    #Moana,
    #Sheraton,
    #Royal-hawaiian,
    #Hyatt,
    #Alohilani,
    #Outrigger,
    #Sheraton-princess
  ).ctm_pageTtl.bgImg04 > :is(.ttlLv1, .ttlLv2)::after {
    right: 6px;
    left: auto;
  }

  /* SPでは横幅に収まるよう、3個組だけ幅を縮めます。 */
  :is(#Moana, #Sheraton).ctm_pageTtl.bgImg04 {
    --label-1-width: 70px;
    --label-2-width: 70px;
    --label-3-width: 126px;
  }

  #Royal-hawaiian.ctm_pageTtl.bgImg04 {
    --label-1-width: 70px;
    --label-2-width: 126px;
  }

  #Hyatt.ctm_pageTtl.bgImg04 {
    --label-1-width: 70px;
    --label-2-width: 70px;
  }

  .custom_hotelbutton .colWrap.clm_1_3col {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .custom_hotelbutton .linkbtn a.btn {
    min-height: 160px;
    /* PCと同じ考え方で、ラベルとの間を約22px確保します。 */
    padding: 34px 30px 54px 16px;
    font-size: 15px;
    border-radius: 7px;
  }

  /* SPは幅だけ少し詰めます。
     位置はPC側の計算式がこの幅を読み直すので、指定は不要です。
     【0807-10】320px幅が一番きついので、すき間も6px→4pxにしています。 */
  .custom_hotelbutton .linkbtn a.btn {
    --label-gap: 4px;
  }
  .custom_hotelbutton a.btn:is([href$="#Moana"], [href$="#Sheraton"]) {
    --season-width: 68px;
    --before-width: 68px;
    --after-width: 136px;
  }
  .custom_hotelbutton a.btn[href$="#Royal-hawaiian"] {
    --before-width: 68px;
    --after-width: 136px;
  }
  .custom_hotelbutton a.btn[href$="#Hyatt"] {
    --season-width: 68px;
    --after-width: 68px;
  }
  .custom_hotelbutton a.btn:is([href$="#Alohilani"], [href$="#Outrigger"]) {
    --after-width: 68px;
  }
  .custom_hotelbutton a.btn[href$="#Sheraton-princess"] {
    --after-width: 136px;
  }

  /* ======================================================================
     ■ SPの「ラベルの見方」凡例
     ======================================================================
     SPは横に並べると文字を大きくできないため、
     「1行目＝色ラベル／2行目＝説明文」の2段組みにしています。
     content の空行（先頭の \A）が色ラベルの行、その次の行が説明文です。

     ▼ 説明文の文字サイズ  → 下の  font-size: 14px;
     ▼ 色ラベル内の文字サイズ → 下のSVGの中の  font-size%3A13px
        （SVG画像なので、CSSの font-size では変わりません）
     ▼ ラベルと説明の間隔   → 下の  line-height: 26.5px;
        ※SVG側のラベル間隔（53px = 26.5px × 2行）と必ずセットで変更してください。
          片方だけ変えると、ラベルと説明の行がずれます。

     文言はSPだけ短くしています（PCの文言では横幅に収まらないため）。
     変えるときはPC側（.custom_hotelbutton::after の1つ目）とセットで見直してください。
     ====================================================================== */
  .custom_hotelbutton::after {
    content:
      "\A・・・朝食のおもてなしあり（1回または泊数分）\A"
      "\A・・・6・7日間は同額、8日間も1泊分お得\A"
      "\A・・・ラウンジの軽朝食・ドリンクが無料\A"
      "\A・・・年末年始コースあり";
    width: 100%;
    min-height: 228px;
    margin-top: 14px;
    padding: 8px 8px 8px 8px;

    /* ▼ 説明文（・・・から始まる行）の文字サイズはここ */
    font-size: 14px;

    /* ▼ ラベルと説明の間隔はここ（SVGのラベル間隔53pxと対応） */
    line-height: 26.5px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22212%22%20viewBox%3D%220%200%20160%20212%22%3E%3Cstyle%3Etext%7Bfill%3Awhite%3Bfont-family%3AArial%2Csans-serif%3Bfont-size%3A13px%3Bfont-weight%3A700%3Btext-anchor%3Amiddle%3Bdominant-baseline%3Amiddle%7D%3C%2Fstyle%3E%3Crect%20y%3D%220.25%22%20width%3D%22160%22%20height%3D%2226%22%20rx%3D%2213%22%20fill%3D%22%23df1737%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%2213.75%22%3E%E6%9C%9D%E9%A3%9F%E7%89%B9%E5%85%B8%3C%2Ftext%3E%3Crect%20y%3D%2253.25%22%20width%3D%22160%22%20height%3D%2226%22%20rx%3D%2213%22%20fill%3D%22%235b94ed%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%2266.75%22%3E7%E3%83%BB8%E6%97%A5%E9%96%93%E3%81%AF1%E6%B3%8A%E3%81%8A%E5%BE%97%3C%2Ftext%3E%3Crect%20y%3D%22106.25%22%20width%3D%22160%22%20height%3D%2226%22%20rx%3D%2213%22%20fill%3D%22%23c66cba%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%22119.75%22%3E%E3%83%A9%E3%82%A6%E3%83%B3%E3%82%B8%3C%2Ftext%3E%3Crect%20y%3D%22159.25%22%20width%3D%22160%22%20height%3D%2226%22%20rx%3D%2213%22%20fill%3D%22%23f28a4e%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%22172.75%22%3E%E5%B9%B4%E6%9C%AB%E5%B9%B4%E5%A7%8B%3C%2Ftext%3E%3C%2Fsvg%3E");
    background-size: 160px auto;
    background-position: 8px 8px;
  }

  div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row) {
    /* PCと同じ考え方。左右同じ数値にして中央に見せます（floatは外さない）。
       8px は下のホテル枠（SPの .hotel-lounge-row は margin: 0 8px）と同じ値です。 */
    width: calc(100% - 16px);
    margin: 10px 8px -17px;
    border-radius: 18px;
  }

  div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row) > .ttlLv2 {
    padding: 10px 34px;
  }

  div.inner_ttl.title.pageTtl_box:has(+ div.column .hotel-lounge-row) .heading {
    /* 19px。太字19pxは「大きな文字」の判定に入るので、
       白抜きでもコントラスト基準を満たします。 */
    font-size: 1.9rem;
  }

  .hotel-lounge-row {
    margin-right: 8px;
    margin-left: 8px;
    padding: 36px 14px 20px;
  }

  .hotel-lounge-row > .colWrap.clm_1_3col {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hotel-lounge-row .image-container > .text.mgtXS,
  .hotel-lounge-row .image-container > .textlink {
    padding-right: 12px;
    padding-left: 12px;
  }

  .gradeIcon-wrap {
    width: 64px;
    height: 76px;
  }

  .gradeIcon-wrap :is(
    .new-icon-css-text_A,
    .new-icon-css-text_B,
    .new-icon-css-text_L,
    .new-icon-css-text_AL
  ) {
    width: 62px;
    height: 62px;
  }

  .gradeIcon-wrap :is(
    .new-icon-css-text_A,
    .new-icon-css-text_B,
    .new-icon-css-text_L,
    .new-icon-css-text_AL
  )::after {
    top: 8px;
    font-size: 22px;
  }

  .gradeIcon-wrap :is(
    .new-icon-css-text_A,
    .new-icon-css-text_B,
    .new-icon-css-text_L,
    .new-icon-css-text_AL
  )::before {
    top: 32px;
    font-size: 11px;
  }

  :where(
    .image-container:has(.new-icon-jalpak),
    .hotel-lounge-row .image-container:has(.gradeIcon-wrap),
    .image-container:has(.new-icon-css-text_AL),
    .image-container:has(.new-icon-css-text_B)
  ) {
    padding-bottom: 40px;
  }
}

/* 320px前後の小型端末では、疑似ラベルの描画領域だけをカード内に収めます。 */
@media (max-width: 359px) {
  .custom_hotelbutton .linkbtn a.btn,
  :where(
    .image-container:has(.new-icon-jalpak),
    .hotel-lounge-row .image-container:has(.gradeIcon-wrap),
    .image-container:has(.new-icon-css-text_AL),
    .image-container:has(.new-icon-css-text_B)
  ) {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .custom_hotelbutton [class*="custom_button"] {
    transition: none;
  }
}