/*
Theme Name: BluMaLa Theme
Theme URI: https://bluemarketlab.jp
Author: BLUE MARKET LAB
Author URI: https://bluemarketlab.jp
Description: Official WordPress theme for BluMaLa Blog. Features a high-end, futuristic design with a focus on Cross-Border EC, AI, and DX.
Version: 3.6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blumala
*/

/* =========================================
   1. Variables
   ========================================= */
:root {
  /* Colors - Light Mode (Default) */
  --c-primary: #0066CC;
  --c-primary-dark: #004C99;
  --c-primary-light: #3385D6;
  --c-accent: #00E6E6;
  --c-text: #333333;
  --c-text-muted: #64748b;
  --c-bg: #FFFFFF;
  --c-bg-alt: #F5F7FA;
  --c-border: #E0E0E0;
  --c-white: #FFFFFF;

  /* Colors - Dark Mode */
  --c-dark-bg: #0A0A1A;
  --c-dark-bg-alt: #141429;
  --c-dark-text: #E0E0E0;
  --c-dark-border: #2A2A40;

  /* Fonts */
  --f-main: 'Noto Sans JP', sans-serif;
  --f-accent: 'Orbitron', sans-serif;

  /* Spacing */
  --header-height: 90px;
}

/* =========================================
   2. Base Styles
   ========================================= */
body {
  font-family: var(--f-main);
  color: var(--c-text);
  background-color: var(--c-bg);
  line-height: 1.6;
  margin: 0;
  padding-top: var(--header-height);
  transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
  --c-text: var(--c-dark-text);
  --c-bg: var(--c-dark-bg);
  --c-bg-alt: var(--c-dark-bg-alt);
  --c-border: var(--c-dark-border);
}

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

a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--c-primary-light);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  line-height: 1.4;
}

ul {
  padding-left: 0;
  list-style: none;
}

/* =========================================
   3. Layout
   ========================================= */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-header {
  background-color: var(--c-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 102, 204, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.site-logo {
  height: 60px;
  width: auto;
}

/* Navigation (Desktop - Reference Match) */
.site-navigation ul {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-navigation ul li {
  margin: 0;
}

.site-navigation ul li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  color: #1a365d;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.site-navigation ul li a i {
  color: #0066cc;
  font-size: 0.85rem;
  transition: color 0.3s ease;
}

.site-navigation ul li a:hover {
  color: #0066cc;
}

.site-navigation ul li a:hover i {
  color: #00b3e6;
}

/* CTA button li should not have padding */
.site-navigation ul li.menu-item-cta a {
  padding: 0;
}

/* Header CTA Button (Refined for v3.6.6) */
.btn-header-cta {
  background: linear-gradient(to bottom, #00b3e6, #0066cc);
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 25px;
  font-weight: 600;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 50, 100, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-header-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(to bottom, #11c1f3, #0077ee);
  box-shadow: 0 6px 20px rgba(0, 50, 100, 0.3);
  color: #fff !important;
}

.btn-header-cta i {
  font-size: 0.85rem;
}

/* Footer */
.site-footer {
  background-color: #f8fafc;
  padding: 40px 0 30px;
  border-top: 1px solid var(--c-border);
  margin-top: 30px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-widgets {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-bottom: 60px;
}

.site-logo-footer {
  height: 40px;
  width: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.site-logo-footer:hover {
  opacity: 1;
}

.footer-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.footer-navigation ul li a {
  color: var(--c-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer-navigation ul li a:hover {
  color: var(--c-primary);
}

.footer-bottom {
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.copyright {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 0;
}

/* Sidebar Layout */
.main-container {
  padding: 60px 20px;
}

.row {
  display: flex;
  gap: 40px;
}

.content-area {
  flex: 2.5;
}

.sidebar-area {
  flex: 1;
}

/* =========================================
   4. Components
   ========================================= */
/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 700;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
  color: #fff;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--c-primary);
  color: var(--c-white);
  padding: 15px 40px;
  font-weight: 700;
  border-radius: 4px;
  /* Sharper corners for modern look */
  box-shadow: 0 4px 10px rgba(0, 102, 204, 0.3);
  transition: all 0.3s ease;
}

.btn-hero:hover {
  background-color: var(--c-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 102, 204, 0.4);
  color: var(--c-white);
}

/* Widgets */
.widget {
  background: var(--c-bg);
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.widget-title {
  font-family: var(--f-accent);
  font-size: 1.2rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-primary);
}

/* Hamburger Menu (Mobile) */
.hamburger-menu {
  display: none;
  /* Hidden on Desktop */
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #002b5c;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
  /* Above mobile nav */
}

/* =========================================
   5. Sections
   ========================================= */
/* Hero Section (Main Visual) */
.hero-full-width {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: var(--c-white);
  /* Padding top is handled by body margin/padding */
  z-index: 1;
}

.hero-visual-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Base layer */
}

.hero-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1350px;
  /* Wider container for hero */
  margin: 0 auto;
  padding: 0 20px;
}

.hero-title {
  font-size: 3.2rem;
  /* Reduced from 3.5rem to prevent wrapping */
  font-weight: 800;
  color: #002b5c;
  /* Dark Blue */
  margin-bottom: 20px;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  letter-spacing: -0.05em;
  /* Tighter tracking */
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 30px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

/* Premium Categories Section */
.section-premium-bg {
  position: relative;
  background-color: var(--c-bg-alt);
  background-image: radial-gradient(#dbeafe 2px, transparent 2px);
  background-size: 30px 30px;
  padding: 60px 0;
}

.section-title-modern {
  text-align: center;
  margin-bottom: 50px;
}

.section-title-modern h2 {
  font-size: 2.4rem;
  font-weight: 900;
  background: linear-gradient(90deg, #002b5c, var(--c-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Fallback */
  letter-spacing: 3px;
  display: inline-block;
  position: relative;
}

.section-title-modern h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  background: var(--c-primary);
  margin: 15px auto 0;
  border-radius: 2px;
  opacity: 0.5;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  padding: 10px;
  position: relative;
  z-index: 2;
}

.category-card {
  background: rgba(255, 255, 255, 0.85);
  /* Glassmorphism */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 40px 30px;
  text-align: left;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02), 0 10px 30px rgba(0, 43, 92, 0.05);
  overflow: hidden;
  cursor: pointer;
  display: block;
  height: 100%;
}

.category-card:hover {
  transform: translateY(-12px) scale(1.03);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 25px 50px rgba(0, 78, 162, 0.2), 0 0 0 2px rgba(0, 102, 204, 0.3);
  z-index: 10;
}

.cat-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #e0f2ff 0%, #f0f8ff 100%);
  border-radius: 20px;
  margin-bottom: 25px;
  color: var(--c-primary);
  font-size: 1.8rem;
  transition: all 0.4s ease;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.category-card:hover .cat-icon-wrapper {
  background: linear-gradient(135deg, var(--c-primary) 0%, #0052a3 100%);
  color: var(--c-white);
  transform: rotate(-5deg) scale(1.15);
  box-shadow: 0 10px 20px rgba(0, 102, 204, 0.4);
}

.category-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: #0f172a;
  letter-spacing: 0.5px;
}

.category-card p {
  font-size: 0.95rem;
  color: var(--c-text-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

.card-arrow {
  position: absolute;
  bottom: 30px;
  right: 30px;
  opacity: 0;
  transform: translateX(-15px);
  transition: all 0.4s ease;
  color: var(--c-primary);
  font-size: 1.2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 102, 204, 0.2));
}

.category-card:hover .card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Latest Posts Section */
.latest-posts-section {
  padding: 80px 0;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.post-card {
  background: var(--c-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.post-thumbnail {
  aspect-ratio: 16/9;
  background-color: #eee;
  overflow: hidden;
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-content {
  padding: 20px;
}

.post-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
}

.post-meta {
  font-size: 0.85rem;
  color: #888;
}

/* Profile Section on Home */
.blumala-profile-section {
  background-color: var(--c-bg-alt);
  padding: 80px 0;
}

.profile-container {
  display: flex;
  align-items: center;
  gap: 50px;
}

.profile-image img {
  max-width: 300px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* =========================================
   6. Utilities
   ========================================= */
.text-center {
  text-align: center;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-40 {
  margin-bottom: 40px;
}

/* =========================================
   Premium Design Overrides
   ========================================= */

/* Section Backgrounds */
.section-premium-bg {
  position: relative;
  background-color: #f5f7fa !important;
  background-image: radial-gradient(#dbeafe 2px, transparent 2px) !important;
  background-size: 30px 30px !important;
  padding: 60px 0;
}

/* Categories Grid */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  padding: 10px;
  position: relative;
  z-index: 2;
}

/* Category Card Styling */
.category-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 20px 25px;
  /* Ultra compact padding */
  text-align: left;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.02),
    0 10px 40px rgba(0, 43, 92, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.category-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  transition: 0.5s;
}

.category-card:hover::after {
  left: 100%;
}

.category-card:hover {
  transform: translateY(-15px) scale(1.02);
  background: rgba(255, 255, 255, 1);
  box-shadow:
    0 30px 60px rgba(0, 78, 162, 0.15),
    0 0 0 1px rgba(0, 102, 204, 0.1);
  z-index: 10;
}

/* Icon Wrapper Styles */
.cat-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #f0f7ff 0%, #e0f2ff 100%);
  border-radius: 24px;
  margin-bottom: 30px;
  color: #0066CC;
  font-size: 2rem;
  box-shadow: 0 8px 15px rgba(0, 102, 204, 0.08);
  transition: all 0.4s ease;
}

.category-card:hover .cat-icon-wrapper {
  transform: rotate(-5deg) scale(1.1);
  background: linear-gradient(135deg, #0066CC 0%, #00e6e6 100%);
  color: #fff;
  box-shadow: 0 12px 25px rgba(0, 102, 204, 0.3);
}

.category-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: #0f172a;
  letter-spacing: 0.5px;
}

.category-card p {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 0;
}

/* Arrow Icon */
.card-arrow {
  position: absolute;
  bottom: 30px;
  right: 30px;
  opacity: 0;
  transform: translateX(-15px);
  transition: all 0.4s ease;
  color: #0066CC;
  font-size: 1.2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 102, 204, 0.2));
}

.category-card:hover .card-arrow {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Modern Section Title */
.section-title-modern {
  text-align: center;
  margin-bottom: 50px;
}

.section-title-modern h2 {
  font-size: 2.4rem;
  font-weight: 900;
  background: linear-gradient(90deg, #002b5c, #0066CC);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Fallback */
  letter-spacing: 3px;
  display: inline-block;
  position: relative;
}

.section-title-modern h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  background: #0066CC;
  margin: 15px auto 0;
  border-radius: 2px;
  opacity: 0.5;
}

/* =========================================
   7. Responsive Design
   ========================================= */
@media (max-width: 991px) {

  /* Tablet */
  .hero-title {
    font-size: 2.8rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }

  .row {
    flex-direction: column;
  }
}

@media (max-width: 1024px) {
  /* Tablet and Mobile */

  /* Navigation (Drawer) */
  .hamburger-menu {
    display: block;
    /* Show menu button */
  }

  .site-navigation {
    position: fixed;
    top: 0;
    right: -100%;
    /* Hidden by default */
    width: 80%;
    height: 100vh;
    background: var(--c-white);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: 80px;
    z-index: 1000;
    display: block;
    visibility: hidden;
  }

  .site-navigation.active {
    right: 0;
    /* Slide in */
    visibility: visible;
  }

  .site-navigation ul {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 30px;
    gap: 0;
  }

  .site-navigation ul li {
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
  }

  .site-navigation ul li a {
    font-size: 1.2rem;
    color: #002b5c;
    display: block;
    padding: 15px 0;
  }

  /* Hero Adjustments */
  .hero-full-width {
    height: auto !important;
    min-height: 600px !important;
    padding-top: 100px;
    align-items: flex-start !important;
  }

  .hero-content {
    padding-top: 40px;
  }

  .hero-main-img {
    object-position: 70% center !important;
  }

  .hero-title {
    font-size: 2.2rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 20px;
  }

  /* Components */
  .section-title-modern h2 {
    font-size: 1.8rem;
  }

  .section-premium-bg {
    padding: 40px 0;
  }

  .categories-grid {
    grid-template-columns: 1fr;
    /* 1 column on tablet/mobile */
    gap: 12px;
    /* Tighter gap on mobile */
  }

  .category-card {
    padding: 15px 20px;
    /* Much shorter cards on mobile */
  }

  .cat-icon-wrapper {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    margin-bottom: 12px;
  }

  .category-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
  }

  .category-card p {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .profile-container {
    flex-direction: column;
    text-align: center;
  }
}

.btn-accent {
  background: linear-gradient(135deg, var(--c-accent), #00B3B3);
  color: #fff;
}

.section-title {
  font-family: var(--f-accent);
  font-size: 2rem;
  color: var(--c-primary-dark);
  margin-bottom: 40px;
  position: relative;
  padding-left: 20px;
  border-left: 5px solid var(--c-primary);
}

body.dark-mode .section-title {
  color: var(--c-accent);
  border-left-color: var(--c-accent);
}

.text-center {
  text-align: center;
}

/* =========================================
   Header
   ========================================= */
.site-header {
  background-color: #ffffff;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 90px;
  display: flex;
  align-items: center;
}

body.dark-mode .site-header {
  background-color: #0A0A1A;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1300px;
}

.site-branding {
  display: flex;
  align-items: center;
}

.site-logo {
  height: 60px;
  width: auto;
  margin-right: 0;
}

/* 繝ｭ繧ｴ繧ｵ繧､繧ｺ隱ｿ謨ｴ */

.site-title-text {
  display: none;
}

/* 繝ｭ繧ｴ逕ｻ蜒上′縺ゅｋ縺ｮ縺ｧ繝・く繧ｹ繝医・髱櫁｡ｨ遉ｺ */

.site-navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-navigation ul li {
  margin-left: 25px;
}

.site-navigation ul li a {
  color: #444;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--f-main);
}

.site-navigation ul li a:hover {
  color: var(--c-primary);
}

body.dark-mode .site-navigation ul li a {
  color: var(--c-dark-text);
}

.header-actions {
  display: flex;
  gap: 15px;
}

.theme-toggle-btn,
.menu-toggle-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--c-text);
}

/* =========================================
   Hero Section
   ========================================= */
.hero-section {
  position: relative;
  min-height: 650px;
  padding-top: 90px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* 閭梧勹陬・｣ｾ・郁埋縺・ヱ繧ｿ繝ｼ繝ｳ縺ｪ縺ｩ縺悟ｿ・ｦ√↑繧峨％縺薙↓霑ｽ蜉�・・*/
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 80% 50%, #f0f8ff 0%, #ffffff 60%);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-text {
  flex: 1;
  max-width: 550px;
  padding-bottom: 30px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 20px;
  color: #002b5c;
  letter-spacing: 0.5px;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: #444;
  font-weight: 700;
  margin-bottom: 35px;
  line-height: 1.6;
}

/* 繝懊ち繝ｳ菫ｮ豁｣ */
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #0066CC;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 14px 40px;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 102, 204, 0.2);
  transition: all 0.3s ease;
}

.btn-hero:hover {
  background-color: #0052a3;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 102, 204, 0.3);
}

.btn-hero i {
  margin-left: 8px;
}

/* 繝偵・繝ｭ繝ｼ逕ｻ蜒上お繝ｪ繧｢ */
.hero-visual {
  flex: 1.2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  /* 蜿ｳ蛛ｴ縺ｫ縺ｯ縺ｿ蜃ｺ縺励※繧ゅｈ縺・ョ繧ｶ繧､繝ｳ縺ｪ繧芽ｪｿ謨ｴ */
}

.hero-character-img {
  max-width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  /* 繝峨Ο繝・・繧ｷ繝｣繝峨え縺ｧ蟆代＠豬ｮ縺九○繧・*/
  filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.1));
}

@media (max-width: 900px) {
  .hero-section {
    min-height: auto;
    padding-bottom: 50px;
  }

  .hero-content {
    flex-direction: column-reverse;
    text-align: center;
  }

  .hero-text {
    max-width: 100%;
    padding-top: 30px;
  }

  .hero-visual {
    width: 80%;
    margin: 0 auto;
    justify-content: center;
  }

  .hero-title {
    font-size: 2.5rem;
  }
}

/* =========================================
   Category Navigation
   ========================================= */
.category-nav-section {
  padding: 60px 0;
  background-color: var(--c-bg-alt);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Old Category Card Styling - Removed for V3
.category-card {
  background: var(--c-bg);
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
  border-top: 3px solid transparent;
}

body.dark-mode .category-card {
  background: var(--c-dark-bg);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.category-card:hover {
  transform: translateY(-5px);
  border-top-color: var(--c-accent);
}

.cat-icon {
  font-size: 2.5rem;
  color: var(--c-primary);
  margin-bottom: 15px;
}
*/

.category-card h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: var(--c-text);
}

body.dark-mode .category-card h3 {
  color: var(--c-dark-text);
}

.category-card p {
  font-size: 0.9rem;
  color: #777;
  margin: 0;
}

/* =========================================
   Latest Posts
   ========================================= */
.latest-posts-section {
  padding: 80px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.post-card {
  background: var(--c-bg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

body.dark-mode .post-card {
  background: var(--c-dark-bg-alt);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.post-card:hover {
  transform: translateY(-5px);
}

.post-thumbnail {
  height: 200px;
  overflow: hidden;
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.post-card:hover .post-thumbnail img {
  transform: scale(1.05);
}

.post-content {
  padding: 20px;
}

.post-cat {
  display: inline-block;
  background-color: var(--c-primary);
  color: #fff;
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.post-title {
  font-size: 1.1rem;
  margin: 0 0 10px;
  line-height: 1.4;
  color: var(--c-text);
}

body.dark-mode .post-title {
  color: var(--c-dark-text);
}

.post-meta {
  font-size: 0.85rem;
  color: #888;
}

/* =========================================
   Profile Section
   ========================================= */
.blumala-profile-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #001f3f, #003366);
  color: #fff;
}

.profile-container {
  display: flex;
  align-items: center;
  gap: 50px;
}

.profile-image {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.profile-char-img {
  height: 400px;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
}

.profile-text {
  flex: 1.5;
}

.profile-name {
  font-family: var(--f-accent);
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.en-name {
  font-size: 1.5rem;
  opacity: 0.8;
}

.profile-role {
  color: var(--c-accent);
  font-weight: 700;
  margin-bottom: 20px;
}

/* =========================================
   Mobile Styles
   ========================================= */
.mobile-only {
  display: none;
}

@media (max-width: 1024px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-character-img {
    height: 300px;
  }

  .hero-content {
    flex-direction: column-reverse;
    text-align: center;
  }

  .profile-container {
    flex-direction: column;
    text-align: center;
  }

  .profile-image {
    justify-content: center;
  }

  .section-title {
    font-size: 1.5rem;
  }
}

/* =========================================
   Mobile Menu
   ========================================= */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.menu-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

.mobile-navigation ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

.mobile-navigation ul li {
  margin: 20px 0;
}

.mobile-navigation ul li a {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}

/* =========================================
   Refactored Hero Section
   ========================================= */
.hero-full-width {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding-top: 90px;
  /* Header height space */
}

.hero-visual-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #002b5c;
  margin-bottom: 20px;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 30px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  background-color: #0066CC;
  padding: 15px 40px;
  color: #ffffff;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 102, 204, 0.3);
  transition: all 0.3s ease;
  gap: 10px;
}

.btn-hero:hover {
  background-color: #0050a0;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 102, 204, 0.4);
  color: #fff;
}

.btn-hero i {
  margin-left: 5px;
}

/* =========================================
   Premium Design Overrides & Responsive
   ========================================= */
/* ... (譌｢蟄倥・Premium繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ縺ｯ邯ｭ謖√€√Ξ繧ｹ繝昴Φ繧ｷ繝門・縺ｧ .hero-main-img 縺ｮ隱ｿ謨ｴ繧定｡後≧) ... */

/* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ閭梧勹 */
.section-premium-bg {
  position: relative;
  background-color: #f5f7fa;
  background-image: radial-gradient(#dbeafe 2px, transparent 2px);
  background-size: 30px 30px;
  padding: 60px 0;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  padding: 10px;
  position: relative;
  z-index: 2;
}

/* ... (繧ｫ繝ｼ繝峨せ繧ｿ繧､繝ｫ遲峨・螟画峩縺ｪ縺・ ... */

/* ---------------------------------------
   Responsive Styles (Refactored)
   --------------------------------------- */
@media (max-width: 991px) {
  .hero-title {
    font-size: 2.8rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }
}

@media (max-width: 1024px) {
  /* 繝｢繝舌う繝ｫ蜈ｨ闊ｬ */

  /* 繝偵・繝ｭ繝ｼ繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ隱ｿ謨ｴ */
  .hero-full-width {
    height: auto !important;
    min-height: 600px !important;
    padding-top: 100px;
    align-items: flex-start !important;
  }

  .hero-main-img {
    object-position: 70% center !important;
    /* 繧ｹ繝槭・縺ｧ逕ｻ蜒上・濶ｯ縺・ｽ咲ｽｮ繧定｡ｨ遉ｺ */
  }

  .hero-content {
    padding-top: 60px !important;
  }

  .hero-title {
    font-size: 2.2rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 20px;
  }

  .section-title-modern h2 {
    font-size: 1.8rem;
  }

  .section-premium-bg {
    padding: 40px 0;
  }

  /* 繝上Φ繝舌・繧ｬ繝ｼ繝｡繝九Η繝ｼ陦ｨ遉ｺ */
  .hamburger-menu {
    display: block;
  }

  /* 繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ繧偵ラ繝ｭ繝ｯ繝ｼ繝｡繝九Η繝ｼ蛹・*/
  .site-navigation {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background: #ffffff;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: 80px;
    display: block;
    z-index: 1000;
    visibility: hidden;
  }

  .site-navigation.active {
    right: 0;
    visibility: visible;
  }

  /* ... (繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ隧ｳ邏ｰ) ... */
  .site-navigation ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 30px;
  }

  .site-navigation ul li {
    margin: 20px 0;
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .site-navigation ul li a {
    font-size: 1.2rem;
    color: #002b5c;
    display: block;
    padding-bottom: 10px;
  }
}

/* =========================================
   Sidebar & Widgets
   ========================================= */
.main-container {
  padding: 60px 20px;
}

.row {
  display: flex;
  gap: 40px;
}

.content-area {
  flex: 2.5;
}

.sidebar-area {
  flex: 1;
}

.sidebar .widget {
  background: var(--c-bg);
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

body.dark-mode .sidebar .widget {
  background: var(--c-dark-bg-alt);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.widget-title {
  font-family: var(--f-accent);
  font-size: 1.2rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-primary);
}

/* Profile Widget */
.profile-box {
  text-align: center;
}

.profile-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 15px;
  background: linear-gradient(135deg, var(--c-bg-alt), #eef2f7);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-char-img {
  width: 80%;
  height: auto;
}

.profile-info .name {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.profile-info .role {
  font-size: 0.8rem;
  color: var(--c-primary);
  margin-bottom: 15px;
}

.profile-info .intro {
  font-size: 0.9rem;
  text-align: left;
  margin-bottom: 20px;
}

.btn-sm {
  padding: 8px 20px;
  font-size: 0.9rem;
}

.btn-outline {
  border: 2px solid var(--c-primary);
  color: var(--c-primary);
  background: transparent;
}

.btn-outline:hover {
  background: var(--c-primary);
  color: #fff;
}

/* Category Widget */
.widget_categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget_categories ul li {
  border-bottom: 1px solid var(--c-border);
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
}

body.dark-mode .widget_categories ul li {
  border-color: var(--c-dark-border);
}

.widget_categories ul li a {
  color: var(--c-text);
}

body.dark-mode .widget_categories ul li a {
  color: var(--c-dark-text);
}

/* Popular Posts Widget (Simple Style) */
.popular-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.popular-posts-list li {
  margin-bottom: 15px;
}

.popular-posts-list a {
  display: flex;
  gap: 10px;
  color: var(--c-text);
  font-weight: 700;
  font-size: 0.95rem;
}

body.dark-mode .popular-posts-list a {
  color: var(--c-dark-text);
}

.rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  background: #ccc;
  color: #fff;
  border-radius: 4px;
  font-family: var(--f-accent);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.rank-1 {
  background: #FFD700;
}

.rank-2 {
  background: #C0C0C0;
}

.entry-title {
  font-size: 1.5rem;
}

body.dark-mode .entry-cta-box {
  background: var(--c-dark-bg-alt);
  border-color: var(--c-accent);
}

.cta-inner {
  display: flex;
  align-items: center;
  gap: 30px;
}

.cta-icon img {
  height: 100px;
}

.cta-text h3 {
  margin: 0 0 10px;
  color: var(--c-primary);
}

body.dark-mode .cta-text h3 {
  color: var(--c-accent);
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 900px) {
  .row {
    flex-direction: column;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-character-img {
    height: 400px;
  }
}

@media (max-width: 600px) {
  .cta-inner {
    flex-direction: column;
    text-align: center;
  }

  .entry-title {
    font-size: 1.5rem;
  }
}

/* =========================================
   7. Top Designer Header Navigation (V3)
   ========================================= */

/* NOTE: .btn-header-cta styles are defined earlier in the file (around line 175) with the correct gradient */

/* Ensure link text is white */
.btn-header-cta a,
.main-navigation ul li.btn-header-cta a {
  color: #ffffff !important;
}

.btn-header-cta:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 102, 204, 0.5);
  filter: brightness(1.1);
  color: #fff !important;
}

.btn-header-cta i {
  font-size: 1.1em;
}

/* Menu Item Icons */
.main-navigation ul li a i {
  margin-right: 6px;
  color: #0066cc;
  transition: color 0.3s;
}

.main-navigation ul li a:hover i {
  color: #00e6e6;
}

/* Ensure Logo acts as Home properly */
.site-branding a {
  display: block;
  transition: opacity 0.3s;
}

.site-branding a:hover {
  opacity: 0.8;
}

/* =========================================
   8. Design Audit Improvements (v2.0)
   ========================================= */

/* CTA Button Pulse Animation - DISABLED (v2.1) */
/*
@keyframes ctaPulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
  }
  50% {
    box-shadow: 0 4px 25px rgba(0, 102, 204, 0.6), 0 0 30px rgba(0, 230, 230, 0.4);
  }
}
*/

.btn-header-cta {
  /* Animation removed for v2.1 */
}

.btn-header-cta:hover {
  animation: none;
  box-shadow: 0 8px 30px rgba(0, 102, 204, 0.6);
}

/* Mobile Drawer CTA - Hidden (use fixed bottom bar instead) */
@media (max-width: 1024px) {
  .site-navigation ul li.menu-item-cta {
    display: none;
    /* Hidden: Use the fixed bottom CTA bar instead for cleaner UX */
  }
}

/* Mobile Fixed CTA Bar */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 1024px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #0066cc, #00e6e6);
    padding: 15px 20px;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0, 102, 204, 0.3);
  }

  .mobile-cta-bar a {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mobile-cta-bar i {
    font-size: 1.2rem;
  }

  /* Add bottom padding to body to prevent content overlap */
  body {
    padding-bottom: 70px;
  }
}

/* Footer Enhancement */
.footer-social {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background: rgba(0, 102, 204, 0.1);
  border-radius: 50%;
  color: #0066CC;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.footer-social a:hover {
  background: linear-gradient(135deg, #0066cc, #00e6e6);
  color: #fff;
  transform: translateY(-3px);
}

.footer-newsletter {
  max-width: 400px;
  margin: 0 auto 30px;
}

.footer-newsletter h4 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #002b5c;
}

.newsletter-form {
  display: flex;
  gap: 10px;
}

.newsletter-form input[type='email'] {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
}

.newsletter-form button {
  padding: 12px 25px;
  background: linear-gradient(135deg, #0066cc, #00e6e6);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.newsletter-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}