@charset "UTF-8";

@font-face {
	font-family: "NotoSans";
	src: url('NotoSans.otf') format('opentype');
}
@font-face {
	font-family: "NotoSerif";
	src: url('NotoSerif.otf') format('opentype');
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	line-height: 1.8em;
	font-size: 16px;
	font-family: "NotoSans", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	color: #333333;
	
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

.txt_c {
	text-align: center;
}
.mincho {
	font-family: "NotoSerif", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.red {
	color: #ff0000;
}
.pl20 {
	padding-left: 20px;
}
.pr20 {
	padding-right: 20px;
}
img {
	max-width: 100%;
}
h1 {
	font-size: 40px;
	font-weight: bold;
	padding: 0 0 10px 0;
	text-align: center;
	background: linear-gradient(to top, #00ccff, #ffffff 50%);
	line-height: 1.2em;
}

h2 {
	font-size: 30px;
	font-weight: bold;
	border: 4px groove #00ccff;
	padding: 10px;
	background: linear-gradient(to top left, #00ccff, #ffffff 50%);
}
h3 {
	font-size: 23px;
	font-weight: bold;
	padding: 0 0 10px 10px;
	border-bottom: 3px double #00ccff;
}

.fadein {
  opacity: 0;
  transform : translate(0, 150px);
  transition : all 1000ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

header {
	display: block;
	width: 100vw;
	height: 80px;
	position: fixed;
	top: 0;
	left: 0;
	background: linear-gradient(to bottom, #ccFFFF, #0000ff);
	opacity: 0.9;
	z-index: 10000;
}
.header {
	width: 1000px;
	margin: 0 auto;
}

.logo {
	display: block;
	float: left;
	padding: 10px 0 10px 20px;
}

.sp_menu {
	float: right;
	display: none;
}

.gnav {
	display: block;
	float: right;
}
.gnav ul {
	margin: 0;
	padding: 0;
	
}
.gnav li:before {
	content: "▶";
	color: #ffffff;
}
.gnav li {
	float: left;
	list-style: none;
	padding-right: 30px;
	padding-top: 25px;
}

.gnav li a {
	color: #ffffff;
	text-decoration: none;
}


.top_img {
	margin-top: 80px;
	width: 100vw;
}

.contents_top {
	display: block;
	width: 1000px;
	margin: 40px auto;
	
}
.contents {
	display: block;
	width: 1000px;
	margin: 120px auto;
	
}

section {
	display: block;
	margin-bottom: 100px;
}
.main_word {
	font-size: 25px;
	font-weight: bold;
	font-family: "NotoSerif", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
	text-align: center;
	line-height: 2em;
	color: #2927EC;
}

.works_box {
	margin-bottom: 50px;
}
.works_img_l {
	display: block;
	float: left;
	padding-right: 25px;
	padding-bottom: 20px;
}
.works_img_r {
	display: block;
	float: right;
	padding-left: 25px;
	padding-bottom: 20px;
}

footer {
	display: block;
	height: 60px;
	background: linear-gradient(to bottom, #ccFFFF, #0000ff);
}

footer p {
	text-align: center;
	margin: 0;
	padding: 20px 0 0 0;
	color: #ffffff;
}

.name-area,
.company-name-area,
.email-area,
.tel-area,
.inq-kind-area,
.detail-area,
.submit-button,
.return-button {
	font-family: "NotoSans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","Yu Gothic", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 16px;
	
}

.name-area,
.company-name-area,
.email-area,
.tel-area,
.inq-kind-area,
.detail-area {
	padding: 5px;
	border: 1px solid #cccccc;
	border-radius: 8px;
	background: linear-gradient(to bottom, #dddddd, #ffffff 50%);
	
}

.adsbygoogle {
	margin: 50px 0;
}

.mbp {
	margin: 50px 0;
}

.flex_box {
	display: flex;
	flex-wrap: wrap;
}
@media(min-width:768px) {
	.hp_img {
		float: left;
		width: 45%;
	}
	.hp_text {
		float: right;
		width: 50%;
	}
	.pc_br {
		display: block;
		content: "";
	}
	.sp_top_img {
		display: none;
	}
	
	.flex_box img {
		width: 38%;
	}
	.flex_box p.flex_right {
		width: 55%;
		padding-left: 5%;
	}
	.flex_box p.flex_left {
		width: 55%;
		padding-right: 5%;
	}
}

@media(max-width:768px) {
	
	.header {
		width: 100%;
	}
	.sp_menu {
		display: block;
	}
	.top_img {
		display: none;
	}
	.sp_top_img {
		display: block;
		width: 100vw;
		margin-top: 80px;
	}
	
	.gnav {
		position: fixed;
		top: 0;
		left: 0;
		width: calc(75%);
		z-index: 20000;
		display: none;
	}
	.gnav li {
		float: none;
		display: block;
		padding: 20px;
		width: calc(100% - 40px);
		border-bottom: 2px dotted #ffffff;
		background-color: #0000cc;
	}
	.gnav li a {
	}
	
	.contents_top,
	.contents {
		width: 96%;
	}
	
	.main_word {
		font-size: 20px;
		text-align: left;
		line-height: 1.5em;
	}
	
	.works_img_l,
	.works_img_r {
		float: none;
		padding: 0;
		margin-bottom: 20px;
	}
	.flex_box img {
		width: 100%;
	}
	.flex_box p.flex_right {
		width: 100%;
	}
	
}