@charset "utf-8";

/*===============================

  SP版　768px以下

================================*/
@media screen and (max-width: 768px){

/* 共通 */
.pc { display: none !important; }
.sp { display: block !important; }

.home #content, .blog #content {
  margin-top: 30%;
}
img {
  display: block;
}
#content{
  margin-top: 20%;
}

 /* --------------------------------------------------- */
    /* ヘッダー */
    /* --------------------------------------------------- */

    div#main_visual_in {
        width: 100%;
    }

    div#main_visual_in_lp {
        width: 100%;
    }

    .sp-header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 99;
        padding: 2% 0px 0%;
        background: #fff;
        border-bottom: 2px solid #76a359;
    }

    .sp-header-in {
        width: 100%;
        overflow: hidden;
        background-color: white;
        padding-bottom: 1%;
    }

    .sp-logo {
        width: 50%;
        float: left;
        padding: 3px 0;
    }

    .sp-logo a {
        display: block;
        padding: 0% 0px 0px 3%;
    }

    .sp-logo a img {
        margin: auto;
    }

    .sp-botan {
        width: 43%;
        float: right;
    }

    .sp-botan ul {
        display: table;
        table-layout: fixed;
        width: 100%;
        margin: 3% 0;
    }

    .sp-botan ul li {
        display: inline-block;
        vertical-align: top;
        text-align: center;
        margin-right: 3%;
        width: 30%;
    }
    .sp-botan ul li:last-child{
        margin-right: 0px;
    }

    .sp-botan ul li label {
        display: block;
        background-size: 100%;
        transition: 0.2s;
    }

    .sp-botan ul li img {
        height: auto;
    }
     .sp-menu {
        overflow: hidden;
        opacity: 0;
        height: 0;
        transition: 0.2s;
    }

    input#sp-menu:checked + .sp-header .sp-menu {
        opacity: 1;
        height: auto;
    }

    .sp-menu ul {
        width: 100%;
        overflow: hidden;
        border-left: 1px solid white;
        border-top: 1px solid white;
    }

    .sp-menu ul li {
        width: 50%;
        float: left;
    }

    .sp-menu ul li:last-of-type:nth-of-type(odd) {
        width: 100%;
    }

    .sp-menu ul li a {
        display: block;
        padding: 5% 5%;
        font-size: 14px;
        color: white;
        text-decoration: none;
        text-align: center;
        background-color: #426b33;
        border-right: 1px solid white;
        border-bottom: 1px solid white;
    }


/* グローバルナビゲーション */
#global_navi {
  display: none;
}

/* フッター */
#footer_in {
  width: 100%;
  }
 div#footer_in{
        padding: 3%;
    }

    #footer .logo{
        float: none;
        margin: 0;
        padding: 0%!important;
    }
    #footer .logo img{
      margin: 0 auto;
    }
    #footer .f_address{
        margin: 0px;
    }
    .footer_contact{
        float: none;
        display: block;
        margin-top: 5%;
    }
    .footer_contact_left{
        margin: 0px auto 3%;
    }
    .footer_contact p img{
        margin: 0 auto;
    }
    .footer_contact_right p {
    margin-bottom: 10px;
}
    .footer_contact_right ul {
        display: inline-flex;
        margin: auto;
        text-align: center;
        width: 100%;
        justify-content: space-evenly;
    }
.footer_contact_right ul li {
    display: inline-block;
}
    #footer .menu-main-menu-container{
        display: none;
    }

    .f_address span{
        display: none;
    }

    .copyright {
        font-size: 3vw;
    }

    .copyright_out {
        padding: 3% 3% 17%;
    }
/* フッター popup */
div#popuptel_wrap {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  height: 0;
}

input#sp-popup:checked+#popuptel_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  opacity: 1;
  transition: all 0.3s ease;
  height: 100vh;
  z-index: 99999999999999999999999999;
}

input#sp-popup:checked+#popuptel_wrap::before {
  background: #fff5d9;
  opacity: 0.85;
  content: '';
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: -10;
}

div#popuptel_wrap div.popuptel_inner {
  background-color: #fff;
  border-radius: 8px;
  display: block;
  margin-bottom: 15vw;
  width: 84vw;
  height: auto;
  padding: 5vw 0;
  z-index: 0;
}

div#popuptel_wrap div.popuptel_inner>p {
  font-size: 5.5vw;
  line-height: 1.35em;
  font-weight: bold;
  text-align: center;
  display: block;
  color: #684222;
}

div#popuptel_wrap div.popuptel_inner ul {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 3.5vw 5vw;
  background: #ebffeb;
  margin: 3.5vw 0 4vw;
}

div#popuptel_wrap div.popuptel_inner ul li {
  width: 45%;
  margin: 0 auto;
  border-radius: 1.5vw;
  padding-bottom: 3vw;
}

div#popuptel_wrap div.popuptel_inner ul li:nth-child(1) {
  background: #ef9700;
}

div#popuptel_wrap div.popuptel_inner ul li:nth-child(2) {
  background: #4ebd4e;
}

div#popuptel_wrap div.popuptel_inner ul li a {
  display: block;
  text-decoration: none;
  color: #fff;
  font-size: 3.75vw;
}

div#popuptel_wrap div.popuptel_inner ul li span {
  width: 9vw;
  background-color: #fff;
  height: 9vw;
  border-radius: 800px;
  text-align: center;
  display: flex;
  align-items: center;
  margin: 3vw auto;
}

div#popuptel_wrap div.popuptel_inner ul li span i {
  margin: 0 auto;
  font-size: 4.2vw;
}

div#popuptel_wrap div.popuptel_inner ul li:nth-child(1) span i {
  color: #ef9700;
}

div#popuptel_wrap div.popuptel_inner ul li:nth-child(2) span i {
  color: #4ebd4e;
}

div#popuptel_wrap div.popuptel_inner ul li b {
  text-align: center;
  display: block;
}

div#popuptel_wrap div.popuptel_inner label {
  background-color: #ff760f;
  width: 80%;
  border-radius: 5000px;
  text-align: center;
  display: block;
  padding: 1.25vw;
  position: relative;
  color: #fff;
  max-width: 280px;
  margin: 0vw auto 0;
}

div#popuptel_wrap div.popuptel_inner label::before {
  border-left: 2px solid;
  border-top: 2px solid;
  border-color: #fff;
  content: "";
  height: 6px;
  position: absolute;
  right: 15px;
  top: 45%;
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  width: 6px;
}

.footer-popup ul {
  width: 100%;
  display: table;
  background-color: white;
  table-layout: fixed;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  margin: 0px;
}

.footer-popup ul li {
  display: table-cell;
  vertical-align: middle;
}

.footer-popup ul li:first-child {
  background: linear-gradient(to top left, #cd3921, #ff7559);
}

.footer-popup ul li:nth-child(2) {
    background: linear-gradient(to top left, #0f7299, #62c5ec);
}
.footer-popup ul li:nth-child(3) {
    background: linear-gradient(to top left, #41990f, #7fea35);
}

/* single mobile */
  .single .authorbox .author-newpost li,
  .related-box li{
    width:47%;
    min-height: 250px;
    margin: 0 3% 1% 0;
    float:left;
    position:relative;
  }
  .single .authorbox .author-newpost li .eyecatch,
  .related-box li .eyecatch{
    max-height: 200px;
  }

  .related-box li.related-rightlist{
    zoom: 1;
  }
  .related-box li.related-rightlist:after{
    content:"";
    display:table;
    clear:both;
  }

  /* SNS ãƒ†ã‚­ã‚¹ãƒˆéžè¡¨ç¤º */
  .share.short{
    padding:0 1em;
  }
  .share.short .sns li a .text{
    display:none;
  }
  /* footer mobile */
  /* ãƒšãƒ¼ã‚¸ãƒˆãƒƒãƒ—ã¸ */
  #page-top {
  right: 10px;
  }
  #page-top a {
  background-repeat: no-repeat;
  text-decoration: none;
  width: 38px;
  height: 38px;
  line-height:37px;
  font-size:0.8em;
  }
  .footer-links {
    font-size:0.9em;
  }
  .footer-links ul{
    margin:1em 0 0;
  }
  .footer-links li{
    display:inline;
    margin-right:1em;
  }
  .footer-links li:before{
    font-family: "fontawesome";
    content: '\f0da';
    margin-right: 0.3em;
  }
  .footer-links a{
    text-decoration:none;
  }
  .copyright{
    font-size:0.7em;
    padding:1em 0;
  }
  .copyright_out {
    width: 100%;
    height: auto;
    padding: 7px 0;
    display: table;
    border-top: 1px solid #ffffff;
    background: #426b33;
    padding-bottom: 12%;
}
}


@media only screen and (max-width: 480px) {
  #custom_header{
    height:140px;
  }
  .subnav {
    width: 84.5%;
  }
  .subnav form{
    width: 74%;
  }
  .subnav .contactbutton{
    width:20%;
    float:right;
  }
  .subnav .contactbutton a{
    height:52px;
    overflow:hidden;
  }
  .subnav .contactbutton a i{
    display:block;
    font-size:1.4em;
    line-height: 52px;
    margin-right: 0;
    width: auto;
    height: auto;
  }

  #main .article .entry-header,
  #main .article .article-header,
  #main .article .article-footer{
    padding: 0.9em 0.9em 0.8em;
  }
  #main .article .entry-content{
    padding: 0.9em;
    font-size: 0.96em;
}
/* ã‚¢ã‚¤ã‚­ãƒ£ãƒƒãƒç”»åƒé«˜ã•èª¿æ•´ */
  .top-post-list .post-list .eyecatch{
    max-height: 70px;
  }

  .single .authorbox .author-newpost li,
  .related-box li{
    min-height: 190px;
  }
  .single .authorbox .author-newpost li .eyecatch,
  .related-box li .eyecatch{
    height: 80px;
  }

  .single .authorbox .inbox,
  .single .related-box .inbox{
    padding:0.9em;
  }
  .single-title,
  .page-title,
  .entry-title {
    font-size:1.2em; }
  
  .add.more{
    margin-left:-0.9em;
  }


  .top-post-list .post-list a{
   padding:0.7em;
  }
  .share.short .sns li a{
    padding:10px 4px;
  }
  .pagination a, .pagination span,
  .page-links a , .page-links ul > li > span{
    font-size:0.85em;
  }

  /*********************
  POSTS & CONTENT STYLES
  *********************/
  .alignleft, img.alignleft {
    margin-right: auto;
    margin-left: auto;
    }
  .alignright, img.alignright {
    margin-right: auto;
    margin-left: auto;
    }
  .aligncenter, img.aligncenter {
    margin-right: auto;
    margin-left: auto;
    display: block;
    clear: both; }

/**/
}
/**/
