:root {
  --brand: #fbb03b;
  --ink: #111;
  --muted: #666;
  --border: #d9d9d9;
  --bg: #fff;
}

.form-wrap {
  font-family: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
}


*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}


img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* --- Hero & Title Band --- */
.top {
  position: relative;
}

.ph {
  display: grid;
  place-items: center;
  color: #8a8a8a;
  font-weight: 700;
  background: #f5f5f5;
  border: 2px dashed #cfcfcf;
  border-radius: 12px;
}

.top-img {
  height: 48vh;
  min-height: 260px;
}

.title-band {
  max-width: 1100px;
  margin: -60px auto 0;
  padding: 0 16px;
}

.title-band .title-img {
  height: 90px;
}

/* --- Lead Copy --- */
.lead {
  max-width: 1100px;
  margin: 28px auto 0;
  padding: 0 16px;
  text-align: center;
}

.lead h2 {
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.3;
  letter-spacing: 0.02em;
  font-weight: 800;
}

.sp-break {
  display: none;
}

/* TOP */
/* 背景を全幅に表示 */
.top-visual {
  position: relative;
  width: 100%;
  height: auto;          /* 高さは画像に合わせる */
  overflow: hidden;
}

.top-bg {
  width: 100%;           /* 横幅いっぱい */
  height: auto;          /* 縦比率を維持 */
  display: block;
  opacity: 0.4;          /* 透過したいならここで調整（0〜1） */
}

/* もし上にテキストを重ねたい場合 */
.top-visual .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.95));
  pointer-events: none; /* オーバーレイがクリックを邪魔しない */
}



/* タイトル画像を上に重ねる */
.top-txt {
  position: absolute;
  inset: 0;
  place-items: center;
  margin: auto;
  width: 80%;
  text-align: center;
  margin-top: 10px;
}




/* ヒーロー見出しの中央寄せをガチ固定 */
.top-visual { position: relative; }

/* 背景画像を使っているならこの2行も安定化（任意）
.top-visual .top-bg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center;
} */

.top-txt{
  position: absolute;
  inset: 0;                /* = top:0 right:0 bottom:0 left:0 */
  display: grid;           /* どの端末でも中央に来る鉄板 */
  place-items: center;     /* 水平＆垂直センター */
  text-align: center;
  padding-inline: 12px;    /* SEの狭幅でハミ出さないよう少し余白 */
}

.top-txt img{
  display: block;          /* インラインの“左寄りクセ”を無効化 */
  margin-inline: auto;     /* 中央寄せ */
  max-width: min(92vw, 680px);
  height: auto;
}

/* さらにSE等の極小幅向けに保険（任意） */
@media (max-width: 360px){
  .top-txt { padding-inline: 10px; }
  .top-txt img { max-width: 92vw; }
}
















.top-txt img {
  width: min(800px, 80%);
  margin-top: 0;
}

.top-date{
  width: 40%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.top-place {
  width: 50%;
  margin: 20px auto;
}

.top-recruit {
  width: 90%;
  margin: auto;
  margin-top: -20px;
}
/* カラオケ ヨガ */
.programs-top-img {
  width: 80%;         /* 少し小さく */
  max-width: 600px;   /* 上限を決めておくと安心 */
  display: block;
  margin: 0 0 0 40px; /* 右寄せ */
}

/* --- Programs  --- */
.programs {
  max-width: 1100px;
  width: 88%;
  margin: 22px auto 0;
  padding: 0 16px;
  display: grid;
  gap: 20px;
}

.program {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
}

.program-head {
  padding: 16px 16px 0;
}

.program, .card {
  /* border: 1px solid var(--border); */
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
}

.program-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 14px;
  background: #fff5f4;
  color: var(--brand);
  border: 1px solid #ffd8d4;
  border-radius: 1000px;
  padding: 6px 12px;
  margin-bottom: 10px;
}

#karaoke .badge img{
  width: 40%;
  margin: 10px 0 0 0;
}

#yoga .badge img{
  width: 20%;
  margin: 10px 0 0 0;
}

.program-main {
  aspect-ratio: 16/9;
}

.program-spec {
  padding: 16px;
}

.meta-row {
  display: grid;
  grid-template-columns: 80px 1fr; /* 左ラベル / 右内容 */
  gap: 12px;                        /* ラベルと内容の間隔 */
  align-items: flex-start;
}

.meta-label {
  font-weight: 800;
  white-space: nowrap;
  position: relative;
  padding-right: 16px;  /* 区切り線分の余白 */
}

.meta-label::after {
  content: "｜";        /* 区切り線 */
  position: absolute;
  right: 0;
  top: 0;
  color: #333;          /* 色は調整OK */
}

.spec-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: flex-start;
}

.spec-label {
  font-weight: 800;
  white-space: nowrap;
}

.spec-val {
  color: #111;
}

.note {
  display: block;     /* 改行は残す */
  margin-top: -5px;    /* 直前のテキストとの余白を小さく */
  font-size: 12px;
  color: var(--muted);
}

.program-action {
  padding: 0 16px 18px;
}




.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 800;
}

.btn-primary {
  color: #fff;
}

.btn-primary:hover {
  filter: brightness(.98);
}

/* --- Inquiry heading --- */
.inquiry {
  max-width: 1100px;
  margin: 28px auto 0;
  padding: 0 16px;
}

.inquiry h3 {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
}

/* --- Form --- */
.form-wrap {
  max-width: 880px;
  margin: 16px auto 50px;
  padding: 0 16px;
}

.form-title {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  border-radius: 12px 12px 0 0;
  font-size: 20px;
  font-weight: 800;
}

.form-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background: #fff;
}

.form-table th,
.form-table td {
  border-top: 1px solid var(--border);
  padding: 14px 12px;
  vertical-align: middle;
}

.form-wrap table th {
   font-size:14px !important; white-space:nowrap; 
  }


.form-table th {
  width: 36%;
  background: #f7f7f7;
  text-align: left;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  height: 44px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 8px 12px;
  height: 44px;
  background: #fff;
  user-select: none;
}

.help {
  font-size: 12px;
  color: var(--muted);
}

.song-row.disabled input {
  background: #f2f2f2;
  color: #888;
  text-decoration: line-through;
}

.status-note {
  display: inline-block;
  font-size: 12px;
  color: var(--muted);
  margin-left: 6px;
  min-width: 160px;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 18px 0;
}

.btn2 {
  min-width: 150px;
  background: var(--brand);
  font-size: 16px;
  color: #fff;
  font-weight: 800;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
}

.btn2.btn-dark {
  background: #444;
}

.form-notes {
  font-size: 13px;
  color: #444;
  margin-top: 6px;
}

.site-footer {
  background: var(--brand);
  color: #fff;
  text-align: center;
  padding: 12px;
}

/* 歌唱予定曲の行だけ、横並びで中央揃えに */
.song-row td {
  display: flex;
  align-items: center;   /* 縦中央 */
  gap: 8px;              /* 入力と注記の間隔 */
}

/* 入力欄は伸縮OKにして横幅を確保 */
#songField {
  flex: 1;
  min-width: 0;          /* はみ出し防止（Safari対策） */
}

/* 注記は余白をリセットして行ズレを防ぐ */
.status-note {
  margin: 0;
  line-height: 1.2;
  font-size: 12px;       /* 既存と合わせるなら省略可 */
}

/* 歌唱予定曲/歌手名の行だけ調整 */
.can-disable {
  display: flex;
  align-items: center;   /* 縦中央揃え */
  gap: 8px;              /* 入力と注記の間隔 */
}

#songField {
  flex: 1;               /* 入力欄が残り幅を全部使う */
  min-width: 0;          /* はみ出し防止 */
}

.status-note {
  flex: 0 0 auto;        /* 注記は幅固定 */
  min-width: auto;       /* 160pxは削除してOK */
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}


.copyright {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}


/* --- Responsive fine tune --- */
@media (max-width: 780px) {
  .spec-row {
    grid-template-columns: 108px 1fr;
  }

  .form-table th {
    width: 40%;
  }
}

/* --- 画面小さいスマホ用 --- */
@media (max-width: 560px) {
  .sp-break {
    display: inline;
  }

  .top-txt {
  padding-top: 20%; /*タイトル位置調整*/
}
  
  .programs-top-img{
  margin: 0 0 0 60px; /* 右寄せ */
  }

}


/*---画面大きいPC用---*/
@media (min-width: 880px) {
  
  .top-bg {
    height: 100%;          /* PCでは高さを親にフィットさせる */
    object-position: center -250px; /* ←上に40px分ずらす（数値は調整） */
  }

  
  
  .programs {
    grid-template-columns: 1fr 1fr;
  }

  .img-ph {
  display: flex;
  flex-direction: column;   /* 縦並び */
  justify-content: flex-end; /* 下に揃える */
  height: 100%;             /* 親に高さがある場合は必須 */
}

  .top-txt img {
  width:40%;
  margin-top:  -45%;
}



.top-recruit {
  width: 50%;
  margin: auto;
  margin-top: -30%;
}

.top-date{
  width: 20%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.top-place {
  width: 20%;
  margin: 20px auto;
}


/* カラオケ ヨガ */
.programs-top-img {
  width: 30%;         /* 少し小さく */
  display: block;
  margin: 0 auto 0 36%; /* 右寄せ */
}


  /* 見出しエリア：タイトルが下に食い込まないように */
  .top-txt { padding-top: 14%; } /* 60% → 14% に調整 */
  /* 必要なら背景の見え方も微調整可： */
  /* .top-visual { background-position: center 20%; } */

  /* 2カラムは既にOK（.programs が grid） */
  .programs { grid-template-columns: 1fr 1fr; }

  /* 画像ブロックを“下そろえ”で安定表示 */
  .img-ph {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* 下に揃える */
    min-height: 20px;           /* 枠の高さを確保（重なり防止） */
    gap: 8px;                    /* 2枚の間隔 */
    height: 55%;
  }
  .img-ph img {
    max-height: calc(100% - 8px);
    object-fit: contain;

  }



  /* バッジ画像が大きく暴れないよう固定気味に */
  #karaoke .badge img,
  #yoga .badge img {
    height: auto;
    margin: 10px 0 0 0; /* 左の余白は本文側で調整 */
    display: block;
  }

  /* 本文との余白を少し足して重なりリスクを減らす */
  .body { padding: 12px 16px 20px; }

  /* メタ表の左カラムをPCでは広めにして折返しを減らす */
  .meta-row { grid-template-columns: 120px 1fr; }

  
}


/* === confirm modal === */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 9998; }
.modal.is-open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 9998; }
.modal__panel { position: relative; background: #fff; border-radius: 14px; padding: 20px 20px 16px;
  width: min(640px, calc(100% - 24px)); box-shadow: 0 12px 28px rgba(0,0,0,.18); z-index: 9999; }