/* 全体設定 */
* {
  box-sizing: border-box;
}

body.entry {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  background: #0d1117;
  color: #ffffff;
  /*height: 100vh;*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}



body.completion {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  background: #0d1117;
  color: #ffffff;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  box-sizing: border-box;
  padding: 20px;
}

.mt-18{
	margin-top:18px;
}

/* タイトル */
h1 {
  font-size: 32px;
  margin-bottom: 40px;
  color: #ffffff;
  text-align: center;
  font-weight: 600;
}

/* フォーム本体 */
form {
  background: linear-gradient(145deg, #161b22, #0d1117);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 400px;
}

/*アカウント選択ページ用フォーム枠*/
.select_form{
  background: linear-gradient(145deg, #161b22, #0d1117);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 400px;
}
	



/* ラベルと入力欄 */
label {
  display: block;
  font-size: 14px;
  color: #c9d1d9;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
  width: 100%;
  padding: 12px;
  background-color: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #ffffff;
  /*margin-bottom: 20px;*/
  font-size: 16px;
}

input:autofill{
		box-shadow: 0 0 0px 1000px #21262d inset !important;
		-webkit-text-fill-color: #ffffff !important;
}


input:focus {
  outline: none;
  border-color: #58a6ff;
  background-color: #1c2128;
}

/* ボタン */
button {
  width: 100%;
  padding: 12px;
  background-color: #238636;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}
button:hover {
  background-color: #2ea043;
}

/* エラーメッセージ */
.error {
  color: #ff7b72;
  font-size: 14px;
  text-align: center;
}

button:disabled {
	 background: #ccc;
	 cursor: not-allowed;
}

input:disabled {
	 background-color: #121212;
  border: 1px solid #30363d;
}

/* フォーム2列用 */

.div_space_between{
	 display: flex; 
  justify-content: space-between;
}

.w-45 {
		width:45%;
}


.page-container {
  display: flex;              /* flex */
  flex-direction: column;     /* flex-col（縦方向に並べる） */
  align-items: center;        /* items-center（交差軸方向の中央寄せ） */
  justify-content: center;    /* justify-center（主軸方向の中央寄せ） */
  min-height: 100vh;          /* min-h-screen（画面の高さ100%） */
  background-color: #000000;  /* bg-black */
  color: #e6edf3;             /* text-[#e6edf3]（文字色） */
  padding-left: 1.5rem;       /* px-6 = 左右に1.5remずつ余白 */
  padding-right: 1.5rem;
}

/* 表示フレーム */
/* ====== コンテナ（中央） ====== */
.wrap {
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

/* ====== メインカード（未来的） ====== */
.card {
  background: linear-gradient(180deg, rgba(13,17,23,0.95), rgba(8,12,16,0.85));
  border-radius: 16px;
  padding: 36px 28px;
  border: 1px solid rgba(255,255,255,0.03);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 6px 24px rgba(2,6,23,0.7),
    0 0 30px rgba(46,160,67,0.04);
  backdrop-filter: blur(6px);
}

/* 微かな動くライン */
.card::before {
  content: "";
  position: absolute;
  left: -40%;
  top: -30%;
  width: 180%;
  height: 220%;
  background: linear-gradient(90deg,
    rgba(46,160,67,0.02) 0%,
    rgba(46,160,67,0.06) 12%,
    rgba(64,196,255,0.06) 50%,
    rgba(46,160,67,0.04) 88%,
    rgba(46,160,67,0.02) 100%);
  transform: rotate(-12deg);
  animation: slowShift 10s linear infinite;
  pointer-events: none;
}
@keyframes slowShift {
  0% { transform: translateX(0) rotate(-12deg); }
  50% { transform: translateX(6%) rotate(-12deg); }
  100% { transform: translateX(0) rotate(-12deg); }
}

/* ====== ヘッダー（チェック） ====== */
.check {
  width: 86px;
  height: 86px;
  margin: 0 auto 12px auto;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(63,185,80,0.14), rgba(46,160,67,0.08));
  box-shadow: 0 6px 20px rgba(46,160,67,0.08), inset 0 -6px 18px rgba(0,0,0,0.5);
  border: 1px solid rgba(63,185,80,0.08);
}

.check i {
  font-size: 46px;
  color: #39D06A;
  filter: drop-shadow(0 6px 10px rgba(46,160,67,0.15));
}

/* ====== アイコン（警告） ====== */
.exclamation {
  width: 86px;
  height: 86px;
  margin: 0 auto 12px auto;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(255,150,60,0.14), rgba(255,80,80,0.08));
  box-shadow: 0 6px 20px rgba(255,100,60,0.1), inset 0 -6px 18px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,200,60,0.12);
}

.exclamation i {
  font-size: 46px;
  color: #f8c84a;
  filter: drop-shadow(0 6px 10px rgba(255,200,80,0.25));
}


/* ====== タイトル ====== */
.title {
  margin: 8px 0 4px;
  font-size: 1.35rem;
  font-weight: 700;
  color: #eef7fb;
  letter-spacing: 0.01em;
}

/* ====== 説明文 ====== */
.lead {
  margin: 0 0 2px 0;
  color: #9aa6b1;
  font-size: 0.98rem;
  line-height: 1.7;
}

.lead a {
  margin: 0 0 2px 0;
  color: #00ffff;
  font-size: 0.98rem;
  line-height: 1.7;
}
/* ====== 注意書き（目立たせつつ読みやすく） ====== */
.note {
  background: linear-gradient(180deg, rgba(13,17,23,0.9), rgba(10,14,18,0.85));
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.03);
  color: #9da8b2;
  font-size: 0. ninerem; /* fallback handled below with rem computed; ensure valid */
  line-height: 1.6;
  box-shadow: 0 6px 18px rgba(4,8,12,0.6);
  text-align: left;
}

.note { font-size: 0.9rem; }

.note .note-title {
  color: #8ef0a0;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.98rem;
}

.note ul {
  margin: 0;
  padding-left: 18px;
}
.note li {
  margin-bottom: 8px;
}
.note strong {
  color: #dfffe6;
}

/* ====== フッタースペース（モバイル時の余白確保） ====== */
.bottom-space { height: 8px; }

/* ====== モバイル（狭い画面） ====== */
@media (max-width: 520px) {
  .card { padding: 28px 18px; border-radius: 14px; }
  .wrap { padding: 16px; }
  .check { width: 76px; height: 76px; }
  .title { font-size: 1.15rem; }
  .lead { font-size: 0.95rem; }
  .note { font-size: 0.88rem; padding: 14px; }
}

/* ====== アクセシビリティ小調整（高コントラスト表示） ====== */
@media (prefers-contrast: more) {
  .card { border-color: rgba(255,255,255,0.06); }
  .note { border-color: rgba(255,255,255,0.06); color: #c9d6dc; }
}

/* メール送信完了ページ用枠 */
.entry_completion_frame {
  background: linear-gradient(145deg, #161b22, #0d1117);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 400px;
}

/* ====== 必須項目用（必須マークを表示） ====== */

.required::after {
content: "必須";
color: #ffffff;
background: #cc0000;
font-size: 0.8em;
padding: 0.1em;
border-radius: 0.3em;
margin-left:0.3em;
}