/* 福娘コンテスト応募管理システム — 共通スタイル
   配色はエントリシート実物（緑帯＋白抜き）に合わせる。
   応募者の大半が10〜20代でスマートフォンから来る前提で、モバイル優先で書く。 */
:root{
  --green:#4c6b52;
  --green-d:#3a5340;
  --green-l:#e8eee9;
  --ink:#1d221e;
  --ink-2:#5b655e;
  --ink-3:#8b948d;
  --bg:#f4f5f2;
  --surface:#fff;
  --line:#d6dad4;
  --alert:#a93726;
  --alert-bg:#f8eae7;
  --focus:#7aa588;
  --tap:48px;              /* 指で押せる最小の高さ */
  --gap:1.15rem;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  font-size:16px;line-height:1.7;
  overflow-wrap:anywhere;
}
.wrap{max-width:44rem;margin:0 auto;padding:0 1rem 3rem}
.wrap-wide{max-width:72rem}

header.site{background:var(--green);color:#fff;padding:1.2rem 0;margin-bottom:1.2rem}
header.site .inner{max-width:44rem;margin:0 auto;padding:0 1rem}
header.site.wide .inner{max-width:72rem}
header.site .shrine{font-size:.8rem;letter-spacing:.14em;opacity:.85;margin:0 0 .2rem}
/* システム設定で登録したロゴ。未登録なら要素自体が挿入されない */
header.site .sitelogo{display:block;max-height:40px;max-width:min(100%,220px);margin:0 0 .45rem}
@media print{ header.site .sitelogo{max-height:32px} }
header.site h1{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:.03em;line-height:1.4}

.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1rem 1.3rem;margin-bottom:1rem}
.card > h2{margin:0 0 .2rem;font-size:1.05rem;color:var(--green-d)}
.card > .desc{margin:0 0 1rem;font-size:.86rem;color:var(--ink-2);line-height:1.65}
.card > h2 + .field,.card > h2 + .grid2{margin-top:1rem}

/* ---------- 入力欄 ---------- */

.field{margin-bottom:var(--gap);min-width:0}
.field:last-child{margin-bottom:0}
.field label.lb,.field > .lb{display:block;font-weight:700;font-size:.92rem;margin-bottom:.35rem;line-height:1.45}
.req{
  display:inline-block;background:var(--alert);color:#fff;font-size:.66rem;
  padding:.08rem .36rem;border-radius:3px;vertical-align:.14em;margin-left:.35rem;letter-spacing:.04em;
}
/* 任意項目。必須バッジと同じ形にして、色と枠だけで「必須ではない」と分かるようにする */
.opt{
  display:inline-block;background:#fff;color:var(--ink-2);border:1px solid var(--line);font-size:.66rem;
  padding:.08rem .36rem;border-radius:3px;vertical-align:.14em;margin-left:.35rem;letter-spacing:.04em;
}
.hint{display:block;font-size:.79rem;color:var(--ink-2);font-weight:400;margin-top:.1rem}

input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{
  width:100%;font:inherit;font-size:16px;      /* 16px未満だとiOSが勝手に拡大する */
  min-height:var(--tap);padding:.6rem .75rem;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
  appearance:none;-webkit-appearance:none;
}
input[type=date]{min-height:var(--tap)}
/* 誕生日の年・月・日。年は4桁なので少し広く */
.ymd{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:.5rem}
select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235b655e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:12px;padding-right:2.2rem;
}
textarea{resize:vertical;min-height:8rem;line-height:1.75}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}

/* 単位つき（歳・cm・分）。
   単位を枠の外に置くとその分だけ入力欄が狭くなり、他の欄と幅が揃わない。
   枠の内側に重ねて置くことで、全ての入力欄を同じ幅にする。 */
.unit{position:relative}
.unit input{width:100%;padding-right:3rem}
.unit .u{
  position:absolute;right:.9rem;top:50%;transform:translateY(-50%);
  color:var(--ink-2);font-size:.95rem;pointer-events:none;
}

.autofilled{
  display:block;font-size:.76rem;color:var(--green-d);margin-top:.25rem;
}

/* 2列。狭い画面では1列に落ちる。ラベルの高さが違っても入力欄の下端を揃える */
.grid2{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-bottom:var(--gap)}
.grid2 > .field{margin-bottom:0}
.grid2:last-child{margin-bottom:0}
@media (min-width:560px){
  .grid2{grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
  /* 補足文の有無でラベルの高さが変わると入力欄がずれるため、高さを合わせる */
  .grid2 > .field > .lb{min-height:2.75rem}
}

/* ---------- ラジオ ---------- */

.radios{display:flex;flex-wrap:wrap;gap:.5rem}
.radios label{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--line);border-radius:99px;padding:.55rem 1rem;
  font-size:.95rem;cursor:pointer;background:#fff;min-height:var(--tap);
}
.radios label:has(input:checked){background:var(--green-l);border-color:var(--green);font-weight:700}
.radios input{accent-color:var(--green);width:1.15rem;height:1.15rem}

/* ---------- 文字数カウンタ ---------- */

.counter{font-size:.8rem;color:var(--ink-2);text-align:right;margin-top:.25rem;font-variant-numeric:tabular-nums}
.counter.over{color:var(--alert);font-weight:700}

/* ---------- 写真 ---------- */

.field.photo{margin-bottom:1.5rem}
.pickzone{
  display:block;
  border:1.5px dashed var(--line);border-radius:10px;
  padding:.9rem;background:#fbfcfb;
}
.pickzone.over{border-color:var(--green);background:var(--green-l)}
.picks{display:grid;grid-template-columns:1fr;gap:.55rem}
@media (min-width:460px){ .picks{grid-template-columns:1fr 1fr} }
.picks.solo{grid-template-columns:1fr}

button.pick{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-size:.98rem;font-weight:700;
  min-height:var(--tap);padding:.7rem 1rem;
  border:1px solid var(--green);border-radius:8px;cursor:pointer;
  background:#fff;color:var(--green-d);
}
button.pick.cam{background:var(--green);color:#fff}
button.pick.cam:hover{background:var(--green-d)}
button.pick.lib:hover{background:var(--green-l)}
button.pick:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button.pick .ico{font-size:1.05rem;line-height:1}
button.pick[hidden]{display:none}

.dragnote{margin:.6rem 0 0;text-align:center;font-size:.78rem;color:var(--ink-3)}
.touch .dragnote{display:none}          /* 指で操作する端末では出さない */

.preview{display:none;margin-top:.75rem;text-align:center}
.preview.on{display:block}
.preview img{
  max-width:min(220px,60vw);width:100%;height:auto;
  border:1px solid var(--line);border-radius:6px;background:#fff;
}
.preview .meta{font-size:.78rem;color:var(--ink-2);margin-top:.4rem;line-height:1.5}
button.retake{
  margin-top:.5rem;font:inherit;font-size:.86rem;
  min-height:40px;padding:.35rem 1rem;
  border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink-2);cursor:pointer;
}
button.retake:hover{border-color:var(--ink-3);color:var(--ink)}

.working{font-size:.86rem;color:var(--green-d);text-align:center;margin-top:.6rem}

/* ---------- エラー ---------- */

.err{display:none;color:var(--alert);font-size:.84rem;margin-top:.3rem;font-weight:700;line-height:1.5}
.field.bad input,.field.bad select,.field.bad textarea,.field.bad .pickzone{border-color:var(--alert)}
.field.bad .err{display:block}

/* 個人情報の取り扱い（2026-09-29）。長文なので折りたたみ、同意チェックは指で押しやすく */
.privacy-body{border:1px solid var(--line);border-radius:8px;background:#fff;margin-bottom:1rem}
.privacy-body > summary{cursor:pointer;min-height:var(--tap);display:flex;align-items:center;padding:0 .9rem;
  font-weight:700;color:var(--green-d);list-style:none}
.privacy-body > summary::-webkit-details-marker{display:none}
.privacy-body > summary::before{content:"＋";margin-right:.4rem}
.privacy-body[open] > summary::before{content:"－"}
.privacy-text{padding:0 .9rem 1rem;font-size:.86rem;line-height:1.75;max-height:55vh;overflow:auto}
.privacy-text h3{font-size:.9rem;margin:1rem 0 .3rem}
.privacy-text ul{margin:0;padding-left:1.2rem}
.privacy-text p{margin:.3rem 0}
.agree{display:flex;align-items:flex-start;gap:.6rem;min-height:var(--tap);font-weight:700;font-size:.92rem;line-height:1.5;cursor:pointer}
.agree input{width:22px;height:22px;flex:none;margin-top:.1rem;accent-color:var(--green-d)}
.agree .req{margin-left:.4rem}
.field.bad .agree{color:var(--alert)}
.mailbtn{margin-top:.5rem;min-height:var(--tap);padding:0 1.1rem;border:1px solid var(--green-d);border-radius:99px;
  background:#fff;color:var(--green-d);font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
.mailshow{display:block;margin-top:.4rem;user-select:all;word-break:break-all}

.banner{padding:.85rem 1rem;border-radius:9px;font-size:.9rem;margin-bottom:1rem;line-height:1.65}
.banner.warn{background:var(--alert-bg);color:var(--alert);border:1px solid #e6c4bd}
.banner.info{background:var(--green-l);color:var(--green-d);border:1px solid #c9d8ce}

/* ---------- 送信 ---------- */

.submitbar{position:sticky;bottom:0;padding:.7rem 0 max(.7rem,env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 62%,transparent)}
button.primary{
  width:100%;font:inherit;font-size:1.05rem;font-weight:700;color:#fff;background:var(--green);
  border:none;border-radius:9px;padding:1rem;cursor:pointer;min-height:54px;
  box-shadow:0 2px 10px rgba(60,83,64,.22);
}
button.primary:hover{background:var(--green-d)}
button.primary:disabled{background:var(--ink-3);cursor:not-allowed;box-shadow:none}
button.primary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

button.ghost{
  font:inherit;font-size:.88rem;color:var(--green-d);background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:.5rem 1rem;cursor:pointer;min-height:40px;
}
button.ghost:hover{border-color:var(--green);background:var(--green-l)}

.sending{display:none;text-align:center;padding:.7rem;font-size:.9rem;color:var(--ink-2)}
.sending.on{display:block}

footer.site{margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-3);text-align:center}

/* ---- 画面切り替えバー（説明用・本番では DEMO_NAV=false で消える） ---- */
.demo-nav{
  position:sticky;top:0;z-index:40;
  background:var(--green-d);color:#fff;
  display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;
  padding:.35rem .9rem;font-size:.86rem;
}
.demo-nav-tag{
  font-size:.68rem;letter-spacing:.1em;opacity:.7;
  border:1px solid rgba(255,255,255,.35);border-radius:3px;
  padding:.05rem .4rem;margin-right:.5rem;white-space:nowrap;
}
.demo-nav a{color:#fff;text-decoration:none;padding:.3rem .75rem;border-radius:5px;white-space:nowrap}
.demo-nav a:hover{background:rgba(255,255,255,.14)}
.demo-nav a.on{background:#fff;color:var(--green-d);font-weight:700}
.demo-nav a:focus-visible{outline:2px solid #fff;outline-offset:1px}
.demo-nav-note{margin-left:auto;font-size:.72rem;opacity:.62;white-space:nowrap}
@media (max-width:640px){
  .demo-nav-note{display:none}
  .demo-nav{font-size:.8rem;padding:.3rem .5rem}
  .demo-nav a{padding:.3rem .55rem}
}
@media print{ .demo-nav{display:none !important} }

/* ---------- 画面が広いとき ---------- */
@media (min-width:560px){
  header.site{padding:1.4rem 0;margin-bottom:1.6rem}
  header.site h1{font-size:1.4rem}
  .card{padding:1.3rem 1.3rem 1.5rem}
  .wrap{padding-bottom:4rem}
  .submitbar{position:static;background:none;padding:.5rem 0 0}
}

/* ---------- 管理画面の共通パーツ ---------- */
.apanel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem 1.3rem;margin-bottom:1.1rem}
.apanel > h2{margin:0 0 .2rem;font-size:1rem;color:var(--green-d)}
.apanel > .desc{margin:0 0 1.1rem;font-size:.84rem;color:var(--ink-2);line-height:1.7}
.apanel > .desc:last-child{margin-bottom:0}

.arow{margin-bottom:1rem}
.arow:last-child{margin-bottom:0}
.arow > label,.arow > .k{display:block;font-weight:700;font-size:.88rem;margin-bottom:.3rem}
.arow .note{display:block;font-size:.78rem;color:var(--ink-2);font-weight:400;margin-top:.1rem}
.acols{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){ .acols{grid-template-columns:1fr 1fr} .acols.three{grid-template-columns:1fr 1fr 1fr} }

/* 選択肢の並びを編集する */
.listedit{display:flex;flex-direction:column;gap:.4rem}
.listedit .li{display:flex;gap:.4rem;align-items:center}
.listedit .li input{flex:1;min-height:42px}
.listedit .li button{
  font:inherit;font-size:.8rem;min-height:42px;padding:0 .7rem;flex:none;
  border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink-2);cursor:pointer;
}
.listedit .li button:hover{border-color:var(--alert);color:var(--alert)}
.listedit .li .mv{color:var(--ink-3);min-width:2.2rem}
.listedit .li .mv:hover{border-color:var(--green);color:var(--green-d)}
.addbtn{
  font:inherit;font-size:.86rem;margin-top:.5rem;min-height:42px;padding:0 1rem;
  border:1px dashed var(--line);border-radius:6px;background:#fff;color:var(--green-d);cursor:pointer;
}
.addbtn:hover{border-color:var(--green);background:var(--green-l)}

.savebar{
  position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 65%,transparent);
  padding:.8rem 0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.savebar button{width:auto;min-width:14rem}
.savebar .msg{font-size:.86rem;color:var(--green-d)}
.savebar .msg.bad{color:var(--alert)}

/* ダッシュボードの導線 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.8rem}
a.card-link{
  display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:1rem 1.1rem;text-decoration:none;color:inherit;
}
a.card-link:hover{border-color:var(--green);background:#fbfcfb}
a.card-link .t{font-weight:700;color:var(--green-d);margin-bottom:.2rem}
a.card-link .d{font-size:.83rem;color:var(--ink-2);line-height:1.6}
a.card-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

table.mini{border-collapse:collapse;width:100%;font-size:.86rem}
table.mini th,table.mini td{padding:.45rem .6rem;border-bottom:1px solid var(--line);text-align:left}
table.mini th{font-size:.74rem;color:var(--ink-3);font-weight:400}
table.mini td.r,table.mini th.r{text-align:right}

.bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.bar .spacer{flex:1}