@charset "UTF-8";
        /*!
Theme Name: Cocoon MusicJam
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
        /*必要ならばここにコードを書く*/
        /*フッター非表示*/
        
        #footer {
            display: none;
        }
        /*「トップへ戻る」ボタン非表示*/
        
        #page_top {
            display: none;
        }
        /*スマホ・PC表示切替*/
        
        body .sp-item {
            display: none !important;
        }
        
        @media screen and (max-width: 640px) {
            body {
                min-width: inherit;
                height: 100%;
            }
            body .sp-item {
                display: block !important;
            }
            body .pc-item {
                display: none !important;
            }
            body .sp-item img {
                width: 100%;
            }
        }
        /****** 固定ボタン ******************/
        
        .btn_area {
            width: 100%;
            display: flex;
            justify-content: right;
            position: fixed;
            bottom: 0px;
            right: 0px;
            padding: 0px 0px;
        }
        
        .btn_area .btn_form,
        .btn_area .btn_tel {
            width: 360px;
            height: 90px;
            color: #fff;
            font-feature-settings: "palt";
            font-weight: 500;
            display: flex;
            align-items: center;
            margin: 0;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
        
        .btn_area a {
            background-color: #d22e59;
            font-size: 29px;
            letter-spacing: 2px;
            text-decoration: none;
        }
        
        .btn_form {
            justify-content: space-between;
            padding: 0px 10px 0px 50px;
        }
        
        .btn_area .btn_form img {
            width: 42px;
        }
        
        .btn_area .btn_form img:last-of-type {
            width: 30px;
        }
        
        .btn_area .btn_tel img {
            width: 30px;
            margin-right: 10px;
            padding-top: 5px;
        }
        
        .btn_area .btn_tel {
            background-color: #023d93;
            font-size: 35px;
            letter-spacing: 1px;
            justify-content: center;
        }
        
        .btn_area a:hover {
            opacity: 0.9;
        }
        /****** 固定ボタン ******************/
        
        @media screen and (max-width: 640px) {
            .btn_area {
                width: 100%;
                justify-content: center;
            }
            .btn_area .btn_form,
            .btn_area .btn_tel {
				width:100%;
 				height: 100%
				text-align: center;
				padding-bottom: 0;

            }
            .btn_area a {
				width: 100%;
                font-size: 15px;
                letter-spacing: 2px;
            }
        }
        
        .btn_form {
            justify-content: space-between;
            padding: 8% 2% 8% 8%;
        }
        
        .btn_area .btn_form img {
            width: 28px;
        }
        
        .btn_area .btn_tel img {
            width: 18px;
            padding-top: 3px;
            margin-right: 0;
        }
        
        .btn_area .btn_form img:last-of-type,
        .btn_area .btn_tel img:last-of-type {
            width: 16px;
        }
        
        .btn_area .btn_tel img:last-of-type {
            padding-bottom: 3px;
        }
        
        .btn_area a .btn_tel {
            background-color: #023d93;
            font-size: 16px;
            justify-content: space-between;
            padding: 9% 5% 8% 8%;
        }
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
        /*1023px以下*/
        
        @media screen and (max-width: 1023px) {
            .btn_area {
width: 100%;
display: flex;
justify-content: space-between;
z-index: 100;
padding-bottom: 0;
            }
            /*834px以下*/
            @media screen and (max-width: 834px) {
                .btn_area {
                    width: 100%;
                }
            }
            /*640px以下*/
            @media screen and (max-width: 640px) {}
            /*480px以下*/
            @media screen and (max-width: 480px) {
            .btn_area {
width: 100%;
display: flex;
justify-content: space-between;
z-index: 100;
padding-bottom: 0;
            }
                /*375px以下*/
                @media screen and (max-width: 375px) {
                    .btn_area {
                        width: 100%;
                        height: auto;
                    }
                }