/* withcafe header (white base) */
.nav-wrapper {
  width: 100%; height: 55px; position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background-color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 15px;
  border-bottom: 1px solid #e5e7eb;
}
.nav-wrapper a { color: #555; text-decoration: none; }
.nav-wrapper a:hover { color: #111; }

.nav-logo { display:flex; align-items:center; height:55px; }
.nav-logo-txt { font-family: 'Caveat', cursive; font-size: 1.4rem; }

.nav-box { display:none; align-items:center; justify-content:space-between; width:100%; }
@media (min-width:768px){ .nav-box{ display:flex; } }

.nav-box-menu { display:flex; align-items:center; gap:16px; list-style:none; margin:0 12px 0 24px; padding:0; }
.nav-box-menu li a { padding:6px 8px; border-radius:8px; }
.nav-box-menu li a:hover { background:#f3f4f6; }

.nav-box-cta { display:flex; gap:10px; align-items:center; }
/* --- PC header buttons (flat, cafe tone) --- */
.nav-box-login_button,
.nav-box-register_button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 14px;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

/* 通常ボタン（白ベース・フラット） */
.nav-box-login_button{
  background:#ffffff;
  color:#111827;
}
a.nav-box-login_button{ color:#111827; } /* 念のため */
.nav-box-login_button:hover{
  background:#f9fafb;
  border-color:#d1d5db;
}
.nav-box-login_button:active{
  background:#f3f4f6;
  border-color:#cbd5e1;
}

/* CTA（無料で始める）：指定色 #c3b5a5 */
.nav-box-register_button{
  background:#c3b5a5;
  border:1px solid #c3b5a5;
  color:#fff !important;      /* ベージュに合う濃いブラウンで視認性UP */
}
a.nav-box-register_button{
  color:#fff !important;      /* .nav-wrapper a {color:#333} に勝つ */
  text-decoration:none;
}

.nav-box-register_button:hover{
  background:#b6a794;            /* ほんの少しだけ深く（フラットのまま） */
  border-color:#b6a794;
  color:#fff !important;
}
.nav-box-register_button:active{
  background:#aa9a86;
  border-color:#aa9a86;
  color:#fff !important;
}

/* リンク見た目を消す */
a.nav-box-login_button,
a.nav-box-register_button{
  text-decoration:none;
}

/* User avatar + dropdown */
.nav-box-user { position: relative; }
.nav-box-user-icon{ width:35px; height:35px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.nav-box-user-icon img{ width:32px; height:32px; border-radius:50%; border:1px solid #e5e7eb; object-fit:cover; }

.nav-box-user-dropdown-wrapper{
  display:none; position:absolute; top:54px; right:0; width:260px; background:#fff; border:1px solid #e5e7eb;
  border-radius:8px; box-shadow: 0 4px 12px rgba(0,0,0,.08); padding:8px 0; z-index:1000;
}
.nav-box-user-dropdown-wrapper::before{
  content:""; position:absolute; top:-10px; right:16px; border:10px solid transparent; border-bottom:10px solid #fff; z-index:2;
}
.nav-box-user-dropdown-wrapper::after{
  content:""; position:absolute; top:-12px; right:14px; border:12px solid transparent; border-bottom:12px solid #e5e7eb; z-index:1;
}
.nav-box-user-dropdown-wrapper-scroll{ max-height:70vh; overflow:auto; }

.nav-box-user-dropdown-wrapper-title{
  font-size:12px; font-weight:700; color:#6b7280; padding:6px 14px; margin-top:4px;
}
.nav-box-user-dropdown-box{ list-style:none; margin:0; padding:0; }
.nav-box-user-dropdown-list{
  position:relative; padding:12px 14px; transition: background .15s ease; font-size:13px;
}
.nav-box-user-dropdown-list:hover{ background:#f9fafb; }
.nav-box-user-dropdown-list a{ color:#374151; text-decoration:none; display:block; width:100%; height:100%; }
.nav-box-user-delete a{ color:#b91c1c; }

/* Mobile off-canvas */
.cp_offcm01 { display:flex; align-items:center; gap:8px; }
.cp_offcm01 input { display:none; }
.navbar_toggle_icon{
  display:block; width:20px; height:2px; background:#111; margin:4px 0; border-radius:2px;
}
.overlay{
  display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.3); z-index:998;
}

/* ▼ここを右開き用に変更 */
.cp_menu{
  position:fixed; top:0; right:-280px; left:auto;           /* ← leftではなくrightを使う */
  width:260px; height:100vh; background:#fff; z-index:999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOSで慣性スクロール */
  box-shadow: -2px 0 8px rgba(0,0,0,.1);                    /* 影の向きも反転 */
  padding:70px 16px 16px;
  transition: right .25s ease;                              /* ← left → right */
}
#cp_toggle01:checked ~ .overlay{ display:block; }
/* ▼チェック時のスライドインも右側に */
#cp_toggle01:checked ~ .cp_menu{ right:0; }

@media (min-width:768px){
  .cp_offcm01{ display:none; }
}
.cp_menu_title{ font-size:12px; font-weight:700; color:#6b7280; margin:10px 0; }
.cp_menu ul{ list-style:none; margin:0; padding:0; }
.cp_menu .cp_menu_list{ padding:6px 0; font-size: 14px; }
.cp_menu .cp_menu_list a{ color:#374151; text-decoration:none; display:block; padding:8px 10px; }
.cp_menu .cp_menu_list a:hover{ background:#f3f4f6; }

/* ページ本文をヘッダー分下げる（必要なら base.css 側でも可） */
body { padding-top: 55px; }

/* messages（簡易） */
.alert[role="alert"]{ margin: 4px 10px; font-size: .8rem;}

/* ------- 共通：タグラインの基本体裁 ------- */
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo-sub{
  font-size:12px; color:#6b7280; letter-spacing:.02em;
}

/* ------- PC：メニューを右寄せ ------- */
@media (min-width: 768px){
  .nav-box{
    display:flex; align-items:center; gap:16px;
    justify-content:flex-end;          /* ★ 右寄せ */
    width:100%;
  }
  .nav-box-menu{
    display:flex; align-items:center; gap:16px;
    margin:0; padding:0; list-style:none;
    /* 右端に寄せたメニューの右にユーザーアイコンが来る構成 */
  }
  .nav-logo{ gap:10px; }               /* PCではロゴと説明は横並び */
  .nav-logo-sub{ white-space:nowrap; }
}

/* ------- スマホ：ロゴ中央寄せ＋下に説明文 ------- */
@media (max-width: 767px){
  /* ヘッダーの高さを2行分に。本文とメニューのオフセットも合わせて調整 */
  .nav-wrapper{ padding: 8px 12px; position: fixed; }

  /* ハンバーガーは右上固定 */
  .cp_offcm01{ position:absolute; right:14px; top:16px; }

  /* ロゴブロックをヘッダー中央に絶対配置し、縦積み */
  .nav-logo{
    position:absolute; left:0; right:0; top:8px;
    flex-direction:column; align-items:center; gap:4px;
    min-width:0;
  }
  .nav-logo-txt{ font-size:1.25rem; line-height:1.1; }
  .nav-logo-sub{
    display:block; font-size:11px; text-align:center;
    max-width: calc(100vw - 40px);     /* 端末幅に追従してはみ出し防止 */
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
}