@charset "utf-8";

/* ===============================
   Base
================================ */
body {
  background:#f5f6f8;
  font-size:16px;
  color:#333;
  line-height:1.7;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans JP",
    sans-serif;
}

a {
  text-decoration:none;
  color:inherit;
}
a:hover { opacity:.85; }

/* ===============================
   Layout（Bootstrap破壊防止）
================================ */
main {
  min-height:70vh;
  padding-top:25px;
  padding-bottom:30px;
}
.main-container {
  max-width:760px;
  margin:auto;
}

/* ===============================
   Header
================================ */
.site-header {
  background:#fff;
  border-bottom:1px solid #e5e7eb;
}
.header-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:100px;
  padding:15px 20px;
}
.logo img { height:40px; }
.logout-wrapper {
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
}
.logout-btn-png { width:56px; height:56px; }
.logout-label { font-size:12px; margin-top:4px; color:#333; }

/* ===============================
   Navigation（完成版）
================================ */
nav { min-height:60px; display:flex; align-items:center; }
nav .container {
  display:flex; justify-content:center; gap:16px; padding:8px 16px;
}
.nav-btn {
  flex:none; width:280px; text-align:center;
  padding:14px 0; background:#76b1bf; color:#fff;
  border:1px solid #fff; border-radius:6px; transition:.15s;
}
.nav-btn:hover { background:#006077; transform:translateY(-1px); }

/* Mobile Navigation */
@media (max-width:576px){
  nav .container { gap:10px; padding:8px 12px; }
  .nav-btn { flex:1; width:auto; padding:12px 0; font-size:12px; }
}

/* ===============================
   Page Title
================================ */
.page-title { text-align:center; margin-bottom:22px; }
.page-title h1 { font-size:18px; font-weight:500; margin-bottom:6px; }
.customer-name { font-size:20px; font-weight:500; margin-bottom:2px; }
.student-info { font-size:13px; color:#6b7280; margin:0; }

/* ===============================
   Card（共通）
================================ */
.card { border-radius:10px; border:1px solid #e5e7eb; box-shadow:0 2px 6px rgba(0,0,0,.04); }
.card-body { padding:28px; }
.main-card { border:1px solid #fff; }
.transfer-card {
  border:2px solid #60aec1;
  box-shadow:0 2px 10px rgba(118,177,191,0.15);
  transition:.2s;
}
.transfer-card:hover { box-shadow:0 2px 10px rgba(118,177,191,0.25); }
.receipt-card { border:1px solid #4d7943; background-color:#f3f3f3; }

/* ===============================
   Invoice Info
================================ */
.invoice-info { position:relative; text-align:center; padding-top:18px; }
.issue-date-global { text-align:right; font-size:12px; color:#6b7280; margin-bottom:10px; }
.issue-date-global span { color:#9ca3af; }
.invoice-title { font-size:18px; font-weight:600; margin-bottom:6px; }
.invoice-type-bill .invoice-title { color:#3092ab; }
.invoice-type-receipt .invoice-title { color:#47884a; }
.invoice-desc { font-size:13px; color:#6b7280; line-height:1.5; }
/* 請求書用のサブタイトルカラー */
.invoice-subtitle {
  font-size:18px;       /* 親と同じ大きさに調整 */
  font-weight:600;
  color:#3092ab;        /* 請求書（青系）と同じ色 */
  margin-bottom:6px;
}
/* ===============================
   Invoice Table（完全版）
================================ */
/* カテゴリ全体外枠 */
.invoice-category {
  margin-bottom:6px;
  padding:8px 12px;
  border:1px solid #b5b5b5; /* 薄い灰色外枠 */
  border-radius:0; /* 角丸なし */
}

/* カテゴリヘッダー */
.category-header {
  font-weight:400;
  font-size:16px;
  margin-bottom:6px;
  padding-bottom:4px;
  border-bottom:1px solid #d1d1d1;
}

/* カテゴリ色 */
.category-1 { background:#f0f9ff; }
.category-2 { background:#ebfff0; }
.category-3 { background:#ffebff; }
.category-4 { background:#fff9ee; }
.category-5 { background:#fff4f4; }

/* カテゴリ1（詳細行: 教室名・クラス・科目・金額） */
.invoice-category.category-1 .invoice-item .item-row {
  display:flex; justify-content:space-between; flex-wrap:wrap;
  padding:6px 0; margin:0 8px;
  border-bottom:1px solid #e5e7eb;
}
.invoice-category.category-1 .invoice-item .item-row:last-child { border-bottom:none; }

.item-label {
  font-size:14px; color:#6b7280; margin-right:8px; flex-basis:25%;
}
.item-value {
  font-size:14px; font-weight:500; text-align:right; white-space:normal; flex:1;
}

/* 金額行 */
.amount-row .item-value,
.simple-item .item-value { text-align:right; font-family:monospace; }

/* カテゴリ2〜5（シンプル行: 金額（円）のみ） */
.simple-item {
  display:flex; justify-content:space-between;
  padding:6px 0; margin:0 8px;
  border-bottom:1px solid #e5e7eb;
}
.simple-item:last-child { border-bottom:none; }


/* ===============================
   Invoice Summary（小計・消費税・合計）枠付き
================================ */
.invoice-summary {
  margin-top:16px;
  font-weight:500;

  /* カテゴリ枠と同じ外枠・パディング */
  padding:8px 12px;
  border:1px solid #d1d5db;
  border-radius:0;
  background:#fff; /* 必要に応じて背景色も揃える */
}

.invoice-summary .summary-row {
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px solid #e5e7eb; /* 区切り線 */
}

.invoice-summary .summary-row:last-child {
  border-bottom:none; /* 最後の行は線なし */
}

.invoice-summary .total {
  font-size: 22px;
  font-weight: 600;
}

/* ===============================
   スマホ対応（完全版）
================================ */
@media (max-width:576px){

  /* 全行: 横並び固定で1行表示（カテゴリ2〜5） */
  .invoice-item .item-row,
  .simple-item {
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
  }

  /* ラベル（左） */
  .item-label {
    margin-bottom: 0;
    flex-basis: 35%;       /* 40% → 35%で長い文字を収めやすく */
    font-size: 12px;       /* 微調整で収まりやすく */
    overflow: hidden;
    text-overflow: ellipsis; /* はみ出したら「…」で省略 */
    white-space: nowrap;    /* 改行禁止 */
  }

  /* 値（右） */
  .item-value {
    text-align: right;
    flex-basis: 65%;       /* ラベル縮小分を拡大 */
    font-size: 12px;
    white-space: nowrap;   /* 改行禁止 */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 金額行・シンプル行 */
  .amount-row .item-value,
  .simple-item .item-value {
    text-align: right;
    font-family: monospace;
  }

  /* ===============================
     カテゴリ1だけ改行可能（特殊ケース）
  ================================= */
  .invoice-category.category-1 .item-value {
    flex-basis: auto !important;    /* 幅を自動にして改行可能に */
    white-space: normal !important; /* 改行許可 */
    overflow: visible !important;   /* はみ出し制限解除 */
    text-overflow: clip !important; /* 省略を無効化 */
  }

}

/* ===============================
   金額強調（カードなど）
================================ */
.transfer-amount {
  font-size:26px;
  font-weight:700;
  color:#44636b;
  margin:6px 0;
  background:
    repeating-linear-gradient(
      135deg,
      #f3f4f6, #f3f4f6 6px,
      #fafafa 6px, #fafafa 12px
    );
  display:inline-block;
  padding:6px 32px;
  border-radius:6px;
  border:1px solid #e5e7eb;
}
.receipt-card .transfer-amount {
  color:#445d46;
  background:
    repeating-linear-gradient(
      135deg,
      #f1f8f4, #f1f8f4 6px,
      #f8fbf9 6px, #f8fbf9 12px
    );
}

/* ===============================
   お知らせタイトル調整
================================ */
.invoice-info.invoice-type-bill {
  padding-top:18px;    /* 上部の余白を統一 */
  margin-top: 40px;
  margin-bottom:6px;
  text-align:center;   /* PCは中央揃え */
}

/* ===============================
   お知らせカード
================================ */
.notice-card {
  border:1px solid #e5e7eb;       /* カード枠 */
  border-radius:10px;             /* 角丸 */
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  background:#fff;
  margin-top:0;                   /* タイトルとの間隔はinvoice-infoで調整 */
  margin-bottom:16px;             /* 下の余白 */
}

.notice-card .card-body {
  padding:16px;                   /* 合計カードと同じパディング */
}

/* 本文 */
.notice-card .notice-line {
  font-size:14px;
  line-height:1.2;
  color:#333;
  margin-bottom:6px;              /* 行間隔 */
}

/* ===============================
   お知らせSP対応
================================ */
@media (max-width:576px){
  .invoice-info.invoice-type-bill {
    text-align:left;
    padding-top:14px;  /* SPは少し詰める */
    margin-bottom:6px;
  }

  .notice-card .card-body {
    padding:16px;
  }

  .notice-card .notice-line {
    font-size:13px;
    line-height:1.5;
  }
}
/* ===============================
   お問合せ先
================================ */
/* セクション全体 */
.contact-info-section {
  margin-top: 4rem;    /* PC上部余白：広め */
  margin-bottom: 2rem; /* 下は控えめ */
}

/* タイトル部分 */
.contact-info-header {
  font-size: 1.25rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  border-left: 4px solid #23ac66; /* アクセントカラーのライン */
}

/* 内容カード */
.contact-info-card {
  background-color: #f3f3f3;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 各行 */
.contact-info-body .contact-line {
  margin: 0.5rem 0;
  line-height: 1.6;
}

/* 注意書き */
.contact-info-body .note {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.75rem;
}
/* SP用調整 */
@media (max-width:576px){
  .contact-info-section {
    margin-top: 3rem;  /* SPは少し控えめに */
    margin-bottom: 1.5rem;
  }
}
/* ===============================
   フッター
================================ */
.site-footer {
  background-color: #9b9b9b;
  border-top: 1px solid #e5e7eb;  /* 薄い区切り線 */
  padding: 2rem 0;                 /* 上下余白しっかり */
  margin-top: 25px;
}

.site-footer .footer-text {
  font-size: 0.875rem;             /* 少し小さめで上品 */
  color: #fff;
  display: block;
}

@media (max-width:576px){
  .site-footer {
    padding: 1.5rem 0;             /* SPでは少し詰める */
  }
  .site-footer .footer-text {
    font-size: 0.8rem;
  }
}
/* ===============================
   Responsive / SP調整
================================ */
@media (max-width:576px){
  .card-body { padding:22px; }
  .logo img { height:32px; }
  .nav-btn { font-size:12px; padding:12px 0; }
  .nav-btn + .nav-btn { margin-left:12px; }
  .invoice-info { text-align:left; padding-top:0; }
  .issue-date { position:static; text-align:right; margin-bottom:4px; }
  .transfer-amount { font-size:22px; }
  .bank-info { margin-top:12px; }
}