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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
@media screen and (min-width: 481px) {
    .smapho-disp {
        display: none
    }

    #banner-section {
        position: fixed;
        left: calc(70vw);
        width: calc(29vw);
        height: calc(24.2vw);
        bottom: 10px;
        background-image: url("/wp-content/uploads/2024/10/banner-bg.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size:contain;
        text-align: center;
        padding-top:calc(1vw);
    }

    #banner-section>div:nth-child(1) {
        font-family: "Zen Maru Gothic", serif;
        line-height: calc(2vw);
        font-size: calc(1.2vw);
        font-weight: 900;
    }

    #banner-section>div:nth-child(2) {
        padding-top: calc(1vw);
        font-family: "Noto Sans JP", sans-serif;
        font-size: calc(1vw);
    }

    #banner-section>div:nth-child(3) {
        padding-top: 0;
        padding-bottom: calc(0.75vw);
        font-family: "Noto Sans JP", sans-serif;
        font-size: calc(1vw);
    }

    #banner-section>div:nth-child(3)>span {
        font-size: calc(1.2vw);
        line-height: calc(2vw);
    }

    #banner-section>div:nth-child(4) img {
        width: calc(16vw);
    }
}

@media screen and (max-width: 480px) {
    .pc-disp {
        display: none
    }

    #banner-section {
        position: fixed;
        left: calc(0);
        width: calc(100vw);
        height: calc(70vw);
        bottom: 10px;
        background-image: url("/wp-content/uploads/2024/10/banner-bg.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size:contain;
        text-align: center;
        padding-top:calc(3vw);
    }

    #banner-section>div:nth-child(1) {
        font-family: "Zen Maru Gothic", serif;
        line-height: calc(4vw);
        font-size: calc(3.6vw);
        font-weight: 900;
    }

    #banner-section>div:nth-child(2) {
        padding-top: calc(3vw);
        font-family: "Noto Sans JP", sans-serif;
        font-size: calc(3vw);
    }

    #banner-section>div:nth-child(3) {
        padding-top: 0;
        padding-bottom: calc(2.25vw);
        font-family: "Noto Sans JP", sans-serif;
        font-size: calc(3vw);
    }

    #banner-section>div:nth-child(3)>span {
        font-size: calc(3.6vw);
        line-height: calc(6vw);
    }

    #banner-section>div:nth-child(4) img {
        width: calc(50vw);
    }

    }


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
    /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px) {
    /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px) {
    /*必要ならばここにコードを書く*/
}