@charset "utf-8";

/* - TOP ログインモーダル
------------------------------------------------ */

.p-loginModal .c-modal__content {
  padding: 2rem;
}

.p-loginModal__icon {
  display: block;
  width: 2rem;
  height: auto;
  margin: 0 auto;
  margin-bottom: 1rem;
}

.p-loginModal__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 2.5rem;
  text-align: center;
  color: var(--red);
}

.p-loginModal__note {
  font-size: 1.125rem;

  margin-top: 1rem;
  text-align: center;
  color: var(--red);
}

@media screen and (max-width: 767.98px) {
  .p-loginModal__title {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .p-loginModal__note {
    font-size: 1rem;
  }
}

/* - TOP お店を探す
------------------------------------------------ */

.p-topSearchBox {
  width: 100%;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 1rem;
  padding-bottom: 2rem;

  margin-block: 5rem;
}

.p-topSearch__heading {
  width: 100%;
  padding-block: 1.125rem;
  background-color: #000;
  color: #fff;
  border-radius: 0.85rem 0.85rem 0 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
}

.p-topSearch__heading span {
  position: relative;
  padding-inline: 3.25rem;
}

.p-topSearch__heading span::before {
  position: absolute;
  content: "";
  display: inline-block;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 2.5rem;
  height: 2.5rem;
  background: url("/img/karakan/icon_search.svg") center / contain no-repeat;
}

.p-topSearch__title {
  position: relative;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  padding-left: calc(2.5rem + 0.5rem + 2rem);
  padding-right: 2rem;
}

.p-topSearch__title::before {
  position: absolute;
  content: "";
  display: inline-block;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);

  width: 2.5rem;
  height: 2.5rem;
  background: url("/img/karakan/icon_search-pen.svg") center / contain no-repeat;
}

.p-topSearch__input {
  padding-inline: 2rem;
}

.p-topSearch__input input {
  width: 100%;
  border: #d9d9d9;
  background-color: #f0f0f0;
  padding: 1rem;
  border-radius: 0.5rem;
}

.p-topSearch__linkBox {
  margin-top: 1.5rem;
  margin-bottom: 3.75rem;
  display: grid;
  gap: 5.25%;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  padding-inline: 2rem;
}

.p-topSearch__link {
  display: block;
  text-align: center;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 1rem;
  font-size: 1.25rem;

  padding-block: 3rem;
  padding-inline: 0.25rem;
}

.p-topSearch__link span {
  position: relative;
  padding-left: 3rem;
}

.p-topSearch__link span::before {
  position: absolute;
  content: "";
  display: inline-block;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 2.5rem;
  height: 2.5rem;
  background: center / contain no-repeat;
}

.p-topSearch__link--here span::before {
  background-image: url("/img/karakan/icon_search-here.svg");
}

.p-topSearch__link--condition span::before {
  background-image: url("/img/karakan/icon_search-condition.svg");
}

.p-topSearch__link--favorite span::before {
  background-image: url("/img/karakan/icon_search-favorite.svg");
}

.p-topSearch__link--shop span::before {
  background-image: url("/img/karakan/icon_search-shop.png");
}

.p-topSearch__btnWrap {
  padding-inline: 2rem;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 767.98px) {
  .p-topSearchBox {
    border: none;
    padding-bottom: 1rem;
    margin-block: 1rem;
  }

  .p-topSearch__heading {
    padding-block: 1rem;
    text-align: left;
    font-size: 1.125rem;
  }

  .p-topSearch__heading span {
    position: relative;
    padding-inline: 2.5rem;
  }

  .p-topSearch__heading span::before {
    left: 1rem;
    width: 1rem;
    height: 1rem;
  }

  .p-topSearch__title {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    padding-left: calc(1.25rem + 0.5rem + 1rem);
    padding-right: 1rem;
  }

  .p-topSearch__title::before {
    left: 1rem;
    width: 1.25rem;
    height: 1.25rem;
  }

  .p-topSearch__input {
    padding-inline: 1rem;
  }

  .p-topSearch__linkBox {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0rem;

    padding-inline: 0rem;
  }

  .p-topSearch__link {
    text-align: left;
    background-color: #fff;
    border: none;
    border-bottom: #f0f0f0 1px solid;
    border-radius: 0rem;
    font-size: 1rem;

    padding-block: 1rem;
    padding-inline: 1rem;
  }

  .p-topSearch__linkBox li:first-child > .p-topSearch__link {
    border-top: #f0f0f0 1px solid;
  }

  .p-topSearch__link span {
    padding-left: 1.5rem;
  }

  .p-topSearch__link span::before {
    width: 1rem;
    height: 1rem;
  }

  .p-topSearch__btnWrap {
    padding-inline: 1rem;
    display: flex;
    justify-content: center;
  }
}

/* - 現在地から探す
------------------------------------------------ */

.p-searchMapBox {
  max-width: 1072px;
  margin-inline: auto;
  padding-inline: 1rem;
  margin-top: 6.25rem;
}

.p-searchMap {
  width: 100%;
  border-radius: 1rem;
  /* [WO-KA-MAP-POLISH 2026-07-27] 黒2px枠 → 淡いカード枠(角丸に地図タイルをクリップ) */
  border: 1px solid #E1E7EC;
  box-shadow: 0 6px 20px rgba(16, 42, 67, 0.10);
  overflow: hidden;
  margin-bottom: 8rem;
}

.p-searchMap iframe {
  width: 100%;
  height: 600px;
  border-radius: 1rem;
}

@media screen and (max-width: 767.98px) {
  .p-searchMapBox {
    /* [WO-KA-MAP-POLISH 2026-07-27] 全ベタ → 左右に少し余白を作りカードを浮かせる */
    padding-inline: 0.75rem;
    margin-top: 0rem;
  }

  .p-searchMap {
    /* [WO-KA-MAP-POLISH 2026-07-27] スマホの枠なし全ベタ → 角丸+淡い枠+薄影でカード化 */
    border-radius: 14px;
    border: 1px solid #E1E7EC;
    box-shadow: 0 4px 14px rgba(16, 42, 67, 0.08);
    overflow: hidden;
    margin-bottom: 1rem;
  }

  .p-searchMap iframe {
    width: 100%;
    height: 300px;
    border-radius: 0rem;
  }
}

/* - 日時から探す
------------------------------------------------ */

.p-form__label--date,
.p-form__label--time,
.p-form__label--people,
.p-form__label--type {
  position: relative;
  padding-left: 2em;
}

.p-form__label--date::before,
.p-form__label--time::before,
.p-form__label--people::before,
.p-form__label--type::before {
  position: absolute;
  content: "";
  display: inline-block;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 1.5em;
  height: 1.5em;
  background: center / contain no-repeat;
}

.p-form__label--date::before {
  background-image: url("/img/karakan/icon_form-calendar.svg");
}

.p-form__label--time::before {
  background-image: url("/img/karakan/icon_form-time.svg");
}

.p-form__label--people::before {
  background-image: url("/img/karakan/icon_form-people.svg");
}

.p-form__label--type::before {
  background-image: url("/img/karakan/icon_form-type.svg");
}

@media screen and (max-width: 767.98px) {
  .c-form__reserveDate .c-form__item .c-form__select,
  .c-form__reserveDate .c-form__item .c-form__timeWrap,
  .c-form__reserveDate .c-form__item .c-form__calendar,
  .c-form__reserveDate .c-form__item .c-form__date {
    width: calc(100% - var(--label--sp));
  }

  .p-form__label--date,
  .p-form__label--time,
  .p-form__label--people,
  .p-form__label--type {
    position: relative;
    padding-left: 1.5em;
    width: var(--label--sp);
  }

  .p-form__label--date::before,
  .p-form__label--time::before,
  .p-form__label--people::before,
  .p-form__label--type::before {
    width: 1em;
    height: 1em;
  }
}

/* - クーポン/ルーム から選ぶ 共通リスト表示
------------------------------------------------ */

.p-couponModal__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.p-couponModal__item {
  border: 1px solid #f0f0f0;
  border-radius: 0.85rem;
}

.p-couponModal__link {
  display: flex;
  align-items: center;
}

/* 選択中が一目で分かるチェックボックス。画像の左に縦中央で置く (行タップで .selected トグル)。 */
.p-couponModal__check {
  flex-shrink: 0;
  margin-left: 0.6rem;
  margin-right: 0.6rem;
  width: 1.2rem;
  height: 1.2rem;
  border: 1.5px solid #c4c4c4;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  line-height: 1;
  color: transparent;
}
.p-couponModal__check::before {
  content: "\2713"; /* ✓ */
}
.p-couponModal__link.selected .p-couponModal__check {
  background: #007bff;
  border-color: #007bff;
  color: #fff;
}

.p-couponModal__item--grayOut {
  pointer-events: none;
  cursor: not-allowed;
}

/* 使用不可クーポンは中身だけ淡くし、理由の一文は読める濃さで残す
   (要素全体を薄くすると理由まで読めなくなるため) */
.p-couponModal__item--grayOut .p-couponModal__check,
.p-couponModal__item--grayOut .p-couponModal__img,
.p-couponModal__item--grayOut .p-couponModal__name,
.p-couponModal__item--grayOut .p-couponModal__limit {
  opacity: 0.3;
}

.p-couponModal__unusable {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #a50e0e;
}

.p-couponModal__img {
  width: 10rem;
  height: 10rem;
  flex-shrink: 0;
}

.p-couponModal__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.85rem 0 0 0.85rem;
}

.p-couponModal__textBox {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  justify-content: space-between;
}

.p-couponModal__name {
  font-size: 1.25rem;
  font-weight: 700;
}

.p-couponModal__text {
  font-size: 1.125rem;
}

.p-couponModal__note {
  color: var(--gray);
}

.p-couponModal__limit {
  color: var(--red);
  font-weight: 600;
}

.p-couponModalDatail__inner {
  display: flex;
  gap: 1.5rem;
}

.p-couponModalDatail__img {
  /* [WO-KA-COUPON-DETAIL-UX 2026-07-30 Naito] 旧 max-width:100% で画像が全幅になり縦を占有 →
     ファーストビューで名称/有効期限/適用ボタンが fold の下に隠れていた。上限を設けて縦占有を抑える
     (中央寄せは従来どおり)。SP はさらに下の @media で 12rem に絞る。 */
  max-width: 18rem;

  flex-shrink: 0;
  margin: 0 auto;
}

/* 画像は縮めた枠幅いっぱいに(切り抜かず全体表示)。枠が上限管理するため width:100% で追従。 */
.p-couponModalDatail__img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

.p-couponModalDatail__textBox {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  justify-content: space-between;
}

@media screen and (max-width: 767.98px) {
  .p-couponModal__list {
    gap: 0.85rem;
    padding-inline: 1.5rem;
  }

  .p-couponModal__textBox {
    padding: 1rem;
    font-size: 1rem;
  }

  .p-couponModal__img {
    width: 6rem;
    height: 6rem;
  }
  .p-couponModal__img img {
    width: 100%;
    height: 100%;
  }

  .p-couponModal__name {
    font-size: 1rem;
  }

  .p-couponModal__text,
  .p-couponModal__note,
  .p-couponModal__limit {
    font-size: 0.75rem;
  }

  .p-couponModalDatail__item {
    padding-inline: 1rem;
  }

  .p-couponModalDatail__inner {
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1rem;
  }

  /* [WO-KA-COUPON-DETAIL-UX 2026-07-30 Naito] SP は画面幅が狭く全幅画像の縦占有が特に大きいので
     さらに小さめ(約192px)に絞り、名称〜適用ボタンをファーストビュー寄りに引き上げる。 */
  .p-couponModalDatail__img {
    max-width: 12rem;
  }

  .p-couponModalModal__content .c-form__textBox {
    padding: 1rem 0rem;
    margin-inline: 1rem;
    border-bottom: var(--border);
  }
}

/* - ルームから選ぶ ( リスト / スライド 共通)
------------------------------------------------ */

.p-roomModal__item--grayOut {
  opacity: 0.3;
}

.p-roomModal__item--grayOut .p-roomModal__link {
  pointer-events: none;
  cursor: not-allowed;
}

.p-roomModal__name {
  font-size: 1.25rem;
  font-weight: 600;
}

.p-roomModal__text {
  font-size: 1.125rem;
}

@media screen and (max-width: 767.98px) {
  .p-roomModal__name {
    font-size: 1rem;
  }

  .p-roomModal__text {
    font-size: 0.75rem;
  }
}

/* - ルームから選ぶ (切り替えボタン)
------------------------------------------------ */

.p-roomModal__toggle {
  padding-top: 1rem;
  font-size: 0.625rem;
  position: absolute;
  top: 1rem;
  right: 3.5rem;
  font-weight: 600;
}

.js-roomToggle.is-list::before,
.js-roomToggle.is-slider::before {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.js-roomToggle.is-list::before {
  background: url("/img/karakan/icon-slider.svg") no-repeat center / contain;
}

.js-roomToggle.is-slider::before {
  background: url("/img/karakan/icon-list.svg") no-repeat center / contain;
}

@media screen and (max-width: 767.98px) {
  .p-roomModal__toggle {
    right: 3rem;
  }
}

/* - ルームから選ぶ (リスト表示) is-list
------------------------------------------------ */

.p-roomModal__list.is-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.p-roomModal__list.is-list .p-roomModal__item {
  border: 1px solid #f0f0f0;
  border-radius: 0.85rem;
}

.p-roomModal__list.is-list .p-roomModal__link {
  display: flex;
}

.p-roomModal__list.is-list .p-roomModal__img {
  width: 10rem;
  height: 10rem;
  flex-shrink: 0;
}

.p-roomModal__list.is-list .p-roomModal__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.85rem 0 0 0.85rem;
}

.p-roomModal__list.is-list .p-roomModal__textBox {
  padding: 1.5rem;

  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  justify-content: space-between;
}

.p-roomModal__list.is-list .p-roomModal__people {
  font-weight: 600;
}

.p-roomModal__list.is-list .p-roomModal__text,
.p-roomModal__list.is-list .p-roomModal__note,
.p-roomModal__list.is-list .c-form__btnWrap {
  display: none;
}

@media screen and (max-width: 767.98px) {
  .p-roomModal__list.is-list {
    gap: 0.85rem;
    padding-inline: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .p-roomModal__list.is-list .p-roomModal__img {
    width: 6rem;
    height: 6rem;
  }

  .p-roomModal__list.is-list .p-roomModal__img img {
    width: 100%;
    height: 100%;
  }

  .p-roomModal__list.is-list .p-roomModal__textBox {
    padding: 1rem;
    font-size: 1rem;
  }

  .p-roomModal__list.is-list .p-roomModal__people {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray);
  }
}

/* - ルームから選ぶ (スライド表示) is-slider 
------------------------------------------------ */

.p-roomModal__list.is-slider {
  position: relative;
}

.p-roomModal__list.is-slider .p-roomModal__img {
  width: 100%;
  height: 20rem;
  overflow: hidden;
}

.p-roomModal__list.is-slider .p-roomModal__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-roomModal__list.is-slider .p-roomModal__textBox {
  margin-top: 4rem;
}

.p-roomModal__list.is-slider .p-roomModal__text {
  margin-top: 2rem;
}

.p-roomModal__list.is-slider .p-roomModal__people {
  color: var(--gray);
  margin-top: 2rem;
}

.p-roomModal__list.is-slider .p-roomModal__note {
  color: var(--gray);
}

.p-roomModal__list.is-slider .p-roomModal__link {
  pointer-events: none;
  cursor: not-allowed;
}

.p-roomModal__list.is-slider .c-form__btnWrap {
  pointer-events: auto;
  cursor: auto;
}

.p-roomModal__item--grayOut .p-roomModal__link .c-form__btnWrap {
  pointer-events: none;
  cursor: not-allowed;
}

/* スライド 左右は半透明 */
.p-roomModal__list.is-slider .slick-slide {
  opacity: 0.3;
  transition: opacity 0.3s ease;
  padding: 0 1rem;
}

.p-roomModal__list.is-slider .slick-current {
  opacity: 1;
}

/* スライド ドット */
.p-roomModal__list.is-slider .slick-dots {
  position: absolute;
  top: 20.25rem;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
}

.p-roomModal__list.is-slider .slick-dots li {
  width: 1rem;
  height: 1rem;
  margin: 0 0.25rem;
}

.p-roomModal__list.is-slider .slick-dots li button {
  width: 1rem;
  height: 1rem;
}

.p-roomModal__list.is-slider .slick-dots li button:before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: #fff;
  border: var(--border);
  border-radius: 50%;
  display: block;
  opacity: 1
}

.p-roomModal__list.is-slider .slick-dots li.slick-active button:before {
  background-color: var(--primary);
}

@media screen and (max-width: 767.98px) {
  .p-roomModal__list.is-slider{
    padding-bottom: 1.5rem;
  }

  .p-roomModal__list.is-slider .slick-slide {
    padding: 0 0.5rem;
  }

  .p-roomModal__list.is-slider .p-roomModal__item {
    border: 1px solid #f0f0f0;
    border-radius: 0.85rem;
  }

  .p-roomModal__list.is-slider .p-roomModal__img {
    aspect-ratio: 300 / 190;
    width: 100%;
    height: auto;
    border-radius: 0.85rem 0.85rem 0 0;
  }

  .p-roomModal__list.is-slider .p-roomModal__textBox {
    padding: 1rem 1rem 0 1rem;
    margin-top: 0rem;
  }

  .p-roomModal__list.is-slider .p-roomModal__text {
    margin-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
  }

  .p-roomModal__list.is-slider .p-roomModal__people {
    font-size: 0.75rem;
    margin-top: 1rem;
  }

  .p-roomModal__list.is-slider .p-roomModal__note {
    font-size: 0.75rem;
  }

  /* スライド ドット */
  .p-roomModal__list.is-slider .slick-dots {
    top: auto;
    bottom: 0;
  }

  .p-roomModal__list.is-slider .slick-dots li {
    width: 0.85rem;
    height: 0.85rem;
    margin: 0 0.25rem;
  }

  .p-roomModal__list.is-slider .slick-dots li button,
  .p-roomModal__list.is-slider .slick-dots li button:before {
    width: 0.85rem;
    height: 0.85rem;
  }
}

/* - 機械から選ぶ
------------------------------------------------ */

.p-machineModal__radioList {
  display: flex;
  flex-direction: column;

  padding-inline: 1.5rem;
}

.p-machineModal__radioItem {
  font-size: 1.25rem;
  padding-block: 2.5rem;
}

.p-machineModal__radioItem + .p-machineModal__radioItem {
  border-top: var(--border);
}

@media screen and (max-width: 767.98px) {
  .p-machineModal__radioItem {
    font-size: 1rem;
    padding-block: 1rem;
  }
}

/* - コラボルーム_コース選択
------------------------------------------------ */

.p-collabRoom__radioItem {
  padding-bottom: 0;
}

/* [L-3] カード間は区切り線ではなく余白で分離 (デザイン準拠) */
.p-collabRoom__radioItem + .p-collabRoom__radioItem {
  padding-top: 0;
  border-top: none;
  margin-top: 1rem;
}

/* ラジオ自体は非表示 */
.p-collabRoom__radioBtn input[type="radio"] {
  display: none;
}

/* [L-3] カード型UI: 白背景・薄枠・角丸・左寄せ (全viewport共通) */
.p-collabRoom__radioBtn span {
  width: 100%;
  display: block;
  font-size: 1.25rem;
  border: var(--border);
  border-radius: 0.85rem;
  background: #fff;
  text-align: left;
  line-height: 1.6;
  cursor: pointer;
  padding: 1.25rem;
}

/* [L-3] 選択中: 枠強調 (ベタ塗りではなくプライマリ枠+内影)。テキストは黒のまま保持 */
.p-collabRoom__radioBtn input[type="radio"]:checked + span {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary) inset;
  background: #fff;
}

@media screen and (min-width: 768px) {
  .p-collabRoom__form .c-form__block {
    padding-bottom: 0rem;
  }
}

@media screen and (max-width: 767.98px) {
  .p-collabRoom__radioItem {
    padding-bottom: 0rem;

    margin-top: 1rem;
  }

  .p-collabRoom__radioItem + .p-collabRoom__radioItem {
    padding-top: 0rem;
    border-top: none;
  }

  /* [L-3] SP はカード内余白と文字サイズのみ調整 (枠・背景・角丸は基底を継承) */
  .p-collabRoom__radioBtn span {
    padding: 1rem;
    font-size: 1rem;
  }
}

/* - ご希望条件_フロア選択
------------------------------------------------ */

.p-floor__radioAvailable {
  width: 5rem;
  border-radius: 0.25rem;
  text-align: center;
  padding-block: 0.5rem;
  margin-inline: 0.5rem;

  background-color: var(--primary);
  color: #fff;
}

/* 満室時　is-full */
.p-floor__radioLabel.is-full input {
  pointer-events: none;
}

.p-floor__radioLabel.is-full {
  color: #bebebe;
  cursor: not-allowed;
}

.p-floor__radioLabel.is-full .p-floor__radioAvailable {
  background-color: #f0f0f0;
  color: #707070;
}

/* 「フロアから選ぶ」は1階層ごとに改行 (各ラベルを全幅=1行に)。
   c-form__radioWrap--flex の折返しだと複数フロアが横並びになるため。 */
.floor_select-box .p-floor__radioLabel {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 設備アイコンの開始起点を全行で揃える。階数ラベル
   (地下2階/1階/…) は幅が可変でアイコン開始位置がガタつくため、ラベルに固定 min-width を与え、
   最長ラベル(地下N階=4字) に満たない行は間隔が広がるだけで開始起点は一定にする (間隔は開いてよい)。 */
.floor_select-box .p-floor__name {
  min-width: 5em;
}

.p-floor__radioIconWrap {
  display: flex;
  gap: 0.5rem;
}

.p-floor__radioIconWrap img {
  width: 3.375rem;
}

@media screen and (max-width: 767.98px) {
  .c-form__block + .p-floor__formBlock {
    padding-top: 0;
  }

  .c-form__block:has(+ .p-floor__formBlock) {
    border-bottom: none;
    padding-bottom: 0;
  }

  .c-form__block:has(+ .p-floor__formBlock) .c-form__note {
    display: none;
  }

  .c-form__block + .p-floor__formBlock .p-floor__radioLabel {
    padding-left: 1.5rem;
  }

  .p-floor__radioAvailable {
    width: 3.125rem;
    font-size: 0.625rem;
    padding-block: 0.25rem;
  }

  .p-floor__radioIconWrap img {
    width: 2.25rem;
  }
}

/* - 空室代替え
------------------------------------------------ */

/* [WO-KA-ALT-MODAL-UI 2026-07-30 Naito] 満室(空室なし)モーダルを p-specialPlanModal に倣ってカード化・
   ボタン主従整理・× 重なり解消。全て .p-alternationModal / c-formModal スコープ下=他モーダル非波及。 */
.p-alternationModal__list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* 選択肢=淡い枠+やわらかい影の「カード」(価格比較カードと同質感)。 */
.p-alternationModal__item {
  padding: 1.35rem 1.15rem;
  border: 1px solid #ededed;
  border-radius: 0.85rem;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.06);

  text-align: center;
}

.p-alternationModal__item:last-child {
  padding-bottom: 1.35rem;
}

.p-alternationModal__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 0.85rem;
}

.p-alternationModal__title span {
  color: var(--red);
}

/* 代替時刻: 元時刻=ミュート取消線 / 候補=primary 強調。代替なし時は JS が本要素へ案内文を
   textContent で流し込む(span 無し)ため、素の状態はミュートの注記として読める字組みにしておく。 */
.p-alternationModal__time {
  margin: 0 0 1.1rem;
  color: var(--gray);
  font-size: 0.9rem;
  line-height: 1.7;
}

.p-alternationModal__time span {
  font-weight: 700;
  margin-inline: 0.4rem;
}

.p-alternationModal__time span.before {
  color: #a5a5a5;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: line-through;
}

.p-alternationModal__time span.after {
  color: var(--primary);
  font-size: 1.5rem;
}

.p-alternationModal__link {
  display: inline-block;
  font-size: 0.95rem;
  text-decoration: underline;
  margin-top: 0.85rem;
  color: var(--gray);
}

/* ボタン: 中央・幅そろえ・角丸 (p-specialPlanModal と同作法)。主動線=primary / 副動線=secondary は markup 側。 */
.p-alternationModal__item .c-form__btnWrap {
  margin-top: 1rem;
}

.p-alternationModal .c-btn {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  border-radius: 0.6rem;
  padding: 0.9rem;
  font-size: 1.05rem;
}

/* × と見出しの重なり解消: 見出しは中央寄せ+左右余白で × を避ける。 */
.p-alternationModal .c-formModal__heading {
  text-align: center;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

@media screen and (max-width: 767.98px) {
  .p-alternationModal .c-formModal__heading {
    font-size: 1rem;
    padding: 0.75rem 2.5rem;
  }

  /* SP は c-formModal__content の padding が 0 で見出しが最上部に来て × と重なる(本不具合の主因)。
     モーダル本体に上余白を足し、見出しを × の下へ確実に落とす。 */
  .p-alternationModal .c-formModal__content {
    padding-top: 2.75rem;
  }

  .p-alternationModal__list {
    padding-inline: 1.25rem;
    gap: 0.75rem;
  }

  .p-alternationModal__item,
  .p-alternationModal__item:last-child {
    padding: 1.1rem 1rem;
  }

  .p-alternationModal__title {
    font-size: 1rem;
    margin-bottom: 0.7rem;
  }

  .p-alternationModal__time {
    margin-bottom: 0.9rem;
  }

  .p-alternationModal__time span.after {
    font-size: 1.35rem;
  }

  .p-alternationModal__link {
    font-size: 0.9rem;
    margin-top: 0.7rem;
  }

  .p-alternationModal .c-form__btnWrap {
    padding: 0;
    margin-top: 0.85rem;
  }
}

/* - 予約情報 店舗情報
------------------------------------------------ */

.p-reservationInfo__item {
  display: flex;
  width: 100%;
}

.p-reservationInfo__item + .p-reservationInfo__item {
  margin-top: 2.5rem;
}

.p-reservationInfo__list dt {
  width: var(--label--pc);
}

.p-reservationInfo__list dd {
  width: calc(100% - var(--label--pc));
}

.p-reservationInfo__list dd a {
  color: var(--primary);
  text-decoration: underline;
}

.p-reservationInfo__list dd a.mapLink {
  color: var(--gray);
  font-size: 0.8em;
}

.p-reservationInfo__iconlist {
  display: flex;
  margin-top: 1.25rem;
  gap: 0.5rem;
}

.c-store__iconitem {
  width: 3rem;
}

@media screen and (max-width: 767.98px) {
  .p-reservationInfo__item + .p-reservationInfo__item {
    margin-top: 0.5rem;
  }

  .p-reservationInfo__list {
    font-size: 0.875rem;
  }

  .p-reservationInfo__list dt {
    width: 5rem;
  }

  .p-reservationInfo__list dd {
    width: calc(100% - 5rem);
  }

  .p-reservationInfo__iconlist {
    margin-top: 1rem;
  }
}


/* - 予約詳細
------------------------------------------------ */

.p-detail__btnWrap {
  margin-top: 3.75rem;
}
@media screen and (max-width: 767.98px) {

.p-detail__btnWrap  {
    padding: 1rem;
    margin-top: 0;
  }}

/* - 予約完了
------------------------------------------------ */

.p-complete__contentBox {
  padding-block: 5rem;
  padding-inline: 10.7692307692%;
}

.p-complete__heading {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 5rem;
}

.p-complete__copy {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 2.5rem;
}

.p-complete__text {
  color: var(--gray);
}

.p-complete__contentBox .c-form__btnWrap{
  padding: 0;
}

.p-complete__btn--google {
  background-color: #2393DB;
}

.p-complete__btn--line {
  background-color: #00c156;
}



@media screen and (max-width: 767.98px) {
  .p-complete__contentBox {
    padding-block: 2.5rem;
    padding-inline: 1.5rem;
  }

  .p-complete__heading {
    font-size: 1rem;
    margin-bottom: 2.5rem;
  }

  .p-complete__copy {
    text-align: justify;
    font-size: 0.875rem;
  }

  .p-complete__text {
    font-size: 0.75rem;
    margin-bottom: 1.5rem;
  }
}


/* shanghai -- 260212 */
hr{border-color: #F0F0F0;}
.pt_30{padding-top: 30px;}
.pb_30{padding-bottom: 30px;}
.pb_70{padding-bottom: 70px;}
.gap_10{gap: 10px;}
.gap_30{gap: 30px;}
.gap_100{gap: 100px;}
.mt0{margin-top: 0;}
.mt_15{margin-top: 15px;}
.mt_20{margin-top: 20px;}
.mt_25{margin-top: 25px;}
.mt_30{margin-top: 30px;}
.mt_40{margin-top: 40px;}
.mt_50{margin-top: 50px;}
.ml_50{margin-left: 50px;}
.c-form__radioWrap--flex.ml_50{width: calc(100% - 50px);}
.mt_70{margin-top: 70px;}
.mt_160{margin-top: 160px;}
.mr_30{margin-right: 30px;}
.min-h-36{min-height: 36px;}
.mb-3{margin-bottom: 1rem;}
.mb-4{margin-bottom: 1.5rem;}
.mb-5{margin-bottom: 3rem;}
.pb-2{padding-bottom: 0.5rem;}
.m_auto{margin: 0 auto;}
.d-flex{display: flex;}
.ai-c{align-items: center;}
.jc-l{justify-content: flex-start;}
.jc-c{justify-content: center;}
.jc-r{justify-content: flex-end;}
.w-100{width: 100%;box-sizing: border-box;}
.w_200{width: 200px;}
.f19{font-size: 19px;line-height: 1.5;}
.f20{font-size: 20px;line-height: 1.5;}
.f26{font-size: 26px;line-height: 36px;}
.tx-c{text-align: center;}
.td_u{text-decoration: underline;}
.c-btn--sm{width: 104px;height: 34px;font-size: 16px;line-height: 1.5;padding: 5px;box-sizing: border-box;background-color: var(--primary);}
/* login page */
.login-form{width: 492px;max-width: 100%;margin: 52px auto;}
.c-login_form__item+.c-login_form__item{margin-top: 35px;}
/* TOP page */
.c-store_infoItem{gap: 20px;font-size: 18px;line-height: 26px;}
.c-store_infoItem+.c-store_infoItem{margin-top: 20px;}
.c-store_infoItem dt{width: 100px;}
.c-store_infoItem dd{flex: 1;font-weight: normal;color: var(--gray);}
.c-btnBox{display: flex;flex-wrap: wrap;gap: 20px;}
/* .tran_box{position: relative;} */
.tran_box::after{content: '';width: 66px;height: 2px;background-color: #fff;position: absolute;bottom: 0;left: calc(50% - 33px);}
.icon_tran{width: 86px;position: absolute;bottom: -58px;left: calc(50% - 43px);}
.result_box{margin-top: 95px;}
.result_box_icon img{width: 117px;}
.c-modal__content_history { position: relative; width: 95%; max-width: 1040px; margin: 0 auto; z-index: 1001; max-height: 90dvh; overflow-y: auto; margin-top: 5dvh;scrollbar-width: none; scrollbar-color: transparent transparent;
  /* 空状態 + 下部「閉じる」ボタンを含めて視認性確保。
     li.l-contentBox--store 自身が白背景を持つ前提だったが、
     empty 状態 + 下部ボタン追加に伴い、コンテナ側で白背景 + padding を提供する。 */
  background-color: #fff;
  border-radius: 1rem;
  padding: 3rem 2rem 2rem;
}
.c-modal__content_history .js-recentlyEmptyCard {
  /* 空状態カードは内部の l-contentBox--store の境界を消して container と一体化 */
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 1rem 0;
  text-align: center;
}
.c-modal__content_history .js-recentlyEmptyCard .c-store__name {
  font-size: 1.25rem;
}
.c-modal__content_history .js-recentlyEmptyCard .c-store__explain {
  text-align: center;
  margin-top: 1rem;
  color: #666;
  line-height: 1.8;
}
.hide_scroll{scrollbar-width: none; scrollbar-color: transparent transparent;}
.form_select_choose{display: none;padding: 8px;}
.plan_time{display: none;padding: 8px;}
.machine_select-box{padding-left: 20px;margin-top: 20px;font-size: 18px;display: none;}
/* クーポン情報_決済情報 */
.selsect_coupons_box{border: 1px solid #dededf;border-radius: 10px; overflow: hidden;}
/* 選択中クーポンは縦列挙 (Splide 廃止)。 */
.selsect_coupons_list{list-style: none;margin: 0;padding: 0;}
.selsect_coupons_list .selsect_coupons_item + .selsect_coupons_item{border-top: 1px solid #dededf;}
.gary_ttl{background-color: #dededf;padding: 20px;text-align: center;}
.gary_ttl h3{font-size: 18px;line-height: 1.5;}
.selsect_coupons_cont{padding: 20px 50px;background-color: #fff8fb;}
.selsect_coupons_flex{border: 2px solid #da2729;border-radius: 10px; overflow: hidden;gap: 16px;background-color: #fff;}
.selsect_coupons_r{flex: 1;padding: 16px;gap: 16px;}
.selsect_coupons_text{flex: 1;}
.selsect_coupons_ttl {margin-bottom: 25px;}
.selsect_coupons_ttl h3{font-size: 18px;line-height: 1.5;font-weight: 600;}
.selsect_coupons_img img{height: 10vw;width: 100%;overflow: hidden;object-fit: cover;}
.selsect_coupons_text p{color: #707070;}
.selsect_coupons_btns{display: flex;flex-direction: column;justify-content: center;align-items: flex-end;gap: 8px;}
.selsect_coupons_btns .btn{font-size: 18px;line-height: 1.5;border-radius: 12px;}
.selsect_coupons_btns .btn_01{border: 2px solid #da2729; color:  #da2729;padding: 5px 36px;}
/* [後で治したいリスト No.24 2026-07-21] 「解除する」が #dededf (白背景に対しコントラスト比 約1.4:1)
   で薄すぎ、押せるボタンだと分からなかった。同じグレー系のまま濃度だけ上げる (約4.6:1 = WCAG AA)。
   枠線/見出し背景 (1344・1347・1348行) の #dededf は薄いままが正なので据え置き。 */
.selsect_coupons_btns .btn_02{border: 2px solid #767678; color:  #767678;padding: 5px 20px;display: flex;gap: 5px;}
.selsect_coupons_btns .btn_02 i{width: 20px;height: 20px;position: relative;}
.selsect_coupons_btns .btn_02 i::before,.selsect_coupons_btns .btn_02 i::after{content: '';width: 80%;height: 2px;background-color: #767678;position: absolute;left: 35%;top: 13px;}
.selsect_coupons_btns .btn_02 i::before{transform: rotate(45deg);}
.selsect_coupons_btns .btn_02 i::after{transform: rotate(-45deg);}

.credit-img{width: 100px;height: 100px;}

@media screen and (max-width: 767.98px) {
	.mt_50{margin-top: 30px;}
	.mt_70{margin-top: 30px;}
	.mt_160{margin-top: 100px;}
	.ml_50{margin-left: 30px;}
	.c-form__radioWrap--flex.ml_50{width: calc(100% - 30px);}
	.gap_100{gap: 20px;}
	.w_200{width: 170px;}
	.min-h-36{min-height: 30px;}
	.sp_mt_8{margin-top: 8px;}
	.sp_mt_16{margin-top: 16px !important;}
	.p-topSearch__heading{padding-block: 10px;}
	.c-btn--big{padding-block: 14px;}
	/* login page */
	.login-form{margin: 20px auto;}
	.forget_txt {font-size: 12px;}
	.c-login_form__item+.c-login_form__item{margin-top: 15px;}
	/* TOP page */
	.c-store_infoItem{gap: 10px;font-size: 12px;line-height: 1.5;}
	.c-store_infoItem+.c-store_infoItem{margin-top: 10px;}
	.c-store_infoItem dt{width: 55px;}
	.c-btnBox.mt_50{margin-top: 10px;}
	.c-btnBox{gap: 8px;}
	.c-btnBox .c-btn{max-width: calc(50% - 4px);}
	hr.mt_40{margin-top: 15px;}
	.c-store__iconitem{width: 27px;}
	.topSearch_hasitem>a {position: relative;}
	.topSearch_hasitem>a::after {content: "";width: 0.5rem; height: 0.5rem; border-top: solid 2px #000;border-right: solid 2px #000; position: absolute; right: 16px; top: 50%;transform: translateY(-50%) rotate(135deg);transition: all .3s;}
	.topSearch_hasitem>a.active::after{transform: translateY(-50%) rotate(-45deg);}
	.topSearch_showitem{display: none;}
	.topSearch_showitem .p-machineModal__radioItem{padding-block: 6px;}
	.topSearch_showitem .p-machineModal__radioItem + .p-machineModal__radioItem{border: none;}
	.topSearch_showitem .l-contentBox--store{border-bottom: 1px solid #f0f0f0;}
	.topSearch_showitem .l-contentBox--store:last-child{border-bottom: none;}
	.topSearch_showitem .l-contentBox + .l-contentBox{margin-top: 0;}
	
	.l-contentBox_search{border: 2px solid #1B282B;padding: 5px 12.5px 20px;}
	.l-contentBox_search .f20{font-size: 15px;}
	hr.mt_30{margin-top: 9px;border-color: #707070;}
	.l-contentBox_search .mt_25 {margin-top: 9px;}
	.icon_tran{width: 30px;position: absolute;bottom: -24px;left: calc(50% - 15px);}
	.tran_box::after{width: 27px;left: calc(50% - 14px);}
	.result_box{margin-top: 40px;}
	.p-store__list.mt_70{margin-top: 50px;padding-inline: 0;}
	.result_box_text .f26{font-size: 20px;margin-right: 20px;}
	.result_box_text .f19{font-size: 15px;}
	.customer_box{padding: 16px;border-bottom: 1px solid #F0F0F0;margin-top: 0;}
	.customer_box .c-form__title{font-size: 18px;margin-bottom: 1rem;}
	.customer_box .c-form__item, .customer_box .c-form__flexWrap > .c-form__item{padding: 0;border: none;gap: 10px;}
	.customer_box .c-form__label{font-size: 13px;}
	.c-btnWrap.mt_160 {margin-top: 0;}
	.c-form__radioWrap, .c-form__radioWrap--flex{gap: 10px;font-size: 15px;}
	.c-form__caution{font-size: 15px;}
	.machine_select-box{font-size: 13px;margin-top: 0;}
	.c-btn--sm{font-size: 10px;width: auto;height: auto;}
	.c-formConf__item{padding: 5px 0;border-bottom: none;font-size: 15px;}
  /* クーポン情報_決済情報 */
	.gary_ttl{padding: 10px;}
	.gary_ttl h3{font-size: 16px;}
	.selsect_coupons_cont{padding: 10px;}
	.selsect_coupons_flex{gap: 0;position: relative;padding-left: 40%;}
	.selsect_coupons_img{width: 40%;height: 100%;position: absolute;left: 0;}
	.selsect_coupons_img img{height: 100%;overflow: hidden;object-fit: cover;}
	.selsect_coupons_r{flex: auto;padding: 10px;gap: 10px;flex-direction: column;}
	.selsect_coupons_text{flex: auto;}
	.selsect_coupons_ttl {margin-bottom: 5px;}
	.selsect_coupons_ttl h3{font-size: 13px;line-height: 1.2;}
	.selsect_coupons_text p{font-size: 10px;line-height: 1.2;}
	.selsect_coupons_btns{gap: 3px;align-items: flex-start;}
	.selsect_coupons_btns .btn{font-size: 12px;line-height: 1.2;border-radius: 4px;display: block;}
	.selsect_coupons_btns .btn_01{border: 1px solid #da2729; color:  #da2729;padding: 2px 16px;}
	.selsect_coupons_btns .btn_02{border: none; padding: 0 10px;gap: 2px;margin-left: auto;display: inline-flex;}
	.selsect_coupons_btns .btn_02 i{width: 12px;height: 12px;}
	.selsect_coupons_btns .btn_02 i::before,.selsect_coupons_btns .btn_02 i::after{left: 35%;top: 7px;}

  .c-formModal__content_mid{top: 50%;transform: translateY(-50%);margin-top: 0;padding: 40px 20px;}
	.c-formModal__content_mid .c-formModal__heading{border-bottom: none;text-align: center;}
	.c-formModal__content_mid .p-alternationModal__list{padding: 0;}
	.c-formModal__content_mid .p-alternationModal__item + .p-alternationModal__item{border-top: none;}
  .credit-img{width: 50px;height: 50px;}
}
/* エラー */
input.error {
  border:2px solid #ff4d4f;
  background:#fff1f0;
}

/* 正常 */
input.valid {
  border:2px solid #52c41a;
  background:#f6ffed;
}

/* エラーメッセージ */
label.error {
  display:block;
  color:#ff4d4f;
  font-size:13px;
  margin-top:1px;
}

/* [後で治したいリスト No.25 2026-07-21] 決済方法欄は親 .c-form__item が display:flex のため、
   未選択時のエラー文言(label.error)と「※事前決済は当日のご予約のみ〜」の注記が
   PC では横並びになり見栄えが悪かった。どちらも 1 行占有させて縦に積む。
   (radio 群 .c-form__radioWrap--flex は既に width:100% で 1 行占有) */
.c-form__item--payment > label.error,
.c-form__item--payment > .c-form__text {
  width: 100%;
}

/* 非表示 */
.d-none {
  display: none !important;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.mx-1 {
  margin-right: 0.25rem !important;
}

.p-couponModal__link.selected {
    border-color: #007bff;
    box-shadow: 0 0 0 2px #007bff;
    background: rgba(0, 123, 255, 0.06);
}

/* 未選択のうちは「詳細はこちら」を非活性表示。 */
#go-to-detail:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 予約詳細=ご予約内容と店舗情報の間にキャンセルモーダルが挟まり
   .l-contentBox + .l-contentBox の隣接セレクタが効かず余白が消えるため、標準余白を明示付与(PC 5rem/SP 1rem)。 */
.p-detail__sectionGap {
  margin-top: 5rem;
}
@media screen and (max-width: 767.98px) {
  .p-detail__sectionGap {
    margin-top: 1rem;
  }
}

/* 日付選択(datepicker)タップ時に iOS が入力へフォーカスしてズームする
   のを防止する。iOS は font-size < 16px の入力へフォーカスすると自動ズームするため 16px を明示。 */
#datepicker {
  font-size: 16px;
  touch-action: manipulation;
}

/* [後で治したいリスト No.3 2026-07-21] 上のズーム対策は #datepicker だけに掛かっており、
   氏名・電話番号・メール・カード番号などのテキスト項目はフォーカス時に拡大していた
   (実機確認: 内藤 2026-07-21)。台帳の「全入力ボックスにて是正」に合わせ、文字入力を伴う
   コントロール全てに 16px を明示する。
   ★rem ではなく px で書く: 将来 html の font-size が変わっても 16px を割らないため
     (iOS の判定は実効 px)。既定も 1rem=16px のため見た目は変わらない。
   ★radio/checkbox は文字入力が無くズーム対象外なので触らない。
   ★決済代行(Epsilon)が iframe 内に描画するカード欄には、こちらの CSS は届かない。
     それでもカード欄が拡大する場合は Epsilon 側の対応が必要。 */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input:not([type]),
select,
textarea {
  font-size: 16px;
  touch-action: manipulation;
}

/* 詳細カルーセルの各画像左上に「N/M枚目」。 */
.p-couponModalDatail__img {
  position: relative;
}
.p-couponModalDatail__counter {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  padding: 0.2rem 0.7rem;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
}

.splide__pagination__page {
  background: #fff !important; /* 通常時の色 */
  border:1px solid #ccc !important;
}
.splide__pagination__page.is-active {
  background: #3498db !important; /* アクティブ時の色 */
  border:1px solid #ccc !important;
}

#main-splide {
  /* 画像+説明+備考を1スライドに内包したため全幅に (旧 50%=画像/テキスト横並び)。 */
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  position: relative;

  /* [ページネーション衝突対策] .splide__pagination は Splide 既定で position:absolute
     (bottom:0.5em) のため、要素自体に margin/padding を足しても通常フローの外にあり
     周囲の要素(下の備考・注意事項ボックス等)は一切動かない。ドット分の高さは
     「コンテナ側の padding-bottom」で確保するのが正しい直し方。 */
  padding-bottom: 2.25rem;
}

/* 上の padding-bottom で確保した余白の中にドットを収める。
   (Splide 既定の bottom:0.5em のままだと画像/テキスト直下=旧位置に残ってしまう) */
#main-splide .splide__pagination {
  bottom: 0.25rem;
}

/* 1スライド=画像+説明+備考を縦積み(要素全体がスワイプ対象)。 */
.p-couponModalDatail__slide {
  display: block;
}

.splide__slide {
  justify-content: center;
}

.splide__arrow--prev {
  left: 0.5em !important;
}
.splide__arrow--next {
  right: 0.5em !important;
}

/* 2枚以上のスワイプが分かりにくいため、矢印を濃色フローターで明示する。
   [矢印位置調整] 高さを固定値(6rem)にすると img の実高さに応じて中央がズレるため、
   img 読込後に JS (coupon.js centerArrowsOnImage) で top を動的算出する。
   ここでは JS 実行前 / img 未取得時のフォールバックとして 50%(コンテナ中央) を指定しておく。 */
#main-splide .splide__arrow {
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
  width: 2.6rem;
  height: 2.6rem;
  top: 50%;
}
#main-splide .splide__arrow svg {
  fill: #fff;
  width: 1.1rem;
  height: 1.1rem;
}
/* 1枚目の左矢印/最後の右矢印など押せない矢印は非表示にする
   (Splide は type:'slide' で端の矢印を disabled 化するため、それを display:none にする)。 */
#main-splide .splide__arrow:disabled {
  display: none;
}

/* [WO-KA-COUPON-DETAIL-UX 2026-07-30 Naito] クーポン詳細(c-detail)の適用ボタンを下部固定。
   スクロール位置に関わらず常時見える → 「最下段にボタンがあると気づけない」問題を根本解消。
   スクロール親は #coupon_modal .c-modal__content(overflow-y:auto)。当モーダル専用に閉じ、
   一覧ステップ(.c-list)や他画面の .c-form__btnWrap には一切波及しない(ID+.c-detail でスコープ)。 */
#coupon_modal .c-detail .c-form__btnWrap {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 1rem;
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -8px 18px -12px rgba(20, 30, 55, 0.35);
}

/* 「▼下に続きがあります」ヒント。固定ボタンより下(備考等)に続きがある時だけ JS で表示。
   sticky なボタン枠(=非static)を基準に absolute 配置し、常にボタンのすぐ上へ乗せる。
   JS は .ctp インライン(サーバ再描画で確実反映。coupon.js はキャッシュバスター無しのため触らない)。 */
#coupon_modal .p-couponModalDatail__scrollHint {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 0.5rem;
  z-index: 4;
  pointer-events: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.75rem;
  border-radius: 999px;
  background: rgba(20, 26, 38, 0.82);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  transition: opacity 0.25s ease;
}
#coupon_modal .p-couponModalDatail__scrollHint.is-hidden {
  opacity: 0;
}
.p-couponModalDatail__scrollHintChev {
  display: inline-block;
  animation: kaCouponHintBob 1.1s ease-in-out infinite;
}
@keyframes kaCouponHintBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .p-couponModalDatail__scrollHintChev { animation: none; }
}

/* 共通アラートモーダル(showKaAlert)の見た目を整える。 */
.p-kaAlert {
  padding: 2.5rem 1.75rem 2rem;
  text-align: center;
}
/* [後で治したいリスト No.5 2026-07-21] アラートは汎用モーダルの max-width:800px を
   継承しており、「次の項目をご選択ください」程度の短文が横に間延びして
   バランスが悪く見えていた。ダイアログ相当の幅に絞る。
   (SP は .c-modal__content の width:95% が先に効くため実質無影響) */
.c-modal__content.p-kaAlert {
  max-width: 34rem;
}
.p-kaAlert__icon {
  width: 3.4rem;
  height: 3.4rem;
  margin: 0.5rem auto 1.25rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 3.4rem;
  text-align: center;
}
.p-kaAlert__body {
  margin-bottom: 1.75rem;
}
.p-kaAlert__msg {
  font-size: 1.15rem;
  line-height: 1.9;
  color: #333;
}
.p-kaAlert .c-btnWrap {
  display: flex;
  justify-content: center;
}
.p-kaAlert .c-btn {
  min-width: 12rem;
}

/* ===== [WO-KA-CHEAPER-SUGGEST-UI 2026-07-29] 安価サジェスト提案モーダルの体裁 =====
   器 special_plan_modal.ctp は p-specialPlanModal__* を持つが CSS 未定義で、dt/dd が素の縦積み=
   価格比較に見えず「ダサい」状態だった([[karakan-frontend-patterns]] 品質バー)。現在プランは
   取り消し線+ミュート、提案プランはプライマリ色で強調し、差額(おトク額)を明示する。
   ★横 padding: デスクトップは c-modal__content の 5rem 3rem に依存。SP は c-formModal__content の
     padding が 0 になる(common.css:449)ため、下の SP メディアクエリで各セクションへ横 padding を足す。 */
.p-specialPlanModal__lead {
  line-height: 1.7;
  color: #333;
}
/* 価格比較カード: 淡い枠 + やわらかい影で「一枚のカード」に見せる。 */
.p-specialPlanModal__priceList {
  margin: 1.5rem 0 0;
  border: 1px solid #ededed;
  border-radius: 0.85rem;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.06);
}
.p-specialPlanModal__priceRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1.05rem 1.15rem;
}
.p-specialPlanModal__priceRow + .p-specialPlanModal__priceRow {
  border-top: 1px solid #eee;
}
.p-specialPlanModal__priceRow dt {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #666;
  min-width: 0; /* 長いプラン名が折り返せるように(金額は縮めない) */
}
.p-specialPlanModal__priceRow dd {
  font-size: 1.2rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0; /* 金額は常に原寸(ラベル側が折り返す) */
}
/* 現在プラン=過去の値。ラベルも金額もミュートして、下の提案行を主役にする。 */
.p-specialPlanModal__priceRow--current dt {
  color: #999;
}
.p-specialPlanModal__priceRow--current dd {
  color: #b0b0b0;
  font-weight: 500;
  text-decoration: line-through;
}
/* 提案プラン=主役。プライマリ色の淡い面 + 強調金額。 */
.p-specialPlanModal__priceRow--new {
  background: rgba(45, 176, 237, 0.08);
}
.p-specialPlanModal__priceRow--new dt {
  color: var(--primary);
  font-weight: 700;
}
.p-specialPlanModal__priceRow--new dd {
  color: var(--primary);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}
/* 差額(おトク額)=価値の焦点。プライマリ色のピル(チップ)で中央に置く。
   width:fit-content + margin:auto でテキスト幅に縮めて中央寄せ(SP の横 padding は不要)。 */
.p-specialPlanModal__savings {
  width: fit-content;
  max-width: 100%;
  margin: 1.15rem auto 0;
  padding: 0.4rem 1.2rem;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 10px rgba(45, 176, 237, 0.35);
}
.p-specialPlanModal__savings:empty {
  display: none;
}
.p-specialPlanModal__confirm {
  margin: 1.5rem 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #222;
}
.p-specialPlanModal .c-btnWrap {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: center;
}
.p-specialPlanModal .c-btn {
  width: 100%;
  max-width: 22rem;
  border-radius: 0.6rem;
  padding: 0.9rem;
}
@media screen and (max-width: 767.98px) {
  /* SP は c-formModal__content の padding が 0 のため、各セクションに横 padding/margin を自前で持たせる
     (savings はピルで margin:auto 中央寄せのため対象外) */
  .p-specialPlanModal__lead { padding: 0 1.25rem; }
  .p-specialPlanModal__priceList { margin-left: 1.25rem; margin-right: 1.25rem; }
  .p-specialPlanModal__confirm { padding: 0 1.25rem; }
  .p-specialPlanModal .c-btnWrap { padding: 0 1.25rem 0.5rem; }
}

.splide__slide img {
  width: 100%;
  display: block;
  object-fit: contain;
}

.splide__arrow svg {
  fill: #fff !important;
}

.splide__arrow {
  background: #000 !important;
}
.citem {
  display: none;
}

.citem.citem.p-couponModalDatail__textBox.is-active {
  display: flex;
}

.citem.c-form__textBox.is-active {
  display: block;
}