/* --- 基本設定 --- */
    :root {
      --bg-color: #f8f9fa;
      --text-color: #333;
      --sidebar-width: 260px;
      --tag-talk: #eebf56;
      --tag-comm: #8ecae6;
      --tag-event: #e63946;
    }
  
    body {
      font-family: "Helvetica Neue", Arial, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      margin: 0;
      padding: 0;
      line-height: 1.6;
    }
    img{
      width: 100%;
      vertical-align: bottom;
    }
  
  
      /* PC表示設定 (900px以上) */
      @media (max-width: 899px) {
          #sp{
              display: block;
          }
          #dt{
              display: none;
          }
      }
      /* PC表示設定 (900px以上) */
      @media (min-width: 900px) {
          #sp{
              display: none;
          }
          #dt{
              display: block;
          }
      }
  
    /* --- 【重要】最強のハンバーガーボタン --- */
    .hamburger-btn {
      position: fixed; 
      top: 15px;       
      left: 20px;      
      z-index: 9999;   
      
      background: none;
      border: none;
      cursor: pointer;
      width: 20px;
      height: 24px;
      padding: 0;
      
      box-sizing: content-box; 
      padding: 5px; 
      margin: -5px; 
    }
    
    .hamburger-btn span {
      display: block;
      width: 100%;
      height: 2px;
      background-color: #333; 
      position: absolute;
      transition: 0.3s;
      left: 5px; 
    }
    .hamburger-btn span:nth-child(1) { top: 5px; }
    .hamburger-btn span:nth-child(2) { top: 16px; }
    .hamburger-btn span:nth-child(3) { bottom: 5px; }
  
    .hamburger-btn.active span:nth-child(1) { transform: rotate(45deg); top: 16px; }
    .hamburger-btn.active span:nth-child(2) { opacity: 0; }
    .hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg); bottom: 16px; }
  
  
    /* --- スマホ用ヘッダー --- */
    .mobile-header {
      padding: 15px 0;
      display: flex;
      align-items: center;
      width: 100%;
      position: fixed;
      top: 0;
      z-index: 50;
      height: 30px;
    }
  
    .mobile-logo {
      width: 150px;
      margin: 0 auto;
      display: none;
    }
  
    /* --- サイドバー --- */
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: var(--sidebar-width);
      height: 100vh;
      background-color: #fff;
      padding: 30px;
      padding-top: 80px; 
      
      box-sizing: border-box;
      overflow-y: auto;
      z-index: 100;
      transition: transform 0.3s ease;
      border-right: 1px solid #eee;
      transform: translateX(-100%);
    }
  
    .sidebar.open {
      transform: translateX(0);
      box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }
  
    .sidebar-logo { display: none; }
    .nav-list { list-style: none; padding: 0; }
    .nav-list li { margin-bottom: 10px; }
    .nav-list a { text-decoration: none; color: #666; font-size: 0.9rem; display: block; padding: 5px 0; transition: 0.2s; }
    .nav-list a:hover { color: #000; font-weight: bold; }
    .sidebar-apps { margin-top: 40px; border-top: 1px solid #eee; padding-top: 20px; }
    
    .overlay {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.5); z-index: 90;
      display: none; opacity: 0; transition: opacity 0.3s;
    }
    .overlay.visible { display: block; opacity: 1; }
  
  
    /* ログインボタン */
    .top_login_btn{ width: fit-content; font-size: 12px; font-weight: bold; position: fixed; top: 10px; right: 10px; background-color: #333; color: #e3c277; border-radius: 100px; border: none; padding: 6px 18px; z-index: 100;cursor: pointer;transition: 0.3s;}
    .top_login_btn:hover{ opacity: 0.8;}
  
  
    /* メインコンテンツ */
    .main-content { padding: 50px 20px; transition: margin-left 0.3s; }
    .hero-area { text-align: center; padding: 40px 0; max-width: 800px; margin: 0 auto; font-size: 0.8rem;}
    .top_logo{width: 250px; margin: 0 auto;}
    .card { background: #fff; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); margin-bottom: 30px; padding: 20px; position: relative; max-width: 800px; margin-left: auto; margin-right: auto; }
    .card-tag { position: absolute; top: 0; left: 0; padding: 5px 18px; color: #fff; font-weight: bold; font-size: 1.0rem; border-bottom-right-radius: 10px; }
    .tag-yellow { background-color: var(--tag-talk); }
    .tag-blue { background-color: var(--tag-comm); }
    .tag-red { background-color: var(--tag-event); }
    .card-category { position: absolute; top: 15px; right: 20px; font-weight: bold; font-size: 1.3rem; color: #bbb; text-transform: uppercase; }
    .card-body { margin-top: 25px; font-size: 0.8rem;}
    .card-image-area { width: 100%; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; color: #aaa; }
    
    /* 既存の金色のボタン */
    .btn-black { display: inline-block; background-color: #e3c277; color: #333; padding: 14px 50px; border-radius: 30px; text-decoration: none; font-weight: bold; margin-bottom: 20px; font-size: 0.9rem;}
  
  
    /* --- 追加：入会方法セクション用のスタイル --- */
    .join-section {
      max-width: 800px;
      margin: 80px auto 0;
      text-align: center;
      background-color: transparent; /* 背景色が必要なら #fff 等に変更 */
    }
    
    /* アプリストアバナー用（画像がない場合のダミーレイアウト） */
    .app-banner-area {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 40px;
    }
    .app-banner-dummy {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: bold;
      color: #666;
      font-size: 1.2rem;
    }
    .app-banner-dummy img {
      width: 30px; /* アイコンサイズ調整 */
    }
  
    .join-title {
      font-size: 2.5rem;
      font-weight: bold;
      margin-bottom: 20px;
      letter-spacing: 0.1em;
    }
  
    .join-price {
      font-size: 1.8rem;
      font-weight: bold;
      margin-bottom: 30px;
    }
  
    /* 黒背景・金文字の新しいボタン */
    .btn-join-black {
      display: inline-block;
      background-color: #000;
      color: #e3c277;
      padding: 18px 60px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: bold;
      font-size: 1.2rem;
      margin-bottom: 50px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      transition: 0.3s;
    }
    .btn-join-black:hover {
      opacity: 0.8;
      transform: translateY(-2px);
    }
  
    /* 手順リスト */
    .join-steps {
      text-align: left;
      max-width: 600px;
      margin: 0 auto 40px;
      font-size: 1.0rem;
      font-weight: bold;
      line-height: 2.0;
    }
  
    /* 注意書きリスト */
    .join-notes {
      text-align: left;
      max-width: 700px;
      margin: 0 auto;
      font-size: 0.8rem;
      line-height: 1.8;
    }
    .join-notes ul {
      list-style: none;
      padding: 0;
    }
    .join-notes li {
      position: relative;
      padding-left: 1.2em;
      margin-bottom: 0.5em;
    }
    .join-notes li::before {
      content: "●";
      position: absolute;
      left: 0;
      font-size: 0.8em;
      top: 2px;
    }
  
  
    /* PC表示設定 (900px以上) */
    @media (min-width: 900px) {
      .top_login_btn{ width: fit-content; font-size: 13px; font-weight: bold; position: fixed; top: 20px; right: 20px; border-radius: 100px; border: none; padding: 8px 20px;}
      .mobile-header { display: none; }
      .hamburger-btn { display: none; }
      .sidebar { transform: translateX(0); box-shadow: none; padding-top: 30px; }
      .sidebar-logo { display: block; margin-bottom: 20px; width: 180px; }
      .main-content { margin-left: var(--sidebar-width); padding: 40px; }
      .overlay { display: none !important; }
    }
  
  
    h1{ font-size: 2rem; }
    h2{ font-size: 2.5rem; margin-bottom: 10px;}
    h3{ font-size: 2rem; margin-bottom: 0;}
    h4{ font-size: 1.0rem; margin-top: 0;}