@charset "UTF-8";
/* ============================================================
   style_sd.css … スマホ用（max-width:800px）／HACIENDA VISON HOTEL
   ============================================================ */

:root{
  --cream:      #f3ede2;
  --cream-2:    #faf6ee;
  --cream-3:    #eae1d1;
  --ink:        #33291f;
  --ink-soft:   #4f4a44;
  --line:       #d5c9b4;
  --green:      #5c6a4c;
  --green-d:    #4a5640;
  --terra:      #a9603f;
  /* ▼公式サイト準拠のゴシック（Noto Sans JP：和文／Roboto：欧文） */
  --font-en:    'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-ser:   'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-jp:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  /* 元の明朝デザインに戻す場合:
  --font-en:  'Cormorant Garamond','Times New Roman',serif;
  --font-ser: 'Shippori Mincho','Hiragino Mincho ProN',serif;
  --font-jp:  'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif; */
}

html { font-size: 62.5%; }
body {
  color: var(--ink); width:100%; margin:0 auto; padding:0; text-align:left;
  font-size: 1.5rem; line-height:1.85; font-family: var(--font-jp); font-weight: 400;
  background: var(--cream); -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { text-align:left; width:100%; display:block; font-weight:500; margin:0; padding:0; }
* { box-sizing: border-box; }
a{text-decoration:none; color:inherit;}
p{margin:0;}
img{ display:block; max-width:100%; }
.cf:before,.cf:after { content:" "; display:table; }
.cf:after { clear:both; }

.mainbody{ width:100%; margin:0 auto; }
.contents_wrpper { width:100%; margin:0 auto; background: var(--cream); }

.fade01 { animation: fade 2.2s forwards; opacity:1; }
.fade02 { animation: fade 2.0s forwards; opacity:1; }
.list-mv01 { opacity:0; transform: translateY(22px); }
.mv01 { opacity:1 !important; transform: translateY(0) !important; }
.bottom-to-top { opacity:0; }
.move02 { animation: bottom-to-top 1.5s forwards; opacity:1; }
@keyframes fade { 0%{opacity:0;} 100%{opacity:1;} }
@keyframes bottom-to-top { 0%{opacity:0; transform:translateY(30px);} 100%{opacity:1; transform:translateY(0);} }
@keyframes zoomDown { 0%{transform:scale(1.08);} 100%{transform:scale(1);} }

/* ---------------- HERO ---------------- */
/* スクロール追従ナビ（固定ヘッダー）はスマホでは非表示 */
#fixed-nav { display: none !important; }

#header { position: relative; width:100%; height: 100vh; overflow:hidden; background: var(--cream); }
#navi { width:100%; position:absolute; top:0; left:0; z-index:9999; display:flex; justify-content:space-between; align-items:center; }
#navi .logo_ikyu { margin: 16px 16px 0 auto; width: 74px; height:auto; }
#navi ul.menu { display:none; }

#top_ttl { position:absolute; z-index:9990; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; padding: 0 24px; }
#top_ttl .logo_hotel { width: 210px; height:auto; margin:0 auto; filter: drop-shadow(0 2px 12px rgba(0,0,0,.4)); }
#top_ttl .catch { display:block; margin-top: 26px; font-family: var(--font-ser); font-size: 1.7rem; letter-spacing:.2em; text-indent:.2em; font-weight:500; text-shadow:0 1px 12px rgba(0,0,0,.45); }
#top_ttl .en { display:block; margin-top: 14px; font-family: var(--font-en); font-size: 1.15rem; letter-spacing:.24em; opacity:.92; text-shadow:0 1px 10px rgba(0,0,0,.45); }

#header .ss-slider { position:absolute; top:0; left:0; margin:0; width:100%; height:100vh; z-index:1; }
#header .ss-slider .swiper-slide { position:relative; width:100%; }
#header .ss-slider .slide-img { width:100%; height:100vh; background:#20180f; overflow:hidden; }
#header .ss-slider .slide-img img { width:100%; height:100vh; object-fit:cover; object-position:50% 50%; }
#header .ss-slider .swiper-slide-active .slide-img img { animation: zoomDown 6.5s linear both; }
#header .ss-slider .swiper-slide.swiper-slide-02 img { object-position:50% 60%; }
#header .ss-slider .swiper-slide.swiper-slide-03 img { object-position:50% 40%; }
#header .ss-slider .swiper-slide:after{
  content:""; position:absolute; top:0; left:0; z-index:2; width:100%; height:100vh;
  background: linear-gradient(180deg, rgba(20,15,10,.34) 0%, rgba(20,15,10,.14) 40%, rgba(20,15,10,.34) 100%);
}
.scroll-cue { position:absolute; z-index:9990; bottom:20px; left:50%; transform:translateX(-50%); }
.scroll-cue span { font-family: var(--font-en); font-size:1.05rem; letter-spacing:.24em; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.scroll-cue::after { content:""; display:block; width:1px; height:40px; margin:8px auto 0; background:rgba(255,255,255,.75); animation: cue 2.2s ease-in-out infinite; transform-origin:top; }
@keyframes cue { 0%{transform:scaleY(0);} 40%{transform:scaleY(1);} 100%{transform:scaleY(0); transform-origin:bottom;} }

/* ---------------- ABOUT ---------------- */
#about { width:100%; padding: 48px 0 60px; }
/* ①全画面ヒーロー画像 */
#about .about_hero { width:100%; height: 56vh; min-height: 340px; overflow:hidden; }
#about .about_hero img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
/* ②施設名＋施設紹介（枠なし・左揃え） */
#about .about_intro { padding: 48px 24px 0; }
#about .about_box { margin: 0 auto; text-align:center; background:none; border:none; box-shadow:none; padding: 0; }
#about .about_box .en { display:block; font-family: var(--font-jp); font-size: 3rem; line-height:1.1; color: var(--ink); font-weight:700; }
#about .about_box .name { font-family: var(--font-jp); font-size: 1.95rem; letter-spacing:.06em; font-weight:500; color: var(--ink); margin-top: 14px; }
#about .about_box .name .sp_br { display: inline; }
#about .about_box .area { font-size: 1.2rem; letter-spacing:.12em; color: var(--ink-soft); }
#about .about_box .area_row { display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; margin-top: 8px; }
#about .about_box .lead { font-family: var(--font-ser); font-size: 1.65rem; line-height:1.8; color: var(--ink); margin: 22px 0 16px; text-align: left; }
#about .about_box .lead br{display:none;}
#about .about_box .lead br.keep{display:inline;}
#about .about_box .txt { font-size: 1.4rem; line-height: 2.05; color: var(--ink-soft); text-align: left; }
#about .about_box .txt br{display:none;}
#about .about_box .about_btn { margin: 0; }
#about .about_box .about_btn a {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-jp); font-size: 1.25rem; letter-spacing: .06em; color: var(--ink);
  border: 1px solid var(--ink); padding: 7px 22px; border-radius: 40px; transition: all .35s;
}
#about .about_box .about_btn a .arw { width: 16px; height: 1px; background: currentColor; position: relative; display: inline-block; }
#about .about_box .about_btn a .arw::after { content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform: rotate(45deg); }
/* ③他5枚：Photo Galleryと同じスライド */
#about .about_gallery { margin-top: 44px; padding-left: 20px; overflow: hidden; }
#about .ab-slider { position:relative; width:100%; height:auto !important; }
#about .ab-slider .swiper-wrapper { height:auto !important; align-items:center; }
#about .ab-slider .swiper-slide { height:auto !important; overflow:hidden; }
#about .ab-slider .swiper-slide img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
#about .ab-swiper-button-next.swiper-button-next, #about .ab-swiper-button-prev.swiper-button-prev {
  width: 38px; height: 38px; margin-top: -19px; background: none; background-image: none; border-radius: 0; box-shadow: none;
}
#about .ab-swiper-button-next.swiper-button-next { right: 8px; }
#about .ab-swiper-button-prev.swiper-button-prev { left: 8px; }
#about .ab-swiper-button-next.swiper-button-next::after, #about .ab-swiper-button-prev.swiper-button-prev::after {
  content: ""; display: block; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff;
  filter: drop-shadow(0 1px 5px rgba(0,0,0,.45));
}
#about .ab-swiper-button-next.swiper-button-next::after { transform: translate(-65%, -50%) rotate(45deg); }
#about .ab-swiper-button-prev.swiper-button-prev::after { transform: translate(-35%, -50%) rotate(-135deg); }
#about .ab-swiper-pagination { display:flex; justify-content:center; margin-top: 20px; }
#about .ab-swiper-pagination .swiper-pagination-bullet { width:7px; height:7px; margin:0 4px !important; background: var(--line); opacity:1; border-radius:50%; }
#about .ab-swiper-pagination .swiper-pagination-bullet-active { background: var(--green); }

/* ---------------- TOPICS ---------------- */
#topics { width:100%; padding: 20px 0 0; }
#topics .topics_head { text-align:left; padding-left: 24px; margin: 0 0 30px; }
#topics .topics_head .en { display:block; font-family: var(--font-jp); font-size: 3rem; line-height:1.1; font-weight: 700; color: var(--ink); }
#topics .topics_head .jp { display:none; }
/* 画像フルブリード＋クリーム地テキストセルを縦にタイル状に配置 */
#topics .topics_in { width:100%; max-width:100%; margin: 0; padding: 0; display:flex; flex-direction:column; }
#topics .topics_in.reverse { flex-direction:column; }
#topics .tp_img { width:100%; margin-bottom: 0; }
#topics .tp_img .swiper-container { overflow:hidden; }
#topics .tp_img .swiper-slide img { width:100%; aspect-ratio:16/10; object-fit:cover; }
#topics .tp_txt { width:100%; background: #fff; padding: 38px 24px 42px; }
#topics .topics_in.reverse .tp_txt { background: var(--cream); }
#topics .tp_txt .midashi { margin-bottom: 22px; }
#topics h2.midashi .sub { display:inline-block; font-family: var(--font-en); font-size: 1.25rem; letter-spacing:.12em; font-weight:500; color:#fff; background:#3d3228; padding: 8px 20px; border-radius: 40px; margin-bottom: 14px; }
#topics h2.midashi .sub i { font-style:normal; font-size:1.1em; margin-left:6px; vertical-align:0; }
#topics h2.midashi .en { display:block; font-family: var(--font-en); font-size: 2.7rem; line-height:1.15; letter-spacing:.03em; font-weight:700; color: var(--ink); text-transform:uppercase; }
#topics h2.midashi .main { display:block; font-family: var(--font-ser); font-size: 1.7rem; line-height:1.65; letter-spacing:.06em; font-weight:500; color: var(--ink-soft); margin-top: 8px; }
#topics h2.midashi .main br{display:none;}
#topics .tp_txt .lead { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 1.4rem; line-height: 2.05; color: var(--ink-soft); }
.sw-pg { position:absolute; z-index:9; bottom:30px !important; left:0; width:100%; display:flex; justify-content:center; }
#topics .swiper-pagination-bullet { width:7px; height:7px; margin:0 4px !important; background:rgba(255,255,255,.7); opacity:1; border-radius:50%; }
#topics .swiper-pagination-bullet-active { background:#fff; }

/* ---------------- PLAN ---------------- */
#spplan { width:100%; padding: 60px 0 66px; background: var(--cream-2); border-top:1px solid var(--cream-3); border-bottom:1px solid var(--cream-3); }
#spplan .plan_head { text-align:left; padding-left: 24px; margin-bottom: 34px; }
#spplan .plan_head .en { display:block; font-family: var(--font-jp); font-size: 3rem; line-height:1.1; font-weight: 700; color: var(--ink); }
#spplan .plan_head .jp { display:none; }
#spplan .plan_list { width:100%; max-width:100%; margin:0 auto; padding: 0 24px; display:flex; flex-direction:column; gap: 30px; }
#spplan .plan_wp { width:100%; background: var(--cream); display:flex; flex-direction:column; box-shadow:0 12px 26px rgba(40,30,20,.09); }
#spplan .plan_wp .img { width:100%; overflow:hidden; }
#spplan .plan_wp .img img { width:100%; aspect-ratio:25/16; object-fit:cover; }
#spplan .plan { display:flex; flex-direction:column; padding: 24px 22px 24px; }
#spplan .plan .p_label { align-self:flex-start; font-size: 1.15rem; letter-spacing:.12em; color: var(--green-d); border:1px solid var(--green); border-radius:2px; padding:4px 12px; margin-bottom: 14px; }
#spplan .plan .p_ttl { font-family: var(--font-ser); font-size: 1.65rem; line-height:1.6; font-weight:500; margin-bottom: 20px; }
a.plan_rate { display:block; width:100%; padding: 17px 0; text-align:center; background: var(--green); color:#fff !important; border:1px solid var(--green); font-family: var(--font-jp); font-size: 1.65rem; letter-spacing:.04em; transition: all .3s; }
a.plan_rate:hover { background: var(--green-d); }
.plan_rate b { font-size: 1.95rem; line-height:1.3; }
.off { display:block; line-height:1.3; }
.off strong{ font-size:1.25rem !important; display:block; }
/* 2段目（ポイント割引後）：割引額だけ少し大きく／上段との行間を詰める */
.shousai{ font-size:1.45rem !important; line-height:1.3; margin-top:2px; display:block; }
.shousai b{ font-size:1.85rem !important; }
.shousai .ll{ display:none !important; }
.shousai .s{ font-size:1.45rem !important; }
.shousai .after_point_rate, .after_point_rate { font-size:2.3rem !important; font-weight:700; }

/* ---------------- GALLERY ---------------- */
#pg { width:100%; padding: 66px 0 60px; padding-left: 24px; overflow:hidden; }
#pg .ttl { text-align:left; margin-bottom: 22px; }
#pg .ttl .en { display:block; font-family: var(--font-jp); font-size: 3rem; line-height:1.1; font-weight: 700; color: var(--ink); }
#pg .ttl .jp { display:none; }
#pg .pg-slider { position:relative; width:100%; height:auto !important; }
#pg .pg-slider .swiper-wrapper { height:auto !important; align-items:center; }
#pg .pg-slider .swiper-slide { height:auto !important; overflow:hidden; }
#pg .pg-slider .swiper-slide img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
#pg .pg-swiper-button-next.swiper-button-next, #pg .pg-swiper-button-prev.swiper-button-prev {
  width: 38px; height: 38px; margin-top: -19px; background: none; background-image: none; border-radius: 0; box-shadow: none;
}
#pg .pg-swiper-button-next.swiper-button-next { right: 8px; }
#pg .pg-swiper-button-prev.swiper-button-prev { left: 8px; }
#pg .pg-swiper-button-next.swiper-button-next::after, #pg .pg-swiper-button-prev.swiper-button-prev::after {
  content: ""; display: block; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff;
  filter: drop-shadow(0 1px 5px rgba(0,0,0,.45));
}
#pg .pg-swiper-button-next.swiper-button-next::after { transform: translate(-65%, -50%) rotate(45deg); }
#pg .pg-swiper-button-prev.swiper-button-prev::after { transform: translate(-35%, -50%) rotate(-135deg); }
#pg .swiper-pagination-bullet { width:7px; height:7px; margin:0 4px !important; background: var(--line); opacity:1; border-radius:50%; }
#pg .swiper-pagination-bullet-active { background: var(--green); }
.pg-swiper-pagination { position: static; margin-top: 22px; display:flex; justify-content:center; }

/* ---------------- ACCESS ---------------- */
#access { width:100%; padding: 0; display:flex; flex-direction:column; align-items:center; background: var(--cream-2); border-top:1px solid var(--cream-3); }
#access .ttl { text-align:left; width:100%; padding-left: 24px; margin: 60px 0 26px; }
#access .ttl .en { display:block; font-family: var(--font-jp); font-size: 3rem; line-height:1.1; font-weight: 700; color: var(--ink); }
#access .ttl .jp { display:none; }
.access_box { width:100%; max-width:100%; margin:0 auto; padding: 0 24px; }
.access_info { text-align:center; margin-top: 24px; }
.access_info .ad_name { font-family: var(--font-ser); font-size: 1.7rem; letter-spacing:.06em; margin-bottom: 10px; }
.access_info .ad_txt { font-size: 1.35rem; color: var(--ink-soft); }
.access_info .ad_note { font-size: 1.2rem; line-height:1.85; color: var(--ink-soft); margin-top: 14px; text-align:left; }
.map { width:100%; height: 300px; }
.fukid {font-size:1.2rem; text-align:left; color:#333; width:280px; height:80px;}
.fukid a {color:#333;}

/* ---------------- FOOTER ---------------- */
.ft2 { width:100%; padding: 56px 0 30px; text-align:center; }
.ft2 img { width: 84px; height:auto; margin:0 auto; }
address { font-style:normal; font-size:1.05rem; color:#a99f8c; font-family:helvetica,sans-serif; padding: 14px 0 10px; text-align:center; letter-spacing:.05em; }

#toPageTop { position:fixed; bottom: 16px; right: 16px; z-index:9999; }
#toPageTop a { display:block; width: 42px; height:42px; background: var(--green); position:relative; border-radius:50%; }
#toPageTop a::after { content:""; position:absolute; top:18px; left:50%; width:8px; height:8px; border-top:2px solid #fff; border-right:2px solid #fff; transform:translateX(-50%) rotate(-45deg); }

.pc_none{display:block;}