@charset "utf-8";

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

CSS information

 file name	:index.css
 style info :トップページ用CSS

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

html{
	font-size: 100%;
}

body {
    box-sizing: border-box;
    font-size: 100%;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    width: 100%;
}

.inner{
	max-width: 1140px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 3;
}


/*------------------------------------------------------------
	ヘッダー
----------------------------------------------------------- */
header {
	position:absolute;
	z-index:99;
}
#copy {
	display:table;
	width:98%;
	margin:0 auto;
	table-layout:fixed;
}
#copy h2 {
	display:table-cell;
	width:50%;
	text-align:center;
	vertical-align:middle;
}
#copy h2 img {
	width:58.1%;
}
#copy p {
	display:table-cell;
	width:49%;
	padding-right:1%;
	text-align:right;
	vertical-align:top;
}
#copy p img {
	width:65%;
}

/*------------------------------------------------------------
	スライダー
----------------------------------------------------------- */
#visual {
	width:100%;
	position:relative;
	z-index:0;
	padding-bottom: 2%;
}

/*------------------------------------------------------------
	バナー　
----------------------------------------------------------- */

.bnr_list{
	width: 100%;
	padding-top: 2%;
}

.bnr_list dl {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
  display: block;
  float: left;
  margin: 1%;
  overflow: hidden;
  position: relative;
  width: 23%;
	box-shadow:6px 7px 14px -10px #000000;
}

.bnr_list a{
	display: block;
	overflow: hidden;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
	width: 100%;
}

.bnr_list a img{
	transition: all ease 0.3s;
	border-radius: 20px;
}

.bnr_list a img:hover{
	opacity: 0.7;
	height: auto;
/*-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);*/
}




.bnr_list dt{
	width: 100%;
	overflow: hidden;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.bnr_list dd{
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: rgba(0,0,0,0.3);
	height: 30%;
	color: #dcdcdc;
	font-family: "Hiragino Mincho Pro" , "ヒラギノ明朝 Pro W3" ,"Hiragino Kaku Gothic Pro" ,  serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 112.5%;
-webkit-border-radius: 0px 0px 20px 20px / 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px / 0px 0px 20px 20px;
border-radius: 0px 0px 20px 20px / 0px 0px 20px 20px;
}


.bnr_list dl dd:after{
	font-family: "FontAwesome";
	content: "";
	position: absolute;
	right: 6%;
	bottom: 50%;
	margin-bottom: -16px;
	font-size: 100%;
	color: #FFFFFF;
}

@media only screen and (min-width: 641px) and (max-width: 768px) {
	.bnr_list dd{
			font-size: 100%;
	}
}

.bnr_list dd > span {
    left: 20%;
    margin-top: -6.2%;
    position: absolute;
    top: 50%;
}


@media only screen and (min-width: 641px){

.icon_inn:before{
	background: url(/img/bnr_icon_inn.png) no-repeat;
	content: "";
	width: 24px;
	height: 22px;
	position: absolute;
	left: 6%;
	top: 50%;
	margin-top: -4%;
}

.icon_access:before{
	background: url(/img/bnr_icon_access.png) no-repeat;
	content: "";
	width: 31px;
	height: 27px;
	position: absolute;
	left: 6%;
	top: 50%;
	margin-top: -4%;
}
}



@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {

				 .icon_inn:before{
				 	width: 20px;
					height: 19px;
					background-size: cover;
				 }

				 .icon_access:before{
					width: 21px;
					height: 20px;
					background-size: cover;
				 }

}




.fa-desktop,
.fa-list-alt{
	position: absolute;
	left: 6%;
	top: 50%;
	margin-top: -3%;
	width: 2em;
}




@media screen and (max-width: 640px) {

	#visual{
		padding: 0;
	}

	.bnr_list{
		padding-top: 0;
	}

	.bnr_list dl {
	  border-radius: 0px;
	  display: table;
	  float: none;
	  margin: 0;
	  overflow: hidden;
	  position: relative;
	  width: 100%;
		box-shadow:none;
	}
	.bnr_list a{
		display: block;
		border-radius: 0;
	}

	.bnr_list a img{
		transition: all ease 0.3s;
		border-radius: 0;
	}


	.bnr_list a img:hover{
		opacity: 0.7;
		height: auto;
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	}


	.bnr_list dl{
		position: relative;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ece8e8+0,d9d9d9+100 */
		background: #ece8e8; /* Old browsers */
		background: -moz-linear-gradient(top,  #ece8e8 0%, #d9d9d9 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #ece8e8 0%,#d9d9d9 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #ece8e8 0%,#d9d9d9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ece8e8', endColorstr='#d9d9d9',GradientType=0 ); /* IE6-9 */
		box-shadow:none;
	}

	.bnr_list dl:last-child{
		background: #f94b4b; /* Old browsers */
		background: -moz-linear-gradient(top,  #f94b4b 0%, #d03f3f 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #f94b4b 0%,#d03f3f 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #f94b4b 0%,#d03f3f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f94b4b', endColorstr='#d03f3f',GradientType=0 ); /* IE6-9 */
	}



	.bnr_list dl dd:after{
		font-family: "FontAwesome";
		content: "";
		position: absolute;
		right: 6%;
		bottom: 50%;
		margin-bottom: -16px;
		/*font-size: 16px;*/
		color: #FFFFFF;
		font-size: 100%;
		color: #2e2f31;
	}

	.bnr_list dt{
		display: table-cell;
		width: 24.6%;
		vertical-align: middle;
		overflow: hidden;
		border-radius: 0;
	}

	.bnr_list dd{
		display: table-cell;
		position:relative;
		bottom: auto;
		width: 60%;
		vertical-align: middle;
		height: 30%;
		color: #2e2f31;
		font-family: "Hiragino Mincho Pro" , "ヒラギノ明朝 Pro W3" ,"Hiragino Kaku Gothic Pro" ,  serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-size: 133.3%;
		background: none;
	}




	.bnr_list dd > span {
		padding-left: 20%;
	    left: 0;
	    margin-top: 0;
			position:inherit;
	    top: 0;
	}

	.bnr_list dd .spvisible{
		display: inline-block;
		line-height: 1.2;
	}

	.bnr_list dd .spvisible span{
		display: inline-block;
		font-size: 75%;
	}


	.icon_inn:before{
		background: url(/img/bnr_icon_inn_sp.png) no-repeat;
		background-size:contain;
		content: "";
		display: inline-block;
		width: 20px;
		height: 22px;
		position:absolute;;
		top: 50%;
		margin-top: -6px;
		left: 3%;
		margin: -7px 5px 0;

	}

	.icon_access:before{
		background: url(/img/bnr_icon_access_sp.png) no-repeat;
		background-size:contain;
		content: "";
		display: inline-block;
		width: 22px;
		height: 20px;
		position:absolute;;
		top: 50%;
		margin-top: -6px;
		left: 3%;
		margin: -7px 5px 0;
		color: #f6f6f6;
	}

	.fa-desktop,
	.fa-list-alt{
		position:absolute;
		left: 32%;
		top: 50%;
		margin: -7px 5px 0;
		width: 2em;
		color: #808080;
		left: 3%;
	}

	.fa-list-alt{
		color: #dcdcdc;
	}

	.bnr_list dl:last-child:before{
				color: #f6f6f6;
	}

	.bnr_list dt.sanchika img{
		opacity: 0;
	}

	.bnr_list dt.sanchika{
		background: url(/img/bnr_04_sp.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		width: 24.6%;
		height: auto;
	}

	.bnr_list dd.sanchika{
		color: #f6f6f6;
	}

}

/*------------------------------------------------------------
	コンテンツ
----------------------------------------------------------- */


#main{
	overflow: hidden;
	background: url(/img/bg_news.png);
	position: relative;
	padding: 3% 0;
}

#main:before {
    background: url("/img/bg_news_kouyou.png") repeat-x scroll 0 0 / cover ;
    bottom: 0px;
    content: "";
    display: block;
    height: 70%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

h2.title{
	text-align: center;
	width: 100%;
	height: 100px;
	line-height: 100px;
	font-size: 187.5%;
	position: relative;
	margin-bottom: 2%;
}

h2.title span{
	position: absolute;
	bottom: 0px;
	text-align: center;
	font-size: 60%;
	color: #d03f3f;
	width: 300px;
	left: 50%;
	margin-left: -150px;
	line-height: 30px;
}

.colmn3box{
	padding: 0 1.929%;
	margin-bottom: 5%;
	margin-right: -3.858%;
}

.colmn3box .news_box{
	width: 30.7%;
	padding: 0 1.93% 0.63%;
	margin: 0 1.929% 0 0;
	float: left;
	background: #FFFFFF;
	border: solid 1px #e4e4e3;
	position: relative;
	/*height: 380px;*/
	overflow: hidden;
}

.colmn3box .news_box a{
	text-decoration: underline;
	transition: all ease 0.3s;
}

.colmn3box .news_box a:hover{
	text-decoration: none;
	opacity: 0.7;
}

.news_box > p{
	line-height: 2;
	padding-bottom: 3%;
}

.news_box dd{
	padding: 4% 0;
	/*font-size: 16px;*/
}

.category{
	display: inline-block;
	background: #F03F3F;
	padding: 1% 2%;
	margin-right: 3%;
	color: #FFFFFF;
	min-width: 50%;
	text-align: center;
}

.date{
	/*font-size: 16px;*/
}



@media screen and (max-width: 640px) {

	.colmn3box{
		padding: 0;
		margin-bottom: 5%;
		margin-right: 0%;
	}

	.colmn3box .news_box{
		width: 100%;
		padding: 0 0 3%;
		margin: 0 0 3%;
		float: none;
		background: #FFFFFF;
		border: solid 1px #e4e4e3;
		border-right: none;
		border-left: none;
		height: auto;
	}

	.colmn3box .news_box a{
		text-decoration: underline;
		transition: all ease 0.3s;
	}

	.colmn3box .news_box a:hover{
		text-decoration: none;
		opacity: 0.7;
	}

	.colmn3box .news_box dl{
		display: table;
	}

	.colmn3box .news_box dt{
		display: table-cell;
		width: 43%;
	}

	.colmn3box .news_box dd{
		display: table-cell;
		vertical-align: top;
		padding: 2% 4%;
		width: 57%;
		font-size: 116.66%;
	}

	.category{
		padding: 1% 5%;
	}

	h2.title{
		font-size: 150%;
	}

}





/*------------------------------------------------------------

----------------------------------------------------------- */



.new_btn a{
	font-family: "Hiragino Mincho Pro" , "ヒラギノ明朝 Pro W3" ,"Hiragino Kaku Gothic Pro" ,  serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*font-size: 16px;*/
	background: #191919;
	display: block;
	height: 42px;
	line-height: 42px;
	margin: 0 auto 3%;
	text-align: center;
	color: #FFFFFF;
	position: relative;
	transition: all ease 0.3s;
}
.new_btn a.white{
	background: #dfdfdf;
	color: #191919;
	margin: 0 auto 1.5em;
}

.new_btn a:hover{
	opacity: 0.7;
}

.new_btn a:after{
	font-family: "FontAwesome";
	content: "";
	color: #FFFFFF;
	display: block;
	position: absolute;
	right: 5%;
	top: 50%;
	/*font-size: 16px;*/
	margin-top: -20px;
}
.new_btn a.white:after{
	color: #191919;
}

.new_btn a.size1{
	width: 19.29%;
}
.new_btn a.size2{
	width: 50%;
}
.new_btn a.size3{
	width: 80%;
}
.new_btn a.size4{
	width: 30%;
}


@media screen and (max-width: 1025px) {

	.new_btn a{
		font-size: 120%;
	}
	.new_btn a.size1{
		width: 80%;
	}
	.new_btn a.size2{
		width: 80%;
	}
	.new_btn a.size3{
		width: 100%;
	}
	.new_btn a.size4{
		width: 80%;
	}
}


.leftbox{
	background: url("/img/bg_left.png") repeat #FFFFFC;
}
.rightbox{
	background: url("/img/bg_right.png") repeat #FBF7F3;
}

.col2{
	display: table-cell;
	width: 50%;
	vertical-align: top;
}

#footer{
	position: relative;
	display: table;
	width: 100%;
}

#footer:after{
	content: "";
	display: block;
	clear: both;
	height: 0;
}
#footer:before {
    background: #FFFFFF;
    content: "";
    height: 1px;
    position: absolute;
    top: -2px;
		left: 0;
    width: 100%;
		z-index: 100;

}



#footer .warp{
	max-width: 570px;
	width: 100%;
	padding: 4% 1.929%;
}

#footer .warp .img{
	width: 42.5%;
}

#footer .title{
	font-size: 175%;
	padding-bottom: 4%;
}




.fll{
	float: left;
}

.flr{
	float: right
}

.text > p {
    padding: 0 20px 20px 46%;
    max-width: 570px;
		width: 100%;
		color: #535353;
		/*font-size: 16px;*/
		text-align: justify;
		text-justify: inter-ideograph; /* IE  */
}




@media screen and (min-width: 1025px) {
/*ここにpc用スタイルを記述*/

.spvisible{
	display: none;
}

}

/* tablet  */
@media only screen and (min-width: 641px) and (max-width: 1024px) {
/*ここにtablet用スタイルを記述*/
	html{
		font-size: 81.25%;
	}
	#footer{
		display: none;
	}
	.spvisible{
		display: none;
	}

	.colmn3box .news_box{
		height: 300px;
	}

	@media screen and (orientation:landscape){
		#footer{
			display: none;
		}

	}


}

/* smartPhone */
@media screen and (max-width: 640px) {
	html{
		font-size: 75%;
	}
	#footer{
		display: none;
	}

	.spnone{
		display: none;
	}s

	.spvisible{
		display: block;
	}
}