@charset "UTF-8";


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

/* main-layout
==========================================================*/
#headInner { width: 94%;}

#menuInner { width: 842px; margin: 0 auto;}
  #menuInner ul { margin: 0;}
  #menuInner li a { padding: 12px 22px; }

#h1Outer img { width: 100%; height: auto;}

/* index
==========================================================*/
#ind_mainImage { height: auto;}
#ind_mainImageInner img { width: 100%; height: auto; vertical-align: bottom;}

#contentIndex { width: 92%; max-width: 910px;}
  #contentIndex #mainBlock { width: -moz-calc(100% - 250px); width: -webkit-calc(100% - 250px); width: calc(100% - 250px); }
    .ind_nav .ind_navBlock { width: 48%;}
    .ind_nav .ind_navBlock .ind_ttl img, .ind_nav .ind_navBlock .ind_btn_img img { width: 100%;}
  #contentIndex #sideNav { max-width: 220px; }
    #contentIndex #sideNav img { width: 100%;}

/* kasou common
==========================================================*/
#content #mainBlock { width: -moz-calc(100% - 250px); width: -webkit-calc(100% - 250px); width: calc(100% - 250px); margin: 20px 0;}
  #content #mainBlock img { width: 100%;}
  #content #sideNav, #content #sideNavBlog { max-width: 220px; margin-right: 0;}
  #content #sideNav img, #content #sideNavBlog img { width: 100%;}

}



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

/* main-layout
==========================================================*/
#menu {}
	#menuInner { width: 768px; margin: 0 auto;}
  #menuInner ul { margin: 0;}
  #menuInner li a { padding: 12px 18px; }

/* index
==========================================================*/
#contentIndex #mainBlock { width: 70%}
#contentIndex #sideNav { width: 27%; max-width: 100%; }

/* kasou common
==========================================================*/
#content #mainBlock { width: 70%}
#content #sideNav, #content #sideNavBlog { width: 27%; max-width: 100%; }

}



@media screen and (min-width: 769px) {

	#menu { display: block !important;}

}




/* hack
========================================================== */

.sp-hide{ display: block;}
.sp-hide-inline{ display: inline;}
.sp-show, .sp-shpw550{ display:none;}
.sp-show-inline, .sp-show-550 { display:none;}

/* ------------------------------------ */



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

/* Base Setting
==========================================================*/

img{ max-width: 100%; height:auto; }

.sp-hide-inline, .sp-hide{ display: none !important;}
.sp-show{ display:block;}
.sp-show-inline{ display:inline;}
.sp-br-none br {display: none;}


/* main-layout
==========================================================*/

.col-l{ float: none; width: 100%;}
.col-r{ float: none; width: 100%;}

#head { background: none; font-size: 14px; height: 60px;}
#logo { width: 110px; float:none; padding-top: 13px;}

/* menu trigger */
  .navInner { display: block; position: fixed; right: 6%; top: 20px; z-index: 9999;}
  .menu-trigger { width:24px; height: 20px; line-height: inherit; cursor: pointer; position:fixed; top: 20px; right: 20px; z-index: 9999;}
  .menu-trigger.active { margin-left:0px;}
  .menu-trigger,
  .menu-trigger span { display: inline-block; transition:all .4s; box-sizing: border-box; }
  .menu-trigger span{ position: absolute; left: 0; width: 100%; height: 2px; background-color: #232323; border-radius: 10px;}
    .menu-trigger span:nth-of-type(1){top:0}
    .menu-trigger span:nth-of-type(2){top:9px}
    .menu-trigger span:nth-of-type(3){bottom:0}
    .menu-trigger:not(.active):hover span:nth-of-type(1){top:2px}
    .menu-trigger:not(.active):hover span:nth-of-type(3){bottom:2px}
    .menu-trigger.active span:nth-of-type(1){-webkit-transform:translateY(9px) rotate(-45deg);transform:translateY(9px) rotate(-45deg); background-color: #232323;}
    .menu-trigger.active span:nth-of-type(2){opacity:0}
    .menu-trigger.active span:nth-of-type(3){-webkit-transform:translateY(-9px) rotate(45deg);transform:translateY(-9px) rotate(45deg); background-color: #232323;}


/* 開閉メニュー */
  #menu        { display: none; position: fixed; top: 0; left: 0; width: 100%; height:100vh !important; overflow: hidden; z-index: 9991; background:#fff; margin: 0; box-sizing: border-box; font-size: 16px; border: none;}
  #menu.active { display: block;}
  #menu #menuInner { width: 100%; height:100%; position: relative; margin:0 auto; background: none; text-align: left; overflow-y: scroll; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;}
  #menuInner ul { margin: 60px 0 0; line-height: 24px; box-sizing: border-box; padding-top: 10px;}
  #menuInner li { float: none; position: static;}
  #menuInner li::before, #menuInner li:nth-child(7)::after { content: none;}
  #menuInner li a { padding: 10px 5%; }

  #menuInner ul.sp-sns { margin: 10px auto 20px; max-width: 270px; width: 65%; padding-top: 0;}
  #menuInner ul.sp-sns li { width: 30%; text-align: center;}
  #menuInner ul.sp-sns li a { display: block; line-height: 50px; font-size: 22px;}

  #menuInner .sp-tel { margin-top: 20px;}

  #sp-head-logo { width: 100%; height: 60px; position: fixed; top:0; left: 0; text-align: left; background: #fff;}
  #sp-head-logo img { padding-top: 13px; margin-left: 3%;}



#content { margin: 0 auto 10%; min-height: 250px;}
	#content #mainBlock { width: 100%; float: none;}
  #content #sideNav { display: none;}

.toTop { margin: 0 auto 0;}
#footer { background: none; padding: 5% 0 0;}


/* index
==========================================================*/
#ind_mainImage { margin: 0 0 8%;}
#contentIndex { margin: 0 auto 10%; }
  #contentIndex #mainBlock { width: 100%; float: none;}
  #contentIndex #sideNav { width: 100%; float: none;}
  #contentIndex #sideNav #ind_news { margin: 10px auto 5%; padding-top: 6%; border-top: 1px solid #ccc;}
  #sidebnr_box { margin-top: 8%;}
  #sidebnr_box ul::after { content:""; display: block; width: 32%;}
  #sidebnr_box ul li { display: flex; width: 32%; margin-bottom: 1.6vw;}
  #menu #sidebnr_box { margin-top: 0;}
  #menu #sidebnr_box ul { width: 90%; margin: 40px auto 20vh; padding-top: 0;}
  #menu #sidebnr_box ul li a { padding: 0;}

.ind_lead_txt { margin-bottom: 30px;}

#toppages .illust_box { margin: 0 auto 5%; max-width: 100%; width: 100%;}
#toppages .illust_box p { margin-top: 0;}
#toppages #contentIndex #sideNav .illust_box img { max-width: 300px; width: 40%;}

.ind_news_ttl { width: 50%; min-width: 220px; margin: 0 auto 3%;}



/* kasou commons
==========================================================*/
ul#panNavi { float: none; margin: 0 0 5px 0; font-size: 11px; }
#h1Outer .sp-h1ttl { font-size: 28px; padding-bottom: 6px; border-bottom: 1px solid #333; margin-bottom: 5%; letter-spacing: .05em;}

.imgBox { width: 40%; }

/* ouen */
.btn_ouen_link { margin: 0 auto 20px;}
.illust_box { margin: 10% auto 5%; width: 100%;}
#content #mainBlock .illust_box img { max-width: 300px; width: 40%;}



/* BLOG
==========================================================*/
#blogpages #content { margin: 0 auto 10%;}
#content #sideNavBlog { width: 100%;}
#content #sideNavBlog #sidebnr_box {display: none;}
#content #sideNavBlog .pageLink.pageLink-new ul li:nth-child(n + 6), #content #sideNavBlog .pageLink.pageLink-archive ul li:nth-child(n + 6) {display: none;}

}



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

.sp-shpw550 { display: block;}
.sp-show-550 { display: inline-block;}

/* index
==========================================================*/
.ind_lead_txt { font-size: 3.8vw;}
.ind_lead_txt span.elm01  { font-size: 4.1vw; margin: 5px 0;}

.ind_lead_txt .ind_lead_time { margin: 10% auto 5%; font-size: 20px;}

.goshuin_oshirase { font-size: 15px; padding: 15px 5px; letter-spacing: 0;}
  .goshuin_oshirase ul { margin: 10px auto;}
  .goshuin_oshirase ul li { font-size: 17px; letter-spacing: .1em;}
  .goshuin_oshirase span { font-size: 17px; display: inline-block; margin-right: 0; line-height: 1.4;}

#contentIndex #sideNav #ind_news { margin: 5% auto 10%; padding-top: 8%;}


/* kasou commons
==========================================================*/
ul#panNavi { display: none;}
#h1Outer .sp-h1ttl { font-size: 24px; padding-bottom: 5px; }

.imgBox { width: 100%; margin: 5px 0 20px; }

.goshuin_oshirase .ind_goshuin_halfimg { display: block; margin-bottom: -10px;}
.goshuin_oshirase .ind_goshuin_halfimg div { width: 100%;}

/* place */
#placepages #cnt01 .imgBox, #placepages #cnt02 .imgBox { display: none;}
#placepages #cnt01 .sp-imgBox, #placepages #cnt02 .sp-imgBox { display: block; text-align: center;}

/* service */
#servicepages .nenkitable_Container {position: relative; margin-bottom: 20px;}
#servicepages .nenkitable_Inner { overflow: hidden; overflow-x: hidden; overflow-x: hidden; overflow-x: auto; width: 100%; padding-bottom: 10px; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }
#servicepages .nenkitable_Inner table { margin-bottom: 5px; font-size: 13px;}

  @media screen and (max-width: 455px) {
    #servicepages .nenkitable_Container p { display: block; font-size: 0.8em; color: #888; margin-top: 5px;}
  }

/* bochi */
#bochipages #cnt02 .imgBox { display: none;}
#bochipages #cnt02 .sp-imgBox { display: block; text-align: center;}

/* goshuin */
.goshuin_halfimg { display: block;}
.goshuin_halfimg div { width: 100%;}
.goshuin_halfimg div.sp-hide-550 { display: none;}
p.illust_date { font-size: 17px; letter-spacing: .1em; margin-bottom: 10px;}
p.illust_date span { font-size: 1.3em; line-height: 1.4; display: block; margin-right: 0;}

#goshuinpages .goshuin_oshirase { margin-bottom: 30px;}


/* access */
.googleMap iframe { height: 50vh; }

/* ouen */
.sarana_image_box .sarana_image_top { margin-bottom: 1.5vw; }

/* contact */
.contfrm { margin: 0; }
  table.inqtable th { padding: 10px 20px; width: 100%; display: block; box-sizing: border-box; border-right: solid 1px #e0e0e0; }
  table.inqtable th br { display: none;}
  table.inqtable td{ width: 100%; display: block; box-sizing: border-box; border-left: solid 1px #e0e0e0; }
  table.inqtable td input[type="text"], table.inqtable td textarea { padding: 12px; font-size: 16px;}

}



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

/* index
==========================================================*/
.ind_nav { display: block;}
.ind_nav .ind_navBlock { width: 100%; margin: 0 auto 5%;}

#sidebnr_box ul li { width: 49%; margin-bottom: 1.8vw;}

/* kasou commons
==========================================================*/
#h1Outer .sp-h1ttl { font-size: 20px; padding-bottom: 3px; margin-top: 8px;}

/* ouen */
.sarana_memo { padding: 20px 20px;}
  .sarana_memo dt { width: 65px; line-height: 1.6;}
  .sarana_memo dd { width: -webkit-calc(100% - 65px); width: -moz-calc(100% - 65px); width: calc(100% - 65px); line-height: 1.6; margin-bottom: 5px;}

}