@charset "utf-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
	background: #fff;
	font: 16px/1.6 "メイリオ", "Meiryo", arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}



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

	共通

======================================================================== */
p {
	margin: 0 0 20px 0;
	font-weight: 200;
	font-style: normal;
}

strong{
	font-weight : bold;
}

span{
	font-size : 80%;
}

/*明朝体にしたい時
--------------------------------------------------------------*/
.font-mintyo {
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
}

/*サブメッセージ
--------------------------------------------------------------*/
.submsg{
	font-size : 140%;
	margin : 0;
	text-align:center !important;
}

/* メッセージボックス
--------------------------------------------------------------*/
.msgbox{
	background-color: rgba(255,255,255,0.75); /* ロゴの背景に色づけするときはコメントアウト*/
	width : 80%;
	padding : 30px;
	margin : 0 auto;

	/*角丸*/
  border-radius: 10px;        /* CSS3草案 */ 
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */ 
    -moz-border-radius: 10px;   /* Firefox用 */
}

.msgbox p{
	text-align:left;
}


/*テキストの色
--------------------------------------------------------------*/
/*  藍色 */ 
.textcolor01{
	color : #274a78;
}

/*アンカー
--------------------------------------------------------------*/
a{
	color : #00a0e9;
}
a:hover{
	color : #007fb8;
}

a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
}

/*画像
--------------------------------------------------------------*/
img {
	border: 0;
	max-width:100%;
	height : auto;
}


/* ●のリスト
--------------------------------------------------------------*/
ul.list01{
	margin : 0;
	padding : 0;
}
ul.list01 li{
	text-align:left;
	margin-left : 30px;
	padding-left : 15px;
	padding : 0 20px 10px 0px;
	/*background : url(../images/list_01.png) 0 0 no-repeat;*/
}
ul.list01 li:last-child{
	padding-bottom : 0;
}

/* リストボックスの三分割
--------------------------------------------------------------*/
ul.block3 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size : 0;
}
  
ul.block3 li {
  display: inline-block; /* 横並び */
  vertical-align: top; /* li要素を上端揃えに */
  font-size : 16px;

  width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 3) ;
  width : calc(100% / 3) ;
	
	text-align:left;
}
  
/* IE7 */
*:first-child+html ul.block3 li {
  display: inline; /* display: inline-block;の代わり */
  zoom: 1; /* 状況によって使い分ける */
}

ul.block3 li div.inbox{
	width : 90%;
	margin : 0 auto;
}
 
/* 見出しつきリスト
--------------------------------------------------------------*/
dl.dl01{
	text-align:left;
}
dl.dl01 dt{
	font-weight:bold;
}
dl.dl01 dd{
	padding : 0 0 0 1em;
	margin : 0 0 20px 0;
	border-bottom : 1px dashed #B5B5B5;
}



/*クリアフィックス
--------------------------------------------------------------*/
.clear {
	clear: both;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */


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

	グローバルナビゲーション

======================================================================== */
div#sma_menu {
	display : inline;
	position: fixed;
	top : 14px;
	left : 17px;
	z-index : 100;
}
#slide_menu1 {
	display : inline;
}


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

	見出し

======================================================================== */
h1 {
	display: none;
}
h2 {
	font-size : 240%;
	letter-spacing: 1px;
	font-weight: 530;
	margin-bottom:20px;
}
h2.img {
	font-size : 0;
}
h3{
	font-size : 160%;
	text-align:center;
	margin : 0;
	font-weight : normal;
}

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

	次のコンテンツへいくための矢印

======================================================================== */
.next {
	z-index : 300;
	width : 100%;
	text-align: center;
	margin : 40px auto 0 auto;
	z-index : 350;
	position:relative;
}

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

	レイアウト

======================================================================== */
#header, #intro, #second, #third {
	width: 100%;
	position: relative;
}

div.wrapper {
	margin: 0 auto;
	width: 1000px;
	text-align: center;
	padding : 30px 0;
}

br.kaigyou{
	display : none;
}

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

	1枚目
	
======================================================================== */
#intro {
	color: white;
	margin: 0 auto;
	padding: 0;
	text-align:center;
	
  background: url("images/back01.jpg") center center no-repeat fixed;
  background-color: #fff;
  background-size: cover;
  -webkit-background-size:cover;
	-moz-background-size:cover;
	
	background-attachment : fixed !important;
	
}

/*スライドショーの上に乗せるロゴ
--------------------------------------------------------------*/
#intro div#logo{
	width : 100%;
	height:270px;	/*高さは随時調節して下さい*/
	text-align:center;
	position:absolute;
	top : 0;
	bottom : 0;
	left : 0;
	right : 0;
	margin :auto;
	/*
	margin-top : 200px;
	*/
	z-index:200;
	background-color: rgba(255,255,255,0.75); /* ロゴの背景に色づけするときはコメントアウト*/
	padding : 20px 0;
}

#intro div#logo h2 {
	font-size: 200%;
	letter-spacing: 2px;
}

/*スライダーの定義を上書き
--------------------------------------------------------------*/
div.bx-wrapper {
	margin-bottom : 0 !important;
}
.bx-wrapper .bx-viewport {
	box-shadow: none !important;
	border: 0 !important;
	left: 0px !important;
}
.bx-wrapper .bx-controls-direction a {
	z-index: 250 !important;
}
ul.slider{
	margin : 0;
	padding : 0;
}
.slider img {
	margin: 0 auto;
	display: block;
}
.bx-wrapper {
	margin: 0 auto 30px !important;
}


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

	２枚目

======================================================================== */
#second {
	color: #274a78;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 0 30px 0;
	background : #F7F2E9;
}


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

	３枚目
	
======================================================================== */
#third {
	color: #274a78;
	margin: 0 auto;
	padding: 0 0 30px 0;
	text-align:center;
	
  background: url("images/back03.jpg") center center no-repeat fixed;
  background-color: #80a4b4;
  background-size: cover;
  -webkit-background-size:cover;
	-moz-background-size:cover;
	
	background-attachment : fixed !important;
	
}


#third .bg{
	background: url(images/bg.png) 0% 0% no-repeat fixed;
	height: 600px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 500px;
	z-index: 10;
}


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

	４枚目

======================================================================== */
#fourth {
	color: #274a78;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 0 30px 0;
	background : #dee7c9;
}




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

	５枚目
	
======================================================================== */
#fifth {
	color: #274a78;
	margin: 0 auto;
	padding: 0 0 30px 0;
	text-align:center;

  background:  url("images/back04.png") center center no-repeat fixed;
  background-color: #e4d7ce;
  background-size: cover;
  -webkit-background-size:cover;
	-moz-background-size:cover;
	
	background-attachment : fixed !important;
}



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

	最後

======================================================================== */
#last {
	background: #fff;
	padding-bottom: 70px;
}
#last .wrapper .company .companyleft {
	width: 48%;
	float: left;
	text-align: left;
}
#last .wrapper .company .companyleft dl {
	border-top: 5px solid #274a78;
	border-bottom: 5px solid #274a78;
	padding: 10px 0;
	margin-top: 0;
}
#last .wrapper .company .companyleft dt {
	float: left;
	clear: both;
	width: 130px;
	border-top: 1px dashed #274a78;
	padding: 10px 0 10px 0;
	margin-left: 15px;
}
#last .wrapper .company .companyleft dl dt:first-child {
	border-top: none;
}
#last .wrapper .company .companyleft dd {
	margin-left: 145px;
	border-top: 1px dashed #274a78;
	padding: 10px 0 10px 0;
	margin-right: 15px;
}
#last .wrapper .company .companyleft dl dt:first-child + dd {
	border-top: none;
}
#last .wrapper .company .companyright{
	width: 48%;
	float: right;
	text-align:left;
}
#last .wrapper .company .companyright .googlemap {
	position: relative;
	padding-bottom: 80%; /* これが縦横比 */
	height: 0;
	overflow: hidden;
	border: 1px solid #ccc;
}
#last .wrapper .company .companyright .googlemap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

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

	フッター
	
======================================================================== */
#footer {
	background: #274a78;
	color: #fff;
	text-align: center;
	height: 90px;
	line-height: 90px;
	font-size: 85%;
}

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

	ページの先頭へ戻る
	
======================================================================== */
#page-top {
	position: fixed;
	bottom: 0px;
	right: 20px;
	font-size: 77%;
	z-index: 400;
}

#page-top a {
	text-decoration: none;
	width: 60px;
	padding: 0;
	text-align: center;
	display: block;
}

#page-top a:hover {
	text-decoration: none;
}

#page-top img#pc_mode{
	display : inline;
}
#page-top img#sma_mode{
	display : none;
}


/******************************************************************
*******************************************************************

レスポンシブ

*******************************************************************
******************************************************************/
/* モニター幅960px以上 */
@media only screen and (min-width:960px) {

}

/* モニター幅960px以下 */
@media only screen and (max-width:960px) {
	
	/* =======================================================================
	
		レイアウト
	
	======================================================================== */
	div.wrapper {
		width: 96%;
		margin : 0 auto;
	}
	
	
	/* =======================================================================
	
		２枚目
	
	======================================================================== */
	#second .wrapper .about li {
		display: inline-block;
		margin : 20px 0 0 0;
		padding : 0 !important;
		width : 48%;
	}
	#second .wrapper .about li img{
		max-width : 98%;
		margin : 0 auto;
		height : auto;
	}

	

}

/* iPad 縦 */
@media only screen and (max-width:768px) {
	/* =======================================================================
	
		一枚目、三枚目、五枚目
	
	======================================================================== */
	#intro {
		background-attachment: scroll !important;
		height : 700px;
	}
	div#mainslider{
		display : none;
	}
	/*スライドショーの上に乗せるロゴ
	--------------------------------------------------------------*/
	#intro div#logo{
		margin-top : 100px;
	}
	/* =======================================================================
	
		三枚目
	
	======================================================================== */
	#third {
		background-attachment: scroll !important;
	}
	/* =======================================================================
	
		五枚目
	
	======================================================================== */
	#fifth {
		background-attachment: scroll !important;
	}




}

/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px) {

	/* =======================================================================
	
		ページの先頭へ戻る
	
	======================================================================== */
	#page-top a {
		width: 50px;
	}
	#page-top img#pc_mode{
		display : none;
	}
	#page-top img#sma_mode{
		display : inline;
	}


	/* =======================================================================
	
		レイアウト
	
	======================================================================== */
	br.kaigyou{
		display : inline;
	}

	/* リストボックスの三分割
	--------------------------------------------------------------*/
	ul.block3 li {	
		width : 100% ; 
		text-align:left;
		margin-bottom:40px;
	}
	ul.block3 li div.inbox{
		width : 80%;
	}
	ul.block3 li div.inbox p{
		margin-bottom : 0;
	}

	/* =======================================================================
	
		１枚目
	
	======================================================================== */
	#intro {
		height: 600px;
		margin: 0 auto;
		padding: 0;
	}
	
	/* =======================================================================
	
		1枚目
		
	======================================================================== */	
	/*スライドショーの上に乗せるロゴ
	--------------------------------------------------------------*/
	#intro div#logo{
		margin-top : 40px;
	}



	
	/* =======================================================================
	
		２枚目
	
	======================================================================== */
	#second .wrapper .about {
		margin: 35px auto 0 auto;
	}
	#second .wrapper .about li {
		display: inline-block;
		margin : 20px 0 0 0;
		padding : 0 !important;
		width : 100%;
	}
	#second .wrapper .about li img{
		max-width : 98%;
		margin : 0 auto;
		height : auto;
	}

	/* =======================================================================
	
		３枚目
		
	======================================================================== */
	#third .bg{
		width: 100%;
	}
	
	/* =======================================================================
	
		最後
		
	======================================================================== */

	#last {
		background: #fff;
		padding-top: 35px;
		padding-bottom: 10px;
	}

	#last .wrapper .company .companyleft,
	#last .wrapper .company .companyright{
		width: 100%;
		float: none;
	}
	
}

/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px) {

	/* =======================================================================
	
		共通
	
	======================================================================== */
	/* メッセージボックス
	--------------------------------------------------------------*/
	.msgbox{
		padding : 10px;
		width:90%;
	}



	/* =======================================================================
	
		見出し
	
	======================================================================== */
	h2 {
		font-size : 200%;
	}
	h3{
		font-size : 140%;
		text-align:center;
		margin : 0;
		font-weight : normal;
	}

	/* =======================================================================
	
		1枚目
		
	======================================================================== */	
	/*スライドショーの上に乗せるロゴ
	--------------------------------------------------------------*/
	#intro div#logo{
		height:200px;	
		margin-top : 80px;
	}



	/* =======================================================================
	
		最後
		
	======================================================================== */
	#last .wrapper .company .companyleft dl {
		padding: 0px 0;
	}
	#last .wrapper .company .companyleft dt {
		float: none;
		clear: both;
		width: 100%;
		border-top: 1px dashed #274a78;
		padding: 10px 0 0px 0;
		margin-left: 15px;
		font-weight : bold;
	}
	#last .wrapper .company .companyleft dd {
		margin-left: 15px;
		border-top: 0px dashed #274a78;
		padding: 0px 0 10px 0;
		margin-right: 15px;
	}



}