@charset "utf-8";
/* CSS Document */
@media screen and (max-width:736px) {
   html, body {
      min-width: 0;
      width: 100%;
      height: 100%;
      -webkit-text-size-adjust : 100%;
    }
    img {
    	max-width: 100% !important;
      height: auto;
    }

    .sp_only {display: inherit;}
    .sp_none {display:none;}

    .inner, .inner.w900, .inner.w1100, .inner.w1400{
    	width: 100%;
      max-width: 100%;
      margin: 0 auto;
      padding: 0 4%;
    }
    .inner.sp_width_invalid{
    	width:100%;
    }
	
  	.tac_pc{text-align: left;}
  
    article{padding: 9rem 0;}


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

  header

  ---------*/
  header{
    display: block;
    align-items: baseline;
    width: 100%;
    height: 60px;
    padding: 0 0 0 0;
    /* position:static; */
    z-index: 99;
    box-sizing: border-box;
    /* position: relative; */
    /*box-shadow: 2px 4px 8px -1px rgba(0,0,0,0.2);*/
  }

  .siteid,
  header.fixed .siteid{
    width: 21%;
    padding: 1.5% 0 1.5% 1%;
    margin: 0 0 0 0;
    line-height: 0;
    height: 100%;
    position: relative;
    z-index: 999;
  }
 
 .hdr_in.inner{
  padding: 1%;
}


  header #navi{
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    /*top: 60px;*/
    top:0;
    bottom: 0;
    z-index: 990;
    /*padding-top: 100px;*/
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    transition: -webkit-transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    overflow-y: auto;
    background-color: #fff;
  }
  .open #navi {transform: translateX(0);}

  header #navi ul{flex-direction: column;padding-top: 5.0rem;}
  header #navi ul li{width: 100%;}
  header #navi ul li a,
  header.fixed nav#navi ul li a{
    padding: 4% 3%;
    width: 100%;
    text-align: center;
    border-bottom: 1px dotted #ccc;
    font-size: 1.3rem;
  }
  header #navi ul a:hover{
    border-bottom:none;
    background-color: #7A6A56;
    color: #fff;
  }
  nav#navi ul li.brown{margin-left: 0;}
  nav#navi ul li.brown a{justify-content: center;}
  nav#navi ul li.brown:not(:last-of-type) a{border-bottom: 1px dotted #ccc;}

  #nav-toggle {
    display: block;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    box-sizing: border-box;
    background: #7A6A56;
    z-index: 999;
  }
  #nav-toggle > div {
    position: relative;
    width: 36px;
  }
  #nav-toggle span {
    width: 80%;
    height: 2px;
    left: 10px;
    display: block;
    background: #fff;
    position: absolute;
    transition: top .5s ease, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, top .5s ease;
    transition: transform .3s ease-in-out, top .5s ease, -webkit-transform .3s ease-in-out;
    /* #nav-toggle close */
  }
  #nav-toggle span:nth-child(1) {top: 10px;}
  #nav-toggle span:nth-child(2) {top: 18px;}
  #nav-toggle span:nth-child(3) {top: 26px;}
  #nav-toggle span:nth-child(4) {
    color: #fff;
    top: 30px;
    background:none;
    height: auto;
    left:8px;
    font-size: 1.0rem;
    text-align: center;
  }

  .open #nav-toggle span:nth-child(1) {
    top: 20px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .open #nav-toggle span:nth-child(2) {
    top: 20px;
    width: 0;
    left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
    top: 20px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }

  /*ヘッダーボタン*/
  .sp_btn_list li + li {
      margin-left: 0.5rem;
  }

  .sp_btn_list li a {
      width: 45px;
      height: 45px;
      background: #253845 no-repeat center center;
      border:1px solid #253845;
      display: block;
  }

  .sp_btn_list li a:hover {
      background-color: #fff;
  }



  .hdr_btn {
    position: fixed;
    bottom: 1rem;
    left: 0;
    right: 0;
    margin: auto;
    width: 96%;
    height: auto;
    flex-direction: row;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 1.5rem 1rem;
    border-radius: 5px;
}

.hdr_btn.contact:before {
    margin-bottom: 0;
    margin-right: 1rem;
    width: 26px;
    height: 20px;
}
  /*----------

  index

  ---------*/
  .index-main-inner{
    height: 164vw;
    width: 100%;
  }
  
  .index-main-bg {
    height: 100%;
  }

  .index-main-slide {
      height: 100%;
  }
  
  .index-main-slide .swiper-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
  .index-main-txtarea {
    left: 0;
    right: 0;
    padding: 0 2rem;
  }

  .index-main-ttl {
    max-width: 80%;
    margin: calc(60px + 8vw) 0 1.5rem;
  }
  

  .index-main-subttl{
    max-width: 95%;
  }
  
  .index-main-desc {
    line-height: 2em;
}
  
  

  .index-concept {
    padding-top: 9rem;
    padding-bottom: 21rem;
    margin-bottom: -6rem;
   background-position: top -6rem center;
  }
  
  .index-concept .inner {
    background-size: 85px;
    background-position: top 35rem right 1rem;
}


.index-concept .ttl {
  margin-bottom: 6.5rem;
}


.index-concept_cont .ttlarea {
    width: 110px;
    margin: 0 auto;
}
 
  .index-concept .txtarea {
    margin-top: 10rem;
    max-width: 100%;
    min-width: auto;
    padding-top: 0;
  }

 
 .index-concept .txtarea .txt {
    font-size: 1.4rem;
    text-align: left;
 }
 

 .index-feature {
  padding-top: 9rem;
  padding-bottom: 3rem;
}


.index-feature .ttlarea .ttl {
  max-width: 148px;
  margin-right: auto;
  margin-bottom: 2rem;
}


.feature-list .item, .feature-list .item:nth-child(3n) {
  width: 90%;
  margin: 0 auto 6rem;
  background-size: 67%;
  background-position: center center;
  min-height: 57vw;
}

.feature-list .item-in {
  padding: 0;
  justify-content: center;
}

.feature-list .item_ttl {
  font-size: 2.6rem;
  margin-bottom: 1rem;
}


.feature-list .item_ttl:before {
  width: 34px;
  height: 28px;
}

.feature-list .item_point_list{
  font-size: 1.5rem;
}



.index-price {
  padding-top: 16rem;
  background-size: 300%;
}



.index-price .inner:before {
  width: 77px;
  height: 88px;
  bottom: -11rem;
}

.index-price .inner:after {
  width: 76px;
  height: 112px;
}


.index-price .ttl {
  font-size: 3rem;
}

.index-price .price_list .img {
  max-width: 100%;
  margin-bottom: 2rem;
}

.index-price .price_list .notice-list li + li {
  margin-top: 0.8rem;
}




.index-about {
  margin-top: -17rem;
  padding-top: 38rem;
  padding-bottom: 12rem;
}

.index-about .inner {
  background-position: top left 1rem;
  background-size: 94%;
}

.index-about-cont {
  padding: 0;
  flex-wrap: wrap;
}

.index-about-cont .txtarea {
  width: 100%;
  font-size: 1.4rem;
  padding-top: 3rem;
  margin-bottom: 4rem;
}

.index-about-cont .txtarea .ttl {
  font-size: 2.6rem;
  margin-bottom: 2rem;
}

.index-about-cont .imgarea {
  width: 100%;
  justify-content: center;
}

.index-about-cont .imgarea img {
  width: 42%;
}


.index-greeting {
  padding-top: 7rem;
}


.index-greeting-cont .imgarea {
  max-width: 80%;
  margin-bottom: 4rem;
}

.index-greeting-cont .txtarea .ttl {
  margin-bottom: 2rem;
}

.index-greeting-cont .txtarea .txt {
  margin-bottom: 3rem;
}
  /*----------

  下層ページ共通

  ---------*/

  /* ボタン */
  .linkbtn {
    width: 86%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .linkbtn a{
    text-align: center;
    width:100%;
    padding: 15px 3%;
    font-size: 1.1rem;
  }
  .linkbtn a::after{
    content: '';
    position: absolute;
    right: 10px;
    top: 45%;
  }
  .linkbtn.red {
    width: 85%;
  }
  .linkbtn.red a{
    font-size: 1.2rem;
    margin: 20px auto;
  }
  
  .linkbtn.redlarge {
    width: 80%;
  }
  .linkbtn.redlarge a{
    font-size: 1.3rem;
    margin: 20px auto;
  }

   .linkbtn_contact {
    max-width: 80%;
    margin: auto;
   }
   .linkbtn_contact a {
     padding: 1.5rem 1rem;
   }

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

  footer

  ---------*/

  /* side-bnr */
  .side-bnr{
    display: none;
    position: fixed;
    right: 0;
    top:30%;
    z-index: 90;
  }
  .side-bnr ul li{
    margin-bottom: 10px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    letter-spacing: 0.2rem;
  }
  .side-bnr ul li a{
    display: block;
    text-decoration: none;
    background-color: #00758b;
    color: #fff;
    background-image: url(../images/common/icon-mail.png);
    background-position: center 10px;
    background-repeat: no-repeat;
    padding: 34px 5px 10px;
  }
  .side-bnr ul li a:hover{
    color: #000;
    background-color:#ffd000;
  }

  /* page-top */
  #page-top {
      position: fixed;
      bottom: 2%;
      right: 2%;
      z-index: 900;
  }
  #page-top a {
    width: 40px;
    height: 40px;
    background-size: 100%;
  }
  #page-top a:hover {
  	background-size: 100%;
  }
 
 
  footer {
      padding-top: 3rem;
  }

  
  .foot-content {
      font-size: 1.4rem;
      padding-bottom: 6rem;
      padding-top: 7rem;
  }
 
 
  .foot-content .inner:before {
      width: 34vw;
      height: 31vw;
      top: -12rem;
      left: 2%;
  }
 
   .foot-content .inner:after {
       width: 26vw;
       height: 26vw;
       top: -13rem;
   }
 
  .foot-content-ttl {
    max-width: 56%;
    margin: 0 auto 1rem;
    text-indent: 0.3em;  
 }

 .foot-content-ttl img{
  margin-left: -1rem;
 }

  .foot-address {
      text-align: center;
      margin-bottom: 3.5rem;
  }
  .foot-infoarea {
      padding: 0 5%;
      margin-bottom: 3rem;
  }
  .foot-infoarea .foot-info {
      max-width: 90%;
      text-align: center;
      margin: 0 auto;
  }


  .foot-infoarea .foot-time {
      margin-top: 1rem;
      margin-bottom: 0;
      line-height: 1.6;
      text-align: center;
  }


  .foot-detail {
      max-width: 100%;
      margin-right: 0;
      margin-bottom: 7rem;
  }

  .foot-detail th {
      width: 33%;
  }

  .foot-map {
    max-width: 90%;
    height: 280px;
  }

  .copy p{
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0;
    padding: 2.0rem 5% 20vw ;
  }
  
  

}