/* Created by Artisteer v4.3.0.60745 */

.default-responsive .art-header #site_dsc{
  font-size: 90%;
  text-align: center;
  padding-bottom: 20px;
}

#h_logo img{
  width: 100%;
}

.responsive .art-blockheader .t,
.responsive .art-blockheader .t a,
.responsive .art-blockheader .t a:link,
.responsive .art-blockheader .t a:visited,
.responsive .art-blockheader .t a:hover
{
   font-size: 110%;
   font-weight: bold;
   font-style: normal;
    padding: 10px;
}
.default-responsive .art-header, .default-responsive #art-header-bg{
    background: none;

}

.default-responsive .art-header .h_r_logo{
  width: auto;
  margin: 0 auto;
}

h1.art-postheader{
}

.responsive body
{
   min-width: 240px;
}

.responsive img
{
  width: 100% !important;
   box-sizing: border-box;
}

.responsive .art-content-layout img,
.responsive .art-content-layout video
{
   width: 100%;

   height: auto !important;
   text-align: center;
}

.responsive.responsive-phone .art-content-layout img
{
}

.responsive.responsive-phone .art-collage,
.responsive.responsive-tablet .art-collage {
   margin: 0 !important;
}

.responsive .art-content-layout .art-sidebar0,
.responsive .art-content-layout .art-sidebar1,
.responsive .art-content-layout .art-sidebar2
{
   width: auto !important;
   margin: auto;
}

.responsive .art-content-layout,
.responsive .art-content-layout-row,
.responsive .art-layout-cell
{
   display: block;
}

.responsive .art-content-layout,
.responsive .art-content-layout-row
{
   padding: 0;
}

.responsive .image-caption-wrapper
{
   width: auto;
}

.responsive.responsive-tablet .art-vmenublock,
.responsive.responsive-tablet .art-block
{
   margin-left: 1%;
   margin-right: 1%;
   width: 48%;
   float: left;
   box-sizing: border-box;
}

.responsive .art-responsive-embed
{
   height: 0;
   padding-bottom: 56.25%;
   /* 16:9 */
    position: relative;
}

.responsive .art-responsive-embed iframe,
.responsive .art-responsive-embed object,
.responsive .art-responsive-embed embed
{
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.responsive .art-sheet
{
   width: auto !important;
   min-width: 240px !important;
   max-width: none !important;
   background:url(images/body_bg02.jpg) center top no-repeat;
}

#art-resp {
   display: none;
}

@media all and (max-width: 951px)
{
    #art-resp, #art-resp-t { display: block; }
    #art-resp-m { display: none; }
}

@media all and (max-width: 480px)
{
    #art-resp, #art-resp-m { display: block; }
    #art-resp-t { display: none; }
}

#art-resp-desktop {
   display: none;
}
#art-resp-tablet-landscape {
   display: none;
}
#art-resp-tablet-portrait {
   display: none;
}
#art-resp-phone-landscape {
   display: none;
}
#art-resp-phone-portrait {
   display: none;
}

@media (min-width: 1200px)
{
    #art-resp-desktop { display: block; }
}

@media (min-width: 980px) and (max-width: 1199px)
{
    #art-resp-tablet-landscape { display: block; }
}

@media (min-width: 768px) and (max-width: 979px)
{
    #art-resp-tablet-portrait { display: block; }
}

@media (min-width: 480px) and (max-width: 767px)
{
    #art-resp-phone-landscape { display: block; }
}

@media (max-width: 479px)
{

   .sp_logo {
      display: block;
   }

   .sp_logo img {
      max-width: 178px !important;
      width: 100% !important;
      margin: 0 auto;
   }


    body{
    }
    .header_box{
        height: auto;
    }

    .header_in{
        width: 100%;
    background: none;
        margin: 0;
        height: auto;
        background: none;

}
    .header_in .contact{
        display: none;
    }
    
    #art-resp-phone-portrait { display: block; }
    #blog_tit_area{
        width: auto;
    }
    
    
    .art-layout-wrapper{
    width: auto;
        margin: 0 auto;
        padding: 10px;
}
.art-footer{
    width: auto;
}
    .f_info{
        padding: 0;
width: 100%;
    }
.header_logo{
    margin: 0 auto;
    padding: 0;
    float: none;
}
    h1.logo{
      max-width: 280px;
      margin: 0 auto;
      height: auto;
      padding: 0;
    }
.header_info{
    display: none;
}
    .teaser{
        width: auto;
        display: none;
    }
.teaser img{
    width: auto !important;
}
    
    .text_link{
        width: 100%;
        text-align: center;
        padding: 10px 10px;
    }
    .copyright{
        text-align: center;
        20px 10px;
    }
    .copyright p{
        padding-top: 16px;
        font-size: 12px;
    }

    .blog_tit {
      height: auto;
    }

   .blog_tit:after {
      position: absolute;
      content:'';
      width: 100%;
      height: 1px;
      background: #fff;
      bottom: 2px;
      left: 0;
   }
    .art-blockheader{
        background-size: contain;
        padding: 1px;
    }
    .pagetop{
        top: -70px;
    }
    
    .text_link p{
        padding-top: 20px;
    }


    .footer_box ul {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
         flex-direction: column;
         padding: 0 10px;
   }

   .footer_box ul li {
      max-width: 320px;
      width: 100%;
      margin: 0 auto 20px;
   }

   .footer_box ul li:last-child {
      margin: 0 auto;
   }

}




.responsive .art-header
{
   background-position: center;
}


.default-responsive .art-header
{
   text-align: center;
}

.default-responsive .art-header *
{
   width: 100%;
   position: relative;
   text-align: center;
   -webkit-transform: none !important;
   transform: none !important;
}

.default-responsive .art-header .art-headline,
.default-responsive .art-header .art-slogan
{
   display: block !important;
   top: 0 !important;
   left: 0 !important;
   margin: 2% !important;
   text-align: center !important;
}

.default-responsive .art-header .art-headline a,
.default-responsive .art-header .art-slogan
{
   white-space: normal !important;
}

.default-responsive .art-header .art-logo
{
   display: inline-block;
   margin: auto !important;
   left: auto;
   top: auto !important;
   width: auto;
   height: auto;
}

.responsive .art-header .art-slidenavigator
{
   position: absolute;
}

.default-responsive .art-header .art-positioncontrol
{
   display: block !important;
   position: relative !important;
   top: auto !important;
   right: auto !important;
   bottom: auto !important;
   left: auto !important;
   margin: 2% auto !important;
   width: auto !important;
   height: auto !important;
}

.responsive .art-header #art-flash-area
{
   display: none;
}

/* Search and other elements in header element directly */
.default-responsive .art-header>.art-textblock
{
   position: relative !important;
   display: block !important;
   margin: 1% auto !important;
   width: 75% !important;
   top: auto !important;
   right: auto !important;
   bottom: auto !important;
   left: auto !important;
}

.default-responsive .art-header .art-textblock
{
   position: relative !important;
   display: block !important;
   margin: auto !important;
   left: 0 !important;
   right: 0 !important;
   top: auto !important;
   height: auto !important;
   width: auto;
   background-image: none;
}

/* '.art-header *' used noram align, but for '.art-textblock *' we must force align because of preview */
.responsive .art-header .art-textblock *
{
   text-align: center !important;
}

.default-responsive .art-header .art-shapes > .art-textblock,
.default-responsive .art-header .art-slide-item > .art-textblock
{
   display: none !important;
}

.default-responsive .art-header .art-shapes > .art-textblock *
{
   text-align: center !important;
   width: auto !important;
   height: auto !important;
   display: block;
}

.default-responsive .art-header .art-slider .art-textblock *
{
   text-align: center !important;
   width: auto !important;
   height: auto !important;
   display: block;
}

/* For icons like facebook, rss, etc. */
.responsive .art-header>.art-textblock>div
{
   width: 100%;
}
/* dynamic width nav */
.responsive nav.art-nav,
.responsive .art-nav-inner
{
   width: auto !important;
   position: relative !important;
   top: auto !important;
   left: auto !important;
   right: auto !important;
   bottom: auto !important;
   margin-top: 0;
   margin-bottom: 0;
   min-width: 0;
   text-align: left !important;
}

.responsive nav.art-nav
{
   min-width: 1%;
   margin-top: 1%;
    margin-bottom: 20px;
    background: none;
}

.responsive .art-nav
{
   padding-left: 0;
   padding-right: 0;
   margin-top: 20px;
}

/* full width hmenu, instead of inline-block */
.responsive .art-nav ul.art-hmenu
{
   float: none;
   text-align: center;
   display: none;
    border: 1px solid #fff;
    background: #2C4D79;
}

/* elements on different lines */
.responsive .art-nav ul.art-hmenu li,
.responsive .art-hmenu-extra1,
.responsive .art-hmenu-extra2
{
   float: none;
}

/* horizontal margins */
.responsive .art-nav ul.art-hmenu>li:first-child,
.responsive .art-nav ul.art-hmenu>li:last-child,
.responsive .art-nav ul.art-hmenu>li
{
   margin-left: 0;
   margin-right: 0;
   width: auto;
}

/* separator */
.responsive .art-nav ul.art-hmenu>li:before
{
   display: none;
}

/* vertical distance between items */
.responsive .art-nav ul.art-hmenu a
{
   margin-top: 1px !important;
   margin-bottom: 1px !important;
   height: auto;
   white-space: normal;
   text-align: left;
   padding: 10px;
   border-bottom: 2px dashed #fff;
   color: #fff;
}

.responsive .art-nav ul.art-hmenu>li:first-child>a
{
   margin-top: 0 !important;
}

.responsive .art-nav ul.art-hmenu>li:last-child>a
{
   margin-bottom: 0 !important;
}

/* fixes for extended menu */
.responsive .art-nav .ext,
.responsive .art-nav ul.art-hmenu>li>ul,
.responsive .art-nav ul.art-hmenu>li>ul>li,
.responsive .art-nav ul.art-hmenu>li>ul>li a
{
   width: auto !important;
}

/* submenu position on hover */
.responsive .art-nav ul.art-hmenu ul
{
   left: auto !important;
   right: auto !important;
   top: auto !important;
   bottom: auto !important;
   display: none !important;
   position: relative !important;
   visibility: visible !important;
}

.responsive .art-nav ul.art-hmenu li.active>ul
{
   display: block !important;
}
.responsive .art-nav ul.art-hmenu ul li.active>a
{
   font-weight: bold;
}

.art-nav .art-menu-btn
{
   border: 1px solid #404040;
   border-radius: 3px;
   box-shadow: 0 0 3px 0 rgba(0, 0, 0, .2);
   display: none;
   -svg-background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #707070), to(#000));
   -svg-background: linear-gradient(to bottom, #707070 0, #000 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #707070), to(#000));
   background: linear-gradient(to bottom, #707070 0, #000 100%);
   margin: 3px;
   outline: none;
   padding: 5px;
   position: relative;
   vertical-align: bottom;
   width: 20px;
}

.art-nav .art-menu-btn span
{
   background: #E0E0E0;
   border-radius: 2px;
   display: block;
   height: 3px;
   margin: 3px 1px;
   position: relative;
   -webkit-transition: background .2s;
   transition: background .2s;
}

.art-nav .art-menu-btn:hover span
{
   background: #f3f3f3;
}

.responsive .art-nav .art-menu-btn
{
   display: inline-block;
}

.responsive .art-nav .art-hmenu.visible
{
   display: block;
   padding: 15px;
    width: auto;
    height: auto;
}

.responsive .art-nav ul.art-hmenu>li>ul>li:first-child:after
{
   display: none;
}
.responsive .art-nav ul.art-hmenu ul a
{
   padding-left: 4% !important;
}
.responsive .art-nav ul.art-hmenu ul ul a
{
   padding-left: 6% !important;
}
.responsive .art-nav ul.art-hmenu ul ul ul a
{
   padding-left: 8% !important;
}
.responsive .art-nav ul.art-hmenu ul ul ul ul a
{
   padding-left: 10% !important;
}
.responsive .art-nav ul.art-hmenu ul ul ul ul ul a
{
   padding-left: 12% !important;
}

.responsive .art-nav ul.art-hmenu>li>ul
{
   padding: 1px;
}

.responsive .art-nav ul.art-hmenu>li>ul:before
{
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

.responsive .art-content-layout,
.responsive .art-content-layout-row,
.responsive .art-layout-cell
{
   display: block;
   margin: 20px auto;
   width: auto;
}

.responsive .art-layout-cell
{
   width: auto !important;
   height: auto !important;
}

.responsive .art-content-layout:after,
.responsive .art-content-layout-row:after,
.responsive .art-layout-cell:after
{
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

.responsive .responsive-tablet-layout-cell,
.responsive.responsive-tablet .art-footer .art-content-layout .art-layout-cell
{
   margin: 1%;
   width: 98% !important;
   float: left;
   box-sizing: border-box;
}

.responsive .responsive-layout-row-2 .responsive-tablet-layout-cell,
.responsive.responsive-tablet .art-footer .art-content-layout .responsive-layout-row-2 .art-layout-cell
{
   width: 48% !important;
}

.responsive .responsive-layout-row-3 .responsive-tablet-layout-cell,
.responsive.responsive-tablet .art-footer .art-content-layout .responsive-layout-row-3 .art-layout-cell
{
   width: 31% !important;
}
.responsive .art-post
{
   border-radius: 0;
}

.responsive .art-footer-inner
{
   min-width: 0;
}
.responsive .art-footer
{
    text-align: center;
}

@media screen and (max-width:767px) {

.footer_box {
   width: 100%;
}

.mail_box {
   display: none;
}

.sp_mail_box {
   width: calc(100% - 20px);
   display: block;
   background: #fff;
   border: 10px solid #E0DED8;
   padding: 10px;
   box-sizing: border-box;
   margin: 0 auto;
}

.tel {
   max-width: 268px;
   width: 100%;
   margin: 0 auto 20px;
}

.mail_btn {
   max-width: 260px;
   width: 100%;
   margin: 0 auto;
}

.header_in {
   width: 100%;
   height: auto;
   background: none;
   padding: 10px;
   box-sizing: border-box;
} 

.main-visual {
   width: 100%;
   margin: 20px auto;
}

.main-visual img {
   width: 150% !important;
   position: relative;
   left: -50%;
}

.contact_box {
   display: none;
}

.sp_contact_box {
   width: 90%;
   margin: 0 auto ;
   display: block;
   background: #fff;
   padding: 30px 0;
   border: 1px solid #000;
   box-sizing: border-box;
}

.sp_contact_box_bg {
   background: #fff;
}

.sp_contact_box .tel {
   color: blue;
   font-weight: bold;
   font-size: 20px;
   margin-bottom: 5px;
}

.sp_contact_box .tel a{
   text-decoration: none;
}

.text_link p {
   padding: 0;
   -webkit-box-pack: start;
           justify-content: flex-start;
}

/* .text_link a {
   padding: 5px;
} */

.btn01 {
   width: 100%;
   max-width: 260px;
   margin: 0 auto 20px;
   padding: 0;
}

.btn02 {
   width: 100%;
   max-width: 260px;
   margin: 0 auto;
   padding: 0;
}

}