/* Reset & Basic Settings */
:root {
    --font-color-base: #333;
    --font-color-light: #555;
    --background-color: #fdfdfd;
    --accent-color: #8a7c6f;
    --border-color: #eee;
    --card-background-color: #ffffff;
    --header-height: 70px;
    --font-family-serif: 'Noto Serif JP', serif;
    --font-family-sans: 'Noto Sans JP', sans-serif;
}
*, *::before, *::after {
    box-sizing: border-box;
}
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body { margin: 0; font-family: var(--font-family-sans); color: var(--font-color-base); background-color: var(--background-color); line-height: 1.8; letter-spacing: 0.05em; word-wrap: break-word; padding-top: var(--header-height); }
h1, h2, h3, h4 { font-family: var(--font-family-serif); font-weight: 500; }
a { color: var(--font-color-base); text-decoration: none; transition: opacity 0.3s; }
a:hover { opacity: 0.7; }
img { max-width: 100%; height: auto; vertical-align: middle; }
.container { max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; }
.section-title { font-size: 2rem; text-align: center; margin-bottom: 60px; }
.btn { display: inline-block; padding: 12px 32px; border: 1px solid var(--accent-color); color: var(--accent-color); font-size: 0.9rem; transition: background-color 0.3s, color 0.3s; }
.btn:hover { background-color: var(--accent-color); color: white; opacity: 1; }
.text-center { text-align: center; }

/* Header (共通) */
.header { display: flex; justify-content: space-between; align-items: center; padding: 0 40px; height: var(--header-height); position: fixed; width: 100%; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); z-index: 100; border-bottom: 1px solid var(--border-color); }
.header-logo { font-family: var(--font-family-serif); font-size: 1.5rem; font-weight: bold; z-index: 102; }
.header-nav { display: block; }
.header-nav-list { list-style: none; margin: 0; padding: 0; display: flex; }
.header-nav-item { margin-left: 30px; }
.hamburger-menu, .mobile-nav { display: none; }

/* Hero Section (トップページ) */
.hero { height: 100vh; margin-top: calc(-1 * var(--header-height)); background-image: url('img/hero_image.png'); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; text-align: center; color: white; }
.hero-content h1 { font-size: 1.2rem; font-weight: normal; margin: 0; }
.hero-content p { font-size: 2.5rem; font-family: var(--font-family-serif); margin: 10px 0 0; text-shadow: 1px 1px 3px rgba(0,0,0,0.2); }

/* 各セクション */
.concept { text-align: center; padding-top: 80px; padding-bottom: 80px; }
.concept-body { max-width: 600px; margin: 0 auto 40px; }
.operator { display: flex; align-items: center; gap: 60px; background-color: #f7f7f7; padding-top: 80px; padding-bottom: 80px; }
.operator-icon { width: 100px; height: 100px; border-radius: 50%; flex-shrink: 0; }
.operator-body h3 { font-size: 1.8rem; margin-top: 0; }
.articles { padding-top: 80px; padding-bottom: 80px; }
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.article-card { border: 1px solid var(--border-color); display: flex; flex-direction: column; }
.article-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.article-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.article-card-body { padding: 20px; flex-grow: 1; }
.article-card-meta { font-size: 0.8rem; color: var(--font-color-light); margin-bottom: 10px; }
.article-card-title { font-size: 1.1rem; font-weight: bold; margin: 0; }
.articles .text-center, .blogs-main .text-center { text-align: center; margin-top: 60px; }
.themes { padding-top: 80px; padding-bottom: 80px; }
.themes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.theme-banner { position: relative; color: white; display: flex; justify-content: center; align-items: center; min-height: 300px; overflow: hidden; }
.theme-banner img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 0.4s ease-out; }
.theme-banner:hover img { transform: scale(1.05); }
.theme-banner-title { font-family: var(--font-family-serif); font-size: 2rem; z-index: 1; text-shadow: 1px 1px 5px rgba(0,0,0,0.3); }
.cta { background-color: #f7f7f7; padding-top: 80px; padding-bottom: 80px; text-align: center; }
.cta-body { max-width: 600px; margin: 0 auto 40px; }
.cta-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.footer { background-color: var(--font-color-base); color: white; text-align: center; padding: 40px; }
.footer-nav { list-style: none; padding: 0; margin: 0 0 20px; display: flex; justify-content: center; gap: 20px; font-size: 0.9rem; }
.footer-nav a { color: white; }
.copyright { font-size: 0.8rem; opacity: 0.7; }

/* ブログページ用スタイル */
.page-header { padding: 80px 40px 40px; text-align: center; background-color: #f7f7f7; }
.page-header h1 { font-size: 2.5rem; margin: 0; }
.page-header p { margin: 10px 0 0; color: var(--font-color-light); }
.blogs-main { padding-top: 80px; padding-bottom: 80px; }
.category-filter { text-align: center; padding-bottom: 40px; border-bottom: 1px solid var(--border-color); margin-bottom: 40px; }
.category-filter a { margin: 0 15px; padding-bottom: 5px; border-bottom: 2px solid transparent; transition: border-color 0.3s; }
.category-filter a.active, .category-filter a:hover { border-bottom-color: var(--accent-color); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 15px; list-style: none; padding: 0; }
.pagination a, .pagination span { padding: 8px 15px; border: 1px solid var(--border-color); }
.pagination a:hover { background-color: #f7f7f7; opacity: 1; }
.pagination .current { background-color: var(--accent-color); color: white; border-color: var(--accent-color); }
.post-container { max-width: 800px; padding-top: 80px; padding-bottom: 80px; }
.post-header { margin-bottom: 40px; text-align: center; }
.post-category { font-size: 0.9rem; color: var(--accent-color); font-weight: bold; }
.post-title { font-size: 2.8rem; margin: 10px 0; }
.post-meta { font-size: 0.9rem; color: var(--font-color-light); }
.post-eyecatch { margin-bottom: 40px; }
.post-content { font-size: 1.1rem; }
.post-content h2 { font-size: 2rem; margin: 60px 0 20px; padding-bottom: 10px; border-bottom: 2px solid var(--border-color); }
.post-content h3 { font-size: 1.5rem; margin: 30px 0 15px; }
.post-content p { margin: 0 0 1.8em; }
.post-content ul, .post-content ol { padding-left: 2em; margin-bottom: 1.8em; }
.post-content ul li, .post-content ol li { margin-bottom: 0.5em; }
.post-footer { margin-top: 60px; border-top: 1px solid var(--border-color); padding-top: 20px; }
.share-buttons { text-align: center; }
.author-profile { display: flex; gap: 30px; align-items: center; background-color: #f7f7f7; padding: 30px; margin-top: 60px; }
.related-articles { margin-top: 80px; }
.back-to-top-wrapper { text-align: center; margin: 60px 0 0; padding-top: 40px; border-top: 1px solid var(--border-color); }
.back-to-top-link { display: inline-block; color: var(--font-color-light); font-size: 0.9rem; position: relative; padding-left: 20px; }
.back-to-top-link::before { content: '<'; position: absolute; left: 0; font-weight: bold; transition: left 0.3s; }
.back-to-top-link:hover::before { left: -5px; }

/* インフォグラフィック用スタイル */
.infographic-container { max-width: 1200px; }
.infographic-section { margin-bottom: 80px; padding: 40px; background-color: var(--card-background-color); border: 1px solid var(--border-color); border-radius: 8px; }
.infographic-section-title { font-size: 1.8rem; text-align: center; margin-bottom: 1rem; }
.infographic-section-subtitle { text-align: center; color: var(--font-color-light); max-width: 600px; margin: 0 auto 40px auto; }
.kpi-number { font-size: 4rem; font-weight: 700; color: #c84a4a; text-align: center; }
.kpi-caption { text-align: center; font-size: 0.9rem; color: var(--font-color-light); margin-top: 0.5rem; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; }
.chart-card { text-align: center; }
.chart-card h4 { margin: 0 0 15px; }
.icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.icon-card { text-align: center; padding: 20px; background-color: #f7f7f7; border-radius: 8px; }
.icon-card .icon { font-size: 3rem; line-height: 1; }
.icon-card h4 { font-size: 1.2rem; margin: 15px 0 10px; }
.icon-card ul { list-style: none; padding: 0; margin: 0; text-align: left; font-size: 0.9rem; }
.icon-card ul li { position: relative; padding-left: 1.2em; margin-bottom: 0.5em; }
.icon-card ul li::before { content: '・'; position: absolute; left: 0; }
.paradigm-shift { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; }
.paradigm-shift .box { padding: 20px; border: 1px solid var(--border-color); border-radius: 8px; background-color: #f7f7f7; }
.paradigm-shift .arrow { font-size: 2.5rem; color: var(--accent-color); font-weight: bold; }

/* Responsive */
@media (max-width: 768px) {
    .container { padding-left: 20px; padding-right: 20px; }
    .header { padding: 0 20px; }
    .header-nav { display: none; }
    .hamburger-menu { display: block; cursor: pointer; z-index: 102; }
    .hamburger-menu span { display: block; width: 25px; height: 2px; background-color: var(--font-color-base); margin: 6px 0; transition: all 0.4s; }
    .hamburger-menu.active span:nth-of-type(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger-menu.active span:nth-of-type(2) { opacity: 0; }
    .hamburger-menu.active span:nth-of-type(3) { transform: translateY(-8px) rotate(-45deg); }
    .mobile-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(255, 255, 255, 0.98); display: flex; flex-direction: column; justify-content: center; align-items: center; transform: translateX(100%); transition: transform 0.5s ease-in-out; z-index: 101; }
    .mobile-nav.active { transform: translateX(0); }
    .mobile-nav-list { list-style: none; padding: 0; margin: 0; text-align: center; }
    .mobile-nav-item { margin: 20px 0; }
    .mobile-nav-item a { font-size: 1.2rem; }
    .hero-content p { font-size: 1.8rem; }
    .operator { flex-direction: column; gap: 30px; }
    .articles-grid { grid-template-columns: 1fr; }
    .themes-grid { grid-template-columns: 1fr; }
    .post-title { font-size: 2rem; }
    .infographic-section { padding: 20px; }
    .kpi-number { font-size: 3rem; }
    .chart-grid { grid-template-columns: 1fr; }
    .icon-grid { grid-template-columns: 1fr; }
    .paradigm-shift { flex-direction: column; }
    .author-profile { flex-direction: column; text-align: center; }
}