@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*メニューエリア ここから */
nav#navi, .menu-header .sub-menu {
    font-weight: bold;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #f7be16), color-stop(0.00, #fffcc1));
    background: -webkit-linear-gradient(#fffcc1, #f7be16);
    background: -moz-linear-gradient(#fffcc1, #f7be16);
    background: -o-linear-gradient(#fffcc1, #f7be16);
    background: -ms-linear-gradient(#fffcc1, #f7be16);
    background: linear-gradient(#fffcc1, #f7be16);
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.8);
}

#navi .navi-in a:hover {
    background-color: rgba( 200, 200, 200, 0.55 );
    color: #000;
}

.menu-header .sub-menu .item-label{
    font-size: 80%;
}
.navi-in > ul li {
    width: 130px;
}

.menu-header .item-label{
    font-size: 110%;
    color: #525252 !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
    color: #888 !important;
    background-color: rgba( 200, 200, 200, 0.55 );
    border-bottom: 4px solid #5eaaff;
    transition: all .2s ease;
}

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
    border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
    color: #888 !important;
    transition: all .2s ease;
}

.slicknav_menu {
    background-color:#f7be16; /*ヘッダーメニューの背景色を変更*/
}

.slicknav_menu .slicknav_menutxt {
    color:#525252; /*ヘッダーメニューボタンのフォントの色を変更*/
    text-shadow:none; /*ヘッダーメニューボタンのテキストの影を非表示*/
}

.slicknav_btn {
    background-color:#fff; /*ヘッダーメニューボタンの背景色を変更*/
    box-shadow:0 3px 6px rgba(0,0,0,0.2) /*ヘッダーメニューボタンに影をつける*/
}

.slicknav_nav a {
    color:#525252; /* メニュー内リンクの文字色を変更 */
}
/*メニューエリア ここまで */




/* ヘッダーロゴの左寄せ */
.logo-header{
    text-align:left !important;
    margin-left:10px !important;
    padding-top:0px;
    padding-bottom:0px;
}




/* アピールエリア ここから */
#appeal{
    width: 100%;
    height: 0;
    /* (画像の高さ / 画像の横幅) × 100 */
    padding-top: 32.82275711159737%;
    background: url(../../uploads/2019/07/index_img01.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

}
.appeal-content{
    display:none;
}
/* アピールエリア ここまで */




/* h2タグの位置調整 */
.article h2 {
    margin-top:0px;
}




/* メインエリア 背景をなしに */
#main {
    background:none;
}




/* 1枚画像用中央寄せ */
.top-img1 {
    text-align:center;
    margin-bottom: 20px;
}

/* 1枚画像用中央寄せ */
.top-img2 {
    text-align:center;
    margin-bottom: 40px;
}

.btn { 
    background-color:#fff; /*ヘッダーメニューボタンの背景色を変更*/

}



/* 右寄せレスポンシブ対応 */
.alignright2 {
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
}




/* トップページトピックス用 ここから */
.topix h2{
    border-bottom: double 5px #adcce8;
}

.topix ul{
    font: 16px/1.6 'arial narrow', sans-serif;
    padding: 10px 10px 20px;
    color: #448ccb;
    background: #ffffff;
    border: solid 2px #adcce8;
    border-radius: 5px;
    list-style: none;
}
.topix ul li{
    position: relative;
    line-height: 30px;
    padding-left: 20px;
    font-weight: bold;
    border-bottom: dashed 1px #448ccb;
}
.topix ul li:before{
    content: "・";
    position: absolute;
    left: 0px;
}
/* トップページトピックス用 ここまで */




/* トップページ 画像並列用 ここから */
.top_area1 {
    margin-top:20px;
    width:310px;
    text-align:center;
}

.top_area1_text {
    font-size:80%;
    padding-left:18px;
}

.top_area2 {
    width:500px;
    text-align:center;
}



[class^="img-flex-"] {
    margin-bottom: 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.img-flex-2-2 > img,
.img-flex-2-2 a { width: 210px; height: 170px; }
.img-flex-2-3 > img,
.img-flex-2-3 a { width: 210px; height: 190px; }
.img-flex-2 > img,
.img-flex-2 a { width: 49%; height: 49%; }
.img-flex-3 > img,
.img-flex-3 a { width: 33%; height: 33%; }
.img-flex-4 > img,
.img-flex-4 a { width: 24%; height: 24%; }
/* トップページ 画像並列用 ここまで */




/* PCスマホ画像切替用 */
.pc-mode { display: block !important; }
.sp-mode { display: none !important; }




/* コメントエリア用 */
#comment-area {
    display:none;
}




/* 投稿更新時間用 */
.post-update {
    display:none;
}
.post-date {
    display:block;
}




/* 固定ページの投稿日時、エントリータイトル削除 */
.page .date-tags,
.page .author-info,
.page .entry-title {
    display: none;
} 




/* テキストボックス装飾用 ここから */
.textbox1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #F2F2F2;
}

.textbox1 p {
    margin:0;
    padding:0;
}
/* テキストボックス装飾用 ここまで */




/* サイドバー上下幅調整 */
.custom-html-widget {
    margin-top:10px;
    margin-bottom:0px;
}




/* shop-calendarプラグイン整形用 ここから */
.holiday {
    color:black !important;
    background:#ffc0cb !important;
}

.sunday {
    color:red;
}

.saturday {
    color:blue;
}

.shop-calendar-table td {
    background:#fff;
}

.shop-calendar-table {
    height:200px;
}

.holiday-caption {
    caption-side:bottom;
    text-align:left;
    font-size:18px;
}

div.holidaybox{
    margin-top:5px;
    background-color:#ffc0cb;
    width:20px;
    height:20px;
    float:left;
}

.holidaybox2{
    margin-top:6px;
    font-size:16px;
}
/* shop-calendarプラグイン整形用 ここまで */




/* google mapレスポンシブ対応 ここから */
.ggmap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* google mapレスポンシブ対応 ここまで */




/* 沿革用 ここから */
.timeline {
    list-style: none;
    margin-bottom:50px !important;
}

.timeline > li {
    margin-bottom: 60px;
}

.timeline-date {
    font-weight:bold;
}

@media ( min-width : 640px ){
    .timeline > li {
        overflow: hidden;
        margin: 0;
        position: relative;
    }
    
    .timeline-date {
        width: 130px;
        float: left;
        margin-top: 15px;
    }
    
    .timeline-content {
        width: 75%;
        float: left;
        border-left: 3px #e5e5d1 dashed;
        padding-left: 30px;
    }
    
    .timeline-content:before {
        content: '';
        width: 12px;
        height: 12px;
        background: #197FC4;
        position: absolute;
        left: 126px;
        top: 24px;
        border-radius: 100%;
    }
    
    .timeline-text {
        margin-top:15px;
        margin-bottom:30px;
        padding:0;
        line-height: 1.5;
    }
}
/* 沿革用 ここまで */




/* プライバシーポリシー用 ここから*/
.privacy_list ol {
    font-weight:bold;
}

.privacy_list p {
    font-weight:normal;
    margin-top:0px;
}

.privacy_box{
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #000;
    background: #FFF;
    border: solid 3px #000;
    border-radius: 10px;
}

.privacy_box p {
    margin:0; 
    padding:0;
}
/* プライバシーポリシー用 ここまで*/




/* 予約システム用 ここから*/
.sln-salon-title h2 {
    text-align: center !important;
    font-weight: bold !important;
    color: #FFF  !important;
}
/* 予約システム用 ここまで*/




/* エントリー下部調整 ここから */
.entry-content {
    margin-bottom:0px;
}
.page .entry-content {
    margin-bottom:-40px;
}
.article-fotter,
.entry-footer {
    diplay:none;
}

#breadcrumb {
    display:none;
}

/* fotterメタエリア用 */
.footer-meta {
    display:none;
}

/* エントリー下部調整 ここまで */




/* フッター用 ここから */
.footer-bottom-logo img {
    height: auto;
}

.logo-footer{
    text-align:right !important;
    margin-right:10px !important;
}

.footer {
    margin-top: 0px;
    background: #014098 !important;
    border-top: 2px solid #72c7e6;
}
.footer-bottom {
    margin-top: 0px;
}
.footer-bottom-logo {
    float: none;
    bottom: auto;
    position: static;
    margin-bottom: 10px;
}
.footer-bottom-logo .logo-image {
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
}
.footer-bottom-content {
    float: none;
    text-align: center;
}
.navi-footer-in > .menu-footer {
    justify-content: center;
    margin-bottom: 1em;
}
.navi-footer-in a {
    color: #aab3b9;
}
.navi-footer-in a:hover {
    color: #aab3b9;
    background: none;
    text-decoration: underline;
}
.footer-bottom.fnm-text-width .menu-footer li {
    line-height: 2;
}
.copyright {
    color: #aab3b9;
}
/* フッター用 ここまで */

    /* サイドバーレスポンシブ対応調整 */
    .sidebar {
	font-size:15px;
        text-align:center;
    }



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1250px以下*/
@media screen and (max-width: 1250px){
    /* グローバルメニュー幅、フォントサイズ調整 */
    .navi-in > ul li {
        width: 125px;
    }
    .menu-header .item-label{
        font-size: 100%;
    }

}

/*1030px以下*/
@media screen and (max-width: 1195px){

    /* 元のロゴ画像を非表示 */
    .logo-header > a img {
        visibility: hidden;
    }
    /* ページ毎にロゴ画像を指定 */
    .logo-header > a .site-name-text {
        display: inline-block;
        background: url("../../uploads/2024/08/header_img1-3.jpg") no-repeat;
        background-size: contain;
        background-position: center;
        height: 70px !important;
        margin: .5em auto;
    }
}

/*1030px以下*/
@media screen and (max-width: 1150px){
    .logo-header > a .site-name-text {
        display: inline-block;
        background: url("../../uploads/2024/08/header_img1-4.jpg") no-repeat;
        background-size: contain;
        background-position: center;
        height: 70px !important;
        margin: .5em auto;
    }
    /* グローバルメニュー幅、フォントサイズ調整 */
    .navi-in > ul li {
        width: 102px;
    }
    .menu-header .item-label{
        font-size: 90%;
    }

    /* サイドバーレスポンシブ対応調整 */
    .sidebar {
        text-align:center;
    }

    /* フッター調整 */
    .footer {
        font-size:8px !important;
    }

}

@media screen and (max-width: 950px){
    /* グローバルメニュー幅、フォントサイズ調整 */
    .navi-in > ul li {
        width: 90px;
    }
    .menu-header .item-label{
        font-size: 75%;
    }

}


/*834px以下*/
@media screen and (max-width: 834px) {
    .logo-header > a .site-name-text {
        display: inline-block;
        background: url("../../uploads/2024/08/header_img1-5.jpg") no-repeat;
        background-size: contain;
        background-position: center;
        height: 70px !important;
        margin: .5em auto;
    }

    /* モバイルメニューのボーダー削除 */
    .navi-footer-in > .menu-footer li.menu-item {
        border: none;
    }
}

/*768px以下*/
@media screen and (max-width: 768px){
    .logo-header > a .site-name-text {
        display: inline-block;
        background: url("../../uploads/2019/08/header_img1-1.jpg") no-repeat;
        background-size: contain;
        background-position: center;
        height: 70px !important;
        margin: .5em auto;
    }
    /* トップページ 画像並列用 レスポンシブ対応 */
    .top_area1,
    .top_area2 {
        width:800px;
        height:220px;
        position:relative;
    }

    .top_area1_text {
        width:380px;
        height:130px;
        font-size:100%;
        margin:auto;
    }

    [class^="img-flex-"] {
        display: flex;
        flex-wrap: wrap; 
        justify-content: center;
        text-align:center;
    }

    .img-flex-3 > img,
    .img-flex-3 a { width: 90%; height: 90%; }

    /* 右寄せレスポンシブ対応 */
    .alignright2 {
        float: none !important;
        text-align:center;
    }

}

/*700px以下*/
@media only screen and (max-width: 700px) {
    /* PCスマホ画像切替用 */
    .pc-mode { display: none !important; }
    .sp-mode { display: block !important; }

}

/*640px以下*/
@media only screen and (max-width: 640px) {
    /* 沿革用 レスポンシブ対応 */
    .timeline-text {
        margin-bottom:20px;
    }
}

/*480px以下*/
@media screen and (max-width: 480px){
    /* トップページ 画像並列用 レスポンシブ対応 */
    .top_area1,
    .top_area2 {
        width:800px;
        height:210px;
        position:relative;
    }

    .top_area1_text {
        width:300px;
        height:145px;
        font-size:100%;
        margin:auto;
    }

    [class^="img-flex-"] {
        display: flex;
        flex-wrap: wrap; 
        justify-content: center;
        text-align:center;
    }

    .img-flex-2 >img,
    .img-flex-2 a,
    .img-flex-3 > img,
    .img-flex-3 a { width: 90%; height: 90%; }

    /* 右寄せレスポンシブ対応 */
    .alignright {
        float:none !important;
    }

    /* スマホ時のロゴの画像タテサイズ */
    .logo-header img {
        height: 60px !important;
        margin: .5em auto;
    }

}