@charset "utf-8";

/* top */

header {
	position: relative;
	height: 100vh;
	height: 100dvh;
}

/* ------------------------------------------------------ */
/* IE11 animation lineMove */
/* ------------------------------------------------------ */

.scroll-area {
	position: absolute;
	left: 50%;
	bottom: -100px;
}

.scroll-text {
	font-family: "Overpass", sans-serif;
	font-weight: 400;
	position: absolute;
	top: -4.5em;
	left: -10px;
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.1em;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.scroll-line {
	width: 1px;
	height: 80px;
	background-color: rgba(255, 255, 255, 0.3);
}

.scroll-line::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 1px;
	background-color: #fff;
	animation-name: lineMove;
	animation-duration: 4s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

@keyframes lineMove {
	0% {
		bottom: 80px;
		height: 0;
	}

	20% {
		bottom: 0;
		height: 80px;
	}

	40% {
		bottom: 0;
		height: 0;
	}

	100% {
		bottom: 0;
		height: 0;
	}
}

/* animation lineMove */
.scroll-area {
	position: absolute;
	left: 50%;
	bottom: 0px;
}

.scroll-text {
	font-family: "Overpass", sans-serif;
	font-weight: 400;
	position: absolute;
	top: -4.5em;
	left: -11px;
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.1em;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.scroll-line {
	width: 1px;
	height: 80px;
	background-color: rgba(255, 255, 255, 0.3);
}

.scroll-line::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 1px;
	background-color: #fff;
	animation-name: lineMove;
	animation-duration: 4s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

@keyframes lineMove {
	0% {
		bottom: 80px;
		height: 0;
	}

	20% {
		bottom: 0;
		height: 80px;
	}

	40% {
		bottom: 0;
		height: 0;
	}

	100% {
		bottom: 0;
		height: 0;
	}
}

/* header
----------------------------------------- */

/* --- 背景アニメーション ---------------------------------------- */

.bg_mv {
	position: relative;
	margin: auto;
	overflow: hidden;
}

.bg_mv .bgImg {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	opacity: 0;
	animation: bgAnime 6s infinite;
	/* 4画像 × 各3s = 12s */
	z-index: -1000;
	background-size: cover;
}

.bg_mv .src1 {
	background: url(../images/mv-img01_pc.jpg) center 35%, #222;
	/* 背景の画像を指定 */
	background-size: cover;
}

.bg_mv .src2 {
	background: url(../images/mv-img02_pc.jpg) center right 15%, #222;
	/* 背景の画像を指定 */
	background-size: cover;
	animation-delay: 2s;
}

.bg_mv .src3 {
	background: url(../images/mv-img03_pc.jpg) center right 50%, #222;
	/* 背景の画像を指定 */
	background-size: cover;
	animation-delay: 4s;
}

@keyframes bgAnime {
	0% {
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	67% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		z-index: -10001;
	}
}

.main-copy {
	margin: auto;
	width: 100%;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: url("../images/main-copy-bg.jpg");
	background-size: cover;
	
	height: 100vh;
	height: 100dvh;

}

.main-copy-inner {
	color: #fff;
	text-align: left;
	width: 100%;
	opacity: 0.9;
}
.main-copy-inner h2 {
	position: relative;
	font-weight: 600;
	font-size: min(2.4vw, 46px);
	padding-left: 12%;
    text-shadow: #000000 0 0 10px;
}
.main-copy-inner h2::before {
	content: "";
	position: absolute;
	display: block;
	height: 1px;
	width: 10%;
	background: #fff;
	left: 0;
	top: 2.3vw;
}
.main-copy-inner h2::after {
	content: "";
	position: absolute;
	display: block;
	height: 1px;
	width: calc(100% - 57vw);
	background: #fff;
	right: 0;
	bottom: 2vw;
}
.main-copy-inner p {
	font-size: min(1.2vw, 23px);
	font-weight: 600;
	margin-top: 40px;
	line-height: 2.4;
	padding-left: 12%;
    text-shadow: #000000 0 0 10px;
}

.main-copy-inner img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
.portrait {
	display: none;
}

.main-bg-slide {
}

.main-bg-slide li {
	height: 100vh;
}

.main-bg-slide .m-slide01 {
	background: url(../images/mv-img01_pc.jpg) center center no-repeat;
	background-size: cover;
}

.main-bg-slide .m-slide02 {
	background: url(../images/mv-img02_pc.jpg) center center no-repeat;
	background-size: cover;
}

.main-bg-slide .m-slide03 {
	background: url(../images/mv-img03_pc.jpg) center center no-repeat;
	background-size: cover;
}

/* contents
----------------------------------------- */

/* top-point */
.top-point {
	border-top: 1px solid rgba(255, 255, 255, 0.6);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.top-point li {
	width: 100%;
	min-height: 300px;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 255, 255, 1);
	position: relative;
	flex-wrap: wrap;
	transition: all 0.3s;
}

.top-point01:hover a,
.top-point02:hover a,
.top-point03:hover a,
.top-point04:hover a {
	transition: all 0.3s;
	background-color: rgba(0, 0, 0, 0.16);
	backdrop-filter: blur(2px);
}
.top-point01:hover img,
.top-point02:hover img,
.top-point03:hover img,
.top-point04:hover img {
	transition: all 0.3s;
	filter: blur(2px) brightness(0.7);
}

.top-point li a:hover p {
	color: #fff;
}

/* 
.top-point .top-point01,
.top-point .top-point02,
.top-point .top-point03,
.top-point .top-point04 {
    background: rgb(0, 69, 150);
    background: -moz-linear-gradient(90deg, rgba(0, 69, 150, 1) 0%, rgba(2, 78, 168, 1) 51%, rgba(0, 115, 194, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0, 69, 150, 1) 0%, rgba(2, 78, 168, 1) 51%, rgba(0, 115, 194, 1) 100%);
    background: linear-gradient(90deg, rgba(0, 69, 150, 1) 0%, rgba(2, 78, 168, 1) 51%, rgba(0, 115, 194, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#004596", endColorstr="#0073c2", GradientType=1);
} */

.top-point a {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	transition: all 0.3s;
}
.top-point .top-point01 {
	background: rgb(0, 143, 211);
	background: linear-gradient(-35deg, rgba(0, 143, 211, 1) 60%, rgba(0, 129, 204, 1) 60%);
}

.top-point .top-point02 {
	background: rgb(0, 179, 202);
	background: linear-gradient(-35deg, rgba(70, 190, 198, 1) 60%, rgba(0, 179, 202, 1) 60%);
}

.top-point .top-point03 {
	background: rgb(96, 195, 131, 1);
	background: linear-gradient(-35deg, rgba(177, 211, 94, 1) 60%, rgba(96, 195, 131, 1) 60%);
}

.top-point .top-point04 {
	background: rgb(157, 157, 157);
	background: linear-gradient(-35deg, rgb(157, 157, 157) 60%, rgba(140, 140, 140, 1) 60%);
}

.top-point-item {
	width: 55%;
	padding: 10px 0 10px 5%;
	box-sizing: border-box;
}

.top-point-item:before,
.top-point-item:after {
	position: absolute;
	bottom: 22%;
	left: 5%;
	z-index: 100;
	display: block;
	content: "";
	transition: 0.2s;
	opacity: 0.7;
}
.top-point li:hover .top-point-item:before,
.top-point li:hover .top-point-item:after {
	left: 5%;
	transition: 0.3s;
	transition-timing-function: ease-in-out;
	opacity: 1;
}
.top-point li:hover .top-point-item:before {
	width: 240px;
}
.top-point li:hover .top-point-item:after {
	left: calc(5% + 224px);
}

.top-point-item:before {
	width: 150px;
	height: 1px;
	background: #fff;
}
.top-point-item:after {
	margin-top: -5px;
	width: 16px;
	border-top: 1px solid #fff;
	-webkit-transform: rotate(30deg);
	transform: rotate(35deg);
	bottom: calc(22% + 5px);
	left: calc(5% + 134px);
}

.top-point-ttl {
	width: 100%;
	font-size: min(2vw, 30px);
	color: #fff;
	line-height: 1.5;
	text-align: left;
}

.top-point-ttl > span {
	position: relative;
}

.top-point-ttl span > span {
	font-size: 15px;
}

.top-point-img {
	width: 70%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
}
.top-point-img.tate {
	display: none;
	position: relative;
}

.top-point-img img {
	object-fit: cover;
	height: 100%;
	min-height: 200px;
	object-position: 0% 50%;
}

.top-point-text {
	width: 100%;
	box-sizing: border-box;
	font-size: 15px;
	color: #fff;
	line-height: 2;
	padding: 20px 0 30px 0;
}

.top-point-btn {
	position: relative;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 17px;
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
	height: 85px;

	margin-top: auto;
	position: absolute;
	display: block;
	width: 100%;
	left: 0;
	bottom: 0;
}

.top-point-btn::after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 15px;
	height: 15px;
	margin-top: -5px;
	border: 0px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	transform: rotate(45deg);
}

.top-point a .top-point-btn::after {
	transition: all 0.3s;
}

.top-point a:hover .top-point-btn::after {
	position: absolute;
	top: 50%;
	right: 10px;
}

.top-point-btn br {
	display: none;
}
.top-point-btn:hover {
	background: rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
}

@media only screen and (max-width: 1200px) {
	.top-point-btn br {
		display: inline-block;
	}
}

@media only screen and (max-width: 800px) {
	.top-point-item {
		width: 55%;
		padding: 30px 0 10px 3%;
		box-sizing: border-box;
	}
}



/* header
----------------------------------------- */

.bx-wrapper {
	position: relative;
	z-index: -100;
}

.main-bg-slide {
}

.main-bg-slide li {
	width: 100%;
	height: 100vh;
	min-height: 500px;
}

.main-bg-slide .m-slide01 {
	background: url(../images/mv-img01_pc.jpg) center center no-repeat;
	background-size: cover;
}

.main-bg-slide .m-slide02 {
	position: relative;
	background: url(../images/mv-img02_pc.jpg) center center no-repeat;
	background-size: cover;
}

.main-bg-slide .m-slide03 {
	position: relative;
	background: url(../images/mv-img03_pc.jpg) center center no-repeat;
	background-size: cover;
}

/* ------------------------------------------------------ */
/*  - 960px */
/* ------------------------------------------------------ */

@media only screen and (max-width: 960px) {
	.main-bg-slide {
	}

	.main-bg-slide li {
		width: 100%;
		height: 100vh;
		min-height: 800px;
	}

	.main-bg-slide .m-slide01 {
		background: url(../images/mv-img01_pc.jpg) center center no-repeat;
		background-size: cover;
	}

	.main-bg-slide .m-slide02 {
		background: url(../images/mv-img02_pc.jpg) center center no-repeat;
		background-size: cover;
	}

	.main-bg-slide .m-slide03 {
		background: url(../images/mv-img03_pc.jpg) center center no-repeat;
		background-size: cover;
	}

	.main-bg-slide .m-slide06 {
		background: url(../images/mv-img06_sp.jpg) center center no-repeat;
		background-size: cover;
	}

	/* contents
----------------------------------------- */
	/* intro-copy-sec */
	.intro-copy-sec {
		display: flex;
		margin-top: 50px;
	}

	.intro-img {
		width: 40%;
		padding-left: 30px;
	}

	.intro-text {
		width: 60%;
		padding: 0 30px 60px 40px;
	}

	.intro-text h2 {
		margin-bottom: 25px;
		font-size: 25px;
		line-height: 1.6;
	}

	.intro-text p {
		font-size: 13px;
		line-height: 2.4;
	}

	/* top-point */

	.top-point li {
		min-height: 250px;
	}

	.top-point-ttl {
		font-size: 25px;
	}
	.top-point-text {
		font-size: 13px;
		padding: 10px 0 30px 0;
	}
	.main-copy-inner h2::after {
		width: calc(100% - 58vw);
	}
}

/* ------------------------------------------------------ */
/* sp - 600px */
/* ------------------------------------------------------ */

@media only screen and (max-width: 600px) {
	.scroll-text {
		font-family: "Overpass", sans-serif;
		font-weight: 400;
		position: absolute;
		top: -4.5em;
		left: -8px;
		color: #fff;
		font-size: 10px;
		letter-spacing: 0.1em;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}

	.scroll-line {
		width: 1px;
		height: 65px;
		background-color: rgba(255, 255, 255, 0.3);
	}

	.scroll-line::after {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		width: 1px;
		background-color: #fff;
		animation-name: lineMove;
		animation-duration: 4s;
		animation-timing-function: ease;
		animation-iteration-count: infinite;
	}

	@keyframes lineMove {
		0% {
			bottom: 65px;
			height: 0;
		}

		20% {
			bottom: 0;
			height: 65px;
		}

		40% {
			bottom: 0;
			height: 0;
		}

		100% {
			bottom: 0;
			height: 0;
		}
	}

	/* top-point */

	.top-point-ttl {
		font-size: 20px;
	}
	.top-point-item:before {
		width: 120px;
	}
	.top-point li:hover .top-point-item:before {
		width: 120px !important;
	}
	.main-copy-inner h2::after {
		width: calc(100% - 60vw);
	}
}

/* ------------------------------------------------------ */
/*横長*/
/* ------------------------------------------------------ */

@media screen and (orientation: landscape) and (max-width: 960px) {
	.scroll-area {
		display: none;
	}
	.main-copy-inner {
		margin-top: 5%;
	}
	.main-copy-inner p {
		margin-top: 10px;
	}
}

/* ------------------------------------------------------ */
/*縦長*/
/* ------------------------------------------------------ */

@media screen and (orientation: portrait) {
	.portrait {
		display: inline-block;
	}
	.main-copy {
		background: url(../images/main-copy-bg_portrait.jpg) 50% 50%;
		background-size: cover;
	}

	.main-copy-inner {
		text-align: center;
	}
	.main-copy-inner h2 {
		font-size: min(5vw, 46px);
		padding-left: 0;
	}
	.main-copy-inner h2::before,
	.main-copy-inner h2::after {
		display: none;
	}
	.main-copy-inner p {
		font-size: min(3vw, 23px);
		margin-top: 20px;
		padding-left: 0;
	}
}

@media screen and (orientation: portrait), (max-width: 767px) {
	.top-point-img.yoko {
		display: none;
	}

	.top-point-img.tate {
		display: block;
		width: 100%;
		height: auto;
		order: 1;
	}
	.top-point-item {
		width: 100%;
		order: 2;
		padding: 25px 5% 10px 5%;
        min-height: 170px;
	}

	.top-point .top-point01 {
		background: linear-gradient(-35deg, rgba(0, 143, 211, 1) 40%, rgba(0, 129, 204, 1) 40%);
	}

	.top-point .top-point02 {
		background: linear-gradient(-35deg, rgba(70, 190, 198, 1) 40%, rgba(0, 179, 202, 1) 40%);
	}

	.top-point .top-point03 {
		background: linear-gradient(-35deg, rgba(177, 211, 94, 1) 40%, rgba(96, 195, 131, 1) 40%);
	}

	.top-point .top-point04 {
		background: linear-gradient(-35deg, rgb(157, 157, 157) 40%, rgba(140, 140, 140, 1) 40%);
	}
	.top-point li .top-point-item:before,
	.top-point li .top-point-item:after {
		right: 15px;
		left: inherit;
		bottom: 25px;
	}
	.top-point li .top-point-item:after {
		bottom: 30px;
	}
	.top-point li:hover .top-point-item:before,
	.top-point li:hover .top-point-item:after {
		right: 5px;
		left: inherit;
	}
	.top-point li:hover .top-point-item:before {
		width: 150px;
	}


}

/* ------------------------------------------------------ */
/* 960px - 1200px */
/* ------------------------------------------------------ */

@media only screen and (min-width: 961px) and (max-width: 1250px) {
}

/* ------------------------------------------------------ */
/* 600px - 750px*/
/* ------------------------------------------------------ */

@media only screen and (min-width: 600px) and (max-width: 750px) {
}