:root{
    --card-w: 420px;
    --gap: 56px;
    --text: #2b2b2b;
    --muted: #6a6a6a;
    --line: #CFC9C2;
    --coffee: #2A211B;
  }
  #auth-landing{ position:relative; background:#231a14; color:#fff; }
  .hero{ position:relative; overflow:hidden; }
  .hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.83); }
  .hero__overlay{ position:absolute; inset:0; background:rgba(40,30,22,.18); }
  
  /* ▼ ロゴ中央表示のみ */
  .hero__inner{ position:relative; display:flex; flex-direction:column; align-items:center; padding:108px 20px 58px; }
  .hero__logo{ width:200px; height:auto; display:block; margin:0 auto 62px; }
  
  /* レイアウト */
  .cols{ display:flex; gap:var(--gap); flex-wrap:wrap; justify-content:center; width:100%; max-width:980px; }
  .stack{ width:var(--card-w); }
  .block-heading{ font-size:18px; font-weight:800; letter-spacing:.08em; margin:0 0 14px; color:#fff; }
  
  /* カード */
  .card{ background:#fff; color:var(--text);  padding:22px 24px; box-shadow:0 8px 22px rgba(0,0,0,.18); }
  
  /* フォーム */
  .field{ margin:0 0 12px; position: relative;}
  .field > span{ display:block; font-size:13px; line-height:1.3; color:var(--muted); margin-bottom:6px; }
  .text-input{ width:100%; height:38px; border:1px solid var(--line); border-radius:3px; padding:9px 11px; font-size:13px; background:#fff; }
  .check{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-top:6px; margin-bottom:14px; }
  
  /* ボタン */
  .btn{ display:flex; align-items:center; justify-content:center; gap:8px; border-radius:3px; text-align:center; font-weight:700; transition:opacity .2s ease; height:40px; font-size:13.5px; }
  .btn--full{ width:100%; }
  .btn--dark{ background:var(--coffee); color:#fff; }
  .btn--line{ background:#06C755; color:#fff; }
  .btn--mt{ margin-top:10px; }
  .btn:hover{ opacity:.9; }
  .btn--line img{ height:18px; width:auto; }

/* 注釈：数字つきリスト（数字と本文を統一） */
.sep-dashed{ border:0; border-top:1px dashed #D9CFC5; margin:14px 0; }
.benefits__title{ font-size:16px; font-weight:800; text-align:center; margin:0 0 10px; color:#333; }
.benefits__list{
  margin:0;
  padding-left:0;
  list-style:none;
  font-size:12.5px;
  line-height:1.8;
  color:#555;
}
.benefits__list li{
  display:flex;
  align-items:flex-start;
  gap:0.4em;
  white-space:nowrap;
}
.benefits__list .num{
  font-weight:normal; /* ← 太字解除 */
  color:inherit;      /* ← 本文と同じ色 */
  min-width:1.2em;
  text-align:right;
}

/* SP */
@media (max-width: 768px){
  :root{ --card-w: min(420px, 92vw); --gap: 24px; }
  .hero__logo{ width:160px; margin-bottom:28px; }
  .block-heading{ font-size:17px; }
  .benefits__list{ font-size:11.5px; white-space:normal; }
}

#login_page .hero__inner {
    padding: 108px 20px 100px;
}
#login_page .benefits__title {
    color: #2B2016;
}
#login_page .benefits__list {
    color: #2B2016;
}
#login_page .card {
    border-radius: 0;
}
#login_page .card {
    border-radius: 0;
    flex-grow: 1;
    padding: 40px 36px;
}
#login_page .stack:nth-child(2) .card {
    padding: 40px 26px;
}
@media (max-width: 768px) {
    #login_page .card {
        padding: 40px 26px;
    }
    #login_page .stack:nth-child(2) .card {
        padding: 40px 16px;
    }
}
#login_page .cols {
    align-items: stretch;
    max-width: 900px;
    gap: 40px;
}
@media (max-width: 768px) {
    #login_page .cols {
        flex-direction: column;
        margin: 0 auto;
    }
}
#login_page .stack {
    width: calc(50% - 30px);
    display: flex;
    flex-direction: column;
}
@media (max-width: 768px) {
    #login_page .stack {
        width: 80%;
        margin: 0 auto;
    }
}
@media (max-width: 500px) {
    #login_page .stack {
        width: 100%;
    }
}
#login_page .block-heading {
    margin: 0 0 21px;
}
@media (max-width: 768px) {
    #login_page .block-heading {
        margin: 0 0 16px;
    }
}
#login_page .field span {
    font-size: 16px;
}
#login_page .field input {
    font-size: 16px;
    margin: 0 0 20px;
}
#login_page .check {
    font-size: 14px;
    justify-content: center;
    gap: 2px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
#login_page .customers_sessions_login_btn {
    max-width: 320px;
    height: 50px;
    font-size: 16px;
    margin: 0 auto;
    border: none;
    font-weight: 400;
    background: #2B2016;
    border-radius: 0;
}
#login_page .u-text--link {
    width: fit-content;
    margin: 20px auto 0;
    color: #2B2016 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}
#login_page .card--register .btn {
    width: 90%;
    font-size: 16px;
    font-weight: 400;
    height: 50px;
    letter-spacing: 1px;
    margin: 0 auto;
    padding: 0;
}
#login_page .card--register .btn:nth-child(1) {
    justify-content: flex-start;
}
#login_page .card--register .btn:nth-child(1) img {
    height: 100%;
    border-right: 1px solid #fff;
}
#login_page .card--register .btn:nth-child(1) .btn--line__text {
    flex-grow: 1;
}
#login_page .card--register .btn:nth-child(2) {
    margin: 20px auto;
    border-radius: 0;
    background: #2B2016;
    color: #fff;
}
#login_page .benefits__list li {
    font-size: 12px;
    white-space: wrap;
    letter-spacing: 0;
}