@charset "utf-8";


/* ====================================
	
	----------------------------------
		Color
	----------------------------------
	
		Main     : #C30D24
		Accent   : #
	
	----------------------------------
		font
	----------------------------------
	
		游ゴシック
	
	----------------------------------
		Structure
	----------------------------------
	
		0. General
		1. Header
		2. Main
			2.1 Title
			2.2 Pankuzu
		3. Footer
			3.1	Page top
		4. Page
			4.1 About
			4.2 Service
			4.3 Company
			4.4 Contact
		5. Contact Form
		6. 404
		7. Media Query
	
	----------------------------------
		Change Log
	----------------------------------
	
		- ***
		- ***
		- ***
	
==================================== */




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

	0. General

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

html{
	font-size: 62.5%;
	margin: 0;
	padding: 0;
	overflow-y: scroll;
}

body {
	margin: 0;
	padding: 0;
	color: #000;
	font-size: 14px; 
	font-size: 1.4rem;
	font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",YuGothic,Verdana,Meiryo,"M+ 1p",sans-serif;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 140%;
	word-break : break-all;
	 -webkit-text-size-adjust: 100%;
	position: relative;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		body {
			font-weight: normal;
		}
	}

img{
	border: none;
	line-height: 0;
	vertical-align: bottom;
}

a:link {
	color: #C30D24;
	text-decoration: none;
}

a:visited {
	color: #C30D24;
	text-decoration: none;
}

a:hover {
	color: #C30D24;
	text-decoration: underline;
}

.base {
	width: calc(100% - 20px);
	max-width: 1080px;
	margin: 0 auto;
	box-sizing: border-box;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		.base {
			width: 100%;
			max-width: 100%;
			padding: 0 15px;
		}
	}




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

	1. Header

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

header {
	overflow: hidden;
	margin: 0 auto 40px auto;
	padding: 25px 0 25px 0;
	border-bottom: 1px solid #EEE;
}

header h1 {
	float: left;
}

header nav ul {
	overflow: hidden;
	margin-left: auto;
	float: right;
	font-weight: bold;
	padding: 10px 0 0 0px;
}

header nav ul li {
	float: left;
	position: relative;
	padding: 0 0 0 20px;
	margin-left: 20px;
}

header nav ul li:before {
	position: absolute;
	top: 4px;
	left: 0;
	width: 10px;
	height: 10px;
	background-color: #C30D24;
	content: "";
}

header nav ul li:last-child {
	padding: 0;
}

header nav ul li:last-child:before {
	display: none;
}

header nav ul li a,
header nav ul li a:link,
header nav ul li a:visited {
	color: #000;
}

header nav ul li a:hover {
	color: #C30D24;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		header {
			margin: 0 auto 20px auto;
			padding: 25px 0 10px 0;
			letter-spacing: 0.2em;
		}
		header h1 {
			float: none;
			margin-bottom: 10px;
		}
		
		header nav ul li {
			margin: 0 20px 10px 0;
		}
	}




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

	2. Main

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

#content {
	width: 100%;
	margin: 0 auto 160px auto;
	box-sizing: border-box;
}


.text {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 160%;
}

.text_small {
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 160%;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		#content {
			margin: 0 auto 100px auto;
			letter-spacing: 0.12em;
		}
		
		#content img {
			width: 100%;
		}
		
		.text {
			font-size: 15px;
			font-size: 1.5rem;
		}

		.text_small {
			font-size: 12px;
			font-size: 1.2rem;
		}
	}


/*
 	2.1 Title
==================================== */

section h1 {
	width: 100%;
	margin: 0 auto 60px auto;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	text-indent: 4px;
	letter-spacing: 4px;
	line-height: 100%;
	color: #444;
	box-sizing: border-box;
}

section h1 span {
	display: block;
	margin-bottom: 100px;
	font-size: 64px;
	font-size: 6.4rem;
	font-weight: bold;
	letter-spacing: 0;
	color: #C30D24;
	position: relative;
}

section h1 span::after {
	position: absolute;
	display: block;
	content: '';
	bottom: -60px;
	width: 100px;
	left: 0;
	right: 0;
	margin: 0 auto;
	border-bottom: 4px solid #CCC;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		section h1 {
			margin: 0 auto 40px auto;
			font-size: 16px;
			font-size: 1.6rem;
		}
		section h1 span {
			margin-bottom: 60px;
			font-size: 48px;
			font-size: 4.8rem;
		}
		section h1 span::after {
			bottom: -38px;
		}
	}

section h2 {
	width: 100%;
	margin: 0 auto 30px auto;
	font-size: 30px;
	font-size: 3.0rem;
	font-weight: bold;
	letter-spacing: 3px;
	line-height: 100%;
	color: #C30D24;
	box-sizing: border-box;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		section h2 {
			margin: 0 auto 20px auto;
			font-size: 20px;
			font-size: 2.0rem;
			line-height: 140%;
		}
	}


section h3 {
	width: 100%;
	margin: 0 auto 40px auto;
	padding: 20px 10px 18px 10px;
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: bold;
	letter-spacing: 3px;
	line-height: 100%;
	color: #333;
	border-top: 4px solid #CCC;
	border-bottom: 4px solid #CCC;
	box-sizing: border-box;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		section h3 {
			margin: 0 auto 30px auto;
			font-size: 18px;
			font-size: 1.8rem;
			line-height: 140%;
		}
	}


section h4 {
	width: 100%;
	margin: 0 auto 20px auto;
	padding-bottom: 10px;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: 3px;
	color: #C30D24;
	border-bottom: 1px solid #C30D24;
	box-sizing: border-box;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		section h4 {
			margin: 0 auto 20px auto;
			font-size: 15px;
			font-size: 1.5rem;
			line-height: 140%;
		}
	}


section h5 {
	width: 100%;
	margin: 0 auto 10px auto;
	padding: 5px 10px;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: 3px;
	line-height: 100%;
	color: #333;
	background-color: #EEE;
	box-sizing: border-box;
}


/*
 	2.2 Pnakuzu
==================================== */

#pankuzu{
	width: 1080px;
	margin: 0 auto 50px auto;
	letter-spacing: 2px;
}

#pankuzu ul{
	overflow:hidden;
	clear:both;
}

#pankuzu ul li{
	float:left;
	position: relative;
	margin:0 10px 5px 0;
	padding-left: 20px;
	font-size: 14px;
	font-size: 1.4rem;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		#pankuzu{
			width: 100%;
			margin: 0 auto 40px auto;
			padding: 0 10px;
			box-sizing: border-box;
		}
		
		#pankuzu ul li{
			font-size: 12px;
			font-size: 1.2rem;
		}
	}


#pankuzu ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .35em;
	left: 0;
	width: 6px;
	height: 6px;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#pankuzu ul li.first {
	padding-left: 0;
}

#pankuzu ul li.first::after {
	display: none;
}


/*
 	2.3 Button
==================================== */

.bt,
.bt:link,
.bt:visited {
	width: 320px;
	margin: 0 auto;
	padding: 20px 0 18px 0;
	display: block;
	font-size: 18px;
	font-size: 1.8rem;
	text-align: center;
	text-decoration: none;
	letter-spacing: 3px;
	line-height: 100%;
	color: #FFF;
	background-color: #C30D24;
	border: 1px solid #C30D24;
	box-sizing: border-box;
	position: relative;
}

.bt.gray {
	background-color: #999;
	border: 1px solid #999;
}

.bt:hover {
	color: #C30D24;
	background-color: #FFF;
}

.bt.gray:hover {
	color: #999;
}

.bt::after {
	display: block;
	content: '';
	position: absolute;
	top: 42%;
	right: 25px;
	width: 8px;
	height: 8px;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.bt:hover::after {
	border-right: 2px solid #C30D24;
	border-bottom: 2px solid #C30D24;
}

.bt.gray:hover::after {
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
}



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

	3. footer

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

footer {
	text-align: center;
}

footer #copy {
	background-color: #C30D24;
	color: #fff;
	display: block;
	width: 100%;
	padding: 8px 0;
	font-size: 13px;
	font-size: 1.3rem;
}



/*
 	3.1 Page top
==================================== */

.go_top{
	position: fixed;
	right: 20px;
	margin-bottom: 20px;
}

.go_top a{
	display: block;
	width: 60px;
	height: 60px;
	color: #C30D24;
	text-indent: -9999px;
	background-color: #FFF;
	border: 2px solid #C30D24;
	position: relative;
	border-radius: 30px;
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	box-sizing: border-box;
}

.go_top a::after {
	display: block;
	content: '';
	position: absolute;
	top: 45%;
	left: 0;
	right: 0;
	width: 12px;
	height: 12px;
	margin: auto;
	border-right: 2px solid #C30D24;
	border-bottom: 2px solid #C30D24;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

.go_top a:hover{
	filter:alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
}




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

	4. Page

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

/*
 	4.1 About
==================================== */

span.big {
	display: inline-block;
	margin: 5px 0 5px 0;
	font-size: 2.0rem;
	font-size: 20px;
	font-weight: bold;
	color: #C30D24;
}

.about_box {
	overflow: hidden;
	clear: both;
}

.about_L {
	float: left;
	width: 600px;
}

.about_R {
	float: right;
	width: 400px;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		.about_L {
			float: none;
			width: 100%;
		}

		.about_R {
			float: none;
			width: 100%;
		}
	}

ul.about {
	width: 100%;
	margin: 0 auto;
}

ul.about li {
	position: relative;
	margin-bottom: 22px;
	padding-left: 25px;
	padding-bottom: 20px;
	font-size: 16px;
	font-size: 1.6rem;
	letter-spacing: 2px;
	line-height: 175%;
	color: #000;
	border-bottom: 1px solid #C30D24;
}

ul.about li:before {
	position: absolute;
	top: 6px;
	left: 0;
	width: 14px;
	height: 14px;
	background-color: #C30D24;
	content: "";
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		ul.about li {
			margin-bottom: 22px;
			padding-left: 25px;
			padding-bottom: 20px;
			font-size: 15px;
			font-size: 1.5rem;
		}

		ul.about li:before {
			position: absolute;
			top: 6px;
			left: 0;
			width: 14px;
			height: 14px;
			background-color: #C30D24;
			content: "";
		}
	}


/*
 	4.2 Service
==================================== */

.service_link {
	margin: 0 auto 30px auto;
	letter-spacing: -.4em;
	box-sizing: border-box;
}

.service_link a {
	display: inline-block;
	width: 500px;
	margin: 0 auto 30px auto;
	padding: 44px 0 40px 0;
	font-size: 2.0rem;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 4px;
	text-indent: 4px;
	text-align: center;
	line-height: 160%;
	color: #FFF;
	vertical-align: top;
	background-color: #C30D24;
	border: 3px solid #C30D24;
//	border-radius: 10px;
	box-sizing: border-box;
	position: relative;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		.service_link a {
			width: 100%;
			display: block;
			font-size: 18px;
			font-size: 1.8rem;
			text-indent: -40px;
		}
		
		a.bt::after {
			top: 41%;
			right: 100px;
		}
	}

.service_link a:hover {
	color: #C30D24;
	text-decoration: none;
	background-color: #FFF;
}

.service_link a:first-child {
	margin-right: 80px;
	padding: 58px 0;
}

.service_link a::after {
	display: block;
	content: '';
	position: absolute;
	top: 46%;
	right: 40px;
	width: 12px;
	height: 12px;
	border-right: 3px solid #FFF;
	border-bottom: 3px solid #FFF;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.service_link a:hover::after {
	border-right: 3px solid #C30D24;
	border-bottom: 3px solid #C30D24;
}


ul.service {
	margin: 0 auto 10px auto;
	width: 100%;
	letter-spacing: -.4em;
	box-sizing: border-box;
}

ul.service li{
	display: inline-block;
	width: 340px;
	margin: 0 10px 20px 10px;
	padding: 12px 0 10px 46px;
	font-size: 1.4rem;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.1em;
	vertical-align: middle;
	color: #C30D24;
	border: 2px solid #DDD;
	border-radius: 25px;
	position: relative;
	box-sizing: border-box;
}

ul.service li::before {
	display: block;
	content: '';
	position: absolute;
	top: 10px;
	left: 18px;
	font-family: FontAwesome;
	font-size: 20px;
	font-size: 2.0rem;
	color: #C30D24;
	content: '\f075';
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		ul.service li {
			display: block;
			width: 100%;
			margin: 0 0 15px 0;
		}
	}

ul.menu {
	margin: 0 auto 10px auto;
	width: 100%;
	letter-spacing: -.4em;
	box-sizing: border-box;
}

ul.menu li {
	width: 49%;
	margin-bottom: 20px;
	display: inline-block;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.2em;
	line-height: 100%;
	color: #FFF;
	vertical-align: top;
	background-color: #C30D24;
	border: 3px double #C30D24;
	box-sizing: border-box;
	position: relative;
}

ul.menu li:nth-child(odd){
	margin-right: 20px;
}

ul.menu li:hover{
	background-color: #FFF;
	border: 3px double #C30D24;
}

ul.menu li a {
	display: block;
	width: 100%;
	padding: 20px 0 18px 0;
	text-decoration: none;
	color: #FFF;
	box-sizing: border-box;
}

ul.menu li a:hover{
	color: #C30D24;
}

ul.menu li::after {
	display: block;
	content: '';
	position: absolute;
	top: 40%;
	right: 25px;
	width: 8px;
	height: 8px;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

ul.menu li:hover::after {
	border-right: 2px solid #C30D24;
	border-bottom: 2px solid #C30D24;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		ul.menu {
			margin-top: -20px;
		}
		
		ul.menu li {
			width: 100%;
			display: block;
			margin: 0;
			margin-bottom: 20px;
			font-size: 15px;
			font-size: 1.5rem;
			text-align: left;
			letter-spacing: 0.15em;
		}
		ul.menu li a {
			padding: 18px 30px 16px 15px;
			line-height: 140%;
		}
		ul.menu li::after {
			right: 15px;
		}
	}


.harvest_box_R {
	width: 100%;
	overflow: hidden;
	clear: both;
	box-sizing: border-box;
}

.harvest_box_R > .harvest_text {
	float: left;
	width: 660px;
	box-sizing: border-box;
}

.harvest_box_R > .harvest_pic {
	float: right;
	width: 360px;
	box-sizing: border-box;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		.harvest_box_R > .harvest_text {
			float: none;
			width: 100%;
			margin-bottom: 30px;
		}

		.harvest_box_R > .harvest_pic {
			float: none;
			width: 100%;
		}
	}

.harvest_box_L {
	width: 100%;
	overflow: hidden;
	clear: both;
	box-sizing: border-box;
}

.harvest_box_L > .harvest_text {
	float: right;
	width: 660px;
	box-sizing: border-box;
}

.harvest_box_L > .harvest_pic {
	float: left;
	width: 360px;
	box-sizing: border-box;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		.harvest_box_L > .harvest_text {
			float: none;
			width: 100%;
			margin-bottom: 30px;
		}

		.harvest_box_L > .harvest_pic {
			float: none;
			width: 100%;
		}
	}

ul.harvest {
	width: 100%;
	margin: 0 auto;
}

ul.harvest li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 20px;
	font-size: 16px;
	font-size: 1.6rem;
	letter-spacing: 0.15em;
	line-height: 175%;
	color: #000;
	word-break: normal;
}

ul.harvest li:before {
	position: absolute;
	top: 8px;
	left: 0;
	width: 10px;
	height: 10px;
	background-color: #C30D24;
	content: "";
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		ul.harvest li {
			font-size: 15px;
			font-size: 1.5rem;
			letter-spacing: 0.12em;
		}
	}

.idea_box {
	display: inline-block;
	padding: 15px;
	font-weight: bold;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 160%;
	color: #FFF;
	background-color: #C30D24;
}


table.idea {
	width: 100%;
	box-sizing: border-box;
	border-spacing: 0 20px !important;
	border-collapse: separate !important;
}
	
table.idea tr {
	display: block;
	width: 100%;
	border-bottom: 1px dashed #ccc
}
	
table.idea th p {
	background-color: #DDD;
	padding: 10px 15px 8px 15px;
	border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
	font-size: 16px;
	color: #000;
	font-weight: bold;
}	
	
table.idea th {
	width: 280px;
	line-height: 160%;
	vertical-align: top;
}

table.idea td {
	padding: 0 0 0 40px;
	font-size: 1.6rem;
	font-size: 16px;
	line-height: 160%;
}

table.idea td ul.harvest li:last-child {
	margin-bottom: 0;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		table.idea tr {
			display: block;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 20px;
		}
		
		table.idea th{
			display: block;
			width: 100%;
			box-sizing: border-box;
		}

		table.idea td {
			display: block;
			padding: 10px;
			width: 100%;
			font-size: 1.5rem;
			font-size: 15px;
			line-height: 150%;
			box-sizing: border-box;
		}
		
		table.idea td span {
			margin: 10px 0 3px 0;
			font-size: 1.3rem;
			font-size: 13px;
			font-weight: bold;
			color: #C30D24;
		}
	}


/*
 	4.3 Company
==================================== */

table#company {
	width: 100%;
	box-sizing: border-box;
	border-spacing: 0 20px !important;
	border-collapse: separate !important;
}
	
table#company tr {
	display: block;
	width: 100%;
	border-bottom: 1px solid #ccc
}
	
table#company th p {
	background-color: #C30D24;
	padding: 10px 15px 8px 15px;
	border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
	font-size: 16px;
	color: #fff;
	font-weight: bold;
}	
	
table#company th {
	width: 150px;
	line-height: 160%;
	vertical-align: top;
}

table#company td {
	padding: 8px 0 8px 40px;
	font-size: 1.6rem;
	font-size: 16px;
	line-height: 160%;
}

table#company td span {
	display: block;
	margin: 10px 0 5px 0;
	font-size: 1.5rem;
	font-size: 15px;
	font-weight: bold;
	color: #C30D24;
}


	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		table#company tr {
			display: block;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 20px;
		}
		
		table#company th{
			display: block;
			width: 100%;
			box-sizing: border-box;
		}

		table#company td {
			display: block;
			padding: 10px;
			width: 100%;
			font-size: 1.5rem;
			font-size: 15px;
			line-height: 150%;
			box-sizing: border-box;
		}
		
		table#company td span {
			margin: 10px 0 3px 0;
			font-size: 1.3rem;
			font-size: 13px;
			font-weight: bold;
			color: #C30D24;
		}
	}



/*
 	4.4 Contact
==================================== */