@charset "UTF-8";

/* --- 宝虫プロダクション：共通デザイン定義 --- */
:root { 
    --main-red: #b22222; 
    --bg-cream: #fdfaf5; 
    --text-dark: #333; 
    --accent-gold: #d4af37; 
}

/* 1. 基本設定 */
* { box-sizing: border-box; }
body { 
    font-family: 'Shippori Mincho', serif; 
    margin: 0; padding: 0; 
    background: #fff; 
    color: var(--text-dark); 
    line-height: 1.8; 
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
a { transition: 0.3s; color: var(--main-red); text-decoration: none; }
a:hover { opacity: 0.7; }

/* 2. ヘッダー周り */
header { padding: 40px 0 20px; text-align: center; border-bottom: 3px solid var(--main-red); background: #fff; margin-bottom: 20px; }
.logo img { max-width: 320px; width: 100%; height: auto; }
.tagline { font-size: 1.2em; font-weight: bold; margin: 15px 0; letter-spacing: 0.1em; }
.sns-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.sns-nav img { width: 35px; height: auto; border-radius: 5px; }

/* 3. メインビジュアル・動画（黒枠・全画面対応） */
.hero-video {
    background: #000;
    padding: 60px 0;
    margin-bottom: 40px;
    border-radius: 10px;
    width: 100%;
    overflow: hidden;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.video-caption { color: #fff; text-align: center; margin: 25px 0 0 0; font-size: 1.1em; letter-spacing: 0.1em; }

/* 4. セクション見出し（おしゃれ仕様） */
.section-title, .section-h2 {
    font-size: 2em;
    color: var(--main-red);
    text-align: center;
    margin: 60px 0 30px;
    position: relative;
    padding-bottom: 10px;
}
.section-title::after, .section-h2::after {
    content: ""; display: block; width: 80px; height: 3px; background: var(--main-red); margin: 10px auto 0;
}
.catch-phrase { background: var(--bg-cream); padding: 30px; border-radius: 8px; margin: 30px 0; text-align: center; border: 1px solid #eee; }
.moto-ga-omoshiroi { font-size: 2em; font-weight: bold; color: var(--main-red); display: block; margin-bottom: 10px; }

/* 5. グリッド ＆ カードデザイン */
.grid-layout, .services, .purchase-grid { 
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin: 30px 0; 
}
.card, .book-card, .vol-box, .service-item { 
    background: var(--bg-cream); border: 1px solid #eee; padding: 20px; border-radius: 10px; text-align: center; transition: 0.4s; 
}
.card:hover, .book-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.card img, .book-card img { width: 100%; height: auto; border-radius: 5px; margin-bottom: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

/* 6. ボタン（宝虫レッド絶対死守！） */
.button-group, .cta-box { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.btn { 
    display: block; padding: 12px; border-radius: 5px; font-weight: bold; font-size: 0.9em; 
    border: 1px solid var(--main-red); text-align: center; transition: 0.3s; 
}
.btn-amazon, .btn-red { background: var(--main-red) !important; color: #fff !important; }
.btn-detail, .btn-kindle, .btn-white { background: #fff !important; color: var(--main-red) !important; }
.btn:hover { background: var(--text-dark) !important; color: #fff !important; border-color: var(--text-dark) !important; }

/* 7. 特殊パーツ（ハッシュタグ・グッズ） */
.ninki-grid, .hashtag-grid, .goods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; text-align: center; margin: 30px 0; }
.ninki-item, .hashtag-item, .goods-thumb { border: 1px solid #eee; padding: 10px; border-radius: 5px; font-size: 0.75em; background: #fff; transition: 0.3s; }
.goods-thumb img { max-width: 100px; height: auto; }

/* 8. フッター ＆ フォーム */
footer { background: #222; color: #aaa; padding: 60px 0; text-align: center; font-size: 0.85em; margin-top: 80px; }
footer address { font-style: normal; margin-bottom: 20px; line-height: 2; }
.contact-form table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
.contact-form th, .contact-form td { padding: 15px; border: 1px solid #eee; }
.contact-form th { background: #fafafa; text-align: left; width: 30%; }

/* 江戸シリーズ専用：4列配置 ＆ 少し小さめにする設定 */
.edo-grid {
    display: grid;
    /* 1100pxの幅で4列並ぶように、最小幅を220pxに下げます */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px; /* 隙間も少し詰めてスッキリさせます */
    margin: 30px 0;
}

/* 江戸シリーズのカード内だけ、少し文字や余白を小さくします */
.edo-grid .card {
    padding: 15px; /* 余白を20px→15pxへ */
    font-size: 0.9em; /* 文字を少し小さくして控えめに */
}

.edo-grid .card h4 {
    margin: 10px 0;
    line-height: 1.4;
}

.edo-grid .card img {
    max-width: 180px; /* 画像も少し小ぶりにして「ののう」を立てます */
    margin: 0 auto 10px;
}

/* その他書籍：5列配置 ＆ さらにコンパクト設定 */
.others-grid {
    display: grid;
    /* 1100pxの幅で5列並ぶように、最小幅を180pxに設定します */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

/* その他書籍のカードは、極限までシンプルに */
.others-grid .card {
    padding: 10px;
    font-size: 0.85em; /* さらに文字を小さくして情報の密度を上げます */
    background: #fff; /* 江戸シリーズと色を変えて区別してもいいですネ！ */
}

.others-grid .card h4 {
    margin: 5px 0;
    line-height: 1.3;
}

.others-grid .card img {
    max-width: 140px; /* 表紙を小ぶりに整列させます */
    margin: 0 auto 5px;
}

/* レスポンシブ調整 */
@media (max-width: 600px) {
    .main-title { font-size: 1.8em; }
    .grid-layout, .purchase-grid, .edo-grid, .services, .ninki-grid, .hashtag-grid { grid-template-columns: 1fr; }
    .contact-form th, .contact-form td { display: block; width: 100%; }
}

        /* nonounono.html 専用の追加修正 */
        .note-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
            gap: 20px; 
            margin: 40px 0;
        }
        .note-item { 
            height: 180px; 
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden; 
        }
        .note-item iframe { width: 100% !important; height: 100% !important; border: none; }

/* 縦書き（タカラ・スタイル） */
.test{
  font-size:16px;
  line-height:1.5em;
  margin:20px;
}
.space{
  letter-spacing:1em;
}