@charset "UTF-8";
/* =========================================================================
   HOTEL PATIO 固有の上書き
   -------------------------------------------------------------------------
   雛形（旧ソフィアサイト）から持ってきた common/css/*.css は「原本のまま」残し、
   パティオ向けの差分だけをこのファイルに書く。将来 雛形側を再取得しても
   ここだけ当て直せば済むようにするため。原本CSSを直接編集しないこと。
   2026-08-27 作成
   ========================================================================= */

/* =========================================================================
   共通カラートークン（2026-08-28 追加）
   -------------------------------------------------------------------------
   もとは料金ページ用 patio-price.css の .ptPrice スコープにだけ定義していたが、
   ヘッダー等の共通パーツからも使うため :root へ引き上げた。
   🔴 値を変えるときはここ1か所だけ直す（patio-price.css 側は再定義しない）。
   ========================================================================= */
:root {
    --ptp-ink: #221f1d;       /* 基準の濃色（文字・ヘッダー背景） */
    --ptp-sub: #6f6a66;       /* 補助テキスト */
    --ptp-line: #e8e3dd;      /* 罫線 */
    --ptp-soft: #faf8f6;      /* 薄い背景 */
    --ptp-acc: #a1854f;       /* アクセント（真鍮色） */
    --ptp-acc-soft: #f8f3e9;  /* アクセントの薄色 */
}

/* ---- キービジュアル ------------------------------------------------------
   🔴 2026-08-29 ここにあった #topImg .mainImg.pt-bg01〜05 の指定は削除した。
      front-page.php のスライドは class="mainImg bg001" 形式で、pt-bg** という
      クラスは一度も出力されていない＝完全な死にコードだった。
      現在のキービジュアル（2枚）の指定は common/css/patio-front.css にある。 */
/* ---- キービジュアルの文字 ------------------------------------------------ */
#topImg .key__inner .txtNewyear {
    font-family: 'Playfair Display', "游明朝", YuMincho, serif;
    letter-spacing: .14em;
}

/* ---- トップの下部CTA（雛形は「空室状況はこちら」→ パティオは電話） -------- */
#topImg .topBtn {
    letter-spacing: .06em;
}

/* ---- SWELL 側との衝突を最小化 -------------------------------------------- */
/* 雛形 style.css の html,body{font:...} が投稿ページの書体も上書きするため、
   SWELL の記事本文だけは SWELL 側の指定に戻す */
.l-mainContent .post_content,
.l-mainContent .post_content p,
.l-mainContent .post_content li {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
    line-height: 1.9;
}

/* ---- 固定ページ本文（SWELLテンプレを使う間の見え方を最低限整える） -------- */
.l-mainContent .post_content {
    font-size: 1rem;
}

/* =========================================================================
   2026-08-27 修正① ヘッダーが一瞬表示されて消える
   -------------------------------------------------------------------------
   原因：common/js/script_common.js の $("#header").autofix_anything() が
   SWELL のラッパー構造（#body_wrap > #content.l-content）でオフセットを
   誤計算し、ヘッダーにインラインstyleを当てて画面外へ飛ばしていた。
   対策：意図した「上部固定」状態を !important で確定させる
   （stylesheet の !important はインラインstyleに勝つ）。
   ========================================================================= */
#header {
    position: fixed !important;
    top: 44px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    z-index: 1000 !important;
    transition: top .25s ease !important;
}
/* 2026-09-11: ページ最上部のときだけ #ptTopBarPc（44px。2行キャッチのため高さ確保）分下にずらす。
   スクロールしたら #ptTopBarPc が隠れるので #header を top:0 に詰める。 */
body.pt-scrolled #header {
    top: 0 !important;
}

/* autofix_anything が差し込む場所取り要素を無効化 */
.autofix_placeholder,
#header + .autofix_placeholder {
    display: none !important;
    height: 0 !important;
}

/* 1000px 以下は雛形の設計どおり #headerSp を使う */
@media only screen and (max-width: 1000px) {
    #header { display: none !important; }
}

/* =========================================================================
   2026-08-27 修正② 横幅を全体に広げる
   -------------------------------------------------------------------------
   原因：SWELL の #content が .l-container（--container_size: 1200px）で
   絞られ、さらに -sidebar-on で右にサイドバー領域を確保していた。
   （サイドバーのウィジェットは削除済みで中身が無い）
   ========================================================================= */

/* サイドバーは使わない */
.l-content > .l-sidebar,
#sidebar,
.l-sidebar {
    display: none !important;
}

.-sidebar-on .l-content {
    display: block !important;
}

/* コンテンツのコンテナ幅制限を解除 */
#content.l-content,
#content.l-content.l-container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
}

.l-mainContent {
    max-width: none !important;
    width: 100% !important;
}

/* トップ：キービジュアルを最上部から。固定ヘッダーの下に潜らせる */
#body_wrap.home #content.l-content {
    padding-top: 0 !important;
}

#body_wrap.home .l-mainContent__inner {
    max-width: none !important;
    padding: 0 !important;
}

/* トップ以外：固定ヘッダー(90px)ぶんを空け、本文は読みやすい幅を保つ
   ------------------------------------------------------------------
   2026-08-28 改訂：ヘッダー分の 90px は #body_wrap で1回だけ確保する。
   以前は #content 側に 90px を持たせていたが、パンくず(#breadcrumb の
   padding-top:60px + top:59px)と見出し帯(#headline の top:90px)でも
   同じ補正が二重・三重にかかり、パンくずと見出し帯の間に 130px 前後の
   空白ができていた。 */
#body_wrap:not(.home) {
    padding-top: 134px; /* #ptTopBarPc(44px) + #header(90px)。2026-09-11 */
}

#body_wrap:not(.home) #content.l-content {
    padding-top: 16px !important;
}

#body_wrap:not(.home) .l-mainContent__inner {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2em 5% !important;
}

/* フッターは全ページ全幅 */
.l-footer,
.l-footer__inner {
    max-width: none !important;
    width: 100% !important;
}

.l-footer .l-container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
}
/* =========================================================================
   2026-08-27 ロゴをパティオのものへ差し替え
   -------------------------------------------------------------------------
   雛形の images/logo_Header.svg（ソフィアのロゴ）は原本のまま残し、
   参照だけ logo_patio.svg に切り替える。
   元ロゴは 239.8×134.1、新ロゴは 292.9×163.8 でどちらも約1.79:1。
   雛形は background-size:70px 70px（正方形）で潰していたため contain に変更。
   ========================================================================= */
/* ?v= はロゴ差し替え時のキャッシュ対策。同名で上書きするため、
   差し替えたら日付を更新すること（2026-08-29 新ロゴに再差し替え） */
#header .logoArea h2 a,
#header .logoArea h1 a,
#header .logoAreaSmall h2 a,
#header .logoAreaSmall h1 a {
    background-image: url(../images/logo_patio.svg?v=20260829) !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* 2026-09-11: #ptTopBarSp（28px）の分だけ #headerSp を下にずらす。
   スクロールしたら #ptTopBarSp が隠れるので #headerSp を top:0 に詰める
   （PC側の #header と同じ仕組み。body.pt-scrolled は common/js/pt-topbar.js が付け外し）。 */
#headerSp {
    top: 28px !important;
    transition: top .25s ease !important;
}

body.pt-scrolled #headerSp {
    top: 0 !important;
}

/* 2026-09-08: スマホヘッダーのロゴ。位置・ボックスは先方指定の値。
   🔴 画像は logo_Header-sp.svg（パティオ支給・viewBox 389.8x54.4 ≒ 7.16:1）。
      雛形の header_logo-sp.svg は旧サイト（HOTEL Sophia リゾート館）のロゴなので使わない。
      横長のため background-size は contain（100x35 固定だと縦に潰れる）。
   2026-09-11: left を画面幅に対する % 指定にしていたため、幅の狭いスマホでは
   ハンバーガーメニュー（#headerSp a.btnMenu、左0〜60px）とロゴが重なっていた。
   ハンバーガーの右端(60px)から固定オフセットで配置する方式に変更。
   🔴 このとき親テーマ header_sub.css 側の margin-left:-65px が残っていたため
   実質 left 66px - margin-left 65px ≒ 1px にしかならず、ロゴがハンバーガーの
   さらに手前まで戻ってしまっていた（同日中に発覚・即修正）。margin-left:0 で
   明示的に打ち消し、ハンバーガー右端から10px空けた left:70px に固定する。 */
#headerSp .logoArea {
    position: absolute;
    top: 8px;
    left: 70px;
    margin-left: 0;
    z-index: 1001;
}

#headerSp .logoArea h1 a,
#headerSp .logoArea h2 a {
    position: relative;
    display: block;
    width: 120px;
    height: 35px;
    background: url(../images/logo_Header-sp.svg?v=20260908b) center center / contain no-repeat;
}
/* =========================================================================
   2026-08-28 パンくず（#breadcrumb）の是正
   -------------------------------------------------------------------------
   SWELL のパンくずは <div id="breadcrumb" class="p-breadcrumb"> を出力するため、
   雛形（旧ソフィアサイト）の common/css/style.css の #breadcrumb 系ルールが
   ID 一致で丸ごと当たってしまい、下記3点が起きていた。
     (1) 家アイコンが2つ出る
         … 雛形 style.css:819 の li:first-child a:before（FontAwesome \f015）と、
           SWELL の <span class="__home icon-home"> が重複。雛形側を消す。
     (2) 上下の余白が過大（padding:60px 12% 30px ＋ position:relative; top:59px）
     (3) 区切り記号が出ない
         … 雛形 style.css:812 の li:after が FontAwesome の \f105 を指すが、
           このテーマ構成ではウェブフォントが当たらず空白になる。素の文字に置換。
   雛形の原本CSSは編集せず、ここで上書きする（全ページ共通）。
   ========================================================================= */

/* (1) 雛形由来の家アイコンを消す（SWELL の .icon-home を残す） */
#breadcrumb.p-breadcrumb li:first-child a::before {
    content: none !important;
    padding-right: 0 !important;
}

/* (2) 余白を詰める。ヘッダー分の逃げは #body_wrap 側で確保済みなので top は 0 */
#breadcrumb.p-breadcrumb {
    top: 0 !important;
    padding: 12px 5% !important;
    border-top: none !important;
    text-align: left !important;
}

#breadcrumb.p-breadcrumb .p-breadcrumb__list {
    margin: 0 auto !important;
}

/* (3) 区切りと並びを SWELL 本来の形（HOME > 客室・施設）に戻す
   ------------------------------------------------------------------
   雛形 style.css:810 の #breadcrumb li{display:inline-block;height:20px}
   が SWELL の .p-breadcrumb__item{display:inline-flex;gap:.5em} を
   ID 優先度で潰していたため、項目の間隔が無くなり、区切りのシェブロン
   （SWELL は clip-path で描画）も出ていなかった。
   さらに style.css:812 が li:after の content を FontAwesome の字形に
   置き換えており、そのウェブフォントが当たらず空白になっていた。
   → SWELL 側の値をここで復元する。 */
#breadcrumb.p-breadcrumb .p-breadcrumb__list {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: .7em !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    overflow: visible !important;
    text-align: left !important;
}

#breadcrumb.p-breadcrumb .p-breadcrumb__item {
    display: inline-flex !important;
    align-items: center !important;
    gap: .7em !important;
    height: auto !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    letter-spacing: .02em !important;
    color: #6f6a66 !important;
}

/* 区切り：SWELL のシェブロン（clip-path 描画）をそのまま使う */
#breadcrumb.p-breadcrumb .p-breadcrumb__item::after {
    content: "" !important;
    font-family: inherit !important;
    font-size: 0 !important;
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: currentcolor !important;
    -webkit-clip-path: polygon(45% 9%, 75% 51%, 45% 90%, 30% 90%, 60% 50%, 30% 10%);
    clip-path: polygon(45% 9%, 75% 51%, 45% 90%, 30% 90%, 60% 50%, 30% 10%);
    opacity: .5 !important;
}

#breadcrumb.p-breadcrumb .p-breadcrumb__item:last-child::after {
    content: none !important;
    display: none !important;
}

/* リンクの下線・高さ指定（雛形由来）を解除 */
#breadcrumb.p-breadcrumb .p-breadcrumb__text {
    height: auto !important;
    line-height: 1.6 !important;
    border-bottom: none !important;
    color: inherit !important;
}

#breadcrumb.p-breadcrumb a.p-breadcrumb__text:hover { color: #221f1d !important; }

/* 家アイコン（SWELL の .icon-home）のサイズを本文に合わせる */
#breadcrumb.p-breadcrumb .__home::before {
    font-size: 14px !important;
    opacity: .8;
}

/* 見出し帯の押し下げ（雛形 style.css の #headline{top:90px}）を解除。
   ヘッダー分は #body_wrap の padding-top で確保済み。 */
#body_wrap:not(.home) #headline {
    top: 0 !important;
}

/* 1000px 以下は #header が非表示になり、代わりに高さ50pxの #headerSp（fixed）になる。
   逃がす高さもそれに合わせる（90pxのままだと40px分の空白が残る）。 */
@media only screen and (max-width: 1000px) {
    #body_wrap:not(.home) { padding-top: 78px; } /* #ptTopBarSp(28px) + #headerSp(50px)。2026-09-11 */
    #breadcrumb.p-breadcrumb { padding: 10px 4% !important; }
    #body_wrap:not(.home) #content.l-content { padding-top: 12px !important; }
}

/* =========================================================================
   2026-09-11 ページ最上部だけ表示するトップバー（#ptTopBarPc / #ptTopBarSp）
   -------------------------------------------------------------------------
   ヘッダーナビ（#header / #headerSp）の上に、キャッチ文言＋言語切替（GTranslate）
   だけを乗せた薄いバーを新設。ページ最上部（scrollY=0）のときだけ見え、
   スクロールすると隠れて #header/#headerSp が top:0 に詰まる。
   表示/非表示は common/js/pt-topbar.js が付け外しする body.pt-scrolled で判定
   （バー自身の実際の重なりを見ているわけではなく、共通の1フラグに揃えている）。
   ========================================================================= */
#ptTopBarPc,
#ptTopBarSp {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1001 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    box-sizing: border-box;
    transition: transform .25s ease, opacity .2s ease;
}

body.pt-scrolled #ptTopBarPc,
body.pt-scrolled #ptTopBarSp {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* PC：2行キャッチのため高さ44px */
#ptTopBarPc {
    height: 44px;
    padding: 0 30px;
}

#ptTopBarPc .ptTopBar__catch {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .02em;
    color: var(--ptp-ink, #221f1d);
}

#ptTopBarPc .ptTopBar__lang {
    flex: 0 0 auto;
}

@media only screen and (max-width: 1000px) {
    #ptTopBarPc { display: none !important; }
}

/* SP：1行キャッチのため高さ28px */
#ptTopBarSp {
    display: none;
    height: 28px;
    padding: 0 4%;
    z-index: 1002 !important; /* #headerSp(1001系)より前面に */
}

#ptTopBarSp .ptTopBar__catch {
    margin: 0;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: .01em;
    color: var(--ptp-ink, #221f1d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#ptTopBarSp .ptTopBar__lang {
    flex: 0 0 auto;
    max-width: 40%;
    overflow: hidden;
}

/* GTranslate が書き込む <select>（gt-wrapper-*）を1行の狭い帯に収める。
   2026-09-11: 親を font-size:0 にして潰す方法は select 内の文字（Japanese等）まで
   消えてしまい、矢印だけ残って崩れて見えたため撤回。select 自体を縮小する。 */
#ptTopBarSp .ptTopBar__lang select {
    max-width: 100%;
    font-size: 10px !important;
    line-height: 1.3 !important;
    padding: 1px 2px !important;
    white-space: nowrap;
}

@media only screen and (max-width: 1000px) {
    #ptTopBarSp { display: flex !important; }
}

/* =========================================================================
   2026-08-28 ヘッダー右上を「Instagram・電話番号・宿泊予約」の横1列に
   -------------------------------------------------------------------------
   雛形の header_sub.css:207 は .snsArea を flex-direction:column（アイコン列の
   下に電話ボタン）にしているため、行方向へ変更する。
   マークアップは common/inc/header.php 側で3要素だけに整理済み。
   ========================================================================= */
#header .snsArea {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    top: 22px !important;
    right: 30px !important;
}

/* script_common.js が .autofix_sb.fixed を付けても1列を維持する */
#header.autofix_sb.fixed .snsArea {
    display: flex !important;
    flex-direction: row !important;
    top: 22px !important;
}

/* Instagram（アイコンのみ） */
#header .snsArea .ptHead__ig {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    color: #c79f62;
    font-size: 20px;
    line-height: 1;
    border: 1px solid rgba(199, 159, 98, .55);
    border-radius: 50%;
    text-decoration: none;
    transition: color .3s, border-color .3s, background-color .3s;
}

#header .snsArea .ptHead__ig:hover {
    color: #fff;
    border-color: #fff;
    background-color: rgba(255, 255, 255, .08);
}

/* 電話番号（既存の枠付きスタイルを踏襲しつつ高さを揃える） */
#header .snsArea .phoneArea {
    height: 36px;
    padding: 0 14px !important;
    font-size: 17px;
    letter-spacing: .03em;
    white-space: nowrap;
}

#header .snsArea .phoneArea a {
    color: inherit;
    text-decoration: none;
}

/* 宿泊予約（Booking.com） */
#header .snsArea .ptHead__book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 20px;
    flex: 0 0 auto;
    background-color: #c79f62;
    border: 1px solid #c79f62;
    color: #1f1b19;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .3s, border-color .3s, color .3s;
}

#header .snsArea .ptHead__book:hover {
    background-color: #e7ba65;
    border-color: #e7ba65;
    color: #1f1b19;
}

/* 1列にした分だけ横幅を取るので、狭いPC幅ではグローバルナビと当たらないよう詰める */
@media only screen and (max-width: 1400px) {
    #header .snsArea { gap: 10px !important; right: 16px !important; }
    #header .snsArea .ptHead__ig { width: 32px; height: 32px; font-size: 18px; }
    #header .snsArea .phoneArea { height: 32px; padding: 0 10px !important; font-size: 15px; }
    #header .snsArea .ptHead__book { height: 32px; padding: 0 14px; font-size: 13px; }
}

/* =========================================================================
   2026-08-28 ヘッダーの配色を「黒背景・白文字」に
   -------------------------------------------------------------------------
   雛形（header_sub.css:24,26,32,82）は こげ茶背景 rgb(47 29 21) ＋
   金色文字 #c79f62 / #e7ba65 の想定。原本は編集せずここで上書きする。
   グローバルナビの英語ラベル（Price / Guest Room …）は
   common/inc/header.php 側からマークアップごと削除済み。
   ========================================================================= */

/* 背景（スクロール追従で付く .autofix_sb.fixed 状態も同色に）
   色は共通トークン --ptp-ink（#221f1d）。第2引数は var が解決できない
   ブラウザ向けのフォールバック。 */
#header,
#header.autofix_sb.fixed,
.top-page #header {
    background: var(--ptp-ink, #221f1d) !important;
}

/* ロゴ左のキャッチコピー
   2026-08-31 h1 → p.ptHead__catch に変更（H1 は各ページ1つに統一。トップはキービジュアル）。
   雛形 header_sub.css:32（PC）/ :350（SP）は h1 を指しているため、同じ見た目になる指定を
   ここで持つ。雛形CSSは触らない。 */
#header .title_top p.ptHead__catch {
    position: absolute;
    display: inline;
    top: 27%;
    left: 8%;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #fff !important;
}

#headerSp p.ptHead__catch {
    position: absolute;
    display: block;
    z-index: 1003;
    top: 5px;
    right: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1;
    /* 2026-09-08 金色 #c39345 → 白（黒背景で読みづらいため） */
    color: #fff !important;
}

/* =========================================================================
   2026-09-08 スマホヘッダー（#headerSp）の視認性
   -------------------------------------------------------------------------
   雛形 header_sub.css は黒背景に金色（#b78e0b / #c39345）を載せているが、
   実機で読みづらいため白に統一。電話番号は先方指示で 22px に拡大する。
   雛形CSSは触らず、後から読まれるこのファイルで上書きする。
   ========================================================================= */

/* ハンバーガーメニュー（3本線） */
#headerSp a.btnMenu { color: #fff !important; }
#headerSp a.btnMenu span.lineTop,
#headerSp a.btnMenu span.lineMiddle,
#headerSp a.btnMenu span.lineBottom {
    background: #fff !important;
}

/* 電話番号 */
#headerSp .language { color: #fff !important; }
#headerSp .language ul li a,
#headerSp .language ul li a:hover {
    font-size: 22px !important;
    line-height: 1.1;
    color: #fff !important;
}
#headerSp .language ul li a i {
    font-size: 20px;
    line-height: 1.1;
    color: #fff !important;
}

/* ハンバーガーを開いたときのメニュー（#menu ＝ jQuery.mmenu が .mm-menu 化する）
   雛形 style.css:482 が金色 #b78e0b を当てているので白に上書き。
   電話番号行・Instagram行、行頭のアイコン（:before は color 継承）も含めて白になる。 */
#menu.mm-menu .mm-listview > li a:not(.mm-next),
.mm-menu .mm-listview > li a:not(.mm-next),
#menu .mm-listview > li > a.tel,
#menu .mm-listview > li > a.en {
    color: #fff !important;
}

/* 2026-09-11 ナビをロゴ直後に詰める
   雛形 header_sub.css:75,78 は .navArea{text-align:center} ＋ ul.navi{margin-left:10%;max-width:900px}
   で「残りスペースの中央」に寄せる設計のため、ロゴとの間に大きな余白ができていた。
   左寄せに変更し、ロゴのすぐ右から始まるようにする。 */
#header .navArea {
    text-align: left !important;
}

#header .navArea ul.navi {
    margin-left: 0 !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
}

/* グローバルナビ */
#header .navArea ul.navi li a,
#header .navArea ul.navi li span.en {
    color: #fff !important;
}

#header .navArea ul.navi a:hover,
#header .navArea ul.navi a:hover span.en,
#header .navArea ul.navi li:hover a,
#header .navArea ul.navi li:hover a span.en {
    color: #fff !important;
    opacity: .72;
}

#header .navArea ul.navi li:hover a:after {
    background: rgba(255, 255, 255, .45) !important;
}

/* 英語ラベルを外したぶん、日本語ラベルをリンク領域の中央に置き直す */
#header .navArea ul.navi li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#header .navArea ul.navi li span.en {
    line-height: 1.3 !important;
}

/* Instagram：枠・アイコンとも白 */
#header .snsArea .ptHead__ig {
    color: #fff !important;
    border-color: #fff !important;
}

#header .snsArea .ptHead__ig:hover {
    color: #fff !important;
    border-color: #fff !important;
    background-color: rgba(255, 255, 255, .18) !important;
}

/* 電話番号：枠・アイコン・数字とも白（border は currentcolor 指定のため color で決まる） */
#header .snsArea .phoneArea {
    color: #fff !important;
    border-color: #fff !important;
}

#header .snsArea .phoneArea a,
#header .snsArea .phoneArea i {
    color: #fff !important;
}

/* 宿泊予約：背景白・文字黒 */
#header .snsArea .ptHead__book {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
}

#header .snsArea .ptHead__book:hover {
    background-color: #e2e2e2 !important;
    border-color: #e2e2e2 !important;
    color: #000 !important;
}

/* =========================================================================
   2026-08-28 ヘッダーロゴを拡大
   -------------------------------------------------------------------------
   雛形 header_sub.css:34-36 は logoArea を left:6%/margin-left:-60px、
   ロゴ枠を 80x70px（背景 70x70）で置いていた。SVG の比率は
   292.9:163.8 ≒ 1.79:1 なので、80px 枠だと実表示は 80x45px にしかならない。
   枠を広げ、あわせて左マージンを px 固定にして左へ寄せ、
   隣のキャッチコピー（.title_top p.ptHead__catch）をその分だけ右にずらす。
   ヘッダー高は 90px のままなので、縦は最大 70px 程度に収める。
   ========================================================================= */
#header .logoArea {
    top: 12px !important;
    left: 20px !important;
    margin-left: 0 !important;
    width: auto !important;
}

#header .logoArea h2 {
    width: 120px !important;
    height: 67px !important;
}

#header .logoArea h2 a {
    width: 120px !important;
    height: 67px !important;
    background-size: contain !important;
    background-position: left center !important;
}

/* ロゴを広げたぶん、キャッチコピーの開始位置も px 固定でずらす
   （% 指定のままだと画面幅によってロゴに重なる） */
#header .title_top p.ptHead__catch {
    left: 150px !important;
}

/* 画面幅が狭いPCではグローバルナビと当たるので少し戻す */
@media only screen and (max-width: 1300px) {
    #header .logoArea { left: 14px !important; }
    #header .logoArea h2,
    #header .logoArea h2 a { width: 100px !important; height: 56px !important; }
    #header .title_top p.ptHead__catch { left: 126px !important; }
}

/* =========================================================================
   2026-08-28 ページ見出し帯（共通クラス .pt-hero）
   -------------------------------------------------------------------------
   雛形の #headline は「白い薄幕＋黒文字」前提で、写真を敷くと読めない。
   下層ページで使い回せるよう、暗幕＋白文字の見出し帯をここに1つだけ持つ。
   使い方： <div id="headline" class="pt-hero" style="background-image:url(...)">
              <div class="inner wow fadeIn"><h1>アクセス</h1><p>ACCESS</p></div>
            </div>
   ========================================================================= */
#headline.pt-hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--ptp-ink, #221f1d);
}

#headline.pt-hero::after {
    background: linear-gradient(180deg, rgba(20, 17, 15, .32), rgba(20, 17, 15, .64));
    opacity: 1;
}

#headline.pt-hero::before {
    border-color: rgba(255, 255, 255, .5);
    opacity: .7;
}

#headline.pt-hero .inner {
    color: #fff;
    text-align: center;
}

#headline.pt-hero h1 {
    font-family: 'Playfair Display', "游明朝", YuMincho, "Hiragino Mincho ProN", serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.3;
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

#headline.pt-hero p {
    font-family: 'Playfair Display', serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .28em;
    line-height: 1;
    margin: 14px 0 0;
    color: #ecdfc4;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

@media only screen and (max-width: 767px) {
    #headline.pt-hero h1 { font-size: 22px; letter-spacing: .1em; }
    #headline.pt-hero p { font-size: 10px; letter-spacing: .22em; margin-top: 10px; }
}

/* 2026-09-11 トップ「諏訪で人気のホテルパティオ」見出し・本文のフォント指定 */
#w_about .imgReco h2,
#w_about .imgReco .info_text {
    font-family: 'Playfair Display', "游明朝", YuMincho, "Hiragino Mincho ProN", serif;
}

/* =========================================================================
   2026-09-11 フッターを3分割（①ホテル情報 ②決済について ③予約）
   -------------------------------------------------------------------------
   列数は SWELL 側が footer_box1〜3 の有効ウィジェット数から自動算出する
   （w-footer.-col3）。ここでは各カラム内の見た目だけ調整する。
   ========================================================================= */

/* ①ホテル情報：左寄せ／GoogleMap・Instagram アイコン */
.patio-fInfo,
.patio-fInfo p {
    text-align: left !important;
}

.patio-fInfo .__note {
    font-size: 12px;
}

.patio-fIcons {
    display: flex;
    gap: 14px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.patio-fIcons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #fff;
    font-size: 16px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    text-decoration: none;
    transition: color .3s, border-color .3s, background-color .3s;
}

.patio-fIcons a:hover {
    color: var(--ptp-acc, #a1854f);
    border-color: var(--ptp-acc, #a1854f);
    background-color: rgba(255, 255, 255, .08);
}

/* ②決済について：説明文＋カード会社アイコン */
.patio-fPayText {
    margin: 0 0 14px;
    color: #fff;
    font-size: 12px;
    line-height: 1.7;
    opacity: .85;
    text-align: left !important;
}

.patio-fPay {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 42px;
    color: #fff;
    opacity: .85;
}

/* ③予約：Booking.com ボタン＋TEL（ボタンの下に配置） */
.patio-fBookBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    background-color: #c79f62;
    border: 1px solid #c79f62;
    color: #1f1b19 !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .3s, border-color .3s;
}

.patio-fBookBtn:hover {
    background-color: #e7ba65;
    border-color: #e7ba65;
}

.patio-fTel {
    margin: 14px 0 0;
    text-align: left !important;
}

.patio-fTel a {
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
}

@media only screen and (max-width: 767px) {
    .patio-fTel a {
        font-size: 19px;
    }
}

.patio-fTel a:hover {
    color: var(--ptp-acc, #a1854f);
}

/* =========================================================================
   2026-09-11 #pagetop（ページトップへ戻るボタン）が黒っぽく見える件
   -------------------------------------------------------------------------
   親テーマの .c-fixBtn は素の状態でも opacity:.75（半透明の白背景）。
   ページ下部の濃い背景の上に乗ると、透けて暗く＝黒っぽく見える。
   さらに .hov-bg-main:hover は background-color を var(--color_main)
   （#04384c 濃紺）に反転し、.c-fixBtn:hover は opacity:1 にする仕様のため、
   スマホのタップ残留（:hover 化）で押した後は完全に濃紺＝黒に見えていた。
   常に「不透明な白背景・濃紺文字」で固定し、状態に関わらず黒くならないようにする。
   ========================================================================= */
#pagetop.c-fixBtn {
    opacity: 1 !important;
    background-color: #fff !important;
    color: var(--color_main) !important;
}
#pagetop.hov-bg-main:hover {
    background-color: #fff !important;
    color: var(--color_main) !important;
}

/* =========================================================================
   2026-09-14 お知らせ一覧（/topics/）リスト型のサムネイル幅
   -------------------------------------------------------------------------
   雛形（親テーマ）build/css/main.css は
   .-type-list .p-postList__thumb{width:36%} / .p-postList__body{width:60%}
   （隙間4%はflexの space-between で確保）。先方指示で36%→20%に縮小し、
   本文側を60%→76%に広げて同じ隙間4%を維持する。親テーマCSSは編集しない。
   ========================================================================= */
.-type-list .p-postList__thumb {
    width: 20% !important;
}

.-type-list .p-postList__body {
    width: 76% !important;
}