@charset "utf-8";
/* ==========================================================================
   亀の井別荘  style.css
   旧サイト（Geeklog + UIkit3 + Bootstrap3 + Unify）の見た目を、実測値どおりに
   素の CSS で再現したもの。クラス名は旧サイトの本文マークアップに合わせている。
   切替幅：Bootstrap系 768 / 992 / 1200、UIkit系 640 / 960 / 1200
   ========================================================================== */

:root {
  --mincho: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  --song: "SimSun", "Songti SC", "Songti TC", "PMingLiU", "MingLiU", serif;
  --en: "Lusitana", serif;
  --brown: #9c8061;
  --brown-dark: #81674b;
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 10px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); }
body {
  margin: 0; background: #fff; color: #666;
  font-family: var(--mincho); font-size: 15px; line-height: 1.42857143;
  overflow-x: clip; /* 旧サイトはスマホで横に5pxはみ出して左右に揺れていたのを防ぐ */
}
p, ul, ol, li, a, blockquote, button { font-family: var(--mincho); }
a { color: #006; text-decoration: none; background-color: transparent; transition: .3s linear; cursor: pointer; }
a:hover, a:focus { color: var(--brown); text-decoration: underline; }
a img { transition: .3s linear; }
a img:hover { opacity: .8; }
img, iframe, svg, video { vertical-align: middle; }
img, video, canvas { max-width: 100%; height: auto; box-sizing: border-box; }
img, iframe { border: 0; }
p { margin: 0 0 10px; }
ul, ol { margin-top: 0; margin-bottom: 10px; padding-left: 30px; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
dl { margin-top: 0; margin-bottom: 20px; }
dt, dd { line-height: 1.42857143; }
dt { font-weight: 700; }
dd { margin-left: 0; }
strong, b { font-weight: 700; }
em { color: #aaa !important; }
h1 span, h2 span, h3 span, h4 span, h5 span, p span, li span, dt span, dd span { display: inline-block; }
::selection { color: #fff; background: #e74c3c; }
small { font-size: 85%; opacity: .7; display: inline-block; }
address { margin-bottom: 20px; font-style: normal; line-height: 1.42857143; }
hr { height: 0; margin: 30px 0; border: 0; border-top: 1px solid #eee; box-sizing: content-box; }
table { border-collapse: collapse; border-spacing: 0; background-color: transparent; }
td, th { padding: 0; }
section { padding: 15px 0; display: block; }
main { display: block; }
@media (max-width: 500px) {
  p { font-size: 90%; line-height: 150%; }
}

/* 見出し（旧サイトは見出し・メニュー・住所だけ宋朝体の指定） */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, address { font-family: var(--song) !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: normal; color: #555; margin-top: 5px; margin-bottom: 10px; }
h1 { font-size: 28px; line-height: 35px; }
h2 { font-size: 24px; line-height: 33px; }
h3 { font-size: 20px; line-height: 27px; }
h4 { font-size: 18px; line-height: 25px; }
h5 { font-size: 16px; line-height: 20px; }
h6 { font-size: 14px; line-height: 20px; }
.h2 { font-size: 30px; line-height: 1.1; margin-top: 20px; color: #666; }
@media (max-width: 768px) { h3 { font-size: 16px; } }

.en, .en a, .en2, .en2 a { font-family: var(--en) !important; font-weight: normal; }
.en a, .en a:hover { color: #888; }
h1 span.en, h2 span.en, h3 span.en, h4 span.en, h5 span.en { font-size: 85%; opacity: .7; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ふわっと表示（旧 wow.js fadeIn） */
.is-wow { visibility: hidden; }
.is-wow.is-shown { visibility: visible; animation-name: wow-fade; animation-fill-mode: both; }
@keyframes wow-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Bootstrap 3 相当：グリッド ---------- */
.container { margin-right: auto; margin-left: auto; padding-right: 10px; padding-left: 10px; }
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
.container-fluid { margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; }
.row { margin-right: -15px; margin-left: -15px; }
.container::before, .container::after, .container-fluid::before, .container-fluid::after,
.row::before, .row::after, .clearfix::before, .clearfix::after { content: " "; display: table; }
.container::after, .container-fluid::after, .row::after, .clearfix::after { clear: both; }

[class*="col-xs-"], [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"] { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.col-xs-6, .col-xs-12 { float: left; }
.col-xs-6 { width: 50%; }
.col-xs-12 { width: 100%; }
@media (min-width: 768px) {
  .col-sm-3, .col-sm-4, .col-sm-6, .col-sm-8, .col-sm-12 { float: left; }
  .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.33333333%; } .col-sm-6 { width: 50%; }
  .col-sm-8 { width: 66.66666667%; } .col-sm-12 { width: 100%; }
  .col-sm-offset-3 { margin-left: 25%; }
}
@media (min-width: 992px) {
  .col-md-2, .col-md-3, .col-md-4, .col-md-6, .col-md-9, .col-md-10 { float: left; }
  .col-md-2 { width: 16.66666667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333333%; }
  .col-md-6 { width: 50%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33333333%; }
  .col-md-offset-1 { margin-left: 8.33333333%; }
}
@media (min-width: 1200px) {
  .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-6 { float: left; }
  .col-lg-2 { width: 16.66666667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33333333%; } .col-lg-6 { width: 50%; }
}

/* 表示の出し分け（Bootstrap 3） */
.visible-xs, .visible-sm { display: none !important; }
@media (max-width: 767px) { .visible-xs { display: block !important; } .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .visible-sm { display: block !important; } .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }

/* 文字揃え・余白などの小さな部品 */
.text-center, .uk-text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right, .uk-text-right { text-align: right !important; }
.uk-text-bold { font-weight: 700; }
.aligncenter { text-align: center; }
.mt20 { margin-top: 20px; } .mt30 { margin-top: 30px; } .mt40 { margin-top: 40px; }
.mb20 { margin-bottom: 20px; } .mb30 { margin-bottom: 30px; } .mb40 { margin-bottom: 40px; }
.margin-top-20 { margin-top: 20px; }
.margin-bottom-20 { margin-bottom: 20px; } .margin-bottom-30 { margin-bottom: 30px; }
.margin-bottom-40 { margin-bottom: 40px; } .margin-bottom-50 { margin-bottom: 50px; }
@media (max-width: 991px) { .md-margin-bottom-40 { margin-bottom: 40px !important; } }
/* 旧サイトの空の本文枠ぶんの余白（トップのフッター手前） */
.page-home #main-content::after { content: ""; display: block; height: 1px; }
@media (max-width: 959px) { .page-home #main-content::after { height: 11px; } }
.g-mb-10 { margin-bottom: 10px !important; }
.content-sm { padding-top: 60px; padding-bottom: 60px; }

.img-responsive { display: block; max-width: 100%; height: auto; }
.img-responsive img { max-width: 100%; height: auto; }
.img-responsive-center { max-width: 100%; height: auto; }
.list-unstyled, .list-inline { padding-left: 0; list-style: none; }
.list-inline { margin-left: -5px; }
.list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; }
.btn-block { display: block; width: 100%; }

/* ---------- Unify のボタン（茶色テーマ） ---------- */
.btn-u {
  border: 0; color: #fff; font-size: 14px; cursor: pointer; font-weight: 400; padding: 6px 13px;
  position: relative; background: var(--brown); white-space: nowrap; display: inline-block; text-decoration: none;
}
.btn-u:hover, .btn-u:focus { color: #fff; background: var(--brown-dark); text-decoration: none; transition: all .3s ease-in-out; }
.btn-u.btn-block { text-align: center; }
.btn-u-xs, a.btn-u-xs { font-size: 12px; padding: 2px 12px; line-height: 18px; }
.btn-u.btn-u-default { background: #95a5a6; }
.btn-u.btn-u-default:hover, .btn-u.btn-u-default:focus { background: #7f8c8d; }
.btn-u.btn-brd { color: #555; background: none; padding: 5px 13px; border: 1px solid var(--brown); }
.btn-u.btn-brd:hover, .btn-u.btn-brd:focus { background: none; color: var(--brown-dark); border-color: var(--brown-dark); }
.btn-u.btn-brd.btn-u-default { border-color: #95a5a6; }
.btn-u.btn-brd.btn-u-default:hover { color: #7f8c8d; border-color: #7f8c8d; }
.btn_detail_white, .btn_detail_black { width: 80px; }
a.btn_detail_white { color: #fff !important; }
.rounded { border-radius: 4px !important; }

/* UIkit のボタン（客室詳細「この部屋を予約する」など） */
.uk-button {
  display: inline-block; box-sizing: border-box; margin: 0; padding: 0 30px; vertical-align: middle; border: 1px solid transparent;
  font-size: 14px; line-height: 38px; text-align: center; text-decoration: none; text-transform: uppercase; transition: .1s ease-in-out;
}
.uk-button-secondary { background-color: #222; color: #fff; }
.uk-button-secondary:hover, .uk-button-secondary:focus { background-color: #151515; color: #fff; }
a.uk-button[target=_blank]::after { content: "\f0da"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: .3em; display: inline-block; }

/* ---------- UIkit 相当：余白・グリッド ---------- */
.uk-margin { margin-bottom: 20px; }
* + .uk-margin { margin-top: 20px !important; }
.uk-margin-top { margin-top: 20px !important; }
.uk-margin-bottom { margin-bottom: 20px !important; }
.uk-margin-large { margin-bottom: 40px; }
* + .uk-margin-large { margin-top: 40px !important; }
@media (min-width: 1200px) { .uk-margin-large { margin-bottom: 70px; } * + .uk-margin-large { margin-top: 70px !important; } }
.uk-margin-large-bottom { margin-bottom: 40px !important; }
@media (min-width: 1200px) { .uk-margin-large-bottom { margin-bottom: 70px !important; } }
.uk-margin-small-bottom { margin-bottom: 10px !important; }

.uk-container { display: flow-root; box-sizing: content-box; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
@media (min-width: 640px) { .uk-container { padding-left: 30px; padding-right: 30px; } }
@media (min-width: 960px) { .uk-container { padding-left: 40px; padding-right: 40px; } }
.uk-container .uk-container { padding-left: 0; padding-right: 0; }
.uk-container-small { max-width: 900px; }
.uk-section { display: flow-root; box-sizing: border-box; padding-top: 40px; padding-bottom: 40px; }
@media (min-width: 960px) { .uk-section { padding-top: 70px; padding-bottom: 70px; } }
.uk-section-small { padding-top: 40px; padding-bottom: 40px; }
.uk-inline { display: inline-block; position: relative; max-width: 100%; vertical-align: middle; -webkit-backface-visibility: hidden; }
.uk-hidden { display: none !important; }
.uk-inline-clip { display: inline-block; position: relative; max-width: 100%; vertical-align: middle; overflow: hidden; }
.uk-position-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 100%; box-sizing: border-box; }
.uk-transition-fade { opacity: 0; transition: .3s ease-out; transition-property: opacity, transform; }
.uk-transition-toggle:hover .uk-transition-fade, .uk-transition-toggle:focus .uk-transition-fade { opacity: 1; }
[uk-icon*="icon: plus"] { display: inline-block; width: 40px; height: 40px; color: #fff;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect fill='%23fff' x='9' y='1' width='1' height='17'/%3E%3Crect fill='%23fff' x='1' y='9' width='17' height='1'/%3E%3C/svg%3E") center / 40px 40px no-repeat; }

/* uk-grid（data-grid の代わりにクラスで判定） */
[class*="uk-child-width"] { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; margin-left: -30px; }
[class*="uk-child-width"] > * { margin: 0; padding-left: 30px; box-sizing: border-box; }
[class*="uk-child-width"] > :not([class*="col-"]) { width: 100%; }
[class*="uk-child-width"] > * > :last-child { margin-bottom: 0; }
[class*="uk-child-width"].uk-grid-small { margin-left: -15px; }
[class*="uk-child-width"].uk-grid-small > * { padding-left: 15px; }
/* 2行目以降の上余白：親を上へずらして1行目の余白を打ち消す（旧 UIkit の uk-grid-margin と同じ見た目） */
[class*="uk-child-width"] { margin-top: -30px; }
[class*="uk-child-width"] > * { margin-top: 30px; }
[class*="uk-child-width"].uk-grid-small { margin-top: -15px; }
[class*="uk-child-width"].uk-grid-small > * { margin-top: 15px; }
[class*="uk-child-width"].uk-flex-center { justify-content: center; }
/* 子要素に Bootstrap の列指定（col-*）があるときは、そちらの幅が優先（旧サイトと同じ） */
@media (min-width: 640px) {
  .uk-child-width-1-2\@s > :not([class*="col-"]) { width: 50%; }
}
@media (min-width: 960px) {
  .uk-child-width-1-3\@m > :not([class*="col-"]) { width: 33.32%; }
  .uk-child-width-1-4\@m > :not([class*="col-"]) { width: 25%; }
}
@media (min-width: 1200px) {
  .uk-child-width-1-6\@l > :not([class*="col-"]) { width: 16.66%; }
}

/* ==========================================================================
   ヘッダー（全ページ共通・partials/header.html）
   ========================================================================== */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 980; }
.site-header__bar { position: relative; background: transparent; transition: background-color .3s ease, box-shadow .3s ease; }
.site-header__bar.is-fixed {
  position: fixed; top: 0; left: 0; right: 0; z-index: 980;
  background-color: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
  animation: hdr-slide-top .3s ease-out both;
}
@keyframes hdr-slide-top { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.site-header__inner { display: flex; justify-content: space-between; align-items: flex-start; padding-right: 10px; min-height: 95px; }
.site-header__logo { margin: 5px 0 10px; padding: 0 15px; height: 80px; display: flex; align-items: center; }
.site-header__logo a { display: flex; align-items: center; }
.site-header__logo img { margin-left: 20px; height: 40px; width: auto; }
.site-header__logo img:hover { opacity: 1; }
.gnav { display: flex; margin: 15px 0 0; padding: 0; list-style: none; }
.gnav > li { position: relative; display: flex; }
.gnav > li > a {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 80px; padding: 0 15px;
  font-family: var(--song) !important; font-size: 14px; line-height: 20px; color: #888; transition: color .1s ease-in-out, background-color .1s ease-in-out;
}
.gnav > li > a:hover { color: #aaa; }
.is-fixed .gnav > li > a { color: #444; }
.is-fixed .gnav > li > a:hover { color: #aaa; }
/* 英語版の切替（JA / EN）は2026-10-22に外した。右端の余白は以前と同じ20px */
.gnav > li:last-child { margin-right: 20px; }
.gnav__dd {
  display: none; position: absolute; top: calc(100% - 12px); left: 0; z-index: 1020; width: 200px; padding: 5px;
  background: #fff; opacity: .8; box-shadow: 0 5px 12px rgba(0, 0, 0, .15);
}
.gnav > li:hover > .gnav__dd, .gnav > li:focus-within > .gnav__dd { display: block; }
.gnav__dd ul { margin: 0; padding: 0; list-style: none; }
.gnav__dd li + li { margin-top: 10px; }
.gnav__dd a { display: block; padding: 2px 10px; font-size: 13px; line-height: 1.42857143; color: #999; }
.gnav__dd a:hover { color: #eee; background: #000; text-decoration: none; }
.gnav a:hover, .offcanvas a:hover, .site-header__logo a:hover, .offcanvas__logo a:hover,
.uk-button:hover, .btn-u:hover, .btn-u:focus { text-decoration: none; }
.hdr-toggle {
  display: none; align-items: center; justify-content: center; box-sizing: border-box; min-height: 40px; width: 50px; padding: 0 15px;
  margin: 5px 0 0; border: 0; background: none; color: #999; cursor: pointer;
}
.hdr-toggle:hover { color: #666; }
.hdr-toggle svg { width: 20px; height: 20px; display: block; }

/* 翻訳（Elfsight Website Translator） */
/* メニューは右寄せ（旧サイトと同じ。翻訳ボタンはメニューのすぐ右＝以前 JA/EN があった位置） */
.site-header__inner > nav { margin-left: auto; }
.hdr-translate { display: flex; align-items: center; min-height: 80px; margin: 15px 20px 0 20px; }
.gnav > li:last-child { margin-right: 0; }
@media (max-width: 959px) {
  .hdr-translate { min-height: 40px; margin: 5px 0 0 auto; }
  .site-header__inner { min-height: 50px; height: 50px; }
  .gnav { display: none; }
  .hdr-toggle { display: flex; }
  .site-header__logo { padding: 0 2px; height: 40px; min-height: 40px; }
  .site-header__logo img { height: 30px; }
  .site-header__bar.is-fixed { padding: 5px; }
}

/* スマホ用メニュー（全画面） */
.offcanvas { position: fixed; inset: 0; z-index: 1000; visibility: hidden; }
.offcanvas.is-open { visibility: visible; }
.offcanvas__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .1); opacity: 0; transition: opacity .3s; }
.offcanvas.is-open .offcanvas__overlay { opacity: 1; }
.offcanvas__bar {
  position: absolute; top: 0; bottom: 0; left: -100%; width: 100%; padding: 20px; overflow-y: auto;
  background: #fff; color: rgba(0, 0, 0, .5); transition: left .3s ease-out;
}
.offcanvas.is-open .offcanvas__bar { left: 0; }
.offcanvas__logo { margin: 5px 0 10px; text-align: center; line-height: 35px; }
.offcanvas__logo img { display: inline-block; width: 226px; height: 48px; vertical-align: middle; }
.offcanvas__close { position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; padding: 5px; border: 0; background: none; color: rgba(0, 0, 0, .5); cursor: pointer; }
.offcanvas__close svg { display: block; width: 14px; height: 14px; }
.offcanvas__nav { margin: 0; padding: 0; list-style: none; text-align: center; }
.offcanvas__nav li:first-child { margin-top: 20px; }
/* 押しやすさのため旧サイト（15px・行の高さ約31px）より大きく：18px・行の高さ約54px（2026-10-23 依頼者の指摘） */
.offcanvas__nav a { display: block; padding: 14px 0; color: rgba(0, 0, 0, .5); font-size: 18px; line-height: 1.42857143; }
.offcanvas__nav a:hover { color: rgba(0, 0, 0, .7); }
body.is-offcanvas-open { overflow: hidden; }

/* 下層ページの上の余白（ヘッダー分） */
.gl-subpageheader { min-height: 60px; }

/* ==========================================================================
   大きな写真の段（top_visual）
   ========================================================================== */
section.top_visual {
  padding: 0; margin: 32px 0 10px; position: relative; height: 100vh; overflow: hidden;
  background-repeat: no-repeat; background-size: cover; background-position: center center;
}
section.top_visual.gl-top-margin { margin-top: -60px; }
@media (max-width: 768px) { section.top_visual { height: 80vh; } }
.top_visual > .top_visual_caption {
  position: absolute; top: 0; width: 100%; min-height: 400px; padding: 25px 0 80px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
}
.top_visual > .top_visual_caption h1, .top_visual > .top_visual_caption h1 small,
.top_visual > .top_visual_caption h2, .top_visual > .top_visual_caption h2 small,
.top_visual > .top_visual_caption p { color: #fff; }
@media (max-width: 768px) { .top_visual > .top_visual_caption h1 { font-size: 20px; } }

/* 下へ送る丸ボタン */
.scroll {
  position: relative; display: inline-block; width: 60px; height: 60px; padding: 15px 0 0; z-index: 200;
  font-size: 14px; line-height: 120%; text-align: center; color: #ddd !important;
  background: rgba(0, 0, 0, .4); border-radius: 50% !important;
}
.scroll:hover { text-decoration: none; color: #333 !important; background: rgba(240, 240, 240, .9); }
a.scroll::after {
  position: absolute; content: ""; display: inline-block; left: 18px; bottom: 22px; width: 25px; height: 25px; margin: auto;
  border-bottom: 1px solid #aaa; border-right: 1px solid #aaa; transform: rotate(45deg);
}
#top_slider .scroll, #top_goaisatsu .scroll, .top_visual .scroll { position: absolute; bottom: 80px; left: 50%; margin-left: -30px; }

/* 段ごとの背景写真（旧 custom.css のとおり） */
#top_ryokan_villa { background-image: url(/assets/img/orig/e__mg_5107.jpg); }
#top_ryokan_bandb { background-image: url(/assets/img/orig/7_0320_e.jpg); }
#top_cuisine { background-image: url(/assets/img/orig/b_01_.jpg); background-position: 25% center; }
#top_spa { background-image: url(/assets/img/orig/1_02_.jpg); background-position: 25% center; }
#top_yunotakean { background-image: url(/assets/img/orig/e_kamenoi_yunotakean_015.jpg); background-position: 25% center; }
#top_cafe { background-image: url(/assets/img/orig/f_cafe_0411_005.jpg); }
#top_bar { background-image: url(/assets/img/orig/9_yamaneko_0411_002.jpg); }
#top_kagiya { background-image: url(/assets/img/orig/e_kamenoi_kagiya_009.jpg); }
#ryokan_top { background-image: url(/assets/img/orig/a_07_.jpg); }
#ryokan_top > .top_visual_caption { padding-top: 100px; }
#ryokan_cuisine { background-image: url(/assets/img/orig/2_08_.jpg); }
#ryokan_cuisine .top_visual_caption { padding-top: 100px; }
#ryokan_cuisine_1 { background-image: url(/assets/img/orig/3_09_.jpg); }
#ryokan_cuisine_2 { background-image: url(/assets/img/orig/8_10_.jpg); }
#ryokan_cuisine_3 { background-image: url(/assets/img/orig/a_11_.jpg); }
#spa_top { background-image: url(/assets/img/orig/d_kamenoi_2015_yokujyo_001.jpg); background-position: 35% center; }
#spa_top .top_visual_caption { padding-top: 100px; }
#spa_1 { background-image: url(/assets/img/orig/4_0320_w.jpg); }
#spa_2 { background-image: url(/assets/img/orig/9_0320_x.jpg); }
#spa_3 { background-image: url(/assets/img/orig/8_kamenoi_photo_010.jpg); background-position: 35% center; }
#yunotakean_top { background-image: url(/assets/img/orig/e_kamenoi_yunotakean_007_upd.jpg); background-position: 35% center; }
#yunotakean_top .top_visual_caption { padding-top: 100px; }
#yunotakean_1 { background-image: url(/assets/img/orig/f_kamenoi_photo_002.jpg); }
#yunotakean_2 { background-image: url(/assets/img/orig/a_kamenoi_photo_003.jpg); }
#yunotakean_3 { background-image: url(/assets/img/orig/e_kamenoi_yunotakean_001.jpg); background-position: 35% center; }
#cafe_top { background-image: url(/assets/img/orig/2__mg_7616.jpg); }
#cafe_top.top_visual > .top_visual_caption { padding-top: 100px; }
#cafe_1 { background-image: url(/assets/img/orig/d_kamenoi_cafe_003.jpg); }
#cafe_2 { background-image: url(/assets/img/orig/e_kamenoi_2015_cafe_002.jpg); }
#cafe_3 { background-image: url(/assets/img/orig/0_kamenoi_photo_008.jpg); }
#cafe_3.top_visual > .top_visual_caption { padding-top: 100px; }
#cafe_4 { background-image: url(/assets/img/orig/1_yamaneko2_0411_001.jpg); }
#kagiya_top { background-image: url(/assets/img/orig/c_kamenoi_kagiya_007.jpg); }
#kagiya_top.top_visual > .top_visual_caption { padding-top: 100px; }
#kagiya_1 { background-image: url(/assets/img/orig/3_kagiya_0411_007.jpg); }
#kagiya_2 { background-image: url(/assets/img/orig/8_kagiya_00.jpg); }
#facility_top { background-image: url(/assets/img/orig/8_kamenoi_photo_001.jpg); }
#facility_top > .top_visual_caption { padding-top: 100px; }
#topics_top.top_visual { background-image: url(/assets/img/orig/9_kamenoi_2015_flont_020.jpg); height: 30vh; margin-bottom: 20px; }
#topics_top.top_visual > .top_visual_caption { padding-top: 80px; }
#access_top.top_visual { background-image: url(/assets/img/orig/d_dsc05648.jpg); height: 30vh; margin-bottom: 20px; }
#access_top.top_visual > .top_visual_caption { padding-top: 80px; }
#room_top.top_visual { background-image: url(/assets/img/orig/6_kamenoi_2015aki_014.jpg); background-position: center 75%; height: 10vh; margin-bottom: 20px; }
#room_top.top_visual > .top_visual_caption { padding-top: 20px; }
#info_top.top_visual { background-image: url(/assets/img/orig/e_kamenoi_2015aki_065.jpg); background-position: center 75%; height: 30vh; margin-bottom: 20px; }
#info_top.top_visual > .top_visual_caption { padding-top: 100px; }

/* ==========================================================================
   トップページ
   ========================================================================== */
/* MV スライダー（フェード・7秒ごと・16:9） */
#top_slider { position: relative; padding: 0; margin: 0 0 10px; min-height: 30vh; }
.hero { position: relative; overflow: hidden; width: 100%; height: max(56.25vw, 30vh); background: #000; }
.hero__items { margin: 0; padding: 0; list-style: none; position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s linear; z-index: 0; }
.hero__slide.is-active { opacity: 1; z-index: 1; }
.hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hero__nav {
  position: absolute; top: 50%; z-index: 3; padding: 5px 10px; border: 0; background: none; cursor: pointer; transform: translateY(-50%);
  color: rgba(255, 255, 255, .7); opacity: 0; transition: opacity .1s, color .1s ease-in-out;
}
.hero__nav svg { display: block; }
.hero__nav--prev { left: 15px; }
.hero__nav--next { right: 15px; }
.hero:hover .hero__nav, .hero__nav:focus { opacity: 1; }
.hero__nav:hover { color: #fff; }
#top_slider .scroll { z-index: 5; }

/* お知らせ（アコーディオン） */
#top_news { padding: 15px 0; }
.news-acc { margin: 0; padding: 0; list-style: none; }
.news-acc > li + li { margin-top: 20px; }
.news-acc summary {
  display: block; position: relative; padding-right: 30px; cursor: pointer; list-style: none;
  font-size: 14px; line-height: 1.4; color: #333;
}
.news-acc summary::-webkit-details-marker { display: none; }
.news-acc summary::after {
  content: ""; position: absolute; right: 0; top: 0; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Crect fill='%23666' width='13' height='1' x='0' y='6'/%3E%3Crect fill='%23666' width='1' height='13' x='6' y='0'/%3E%3C/svg%3E") 50% 50% no-repeat;
}
.news-acc details[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Crect fill='%23666' width='13' height='1' x='0' y='6'/%3E%3C/svg%3E");
}
.news-acc summary:hover { color: #666; }
.news-acc summary.uk-text-bold { font-weight: 700; }
.news-acc__content { margin-top: 20px; }

/* ご挨拶（背景写真＋文字画像） */
section#top_goaisatsu {
  position: relative; background: url(/assets/img/orig/5_kamenoi_goaisatsu.jpg) no-repeat center center / cover;
  margin-bottom: 10px; min-height: 80vh;
}
#top_goaisatsu img { max-width: 100%; height: auto; animation: fade-in 2s ease-out both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 動画 */
.responsive-video { height: 0; padding-top: 1px; position: relative; padding-bottom: 56.25%; }
.responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* お知らせ一覧（トップ・お知らせページ） */
section#top_topics { background: #f5f5f5; }
.portfolio-items { list-style: none; padding: 0; margin: 0 0 0 15px; }
.portfolio-items > li { float: left; padding: 0; margin: 0; }
/* カードの高さがそろわないとき（iPhoneで題名が3行になる等）に、下の段に穴が空かないよう行の頭を必ず左端から始める
   ※旧サイトは穴が空く作りだった（2026-10-23 修正） */
@media (max-width: 991px) { .portfolio-items > li:nth-child(2n+1) { clear: left; } }
@media (min-width: 992px) { .portfolio-items > li:nth-child(3n+1) { clear: left; } }
.list-items .item-inner { position: relative; text-align: left; padding: 0; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); margin: 0 20px 20px 0; }
.list-items .item-caption { padding: 5px 7px 0; }
.list-items .item-caption p { margin-bottom: 5px; }
.list-items .item-caption.clearfix::after { height: 1px; }
.portfolio-item .item-inner .caption { padding: 0; }
.portfolio-item h3.title { font-size: 14px; line-height: 1.2; margin: 6px 0 8px; font-weight: normal; }
.portfolio-item h3.title a { color: #585f69; font-size: 14px; line-height: 1.2 !important; }
.portfolio-item h3.title a:hover { color: var(--brown); }
.portfolio-item p { padding: 0; margin-bottom: 4px; }
.portfolio-item p.caption { font-size: 12px; color: #999; margin-bottom: 5px; }
@media (max-width: 767px) { .equal-height-column { height: auto !important; } }

/* ==========================================================================
   一覧のサムネイル（客室・施設）
   ========================================================================== */
.thumbnails { }
.thumbnail-style { padding: 7px; margin-bottom: 20px; }
.thumbnail-style:hover { box-shadow: 0 0 8px #ddd; transition: box-shadow .2s ease-in-out; }
.thumbnail-style h3 { margin: 6px 0 8px; }
.thumbnail-style h3 a { color: #585f69; font-size: 14px; line-height: 100% !important; }
.thumbnail-style h4 { font-size: 18px; line-height: 25px; }

/* 客室詳細 */
.h1_normal { color: #555; }
.page_content { padding-top: 80px; }
.page_content h2 { font-size: 26px; margin-bottom: 25px; color: #383339; }
.page_content .h2 { line-height: 1.1; }
.page_content h3 { font-size: 20px; font-weight: bold; color: #383339; margin: 0 0 5px; }
.page_content h4, .page_content h5 { font-size: 14px; font-weight: bold; color: #383339; margin: 0 0 5px; }
.page_content h4 a { font-family: var(--mincho); }
.page_content [class*="uk-child-width"] > [class*="col-"] { float: none; }

/* 料金表などの表 */
.table { width: 100%; max-width: 100%; margin-bottom: 20px; }
.table > tbody > tr > td { padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; }
.table-border { }

/* 施設詳細の情報欄 */
.table_list { border-top: 1px solid #ccc; padding-top: 10px; }
.table_list dt { padding-bottom: 5px; min-width: 130px; float: left; font-weight: normal; }
.table_list dd { border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px; }
@media (max-width: 767px) { .table_list dt { width: 100%; float: none; } }

/* 写真ギャラリー（クリックで拡大） */
.zoomer { display: inline; }
.overlay-zoom { z-index: 90; width: 100%; height: 100%; display: block; cursor: pointer; position: relative; transition: all .1s ease-in-out; }
.overlay-zoom img { display: block; max-width: 100%; height: auto; }
.overlay-zoom .zoom-icon {
  position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; opacity: 0;
  background: #000 url(/assets/img/theme/overlay-icon.png) 50% no-repeat; transform: scale(.9); transition: all .2s ease-in-out;
}
.zoomer:hover .overlay-zoom .zoom-icon { opacity: .4; transform: scale(1); }
@media (max-width: 767px) { .overlay-zoom .zoom-icon { display: none; } }

/* 拡大表示（ライトボックス） */
.lb { position: fixed; inset: 0; z-index: 1010; background: #000; display: none; touch-action: pan-y; }
.lb.is-open { display: block; }
.lb__track { position: absolute; inset: 0; }
.lb__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform .25s ease-out, opacity .25s; }
.lb__item img { max-width: 100%; max-height: 100vh; max-height: 100dvh; width: auto; height: auto; }
.lb.is-single .lb__prev, .lb.is-single .lb__next { display: none; }
.lb__btn { position: absolute; z-index: 2; border: 0; background: none; color: rgba(255, 255, 255, .7); cursor: pointer; padding: 10px; }
.lb__btn:hover { color: #fff; }
.lb__close { top: 10px; right: 10px; width: 40px; height: 40px; }
.lb__close::before, .lb__close::after { content: ""; position: absolute; left: 12px; top: 19px; width: 16px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.lb__close::after { transform: rotate(-45deg); }
.lb__prev, .lb__next { top: 50%; width: 44px; height: 44px; margin-top: -22px; }
.lb__prev { left: 10px; } .lb__next { right: 10px; }
.lb__prev::before, .lb__next::before { content: ""; display: block; width: 14px; height: 14px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; margin: 0 auto; }
.lb__prev::before { transform: rotate(45deg); margin-left: 14px; } .lb__next::before { transform: rotate(-135deg); margin-right: 14px; }

/* ==========================================================================
   お知らせ記事
   ========================================================================== */
.dl-horizontal dd::before, .dl-horizontal dd::after { content: " "; display: table; }
.dl-horizontal dd::after { clear: both; }
@media (max-width: 767px) { .dl-horizontal dd { margin-left: 10px; margin-bottom: 10px; } }
.posts .dl-horizontal { margin-bottom: 15px; overflow: hidden; }
.posts .dl-horizontal a { color: #555; }
.posts .dl-horizontal a:hover { color: var(--brown); }
.posts .dl-horizontal dt { width: 60px; float: left; margin-bottom: 10px; text-align: left; }
.posts .dl-horizontal dt img { width: 60px; height: 60px; padding: 2px; margin-top: 2px; border: 1px solid #ddd; object-fit: cover; }
.posts .dl-horizontal dd { margin-left: 70px; }
.posts .dl-horizontal dd p { margin: 0; }
.posts .dl-horizontal dd a { font-size: 14px; line-height: 16px !important; }
.posts .dl-horizontal:hover dt img, .posts .dl-horizontal:hover dd a { color: var(--brown); border-color: var(--brown) !important; transition: all .2s ease-in-out; }

/* ==========================================================================
   アクセス
   ========================================================================== */
.headline { display: block; margin: 10px 0 25px; border-bottom: 1px dotted #e4e9f0; }
.headline h2 { font-size: 22px; }
.headline h2, .headline h3, .headline h4 { margin: 0 0 -2px; padding-bottom: 5px; display: inline-block; border-bottom: 2px solid #ccc; }
.googlemapWrapper > iframe { width: 100%; height: 450px; border: none; pointer-events: none; }
.access_caption { padding: 12px 5px; min-height: 50px; margin-left: 20px; color: #666; border-left: 2px dotted #999; }
.access_point { display: block; padding: 12px; height: 50px; color: #333; width: 100%; border: 1px solid #ddd; text-align: center; border-radius: 25px; }
.access_point_main { display: block; padding: 12px; color: #fff; width: 100%; background: #333; font-size: 16px; text-align: center; }

/* お問い合わせ（Formzu 埋め込み） */
.page-contact .uk-section iframe { margin-bottom: 10px; }

/* 印刷用地図ページ（旧サイトは見た目の指定が読み込めず崩れていたため、サイト共通の見た目で表示） */
.page-map .googlemapWrapper > iframe { pointer-events: auto; }
@media print { .page-map p.text-center:first-of-type { display: none; } }

/* ==========================================================================
   フッター（partials/footer.html）
   ========================================================================== */
.footer-v2 .footer { padding: 40px 0; background: #f7f7f7; border-top: 3px solid #eee; }
.footer-v2 .footer p { color: #555; }
.footer .ls-index { letter-spacing: 3px; margin-bottom: 10px; }
.footer-logo { margin: 17px 0 20px; color: var(--brown); }
.footer-logo > img { width: 150px; max-width: 100%; height: auto; }
.footer-v2 address { color: #555; line-height: 23px; margin: 20px 0; }
.footer-v2 .headline h2 { color: #585f69; }
h2.heading-sm { font-size: 18px; line-height: 24px; }
.link-list { margin-bottom: 10px; }
.link-list li { border-top: 1px solid #eee; }
.link-list li:first-child { border-top: none !important; }
.link-list a { color: #555; font-size: 11px; padding: 6px 0; display: inline-block; text-transform: uppercase; }
.link-list a:hover { color: var(--brown); }
.link-list li i { color: #bbb; float: right; margin-top: 10px; }
.link-list .fb-icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; }
.footer-v2 .copyright { width: 100%; background: #eee; padding: 20px 0 15px; }
.footer-v2 .copyright p { color: #555; margin-bottom: 0; }

/* 端末で「視差効果を減らす（動きを減らす）」設定の方には動きを止める */
@media (prefers-reduced-motion: reduce) {
  .site-header__bar.is-fixed, #top_goaisatsu img, .is-wow.is-shown { animation: none; }
  .hero__slide, .lb__item, .offcanvas__bar, .offcanvas__overlay { transition: none; }
}

/* お知らせ記事の小見出し・写真の下の余白（旧 custom.css / mediagallery の指定） */
#topics_data h3 { font-size: 18px; }
.mg-overlay-small { padding: 10px; }