@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}

body {
	color: #333;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "Arial", "Meiryo", sans-serif;
	font-weight: 400;
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	text-align: justify;
	letter-spacing: 0.06em;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "Arial", "Meiryo", sans-serif;
	font-weight: 700;
}

ol,
ul {
	list-style-type: none;
}

a {
	outline: none;
}

/* cf */
.cf:before,
.cf:after {
	content: "";
	display: block;
	overflow: hidden;
}

.cf:after {
	clear: both;
}

.cf {
	zoom: 1;
}

.anime {
	opacity: 0;
	transform: translate3d(0, 100%, 0);
	transition: all 1s ease;
	display: flex;
}

.left {
	transform: translate3d(-50%, 0, 0);
}

.right {
	transform: translate3d(50%, 0, 0);
}

.top {
	transform: translate3d(0, -30%, 0);
}

.btm {
	transform: translate3d(0, 30%, 0);
}

.slow {
	transition: all 1.3s ease;
}

.fast {
	transition: all 0.6s ease;
}

.anime.active {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.swing.active {
	animation-name: mvswing;
	animation-duration: 0.8s;
	animation-fill-mode: both;
}

@keyframes mvswing {
	20% {
		-webkit-transform: rotate(15deg);
		transform: rotate(15deg)
	}

	40% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}

	60% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg)
	}

	80% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg)
	}

	to {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

.display {
	display: block !important;
}


/*********************************

 ～800

 *********************************/

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

	body {
		width: 100vw;
		overflow-x: hidden;
		-webkit-text-size-adjust: 100%;
		font-size: 3vw;
		line-height: 1.7;
	}

	.pc {
		display: none !important;
	}

	img {
		width: 100%;
		height: auto !important;
	}

	/* header */
	header {
		position: fixed;
		display: flex;
		width: 100%;
		height: 12vw;
		top: 0;
		background: #007abb;
		z-index: 100;
	}

	header .inr {
		width: 100%;
	}

	header span {
		display: none;
	}

	header .inr #logo {
		float: left;
		width: 41.0666vw;
		height: 12vw;
		background: url(../images/logo.png) no-repeat;
		background-size: cover;
	}

	header .inr .btn {
		float: right;
		width: 12vw;
		height: 12vw;
		background: url(../images/btn_open.png) no-repeat;
		background-size: cover;
	}

	header .inr .btn a {
		display: block;
		width: 12vw;
		height: 12vw;
	}

	/* menu */
	#sp_menu {
		/*display:none;*/
		overflow-x: hidden;
		overflow-y: scroll;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		padding: 0 0 20vw 0;
		background: #fff;
		z-index: 1001;
		transform: translate3d(100%, 0, 0);
		transition: all 0.4s;
	}

	#sp_menu .btn {
		position: relative;
		height: 12vw;
	}

	#sp_menu .btn a {
		position: absolute;
		display: block;
		right: 0;
		width: 12vw;
		height: 12vw;
		background: url(../images/btn_close.png) no-repeat;
		background-size: cover;
	}

	#sp_menu .btn a span {
		display: none;
	}

	#sp_menu ul {
		width: 87.2vw;
		margin: 0 auto;
		font-size: 0;
	}

	.rightIn {
		transform: translate3d(0, 0, 0) !important;
	}

	.rightOut {
		transform: translate3d(100%, 0, 0) !important;
	}

	.sp_menuBg {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #fff;
		z-index: 1000;
	}

	/* mainimg */
	#mainimg {
		width: 100%;
		margin: 12vw 0 0 0;
	}

	/* point1 */
	#point1 {
		margin: -12vw auto 0 auto;
		padding: 20.8vw 0 0 0;
	}

	#point1 .title {
		width: 53.6vw;
		margin: 0 auto;
		font-size: 0;
	}

	#point1 .title h2 img {
		width: 53.6vw;
		height: 53.6vw !important;
	}

	#point1 ul.slick-slider {
		width: 100%;
		height: 56vw;
		margin: 10vw 0 0 0;
	}

	#point1 ul.slick-slider li {
		padding: 0 5vw;
	}

	#point1 .slick-prev {
		z-index: 50;
		top: 51vw;
		left: 28vw;
		width: 5vw;
		height: 5vw;
		background: url(../images/btn_prev.png) right center no-repeat;
		background-size: cover;
	}

	#point1 .slick-next {
		z-index: 50;
		top: 51vw;
		right: 28vw;
		width: 5vw;
		height: 5vw;
		background: url(../images/btn_next.png) left center no-repeat;
		background-size: cover;
	}

	#point1 .slick-prev:before,
	#point1 .slick-next:before {
		display: none;
	}

	#point1 .slick-prev:hover,
	#point1 .slick-prev:focus {
		background: url(../images/btn_prev.png) right center no-repeat;
		background-size: cover;
	}

	#point1 .slick-next:hover,
	#point1 .slick-next:focus {
		background: url(../images/btn_next.png) left center no-repeat;
		background-size: cover;
	}

	#point1 ul.slick-dots {
		bottom: 2vw;
		z-index: 30;
	}

	#point1 ul.slick-dots li {
		width: 5vw;
		margin: 0;
		padding: 0;
		text-align: center;
	}

	#point1 ul.slick-dots li button:before {
		color: #333;
		font-size: 2vw !important;
	}

	#point1 .notice {
		width: 90%;
		margin: 5vw auto 0 auto;
		letter-spacing: 0.03em;
	}

	#point1 .notice span {
		color: #ff1d25;
		font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "Arial", "Meiryo", sans-serif;
		font-weight: 700;
	}

	/* point2 */
	#point2 {
		padding: 12vw 0 0 0;
	}

	#point2 .inr {
		padding: 5vw 0 8vw 0;
		background: #cce4f2;
	}

	#point2 .title {
		width: 53.6vw;
		margin: 0 auto;
		font-size: 0;
	}

	#point2 .title h2 {
		width: 53.6vw;
		height: 53.6vw !important;
	}

	#point2 .text {
		width: 90%;
		margin: 6vw auto 0 auto;
		font-size: 3.8vw;
		line-height: 2;
	}

	#point2 .img {
		margin: 8vw 0 0 0;
	}

	/* point3 */
	#point3 {
		margin: -12vw 0 0 0;
		padding: 18.6vw 0 0 0;
	}

	#point3 .title {
		width: 53.6vw;
		margin: 0 auto;
		font-size: 0;
	}

	#point3 .title h2 {
		width: 53.6vw;
		height: 53.6vw !important;
	}

	#point3 .text {
		width: 90%;
		margin: 6vw auto 0 auto;
		font-size: 3.8vw;
		line-height: 2;
	}

	#point3 .img {
		margin: 8vw 0 0 0;
	}

	#point3 .img2 {
		margin: 8vw 0 0 0;
	}

	#point3 .notice {
		width: 90%;
		margin: 8vw auto 0 auto;
		letter-spacing: 0.03em;
	}

	#point3 .notice span {
		color: #ff1d25;
		font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "Arial", "Meiryo", sans-serif;
		font-weight: 700;
	}

	/* point4 */
	#point4 {
		padding: 12vw 0 0 0;
		overflow-x: hidden;
	}

	#point4 .inr {
		padding: 5vw 0 3vw 0;
		background: #cce4f2;
	}

	#point4 .title {
		width: 53.6vw;
		margin: 0 auto;
		font-size: 0;
	}

	#point4 .title h2 {
		width: 53.6vw;
		height: 53.6vw !important;
	}

	#point4 .box {
		width: 90%;
		margin: 8vw auto 0 auto;
	}

	#point4 .box .img img {
		height: 18.4vw !important;
	}

	#point4 .box .text {
		margin: 6vw 0 0 0;
		font-size: 3.8vw;
		line-height: 2;
	}

	#point4 .box2 {
		width: 90%;
		margin: 12vw auto 0 auto;
	}

	#point4 .box2 .img {
		height: 20.4vw !important;
	}

	#point4 .box2 .text {
		margin: 6vw 0 0 0;
		font-size: 3.8vw;
		line-height: 2;
	}

	#point4 .btn {
		width: 90%;
		margin: 12vw auto 0 auto;
	}

	/* footer */
	footer {
		margin: 7vw 0 0 0;
		padding: 0.7em 0;
		background: #007abb;
		color: #fff;
		font-size: 2.8vw;
		letter-spacing: 0.02em;
		text-align: center;
	}

}



/*********************************

 801～

 *********************************/

@media screen and (min-width:801px) {
	body {
		padding: 65px 0 0 0;
	}

	.sp,
	#sp_menu,
	.sp_menuBg {
		display: none !important;
	}

	a img {
		outline: none;
		transition: opacity 0.3s ease-in-out;
	}

	a img:hover {
		opacity: 0.8;
	}

	/* header */
	header {
		position: fixed;
		width: 100%;
		height: 65px;
		top: 0;
		background: #007abb;
		z-index: 100;
	}

	header .inr {
		width: 920px;
		height: 65px;
		margin: 0 auto;
		background: url(../images/bg_header.png) no-repeat;
		background-size: 100% auto;
	}

	header span {
		display: block;
		text-indent: -999999px;
	}

	header .inr #logo {
		float: left;
		width: 167px;
		height: 65px;
	}

	header .inr ul {
		float: left;
		position: relative;
		width: 752px;
		height: 65px;
	}

	header .inr ul li {
		float: left;
		padding: 0 0 0 1px;
	}

	header .inr ul li a {
		display: block;
		width: 149px;
		height: 65px;
		transition: all 0.5s ease;
	}

	header .inr ul li a span {
		width: 149px;
		height: 65px;
	}

	header .inr ul li:nth-child(1) a:hover,
	header .inr ul li:nth-child(1) a.on {
		background: #fff url(../images/menu01_on.png) no-repeat;
		background-size: contain;
	}

	header .inr ul li:nth-child(2) a:hover {
		background: #fff url(../images/menu02_over.png) no-repeat;
		background-size: contain;
	}

	header .inr ul li:nth-child(3) a:hover {
		background: #fff url(../images/menu03_over.png) no-repeat;
		background-size: contain;
	}

	header .inr ul li:nth-child(4) a:hover {
		background: #fff url(../images/menu04_over.png) no-repeat;
		background-size: contain;
	}

	header .inr ul li:nth-child(5) a:hover {
		background: #fff url(../images/menu05_over.png) no-repeat;
		background-size: contain;
	}

	header .inr ul li:nth-child(2) a.on {
		background: #fff url(../images/menu02_on.png) no-repeat;
		background-size: contain;
	}

	header .inr ul li:nth-child(3) a.on {
		background: #fff url(../images/menu03_on.png) no-repeat;
		background-size: contain;
	}

	header .inr ul li:nth-child(4) a.on {
		background: #fff url(../images/menu04_on.png) no-repeat;
		background-size: contain;
	}

	header .inr ul li:nth-child(5) a.on {
		background: #fff url(../images/menu05_on.png) no-repeat;
		background-size: contain;
	}

	header .line {
		position: absolute;
		bottom: 0;
		height: 6px;
		background: #ffd600;
		transition: left 0.1s ease;
	}

	/* mainimg */
	#mainimg {
		position: relative;
		width: 100%;
		height: 530px;
	}

	#mainimg h1 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 796px;
		height: 446px;
		z-index: 2;
	}

	#mainimg h1 img {
		width: 796px;
	}

	#mainimg .bg {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 530px;
		background: url(../images/banner_pc.jpg) repeat-x;
	}

	/* point1 */
	#point1 {
		width: 920px;
		margin: -65px auto 0 auto;
		padding: 165px 0 25px 0;
	}

	#point1 .title {
		position: relative;
		width: 100%;
		height: 106px;
	}

	#point1 .title div {
		position: absolute;
		left: 133px;
	}

	#point1 .title div img {
		width: 106px;
	}

	#point1 .title h2 {
		position: absolute;
		left: 256px;
	}

	#point1 .title h2 img {
		width: 533px;
	}

	#point1 .img {
		margin: 40px 0 0 0;
		text-align: center;
	}

	#point1 .img img {
		width: 752px;
		height: 545px;
	}

	#point1 ul.photo {
		width: 824px;
		margin: 28px auto 0 auto;
	}

	#point1 ul.photo li {
		float: left;
		width: 250px;
		height: 250px;
		background-size: 250px 250px !important;
	}

	#point1 ul.photo li.p1_img0 {
		/* ダミー */
		display: none !important;
		width: 0;
		height: 0;
	}

	#point1 ul.photo li.p1_img2 {
		margin: 0 37px;
	}

	#point1 .notice {
		margin: 45px 0 0 1em;
		padding: 0 0 0 105px;
		font-size: 15px;
		text-indent: -1em;
		letter-spacing: 0.03em;
	}

	#point1 .notice span {
		color: #ff1d25;
		font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "Arial", "Meiryo", sans-serif;
		font-weight: 700;
	}

	/* point2 */
	#point2 {
		padding: 65px 0 0 0;
	}

	#point2 .inr {
		padding: 70px 0 72px 0;
		background: #F5F9FC;
	}

	#point2 .title {
		position: relative;
		width: 920px;
		height: 106px;
		margin: 0 auto;
	}

	#point2 .title div {
		position: absolute;
		left: 160px;
	}

	#point2 .title div img {
		width: 106px;
	}

	#point2 .title h2 {
		position: absolute;
		left: 284px;
	}

	#point2 .title h2 img {
		width: 494px;
	}

	#point2 .text {
		width: 704px;
		margin: 74px auto 0 auto;
		font-size: 19px;
		letter-spacing: 0.03em;
		line-height: 2;
	}

	#point2 .text p+p {
		margin: 2em 0 0 0;
	}

	#point2 .text .bold {
		font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "Arial", "Meiryo", sans-serif;
		font-weight: 700;
	}

	#point2 .text .mini {
		font-size: 14px;
	}

	#point2 .img {
		margin: 60px 0 0 0;
		text-align: center;
	}

	#point2 .img img {
		width: 480px;
	}

	/* point3 */
	#point3 {
		width: 920px;
		margin: -65px auto 0 auto;
		padding: 155px 0 30px 0;
	}

	#point3 .title {
		position: relative;
		width: 100%;
		height: 106px;
	}

	#point3 .title div {
		position: absolute;
		left: 160px;
	}

	#point3 .title div img {
		width: 106px;
	}

	#point3 .title h2 {
		position: absolute;
		left: 283px;
	}

	#point3 .title h2 img {
		width: 494px;
	}

	#point3 .text {
		width: 704px;
		margin: 74px auto 0 auto;
		font-size: 19px;
		letter-spacing: 0.03em;
		line-height: 2;
	}

	#point3 .text span {
		font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "Arial", "Meiryo", sans-serif;
		font-weight: 700;
	}

	#point3 .img {
		margin: 40px 0 0 0;
		text-align: center;
	}

	#point3 .img img {
		width: 600px;
	}

	#point3 .img2 {
		margin: 68px 0 0 0;
		text-align: center;
	}

	#point3 .img2 img {
		width: 720px;
	}

	#point3 .notice {
		margin: 45px 0 0 1em;
		padding: 0 0 0 105px;
		font-size: 15px;
		text-indent: -1em;
		letter-spacing: 0.03em;
	}

	#point3 .notice span {
		color: #ff1d25;
		font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "Arial", "Meiryo", sans-serif;
		font-weight: 700;
	}

	/* point4 */
	#point4 {
		padding: 65px 0 0 0;
	}

	#point4 .inr {
		padding: 48px 0 80px 0;
		background: #F5F9FC;
	}

	#point4 .title {
		position: relative;
		width: 920px;
		height: 106px;
		margin: 0 auto;
	}

	#point4 .title div {
		position: absolute;
		left: 124px;
	}

	#point4 .title div img {
		width: 106px;
	}

	#point4 .title h2 {
		position: absolute;
		left: 248px;
	}

	#point4 .title h2 img {
		width: 548px;
	}

	#point4 .box {
		width: 704px;
		margin: 88px auto 0 auto;
	}

	#point4 .box .img {
		float: left;
		width: 250px;
		padding: 8px 0 0 0;
	}

	#point4 .box .img img {
		width: 208px;
	}

	#point4 .box .text {
		float: right;
		width: 454px;
		font-size: 19px;
		letter-spacing: 0.03em;
		line-height: 2;
	}

	#point4 .box2 {
		width: 704px;
		margin: 80px auto 0 auto;
	}

	#point4 .box2 .img {
		float: right;
		width: 220px;
		padding: 66px 0 0 0;
		text-align: right;
	}

	#point4 .box2 .img img {
		width: 220px;
	}

	#point4 .box2 .text {
		float: left;
		width: 450px;
		font-size: 19px;
		letter-spacing: 0.03em;
		line-height: 2;
	}

	#point4 .box span,
	#point4 .box2 span {
		font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "Arial", "Meiryo", sans-serif;
		font-weight: 700;
	}

	#point4 .btn {
		margin: 80px 0 0 0;
		text-align: center;
	}

	#point4 .btn img {
		width: 560px;
	}

	/* footer */
	footer {
		margin: 50px 0 0 0;
		padding: 10px 0;
		background: #007abb;
		color: #fff;
		letter-spacing: 0.02em;
		text-align: center;
	}

}