/* CSS Document */

/*--------------------------------------------------------------------
このファイルには、トップページ固有のスタイルを定義します。

1=大枠 and 共通
2=h1Area
3=h2Area
4=h3Area
5=h4Area
--------------------------------------------------------------------*/


/*1=大枠 and 共通
--------------------------------------------------------------------*/
body#top{
	border: none;
}
#toppageMain{
	width: 1000px;
	margin: 0 auto;
	padding: 0;
}
#toppageMain .section{
	margin-bottom:20px;
}

/*2=h1Area
--------------------------------------------------------------------*/
#toppageMain #h1Area{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-image: none;
	width: 1000px;
	height: 97px;
	margin: 0 0 20px;
	border-left: 8px solid #ff0000;
  position: relative;
}

#toppageMain #h1Area h1{
	font-size: 30px;
	margin: 0 0 0 60px;
	line-height: 97px;
}
#toppageMain #h1Area span.h1_icon {
		position: absolute;
		top: 18px;
		left: 0;
		margin: 0 5px;
		width: 60px;
		height: 60px;
		background: url(../img/top/h1_img_sp.png) no-repeat 0;
		background-size: contain;
	}

#toppageMain #h1Area h1 .h1Img{
	padding: 0;
	margin: 17px 0 0 33px;
}
#toppageMain #h1Area ul{
	margin: 5px 8px;
}
#toppageMain #h1Area ul li{
	margin: 0 3px;
}

/*3=h2Area
--------------------------------------------------------------------*/
#toppageMain h2{
	margin: 0;
	padding: 0;
	background: none;
	font-size: 18px;
}
#toppageMain #h2Area {
	background: url(../img/top/h2_mainBg.gif) no-repeat bottom;
	width: 1000px;
	height: 210px;
}
#toppageMain #h2Area ul {
	width: 940px;
	margin: 0 auto;
	padding: 17px 0;
	text-align: center;
}
#toppageMain #h2Area ul li,
#toppageMain #h2Area ul.ver2 li {
	width: 300px;
	height: 158px;
	margin-left:20px;
	float:left;
}
#toppageMain #h2Area ul li.first,
#toppageMain #h2Area ul.ver2 li.first {
	margin-left:0;
}
/* 画像2つ並びのセンター合わせの場合*/
#toppageMain #h2Area ul.ver2 {
	width: 620px;
	margin: 0 auto;
	padding: 17px 0;
	text-align: center;
}

/*4=h3Area
--------------------------------------------------------------------*/
#toppageMain h3{
	margin: 0;
	padding: 0;
	background: none;
	font-size: 18px;
}
#toppageMain #h3Area {
	background: url(../img/top/h3_mainBg.gif) no-repeat bottom;
	width: 1000px;
	height: 210px;
}
#toppageMain #h3Area ul {
	width:940px;
	margin: 0 auto;
	padding: 21px 0;
}
#toppageMain #h3Area ul li,
#toppageMain #h3Area ul.ver2 li{
	width: 175px;
	height: 158px;
	margin-left:16px;
	float:left;
}
#toppageMain #h3Area ul li.first,
#toppageMain #h3Area ul.ver2 li.first{
	margin-left:0;
}
/* 画像4つ並びのセンター合わせの場合*/
#toppageMain #h3Area ul.ver2{
	width:750px;
	margin: 0 auto;
	padding: 21px 0;
}

/*5=h4Area
--------------------------------------------------------------------*/
#toppageMain h4{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 1000px;
	margin: 0;
	padding: 0;
	background: #f8f8f8;
	border: 1px solid #cececf;
	padding: 5px;
	font-size: 18px;
}

#toppageMain h4 span {
	padding: 1px 6px;
	border-left: 6px solid #e61700;
}

#toppageMain #column2{
	width:1000px;
	height:auto;
}
#toppageMain #column2 .leftContents{
	float:left;
	width:673px;
}
#toppageMain #h4Area01 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: #FFF;
	width: 1000px;
	padding: 1px;
	border: 1px solid #cecece;
	border-top: none;
}
#toppageMain #h4Area01 ul {
	width:940px;
	margin:0 auto;
	padding:32px 0 31px;
}
#toppageMain #h4Area01 ul li{
	width: 222px;
	height: auto;
	margin-left:17px;
	float:left;
}
#toppageMain #h4Area01 ul li img{
	width: 100%;
	height: auto;
}
#toppageMain #h4Area01 ul li.first{
	margin-left:0;
}
#toppageMain #column2 .rightContents{
	float:right;
	width:295px;
}
#toppageMain #h4Area02{
	background:url(../img/top/h4_mainBg.gif) no-repeat bottom;
	width:295px;
	height:114px;
}
#toppageMain #h4Area02 ul{
	width:249px;
	margin:0 auto;
	padding-top:14px;
}

/* レスポンシブ対応
--------------------------------------------------------------------*/
@media (max-width: 768px){
  

/*1=大枠 and 共通
--------------------------------------------------------------------*/
	body#top{
		width: 100%;
	}
	#toppageMain{
		width: 100%;
	}
	#toppageMain .section{
		width: 100%;
	}

/*2=h1Area
--------------------------------------------------------------------*/
	#toppageMain #h1Area{
		position: relative;
		background-image: none;
		width: 100%;
		height: 44px;
	}
	
	#toppageMain #h1Area h1{
	font-size: 20px;
	line-height: 44px;
  margin: 0 0 0 50px;
}
	
 
  #toppageMain #h1Area span.h1_icon {
		position: absolute;
    top: 8px;
		left: 8px;
		margin: 0 5px;
		width: 30px;
		height: 30px;
		background: url(../img/top/h1_img_sp.png) no-repeat 0;
		background-size: contain;
	}

  
	#toppageMain #h1Area span#localMenu {
		position: absolute;
		top: 2px;
		right: 0;
		margin: 0 5px;
		width: 44px;
		height: 44px;
		background: url(../img/sp_navi_menuIcon_off.png) no-repeat 0;
		background-size: contain;
	}
	#toppageMain #h1Area span#localMenu.on {
		position: absolute;
		top: 2px;
		right: 0;
		margin: 0 5px;
		width: 44px;
		height: 44px;
		background: url(../img/sp_navi_menuIcon_on.png) no-repeat 0;
		background-size: contain;
	}

  	#leftContent {
		display: none;
		width: 100vw;
		box-sizing: border-box;
		position: absolute;
		top: calc(100% + 3px);
		left: -8px;
		background-color: #f1f6fe;
		box-shadow:  0px 5px 3px 1px rgba(0,0,0,0.2);
	}
  
  #leftContent ul {
    margin: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.1)
  }
  #leftContent ul li {
    
  }
  
   #leftContent ul li a {
    position: relative;
    display: inline-block;
    width: 100%;
    color: #222;
    font-size: 16px;
    text-decoration: none;
  }
  
  #leftContent ul li a::after {
    position: absolute;
    content: '';
    display: inline-block;
    height: 1px;
    width: calc(100% - 20px);
    bottom: 0;
    left: 10px;
    background-color: #dfe8f8;
  }
  #leftContent ul li:last-child a::after{
    display: none;
  }
  
  #leftContent ul li a img {
    padding: 10px;
    vertical-align: middle;
  }

/*3=h2Area
--------------------------------------------------------------------*/
	#toppageMain h2 {
		width: 100%;
		font-size: 16px;
	}
	#toppageMain h2 span {
		padding: 1px 6px;
		border-left: 6px solid #e61700;
	}

	#toppageMain h2 img{
		display: none;
	}

	#toppageMain #h2Area {
		background-image: none;
		width: 100%;
		height: auto;
	}

	#toppageMain #h2Area ul{
		width: 100%;
    max-width: 650px;
    margin: auto;
	}
	
	#toppageMain #h2Area ul li {
		height: auto;
		width: 100%;
		margin: 0 0 10px 0;
	}
	
	

/*4=h3Area
--------------------------------------------------------------------*/
  #toppageMain h3 {
	width: 100%;
	font-size: 16px;
	}
	
	#toppageMain h3 span {
		padding: 1px 6px;
		border-left: 6px solid #e61700;
	}

	#toppageMain h3 img{
		display: none;
	}

	#toppageMain #h3Area {
		background-image: none;
		width: 100%;
		height: auto;
	}

	#toppageMain #h3Area ul{
		width: 100%;
    max-width: 650px;
    margin: auto;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
    justify-content: space-between;
	}

	#toppageMain #h3Area ul li {
		text-align: center;
		height: auto;
		width: 32%;
/*		min-width: 100px;*/
		margin: 0 0 10px 0;
	}
	
  
  
/*5=h4Area
--------------------------------------------------------------------*/
	#toppageMain #column2 {
		width: 100%;
	}
	
	#toppageMain h4 {
		width: 100%;
		background: none;
		border: none;
		font-size: 16px;
	}

	#toppageMain h4 img{
		display: none;
	}

	#toppageMain #h4Area01 {
		width: 100%;
		height: auto;
		background: none;
		border: none;
		
	}

	#toppageMain #h4Area01 ul{
    max-width: 650px;
    margin: auto;
		width: 100%;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	#toppageMain #h4Area01 ul li {
		text-align: center;
		height: auto;
		width: 48%;
/*		min-width: 150px;*/
		margin: 0 0 10px 0;
    max-width: 250px;
	}
  #toppageMain #h4Area01 ul li img {
    width: 100%;
    
  }
  
 /*6=ページトップアイコンメニューSp
--------------------------------------------------------------------*/
  .pagetopMenuSp ul {
    max-width: 650px;
    margin: auto;
		width: 100%;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;
  }
  .pagetopMenuSp ul li {
		text-align: center;
		height: auto;
		width: 48%;
/*		min-width: 150px;*/
    max-width: 250px;
    margin: 0 0 10px 0;
  }
}