/* === Reset/Normalize === */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,
canvas,details,embed,figure,figcaption,
footer,header,hgroup,main,menu,nav,output,
ruby,section,summary,time,mark,audio,video {
  margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,main,menu,nav,section { display:block; }
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }
button, input, select, textarea {
  font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; outline: none; box-sizing: border-box;
}
a { text-decoration: none; color: inherit; }
div,p{
  line-height: 1.6;
  letter-spacing: 0.02em;
}
h1{
  line-height: 1.2;
}

body {
  background: linear-gradient(
    120deg,
    #fbfcff 0%,
    #d1d4da 60%,
    #e8ecf3 100%
  );
  font-family: 'Noto Sans JP', 'Montserrat', sans-serif;
  margin:0; padding:0; min-height:100vh;
  overflow-x: hidden;
}
.site-header {
  background: #0d109a; /* 落ち着いたネイビー */
  color: #fff;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 2px 12px rgba(26, 38, 64, 0.14);
}
.header-inner {
  display: flex;
  align-items: center;
  width: 94vw;
  max-width: 980px;
}
.logo-img {
  height: 24px;
  margin-right: 12px;
  max-width: 120px;
}
/* .main-wrap {
  max-width: 980px;
  margin: 32px auto 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(20,40,60,0.11);
  padding: 28px 24px 36px 24px;
  box-sizing: border-box;
  overflow: hidden;
} */

.main-wrap {
  max-width: 980px;
  margin: 48px auto 0 auto;
  background: rgba(255,255,255, 0.96); /* 少しだけ透けさせる */
  border-radius: 20px;
  box-shadow:
    0 10px 32px 0 rgba(32,49,92,0.13),  /* 周囲に淡い影 */
    0 2px 8px 0 rgba(60,90,180,0.10);   /* 下方向にも薄く */
  padding: 36px 28px 44px 28px;
  box-sizing: border-box;
  /* アニメーションでふわっと登場もおすすめ */
  animation: floatUp 0.7s cubic-bezier(.25,.9,.38,1.1);
}

@keyframes floatUp {
  from { opacity:0; transform: translateY(30px) scale(0.98);}
  to   { opacity:1; transform: none;}
}

.page-title {
  text-align:center;
  font-family:'Montserrat', 'Noto Sans JP',sans-serif;
  font-size: 2rem;
  margin-bottom: 24px;
  letter-spacing:0.04em;
  color: #204477;
}
.notice-bar {
  background: #d9e8f7;
  color: #204477;
  font-size: 1.04rem;
  text-align:center;
  border-radius: 10px;
  padding: 14px 4vw 10px 4vw;
  margin-bottom: 24px;
}
.form-row {
  margin-bottom: 20px;
}
.form-label {
  font-weight: bold;
  font-size: 1.07rem;
  display:block;
  margin-bottom:8px;
  color:#284d85;
}
.flex {
  display: flex;
  gap: 12px;
  align-items: center;
}
.form-input, .form-select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 1.03rem;
  padding: 12px 10px;
  border: 1.4px solid #b0c4de;
  border-radius: 6px;
  margin-bottom: 2px;
  background: #fcfcfe;
  height: 44px;
}
.form-select { height: 46px; }
.form-input:focus, .form-select:focus { border-color: #2a8bcc; outline: none; }
input[type="email"], input[type="tel"], input[type="text"], select {
  font-family: inherit;
  letter-spacing:0.02em;
}
.gender-options {
  display: flex;
  gap: 24px;
  margin-left: 4px;
}
.gender-options label { font-size: 1rem; }
.gender-options input[type="radio"] { accent-color: #1c62b9; transform: scale(1.15);}
.tel-group, .postal-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tel-group input,
.postal-group input {
  max-width: 100px;
  text-align: center;
  font-size: 1.03rem;
}
#zip-btn, .big-zip-btn {
  background: #2176c1;
  color: #fff;
  font-weight: bold;
  font-size: 1.07rem;
  border:none;
  border-radius: 6px;
  padding: 13px 28px;
  margin-left:12px;
  box-shadow:0 3px 12px rgba(32,112,179,0.13);
  cursor:pointer;
  transition: transform .14s;
  min-width: 130px;
}
#zip-btn:active { transform: scale(0.97); }
#camera-area { display: flex; flex-direction: column; align-items: center; }
#camera-wrap {
  width: 300px;
  height: 200px;
  background: #232a37;
  border-radius: 10px;
  box-shadow: 0 1px 10px rgba(40, 77, 133, 0.09);
  margin-bottom: 12px;
  position:relative;
  overflow:hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#camera {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border:2px solid #2196f3;
}
.photo-btns { margin-top: 7px; margin-bottom: 10px;}
#main-shutter-btn {
  background: #2176c1; color:#fff; font-size: 1rem;
  padding: 13px 38px; border-radius:20px; border:none; font-weight:bold;
  box-shadow: 0 2px 7px rgba(32,118,193,0.11); cursor:pointer;
  transition: background .12s;
}
#main-shutter-btn:active { background: #164c88; }
.canvas-group { text-align: center; margin-top: 6px;}
canvas {
  border: 1.2px solid #0b599f;
  border-radius: 8px;
  display:none;
  margin: 8px auto 0 auto;
  width: 300px;
  height: 200px;
  max-width: 100vw;
}
.retake-btn {
  display: none;
  background:#444;
  color:#fff;
  border-radius:5px;
  border:none;
  padding:7px 24px;
  font-size:0.96rem;
  margin:8px 0;
}
.terms-row-vertical {
  margin: 30px 0 26px 0;
  text-align:center;
}
#terms-btn {
  background: #205e9b;
  color: #fff;
  font-weight: bold;
  font-size: 1.08rem;
  border:none;
  border-radius:8px;
  padding:14px 32px;
  margin:0 auto 10px auto;
  display:block;
  box-shadow: 0 3px 10px rgba(32,94,155,0.13);
  transition:background .13s;
}
#terms-btn:active { background:#17456e; }
.agree-block label {
  font-size:1.06rem;
  color:#194873;
  display:block;
  margin-top: 10px;
}
#agree-box { accent-color: #257ae0; margin-right:8px; transform:scale(1.13);}
.final-submit-btn {
  background: linear-gradient(90deg,#1b55a3 0%,#2478be 100%);
  color:#fff;
  font-size:1.08rem;
  font-weight:bold;
  padding:17px 0;
  width:60%;
  border-radius:13px;
  box-shadow:0 7px 24px rgba(32, 94, 155, 0.14);
  margin:28px auto 0 auto;
  letter-spacing:0.07em;
  display:block;
  transition:transform .11s, box-shadow .13s;
}
.final-submit-btn[disabled] { background:#d6e4f5 !important; color:#c7cfd9; cursor:not-allowed; box-shadow: none; }
.final-submit-btn:active { transform: scale(0.98);}
.form-footer-link { text-align:center; margin-top:60px; }
.contact-admin-btn {
  background:#eee; color:#2656a2; font-weight:bold; border:none;
  font-size:0.98rem; border-radius:8px; padding:12px 38px;
  text-decoration:none; transition:background .14s;
  box-shadow: 0 1px 7px rgba(44,80,148,0.07);
}
.contact-admin-btn:active { background:#cfddeb; }
#terms-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.66);
  z-index: 9999;
  align-items:center;
  justify-content: center;
  overflow: auto;
}
#terms-scroll {
  background:#fff;
  border-radius: 11px;
  padding: 28px 2vw 32px 2vw;
  max-width: 97vw;
  min-width: 240px;
  width: 740px;
  max-height:80vh;
  overflow-y: auto;
  margin:auto;
  position:relative;
  display:block;
}
#pdf-container {
  width:100%;
  min-height:200px;
  margin-bottom:18px;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#pdf-container canvas {
  display: block;
  width: 92% !important;
  max-width: 660px;
  margin: 0 auto 18px auto;
  height: auto !important;
  max-height: 76vh;
}
@media (max-width: 699px) {
  #pdf-container canvas {
    max-width: 96vw;
    width: 98vw !important;
  }
}
.close-btn-bottom {
  background: #204477; color: #fff; font-size: 1.01rem;
  padding:10px 46px; border-radius:7px; border:none;
  margin: 18px auto 0 auto; display: block; font-weight:bold;
  letter-spacing:0.07em;
  transition:background .13s;
}
.close-btn-bottom:active { background:#1c3764; }
footer, .footer {
  width:100%;
  padding:28px 0 18px 0;
  text-align:center;
  background:#e5f1fb;
  margin-top:38px;
  font-size:0.98rem;
  color:#284d85;
  border-radius:0 0 18px 18px;
}
@media (min-width: 700px) and (max-width: 1100px) {
  .main-wrap {
    max-width: 740px;
    padding: 18px 1.2em 36px 1.2em;
  }
  #camera-wrap, canvas {
    width: 420px;
    height: 280px;
    max-width: 98vw;
  }
}
@media (max-width: 699px) {
  .main-wrap { max-width:100vw; border-radius:10px; padding:7px 0.5em 24px 0.5em; }
  .page-title { font-size:1.3rem; }
  #camera-wrap, canvas { width: 95vw; max-width:340px; height:150px; }
  .form-input, .form-select { font-size:0.97rem; height:36px; padding:8px 5px;}
  .final-submit-btn { width:98%; }
  .site-header { height:52px; }
  .logo-img { height:18px; }
  #terms-scroll { width:99vw; max-width:99vw; }
}
@media (max-width: 450px) {
  #camera-wrap, canvas { width: 94vw; max-width:280px; height:180px; }
  .main-wrap { padding-left: 0.2em; padding-right: 0.2em; }
}