/*
Theme Name:woodenjewely
*/
/****************************************
* resetCSS
*****************************************/
*, *::before, *::after {
	box-sizing: border-box;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-size: 100%;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	scroll-behavior: smooth;
}
body {
	animation: bggradient 10s ease infinite;  
    background:linear-gradient(45deg, #fffeb2,#ffffff,#09eafa);
	background-size: 200% 200%;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	letter-spacing: 1.5px;
	line-height: 1.5;
    font-size: 1rem;
	font-family: 'Satisfy', 'cursive';
	
}
img {
    max-width: 100%;
	width: 100%;

	top: 0;
	left: 0;
	object-fit: cover;
}
a {
	text-decoration: none;
    color: #333;
}

button:hover{
	cursor: pointer;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
	border-collapse: collapse;
}

tr,td{
	
	border: 2px solid #000;
	padding: 5px;
}

input,textarea {
-webkit-appearance: none;
}

.index{
	background-color:#f8f5de;

}

.wrapper{
	
	max-width: 1000px;
	padding: 10px;
}



.new-a{
	display: block;
	color: #fff;
}

h2{
	font-size: 1.3rem;
	margin: 20px auto;
}
h3{
	font-size: 1.3rem;
	margin: 10px auto;
}


/****************************************
* header
*****************************************/
#header{
	width: 100%;
}

#header h1{
	font-weight: bold;
	font-size: 1.5rem;
	color: #fff;
	animation: bggradient 10s ease infinite;  
    background:linear-gradient(45deg, #023966,#3a0a79,#005cd4);
	background-size: 200% 200%;
	padding: 10px 0px;
	text-align: center;
}


/****************************************
* result
*****************************************/
#result{
	padding: 10px;
	margin-bottom: 10px;
	font-family: 'Kiwi Maru', serif;
}

#result h2{
	text-decoration: underline;
}

#result p{
	font-size: 1.2rem;
	font-weight: bold;
}
#result .desc{
	margin: 10px auto;
	font-size: 1rem;
}

#result .happy{
	animation: bggradient 10s ease infinite;  
    background:linear-gradient(45deg, #008cff,#ffffff,#005cd4);
	background-size: 200% 200%;
}




/****************************************
* RINGーCSS
*****************************************/
.ring{
	display: block;
	margin:  0 auto;
	width: 100%;
	height: 350px;
	background-color: #000;
	border-radius: 50%;
	position: relative;
	padding: 10px;
	margin-bottom:20px ;
}

.maru{
	display: flex;
	width: 100%;
	align-items: center;
	padding: 5px;
	border-radius: 50%;
	background-color:#fff;
	justify-content: center;
	border: 1px solid #fff;
}

.main-ball{
	width: 45px;
	height: 45px;
}

.main-side{
	width: 30px;
	height: 30px;

}

.midway{
	width: 20px;
	height: 20px;
	
}

.sub-side{
	width: 20px;
	height: 20px;
}

.sub-ball{
	width: 35px;
	height: 35px;
}

.center{
	width: 210px;
	height: 210px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #fff;
	align-items: center;
	display: flex;
	justify-content: center;
	font-size: 1.2rem;
}



.maru{
	animation: bggradient 10s ease infinite;
}

@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
/* 色を虹色に変更する。 */
.red{
	animation: bggradient 10s ease infinite;  
    background:linear-gradient(45deg, #ec2222,#ff5959,#fa099e);
	background-size: 200% 200%;
}

.green{
	animation: bggradient 10s ease infinite;  
    background:linear-gradient(45deg, #008512,#8fff8b,#26fc1f);
	background-size: 200% 200%;
}
.purple{
	animation: bggradient 10s ease infinite;  
    background:linear-gradient(45deg, #af06c5,#ed69ff,#f70dff);
	background-size: 200% 200%;
}
.pink{
	animation: bggradient 10s ease infinite;  
    background:linear-gradient(45deg, #ff9bb0,#ffb2b2,#ff64cb);
	background-size: 200% 200%;
}
.clear{ 
	animation: bggradient 10s ease infinite;  
    background:linear-gradient(45deg, #008cff,#ffffff,#005cd4);
	background-size: 200% 200%;
}
.yellow{
	animation: bggradient 10s ease infinite;  
    background:linear-gradient(45deg, #f0ff1c,#faeda6,#ffee56);
	background-size: 200% 200%;
}
.mint-green{
	animation: bggradient 10s ease infinite;  
    background:linear-gradient(45deg, #3aff20,#ffffff,#36723e);
	background-size: 200% 200%;
}
.gold{
	animation: bggradient 10s ease infinite;  
    background:linear-gradient(45deg, #ffda37,#ffffff,#926d08);
	background-size: 200% 200%;
}
.navy{
	animation: bggradient 10s ease infinite;  
    background:linear-gradient(45deg, #00447c,#8c91d8,#0b15a3);
	background-size: 200% 200%;
}


/****************************************
* maru position
*****************************************/ 
.m-1{
	position: absolute;
	top: 8%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.m-2 {
	position: absolute;
	top: 10%;
	left: 64%;
	transform: translate(-50%,-50%);
}
.m-3 {
	position: absolute;
	top: 15%;
	left: 73%;
	transform: translate(-50%,-50%);
}
.m-4 {
	position: absolute;
	top: 21%;
	left: 80%;
	transform: translate(-50%,-50%);
}
.m-5 {
	position: absolute;
	top: 29%;
	left: 86%;
	transform: translate(-50%,-50%);
}
.m-6 {
	position: absolute;
	top: 39%;
	left: 90%;
	transform: translate(-50%,-50%);
}
.m-7 {
	position: absolute;
	top: 48%;
	left: 92%;
	transform: translate(-50%,-50%);
}
.m-8 {
	position: absolute;
	top: 59%;
	left: 93%;
	transform: translate(-50%,-50%);
}
.m-9 {
	position: absolute;
	top: 71%;
	left: 87%;
	transform: translate(-50%,-50%);
}
.m-10 {
	position: absolute;
	top: 82%;
	left: 79%;
	transform: translate(-50%,-50%);
}
.m-11 {
	position: absolute;
	top: 88%;
	left: 71%;
	transform: translate(-50%,-50%);
}
.m-12 {
	position: absolute;
	top: 90%;
	left: 62%;
	transform: translate(-50%,-50%);
}
.m-13 {
	position: absolute;
	top: 92%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.m-14 {
	position: absolute;
	top: 90%;
	left: 38%;
	transform: translate(-50%,-50%);
}
.m-15 {
	position: absolute;
	top: 88%;
	left: 28%;
	transform: translate(-50%,-50%);
}
.m-16 {
	position: absolute;
	top: 82%;
	left: 21%;
	transform: translate(-50%,-50%);
}
.m-17 {
	position: absolute;
	top: 71%;
	left: 13%;
	transform: translate(-50%,-50%);
}
.m-18 {
	position: absolute;
	top: 59%;
	left: 8%;
	transform: translate(-50%,-50%);
}
.m-19 {
	position: absolute;
	top: 48%;
	left: 7%;
	transform: translate(-50%,-50%);
}
.m-20 {
	position: absolute;
	top: 39%;
	left: 8%;
	transform: translate(-50%,-50%);
}
.m-21 {
	position: absolute;
	top: 29%;
	left: 14%;
	transform: translate(-50%,-50%);
}
.m-22 {
	position: absolute;
	top: 21%;
	left: 20%;
	transform: translate(-50%,-50%);
}
.m-23 {
	position: absolute;
	top: 15%;
	left: 27%;
	transform: translate(-50%,-50%);
}
.m-24 {
	position: absolute;
	top: 10%;
	left: 36%;
	transform: translate(-50%,-50%);
}



/* select */
form{
	text-align: center;
}

form select{
	display: block;
}

form .btn{
	margin: 30px auto;
	display:block;
	border: 1px solid #fff;
	border-radius: 50px;
	padding: 10px;
	width: 250px;
	font-weight: bold;
	background-color: #0c3acf;
	color: #fff;
}

/****************************************
* body
*****************************************/
body{
	background-color:#f8f5de ;
	font-family: 'Kiwi Maru', serif;
	font-family: 'Satisfy', cursive;
}

.create{
	margin: 20px auto;
	display: inline-block;
	border: 1px solid #fff;
	border-radius: 50px;
	padding: 5px 10px;
	font-weight: bold;
	background-color: #e72c2e;
	color: #fff;
}

input{
	width: 300px;
	height: 50px;
	font-size: 1.2rem;
	margin-bottom: 20px;
}
textarea{
	width: 300px;
	margin-bottom: 20px;
}

button{
	color: #fff;
	font-weight: bold;
	background-color: #3621f8;
	padding: 5px 10px;
	border-radius: 50px;
	margin-bottom: 30px;
}


/****************************************
* select
*****************************************/
#select p{
	margin-bottom: 10px;
	font-size: 1.3rem;
	text-align: center;	
	font-family: 'Kiwi Maru', serif;
	
}

#select select{
	margin: 0 auto;
	width: 100%;
	height: 40px;
}
/****************************************
* totalprice
*****************************************/
.totalprice{
	font-size: 1.5rem;
}


/****************************************
* footer
*****************************************/
footer{
	text-align: center;
}


@media screen and (min-width:400px){
.wrapper{
	max-width: 500px;
	padding: 10px;
	margin: 0 auto;
}

#result{
	text-align: center;
}

.ring{
	height: 500px;

}


}