@charset(utf-8);

/*全体のスタイルをリセット*/
*{
margin:0;
padding:0;
font-family:"ＭＳ　ゴシック","メイリオ","ＭＳ　明朝";
}

/*全体のスタイル設定*/
body{
background-color:#ffc;
}
#container{
margin:auto;
width:600px;
display:flex;
flex-direction:column;
justify-content:center;
}
a{
font-size:20px;
line-height:40px;
text-decoration:underline;
}
a:hover{
color:#f00;
text-decoration:none;
}
p a{
text-decoration:none;
vertical-align:center;
letter-spacing:10px;
}
ul{
border:#0000cd 2px solid;
background-color:#fff;
padding:20px 50px;
}
/*お知らせのレイアウト*/
.cation{
border:#f00 5px solid;
background-color:#ff0;
margin:15px auto 25px;
padding:15px 25px;
}
.cation h2{
width:250px;
text-align:center;
margin:5px auto 30px;
letter-spacing:1em;
color:#f00;
font-weight:bold;
border-bottom:#f00 double 5px;
}
.cation p{
}
.cation p a{
letter-spacing:0;
text-decoration:underline;
}
.cation p a:hover{
text-decoration:none;
}
.big{
font-size:20px;
}
.bold{
font-weight:bold;
}
.red{
color:#f00;
}
.center{
text-align:center;
}

/*アナウンスのレイアウト*/
.anc{
width:550px;
margin:0px auto 25px;
padding:10px 20px;
background-color:#fff;
border:5px solid #f00;
text-align:center;
}
.anc p{
background:none;
color:#000;
border:none;
padding:0;
margin:5px 0;
}
.anc h2{
color:#f00;
font-size:25px;
margin:10px 0 20px;
letter-spacing:0.5em;
animation-duration:1s;
animation-name:anc-keyframe;
animation-iteration-count:infinite;
}
.anc p span.red{
color:#f00;
font-family:"ＭＳ 明朝";
}
.anc p span.big30{
font-size:25px;
font-family:"ＭＳ 明朝";
font-weight:bold;
margin:0 5px;
}

/*アナウンスのキーフレーム*/
@keyframes anc-keyframe{
0%{opacity:1;}
50%{opacity:0;}
}