/* リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 基本設定 */
body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fafafa;
}

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

/* Page load smoothing for asynchronously loaded header/footer */
/* Initial state - everything hidden */
body.components-loading {
    background-color: #fafafa;
}

body.components-loading main,
body.components-loading .container {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    filter: blur(5px);
    pointer-events: none;
}

/* ヘッダーとフッターは常に表示（アニメーション効果を除外） */
body.components-loading header,
body.components-loading .header,
body.components-loading footer,
body.components-loading .footer {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
}

/* Animation state - prepare for transitions */
body.components-animate main,
body.components-animate .container {
    transition: all 1500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ヘッダーとフッターは常に表示（アニメーション効果を除外） */
body.components-animate header,
body.components-animate .header,
body.components-animate footer,
body.components-animate .footer {
    transition: none !important;
}

/* Final state - reveal everything with nice effects */
body.components-ready main,
body.components-ready .container {
    opacity: 1;
    transform: none;
    filter: blur(0);
    pointer-events: auto;
}

/* ヘッダーとフッターは常に表示（アニメーション効果を除外） */
body.components-ready header,
body.components-ready .header,
body.components-ready footer,
body.components-ready .footer {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
}

/* Progressive content reveal */
.hero-content,
.features,
.learning-preview,
.quiz-section,
.about-section,
.activities-section {
    opacity: 0;
    transform: translateY(30px);
    transition: all 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.element-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Enhanced hover effects for interactive elements after ready */
body.components-ready a:hover,
body.components-ready .btn:hover,
body.components-ready .feature-card:hover,
body.components-ready .activity-card:hover,
body.components-ready .content-card:hover,
body.components-ready .support-way:hover,
body.components-ready .philosophy-item:hover {
    transform: translateY(-8px) scale(1.03);
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Skeleton visuals for placeholders */
.header-skeleton { background: linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02)); }
.footer-skeleton { background: linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02)); }

/* ヘッダープレースホルダー（固定ヘッダーの高さ分のスペースを確保） */
#header-placeholder {
    height: 80px;
    position: relative;
}

/* ヘッダー */
.header {
    background: rgba(255, 228, 236, 0.98); /* もう少し濃いピンクの背景 */
    backdrop-filter: blur(10px); /* 背景を少しぼかしてより自然に */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 軽い影を追加 */
    position: fixed; /* スクロールしても常に同じ位置に固定 */
    top: 0;
    left: 0;
    right: 0;
    z-index: 10003; /* 常に最前面に表示 */
    width: 100%;
    opacity: 1 !important; /* 常に表示 */
    visibility: visible !important; /* 常に表示 */
    transform: none !important; /* 位置を固定 */
    display: block !important; /* 常に表示 */
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    position: relative;
    z-index: inherit; /* ヘッダーのz-indexを継承 */
}

.logo-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.logo-link h1, .logo-link p {
    margin: 0;
}

.logo h1 {
    color: #333; /* 黒色 */
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.logo p {
    color: #333; /* 黒色 */
    font-size: 0.9rem;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
    position: relative;
    z-index: inherit; /* ヘッダーのz-indexを継承 */
    filter: none !important; /* ブラー効果から保護 */
    transform: none !important; /* 変形から保護 */
}

/* デスクトップでのみ表示 */
@media (min-width: 769px) {
    .nav-menu {
        display: flex !important;
        position: relative !important;
        flex-direction: row !important;
    }
}

.nav-menu a {
    color: #333; /* 黒色 */
    text-decoration: none;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
    background-color: rgba(255, 107, 107, 0.15); /* 薄いピンクのホバー効果 */
    color: #ff6b6b; /* ホバー時はピンク系の色に */
    transform: translateY(-2px);
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    background: rgba(255, 107, 107, 0.1);
    transition: background-color 0.3s ease;
    position: relative;
}

.hamburger:hover {
    background: rgba(255, 107, 107, 0.2);
}

.hamburger span {
    width: 24px;
    height: 3px;
    background-color: #333; /* 黒色 */
    margin: 4px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    display: block;
    border-radius: 2px;
}

/* メニューが開いているときのハンバーガーボタンの色変更 */
body.menu-open .hamburger span {
    background-color: #333; /* 黒色 */
}

/* ヒーローセクション */
.hero {
    position: relative;
    padding: 80px 0;
    display: flex;
    align-items: center;
    min-height: 70vh;
}

/* ヒーローを全面背景画像に */
.hero-image-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('cat-hero.jpg');
    background-size: cover;       /* 画面全体をカバー（トリミング最小限） */
    background-position: center;  /* 中央配置 */
    background-repeat: no-repeat;
    filter: brightness(0.72) saturate(1.05); /* 文字が読みやすいように暗めに */
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1; /* 背景画像より前に出す */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 見出しを左寄せの大きめに。背景に乗っても読みやすく */
.hero-image-bg .hero-content h2 {
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(0,0,0,0.35);
}

.hero-image-bg .hero-content p {
    color: rgba(255,255,255,0.95);
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

.hero-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    line-height: 1.3;
}

.hero-content p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 30px;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 20px;
}

.btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background-color: white;
    color: #ff6b6b;
}

.btn-primary:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background-color: white;
    color: #ff6b6b;
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    color: #ff6b6b;
    border: 2px solid #ff6b6b;
}

.btn-outline:hover {
    background-color: #ff6b6b;
    color: white;
    transform: translateY(-2px);
}

/* 猫のイラスト */
/* ヒーロー画像（写真） */
.hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-cat-image {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: contain; /* 見切れないように等倍で収める */
    object-position: center;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* 特徴セクション */
.features {
    padding: 80px 0;
    background-color: white;
}

.features h3 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
}

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

.feature-card {
    text-align: center;
    padding: 40px 20px;
    border-radius: 20px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

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

.feature-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.feature-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.feature-card p {
    color: #666;
    line-height: 1.6;
}

/* 学習コンテンツプレビュー */
.learning-preview {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.learning-preview h3 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
}

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

.content-card {
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

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

.content-image {
    height: 200px;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-placeholder {
    font-size: 4rem;
}

.content-info {
    padding: 30px;
}

.content-info h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.content-info p {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* クイズセクション */
.quiz-section {
    padding: 80px 0;
    background-color: white;
}

.quiz-section h3 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.quiz-section p {
    text-align: center;
    color: #666;
    margin-bottom: 50px;
    font-size: 1.1rem;
}

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

.quiz-card {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.quiz-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255,107,107,0.3);
}

.quiz-card h4 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.quiz-card p {
    margin-bottom: 25px;
    opacity: 0.9;
}

/* ページヘッダー */
.page-header {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    padding: 60px 0;
    text-align: center;
}

.page-header h2 {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.page-header p {
    color: rgba(255,255,255,0.9);
    font-size: 1.1rem;
}

/* 学習コンテンツページ */
.table-of-contents {
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    margin: 40px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.table-of-contents h3 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.table-of-contents ul {
    list-style: none;
}

.table-of-contents li {
    margin-bottom: 10px;
}

.table-of-contents a {
    color: #ff6b6b;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.table-of-contents a:hover {
    color: #ff8e8e;
}

.learning-section {
    background-color: white;
    padding: 40px;
    border-radius: 15px;
    margin: 40px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.learning-section h3 {
    color: #ff6b6b;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    border-bottom: 3px solid #ff6b6b;
    padding-bottom: 10px;
}

.content-block {
    margin-bottom: 40px;
}

.content-block h4 {
    color: #333;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.content-block p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 15px;
}

.highlight-box {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    padding: 20px;
    border-radius: 10px;
    border-left: 5px solid #ff6b6b;
    margin: 20px 0;
}

.highlight-box h5 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.info-list {
    list-style: none;
    padding-left: 0;
}

.info-list li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: #666;
}

.info-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ff6b6b;
    font-weight: bold;
}

.freedom-list {
    list-style: none;
    counter-reset: freedom-counter;
}

.freedom-list li {
    counter-increment: freedom-counter;
    padding: 15px 0;
    padding-left: 50px;
    position: relative;
    color: #666;
    border-bottom: 1px solid #eee;
}

.freedom-list li::before {
    content: counter(freedom-counter);
    position: absolute;
    left: 0;
    top: 15px;
    background-color: #ff6b6b;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.statistics-box {
    background-color: #f8f9fa;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid #ff6b6b;
    margin: 20px 0;
}

.statistics-box h5 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.statistics-box ul {
    list-style: none;
}

.statistics-box li {
    padding: 5px 0;
    color: #666;
}

.cause-list {
    list-style: none;
    counter-reset: cause-counter;
}

.cause-list li {
    counter-increment: cause-counter;
    padding: 15px 0;
    padding-left: 50px;
    position: relative;
    color: #666;
    border-bottom: 1px solid #eee;
}

.cause-list li::before {
    content: counter(cause-counter);
    position: absolute;
    left: 0;
    top: 15px;
    background-color: #ff6b6b;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

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

.problem-card {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid #ff6b6b;
}

.problem-card h5 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.problem-card p {
    color: #666;
    font-size: 0.9rem;
}

.checklist-box {
    background-color: #e8f5e8;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid #4CAF50;
    margin: 20px 0;
}

.checklist-box h5 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.checklist-box ul {
    list-style: none;
}

.checklist-box li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: #666;
}

.checklist-box li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
}

.process-list {
    list-style: none;
    counter-reset: process-counter;
}

.process-list li {
    counter-increment: process-counter;
    padding: 15px 0;
    padding-left: 50px;
    position: relative;
    color: #666;
    border-bottom: 1px solid #eee;
}

.process-list li::before {
    content: counter(process-counter);
    position: absolute;
    left: 0;
    top: 15px;
    background-color: #ff6b6b;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.preparation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.prep-category {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border-top: 4px solid #ff6b6b;
}

.prep-category h5 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.prep-category ul {
    list-style: none;
}

.prep-category li {
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
    color: #666;
    font-size: 0.9rem;
}

.prep-category li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #ff6b6b;
    font-weight: bold;
}

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

.support-card {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #ff6b6b;
    transition: all 0.3s ease;
}

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

.support-card h5 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.support-card p {
    color: #666;
    font-size: 0.9rem;
}

.tnr-explanation {
    background-color: #e3f2fd;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid #2196F3;
    margin: 20px 0;
}

.tnr-explanation h5 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.tnr-explanation ul {
    list-style: none;
}

.tnr-explanation li {
    padding: 5px 0;
    padding-left: 25px;
    position: relative;
    color: #666;
}

.tnr-explanation li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #2196F3;
    font-weight: bold;
}

.responsibility-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.responsibility-item {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid #ff6b6b;
}

.responsibility-item h5 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.responsibility-item p {
    color: #666;
    font-size: 0.9rem;
}

.prevention-box {
    background-color: #fff3e0;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid #ff9800;
    margin: 20px 0;
}

.prevention-box h5 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.prevention-box ul {
    list-style: none;
    margin-bottom: 20px;
}

.prevention-box li {
    padding: 5px 0;
    padding-left: 25px;
    position: relative;
    color: #666;
}

.prevention-box li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #ff9800;
    font-weight: bold;
}

.learning-complete {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    margin: 40px 0;
}

.learning-complete h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.learning-complete p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* クイズページ */
.quiz-selection {
    padding: 40px 0;
}

.quiz-selection h3 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
}

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

.quiz-option {
    background-color: white;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.quiz-option:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.quiz-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.quiz-option h4 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.quiz-option p {
    color: #666;
    margin-bottom: 20px;
}

.quiz-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    font-size: 0.9rem;
    color: #888;
}

.quiz-container {
    padding: 40px 0;
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    background-color: white;
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.quiz-progress {
    display: flex;
    align-items: center;
    gap: 15px;
}

.progress-bar {
    width: 200px;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
    transition: width 0.3s ease;
}

.progress-text {
    font-weight: 600;
    color: #333;
}

.quiz-score {
    font-weight: 600;
    color: #333;
}

.quiz-question {
    background-color: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.quiz-question h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.5;
}

.quiz-options-list {
    display: grid;
    gap: 15px;
}

.quiz-option-btn {
    background-color: #f8f9fa;
    border: 2px solid #e0e0e0;
    padding: 20px;
    border-radius: 15px;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.quiz-option-btn:hover {
    background-color: #e9ecef;
    border-color: #ff6b6b;
}

.quiz-option-btn:disabled {
    cursor: not-allowed;
}

.quiz-option-btn.correct {
    background-color: #d4edda;
    border-color: #4CAF50;
    color: #155724;
}

.quiz-option-btn.incorrect {
    background-color: #f8d7da;
    border-color: #f44336;
    color: #721c24;
}

.quiz-feedback {
    background-color: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    text-align: center;
}

.feedback-content {
    max-width: 600px;
    margin: 0 auto;
}

.feedback-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.feedback-content h4 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.feedback-content p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.quiz-result {
    background-color: white;
    padding: 60px 40px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    text-align: center;
}

.result-content {
    max-width: 600px;
    margin: 0 auto;
}

.result-icon {
    font-size: 5rem;
    margin-bottom: 30px;
}

.result-content h3 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}

.result-score {
    background-color: #f8f9fa;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 30px;
}

.result-score p {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.result-message {
    margin-bottom: 40px;
}

.result-message p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
}

.result-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Aboutページ */
.about-section {
    padding: 60px 0;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-text h3 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.3;
}

.about-text p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.cat-illustration-large {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

.cat-large {
    width: 250px;
    height: 250px;
    background: linear-gradient(45deg, #ffd93d, #ff6b6b);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
    animation: float 3s ease-in-out infinite;
}

.cat-large::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 40px;
    width: 25px;
    height: 25px;
    background-color: #333;
    border-radius: 50%;
    box-shadow: 75px 0 0 #333;
}

.cat-large::after {
    content: '';
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 18px;
    background-color: #333;
    border-radius: 0 0 18px 18px;
}

.heart-large {
    position: absolute;
    top: 60px;
    right: 60px;
    width: 40px;
    height: 40px;
    background-color: #ff6b6b;
    transform: rotate(45deg);
    animation: heartbeat 2s ease-in-out infinite;
}

.heart-large::before,
.heart-large::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #ff6b6b;
    border-radius: 50%;
}

.heart-large::before {
    top: -20px;
    left: 0;
}

.heart-large::after {
    top: 0;
    left: -20px;
}

.stars {
    position: absolute;
    top: 20px;
    left: 20px;
}

.stars span {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 10px;
    animation: twinkle 2s ease-in-out infinite;
}

.stars span:nth-child(2) {
    animation-delay: 0.5s;
}

.stars span:nth-child(3) {
    animation-delay: 1s;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.activities-section {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.activities-section h3 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
}

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

.activity-card {
    background-color: white;
    padding: 30px 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

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

.activity-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.activity-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.activity-card p {
    color: #666;
    line-height: 1.6;
}

.profile-section {
    padding: 60px 0;
}

.profile-section h3 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
}

.profile-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: start;
}

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

.profile-placeholder {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    margin: 0 auto;
}

.profile-text h4 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.profile-title {
    color: #ff6b6b;
    font-weight: 600;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.profile-details h5 {
    color: #333;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    margin-top: 25px;
}

.profile-details ul {
    list-style: none;
    margin-bottom: 20px;
}

.profile-details li {
    padding: 5px 0;
    padding-left: 25px;
    position: relative;
    color: #666;
}

.profile-details li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ff6b6b;
    font-weight: bold;
}

.philosophy-section {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.philosophy-section h3 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
}

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

.philosophy-item {
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.philosophy-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.philosophy-item h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.philosophy-item p {
    color: #666;
    line-height: 1.6;
}

.future-section {
    padding: 60px 0;
}

.future-section h3 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
}

.future-content {
    max-width: 800px;
    margin: 0 auto;
}

.future-item {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 30px;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #eee;
}

.future-item:last-child {
    border-bottom: none;
}

.future-date {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 15px 20px;
    border-radius: 25px;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.future-description h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.future-description p {
    color: #666;
    line-height: 1.6;
}

.contact-section {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.contact-section h3 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}

.contact-content {
    text-align: center;
    margin-bottom: 40px;
}

.contact-content p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
}

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

.contact-item {
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.contact-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.contact-item p {
    color: #666;
    margin-bottom: 5px;
}

.support-section {
    padding: 60px 0;
}

.support-section h3 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}

.support-content {
    text-align: center;
    margin-bottom: 40px;
}

.support-content p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
}

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

.support-way {
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.support-way:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.support-way h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.support-way p {
    color: #666;
    line-height: 1.6;
}

/* フッター */
.footer {
    background-color: #333;
    color: white;
    padding: 60px 0 20px;
    margin-top: 80px;
    opacity: 1 !important; /* 常に表示 */
    visibility: visible !important; /* 常に表示 */
    transform: none !important; /* 位置を固定 */
    display: block !important; /* 常に表示 */
}

/* スクロールトップボタン - 基本スタイル（PC用） */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    flex-shrink: 0;
    box-sizing: border-box;
}

.scroll-top-btn.show {
    display: flex;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.scroll-top-btn:hover {
    background: linear-gradient(135deg, #ff8e8e, #ff6b6b);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
}

.scroll-top-btn:active {
    transform: scale(0.95);
}

.scroll-top-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #ff6b6b;
}

.footer-section p {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 15px;
}

.footer-section ul {
    list-style: none;
}

.footer-section li {
    margin-bottom: 10px;
}

.footer-section a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #ff6b6b;
}

.footer-bottom {
    border-top: 1px solid #555;
    padding-top: 20px;
    text-align: center;
    color: #999;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .hamburger {
        display: flex !important;
        position: relative !important;
        z-index: 10007 !important; /* メニューの上に表示されるように最前面に */
        order: 2 !important; /* 右側に配置 */
    }

    /* モバイルメニュー - 完全にリセットして再構築 */
    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100dvh !important; /* 動的ビューポート高さに対応（モバイル対応） */
        min-height: 100vh !important; /* フォールバック */
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 80px 20px 20px 20px !important;
        padding-top: max(80px, env(safe-area-inset-top)) !important; /* 安全エリア対応 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 15px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
        backdrop-filter: blur(10px) saturate(160%) !important;
        z-index: 10006 !important;
        opacity: 0;
        visibility: hidden;
        transform: translateX(100%) !important;
        transition: opacity 300ms ease, visibility 300ms ease, transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
        pointer-events: none;
        filter: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        list-style: none !important;
        box-sizing: border-box !important;
        /* メニュー背景をクリック可能にする */
        cursor: pointer !important;
    }
    
    /* メニュー内のコンテンツエリアはクリックをブロックしない */
    .nav-menu li,
    .nav-menu a {
        cursor: default !important;
        pointer-events: auto !important;
    }

    .nav-menu.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
        cursor: pointer !important; /* メニュー背景をクリック可能に */
    }

    /* closing アニメーション */
    .nav-menu.closing {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateX(100%) !important;
        transition: opacity 200ms ease, visibility 200ms ease, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* モバイルメニューのリストアイテム */
    .nav-menu li {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: block !important;
        flex-shrink: 0 !important;
    }
    
    /* ハンバーガーメニューのアニメーション - Xの形に変形 */
    .hamburger.active {
        justify-content: center;
        align-items: center;
    }
    
    .hamburger.active span:nth-child(1) {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-50%, -50%) rotate(45deg);
        width: 24px;
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
        width: 0;
        margin: 0;
    }
    
    .hamburger.active span:nth-child(3) {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-50%, -50%) rotate(-45deg);
        width: 24px;
    }

    /* モバイルメニューのリンクスタイル */
    .nav-menu a {
        color: #333 !important;
        font-size: 1.2rem !important;
        font-weight: 500 !important;
        padding: 18px 24px !important;
        border-radius: 12px !important;
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        background-color: transparent !important;
        border: none !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-tap-highlight-color: rgba(255, 107, 107, 0.2) !important;
    }

    .nav-menu a:hover,
    .nav-menu a.active {
        background-color: rgba(255, 107, 107, 0.1) !important;
        color: #ff6b6b !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .nav-menu a:active {
        background-color: rgba(255, 107, 107, 0.2) !important;
    }
    
    .hero-content {
        text-align: center;
    }
    
    .hero-content h2 {
        font-size: 2rem;
    }
    
    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .quiz-preview {
        grid-template-columns: 1fr;
    }
    
    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .profile-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .future-item {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .quiz-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .progress-bar {
        width: 150px;
    }
    
    .result-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        padding: 14px 28px;
        font-size: 1rem;
        min-height: 44px; /* タッチデバイス用の最小タップサイズ */
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: rgba(255, 107, 107, 0.2);
        touch-action: manipulation; /* ダブルタップズームを無効化 */
    }
    
    /* モバイルではホバー効果を無効化（タッチデバイスではhoverが残るため） */
    .btn:hover,
    .btn:active {
        transform: none !important;
    }
    
    .btn:active {
        opacity: 0.8;
        transform: scale(0.98);
    }
    
    /* カードのホバー効果もモバイルでは無効化 */
    .feature-card:hover,
    .content-card:hover,
    .quiz-option:hover,
    .activity-card:hover,
    .philosophy-item:hover,
    .support-way:hover {
        transform: none !important;
    }
    
    .feature-card:active,
    .content-card:active,
    .quiz-option:active,
    .activity-card:active,
    .philosophy-item:active,
    .support-way:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* メニューオープン時の状態 */
body.menu-open {
    overflow: hidden;
}

body.menu-open main,
body.menu-open footer {
    filter: blur(5px);
    transition: filter 300ms ease;
}

/* メニューが閉じた直後に確実にリセット */
body.menu-closing main,
body.menu-closing .container,
body.menu-closing footer,
body.menu-closing section {
    filter: none !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ヘッダーは常にクリアに */
body.menu-open header {
    filter: none;
    z-index: 10005; /* メニューの下に表示 */
}

body.menu-open .hamburger {
    z-index: 10007; /* ハンバーガーボタンは最前面に */
}

/* メニューオーバーレイ */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
    z-index: 1000;
}

body.menu-open .menu-overlay {
    opacity: 1;
    visibility: visible;
}

body.menu-open main,
body.menu-open .container,
body.menu-open footer {
    transform: translateY(-1px) scale(0.999);
    filter: blur(1px) brightness(0.99);
    transition: transform 200ms cubic-bezier(0.4,0,0.2,1), filter 200ms cubic-bezier(0.4,0,0.2,1);
    pointer-events: none; /* メニュー開時は背景操作を無効化 */
    will-change: transform, filter;
    contain: paint;
}

/* メニューが閉じた時に確実にリセット */
body:not(.menu-open) main,
body:not(.menu-open) .container,
body:not(.menu-open) footer,
body:not(.menu-open) section,
body:not(.menu-open) div:not(.header):not(.nav-menu):not(.hamburger) {
    filter: none !important;
    transform: none !important;
    pointer-events: auto !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ページ読み込み時にも確実にリセット */
body.components-ready main,
body.components-ready .container,
body.components-ready footer {
    filter: none !important;
    transform: none !important;
}

/* 背景に薄いオーバーレイ（視線をメニューへ誘導） */
/* メニュー用のクリック可能なオーバーレイ（メニュー外をタップで閉じる） */
/* ...overlay duplicate removed (handled above) ... */

/* メニューを閉じるときは素早く効果を戻すためのクラス */
.menu-closing main,
.menu-closing .container,
.menu-closing header:not(.nav-menu):not(.hamburger),
.menu-closing footer {
    transition: transform 180ms ease, filter 180ms ease !important;
    transform: none !important;
    filter: none !important;
}

/* メニューとハンバーガーボタンは常にクリア */
.nav-menu,
.hamburger {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ヘッダーの表示/非表示（スクロールに応じて適用） */
/* ヘッダーは常に表示されるように、基本スタイルで既に設定済み */
.header-hidden {
    /* ヘッダーは常時表示。スクロールで隠れないように無効化 */
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* メニュー自体の前面位置を確保（ヘッダーが最前面なので、この設定はモバイル時のみ有効） */

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .nav-container {
        padding: 0 15px;
    }
    
    .hero {
        padding: 40px 0 24px;
        min-height: auto;
    }

    /* モバイル時は少し暗めにして文字を読みやすく */
    .hero-image-bg::before {
        filter: brightness(0.68) saturate(1.05);
    }
    
    .hero-content h2 {
        font-size: 1.8rem;
    }
    
    .page-header h2 {
        font-size: 2rem;
    }
    
    .learning-section {
        padding: 30px 20px;
    }
    
    .quiz-question {
        padding: 30px 20px;
    }
    
    .quiz-feedback {
        padding: 30px 20px;
    }
    
    .quiz-result {
        padding: 40px 20px;
    }
    
    /* スクロールトップボタン - モバイル用（PCと同じサイズとスタイルを明示的に指定） */
    .scroll-top-btn {
        position: fixed !important;
        bottom: 30px !important;
        right: 30px !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        background: linear-gradient(135deg, #ff6b6b, #ff8e8e) !important;
        border-radius: 50% !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
    
    .scroll-top-btn.show {
        display: flex !important;
    }
    
    .scroll-top-btn span {
        font-size: 28px !important;
        font-weight: normal !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
}