*, ::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: #1f112b;
	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: drop 2s linear forwards 0.5s;
}
@keyframes drop {
	0% {
		opacity: 1;
		top: -200px;
	}
	15% {
		opacity: 1;
		top: 0; /* 急落下（速く） */
	}

	/* バウンド1：大きいバウンド */
	22% {
		opacity: 1;
		top: -60px; /* 速く上昇 */
	}
	30% {
		opacity: 1;
		top: -80px; /* 頂点（減速中） */
	}
	34% {
		opacity: 1;
		top: -75px; /* 頂点を通過して下降（加速） */
	}
	38% {
		opacity: 1;
		top: -60px; /* 頂点を通過して下降（加速） */
	}
	42% {
		opacity: 1;
		top: -30px; /* 頂点を通過して下降（加速） */
	}
	45% {
		opacity: 1;
		top: 0; /* 着地（加速） */
	}

	/* バウンド2：小さいバウンド */
	50% {
		opacity: 1;
		top: -28px; /* 速く上昇 */
	}
	56% {
		opacity: 1;
		top: -32px; /* 頂点（少し減速） */
	}
	60% {
		opacity: 1;
		top: -22px; /* 頂点後の下降（加速） */
	}
	63% {
		opacity: 1;
		top: 0; /* 着地 */
	}

	100% {
		opacity: 1;
		top: 0; /* 停止 */
	}
}


.fv {
	background-color: #fcfdff;
	background-image: url("../img/bg-fv.png");
	background-size: cover;
	background-position: center;
	position: relative;
	padding: 30% 0 10%;
	overflow: hidden;
}
.fv-catch {
	width: 58%;
    height: auto;
	position: absolute;
	top: 40%;
    right: 1%;
	z-index: 2;
	opacity: 0;
	animation: zoomOut 0.5s ease-out forwards 0.5s;
}
.fv-catch-bg {
    width: 67%;
    height: auto;
	margin-left: auto;
	opacity: 0;
	animation: slideLeft 0.6s ease-out forwards;
}
.fv-img {
	width: 42%;
    height: auto;
	position: absolute;
	top: 30%;
    left: 1%;
	z-index: 1;
	opacity: 0;
	animation: slideRight 0.6s ease-out forwards;
}
@keyframes zoomOut {
    0% {
        transform: scale(1.6);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes slideLeft {
	0% {
		transform: translateX(200px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slideRight {
	0% {
		transform: translateX(-200px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}


.wave-pink {
	width: 100%;
	margin-top: -5%;
    position: relative;
	z-index: 99;
}


.choose {
	background-color: #ffece5;
	padding-bottom: 5%;
}
.choose-title {
	margin-top: -7%;
	position: relative;
	z-index: 100;
}
.choose-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 0;
}
.choose dt {
	font-family: "bokutoh-ruika", sans-serif;
	font-size: 22px;
	font-weight: 600;
}
.choose dd {
	font-family: "bokutoh-ruika", sans-serif;
	font-size: 14px;
	font-weight: 300;
}

.icon-aries img {
	margin: 23px 0 -3px;
	animation: fuwafuwa 2.4s ease infinite;
}
.icon-taurus img {
	margin: -10px 0 0;
	animation: fuwafuwa 2.4s ease infinite;
}
.icon-gemini img {
	margin: 20px 0 -4px;
	animation: fuwafuwa 2.4s ease infinite;
}
.icon-cancer img {
	margin: -14px 0 0;
	animation: fuwafuwa 2.4s ease infinite;
}
.icon-leo img {
	margin: 10px 0 0;
	animation: fuwafuwa 2.4s ease infinite;
}
.icon-virgo img {
	margin: 21px 0 0;
	animation: fuwafuwa 2.4s ease infinite;
}
.icon-libra img {
	margin: 20px 0 12px;
	animation: fuwafuwa 2.4s ease infinite;
}
.icon-scorpio img {
	margin: -6px 0 0;
	animation: fuwafuwa 2.4s ease infinite;
}
.icon-sagittarius img {
	margin: 6px 0 3px;
	animation: fuwafuwa 2.4s ease infinite;
}
.icon-capricorn img {
	margin: -20px 0 34px 2px;
	scale: 1.03;
	animation: fuwafuwa 2.4s ease infinite;
}
.icon-aquarius img {
	margin: 4px 0 21px;
	animation: fuwafuwa 2.4s ease infinite;
}
.icon-pisces img {
    margin: -14px 0 -4px;
	animation: fuwafuwa 2.4s ease infinite;
}
@keyframes fuwafuwa {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.08);
	}
}




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




/*result*/

.result {
	background-color: #fff4f0;
}
.result-top {
	background-color: #fff4f0;
	background-image: url("../img/bg-detail.png");
	background-size: contain;
	background-position: center;
	padding: 2% 0 1%;
}

.result .top-img {
	width: 50%;
    margin: 0 auto;
	animation: spin 2s forwards ease-out;
}
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  70% {
    transform: rotateY(1980deg); /* 高速5.5回転 */
  }
  100% {
    transform: rotateY(2160deg); /* ゆっくり+0.5回転（合計6回転） */
  }
}

.result dt {
	font-family: "bokutoh-ruika", sans-serif;
	font-size: 22px;
	font-weight: 600;
	-webkit-text-stroke: 5px #fff;
	paint-order: stroke;
}
.result dd {
	font-family: "bokutoh-ruika", sans-serif;
	font-size: 16px;
	font-weight: 400;
	-webkit-text-stroke: 4px #fff;
	paint-order: stroke;
}
.result-bottom {
	padding: 4% 2% 8%;
}


.text-aries {
    width: 100%;
    margin: 0 auto;
}
.text-taurus {
    width: 84%;
    margin: 0 auto;
}
.text-gemini {
    width: 92%;
    margin: 0 auto;
}
.text-cancer {
    width: 92%;
    margin: 0 auto;
}
.text-leo {
    width: 94%;
    margin: 0 auto;
}
.text-virgo {
    width: 78%;
    margin: 0 auto;
}
.text-libra {
    width: 80%;
    margin: 0 auto;
}
.text-scorpio {
    width: 96%;
    margin: 0 auto;
}
.text-sagittarius {
    width: 90%;
    margin: 0 auto;
}
.text-capricorn {
    width: 98%;
    margin: 0 auto;
}
.text-aquarius {
    width: 94%;
    margin: 0 auto;
}
.text-pisces {
    width: 98%;
    margin: 0 auto;
}


.mosaic {
	width: 90%;
	margin: 6% auto 0;
}


.wave-blue {
	width: 100%;
	margin-top: -5%;
	position: relative;
	z-index: 99;
}

.form {
	background-color: #cbd6f5;
}
.form-title {
	margin: -5% 0 5%;
    position: relative;
    z-index: 100;
}
form {
	width: 85%;
	margin: 0 auto;
	text-align: left;
	font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-size: 18px;
	font-weight: 600;
}
.required {
	    background-color: #e0656a;
    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: 4px;
    border: none;
    background-color: #fff;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
    color: #1f112b;
    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 #cbd6f5;
	pointer-events: none;
}
.blood-select {
    width: 100%;
    padding: 3%;
    margin: 1% auto 4%;
    border-radius: 4px;
    border: none;
    background-color: #fff;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
    color: #1f112b;
    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: 4px;
    border: none;
    background-color: #fff;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
    color: #1f112b;
    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 #cbd6f5;
	pointer-events: none;
}
.birth-month,.birth-day {
	width: 100%;
    padding: 9%;
    border-radius: 4px;
    border: none;
    background-color: #fff;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
    color: #1f112b;
    cursor: pointer;
    appearance: none;
    outline: none;
}
.name-box {
	width: 100%;
	margin: 1% auto 4%;
	border-radius: 4px;
	border: none;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	padding: 3%;
	font-size: 18px;
}
.name-box:focus {
	outline: 2px solid #839cdf;
}
.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.95);
	}
	50%, 70% {
		transform: scale(1.1);
	}
}


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




/*support*/

.header-info {
	background-image: url("../img/header-info.png");
	background-size: cover;
	background-position: center;
	padding: 6%;
	position: relative;
}
.header-info::after {
    position: absolute;
    border: 1px solid #fff;
    content: "";
    top: 14px;
    bottom: 14px;
    left: 14px;
    right: 14px;
}
.header-info h2 {
	font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 2px 4px #382d3c;
	letter-spacing: 1px;
}
.info {
	background-color: #fff4f0;
	overflow: hidden;
	padding: 4% 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: #17005a;
	border-bottom: 1px solid #17005a;
}






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

	body {
		font-size: 14px;
	}

	.icon-aries img {
	margin: 13% 0 2%;
	}
	.icon-taurus img {
		margin: 4% 0 8%;
        scale: 1.1;
	}
	.icon-gemini img {
		margin: 8% 0 0;
        scale: 0.95;
	}
	.icon-cancer img {
		margin: 0;
		scale: 0.95;
	}
	.icon-leo img {
		margin: 10% 0 3%;
	}
	.icon-virgo img {
		margin: 8% 0 -2%;
		scale: 0.95;
	}
	.icon-libra img {
		margin: 9% 0 8%;
	}
	.icon-scorpio img {
		margin: 0% 0 2%;
	}
	.icon-sagittarius img {
		margin: 0;
		scale: 0.9;
	}
	.icon-capricorn img {
		margin: -9% 0 12% 3%;
		scale: 1.1;
	}
	.icon-aquarius img {
		margin: -5% 0 6%;
        scale: 0.95;
	}
	.icon-pisces img {
		margin: -10% 0 0;
	}


	.choose dt {
		font-size: 16px;
	}
	.choose dd {
		font-size: 9px;
        letter-spacing: -1px;
	}


	.result dt {
	font-size: 18px;
	}
	.result dd {
		font-size: 12px;
	}


	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: 2% 4% 0;
	}
	.header-info {
		padding: 7%;
	}
	.header-info::after {
		top: 10px;
		bottom: 10px;
		left: 10px;
		right: 10px;
	}
	.header-info h2 {
	    font-size: 18px;
	}
}