6 種房型
suite
半露天溫泉套房
拾級而上,寬敞的客廳隨即映入眼簾。
樹木近在窗前,
讓您享受與自然和諧共生的住宿體驗。
平面圖請點此
*恕不接受幼兒(不佔床)入住。
*適合 2 位成人,或 2 位成人+1 位孩童入住,享受寬敞舒適的空間。
*客房入口設有樓梯。上樓後,室內空間採無障礙平面設計。
/* --- 1. 親要素(基準点)を強制的に設定 --- */
#midashi-css-4 {
position: relative !important; /* ★ここが最重要(他を無視して基準点にする) */
display: block !important; /* 念のためブロック要素として認識させる */
width: 100%; /* 幅もしっかり確保 */
z-index: 1; /* 基準階層を明確にする */
}
/* --- 2. 文字の設定(共通) --- */
#midashi-css-4::after {
content: "72㎡ 定員2名";
display: block;
position: absolute;
z-index: 10;
pointer-events: none;
/* 縦書き設定 */
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
white-space: nowrap;
/* デザイン */
font-size: 13px;
letter-spacing: 0.4em;
color: #313134;
font-family: 'kuramure', 'Noto Serif JP', serif;
line-height: 1;
}
/* --- 3. PCでの位置 (801px以上) --- */
@media screen and (min-width: 801px) {
#midashi-css-4::after {
/* 基準点(#midashi-css-2)が正しく効けば、
top: 0 で「dinner plan」の文字のすぐ上に来るはずです */
/* 以前の設定(上に少し飛び出させる) */
top: -80px !important;
right: 40px !important;
}
}
/* --- 4. スマホでの位置 (800px以下) --- */
@media screen and (max-width: 800px) {
#midashi-css-4::after {
/* 親要素の右上の角に合わせる */
top: 0 !important;
right: 40px !important;
}
}
/* -----------------------------------
① ボタン全体のスタイル(PC版)
----------------------------------- */
.booking-btm-css {
display: flex !important;
margin-left: auto;
margin-right: 40px;
width: 197px;
margin-top:50px!important;
height: 63px;
background: rgba(0,0,0,0);
mix-blend-mode: multiply;
border-radius: 1px;
border: 1px solid #313134;
text-decoration: none;
flex-direction: column;
justify-content: center;
align-items: center;
color: #313134;
cursor: pointer;
/* 今回追加した部分:0.4秒かけて透明度を変化させる */
transition: opacity 0.4s ease;
}
/* ホバー時の設定(透明度を0.6に) */
.booking-btm-css:hover {
opacity: 0.6 !important;
}
/* -----------------------------------
② "Reserve" のスタイル(PC版)
----------------------------------- */
.reserve-en {
font-size: 20px;
letter-spacing: 0.07em;
font-family: 'kuramure', 'Noto Serif JP', 'Noto Serif', serif;
-webkit-font-smoothing: antialiased;
line-height: 1.2;
color: #313134;
}
/* -----------------------------------
③ "ご予約" のスタイル(PC版)
----------------------------------- */
.en-off {
font-size: 12px;
margin-top: 8px;
margin-bottom: 0;
letter-spacing: 0.22em;
font-family: 'kuramure', 'Noto Serif JP', 'Noto Serif', serif;
-webkit-font-smoothing: antialiased;
line-height: 1;
color: #313134;
}
/* -----------------------------------
④ スマホ版(画面幅が768px以下の場合)のスタイル
----------------------------------- */
@media screen and (max-width: 768px) {
.booking-btm-css {
width: calc(100% - 40px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.reserve-en {
font-size: 17px !important;
}
.en-off {
margin-top: 2px !important;
}
}
Reserve
ご予約