#message
{
    text-align:center;
    height:1px;
    width:520px;
    position: relative;
    margin:5px auto;
    outline: none;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}
#message-e
{
    text-align:center;
    height:80px;
    width:800px;
    position: relative;
    margin:5px auto;
    outline: none;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1em;
}
#line{
    text-transform:uppercase;
    font-size:16px;
    border-bottom: 1px dotted #333;
    list-style:none !important;
}
#slider1{
    width:940px;
    height:400px;
    margin:0 auto 10px;
}
#news
{
    float:left;
    margin:0 0 0 150px;
    font-size: 1.1em;
    width:810px;
    overflow:hidden;
    height:1000px;
    list-style:none !important;
}
#news_right{
    width:10px;
    height:1000px;
    float:left;
    padding:20px;
}
.button {
    float:right;
    border: 3px solid #000000;
    display: inline-block;
    width: 120px;
    height: 40px;
    text-align: center;
    text-decoration: none;
    font-weight:bold;
    line-height: 38px;
    outline: 1px solid;
    background-color: #FFF;
    color: #435a6b;
}
.button:hover {
    background-color: #435a6b;
    color:#FFF;
    outline:none;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
}
.button::before,
.button::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
.button,
.button::before,
.button::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.defaultlist
,.defaultlist li{
    padding:0px;
    margin:0px;
}
.defaultlist li{
    list-style-type:none !important;
    list-style-image:none !important;
    margin: 5px 0px 5px 0px !important;
}
.topics li{
    position:relative;
    padding-left:20px;
}
.topics li:before{
    content:'';
    height:0px;
    width: 90%;
    display:block;
    position:absolute;
    top:18px;
    left:0px;
    border-bottom: 1px dashed #aaa;
}
.topics li:after{
    content:'';
    display:block;
    position:absolute;
    background:#aaa;
    width:5px;
    height:5px;
    top:7px;
    left:5px;
    border-radius: 5px;
}
#complete
{
    width:940px;
    margin:0px auto 5px;
    float:middle;
    overflow:hidden;
}
#complete .mask {
    margin:0 auto;
    width:940px;
    height:400px;
    position:relative;
    cursor:pointer;
    overflow:hidden;
}
#complete ul{
    list-style:none;
    height:400px;
    width:940px;
    margin: 0;
    padding: 0;
    position:relative;
}
#complete li {
    margin:0;
    padding: 0;
    height:400px;
    width:940px;
    top:0;
    left:100%;
    position:absolute;
    overflow:hidden;
    -moz-animation:slide 16s 0s infinite;
    -webkit-animation:slide 16s 0s infinite;
    animation:slide 16s 0s infinite;
    -moz-animation-play-state:running;
    -webkit-animation-play-state:running;
    animation-play-state:running;
}

#complete li:nth-of-type(1) {
    -moz-animation-delay:0s;
    -webkit-animation-delay:0s;
    animation-delay:0s;
}
#complete li:nth-of-type(2) {
    -moz-animation-delay:4s;
    -webkit-animation-delay:4s;
    animation-delay:4s;
}
#complete li:nth-of-type(3) {
    -moz-animation-delay:8s;
    -webkit-animation-delay:8s;
    animation-delay:8s;
}
#complete li:nth-of-type(4) {
    -moz-animation-delay:12s;
    -webkit-animation-delay:12s;
    animation-delay:12s;
}


#complete a {
    height:auto;
    width:350px;
    display:block;
}
#complete h2 {
    position:absolute;
    padding:0.5em 1em;
    background:rgba(0,0,0,0.5);
    color:#fff;
    top:0;
    left:-110%;
    opacity:0;
    -moz-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
}
#complete .mask:hover h2 {
    left:0;
    height:auto;
    opacity:1;
}
#complete .mask:hover .progress-bar,
#complete .mask:hover li{
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}
#complete .progress-bar {
    background:rgba(0,0,0,1);
    height:5px;
    width:100%;
    position:absolute;
    z-index:100;
    bottom:0;
    left:0;
    -moz-animation:bar 12s linear infinite;
    -webkit-animation:bar 12s linear infinite;
    animation:bar 12s linear infinite;
}
/* keyframes for slide */
@-moz-keyframes slide {
    0% {left:100%;opacity:0.5;z-index:10;}	/*フレームイン開始*/
    10% {left:0%;opacity:1;}		/*(a)全体の1/10秒でフレームイン終了*/
    25% {left:0%;opacity:1;z-index:-10;}	/*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
    43.3% {left:-100%;top:0%;opacity:0.5;}	/*(c)フレームアウト終了（c = a） */
    50% {left:-100%;top:100%;}		/* 分かりやすい様に、見えないエリアで迂回させた */
    55% {left:100%;top:100%;}		/* 分かりやすい様に、見えないエリアで迂回させた */
    70% {left:100%;top:100%;}
    80% {left:100%;top:0%;}
}
@-webkit-keyframes slide {
    0% {left:100%;opacity:0.5;z-index:10;}	/*フレームイン開始*/
    10% {left:0%;opacity:1;}		/*(a)全体の1/10秒でフレームイン終了*/
    25% {left:0%;opacity:1;z-index:-10;}	/*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
    43.3% {left:-100%;top:0%;opacity:0.5;}	/*(c)フレームアウト終了（c = a） */
    50% {left:-100%;top:100%;}		/* 分かりやすい様に、見えないエリアで迂回させた */
    55% {left:100%;top:100%;}		/* 分かりやすい様に、見えないエリアで迂回させた */
    70% {left:100%;top:100%;}
    80% {left:100%;top:0%;}
}
@keyframes slide {
    0% {left:100%;opacity:0.5;z-index:10;}	/*フレームイン開始*/
    10% {left:0%;opacity:1;}		/*(a)全体の1/10秒でフレームイン終了*/
    25% {left:0%;opacity:1;z-index:-10;}	/*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
    43.3% {left:-100%;top:0%;opacity:0.5;}	/*(c)フレームアウト終了（c = a） */
    50% {left:-100%;top:100%;}		/* 分かりやすい様に、見えないエリアで迂回させた */
    55% {left:100%;top:100%;}		/* 分かりやすい様に、見えないエリアで迂回させた */
    70% {left:100%;top:100%;}
    80% {left:100%;top:0%;}
}
/* keyframes for progress-bar */
@-moz-keyframes bar {
    0%,43.3%,76.6% {width:0;opacity:0;}
    10%,53.3%,86.6% {width:10%;opacity:0.5;}
    30%,63.3%,96.6% {opacity:1;}
    25%,66.6%,99.9% {width:100%;opacity:0.1;}
    34%,67%,100% {width:100%;opacity:0;}
}
@-webkit-keyframes bar {
    0%,43.3%,76.6% {width:0;opacity:0;}
    10%,53.3%,86.6% {width:10%;opacity:0.5;}
    30%,63.3%,96.6% {opacity:1;}
    25%,66.6%,99.9% {width:100%;opacity:0.1;}
    34%,67%,100% {width:100%;opacity:0;}
}
@keyframes bar {
    0%,43.3%,76.6% {width:0;opacity:0;}	/*スライドのフレームイン中は表示しない */
    10%,53.3%,86.6% {width:10%;opacity:0.5;}/*フレームイン終了。ここからbarがのびる */
    30%,63.3%,96.6% {opacity:1;}		/*barがのびきる前にopacityを1にするとおしゃれ */
    25%,66.6%,99.9% {width:100%;opacity:0.1;}/*ここまではbarがのびる */
    34%,67%,100% {width:100%;opacity:0;}	/*barを消す */
}