/** * レスポンシブ固定フッター（ボトムナビゲーション） * Material Design風のモバイル専用メニュー * PC表示時は非表示、スマホ・タブレット時のみ表示 */ /* ========== 固定フッターメニュー ========== */ .mobile-footer { display: none; /* デフォルトは非表示（PC用） */ position: fixed; bottom: 0; left: 0; right: 0; width: 100%; background-color: #ffffff; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; padding-bottom: env(safe-area-inset-bottom); /* iPhoneのホームバー対応 */ } .mobile-footer__nav { display: flex; justify-content: space-around; align-items: stretch; height: 56px; max-width: 100%; } .mobile-footer__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #757575; transition: all 0.2s ease; position: relative; padding: 6px 12px; gap: 2px; } .mobile-footer__item:hover { background-color: rgba(92, 179, 204, 0.05); } .mobile-footer__item--active { color: #5CB3CC; /* var(--color-primary) */ } /* アイコン部分 */ .mobile-footer__icon { font-family: 'Material Icons'; font-size: 24px; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'liga'; } /* ラベル部分 */ .mobile-footer__label { font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; } /* アクティブ時のインジケーター（オプション） */ .mobile-footer__item--active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 3px; background-color: #5CB3CC; border-radius: 0 0 3px 3px; } /* ========== レスポンシブ対応 ========== */ /* タブレット以下で表示 */ @media (max-width: 1024px) { .mobile-footer { display: block; } /* ボトムナビゲーション分のパディングをbodyに追加 */ body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } /* メインコンテンツの下部余白を調整 */ .main { padding-bottom: 24px; } } /* スマートフォン専用調整 */ @media (max-width: 640px) { .mobile-footer__nav { height: 56px; } .mobile-footer__icon { font-size: 22px; } .mobile-footer__label { font-size: 11px; } .mobile-footer__item { padding: 4px 8px; } } /* 横向きスマホ対応 */ @media (max-width: 900px) and (orientation: landscape) { .mobile-footer__nav { height: 48px; } .mobile-footer__icon { font-size: 20px; } .mobile-footer__label { font-size: 10px; } } /* ========== Material Icons フォント読み込み ========== */ /* HTMLの内に以下を追加してください: */