@charset "UTF-8";
/* ============================================================
mhbar.css - サイト共通の帯行
バイクは楽しいモトハーバー（株式会社鶴見）
すべてのページでこの1枚を読み込み、帯の見た目を揃える。
・帯そのものを 950px にする（背景だけ全幅にはしない）
・横スクロールは一切出さない
・右端に版数（Ver）を出す
使い方： の最後で読み込み、本文の先頭に置く
============================================================ */
/* ページごとに違っていた帯の色を、全ページ同じにする。
（帯の入れ物の名前がページによって違うため、まとめて指定する） */
.mh-bar,
.brand-bar,
header.hdr,
.site-header,
#site-header,
.sbar,
.hd {
background: #1B5C2E;
color: #fff;
border-bottom: 3px solid #C89A50;
/* 帯そのものを950pxにする（背景だけ全幅にはしない） */
max-width: 950px;
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.mh-bar, .mh-bar * { box-sizing: border-box; }
.mh-bar {
background: #1B5C2E;
color: #fff;
max-width: 950px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0 16px;
display: flex;
align-items: center;
position: sticky;
top: 0;
z-index: 500;
border-bottom: 3px solid #C89A50;
box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
overflow: hidden; /* 中身がはみ出しても横スクロールを出さない */
}
.mh-bar-in {
width: 100%;
min-width: 0;
min-height: 56px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 6px 0;
}
/* 店名
ページ側の「帯の中のリンク」指定（枠線や背景）に負けないよう、
要素名まで含めた指定にして、余計な飾りは打ち消しておく。 */
a.mh-brand, .mh-bar .mh-brand, .hd .mh-brand, .site-header .mh-brand {
font-weight: 700;
font-size: 15px;
color: #F0A500;
text-decoration: none;
white-space: nowrap;
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
background: none;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
text-shadow: none;
}
a.mh-brand:hover, .hd .mh-brand:hover { color: #FFC13B; background: none; }
.mh-en {
font-size: .85em;
font-weight: 700;
letter-spacing: .02em;
color: #F0A500;
white-space: nowrap;
}
.mh-brand small, .hd .mh-brand small {
font-weight: 400;
font-size: 11px;
color: rgba(255, 255, 255, .72);
white-space: nowrap;
}
/* ページ名（店名の右） */
.mh-page {
font-weight: 700;
font-size: 13px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
padding-left: 10px;
margin-left: 2px;
border-left: 1px solid rgba(255, 255, 255, .35);
}
.mh-page small {
font-weight: 400;
font-size: .82em;
color: rgba(255, 255, 255, .78);
margin-left: 5px;
}
/* ボタン */
.mh-nav {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-left: auto;
min-width: 0;
}
.mh-nav a, .mh-nav button {
background: rgba(255, 255, 255, .14);
color: #fff;
border: 1.5px solid rgba(255, 255, 255, .6);
border-radius: 8px;
padding: 6px 12px;
font-size: 12.5px;
font-weight: 700;
font-family: inherit;
text-decoration: none;
white-space: nowrap;
line-height: 1.4;
cursor: pointer;
text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
transition: background .18s, border-color .18s;
}
.mh-nav a:hover, .mh-nav button:hover {
background: rgba(255, 255, 255, .28);
color: #fff;
border-color: #fff;
}
.mh-nav a.on { background: #C89A50; color: #2a2000; border-color: #C89A50; text-shadow: none; }
.mh-nav a.home { background: #F58220; color: #3a1a00; border-color: #F58220; text-shadow: none; }
.mh-nav a.book { background: #3ec45e; color: #fff; border-color: #3ec45e; text-shadow: none; }
/* 版数 */
.mh-ver {
font-size: 11px;
color: rgba(255, 255, 255, .7);
white-space: nowrap;
margin-left: 8px;
align-self: center;
}
.mh-nav + .mh-ver { margin-left: 8px; }
.mh-bar-in > .mh-ver:not(.mh-nav + .mh-ver) { margin-left: auto; }
/* ログイン中の表示 */
.mh-who {
font-size: 12px;
font-weight: 700;
color: #fff;
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .4);
border-radius: 999px;
padding: 3px 10px;
white-space: nowrap;
}
/* 本文も帯と同じ 950px に揃える（帯だけ広く、本文だけ狭い、をなくす） */
.mh-wrap,
.wrap, #wrap,
.site-wrap,
.page,
.site,
.container,
main.main {
max-width: 950px;
margin-left: auto;
margin-right: auto;
width: 100%;
box-sizing: border-box;
}
/* ── 携帯 ── */
@media (max-width: 820px) {
.mh-bar { padding: 0 10px; }
.mh-brand { font-size: 13px; }
.mh-nav a, .mh-nav button { padding: 5px 9px; font-size: 11.5px; }
.mh-page { font-size: 12px; }
}
@media (max-width: 600px) {
.mh-bar-in { gap: 7px; min-height: 50px; }
.mh-brand { font-size: 12px; }
.mh-brand small { display: none; } /* 幅が足りないので社名は省く */
.mh-en { font-size: .9em; }
.mh-page { font-size: 11.5px; padding-left: 8px; }
.mh-nav { gap: 5px; }
.mh-nav a, .mh-nav button { padding: 4px 8px; font-size: 11px; }
.mh-ver { font-size: 10px; margin-left: 6px; }
.mh-who { font-size: 11px; padding: 2px 8px; }
}
@media (max-width: 420px) {
.mh-brand { font-size: 11.5px; }
.mh-nav a, .mh-nav button { padding: 4px 7px; font-size: 10.5px; }
}
/* 横スクロールを出さない（サイト共通の決まり） */
html, body { max-width: 100%; overflow-x: hidden; }