@charset "UTF-8";

/* =========================================
   N-Pops Soshi - Main Stylesheet
   ========================================= */

/* --- Base Typography & Texture --- */
body {
    font-family: 'Noto Serif JP', serif;
    background-color: #fcfaf2;
    /* 生成り色 */
    color: #292524;
    /* Stone 800 */
    font-feature-settings: "palt";
    line-height: 1.8;

    /* 和紙風ノイズテクスチャ (SVG Data URI) */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* --- Utilities --- */

/* 縦書き設定 */
.writing-vertical-rl {
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    text-orientation: mixed;
    /* 英数字は横向きのまま縦に積む（読みやすさ重視） */
}

/* 縦書き内の英数字を強制的に立たせる場合（デザイン重視の短い単語など） */
.text-upright {
    text-orientation: upright;
}

/* 縦書き時の字間調整 */
.vertical-text {
    letter-spacing: 0.15em;
    line-height: 2;
}

/* 画像・コンテナ用：鋭利なボーダーとソリッドな影 */
.sharp-shadow {
    box-shadow: 4px 4px 0 0 rgba(41, 37, 36, 0.15);
    /* ぼかし無しの影 */
    border: 1px solid #e7e5e4;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    /* 筆運びのようなイージング */
}

.sharp-shadow:hover {
    box-shadow: 6px 6px 0 0 rgba(185, 28, 28, 0.2);
    /* ホバー時は紅色の影 */
    transform: translate(-2px, -2px);
}

/* 枠線のみの装飾（画像のボーダーなどに使用） */
.border-frame {
    position: relative;
    padding: 6px;
    border: 1px solid #d6d3d1;
}

.border-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================
   Article Body Design (.article-body)
   ========================================= */

.article-body {
    font-size: 1.05rem;
    line-height: 2.2;
    /* ゆったりした行間 */
    color: #44403c;
}

/* --- Headings --- */

/* H2: 大見出し - 縦のラインを強調 */
.article-body h2 {
    font-size: 1.75rem;
    font-weight: 900;
    color: #1e1b4b;
    /* Indigo 950 */
    margin-top: 4em;
    margin-bottom: 2em;
    padding-left: 0.8em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #a8a29e;
    position: relative;
    letter-spacing: 0.05em;
}

/* H2のアクセント（左側の極太縦線） */
.article-body h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: #b91c1c;
    /* Red 700 */
}

/* H3: 中見出し - 菱形アクセント */
.article-body h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #292524;
    margin-top: 3.5em;
    margin-bottom: 1.5em;
    display: flex;
    align-items: center;
}

.article-body h3::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #1e1b4b;
    transform: rotate(45deg);
    margin-right: 12px;
    box-shadow: 2px 2px 0 #b91c1c;
}

/* H4: 小見出し */
.article-body h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 2.5em;
    margin-bottom: 1em;
    padding-bottom: 4px;
    border-bottom: 1px dashed #d6d3d1;
    display: inline-block;
}

/* --- Paragraphs & Text --- */
.article-body p {
    margin-bottom: 2.5em;
    text-align: justify;
    /* 両端揃え */
}

/* 強調 (Bold) - 蛍光ペンではなく文字色変更と傍点 */
.article-body strong {
    font-weight: 700;
    color: #b91c1c;
    text-emphasis: filled circle #b91c1c;
    /* 傍点 */
    -webkit-text-emphasis: filled circle #b91c1c;
    text-emphasis-position: over right;
}

/* リンク */
.article-body a {
    color: #1e1b4b;
    text-decoration: none;
    background-image: linear-gradient(to right, #b91c1c, #b91c1c);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.3s;
    border-bottom: 1px solid #cbd5e1;
}

.article-body a:hover {
    background-size: 100% 1px;
    color: #b91c1c;
    border-bottom-color: transparent;
}

/* --- Quote (引用) --- */
.article-body blockquote {
    position: relative;
    background-color: transparent;
    /* 背景色なし */
    padding: 1.5em 2em;
    margin: 3em 2em;
    font-family: "Yu Mincho", "YuMincho", serif;
    color: #57534e;
    border-top: 1px solid #78716c;
    border-bottom: 1px solid #78716c;
    text-align: center;
}

.article-body blockquote::before {
    content: '“';
    display: block;
    font-size: 3em;
    line-height: 1;
    margin-bottom: -20px;
    color: #d6d3d1;
}

.article-body blockquote::after {
    content: '”';
    display: block;
    font-size: 3em;
    line-height: 1;
    margin-top: -20px;
    color: #d6d3d1;
}

/* --- Lists --- */
.article-body ul,
.article-body ol {
    background-color: #fff;
    border: 1px solid #e7e5e4;
    padding: 2.5em 2.5em 2.5em 3.5em;
    margin: 2.5em 0;
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.05);
    /* 控えめなソリッドシャドウ */
}

.article-body ul {
    list-style-type: square;
    /* 四角いマーカー */
}

.article-body ol {
    list-style-type: cjk-ideographic;
    /* 漢数字 (一、二、三...) */
}

.article-body li {
    margin-bottom: 0.8em;
    padding-left: 0.5em;
}

.article-body li::marker {
    color: #b91c1c;
}

/* --- Images --- */
.article-body img {
    max-width: 100%;
    height: auto;
    margin: 4em auto;
    display: block;
    /* 写真を枠線で囲む */
    padding: 8px;
    border: 1px solid #d6d3d1;
    background: #fff;
}

/* --- Table of Contents (目次) --- */
#toc-container {
    background-color: #fff;
    border: 1px solid #1e1b4b;
    /* 濃紺の細い枠 */
    padding: 3em;
    margin-bottom: 5em;
    position: relative;
}

/* 「目次」というラベルを枠線の上に配置 */
#toc-container .toc-title {
    position: absolute;
    top: -1em;
    left: 2em;
    background-color: #fff;
    /* 背景色と同じにして線を隠す */
    padding: 0 1em;
    font-weight: 900;
    font-size: 1.1rem;
    color: #1e1b4b;
    letter-spacing: 0.2em;
}

#toc-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
}

#toc-container li {
    margin-bottom: 0;
    padding: 0.5em 0;
    border-bottom: 1px dotted #d6d3d1;
    font-size: 0.95rem;
}

#toc-container li:last-child {
    border-bottom: none;
}

#toc-container a {
    text-decoration: none;
    color: #44403c;
    transition: color 0.2s;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
}

#toc-container a::after {
    content: '▼';
    font-size: 0.6em;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s;
    color: #b91c1c;
}

#toc-container a:hover {
    color: #b91c1c;
}

#toc-container a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* --- Form Elements Reset --- */
input:focus,
textarea:focus {
    outline: none;
    border-color: #1e1b4b;
    box-shadow: 2px 2px 0 rgba(30, 27, 75, 0.2);
}