/* 基本スタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    position: relative;
}

/* 弁護士バッジの背景パターン */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"%3E%3Cpath fill="%23ffcd02" opacity="0.05" d="M63.84,6.42c-31.8,0-57.58,25.78-57.58,57.58s25.78,57.58,57.58,57.58,57.58-25.78,57.58-57.58S95.64,6.42,63.84,6.42ZM114.36,44.05c1.6,3.86-.53,8.25-4.55,9.38l-14.79,4.16c-.7-3.42-1.96-6.64-3.66-9.57l13.16-7.38c3.64-2.04,8.25-.45,9.85,3.41ZM102.7,26.59c2.95,2.95,2.66,7.83-.62,10.41l-11.8,9.29c-1.93-2.88-4.33-5.42-7.07-7.53l9.09-11.55c2.58-3.28,7.45-3.57,10.41-.62ZM85.24,14.93c3.86,1.6,5.46,6.21,3.41,9.85l-7.15,12.75c-2.87-1.92-6.08-3.38-9.51-4.29l3.87-13.76c1.13-4.02,5.52-6.15,9.38-4.55ZM64.65,10.83c4.18,0,7.42,3.65,6.92,7.8l-1.68,14.13c-1.96-.38-3.98-.58-6.05-.58-1.51,0-3,.11-4.46.32l-1.65-13.87c-.49-4.15,2.75-7.8,6.92-7.8ZM44.06,14.93c3.86-1.6,8.25.53,9.38,4.55l3.77,13.4c-3.53.75-6.84,2.08-9.83,3.89l-6.73-11.99c-2.04-3.64-.45-8.25,3.41-9.85ZM26.6,26.59c2.95-2.95,7.83-2.66,10.41.62l8.49,10.79c-2.9,2.05-5.45,4.58-7.52,7.47l-10.76-8.47c-3.28-2.58-3.57-7.45-.62-10.41ZM14.94,44.05c1.6-3.86,6.21-5.46,9.85-3.41l11.94,6.7c-1.84,2.98-3.19,6.29-3.97,9.82l-13.27-3.73c-4.02-1.13-6.15-5.52-4.55-9.38ZM10.84,64.64c0-4.18,3.65-7.42,7.8-6.92l13.72,1.64c-.22,1.52-.34,3.07-.34,4.65,0,2.02.2,3.99.56,5.9l-13.94,1.66c-4.15.49-7.8-2.75-7.8-6.92ZM14.94,85.23c-1.6-3.86.53-8.25,4.55-9.38l13.56-3.81c.9,3.45,2.36,6.67,4.29,9.56l-12.54,7.04c-3.64,2.04-8.25.45-9.85-3.41ZM26.6,102.69h0c-2.95-2.95-2.66-7.83.62-10.41l11.36-8.94c2.12,2.76,4.68,5.17,7.57,7.11l-9.14,11.62c-2.58,3.28-7.45,3.57-10.41.62ZM44.06,114.35c-3.86-1.6-5.46-6.21-3.41-9.85l7.27-12.96c2.94,1.71,6.18,2.96,9.63,3.65l-4.11,14.6c-1.13,4.02-5.52,6.15-9.38,4.55ZM64.65,118.45c-4.18,0-7.42-3.65-6.92-7.8l1.8-15.13c1.41.19,2.85.3,4.31.3,2.02,0,3.99-.2,5.9-.55l1.83,15.39c.49,4.15-2.75,7.8-6.92,7.8ZM85.24,114.35c-3.86,1.6-8.25-.53-9.38-4.55l-4.2-14.95c3.35-.85,6.48-2.23,9.31-4.04l7.68,13.69c2.04,3.64.45,8.25-3.41,9.85ZM102.7,102.69h0c-2.95,2.95-7.83,2.66-10.41-.62l-9.72-12.35c2.74-2,5.15-4.43,7.13-7.18l12.38,9.74c3.28,2.58,3.57,7.45.62,10.41ZM114.36,85.23c-1.6,3.86-6.21,5.46-9.85,3.41l-13.73-7.71c1.79-2.84,3.14-5.97,3.96-9.32l15.07,4.24c4.02,1.13,6.15,5.52,4.55,9.38ZM110.66,71.56l-15.52-1.85c.34-1.85.52-3.76.52-5.71,0-1.51-.11-3-.32-4.46l15.32-1.83c4.15-.49,7.8,2.75,7.8,6.92s-3.65,7.42-7.8,6.92Z"/%3E%3C/svg%3E');
    background-size: 200px 200px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: -1;
}

/* ヘッダー */
header {
    background-color: #fff;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.breadcrumb {
    font-size: 0.9rem;
    color: #666;
}

.breadcrumb a {
    color: #1a73e8;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* メインコンテンツ */
main {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

article {
    padding: 2rem;
}

h1 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
    border-bottom: 3px solid #ffcd02;
    padding-bottom: 0.5rem;
}

h2 {
    font-size: 1.5rem;
    color: #34495e;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(to bottom, transparent 60%, #ffcd02 60%);
    display: inline-block;
    padding: 0 0.5rem;
}

h3 {
    font-size: 1.2rem;
    color: #555;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

h4 {
    font-size: 1.1rem;
    color: #666;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

/* 画像スタイル */
.main-image {
    margin: 2rem 0;
    text-align: center;
}

.main-image img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.main-image figcaption {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
}

/* キャラクターの吹き出しスタイル */
.character-dialogue {
    display: flex;
    align-items: center;
    margin: 2rem 0;
    gap: 1rem;
    flex-wrap: nowrap;
}

.character-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.character-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid #ffcd02;
}

.character-name {
    font-weight: bold;
    color: #2c3e50;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    text-align: center;
}

.speech-bubble {
    position: relative;
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 15px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: inline-block;
}

.speech-bubble::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #333 transparent transparent;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 12px 8px 0;
    border-color: transparent #fff transparent transparent;
}

/* 巻数情報 */
.volume-info {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background-color: #f9f9f9;
    border-left: 4px solid #ffcd02;
}

.volume-dates p {
    margin: 0;
    line-height: 1.8;
}

/* 案件一覧スタイル */
.case-list {
    margin: 2rem 0;
}

.case-item {
    background-color: #fff;
    border: 2px solid #ffcd02;
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.case-image {
    text-align: center;
    margin-bottom: 2rem;
}

.case-image img {
    width: 91px;
    height: 128px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.case-info {
    margin-bottom: 1.5rem;
}

.case-info h4 {
    font-size: 1rem;
    color: #666;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #eee;
}

.case-info p {
    font-size: 1.1rem;
    color: #333;
    font-weight: 500;
    margin: 0;
}

.case-info .stars {
    color: #ffcd02;
    font-size: 1.3rem;
    letter-spacing: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.case-description {
    line-height: 1.8;
    color: #333;
}

.case-description p {
    margin-bottom: 1rem;
}

.hateful-message {
    background-color: #2c3e50;
    color: #ffffff !important;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 10px;
    text-align: center;
    position: relative;
    font-weight: bold;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}

.hateful-message::before,
.hateful-message::after {
    content: '"';
    font-size: 2rem;
    color: #ffcd02;
    position: absolute;
}

.hateful-message::before {
    top: 10px;
    left: 15px;
}

.hateful-message::after {
    bottom: 10px;
    right: 15px;
}

.hateful-message p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ffffff !important;
}

.case-point {
    font-weight: bold;
    color: #e74c3c;
    background-color: #fff3cd;
    padding: 1rem 1.5rem;
    border-left: 4px solid #e74c3c;
    border-radius: 5px;
    margin-top: 1.5rem;
}

/* 関連リンク */
.related-links {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #eee;
}

.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.link-card {
    display: block;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.link-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.link-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.link-card h3 {
    font-size: 1.1rem;
    color: #333;
    padding: 0.8rem 1rem 0;
    margin: 0;
}

.link-card p {
    font-size: 0.9rem;
    color: #666;
    padding: 0.5rem 1rem 1rem;
    margin: 0;
}

/* リンクスタイル */
a.related-link {
    color: #1a73e8;
    text-decoration: none;
    font-weight: 500;
}

a.related-link:hover {
    text-decoration: underline;
}

/* フッター */
footer.copy {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 2rem;
    margin-top: 3rem;
    font-size: 0.9rem;
}

footer.copy a {
    color: #3498db;
    text-decoration: none;
}

footer.copy a:hover {
    text-decoration: underline;
}

.contact-info,
.usage-terms,
.copyright {
    margin-top: 1.5rem;
}

.copyright {
    text-align: center;
    border-top: 1px solid #34495e;
    padding-top: 1rem;
}

.push0 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    article {
        padding: 1rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    .character-dialogue {
        align-items: flex-start;
    }

    .character-avatar img {
        width: 60px;
        height: 60px;
    }

    .character-name {
        font-size: 0.85rem;
    }

    .speech-bubble {
        font-size: 0.9rem;
        padding: 0.8rem 1.2rem;
    }

    .volume-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* 案件一覧のレスポンシブ */
    .case-item {
        padding: 1.5rem;
    }

    .case-info h4 {
        font-size: 0.9rem;
    }

    .case-info p {
        font-size: 1rem;
    }

    .hateful-message {
        padding: 1rem;
        font-size: 0.95rem;
    }

    .hateful-message::before,
    .hateful-message::after {
        font-size: 1.5rem;
    }

    .link-grid {
        grid-template-columns: 1fr;
    }
}