@import url(reset.css);

img {
	vertical-align: bottom;
}

body {
	font-family: "source-han-sans-jp-variable", sans-serif;
	font-variation-settings: "wght" 400;
	font-size: 14px;
	line-height: 1.5;
}


.loading {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background-color: rgb(5, 221, 245);
	transition: all .5s ease;
}

.loading .animation {
	position: fixed;
	width: 300px;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.loading .BG1,
.loading .BG2 {
	width: 100vw;
	height: 100vh;
}

.loaded {
	top: -100%;
	opacity: 15%;
	visibility: hidden;
}

/* キービジュアル */
.KV {
	height: 85vh;
	background: url(../images/KV_bg.jpg ) center center/ cover no-repeat;
	/* position: relative; */
	overflow: hidden;
	position: relative;
}

.KV_copy {
	width: 85vw;
	max-width: 500px;
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translateX(-50%) translateY(-30%);
	z-index: 7000;
}

.KV_arrow {
	position: absolute;
	width: 150px;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
}

/* 桜 */
.sakura {
	position: relative;
	padding: 0;
	margin: 0;
	width: 100vw;
	height: 90vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sakura li {
	width: 18px;
	position: absolute;
	list-style: none;
	top: -50px;
	animation: fall 4s linear infinite, rotate1 2s ease-in-out infinite alternate;
}

@keyframes fall {
	to {
		top: 120%;
	}
}

@keyframes rotate1 {
	from {
		transform: translateX(0px) rotate(0deg);
	}

	to {
		transform: translateX(200px) rotate(-80deg) rotateX(180deg);
	}
}

@keyframes rotate2 {
	from {
		transform: translateX(200px) rotate(-45deg);
	}

	to {
		transform: translateX(0px) rotate(0deg);
	}
}

.sakura li:nth-child(1) {
	left: 0;
	animation: fall 10s linear infinite, rotate1 3s ease-in-out infinite alternate;
}

.sakura li:nth-child(2) {
	left: 5vw;
	animation: fall 15s linear infinite, rotate1 2s ease-in-out infinite alternate;
}

.sakura li:nth-child(3) {
	left: 15vw;
	animation: fall 9s linear infinite, rotate1 3.5s ease-in-out infinite alternate;
}

.sakura li:nth-child(4) {
	left: 30vw;
	animation: fall 8s linear infinite, rotate2 4s ease-in-out infinite alternate;
}

.sakura li:nth-child(5) {
	left: 40vw;
	animation: fall 10s linear infinite, rotate1 4s ease-in-out infinite alternate;
}

.sakura li:nth-child(6) {
	left: 55vw;
	animation: fall 11s linear infinite, rotate2 3s ease-in-out infinite alternate;
}

.sakura li:nth-child(7) {
	left: 65vw;
	animation: fall 7s linear infinite, rotate2 3.5s ease-in-out infinite alternate;
}

.sakura li:nth-child(8) {
	left: 50vw;
	animation: fall 7s linear infinite, rotate1 3s ease-in-out infinite alternate;
}

main {
	text-align: center;
}

/* SP用 */

/* ヘッダ */
header {
	/* background-color: #333; */
	height: 50px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 10px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8000;
}

header img {
	width: 190px;
}

header .web_btn {
	display: none;
}


/* sticky CTA */
div.sticky {
	background-color: #00D2FF;
	padding: 15px;
	position: sticky;
	bottom: 0;
	left: 0;
	z-index: 5000;
}

.web_btn {
	background-color: #FF196F;
	color: #fff;
	font-size: 16px;
	line-height: 48px;
	font-variation-settings: "wght" 700;
	border: #333 1px solid;
	border-radius: 30px;
	display: inline-block;
	width: 61vw;
	min-width: 250px;
	box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
}

.sticky p:first-child {
	margin-bottom: 20px;
}

.web_btn:hover {
	transform: translateY(1px);
	background-color: hsl(338, 94%, 45%);
	box-shadow: none;
}

.sticky .hidden4sp {
	display: none;
}



/* 悩ましいエリア */
.worries {
	background: linear-gradient(#fbfbfb 0%, #5BB7E2 100%);
	position: relative;
}

/* skew */
.worries::before,
.worries::after {
	content: "";
	width: 50%;
	height: 100%;
	position: absolute;
	bottom: 0;
	z-index: -1;
	transform-origin: top;
	background-color: #5BB7E2;
}

.worries::before {
	left: 0;
	transform: skewY(20deg);
	transform-origin: left;
}

.worries::after {
	left: 50%;
	transform: skewY(-20deg);
	transform-origin: right;
}

.worries h1 {
	font-size: 22px;
	font-variation-settings: "wght" 800;
	padding-top: 60px;
}

.worries div {
	overflow-x: hidden;
}

.worries dl dt {
	margin-top: 60px;
}

.worries dl dd:last-child {
	padding-bottom: 60px;
}

.worries dl dd {
	margin-top: 10px;
	font-variation-settings: "wght" 650;
}


.slidein {
	visibility: hidden;
}

.slidein.is-show {
	animation: slidein 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	visibility: visible;
}

@keyframes slidein {
	0% {
		transform: translateX(180px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
	}

	40%,
	100% {
		opacity: 1;
	}
}



/* 背景_グラデ */
div.gradation1 {
	background: linear-gradient(transparent 0%, #fff 100%), url(../images/confetti.jpg) center center/ cover no-repeat;
	height: 250px;
	display: block;
	position: relative;
	z-index: -5;
}

.campaign div.gradation2 {
	background: linear-gradient(#fff 0%, transparent 100%), url(../images/confetti.jpg) center center/ cover no-repeat;
	height: 200px;
	display: block;
}


/* main内ロゴ設定 */
.logo_blk {
	width: 50%;
	max-width: 450px;
}


/* キャンペーン内容 */
.campaign {
	padding-top: 10px;
}

.campaign p.copy {
	line-height: 1.8;
	padding-bottom: 50px;
}

.blueline {
	padding: 0 5px;
}

.blueline.is-show {
	background: linear-gradient(transparent 60%, rgb(102, 207, 255, 100) 60%) no-repeat;
	animation: blueline .3s ease-out;
}

@keyframes blueline {
	0% {
		background-size: 0% 100%;
	}

	100% {
		background-size: 100% 100%;
	}
}


/* キャンペーン内文字装飾 */
.campaign .emphasis,
.introduction .emphasis {
	font-variation-settings: "wght" 700;
	font-size: 20px;
}

.campaign p .point {
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	color: #FF196F;
}




/* 黄色いとこ */
.campaign .yellow_box {
	background-color: #FFFC43;
	margin: 0 20px;
	border: #333 1px solid;
	border-radius: 15px;
}

.campaign .yellow_box p {
	font-size: 24px;
	font-variation-settings: "wght" 800;
	margin-top: 30px;
	margin-bottom: 30px;
}

.campaign .yellow_box p .small {
	font-size: 16px;
	font-variation-settings: "wght" 500;
}

.campaign .yellow_box p .point {
	font-size: 64px;
	line-height: 0.75;
}


/* ▼ */
.campaign .arrow {
	display: block;
	width: 20px;
	height: 16px;
	background: #000000;
	clip-path: polygon(0 0%, 50% 0%, 50% 0, 50% 0, 50% 0%, 100% 0%, 50% 100%);
	transform: scale(.8);
}

.campaign .arrow1 {
	margin: 20px auto 5px auto;
}

.campaign .arrow2 {
	margin: 0 auto 10px auto;
}

/*　キャンペーン1~3 */
.campaign .main h1 {
	font-size: 20px;
	font-variation-settings: "wght" 700;
	display: inline-block;
	border: #333 1px solid;
	padding: 5px 10px;
	margin: 20px 0 35px;
}

.campaign .main p.normal {
	font-size: 16px;
}

.campaign .main p .yen {
	font-size: 40px;
}

.campaign .main p .six {
	font-size: 32px;
}

.campaign .main p .free {
	font-size: 22px;
}

.campaign .main .cp{
	visibility: hidden;
}

.campaign .main .cp1.is-show, .campaign .main .cp2.is-show, .campaign .main .cp3.is-show{
	animation: none;
	visibility: inherit;
}
.campaign .main .cp.is-show{
	animation: cp_animation 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	visibility: visible;
}
@keyframes cp_animation {
	0% {
		scale: 0;
		opacity: 0;
	}

	80%{
		scale: 1.1;
	}

	100% {
		scale: 1;
	}

	40%,
	100% {
		opacity: 1;
	}
}

/* 注意事項等リンク */
.warning {
	font-size: 12px;
}

.warning::before {
	content: "※";
}

.campaign .main p.warning {
	margin-top: 20px;
}

.campaign .main p.warning::before {
	margin-right: 3px;
}

.campaign .main p.warning a {
	border-bottom: #333 1px solid;
	position: relative;
	z-index: 0;
}

.campaign .main p.warning a::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 0%;
	height: 100%;
	background-color: #00D2FF;
	transition: all .3s ease-out;
}

.campaign .main p.warning a:hover {
	border: none;
}

.campaign .main p.warning a:hover::before {
	width: 100%;
}

.introduction p.warning {
	width: 300px;
	margin: 15px auto 50px;
	text-align: left;
	padding-left: 1em;
	text-indent: -1em;
}

.campaign .main .cp {
	background-color: #f0f0f0;
	border-radius: 15px;
	margin: 40px 25px;
	padding: 0 10px 25px;
}



/* セールスポイント */
.introduction {
	background-color: #FFFEBC;
	padding: 60px 0 10px;
	line-height: 1.8;
	font-size: 16px;
}

.introduction img {
	margin-bottom: 45px;
}

.introduction p a {
	border: solid 1px #000;
	background-color: #fff;
	padding: 5px 15px;
	display: inline-block;
	width: 300px;
	margin: 0 auto;

	position: relative;
	z-index: 0;
	overflow: hidden;
}

.introduction p a::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;left: 0;
	width: 0;height: 100%;
	transition: .25s;
	
	background-color: #FFFC43;
	z-index: -1;
}
.introduction p a:hover:before {
width: 100%;
}

.introduction p a::after {
	margin-left: 5px;
	content: url(../images/popup.svg);
}

.introduction img.graph{
	width: 90vw;
	padding: 30px 0 15px;
}
.introduction img.illust{
	width: 200px;
	padding-top: 20px;
}




/* デカCTAボタンエリア */

.contact {
	background-color: #ffc042;
	background-image: radial-gradient(#FFFEBC 15%, transparent 15%), radial-gradient(#FFFEBC 15%, transparent 15%);
	background-size: 150px 150px;
	background-position: 0 0, 75px 75px;
	padding: 40px 0 60px;
}
.contact {
	background-color: #FFFEBC;
	background-image: radial-gradient(#fffc43 15%, transparent 15%), radial-gradient(#fffc43 15%, transparent 15%);
	background-size: 50px 50px;
	background-position: 0 0, 25px 25px;
	padding: 40px 0 60px;
}

.contact a {
	display: block;
	background-color: #FF196F;
	border: #333 2px solid;
	height: 75vw;
	width: 75vw;
	max-width: 400px;
	max-height: 400px;
	margin: 0 auto;

	border-radius: 25px;
	box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.3);

	color: #fff;
	padding: 12px 15px;
}

.contact a:hover {
	transform: translateY(2px);
	background-color: hsl(338, 94%, 45%);
	box-shadow: none;
}

.contact a .container {
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.contact .CTA_btn_web {
	margin-bottom: 50px;
}


/* CTA テキスト設定 */
.contact h1 {
	color: #FF196F;
	padding-bottom: 25px;
}

.contact h1,
.contact h3 {
	font-size: 25px;
	font-variation-settings: "wght" 800;
}

.contact h2 {
	font-size: 16px;
	padding-bottom: 15px;
}

.contact p {
	font-size: 16px;
}

.contact p.phone_num {
	font-family: "din-2014", sans-serif;
	font-size: 40px;
	font-weight: 800;
}
@media only screen and (max-width:380px) {
	.contact p.phone_num {
		font-size: 28px;
	}
}

.contact p.warning {
	font-size: 12px;
	text-align: left;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.5;
	margin-left: 10%;
}




/* CTA　画像設定 */
.contact img {
	margin: 0 auto;
	pointer-events: none;
}

.contact img.web {
	width: 40vw;
	max-width: 250px;
}

.contact img.call {
	width: 25vw;
	max-width: 175px;

}




/* フッタ */
footer {
	height: 75px;
	background: #00D2FF url(../images/sakura5.png) 95% 80% no-repeat;
	padding: 15px 0 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

footer img {
	width: 150px;
	margin: 0 auto;
}

footer p {
	font-size: 10px;
	color: #fff;
	vertical-align: bottom;
}





/* PC用 */
@media only screen and (min-width:960px) {
	.KV{
		height: 90vh;
	}
	.KV_copy {
		width: 43vw;
		max-width: 700px;
		top: 33%;
	}

	/* 改行の調整 */
	.br4sp {
		display: none;
	}



	/* sticky CTA */
	div.sticky .width_adjuster{
		max-width: 1300px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	div.sticky {
		padding: 30px 15vw;
	}

	.web_btn {
		font-size: 24px;
		line-height: 80px;
		height: 80px;
		width: 31vw;
		max-width: 600px;
		min-width: 325px;
		border-radius: 40px;
	}

	.sticky p:first-child {
		margin-bottom: 0;
	}

	.sticky .parent {
		position: relative;
	}

	.sticky .hidden4sp {
		position: absolute;
		display: inline-block;
		line-height: 1;
		font-size: 12px;
		font-variation-settings: "wght" 400;
		bottom: 7px;
		left: 50%;
		transform: translateX(-50%);
		padding-left: 1em;
		text-indent: -1em;
	}

	.sticky .hidden4sp::before {
		content: "※";
		padding-right: 3px;
	}

	/* ヘッダ */
	header {
		height: 80px;
		/* padding: 10px 20px; */
	}

	header img {
		width: 15vw;
		min-width: 190px;
	}

	header .web_btn {
		display: inline-block;
		font-size: 20px;
		line-height: 60px;
		height: 60px;
		width: 20vw;
	}

	/* skew */

	.worries::before {
		transform: skewY(10deg);
	}
	
	.worries::after {
			transform: skewY(-10deg);

	}

	/* 悩ましいエリア */
	.worries .flex_container {
		display: flex;
		align-items: end;
		justify-content: space-between;
		margin: 0 10vw;
		overflow: hidden;
	}

	.worries .flex_container .left {
		padding: 0 40px 0 60px;
	}

	/* アニメーション */
	@keyframes slidein {
	0% {
		scale: 0;
		opacity: 0;
	}

	80%{
		scale: 1.2;
	}

	100% {
		scale: 1;
	}

	40%,
	100% {
		opacity: 1;
	}
}


	/* キャンペーン内容 */
	/* 黄色いところ */
	.campaign .yellow_box {
		width: 75vw;
		margin: 0 auto;
	}


	/* キャンペーン1~3 */
	.campaign .main {
		width: 75vw;
		margin: 55px auto 0;
		display: flex;
		justify-content: space-between;
	}

	.campaign .main h1 {
width: 205px;
margin-left: auto;
margin-right: auto;
	}

	.campaign .main .cp {
		margin: 0;
		width: 24.5vw;

		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}


	.campaign .main p .yen {
		font-size: 36px;
	}

	/* Cp アニメーション */
	.campaign .main .cp.is-show{
		animation: none;
		visibility: inherit;
	}
	.campaign .main .cp1.is-show, .campaign .main .cp2.is-show, .campaign .main .cp3.is-show{
		animation: cp_animation_pc 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
		visibility: visible;
	}
	@keyframes cp_animation_pc {
		0% {
			scale: 0;
			opacity: 0;
		}
	
		80%{
			scale: 1.2;
		}
	
		100% {
			scale: 1;
		}
	
		40%,
		100% {
			opacity: 1;
		}
	}
	
	.introduction img.graph{
		width: 65vw;
	}
	.introduction img.illust{
		width: 200px;
	}



	/* デカCTAボタンエリア */
	.contact{
		padding: 15vh 0;
	}
	.contact .flex_container{
		display: flex;
		justify-content:space-around;
		width: 1000px;
		margin: 0 auto;
	}

	.contact a {
		width: 30vw;
		height: 30vw;
	}

	.contact p.phone_num {
		font-size: 32px;
	}

	/* CTA　画像設定 */
.contact img.web {
	width: 15vw;
}
.contact img.call {
	width: 10vw;
}


/* フッタ */
footer{
	height: 100px;
	position: relative;
}

footer img{
	width: 15vw;
	max-width: 250px;
	position: absolute;
	left: 50px;
	top: 50%;
	transform: translateY(-50%);
}
footer p{
	position: absolute;
right: 50px; bottom: 10px;}

}