@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/


/************************************
 * 共通カラー
 ************************************/

:root {
    --sl-main: #364A79;
    --sl-grad-top: #E3E5FE;
    --sl-grad-bottom: #F7E8EE;
    --sl-link: #0066cc;
    --sl-border: #ddd;
    --sl-text: #555;
    --sl-gold: #a98c4e;
}


/************************************
 * Cocoon 共通グラデーション
 ************************************/

.header-container,
.header,
.footer,
.footer-bottom,
.article h2,
.widget-title {
    background: linear-gradient(
        to bottom,
        var(--sl-grad-top) 0%,
        var(--sl-grad-bottom) 100%
    ) !important;

    color: var(--sl-main) !important;
}

/* H3見出し：紫からピンクのグラデーション下線 */
.article h3 {
    background: transparent;
    border: none;
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(
        to right,
        var(--sl-grad-top),
        var(--sl-grad-bottom)
    ) 1;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 12px;
    margin-top: 2em;
    margin-bottom: 1em;
}


/* 記事一覧のサムネイル左上のカテゴリー名を非表示 */
.entry-card-thumb .cat-label {
    display: none;
}


/************************************
 * Cocoon ナビカード
 * 占い一覧 共通
 ************************************/

.uranai-ichiran {
    display: grid;
}


/* カード */
.uranai-ichiran .navi-entry-card-link {
    display: block;

    height: 100%;

    box-sizing: border-box;

    background: #fff;

    border: 1px solid var(--sl-border);
    border-radius: 4px;

    overflow: hidden;

    color: inherit;
    text-decoration: none;

    transition:
        opacity .3s ease,
        box-shadow .3s ease;
}


.uranai-ichiran .navi-entry-card-link:hover {
    opacity: .85;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, .08);
}


/* カード本体 */
.uranai-ichiran .navi-entry-card {
    display: flex;
    flex-direction: column;

    height: 100%;
}


/* アイキャッチ */
.uranai-ichiran .navi-entry-card-thumb {
    margin: 0;
    padding: 0;
}


.uranai-ichiran .navi-entry-card-image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}


/* Cocoonが出力する余計なbr対策 */
.uranai-ichiran .navi-entry-card-thumb + br {
    display: none;
}


/* 本文部分 */
.uranai-ichiran .navi-entry-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
}


/* タイトル */
.uranai-ichiran .navi-entry-card-title {
    margin: 0;
    padding: 10px 12px 6px;

    color: var(--sl-link) !important;

    font-weight: bold;
    line-height: 1.5;

    text-align: center;
}


/************************************
 * トップページ 占い一覧
 ************************************/

.uranai-top {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}


.uranai-top .navi-entry-card-title {
    font-size: 18px;
}


.uranai-top .navi-entry-card-snippet {
    margin: 0;
    padding: 0 16px 16px;

    color: var(--sl-text);

    font-size: 14px;
    line-height: 1.7;

    text-align: left;
}

/************************************
 * サイドバー 占い一覧
 ************************************/

.uranai-side {
    grid-template-columns: 1fr;
    gap: 12px;
}

/* サイドバーではカードの高さを内容に合わせる */
.sidebar .uranai-side .navi-entry-card-link,
.sidebar .uranai-side .navi-entry-card {
    height: auto;
}

.sidebar .uranai-side .navi-entry-card-content {
    display: block;
    flex: none;
    margin: 0;
    padding: 0;
}

/* 説明文は非表示 */
.sidebar .uranai-side .navi-entry-card-snippet {
    display: none !important;
}

/* 占いタイトル */
.sidebar .uranai-side .navi-entry-card-title {
    margin: 0;
    padding: 10px 6px 12px;

    color: var(--sl-link) !important;

    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;

    text-align: center;
}

/* サイドバー見出し */
.sidebar .widget-title {
    text-align: center;
}


/************************************
 * 占い結果のカッコ
 ************************************/

.feature {
    margin: 24px auto 36px;
    padding: 15px;

    background: radial-gradient(
        #fff,
        #c2e4e5
    );

    text-shadow:
        -1px 1px 0 rgba(255, 255, 255, 1);
}


.parenthesis {
    position: relative;

    width: 85%;

    margin: 24px auto 30px;
    padding: 10px;

    box-sizing: border-box;

    color: var(--sl-gold);

    font-size: 20px;
    font-weight: 700;

    text-align: center;
}


.parenthesis::before,
.parenthesis::after {
    position: absolute;

    content: "";

    width: 15px;
    height: 25px;

    box-sizing: border-box;
}


.parenthesis::before {
    top: 0;
    left: 0;

    border-top: 1.5px solid var(--sl-gold);
    border-left: 1.5px solid var(--sl-gold);
}


.parenthesis::after {
    right: 0;
    bottom: 0;

    border-right: 1.5px solid var(--sl-gold);
    border-bottom: 1.5px solid var(--sl-gold);
}


/************************************
 * 占い共通・水色グラデーションボックス
 *
 * すべての占いページで class="sl-fortune-box" を使用する。
 * 既存のタロット・オラクル用クラスは移行期間中も有効。
 ************************************/

.sl-fortune-box,
.tarot-box,
.oracle-box {
    width: 100%;

    margin: 30px auto;
    padding: 35px 25px;

    box-sizing: border-box;

    background: radial-gradient(
        circle,
        #ffffff 0%,
        #eaf7f8 45%,
        #c4e5e6 100%
    );

    border-radius: 12px;

    text-align: center;
}


/* タロット・オラクルのカード画像 */
.sl-fortune-box input.card,
.tarot-box .card,
.oracle-box .card {
    display: block;

    width: 200px;
    max-width: 70%;
    height: auto;

    margin: 25px auto 0;
    padding: 0;

    border: none;

    cursor: pointer;
}
/************************************
 * モバイルヘッダー
 ************************************/

.mobile-header-menu-buttons {
    background: #E3E5FE !important;
}

/* 通常のアイコン・文字 */
.mobile-header-menu-buttons .menu-icon,
.mobile-header-menu-buttons .menu-caption {
    color: #364A79;
}

/* MENUボタンだけ紺色 */
.mobile-header-menu-buttons .navi-menu-button {
    background: #364A79 !important;
}

/* MENUボタンの文字・アイコンは白 */
.mobile-header-menu-buttons .navi-menu-button .menu-icon,
.mobile-header-menu-buttons .navi-menu-button .menu-caption {
    color: #fff !important;
}

.mobile-header-menu-buttons {
    box-shadow: none !important;
    border-bottom: none !important;
}

/************************************
 * 占いフォーム 共通
 ************************************/

.select_box {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.form-select-wrap {
    display: flex;

    align-items: center;
    justify-content: center;

    max-width: 300px;

    margin: 30px auto;
}


.form-select-wrap > select {
    margin: 0 5px;
    padding: 8px 10px;

    background-color: #fff;

    color: #000;

    border: 2px solid var(--sl-main);
    border-radius: 4px;

    font-size: 16px;
    font-weight: bold;

    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}


/************************************
 * 西暦
 ************************************/

#birthYear,
#nenBirthYear,
#nenTargetYear,
#tsukiBirthYear,
#tsukiTargetYear,
#shukuBirthYear,
#aishoBirthYear1,
#aishoBirthYear2 {
    width: 100px;
    min-width: 100px;
}


/************************************
 * 月・日
 ************************************/

#birthMonth,
#birthDay,
#nenBirthMonth,
#nenBirthDay,
#tsukiBirthMonth,
#tsukiBirthDay,
#shukuBirthMonth,
#shukuBirthDay,
#aishoBirthMonth1,
#aishoBirthDay1,
#aishoBirthMonth2,
#aishoBirthDay2 {
    width: 68px;
    min-width: 68px;
}


/************************************
 * 個人月運数 対象月
 ************************************/

#tsukiTargetMonth {
    width: 72px;
    min-width: 72px;
}


/************************************
 * エラーメッセージ
 ************************************/

.error-message {
    margin: 20px auto;
    padding: 5px;

    color: red;

    font-size: 16px;
    font-weight: bold;

    text-align: center;
}


/************************************
 * 占うボタン
 ************************************/

button.btn {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 250px;

    padding: .9em 2em;

    background: linear-gradient(
        #C4B184,
        #EEE7DC,
        #C4B184
    );

    color: #5B4A25;

    border: none;
    border-bottom: 5px solid #5B4A25;
    border-radius: 25px;

    font-size: 1.2em;
    font-weight: bold;

    cursor: pointer;

    transition: opacity .3s ease;
}


button.btn::after {
    position: absolute;

    top: 46%;
    right: 20px;

    content: "";

    width: 5px;
    height: 5px;

    border-top: 3px solid #5B4A25;
    border-right: 3px solid #5B4A25;

    border-radius: 1px;

    transform:
        rotate(45deg)
        translateY(-50%);
}


button.btn:hover {
    opacity: .7;
}


button.btn:disabled {
    background: #ccc;

    color: #666;

    border-bottom-color: #999;

    cursor: not-allowed;

    opacity: .5;
}


button.btn:disabled::after {
    border-color: #999;
}


/************************************
 * 占い一覧 共通見出し
 ************************************/

.entry-catetagbox {
    max-width: 100%;

    margin: 20px auto;
    padding: 8px 0;

    text-align: center;
}


.keyword-title {
    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    color: var(--sl-main);

    font-size: 18px;
    font-weight: bold;
}


.keyword-title::before,
.keyword-title::after {
    content: "";

    flex-grow: 1;

    height: 1px;

    background: var(--sl-main);
}


.keyword-title::before {
    margin-right: .4em;
}


.keyword-title::after {
    margin-left: .4em;
}


/************************************
 * 運命数・個人年・個人月・宿曜
 ************************************/

.uranai_item {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    margin: 0 auto;
    padding: 0;

    list-style: none;
}


/************************************
 * 一覧ボタン 共通
 ************************************/

.uranai_koumoku a {
    display: block;

    padding: 7px 12px;

    background: linear-gradient(
        to bottom,
        #E5E6FD,
        var(--sl-grad-bottom)
    );

    color: var(--sl-main);

    border: 2px solid var(--sl-main);
    border-radius: 50px;

    font-size: 14px;
    font-weight: bold;

    text-align: center;
    text-decoration: none;

    transition: opacity .3s ease;
}


.uranai_koumoku a:hover {
    opacity: .7;
}


/************************************
 * タロット・オラクル一覧
 ************************************/

.uranai_item-flex {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 12px;

    width: 100%;

    margin: 0 auto;
    padding: 0;

    list-style: none;
}


.uranai_item-flex .uranai_koumoku {
    width: auto;

    margin: 0;
}


.uranai_item-flex .uranai_koumoku a {
    display: inline-block;

    width: auto;

    white-space: nowrap;
}


/************************************
 * Cocoon カテゴリ表示
 ************************************/

.posts-not-found,
.archive-title::before {
    display: none;
}


/************************************
 * PC
 ************************************/

@media screen and (min-width: 768px) {

    /* 運命数・個人年・個人月・宿曜：6列 */
    .uranai_item {
        grid-template-columns:
            repeat(6, 1fr);
    }

}


/************************************
 * タブレット・スマートフォン
 ************************************/

@media screen and (max-width: 768px) {

    /* トップ占い一覧：1列 */
    .uranai-top {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .uranai-top .navi-entry-card-title {
        font-size: 17px;
    }


    /* サイドバーは本文下で2列 */
    .uranai-side {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .uranai-side .navi-entry-card-title {
        padding: 7px 4px 9px;

        font-size: 13px;
    }

}


/************************************
 * スマートフォン
 ************************************/

@media screen and (max-width: 480px) {

    /* 占い共通ボックス */
    .sl-fortune-box,
    .tarot-box,
    .oracle-box {
        padding: 30px 15px;
    }

    /* タロット・オラクルのカード画像 */
    .sl-fortune-box input.card,
    .tarot-box .card,
    .oracle-box .card {
        width: 180px;
        max-width: 75%;
    }


    /* 占いフォーム */

    .form-select-wrap {
        margin: 20px auto;
    }


    .form-select-wrap > select {
        margin: 0 2px;

        padding-left: 5px;
        padding-right: 5px;
    }


    /* 西暦 */

    #birthYear,
    #nenBirthYear,
    #nenTargetYear,
    #tsukiBirthYear,
    #tsukiTargetYear,
    #shukuBirthYear,
    #aishoBirthYear1,
    #aishoBirthYear2 {
        width: 92px;
        min-width: 92px;
    }


    /* 月・日 */

    #birthMonth,
    #birthDay,
    #nenBirthMonth,
    #nenBirthDay,
    #tsukiBirthMonth,
    #tsukiBirthDay,
    #shukuBirthMonth,
    #shukuBirthDay,
    #aishoBirthMonth1,
    #aishoBirthDay1,
    #aishoBirthMonth2,
    #aishoBirthDay2 {
        width: 64px;
        min-width: 64px;
    }


    /* 個人月運数の対象月 */

    #tsukiTargetMonth {
        width: 70px;
        min-width: 70px;
    }


    /* タロット・オラクル一覧 */

    .uranai_item-flex {
        gap: 10px;
    }


    .uranai_item-flex
    .uranai_koumoku a {
        padding: 6px 12px;
    }

}