@charset "utf-8";
/* ==========================================================================
   custom.css : テンプレ本体(style.css / style_responsive.css)への上書き専用
   Lueur（案件ID Iima00113 / template103）
   ※テンプレ本体CSSは触らず、この1枚に上書きを集約する
   ========================================================================== */


/* --------------------------------------------------------------------------
   body に background の指定が無く、端末のダークモードで本文が沈むため白を明示
   -------------------------------------------------------------------------- */
html,
body {
    background-color: #fff;
}


/* --------------------------------------------------------------------------
   ロゴ（HS＝ロゴ無／おまかせ（テキスト）で作成した仮ロゴ）
   ・PCヘッダーは MV の上（透過）、SPヘッダーは白地 と背景の明度が大きく振れる。
     白ロゴ1ファイルで両立させるため、文字の輪郭に沿う1pxの影を4方向に重ねる。
     （drop-shadow は前段の結果に掛かるので、4方向重ねると輪郭が閉じる）
   ・正式ロゴが来たら img/logo.png を同名で差し替えるだけでよい
   -------------------------------------------------------------------------- */
.header_logo img {
    width: auto;
    max-width: 200px;
    max-height: 52px;
    height: auto;
    object-fit: contain;
}

.footer_logo img {
    width: auto;
    max-width: 200px;
    max-height: 58px;
    height: auto;
    object-fit: contain;
}

@media screen and (max-width: 767px) {
    /* SPヘッダーのロゴ位置
       ・テンプレの `.header_logo { width:20vw }` だとロゴ画像が箱からはみ出すので、内容なりの幅にする
       ・左の余白はハンバーガーの右余白(20px)と同じにして、左右の見た目を揃える */
    .header_logo {
        width: auto;
        margin-left: 20px;
    }

    .header_logo img {
        width: auto;
        max-width: 46vw;
        max-height: 46px;
    }

    .footer_logo img {
        max-width: 40vw;
        max-height: 54px;
    }
}

.header_logo img {
    filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.55)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}


/* --------------------------------------------------------------------------
   グロナビ／SPドロワーの Instagram アイコン（必ず一番右・末尾）
   -------------------------------------------------------------------------- */

.gnav_insta{
  display: flex;
  align-items: center;
}
   .gnav_insta a {
   display:block;
   width: 35px;
   aspect-ratio: 1 / 1;
}

.gnav_insta img {
    width: 100%;
    /* height: 24px;
    object-fit: contain; */
}

.gnav_insta a:hover {
    opacity: 0.7;
}

.gmenu_sp_insta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}

.gmenu_sp_insta img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}


/* --------------------------------------------------------------------------
   メニュー系ページのアンカー（COURSE / FOOD / DRINK）
   ランチ非表示で3つになったため、既定の .anchor{flex:0 0 25%} だと右に1つぶん余白が残る。
   等分して幅いっぱいに広げる。SPはテンプレどおり2列組みを保つ。
   -------------------------------------------------------------------------- */
.anchor_wrap {
    justify-content: center;
}

.anchor {
    flex: 1 1 0;
}

@media screen and (max-width: 767px) {
    .anchor {
        flex: 0 0 50%;
    }
}


/* --------------------------------------------------------------------------
   TOPギャラリーのループスライダー：枠(250×250)に対し画像が原寸・左上基準で入り
   見切れるため、中央基準のトリミングに揃える
   -------------------------------------------------------------------------- */
#loopslider ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* --------------------------------------------------------------------------
   下層ページのMV（ページタイトル帯）
   テンプレは背景画像の上に白文字（.details_title_txt{color:#fff}）を直接載せており、
   明るい写真だとページタイトルが読めない。控えめな黒のオーバーレイを敷いて可読性を担保する。
   -------------------------------------------------------------------------- */
.main_menu::after,
.main_gallery::after,
.main_access::after,
.main_recruit::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 0;
    pointer-events: none;
}

.main_logo_menu,
.main_logo_gallery,
.main_logo_access,
.main_logo_recruit {
    z-index: 1;
}


/* --------------------------------------------------------------------------
   TOPのメインビジュアル：ヘッダーは透過でグロナビが白文字のため、明るい写真が来ると
   ナビ・ロゴ・予約ボタンが沈む。上端だけに黒のグラデーション（スクリム）を敷いて
   写真の明るさに関係なく読めるようにする。写真そのものの見え方は下側で変わらない。
   -------------------------------------------------------------------------- */
.main::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    /* SPはヘッダーがMVの上に乗らない（白帯）ので不要 */
    .main::after { display: none; }
}


/* --------------------------------------------------------------------------
   TOP COURSE：テンプレはセクション背景（CSS）と本文横の写真（img）が
   どちらも course1.jpg で、同じ写真が二重に出てしまう。
   背景だけ別の写真に差し替える（黒70%が乗るので暗いテクスチャ向きの一枚を当てる）。
   -------------------------------------------------------------------------- */
.top_course {
    background-image: url(../img/bg_course.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media screen and (max-width: 767px) {
    .top_course { background-image: url(../img/bg_course.jpg); }
}

/* --------------------------------------------------------------------------
   グロナビ：予約アイコン（Instagramの隣）
   -------------------------------------------------------------------------- */

.gnav_reserve a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    font-size: 1.2vw;
    line-height: 1.5;
    /* transform: translateY(calc(0.6em - 13.1px)); */
    transition: opacity 0.3s;
    text-decoration: none;
    border: 1px solid #fff;
    
}

.gnav_reserve a:hover {
    opacity: 0.7;
}



.gmenu_sp_reserve {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #1b1b1b;
    border: 1px solid #1b1b1b;
    padding: 0.25em 0.8em;
    line-height: 1.5;
}

.gmenu_sp_reserve_icon {
    width: 28px;
    height: 28px;
    display: block;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   フッターグロナビ：Instagramアイコン
   -------------------------------------------------------------------------- */
.footer_insta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.footer_insta img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

@media screen and (max-width: 767px) {
    .footer_insta img {
        width: 28px;
        height: 28px;
    }
}