.stamp-rally {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  min-height: 50vh;
  padding: 30px 30px 45px;
  box-sizing: border-box;

  background:
    linear-gradient(
      to bottom,
      #00aeff  
    );
}



.stamp-rally::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      to right,
      rgba(255, 255, 255, 0.06) 0,
      rgba(255, 255, 255, 0.06) 18px,
      rgba(255, 255, 255, 0.02) 18px,
      rgba(255, 255, 255, 0.02) 38px
    );

  pointer-events: none;
}


.stamp-rally__main {
  position: relative;
  z-index: 2;

  width: min(650px, 55vw);
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.stamp-rally__visual {
  width: 100%;
  display: flex;
  justify-content: center;
}

.stamp-rally__visual img {
   width: 900px;
  height: auto; 
 }


.stamp-rally__side {
  position: absolute;
  z-index: 1;

  pointer-events: none;
}

.stamp-rally__side img {
  display: block;
  width: 100%;
  height: auto;
}

.stamp-rally__side--left {
  left: max(20px, calc(50% - 590px));
  top: 42%;
  width: clamp(120px, 13vw, 190px);
}

.stamp-rally__side--right {
  right: max(20px, calc(50% - 590px));
  top: 42%;
  width: clamp(140px, 14vw, 210px);
}

.stamp-rally__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-top: 30px;
  padding: 12px 20px 12px 24px;

  border-radius: 999px;

  background: #ffae00;
  color: #fff;

  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;

  box-shadow:
    0 4px 4px rgba(136, 84, 9, 0.2);

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.stamp-rally__button:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.stamp-rally__arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  border-radius: 50%;

  background: #fff;
  color: #e5a826;

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

.stamp-rally__text {
  margin-top: 45px;
  color: #fff;
}


.stamp-rally__text h1 {
  margin: 0 0 35px;

  font-size: clamp(28px, 2vw, 32px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.08em;

  text-shadow:
    0 3px 4px rgba(0, 96, 143, 0.4);
}


.stamp-rally__text p {
  margin: 8px 0 0;

  font-size: clamp(14px, 1vw, 16px);
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.04em;
}


@media screen and (min-width: 1400px) {

  .stamp-rally {
    padding-top: 40px;
  }

  .stamp-rally__main {
    width: 900px;
  }

  .stamp-rally__visual img {
    width: 1000px;
  }

  .stamp-rally__text {
    margin-top: 55px;
  }

}


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

  .stamp-rally {
    display: block;
    min-height: 80vh;
    padding: 32px 30px 30px;
    overflow: hidden;
  }

  .stamp-rally::before {
    background:
      repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.08) 0,
        rgba(255, 255, 255, 0.08) 14px,
        rgba(255, 255, 255, 0.025) 14px,
        rgba(255, 255, 255, 0.025) 30px
      );
  }

  .stamp-rally::after {
    height: 190px;

    background-size: 48px 42px;
    background-position: 0 15px;

    opacity: 0.65;
  }

  .stamp-rally__main {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 500px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .stamp-rally__visual {
    position: relative;
    z-index: 3;

    width: 100%;
    display: flex;
    justify-content: center;
  }

  .stamp-rally__visual img { 
    width: 600px;
     height: auto;
  }

  .stamp-rally__side {
    position: absolute;
    z-index: 2;
  }


  .stamp-rally__side--left {
    top: 340px;
    left: -25px;

    width: 125px;
  }

  .stamp-rally__side--right {
    top: 370px;
    right: -35px;

    width: 120px;
  }


  .stamp-rally__side img {
    width: 100%;
    height: auto;
  }

  .stamp-rally__button {
    position: relative;
    z-index: 5;

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

    margin-top: 30px;
    padding: 0 12px 0 20px;

    display: flex;
    justify-content: space-between;

    box-sizing: border-box;

    border-radius: 999px;

    font-size: 13px;
    letter-spacing: 0.03em;
  }


  .stamp-rally__arrow {
    flex-shrink: 0;

    width: 25px;
    height: 25px;

    font-size: 17px;
  }

  .stamp-rally__text {
    position: relative;
    z-index: 4;

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

    margin-top: 50px;

    box-sizing: border-box;

    text-align: center;
  }


  .stamp-rally__text h1 {
    margin: 0 0 20px;

    font-size: 24px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.08em;

    color: #fff;

    text-shadow:
      0 2px 0 rgba(0, 92, 140, 0.22);
  }


  .stamp-rally__text p {
    margin: 5px auto 0;

    max-width: 480px;

    font-size: 14px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.03em;

    color: #fff;
  }

}

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

  .stamp-rally {
    padding:
      25px
      30px
      25px;
  }


  .stamp-rally__visual img {
    width: 430px;
  }


  .stamp-rally__side--left {
    top: 315px;
    left: -35px;

    width: 120px;
  }


  .stamp-rally__side--right {
    top: 345px;
    right: -40px;

    width: 115px;
  }


  .stamp-rally__button {
    width: 230px;
    min-height: 42px;

    font-size: 12px;
  }


  .stamp-rally__text {
    margin-top: 30px;
  }


  .stamp-rally__text h1 {
    font-size: 20px;
  }


  .stamp-rally__text p {
    font-size: 10px;
  }

}


/* =========================================
   SECTION
========================================= */

.rally-course-section {
  position: relative;
  overflow: hidden;

  padding: 5px 20px 40px;


  background:
    linear-gradient(
      to bottom,
            #00aeff  
    );
}

.rally-course-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.055) 0,
      rgba(255, 255, 255, 0.055) 20px,
      rgba(255, 255, 255, 0.015) 20px,
      rgba(255, 255, 255, 0.015) 42px
    );

  pointer-events: none;
}

.rally-course-section::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.55) 0 1.5px,
      transparent 2px
    );

  background-size: 58px 50px;

  opacity: 0.45;

  pointer-events: none;
}


.rally-course-inner {
  position: relative;
  z-index: 1;

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

  margin: 0 auto;
}


.section-heading {
  margin-bottom: 40px;

  text-align: center;
  color: #fff;
}


.section-heading h2 {
  margin: 0 0 8px;

  font-size: 26px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.12em;
text-shadow:
    0 3px 4px rgba(0, 96, 143, 0.4);
}


.section-heading p {
  margin: 0;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.course-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

  width: 100%;
}


.course-card {
  overflow: hidden;

  min-width: 0;

  background: #fff;

  border-radius: 14px;

  box-shadow:
    0 3px 0 rgba(0, 95, 142, 0.12);
}


.course-map {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 180px;

  padding: 18px 14px 15px;

  box-sizing: border-box;
}


.course-map img {
  display: block;

  width: 100%;
  max-width: 190px;
  height: 100%;

  object-fit: contain;
}


.course-card-content {
  padding: 0 16px 18px;
}


.course-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 10px;
}


.course-title-row h3 {
  margin: 0;

  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;

  color: #253647;
}


.course-distance {
  flex-shrink: 0;

  padding: 4px 8px;

  border-radius: 999px;

  background: #ff6a00;

  color: #fff;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}


.course-description {
  margin: 0;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;

  color: #43505b;
}



.stamp-spot-area {
  margin-top: 48px;
}


.stamp-heading {
  margin-bottom: 40px;
}


.stamp-spot-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);

  gap: 16px;

  width: 100%;
}


.stamp-spot-card {
  overflow: hidden;

  min-width: 0;

  border-radius: 10px;

  background: #fff;
}


.stamp-spot-image {
  width: 100%;
  aspect-ratio: 1.45 / 1;

  overflow: hidden;
}


.stamp-spot-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.stamp-spot-card p {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;

  margin: 0;
  padding: 15px 4px;

  box-sizing: border-box;

  text-align: center;

  color: #253647;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

/* =========================================
   SP
========================================= */

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

  .rally-course-section {
    padding: 12px 25px 26px;
  }


  .rally-course-section::before {
    background:
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.065) 0,
        rgba(255, 255, 255, 0.065) 12px,
        rgba(255, 255, 255, 0.015) 12px,
        rgba(255, 255, 255, 0.015) 28px
      );
  }


  .rally-course-section::after {
    background-size: 42px 36px;

    opacity: 0.45;
  }


  .section-heading {
    margin-bottom: 20px;
  }


  .section-heading h2 {
    margin-bottom: 4px;

    font-size: 22px;
    line-height: 1.4;
    letter-spacing: 0.1em;
  }


  .section-heading p {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.04em;
  }


  .course-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;
  }


  .course-card {
    border-radius: 9px;
  }


  .course-map {
    height: 140px;

    padding: 10px 8px 8px;
  }


  .course-map img {
    max-width: 125px;
  }


  .course-card-content {
    padding: 5px 8px 10px;
  }

  .course-title-row {
    gap: 4px;

    margin-bottom: 10px;
  }

  .course-title-row h3 {
    font-size: 14px;
    line-height: 1.3;
  }

  .course-distance {
    padding: 4px 8px;

    font-size: 11px;
  }

  .course-description {
    font-size: 11px;
    line-height: 1.55;
  }

  .stamp-spot-area {
    margin-top: 50px;
  }


  .stamp-heading {
    margin-bottom: 20px;
  }


  .stamp-spot-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;
  }


  .stamp-spot-card {
    border-radius: 7px;
  }


  .stamp-spot-image {
    aspect-ratio: 1.45 / 1;
  }


  .stamp-spot-card p {
    min-height: 20px;

    padding: 10px 6px;

    font-size: 10px;
    line-height: 1.5;
  }

}

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

  .rally-course-section {
    padding-right: 20px;
    padding-left: 20px;
  }


  .course-list {
    gap:15px;
  }


  .course-map {
    height: 112px;
  }


  .course-card-content {
    padding-right: 7px;
    padding-left: 9px;
  }


  .course-title-row h3 {
    font-size: 12px;
  }


  .course-description {
    font-size: 10px;
  }


  .stamp-spot-list {
    gap:15px;
  }

}

.how-to-section {
  position: relative;
  overflow: hidden;

  padding: 26px 20px 28px;

  background:
    linear-gradient(
      to bottom,
          #00aeff  
    );
}


.how-to-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.055) 0,
      rgba(255, 255, 255, 0.055) 20px,
      rgba(255, 255, 255, 0.015) 20px,
      rgba(255, 255, 255, 0.015) 42px
    );

  pointer-events: none;
}


.how-to-section::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.5) 0 1.5px,
      transparent 2px
    );

  background-size: 58px 50px;

  opacity: 0.45;

  pointer-events: none;
}


.how-to-inner {
  position: relative;
  z-index: 1;

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

  margin: 0 auto;
}


.how-to-heading {
  margin-bottom: 40px;

  text-align: center;
  color: #fff;
}


.how-to-heading h2 {
  margin: 0 0 8px;

  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;

  letter-spacing: 0.15em;
text-shadow:
    0 3px 4px rgba(0, 96, 143, 0.4);
}


.how-to-heading p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.how-to-box {
  position: relative;

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

  width: 100%;

  padding: 25px 30px;

  box-sizing: border-box;

  border-radius: 16px;

  background: #fff;
}


.how-to-step {
  flex: 1;

  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}



.step-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  margin-bottom: 15px;

  border-radius: 50%;

  background: #1479ac;

  color: #fff;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
}


.step-number strong {
  font-size: 17px;
  line-height: 1;
}

.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 65px;

  margin-bottom: 20px;
}


.step-icon img {
  display: block;

  max-width: 90px;
  max-height: 120px;

  width: auto;
  height: auto;

  object-fit: contain;
}


.step-text {
  margin: 0;

  color: #364552;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}


.step-arrow {
  position: relative;

  flex: 0 0 38px;

  width: 38px;

  margin: 0 12px;
}


.step-arrow::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

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

  width: 0;
  height: 0;

  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 20px solid #1479ac;
}


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

  .how-to-section {
    padding: 12px 25px 20px;
  }


  .how-to-section::before {
    background:
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.065) 0,
        rgba(255, 255, 255, 0.065) 12px,
        rgba(255, 255, 255, 0.015) 12px,
        rgba(255, 255, 255, 0.015) 28px
      );
  }


  .how-to-section::after {
    background-size: 42px 36px;
  }


  .how-to-heading {
    margin-bottom: 20px;
  }


  .how-to-heading h2 {
    margin-bottom: 4px;

    font-size: 22px;
    line-height: 1.3;

    letter-spacing: 0.12em;
  }


  .how-to-heading p {
    font-size: 14px;
    line-height: 1.5;

    letter-spacing: 0.04em;
  }


  .how-to-box {
    display: grid;

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

    padding: 10px;

    border-radius: 10px;
  }


  .how-to-step {
    position: relative;

    min-height: 140px;

    padding: 20px 5px;

    box-sizing: border-box;
  }


  .step-arrow {
    display: none;
  }


  .how-to-box::before {
    content: "";

    position: absolute;

    top: 10px;
    bottom: 10px;

    left: 50%;

    width: 1px;

    background: #c7d8df;

    transform: translateX(-50%);
  }


  .how-to-box::after {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;

    top: 50%;

    height: 1px;

    background: #c7d8df;

    transform: translateY(-50%);
  }


  .step-number {
    width: 32px;
    height: 32px;

    margin-bottom: 9px;

    font-size: 8px;
  }


  .step-number strong {
    font-size: 12px;
  }


  .step-icon {
    height: 48px;

    margin-bottom: 14px;
  }


  .step-icon img {
    max-width: 70px;
    max-height: 70px;
  }

  .step-text {
    font-size: 12px;
    line-height: 1.5;
  }

}


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

  .how-to-section {
    padding-right: 20px;
    padding-left: 20px;
  }


  .how-to-box {
    padding: 8px;
  }


  .how-to-step {
    min-height: 130px;
  }


  .step-number {
    width: 30px;
    height: 30px;
  }


  .step-icon {
    height: 44px;
  }


  .step-icon img {
    max-width: 80px;
    max-height: 60px;
  }


  .step-text {
    font-size: 12px;
  }

}


/* =========================================
   PRIZE SECTION
========================================= */

.prize-section {
  position: relative;
  overflow: hidden;

  padding: 30px 20px 36px;

  background:
    linear-gradient(
      to bottom,
        #00aeff   
    );
}



.prize-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.055) 0,
      rgba(255, 255, 255, 0.055) 20px,
      rgba(255, 255, 255, 0.015) 20px,
      rgba(255, 255, 255, 0.015) 42px
    );

  pointer-events: none;
}


.prize-section::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.5) 0 1.5px,
      transparent 2px
    );

  background-size: 58px 50px;

  opacity: 0.45;

  pointer-events: none;
}


.prize-inner {
  position: relative;
  z-index: 1;

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

  margin: 0 auto;
}


.prize-heading {
  margin-bottom: 40px;

  text-align: center;
  color: #fff;
}


.prize-heading h2 {
  margin: 0 0 8px;

  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;

  letter-spacing: 0.15em;
text-shadow:
    0 3px 4px rgba(0, 96, 143, 0.4);
}


.prize-heading p {
  margin: 0;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;

  letter-spacing: 0.06em;
}


.prize-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 20px;
}

.prize-card {
  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: 8px;

  box-sizing: border-box;

  border: 5px solid #fbee00;
  border-radius: 12px;

  background: #fff;

  overflow: hidden;
}


.prize-image {
  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  border-radius: 10px;

  background: #f2f0e9;
}


.prize-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}
.prize-content {
  display: flex;
  flex-direction: column;

  flex: 1;

  padding: 16px 10px 12px;
}


.prize-number {
  display: inline-flex;
  align-items: center;

  align-self: flex-start;

  min-height: 22px;

  padding: 3px 12px;

  box-sizing: border-box;

  border-radius: 999px;

  background: #fbee00;

  color: #4a4740;

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.prize-card h3 {
  margin: 9px 0 7px;

  color: #263746;

  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
}


.prize-card p {
  margin: 0;

  color: #364552;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
}


.prize-stamp {
  display: flex;
  align-items: baseline;
  justify-content: center;

  gap: 5px;

  margin-top: auto;
  padding-top: 14px;

  color: #273744;
}


.prize-stamp span {
  font-size: 12px;
  font-weight: 700;
}


.prize-stamp strong {
  color: #1479ac;

  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}


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

  .prize-section {
    padding: 14px 25px 26px;
  }



  .prize-section::before {
    background:
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.065) 0,
        rgba(255, 255, 255, 0.065) 12px,
        rgba(255, 255, 255, 0.015) 12px,
        rgba(255, 255, 255, 0.015) 28px
      );
  }


  .prize-section::after {
    background-size: 42px 36px;
  }


  .prize-heading {
    margin-bottom: 20px;
  }


  .prize-heading h2 {
    margin-bottom: 5px;

    font-size: 22px;
    line-height: 1.3;

    letter-spacing: 0.12em;
  }


  .prize-heading p {
    font-size: 14px;
    line-height: 1.5;

    letter-spacing: 0.04em;
  }


  .prize-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;
  }


  .prize-card {
    padding: 7px;

    border-width: 4px;
    border-radius: 10px;
  }


  .prize-image {
    aspect-ratio: 1 / 1;

    border-radius: 6px;
  }



  .prize-content {
    padding: 10px 10px 5px;
  }


  .prize-number {
    min-height: 18px;

    padding: 4px 10px;

    font-size: 12px;
  }


  .prize-card h3 {
    margin: 7px 0 5px;

    font-size: 14px;
    line-height: 1.5;
  }

  .prize-card p {
    font-size: 10px;
    line-height: 1.5;
  }



  .prize-stamp {
    gap: 4px;

    padding-top: 8px;
  }


  .prize-stamp span {
    font-size: 10px;
  }


  .prize-stamp strong {
    font-size: 28px;
  }

}

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

  .prize-section {
    padding-right: 20px;
    padding-left: 20px;
  }


  .prize-list {
    gap: 15px;
  }


  .prize-card h3 {
    font-size: 14px;
  }


  .prize-card p {
    font-size: 10px;
  }

}

/* =========================================
   INFO SECTION
========================================= */

.info-section {
  position: relative;
  overflow: hidden;

  padding: 28px 20px 50px;

  /* 蓝色背景 */
  background:
    linear-gradient(
      to bottom,
           #00aeff  
    );
}



.info-section::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.06) 0,
      rgba(255, 255, 255, 0.06) 20px,
      rgba(255, 255, 255, 0.015) 20px,
      rgba(255, 255, 255, 0.015) 42px
    );

  pointer-events: none;
}


.info-section::after {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.5) 0 1.5px,
      transparent 2px
    );

  background-size: 58px 50px;

  opacity: 0.45;

  pointer-events: none;
}


.info-inner {
  position: relative;
  z-index: 1;

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

  margin: 0 auto;
}


.info-heading {
  margin-bottom: 40px;

  text-align: center;

  color: #fff;
}


.info-heading h2 {
  margin: 0 0 7px;

  font-size: 27px;
  font-weight: 800;
  line-height: 1.3;

  letter-spacing: 0.14em;
text-shadow:
    0 3px 4px rgba(0, 96, 143, 0.4);
}


.info-heading p {
  margin: 0;

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

  letter-spacing: 0.06em;
}


.apply-method {
  position: relative;

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

  min-height: 160px;

  padding: 25px 35px 55px;

  box-sizing: border-box;

  border-radius: 14px;

  background: #f8f8f6;
}


.apply-step {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 0;

  text-align: center;
}


.apply-step-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  margin-bottom: 12px;

  border-radius: 50%;

  background: #197dad;

  color: #fff;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}


.apply-step-number strong {
  font-size: 17px;
}


.apply-step-content h3 {
  margin: 0 0 7px;

  color: #273744;

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


.apply-step-content p {
  margin: 0;

  color: #4b5962;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}


.apply-arrow {
  position: relative;

  flex: 0 0 45px;

  height: 1px;

  margin: 0 15px;

  background: #c7d6dc;
}


.apply-arrow::after {
  content: "";

  position: absolute;

  top: 50%;
  right: -8px;

  width: 0;
  height: 0;

  transform: translateY(-50%);

  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid #167dad;
}



.apply-note {
  position: absolute;

  bottom: 15px;
  left: 0;

  width: 100%;

  margin:0px;

  text-align: center;

  color: #d85043;

  font-size:10px;
  font-weight: 700;
  line-height: 1.5;
}


.info-card {
  margin-top: 25px;

  padding: 24px 28px;

  box-sizing: border-box;

  border-radius: 14px;

  background: #f8f8f6;
}


.info-card-title {
  margin: 0 0 17px;

  color: #273744;

  font-size: 22px;
  font-weight: 800;

  letter-spacing: 0.08em;
}


.notice-list {
  margin: 0;
  padding: 0;

  list-style: none;
}


.notice-list li {
  position: relative;

  padding-left: 18px;

  color: #3d4b55;

  font-size: 14px;
  font-weight: 500;
  line-height: 2;
  margin-bottom: 4px;
}


.notice-list li::before {
  content: "";

  position: absolute;

  top: 0.82em;
  left: 2px;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #1982b4;
}


/* =========================================
   FAQ
========================================= */

.faq-card {
  padding-bottom: 20px;
}


.faq-item {
  border-bottom: 1px dashed #c8d3d7;
}


.faq-item summary {
  position: relative;

  display: block;

  padding: 12px 28px 12px 18px;

  cursor: pointer;

  list-style: none;

  color: #344550;

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


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


.faq-item summary::before {
  content: "Q";

  position: absolute;

  top: 50%;
  left: 0;

  transform: translateY(-50%);

  color: #1680b1;

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


.faq-item summary::after {
  content: "›";

  position: absolute;

  top: 50%;
  right: 4px;

  transform: translateY(-50%);

  color: #1680b1;

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


.faq-answer {
  padding: 0 20px 14px;

  color: #52616a;

  font-size: 12px;
  line-height: 1.5;
}


.contact-content {
  display: grid;

  grid-template-columns: 42% 1fr;

  gap:80px;

  align-items: center;

  padding: 16px;

  background: #e7edf2;
}


.contact-map {
  overflow: hidden;

  border-radius: 4px;
}


.contact-map img {
  display: block;

  width: 100%;
  height: auto;
}


.contact-info {
  min-width: 0;
}


.contact-title {
  margin: 0 0 10px;

  color: #273744;

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


.contact-text {
  margin: 0 0 8px;

  color: #46555f;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
}


.contact-button {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  width: 180px;
  height: 34px;

  margin-top: 14px;
  margin-left: auto;

  border-radius: 999px;

  background:#ffae00;

  color: #fff;

  text-decoration: none;

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


.contact-button span {
  font-size: 17px;
}


/* =========================================
   SP
========================================= */

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

  .info-section {
    padding: 14px 20px 28px;
  }


  .info-heading {
    margin-bottom: 20px;
  }


  .info-heading h2 {
    margin-bottom: 4px;

    font-size: 22px;

    letter-spacing: 0.12em;
  }


  .info-heading p {
    font-size: 14px;

    letter-spacing: 0.04em;
  }

  .apply-method {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    min-height: auto;

    padding: 15px 20px 20px;

    border-radius: 8px;
  }


  .apply-step {
    position: relative;

    flex: none;

    width: 100%;
    min-height: 80px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 15px;

    padding: 8px 5px;

    text-align: left;
  }


  .apply-step-number {
    flex-shrink: 0;

    width: 36px;
    height: 36px;

    margin-bottom: 0;

    font-size: 8px;
  }


 .apply-step-number strong {
    font-size: 14px;
  }

 
  .apply-step-content {
    flex: 1;
  }

  .apply-step-content h3 {
    margin: 0 0 4px;

    font-size: 16px;
  }


  .apply-step-content p {
    font-size: 11px;
    line-height: 1.5;
  }

 
  .apply-arrow {
    display: none;
  }
 
  .apply-step:not(:last-of-type)::after {
    display: none;
  }
 
  .apply-step:not(:last-of-type) {
    border-bottom: 1px solid #c7d6dc;
  }
 
  .apply-note {
    position: relative;

    bottom: auto;
    left: auto;

    width: 100%;

    margin-top: 8px;

    font-size: 10px;
    line-height: 1.6;
  }


  .info-card {
    margin-top: 16px;

    padding: 16px 14px;

    border-radius: 9px;
  }


  .info-card-title {
    margin-bottom: 11px;

    font-size: 16px;
  }


  .notice-list li {
    padding-left: 11px;

    font-size: 11px;
    line-height: 1.8;
  }


  .notice-list li::before {
    top: 0.8em;

    width: 3px;
    height: 3px;
  }


  /* -------------------------
     FAQ
  ------------------------- */

  .faq-card {
    padding-bottom: 12px;
  }


  .faq-item summary {
    padding: 8px 20px 8px 12px;

    font-size: 11px;
  }


  .faq-item summary::before {
    font-size: 10px;
  }


  .faq-item summary::after {
    right: 2px;

    font-size: 20px;
  }


  .faq-answer {
    padding: 0 12px 9px;

    font-size: 10px;
  }


  .contact-content {
    grid-template-columns: 1fr;

    gap: 12px;

    padding: 20px  ;
  }


  .contact-map {
    width: 100%;
  }


  .contact-info {
    text-align: left;
  }


  .contact-title {
    margin-bottom: 7px;

    font-size: 16px;
  }


  .contact-text {
    margin-bottom: 5px;

    font-size: 12px;
    line-height: 1.65;
  }


  .contact-button {
    width: 120px;
    height: 26px; 
    gap: 7px; 
    margin-top: 14px; 
    font-size:10px;
    box-shadow:
    0 4px 4px rgba(136, 84, 9, 0.2);
  }


  .contact-button span {
    font-size: 13px;
  }

}

  /*-----------------full-background------------*/
.full-background {
  position: fixed;
  left: 0;
  bottom: 0;    
  width: 100%;
  height: 100%;  
  background-image: url('https://oportable.jp/.assets/bg2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}
 /* =========================================
   完走証 Section
========================================= */

.completion-section {
  position: relative;
  overflow: hidden;

  padding: 5px 20px 40px;


  background:
    linear-gradient(
      to bottom,
            #00aeff  
    );
}
  
.completion-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.055) 0,
      rgba(255, 255, 255, 0.055) 20px,
      rgba(255, 255, 255, 0.015) 20px,
      rgba(255, 255, 255, 0.015) 42px
    );

  pointer-events: none;
}

.completion-section::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.55) 0 1.5px,
      transparent 2px
    );

  background-size: 58px 50px;

  opacity: 0.45;

  pointer-events: none;
}

.completion-inner {
    position: relative;
    z-index: 1;

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

    margin: 0 auto;

    padding: 10px 20px 45px;

    text-align: center;
}
 

.completion-heading {
    margin-bottom: 28px;
}


.completion-heading h2 {
    margin: 0 0 8px;

    color: #fff;

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

    line-height: 1.4;

    letter-spacing: 0.05em;

    text-shadow:
        0 2px 3px rgba(0, 80, 130, 0.25);
}


.completion-heading p {
    margin: 0;

    color: #fff;

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

    line-height: 1.8;

    letter-spacing: 0.04em;
}
 

.completion-gallery {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    width: 100%;
}
 

.gallery-side {
    display: flex;
    flex-direction: column;

    gap: 12px;

    width: 150px;

    flex-shrink: 0;
}


.gallery-side img {
    display: block;

    width: 150px;
    height: 184px;

    object-fit: cover;

    border-radius: 11px;
}
 

.gallery-center {
    width: 217px;

    flex-shrink: 0;
}


.gallery-center img {
    display: block;

    width: 217px;
    height: auto;

    border-radius: 12px;
 
}
 
.completion-message {
    margin-top: 42px;
}


.completion-message p {
    margin: 0;

    color: #fff;

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

    line-height: 1.8;

    letter-spacing: 0.05em;

    text-shadow:
        0 2px 3px rgba(0, 80, 130, 0.25);
}

 

.completion-note {
    margin: 32px 0 0;

    color: #fff;

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

    line-height: 1.6;

    letter-spacing: 0.03em;
}
 

.pc-only {
    display: inline;
}

 

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

    .completion-inner {
        padding: 0;
    }
 

    .completion-heading {
        margin-bottom: 25px;
    }


    .completion-heading h2 {
        font-size: 21px;

        line-height: 1.45;

        letter-spacing: 0.04em;
    }


    .completion-heading p {
        font-size: 11px;

        line-height: 1.75;
    }
 

    .completion-gallery {
        display: grid;

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

        column-gap: 12px;

        align-items: center;
    }
 
    .gallery-side {
        width: 100%;

        gap: 12px;
    }


    .gallery-side img {
        width: 100%;
        height: auto;

        aspect-ratio: 1 / 1.3;

        border-radius: 10px;
    }
 
    .gallery-center {
        width: 100%;
    }


    .gallery-center img {
        width: 100%;
        height: auto;

        border-radius: 11px;
    }
 

    .completion-message {
        margin-top: 40px;
    }


    .completion-message p {
        font-size: 12px;

        line-height: 1.7;

        letter-spacing: 0.04em;
    }
 

    .completion-note {
        margin-top: 10px;

        font-size: 10px;
    }


    .pc-only {
        display: none;
    }

}