@charset "utf-8";

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	使ったクラス一覧
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/****
	-float_wrapper:float要素を包む箱につける
	-btn:ボタン
	-pc
	-title:fvの下につくタイトルにつける
	-btn_totop：各ページのfooter付近にある「トップページにもどる」ボタン
 *****/

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

/**** 見出しのスタイル ****/
#icatch { padding: 60px 0; text-align: center; }
#icatch h2 { font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal; }

/**** header_bg *****/
#header_bg { background: url(../images/company/fv_01.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 のスタイル[philosophy, message, outline, history]
	-otherのなかの共通のスタイル
********************************/
/* .btn のスタイル[philosophy, message, outline, history] */
#philosophy .btn,
#other .btn { width: 230px; height: 40px; margin: 0 auto;}
#philosophy .btn a,
#other .btn a { background: url(../images/common/arrow_02.gif) 95% 45% no-repeat; background-size: 33px auto; font-size: 14px; color: #99DD2D; width: 220px; height: 40px; line-height: 40px; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal; }

/* 	otherのなかの共通のスタイル */
#other { background: #f8f8f8; margin: 0 0 70px; padding: 0 0 50px;}
#other .float_wrapper { margin: 0;}
#other .float_wrapper img { display: block; width: 100%; height: auto; float: none;}
#other dl { background: #6E6E6E; color: #fff; width: 100%; text-align: center; padding: 20px 0;}
#other dl dt { font-size: 14px; padding: 0 0 20px;}
#other dl dt h3 { border-bottom: 1px solid #99DD2D; width: 85%; margin : 0 auto; padding: 0 0 20px; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal; color: #99DD2D;}
#other dl dt h3 span{ display: block; position: relative; font-size: 30px; font-family: halogen, sans-serif; font-weight: 400; font-style: normal; line-height: 100%;}
#other dl dd p { font-size: 15px; height: 65px; line-height: 150%; padding: 0 0 10px;}

/*********************************
	idごとのユニークなスタイル
	-philosohy
	-message
	-outline
	-history
*********************************/
#philosophy { background: #f8f8f8; padding: 50px 0 12px;}
#philosophy img { display: block; width: 50%; height: auto; float: left;}
#philosophy dl { background: #6E6E6E; color: #fff; width: 44%; height: auto; padding: 90px 3% 75px; float: left;}
#philosophy dl dt { border-bottom: 1px solid #99DD2D; margin: 0 0 20px; padding: 0 0 30px; }
#philosophy dl dt h3 { font-size: 16px; text-align: center; color: #99DD2D;font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal;}
#philosophy dl dt h3 span { display: block; font-size: 30px; font-family: halogen, sans-serif; font-weight: 400; font-style: normal; line-height: 100%; }
#philosophy dl dd p { font-size: 15px; text-align: center; padding: 0 0 25px;}

/**** otherの内部のスタイル(共通のスタイルは上に記述) *****/
#message { width: calc(100% / 3 - 8px); margin: 0 12px 0 0; float: left;}
#message .btn a { padding: 0 0 0 30px; text-align: left; width: 200px;}

#outline { width: calc(100% / 3 - 8px); margin: 0 12px 0 0; float: left;}

#history { width: calc(100% / 3 - 8px); float: left; }

/**** トップページに戻るボタン *****/
.btn_totop { background: #99DD2D; 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;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/company/fv_01_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 { font-size: 30px;}
/**** .btnの大まかなスタイル *****/
.btn a { display: block; text-align: center;}

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

/********************************
まとめてつけるスタイル
	-.btn のスタイル[philosophy, message, outline, history]
	-otherのなかの共通のスタイル
********************************/
/* .btn のスタイル[philosophy, message, outline, history] */
#philosophy .btn,
#other .btn { width: 230px; height: 40px; margin: 0 auto;padding: 15px 0 0;}
#philosophy .btn a,
#other .btn a { background-size: 33px auto; font-size: 14px; width: 220px; height: 40px; line-height: 40px;}

/* 	otherのなかの共通のスタイル */
#other .float_wrapper { margin: 0;}
#other .float_wrapper img { display: block; width: 100%; height: auto; float: none;}
#other dl {color: #fff; width: 100%; padding: 25px 0;}
#other dl dt { font-size: 14px; height: auto; padding: 0px;}
#other dl dt h3 {  width: 85%; margin : 0 auto; padding: 0 0 25px;}
#other dl dt h3 span{ display: block; font-size: 30px;}
#other dl dd p { font-size: 15px; height: auto; line-height: 150%; padding: 0 0 10px;}

/*********************************
	idごとのユニークなスタイル
	-icatch
	-philosohy
	-message
	-outline
	-history
*********************************/
#icatch { padding: 50px 0;}
#icatch h2 { font-size: 20px; text-align: left; }

#philosophy { background: #f8f8f8; padding: 50px 0 3%;}
#philosophy img { display: block; width: 100%; height: auto; float: none;}
#philosophy dl { width: auto; height: auto;float: none;padding: 25px 0%;}
#philosophy dl dt {  margin: 0; padding: 0 0 15px; width: 85%; margin: 0 auto;}
#philosophy dl dt h3 {  font-size: 16px; width: 85%; text-align: center; margin: 0 auto; padding: 0 0 10px;}
#philosophy dl dt h3 span { display: block; font-size: 30px;}
#philosophy dl dd p { font-size: 15px; text-align: center; padding: 0 0 15px;}

/**** otherの内部のスタイル(共通のスタイルは上に記述) *****/
#message { width: 100%; margin: 0 0 3%; float: none;}
#message .btn a { padding: 0 0 0 30px; text-align: left; width: 200px;}

#outline { width: 100%; margin: 0 0 3%; float: none;}

#history { width: 100%; float: none; }

/**** トップページに戻るボタン *****/
.btn_totop {  width: 200px; height: 50px; margin: 0 auto 50px;}
.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;}
	
	
	
	
}