@charset "UTF-8";

html {
scroll-padding-top:100px;
}

body {
counter-reset:count-number;
}

article {
padding: 0.5em;
display: block;
}
article a {
display:inline-block;
}
article p {
font-size:1em;
line-height:1.5em;
margin:0;
padding: 0.5em;
}

article p span {
margin-left:-0.5em;
color:#d93127;
font-weight:bold;

}

.anchor {
height: 1px;
display: block;
padding-top: 100px;
margin-top: -100px;
}

figure img {
width:100%;
}


h2 {
margin:0;
background:#B94047;
color:#ffffff;
font-size: 1em;
line-height: 1.5em;
}
h2 em {
display:block;
}
h2 span {
position: static;
    margin-left: 0.5em;
    font-size: 0.8em;
    vertical-align: middle;
    line-height: 1em;
}

h5 {
margin:1em 0 0.5em;
border-radius:0;
background:#000000;
}



.anchorlink {
}

.anchorlink ul {
display:table;
margin:0 auto;
text-align:center;
width:100%;
margin-bottom:0.5em;
}
.anchorlink ul li {
width:20%;
display:inline-block;
padding: 0 0.3em;
}
.anchorlink ul li a {
position: relative;
text-align: center;
margin:0 auto;
display:block;
font-size:1.2em;
font-weight:bold;
padding: 0.8em 0;
color:#ffffff;
background: #454545;
border-radius: 5px;
}
.anchorlink ul li:nth-child(odd) a {
background:#404340;
}

.anchorlink ul li a span {
font-size:0.6em;
}


.notice {
background: #f0f0f0;
    border-radius: 5px;
    margin: 1em;
    padding: 0.5em;
    font-size: 0.9em;
}



.contentslist {
padding: 0.5em;
}

.contentslist ul{
width:100%;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

.contentslist ul li{
font-size:1em;
width: 50%;
display: flex;
padding: 0.3em 0.5em;
margin: 0 0 0.5em 0;
}

.contentslist ul li:first-child{
width:100%;
}

.contentslist ul li a{
border:solid 1px #ebebeb;
border-radius:5px;
background: #f7f7f7;
    width: 100%;
position:relative;
}

.contentslist ul li a figure {
width:100%;
border-radius:5px 5px 0 0;
overflow:hidden;
}
.contentslist ul li span {
position:absolute;
top:0;
left:0;
font-size:0.8em;
background:#222222;
color:#ffffff;
text-align:center;
border-radius:5px 0 5px 0;
line-height: 3em;
font-weight: bold;
width: 3em;
height: 3em;
letter-spacing: 0;
text-shadow:0px 0px 3px rgba(0, 0, 0, 1),0px 0px 3px rgba(0, 0, 0, 1);

}
.contentslist ul {
counter-reset: number 0;
}

.contentslist ul li span:before {
counter-increment: number 1;
content: counters(number,"") "\4F4D";
}

.contentslist ul li:first-child span{
  background: linear-gradient(45deg, #c0b283 0%, #c0b283 45%, #FEE9A0 70%, #c0b283 85%, #c0b283 90% 100%);
  background-size: 800% 400%;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}
.contentslist ul li:nth-child(2) span {
  background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
  background-size: 800% 400%;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}
.contentslist ul li:nth-child(3) span {
  background: linear-gradient(45deg, #a57e65 0%, #a57e65 45%, #f3cfb8 70%, #a57e65 85%, #a57e65 90% 100%);
  background-size: 800% 400%;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
.contentslist ul li a figure img {
width:100%;

}


.contentslist ul li a em {
font-size:0.9em;
line-height:1.1em;
margin:0;
padding: 0.5em;
color:#000000;
font-weight: bold;
}

.contentslist ul li a p{
font-size:0.8em;
line-height:1.1em;
margin:0;
padding: 0 0.5em 0.5em 0.5em;
color:#000000;
text-align:left;
}