@charset "utf-8";

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	使ったクラス一覧
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/****
	-section：一まとまりのブロック（one, two, three とつなげてつかってます。）
	-one: sectionの１つ目のブロック
	-tow: sectionの２つ目のブロック
	-three: sectionの３つ目のブロック
	-title: 各セクションのタイトルをまとめてスタイリングするためのクラス
 *****/

/* /////////////////////////////////////////////////////////////////////////////////////////////
		ページをまたいで適用するスタイル
///////////////////////////////////////////////////////////////////////////////////////////// */

/**** header_bg *****/
#header_bg { background: url(../images/service/fv.jpg) center bottom no-repeat;  background-size: cover; height: 760px; }
#header_bg #fv { color: #fff; text-align: center; padding: 270px 0 0;}
#header_bg #fv span{ display: block; font-size: 50px; font-weight: 700;}


/**** .btnの大まかなスタイル *****/
.btn a { display: block; text-align: center;}

/**** トップページに戻るボタン *****/
.btn_totop { background: #92D624; width: 360px; height: 50px; margin: 0 auto 150px;;}
.btn_totop a {font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal; display: block; background: url(../images/common/arrow_01.gif) 95% 45% no-repeat; background-size: 33px auto;  font-size: 15px; color: #fff; width: 360px; height: 50px; text-align: center; line-height: 50px;}



/* /////////////////////////////////////////////////////////////////////////////////////////////
		このページだけのスタイル
///////////////////////////////////////////////////////////////////////////////////////////// */

/********************************
	まとめてつけるスタイル
	-title
********************************/
.title { font-size: 16px;  color: #fff; text-align: center; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal; }
.title span { display: block; font-size: 32px; font-family: halogen, sans-serif; font-weight: 300; font-style: normal;  letter-spacing: 5px; }
.section.one { width: 100%; height: 500px;}
.section.one p { font-size: 16px; color: #fff;  text-align: center;}
.section.two { text-align: center; padding: 95px 0 0; }
.section.two h4 { font-size: 30px; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal; padding: 0 0 35px; }


/*********************************
	idごとのユニークなスタイル
*********************************/
/* main内部のスタイル */
#icatch { color: #000; text-align: center; padding: 90px 0 100px;}
#icatch h2 { font-size: 24px; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal; }
#processing{padding: 100px 0 0px;}
#processing div.section.one { background: url(../images/service/pic_01.jpg) center center no-repeat; background-size: cover; }
#processing div.section.one h3 { padding: 190px 0 30px;}
#processing div.section.two p { font-size: 16px; padding: 0 0 90px; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal; }
#processing div.section.three { background: #f2f2f2; padding: 90px 0 100px;}
#processing div.section.three img { display: block; width: 500px; height: auto; padding: 0 50px 0 0; float: left;}
#processing div.section.three p { font-size: 16px; width: 550px; height: 420px; padding: 40px 0 0; float: left;}

#sales div.section.one { background: url(../images/service/pic_03.jpg) center center no-repeat; background-size: cover; }
#sales div.section.one h3 { padding: 220px 0 30px;}
#sales div.section.two p { padding: 0 0 115px;}
#sales div.section.three { padding: 100px 0 200px; }
#sales div.section.three ul { background: #ececec; }
#sales div.section.three ul li dl dt { border-right: 1px solid #fff; border-bottom: 1px solid #fff; font-size: 18px; width: 239px; padding: 25px 30px; float: left;font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal;  }
#sales div.section.three ul li dl dd { border-bottom: 1px solid #fff; font-size: 18px; width: 739px; padding: 25px 30px; float: left;font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal;  }

#product div.section.one { background: url(../images/service/pic_04.jpg) center center no-repeat; background-size: cover;}
#product div.section.one h3 { padding: 220px 0 30px;}
#product { padding: 0 0 85px; }
#product div.section.two { background: #ececec; padding: 50px 0 50px;  }
#product div.section.two ul li { border-right: 2px solid #ececec; border-bottom: 2px solid #ececec; background: #fff; width: 487px; text-align: left; padding: 25px 30px; float: left;font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal; }


@media screen and (max-width: 640px){
	/**** header_bg *****/
	#header_bg { background: url(../images/service/fv_sp.jpg) center center no-repeat;  background-size: cover; height: auto; }
	#header_bg #fv { color: #fff; text-align: center; padding: 30% 0;}
	#header_bg #fv span{ display: block; font-size: 30px; font-weight: bold;}
	
	/**** .btnの大まかなスタイル *****/
	.btn a { display: block; text-align: center;}
	
	/**** トップページに戻るボタン *****/
	.btn_totop { width: 360px; height: 50px; margin: 0 auto 150px;;}
	.btn_totop a { display: block; background: url(../images/common/arrow_01.gif) 95% 45% no-repeat; background-size: 33px auto;  font-size: 15px; color: #fff; width: 360px; height: 50px; text-align: center; line-height: 50px;}
	
	/* /////////////////////////////////////////////////////////////////////////////////////////////
			このページだけのスタイル
	///////////////////////////////////////////////////////////////////////////////////////////// */
	
	/********************************
		まとめてつけるスタイル
		-title
	********************************/
	.title { font-size: 16px;  color: #fff; text-align: center;}
	.title span { display: block; font-size: 21px; line-height: 140%; }
	.section.one { width: 100%; height: 400px;}
	.section.one p { font-size: 14px; color: #fff;  text-align: left; line-height: 130%; padding: 0 0 10px;}
	.section.two { text-align: center; padding: 25px 0 0; }
	.section.two h4 { font-size: 20px; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal; padding: 0 0 25px; }
	
	
	/*********************************
		idごとのユニークなスタイル
	*********************************/
	/* main内部のスタイル */
	#icatch { color: #000; text-align: center; padding: 25px 0;}
	#icatch h2 { font-size: 20px; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal; text-align: left; }
	
	#processing{padding: 50px 0 0px;}
	
	#processing div.section.one { background: url(../images/service/pic_01.jpg) center center no-repeat; background-size: cover; height: auto; padding: 15px 0; }
	#processing div.section.one h3 { padding: 40px 0 50px;}
	#processing div.section.two p { font-size: 16px; text-align: left; line-height: 130%; padding: 0 0 45px; }
	#processing div.section.three { background: #f2f2f2; padding: 45px 0 50px;}
	#processing div.section.three img { display: block; width: 100%; height: auto; padding: 0; float: none;}
	#processing div.section.three p { font-size: 16px; width: 100%; height: auto; text-align: left; line-height: 130%; padding: 20px 0 0; float: none;}
	
	#sales div.section.one { background: url(../images/service/pic_03.jpg) center center no-repeat; background-size: cover; height: auto;}
	#sales div.section.one h3 { padding: 100px 0 90px;}
	#sales div.section.one p { padding: 0 0 30px; }
	#sales div.section.two p { font-size: 16px;  text-align: left; line-height: 130%; padding: 0 0 50px;}
	#sales div.section.three { padding: 50px 0; }
	#sales div.section.three ul { background: #ececec; }
	#sales div.section.three ul li dl dt { border-right: none; border-bottom: none; font-size: 16px; width: 100%; padding: 10px 10%; float: none; box-sizing: border-box; }
	#sales div.section.three ul li dl dd { background: #fff; border-bottom: none; font-size: 16px; width: 100%; padding: 10px 10%; float: none; box-sizing: border-box; }
	
	#product { padding: 0 0 30px;}
	#product div.section.one { background: url(../images/service/pic_04.jpg) center center no-repeat; height: 230px;}
	#product div.section.one h3.title { padding: 90px 0 20px;}
	#product div.section.two { background: #ececec; padding: 30px 0 30px;  }
	#product div.section.two ul li { border: none; border-bottom: 2px solid #ececec; background: #fff; width: 100%; text-align: left; padding: 10px 10px; float: none; box-sizing: border-box; }
	
	.btn_totop { width: 200px; height: 50px; margin: 0 auto 75px;}
	.btn_totop a { display: block; background: url(../images/common/arrow_01.gif) 95% 45% no-repeat; background-size: 33px auto;  font-size: 15px; color: #fff; width: 165px; height: 50px; text-align: center; line-height: 50px; padding: 0 35px 0 0;}
}