*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}
/* ▽▽▽共通CSS▽▽▽ */
:root {
  /* ベース背景・構造 */
  --color-header-bg: #ffffff;
  --color-background: #ffffff;
  --color-footer-bg: #fef6f6;
  --color-section-bg: #fffafa;
  --color-bg-surface: #fff1f1;
  --color-bg-muted: #fcdede;
  --color-bg-highlight: #ffe9e9;
  --color-bg-alt: #ffefef;

  /* テキスト色 */
  --color-text-main: #2e2e2e;
  --color-text-sub: #7d7d7d;
  --color-text-on-dark: #ffffff;
  --color-text-danger: #ff4c4c;
  --color-text-success: #4caf50;

  /* リンク色（ロゴ青色に合わせた柔らかいブルー） */
  --color-link: #007aff;
  --color-link-hover: #005fcc;

  /* 枠・影・強調 */
  --color-accent: #ff5c5c; /* ロゴの赤基調 */
  --color-border-title: #ff5c5c;
  --color-border: #dddddd;
  --color-border-light: #eeeeee;
  --color-shadow-on-light: rgba(0, 0, 0, 0.1);
  --color-shadow-on-dark: rgba(0, 0, 0, 0.3);

  /* ボタン（ユーザー用） */
  --color-btn-primary: #ff5c5c;
  --color-btn-primary-hover: #e04848;
  --color-btn-primary-text: #ffffff;

  --color-btn-secondary: #ffffff;
  --color-btn-secondary-text: #ff5c5c;

  --color-btn-tertiary: #eeeeee;
  --color-btn-tertiary-text: #333333;

  /* 特殊：ゴールド（ポイント表示など） */
  --color-gold: #f7c600;
  --color-gold-dark: #c59e00;
}

/* ▽▽▽ 管理画面用カラー変数 ▽▽▽ */
:root {
  --color-admin-bg: #f5f5f5;
  --color-admin-header-bg: #333333;
  --color-admin-header-text: #ffffff;

  /* 背景・境界 */
  --color-admin-bg-surface: #ffffff;
  --color-admin-bg-muted: #f9f9f9;
  --color-admin-border: #999999;

  /* テキスト */
  --color-admin-text-main: #333333;
  --color-admin-text-sub: #999999;

  /* リンク */
  --color-admin-link: #2a80c9;
  --color-admin-link-hover: #1f65a4;

  /* アクセント */
  --color-admin-accent: #2a80c9;
  --color-admin-accent-hover: #1f65a4;

  /* 成功・警告色 */
  --color-admin-success: #2b6e3c;
  --color-admin-alert: #c00;

  /* フラッシュメッセージ */
  --color-admin-flash-bg-success: #e0f5e9;
  --color-admin-flash-border-success: #a8ddb5;
  --color-admin-flash-bg-alert: #ffecec;
  --color-admin-flash-border-alert: #f5c2c2;

  /* ボタン（管理画面） */
  --color-admin-btn-primary: #2a80c9;
  --color-admin-btn-primary-hover: #1f65a4;
  --color-admin-btn-primary-text: #ffffff;

  --color-admin-btn-danger: #dc3545;
  --color-admin-btn-danger-hover: #b02a37;
  --color-admin-btn-danger-text: #ffffff;

  --color-admin-btn-secondary: #cccccc;
  --color-admin-btn-secondary-text: #333333;

  
  --color-admin-bg-highlight: #e6f7e6;
  --color-admin-border-highlight: #b5e0b5;

  --color-danger: #e53935;
  --color-danger-hover: #c62828;
}


/* body直下のテキスト色（明示的に） */
body {
  background-color: var(--color-background);
  color: var(--color-text-main);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

/* 画面全体の高さを設定 */
html, body {
  height: auto;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  margin-top: 60px; /* ヘッダーの高さ分下げる */
}

/* base-wrapperの最大幅を1024pxに設定し、画面幅に合わせて縮小 */
.base-wrapper {
  max-width: 1024px;
  width: 100%;
  /* 画面幅に応じて縮小 */
  margin: 0 auto;
  /* 中央に配置 */
}

.gif-background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2; /* 背景として薄く */
  position: absolute;
  top: 0;
  left: 0;
}
.gif-background-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 背面に表示 */
  overflow: hidden;
}
.gif-background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2; /* 80%透過 */
}

/* ▼▼▼追加箇所▼▼▼ */
.page-header,
.page-content,
.user-wrapper {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.page-header,
.page-content {
  margin-top: 20px;
  margin-bottom: 25px;
}

.page-title,
.page-header h1,
.section-title {
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 2px solid var(--color-border-title);
  padding-bottom: 5px;
  margin-bottom: 10px;
  padding-left: 5px;
}

.page-header p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-sub);
  margin: 4px 0;
  padding-left: 5px;
}

.sub-title {
  font-size: 1.2em;
  margin-top: 20px;
  color: var(--color-text-sub);
}
/* ▲▲▲追加箇所▲▲▲ */
/* ▼▼▼ユーザー画面用だけに適用 ▼▼▼ */
body:not(.admin) {
  background-color: var(--color-background);
  color: var(--color-text-main);
}

/* ▼▼▼管理画面用だけに適用 ▼▼▼ */
body.admin {
  background-color: var(--color-admin-bg);
  color: var(--color-admin-text-main);
}


/*-- ▼▼▼完全版 ページネーションCSS▼▼▼  */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
  flex-wrap: wrap;
  gap: 8px;
}

/* aタグだけ対象（リンク） */
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  box-sizing: border-box;
}

/* 現在ページの表示（spanタグのcurrentクラスだけ） */
.pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  background-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  font-weight: bold;
  font-size: 14px;
  box-sizing: border-box;
  border: 1px solid var(--color-btn-primary);
}

/* aタグのホバー時 */
.pagination a:hover {
  background-color: var(--color-btn-hover);
  color: var(--color-btn-primary-text);
  border: 1px solid var(--color-btn-hover);
}
/*-- ▲▲▲完全版 ページネーションCSS▲▲▲  */
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
.image-drop-zone {
  border: 2px dashed #ddd;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.image-drop-zone.dragover {
  border-color: #aaa;
  background-color: #f9f9f9;
}

.image-drop-instructions {
  color: #aaa;
  font-size: 14px;
}

.image-preview {
  margin-top: 10px;
  display: none;
}