@charset "UTF-8";


#hpTopics {
 background: rgb(0,176,157);
 background: linear-gradient(180deg, rgba(0,176,157,0.2) 0%, rgba(0,176,157,0) 50%);
 padding: 18px 0 30px 0;
}
@media (min-width:992px) {
 #hpTopics {
  padding: 30px 0 100px 0;
 }
}



#hpTopics .content-group {
 margin-left: 0;
 margin-right: 0;
}
#hpTopics .content-group-main {
 padding-left: 0;
 padding-right: 0;
}
#hpTopics .content-group-side {
 display: none;
}
@media (min-width:992px) {
 #hpTopics .content-group {
  margin-left: -40px;
  margin-right: -40px;
 }
 #hpTopics .content-group-main {
  padding-left: 40px;
  padding-right: 40px;
  border-right: 1px solid rgba(0,176,157,0.3);
 }
 #hpTopics .content-group-side {
  display: block;
  padding-left: 40px;
  padding-right: 40px;
 }
 #hpTopics .content-group-side h3 {
  font-size: 14px;
  line-height: 1.3;
  color: #00705b;
  background-color: rgba(0,176,157,0.2);
  border-left: 4px solid #00b09d;
  padding: 0.5rem 1rem;
  margin-bottom: 20px;
 }
}

#hpTopics .articlelist {
 list-style: none;
 font-size: 14px;
 line-height: 1.2;
 padding: 0;
}
#hpTopics .articlelist li {
 margin-bottom: 0.75rem;
}
#hpTopics .articlelist .icon {
 color: #00b09d;
 -ms-flex: 0 0 1.25em;
 flex: 0 0 1.25em;
}
#hpTopics .articlelist a {
 color: #333;
}
#hpTopics .articlelist .date {
 font-size: 12px;
 line-height: 1.2;
 margin-top: 3px;
 color: #999;
}



#hpName {
 font-size: 14px;
 line-height: 1.2;
 margin: 0;
 margin-bottom: 2px;
}
@media (min-width:992px) {
 #hpTame {
  font-size: 18px;
 }
}


#hpTopics h1 {
 font-size: 20px;
 line-height: 1.25;
 font-weight: bold;
 margin: 0 0 15px 0;
}
@media (min-width:992px) {
 #hpTopics h1 {
  font-size: 30px;
  margin-bottom: 30px;
 }
}

#hpTopics .prologue {
 margin-bottom: 24px;
}
@media (min-width:992px) {
 #hpTopics .prologue {
  margin-bottom: 40px;
 }
}

#hpTopics .pict {
 margin-bottom: 18px;
}
@media (min-width:992px) {
 #hpTopics .pict {
  margin-bottom: 30px;
 }
}
#hpTopics .pict img {
 width: 100%;
 height: auto;
}
#hpTopics .preface {
 margin: 0;
}


#hpTopics .h2group {
 margin-bottom: 24px;
}
@media (min-width:992px) {
 #hpTopics .h2group {
  margin-bottom: 40px;
 }
}
#hpTopics .h2group.non-title {
 margin-top: -6px;
}
@media (min-width:992px) {
 #hpTopics .h2group.non-title {
  margin-top: -10px;
 }
}

#hpTopics .h2group h2 {
 font-weight: bold;
 line-height: 1.3;
 font-size: 20px;
 margin-bottom: 18px;
}
@media (min-width:992px) {
 #hpTopics .h2group h2 {
  font-size: 26px;
  margin-bottom: 30px;
 }
}

#hpTopics .h3group {
 margin-bottom: 18px;
}
@media (min-width:992px) {
 #hpTopics .h3group {
  margin-bottom: 30px;
 }
}
#hpTopics .h3group.non-title {
 margin-top: -6px;
}
@media (min-width:992px) {
 #hpTopics .h3group.non-title {
  margin-top: -14px;
 }
}

#hpTopics .h3group h3 {
 font-size: 18px;
 line-height: 1.3;
 border-left: 6px solid #00b09d;
 background: rgb(0,176,157);
 background: linear-gradient(90deg, rgba(0,176,157,0.3) 0%, rgba(0,176,157,0.05) 100%);
 padding: 0.75rem 2rem 0.75rem 1rem;
 margin-bottom: 18px;
}
@media (min-width:992px) {
 #hpTopics .h3group h3 {
  font-size: 22px;
  margin-bottom: 20px;
 }
}

#hpTopics .h3group p {
 margin: 0 !important;
}

#hpTopics .h3group p a {
 text-decoration: underline;
}

#hpTopics .h3group p + ul.note {
 margin-top: 12px;
}

#hpTopics .insetimage {
 margin-top: 18px;
 margin-bottom: 24px;
}
@media (min-width:992px) {
 #hpTopics .insetimage {
  width: 70%;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 38px;
 }
}