@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
*/

/************************************
 * Cocoon 共通グラデーション
 * 上：薄紫 → 下：薄ピンク
 ************************************/


/* ヘッダー */
.header-container,
.header {
    background: linear-gradient(
        to bottom,
        #E3E5FE 0%,
        #F7E8EE 100%
    ) !important;

    color: #364A79;
}


/* フッター */
.footer,
.footer-bottom {
    background: linear-gradient(
        to bottom,
        #E3E5FE 0%,
        #F7E8EE 100%
    ) !important;

    color: #364A79;
}


/* 記事本文 H2 */
.article h2 {
    background: linear-gradient(
        to bottom,
        #E3E5FE 0%,
        #F7E8EE 100%
    ) !important;

    color: #364A79 !important;
}


/* ウィジェット見出し */
.widget-title {
    background: linear-gradient(
        to bottom,
        #E3E5FE 0%,
        #F7E8EE 100%
    ) !important;

    color: #364A79 !important;
}
/************************************
 * タロット・オラクル
 ************************************/

.tarot-box,
.oracle-box {
    width: 100%;
    box-sizing: border-box;
    margin: 30px auto;
    padding: 35px 25px;
    text-align: center;

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

    border-radius: 12px;
}


.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;
}


/************************************
 * 占いフォーム共通
 *
 * カバラ
 * 個人年
 * 個人月
 * 宿曜
 * 宿曜相性
 ************************************/

.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 {
    padding: 8px 10px;
    margin: 0 5px;

    border: 2px solid #364A79;
    border-radius: 4px;

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

    color: #000;
    background-color: #fff;

    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 {
    content: "";

    position: absolute;
    top: 46%;
    right: 20px;

    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;
    border-bottom-color: #999;

    color: #666;

    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: #364A79;

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


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

    flex-grow: 1;
    height: 1px;

    background: #364A79;
}


.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,
        #F7E8EE
    );

    color: #364A79;

    border: 2px solid #364A79;
    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;
    justify-content: center;
    align-items: 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;
}


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

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

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

}


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

.posts-not-found {
    display: none;
}


.archive-title::before {
    display: none;
}


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

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

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

    .tarot-box,
    .oracle-box {
        padding: 30px 15px;
    }


    .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;
    }

}