/* 基本リセットとベーススタイル */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Courier New", Courier, monospace, "Hiragino Mincho ProN", serif; /* 雰囲気を出すためタイプライター風フォント優先 */
    line-height: 1.6;
    color: #111;
    background-color: #f4f4f4;
}

a {
    text-decoration: none;
    color: #111;
    transition: 0.3s;
}

a:hover {
    opacity: 0.6;
}

ul {
    list-style: none;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダー */
.site-header {
    background: #111;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

.site-header .logo {
    font-size: 1.8rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.main-nav ul {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.main-nav a {
    color: #ccc;
    font-size: 0.9rem;
}

/* ヒーローセクション */
.hero-section {
    padding: 100px 0;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

.hero-section h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* セクション共通 */


/* Aboutセクションにあるアコーディオンの上側に隙間を作る */
#about .lang-accordion {
    margin-top: 2rem; /* ここの数値を調整 */
}
#about .ja-text{
    margin-top:1rem;
}



.section {
    padding: 60px 0;
}

.section-title {
    font-size: 1.5rem;
    border-bottom: 2px solid #111;
    display: inline-block;
    margin-bottom: 40px;
    padding-bottom: 5px;
}

/* Books Grid */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}


/* 画像のコンテナ：画像の比率がバラバラでも綺麗に見せる工夫 */
.book-image-container {
    width: 100%;
    height: 350px; /* 高さは好みに合わせて調整 */
    background: #ffffff;
    margin-bottom: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 画像自体のスタイル */
.book-cover {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* 枠いっぱいにトリミングしたい場合は cover、全体を見せたい場合は contain */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* 軽く影をつけて本っぽく */
}

/* Amazonボタンのアレンジ */
.amazon-btn {
    width: 100%;
    text-align: center;
    background-color: #f1e0c7; /* Amazonカラー風（好みで #111 のままでもOK） */
    color: #000;
    font-weight: bold;
    border: none;
    font-family: arial;
}

.amazon-btn:hover {
    background-color: #e38800;
    color: #fff;
}













.book-item {
    background: #fff;
    padding: 20px;
    border: 1px solid #ddd;
}


.book-item h4 {
    margin-bottom: 5px; /* 下の隙間を狭くする */
    font-size: 1.2rem;
    text-transform: uppercase; /* 強制的に大文字にするか、そのままかはお好みで */
    letter-spacing: 1px;
}

/* 作家名（新規追加） */
.book-author {
    color: #666;          /* 真っ黒ではなくグレーに */
    font-family: helvetica; /* タイプライター風フォント */
    font-size: 0.9rem;
    margin-bottom: 15px;  /* 価格との間の余白 */
    letter-spacing: 0.5px;


}








.book-cover-placeholder {
    width: 100%;
    height: 300px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    margin-bottom: 20px;
}

.book-price {
    font-weight: bold;
    margin: 5px 0 15px;
}

.btn {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 10px 20px;
    font-size: 0.9rem;
    margin-top: 15px;
}

/* News List */
.news-list li {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}

.news-list .date {
    font-family: monospace;
    margin-right: 15px;
    color: #666;
}

/* フッター */
.site-footer {
    background: #111;
    color: #888;
    text-align: center;
    padding: 40px 0;
    font-size: 0.8rem;
}

.footer-links {
    margin-bottom: 20px;
}

.footer-links a {
    color: #ccc;
    margin: 0 10px;
}