.page-top-img-wrapper::after {
   background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .7) 40%, rgb(175 213 211 / 40%) 70%, rgb(96 223 194 / 40%) 100%);
}

.ref-tag-list{
   max-width: 500px;
   margin: 0 auto;
}

.desc-container{
   display: grid;
   grid-template-columns: 700px 1fr;
}

.desc-container img{
   max-width: 400px;
   margin: 0 auto;
}

h1>span.sub {
   line-height: 2em;
}
.ref-archive h2{
   font-size: 20px;
   border-top: 2px solid #000;
   border-bottom: 1px solid #000;
   text-align: left;
   margin: 25px 0 10px;
 }
 .ref-archive h2 a{
   background-color: rgb(248, 248, 248);
   position: relative;
   display: block;
   width: 100%;
   color: #0c305c;
   padding: 7px 0 3px 27px;
 }

 .ref-archive h2 a::before{
   content:"";
   position: absolute;
   top: 54%;
   left: 10px;
   width: 5px;
   height: 20px;
   transform: translateY(-50%);
   background-color: #0c305c;
 }


 .ref-archive h2 a:hover{
   background-color: #f1f1f1;
   transition: .3s;
 }

 .ref-archive ul{
   margin: 20px 0 0 30px ;
 }
 .ref-archive ul a{
   color: rgb(36, 53, 75);
   border-bottom: 1px dotted #333;
 }
 .ref-archive ul a:hover{
   background-color: #f1f1f1;
   transition: .3s;
 }


/*************************************************************
1024px
**************************************************************/
@media screen and (max-width: 1024px) {
  div.ref-tax.contents-container{
    width:100%;
  }
  .ref-tax-list{
    width: 100%;
  }
  .desc-container{
   grid-template-columns: 1fr;
}

}


/*************************************************************
599px
**************************************************************/
@media screen and (max-width: 599px) {
  #ref-archive-h1{
   font-size: 22px;
 }
 .ref-archive .sub{
 margin-top:0px;
}
}