@charset "utf-8";
  


/*
=========================================
  Top page
=========================================
*/

.intro img{
	width:100%;
}


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

.intro{
	margin-top:50px;
}

}

/*=======================================
  point
=======================================*/

#point{
	background:url(/joseikin/img/line_b.gif) no-repeat top center #e2f0fa;
	padding: 130px 0 3rem;
	overflow:hidden;
	text-align:center;
}
#point .point_cont{
	overflow:hidden;
}
#point dl{
	float:left;
	width: 24.5%;
	padding:30px 0 15px;
	margin: 0 0.25%;
	background:#fff;
	min-height:380px;
	text-align:left;
}
#point div div img{
	width:90%;
	margin:0 5% 2rem 5%;
	display:block;
}
#point dt {
  border-bottom: solid 3px #e2e2e2;
  position: relative;
  font-size:130%;
  padding:0 0 10px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight:600;
}
#point dt span{
	color:red;
}
#point dt:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #19abe8;
  bottom: -3px;
  width: 50%;
}
#point dd{
	padding:20px 15px;
}

#point a{
	display:inline-block;
	color:#fff;
	background:url(/joseikin/img/yaji_w.png) no-repeat right #19abe8;
	padding:20px 100px;
	margin: 3rem auto;
	clear:both;
	float:none;
}

#point a:hover {
    background:url(/joseikin/img/yaji_w.png) no-repeat right #0a81bb;
}


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

#point dl{
	float:left;
	width: 48%;
	margin: 0 1% 1.5rem;
	min-height:440px;
	padding-bottom:0;
}

}
@media screen and (max-width: 500px) {
#point dt {
  font-size:110%;
}
#point dl{
	min-height:380px;
}

}

/*=======================================
  buttom
=======================================*/

#buttom{
	overflow:hidden;
}
#buttom h3{
	color:#fff;
}
#buttom div{
	text-align:center;
	width:50%;
	padding: 5rem 0 3rem;
}
#buttom div a{
	border:1px solid #fff;
	padding:15px 40px;
	display:inline-block;
	background:url(/joseikin/img/yaji_w.png) no-repeat right;
	border-radius:10px;
	color:#fff;
}
#buttom .target a:hover{
	background:url(/joseikin/img/yaji_b.png) no-repeat right #fff;
	color:#19abe8;
}
#buttom .grants a:hover{
	background:url(/joseikin/img/yaji_y.png) no-repeat right #fff;
	color:#e5b95b;
}

#buttom .target{
	background:url(/joseikin/img/line_w.gif) no-repeat top center #19abe8;
	float:left;

}
#buttom .grants{
	background:url(/joseikin/img/line_w.gif) no-repeat top center #e5b95b;
	float:left;
	
}

/*=======================================
  news
=======================================*/

#news{
	background:#f7f7f7;
	padding:5rem 0 2rem;
	overflow:hidden;
}
#news h3{
	text-align:left;
	border-bottom:1px solid #e2e2e2;
}
#news dl{
	border-bottom:1px solid #e2e2e2;
	padding:1.5rem 2%;
}
#news dt{
	color:#888888;
	width: 15%;
	float:left;
}
#news a:hover dl{
	background:#f0f0f0;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

#news dd{
	margin-left: 17%;
}
#subsidy .button,
#news .button{
	border:1px solid #e2e2e2;
	color:#000 !important;
	padding:15px 50px;
	float:right;
	display:block;
	background:url(/joseikin/img/yaji_g.png) no-repeat right;
	border-radius:10px;
	margin-top:2rem;
}
#subsidy .button:hover,
#news .button:hover{
	background:url(/joseikin/img/yaji_g.png) no-repeat right #f0f0f0;
}


@media screen and (max-width: 960px) {
#news dl{
	padding:1rem 2%;
}
}
@media screen and (max-width: 650px) {
#news dt{
	width: 100%;
	float:none;
}
#news dd{
	width: 100%;
	margin:5px 0 0 0;
	float:none;
}

}


/*=======================================
  subsidy
=======================================*/

#subsidy{
	padding:6rem 0 8rem;
}
#subsidy h3{
	text-align:left;
	border-bottom:1px solid #e2e2e2;
}
#subsidy a{
	display:block;
	border-bottom:1px solid #e2e2e2;
	padding:1.5rem 50px 1.5rem 2%;
	background:url(/joseikin/img/yaji_b.png) no-repeat right;
}
#subsidy a:hover{
	background:url(/joseikin/img/yaji_b.png) no-repeat right #f7f7f7;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}
@media screen and (max-width: 960px) {
#subsidy a{
	padding:1rem 50px 1rem 2%;
}
}
@media screen and (max-width: 600px) {
#subsidy{
	padding:4rem 0;
}
}


/*=======================================
  message
=======================================*/

#message{
	background-position:top right;
	background-image  : url(/joseikin/img/back_blue.jpg);
	background-repeat : no-repeat;
	background-size   : 50% 100%;
	padding-bottom:4rem;
	overflow:hidden;
}
#message .bg_img{
	background-position:top left;
    background-repeat : no-repeat;
    background-image  : url(/joseikin/img/back_sky.jpg);
	background-size   : 57% 100%;
	overflow:hidden;
}
#message .left{
	padding:4rem 0;
	width: 52%;
	float:left;
}
#message .left .cont_inner{
	float:right;
	max-width:750px;
}

#message .left h3{
	text-align:left;
	padding-bottom:1.5rem;
}

#message .right{
	float:right;
	width: 43%;
	padding-top:110px;
	color:#fff;
}
#message .right div{
	float:left;
	width: 47%;
	max-width:320px;
	padding-right: 3%;
}

#message .right p{
	padding:1rem 0;
	line-height:1.5;
}
#message .right p strong{
	font-size:150%;
	line-height:2;
}
@media screen and (max-width: 960px) {
#message{
	padding-bottom:0;
}
#message .bg_img{
	background:none;
}
#message .left{
	padding:4rem 3%;
	width:55%;
	background:#e2f0fa;
}
#message .left p{
	padding-right:0;
}
#message .right{
	width:35%;
	padding:110px 0 0 2%;
}
#message .right div{
	width: 97%;
}
#message .right img{
	width:200px;
}
}
@media screen and (max-width: 760px) {
#message{
	background-size   : cover;
	padding-bottom:0;
	overflow:hidden;
}
#message .left{
	width:90%;
	padding:3rem 5% 2rem;
	float:none;
	overflow:hidden;
}
#message .right{
	width:90%;
	padding:0 5% 2rem 5%;
}
#message .right img{
	float:left;
	width:180px;
	margin-right:20px;
}
#message .right p{
	padding:50px 0 0 15px;
}
#message .right div{
	max-width:760px;
	padding-top:2rem;
}
}
@media screen and (max-width: 400px) {
#message .right img{
	width:120px;
}
#message .right p{
	padding:0 0 0 15px;
}
}




/*=======================================
  access
=======================================*/

#access{
	background:url(/joseikin/img/line_b.gif) no-repeat top center;
	padding: 130px 0  0;
	margin-top:4rem;
}
#access p{
	text-align:center;
	padding:0 5% 3rem 5%;
}

.google-maps{
	border:1px solid #bfbfbf;
	background:#f1f1f1;
}
@media screen and (max-width: 600px) {
iframe{
	height:400px;
}
#access{
	margin-top:0;
}
}