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

*{
/*margin: 0px;
padding: 0px;*/
}

#wrapper{
width: 80%;
max-width: 1200px;
margin: 0 auto;
font-size: 1.6rem; /*1rem=1px 1.6rem=16px*/
}

@media screen and (max-width: 768px){
#wrapper{
width: 100%;
}
}

/*FlexContainer*/
#container{
display: flex;
}

@media screen and (max-width: 768px){
#container{
flex-direction: column;
}
}

/*Header /////////////////////////////////*/
header{
/*FlexContainer*/
display: flex; /*フレックス設定*/
justify-content: flex-end; /*水平方向右配置*/
align-items: center; /*垂直方向中央揃え*/
}

header h1 {
	margin-right: auto;
}

/*FlexContainer*/
header ol {
	display: flex;
	list-style-type: none;
}

header li {
	margin-left: 3rem;
}

@media screen and (max-width: 768px){

	header {
		flex-direction: column; 
	}
	header h1 {
	font-size: 2.0rem;
		margin: 0 auto 2rem auto;
	}
	header ol {
		margin: 0 0 1rem 0;
		padding: 0px;
	}
	header li {
		margin: 0 1rem;
	}
}
@media screen and (max-width: 600px){
	header li {
		margin: 0 1rem;
		font-size: 1.3rem;
	}
}


/*MainContents /////////////////////////////////*/
main{
width: 80%;
}

main h2{
font-size: 2.0rem;
background-color:aliceblue;
margin-right: 5%;
text-indent: 2rem;
border-left: 5px solid #426579;
}

blockquote#references{
padding: 1rem;
border: 1px dotted #cccccc;
}

blockquote#references img{
float: right;
}

/*Sidemenu /////////////////////////////////*/
aside{
width: 20%;
}
aside h2{
font-size: 1.7rem;
color: #ffffff;
background-color:#081F2D;
font-weight: normal;
text-align: center;
}
aside h3{
font-size: 1.5rem;
}

@media screen and (max-width: 768px){
main{
width: 100%;
}

aside{
width: 100%;
}
}

/*Footer /////////////////////////////////*/
footer{}

copyright p{
text-align: center;
}


/*other /////////////////////////////////*/

figure img{
display: block;
background-color: beige;
}

figure div.keyVisual{
width: 100%;
height: 250px;
background-image: url("../images/freephoto-site-1-1.jpg");
background-size: cover;
border:#eeeeee solid 10px;
background-position: center;
}

figure img.banner{
width: 100%;
height: auto;
margin: 0 auto;
}

@media screen and (max-width: 768px){
figure img.banner{
width: 50%;
}
}

.topPage{
text-align: right;
margin-right: 3rem;
}

.clearAll{
clear: both;
}