@charset "UTF-8";
/* ============================================================
   海と小料理 結（Iima00112）案件用の上書き専用CSS
   テンプレ本体（style.css / common.css）は変更せず、ここで上書きする
   ============================================================ */

/* ------------------------------------------------------------
   1. メインカラー #006888（HS「カラー：メインカラー」）
   ------------------------------------------------------------ */
:root {
    --brand: #006888;
    --brand-dark: #004b63;
    --brand-deep: #0d2b34;
    --brand-ink: #005472;
    --brand-on-dark: #8fc4d6;
    --ink: #16262c;
}

/* --- 地の色：テンプレ既定のテクスチャを、質感を保ったままブランド色系へトーン変更 ---
   同じ色相のまま、面の役割で明度を段階分けする（濃い順）：
     ヘッダー/フッター/SPドロワー/PC追従ヘッダー  #05485e … 画面を囲む枠。写真と主張を取り合わない濃さ
     ボタン・追従予約ボタン                        #006888 … HS指定色そのもの。一番明るいブランド面＝CTA
     店舗情報の和紙                                #d5e4e9
     body の地                                     #e9f1f3
     TOPメニューのテキスト面                       #f8fbfc                                   */
header,
footer {
    background-image: url(../img/bg_ptn1_brand.jpg);
}

body {
    background-image: url(../img/bg_ptn2_brand.jpg);
}

.txt {
    background-image: url(../img/bg_ptn3_brand.jpg);
}

.info {
    background-image: url(../img/bg_ptn5_brand.jpg);
}

.btn {
    background-image: url(../img/bg_ptn4_brand.jpg);
    background-size: 400px;
    transition: opacity .2s;
}

.btn:hover {
    opacity: .82;
}

/* PC追従ヘッダー：テンプレ既定の黒 → ヘッダーと同じブランド色（不透明なので写真に重なっても読める） */
.persist-header {
    background: #05485e;
}

/* SPドロワー：テンプレ既定の黒 → ヘッダーと同じブランド地に統一 */
.drawer-nav {
    background-color: transparent;
    background-image: url(../img/bg_ptn1_brand.jpg);
    background-size: 350px;
}

/* 下層ページMVの覆い：ニュートラルな黒 → ブランド寄りの濃色 */
.kv_second div {
    background: rgba(4, 44, 58, .58);
}

/* --- 文字色・罫線 --- */
/* 本文の黒を、わずかに青緑に寄せた濃色へ（テンプレ既定は純黒） */
body,
a,
.info dl a {
    color: var(--ink);
}

/* 英字の見出し（NEWS など）はブランド色＋短い罫線 */
.top-news h2,
.movie h2,
.access h2 {
    color: var(--brand);
}

.top-news h2::after,
.access h2::after {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    margin: 14px auto 0;
    background: var(--brand);
}

/* 和文のキャッチコピーは可読性を優先し、ブランド寄りの濃色で締める */
.intro h2,
.txt h2,
.ttl {
    color: var(--brand-deep);
}

/* 店舗情報テーブル：見出し列をブランド色、罫線もブランド寄りに */
dl.shop-info dt {
    color: var(--brand-ink);
}

.info dl dd,
dl.shop-info dd {
    border-bottom-color: rgba(0, 104, 136, .18);
}

footer dl.shop-info dt {
    color: var(--brand-on-dark);
}

footer .info dl dd,
footer dl.shop-info dd {
    border-bottom-color: rgba(255, 255, 255, .16);
}

/* メニュー下層ナビのアイコン */
ul.lcmenu li i {
    color: var(--brand);
}

/* ギャラリーの丸窓にブランド色の細いリング */
.gallery-list img {
    box-shadow: 0 0 0 2px rgba(0, 104, 136, .16);
}

/* アクセント文字（ページトップ・小見出し・カレント） */
#page-top a,
h4,
.current,
.course dl dt.price + dd {
    color: var(--brand);
}

/* 追従ボタン（電話予約）：テンプレ既定の赤 → ブランド色 */
.float a {
    background: var(--brand);
}

.float a:hover {
    background: var(--brand-dark);
}

/* こだわり見出しの下線・フォーム送信ボタンもブランド色に統一 */
.ttl:after {
    border-bottom-color: var(--brand);
}

.current {
    border-bottom-color: var(--brand);
}

.CMS-FORM-GROUP input[type="submit"] {
    background: var(--brand);
}

/* PCヘッダーの「ご予約・お問い合わせ」バッジ：ヘッダーがブランド色になったのでベタ塗りだと埋もれる。
   細い枠の抜きチップにして、隣の電話番号（クリーム）と競合させない */
@media screen and (min-width: 768px) {
    header .inner p span {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .45);
        color: #fff;
        border-radius: 2px;
    }
}

/* ------------------------------------------------------------
   2. 下層ページMV（.kv_second）：テンプレ既定 bg_kv2.jpg は実体が無いため案件画像に差し替え
   ------------------------------------------------------------ */
.kv_second {
    background-image: url(../img/page-mv.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ------------------------------------------------------------
   3. TOP メニュー各セクションの背景（PC）：案件画像へ差し替え
      テンプレ既定は food1.jpg / drink1.jpg / course.jpg（実体なし）/ lunch1.jpg
   ------------------------------------------------------------ */
@media screen and (min-width: 768px) {
    .top-course .bg {
        background-image: url(../img/top-menu-4.jpg);
    }

    .top-food .bg {
        background-image: url(../img/top-menu-1.jpg);
    }

    .top-drink .bg {
        background-image: url(../img/top-menu-2.jpg);
    }

    .top-lunch .bg {
        background-image: url(../img/top-menu-3.jpg);
    }
}

/* ------------------------------------------------------------
   4. TOPギャラリーのループスライダー：枠に対して中央基準でトリミング（見切れ防止）
   ------------------------------------------------------------ */
#loopslider ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ------------------------------------------------------------
   5. ロゴのサイズ上限（縦長ロゴでヘッダーが崩れる／MVに被るのを防ぐ）
   ------------------------------------------------------------ */
@media screen and (min-width: 768px) {
    header h1 {
        width: auto;
        display: flex;
        align-items: center;
    }

    header h1 img {
        width: auto;
        max-width: 220px;
        max-height: 84px;
        height: auto;
    }
}

@media screen and (max-width: 767px) {
    /* 左の言語切替ウィジェット（〜114px）と右のハンバーガー（319px〜）に挟まれた
       安全域の中で中央寄せする。全幅で中央寄せすると両者に重なって欠ける。 */
    header h1 {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        padding: 0 62px 0 120px;
    }

    header h1 img {
        width: auto;
        max-width: 100%;
        max-height: 42px;
        height: auto;
    }
}