.st-Grid__item-title svg,
.ec-pageHeader svg{
  vertical-align: sub;
}
.bg-light-gray{
  background-color: #FAFAFA;
}
.ec-section--title.has-bottom-border{
  border-bottom: 1px solid #53616E;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ec-section--title2{
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ec-section--title2 img{
  width: auto;
  height: 50px;
}
.ec-section--point{
  font-size: 16px;
  font-weight: bold;
  color: #FB2A4F;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ec-section--point .label-point{
  display: inline-block;
  background-color: #FB2A4F;
  color: #fff;
  font-size: 14px;
  border-radius: 40px;
  padding: 5px 10px;
}
.ec-section--download{
  display: flex;
  align-items: center;
  gap: 10px;
}
.ec-section--download-link{
  color: #05B4BE;
}
.ec-section--download-link:hover{
  color: #05B4BE;
  opacity: 0.8;
}
.ec-section--title3{
  border-top: 1px solid #53616E;
  border-bottom: 1px dashed #53616E;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 1rem 0;
  margin: 0;
}
.attention{
  background-color: #F5F9FE;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.8;
}
.attention.has-icon{
  display: flex;
  gap: 8px;
}
.attention.has-icon svg{
  margin-top: 3px;
  width: 16px;
  min-width: 16px;
}
.ec-section:not(:last-child){
  margin-bottom: 48px;
}
.st-Flow{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 20px 4%;
  margin: 12px 0;
}
.st-Flow__item--title{
  display: grid;
  grid-template-rows: 70px auto;
  text-align: center;
  background-color: #FAFAFA;
  border: 1px solid #C5A600;
  border-radius: 4px;
  padding: 20px 0;
}

.st-Flow__item--title h3{
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.st-Flow__item--title h3 span{
  color:#C5A600;
  display: block;
}
.st-Flow__item--text{
  margin-top: 10px;
  font-size: 12px;
}
.st-Table--wrap{
  overflow: scroll;
}
.st-Table table{
  width: 100%;
}
.st-Table th{
  font-weight: 600;
  padding: 10px 16px;
  min-width: 120px;
}
.st-Table td{
  padding: 10px 20px;
  border-bottom: 1px dashed;
}
.st-Table thead tr{
  border-bottom: 1px dashed;
}
.st-Table tbody{
  line-height: 26px;
}
.st-Table tbody th{
  font-weight: normal;
}
.st-Table .no-b-border{
  border-bottom: none;
}
.st-Grid__item.border{
  box-shadow: none;
  background: transparent;
  border-color: #53616E!important;
}
.st-Grid__item-img{
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background-color: #FAFAFA;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding-left: 20px;
  padding-right: 20px;
}
.st-Grid__item-img img{
  max-height: 180px;
  width: auto;
  height: auto;
}
.st-Grid__item-text{
  margin: 0;
  padding: 20px 30px;
}
.st-Grid__item-text dt{
  font-size: 18px;
  color: #FB2A4F;
  margin-bottom: 20px;
}
.st-Grid2{
  grid-template-columns: minmax(340px, 318px);
}
.st-Grid4{
  grid-template-columns: 1fr;
}
.st-Grid4 .st-Grid__item{
  max-width: unset;
}
.link-inkscape{
  font-weight: 700;
  color: #05B4BE;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background-color: #fff;
  padding: 0 7px;
  border-radius: 4px;
}
.link-inkscape:hover{
  color: #05B4BE;
  opacity: 0.8;
}
.st-Role__inkscape dl dt{
  display: inline-block;
  color: #fff;
  background-color: #3686E4;
  border-radius: 5px;
  padding: 3px 10px;
}


/*----------- media query -----------*/
@media (max-width: 480px) {
  .st-Flow{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .st-Flow{
    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  }
  .st-Grid3{
    grid-template-columns: minmax(340px, 318px) minmax(340px, 318px);
  }
}

/*----------- addition -----------*/

.page-transition {
  display: grid;
  font-weight: 600;
  padding: 10px;
  place-items: center;
  flex: 1 0 0;
  border-bottom: 1px solid #3686E4;
  margin: 8px 0;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
.page-transition:hover {
  background-color: #FAFAFA;
}
.guide-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 0 auto;
  width: 100%;
}
.guide-card-box {
  display: grid;
  grid-column: span 1;
}
.guide-card-box2 {
  display: grid;
  grid-column: span 2;
  width: 100%;
}
.guide-card-box4 {
  display: grid;
  grid-column: span 4;
  width: 100%;
}
.parent-attention-element {
  margin: 0 !important;
}

@media (max-width: 768px) {
  .guide-card-grid {
      grid-template-columns: 1fr;
  }
  .guide-card-box, 
  .guide-card-box2 {
      grid-column: span 1;
  }
}
.guide-card {
  background-color: #fff;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  flex: 1 1 calc(33% - 1rem);
}
.postcontents {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-left: 0.2rem;
  font-weight: 500;
}
.postcontents ul{
  margin: 1rem;
}
.guide-card-title{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #C5A600;
  margin-bottom: 12px;
}
.guide-card-info {
  font-size: 0.9rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.8;
}
.guide-card-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.1rem;
}
.guide-card-item p {
  font-weight:400;
}
.guide-card-item b {
  font-size: 0.9rem;
  font-weight:600;
}
.guide-card-box-mtb{
  margin: 24px 0;
}
.color-bar {
width: 2px;
height: 2rem;
margin-right: 10px;
margin-bottom: -0.1rem;
}
.white {
background-color: #fff;}
.red {
background-color: #FB2A4F;}
.blue {
background-color: #3686E4;}
.ocher {
background-color: #C5A600;}