/* =========================================================
   B-ART SPACE
   TOP PAGE 01-04
   FINAL
   2026-09-14
========================================================= */


/* =========================================================
   RESET
========================================================= */

#bas-hero-202609,
#bas-first-visit-202609,
#bas-quicknav-202609,
#bas-step2-202609,
#bas-hero-202609 *,
#bas-first-visit-202609 *,
#bas-quicknav-202609 *,
#bas-step2-202609 *,
#bas-hero-202609 *::before,
#bas-first-visit-202609 *::before,
#bas-quicknav-202609 *::before,
#bas-step2-202609 *::before,
#bas-hero-202609 *::after,
#bas-first-visit-202609 *::after,
#bas-quicknav-202609 *::after,
#bas-step2-202609 *::after {
  box-sizing: border-box;
}


#bas-hero-202609,
#bas-first-visit-202609,
#bas-quicknav-202609,
#bas-step2-202609 {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}



/* =========================================================
   HERO
========================================================= */

#bas-hero-202609 {
  --o: #e88746;
  --od: #c97038;
  --t: #302a27;
  --s: #625b56;

  width: 100vw;
  margin-left: calc(50% - 50vw);

  overflow: hidden;

  background: #fbf7f2;
}


#bas-hero-202609 .bas-hero-bg {
  position: relative;

  min-height: 640px;

  overflow: hidden;

  background: #eee6df;
}



/* SLIDES */

#bas-hero-202609 .bas-hero-slides {
  position: absolute;

  inset: 0;

  z-index: 0;
}


#bas-hero-202609 .bas-hero-slide {
  position: absolute;

  inset: 0;

  opacity: 0;

  transition:
    opacity 1.35s ease;
}


#bas-hero-202609 .bas-hero-slide.is-active {
  opacity: 1;
}


#bas-hero-202609 .bas-hero-slide img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}



/* HERO OVERLAY */

#bas-hero-202609 .bas-hero-bg::before {
  content: "";

  position: absolute;

  z-index: 1;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(251,247,242,.99),
      rgba(251,247,242,.97) 25%,
      rgba(251,247,242,.91) 38%,
      rgba(251,247,242,.67) 51%,
      rgba(251,247,242,.24) 66%,
      rgba(251,247,242,0) 100%
    );
}


#bas-hero-202609 .bas-hero-inner {
  position: relative;

  z-index: 2;

  display: flex;
  align-items: center;

  width: min(1240px,100%);
  min-height: 640px;

  margin: auto;

  padding: 0 44px;
}


#bas-hero-202609 .bas-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: min(650px,56%);

  padding: 48px 0 50px;
}


#bas-hero-202609 .bas-hero-status {
  display: inline-flex;
  align-items: center;

  margin: 0 0 20px;

  padding: 8px 14px;

  border:
    1px solid
    rgba(232,135,70,.55);

  border-radius: 999px;

  background:
    rgba(255,255,255,.82);

  color: var(--od);

  font-size: 12px;
  font-weight: 700;
}


#bas-hero-202609 .bas-hero-status::before {
  content: "";

  width: 6px;
  height: 6px;

  margin-right: 8px;

  border-radius: 50%;

  background: var(--o);
}


#bas-hero-202609 .bas-hero-eyebrow {
  margin: 0 0 13px;

  color: var(--o);

  font:
    11px/1.5
    Georgia,
    "Times New Roman",
    serif;

  letter-spacing: .18em;
}


#bas-hero-202609 .bas-hero-title {
  margin: 0;

  color: var(--t);

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size:
    clamp(34px,3.55vw,49px);

  font-weight: 600;

  line-height: 1.52;

  letter-spacing: .025em;
}


#bas-hero-202609 .bas-hero-title span {
  position: relative;
}


#bas-hero-202609
.bas-hero-title span::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 62px;
  height: 2px;

  background: var(--o);
}


#bas-hero-202609 .bas-hero-lead {
  max-width: 615px;

  margin: 32px 0 0;

  color: var(--s);

  font-size: 14px;
  font-weight: 500;

  line-height: 1.95;
}


#bas-hero-202609 .bas-hero-lead strong {
  color: #433c38;

  font-weight: 700;
}


#bas-hero-202609 .bas-hero-methods,
#bas-hero-202609 .bas-hero-points,
#bas-hero-202609 .bas-hero-buttons {
  display: flex;
  flex-wrap: wrap;
}


#bas-hero-202609 .bas-hero-methods {
  gap: 7px;

  margin-top: 19px;
}


#bas-hero-202609 .bas-hero-methods span {
  display: inline-flex;
  align-items: center;

  min-height: 27px;

  padding: 0 10px;

  border:
    1px solid
    rgba(232,135,70,.28);

  border-radius: 999px;

  background:
    rgba(255,255,255,.62);

  color: #866b5b;

  font:
    8px/1
    Georgia,
    "Times New Roman",
    serif;

  letter-spacing: .10em;
}


#bas-hero-202609 .bas-hero-points {
  gap: 7px 18px;

  margin-top: 17px;
}


#bas-hero-202609 .bas-hero-points span {
  position: relative;

  padding-left: 16px;

  color: #554d48;

  font-size: 11.5px;
  font-weight: 600;
}


#bas-hero-202609
.bas-hero-points span::before {
  content: "○";

  position: absolute;

  left: 0;

  color: var(--o);

  font-size: 9px;
}


#bas-hero-202609 .bas-hero-buttons {
  gap: 11px;

  width: 100%;
  max-width: 560px;

  margin-top: 25px;
}


#bas-hero-202609 .bas-hero-btn {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 1 1 0;

  min-width: 0;
  min-height: 58px;

  padding:
    0 39px
    0 18px;

  border-radius: 8px;

  text-decoration: none !important;

  white-space: nowrap;

  font-size: 13px;
  font-weight: 700;

  transition: .2s ease;
}


#bas-hero-202609 .bas-hero-btn:hover {
  transform: translateY(-2px);
}


#bas-hero-202609 .bas-hero-btn-main {
  border: 1px solid var(--o);

  background:
    linear-gradient(
      135deg,
      #ee974e,
      #df7a3b
    );

  color: #fff !important;

  box-shadow:
    0 8px 22px
    rgba(211,111,51,.16);
}


#bas-hero-202609 .bas-hero-btn-line {
  border:
    1px solid
    rgba(232,135,70,.78);

  background:
    rgba(255,255,255,.95);

  color: var(--od) !important;
}


#bas-hero-202609 .bas-hero-line-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 29px;
  height: 20px;

  margin-right: 7px;

  border-radius: 10px;

  background: #37be62;

  color: #fff;

  font-size: 7px;
  font-weight: 800;
}


#bas-hero-202609 .bas-hero-arrow {
  position: absolute;

  top: 50%;
  right: 15px;

  transform:
    translateY(-54%);

  font-size: 22px;
  font-weight: 300;
}


#bas-hero-202609 .bas-hero-location {
  margin: 14px 0 0;

  color: #8a817b;

  font-size: 10.5px;

  line-height: 1.65;
}



/* =========================================================
   FIRST VISIT
========================================================= */

#bas-first-visit-202609 {
  --o: #df8754;
  --od: #c87548;
  --t: #302b28;
  --s: #6c645f;
  --b: #eadbcf;
  --g: #79a66c;

  background: #fff;

  scroll-margin-top: 90px;
}


#bas-first-visit-202609 .basFV-inner {
  width: min(1120px,90%);

  margin: auto;

  padding: 54px 0 80px;
}


#bas-first-visit-202609 .basFV-status {
  position: relative;

  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  margin:
    -28px auto
    68px;

  padding: 21px 24px;

  border:
    1px solid
    var(--b);

  border-radius: 12px;

  background:
    rgba(255,255,255,.97);

  box-shadow:
    0 10px 28px
    rgba(77,55,41,.075);
}


#bas-first-visit-202609 .basFV-status-label {
  display: block;

  margin-bottom: 5px;

  color: var(--o);

  font:
    8.5px
    Georgia,
    "Times New Roman",
    serif;

  letter-spacing: .18em;
}


#bas-first-visit-202609 .basFV-status strong {
  display: block;

  color: #453f3b;

  font-size: 13px;

  line-height: 1.6;
}


#bas-first-visit-202609 .basFV-status p {
  margin: 4px 0 0;

  color: #837a74;

  font-size: 10px;

  line-height: 1.6;
}


#bas-first-visit-202609 .basFV-status-link {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 155px;
  min-height: 44px;

  padding:
    0 34px
    0 18px;

  border:
    1px solid
    var(--o);

  border-radius: 7px;

  background: #fff;

  color: var(--od) !important;

  text-decoration: none !important;

  font-size: 11px;
  font-weight: 700;
}


#bas-first-visit-202609
.basFV-status-link span {
  position: absolute;

  right: 14px;

  font-size: 19px;
}


#bas-first-visit-202609 .basFV-head {
  max-width: 720px;

  margin:
    0 auto
    30px;

  text-align: center;
}


#bas-first-visit-202609 .basFV-label {
  margin: 0 0 9px;

  color: var(--o);

  font:
    11px
    Georgia,
    "Times New Roman",
    serif;

  letter-spacing: .2em;
}


#bas-first-visit-202609
.basFV-label::after {
  content: "";

  display: block;

  width: 36px;
  height: 1px;

  margin:
    8px auto
    0;

  background: var(--o);
}


#bas-first-visit-202609 .basFV-head h2 {
  margin: 0 0 14px;

  color: var(--t);

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size:
    clamp(28px,3vw,40px);

  font-weight: 500;
}


#bas-first-visit-202609
.basFV-head > p:last-child {
  margin: 0;

  color: var(--s);

  font-size: 12.5px;

  line-height: 1.85;
}



/* COMPACT INTRO */

#bas-first-visit-202609
.basFV-intro-card {
  display: grid;

  grid-template-columns:
    1.15fr .85fr;

  gap: 22px;

  max-width: 850px;

  margin:
    0 auto
    18px;

  padding: 28px 30px;

  border:
    1px solid
    rgba(223,135,84,.30);

  border-radius: 15px;

  background: #fff;

  box-shadow:
    0 10px 30px
    rgba(76,53,39,.05);
}


#bas-first-visit-202609
.basFV-intro-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}


#bas-first-visit-202609 .basFV-kicker {
  margin: 0 0 6px;

  color: #4d4641;

  font-size: 15px;
  font-weight: 600;
}


#bas-first-visit-202609 .basFV-price {
  display: flex;
  align-items: baseline;

  gap: 7px;

  margin-bottom: 12px;
}


#bas-first-visit-202609
.basFV-price strong {
  color: var(--od);

  font:
    400 42px/1.1
    Georgia,
    "Times New Roman",
    serif;
}


#bas-first-visit-202609
.basFV-price span {
  color: #5d5550;

  font-size: 12px;
}


#bas-first-visit-202609
.basFV-intro-text {
  max-width: 470px;

  margin: 0;

  color: #756b65;

  font-size: 11px;

  line-height: 1.8;
}



/* EFFECTIVE FREE */

#bas-first-visit-202609
.basFV-credit-highlight {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 20px 22px;

  border:
    1px solid
    rgba(223,135,84,.35);

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #fffaf6,
      #f9eee6
    );

  text-align: center;
}


#bas-first-visit-202609
.basFV-credit-highlight-top span {
  display: inline-flex;

  padding: 5px 10px;

  border-radius: 999px;

  background: #fff;

  color: var(--od);

  font-size: 9px;
  font-weight: 700;
}


#bas-first-visit-202609
.basFV-credit-highlight-main {
  display: flex;
  flex-direction: column;

  margin-top: 9px;
}


#bas-first-visit-202609
.basFV-credit-highlight-main small {
  color: #7a6d65;

  font-size: 10px;
}


#bas-first-visit-202609
.basFV-credit-highlight-main strong {
  margin-top: 3px;

  color: var(--od);

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 29px;
  font-weight: 700;
}


#bas-first-visit-202609
.basFV-credit-highlight > p {
  margin:
    8px 0
    0;

  color: #7f7169;

  font-size: 9.5px;

  line-height: 1.65;
}



/* DETAILS */

#bas-first-visit-202609
.basFV-details {
  max-width: 850px;

  margin: auto;
}


#bas-first-visit-202609
.basFV-details > summary {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 13px;

  min-height: 55px;

  padding: 0 20px;

  border:
    1px solid
    rgba(223,135,84,.40);

  border-radius: 9px;

  background: #fff;

  color: var(--od);

  cursor: pointer;

  list-style: none;

  font-size: 12px;
  font-weight: 700;

  transition: .2s ease;
}


#bas-first-visit-202609
.basFV-details > summary:hover {
  background: #fdf8f4;
}


#bas-first-visit-202609
.basFV-details > summary::-webkit-details-marker {
  display: none;
}


#bas-first-visit-202609
.basFV-details-toggle {
  position: relative;

  width: 24px;
  height: 24px;

  border:
    1px solid
    rgba(223,135,84,.35);

  border-radius: 50%;
}


#bas-first-visit-202609
.basFV-details-toggle i {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 10px;
  height: 1px;

  background: var(--od);

  transform:
    translate(-50%,-50%);
}


#bas-first-visit-202609
.basFV-details-toggle
i:last-child {
  transform:
    translate(-50%,-50%)
    rotate(90deg);

  transition: .2s ease;
}


#bas-first-visit-202609
.basFV-details[open]
.basFV-details-toggle
i:last-child {
  transform:
    translate(-50%,-50%)
    rotate(0);
}


#bas-first-visit-202609
.basFV-details-body {
  padding-top: 17px;
}



/* FULL DETAIL CARD */

#bas-first-visit-202609 .basFV-card {
  display: grid;

  grid-template-columns:
    1.08fr .92fr;

  overflow: hidden;

  border:
    1px solid
    rgba(223,135,84,.35);

  border-radius: 15px;

  background: #fff;

  box-shadow:
    0 13px 34px
    rgba(76,53,39,.05);
}


#bas-first-visit-202609 .basFV-main {
  padding: 35px 36px 34px;
}


#bas-first-visit-202609
.basFV-description {
  margin: 0;

  color: var(--s);

  font-size: 12px;

  line-height: 1.9;
}


#bas-first-visit-202609 .basFV-list {
  display: grid;

  gap: 9px;

  margin: 22px 0 0;

  padding: 0;

  list-style: none;
}


#bas-first-visit-202609
.basFV-list li {
  position: relative;

  padding-left: 24px;

  color: #57504b;

  font-size: 11px;

  line-height: 1.65;
}


#bas-first-visit-202609
.basFV-list li::before {
  content: "✓";

  position: absolute;

  left: 0;

  color: var(--o);

  font-weight: 800;
}


#bas-first-visit-202609 .basFV-credit {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-top: 25px;

  padding: 16px 17px;

  border:
    1px solid
    rgba(223,135,84,.27);

  border-radius: 9px;

  background: #fbf7f2;
}


#bas-first-visit-202609 .basFV-gift {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #fff;

  color: var(--o);

  font:
    20px
    Georgia,
    serif;
}


#bas-first-visit-202609
.basFV-credit p {
  margin: 0;

  color: #6a5d55;

  font-size: 10.5px;

  line-height: 1.75;
}


#bas-first-visit-202609 .basFV-note {
  margin: 17px 0 0;

  color: #857b74;

  font-size: 10px;

  line-height: 1.75;
}


#bas-first-visit-202609 .basFV-actions {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;

  margin-top: 23px;
}


#bas-first-visit-202609 .basFV-btn {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 53px;

  padding:
    0 37px
    0 16px;

  border-radius: 7px;

  text-decoration: none !important;

  font-size: 11.5px;
  font-weight: 700;
}


#bas-first-visit-202609
.basFV-btn span:last-child {
  position: absolute;

  right: 14px;

  font-size: 20px;
  font-weight: 300;
}


#bas-first-visit-202609 .basFV-btn-main {
  border:
    1px solid
    var(--o);

  background:
    linear-gradient(
      135deg,
      #ed984f,
      #dc793c
    );

  color: #fff !important;
}


#bas-first-visit-202609 .basFV-btn-line {
  border:
    1px solid
    var(--g);

  background: var(--g);

  color: #fff !important;
}


#bas-first-visit-202609 .basFV-visual {
  position: relative;

  overflow: hidden;

  background: #eee5dd;
}


#bas-first-visit-202609
.basFV-visual img {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 510px;

  object-fit: cover;
  object-position: center;
}


#bas-first-visit-202609
.basFV-visual-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(35,30,27,.02),
      rgba(35,30,27,.08) 45%,
      rgba(35,30,27,.62)
    );
}


#bas-first-visit-202609
.basFV-visual-copy {
  position: absolute;

  left: 26px;
  right: 26px;
  bottom: 27px;

  color: #fff;
}


#bas-first-visit-202609
.basFV-visual-copy span {
  display: block;

  margin-bottom: 8px;

  font:
    9px
    Georgia,
    "Times New Roman",
    serif;

  letter-spacing: .18em;

  opacity: .85;
}


#bas-first-visit-202609
.basFV-visual-copy strong {
  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size: 19px;
  font-weight: 500;

  line-height: 1.65;
}



/* =========================================================
   QUICK NAV
========================================================= */

#bas-quicknav-202609 {
  --o: #e88746;
  --t: #5d5550;
  --b: #eadbcf;

  width: 100vw;

  margin-left:
    calc(50% - 50vw);

  border-top:
    1px solid
    rgba(234,219,207,.55);

  border-bottom:
    1px solid
    rgba(234,219,207,.72);

  background: #fff;
}


#bas-quicknav-202609 .basQ-inner {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  width: min(760px,92%);

  margin: auto;

  padding: 20px 0 23px;

  border-left:
    1px solid
    var(--b);

  border-right:
    1px solid
    var(--b);
}


#bas-quicknav-202609 .basQ-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 94px;

  padding: 12px 9px;

  border-right:
    1px solid
    rgba(234,219,207,.85);

  color: var(--t);

  text-decoration: none !important;

  transition: .2s ease;
}


#bas-quicknav-202609
.basQ-item:last-child {
  border-right: 0;
}


#bas-quicknav-202609
.basQ-item:hover {
  background: #fbf7f2;

  color: #cb713a;

  transform:
    translateY(-2px);
}


#bas-quicknav-202609 .basQ-icon {
  display: flex;

  width: 37px;
  height: 37px;

  margin-bottom: 8px;

  color: var(--o);
}


#bas-quicknav-202609
.basQ-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


#bas-quicknav-202609 .basQ-label {
  font-size: 11.5px;
  font-weight: 600;

  text-align: center;
}



/* =========================================================
   STEP 2 COMMON
========================================================= */

#bas-step2-202609 {
  --o: #df8754;
  --od: #c87548;
  --t: #292929;
  --s: #666;
  --b: #eadbcf;
  --cream: #fdf9f5;
  --cream2: #f8f1eb;

  overflow: hidden;

  background: #fff;

  color: var(--t);
}


#bas-step2-202609 .bas2-inner {
  position: relative;

  z-index: 2;

  width: min(1080px,90%);

  margin: auto;
}


#bas-step2-202609 .bas2-section-head {
  max-width: 760px;

  margin: auto;
}


#bas-step2-202609 .bas2-label {
  margin: 0 0 10px;

  color: var(--o);

  font:
    11px
    Georgia,
    "Times New Roman",
    serif;

  letter-spacing: .18em;

  text-align: center;
}


#bas-step2-202609
.bas2-label::after {
  content: "";

  display: block;

  width: 36px;
  height: 1px;

  margin:
    8px auto
    0;

  background: var(--o);
}


#bas-step2-202609 .bas2-label-left {
  text-align: left;
}


#bas-step2-202609
.bas2-label-left::after {
  margin-left: 0;
}


#bas-step2-202609 .bas2-title {
  margin: 0;

  text-align: center;

  font-size:
    clamp(27px,3vw,39px);

  font-weight: 500;

  line-height: 1.55;
}


#bas-step2-202609 .bas2-lead {
  max-width: 690px;

  margin:
    19px auto
    0;

  color: var(--s);

  text-align: center;

  font-size: 13px;

  line-height: 1.9;
}



/* =========================================================
   WORRIES
========================================================= */

#bas-step2-202609 .bas2-worries {
  position: relative;

  padding:
    80px 0
    76px;

  background: #fff;
}


#bas-step2-202609
.bas2-worries::after {
  content: "";

  position: absolute;

  top: 10px;
  right: -18px;

  width: 260px;
  height: 200px;

  background:
    url("https://b-art-space.com/wp-content/uploads/2026/09/02_decoration_plant_800x600.webp")
    center/contain
    no-repeat;

  opacity: .28;

  pointer-events: none;
}


#bas-step2-202609 .bas2-card-grid {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 17px;
}


#bas-step2-202609 .bas2-worry-grid {
  margin-top: 40px;
}


#bas-step2-202609 .bas2-card {
  border: 1px solid var(--b);
  border-radius: 13px;

  background: #fff;

  transition: .2s ease;
}


#bas-step2-202609 .bas2-card:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 11px 28px
    rgba(87,60,43,.055);
}


#bas-step2-202609 .bas2-worry-card {
  min-height: 330px;

  padding:
    24px 24px
    28px;
}


#bas-step2-202609 .bas2-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 112px;
  height: 112px;

  margin:
    0 auto
    16px;
}


#bas-step2-202609
.bas2-icon-wrap img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}


#bas-step2-202609 .bas2-card h3 {
  margin:
    0 0
    11px;

  text-align: center;

  font-size: 16px;
  font-weight: 600;

  line-height: 1.55;
}


#bas-step2-202609 .bas2-card p {
  margin: 0;

  color: var(--s);

  text-align: center;

  font-size: 11.5px;

  line-height: 1.8;
}



/* =========================================================
   APPROACH
========================================================= */

#bas-step2-202609 .bas2-approach {
  position: relative;

  overflow: hidden;

  padding:
    82px 0
    80px;

  background:
    radial-gradient(
      circle at -6% 7%,
      rgba(237,202,177,.15) 0 200px,
      transparent 201px
    ),
    radial-gradient(
      circle at 106% 93%,
      rgba(237,202,177,.11) 0 230px,
      transparent 231px
    ),
    var(--cream);
}


#bas-step2-202609
.bas2-method-note-v2 {
  max-width: 780px;

  margin:
    40px auto
    0;

  padding:
    24px 29px
    23px;

  border:
    1px solid
    rgba(223,135,84,.20);

  border-radius: 14px;

  background:
    rgba(255,255,255,.78);

  text-align: center;
}


#bas-step2-202609
.bas2-method-label {
  margin:
    0 0
    9px;

  color: var(--o);

  font:
    9px/1
    Georgia,
    "Times New Roman",
    serif;

  letter-spacing: .15em;
}


#bas-step2-202609
.bas2-method-title {
  margin:
    0 0
    9px;

  color: #4e4540;

  font-size: 17px;
  font-weight: 600;

  line-height: 1.65;
}


#bas-step2-202609
.bas2-method-text {
  max-width: 640px;

  margin: 0 auto;

  color: #756b65;

  font-size: 11px;

  line-height: 1.85;
}


#bas-step2-202609 .bas2-method-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 7px;

  margin-top: 18px;
}


#bas-step2-202609
.bas2-method-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 28px;

  padding: 0 11px;

  border:
    1px solid
    rgba(223,135,84,.22);

  border-radius: 999px;

  background: #fff;

  color: #8b6e5d;

  font:
    8px/1
    Georgia,
    "Times New Roman",
    serif;

  letter-spacing: .09em;
}



/* APPROACH CARDS */

#bas-step2-202609
.bas2-swipe-guide {
  display: none;
}


#bas-step2-202609
.bas2-approach-track {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 18px;

  margin-top: 43px;
}


#bas-step2-202609
.bas2-approach-card-v2 {
  position: relative;

  min-width: 0;

  overflow: hidden;

  padding:
    14px 14px
    23px;

  border: 1px solid var(--b);
  border-radius: 17px;

  background: #fff;

  box-shadow:
    0 12px 32px
    rgba(72,52,41,.045);
}


#bas-step2-202609
.bas2-approach-card-v2
.bas2-number {
  position: absolute;

  z-index: 3;

  top: 17px;
  left: 17px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.94);

  color: var(--o);

  font:
    14px/1
    Georgia,
    "Times New Roman",
    serif;
}


#bas-step2-202609
.bas2-approach-image {
  width: 100%;

  overflow: hidden;

  aspect-ratio: 1/1;

  border-radius: 12px;

  background: #faf6f2;
}


#bas-step2-202609
.bas2-approach-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


#bas-step2-202609
.bas2-approach-copy {
  padding:
    20px 7px
    0;

  text-align: center;
}


#bas-step2-202609
.bas2-card-eyebrow {
  margin:
    0 0
    8px;

  color: #c58a69;

  font:
    8px/1
    Georgia,
    "Times New Roman",
    serif;

  letter-spacing: .13em;
}


#bas-step2-202609
.bas2-approach-copy h3 {
  margin:
    0 0
    10px;

  color: #3f3935;

  font-size: 17px;
  font-weight: 600;

  line-height: 1.6;
}


#bas-step2-202609
.bas2-approach-copy
p:last-child {
  max-width: 300px;

  margin: 0 auto;

  color: #746b65;

  font-size: 11px;

  line-height: 1.85;
}


#bas-step2-202609
.bas2-approach-dots {
  display: none;
}



/* APPROACH SUMMARY */

#bas-step2-202609
.bas2-approach-summary {
  width:
    min(900px,100%);

  margin:
    47px auto
    0;

  padding:
    31px 31px
    28px;

  border:
    1px solid
    rgba(223,135,84,.17);

  border-radius: 18px;

  background:
    rgba(255,255,255,.70);
}


#bas-step2-202609
.bas2-approach-summary-head {
  max-width: 650px;

  margin:
    0 auto
    25px;

  text-align: center;
}


#bas-step2-202609
.bas2-approach-summary-head h3 {
  margin:
    0 0
    10px;

  color: #4b433e;

  font-size: 19px;
  font-weight: 600;

  line-height: 1.55;
}


#bas-step2-202609
.bas2-approach-summary-head
> p:last-child {
  margin: 0;

  color: #746b65;

  font-size: 11px;

  line-height: 1.85;
}


#bas-step2-202609
.bas2-approach-diagram-image {
  width:
    min(680px,100%);

  margin: auto;
}


#bas-step2-202609
.bas2-approach-diagram-image img {
  display: block;

  width: 100%;
  height: auto;
}


#bas-step2-202609
.bas2-method-footnote {
  margin:
    16px 0
    0;

  color: #918680;

  font-size: 8.5px;

  text-align: center;
}



/* =========================================================
   CONCEPT
========================================================= */

#bas-step2-202609 .bas2-concept {
  padding:
    48px 0
    66px;

  background: #fff;
}


#bas-step2-202609
.bas2-concept-details {
  overflow: hidden;

  border: 1px solid var(--b);
  border-radius: 13px;

  background: var(--cream2);
}


#bas-step2-202609
.bas2-concept-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 28px;

  min-height: 135px;

  padding: 28px 31px;

  cursor: pointer;

  list-style: none;
}


#bas-step2-202609
.bas2-concept-details
> summary::-webkit-details-marker {
  display: none;
}


#bas-step2-202609
.bas2-concept-summary-copy h2 {
  margin:
    0 0
    7px;

  color: #37322f;

  font-size: 21px;
  font-weight: 500;
}


#bas-step2-202609
.bas2-concept-summary-copy
> p:last-child {
  margin: 0;

  color: #8a8079;

  font-size: 10.5px;
}


#bas-step2-202609
.bas2-concept-toggle {
  position: relative;

  width: 42px;
  height: 42px;

  flex: 0 0 auto;

  border:
    1px solid
    rgba(223,135,84,.35);

  border-radius: 50%;

  background: #fff;
}


#bas-step2-202609
.bas2-concept-toggle i {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 15px;
  height: 1px;

  background: var(--od);

  transform:
    translate(-50%,-50%);
}


#bas-step2-202609
.bas2-concept-toggle
i:last-child {
  transform:
    translate(-50%,-50%)
    rotate(90deg);

  transition: .2s ease;
}


#bas-step2-202609
.bas2-concept-details[open]
.bas2-concept-toggle
i:last-child {
  transform:
    translate(-50%,-50%)
    rotate(0);
}


#bas-step2-202609
.bas2-concept-content {
  padding:
    0 31px
    31px;

  border-top:
    1px solid
    rgba(218,198,183,.55);
}


#bas-step2-202609
.bas2-concept-image {
  width:
    min(880px,100%);

  margin:
    30px auto
    20px;

  padding: 10px;

  border:
    1px solid
    rgba(234,219,207,.85);

  border-radius: 10px;

  background: #fff;
}


#bas-step2-202609
.bas2-concept-image img {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 6px;
}


#bas-step2-202609
.bas2-concept-definition,
#bas-step2-202609
.bas2-concept-main,
#bas-step2-202609
.bas2-asymmetry-note {
  width:
    min(860px,100%);

  margin-left: auto;
  margin-right: auto;
}


#bas-step2-202609
.bas2-concept-definition {
  margin-bottom: 17px;

  color: #958a83;

  font-size: 9.5px;
}


#bas-step2-202609
.bas2-concept-main p {
  margin:
    0 0
    12px;

  color: #68615c;

  font-size: 12px;

  line-height: 1.9;
}


#bas-step2-202609
.bas2-asymmetry-note {
  margin-top: 20px;

  padding: 16px 17px;

  border:
    1px solid
    rgba(223,135,84,.18);

  border-radius: 8px;

  background:
    rgba(255,255,255,.62);
}


#bas-step2-202609
.bas2-asymmetry-title {
  margin:
    0 0
    9px;

  color: var(--od);

  font-size: 10.5px;
  font-weight: 700;
}


#bas-step2-202609
.bas2-asymmetry-note
p:not(.bas2-asymmetry-title) {
  margin:
    0 0
    8px;

  color: #7a716c;

  font-size: 9.5px;

  line-height: 1.75;
}


#bas-step2-202609
.bas2-asymmetry-caution {
  margin-top:
    10px !important;

  padding-top: 9px;

  border-top:
    1px solid
    rgba(223,135,84,.15);

  color:
    #968c86 !important;

  font-size:
    8.5px !important;
}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px) {

  #bas-hero-202609
  .bas-hero-inner {
    padding: 0 30px;
  }


  #bas-hero-202609
  .bas-hero-copy {
    width: 61%;
  }


  #bas-hero-202609
  .bas-hero-buttons {
    flex-direction: column;

    max-width: 320px;
  }


  #bas-hero-202609
  .bas-hero-btn {
    width: 100%;

    flex: none;
  }


  #bas-first-visit-202609
  .basFV-card {
    grid-template-columns: 1fr;
  }


  #bas-first-visit-202609
  .basFV-visual img {
    min-height: 340px;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px) {

  /* HERO */

  #bas-hero-202609
  .bas-hero-bg,
  #bas-hero-202609
  .bas-hero-inner,
  #bas-hero-202609
  .bas-hero-copy {
    min-height: 690px;
  }


  #bas-hero-202609
  .bas-hero-slide img {
    object-position: center;
  }


  #bas-hero-202609
  .bas-hero-bg::before {
    background:
      linear-gradient(
        180deg,
        rgba(37,30,26,.59),
        rgba(37,30,26,.48) 27%,
        rgba(37,30,26,.39) 53%,
        rgba(37,30,26,.27) 77%,
        rgba(37,30,26,.16)
      );
  }


  #bas-hero-202609
  .bas-hero-inner {
    display: block;

    width: 100%;

    padding: 0;
  }


  #bas-hero-202609
  .bas-hero-copy {
    width: 100%;

    padding:
      27px 19px
      30px;
  }


  #bas-hero-202609
  .bas-hero-status {
    margin-bottom: 17px;

    padding: 7px 10px;

    border-color:
      rgba(255,255,255,.48);

    background:
      rgba(36,29,25,.40);

    color: #fff;

    font-size: 10px;
  }


  #bas-hero-202609
  .bas-hero-eyebrow {
    color: #ffd2b4;

    font-size: 9px;
  }


  #bas-hero-202609
  .bas-hero-title {
    max-width: 355px;

    color: #fff;

    font-size:
      clamp(27px,7.5vw,33px);

    font-weight: 700;

    text-shadow:
      0 2px 8px
      rgba(0,0,0,.42);
  }


  #bas-hero-202609
  .bas-hero-title
  span::after {
    background: #f2a16c;
  }


  #bas-hero-202609
  .bas-hero-lead {
    max-width: 345px;

    margin-top: 27px;

    color: #fff;

    font-size: 12.5px;
    font-weight: 600;

    text-shadow:
      0 1px 6px
      rgba(0,0,0,.46);
  }


  #bas-hero-202609
  .bas-hero-lead strong,
  #bas-hero-202609
  .bas-hero-methods span,
  #bas-hero-202609
  .bas-hero-points span {
    color: #fff;
  }


  #bas-hero-202609
  .bas-hero-methods span {
    border-color:
      rgba(255,255,255,.34);

    background:
      rgba(36,29,25,.27);
  }


  #bas-hero-202609
  .bas-hero-buttons {
    flex-direction: column;

    width: 100%;
    max-width: 330px;

    margin-top: 20px;

    gap: 9px;
  }


  #bas-hero-202609
  .bas-hero-btn {
    width: 100%;

    min-height: 54px;

    flex: none;

    font-size: 12.5px;
  }


  #bas-hero-202609
  .bas-hero-location {
    max-width: 330px;

    color:
      rgba(255,255,255,.90);

    font-size: 9.5px;
    font-weight: 600;
  }



  /* FIRST VISIT */

  #bas-first-visit-202609
  .basFV-inner {
    width:
      calc(100% - 28px);

    padding:
      0 0
      58px;
  }


  #bas-first-visit-202609
  .basFV-status {
    display: block;

    margin:
      -16px 0
      52px;

    padding: 17px 16px;
  }


  #bas-first-visit-202609
  .basFV-status strong {
    font-size: 11.5px;
  }


  #bas-first-visit-202609
  .basFV-status p {
    font-size: 9px;
  }


  #bas-first-visit-202609
  .basFV-status-link {
    width: 100%;

    margin-top: 13px;
  }


  #bas-first-visit-202609
  .basFV-head {
    margin-bottom: 22px;

    text-align: left;
  }


  #bas-first-visit-202609
  .basFV-label::after {
    margin-left: 0;
  }


  #bas-first-visit-202609
  .basFV-head h2 {
    font-size: 27px;
  }


  #bas-first-visit-202609
  .basFV-head br {
    display: none;
  }


  #bas-first-visit-202609
  .basFV-intro-card {
    grid-template-columns: 1fr;

    gap: 13px;

    padding: 20px 18px;

    border-radius: 13px;
  }


  #bas-first-visit-202609
  .basFV-price strong {
    font-size: 37px;
  }


  #bas-first-visit-202609
  .basFV-credit-highlight {
    padding: 18px 16px;
  }


  #bas-first-visit-202609
  .basFV-credit-highlight-main strong {
    font-size: 27px;
  }


  #bas-first-visit-202609
  .basFV-details > summary {
    min-height: 52px;

    font-size: 11px;
  }


  #bas-first-visit-202609
  .basFV-card {
    grid-template-columns: 1fr;
  }


  #bas-first-visit-202609
  .basFV-main {
    padding:
      27px 18px
      25px;
  }


  #bas-first-visit-202609
  .basFV-description {
    font-size: 11px;
  }


  #bas-first-visit-202609
  .basFV-list li {
    font-size: 10px;
  }


  #bas-first-visit-202609
  .basFV-actions {
    grid-template-columns: 1fr;
  }


  #bas-first-visit-202609
  .basFV-visual img {
    min-height: 290px;
    max-height: 320px;
  }


  /* QUICK NAV */

  #bas-quicknav-202609
  .basQ-inner {
    width: 100%;

    padding: 0;

    border: 0;
  }


  #bas-quicknav-202609
  .basQ-item {
    min-height: 80px;

    padding:
      11px 3px
      10px;
  }


  #bas-quicknav-202609
  .basQ-icon {
    width: 28px;
    height: 28px;

    margin-bottom: 6px;
  }


  #bas-quicknav-202609
  .basQ-label {
    font-size: 9px;

    white-space: nowrap;
  }


  /* STEP COMMON */

  #bas-step2-202609
  .bas2-inner {
    width:
      calc(100% - 28px);
  }


  #bas-step2-202609
  .bas2-worries,
  #bas-step2-202609
  .bas2-approach {
    padding: 58px 0;
  }


  #bas-step2-202609
  .bas2-title {
    font-size: 24px;
  }


  #bas-step2-202609
  .bas2-lead {
    margin-top: 15px;

    text-align: left;

    font-size: 11.5px;
  }


  /* WORRIES */

  #bas-step2-202609
  .bas2-worry-grid {
    grid-template-columns: 1fr;

    gap: 9px;

    margin-top: 28px;
  }


  #bas-step2-202609
  .bas2-worry-card {
    display: grid;

    grid-template-columns:
      62px 1fr;

    grid-template-rows:
      auto auto;

    align-items: center;

    column-gap: 12px;

    min-height: 0;

    padding: 12px 13px;
  }


  #bas-step2-202609
  .bas2-worry-card
  .bas2-icon-wrap {
    grid-column: 1;
    grid-row: 1/3;

    width: 56px;
    height: 56px;

    margin: 0;
  }


  #bas-step2-202609
  .bas2-worry-card h3 {
    grid-column: 2;

    margin:
      0 0
      3px;

    text-align: left;

    font-size: 13.5px;
  }


  #bas-step2-202609
  .bas2-worry-card p {
    grid-column: 2;

    text-align: left;

    font-size: 9.5px;
  }


  /* APPROACH */

  #bas-step2-202609
  .bas2-method-note-v2 {
    margin-top: 25px;

    padding: 18px 17px;

    text-align: left;
  }


  #bas-step2-202609
  .bas2-method-title {
    font-size: 13.5px;
  }


  #bas-step2-202609
  .bas2-method-text {
    font-size: 10.5px;
  }


  #bas-step2-202609
  .bas2-method-tags {
    justify-content: flex-start;

    margin-top: 13px;
  }


  #bas-step2-202609
  .bas2-swipe-guide {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    margin:
      25px 3px
      10px;

    color: #9b8e86;

    font-size: 9px;

    transition:
      opacity .25s ease;
  }


  #bas-step2-202609
  .bas2-swipe-guide.is-used {
    opacity: 0;

    pointer-events: none;
  }


  #bas-step2-202609
  .bas2-swipe-arrow {
    color: var(--o);

    font-size: 15px;
  }


  #bas-step2-202609
  .bas2-approach-track {
    display: flex;

    gap: 12px;

    width:
      calc(100% + 14px);

    margin:
      0 -14px
      0 0;

    padding:
      0 14px
      8px 0;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type:
      x mandatory;

    scrollbar-width: none;

    -webkit-overflow-scrolling:
      touch;
  }


  #bas-step2-202609
  .bas2-approach-track::-webkit-scrollbar {
    display: none;
  }


  #bas-step2-202609
  .bas2-approach-card-v2 {
    flex:
      0 0
      min(82vw,340px);

    scroll-snap-align: start;

    padding:
      11px 11px
      19px;

    border-radius: 16px;
  }


  #bas-step2-202609
  .bas2-approach-card-v2
  .bas2-number {
    top: 14px;
    left: 14px;

    width: 36px;
    height: 36px;

    font-size: 12px;
  }


  #bas-step2-202609
  .bas2-approach-copy {
    padding:
      16px 5px
      0;
  }


  #bas-step2-202609
  .bas2-approach-copy h3 {
    font-size: 15px;
  }


  #bas-step2-202609
  .bas2-approach-copy
  p:last-child {
    font-size: 10px;
  }


  #bas-step2-202609
  .bas2-approach-dots {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 13px;
  }


  #bas-step2-202609
  .bas2-approach-dots button {
    width: 6px;
    height: 6px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #d8cec7;
  }


  #bas-step2-202609
  .bas2-approach-dots
  button.is-active {
    width: 20px;

    border-radius: 999px;

    background: var(--o);
  }


  #bas-step2-202609
  .bas2-approach-summary {
    margin-top: 29px;

    padding:
      23px 14px
      19px;
  }


  #bas-step2-202609
  .bas2-approach-summary-head h3 {
    font-size: 15px;
  }


  #bas-step2-202609
  .bas2-approach-summary-head
  > p:last-child {
    font-size: 10px;
  }


  #bas-step2-202609
  .bas2-approach-diagram-image {
    width: 100%;
  }


  #bas-step2-202609
  .bas2-method-footnote {
    text-align: left;

    font-size: 7.5px;
  }


  /* CONCEPT */

  #bas-step2-202609
  .bas2-concept {
    padding:
      34px 0
      52px;
  }


  #bas-step2-202609
  .bas2-concept-details
  > summary {
    min-height: 0;

    gap: 14px;

    padding: 20px 17px;
  }


  #bas-step2-202609
  .bas2-concept-summary-copy h2 {
    font-size: 17px;
  }


  #bas-step2-202609
  .bas2-concept-content {
    padding:
      0 15px
      19px;
  }


  #bas-step2-202609
  .bas2-concept-image {
    width:
      calc(100% + 30px);

    margin:
      0 -15px
      15px;

    padding: 0;

    border: 0;
    border-radius: 0;
  }


  #bas-step2-202609
  .bas2-concept-image img {
    border-radius: 0;
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:390px) {

  #bas-hero-202609
  .bas-hero-copy {
    padding-left: 16px;
    padding-right: 16px;
  }


  #bas-hero-202609
  .bas-hero-title {
    font-size: 26px;
  }


  #bas-first-visit-202609
  .basFV-inner,
  #bas-step2-202609
  .bas2-inner {
    width:
      calc(100% - 22px);
  }


  #bas-step2-202609
  .bas2-approach-card-v2 {
    flex-basis: 83vw;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media(
  prefers-reduced-motion:reduce
) {

  #bas-hero-202609
  .bas-hero-slide {
    transition: none;
  }

}

/* =========================================================
   HERO
   CSS ONLY CROSSFADE SLIDESHOW
   4 IMAGES / 24 SEC
   2026-09-14
========================================================= */


/*
  JavaScriptには依存しません。

  1枚あたり約6秒。
  切り替え時は前後の画像を
  クロスフェードさせます。
*/


#bas-hero-202609
.bas-hero-slides {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  background: #3c332e;
}


#bas-hero-202609
.bas-hero-slide {
  position: absolute;

  inset: 0;

  opacity: 0;

  will-change: opacity;

  pointer-events: none;
}


#bas-hero-202609
.bas-hero-slide img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.015);
}



/* =========================
   SLIDE 01
========================= */

#bas-hero-202609
.bas-hero-slide:nth-child(1) {

  animation:
    basHeroSlide01
    17s
    ease-in-out
    infinite;

}


/* =========================
   SLIDE 02
========================= */

#bas-hero-202609
.bas-hero-slide:nth-child(2) {

  animation:
    basHeroSlide02
    17s
    ease-in-out
    infinite;

}


/* =========================
   SLIDE 03
========================= */

#bas-hero-202609
.bas-hero-slide:nth-child(3) {

  animation:
    basHeroSlide03
    17s
    ease-in-out
    infinite;

}


/* =========================
   SLIDE 04
========================= */

#bas-hero-202609
.bas-hero-slide:nth-child(4) {

  animation:
    basHeroSlide04
    17s
    ease-in-out
    infinite;

}



/* =========================================================
   CROSSFADE KEYFRAMES
========================================================= */

@keyframes basHeroSlide01 {

  0% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  95% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

}


@keyframes basHeroSlide02 {

  0%,
  20% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  45% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}


@keyframes basHeroSlide03 {

  0%,
  45% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}


@keyframes basHeroSlide04 {

  0%,
  70% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

}



/* =========================================================
   MOBILE HERO POSITION
========================================================= */

@media(max-width:700px) {

  #bas-hero-202609
  .bas-hero-slide img {

    object-position: center;

    transform: scale(1.02);

  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media(
  prefers-reduced-motion: reduce
) {

  #bas-hero-202609
  .bas-hero-slide {

    animation: none !important;

    opacity: 0;

  }


  #bas-hero-202609
  .bas-hero-slide:first-child {

    opacity: 1;

  }

}

/* =========================================================
   FIRST VISIT
   QUIET / COLLAPSIBLE VERSION
========================================================= */

#bas-first-visit-202609
.basFV-inner {

  padding-top: 68px;

}


#bas-first-visit-202609
.basFV-head {

  margin-bottom: 30px;

}


#bas-first-visit-202609
.basFV-details {

  width: min(850px, 100%);

  margin: auto;

}


#bas-first-visit-202609
.basFV-details > summary {

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  min-height: 78px;

  padding: 18px 22px;

  border:
    1px solid
    rgba(223,135,84,.30);

  border-radius: 12px;

  background: #fff;

  cursor: pointer;

  list-style: none;

  transition:
    background .2s ease,
    border-color .2s ease;

}


#bas-first-visit-202609
.basFV-details > summary:hover {

  border-color:
    rgba(223,135,84,.52);

  background: #fdf9f5;

}


#bas-first-visit-202609
.basFV-details
> summary::-webkit-details-marker {

  display: none;

}


#bas-first-visit-202609
.basFV-summary-copy {

  display: flex;
  flex-direction: column;

  gap: 5px;

}


#bas-first-visit-202609
.basFV-summary-copy strong {

  color: #4d4540;

  font-size: 13px;
  font-weight: 600;

}


#bas-first-visit-202609
.basFV-summary-copy span {

  color: #8a8079;

  font-size: 9.5px;

}


#bas-first-visit-202609
.basFV-details-toggle {

  position: relative;

  width: 34px;
  height: 34px;

  flex: 0 0 auto;

  border:
    1px solid
    rgba(223,135,84,.35);

  border-radius: 50%;

  background: #fff;

}


#bas-first-visit-202609
.basFV-details-toggle i {

  position: absolute;

  top: 50%;
  left: 50%;

  width: 12px;
  height: 1px;

  background: #c87548;

  transform:
    translate(-50%,-50%);

}


#bas-first-visit-202609
.basFV-details-toggle i:last-child {

  transform:
    translate(-50%,-50%)
    rotate(90deg);

  transition:
    transform .2s ease;

}


#bas-first-visit-202609
.basFV-details[open]
.basFV-details-toggle
i:last-child {

  transform:
    translate(-50%,-50%)
    rotate(0);

}


#bas-first-visit-202609
.basFV-details-body {

  padding-top: 16px;

}


#bas-first-visit-202609
.basFV-credit-emphasis {

  display: inline-block;

  margin-top: 5px;

  color: #c87548;

  font-weight: 700;

}


@media(max-width:700px) {

  #bas-first-visit-202609
  .basFV-inner {

    padding-top: 54px;

  }


  #bas-first-visit-202609
  .basFV-details > summary {

    min-height: 70px;

    padding: 15px 16px;

  }


  #bas-first-visit-202609
  .basFV-summary-copy strong {

    font-size: 12px;

  }


  #bas-first-visit-202609
  .basFV-summary-copy span {

    font-size: 8.5px;

  }

}

/* =========================================================
   APPROACH
   MOBILE SLIDER DISCOVERABILITY UPDATE
   2026-09-14
========================================================= */

.bas2-approach-slider-shell {
  position: relative;
}


.bas2-approach-next {
  display: none;
}



@media screen and (max-width:700px) {


  /* =====================================================
     SHELL
  ===================================================== */

  #bas-step2-202609
  .bas2-approach-slider-shell {

    position: relative;

    margin-top: 24px;

  }



  /* =====================================================
     SWIPE GUIDE
  ===================================================== */

  #bas-step2-202609
  .bas2-swipe-guide {

    display: flex;
    align-items: center;

    gap: 7px;

    width: max-content;

    margin:
      0 0
      11px auto;

    padding:
      7px 11px;

    border:
      1px solid
      rgba(223,135,84,.24);

    border-radius:
      999px;

    background:
      rgba(255,255,255,.88);

    box-shadow:
      0 5px 16px
      rgba(75,52,39,.045);

    color:
      #756b65;

    font-size:
      9.5px;

    font-weight:
      600;

    transition:
      opacity .3s ease;

  }


  #bas-step2-202609
  .bas2-swipe-guide
  .bas2-swipe-arrow {

    color:
      var(--o);

    font-size:
      16px;

  }


  /*
    一度操作した後も
    完全には消さない
  */

  #bas-step2-202609
  .bas2-swipe-guide.is-used {

    opacity:
      .42;

  }



  /* =====================================================
     TRACK

     以前よりカードを少し細くし、
     次のカードが明確に見えるようにする
  ===================================================== */

  #bas-step2-202609
  .bas2-approach-track {

    display: flex;

    gap: 12px;

    width:
      calc(
        100% + 14px
      );

    margin:
      0 -14px
      0 0;

    padding:
      0 14px
      10px 0;

    overflow-x:
      auto;

    overflow-y:
      hidden;

    scroll-snap-type:
      x mandatory;

    scrollbar-width:
      none;

    -webkit-overflow-scrolling:
      touch;

  }


  #bas-step2-202609
  .bas2-approach-track::-webkit-scrollbar {

    display:
      none;

  }



  /* =====================================================
     CARD WIDTH

     82vw → 76vw
     次カードの存在が分かりやすくなる
  ===================================================== */

  #bas-step2-202609
  .bas2-approach-card-v2 {

    flex:
      0 0
      min(
        76vw,
        315px
      );

    scroll-snap-align:
      start;

  }



  /* =====================================================
     RIGHT EDGE GRADIENT
  ===================================================== */

  #bas-step2-202609
  .bas2-approach-slider-shell::after {

    content: "";

    position: absolute;

    z-index: 2;

    top: 46px;
    right: -1px;
    bottom: 9px;

    width: 24px;

    pointer-events:
      none;

    background:
      linear-gradient(
        90deg,
        rgba(253,249,245,0),
        rgba(253,249,245,.78)
      );

  }



  /* =====================================================
     NEXT ARROW
  ===================================================== */

  #bas-step2-202609
  .bas2-approach-next {

    position: absolute;

    z-index: 5;

    top: 51%;
    right: -2px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border:
      1px solid
      rgba(223,135,84,.42);

    border-radius:
      50%;

    background:
      rgba(255,255,255,.95);

    color:
      var(--o);

    box-shadow:
      0 7px 22px
      rgba(66,46,35,.14);

    cursor:
      pointer;

    transform:
      translateY(-50%);

    transition:
      opacity .25s ease,
      visibility .25s ease;

    animation:
      basApproachArrowHint
      1.8s
      ease-in-out
      infinite;

  }


  #bas-step2-202609
  .bas2-approach-next span {

    display: block;

    margin-top: -2px;

    font-family:
      Arial,
      sans-serif;

    font-size:
      28px;

    font-weight:
      300;

    line-height:
      1;

  }



  /* LAST CARD */

  #bas-step2-202609
  .bas2-approach-next.is-last {

    opacity: 0;

    visibility:
      hidden;

    pointer-events:
      none;

    animation:
      none;

  }



  /* =====================================================
     DOTS
  ===================================================== */

  #bas-step2-202609
  .bas2-approach-dots {

    margin-top:
      14px;

  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media screen and (max-width:390px) {

  #bas-step2-202609
  .bas2-approach-card-v2 {

    flex-basis:
      78vw;

  }

}



/* =========================================================
   ARROW MOTION
========================================================= */

@keyframes basApproachArrowHint {

  0%,
  100% {

    transform:
      translateY(-50%)
      translateX(0);

  }


  50% {

    transform:
      translateY(-50%)
      translateX(4px);

  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  #bas-step2-202609
  .bas2-approach-next {

    animation:
      none;

  }

}