@charset "UTF-8";
/* main.scss */
/* ネバコレTOKYO メインスタイルシート
 *
 * コンパイル方法:
 *   sass scss/main.scss public/assets/css/style.css
 *   sass scss/main.scss public/assets/css/style.css --style=compressed
 *
 * 監視モード（開発時）:
 *   sass --watch scss/main.scss:public/assets/css/style.css
 */
/* ========================================
   0. フォント定義（最初に読み込み）
   ======================================== */
/* ========================================
   Google Fonts - Zen Maru Gothic
   ======================================== */
@import 'https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap';
/* ========================================
   カスタムフォント - GenEiLateGoN
   ======================================== */
@font-face {
  font-family: GenEiLateGoN;
  font-style: normal;
  font-weight: 400 700;
  src: url("../fonts/GenEiLateGoN_v2.woff2") format("woff2"), url("../fonts/GenEiLateGoN_v2.ttf") format("truetype");
  font-display: swap;
}
/* ========================================
   1. 設定ファイル（変数定義）
   ========================================
   Dart Sass 3.0対応: _index.scss経由で全変数を読み込み */
/* _index.scss */
/* 全ての変数・Mixinを集約して再エクスポート
 * Dart Sass 3.0対応（@use/@forward使用）
 */
/* 変数ファイルを @forward で再エクスポート */
/* _variables.scss */
/* 全体設定・変数定義 */
/* ========================================
   Spacing
   ======================================== */
/* ========================================
   Font Size
   ======================================== */
/* ========================================
   Line Height
   ======================================== */
/* ========================================
   Border Radius
   ======================================== */
/* ========================================
   Container Max Width
   ======================================== */
/* ========================================
   Font Family
   ======================================== */
/* System gothic fonts for UI elements (buttons, menus, navigation) */
/* Zen Maru Gothic for body text and descriptions */
/* ========================================
   Font Weight
   ======================================== */
/* ========================================
   Z-Index Scale
   ======================================== */
/* スキャナーオーバーレイ */
/* ========================================
   Transition
   ======================================== */
/* ========================================
   Shadow
   ======================================== */
/* ========================================
   Card Dimensions
   ======================================== */
/* モバイル（2列表示） */
/* 5:7 比率 */
/* タブレット・デスクトップ */
/* ========================================
   Header
   ======================================== */
/* ========================================
   Button
   ======================================== */
/* ========================================
   Form
   ======================================== */
/* ========================================
   Scanner
   ======================================== */
/* _colors.scss */
/* ネバコレTOKYO カラーパレット */
/* ========================================
   Base Colors（ベースカラー）
   ======================================== */
/* ベースブルー（ハンバーガーメニュー等） */
/* ========================================
   Primary Colors（メインブランドカラー）
   ======================================== */
/* メインブルー（ヘッダー、リンク） */
/* ホバー時 */
/* 明るいバージョン */
/* ========================================
   Secondary Colors（アクセントカラー）
   ======================================== */
/* アクセントレッド（CTAボタン） */
/* ホバー時 */
/* ========================================
   Tertiary Colors（第3アクセントカラー - オレンジ）
   ======================================== */
/* アクセントオレンジ */
/* ホバー時（暗め） */
/* 明るいバージョン */
/* 背景用（薄いオレンジ） */
/* ========================================
   Quaternary Colors（第4アクセントカラー - イエロー）
   ======================================== */
/* アクセントイエロー */
/* ホバー時（暗め） */
/* 明るいバージョン */
/* 背景用（薄いイエロー） */
/* イエロー上のテキスト（茶色） */
/* ========================================
   Gradient Colors（グラデーション）
   ======================================== */
/* ========================================
   Card Type Colors（カード種別カラー）
   ======================================== */
/* プロダクトカード（青） */
/* プロダクトホバー */
/* プロダクト背景 */
/* メーカーカード（緑） */
/* メーカーホバー */
/* メーカー背景 */
/* ========================================
   Neutral Colors（グレースケール）
   ======================================== */
/* ========================================
   Status Colors（状態表示）
   ======================================== */
/* ========================================
   Background Colors（背景色）
   ======================================== */
/* ========================================
   Text Colors（テキスト色）
   ======================================== */
/* ========================================
   Border Colors（ボーダー色）
   ======================================== */
/* _mediaquery.scss */
/* ブレークポイント定義とレスポンシブMixin */
/* ========================================
   Breakpoints
   ======================================== */
/* Small devices (landscape phones) */
/* Medium devices (tablets) */
/* Large devices (desktops) */
/* Extra large devices */
/* ========================================
   Responsive Mixins（モバイルファースト）
   ========================================
   使用例: @include md-up { ... } */
/* 逆方向（デスクトップファースト）- 特殊用途 */
/* ========================================
   2. コンポーネント
   ======================================== */
/* ========================================
   1. 設定ファイル（変数定義）
   ========================================
   Dart Sass 3.0対応: _index.scss経由で全変数を読み込み */
/* _modal.scss */
/* モーダルスタイル */
/* Dart Sass: use _index.scss to import all variables */
/* ========================================
   モーダル基本スタイル
   ======================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 16px;
  opacity: 0;
  -webkit-transition: visibility 0s linear 0.3s, opacity 0.3s ease;
  transition: visibility 0s linear 0.3s, opacity 0.3s ease;
}
.modal--open {
  visibility: visible;
  opacity: 1;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

/* オーバーレイ - フル透明 */
.modal__overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: transparent;
}

/* コンテナ */
.modal__container {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: #fff;
  border: solid 1px #e0e0e0;
  border-radius: 16px;
  -webkit-box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
          box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.modal--open .modal__container {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.modal__container--small {
  max-width: 320px;
}

/* 閉じるボタン */
.modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 28px;
  line-height: 1;
  color: #9e9e9e;
  cursor: pointer;
  background: none;
  border: none;
  -webkit-transition: color 0.15s ease-in-out;
  transition: color 0.15s ease-in-out;
}
.modal__close:hover {
  color: #424242;
}

/* ヘッダー */
.modal__header {
  padding: 32px 24px 16px;
  text-align: center;
}

.modal__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #1a73e8;
}

/* ボディ */
.modal__body {
  padding: 16px 24px;
  text-align: center;
}

/* フッター */
.modal__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 16px 24px 32px;
}

/* ========================================
   認証タブ
   ======================================== */
.auth-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 24px;
  border-bottom: 1px solid #eee;
}

.auth-tabs__btn {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 16px;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #757575;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  -webkit-transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.auth-tabs__btn:hover {
  color: #212121;
}
.auth-tabs__btn--active {
  color: #1a73e8;
  border-bottom-color: #1a73e8;
}

/* ========================================
   認証フォーム
   ======================================== */
.auth-form {
  display: none;
  padding: 24px;
}
.auth-form--active {
  display: block;
}

/* チェックボックス */
.form-group--checkbox label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  font-weight: 400;
  cursor: pointer;
}
.form-group--checkbox label input[type=checkbox] {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.form-group--checkbox label span {
  font-size: 14px;
  line-height: 1.4;
}
.form-group--checkbox label a {
  color: #1a73e8;
  text-decoration: underline;
}

/* ボタンローディング状態 */
.btn__loading {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.btn__loading::before {
  width: 16px;
  height: 16px;
  content: "";
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: 50%;
  -webkit-animation: spin 0.8s linear infinite;
          animation: spin 0.8s linear infinite;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* ========================================
   1. 設定ファイル（変数定義）
   ========================================
   Dart Sass 3.0対応: _index.scss経由で全変数を読み込み */
/* _layout.scss */
/* ネバコレTOKYO レイアウト - デザインモックアップ準拠 */
/* ========================================
   ボディ：フレックスレイアウトでフッターを下部に固定
   ======================================== */
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}

/* ========================================
   ページ全体のラッパー（max-width + 中央揃え）
   フッターは外に出すため、flex-growで残り領域を埋める
   ======================================== */
.page-wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  max-width: 1084px;
  margin: 0 auto;
  background-color: #fff;
}

/* ========================================
   ヘッダー（フル幅ボーダー + コンテンツmax-width）
   ======================================== */
.header {
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #bdbdbd;
  /* アカウントラッパー（ドロップダウン配置用） */
  /* アカウントアイコンボタン */
  /* メニューラッパー（ドロップダウン配置用） */
  /* ハンバーガーメニュー - PC/SPどちらも表示 */
}
.header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 1344px;
  height: 100%;
  padding: 0 8px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .header__inner {
    padding: 0 16px;
  }
}
.header__logo {
  /* height: 40px; */
  margin-bottom: 4px;
}
.header__logo img {
  width: 320px;
  height: auto;
}
@media (min-width: 768px) {
  .header__logo img {
    width: 400px;
  }
}
.header__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header__account-wrapper {
  position: relative;
}
.header__account-btn {
  display: block;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
}
.header__account-btn img {
  width: 100%;
  height: 100%;
}
.header__menu-wrapper {
  position: relative;
}
.header__menu-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 26px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
}
.header__menu-btn span {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #305AA3;
  border-radius: 2px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.header__menu-btn.is-active span:nth-child(1) {
  -webkit-transform: rotate(45deg) translate(5px, 8px);
          transform: rotate(45deg) translate(5px, 8px);
}
.header__menu-btn.is-active span:nth-child(2) {
  opacity: 0;
}
.header__menu-btn.is-active span:nth-child(3) {
  -webkit-transform: rotate(-45deg) translate(5px, -8px);
          transform: rotate(-45deg) translate(5px, -8px);
}

/* ========================================
   モバイルメニュー（ドロップダウン風）
   アカウントメニューと統一されたスタイル
   ======================================== */
.mobile-menu {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 1060;
  visibility: hidden;
  width: 220px;
  overflow: hidden;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  background-color: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 12px;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  opacity: 0;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-transition: opacity 0.2s, visibility 0.2s, -webkit-transform 0.2s;
  transition: opacity 0.2s, visibility 0.2s, -webkit-transform 0.2s;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s, -webkit-transform 0.2s;
  /* 1344px以上では、コンテンツエリア基準で配置 */
}
@media (width >= 1376px) {
  .mobile-menu {
    right: calc(50% - 672px + 16px);
  }
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.mobile-menu__nav {
  padding: 8px 0;
}
.mobile-menu__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 14px 16px;
  font-size: 16px;
  color: #212121;
  text-decoration: none;
  background-color: #f7f7f7;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.mobile-menu__link::after {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 20px;
  height: 20px;
  pointer-events: none;
  content: "";
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1L6.5 6L1.5 11' stroke='%23212121' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 6px 10px;
  border: 1px solid #212121;
  border-radius: 50%;
}
.mobile-menu__link:hover {
  background-color: rgb(239.35, 239.35, 239.35);
}
.mobile-menu__link--no-arrow::after {
  content: none;
}

/* ========================================
   アカウントメニュー（ドロップダウン）
   アカウントアイコンの右端に揃える
   サンプルデザイン準拠：#f7f7f7背景、ボタン形状ログイン
   ======================================== */
.account-menu {
  position: fixed;
  top: 70px;
  right: 60px;
  z-index: 1060;
  visibility: hidden;
  width: 220px;
  overflow: hidden;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  background-color: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 12px;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  opacity: 0;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-transition: opacity 0.2s, visibility 0.2s, -webkit-transform 0.2s;
  transition: opacity 0.2s, visibility 0.2s, -webkit-transform 0.2s;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s, -webkit-transform 0.2s;
  /* 1344px以上では、コンテンツエリア基準で配置 */
  /* ライトブルーヘッダー */
  /* ログインボタン（角丸ボタン形状） */
  /* ログイン中ヘッダー */
  /* カード収集数 */
}
@media (width >= 1376px) {
  .account-menu {
    right: calc(50% - 672px + 60px);
  }
}
.account-menu.is-open {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.account-menu__header {
  padding: 16px;
  background-color: #eee;
  border-bottom: 1px solid rgb(176.25, 176.25, 176.25);
}
.account-menu__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #212121;
}
.account-menu__subtitle {
  margin-top: 2px;
  font-size: 12px;
}
.account-menu__nav {
  padding: 12px;
}
.account-menu__link {
  display: block;
  padding: 12px 16px;
  margin-bottom: 8px;
  font-size: 16px;
  color: #212121;
  text-align: center;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  -webkit-transition: background-color 0.2s, border-color 0.2s;
  transition: background-color 0.2s, border-color 0.2s;
  /* ログアウトリンク */
}
.account-menu__link:last-child {
  margin-bottom: 0;
}
.account-menu__link:hover {
  background-color: #f5f5f5;
  border-color: #bdbdbd;
}
.account-menu__link--highlight {
  font-weight: 500;
  color: #fff;
  background-color: #e53935;
  border-color: #e53935;
}
.account-menu__link--highlight:hover {
  color: #fff;
  background-color: rgb(213.6947368421, 31.7368421053, 27.5052631579);
  border-color: rgb(213.6947368421, 31.7368421053, 27.5052631579);
}
.account-menu__link--logout {
  color: #757575;
  background-color: #f5f5f5;
  border-color: #e0e0e0;
}
.account-menu__link--logout:hover {
  color: #212121;
  background-color: #eee;
}
.account-menu__header--logged-in {
  text-align: center;
}
.account-menu__username {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #212121;
}
.account-menu__stats {
  padding: 12px 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.account-menu__stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px 0;
  text-decoration: none;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.account-menu__stat:first-child {
  border-bottom: 1px solid #eee;
}
.account-menu__stat:hover {
  background-color: #fafafa;
}
.account-menu__stat-label {
  font-size: 13px;
  color: #757575;
}
.account-menu__stat-value {
  font-size: 16px;
  font-weight: 700;
  color: #1a73e8;
}

/* オーバーレイは使用しない（クリック外し検知はJSで実装） */
.account-overlay,
.menu-overlay {
  display: none;
}

/* ========================================
   メインコンテンツエリア
   ======================================== */
.main {
  min-height: calc(100vh - 60px);
  padding-top: 20px;
  padding-bottom: 40px;
}

.container {
  width: 100%;
  max-width: 480px;
  padding: 0 16px;
  margin: 0 auto;
}

/* ========================================
   ヒーローセクション（TOPページ用）
   ======================================== */
.hero {
  padding: 24px 16px;
  text-align: center;
}

/* ========================================
   カードタイプボタン
   ======================================== */
.card-type-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #212121;
  text-align: center;
  text-decoration: none;
  background-color: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.card-type-btn:hover {
  color: #1a73e8;
  border-color: #1a73e8;
}
.card-type-btn--product:hover {
  color: #1a73e8;
  border-color: #1a73e8;
}
.card-type-btn--maker:hover {
  color: #43a047;
  border-color: #43a047;
}

/* ========================================
   CTAボタン（参加登録）
   ======================================== */
.cta-button {
  display: block;
  width: calc(100% - 32px);
  max-width: 380px;
  padding: 16px 32px;
  margin: 24px auto;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #e53935;
  border: none;
  border-radius: 50px;
  -webkit-transition: background-color 0.2s, -webkit-transform 0.2s;
  transition: background-color 0.2s, -webkit-transform 0.2s;
  transition: background-color 0.2s, transform 0.2s;
  transition: background-color 0.2s, transform 0.2s, -webkit-transform 0.2s;
}
.cta-button:hover {
  color: #fff;
  background-color: #c62828;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

/* ========================================
   説明テキストエリア
   ======================================== */
.description {
  /* padding: 0 16px; */
  margin: 0 auto 32px;
}
.description--center {
  text-align: center;
}
.description__title {
  color: #212121;
}
.description__text {
  font-size: 16px;
  line-height: 1.8;
  color: #212121;
}
@media (min-width: 768px) {
  .description__text {
    font-size: 18px;
  }
}

/* ========================================
   スキャンボタン（アルバムページ用）
   ======================================== */
.scan-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: calc(100% - 32px);
  max-width: 320px;
  padding: 8px 16px;
  margin: 16px auto;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 50px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
@media (min-width: 768px) {
  .scan-button {
    max-width: 360px;
    padding: 14px 24px;
    margin: 20px auto;
    font-size: 24px;
  }
}
.scan-button__title-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.scan-button__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 32px;
  height: 32px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.scan-button__title {
  font-size: 20px;
  font-weight: 700;
}
@media (min-width: 768px) {
  .scan-button__title {
    font-size: 24px;
  }
}
.scan-button--product {
  background-color: #1a73e8;
}
.scan-button--product:hover {
  color: #fff;
  background-color: #1557b0;
}
.scan-button--maker {
  background-color: #43a047;
}
.scan-button--maker:hover {
  color: #fff;
  background-color: #2e7d32;
}
.scan-button__subtitle {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: normal;
  opacity: 0.9;
}
@media (min-width: 768px) {
  .scan-button__subtitle {
    font-size: 12px;
  }
}
.scan-button--disabled, .scan-button--maintenance {
  cursor: not-allowed;
}
.scan-button--disabled.scan-button--product:hover, .scan-button--maintenance.scan-button--product:hover {
  background-color: #1a73e8;
}
.scan-button--disabled.scan-button--maker:hover, .scan-button--maintenance.scan-button--maker:hover {
  background-color: #43a047;
}

/* ========================================
   カードグリッド（アルバム用）
   48px gap常時、max-width 800px
   ======================================== */
.album-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 800px;
  padding: 12px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .album-grid {
    gap: 48px;
    padding: 24px 16px;
  }
}

/* ========================================
   コンプリート申請セクション（アルバムページ用）
   ======================================== */
.complete-register {
  max-width: 800px;
  padding: 12px 12px 48px;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 768px) {
  .complete-register {
    padding: 32px 16px 48px;
  }
}
.complete-register__header {
  margin-bottom: 24px;
}
.complete-register__title {
  /* h2 基本スタイルを継承 */
}
.complete-register__content {
  max-width: 400px;
  margin: 0 auto;
}
.complete-register__text {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.8;
  color: #212121;
}
.complete-register__btn {
  display: inline-block;
  width: 100%;
  max-width: 280px;
  padding: 16px 32px;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.complete-register__btn--product {
  background-color: #1a73e8;
}
.complete-register__btn--product:hover {
  color: #fff;
  background-color: #1557b0;
}
.complete-register__btn--maker {
  background-color: #43a047;
}
.complete-register__btn--maker:hover {
  color: #fff;
  background-color: #2e7d32;
}

/* ========================================
   カードスロット（アルバムページ用）
   会社名ヘッダー + カードアイテム
   ======================================== */
.card-slot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* 会社ヘッダー（ロゴ + 名前）- 横並び中央揃え */
  /* stylelint-disable-next-line declaration-no-important */
}
.card-slot__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 4px 12px;
}
.card-slot__logo {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 32px;
  height: 32px;
  line-height: 1;
  /* ロゴがない場合のプレースホルダー - 黄色ベース */
}
.card-slot__logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.card-slot__logo--placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Zen Maru Gothic", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #212121;
  background-color: #fca728;
  border-radius: 6px;
}
.card-slot__name {
  font-family: GenEiLateGoN, "Zen Maru Gothic", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #212121;
}
@media (min-width: 768px) {
  .card-slot__name {
    font-size: 24px;
  }
}

/* ========================================
   カードアイテム（フォトフレーム枠）
   sample_frame.png準拠デザイン
   構造: .card-item > .card-item__frame-wrap > .card-item__content
   ======================================== */
/* 白枠の幅 */
.card-item {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
  transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
  /* 収集済みカード（リンク）のホバー効果 */
  /* 白枠フレーム（角張り + ボーダー + シャドウ） */
  /* 内側のカード（収集済み用） */
  /* カード内容（背景・画像層） */
  /* __card内のcontentは絶対配置（frameがサイズを決定） */
  /* ロゴの下から始まり、12px内側マージン */
  /* カードフレーム（base_frame.svg - サイズを決定する要素） */
  /* カードロゴ（左上 - ネバコレTOKYO） */
  /* タイプラベル（右上 - プロダクト/メーカー） */
  /* フリップボタン（カード裏表切り替え） */
  /* ロック状態（未取得）- オレンジの？マーク、ホバー効果なし */
  /* ブランク画像付きの未取得カード - 取得済みと同じサイズ */
  /* スキャンリンク付きブランクカード - ホバー効果 */
  /* 収集済み状態 */
  /* コンプリート状態 */
}
.card-item--collected:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.card-item--collected:hover .card-item__frame-wrap {
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.card-item__frame-wrap {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #eee;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
  .card-item__frame-wrap {
    padding: 12px;
  }
}
.card-item__card {
  position: relative;
  overflow: hidden;
  background-color: #eee;
  border-radius: 16px;
}
.card-item__content {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  aspect-ratio: 716/998;
  overflow: hidden;
  background-color: #eee;
}
.card-item__card .card-item__content {
  position: absolute;
  top: 12%;
  right: 12px;
  bottom: 18px;
  left: 12px;
  width: auto;
  height: auto;
  aspect-ratio: auto;
}
.card-item__image {
  display: block;
  width: 100%;
  height: auto;
}
.card-item__frame {
  position: relative;
  z-index: 2;
  width: 100%;
  pointer-events: none;
}
.card-item__frame img {
  display: block;
  width: 100%;
  height: auto;
}
.card-item__logo {
  position: absolute;
  top: 3%;
  left: 7.5%;
  z-index: 3;
  width: 50%;
  pointer-events: none;
}
.card-item__logo img {
  width: 100%;
  height: auto;
}
.card-item__type {
  position: absolute;
  top: -1.25%;
  right: 4%;
  z-index: 3;
  pointer-events: none;
}
@media (min-width: 768px) {
  .card-item__type {
    top: 0.55%;
    right: 8%;
  }
}
.card-item__type-text {
  font-family: GenEiLateGoN, "Zen Maru Gothic", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
@media (min-width: 768px) {
  .card-item__type-text {
    font-size: 16px;
  }
}
.card-item__flip-btn {
  position: absolute;
  top: 5.5%;
  right: 6%;
  z-index: 4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: none;
}
.card-item__flip-btn img {
  width: 48px;
  height: 48px;
}
.card-item__flip-btn:hover {
  opacity: 0.7;
}
.card-item--locked {
  cursor: default;
}
.card-item--locked .card-item__content {
  background-color: #eee;
}
.card-item--locked .card-item__lock-icon {
  font-family: "Zen Maru Gothic", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: #fca728;
}
.card-item--locked:has(.card-item__image--blank) {
  /* ブランク画像を中央配置、75%幅 */
}
.card-item--locked:has(.card-item__image--blank) .card-item__frame-wrap {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.card-item--locked:has(.card-item__image--blank) .card-item__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #fff;
  opacity: 0.65;
}
.card-item--locked:has(.card-item__image--blank) .card-item__image--blank {
  width: 75%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.card-item--blank-scannable {
  cursor: pointer;
}
.card-item--blank-scannable:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.card-item--blank-scannable:hover .card-item__frame-wrap {
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.card-item--blank-scannable:hover .card-item__content {
  opacity: 1;
}
.card-item--collected .card-item__content {
  background-color: #f5f5f5;
}
.card-item--complete .card-item__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.card-item--complete .card-item__complete-text {
  font-size: 18px;
  font-weight: 700;
  color: #212121;
}

/* ========================================
   カード詳細ページ
   ======================================== */
.card-detail {
  max-width: 600px;
  padding: 0 12px 12px;
  margin: 0 auto;
  /* フリップカードコンテナ */
  /* 詳細ページ用カード */
  /* カード画像（フレームなしでシンプル表示） */
  /* ヘッダー（ラベルとフリップボタン） */
  /* メタ情報セクション（所在地・サイト・コード） */
}
@media (min-width: 768px) {
  .card-detail {
    padding: 16px;
  }
}
.card-detail__back {
  margin: 0 0 12px;
}
.card-detail__back-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 14px;
  color: #212121;
  text-decoration: none;
}
.card-detail__back-link:hover .card-detail__back-icon {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.card-detail__back-icon {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #ffd54f;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.card-detail__back-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  content: "";
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  -webkit-transform: translate(-35%, -50%) rotate(-45deg);
          transform: translate(-35%, -50%) rotate(-45deg);
}
.card-detail__back-text {
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-weight: 500;
}
.card-detail__flip-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 16px;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.card-detail__flipper {
  position: relative;
  width: 100%;
  max-width: 320px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
}
.card-detail__flipper.is-flipped {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.card-detail__flip-front, .card-detail__flip-back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.card-detail__flip-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.card-detail__card {
  position: relative;
  overflow: hidden;
  background-color: #eee;
  border-radius: 16px;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.card-detail__card-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.card-detail__flip-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: 320px;
  height: 48px;
  margin: 0 auto 4px;
}
.card-detail__side-label {
  margin: 0;
  font-size: 14px;
  color: #757575;
}
.card-detail__flip-btn {
  position: absolute;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: none;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
  transition: opacity 0.2s, -webkit-transform 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s;
}
.card-detail__flip-btn:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.card-detail__flip-btn:active {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.card-detail__flip-btn img {
  width: 100%;
  height: 100%;
}
.card-detail__info {
  text-align: center;
}
.card-detail__logo {
  max-width: 150px;
  margin: 0 auto 8px;
}
.card-detail__logo img {
  width: 100%;
  max-width: 300px;
  height: auto;
}
.card-detail__title-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 0 4px;
}
.card-detail__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #212121;
}
.card-detail__link-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 24px;
  height: 24px;
}
.card-detail__link-icon img {
  width: 100%;
  height: 100%;
}
.card-detail__link-icon--disabled {
  cursor: default;
  opacity: 0.5;
}
.card-detail__maker {
  margin: 0 0 8px;
  font-size: 16px;
  color: #757575;
}
.card-detail__location {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 0 16px;
  font-size: 16px;
  color: #757575;
}
.card-detail__location-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #757575;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}
.card-detail__location-link:hover {
  color: #1a73e8;
}
.card-detail__location-icon {
  width: 20px;
  height: 20px;
}
.card-detail__location-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #757575;
}
.card-detail__founded {
  margin: 0 0 16px;
  font-size: 14px;
  color: #757575;
}
.card-detail__specs {
  max-width: 400px;
  margin: 0 auto 24px;
  text-align: left;
}
.card-detail__spec {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.card-detail__spec dt {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100px;
          flex: 0 0 100px;
  font-weight: 500;
  color: #757575;
}
.card-detail__spec dd {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0;
  color: #212121;
}
.card-detail__description {
  max-width: 500px;
  padding: 16px;
  margin: 0 auto 24px;
  text-align: left;
  background-color: #fafafa;
  border-radius: 8px;
}
.card-detail__description p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #212121;
}
.card-detail__code {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 16px;
  background-color: #f5f5f5;
  border-radius: 8px;
}
.card-detail__code-label {
  font-size: 14px;
  color: #757575;
}
.card-detail__code code {
  padding: 4px 8px;
  font-family: monospace;
  font-size: 14px;
  background-color: #fff;
  border-radius: 4px;
}
.card-detail__meta {
  padding: 16px;
  text-align: left;
  background-color: #f5f5f5;
  border-radius: 8px;
}
.card-detail__meta-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 4px 0;
}
.card-detail__meta-row:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.card-detail__meta-row code {
  padding: 2px 4px;
  font-family: monospace;
  font-size: 14px;
  background-color: #fff;
  border-radius: 4px;
}
.card-detail__meta-label {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 70px;
  font-size: 14px;
  font-weight: 500;
  color: #757575;
}
.card-detail__meta-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 24px;
  height: 24px;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.card-detail__meta-icon img {
  width: 100%;
  height: 100%;
}
.card-detail__meta-icon:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.card-detail__meta-link {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  color: #1a73e8;
  word-break: break-all;
  text-decoration: none;
}
.card-detail__meta-link:hover {
  color: #1557b0;
  text-decoration: underline;
}

/* カード詳細ページ用の大きいカード表示 */
.card-item--detail .card-item__frame-wrap {
  width: 180px;
}

/* ========================================
   コンプリート申請フォーム
   ======================================== */
.complete-form {
  max-width: 500px;
  padding: 24px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 16px;
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.complete-form--success {
  padding: 48px;
  text-align: center;
}
.complete-form__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  font-size: 40px;
  color: #fff;
  background-color: #4caf50;
  border-radius: 50%;
}
.complete-form__header {
  margin-bottom: 32px;
  text-align: center;
}
.complete-form__title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  color: #212121;
}
.complete-form__title-type {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
}
.complete-form__title-type--product {
  color: #1a73e8;
}
.complete-form__title-type--maker {
  color: #e53935;
}
.complete-form__subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #757575;
}
.complete-form__message {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.8;
  color: #212121;
}
.complete-form__form .form-group {
  margin-bottom: 16px;
}
.complete-form__form .form-label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #212121;
}
.complete-form__form .form-control {
  width: 100%;
  padding: 8px 16px;
  font-size: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  -webkit-transition: border-color 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out;
}
.complete-form__form .form-control:focus {
  outline: none;
  border-color: #1a73e8;
}
.complete-form__form textarea.form-control {
  resize: vertical;
}
.complete-form__form .form-hint {
  margin-top: 4px;
  font-size: 12px;
  color: #757575;
}
.complete-form__form .required {
  color: #f44336;
}
.complete-form__note {
  padding: 16px;
  margin: 24px 0;
  font-size: 12px;
  color: #757575;
  background-color: #fafafa;
  border-radius: 8px;
}
.complete-form__note p {
  margin: 0 0 4px;
}
.complete-form__note p:last-child {
  margin-bottom: 0;
}
.complete-form__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}

/* ボタン色のバリエーション */
.btn--product {
  background-color: #1a73e8;
}
.btn--product:hover {
  background-color: rgb(18.8928571429, 92, 188.1071428571);
}

.btn--maker {
  background-color: #e53935;
}
.btn--maker:hover {
  background-color: rgb(204.6578947368, 30.3947368421, 26.3421052632);
}

/* ========================================
   セクション（ネバコレとは ページ用）
   ======================================== */
.section {
  padding: 12px 12px 32px;
}
@media (min-width: 768px) {
  .section {
    padding: 16px 16px 32px;
  }
}
.section__header-image {
  width: 100%;
  max-width: 300px;
  margin: 0 auto 24px;
}
.section__header-image img {
  width: 100%;
  height: auto;
}
.section__title {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
  color: #212121;
}
.section__text {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.8;
  color: #212121;
}

/* 東京の納豆メーカーセクション */
.makers-section {
  padding: 32px 16px;
  background-color: #fafafa;
}
.makers-section__title {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #1a73e8;
}
.makers-section__icon {
  float: right;
  width: 80px;
  height: auto;
  margin-left: 16px;
}
.makers-section__map {
  width: 100%;
  max-width: 300px;
  margin: 24px auto;
}
.makers-section__map img {
  width: 100%;
  height: auto;
}
.makers-section__table {
  width: 100%;
  margin-top: 24px;
  font-size: 16px;
  border-collapse: collapse;
}
.makers-section__table th {
  padding: 10px 12px;
  font-weight: 500;
  color: #fff;
  text-align: left;
  background-color: #1a73e8;
}
.makers-section__table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
}
.makers-section__table tr:nth-child(even) {
  background-color: #fafafa;
}
.makers-section__table .makers-section__number {
  width: 30px;
  font-weight: 700;
  color: #1a73e8;
  text-align: center;
}

/* ========================================
   フッター（フル幅背景 + 中央揃えコンテンツ）
   ヘッダーと同様の構造：背景はフル幅、コンテンツは1344px以内
   ======================================== */
.footer {
  margin-top: 40px;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  background-color: #f5f5f5;
}
.footer__inner {
  max-width: 1344px;
  padding: 24px 16px;
  margin: 0 auto;
  text-align: center;
}
.footer__logo {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #212121;
}
.footer__copyright {
  font-size: 11px;
  color: #757575;
}

/* ========================================
   カードの集め方セクション（HOW TO）
   ======================================== */
.howto {
  text-align: center;
}
.howto__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 24px;
}
.howto__title {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  text-align: left;
}
.howto__image {
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
  width: auto;
  min-width: 25%;
  max-width: 120px;
  height: auto;
}
.howto__content {
  text-align: left;
}
.howto__item {
  margin-bottom: 24px;
}
.howto__item h3 {
  margin-bottom: 8px;
}
.howto__item p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #212121;
}
@media (min-width: 768px) {
  .howto__item p {
    font-size: 18px;
  }
}
.howto__item a:not(.about_btn) {
  color: #1a73e8;
  text-decoration: underline;
}
.howto__item a:not(.about_btn):hover {
  text-decoration: none;
}
.howto__methods {
  margin-top: 16px;
}
.howto__method {
  margin-bottom: 32px;
}
.howto__method:last-child {
  margin-bottom: 0;
}
.howto__method h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #212121;
}
@media (min-width: 768px) {
  .howto__method h4 {
    font-size: 18px;
  }
}
.howto__method p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #212121;
}
@media (min-width: 768px) {
  .howto__method p {
    font-size: 18px;
  }
}
.howto__method-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.howto__method-content p {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.howto__method-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 120px;
  height: auto;
  margin-right: 10px;
  border-radius: 4px;
}
.howto__note {
  margin-top: 32px;
  font-size: 14px;
  color: #757575;
  text-align: center;
}

/* ========================================
   Back to Top ボタン
   ======================================== */
.back-to-top {
  position: fixed;
  right: 50%;
  bottom: 14px;
  z-index: 1030;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 60px;
  height: 60px;
  text-decoration: none;
  background-color: #fca728;
  border-radius: 50%;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
  -webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.2s;
  transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.2s;
  transition: opacity 0.3s, visibility 0.3s, transform 0.2s;
  transition: opacity 0.3s, visibility 0.3s, transform 0.2s, -webkit-transform 0.2s;
}
.back-to-top:hover {
  -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  -webkit-transform: translateX(50%) translateY(-4px);
          transform: translateX(50%) translateY(-4px);
}
.back-to-top.is-visible {
  visibility: visible;
  opacity: 1;
}
.back-to-top__icon {
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1;
  color: #212121;
}
.back-to-top__text {
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #212121;
}

/* ========================================
   ネバコレとは セクション（About）
   ======================================== */
.about__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 24px;
}
.about__image {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: auto;
  height: 80px;
}
.about__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
}
.about__content p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.8;
  color: #212121;
}
@media (min-width: 768px) {
  .about__content p {
    font-size: 18px;
  }
}
.about__content p:last-child {
  margin-bottom: 0;
}

/* ========================================
   東京の納豆メーカー セクション（Makers）
   ======================================== */
.makers__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 24px;
}
.makers__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  white-space: nowrap;
}
.makers__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: auto;
  height: 80px;
}
.makers__map {
  margin-bottom: 24px;
  text-align: center;
}
.makers__map img {
  max-width: 100%;
  height: auto;
}
.makers__table {
  width: 100%;
  overflow: hidden;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 14px;
  border-spacing: 0;
  border-collapse: separate;
  border-radius: 12px;
  /* Compact variant for index page */
}
@media (min-width: 768px) {
  .makers__table {
    font-size: 16px;
  }
}
.makers__table thead th {
  padding: 12px 14px;
  font-weight: 700;
  color: #5d4037;
  text-align: left;
  background-color: #ffd54f;
}
.makers__table thead th:first-child {
  width: 36px;
  text-align: center;
  border-top-left-radius: 12px;
}
.makers__table thead th:last-child {
  border-top-right-radius: 12px;
}
.makers__table tbody td {
  padding: 12px 14px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.makers__table tbody tr:nth-child(even) td {
  background-color: #fffde7;
}
.makers__table tbody tr:last-child td {
  border-bottom: none;
}
.makers__table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}
.makers__table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}
.makers__table--compact {
  max-width: 100%;
  margin: 24px auto;
  font-size: 13px;
  border: 1px solid #eee;
}
@media (min-width: 768px) {
  .makers__table--compact {
    max-width: 60%;
    margin: 32px auto;
    font-size: 14px;
  }
}
.makers__table--compact thead th {
  padding: 8px 10px;
}
.makers__table--compact tbody td {
  padding: 8px 10px;
}
.makers__number {
  font-weight: 700;
  color: #212121;
  text-align: center;
}
.makers__name-cell, .makers__location-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.makers__link-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
}
.makers__link-icon img {
  width: 100%;
  height: 100%;
}
.makers__link-icon--disabled {
  opacity: 0.4;
}
.makers__map-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
}
.makers__map-icon img {
  width: 100%;
  height: 100%;
}
.makers__map-icon--disabled {
  opacity: 0.4;
}

/* ========================================
   利用規約・プライバシーポリシー セクション（Terms）
   ======================================== */
.terms__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 24px;
}
.terms__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
}
.terms__item {
  margin-bottom: 24px;
}
.terms__item:last-child {
  margin-bottom: 0;
}
.terms__item h3 {
  margin-bottom: 12px;
}
.terms__item p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.8;
  color: #212121;
}
@media (min-width: 768px) {
  .terms__item p {
    font-size: 18px;
  }
}
.terms__item p:last-child {
  margin-bottom: 0;
}
.terms__item ul {
  padding-left: 24px;
  margin: 0;
}
.terms__item ul li {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.7;
  color: #212121;
}
@media (min-width: 768px) {
  .terms__item ul li {
    font-size: 18px;
  }
}
.terms__item ul li:last-child {
  margin-bottom: 0;
}

/* ========================================
   認証ページ（ログイン・新規登録）
   ======================================== */
.auth {
  max-width: 600px;
  padding: 0 16px;
  margin: 0 auto;
  /* Alert inside auth form */
  /* Subtitle for form pages */
  /* Note text */
  /* Radio button group for type selection */
  /* Selected type badge (when only one type available) */
  /* Success state */
}
.auth__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 24px;
}
.auth__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
}
.auth__intro {
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.7;
  color: #757575;
  text-align: center;
}
@media (min-width: 768px) {
  .auth__intro {
    font-size: 15px;
  }
}
.auth__form {
  /* width controlled by parent .auth */
}
.auth__form-group {
  margin-bottom: 20px;
}
.auth__form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #212121;
}
.auth__form-group input[type=text],
.auth__form-group input[type=email],
.auth__form-group input[type=password],
.auth__form-group input[type=tel] {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
  color: #212121;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.auth__form-group input[type=text]:focus,
.auth__form-group input[type=email]:focus,
.auth__form-group input[type=password]:focus,
.auth__form-group input[type=tel]:focus {
  outline: none;
  background-color: #fff;
  border-color: #1a73e8;
  -webkit-box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
          box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}
.auth__form-group input[type=text]::-webkit-input-placeholder, .auth__form-group input[type=email]::-webkit-input-placeholder, .auth__form-group input[type=password]::-webkit-input-placeholder, .auth__form-group input[type=tel]::-webkit-input-placeholder {
  color: #bdbdbd;
}
.auth__form-group input[type=text]::-moz-placeholder, .auth__form-group input[type=email]::-moz-placeholder, .auth__form-group input[type=password]::-moz-placeholder, .auth__form-group input[type=tel]::-moz-placeholder {
  color: #bdbdbd;
}
.auth__form-group input[type=text]:-ms-input-placeholder, .auth__form-group input[type=email]:-ms-input-placeholder, .auth__form-group input[type=password]:-ms-input-placeholder, .auth__form-group input[type=tel]:-ms-input-placeholder {
  color: #bdbdbd;
}
.auth__form-group input[type=text]::-ms-input-placeholder, .auth__form-group input[type=email]::-ms-input-placeholder, .auth__form-group input[type=password]::-ms-input-placeholder, .auth__form-group input[type=tel]::-ms-input-placeholder {
  color: #bdbdbd;
}
.auth__form-group input[type=text]::placeholder,
.auth__form-group input[type=email]::placeholder,
.auth__form-group input[type=password]::placeholder,
.auth__form-group input[type=tel]::placeholder {
  color: #bdbdbd;
}
.auth__form-group textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  color: #212121;
  resize: vertical;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.auth__form-group textarea:focus {
  outline: none;
  background-color: #fff;
  border-color: #1a73e8;
  -webkit-box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
          box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}
.auth__form-group textarea::-webkit-input-placeholder {
  color: #bdbdbd;
}
.auth__form-group textarea::-moz-placeholder {
  color: #bdbdbd;
}
.auth__form-group textarea:-ms-input-placeholder {
  color: #bdbdbd;
}
.auth__form-group textarea::-ms-input-placeholder {
  color: #bdbdbd;
}
.auth__form-group textarea::placeholder {
  color: #bdbdbd;
}
.auth__hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #757575;
}
.auth__status {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
}
.auth__status:empty {
  display: none;
}
.auth__status--checking {
  color: #757575;
}
.auth__status--success {
  color: #4caf50;
}
.auth__status--error {
  color: #f44336;
}
.auth__options {
  margin-bottom: 24px;
  text-align: center;
}
.auth__checkbox label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
  color: #212121;
  cursor: pointer;
}
.auth__checkbox label input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: #1a73e8;
  cursor: pointer;
}
.auth__agreement {
  margin-bottom: 24px;
  text-align: center;
}
.auth__agreement-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #212121;
}
.auth__agreement-text a {
  color: #fca728;
  text-decoration: underline;
}
.auth__agreement-text a:hover {
  text-decoration: none;
}
.auth__actions {
  margin-bottom: 24px;
}
.auth__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 24px;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.auth__button--primary {
  color: #fff;
  background-color: #212121;
  border: none;
}
.auth__button--primary:hover {
  background-color: #424242;
}
.auth__button--outline {
  color: #212121;
  background-color: #fff;
  border: 1px solid #e0e0e0;
}
.auth__button--outline:hover {
  background-color: #fafafa;
  border-color: #bdbdbd;
}
.auth__button-arrow {
  margin-left: 8px;
  font-size: 20px;
}
.auth__divider {
  position: relative;
  margin: 24px 0;
  text-align: center;
}
.auth__divider::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background-color: #e0e0e0;
}
.auth__divider span {
  position: relative;
  padding: 0 16px;
  font-size: 13px;
  color: #757575;
  background-color: #fff;
}
.auth__alt-action {
  text-align: center;
}
.auth__footer {
  padding-top: 16px;
  margin-top: 24px;
  text-align: center;
  border-top: 1px solid #e0e0e0;
}
.auth__footer p {
  margin: 0;
  font-size: 14px;
  color: #757575;
}
.auth__footer a {
  color: #fca728;
  text-decoration: underline;
}
.auth__footer a:hover {
  text-decoration: none;
}
.auth .alert {
  margin-bottom: 20px;
}
.auth__subtitle {
  margin: -16px 0 24px;
  font-size: 14px;
  line-height: 1.7;
  color: #757575;
}
.auth__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #757575;
}
.auth__radio-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}
.auth__radio {
  position: relative;
  display: block;
  cursor: pointer;
}
.auth__radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.auth__radio input[type=radio]:checked + .auth__radio-label {
  background-color: rgba(26, 115, 232, 0.05);
  border-color: #1a73e8;
}
.auth__radio input[type=radio]:checked + .auth__radio-label::before {
  background-color: #1a73e8;
  border-color: #1a73e8;
}
.auth__radio input[type=radio]:checked + .auth__radio-label::after {
  opacity: 1;
}
.auth__radio input[type=radio]:focus + .auth__radio-label {
  -webkit-box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
          box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}
.auth__radio--debug .auth__radio-label {
  border-style: dashed;
  opacity: 0.7;
}
.auth__radio-label {
  position: relative;
  display: block;
  padding: 16px 16px 16px 48px;
  background-color: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.auth__radio-label::before {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 20px;
  height: 20px;
  content: "";
  background-color: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.auth__radio-label::after {
  position: absolute;
  top: 50%;
  left: 22px;
  width: 8px;
  height: 8px;
  content: "";
  background-color: #fff;
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out;
}
.auth__radio-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #212121;
}
.auth__radio-desc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: #757575;
}
.auth__radio-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
}
.auth__radio-badge--applied {
  color: #fff;
  background-color: #4caf50;
}
.auth__radio-badge--debug {
  color: #ff9800;
  background-color: rgba(255, 152, 0, 0.1);
  border: 1px solid #ff9800;
}
.auth__selected-type {
  margin-bottom: 20px;
  text-align: center;
}
.auth__selected-type-badge {
  display: inline-block;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  border-radius: 20px;
}
.auth__selected-type-badge--product {
  background-color: #1a73e8;
}
.auth__selected-type-badge--maker {
  background-color: #43a047;
}
.auth--success {
  padding: 48px 16px;
  text-align: center;
}
.auth__success-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  font-size: 36px;
  color: #fff;
  background-color: #4caf50;
  border-radius: 50%;
}
.auth__message {
  margin-bottom: 32px;
  font-size: 15px;
  line-height: 1.8;
  color: #757575;
}

/* ========================================
   スキャンページ
   ======================================== */
.scanner-page {
  max-width: 600px;
  padding: 0 12px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .scanner-page {
    padding: 0 16px;
  }
}
.scanner-page__header {
  padding: 24px 0;
  text-align: center;
}
.scanner-page__title {
  /* h2 base styles are inherited from main.scss */
  margin-bottom: 8px;
}
.scanner-page__subtitle {
  margin: 0;
  font-size: 14px;
  color: #757575;
}
.scanner-page__back {
  margin: 0 0 12px;
}
.scanner-page__back-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 14px;
  color: #212121;
  text-decoration: none;
}
.scanner-page__back-btn:hover .scanner-page__back-btn-icon {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.scanner-page__back-btn-icon {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #ffd54f;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.scanner-page__back-btn-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  content: "";
  border-top: 3px solid #000;
  border-left: 3px solid #000;
  -webkit-transform: translate(-35%, -50%) rotate(-45deg);
          transform: translate(-35%, -50%) rotate(-45deg);
}
.scanner-page__back-btn-text {
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-weight: 500;
  line-height: 1;
}
.scanner-page__auto-result {
  max-width: 400px;
  padding: 24px;
  margin: 0 auto;
}

/* スキャナーエリア */
.scanner-area {
  position: relative;
  max-width: 400px;
  margin: 0 auto 24px;
  overflow: hidden;
  background-color: #212121;
  border-radius: 16px;
}
.scanner-area__camera {
  position: relative;
  width: 100%;
  min-height: 300px;
  /* html5-qrcode のビデオ要素 */
  /* html5-qrcode ライブラリのデフォルトUIを非表示 */
}
.scanner-area__camera video {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.scanner-area__camera #html5-qrcode-button-camera-permission,
.scanner-area__camera #html5-qrcode-anchor-scan-type-change,
.scanner-area__camera [id^=html5-qrcode-button],
.scanner-area__camera #qr-shaded-region {
  display: none !important;
}
.scanner-area__loading {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 300px;
  color: #fff;
  background-color: #212121;
}
.scanner-area__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}
.scanner-area__guide {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.scanner-area__frame {
  width: 250px;
  height: 250px;
  border: 3px solid #fca728;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}
.scanner-area__error {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 300px;
  padding: 32px;
  text-align: center;
  background-color: #f5f5f5;
  border: 1px solid #757575;
  border-radius: 16px;
}
.scanner-area__error-icon {
  font-size: 48px;
}
.scanner-area__error-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #212121;
}
.scanner-area__error-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #757575;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* スキャン結果 */
.scan-result {
  padding: 32px;
  text-align: center;
}
.scan-result__icon {
  margin-bottom: 16px;
  font-size: 64px;
}
.scan-result__icon--error {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  background-color: #eee;
  border-radius: 50%;
}
.scan-result__icon-x {
  font-family: Arial, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: #f44336;
}
.scan-result__title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  color: #212121;
}
.scan-result__message {
  margin: 0 0 24px;
  font-size: 16px;
  color: #757575;
}
.scan-result__card {
  padding: 16px;
  margin-bottom: 24px;
  background-color: #fafafa;
  border-radius: 8px;
}
.scan-result__card-name {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: #212121;
}
.scan-result__card-maker {
  margin: 0;
  font-size: 14px;
  color: #757575;
}
.scan-result__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
.scan-result__completion {
  padding: 16px;
  margin-top: 24px;
  background-color: #ffc45c;
  border-radius: 8px;
}
.scan-result__completion p {
  margin: 0 0 8px;
  font-size: 16px;
  color: #212121;
}
.scan-result--success .scan-result__title {
  color: #4caf50;
}
.scan-result--error .scan-result__title {
  color: #f44336;
}

/* ========================================
   コンプリート通知（アルバムページ用）
   ======================================== */
.completion-notice {
  padding: 16px;
  margin-top: 24px;
  text-align: center;
  background-color: #ffc45c;
  border-radius: 8px;
}
.completion-notice__title {
  margin: 0 0 8px;
  font-size: 18px;
  color: #212121;
}
.completion-notice .btn {
  margin-top: 8px;
}

.auth-cta {
  max-width: 400px;
  padding: 24px 16px;
  margin: 24px auto 0;
  text-align: center;
  background-color: #f5f5f5;
  border: 1px solid #eee;
  border-radius: 8px;
  /* アカウントメニューと同じボタンスタイル */
}
.auth-cta__text {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.5;
  color: #212121;
}
.auth-cta__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.auth-cta__link {
  display: block;
  width: 200px;
  padding: 12px 16px;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 16px;
  color: #212121;
  text-align: center;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  -webkit-transition: background-color 0.2s, border-color 0.2s;
  transition: background-color 0.2s, border-color 0.2s;
  /* 参加登録ボタン（赤背景） */
}
.auth-cta__link:hover {
  background-color: #f5f5f5;
  border-color: #bdbdbd;
}
.auth-cta__link--highlight {
  font-weight: 500;
  color: #fff;
  background-color: #e53935;
  border-color: #e53935;
}
.auth-cta__link--highlight:hover {
  color: #fff;
  background-color: rgb(213.6947368421, 31.7368421053, 27.5052631579);
  border-color: rgb(213.6947368421, 31.7368421053, 27.5052631579);
}

/* ========================================
   1. 設定ファイル（変数定義）
   ========================================
   Dart Sass 3.0対応: _index.scss経由で全変数を読み込み */
/* _card.scss */
/* ネバコレTOKYO カードコンポーネント
 * フレームオーバーレイ付きカード構造
 *
 * 構造:
 * .card
 *   .card__content (背景・コンテンツ層)
 *   .card__frame (フレーム画像オーバーレイ)
 *   .card__title (タイトル - 最上層)
 */
/* カード変数 */
/* ========================================
   カードコンポーネント
   ======================================== */
.card {
  position: relative;
  width: 100%;
  aspect-ratio: 0.7174348697;
  overflow: hidden;
  /* border-radius: $card-content-radius; */
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  -webkit-transition: -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
  /* コンテンツ層（背景・画像など） */
  /* フレームオーバーレイ（透明部分がコンテンツを見せる） */
  /* タイトル（最上層 - フレームの上） */
  /* カードタイプバリエーション */
  /* ロック状態（未収集） */
  /* ホバーエフェクト（アルバムページのカードのみ） */
}
.card__content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #eeeded;
  border-radius: 24px;
  /* コンテンツ内の画像 */
}
.card__content img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 24px;
}
.card__frame {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.card__frame img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.card__title {
  position: absolute;
  top: 4%;
  right: 6%;
  z-index: 3;
  font-size: clamp(10px, 3vw, 16px);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-align: right;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.card--product .card__content {
  /* プロダクトカード用スタイル */
}
.card--maker .card__content {
  /* メーカーカード用スタイル */
}
.card--locked .card__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #e0e0e0;
}
.card--locked .card__content::after {
  font-size: clamp(32px, 10vw, 64px);
  font-weight: 700;
  color: #bdbdbd;
  content: "?";
}
.card--locked .card__title {
  color: #bdbdbd;
}
.card-grid .card:hover:not(.card--locked) {
  -webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
}

/* ========================================
   カードグリッド（アルバムページ用）
   ======================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px 0;
}
@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 992px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================================
   インデックスページ用カード（特別レイアウト）
   ======================================== */
.index-card {
  max-width: 280px;
  margin: 0 auto;
  /* インデックスカード専用コンテンツ */
  /* インデックスカードのタイトル（カード内上部） */
  /* インデックスカードのメイン画像 */
  /* インデックスカードのボタン群 */
  /* インデックスカードのボタン */
  /* インデックスカードのボタン（参加登録 - CTA風） */
}
@media (min-width: 768px) {
  .index-card {
    max-width: 400px; /* 1.25x size for PC */
  }
}
.index-card .card__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  padding: 20px 16px;
}
.index-card .index-card__title {
  z-index: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-bottom: 8px;
  margin-left: 8px;
  font-family: GenEiLateGoN, "Zen Maru Gothic", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #212121;
  text-align: left;
}
@media (min-width: 576px) {
  .index-card .index-card__title {
    font-size: 22px;
  }
}
.index-card .index-card__image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.index-card .index-card__image img {
  width: 100%;
  height: auto;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0;
}
.index-card .index-card__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.index-card .index-card__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 40px;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #212121;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 50px;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.index-card .index-card__btn:hover {
  background-color: #f5f5f5;
  border-color: #bdbdbd;
}
.index-card .index-card__btn--cta {
  font-weight: 700;
  color: #fff;
  background-color: #e53935;
  border: none;
}
.index-card .index-card__btn--cta:hover {
  color: #fff;
  background-color: #c62828;
}

/* ========================================
   ベーススタイル
   ======================================== */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 14px; /* 14px - mobile */
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
@media (min-width: 768px) {
  html {
    font-size: 16px; /* 16px - PC */
  }
}

body {
  padding: 0;
  margin: 0;
  font-family: "Zen Maru Gothic", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 1rem; /* Inherits from html: 14px mobile, 16px PC */
  font-weight: 500; /* 500 - Zen Maru Gothic default */
  line-height: 1.5;
  color: #212121;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: #1a73e8;
  text-decoration: none;
  -webkit-transition: color 0.15s ease-in-out;
  transition: color 0.15s ease-in-out;
}
a:hover {
  color: #1557b0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ========================================
   見出しフォント（GenEiLateGoN）
   ======================================== */
h1, h2, h3, h4, h5, h6,
.section__title,
.page-title,
.phone-frame__title,
.makers-section__title,
.terms-section__title {
  font-family: GenEiLateGoN, "Zen Maru Gothic", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
}

h2 {
  position: relative;
  display: inline-block;
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  /* Outer span - contains ellipses, no padding affects underline */
  /* Left ellipse */
  /* Inner em - contains text + underline only */
  /* Centered text - add right ellipse */
}
h2 span {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 4px; /* Reduced from 8px to compensate for em padding-left: 6px */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
h2 span::before {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 14px;
  height: 20px;
  content: "";
  background: #fca728;
  border-radius: 50%;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
h2 span em {
  padding-bottom: 6px;
  padding-left: 6px;
  font-style: normal;
  background-image: url("../images/common/dots-rev-gry.svg");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 600px 4px;
}
h2.text-center span::after {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 14px;
  height: 20px;
  content: "";
  background: #fca728;
  border-radius: 50%;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

/* ========================================
   サブヘッダー（h3）- 点線下線のみ
   左寄せ: 最初の2つのドットがオレンジ
   中央寄せ: 両端2つずつオレンジ
   ======================================== */
h3 {
  position: relative;
  display: inline-block;
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  /* Span wrapper - contains text + underline */
  /* Left-aligned: 4 orange dots at the start */
  /* Center-aligned: 4 orange dots on each side */
}
h3 span {
  display: inline-block;
  padding-bottom: 8px;
  background-image: url("../images/common/dots-org-2.svg"), url("../images/common/dots-rev-gry.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: bottom left, bottom left;
  background-size: 32px 4px, 600px 4px;
}
h3.text-center span {
  background-image: url("../images/common/dots-org-2.svg"), url("../images/common/dots-org-2.svg"), url("../images/common/dots-rev-gry.svg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom left, bottom right, bottom center;
  background-size: 32px 4px, 32px 4px, 600px 4px;
}

/* ========================================
   レイアウト
   ======================================== */
.container {
  width: 100%;
  max-width: 800px;
  padding: 0 16px;
  margin: 0 auto;
}

/* ========================================
   ボタン
   ======================================== */
.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 44px;
  padding: 0 24px;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  /* フォーカス時のスタイル（黒枠を消して透明度で表現） */
}
.btn:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.3);
          box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.3);
  opacity: 0.85;
}
.btn:focus-visible {
  outline: none;
  -webkit-box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.3);
          box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.3);
  opacity: 0.85;
}
.btn--primary {
  color: #fff;
  background-color: #1a73e8;
}
.btn--primary:hover {
  color: #fff;
  background-color: #1557b0;
}
.btn--primary:focus, .btn--primary:focus-visible {
  -webkit-box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.4);
          box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.4);
}
.btn--secondary {
  color: #fff;
  background-color: #e53935;
}
.btn--secondary:hover {
  color: #fff;
  background-color: #c62828;
}
.btn--secondary:focus, .btn--secondary:focus-visible {
  -webkit-box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.4);
          box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.4);
}
.btn--outline {
  color: #1a73e8;
  background-color: transparent;
  border: 2px solid #1a73e8;
}
.btn--outline:hover {
  color: #fff;
  background-color: #1a73e8;
}
.btn--block {
  width: 100%;
}
.btn--lg {
  height: 52px;
  font-size: 18px;
}

/* ========================================
   フォーム
   ======================================== */
.form-group {
  margin-bottom: 24px;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #212121;
}
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password],
.form-group input[type=tel],
.form-group input[type=url],
.form-group input[type=number],
.form-group textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.form-group input[type=text]:focus,
.form-group input[type=email]:focus,
.form-group input[type=password]:focus,
.form-group input[type=tel]:focus,
.form-group input[type=url]:focus,
.form-group input[type=number]:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1a73e8;
  -webkit-box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
          box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}
.form-group input[type=text]::-webkit-input-placeholder, .form-group input[type=email]::-webkit-input-placeholder, .form-group input[type=password]::-webkit-input-placeholder, .form-group input[type=tel]::-webkit-input-placeholder, .form-group input[type=url]::-webkit-input-placeholder, .form-group input[type=number]::-webkit-input-placeholder, .form-group textarea::-webkit-input-placeholder {
  color: #bdbdbd;
}
.form-group input[type=text]::-moz-placeholder, .form-group input[type=email]::-moz-placeholder, .form-group input[type=password]::-moz-placeholder, .form-group input[type=tel]::-moz-placeholder, .form-group input[type=url]::-moz-placeholder, .form-group input[type=number]::-moz-placeholder, .form-group textarea::-moz-placeholder {
  color: #bdbdbd;
}
.form-group input[type=text]:-ms-input-placeholder, .form-group input[type=email]:-ms-input-placeholder, .form-group input[type=password]:-ms-input-placeholder, .form-group input[type=tel]:-ms-input-placeholder, .form-group input[type=url]:-ms-input-placeholder, .form-group input[type=number]:-ms-input-placeholder, .form-group textarea:-ms-input-placeholder {
  color: #bdbdbd;
}
.form-group input[type=text]::-ms-input-placeholder, .form-group input[type=email]::-ms-input-placeholder, .form-group input[type=password]::-ms-input-placeholder, .form-group input[type=tel]::-ms-input-placeholder, .form-group input[type=url]::-ms-input-placeholder, .form-group input[type=number]::-ms-input-placeholder, .form-group textarea::-ms-input-placeholder {
  color: #bdbdbd;
}
.form-group input[type=text]::placeholder,
.form-group input[type=email]::placeholder,
.form-group input[type=password]::placeholder,
.form-group input[type=tel]::placeholder,
.form-group input[type=url]::placeholder,
.form-group input[type=number]::placeholder,
.form-group textarea::placeholder {
  color: #bdbdbd;
}
.form-group textarea {
  height: auto;
  min-height: 120px;
  padding: 16px;
  resize: vertical;
}
.form-group .error-message {
  margin-top: 4px;
  font-size: 14px;
  color: #f44336;
}

/* ========================================
   アラート・メッセージ
   ======================================== */
.alert {
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 8px;
}
.alert--success {
  color: #2e7d32;
  background-color: #e8f5e9;
}
.alert--error {
  color: #c62828;
  background-color: #ffebee;
}
.alert--info {
  color: #1565c0;
  background-color: #e3f2fd;
}

/* ========================================
   規約同意セクション（登録ページ用）
   ======================================== */
.agreement-section {
  margin-top: 24px;
}
.agreement-section__intro {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: #212121;
}
.agreement-section__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.agreement-section__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  color: #212121;
  text-decoration: none;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  -webkit-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
}
.agreement-section__link:hover {
  background-color: #eee;
}
.agreement-section__link-icon {
  font-size: 18px;
  color: #1a73e8;
}
.agreement-section__checkboxes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
.agreement-section__checkboxes .form-group--checkbox {
  margin-bottom: 0;
}
.agreement-section__checkboxes .form-group--checkbox a {
  color: #1a73e8;
  text-decoration: underline;
}
.agreement-section__checkboxes .form-group--checkbox a:hover {
  text-decoration: none;
}

/* ========================================
   ユーティリティクラス - テキスト配置
   ======================================== */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* ========================================
   ユーティリティクラス - レスポンシブ表示
   ======================================== */
/* SP（モバイル）のみ表示 - PCで非表示 */
.sp {
  display: inline;
}
@media (min-width: 768px) {
  .sp {
    display: none;
  }
}

/* PC のみ表示 - モバイルで非表示 */
.pc {
  display: none;
}
@media (min-width: 768px) {
  .pc {
    display: inline;
  }
}

/* ========================================
   About Button (納豆メーカーマップリンク)
   ======================================== */
.about_btn {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 12px 24px;
  margin: 16px auto;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #212121;
  text-align: center;
  text-decoration: none;
  background-color: #f9a825;
  border: none;
  border-radius: 50px;
  -webkit-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
}
.about_btn:hover, .about_btn:visited, .about_btn:active {
  color: #212121;
  text-decoration: none;
}
.about_btn:hover {
  background-color: #ffd54f;
}

/* ========================================
   YouTube Section (動画埋め込みセクション)
   ======================================== */
.youtube-section {
  text-align: center;
  /* Responsive 16:9 embed container */
}
.youtube-section__heading {
  margin-bottom: 24px; /* 24px bottom margin for h2 */
}
.youtube-section__item {
  margin-bottom: 32px;
}
.youtube-section__item:last-child {
  margin-bottom: 0;
}
.youtube-section__title {
  display: block;
  margin-bottom: 24px; /* 24px - more bottom margin for h3 */
  text-align: center;
}
.youtube-section__embed {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #212121;
  border-radius: 8px;
  /* Aspect ratio wrapper */
}
.youtube-section__embed::before {
  display: block;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  content: "";
}
.youtube-section__embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}/*# sourceMappingURL=main.css.map */