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

body {
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	font-size: 16px;
	letter-spacing: 1px;
	color: #fff;
}

header{
	display: block;
	width: 100%;
	height: 8vh;
	background-color: #fff;
}

h1 > a{
	width: 100%;
	display: block;
	z-index: 1000;
}

h1 > a:hover{ opacity: 0.7;}
a:hover { transition: 0.5s;}

.pc { display:block;}
.sp { display:none!important;}
.ssp { display:none!important;}

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

	.ppc { display: none!important;}
	.ssp { display: block!important;}

}

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

	body {
		font-size: 13px;
		line-height: 21px;
	}

	.pc { display:none!important;}
	.sp { display:block!important;}
	img.sp { width: 100%;}

	header { height: 45px;	}

	header h1{
		width: 100%;
		height: 100%;
	}

}

#wrap #fv {
	position: relative;
	margin: 0 auto ;
}

.left,.right {
	width: 100%;
	height: 100%;
}

.left ul li:not(:last-child) { margin-bottom: 20px;}

.right .inner h3{
	font-size: 36px;
	line-height: 42px;
	font-weight: bold;
	letter-spacing: 0.2em;
	text-align: center;
	padding-bottom: 25px;
	margin-bottom: 30px;
	position: relative;
}

.right .inner h3::after {
	content: "";
	width: 45px;
	height: 3px;
	background-color: #f00;
	display: block;
	margin: auto;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
}
.right .inner p {
	font-size: 14px;
	line-height: 26px;
	margin-bottom: 35px;
}

.right .inner ul {	overflow: hidden;}
.right .inner ul li a {
	background-color: #fff;
	width: 100%;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
	display: block;
	position: relative;
}

.right .inner ul li a img {	margin: 0 auto; }

.right .inner ul li a::after {
	content: "";
	width: 6px;
	height: 15px;
	position: absolute;
	right: 15px;
	top: 38%;
	background: url(../img/icon_arrow.jpg) no-repeat center;
}

.right .inner ul li:not(:last-child) { margin-bottom: 10px; }

.right small{
	font-size: 12px;
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.fvinner {
	position: relative;
	margin: 0 auto;
}

#fv .fvinner .bxslider li div {
	position: absolute;
	bottom: 45px;
	left: 50px;
	z-index: 5;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	z-index: 11;
}

#fv .fvinner .bxslider li div i {
	font-size: 10px;
	padding: 3px 12px;
	border: solid 1px #fff;
	border-radius: 10px;
	margin-right: 10px;
	font-weight: normal;
}

#fv .fvinner .bxslider li div a {	color: #f68c7d; }
.photo .slide_pc01{	background: url("../img/slide01.jpg") center/cover no-repeat;}
.photo .slide_pc02{	background: url("../img/slide02.jpg") center/cover no-repeat;}

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

	.left ul { width: 100%;	}

}

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

	h1 > a{
		background: url(../img/h1.jpg) no-repeat center;
		max-width: 163px;
		height: 8vh;
    padding: 0 15px;
	}

	.left,.right {
		position: absolute;
		top: 0;
		z-index: 100;
	}

	.fvinner { max-width: 56.25%;	}
	.left {
		max-width: 38%;
		left: 0;
		background: linear-gradient(79deg, #144996 0%, #144996 74%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
	}

	.left .inner{
		margin: auto;
		position: absolute;
		left: 2vw;
		top: 17vh;
	}

	.left h2 {
		max-width: 345px;
    width: 75%;
    height: 188px;
    margin: 0 0 6vh;
    background: url(../img/h2.png) no-repeat left center/100%;
    z-index: 10;
	}

	.left ul {
		max-width: 460px;
		width: 78%;
	}
	.right .inner ul li {	height: 60px;}
	.right .inner ul li:last-child a img {
		margin-left: 10px;
		max-width: 261px;
		width: 87%;
	}

}

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

	#wrap #fv {	height: 92vh;	}

	.right {
		max-width: 36%;
		right: 0;
		background: linear-gradient(-78deg, #0066b3 0%, #0066b3 73%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
	}

	.right .inner{
		max-width: 320px;
		width: 67%;
		position: absolute;
		overflow: hidden;
		right: 2vw;
		bottom: 15vh;
	}

}

@media screen and (max-height: 800px) and (min-width:1200px){

	#wrap #fv { height: 800px; }
	header,h1 > a { height: 80px;}

	.left .inner { top: 100px; }

}

@media screen and (max-width: 1200px) and (min-width:751px) {

	.left {
		max-width: 58%;
		height: 880px;
	}

	.fvinner {
		max-width: 70%;
		margin-left: 31.75%;
	}

}

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

	#fv .left ul {
		max-width: 100%;
		font-size: 14px;
		width: calc(100% - 25%);
	}

	#fv .right {
		padding: 60px 0 100px;
		background: #0066b3;
		position: static;
	}

	.right .inner p {
		text-align: center;
		margin-bottom: 35px;
	}

	.right .inner h3 {
		font-size: 28px;
		line-height: 32px;
	}

	.right .inner ul {
		max-width: 320px;
		margin: 0 auto;
	}

	.right .inner ul li:not(:last-child) { margin-bottom: 15px;}

	.photo .slide_pc01 { background: url(../img/slide01.jpg) center right 80% no-repeat; }
	.photo .slide_pc02 { background: url(../img/slide02.jpg) center left 0% no-repeat; }

	.right small {
    right: 0;
    left: 0;
    text-align: center;
	}

}

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

	h1 > a{
    max-width: 99px;
    padding: 5px 10px ;
	}


	.fvinner { z-index: -1;}

	.left {
		background: linear-gradient(-4deg, #144996 0%, #144996 91%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
		padding: 70px 0 40px;
		margin-top: -55px;
	}

	.left h2 {
		max-width: 500px;
		margin-bottom: 30px;
	}

	#fv .left ul,
	#fv .right .inner {
		font-size: 13px;
		width: calc(100% - 30px);
		margin: 0 auto;
	}

	.left ul li:not(:last-child) { margin-bottom: 10px; }

	.right .inner h3{
		font-size: 24px;
		line-height: 32px;
		padding-bottom: 20px;
		margin-bottom: 25px;
	}

	.right .inner h3::after {
		width: 35px;
		height: 2px;
	}

	.right .inner p {
		font-size: 13px;
    display: table;
    line-height: 18px;
    margin: 0 auto 25px;
		text-align: left;
	}

	.right .inner ul li a::after {
    width: 6px;
    height: 15px;
    right: 15px;
    top: 40%;
    background: url(../img/sp/icon_arrow.jpg) no-repeat center/100%;
	}

	.right .inner ul li a img {	max-width: 151px;}
	.right .inner ul li:last-child a img {max-width: 245.5px;	}

	.right small {
    font-size: 10px;
    line-height: 140%;
	}

}