/* ========================================
   Base / Variables
   ======================================== */
:root {
  --base-font-size: 16px;
  --sp-font-size: 14px;

  --main-color: #333333;
  --sub-color: #777777;
  --accent-color: #E95377;
  --accent-dark: #E53C64;
  --color-white: #FFFFFF;
  --color-black: #000000;

  --max-width-container: 2000px;
  --max-width-inner: 1100px;

  --gap-section: 80px;
  --gap: 24px;

  --font-noto: "Noto Sans JP", sans-serif;
  --font-mplus: "M PLUS 1p", sans-serif;
  --font-roboto: "Roboto", sans-serif;

  --fv-label-fs-sp: 12px;
  --fv-label-fs-pc: 16px;
  --fv-title-fs-sp: 26px;
  --fv-title-fs-pc: 33px;
  --fv-logo-w-sp: 306px;
  --fv-logo-w-pc: 400px;
  --fv-lead-fs-sp: 14px;
  --fv-lead-fs-pc: 17px;

  --fv-label-lh: 1.448;
  --fv-title-lh: 1.5;
  --fv-lead-lh: 1.7;
  --letter-spacing: 0.02em;

  --fv-pc-padding-block-start: 10px;
  --fv-pc-padding-block-end: 8px;
  --fv-sp-padding-block-start: 40px;
  --fv-sp-padding-block-end: 40px;
  --fv-sp-padding-inline: 40px;
  --fv-content-max-width-pc: 518px;
  --fv-gap-label-title-pc: 30px;
  --fv-gap-title-lead: 20px;
  --fv-gap-sp: 14px;
  --fv-download-gap-sp: 12px;
  --fv-download-gap-pc: 20px;
  --fv-download-btn-max-w: 171px;

  --about-gallery-img-w-sp: 78px;
  --about-gallery-img-h-sp: 100px;
  --about-gallery-img-w-pc: 110px;
  --about-gallery-img-h-pc: 141px;
  --about-gallery-gap: 14px;
  --about-gallery-duration: 20s;
  --about-gallery-speed: 80px;

  --fv-phone-front-w-sp: 141px;
  --fv-phone-front-h-sp: 289px;
  --fv-phone-back-w-sp: 110px;
  --fv-phone-back-h-sp: 224px;
  --fv-phone-offset-x-sp: 58px;
  /* 背面は手前より上（右背面はさらに少し上） */
  --fv-phone-back-bottom-sp: calc(var(--fv-phone-front-h-sp) - var(--fv-phone-back-h-sp) + 28px);
  --fv-phone-back-bottom-right-sp: calc(var(--fv-phone-front-h-sp) - var(--fv-phone-back-h-sp) + 44px);
  --fv-phone-area-w-sp: 260px;
  --fv-phone-area-h-sp: 300px;
  --fv-phone-title-gap-sp: 12px;
  --fv-content-overlap-sp: 52px;
  --fv-phones-z-sp: 0;
  --fv-content-z-sp: 2;
  --business-req-term-min-w: 220px;

  --fv-phone-front-w-pc: 212px;
  --fv-phone-front-h-pc: 434px;
  --fv-phone-back-w-pc: 165px;
  --fv-phone-back-h-pc: 336px;
  --fv-phone-offset-x-pc: 88px;
  --fv-phone-back-bottom-pc: calc(var(--fv-phone-front-h-pc) - var(--fv-phone-back-h-pc) + 42px);
  --fv-phone-back-bottom-right-pc: calc(var(--fv-phone-front-h-pc) - var(--fv-phone-back-h-pc) + 58px);
  --fv-phone-area-w-pc: 400px;
  --fv-phone-area-h-pc: 520px;

  --fv-carousel-duration: 0.9s;
  --fv-carousel-interval: 4000ms;

  --steps-figure-h: 266px;
  --steps-img-w-01: 196px;
  --steps-img-w-02: 167px;
  --steps-img-w-03: 167px;

  --header-bar-height: 66px;
  --header-padding-inline-pc: 30px;
  --header-padding-inline-sp: 20px;
  --header-logo-width: 94px;
  --header-logo-width-pc: 110px;
  --header-logo-gap: 20px;
  --header-logo-offset-top: 16px;
  --header-offset-sp: var(--header-bar-height);
  --header-offset-pc: var(--header-bar-height);
  --header-btn-cycle-duration: 4s;
  --header-btn-hover-duration: 0.28s;
  --header-btn-restore-duration: 0.3s;
  --header-btn-restore-easing: cubic-bezier(0.4, 0, 0.2, 1);

  --pattern-opacity: 0.2;
  --pattern-bg-repeat: repeat;
  --pattern-bg-position: top center;
  --breakpoint-pc: 1128px;

  --news-padding-block-sp: 30px;
  --news-padding-inline-sp: 20px;
  --news-padding-block-pc: 70px;
  --news-padding-inline-pc: 20px;
  --news-list-gap: 35px;
  --news-card-border-width: 3px;
  --news-card-radius: 10px;
  --news-card-padding-block-start: 40px;
  --news-card-padding-inline: 20px;
  --news-card-padding-block-end: 20px;
  --news-badge-offset-top: -21px;
  --news-badge-padding-block: 10px;
  --news-badge-padding-inline: 30px;
  --news-badge-fs: 18px;
  --news-badge-lh: 1.5;
  --news-body-gap: 10px;
  --news-text-fs-sp: 14px;
  --news-text-fs-pc: 16px;
  --news-text-note-fs-sp: 12px;
  --news-text-note-fs-pc: 14px;
  --news-text-lh: 1.5;
  --news-icon-size: 75px;

  --color-text-body: #231815;
  --color-pink-light: #FCE5EB;
  --color-label-app: #FFEA00;
  --color-label-card: #00D0FF;
  --color-placeholder: #D9D9D9;

  --radius-card: 20px;
  --radius-btn: 50px;
  --radius-panel: 20px;
  --btn-height: 36px;

  --sp-content-padding: 20px;
  --sp-section-gap: 20px;
  --sp-faq-item-gap: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--base-font-size);
}

body {
  margin: 0;
  padding-top: var(--header-offset-sp);
  color: var(--main-color);
  font-family: var(--font-mplus);
  line-height: 1.7;
}

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

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p,
h1,
h2,
h3 {
  margin: 0;
}

.wrapper {
  max-width: var(--max-width-container);
  margin: 0 auto;
}

.wrap {
  max-width: var(--max-width-inner);
  margin: 0 auto;
}

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

.pc_only {
  display: none;
}

/* レスポンシブ改行（br は display:inline を当てない） */
br.pc_only {
  display: none;
}

/* ========================================
   Header
   ======================================== */
.header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 100;
  width: 100%;
  max-width: var(--max-width-container);
  transform: translateX(-50%);
  background-color: var(--color-white);
}

.header_logo {
  position: absolute;
  top: var(--header-logo-offset-top);
  left: 0;
  z-index: 102;
  margin: 0;
  padding: 0;
}

.header_inner {
  position: relative;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: var(--header-bar-height);
  padding: 0 var(--header-padding-inline-sp);
  box-sizing: border-box;
}

.header_actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header_menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--accent-color);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.header_menu:hover,
.header_menu:focus-visible {
  background-color: var(--color-black);
}

.header_menu img {
  display: block;
  width: 24px;
  height: auto;
}

.header_panel {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--max-width-container);
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: var(--header-offset-sp) var(--header-padding-inline-sp);
  box-sizing: border-box;
  background-color: var(--color-white);
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.header_panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.header_panel[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .header_panel {
    transition: none;
  }
}

.header_panel ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.header_panel li {
  width: 100%;
  padding: 3vw 0;
  text-align: center;
  border-bottom: 3px dashed var(--accent-color);
}

.header_panel li:last-child {
  border-bottom: none;
}

.header_panel a {
  display: block;
  font-family: var(--font-noto);
  font-size: 7vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--accent-color);
  text-align: center;
  transition: color 0.3s ease;
}

/* 500px超〜1000px未満: 7vw(500px時) → 20px(1000px時) で線形補間 */
@media screen and (min-width: 501px) and (max-width: 999px) {
  .header_panel a {
    font-size: calc(50px - 3vw);
  }
}

@media screen and (min-width: 1000px) {
  .header_panel a {
    font-size: 20px;
  }
}

.header_panel a:hover {
  color: var(--color-black);
}

.gnav {
  display: none;
}

.header_logo a {
  display: block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.header_logo img {
  display: block;
  width: var(--header-logo-width);
  height: auto;
}

.header_logo a:hover {
  transform: translateY(5px);
}

@media (prefers-reduced-motion: reduce) {
  .header_logo a {
    transition: none;
  }

  .header_logo a:hover {
    transform: none;
  }
}

.gnav ul {
  display: flex;
  align-items: center;
  gap: 30px;
}

.gnav a {
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 700;
  line-height: var(--fv-label-lh);
  letter-spacing: var(--letter-spacing);
  color: var(--accent-color);
  transition: color 0.3s ease;
}

.gnav a:hover {
  color: var(--color-black);
}

.header_btn {
  margin: 0;
  flex-shrink: 0;
}

.header_btn_link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-height);
  padding: 0 20px;
  border-radius: var(--radius-btn);
  background-color: var(--color-black);
  overflow: hidden;
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 700;
  line-height: var(--fv-label-lh);
  letter-spacing: var(--letter-spacing);
  color: var(--color-white);
}

.header_btn_fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.header_btn_fill--pink {
  z-index: 1;
  background-color: var(--accent-color);
  clip-path: inset(0 100% 0 0);
  animation: header-btn-pink-clip var(--header-btn-cycle-duration) linear infinite;
}

.header_btn_fill--black {
  z-index: 2;
  background-color: var(--color-black);
  clip-path: inset(0 0 0 0);
  animation: header-btn-black-clip var(--header-btn-cycle-duration) linear infinite;
}

.header_btn_label,
.header_btn_icon {
  position: relative;
  z-index: 10;
  color: var(--color-white);
}

.header_btn_icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.header_btn_icon img {
  display: block;
  width: 17px;
  height: 17px;
}

/* 左端から右へワイプ。切替は短く、切替後はインターバルを長く */
@keyframes header-btn-pink-clip {
  0%,
  28% {
    clip-path: inset(0 100% 0 0);
  }

  /* 黒→ピンク（約0.3秒） */
  35%,
  72% {
    clip-path: inset(0 0 0 0);
  }

  /* 黒で覆い終わってからリセット（62→69%で縮まないよう同一値を維持） */
  73%,
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes header-btn-black-clip {
  0%,
  28%,
  69%,
  100% {
    clip-path: inset(0 0 0 0);
  }

  /* 右へ抜ける（約0.3秒） */
  35%,
  62% {
    clip-path: inset(0 0 0 100%);
  }

  63% {
    clip-path: inset(0 100% 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header_btn_fill--pink,
  .header_btn_fill--black {
    animation: none;
  }

  .header_btn_fill--pink {
    clip-path: inset(0 100% 0 0);
  }

  .header_btn_fill--black {
    clip-path: inset(0 0 0 0);
  }

  .header_btn_link.is-hover .header_btn_fill--pink {
    clip-path: inset(0 0 0 0);
  }

  .header_btn_link.is-hover .header_btn_fill--black {
    clip-path: inset(0 100% 0 0);
  }
}

/* ========================================
   Main（FV背景を main に適用）
   ======================================== */
main {
  position: relative;
  background-color: var(--accent-color);
  background-image: url("../img/fv_bg_pattern.webp");
  background-repeat: var(--pattern-bg-repeat);
  background-position: var(--pattern-bg-position);
}

/* ========================================
   FV
   ======================================== */
.fv {
  position: relative;
  min-height: auto;
  padding: var(--fv-sp-padding-block-start) var(--fv-sp-padding-inline) var(--fv-sp-padding-block-end);
  color: var(--color-white);
}

.fv .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: auto;
}

.fv_body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: auto;
}

.fv_content {
  position: relative;
  z-index: var(--fv-content-z-sp);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fv-gap-sp);
  width: 100%;
  margin-top: calc(var(--fv-phone-area-h-sp) + var(--fv-phone-title-gap-sp) - var(--fv-content-overlap-sp));
  text-align: center;
}

.fv_phones {
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  z-index: var(--fv-phones-z-sp);
  width: var(--fv-phone-area-w-sp);
  height: var(--fv-phone-area-h-sp);
  transform: translateX(-50%);
}

.fv_phones_list {
  position: relative;
  width: var(--fv-phone-area-w-sp);
  height: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.fv_phone {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--fv-phone-front-w-sp);
  margin: 0;
  margin-left: calc(var(--fv-phone-front-w-sp) / -2);
  transform: translateX(0px) scale(1);
  transform-origin: center bottom;
  transition:
    transform var(--fv-carousel-duration) cubic-bezier(0.4, 0, 0.2, 1),
    bottom var(--fv-carousel-duration) cubic-bezier(0.4, 0, 0.2, 1),
    opacity var(--fv-carousel-duration) ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.fv_phone img {
  display: block;
  width: var(--fv-phone-front-w-sp);
  height: var(--fv-phone-front-h-sp);
  max-width: none;
}

.fv_phone--front {
  z-index: 3;
  bottom: 0;
  opacity: 1;
  transform: translateX(0px) scale(1);
}

.fv_phone--back-left {
  z-index: 1;
  bottom: var(--fv-phone-back-bottom-sp);
  opacity: 1;
  transform: translateX(calc(-1 * var(--fv-phone-offset-x-sp))) scale(calc(var(--fv-phone-back-w-sp) / var(--fv-phone-front-w-sp)));
}

.fv_phone--back-right {
  z-index: 2;
  bottom: var(--fv-phone-back-bottom-right-sp);
  opacity: 1;
  transform: translateX(var(--fv-phone-offset-x-sp)) scale(calc(var(--fv-phone-back-w-sp) / var(--fv-phone-front-w-sp)));
}

@media (prefers-reduced-motion: reduce) {
  .fv_phone {
    transition: none;
  }
}

.fv_label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border: 1px solid var(--color-white);
  border-radius: 50px;
  background-color: var(--accent-dark);
  font-family: var(--font-noto);
  font-size: var(--fv-label-fs-sp);
  font-weight: 700;
  line-height: var(--fv-label-lh);
  letter-spacing: var(--letter-spacing);
}

.fv_logo {
  margin: 0;
  line-height: 0;
}

.fv_logo img {
  display: block;
  width: var(--fv-logo-w-sp);
  max-width: 100%;
  height: auto;
}

.fv_title {
  font-family: var(--font-mplus);
  font-size: var(--fv-title-fs-sp);
  font-weight: 800;
  line-height: var(--fv-title-lh);
  letter-spacing: var(--letter-spacing);
}

.fv_title_line {
  display: block;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .fv_title {
    font-size: max(10px, calc((100vw - 80px) / 15));
  }
}

.fv_lead {
  width: 100%;
  max-width: none;
  font-family: var(--font-mplus);
  font-size: var(--fv-lead-fs-sp);
  font-weight: 500;
  line-height: var(--fv-lead-lh);
  letter-spacing: var(--letter-spacing);
}

.fv_download {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--fv-download-gap-sp);
  width: calc(100% + 2 * (var(--fv-sp-padding-inline) - var(--sp-content-padding)));
  margin-inline: calc(-1 * (var(--fv-sp-padding-inline) - var(--sp-content-padding)));
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.fv_download li {
  display: flex;
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  max-width: var(--fv-download-btn-max-w);
}

.fv_download a {
  display: block;
  width: 100%;
  max-width: var(--fv-download-btn-max-w);
  line-height: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.fv_download a:hover,
.fv_download a:focus-visible {
  transform: scale(1.04);
}

.fv_download img {
  display: block;
  width: 100%;
  max-width: var(--fv-download-btn-max-w);
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .fv_download a {
    transition: none;
  }

  .fv_download a:hover,
  .fv_download a:focus-visible {
    transform: none;
  }
}

/* ========================================
   PC (1128px+)
   ======================================== */
@media screen and (min-width: 1128px) and (max-width: 1407px) {
  :root {
    --fv-phone-front-w-pc: 190px;
    --fv-phone-front-h-pc: 389px;
    --fv-phone-back-w-pc: 148px;
    --fv-phone-back-h-pc: 301px;
    --fv-phone-offset-x-pc: 78px;
    --fv-phone-area-w-pc: 360px;
    --fv-phone-area-h-pc: 465px;
  }
}

@media screen and (min-width: 1128px) {
  :root {
    --base-font-size: 18px;
    --news-text-fs-pc: 18px;
    --news-badge-fs: 20px;
    --pc-content-padding: 40px;
    --pc-section-padding-block: 70px;
    --pc-section-gap: 30px;
    --pc-btn-height: 48px;
    --pc-btn-padding-inline: 40px;
    --pc-faq-item-gap: 16px;
  }

  .pc_only {
    display: inline;
  }

  .sp_only {
    display: none;
  }

  br.sp_only {
    display: none;
  }

  br.pc_only {
    display: block;
  }

  body {
    padding-top: var(--header-offset-pc);
  }

  .header_logo {
    left: 0;
  }

  .header_logo img {
    width: var(--header-logo-width-pc);
  }

  .header_inner {
    justify-content: flex-end;
    gap: var(--gap);
    padding: 0 var(--header-padding-inline-pc);
    padding-left: calc(var(--header-logo-width-pc) + var(--header-logo-gap));
  }

  .gnav {
    display: block;
  }

  .header_menu {
    display: none;
  }

  .header_panel {
    display: none;
  }

  .header_btn_link {
    min-height: auto;
    padding: 10px 30px;
    border-radius: 50px;
  }

  .header_btn_icon img {
    width: 17px;
    height: 17px;
  }

  .fv {
    min-height: auto;
    padding: var(--fv-pc-padding-block-start) 30px var(--fv-pc-padding-block-end);
  }

  .fv .wrap {
    width: 100%;
    max-width: var(--max-width-inner);
    min-height: auto;
  }

  .fv_body {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    min-height: auto;
  }

  .fv_content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 50%;
    width: 50%;
    max-width: none;
    margin-top: 0;
    margin-left: 0;
    padding-right: 20px;
    box-sizing: border-box;
    text-align: left;
    gap: var(--fv-gap-title-lead);
    z-index: auto;
  }

  .fv_phones {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    transform: none;
    flex: 0 0 50%;
    width: 50%;
    height: var(--fv-phone-area-h-pc);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
  }

  .fv_phones_list {
    position: relative;
    width: var(--fv-phone-area-w-pc);
    height: var(--fv-phone-area-h-pc);
    margin: 0 auto;
  }

  .fv_phone {
    width: var(--fv-phone-front-w-pc);
    margin-left: calc(var(--fv-phone-front-w-pc) / -2);
  }

  .fv_phone img {
    width: var(--fv-phone-front-w-pc);
    height: var(--fv-phone-front-h-pc);
  }

  .fv_phone--front {
    transform: translateX(0px) scale(1);
  }

  .fv_phone--back-left {
    bottom: var(--fv-phone-back-bottom-pc);
    transform: translateX(calc(-1 * var(--fv-phone-offset-x-pc))) scale(calc(var(--fv-phone-back-w-pc) / var(--fv-phone-front-w-pc)));
  }

  .fv_phone--back-right {
    bottom: var(--fv-phone-back-bottom-right-pc);
    transform: translateX(var(--fv-phone-offset-x-pc)) scale(calc(var(--fv-phone-back-w-pc) / var(--fv-phone-front-w-pc)));
  }

  .fv_label {
    margin-bottom: calc(var(--fv-gap-label-title-pc) - var(--fv-gap-title-lead));
  }

  .fv_label {
    padding: 10px 20px;
    font-size: var(--fv-label-fs-pc);
  }

  .fv_logo img {
    width: var(--fv-logo-w-pc);
  }

  .fv_title {
    font-size: var(--fv-title-fs-pc);
  }

  .fv_lead {
    font-size: var(--fv-lead-fs-pc);
  }

  .fv_download {
    width: 100%;
    margin-inline: 0;
    gap: var(--fv-download-gap-pc);
  }

  .fv_download li,
  .fv_download a,
  .fv_download img {
    max-width: none;
  }
}

/* ========================================
   News（ご案内）
   ======================================== */
.news {
  padding: var(--news-padding-block-sp) var(--news-padding-inline-sp);
  background-color: transparent;
}

.news_list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--news-list-gap);
}

.news_item {
  display: flex;
  min-width: 0;
}

.news_card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  gap: var(--news-body-gap);
  padding: var(--news-card-padding-block-start) var(--news-card-padding-inline) var(--news-card-padding-block-end);
  border: var(--news-card-border-width) solid var(--color-white);
  border-radius: var(--news-card-radius);
  background-color: var(--accent-dark);
}

.news_badge {
  position: absolute;
  top: var(--news-badge-offset-top);
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--news-badge-padding-block) var(--news-badge-padding-inline);
  border-radius: 100px;
  background-color: var(--color-white);
  font-family: var(--font-noto);
  font-size: var(--news-badge-fs);
  font-weight: 900;
  line-height: var(--news-badge-lh);
  color: var(--accent-color);
  white-space: nowrap;
  transform: translateX(-50%);
}

.news_badge::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 10px solid var(--color-white);
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  transform: translateX(-50%);
}

.news_body {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--news-body-gap);
  width: 100%;
}

.news_icon {
  flex-shrink: 0;
  width: var(--news-icon-size);
  height: auto;
}

.news_text {
  flex: 1;
  font-family: var(--font-noto);
  font-size: var(--news-text-fs-sp);
  font-weight: 500;
  line-height: var(--news-text-lh);
  color: var(--color-white);
  text-align: justify;
}

.news_text_note {
  display: inline-block;
  font-size: var(--news-text-note-fs-sp);
  line-height: var(--news-text-lh);
}

@media screen and (min-width: 1128px) {
  .news {
    padding: var(--pc-section-padding-block) var(--pc-content-padding);
  }

  .news_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--news-list-gap);
  }

  .news_text {
    font-size: var(--news-text-fs-pc);
  }

  .news_text_note {
    font-size: var(--news-text-note-fs-pc);
  }
}

/* ========================================
   Common components
   ======================================== */
.btn_pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: var(--btn-height);
  padding: 0 20px;
  border: none;
  border-radius: var(--radius-btn);
  background-color: var(--color-black);
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 700;
  line-height: 1.448;
  color: var(--color-white);
}

/* main内ボタン：ヘッダー同様のピンクワイプ（hoverで再生・離すと黒に戻る） */
main .btn_pill {
  position: relative;
  overflow: hidden;
  background-color: var(--color-black);
}

main .btn_pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-color: var(--accent-color);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  transition: clip-path 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

main .btn_pill:hover::before {
  clip-path: inset(0 0 0 0);
}

main .btn_pill_content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

main .btn_pill--border .btn_pill_content {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  main .btn_pill::before {
    transition: none;
  }
}

/* 黒枠付きボタン（business 申込・規約など） */
.btn_pill--border {
  border: 3px solid var(--color-black);
}

.btn_pill_arrow {
  display: inline-flex;
  flex-shrink: 0;
}

.guide_btn {
  margin: 0;
  text-align: center;
}

/* ========================================
   About
   ======================================== */
.about {
  position: relative;
  padding: 30px var(--sp-content-padding);
  background-color: var(--color-white);
}

.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/about_bg_pattern.webp");
  background-repeat: var(--pattern-bg-repeat);
  background-position: var(--pattern-bg-position);
  opacity: var(--pattern-opacity);
  pointer-events: none;
}

.about .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.about_intro {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.about_ticket {
  flex-shrink: 0;
  width: 111px;
  border-radius: var(--radius-card);
  border: none;
  box-shadow: none;
}

.about_intro_text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  flex: 1;
}

.about_logo img {
  display: block;
  width: auto;
  max-width: 200px;
  height: auto;
}

.about_tagline {
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-black);
  text-align: center;
}

.about_lead {
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: justify;
}

.about_gallery {
  position: relative;
  z-index: 1;
  width: calc(100% + 2 * var(--sp-content-padding));
  margin: 30px calc(-1 * var(--sp-content-padding));
  overflow: hidden;
}

.about_gallery_track {
  display: flex;
  width: max-content;
  animation: about-gallery-scroll var(--about-gallery-duration) linear infinite;
  will-change: transform;
}

.about_gallery_list {
  display: flex;
  flex-shrink: 0;
  gap: var(--about-gallery-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about_gallery_list li {
  flex-shrink: 0;
}

.about_gallery_list img {
  display: block;
  width: var(--about-gallery-img-w-sp);
  height: var(--about-gallery-img-h-sp);
  border-radius: var(--radius-card);
  object-fit: cover;
}

@keyframes about-gallery-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% / var(--about-gallery-set-count, 2)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .about_gallery_track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: var(--max-width-inner);
    margin: 0 auto;
  }

  .about_gallery {
    width: 100%;
    margin-inline: 0;
  }

  .about_gallery_list li[aria-hidden="true"] {
    display: none;
  }
}

.about_headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: center;
}

.about_headline_line {
  font-family: var(--font-noto);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-black);
}

.about_headline_line--accent {
  display: inline-block;
  padding: 0 10px;
  background-color: var(--accent-color);
  color: var(--color-white);
}

.about_headline_sub {
  font-family: var(--font-noto);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-black);
}

.about_body {
  width: 100%;
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: justify;
}

.about_features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.about_feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px;
  border-radius: var(--radius-card);
  background-color: var(--color-pink-light);
}

.about_feature_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
}

.about_feature_icon img {
  width: 100px;
  height: auto;
}

.about_feature_title {
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-black);
  text-align: center;
}

.about_feature_desc {
  font-family: var(--font-noto);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: center;
}

.about_character {
  position: absolute;
  right: 20px;
  bottom: 0;
  width: 185px;
  height: auto;
}

/* ========================================
   Howto cards
   ======================================== */
.howto {
  position: relative;
  z-index: 1;
  padding: 30px var(--sp-content-padding) 30px;
  background-color: var(--accent-color);
}

.howto .wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-section-gap);
}

.howto_card {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 20px;
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  box-sizing: border-box;
}

.howto_deco {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 1;
}

#download {
  scroll-margin-top: var(--header-offset-sp);
}

@media (min-width: 1128px) {
  #download {
    scroll-margin-top: var(--header-offset-pc);
  }
}

.howto_card--app {
  position: relative;
}

.howto_card_deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.howto_app_icon {
  display: none;
}

.howto_card--app .howto_deco--app-phone {
  top: 55px;
  left: -21px;
  width: 84px;
  height: auto;
}

.howto_card--app .howto_deco--app-cloud {
  top: 51px;
  right: -17px;
  left: auto;
  width: 67px;
  height: auto;
}

.howto_card--app .howto_deco--app-coin {
  top: 2px;
  right: 12px;
  left: auto;
  width: 65px;
  height: auto;
}

.howto_card_main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.howto_deco--paper-note {
  top: -40px;
  left: 74.31%;
  width: 120px;
  height: auto;
}

.howto_deco--paper-envelope {
  top: 83.6%;
  left: -16px;
  width: 63px;
  height: auto;
}

.howto_card_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.howto_label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-noto);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
}

.howto_label_dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.howto_label_dot--app {
  background-color: var(--color-label-app);
}

.howto_label_dot--card {
  background-color: var(--color-label-card);
}

.howto_title {
  font-family: var(--font-noto);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-black);
  text-align: center;
}

.howto_card_visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
}

.howto_illust {
  display: block;
  height: auto;
}

.howto_illust--app {
  width: 109px;
}

.howto_illust--paper {
  width: 176px;
}

.howto_text {
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: justify;
}

.howto_btn {
  margin: 0;
}

/* ========================================
   Guide panel
   ======================================== */
.guide {
  position: relative;
  padding: 0;
}

.guide_stack {
  position: relative;
  width: 100%;
  border-inline: 5px solid var(--accent-color);
  border-radius: var(--radius-panel);
  background-color: #F5D5DF;
  overflow: hidden;
}

.guide_stack::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/about_bg_pattern.webp");
  background-repeat: var(--pattern-bg-repeat);
  background-position: var(--pattern-bg-position);
  opacity: 0.3;
  pointer-events: none;
}

.guide_block {
  position: relative;
  z-index: 1;
  padding: 30px var(--sp-content-padding);
}

.guide_block > .guide_en {
  text-align: center;
}

.guide_block > .guide_en,
.guide_block > .wrap {
  position: relative;
}

.guide_block--shops,
.guide_block--faq {
  border-top: 5px dashed var(--accent-color);
}

.guide_en {
  margin: 0;
  margin-bottom: 5px;
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  text-align: center;
}

.guide_en--light {
  color: var(--color-white);
}

.guide_title_pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0 10px;
  background-color: var(--accent-color);
  font-family: var(--font-noto);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-white);
  text-align: center;
}

.guide_title_pill--white {
  background-color: var(--color-white);
  color: var(--color-black);
}

.section_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 0 0 15px;
}

.section_title {
  margin: 0 0 15px;
  font-family: var(--font-noto);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  color: var(--accent-color);
  text-align: center;
}

.card_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border-radius: 20px;
  background-color: var(--color-pink-light);
  text-align: center;
}

.card_box__title {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--accent-color);
}

.text_mplus {
  margin: 0;
  font-family: var(--font-mplus);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--letter-spacing);
  color: var(--color-text-body);
  text-align: left;
}

.guide_block .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-section-gap);
}

.guide_lead,
.shops_lead,
.faq_lead {
  width: 100%;
  margin: 0;
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: center;
}

.section_head + .guide_lead {
  margin-bottom: 15px;
}

.section_head .guide_lead {
  text-align: center;
}

.faq_lead a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq_lead a:hover {
  text-decoration: none;
}

.shops_catch {
  font-family: var(--font-noto);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--color-black);
  text-align: center;
}

/* Steps */
.steps_list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-section-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

.steps_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.steps_num {
  margin: 0;
  font-family: var(--font-roboto);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-color);
}

.steps_title {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  color: var(--color-black);
  text-align: center;
}

.steps_figure {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--steps-figure-h);
  min-height: var(--steps-figure-h);
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}

.steps_figure img {
  display: block;
  width: var(--steps-img-display-w, var(--steps-img-w-01));
  height: auto;
  max-width: 100%;
  max-height: var(--steps-figure-h);
  object-fit: contain;
  object-position: center;
}

.steps_figure--step01 {
  --steps-img-display-w: var(--steps-img-w-01);
}

.steps_figure--step01 img {
  border: 1px solid var(--color-black);
}

.steps_figure--step02,
.steps_figure--step03,
.steps_figure--step04 {
  --steps-img-display-w: var(--steps-img-w-02);
}

.steps_figure--step02 img,
.steps_figure--step03 img,
.steps_figure--step04 img {
  width: var(--steps-img-w-02);
  height: var(--steps-figure-h);
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

.steps_text {
  width: 100%;
  margin: 0;
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: justify;
}

.steps_notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px 10px 20px;
}

.steps_notice_badge {
  position: relative;
  margin: 0;
  padding: 10px 30px;
  border-radius: 100px;
  background-color: var(--accent-color);
  font-family: var(--font-noto);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-white);
  text-align: center;
}

.steps_notice_badge::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  border-top: 10px solid var(--accent-color);
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  transform: translateX(-50%);
}

.steps_notice_text {
  font-family: var(--font-noto);
  font-size: var(--sp-font-size);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: justify;
}

/* Shops grid */
.shops_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.shops_grid img {
  width: 100%;
  aspect-ratio: 114 / 107;
  border-radius: var(--radius-card);
  object-fit: cover;
}

/* FAQ accordion chevron（Figma Vector 11×5 / @2x PNG） */
.faq_dl .btn span {
  --faq-chevron-w: 11px;
  --faq-chevron-h: 5px;
  display: block;
  flex-shrink: 0;
  width: var(--faq-chevron-w);
  height: var(--faq-chevron-h);
  background: url("../img/faq_chevron.webp") no-repeat center / var(--faq-chevron-w) var(--faq-chevron-h);
  transition: transform 0.2s ease;
}

.faq_dl .btn span::before,
.faq_dl .btn span::after {
  display: none;
}

.faq_dl dt.highlight .btn span {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .faq_dl .btn span {
    transition: none;
  }
}

#faq .faq_dl .btn span {
  background-image: url("../img/faq_chevron_white.webp");
}

#faq .faq_dl {
  width: 100%;
}

#faq .faq_dl .inner:not(:last-child) {
  margin-bottom: var(--sp-faq-item-gap);
}

#faq .faq_dl .inner {
  border-radius: var(--radius-card);
  overflow: hidden;
}

#faq .faq_dl dt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 30px 10px 20px;
  background-color: var(--accent-color);
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-white);
  cursor: pointer;
}

#faq .faq_dl dt::before {
  content: "Q.";
  flex-shrink: 0;
}

#faq .faq_dl dd {
  display: none;
  padding: 10px 20px;
  background-color: var(--color-white);
  font-family: var(--font-noto);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: justify;
  margin: 0;
}

#faq .faq_dl dd a {
  color: inherit;
}

#faq .faq_dl dd a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

#faq .faq_dl .faq_tel {
  text-decoration: underline;
  text-underline-offset: 2px;
}

#faq .faq_dl .faq_tel:hover {
  text-decoration: none;
  opacity: 0.85;
}

#faq .faq_dl .btn {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* ========================================
   Business
   ======================================== */
.business {
  padding: 30px var(--sp-content-padding);
}

.business .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-section-gap);
}

.business .guide_title_pill {
  margin: 0 auto;
  border: none;
  background-color: var(--color-white);
  color: var(--accent-color);
}

.business_visual {
  width: 100%;
  max-width: 362px;
  margin-inline: auto;
}

.business_visual img {
  display: block;
  width: 100%;
  max-width: 362px;
  height: auto;
  aspect-ratio: 362 / 250;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.business_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-section-gap);
  width: 100%;
  text-align: center;
}

.business_title {
  font-family: var(--font-mplus);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-white);
}

.business_lead {
  font-family: var(--font-mplus);
  font-size: var(--sp-font-size);
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-white);
}

.business_btns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.business_btns li {
  width: 100%;
}

.business_btns .btn_pill--border {
  width: 100%;
  box-sizing: border-box;
}

.business_btns a {
  justify-content: center;
}

/* ========================================
   Footer
   ======================================== */
.footer {
  position: relative;
  padding: 0 var(--sp-content-padding) 30px;
  background-color: var(--color-black);
  color: var(--color-white);
}

.footer_logo_wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
}

.footer_logo {
  margin: 0;
  padding: 12px 18px 13px;
  background-color: var(--color-white);
  border-radius: 0 0 65px 65px;
}

.footer_logo img {
  display: block;
  width: 94px;
  height: auto;
}

.footer_body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap-section) / 3);
}

.footer_name {
  font-family: var(--font-noto);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
}

.footer_tagline {
  margin-top: 20px;
  font-family: var(--font-mplus);
  font-size: var(--sp-font-size);
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
}

.footer_address {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--color-white);
  font-style: normal;
  text-align: center;
}

.footer_address p {
  font-family: var(--font-mplus);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
}

.footer_address .footer_tel {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer_address .footer_tel:hover {
  text-decoration: none;
  opacity: 0.85;
}

.footer_nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 8px;
  width: 100%;
}

.footer_nav_col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}

.footer_nav_label {
  margin: 0;
  font-family: var(--font-mplus);
  font-size: var(--sp-font-size);
  font-weight: 700;
  line-height: 1.4;
}

.footer_nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer_nav li {
  display: flex;
  justify-content: center;
  width: 100%;
}

.footer_nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-mplus);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-white);
}

.footer_nav a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer_nav a::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-placeholder);
}

.footer_link_ext img {
  flex-shrink: 0;
}

.footer_copy {
  margin-top: calc(var(--gap-section) / 3);
  padding: 5px 0;
  border-radius: var(--radius-btn);
  background-color: var(--color-white);
  font-family: var(--font-mplus);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-black);
  text-align: center;
}

.footer_credit {
  margin-top: 10px;
  font-family: var(--font-mplus);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
}

/* ========================================
   PC overrides (1128px+)
   ======================================== */
@media screen and (min-width: 1128px) {
  .about_features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .steps_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
  }

  .steps_item {
    height: 100%;
  }

  .shops_grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .footer_body {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap-section);
  }

  .footer_nav {
    display: flex;
    flex-direction: row;
    gap: 40px;
    width: auto;
  }

  .footer_nav_col {
    align-items: flex-start;
    text-align: left;
  }

  .footer_nav_label {
    margin-bottom: 5px;
    line-height: 1.7;
  }

  .footer_nav ul {
    align-items: stretch;
    gap: 5px;
  }

  .footer_nav li {
    display: block;
    width: auto;
  }

  .footer_nav a {
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 12px;
    line-height: 1.7;
  }

  .footer_nav a::before {
    margin-top: 7px;
  }

  .footer_link_ext img {
    margin-top: 3px;
  }

  .footer_info {
    flex: 1 1 58%;
    max-width: 620px;
    min-width: 0;
  }

  .footer_nav {
    flex-shrink: 0;
  }

  /* タイポ（FV以外を一回り大きく） */
  .about_tagline,
  .about_headline_sub,
  .steps_title,
  .guide_step_title,
  .guide_card_intro_title,
  .footer_name {
    font-size: 22px;
  }

  .about_headline_line,
  .howto_title,
  .guide_title_pill,
  .shops_catch,
  .guide_help_title,
  .guide_shops_title,
  .section_title {
    font-size: 26px;
  }

  .business_title,
  .guide_hero_title {
    font-size: 28px;
  }

  .steps_num,
  .guide_step_num {
    font-size: 52px;
  }

  .guide_hero_label {
    font-size: var(--fv-label-fs-pc);
  }

  .guide_hero_lead {
    font-size: var(--fv-lead-fs-pc);
  }

  .howto_label {
    font-size: 14px;
  }

  .about_feature_title {
    font-size: 20px;
  }

  .about_feature_desc {
    font-size: 16px;
  }

  .about_gallery_list img {
    width: var(--about-gallery-img-w-pc);
    height: var(--about-gallery-img-h-pc);
  }

  .steps_notice_badge,
  #faq .faq_dl dd {
    font-size: 17px;
  }

  .steps_notice_text,
  .business_lead,
  .guide_step_text,
  .guide_step_closing,
  .guide_card_intro_text,
  .guide_shops_lead,
  .footer_tagline,
  .footer_nav_label {
    font-size: var(--base-font-size);
  }

  .steps_notice_badge,
  .guide_step_callout_title {
    font-size: 17px;
  }

  .about_feature_desc,
  .guide_step_note_text,
  .guide_step_callout_text,
  .guide_step_callout_note,
  .guide_step_callout_box_text {
    font-size: 16px;
  }

  .footer_address p,
  .footer_nav a,
  .footer_credit,
  .guide_help_note {
    font-size: 14px;
  }

  .footer_copy {
    font-size: 12px;
  }

  /* 余白（PCセクション上下70px。FVは除外） */
  .about {
    padding: var(--pc-section-padding-block) var(--pc-content-padding);
  }

  .about_gallery {
    width: calc(100% + 2 * var(--pc-content-padding));
    margin: 30px calc(-1 * var(--pc-content-padding));
  }

  .howto {
    padding: var(--pc-section-padding-block) var(--pc-content-padding);
  }

  .howto .wrap {
    gap: var(--pc-section-gap);
  }

  .howto_card--app {
    display: grid;
    grid-template-columns: minmax(240px, 36%) 1fr;
    grid-template-areas: "lead main";
    column-gap: 56px;
    align-items: center;
  }

  .howto_card_deco {
    z-index: 3;
  }

  .howto_app_icon {
    display: block;
    grid-area: lead;
    position: relative;
    z-index: 2;
    width: 220px;
    height: auto;
    justify-self: center;
    align-self: center;
    margin: 0;
  }

  .howto_card--app .howto_deco--app-cloud {
    top: 51px;
    right: -17px;
    left: auto;
    width: 67px;
  }

  .howto_card--app .howto_deco--app-coin {
    top: 2px;
    right: 12px;
    left: auto;
    width: 65px;
  }

  .howto_card--app .howto_card_main {
    grid-area: main;
    align-items: flex-start;
    gap: 20px;
  }

  .howto_card--app .howto_card_main .howto_card_visual {
    display: none;
  }

  .howto_card--app .howto_card_head {
    align-items: flex-start;
    gap: 12px;
  }

  .howto_card--app .howto_label {
    justify-content: flex-start;
    font-size: 14px;
  }

  .howto_card--app .howto_title {
    text-align: left;
  }

  .howto_card--app .howto_text {
    text-align: left;
  }

  .howto_card--app .howto_btn {
    width: auto;
    margin-top: 0;
    text-align: left;
  }

  .howto_card {
    gap: 20px;
    padding: 36px 40px 40px;
  }

  .howto_card_head {
    gap: 18px;
  }

  .howto_btn {
    width: 100%;
    margin-top: 8px;
    text-align: center;
  }

  .guide_block {
    padding: var(--pc-section-padding-block) var(--pc-content-padding);
  }

  .guide_block .wrap {
    gap: var(--pc-section-gap);
  }

  .guide_title_pill {
    margin-bottom: 0;
    padding: 4px 20px;
  }

  .business .guide_title_pill {
    margin-bottom: 0;
  }

  .guide_lead,
  .shops_lead,
  .faq_lead {
    max-width: 720px;
    margin-bottom: 8px;
  }

  .guide_btn {
    width: 100%;
    margin-top: 12px;
    text-align: center;
  }

  .btn_pill {
    min-height: var(--pc-btn-height);
    padding: 0 var(--pc-btn-padding-inline);
    gap: 12px;
  }

  .steps_item {
    padding: 28px 24px;
  }

  .steps_notice {
    padding: 20px 24px;
    margin-top: 8px;
  }

  .business {
    padding: var(--pc-section-padding-block) var(--pc-content-padding);
  }

  .business .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: 56px;
    row-gap: 40px;
    align-items: center;
  }

  .business .guide_title_pill {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .business_visual {
    max-width: none;
    width: 100%;
  }

  .business_visual img {
    max-width: none;
    width: 100%;
  }

  .business_content {
    align-items: center;
    text-align: center;
    gap: 32px;
  }

  .business_btns {
    width: 100%;
    gap: 20px;
    max-width: 480px;
    margin-inline: auto;
    align-items: center;
  }

  .business_btns .btn_pill--border {
    width: auto;
    min-width: 320px;
  }

  .footer {
    padding: 0 var(--pc-content-padding) var(--pc-section-padding-block);
  }

  .footer_copy {
    margin-top: var(--pc-section-padding-block);
  }

  /* FAQ */
  #faq .faq_dl {
    max-width: 900px;
    margin: 0 auto;
  }

  #faq .faq_dl .inner:not(:last-child) {
    margin-bottom: var(--pc-faq-item-gap);
  }

  #faq .faq_dl dt {
    gap: 8px;
    min-height: 56px;
    padding: 18px 64px 18px 28px;
  }

  #faq .faq_dl dd {
    padding: 24px 28px 28px;
  }

  #faq .faq_dl .btn {
    right: 28px;
  }

  .faq_dl .btn span {
    --faq-chevron-w: 14px;
    --faq-chevron-h: 6px;
  }
}

/* ========================================
   Subpage common (guide / shop / business)
   ======================================== */
.subpage_main,
.guide_main,
.shop_main,
.business_main,
.support_main,
.policy_main {
  background-color: var(--accent-color);
  background-image: url("../img/fv_bg_pattern.webp");
  background-repeat: var(--pattern-bg-repeat);
  background-position: var(--pattern-bg-position);
}

.subpage,
.guide_page,
.shop_page,
.business_page,
.support_page,
.policy_page {
  max-width: var(--max-width-inner);
  margin: 0 auto;
}

.guide_page {
  padding: 0 var(--sp-content-padding) 0;
}

.subpage--flush,
.shop_page,
.business_page,
.support_page,
.policy_page {
  padding: 0;
}

.support_page .guide_hero,
.policy_page .guide_hero {
  padding-bottom: 20px;
}

.guide_hero,
.subpage_hero {
  padding-block: 30px 20px;
  text-align: center;
  color: var(--color-white);
}

.subpage--flush .guide_hero,
.subpage_hero--inset {
  padding-inline: var(--sp-content-padding);
}

.shop_page .guide_hero {
  padding-bottom: 10px;
}

.business_page .guide_hero {
  padding-bottom: 20px;
}

.subpage_lead {
  margin: 0;
  font-family: var(--font-mplus);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--letter-spacing);
}

.subpage_lead--spaced {
  margin-bottom: 20px;
}

.subpage_panel {
  margin: 0 var(--sp-content-padding) 10px;
  padding: 0 var(--sp-content-padding) 10px;
  background-color: var(--color-white);
  border-radius: 20px;
  box-sizing: border-box;
}

.subpage_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px var(--sp-content-padding);
  text-align: center;
}

.subpage_section {
  padding: 20px 0;
}

.subpage_section + .subpage_section,
.subpage_section:not(:first-child) {
  border-top: 5px dashed var(--accent-color);
}

.subpage_flow {
  margin: 0 0 10px;
  padding: 30px var(--sp-content-padding);
  color: var(--color-white);
  text-align: center;
}

.subpage_flow_lead {
  margin: 0 0 20px;
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-white);
}

.flow_steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow_step {
  padding: 20px 0;
  border-top: 5px dashed var(--color-white);
  text-align: left;
}

.flow_step_head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.flow_step_icon {
  display: block;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.subpage_flow .guide_step_num {
  margin: 0;
  color: var(--color-white);
}

.subpage_flow .guide_step_title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  text-align: left;
  color: var(--color-white);
}

.subpage_flow .guide_step_text {
  margin: 0;
  color: var(--color-white);
}

.guide_help--cta {
  margin-top: 0;
  padding: 30px var(--sp-content-padding) 40px;
}

.call_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.call_box__icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 0 5px;
}

.call_box__label {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
}

.call_box__tel {
  margin: 0;
  font-family: var(--font-roboto);
  font-size: 36px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing);
}

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

.call_box__tel a:hover {
  opacity: 0.85;
}

.call_box__hours {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--letter-spacing);
}

/* ========================================
   Guide page
   ======================================== */
.guide_hero {
  padding: 30px 0 20px;
}

.guide_hero_label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px;
  padding: 7px 14px;
  border: 1px solid var(--color-white);
  border-radius: 36px;
  background-color: var(--accent-dark);
  font-family: var(--font-noto);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
}

.guide_hero_title {
  margin: 0 0 10px;
  font-family: var(--font-mplus);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
}

.guide_hero_lead {
  margin: 0;
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 500;
  line-height: 1.5;
}

.guide_tabs_wrap {
  width: calc(100% + 2 * var(--sp-content-padding));
  margin-inline: calc(-1 * var(--sp-content-padding));
  overflow: hidden;
}

.guide_tabs {
  display: flex;
  gap: 5px;
  width: 100%;
  padding-inline: var(--sp-content-padding);
  box-sizing: border-box;
}

.guide_tab {
  display: flex;
  flex: 1 1 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 72px;
  padding: 0 10px;
  border: none;
  border-radius: 20px 20px 0 0;
  background-color: var(--color-pink-light);
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-black);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.guide_tab.is-active {
  background-color: var(--color-white);
}

.guide_tab_icon {
  display: block;
  width: auto;
  height: auto;
  max-width: 33px;
  max-height: 43px;
}

.guide_tab_label {
  display: block;
}

@media screen and (max-width: 400px) {
  .guide_tab {
    gap: 2px;
    padding-inline: 6px;
    font-size: clamp(10px, 3.8vw, 16px);
  }

  .guide_tab_label {
    white-space: nowrap;
  }

  .guide_tab_icon {
    flex-shrink: 0;
    max-width: clamp(22px, 7.5vw, 33px);
    max-height: clamp(28px, 9.5vw, 43px);
  }
}

.guide_panels {
  width: 100%;
}

.guide_panel {
  display: none;
  padding: 20px;
  background-color: var(--color-white);
  border-radius: 20px;
}

.guide_panel.is-active {
  display: block;
}

.guide_steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide_step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
}

.guide_step + .guide_step {
  border-top: 5px dashed var(--accent-color);
}

.guide_step_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.guide_step_num {
  margin: 0;
  font-family: var(--font-roboto);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-color);
}

.guide_step_title {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  color: var(--color-black);
}

.guide_step_figure {
  width: 100%;
  margin: 0;
  overflow: visible;
  border-radius: 0;
}

.guide_step_figure:not(.guide_step_figure--asset) {
  overflow: hidden;
  border-radius: var(--radius-card);
}

.guide_step_figure:not(.guide_step_figure--asset) img {
  display: block;
  width: 100%;
  height: auto;
}

.guide_step_figure--asset {
  display: flex;
  justify-content: center;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

.guide_step_figure--asset img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

.guide_step_figure__img--border {
  border: 1px solid var(--color-black);
}

.guide_step_callout_note {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: justify;
}

.guide_step_figure--placeholder {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-card);
  background-color: var(--color-placeholder);
}

.guide_step_row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.guide_step_text,
.guide_step_closing {
  width: 100%;
  margin: 0;
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: justify;
}

.guide_step .fv_download {
  flex-direction: column;
  gap: 15px;
  width: 100%;
  margin-inline: 0;
}

.guide_step .fv_download li {
  flex: 0 0 auto;
}

.guide_step .fv_download img {
  max-width: 171px;
  margin-inline: auto;
}

.guide_step_notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide_step_note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.guide_step_note_mark {
  flex-shrink: 0;
  width: 20px;
  height: 19px;
}

.guide_step_note_text {
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: justify;
}

.guide_step_callout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border-radius: var(--radius-card);
  background-color: var(--color-pink-light);
}

.guide_step_callout_title {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--accent-color);
}

.guide_step_callout_title_text {
  flex: 1;
  text-align: justify;
}

.guide_step_callout_icon {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
}

.guide_step_callout_text {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: justify;
}

.guide_step_callout_box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

.guide_step_callout_box_icon {
  flex-shrink: 0;
  width: 20px;
  height: 19px;
}

.guide_step_callout_box_text {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: left;
}

.guide_card_intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 0;
  border-bottom: 5px dashed var(--accent-color);
  text-align: center;
}

.guide_card_intro_title {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--accent-color);
}

.guide_card_intro_text {
  margin: 0;
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: center;
}

.guide_help {
  margin-top: 30px;
  padding: 0 0 30px;
  color: var(--color-white);
  text-align: center;
}

.guide_help .subpage_lead {
  color: var(--color-white);
}

.subpage_btns {
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
}

.guide_help_title {
  margin: 0 0 20px;
  font-family: var(--font-mplus);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
}

.guide_help .business_btns {
  gap: 20px;
}

.guide_help .business_btns > li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.guide_help_note {
  margin: 8px 0 0;
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-white);
  text-align: center;
}

@media screen and (min-width: 1128px) {
  .guide_help .business_btns {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    width: auto;
    max-width: none;
  }

  .guide_help .business_btns > li {
    width: auto;
    flex: 0 1 auto;
  }

  .guide_help .business_btns .btn_pill--border {
    width: auto;
    min-width: 320px;
  }
}

.guide_shops {
  background-color: var(--color-white);
  border-radius: 20px 20px 0 0;
}

.guide_shops_inner {
  max-width: var(--max-width-inner);
  margin: 0 auto;
  padding: 30px var(--sp-content-padding) 40px;
  text-align: center;
}

.guide_shops_title {
  margin: 0 0 10px;
  font-family: var(--font-mplus);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--accent-color);
}

.guide_shops_lead {
  margin: 0 0 20px;
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
}

.guide_shops_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.guide_shops_grid img {
  display: block;
  width: 100%;
  aspect-ratio: 114 / 107;
  border-radius: var(--radius-card);
  object-fit: cover;
}

@media screen and (min-width: 1128px) {
  .guide_page {
    padding: 0 var(--pc-content-padding) 0;
  }

  .guide_hero {
    padding: 40px 0 30px;
  }

  .guide_hero_lead {
    max-width: 720px;
    margin-inline: auto;
  }

  .guide_tabs_wrap {
    width: calc(100% + 2 * var(--pc-content-padding));
    margin-inline: calc(-1 * var(--pc-content-padding));
  }

  .guide_tabs {
    padding-inline: var(--pc-content-padding);
  }

  .guide_tab {
    min-height: 80px;
    padding-inline: 10px;
  }

  .guide_panel {
    padding: 40px;
  }

  .guide_step .fv_download {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }

  .guide_step_row {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }

  .guide_step_row .guide_step_figure {
    flex: 0 0 335px;
    width: 335px;
  }

  .guide_step_row .guide_step_text {
    flex: 1 1 0;
    min-width: 0;
  }

  .guide_help {
    padding-bottom: 40px;
  }

  .guide_shops_inner {
    padding: 40px var(--pc-content-padding) 50px;
  }
}

.shop_help {
  padding-inline: var(--sp-content-padding);
}

.shop_card__message {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
}

.shop_card__note {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  color: var(--sub-color);
}

/* ========================================
   Business page
   ======================================== */
.business_merit_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card_box__icon {
  display: block;
  width: 100px;
  height: 100px;
}

.business_req_list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;
}

.business_req_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0;
}

.business_req_term {
  display: inline-block;
  width: fit-content;
  min-width: var(--business-req-term-min-w);
  max-width: 100%;
  margin: 0;
  padding: 10px 20px;
  background-color: var(--accent-color);
  border-radius: 20px 20px 0 0;
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-white);
  text-align: center;
  box-sizing: border-box;
}

.business_req_body {
  width: 100%;
  margin: 0;
  padding: 20px;
  background-color: var(--color-pink-light);
  border-radius: 0 20px 20px 20px;
  box-sizing: border-box;
}

.business_req_text {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: left;
}

.business_req_note {
  margin: 10px 0 0;
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--accent-color);
}

.business_info_body {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.business_info_note {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--accent-color);
  text-align: justify;
}

.faq_dl--merchant,
.business_faq_dl {
  width: 100%;
}

.faq_dl--merchant .inner:not(:last-child),
.business_faq_dl .inner:not(:last-child) {
  margin-bottom: 15px;
}

.faq_dl--merchant dt,
.business_faq_dl dt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 30px 10px 20px;
  border: 1px solid var(--color-pink-light);
  border-radius: var(--radius-card);
  background-color: var(--color-pink-light);
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--accent-dark);
  cursor: pointer;
}

.faq_dl--merchant dt::before,
.business_faq_dl dt::before {
  content: "Q.";
  flex-shrink: 0;
}

.faq_dl--merchant dd,
.business_faq_dl dd {
  display: none;
  margin: 0;
  padding: 10px 20px;
  font-family: var(--font-noto);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-black);
  text-align: justify;
}

.faq_dl--merchant .btn,
.business_faq_dl .btn {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.faq_dl--support {
  width: 100%;
  padding-top: 25px;
  border-top: 5px dashed var(--accent-color);
}

.faq_dl--support .inner:not(:last-child),
.business_faq_section .faq_dl .inner:not(:last-child) {
  margin-bottom: var(--sp-faq-item-gap);
}

.faq_dl--support .inner,
.business_faq_section .faq_dl .inner {
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.faq_dl--support dt,
.business_faq_section .faq_dl dt {
  border-radius: var(--radius-card);
  font-size: var(--base-font-size);
}

.faq_dl--support dd,
.business_faq_section .faq_dl dd {
  background-color: var(--color-white);
  border-radius: 0;
  overflow: visible;
}

.faq_dl--support .inner.is-hidden {
  display: none;
}

.support_faq_panel {
  gap: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}

.policy_panel {
  padding-top: 20px;
  padding-bottom: 20px;
}

.policy_accordion {
  width: 100%;
}

.policy_accordion .inner:not(:last-child) {
  margin-bottom: var(--sp-faq-item-gap);
}

.policy_accordion .inner {
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.policy_accordion dt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 30px 10px 20px;
  border-radius: var(--radius-card);
  background-color: var(--accent-color);
  font-family: var(--font-noto);
  font-size: var(--base-font-size);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-white);
  cursor: pointer;
}

.policy_accordion dd {
  display: none;
  margin: 0;
  padding: 20px;
  border-radius: 0;
  overflow: visible;
  background-color: var(--color-white);
}

.policy_accordion .btn {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.policy_accordion .btn span {
  --faq-chevron-w: 11px;
  --faq-chevron-h: 5px;
  display: block;
  width: var(--faq-chevron-w);
  height: var(--faq-chevron-h);
  background: url("../img/faq_chevron_white.webp") no-repeat center / var(--faq-chevron-w) var(--faq-chevron-h);
  transition: transform 0.2s ease;
}

.policy_accordion dt.highlight .btn span {
  transform: rotate(180deg);
}

.policy_body {
  font-family: var(--font-noto);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-black);
  text-align: justify;
}

.policy_doc_title {
  margin: 0 0 20px;
  font-family: var(--font-noto);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  text-align: center;
}

.policy_clause_title {
  margin: 15px 0 10px;
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
}

.policy_enacted {
  margin-top: 20px;
  text-align: right;
}

.policy_body > p {
  margin: 0 0 10px;
}

.policy_list {
  margin: 0 0 10px;
  padding-left: 0;
  list-style: none;
}

.policy_list li + li {
  margin-top: 5px;
}

.policy_notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 20px;
  padding: 15px;
  border-radius: var(--radius-card);
  background-color: var(--color-pink-light);
}

.policy_notice_icon {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
}

.policy_notice_title {
  margin: 0 0 5px;
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--accent-dark);
}

.policy_notice_text p {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-black);
  text-align: justify;
}

.policy_ext_btn {
  margin: 0;
  text-align: center;
}

.policy_ext_link {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  min-height: auto;
  padding: 12px 20px;
}

.policy_ext_link .btn_pill_content {
  white-space: normal;
}

@media screen and (min-width: 1128px) {
  .policy_ext_link {
    min-height: var(--btn-height);
    padding: 0 20px;
  }

  .policy_ext_link .btn_pill_content {
    white-space: nowrap;
  }
}

.policy_body--tokushoho {
  font-size: 14px;
  color: var(--color-text-body);
  text-align: left;
}

.policy_spec_table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-body);
}

.policy_spec_table th,
.policy_spec_table td {
  padding: 10px 0;
  border-top: 1px solid #c5c5c5;
  vertical-align: top;
  text-align: left;
  background: none;
  font-weight: 500;
}

.policy_spec_table th {
  width: 120px;
  padding-right: 0;
  color: var(--color-text-body);
}

.policy_spec_table td {
  padding-left: 0;
  color: var(--color-text-body);
}

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

.policy_spec_table a:hover {
  opacity: 0.85;
}

.support_tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0 0 0;
  padding: 0 0 20px;
}

.support_tab {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 7px 14px;
  border: 1px solid var(--accent-color);
  border-radius: 50px;
  background-color: var(--color-white);
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  color: var(--accent-color);
  cursor: pointer;
}

.support_tab.is-active {
  border-color: var(--accent-color);
  background-color: var(--accent-color);
  color: var(--color-white);
}

.support_contact {
  padding: 30px var(--sp-content-padding) 40px;
  color: var(--color-white);
  text-align: center;
}

.support_contact_title {
  margin: 0 0 10px;
  font-family: var(--font-noto);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
}

.support_contact_lead {
  margin: 0 0 20px;
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--letter-spacing);
}

.support_contact_visual {
  width: 100%;
  max-width: 362px;
  margin: 0 auto 20px;
}

.support_contact_visual img {
  display: block;
  width: 100%;
  max-width: 362px;
  height: auto;
  aspect-ratio: 362 / 250;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.support_contact_block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 0 auto 20px;
}

.support_contact_block:last-child {
  margin-bottom: 0;
}

.support_contact_icon {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 5px;
}

.support_contact_label {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
}

.support_contact_tel {
  margin: 0;
  font-family: var(--font-roboto);
  font-size: 36px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing);
}

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

.support_contact_tel a:hover {
  opacity: 0.85;
}

.support_contact_hours,
.support_contact_text,
.support_contact_note {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--letter-spacing);
}

.support_contact_btn {
  margin: 10px 0 0;
}

.support_contact_btn .btn_pill--border {
  justify-content: center;
}

.guide_help--cta .subpage_btns {
  margin-bottom: 30px;
}

@media screen and (min-width: 1128px) {
  .subpage--flush .guide_hero {
    padding: 40px var(--pc-content-padding) 30px;
  }

  .shop_page .guide_hero {
    padding-bottom: 20px;
  }

  .subpage_panel {
    margin-inline: var(--pc-content-padding);
    padding-inline: var(--pc-content-padding);
  }

  .subpage_flow,
  .guide_help--cta,
  .shop_help,
  .support_contact,
  .policy_page .guide_help {
    padding-inline: var(--pc-content-padding);
  }

  .policy_accordion {
    max-width: 900px;
    margin-inline: auto;
  }

  .policy_accordion .inner:not(:last-child) {
    margin-bottom: var(--pc-faq-item-gap);
  }

  .policy_accordion dt {
    min-height: 56px;
    padding: 18px 64px 18px 28px;
  }

  .policy_accordion dd {
    padding: 24px 28px 28px;
  }

  .policy_accordion .btn {
    right: 28px;
  }

  .policy_accordion .btn span {
    --faq-chevron-w: 14px;
    --faq-chevron-h: 6px;
  }

  .policy_body {
    font-size: 16px;
  }

  .policy_body--tokushoho,
  .policy_spec_table {
    font-size: 16px;
  }

  .policy_spec_table th,
  .policy_spec_table td {
    padding: 10px 0;
  }

  .support_contact_title {
    font-size: 22px;
  }

  .support_contact_lead {
    font-size: 16px;
  }

  .support_tabs {
    gap: 12px;
  }

  .support_tab {
    font-size: 16px;
  }

  .faq_dl--support .inner:not(:last-child),
  .business_faq_section .faq_dl .inner:not(:last-child) {
    margin-bottom: var(--pc-faq-item-gap);
  }

  .faq_dl--support dt,
  .business_faq_section .faq_dl dt {
    gap: 8px;
    min-height: 56px;
    padding: 18px 64px 18px 28px;
  }

  .faq_dl--support dd,
  .business_faq_section .faq_dl dd {
    padding: 24px 28px 28px;
    font-size: 17px;
  }

  .faq_dl--support .btn,
  .business_faq_section .faq_dl .btn {
    right: 28px;
  }

  .subpage--flush .subpage_lead {
    max-width: 720px;
    margin-inline: auto;
    font-size: var(--fv-lead-fs-pc);
  }

  .subpage_btns {
    max-width: 480px;
  }

  .business_page .subpage_btns.business_btns {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    width: auto;
    max-width: none;
  }

  .business_page .subpage_btns.business_btns > li {
    width: auto;
    flex: 0 1 auto;
  }

  .business_page .subpage_btns.business_btns .btn_pill--border {
    width: auto;
    min-width: 320px;
  }

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

  .subpage_flow .guide_step_text {
    padding-left: 58px;
    text-align: left;
  }

  .guide_help--cta {
    padding-bottom: 50px;
  }

  .shop_help {
    padding-bottom: 40px;
  }

  .subpage_card {
    padding: 30px var(--pc-content-padding);
  }
}

/* ========================================
   FV: アプリ公開予定告知バナー（2026-05-26 追加）
   ======================================== */
.fv_app_notice {
  display: inline-block;
  width: 100%;
  max-width: calc(2 * var(--fv-download-btn-max-w) + var(--fv-download-gap-sp));
  margin: 0;
  padding: 8px 16px;
  border-radius: 50px;
  background-color: #fff100;
  color: var(--color-black);
  font-family: var(--font-noto);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  text-align: center;
}

@media screen and (min-width: 1128px) {
  .fv_app_notice {
    align-self: center;
    max-width: calc(2 * var(--fv-download-btn-max-w) + var(--fv-download-gap-pc));
    padding: 10px 24px;
    font-size: 14px;
  }
}

/* ========================================
   Guide: アプリ準備中告知（Frame 107 / 2026-05-26 追加）
   ======================================== */
.guide_app_notice {
  width: 100%;
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

.guide_app_notice_body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 20px 0;
}

.guide_app_notice_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.guide_app_notice_badge {
  margin: 0;
  padding: 4px 20px;
  border-radius: 0;
  background-color: var(--accent-dark);
  color: var(--color-white);
  font-family: var(--font-roboto);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.guide_app_notice_heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0;
  border-bottom: 6px solid #f0f0f0;
}

.guide_app_notice_heading_text {
  font-family: var(--font-noto);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  color: var(--accent-dark);
}

.guide_app_notice_heading_icon {
  display: block;
  flex-shrink: 0;
  width: 26px;
  height: 25px;
}

.guide_app_notice_lead {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.guide_app_notice_phone {
  flex-shrink: 0;
  width: 79px;
  margin: 0;
}

.guide_app_notice_phone img {
  display: block;
  width: 79px;
  height: auto;
}

.guide_app_notice_lead_text {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  color: var(--accent-color);
}

.guide_app_notice_cards {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide_app_notice_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 15px 20px 20px;
  border: 4px solid var(--accent-color);
  border-radius: 10px;
  background-color: var(--color-white);
  box-shadow: 4px 3px 0 rgba(233, 83, 119, 0.2);
}

.guide_app_notice_card_icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
}

.guide_app_notice_card_num {
  font-family: var(--font-roboto);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-color);
}

.guide_app_notice_card_icon img {
  display: block;
  width: auto;
  height: auto;
  max-width: 56px;
}

.guide_app_notice_card_body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.guide_app_notice_card_text {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  color: #231815;
}

.guide_app_notice_card_note {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  color: var(--sub-color);
}

.guide_app_notice_foot {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  color: var(--accent-dark);
}

@media screen and (min-width: 1128px) {
  .guide_app_notice_cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
  }

  .guide_app_notice_card {
    min-width: 0;
    height: 100%;
  }
}


/* ========================================
   Shop: カード型店舗一覧（2026-05-28 追加）
   ======================================== */
.shop_list_panel {
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.shop_list_panel .section_title {
  margin-bottom: 20px;
  font-size: 24px;
}

.shop_list_filter {
  width: 100%;
  margin: 0 0 20px;
}

.shop_list_filter_fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.shop_list_filter_field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.shop_list_filter_label {
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing);
  color: var(--color-black);
}

.shop_list_filter_select,
.shop_list_filter_input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 2px solid var(--accent-color);
  border-radius: 8px;
  background-color: var(--color-white);
  box-sizing: border-box;
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing);
  color: var(--color-black);
}

.shop_list_filter_select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23E4007F' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}

.shop_list_filter_input::placeholder {
  color: #888;
}

.shop_list_filter_select:focus-visible,
.shop_list_filter_input:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.shop_list_filter_control--keyword {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.shop_list_filter_control--keyword .shop_list_filter_input {
  flex: 1;
  min-width: 0;
}

.shop_list_filter_submit {
  flex-shrink: 0;
  min-width: 88px;
  min-height: 44px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background-color: var(--accent-color);
  font-family: var(--font-noto);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing);
  color: var(--color-white);
  cursor: pointer;
}

.shop_list_filter_submit:hover,
.shop_list_filter_submit:focus-visible {
  opacity: 0.9;
}

.shop_list_filter_submit:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.shop_list_empty {
  margin: 0 0 16px;
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--letter-spacing);
  color: var(--accent-color);
  text-align: center;
}

.shop_list_cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  margin: 0;
  margin-bottom: 20px;
  padding: 0;
  list-style: none;
}

.shop_list_card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-height: 136px;
  padding: 15px 20px 20px;
  border: none;
  border-radius: 10px;
  background-color: var(--color-pink-light);
  box-sizing: border-box;
}

.shop_list_card_body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.shop_list_card_tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
}

.shop_list_card_genre,
.shop_list_card_pay {
  width: fit-content;
  margin: 0;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: var(--font-noto);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing);
}

.shop_list_card_genre {
  background-color: var(--color-white);
  color: var(--accent-color);
}

.shop_list_card_pay {
  background-color: var(--accent-color);
  color: var(--color-white);
}

.shop_list_card_name {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  color: var(--accent-color);
  text-align: left;
}

.shop_list_card_address,
.shop_list_card_tel {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  color: var(--color-black);
  text-align: left;
}

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

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

.shop_list_card_tel a:hover,
.shop_list_card_tel a:focus-visible {
  text-decoration: underline;
}

@media screen and (min-width: 798px) {
  .shop_list_filter_fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
  }

  .shop_list_filter_field--keyword {
    grid-column: 1 / -1;
  }

  .shop_list_cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
  }
}

@media screen and (min-width: 1128px) {
  .shop_list_panel {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .shop_list_panel .section_title {
    margin-bottom: 30px;
    font-size: 26px;
  }

  .shop_list_filter {
    margin-bottom: 30px;
  }

  .shop_list_filter_fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 24px;
  }

  .shop_list_filter_field--keyword {
    grid-column: auto;
  }

  .shop_list_cards {
    margin-bottom: 30px;
  }

  .shop_list_card {
    min-width: 0;
    height: 100%;
    padding: 15px 20px 20px;
  }

  .shop_list_card_name {
    font-size: 20px;
  }

}

.shop2_page .guide_hero {
  padding-block: 30px 20px;
}

@media screen and (min-width: 1128px) {
  .shop2_page .guide_hero {
    padding: 40px var(--pc-content-padding) 30px;
  }
}