/* =========================================================
  NATURAL PORK LINK / マイアカウント・会員ログイン ページCSS
  貼り付け先: 新テーマ → マイアカウント・会員ログイン → CSS欄（全削除→これを貼る→保存）
  ※ログイン／会員情報変更／パスワード等の Color Me 標準ページに適用
========================================================= */
:root{
  --npl-green:#1f3d2f;--npl-green-d:#16291f;
  --npl-copper:#b8472d;--npl-copper-d:#9c3a22;
  --npl-cream:#faf7f1;--npl-ink:#2a2622;--npl-muted:#8a8278;--npl-line:#e7e1d6;
  --npl-radius:14px;--npl-shadow:0 6px 24px rgba(31,61,47,.10);
  --npl-serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --npl-sans:"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--npl-sans);font-size:15px;line-height:1.8;color:var(--npl-ink);background:var(--npl-cream);-webkit-font-smoothing:antialiased;}
a{color:var(--npl-copper);text-decoration:underline;text-underline-offset:3px;}
a:hover{color:var(--npl-copper-d);}

.p-page__wrap{min-height:100vh;display:flex;flex-direction:column;}
.p-page__container{flex:1;max-width:520px;margin:0 auto;padding:30px 24px 60px;width:100%;}
.base01,.base02{width:100%;}

.p-shop__header{text-align:center;margin:0 0 32px;padding:18px 0;border-bottom:1px solid var(--npl-line);}
.p-shop__header--logo .p-shop__logo,.p-shop__logo{font-family:var(--npl-serif);font-size:22px;color:var(--npl-green);letter-spacing:.08em;font-weight:700;text-decoration:none;}
.p-shop__logo:hover{color:var(--npl-green-d);text-decoration:none;}
.p-shop__logo img{max-height:46px;width:auto;}

.title_area{margin:0 0 24px;}
.p-page__title{font-family:var(--npl-serif);font-size:26px;color:var(--npl-green);margin:0 0 8px;letter-spacing:.06em;font-weight:700;text-align:center;}

.p-page__body{margin:0 0 30px;}
.p-page__body-inner{background:#fff;border:1px solid var(--npl-line);border-radius:var(--npl-radius);padding:30px 32px;box-shadow:var(--npl-shadow);}

.c-form__table{width:100%;border-collapse:collapse;}
.c-form__table tr{display:block;margin-bottom:20px;}
.c-form__table tr:last-child{margin-bottom:0;}
.c-form__title{display:block;width:100%;padding:0 0 6px;text-align:left;font-weight:700;font-size:14px;color:var(--npl-green);background:none;border:0;}
.c-form__title--must::after{content:" 必須";color:var(--npl-copper);font-size:11px;font-weight:800;margin-left:4px;background:rgba(184,71,45,.08);padding:2px 8px;border-radius:6px;}
.c-form__content{display:block;width:100%;padding:0;}
.c-form__note{display:block;margin-top:6px;font-size:12px;color:var(--npl-muted);line-height:1.7;}

.c-input--text,input[type="text"],input[type="email"],input[type="tel"],input[type="password"]{
  box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid var(--npl-line);border-radius:10px;font-size:15px;font-family:inherit;background:#fff;color:var(--npl-ink);transition:.15s;
}
.c-input--text:focus,input:focus{outline:none;border-color:var(--npl-green);box-shadow:0 0 0 3px rgba(31,61,47,.12);}
.input_ime{ime-mode:disabled;}

input[type="checkbox"],input[type="radio"]{accent-color:var(--npl-green);width:18px;height:18px;vertical-align:-3px;margin-right:6px;}

/* ログインボタンは銅色CTAで目立たせる */
.c-button,.c-button--primary,.c-button--login,.c-button--lg,.c-button--sm,
button,input[type="submit"],input[type="button"]{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 30px;border-radius:999px;font-size:15px;font-weight:700;font-family:inherit;border:0;cursor:pointer;text-decoration:none;transition:.15s;line-height:1.4;
}
.c-button--login,.c-button--primary{background:var(--npl-copper);color:#fff;box-shadow:0 8px 20px rgba(184,71,45,.28);width:100%;}
.c-button--login:hover,.c-button--primary:hover{background:var(--npl-copper-d);color:#fff;transform:translateY(-2px);text-decoration:none;}
.c-button{background:var(--npl-green);color:#fff;}
.c-button:hover{background:var(--npl-green-d);color:#fff;text-decoration:none;}
.c-button--sm,.c-button-sm{padding:9px 18px;font-size:13px;}
.c-button--lg{padding:16px 36px;font-size:16px;min-width:220px;}

.c-button__group{display:flex;flex-direction:column;gap:12px;margin-top:24px;}
.c-button__group--sub{margin-top:18px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;font-size:13px;}
.c-button__group--sub a,.c-button__group--sub .c-button{background:transparent;color:var(--npl-muted);border:0;padding:6px 8px;box-shadow:none;text-decoration:underline;}
.c-button__group--sub a:hover{color:var(--npl-copper);background:transparent;}

.c-alert{padding:14px 18px;border-radius:10px;font-size:14px;margin-bottom:20px;border-left:4px solid var(--npl-copper);background:rgba(184,71,45,.07);color:var(--npl-copper-d);}

.p-page__footer{padding:24px 16px;text-align:center;color:var(--npl-muted);font-size:12px;border-top:1px solid var(--npl-line);background:#fff;}
.p-page__copyright{display:block;margin-top:8px;color:var(--npl-muted);font-size:11px;}
.p-page__secure{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--npl-cream);border-radius:999px;font-size:11.5px;color:var(--npl-green);}
.p-secure__image img{height:14px;width:auto;vertical-align:-2px;}
.p-secure__msg{font-weight:600;}

@media screen and (max-width:600px){
  .p-page__container{padding:20px 16px 50px;}
  .p-page__body-inner{padding:20px 18px;}
  .p-page__title{font-size:21px;}
}