:root{
  --green:#238F6A;
  --green2:#4DB58A;
  --green-soft:#E7F4ED;
  --bg:#EEF7F2;
  --text:#17211C;
  --sub:#65756D;
  --border:#D5E3DC;
  --danger:#C73C35;
  --orange:#D97706;
  --shadow:0 12px 32px rgba(35,90,67,.11);
}

*,
*::before,
*::after{
  box-sizing:border-box;
  min-width:0;
}

html,
body{
  margin:0;
  width:100%;
  min-height:100%;
  background:
    radial-gradient(circle at 12% 8%, rgba(209,237,224,.78), transparent 30%),
    radial-gradient(circle at 90% 92%, rgba(218,242,230,.68), transparent 32%),
    var(--bg);
  color:var(--text);
  font-family:"Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  overflow-x:hidden;
  font-size:16px;
  line-height:1.6;
}

button,
input,
select,
textarea{
  font:inherit;
}

.screen{
  display:none;
  width:100%;
}

.screen.active{
  display:block;
}

.page-shell{
  width:100%;
  margin:0 auto;
}

/* login */
.login-screen{
  min-height:100vh;
  min-height:100svh;
  padding:
    max(20px, env(safe-area-inset-top))
    8px
    max(24px, env(safe-area-inset-bottom));
}

.login-shell{
  max-width:520px;
}

.login-top{
  padding:10px 6px 18px;
  text-align:center;
  color:var(--green);
}

.brand{
  font-size:clamp(30px,8vw,42px);
  font-weight:900;
  line-height:1.12;
}

.copy{
  margin-top:7px;
  font-size:clamp(17px,4.4vw,21px);
  font-weight:800;
}

.card,
.question-card{
  width:100%;
  background:#fff;
  border:1px solid rgba(213,227,220,.92);
  box-shadow:var(--shadow);
}

.card{
  border-radius:26px;
  padding:22px 18px 24px;
}

.card-title{
  margin:0 0 8px;
  font-size:32px;
  line-height:1.2;
  font-weight:900;
  text-align:center;
}

label{
  display:block;
  margin:17px 0 7px;
  font-size:20px;
  font-weight:900;
}

input,
select,
textarea{
  width:100%;
  max-width:100%;
  min-height:60px;
  padding:12px 15px;
  border:1px solid var(--border);
  border-radius:17px;
  outline:none;
  background:#FCFEFD;
  color:var(--text);
  font-size:18px;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--green2);
  box-shadow:0 0 0 4px rgba(77,181,138,.15);
  background:#fff;
}

.btn{
  width:100%;
  min-height:60px;
  margin-top:18px;
  padding:12px 14px;
  border-radius:17px;
  font-size:20px;
  font-weight:900;
  cursor:pointer;
}

.btn-primary{
  border:0;
  background:linear-gradient(135deg,var(--green),var(--green2));
  color:#fff;
}

.btn-secondary{
  border:1px solid var(--border);
  background:#F7FAF8;
  color:#41564C;
}

.message{
  min-height:24px;
  margin-top:10px;
  color:var(--danger);
  font-size:15px;
  font-weight:800;
  text-align:center;
}

/* app */
#appScreen{
  min-height:100vh;
}

.app-shell{
  max-width:760px;
  padding:
    max(28px, calc(env(safe-area-inset-top) + 20px))
    4px
    max(60px, calc(env(safe-area-inset-bottom) + 40px));
}

.top-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-bottom:16px;
}

.small-btn{
  min-height:46px;
  padding:7px 4px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:#40564B;
  font-size:14px;
  font-weight:900;
}

.progress{
  width:100%;
  height:8px;
  margin-bottom:16px;
  overflow:hidden;
  border-radius:999px;
  background:#DDEAE3;
}

.progress-bar{
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--green),var(--green2));
  transition:width .2s ease;
}

.question-card{
  border-radius:22px;
  padding:20px 14px 24px;
  overflow:hidden;
}

.step-label{
  color:var(--green);
  font-size:14px;
  font-weight:900;
}

.question-title{
  margin:8px 0 12px;
  font-size:28px;
  line-height:1.28;
  font-weight:900;
}

.question-help{
  margin-top:10px;
  color:var(--sub);
  font-size:17px;
  line-height:1.7;
  font-weight:700;
}

.pin-help{
  margin-top:14px;
}

.choice-grid,
.yes-no-grid,
.button-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}

.choice{
  width:100%;
  min-height:62px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:17px;
  background:#fff;
  color:var(--text);
  font-size:20px;
  font-weight:900;
}

.choice.selected,
.choice.is-selected{
  border-color:var(--green2);
  background:var(--green-soft);
  color:#1D6D50;
}

.info,
.notice,
.summary-section,
.relative-card{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#F8FBF9;
  font-size:16px;
  line-height:1.7;
}

.notice{
  background:#FFF8E6;
  border-color:#F0DEB3;
}

.relative-card{
  background:#fff;
}

.relative-title,
.summary-title{
  font-size:19px;
  font-weight:900;
}

.summary-line{
  margin-top:7px;
  font-size:16px;
}

.document-list{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.document-item{
  padding:12px;
  border-radius:13px;
  background:#F2F8F5;
  font-size:16px;
  font-weight:800;
}

.hidden{
  display:none !important;
}

.loading{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(245,250,247,.84);
  backdrop-filter:blur(2px);
}

.loading.show{
  display:flex;
}

.loading-box{
  min-width:220px;
  padding:24px 20px;
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow);
  text-align:center;
  font-size:18px;
  font-weight:900;
}

.spinner{
  width:52px;
  height:52px;
  margin:0 auto 12px;
  border:6px solid #DDEBE4;
  border-top-color:var(--green);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

@media (min-width:768px){
  body{
    font-size:15px;
  }

  .login-screen{
    display:none;
    padding-top:46px;
  }

  .login-screen.active{
    display:block;
  }

  .login-shell{
    max-width:470px;
  }

  .brand{
    font-size:30px;
  }

  .copy{
    font-size:16px;
  }

  .card{
    padding:24px 26px 28px;
    border-radius:20px;
  }

  .card-title{
    font-size:27px;
  }

  label{
    font-size:16px;
  }

  input,
  select,
  textarea{
    min-height:50px;
    border-radius:12px;
    font-size:16px;
  }

  .btn{
    min-height:52px;
    border-radius:12px;
    font-size:17px;
  }

  .app-shell{
    max-width:620px;
    padding-top:34px;
    padding-left:10px;
    padding-right:10px;
  }

  .question-card{
    border-radius:18px;
    padding:22px 22px 26px;
  }

  .question-title{
    font-size:24px;
  }

  .question-help{
    font-size:15px;
  }

  .choice{
    min-height:52px;
    border-radius:12px;
    font-size:17px;
  }

  .small-btn{
    min-height:40px;
    font-size:13px;
  }
}


/* V2.1 mobile form refinements */
input[type="date"]{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
}

.choice:disabled,
.choice[disabled]{
  opacity:.42 !important;
  cursor:not-allowed !important;
  filter:grayscale(.18);
  background:#EEF1EF !important;
  border-color:#D8DFDB !important;
  color:#7B8781 !important;
}

.choice.selected:disabled,
.choice.is-selected:disabled{
  opacity:.62 !important;
}

.postal-retry-btn{
  width:100%;
  min-height:46px;
  margin-top:9px;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#F7FAF8;
  color:#40564B;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
}

.step-label{
  font-size:15px;
}

.message{
  font-size:16px;
}

.small-btn{
  font-size:15px;
}

@media (min-width:768px){
  body{
    font-size:16px;
  }

  .question-help{
    font-size:16px;
  }

  .small-btn{
    font-size:14px;
  }
}