@charset "UTF-8";
html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  font-family: "M PLUS Rounded 1c", sans-serif;
  letter-spacing: 0;
  line-height: 1.5;
  background-color: #FFF6D9;
  color: #333333;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

h2 {
  font-size: 24px;
  font-weight: bold;
  color: #F25C05;
  text-align: center;
}

/* =========================================
   Header（ネストなし構成）
   ========================================= */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1200;
  background: linear-gradient(118deg, #f25c05, #f2b705);
  border-radius: 0 0 10px 10px;
}

.l-header__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 16px;
  max-width: 1080px;
  margin: 0 auto;
}

.l-header__logo {
  align-items: center;
  margin: 0 auto;
}

.l-header__logo img {
  width: 192px;
  height: auto;
  display: block;
}

.l-header__logo p {
  text-align: center;
  color: #FFFFFF;
}

/* ---------------- HMボタン（白4本線 → × アニメ） ---------------- */
.c-hm__checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.c-hm {
  position: absolute;
  right: 12px;
  /* 画面の左端寄せ */
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 28px;
  cursor: pointer;
  display: inline-block;
  z-index: 1210;
}

.c-hm__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.c-hm__bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: #fff;
  /* 白い線 */
  border-radius: 2px;
  transform-origin: 50% 50%;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease, bottom 0.25s ease;
}

/* 4本線の位置（均等） */
.c-hm__bar--1 {
  top: 0;
}

.c-hm__bar--2 {
  top: 8px;
}

.c-hm__bar--3 {
  top: 16px;
}

.c-hm__bar--4 {
  top: 24px;
}

/* チェック時：×に変形（1と4は消し、2と3でクロス） */
#nav-toggle:checked + .c-hm .c-hm__bar--1 {
  opacity: 0;
  transform: translateY(-6px);
}

#nav-toggle:checked + .c-hm .c-hm__bar--4 {
  opacity: 0;
  transform: translateY(6px);
}

#nav-toggle:checked + .c-hm .c-hm__bar--2 {
  top: 12px;
  transform: rotate(45deg);
}

#nav-toggle:checked + .c-hm .c-hm__bar--3 {
  top: 12px;
  transform: rotate(-45deg);
}

/* aria-expanded 連動のため（CSSだけで）：状態を反映 */
#nav-toggle:not(:checked) + .c-hm[aria-expanded=true] {
  aria-expanded: false;
}

/* ---------------- ドロワー（上部に展開） ---------------- */
.c-drawer {
  position: fixed;
  left: 0;
  right: 0;
  top: -100vh;
  /* 画面外に隠す */
  background: #FFF6D9;
  padding: 32px 24px 24px;
  /* ヘッダー下から始まるよう余白 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: top 0.3s ease;
  z-index: 1100;
  border-radius: 0 0 10px 10px;
}

/* チェックでドロワー展開：ヘッダー高さ＋少し余白 */
#nav-toggle:checked ~ .c-drawer {
  top: 60px;
}

.c-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.c-drawer__item + .c-drawer__item {
  margin-top: 18px;
}

.c-drawer__item a {
  font-weight: bold;
  font-size: 18px;
  color: #F25C05;
  text-decoration: none;
}

.c-drawer__item a:hover {
  text-decoration: underline;
}

/* ---------------- オーバーレイ（背景グレー固定） ---------------- */
.c-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 60px;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1000;
  /* ヘッダー<オーバーレイ<ドロワー */
}

#nav-toggle:checked ~ .c-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================
   Header アニメーションcss
   ========================================= */
/* スクロールで隠す用 */
.l-header {
  will-change: transform;
  transition: transform 0.25s ease;
}

.l-header.is-hidden {
  transform: translateY(-110%);
}

/* お好み：動き苦手ユーザー配慮 */
@media (prefers-reduced-motion: reduce) {
  .l-header {
    transition: none;
  }
}
/* =========================================================
   Footer
   ========================================================= */
.l-footer {
  width: 100%;
  margin-top: 64px;
}

/* ---------- 上部（ベージュ背景） ---------- */
.l-footer__top {
  background: #FFF6D9;
  padding-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  overflow-x: clip;
}

.l-footer__logo-block {
  text-align: center;
}

.l-footer__tagline {
  font-size: 12px;
  color: #F25C05;
  font-weight: bold;
}

.l-footer__logo {
  width: 180px;
  height: auto;
}

.l-footer__piyo {
  position: absolute;
  right: -42px;
  bottom: -40px;
  width: clamp(140px, 45vw, 200px);
  aspect-ratio: 1/1;
}

.l-footer__piyo-lottie {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(-1, 1);
}

/* ---------- 下部（グラデ背景＋ナビ） ---------- */
.l-footer__bottom {
  background: linear-gradient(118deg, #f25c05, #f2b705);
  padding: 40px 16px 32px;
  text-align: center;
  border-radius: 10px 10px 0 0;
}

/* フッターナビ */
.c-footer-nav {
  margin-bottom: 32px;
}

.c-footer-nav__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 18px;
}

.c-footer-nav__item {
  text-align: center;
}

.c-footer-nav__link {
  font-size: 14px;
  font-weight: bokd;
  color: #FFFFFF;
  text-decoration: none;
}

.c-footer-nav__link:hover {
  text-decoration: underline;
}

/* コピーライト */
.l-footer__copy {
  font-size: 11px;
  color: #FFFFFF;
  margin-top: 20px;
}

/* =========================================================
   page
   ========================================================= */
/* フッターを画面下に押し下げる */
.l-page {
  min-height: 100svh;
  /* iPhone対策でsvh推奨 */
  display: flex;
  flex-direction: column;
}

.l-page__main {
  flex: 1 0 auto;
}

.u-container {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 24px;
}

.u-text-center {
  text-align: center;
}

.u-text-right {
  text-align: right;
}

.u-flex {
  display: flex;
}

.u-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-mt-0 {
  margin-top: 0;
}

.u-mt-4 {
  margin-top: 4px;
}

.u-mt-8 {
  margin-top: 8px;
}

.u-mt-16 {
  margin-top: 16px;
}

.u-mt-24 {
  margin-top: 24px;
}

.u-mt-32 {
  margin-top: 32px;
}

.u-mt-64 {
  margin-top: 64px;
}

.u-mt-100 {
  margin-top: 100px;
}

.u-mt-128 {
  margin-top: 128px;
}

.u-mb-0 {
  margin-bottom: 0;
}

.u-mb-4 {
  margin-bottom: 4px;
}

.u-mb-8 {
  margin-bottom: 8px;
}

.u-mb-16 {
  margin-bottom: 16px;
}

.u-mb-24 {
  margin-bottom: 24px;
}

.u-mb-32 {
  margin-bottom: 32px;
}

.u-mb-64 {
  margin-bottom: 64px;
}

.u-mb-128 {
  margin-bottom: 128px;
}

.u-pt-0 {
  padding-top: 0;
}

.u-pt-4 {
  padding-top: 4px;
}

.u-pt-8 {
  padding-top: 8px;
}

.u-pt-16 {
  padding-top: 16px;
}

.u-pt-24 {
  padding-top: 24px;
}

.u-pt-32 {
  padding-top: 32px;
}

.u-pb-0 {
  padding-bottom: 0;
}

.u-pb-4 {
  padding-bottom: 4px;
}

.u-pb-8 {
  padding-bottom: 8px;
}

.u-pb-16 {
  padding-bottom: 16px;
}

.u-pb-24 {
  padding-bottom: 24px;
}

.u-pb-32 {
  padding-bottom: 32px;
}

.u-pb-64 {
  padding-bottom: 64px;
}

.u-radius-sm {
  border-radius: 6px;
}

.u-radius-md {
  border-radius: 10px;
}

.u-radius-lg {
  border-radius: 16px;
}

.u-radius-full {
  border-radius: 9999px;
}

.u-shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.u-shadow-md {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.u-shadow-lg {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.u-bg-base {
  background: #FFF6D9;
}

.u-bg-pink {
  background: #FFE2E8;
}

.u-bg-main {
  background: #F25C05;
}

.u-color-main {
  color: #F25C05;
}

.u-color-blue {
  color: #171776;
}

@media (min-width: 768px) {
  .u-mt-40 {
    margin-top: 40px;
  }
  .u-mb-40 {
    margin-bottom: 40px;
  }
  .u-pt-40 {
    padding-top: 40px;
  }
  .u-pb-40 {
    padding-bottom: 40px;
  }
}
.u-font-size-xxxs {
  font-size: 10px;
}

.u-font-size-xxs {
  font-size: 11px;
}

.u-font-size-xs {
  font-size: 12px;
}

.u-font-size-sm {
  font-size: 14px;
}

.u-font-size-md {
  font-size: 16px;
}

.u-font-size-lg {
  font-size: 18px;
}

.u-font-size-xl {
  font-size: 20px;
}

.u-font-size-xxl {
  font-size: 24px;
}

.u-color-main {
  color: #F25C05 !important;
}

.u-color-red {
  color: #A60321 !important;
}

.u-color-blue {
  color: #171776 !important;
}

.u-color-txt {
  color: #333333 !important;
}

.u-color-base {
  color: #FFF6D9 !important;
}

.u-color-pink {
  color: #FFE2E8 !important;
}

.u-color-white {
  color: #FFFFFF !important;
}

.u-color-gray {
  color: #c2c2c2 !important;
}

.u-bg-main {
  background: #F25C05 !important;
}

.u-bg-red {
  background: #A60321 !important;
}

.u-bg-blue {
  background: #171776 !important;
}

.u-bg-txt {
  background: #333333 !important;
}

.u-bg-base {
  background: #FFF6D9 !important;
}

.u-bg-pink {
  background: #FFE2E8 !important;
}

.u-bg-white {
  background: #FFFFFF !important;
}

.u-bg-gray {
  background: #c2c2c2 !important;
}

.u-border-main {
  border-color: #F25C05 !important;
}

.u-border-red {
  border-color: #A60321 !important;
}

.u-border-blue {
  border-color: #171776 !important;
}

.u-border-txt {
  border-color: #333333 !important;
}

.u-border-base {
  border-color: #FFF6D9 !important;
}

.u-border-pink {
  border-color: #FFE2E8 !important;
}

.u-border-white {
  border-color: #FFFFFF !important;
}

.u-border-gray {
  border-color: #c2c2c2 !important;
}

.u-txt_underline {
  text-decoration: underline;
}

.u-hidden {
  display: none !important;
}

.u-pre-line {
  white-space: pre-line;
}

.u-anim-float {
  transform: translateY(0);
  animation: float 2.6s ease-in-out infinite;
  will-change: transform;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}
/* ===== button ===== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-weight: bold;
  color: #FFF;
  border-radius: 10px;
  min-width: 180px;
  height: 40px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  padding: 10px 30px;
}

.c-btn:hover {
  filter: brightness(1.03);
  transform: translateY(1px);
}

.c-btn:active {
  transform: translateY(2px);
}

.c-btn--orange {
  color: #fff;
  background-image: linear-gradient(90deg, #F25C05 0%, #ffa300 100%);
}

.c-btn--white {
  color: #F25C05;
  background-color: #FFF;
  border: solid 1px #F25C05;
}

.arrow-orange {
  background-image: url(../img/common/icon_arrow_rigth_orange.svg);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
}

.arrow-white {
  position: relative;
}

.arrow-white::after {
  content: "";
  width: 10px;
  height: 7px;
  background-image: url("..//img/common/icon_arrow_rigth_white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.c-search {
  width: 100%;
  padding: 0 12px;
}

/* ===== card ===== */
.c-search__inner {
  position: relative;
  margin: 0 auto;
  max-width: 768px;
  background: #FFF;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* ===== title ===== */
.c-search__title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: bold;
  color: #F25C05;
  text-align: center;
}

/* ===== form layout ===== */
.c-search__form {
  display: grid;
  gap: 16px;
}

.c-search__field {
  display: grid;
  gap: 4px;
}

/* ボタンを中央寄せ */
.c-search__form .c-btn {
  justify-self: center;
}

/* label */
.c-search__label {
  font-size: 16px;
  font-weight: bold;
  color: #F25C05;
}

/* inputs (共通) */
.c-search__select,
.c-search__input {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  background: #fff7ef;
  border: 1px solid #F29F05;
  border-radius: 14px;
  outline: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.c-search__input::placeholder {
  color: #c2c2c2;
}

/* select: カスタム矢印 */
.c-search__select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url(../img/common/icon_arrow-orange.svg);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
  padding-right: 32px;
}

/* focus */
.c-search__select:focus,
.c-search__input:focus {
  border-color: #F25C05;
  box-shadow: 0 0 0 3px rgba(242, 92, 5, 0.18);
  background-color: #fff;
}

/* ==============================
   Cast search conditions
   ============================== */
.c-search__conditions {
  margin-top: 4px;
  padding-top: 10px;
}

.c-search__conditions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.c-search__conditions-label {
  font-size: 16px;
  font-weight: bold;
  color: #F25C05;
}

/* ▼ 三角アイコン */
.c-search__conditions-header {
  -webkit-appearance: none;
  appearance: none;
  background-image: url(../img/common/icon_arrow-orange.svg);
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 10px 7px;
  padding-right: 32px;
  border-bottom: 1px solid #f2c28a;
  padding-bottom: 8px;
}

/* ▼ 開いたとき：上向き矢印に切り替え */
.c-search__conditions-header.is-open {
  background-image: url(../img/common/icon_arrow-up_orange.svg);
}

.c-search__conditions-body {
  display: grid;
  gap: 10px;
}

/* グループ見出し + チェック群 */
.c-search__group {
  font-size: 13px;
}

.c-search__group-title {
  margin: 0 0 4px;
  font-weight: bold;
  color: #F25C05;
}

.c-search__checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-search__checkitem {
  margin: 0;
}

.c-search__checklabel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #333333;
}

/* チェックボックス本体 */
.c-search__checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #F25C05;
  /* 対応ブラウザでオレンジチェックに */
}

/* PCで少し余裕を出したい場合 */
@media (min-width: 768px) {
  .c-search__conditions-body {
    gap: 12px;
  }
}
/* =========================================
   c-job-card（サムネ付き・ネストなし構成）
   ========================================= */
.c-job-card__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  justify-content: center;
  gap: 32px 16px;
  list-style: none;
  padding: 0;
  max-width: 1080px;
  margin: 0 auto;
}

/* カード全体 */
.c-job-card {
  background-color: #ffffff;
  border-radius: 14px;
  border: 1px solid #F29F05;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  padding: 10px;
}

/* クリック範囲をカード全体に */
.c-job-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* サムネ（上部） */
.c-job-card__thumb {
  border-radius: 10px;
  aspect-ratio: 10/4;
  overflow: hidden;
  margin-bottom: 8px;
  background: #f3f3f3;
}

.c-job-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 上部のラベル群 */
.c-job-card__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.c-job-card__label {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  background-color: #F29F05;
  font-size: 11px;
  color: #ffffff;
  line-height: 1.2;
}

/* タイトル＋説明＋矢印の行 */
.c-job-card__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* 左側テキスト */
.c-job-card__text {
  flex: 1 1 auto;
  min-width: 0;
  /* はみ出し対策 */
}

.c-job-card__title {
  margin: 4px 0;
  font-size: 18px;
  font-weight: bold;
  color: #F25C05;
  line-height: 1.3;
}

.c-job-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

/* 右側の矢印アイコン */
.c-job-card__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background-image: url(../img/common/icon_arrow_rigth_orange.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 10px;
}

/* hover（任意：PCで気持ちよく） */
.c-job-card__link:hover .c-job-card__title {
  text-decoration: underline;
}

/* 押した感（任意） */
.c-job-card:active {
  transform: translateY(1px);
}

.c-cast-scroll_container {
  background: linear-gradient(118deg, #f25c05, #f2b705);
  border-radius: 10px;
}

.c-cast-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-top: 4px;
  padding-bottom: 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* スクロールバーの見た目 */
}
.c-cast-scroll::-webkit-scrollbar {
  height: 6px;
}
.c-cast-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.c-cast-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
}

/* 横スクロールの1枚（幅上限200） */
.c-cast-scroll__item {
  flex: 0 0 auto;
  width: min(200px, 70vw);
}

/* カードリンク全体 */
.c-cast-scroll__link {
  display: block;
  width: 100%;
  max-width: 200px;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  /* 画像の角丸を効かせる */
  text-decoration: none;
  color: inherit;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* 画像：縦4：横3（= aspect-ratio 3/4） */
.c-cast-scroll__link img {
  display: block;
  width: 100%;
  aspect-ratio: 3/3.5;
  /* 幅/高さ */
  object-fit: cover;
  object-position: center;
  border-radius: 16px 16px 0 0;
  /* 上だけ丸く */
  background: #f3f3f3;
  /* 画像読み込み前の下地 */
}

/* 名前 */
.c-cast-scroll__name {
  margin: 4px 10px 4px 10px;
  font-weight: bold;
  text-align: center;
  color: #F25C05;
  word-break: break-word;
}

/* 店舗名 */
.c-cast-scroll__shopname {
  margin: 0 10px 10px;
  font-size: 12px;
  text-align: center;
  color: #707070;
  word-break: break-word;
  line-height: 1;
  min-height: 2em;
}

/* ▼ギャラリー */
/* ギャラリーサムネ（button） */
.c-cast-scroll.c-cast-scroll--gallery .c-cast-scroll--gallery__item {
  flex: 0 0 auto;
  width: min(200px, 70vw);
  border: 0;
  border-radius: 16px;
  /* 外側（白）の角丸 */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
}

/* 画像：縦長枠に入れる／横長は拡大しない／画像の端を丸く */
.c-cast-scroll.c-cast-scroll--gallery .c-cast-scroll--gallery__item > img {
  display: block;
  object-fit: contain;
  /* 横長は拡大しない */
  object-position: center;
  border-radius: 16px;
  /* ★画像の角丸 */
  background: transparent;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transition: transform 180ms ease, box-shadow 180ms ease, outline-color 180ms ease;
}

/* 下のコメント（サムネ用） */
.c-cast-scroll--gallery__comment {
  display: block;
  font-size: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  /* 背景がオレンジなら白が見やすい */
  word-break: break-word;
}

/* hover（PCのみ） */
@media (hover: hover) and (pointer: fine) {
  .c-cast-scroll.c-cast-scroll--gallery .c-cast-scroll--gallery__item > img:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
}
/* フォーカス（キーボード操作） */
.c-cast-scroll.c-cast-scroll--gallery .c-cast-scroll--gallery__item:focus-visible {
  outline: 3px solid #F29F05;
  outline-offset: 2px;
}

/* hover（PCのみ） */
@media (hover: hover) and (pointer: fine) {
  .c-cast-scroll__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
}
@media (min-width: 1080px) {
  .c-cast-scroll {
    overflow: visible;
    justify-content: center;
    scroll-snap-type: none;
    margin: 0 auto;
    padding: 16px 0 24px;
  }
}
.c-breadcrumb {
  margin-top: 76px;
  margin-bottom: 16px;
  font-size: 14px;
}

.c-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
}

.c-breadcrumb__item {
  position: relative;
  display: flex;
  align-items: center;
}

.c-breadcrumb__item:not(:last-child)::after {
  content: ">";
  display: inline-block;
  margin: 0 4px;
}

.c-breadcrumb__link {
  text-decoration: none;
}

.c-breadcrumb__link:hover {
  text-decoration: underline;
}

.c-breadcrumb__current {
  color: #F25C05;
}

.c-shop-card {
  position: relative;
  max-width: 768px;
  background-color: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  margin: 0 auto;
}

.c-shop-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.c-shop-card__thumb {
  width: 100%;
  aspect-ratio: 10/4;
  overflow: hidden;
  background-color: #f3f3f3;
}

.c-shop-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 40%;
  display: block;
}

.c-shop-card__body {
  position: relative;
  padding: 20px 20px 20px;
  background-color: #fff;
}

.c-shop-card__logo {
  position: absolute;
  left: 10px;
  top: 15px;
  transform: translateY(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  background-color: #f3f3f3;
}

.c-shop-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-shop-card__name {
  margin: 0 0 12px 0;
  padding-left: 70px;
  /* ロゴ分の余白 */
  font-weight: bold;
  color: #F25C05;
  text-wrap: wrap;
}

.c-shop-card__info {
  margin: 0 0 10px 0;
}

.c-shop-card__row {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
}

.c-shop-card__row + .c-shop-card__row {
  margin-top: 4px;
}

.c-shop-card__label {
  width: 70px;
  flex-shrink: 0;
  color: #777;
}

.c-shop-card__text {
  flex: 1;
}

.c-shop-card__icon-map {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  background-image: url("..//img/shop/icon_map.svg");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.c-shop-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.c-shop-card__tag {
  font-size: 11px;
  color: #A60321;
}

.c-shop-card__actions {
  padding: 0 20px 20px;
}

@media (hover: hover) and (pointer: fine) {
  .c-shop-card {
    transform: translateY(0);
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .c-shop-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
}
/* ==============================
   Pagination
   ============================== */
.c-pagination {
  margin-top: 32px;
  text-align: center;
}

.c-pagination__list {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  height: 100%;
}

.c-pagination__item {
  min-width: 20px;
}

/* 数字ボタン（丸） */
.c-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 11px;
  text-decoration: none;
  color: #F25C05;
  background-color: #ffffff;
  border: none;
}

/* 現在ページ */
.c-pagination__item.is-current .c-pagination__link {
  background-color: #F25C05;
  color: #ffffff;
}

/* 省略記号 */
.c-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 13px;
  color: #F25C05;
}

/* 前へ・次へ矢印 */
.c-pagination__arrow {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* アイコン画像パスは環境に合わせて調整 */
.c-pagination__arrow--prev {
  background-image: url("..//img/common/icon_pagination_back.svg");
}

.c-pagination__arrow--next {
  background-image: url("..//img/common/icon_pagination_next.svg");
}

.c-pagination__item--prev,
.c-pagination__item--next {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 無効状態（前へ・次へ） */
.c-pagination__item.is-disabled .c-pagination__arrow {
  opacity: 0.3;
  pointer-events: none;
}

/* ホバー（PC用） */
@media (hover: hover) {
  .c-pagination__item--page:not(.is-current) .c-pagination__link:hover {
    background-color: #f5c05e;
    /* ベース色寄りの薄オレンジ */
  }
  .c-pagination__item:not(.is-disabled) .c-pagination__arrow:hover {
    opacity: 0.8;
  }
}
@media (min-width: 768px) {
  .c-pagination__list {
    gap: 16px;
    list-style: none;
    height: 100%;
  }
}
/* ===============================
     slickナビゲーション調整
     =============================== */
/* 左右の矢印 */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  cursor: pointer;
}

.slick-prev:hover,
.slick-next:hover {
  background: rgb(255, 255, 255);
}

/* 矢印アイコン（slick-theme.css未使用時） */
.slick-prev::before,
.slick-next::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 25px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='20' width='7.5' viewBox='0 0 192 512'><path fill='%23f25c05' d='M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(4px);
}

.slick-next::before {
  transform: rotate(180deg) translateX(4px);
}

/* 配置 */
.slick-prev {
  left: 10px;
}

.slick-next {
  right: 10px;
}

/* ---------------------------------------------------------

吹き出しデザイン
https://webspe.net/tools/speech-bubble/

---------------------------------------------------------- */
.c-speechBubble {
  position: relative;
  display: inline-block;
  margin-bottom: 4px;
  padding: 4px 8px;
  border: 1px solid #f25c05;
  border-radius: 9999px;
  background-color: #ffffff;
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;
  color: #f25c05;
}

.c-speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 19%;
  border-style: solid;
  border-width: 10px 5px 0 5px;
  border-color: #f25c05 transparent transparent;
  translate: -50% 100%;
  transform: skew(-14deg);
  transform-origin: top;
}

.c-speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 19%;
  border-style: solid;
  border-width: 7.8px 3.9px 0 3.9px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
  transform: skew(-14deg);
  transform-origin: top;
}

.c-speechBubble-2 {
  position: relative;
  display: inline-block;
  margin-bottom: 4px;
  padding: 4px 8px;
  border: 1px solid #f25c05;
  border-radius: 9999px;
  background-color: #ffffff;
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  color: #f25c05;
}

.c-speechBubble-2::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 80%;
  border-style: solid;
  border-width: 10px 0 0 10px;
  border-color: #f25c05 transparent transparent;
  translate: -50% 100%;
  transform: skew(-2deg);
  transform-origin: top;
}

.c-speechBubble-2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 80%;
  border-style: solid;
  border-width: 7.6px 0 0 7.6px;
  border-color: #ffffff transparent transparent;
  translate: calc(-50% + 0.2px) 100%;
  transform: skew(-2deg);
  transform-origin: top;
}

/* ---------------------------------------------------------

SNS動画 

---------------------------------------------------------- */
.c-sns {
  background: #fff7ef;
  padding-top: 64px;
  padding-bottom: 100px;
  position: relative;
}

.c-sns::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("..//img/top/bgsvg.svg") repeat;
  background-size: 260px 260px;
  opacity: 0.14;
}

.c-sns__inner {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}

/* 横スクロール本体 */
.c-sns__scroller {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 16px;
  padding-top: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* スクロールバー */
.c-sns__scroller::-webkit-scrollbar {
  height: 6px;
}

.c-sns__scroller::-webkit-scrollbar-track {
  background: transparent;
}

.c-sns__scroller::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
}

/* アイテム（div） */
.c-sns__item {
  flex: 0 0 200px;
  scroll-snap-align: start;
  text-decoration: none;
}

/* カード */
.c-sns-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  display: block;
  aspect-ratio: 9/16;
}

/* カード画像 */
.c-sns-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* バッジ */
.c-sns-card__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 1;
  background-repeat: no-repeat;
  /* リピートしない */
  background-position: center;
  /* 真ん中に1個 */
  background-size: 60% auto;
  /* アイコンサイズをバッジに合わせる */
}

/* Instagram アイコン */
.c-sns__item--instagram .c-sns-card__badge {
  background-image: url("..//img/top/icon_instagram.svg");
}

/* TikTok アイコン */
.c-sns__item--tiktok .c-sns-card__badge {
  background-image: url("..//img/top/icon_tictoc.svg");
}

/* PC調整 */
@media (min-width: 768px) {
  .c-sns {
    padding: 40px 32px 100px;
  }
  .c-sns__scroller {
    gap: 16px;
  }
  .c-sns__item {
    flex: 0 0 180px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .c-sns-card {
    transform: translateY(0);
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .c-sns-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
}
.c-result-count {
  color: #F25C05;
  font-size: 14px;
  margin: 0 auto;
  padding-top: 16px;
}

.c-result-count_num {
  font-weight: bold;
  font-size: 18px;
}

/* ==============================
   Component: Shop Info Card
   ============================== */
.c-info {
  background-color: #fff;
  border: 1px solid #F29F05;
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  margin: 16px 12px;
}

/* ---- head（ロゴ + 店名） ---- */
.c-info__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.c-info__logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.c-info__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-info__name {
  margin: 0;
  font-weight: bold;
  color: #F25C05;
  font-size: 18px;
}

/* ---- リード文 ---- */
.c-info__lead {
  margin: 8px 0 4px;
  font-weight: bold;
}

/* ---- 説明文 ---- */
.c-info__text {
  margin: 0 0 12px;
  font-size: 14px;
  color: #333333;
}

/* ---- SNSブロック ---- */
.c-info__sns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 8px;
  list-style: none;
  justify-content: flex-end;
}

.c-info__sns-item {
  width: 30px;
  height: 30px;
}

/* ---- タグ ---- */
.c-info__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.c-info__tag {
  font-size: 11px;
  color: #A60321;
}

/* ---- PC調整（768px〜） ---- */
@media (min-width: 768px) {
  .c-info {
    padding: 20px 20px 16px;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    /* 必要なら調整 */
  }
}
/* ---------- パネル本体 ---------- */
.c-tab {
  max-width: 768px;
  margin: 0 12px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #F29F05;
  border-radius: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* ---------- タブナビ ---------- */
.c-tab-nav {
  display: flex;
  justify-content: space-around;
  padding: 0 0 4px;
  margin: 0 0 16px;
  list-style: none;
  border-bottom: 1px solid #c2c2c2;
}

.c-tab-nav__item {
  margin: 0;
}

.c-tab-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 6px;
  border-radius: 100px;
  border: none;
  color: #c2c2c2;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  background: none;
}

/* アクティブタブ */
.c-tab-nav__btn.is-active {
  background-color: #F25C05;
  color: #ffffff;
}

/* PC で少し余白調整したい場合 */
@media (min-width: 768px) {
  .c-tab {
    margin: 0 auto;
  }
}
/* ===============================
   おすすめ店舗scroll
   =============================== */
.c-recommend {
  padding: 32px 0;
  background-color: #FFF6D9;
}

.c-recommend__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 12px;
}

/* 横スクロールエリア */
.c-recommend__scroller {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 4px 16px;
  margin: 16px -4px;
  /* 端が詰まりすぎないように */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* スクロールバー控えめ（お好みで） */
.c-recommend__scroller::-webkit-scrollbar {
  height: 6px;
}

.c-recommend__scroller::-webkit-scrollbar-track {
  background: transparent;
}

.c-recommend__scroller::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
}

/* 横スクロール用のカード調整 */
.c-shop-card--recommend {
  flex: 0 0 260px;
  /* カードの幅（スマホ基準） */
  max-width: 260px;
  margin-bottom: 0;
  /* 下の余白はスライダー側で管理 */
  scroll-snap-align: start;
}

.c-shop-card--recommend .c-shop-card__body {
  padding: 20px 10px;
}

.c-shop-card--recommend .c-shop-card__name {
  text-wrap: wrap;
  font-size: 16px;
  padding-left: 75px;
}

.c-shop-card--recommend .c-shop-card__info dt {
  font-size: 14px;
}

.c-shop-card--recommend .c-shop-card__info dd {
  font-size: 13px;
}

.c-cast-grid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  justify-content: center;
  gap: 16px 8px;
}

.c-cast-grid-card {
  display: block;
  margin: 0 auto;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  /* スクロール版と同じ：外周オレンジ縁取り */
  border: 1px solid rgba(226, 226, 226, 0.548);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* 画像エリア（scrollのimgと同じ比率） */
.c-cast-grid-card__thumb {
  width: 100%;
}

.c-cast-grid-card__thumb img {
  display: block;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 3/3.5;
  object-fit: cover;
  object-position: center;
  background: #f3f3f3;
}

/* 名前（白帯） */
.c-cast-grid-card__name {
  margin: 0;
  padding: 10px 10px 12px;
  font-weight: bold;
  text-align: center;
  color: #F25C05;
  word-break: break-word;
  line-height: 1.2;
}

/* 店舗名（任意：出す場合） */
.c-cast-grid-card__shopname {
  margin: -6px 0 0;
  padding: 0 10px 12px;
  font-size: 12px;
  text-align: center;
  color: #707070;
  word-break: break-word;
  line-height: 1.2;
  min-height: 2.4em;
}

/* hover（PCのみ） */
@media (hover: hover) and (pointer: fine) {
  .c-cast-grid-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
}
/* マップ外枠（薄いグレー背景・角丸） */
.c-area-map {
  background: #EBF1F2;
  border-radius: 16px;
  padding: 18px 16px;
}

/* SVGの収まり（中央寄せ＆レスポンシブ） */
.c-area-map__svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  max-width: 360px;
  /* 画面に合わせて調整OK */
}

/* 各ボックス：白背景 */
.c-area-map__svg .c-area-map__bg {
  fill: #ffffff;
}

/* 各ボックス：オレンジ枠（※このSVGは「枠=パス塗り」なのでfillでOK） */
.c-area-map__svg .c-area-map__border {
  fill: #F29F05;
}

/* 文字色 */
.c-area-map__svg .c-area-map__label {
  fill: #F25C05;
  font-size: 12px;
  font-family: rounded-mplus-1c-regular, "Rounded M+ 1c", sans-serif;
  letter-spacing: 0.05em;
}

/* クリックできる感じ */
.c-area-map__svg .js-area {
  cursor: pointer;
}

/* ほんのり浮く（画像の雰囲気寄せ） */
.c-area-map__svg .js-area .c-area-map__bg {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.08));
}

/* hover：背景を少しだけクリームに */
.c-area-map__svg .js-area:hover .c-area-map__bg {
  fill: #FFF6D9;
}

/* hover：枠を少し濃く（好みで） */
.c-area-map__svg .js-area:hover .c-area-map__border {
  fill: #F29F05;
}

/* focus（キーボード操作） */
.c-area-map__svg .js-area:focus-visible .c-area-map__border {
  stroke: #F25C05;
  stroke-width: 2;
}

/* 任意：フォーカスアウトライン消し */
.c-area-map__svg .js-area:focus {
  outline: none;
}

/* 選択状態を付けたい場合（JSで .is-active を付ける） */
.c-area-map__svg .js-area.is-active .c-area-map__bg {
  fill: #FFF6D9;
}

.c-area-map__svg .js-area.is-active .c-area-map__border {
  fill: #F25C05;
}

/* ===== セクション（オレンジ背景＋白タイトル） ===== */
.c-shop-pickup_container {
  background: #F29F05;
  border-radius: 10px;
}

/* ===== scroll ===== */
.c-shop-pickup {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 0;
}

.c-shop-pickup::-webkit-scrollbar {
  height: 6px;
}

.c-shop-pickup::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

.c-shop-pickup::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
}

/* ===== item (white card) ===== */
.c-shop-pickup__item {
  flex: 0 0 auto;
  width: min(260px, 70vw);
  scroll-snap-align: start;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}

/* ===== link area ===== */
.c-shop-pickup__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* ===== thumb ===== */
.c-shop-pickup__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
  background: #f2f2f2;
}

/* ===== body ===== */
.c-shop-pickup__body {
  padding: 8px 10px 4px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* 店名：2行までで揃える */
.c-shop-pickup__name {
  margin: 0;
  font-weight: bold;
  text-align: center;
  color: #F25C05;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.3;
  min-height: 2.6em;
}

/* tags */
.c-shop-pickup__tags {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.c-shop-pickup__tag {
  font-size: 12px;
  color: #A60321;
}

/* ===== actions (inside card) =====
   ここが高さ揃えの要：下に固定する
*/
.c-shop-pickup__actions {
  margin-top: auto;
  padding: 4px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  margin-left: auto;
}

/* note（中央＆薄め） */
.c-shop-pickup__actions .c-like-btn__note {
  margin: 0;
  color: rgba(0, 0, 0, 0.55);
}

.c-shop-pickup__actions .c-like-btn__note::before,
.c-shop-pickup__actions .c-like-btn__note::after {
  color: rgba(0, 0, 0, 0.3);
}

/* hover（PCのみ） */
@media (hover: hover) and (pointer: fine) {
  .c-shop-pickup__item {
    transform: translateY(0);
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .c-shop-pickup__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
}
/* ===== container ===== */
.c-like-btn__container {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

/* ===== note ===== */
.c-like-btn__note {
  margin: 0 auto;
  font-size: 12px;
  color: #707070;
  position: relative;
  padding: 0 10px;
}

.c-like-btn__note::before {
  content: "＼";
  position: absolute;
  left: -2px;
  top: -1px;
  color: #707070;
}

.c-like-btn__note::after {
  content: "／";
  position: absolute;
  right: -2px;
  top: -1px;
  color: #707070;
}

.c-like-btn__note--active {
  display: none;
}

.c-like-btn__container.is-active .c-like-btn__note--default {
  display: none;
}

.c-like-btn__container.is-active .c-like-btn__note--active {
  display: block;
}

/* note切り替え */
.c-like-btn__container.is-switching .c-like-btn__note {
  animation: like-note-fade 320ms ease both;
}

@keyframes like-note-fade {
  0% {
    transform: translateY(2px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* ===== button ===== */
.c-like-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-image: radial-gradient(#f29f05, #f25c05);
  border: none;
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  will-change: transform;
  transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.c-like-btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}

.c-like-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.048);
  outline-offset: 3px;
}

/* icon */
.c-like-btn__icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.c-like-btn__icon img {
  width: 16px;
  height: 16px;
  display: block;
}

/* count */
.c-like-btn__count {
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
  min-width: 26px;
  text-align: center;
}

/* text */
.c-like-btn__text {
  color: #ffffff;
  font-size: 12px;
  white-space: nowrap;
}

/* ===== active ===== */
.c-like-btn__container.is-active .c-like-btn {
  background: #bfbfbf;
  cursor: default;
  box-shadow: none;
}

.c-like-btn__container.is-active .c-like-btn__count,
.c-like-btn__container.is-active .c-like-btn__text {
  color: rgba(255, 255, 255, 0.95);
}

.c-like-btn__container.is-active .c-like-btn:active {
  transform: none;
}

/* ===== button exciting (ぷにっ＋ちょい揺れ) ===== */
.c-like-btn.is-animating {
  animation: like-pop 360ms ease both, like-jitter 520ms ease both !important;
}

@keyframes like-pop {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-1px) scale(1.08);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes like-jitter {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  14% {
    transform: translateY(-1px) scale(1.05) rotate(-0.6deg);
  }
  28% {
    transform: translateY(0) scale(1.03) rotate(0.6deg);
  }
  42% {
    transform: translateY(-1px) scale(1.04) rotate(-0.3deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
/* ===== ripple ring ===== */
.c-like-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  animation: like-ring 680ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

@keyframes like-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  18% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.35;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4);
  }
}
/* ===== sparkles ===== */
.c-like-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
  animation: like-spark 820ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  animation-delay: var(--d, 0ms);
}

.c-like-spark::before,
.c-like-spark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 3px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(0deg);
}

.c-like-spark::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

@keyframes like-spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }
  14% {
    opacity: 0.9;
  }
  75% {
    opacity: 0.35;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -52px))) scale(1.15) rotate(240deg);
  }
}
/* ===== text flip ===== */
.c-like-btn__text.is-flip {
  animation: like-text-flip 420ms ease both;
}

@keyframes like-text-flip {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
  60% {
    transform: translateY(4px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* 押した瞬間：アイコンと数字だけポンッ */
.c-like-btn.is-animating .c-like-btn__icon,
.c-like-btn.is-animating .c-like-btn__count {
  animation: like-badge-pop 420ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  will-change: transform;
}

@keyframes like-badge-pop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.5);
  }
  70% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}
/* hover：押したくなる“ふわっ”感（タッチ端末は除外） */
@media (hover: hover) and (pointer: fine) {
  .c-like-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.14);
    filter: brightness(1.03);
  }
  /* アイコン＆数字をほんのり強調 */
  .c-like-btn:hover .c-like-btn__icon,
  .c-like-btn:hover .c-like-btn__count {
    transform: scale(1.02);
  }
  /* 押した後はホバー無効 */
  .c-like-btn__container.is-active .c-like-btn:hover {
    transform: none;
    filter: none;
    box-shadow: none;
  }
}
/* hoverで拡大した子要素がスッと戻るように（常時） */
.c-like-btn__icon,
.c-like-btn__count {
  transition: transform 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .c-like-btn:hover {
    background-color: #ff6a1a;
    /* ほんのり明るめ */
  }
}
/* ===== ranking section ===== */
.c-shop-ranking {
  padding: 64px 12px;
  background-color: #fff7ef;
}

/* ===== list ===== */
.c-shop-ranking__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: center;
  gap: 32px 16px;
  list-style: none;
  padding: 0;
  max-width: 1080px;
  margin: 0 auto;
}

/* ===== item ===== */
.c-shop-ranking__item {
  position: relative;
}

/* ランキング用：バッジがカード外に少し出るので余白を確保 */
.c-shop-ranking__item .c-shop-card {
  position: relative;
  height: 100%;
}

/* ===== badge base ===== */
.c-shop-ranking__badge {
  position: absolute;
  top: -22px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* 1〜3位：SVG */
.c-shop-ranking__badge--1 img,
.c-shop-ranking__badge--2 img,
.c-shop-ranking__badge--3 img {
  width: 60px;
  height: 60px;
  display: block;
}

/* 4位以降：CSSで丸バッジ */
.c-shop-ranking__badge--num {
  background: #F29F05;
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
  width: 45px;
  height: 45px;
  left: 8px;
  top: -10px;
}

.c-shop-ranking__num {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
}

/* 4位以降を少し控えめに（好みで調整） */
.c-shop-ranking__badge--num {
  opacity: 0.95;
}

/* ============ Main Visual base ============ */
.p-mv {
  padding-top: 92px;
  max-width: 768px;
}

/* ===============================
   slick-main visual slider
   =============================== */
.p-mv {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

.p-mv_slide-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* slick適用後の各スライド */
.p-mv_slide-items li {
  position: relative;
  flex: 0 0 auto;
  /* 横並びに必要 */
  margin: 0 4px;
  /* 両側に6pxずつ → 合計12pxの余白 */
}

.p-mv_slide-items img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  min-width: 300px;
}

/* ===============================
     ドットナビゲーション
     =============================== */
.dots-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding: 10px 0 0 0;
}

.dots-wrap li {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.dots-wrap li:hover,
.dots-wrap li.slick-active {
  background: linear-gradient(118deg, #f25c05, #f2b705);
}

.dots-wrap li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}

@media (min-width: 768px) {
  .p-mv_slide-items img {
    max-width: 768px;
    margin: 0 auto;
  }
  .p-mv_slide-items .slick-slide {
    text-align: center;
  }
}
/* --- searchフォーム ピヨ配置--- */
.p-top-search__inner {
  position: relative;
}

.p-top_piyo__img1 {
  position: absolute;
  left: 1px;
  /* セクション左から */
  bottom: -120px;
  /* カードの外に少しはみ出す */
  width: 86px;
  /* 画像サイズ */
  pointer-events: none;
  /* クリックブロックしない */
  z-index: 2;
}

.p-top_piyo__img1 img {
  width: 100%;
  height: auto;
  display: block;
}

.p-top_piyo__note1 {
  transform: translate(70px, 20px);
}

/* ---------------------------------------------------------

SNS動画コンテンツ ピヨ配置 

---------------------------------------------------------- */
.p-top_piyo2 {
  text-align: right;
}

.p-top_piyo__note2 {
  transform: translate(-80px, 0);
}

.p-top_piyo__img2 {
  position: absolute;
  right: 10px;
  /* セクション左から */
  /* カードの外に少しはみ出す */
  width: 106px;
  /* 画像サイズ */
  pointer-events: none;
  /* クリックブロックしない */
  z-index: 2;
}

.p-top_piyo__img2 img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------------------------------------------------------

注目マッチョ

---------------------------------------------------------- */
/* ---------------------------------------------------------

話題の求人

---------------------------------------------------------- */
.p-top-job {
  position: relative;
  max-width: 1080px;
  margin: 32px auto;
  padding: 0 12px;
}

.p-top_piyo__img3 {
  position: absolute;
  left: 20px;
  /* セクション左から */
  top: -60px;
  /* カードの外に少しはみ出す */
  width: 110px;
  /* 画像サイズ */
  pointer-events: none;
  /* クリックブロックしない */
  z-index: 2;
}

.p-top_piyo__img3 img {
  width: 100%;
  height: auto;
  display: block;
}

.p-top_piyo__note3 {
  transform: translate(100px, -70px);
}

/* =====================================
  TOP: ヒーローエリア（検索 + MV）
  - SP：縦積み（HTML順）で表示
  - TB以上（768px〜）：横並び表示
  - PC時は検索を左 / MVを右にしたいので order で入れ替える
  ※ HTML構造は変更せず、表示順だけCSSで制御
===================================== */
@media (min-width: 768px) {
  .p-top-hero {
    display: flex;
    gap: 24px;
    align-items: stretch;
    max-width: 1080px;
    margin: 80px auto 0 auto;
    padding: 0 16px;
  }
  /* 検索を左へ */
  .p-top-search {
    order: 1;
    flex: 1 1 50%;
    min-width: 0;
  }
  /* MVを右へ */
  .p-mv {
    order: 2;
    flex: 1 1 50%;
    min-width: 0;
  }
}
.p-shop-list {
  padding: 0 12px;
  max-width: 1080px;
  margin: 0 auto;
}

.p-shop-list__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: center;
  gap: 16px;
}

/* 結果リスト */
.p-shop-list__results .c-shop-card {
  margin-top: 16px;
}

/* ===============================
   slick-main visual slider
   =============================== */
.p-shop-detail_mv_slide {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

/* 1枚分の「枠」：比率固定 */
.p-shop-detail_mv_slide-img {
  position: relative;
  width: 100%;
  aspect-ratio: 428/320;
  /* ★ ここで比率を固定（4:3付近） */
  overflow: hidden;
}

/* 中の画像は枠いっぱいに伸ばしてトリミング */
.p-shop-detail_mv_slide-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 元画像がバラバラでも OK */
  display: block;
}

/* サムネ全体の横並び */
.p-shop-detail_mv_slide-thumbnais {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
}

/* 1枚分のサムネ枠 */
.p-shop-detail_mv_slide-thumbnai {
  position: relative;
  width: 80px;
  /* お好みで */
  aspect-ratio: 4/3;
  /* 比率固定 */
  overflow: hidden;
  cursor: pointer;
}

/* サムネ画像もトリミング */
.p-shop-detail_mv_slide-thumbnai img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.p-shop-detail_mv_slide-thumbnai {
  opacity: 0.3;
  transition: opacity 0.3s linear;
}

.p-shop-detail_mv_slide-thumbnais .slick-current {
  opacity: 1;
}

@media (min-width: 768px) {
  .p-shop-detail_mv_slide-imgs {
    max-width: 768px;
    /* ★ MV の最大幅 */
    margin: 0 auto;
  }
  .p-shop-detail_mv_slide-img {
    border-radius: 8px;
  }
  .p-shop-detail_mv_slide-thumbnais {
    border-radius: 8px;
    max-width: 1080px;
    margin: 12px auto 0 auto;
  }
  .p-shop-detail_mv_slide-thumbnai {
    width: 172px;
    /* ＝ 180px - gap の補正
       → 6枚がピッタリ入る幅 */
  }
}
/* ==============================
   Shop Detail Tabs
   ============================== */
/* ---------- パネル本体 ---------- */
/* 非表示タブ（JSで hidden を付ける想定） */
.p-shop-detail-tabs__panel[hidden] {
  display: none;
}

/* ==============================
   店舗情報タブ（info）
   ============================== */
.p-shop-detail-info__map {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 20px;
}
.p-shop-detail-info__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 基本情報リスト */
.p-shop-detail-info__list {
  margin: 0 0 16px;
}

.p-shop-detail-info__row {
  display: grid;
  grid-template-columns: 5em 1fr;
  column-gap: 8px;
  margin-bottom: 4px;
  font-size: 14px;
}

.p-shop-detail-info__label {
  font-weight: bold;
}

/* 注意書き */
.p-shop-detail-info__note {
  margin: 8px 0 32px;
  padding: 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 10px;
  background-color: #f3f3f3;
  color: #F25C05;
}

/* 料金ブロック */
.p-shop-detail-info__price {
  margin-top: 8px;
}

.p-shop-detail-info__section-title {
  margin: 16px 0 4px;
  font-weight: bold;
  color: #F25C05;
}

.p-shop-detail-info__price-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}

.p-shop-detail-info__price-value {
  font-weight: bold;
}

.p-shop-detail-info__text {
  font-size: 14px;
}

/* ==============================
     castタブ
     ============================== */
.p-shop-detail-tabs__panel .c-cast-grid-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* ==============================
     クーポンタブ
     ============================== */
/* クーポン一覧 */
.p-shop-detail-coupon-list {
  display: grid;
  gap: 16px;
}

/* 外側の土台（淡い背景＋大きめ角丸） */
.p-shop-detail-coupon {
  background-color: #FFF6D9;
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* 内側の枠付きカード */
.p-shop-detail-coupon__inner {
  position: relative;
  padding: 10px;
  border: 1px solid #F25C05;
  border-radius: 16px;
  text-align: center;
}

/* 左上のマッスルアイコン */
.p-shop-detail-coupon__inner::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -8px;
  width: 26px;
  height: 26px;
  background-image: url("../img/shop/icon_muscle_leftside.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* 右上アイコン（別クラスで制御） */
.p-shop-detail-coupon__inner-icon-right {
  position: absolute;
  top: -4px;
  right: -8px;
  width: 26px;
  height: 26px;
  background-image: url("../img/shop/icon_muscle_rightside.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* タイトル・テキスト類 */
.p-shop-detail-coupon__title {
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
}

.p-shop-detail-coupon__term {
  margin: 0 0 12px;
  font-size: 14px;
  color: #333333;
}

.p-shop-detail-coupon__link {
  font-size: 14px;
  color: #171776;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
}

/* ========== 
クーポンモーダル全体 ==========  */
.p-shop-detail-coupon-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 2000;
}

.p-shop-detail-coupon-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 背景タップで閉じるオーバーレイ */
.p-shop-detail-coupon-modal__overlay {
  position: absolute;
  inset: 0;
}

/* 中身 */
.p-shop-detail-coupon-modal__content {
  position: relative;
  width: 100%;
  z-index: 1;
  max-width: 768px;
}

/* ×ボタン */
.p-shop-detail-coupon-modal__close {
  position: absolute;
  right: -4px;
  top: -36px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #F25C05;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* 内側の枠（ベージュのカード） */
/* ヘッダー（ロゴ + COUPON） */
.p-shop-detail-coupon-modal__header {
  text-align: center;
  margin-bottom: 10px;
}

.p-shop-detail-coupon-modal__logo {
  margin: 0 auto;
}

.p-shop-detail-coupon-modal__label {
  margin-top: 4px;
  font-size: 24px;
  font-weight: bold;
  color: #F25C05;
  letter-spacing: 0.1em;
}

/* タイトル・期間・本文など */
.p-shop-detail-coupon-modal__title {
  margin: 12px 0 8px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.p-shop-detail-coupon-modal__term {
  margin: 0 0 10px;
  text-align: center;
  font-size: 14px;
}

.p-shop-detail-coupon-modal__body {
  font-size: 14px;
}

.p-shop-detail-coupon-modal__body p {
  margin: 0 0 4px;
}

.p-shop-detail-coupon-modal__note {
  margin: 16px 0 0;
  font-size: 14px;
  text-align: center;
  color: #A60321;
}

.p-shop-detail-coupon__detail {
  display: none;
}

/* モーダル内に移したときは強制表示 */
.p-shop-detail-coupon-modal__body .p-shop-detail-coupon__detail {
  display: block !important;
}

.p-shop-detail-coupon__detail-list {
  margin: 0 auto;
  max-width: 400px;
  padding: 0;
  text-align: left;
}

.p-shop-detail-coupon__detail-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.p-shop-detail-coupon__detail-row dt {
  min-width: 80px;
  font-weight: bold;
  font-size: 14px;
}

.p-shop-detail-coupon__detail-row dd {
  margin: 0;
  font-size: 14px;
  color: #333333;
}

/* ==============================
     キャスト一覧タブ
     ============================== */
/* ==============================
     求人情報タブ
============================== */
.p-shop-detail-job:not(:last-child) {
  margin-bottom: 40px;
}

.p-shop-detail-job__lead-title {
  color: #F25C05;
  font-weight: bold;
  margin-bottom: 8px;
}

.p-shop-detail-info__lead-text {
  font-size: 14px;
}

.p-shop-detail-job__lead {
  margin-bottom: 16px;
}

.p-shop-detail-job__list {
  margin: 0 0 8px;
}

.p-shop-detail-job__row {
  display: grid;
  grid-template-columns: 5em 1fr;
  column-gap: 16px;
  font-size: 14px;
  margin-bottom: 16px;
}

.p-shop-detail-job__label {
  font-weight: bold;
  color: #F25C05;
}

.p-shop-detail-job__value {
  color: #333333;
}

.p-shop-detail-job__note {
  margin: 8px 0 0;
  font-size: 12px;
  color: #F25C05;
}

.p-cast-list {
  padding: 0 12px;
}

.p-cast-list__results {
  max-width: 768px;
  margin: 0 12px;
}

.p-cast-list .c-result-count {
  max-width: 768px;
}

@media (min-width: 768px) {
  .p-cast-list__results {
    margin: 0 auto;
  }
}
.p-static {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 12px;
}

.p-static__text {
  margin-bottom: 16px;
  margin-top: 8px;
}

.p-static__heading {
  color: #F25C05;
  font-weight: bold;
}

.p-contact__title {
  max-width: 768px;
  margin: 0 auto 32px;
  padding: 0 12px;
  text-align: center;
}

/* カード全体 */
.c-contact-form {
  width: 100%;
}

.c-contact-form__inner {
  position: relative;
  margin: 0 12px;
  max-width: 768px;
  background: #ffffff;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* フォームレイアウト */
.c-contact-form__form {
  display: grid;
  gap: 16px;
}

.c-contact-form__field {
  display: grid;
  gap: 4px;
}

/* ラベル */
.c-contact-form__label {
  font-size: 16px;
  font-weight: bold;
  color: #F25C05;
}

/* テキスト入力 & セレクト共通 */
.c-contact-form__input,
.c-contact-form__select,
.c-contact-form__textarea {
  width: 100%;
  padding: 0 10px;
  background: #fff7ef;
  border: 1px solid #f29f05;
  border-radius: 14px;
  outline: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 14px;
  color: #333333;
}

/* 高さ（input / select） */
.c-contact-form__input,
.c-contact-form__select {
  height: 44px;
}

/* テキストエリア */
.c-contact-form__textarea {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 200px;
  /* スクショくらい */
  resize: vertical;
}

/* placeholder */
.c-contact-form__input::placeholder,
.c-contact-form__textarea::placeholder {
  color: #c2c2c2;
}

/* select: カスタム矢印 */
.c-contact-form__select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url(../img/common/icon_arrow-orange.svg);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
  padding-right: 32px;
}

/* focus */
.c-contact-form__input:focus,
.c-contact-form__select:focus,
.c-contact-form__textarea:focus {
  border-color: #F25C05;
  box-shadow: 0 0 0 3px rgba(242, 92, 5, 0.18);
  background-color: #ffffff;
}

/* プライバシー同意 */
.c-contact-form__privacy {
  font-size: 12px;
}

.c-contact-form__privacy-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.c-contact-form__checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #F25C05;
  /* 対応ブラウザでオレンジチェック */
}

.c-contact-form__privacy-text {
  color: #333333;
}

.c-contact-form__privacy-link {
  color: #F25C05;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ボタンを中央寄せ */
.c-contact-form__actions {
  margin-top: 8px;
  text-align: center;
}

.c-contact-form__actions .c-btn {
  min-width: 160px;
}

@media (min-width: 768px) {
  .c-contact-form__inner {
    margin: 0 auto;
    /* 必要なら調整 */
  }
}
/* サンクスページ*/
.p-contact--thanks__img {
  width: min(150px, 72vw);
  height: auto;
  display: block;
  margin: 32px auto;
}

.p-contact--thanks__note {
  color: #777;
  font-size: 12px;
  margin-top: 12px;
}

/* ==============================
   Cast detail page
   ============================== */
/* ==============================
   mv
   ============================== */
.p-cast-detail-mv {
  max-width: 768px;
  margin: 0 auto;
}

.p-cast-detail-mv__image {
  overflow: hidden;
}

.p-cast-detail-mv__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==============================
   キャストインフォ
   ============================== */
/* ==============================
   ギャラリー 
   ============================== */
.p-cast-detail-gallery {
  padding: 32px 0;
}

/* ==============================
   ギャラリー  モーダル
     ============================== */
.p-cast-detail-gallery-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 2000;
}

.p-cast-detail-gallery-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* overlay */
.p-cast-detail-gallery-modal__overlay {
  position: absolute;
  inset: 0;
}

/* コンテンツ */
.p-cast-detail-gallery-modal__content {
  position: relative;
  max-width: 640px;
  width: 100%;
  z-index: 10;
}

/* 閉じるボタン */
.p-cast-detail-gallery-modal__close {
  position: fixed;
  top: 100px;
  right: 16px;
  z-index: 20;
  background: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #F25C05;
}

/* figure */
.p-cast-detail-gallery-modal__figure {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.p-cast-detail-gallery-modal__image {
  width: 100%;
  height: auto;
  display: block;
}

/* ★追加：画像内コメント（下部オーバーレイ） */
.p-cast-detail-gallery-modal__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.72);
  /* 白の透かし */
  color: #333333;
  font-size: 14px;
  text-align: center;
  /* 2行くらいで綺麗に（必要なら） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* モーダル表示中は画面固定 */
body.is-modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* ===============================
     ナビゲーション（前後ボタン）
     =============================== */
.p-cast-detail-gallery-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7803921569) url("..//img/common/icon_pagination_next.svg") center/11px no-repeat;
  cursor: pointer;
  border: none;
  z-index: 20;
}

/* 前へ */
.p-cast-detail-gallery-modal__nav--prev {
  left: -18px;
  transform: translateY(-50%) rotate(180deg);
  background-position: calc(50% + 1px) center;
}

/* 次へ */
.p-cast-detail-gallery-modal__nav--next {
  right: -18px;
  background-position: calc(50% + 1px) center;
}

/* ===============================
     ドットナビ
     =============================== */
.p-cast-detail-gallery-modal__dots {
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0;
  z-index: 20;
}

.p-cast-detail-gallery-modal__dots li {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  /* 影は適宜 */
}

.p-cast-detail-gallery-modal__dots li:hover,
.p-cast-detail-gallery-modal__dots li.is-active {
  background: linear-gradient(118deg, #f25c05, #f2b705);
}

.p-cast-detail-gallery-modal__dots li button {
  display: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}

/* ===============================
     プロフィール
     =============================== */
.p-cast-detail-profile {
  padding: 32px 12px;
}

.p-cast-detail-profile__title {
  margin: 0 0 16px;
}

.p-cast-detail-profile__container {
  max-width: 768px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #F29F05;
  border-radius: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.p-cast-detail-profile__container__block + .p-cast-detail-profile__container__block {
  margin-top: 16px;
}

.p-cast-detail-profile__container__heading {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: bold;
  color: #F25C05;
}

.p-cast-detail-profile__container__list {
  margin: 0;
  padding: 0;
}

.p-cast-detail-profile__container__row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 8px;
  font-size: 14px;
}

.p-cast-detail-profile__container__row + .p-cast-detail-profile__container__row {
  margin-top: 8px;
}

.p-cast-detail-profile__container__term {
  font-weight: bold;
  color: #333333;
}

.p-cast-detail-profile__container__desc {
  margin: 0;
}

.p-cast-detail-profile__container__message {
  margin: 0;
  font-size: 14px;
}

/* ===============================
    在籍店舗
     =============================== */
.p-cast-detail-shop {
  padding: 0 12px 32px;
}

@media (min-width: 768px) {
  .p-cast-detail-mv__image {
    border-radius: 16px;
  }
  .p-cast-detail-profile__container {
    margin: 0 auto;
  }
}
@media (min-width: 1080px) {
  .p-cast-detail-gallery-modal__close {
    right: 20vw;
  }
}
/* =====================================
  Page: 404 Not Found (Macho Macho)
  - Static 404.html
  - With shared header/footer recommended
===================================== */
.p-404 {
  padding: 56px 16px 72px;
}

.p-404__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 16px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.p-404__badge {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #F25C05;
  color: #ffffff;
  font-weight: bold;
  position: relative;
  z-index: 1;
}

.p-404__title {
  margin: 0 0 10px;
  font-size: 20px;
  color: #F25C05;
  font-weight: 900;
  position: relative;
  z-index: 1;
}

.p-404__lead {
  margin: 0 auto 18px;
  color: rgba(0, 0, 0, 0.72);
  font-size: 14px;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

.p-404__media {
  width: 100%;
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
}

.p-404__img {
  width: min(150px, 72vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

.p-404__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin: 10px 0 0;
  position: relative;
  z-index: 1;
}

.p-404__btn {
  width: min(320px, 92%);
}

.p-404__note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.55);
  position: relative;
  z-index: 1;
}

/* TB+ */
@media (min-width: 768px) {
  .p-404 {
    padding: 84px 24px 96px;
  }
  .p-404__inner {
    padding: 34px 28px 28px;
  }
  .p-404__title {
    font-size: 26px;
  }
  .p-404__lead {
    font-size: 15px;
  }
  .p-404__actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  .p-404__btn {
    width: auto;
    min-width: 240px;
  }
}
/* motionを減らす設定の人にはアニメーション停止 */
@media (prefers-reduced-motion: reduce) {
  .p-404__img {
    animation: none;
  }
  .p-404__btn {
    transition: none;
  }
}

/*# sourceMappingURL=style.css.map */