/* ===============================================
   1. 変数定義 & 基本設定
   =============================================== */
   :root {
    --header-height: 60px;
    --color-base: #F8F7F4;
    --color-main: #a95acd;       /* 紫 */
    --color-accent: #66CDAA;     /* ミントグリーン */
    --color-text: #333;
    --color-text-subtle: #777;
    --color-border: #e0e0e0;     /* 少し濃いめのグレー */
    --color-card-bg: #ffffff;
    
    /* プロジェクト用カラー (ソフトレッド) */
    --color-project: #d65a5a;
    --color-project-bg: #fbf2f2;
    --color-project-hover: #e57373;

    /* 作品用カラー (ソフトブルー) */
    --color-work: #5a9bd6;
    --color-work-bg: #f0f6fc;
    --color-work-hover: #70aee0;
}

body {
    font-family: sans-serif;
    color: var(--color-text);
    margin: 0;
    background-color: var(--color-base);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Shippori Mincho', serif;
}

/* ===============================================
   2. ヘッダー (影なし・フラット)
   =============================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: #e1e1e1;
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
    z-index: 1010;
    padding: 0 1rem;
    box-sizing: border-box;
}

.header-content {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.site-logo {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-main);
    text-decoration: none;
    margin-left: 1rem;
    transition: opacity 0.2s ease;
}
.site-logo:hover { opacity: 0.7; }

/* 通知アイコン */
#notification-icon-container {
    margin-left: auto;
    margin-right: 1rem;
}

.notification-button {
    position: relative;
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 8px;
    color: var(--color-text-subtle);
    transition: background-color 0.2s, color 0.2s;
}
.notification-button:hover {
    background-color: #f0f0f0;
    color: var(--color-main);
}
.notification-button svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}
.notification-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    background-color: var(--color-accent);
    border: 2px solid #e1e1e1;
    border-radius: 50%;
}

/* ===============================================
   3. レイアウト枠 (サイドバー含む)
   =============================================== */
#page-wrapper {
    display: flex;
    padding-top: var(--header-height);
    position: relative;
    transition: margin-left 0.3s ease;
}

/* PC用の外枠線 */
#page-wrapper::before {
content: '';
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    /* 内側の細い線 */
    border: 1px solid var(--color-border);
    /* ★[復活] 外側の太いフレーム (ぼかし0なので影ではなく「枠」として表示されます) */
    box-shadow: 0 0 0 10px #e1e1e1;
    pointer-events: none;
    z-index: 9999;}
@media (max-width: 1024px) {
    #page-wrapper::before { display: none; }
}

.sidebar {
    width: 260px;
    background-color: var(--color-card-bg);
    height: calc(100vh - var(--header-height));
    position: fixed;
    top: var(--header-height);
    display: flex;
    flex-direction: column;
    transition: left 0.3s ease;
    z-index: 1000;
    border-right: 1px solid var(--color-border);
    box-shadow: none;
}

/* サイドバー内部 */
.sidebar-inner { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.sidebar-inner::-webkit-scrollbar { display: none; }
.sidebar-header { height: 10px; position: relative; }
.sidebar-static-content { flex-shrink: 0; }
.sidebar-scrollable-content {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    overscroll-behavior: contain;
}
.sidebar-scrollable-content::-webkit-scrollbar { display: none; }

.sidebar-search { padding: 20px; display: flex; }
.sidebar-search input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px 0 0 6px; font-size: 0.9rem; box-sizing: border-box; border-right: none; }
.sidebar-search input:focus { outline: none; border-color: var(--color-main); }
.sidebar-search-button { padding: 0 12px; border: 1px solid #ddd; background-color: #f0f0f0; border-radius: 0 6px 6px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sidebar-search-button:hover { background-color: #e0e0e0; }
.sidebar-search-button svg { stroke: var(--color-text-subtle); }
.sidebar-action-button { display: block; margin: 0 20px 20px; padding: 12px; background-color: var(--color-accent); color: var(--color-card-bg); text-align: center; text-decoration: none; border-radius: 8px; font-weight: 600; transition: background-color 0.2s; box-shadow: none; }
.sidebar-action-button:hover { opacity: 0.85; }

.sidebar-section { padding: 0 20px; margin-bottom: 24px; }
.sidebar-section h3 { font-size: 1.0em; color: #000; margin-bottom: 0.6rem; font-weight: 700; }
.sidebar-section a {
    text-decoration: none;
    padding: 7px 10px;
    margin-left: -10px;
    margin-right: -10px;
    display: block;
    border-radius: 4px;
    color: #444;
    transition: background-color 0.2s, color 0.2s;
}
.sidebar-section a:not(.sidebar-more-link):not(.sidebar-tags a):not(.icon-link):hover,
.sidebar-section a.icon-link:hover {
    background-color: #f0f0f0;
    color: var(--color-main);
}
.sidebar-more-link {
    font-size: 0.8rem;
    color: var(--color-main);
    margin-top: 0.8rem;
    padding: 4px 0;
    display: block;
    margin-left: 0;
    margin-right: 0;
    text-align: right;
}
.sidebar-more-link:hover { text-decoration: underline; background-color: transparent; }
.sidebar-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sidebar-tags a {
    background-color: #f0f0f0;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--color-text-subtle);
    display: inline-flex;
    margin: 0;
}
.sidebar-tags a:hover { background-color: #e0e0e0; color: var(--color-text); }
.icon-link { display: flex !important; align-items: center; gap: 0.8em; }
.sidebar-icon { width: 1.2em; height: 1.2em; flex-shrink: 0; }
.sidebar-footer { padding: 20px; border-top: 1px solid var(--color-border); margin-top: auto; }
.sidebar-footer .static-nav-section a { font-size: 0.8em; padding: 4px 0; margin: 0; color: var(--color-text-subtle); }
.sidebar-footer .static-nav-section a:hover { background-color: transparent; color: var(--color-text); text-decoration: underline; }
.sidebar-footer .sidebar-logout { text-align: center; }
.sidebar-footer .sidebar-logout a { color: var(--color-text-subtle); text-decoration: none; display: inline-block; padding: 4px; margin: 0; }
.sidebar-footer .sidebar-logout a:hover { color: #d32f2f; background-color: transparent; }

.main-content {
    flex-grow: 1;
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

/* ★ [復活] パンくずリスト (修正済み) ★ */
#breadcrumb-container { margin-bottom: 2rem; font-size: 0.9em; }
#breadcrumb-container ol { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: flex; /* 横並びにする */
    flex-wrap: wrap; 
    align-items: center; 
}
#breadcrumb-container li { 
    display: flex; 
    align-items: center; 
}
#breadcrumb-container li:not(:first-child)::before { 
    content: '›'; 
    margin: 0 0.75em; 
    color: var(--color-text-subtle); 
}
#breadcrumb-container a { color: var(--color-main); text-decoration: none; }
#breadcrumb-container a:hover { text-decoration: underline; }
#breadcrumb-container li:last-child { color: var(--color-text-subtle); font-weight: 600; }

/* ハンバーガーボタン */
.hamburger-button { display: block; z-index: 1011; width: 44px; height: 44px; background: transparent; border: none; border-radius: 8px; cursor: pointer; padding: 0; }
.hamburger-button:hover { background-color: #f0f0f0; }
.hamburger-button span { display: block; width: 22px; height: 2px; background-color: var(--color-text); margin: 5px auto; transition: all 0.3s; }

/* レスポンシブ制御 */
.sidebar { left: -280px; }
#page-wrapper { margin-left: 0; }
#page-wrapper.sidebar-open .sidebar { left: 0; }
#page-wrapper.sidebar-open .hamburger-button span:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
#page-wrapper.sidebar-open .hamburger-button span:nth-of-type(2) { opacity: 0; }
#page-wrapper.sidebar-open .hamburger-button span:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1025px) {
    .sidebar { left: 0; }
    #page-wrapper { margin-left: 260px; }
    #page-wrapper.sidebar-collapsed .sidebar { left: -260px; }
    #page-wrapper.sidebar-collapsed { margin-left: 0; }
    .hamburger-button span { display: none; }
    .hamburger-button::before { content: '«'; font-size: 1.5rem; color: var(--color-text-subtle); transition: transform 0.3s ease; display: block; }
    #page-wrapper.sidebar-collapsed .hamburger-button::before { transform: scaleX(-1); }
}

/* ===============================================
   4. TOPページ ヒーローセクション (スライドショー + ニュース)
   =============================================== */
.hero-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 4rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

/* --- スライドショー (上段) --- */
.hero-carousel {
    position: relative;
    width: 100%;
    height: 360px;
    background-color: #f0f0f0;
    border-bottom: 1px solid var(--color-border);
}
.carousel-track-container {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.carousel-track {
    padding: 0;
    margin: 0;
    list-style: none;
    height: 100%;
    position: relative;
    transition: transform 500ms ease-in-out;
}
.carousel-slide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
.slide-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    box-sizing: border-box;
}
.slide-text h2 {
    font-size: 2rem;
    color: var(--color-text);
    margin-bottom: 1rem;
    line-height: 1.4;
}
.slide-text p {
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: 2rem;
}
.slide-button {
    display: inline-block;
    padding: 10px 24px;
    background-color: var(--color-text);
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: background-color 0.2s;
}
.slide-button:hover {
    background-color: var(--color-main);
    opacity: 1;
}

/* スライドショーの矢印 (ミニマルデザイン) */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent; /* 透明 */
    border: none;
    width: 48px; 
    height: 48px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-subtle);
    transition: all 0.2s ease;
    border-radius: 50%;
}
.carousel-button svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.5;
}
.carousel-button:hover {
    background-color: rgba(255, 255, 255, 0.6);
    color: var(--color-main);
    transform: translateY(-50%) scale(1.1);
}
.carousel-button--left { left: 10px; }
.carousel-button--right { right: 10px; }

.carousel-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: absolute;
    bottom: 20px;
    width: 100%;
    z-index: 10;
}
.carousel-indicator {
    border: 0;
    border-radius: 10px; /* 丸みを帯びた形状にする */
    width: 30px;         /* ★横幅を広げて楕円にする */
    height: 8px;         /* ★高さを調整 */
    background: rgba(0, 0, 0, 0.15); /* 未選択時は薄い色 */
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease; /* アニメーションを追加 */
    margin: 0 2px; /* ボタン同士の間隔 */
}

.carousel-indicator:hover {
    background: rgba(0, 0, 0, 0.3); /* ホバー時に少し濃く */
}

.carousel-indicator.current-slide {
    background: var(--color-main); /* 選択中はメインカラー */
    width: 45px; /* ★選択中のものだけさらに少し長くするとオシャレです */
}/* --- お知らせリスト (下段) --- */
.hero-news {
    background-color: #fff;
    display: flex;
    flex-direction: column;
}
.news-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.news-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-family: sans-serif;
    font-weight: 700;
    color: var(--color-text);
}
.news-more-link {
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    text-decoration: none;
}
.news-more-link:hover { color: var(--color-main); text-decoration: underline; }

.news-scroll-area { 
    height: 180px; 
    overflow-y: auto; 
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}
/* カスタムスクロールバー (Webkit用) */
.news-scroll-area::-webkit-scrollbar { width: 6px; }
.news-scroll-area::-webkit-scrollbar-track { background: transparent; }
.news-scroll-area::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 3px; }
.news-scroll-area::-webkit-scrollbar-thumb:hover { background-color: #bbb; }

.news-list { list-style: none; padding: 0; margin: 0; }
.news-list-item {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
    transition: background-color 0.2s;
    box-shadow: none;
}
.news-list-item:last-child { border-bottom: none; }
.news-list-item:hover { background-color: #f9f9f9; }
.news-list-item.important { background-color: #fffbfb; }
.news-list-item.important .news-category {
    color: #d32f2f;
    border-color: #d32f2f;
    background-color: #fff;
}
.news-date {
    font-family: monospace;
    color: var(--color-text-subtle);
    margin-right: 1rem;
    flex-shrink: 0;
}
.news-category {
    font-size: 0.75rem;
    padding: 2px 8px;
    border: 1px solid var(--color-text-subtle);
    border-radius: 4px;
    color: var(--color-text-subtle);
    margin-right: 1rem;
    flex-shrink: 0;
    min-width: 60px;
    text-align: center;
}
.news-title-link {
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}
.news-title-link:hover { color: var(--color-main); }

/* モバイル対応 */
@media (max-width: 600px) {
    .hero-carousel { height: 300px; }
    .slide-text h2 { font-size: 1.5rem; }
    .news-list-item { flex-wrap: wrap; gap: 0.5rem; }
    .news-date { margin-right: 0.5rem; }
    .news-title-link { width: 100%; white-space: normal; }
}

/* ===============================================
   5. プロジェクトカード & 一覧 (影なし・フラット)
   =============================================== */
.works-section { margin-bottom: 4rem; }
.works-section h2 { color: var(--color-main); }
.works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2.5rem 1.5rem; }
#work-container .works-grid { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem 2rem; }

.project-card-link { text-decoration: none; color: inherit; display: block; height: 100%;}

.project-card {
    position: relative;
    background-color: var(--color-card-bg);
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.project-card:hover {
    transform: none;
    border-color: var(--color-main);
    background-color: #fff;
}

.card-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--color-border);
    transition: transform 0.4s ease;
    position: relative; 
}
.project-card:hover .card-thumbnail { transform: none; }

.card-thumbnail-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}
.placeholder-text { font-family: 'Shippori Mincho', serif; color: #ccc; font-size: 1.5rem; }

.card-content { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; }
.card-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-title::after { content: ''; display: block; width: 0; height: 1px; background: var(--color-main); transition: width 0.3s ease; }
.project-card:hover .card-title::after { width: 0; }
.project-card:hover .card-title { color: var(--color-main); }
.card-description { flex-grow: 1; font-size: 0.9em; color: #555; line-height: 1.7; overflow: hidden; }

.card-type-label {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    z-index: 2;
    box-shadow: none;
    letter-spacing: 0.05em;
    opacity: 0.9;
}
.card-type-label.project { background-color: var(--color-project); right: auto; left: 10px; }
.card-type-label.work { background-color: var(--color-work); }

.project-card.text-first { display: grid; grid-template-columns: 80px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "thumb title" "desc desc" "meta meta"; padding: 1rem; gap: 0.5rem 1.5rem; flex-direction: initial; }
.project-card.text-first .card-thumbnail-small { grid-area: thumb; width: 80px; height: 80px; flex-shrink: 0; background-color: #f0f0f0; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-family: 'Shippori Mincho', serif; color: #ccc; font-size: 2.5rem; font-weight: 700; }
.project-card.text-first .card-title { grid-area: title; margin-bottom: 0; align-self: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.project-card.text-first .card-description { grid-area: desc; height: auto; margin-top: 0.5rem; }
.project-card.text-first .card-meta { grid-area: meta; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #f0f0f0; }

.more-button-container { text-align: center; margin-top: 0; padding-top: 3rem; }
.show-more-button { font-size: 0.9em; font-weight: 600; color: var(--color-main); background: none; border: none; padding: 4px 8px; cursor: pointer; transition: all 0.2s ease; text-decoration: none; }
.show-more-button:hover { color: var(--color-main); }
.card-meta { font-size: 0.8rem; color: var(--color-text-subtle); display: flex; align-items: center; gap: 1rem; }
.meta-item { display: flex; align-items: center; gap: 0.3em; }
.card-icon { width: 1em; height: 1em; stroke-width: 2.5; }
.section-divider { border: none; border-top: 1px solid #eee; margin: 4rem 0; }

/* ===============================================
   6. フォーム & UIパーツ (フラット化)
   =============================================== */
.page-header { margin-bottom: 2rem; border-bottom: 1px solid #eee; padding-bottom: 1.5rem; text-align: center; }
.form-layout { max-width: 700px; margin: 0 auto; }
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; font-weight: 600; margin-bottom: 0.5rem; font-family: 'Shippori Mincho', serif; }
.form-input, .form-textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-size: 1rem; line-height: 1.6; }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--color-main); box-shadow: 0 0 0 3px rgba(169, 90, 205, 0.2); }
.form-actions { text-align: right; margin-top: 2rem; }
.form-submit-button { background-color: var(--color-accent); color: var(--color-card-bg); border: none; padding: 12px 24px; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; transition: opacity 0.2s; box-shadow: none; }
.form-submit-button:hover { opacity: 0.85; }
.form-text-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.char-counter { font-size: 0.8em; color: var(--color-text-subtle); font-weight: 600; }
.radio-group { display: flex; gap: 1.5rem; padding-top: 0.5rem; }
.radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.checkbox-group { padding-top: 0.5rem; }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.form-text { display: block; margin-top: 0.5rem; font-size: 0.8em; color: var(--color-text-subtle); }

.form-message-box {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    border: 1px solid transparent;
    box-shadow: none;
}
.form-message-box.error { background-color: #fce4ec; border-color: #f8bbd0; color: #c51162; }
.form-message-box.success { background-color: #e6f7ed; border-color: #b2dfc8; color: #1e8e3e; }

.form-upload-warning-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #fefce8;
    border: 1px solid #fde68a;
    color: #78350f;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}
.form-upload-warning-box .warning-icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; stroke: #d97706; }
.form-upload-warning-box p { margin: 0; font-size: 0.9em; line-height: 1.6; }
.form-upload-warning-box p strong { font-family: 'Shippori Mincho', serif; font-weight: 700; color: #b45309; }

/* ===============================================
   7. 詳細ページ (Project/Work)
   =============================================== */
.project-title-bar, .work-title-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; border-bottom: 1px solid #eee; padding-bottom: 1.5rem; }
.project-status-badge { background-color: var(--color-text-subtle); color: var(--color-card-bg); padding: 6px 12px; border-radius: 20px; font-size: 0.8em; font-weight: 600; flex-shrink: 0; }
.project-title-bar h1, .work-title-bar h1 { margin: 0; flex-grow: 1; min-width: 0; }
.project-edit-button { background-color: #eee; color: var(--color-text); padding: 8px 16px; border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 0.8em; margin-left: auto; transition: background-color 0.2s; white-space: nowrap; }
.project-edit-button:hover { background-color: #ddd; }

.project-layout { display: flex; gap: 2rem; align-items: flex-start; }
.project-main-column { flex: 1; min-width: 0; }
.project-side-column { width: 300px; flex-shrink: 0; }

.project-description-card, .info-card, .work-text-body {
    background-color: var(--color-card-bg);
    padding: 1.5rem 2rem;
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid var(--color-border);
}
#work-header + .project-description-card { margin-bottom: 2rem; }
.info-card { position: sticky; top: 2rem; padding: 1.5rem; }

.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; }
.info-list li:last-child { border-bottom: none; }
.info-list a { color: var(--color-main); text-decoration: none; font-weight: 600; }
.tag-link { background-color: #f0f0f0; padding: 4px 10px; border-radius: 12px; font-size: 0.8rem; color: var(--color-text-subtle); text-decoration: none; transition: background-color 0.2s; }
.tag-link:hover { background-color: #e0e0e0; }

.action-button { display: block; width: auto; padding: 12px 32px; margin-top: 1.5rem; background-color: var(--color-accent); color: var(--color-card-bg); border: none; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; transition: opacity 0.2s; margin-left: auto; margin-right: auto; box-shadow: none; }
.action-button:hover { opacity: 0.85; }

.work-creator-info { margin-top: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid #eee; }
.work-creator-info a { color: var(--color-main); font-weight: 600; text-decoration: none; }
.work-image { max-width: 100%; height: auto; border-radius: 8px; box-shadow: none; border: 1px solid var(--color-border); }
.work-text-body { min-height: 200px; line-height: 1.8; }

.project-header-theme, .work-header-theme {
    padding-left: 1.5rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.project-header-theme { border-left: 6px solid var(--color-project); background: linear-gradient(to right, var(--color-project-bg), transparent); }
.work-header-theme { border-left: 6px solid var(--color-work); background: linear-gradient(to right, var(--color-work-bg), transparent); }
.project-header-theme h1, .work-header-theme h1 { margin-bottom: 0.5rem; }

#feedback-actions { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.feedback-button { border: 1px solid #ddd; background-color: #fff; padding: 10px 20px; border-radius: 20px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.feedback-button.active, #favorite-button:hover { background-color: #fce4ec; color: #d81b60; border-color: #f8bbd0; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 10000; }
.modal-content { background: #fff; padding: 2rem; border-radius: 8px; width: 90%; max-width: 500px; box-shadow: none; border: 1px solid #ccc; }
.tag-selection-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }
.tag-select-button { background: #f0f0f0; border: 1px solid #f0f0f0; padding: 8px 16px; border-radius: 20px; cursor: pointer; transition: all 0.2s; }
.tag-select-button.selected { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.modal-actions { margin-top: 2rem; display: flex; justify-content: flex-end; gap: 1rem; }
.modal-button { padding: 10px 20px; border-radius: 6px; border: 1px solid #ccc; background: #fff; cursor: pointer; text-decoration: none; font-size: 0.9em; font-weight: 600; color: var(--color-text); transition: all 0.15s ease-out; }
.modal-button.primary { background: var(--color-main); color: #fff; border-color: var(--color-main); }
.modal-button:not(.primary):hover { background-color: #f0f0f0; border-color: #bbb; }

/* ===============================================
   8. マイページ & プロフィール
   =============================================== */
.profile-info {
    background-color: var(--color-card-bg);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 3rem;
    text-align: left;
    box-shadow: none;
    border: 1px solid var(--color-border);
}
.profile-main { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.profile-main h1 { margin: 0; }
.profile-actions-container { display: flex; gap: 0.75rem; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.profile-edit-button, .profile-settings-button { background-color: #eee; color: var(--color-text); padding: 8px 16px; border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 0.8em; transition: background-color 0.2s; white-space: nowrap; }
.profile-edit-button:hover, .profile-settings-button:hover { background-color: #ddd; }
.external-link-button { background-color: #fff; color: var(--color-text); border: 1px solid #ccc; padding: 6px 14px; border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 0.8em; transition: background-color 0.2s; cursor: pointer; }
.external-link-button:hover { background-color: #f0f0f0; }
.external-links-container { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.creator-tags-container, #feedback-tags-display { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.creator-tag, .feedback-tag { background-color: #e9d4f5; color: var(--color-text); padding: 5px 12px; border-radius: 20px; font-size: 0.9em; font-weight: 600; white-space: nowrap;text-decoration: none !important; 
    display: inline-block; }
.profile-text { color: var(--color-text-subtle); line-height: 1.6; }

.mypage-nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 3rem; }

/* マイページナビ（お気に入り・フォロー） */
.mypage-nav-link {
    display: block;
    background-color: var(--color-card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.2s ease;
    box-shadow: none;
    border: 1px solid var(--color-border);
}
.mypage-nav-link:hover {
    transform: none;
    box-shadow: none;
    border-color: #666666; /* 濃いグレー */
    background-color: #fdfdfd;
}

.mypage-nav-link h3 { margin: 0 0 0.5rem; }
.mypage-nav-link p { margin: 0; font-size: 0.9em; color: var(--color-text-subtle); }
.mypage-nav-link.disabled { background-color: #f9f9f9; color: #ccc; pointer-events: none; }

.follow-button { background-color: var(--color-main); color: #fff; border: none; padding: 8px 20px; border-radius: 20px; font-weight: 600; font-size: 0.9em; cursor: pointer; transition: all 0.2s ease; box-shadow: none; }
.follow-button:hover { opacity: 0.8; }
.follow-button.is-following { background-color: #333; color: #fff; border: 1px solid #333; }
.follow-button.is-following:hover { background-color: #fce4ec; color: #d81b60; border-color: #f8bbd0; opacity: 1; }
.profile-report-container { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* ===============================================
   9. 検索・フィルター・その他UI
   =============================================== */
.tab-container { width: 100%; }
.tab-nav { display: flex; justify-content: center; border-bottom: 1px solid #ddd; margin-bottom: 1.5rem; }
.tab-button { padding: 10px 24px; border: 1px solid transparent; border-bottom: none; background-color: transparent; cursor: pointer; font-size: 1.1em; font-weight: 600; color: var(--color-text-subtle); transform: translateY(1px); border-radius: 6px 6px 0 0; }
.tab-button.active { color: #fff; background-color: var(--color-main); border-color: var(--color-main); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.tab-pane.active.works-grid { display: grid; }

.filter-controls {
    display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; padding: 1rem;
    background-color: var(--color-card-bg);
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid var(--color-border);
}
.control-group { display: flex; align-items: center; gap: 0.5rem; }
.control-group label { font-size: 0.9em; font-weight: 600; white-space: nowrap; }
.control-group select { padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fff; font-size: 0.9em; cursor: pointer; }
.reset-link { font-size: 0.9em; font-weight: 600; color: var(--color-text-subtle); background-color: #f0f0f0; border: 1px solid #eee; text-decoration: none; padding: 6px 14px; border-radius: 20px; transition: all 0.2s ease; }
.reset-link:hover { color: var(--color-main); background-color: #e0e0e0; border-color: #ddd; }
.search-group { display: flex; flex-grow: 1; min-width: 200px; }
.search-group input { width: 100%; border: 1px solid #ccc; border-right: none; padding: 8px 12px; border-radius: 6px 0 0 6px; font-size: 0.9em; }
.search-group input:focus { outline: none; border-color: var(--color-main); }
.search-group button { padding: 8px 16px; border: 1px solid var(--color-accent); background-color: var(--color-accent); color: var(--color-card-bg); border-radius: 0 6px 6px 0; cursor: pointer; font-weight: 600; transition: opacity 0.2s; }

#pagination-controls, .more-controls .pagination-container { display: flex; justify-content: center; align-items: center; margin-top: 3rem; }
#pagination-controls button, .more-controls .pagination-container button { background-color: transparent; border: none; color: var(--color-main); padding: 8px 10px; margin: 0 4px; cursor: pointer; border-radius: 4px; font-weight: 600; font-size: 1.0em; letter-spacing: 1px; transition: all 0.2s ease; }
#pagination-controls button:not(:disabled):hover, .more-controls .pagination-container button:not(:disabled):hover { background-color: transparent; color: var(--color-accent); text-decoration: none; }
#pagination-controls button.active, .more-controls .pagination-container button.active { background-color: var(--color-main); color: #fff; border: none; text-decoration: none; cursor: default; }
#pagination-controls button:disabled, .more-controls .pagination-container button:disabled { background-color: transparent; border: none; color: #ccc; cursor: default; opacity: 1; }
.more-controls { text-align: center; margin-top: 3rem; }
.show-all-button { font-size: 0.9em; font-weight: 600; color: var(--color-main); background: none; border: none; padding: 4px 8px; cursor: pointer; transition: all 0.2s ease; text-decoration: none; }

#notification-icon-wrapper { position: relative; margin-left: auto; margin-right: 1rem; }
.notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 380px;
    max-height: 400px;
    background-color: var(--color-card-bg);
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: none;
    z-index: 1020;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.notification-dropdown.hidden { display: none; }
.notification-dropdown-list { overflow-y: auto; flex-grow: 1; overscroll-behavior: contain; }
.notification-dropdown-item { display: block; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); transition: background-color 0.2s; }
.notification-dropdown-item:hover { background-color: #f9f9f9; }
.notification-dropdown-item:last-child { border-bottom: none; }
.notification-dropdown-item.unread { background-color: #f8f7ff; font-weight: 600; }
.notification-dropdown-item.unread .notification-dropdown-message strong { color: var(--color-main); }
.notification-dropdown-view-all { display: block; padding: 0.75rem 1rem; text-align: center; font-size: 0.9em; font-weight: 600; color: var(--color-main); background-color: var(--color-base); border-top: 1px solid var(--color-border); text-decoration: none; transition: background-color 0.2s; flex-shrink: 0; }
.notification-dropdown-view-all:hover { background-color: #f0f0f0; }

body.page-project-create { background-color: #fff5f5; }
body.page-project-create .main-content { background-color: transparent; }
body.page-project-create .form-submit-button { background-color: var(--color-project); }
body.page-work-create { background-color: #f4f9fd; }
body.page-work-create .main-content { background-color: transparent; }
body.page-work-create .form-submit-button { background-color: var(--color-work); }

.report-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; justify-content: center; align-items: center; z-index: 10000; }
.report-modal-content { background: #fff; padding: 2rem; border-radius: 8px; width: 90%; max-width: 500px; box-shadow: none; border: 1px solid #ccc; }
.report-button { background: none; border: none; cursor: pointer; padding: 4px; color: var(--color-text-subtle); display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.75em; font-weight: 600; border-radius: 4px; }
.report-button:hover { color: #d32f2f; background-color: #fce4ec; }

.share-button { background-color: #f0f0f0; color: var(--color-text-subtle); padding: 6px 12px; border-radius: 12px; font-size: 0.8em; font-weight: 600; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4em; transition: background-color 0.2s; white-space: nowrap; }
.share-button:hover { background-color: #e0e0e0; color: var(--color-text); }
.share-button.copied { background-color: var(--color-accent); color: white; cursor: default; }

.works-grid.collapsed .project-card-link:nth-child(n+5) { display: none; }

.work-image, .supplemental-card-link, .work-text-body, .project-card:has(audio) { user-select: none; -webkit-user-select: none; }
.supplemental-card-link .text-preview { background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 0.75rem; margin: 0.25rem 0; }
.download-dropdown { position: relative; margin-top: 1rem; }
.download-menu { position: absolute; width: 100%; background-color: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: none; margin-top: 0.5rem; z-index: 10; overflow: hidden; }
.alert-prompt { background-color: #f2e7f9; border: 1px solid #d1b3e0; color: var(--color-main); padding: 1rem; margin-top: 1rem; margin-bottom: 2rem; border-radius: 6px; text-align: center; font-weight: 600; }

/* ===============================================
   10. ガイドページ (usage-guide.html) 専用スタイル
   =============================================== */
.page-guide { background-color: #fff; }
.guide-container { max-width: 900px; margin: 0 auto; padding-bottom: 4rem; }

.guide-header { text-align: center; margin-bottom: 4rem; padding: 2rem 0; border-bottom: 1px solid var(--color-border); }
.guide-header h1 { font-size: 2.2rem; color: var(--color-main); margin-bottom: 1.5rem; }
.guide-lead { font-size: 1.1rem; line-height: 1.8; color: var(--color-text); }

.guide-section { margin-bottom: 5rem; }
.guide-section h2 { font-size: 1.5rem; margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem; }
.section-number { font-family: sans-serif; font-size: 1.2em; color: #fff; background-color: var(--color-main); padding: 2px 10px; border-radius: 4px; font-weight: 700; }

/* 循環型コンセプト図解 (ゆったり版) */
.concept-diagram.circular-layout {
    position: relative;
    height: 720px;
    background-color: var(--color-base);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    margin-bottom: 2rem;
}
.diagram-arrows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.circular-layout .diagram-box {
    position: absolute;
    width: 240px;
    padding: 1.2rem 1rem;
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-align: center;
    z-index: 1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.pos-top {
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 4px solid var(--color-project);
}
.pos-right {
    top: 350px;
    right: 10%;
    border-top: 4px solid var(--color-work);
}
.pos-left {
    top: 350px;
    left: 10%;
    border-top: 4px solid var(--color-accent);
}

.box-lead {
    font-weight: 700;
    color: var(--color-main);
    margin: 0.5rem 0 0.8rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.box-desc {
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    line-height: 1.6;
    text-align: left;
}
.circular-layout .box-label {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.pos-top .box-label { background-color: var(--color-project); }
.pos-right .box-label { background-color: var(--color-work); }
.pos-left .box-label { background-color: var(--color-accent); }

.box-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.box-title { font-weight: 700; margin-bottom: 0.5rem; font-size: 1.1rem; }

.branch-label {
    position: absolute;
    bottom: -50px;
    left: -80px;
    background-color: #e0f2f1;
    color: var(--color-accent);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    transform: rotate(-10deg);
    border: 1px solid #b2dfc8;
}

.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.step-card { background-color: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 2rem; text-align: center; }

/* ★ [修正] ステップの見出し色変更 (ミントグリーン) ★ */
.step-header {
    display: inline-block;
    background-color: var(--color-accent); /* ミントグリーン背景 */
    color: #fff; /* 白文字 */
    font-weight: 600;
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.step-card h3 { font-size: 1.3rem; margin: 0 0 1rem 0; color: var(--color-text); }
.step-card p { font-size: 0.95rem; color: var(--color-text-subtle); line-height: 1.6; margin: 0; }

.rules-box { background-color: #fffbfb; border: 1px solid #f0f0f0; border-radius: 8px; padding: 2rem; }
.rules-list { list-style: none; padding: 0; margin: 0; }
.rules-list li { margin-bottom: 1.5rem; padding-left: 1.5rem; border-left: 3px solid var(--color-project); }
.rules-list li:last-child { margin-bottom: 0; }
.rules-list strong { display: block; font-size: 1.1rem; color: var(--color-text); margin-bottom: 0.5rem; }
.rules-list p { margin: 0; color: var(--color-text-subtle); }

.guide-action { text-align: center; margin-top: 4rem; padding: 3rem; background-color: #f9f9f9; border-radius: 12px; }
.guide-action p { font-size: 1.2rem; font-weight: 700; margin-bottom: 2rem; color: var(--color-main); }

@media (max-width: 850px) {
    .concept-diagram.circular-layout { height: auto; padding: 2rem; display: flex; flex-direction: column; gap: 3rem; align-items: center; }
    .diagram-arrows { display: none; }
    .circular-layout .diagram-box { position: relative; top: auto; left: auto; right: auto; transform: none; width: 100%; max-width: 400px; }
    .circular-layout .diagram-box::after { content: '↓'; position: absolute; bottom: -2.5rem; left: 50%; transform: translateX(-50%); font-size: 1.5rem; color: #ccc; font-weight: bold; }
    .circular-layout .diagram-box:last-child::after { content: '↻'; }
    .branch-label { bottom: 10px; left: -10px; transform: none; }
}
/* ===============================================
   活用レシピページ (utilization-guide.html) 専用スタイル
   =============================================== */

.section-lead {
    margin-bottom: 2rem;
    color: var(--color-text-subtle);
}

/* --- メディア別グリッド --- */
.util-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.util-card {
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}
/* 上部に色付きのライン */
.util-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background-color: #ccc;
}
.util-card:nth-child(1)::before { background-color: #a95acd; } /* Text: 紫 */
.util-card:nth-child(2)::before { background-color: #66CDAA; } /* Image: 緑 */
.util-card:nth-child(3)::before { background-color: #ffb74d; } /* Media: オレンジ */

.util-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.util-card h3 {
    font-size: 1.2rem;
    margin: 0 0 0.5rem 0;
}

.util-sub {
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    margin: 0 0 1.5rem 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.util-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.util-list li {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    line-height: 1.5;
    padding-left: 1em;
    text-indent: -1em;
}
.util-list strong {
    color: var(--color-main);
}

/* --- スキル別グリッド --- */
.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.skill-card {
    background-color: #f9f9f9;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skill-badge {
    display: inline-block;
    align-self: flex-start;
    background-color: #333;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.skill-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    color: var(--color-text);
}

/* --- 初心者ガイドページへの追加リンク --- */
.guide-more-link-container {
    text-align: center;
    margin: 4rem auto;
    padding: 2rem;
    border: 1px dashed var(--color-border); /* 破線で区切る */
    border-radius: 12px;
    max-width: 700px;
}

.guide-more-link-container p {
    margin-bottom: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
}

.more-link-button {
    display: inline-block;
    color: var(--color-main);
    border: 2px solid var(--color-main);
    padding: 10px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s;
}

.more-link-button:hover {
    background-color: var(--color-main);
    color: #fff;
}
/* ===============================================
   活用レシピページ (utilization-guide.html) 追加スタイル
   =============================================== */

/* ヒーローエリア */
.guide-hero {
    text-align: center;
    margin-bottom: 3rem;
    padding: 3rem 1rem;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}
.guide-hero h1 {
    font-size: 2rem;
    color: var(--color-main);
    margin-bottom: 1.5rem;
}

/* タブナビゲーション */
.recipe-tab-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.recipe-tab-button {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background-color: #fff;
    border: 2px solid var(--color-border);
    border-radius: 50px;
    padding: 12px 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-text-subtle);
}
.recipe-tab-button:hover {
    border-color: var(--color-main);
    color: var(--color-main);
}
.recipe-tab-button.active {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: #fff;
    box-shadow: 0 4px 12px rgba(169, 90, 205, 0.3);
}
.tab-icon {
    font-size: 1.5rem;
}
.tab-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}
.tab-text strong {
    font-size: 1.1rem;
}
.tab-text small {
    font-size: 0.75rem;
    opacity: 0.8;
    font-weight: normal;
}

/* タブパネル制御 */
.recipe-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.recipe-panel.active {
    display: block;
    opacity: 1;
}

/* レシピグリッド */
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

/* レシピカード */
.recipe-card {
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* テーマカラー装飾 */
.recipe-card.theme-public { border-top: 6px solid var(--color-accent); } /* 広場＝ミント */
.recipe-card.theme-private { border-top: 6px solid var(--color-project); } /* 部屋＝ソフトレッド */

.recipe-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.recipe-icon {
    font-size: 2.5rem;
    background-color: #f9f9f9;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.recipe-title {
    text-align: right;
    flex-grow: 1;
    margin-left: 1rem;
}
.recipe-title h3 {
    margin: 0 0 0.3rem 0;
    font-size: 1.2rem;
    color: var(--color-text);
}
.recipe-difficulty {
    color: #fbc02d; /* 星の色 */
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.recipe-catch {
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    color: var(--color-main);
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    line-height: 1.4;
}
.recipe-desc {
    font-size: 0.9rem;
    color: var(--color-text-subtle);
    margin-bottom: 2rem;
    line-height: 1.6;
    flex-grow: 1;
}

/* タイムライン (How to) */
.recipe-steps {
    background-color: #fcfcfc;
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}
.recipe-steps h4 {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 0.5rem;
}
.timeline {
    position: relative;
    padding-left: 10px;
}
/* 縦線 */
.timeline::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 30px;
    left: 13px; /* マーカーの中心 */
    width: 2px;
    background: repeating-linear-gradient(to bottom, #ddd 0, #ddd 4px, transparent 4px, transparent 8px);
}
.timeline-step {
    position: relative;
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: flex-start;
}
.timeline-step:last-child {
    margin-bottom: 0;
}
.step-marker {
    width: 24px;
    height: 24px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    color: #999;
    font-size: 0.75rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}
.timeline-step.result .step-marker {
    border-color: var(--color-accent);
    background-color: #e0f2f1;
    color: var(--color-accent);
}
.timeline-step p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text);
}

/* Point Box */
.recipe-point {
    font-size: 0.85rem;
    color: var(--color-text);
    background-color: #fffbfb;
    border: 1px solid #f0f0f0;
    border-left: 4px solid var(--color-project);
    padding: 0.8rem;
    border-radius: 4px;
    line-height: 1.5;
}
.recipe-point strong {
    color: var(--color-project);
    margin-right: 0.3em;
}

/* 逆引きセクション */
.reverse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}
.reverse-column h3 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-main);
    display: inline-block;
}
.reverse-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.reverse-list li {
    margin-bottom: 2rem;
}
.reverse-list strong {
    display: block;
    font-size: 1.05rem;
    color: var(--color-text);
    margin-bottom: 0.4rem;
}
.reverse-list p {
    margin: 0 0 0.4rem 0;
    font-size: 0.95rem;
    color: var(--color-text-subtle);
}
.reverse-list small {
    display: block;
    color: var(--color-main);
    font-size: 0.85rem;
    background-color: #fbf2f2;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
}

/* FAQセクション */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.faq-item {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.faq-item h3 {
    font-size: 1rem;
    color: var(--color-main);
    margin: 0 0 0.8rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.faq-item p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* スマホ対応調整 */
@media (max-width: 600px) {
    .recipe-tab-nav {
        flex-direction: column;
        align-items: stretch;
    }
    .recipe-tab-button {
        justify-content: center;
    }
    .guide-hero h1 {
        font-size: 1.6rem;
    }
}
/* ===============================================
   活用レシピページ (utilization-guide.html) 追加スタイル
   =============================================== */

/* ヒーローエリア */
.guide-hero {
    text-align: center;
    margin-bottom: 3rem;
    padding: 4rem 2rem;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}
.guide-hero h1 {
    font-size: 2rem;
    color: var(--color-main);
    margin-bottom: 1.5rem;
    font-family: 'Shippori Mincho', serif;
}
.guide-lead {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #333; /* コントラスト比向上のため濃く */
}

/* タブナビゲーション */
.recipe-tab-nav {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}
.recipe-tab-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: transparent; /* 背景なし */
    border: 2px solid var(--color-border); /* 枠線でボタン感 */
    border-radius: 50px;
    padding: 14px 32px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #555;
    box-shadow: none; /* 影なし（フラット） */
}
.recipe-tab-button:hover {
    border-color: var(--color-main);
    background-color: #fafafa;
    color: var(--color-main);
}
.recipe-tab-button.active {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: #fff;
    /* 影なし */
}
.tab-svg-icon {
    width: 28px;
    height: 28px;
}
.tab-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.3;
}
.tab-text strong {
    font-size: 1.15rem;
    font-weight: 700;
}
.tab-text small {
    font-size: 0.8rem;
    opacity: 0.9;
    font-weight: normal;
}

/* タブパネル制御 */
.recipe-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.recipe-panel.active {
    display: block;
    opacity: 1;
}

/* レシピグリッド */
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 5rem;
}

/* レシピカード */
.recipe-card {
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* テーマカラー装飾 */
.recipe-card.theme-public { border-top: 6px solid var(--color-accent); }
.recipe-card.theme-private { border-top: 6px solid var(--color-project); }

.recipe-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}
.recipe-icon-box {
    width: 64px;
    height: 64px;
    background-color: #fcfcfc;
    border: 1px solid #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text);
}
.card-svg-icon {
    width: 32px;
    height: 32px;
    stroke: #555;
}
.recipe-title {
    text-align: right;
    flex-grow: 1;
    margin-left: 1rem;
}
.recipe-title h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
    color: #333;
    font-weight: 700;
}
.recipe-difficulty {
    color: #fbc02d; 
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.recipe-catch {
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    color: var(--color-main);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.recipe-desc {
    font-size: 1rem;
    color: #444; /* 可読性向上のため少し濃く */
    margin-bottom: 2.5rem;
    line-height: 1.8; /* 行間を広げる */
    flex-grow: 1;
}

/* タイムライン (How to) */
.recipe-steps {
    background-color: #fdfdfd;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.recipe-steps h4 {
    margin: 0 0 1.2rem 0;
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 0.5rem;
}
.timeline {
    position: relative;
    padding-left: 12px;
}
.timeline::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 30px;
    left: 15px; 
    width: 2px;
    background: repeating-linear-gradient(to bottom, #ddd 0, #ddd 4px, transparent 4px, transparent 8px);
}
.timeline-step {
    position: relative;
    display: flex;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
    align-items: flex-start;
}
.timeline-step:last-child { margin-bottom: 0; }
.step-marker {
    width: 28px;
    height: 28px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    color: #777;
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}
.timeline-step.result .step-marker {
    border-color: var(--color-accent);
    background-color: #e0f2f1;
    color: var(--color-accent);
}
.timeline-step p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    margin-top: 2px; /* マーカーと高さを合わせる微調整 */
}

/* Point Box */
.recipe-point {
    font-size: 0.95rem;
    color: #333;
    background-color: #fffbfb;
    border: 1px solid #f0f0f0;
    border-left: 4px solid var(--color-project);
    padding: 1rem;
    border-radius: 4px;
    line-height: 1.6;
}
.recipe-point strong {
    color: var(--color-project);
    margin-right: 0.5em;
    font-weight: 700;
}

/* 逆引きセクション */
.reverse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 4rem;
    margin-top: 2rem;
}
.reverse-column h3 {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-main);
    display: inline-block;
    font-weight: 700;
    color: #333;
}
.reverse-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.reverse-list li {
    margin-bottom: 2.5rem;
}
.reverse-list strong {
    display: block;
    font-size: 1.1rem;
    color: #222;
    margin-bottom: 0.6rem;
    font-weight: 700;
}
.reverse-list p {
    margin: 0 0 0.6rem 0;
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}
.reverse-list small {
    display: block;
    color: var(--color-main);
    font-size: 0.9rem;
    background-color: #f4eff7;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    line-height: 1.5;
}

/* FAQセクション */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.faq-item {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.faq-item h3 {
    font-size: 1.1rem;
    color: var(--color-main);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}
.faq-item p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.75;
    color: #333;
}

/* スマホ対応調整 */
@media (max-width: 600px) {
    .recipe-tab-nav {
        flex-direction: column;
        gap: 1rem;
    }
    .recipe-tab-button {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }
    .guide-hero {
        padding: 2rem 1rem;
    }
    .guide-hero h1 {
        font-size: 1.6rem;
    }
}
/* ===============================================
   報告ボタンのアイコン修正 (大きくなりすぎる問題への対応)
   =============================================== */
.report-button svg {
    width: 1.2em;  /* 文字サイズに合わせる */
    height: 1.2em;
    flex-shrink: 0;
    margin-right: 0.4em; /* テキストとの間隔 */
    vertical-align: text-bottom;
}
/* ===============================================
   報告ボタンの位置調整 (右寄せ & 余白)
   =============================================== */
.report-button {
    display: flex;          /* ブロック要素のように振る舞わせる */
    width: fit-content;     /* 幅を中身（文字とアイコン）に合わせる */
    margin-left: auto;      /* 左側の余白を自動で埋めて、右に寄せる */
    margin-top: 1rem;       /* 上に余白を空ける */
}
/* ===============================================
   通知一覧ページ (notifications.html) - 復元デザイン
   =============================================== */

/* アクションボタン（既読削除など） */
.notification-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.notification-action-button {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--color-text-subtle);
    background-color: #f0f0f0;
    border: 1px solid #eee;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.notification-action-button:hover {
    color: var(--color-main);
    background-color: #e0e0e0;
}
.notification-action-button.delete {
    color: #d32f2f;
    background-color: #fce4ec;
    border-color: #f8bbd0;
}
.notification-action-button.delete:hover {
    background-color: #f8bbd0;
}
.notification-action-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 通知が1件もない場合 */
.no-notifications-message {
    text-align: center;
    color: var(--color-text-subtle);
    padding: 3rem 0;
    font-size: 1.1em;
}

/* 通知アイテム全体（リンク） */
.notification-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-border);
}
.notification-item-link:last-child {
    border-bottom: none;
}

/* 通知アイテムのコンテナ */
.notification-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
    background-color: var(--color-card-bg);
    transition: background-color 0.2s;
}
.notification-item-link:hover .notification-item {
    background-color: #fdfdfd;
}

/* 未読 (unread) */
.notification-item.unread {
    border-left: 4px solid var(--color-accent);
    padding-left: calc(1rem - 4px);
    background-color: #fffaf0; /* 以前のデザインに合わせて薄い色を追加 */
}
/* 既読 (read) */
.notification-item.read {
    color: var(--color-text-subtle);
}

/* 通知アイコン（左側） */
.notification-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-base);
}
    /* アイコンの種類ごとの色分け */

/* ▼▼▼ 通知アイコンの色分け（修正版：緑・黄・枠線なし） ▼▼▼ */

/* 1. リアクション (いいね/感想) -> 「緑」に変更 */
.notification-icon.favorite,
.notification-icon.feedback_tag {
    background-color: #e8f5e9; /* 薄い緑 */
    color: #2e7d32;            /* 濃い緑 */
    border: none;              /* 枠線なし */
}

/* 2. プロジェクト関連 -> テーマカラー「赤 (Project)」 */
/* (参加 / 派生プロジェクト / フォロー中の人の新プロジェクト) */
.notification-icon.project_join,
.notification-icon.project_derivation,
.notification-icon.follow_new_project {
    background-color: var(--color-project-bg); /* 薄い赤 */
    color: var(--color-project);               /* 赤 */
    border: none;
}

/* 3. 作品関連 -> テーマカラー「青 (Work)」 */
/* (新着作品 / 連鎖作品 / フォロー中の人の新作品) */
.notification-icon.project_new_work,
.notification-icon.project_participant_new_work,
.notification-icon.follow_new_work,
.notification-icon.work_chain {
    background-color: var(--color-work-bg); /* 薄い青 */
    color: var(--color-work);               /* 青 */
    border: none;
}

/* 4. ユーザー・システム関連 -> 「黄色」に変更 */
/* (フォローされた / セキュリティ通知) */
.notification-icon.follow,
.notification-icon.security_password_change,
.notification-icon.security_email_change {
    background-color: #fefce8; /* 薄い黄色 */
    color: #fbc02d;            /* 濃い黄色（視認性確保のため少しオレンジ寄り） */
    border: none;
}

/* 通知メッセージ（中央） */
.notification-content {
    flex-grow: 1;
}
.notification-message {
    margin: 0;
    line-height: 1.6;
}
.notification-actor-name {
    font-weight: 700;
    color: var(--color-text);
}
.notification-item.read .notification-actor-name {
    color: var(--color-text-subtle);
}

/* タイムスタンプ（右側） */
.notification-timestamp {
    font-size: 0.85em;
    color: var(--color-text-subtle);
    margin-top: 0.25rem;
    display: block;
}

/* ページネーション（notifications.html 専用） */
#pagination-controls-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
}
#pagination-controls-container button {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: var(--color-text);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
#pagination-controls-container button:disabled {
    background-color: #f9f9f9;
    color: #ccc;
    cursor: not-allowed;
}
#pagination-controls-container button:not(:disabled):hover {
    background-color: #e0e0e0;
}
.pagination-info {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-text-subtle);
}
/* --- プロジェクト詳細: ダウンロードボタンのスタイル変更 --- */
.action-button.download-toggle-btn {
    background-color: #333333;
    color: #ffffff;
    border: 1px solid #333333;
    box-shadow: none; /* ドロップシャドウなし */
    transition: all 0.3s ease;
}

.action-button.download-toggle-btn:hover,
.action-button.download-toggle-btn:focus {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #333333;
    box-shadow: none;
}
/* ===============================================
   11. プロジェクト詳細: タイムライン & フィルター
   =============================================== */

/* --- フィルターバー --- */
.works-filter-container {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.9em;
    color: var(--color-text);
    background-color: #fff;
    cursor: pointer;
}
.filter-select:focus {
    outline: none;
    border-color: var(--color-main);
}

.filter-search-box {
    flex-grow: 1;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    padding: 0 10px;
    min-width: 200px;
}
.filter-search-box:focus-within {
    border-color: var(--color-main);
}
.filter-search-input {
    border: none;
    padding: 8px 0;
    width: 100%;
    font-size: 0.9em;
    outline: none;
}
.filter-search-icon {
    color: var(--color-text-subtle);
    margin-right: 8px;
}

/* --- タイムライン構造 --- */
.timeline-container {
    position: relative;
    padding-left: 2rem; /* 左側の余白 */
}

/* 縦のライン（軸） */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 14px; /* マーカーの中心 */
    width: 2px;
    background-color: #e0e0e0;
    z-index: 0;
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem; /* マージンを少し詰める */
    animation: fadeIn 0.5s ease forwards;
}

/* マーカー（点） */
.timeline-marker {
    position: absolute;
    top: 20px;
    left: -24px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border: 2px solid var(--color-text-subtle);
    border-radius: 50%;
    z-index: 1;
}

/* 最新のアイテム */
.timeline-item:first-child .timeline-marker {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(102, 205, 170, 0.2);
}

/* プロジェクト化したアイテム */
.timeline-item.is-evolved .timeline-marker {
    border-color: var(--color-project);
    background-color: var(--color-project);
}

/* --- コンテンツエリア (カード) --- */
.timeline-content {
    width: 100%;
}

.timeline-date-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-text-subtle);
    background-color: var(--color-base);
    padding: 2px 8px;
    border-radius: 12px;
}

/* ▼ PC用: 横長レイアウト化 (コンパクト表示) ▼ */
@media (min-width: 768px) {
    .timeline-content .project-card {
        flex-direction: row; /* 横並びにする */
        align-items: stretch;
        min-height: 140px; /* 最低限の高さを確保 */
    }

    .timeline-content .card-thumbnail,
    .timeline-content .card-thumbnail-placeholder {
        width: 240px; /* 固定幅 */
        height: auto;
        aspect-ratio: auto; /* 比率固定を解除 */
        flex-shrink: 0;
        border-bottom: none;
        border-right: 1px solid var(--color-border);
    }

    /* プレースホルダーの文字サイズ調整 */
    .timeline-content .placeholder-text {
        font-size: 2rem;
    }
}

/* --- 進化コネクター --- */
.next-project-connector {
    margin-top: 1rem;
    margin-left: 1rem;
    padding: 0.8rem 1rem;
    background-color: var(--color-project-bg);
    border-left: 4px solid var(--color-project);
    border-radius: 0 8px 8px 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    transition: background-color 0.2s;
}

.next-project-connector::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: -14px;
    width: 20px;
    height: 1.5rem; /* コネクタの位置調整 */
    border-left: 2px dashed var(--color-project);
    border-bottom: 2px dashed var(--color-project);
    border-bottom-left-radius: 8px;
    pointer-events: none;
}

.next-project-connector:hover {
    background-color: #fce4ec;
}

.next-project-text {
    font-weight: 700;
    color: var(--color-project);
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.next-project-arrow {
    font-size: 1.2em;
    color: var(--color-project);
    transition: transform 0.2s;
}

.next-project-connector:hover .next-project-arrow {
    transform: translateX(5px);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* モバイル対応調整 */
@media (max-width: 600px) {
    .timeline-container {
        padding-left: 1.5rem;
    }
    .timeline-container::before {
        left: 6px;
    }
    .timeline-marker {
        left: -22px;
        width: 10px;
        height: 10px;
    }
    .works-filter-container {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-item, .filter-search-box {
        width: 100%;
    }
}
/* ===============================================
   ページネーション & もっと見るボタン (テキストリンク版)
   =============================================== */

/* コンテナ：中央揃えと余白 */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.5rem;
    width: 100%;
    clear: both;
}

/* もっと見るボタン（テキストのみ） */
.show-more-button {
    display: inline-block;
    background: none;          /* 背景なし */
    border: none;              /* 枠線なし */
    color: var(--color-main);  /* 文字色（紫） */
    padding: 8px 16px;         /* クリックしやすいよう余白は確保 */
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease;
    box-shadow: none;          /* 影なし */
}

.show-more-button:hover {
    background: none;
    color: var(--color-main);
    text-decoration: none; /* ホバー時に下線を表示 */
    opacity: 0.7;
    box-shadow: none;
    transform: none;
}

.show-more-button:active {
    transform: none;
    box-shadow: none;
}
/* ===============================================
   マイページ & TOPページ: プロジェクト作成ボタン (共通デザイン・余白調整版)
   =============================================== */

/* 共通: プロジェクト作成ボタン（サイドバーとデザイン統一） */
.project-create-btn {
    display: block;
    width: 100%;
    max-width: 320px; /* 程よい幅に制限 */
    margin: 0 auto;
    padding: 12px;
    background-color: var(--color-accent); /* ミントグリーン */
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 8px; /* 角丸8px */
    font-weight: 600;
    transition: opacity 0.2s;
    border: none;
    box-shadow: none; /* ドロップシャドウなし */
}

.project-create-btn:hover {
    opacity: 0.85;
    background-color: var(--color-accent);
    color: #ffffff;
}

/* TOPページ用 CTAセクション (余白縮小) */
.top-cta-section {
    text-align: center;
    padding: 0 0 1.5rem;      
    background-color: transparent;
    border: none;
    margin-top: -1.5rem;      
    position: relative;
    z-index: 1;
}

/* マイページ用 アクションセクション (新規追加: 余白縮小) */
.mypage-action-section {
    text-align: center;
    margin-bottom: 1.5rem; /* 下のナビゲーションとの距離を詰める */
    padding-top: 0;
}

/* マイページ: ナビゲーションリンク */
.mypage-nav-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}
/* ===============================================
   マイページ: 見出し横へのボタン配置調整
   =============================================== */

/* 見出しとアクションボタンを横並びにするコンテナ */
.section-header-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* 見出しのマージンをリセット（コンテナ側で制御するため） */
.section-header-with-action h2 {
    margin-bottom: 0;
}

/* 少しコンパクトな作成ボタン（見出し横用） */
.project-create-btn-small {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--color-accent); /* ミントグリーン */
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9em;
    transition: opacity 0.2s;
    border: none;
    box-shadow: none;
    white-space: nowrap;
}

.project-create-btn-small:hover {
    opacity: 0.85;
    background-color: var(--color-accent);
    color: #ffffff;
}

/* スマホ表示時の調整（縦並びになっても自然に見えるように） */
@media (max-width: 600px) {
    .section-header-with-action {
        margin-bottom: 2rem;
    }
    .project-create-btn-small {
        margin-left: auto; /* 右寄せ */
    }
}
/* ===============================================
   3. レイアウト枠 & サイドバー (右側表示対応版)
   =============================================== */

/* --- ハンバーガーボタンの配置調整 --- */
/* モバイルでは右端（HTML順序通り）、PCでは左端に配置するための設定 */
.hamburger-button {
    display: block;
    z-index: 1011;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    /* ▼ 追加: モバイルで右端に配置した際の左マージン */
    margin-left: 0.5rem; 
}
.hamburger-button:hover { background-color: #f0f0f0; }
.hamburger-button span { display: block; width: 22px; height: 2px; background-color: var(--color-text); margin: 5px auto; transition: all 0.3s; }

/* --- サイドバーの基本設定 --- */
.sidebar {
    width: 260px;
    background-color: var(--color-card-bg);
    height: calc(100vh - var(--header-height));
    position: fixed;
    top: var(--header-height);
    display: flex;
    flex-direction: column;
    /* ▼ 変更: 左右のアニメーションに対応 */
    transition: right 0.3s ease, left 0.3s ease; 
    z-index: 1000;
    box-shadow: none;
}

/* --- モバイル・タブレット (1024px以下): 右からサイドバー --- */
@media (max-width: 1024px) {
    .sidebar {
        left: auto;        /* 左固定を解除 */
        right: -280px;     /* 右側の画面外に配置 */
        border-right: none;
        border-left: 1px solid var(--color-border); /* 左側に境界線 */
    }

    #page-wrapper { margin-left: 0; }

    /* 開いた状態 */
    #page-wrapper.sidebar-open .sidebar {
        left: auto;
        right: 0; /* 右から出現 */
        box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* 左側に影を落とす */
    }

    /* ハンバーガーアイコンのアニメーション */
    #page-wrapper.sidebar-open .hamburger-button span:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
    #page-wrapper.sidebar-open .hamburger-button span:nth-of-type(2) { opacity: 0; }
    #page-wrapper.sidebar-open .hamburger-button span:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }
    
    /* 通知アイコンの右余白を調整（ハンバーガーが右に来るため） */
    #notification-icon-wrapper {
        margin-right: 0; /* 余白削除 */
    }
}

/* --- PC (1025px以上): 左固定サイドバー --- */
@media (min-width: 1025px) {
    /* ハンバーガーボタンを左端へ移動 (Flexboxの順序変更) */
    .hamburger-button {
        order: -1; /* 先頭に配置 */
        margin-left: 0;
        margin-right: 1rem;
    }

    .sidebar {
        left: 0;          /* 左固定 */
        right: auto;      /* 右指定を解除 */
        border-right: 1px solid var(--color-border);
        border-left: none;
    }

    #page-wrapper { margin-left: 260px; }
    
    /* 閉じた状態（PC） */
    #page-wrapper.sidebar-collapsed .sidebar { 
        left: -260px; 
    }
    #page-wrapper.sidebar-collapsed { margin-left: 0; }

    .hamburger-button span { display: none; }
    .hamburger-button::before { content: '«'; font-size: 1.5rem; color: var(--color-text-subtle); transition: transform 0.3s ease; display: block; }
    #page-wrapper.sidebar-collapsed .hamburger-button::before { transform: scaleX(-1); }
}
/* ===============================================
   投稿・編集フォーム UI改善
   =============================================== */

/* フォームの説明書きテキスト */
.form-text {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85em;
    color: #666;
    line-height: 1.5;
}

/* 削除ルールの強調表示（黄色） */
.deletion-rule-box {
    background-color: #fffde7; /* 薄い黄色 */
    border: 2px solid #fbc02d; /* 濃い黄色 */
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
}

.deletion-rule-box .form-label {
    color: #f57f17; /* タイトルも黄色系に */
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.deletion-rule-box .form-text {
    color: #333; /* 本文は読みやすく黒に近い色 */
}

/* チェックボックス・ラジオボタンエリアの説明書き調整 */
.checkbox-group + .form-text,
.radio-group + .form-text {
    margin-top: 0.8rem;
    padding-left: 0.5rem;
    border-left: 3px solid #ddd;
}
/* ===============================================
   プロジェクト詳細: SNS許可設定の表示
   =============================================== */
.sns-permission-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
    margin-top: 4px;
}

.sns-allowed {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.sns-credit {
    background-color: #fff8e1;
    color: #f57f17;
    border: 1px solid #ffe082;
}

.sns-forbidden {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

.sns-credit-name {
    display: block;
    margin-top: 4px;
    font-size: 0.85em;
    color: #555;
    background-color: #f9f9f9;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px dashed #ccc;
}
/* ===============================================
   ★ 新カードデザイン実装 (Projects & Works) - 修正版
   =============================================== */

/* --- 共通: サムネイルのズームエフェクト --- */
.project-card .card-thumbnail-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    position: relative;
    background-color: #f0f0f0;
}

.project-card .card-thumbnail {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
    border-bottom: none;
}
.project-card:hover .card-thumbnail {
    transform: scale(1.1);
}

/* --- A. プロジェクトカード (Project) --- */
.project-card .card-thumbnail-small.project-theme {
    background: linear-gradient(135deg, #fff5f5 0%, #ffebee 100%);
    color: var(--color-project);
    border: 1px solid #ffcdd2;
    font-family: 'Shippori Mincho', serif;
    text-shadow: 1px 1px 0px #fff;
    box-shadow: inset 0 0 10px rgba(214, 90, 90, 0.1);
}

/* --- B. 作品カード (Work) : メディア別デザイン --- */

/* 1. 小説・テキスト (Novel/Text) */
.card-thumbnail-novel {
    width: 100%;
    height: 100%;
    background-color: #fdfbf7;
    background-image: 
        linear-gradient(transparent 95%, #e8e0d0 95%),
        linear-gradient(90deg, transparent 95%, #e8e0d0 95%); 
    background-size: 20px 20px;
    padding: 1.5rem;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
}
.card-thumbnail-novel .novel-text {
    writing-mode: vertical-rl;
    font-family: 'Shippori Mincho', serif;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.8;
    max-height: 100%;
    overflow: hidden;
    letter-spacing: 0.05em;
    opacity: 0.8;
}
.card-thumbnail-novel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 12px;
    background-color: #d7ccc8;
    border-right: 1px solid #bcaaa4;
    z-index: 2;
}

/* 2. 音楽 (Music) - 静止画波形 */
.card-thumbnail-music {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #2c3e50 0%, #000000 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.music-visualizer {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 60px;
}
.music-bar {
    width: 8px;
    background-color: var(--color-work);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 10px var(--color-work);
    /* ★修正: アニメーション廃止（静止画にする） */
    animation: none; 
}
/* 静的に高さを変えて波形っぽく見せる */
.music-bar:nth-child(1) { height: 40%; }
.music-bar:nth-child(2) { height: 80%; }
.music-bar:nth-child(3) { height: 60%; }
.music-bar:nth-child(4) { height: 90%; }
.music-bar:nth-child(5) { height: 50%; }

/* 3. 動画 (Video) - フィルム風（白枠） */
.card-thumbnail-video {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* ★修正: フィルム穴を白くして視認性を上げる */
.card-thumbnail-video::before,
.card-thumbnail-video::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 12px;
    /* 白い穴 */
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%);
    background-size: 20px 100%;
    z-index: 2;
    opacity: 0.8;
}
.card-thumbnail-video::before { top: 0; border-bottom: 1px solid #555; }
.card-thumbnail-video::after { bottom: 0; border-top: 1px solid #555; }

.video-title-overlay {
    color: #fff;
    font-family: sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    text-align: center;
    padding: 0 2rem;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===============================================
   ★ プロジェクト詳細: タイムラインのコンパクト化
   =============================================== */

/* PC表示時 (768px以上) のタイムラインカード調整 */
@media (min-width: 768px) {
    /* カード全体の高さを圧縮 */
    .timeline-content .project-card {
        flex-direction: row;
        align-items: center; /* stretchからcenterに変更 */
        min-height: 80px;    /* ★修正: 140px -> 80px に半減 */
        height: 100px;       /* 固定高さを指定してコンパクトに */
    }

    /* サムネイルのサイズ縮小 */
    .timeline-content .card-thumbnail-wrapper {
        width: 140px;        /* ★修正: 幅を狭く */
        height: 100%;        /* 親の高さに合わせる */
        flex-shrink: 0;
        border-bottom: none;
        border-right: 1px solid var(--color-border);
    }

    /* 内部のテキストサイズ調整 */
    .timeline-content .placeholder-text {
        font-size: 1.5rem;   /* 文字サイズ縮小 */
    }
    .timeline-content .card-content {
        padding: 0.5rem 1rem; /* パディング縮小 */
        justify-content: center;
    }
    .timeline-content .card-title {
        font-size: 1rem;      /* タイトル文字サイズ縮小 */
        margin-bottom: 0.2rem;
    }
    .timeline-content .project-card-author {
        font-size: 0.75em !important;
        margin: 0 !important;
    }
    .timeline-content .card-meta {
        font-size: 0.75rem;
        margin-top: 0.2rem;
    }
    
    /* タイムラインアイテム間の余白も詰める */
    .timeline-item {
        margin-bottom: 1rem;
    }
}

/* ===============================================
   ★ 補足ファイル (Supplemental Files) のレイアウト修正
   =============================================== */
.supplemental-audio-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.supplemental-audio-header {
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #f9f9f9;
}

.supplemental-audio-player-wrapper {
    padding: 1rem;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box; /* はみ出し防止 */
}

.supplemental-audio-player-wrapper audio {
    width: 100%; /* 親要素いっぱいに広げる */
    display: block;
    height: 40px;
}
/* ===============================================
   ★ 修正版 v2: カードデザイン最終調整 & レスポンシブ
   =============================================== */

/* 1. 「WORK / PROJECT」タグの位置変更 */
/* 右上から左上へ移動 */
.card-type-label {
    top: 10px;
    left: 10px;       
    right: auto;      
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* 視認性アップのための影 */
}

/* PROJECTタグは「赤」のまま維持（テーマカラー） */
.card-type-label.project {
    background-color: var(--color-project); 
}

/* 2. プロジェクトサムネイルの背景色変更（赤すぎ問題の解消） */
/* 赤背景をやめ、温かみのあるグレー/オフホワイトに変更 */
.project-card .card-thumbnail-small.project-theme {
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); /* ニュートラルなグラデーション */
    color: var(--color-project); /* 文字色は赤のまま（アクセント） */
    border: 1px solid #e0e0e0;   /* 枠線もグレーに */
    font-family: 'Shippori Mincho', serif;
    text-shadow: 1px 1px 0px #fff;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.02); /* ほんのり立体感 */
}

/* 3. 動画サムネイル: テキスト削除・再生アイコン表示 */
.card-thumbnail-video .video-title-overlay {
    display: none; /* テキスト非表示 */
}

/* 背景に再生アイコンを表示 */
.card-thumbnail-video {
    /* SVGアイコンを背景画像として埋め込み */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='48' height='48'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px;
    background-color: #222; /* 背景は暗い色で引き締める */
}
/* フィルム穴を白くして視認性を上げる（再掲） */
.card-thumbnail-video::before,
.card-thumbnail-video::after {
    background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%);
    opacity: 0.6;
}

/* 4. タイムライン (Project Detail) のレスポンシブ完全分離 */

/* --- スマホ・タブレット (767px以下) --- */
@media (max-width: 767px) {
    .timeline-content .project-card {
        flex-direction: column; /* 縦並び (元のカード型) */
        height: auto;           /* 高さは成り行き */
        align-items: flex-start;
    }
    .timeline-content .card-thumbnail-wrapper {
        width: 100%;            /* 横幅いっぱい */
        height: auto;
        aspect-ratio: 16 / 9;   /* 比率を戻す */
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    .timeline-content .card-content {
        padding: 1rem;
        width: 100%;
        box-sizing: border-box;
    }
    /* スマホでは文字サイズも標準に戻す */
    .timeline-content .placeholder-text { font-size: 2rem; }
    .timeline-content .card-title { font-size: 1.1rem; margin-bottom: 0.5rem; }
}

/* --- PC (768px以上) --- */
@media (min-width: 768px) {
    .timeline-content .project-card {
        flex-direction: row;    /* 横並び */
        align-items: center;
        height: 100px;          /* 固定高さ */
    }
    .timeline-content .card-thumbnail-wrapper {
        width: 160px;           /* 固定幅 */
        height: 100%;
        border-right: 1px solid var(--color-border);
        border-bottom: none;
    }
    .timeline-content .card-content {
        padding: 0 1rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start; /* 左寄せ */
    }
    .timeline-content .card-title {
        font-size: 1rem;
        margin: 0 0 0.3rem 0;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
/* ===============================================
   ★ 創作の歴史 (Creative History) - テキストリンク版
   =============================================== */
.lineage-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: #fcfcfc;
    border: 1px solid #f0f0f0; /* 薄い枠線 */
    border-radius: 8px;
}

.lineage-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-subtle);
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed #eee;
}

/* フロー全体コンテナ */
.lineage-flow {
    display: flex;
    align-items: baseline; /* テキストのベースラインを揃える */
    flex-wrap: wrap;       /* 折り返し有効 */
    gap: 0.5rem 0.2rem;    /* 上下0.5rem, 左右0.2remの間隔 */
    line-height: 1.8;      /* 行間を少し広めに */
}

/* 各アイテムのラッパー */
.lineage-item {
    display: inline-flex;
    align-items: center;
}

/* テキストリンク本体 */
.lineage-box {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    color: #555; /* 通常のテキスト色 */
    font-size: 0.95rem;
    transition: color 0.2s;
    background: transparent; /* 背景なし */
    border: none;            /* 枠線なし */
    padding: 0;              /* 余白なし */
}

/* ホバー時: メインカラー（紫）へ */
.lineage-box:hover {
    color: var(--color-main);
    text-decoration: underline;
    background-color: transparent;
    transform: none; /* 動きもなし */
    box-shadow: none;
}

/* 現在地 (Current) */
.lineage-box.current {
    color: var(--color-text); /* 黒文字 */
    font-weight: 700;         /* 太字 */
    pointer-events: none;     /* クリック不可 */
}
.lineage-box.current:hover {
    text-decoration: none;
}

/* アイコン */
.lineage-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    opacity: 0.7;
}
/* プロジェクト用アイコン色 */
.lineage-type-project .lineage-icon { color: var(--color-project); }
/* 作品用アイコン色 */
.lineage-type-work .lineage-icon { color: var(--color-work); }

/* テキスト */
.lineage-text {
    /* 長すぎるタイトルのみ省略するが、基本は表示 */
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 矢印 (区切り) */
.lineage-arrow {
    margin: 0 0.5rem;
    color: #ccc;
    font-size: 0.8rem;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .lineage-text {
        max-width: 150px; /* スマホでは短めに省略 */
    }
}
/* ===============================================
   活用レシピ (Utilization Guide) - 非公開テーマ (青色)
   =============================================== */

/* 非公開 (Personal) 用のテーマカラー設定 */
/* タブが青くなるわけではなく、カードの上部ラインなどで使用 */
.recipe-card.theme-personal { 
    border-top: 6px solid var(--color-work); /* 作品カラー(ソフトブルー)を流用 */
}

/* ===============================================
   キャンペーンページ (Campaigns) - 心理的安全性注釈
   =============================================== */

.campaign-notice-box {
    background-color: #fff8e1; /* 薄い黄色 */
    border: 1px solid #ffe082;
    color: #5d4037;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 0 auto 3rem;
    max-width: 800px;
    font-size: 0.95rem;
    line-height: 1.7;
    text-align: center;
    box-shadow: none;
}
.campaign-notice-box strong {
    color: #f57f17; /* 濃いオレンジ */
}

/* スマホ対応 */
@media (max-width: 600px) {
    .campaign-notice-box {
        padding: 1.2rem;
        font-size: 0.9rem;
        text-align: left; /* スマホでは左寄せの方が読みやすい */
    }
}
/* ===============================================
   サイドバー最適化 (Sidebar Optimization) - コンパクト版
   =============================================== */

/* 新着プロジェクトの期間フィルタ（横並び・コンパクト） */
.sidebar-date-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* 間隔を狭める */
    margin-bottom: 0.5rem;
}

.sidebar-date-filters a {
    display: inline-block;
    background-color: #f0f0f0;
    padding: 4px 10px; /* パディングを小さく */
    border-radius: 6px;
    font-size: 0.8rem; /* 文字サイズを小さく */
    color: var(--color-text);
    text-decoration: none;
    transition: background-color 0.2s;
    margin: 0 !important; 
    border: 1px solid transparent;
}

.sidebar-date-filters a:hover {
    background-color: #e0e0e0;
    border-color: #ccc;
    color: var(--color-main);
}

/* ジャンルなどの通常リンクも少し小さくする */
.sidebar-section a:not(.sidebar-more-link):not(.sidebar-tags a):not(.icon-link) {
    font-size: 0.85rem; /* デフォルトより小さく */
    padding: 5px 10px;  /* 上下の余白を詰める */
}

/* サイドバーフッター (固定領域) の調整 - 圧縮 */
.sidebar-footer {
    padding: 0.8rem 20px; /* 上下の余白を大幅に削減 */
    background-color: var(--color-card-bg);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 要素間の隙間を詰める */
}

/* 統合されたフッターリンク (縦並びリスト・コンパクト) */
.sidebar-footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.1rem; /* 行間を極限まで狭める */
    margin-bottom: 0;
}

.sidebar-footer-links a {
    color: #666; /* 文字色を少し薄く */
    text-decoration: none;
    font-size: 0.75rem; /* 文字サイズを小さく (12px相当) */
    transition: color 0.2s;
    padding: 1px 0; /* クリック判定用の微小な余白のみ */
    line-height: 1.4;
}

.sidebar-footer-links a:hover {
    color: var(--color-main);
    text-decoration: underline;
}

/* ログアウトボタン (修正版) */
.sidebar-logout {
    margin-top: 0.2rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #eee;
}
.sidebar-logout a {
    color: #888;          /* 色を少し濃くして視認性アップ */
    font-size: 0.9rem;    /* 0.75rem -> 0.9rem に拡大 */
    font-weight: 600;     /* 少し太くする */
    text-decoration: none;
    display: block;       /* 領域全体をクリック可能に */
    transition: color 0.2s;
}
.sidebar-logout a:hover {
    color: #d32f2f;
}

/* ===============================================
   12. ストレージ容量表示 (Storage Usage Bar)
   =============================================== */
.storage-usage-container {
    background-color: var(--color-card-bg);
    padding: 1.2rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    margin-bottom: 2rem;
    box-shadow: none;
}

.storage-info-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
    color: var(--color-text);
}

.storage-label {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.storage-values {
    font-family: monospace; /* 数字を見やすく */
    color: var(--color-text-subtle);
}

.storage-progress-track {
    width: 100%;
    height: 12px;
    background-color: #f0f0f0;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.storage-progress-fill {
    height: 100%;
    background-color: var(--color-accent); /* 通常時はミントグリーン */
    width: 0%;
    transition: width 0.6s ease-out;
    border-radius: 6px;
}

/* 90%以上で警告色（赤系） */
.storage-progress-fill.warning {
    background-color: #ef5350; 
}

/* 100%で危険色 */
.storage-progress-fill.danger {
    background-color: #d32f2f;
}

.storage-remaining-text {
    text-align: right;
    font-size: 0.8rem;
    color: var(--color-text-subtle);
    margin-top: 0.5rem;
}
/* ===============================================
   13. Q&Aページ (qa.html)
   =============================================== */
.qa-header {
    text-align: center;
    margin-bottom: 3rem;
}
.qa-header h1 {
    font-size: 2rem;
    color: var(--color-main);
    margin-bottom: 1rem;
}
.qa-header p {
    color: var(--color-text-subtle);
    margin-bottom: 2rem;
}

/* 検索ボックス */
.qa-search-container {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}
#qa-search-input {
    width: 100%;
    padding: 14px 20px 14px 45px;
    border: 1px solid var(--color-border);
    border-radius: 30px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: all 0.2s;
    background-color: #fff;
}
#qa-search-input:focus {
    outline: none;
    border-color: var(--color-main);
    box-shadow: 0 0 0 4px rgba(169, 90, 205, 0.1);
}
.qa-search-container .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
}

/* カテゴリボタン */
.qa-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2.5rem;
}
.qa-cat-btn {
    background-color: #fff;
    border: 1px solid var(--color-border);
    padding: 10px 20px; /* アイコン削除に合わせて調整 */
    border-radius: 30px;
    font-size: 0.95rem;
    color: var(--color-text-subtle);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    /* アイコン関連スタイル削除 */
}
/* アイコンクラス削除 */

.qa-cat-btn:hover {
    background-color: #f9f9f9;
    color: var(--color-main);
    border-color: var(--color-main);
}
.qa-cat-btn.active {
    background-color: var(--color-main);
    color: #fff;
    border-color: var(--color-main);
}

/* Q&Aリスト */
.qa-list-container {
    max-width: 800px;
    margin: 0 auto 4rem;
}
.qa-item {
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
}
.qa-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.qa-question:hover {
    background-color: #fdfdfd;
}
.qa-question.active {
    background-color: #fcfcfc;
    border-bottom: 1px solid #f0f0f0;
}
.qa-q-mark {
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    color: var(--color-main);
    font-size: 1.2rem;
    margin-right: 1rem;
    flex-shrink: 0;
}
.qa-question-text {
    flex-grow: 1;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.5;
}
.qa-toggle-icon {
    font-size: 1.5rem;
    color: var(--color-text-subtle);
    margin-left: 1rem;
    font-weight: 300;
    flex-shrink: 0;
}

/* 回答エリア */
.qa-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #fffbfb;
}
.qa-answer-content {
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
}
.qa-a-mark {
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    color: var(--color-project);
    font-size: 1.2rem;
    margin-right: 1rem;
    flex-shrink: 0;
}
.qa-answer-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #444;
}
.qa-answer-text a {
    color: var(--color-main);
    text-decoration: underline;
}
.qa-no-result {
    text-align: center;
    padding: 3rem;
    color: var(--color-text-subtle);
}

.qa-contact-link {
    text-align: center;
    margin-top: 4rem;
    padding: 2rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ===============================================
   14. ダークモード & テーマ切り替え
   =============================================== */

/* ダークモード時の変数上書き */
[data-theme="dark"] {
    --color-base: #121212;           /* 背景: 深い黒 */
    --color-card-bg: #1e1e1e;        /* カード: 暗いグレー */
    --color-text: #e0e0e0;           /* 文字: オフホワイト */
    --color-text-subtle: #a0a0a0;    /* 薄文字: 明るめのグレー */
    --color-border: #333333;         /* 枠線: 暗いグレー */
    
    /* メインカラーの視認性調整（少し明るく） */
    --color-main: #c48bdf; 
    
    /* プロジェクト/作品カラーの調整 */
    --color-project-bg: #2c1a1a;
    --color-work-bg: #1a232c;
}

/* ヘッダーのダークモード対応（変数が使われていない箇所の個別対応） */
[data-theme="dark"] .site-header {
    background-color: #1f1f1f;
    border-bottom-color: #333;
}

/* 通知ボタンのホバー色調整 */
[data-theme="dark"] .notification-button:hover,
[data-theme="dark"] .theme-toggle-button:hover,
[data-theme="dark"] .hamburger-button:hover {
    background-color: #333;
    color: #fff;
}

/* フォーム入力欄のダークモード対応 */
[data-theme="dark"] .form-input, 
[data-theme="dark"] .form-textarea,
[data-theme="dark"] #qa-search-input {
    background-color: #2c2c2c;
    border-color: #444;
    color: #fff;
}
[data-theme="dark"] .form-input:focus, 
[data-theme="dark"] .form-textarea:focus {
    border-color: var(--color-main);
}

/* その他微調整 */
[data-theme="dark"] .sidebar-search input {
    background-color: #2c2c2c;
    border-color: #444;
    color: #fff;
}
[data-theme="dark"] .sidebar-search-button {
    background-color: #333;
    border-color: #444;
}
[data-theme="dark"] .card-thumbnail-placeholder {
    background-color: #2c2c2c;
}
[data-theme="dark"] .project-card.text-first .card-thumbnail-small.project-theme {
    background: linear-gradient(135deg, #2c1a1a 0%, #1f1f1f 100%);
    border-color: #442a2a;
    box-shadow: none;
}
[data-theme="dark"] .project-card:hover {
    background-color: #252525;
}
[data-theme="dark"] .timeline-step p {
    color: #ccc;
}
[data-theme="dark"] .qa-item {
    background-color: #1e1e1e;
}
[data-theme="dark"] .qa-question:hover {
    background-color: #252525;
}
[data-theme="dark"] .qa-question.active {
    background-color: #2a2a2a;
}
[data-theme="dark"] .qa-answer {
    background-color: #121212;
}
[data-theme="dark"] .qa-answer-text {
    color: #ccc;
}
[data-theme="dark"] .recipe-card {
    background-color: #1e1e1e;
}
[data-theme="dark"] .recipe-title h3,
[data-theme="dark"] .recipe-desc,
[data-theme="dark"] .timeline-step p,
[data-theme="dark"] .recipe-point {
    color: #e0e0e0;
}
[data-theme="dark"] .recipe-steps {
    background-color: #252525;
    border-color: #333;
}
[data-theme="dark"] .step-marker {
    background-color: #333;
    border-color: #555;
    color: #ccc;
}
[data-theme="dark"] .recipe-point {
    background-color: #2c1a1a;
    border-color: #333;
}
[data-theme="dark"] .recipe-icon-box {
    background-color: #2c2c2c;
    border-color: #444;
    color: #e0e0e0;
}
[data-theme="dark"] .card-svg-icon {
    stroke: #e0e0e0;
}
[data-theme="dark"] .tab-text small {
    color: #aaa;
}
[data-theme="dark"] .recipe-tab-button {
    color: #aaa;
    border-color: #444;
}
[data-theme="dark"] .recipe-tab-button:hover {
    background-color: #252525;
}
[data-theme="dark"] .faq-item {
    background-color: #1e1e1e;
}
[data-theme="dark"] .faq-item p {
    color: #e0e0e0;
}
[data-theme="dark"] .guide-hero {
    background-color: #1e1e1e;
}
[data-theme="dark"] .guide-lead {
    color: #e0e0e0;
}

/* --- テーマ切り替えスイッチ --- */
.theme-toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-subtle);
    transition: all 0.2s ease;
    margin-left: 0.5rem; /* ベルマークとの間隔 */
}

.theme-toggle-button:hover {
    background-color: #f0f0f0;
    color: var(--color-main);
}

.theme-toggle-button svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
    fill: none;
    stroke: currentColor;
}

/* アイコンの切り替え制御 */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }

[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

/* ===============================================
   14. ダークモード & テーマ切り替え (修正・追記分)
   =============================================== */

/* --- サイドバー (Sidebar) --- */
[data-theme="dark"] .sidebar {
    background-color: #1e1e1e; /* カード背景と同じ暗いグレー */
    border-right-color: #333;
}
[data-theme="dark"] .sidebar-section h3 {
    color: #e0e0e0;
}
[data-theme="dark"] .sidebar-section a:not(.sidebar-more-link):not(.sidebar-tags a):not(.icon-link) {
    color: #ccc;
}
[data-theme="dark"] .sidebar-section a:not(.sidebar-more-link):not(.sidebar-tags a):not(.icon-link):hover,
[data-theme="dark"] .sidebar-section a.icon-link:hover {
    background-color: #333;
    color: var(--color-main);
}
[data-theme="dark"] .sidebar-tags a {
    background-color: #333;
    color: #ccc;
}
[data-theme="dark"] .sidebar-tags a:hover {
    background-color: #444;
    color: #fff;
}
[data-theme="dark"] .sidebar-footer {
    background-color: #1e1e1e;
    border-top-color: #333;
}
[data-theme="dark"] .sidebar-footer-links a,
[data-theme="dark"] .sidebar-logout a {
    color: #888;
}
[data-theme="dark"] .sidebar-logout a:hover {
    color: #ff6b6b;
}

/* --- マイページ (My Page) --- */
[data-theme="dark"] .profile-info,
[data-theme="dark"] .mypage-nav-link,
[data-theme="dark"] .section-header-with-action {
    background-color: #1e1e1e;
    border-color: #333;
}
[data-theme="dark"] .profile-main h1 {
    color: #e0e0e0;
}
[data-theme="dark"] .profile-text {
    color: #ccc;
}
[data-theme="dark"] .external-link-button {
    background-color: #2c2c2c;
    border-color: #444;
    color: #e0e0e0;
}
[data-theme="dark"] .external-link-button:hover {
    background-color: #333;
}
[data-theme="dark"] .creator-tag,
[data-theme="dark"] .feedback-tag {
    background-color: #3d2c42; /* 紫系の暗い色 */
    color: #e0e0e0;
}
[data-theme="dark"] .mypage-nav-link:hover {
    background-color: #252525;
    border-color: #555;
}
[data-theme="dark"] .mypage-nav-link h3 {
    color: #e0e0e0;
}

/* --- ガイド・レシピページ (Guides) --- */
[data-theme="dark"] .page-guide,
[data-theme="dark"] .guide-container {
    background-color: var(--color-base); /* 全体背景を黒に */
}
[data-theme="dark"] .guide-header,
[data-theme="dark"] .guide-hero,
[data-theme="dark"] .recipe-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .util-card {
    background-color: #1e1e1e;
    border-color: #333;
}
[data-theme="dark"] .guide-lead,
[data-theme="dark"] .recipe-desc,
[data-theme="dark"] .util-list li {
    color: #ccc;
}
[data-theme="dark"] .step-card {
    background-color: #1e1e1e;
    border-color: #333;
}
[data-theme="dark"] .step-card h3 {
    color: #e0e0e0;
}
[data-theme="dark"] .rules-box {
    background-color: #2c1a1a; /* 赤系の暗い背景 */
    border-color: #442a2a;
}
[data-theme="dark"] .rules-list strong {
    color: #e0e0e0;
}
[data-theme="dark"] .concept-diagram.circular-layout {
    background-color: #121212;
    border-color: #333;
}
[data-theme="dark"] .circular-layout .diagram-box {
    background-color: #1e1e1e;
    border-color: #333;
}
[data-theme="dark"] .box-lead {
    color: var(--color-main);
}
[data-theme="dark"] .box-title {
    color: #e0e0e0;
}

/* --- 投稿フォーム (Create/Edit) --- */
[data-theme="dark"] body.page-project-create,
[data-theme="dark"] body.page-work-create {
    background-color: #121212; /* 背景色を強制的に黒に */
}
[data-theme="dark"] .deletion-rule-box {
    background-color: #2c250a; /* 黄色系の暗い背景 */
    border-color: #554400;
}
[data-theme="dark"] .deletion-rule-box .form-text {
    color: #ccc;
}
[data-theme="dark"] .form-upload-warning-box {
    background-color: #2c250a;
    border-color: #554400;
    color: #e0e0e0;
}
[data-theme="dark"] .form-upload-warning-box p strong {
    color: #fbc02d;
}

/* --- 通知ドロップダウン (Notifications) --- */
[data-theme="dark"] .notification-dropdown {
    background-color: #1e1e1e;
    border-color: #333;
}
[data-theme="dark"] .notification-dropdown-item {
    border-bottom-color: #333;
    color: #e0e0e0;
}
[data-theme="dark"] .notification-dropdown-item:hover {
    background-color: #252525;
}
[data-theme="dark"] .notification-dropdown-item.unread {
    background-color: #2a2a2a;
}
[data-theme="dark"] .notification-dropdown-view-all {
    background-color: #1e1e1e;
    border-top-color: #333;
    color: var(--color-main);
}
[data-theme="dark"] .notification-dropdown-view-all:hover {
    background-color: #252525;
}

/* --- その他UIパーツ --- */
[data-theme="dark"] .tab-button {
    color: #aaa;
}
[data-theme="dark"] .tab-button.active {
    color: #fff;
    background-color: var(--color-main);
}
[data-theme="dark"] .project-card {
    background-color: #1e1e1e;
    border-color: #333;
}
[data-theme="dark"] .card-title {
    color: #e0e0e0;
}
[data-theme="dark"] .card-description {
    color: #aaa;
}
/* ===============================================
   15. ダークモード修正 (視認性向上・スタイル漏れ対応)
   =============================================== */

/* --- TOPページ: ヒーローセクション & お知らせ --- */
[data-theme="dark"] .hero-news {
    background-color: #1e1e1e;
    border-top: 1px solid #333;
}
[data-theme="dark"] .news-header {
    border-bottom-color: #333;
}
[data-theme="dark"] .news-header h3 {
    color: #e0e0e0;
}
[data-theme="dark"] .news-list-item {
    border-bottom-color: #333;
}
[data-theme="dark"] .news-list-item:hover {
    background-color: #252525;
}
[data-theme="dark"] .news-list-item.important {
    background-color: #2c2020; /* 薄い赤背景を暗く */
}
[data-theme="dark"] .news-date {
    color: #a0a0a0;
}
[data-theme="dark"] .news-title-link {
    color: #e0e0e0;
}
[data-theme="dark"] .hero-carousel {
    background-color: #2c2c2c;
    border-bottom-color: #333;
}
/* スライダー内の文字が見にくい場合の対応 */
[data-theme="dark"] .slide-text h2,
[data-theme="dark"] .slide-text p {
    color: #333; /* 背景画像がない場合のスライド文字色は黒に戻すか、状況に合わせて調整 */
    /* もしスライド背景が暗い色なら #fff にしてください */
}

/* --- サイドバー: アイコン付きリンク (マイページ等) --- */
[data-theme="dark"] .sidebar-icon {
    stroke: #c0c0c0; /* アイコンの色を明るく */
    fill: none;
}
[data-theme="dark"] .sidebar-section a.icon-link {
    color: #d0d0d0;
}
[data-theme="dark"] .sidebar-section a.icon-link:hover {
    background-color: #333;
    color: var(--color-main);
}
[data-theme="dark"] .sidebar-section a.icon-link:hover .sidebar-icon {
    stroke: var(--color-main);
}

/* --- Aboutページ / ガイドページ共通 --- */
/* 白背景のカードが黒くならない問題を汎用的に修正 */
[data-theme="dark"] .about-content, 
[data-theme="dark"] .about-section,
[data-theme="dark"] .guide-section {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #333;
}
/* 特定の白いボックス (運営者紹介など) */
[data-theme="dark"] .white-box, 
[data-theme="dark"] .content-card {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #e0e0e0 !important;
}
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4 {
    color: #e0e0e0;
}

/* --- マイページ: ボタン類 --- */
[data-theme="dark"] .profile-edit-button,
[data-theme="dark"] .profile-settings-button {
    background-color: #333;
    color: #fff;
    border: 1px solid #444;
}
[data-theme="dark"] .profile-edit-button:hover,
[data-theme="dark"] .profile-settings-button:hover {
    background-color: #444;
}

/* --- 活用レシピ (Utilization Guide) --- */
[data-theme="dark"] .guide-hero h1 {
    color: #e0e0e0;
}
[data-theme="dark"] .guide-lead {
    color: #ccc;
}
/* タブボタン */
[data-theme="dark"] .recipe-tab-button {
    background-color: transparent;
    border-color: #444;
    color: #aaa;
}
[data-theme="dark"] .recipe-tab-button:hover {
    background-color: #252525;
    color: var(--color-main);
    border-color: var(--color-main);
}
[data-theme="dark"] .recipe-tab-button.active {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: #fff;
}
/* Index見出し */
[data-theme="dark"] .section-lead {
    color: #aaa;
}
[data-theme="dark"] .util-card {
    background-color: #1e1e1e;
    border-color: #333;
}
[data-theme="dark"] .util-card h3 {
    color: #fff;
}
[data-theme="dark"] .util-sub {
    color: #888;
    border-bottom-color: #333;
}
[data-theme="dark"] .util-list li {
    color: #ccc;
}
[data-theme="dark"] .util-list strong {
    color: var(--color-main); /* 紫のまま維持、または明るく調整 */
}
[data-theme="dark"] .skill-card {
    background-color: #252525;
    border-color: #333;
}
[data-theme="dark"] .skill-card p {
    color: #ccc;
}
[data-theme="dark"] .guide-more-link-container {
    border-color: #444;
}
[data-theme="dark"] .guide-more-link-container p {
    color: #e0e0e0;
}
/* ===============================================
   16. ダークモード修正 (v2 - 詳細調整)
   =============================================== */

/* --- ボタン類 (編集ボタン・スライドボタン) --- */
[data-theme="dark"] .project-edit-button,
[data-theme="dark"] .profile-edit-button,
[data-theme="dark"] .profile-settings-button,
[data-theme="dark"] .slide-button {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
}
[data-theme="dark"] .slide-button:hover,
[data-theme="dark"] .project-edit-button:hover {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: #fff;
}

/* --- ガイドページ (usage-guide.html) --- */
/* 白背景カード内のテキスト */
[data-theme="dark"] .guide-hero, 
[data-theme="dark"] .step-card,
[data-theme="dark"] .guide-action {
    color: #e0e0e0;
}
[data-theme="dark"] .step-card p,
[data-theme="dark"] .guide-action p {
    color: #ccc;
}
/* 2つの遊び方セクションのカード */
[data-theme="dark"] .guide-hero .guide-lead {
    color: #e0e0e0;
}

/* 創作の連鎖 (図解) */
[data-theme="dark"] .circular-layout .diagram-box {
    background-color: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
}
[data-theme="dark"] .box-desc {
    color: #ccc;
}
/* ステップ番号付きの本文 */
[data-theme="dark"] .guide-section p {
    color: #ccc;
}

/* --- 活用レシピ (utilization-guide.html) --- */
/* タブボタンのアクティブ時テキスト */
[data-theme="dark"] .recipe-tab-button.active .tab-text small {
    color: rgba(255, 255, 255, 0.8); /* 白の半透明に */
}
/* Index素材・スキルから探す */
[data-theme="dark"] .util-card h3 {
    color: #fff;
}
[data-theme="dark"] .util-sub {
    color: #bbb;
    border-bottom-color: #444;
}
[data-theme="dark"] .util-list li {
    color: #ccc;
}
[data-theme="dark"] .skill-card {
    background-color: #252525;
    border-color: #333;
}
[data-theme="dark"] .skill-card p {
    color: #ccc;
}

/* --- 寄付ページ (donation.html) --- */
[data-theme="dark"] .guide-action p {
    color: #ccc; /* 「外部サイト...」のテキスト */
}
/* 寄付ボタン周りの白いボックス */
[data-theme="dark"] .guide-action {
    background-color: #1e1e1e;
    border: 1px solid #333;
}

/* --- その他微調整 --- */
/* カード内の薄いテキスト全般 */
[data-theme="dark"] .text-subtle,
[data-theme="dark"] .card-meta,
[data-theme="dark"] .form-text {
    color: #a0a0a0;
}
/* フォームの枠線 */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea {
    border-color: #555;
}
/* ===============================================
   17. ダークモード修正 (活用レシピ & Index視認性)
   =============================================== */

/* --- 1. 活用レシピ: テーマカラーの復元 --- */
/* タブ内のカード上部の色線を復元 */
[data-theme="dark"] .recipe-card.theme-public {
    border-top-color: var(--color-accent); /* 緑 */
}
[data-theme="dark"] .recipe-card.theme-personal {
    border-top-color: var(--color-work); /* 青 */
}
[data-theme="dark"] .recipe-card.theme-private {
    border-top-color: var(--color-project); /* 赤 */
}

/* アイコンの色をテーマカラーに合わせる */
[data-theme="dark"] .theme-public .card-svg-icon {
    stroke: var(--color-accent);
}
[data-theme="dark"] .theme-personal .card-svg-icon {
    stroke: var(--color-work);
}
[data-theme="dark"] .theme-private .card-svg-icon {
    stroke: var(--color-project);
}

/* アイコンボックスの背景を少し明るくして浮き上がらせる */
[data-theme="dark"] .recipe-icon-box {
    background-color: #2c2c2c;
    border-color: #444;
}

/* キャッチコピーの色調整 */
[data-theme="dark"] .recipe-catch {
    color: #e0e0e0;
    text-shadow: 0 0 10px rgba(169, 90, 205, 0.2); /* ほんのり光らせる */
}

/* 難易度の星の色 */
[data-theme="dark"] .recipe-difficulty {
    color: #ffd700; /* ゴールドを明るく */
}


/* --- 2. Index (素材・スキルから探す): 視認性向上 --- */
/* 見出し「ファイル形式から」「あなたのスキルから」 */
[data-theme="dark"] .reverse-column h3 {
    color: #fff;
    border-bottom-color: var(--color-main);
}
[data-theme="dark"] .heading-icon {
    stroke: #fff;
}

/* 各項目のタイトル (テキスト、画像、書くのが好き etc) */
[data-theme="dark"] .reverse-list strong {
    color: #fff; /* 完全な白にして視認性確保 */
}

/* アイコンの色 */
[data-theme="dark"] .inline-icon {
    stroke: var(--color-main); /* 紫色で統一 */
}

/* 説明文 */
[data-theme="dark"] .reverse-list p {
    color: #ccc;
}

/* 活用例 (下の小さい枠) */
[data-theme="dark"] .reverse-list small {
    background-color: #2a2a2a;
    color: #d1a3e2; /* 薄い紫 */
}


/* --- 3. 心理的安全性ガイド (FAQ): 背景色の差別化 --- */
/* FAQセクション全体の背景には色をつけず、カードを浮かせる */
[data-theme="dark"] .faq-section {
    background-color: transparent;
}

/* 個別のFAQカードの背景を少し明るくする */
[data-theme="dark"] .faq-item {
    background-color: #252525; /* ベース(#1e1e1e)より少し明るく */
    border-color: #444;
}

/* 質問文 (Q) */
[data-theme="dark"] .faq-item h3 {
    color: var(--color-accent); /* ミントグリーンで目立たせる */
}

/* 回答文 (A) */
[data-theme="dark"] .faq-item p {
    color: #e0e0e0;
}
/* ===============================================
   18. ダークモード修正 (使い方ガイド視認性向上)
   =============================================== */

/* --- 2つの遊び方 (Play Style) --- */
[data-theme="dark"] .play-style-card {
    background-color: #1e1e1e; /* カード背景を黒く */
    border-color: #333;
}
[data-theme="dark"] .style-title {
    color: #fff; /* タイトルを白く */
}
[data-theme="dark"] .style-desc {
    color: #ccc; /* 説明文を明るいグレーに */
}
/* ボタンの微調整 */
[data-theme="dark"] .btn-project {
    background-color: transparent;
    color: #e57373; /* プロジェクト色（赤）を少し明るく */
    border-color: #e57373;
}
[data-theme="dark"] .btn-project:hover {
    background-color: rgba(229, 115, 115, 0.1);
}

/* --- 創作の連鎖 (Visual Flow) --- */
/* 全体の枠 */
[data-theme="dark"] .visual-flow-section {
    background-color: #1e1e1e;
    border-color: #333;
}
/* アイコンが入っている四角い箱 */
[data-theme="dark"] .visual-canvas {
    background-color: #252525;
    border-color: #444;
    box-shadow: none;
}
/* 箱の下のラベル */
[data-theme="dark"] .visual-label {
    color: #e0e0e0;
}
/* アイコン自体の色 */
[data-theme="dark"] .visual-svg-icon {
    stroke: #aaa;
}
/* 完成した「種」の背景色調整 */
[data-theme="dark"] .visual-canvas[style*="background-color: #fffaf0"] {
    background-color: #2c2020 !important; /* 薄い黄色を暗い赤茶系に */
    border-color: var(--color-project);
}

/* --- ステップリスト (01, 02, 03) --- */
/* 本文テキスト */
[data-theme="dark"] .step-content h3 {
    color: #fff;
}
[data-theme="dark"] .step-content p {
    color: #ccc;
}
/* ステップ番号 (薄すぎる問題を修正) */
[data-theme="dark"] .step-number {
    opacity: 0.9; /* 透明度を上げてくっきりさせる (0.3 -> 0.9) */
    color: var(--color-accent); /* ミントグリーン */
    text-shadow: 0 0 15px rgba(102, 205, 170, 0.4); /* ほんのり光らせて視認性アップ */
}
/* Point! コラムの背景色 */
[data-theme="dark"] .step-note {
    background-color: #1b2e1b; /* 暗い緑背景 */
    color: #a5d6a7; /* 明るい緑文字 */
    border-left-color: #66bb6a;
}
/* ===============================================
   19. ダークモード修正 (Aboutページ & スマホレイアウト)
   =============================================== */

/* --- Aboutページ (about.html) --- */

/* 1. 白背景のままの部分を黒くする */
[data-theme="dark"] .operator-profile {
    background-color: #1e1e1e; /* ダークグレー */
    border-color: #333;
    color: #e0e0e0;
}

/* 2. 見出しと本文の文字色修正 */
[data-theme="dark"] .operator-name {
    color: #fff;
    border-bottom-color: #444;
}
[data-theme="dark"] .operator-bio,
[data-theme="dark"] .about-text {
    color: #ccc; /* 明るいグレーで見やすく */
}

/* 3. ボタン類の視認性向上 */
[data-theme="dark"] .btn-note {
    background-color: #333; /* より明るい黒に */
    border: 1px solid #555;
}
[data-theme="dark"] .btn-contact {
    background-color: transparent;
    color: #e0e0e0;
    border-color: #666;
}
[data-theme="dark"] .btn-contact:hover {
    background-color: #333;
    color: #fff;
    border-color: #888;
}
[data-theme="dark"] .btn-donation {
    background-color: transparent;
    color: var(--color-main);
    border-color: var(--color-main);
}
[data-theme="dark"] .btn-donation:hover {
    background-color: var(--color-main);
    color: #fff;
}

/* --- スマホレイアウト修正 (ボタン中央揃え) --- */
@media (max-width: 600px) {
    /* リンクボタンコンテナを縦並び・中央揃えに */
    .about-links {
        flex-direction: column;
        align-items: center; /* 中央揃えを強制 */
        gap: 1rem;
    }
    
    /* ボタン自体の幅調整（スマホで見やすく） */
    .btn-note, 
    .btn-contact, 
    .btn-donation {
        width: 100%;       /* 横幅いっぱいに広げる */
        max-width: 300px;  /* ただし広がりすぎないように制限 */
        justify-content: center; /* 文字を中央に */
        box-sizing: border-box; /* パディングを含めた幅計算 */
    }
}
/* ===============================================
   20. ダークモード修正 (検索ページ & フォーム詳細)
   =============================================== */

/* --- 検索・一覧ページ (projects.html) --- */

/* フィルターコントロールエリア */
[data-theme="dark"] .filter-controls {
    background-color: #1e1e1e;
    border-color: #333;
}

/* 検索ボックス (input) */
[data-theme="dark"] .search-group input,
[data-theme="dark"] #keyword-search-projects,
[data-theme="dark"] #keyword-search-works {
    background-color: #2c2c2c;
    border-color: #444;
    color: #e0e0e0;
}
[data-theme="dark"] .search-group input::placeholder {
    color: #888;
}
[data-theme="dark"] .search-group input:focus {
    border-color: var(--color-main);
}

/* 検索ボタン */
[data-theme="dark"] .search-group button {
    background-color: var(--color-accent); /* ミントグリーン維持 */
    color: #121212; /* 文字色は黒で見やすく */
    border-color: var(--color-accent);
}
[data-theme="dark"] .search-group button:hover {
    background-color: #4db690;
}

/* プルダウン (select) */
[data-theme="dark"] .control-group select {
    background-color: #2c2c2c;
    border-color: #444;
    color: #e0e0e0;
}
[data-theme="dark"] .control-group select:focus {
    border-color: var(--color-main);
}

/* ラベル文字色 */
[data-theme="dark"] .control-group label {
    color: #ccc;
}

/* リセットボタン (リンク) */
[data-theme="dark"] .reset-link {
    background-color: #333;
    border-color: #555;
    color: #aaa;
}
[data-theme="dark"] .reset-link:hover {
    background-color: #444;
    color: #fff;
    border-color: #666;
}

/* ページネーションボタン */
[data-theme="dark"] #pagination-controls button, 
[data-theme="dark"] .pagination-container button {
    color: #ccc;
    background-color: transparent;
}
[data-theme="dark"] #pagination-controls button:not(:disabled):hover, 
[data-theme="dark"] .pagination-container button:not(:disabled):hover {
    color: var(--color-accent);
}
[data-theme="dark"] #pagination-controls button.active, 
[data-theme="dark"] .pagination-container button.active {
    color: #fff;
    background-color: var(--color-main);
}
[data-theme="dark"] #pagination-controls button:disabled,
[data-theme="dark"] .pagination-container button:disabled {
    color: #555;
}
/* ===============================================
   21. ダークモード修正 (プロジェクト詳細)
   =============================================== */

/* --- 共有ボタン (Share) --- */
[data-theme="dark"] .share-button {
    background-color: #333;
    color: #ccc;
}
[data-theme="dark"] .share-button:hover {
    background-color: #444;
    color: #fff; /* ホバー時に白くして同化を防ぐ */
}
[data-theme="dark"] .share-button.copied {
    background-color: var(--color-accent); /* コピー完了時はミントグリーン */
    color: #121212; /* 黒文字で視認性確保 */
}

/* --- 創作の歴史 (Lineage) --- */
[data-theme="dark"] .lineage-section {
    background-color: #1e1e1e; /* 背景を黒く */
    border-color: #333;
}
[data-theme="dark"] .lineage-title {
    color: #e0e0e0;
    border-bottom-color: #444;
}
[data-theme="dark"] .lineage-box {
    color: #ccc; /* リンクの文字色 */
}
[data-theme="dark"] .lineage-box:hover {
    color: var(--color-main); /* ホバー時はメインカラー */
}
[data-theme="dark"] .lineage-box.current {
    color: #fff; /* 現在地は白く強調 */
}
[data-theme="dark"] .lineage-arrow {
    color: #555; /* 矢印の色 */
}
[data-theme="dark"] .lineage-icon {
    opacity: 0.9; /* アイコンを少し明るく */
}

/* --- その他詳細ページの調整 --- */
/* ファイル一覧のアイコン色 */
[data-theme="dark"] .supplemental-audio-card {
    background-color: #1e1e1e;
    border-color: #333;
}
[data-theme="dark"] .supplemental-audio-header {
    background-color: #2c2c2c;
    border-bottom-color: #333;
    color: #e0e0e0;
}
/* テキストファイルプレビュー */
[data-theme="dark"] .work-text-body {
    background-color: #1e1e1e;
    color: #ccc;
    border-color: #333;
}
[data-theme="dark"] .supplemental-card-link .text-preview {
    background-color: #252525;
    border-color: #444;
    color: #ccc;
}
/* 参加ステータス表示 */
[data-theme="dark"] #action-container p {
    color: #e0e0e0;
}
/* ダウンロードメニュー */
[data-theme="dark"] .download-menu {
    background-color: #2c2c2c;
    border-color: #444;
}
[data-theme="dark"] .download-menu a {
    color: #ccc;
}
[data-theme="dark"] .download-menu a:hover {
    background-color: #333;
    color: #fff;
}
/* ===============================================
   22. ダークモード修正 (モーダル & ポップアップ)
   =============================================== */

/* モーダルウィンドウの背景と文字色 */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .report-modal-content {
    background-color: #1e1e1e; /* ダークグレー */
    border-color: #444;
    color: #e0e0e0;
}

/* モーダル内の見出し */
[data-theme="dark"] .modal-content h3,
[data-theme="dark"] .report-modal-content h3 {
    color: #fff;
    border-bottom-color: #444;
}

/* モーダル内の本文 */
[data-theme="dark"] .modal-content p {
    color: #ccc;
}

/* キャンセルボタン */
[data-theme="dark"] .modal-button {
    background-color: transparent;
    border-color: #666;
    color: #ccc;
}
[data-theme="dark"] .modal-button:not(.primary):hover {
    background-color: #333;
    color: #fff;
    border-color: #888;
}

/* プライマリーボタン (参加する/送信する) */
[data-theme="dark"] .modal-button.primary {
    background-color: var(--color-accent);
    color: #121212;
    border-color: var(--color-accent);
}
[data-theme="dark"] .modal-button.primary:hover {
    background-color: #4db690;
    opacity: 1;
}
[data-theme="dark"] .modal-button.primary:disabled {
    background-color: #333;
    color: #666;
    border-color: #444;
}

/* チェックボックスラベル */
[data-theme="dark"] .checkbox-label {
    color: #e0e0e0;
}
/* ===============================================
   24. ダークモード修正 (プロジェクト編集: SNS設定など)
   =============================================== */

/* ラジオボタンの補足説明文 (SNS許可設定など) */
/* HTML側に直接 color:#666 が指定されている箇所を、ダークモード時に強制的に明るくする */
[data-theme="dark"] .radio-label span {
    color: #ccc !important;
}

/* ついでに、クレジット名入力欄のラベルも見やすく調整 */
[data-theme="dark"] #credit-name-container label {
    color: #e0e0e0;
}
/* ===============================================
   25. ダークモード修正 (作品詳細: リアクションボタン)
   =============================================== */

/* --- リアクションボタン基本 --- */
/* 通常時は背景を暗く、枠線を少し明るく */
[data-theme="dark"] .feedback-button {
    background-color: #252525;
    color: #ccc;
    border-color: #444;
    transition: all 0.2s ease;
}

/* --- 1. いいねボタン (Favorite) --- */
/* ホバー時 & アクティブ時: ピンク色に変化 */
[data-theme="dark"] #favorite-button:hover,
[data-theme="dark"] #favorite-button.active {
    background-color: rgba(233, 30, 99, 0.15); /* 透明度のあるピンク背景 */
    color: #ff80ab; /* 蛍光ピンクに近い明るい文字色 */
    border-color: #ff80ab;
}

/* --- 2. 感想タグボタン (Add Tag) --- */
/* ホバー時: テーマカラー(紫)に変化 */
[data-theme="dark"] #add-tag-button:hover {
    background-color: rgba(169, 90, 205, 0.15); /* 透明度のある紫背景 */
    color: #e1bee7; /* 明るい紫文字色 */
    border-color: #e1bee7;
}

/* カウント数の文字色調整 */
[data-theme="dark"] #favorite-count {
    color: #aaa !important;
}
/* ===============================================
   26. ダークモード修正 (規約・プライバシー・寄付ページ)
   =============================================== */

/* --- 共通: 文書ページのコンテナ --- */
/* terms-content, privacy-content, donation-section をまとめて黒くする */
[data-theme="dark"] .terms-content,
[data-theme="dark"] .privacy-content,
[data-theme="dark"] .donation-section {
    background-color: #1e1e1e; /* ダークグレー */
    border-color: #333;
    color: #e0e0e0;
}

/* --- 見出しと本文の色調整 --- */
[data-theme="dark"] .terms-content h2,
[data-theme="dark"] .privacy-content h2,
[data-theme="dark"] .donation-section h2 {
    color: #fff;
    border-bottom-color: #444;
}

[data-theme="dark"] .terms-content p,
[data-theme="dark"] .privacy-content p,
[data-theme="dark"] .donation-text {
    color: #ccc;
}

[data-theme="dark"] .donation-lead {
    color: #e0e0e0;
}

/* --- 寄付ページ (donation.html) の特別対応 --- */
/* OFUSEエリアの背景と枠線 */
[data-theme="dark"] .ofuse-area {
    background-color: #1e1e1e;
    border-color: var(--color-main);
}

/* 「外部サイトOFUSEにて...」のテキスト (同化問題の解決) */
[data-theme="dark"] .ofuse-area p {
    color: #fff !important; /* 強制的に白く */
}

/* 注意書きリストの背景 */
[data-theme="dark"] .attention-list {
    background-color: #252525;
    color: #ccc;
}

/* 寄付ボタン (OFUSE) */
[data-theme="dark"] .ofuse-btn {
    background-color: #eee; /* 黒背景なのでボタンは白く反転して目立たせる */
    color: #333;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .ofuse-btn:hover {
    background-color: #fff;
    opacity: 1;
}
/* ===============================================
   27. ダークモード修正 (サイドバー視認性向上)
   =============================================== */

/* --- 新着プロジェクト: 期間フィルタボタン --- */
[data-theme="dark"] .sidebar-date-filters a {
    background-color: #333; /* 背景をダークグレーに */
    color: #e0e0e0;         /* 文字を白っぽく */
    border-color: #444;     /* 枠線を追加して立体感を */
}
[data-theme="dark"] .sidebar-date-filters a:hover {
    background-color: #444; /* ホバー時は少し明るく */
    color: var(--color-main); /* アクセントカラーに */
    border-color: var(--color-main);
}

/* --- 「もっと見る...」リンク --- */
[data-theme="dark"] .sidebar-more-link {
    color: #b388ff; /* 明るめの紫にして視認性アップ */
}
[data-theme="dark"] .sidebar-more-link:hover {
    color: #d1c4e9; /* ホバー時はさらに白っぽく */
}

/* --- サイドバーフッター (ガイド・規約・ログアウト等) --- */
[data-theme="dark"] .sidebar-footer-links a,
[data-theme="dark"] .sidebar-logout a {
    color: #b0b0b0; /* #888から明るいグレーに変更 */
}
[data-theme="dark"] .sidebar-footer-links a:hover {
    color: #fff; /* ホバー時は白く */
}
/* ログアウトボタンはホバー時に赤く */
[data-theme="dark"] .sidebar-logout a:hover {
    color: #ff8a80; 
}
/* ===============================================
   28. ダークモード修正 (TOPページ背景の微調整)
   =============================================== */

/* TOPページのメインコンテンツ背景をより暗くする */
[data-theme="dark"] .hero-container,
[data-theme="dark"] .hero-news {
    background-color: #181818; /* #1e1e1e より一段階暗く */
    border-color: #2a2a2a; /* 枠線も少し暗く */
}

/* ニュース項目のホバー色調整 */
[data-theme="dark"] .news-list-item:hover {
    background-color: #333;
}

/* ヒーローカルーセル（スライダー）の背景 */
[data-theme="dark"] .hero-carousel {
    background-color: #1a1a1a;
}
/* ===============================================
   29. ダークモード修正 (サイト外枠とヘッダー)
   =============================================== */

/* サイト全体を囲う枠線（PC表示時） */
[data-theme="dark"] #page-wrapper::before {
    /* 枠線の色を背景より少し明るいダークグレーに */
    border-color: #333;
    /* 外側の太いフレーム（box-shadow）も同様に暗く */
    box-shadow: 0 0 0 10px #181818; /* TOPページの背景色に合わせる */
}

/* ヘッダーの背景色と境界線 */
[data-theme="dark"] .site-header {
    background-color: #1e1e1e; /* コンテンツ背景と同じダークグレー */
    border-bottom-color: #333; /* 枠線と同じ色 */
}

/* サイトロゴの色 (紫を維持しつつ少し明るく) */
[data-theme="dark"] .site-logo {
    color: #c48bdf; /* 視認性の良い明るい紫 */
}
/* ===============================================
   30. ヘッダーアイコン間隔の調整 (修正版)
   =============================================== */

/* 通知アイコンの右側の余白を完全に削除 */
#notification-icon-wrapper {
    margin-right: 0;
}

/* テーマ切り替えボタンの左側の余白を完全に削除 */
.theme-toggle-button {
    margin-left: 0; /* 0.2rem -> 0 に変更 */
}
/* --- 公式アカウントバッジ --- */
.official-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    color: #a95acd; /* メインカラー（紫） */
    vertical-align: middle;
}

.official-badge svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* ツールチップ（ホバー時に「公式アカウント」と表示） */
.official-badge[title] {
    cursor: help;
}

/* スマホ表示時の調整 */
@media (max-width: 768px) {
    .official-badge svg {
        width: 20px;
        height: 20px;
    }
}
/* --- 公式コンテンツ用バッジ（カード左上） --- */
.card-type-label.official {
    background-color: #66CDAA; /* アクセントカラー（ミントグリーン） */
    color: #fff;
}
/* ===============================================
   31. 公式アカウントバッジ (追加)
   =============================================== */
.official-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.3em;
    color: #a95acd; /* メインカラー（紫） */
    vertical-align: middle;
}

.official-badge svg {
    width: 1.1em;
    height: 1.1em;
    fill: currentColor;
}

/* ツールチップ（ホバー時に「公式アカウント」と表示） */
.official-badge[title] {
    cursor: help;
}

/* スマホ表示時の調整 */
@media (max-width: 768px) {
    .official-badge svg {
        width: 1em;
        height: 1em;
    }
}
/* ===============================================
   32. ストレージバーの視認性向上 (追加修正)
   =============================================== */

/* バーの背景（トラック）を明確なグレーに変更（影なし） */
.storage-progress-track {
    background-color: #e0e0e0 !important; 
    box-shadow: none !important;
    border: 1px solid #d0d0d0; /* 境界線のみ残して視認性確保 */
}

/* ダークモード時の対応 */
[data-theme="dark"] .storage-progress-track {
    background-color: #333 !important;
    border-color: #444;
    box-shadow: none !important;
}
/* --- Admin Tabs Styles (Added for restoration) --- */
.admin-tabs {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 2rem;
}

.admin-tab {
    padding: 1rem 2rem;
    cursor: pointer;
    font-weight: bold;
    color: #666;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s;
}

.admin-tab:hover {
    color: var(--color-main);
    background-color: rgba(0, 0, 0, 0.02);
}

.admin-tab.active {
    color: var(--color-main);
    border-bottom: 2px solid var(--color-main);
}

.admin-section {
    display: none; /* デフォルト非表示 */
    animation: fadeIn 0.4s ease;
}

.admin-section.active {
    display: block; /* アクティブ時表示 */
}
/* --- Modal Styles (共通) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content, .report-modal-content {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    animation: fadeIn 0.2s ease-out;
}

/* 報告モーダル固有の調整 */
.report-modal-content h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--color-text-main);
}

.report-modal-content .radio-group {
    margin-bottom: 1.5rem;
}

.report-modal-content .radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.25rem 0;
}

.report-modal-content textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* --- アカウント凍結警告バナー --- */
.suspended-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #f3f4f6;
    color: #4b5563;
    padding: 1rem 1.5rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.suspended-banner svg {
    flex-shrink: 0;
    color: #9ca3af;
    width: 24px;
    height: 24px;
}

.suspended-banner strong {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.1em;
    display: block;
}

.suspended-banner p {
    margin: 0.25rem 0 0;
    font-size: 0.9em;
    color: #6b7280;
}
/* --- アクションボタン共通スタイル（共有・編集・削除） --- */
/* タグが a でも button でも同じ見た目とサイズになるように統一 */
.action-button,
.project-edit-button,
.share-button {
    display: inline-flex;       /* フレックスボックスで内部を中央揃え */
    align-items: center;        /* 垂直中央 */
    justify-content: center;    /* 水平中央 */
    height: 36px;              /* 高さを固定して揃える */
    padding: 0 16px;           /* 横の余白 */
    border-radius: 18px;       /* 角丸 (高さの半分) */
    font-family: inherit;      /* フォントを統一 */
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border: none;              /* buttonタグの枠線を消す */
    cursor: pointer;
    box-sizing: border-box;    /* パディングを含めたサイズ計算 */
    line-height: 1;            /* 行間によるズレを防止 */
    vertical-align: middle;    /* 周囲の要素との位置合わせ */
    transition: background-color 0.2s, transform 0.1s;
    margin: 0;                 /* buttonタグのデフォルトマージンを消す */
    white-space: nowrap; /* テキストの折り返しを禁止（縦書き防止） */
    flex-shrink: 0;      /* 親要素が狭くなってもボタンのサイズを縮めない */
}

/* 共有ボタン・編集ボタン（グレー系） */
.share-button,
.project-edit-button {
    background-color: #f0f0f0;
    color: #555;
}

.share-button:hover,
.project-edit-button:hover {
    background-color: #e0e0e0;
}

.share-button svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    stroke-width: 2;
}

/* 削除ボタン（ピンク系） - 統一デザイン */
.action-button.delete-type {
    background-color: #ffebee; /* 薄いピンク */
    color: #d32f2f;           /* 赤文字 */
}

.action-button.delete-type:hover {
    background-color: #ffcdd2;
}

/* 既存の .delete-button クラスがある場合は、念のため互換性を保つか削除してください */

/* --- 削除済みプロジェクトの表示スタイル --- */
.project-status-badge.status-deleted {
    background-color: #9e9e9e; /* グレー */
    color: white;
}

.deleted-header h1 {
    color: #777;
    text-decoration: line-through;
}

.deleted-content-placeholder {
    padding: 4rem 2rem;
    text-align: center;
    background-color: #f5f5f5;
    border: 2px dashed #ccc;
    border-radius: 8px;
    color: #888;
}

.deleted-content-placeholder svg {
    margin-bottom: 1rem;
}

.deleted-info-notice {
    padding: 1rem;
    background-color: #eee;
    border-radius: 6px;
    color: #666;
    text-align: center;
    font-weight: bold;
}

/* --- 創作の歴史：削除済みアイテム --- */
.lineage-box.deleted {
    background-color: #f0f0f0;
    border-color: #ccc;
    color: #999;
    opacity: 0.8;
}

.lineage-box.deleted:hover {
    transform: none;
    box-shadow: none;
    cursor: default;
}
/* --- 創作の歴史：削除済みアイテムのリンク見え防止 --- */
.lineage-box.deleted,
.lineage-box.deleted:hover,
.lineage-box.deleted:hover .lineage-text {
    text-decoration: none !important; /* 下線を強制的に消す */
    cursor: default;                  /* カーソルを指マークにしない */
    pointer-events: none;             /* クリック等の反応自体を無効化 */
}
/* ===============================================
   Phase 2: ファイルアップロード & 補足ファイル表示修正
   =============================================== */

/* ファイル入力ラッパー */
.file-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.file-input-wrapper .form-input {
    flex-grow: 1;
}

/* リセットボタン */
.file-reset-button {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #555;
    padding: 10px 16px; /* inputの高さに合わせる */
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background-color 0.2s;
    height: 45px; /* form-inputと高さを揃える */
}

.file-reset-button:hover {
    background-color: #e0e0e0;
    color: #333;
}

/* 編集画面: 現在のファイル表示 */
.current-file-display {
    margin-bottom: 0.5rem;
    padding: 0.5rem 0;
}

.current-file-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-main);
    text-decoration: none;
    font-weight: 600;
    padding: 6px 12px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.current-file-link:hover {
    background-color: #f0f0f0;
    text-decoration: underline;
}

/* 詳細画面: 補足ファイルリスト (Grid廃止 -> リスト表示) */
.supplemental-files-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.supplemental-file-link {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    border: 1px solid var(--color-border);
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.2s ease;
}

.supplemental-file-link:hover {
    border-color: var(--color-main);
    color: var(--color-main);
    background-color: #fcfcfc;
    transform: translateX(4px);
}

/* ダークモード対応 */
[data-theme="dark"] .file-reset-button {
    background-color: #333;
    border-color: #555;
    color: #ccc;
}
[data-theme="dark"] .file-reset-button:hover {
    background-color: #444;
    color: #fff;
}
[data-theme="dark"] .current-file-link {
    background-color: #2c2c2c;
    border-color: #444;
}
[data-theme="dark"] .supplemental-file-link {
    background-color: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
}
[data-theme="dark"] .supplemental-file-link:hover {
    background-color: #252525;
    color: var(--color-main);
}
/* ===============================================
   修正分: 補足ファイルリスト表示 & ダウンロードメニュー
   =============================================== */

/* 補足ファイルリストコンテナ */
.file-list-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* 個別のファイルアイテム（行） */
.file-list-item {
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 10px 15px;
    transition: background-color 0.2s;
}
.file-list-item:hover {
    background-color: #f9f9f9;
}

/* リンクスタイル */
.file-list-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.95rem;
}
.file-list-link:hover {
    color: var(--color-main);
}
.file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0.5rem;
}

/* ダウンロードドロップダウン修正 */
.download-dropdown {
    position: relative;
    width: 100%;
}

.download-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    margin-top: 5px;
    padding: 5px 0;
    display: none; /* JSで制御 */
}

.download-menu a {
    display: block;
    padding: 10px 15px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9em;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}
.download-menu a:last-child {
    border-bottom: none;
}
.download-menu a:hover {
    background-color: #f5f5f5;
    color: var(--color-main);
}
/* =========================================
   プロジェクト・作品詳細画面: 補足ファイルリスト
   ========================================= */
.supplemental-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 2rem;
}

.supplemental-file-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.supplemental-file-link:hover {
    background-color: #f8f9fa;
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.supplemental-file-link svg {
    margin-right: 8px;
    color: #777;
    transition: color 0.2s;
}

.supplemental-file-link:hover svg {
    color: var(--color-accent);
}

/* =========================================
   プロジェクト・作品詳細画面: 補足ファイルリスト
   ========================================= */
.supplemental-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 2rem;
}

.supplemental-file-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    /* ドロップシャドウ削除 */
    box-shadow: none;
}

.supplemental-file-link:hover {
    /* 背景色はほんの少しだけ明るく、またはそのまま */
    background-color: #fff; 
    /* 枠線と文字色をメインカラー（紫）に変更 */
    border-color: var(--color-main);
    color: var(--color-main);
    /* 浮かび上がる動き（transform）と影（box-shadow）を削除 */
    transform: none;
    box-shadow: none;
}

.supplemental-file-link svg {
    margin-right: 8px;
    color: #777;
    transition: color 0.2s;
}

.supplemental-file-link:hover svg {
    /* アイコンもメインカラー（紫）に */
    color: var(--color-main);
}
/* =========================================
   詳細画面（Detail）: アクションボタンのサイズ調整
   ========================================= */

/* プロジェクト詳細: サイドバー内の主要ボタン（参加、作品を作る、素材DLなど） */
#action-container .action-button,
#action-container .modal-button,
#action-container .download-toggle-btn {
    width: 100%;           /* 横幅いっぱいに */
    padding: 12px 0;       /* 高さを少し抑える */
    font-size: 0.9rem;     /* 文字サイズを小さく (0.95rem -> 0.9rem) */
    font-weight: bold;
    
    /* 上下左右中央配置 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    box-sizing: border-box;
    margin-top: 10px;
    line-height: 1.2;
}

/* 作品詳細: 派生プロジェクトへのリンクボタン */
.derived-project-link-button {
    width: 100% !important; 
    padding: 16px 0;        /* 存在感は残す */
    font-size: 0.95rem;     /* 文字サイズを小さく (1.0rem -> 0.95rem) */
    font-weight: bold;
    
    /* 上下左右中央配置 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    box-sizing: border-box;
    text-decoration: none;
}
/* =========================================
   ヘッダー: 通知バッジ（ドット表示）修正
   ========================================= */
.notification-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 10px;
    height: 10px;
    background-color: var(--color-accent); /* 緑色 */
    border-radius: 50%; /* 完全な丸 */
    
    /* テキスト関連のリセット */
    padding: 0;
    font-size: 0;
    line-height: 0;
    min-width: auto;
    
    /* ▼▼▼ 修正: 白フチ（border）を削除 ▼▼▼ */
    border: none;
    /* ▲▲▲ 修正ここまで ▲▲▲ */

    box-shadow: none;
    transform: none;
    display: inline-block;
    pointer-events: none;
}
/* --- ファイル操作ボタン（リセット・削除・元に戻す）の統一設定 --- */
.file-reset-button {
    width: 80px !important;      /* 幅を80pxに強制固定 */
    min-width: 80px !important;
    max-width: 80px !important;
    height: 38px;                /* 入力欄の高さに合わせる */
    padding: 0 !important;       /* パディングによるズレを防止 */
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
    
    /* 基本デザイン（リセットボタン用） */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
    transition: background-color 0.2s; /* 色の変化のみアニメーション */
    box-shadow: none !important;
    transform: none !important;
}

.file-reset-button:hover {
    background-color: #e0e0e0;
}

/* 削除ボタン（赤系） */
.file-delete-btn {
    background-color: #fff0f0 !important;
    color: #d32f2f !important;
    border: 1px solid #ffcdd2 !important;
}

/* 削除ボタンホバー時：文字色は変えず、背景を濃くする */
.file-delete-btn:hover {
    background-color: #ffcdd2 !important; /* 背景を濃いピンクへ */
    color: #d32f2f !important;            /* 文字色は赤のまま維持 */
    border-color: #e57373 !important;
}

/* 元に戻すボタン（緑系） */
.file-restore-btn {
    background-color: #f0fff4 !important;
    color: #28a745 !important;
    border: 1px solid #c3e6cb !important;
}

.file-restore-btn:hover {
    background-color: #d4edda !important;
}
/* ===============================================
   ★ Phase 1: レスポンシブレイアウト修正 (New)
   =============================================== */

/* 1. レイアウトコンテナ (Grid導入) */
.project-layout {
    display: grid;
    gap: 2rem;
    align-items: start;
    
    /* モバイル・タブレット縦向き (デフォルト) */
    /* 1列で、HTMLの記述順 (コンテンツA → サイドB → ボトムC) に表示 */
    grid-template-columns: 1fr;
    grid-template-areas:
        "content"
        "side"
        "bottom";
}

/* 2. 各エリアの割り当て */
.project-content-area {
    grid-area: content;
    min-width: 0; /* Grid内でのコンテンツはみ出し防止 */
}

.project-side-column {
    grid-area: side;
    width: 100%; /* モバイルでは横幅いっぱい */
}

.project-bottom-area {
    grid-area: bottom;
    min-width: 0;
}

/* 3. PC・タブレット横向き (901px以上) の設定 */
/* サイドバーのブレークポイント(1024px)や、一般的なタブレットサイズを考慮 */
@media (min-width: 901px) {
    .project-layout {
        /* 左: 可変幅, 右: 300px固定 */
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-rows: auto auto; /* 行の高さは中身なり */
        
        /* エリア配置: 右側(side)を縦にぶち抜き */
        grid-template-areas:
            "content side"
            "bottom side";
    }

    .project-side-column {
        width: 300px; /* PCでは固定幅 */
    }

    /* PC表示時のみ、情報カードをスクロール追従させる */
    .info-card {
        position: sticky;
        /* ヘッダーの高さ(約60px) + 余白分を確保して固定 */
        top: calc(var(--header-height) + 2rem);
    }
}

/* 4. 微調整: 既存スタイルの打ち消しが必要な場合 */
/* 以前の .project-main-column が残っている場合の安全策 (今回はHTML側で削除済みのため不要ですが念のため) */
.project-main-column {
    display: contents; /* Grid直下の子要素として振る舞わせる */
}
/* ===============================================
   ★ Phase 1.5: 詳細ページヘッダー修正 (タイトル・ボタン縦並び)
   =============================================== */

/* 横並び(row)を縦並び(column)で上書き */
.detail-header-layout {
    flex-direction: column !important; /* 強制的に縦並び */
    align-items: flex-start !important; /* 左寄せ */
    gap: 0.5rem !important;
}

/* タイトル周りの調整 */
.detail-header-layout h1 {
    width: 100%;
    margin: 0.2rem 0 0.5rem 0; /* 上下の余白を微調整 */
    line-height: 1.4;
    word-break: break-all; /* 長い英数字タイトルの折り返し */
}

/* バッジエリア (プロジェクト詳細用) */
.detail-header-meta {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

/* ボタンエリア (タイトルの下に配置) */
.detail-header-actions {
    display: flex;
    flex-wrap: wrap; /* ボタンが多くなったら折り返し */
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.5rem;
    width: 100%;
}

/* ボタンの左マージンリセット (以前の style="margin-left: auto" の影響を消す念の為の指定) */
.detail-header-actions > * {
    margin-left: 0 !important;
}
/* 詳細ヘッダー内のボタン（共有・編集・削除）をコンパクトにする */
.detail-header-actions .share-button,
.detail-header-actions .project-edit-button,
.detail-header-actions .action-button {
    height: 28px;           /* 高さを 36px -> 28px に縮小 */
    padding: 0 12px;        /* 余白を調整 */
    font-size: 0.75rem;     /* 文字サイズを 0.9rem -> 0.75rem に */
    border-radius: 14px;    /* 角丸の半径を高さの半分に */
}

/* ボタン内のアイコンサイズ調整 */
.detail-header-actions .share-button svg,
.detail-header-actions .project-edit-button svg,
.detail-header-actions .action-button svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;      /* アイコンと文字の間隔を微調整 */
}
/* ===============================================
   ★ 修正: タイムラインのモバイル表示をPCと統一 (横並び・コンパクト化)
   =============================================== */

/* --- スマホ・タブレット (767px以下) --- */
@media (max-width: 767px) {
    /* 縦並び (column) を廃止し、横並び (row) に変更 */
    .timeline-content .project-card {
        flex-direction: row;    /* 横並びにする */
        align-items: center;    /* 上下中央揃え */
        height: 84px;           /* 高さをコンパクトに固定 */
        min-height: 84px;
    }

    /* サムネイルを左側に固定 */
    .timeline-content .card-thumbnail-wrapper {
        width: 110px;           /* 幅を固定 (視認性を保てる最小限) */
        height: 100%;           /* 親の高さに合わせる */
        aspect-ratio: auto;     /* 比率指定を解除 */
        border-right: 1px solid var(--color-border);
        border-bottom: none;    /* 下線は削除 */
        flex-shrink: 0;         /* 縮小されないようにする */
    }
    
    /* 画像のフィット設定 */
    .timeline-content .card-thumbnail {
        height: 100%;
        width: 100%;
        object-fit: cover;      /* 枠に合わせてトリミング */
    }

    /* 右側の情報エリア */
    .timeline-content .card-content {
        padding: 0 12px;        /* 余白を調整 */
        flex-grow: 1;           /* 残りの幅を埋める */
        width: calc(100% - 110px); /* 幅計算 */
        display: flex;
        flex-direction: column;
        justify-content: center; /* 上下中央 */
        align-items: flex-start; /* 左寄せ */
    }

    /* スマホ用に文字サイズを微調整 */
    .timeline-content .card-title {
        font-size: 0.9rem;      /* タイトルを少し小さく */
        margin: 0 0 0.2rem 0;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;  /* 最大2行まで */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .timeline-content .project-card-author {
        font-size: 0.75rem;     /* 作者名を小さく */
        margin-bottom: 0;
    }
    
    /* プレースホルダー(?マーク)のサイズ調整 */
    .timeline-content .placeholder-text { 
        font-size: 1.5rem; 
    }
}
/* ==========================================================================
   レスポンシブ・タイポグラフィ設定 (末尾に追加)
   ========================================================================== */

/* --- タブレット端末向け (画面幅 1024px 以下) --- */
@media screen and (max-width: 1024px) {
  
  /* ベースフォントサイズをわずかに調整 */
  html {
    font-size: 95%; 
  }

  /* ページタイトル (H1) - 1段階縮小 */
  h1 {
    font-size: 28px !important; /* 既存指定より優先 */
    line-height: 1.4;
  }

  /* セクション見出し (H2) */
  h2 {
    font-size: 22px !important;
  }
}

/* --- スマートフォン端末向け (画面幅 768px 以下) --- */
@media screen and (max-width: 768px) {

  /* ページタイトル (H1) - 2段階縮小 (PC比で大幅減) */
  h1 {
    font-size: 24px !important; /* 30px台後半から24pxへ */
    margin-bottom: 15px;       /* 下の余白も少し詰める */
    line-height: 1.3;          /* 折り返し時の行間を適正化 */
  }

  /* セクション見出し (H2) */
  h2 {
    font-size: 18px !important; /* 24px前後から18pxへ */
    margin-top: 30px;          /* 上の余白調整 */
    margin-bottom: 15px;
  }

  /* 本文テキスト */
  /* 小さくしすぎず、読みやすさを維持するサイズに固定 */
  p, li, .body-text {
    font-size: 15px !important;
    line-height: 1.6;
  }

  /* パンくずリスト、メタ情報、作者名など */
  /* 補助情報は小さくしてメインコンテンツを邪魔しないようにする */
  .breadcrumb, 
  .meta-info, 
  .author-name, 
  .date,
  small {
    font-size: 12px !important;
    line-height: 1.4;
  }
}
/* ==========================================================================
   【修正版】緊急バグ修正：クリック不具合の解消
   ========================================================================== */

/* 1. ハンバーガーメニュー (クラス名: .hamburger-button) */
.hamburger-button {
    position: relative; 
    z-index: 9999 !important; /* 最前面に固定 */
    cursor: pointer;
    pointer-events: auto !important; /* クリックを強制的に有効化 */
}

/* 2. スライドショーの操作ボタン (クラス名: .carousel-indicator, .carousel-button) */
/* インジケーター（下の丸いボタン） */
.carousel-nav,
.carousel-indicator {
    z-index: 101 !important; /* コンテンツより手前に */
    position: relative;      /* z-indexを効かせるため */
    pointer-events: auto !important;
}

/* 左右の矢印ボタン */
.carousel-button {
    z-index: 101 !important;
    cursor: pointer;
    pointer-events: auto !important;
}

/* 3. コンテンツの干渉回避 */
/* スライド内のテキストエリアがボタンの上に被さるのを防ぐ */
.slide-content {
    pointer-events: none; /* テキストエリア自体のクリック判定を消す */
    z-index: 50; /* ボタンより奥に */
}

/* ただし、スライド内のリンクやボタンは押せるように戻す */
.slide-content a,
.slide-content button,
.slide-button {
    pointer-events: auto !important;
    position: relative;
    z-index: 102; /* 必要ならさらに手前に */
}
/* ==========================================================================
   【修正版 v2】スマホ表示時のカードデザイン (テキスト切れ対応)
   ========================================================================== */

@media screen and (max-width: 768px) {
  
  /* 1. グリッドレイアウトを1列にする */
  .works-grid,
  #work-container .works-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* 2. カード本体を「横並び」に変更 */
  /* 高さを固定せず、中身に合わせて伸びるように修正 */
  .project-card {
    flex-direction: row !important;
    height: auto !important;      /* ★修正: 自動調整 */
    min-height: 110px !important; /* ★修正: 最低高さを確保 */
    align-items: stretch !important;
  }

  /* 3. サムネイルエリア (左側) */
  .project-card .card-thumbnail-wrapper {
    width: 130px !important;      /* ★修正: 少し幅を広げる */
    height: auto !important;      /* ★修正: 親の高さに追従 */
    align-self: stretch !important;
    aspect-ratio: auto !important;
    border-bottom: none !important;
    border-right: 1px solid var(--color-border) !important;
    flex-shrink: 0;
  }

  /* サムネイル画像・中身の調整 */
  .project-card .card-thumbnail,
  .project-card .card-thumbnail-small,
  .project-card .card-thumbnail-novel,
  .project-card .card-thumbnail-music,
  .project-card .card-thumbnail-video,
  .project-card .card-thumbnail-placeholder {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important; /* ★修正: 高さいっぱいにする */
    border-bottom: none !important;
    border-radius: 8px 0 0 8px;
    object-fit: cover;
  }
  
  .placeholder-text { font-size: 1.5rem !important; }

  /* 4. 情報エリア (右側) */
  .project-card .card-content {
    padding: 0.8rem 1rem !important;
    width: auto !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  /* タイトル */
  .project-card .card-title {
    font-size: 1rem !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2行まで表示 */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* メタ情報 (閲覧数・いいね数) */
  /* 見切れないように下部に配置し、マージンを確保 */
  .project-card .card-meta {
    font-size: 0.85rem !important;
    margin-top: auto !important; 
    padding-top: 0.5rem !important;
  }

  /* ラベルの位置調整 */
  .card-type-label {
    top: 6px !important;
    left: 6px !important;
    font-size: 0.65rem !important;
  }
}

  /* --- 特殊なカード内要素のサイズ微調整 --- */
  
  /* 小説: 文字サイズを小さく */
  .card-thumbnail-novel .novel-text {
    font-size: 0.6rem !important;
    line-height: 1.4 !important;
  }
  
  /* 音楽: ビジュアライザーの高さを抑える */
  .music-visualizer {
    height: 24px !important;
    gap: 3px !important;
  }
  .music-bar { width: 4px !important; }

  /* 動画: アイコンサイズ調整 */
  .card-thumbnail-video {
    background-size: 32px !important; /* 再生アイコンを小さく */
  }
 /* ==========================================================================
   【修正 Plan B - 最終版】スマホ・タブレット表示 (マイページボタン極小化)
   ========================================================================== */

/* --- 1. 文字（NOVEL）作品の表示崩れ防止 (変更なし) --- */
@media screen and (max-width: 768px) {
  .project-card .card-thumbnail-wrapper {
    height: 120px !important;
    align-self: flex-start !important;
    overflow: hidden !important;
  }

  .card-thumbnail-novel .novel-text {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
  }

  .project-card {
    min-height: 122px !important;
  }
}

/* --- 2. マイページ・プロフィールのスマホ最適化 (★ここを微調整) --- */
@media screen and (max-width: 768px) {
  
  /* 全体の余白 */
  .main-content {
    padding: 1rem !important;
  }

  /* プロフィール情報カード：左寄せ */
  .profile-info {
    padding: 1rem !important;
    text-align: left !important;
  }

  /* 上部レイアウト：アイコンと名前を横並び */
  .profile-main {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
  }

  /* アイコンサイズ */
  .profile-icon {
    width: 60px !important;
    height: 60px !important;
    margin: 0 !important;
  }

  /* 名前 */
  .profile-main h1 {
    font-size: 1.2rem !important; /* 名前も少し控えめに */
    width: auto !important;
    text-align: left !important;
    margin: 0 !important;
    flex: 1;
    min-width: 150px; /* 名前が極端に狭くならないように */
  }

  /* ボタンエリア */
  .profile-actions-container {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important; /* ボタン間の隙間を狭く */
    margin-top: 0.5rem !important;
    flex-wrap: wrap; 
  }

  /* ★修正: ボタンを「極小」サイズにする */
  /* 対象: マイページの編集・設定・共有ボタン、他人のフォローボタン等すべて */
  .profile-actions-container a,
  .profile-actions-container button,
  .profile-edit-btn, 
  .settings-button, 
  .share-button,
  .btn-secondary,
  .btn-primary {
    width: auto !important;
    padding: 6px 10px !important;   /* ★余白をかなり削りました */
    font-size: 0.75rem !important;  /* ★文字を小さく (12px相当) */
    height: auto !important;        /* 高さをなりゆきに */
    line-height: 1.2 !important;
    border-radius: 4px !important;  /* 角丸も少し控えめに */
    flex: none !important;
  }
  
  /* タブメニュー（作品・プロジェクト切り替え） */
  .tab-nav {
    justify-content: flex-start !important;
    gap: 1rem !important;
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
    margin-top: 1rem !important; /* プロフィール情報との距離を少し空ける */
  }
  
  .tab-button {
    flex: none !important;
    width: auto !important;
    padding: 0.6rem 0.2rem !important; /* タブの余白も少し調整 */
    font-size: 0.85rem !important;
  }
  
  /* 外部リンクリスト */
  .external-links-container {
      justify-content: flex-start !important;
  }
}

/* --- 3. お気に入りページ等のグリッド調整 (変更なし) --- */
@media screen and (max-width: 768px) {
  .works-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}
/* ==========================================================================
   【修正】クリエイタータグのホバー効果 & スマホ表示の余白調整
   ========================================================================== */

/* --- 1. タグのホバーアクション (PC・スマホ共通) --- */
.creator-tags a,
.profile-tags a,
.tag-link {
    text-decoration: none !important;
    transition: opacity 0.2s ease; /* 0.2秒かけてふわっと変化 */
    display: inline-block;
}

.creator-tags a:hover,
.profile-tags a:hover,
.tag-link:hover {
    opacity: 0.6 !important; /* 透明度を下げて「色が薄くなった」ように見せる */
    text-decoration: none !important;
    cursor: pointer;
}

/* --- 2. プロフィールページの隙間調整 (スマホのみ) --- */
@media screen and (max-width: 768px) {
  
  /* タグエリアの上下に余白を入れる */
  .creator-tags,
  .profile-tags {
    margin-top: 1rem !important;    /* 上のボタンや名前との隙間 */
    margin-bottom: 1rem !important; /* 下のリンクとの隙間 */
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* タグ同士の隙間 */
  }

  /* 外部リンクエリアの調整 */
  .external-links-container {
    margin-top: 0.5rem !important;
    padding-bottom: 1rem !important; /* 下端に少し余裕を持たせる */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  /* リンク同士がくっつかないように */
  .external-link-item {
      margin-bottom: 0.5rem !important;
  }
}
/* ==========================================================================
   ★ My Page & Profile Responsive Improvements (今回追加分)
   ========================================================================== */

/* --- 1. PC/タブレット共通: 基本レイアウト (JSで付与したクラスへのスタイル) --- */

/* ヘッダー上部 (ユーザー名 + バッジ類) */
.profile-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap; /* 長い名前対策 */
}

/* ユーザー名 (PCデフォルト) */
.profile-username {
    margin: 0;
    line-height: 1.3;
    font-size: 1.8rem; /* 少し大きく */
}

/* バッジと共有ボタンのラッパー */
.profile-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 共有ボタン (ヘッダー内) */
.header-share-btn {
    margin-left: 0;
    font-size: 0.8rem;
    padding: 4px 10px;
    height: 32px;
}

/* 各セクションの余白調整 */
.profile-links-row,
.profile-actions-row,
.profile-tags-row {
    margin-bottom: 1rem;
}

/* プロフィール編集・設定ボタンのコンテナ (PC) */
.profile-actions-row {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

/* --- 2. スマホ・モバイル表示 (max-width: 768px) 最適化 --- */
@media screen and (max-width: 768px) {

    /* コンテナ全体の余白を少し詰める */
    .profile-info {
        padding: 1.5rem 1.2rem !important; /* 横の余白を確保しつつ調整 */
    }

    /* 1. ユーザー名周り */
    .profile-header-row {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start; /* 左寄せ */
        gap: 0.5rem;
        margin-bottom: 1.2rem;
    }

    .profile-username {
        font-size: 1.6rem !important; /* スマホでも大きく表示 */
        word-break: break-all; /* 長い名前の折り返し */
    }

    .profile-badges {
       margin-top: 0.2rem;
    /* 自身の配置を右端（クロス軸の終端）にする */
    align-self: flex-end;
    }

    /* 2. 外部リンク (Linkボタン) */
    .profile-links-row {
        margin-bottom: 1.2rem;
    }

    .external-links-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
    }
    
    .external-link-button {
        font-size: 0.85rem !important;
        padding: 6px 14px !important;
        border-radius: 6px !important; /* 丸みを少し減らしてキリッとさせる */
    }

    /* 3. アクションボタン (編集・設定) */
    .profile-actions-row {
        display: grid !important; /* グリッドレイアウトに変更 */
        grid-template-columns: 1fr 1fr; /* 横並び2列 */
        gap: 0.8rem;
        margin-bottom: 1.5rem;
    }

    .profile-edit-button,
    .profile-settings-button {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 10px 0 !important; /* 高さを確保 */
        font-size: 0.9rem !important;
        box-sizing: border-box;
    }

    /* 4. タグエリア */
    .profile-tags-row {
        margin-bottom: 1.5rem;
    }
    
    .creator-tags-container {
        gap: 0.5rem;
    }
    
    .creator-tag {
        font-size: 0.85rem !important;
        padding: 5px 10px !important;
    }

    /* 5. 自己紹介文 */
    .profile-bio-row {
        padding-top: 1rem;
        border-top: 1px dashed #eee; /* 区切り線を追加して整理 */
    }

    .profile-text {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
        color: #444;
    }
}
/* ==========================================================================
   ★ Phase 3: PC表示の視認性向上 & タグホバー (今回追加・修正分)
   ========================================================================== */

/* --- 1. PC/タブレット(横)表示時の余白拡張 (視認性向上) --- */
/* スマホ用(max-width: 768px)の影響を受けない、PC向けのスタイル定義 */

@media (min-width: 769px) {
    /* プロフィールカード内部の余白を広げ、窮屈さを解消 */
    .profile-info {
        padding: 3rem 4rem; /* 上下3rem, 左右4remに増量 (スマホは1.5rem程度) */
    }

    /* 各セクションの下部余白を大幅に広げる */
    /* 名前・共有ボタンの行 */
    .profile-header-row {
        margin-bottom: 1.5rem; 
    }

    /* 外部リンクボタンの行 */
    .profile-links-row {
        margin-bottom: 2.5rem; /* リンクと編集ボタンの間を広げる */
    }

    /* 編集・設定ボタンの行 */
    .profile-actions-row {
        margin-bottom: 2.5rem; /* ボタンとタグの間を広げる */
        gap: 1.2rem; /* PCではボタン同士の間隔も少し広げる */
    }

    /* タグの行 */
    .profile-tags-row {
        margin-bottom: 3rem; /* タグと自己紹介の間を一番広げる */
    }

    /* 自己紹介文 */
    .profile-text {
        line-height: 2.0; /* PCなどの広い画面では行間を広めにして読みやすく */
        font-size: 1.05rem;
    }
}

/* --- 2. クリエイタータグのホバーアクション (全デバイス共通) --- */
/* 「浮き上がり・影」は禁止 → 色の変化のみで表現 */

.creator-tag,
.tag-link,
.profile-tags a {
    /* 背景色と文字色の変化を滑らかにする */
    transition: background-color 0.2s ease, color 0.2s ease;
    /* 念のため影や変形をリセット */
    box-shadow: none !important;
    transform: none !important;
}

.creator-tag:hover,
.tag-link:hover,
.profile-tags a:hover {
    /* ホバー時: 背景を少し濃い紫に変更 (視認性を高める) */
    /* 元の色: #e9d4f5 (薄い紫) -> 新しい色: #d4bce4 (少し濃いラベンダー) */
    background-color: #d4bce4; 
    color: var(--color-text); /* 文字色はそのまま */
    text-decoration: none;
    opacity: 1; /* 透明度は変えない */
}
/* ==========================================================================
   ★ Phase 4 (修正版): PC/タブレットのプロフィールレイアウト最適化
   ========================================================================== */

/* --- PC・タブレット(横)表示 (769px以上) --- */
@media (min-width: 769px) {
    
    /* ヘッダー全体（名前エリアとボタンエリアを囲む枠） */
    .profile-top-wrapper {
        display: flex;
        justify-content: space-between; /* 両端揃え */
        align-items: center; /* 上下中央 */
        flex-wrap: wrap; /* ★重要: スペースが足りない時は折り返しを許可 */
        gap: 1rem 2rem; /* 縦の隙間1rem, 横の隙間2rem */
        margin-bottom: 1.5rem;
    }

    /* ユーザー名エリア (左側) */
    .profile-header-row {
        margin-bottom: 0;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        /* 長い名前対策 */
        flex: 1 1 auto; /* 必要に応じて伸び縮み */
        min-width: 0; /* フレックスアイテムの縮小を許可 */
        max-width: 100%;
    }

    /* PCでも長い名前は折り返す */
    .profile-username {
        white-space: normal;
        word-break: break-all;
        overflow-wrap: anywhere;
        line-height: 1.3;
        margin: 0;
    }

    /* アクションボタン群 (右側: 共有/編集/設定) */
    .profile-actions-row {
        margin-bottom: 0;
        display: flex;
        gap: 1rem;
        align-items: center;
        
        /* ★修正ポイント: ボタン群の固定化 */
        flex: 0 0 auto; /* サイズを固定（縮ませない） */
        flex-wrap: nowrap; /* ★重要: 内部のボタンは絶対に折り返さない */
        margin-left: auto; /* 折り返し発生時も右寄せを維持 */
    }
    
    /* PC用の共有ボタン */
    #share-btn-pc {
        display: inline-flex !important;
        background-color: #fff;
        border: 1px solid #ccc;
        color: var(--color-text);
        margin-left: 0;
        height: auto;
        padding: 8px 16px;
        white-space: nowrap; /* テキスト折り返し禁止 */
    }
    #share-btn-pc:hover {
        background-color: #f9f9f9;
        border-color: var(--color-main);
        color: var(--color-main);
    }

    /* スマホ用の共有ボタンを隠す */
    #share-btn-mobile {
        display: none !important;
    }

    /* リンクなど他の要素 */
    .profile-links-row {
        margin-top: 1rem;
        margin-bottom: 2rem;
    }
    
    /* ボタンデザイン微調整 */
    .profile-edit-button,
    .profile-settings-button {
        padding: 8px 20px;
        font-size: 0.95rem;
        white-space: nowrap; /* テキスト折り返し禁止 */
    }
}

/* --- スマホ・モバイル表示 (768px以下) --- */
/* 前回から変更なし（このままでOK） */
@media screen and (max-width: 768px) {
    .profile-top-wrapper {
        display: block;
    }
    #share-btn-pc {
        display: none !important;
    }
    #share-btn-mobile {
        display: inline-flex !important;
    }
    .profile-header-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    .profile-actions-row {
        margin-bottom: 1.5rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }
}
/* ==========================================================================
   ★ プロフィールページのスマホ表示バランス調整 (今回追加分)
   ========================================================================== */

@media screen and (max-width: 768px) {
    
    /* ユーザー名のサイズアップ */
    .profile-username {
        font-size: 1.8rem !important; /* 1.6rem -> 1.8rem に拡大 */
        font-weight: 700;
        line-height: 1.3;
    }

    /* 外部リンクボタンのサイズダウン & 余白調整 */
    .external-link-button {
        font-size: 0.75rem !important; /* 0.85rem -> 0.75rem に縮小 */
        padding: 5px 12px !important;
        border-radius: 14px !important;
    }

    /* クリエイタータグのサイズダウン */
    .creator-tag {
        font-size: 0.75rem !important; /* 0.85rem -> 0.75rem に縮小 */
        padding: 4px 10px !important;
    }

    /* 外部リンクリストとタグリストのコンテナ間隔 */
    .external-links-container {
        gap: 0.5rem !important; /* ボタン同士の間隔を少し狭く */
    }
    
    .creator-tags-container {
        gap: 0.4rem !important; /* タグ同士の間隔を少し狭く */
    }
    
    /* プロフィール情報の各行の間隔調整 */
    .profile-links-row {
        margin-bottom: 1rem !important;
    }
    .profile-tags-row {
        margin-bottom: 1.2rem !important;
    }
}
/* ==========================================================================
   ★ 【再修正】通知ドロップダウンのスマホ表示最適化 (画面固定配置)
   ========================================================================== */

/* 1. PC/タブレット横 (アイコン基準で配置) */
#notification-icon-wrapper {
    position: relative !important;
    margin-left: auto;
    margin-right: 0;
    display: flex;
    align-items: center;
}

.notification-dropdown {
    /* デフォルト (PC向け) */
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    margin-top: 10px;
    width: 380px;
    max-width: 90vw;
    transform-origin: top right;
}

/* 2. スマホ・モバイル表示 (画面基準で配置) */
/* アイコンの位置に関係なく、画面に対して正しい位置に表示させる */
@media screen and (max-width: 768px) {
    .notification-dropdown {
        position: fixed !important;      /* 画面に対して固定 */
        top: 65px !important;            /* ヘッダーの高さ(60px) + 余白 */
        right: 10px !important;          /* 画面右端から10px */
        left: auto !important;           /* 左寄せ解除 */
        width: 95vw !important;          /* 画面幅の95%まで広げる */
        max-width: 360px !important;     /* 最大幅は360pxに制限 */
        
        /* はみ出し防止 */
        transform: none !important;
        margin: 0 !important;
        box-shadow: 0 5px 20px rgba(0,0,0,0.2) !important;
    }
}
/* ==========================================================================
   ★ 通知アイコンの色分け定義 (4色ルール)
   ========================================================================== */

/* 1. 赤：プロジェクト関連 (参加、派生など) */
.notification-icon.type-red {
    background-color: #fce8e6 !important; /* 薄い赤背景 */
    color: #e53935 !important;           /* 赤文字 */
}

/* 2. 青：作品関連 (投稿など) */
.notification-icon.type-blue {
    background-color: #e3f2fd !important; /* 薄い青背景 */
    color: #1e88e5 !important;           /* 青文字 */
}

/* 3. 緑：リアクション・フォロー通知 */
.notification-icon.type-green {
    background-color: #e8f5e9 !important; /* 薄い緑背景 */
    color: #43a047 !important;           /* 緑文字 */
}

/* 4. 黄：管理・運営・セキュリティ */
.notification-icon.type-yellow {
    background-color: #fff8e1 !important; /* 薄い黄色背景 */
    color: #fbc02d !important;           /* 黄色文字 */
}
/* ===============================================
   31. 公式アカウントバッジ
   =============================================== */
.official-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.3em; /* 名前の左側に置くため右に余白 */
    color: #a95acd; /* メインカラー（紫） */
    vertical-align: middle;
    /* 位置調整 */
    position: relative;
    top: -1px; 
}

.official-badge svg {
    width: 1.1em;
    height: 1.1em;
    fill: currentColor;
}

/* ツールチップ（ホバー時に「公式アカウント」と表示） */
.official-badge[title] {
    cursor: help;
}

/* スマホ表示時の調整 */
@media (max-width: 768px) {
    .official-badge svg {
        width: 1em;
        height: 1em;
    }
}
/* ===============================================
   33. ボタンの表示調整 (main.js対応)
   =============================================== */
/* すべて見る / もっと見る ボタン */
.show-more-button {
    display: inline-block;
    background: none;
    border: none;
    color: var(--color-main);
    padding: 8px 16px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease;
    box-shadow: none;
}

.show-more-button:hover {
    background: none;
    color: var(--color-main);
    text-decoration: underline;
    opacity: 0.7;
}
/* ===============================================
   33. 公式・イベント用バッジスタイル (緑色)
   =============================================== */
/* カード左上の「公式」および「EVENT」ラベルをミントグリーンにする */
.card-type-label.official,
.card-type-label.event {
    background-color: var(--color-accent) !important; /* ミントグリーン */
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* ユーザー名の左横に出るチェックマーク */
.official-badge {
    margin-right: 0.3em;
    margin-left: 0; /* 左側リセット */
    color: var(--color-main); /* 紫色で統一 */
    vertical-align: middle;
}
/* ===============================================
   33. 公式・イベント用バッジスタイル (緑色)
   =============================================== */
/* カード左上の「公式」および「EVENT」ラベルをミントグリーンにする */
.card-type-label.official,
.card-type-label.event {
    background-color: var(--color-accent) !important; /* ミントグリーン */
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* ユーザー名の左横に出るチェックマーク (プロフィールなどで使用) */
.official-badge {
    margin-right: 0.3em;
    margin-left: 0;
    color: var(--color-main); /* 紫色 */
    vertical-align: middle;
}
/* ===============================================
   Q&Aページ用スタイル (qa.js対応版)
   =============================================== */

/* リスト全体のコンテナ */
.qa-list-container {
    max-width: 900px;
    margin: 0 auto 4rem;
    padding: 0 1rem;
}

/* 各Q&Aアイテム */
.qa-item {
    border-bottom: 1px solid var(--color-border);
}

/* 質問ボタン (アコーディオンのヘッダー) */
.qa-question-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem 0.5rem;
    display: flex;
    align-items: flex-start; /* 長文時に上揃え */
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.qa-question-btn:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Qマーク */
.qa-q-mark {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.5rem;
    color: var(--color-project); /* 赤系 */
    margin-right: 1rem;
    font-weight: bold;
    line-height: 1.2;
    flex-shrink: 0; /* アイコンが縮まないように */
}

/* 質問テキスト */
.qa-question-text {
    font-weight: 700;
    font-size: 1.05rem;
    flex: 1; /* 残りの幅を埋める */
    padding-right: 1rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* 開閉アイコン (+ / -) */
.qa-toggle-icon {
    font-size: 1.5rem;
    color: var(--color-text-subtle);
    font-weight: 300;
    line-height: 1.2;
    flex-shrink: 0;
}

/* 回答エリア (開閉アニメーション用) */
.qa-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* 回答エリアの中身 */
.qa-answer-inner {
    padding: 0 0.5rem 2rem; /* 下に余白 */
    display: flex;
    align-items: flex-start;
}

/* Aマーク */
.qa-a-mark {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.5rem;
    color: var(--color-work); /* 青系 */
    margin-right: 1rem;
    font-weight: bold;
    line-height: 1.2;
    flex-shrink: 0;
}

/* 回答テキスト */
.qa-answer-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text);
    flex: 1;
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
    .qa-question-btn {
        padding: 1.2rem 0;
    }
    .qa-q-mark, .qa-a-mark {
        font-size: 1.2rem;
        margin-right: 0.75rem;
    }
    .qa-question-text {
        font-size: 1rem;
    }
    .qa-answer-inner {
        padding-bottom: 1.5rem;
    }
}
/* Q&Aページ下部のお問い合わせボタンを大きくする */
.qa-contact-link .action-button {
    /* ▼▼▼ 修正箇所：Flexboxを使って上下左右中央揃えにする ▼▼▼ */
    display: inline-flex;
    justify-content: center; /* 左右の中央 */
    align-items: center;     /* 上下の中央 */
    /* ▲▲▲ 修正ここまで ▲▲▲ */

    width: auto;
    min-width: 300px;       /* 横幅 */
    padding: 1.2em 3em;     /* 余白 */
    font-size: 1.1rem;      /* 文字サイズ */
    margin-top: 1rem;
    line-height: 1.2;       /* 行間を少し詰めてズレを防ぐ */
    text-decoration: none;  /* 下線が出てしまう場合の念の為の打ち消し */
}

/* スマホ表示時の調整 */
@media (max-width: 768px) {
    .qa-contact-link .action-button {
        width: 100%;
        min-width: 0;
    }
}
/* ===============================================
   サイドバーフッターリンクの横並び対応 (修正版)
   =============================================== */

/* 統合されたフッターリンク (横並び・折り返し) */
.sidebar-footer-links {
    display: flex;
    flex-direction: row;       /* 横並びに変更 */
    flex-wrap: wrap;           /* 折り返しを許可 */
    gap: 0.3rem 1rem;          /* 上下0.3rem, 左右1rem の間隔 */
    margin-bottom: 0;
    line-height: 1.5;          /* 行間を適度に確保 */
}

/* リンク個別のスタイル調整 */
.sidebar-footer-links a {
    color: #666; 
    text-decoration: none;
    font-size: 0.75rem;        /* 小さめの文字サイズ */
    transition: color 0.2s;
    padding: 0;                /* パディングは gap で制御するため削除 */
    white-space: nowrap;       /* リンクテキストの途中での改行を防ぐ */
}

.sidebar-footer-links a:hover {
    color: var(--color-main);
    text-decoration: underline;
}

/* ダークモード時の文字色対応 (既存設定の再確認用) */
[data-theme="dark"] .sidebar-footer-links a {
    color: #b0b0b0;
}
[data-theme="dark"] .sidebar-footer-links a:hover {
    color: #fff;
}