/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

textarea{
	width: 100%;
	box-sizing:border-box;
}


/* common */
body {
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}


/* header */
.header{
	background-color: #00467c;
	padding-top: 2vw;
	padding-bottom: 2vw;
}

@media screen and (min-width:610px){
  .header{
		padding-top: 25px;
		padding-bottom: 25px;
  }
}

.header__logo{
	width: 40vw;
}

@media screen and (min-width:610px){
  .header__logo{
		width: 300px;
		padding-left: 180px;
  }
}

/* main */
.main{
	width: 90%;
	margin: 0 auto;
}

@media screen and (min-width:610px){
	.main{
		width: 1000px;
	}
}

.topic{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 5vw;
	margin-top: 5vw;
	margin-bottom: 4vw;
	font-weight: bold;
	color: #333333;
}

@media screen and (min-width:610px){
	.topic{
		font-size: 30px;
		margin-top: 80px;
		margin-bottom: 20px;
	}
}

.about p{
	font-size: 3vw;
	line-height: 5vw;
}

@media screen and (min-width:610px){
	.about p{
		font-size: 18px;
		line-height: 30px;
	}
}

.contact p{
	font-size: 3vw;
	line-height: 6vw;
}

@media screen and (min-width:610px){
	.contact p{
		font-size: 16px;
		line-height: 25px;
	}
}

.works-item{
	margin-top: 5vw;
}

@media screen and (min-width:610px){
	.works-item{
		margin-top: 30px;
	}
}

.works-item img{
	width: 100%;
}

.works-item p{
	font-size: 3vw;
}

@media screen and (min-width:610px){
	.works-item p{
		font-size: 18px;
		padding-top: 10px;
	}
}

footer{
  width: 100%;
  text-align: center;
  margin-top: 10vw;
	margin-bottom: 5vw;
  font-size: 3vw;
}

@media screen and (min-width:480px){
  footer{
    margin-top: 150px;
		margin-bottom: 50px;
    font-size: 15px;
  }
}