@charset "UTF-8";
/* CSS Document */

body,
header,
nav,
footer {
	margin: 0;
	padding: 0;
}

/*
p{
	margin: 0 1rem;
}
li {
	padding: 2em;
}*/

*{
	/*emmet:-bxz*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*clearfix*/
.clr::after{
	content: "";
	display: block;
	clear: both;
}



/*サイトの基本レイアウト*/
#wrapper {
	/*padding-top: 12rem;*/
}

.pagebody,
#footer-inner {
	padding: 0 1.5rem;
}
#header-inner {
    position: relative;
}


.pagebody:not(.bg-cover .pagebody) {
    margin-top: 10rem;
}


/*ボックスの背景色*/
/*.entry-box-two,
.entry-box-three,
.entry-box-four,
.entry-box-two-thirds,
.entry-box-three-quarters,
.entry-box-two-fifths,
.entry-box-three-fifths{
	background: rgba(240,240,240,0.6);
}*/


/*子要素の並べ方*/
.flex {
    display: flex;
	/*emmet:fxw:w*/
	flex-wrap: wrap;
	/*emmet:jtc:sb*/
	justify-content: space-between;
}




/*基本の並べ方*/
.flex .entry-box-two{
	width: 49%;
}
.flex .entry-box-three{
	width: 32%;
}
.flex .entry-box-four{
	width: 23.5%;
}
.flex .entry-box-two-thirds	{
	width: 66%;
}
.flex .entry-box-three-quarters {
	width: 74.5%;
}
.flex .entry-box-two-fifths{
	width: 39%;
}
.flex .entry-box-three-fifths{
	width: 59%;
	background: #FFEEDD;
}




/*レスポンシブデバイス対応*/

@media screen and (max-width: 599px){
	.flex-bp600 .entry-box-two,
	.flex-bp600 .entry-box-three,
	.flex-bp600 .entry-box-four,
	.flex-bp600 .entry-box-two-thirds,
	.flex-bp600 .entry-box-three-quarters,
	.flex-bp600 .entry-box-two-fifths,
	.flex-bp600 .entry-box-three-fifths{
		width: 100%;
	}
	
}


@media screen and (min-width: 600px){
    
	html {
		font-size: 100%;
	}
    
    
    .bp600-none {
		display: none;
	}

    .flex-bp600 {
        /*emmet:d:f*/
        display: flex;
        /*emmet:fxw:w*/
        flex-wrap: wrap;
        /*emmet:jtc:sb*/
        justify-content: space-between;   
    }

    
	.flex-bp600 .entry-box-two {
		width: 49%;
	}
	.flex-bp600 .entry-box-three {
		width: 32%;
	}
	.flex-bp600 .entry-box-four {
		width: 23.5%;
	}
	.flex-bp600 .entry-box-two-thirds {
		width: 66%;
	}
	.flex-bp600 .entry-box-three-quarters {
		width: 74.5%;
	}
	.flex-bp600 .entry-box-two-fifths {
		width: 40%;
	}
	.flex-bp600 .entry-box-three-fifths {
		width: 60%;
	}
}


@media screen and (min-width: 600px) and (max-width: 1024px){
	#beta {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		justify-content: space-between;
	}
	#beta aside,
    #footer-menu aside {
		width: 49%;
	}
}


@media screen and (max-width: 1024px) {
    
    .bp1024-none {
		display: none;
	}


	.flex-bp1025 .entry-box-two,
	.flex-bp1025 .entry-box-three,
	.flex-bp1025 .entry-box-four,
	.flex-bp1025 .entry-box-two-thirds,
	.flex-bp1025 .entry-box-three-quarters,
	.flex-bp1025 .entry-box-two-fifths,
	.flex-bp1025 .entry-box-three-fifths{
		width: 100%;
	}
	
}


@media screen and (min-width: 1025px){

	.bp1025-none {
		display: none;
	}
	
    .flex-bp1025 {
        /*emmet:d:f*/
        display: flex;
        /*emmet:fxw:w*/
        flex-wrap: wrap;
        /*emmet:jtc:sb*/
        justify-content: space-between;   
    }

	/*ボックスの並べ方*/		
	.flex-bp1025 .entry-box-two {
		width: 49%;
	}
	.flex-bp1025 .entry-box-three {
		width: 32%;
	}
	.flex-bp1025 .entry-box-four {
		width: 23.5%;
	}
	.flex-bp1025 .entry-box-two-thirds {
		width: 66%;
	}
	.flex-bp1025 .entry-box-three-quarters {
		width: 74.5%;
	}
	.flex-bp1025 .entry-box-two-fifths {
		width: 39%;
	}
	.flex-bp1025 .entry-box-three-fifths {
		width: 59%;
		background: #FFEEDD;
	}

	/*pagebody内のコンテンツとサイドバーが縦に並ぶ*/
	#alpha {
		flex: 1;
	}
	#beta {
		flex-basis: 250px;
		flex-shrink: 0;
	}
}


@media screen and (min-width: 1190px) {
	
	#header-inner,
    #footer-inner,
	.pagebody {
		width: 1190px;
		margin-left: auto;
		margin-right: auto;
	}
}