@charset "utf-8";
/* ヘッダー */
header{
	height: 720px;
}
header *, .sct3 *, .sct3 .btn::before{
	color: #fff;
	text-shadow: 0 0 1px #0f214e, 0 0 1px #0f214e, 0 0 1px #0f214e, 0 0 1px #0f214e, 0 0 1px #0f214e, 0 0 1px #0f214e;
}
header  ._hamburger> li:first-child *{
	color: auto;
	text-shadow: none;
}
header > *{
	position: absolute;
}
header::before{
	content:"";
	display: block;
	height: 630px;
	width: 100vw;
	background-color: #0f214e;
	position: absolute;
	left: 0;
}
/* ボタン */
.btn{
	font-size: 17px;
	font-weight: 500;
	position: relative;
	line-height: 45px;
	width: 250px;
}
.btn::before{
	content: ">";
	display: inline-block;
	margin: 0 2.5rem 0 22px;
	color: #0f214e;
	font-weight: 500;
}
.btn img{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
/* ヘッダー トップヴィジュアル */
h1{
	font-size: 30px;
	font-weight: 500;
	top: 260px;
	left: 53vw;
	z-index: 2;
	line-height: 1.3;
	letter-spacing: .07rem;
}
h1 span{
	font-size: 1.1rem;
	display: block;
}
header p{
	top: 380px;
	left: 53vw;
	width: 45vw;
	text-indent: 1rem;
}
/* ヘッダー トップヴィジュアル スライド */
.imagebox{
	overflow: hidden;
	position: relative;
}
.imagebox._1{
	width: 50vw;
	height: 500px;
	top: 175px;
}
.imagebox._2{
	width: 16vw;
	height: 230px;
	top: -500px;
	left: 70vw;
}
.imagebox._1 img{
	width: 70vw;
	left: 0;
}
.imagebox._2 img{
	width: 30vw;
	left: -5vw;
}
.imagebox img {
	opacity: 0;
	height: auto;
	position: absolute;
	bottom: 0;
	animation: anime 60s ease infinite;
}
.imagebox img:nth-child(1) {
	animation-delay: 0s;
}
.imagebox img:nth-child(2) {
	animation-delay: 15s;
}
.imagebox img:nth-child(3) {
	animation-delay: 30s;
}
.imagebox img:nth-child(4) {
	animation-delay: 45s;
}
@keyframes anime {
	0% { opacity: 0; transform: scale(1.1); }
	12% { opacity: 1; }
	25% { opacity: 1; }
	40% { opacity: 0; }
	50%{ transform: scale(1); }
	100% { opacity: 0; transform: scale(1.1);}
}
/* メイン バナー */
main::before{
	content:"";
	display: block;
	width: 30vw;
	height: 1180px;
	background: linear-gradient(#edf3e5 90%, transparent 98%);
	position: absolute;
	top: -170px;
	right:0;
	z-index: -1;
}
.sct1{
	position: absolute;
	width: 30vw;
	height: 990px;
	right: 0;
	padding-top: 40px;
	z-index: 5;
	max-width: 730px;
}
.sct1 img{
	width: 13.7vw;
	height: 4.2vw;
	margin: 2vw 6vw;
	max-width: 480px;
	max-height: 140px;
}
/* メイン 新着情報 */
.sct2{
	margin-top: 50px;
	position: relative;
}
.sct2 h3{
	color: #7ac2ad;
	display: inline-block;
	transform: rotate(90deg);
	position: absolute;
	left: 5vw;
}
.sct2 h3 small{
	position: absolute;
	top: 63px;
	left: -35px;
	font-size: 16px;
}
.sct2 h3 span{
	transform: rotate(-90deg);
	font-size: 22px;
	writing-mode: vertical-rl;
	letter-spacing: .3rem;
	display: inline-block;
}
.sct2 ul, .sct2>a{
	margin-left: 12vw;
}
.sct2 ul{
	width: 40vw;
}
.sct2 li{
	margin-bottom: 45px;
	border-bottom: solid 1px #ddd;
}
.sct2 li:last-child{
	margin-bottom: 75px;
}
.sct2 li span{
	color:#F00;
	font-size: .9rem;
}
/* メイン 事業内容 */
.sct3{
	background: #0f214e;
	position:relative;
	z-index: 2;
	padding-left: 7vw;
	padding-bottom: 30px;
}
.sct3 h2{
	font-size: 48px;
	font-weight: bold;
	font-family: serif;
}
.sct3 div{
	position: relative;
}
.sct3 div > img{
	width: 350px;
	height: 350px;
	border-radius: 50%;
	position: absolute;
}
.sct3 h4{
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: 10px;
}
.sct3 h4 span{
	font-size: 18px;
	display: block;
}
.sct3 p{
	width: 330px;
	text-indent: 1rem;
	margin-bottom: 20px;
}
.left3vw{
	margin-left: 3vw; /*レスポンシブで消す？*/
}
.left25vw{
	margin-left: 25vw; /*レスポンシブで消す？*/
}
.left40vw{
	margin-left: 40vw; /*レスポンシブで消す？*/
}
.left60vw{
	margin-left: 60vw; /*レスポンシブで消す？*/
}
.btm100px{
	margin-bottom: 100px;
}
.btm200px{
	margin-bottom: 200px;
}
.btm350px{
	margin-bottom: 350px;
}
.btm450px{
	margin-bottom: 450px;
}
img.t50px{
	top: 50px;
}
img.t150px{
	top: 150px;
}
img.t200px{
	top: 200px;
}
img.t-200px{
	top: -200px;
}
img.t-300px{
	top: -300px;
}
img._l300px{
	left: 325px;
}
img._l200px{
	left: 200px;
}
img._l-355px{
	left: -355px;
}
/* 泡 */
.sct3 div div, .sct3 div div::after, .sct3 div div::before{
	position: absolute;
	background: #fff;
	border-radius:50%;
}
.sct3 div div{
	width: 25px;
	height: 25px;
	top: -120px;
}
.sct3 div div::after, .sct3 div div::before{
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	left: -30px;
}
.sct3 div div::before{
	top: -80px;
}
.sct3 div div::after{
	top: 50px;
}
.sct3 div:nth-child(2) div{
	left: 30vw;
}
.sct3 div:nth-child(3) div{
	top: -250px;
}
.sct3 div:nth-child(4) div{
	left: 30vw;
}
.sct3 div:nth-child(5) div,
.sct3 div:nth-child(6) div{
	top:0;
	left:-5vw;
}
.sct3 div:nth-child(6) div{
	left: 30vw;
}
.sct3 div:nth-child(8) div{
	left: 10vw;
}
/* 波のアニメーション */
.wave{
	position:relative;
	height: 16vw;
	background: linear-gradient(transparent 40%, rgb(15 33 78 / 90%) 55%, #0f214e 80%);
	margin-top:100px;
	width: 100vw;
	overflow: hidden;
}
main svg{
	position: absolute;
	top: -18vw;
	width: 180vw;
}
main svg:first-child{
	animation: move_wave 9s linear infinite;
	animation-delay: 1s;
	top: -15vw;
}
main svg:nth-child(2){
	animation: move_wave 10s linear infinite;
	left: -20vw;
}
main svg:nth-child(3){
	animation: move_wave 15s linear infinite;
	top: -16vw;
	left: -40vw;
}
.wave._2{
	background: linear-gradient(#0f214e 25%, rgb(15 33 78 / 90%) 35%, transparent 40%);
	margin-top: -50px;
	height: 25vw;
}
.wave._2 svg{
	top: -5vw;
}
@keyframes move_wave {
    0% {
        transform: translateX(0%) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-20%) translateZ(0) scaleY(0.4)
    }
    100% {
        transform: translateX(0%) translateZ(0) scaleY(1)
    }
}
/* レスポンシブ */
@media only screen and (max-width: 1200px) {
	.imagebox._1 img{
		width: 95vw;
	}
	.imagebox._2 img{
		width: 40vw;
	}
}
@media only screen and (max-width: 1040px) {
	/* ヘッダー */
	.imagebox._2{
		height: 20vw;
		width: 18vw;
		left: 75vw;
	}
	h1{
		top: 20vw;
		left: 52vw;
		font-size: 3vw;
	}
	header p{
		top: 32vw;
		left: 52vw;
	}
	/* バナー */
	.sct1{
		width: 31vw;
	}
	.sct1 img{
		width: 18.2vw;
		height: 5.5vw;
	}
	/* 新着情報 */
	.sct2 h3{
		transform: none;
	}
	.sct2 h3 span{
		display: none;
	}
	.sct2 h3 small{
		font-size: 28px;
		font-weight: 500;
		top: -70px;
		left: 0;
	}
	.sct2 ul{
		margin-left: 5vw;
		width: 55vw;
	}
	.sct2 >a{
		margin-left: 45vw;
	}
	/* 事業内容 */
	.sct3 {
		padding-top: 50px;
		padding-bottom: 0;
	}
	.sct3>div:nth-child(1n+1){
		margin-left: 0;
		margin-bottom: 80px;
	}
	.sct3 p{
		width: 70vw;
	}
	.sct3 div img:nth-child(4){
		z-index:-1;
		width: 40vw;
		height: 40vw;
		position: relative;
	}
	.sct3 div:nth-child(even) > img{
		top: -3.5rem;
		left: 45vw;
	}
	.sct3 div:nth-child(odd) > img{
		top: -2rem;
		left: 15vw;
	}
	.sct3>div:nth-child(2n+2) div{
		left: 75vw;
		top: -30px;
	}
	.sct3>div:nth-child(odd) div{
		left: 50vw;
		top: -30px;
	}
	/* 波 */
	.wave._2{
		margin-top: -90px;
	}
	/* ボタン */
	.btn{
		line-height: 3vw;
	}
	.btn::before{
		margin: 0 3vw 0 1.3vw;
	}
	.btn img{
		top: 1px;
		width: 3.5vw;
		height: auto;
	}
}
@media only screen and (max-width: 768px) {
	.imagebox._1{
		top: 230px;
		height: 420px;
		width: 42vw;
	}
	.imagebox._2{
		top: -350px;
		left: 82vw;
	}
	h1, header p{
		left: 45vw;
	}
	/* バナー */
	main::before{
		top: -190px;
		height: 1500px;
	}
	.sct2 ul{
		width: 60vw;
	}
}
@media only screen and (max-width: 500px) {
	.btn{
		font-size: 4.2vw;
		line-height: 8vw;
		width: 12rem;
    }
    .btn::before {
    	margin: 0 5vw 0 1.3vw;
    }
	.btn img{
		width: 9vw;
		margin-left: -2vw;
	}
	/* ヘッダー */
	:root{
		--outer-height: 100vh;
	}
	header{
		height: var(--outer-height);
	}
	header::before{
		height: calc(var(--outer-height) * .9);
	}
	h1{
		font-size: 5.6vw;
		top: calc(var(--outer-height) * .2);
		left: 8vw;
	}
	header p{
		top: calc( var(--outer-height) * .23 + 30vw);
		left: 8vw;
		width: 80vw;
		z-index:2;
	}
	.imagebox._1{
		width: 75vw;
		height: 50vw;
		top: calc(var(--outer-height) * .7);
		filter: brightness(0.6);
	}
	.imagebox._2{
		top: calc( -50vw + var(--outer-height) * .07);
		left: 70vw;
		width: 30vw;
		height: 33vw;
	}
	.imagebox._2 img{
		width: 53vw;
		left: -10vw;
	}
	main{
		padding-bottom: 115vw;
	}
	main::before{
		top: auto;
		bottom: 10vw;
		width: 100vw;
		height: 135vw;
		left: 0;
		background: linear-gradient(#edf3e5 90%, white 98%);
	}
	.sct1{
		bottom: 26vw;
		width: 100vw;
		height: 90vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.sct1 img{
		margin: auto;
		width: 39vw;
		height: 12vw;
	}
	.sct2{
		margin-top: 40vw;
	}
	.sct2 h3 small{
		font-size: 8vw;
		top: -25vw;
	}
	.sct2 ul {
		margin-left: 7vw;
	}
	.sct2 li:nth-child(n) {
		margin-bottom: 8vw;
	}
	.sct3 h2.btm100px{
		font-size: 8vw;
		width: 30vw;
		margin-bottom: 20vw;
	}
	.sct3 h4{
		font-size: 6vw;
	}
	.sct3 h4 span{
		font-size: 3vw;
	}
	.sct3>div:nth-child(1n+1){
		margin-bottom: 20vw;
	}
	.sct3 div:nth-child(odd) > img{
		top: 2rem;
	}
	.sct3>div:nth-child(2n+2) div{
		top: -15vw;
	}
	.sct3>div:nth-child(odd) div{
		left: 55vw;
		top: -12vw;
	}
	.sct3 div div{
		width: 4.5vw;
		height: 4.5vw;
	}
	.sct3 div div::after, .sct3 div div::before{
		width: 3vw;
		height: 3vw;
	}
	.wave{
		margin-top: 25vw;
	}
}
@media only screen and (min-width: 1400px) {
	header{
		width: 1400px;
		margin: auto;
	}
	h1, h1+p{
		left: 50vw;
		width: 700px;
	}
	.imagebox._1{
		left: -50px;
		width: 700px;
	}
	.imagebox._2{
		left: 800px;
	}
	.sct1 img{
		width: 182.6px;
		height: 56px;
	}
	.sct2 h3{
		left: 12vw;
	}
	.sct2 ul, .sct2>a {
		margin-left: 20vw;
	}
}
@media only screen and (min-width: 2000px) {
	main::before{
		right: 16vw;
		width: 24vw;
	}
	.sct1{
		right: 12vw;
	}
	.sct2 h3{
		left: 23vw;
	}
	.sct2 ul, .sct2>a {
		margin-left: 27vw;
	}
	.sct3 h2{
		margin: 0 0 300px 18vw;
	}
}