/*
 Theme Name:   Twenty Twenty-Five Child
 Template:     twentytwentyfive
 Description:  「名作サクっと！」用の子テーマ。システム屋×司書整理術。
 Author: Hana web lab.
 Version:      1.0.0
*/
/**
 * 2026.01.10 created
 **/

/* コンテンツ幅の指定 */
.wp-site-blocks {
    max-width: 1200px;
    margin: 0 auto;
}

/* サイトサブタイトルの調整 */
.sub-title{
    margin-top: 0.3rem;
    color: #666;
}

 /* 全作品目次のスタイル start --------------------*/
 /* -- ジャンプメニュー */
.msc-jump-menu {
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    border: 1px solid #eee;
}

.msc-jump-link {
    text-decoration: none;
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px 15px;
    border-radius: 4px;
    color: #333;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.msc-jump-link:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}

 /* -- 一覧 */
.msc-work-index {
    margin-top: 2rem;
}

/* 行の見出し（あ・か・さ...） */
.msc-gyo-title {
    background: #f4f4f4;
    padding: 0.5rem 1rem;
    border-left: 5px solid #333;
    margin-top: 3rem;
    font-size: 1.5rem;
}

/* 著者名の見出し */
.msc-author-title {
    margin: 1.5rem 0 1rem 1rem;
    border-bottom: 1px solid #eee;
    font-size: 1.2rem;
}

.msc-author-kana {
    font-weight: normal;
    color: #888;
    font-size: 0.7em;
    margin-left: 0.5rem;
}

/* 作品リスト */
.msc-work-list {
    list-style: none;
    padding-left: 2.5rem;
}

.msc-work-item {
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.msc-work-link {
    font-weight: bold;
    text-decoration: none;
    color: var(--wp--preset--color--contrast);
}

.msc-work-link:hover {
    text-decoration: underline;
}

/* 時代バッジ */
.msc-era-badge {
    font-size: 0.75em;
    background: #e0e0e0;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    display: inline-block;
}
/* 時代未設定バッジ（警告用） */
.msc-era-badge-missing {
    font-size: 0.75em;
    background: #fff0f0; /* 薄い赤 */
    color: #cc0000;      /* 濃い赤 */
    border: 1px solid #ffcccc;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    display: inline-block;
    font-weight: bold;
}

/* 読了時間 */
.msc-reading-time {
    font-size: 0.85em;
    color: #666;
    margin-left: 10px;
}

 /* 全作品目次のスタイル end  --------------------*/

/* 時代別目次用のスタイル start --------------------*/
.msc-era-title {
    background: #eef6ff; /* 時代別は少し色を変える（例：薄い青） */
    padding: 0.5rem 1rem;
    border-left: 5px solid #0056b3;
    margin-top: 3rem;
    font-size: 1.5rem;
}

/* 時代別リスト内の著者名表示 */
.msc-work-author-suffix {
    font-size: 0.85em;
    color: #666;
    margin-left: 8px;
    font-weight: normal;
}
/* 時代別目次用のスタイル end   --------------------*/

/* 読了時間別目次用のスタイル start --------------------*/
.msc-time-title {
    background: #fff9e6;
    padding: 0.5rem 1rem;
    border-left: 5px solid #ffb900;
    margin-top: 3rem;
    font-size: 1.5rem;
}

/* 読了時間の強調（目次内） */
.msc-time-badge {
    font-size: 0.85em;
    background: #fff;
    border: 1px solid #ffb900;
    color: #cc9900;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 8px;
}
/* 読了時間別目次用のスタイル end  --------------------*/


/* インデックスページ共通ナビゲーション start --------------------*/
.msc-index-nav {
    display: flex;
    justify-content: center;
    gap: 40px; /* 広めの余白 */
    margin-bottom: 4rem;
    border-bottom: 1px solid #ddd;
}

.msc-nav-item {
    text-decoration: none;
    padding: 15px 5px;
    color: #888;
    font-size: 1rem;
    position: relative;
    transition: color 0.3s;
    border-radius: 4px 4px 0 0; /* 角を少し丸くすると優しい印象に */
    outline: none;
}

/* ホバー時は少しだけ色を出す */
.msc-nav-item:hover {
    color: #333;
}

/* 選択中のタブ：下線で強調 */
.msc-nav-item.is-active {
    font-weight: bold;
}

.msc-nav-item.is-active::after {
    content: "";
    position: absolute;
    bottom: -1px; /* 親のborder-bottomに重ねる */
    left: 0;
    width: 100%;
    width: 100%;
    height: 4px; /* 下線を少し太くして色を際立たせる */
}

/* --- タブ個別のホバー色設定 --- */

/* 著者：グレー（常にグレーでホバー） */
.msc-nav-authors:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
}
.msc-nav-authors.is-active::after {
    background: #333;
}

/* 時代：青（どのページにいても、ここに乗せると青くなる） */
.msc-nav-history:hover {
    background-color: rgba(0, 86, 179, 0.05);
    color: #0056b3;
}
.msc-nav-history.is-active::after {
    background: #0056b3;
}

/* 読了時間：オレンジ（どのページにいても、ここに乗せるとオレンジになる） */
.msc-nav-reading-time:hover {
    background-color: rgba(255, 185, 0, 0.08);
    color: #cc9900;
}
.msc-nav-reading-time.is-active::after {
    background: #ffb900;
}

/* アクティブ時の文字色固定（下線の色に合わせる） */
.msc-nav-authors.is-active { color: #333; }
.msc-nav-history.is-active { color: #0056b3; }
.msc-nav-reading-time.is-active { color: #cc9900; }

/* アンカーで飛んできた瞬間のスタイル */
.msc-era-title:target {
    animation: msc-section-focus 2.5s cubic-bezier(0.25, 1, 0.5, 1);
    scroll-margin-top: 100px; /* ヘッダーに被らないための余白 */
}

@keyframes msc-section-focus {
    0% {
        background-color: #d1e7ff; /* はっきりとした青 */
        border-left-width: 15px;    /* ボーダーをグッと太く */
        transform: translateX(10px); /* 少し右に押し出す */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    30% {
        background-color: #d1e7ff;
        border-left-width: 15px;
        transform: translateX(10px);
    }
    100% {
        background-color: #eef6ff; /* 元の背景色 */
        border-left-width: 5px;     /* 元の太さ */
        transform: translateX(0);    /* 元の位置 */
        box-shadow: none;
    }
}
/* インデックスページ共通ナビゲーション end --------------------*/

/* フッター全体の調整（TTFのブロック設定でも可能ですが、細部はCSSで） */
footer {
    border-top: 1px solid #eee;
    padding-top: 2rem;
    padding-bottom: 3rem;
    font-size: 0.9rem;
}

/* おみくじボタン start ---------------------- 
 * 主にフッターパターン。サイドのものは別途微調整
*/
.msc-random-box {
    text-align: center;
    padding: 0.5rem;
    background: #fdfaf5; /* 柔らかい紙の色 */
    border: 2px dotted #cc9900;
    border-radius: 8px;
    width: 70%;
}

.msc-random-label {
    margin-bottom: 10px;
    color: #666;
    font-size: 0.8rem;
}

.msc-random-button {
    display: inline-block;
    padding: 10px 20px;
    background: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: transform 0.2s;
}

.msc-random-button:hover {
    transform: translateY(-2px);
    background: #000;
}

@media (max-width: 600px) {
    footer .msc-random-box {
        display: none;
    }
    footer .my-footer-links{
        padding-top: 2rem;
        gap: 2rem;
    }
}
/* おみくじボタン end   ---------------------- */

/* コピーライト start ------------------------ */
.msc-copyright {
    font-size: 0.8rem;
    color: #888;
    text-align: center;
    padding: 2rem 0 0;
    border-top: 1px solid #f0f0f0;
    margin-top: 2rem;
    letter-spacing: 0.05em; /* 文字間隔を少し広げて上品に */

    width: 100%;
    max-width: unset;
}

/* リンク部分 */
.msc-copy-author a {
    color: #666;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid #ddd;
    transition: all 0.3s ease;
}
.msc-copy-author a:hover {
    color: #000;
    border-bottom-color: #000;
}

/* サブタイトルを少し細く、あるいは薄くする演出 */
.msc-copy-subtitle {
    font-size: 0.75rem;
    opacity: 0.8;
    margin: 0 5px;
}

/* スマホでは改行させるなどの調整も可能 */
@media (max-width: 600px) {
    .msc-copyright span {
        display: inline-block; /* 適切な場所で折り返しやすくする */
    }
}
/* コピーライト end   ------------------------ */

/* サイドバー要素の調整 starat ------------------------ */
.my-sidebar form.sid-serch button[type="submit"]{
    margin-left: 0.5rem;
}

.my-sidebar .wp-block-search__inside-wrapper{
    width: 90%;
    margin: 1rem auto;
}
@media (max-width: 600px) {
    .my-sidebar {
        margin: 0 auto;
        width: 90%;
        text-align: center;
        padding: 1rem 0 !important;
        border-top: solid 1px #eee;
    }
    .my-sidebar .msc-random-box {
        font-size: 16px;
    }
}
/* サイドバー要素の調整 end   ------------------------ */

/* TOPページのナビゲーションのスタイル start -------------*/
/* ナビゲーションの親コンテナ */
.msc-nav-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0;
}

/* 個別のナビアイテム */
.msc-nav-item {
    display: flex;
    flex-direction: column; /* 縦へ */
    align-items: center;
    text-align: center;     /* テキストも中央揃え */
    padding: 1.5rem 1rem;     /* 上下の余白を少し広めに */
    background: #fdfcf8; /* 非常に薄い和紙のような色 */
    border: 1px solid #d3cfc1;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
    border-radius: 4px;
}

.msc-nav-item:hover {
    background: #f4f1e6;
    border-color: #8c7b52;
    transform: translateY(-3px);
}

.msc-nav-icon {
    font-size: 2.5rem;      /* 縦並びなので少し大きくしても映えます */
    margin-bottom: 15px;    /* 下（テキストとの間）に余白を作る */
}

.msc-nav-title {
    margin: 0 0 5px 0;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: #332f21;
}

.msc-nav-desc {
    margin: 0;
    font-size: 0.85rem;
    color: #777;
    line-height: 1.5;
}


/* モバイル対応：縦並び */
@media (max-width: 768px) {
    .msc-nav-wrapper {
        grid-template-columns: 1fr;
        gap: 12px; /* スマホでは間隔を少し詰める */
    }
    .msc-nav-item {
        flex-direction: row; /* 横並びに戻す */
        align-items: center; /* 垂直方向を中央に */
        text-align: left;    /* 左揃えに戻す */
        padding: 15px 20px;  /* 上下を少しスリムに */
    }

    .msc-nav-icon {
        font-size: 2rem;     /* スマホでは少し控えめに */
        margin-bottom: 0;    /* 下の余白を消す */
        margin-right: 20px;  /* 右（テキストとの間）に余白を作る */
    }

    .msc-nav-text {
        flex: 1; /* 残りの幅をすべて使う */
    }
}
/* TOPページのナビゲーションのスタイル end   ------------- */

/* 最新投稿3件のエリアのスタイル start ------------------ */
/* 3枚のカードを横に並べる親コンテナ */
.msc-works-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 均等に3分割 */
    gap: 20px; /* カード同士の間隔 */
    margin: 40px 0;
}

/* カード自体のスタイル */
.msc-card {
    background: #fff;
    border: 1px solid #d3cfc1; /* 落ち着いた古紙のような色 */
    transition: all 0.3s ease;
    border-radius: 4px;
}
.msc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.msc-card a {
    display: flex;
    flex-direction: column; /* PCは画像が上、テキストが下 */
    text-decoration: none;
    color: inherit;
    /* display: block; */
}
.msc-card-figure {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;

    /* background: #f0f0f0;
    border-bottom: 1px solid #eee; */
}
.msc-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.msc-card-body {
    padding: 20px;
}
.msc-card-title {
    margin: 12px 0 0;
    font-size: 1.15rem;
    line-height: 1.5;
    font-weight: 600;
}

/* バッジ：時代ごとに色を変える場合はここに追加 */
.msc-card-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: #333; /* デフォルトは黒系 */
    color: #fff;
    border-radius: 2px;
}

.msc-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e0dcd0;
    font-size: 0.85rem;
    color: #555;
}

/* 一言で言うと欄 */
.msc-card-catch {
    font-size: 0.9rem;
    color: #8c7b52; /* 少し色を変えてキャッチコピー風に */
    /* font-weight: bold; */
    margin-bottom: 10px;
    line-height: 1.4;
}

/* モバイル対応：画面が狭いときは1列に */
@media (max-width: 768px) {
    .msc-works-wrapper {
        grid-template-columns: 1fr;
        gap: 12px; /* スマホではカード同士の間隔を少し詰める */
    }
    .msc-card a {
        flex-direction: row; /* 横並びに変更 */
        align-items: flex-start;
    }
    .msc-card-figure {
        width: 120px;       /* サムネイルの幅を固定 */
        min-width: 120px;   /* 潰れないように固定 */
        aspect-ratio: 1 / 1; /* スマホでは正方形にすると収まりが良い */
        margin: 10px;       /* 少し内側に余白 */
        border-radius: 4px;
    }

    .msc-card-body {
        padding: 10px 15px 10px 5px; /* 右側のテキストエリアの余白調整 */
        flex: 1;
    }

    .msc-card-title {
        font-size: 1rem;     /* スマホではタイトルを少し小さく */
        margin: 0 0 5px 0;
    }

    .msc-card-catch {
        font-size: 0.8rem;   /* one_sentenceもスマホ用に調整 */
        margin-bottom: 8px;
    }

    .msc-card-footer {
        margin-top: 8px;
        padding-top: 8px;
        font-size: 0.75rem;
    }
}
/* 最新投稿3件のエリアのスタイル end   ------------------ */



/* 外部リンク用ボタン */
.msc-btn-container {
    margin: 20px 0;
}

.msc-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: bold;
    transition: all 0.2s ease;
    border: 1px solid rgba(0,0,0,0.1);
}

.msc-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    opacity: 0.9;
}

/* 各ボタンの色付け（お好みで調整してください） */
.msc-btn-aozora { background-color: #5c8d89; color: #fff !important; } /* 青磁色っぽく */
.msc-btn-calil  { background-color: #8c7b52; color: #fff !important; } /* 落ち着いた茶色 */
.msc-btn-shop   { background-color: #d9a62e; color: #fff !important; } /* 山吹色（購入感） */
.msc-btn-default { background-color: #f0f0f0; color: #333 !important; }


/* CF7用のスタイル start ---------------------------- */
.msc-contact-form input[type="text"],
.msc-contact-form input[type="email"],
.msc-contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #d3cfc1;
    border-radius: 4px;
    background: #fdfcf8;
    margin-top: 5px;
}

.msc-contact-form input[type="submit"] {
    background-color: #8c7b52;
    color: #fff;
    border: none;
    padding: 12px 40px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: opacity 0.2s;
}

.msc-contact-form input[type="submit"]:hover {
    opacity: 0.8;
}
/* CF7用のスタイル start ---------------------------- */


/* IDの位置にスクロールした際、上部に60pxの余白を作る例 */
#read-now {
  scroll-margin-top: 60px;
}