/*★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

				全ページ適用のベーススタイル

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/

*,
*::before,
*::after{
	box-sizing: inherit;
	margin: 0;
	padding: 0;	
}

html{
	font-size: 62.5%;
	box-sizing: border-box;
}

body{
	font-size: 1.6em;
	line-height: 2;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
	width: 100%;	
}

/*★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

				Topページのスタイル

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/

#top-section{
	font-size: 0;
}
header{
	position: fixed;
	top: 0;
	margin: 0;
	padding: 0 0 1vw 0;
	background: #fff;
	font-size: 0;
	width: 100%;
	z-index: 9999;
}
h1{
	font-size: 3.6rem;
	line-height: 1.3;
}
h2{
	font-size: 5.5vw;
	line-height: 1.3;
	padding: 0.5em;
	color: #494949;
	background: #fffaf4;
	border-left: solid 5px #ffaf58;
}
p{
	text-align: justify;
}
a{
	color: #FFF;
}

/*---------------------------------------------------------
containerの設定
-----------------------------------------------------------*/

#headline-container{
	display: flex;
	widh: 100%;
	heiht: 50px;
	padding: 0 0 1vw 1vw;
}

#nav-container{
	font-size: 1.6rem;
	color: #FFF;
	display: -webkit-flex;
	display: flex;
	background-color: #808080;	
	justify-content: stretch;	
	list-style: none;		
	margin: 0;
	padding :0% 1%;		
}

/*---------------------------------------------------------
flex-itemの設定
-----------------------------------------------------------*/

#logo{
	flex: auto 0 0;
}
#headline{
	font-size: 4vw;
	margin: auto 0 auto 1.5vw;
	line-height: 1;
}
#headline::after{
	content: '\FF5E\91E3\884C\8A18\9332\3068\91E3\53CB\4EA4\6D41\30B5\30A4\30C8\FF5E';
	font-size: 3.2vw;
}
.flex-item{
	color: #fff;
	margin:0 auto;
}
#main-content,
#aside-content{
	margin: 0% 2%;
	padding: 0% 2%;
	width: 96%;
}

/*---------------------------------------------------------
imgの設定
-----------------------------------------------------------*/

.picture{
	margin: 10px;
	width: 80%;
	height: auto;
}
.sio{
	width: 70%;
	height: auto;
}
#mainImg{
	margin: 0;
	padding: 0;
	max-width: 100%;
	height: auto;
}
#logo-img{
	width: 50px;
	height: auto;
}


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

ブレイクポイント960px以上

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

@media screen and (min-width: 960px){
	body{		
		margin-right: auto;
		margin-left: auto;
		padding: 0;
		width: 960px;
	}
	h2{
		font-size: 2.4rem;
		line-height: 1.3;
	}
	header{
		font-size:0;
		margin: 0;
		padding: 0 0 5px 0;
		width: 960px;
		height: 160px;
		box-sizing: content-box;
	}

/*---------------------------------------------------------
containerの設定
-----------------------------------------------------------*/

	#headline-container{
		display: flex;
		width: 960px;
		height: 120px;
		margin: 0;
		padding: 0 0 5px 5px;;
	}
	#nav-container{
		font-size: 1.6rem;
		color: #FFF;
		display: -webkit-flex;
		display: flex;
		background-color: #808080;	
		justify-content: space-evenly;	
		list-style: none;		
		margin: 0;
		padding: 0;
	}
	#main-container{
		display: -webkit-flex;
		display: flex;
		width: 100%;
	}

/*---------------------------------------------------------
flex-itemの設定
-----------------------------------------------------------*/

	#logo{
		flex: auto 0 0;
	}
	#headline{
		font-size: 38px;
		margin: auto 0 auto 8px;
	}
	#headline::after{
	content: '\FF5E\91E3\884C\8A18\9332\3068\91E3\53CB\4EA4\6D41\30B5\30A4\30C8\FF5E';
	font-size: 29px;
	}
	#main-content{			
		width: calc(100% - 302px);
		margin: 0 0 0 1%;
		padding: 0;
	}
	#aside-content{
		width: 302px;
		margin: 0 0 0 4%;
		padding: 0;
	}

/*---------------------------------------------------------
imgの設定
-----------------------------------------------------------*/

	#logo-img{
		width: 120px;
		height: auto;

	}
}

/*★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

				workingページのスタイル

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/

#working{
	width: 100%;
	margin: 0;
	padding: 0 4%;
}

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

ブレイクポイント960px以上

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

@media screen and (min-width: 960px){
	#working{
		width: 100%;
		margin: 0;
		padding: 0 1%;
	}
}

/*★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

				blogページのスタイル

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/

#blog{
	width: 100%;
	margin: 0;
	padding: 0 4%;
}

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

ブレイクポイント960px以上

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

@media screen and (min-width: 960px){
	#blog{
		width: 100%;
		margin: 0;
		padding: 0 1%;
	}
}

/*★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

				columnページのスタイル

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/

#column{
	width: 100%;
	margin: 0;
	padding: 0 4%;
}

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

ブレイクポイント960px以上

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

@media screen and (min-width: 960px){
	#column{
		width: 100%;
		margin: 0;
		padding: 0 1%;
	}
}