6 种房型
套房
半露天温泉套房
拾级而上,迎接您的是宽敞的客厅。
树木几乎贴近大窗,
让您尽享与自然和谐相融的旅居时光。
户型图请见此处
*不接待幼儿(同床)。
*两位成人,或两位成人加一位儿童入住,可更为宽敞舒适。
*客房入口处设有台阶;上楼后室内为平层设计。
/* --- 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
ご予約