@charset "utf-8";
/* ==========================================================================
   festa-m-2609 共通スタイル
   まとめ / ミラー / 加盟店(fc) / エリア別ページ で共通読み込み
   参照: /2026/css/festa-m-2609.css
   ========================================================================== */

   .l-inner {
    padding:0 0 80px !important; /* プラン内容・QAすべてのアコーディオンを横幅いっぱいに広げるためpaddingを上書き */
  }

/* --------------------------------------------------------------------------
   1. 共通ユーティリティ（従来インラインで書かれていたものを集約）
   -------------------------------------------------------------------------- */
.p-shopevent .freearea img {
  display: block;
  vertical-align: bottom;
}

/* セクション画像は実寸(780px 等)に関わらずコンテナ幅(940px)いっぱいに広げる。
   SP では .adjust_w_sp により画面幅いっぱいになる。 */
.p-shopevent .freearea .adjust_w_sp > img,
.p-shopevent .freearea .adjust_w_sp > a > img,
.p-shopevent .freearea .adjust_w_sp > div > img,
.p-shopevent .freearea .adjust_w_sp > div > a > img,
.p-shopevent .freearea .c-text-center > img {
  width: 100%;
  height: auto;
}

/* 店舗一覧アンカーボタンは a 側で 400/940 に幅を絞っているので、
   img はその親いっぱい（＝400px相当）に収める */
.p-shopevent .freearea #anchor img {
  width: 100%;
  height: auto;
}

.p-shopevent .freearea img.img_op {
  transition: all .3s ease;
}

.p-shopevent .freearea a:hover img.img_op {
  opacity: .65;
}

@media screen and (max-width: 768px) {
  .p-shopevent .freearea a:hover img.img_op,
  .p-shopevent .freearea a:hover img {
    opacity: 1;
  }
}

/* CTA画像: Figma 404:2187 → 940枠内に x=40 / w=860（中央）、上下マージン60px */
.c-cta2609 {
  width: calc(860 / 940 * 100%);
  max-width: 860px;
  margin: 60px auto;
}

.c-cta2609 img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .c-cta2609 { margin: 6.4% auto; }
}

/* 店舗一覧アンカーボタン: Figma matome/btn は 860 / 940（CTA と同幅） */
#anchor {
  display: block;
  width: calc(860 / 940 * 100%);
  margin: 0 auto;
}

#seiyaku {
  position: relative;
}

#seiyaku .seiyaku_anchor {
  position: absolute;
  top: 23.4%;
}

@media screen and (max-width: 768px) {
  .adjust_w_sp {
    display: block;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* YouTube ショート埋め込み */
.embed-container {
  max-width: 400px;
  width: 70%;
  margin: auto;
}

.embed-container iframe {
  aspect-ratio: 9 / 16;
  width: 100%;
  height: 100%;
}

/* きらめきアニメーション */
.reflection {
  position: relative;
  overflow: hidden;
}

.reflection::after {
  content: "";
  display: block;
  width: 30px;
  height: 100%;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #fff;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflect 2s ease-in-out infinite;
}

@keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: .5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reflection::after { animation: none; }
}

/* --------------------------------------------------------------------------
   2. リード文（成人式をひかえた皆様へ）
   Figma: matome / Frame 14
   -------------------------------------------------------------------------- */
.p-lead2609 {
  max-width: 940px;
  margin: 0 auto 5%;
  padding: 0 4%;
  text-align: center;
}

.p-lead2609__ttl {
  display: inline-block;
  margin: 0 0 0.6em;
  padding-bottom: 0.1em;
  border-bottom: 2px solid #333;
  color: #333;
  font-size: 50px;                        /* PC 50px（SP は 768px 以下で 22px） */
  font-weight: 700;
  line-height: 1.4;
}

.p-lead2609__txt {
  margin: 0;
  color: #333;
  font-size: 27px;                        /* PC 27px（SP は 768px 以下で 13px） */
  line-height: 2;
}

.p-lead2609__txt .is-accent {
  display: block;
  color: #b40000;
  font-weight: 700;
  text-align: center;
}

.p-lead2609__annotation {
  color: #333;
  font-size:18px;
}

@media screen and (max-width: 768px) {
  .p-lead2609__ttl { font-size: 22px; }
  .p-lead2609__txt { font-size: 13px; }
  .p-lead2609__annotation{ font-size:12px; }
}

/* --------------------------------------------------------------------------
   3. セット内容アコーディオン
   開閉は「今月のフェア実施店舗一覧」と同じテーマ JS(js-ac) を流用し、
   見た目のみ新規クラスで上書き
   Figma: 408:3450 accordion
   -------------------------------------------------------------------------- */
.p-setac {
  --ac-ink: #2b2d31;
  /* 親 .l-inner に inline で padding:0 4% 80px が入っているため、
     アコーディオンは内側コンテナ幅いっぱい(100%)で置く */
  --ac-inner: 100%;
  width: 100%;
  /* max-width: 940px;
  margin: 0 auto; */
  padding: 0 0 40px;                    /*  Figma py-40（PC/SP 共通） */
  box-sizing: border-box;
}

/* 開閉機構は「今月のフェア実施店舗一覧」と同じテーマ JS(js-ac) を流用し、
   見た目のみ新規クラスで上書き。数値は Figma 408:3450 の実測値そのまま。 */

/* ---- 見出し: bg #333 / px-20 py-12 / 左寄せ Bold 18px・行送り36px ---- */
.p-setac .p-setac__head {
  position: relative;
  display: block;
  width: var(--ac-inner);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 12px 58px 12px 20px;   /* 右 = 20(余白) + 18(アイコン) + 20(gap) */
  background: #333;
  border: none;
  border-radius: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 36px;
  text-align: left;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
.p-setac .p-setac__head {
  font-size: 15px;
  }
}

.p-setac .p-setac__head:hover { background: #454545; }

/* Figma: Group 18 = 18x1px の白線、右余白 20px */
.p-setac .p-setac__head::after,
.p-setac .p-setac__head::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 18px;
  height: 1px;
  margin: 0;
  background: #fff;
  border: none;
  transform: translateY(-50%);
  transition: opacity .2s ease;
}

.p-setac .p-setac__head::before {
  width: 1px;
  height: 18px;
  right: 28.5px;
}

.p-setac .p-setac__head.is-active::before { opacity: 0; }

/* ---- 本文: 既定は閉。開閉は jQuery slideToggle ---- */
.p-setac .p-setac__body {
  display: none;
  width: var(--ac-inner);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  background: #fff;
  border: none;
  list-style: none;
}

/* ---- 中身 1ブロック: pt-10 / px-20 / pb-20 / 下罫線 #c9c9c9（最終ブロックは無し） ---- */
.p-setac .p-setac__group {
  padding: 10px 20px 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #c9c9c9;
}

.p-setac .p-setac__group:last-child { border-bottom: none; }

/* ---- ラベル群: Figma 417:4956 = flex-col / gap 2px / pt-6 pb-10 ---- */
.p-setac .p-setac__labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0 10px;
}

/* ---- 小見出し1行: 8px黒丸 + gap 4px / Bold 18px・行送り36px ---- */
.p-setac .p-setac__label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  color: var(--ac-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 36px;
}

@media screen and (max-width: 768px) {
  .p-setac .p-setac__label {
    font-size:15px;
  }
}

.p-setac .p-setac__label::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ac-ink);
}

/* ---- 項目: Medium 18px・行送り32px ---- */
.p-setac .p-setac__items {
  margin: 0;
  color: var(--ac-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  word-break: break-word;
}

@media screen and (max-width: 768px) {
  .p-setac .p-setac__items {
    font-size:15px;
  }
}

.p-setac .p-setac__item + .p-setac__item {
  margin-top: 5px;
}

/* ---- 注記群: Figma 417:4966 = flex-col / gap 2px / pt-10 ---- */
.p-setac .p-setac__notes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
}

/* ---- ※注記: 14px・行送り24px・※ ぶら下げ ---- */
.p-setac .p-setac__note {
  margin: 0;
  padding: 0 0 0 14px;
  text-indent: -14px;
  color: var(--ac-ink);
  font-size: 14px;
  line-height: 24px;
}

/* ---- Q&A 用（Figma 420:5661 / 420:5948 / 420:5970） ---- */
.p-setac .p-setac__answer {
  margin: 0;
  padding: 6px 0 10px;
  color: var(--ac-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;                 /* Figma: Q&Aの回答は 32px */
}

@media screen and (max-width: 768px) {
  .p-setac .p-setac__answer{
    font-size:15px;
  }
}

/* Q2: PC はテキスト+160px画像の横並び（Figma 408:3318 gap-20 items-start）、
   SP は縦積み */
.p-setac .p-setac__cols {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

.p-setac .p-setac__cols .p-setac__txt {
  flex: 1 1 0;
  min-width: 0;
}

.p-setac .p-setac__thumb {
  flex: 0 0 160px;
  width: 160px;
  height: 160px;
}

.p-setac .p-setac__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .p-setac .p-setac__cols {
    flex-direction: column;
    align-items: center;
  }
  .p-setac .p-setac__thumb { flex: 0 0 auto; }
}

.p-setac .p-setac__txt {
  margin: 0;
  color: var(--ac-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
}

@media screen and (max-width: 768px) {
  .p-setac .p-setac__txt {
    font-size:15px;
  }
}

.p-setac .p-setac__accent {
  margin: 10px 0 0;
  color: #a72126;
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
}

.p-setac .is-accent {
  color: #a72126;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. 印刷・その他
   -------------------------------------------------------------------------- */
@media print {
  .p-setac__body { display: block !important; }
}


/* --------------------------------------------------------------------------
   6. 今月のフェア実施店舗一覧
   -------------------------------------------------------------------------- */
.p-event-related-area__note {
  font-size: 0.8em;
}

.p-event-related-area {
  padding:0 4% 80px;
}