/* =====================================================
難波電機店 ウェブサイト - 共通スタイルシート
全ページで使用する共通のスタイルを定義
===================================================== */
/* --- Google Fonts は各HTMLの 内で タグで読み込む（@importは削除） ---
各ページの に以下を追加済み：
*/
/* --- CSS変数（カラーパレット・フォント定義） --- */
:root {
--color-primary: #1a3a5c; /* 濃紺：メインカラー */
--color-accent: #e8a020; /* 琥珀色：アクセントカラー */
--color-accent-light: #f5c660; /* 薄い琥珀色 */
--color-bg: #f9f7f4; /* オフホワイト：背景色 */
--color-white: #ffffff;
--color-text: #2c2c2c; /* 本文テキスト色 */
--color-text-light: #666666; /* サブテキスト色 */
--color-border: #e0d8cc; /* ボーダー色 */
--color-section-bg: #f0ece6; /* セクション背景色 */
--font-sans: 'Noto Sans JP', sans-serif;
/* 全体の字体を統一するため、セリフフォントも同じファミリーに設定 */
--font-serif: 'Noto Sans JP', sans-serif;
--max-width: 1100px;
--nav-height: 120px;
}
/* --- リセット・ベーススタイル --- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-sans);
background-color: var(--color-bg);
color: var(--color-text);
font-size: 15px;
line-height: 1.8;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s;
}
a:hover {
color: var(--color-accent);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* =====================================================
ヘッダー・ナビゲーション
===================================================== */
/* --- ヘッダー上部バー（住所・電話番号） --- */
.top-bar {
background-color: var(--color-primary);
color: var(--color-white);
text-align: center;
padding: 8px 20px;
font-size: 13px;
position: sticky;
top: 0;
z-index: 1000;
height: 32px;
}
.top-bar a {
color: var(--color-accent-light);
margin: 0 12px;
}
.top-bar a:hover {
color: var(--color-white);
}
/* --- メインヘッダー --- */
header {
background-color: var(--color-white);
border-bottom: 2px solid var(--color-border);
position: sticky;
top: 32px;
z-index: 1000;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.header-inner {
/* 幅制限を外して常に画面端からのパディングで位置を決める */
width: 100%;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
/* ナビは必要に応じて最大幅を持たせたい場合や、中央寄せしたい場合に
別途ラップを追加して調整するが、現状は左右パディングだけで十分 */
/* --- ロゴエリア --- */
.logo-area {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.logo-area img {
width: 50px;
height: 43px;
object-fit: contain;
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-text .tagline {
font-size: 11px;
color: var(--color-text-light);
line-height: 1.3;
}
.logo-text .company-name {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
}
/* --- ハンバーガーメニュー（モバイル用） --- */
.hamburger {
display: none; /* PCでは非表示 */
}
.hamburger span {
display: block;
width: 24px;
height: 2px;
background-color: var(--color-primary);
margin: 6px 0;
transition: all 0.3s ease;
}
/* 閉じるボタン */
.close-btn {
display: none; /* PCでは非表示 */
background: none;
border: none;
color: var(--color-white);
font-size: 28px;
cursor: pointer;
padding: 0;
margin-bottom: 20px;
}
/* ナビゲーション（PCではデフォルト表示） */
nav {
display: flex;
align-items: center;
}
nav ul {
display: flex;
gap: 28px;
list-style: none;
}
nav ul li a {
font-size: 14px;
color: var(--color-text);
font-weight: 500;
transition: color 0.2s;
}
nav ul li a:hover,
nav ul li a.active {
color: var(--color-accent);
}
/* =====================================================
モバイル対応（800px以下）
===================================================== */
@media (max-width: 800px) {
/* ハンバーガーボタンを表示 */
.hamburger {
display: flex;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
/* 閉じるボタンを表示 */
.close-btn {
display: block;
}
/* ナビを縦方向に（モバイルメニュー） */
nav {
display: none; /* デフォルトは隠す */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-primary);
flex-direction: column;
padding: 20px;
z-index: 1000;
overflow-y: auto;
}
nav.active {
display: flex; /* ハンバーガーをクリックで表示 */
}
nav ul {
flex-direction: column;
gap: 20px;
}
nav ul li a {
color: var(--color-white);
font-size: 16px;
}
nav ul li a:hover,
nav ul li a.active {
color: var(--color-accent);
}
}
/* =====================================================
フッター
===================================================== */
footer {
background-color: var(--color-primary);
color: var(--color-white);
padding: 30px 24px;
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-section h3 {
font-size: 14px;
font-weight: 700;
color: var(--color-accent-light);
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 12px;
}
.footer-section p,
.footer-section address {
font-size: 13px;
font-style: normal;
line-height: 1.9;
}
.footer-section a {
color: rgba(255,255,255,0.8);
}
.footer-section a:hover {
color: var(--color-accent-light);
}
.footer-nav ul {
list-style: none;
}
.footer-nav ul li {
margin-bottom: 6px;
}
.footer-nav ul li a {
font-size: 13px;
}
.footer-bottom {
max-width: var(--max-width);
margin: 20px auto 0;
text-align: center;
font-size: 12px;
color: rgba(255,255,255,0.5);
}
/* =====================================================
ページ共通：ページヒーロー（各ページ上部の見出し帯）
===================================================== */
.timeline-table-wrapper {
overflow-x: auto;
padding: 18px;
border-radius: 10px;
border: none; /* オレンジ枠線を削除 */
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
box-shadow: 0 6px 20px rgba(26,58,92,0.06);
}
.timeline-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 10px;
background: transparent;
min-width: 520px;
}
/* ヘッダー全体 */
.timeline-table thead th {
text-align: left;
padding: 12px 18px;
background: transparent; /* 背景色なし */
color: var(--color-text);
font-weight: 700;
letter-spacing: 0.08em;
font-size: 13px;
text-transform: uppercase;
border: none;
}
.timeline-table thead th.col-year {
background: var(--color-primary);
color: var(--color-white);
border-radius: 6px 0 0 6px;
}
/* 年列（データ行） */
.timeline-table .col-year {
width: 140px;
font-weight: 700;
color: var(--color-white);
background: var(--color-primary);
padding-left: 18px;
border-radius: 6px 0 0 6px;
}
/* 行 */
.timeline-table tbody tr {
background: var(--color-white);
border-radius: 8px;
box-shadow: 0 6px 18px rgba(26,58,92,0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.timeline-table tbody tr:hover {
transform: translateY(-6px);
box-shadow: 0 14px 30px rgba(26,58,92,0.08);
}
/* セル */
.timeline-table td {
padding: 14px 18px;
border: none;
color: var(--color-text);
vertical-align: middle;
background: transparent;
}
/* モバイル対応 */
@media (max-width: 800px) {
.timeline-table-wrapper { padding: 12px; border-radius: 8px; }
.timeline-table { border-spacing: 0 8px; min-width: 420px; }
.timeline-table thead th, .timeline-table td { padding: 10px 12px; font-size: 14px; }
.timeline-table .col-year { width: 110px; padding-left: 12px; }
}
.page-hero .breadcrumb {
font-size: 12px;
color: rgba(255,255,255,0.6);
margin-bottom: 12px;
}
.page-hero h1 {
font-family: var(--font-serif);
font-size: 32px;
font-weight: 700;
line-height: 1.4;
}
.page-hero .subtitle {
font-size: 14px;
color: rgba(255,255,255,0.75);
margin-top: 8px;
}
/* ヒーロー下部ウェーブ */
.hero-wave {
position: absolute;
bottom: -1px;
left: 0;
right: 0;
line-height: 0;
}
.hero-wave svg {
display: block;
width: 100%;
}
/* =====================================================
共通コンテナ
===================================================== */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
/* --- セクション間余白 --- */
.section {
padding: 72px 0;
}
.section-alt {
background-color: var(--color-section-bg);
}
/* --- セクション見出し（英語＋日本語組み合わせ） --- */
.section-heading {
text-align: center;
margin-bottom: 48px;
}
.section-heading .en {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-accent);
display: block;
margin-bottom: 6px;
}
.section-heading h2 {
font-family: var(--font-serif);
font-size: 28px;
color: var(--color-primary);
line-height: 1.4;
}
.section-heading p {
color: var(--color-text-light);
margin-top: 12px;
font-size: 14px;
}
/* --- セクション見出し（左揃え用） --- */
.section-history {
text-align: left;
margin-bottom: 12px;
padding-left: 24px;
}
.section-history .en {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-accent);
display: block;
margin-bottom: 6px;
}
.section-history h2 {
font-family: var(--font-serif);
font-size: 24px;
color: var(--color-primary);
line-height: 1.4;
}
/* --- ボタン共通スタイル --- */
.btn {
display: inline-block;
padding: 12px 32px;
border-radius: 4px;
font-weight: 700;
font-size: 14px;
transition: all 0.25s;
cursor: pointer;
border: 2px solid transparent;
letter-spacing: 0.05em;
}
.btn-primary {
background-color: var(--color-accent);
color: var(--color-white);
border-color: var(--color-accent);
}
.btn-primary:hover {
background-color: #c8880e;
border-color: #c8880e;
color: var(--color-white);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(232,160,32,0.35);
}
.btn-outline {
background-color: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.btn-outline:hover {
background-color: #03244c;
border-color: #03244c;
color: var(--color-white);
transform: translateY(-1px);
box-shadow: 0 4px 14px #03244c;
}
/* =====================================================
レスポンシブ対応
===================================================== */
@media (max-width: 900px) {
/* ナビゲーションをハンバーガーメニューに変換 */
nav {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-primary);
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}
nav.open {
display: flex;
}
nav ul {
flex-direction: column;
align-items: center;
gap: 8px;
}
nav ul li a {
color: var(--color-white);
font-size: 18px;
padding: 12px 24px;
}
/* モバイル用の閉じるボタン */
nav .close-btn {
position: absolute;
top: 20px;
right: 24px;
color: var(--color-white);
font-size: 28px;
cursor: pointer;
background: none;
border: none;
}
.hamburger {
display: flex;
}
.footer-inner {
grid-template-columns: 1fr;
gap: 28px;
}
}
@media (max-width: 600px) {
.page-hero h1 {
font-size: 24px;
}
.section {
padding: 48px 0;
}
.section-heading h2 {
font-size: 22px;
}
}