/* style.css */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Yu Mincho","游明朝","Hiragino Mincho ProN","ヒラギノ明朝 ProN Hiragino Mincho Pro","ヒラギノ明朝 Pro","Times New Roman";
    background-color: #f5f5f7;
    color: #222;
}

.brand {
    font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* 1. 画面最下部に固定する外枠（背景は横いっぱいに広げる） */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;

    transition: transform 0.3s ease;
}

/* 2. メニューの中身（ここで幅を制限して中央に寄せる） */
.bottom-nav ul {
    font-size:30px;
    display: flex;
    justify-content: space-around; /* リンクを均等に配置 */
    align-items: center;
    height: 100%;
    list-style: none;
    margin: 0 auto; /* 💡左右の余白を自動にして中央揃えにする */
    padding: 0 20px; /* スマホ時の左右の最低限の余白 */
    /* 💡ここがポイント */
    max-width: 600px; /* これ以上メニューが広がらない最大幅（数値は自由） */
    width: 100%; /* 画面が最大幅より小さい時は横いっぱいに広げる */
}

.bottom-nav a:link,
.bottom-nav a:visited {
  color: #333333; 
}

.bottom-nav.hide {
    /* メニュー自身の高さ分（60px）＋少し多めに下にずらして画面外に隠す */
    transform: translateY(80px);
}


footer {
    font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
}



/* 見出しと段落の謎の余白をすべてリセットする */
h1, h2, h3, h4, h5, h6, p, ul {
    margin: 0;
    padding: 0;
}


a{
    text-decoration:none;
}

/* サイト内のすべての画像に対して、選択・ドラッグ・長押し保存を禁止する */
img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}