/* ============================================================
   HP Customer Portal — Frontend Styles  v2.6
   THE4KIND 本サイト（the4kind_25 テーマ）トンマナ準拠
   v2.6: ヘッダー＋ナビを .hp-topbar に統合（枠線1本・全幅アクセント帯・縦バー誤出現を解消）
   ブランドカラー: #1273b5 / #8fd1da  ・ Noto Sans JP / Roboto Condensed
   緊急度のみ機能色（赤/橙/緑）
   ============================================================ */
*{box-sizing:border-box}

/* ---- Portal wrapper ---- */
.hp-portal{
  max-width:1100px;
  margin:0 auto;
  font-family:'Noto Sans JP','Hiragino Sans','Meiryo',sans-serif;
  font-size:14px;
  color:#000;
  line-height:1.6;
  display:block !important;
  -webkit-font-smoothing:antialiased;
}
.hp-portal *{float:none}
.hp-portal .hp-num{font-family:'Roboto Condensed','Noto Sans JP',sans-serif}

/* ---- Topbar（ヘッダー＋ナビを1枠に統合。枠線は1本だけ）---- */
.hp-topbar{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:6px 6px 0 0;
  overflow:hidden;            /* 角丸でクリップ。子要素は必ず枠内に収まる */
}
/* 上端のブランド アクセント帯（ブルー／ティール）。ブロック子要素なので必ず全幅 */
.hp-topbar::before{
  content:'';
  display:block;
  height:4px;
  background:linear-gradient(90deg,#1273b5 0 50%,#8fd1da 50% 100%);
}

/* ---- Header ---- */
.hp-header{background:#fff;padding:0 26px}
.hp-header-inner{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  height:60px;
}
.hp-header-logo{
  color:#000;
  font-family:'Roboto Condensed','Noto Sans JP',sans-serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:2.5px;
}
.hp-header-user{color:#666;font-size:13px;letter-spacing:.3px}
.hp-header-user a{color:#666;text-decoration:none}
.hp-header-user a:hover{color:#000;text-decoration:underline}

/* ---- Nav ---- */
/* 重要: テーマ the4kind_25 は全 <nav> を position:fixed で画面中央に固定する
   （nav{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}）。
   transform は position に関係なく効くため、以下4行ですべて打ち消す。 */
.hp-nav{
  position:static;
  top:auto;
  left:auto;
  transform:none;
  display:block !important;
  background:#fff;
  border-top:1px solid #ededed;
  padding:0;
  white-space:nowrap;
  /* overflow-x:auto は overflow-y を auto に変えて縦スクロールバーを誤出現させるため、
     overflow-y:hidden を明示してそれを抑止する */
  overflow-x:auto;
  overflow-y:hidden;
}
.hp-nav-btn{
  display:inline-block !important;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  padding:14px 16px;
  font-size:13.5px;
  font-weight:600;
  color:#8c8c8c;
  cursor:pointer;
  transition:color .15s,border-color .15s;
  font-family:inherit;
  white-space:nowrap;
  vertical-align:bottom;
  letter-spacing:.5px;
}
.hp-nav-btn:first-child{padding-left:26px}  /* 先頭タブの文字をロゴと同じ左位置に揃える */
.hp-nav-btn:hover{color:#000}
.hp-nav-btn.active{color:#000;border-bottom-color:#1273b5}
.hp-badge-count{background:#ef4444;color:#fff;border-radius:99px;font-size:10px;padding:1px 6px;margin-left:5px;font-weight:700}

/* ---- Tab ---- */
.hp-tab{
  display:none !important;
  width:100%;
  padding:24px 0;
  clear:both;
}
.hp-tab.active{
  display:block !important;
  animation:hp-fade .26s ease;
}
@keyframes hp-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- Card ---- */
.hp-card{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:6px;
  padding:30px;
  box-shadow:0 4px 18px rgba(0,0,0,.05);
}
.hp-card + .hp-card{margin-top:18px}
.hp-card h2{
  font-family:'Roboto Condensed','Noto Sans JP',sans-serif;
  font-size:17px;
  font-weight:700;
  margin:0 0 22px;
  color:#000;
  letter-spacing:1.5px;
  padding-bottom:14px;
  border-bottom:1px solid #ededed;
}
.hp-card-desc{color:#8c8c8c;margin:-12px 0 20px;font-size:13px;line-height:1.7}

/* ---- Alerts ---- */
.hp-alert{padding:14px 18px;border-radius:4px;font-size:13px;margin-bottom:22px;line-height:1.65}
.hp-alert-danger{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-left:3px solid #dc2626}
.hp-alert-warning{background:#fffbeb;color:#92400e;border:1px solid #fde68a;border-left:3px solid #f59e0b}

/* ---- Info Grid ---- */
.hp-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.hp-info-sec{
  background:#f6f6f6;
  border:1px solid #ececec;
  border-radius:6px;
  padding:20px 22px;
}
/* 「契約内容」を右カラムに置き、左にサイト情報＋ご登録情報を縦積みして余白を解消 */
.hp-info-sec:nth-child(2){grid-column:2;grid-row:1/span 2}
@media(max-width:600px){
  .hp-info-grid{grid-template-columns:1fr}
  .hp-info-sec:nth-child(2){grid-column:auto;grid-row:auto}
}
.hp-info-sec h3{
  font-family:'Roboto Condensed','Noto Sans JP',sans-serif;
  font-size:12px;
  font-weight:700;
  color:#000;
  letter-spacing:1.5px;
  margin:0 0 6px;
  padding-bottom:12px;
  border-bottom:1px solid #e2e2e2;
}
.hp-info-sec dl{margin:0}
.hp-info-sec dt{
  font-size:11px;
  color:#999;
  font-weight:500;
  letter-spacing:.5px;
  margin-top:15px;
  padding-top:14px;
  border-top:1px solid #e6e6e6;
}
.hp-info-sec dt:first-of-type{margin-top:6px;padding-top:0;border-top:none}
.hp-info-sec dd{
  font-family:'Roboto Condensed','Noto Sans JP',sans-serif;
  font-size:15px;
  color:#000;
  margin:5px 0 0;
  font-weight:500;
  line-height:1.55;
}
.hp-info-sec a{color:#1273b5;text-decoration:none}
.hp-info-sec a:hover{color:#0e5e96;text-decoration:underline}

/* ---- Renewal date（緊急度は機能色で表現）---- */
.hp-date-danger{color:#dc2626;font-weight:700}
.hp-date-warning{color:#d97706;font-weight:700}
.hp-date-ok{color:#059669;font-weight:700}
.hp-days{display:inline-block;padding:3px 11px;border-radius:99px;font-size:11px;font-weight:700;margin-left:7px;vertical-align:middle;letter-spacing:.3px}
.hp-days.danger{background:#fee2e2;color:#991b1b}
.hp-days.warning{background:#fef3c7;color:#92400e}
.hp-days.ok{background:#d1fae5;color:#065f46}

/* ---- Invoices ---- */
.hp-invoice-list{display:flex;flex-direction:column;gap:10px}
.hp-invoice-row{
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px 18px;
  border:1px solid #e6e6e6;
  border-radius:6px;
  background:#fff;
  transition:background .12s,box-shadow .12s,transform .12s;
}
.hp-invoice-row:hover{background:#fafafa;box-shadow:0 5px 14px rgba(0,0,0,.07);transform:translateY(-1px)}
.hp-invoice-row.hp-dl-done{background:#f6f6f6;border-color:#e2e2e2}
.hp-invoice-row.hp-dl-done:hover{background:#f1f1f1}
.hp-invoice-icon{font-size:22px}
.hp-invoice-name{flex:1;font-weight:600;color:#000}
.hp-dl-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 11px;
  border-radius:99px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  letter-spacing:.3px;
}
.hp-dl-badge.dl-new{background:#fee2e2;color:#991b1b}
.hp-dl-badge.dl-done{background:#d1fae5;color:#065f46}
.hp-badge-new{background:#ef4444;color:#fff;border-radius:99px;font-size:10px;padding:1px 6px;margin-left:4px;font-weight:700}
.hp-empty{text-align:center;padding:56px 16px;color:#999;font-size:15px}

/* ---- Buttons ---- */
.hp-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:11px 24px;
  border-radius:4px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  border:none;
  text-decoration:none;
  transition:background .15s,box-shadow .15s,transform .15s;
  font-family:inherit;
  letter-spacing:1px;
}
.hp-btn-primary{background:#1273b5;color:#fff;box-shadow:0 3px 12px rgba(18,115,181,.28)}
.hp-btn-primary:hover{background:#0e5e96;color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(18,115,181,.32)}
.hp-btn-dl{background:#f1f1f1;color:#000}
.hp-btn-dl:hover{background:#e6e6e6;color:#000}

/* ---- Form ---- */
.hp-form{max-width:560px}
.hp-fg{display:flex;flex-direction:column;gap:6px;margin-bottom:17px}
.hp-fg label{font-size:11px;font-weight:700;color:#666;letter-spacing:.7px}
.hp-fg .req{color:#dc2626}
.hp-fg input,.hp-fg select,.hp-fg textarea{
  padding:11px 13px;
  border:1px solid #d7d7d7;
  border-radius:4px;
  font-size:14px;
  font-family:inherit;
  color:#000;
  outline:none;
  transition:border .15s,box-shadow .15s;
  width:100%;
}
.hp-fg input:focus,.hp-fg select:focus,.hp-fg textarea:focus{
  border-color:#1273b5;box-shadow:0 0 0 3px rgba(18,115,181,.13);
}
.hp-fg textarea{resize:vertical;min-height:120px}
#hp-inq-result{padding:12px 15px;border-radius:4px;font-size:13px;margin-bottom:12px;display:none}
#hp-inq-result.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;display:block}
#hp-inq-result.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;display:block}

/* ---- Notice ---- */
.hp-notice{background:#f6f6f6;border:1px solid #e6e6e6;border-left:3px solid #1273b5;border-radius:4px;padding:17px;color:#000;font-size:14px;line-height:1.7}

/* ---- Login ---- */
.hp-login-wrap{display:flex;justify-content:center;padding:60px 16px}
.hp-login-box{
  background:#fff;
  border:1px solid #e6e6e6;
  border-top:3px solid #1273b5;
  border-radius:6px;
  padding:42px 36px;
  width:100%;
  max-width:410px;
  box-shadow:0 6px 26px rgba(0,0,0,.08);
  text-align:center;
}
.hp-login-logo{font-size:46px;margin-bottom:10px}
.hp-login-box h2{
  font-family:'Roboto Condensed','Noto Sans JP',sans-serif;
  font-size:21px;font-weight:700;margin:0 0 6px;color:#000;letter-spacing:1.5px;
}
.hp-login-sub{font-size:13px;color:#8c8c8c;margin-bottom:28px}
.hp-login-box .login-username,
.hp-login-box .login-password{text-align:left;margin-bottom:15px}
.hp-login-box .login-username label,
.hp-login-box .login-password label{
  font-size:11px;
  font-weight:700;
  color:#666;
  letter-spacing:.7px;
}
.hp-login-box input[type=text],
.hp-login-box input[type=password]{
  width:100%;
  padding:11px 13px;
  border:1px solid #d7d7d7;
  border-radius:4px;
  font-size:14px;
  margin-top:5px;
}
.hp-login-box input[type=text]:focus,
.hp-login-box input[type=password]:focus{
  border-color:#1273b5;box-shadow:0 0 0 3px rgba(18,115,181,.13);outline:none;
}
.hp-login-box .login-remember{text-align:left;margin-bottom:18px;font-size:13px;color:#8c8c8c}
.hp-login-box .login-submit .button-primary{
  width:100%;
  padding:13px;
  background:#1273b5 !important;
  border-color:#1273b5 !important;
  box-shadow:0 3px 12px rgba(18,115,181,.28) !important;
  border-radius:4px !important;
  font-size:15px !important;
  height:auto !important;
  cursor:pointer;
  font-weight:700;
  letter-spacing:1px;
}
.hp-login-box .login-submit .button-primary:hover{background:#0e5e96 !important}
.hp-login-forgot{margin-top:22px;font-size:13px;color:#8c8c8c}
.hp-login-forgot a{color:#1273b5;text-decoration:none}
.hp-login-forgot a:hover{color:#0e5e96;text-decoration:underline}