@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;600&display=swap");
.t__min {
font-family: "Shippori Mincho", serif !important;
} svg {
fill: currentColor;
}   @keyframes scrollDown {
0% {
transform: translateY(0rem);
}
15% {
transform: translateY(1rem);
}
30% {
transform: translateY(0rem);
}
45% {
transform: translateY(1rem);
}
60% {
transform: translateY(0rem);
}
100% {
transform: translateY(0rem);
}
}
@keyframes loopCl {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes loopClRv {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
} #popup-container {
position: fixed;
display: table;
height: 100vh;
height: 100dvh;
width: 100vw;
top: 0;
left: 0;
z-index: 50000;
visibility: hidden;
}
#popup-container.pop_anim {
visibility: visible;
animation: visibleOn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#popup-container.pop_anim .popup-background {
animation: BGfadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#popup-container.pop_anim .welcome_pup {
animation: modalFadeInPc 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#popup-container.pop_anim.out {
visibility: hidden;
animation: visibleOff 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#popup-container.pop_anim.out .popup-background {
animation: BGfadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#popup-container.pop_anim.out .welcome_pup {
animation: modalFadeOutPc 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#popup-container .popup-background {
display: table-cell;
background: rgb(0, 0, 0);
text-align: center;
}
@media screen and (min-width: 280px) {
#popup-container .popup-background {
vertical-align: middle;
}
}
@media screen and (min-width: 600px) {
#popup-container .popup-background {
vertical-align: middle;
}
}
@media screen and (min-width: 1025px) {
#popup-container .popup-background {
vertical-align: middle;
}
}
@media screen and (min-width: 1441px) {
#popup-container .popup-background {
vertical-align: middle;
}
}
#popup-container .welcome_pup {
text-align: left;
height: auto;
width: auto;
display: inline-block;
position: relative;
}
#popup-container .welcome_pup .popup_content {
background: #fcfcfc;
z-index: 2;
position: relative;
padding: 4rem 2.5rem 3rem;
}
#popup-container .welcome_pup .pup_title {
font-size: 2.2rem;
line-height: 1;
font-weight: 600;
margin-bottom: 1rem;
letter-spacing: 0.01rem;
}
#popup-container .welcome_pup .pup_copy {
line-height: 1.5;
font-weight: 500;
margin-bottom: 1rem;
letter-spacing: 0;
font-size: 1.4rem;
}
#popup-container .welcome_pup .pup_merits {
margin-bottom: 2rem;
width: 100%;
padding: 1.5rem;
background-color: #efefef;
}
#popup-container .welcome_pup .merit_item {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
#popup-container .welcome_pup .merit_item:last-child {
margin-bottom: 0;
}
#popup-container .welcome_pup .merit_item svg {
width: 1.8rem;
height: auto;
fill: #262626;
margin-right: 1rem;
}
#popup-container .welcome_pup .merit_item span {
font-weight: 400;
letter-spacing: 0.02rem;
line-height: 1.8;
font-size: 1.1rem;
}
#popup-container .welcome_pup .pup_lets {
margin-bottom: 1rem;
display: flex;
align-items: center;
width: 100%;
}
#popup-container .welcome_pup .pup_lets span {
font-weight: 600;
letter-spacing: 0.02rem;
line-height: 1.8;
font-size: 1rem;
}
#popup-container .welcome_pup .signup_button {
width: 100%;
}
#popup-container .welcome_pup .signup_button .free {
display: inline-block;
padding: 0.2rem 0.5rem;
border-radius: 5px;
background-color: #fcfcfc;
color: #990000;
font-size: 1.1rem;
font-weight: 600;
margin-right: 1rem;
}
#popup-container .welcome_pup .signup_button a {
cursor: pointer;
letter-spacing: 0.05em;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
background: #262626 !important;
color: #fcfcfc !important;
font-size: 1.1rem;
font-weight: 400;
width: 100%;
transition: all 0.3s ease;
height: 40px;
border-radius: 22.5px;
-webkit-tap-highlight-color: transparent;
}
@media screen and (min-width: 280px) {
#popup-container .welcome_pup .signup_button a:hover {
opacity: 1;
transform: scale(1);
}
}
@media screen and (min-width: 600px) {
#popup-container .welcome_pup .signup_button a:hover {
opacity: 1;
transform: scale(1);
}
}
@media screen and (min-width: 1025px) {
#popup-container .welcome_pup .signup_button a:hover {
opacity: 0.6;
transform: scale(1.05);
}
}
@media screen and (min-width: 1441px) {
#popup-container .welcome_pup .signup_button a:hover {
opacity: 0.6;
transform: scale(1.05);
}
}
@media screen and (min-width: 280px) {
#popup-container .welcome_pup .signup_button a:active {
opacity: 0.6;
transform: scale(0.97);
}
}
@media screen and (min-width: 600px) {
#popup-container .welcome_pup .signup_button a:active {
opacity: 0.6;
transform: scale(0.97);
}
}
@media screen and (min-width: 1025px) {
#popup-container .welcome_pup .signup_button a:active {
opacity: 0.6;
transform: scale(1);
}
}
@media screen and (min-width: 1441px) {
#popup-container .welcome_pup .signup_button a:active {
opacity: 0.6;
transform: scale(1);
}
}
#popup-container .welcome_pup .login_button {
width: 100%;
margin-top: 2rem;
}
#popup-container .welcome_pup .login_button a {
cursor: pointer;
text-align: center;
letter-spacing: 0.05em;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
letter-spacing: 0.02rem;
font-size: 1.1rem;
font-weight: 400;
transition: all 0.3s ease;
-webkit-tap-highlight-color: transparent;
text-decoration: underline;
text-underline-offset: 5px;
}
@media screen and (min-width: 280px) {
#popup-container .welcome_pup .login_button a:hover {
opacity: 1;
transform: scale(1);
}
}
@media screen and (min-width: 600px) {
#popup-container .welcome_pup .login_button a:hover {
opacity: 1;
transform: scale(1);
}
}
@media screen and (min-width: 1025px) {
#popup-container .welcome_pup .login_button a:hover {
opacity: 0.6;
transform: scale(1.05);
}
}
@media screen and (min-width: 1441px) {
#popup-container .welcome_pup .login_button a:hover {
opacity: 0.6;
transform: scale(1.05);
}
}
@media screen and (min-width: 280px) {
#popup-container .welcome_pup .login_button a:active {
opacity: 0.6;
transform: scale(0.97);
}
}
@media screen and (min-width: 600px) {
#popup-container .welcome_pup .login_button a:active {
opacity: 0.6;
transform: scale(0.97);
}
}
@media screen and (min-width: 1025px) {
#popup-container .welcome_pup .login_button a:active {
opacity: 0.6;
transform: scale(1);
}
}
@media screen and (min-width: 1441px) {
#popup-container .welcome_pup .login_button a:active {
opacity: 0.6;
transform: scale(1);
}
}
.close_popup {
position: absolute;
background-color: transparent;
top: -1.5rem;
right: -1.5rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
-webkit-tap-highlight-color: transparent;
}
.close_popup button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background-color: #262626;
cursor: pointer;
-webkit-tap-highlight-color: rgba(200, 200, 200, 0.4);
height: 3rem;
width: 3rem;
padding: 0;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
@media screen and (min-width: 280px) {
.close_popup button:hover {
opacity: 1;
transform: scale(1);
}
}
@media screen and (min-width: 600px) {
.close_popup button:hover {
opacity: 1;
transform: scale(1);
}
}
@media screen and (min-width: 1025px) {
.close_popup button:hover {
opacity: 0.6;
transform: scale(1.05);
}
}
@media screen and (min-width: 1441px) {
.close_popup button:hover {
opacity: 0.6;
transform: scale(1.05);
}
}
@media screen and (min-width: 280px) {
.close_popup button:active {
opacity: 0.6;
transform: scale(0.97);
}
}
@media screen and (min-width: 600px) {
.close_popup button:active {
opacity: 0.6;
transform: scale(0.97);
}
}
@media screen and (min-width: 1025px) {
.close_popup button:active {
opacity: 0.6;
transform: scale(1);
}
}
@media screen and (min-width: 1441px) {
.close_popup button:active {
opacity: 0.6;
transform: scale(1);
}
}
.close_popup button svg {
color: #fcfcfc;
width: 1rem;
height: auto;
transition: all 0.5s;
} @keyframes visibleOn {
0% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
@keyframes visibleOff {
0% {
visibility: visible;
}
100% {
visibility: hidden;
}
}
@keyframes BGfadeIn {
0% {
background: rgba(0, 0, 0, 0);
}
100% {
background: rgba(0, 0, 0, 0.7);
}
}
@keyframes BGfadeOut {
0% {
background: rgba(0, 0, 0, 0.7);
}
100% {
background: rgba(0, 0, 0, 0);
}
}
@keyframes filterBGfadeIn {
0% {
background: rgba(0, 0, 0, 0);
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
}
100% {
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
@keyframes filterBGfadeOut {
0% {
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
100% {
background: rgba(0, 0, 0, 0);
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
}
}
@keyframes modalFadeInSp {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}
@keyframes modalFadeInPc {
0% {
opacity: 0;
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes modalFadeOutSp {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
@keyframes modalFadeOutPc {
0% {
opacity: 1;
transform: translateY(0%);
}
100% {
opacity: 0;
transform: translateY(10%);
}
}