/*////////////////////////////////////////////////////////////////////

common.css (PC)
	
////////////////////////////////////////////////////////////////////*/

body{
	/*background: #383842;*/
	background: #FFFFFF;
	color: #666;
	font-family: YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
a:hover img {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}

a{
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

a:link {
	color: #666;
	text-decoration : underline;
	}
a:visited {
	color: #666;
	text-decoration : underline;
	}
a:hover {
	color: #C6C6C6;
	}
a:active {
	color: #C6C6C6;
	}

.font-10{
	font-size:1.0rem;
}
.font-14{
	font-size:1.4rem;
}
.font-16{
	font-size:1.6rem;
	line-height: 1.8em;
}
.font-18{
	font-size:1.8rem;
	line-height: 1.8em;
}
.font-20{
	font-size:2.0rem;
	line-height: 1.5em;
}
.font-24{
	font-size:2.4rem;
	line-height: 1.5em;
}
.font-bold{
	font-weight: bold;
}

.center{
	margin: 0 auto;
	text-align: center;
}


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

		overflow:hidden;
	}
	.inner {
		width: 100%;
		max-width:1140px;
		margin:0 auto;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.contents{
		padding: 130px 0 80px !important;
	}
	h1{
    font-family: 'Roboto', YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
	h2{
		font-size: 2rem;
		font-weight: 100;
		letter-spacing: 0.15em;
		text-align: center;
		margin-bottom: 50px;
		padding-bottom: 50px;
		border-bottom: #FFF 1px solid;
    font-family: 'Roboto', YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
}

@media screen and (max-width: 767px) {
	section {
		padding:0 0 15%;
		overflow:hidden;
	}
	.inner {
		width:90%;
		margin:0px auto;
	}
	.contents{
		padding-top: 25% !important;
	}
	h1{
    font-family: 'Roboto', YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
	h2{
		font-size: 1.6rem;
		font-weight: 100;
		letter-spacing: 0.15em;
		text-align: center;
		margin-bottom: 7%;
		padding-bottom: 7%;
		border-bottom: #FFF 1px solid;
    font-family: 'Roboto', YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
}

/*
========================================================
	header 
========================================================
*/ 

@media screen and (min-width: 980px) {
	header {
		width:100%;
		min-width: 800px;
		color: #000;
		background-color: rgba(255,255,255,1);  
		padding-bottom: 20px;
		overflow: hidden;
		position: fixed;
    top:0;
		z-index: 1000;
	}
	header a{
		text-decoration : none !important;
	}
	header h1{
		width: 180px;
		margin-top: 20px;
		margin-left: 50px;
		float: left;
		overflow: hidden;
	}
	#menu-icon {
		display: none;
	}
	header nav{
		float: right;
		margin-right: 50px;
	}
	header nav li{
		margin-right:25px;
		font-size: 1.1rem;
		font-weight: 100;
		letter-spacing: 0.2em;
		margin-top: 25px;
    font-family: 'Roboto', YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
	header nav li:last-child{
		margin-right:0;
	}
	header nav li.icon{
		width: 22px;
		margin-top: 24px;
	}
}

@media screen and (max-width: 979px) {
	header {
		width:100%;
    height: 70px;
		padding: 15px 0;
		background-color: rgba(255,255,255,1);  
		position: fixed;
		z-index: 1000;
    box-sizing: border-box;
	}
	header .headerArea{
		position: relative;
	}
	header a{
		text-decoration : none !important;
	}
	header h1{
		text-align: center;
	}
	
	header h1 img {
		width: 200px;
	}
	#menu-icon {
		display: block;
		top: 0px;
		right: 20px;
		position: absolute;
	}
	header nav {
		position: absolute;
		width: 100%;
		background-color: rgba(255,255,255,1);  
		font-size: 12px !important;
		top: 48px;
		display: none;
		overflow: hidden;
	}
	header nav li {
		width: 100%;
		display: block;
		padding: 5% 5%;
		border-bottom: solid 1px #E6E6E6;
		float: none;
    font-family: 'Roboto', YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
	header nav li a{
		display: block;
		background-image: none;
		zoom: 1;
		text-indent: 0;
	}
}

/*
========================================================
	footer
========================================================
*/ 

@media screen and (min-width: 768px) {
	footer{
		background: #383842;
		color: #FFF;
		font-size: 1.1rem;
		letter-spacing: 0.15em;
		font-weight: 100;
		width: 100%;
		padding: 20px 0;
	}
	footer .copy{
		text-align: center;
	}
}

@media screen and (max-width: 767px) {
	footer{
		background: #383842;
		color: #FFF;
		font-size: 1rem;
		letter-spacing: 0.15em;
		font-weight: 100;
		width: 100%;
		padding: 20px 0;
	}
	footer .copy{
		text-align: center;
	}
}