/*
 * no-lie 公開ページ（トップ・紹介・ログイン・会員登録）の共通デザイン（2026-11）
 * style.css のあとに読み込み、会員画面（theme.css）と同じ色・ボタン・入力欄にそろえる。
 * このファイルの読み込みを外せば元の見た目に戻る。
 */

:root{
  --nl-pink:#E4007F;
  --nl-pink-light:#FF5FA8;
  --nl-pink-pale:#FF8FC7;
  --nl-bg:#0B0B0D;
  --nl-surface:#17171B;
  --nl-surface-2:#202026;
  --nl-line:rgba(255,255,255,.12);
  --nl-text:#FFFFFF;
  --nl-muted:#A7A7B0;
  --nl-radius:14px;
  --nl-gradient:linear-gradient(90deg, #E4007F, #FF5FA8);
}

/* ---------- 全体 ---------- */
body{
  background:
    radial-gradient(circle at 50% -10%, rgba(228,0,127,.16), rgba(228,0,127,0) 45%),
    var(--nl-bg);
  background-attachment:fixed;
}

/* transform を使うと中の position:fixed がずれるので、透明度だけ動かす */
article{
  padding-bottom:40px;
  animation:nl-page-in .4s ease-out both;
}

article a:not(.btn){
  color:var(--nl-pink-pale);
}

h2{
  position:relative;
  padding-bottom:12px;
}

h2:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:36px;
  height:3px;
  margin-left:-18px;
  border-radius:2px;
  background:var(--nl-gradient);
}

/* ---------- ヘッダーとメニュー ---------- */
header{
  border-bottom:1px solid var(--nl-line);
}

.menu-content{
  background:rgba(23,23,27,.97);
  border-left:1px solid var(--nl-line);
  box-shadow:-10px 0 30px rgba(0,0,0,.5);
}

.menu-content ul li{
  border-bottom:1px solid var(--nl-line);
}

.menu-content ul li a{
  padding:14px 15px 14px 4px;
}

.menu-content ul li a:before{
  border-color:var(--nl-pink-light);
  top:20px;
}

/* ---------- ボタン ---------- */
.btn{
  border-radius:12px;
  transition:transform .15s, box-shadow .2s, background-color .2s, color .2s, border-color .2s;
}

.btn:active{
  transform:scale(.97);
}

/* いますぐ登録・仮会員登録など、いちばん押してほしいボタン */
.btn-pink{
  position:relative;
  overflow:hidden;
  padding:12px;
  border:none;
  background:var(--nl-gradient);
  color:#FFF;
  font-weight:bold;
  box-shadow:0 6px 20px rgba(228,0,127,.45);
}

.btn-pink:hover,
.btn-pink:focus{
  color:#FFF;
  background:var(--nl-gradient);
  box-shadow:0 8px 26px rgba(228,0,127,.6);
}

.btn-pink:after{
  content:"";
  position:absolute;
  top:0;
  left:-60%;
  width:40%;
  height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
  transform:skewX(-20deg);
  animation:nl-shine 3.5s ease-in-out 1.5s infinite;
}

/* ログイン・送信などのボタン */
.btn-success,
.btn-primary{
  --bs-btn-color:#FFF;
  --bs-btn-hover-color:#FFF;
  --bs-btn-active-color:#FFF;
  --bs-btn-bg:rgba(255,255,255,.08);
  --bs-btn-hover-bg:rgba(255,255,255,.16);
  --bs-btn-active-bg:rgba(255,255,255,.2);
  --bs-btn-border-color:rgba(255,255,255,.55);
  --bs-btn-hover-border-color:#FFF;
  --bs-btn-active-border-color:#FFF;
  padding:12px;
  font-size:120%;
  font-weight:bold;
}

/* ログイン画面・登録画面では送信ボタンを目立たせる */
.nl-auth .btn-success,
.nl-auth .btn-primary{
  --bs-btn-bg:transparent;
  --bs-btn-hover-bg:transparent;
  --bs-btn-active-bg:transparent;
  --bs-btn-border-color:transparent;
  --bs-btn-hover-border-color:transparent;
  --bs-btn-active-border-color:transparent;
  background:var(--nl-gradient);
  box-shadow:0 6px 20px rgba(228,0,127,.45);
}

.btn-white{
  padding:10px;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.5);
}

.btn-white:hover{
  color:#FFF;
  background:rgba(255,255,255,.16);
  border-color:#FFF;
}

.btn-male,
.btn-female{
  padding:14px;
  border:none;
  font-weight:bold;
  color:#FFF;
}

.btn-male{
  background:linear-gradient(90deg, #1E88E5, #4FB3FF);
  box-shadow:0 6px 20px rgba(41,171,226,.4);
}

.btn-female{
  background:var(--nl-gradient);
  box-shadow:0 6px 20px rgba(228,0,127,.4);
}

.btn-male:hover,
.btn-female:hover{
  color:#FFF;
  filter:brightness(1.08);
}

.btn-male:hover{
  background:linear-gradient(90deg, #1E88E5, #4FB3FF);
}

.btn-female:hover{
  background:var(--nl-gradient);
}

/* ---------- トップページ ---------- */
.topcatch{
  text-shadow:0 2px 16px rgba(0,0,0,.6);
  animation:nl-fade-up .9s ease-out .2s both;
}

.topcatch span{
  display:inline-block;
  margin-top:4px;
}

.topcatch_sub{
  color:var(--nl-pink-pale);
  letter-spacing:.1em;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
  animation:nl-fade-up .9s ease-out .5s both;
}

#topbottom .row{
  animation:nl-fade-up .7s ease-out both;
}

#topbottom .row:nth-child(1){ animation-delay:.8s; }
#topbottom .row:nth-child(2){ animation-delay:.95s; }
#topbottom .row:nth-child(3){ animation-delay:1.1s; }

#topbottom p.small{
  color:var(--nl-muted);
}

/* ---------- 紹介ページ ---------- */
.pageheader{
  position:relative;
  overflow:hidden;
  border-radius:0 0 18px 18px;
  text-shadow:0 2px 16px rgba(0,0,0,.8);
}

.pageheader:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background:linear-gradient(180deg, rgba(11,11,13,.15), rgba(11,11,13,.65));
}

.vertical_line{
  background:linear-gradient(180deg, rgba(255,95,168,0), var(--nl-pink-light));
}

/* 料金表 */
article .table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--nl-text);
  --bs-table-border-color:var(--nl-line);
  color:var(--nl-text);
  border-color:var(--nl-line);
}

article .table th{
  background:var(--nl-surface-2);
  color:var(--nl-pink-pale);
}

/* ---------- ログイン・会員登録 ---------- */
.nl-auth{
  max-width:440px;
  margin:20px auto 0;
  padding:28px 20px;
  background:var(--nl-surface);
  border:1px solid var(--nl-line);
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  animation:nl-fade-up .5s ease-out both;
}

.nl-auth-title{
  margin:0 0 6px;
  text-align:center;
  font-size:20px;
  font-weight:bold;
}

.nl-auth-title i{
  display:block;
  margin-bottom:10px;
  font-size:30px;
  color:var(--nl-pink-light);
}

.nl-auth-lead{
  margin-bottom:20px;
  text-align:center;
  font-size:13px;
  color:var(--nl-muted);
}

.nl-auth-note{
  margin-top:12px;
  font-size:12px;
  color:var(--nl-muted);
}

.nl-auth-links{
  margin-top:20px;
  padding-top:16px;
  text-align:center;
  font-size:13px;
  border-top:1px solid var(--nl-line);
  line-height:2.2;
}

/* 入力欄 */
article .form-control,
article .form-select{
  background-color:var(--nl-surface-2);
  border:1px solid rgba(255,255,255,.18);
  color:var(--nl-text);
  border-radius:10px;
  padding:10px 12px;
  color-scheme:dark;
}

article .form-control::placeholder{
  color:#8A8A93;
}

article .form-control:focus,
article .form-select:focus{
  background-color:var(--nl-surface-2);
  color:var(--nl-text);
  border-color:var(--nl-pink-light);
  box-shadow:0 0 0 .2rem rgba(228,0,127,.25);
}

article .form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FF8FC7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

article .input-group-text{
  background:var(--nl-surface);
  border-color:rgba(255,255,255,.18);
  color:var(--nl-muted);
  border-radius:0 10px 10px 0;
  cursor:pointer;
}

article .input-group > .form-control:not(:last-child){
  border-radius:10px 0 0 10px;
}

article input[type=radio],
article input[type=checkbox]{
  accent-color:var(--nl-pink);
}

article input[type=file]::file-selector-button{
  margin-right:10px;
  padding:7px 14px;
  border:none;
  border-radius:10px;
  background:var(--nl-gradient);
  color:#FFF;
  font-weight:bold;
  cursor:pointer;
}

label.optional,
label.required{
  color:var(--nl-muted);
}

label.required:after{
  background:var(--nl-pink);
  border-radius:10px;
}

/* 規約の箱と確認画面の入力内容 */
.textbox{
  background:var(--nl-surface);
  color:var(--nl-muted);
  border:1px solid var(--nl-line);
  border-radius:10px;
}

.confirm_input{
  background:var(--nl-surface);
  color:var(--nl-text);
  border:1px solid var(--nl-line);
}

/* お知らせ */
.alert{
  border:none;
  border-left:4px solid;
  border-radius:10px;
  background:var(--nl-surface);
  color:var(--nl-text);
}

.alert-success{
  border-left-color:#3DD68C;
}

.alert-danger{
  border-left-color:#FF5C7A;
}

.alert-warning{
  border-left-color:#FFC247;
}

.invalid-feedback{
  color:#FF8A9C;
}

/* ---------- 動き ---------- */
@keyframes nl-page-in{
  0%{ opacity:0; }
  100%{ opacity:1; }
}

@keyframes nl-fade-up{
  0%{ opacity:0; transform:translateY(14px); }
  100%{ opacity:1; transform:translateY(0); }
}

@keyframes nl-shine{
  0%{ left:-60%; }
  40%, 100%{ left:130%; }
}

@media (prefers-reduced-motion: reduce){
  *,
  *:before,
  *:after{
    animation:none !important;
    transition:none !important;
  }
}