:root {
  --font-rounded: 'M PLUS Rounded 1c', sans-serif;
  --font-bold:    'M PLUS 1p', sans-serif;
  --color-primary:   #0751a4;
  --color-bg:        #007bc7;
  --color-white:     #ffffff;
  --color-light-bg:  #e7f3f9;
  --color-text-dark: #222222;
  --color-text-gray: #687787;
  --color-border:    #c8d8e8;
  --shadow-navbar:   0px 6px 6px 0px rgba(0, 83, 125, 0.1);
}

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400&family=M+PLUS+1p:wght@700;800&display=swap');

/* ============================================================
   リセット
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-rounded);
}

/* ============================================================
   PC レイアウト（768px 以上）
============================================================ */
@media (min-width: 768px) {
  html {
    height: 100%;
    overflow: hidden;
  }

  body {
    background-color: var(--color-bg);
    height: 100%;
    overflow: hidden;
  }

  .page-wrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 375px 1fr;
    align-items: center;
  }

  /* フォームなど縦に長いページ：左右カラムを上揃えにする */
  .page-wrapper--form {
    align-items: start;
  }

  .page-wrapper--form .left-column {
    align-self: center;
  }

  .page-wrapper--form .right-column-top {
    align-self: stretch;
  }

  /* ---- 左カラム ---- */
  .left-column {
    display: flex;
    flex-direction: column;
    gap: 120px;
    align-items: center;
    padding: 60px 46px;
    justify-self: center;
    width: 100%;
    max-width: 532px;
  }

  .left-hero {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    text-align: center;
    color: var(--color-white);
    width: 100%;
  }

  .left-hero-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .left-hero-heading .sub {
    font-family: var(--font-rounded);
    font-weight: 300;
    font-size: 40px;
    color: var(--color-white);
    line-height: 1.3;
  }

  .left-hero-heading .main {
    font-family: var(--font-bold);
    font-weight: 800;
    font-size: 46px;
    color: var(--color-white);
    line-height: 1.3;
  }

  .left-hero-link {
    font-family: var(--font-rounded);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-white);
    text-decoration: underline;
    letter-spacing: 0.32px;
    cursor: pointer;
  }

  .left-contact {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: 331px;
  }

  .left-contact-text {
    font-family: var(--font-rounded);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-white);
    text-align: center;
    letter-spacing: 0.32px;
    line-height: 1.7;
  }

  .btn-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 280px;
    height: 48px;
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 24px;
    padding: 20px 40px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
  }

  .btn-contact:hover {
    opacity: 0.85;
  }

  .btn-contact span {
    font-family: var(--font-rounded);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-primary);
    white-space: nowrap;
  }

  .btn-contact .icon-arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  /* ---- ログインパネル・会員登録パネル（中央） ---- */
  .login-panel,
  .register-panel,
  .register-sent-panel {
    width: 375px;
    height: 100vh;
    background-color: var(--color-white);
    position: relative;
    overflow-y: auto;
    align-self: stretch;
  }

  /* ---- ユーザ登録フォームパネル（中央） ---- */
  .register-user-panel {
    width: 375px;
    height: 100vh;
    background-color: var(--color-white);
    overflow-y: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  /* ---- 右カラム ---- */
  .right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-self: center;
    padding: 60px 46px;
    width: 100%;
    max-width: 408px;
  }

  .qr-image {
    width: 200px;
    height: 192px;
    object-fit: cover;
  }

  .right-column p {
    font-family: var(--font-rounded);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-white);
    text-align: center;
    letter-spacing: 0.32px;
    line-height: 1.7;
  }
}

/* ============================================================
   スマホ レイアウト（767px 以下）
   ルール：中央パネルのみ全幅で表示。左・右カラムは非表示。
   ※ 新しいページを追加したら「中央パネル共通」リストに
     クラス名を追記してください。
============================================================ */
@media (max-width: 767px) {
  body {
    background-color: var(--color-white);
    min-height: 100vh;
  }

  .page-wrapper {
    width: 100%;
    min-height: 100vh;
    display: block;
  }

  /* ---- 左・右カラムは非表示（全ページ共通） ---- */
  .left-column,
  .right-column,
  .right-column-top {
    display: none;
  }

  /* ---- 中央パネル共通：全幅・白背景（全ページ共通） ----
     新しいページを追加する際はここにクラス名を追加する
     例: .new-panel { ... }
  -------------------------------------------------------- */
  .login-panel,
  .top-panel,
  .mypage-panel,
  .neworder-panel,
  .orderdetail-panel,
  .register-panel,
  .register-sent-panel,
  .register-user-panel,
  .orderhistory-panel,
  .email-change-panel,
  .password-change-panel,
  .password-reset-form-panel,
  .order-complete-panel,
  .profile-edit-panel,
  .withdrawal-panel,
  .help-panel,
  .order-cancel-panel,
  .static-panel {
    width: 100%;
    min-height: 100vh;
    background-color: var(--color-white);
  }

  /* ---- ページ固有スタイル ---- */

  /* ログインパネル・会員登録パネル：絶対配置レイアウトのため必要 */
  .login-panel,
  .register-panel,
  .register-sent-panel {
    position: relative;
    overflow: hidden;
  }

  /* ユーザ登録フォームパネル：フレックスボックスレイアウト */
  .register-user-panel {
    display: flex;
    flex-direction: column;
  }

  /* トップ・マイページ・新規注文・注文詳細・注文履歴・アカウントパネル：フレックスボックスレイアウト */
  .top-panel,
  .mypage-panel,
  .neworder-panel,
  .orderdetail-panel,
  .orderhistory-panel,
  .email-change-panel,
  .password-change-panel,
  .password-reset-form-panel,
  .order-complete-panel,
  .profile-edit-panel,
  .withdrawal-panel,
  .help-panel,
  .order-cancel-panel,
  .static-panel {
    display: flex;
    flex-direction: column;
  }
}

/* ============================================================
   ログインパネル内：共通スタイル
============================================================ */

/* ロゴ */
.logo-wrap {
  position: absolute;
  top: 44px;
  left: 101px;
  width: 173px;
  height: 45px;
}

.logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 767px) {
  .logo-wrap {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* フォームエリア */
.form-area {
  position: absolute;
  top: 161px;
  left: 24px;
  width: 327px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 767px) {
  .form-area {
    left: 50%;
    transform: translateX(-50%);
    width: min(327px, calc(100% - 48px));
  }
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.field-label {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  line-height: 24px;
}

.input-wrap {
  background-color: var(--color-white);
  border: 1px solid #8996a2;
  border-radius: 4px;
  width: 100%;
}

.input-wrap input {
  width: 100%;
  padding: 12px;
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  background: transparent;
  border: none;
  outline: none;
  line-height: 24px;
}

.input-wrap input::placeholder {
  color: var(--color-text-gray);
}

.password-field-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.forgot-password {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-text-dark);
  text-decoration: underline;
  text-align: right;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-end;
}

/* チェックボックス */
.checkbox-row {
  position: absolute;
  top: 426px;
  left: 24px;
  width: 327px;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 767px) {
  .checkbox-row {
    left: 50%;
    transform: translateX(-50%);
    width: min(327px, calc(100% - 48px));
  }
}

.checkbox-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.checkbox-row label {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  cursor: pointer;
  white-space: nowrap;
}

/* ログインボタン */
.btn-login {
  position: absolute;
  top: 467px;
  left: 24px;
  width: 327px;
  height: 64px;
  background-color: var(--color-primary);
  border: none;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s;
}

@media (max-width: 767px) {
  .btn-login {
    left: 50%;
    transform: translateX(-50%);
    width: min(327px, calc(100% - 48px));
  }
}

.btn-login:hover {
  opacity: 0.88;
}

.btn-login span {
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-white);
  letter-spacing: 0.34px;
}

/* 会員登録バナー */
.register-banner {
  position: absolute;
  top: 604px;
  left: 45px;
  background-color: var(--color-light-bg);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 767px) {
  .register-banner {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
}

.register-banner .icon-info {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.register-banner p {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  text-align: center;
  white-space: nowrap;
}

.register-banner p .underline {
  text-decoration: underline;
}

.register-banner p .red {
  color: #e60012;
}

/* ============================================================
   PC：トップパネル・右カラム（768px 以上）
============================================================ */
@media (min-width: 768px) {
  .top-panel {
    width: 375px;
    height: 100vh;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-self: stretch;
    overflow-y: auto;
  }

  /* ---- 右カラム（トップページ） ---- */
  .right-column-top {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    padding: 80px 46px 60px;
  }

  /* ---- ハンバーガーメニューボタン・ドロワー：PC では非表示 ---- */
  .navbar-menu-btn,
  .sp-menu {
    display: none;
  }
}

/* ============================================================
   PC：マイページ・新規注文パネル（768px 以上）
============================================================ */
@media (min-width: 768px) {
  .mypage-panel,
  .neworder-panel,
  .orderdetail-panel,
  .orderhistory-panel,
  .email-change-panel,
  .password-change-panel,
  .password-reset-form-panel,
  .order-complete-panel,
  .profile-edit-panel,
  .withdrawal-panel,
  .help-panel,
  .order-cancel-panel,
  .static-panel {
    width: 375px;
    height: 100vh;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-self: stretch;
    overflow-y: auto;
  }
}

/* ============================================================
   スマホ：ハンバーガーメニュー・ドロワー（767px 以下）
============================================================ */
@media (max-width: 767px) {

  /* ---- メニューボタン ---- */
  .navbar-menu-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* ---- ドロワー本体 ---- */
  /* display: none/flex ではアニメーションできないため
     transform + transition でスライド制御する        */
  .sp-menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    height: calc(100vh - 56px);
    background-color: var(--color-bg);
    z-index: 100;
    padding: 32px 24px 0;
    overflow-y: auto;
    /* 右外へ隠しておく */
    transform: translateX(100%);
    transition: transform 0.3s ease;
    pointer-events: none;
  }

  /* ---- 開いた状態（右から左へスライドイン） ---- */
  .sp-menu.is-open {
    transform: translateX(0);
    pointer-events: auto;
  }

  /* ---- ドロワータイトル ---- */
  .sp-menu-drawer-title {
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-white);
    line-height: 1;
  }

  /* ---- メニューリスト ---- */
  .sp-menu-drawer-nav {
    border-top: 2px solid var(--color-white);
    padding: 30px 0 30px 16px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* ---- 各メニュー項目 ---- */
  .sp-menu-drawer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }

  .sp-menu-drawer-item img {
    width: 8px;
    height: 13px;
    flex-shrink: 0;
  }

  .sp-menu-drawer-item span {
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-white);
    white-space: nowrap;
  }
}

/* ============================================================
   ナビゲーションバー（共通）
============================================================ */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 10px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-navbar);
  width: 100%;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-logo {
  width: 85px;
  height: 22px;
  object-fit: contain;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.navbar-actions img {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

/* ============================================================
   ボタン：アウトライン（詳細・キャンセル確認ページ）
============================================================ */
.btn-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 200px;
  height: 48px;
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 24px;
  padding: 0 40px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-primary);
  white-space: nowrap;
}

.btn-detail:hover {
  opacity: 0.85;
}

.btn-detail img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ============================================================
   ステータスバッジ（共通 → .order-badge に統一）
============================================================ */

/* ============================================================
   注文セクション・カード（共通）
============================================================ */
.username {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: #000000;
  line-height: 1;
  margin-top: 32px;
  padding: 0 24px;
}

.btn-new-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 200px;
  height: 64px;
  background-color: var(--color-primary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
  margin: 41px auto 0;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-white);
}

.btn-new-order:hover { opacity: 0.88; }

.btn-new-order img {
  width: 24px;
  height: 24px;
}


/* ---- 進行中の注文（横スクロールカルーセル） ---- */
.inprogress-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 32px;
}

.inprogress-header {
  padding: 0 24px;
}

.inprogress-title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 16px;
  color: #000000;
  line-height: 1;
}

.inprogress-cards {
  display: flex;
  gap: 10px;
  /* 2枚のときは中央配置、3枚以上であふれる場合は自動で左寄せ（safe） */
  justify-content: safe center;
  padding: 20px 10px;
  background-color: #bdbdbd;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* 左右 padding 10px ぶん、スナップ時に内寄せで揃える（左端スクロールで
     カードがガクッと動くのを防止） */
  scroll-padding-inline: 10px;
  -webkit-overflow-scrolling: touch;
}

.inprogress-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 10px;
  background-color: var(--color-white);
  border-radius: 4px;
  width: calc((100% - 30px) / 2);
  box-sizing: border-box;
  flex-shrink: 0;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}

.inprogress-card .order-badge {
  align-self: center;
}

.inprogress-card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-start;
}

.inprogress-card-info .card-row {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 14px;
  color: #000;
  white-space: nowrap;
}

.inprogress-card-thumbs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.inprogress-card-thumb {
  width: 100px;
  height: auto;
  padding: 10px;
  box-sizing: content-box;
  background-color: #f5f5f5;
  object-fit: contain;
  display: block;
}

/* ---- トップ：注文セクション（新規注文 / 注文履歴から注文） ---- */
.home-order-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
  padding: 0 24px;
}

.home-order-section:last-of-type {
  padding-bottom: 40px;
}

.home-section-title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 16px;
  color: #000;
  line-height: 1;
  margin: 0;
  padding: 20px 0;
  border-bottom: 2px solid var(--color-primary);
}

/* 注文履歴を全て表示（border-top/bottom 区切り線付きリンク） */
.orderhistory-show-all {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  border-top: 1px solid #d9dde1;
  border-bottom: 1px solid #d9dde1;
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  text-decoration: underline;
  line-height: 1;
}

/* 新規注文カード（名刺 / リーフレット） */
.neworder-cards {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: stretch;
}

.neworder-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  /* border は2pxのまま、hover時は inset box-shadow を 4px 追加して計6pxに見せる
     （レイアウトずれ防止） */
  box-shadow: inset 0 0 0 0 var(--color-primary);
  transition: box-shadow 0.2s ease;
}

.neworder-card:hover {
  box-shadow: inset 0 0 0 4px var(--color-primary);
}

.neworder-card-icon {
  height: 90px;
  /* width: auto; */
  width: 90px;
  object-fit: contain;
  flex-shrink: 0;
}

.neworder-card-title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-primary);
  line-height: 1;
}

.order-cards {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.order-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.card-info {
  background-color: var(--color-light-bg);
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 14px;
  color: #000000;
  line-height: 1;
}

/* ============================================================
   サイドメニュー（PC右カラム）
============================================================ */
/* ---- 共通メニュー上部：新規注文ボタン ---- */
.btn-menu-new-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 64px;
  padding: 20px 40px;
  background-color: var(--color-primary);
  border: 2px solid var(--color-white);
  border-radius: 4px;
  text-decoration: none;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-white);
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.btn-menu-new-order:hover { opacity: 0.88; }

.btn-menu-new-order img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* PC サイドメニューではボタン下に 40px の余白 */
.side-menu > .btn-menu-new-order {
  margin-bottom: 40px;
}

/* SP ドロワーは .sp-menu 側で gap:20px 持っているため 20px 追加で合計 40px */
@media (max-width: 767px) {
  .sp-menu > .btn-menu-new-order {
    margin-bottom: 20px;
  }
}

.side-menu-title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-white);
  margin-bottom: 20px;
}

.side-menu-nav {
  border-top: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  padding: 30px 0 30px 16px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.side-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.side-menu-item img {
  width: 8px;
  height: 13px;
  flex-shrink: 0;
}

.side-menu-item span {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-white);
  white-space: nowrap;
}

/* ============================================================
   QRコードセクション（共通）
============================================================ */
.qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.qr-section .qr-image {
  width: 200px;
  height: 192px;
  object-fit: cover;
}

.qr-section p {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-white);
  text-align: center;
  letter-spacing: 0.32px;
  line-height: 1.7;
}

/* ============================================================
   マイページ：パンくずリスト
============================================================ */
.breadcrumb-bar {
  border-bottom: 1px solid #d9dde1;
  padding: 19px 24px 10px;
  flex-shrink: 0;
}

.breadcrumb {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  line-height: 1;
}
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

/* ============================================================
   マイページ：セクションタイトル・カード
============================================================ */
.mypage-section-title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 16px;
  color: #000000;
  line-height: 1;
  padding: 20px 0 0 24px;
  flex-shrink: 0;
}

.mypage-cards {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 20px 24px 40px;
}

/* ---- カード ---- */
.mypage-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- カードヘッダー ---- */
.mypage-card-header {
  background-color: var(--color-light-bg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- カードアイコン（プレースホルダー） ---- */
.mypage-card-icon {
  width: 18px;
  height: 18px;
  background-color: #c9c9c9;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-rounded);
  font-weight: 300;
  font-size: 10px;
  color: #000000;
  line-height: 1;
}

/* ---- カードタイトル ---- */
.mypage-card-title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 14px;
  color: #000000;
  line-height: 1;
}

/* ---- カードボディ ---- */
.mypage-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- 説明文 ---- */
.mypage-card-desc {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  line-height: 1.8;
  width: 100%;
}

/* ---- リンク一覧 ---- */
.mypage-card-links {
  display: flex;
  flex-direction: column;
}

/* ---- リンク項目 ---- */
.mypage-card-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  line-height: 1.8;
}

.mypage-card-link img {
  width: 8px;
  height: 13px;
  flex-shrink: 0;
}

.mypage-card-link span {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-primary);
  text-decoration: underline;
  white-space: nowrap;
}

/* ============================================================
   新規注文：フォームレイアウト
============================================================ */
.neworder-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 20px;
}

/* ---- グレー背景フォームセクション ---- */
.neworder-form-section {
  background-color: #f5f6f6;
  padding: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- 合計・支払い・ボタン（白背景） ---- */
.neworder-bottom-section {
  padding: 0 24px 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   新規注文：フォームフィールド共通
============================================================ */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.form-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-label-text {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  line-height: 1;
}

/* ---- 必須バッジ ---- */
.badge-required {
  background-color: #e60012;
  padding: 4px 8px;
  font-family: var(--font-rounded);
  font-weight: 500;
  font-size: 12px;
  color: var(--color-white);
  line-height: 1;
  flex-shrink: 0;
}

/* ============================================================
   新規注文：セレクトボックス
============================================================ */
.select-wrapper {
  position: relative;
  background-color: var(--color-white);
  border: 1px solid #8996a2;
  border-radius: 4px;
  width: 100%;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 48px;
  padding: 12px;
  padding-right: 44px;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  cursor: pointer;
}

.select-icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.select-icon img {
  width: 16px;
  height: 10px;
  display: block;
}

/* ============================================================
   新規注文：入稿データアップロードエリア
============================================================ */
.form-field.upload-field {
  gap: 24px;
  align-items: center;
}

.upload-preview-area {
  background-color: var(--color-white);
  width: 100%;
  padding: 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-placeholder-img {
  width: 96px;
  height: auto;
  padding: 10px;
  box-sizing: content-box;
  background-color: #f5f5f5;
  object-fit: contain;
  display: block;
}

/* ---- ファイル追加ボタン ---- */
.btn-add-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 200px;
  height: 48px;
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 24px;
  padding: 0 24px;
  cursor: pointer;
  transition: opacity 0.2s;
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-add-file:hover {
  opacity: 0.85;
}

.btn-add-file img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ---- ファイル追加：hidden input & preview list ---- */
.upload-input {
  display: none;
}

.upload-preview-area.has-files {
  padding: 16px;
  display: block;
}

.upload-preview-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.upload-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 8px 12px;
}

.upload-preview-thumb {
  width: 100px;
  height: 100px;
  padding: 8px;
  box-sizing: content-box;
  border-radius: 4px;
  background-color: var(--color-white);
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.upload-preview-thumb--file {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 11px;
  color: var(--color-primary);
  text-transform: uppercase;
}

.upload-preview-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-rounded);
  font-size: 14px;
  color: #333;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-preview-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background-color: #999;
  color: var(--color-white);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.2s;
}

.upload-preview-remove:hover {
  opacity: 0.85;
}

/* ============================================================
   新規注文：テキストエリア
============================================================ */
.textarea-input {
  width: 100%;
  min-height: 105px;
  padding: 12px;
  background-color: var(--color-white);
  border: 1px solid #8996a2;
  border-radius: 4px;
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  resize: vertical;
  outline: none;
  line-height: 1.5;
  box-sizing: border-box;
}

.textarea-input::placeholder {
  color: var(--color-text-gray);
}

/* ============================================================
   新規注文：合計金額
============================================================ */
.neworder-total-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 30px 0;
  border-bottom: 1px solid #8996a2;
  width: 100%;
}

.total-label {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  line-height: 1;
}

.total-amount {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 30px;
  color: #e60012;
  line-height: 1;
}

/* ============================================================
   新規注文：お支払い方法
============================================================ */
.neworder-payment-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 0 40px;
}

.payment-title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 16px;
  color: #000000;
  line-height: 1;
}

.payment-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- ラジオボタン選択肢 ---- */
.payment-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  cursor: pointer;
}

.payment-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.payment-option.is-selected {
  background-color: var(--color-light-bg);
  border: 1px solid var(--color-primary);
}

/* ---- カスタムラジオ円 ---- */
.radio-custom {
  width: 18px;
  height: 18px;
  border: 1px solid #8996a2;
  border-radius: 9px;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.radio-dot {
  width: 10px;
  height: 10px;
  background-color: var(--color-primary);
  border-radius: 5px;
  display: none;
}

.payment-option.is-selected .radio-dot {
  display: block;
}

.payment-option-text {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text-dark);
  line-height: 1;
}

/* ============================================================
   新規注文：注文ボタン
============================================================ */
.btn-order {
  width: 100%;
  height: 64px;
  background-color: var(--color-primary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-white);
  letter-spacing: 0.34px;
  transition: opacity 0.2s;
}

.btn-order:hover {
  opacity: 0.88;
}

/* ============================================================
   新規注文：テキスト入力フィールド
============================================================ */
.text-input {
  width: 100%;
  height: 48px;
  padding: 12px;
  background-color: var(--color-white);
  border: 1px solid #8996a2;
  border-radius: 4px;
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  outline: none;
  box-sizing: border-box;
}

.text-input::placeholder {
  color: var(--color-text-gray);
}

/* ============================================================
   新規注文：注文プラントリガーボタン
============================================================ */
.plan-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding: 12px;
  background-color: var(--color-white);
  border: 1px solid #8996a2;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}

.plan-trigger-placeholder {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-gray);
}

.plan-trigger.has-value .plan-trigger-placeholder {
  color: var(--color-text-dark);
}

.plan-trigger img {
  width: 16px;
  height: 10px;
  flex-shrink: 0;
}

/* ============================================================
   注文プラン選択モーダル
============================================================ */
.plan-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: none;
}

.plan-modal-overlay.is-open {
  display: block;
}

.plan-modal {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 375px;
  height: 100vh;
  background-color: var(--color-white);
  z-index: 201;
  overflow-y: auto;
  display: none;
  flex-direction: column;
}

.plan-modal.is-open {
  display: flex;
}

@media (max-width: 767px) {
  .plan-modal {
    width: 100%;
    left: 0;
    transform: none;
  }
}

/* ---- モーダルヘッダー ---- */
.plan-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 56px;
  padding: 0 24px;
  flex-shrink: 0;
}

.plan-modal-title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 20px;
  color: #000000;
  line-height: 1;
}

.plan-modal-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.plan-modal-close img {
  width: 24px;
  height: 24px;
}

.plan-modal-divider {
  height: 1px;
  background-color: #d9dde1;
  flex-shrink: 0;
}

/* ---- プランオプション一覧 ---- */
.plan-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 46px 24px 30px;
}

.plan-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  cursor: pointer;
}

.plan-option.is-selected {
  background-color: var(--color-light-bg);
  border: 1px solid var(--color-primary);
}

.plan-option-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-option-name {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text-dark);
  line-height: 1;
}

.plan-option-price {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  line-height: 1;
}

/* ---- モーダル下部ボタン ---- */
.plan-modal-buttons {
  display: flex;
  gap: 16px;
  padding: 30px 24px 40px;
  margin-top: auto;
  flex-shrink: 0;
}

.btn-plan-close {
  flex: 1;
  height: 64px;
  background-color: var(--color-white);
  border: 3px solid var(--color-primary);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-primary);
  letter-spacing: 0.34px;
  transition: opacity 0.2s;
}

.btn-plan-close:hover {
  opacity: 0.85;
}

.btn-plan-select {
  flex: 1;
  height: 64px;
  background-color: var(--color-primary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-white);
  letter-spacing: 0.34px;
  transition: opacity 0.2s;
}

.btn-plan-select:hover {
  opacity: 0.88;
}

/* ============================================================
   注文詳細ページ
============================================================ */

/* ---- コンテンツラッパー ---- */
.orderdetail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 24px 40px;
  flex: 1;
}

/* ---- ステータス情報ボックス ---- */
.order-status-box {
  background-color: var(--color-light-bg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-status-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.order-status-label,
.order-status-sep,
.order-status-value {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 14px;
  color: #000000;
  line-height: 1;
  white-space: nowrap;
}

/* ---- バッジ ---- */
.order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 20px;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-white);
  line-height: 1;
  white-space: nowrap;
}

.order-badge--complete {
  background-color: #00a0e9;
}

.order-badge--paid {
  background-color: #7ae1f9;
}

/* ---- サムネイル ---- */
.order-thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.order-thumb {
  width: 96px;
  padding: 10px;
  box-sizing: content-box;
  background-color: #f5f5f5;
  flex-shrink: 0;
}

/* 横画像：order-thumbnails の幅に合わせ、2枚で折り返す */
.order-thumb.is-landscape {
  box-sizing: border-box;
  width: calc((100% - 16px) / 2);
}

/* 横画像が1枚のみ：コンテナ幅いっぱいに表示 */
.order-thumbnails > .order-thumb.is-landscape:only-child {
  width: 100%;
}

.order-thumb img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ---- 詳細テーブル ---- */
.order-detail-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-detail-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.order-detail-row--top {
  align-items: flex-start;
}

.order-detail-label {
  background-color: var(--color-light-bg);
  width: 120px;
  min-width: 120px;
  padding: 4px 6px;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 14px;
  color: #000000;
  line-height: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-detail-value {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  line-height: 1;
}

/* コメントなど折り返しが必要な値 */
.order-detail-value--flex {
  flex: 1;
  line-height: 1.6;
  word-break: break-all;
}

/* お支払い方法など縦並びの値 */
.order-detail-value--col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- 戻るボタン ---- */
.order-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 12px;
}

.btn-back {
  width: 180px;
  padding: 10px 40px;
  background-color: var(--color-text-gray);
  border: none;
  border-radius: 4px;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 16px;
  color: var(--color-white);
  letter-spacing: 0.34px;
  line-height: normal;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-back:hover {
  opacity: 0.85;
}

/* ============================================================
   ユーザ登録フォームページ
============================================================ */

/* ナビバー：ロゴのみ中央配置バリアント */
.navbar--logo-only {
  justify-content: center;
}

/* コンテンツ本体 */
.register-user-body {
  padding: 40px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

/* タイトル */
.register-user-title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 28px;
  color: #000000;
  text-align: center;
  line-height: 1;
}

/* 説明文 */
.register-user-desc {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  text-align: center;
  line-height: 1.8;
}

/* メールアドレス確認ボックス */
.register-user-email-info {
  background-color: var(--color-light-bg);
  padding: 10px;
  overflow: hidden;
}

.register-user-email-info p {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-dark);
  line-height: 1.8;
}

/* フォームセクション */
.register-user-form {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* フィールド群 */
.register-user-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* パスワード要件ヒント */
.register-password-hint {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-text-gray);
  line-height: 1.4;
  padding-top: 20px;
  width: 100%;
}

/* パスワードを表示するチェックボックス */
.register-show-password {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-end;
}

.register-show-password input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.register-show-password label {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: #001018;
  cursor: pointer;
  white-space: nowrap;
}

/* ============================================================
   注文履歴ページ
============================================================ */

/* ---- バッジ追加色 ---- */
.order-badge--accepted  { background-color: #7ae1f9; } /* 受注済 */
.order-badge--ordered   { background-color: #0cb938; } /* 注文中 */
.order-badge--cancelled { background-color: #f18888; } /* キャンセル */
.order-badge--received  { background-color: var(--color-primary); } /* 受領済 */

/* ---- コンテンツ全体ラッパー ---- */
.orderhistory-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 24px 0;
}

/* ---- セクションタイトル ---- */
.orderhistory-section-title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 16px;
  color: #000000;
  line-height: 1;
}

/* ---- タブ ---- */
.orderhistory-tabs-wrap {
  display: flex;
  flex-direction: column;
}

.orderhistory-tabs {
  display: flex;
  align-items: flex-start;
}

.orderhistory-tab {
  flex: 1;
  padding: 20px;
  background: none;
  border: none;
  border-bottom: 1px solid #d9dde1;
  cursor: pointer;
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: #000000;
  text-decoration: underline;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.2s;
}

.orderhistory-tab.is-active {
  border-bottom: 2px solid var(--color-primary);
  font-family: var(--font-bold);
  font-weight: 700;
  text-decoration: none;
}

/* ---- 件数バー ---- */
.orderhistory-count-bar {
  border-bottom: 1px solid #d9dde1;
  padding: 16px 0;
  text-align: center;
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  line-height: 1;
}

/* ---- カードリスト ---- */
.orderhistory-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---- 個別カード ---- */
.orderhistory-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
}

.orderhistory-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* カードヘッダー（ライトブルー） */
.orderhistory-card-header {
  background-color: var(--color-light-bg);
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ヘッダー内の各行 */
.orderhistory-card-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 14px;
  color: #000000;
  line-height: 1;
  white-space: nowrap;
}

/* ---- 注文詳細ボタン（ピル型アウトライン） ---- */
.btn-order-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 200px;
  height: 48px;
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 24px;
  padding: 20px 40px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-order-detail span {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-primary);
  line-height: 1;
  white-space: nowrap;
}

.btn-order-detail img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.btn-order-detail:hover {
  opacity: 0.85;
}

/* ---- ページネーション ---- */
.orderhistory-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 0;
}

.pagination-btn {
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.pagination-btn:hover {
  opacity: 0.8;
}

.pagination-btn.is-active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.pagination-btn.is-arrow {
  border: none;
  background: none;
  padding: 0;
}

.pagination-btn.is-arrow img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.pagination-btn.is-prev img {
  transform: rotate(180deg);
}

.pagination-dots {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary);
  line-height: 1;
}

/* ============================================================
   アカウント設定ページ共通
   （メールアドレス変更・パスワード変更）
============================================================ */

/* ---- コンテンツラッパー ---- */
.account-content {
  padding: 20px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* アイテム間を狭くするバリアント（パスワード変更フォーム等） */
.account-content--sm-gap {
  gap: 24px;
}

/* 中央揃えバリアント（メール変更2・3等） */
.account-content--centered {
  align-items: center;
  padding-top: 20px;
}

/* ---- 完了メッセージテキスト ---- */
.account-msg {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-dark);
  text-align: center;
  line-height: 1.8;
  white-space: nowrap;
}

/* ---- インフォボックス ---- */
.account-info-box {
  background-color: var(--color-light-bg);
  padding: 10px;
  overflow: hidden;
  width: 100%;
}

.account-info-box p {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  line-height: 1.8;
  text-align: center;
}

/* 太字バリアント（現在/新しいメールアドレス表示用） */
.account-info-box--bold p {
  font-family: var(--font-bold);
  font-weight: 700;
  text-align: left;
}

/* ---- 戻る / ログイン画面ボタン（グレー・180px） ---- */
.btn-account-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 180px;
  height: 64px;
  background-color: var(--color-text-gray);
  border: none;
  border-radius: 4px;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-white);
  letter-spacing: 0.34px;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 20px;
}

.btn-account-back:hover {
  opacity: 0.85;
}

/* ---- 危険操作ボタン（退会・キャンセル確定等） ---- */
.btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  background-color: #d32f2f;
  border: none;
  border-radius: 4px;
  color: var(--color-white);
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-danger:hover {
  opacity: 0.85;
}

/* ============================================================
   ユーザ登録完了ページ
============================================================ */

/* 戻るボタン（top: 276px・グレー・中央） */
.btn-register-complete {
  position: absolute;
  top: 253px;
  left: 98px;
  width: 180px;
  height: 64px;
  background-color: var(--color-text-gray);
  border: none;
  border-radius: 4px;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-white);
  letter-spacing: 0.34px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-register-complete:hover {
  opacity: 0.85;
}

@media (max-width: 767px) {
  .btn-register-complete {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ============================================================
   会員登録ページ
============================================================ */

/* ナビバー：戻るボタン付きバリアント */
.navbar--back {
  position: relative;
  justify-content: center;
}

.navbar-back-btn {
  position: absolute;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.navbar-back-btn .icon-back {
  width: 24px;
  height: 24px;
  transform: rotate(180deg);
}

.navbar-back-btn span {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 14px;
  color: #000000;
}

/* タイトル */
.register-title {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 28px;
  color: #000000;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}

/* 説明文 */
.register-desc {
  position: absolute;
  top: 164px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  text-align: center;
  line-height: 1.8;
  white-space: nowrap;
}

/* メールアドレス入力フィールド */
.register-email-field {
  position: absolute;
  top: 262px;
  left: 24px;
  width: 327px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (max-width: 767px) {
  .register-email-field {
    left: 50%;
    transform: translateX(-50%);
    width: min(327px, calc(100% - 48px));
  }
}

/* メール送信済みインフォボックス */
.register-sent-info {
  position: absolute;
  top: 343px;
  left: 17px;
  background-color: var(--color-light-bg);
  padding: 10px;
  overflow: hidden;
}

.register-sent-info p {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  text-align: center;
  line-height: 1.8;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .register-sent-info {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* 戻るボタン（グレー・中央） */
.btn-register-back {
  position: absolute;
  top: 490px;
  left: 98px;
  width: 180px;
  height: 64px;
  background-color: var(--color-text-gray);
  border: none;
  border-radius: 4px;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-white);
  letter-spacing: 0.34px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-register-back:hover {
  opacity: 0.85;
}

@media (max-width: 767px) {
  .btn-register-back {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* 送信ボタン */
.btn-register-submit {
  position: absolute;
  top: 378px;
  left: 24px;
  width: 327px;
  height: 64px;
  background-color: var(--color-primary);
  border: none;
  border-radius: 4px;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-white);
  letter-spacing: 0.34px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-register-submit:hover {
  opacity: 0.88;
}

@media (max-width: 767px) {
  .btn-register-submit {
    left: 50%;
    transform: translateX(-50%);
    width: min(327px, calc(100% - 48px));
  }
}

/* ============================================================
   パスワード再設定ページ共通
   （送信完了・完了ページの共通コンテンツ）
============================================================ */

/* ---- 送信完了・完了ページ：絶対配置flexコンテナ ---- */
.password-reset-content {
  position: absolute;
  top: 164px;
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* 説明文 */
.password-reset-desc {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  line-height: 1.8;
  text-align: center;
}

/* インフォボックス（件名表示） */
.password-reset-info-box {
  width: 100%;
  background-color: var(--color-light-bg);
  padding: 10px;
  text-align: center;
}
.password-reset-info-box p {
  font-family: var(--font-rounded);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-dark);
  line-height: 1.8;
}

/* グレーボタン（flex内用：戻る / ログイン画面） */
.password-reset-btn-gray {
  width: 180px;
  height: 64px;
  background-color: var(--color-text-gray);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-white);
  white-space: nowrap;
  transition: opacity 0.2s;
  margin-top: 20px;
}
.password-reset-btn-gray:hover {
  opacity: 0.85;
}

/* ブルーーボタン（flex内用：戻る / ログイン画面） */
.password-reset-btn-blue {
  width: 180px;
  height: 64px;
  background-color: #4C87FD;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-white);
  white-space: nowrap;
  transition: opacity 0.2s;
  margin-top: 20px;
}
.password-reset-btn-blue:hover {
  opacity: 0.85;
}

/* ============================================================
   パスワード再設定フォームパネル（page 3）
============================================================ */

/* ページタイトル */
.password-reset-form-title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 28px;
  color: #000;
  text-align: center;
  padding: 40px 24px 0;
  line-height: 1;
  flex-shrink: 0;
}

/* コンテンツラッパー */
.password-reset-form-content {
  padding: 38px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* フィールドグループ（gap:24px） */
.password-reset-form-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ============================================================
   画像拡大ライトボックス
============================================================ */
.image-zoom-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  padding: 60px 24px 24px;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.image-zoom-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.image-zoom-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background-color: var(--color-white);
  display: block;
  transform: scale(0.92);
  transition: transform 0.25s ease;
}

.image-zoom-overlay.is-open .image-zoom-img {
  transform: scale(1);
}

.image-zoom-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}

.image-zoom-close:hover { opacity: 0.7; }

.image-zoom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  border-radius: 50%;
  color: var(--color-white);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  z-index: 2;
}

.image-zoom-nav:hover {
  background: rgba(0, 0, 0, 0.7);
}

.image-zoom-prev { left: 16px; }
.image-zoom-next { right: 16px; }


.message_txt_red {
	padding:10px;
	color:red;
	text-align:center;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}
.modal-content {
	background: white;
	padding: 2em;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.modal-check{
        color: #00A0E9;
        text-align: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
}

.modal-check-p{
	color: black;
	text-align: center;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
}

.modal-alert-p{
	color: red;
	text-align: center;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
}

.hidden {
	display: none;
}
.modal-content button {
	margin: 0 1em;
	padding: 0.5em 1em;
}