html, body {
   font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic','メイリオ', Meiryo,sans-serif;
   text-align: center;
}
a {
   text-decoration: none;
   color: #000000;
}
header {
    background-image: url(../img/header_picture.jpg);
    background-size: cover;
    width: 100%;
    height: 200px;
    position: relative;
    background-position: center;

}
header h1 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   color: white;
}
h2 {
   text-align: center;
   font-size: 20px;
}
main {
   width: 95%;
   margin: 0 auto;
}

/* ====================== */
.tab-group{
   margin-top: 100px;
   display: flex;
   justify-content: center;
 }
 h2 {
   font-size: 16px;
 }
 p {
   line-height: 1.5rem;
 }
 .tab{
   font-size: 24px;
   text-align: center;
   width: 200px;
   padding-top: 20px;
   padding-bottom: 15px;
   list-style:none;
   text-align:center;
   cursor:pointer;
   border-radius: 10px;
   background-color: rgb(58, 56, 56);
   box-shadow: 0px -5px 10px #000000 inset;
   color: white;
   margin-left: 40px;
   margin-right: 40px;
 }
.tab-text {
   font-size: 16px;
   padding-top: 30px;
}

 .panel{
   display:none;
 }
 .panel-group {
   margin-top: 50px;
 }
 .tab.is-active{
   background:rgb(219, 112, 24);
   box-shadow: initial;
   color:#FFF;
   transition: all 0.2s ease-out;
 }
.is-show{
   display:block;
 }
.none {
   display: none;
}
 .formmailer-embed {
   margin-top: 50px;
 }
 .sp {
   display: none;
}

 @media screen and (max-width:768px) {
   h1 {
      font-size: 26px;
   }
   header {
      height: 100px;
   }
   .tab-group {
      margin-top: 50px;
   }
   .tab {
      margin-right: 10px;
      margin-left: 10px;
      font-size: 15px;
   }
   .tab-text {
      font-size: 16px;
   }
   .panel_content {
      font-size: 13px;
    }
   .sp {
      display: block;
   }
 }