@charset "UTF-8";

/* --------- メディアクエリ---------- */

/*PCの場合にはメニューを表示させない*/
@media (min-width: 768px) {
  .for-sp{
     display:none;
   }
}


@media (any-hover: hover) {
  .buttonOutlineGradient::before {
    transition: opacity 0.2s;
    will-change: filter;
  }

  .buttonOutlineGradient:hover::before {
    opacity: 1;
  }
}

@media screen and (max-width: 480px) {
  .arrow {
      display: none;
  }
  .news_list_item a {
      padding-right: 0;
  }

  }

@media screen and (max-width: 767px){
  .news-list .item a{
    flex-wrap: wrap;
  }
  .news-list .item .date{
    min-width: 100px;
  }
  .news-list .item .title{
    width: 100%;
    text-align: center;
    padding: 10px 0 10px 0;
  }
  .wrap{
    flex-direction: column;
    align-items: center;
  }
  .wrap .naiyou p{
    max-width: 100%;
  }
  .nayami img{
    max-width: 100%;
  }
  .commitment .point{
    flex-direction: column;
  }
  .campaign{
    max-width: 100%;
  }
  img{
    max-width: 100%;
  }
  .access .matome{
    flex-direction: column;
  }
  .about h3 {
    font-size: 30px;
    letter-spacing: 0.3em;
    line-height: 50px;
}
.about {
  padding: 0 0 50px 0;
  justify-content: center;
}
#top nav ul{
  display: none;
}
h1{
  font-size: 25px;
}
h4 {
  font-size: 30px;
  padding: 30px 0 0 0;
}
header h1 {
  padding: 0px;
}
.news-list .item a {
  padding: 0px;
}

.inner {
  padding: 0px;
}

.content {
  margin: 0.5em auto;
  padding: 1em;
  width: 80%;
  flex-shrink: 0;
  }
.menu .matome {
  flex-direction: column;
  background-color: #fff;
  color: #2C332C;
  justify-content: center;
  margin: 30px;
}
p{
  font-size: 13px;
}
.naiyou{
  padding: 0;
}

.naiyou p{
  line-height: 2.0em;
}

.naiyou_2 p {
  padding: 20px;
  text-align: left;
  line-height: 2em;
  display: inline-block;
}

h2 {
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.1em;
  padding: 10px 0 20px 0;
}
.contact p{
  margin: auto;
    text-align: center;
    line-height: 1.5em;
    letter-spacing: 0.2em;
    font-size: 12px;
    padding: 10px;
}


  /* --------ハンバーガーボタン---------- */
  
  
  .openbtn1 span:nth-of-type(1) {
    top:15px; 
  }
  
  .openbtn1 span:nth-of-type(2) {
    top:23px;
  }
  
  .openbtn1 span:nth-of-type(3) {
    top:31px;
  }
  
  /*activeクラスが付与されると線が回転して×に*/
  
  .openbtn1.active span:nth-of-type(1) {
      top: 18px;
      left: 18px;
      transform: translateY(6px) rotate(-45deg);
      width: 30%;
  }
  
  .openbtn1.active span:nth-of-type(2) {
    opacity: 0;/*真ん中の線は透過*/
  }
  
  .openbtn1.active span:nth-of-type(3){
      top: 30px;
      left: 18px;
      transform: translateY(-6px) rotate(45deg);
      width: 30%;
  }
  /*========= レイアウトのためのCSS ===============*/
  
  /* body{
    background:#f3f3f3;
      padding:20px;
  } */
  
  
  a{
    color: #333;
    text-decoration: none;
  }
  
  /* .lead{
    margin:20px 0 0 0;
  } */
  
  .btn-block{
    width:200px;  
    padding: 30px;
  }

a#header_contact{
  display: none;
}


}


@media screen and (max-width: 768px) {
  header{
    position: static;
    padding: 10px 20px;
  }
  html{
    padding-top: 0px;
  }

  nav ul.is-active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(44, 51, 44, 0.8);
    color: #fff;
    z-index: 1000;
    padding-top: 60px;
    padding-right: 0px;
    box-sizing: border-box;
  }

  nav ul.is-active li {
    padding: 10px 20px 10px 20px;
    border-bottom: 1px solid #fff;
    width: 100%;
  }

  #top nav ul.is-active{
    display: block;
  }


    /* --------ハンバーガーボタン---------- */

  /* .buttonUnderline{
    width: 150px;
  } */

  .openbtn1 {
    position: relative;
    z-index: 1001;
    background:#567756;
    cursor: pointer;
    width: 50px;
    height:50px;
    border-radius: 5px;
  }

    /*ボタン内側*/
    .openbtn1 span{
      display: inline-block;
      transition: all .4s;/*アニメーションの設定*/
      position: absolute;
      left: 14px;
      height: 3px;
      border-radius: 2px;
    background: #fff;
      width: 45%;
    }

    .openbtn1 span:nth-of-type(1) {
      top:15px; 
    }
    
    .openbtn1 span:nth-of-type(2) {
      top:23px;
    }
    
    .openbtn1 span:nth-of-type(3) {
      top:31px;
    }
    
    /*activeクラスが付与されると線が回転して×に*/
    
    .openbtn1.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    
    .openbtn1.active span:nth-of-type(2) {
      opacity: 0;/*真ん中の線は透過*/
    }
    
    .openbtn1.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
    /*========= レイアウトのためのCSS ===============*/
    
    /* body{
      background:#f3f3f3;
        padding:20px;
    } */
    
    
    a{
      color: #333;
      text-decoration: none;
    }
    
    /* .lead{
      margin:20px 0 0 0;
    } */
    
    .btn-block{
      width:200px;  
      padding: 30px;
    }
  
  a#header_contact{
    display: none;
  }
  
  /* ーーーーーーーーーー NEWS ーーーーーーーーーー */
  .news_in ol {
    display: flex;
    margin: auto;
    flex-wrap: wrap;
    padding: 20px;
}
  .news{
    padding-bottom: 50px;
  }
  .naiyou p{
    padding: 0px 50px 30px 50px;
  }

  .nayami{
    padding: 0 20px;
  }


  .campaign{
    padding: 50px;
  }


  .flow h1{
    padding: 0;
  }  
  
  .kau{
    max-width: 60%;
    margin: auto;
  }
  .oder{
    max-width: 60%;
    margin: auto;
  }
  .adovice{
    max-width: 60%;
    margin: auto;
  }

  .matome.gazou{
    max-width: 60%;
    margin: auto;
    height: 50%;
  }
  .naiyou_2{
    padding: 0 0 30px 0;
    max-width: 100%;
    align-items: center;
    margin: auto;
  }

  .flow ol{
    padding: 0 30px 30px 30px;
  }

  .access{
    padding: 0 0 0 0;
  }

  .about-text{
    display: block;
  }

  img{
    vertical-align: top;
    width: 100%;
  }
  
  footer nav ul li a{
    padding: 20px;
  }

  .buttonUnderline{
    height: 30px;
  }

  /* ----- コンセプト ----- */
  .atama h1{
    padding: 0 50px 0 50px;
  }
  

/* ----- フッター ----- */
.footer-list-item{
  margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
.footer-list-item{
  flex-direction: column;
}
.footer{
  padding-bottom: 85px;
}

#footer .secondary{
  padding: 5px 5px 65px 5px;
}

/* footer-logo */
#footer .logo {
  font-size: 16px;
}

/* address */
.address {
  font-size: 12px;
}

/* navi */
.navi-row {
  display: block;
  margin-top: 15px;
  flex-wrap: wrap;
}
#footer .navi {
  font-size: 14px;
}
#footer .navi li {
  margin-top: 10px;
  font-size: 14px;
}

/* sns-navi */
#footer .sns-navi {
  margin: 20px 0 0;
  padding: 0;
}
#footer .sns-navi li {
  margin: 0 20px 0 0;
  padding: 0;
  font-size: 18px;
}

/* sitenavi */
#footer .sitenavi {
  width: 100%;
  text-align: center;
  font-size: 12px;
}

/* copyright */
#footer .copyright {
  width: 100%;
  text-align: center;
  font-size: 12px;
}

  /* ----- ラインで連絡＆電話で連絡 ----- */

  /*メニューをページ下部に固定*/
#sp-fixed-menu{
  position: fixed;
  width: 100%;
  bottom: 0px;
  font-size: 0;
  opacity: 0.9;
  z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
  display: flex;
  list-style: none;
  padding:0;
  margin:0;
  width:100%;
}

#sp-fixed-menu li{
  justify-content: center;
  align-items: center;
  width: 50%;
  padding:0;
  margin:0;
  font-size: 14px;
  border-right: 1px solid #fff;
}

/*左側メニューを緑色に*/
#sp-fixed-menu li:first-child{
  background: #38b435;
}

/*左側メニューをオレンジ色に*/
#sp-fixed-menu li:last-child{
  background: #f3a324;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
  color: #fff;
  text-align: center;
  display:block;
  width: 100%;
  padding:20px;
}

/* ----- コンセプト ----- */
.atama{
  padding: 5px;
}
.atama h1{
  padding-top: 30px;
}
.atama p{
  text-align: left;
  padding: 30px;
}
.inbox{
  display:flex;
  flex-flow: column;
  color: #2C332C;
  background-color: #fff;
}
.inbox h1{
  padding: 30px;
}
.moji{
  margin: auto;
  justify-content: center;
  padding: 30px;
}
.moji h2{
  padding: 20px 0 20px 0;
  font-size: 18px;
}
.moji p{
  font-size: 14px;
}
.syoukai{
  margin: auto;
  white-space: nowrap;
  padding: 20px;
}

/* ----- こだわり ----- */
.kodawari {
  max-width: 100%;
  margin: auto;
}
.kodawari img{
  margin: auto;
  justify-content: center;
}
.kodawari p{
  margin: auto;
  max-width: 80%;
  padding: 10px 0 20px 0;
}
.cam{
  max-width: 80%;
  padding-top: 50px;
}
.contact{
  padding-top: 30px;
}
.contact h3{
  color: #fff;
  padding: 0 0 10px 0;
}
.access h1{
  padding: 30px 0 0 0;
}
.access h2{
  padding: 0 0 30px 0;
  color: #2C332C;
}
.access .naiyou{
  padding-bottom: 30px;
}

/* ----- お客様の声 ----- */
.koe {
  padding: 50px 0 0 0;
}
.bunsyou p{
  padding: 0 30px 0 30px;
  text-align: left;
}
.naka .time p{
  text-align: right;
}
.naka .time{
  margin-right: 20px;
}
.bun_1{
  flex-direction: column;
  padding: 0 0 30px 0;
}
.bun_1 h2{
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.1em;
  padding: 30px 0 10px 0;
}
.bun_2{
  flex-direction: column;
  padding: 0 0 30px 0;
}
.bun_2 h2{
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.1em;
  padding: 30px 0 10px 0;
}

.bun_3{
  flex-direction: column;
  padding: 0 0 30px 0;
}
.bun_3 h2{
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.1em;
  padding: 30px 0 10px 0;
}

.bun_4{
  flex-direction: column;
  padding: 0 0 30px 0;
}
.bun_4 h2{
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.1em;
  padding: 30px 0 10px 0;
}

.access .map{
  padding: 0;
}


  /* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: none !important; }
.sp {
  display: block !important;
  width: 100%;
}


}