@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@600&family=Kosugi+Maru&display=swap');

body{
	background:#0f2f3a url("../images/lp/bg.png") repeat-x 50% 0;
	/*background: linear-gradient(to bottom,  rgba(204,235,252,1) 0%,rgba(132,192,220,1) 42%,rgba(124,179,216,1) 50%,rgba(22,62,75,1) 100%);*/
	font-family: "Kosugi Maru", "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-style: normal;
}

#wrapper{
	display:block;
	overflow:hidden;
	/*width:min(100%,920px);*/
	min-height:100vh;
	position:relative;
}


/*----------------------------

 背景装飾

 ----------------------------*/
#backparts{
	display:block;
	overflow:hidden;
	width:100%;
	position:absolute;
	top:860px;
	left:0;
}

#backparts > img{
	width:100%;
	height:auto;
}


#rearparts{
	display:block;
	overflow:hidden;
	width:100%;
	pointer-events:none;
	position:absolute;
	bottom:0;
	left:0;
}

#rearparts img:nth-child(2){
	position: absolute;
	bottom:0;
	right:0;
}


/* for Sp --------------------*/
@media screen and (max-width:768px){

	#backparts{
		height:80vw;
		top:0;
	}

	#backparts > img{
		position:absolute;
		bottom:0;
		left:0;
		filter: blur(1.5px);
	}

	#rearparts img{
		width:50%;
		height:auto;
	}


}



/************************
 白ふち文字
************************/
.framedTxt{
	position:relative;
}
.framedTxt > span{
	display:block;
	overflow:hidden;
	position:relative;
}

.framedTxt > span:first-child{
	-webkit-text-stroke: 8px #FFF;
	text-stroke: 8px #FFF;
	position:absolute;
	top:0;
	left:0;
	right:0;
}



/*----------------------------

 ヘッダ

 ----------------------------*/
header{
	display:block;
	/*overflow:hidden;*/
	width: min(100%,1280px);
	margin:0 auto;
	height:450px;
	text-align:center;
	position:relative;
}

header > img{
	/**/
}

header > img:nth-child(1){
	position:absolute;
	top:0;
	left:calc(50% - 600px);
	filter: blur(1.5px);
	animation: wobble 1.5s infinite;
}

header > img:nth-child(2){
	position:absolute;
	top:0;
	left:calc(50% + 220px);
	filter: blur(1.0px);
	animation: wobble 2.0s infinite;
}


header h1{
	display:inline-block;
	overflow:hidden;
	font-size:2.8rem;
	font-weight:bold;
	line-height:155%;
	position:absolute!important;
	/*
	bottom:1em;
	left:0;
	right:0;
	*/
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}




/* for Sp --------------------*/
@media screen and (max-width:768px){


	header{
		overflow:hidden;
		height:80vw;
	}

	header > img:nth-child(1){
		width:60vw;
		height:auto;
		top:-4vw;
		left:-8vw;
	}

	header > img:nth-child(2){
		width:50vw;
		height:auto;
		top:auto;
		left:auto;
		bottom:0;
		right:-20vw;
	}
	/*
	header > img:nth-child(1),
	header > img:nth-child(2){
		display:none;
	}*/


	header h1{
		display:block;
		overflow:hidden;
		font-size:clamp(1.8rem,6vw,2.1rem);
		font-weight:bold;
		line-height:155%;
		white-space:nowrap;
	}

	header h1 > img{
		width:70vw;
		height:auto;
	}

}


@keyframes wobble {
	0%, 100% { transform: translateX(0) translateY(0) rotate(0); }
	50% { transform: translateX(0) translateY(-10px) rotate(5deg); }
}
/*----------------------------

 本文

 ----------------------------*/
main{
	display:block;
	/*overflow:hidden;*/
	width: min(100%,920px);
	margin:0 auto;
}



#container{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:30px 0;
	width:100%;
	position:relative;
}

#container > section{
	display:inline-block;
	/*overflow:hidden;*/
	width:50%;
	padding:0 30px;
	font-size:1.8rem;
	line-height:175%;
	color:#ffffff;
	text-align:center;
	position:relative;
}

#container > section:first-child{
	width:100%;
	font-size:2.4rem;
	font-weight:700;
	color:#333333;
	margin:0 0 30px;
}

#container > section:nth-child(4){
	top:-75px;
}
#container > section:nth-child(6){
	top:-210px;
}

#container > section h2{
	display:block;
	overflow:hidden;
	padding:0.5em 0.5em;
	font-size: 2.8rem;
	line-height:155%;
	font-weight:700;
	color:#ffffff;
	background-color:#4A8DA2;
}

#container > section:first-child h2{
	border-radius:10px;
	margin-bottom:1em;
}



/* for Sp --------------------*/
@media screen and (max-width:768px){
	main{
		padding-bottom: 12vw;
	}


	#container{
		display:flex;
		flex-direction:column;
		justify-content:center;
		gap:0 0;
	}

	#container > section{
		display:block;
		width:100%;
		padding:0 0;
		font-size:1.8rem;
		line-height:175%;
	}

	#container > section:first-child{
		font-size:clamp(1.8rem,6vw,2.1rem);
		margin:0 0 8vw;
	}
	#container > section:nth-child(4){
		top:0;
	}


	#container > section h2{
		font-size: 2.8rem;
		line-height:155%;
	}

	#container > section:first-child h2{
		border-radius:0;
		margin-bottom:1em;
	}

	#container > section:nth-child(4),
	#container > section:nth-child(6){
		top:0;
	}

}



.boxInner{
	display:block;
	overflow:hidden;
	padding-bottom:20px;
	background-color: rgba(2550,255,255,0.75);
	border-radius: 15px;
	color:#333333;
}

.boxInner ul,
.boxInner p{
	display:block;
	overflow:hidden;
	margin:2em 0;
	padding:0 2em;
}

.boxInner ul > li{
	display: flex;
	align-items: center;
	gap: 0 10px;
	position: relative;
	padding: .3em .3em .3em 1.5em;
}

.boxInner ul > li::before,
.boxInner ul > li::after {
	position: absolute;
	content: '';
}

.boxInner ul > li::before {
	left: 0;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background-color: #d02625;
}

.boxInner ul > li::after {
	left: .6em;
	transform: translateX(-75%) rotate(-45deg);
	width: .3em;
	height: .3em;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
}

.boxInner img{
	width:calc(100% - 4em);
	height: auto;
}


.boxInner + img{
	width:260px;
	height: auto;
	position:absolute;
	top: -100px;
	right: -90px;
	animation: fluffy 1s infinite;
}

#container > section:nth-child(2) .boxInner + img{
	animation-delay: 250ms;
}

#container > section:nth-child(3) .boxInner + img{
	animation-delay: 350ms;
}

#container > section:nth-child(4) .boxInner + img{
	animation-delay: 450ms;
}

#container > section:nth-child(5) .boxInner + img{
	animation-delay: 550ms;
}


@keyframes fluffy {
	0%, 100% {
		transform: translate(0,0);
	}
	50% {
		transform: translate(0,-20px);
	}
}



/* for Sp --------------------*/
@media screen and (max-width:768px){

	.boxInner{
		padding-bottom:8vw;
		border-radius: 0;
		color:#ffffff;
		background:unset;
	}

	.boxInner ul,
	.boxInner p{
		margin:4vw 0;
		padding:0 4vw;
	}

	.boxInner img{
		width:calc(100% - 16vw);
	}

	.boxInner + img{
		width:50vw;
		height: auto;
		top: -10vw;
		right: -15vw;
	}

	.boxInner > p > a{
		color:#ffff00;
	}

}


.linkBox{
	display:block;
	overflow:hidden;
	font-size:2.4rem;
	font-weight:700;
	margin-top:1em;
}

.linkBox a{
	display:block;
	overflow:hidden;
	width:90%;
	margin:1em auto;
	padding:0.5em 0.5em;
	font-size:2.1rem;
	line-height:125%;
	text-align:left;
	color:#ffffff;
	text-decoration:none;
	background: linear-gradient(to bottom,  #ffc578 0%,#fb9d23 100%);
	border-radius:50px;
	box-shadow: 6px 6px 6px rgba(0,0,0,0.4);
}

.linkBox a > *{
	position:relative;
	vertical-align:middle;
}

.linkBox a > img{
	width:auto;
	height:2.5em;
	margin-left:1.5em;
	margin-right:0.5em;
}
.linkBox a > span{
	display:inline-block;
	overflow:hidden;
}

/* for Sp --------------------*/
@media screen and (max-width:768px){

	.linkBox{
		font-size:2.4rem;
		margin-top:0;
		padding:4vw;
	}

	.linkBox a{
		width:90%;
		font-size:1.8rem;
		line-height:125%;
		text-align:left;
	}

	img.gmlogo{
		width:50vw;
		height:auto;
	}

}



/* for Sp --------------------*/
@media screen and (max-width:768px){

}

/* for Tb --------------------*/
@media screen and (min-width: 751px) {


}

/* for PC --------------------*/
@media screen and (min-width: 751px) {


}

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

 フッタ
 
***********************************/
footer{
	display:block;
	overflow:hidden;
	text-align:center;
	position:relative;
	z-index:50;
}

address{
	margin:1em 0;
	font-size:1.4rem;
	color:#ffffff;
	line-height:125%;
}