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

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■レスポンシブ設定
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
@media screen and (-webkit-min-device-pixel-ratio: 1.1),(min--moz-device-pixel-ratio: 1.1) {
.pagination a,.pagination .current,.pagination span {padding: 10px 12px;}
}

/*min960px*/
@media screen and (min-width: 960px) {
#header-in {background-size: 100% 100%;}
}

/*max959px ここから1カラム*/
@media screen and (max-width: 959px) {
#header-in {background-size: 100% 100%;}
#header-navi {width: auto;}
#globalmenu-outer {width: 100%;}
#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;}
.eyecatchbanner {height: auto;}
}

/*min800px*/
@media screen and (min-width: 800px) {
#globalmenu,#globalmenu li {display: block !important;}
}

/*max799px*/
@media screen and (max-width: 799px) {
.blog-title,.style03,.page-title {font-size: 18px;}
.blog-intro,.blog-intro2,.style02,#globalmenu,
.comment-input,.comment-textarea,.commentlist,.tb-url,
.header-imgl,.header-imgr,.eyecatchbanner,
.ad,.ad1,.ad2,.ad4,.ad5,.ad6,.ad-pc,.ad-sp,.kijishita{font-size: 12px;}
.kl-list,.sidebar-title,.style04,.style05,.style06,.ftitle,.more-link,
.error-title,.widget-title,.share-message1,.share-message2 {font-size: 16px;}
#sidebarbody-l,#sidebarbody-r,.sidebar,#footerinfo,
.kijilist-body2,.kijilist-body3,.ad3,.sidecontent{font-size: 14px;}
.kl-cat,.kl-date,.kl-intro {font-size: 11px;}
.noimage-in {font-size: 9px;}
#header1 {box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1);}
#header-outer {padding: 15px 0;}
#header-navi {
    height: 28px;/*must*/
    padding: 0 25% 0 10px;
    border-top: none;
}
.header-navi-l {
    width: 100%;
    line-height: 28px;/*must*/
    overflow: hidden;
    font-size: 11px;
}
.header-navi-r {display: none;}
#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*/
    height: 28px;/*must*/
}
#menuOpen {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}
#menuOpen:before {
    font-family: FontAwesome,Roboto,"Droid Sans",Meiryo;
    content: "\f0c9  MENU";
    display: inline-block;
    line-height: 28px;/*must*/
    padding: 0 10px;
    font-style: normal;
    font-size: 16px;
}
#menuClose {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 300;
    margin: 5px 10px 0 0;/*must*/
    padding: 20px 21px 20px 20px;/*must*/
    cursor: pointer;
    border: solid 1px #ffffff;
    border-radius: 4px;
}
#menuClose:before,#menuClose:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
#menuClose:before {
    width: 2px;
    height: 30px;
    margin-top: -14px;
}
#menuClose:after {
    width: 30px;
    height: 2px;
    margin-left: -14px;
}
#gm-l {display: none;}
#gm-r {
    width: 100%;
    margin: -28px 0 0 0;/*must*/
    padding: 58px 0 0px 0;/*must*/
    background: rgba(0,0,0,0.6);
}
#globalmenu {display: none; padding: 0; border: none;}
#globalmenu li {float: none;}
#sp-s,.sp {display: block; margin: 0 auto;}
#sp-s {padding: 10px; background: ;}
#globalmenu,#globalmenu a {color: #fff;}
#globalmenu a {
    padding: 10px;
    border-radius: 0;
    border: none;
    text-align: right;
}
#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.7);}
#globalmenu li ul li ul {background: rgba(0,0,0,0.7);}
#globalmenu li ul li ul li ul {background: rgba(0,0,0,0.6);}
#globalmenu li ul li ul li ul li ul {background: rgba(0,0,0,0.6);}
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%;}
.comment-input,.tb-url,.comment-textarea {width: 94%;}
.ul-kl li a:before,.ul-kl li a:after {display: none;}
.ul-kl li a {padding: 0;}
.kl-info {margin: 8px 0;/*must*/}
.kl-date,.kl-cat a {padding: 0; border: none; background: none;}
.kl-date {margin: 0 10px 0 0;}
.kl-cat a {margin: 0; padding: 0;}
.kl-cat a:hover {border: none; background: none;}
.kl-read {position: static;}
.kl-read a {display: inline-block;}
.read-time1 {position: static; text-align: right;}
.pn3-l,.pn3-r{text-align: center;}
.pn3-l-img,.pn3-r-img {float: none; margin: 0 auto; padding: 30px 0 10px 0;}
.pn3-l-title,.pn3-r-title {margin: 0 auto; padding: 0 5px 10px 5px;}
.card-l,.card-l img {width: 60px; height: 60px;}
.youtube {position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}
}