@charset "utf-8";

body {
	background-color: #EFF8F8 !important;
	color: #505050 !important;
}

.container {
	margin: 0 auto;
	width: 90%;
	max-width: 600px;
}

.container .logo-box {
	padding-top: 100px;
	padding-bottom: 32px;
	text-align: center;
}

.logo-box img {
	max-width: 200px;
}

.main-sentence {
	font-size: 16px;
}

.sub-sentence {
	margin-top: 16px;
	font-size: 14px;
}

.code-form {
	margin-top: 40px;
}

form input {
	max-width: 350px;
	border: none;
	filter: drop-shadow(2px 2px 2px #D2D2D2);
}

form input::placeholder {
	color: #505050;
	font-size: 14px;
	opacity: 40%;
}

.submit-box {
	margin-top: 32px;
	text-align: center;
}

button {
	text-align: center;
	background-color: #033752;
	border: unset;
	color: #fff;
	padding: 12px 24px;
}

/* 情報入力画面 */
.info-form p {
	margin-bottom: 16px;
}

.info-form .birthdate {
	margin-bottom: 32px;
}

.info-form label {
	display: inline-flex;
}

.info-form label:first-child {
	margin-right: 24px;
}

.info-form input {
	margin-right: 8px;
}

input[type="date"] {
	max-width: 140px;
	color: #505050;
	font-size: 14px;
}

/* 入力後画面 */
.share-url {
	color: #505050;
}


/* トーストのスタイル */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
  z-index: 9999;
}

.toast.show {
  opacity: 1;
}


/* 共有画面 */
.reveal {
	background-image: url("../images/bg_reveal.png");
	background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
}

.boy-or-girl-box {
	margin-top: 28px;
	margin-bottom: 40px;
	text-align: center;
}

.boy-or-girl-box img {
	max-width: 355px;
}

.gener-sentence {
	max-width: 300px;
	margin: 0 auto;
}

.gener-sentence p {
	font-size: 32px;
}

.scheduled-birthdate {
	padding-top: 60px;
	padding-right: 4px;
	padding-left: 4px;
	margin: 0 auto;
	font-size: 14px;
	border-bottom: 1px solid #A6A6A6;
	padding-bottom: 2px;
	width: fit-content;
}

.scheduled-birthdate span {
	font-size: 20px;
}