/* =========================================
   1. 全体の設定（スクロール解禁！）
   ========================================= */
body {
    margin: 0;
    padding: 0;
    background-color: #fcf8ec;
    color: #333;
    font-family: 'Shippori Mincho', serif;
    
    /* ★修正ポイント：スクロールできるようにする設定 */
    width: 100vw;
    min-height: 100vh; /* 最低でも画面いっぱいの高さ */
    overflow-x: hidden; /* 横揺れだけ防ぐ（縦スクロールはOK） */
}

/* =========================================
   2. 最初の画面（詩とロゴ）の設定
   ========================================= */
.container {
    width: 100%;
    
    /* ★修正ポイント：最初の画面を「最低でも画面いっぱい」確保する */
    min-height: 100dvh; 
    
    /* 中身を縦に並べる設定 */
    display: flex;
    flex-direction: column;
    align-items: center;      /* 左右中央寄せ */
    justify-content: space-between; /* 上下に配置（詩とロゴを離す） */
    
    /* 余白 */
    padding-top: 5vh; 
    padding-bottom: env(safe-area-inset-bottom, 20px);
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* =========================================
   3. 詩（Poem）のデザイン
   ========================================= */
.poem {
    /* 縦書き設定 */
    writing-mode: vertical-rl;
    text-orientation: upright;
    
    /* 箱のサイズを文字ぴったりにする（中央寄せ対策） */
    display: inline-block;
    width: fit-content;
    
    /* 画面の中央に配置 */
    margin: auto; 
    
    /* スマホではみ出さないための保険 */
    max-width: 90vw; 

    /* 頭（上）揃え */
    text-align: left;
}

.poem p {
    /* 文字サイズ：スマホで見やすい大きさ */
    font-size: 3.8vmin;
    
    /* 行間 */
    margin: 0 0.8vmin; 
    line-height: 1.6;
    
    /* アニメーション用 */
    opacity: 0;
    animation: fadeInLeft 3s ease-out forwards;
}

/* アニメーションの動き */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px); 
    }
    to {
        opacity: 1;
        transform: translateX(0); 
    }
}

/* 1行ごとの遅延設定（だんだんゆっくりになる設定） */
.poem p:nth-child(1)  { animation-delay: 0.3s; } /* スタート */
.poem p:nth-child(2)  { animation-delay: 0.6s; } /* +0.3s */
.poem p:nth-child(3)  { animation-delay: 1.0s; } /* +0.4s */
.poem p:nth-child(4)  { animation-delay: 1.5s; } /* +0.5s */
.poem p:nth-child(5)  { animation-delay: 2.1s; } /* +0.6s */
.poem p:nth-child(6)  { animation-delay: 2.8s; } /* +0.7s */
.poem p:nth-child(7)  { animation-delay: 3.6s; } /* +0.8s */
.poem p:nth-child(8)  { animation-delay: 4.5s; } /* +0.9s */
.poem p:nth-child(9)  { animation-delay: 5.5s; } /* +1.0s */
.poem p:nth-child(10) { animation-delay: 6.6s; } /* +1.1s */
.poem p:nth-child(11) { animation-delay: 7.8s; } /* +1.2s */
.poem p:nth-child(12) { animation-delay: 9.1s; } /* +1.3s */
.poem p:nth-child(13) { animation-delay: 10.5s; } /* +1.4s */


/* =========================================
   4. 下部（ロゴ・SNS）のデザイン
   ========================================= */
.footer-content {
    flex-shrink: 0; 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
    margin-bottom: 2vh; 
}

.main-logo {
    width: 60vmin;
    max-width: 360px;
    height: auto;
}

.sns-icons {
    display: flex;
    gap: 20px;
}

.sns-icons img {
    width: 24px;
    height: auto;
    transition: opacity 0.3s;
}
.sns-icons img:hover {
    opacity: 0.7;
}

/* PC用の微調整 */
@media (min-width: 769px) {
    .poem p {
        font-size: 1.1rem; /* PCなら固定サイズ */
        margin: 0 0.8em;
    }
}


/* =========================================
   5. 横スクロール年表エリア（新機能！）
   ========================================= */
.timeline-scroll-section {
    /* 最初の画面との区切りに余白を入れる */
    padding: 60px 0;
    background-color: #fcf8ec;
    text-align: center;
}

.section-title {
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    font-weight: 500;
}

.scroll-note {
    font-size: 0.8rem;
    color: #8a7b6b;
    margin-bottom: 30px;
    opacity: 0.8;
}

/* --- 横スクロール年表のデザイン（拡大版） --- */

/* スクロールする枠（窓） */
.scroll-container {
    width: 100%;
    overflow-x: auto;  /* 横スクロール */
    
    /* ★変更点1：画像がデカすぎて縦にはみ出ても、縦スクロールできるようにする */
    overflow-y: auto; 
    
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px; 
    padding-left: 5vw;
    padding-right: 5vw;
    box-sizing: border-box;
    
    /* 縦スクロール時の操作性を良くする */
    max-height: 100vh; 
}

/* 年表画像本体 */
.timeline-img {
    /* ★変更点2：PCでのサイズ（80vh → 95vh） */
    /* 画面の高さギリギリいっぱいまで拡大！ */
    /* もっと大きくしたいなら 120vh とかにしてもOK */
    height: 95vh; 
    
    width: auto; 
    max-width: none; 
    mix-blend-mode: multiply; 
}

/* スマホの時の年表調整 */
@media (max-width: 768px) {
    .timeline-img {
        /* ★変更点3：スマホでのサイズ（60vh → 85vh） */
        /* スマホの画面の高さの85%まで使う！これなら読めるはず */
        height: 85vh; 
    }
}


/* =========================================
   6. Works（作品紹介）エリア（必要なら使う）
   ========================================= */
.works-section {
    padding: 60px 20px 100px; /* 下に余白多め */
    background-color: #fcf8ec;
    text-align: center;
}

.book-item {
    max-width: 800px;
    margin: 0 auto 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    text-align: left;
}

.book-image img {
    width: 200px;
    height: auto;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
}

.book-info {
    flex: 1;
    min-width: 300px;
}

.book-title {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

.book-price {
    font-weight: bold;
    color: #8a7b6b;
}

.btn-link {
    display: inline-block;
    padding: 10px 30px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    margin-top: 10px;
}