/* STREAMING_CHUNK:Configuring custom base styles and typography... */
body {
font-family: 'Noto Sans JP', sans-serif;
background-color: #fbfcfa;
color: #2d3748;
}

/* 漫画風の見出しフォント */
.manga-font {
font-family: 'Kosugi Maru', 'Noto Sans JP', sans-serif;
}

/* STREAMING_CHUNK:Styling manga-style containers and shadows... /
/ コミック風の太枠と影（ポップアートシャドウ） */
.manga-box {
border: 3px solid #1e293b;
box-shadow: 4px 4px 0px 0px #1e293b;
border-radius: 16px;
background-color: #ffffff;
transition: all 0.2s ease;
}

.manga-box:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px 0px #1e293b;
}

.manga-box-active {
border: 3px solid #059669;
box-shadow: 4px 4px 0px 0px #059669;
background-color: #f0fdf4;
}

/* STREAMING_CHUNK:Defining screentone patterns and backgrounds... /
/ スクリーントーン風のドット背景 */
.screentone-bg {
background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
background-size: 10px 10px;
}

.screentone-green {
background-image: radial-gradient(#a7f3d0 1.5px, transparent 1.5px);
background-size: 12px 12px;
}

.screentone-yellow {
background-image: radial-gradient(#fde047 1.5px, transparent 1.5px);
background-size: 12px 12px;
}

/* STREAMING_CHUNK:Styling speech bubbles and animations... /
/ コミック吹き出しの三角形 */
.speech-bubble-tip {
position: relative;
}
.speech-bubble-tip::before {
content: '';
position: absolute;
bottom: -15px;
left: 30px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #1e293b transparent;
display: block;
width: 0;
}
.speech-bubble-tip::after {
content: '';
position: absolute;
bottom: -11px;
left: 32px;
border-width: 13px 13px 0;
border-style: solid;
border-color: #f0fdf4 transparent;
display: block;
width: 0;
}

/* フェードアニメーション */
.fade-in {
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* コミックフォント風のバッジ装飾 */
.manga-badge {
border: 2px solid #1e293b;
transform: rotate(-1.5deg);
}

/* スムーズスクロール用の設定 */
html {
scroll-behavior: smooth;
}