@charset "UTF-8";

/*--------------------------------
common
--------------------------------*/
* {
	margin: 0;
	padding: 0
}
*:focus {
	outline: none!important;
}
h1, h2, h3, p {
	margin: 0;
}
body {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, Verdana, sans-serif;
	background: #fff;
	font-size:18px;
}
sup, sub {
	font-size: .75em;
}
header img,
main img {
	max-width: 100%;
	width: 100%;
}
a {
	opacity: 1;
}
a:hover {
	opacity: .8;
	transition: .4s;
}

/*--------------------------------
header
--------------------------------*/
/*- navi ----------*/
nav {
	background: #fff;
}
nav.navbar {
	padding: 10px 0;
}
nav .navbar-brand img {
	max-height: 40px;
	width: auto;
}
/*- mv ----------*/
#mv {
	background-color: #00419b;
}
#mv h1 img {
	max-width: 1531px;
}

/*--------------------------------
main
--------------------------------*/
/*- fadeUp ----------*/
.fadein {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
}
.fadein.active {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: 1s;
}
/*- card ----------*/
#card {
	position: relative;
	width: 100%;
	padding: 100px 0 150px 0;
	margin-top: 100px;
}
#card:before,
#card:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
}
#card:before {
	top: 0;
	bottom: 0;
	height: 60%;
	background-color: #00419b;
	transform: skewY(-7deg);
	z-index: -1;
}
#card:after {
	bottom: 0;
	width: 100%;
	height: 450px;
	background: url("../img/card_bg01.png") no-repeat right bottom / contain;
	z-index: -2;
}
#card .pc {
	display: none;
}
#card .sp {
	display: block;
}
#card .slide-box {
	position: relative;
	flex-wrap: wrap;
	background-color: #fff;
	border: 2px solid #00419b;
	margin: 0;
}
#card .slide {
	position: relative;
	width: 100%;
	height: 80vw;
	background: url("../img/card_bg02_sp.png") no-repeat left bottom / contain;
	padding: 0;
	margin: 0;
}
#card .slide:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../img/card_bg03_sp.png") no-repeat left bottom / contain;
	z-index: 1;
}
#card .slide > .slick-list {
	position: absolute;
	top: 15vw;
	right: 0;
	left: 20vw;
	max-width: 74vw;
	width: 100%;
	overflow: hidden;
}
#card .slide-navigation .slick-track {
	background: #f0f0f0;
}
#card .slide-navigation .item {
	position: relative;
	cursor: pointer;
}
#card .slide-navigation .item .image {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	padding: 26px 13px;
}
#card .slick-prev,
#card .slick-next {
	display: none !important;
}
#card .js-slider-control img {
	max-width: 65px;
}
/*- benefits01 ----------*/
#benefits01 {
	position: relative;
	background-color: #00419b;
	padding-bottom: 200px;
	z-index: 0;
}
#benefits01:before,
#benefits01:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
}
#benefits01:before {
	top: 0;
	width: 100%;
	height: 450px;
	background: url("../img/benefits01_bg01.png") no-repeat right bottom / contain;
	z-index: -1;
}
#benefits01:after {
	bottom: 0;
	width: 100%;
	height: 450px;
	background: url("../img/benefits01_bg02.png") no-repeat right bottom / contain;
	z-index: -1;
}
#benefits01 h2 {
	position: relative;
	top: -16vw;
}
/*- benefits02 ----------*/
#benefits02 {
	position: relative;
	padding-bottom: 200px;
}
#benefits02:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 450px;
	background: url("../img/benefits02_bg01.png") no-repeat right bottom / contain;
	z-index: -1;
}
#benefits02 h2 {
	position: relative;
	top: -16vw;
}
#benefits02 .modal_dl dt {
	position: relative;
	font-size: 18px;
	font-weight: bold;
	background-color: #fff;
	border: 2px solid #00419b;
	padding: 15px;
	cursor: pointer;
}
#benefits02 .modal_dl dt:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 15px;
	width: 27px;
	height: 27px;
	background: url("../img/benefits02-icon01.png") no-repeat center / cover;
	margin: auto 0;
}
#benefits02 .modal_dl dt.active:after {
	background: url("../img/benefits02-icon02.png") no-repeat center / cover;
}
#benefits02 .modal_dl dd {
	background-color: #fff;
	border: 2px solid #00419b;
	border-top: 0;
	padding: 50px 20px;
}
#benefits02 .modal_dl dd .inner {
	font-size: 17px;
	max-width: 780px;
	margin: 0 auto;
}
#benefits02 .modal_dl dd .ttl {
	display: inline-block;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	background-color: #00419B;
	padding: 2px 16px;
}
#benefits02 .modal_dl dd .subttl {
	font-size: 18px;
	font-weight: bold;
	color: #00419B;
}
#benefits02 .modal_dl dd table {
	border: 2px solid #B4BECA;
}
#benefits02 .modal_dl dd th {
	font-size: 18px;
	color: #4D4D4D;
	text-align: center;
	background-color: #E5ECF5;
}
#benefits02 .modal_dl dd th,
#benefits02 .modal_dl dd td {
	border-color: #B4BECA;
	border-width: 1px;
	padding: 4px 20px;
}
/*- goods ----------*/
#goods {
	position: relative;
	width: 100%;
	padding-bottom: 100px;
}
#goods:before,
#goods:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
}
#goods:before {
	top: -8%;
	height: 120%;
	background-color: #00419b;
	transform: skewY(-7deg) translateY(90px);
	z-index: -1;
}
#goods:after {
	bottom: 0;
	height: 450px;
	background: url("../img/goods_bg01.png") no-repeat right bottom / contain;
	z-index: -1;
}
#goods h2 {
	position: relative;
	top: -16vw;
}
#goods .button img {
	max-width: 400px;
}
/*- features ----------*/
#features {
	position: relative;
	background: #123d78 url("../img/features_bg01.png") no-repeat top center / cover;
	padding: 160px 0 100px 0;
}
#features .button img {
	max-width: 400px;
}
/*- application ----------*/
#application,
#infomation {
	padding-top: 150px;
}
/*- infomation ----------*/
#infomation .box {
	border: 2px solid #00419b;
}
#infomation .box p {
	font-size: 18px;
	font-weight: bold;
	color: #00419b;
	border-bottom: 2px solid #00419b;
	padding: 10px;
}
#infomation .box .listbox {
	font-size: 14px;
	padding: 30px;
}

/*--------------------------------
media
--------------------------------*/
.sp {
	display: none;
}
/*- min ----------*/
@media (min-width: 576px) {
	#card .slide {
		height: 432px;
	}
	#card .slide > .slick-list {
		top: 82px;
		max-width: 390px;
		left: 108px;
	}
	#benefits01 h2,
	#benefits02 h2,
	#goods h2 {
		top: -11.5vw;
	}
}
@media (min-width: 768px) {
	#mv h1 {
		position: relative;
		display: inline-block;
	}
	#mv h1:before {
		content: "";
		position: absolute;
		top: 0;
		left: 6%;
		max-width: 796px;
		width: 52%;
		max-height: 1006px;
		height: 126%;
		background: url("../img/mv_img.png") no-repeat top center / contain;
		z-index: 1;
	}
	#card .slide {
		height: 583px;
	}
	#card .slide > .slick-list {
		top: 110px;
		max-width: 522px;
		left: 145px;
	}
	#benefits01 h2,
	#benefits02 h2,
	#goods h2 {
		top: -6vw;
	}
}
@media (min-width: 992px) {
	header .container,
	footer .container {
		max-width: 1224px;
	}
	#mv h1:before {
		left: 90px;
	}
	#collaboration .container {
		max-width: 1224px;
	}
	#card .container,
	#benefits01 .container,
	#benefits02 .container,
	#goods .container {
		max-width: 1024px;
	}
	#features .container {
		max-width: 774px;
	}
	#application .container {
		max-width: 1200px;
	}
	#card .pc {
		display: block;
	}
	#card .sp {
		display: none;
	}
	#card .slide {
		height: 504px;
		background: url("../img/card_bg02.png") no-repeat left bottom / contain;
	}
	#card .slide:before {
		background: url("../img/card_bg03.png") no-repeat left bottom / contain;
	}
	#card .slide > .slick-list {
		top: 40px;
		left: 0;
		max-width: 918px;
		margin: 0 auto;
	}
	#benefits01 h2,
	#benefits02 h2,
	#goods h2 {
		top: -78px;
	}
}
/*- max ----------*/
@media (max-width: 991px) {
	#card {
		padding: 80px 0 100px 0;
		margin-top: 80px;
	}
	#benefits01,
	#benefits02 {
		padding-bottom: 100px;
	}
	#goods {
    padding-bottom: 80px;
	}
	#goods:before {
		top: -12%;
	}
	#features {
		padding: 100px 0 80px 0;
	}
	#application,
	#infomation {
    padding-top: 80px;
	}
	#infomation .box .listbox ul {
		padding-left: 1rem;
	}
}
@media (max-width: 767px) {
	body {
		font-size: .9em;
	}
	.pc {
		display: none;
	}
	.sp {
		display: inline-block;
	}
}
@media (max-width: 400px) {
	#card .slide > .slick-list {
		top: 17vw;
	}
}

.apology {
	margin-top: 50px;
	text-align: center;
	display: block;
	font-size: 16px;
}

.apology .text {
	display: inline-block;
}
　　
/*--------------------------------
script
--------------------------------*/
.sa {opacity: 0; transition: all .5s ease;}
.sa.show {opacity: 1; transform: none;}
.sa--lr {transform: translate(-100px, 0);}
.sa--rl {transform: translate(100px, 0);}
.sa--up {transform: translate(0, 100px);}
.sa--down {transform: translate(0, -100px);}
.sa--scaleUp {transform: scale(.5);}
.sa--scaleDown {transform: scale(1.5);}
.sa--rotateL {transform: rotate(180deg);}
.sa--rotateR {transform: rotate(-180deg);}