/* CSS Custom Properties */
:root {
    --main-color: #016887;
    --accent-color: #ffffff;
    --bg-gray: #ffffff;
    --text-color: #333;
    --text-light: #504c4c;
    --white: #fff;
    --yellow-highlight: #ffff66;
    --red-text: #ff0000;
    --border-radius: 10px;
    --transition: all 0.3s ease;
    --shadow: 0 2px 10px rgba(0,0,0,0.1);
    --container-max-width: 900px;
    --content-max-width: 800px;
}

/* Reset & Base Styles */
* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-color);
    background: var(--white);
    line-height: 1.6;
}

img { max-width: 100%; height: auto; vertical-align: middle; }

/* Layout Components */
.container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 1rem; }
.content { max-width: var(--content-max-width); margin: 0 auto; }

/* Header */
.site-logo { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  z-index: 1000; 
}
.site-logo img { 
  max-width: min(400px, 30vw); 
  min-width: 120px; 
}

.hero { text-align: center; padding: 2rem 1rem; background: linear-gradient(135deg, var(--bg-gray) 0%, var(--white) 100%); } 
.hero__title { font-size: clamp(1.5rem, 4vw, 1.8rem); font-weight: 700; color: var(--main-color); margin: 0 0 1rem; position: relative; display: inline-block; padding-bottom: 0.8rem; white-space: nowrap; } 
.hero__title::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 80%; height: 3px; background: var(--main-color); border-radius: 2px; }

@media (max-width: 768px) {
  .hero__title {
    margin-top: 3.5rem; 
    font-size: 1.2rem; 
    white-space: nowrap;
  }
}

.hero__image { 
  margin: 2rem 0; 
  text-align: center; 
}
.hero__image img { 
  width: 85%; 
  border-radius: var(--border-radius); 
  box-shadow: var(--shadow); 
}


/* Typography */
.section-title { background-color: var(--bg-gray); border-left: 5px solid var(--main-color); padding: 0.8rem 1rem; font-size: clamp(1.2rem, 3vw, 1.6rem); margin: 3rem auto 1rem auto; max-width: var(--content-max-width); box-shadow: var(--shadow); }
.subsection-title { font-size: clamp(1.1rem, 2.5vw, 1.3rem); font-weight: 700; color: var(--main-color); border-bottom: 2px solid var(--main-color); padding-bottom: 0.4rem; margin: 2rem auto 1rem auto; max-width: var(--content-max-width); }
.sub-title { font-size: clamp(1rem, 2vw, 1.1rem); font-weight: 700; color: #444; margin: 1.5rem auto 0.8rem auto; max-width: var(--content-max-width); }
.content-text { color: var(--text-light); line-height: 1.8; font-size: clamp(16px, 2vw, 18px); margin: 0 auto 1.5rem auto; max-width: var(--content-max-width); }

.centered-image { text-align: center; margin: 2rem 0; }
.centered-image img { width: 85%; border-radius: var(--border-radius); box-shadow: var(--shadow); }

/* Buttons */
.btn { display: inline-block; padding: 12px 32px; border-radius: var(--border-radius); text-decoration: none; font-weight: 600; text-align: center; transition: var(--transition); border: none; cursor: pointer; font-size: 1rem; min-width: 120px; box-shadow: var(--shadow); white-space: nowrap; box-sizing: border-box; }
.btn--orange { background-color: #03556e; color: var(--white); }
.btn--orange:hover { background: var(--main-color); transform: translateY(-2px); }
.btn--outline { background-color: var(--white); border: double 6px var(--main-color); color: var(--main-color); }
.btn--outline:hover { color: var(--white); background-color: var(--main-color); transform: translateY(-2px); }
.btn-center { text-align: center; margin: 2rem 0; }

/* Responsive Table */
.table-container {
    overflow-x: auto;
    margin: 2rem 0;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    position: relative; /* sticky髯憺屮 ｽ ｺ髮   ｿ ｽ */
}

.product-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border: 1px solid #ddd;
}

.product-table th,
.product-table td {
    padding: 1rem;
    text-align: center;
    border: 1px solid #ddd;
    vertical-align: middle;
}

.product-table th { background-color: var(--bg-gray); font-weight: 600; }

.product-table img { width: 100px; height: 100px; object-fit: contain; border-radius: 8px; }

/* 髫ｨ貂可€髫ｨ貂可€ 驍ｵ ｺ髦ｮ蜻ｻ ｼ  ｸ ｺ闕ｵ譎｢ ｽ莨夲ｽｿ ｽ陞滓腸 ｿ ｽ  ｽ陝ｯ ｼ  ｽ闔  ･  ｷ  ｦ鬩包ｽｶ  ｯ髯具ｽｻ隴会ｽｦ  ｼ霑壼雀 ｴ邇匁･懆棔 ｲ  ｼ陷ｿ ･  ｽ驍ｵ ｺ  ｮ髯晢ｽｷ  ｽ隨渉€驛｢ ｧ陜｣ ､  ｶ  ｭ髫ｰ蜴 ｽｿ ｽ 髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€ */

/* 髯晢ｽｾ  ｦ鬩包ｽｶ  ｯ驕ｯ ｶ隲橸ｽｺ  ｽ  ｽ陝ｯ ｼ髯ｷ ｷ陜ｮ縺､ﾂ€隴取得 ｿ ｽ驛｢ ｧ髮区ｧｫ ｴ邇匁･懆棔 ｲ  ｼ騾趣ｽｯ つ€陞｢ ｼ  ｸ  ｸ驛｢譎｢ ｿ ｽ  ｽ驛｢譎 § 取劼 ｿ ｽ陞滓腸 ｿ ｽ  ｽ陝ｯ ｼ髯晢ｽｷ  ｽ=18%鬨ｾ ｶ  ｸ髯溷､懷ｱｮ  ｼ  ｽ */
.product-table td:first-child,
.product-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-gray);
    font-weight: 600;
    box-shadow: 2px 0 0 rgba(0,0,0,0.06);
    width: 18%;          /* 髯ｷ闌ｨ ｿ ｽ  ｽ鬮ｫ ｪ  ｭ鬮ｫ ｪ闔  ･  ｹ  ｽ */
    min-width: 120px;     /* 驍ｵ ｺ  ､驍ｵ ｺ  ｶ驛｢ ｧ驕停或 ｺ貅ｯ ｱ  ｽ ｢ */
}

/* 髮趣ｽｸ鬩   ｿ ｽ髯ｷ莨夲ｽｽ ｹ髫ｴ ｫ隲帑ｼ夲ｽｽ ｿ  ｽ つ€  ｲ鬮ｯ ｬ  ｽ  ｽ  ｮ驛｢譎｢ ｿ ｽ  ｽ驛｢譎 § 取劼 ｿ ｽ  ｽpromotion-table  ｽ陝ｲ ｨ  ｽ鬯ｯ  ｿ ｽ陝ｯ ｼ髯晢ｽｷ  ｽ=22% */
.promotion-table td:first-child,
.promotion-table th:first-child {
    width: 22%;
    min-width: 120px;
}

/* 髣碑崟鞫ｩ  ｽ驍ｵ ｺ  ｯ髫ｶ髮｣ ｽ ｪ驛｢ ｧ  ｹ驛｢ ｧ  ｯ驛｢譎｢ ｽ ｭ驛｢譎｢ ｽ ｼ驛｢譎｢ ｽ ｫ髯ｷ鬘後＊驗ゑｽｲ驍ｵ ｺ  ｧ髫ｴ蟠｢ﾂ€髣厄ｽｴ闕ｳ ｻ  ｹ  ｽ 蟶晢ｿ｡  ｺ髣厄ｽｫ隴趣ｽ｢  ｼ陋ｹ ｻ郢晢ｽｦ驛｢ ｧ  ｭ驛｢ ｧ  ｹ驛｢譎乗ｲｺ鬩･諞ｺ諱 ｭ∵腸 ｼ 驍ｵ ｺ  ｫ驛｢ ｧ陋ｹ ｻ 邇厄ｽｲ雜｣ ｽ ｰ驛｢ ｧ陟暮ｯ会ｽｽ蟶晢ｽｫ ｦ  ｲ髮   ｽ ｢  ｽ  ｽ */
.product-table td:not(:first-child),
.product-table th:not(:first-child) {
    min-width: 120px; /* 髯滂ｽ｢  ｽ  ｦ遶丞｣ｺ 髯滂ｽ｢隲帷腸 ｧ驍ｵ ｺ  ｦ 120驍ｵ ｲ  ｽ160px 驍ｵ ｺ  ｧ鬮ｫ ｱ  ｿ髫ｰ ｨ  ｴ髯ｷ ｿ  ｯ */
}

/* 髫ｨ貂可€髫ｨ貂可€ 驍ｵ ｺ髦ｮ蜻ｻ ｼ  ｸ ｺ  ｾ驍ｵ ｺ  ｧ  ｽ陞｢ ｼ陝 邇匁･懆棔 ｲ  ｼ陷ｿ ･  ｹ  ｽ陞ｳ蟷  蛹 ｽｽ ｡ 髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€髫ｨ貂可€ */

/* 鬯ｯ  ｿ ｽ陝ｯ ｼ髯ｷ ｷ隶主･ ｽｿ ｽ驍ｵ ｺ  ｮ髯晢ｽｷ  ｽ  ｪ  ｿ髫ｰ ｨ  ｴ鬨ｾ蛹 ｽｽ ｨ驛｢ ｧ  ｯ驛｢譎｢ ｽ ｩ驛｢ ｧ  ｹ  ｽ陜捺ｻ 飴髯  竏   ｼ陞｢ ｼ  ｿ  ｽ  ｦ遶丞｣ｺ 驛｢ ｧ驗抵ｽｽTML髯句ｹ｢ ｽ ｴ驍ｵ ｺ  ｧ髣厄ｽｴ  ｿ鬨ｾ蛹 ｽｽ ｨ髯ｷ ｿ  ｯ  ｽ  ｽ */
.product-table .header-col {
    width: 18%;
    min-width: 100px;
    font-weight: 600;
    background-color: var(--bg-gray);
}
.product-table .content-col { width: 16.4%; min-width: 80px; }

/* 髮趣ｽｸ鬩   ｿ ｽ髯ｷ莨夲ｽｽ ｹ髫ｴ ｫ隲帑ｼ夲ｽｽ ｿ  ｽ つ€  ｲ鬮ｯ ｬ  ｽ  ｽ  ｮ驛｢譎｢ ｿ ｽ  ｽ驛｢譎 § 取辨ﾂ€蛹 ｽｽ ｨ  ｽ  ｽ4髯具ｽｻ隴会ｽｦ  ｼ  ｽ */
.promotion-table .header-col {
    width: 22%;
    min-width: 120px;
    font-weight: 600;
    background-color: var(--bg-gray);
}
.promotion-table .content-col { width: 19.5%; min-width: 100px; }

/* Highlight Elements */
.highlight-yellow { background-color: var(--yellow-highlight); padding: 0.1em 0.2em; }
.highlight-red { color: var(--red-text); font-weight: 700; }

/* Voice Box */
.voice-container { background: var(--white); border: 3px solid var(--accent-color); padding: 30px 5% 10px 5%; border-radius: var(--border-radius); margin: -30px 0 40px 0; overflow-y: scroll; height: 400px; box-shadow: var(--shadow); }
.voice-item { padding: 0 0 15px 0; margin-bottom: 15px; border-bottom: 2px solid var(--accent-color); }
.voice-item:last-child { border-bottom: none; }

/* FAQ */
.faq-item { margin-bottom: 1rem; }
.faq-summary { cursor: pointer; transition: 0.2s; padding: 6px; border-radius: 6px; font-size: 20px; background: none; border: none; width: 100%; text-align: left; outline: none; }
.faq-summary:hover { background-color: #bee1de; }
.faq-summary:focus-visible { outline: dashed #00a5a0; }

/* Image Banner */
.image-banner { width: 100%; max-width: 500px; overflow: hidden; margin: 0 auto; display: block; box-sizing: border-box; border-radius: var(--border-radius); box-shadow: var(--shadow); }
.image-banner a { display: block; transition: var(--transition); text-align: center; }
.image-banner img { width: 100%; height: auto; vertical-align: middle; display: block; max-width: 100%; }
.image-banner a:hover { transform: scale(1.05); }

/* Social Media Embeds */
.social-embed { margin: 2rem auto; max-width: 550px; }

/* TOC */
.toc { background: var(--bg-gray); padding: 1rem; border-radius: var(--border-radius); margin: 2rem 0; box-shadow: var(--shadow); }
.toc summary { font-weight: 700; cursor: pointer; padding: 0.5rem; background: linear-gradient(135deg, #c2e0f4, #e3f2fd); border-radius: 4px; text-align: center; }
.toc ol { margin: 1rem 0 0 0; padding-left: 2rem; }
.toc li { margin: 0.5rem 0; }
.toc a { color: var(--main-color); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Footer */
.page-footer { background-color: var(--accent-color); padding: 1.5rem 1rem; text-align: center; font-size: 0.75rem; color: var(--white); border-top: 1px solid #ddd; margin-top: 3rem; }
.footer-inner { margin: 24px auto; }
.footer-logo { width: 300px; margin: 48px auto 0; text-align: center; }
.footer-logo img { max-width: 100%; }

/* Page Top Button */
.page-top { position: fixed; bottom: 20px; right: 20px; z-index: 1000; }
.page-top a { display: block; width: 50px; height: 50px; background: var(--main-color); color: var(--white); text-decoration: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: var(--shadow); transition: var(--transition); }
.page-top a:hover { transform: translateY(-3px); box-shadow: 0 4px 15px rgba(1, 104, 135, 0.3); }

/* Responsive Design */
@media (max-width: 768px) {
    .container { padding: 0 0.5rem; }
    .hero { padding: 1.5rem 0.5rem; }
    .btn { padding: 10px 24px; font-size: 0.95em; min-width: 100px; }
    .product-table { font-size: 0.9rem; }
    .product-table img { width: 80px; height: 80px; }
    .image-banner { max-width: 400px; padding: 0 10px; }
    .image-banner a:hover { transform: scale(1.02); }
}

@media (max-width: 480px) {
    .site-logo img { max-width: 200px; min-width: 100px; }
    .btn { padding: 8px 16px; font-size: 0.9em; min-width: 80px; }
    .product-table th, .product-table td { padding: 0.5rem; font-size: 0.8rem; }
    .product-table img { width: 60px; height: 60px; }
    .product-table .header-col { width: 25%; min-width: 80px; }
    .product-table .content-col { width: 15%; min-width: 60px; }
    .image-banner { max-width: 100%; width: calc(100% - 20px); padding: 0; margin: 0 auto; }
}

@media (max-width: 320px) {
    .btn { padding: 6px 12px; font-size: 0.85em; min-width: 60px; }
    .image-banner { width: calc(100% - 10px); }
}

/* Print Styles */
@media print {
    .social-embed, .page-top { display: none; }
    body { font-size: 12pt; line-height: 1.4; }
    .hero { background: none !important; }
    .section-title, .faq-summary { background: none !important; box-shadow: none !important; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .image-banner a:hover { transform: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Focus styles */
.btn:focus,
.faq-summary:focus { outline: 3px solid var(--accent-color); outline-offset: 2px; }