@charset "UTF-8";

#main_document_title {
  position: relative;
/*  overflow: hidden;*/
  background-image: url("../img/main_document_back.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
@media screen and (max-width:768px) {
  #main_document_title {
    background: url(../img/sp_main_document_back.jpg);
    background-repeat: no-repeat;
    background-size: 768px 260px;
  }
}

/*各テキストにanimationを設定*/
.headline_common p span {
	color: transparent; /*テキストを透明にしてtext-shadowだけ表示する*/
	animation: blur 10s ease-in forwards;
}
/*一文字ずつ遅延させる*/
.headline_common p span:nth-child(1) {
	animation-delay: 0.1s;
}
.headline_common p span:nth-child(2) {
	animation-delay: 0.2s;
}
.headline_common p span:nth-child(3) {
	animation-delay: 0.3s;
}
.headline_common p span:nth-child(4) {
	animation-delay: 0.4s;
}
.headline_common p span:nth-child(5) {
	animation-delay: 0.5s;
}
.headline_common p span:nth-child(6) {
	animation-delay: 0.6s;
}
.headline_common p span:nth-child(7) {
	animation-delay: 0.7s;
}
.headline_common p span:nth-child(8) {
	animation-delay: 0.8s;
}

/*opacityとtext-shadow+animationでフェードインを表現する*/
@keyframes blur {
	0%		{text-shadow:  0 0 100px #fff; opacity:0;}
	5%		{text-shadow:  0 0 90px #fff;}
	15%		{opacity: 1;}
	20%		{text-shadow:  0 0 0px #fff;}
	100%		{text-shadow:  0 0 0px #fff;}
}

.document_parts {
  width: 960px;
  margin: 50px auto 100px;
}
@media screen and (max-width:1000px) {
  .document_parts {
    width: 90%;
  }
}

.document_title{
  width: 100%;
  background: #0D3563;
  padding: 15px 0;
  text-align: center;
  color: #fff;
  line-height: 1;
}

.document_title h2{
    font-size: 24px;
    font-size: 2.4rem;
}

.document_list{
  display: flex;
  flex-direction: column;
  gap: 24px 0;
  margin-top: 24px;
}

.document-item{
  width: 100%;
  border:2px solid #0D3563;
  line-height: 1;
}

.document-item a{
  display: block;
  width: 100%;
  padding: 14px 56px;
  font-size: 2.4rem;
  font-weight: 900;
  color: #0D3563;
  transition: all 0.3s ease; 
}

@media screen and (max-width:767px) {
.document-item a{
  padding: 14px 16px;
  font-size: 1.8rem;
}
}

.document-item a::before{
  content: "";
  display: inline-block;
  background: url(../img/PDFpic.png) center no-repeat;
  background-size: 29px;
  width: 29px;
  height: 31px;
  vertical-align: text-bottom;
  margin-right: 10px;
}

@media screen and (max-width:767px) {
.document-item a::before{
  background-size: 24px;
  width: 24px;
  height: 25px;
}
}

.document-item a:hover{
  opacity: .8;
  transition: all 0.3s ease; 
}