@charset "UTF-8";

#content{
	opacity: 1;
	background: none;
}

/*============================================================================================================================================================
==============================================================================================================================================================

	top

==============================================================================================================================================================
============================================================================================================================================================*/
.top {
	height: 700px;
	position: relative;
	background-image:
	url(../images/bg_circle.svg),
	repeating-conic-gradient(
		#dc5852 0deg 90deg,
		#dc6966 90deg 180deg,
		#dc5852 180deg 270deg,
		#dc6966 270deg 360deg
	);
	background-size:658px auto, 100px 100px;
	background-repeat: no-repeat, repeat;
	background-position: center bottom -100px, center;


	& .inner{
		margin: auto;
		width: 660px;
        height: 100%;
		position: relative;

		& .cloud{
			position: absolute;
			bottom: 50px;

			&.cloud_1{
				width: 500px;
				left: -620px;
			}
			&.cloud_2{
				width: 500px;
				right: -260px;
			}
			&.cloud_3{
				width: 500px;
				right: -870px;
			}
		}
	}

	&::before {
		content: "";
		width: 100%;
		height: 85px;
		position: absolute;
		bottom: 0;
		left: 0;
		background: url(../images/bg_cloud_gold.svg) top center / auto 85px;
	}
}

/* ================================ スマホ ================================ */
@media all and (max-width: 767px) {

	.top {
		height: 400px;
		position: relative;
		background-size:360px auto, 50px 50px;
		background-repeat: no-repeat, repeat;
		background-position: center bottom -50px, center;

		& .inner{

			& .cloud{
				bottom: 45px;

				&.cloud_1{
					display: none;
				}
				&.cloud_2{
                    width: 280px;
                    right: 50px;
					bottom: 20px;
				}
				&.cloud_3{
					display: none;
				}
			}
		}

		&::before {
			height: 55px;
			background: url(../images/bg_cloud_gold.svg) top center / auto 55px;
		}
	}
}

/*============================================================================================================================================================
==============================================================================================================================================================

	bottom

==============================================================================================================================================================
============================================================================================================================================================*/
.bottom {
	padding: 20px 0 100px;
	background-color: #fff;
	position: relative;
	z-index: 2;

	/* ========== ボタン ========== */
	& .omikuji a,
	& .aisatsu a {
		padding: 20px 60px;
		display: inline-block;
		position: relative;
		background-color: var(--color-main);
		color: #fff;
		font-weight: 700;
		letter-spacing: 0.15em;
		border-radius: 14px;
		transition: background-color 500ms;
		animation: vertical 2s linear infinite;
		line-height: 1.8;

		&:hover {
			background-color: var(--color-red);
		}
		
		&::after {
			content: "";
			width: 19px;
			height: 19px;
			position: absolute;
			top: 50%;
			right: 20px;
			transform: translateY(-50%);
			background: url(../images/arrow_right_white.svg) no-repeat center / cover;
		}
	}

	/* ========== おみくじのとこ ========== */
	& .omikuji {
		position: relative;
		text-align: center;

		& img {
			width: 380px;
			position: absolute;
			bottom: calc(100% - 5px);
			left: 50%;
			transform: translateX(-50%);
		}
		& a{
			font-size: 2rem;
			animation: vertical 2s linear infinite;
		}
	}

	/* ========== 挨拶のとこ ========== */
	& .aisatsu {
		margin-top: 50px;
		text-align: center;

		& .fukidashi{
			padding: 0 40px;
			display: inline-block;
			position: relative;
			line-height: 1.8;
			font-weight: 700;
			font-size: 1.5rem;

			& em{
				color: var(--color-red);
				font-style: normal;
			}

			&::before,&::after{
				content: "";
				position: absolute;
				width: 22px;
				height: 35px;
				bottom: 0;
				background-size: cover;
			}
			&::before{
				background-image: url(../images/fukidashi_left.svg);
				left: 0;
			}
			&::after{
				background-image: url(../images/fukidashi_right.svg);
				right: 0;
			}
		}

		& a{
			margin-top: 25px;
			font-size: 1.8rem;
			animation: vertical 2s linear infinite 0.8s;
		}
	}

	/* ========== バナー ========== */
	& .banner{
		margin-top: 50px;
		text-align: center;
		font-size: 0;
		color: transparent;

		& img{
			max-width: 350px;
			width: 100%;
			height: auto;
		}

		& span{
			display: none;
		}
	}
}

/* ================================ スマホ ================================ */
@media all and (max-width: 767px) {
	.bottom {
		padding: 15px 20px 50px;

		/* ========== ボタン ========== */
		& .omikuji a,
		& .aisatsu a {
			padding: 15px 40px;
			font-size: 1.6rem;
			border-radius: 10px;

			&::after{
				right: 15px;
				width: calc(19px/1.2);
				height: calc(19px/1.2);
			}
		}

		/* ========== おみくじのとこ ========== */
		& .omikuji {
			& img {
				width: 63%;
			}
		}

		/* ========== 挨拶のとこ ========== */
		& .aisatsu {
			margin-top: 40px;

			& .fukidashi {
				padding: 0 30px;
				font-size: 1.2rem;
				
				&::before,&::after{
					content: "";
					position: absolute;
					width: calc(22px/1.2);
					height: calc(35px/1.2);
					bottom: 0;
				}
			}

			& a {
				margin-top: 18px;
			}
		}

		/* ========== バナー ========== */
		& .banner{
			margin-top: 30px;
		}
	}
}

@keyframes vertical {
	0% {transform: translate(0px, 3px);}
	10% {transform: translate(0px, -3px);}
	15% {transform: translate(0px, 3px);}
	20% {transform: translate(0px, -3px);}
	25% {transform: translate(0px, 0px)}
}