@charset "UTF-8";

html {
 user-select: none;
}

.redeem h2 {
margin: 0;
background: #d93127;
color: #ffffff;
font-size: 1em;
line-height: 1.5em;
}

.redeem h3 {
position: relative;
padding: 1em 1em 1em 1.5em;
font-size: 1em;
margin : 0.5em;
border-radius: 5px;
background:#e0e0e0;
color:#070707;
}

.redeem h3:before {
position: absolute;
top: 25%;
left: 0.75em;
width: 6px;
height: 50%;
content: "";
border-radius: 3px;
background: #e70000;
}


button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
-webkit-tap-highlight-color: transparent;
}

#outer_circle {
position: relative;
margin: 1em auto;
width: 100px;
height: 100px;
border-radius: 50%;
background-image: conic-gradient(#83ff00 0% 0%, #d9d9d9 0% 100%);
}

#inner_circle {
background-color: #eefff2;
width: 90px;
height: 90px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;

}

#inner_circle button {
position: absolute;
color:#0bc94b;
font-weight:bold;
top: 0;
right: 0;
bottom: 0;
left: 0;

}



.information{
padding: 5px;
margin: 5px;
background: #ffffff;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border: 1px solid #F24FB8;
}

article {
padding:0.5em;
margin-bottom: 1em;
}


article p {
font-size:1em;
line-height:1.4em;
}

article p span {
display:inline;
padding:0;
margin:0;
color:#ff214f;
font-size:1.1em;
}

article ul li {
margin:0.5em;
}
article ul li:last-child {
margin-bottom:1em;
}

article ul li a {
border:1px solid #696969;
padding: 1em 0.5em;
display: block;
border-radius:5px;
-moz-border-radius:5p0x0;
-webkit-border-radius:5px;
}
article ul li a span {
display: block;
font-size: 0.9em;
margin: 0.5em 0 0 0;
}






article table {
border-collapse: collapse;
width: 100%;
max-width: 700px;
margin: 0 auto;}

article table th, article table td {
border: 2px solid #fff;
background-color: #f1f1f1;
padding: 1em;
}
article table th {
background-color: #5a5a5a;
color: #fff;
font-weight: bold;
text-align: center;
min-width: 4em;
font-size:0.9em;
}

.choice {
text-align:center;
}
.choice ul {
width:100%;
display: flex;
}
.choice ul li {
width:50%;
display: table-cell;
}
.choice ul li a {
border:3px solid #ff8989;
background:#ffd0d0;
font-weight:bold;
border-radius:50px;
}
.choice ul li:last-child a {
border:3px solid #89b0ff;
background:#d7e4ff;
}

.notice {
margin:0.5em;
padding:0.5em;
background:#f1f1f1;
border:2px solid #696969;
border-radius:5px;
-moz-border-radius:5p0x0;
-webkit-border-radius:5px;

}

.process {
margin:1em 0.5em;
padding:0 0 0.5em;
border:1px solid #696969;
border-radius:5px;
-moz-border-radius:5p0x0;
-webkit-border-radius:5px;
}
.process em {
display:block;
background:#333333;
color:#ffffff;
font-weight:bold;
padding:0.5em;
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
}

.process a {
font-weight: bold;
display: block;
padding: 0.5em;
margin: 1em 0.5em 0.5em;;

}

.arrow {
position: relative;
padding-left: 30px;
}
 
.arrow::after {
content: "";
margin: auto;
margin-left:0.5em;
position: absolute;
top: 0;
bottom: 0;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 12px solid #eb0036;
}
.process a span {
background: linear-gradient(transparent 90% , #eb0036 90%);
}

.regist_banner {
padding:0.5em;
margin: 0 auto;
text-align: center;
}

.notice p {
font-size:0.9em;
line-height:1.5em;
text-indent:-1em;
padding:0 0 0 1em;
}
.accordion {
margin: 1em;
}
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title {
border: solid 1px #ccc;
padding: 1em;
display: block;
color: #333;
font-weight: bold;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: 1.25em;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;
}
.toggle:checked + .title + .content {
max-height: 500px;
transition: all 1.5s;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}

figure {
}

figure img {
width:100%;
}