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

* {
	margin:0px;
	padding:0px;
}

dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,p,blockquote,fieldset,div{margin: 0;padding: 0;}
h1,h2,h3,h4,h5,h6{font-weight: normal;}
ul li, ol li{list-style: none;}
table{margin: 0;padding: 0;font-size: 100%;}
table,pre,code,select,textarea,kbd,var,ins,del,samp{font-size: 100%;}
address,cite,dfn,em,strong,var,th,ins,del,samp{font-weight: normal;font-style: normal;}
img{border:none;}
a img{border:none;}
a, a:link { color:#f59f3b; text-decoration: none;}
a, a:visited{ color:#7091d5; text-decoration: none;}


body{
	overflow:hidden;
	background-color:#f1f2f6;
}



.pc{
	display:block !important;
}
.tbl{
	display:none !important;
}
.smp{
	display:none !important;
}


@media screen and ( max-width:768px){
/* 画面の横幅が640px以下(スマホ) @media(max-width: 768px)*/
	.pc{
		display:none !important;
	}
	.tbl{
		display:block !important;
	}
	.smp{
		display:none !important;
	}
}

@media screen and ( max-width:640px){
/* 画面の横幅が640px以下(スマホ) @media(max-width: 768px)*/
	.pc{
		display:none !important;
	}
	.tbl{
		display:none !important;
	}
	.smp{
		display:block!important;
	}
}



#wrap{
	width:1200px;
	height:auto;
	margin:0 auto;
}

/* ///////////////トップ部分/////////////// */
#photo{
	width:1200px;
	height:350px;
	margin:40px auto 0;
}

/* ///////////////メイン部分/////////////// */
#TOPcontaints{
	width:1120px;
	height:auto;
	margin:30px auto 100px;
}

.clearfix:after {
  content: ".";
  clear: both;
  display: block;
}

#main{
	width:1120px;
	height:270px;
	margin:0 auto 20px;
}

.box270{
	width:270px;
	height:270px;
	float:left;
	position:relative;
}

.box270 span.overlay{
    width:100%;
    height:100%;
    position:absolute;
    background:url(../img/top/main_hover270.png) no-repeat;
    top:0;
    left:0;
	opacity:0;
	filter:alpha(opacity=0);

}

.box270 span.overlay:hover {
	position:absolute;
	opacity:1;
    filter: alpha(opacity=100);
}


.box540{
	width:540px;
	height:270px;
	float:left;
	position:relative;
}

.box540 span.overlay{
    width:100%;
    height:100%;
    position:absolute;
    background:url(../img/top/main_hover540.png) no-repeat;
    top:0;
    left:0;
	opacity:0;
	filter:alpha(opacity=0);

}

.box540 span.overlay:hover {
	position:absolute;
	opacity:1;
    filter: alpha(opacity=100);
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}


@media screen and ( max-width:768px){
/* タブレット用のスタイル記述 */
#wrap{
	width:100%;
	height:auto;
	margin:0 auto;
}

/* ///////////////トップ部分/////////////// */
#photo{
	width:98%;
	height:auto;
	margin:30px auto 0;
}

/* ///////////////メイン部分/////////////// */
#TOPcontaints{
	width:100%;
	height:auto;
	margin:20px auto 50px;
}

.clearfix:after {
  content: ".";
  clear: both;
  display: block;
}

#main{
	width:100%;
	height:auto;
	margin:0 auto 13px;
}

.box270{
	width:24%;
	height:auto;
	float:left;
	position:relative;
}


.box540{
	width:48%;
	height:auto;
	float:left;
	position:relative;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

}



@media screen and ( max-width:640px) {
/* スマートフォン用のスタイル記述 */
#wrap{
	width:100%;
	height:auto;
	margin:0 auto;
}

/* ///////////////トップ部分/////////////// */
#photo{
	width:100%;
	height:auto;
	margin:20px auto 0;
}

/* ///////////////メイン部分/////////////// */
#TOPcontaints{
	width:100%;
	height:auto;
	margin:15px auto 50px;
}

.clearfix:after {
  content: ".";
  clear: both;
  display: block;
}

#main{
	width:100%;
	height:auto;
	margin:0 auto 1.3%;
}

.box270{
	width:48%;
	height:auto;
	margin-left:1.3%;
	float:left;
	position:relative;
}


.box540{
	width:97%;
	height:auto;
	margin:0 auto;
	float:none;
	position:relative;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
	
}