@charset "UTF-8";
/* specify for newdeli */
.btn-mail,
.btn-google,
.btn-apple,
.btn-microsoft,
.btn-facebook{
	position: relative;
	border-radius: 0.25rem;
	margin-bottom: 0.5rem;
	border: 1px solid black;
	transition: opacity 0.5s;
	padding: 0.5rem 0.5rem 0.5rem 2.5rem;
	font-size: 0.75rem;
	font-weight: bold;
	background-color: white;
}
.btn-google:hover,
.btn-apple:hover,
.btn-microsoft:hover,
.btn-facebook:hover{
	opacity: 0.8;
}
.btn-mail::after{
	position: absolute;
	content: "";
	background-image: url("/wao_img/parts/mail_01.png");
	background-size: contain;
	width: 1.25rem; height: 1rem;
	top: 50%; left: 1.5rem;
	transform: translate(-50%, -50%);
	mix-blend-mode: multiply;
	background-repeat: no-repeat;
}
.btn-google::after{
	position: absolute;
	content: "";
	background-image: url("/wao_img/parts/Google_Logo_G.png");
	background-size: cover;
	width: 1rem; height: 1rem;
	top: 50%;
	transform: translate(-50%, -50%);
	mix-blend-mode: multiply;
}
.btn-apple::after{
	position: absolute;
	content: "";
	background-image: url("/wao_img/parts/Logo - SIWA - Left-aligned - Black - Medium.svg");
	background-size: cover;
	width: 1.8rem; height: 2rem;
	top: 42%;
	transform: translate(-50%, -50%);
	mix-blend-mode: multiply;
}
.btn-microsoft::after{
	position: absolute;
	content: "";
	background-image: url("/wao_img/parts/ms-symbollockup_mssymbol_19.svg");
	background-size: cover;
	width: 1rem; height: 1rem;
	top: 50%;
	transform: translate(-50%, -50%);
	mix-blend-mode: multiply;
}
.btn-facebook::after{
	position: absolute;
	content: "";
	background-image: url("/wao_img/parts/Facebook_Logo_Primary.png");
	background-size: cover;
	width: 1.125rem; height: 1.125rem;
	top: 50%;
	transform: translate(-50%, -50%);
	mix-blend-mode: multiply;
}

/* == PC == */

.button-wrapper .btn-google::after{
	left: 6.5rem;
}
.button-wrapper .btn-apple::after{
	left: 6.5rem;
}
.button-wrapper .btn-microsoft::after{
	left: 6.5rem;
}
.button-wrapper .btn-facebook::after{
	left: 6.5rem;
}

@media (max-width: 765px) {
    .text-center .btn-google::after{
      left: 2.5rem;
    }
    .text-center .btn-apple::after{
      left: 2.5rem;
    }
    .text-center .btn-microsoft::after{
      left: 2.5rem;
    }
    .text-center .btn-facebook::after{
      left: 2.5rem;
    }
}
@media (min-width: 766px) and (max-width:1157px) {
    .text-center .btn-google::after{
      left: 5.0rem;
    }
    .text-center .btn-apple::after{
      left: 5.0rem;
    }
    .text-center .btn-microsoft::after{
      left: 5.0rem;
    }
    .text-center .btn-facebook::after{
      left: 5.0rem;
    }
}
@media (min-width: 1158px) {
    .text-center .btn-google::after{
      left: 6.5rem;
    }
    .text-center .btn-apple::after{
      left: 6.5rem;
    }
    .text-center .btn-microsoft::after{
      left: 6.5rem;
    }
    .text-center .btn-facebook::after{
      left: 6.5rem;
    }
}

/* == SP == */

.slogin-mb .btn-google::after{
	left: 1.5rem;
}
.slogin-mb .btn-apple::after{
	left: 1.5rem;
}
.slogin-mb .btn-microsoft::after{
	left: 1.5rem;
}
.slogin-mb .btn-facebook::after{
	left: 1.5rem;
}