@charset "UTF-8";
/* CSS Document */
/* CSS Document */
.camp-card__pickup {
  display: inline-block;
  margin: 0 0 15px 0;
  padding: 8px 12px;
  width: 100%;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: #EB7F32;
  border-radius: 6px;
  animation: fadeInUp 0.4s ease-out both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 期間表示ラベル */
.camp-period-label {
  position: absolute;
  top: 10px;
  right: 10px; /* 右上に表示（既存バッジと被らないよう調整） */
  z-index: 10;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 開催前（あと○日） - 青系 */
.camp-period-label--upcoming {
  background-color: #1e90ff;
}

/* 開催中 - 赤系（目立たせる） */
.camp-period-label--open {
  background-color: #e60012;
}

/* 終了 - グレー */
.camp-period-label--ended {
  background-color: #666;
}

/* ============================================
   Pagination Design (過去のキャンプ一覧用)
   ============================================ */
.c-pagination {
  margin-top: 60px; /* 上の余白 */
  margin-bottom: 60px; /* 下の余白 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* ボタン同士の間隔 */
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* 共通のボタンスタイル（数字・次へ・前へ） */
.c-pagination .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 44px; /* 押しやすいサイズ */
  height: 44px;
  padding: 0 12px; /* 「次へ」などの文字数に合わせて伸縮 */
  border: 1px solid #ddd;
  border-radius: 6px; /* 角丸 */
  background-color: #fff;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease; /* ふんわり変化 */
}

/* マウスを乗せた時 */
.c-pagination a.page-numbers:hover {
  background-color: #f0fdf4; /* 薄い緑色の背景 */
  border-color: #2A9D63; /* 緑色の枠線 */
  color: #2A9D63;
  transform: translateY(-2px); /* 少し浮き上がる */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 現在のページ（アクティブ） */
.c-pagination .page-numbers.current {
  background-color: #2A9D63; /* サイトのテーマカラー（緑） */
  border-color: #2A9D63;
  color: #fff;
  pointer-events: none; /* クリック不可にする */
}

/* 「次へ」「前へ」のテキスト調整 */
.c-pagination .next,
.c-pagination .prev {
  font-weight: bold;
}

/* スマホ表示の調整 */
@media screen and (max-width: 767px) {
  .c-pagination {
    margin-top: 40px;
    gap: 5px;
  }
  .c-pagination .page-numbers {
    min-width: 38px;
    height: 38px;
    font-size: 12px;
    padding: 0 8px;
  }
}
/* ====================================
   資料ダウンロード一覧（カード型）
   ==================================== */
/* #main で囲んで詳細度を上げる */
#main .dw-img {
  display: grid;
  /* PCは3列固定（優先度高） */
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px;
  margin-top: 30px;
  /* 他CSSのリセット */
  width: auto;
  float: none;
  /* ▼▼▼ スマホ表示調整をこの「中」に書くのが正解です ▼▼▼ */
}
@media (max-width: 768px) {
  #main .dw-img {
    /* PCの !important を上書きするために、こちらも !important をつけます */
    grid-template-columns: 1fr !important; /* シンプルに「1列」指定 */
    gap: 20px;
  }
}

/* カード本体 */
.camp-doc-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  text-decoration: none;
  height: 100%;
  color: #333;
}
.camp-doc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.camp-doc-card:hover .camp-doc-thumb {
  transform: scale(1.05);
}

/* 画像エリア */
.camp-doc-card__header {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.camp-doc-card__header .camp-doc-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* テキストエリア */
.camp-doc-card__body {
  padding: 20px;
}

/* コード（W-1など） */
.camp-doc-card__code {
  display: block;
  font-weight: bold;
  color: #ea5514;
  font-size: 1.2rem;
  margin-bottom: 5px;
  font-family: sans-serif;
}

/* タイトル */
.camp-doc-card__title {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 10px;
  color: #333;
}

/* 開催期間 */
.camp-doc-card__date {
  font-size: 1.3rem;
  color: #666;
  font-weight: normal;
}

/* --- キャンセル連絡フォーム全体のデザイン --- */
.c-form-wrapper {
  max-width: 800px;
  margin: 0 auto;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333;
  font-size: 16px; /* 視認性向上のため少し大きめに */
  line-height: 1.6;
}

/* テーブルスタイル */
.c-form-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 30px;
  border-top: 2px solid #2A9D63; /* サイトカラーの緑 */
}

.c-form-table th,
.c-form-table td {
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: top;
  text-align: left;
}

/* 見出しセル (PC) */
.c-form-table th {
  width: 30%;
  background-color: #f4fcf7; /* 薄い緑色の背景 */
  font-weight: bold;
  color: #2A9D63; /* 文字色も緑に */
  position: relative;
  white-space: nowrap; /* テキストの折り返し制御（PC） */
}

/* 入力セル (PC) */
.c-form-table td {
  width: 70%;
  background-color: #fff;
}

/* 必須バッジ */
.must {
  display: inline-block;
  background-color: #e74c3c; /* 警告色（赤） */
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
  font-weight: normal;
}

/* 補足テキスト（電話番号の下など） */
.u-text-small {
  display: block;
  font-size: 12px;
  font-weight: normal;
  color: #666;
  margin-top: 4px;
}

/* 区切り行（返金先指定の案内） */
.c-form-table__section-header td {
  background-color: #f0f0f0;
  text-align: center;
  font-weight: bold;
  padding: 20px 10px;
  color: #555;
  border-bottom: 2px solid #ccc;
}

/* --- 入力フィールドの装飾 --- */
/* Contact Form 7のデフォルトスタイルを上書き */
.c-form-table input[type=text],
.c-form-table input[type=email],
.c-form-table input[type=tel],
.c-form-table select,
.c-form-table textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px; /* 入力文字も大きめに */
  background-color: #fbfbfb;
  box-sizing: border-box; /* パディングを含めた幅計算 */
  transition: border-color 0.3s;
}

.c-form-table input:focus,
.c-form-table select:focus,
.c-form-table textarea:focus {
  border-color: #2A9D63; /* フォーカス時に緑に */
  background-color: #fff;
  outline: none;
  box-shadow: 0 0 5px rgba(42, 157, 99, 0.2);
}

/* 金融機関情報のグループ化 */
.c-form-group {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.c-form-group:last-child {
  margin-bottom: 0;
}

.c-form-group label {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
  display: block;
  width: 100%;
  color: #555;
}

/* インプット幅の微調整クラス */
.size-sm {
  max-width: 200px;
}

/* --- 送信エリア --- */
.c-form-footer {
  text-align: center;
  background-color: #f9f9f9;
  padding: 30px;
  border-radius: 8px;
}

.c-form-consent {
  margin-bottom: 20px;
  font-weight: bold;
}

/* 送信ボタン */
.c-form-submit input[type=submit] {
  background-color: #2A9D63; /* サイトカラーの緑 */
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 15px 60px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  -webkit-appearance: none;
}

.c-form-submit input[type=submit]:hover {
  background-color: #238552; /* ホバー時に少し濃く */
  transform: translateY(-2px);
}

.c-form-note {
  margin-top: 15px;
  font-size: 14px;
  color: #666;
}

/* --- レスポンシブ対応 (スマホ表示) --- */
@media screen and (max-width: 768px) {
  .c-form-table {
    border-top: none;
  }
  .c-form-table th,
  .c-form-table td {
    display: block; /* 縦並びにする */
    width: 100%;
    box-sizing: border-box;
  }
  .c-form-table th {
    background-color: transparent; /* 背景色を消す */
    border-bottom: none;
    padding-bottom: 5px;
    color: #2A9D63;
    font-size: 18px; /* スマホでは見出しをより強調 */
    white-space: normal;
  }
  .c-form-table td {
    padding-top: 0;
    padding-bottom: 25px; /* 次の項目との余白 */
    border-bottom: 1px solid #eee;
  }
  /* 入力欄の幅をスマホで最大化 */
  .size-sm {
    max-width: 100% !important;
  }
  /* 必須バッジの位置調整 */
  .must {
    float: right;
    margin-top: 2px;
  }
}
/* Contact Form 7 のロードアイコンを完全に非表示にする */
.wpcf7-spinner {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* ===================================================
 * ④ 事業紹介ページ（キャンプサイト）
 * 「月」の列：4em（4文字分）に設定
 * =================================================== */
.p-camp_pt table.tbl01 tr th:first-child {
  width: 4em;
  min-width: 60px;
  white-space: nowrap;
  text-align: center;
}

/* ===================================================
 * ⑤ 協会概要・沿革（協会サイト）
 * 「西暦」の列：5em（5文字分）に設定
 * =================================================== */
.p-outline table.tbl01 tr th:first-child,
.slug-outline table.tbl01 tr th:first-child {
  width: 5em;
  min-width: 80px;
  white-space: nowrap;
  text-align: center;
}

/* ===================================================
 * ④ 事業紹介（協会サイト）
 * 「月」の列：4emに設定
 * =================================================== */
.p-project table.tbl01 tr th:first-child,
.slug-project table.tbl01 tr th:first-child {
  width: 4em;
  min-width: 60px;
  white-space: nowrap;
  text-align: center;
}

/* ===================================================
 * スマホ対応 (SP)
 * 画面幅768px以下のときは、thの幅固定を解除して100%にする
 * =================================================== */
@media screen and (max-width: 768px) {
  .p-camp_pt table.tbl01 tr th:first-child,
  .p-outline table.tbl01 tr th:first-child,
  .slug-outline table.tbl01 tr th:first-child,
  .p-project table.tbl01 tr th:first-child,
  .slug-project table.tbl01 tr th:first-child {
    width: 100%; /* 幅を画面いっぱいに */
    min-width: auto; /* 最小幅制限を解除 */
    white-space: normal; /* 折り返しを許可 */
    border-right: none; /* 縦並びの際、右の線が不要な場合に消す（念のため） */
  }
}
/* ===================================================
* トップページ
* ディーズ！プラン ロゴ画像のレスポンシブ調整
* =================================================== */
/* 親要素（h2）の幅を強制的に広げる */
.p-deez__heading {
  width: 100% !important; /* 親いっぱいまで広げる */
  max-width: 700px; /* PCでの最大幅（ここを画像の最大幅と合わせる） */
  margin-left: auto;
  margin-right: auto;
  display: block !important; /* inline-blockになっていたら解除 */
}

/* 中身の画像（SVG） */
.p-deez__heading img {
  width: 100%; /* h2の幅いっぱいに広がる */
  height: auto;
  display: block;
  margin: 0 auto;
}