:root{color-scheme:light;}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  background:linear-gradient(#fff1f2,#ffffff 40%,#ecfdf5);
  color:#0f172a
}
a{color:inherit;text-decoration:underline}

.container{max-width:1000px;margin:0 auto;padding:24px}

.header{
  position:relative;
  z-index:1000;
  background:#ffffff;
  border-bottom:1px solid #e2e8f0;
}

#headWrap{padding-top:12px;padding-bottom:12px;text-align:center}
.logo{max-width:100%;height:auto;object-fit:contain;vertical-align:middle}

h1{font-size:clamp(24px,3.5vw,32px);margin:0 0 6px;font-weight:800;letter-spacing:-.02em}
.muted{color:#475569;font-size:16px;margin:6px 0 0;line-height:1.6}

.grid{display:grid;gap:16px}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr}}

.card{
  background:rgba(255,255,255,.9);
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:18px;
  box-shadow:0 8px 24px rgba(2,6,23,.06)
}
.card h3{margin:0 0 10px;font-size:18px;font-weight:700}
.small{font-size:12px;color:#64748b}
.titleStar{font-size:20px;font-weight:800;margin-bottom:4px}

.btn{
  appearance:none;
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:10px 18px;
  font-size:14px;
  background:#fff;
  cursor:pointer
}
.btn.primary{background:#0f172a;color:#fff;border-color:#0f172a}
.btn+.btn{margin-left:8px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* 結果画面上部（ヘッダー非表示時に出す） */
#resultTop{padding-top:18px;padding-bottom:18px}

/* 印刷用ヘッダー */
.printHeader{display:none}
.printHeader .printLine{margin:6px 0 0;color:#334155;font-size:14px}

.pickerWrap{display:flex;flex-direction:column;gap:10px}

/* 入力欄・ラベル */
.field{
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  width:100%;
  font-size:16px;
  box-sizing:border-box
}
label.small,.tripRow label,#tripArea label{
  font-size:18px!important;
  color:#334155;
  font-weight:600;
  display:block;
  margin-bottom:4px
}

/* スライダー（枠内に収まる） */
#pickerArea{overflow:hidden}
#pickerArea input[type="range"]{
  width:100%;
  display:block;
  box-sizing:border-box;
  margin:0;
  padding:0;
  background:transparent;
  height:34px;
  -webkit-appearance:none;
  appearance:none
}
#pickerArea input[type="range"]::-webkit-slider-runnable-track{height:6px;background:#e2e8f0;border-radius:999px}
#pickerArea input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#0f172a;border:2px solid #fff;margin-top:-6px;
  box-shadow:0 1px 2px rgba(0,0,0,.15)
}
#pickerArea input[type="range"]::-moz-range-track{height:6px;background:#e2e8f0;border-radius:999px}
#pickerArea input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:#0f172a;border:2px solid #fff;
  box-shadow:0 1px 2px rgba(0,0,0,.15)
}

/* 旅行月入力 */
.tripRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tripRow select{width:100%;border:1px solid #cbd5e1;border-radius:12px;padding:10px;background:#fff}
select.field{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364758b' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;
  padding-right:36px
}
input.field[type="date"]::-webkit-calendar-picker-indicator{margin-right:4px;padding-left:4px}

.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.list{padding-left:18px;margin:8px 0}
.list li{margin:6px 0}

/* フェードイン */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fadeIn{animation:fadeIn .45s ease-out both}

/* ヘッダーを丸ごと隠す */
.hideTop{display:none!important}
.isHidden{display:none!important}

/* 旅の月運（年運と同サイズ・色で差別化） */
.tripFortune{font-size:16px;color:#2563eb;font-weight:600;margin-top:8px;line-height:1.6}

footer{font-size:12px;color:#64748b;padding:24px;text-align:center}

@media print{
  header,.pickerWrap,.seg,#uranauBtn,#clearBtn,#backBtnR,#resultTop{display:none!important}
  .printHeader{display:block}
  body{background:#fff}
  .container{max-width:720px;padding:16px}
  .grid{grid-template-columns:1fr!important}
  .logo-img{max-width:100%!important;max-height:90px!important;object-fit:contain}
  .printHeader .printLine{font-size:13px}
  .card{box-shadow:none;border-color:#999}
}

.logo-img{width:100%;max-width:1000px;height:auto;display:block;margin:0 auto 12px}

/* ▼ 広告バナー（ロゴの幅に追従、高さはロゴの半分相当） */
.adWrap{max-width: var(--logo-max, 100%); margin: 10px auto 0;}
.adBanner{
  display:block;width:100%;
  aspect-ratio: 1500 / 190;
  border-radius: 12px;
  overflow:hidden;
  box-shadow: 0 8px 20px rgba(2,6,23,.08);
  background:#f1f5f9;
  position:relative;
}
.adBanner img{width:100%;height:100%;object-fit: cover;display:block;transition: opacity .5s ease;opacity: 1;}
.adBanner.is-fading img{opacity: 0;}
@media (prefers-reduced-motion: reduce){.adBanner img{ transition:none; }}

/* スマホ時：生まれ年ラベル内の数値を次行に */
@media (max-width: 768px){
  #pickerArea label.small .yearNum{
    display:block;
    font-size:28px;
    font-weight:800;
    line-height:1.1;
    margin-top:4px;
  }
}