@charset "utf-8";
/************************
common
************************/
button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}
.contents {
    position: relative;
    overflow: hidden;
}

.backLeft {
    background: url("../../../img/back_scroll_left.jpg") repeat-y;
    background-size: 50%;
}
.backRight {
    background: url("../../../img/back_scroll_right.jpg") repeat-y;
    background-size: 50%;
}

/************************
header
************************/
header {
    width: 100%;
    background-color: #a83024;
    padding: 10px 0;
    border-bottom: 10px #000 solid;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
}
header h1 {
    margin-bottom: 8px;
}
header h1 a {
    display: block;
    width: 155px;
    margin: 0 auto;
}
header h1 a img {
    display: block;
    width: 100%;
}
header h2 {
    width: 300px;
    margin: 0 auto;
}
header h2 img {
    display: block;
    width: 100%;
}

/************************
main
************************/
.newsWrap {
    max-width: 960px;
    width: 85%;
    border-left: 10px #000 solid;
    border-right: 10px #000 solid;
    margin: 0 auto;
    padding: 180px 40px 200px;
    background: #fff;
}
.article {
    border-bottom: 2px #000 solid;
    margin-bottom: 50px;
    padding: 0 5vw 20px;
}
.date {
    display: inline-block;
    background-color: #fff100;
    color: #000;
    font-size: 110%;
    font-weight: bold;
    padding: 5px 8px;
    margin-bottom: 10px;
    border: 2px #000 solid;
}
.newsTit {
    font-size: 150%;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.3;
}
.newsTxt {
    font-size: 100%;
    line-height: 1.5;
    margin-bottom: 30px;
}
.newsPic {
    display: block;
    max-width: 560px;
    width: 90%;
    margin: 0 auto;
}
.newsTxt a .newsPic {
    
}
/*
.newsTxt a .newsPic:hover {
    opacity: 0.6;
    transition: .3s;
}
*/
.newsTxt a {
    color: #e50213;
}
.newsTxt a:hover {
    border-bottom: 1px solid #e50213;
}

.newsTxt a:has(img) {
    display: block;
    max-width: 560px;
    width: 90%;
    margin: 0 auto 30px;
    transition: .2s;
    border: 1px solid #030303;
    box-shadow: 5px 5px 0px 0px #030303;
}
.newsTxt a:has(img):hover {
    transform: scale(1.05);
    transition: .2s;
    border: 1px solid #030303;
    box-shadow: 0px 0px 0px 0px #030303;
}
.newsTxt a:has(img) img {
    width: 100%;
    margin-bottom: 0;
}

/************************
footer
************************/
footer {
    width: 100%;
    background: #a83024;
    padding: 30px 0 5px;
    position: fixed;
    bottom: 0;
    left: 0;
}
/* page top */
#pagetop {
    position: absolute;
    left: 50%;
    top: -120px;
    z-index: 1;
    transform: translateX(-50%);
    text-align: center;
    cursor: pointer;
}
.pagetop-fukidashi {
    display: block;
    margin: 0 0 8px;
}
.pagetop-illust {
    display: block;
    margin: 0 auto;
    background: #a83024;
    padding: 10px;
    border-radius: 80px;
    transform-origin: 50% 100%;
}
.pagetop-illust img {
    display: block;
    margin: 0 auto;
    width: 60px;
    height: 60px;
}
.pagetop-fukidashi img {
    display: block;
    margin: 0 auto;
    width: 74px;
    height: 64px;
}
#pagetop:hover .pagetop-fukidashi  {
    animation:shake 0.4s ease;
}
 
@keyframes shake {
    0%   { transform:rotate(0); }
    16%  { transform:rotate(12deg); }
    32%  { transform:rotate(-10deg); }
    48%  { transform:rotate(8deg); }
    64%  { transform:rotate(-6deg); }
    80%  { transform:rotate(4deg); }
    96%  { transform:rotate(-2deg); }
    100% { transform:rotate(0deg); }
}
.fbs a {
    display: block;
    width: 75px;
    margin: 0 auto 7px;
}
.fbs a img {
    display: block;
    width: 100%;
}
.fbs small {
    display: block;
    color: #fff;
    font-size: 60%;
    line-height: 1.1;
    text-align: center;
}


@media all and (max-width: 812px) {
/************************
main
************************/
.newsWrap {
    width: 90%;
    padding: 180px 40px 200px;
}
.newsPic {
    width: 100%;
    margin: 0 auto;
}
.newsTxt a:has(img) {
    width: 100%;
    margin: 0 auto 25px;
}

/************************
footer
************************/

}



@media all and (max-width: 580px) {
/************************
header
************************/
    header {
        border-bottom: 6px #000 solid;
    }
    header h1 {
        margin-bottom: 6px;
    }
    header h1 a {
        width: 145px;
    }
    header h2 {
        width: 280px;
    }

/************************
main
************************/
    .newsWrap {
        width: 90%;
        border-left: 6px #000 solid;
        border-right: 6px #000 solid;
        padding: 20px 20px 200px;
        padding: 150px 20px 200px;
    }
    .article {
        margin-bottom: 30px;
        padding: 0 0 20px;
    }
    .date {
        font-size: 100%;
        margin-bottom: 5px;
    }
    .newsTit {
        font-size: 120%;
        margin-bottom: 20px;
    }
    .newsTxt {
        font-size: 90%;
        margin-bottom: 20px;
    }
    .newsPic {
        width: 100%;
        margin: 0 auto;
    }
    .newsTxt a:has(img):hover {
        transform: none;
        transition: unset;
        border: 1px solid #030303;
        box-shadow: 5px 5px 0px 0px #030303;
    }
    

}