/* 明朝体設定 */
body {
    font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
    background-color: #f2e9d7;
    color: #2a2a2a;
}

/* 縦書き */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
.w-600 {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}
/* 和紙のような質感の背景（画像がない場合は色で代用） */
.bg-paper {
    background-image: url('image/bg_texture.png');
    background-size: contain;
    background-position: top;
}
.bg-gray {
    background-color: #616472;
    z-index: -10;
}
.bg-brown {
    background-color: #5c3d1f;
    z-index: -10;
}
#hero {
    height: 100svh;
}
#main-visual {
    height: 100svh;
}
#main-visual h2 {
    top: 12svh;
}

/* スクロール時のフェードイン効果 */
section:not(#shirayaki),
.illust {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}


.reveal:not(#shirayaki) {
    opacity: 0;
    transform: translateY(20px);
}

.reveal.active:not(#shirayaki) {
    opacity: 1;
    transform: translateY(0);
}

/* --- アニメーション設定 --- */

/* 1. 初期状態：透明で下にズレている */
.illust {
    opacity: 0 !important; /* 初期は強制的に非表示 */
    transform: translateY(40px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
    will-change: opacity, transform;
}

/* 2. JSで「is-visible」がついた時の状態 */
.illust.is-visible {
    opacity: 0.4 !important; /* デザイン通りの不透明度 */
    transform: translateY(0) !important; /* 元の位置へ戻る */
}