@charset "UTF-8";


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

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

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


@media screen and (min-width: 769px) {
  #menu { display: block !important;}
}

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

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

body { font-size: 1.5rem; line-height: 1.75;}

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

img { max-width: 100%; height: auto; }
.flex.sp-noflex { display: block;}



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

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

.Container { margin-top: 5px;}

#contents { margin-top: 20px;}
#mainBlock { max-width: 100%; width: 100%;}
#sideNav { max-width: 100%; width: 100%;}



/* header
==========================================================*/

#head { height: 60px;}
#head #logo { width: 150px; line-height: 60px;}

/* menu trigger */
  .navInner { display: block; position: fixed; right: 5%; 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: #555; 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: #555;}
    .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: #555;}

/* menu */
#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 #sp-logo { height: 60px; line-height: 60px;}
  #menu #sp-logo a { width: 150px; display: block;}
  #menuInner { height: 100%; text-align: center; overflow-y: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; margin-top: 0; -ms-overflow-style: none; scrollbar-width: none; }
  #menuInner::-webkit-scrollbar { display:none;}
  #menuInner ul li { position: static; width: 100%; margin-bottom: 5px;}
  #menuInner ul li::before, #menuInner ul li:nth-child(6)::after { content: none;}
  #menuInner ul li a { padding: 12px 5%; line-height: 1; }

  #menuInner .sp-head_tel { margin-top: 5%;}
  #menuInner .sp-head_tel a { font-size: 2.5rem;}
  #menuInner .sp-head_tel a img { margin-right: 10px; margin-top: -5px;}
  #menuInner .sp-head_add { padding-bottom: 160px; font-size: 1.3rem;}



/* fotter
==========================================================*/

#footerContainer { margin-top: 15%;}
  #footerContainer #footer { margin-top: 20px; padding: 8% 0;}
  #footerContainer #footer .copyright { font-size: 1rem;}



/* contents
==========================================================*/

.contElemOuter { margin-bottom: 15%;}
.imgBox { float: none; margin: 0 0 20px; text-align: center;}
.imgBox img { width: 100%; max-width: 400px;}

ul#panNavi { padding: 10px 0; text-align: left;}
@media screen and (max-width: 500px) {
  ul#panNavi { display: none;}
}

#h1Outer { height: 46px; }
  #h1Outer p { font-size: 2rem; padding: 0 30px; line-height: 46px; letter-spacing: 0;}
.h2ttl { padding: 10px 15px; font-size: 1.7rem;}



/* index
==========================================================*/

#ind_mainImage { margin: 0 0 8%; min-height: 250px;}
#ind_main { height: 80vw; max-height: 100%; }
#ind_main li { height: 80vw; }
@media screen and (max-width: 450px) {
  #ind_main { height: 90vw; }
  #ind_main li { height: 90vw; }
}

.ind_bnr_online { background: rgba(202, 184, 224, 0.5); padding: 10% 0; margin-bottom: 60px; width: 100vw; margin-left: -4vw;}

ul.ind_list li { width: 100%; max-width: 100%; margin-top: 8%;}
  ul.ind_list li .ind_h2ttl { text-align: center;}

#ind_news { margin-bottom: 12%;}
  #ind_news .ind_news_ttl { margin-bottom: 30px; text-align: center;}
  #ind_news .ind_news_ttl img { min-width: 220px; width: 40%; }



/* 下層共通
==========================================================*/

.kasou_main_img { height: 60vw;}



/* AboutPage
==========================================================*/

#about_aisatsu { overflow: hidden;}
#About_aisatsu .aisatsu_box .aisatsu_txt p.aisatsu_name { margin-bottom: 20px;}
.about_aisatsu_img { width: 108vw; margin-left: -11%;}

.rekishi_board { margin: 15px auto 0; padding: 10% 5% 10%; }
  .rekishi_board .rekishi_board_ttl { margin-bottom: 20px;}
  .rekishi_board p { font-size: 1.3rem;}

@media screen and (max-width: 650px) {
  .rekishi_gallery { margin: 40px 0 70px;}
  .rekishi_gallery .gallery { display: block;}
  .rekishi_gallery .gallery_left { width: 100%;}
  .rekishi_gallery .gallery_right { width: 100%; margin-top: 70px; height: 100vw;}
  .gallery p { font-size: 1rem;}
}



/* ContactPage
==========================================================*/

.contact_lead { margin-bottom: 25px;}

table.inqtable td { padding: 0 0 20px;}
table.inqtable td input, table.inqtable td textarea { padding: 8px 12px; }

.error_box { margin: 30px auto 30px; padding: 20px 15px; }

.submitwrap input[type=submit], .submitwrap input[type=button] { font-weight: bold; margin: 20px auto 20%;}

}