* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #ffffff;
  color: #222222;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", Meiryo, sans-serif;
  line-height: 1.8;
}

/* PC版（既存表示を維持） */
.page {
  width: min(100%, 750px);
  margin: 0 auto;
  background: #ffffff;
}

.lp-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border: 0;
}

.mobile-page {
  display: none;
}

.footer {
  width: min(100%, 750px);
  margin: 40px auto 0;
  padding: 36px 20px 42px;
  text-align: center;
  color: #555555;
  font-size: 14px;
  border-top: 1px solid #eeeeee;
}

.footer-logo {
  display: block;
  width: min(56%, 260px);
  height: auto;
  margin: 0 auto 18px;
}

.footer p {
  margin: 0 0 12px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 12px 0;
}

.footer-nav a,
.footer a {
  color: inherit;
  text-decoration: none;
}

.footer-nav a:hover,
.footer a:hover {
  text-decoration: underline;
}

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

/* スマートフォン専用版：767px以下でのみ切り替え */
@media (max-width: 767px) {
  :root {
    --m-brown: #574b46;
    --m-blue: #1797cf;
    --m-yellow: #e3df85;
    --m-cream: #f8f7e9;
    --m-coral: #f69278;
    --m-line: #dfd887;
    --m-side: clamp(18px, 5.3vw, 28px);
  }

  body {
    overflow-x: hidden;
    color: #2b2928;
    line-height: 1.85;
    overflow-wrap: anywhere;
  }

  .desktop-page {
    display: none;
  }

  .mobile-page {
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    overflow: hidden;
    background: #ffffff;
  }

  .m-hero {
    background: #ffffff;
  }

  .m-hero-visual {
    position: relative;
    overflow: hidden;
    background: #e9f5fb;
  }

  .m-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
  }

  .m-hero-visual::after {
    position: absolute;
    right: -3%;
    bottom: -1px;
    left: -3%;
    height: clamp(24px, 8vw, 42px);
    background: #ffffff;
    clip-path: polygon(0 56%, 7% 45%, 14% 61%, 22% 43%, 31% 66%, 41% 46%, 51% 69%, 61% 47%, 72% 64%, 82% 44%, 91% 59%, 100% 48%, 100% 100%, 0 100%);
    content: "";
  }

  .m-hero-copy {
    padding: clamp(20px, 6vw, 32px) var(--m-side) clamp(34px, 9vw, 48px);
    font-size: clamp(15px, 4.1vw, 19px);
    letter-spacing: 0.02em;
  }

  .m-hero-copy p {
    margin: 0 0 8px;
  }

  .m-hero-copy p:last-child {
    margin-bottom: 0;
  }

  .m-hero-copy span {
    display: inline;
    padding-bottom: 4px;
    background-image: radial-gradient(circle at 5px -1px, transparent 6px, var(--m-blue) 6.5px, var(--m-blue) 7.5px, transparent 8px);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 16px 8px;
  }

  .m-section {
    position: relative;
    padding: 0 var(--m-side) clamp(48px, 13vw, 72px);
  }

  .m-section-heading {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(62px, 17vw, 78px);
    margin: 0 0 clamp(22px, 6vw, 32px) 14px;
    padding: 14px 14px 14px clamp(48px, 14vw, 64px);
    border: 3px solid var(--m-brown);
    border-radius: 15px;
    background: #ffffff;
  }

  .m-section-heading h2 {
    width: 100%;
    margin: 0;
    color: #171615;
    font-size: clamp(17px, 4.7vw, 22px);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    letter-spacing: 0.02em;
  }

  .m-heading-icon {
    position: absolute;
    top: 50%;
    left: 0;
    display: grid;
    width: clamp(58px, 16vw, 72px);
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: var(--m-brown);
    transform: translate(-38%, -50%);
  }

  .m-heading-icon svg {
    width: 72%;
    height: auto;
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
  }

  .m-check-list {
    margin: 0;
    padding: 12px clamp(18px, 5vw, 26px);
    list-style: none;
    border-radius: 18px;
    background: var(--m-cream);
  }

  .m-check-list li {
    position: relative;
    margin: 0;
    padding: 15px 4px 15px clamp(38px, 11vw, 50px);
    border-bottom: 1px solid var(--m-line);
    font-size: clamp(16px, 4.3vw, 20px);
    line-height: 1.55;
  }

  .m-check-list li:last-child {
    border-bottom: 0;
  }

  .m-check-list li::before {
    position: absolute;
    top: 50%;
    left: 8px;
    width: 20px;
    height: 11px;
    border-bottom: 4px solid var(--m-yellow);
    border-left: 4px solid var(--m-yellow);
    content: "";
    transform: translateY(-70%) rotate(-45deg);
  }

  .m-price-caption {
    margin: -12px 8px 18px 0;
    font-size: clamp(15px, 4vw, 18px);
    text-align: right;
  }

  .m-price-card {
    padding: clamp(18px, 5vw, 28px);
    border-radius: 18px;
    background: var(--m-cream);
  }

  .m-price-list {
    margin: 0;
  }

  .m-price-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    padding: 13px 0;
    border-bottom: 1px solid var(--m-line);
  }

  .m-price-list dt,
  .m-price-list dd {
    margin: 0;
  }

  .m-price-list dt {
    position: relative;
    padding-left: 34px;
    font-size: clamp(16px, 4.3vw, 20px);
  }

  .m-price-list dt::before {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 17px;
    height: 10px;
    border-bottom: 4px solid var(--m-yellow);
    border-left: 4px solid var(--m-yellow);
    content: "";
    transform: translateY(-70%) rotate(-45deg);
  }

  .m-price-list dd {
    white-space: nowrap;
    font-size: clamp(18px, 5vw, 23px);
    font-variant-numeric: tabular-nums;
  }

  .m-price-list dd span {
    font-size: 0.8em;
  }

  .m-deposit-note {
    margin: 20px 0 0;
    font-size: clamp(15px, 4.1vw, 19px);
    line-height: 1.65;
    text-align: center;
  }

  .m-deposit-note strong {
    font-size: 1.08em;
  }

  .m-mini-bikes {
    display: flex;
    justify-content: space-around;
    margin: clamp(28px, 8vw, 42px) 10px 0;
  }

  .m-mini-bike {
    width: clamp(45px, 13vw, 64px);
    height: auto;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .m-mini-bike--coral { stroke: var(--m-coral); }
  .m-mini-bike--blue { stroke: var(--m-blue); }
  .m-mini-bike--yellow { stroke: var(--m-yellow); }

  .m-steps {
    padding-bottom: clamp(52px, 14vw, 76px);
  }

  .m-steps-lead {
    margin: 0;
    font-size: clamp(16px, 4.4vw, 20px);
    line-height: 2;
    text-align: center;
  }

  .m-cloud-note {
    position: relative;
    width: min(88%, 390px);
    margin: clamp(24px, 7vw, 38px) auto clamp(42px, 12vw, 62px);
    padding: 22px 20px;
    border: 3px solid var(--m-blue);
    border-radius: 48% 52% 47% 53% / 43% 48% 52% 57%;
    color: var(--m-blue);
    font-size: clamp(14px, 3.8vw, 17px);
    line-height: 1.8;
    text-align: center;
    transform: rotate(2deg);
  }

  .m-cloud-note::after {
    position: absolute;
    right: 16%;
    bottom: -28px;
    width: 24px;
    height: 34px;
    border-right: 3px solid var(--m-blue);
    border-bottom: 3px solid var(--m-blue);
    background: #ffffff;
    content: "";
    transform: skew(-22deg) rotate(20deg);
  }

  .m-step-card {
    position: relative;
    margin: 0 0 clamp(50px, 14vw, 74px);
  }

  .m-step-card:last-child {
    margin-bottom: 0;
  }

  .m-step-card:not(:last-child)::after {
    position: absolute;
    right: calc(var(--m-side) * -1);
    bottom: clamp(-40px, -10vw, -28px);
    left: calc(var(--m-side) * -1);
    height: 32px;
    background-image: radial-gradient(ellipse at center, transparent 62%, var(--m-yellow) 64%, var(--m-yellow) 69%, transparent 71%);
    background-position: 0 50%;
    background-size: 92px 38px;
    background-repeat: repeat-x;
    content: "";
    opacity: 0.95;
  }

  .m-step-card h3 {
    position: relative;
    margin: 0 0 16px;
    padding: 7px 4px 7px 48px;
    color: var(--m-brown);
    font-size: clamp(17px, 4.7vw, 22px);
    line-height: 1.45;
  }

  .m-step-card h3::before {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 34px;
    height: 22px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cg fill='none' stroke='%23574b46' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='28' r='9'/%3E%3Ccircle cx='50' cy='28' r='9'/%3E%3Cpath d='M14 28 25 13h10l15 15M25 13l7 15H14l12-10h13M32 28l8-19M36 9h8M21 10h9'/%3E%3C/g%3E%3C/svg%3E");
    content: "";
    transform: translateY(-50%);
  }

  .m-step-number {
    position: absolute;
    top: -18px;
    left: 20px;
    z-index: 1;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--m-brown);
    color: #ffffff;
    font-size: 19px;
    line-height: 1;
  }

  .m-step-card > img {
    display: block;
    width: min(100%, 470px);
    height: auto;
    margin: 0 auto;
  }

  .m-step-note,
  .m-step-payment {
    color: var(--m-blue);
    font-size: clamp(14px, 3.9vw, 17px);
    line-height: 1.9;
  }

  .m-step-note {
    margin: 8px 2px 0;
    text-align: right;
  }

  .m-step-payment {
    width: min(94%, 440px);
    margin: 10px auto 0;
  }

  .m-step-payment p {
    margin: 0 0 8px;
  }

  .m-step-payment p:last-child {
    margin-bottom: 0;
  }

  .m-quick-section {
    padding-top: clamp(4px, 2vw, 12px);
  }

  .m-quick-intro {
    display: grid;
    grid-template-columns: minmax(112px, 42%) minmax(0, 1fr);
    gap: clamp(14px, 4vw, 22px);
    align-items: center;
    margin-bottom: clamp(14px, 4vw, 24px);
  }

  .m-rental-photo {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    justify-self: center;
  }

  .m-quick-copy {
    color: var(--m-blue);
    font-size: clamp(14px, 3.9vw, 17px);
    line-height: 1.9;
  }

  .m-quick-copy p {
    margin: 0 0 14px;
  }

  .m-quick-copy p:last-child {
    margin-bottom: 0;
  }

  .m-helmet-note {
    display: inline-block;
    padding: 5px 12px;
    border: 2px solid var(--m-blue);
    border-radius: 50%;
    background: #ffffff;
    font-size: 0.9em;
    transform: rotate(-3deg);
  }

  .m-rider-road {
    position: relative;
    min-height: clamp(132px, 38vw, 190px);
    margin: 0 calc(var(--m-side) * -1) clamp(30px, 9vw, 46px);
    overflow: hidden;
  }

  .m-rider-road::after {
    position: absolute;
    right: -24px;
    bottom: 30%;
    left: 30%;
    height: 70px;
    border-top: 4px dashed var(--m-yellow);
    border-radius: 50%;
    content: "";
    transform: rotate(5deg);
  }

  .m-rider-road img {
    position: relative;
    z-index: 1;
    display: block;
    width: clamp(150px, 44vw, 220px);
    height: auto;
    margin-left: 3%;
  }

  .m-dropoff-card {
    padding: clamp(20px, 5.5vw, 30px) clamp(17px, 5vw, 28px);
    border-radius: 18px;
    background: var(--m-cream);
    text-align: center;
  }

  .m-dropoff-card h3 {
    position: relative;
    margin: 0 0 18px;
    padding: 0 0 16px 24px;
    border-bottom: 1px solid var(--m-line);
    font-size: clamp(17px, 4.6vw, 21px);
    line-height: 1.55;
  }

  .m-dropoff-card h3::before {
    position: absolute;
    top: 4px;
    left: 0;
    width: 16px;
    height: 9px;
    border-bottom: 4px solid var(--m-yellow);
    border-left: 4px solid var(--m-yellow);
    content: "";
    transform: rotate(-45deg);
  }

  .m-dropoff-card p {
    margin: 0 0 10px;
    font-size: clamp(13px, 3.65vw, 16px);
    line-height: 1.9;
  }

  .m-dropoff-card p:last-child {
    margin-bottom: 0;
  }

  .m-dropoff-deposit {
    font-weight: 500;
  }

  .m-information {
    padding-bottom: clamp(58px, 16vw, 84px);
  }

  .m-information-bubble {
    position: relative;
    padding: clamp(18px, 5vw, 26px);
    border-radius: 14px;
    background: var(--m-yellow);
  }

  .m-information-bubble::after {
    position: absolute;
    bottom: -15px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 16px solid var(--m-yellow);
    border-right: 18px solid transparent;
    border-left: 18px solid transparent;
    content: "";
    transform: translateX(-50%);
  }

  .m-information-bubble p {
    margin: 0;
    font-size: clamp(13px, 3.65vw, 16px);
    line-height: 1.85;
  }

  .m-link-buttons {
    display: grid;
    gap: 12px;
    margin-top: 34px;
  }

  .m-link-buttons a {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 18px;
    border: 2px solid var(--m-brown);
    border-radius: 999px;
    color: var(--m-brown);
    font-size: clamp(14px, 3.8vw, 17px);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
  }

  .m-link-buttons a:active {
    background: var(--m-cream);
  }

  .m-recommend {
    padding-top: 0;
    text-align: center;
  }

  .m-recommend-rider {
    position: relative;
    min-height: clamp(170px, 49vw, 235px);
    margin: 0 calc(var(--m-side) * -1) clamp(24px, 7vw, 36px);
    overflow: hidden;
  }

  .m-recommend-rider::before {
    position: absolute;
    top: 52%;
    right: -14%;
    left: -12%;
    height: 100px;
    border-top: 4px dashed var(--m-yellow);
    border-radius: 50%;
    content: "";
    transform: rotate(-2deg);
  }

  .m-recommend-rider img {
    position: relative;
    z-index: 1;
    display: block;
    width: clamp(170px, 48vw, 235px);
    height: auto;
    margin: 0 auto;
  }

  .m-recommend h2 {
    display: inline-block;
    margin: 0 0 clamp(26px, 7vw, 38px);
    padding: 5px 18px;
    border-right: 1px solid #222222;
    border-left: 1px solid #222222;
    font-size: clamp(18px, 5vw, 23px);
    line-height: 1.55;
  }

  .m-recommend > p {
    margin: 0 0 24px;
    font-size: clamp(14px, 3.9vw, 17px);
    line-height: 2;
  }

  .m-recommend-emphasis {
    position: relative;
    padding-top: 18px;
    font-size: clamp(17px, 4.7vw, 21px) !important;
    font-weight: 700;
  }

  .m-recommend-emphasis::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(100%, 360px);
    border-top: 2px dashed var(--m-line);
    content: "";
    transform: translateX(-50%);
  }

  .m-spot-links {
    display: grid;
    gap: 16px;
    margin: clamp(28px, 8vw, 42px) 0;
    text-align: left;
  }

  .m-spot-links > a {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid #e5e1b3;
    border-radius: 16px;
    background: var(--m-cream);
    color: #282624;
    box-shadow: 0 5px 14px rgba(87, 75, 70, 0.09);
    text-decoration: none;
  }

  .m-spot-links > a > img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  .m-spot-caption {
    position: relative;
    display: grid;
    min-height: 70px;
    align-content: center;
    padding: 11px 48px 11px 17px;
  }

  .m-spot-caption strong {
    font-size: clamp(17px, 4.7vw, 21px);
    line-height: 1.45;
  }

  .m-spot-caption small {
    color: #6a6661;
    font-size: clamp(12px, 3.2vw, 14px);
  }

  .m-spot-caption b {
    position: absolute;
    top: 50%;
    right: 18px;
    color: var(--m-blue);
    font-size: 22px;
    font-weight: 400;
    transform: translateY(-50%);
  }

  .m-recommend-closing {
    margin-top: clamp(32px, 9vw, 48px) !important;
    padding-top: clamp(36px, 10vw, 54px);
    background-image: radial-gradient(ellipse at center, transparent 62%, var(--m-yellow) 64%, var(--m-yellow) 69%, transparent 71%);
    background-position: center top;
    background-size: 92px 38px;
    background-repeat: repeat-x;
    font-size: clamp(16px, 4.4vw, 20px) !important;
  }

  .footer {
    width: 100%;
    max-width: 560px;
    margin-top: 0;
    padding: 34px max(16px, env(safe-area-inset-left)) calc(38px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
    border-top: 1px solid #eeeeee;
    color: #555555;
    font-size: 12px;
    line-height: 1.75;
  }

  .footer-logo {
    width: min(54%, 210px);
    margin-bottom: 16px;
  }

  .footer p {
    margin-bottom: 10px;
  }

  .footer-nav {
    gap: 6px 14px;
    margin: 12px 0 14px;
  }

  .footer-nav a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
  }
}

@media (max-width: 359px) {
  .m-section-heading {
    margin-left: 11px;
    padding-right: 10px;
    padding-left: 49px;
  }

  .m-section-heading h2 {
    font-size: 16px;
  }

  .m-price-list > div {
    gap: 8px;
  }

  .m-price-list dt {
    padding-left: 28px;
    font-size: 15px;
  }

  .m-price-list dd {
    font-size: 17px;
  }

  .m-quick-intro {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
  }

  .m-dropoff-card p br,
  .m-step-payment br {
    display: none;
  }
}