*, ::before, ::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
/*	outline: 1px solid blue;*/
}

html {
	font-size: 18px;
    scroll-behavior: smooth;
}

body {
	font-size: 16px;
	line-height: 1.7;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #2f2f2f;
	text-align: center;
}

.wrapper {
    max-width: 750px;
	margin: 0 auto;
	position: relative;
}

a {
	text-decoration: none;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #1f112b;
}

li {
	list-style-type: none;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #1f112b;
}

img {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

span {
	white-space: nowrap;
}


.header-top {
	width: 100%;
	height: auto;
	position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    z-index: 100;
	opacity: 0;
	animation: slideDown 0.5s linear forwards;
}
@keyframes slideDown {
	0% {
	  transform: translateY(-200px);
	  opacity: 0;
	}
	100% {
	  transform: translateY(0);
	  opacity: 1;
	}
}


.fv {
	background-color: #fff7ec;
	background-image: url("../img/bg-mv.png");
	background-size: contain;
	background-position: top;
	position: relative;
	padding: 30% 0 0;
	overflow: hidden;
}

.fv-img {
	width: 54%;
    height: auto;
    position: relative;
    margin: 4% 0 0 -2%;
    z-index: 1;
	opacity: 0;
	animation: slideRight 0.5s linear 0.5s forwards;
}
@keyframes slideRight {
	0% {
		transform: translateX(-200px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}


.fv-catch {
	width: 65%;
    height: auto;
    position: absolute;
    top: 26%;
    right: 1%;
	z-index: 2;
	opacity: 0;
	animation: zoomOut 0.5s linear 1.1s forwards;
}
@keyframes zoomOut {
    0% {
        transform: scale(1.6);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.fv-catch-bg {
    width: 78%;
    height: auto;
    position: absolute;
    top: 18%;
    right: -7%;
	z-index: 0;
	opacity: 0;
	animation: zoomIn 0.4s linear 0.5s forwards;
}
@keyframes zoomIn {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
		opacity: 1;
    }
}


.fv-bottom {
	position: relative;
    margin-top: -15%;
	z-index: 1;
	animation: slideUp 0.5s linear forwards;
}
@keyframes slideUp {
	0% {
	  transform: translateY(200px);
	  opacity: 0;
	}
	100% {
	  transform: translateY(0);
	  opacity: 1;
	}
}


.choose {
    background-image:
		url(../img/bg-top.png),
		linear-gradient(to bottom, rgba(230, 229, 198, 0) 0%, rgba(230, 229, 198, 1) 4%);
    background-size: contain;
    background-position: bottom center;
    padding: 12% 0 2%;
    margin-top: -34%;
    position: relative;
    z-index: 99;
}
.choose-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 0;
}

.choose .icon-rat img {
	width: 83%;
	margin: -8px 0 0;
	transform-origin: center bottom;
    animation: yurayura 2.8s linear infinite;
}
.choose .icon-ox img {
	width: 85%;
	margin: 1px 0 0;
	transform-origin: center bottom;
    animation: yurayura 2.8s linear infinite;
}
.choose .icon-tiger img {
	width: 85%;
	margin: 4px 0 0;
	transform-origin: center bottom;
    animation: yurayura 2.8s linear infinite;
}
.choose .icon-rabbit img {
	width: 83%;
	margin: -20px 0 0;
	transform-origin: center bottom;
    animation: yurayura 2.8s linear infinite;
}
.choose .icon-dragon img {
	width: 85%;
	margin: 4px 0 0;
	transform-origin: center bottom;
    animation: yurayura 2.8s linear infinite;
}
.choose .icon-snake img {
	width: 86%;
	margin: 44px 0 0;
	transform-origin: center bottom;
    animation: yurayura 2.8s linear infinite;
}
.choose .icon-horse img {
	width: 85%;
	margin: 22px 0 0;
	transform-origin: center bottom;
    animation: yurayura 2.8s linear infinite;
}
.choose .icon-sheep img {
	width: 90%;
	margin: 35px 0 0;
	transform-origin: center bottom;
    animation: yurayura 2.8s linear infinite;
}
.choose .icon-monkey img {
	width: 88%;
	margin: 40px 0 0;
	transform-origin: center bottom;
    animation: yurayura 2.8s linear infinite;
}
.choose .icon-rooster img {
	width: 85%;
	margin: 4px 0 0;
	transform-origin: center bottom;
    animation: yurayura 2.8s linear infinite;
}
.choose .icon-dog img {
	width: 85%;
	margin: 16px 0 0;
	transform-origin: center bottom;
    animation: yurayura 2.8s linear infinite;
}
.choose .icon-boar img {
	width: 85%;
    margin: 25px 0 0;
	transform-origin: center bottom;
    animation: yurayura 2.8s linear infinite;
}
@keyframes yurayura {
  0% , 100%{
      transform: rotate(4.5deg);
  }
  50%{
      transform: rotate(-4.5deg);
  }
}


footer li {
	text-align: left;
	padding: 3%;
	border-bottom: 1px solid rgba(165, 165, 165, 0.5);
}
footer p {
	background-color: #314251;
	color: #fff;
	font-size: 10px;
	padding: 1% 0;
}




/*result*/

.result {
	background-color: #fff7ec;
	background-image: url("../img/bg-detail.png");
	    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 1% 0% 8%;
	position: relative;
	overflow: hidden;
}

.result .icon-rat {
	width: 26%;
	position: absolute;
	top: 14%;
	left: 0;
	right: 0;
	margin: auto;
	animation: zoomOut 1s ease-out forwards;
}
.result .icon-ox {
	width: 27%;
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	margin: auto;
	animation: zoomOut 1s ease-out forwards;
}
.result .icon-tiger {
	width: 27%;
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	margin: auto;
	animation: zoomOut 1s ease-out forwards;
}
.result .icon-rabbit {
	width: 26%;
	position: absolute;
	top: 12%;
	left: 0;
	right: 0;
	margin: auto;
	animation: zoomOut 1s ease-out forwards;
}
.result .icon-dragon {
	width: 26%;
	position: absolute;
	top: 14%;
	left: 0;
	right: 0;
	margin: auto;
	animation: zoomOut 1s ease-out forwards;
}
.result .icon-snake {
	width: 28%;
	position: absolute;
	top: 16%;
	left: 0;
	right: 0;
	margin: auto;
	animation: zoomOut 1s ease-out forwards;
}
.result .icon-horse {
	width: 28%;
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	margin: auto;
	animation: zoomOut 1s ease-out forwards;
}
.result .icon-sheep {
	width: 29%;
	position: absolute;
	top: 16%;
	left: 0;
	right: 0;
	margin: auto;
	animation: zoomOut 1s ease-out forwards;
}
.result .icon-monkey {
	width: 29%;
	position: absolute;
	top: 16%;
	left: 0;
	right: 0;
	margin: auto;
	animation: zoomOut 1s ease-out forwards;
}
.result .icon-rooster {
	width: 27%;
	position: absolute;
	top: 14%;
	left: 0;
	right: 0;
	margin: auto;
	animation: zoomOut 1s ease-out forwards;
}
.result .icon-dog {
	width: 28%;
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	margin: auto;
	animation: zoomOut 1s ease-out forwards;
}
.result .icon-boar {
	width: 27%;
	position: absolute;
	top: 16%;
	left: 0;
	right: 0;
	margin: auto;
	animation: iconZoomOut 1s ease-out forwards;
}
@keyframes iconZoomOut {
    0% {
        transform: scale(1.6);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.ring {
	width: 48%;
    margin: 9% auto 0;
	animation: rotateAnimation 12s linear infinite;
}
@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.cloud-left {
	width: 23%;
	position: absolute;
	top: 25%;
	left: 1%;
	opacity: 0;
	animation: cloudSlideRight 0.8s ease-out 0.5s forwards;
}
@keyframes cloudSlideRight {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
	opacity: 1;
  }
}

.cloud-right {
	width: 23%;
	position: absolute;
	top: 38%;
	right: 1%;
	opacity: 0;
	animation: cloudSlideLeft 0.8s ease-out 0.5s forwards;
}
@keyframes cloudSlideLeft {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
	opacity: 1;
  }
}


.text-rat {
    width: 82%;
    margin: 5% auto 5%;
}
.text-ox {
    width: 82%;
    margin: 5% auto 5%;
}
.text-tiger {
    width: 82%;
    margin: 5% auto 5%;
}
.text-rabbit {
    width: 82%;
    margin: 5% auto 5%;
}
.text-dragon {
    width: 82%;
    margin: 6% auto 6%;
}
.text-snake {
    width: 82%;
    margin:9% auto 9%;
}
.text-horse {
    width: 82%;
    margin: 6% auto 6%;
}
.text-sheep {
    width: 82%;
    margin: 6% auto 6%;
}
.text-monkey {
    width: 82%;
    margin: 6% auto 6%;
}
.text-rooster {
    width: 82%;
    margin: 5% auto 5%;
}
.text-dog {
    width: 82%;
    margin: 9% auto 9%;
}
.text-boar {
    width: 82%;
    margin: 9% auto 9%;
}


.mosaic {
	width: 82%;
    margin: 0 auto;
}



.form {
	background-color: #e6e5c6;
}
form {
	width: 85%;
	margin: 4% auto 0;
	text-align: left;
	font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-size: 18px;
	font-weight: 600;
}
.required {
	background-color: #e6390e;
    border-radius: 2px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 2px 6px;
    margin: 0 5px 0 1px;
}
.gender-select {
	width: 100%;
    padding: 3%;
    margin: 1% auto 4%;
    border-radius: 5px;
    border: 2px solid #d4c46f;
    background-color: #fff;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
    color: #2f2f2f;
    cursor: pointer;
    appearance: none;
    outline: none;
}  
.blood-box {
	position: relative;
}
.blood-box::after {
	content: "";
	position: absolute;
	right: 3%;
	top: calc(50% + -9%);
	transform: translateY(-50%) rotate(90deg);
	border-style: solid;
	border-width: 8px 0 8px 10px;
	border-color: transparent transparent transparent #d4c46f;
	pointer-events: none;
}
.blood-select {
    width: 100%;
    padding: 3%;
    margin: 1% auto 4%;
    border-radius: 5px;
    border: 2px solid #d4c46f;
    background-color: #fff;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
    color: #2f2f2f;
    cursor: pointer;
    appearance: none;
    outline: none;
}
.birth-selects {
	width: 100%;
    height: auto;
    margin: 1% auto 4%;
    display: flex;
    gap: 2%;
}
.year-box {
	position: relative;
	width: 42%;
}
.birth-year {
    width: 100%;
    padding: 6%;
    border-radius: 5px;
    border: 2px solid #d4c46f;
    background-color: #fff;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
    color: #2f2f2f;
    cursor: pointer;
    appearance: none;
    outline: none;
}
.month-box,.day-box {
	position: relative;
	width: 28%;
}
.year-box::after,.month-box::after,.day-box::after {
    content: "";
	position: absolute;
	right: 10%;
	top: calc(50% + 2%);
	transform: translateY(-50%) rotate(90deg);
	border-style: solid;
	border-width: 8px 0 8px 10px;
	border-color: transparent transparent transparent #d4c46f;
	pointer-events: none;
}
.birth-month,.birth-day {
	width: 100%;
    padding: 9%;
    border-radius: 5px;
    border: 2px solid #d4c46f;
    background-color: #fff;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
    color: #2f2f2f;
    cursor: pointer;
    appearance: none;
    outline: none;
}
.name-box {
	width: 100%;
	margin: 1% auto 4%;
	border-radius: 5px;
	border: 2px solid #d4c46f;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	padding: 3%;
	font-size: 18px;
}
.name-box:focus {
	outline: 2px solid #d4c46f;
}
.attention-text {
    font-weight: 500;
    font-size: 16px;
    margin-top: -2%;
}
form button {
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	margin: 4% auto 7%;
	animation: bounce 2s ease infinite normal 0s none running;
}
@keyframes bounce {
	0%, 40%, 60%, 100% {
		transform: scale(0.98);
	}
	50%, 70% {
		transform: scale(1.14);
	}
}


.warning {
	background-color: #fff4f0;
	padding-bottom: 5%;
}
.warning-box {
	width: 90%;
    margin: 5% auto 0;
}




/*support*/

.header-info {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.header-info h2 {
	font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-size: 26px;
	font-weight: 600;
	color: #2f2f2f;
	text-shadow:
		/* 外側 1px */
		1px 0 0 #fff,       /* 右に1px（→） */
		-1px 0 0 #fff,      /* 左に1px（←） */
		0 1px 0 #fff,       /* 下に1px（↓） */
		0 -1px 0 #fff,      /* 上に1px（↑） */
		1px 1px 0 #fff,     /* 右下に1px（↘） */
		-1px 1px 0 #fff,    /* 左下に1px（↙） */
		1px -1px 0 #fff,    /* 右上に1px（↗） */
		-1px -1px 0 #fff,   /* 左上に1px（↖） */

		/* 外側 2px */
		2px 0 0 #fff,       /* 右に2px（→） */
		-2px 0 0 #fff,      /* 左に2px（←） */
		0 2px 0 #fff,       /* 下に2px（↓） */
		0 -2px 0 #fff,      /* 上に2px（↑） */
		2px 2px 0 #fff,     /* 右下に2px（↘） */
		-2px 2px 0 #fff,    /* 左下に2px（↙） */
		2px -2px 0 #fff,    /* 右上に2px（↗） */
		-2px -2px 0 #fff,   /* 左上に2px（↖） */

		0 4px 5px #314251; /* 影 */	
	letter-spacing: 2px;
	position: absolute;
	top: 32%;
	left: 0;
	right: 0;
	margin: auto;
	animation: supportZoomOut 1s ease-out forwards;
}
@keyframes supportZoomOut {
    0% {
        transform: scale(1.4);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.info {
	background-color: #fff7ec;
	overflow: hidden;
	padding: 18% 6% 0;
	font-size: 14px;
}
.info-box p {
	margin: 4% 0;
	text-align: left;
}
.info-box li {
	margin: 4% 0;
	text-align: left;
	list-style-type: disc;
	list-style-position: inside;
	padding-left: 2em;
	text-indent: -1.5em;
}
.back {
	margin: 8% 0;
	font-size: 14px;
}
.back a {
	color: #b69500;
	border-bottom: 1px solid #b69500;
}



/*thanks*/

.thanks {
	background-image: url(../img/bg-thanks.png);
    background-size: cover;
    background-position: center;
    padding: 14% 12%;
}
.thanks-text {
    width: 88%;
    margin: 0 auto;
}




@media screen and (max-width: 600px) {

	body {
		font-size: 14px;
	}


	.choose .icon-rat img {
		margin: -6px 0 0;
		transform-origin: center bottom;
	}
	.choose .icon-ox img {
		margin: -2px 0 0;
		transform-origin: center bottom;
	}
	.choose .icon-tiger img {
		margin: 0;
		transform-origin: center bottom;
	}
	.choose .icon-rabbit img {
		margin: -8px 0 0;
		transform-origin: center bottom;
	}
	.choose .icon-dragon img {
		margin: 3px 0 0;
		transform-origin: center bottom;
	}
	.choose .icon-snake img {
		margin: 23px 0 0;
		transform-origin: center bottom;
	}
	.choose .icon-horse img {
		margin: 17px 0 0;
		transform-origin: center bottom;
	}
	.choose .icon-sheep img {
		margin: 23px 0 0;
		transform-origin: center bottom;
	}
	.choose .icon-monkey img {
		margin: 26px 0 0;
		transform-origin: center bottom;
	}
	.choose .icon-rooster img {
		margin: 9px 0 0;
		transform-origin: center bottom;
	}
	.choose .icon-dog img {
		margin: 15px 0 0;
		transform-origin: center bottom;
	}
	.choose .icon-boar img {
		margin: 19px 0 0;
		transform-origin: center bottom;
	}


	.result .icon-ox {
		width: 27%;
		position: absolute;
		top: 14%;
		left: 0;
		right: 0;
		margin: auto;
		animation: zoomOut 1s ease-out forwards;
	}
	.result .icon-tiger {
		width: 27%;
		position: absolute;
		top: 14%;
		left: 0;
		right: 0;
		margin: auto;
		animation: zoomOut 1s ease-out forwards;
	}
	.result .icon-monkey {
		width: 29%;
		position: absolute;
		top: 15%;
		left: 0;
		right: 0;
		margin: auto;
		animation: zoomOut 1s ease-out forwards;
	}


	.cloud-right {
		top: 36%;
	}


	.text-rat {
		margin: 6% auto 6%;
	}
	.text-ox {
		margin: 6% auto 6%;
	}
	.text-tiger {
		margin: 6% auto 6%;
	}
	.text-rabbit {
		margin: 6% auto 6%;
	}
	.text-snake {
		margin: 6% auto 6%;
	}
	.text-monkey {
		width: 70%;
	}
	.text-rooster {
		margin: 6% auto 6%;
	}
	.text-dog {
		margin: 6% auto 6%;
	}
	.text-boar {
		margin: 6% auto 6%;
	}


	form {
		width: 90%;
		font-size: 14px;
	}
	.required {
		font-size: 12px;
	}
	.gender-select {
		font-size: 14px;
	}
	.blood-select {
		font-size: 14px;
	}
	.birth-year {
		font-size: 14px;
	}
	.birth-month,.birth-day {
		font-size: 14px;
	}
	.name-box {
		font-size: 14px;
	}
	.attention-text {
		font-size: 12px;
	}


	footer li {
        font-size: 12px;
    }
	footer p {
		font-size: 9px;
	}


	.info {
	    padding: 18% 4% 0;
	}
	.header-info h2 {
	    font-size: 18px;
		top: 28%;
	}
}