body{ background:rgb(235, 235, 235);}
article{ width: 1280px; margin: 0 auto; display:block; background: url("../images/article.jpg") no-repeat bottom rgb(255,255,255); background-size: 100%; padding-bottom: 100px; overflow: hidden;}
p.firstLetter::first-letter{ font-size: 220%; }



header#Visual > img{ width:100%; position: relative; z-index: 20;}
header#Visual > div.Text{ margin-top:-70px; position: relative; z-index: 990;}
header#Visual > div.Text > hr{background:rgb(0,0,0); height: 1px; margin-left: 70px; }
header#Visual > div.Text > p{ margin: -45px 0 0 250px; text-align: justify; background:rgb(255,255,255); padding: 0 100px 0 30px; line-height: 1.8rem;}



div.BOX{ padding: 50px 80px 0 80px; }
div.Item > h5{ color:rgb(213,25,29); padding: 8px 10px; font-weight: bold; margin: 0 20px 20px 20px; font-size: 1.3rem; border-top: 2px solid rgb(213,25,29); border-bottom: 2px solid rgb(213,25,29);}
div.Item > p, div.Part > p{ padding: 0 25px; text-align: justify; line-height:1.7rem; }
div.Part{ margin-bottom: 50px; }
div.Part > h5{ color:rgb(213,25,29); padding: 8px 10px; font-weight: bold; font-size: 1.3rem; margin-left: 15px; }
ul > li{ font-weight: bold; }

div.course{ margin-top: 50px; }
div.course > h5{ color:rgb(213,25,29); padding: 8px 10px; font-weight: bold; margin: 0 20px 20px 20px; font-size: 1.3rem; border-bottom: 2px solid rgb(213,25,29); }
div.course > a > li{ padding: 0 25px; color: #212529; }
div.course > a > li > span{ color:rgb(130,28,32); }
div.course > a:hover{ text-decoration: none; }
div.course > a > li:hover{ color:rgb(130,28,32); font-weight: bold;}

footer{ font-size: 0.95rem; }

@media(max-width:1279px){
    article{ width:100%; }
}

@media(max-width:1024px){
    header#Visual > div.Text{ margin-top:-60px; }
    header#Visual > div.Text > hr{ margin-left: 40px; }
    header#Visual > div.Text > p{ margin: -45px 0 0 150px; padding: 0 60px 0 30px;}


    div.BOX{ padding: 50px 50px 0 50px; }
    div.Item > h5{ margin: 0 10px 20px 10px; }
    div.Item > p, div.Part > p{ padding: 0 15px; }
    div.Part > h5{ margin-left: 5px; }

    div.course > h5{ margin: 0 10px 20px 10px; }
    div.course > a > li{ padding: 0 15px;}

}

@media(max-width:767px){
    header#Visual > img{ width: 105%; margin-left: -20px;}
    header#Visual > div.Text{ margin-top:-50px; margin-bottom: 50px; }
    header#Visual > div.Text > hr{ margin-left: 20px; }
    header#Visual > div.Text > p{ margin: -35px 0 0 100px; padding: 0 40px 0 15px;}

    div.BOX{ padding: 0 30px; }
    div.Item{ margin-bottom: 50px; }
    div.course{ margin-top: 0; }
}

@media(max-width:546px){
    article{ background-size: 140%; }


    header#Visual > img{ width: 120%; margin-left: -70px;}
    header#Visual > div.Text{ margin-top:-30px; margin-bottom: 50px; }
    header#Visual > div.Text > hr{ display: none; }
    header#Visual > div.Text > p{ margin: 0; padding: 0 30px 0 30px;}

    div.BOX{ padding: 0 20px; }
    div.Item > h5{ margin: 0 0 20px 0; }
    div.Item > p, div.Part > p{ padding: 0 10px; }
    div.Part > h5{ margin-left: 0; }
    div.course > h5{ margin: 0 0 20px 0;}

}