/* 海音の宿 しおね：墨・ワイン・金、明朝。右端に縦型の予約ボタン */
:root{--bg:#f6f2ea;--ink:#1b1a18;--mute:#6b665c;--line:#ddd5c6;--accent:#5e1f33;--accent-ink:#fff;--sub:#1b1a18;--sub-ink:#f6f2ea;
  --head-font:"Shippori Mincho",serif;--en-font:"Cormorant Garamond",serif}
.site-header{padding-right:150px}
.side-book{position:fixed;z-index:45;top:0;right:0;width:110px;display:flex;flex-direction:column}
.side-book a{display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-family:var(--head-font);letter-spacing:.4em;color:#fff}
.side-book .b1{background:var(--accent);height:220px;font-size:17px}
.side-book .b2{background:rgba(27,26,24,.88);height:150px;font-size:14px}
.sec-t .en{color:#b8975a}
.row .en,.card .tag{color:#b8975a}

/* トップのヒーロー */
.hero{position:relative;height:100vh;min-height:560px;max-height:940px;overflow:hidden;color:#fff}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 60%,rgba(0,0,0,.45) 100%)}
.hero .best{position:absolute;z-index:3;right:130px;top:92px;width:118px;height:118px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--accent);display:grid;place-items:center;text-align:center;font-family:var(--head-font);font-size:12px;line-height:1.5;align-content:center}
.hero .best b{display:block;font-size:17px}
.hero .copy{position:absolute;z-index:3;right:170px;bottom:90px;writing-mode:vertical-rl;font-family:var(--head-font);font-size:34px;line-height:2;letter-spacing:.3em;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.hero .hero-en{position:absolute;z-index:3;left:44px;bottom:48px;font-size:15px;opacity:.9}
.hero .search{position:absolute;z-index:3;left:44px;bottom:90px;display:flex;background:rgba(255,255,255,.95);color:var(--ink);font-size:13px}
.hero .search span{padding:16px 22px;border-right:1px solid #ddd}
.hero .search a{padding:16px 26px;background:var(--accent);color:#fff}

@media (max-width:1100px){
  .site-header{padding-right:16px}
  .side-book{display:none}
}
@media (max-width:760px){
  .hero .best,.hero .search{display:none}
  .hero .copy{right:26px;bottom:120px;font-size:26px}
  .hero .hero-en{left:20px;bottom:100px;font-size:12px}
}
/* PCでは右端の予約バーのぶん本文を空ける */
@media (min-width:1101px){
  body{padding-right:110px}
  .site-header{right:110px;padding-right:44px}
}