@import url("https://fonts.googleapis.com/css?family=Roboto:700,900,600|Inter:700|Noto+Sans+JP:400,500,700,900|Montserrat:400");

/* ========== Base & Reset ========== */
:root{ --font-base: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif; }
*{ margin:0; padding:0; box-sizing:border-box; }
body{ 
  font-family:var(--font-base); 
  width:100%; 
  min-width:375px;
  letter-spacing: 0.03em; 
}

.container{ max-width:420px; margin:0 auto; background:#e8edf7; }
.hero-image{ width:100%; object-fit:cover; }

/* ========== Line button (above hero notes) ========== */
.line-button-section{ background:#e8eef8; padding:16px 16px 32px; }
.line-button{ position:relative; cursor:pointer; }
.line-button_cta{ width:100%; margin-top:38px; }
.line-button_cta img{ width:100%; height:auto; display:block; }

/* ========== Notes Accordion ========== */
.notes-accordion{ width:100%; margin:0 auto; display:flex; flex-direction:column; align-items:flex-end; font-family:var(--font-base); }
.notes-accordion .notes-list{ font-size:12px; line-height:18px; letter-spacing:.03em; color:#222; overflow:hidden; position:relative; width:100%; }
.notes-accordion .notes-list .note-item{ margin-top:8px; display:flex; align-items:flex-start; gap:8px; }
.notes-accordion .notes-list .note-item:first-child{ margin-top:0; }
.notes-accordion .notes-list .note-marker{ flex:0 0 auto; }
.notes-accordion .notes-list .note-text{ flex:1 1 auto; }
.notes-accordion .notes-list::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:48px; pointer-events:none; }
.notes-accordion .notes-toggle{ display:inline-flex; align-items:center; margin-top:8px; margin-left:auto; background:none; border:none; font-size:12px; line-height:12px; cursor:pointer; text-align:right; }
.notes-toggle-label{ text-decoration:underline; }
.notes-accordion .notes-toggle .notes-toggle-icon{ width:24px; height:24px; transform:scaleY(-1); transition:transform .2s ease; }
.notes-accordion.is-open .notes-toggle .notes-toggle-icon{ transform:none; }
.notes-accordion.is-open .notes-list{ max-height:none; overflow:visible; }
.notes-accordion.is-open .notes-list::after{ display:none; }
.note-text-full{ display:none; }
.notes-accordion.is-open .note-text-full{ display:block; margin-top:8px; }

/* ========== Why Section ========== */
.why-section{ width:100%; background:#0075C7; border-radius:24px 24px 0 0; display:flex; flex-direction:column; align-items:center; padding:64px 24px 96px; letter-spacing:.03em; position:relative; overflow:visible; z-index:1; }
.section-title{ font-weight:700; color:#fff; font-size:24px; line-height:24px; text-align:left; width:100%; margin-bottom:16px; }
.section-title-large{ font-weight:900; color:#fff; font-size:32px; line-height:32px; text-align:left; width:100%; margin-bottom:40px; }
.card{ width:100%; background:#fff; border-radius:16px; }
.card-content{ padding:40px 24px; display:flex; flex-direction:column; align-items:center; }
.card-content img{ margin-bottom:16px; width:100%; max-width:173px; }
.concept-text{ font-family:"Koburina Gothic StdN","koburina-gothic-stdn","KoburinaGothic StdN",var(--font-base); font-weight:600; font-size:16px; color:#222; text-align:center; line-height:26px; margin-bottom:32px; }
.description-text{ font-weight:bold; font-size:14px; color:#222; text-align:center; line-height:25px; }
.why-title-spaced{ margin:80px 0 16px; }
.why-card-kpi{ text-align:left; width:100%; letter-spacing:.03em; margin-bottom:40px; }
.why-card-title{ font-weight:700; color:#fff; font-size:20px; line-height:20px; margin-bottom:24px; }
.why-card-title-num{ margin-right:4px; }
.why-card-title span{ font-family:'Roboto', sans-serif; }
.why-reason-img{ width:100%; height:auto; display:block; }
.why-desc-strong{ font-weight:700; color:#fff; font-size:14px; line-height:21px; margin-top:16px; }
.why-desc-note{ font-size:12px; line-height:18px; margin-top:16px; color:#fff; font-weight:400; }
.why-desc-note.note-with-marker{ display:flex; align-items:flex-start; }
.why-desc-note.note-with-marker .note-marker{ flex:0 0 auto; }
.why-desc-note.note-with-marker .note-text{ flex:1 1 auto; }
.why-arrow{ width:100px; height:50px; position:absolute; left:50%; transform:translateX(-50%); bottom:-27px; z-index:2; pointer-events:none; }

/* ========== Record (white-section-stats) ========== */
.white-section-stats{ 
  width:100%; 
  border-radius:24px; 
  padding:67px 44px 64px; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  position:relative; 
  overflow:hidden; 
}
.car-scroll-right{ width:540px; height:40px; position:relative; overflow:hidden; 
  background-image:url("../img/50kbt_car_img.png");
  background-repeat:repeat-x;
  background-position:0 0;
  background-size:auto 40px;
  animation:infinity-scroll-right 40s linear infinite;
  will-change:background-position; }
@keyframes infinity-scroll-right{ from{ background-position:0 0; } to{ background-position:540px 0; } }

.car-scroll-left{ 
  width:540px; 
  height:40px; 
  position:relative; 
  overflow:hidden;
  background-image:url("../img/50kbt_car_img.png");
  background-repeat:repeat-x;
  background-position:0 0;
  background-size:auto 40px;
  animation:infinity-scroll-left 40s linear infinite;
  will-change:background-position; 
  margin-top:40px;
  transform:scaleX(-1); 
}
@keyframes infinity-scroll-left{ from{ background-position:0 0; } to{ background-position:540px 0; } }

/* ========== Record text block (below scroll) ========== */
.record-text-block{ 
  width:100%; 
  margin-top:24px; 
  display:flex; 
  flex-direction:column; 
  align-items:flex-start; 
  letter-spacing:0.03em; 
}
.record-heading{
  font-weight:900; 
  color:#002d93; 
  font-size:20px; 
  line-height:20px; 
}
.record-subheading{ 
  font-weight:900; 
  color:#002d93; 
  font-size:16px; 
  line-height:16px; 
  margin-top:16px; 
}
.record-number-line{ 
  margin-top:12px; 
  display:flex; 
  align-items:baseline; 
  gap:4px; 
}

.amount-container {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: end;
    gap: 4px;
    width: fit-content;
    font-weight: 900;
    color: #002D93;
    position: relative;
  }
  .amount-container .price {
    font-size: 60px;
    font-family:'Roboto', sans-serif;
    line-height: 60px;
    margin-top: 8px;
  }
  .amount-container .text {
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    padding-bottom: 8px;
    white-space: nowrap;

  }
  /* 台突破！ の表示サイズ調整 */
  .amount-container .text span:not(.note) {
    font-size: 24px;
    line-height: 24px;
  }
  .amount-container .note {
    font-size: 14px;
    font-weight: 500;
  }


.record-note{ 
  font-size:12px; 
  line-height:18px; 
  color:#222; 
  margin-top:16px; 
}

/* ========== Testimonials white block ========== */
.white-block{ 
  width:100%; 
  background:#fff; 
  border-radius:24px; 
  display:flex; 
  flex-direction:column; 
  padding:64px 24px; 
  letter-spacing: 0.03em;
}


.section-title-blue{ 
  font-weight:900;
  color:#002d93; 
  font-size:32px; 
  line-height:32px; 
}


.note-small{ 
  font-size:12px; 
  color:#222; 
  line-height:12px; 
}


.note-small-line{ 
  font-size:12px; 
  color:#222; 
  line-height:18px; 
}


.testimonial-card{ 
  border-radius:16px; 
  border:3px solid #e8eef8; 
  margin-top:40px; 
  padding:24px; 
}
.white-block .testimonial-card + .testimonial-card{ 
  margin-top:24px; 
}
.testimonial-header{
  display:flex; 
  gap:16px; 
}
.testimonial-image{ 
  width:80px; 
  height:80px; 
}
.testimonial-info{ 
  display:flex; 
  flex-direction:column; 
  gap:8px; 
  letter-spacing: 0;
  color:#002d93; 
}


.testimonial-car{ 
  font-weight:500; 
  font-size:12px; 
  line-height:12px; 
}

.testimonial-title{ 
  font-weight:700; 
  font-size:14px; 
  line-height:21px; 
  white-space:pre-line; 
}


.testimonial-content{ 
  font-size:14px; 
  color:#222; 
  line-height:21px; 
  margin-top:24px; 
  letter-spacing: 0;
}

.testimonial-location{ 
  font-size:14px; 
  color:#222; 
  line-height:14px; 
  text-align:right; 
  margin-top:24px;
  letter-spacing: 0;
}

/* ========== Car lineup section ========== */
.line-up{ 
  width:100%;  
  display:flex; 
  flex-direction:column; 
  padding:64px 16px; 
}

.heading-24-blue{ 
  font-weight:900; 
  color:#002d93; 
  font-size:24px; 
  line-height:24px; 
}

.heading-16-blue{ 
  font-family:'Inter', sans-serif; 
  font-weight:700; 
  color:#002d93; 
  font-size:16px; 
  line-height:16px; 
  padding-left: 8px;
  padding-right: 8px;
}

.line-up-text {
  padding-left: 8px;
  padding-right: 8px;
}

.car-lineup{ 
  display:flex; 
  flex-wrap:wrap;
  gap:24px; 
  margin-top:16px; 
  padding:0 8px;
}

/* カード構造 */
.car-card{ 
  flex:0 0 calc((100% - 24px)/2); 
  width:calc((100% - 24px)/2); 
  display:flex; 
  flex-direction:column; 
}
.car-item{ 
  background:#fff; 
  border-radius:8px; 
  padding:8px 0 12px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
}
.car-image{ 
  width:100%; 
  height:auto; 
  /* max-height:100px;  */
  object-fit:contain; 
}
.car-label{ 
  margin-top:16px; 
  display:flex; 
  flex-direction:column; 
}
.car-label-text{ 
  font-size:12px; 
  color:#222; 
  line-height:12px; 
}
.car-name{ 
  font-weight:700; 
  font-size:14px; 
  color:#222; 
  line-height:14px; 
  margin-top:8px; 
}

/* ========== Promo block (値引き情報) ========== */


/* ========== Steps ========== */

.step{
  width:100%; 
  background:#fff; 
  border-radius:24px; 
  display:flex; 
  flex-direction:column; 
  padding:64px 24px; 
}

.step-visual{ 
  width:100%; 
  /* height:140px;  */
  /* background:#e8eef8;  */
}

.step-img{
  width: 100%;
}

.discount-image{
  width: 100%;
  padding-left:49px;
  padding-right: 49px;
}

.step-number-text{
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 24px;
}

.step-badge{ 
  width:64px; 
  height:20px; 
  background:#e8eef8; 
  border-radius:40px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  padding: 3px 0;
}

.step-number{ 
  font-family:'Roboto', sans-serif; 
  font-weight:700; 
  color:#002d93; 
  font-size:14px; 
  line-height:14px; 
  letter-spacing: 0;
}

.step-title{ 
  font-weight:700; 
  color:#002d93; 
  font-size:14px; 
  line-height:14px; 
}
.step-description{
  font-size:14px; 
  color:#222; 
  line-height:21px; 
  margin-top:19px; 
  white-space:pre-line; 
}



/* ========== FAQ (Accordion) ========== */
.faq-section{
  width:100%; 
  border-radius:24px; 
  padding:64px 16px 69px; 
  display:flex; 
  flex-direction:column; 
  position:relative; 
  overflow:hidden; 
}

.faq-line-button_cta{ 
  width:100%; 
 }

.faq-line-button_cta img{
  width: 100%;
}

.faq-main-content{
  padding-left: 5px;
  padding-right: 5px;
}

.accordion{
  width:100%;
  margin-top:45px;
}


.accordion-item{
  border-bottom:1px solid #00000033; 
}


.accordion-trigger{
  width:100%; 
  padding:24px 0; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  background:none; 
  border:none; 
  cursor:pointer; 
  text-align:left; 
  gap: 29px;
}
.accordion-trigger.is-open{
  padding-bottom:21px;
}

.accordion .accordion-item:first-child .accordion-trigger{
  padding-top:0;
}

.accordion-question{
  font-size:14px;
  color:#222;
  line-height:21px;
}

.accordion-icon{
  width: 100%;
  max-width:24px;
  height:24px;
  flex-shrink:0; 
}

.accordion-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}


.accordion-content.open{
  max-height:500px;
}


.accordion-answer{
  font-size:14px;
  color:#222;
  line-height:21px;
  padding-bottom:21px;
  white-space:pre-line;
}



/* ========== Footer ========== */
footer{
  width:100%;
  background:#0075C7;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:40px 24px 136px;
}
.footer-link{
  font-weight:500; 
  color:#fff; 
  font-size:14px; 
  line-height:21px; 
  text-align:center; 
  text-decoration:underline; 
  margin-top:32px; 
  white-space:pre-line; 
}
.footer-link:first-child{
  margin-top:0;
}

.copyright{
  font-family:'Montserrat', sans-serif;
  color:#fff; 
  font-size:12px; 
  line-height:12px; 
  text-align:center; 
  margin-top:64px; 
}

/* ========== Utilities ========== */
.mt-64{ margin-top:64px !important; }
.mt-40{ margin-top:40px !important; }
.mt-32{margin-top: 32px !important;}
.mt-24{ margin-top:24px !important; }
.mt-16{ margin-top:16px !important; }
.mt-8{ margin-top:8px !important; }
.w-100{ width:100% !important; }
/* ========== Floating LINE CTA ========== */
.floating-line-cta{ 
  position:fixed; 
  left:50%; 
  bottom:0; 
  transform:translateX(-50%); 
  width:100%; 
  max-width:420px; 
  padding:24px; 
  background:#FFFFFF; 
  z-index:1000; 
  pointer-events:none; 
}
.floating-line-cta-link{ 
  display:block; 
  width:100%; 
  pointer-events:auto; 
}
.floating-line-cta-img{ 
  width:100%; 
  height:auto; 
  display:block; 
  border-radius:40px; 
}