/* ============================================================
   04-components.css  ―  使い回す部品
   ------------------------------------------------------------
   見出し / ボタン / バッジ / カード / 帯 / 装飾 など
   ============================================================ */

/* ------------------------------------------------------------
   セクション見出し
   ------------------------------------------------------------ */
.sec-head { text-align: center; margin-bottom: var(--sp-xl); }

.sec-head__en {
  display: inline-block;
  font-family: var(--f-num);
  font-size: var(--fs-en);
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--c-pink);
  text-shadow: var(--glow-pink);
}
.sec-head__en::before,
.sec-head__en::after { content: "☾"; margin: 0 .6em; color: var(--c-gold); text-shadow: var(--glow-gold); }
.sec-head__en::after  { content: "✦"; }

.sec-head__ja {
  margin-top: var(--sp-xs);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}

.sec-lead {
  max-width: 34em;
  margin: var(--sp-m) auto 0;
  font-size: var(--fs-lead);
  color: var(--c-text-dim);
  line-height: 2;
}

/* セクション内の中見出し */
.sub-head {
  margin: var(--sp-xl) 0 var(--sp-m);
  text-align: center;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.6;
}

.sec-note {
  margin-top: var(--sp-m);
  font-size: var(--fs-small);
  color: var(--c-text-dim);
  line-height: 1.8;
}

/* ------------------------------------------------------------
   ボタン
   ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--c-pink);
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 62px;
  padding: .7em 1.6em;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: #fff;
  font-family: var(--f-pop);
  font-weight: 700;
  font-size: clamp(1rem, 4.2vw, 1.15rem);
  line-height: 1.4;
  text-align: center;
  box-shadow: var(--sh-pop);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-pop),
              box-shadow var(--t-fast) ease,
              filter var(--t-fast) ease;
}
.btn:hover  { transform: translateY(-2px); filter: brightness(1.05); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .28); }

/* 光が横切るツヤ */
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  animation: yd-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}

.btn__note {
  font-size: .74em;
  font-weight: 500;
  opacity: .92;
  letter-spacing: .02em;
}

.btn--line { --btn-bg: var(--c-line); animation: yd-glow-btn 2.8s ease-in-out infinite; }
.btn--full { display: flex; width: 100%; }
.btn--lg   { min-height: 74px; font-size: clamp(1.05rem, 4.6vw, 1.3rem); }

/* LINEアイコン */
.btn__icon {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.btn__icon svg { width: 1.35em; height: 1.35em; flex: none; fill: currentColor; }

/* URL未設定のあいだも見た目は本番と同じ（押しても遷移しないだけ） */
.btn[data-line-pending] { cursor: pointer; }

/* ------------------------------------------------------------
   バッジ / ピル / タグ
   ------------------------------------------------------------ */
.badges { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }

.badge {
  display: inline-block;
  padding: .3em .85em;
  border: 1px solid var(--c-gold);
  border-radius: var(--r-pill);
  font-family: var(--f-pop);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-gold);
  background: rgba(245, 199, 97, .08);
  white-space: nowrap;
}
.badge--pink { border-color: var(--c-pink); color: var(--c-pink-soft); background: rgba(255, 77, 157, .1); }

.pill {
  display: inline-block;
  padding: .35em 1em;
  border-radius: var(--r-pill);
  background: var(--c-panel);
  border: 1px solid var(--c-border-soft);
  font-size: var(--fs-small);
  font-family: var(--f-pop);
}

.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tags .pill { font-size: .86rem; padding: .3em .85em; }

/* ------------------------------------------------------------
   カード
   ------------------------------------------------------------ */
.card {
  position: relative;
  padding: var(--sp-m);
  border-radius: var(--r-l);
  background: var(--c-panel);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--sh-card);
  backdrop-filter: blur(2px);
}
.card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: var(--sp-xs);
}
.card__text { font-size: var(--fs-body); color: var(--c-text-dim); }

.grid {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                            .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 600px) and (max-width: 859px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------
   流れる帯（マーキー）
   ------------------------------------------------------------ */
.marquee {
  --speed: 26s;
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: .6rem;
  background: var(--c-pink);
  color: #fff;
  border-block: 2px solid rgba(255, 255, 255, .25);
  transform: rotate(-1.2deg);
  margin-block: var(--sp-l);
  user-select: none;
}
.marquee--gold { background: var(--c-gold); color: var(--c-brown); transform: rotate(1.2deg); }
.marquee__track {
  display: flex;
  flex: none;
  gap: 2rem;
  padding-right: 2rem;
  white-space: nowrap;
  animation: yd-marquee var(--speed) linear infinite;
}
.marquee--rev .marquee__track { animation-name: yd-marquee-rev; }
.marquee__item {
  font-family: var(--f-dela);
  font-size: clamp(.95rem, 4vw, 1.35rem);
  letter-spacing: .04em;
}
.marquee__item::after { content: "✦"; margin-left: 2rem; opacity: .7; }

/* ------------------------------------------------------------
   数字（カウントアップ）
   ------------------------------------------------------------ */
.num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .1em;
  font-family: var(--f-num);
  font-weight: 800;
  line-height: 1;
  color: var(--c-gold);
  text-shadow: var(--glow-gold);
}
/* 「円」「件」「週」「日〜」など。
   .num には font-size を指定していないので em は使わず、実寸で指定します */
.num__prefix,
.num__suffix {
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  font-weight: 700;
}
.num__value  { font-size: var(--fs-num); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   装飾（星・月・キラキラ）
   ------------------------------------------------------------ */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0;
}
.deco--moon  { color: var(--c-gold);  font-size: clamp(1.6rem, 6vw, 2.6rem); opacity: .55; }
.deco--star  { color: var(--c-pink);  font-size: clamp(1rem, 4vw, 1.6rem);   opacity: .5; }
.deco--sakura{ color: var(--c-pink-soft); font-size: clamp(1.2rem, 5vw, 2rem); opacity: .45; }

/* キラキラ粒子（JSが生成） */
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.particle {
  position: absolute;
  width: var(--size, 6px);
  height: var(--size, 6px);
  border-radius: 50%;
  background: var(--pcolor, var(--c-gold));
  box-shadow: 0 0 8px var(--pcolor, var(--c-gold));
  opacity: .6;
  animation: yd-float var(--dur, 7s) ease-in-out infinite,
             yd-sparkle var(--dur2, 3s) ease-in-out infinite;
}

/* 区切りの波 */
.divider {
  position: relative;
  height: 34px;
  background: repeating-linear-gradient(90deg,
    var(--c-pink) 0 14px, transparent 14px 28px);
  opacity: .25;
  -webkit-mask-image: radial-gradient(circle at 50% 0, #000 60%, transparent 61%);
          mask-image: radial-gradient(circle at 50% 0, #000 60%, transparent 61%);
}

/* ------------------------------------------------------------
   チェックリスト
   ------------------------------------------------------------ */
.checklist { display: grid; gap: .6rem; }
.checklist__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem 1rem;
  border-radius: var(--r-m);
  background: var(--c-panel);
  border: 1px solid var(--c-border-soft);
  font-size: var(--fs-body);
  line-height: 1.75;
}
.checklist__mark {
  flex: none;
  width: 1.5em; height: 1.5em;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-bg-deep);
  font-size: .8em;
  font-weight: 800;
  margin-top: .25em;
}

/* ------------------------------------------------------------
   アコーディオン（Q&A）
   ------------------------------------------------------------ */
.acc { display: grid; gap: .6rem; }
.acc__item {
  border-radius: var(--r-m);
  background: var(--c-panel);
  border: 1px solid var(--c-border-soft);
  overflow: hidden;
}
.acc__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: 1rem;
  text-align: left;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.7;
}
.acc__q {
  flex: none;
  width: 1.7em; height: 1.7em;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-pink);
  color: #fff;
  font-family: var(--f-num);
  font-size: .82em;
}
.acc__label { flex: 1; }
.acc__icon {
  flex: none;
  width: 1.1em; height: 1.1em;
  margin-top: .4em;
  position: relative;
}
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--c-gold); border-radius: 2px;
  transition: transform var(--t-fast) var(--ease-smooth);
}
.acc__icon::after { transform: rotate(90deg); }
.acc__item.is-open .acc__icon::after { transform: rotate(0); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--ease-smooth);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__body {
  padding: 0 1rem 1rem 3.4rem;
  font-size: var(--fs-body);
  color: var(--c-text-dim);
  line-height: 1.95;
}

/* ------------------------------------------------------------
   テーブル（募集要項）
   ------------------------------------------------------------ */
.dl-table {
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--c-border-soft);
}
.dl-table__row {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--c-border-soft);
}
.dl-table__row:last-child { border-bottom: 0; }
.dl-table__k {
  padding: .75rem 1rem .15rem;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--c-gold);
  letter-spacing: .04em;
}
.dl-table__v {
  padding: 0 1rem .9rem;
  font-size: var(--fs-body);
  color: var(--c-text-dim);
  line-height: 1.9;
}
@media (min-width: 700px) {
  .dl-table__row { grid-template-columns: 10.5em 1fr; }
  .dl-table__k { padding: 1rem; background: rgba(0, 0, 0, .2); }
  .dl-table__v { padding: 1rem; }
}

/* ------------------------------------------------------------
   写真フレーム（レトロな縁取り）
   ------------------------------------------------------------ */
.frame {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 2px solid var(--c-border);
  box-shadow: var(--sh-card);
  background: var(--c-bg-deep);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--tape::before,
.frame--tape::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 74px; height: 24px;
  background: rgba(245, 199, 97, .55);
  z-index: 2;
}
.frame--tape::before { left: 12px;  transform: rotate(-8deg); }
.frame--tape::after  { right: 12px; transform: rotate(7deg); }

/* ------------------------------------------------------------
   ブロマイド（レトロな紙焼き写真風）
   ------------------------------------------------------------
   <figure class="bromide">
     <div class="bromide__photo"><img …></div>
     <figcaption class="bromide__caption">…</figcaption>
   </figure>
   ・傾きは --tilt で調整（既定 -3deg）
   ・文字サイズや余白はカードの幅に比例（cqi = コンテナ幅の1%）
   ------------------------------------------------------------ */
.bromide {
  --tilt: -3deg;
  position: relative;
  margin: 0;
  container-type: inline-size;
  padding: 6% 6% 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .35), transparent 40%),
    var(--c-cream);
  border-radius: 3px;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, .5),
    0 2px 0 rgba(74, 44, 32, .25);
  rotate: var(--tilt);
  animation: yd-sway 7s ease-in-out 1.2s infinite;
}
.bromide__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: #d9cdb8;
  box-shadow: inset 0 0 0 1px rgba(74, 44, 32, .18);
}
.bromide__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* ほんのりセピアでレトロ感を足す */
  filter: sepia(.12) saturate(1.05) contrast(1.03);
}
.bromide__caption {
  padding: 4.5cqi 1cqi 5.5cqi;
  text-align: left;
  font-family: var(--f-base);
  /* カード幅に比例（スマホの小さいカードでも1行で収まる） */
  font-size: clamp(.5rem, 6.4cqi, 1.1rem);
  font-weight: 700;
  letter-spacing: .03em;
  overflow: hidden;
  line-height: 1.2;
  color: var(--c-brown);
  white-space: nowrap;
}
/* マスキングテープ（画像：assets/img/tape-pink.png / tape-gold.png）
   ・和紙の透け感・繊維・手でちぎった端を描いたPNG（背景透過）
   ・色は LP の --c-pink-soft（水玉）と --c-gold（ストライプ）
   ・角度は下の rotate で調整（写真の角を斜めに留める向き） */
.bromide::before,
.bromide::after {
  content: "";
  position: absolute;
  top: -5%;
  width: 40%;
  aspect-ratio: 360 / 104;
  z-index: 2;
  background: center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .28));
  pointer-events: none;
}
.bromide::before { left: -14%;  top: -1%; background-image: url("../img/tape-pink.png"); rotate: -34deg; }
.bromide::after  { right: -14%; top: -1%; background-image: url("../img/tape-gold.png"); rotate: 30deg; }