@charset "UTF-8";
/* freepage 共通css */
#tblLayout {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

/* feature */
.feature {
  max-width: 1000px;
  width: 100%;
  font-size: 15px;
  text-align: center;
  color: #000;
  line-height: 1.5;
  margin: 40px auto 80px;
  /* common */
  /* 編集ここから */
  /* タブ切り替え */
  /* タブボタンの色味変更 記述 */
  /*エリアの表示非表示と形状*/
  /*areaにis-activeというクラスがついた時の形状*/
  /* パネル切り替えのアニメーション */
}

@media screen and (max-width: 960px) {
  .feature {
    font-size: 12px;
    margin: 20px auto 40px;
  }
}

.feature img {
  width: 100%;
  height: auto;
}

.feature .only-desktop {
  display: block !important;
}

.feature .only-mobile {
  display: none !important;
}

.feature .only-narrow {
  display: none !important;
}

@media screen and (max-width: 960px) {
  .feature img {
    width: 100%;
    height: auto;
  }
  .feature .only-desktop {
    display: none !important;
  }
  .feature .only-mobile {
    display: block !important;
  }
  .feature .inline-block {
    display: inline-block;
  }
}

@media screen and (max-width: 480px) {
  .feature .only-narrow {
    display: block !important;
  }
}

.feature__kv {
  margin-bottom: 40px;
}

@media screen and (max-width: 960px) {
  .feature__kv {
    margin-bottom: 25px;
  }
}

.feature__tab {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 40px;
}

@media screen and (max-width: 960px) {
  .feature__tab {
    width: 95%;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    margin: 0 auto 25px;
  }
}

.feature__tab__btn {
  background-color: #EBD8BF;
  font-size: 20px;
  font-weight: 500;
  padding: 35px 10px;
  cursor: pointer;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

@media screen and (max-width: 960px) {
  .feature__tab__btn {
    font-size: 13px;
    padding: 20px 10px;
  }
}

.feature .feature__tab__btn.active {
  background-color: #674313;
  color: #fff;
}

.feature .area {
  overflow: hidden;
  opacity: 0;
  height: 0;
  visibility: hidden;
}

.feature .area.active {
  opacity: 1;
  height: auto;
  visibility: visible;
  -webkit-animation: panel-show .3s ease-in-out forwards;
          animation: panel-show .3s ease-in-out forwards;
}

@-webkit-keyframes panel-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes panel-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.feature__anchor-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 40px;
}

@media screen and (max-width: 960px) {
  .feature__anchor-list {
    width: 95%;
    gap: 10px;
    margin: 0 auto 25px;
  }
}

.feature__anchor-list__txt {
  margin-top: 10px;
}

@media screen and (max-width: 960px) {
  .feature__anchor-list__txt {
    margin-top: 5px;
  }
}

.feature__contents {
  margin-bottom: 60px;
}

@media screen and (max-width: 960px) {
  .feature__contents {
    width: 95%;
    margin: 0 auto 25px;
  }
}

.feature__contents:last-child {
  margin-bottom: 0;
}

.feature__teaser {
  font-size: 30px;
}

@media screen and (max-width: 960px) {
  .feature__teaser {
    font-size: 18px;
  }
}