/* 色と文字はフォーム（/index.html）とそろえる */
:root{
  --bg:#f6f7f5; --ink:#1e2a30; --sub:#4c5a5f; --mute:#5a676b; --sea:#2f5d6e; --line:#dfe5e3;
  --sky:linear-gradient(#b7d5dc 0%,#e9e4d8 50%,#f5d2b8 80%,#f4b996 100%);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;line-height:1.85;-webkit-text-size-adjust:100%}
a{color:var(--sea)}
.mincho{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-weight:500}

/* 上の帯：フォームと同じ夕方の空と海、縞の太陽、明石海峡大橋 */
.band{position:relative;height:150px;overflow:hidden;background:var(--sky)}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(0,0,0,.35) 0.6px,transparent 0.8px);background-size:3px 3px}
.sun{position:absolute;right:5%;top:58px;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(#ffe2a6,#f8a77c 55%,#ec7a6a);box-shadow:0 0 60px 24px rgba(255,196,150,.45);
  -webkit-mask-image:linear-gradient(#000 0 56%,transparent 56%),repeating-linear-gradient(#000 0 5px,transparent 5px 8px);
  mask-image:linear-gradient(#000 0 56%,transparent 56%),repeating-linear-gradient(#000 0 5px,transparent 5px 8px)}
.sea{position:absolute;left:0;right:0;bottom:0;height:42px;background:linear-gradient(#efc4aa,#b9c9c8 30%,#5f8f9c 80%,#2a5263)}
.bridge{position:absolute;left:50%;bottom:34px;width:min(720px,100%);height:auto;transform:translateX(-50%)}
.band-top{position:relative;display:flex;justify-content:space-between;align-items:center;max-width:760px;margin:0 auto;padding:16px 20px 0;font-size:12px}
.band-top b{letter-spacing:.12em}
.band-top span{letter-spacing:.2em;color:var(--sea)}

.wrap{max-width:760px;margin:0 auto;padding:20px 16px calc(64px + env(safe-area-inset-bottom))}
.back{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--ink);text-decoration:none}
.back:hover{border-color:var(--sea)}
.card{margin-top:16px;background:#fff;border-radius:16px;padding:26px 22px 30px;box-shadow:0 1px 2px rgba(30,42,48,.06),0 8px 24px rgba(30,42,48,.06)}
h1{font-size:24px;letter-spacing:.06em;margin:0 0 2px;line-height:1.5}
.lead{margin:0 0 6px;color:var(--mute);font-size:13px}
h2{display:flex;align-items:center;gap:10px;font-size:17px;margin:28px 0 6px;letter-spacing:.04em}
h2::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--sea);box-shadow:0 0 0 3px #dbe7e6}
p,li{font-size:15px}
p{margin:6px 0}
ul{padding-left:1.3em;margin:6px 0}
.contact{margin-top:8px;padding:12px 14px;border-radius:12px;background:#e4ecea;font-size:14px}
.dates{margin:26px 0 0;color:var(--mute);font-size:12px}
.foot{margin:24px 0 0;text-align:center;font-size:11px;color:var(--mute)}

@media(min-width:900px){
  .band{height:190px}
  .sun{right:calc(50% - 420px);top:62px;width:66px;height:66px}
  .card{padding:36px 44px 40px}
  h1{font-size:28px}
}