@charset "UTF-8";

#head {
	background:#FFF;
	box-shadow:0 1px 3px rgba(0,0,0,0.2);
}

#titlewrap {
	width:100%;
	margin:0 auto;
}
#titlewrap h1 {
	width:calc(100% - 60px);
	max-width:1000px;
	margin:0 auto;
	box-sizing:border-box;
	padding: 1em 0;
	font-size:30px;
	font-weight:100;
	line-height:1em;
}
#titlewrap h1 span {
	font-family:inherit;
	font-size:0.66em;
}

.navi {
	width:100%;
	background:#f2f2f2;
}
.navi > div {
	width:calc(100% - 60px);
	max-width:1000px;
	margin:0 auto;
	line-height:1.2em;
	padding:1em;
	font-size:13px;
}
.navi > div a {
	font-size:13px;
}
.navi > div a:hover {
	color:#999;
}
.navi > div a .svg-inline--fa {
	margin-right:0.3em;
	position:relative;
	color: #ec7aa1;
}
.navi > div > .svg-inline--fa {
	margin:0 1em;
}
.navi div span {
	color: #ec7aa1;
}

#contents {
	width:calc(100% - 60px);
	max-width:1000px;
	margin:0 auto;
	padding:30px 0;
}

#main p.body {
	font-size: 1.2em;
	line-height:1.8em;
	margin-bottom:3em;
}

div#contents h2 {
	font-size: 24px;
	line-height: 1.2em;
	margin: 0 0 2em;
}
div#contents h3 {
	font-size:18px;
}
div#contents h4 {
	font-size:16px;
	margin: 0 0 1em;
}

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

}

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

#titlewrap h1 {
	width:calc(100% - 40px);
	font-size: 24px;
}
.navi > div {
	width:calc(100% - 40px);
}
#contents {
	width:calc(100% - 40px);
	padding:20px 0;
}

div#contents h2 {
	font-size: 20px;
}
div#contents h3 {
	font-size:16px;
}
div#contents h4 {
	font-size:15px;
}

}

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

#titlewrap h1 {
	font-size: 20px;
}
.navi > div {
	padding:0.5em;
	font-size:12px;
}
.navi > div a {
	font-size:12px;
}
.navi > div > .svg-inline--fa {
	margin:0 0.5em;
}

#contents {
	padding:15px 0;
}

#main p.body {
	font-size: 1.2em;
	line-height:1.6em;
	margin-bottom:2.5em;
}
#main p {
	font-size:13px;
	line-height: 1.6em;
}
div#contents h2 {
	font-size: 18px;
	margin-bottom:1.5em;
}
div#contents h3 {
	font-size:15px;
}
div#contents h4 {
	font-size:14px;
}

}

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

}