/* メルマガ ダブルオプトイン 登録/確認/完了画面(qando-mag 参考:モノクロ・グレー塗り入力・ピル反転ボタン・clamp流体)
   ※ ヘッダー/フッターは既存(layouts.app)のまま。本体デザインのみ
   ※ このCSSは newsletter 系ページでのみ読み込まれる(他ページに影響しない) */
html, body { background: #fff; }
.nldoi { max-width: 720px; margin: 0 auto; padding: clamp(2.5rem, 8vw, 5rem) 1.25rem clamp(4rem, 12vw, 7rem); color: #262627; }
.nldoi_logo { text-align: center; font-weight: 800; letter-spacing: .12em; font-size: clamp(1.1rem, 5vw, 1.5rem); margin-bottom: clamp(1.5rem, 5vw, 2.6rem); }
.nldoi_head { font-weight: 800; font-size: clamp(1.25rem, 5.5vw, 2rem); line-height: 1.4; text-align: center; margin-bottom: clamp(1rem, 3vw, 1.4rem); letter-spacing: .02em; }
.nldoi_text { font-size: clamp(.8rem, 3.4vw, .9375rem); line-height: 1.87; text-align: center; color: #3a3a3a; }
.nldoi_text p + p { margin-top: 1em; }
.nldoi_email { display: inline-block; margin-top: .6em; font-weight: 700; color: #262627; word-break: break-all; }

.nldoi_form { margin-top: clamp(2rem, 6vw, 3rem); }
.nldoi_field { margin-bottom: clamp(1.1rem, 4vw, 1.6rem); }
.nldoi_guide { font-weight: 700; font-size: clamp(.78rem, 3.2vw, .875rem); margin-bottom: .55rem; display: block; }
.nldoi_select, .nldoi_input {
  width: 100%; background: #f0f0f0; border: none; border-radius: 4px;
  padding: 0 1em; height: 3.4em; font-size: clamp(.8rem, 3.4vw, .9375rem);
  color: #262627; font-family: inherit; -webkit-appearance: none; appearance: none; outline: none;
}
.nldoi_select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262627' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center; background-size: 14px; padding-right: 2.6em;
}
.nldoi_select:focus, .nldoi_input:focus { box-shadow: 0 0 0 2px #ddd inset; }
.nldoi_error { color: #c0392b; font-size: clamp(.72rem, 3vw, .8125rem); margin-top: .45rem; }

.nldoi_submit {
  display: flex; justify-content: center; align-items: center;
  width: clamp(11rem, 42vw, 14rem); margin: clamp(1.8rem, 5vw, 2.4rem) auto 0;
  background: #262627; color: #fff; border: 2px solid #262627; border-radius: 9999px;
  font-weight: 700; font-size: clamp(.85rem, 3.6vw, 1rem); line-height: 1; padding: 1.15em 0;
  cursor: pointer; transition: background .22s ease, color .22s ease; font-family: inherit;
}
.nldoi_submit:hover { background: #fff; color: #262627; }

.nldoi_note { font-size: clamp(.72rem, 3vw, .8125rem); color: #8a8175; line-height: 1.75; text-align: center; margin-top: clamp(1.4rem, 4vw, 2rem); }
.nldoi_back { display: inline-block; margin-top: clamp(1.6rem, 5vw, 2.4rem); font-weight: 700; font-size: clamp(.78rem, 3.2vw, .875rem); color: #262627; text-decoration: underline; text-underline-offset: 3px; }
.nldoi_center { text-align: center; }

/* 登録フォーム(email のみ)用 */
.nldoi_check { display: flex; align-items: center; justify-content: center; gap: .55em; font-size: clamp(.78rem, 3.2vw, .875rem); margin-top: clamp(.8rem, 2.5vw, 1.1rem); cursor: pointer; }
/* グローバルCSSの reset に潰されないよう、チェックボックスは自前で描画する */
.nldoi_check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 1.2em; height: 1.2em; flex: 0 0 auto; margin: 0; padding: 0;
  border: 2px solid #262627; border-radius: 4px; background: #fff; cursor: pointer;
  position: relative; box-sizing: border-box; vertical-align: middle;
}
.nldoi_check input[type="checkbox"]:checked { background: #262627; }
.nldoi_check input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: .33em; top: .12em;
  width: .3em; height: .58em; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.nldoi_check input[type="checkbox"]:focus-visible { outline: 2px solid #aaa; outline-offset: 2px; }
.nldoi_check a { text-decoration: underline; text-underline-offset: 2px; color: #262627; }
.nldoi_done { text-align: center; margin-top: clamp(1rem, 4vw, 2rem); }
.nldoi_hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== 登録フォーム 2カラム(qando-mag レイアウト:左=本文+フォーム / 右=写真) ===== */
.nldoi-split { display: flex; align-items: center; width: 100%; }
.nldoi-split .nldoi-left {
  flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4rem);
}
.nldoi-split .nldoi-left-inner { width: 100%; max-width: 30rem; margin-left: auto; }
.nldoi-split .nldoi-right { flex: 1 1 50%; min-width: 0; }
/* 画像はアスペクト比でサイズ指定(定寸)。実画像は .nldoi-photo の中に <img> を入れれば cover で収まる */
.nldoi-photo {
  width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(135deg, #efeae1 0%, #e3dccd 100%);
  display: flex; align-items: center; justify-content: center;
}
.nldoi-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nldoi-photo span { font-size: clamp(.7rem, 1.4vw, .85rem); letter-spacing: .28em; color: #b3a994; font-weight: 700; }

/* 左カラム内は左寄せ(中央寄せの .nldoi_* を上書き) */
.nldoi-left .nldoi_logo { text-align: left; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.nldoi-left .nldoi_head { text-align: left; }
.nldoi-left .nldoi_text { text-align: left; }
.nldoi-left .nldoi_submit { margin-left: 0; margin-right: 0; }
.nldoi-left .nldoi_back { align-self: flex-start; }
.nldoi-left .nldoi_note { text-align: left; }
.nldoi-left .nldoi_check { justify-content: flex-start; }
.nldoi-left .nldoi_done { text-align: left; }
.nldoi-left .nldoi_error { text-align: left; }

.nldoi_lead { font-weight: 700; font-size: clamp(.78rem, 1vw, .875rem); margin-bottom: .7rem; }
.nldoi_inline { display: flex; gap: clamp(.6rem, 1.2vw, 1rem); align-items: stretch; }
.nldoi_inline .nldoi_input { flex: 1 1 auto; }
.nldoi_inline .nldoi_submit { flex: 0 0 auto; width: clamp(7rem, 11vw, 9.5rem); margin: 0; }

@media (max-width: 768px) {
  .nldoi-split { flex-direction: column; }
  .nldoi-split .nldoi-left { padding: clamp(2rem, 8vw, 3rem) 1.25rem; order: 1; }
  .nldoi-split .nldoi-left-inner { max-width: 100%; margin: 0; }
  .nldoi-split .nldoi-right { order: 2; }
  .nldoi-photo { aspect-ratio: 3 / 2; }
  .nldoi_inline { flex-direction: column; }
  .nldoi_inline .nldoi_submit { width: 100%; }
}