@charset "UTF-8";
/* CSS Document */

/*------------------------------------------------------------
	fade
------------------------------------------------------------*/
.hTtl,#contents .inner li,#contents .inner h2{
  opacity: 0;
  transform: translateY(40px);
  transition: transform 1.0s cubic-bezier(.210, .60, .350, 1),opacity 1.0s cubic-bezier(.210, .60, .350, 1);
}
.hTtl.fade,#contents .inner li.fade,#contents .inner h2.fade{
  opacity: 1;
  transform: translateY(0);
}
/* fade */
#fLink ul li{
  opacity: 0;
  transform: translateY(20px);
  transition: transform 1.0s cubic-bezier(.210, .60, .350, 1),opacity 1.0s cubic-bezier(.210, .60, .350, 1);
}
#fLink ul.fade li,#contents .inner ul.fade li{
  opacity: 1;
  transform: translateY(0);
}
#fLink ul li:nth-child(2){transition-delay: .3s;}
#fLink ul li:nth-child(3){transition-delay: .6s;}
#fLink ul li:nth-child(4){transition-delay: .9s;}

.hTtl p{
  margin-top: 5px;
}
/*------------------------------------------------------------
	contents
------------------------------------------------------------*/
#contents{
  background: #F7F7F7;
  margin-top: 100px;
  padding: 120px 40px 140px;
}
#contents .inner{
  max-width: 1100px;
  margin: 0 auto;
}
#contents .inner h2{
  font-size: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid #333;
  color: #573B3A;
}
#contents .inner ul{
  margin-top: 40px;
}
#contents .inner li{
  background: rgba(217,217,217,.8);
  margin-bottom: 10px;
}
#contents .inner li:last-child{
  margin-bottom: 0;
}
#contents .inner li:nth-child(even){
  background: rgba(217,217,217,.4);
}
#contents .inner li a{ 
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px 20px 45px;
  box-sizing: border-box;
  position: relative;
  gap: 20px;
  transition: opacity .4s cubic-bezier(.210, .60, .350, 1);
}
#contents .inner li a:hover{
  opacity: .6;
}
#contents .inner li a::before{ 
  display: block;
  position: absolute;
  content: "";
  background: url("/img/common/icon_moreArrow_brown.svg")no-repeat;
  width: 18px;
  height: 16px;
  background-size: contain;
  left: 20px;
  top: 28px;
}
#contents .inner li h3{
  font-size: 18px;
  color: #573B3A;
  line-height: 1.8;
}
#contents .inner li p{
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  white-space: nowrap;
  position: relative;
}
#contents .inner li p::after{ 
  content: "";
  display: block;
  width: 20px;
  height: 27px;
  background: url("/img/common/ico_pdf.svg?");
  position: absolute;
  right: -40px;
  top: 0;
}
@media only screen and (max-width:767px) {
#contents{
  margin-top: 40px;
  padding: 60px 20px;
}
#contents .inner h2{
  font-size: 20px;
  padding-bottom: 5px;
}
#contents .inner ul{
  margin-top: 20px;
}
#contents .inner li{
  margin-bottom: 5px;
}
#contents .inner li a{ 
  flex-wrap: wrap;
  padding: 20px 20px 20px 45px;
  gap: 5px;
}
#contents .inner li a::before {
  top: 24px;
}
#contents .inner li h3{
  font-size: 16px;
  line-height: 1.5;
}
#contents .inner li p{
    width: 100%;
    text-align: right;
    padding-right: 30px;
}
#contents .inner li p::after{ 
  right: 0;
}
}