@charset "UTF-8";
/* =====================================
	index
===================================== */

.visual{
	position:relative;
	width:100%;
	height:764px;
	z-index:50;
	overflow:hidden;
}

.visual h1{
	position:absolute;
	top:50%;
	left:50%;
	margin:-40px 0 0 -496px;
}

.video-wrap{
	position:absolute;
	top:50%;
	left:50%;
	transform: translateY(-50%) translateX(-50%);
}

.news{
	position:relative;
	width:100%;
	max-width:1220px;
	margin:-30px auto 0;
	background:#fff;
	padding:40px 50px;
	z-index:100;
}

.news .ttlArea{
	float:right;
}

.news .ttlArea h3{
	margin-bottom:14px;
	padding-top:89px;
}

.news table{
	float:left;
	width:80%;
}

.news table th, .news table td{
	padding:0 0 14px;
}

.news table th{
	width:322px;
	vertical-align:top;
}

.news table td a{
	color:#595959;
}

.news table td a:hover{
	color:#097429;
}

.news .date{
	font-weight:bold;
	width:194px;
	display:inline-block;
}

.news .cat{
	font-size:11px;
	font-weight:normal;
	height:18px;
	width:92px;
	text-align:center;
	margin:0 20px 0 0;
	display:inline-block;
	line-height:18px;
	padding-bottom:18px;
}

.news .ueda{
	border:1px solid #004d9a;
	color:#004d9a;
}

.news .ubm{
	border:1px solid #007226;
	color:#007226;
}

.news .upl{
	border:1px solid #d01b0b;
	color:#d01b0b;
}

.news .uml{
	border:1px solid #ec6000;
	color:#ec6000;
}

.news .common{
	border:1px solid #737373;
	color:#737373;
}

.about{
    width: 100%;
    margin: 65px auto 10px;
    padding: 80px 0 95px;
    background: #f9f9f9;
}

.about h3 img{
    margin: 0 auto 45px;
}

.about a{
    display: table;
    margin: 0 auto;
}

.about a:hover img{
    opacity:0.7;
}

.nav01{
	width:100%;
	max-width:1470px;
	margin:60px auto 0;
}

.nav01 li{
	position:relative;
	width:calc(50% - 2px);
	float:left;
	margin-bottom:2px;
}

.nav01 li:nth-child(1), .nav01 li:nth-child(3){
	margin-right:2px;
}

.nav01 li h4{
	position:absolute;
	top:50%;
	left:50%;
}

.nav01 li:nth-child(1) h4{
	margin:-38px 0 0 -67px;
	width:134px;
}

.nav01 li:nth-child(2) h4{
	margin:-38px 0 0 -67px;
	width:134px;
}

/*.nav01 li:nth-child(3) h4{
	margin:-39px 0 0 -116px;
	width:232px;
}*/

.nav01 li:nth-child(3) h4{
	margin:-39px 0 0 -112px;
	width:224px;
}

.nav01 li:nth-child(4) h4{
	margin:-39px 0 0 -151px;
	width:302px;
}

.nav01 li h4 img{
	width:100%;
}

.nav01 li::after{
	position:absolute;
	background:url(../img/common/arrow02.png);
	width:32px;
	height:33px;
	bottom:19px;
	right:19px;
	content:"";
}

.nav01 li a{
	display:block;
	overflow:hidden;
}

.nav01 li a > img{
	width:100%;
	transition:all 250ms ease-out;
}

.nav01 li a:hover > img{
	transform:scale(1.1);
}

.nav02{
	width:100%;
    max-width: 1220px;
	margin:154px auto 200px;
}

.nav02 h3 img{
	margin:0 auto 42px;
}

.nav02 a{
	width:100%;
	position:relative;
	background:#f6f6f6;
	display:block;
	overflow:hidden;
}

.nav02 a > img{
	transition:all 250ms ease-out;
	margin:0 auto;
    width: 100%;
}

.nav02 a:hover > img{
	transform:scale(1.1);
}

.nav02 p{
	font-size:40px;
    font-weight:500;
    text-align:center;
    line-height:1;
    margin-top:43px;
}

.nav02 p small{
	font-size:42.5%;
    display: block;
    margin-top:16px;
}

.heartClip{
	width:100%;
	max-width:1220px;
	padding:100px 0 110px;
	margin:0 auto;
	position:relative;
}

.heartClip h3 img.pc{
	margin:0 auto 35px;
	display:block;
}

.heartClip .more{
	position:absolute;
	top:116px;
	right:0;
}

.heartClip ul li{
	float:left;
	width:calc(((100% - 2px) / 3) + 1px);
}

.heartClip ul li:last-child{
	width:calc((100% - 2px) / 3);
}

.heartClip ul li img{
	width:calc(100% - 1px);
}

.heartClip ul li:last-child img{
	width:calc(100%);
}

.heartClip ul li a div:last-child{
	border-left:1px solid #cccccc;
	margin-top:15px;
	padding:20px 45px;
}

.heartClip ul li:last-child a div:last-child{
	border-right:1px solid #cccccc;
}

.heartClip ul li h4{
	font-size:17px;
	color:#262626;
}

.heartClip ul li p{
	font-size:13px;
	color:#808080;
	margin-top:20px;
}

.heartClip ul li a:hover h4{
	color:#097429;
}

.heartClip ul li a:hover p{
	color:#097429;
}

.heartClip ul li a div{
	overflow:hidden;
}

.heartClip ul li a img{
	transition:all 250ms ease-out;
}

.heartClip ul li a:hover img{
	transform:scale(1.1);
}



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

.heartClip{
	max-width:1300px;
	padding:100px 40px 110px;
}

.heartClip .more{
	right:40px;
}

}

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

.visual h1{
	margin:-3.2785vw 0 0 -40.6557vw;
}

.visual h1 img{
	width:81.3114vw;
	height:6.557vw;
}

.news{
	width:97.3958%;
	margin:-7.161458vw auto 0;
	padding:6.51vw 4.6875vw;
}

.news .ttlArea{
	float:none;
	text-align:right;
	margin-top:24px;
}

.news .ttlArea h3{
	margin-bottom:0;
	padding-top:0;
	display:inline-block;
}

.news .ttlArea h3 img.pc, .news .more img.pc{
	display:none;
}

.news .ttlArea h3 img.sp, .news .more img.sp{
	display:inline;
}

.news .more{
	padding:0 0 0 10px;
	display:inline-block;
}

.news table{
	float:none;
	width:100%;
}

.news table th, .news table td{
	padding:0 0 14px;
}

.news table th{
	width:319px;
	vertical-align:top;
}

.news .date{
	font-weight:bold;
}

.news .cat{
	font-size:11px;
	height:18px;
	width:92px;
	text-align:center;
	margin:0 23px 0 0;
	display:inline-block;
	line-height:18px;
	padding-bottom:18px;
}

.news .ueda{
	border:1px solid #004d9a;
	color:#004d9a;
}

}

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

.visual{
	height:80vh;
	background:url(../img/index/sp/visual01.jpg) center;
	background-size:cover;
}

.news .ttlArea{
	margin-top:5.2vw;
}

.news .ttlArea h3{
	width:20.44vw;
}

.news .ttlArea h3 img{
	width:100%;
}

.news .more{
	padding:0;
	margin-left:1.5vw;
}

.news table th, .news table td{
	display:block;
}

.news table td{
	padding:0 0 4.557vw;
}

.news table th{
	padding:0 0 1.95vw;
	width:100%;
}

.news .date{
	font-size:2.86458vw;
	width:26vw;
}

.news .cat{
	font-size:2.259vw;
	height:3.3854vw;
	width:24vw;
	margin:0;
	line-height:3.3854vw;
	padding-bottom:3.3854vw;
}

.news .ueda{
	border:1px solid #004d9a;
	color:#004d9a;
}

.about{
    margin: 13vw auto 0;
    padding: 15.625vw 0 20.833vw;
}

.about h3 img{
    margin: 0 auto 14.3229167vw;
    width: 82.9427vw;
}

.about a img{
    width: 94.79167vw;
}

.about a:hover img{
    opacity:1;
}

.nav01{
	width:94.79%;
	margin:14.97vw auto 0;
}

.nav01 li{
	width:100%;
	float:none;
	margin-bottom:2px;
}

.nav01 li:last-child{
	margin-bottom:0;
}

.nav01 li:nth-child(1), .nav01 li:nth-child(4){
	margin-right:0;
}

.nav01 li h4{
	position:absolute;
	top:50%;
	left:50%;
}

.nav01 li:nth-child(1) h4{
	margin:-6.9vw 0 0 -12.17vw;
	width:24.3489vw;
}

.nav01 li:nth-child(2) h4{
	margin:-6.9vw 0 0 -13vw;
	width:26vw;
}

.nav01 li:nth-child(3) h4{
	margin:-7.096vw 0 0 -20.4427vw;
	width:40.8854vw;
}

/*.nav01 li:nth-child(4) h4{
	margin:-6.966vw 0 0 -20.377vw;
	width:40.755vw;
}*/

.nav01 li:nth-child(4) h4{
	margin:-6.966vw 0 0 -27.4vw;
	width:54.8177vw;
}

.nav01 li::after{
	background:url(../img/common/sp/arrow02.png);
	background-size:6.11979vw 5.98958vw;
	width:6.11979vw;
	height:5.98958vw;
	bottom:2.34375vw;
	right:2.34375vw;
}

.nav01 li a:hover > img{
	transform:scale(1);
}

.nav02{
	width:86.45833%;
	margin:28.645833vw auto 23.95833vw;
}

.nav02 h3 img{
    width: 25.26vw;
	margin:0 auto 6.51vw;
}

.nav02 a:hover > img{
	transform:scale(1);
}

.nav02 p{
	font-size:5.20833vw;
    margin-top:5.6vw;
}

.nav02 p small{
	font-size:3.3854167vw;
    line-height:1.538461538461538;
    margin-top:2.6vw;
}

.heartClip{
	width:85.677%;
	padding:15.36458vw 0 0;
}

.heartClip h3 img{
	margin:0 0 6.51vw;
	width:47.65625vw;
}

.heartClip h3 img.pc{
	display:none;
}

.heartClip .more{
	top:17.3177vw;
	right:0;
}

.heartClip ul li{
	float:none;
	width:100%;
	margin-bottom:1.953vw;
}

.heartClip ul li:last-child{
	width:100%;
}

.heartClip ul li img{
	width:100%;
}

.heartClip ul li:last-child img{
	width:100%;
}

.heartClip ul li a div:last-child{
	border-left:none;
	margin-top:3.255vw;
	padding:0 0 5.2vw;
}

.heartClip ul li:last-child a div:last-child{
	border-right:none;
}

.heartClip ul li h4{
	font-size:3.125vw;
}

.heartClip ul li p{
	font-size:2.734375vw;
	margin-top:2.6vw;
}

.heartClip ul li a:hover h4{
	color:#262626;
}

.heartClip ul li a:hover p{
	color:#808080;
}

.heartClip ul li a:hover img{
	transform:scale(1);
}

}