@charset "UTF-8";

/* ========================================================
/* 
=========================================================*/

body {
    margin: 0 auto;
    width: 100%;
    max-width: 940px;
	background-color: #10142a;
	background-image: url(../images/back.gif);
	font-size: 13px;
}

/* ========================================================
/* PC・SP表示切替
=========================================================*/

#pc-header {
    display: block;
}

#sp-header {
    display: none;
}

@media (max-width: 610px) {
    #pc-header {
        display: none;
    }

    #sp-header {
        display: block;
    }
}

/* header
**********************************/

.header {
	padding:20px 20px 24px;
	background-color: #10142a;
}

/* menu */
.menu-box {
    background-color: #f6c9dd;
}

nav {
    margin: 0 auto;
    width: 100%;
    max-width: 795px;
    height: 30px;
}

.main-menu {
    display: flex;
    flex-wrap: nowrap;
}


/* main
**********************************/
main {
	padding:0 20px 24px;
	background-color: #10142a;
}


/* メインコンテンツ */
.m-contents {
    display: flex;
    justify-content: space-between;
}

/* NEWS */
article {
    width: 100%;
    max-width: 650px;
    text-align: left;
    padding: 0;
	background-color: #404355;
  order: 1;
}

/* LINK */
aside {
    width: 250px;
    text-align: center;
  order: 2;
}



/* banner-sp */
.underlink-box {padding: 30px 0 0;}

.underbanner-box {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    padding: 0 0 20px;
}

.underlink-box { display: none;}
@media screen and (max-width:650px) { 
.underlink-box { display: block;}
}






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

footer {
	padding:0 20px;
	background-color: #10142a;
}

.under-bar {
    background-color: #f6c9dd;
	    height: 5px;
    padding: 5px 0 0;
}

.footer-box {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
}


.contact {
    width: 100%;
    max-width: 450px;
  order: 1;
}

.copyright {
    width: 100%;
    max-width: 450px;
    font-size: 11px;
    color: #fff;
    line-height: 120%;
    text-align: right;
  order: 2;
}









@media screen and (min-width:650px) and ( max-width:885px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
nav {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding: 10px;
}
.main-menu {
    display: flex;
    flex-wrap: wrap;
  justify-content: center;
}


article {
    width: 100%;
    margin: 0 auto;
    padding: 0 5px;
}



}




@media screen and (max-width:650px) { 
    /*　画面サイズが480pxからはここを読み込む　*/

nav {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding: 5px;
}

.main-menu {
    display: flex;
    flex-wrap: wrap;
  justify-content: center;
}


aside { display: none;}

}