/* ==========================================================================
   style.css — TOKYO PARKS CARD ランディングページ 全セクション共通CSS
   ========================================================================== */

/* =====================================================================
   ベースリセット
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { margin: 0; background: white; }
p { margin: 0; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { cursor: pointer; }
a { text-decoration: none; }


/* --- Header --- */
.site-header {
  background-color: #ffffff;
  height: 61px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  position: sticky;
  --sticky-top: 60px;
  top: var(--sticky-top);
  width: 100%;
  z-index: 2;
}

.site-header-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
}

.site-header-pad {
  display: flex;
  isolation: isolate;
  align-items: center;
  padding: 8px;
  position: relative;
  width: 100%;
  height: 100%;
}

.site-header-tab-outer {
  display: flex;
  align-items: centee-r;
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}

.site-header-tab {
  display: flex;
  align-items: center;
  height: 62px;
  position: relative;
  flex-shrink: 0;
}

.site-header-logo {
  height: 47px;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 295px;
  cursor: pointer;
  transition: opacity 300ms ease;
}

.site-header-logo:hover {
  opacity: 0.9;
}

.site-header-logo-frame {
  position: absolute;
  top: 0.36px;
  right: 26px;
  bottom: -4.36px;
  left: 0;
  display: flex;
  align-items: center;
}

.site-header-logo-tab {
  height: 36px;
  position: relative;
  flex-shrink: 0;
  width: 225px;
}

.site-header-logo-tab {
  height: 36px;
  position: relative;
  flex-shrink: 0;
  width: 225px;
}

.site-header-logo-img-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.site-header-logo-img {
  position: absolute;
  height: 123.21%;
  left: 0;
  top: -22.32%;
  width: 123.14%;
  max-width: none;
}


/* =====================================================================
   HeroSection — デスクトップ版
   ===================================================================== */
.hero-section {
  display: flex; gap: 10px; align-items: flex-start;
  justify-content: center; position: relative; width: 100%;
}
.hero-frame1 {
  aspect-ratio: 1216 / 582; display: flex; flex: 1 0 0;
  align-items: flex-start; justify-content: center;
  min-width: 1px; padding-top: 48px; position: relative;
  overflow: hidden; max-height: 582px;
}
.hero-bg-overlay { position: absolute; inset: 0; pointer-events: none; }
.hero-bg-base { position: absolute; background: #fffbeb; inset: 0; }
.hero-bg-img-wrap { position: absolute; inset: 0; overflow: hidden; }
.hero-bg-img-wrap img {
  position: absolute; height: 122.54%; left: -3.23%;
  max-width: none; top: -11.27%; width: 103.23%;
}
.hero-bg-dark { position: absolute; background: rgba(0,0,0,0.2); inset: 0; }
.hero-frame {
  display: flex; flex-direction: column; gap: 16px;
  align-items: flex-start; position: relative; flex-shrink: 0; width: 572px;
}
.hero-tag {
  background: rgba(255,255,255,0.8); height: 38px; position: relative;
  border-radius: 30205300px; flex-shrink: 0; width: 300px;
}
.hero-tag-border {
  position: absolute; border: 0.9px solid white; inset: 0;
  pointer-events: none; border-radius: 30205300px;
}
.hero-tag p {
  position: absolute; transform: translateX(-50%);
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 600;
  line-height: 20px; left: 146.5px; color: #6a3907; font-size: 14px;
  text-align: center; top: 9px; letter-spacing: 1.2496px;
  text-transform: uppercase; white-space: nowrap;
}
.hero-logo { height: 261px; position: relative; flex-shrink: 0; width: 266px; }
.hero-logo img {
  position: absolute; inset: 0; max-width: none;
  object-fit: cover; pointer-events: none; width: 100%; height: 100%;
}
.hero-paragraph { position: relative; flex-shrink: 0; width: 100%; }
.hero-paragraph-inner { display: flex; flex-direction: row; align-items: center; width: 100%; height: 100%; }
.hero-paragraph-content {
  display: flex; align-items: center; padding: 0px 0px 16px;
  width: 100%; box-sizing: border-box; position: relative;
}
.hero-paragraph-text {
  font-family: 'Noto Sans JP',sans-serif; font-weight: 500;
  font-size: 20px; line-height: 0; color: white;
  position: relative; flex-shrink: 0; width: 532px;
}
.hero-paragraph-text p { line-height: 35px; margin-bottom: 0; }
.hero-buttons {
  display: flex; gap: 16px; align-items: center;
  position: relative; flex-shrink: 0;
}
.hero-btn-primary {
  background: #6a3907; height: 59px; position: relative;
  border-radius: 16777200px; flex-shrink: 0; width: 199.523px;
  cursor: pointer; text-decoration: none; display: block;
  transition: transform 300ms ease;
}
.hero-btn-primary:hover { transform: scale(1.05); }
.hero-btn-primary p {
  position: absolute; font-family: 'Noto Sans JP',sans-serif; font-weight: 500;
  line-height: 24px; left: 28px; color: white; font-size: 16px; top: 16px;
  white-space: nowrap;
}
.hero-btn-secondary {
  background: white; display: flex; height: 59px;
  align-items: center; justify-content: center; padding: 18px 34px;
  position: relative; border-radius: 16777200px; flex-shrink: 0;
  width: 211px; cursor: pointer; box-sizing: border-box;
  transition: transform 300ms ease;
}
.hero-btn-secondary:hover { transform: scale(1.05); }
.hero-btn-secondary-border {
  position: absolute; border: 2px solid #6a3907; inset: 0;
  pointer-events: none; border-radius: 16777200px;
}
.hero-btn-secondary p {
  font-family: 'Noto Sans JP',sans-serif; font-weight: 500;
  line-height: 24px; color: #6a3907; font-size: 16px;
  text-align: center; white-space: nowrap; position: relative; flex-shrink: 0;
}
.hero-main-image { height: 534px; position: relative; flex-shrink: 0; width: 553px; }
.hero-main-image-overflow {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.hero-main-image-overflow img {
  position: absolute; height: 109.36%; left: 0.02%;
  max-width: none; top: -0.03%; width: 99.95%;
}
.hero-scroll {
  position: absolute; display: flex; flex-direction: column; gap: 8px;
  height: 72px; align-items: center; left: 569px; top: 508px; width: 52px;
}
.hero-scroll-text { height: 16px; position: relative; flex-shrink: 0; width: 52px; }
.hero-scroll-text p {
  position: absolute; font-family: 'Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 16px; left: 0.21px; color: rgba(45,106,79,0.45);
  font-size: 12px; top: -1.75px; letter-spacing: 1.2px; white-space: nowrap;
}
.hero-scroll-line {
  background: rgba(64,145,108,0.3); flex: 1 0 0;
  min-height: 1px; opacity: 0.68; position: relative; width: 1px;
}
@media (max-width: 767px) { .hero-desktop { display: none !important; } }
@media (min-width: 768px) { .hero-desktop { display: block; } }
@media (min-width: 1216px) {
  .hero-bg-img-wrap img { width: 103.23%; height: auto; left: -3.23%; top: -11.27%; transform: none; }
  .hero-scroll { left: 50%; transform: translateX(-50%); }
}

/* =====================================================================
   Section — モバイルHeroSection
   ===================================================================== */
.section-mobile-wrapper {
  display: none; width: 100%; overflow: hidden; position: relative;
  background: #fffcf5; aspect-ratio: 365.969 / 933.535;
}
.section-mobile {
  position: relative; width: 365.969px; height: 933.535px;
  transform-origin: top left; flex-shrink: 0;
}
.sm-bg-container { position: absolute; height: 933.535px; left: 0; top: 0; width: 365.969px; }
.sm-bg-overlay { position: absolute; inset: 0; pointer-events: none; }
.sm-bg-color { position: absolute; background: #fffcf5; inset: 0; }
.sm-bg-image-wrapper { position: absolute; inset: 0; overflow: hidden; }
.sm-bg-image-wrapper img {
  position: absolute; height: 100%; left: -54.1%; max-width: none;
  top: -5.86%; width: 435.11%; object-fit: cover;
}
.sm-bg-dark { position: absolute; background: rgba(0,0,0,0.2); inset: 0; }
.sm-heading { position: absolute; height: 70.37px; left: 20px; top: 347px; width: 325.97px; }
.sm-heading-inner {
  position: absolute; transform: translateX(-50%);
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500;
  font-size: 22px; line-height: 0; color: white; text-align: center;
  left: 163px; top: -0.27px; letter-spacing: -0.2578px; width: 326px;
}
.sm-heading-inner p { line-height: 35.2px; margin-bottom: 0; }
.sm-buttons {
  position: absolute; display: flex; flex-direction: column; align-items: flex-start;
  gap: 11.991px; height: 123.672px; left: 20px; top: 465.37px; width: 325.97px;
  padding: 0 8px 0 7.994px; box-sizing: border-box;
}
.sm-btn-primary {
  background: #6a3907; flex: 1 0 0; min-height: 1px; position: relative;
  border-radius: 9999px; width: 309.982px; cursor: pointer;
  text-decoration: none; display: block;
}
.sm-btn-primary p {
  position: absolute; transform: translateX(-50%);
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500;
  font-size: 16px; line-height: 24px; color: white; text-align: center;
  left: 154.5px; top: 14.85px; letter-spacing: -0.3125px; white-space: nowrap;
}
.sm-btn-secondary {
  background: white; height: 55.709px; position: relative;
  border-radius: 9999px; flex-shrink: 0; width: 309.982px;
  cursor: pointer; text-decoration: none; display: block;
}
.sm-btn-secondary-border {
  position: absolute; border: 1.867px solid #6a3907; inset: 0;
  pointer-events: none; border-radius: 9999px;
}
.sm-btn-secondary p {
  position: absolute; transform: translateX(-50%);
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500;
  font-size: 16px; line-height: 24px; color: #6a3907; text-align: center;
  left: 155.01px; top: 14.72px; letter-spacing: -0.3125px; white-space: nowrap;
}
.sm-badge {
  position: absolute; transform: translateX(-50%);
  background: rgba(255,255,255,0.8); border: 0.934px solid white;
  height: 28.868px; left: calc(50% + 0.18px); border-radius: 9999px;
  top: 63.99px; width: 240.327px;
}
.sm-badge p {
  position: absolute; font-family: 'Inter','Noto Sans JP',sans-serif;
  font-weight: 600; font-size: 10px; line-height: 15px; color: #6a3907;
  left: 15.99px; top: 6.86px; letter-spacing: 1.6172px; white-space: nowrap;
}
.sm-logo-container {
  position: absolute; display: flex; align-items: flex-start; justify-content: center;
  height: 172.569px; left: 20px; top: 148px; width: 325.97px;
  padding: 0 74.994px 0 74.979px; box-sizing: border-box;
}
.sm-logo { height: 172.569px; position: relative; flex-shrink: 0; width: 175.997px; }
.sm-logo img {
  position: absolute; inset: 0; max-width: none;
  object-fit: cover; pointer-events: none; width: 100%; height: 100%;
}
.sm-cards-container {
  position: absolute; display: flex; align-items: flex-start; justify-content: center;
  height: 338px; left: 0; top: 596px; width: 366px;
  padding: 0 2.99px; box-sizing: border-box;
}
.sm-cards { height: 338.078px; position: relative; flex-shrink: 0; width: 319.989px; }
.sm-cards img {
  position: absolute; inset: 0; max-width: none;
  object-fit: cover; pointer-events: none; width: 100%; height: 100%;
}
@media (max-width: 767px) { .section-mobile-wrapper { display: block; } }
@media (min-width: 768px) { .section-mobile-wrapper { display: none !important; } }

/* =====================================================================
   AboutSection — デスクトップ版
   ===================================================================== */
.about-desktop-wrapper { display: block; min-width: 1190px; overflow-x: auto; }
.about-section {
  background: white; display: flex; flex-direction: column; align-items: center;
  padding: 112px 83px 112px; position: relative; width: 1190px; box-sizing: border-box;
}
.about-inner {
  display: flex; flex-direction: column; gap: 80px; align-items: flex-start;
  position: relative; flex-shrink: 0; width: 1024px; height: 1159.766px;
}
.about-header { height: 171.766px; position: relative; flex-shrink: 0; width: 100%; }
.about-badge {
  position: absolute; background: #e8f5e9; height: 24px;
  left: 473.04px; border-radius: 16777200px; top: 2px; width: 77.922px;
}
.about-badge p {
  position: absolute; transform: translateX(-50%);
  font-family: 'Noto Sans JP',sans-serif; font-weight: 400; line-height: 16px;
  left: 39.5px; color: #2d6a4f; font-size: 12px; text-align: center;
  top: 2px; letter-spacing: 1.2px; white-space: nowrap;
}
.about-title { position: absolute; height: 48px; left: 0; top: 50px; width: 1024px; }
.about-title p {
  position: absolute; transform: translateX(-50%);
  font-family: 'Noto Sans JP',sans-serif; font-weight: 700; line-height: 48px;
  left: 512.48px; color: #1a3a2a; font-size: 32px; text-align: center;
  top: -4px; white-space: nowrap;
}
.about-desc { position: absolute; height: 57.766px; left: 224px; top: 114px; width: 576px; }
.about-desc-inner {
  position: absolute; transform: translateX(-50%);
  font-family: 'Noto Sans JP',sans-serif; font-weight: 400; line-height: 0;
  left: 288px; color: #718096; font-size: 15.2px; text-align: center;
  top: -3px; width: 576px;
}
.about-desc-inner p { line-height: 28.88px; margin-bottom: 0; }
.about-cards {
  display: flex; flex-direction: column; gap: 96px; align-items: flex-start;
  position: relative; flex-shrink: 0; width: 1024px; height: 908px;
}
.about-real { height: 354px; position: relative; flex-shrink: 0; width: 1024px; }
.about-real-inner { position: relative; width: 100%; height: 100%; box-sizing: border-box; }
.about-real-img {
  position: absolute; height: 354px; left: 0; border-radius: 24px; top: 0; width: 472px;
  overflow: hidden;
  box-shadow: 0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1);
}
.about-real-img img {
  position: absolute; inset: 0; max-width: none;
  object-fit: cover; pointer-events: none; width: 100%; height: 100%;
}
.about-real-tag {
  position: absolute; background: #e8f5e9; height: 24px;
  left: 552px; border-radius: 16777200px; top: 40.79px; width: 96.797px;
}
.about-real-tag p {
  position: absolute; font-family: 'Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 16px; left: 12px; color: #008236; font-size: 12px;
  top: 2px; letter-spacing: 1.2px; white-space: nowrap;
}
.about-real-name { position: absolute; height: 30px; left: 552px; top: 80.79px; width: 472px; }
.about-real-name p {
  position: absolute; font-family: 'Noto Sans JP',sans-serif; font-weight: 700;
  line-height: 30px; left: 0; color: #1a3a2a; font-size: 20px;
  top: -2.5px; white-space: nowrap;
}
.about-real-sub { position: absolute; height: 24px; left: 552px; top: 122.79px; width: 472px; }
.about-real-sub p {
  position: absolute; font-family: 'Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 24px; left: 0; color: #40916c; font-size: 16px;
  top: 0.5px; white-space: nowrap;
}
.about-real-body { position: absolute; height: 144.414px; left: 552px; top: 170.79px; width: 472px; }
.about-real-body p {
  position: absolute; font-family: 'Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 28.88px; left: 0; color: #4a5568; font-size: 15.2px;
  top: -3px; width: 472px;
}
.about-sep { height: 8px; position: relative; flex-shrink: 0; width: 1024px; }
.about-sep-inner {
  display: flex; gap: 16px; align-items: center; position: relative;
  width: 100%; height: 100%; box-sizing: border-box;
}
.about-sep-line { background: #e2e8f0; flex: 492 0 0; height: 1px; min-width: 1px; position: relative; }
.about-sep-dot {
  background: #74c69d; position: relative; border-radius: 16777200px;
  flex-shrink: 0; width: 8px; height: 8px;
}
.about-virtual { flex: 1 0 0; min-height: 1px; position: relative; width: 1024px; }
.about-virtual-inner { position: relative; width: 100%; height: 100%; box-sizing: border-box; }
.about-virtual-img {
  position: absolute; height: 354px; left: 552px; border-radius: 24px; top: 0; width: 472px;
  overflow: hidden; box-shadow: 0px 20px 25px -5px rgba(0,0,0,0.1);
}
.about-virtual-img img {
  position: absolute; inset: 0; max-width: none;
  object-fit: cover; pointer-events: none; width: 100%; height: 100%;
}
.about-virtual-tag {
  position: absolute; background: #e8f5e9; height: 24px;
  left: 0; border-radius: 16777200px; top: 40.79px; width: 119.133px;
}
.about-virtual-tag p {
  position: absolute; font-family: 'Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 16px; left: 12px; color: #00a63e; font-size: 12px;
  top: 2px; letter-spacing: 1.2px; white-space: nowrap;
}
.about-virtual-name { position: absolute; height: 30px; left: 0; top: 80.79px; width: 472px; }
.about-virtual-name p {
  position: absolute; font-family: 'Noto Sans JP',sans-serif; font-weight: 700;
  line-height: 30px; left: 0; color: #1a3a2a; font-size: 20px;
  top: -2.5px; white-space: nowrap;
}
.about-virtual-sub { position: absolute; height: 24px; left: 0; top: 122.79px; width: 472px; }
.about-virtual-sub p {
  position: absolute; font-family: 'Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 24px; left: 0; color: #40916c; font-size: 16px;
  top: 0.5px; white-space: nowrap;
}
.about-virtual-body { position: absolute; height: 144.414px; left: 0; top: 170.79px; width: 472px; }
.about-virtual-body p {
  position: absolute; font-family: 'Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 28.88px; left: 0; color: #4a5568; font-size: 15.2px;
  top: -3px; width: 472px;
}
@media (max-width: 767px) { .about-desktop-wrapper { display: none !important; } }
@media (min-width: 768px) { .about-desktop-wrapper { display: block; } }
@media (min-width: 1216px) {
  .about-desktop-wrapper { width: 100%; min-width: unset; overflow-x: visible; }
  .about-section { margin: 0 auto; }
}

/* =====================================================================
   Section-3-128 — モバイルAboutSection
   ===================================================================== */
.about-sm-wrapper {
  display: none; width: 100%; overflow: hidden; position: relative;
  background: white; aspect-ratio: 365.969 / 1347.512;
}
.about-sm {
  position: relative; width: 365.969px; height: 1347.512px;
  transform-origin: top left; background: white; display: flex;
  flex-direction: column; gap: 39.999px; align-items: flex-start;
  padding: 63.995px 19.999px 63.995px ; box-sizing: border-box;
}
.about-sm-header { height: 135.284px; position: relative; flex-shrink: 0; width: 325.97px; }
.about-sm-badge {
  position: absolute; background: #e8f5e9; height: 23.004px;
  left: 129.58px; border-radius: 9999px; top: 2.54px; width: 66.81px;
}
.about-sm-badge p {
  position: absolute; transform: translateX(-50%);
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 15px; left: 32.99px; color: #2d6a4f; font-size: 10px;
  text-align: center; top: 4.86px; letter-spacing: 1.6172px; white-space: nowrap;
}
.about-sm-title { position: absolute; height: 38.992px; left: 0; top: 37.53px; width: 325.97px; }
.about-sm-title p {
  position: absolute; transform: translateX(-50%);
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 700;
  line-height: 39px; left: 163.9px; color: #1a3a2a; font-size: 26px;
  text-align: center; top: -0.27px; letter-spacing: 0.2158px; white-space: nowrap;
}
.about-sm-desc { position: absolute; height: 46.767px; left: 0; top: 88.52px; width: 325.97px; }
.about-sm-desc p {
  position: absolute; transform: translateX(-50%);
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 23.4px; left: 163px; color: #718096; font-size: 13px;
  text-align: center; top: 0.73px; letter-spacing: -0.0762px; width: 326px;
}
.about-sm-cards {
  display: flex; flex-direction: column; gap: 39.999px; align-items: flex-start;
  position: relative; flex-shrink: 0; width: 325.97px;
}
.about-sm-real-img {
  height: 232.727px; position: relative; border-radius: 16px;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1);
  flex-shrink: 0; width: 325.97px; overflow: hidden;
}
.about-sm-real-img img {
  position: absolute; inset: 0; max-width: none;
  object-fit: cover; pointer-events: none; width: 100%; height: 100%;
}
.about-sm-real-text { height: 196.259px; position: relative; flex-shrink: 0; width: 325.97px; }
.about-sm-real-tag {
  position: absolute; background: #e8f5e9; height: 23.004px;
  left: 0; border-radius: 9999px; top: 2.54px; width: 93.753px;
}
.about-sm-real-tag p {
  position: absolute; font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 15px; left: 11.99px; color: #008236; font-size: 10px;
  top: 4.86px; letter-spacing: 1.6172px; white-space: nowrap;
}
.about-sm-real-name { position: absolute; height: 27.001px; left: 0; top: 33.54px; width: 325.97px; }
.about-sm-real-name p {
  position: absolute; font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 700;
  line-height: 27px; left: 0; color: #1a3a2a; font-size: 18px;
  top: -0.13px; letter-spacing: -0.4395px; white-space: nowrap;
}
.about-sm-real-sub { position: absolute; height: 21.006px; left: 0; top: 64.53px; width: 325.97px; }
.about-sm-real-sub p {
  position: absolute; font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 21px; left: 0; color: #40916c; font-size: 14px;
  top: -0.13px; letter-spacing: -0.1504px; white-space: nowrap;
}
.about-sm-real-body { position: absolute; height: 98.728px; left: 0; top: 97.53px; width: 325.97px; }
.about-sm-real-body p {
  position: absolute; font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 24.7px; left: 0; color: #4a5568; font-size: 13px;
  top: 0.67px; letter-spacing: -0.0762px; width: 326px;
}
.about-sm-divider {
  display: flex; align-items: center; gap: 11.991px; height: 7.994px;
  position: relative; flex-shrink: 0; width: 325.97px;
}
.about-sm-divider-line { background: #e2e8f0; flex: 146.997 0 0; height: 0.992px; min-width: 1px; }
.about-sm-divider-dot { background: #74c69d; border-radius: 9999px; flex-shrink: 0; width: 7.994px; height: 7.994px; }
.about-sm-virtual-img {
  height: 251.005px; position: relative; border-radius: 16px;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1);
  flex-shrink: 0; width: 325.97px; overflow: hidden;
}
.about-sm-virtual-img img {
  position: absolute; inset: 0; max-width: none;
  object-fit: cover; pointer-events: none; width: 100%; height: 100%;
}
.about-sm-virtual-text { height: 196.259px; position: relative; flex-shrink: 0; width: 325.97px; }
.about-sm-virtual-tag {
  position: absolute; background: #e8f5e9; height: 23.004px;
  left: 0; border-radius: 9999px; top: 2.54px; width: 115.634px;
}
.about-sm-virtual-tag p {
  position: absolute; font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 15px; left: 11.99px; color: #00a63e; font-size: 10px;
  top: 4.86px; letter-spacing: 1.6172px; white-space: nowrap;
}
.about-sm-virtual-name { position: absolute; height: 27.001px; left: 0; top: 33.54px; width: 325.97px; }
.about-sm-virtual-name p {
  position: absolute; font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 700;
  line-height: 27px; left: 0; color: #1a3a2a; font-size: 18px;
  top: -0.13px; letter-spacing: -0.4395px; white-space: nowrap;
}
.about-sm-virtual-sub { position: absolute; height: 21.006px; left: 0; top: 64.53px; width: 325.97px; }
.about-sm-virtual-sub p {
  position: absolute; font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 21px; left: 0; color: #40916c; font-size: 14px;
  top: -0.13px; letter-spacing: -0.1504px; white-space: nowrap;
}
.about-sm-virtual-body { position: absolute; height: 98.728px; left: 0; top: 97.53px; width: 325.97px; }
.about-sm-virtual-body p {
  position: absolute; font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 24.7px; left: 0; color: #4a5568; font-size: 13px;
  top: 0.67px; letter-spacing: -0.0762px; width: 326px;
}
@media (max-width: 767px) { .about-sm-wrapper { display: block; } .about-desktop-wrapper { display: none !important; } }
@media (min-width: 768px) { .about-sm-wrapper { display: none !important; } .about-desktop-wrapper { display: block; } }

/* =====================================================================
   LineupSection — デスクトップ版
   ===================================================================== */
.lineup-desktop-wrapper { display: block; min-width: 1216px; overflow-x: auto; }
.lineup-section {
  background: #fffcf5; display: flex; flex-direction: column; align-items: flex-start;
  padding: 96px 120px; width: 1216px; box-sizing: border-box;
}
.lineup-inner { display: flex; flex-direction: column; gap: 47px; align-items: flex-start; width: 976px; }
.lineup-hd { height: 71.987px; position: relative; flex-shrink: 0; text-align: center; width: 100%; white-space: nowrap; }
.lineup-hd-sub {
  position: absolute; transform: translateX(-50%); font-family: 'Inter',sans-serif;
  font-weight: 400; line-height: 20px; left: 488.43px; color: #00a63e;
  font-size: 14px; top: 2.6px; letter-spacing: 1.2496px; text-transform: uppercase;
}
.lineup-hd-title {
  position: absolute; transform: translateX(-50%);
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500;
  line-height: 40px; left: 488.58px; color: #101828; font-size: 36px;
  top: 32.2px; letter-spacing: 0.3691px;
}
.lineup-block-content { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; flex-shrink: 0; width: 100%; }
.lineup-block-hd { height: 93px; position: relative; border-radius: 24px 24px 0 0; flex-shrink: 0; width: 100%; }
.lineup-block-hd.yellow { background: #ffb900; }
.lineup-block-hd.teal   { background: #26b9cc; }
.lineup-block-hd-icon {
  position: absolute; left: 32px; top: 24.35px; width: 44px; height: 44px;
  border-radius: 8px; overflow: hidden; flex-shrink: 0;
}
.lineup-block-hd-icon img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
}
.lineup-block-hd-labels {
  position: absolute; display: flex; flex-direction: column; gap: 2px;
  height: 45px; align-items: flex-start; left: 88px; top: 24px; width: 222px;
}
.lineup-block-hd-lineup {
  height: 16px; position: relative; flex-shrink: 0; width: 100%;
  font-family: 'Noto Sans JP',sans-serif; font-weight: 400; line-height: 16px;
  color: white; font-size: 12px; top: -2px; letter-spacing: 1.2px;
  white-space: nowrap; padding-top: 2px;
}
.lineup-block-hd-name {
  font-family: 'Noto Sans JP',sans-serif; font-weight: 700; height: 27px;
  line-height: 27px; flex-shrink: 0; font-size: 18px; color: white; white-space: nowrap;
}
.lineup-desc-card {
  background: white;
  filter: drop-shadow(0px 1px 1.5px rgba(0,0,0,0.1)) drop-shadow(0px 1px 1px rgba(0,0,0,0.1));
  position: relative; border-radius: 16px; flex-shrink: 0; width: 100%;
}
.lineup-desc-card-inner { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; }
.lineup-desc-card-text {
  position: relative; flex-shrink: 0; width: 100%;
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 26px; color: #4a5565; font-size: 16px; letter-spacing: -0.3125px;
}
.lineup-main-card {
  background: white; display: flex; height: 522px; align-items: flex-start;
  overflow: hidden; position: relative; border-radius: 16px;
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
  flex-shrink: 0; width: 100%;
}
.lineup-main-card-img-col { width: 390px; height: 522px; overflow: hidden; flex-shrink: 0; position: relative; }
.lineup-main-card-img-col img {
  position: absolute; inset: 0; max-width: none;
  object-fit: cover; pointer-events: none; width: 100%; height: 100%;
}
.lineup-main-card-info-col { height: 522px; position: relative; flex-shrink: 0; width: 586px; }
.lineup-card-info-label {
  position: absolute; display: flex; height: 15.992px; align-items: flex-start;
  left: 32px; right: 32px; top: 32px; font-family: 'Inter',sans-serif; font-weight: 400;
  line-height: 16px; color: #00c950; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
}
.lineup-card-info-heading {
  position: absolute; height: 27.99px; left: 32px; right: 32px; top: 55.98px;
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500; line-height: 28px;
  color: #101828; font-size: 20px; letter-spacing: -0.4492px; white-space: nowrap;
}
.lineup-card-info-list {
  position: absolute; display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start; left: 32px; right: 32px; top: 103.96px;
}
.lineup-list-item { height: 36px; position: relative; border-radius: 14px; flex-shrink: 0; width: 100%; }
.lineup-list-item.yellow { background: #fffbeb; }
.lineup-list-item.teal   { background: #eefdff; }
.lineup-list-item-border {
  position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  border-width: 0.9px; border-style: solid;
}
.yellow .lineup-list-item-border { border-color: #fee685; }
.teal   .lineup-list-item-border { border-color: #9cdae2; }
.lineup-list-item-inner { display: flex; flex-direction: row; align-items: center; width: 100%; height: 100%; }
.lineup-list-item-row {
  display: flex; gap: 12px; align-items: center; padding: 12.9px;
  position: relative; width: 100%; box-sizing: border-box;
}
.lineup-list-num {
  position: relative; border-radius: 30205300px; flex-shrink: 0;
  width: 27.99px; height: 27.99px; display: flex; align-items: center; justify-content: center;
}
.lineup-list-num.yellow { background: #ffb900; }
.lineup-list-num.teal   { background: #26b9cc; }
.lineup-list-num span {
  font-family: 'Inter',sans-serif; font-weight: 400; line-height: 16px;
  font-size: 12px; color: white; white-space: nowrap;
}
.lineup-list-text {
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 20px; color: #1e2939; font-size: 14px;
  letter-spacing: -0.1504px; white-space: nowrap;
}
.lineup-sub-card {
  background: white; height: 258.818px; overflow: hidden; position: relative;
  border-radius: 16px;
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
  flex-shrink: 0; width: 100%;
}
.lineup-sub-card-img { position: absolute; height: 258.818px; overflow: hidden; pointer-events: none; }
.lineup-sub-card-img.left        { left: 0;      top: 0;       width: 390.4px; }
.lineup-sub-card-img.right       { left: 585.6px; top: 0;      width: 390.4px; }
.lineup-sub-card-img.purple-left { left: 0; top: -1.83px; width: 390px; background: #7f22fe; overflow: hidden; }
.lineup-sub-card-img img {
  position: absolute; inset: 0; max-width: none;
  object-fit: cover; pointer-events: none; width: 100%; height: 100%;
}
.lineup-sub-card-label {
  position: absolute; font-family: 'Inter',sans-serif; font-weight: 400;
  line-height: 16px; left: 32px; color: #00a63e; font-size: 12px;
  letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap;
}
.lineup-sub-card-label.park-types-label   { left: 432.08px; top: 75.24px; }
.lineup-sub-card-label.real-card-label    { left: 32px; top: 63.32px; }
.lineup-sub-card-label.back-design-label  { left: 32px; top: 63.32px; }
.lineup-sub-card-label.content-clear-label{ left: 32px; top: 63.32px; }
.lineup-sub-card-heading {
  position: absolute; font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500;
  line-height: 28px; color: #101828; font-size: 20px;
  letter-spacing: -0.4492px; white-space: nowrap;
}
.lineup-sub-card-heading.park-types-heading { left: 432.08px; top: 99.02px; }
.lineup-sub-card-heading.real-card-heading  { left: 32px;     top: 87.1px; }
.lineup-sub-card-heading.back-design-heading{ left: 32px;     top: 87.1px; }
.lineup-sub-card-body {
  position: absolute; height: 68.189px; left: 32px; top: 127.29px; width: 521.603px;
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 22.75px; color: #4a5565; font-size: 14px; letter-spacing: -0.1504px;
}
.lineup-sub-card-body.park-types-body { left: 432.08px; top: 139.91px; width: 522px; }
.lineup-park-section { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; flex-shrink: 0; width: 100%; }
.lineup-park-section-hd { display: flex; gap: 7.989px; height: 28.004px; align-items: center; flex-shrink: 0; width: 100%; }
.lineup-park-section-hd svg { flex-shrink: 0; }

.icon-tpc-info {
  width: 17.99px;
  height: 17.99px;
  flex-shrink: 0;
  display: inline-block;
}
.icon-tpc-map {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-block;
}
.icon-tpc-mobile {
  width: 23.996px;
  height: 23.996px;
  flex-shrink: 0;
  display: inline-block;
}
.icon-tpc-qr {
  width: 23.996px;
  height: 23.996px;
  flex-shrink: 0;
  display: inline-block;
}

.lineup-park-section-hd-text {
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500;
  line-height: 28px; color: #1e2939; font-size: 18px;
  letter-spacing: -0.4395px; white-space: nowrap;
}
.lineup-park-cards { height: 251.504px; position: relative; flex-shrink: 0; width: 100%; }
.lineup-park-card {
  position: absolute; background: white; display: flex; flex-direction: column;
  gap: 12px; height: 117.756px; align-items: flex-start;
  padding: 20.887px 20.887px 0.9px; border-radius: 16px; width: 314.672px;
  box-sizing: border-box;
  filter: drop-shadow(0px 1px 1.5px rgba(0,0,0,0.1)) drop-shadow(0px 1px 1px rgba(0,0,0,0.1));
  cursor: pointer; transition: transform 300ms ease;
}
.lineup-park-card:hover { transform: scale(1.05); }
.lineup-park-card-border {
  position: absolute; border: 0.9px solid #f3f4f6; inset: 0;
  pointer-events: none; border-radius: 16px;
}
.lineup-park-card-name {
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500;
  line-height: 24px; color: #101828; font-size: 16px;
  letter-spacing: -0.3125px; white-space: nowrap;
}
.lineup-park-card-addr-row { display: flex; gap: 7.989px; align-items: flex-start; flex-shrink: 0; width: 100%; }
.lineup-park-card-addr-row svg { flex-shrink: 0; margin-top: 1px; }
.lineup-park-card-addr {
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 20px; color: #6a7282; font-size: 14px;
  letter-spacing: -0.1504px; flex: 1;
}
@media (max-width: 767px) { .lineup-desktop-wrapper { display: none !important; } }
@media (min-width: 768px) { .lineup-desktop-wrapper { display: block; } }
@media (min-width: 1216px) {
  .lineup-desktop-wrapper { width: 100%; min-width: unset; overflow-x: visible; }
  .lineup-section { width: 100%; align-items: center; }
}

/* =====================================================================
   Section-9-825 — モバイルLineupSection
   ===================================================================== */
.lineup-mobile-wrapper { display: block; width: 100%; background: #fffcf5; }
.lineup-sm-section {
  background: #fffcf5; display: flex; flex-direction: column; align-items: center;
  padding: 40px 24px 48px; width: 100%; box-sizing: border-box; gap: 24px;
}
.lineup-sm-hd { height: 67.977px; position: relative; text-align: center; width: 325.97px; white-space: nowrap; flex-shrink: 0; }
.lineup-sm-hd-sub {
  position: absolute; transform: translateX(-50%); font-family: 'Inter',sans-serif;
  font-weight: 400; line-height: 15px; left: 163.4px; color: #00a63e;
  font-size: 10px; top: 7.4px; letter-spacing: 1.6172px; text-transform: uppercase;
}
.lineup-sm-hd-title {
  position: absolute; transform: translateX(-50%);
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500;
  line-height: 36px; left: 163.22px; color: #101828; font-size: 24px;
  top: 31.72px; letter-spacing: 0.0703px;
}
.lineup-sm-block {
  display: flex; flex-direction: column; gap: 18px; align-items: center;
  overflow: hidden; padding-bottom: 24px; border-radius: 24px;
  flex-shrink: 0; width: 100%;
}
.lineup-sm-block-hd {
  display: flex; gap: 11.991px; height: 83.994px; align-items: center;
  padding: 20px; flex-shrink: 0; width: 100% ; box-sizing: border-box;
}
.lineup-sm-block-hd.yellow { background: #ffb900; }
.lineup-sm-block-hd.teal   { background: #26b9cc; }
.lineup-sm-block-hd-icon { position: relative; border-radius: 8px; flex-shrink: 0; width: 43.996px; height: 43.996px; overflow: hidden; }
.lineup-sm-block-hd-icon img {
  position: absolute; inset: 0; max-width: none; object-fit: cover;
  pointer-events: none; border-radius: 8px; width: 100%; height: 100%;
}
.lineup-sm-block-hd-labels { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; width: 79.968px; }
.lineup-sm-block-hd-lineup {
  height: 15.01px; position: relative; flex-shrink: 0;
  font-family: 'Inter',sans-serif; font-weight: 400; line-height: 15px;
  color: white; font-size: 10px; letter-spacing: 1.6172px; white-space: nowrap;
}
.lineup-sm-block-hd-name {
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 700; height: 23.996px;
  line-height: 24px; flex-shrink: 0; font-size: 16px; color: white;
  letter-spacing: -0.3125px; white-space: nowrap;
}
.lineup-sm-desc {
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 23.4px; color: #4a5565; font-size: 13px;
  letter-spacing: -0.0762px; width: 100%; flex-shrink: 0;
}
.lineup-sm-card-info {
  background: white; filter: drop-shadow(0px 1px 1.5px rgba(0,0,0,0.1));
  border-radius: 16px; flex-shrink: 0; padding-bottom: 24px; overflow: hidden; width: 100%; 
}
.lineup-sm-card-info-img { position: relative; height:auto; aspect-ratio: 3 / 2; border-radius: 16px 16px 0 0; flex-shrink: 0; width: 100%; overflow: hidden; }
.lineup-sm-card-info-img img {
  position: absolute; inset: 0; max-width: none; object-fit: cover;
  pointer-events: none; border-radius: 16px 16px 0 0; width: 100%; height:100%; 
}
.lineup-sm-card-label {
  font-family: 'Inter',sans-serif; font-weight: 400; line-height: 15px; color: #00c950;
  font-size: 10px; letter-spacing: 1.6172px; text-transform: uppercase;
  white-space: nowrap; margin: 16px 20px 0; display: block;
}
.lineup-sm-card-heading {
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500;
  line-height: 24px; color: #101828; font-size: 16px;
  letter-spacing: -0.3125px; white-space: nowrap; margin: 0 20px 0; display: block;
}
.lineup-sm-list { display: flex; flex-direction: column; gap: 7.994px; align-items: flex-start; margin: 0 20px; }
.lineup-sm-list-item { height: 41.851px; position: relative; border-radius: 14px; flex-shrink: 0; width: 100%; }
.lineup-sm-list-item.yellow { background: #fffbeb; }
.lineup-sm-list-item.teal   { background: #ecfeff; }
.lineup-sm-list-item-border {
  position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  border-width: 0.934px; border-style: solid;
}
.yellow .lineup-sm-list-item-border { border-color: #fee685; }
.teal   .lineup-sm-list-item-border { border-color: #a5f3fc; }
.lineup-sm-list-item-row {
  display: flex; gap: 11.991px; align-items: center; padding: 8.934px 12.934px;
  position: relative; width: 100%; height: 100%; box-sizing: border-box;
}
.lineup-sm-list-num { border-radius: 31326200px; flex-shrink: 0; width: 23.996px; height: 23.996px; display: flex; align-items: center; justify-content: center; }
.lineup-sm-list-num.yellow { background: #ffb900; }
.lineup-sm-list-num.teal   { background: #26b9cc; }
.lineup-sm-list-num span { font-family: 'Inter',sans-serif; font-weight: 400; line-height: 16.5px; font-size: 11px; color: white; letter-spacing: 0.0645px; white-space: nowrap; }
.lineup-sm-list-text { font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400; line-height: 19.5px; color: #1e2939; font-size: 13px; letter-spacing: -0.0762px; white-space: nowrap; }
.lineup-sm-sub-card { filter: drop-shadow(0px 1px 1.5px rgba(0,0,0,0.1)); flex-shrink: 0; width: 100%; overflow: hidden; }
.lineup-sm-sub-card-row { display: flex; align-items: flex-start; height: 131px; }
.lineup-sm-sub-card-img-col { position: relative; height: 131px; flex-shrink: 0; width: 115px; overflow: hidden;}
.lineup-sm-sub-card-img-col.left  { border-radius: 16px 0 0 16px; }
.lineup-sm-sub-card-img-col.right { border-radius: 0 16px 16px 0; }
.lineup-sm-sub-card-img-col img { position: absolute; inset: 0; max-width: none; object-fit: cover; pointer-events: none; width: 100%; height:100%; }
.lineup-sm-sub-card-text-col {
  background: white; flex: 1 0 0; height: 131px; min-width: 0; position: relative;
  padding: 15.988px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px;
}
.lineup-sm-sub-card-text-col.left  { border-radius: 16px 0 0 16px; }
.lineup-sm-sub-card-text-col.right { border-radius: 0 16px 16px 0; }
.lineup-sm-sub-card-sub { font-family: 'Inter',sans-serif; font-weight: 400; line-height: 16px; color: #00a63e; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; }
.lineup-sm-sub-card-name { font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 700; line-height: 19.5px; color: #101828; font-size: 13px; letter-spacing: -0.0762px; }
.lineup-sm-sub-card-body { font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400; line-height: 18.7px; color: #4a5565; font-size: 11px; letter-spacing: 0.0645px; }
.lineup-sm-back-design { filter: drop-shadow(0px 1px 1.5px rgba(0,0,0,0.1)); flex-shrink: 0; width: 100%; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; border-radius: 16px; }
.lineup-sm-back-design-img { position: relative; height:auto; aspect-ratio: 3 / 2; border-radius: 16px 16px 0 0; flex-shrink: 0; width: 100%; overflow: hidden; }
.lineup-sm-back-design-img img { position: absolute; inset: 0; max-width: none; object-fit: cover; pointer-events: none; border-radius: 16px 16px 0 0; width: 100%; height: 100%; }
.lineup-sm-back-design-text { background: white; border-radius: 0 0 16px 16px; flex-shrink: 0; width: 100%; padding: 15.988px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
.lineup-sm-park-section { display: flex; flex-direction: column; gap: 19.987px; align-items: flex-start; flex-shrink: 0; width: 100%; }
.lineup-sm-park-section-hd { display: flex; gap: 7.989px; height: 28.004px; align-items: center; flex-shrink: 0; width: 100%; box-sizing: border-box; }
.lineup-sm-park-section-hd-text { font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500; line-height: 28px; color: #1e2939; font-size: 18px; letter-spacing: -0.4395px; white-space: nowrap; }
.lineup-sm-park-list { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; width: 100%; box-sizing: border-box; }
.lineup-sm-park-card {
  background: white; display: flex; flex-direction: column; height: 118px;
  align-items: flex-start; padding: 20.887px 20.887px 0.9px; position: relative;
  border-radius: 16px; flex-shrink: 0; width: 100%; box-sizing: border-box;
  filter: drop-shadow(0px 1px 1.5px rgba(0,0,0,0.1)) drop-shadow(0px 1px 1px rgba(0,0,0,0.1));
  cursor: pointer; transition: transform 300ms ease;
}
.lineup-sm-park-card:hover { transform: scale(1.05); }
.lineup-sm-park-card-border { position: absolute; border: 0.9px solid #f3f4f6; inset: 0; pointer-events: none; border-radius: 16px; }
.lineup-sm-park-card-name { font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500; line-height: 24px; color: #101828; font-size: 13px; letter-spacing: -0.3125px; white-space: nowrap; margin: 0 0 18px 0; }
.lineup-sm-park-card-addr-row { display: flex; gap: 7.989px; align-items: flex-start; width: 100%; }
.lineup-sm-park-card-addr { font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400; line-height: 20px; color: #6a7282; font-size: 12px; letter-spacing: -0.1504px; flex: 1; }
@media (min-width: 768px) { .lineup-mobile-wrapper { display: none !important; } }
@media (max-width: 767px) { .lineup-mobile-wrapper { display: block; } }

/* =====================================================================
   HowToUseSection — デスクトップ版
   ===================================================================== */
.htuse-desktop-wrapper { display: block; min-width: 1174px; overflow-x: auto; }
.htuse-section {
  background: white; display: flex; flex-direction: column; align-items: flex-start;
  padding: 96px 162.92px; width: 1174px; box-sizing: border-box;
}
.htuse-inner { display: flex; flex-direction: column; gap: 64px; align-items: flex-start; width: 848px; }
.htuse-hd { height: 71.987px; position: relative; flex-shrink: 0; text-align: center; width: 100%; white-space: nowrap; }
.htuse-hd-sub {
  position: absolute; transform: translateX(-50%); font-family: 'Inter',sans-serif;
  font-weight: 400; line-height: 20px; left: 424.73px; color: #00a63e;
  font-size: 14px; top: 2.6px; letter-spacing: 1.2496px; text-transform: uppercase;
}
.htuse-hd-title {
  position: absolute; transform: translateX(-50%);
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500;
  line-height: 40px; left: 424px; color: #101828; font-size: 36px;
  top: 32.2px; letter-spacing: 0.3691px;
}
.htuse-cards { height: 273.39px; position: relative; flex-shrink: 0; width: 100%; }
.htuse-card { position: absolute; background: #f9fafb; height: 273.39px; border-radius: 16px; overflow: hidden; top: 0; }
.htuse-card-1 { left: 0;     width: 407.996px; }
.htuse-card-2 { left: 440px; width: 408.01px; }
.htuse-card-num {
  position: absolute; height: 72.001px; font-family: 'Inter',sans-serif; font-weight: 400;
  line-height: 72px; color: #e2e8f0; font-size: 72px;
  top: 17.69px; letter-spacing: 0.123px; white-space: nowrap;
}
.htuse-card-1 .htuse-card-num { right: 24px; }
.htuse-card-2 .htuse-card-num { right: 24px; }
.htuse-card-icon {
  position: absolute; left: 32px; top: 32px; width: 47.991px; height: 47.991px;
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  padding: 11.998px; box-sizing: border-box;
}
.htuse-card-icon.green  { background: #00c950; }
.htuse-card-icon.purple { background: #8e51ff; }
.htuse-card-heading {
  position: absolute; height: 28.004px; left: 32px; top: 99.98px; width: 344px;
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500; line-height: 28px;
  color: #101828; font-size: 18px; letter-spacing: -0.4395px; white-space: nowrap;
}
.htuse-card-body {
  position: absolute; left: 32px; top: 139.98px; width: 344px;
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400;
  line-height: 22.75px; color: #4a5565; font-size: 14px; letter-spacing: -0.1504px;
}
.htuse-card-btn { position: absolute; left: 32.08px; top: 205.25px; }
.htuse-btn {
  background: #101828; height: 43px; border-radius: 14px; width: 229px; border: none;
  cursor: pointer; display: flex; align-items: center; padding: 10px 16px 10px 15.992px;
  box-sizing: border-box; gap: 8px; justify-content: center; transition: transform 300ms ease;
}
.htuse-btn:hover { transform: scale(1.05); }
.htuse-btn-label {
  font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500; line-height: 28px;
  font-size: 16px; color: white; letter-spacing: -0.4395px; white-space: nowrap;
}
.htuse-btn-icon { background: white; flex-shrink: 0; width: 16px; height: 16px; }
.htuse-notes { background: #fffbeb; position: relative; border-radius: 16px; flex-shrink: 0; width: 100%; }
.htuse-notes-border { position: absolute; border: 0.9px solid #fee685; inset: 0; pointer-events: none; border-radius: 16px; }
.htuse-notes-inner {
  display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
  padding: 32.899px 32.899px ; position: relative; width: 100%; box-sizing: border-box;
}
.htuse-notes-hd { display: flex; gap: 11.998px; height: 28.004px; align-items: center; flex-shrink: 0; width: 100%; }
.htuse-notes-hd-text { font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500; line-height: 28px; color: #973c00; font-size: 18px; letter-spacing: -0.4395px; white-space: nowrap; }
.htuse-notes-list { display: flex; flex-direction: column; gap: 11.998px; align-items: flex-start; flex-shrink: 0; width: 100%; list-style: none; }
.htuse-notes-item { height: 19.987px; position: relative; flex-shrink: 0; width: 100%; }
.htuse-notes-bullet { position: absolute; background: #ffb900; left: 0; border-radius: 30205300px; width: 5.992px; height: 5.992px; top: 7.99px; }
.htuse-notes-item-text { position: absolute; font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400; line-height: 20px; left: 17.99px; color: #973c00; font-size: 14px; top: 0.8px; letter-spacing: -0.1504px; white-space: nowrap; }
@media (max-width: 767px) { .htuse-desktop-wrapper { display: none !important; } }
@media (min-width: 768px) { .htuse-desktop-wrapper { display: block; } }
@media (min-width: 1174px) {
  .htuse-desktop-wrapper { width: 100%; min-width: unset; overflow-x: visible; }
  .htuse-section { width: 100%; align-items: center; }
}

/* =====================================================================
   Section-9-1059 — モバイルHowToUseSection
   ===================================================================== */
.htuse-mobile-wrapper { display: block; width: 100%; }
.htuse-sm-section {
  background: white; display: flex; flex-direction: column; gap: 32px;
  align-items: center; padding: 35px 20px; width: 100%; box-sizing: border-box; position: relative;
}
.htuse-sm-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  border-top: 0.934px solid #f0e9d8; pointer-events: none;
}
.htuse-sm-hd { display: grid; grid-template-columns: max-content; grid-template-rows: max-content; place-items: start; text-align: center; white-space: nowrap; position: relative; flex-shrink: 0; }
.htuse-sm-hd-sub { grid-column: 1; grid-row: 1; font-family: 'Inter',sans-serif; font-weight: 400; line-height: 15px; color: #00a63e; font-size: 10px; letter-spacing: 1.6172px; text-transform: uppercase; margin: 0 0 0 21px; }
.htuse-sm-hd-title { grid-column: 1; grid-row: 1; font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500; line-height: 36px; color: #101828; font-size: 24px; letter-spacing: 0.0703px; margin: 24.32px 0 0 0; }
.htuse-sm-container { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; flex-shrink: 0; width: 326px; }
.htuse-sm-card { background: #f9fafb; position: relative; border-radius: 16px; flex-shrink: 0; width: 100%; overflow: hidden; }
.htuse-sm-card-inner { display: flex; gap: 52px; align-items: flex-start; padding: 24px; position: relative; box-sizing: border-box; }
.htuse-sm-card-frame4 { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; flex-shrink: 0; width: 268px; }
.htuse-sm-icon { width: 47.991px; height: 47.991px; border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 11.998px; box-sizing: border-box; flex-shrink: 0; }
.htuse-sm-icon.green  { background: #00c950; }
.htuse-sm-icon.purple { background: #8e51ff; }
.htuse-sm-card-text { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; flex-shrink: 0; width: 100%; }
.htuse-sm-card-heading { font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500; line-height: 28px; color: #101828; font-size: 18px; letter-spacing: -0.4395px; width: 267px; }
.htuse-sm-card-body { font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400; line-height: 22.75px; color: #4a5565; font-size: 14px; letter-spacing: -0.1504px; width: 253px; }
.htuse-sm-card-body.step2 { width: 264px; }
.htuse-sm-card-btn-wrap { display: flex; align-items: flex-start; flex-shrink: 0; width: 100%; }
.htuse-sm-btn { background: #101828; height: 60px; border-radius: 14px; width: 268px; border: none; cursor: pointer; display: flex; align-items: center; padding: 10px 16px 10px 15.992px; box-sizing: border-box; gap: 8px; justify-content: center; transition: transform 300ms ease; }
.htuse-sm-btn:hover { transform: scale(1.05); }
.htuse-sm-btn-label { font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500; line-height: 28px; font-size: 16px; color: white; letter-spacing: -0.4395px; white-space: nowrap; flex: 1 0 0; text-align: center; }
.htuse-sm-btn-icon { background: white; flex-shrink: 0; width: 16px; height: 16px; }
.htuse-sm-card-2-inner { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 24px; box-sizing: border-box; }
.htuse-sm-notes { background: #fffbeb; height: 352px; position: relative; border-radius: 16px; flex-shrink: 0; width: 100%; }
.htuse-sm-notes-border { position: absolute; border: 0.9px solid #fee685; inset: 0; pointer-events: none; border-radius: 16px; }
.htuse-sm-notes-inner { display: flex; flex-direction: column; gap: 19.987px; align-items: flex-start; padding: 32.899px 32.899px 0.9px; position: relative; width: 100%; box-sizing: border-box; }
.htuse-sm-notes-hd { display: flex; gap: 11.998px; height: 28.004px; align-items: center; flex-shrink: 0; width: 100%; }
.htuse-sm-notes-hd-text { font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 500; line-height: 28px; color: #973c00; font-size: 18px; letter-spacing: -0.4395px; white-space: nowrap; }
.htuse-sm-notes-list { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; flex-shrink: 0; list-style: none; }
.htuse-sm-notes-item { display: flex; gap: 12px; align-items: center; flex-shrink: 0; width: 260px; }
.htuse-sm-notes-bullet { background: #ffb900; border-radius: 30205300px; flex-shrink: 0; width: 5.992px; height: 5.992px; }
.htuse-sm-notes-item-text { font-family: 'Inter','Noto Sans JP',sans-serif; font-weight: 400; line-height: 20px; color: #973c00; font-size: 11px; letter-spacing: -0.1504px; }
@media (min-width: 768px) { .htuse-mobile-wrapper { display: none !important; } }
@media (max-width: 767px) { .htuse-mobile-wrapper { display: block; } }

.tpp__anchor{
    display: block;
    padding-top: 120px;
    margin-top: -120px;
}

@media (min-width: 1200px) {
  .tpp__anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
  }
}