/*----------------------------------------------------------
  Designed by Creative Planning All Rights Reserved.
  product design : kaetenWP_JOY_css_responsive
  version        : 20160521
------------------------------------------------------------*/
@charset "UTF-8";

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■レスポンシブ設定
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
@media screen and (-webkit-min-device-pixel-ratio: 1.1),(min--moz-device-pixel-ratio: 1.1) {

.kl-cat a,.kl-date {padding: 4px 5px;}
.kl-read a {padding: 7px 9px;}
.reply a {padding: 4px 15px;}
.pagination {line-height: 3.5;}
.pagination a,.pagination span,.pagination .current {padding: 9px 12px;}
/*WordPress Popular Posts*/.wpp-views {padding : 2px 5px;}

}

/*min960px*/
@media screen and (min-width: 960px) {

#header-in {background-size: 100% 100%; /*must*/}

}

/*max959px ここから1カラム*/
@media screen and (max-width: 959px) {

img {max-width: 100%; height: auto;}
#header-in {background-size: 100% 100%; /*must*/}
#header-navi {width: auto;}
#globalmenu-outer {width: 100%; /*must*/}
#globalmenu {margin: 0 auto;}
#globalmenu,#globalmenu a,#globalmenu a:hover,#globalmenu #gm-r > ul > li:last-child {border: none;}
#wrapper1,#wrapper2,#wrapper3,#content1,#content2,#content3,
#sidebar1-l,#sidebar2-l,#sidebar3-l,#sidebar1-r,#sidebar2-r,#sidebar3-r,
.fi-wrapper1,.fi-wrapper2,.fi-l,.fi-c,.fi-r {width: auto; float: none; margin: 0;}
#content1,#content2,#content3,
#sidebar1-l,#sidebar2-l,#sidebar3-l,#sidebar1-r,#sidebar2-r,#sidebar3-r,.sidecontent {margin: 0;}
#content1,#content2,#content3,#sidebarbody-l,#sidebarbody-r {padding: 5px 5px 1px 5px;}
#content1,#content2,#content3 {border: none;}
#container-in {padding: 15px 0 0;}
.fbody2 {margin-bottom: -31px; /*must*/}
.navi-return a {padding: 6px 6px 8px 8px;}

}

/*max799px*/
@media screen and (max-width: 799px) {

#header1 {box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1);}
.blog-title {font-size: 18px;}
.style03,.page-title {font-size: 20px;}
#header-outer {padding: 15px 0;}
#header-navi-outer {position: relative;}
#header-navi {padding: 0 27% 0 10px; border-top: none;}
.header-navi-r {display: none;}
.header-navi-l {
    width: 100%;
    height: 28px;
    line-height: 2.6;
    overflow: hidden;
    font-size: 11px;
}
#globalmenu-outer {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 200;
    box-shadow: none;
    border: none;
    background: none;
    filter: none;
    text-align: right;
}
#globalmenu-toggle {display: block; /*must*/}
#globalmenu-toggle a {
    display: inline-block; /*must*/
    line-height: 2;
    padding: 0 10px;
    border: none;
    background: rgba(0,0,0,0.2);
    font-size: 14px;
    color: #fff;
}
#globalmenu-toggle a:hover {background: rgba(0,0,0,0.5);}
#gm-l {display: none;}
#gm-r {width: 100%; margin: 0; padding: 0; background: rgba(0,0,0,0.5);}
#globalmenu {display: none; padding: 0; border: none;}
#globalmenu li {float: none;}
#sp-s,.sp {display: block; margin: 0 auto;}
#sp-s {padding: 20px 10px 10px 0;}
#globalmenu a {
    display: block;
    padding: 10px;
    border-radius: 0;
    border: none;
    text-align: right;
    color: #fff;
}
#globalmenu a:hover {
    border: none;
    border-radius: 0;
    background: none;
    background-image: none;
    filter: none;
}
#globalmenu li ul {width: 50%;}
#globalmenu li ul li ul {width: 100%;}
#globalmenu li ul {background: rgba(0,0,0,0.6);}
#globalmenu li ul li ul {background: rgba(0,0,0,0.6);}
#globalmenu li ul li ul li ul {background: rgba(0,0,0,0.5);}
#globalmenu li ul li ul li ul li ul {background: rgba(0,0,0,0.5);}
/*br {content: "";} br:after {margin-right: -.333em; content:"";}*/
br {display: none;}

}

/*max599px*/
@media screen and (max-width: 599px) {

.blog-title {width: auto; padding: 0;}
.blog-intro {width: auto; padding: 0;}
#footer2 p {display: inline;}
#error li {width: 100%;}
.modified {display: block;}
.comment-input,.comment-input2 {width: 96%;}
.ul-kl li a:before,.ul-kl li a:after {display: none;}
.ul-kl li a {padding: 0;}
.kl-info {margin: 8px 0;}
.kl-read {position: static;}
.kl-cat,.kl-date,.kl-cat2,.kl-date2 {line-height: 1;}
.kl-cat a,.kl-date {padding: 0; border: none; background: none; font-weight: bold;}
.kl-cat a {padding: 0 1px;}
.kl-cat a:hover {border: none;}
.kl-cat,.kl-date {margin: 0 4px 0 0;}

}