*, ::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: "shippori-mincho", sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #000;
	text-align: center;
}

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

a {
	text-decoration: none;
    font-family: "shippori-mincho", sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #000;
}

li {
	list-style-type: none;
    font-family: "shippori-mincho", sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #000;
}

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

span {
	white-space: nowrap;
}


.fv-line-top {
	width: 100%;
    line-height: 0;
    position: absolute;
    top: 0;
    left: 0;
}
header {
	background-color: #7a3c88;
	padding: 4% 2% 3%;
}
header h2 {
	width: 100%;
	height: auto;
	animation: zoomIn 0.8s ease-out forwards;
}

.fv {
	background-color: #fff4d8;
	background-image: url("img/bg-gara-white.png");
	background-position: center;
	overflow: hidden;
}
.mv {
	width: 100%;
	aspect-ratio: 1 / 0.5;
	position: relative;
}
.fv-catch {
	width: 58%;
    height: auto;
	position: absolute;
	top: 22%;
    left: 2%;
	z-index: 2;
	animation: zoomOut 0.8s ease-out forwards;
}
.fv-catch-bg {
    width: 68%;
    height: auto;
    position: absolute;
    top: 5%;
    left: 2%;
    z-index: 0;
    animation: zoomIn 0.8s ease-out forwards;
}

.fv-catch-bg img {
    width: 100%;
    height: auto;
    animation: rotateAnimation 12s linear infinite;
}


.fv-img {
	width: 58%;
    height: auto;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	animation: slideIn 0.8s ease-out forwards;
}
.fv-bottom {
	width: 100%;
	aspect-ratio: 1 / 0.4;
	background: linear-gradient(rgba(0,0,0,0) 0%,rgba(122,60,136,1) 22%);
	position: relative;
	z-index: 2;
	padding: 12% 2% 8%;
}
.fv-text1 {
	width: 100%;
	height: auto;
	animation: zoomOut 1s ease-out forwards;
}

.fv-text2 {
	width: 100%;
    height: auto;
	margin: 4% 0 2%;
}
.fv-btn {
	width: 100%;
	height: auto;
	opacity: 1;
	animation: bounce 2s ease infinite normal 0s none running;
}
.fv-line-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
}



.greeting {
	background-image: url("img/bg-hoshi.png");
	background-size: cover;
	background-position: top;
	overflow: hidden;
	padding: 0 2%;
}
.greeting-title {
	width: 100%;
	height: auto;
	margin: 10% auto;
}
.letter {
	width: 100%;
	height: auto;
	margin: 10% auto;
}
 



.form {
	background-color: #fff4d8;
	overflow: hidden;
}
.form-title {
	width: 100%;
	padding: 1% 10%;
	background-color: #b48d3d;
	background-image: url("img/title-shindan-img.png");
	background-size: 95%;
	background-position: center;
	background-repeat: no-repeat;
}
.form-title h2 {
	width: 80%;
    margin: 6% auto;
}
.form-text {
	width: 80%;
	height: auto;
	margin: 8% auto;
}
.underline-animate {
	position: relative;
	display: inline-block;
}
.underline-animate::after {
	content: '';
    position: absolute;
    top: 35%;
	left: 18%;
    height: 20%;
    width: 0;
    background: #f9dcff;
	opacity: 0.5;
    z-index: -1;
}
.underline-animate.inview-underline::after {
	animation: underline 1s ease-out forwards;
	animation-delay: 0.8s;
}
@keyframes underline {
	from {
		width: 0;
	}
	to {
		width: 62%;
	}
}
form {
	width: 85%;
	margin: 0 auto;
	text-align: left;
	font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-size: 18px;
	font-weight: 500;
}
.required {
	background-color: #cd3535;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	padding: 0px 5px 2px 4px;
	margin-right: 5px;
}
.male,.female {
	display: none;
}
.gender-selects {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 2% auto 6%;
}
.male-btn,.female-btn {
	display: block;
    width: 48%;
	padding: 3% 18%;
    border-radius: 4px;
    text-align: center;
    line-height: 3.1;
    background-color: #fff;
    border: 1px solid #7a3c88;
    color: #000;
    cursor: pointer;
    line-height: 1;
}
.male:checked + .male-btn,
.female:checked + .female-btn {
	background-color: #7a3c88;
	color: #fff;
}
.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 #7a3c88;
	pointer-events: none;
}
.blood-select {
    width: 100%;
	padding: 3% 4%;
    margin: 2% auto 6%;
    border-radius: 4px;
    border: 1px solid #7a3c88;
	background-color: #fff;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-size: 18px;
	color: #000;
    cursor: pointer;
    appearance: none;
	outline: none;
}
.birth-selects {
	width: 100%;
    height: auto;
    margin: 2% auto 6%;
    display: flex;
    gap: 2%;
}
.year-box {
	position: relative;
	width: 42%;
}
.birth-year {
    width: 100%;
	padding: 6% 10%;
    border-radius: 4px;
    border: 1px solid #7a3c88;
	background-color: #fff;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
	color: #000;
    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 #7a3c88;
	pointer-events: none;
}
.birth-month,.birth-day {
	width: 100%;
	padding: 9% 10%;
	border-radius: 4px;
	border: 1px solid #7a3c88;
	background-color: #fff;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-size: 18px;
	color: #000;
	cursor: pointer;
	appearance: none;
	outline: none;
}
.name-box {
	width: 100%;
	margin: 2% auto 6%;
	border-radius: 4px;
	border: 1px solid #ddd;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	padding: 3% 4%;
	font-size: 18px;
}
.name-box:focus {
	outline: 1px solid #7a3c88;
}
form button {
	background: none;
	border: none;
	cursor: pointer;
	margin-bottom: 10%;
	opacity: 1;
	animation: bounce 2s ease infinite normal 0s none running;
}



.review {
	background-color: #fdf0ff;
	background-image: url("img/bg-gara-pink.png");
	background-position: center;
	overflow: hidden;
}
.review-title {
	width: 100%;
	background-color: #7a3c88;
	background-image: url("img/title-kuchikomi-img.png");
	background-size: 95%;
	background-position: center;
	background-repeat: no-repeat;
	padding: 9% 10%;
}
.review-title h2 {
    width: 80%;
    margin: 0 auto;
	line-height: 1;
}
.review-box {
	display: flex;
	justify-content: space-evenly;
	margin: 8% 2%;
}



.summary {
	background-color: #fff8e7;
	background-image: url("img/bg-gara-white.png");
	background-position: center;
	overflow: hidden;
}
.bar-top {
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1
}
.summary .mv {
	width: 100%;
    aspect-ratio: 1 / 0.7;
    position: relative;
}
.summary-catch {
	width: 58%;
    height: auto;
	position: absolute;
	top: 26%;
    left: 4%;
	z-index: 2;
}

.summary-catch-bg {
	width: 68%;
    height: auto;
	position: absolute;
	top: 14%;
    left: 2%;
	z-index: 0;
}

.summary-catch-bg img {
    width: 100%;
    height: auto;
	animation: rotateAnimation 12s linear infinite;
}


.summary-img {
	width: 58%;
    height: auto;
	position: absolute;
	top: 7%;
	right: 0;
	z-index: 1;
}
 
.summary-bottom {
	width: 100%;
    aspect-ratio: 1 / 0.4;
    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(122, 60, 136, 1) 22%);
    position: relative;
    z-index: 2;
    padding: 8% 2%;
}
.summary-text1 {
	width: 100%;
	height: auto;
}

.summary-text2 {
	width: 100%;
    height: auto;
	margin: 4% 0 2%;
}
.summary-btn {
	width: 100%;
	height: auto;
	animation: bounce 2s ease infinite normal 0s none running;
	opacity: 1;
}
.summary-line-bottom {
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 0;
	left: 0;
}



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



/*完了ページ*/

.mv2 {
	width: 100%;
    aspect-ratio: 1 / 0.7;
    position: relative;
}

.fv-catch-bg2 {
    width: 68%;
    height: auto;
	position: absolute;
	top: 8%;
    left: 2%;
	z-index: 0;
    animation: zoomIn 0.8s ease-out forwards;
}
.fv-catch-bg2 img {
    width: 100%;
    height: auto;
    animation: rotateAnimation 12s linear infinite;
}

.fv-img2 {
	width: 58%;
    height: auto;
	position: absolute;
	top: 2%;
	right: 0;
	z-index: 1;
	animation: slideIn 0.8s ease-out forwards;
}
.fv-bottom2 {
	width: 100%;
    aspect-ratio: 1 / 0.65;
    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(122, 60, 136, 1) 22%);
    position: relative;
    z-index: 2;
    padding: 8% 2%;
}

.warning {
	background-color: #fff4d8;
	padding: 4%;
}


/*サンクスページ*/

.thanks {
	background-image: url("img/bg-hana.png");
	background-size: cover;
	background-position: center;
	overflow: hidden;
	padding: 16%;
	border-bottom: 2px solid #b48d3d;
}





/*特定商取引法、その他footerメニュー*/

.legal-header {
	width: 100%;
	background-color: #7a3c88;
	background-image: url("img/title-kuchikomi-img.png");
	background-size: 95%;
	background-position: center;
	background-repeat: no-repeat;
	padding: 9% 10%;
}
.legal-header h2 {
	line-height: 1;
	color: #fff;
	font-size: clamp(26px, 7vw, 54px);
	font-weight: normal;
}

.legal {
	background-color: #fdf0ff;
	background-image: url("img/bg-gara-pink.png");
	background-position: center;
	padding: 6%;
	overflow: hidden;
	border-bottom: 2px solid  #b48d3d;
}
.legal-box {
	margin: 0 auto 6%;
	background-color: #fff;
	border: 2px solid #b48d3d;
	text-align: left;
	padding: 4%;
}

.legal-box p {
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	margin: 4% 0;
}

.back a {
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	color: #b48d3d;
	border-bottom: 1px solid #b48d3d;
}




/*プライバシーポリシー*/

.privacy-header {
	width: 100%;
	background-color: #7a3c88;
	background-image: url("img/title-kuchikomi-img.png");
	background-size: 95%;
	background-position: center;
	background-repeat: no-repeat;
	padding: 9% 10%;
}

.privacy-header h2 {
    line-height: 1;
    color: #fff;
    font-size: clamp(22px, 6vw, 45px);
    font-weight: normal;
}


/*鑑定士紹介*/

.appraiser-box {
	width: 100%;
	margin: 0 auto 6%;
	background-color: #fff8e7;
	border: 2px solid #b48d3d;
	text-align: left;
	padding: 4%;
	position: relative;
}

.appraiser-box p {
	font-family: 'Shippori Mincho', serif;
	font-size: 17px;
	font-weight: 500;
	margin: 4% 0;
}
.appraiser-box p:nth-of-type(1) {
	font-family: 'Shippori Mincho', serif;
	font-size: 32px;
	font-weight: 600;
}

.appraiser-box p:nth-of-type(2) {
	font-family: 'Shippori Mincho', serif;
	font-size: 24px;
	font-weight: 600;
}
.appraiser-bg {
    width: 50%;
    height: auto;
    position: absolute;
    top: 12%;
    left: 25%;
	opacity: 0.7;
    animation: rotateAnimation 12s linear infinite;
}







@keyframes zoomIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
		opacity: 1;
    }
}

@keyframes zoomOut {
    0% {
        transform: scale(1.4);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
	opacity: 1;
  }
}

@keyframes slideUp {
	0% {
	  transform: translateY(120px);
	  opacity: 0;
	}
	100% {
	  transform: translateY(0);
	  opacity: 1;
	}
}

@keyframes bounce {
0%, 40%, 60%, 100% {
	transform: scale(0.95);
}
50%, 70% {
	transform: scale(1.1);
}
}







.animate-zoomOut,.animate-slideUp,.animate-zoomIn,.animate-slideIn {
    opacity: 0;
}


.animate-zoomOut.inview-zoomOut {
	animation: zoomOut 0.6s ease-out forwards;
	animation-delay: 0.3s;
}

.animate-slideUp.inview-slideUp {
	animation: slideUp 0.8s ease-out forwards;
	animation-delay: 0.3s;
}

.animate-zoomIn.inview-zoomIn {
	animation: zoomIn 0.7s ease-out forwards;
	animation-delay: 0.3s;
}

.animate-slideIn.inview-slideIn {
	animation: slideIn 0.7s ease-out forwards;
	animation-delay: 0.3s;
}







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


	body {
		font-size: 14px;
	}

	form {
		font-size: 16px;
	}

	.required {
		font-size: 12px;
	}
	.blood-select {
		font-size: 16px;
	}
	.birth-year {
		font-size: 16px;
	}
	.birth-month,.birth-day {
		font-size: 16px;
	}
	.name-box {
		font-size: 16px;
	}
	



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





	.appraiser-box p {
		font-family: 'Shippori Mincho', serif;
		font-size: 14px;
		font-weight: 500;
		margin: 4% 0;
	}
	.appraiser-box p:nth-of-type(1) {
		font-family: 'Shippori Mincho', serif;
		font-size: 24px;
		font-weight: 600;
	}
	
	.appraiser-box p:nth-of-type(2) {
		font-family: 'Shippori Mincho', serif;
		font-size: 18px;
		font-weight: 600;
	}
	
	.appraiser-bg {
		width: 60%;
		top: 20%;
		left: 18%;
	}
	



	@keyframes slideUp {
		0% {
		  transform: translateY(60px);
		  opacity: 0;
		}
		100% {
		  transform: translateY(0);
		  opacity: 1;
		}
	}
	
}