/* =========================================
   CCOスペシャルコンテンツ  共通レイアウト
   -----------------------------------------
   body クラス .ccopage-page があるページ専用
========================================= */

body.ccopage-page {
  font-family: "Zen Kaku Gothic Antique", sans-serif !important;
}

/*紙吹雪
*/

.confetti canvas {
  height: 100%;
  width: 100%;
  position: absolute;
}

.wrapper {
  background-size: 100% auto; /* PCはこれでOK */
}

.ccopage-page {
  font-family:
    -apple-system, BlinkMacSystemFont, "Helvetica Neue", "YuGothic",
    "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #222;
}

/* セクションの共通余白 */

.ccopage-section {
  padding: 40px 0;
}

.ccopage-inner {
  width: min(1120px, 92vw);
  margin: 0 auto;
}

/* 見出し */

.ccopage-main-title {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
  color: #000;
}

.ccopage-section-title {
  position: relative;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 24px;
  color: #00a651; /* メインのグリーン */
}

.ccopage-section-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: #333; /* メインのグリーン */
  margin: 10px auto 0;
}

.ccopage-section-title--left {
  text-align: left;
}

.ccopage-section-title--left::after {
  margin-left: 0;
}

/* ==========================================================
   CCOスペシャルコンテンツ 専用ヘッダー
   - このカスタム投稿(single-ccopage)だけ共通ヘッダーを非表示
   - SVG ロゴを表示
========================================================== */

/* この投稿タイプ(single-ccopage)のときは共通ヘッダーを消す */
body.single-ccopage .site-header {
  display: none;
}

/* 背景とフォントは念のためここでも指定 */
body.single-ccopage {
  font-family:
    "Zen Kaku Gothic Antique",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Segoe UI",
    sans-serif;
  background-color: #fff;
}

/* 専用ヘッダー全体 */
.ccopage-page-header {
  background-color: #fff;
}

/* 上部の細いグリーンバー */
.ccopage-page-header-top {
  width: 100%;
  height: 18px;
  background-color: #dd0b1f;
}

/* ロゴ周りの余白 */
.ccopage-page-header-inner {
  padding: 1.4rem 1.5rem 2.4rem;
}

/* ロゴ */
.ccopage-logo img {
  display: block;
  max-width: 320px; /* PC でのロゴ幅 */
  height: auto;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .ccopage-page-header-inner {
    padding: 1.1rem 1rem 2rem;
  }

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

  .ccopage-logo img {
    max-width: 240px; /* スマホで少し小さめに */
  }
}

/* 角丸＆破線枠のボックス */

.ccopage-box {
  background: #ffffe0;
  border-radius: 16px;
  padding: 20px 24px;
}

.ccopage-box2 {
  background: #fff;
  border-radius: 16px;
  padding: 20px 0px;
}

.ccopage-box--dashed {
}

/* WYSIWYG エリアの簡単体裁 */

.wysiwyg p {
  margin: 0em;
}
.wysiwyg ul,
.wysiwyg ol {
  margin: 0 0 0.75em 1.4em;
}

/* =========================================
   ヒーロー & タブ
========================================= */

.ccopage-hero {
  padding-top: 48px;
}

.ccopage-hero-lead {
  margin-bottom: 24px;
}

.ccopage-hero img {
  width: 100%;
  margin: 0px auto;
}

/* タブの通常状態 */
.ccopage-tabs {
  position: relative; /* z-indexを効かせる */
  display: flex;
  justify-content: center;
  gap: 12px;
  transition: all 0.25s ease;
  z-index: 999;
}

/* 固定時 */
.ccopage-tabs.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
  z-index: 999;
}

.ccopage-tabs a img {
  display: block;
  height: 60px; /* ここ調整可 */
  width: auto;
  transition: opacity 0.2s;
}

.ccopage-coupon-lead {
  font-size: 14px;
  text-align: center;
  margin: 15px auto;
}

/* =========================================
   クーポンカテゴリ & 店舗カード
========================================= */

.ccopage-coupons {
  padding-top: 16px;
}

.ccopage-coupon-category + .ccopage-coupon-category {
  margin-top: 40px;
}

/* カテゴリ説明 */

.hatcahi-coupon-category-desc,
.ccopage-coupon-category-desc {
  margin-top: 12px;
}

/* 店舗カードのグリッド */

.ccopage-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 1024px) {
  .ccopage-shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .ccopage-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px; /* すき間（お好みで調整） */
  }
}

.ccopage-shop-tel {
  white-space: nowrap;
  display: flex;
  gap: 0px; /* 適度な余白 */
}
/* 店舗カード（クーポン券デザインを簡略再現） */

.ccopage-shop-card {
  position: relative;
  border: #000 2px solid;
  background: #fff;
  border-radius: 24px;
  padding: 18px 20px 18px;
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* 上部の LINE クーポン帯 */
.ccopage-shop-card::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
}

/* ==========================================
   クーポンボタン背景：全体構造
========================================== */
.ccopage-shop-mainbtn {
  position: relative;
  display: block;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 26px 20px;
  color: #fff;
  text-decoration: none;
  line-height: 2em;

  background-image: url("../../chukai_community/assets/images/ccopage/coupon_back.png");
  background-repeat: no-repeat;
  background-size: 100% auto; /* PCはこれでOK */
  background-position: center;
  z-index: 2;
}

.ccopage-shop-coupon {
  margin: 0.25em auto;
  font-size: 14px;
  line-height: 1.5em;
  background-color: #ffffe0;
  padding: 0.5em;
  font-weight: 600;
}

/* ======== スマホ時：2行対応背景縮小 ======== */
@media (max-width: 767px) {
  .ccopage-shop-mainbtn {
    background-size: contain;
    background-position: center top;
    max-width: 330px;
    margin: 0 auto;

    /* 2行対応：高さを縮める */
    padding: 18px 0 22px !important;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  /* テキストが枠中央に来ない場合 */
  .ccopage-shop-mainbtn span,
  .ccopage-shop-mainbtn {
    line-height: 1.3em;
  }

  .ccopage-shop-coupon {
    margin-top: 0.25em;
    font-size: 13px;
    line-height: 1.5em;
    font-weight: 600;
  }
}

.ccopage-shop-card::before,
.ccopage-shop-card::after {
  pointer-events: none;
}

/* スマホ 2カラム */
@media (max-width: 767px) {
  .ccopage-shop-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .ccopage-shop-card {
    width: 100%;
    margin: 0 !important;
  }

  .ccopage-shop-mainbtn {
    max-width: 100%;
    background-size: 100% auto;
  }
}

/* LINE クーポン GET! ボタン */

.ccopage-shop-links {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* MAP / LINE ボタン共通 */

.ccopage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.ccopage-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

.ccopage-btn--map {
  background: #ffffff;
  color: #00a651;
  border: 2px solid #00a651;
}

.ccopage-btn--line {
  background: #00b94f;
  color: #fff;
}

/* 店舗名・本文 */

.ccopage-shop-name {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: 700;
  margin: 5px 0 4px;
}

.ccopage-shop-body {
  position: relative;
  z-index: 1;
  font-size: 13px;
}

.ccopage-shop-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  margin: 0 0 4px;
  font-size: 12px;
}

.ccopage-shop-meta dt {
  font-weight: 700;
  white-space: nowrap;
}

.ccopage-shop-meta dd {
  margin: 0;
}

.ccopage-shop-meta a {
  color: inherit;
  text-decoration: none;
}

.ccopage-shop-meta a:hover {
  text-decoration: underline;
}

.ccopage-shop-text {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

/* =========================================
   学校一覧（ボタン）／学校ブロック
========================================= */

.ccopage-school-list {
  padding-top: 16px;
}

.ccopage-school-list-lead {
  margin-bottom: 18px;
  text-align: center;
}

.ccopage-school-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: center;
}

@media (max-width: 768px) {
  .ccopage-school-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
    justify-content: left;
  }

  .ccopage-school-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 4px 9px;
    border-radius: 24px;
    background: #f4f4f4;
    border: 2px solid #555;
    font-size: 13px;
    text-decoration: none;
    color: #222;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition:
      background 0.15s ease,
      transform 0.1s ease;
  }
}

.ccopage-school-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 8px 18px;
  border-radius: 24px;
  background: #f4f4f4;
  border: 2px solid #555;
  font-size: 14px;
  text-decoration: none;
  color: #222;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}

.ccopage-school-btn:hover {
  background: #fff;
  transform: translateY(-1px);
}

/* 学校ごとのセクション */

.ccopage-school-block {
  padding-top: 32px;
  margin-top: 32px;
}

.ccopage-school-title {
  font-size: 1.1em;
  font-weight: 700;
  color: #00a651;
  margin: 0 0 16px;
  padding-top: 5px;
}

.ccopage-school-intro {
  margin-bottom: 20px;
}

/* 学校動画ラベル */

.ccopage-school-movie-label {
  font-size: 14px;
  font-weight: 700;
  margin: 8px 0 10px;
}

/* =========================================
   YouTube グリッド（学校 & 取材ニュース共通）
========================================= */

.ccopage-youtube-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ccopage-youtube-grid--large {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .ccopage-youtube-grid,
  .ccopage-youtube-grid--large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .ccopage-youtube-grid,
  .ccopage-youtube-grid--large {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.ccopage-youtube-item iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  border: none;
}

/* =========================================
   取材ニュース
========================================= */

.ccopage-interview-lead {
  margin-bottom: 18px;
}

/* =========================================
   スマホ向け微調整
========================================= */

@media (max-width: 600px) {
  .ccopage-section {
    padding: 32px 0;
  }

  .ccopage-main-title {
    font-size: 26px;
    color: #000;
  }

  .ccopage-section-title {
    font-size: 20px;
    margin-top: 40px;
  }

  .ccopage-shop-card {
    padding: 16px 16px 18px;
  }

  .ccopage-school-block {
    margin-top: 24px;
    padding-top: 24px;
  }
}

/* =========================
   学校ごとの YouTube 埋め込み
   16:9 ＋ PC 3列 / SP 1列
========================= */

/* グリッドレイアウト */
.ccopage-youtube-grid {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

/* PC: 3列 */
@media (min-width: 1024px) {
  .ccopage-youtube-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* タブレット・スマホ: 1列 */
@media (max-width: 1023.98px) {
  .ccopage-youtube-grid {
    grid-template-columns: 1fr;
  }
}

/* 16:9 の比率を維持して埋め込み */
.ccopage-youtube-item {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* ここで 16:9 固定 */
  overflow: hidden;
  border-radius: 12px; /* デザインに合わせて角丸。不要なら削除可 */
  background: #000; /* ローディング中の背景 */
}

/* iframe を枠いっぱいにフィットさせる */
.ccopage-youtube-item iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.gojyu {
  font-size: 0.9em;
  text-align: center;
  margin-bottom: 50px;
}

@media (min-width: 1024px) {
  .ccopage-interview .ccopage-youtube-grid--large {
    grid-template-columns: 1fr !important;
    justify-items: center;
  }
  .ccopage-interview .ccopage-youtube-card {
    width: min(960px, 100%); /* ここで大きく見せる */
    max-width: none;
  }
}

/* 取材ニュース：PCで重ならないようにする */
.ccopage-interview .ccopage-youtube-card {
  transform: none !important; /* scaleを殺す */
  width: 100%;
}

/* 2カラムのまま整える（必要なら） */
@media (min-width: 1024px) {
  .ccopage-interview .ccopage-youtube-grid--large {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px;
    justify-items: center;
  }
  .ccopage-interview .ccopage-youtube-card {
    max-width: 560px; /* ここで“見た目の大きさ”を作る */
  }
}

@media (min-width: 1024px) {
  .ccopage-interview .ccopage-youtube-grid--large .ccopage-youtube-item {
    transform-origin: center;
  }

  /* 拡大で上下が詰まるのを防ぐ */
  .ccopage-interview .ccopage-youtube-grid--large {
    padding: 40px 0;
  }

  /* 取材ニュース：動画を確実にセンター揃え */
  .ccopage-interview .ccopage-youtube-grid--large {
    display: flex;
    justify-content: center;
  }

  /* 動画枠の最大幅（お好みで調整） */
  .ccopage-interview .ccopage-youtube-grid--large .ccopage-youtube-item {
    width: min(960px, 100%);
  }
}

.ccopage-inner {
  margin: 0px auto 0px auto;
}
.ccopage-inner .center img {
  margin: 40px auto 10px auto;
}

/* 取材ニュース：中央寄せ */
.ccopage-youtube-grid--large {
  grid-template-columns: 1fr; /* まず1カラムに固定 */
  justify-items: center; /* アイテム自体を中央へ */
}

/* 動画+説明をまとめる箱 */
.ccopage-youtube-card {
  width: min(720px, 100%); /* 通常サイズ */
}

/* PC時だけ少し拡大（=120%） */
@media (min-width: 1024px) {
  .ccopage-youtube-card {
    transform: scale(1.2);
    transform-origin: top center;
  }
}

/* 説明の余白 */
.ccopage-youtube-description {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
}

/* =========================
   ccopage 専用フッター
========================= */

.ccopage-footer {
  position: relative;
  background: #dd0b1f;
  padding: 26px 0 30px;
  overflow: hidden;
}

.ccopage-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* 上段：2026 CCOスペシャルコンテンツ */
.ccopage-footer-topline {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ccopage-footer-year {
  font-size: 22px;
}

.ccopage-footer-title {
  font-size: 24px;
}

/* 下段：ロゴ＋社名 */
.ccopage-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ccopage-footer-logo {
  width: 280px; /* ロゴの見え方で微調整 */
  height: auto;
  display: block;
  margin: auto 0 auto auto;
}

.ccopage-footer-name {
  color: #111;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
}

/* SP調整（右側のイメージみたいにコンパクトに） */
@media (max-width: 767px) {
  .ccopage-footer {
    padding: 20px 0;
  }

  .ccopage-footer-year {
    font-size: 18px;
  }
  .ccopage-footer-title {
    font-size: 20px;
  }

  .ccopage-footer-logo {
    width: 280px;
    margin: auto;
  }
  .ccopage-footer-name {
    font-size: 22px;
  }
}

.ccopage-shop-address-line {
  margin: 5px auto;
  font-size: 0.9em;
}

#ccopage-school {
  padding-top: 45px;
}

/* 紙吹雪は必ず背面へ */
.confetti {
  position: fixed; /* 画面固定にしてズレ防止 */
  inset: 0;
  pointer-events: none; /* クリック阻害を絶対に起こさない */
}

.confetti canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ccopage-shop-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden; /* ← これがマスク */
  display: grid;
  place-items: center; /* ← 中央に配置 */
  margin: 0 auto;
}

.ccopage-shop-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ← 中心を基準にトリミング */
  object-position: center;
  display: block;
}