@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }}
@keyframes infinity-scroll-right {
  from{
    transform:translateX(-100%);
  }
  to{
    transform:translateX(0);
  }
}

  .scroll-infinity{
      margin:0;
  }
  .scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
  }
  .scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0;
    margin:0;
  }
  .scroll-infinity__list--left {
    animation: infinity-scroll-left 25s infinite linear 0.1s both;
  }
  .scroll-infinity__list--right {
    animation: infinity-scroll-right 25s infinite linear 0.1s both;
  }
  .scroll-infinity__item {
      width: calc(200vw / 6);
    }
  .scroll-infinity__item>img {
    width: 100%;
  }

  .bg-image-clip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 55vw;
    clip-path: inset(0); /* 切り抜き */
    z-index: -1;
  }
  .bg-image-fixed {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-image: url(img/fv.jpg);
    z-index: 2;
  }
  
  #fv{
    .bg-image-fixed {
        background-image: url(img/fv.jpg);
        z-index: 2;
        width: 100%;
      }
  }
  
  #fv2{
  display: none;
  }

  #features{
    margin-top: 10vw;
    margin-bottom: 10vw;
  }

.band2{
  background-image: url(img/gradation2.jpg);
  background-color:rgba(255, 255, 255, 0.7);
  background-blend-mode: overlay;
  box-shadow: 0px 0px 10px 5px rgba(134, 134, 134, 0.3);
  width: 100%;
  padding: 1vw 0;
  /* text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);*/
  p{
      padding: 0 1vw;
  }
}
.band3{
  display: none;
}

.wish{
  display: flex;
  text-align: left;
  img{
    width: 20vw;
    margin-left: 10vw;
  }

  h3{
    font-size: 3vw;
    margin: 3vw auto;
  }

  p{
    font-size: 1.5vw;
  }
}

.card3{
  background-color: #ffffff;
  width: 90vw;
  padding: 3vw;
  margin-right: auto;
  margin-left: auto;
  border-bottom: 1px dotted;
  border-color: #848484;
  display: flex;
  text-align: left;
  justify-content: space-around;
  box-shadow: 5px 0px 10px -6px rgba(0, 0, 0, 0.3);
}

.card3-2{
  background-color: #ffffff;
  width: 90vw;
  padding: 3vw;
  margin-right: auto;
  margin-left: auto;
  border-bottom: 1px dotted;
  border-color: #848484;
  display: flex;
  text-align: left;
  justify-content: space-around;
  box-shadow: 5px 10px 10px -6px rgba(0, 0, 0, 0.3);
}
.card4{
  width: 55vw;
  margin: 0 -5vw;
}

plarge{
  font-size: 5vw;
  margin-top: auto;
  margin-bottom: auto;
}

.side{
  display: flex;
  justify-content: center;
}

.kasaneru{
  position: relative;
.rectangles{
  position: absolute;
  top: 60%;
}
}
.rectangle2{
  background-color:#b41f24c0 ;
  color: #ffffff;
  width: fit-content;
  margin: 0 -1vw;
  margin-bottom: -1.2vw;
  padding: 1.0;
  padding-right: 1vw;
  padding-left: 1vw;
  h2{
      margin: 0;
  }
}
.kasaneru p{
    position: absolute;
    top: 93%;
}

.card{
  background-color: #ffffff;
  box-shadow: 5px 10px 10px -6px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  width: fit-content;
  padding: 1vw;
  margin: 1vw;
}

#curriculum{
  margin-top: 10vw;
  margin-bottom: 10vw;
  text-align: center;
  .layer{
    width: 90%;
  }
}

.course-item{
  p{
    color:#7d7d7d;
    font-size:0.7vw;
  }
}

#voice{
  margin-top: 10vw;
  margin-bottom: 13vw;
  h3{
    font-size: 1.6vw;
  }
  img{
    width: 100%;
    margin-top: 1.0vw;
    margin-right: -2.0vw;
  }
  p{
    font-size: 1.4vw;
  }
  .scroll-dot{
    display: none;
  }
  }
  
  #voice p{
    text-align: left;
    margin: 1.5vw 0.2vw;
  }

.wish2{
  display: inline;
  margin: auto;
  img{
    width: 40vw;
    position: absolute;
    margin-top: -10vw;
    margin-right: auto;
    margin-left: auto;
  }
}

html{
  width: 100%;
}
/* Theme colors specified by the user */
:root {
  --primary-color: #b41f24; /* main blue tone */
  --secondary-color: #ffffff; /* secondary color is white */
  --accent-color: #333333; /* accent for text or highlights */
  --text-color: var(--accent-color);
  --card-bg: #f8f9fb;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Highlight color used to emphasize key phrases */
  --highlight-color: #fff4b2;
  /* Light background used for alternating sections */
  --light-bg: #b41f240b;

  /* Fluid typography scale using CSS clamp() for viewport-based sizing. These
     variables define minimum, preferred (viewport-based), and maximum font sizes
     for various text elements. See Smashing Magazine’s guide on fluid
     typography for details on using clamp() with viewport units to smoothly
     scale fonts across different screen widths【715031330635740†L235-L266】. */
  /* Base body text (paragraphs, secondary text): scales between 0.95rem and 1.2rem. */
  --fs-base: clamp(0.95rem, 1vw + 0.6rem, 1.2rem);
  /* Section titles: scales between 1.4rem and 2.5rem. Reduced preferred value to
     accommodate longer Japanese titles on mobile screens. */
  --fs-title: clamp(1.4rem, 2vw + 0.8rem, 2.5rem);
  /* Hero headline: scales between 0.9rem and 3.5rem for larger screens (up to 1920px).
     A smaller minimum and preferred value ensure the headline stays on one
     line even on very narrow screens. */
  --fs-hero: clamp(0.9rem, 3vw + 0.5rem, 3.5rem);
  /* Navigation brand name: scales between 0.8rem and 1.5rem. The preferred value uses
     viewport units to shrink on small screens, ensuring long titles fit without
     wrapping. */
  --fs-nav: clamp(0.8rem, 0.5vw + 0.6rem, 1.5rem);
  /* Navigation links and buttons: scales between 0.7rem and 1.1rem. Reduced
     preferred value to allow links to fit within narrow widths. */
  --fs-nav-link: clamp(0.7rem, 0.8vw + 0.4rem, 1.1rem);
  /* Large numbers (stats and reason numbers): scales between 2.5rem and 5rem. */
  --fs-number: clamp(2.5rem, 3vw + 1.5rem, 5rem);
  /* Units accompanying numbers: scales between 1rem and 2rem. */
  --fs-unit: clamp(1rem, 1vw + 0.5rem, 2rem);
}
body {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: var(--text-color);
  background: var(--secondary-color);
  /* Subtle grid pattern using repeating linear gradients */
  background-image:
    repeating-linear-gradient(to right, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 40px);
  line-height: 1.6;
  width:100%;
}

/* Full hero image section at the very top of the page. This displays a full-width
   banner image introducing the brand with an integrated tagline and call-to-action.
   The image spans the viewport width while maintaining aspect ratio. */
.full-hero {
  width: 100%;
  margin: 0;
  padding: 0;
}
.full-hero img {
  width: 50%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Progress bar at the very top of the viewport. This thin bar fills
   horizontally to indicate how far the user has scrolled through the
   document. The height and color are defined here, and the width is
   controlled via JavaScript. */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--primary-color);
  width: 0%;
  z-index: 2000;
}
header {
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}
.nav img{
  height: 5vw;
}
.nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav ul li {
  margin-left: 1.5rem;
}
.nav ul a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  /* Fluid font size for navigation links */
  font-size: var(--fs-nav-link);
  white-space: nowrap;
}
.nav ul a:hover {
  color: var(--primary-color);
}
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 4rem 0;
  video{
    width:100%;
    text-align: center;
  }
}
.hero-text h2 {
  /* Fluid headline size based on viewport width */
  font-size: var(--fs-hero);
  margin-bottom: 1rem;
  color: #333333;
}

/* Highlighted text effect similar to the original reference site. Creates a pastel underlay below the text. */
.highlight {
  background-image: linear-gradient(transparent 70%, var(--highlight-color) 70%);
}
.hero-text p {
  /* Fluid paragraph text size */
  font-size: var(--fs-base);
  margin-bottom: 1.5rem;
}
.btn {
  background: var(--primary-color);
  color: #fff;
  /* Fluid font size for buttons */
  font-size: var(--fs-nav-link);
  padding: 0.8rem 2rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
  display: inline-block;
  position: relative;
}
.btn:hover {
  background: #b41f24;
}

/* Add arrow icon to buttons and animate slightly on hover */
.btn::after {
  content: "\2192"; /* right arrow */
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
}
.btn:hover::after {
  transform: translateX(4px);
}
.hero-img {
  flex: 1 1 400px;
  text-align: right;
}
.hero-img img {
  max-width: 100%;
  height: auto;
}
.hero{
  video{
    margin-top: 7vw;
    margin-bottom: 7vw;
  }
}
/* Section titles */
.section-title {
  text-align: center;
  /* Fluid font size for section titles */
  font-size: var(--fs-title);
  margin: 3rem 0 1.5rem;
  color: #333333;
  /* Prevent long section titles from wrapping unexpectedly */
}
.section-text {
  text-align: center;
  margin-bottom: 2rem;
  /* Fluid font size for descriptive text */
  font-size: var(--fs-base);
}
/* Icons */
/* Icon images are scaled to fit their container while preserving aspect ratio */
.icon {
  width: 50px;
  height: 50px;
  /* Center icons and ensure they are fully visible within the card */
  margin: 0 auto 1rem;
  display: block;
  object-fit: contain;
}
/* Course images */
/* Course images fill their card width and crop excess using cover to maintain aspect ratio */
.course-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 1rem;
  border-radius: 6px;
}
/* Split section for cards */
.split-section {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.split-card {
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: 2rem;
  border-radius: 8px;
  flex: 1 1 260px;
  max-width: 450px;
  transition: transform 0.3s;
}
.split-card:hover {
  transform: translateY(-4px);
}
.split-card h3 {
  margin-top: 0;
  color: #333333;
}
.split-card p {
  margin-bottom: 1rem;
}
/* Course item lists */
.course-item {
  background: var(--secondary-color);
  border-left: 5px solid var(--primary-color);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
}
.course-item h4 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--primary-color);
}
.course-item ul {
  list-style: disc;
  margin-left: 1.2rem;
}
/* Statistics section for showcasing key numbers */
.stats-section {
  padding-top: 5vw;
  padding-bottom: 5vw;
  text-align: center;
  margin: 4rem 0;
  background-color: #b41f24aa;
  .section-title{
    color: #ffffff;
  }
  p{
    color: #ffffff;
  }
}

/* Pain points section */
.pain-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  background-color: #333333;
  padding: 3rem 5vw;
  color: #fff;
  .section-title{color: #fff;}
}
.pain-section .pain-content {
  flex: 1 1 300px;
}
.pain-section .pain-image {
  flex: 1 1 300px;
  text-align: center;
}
.pain-section img {
  max-width: 400px;
  width: 100%;
  height: auto;
}
.pain-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.pain-list li {
  margin-bottom: 0.75rem;
  padding-left: 2rem;
  position: relative;
  /* Fluid font size for pain list items */
  font-size: var(--fs-base);
}
.pain-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--primary-color);
}

/* Reasons section */
.reasons-section {
  background: #fff;
  padding: 3rem 0;
}
.reasons-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.reason-card {
  background: var(--light-bg);
  border-radius: 8px;
  padding: 2rem;
  max-width: 350px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reason-card.show {
  opacity: 1;
  transform: translateY(0);
}
.reason-number {
  /* Fluid font size for decorative numbers */
  font-size: var(--fs-number);
  font-weight: bold;
  color: rgba(0, 0, 0, 0.05);
  position: absolute;
  top: -20px;
  right: 20px;
}
.reason-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  /* Fluid font size for reason titles */
  font-size: var(--fs-nav);
  color: var(--primary-color);
}
.reason-card p {
  /* Fluid font size for reason descriptions */
  font-size: var(--fs-base);
  line-height: 1.5;
}

/* Resources section */
.resources-section {
  padding: 3rem 0;
  background: var(--light-bg);
  text-align: center;
}
.resources-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}
.resource-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  flex: 1 1 260px;
  max-width: 320px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.resource-card.show {
  opacity: 1;
  transform: translateY(0);
}
.resource-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.resource-card h3 {
  margin: 0.5rem 0;
  /* Fluid font size for resource titles */
  font-size: var(--fs-nav);
  color: var(--primary-color);
}
.resource-card p {
  /* Fluid font size for resource descriptions */
  font-size: var(--fs-base);
  line-height: 1.5;
}


/* Roadmap section */
.roadmap-section {
  margin: 4rem 0;
  text-align: center;
}
.roadmap-image {
  max-width: 900px;
  width: 100%;
  height: auto;
  margin: 2rem auto 0;
  display: block;
}
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.stat-item {
  flex: 1 1 200px;
  max-width: 300px;
}
.stat-item .number {
  /* Fluid font size for decorative numbers */
  font-size: var(--fs-number);
  font-weight: bold;
  color: #ffffff;
}
.stat-item .unit {
  /* Fluid font size for stats units */
  font-size: var(--fs-unit);
  color: #ffffff;
  margin-left: 0.1rem;
}
.stat-item p {
  margin-top: 0.5rem;
  /* Fluid font size for stat labels */
  font-size: var(--fs-base);
}

/* Call-to-action section styling */
/* Call-to-action section layout: displays text and image side by side */
.cta-section {
  background: linear-gradient(135deg, var(--primary-color) 0%, #b41f24 100%);
  color: #fff;
  margin: 4rem 0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width:100%;
}
.cta-content {
  flex: 1 1 300px;
  min-width: 260px;
}
.cta-content h2 {
  /* Fluid CTA title size */
  font-size: var(--fs-hero);
  margin-bottom: 1rem;
  line-height: 1.3;
  font-weight: bold;
  color: #fff;
}
.cta-content p {
  /* Fluid CTA description size */
  font-size: var(--fs-base);
  margin-bottom: 2rem;
  color: #fff;
}
.cta-content .btn {
  background: #fff;
  color: var(--primary-color);
}
.cta-content .btn:hover {
  background: #f0f0f0;
}
.cta-image-wrapper {
  flex: 1 1 300px;
  min-width: 260px;
  text-align: center;
}
.cta-image {
  max-width: 400px;
  width: 100%;
  height: auto;
}

/* Testimonials section styles */
.testimonials-section {
  margin: 4rem 0;
  text-align: center;
}
.testimonials-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.testimonial-card {
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: 2rem;
  border-radius: 8px;
  max-width: 350px;
  flex: 1 1 260px;
  text-align: left;
  /* Fluid base font size for testimonials */
  font-size: var(--fs-base);
}
.testimonial-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: block;
}
.testimonial-name {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

/* Decorative section numbers behind COO and Web sections */
.coo-section,
.web-section {
  position: relative;
  margin-top: 10vw;
  margin-bottom: 10vw;
}
.coo-section::before,
.web-section::before {
  position: absolute;
  top: -2rem;
  left: 0;
  font-size: 8rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.04);
  z-index: -1;
  line-height: 1;
}
.coo-section::before {
  content: "02";
}
.web-section::before {
  content: "01";
}
/* Form styles */
.form-group {
  margin-bottom: 1rem;
}
.form-input,
.form-textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}
/* Fade-in animation classes */
.hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.show {
  opacity: 1;
  transform: translateY(0);
}
footer {
  background: #fff;
  padding: 2rem 0;
  border-top: 1px solid #eee;
  text-align: center;
}
footer p {
  margin: 0.5rem 0;
}

/* Contact section layout */
.contact-section {
  margin-top: 3rem;
}
.contact-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}
.contact-image {
  flex: 1 1 300px;
  max-width: 400px;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.contact-form {
  flex: 1 1 300px;
  max-width: 600px;
  width: 100%;
}

.faq-section {
  width: 95vw;
  margin: 10vw auto;
  text-align: left;
}

.faq-card {
  background: #ffffff;
  padding: 1vw;
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee;
}

.faq-card summary {
  cursor: pointer;
  padding: 1rem 3rem 1rem 2rem;
  font-size: 2vw;
  position: relative;
  display: flex;
  align-items: center;
  list-style: none;
}

.faq-card summary::marker {
  display: none; /* ←左の三角を消す */
}

.faq-card summary::-webkit-details-marker {
  display: none;
}


.faq-card summary::after {
  content: "▼";
  position: absolute;
  right: 1rem;
  font-size: 1.7vw;
  transition: all 0.5s;
}

.faq-card[open] summary::after {
  transform: rotate(180deg); /* 開いたときに上向きに */
}

.faq-q {
  color: #b41f24;
  margin-right: 0.5rem;
}

.faq-card p {
  padding: 1rem 2rem;
  margin: 0;
  background: white;
  border-top: 1px dashed #ccc;
  font-size: 1.7vw;
}

/******* ここからフッターのスタイル ********/

.yoko {
  display: flex;
}


.footer {
  padding: 2rem;
  font-size: 1vw;
  color: #ffffff;
  background: #b41f24;
}

.footer a {
  text-decoration: none;
  text-align: left;
  color: #ffffff;
  address{
    color: #ccc;
  }
}

.footer a visited{
  color: #ffffff;
}

address{
  color: #edc7d2;
  font-style: normal;
  text-align: left;
  margin-right: 0vw;
  margin-top: 1vw;
  margin-bottom: 0.5vw;
  margin-left: 0.5vw;
}

.footer-company {
  margin: 0.5vw;
  margin-left: 12vw;
}

.footer__address{
  margin-left: -10.5vw;
  margin-top: 0.5vw;
}

.footer-contents {
  margin: -0.5vw 3.5vw;
  margin-bottom: 1vw;
}

.footer hr{
  color: #ffffff;
  border-top: 0px solid;
}

.copyright{
  text-align: center;
  margin-bottom: -1vw;
  font-size: 1vw;
}

.footer__navi-heading {
  font-weight: 600;
}

.footer__navi li {
  margin-bottom: 0.75rem;
  list-style: none;
}

.footer__social a {
  display: inline-block;
}

.footer__social a:not(:last-child) {
  margin-right: 16px;
}

/* Responsive adjustments for screens 640px and below */
@media (max-width: 640px) {
  .footer {
    padding: 0 2rem;
    font-size: 1vw;
    color: #ffffff;
    height: 100%;
  }
  
  .footer a {
    text-decoration: none;
    color: #ffffff;
    text-align: left;
    address{
      color: #ccc;
    }
  }
  
  .footer a visited{
    color: #ffffff;
  }
  
  address{
    text-align: left;
    color: #edc7d2;
    font-style: normal;
    margin-right: 0vw;
    margin-left: 4vw;
  }
  
  .footer-company {
    margin-left: 0vw;
    margin-right: -2vw;
    margin-top: 4vw;
    img{
      padding-left: 11vw;
    }
  }

  .footer__address{
    margin-left: 0.5vw;
    margin-top: 1vw;
    white-space: nowrap;
  }

  
  .footer-contents {
    margin: -0.5vw 1vw;
    margin-top: 2.2vw;
    margin-bottom: 1vw;
    white-space: nowrap;
  }

  .copyright{
    text-align: center;
    padding-bottom: 1.5vw;
    font-size: 1.5vw;
  }
  
  .footer__navi-heading {
    font-weight: 600;
  }
  
  .footer__navi li {
    margin-bottom: 0.75rem;
    margin-right: -4vw;
    list-style: none;
  }

  .footer__navi a{
    font-size: 1.5vw;
    text-align: left;
  }
  
  .footer__social a {
    display: inline-block;
  }
  
  .footer__social a:not(:last-child) {
    margin-right: 10px;
  }
  .course-item{
    p{
      font-size:1.7vw;
    }
  }
  .full-hero{
    .space{
      height: 16vw;
    }
    img{
      width:70%;
    }
  }
  #fv{
    display: none;
  }

  #fv2{
    display: inline;
    .bg-image-fixed {
        background-image: url(img/fv2.jpg);
        z-index: 2;
        width: 100%;
      }
  }

  .bg-image-clip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 150vw;
    clip-path: inset(0); /* 切り抜き */
    z-index: -1;
  }
  plarge{font-size: 8vw;}
  .kasaneru p{
    top: 98%;
  }
  .rectangle2{
    color: #ffffff;
    width: fit-content;
    margin: 0 -1vw;
    margin-top: 4.2vw;
    margin-bottom: -3vw;
    padding: 0 2vw;
}
  #voice{

    .card{
      width:60vw
    }


    img{
      width:58vw;
      margin-top: 3vw;
      margin-right: -4vw;
    }
    p{
      font-size: 2.7vw;
      margin-top: 4vw;
      margin-left: 1.2vw;
      margin-right: 1vw;
      margin-bottom: 3vw;
    }
    h3{
      font-size: 3.8vw;
    }
    .rectangle2{
      background-color:#b41f24c0 ;
      color: #ffffff;
      width: fit-content;
      margin: 0 -1vw;
      margin-top: 4.2vw;
      margin-bottom: -3vw;
      padding: 0 2vw;
  }
    .scroll-dot{
      display: inline;
      text-align: center;
    } 




    .side {
      display: grid;
      grid-auto-columns: 100%;
      grid-auto-flow: column;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-snap-align: center;
      height: 100%;
      text-align: center;
      margin: 0 18.98vw;

      scroll-behavior: smooth;
    }
    .card {
      scroll-snap-align: center;

      &::scroll-marker {
        content: "";
        border: 1px solid #444;
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }

      &::scroll-marker:target-current {
        background-color: #444;
      }
    }
    
  }


  .scroll-infinity{
    margin:0;
}
  .scroll-infinity__item {
    width: 60vw;
  }
  .band2{
    display: none;
  }

  .band3{
    display: block;
    background-image: url(img/gradation2.jpg);
    background-color:rgba(255, 255, 255, 0.7);
    background-blend-mode: overlay;
    box-shadow: 0px 0px 10px 5px rgba(134, 134, 134, 0.3);
    width: 100%;
    padding: 1vw 0;
    /* text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);*/

    .wish{
      display: flex;
      text-align: left;
      img{
        width: 40vw;
        height: 70vw;
        margin: -2vw -5vw;
      }

    .wish2{
      display: inline;
      margin: auto;
      margin-left: -1vw;
      img{
        width: 60vw;
        height: 40vw;
        height: auto;
        position: absolute;
        margin-top: -14.5vw;
        margin-right: auto;
        margin-left: 2vw;
      }
    }

    h3{
        font-size: 5vw;
    }

    p{
        padding: 0 1vw;
        font-size: 2.5vw;
    }
    }

    }
  .nav ul{
    display:none;
  }
  .nav {
    padding: 0.7rem 0;
  }
  /* Keep hero items side-by-side on smaller screens by not overriding the row direction.
     Only adjust alignment and spacing for compact widths. */
  .hero {
    /* Preserve horizontal layout to keep text and image side-by-side */
    text-align: center;
    gap: 2rem;
  }
  .hero-img {
    text-align: right;
    margin-top: 0;
  }
  .split-section {
    flex-direction: column;
  }

/* -------------------------------------------------------------------------- */
/* Scroll-triggered animations                                              */
/*                                                                          */
/* The following keyframes and classes provide slide and bounce effects when */
/* elements enter the viewport. JavaScript adds the `.show` class along with */
/* a directional class (e.g., `slide-up`, `slide-left`, `slide-right`,       */
/* `bounce`) to trigger these animations.                                    */

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bounceUp {
  0%   { opacity: 0; transform: translateY(40px); }
  60%  { opacity: 1; transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Override initial transform for each animation direction when hidden */
.slide-up.hidden {
  transform: translateY(40px);
}
.slide-left.hidden {
  transform: translateX(-40px);
}
.slide-right.hidden {
  transform: translateX(40px);
}
.bounce.hidden {
  transform: translateY(40px);
}

/* Apply animations when element becomes visible */
.slide-up.show {
  animation: slideInUp 0.8s ease-out forwards;
}
.slide-left.show {
  animation: slideInLeft 0.8s ease-out forwards;
}
.slide-right.show {
  animation: slideInRight 0.8s ease-out forwards;
}
.bounce.show {
  animation: bounceUp 1s ease-out forwards;
}
  .split-card {
    max-width: none;
  }
  .stats-grid {
    flex-direction: column;
  }
  .stat-item {
    max-width: none;
  }

  /* Stack the contact section vertically on small screens */
  .contact-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .contact-image,
  .contact-form {
    max-width: 100%;
  }

  /* Stack CTA section items on mobile */
  .cta-section {
    flex-direction: column;
    text-align: center;
  }
  .cta-content,
  .cta-image-wrapper {
    min-width: 100%;
  }

  /* Adjust spacing for small screens (typography scales using fluid variables) */
  .nav ul a {
    /* Use viewport units for link spacing on small screens so the spacing
       scales with screen width and prevents overflow. */
    margin-left: 2vw;
  }
  .btn {
    padding: 0.6rem 1.5rem;
  }

  /* Stack pain section on small screens */
  .pain-section {
    flex-direction: column;
    text-align: center;
  }
  .pain-section .pain-image {
    max-width: 80%;
    margin: 0 auto;
  }

  /* Stack reasons grid */
  .reasons-grid {
    flex-direction: column;
  }

  /* Stack resources grid */
  .resources-grid {
    flex-direction: column;
  }

}

/* Additional adjustments for very small screens (330–400px) */
@media (max-width: 400px) {
  /* Adjust spacing for very small screens (typography scales using fluid variables) */
  .nav ul a {
    /* Further reduce spacing for very narrow screens */
    margin-left: 1vw;
  }
  .btn {
    padding: 0.5rem 1.2rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Micro-interactions and stylish animations                                */
/*                                                                          */
/* These classes implement floating icons, card shine effects, and enhanced */
/* 3D hover transformations, based on current web design trends.            */

/* Floating icons gently move up and down to create a sense of liveliness. */
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.floating {
  animation: float 6s ease-in-out infinite;
}

/* Shine effect for cards. A pseudo-element sweeps a light sheen across the card. */
@keyframes shine {
  0%   { left: -75%; }
  100% { left: 125%; }
}
.shine {
  position: relative;
  overflow: hidden;
}
.shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
}
/* Activate the shine animation when the element becomes visible */
.shine-active::before {
  animation: shine 2s ease-in-out forwards;
}

/* 3D hover effect for cards: adds perspective and rotation on hover for depth */
.split-card,
.reason-card,
.resource-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.split-card:hover,
.reason-card:hover,
.resource-card:hover {
  transform: translateY(-4px) perspective(800px) rotateX(-2deg) rotateY(2deg);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}
.space{
  height: 6vw;
}