.top .section .ttlmt {
 margin-top: 100px;
}
.promotion_wrap {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
 margin-bottom: 20px;
}
.promotion_bg {
 background-color: #f8f6f6;
 padding: 20px;
 margin-bottom: 0;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
}
.promotion_one {
 margin-bottom: 20px;
}
.topics {
 margin-bottom: 30px;
 background: #fbe9e9;
 border-top: 1px solid #f2adad;
 border-bottom: 1px solid #f2adad;
 padding: 12px;
 color: #b20707;
}
.topics p, h3 {
 font-size: 1.6rem;
}
.topics h3 {
 font-weight: bold;
 margin-bottom: 8px;
}
/*アコーディオン*/
/*説明文 開閉*/
.topics_active {
  position: relative;
  overflow: hidden;
}
.topics_active input {
  display: none;
}
/*開くためのボタンとテキストを隠すグラデーションの設定*/
.topics_active label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  bottom: -10px;
  width: 100%;
  height: 140px; /* グラデーションの高さ */
  cursor: pointer;
  text-align: center;
  background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
}
/* 開いた時にグラデーションを消す */
.topics_active input:checked + label {
  background: inherit;
}
.topics_active input:checked + label {
   /*display: none ; *//*閉じるボタンを消す場合コメントアウトをはずす */
}
/*続きをよむボタン*/
.topics_active label:after,
.topics_active label::before {
  content: '';
  position: absolute;
  line-height: 3.5rem;
}
.topics_active label:after {
  z-index: 2;
  bottom: 20px;
  width: 13em;
  content: '続きを読む';
  color: #ffffff;
  background: #a82f2f;
  height: 35px;
}
.topics_active label::before {
  position: absolute;
  bottom: 32px;
  left: calc(50% - 4em);
  z-index: 3;
  width: 10px;
  height: 5px;
  background: #ffffff;
  clip-path: polygon(50% 100%, 0 0, 100% 0)
}
/*閉じるボタン*/
.topics_active input:checked + label:after {
  content: '閉じる';
}
.topics_active input:checked + label:before {
  left: calc(50% - 2.5em);
  transform: scale(1, -1);
}
.topics_active_container {
  /* 初期状態のmax-height（閉じた状態） */
  max-height: 200px; 
  /* アニメーションをここに追加 */
  transition: max-height 0.5s ease, padding-bottom 0.5s ease;
  background: #fbe9e9;
  border-top: 1px solid #f2adad;
  border-bottom: 1px solid #f2adad;
  padding: 12px;
  color: #b20707;
  padding-bottom: 70px;
}
.topics_active input:checked ~ .topics_active_container {
  max-height: 440px; /* コンテンツの最大想定高さより十分大きな値を設定 */
  /* transitionの指定は、.topics_active側にあるので不要です */
  background: #fbe9e9;
  border-top: 1px solid #f2adad;
  border-bottom: 1px solid #f2adad;
  padding: 12px;
  color: #b20707;
  padding-bottom: 120px;
}
.top .topFeatureList {
 margin-bottom: 100px;
}
.top .section .ttlmt_service {
 margin-top: 60px;
}
/*カテゴリアイコン*/
.top .topFeatureList .icon_container {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 2px;
}
.pcNone {
 display: none;
}
.spNone {
 display: block;
}
@media screen and (max-width:767px) {
.topics_active input:checked ~ .topics_active_container {
  max-height: 580px; 
     }
    .topics_active input:checked ~ .topics_active_container{
    margin-bottom: 68px;
    /*! padding-bottom: 30px; */
    }
 .top .section .ttlmt {
  margin-top: 50px;
 }
 .promotion_wrap {
  grid-template-columns: repeat(1, 1fr);
 }
 .promotion_bg {
  margin: 0 calc(50% - 50vw) 80px;
  width: 100vw;
  grid-template-columns: repeat(1, 1fr);
 }
 .top .topFeatureList {
  margin-bottom: 50px;
 }
 .top .section .ttlmt_service {
  margin-top: 10px;
 }
 /*カテゴリアイコン*/
 .top .topFeatureList .icon_container {
  grid-template-columns: repeat(3, 1fr);
 }
 .spNone {
  display: none;
 }
 .pcNone {
  display: block;
 }
}