/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 07 2024 | 15:58:31 */
/* ===============================
   トップバーのカスタマイズ
   =============================== */
.l-header__bar {
    padding-bottom: 4px;
}

.l-header__barInner {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: space-between; /* 左右を均等に配置 */
    gap: 16px; /* 左右エリアの間隔 */
    padding-left: 1em;
    padding-right: 1em;
    height: 3em;
}

/* 左エリアのスタイル */
.c-catchphrase {
    flex: 1 1 40%; /* 全体の40%幅を基準 */
    white-space: nowrap; /* キャッチフレーズが折り返されないように設定 */
    overflow: hidden; /* 必要に応じてトリミング */
    text-overflow: ellipsis; /* テキストが溢れた場合は省略記号で表示 */
}

/* 右エリアのスタイル */
.c-iconList {
    flex: 1 1 60%; /* 全体の60%幅を基準 */
    display: flex;
    justify-content: flex-end; /* アイテムを右寄せ */
    align-items: center; /* 垂直方向の中央揃え */
    flex-wrap: wrap; /* 必要に応じて折り返しを許可 */
    /* gap: 10px; 各要素間の間隔 */
}

.c-iconList__item {
    list-style: none; /* デフォルトのリストスタイルを解除 */
    display: block;
    margin-right: 10px; /* リンク間の間隔 */
}

.c-iconList__item.-instagram {
    margin-right: 0px!important; /* リンク間の間隔 */
}

.c-iconList__link {
    color: inherit; /* テーマの既存スタイルを継承 */
    text-decoration: none; /* アンダーラインを削除 */
}

.c-iconList__link:hover {
    text-decoration: none; /* アンダーラインの不要な追加を防止 */
}

.c-iconList__icon, .c-iconList__link {
    display: inline;
}


/* ===============================
   ボタンスタイル
   =============================== */
.c-reservationBtn, 
.c-iconList__item.-custom-link .c-reservationBtn, 
.c-reservationBtn-sticky {
    display: inline;
    padding: 8px 16px;
    background-color: #ff6f61; /* ボタンの背景色 */
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* テキストが折り返されないように */
    line-height: 1; /* テキストの高さ調整 */
}

.c-reservationBtn-sticky {
    display: inline;
    padding: 8px 16px;
    margin-left: 10px;
    line-height: 1.5; /* テキストの高さ調整 */
}

.c-reservationBtn:hover, 
.c-iconList__item.-custom-link .c-reservationBtn:hover, 
.c-reservationBtn-sticky:hover {
    background-color: #e55b4e; /* ホバー時の背景色 */
}

/* ===============================
   追従ヘッダーのスタイル
   =============================== */
#fix_header .l-fixHeader__inner {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: space-between; /* 左右の要素を均等に配置 */
}

/* ===============================
   レスポンシブ対応（960px以下）
   =============================== */
@media (max-width: 959px) {
    .l-header__barInner {
        flex-direction: column; /* エリアを縦並びに変更 */
        align-items: flex-start; /* 左寄せ */
        gap: 10px;
    }

    .c-catchphrase, .c-iconList {
        flex: 1 1 auto; /* 幅を自動調整 */
        width: 100%; /* 各エリアを幅いっぱいに */
    }

    .c-iconList {
        justify-content: flex-start; /* 右エリアも左寄せ */
    }

    .l-header__customBtn {
        width: auto; /* 幅を自動調整 */
        height: auto; /* 高さを自動調整 */
        display: flex; /* フレックスでボタンを中央寄せ */
        align-items: center;
        justify-content: center;
    }

    .c-reservationBtn.sp_ {
        display: inline-flex; /* inline-flex にしてフレックスアイテムとして扱う */
        align-items: center; /* 垂直方向の中央寄せ */
        justify-content: center; /* 水平方向の中央寄せ */
        height: 36px; /* ボタンの高さ */
        padding: 0 16px; /* 左右の余白 */
        background-color: #ff6f61;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.3s ease;
        white-space: nowrap; /* テキストが折り返されないように */
    }

    .c-reservationBtn.sp_:hover {
        background-color: #e55b4e; /* ホバー時の背景色 */
    }

    .c-reservationBtn-sticky {
        font-size: 12px; /* フォントサイズを調整 */
        padding: 6px 12px; /* ボタンの余白を縮小 */
    }
}

/* ===============================
   モバイルメニュー用「今すぐ予約」ボタン
   =============================== */
/* モバイル用「今すぐ予約」ボタン */
@media (max-width: 959px) {
    .l-header__customBtn {
        display: flex; /* フレックスボックスで中央揃え */
        align-items: center; /* 縦方向の中央揃え */
        justify-content: center; /* 横方向の中央揃え */
        height: 48px; /* 親ボタンの高さ */
        width: auto; /* 幅を自動調整 */
    }

    /* ボタンのスタイル */
    .c-reservationBtn.sp_ {
        display: flex; /* ボタン内部もフレックスボックスで中央揃え */
        align-items: center; /* 縦方向の中央揃え */
        justify-content: center; /* 横方向の中央揃え */
        padding: 0 16px; /* ボタン左右の余白 */
        background-color: #ff6f61; /* 背景色 */
        color: #fff; /* テキスト色 */
        font-size: 14px; /* フォントサイズ */
        font-weight: bold; /* 太字 */
        text-decoration: none; /* 下線を削除 */
        border-radius: 4px; /* 角丸 */
        height: 36px; /* ボタンの高さ */
        line-height: 1; /* テキストの高さを通常に */
        white-space: nowrap; /* 折り返しを防止 */
        box-sizing: border-box; /* パディングを含めたサイズ計算 */
        transition: background-color 0.3s ease;
    }

    /* ホバー時のスタイル */
    .c-reservationBtn.sp_:hover {
        background-color: #e55b4e; /* ホバー時の背景色 */
    }
}

/* ===============================
   追従ヘッダー内グローバルメニューのアンダーライン修正
   =============================== */
@media (min-width: 960px) {
    #fix_header .l-fixHeader__gnav .c-gnav>li>a {
        padding: 33px 13px;
    }
}




#fix_header .l-fixHeader__inner .l-header__nav a {
    display: inline-flex; /* インラインフレックスでアイテムを中央揃え */
    align-items: center;
    justify-content: center;
}

#fix_header .l-fixHeader__inner .l-header__nav a:hover {
    text-decoration: underline; /* 追従ヘッダー内でアンダーラインが枠の最下部に配置される */
}