@charset "utf-8";
/* SPメニュー表示中のスクロール固定（JSで top を付与） */
body.fixed{
	position: fixed;
	left: 0;
	width: 100%;
	overflow: hidden;
}

#wrapper { 
	background: #AFDBFB;
	position: relative;
}

#hd .hd-ctn nav ul li a:hover { 
	color: #238cc4;
}

#hd .hd-ctn nav ul li a:hover svg { 
	fill: #238cc4;
}

#ft { 
	background: linear-gradient(180deg, #E2F7FD 2.4%, #BEEAFF 100%);
}

/* 選べる5つのululis */
#choose { 
	z-index: 5;
	background: #AFDBFB;
}

#choose .inner{
	position: relative;
	top: -100px;
	background: linear-gradient(180deg, #C5E5FC 0%, #92CAFD 100%);
}

#choose .ctn .caution{
	color: #777;
}

#choose .ctn {
 padding-top: 64px;
}

#choose .ttl { 
	padding: 165px 0 120px; 
	background: url('../img/bg/bg-ttl-choose-aqua.webp') no-repeat 50% 100%/ 1280px auto;
	position: relative;
	top: -100px;
	margin-bottom: -100px;
}

#choose .ttl h2{
	margin-bottom: 0;
}

#choose .ttl img{
	width: 100%;
}

#choose .ttl h2 img { 
	max-width: 400px;
}

#choose .ttl p { 
	color: #fff; 
	font-size: 27px;
	max-width: 377px;
	margin: 0 auto;
}

@media (max-width: 896px) {
	#choose .ttl { 
		background: url('../img/bg/bg-ttl-choose-aqua@sp.webp') no-repeat 50% 100%/ 100% auto;
		background-size: cover;
		padding: 216px 0 210px;
	}

	#choose .ttl p { 
		max-width: 270px;
		margin: -8px auto 0;
	}
	#choose .ttl h2 img{
		max-width: 278px;
	}
}

@media (max-width: 480px) {
	#choose{
		top: 195px;
	}
	#choose .ttl { 
		position: relative;
		padding: 100px 0;
	}
	#choose .ctn{
		padding-top: 32px;
	}
	#choose .inner{
		top: 50px;
		padding-bottom: 80px;
		background: linear-gradient(180deg, #AFDBFB 22.37%, #C3E4FD 71.14%);
	}
	
}

/* footer */
#sns { 
	background: #AFDBFB;
	z-index: 6;
	position: relative;
	top: -100px;
	margin-bottom: -100px;
}

#sns .inner { 
	background: url('../img/bg/bg-sns.webp') no-repeat 50% 100%/ 1280px auto;
	background-size: cover;
	padding: 80px 0 200px;
}

#sns h3 a:hover svg { 
	fill: #238cc4;
}

#sns ul li a:hover svg { 
	fill: #4aadda;
}

#ft{
	background: #AFDBFB;
}


@media (max-width: 480px) {
	#sns{
		top: 180px;
		margin-bottom: 0;
		background: linear-gradient(180deg, #BEEAFF 2.4%, #E2F7FD 100%);
	}
	#sns .inner{
		background: url('../img/bg/bg-sns@sp.webp') no-repeat 50% 100%/ 100% auto;
		background-size: cover;
		padding: 48px 0 100px;
	}
	#ft ul{
		margin: 24px 0 28px;
	}
}

@media (max-width: 480px) {
	#ft{
		top: 180px;
	}
	#ft ul li{
		position: relative;
		border-right: none;
	}

	#ft ul li::after{
		content: "";
		display: block;
		background-color: #7B7B7B;
		width: 1px;
		height: 14px;
		position: absolute;
		top: 2px;
		right: -2px;
	}

	#ft ul li:last-child:after{
		display: none;
	}
	#ft .inner-ft{
		background: linear-gradient(180deg, #E2F7FD 2.4%, #BEEAFF 100%);
		padding: 32px 0 50px;
	}
}