@charset "UTF-8";
/* ==========================================================
  bali-afternoon-tea.css
  「バリで過ごす、ハネムーンを彩る優雅なアフタヌーンティー」
  PC: 1000px / SP breakpoint: max-width 639px
========================================================== */

:root{
  --at-pink: #dd7982;
  --at-pink-deep: #dd7982;
  --at-pink-soft: #fbe9ec;
  --at-blue: #7abcde;
  --at-blue-deep: #7abcde;
  --at-green: #8fc63e;
  --at-orange: #ed8c5a;
  --at-teal: #4fb3c4;
  --at-coral: #f0806e;
  --at-gold: #c49a2e;
  --at-text: #3c3536;
  --at-text-light: #333333;
  --at-line: #d2d2d2;
  --at-width: 1000px;
  --at-font-serif: "Noto Serif JP", "Yu Mincho", serif;
  --at-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* ---------- reset (scoped) ---------- */
.at-afternoon-tea *{ box-sizing: border-box; }
.at-afternoon-tea{
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: var(--at-text);
  line-height: 1.9;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
}
.at-afternoon-tea img{ max-width: 100%; display: block; vertical-align: bottom; }
.at-afternoon-tea a{ color: inherit; text-decoration: none;  }
.at-afternoon-tea a:hover{ opacity: .7; }

.at-inner{ width: 100%; max-width: var(--at-width); margin: 0 auto; padding: 0 25px; }

/* ---------- Hero slider (bxSlider) ---------- */
.at-hero{ position: relative; margin: 0 0 40px; }
.at-hero__frame{
  position: relative; line-height: 0;
  width: 100%;
  aspect-ratio: 950 / 450;
}
.at-hero__slider{ list-style: none; margin: 0; padding: 0; width: 100%; }
.at-hero__slider li{ width: 100%; }
.at-hero__slider li img{ width: 100%; display: block; object-fit: cover; }

/* pc-frame.png / sp-frame.png をスライダーの上に重ねる装飾フレーム */
.at-hero__frame-deco{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 15; pointer-events: none; object-fit: contain; object-position: center;
}
.at-hero__frame-deco.at-hero__frame-deco--sp{ display: none; }

/* SEO対策でキャプション画像をh1でマークアップ。position:absoluteの画像自身が基準を持つため、
   見出し要素側は余白だけリセットして見た目に影響が出ないようにする */
.at-hero__caption-heading{ margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.at-hero__caption{
position: absolute;
  top: 19%;
  left: 5%;
  z-index: 20;
}

/* bxSlider theme overrides */
.at-hero .bx-wrapper{
  margin-bottom: 0; box-shadow: none; border: none; background: none;
  width: 100%;
}
.at-hero .bx-viewport{ width: 100%; height: 100%; }
.at-afternoon-tea .at-hero .bx-pager{ position: absolute; bottom: 25px; width: 100%; left: 0; z-index: 25; padding: 0; text-align: center; }
.at-afternoon-tea .at-hero .bx-pager.bx-default-pager a{
  background: #fff;
  width: 10px; height: 10px; margin: 0 3px;
}
.at-afternoon-tea .at-hero .bx-pager.bx-default-pager a:hover,
.at-afternoon-tea .at-hero .bx-pager.bx-default-pager a.active{
  background: #ef7b86;
}
.at-hero .bx-controls-direction a{ display: none; }

.at-hero__frame > .bx-wrapper,
.at-hero__frame .bx-viewport {
  height: 100% !important;
}

.at-hero .bx-loading {
  display: none !important;
}

/* bxSlider が読み込めない場合の簡易フォールバックスライダー用ページャー
   （bxSlider本体が正しく動作していれば使用されません） */
.at-hero__fallback-pager{
  position: absolute; bottom: 18px; left: 0; width: 100%; z-index: 25;
  display: flex; justify-content: center; gap: 10px;
}
.at-hero__fallback-pager span{
  display: block; width: 9px; height: 9px; border-radius: 50%; cursor: pointer;
  background: #fff;
}
.at-hero__fallback-pager span:hover,
.at-hero__fallback-pager span.is-active{
  background: #ef7b86;
}
.at-hero__slider--fallback{ position: relative; }
.at-hero__slider--fallback li{ list-style: none; }
.at-hero__slider--fallback li:first-child{ position: relative; }

/* ---------- Intro ---------- */
.at-intro{ text-align: center; padding: 0 0 44px; }
.at-intro__lead{
  font-family: YuMincho, "Hiragino Mincho ProN", serif; color: #ef7b86; font-weight: 700;
  font-size: 18px; line-height: 1.9; margin: 0 0 10px;
}
.at-intro__text{ font-size: 15px; line-height: 2; text-align: left; max-width: 870px; margin: 0 auto; }

/* ---------- Section heading (その他ホテル) ---------- */
/* アイコン＋テキストをまとめて中央配置し、アイコンとテキストの間には適度な余白を確保する */
.at-section-heading{
  display: flex; align-items: center; justify-content: center;
  gap: 28px;
  text-align: center; padding: 10px 0 26px; font-family: YuMincho, "Hiragino Mincho ProN", serif;
}
.at-section-heading__icon{ flex: none; width: 100px; height: auto; }
.at-section-heading__icon--cup{ width: 65px; }
.at-section-heading__text{ flex: none; }
.at-section-heading__eyebrow{ display: block; font-size: 20px; color: var(--at-text-light); line-height: 1.2;font-weight: bold;}
.at-section-heading__title{ font-size: 28px; font-weight: 700; color: #3a2a2a; margin: 0; }

/* ---------- Hotel block ---------- */
.at-hotel{ margin: 0 0 60px; }
.at-hotel.theme-blue{margin-bottom: 0;}



/* テーマカラー定義（各ホテルごとに配色を切り替え）
   --theme-border / --theme-bg … ポイントピル(at-hotel__point)用
   --feature-border            … バッジ(at-hotel__badge-label)の文字・ライン色 ＆ at-feature__text（点線ボックス）の枠色。ここだけ個別に色を調整可能 */
.at-hotel.theme-green{  --theme: var(--at-green);      --theme-deep: #9acd44; --theme-border: #9acd44; --theme-bg: #fff; --feature-border: #9acd44; }
.at-hotel.theme-orange{ --theme: var(--at-orange);     --theme-deep: #e9a44a; --theme-border: #e9a44a; --theme-bg: #fff; --feature-border: #e9a44a; }
.at-hotel.theme-pink{   --theme: var(--at-pink);       --theme-deep: var(--at-pink-deep); --theme-border: #ec83a1; --theme-bg: #fff; --feature-border: #ec83a1; }
.at-hotel.theme-teal{   --theme: var(--at-teal);       --theme-deep: #ae86df; --theme-border: #ae86df; --theme-bg: #fff; --feature-border: #ae86df; }
.at-hotel.theme-coral{  --theme: var(--at-coral);      --theme-deep: #df666c; --theme-border: #df666c; --theme-bg: #fff; --feature-border: #df666c; }
.at-hotel.theme-blue{   --theme: var(--at-blue-deep);  --theme-deep: #4d84df; --theme-border: #4d84df; --theme-bg: #fff; --feature-border: #4d84df; }

/* タイトル行：CSS Gridでレイアウト。
   PC: アイコンが左で「バッジ（上段）＋見出し（下段）」の2段ぶんの高さを占める。
   SP: メディアクエリ側でgrid-template-areasを組み替え、バッジを全幅の1行目、アイコン＋見出しを2行目に配置する（下部参照）。 */
.at-hotel__title-row{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon badge"
    "icon heading";
  align-items: center;
  column-gap: 14px;
  row-gap: 8px;
  margin: 0 0 16px;
}
.at-hotel__badge-icon{ grid-area: icon; width: 56px; height: 56px; object-fit: contain; }

/* バッジ：テーマカラーで塗りつぶした角丸ラベル
   塗り色はホテルごとの --feature-border（.at-hotel.theme-xxx で定義）を参照 */
.at-hotel__badge-label{
  grid-area: badge;
  justify-self: start;
  display: inline-flex; align-items: center;
  background: var(--feature-border, var(--at-pink));
  color: #fff; font-size: 15px; font-weight: 700;
  letter-spacing: .04em; line-height: 1.5;
  padding: 3px 10px;
}

/* 見出し：テキスト直後にカップアイコン */
.at-hotel__heading{
  grid-area: heading;
  font-family: YuMincho, "Hiragino Mincho ProN", serif; font-size: 27px; font-weight: 700; color: #3a2a2a;
  margin: 0; line-height: 1;
  word-break: keep-all;
  margin-top: 10px;
}
img.at-hotel__heading-cup{ display: inline-block; width: 42px; height: auto; vertical-align: middle; margin-left: 12px; }
/* 見出し末尾の単語＋カップアイコンを1つの塊として扱い、アイコンだけが単独で改行落ちしないようにする */
.at-hotel__heading-tail{ display: inline-block; white-space: nowrap; }

.at-hotel__desc{ font-size: 15px; line-height: 1.95; margin: 0 0 16px; }

.at-hotel__points{ display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; }
.at-hotel__point{
  border: 1px solid var(--theme-border, #f0c3cd); border-radius: 20px; padding:3px 15px; font-size: 15px;
  display: flex; align-items: center; gap: 8px; background: none; color: var(--at-text);font-weight: bold;
}
.at-hotel__point-star{ display: inline-flex; align-items: center; gap: 1px; }
.at-hotel__point-star img{ width: 17px;
  height: 17px;}

/* ---------- Feature row (photo + text) ---------- */
.at-feature{ display: flex; gap: 26px; align-items: stretch; margin: 0 0 20px; }
.at-feature--reverse{ flex-direction: row-reverse; }
.at-feature__photo{ flex: 0 0 46%; overflow: hidden;  box-shadow: 0 6px 16px rgba(60,30,30,.08); }
.at-feature__photo img{ width: 100%; height: 100%; object-fit: cover; }
/* 枠色はホテルごとに --feature-border（.at-hotel.theme-xxx で定義）を参照。
   色だけを変えたい場合はこの変数の値を調整するだけでOK */
.at-feature__text{
  flex: 1; font-size: 15px; line-height: 1.95; display: flex; 
  border: 1px dotted var(--feature-border, var(--at-line));
  border-radius: 3px;
  padding: 20px;
  background: none;
}

/* ---------- Ceremony block ---------- */
.at-ceremony{ margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--at-line); }
.at-ceremony__heading{
  display: flex; align-items: center; gap: 8px; 
  font-size: 20px; font-weight: 700; color: #3a2a2a; margin: 0 0 14px;
}
.at-ceremony__heading img{ width: 30px; }
.at-ceremony__desc{ font-size: 15px; line-height: 1.95; margin: 15px 0; }

/*ホテル評価*/
#main .data-box {
    display: flex;
    font-size: 14px;
}
#main .data-box .iconbox p.rank {
    width: auto;
    color: #fff;
    border-radius: 12px;
    padding: 0 10px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
}
#main .data-box .iconbox p.rank.high {
    background: #a48700;
}
#main .data-box .iconbox p.rank.low {
    background: #213264;
}
#main .data-box p.kuchikomi .evaluation {
    font-weight: bold;
    padding-left: 4px;
}
#main .data-box p.kuchikomi {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}
#main .data-box p.kuchikomi .evaluation.ore {
    color: #ff4e00;
}
#main .data-box p.kuchikomi .evaluation.yellow {
    color: #ff9900;
}
#main .data-box p.kuchikomi .evaluation .comment {
    padding-left: 0;
}
#main .data-box p.kuchikomi .number {
    font-weight: normal;
    color: #000;
    padding: 0;
    margin: 0;
}
#main .data-box p.kuchikomi .number a {
    text-decoration: underline;
    display: inline;
}
#main .data-box p.kuchikomi .star {
    display: flex;
}
#main .box-left .data-box, #main .box-right .data-box {
    width: 100%;
}
.at-ceremony__photos{ display: flex; margin: 0 0 22px; }
.at-ceremony__photos img{ width: 50%; height: 320px; object-fit: cover; border-radius: 2px; }

/* ---------- Buttons ---------- */
/* a.at-btn とタグ込みで指定し、共通の .at-afternoon-tea a{ color:inherit } より詳細度を上げて白文字を確実に適用 */
a.at-btn{
  display: flex; align-items: center; justify-content: center; gap: 14px;
  height: 75px; padding: 0 20px; border-radius: 5px; font-size: 18px; font-weight: 700;
  margin: 0 0 12px; color: #fff; letter-spacing: .02em;
  
}
.at-btn:hover{ opacity: 1; }
.at-btn.is-pink{
  background-image: url(../img/bali-afternoon-tea/link-bg-pink.png);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.at-btn.is-blue{
  background-image: url(../img/bali-afternoon-tea/link-bg-blue.png);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

.at-btn-outline{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 20px; border-radius: 4px; font-size: 20px; font-weight: 700;
margin: 0 0 20px; background: #fff; 
}

.at-btn-outline.is-pink{ border: 2px solid var(--at-pink); color: var(--at-pink-deep); box-shadow: 0 6px 0 #f8e4e6; }
.at-btn-outline.is-blue{ border: 2px solid var(--at-blue); color: var(--at-blue-deep); box-shadow: 0 6px 0 #e4f2f8; }
.at-btn-outline img{width: 50px;
  height: auto;}

.at-bottom-links{ margin-top: 20px; }


/*260714　追加調整*/

.at-afternoon-tea .wrapper {
  width: 1000px;
  margin: 20px auto 0px;
  border: 1px solid #CCC;
  padding-top: 20px;
  margin-bottom: 50px;
  padding-bottom: 20px;
}
.at-hotel.theme-teal .at-hotel__heading{
font-size: 24px;
}

/* PCレイアウト */
@media (min-width: 640px) {
/*--------------------------------------------------*
 *   PCでは無効/表示されない
 *--------------------------------------------------*/
.pc_none {
	display: none !important;
}
}


/* ==========================================================
  SP: max-width 639px
========================================================== */
@media screen and (max-width: 639px){
  .at-afternoon-tea{ font-size: 14px; }
  .at-inner{ padding: 0 16px; }

  /* デザイン案通り、SPでは.at-innerの左右paddingを打ち消して画面幅いっぱいに表示する */
  .at-hero{ margin: 16px -16px 20px; }
  .at-hero__frame{ aspect-ratio: 750 / 400; }
  .at-hero__frame-deco.at-hero__frame-deco--pc{ display: none; }
  .at-hero__frame-deco.at-hero__frame-deco--sp{ display: block; }
  .at-hero__caption{width: 53%;
    min-width: 0;
    top: 11%;
    left: 4%; }
  .at-afternoon-tea .at-hero .bx-pager{ bottom: 15px; }
  .at-afternoon-tea .at-hero .bx-pager.bx-default-pager a{ width: 10px; height: 10px; margin: 0 2px; }
  .at-hero__fallback-pager{ bottom: 10px; gap: 8px; }
  .at-hero__fallback-pager span{ width: 7px; height: 7px; }

  .at-intro{ padding: 0 0 28px; }
  .at-intro__lead{ font-size: 3.8vw;
    line-height: 1.8;margin: 0;
    text-align: left;}
  .at-intro__text{ font-size: 3.5vw; line-height: 1.85; }

  .at-section-heading{ padding: 6px 0 18px; gap: 8px; }
  .at-section-heading__icon{ width: 40px; flex-shrink: 0; }
  .at-section-heading__icon--cup{ width: 30px; }
  /* テキストを縮小可能にし、アイコン＋テキストの合計幅が画面幅を超えてもはみ出さないようにする */
  .at-section-heading__text{ flex: 1 1 auto; min-width: 0; }
  .at-section-heading__eyebrow{ font-size: 13px; }
  .at-section-heading__title{ font-size: 3.8vw;
    letter-spacing: -0.05em;}

  .at-hotel{ margin: 0 0 30px; }

  /* SP専用レイアウト：1行目にバッジを全幅表示、2行目でアイコン＋見出しを横並びにする（PC側のgrid-template-areasとは別構成） */
  .at-hotel__title-row{
    grid-template-areas:
      "badge badge"
      "icon heading";
    column-gap: 10px; row-gap: 8px;
    margin: 0 0 5px;
  }
  .at-hotel__badge-icon{width: 30px;
    height: 30px; }
  .at-hotel__badge-label{
    justify-self: stretch;
    justify-content: center;
    width: 100%;
   font-size: 3.3vw;line-height: 1.5;
    padding:3px 0;
  }

  .at-hotel__heading{ font-size: 4.4vw;
    margin: 0;
    line-height: 1.5;}
  img.at-hotel__heading-cup{ width: 26px; margin-left: 8px; }

  .at-hotel__desc{ font-size: 3.3vw;margin: 0 0 5px;}

  /* 星画像を非表示にして横幅を節約し、2つのポイントが1行に並ぶようにする */
  .at-hotel__points{ gap: 8px; margin-bottom: 16px; flex-wrap: nowrap; }
  .at-hotel__point{ font-size: 3vw;
    padding: 0px 5px;  min-width: 0; justify-content: center; text-align: center; }
  .at-hotel__point-star{ display: none; }

  .at-feature, .at-feature--reverse{ flex-direction: column; gap: 0; margin-bottom: 22px; }
  .at-feature__photo{ flex: none; box-shadow: none; }
  .at-feature__photo img{ height: auto; aspect-ratio: 16 / 10; }
  .at-feature__text{font-size: 3.5vw;
    padding: 10px;line-height: 1.6;
    margin-top: 15px;}

  .at-ceremony{ margin-top: 15px;
    padding-top: 15px;}
  .at-ceremony__heading{ font-size: 16px; }
/*  .at-ceremony__photos{ flex-direction: column; gap: 4px; }*/
  .at-ceremony__photos img{ width: 100%; height: auto; aspect-ratio: 16 / 10; min-width: 0;}

  /*ホテル評価スマホ*/
  #main .data-box .iconbox p.rank{
    padding: 0 2px;
  }
  #main .data-box{
    font-size: 3vw;
  }
  #main .data-box p.kuchikomi{
    margin-left: 5px;
  }
  #main .data-box p.kuchikomi .star img{
    width: 15px;
  }

  .at-btn, .at-btn-outline{font-size: 3.5vw;
    padding: 0 8px;
    gap: 5px;
    line-height: 1.4;
    height: 40px; }
  a.at-btn{ height: auto; 
  font-size: 3.3vw;
  height: 40px;
  letter-spacing: -0.05em;
  }
  .at-btn img{ display: none; }
  .at-btn-outline img{ width: 22px; height: 22px; flex: none; }
  .at-btn-outline{
  margin: 0 0 15px;
  }
  
/*260714　追加調整*/
  
  
.at-afternoon-tea .wrapper{
  width: inherit;
    margin: 0;
    border: none;
    padding: 0;
  }
  
  .at-ceremony__desc{
  margin: 0;
  }
  .at-ceremony__heading{
  font-size: 4vw;
    margin-bottom: 0;
  }
  .at-ceremony__heading img {
  width: 25px;
}
  
  .at-hotel.theme-teal .at-hotel__heading{
  font-size: 4.4vw;
  }
  
  .at-btn.is-blue{
  padding: 0;
  }
  
  .at-hotel.theme-blue .at-hotel__heading{
  font-size: 4vw;
  }
  
  .at-bottom-links {
  margin-top: 10px;
}
  
  
  
  
  
  
  
  
}