/* --- ここからセクション1 --- */


/* --- セクション1 共通設定 --- */
#blkimatsu .section-1.introduction-area {
    width: 100%;
    /* 背景色を画像（howto.png）の外側の水色に合わせる */
    background-color: #78cff1; 
}

/* コンテナ設定 */
#blkimatsu .section-1 .intro-image-container {
    width: 100%;
    max-width: 770px; /* 画像の元の幅に合わせて調整してください */
    margin: 0 auto;   /* 中央寄せ */
    display: flex;
    flex-direction: column; /* 縦並び */
}

/* 画像の設定：隙間を完全になくす */
#blkimatsu .section-1 .intro-full-img {
    width: 100%;
    height: auto;
    display: block;   /* imgタグ特有のインライン余白を消す */
    margin: 0;        /* 外側の余白を0に */
    padding: 0;       /* 内側の余白を0に */
    border: none;     /* ボーダーを消す */
}


/* --- ここからセクション2 --- */
/* --- ベースレイアウト --- */
#blkimatsu .section-2.bl-quiz-section { padding: 20px 0 10px; background-color: #78cff1; }
#blkimatsu .section-2 .quiz-frame-wrapper { width: 92%; max-width: 440px; margin: 0 auto; font-family: sans-serif; }
#blkimatsu .section-2 .quiz-container {
    position: relative; background: #fff; border: 8px solid #fff; border-radius: 20px;
    padding: 35px 15px; box-shadow: 0 5px 10px rgba(0,0,0,0.2); min-height: 480px; text-align: center; overflow: hidden;
    background-image: linear-gradient(90deg, rgba(59, 185, 235, 0.1) 1px, transparent 1px), linear-gradient(rgba(59, 185, 235, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* 回答下の注意書き */
#blkimatsu .section-2 .quiz-footer-caution {
    margin-top: 15px;      /* ボタンとの間隔 */
    font-size: 1rem;    /* 小さめの文字サイズ */
    color: #666;           /* 控えめなグレー */
    text-align: center;    /* 中央揃え */
    letter-spacing: -0.02em; /* 必要に応じて文字間隔を調整 */
    line-height: 1.4;
}

/* --- A. 開始画面 --- */
#blkimatsu .section-2 .quiz-header-logo-simple .logo-text {
    color: #fff; font-size: 1.8rem; font-weight: bold; display: inline-block;
    background-color: #3bb9eb; padding: 10px 20px; border-radius: 2px; margin-bottom: 40px; letter-spacing: 0.1em;
}
#blkimatsu .section-2 .btn-start.start-btn-lp {
    background: linear-gradient(to bottom, #ff9d5b, #ff7b2d); color: #fff; font-size: 1.9rem; font-weight: bold;
    padding: 18px 50px; border-radius: 60px; border: none; box-shadow: 0 6px 0 #e65c00; cursor: pointer;
}
#blkimatsu .section-2 .start-guide { margin-top: 30px; font-weight: bold; color: #3f3f3f; line-height: 1.5; font-size: 1.3rem; }

/* --- B. テスト画面 --- */
#blkimatsu .section-2 .question-num { color: #3bb9eb; font-weight: bold; font-size: 2rem; margin-bottom: 10px; }
#blkimatsu .section-2 .question-text { font-size: 1.6rem; color: #444; min-height: 60px; text-align: left; line-height: 1.5; margin-bottom: 15px; }
#blkimatsu .section-2 .question-text a { color: #3bb9eb; text-decoration: underline; }

/* ヒント画像：サイズ固定 */
#blkimatsu .section-2 .hint-image-container { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 12px; min-height: 100px; }
#blkimatsu .section-2 .hint-image-link { display: none; flex: 0 0 44%; max-width: 140px; background: #fff; border: 4px solid #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.15); overflow: hidden; }
#blkimatsu .section-2 .hint-img { width: 100%; height: auto; display: block; }
#blkimatsu .section-2 .hint-text { font-size: 1.5rem; color: #f0627d; font-weight: bold; margin-bottom: 40px; }

/* 回答ボタン（横並び・色分け） */
#blkimatsu .section-2 .btn-container { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }
#blkimatsu .section-2 .choice-btn { 
    flex: 1; padding: 12px 5px; border-radius: 8px; border: 2px solid #333; 
    font-weight: bold; cursor: pointer; transition: 0.1s; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: 0.1em;
}
#blkimatsu .section-2 .btn-orange { background: #ff8c3e; color: #fff; box-shadow: 0 4px 0 #e65c00; border-color: #e65c00; }
#blkimatsu .section-2 .btn-blue { background: #3bb9eb; color: #fff; box-shadow: 0 4px 0 #2a94be; border-color: #2a94be; }
#blkimatsu .section-2 .choice-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #333; }

/* --- C. 結果画面 --- */
#blkimatsu .section-2 .result-header { color: #333; font-weight: bold; margin-bottom: 15px; }
#blkimatsu .section-2 .result-image-link { display: none; width: 100%; margin-top: 10px; text-decoration: none; border: none; outline: none; animation: resultImgPop 0.6s forwards; -webkit-tap-highlight-color: transparent; /* タップ時のハイライトを消す */}
#blkimatsu .section-2 .result-img { width: 100%; height: auto; display: block; padding: 0 0 15px 0; }

/* その他 */
#blkimatsu .section-2 .share-btn { width: 100%; padding: 15px; background: #000; color: #fff; border: none; border-radius: 50px; font-weight: bold; cursor: pointer; margin-top: 20px; font-size: 1.3rem;}
#blkimatsu .section-2 .reload-link { background: none; border: none; color: #3bb9eb; text-decoration: underline; margin-top: 20px; display: block; width: 100%; cursor: pointer;  font-size: 1.5rem;}

/* アニメーション・演出 */
#blkimatsu .section-2 .answer-feedback { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 140px; z-index: 1000; opacity: 0; pointer-events: none; }
#blkimatsu .section-2 .answer-feedback.correct { border: 15px solid rgba(255,123,45,0.6); border-radius: 50%; }
#blkimatsu .section-2 .answer-feedback.incorrect::before, .section-2 .answer-feedback.incorrect::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 15px; background: rgba(59, 185, 235, 0.6); }
#blkimatsu .section-2 .answer-feedback.incorrect::before { transform: rotate(45deg); }
#blkimatsu .section-2 .answer-feedback.incorrect::after { transform: rotate(-45deg); }
@keyframes fadeUp { 0% { opacity: 0; transform: translate(-50%, -30%); } 50% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%); } }
#blkimatsu .section-2 .fade-out-up { animation: fadeUp 0.6s ease-out forwards; }
@keyframes resultImgPop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
#blkimatsu .section-2 .intro-full-img { width: 100%; height: auto; display: block; margin-top: -3px; }

/* --- ここからセクション3 --- */


/* --- セクション3 共通設定 --- */
#blkimatsu .section-3.introduction-area {
    width: 100%;
    /* 背景色を画像（howto.png）の外側の水色に合わせる */
    background-color: #78cff1; 
}

/* コンテナ設定 */
#blkimatsu .section-3 .intro-image-container {
    width: 100%;
    max-width: 770px; /* 画像の元の幅に合わせて調整してください */
    margin: 0 auto;   /* 中央寄せ */
    display: flex;
    flex-direction: column; /* 縦並び */
}

/* 画像の設定：隙間を完全になくす */
#blkimatsu .section-3 .intro-full-img {
    width: 100%;
    height: auto;
    display: block;   /* imgタグ特有のインライン余白を消す */
    margin: 0;        /* 外側の余白を0に */
    padding: 0;       /* 内側の余白を0に */
    border: none;     /* ボーダーを消す */
}

/* --- セクション4 共通設定 --- */

/* --- セクション4 全体 --- */
#blkimatsu .section-4.book-list-section {
    padding: 10px 0px 30px 0px;
}

#blkimatsu .section-4 .book-list-wrapper {
    width: 85%;
    max-width: 420px;
    margin: 0 auto;
    background: #fff;
    
    /* ▼ ここで二重枠を再現 ▼ */
    border: 5px solid #fff;           /* 白い太枠 */
    box-shadow: 
        0 0 6px 2px #c7efff,           /* その外側の細い水色線 */    
        0 0 0 10px #fff,               /* さらにその外側の白い余白 */
        0 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;              /* 角を丸く */
    padding: 5px 15px 10px 25px;
}

/* --- 個別作品 --- */
#blkimatsu .section-4 .book-item {
    display: flex;
    gap: 12px;
    padding: 18px 0;
    border-radius: 1px;
    border-bottom: 2px solid #9fe4ff;
}
#blkimatsu .section-4 .book-item:last-child {
    border-bottom: none;
}

/* 書影（サイズ固定） */
#blkimatsu .section-4 .book-cover {
    flex: 0 0 100px;
}

/* 詳細エリア */
#blkimatsu .section-4 .book-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* タイトル・作者名リンク */
#blkimatsu .section-4 .book-title a {
    font-weight: bold;
    color: #3bb9eb;
    text-decoration: underline;
    line-height: 1.3;
}
#blkimatsu .section-4 .book-author {
    margin-top: 4px;
    font-size: 0.9rem;
    color: #3bb9eb;
}
#blkimatsu .section-4 .book-author a {
    font-size: 1.1rem;
    color: #3bb9eb;
    text-decoration: underline;
}

/* ＃タグ */
#blkimatsu .section-4 .book-tags {
    margin: 8px 0;
    font-size: 1.1rem;
    color: #555;
    font-weight: bold;
}
#blkimatsu .section-4 .book-tags span {
    margin-right: 8px;
    font-size: 1rem;
}

/* プロモーションタグ */
#blkimatsu .section-4 .book-promo-tags {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#blkimatsu .section-4 .tag-coupon {
    display: inline-block;
    background-color: #3bb9eb;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 5px;
    width: fit-content;
}

#blkimatsu .section-4 .tag-row {
    display: flex;
    gap: 4px;
    padding: 0 0 10px 0;
}

#blkimatsu .section-4 .tag-free, 
#blkimatsu .section-4 .tag-discount {
    font-size: 1rem;
    font-weight: bold;
    padding: 1px 10px;
    border-radius: 4px;
    color: #fff;
}
#blkimatsu .section-4 .tag-free { background-color: #f0627d; } /* ピンク */
#blkimatsu .section-4 .tag-discount { background-color: #ff9d5b; } /* オレンジ */

#blkimatsu .section-2 .choice-btn, .section-2 .btn-start {
    -webkit-appearance: none;
    appearance: none;
}

/* --- セクション4 PC表示設定 (768px以上) --- */
@media screen and (min-width: 768px) {
    /* 背景領域の余白調整 */
    #blkimatsu .section-4.book-list-section {
        padding: 20px 0 50px 0;
    }

    /* 作品リストを囲む白い枠のデザイン調整 */
    #blkimatsu .section-4 .book-list-wrapper {
        max-width: 650px !important; /* PC時の最大幅を770pxに変更 */
        width: 95%;                  /* 左右の適度なゆとり */
        display: grid;               /* グリッドレイアウト採用 */
        grid-template-columns: 1fr 1fr; /* 横並び2列にする */
        gap: 0 20px;                 /* 左右の列の間の余白をしっかり確保 */
        padding: 20px;          /* 内側の余白を少し広く */
    }

    /* 個別作品アイテムの境界線 */
    #blkimatsu .section-4 .book-item {
        border-bottom: 2px solid #9fe4ff; /* 2列時も下線を表示 */
    }

    /* 書影サイズが2列時に崩れないよう調整 */
    #blkimatsu .section-4 .book-cover {
        flex: 0 0 130px; /* 画像の土台を確保 */
    }
    
    #blkimatsu .section-4 .book-cover img {
        width: 100%;
        max-width: 180px; /* 画像が大きくなりすぎないよう制限 */
        height: auto;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
    }

    /* 作品タイトルの文字サイズ調整 */
    #blkimatsu .section-4 .book-title a {
        font-size: 1.1rem;
    }
}

/* スマホでは book-list-wrapper は max-width: 420px で 1列 のままになります */
#blkimatsu h2, #blkimatsu h3, #blkimatsu h4, #blkimatsu p, #blkimatsu span{
font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}

/* クーポン非表示パス */
.camTerm, .topLead, .topLead p, .couponArea2022{display: none!important;/*要素を非表示にする*/}