/* ==================================================
   plus1 / breakfast
   白＋クリーム／オレンジ差し色／青は料金・CTA面
   sticky アンカー・slick 概要スライド・SPレイアウト
================================================== */

#breakfast #fix_nav .con_gnav .box_gnav .gnav_br,
#breakfast #sp_fix .inner .con_gp .plus .inner .box_fnav ul li:nth-child(4) {
  display: none
}

/*
  見た目のヘッダーのみ非表示。
  DOM（#header / 検索フォーム / datepicker 等）は残し、common.js の参照エラーを防ぐ。
  フロートボタン（.l-search-fix-btn）は除外して他ページ同様に表示する。
*/
#breakfast #header {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: visible !important
}

#breakfast #header .con_title,
#breakfast #header .con_slide {
  display: none !important
}

/* 通常時は検索フォームを隠す（.fix 時は style.css 側の制御に委ねる） */
#breakfast #header #obj_form:not(.fix),
#breakfast #header .lay_form:not(.fix) {
  display: none !important
}

/* フロートから開いた予約パネルは表示を許可
   body 自身が id="breakfast" のため、子孫結合子（スペース）は使わない */
body.is-fix-open#breakfast #header .lay_form.plus.fix,
body.is-fix-open#breakfast #header #obj_form.fix {
  display: block !important
}

/* +1ページ同様、本館タブを隠し BEST RATE 帯を表示 */
#breakfast .lay_form.plus .bt_area ul li.core {
  display: none !important
}

/* BEST RATE 帯の文字サイズを他+1ページ（activeなし）と揃える */
#breakfast .lay_form .bt_area ul li.plus a.active.view_pc-tab .l-best-rate {
  font-size: 1em
}

/* フロートボタン：初回表示から出す（フォーム開放中のみ隠す） */
@media only screen and (min-width:769px) {
  #breakfast #header .l-search-fix-btn {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important
  }

  body.is-fix-open#breakfast #header .l-search-fix-btn {
    display: none !important
  }
}

#contents {
  margin-top: 0;
  background-color: #fff;
  color: #333;
  line-height: 2
}

#breakfast #contents .tmp_st .en {
  font-family: Open Sans ExtraBold, Lucida Sans Unicode, Lucida Grande, Verdana, Arial, sans-serif;
  color: #222;
  letter-spacing: .02em;
  font-weight: 400
}

#breakfast #contents .tmp_st .jp {
  font-weight: 700;
  color: #333
}

#breakfast #contents .sec_tit {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 56px;
  line-height: 1.5
}

@media only screen and (max-width:768px) {
  #breakfast #contents .sec_tit {
    font-size: 22px;
    margin-bottom: 32px
  }
}

/* ---- 1. hero ---- */
#breakfast {
  overflow-x: hidden
}

#contents .con_hero {
  position: relative;
  background-color: #fffbee;
  overflow-x: hidden
}

#contents .con_hero .img {
  text-align: center;
  line-height: 0
}

#contents .con_hero .img picture {
  display: block;
  width: 100%
}

#contents .con_hero .img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  object-position: center;
  background-color: #ffe9a8
}

@media only screen and (max-width:768px) {
  /* SPヒーロー（breakfast-hero-sp.jpg ≈ 4:3） */
  #contents .con_hero .img img {
    aspect-ratio: 4 / 3
  }

  #contents .con_hero .hero_line {
    left: -24px;
    width: calc(100% + 24px);
    height: 5px
  }
}

/*
  左端のみ親外へはみ出させ、親の overflow-x: hidden で切れた見え方にする。
  右端は親幅どおり（left + width = 100%）。
*/
#contents .con_hero .hero_line {
  display: block;
  position: relative;
  left: -60px;
  width: calc(100% + 60px);
  height: 7px;
  background-color: #e8833a
}

/* ---- 2. head block ----
   ベージュはヒーロー下端〜「BREAKFAST」文字高さの中ほどまで。
   下半分から白へ切り替わる。
*/
#contents .con_head {
  background: -webkit-linear-gradient(top, #fffbee 0, #fffbee 96px, #fff 96px);
  background: linear-gradient(to bottom, #fffbee 0, #fffbee 96px, #fff 96px);
  padding: 56px 0 48px
}

@media only screen and (max-width:1280px) {
  #contents .con_head {
    background: -webkit-linear-gradient(top, #fffbee 0, #fffbee 84px, #fff 84px);
    background: linear-gradient(to bottom, #fffbee 0, #fffbee 84px, #fff 84px)
  }
}

@media only screen and (max-width:768px) {
  /*
    ヒーロー（SP画像 約4:3 + ライン）の残りを埋めて、
    BREAKFAST〜キャッチを1stビュー内に収める。
    タイトルは左寄せ、キャッチは中央。余白は下側にまとめる。
  */
  #contents .con_head {
    background: #fffbee;
    padding: 28px 0 36px;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: calc(100vh - 75vw - 5px);
    min-height: calc(100svh - 75vw - 5px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
  }

  #contents .con_head .inn {
    width: 100%
  }
}

#contents .con_head .inn {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 0 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 24px;
  box-sizing: border-box
}

@media only screen and (max-width:768px) {
  #contents .con_head .inn {
    display: block;
    padding: 0 24px 0 20px
  }
}

/* アンカー列と左端を揃える（幅は見出しに合わせる） */
#contents .con_head .col_left {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  margin-right: 24px;
  text-align: left
}

@media only screen and (max-width:768px) {
  /* 参考サイトSPに合わせ、左端に少し余白を残して左揃え */
  #contents .con_head .col_left {
    margin-right: 0;
    text-align: left
  }
}

#contents .con_head .col_left .en {
  font-family: Open Sans ExtraBold, Lucida Sans Unicode, Lucida Grande, Verdana, Arial, sans-serif;
  font-size: 62px;
  line-height: 1;
  color: #222;
  font-weight: 400;
  letter-spacing: .02em;
  margin-bottom: 16px
}

@media only screen and (max-width:1280px) {
  #contents .con_head .col_left .en {
    font-size: 48px
  }
}

@media only screen and (max-width:768px) {
  #contents .con_head .col_left .en {
    font-size: 34px;
    margin-bottom: 10px
  }
}

#contents .con_head .col_left .sub {
  font-size: 20px;
  font-weight: 700;
  color: #555;
  line-height: 1.6;
  letter-spacing: .04em;
  white-space: nowrap
}

@media only screen and (max-width:1280px) {
  #contents .con_head .col_left .sub {
    font-size: 16px
  }
}

@media only screen and (max-width:768px) {
  #contents .con_head .col_left .sub {
    font-size: 13px;
    margin-bottom: 16px;
    white-space: normal
  }
}

#contents .con_head .col_right {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  text-align: right
}

@media only screen and (max-width:768px) {
  #contents .con_head .col_right {
    text-align: center;
    margin-top: 0
  }
}

#contents .con_head .col_right .catch {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.7;
  color: #222
}

@media only screen and (max-width:1280px) {
  #contents .con_head .col_right .catch {
    font-size: 24px
  }
}

@media only screen and (max-width:768px) {
  #contents .con_head .col_right .catch {
    font-size: 27px;
    line-height: 1.6;
    margin-top: 22px
  }
}

#contents .con_head .col_right .catch .line1,
#contents .con_head .col_right .catch .line2,
#contents .con_head .col_right .catch .line3 {
  display: block;
  color: #222
}

/* 「朝6時」の4文字だけオレンジ */
#contents .con_head .col_right .catch .hl {
  color: #e8833a
}

/* ---- sticky anchor + body layout ----
   #fix_nav は top:24px / right:24px / z-index:1000（PCのみ view_pc-tab）
   #page { overflow:hidden } のため CSS sticky は無効 → JS で .is_fixed（position:fixed）
*/
#contents .br_body {
  position: relative;
  overflow: visible
}

#contents .br_main {
  overflow: visible
}

#contents .br_anc_slot {
  position: relative
}

#contents .br_anc a {
  padding-left: 1em;
  white-space: nowrap
}

@media only screen and (min-width:769px) {
  #contents .br_body {
    display: grid;
    grid-template-columns: 176px 1fr;
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
    -webkit-box-align: start;
    -webkit-align-items: start;
    -ms-flex-align: start;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 0 16px
  }

  #contents .br_anc_slot {
    grid-column: 1;
    grid-row: 1 / -1;
    -webkit-align-self: start;
    -ms-flex-item-align: start;
    align-self: start;
    padding-top: 24px
  }

  #contents .br_main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0
  }

  /* 背景色セクションは2カラム全体にまたがり、画面幅いっぱいに背景を伸ばす */
  #contents .br_body .con_cta {
    grid-column: 1 / -1;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box
  }

  /* 背景は全幅のまま、コンテンツだけサイドナビ右列（.br_main）に揃える */
  #contents .br_body .con_recommend,
  #contents .br_body .con_info,
  #contents .br_body .con_kids {
    grid-column: 1 / -1;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 176px 1000px;
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
    padding-left: max(16px, calc((100vw - 1200px) / 2 + 16px));
    padding-right: max(24px, calc((100vw - 1200px) / 2 + 24px))
  }

  #contents .con_recommend .inn,
  #contents .con_info .inn,
  #contents .con_kids .inn {
    grid-column: 2;
    max-width: none;
    margin: 0
  }

  #contents .br_anc {
    z-index: 90
  }

  #contents .br_anc.is_fixed {
    position: fixed;
    top: 100px;
    z-index: 90
  }

  #contents .br_anc ul {
    list-style: none;
    margin: 0;
    padding: 0
  }

  #contents .br_anc ul li {
    margin-bottom: 8px
  }

  #contents .br_anc ul li a {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    line-height: 1.5;
    padding: 8px 14px 8px 1em;
    border: 1px solid transparent;
    -webkit-transition: background-color .2s ease, color .2s ease;
    transition: background-color .2s ease, color .2s ease
  }

  #contents .br_anc ul li a:hover,
  #contents .br_anc ul li.is_active a {
    background-color: #333;
    color: #fff
  }
}

@media only screen and (max-width:768px) {
  #contents .br_body .con_recommend,
  #contents .br_body .con_info,
  #contents .br_body .con_kids,
  #contents .br_body .con_cta {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box
  }

  /* SPではサイドナビ／タブを非表示（PCの sticky ナビには影響しない） */
  #contents .br_anc_slot {
    display: none
  }

  #contents .br_main {
    width: 100%
  }
}

/* sticky オフセット用（JSスムーズスクロールと併用） */
#lnk_overview,
#lnk_recommend,
#lnk_info {
  scroll-margin-top: 24px
}

@media only screen and (min-width:769px) {
  #lnk_overview,
  #lnk_recommend,
  #lnk_info {
    scroll-margin-top: 24px
  }
}

/* ---- 3. overview + slick ----
   メインカラム内は 写真 → 見出し → 本文 の縦積み（ナビ列との2カラムは維持）
   スライド右端を1stビューのキャッチ右端に揃える
*/
#contents .con_overview {
  background: #fff;
  padding: 40px 0 100px
}

@media only screen and (max-width:768px) {
  #contents .con_overview {
    padding: 28px 0 56px
  }
}

#contents .con_overview .inn {
  max-width: none;
  width: 100%;
  margin: 0;
  display: block;
  padding: 0
}

/*
  写真：br_main 右端（＝キャッチ右端）に右揃え。
  オレンジ枠は塗りつぶしで写真背後にオフセットし、白隙間を出さない。
  padding を使わず枠をはみ出させることで、写真右端＝キャッチ右端を維持。
*/
#contents .con_overview .box_photo {
  position: relative;
  width: 80%;
  max-width: 768px;
  margin: 0 0 38px auto;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-sizing: border-box
}

#contents .con_overview .box_photo:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  background-color: #e8833a;
  border: none;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 0
}

@media only screen and (max-width:768px) {
  #contents .con_overview .box_photo {
    width: 92%;
    max-width: none;
    margin: 0 auto 32px;
    padding: 0
  }

  #contents .con_overview .box_photo:after {
    top: 8px;
    left: 8px
  }
}

/*
  スライド本体：実寸はみ出し防止のためコンテナで比率固定。
*/
#contents .con_overview .box_photo .tmp_slide {
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 448px;
  overflow: hidden;
  background-color: #ffe9a8
}

@media only screen and (max-width:768px) {
  #contents .con_overview .box_photo .tmp_slide {
    max-height: 62vw
  }
}

/* slick 未初期化時は1枚目のみ見せて縦積みを防ぐ */
#contents .con_overview .box_photo .tmp_slide:not(.slick-initialized) > .slide:not(:first-child) {
  display: none
}

#contents .con_overview .box_photo .tmp_slide .slick-list,
#contents .con_overview .box_photo .tmp_slide .slick-track,
#contents .con_overview .box_photo .tmp_slide .slick-slide,
#contents .con_overview .box_photo .tmp_slide .slick-slide > div,
#contents .con_overview .box_photo .tmp_slide .slide {
  height: 100% !important
}

#contents .con_overview .box_photo .tmp_slide .slide {
  display: block !important;
  width: 100% !important;
  position: relative
}

#contents .con_overview .box_photo .tmp_slide .slide .img {
  line-height: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0
}

#contents .con_overview .box_photo .tmp_slide .slide .img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background-color: #ffe9a8
}

#contents .con_overview .box_photo .tmp_slide .slick-dots {
  bottom: 4%
}

#contents .con_overview .box_photo .tmp_slide.plus .slick-dots li.slick-active button {
  background-color: #e8833a
}

#contents .con_overview .box_text {
  width: 80%;
  max-width: 768px;
  margin-left: auto;
  margin-right: 0;
  box-sizing: border-box
}

@media only screen and (max-width:768px) {
  #contents .con_overview .box_text {
    width: 92%;
    max-width: none;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box
  }
}

#contents .con_overview .box_text .tit {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  line-height: 1.5;
  margin-bottom: 12px;
  text-align: left
}

@media only screen and (max-width:768px) {
  #contents .con_overview .box_text .tit {
    font-size: 18px
  }
}

#contents .con_overview .box_text .tx {
  font-size: 13.5px;
  color: #555;
  line-height: 1.75;
  text-align: left
}

@media only screen and (max-width:768px) {
  #contents .con_overview .box_text .tx {
    font-size: 13px;
    line-height: 1.8
  }
}

/* ---- 4. recommend ---- */
#contents .con_recommend {
  background: #fffbee;
  padding: 100px 24px
}

@media only screen and (max-width:768px) {
  #contents .con_recommend {
    padding: 56px 0;
    overflow-x: hidden
  }
}

#contents .con_recommend .inn {
  max-width: 960px;
  margin: 0 auto
}

@media only screen and (max-width:768px) {
  #contents .con_recommend .inn {
    max-width: none
  }

  #contents .con_recommend .sec_tit {
    padding: 0 20px
  }
}

#contents .con_recommend .box_rec {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 56px 48px
}

@media only screen and (max-width:768px) {
  #contents .con_recommend .box_rec {
    display: block;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
  }

  #contents .con_recommend .box_rec li {
    margin-bottom: 40px
  }

  #contents .con_recommend .box_rec li:last-child {
    margin-bottom: 0
  }
}

#contents .con_recommend .box_rec li {
  width: calc(50% - 24px)
}

@media only screen and (max-width:768px) {
  #contents .con_recommend .box_rec li {
    width: 100%
  }
}

/*
  オレンジ枠は右下の padding 領域に描画する。
  box-sizing:border-box で padding を幅内に含め、はみ出しによる横スクロールを防ぐ。
*/
#contents .con_recommend .box_rec li .img {
  position: relative;
  margin: 0 0 22px;
  padding: 0 10px 10px 0;
  line-height: 0;
  overflow: visible;
  background: transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%
}

#contents .con_recommend .box_rec li .img:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 0;
  bottom: 0;
  background-color: #e8833a;
  pointer-events: none;
  z-index: 0
}

#contents .con_recommend .box_rec li .img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: #ffe9a8
}

@media only screen and (max-width:768px) {
  #contents .con_recommend .box_rec li .img {
    margin-bottom: 16px;
    padding: 0 6px 6px 0
  }

  #contents .con_recommend .box_rec li .img:after {
    top: 6px;
    left: 6px
  }

  #contents .con_recommend .box_rec li .img img {
    aspect-ratio: 16 / 10
  }
}

#contents .con_recommend .box_rec li span {
  display: block
}

#contents .con_recommend .box_rec li .tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .15em;
  color: #e8833a;
  border: 1px solid #e8833a;
  padding: 3px 12px;
  margin-bottom: 12px
}

@media only screen and (max-width:768px) {
  #contents .con_recommend .box_rec li .tag {
    display: inline-block;
    padding-left: 12px;
    padding-right: 12px
  }
}

#contents .con_recommend .box_rec li .tit {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.6
}

#contents .con_recommend .box_rec li .t {
  font-size: 13.5px;
  color: #666
}

#contents .con_recommend .box_mini_gallery {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  gap: 12px
}

@media only screen and (max-width:768px) {
  #contents .con_recommend .box_mini_gallery {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 40px 16px 0;
    gap: 8px
  }
}

#contents .con_recommend .box_mini_gallery li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  line-height: 0;
  min-width: 0
}

@media only screen and (max-width:768px) {
  /* 2枚×2行グリッド */
  #contents .con_recommend .box_mini_gallery li {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 calc(50% - 4px);
    -ms-flex: 0 0 calc(50% - 4px);
    flex: 0 0 calc(50% - 4px);
    width: calc(50% - 4px);
    max-width: calc(50% - 4px)
  }
}

#contents .con_recommend .box_mini_gallery li img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: #ffe9a8
}

/* ---- 5. info ---- */
#contents .con_info {
  background-color: #fff;
  padding: 100px 24px
}

@media only screen and (max-width:768px) {
  #contents .con_info {
    padding: 56px 20px
  }
}

#contents .con_info .inn {
  max-width: none;
  margin: 0
}

#contents .con_info .box_photo {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 0 48px;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-sizing: border-box
}

#contents .con_info .box_photo:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  background-color: #e8833a;
  border: none;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 0
}

@media only screen and (max-width:768px) {
  #contents .con_info .box_photo {
    margin-bottom: 32px
  }

  #contents .con_info .box_photo:after {
    top: 8px;
    left: 8px
  }
}

#contents .con_info .box_photo .tmp_slide {
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 520px;
  overflow: hidden;
  background-color: #b8d4e0
}

@media only screen and (max-width:768px) {
  #contents .con_info .box_photo .tmp_slide {
    max-height: 62vw
  }
}

#contents .con_info .box_photo .tmp_slide:not(.slick-initialized) > .slide:not(:first-child) {
  display: none
}

#contents .con_info .box_photo .tmp_slide .slick-list,
#contents .con_info .box_photo .tmp_slide .slick-track,
#contents .con_info .box_photo .tmp_slide .slick-slide,
#contents .con_info .box_photo .tmp_slide .slick-slide > div,
#contents .con_info .box_photo .tmp_slide .slide {
  height: 100% !important
}

#contents .con_info .box_photo .tmp_slide .slide {
  display: block !important;
  width: 100% !important;
  position: relative
}

#contents .con_info .box_photo .tmp_slide .slide .img {
  line-height: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0
}

#contents .con_info .box_photo .tmp_slide .slide .img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background-color: #b8d4e0
}

#contents .con_info .box_photo .tmp_slide .slick-dots {
  bottom: 4%
}

#contents .con_info .box_photo .tmp_slide.plus .slick-dots li.slick-active button {
  background-color: #e8833a
}

#contents .con_info .box_detail {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 40px 48px
}

@media only screen and (max-width:768px) {
  #contents .con_info .box_detail {
    display: block
  }
}

#contents .con_info .box_detail_col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0
}

@media only screen and (max-width:768px) {
  #contents .con_info .box_detail_col + .box_detail_col {
    margin-top: 8px
  }
}

#contents .con_info .info_item {
  margin-bottom: 32px
}

#contents .con_info .info_item:last-child {
  margin-bottom: 0
}

#contents .con_info .info_item .label {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin: 0 0 8px;
  line-height: 1.5
}

#contents .con_info .info_item .val {
  font-size: 14px;
  color: #333;
  margin: 0;
  line-height: 1.85
}

#contents .con_info .info_item .val .sub {
  font-size: 12px;
  color: #666
}

#contents .con_info .info_item .val .hname {
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
  color: #308eb0
}

#contents .con_info .info_item .val .hname_core {
  color: #008837
}

#contents .con_info .info_item_pay {
  background-color: #daedf4;
  border: none;
  border-radius: 0;
  padding: 24px 22px;
  margin-top: 32px;
  width: 100%;
  box-sizing: border-box
}

#contents .con_info .info_item_pay .label {
  color: #333;
  font-size: 15px;
  margin-bottom: 6px
}

#contents .con_info .info_item_pay .val {
  font-weight: 400;
  color: #333
}

#contents .con_info .info_item_pay .val .sub {
  font-weight: 400
}

/* ---- 6. kids ---- */
#contents .con_kids {
  background: #fffbee;
  padding: 100px 24px
}

@media only screen and (max-width:768px) {
  #contents .con_kids {
    padding: 56px 20px
  }
}

#contents .con_kids .inn {
  max-width: 760px;
  margin: 0 auto
}

#contents .con_kids .lead {
  font-size: 14.5px;
  color: #666;
  text-align: center;
  margin-bottom: 48px
}

@media only screen and (max-width:768px) {
  #contents .con_kids .lead {
    margin-bottom: 32px
  }
}

#contents .con_kids .box_kids {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 28px
}

@media only screen and (max-width:768px) {
  #contents .con_kids .box_kids {
    gap: 12px
  }
}

#contents .con_kids .box_kids li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1
}

#contents .con_kids .box_kids li .img {
  margin-bottom: 12px;
  line-height: 0;
  position: relative
}

#contents .con_kids .box_kids li .img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: #ffe9a8
}

#contents .con_kids .box_kids li .img.pending:after {
  content: "後日撮影予定";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .9);
  padding: 6px 10px;
  font-size: 11px;
  color: #e8833a;
  line-height: 1.6;
  white-space: nowrap
}

@media only screen and (max-width:768px) {
  #contents .con_kids .box_kids li .img.pending:after {
    font-size: 10px;
    padding: 4px 6px
  }
}

#contents .con_kids .box_kids li .t {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #666
}

@media only screen and (max-width:768px) {
  #contents .con_kids .box_kids li .t {
    font-size: 11px
  }
}

/* ---- 7. cta ---- */
#contents .con_cta {
  background: #308eb0;
  color: #fff;
  text-align: center;
  padding: 56px 24px
}

@media only screen and (max-width:768px) {
  #contents .con_cta {
    padding: 40px 20px
  }
}

#contents .con_cta .tit {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 28px;
  line-height: 1.8;
  color: #fff
}

@media only screen and (max-width:768px) {
  #contents .con_cta .tit {
    font-size: 20px;
    margin-bottom: 20px
  }
}

/* 公式サイト予約特典 */
#contents .con_cta .cta_lead {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  margin: 0 0 24px;
  line-height: 1.5
}

@media only screen and (max-width:768px) {
  #contents .con_cta .cta_lead {
    font-size: 15px;
    margin-bottom: 18px
  }
}

#contents .con_cta .box_merit {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  list-style: none;
  margin: 0 auto 36px;
  padding: 0;
  gap: 28px;
  max-width: 420px
}

@media only screen and (max-width:768px) {
  #contents .con_cta .box_merit {
    gap: 16px;
    margin-bottom: 28px;
    max-width: 320px
  }
}

#contents .con_cta .box_merit li {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto
}

#contents .con_cta .box_merit .circle {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: #fff;
  color: #1a8fa8;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .04em;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 12px;
  box-shadow: 0 2px 0 rgba(13, 110, 134, .18)
}

@media only screen and (max-width:768px) {
  #contents .con_cta .box_merit .circle {
    width: 132px;
    height: 132px;
    font-size: 12.5px;
    line-height: 1.4;
    padding: 10px
  }
}

#contents .con_cta .tmp_bt_plan a {
  display: inline-block;
  padding: 16px 56px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  background: #f6b52c;
  color: #333;
  text-decoration: none
}

@media only screen and (max-width:768px) {
  /* 共通 .sdp の width:95% + 左右padding で横はみ出しするのを防ぐ */
  #contents .con_cta .tmp_bt_plan {
    padding: 0 4px 8px 0
  }

  #contents .con_cta .tmp_bt_plan a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    max-width: 100%;
    padding: 16px 24px;
    margin: 0
  }
}

@media only screen and (min-width:1281px) {
  #contents .con_cta .tmp_bt_plan a:hover {
    opacity: .9
  }
}

#contents .con_cta .sublinks {
  margin-top: 28px;
  font-size: 12.5px
}

#contents .con_cta .sublinks a {
  text-decoration: underline;
  margin: 0 12px;
  color: #fff
}

#contents .con_cta .sublinks .sep {
  color: #fff
}

/* ---- gnav：+1 TOP（top_update.css）と同じ表示に揃える ---- */
/* 幅・折り返し位置 */
#breakfast #fix_nav.plus .inner .con_gnav.active {
  width: 1060px;
}

#breakfast #fix_nav.plus .inner .con_gnav .box_gnav {
  width: 1060px;
}

#breakfast #fix_nav.plus .inner .con_gnav .box_gnav li {
  width: 11.11%;
}

/* 本館ブロックのみ緑 */
#breakfast #fix_nav.plus .inner .con_gnav .box_gnav li.gnav_core a {
  background-color: rgba(0, 136, 55, .7);
}

#breakfast #sp_fix .inner .con_fot.plus .inner .box_fnav ul li.fnav_core a {
  background-color: rgba(0, 136, 55, .7);
}