@charset "UTF-8";
img {
  image-rendering: -webkit-optimize-contrast;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }
}

.footer {
  background: #000;
}
.footer a {
  color: #000;
}
.footer a:hover {
  color: #FFF;
}


.main {
  background-color: #000;
}

.hero {
  width: 100%;
  background-image: url('../images/bg_img.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 10px 0 80px 0; /* ← これが高さの代わりになる */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}


/* 上のロゴ2つ（PC横並び） */
.hero-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.race-logo,
.sub-logo {
  width: clamp(120px, 21vw, 240px);
  height: auto;
}

/* メインタイトル */
.hero-main {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-title {
  /*width: clamp(360px, 60vw, 900px);*/
  width: clamp(340px, 55vw, 880px);
  height: auto;
  margin-bottom: -2rem;
}

/* 内容①・内容②（PC横並び） */
.main-items {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}

.main-item {
  /*width: clamp(200px, 33vw, 380px);
  width: clamp(160px, 22vw, 320px);
  width: clamp(76%, 34vw, 420px);*/
  width: clamp(200px, 34vw, 420px);
  height: auto;
  /*animation: itemFloat 4s ease-in-out infinite;*/
  animation: itemUpDown 5s ease-in-out infinite;
}
.main-item_w {
    margin-top: -2%;
    margin-left: -1rem;
}

@keyframes itemFloat {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes itemUpDown {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
/* SPでは内容①→内容②の縦並びにする */
@media (max-width: 600px) {
  .hero{
    padding: 10px 0 40px 0; /* ← これが高さの代わりになる */
  }
  .main-title {
    margin-bottom: -0.5rem;
  }
  .main-item {
    width: clamp(76%, 34vw, 420px);
  }
  .main-items {
    flex-direction: column;
    gap: 10px;
  }
}

.attention{
   width:60%;
}

/* SPでは内容①→内容②の縦並びにする */
@media (max-width: 600px) {
  .attention{
   width:90%;
  }
}

#sec2 {
  background-color: #000;
}

.what24 {
  margin: 20px auto;
  display: block;
  width: 45%;
}

.miles24_wrap {
  max-width: 1000px;
  margin: 30px auto;
}

.items {
  display: flex;
  align-items: stretch;
}

.item {
  background-color: #FFF;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  /*border-radius: 999px 999px 40px 40px;*/
  border-radius: 999px 999px;
  /*padding-top: 10%;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;*/
}

.item img {
	/*width:50%;*/
}
.item p {
	line-height:1.5rem;
}

.btn_conditions {
  display: block;
  padding: 1.3rem 2rem;
  background: #FF9E00;
  color: #FFF;
  text-align: center;
  border-radius: 100px;
  width: 80%;
  margin: 3rem auto;
  -webkit-filter: drop-shadow(2px 4px 0px rgba(0, 0, 0, 0.3));
  -moz-filter: drop-shadow(2px 4px 0px rgba(0, 0, 0, 0.3));
  -ms-filter: drop-shadow(2px 4px 0px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(2px 4px 0px rgba(0, 0, 0, 0.3));
}
.btn_conditions:hover {
  color: #FFF;
  opacity: 0.75;
}

.btns-backgreen {
  background: linear-gradient(transparent 50%, #000 0%);
  width: 100%;
  overflow: hidden;
}
.btns-backgreen a {
  position: relative;
  top: 0;
  transition: all 0.3s 0s ease;
}
.btns-backgreen a:hover {
  top: 5px;
}
.btn_2{
	width:80%;
}
@media screen and (max-width: 768px) {
  .btns-backgreen {
    background: none;
  }
  .btns-backgreen img {
    width: 80vw;
  }
}

.btns-backblue {
  background: linear-gradient(transparent 50%, #000 0%);
  width: 100%;
  overflow: hidden;
}
.btns-backblue a {
  position: relative;
  top: 0;
  transition: all 0.3s 0s ease;
}
.btns-backblue a:hover {
  top: 5px;
}
@media screen and (max-width: 768px) {
  .btns-backblue {
    background: none;
  }
  .btns-backblue img {
    width: 80vw;
  }
}

.f-s {
  font-size: 1.4rem;
  /* calcサポート外をフォールバック */
  font-size: calc(1.4rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .f-s {
    font-size: 1.5rem;
  }
}

.f-m {
  font-size: 1.3rem;
  /* calcサポート外をフォールバック */
  font-size: calc(1.3rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  line-height: 1.8;
}

.f-m_joken {
  font-size: 1.3rem;
  /* calcサポート外をフォールバック */
  font-size: calc(1.3rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  line-height: 1.8;
}

@media screen and (max-width: 768px) {
  .f-m {
    font-size: 1.8rem;
  }
  .f-m_joken {
    font-size: 1.4rem;
    /* calcサポート外をフォールバック */
    font-size: calc(1.4rem + (1vw - 0.48rem) * 0.5556);
    line-height: 1.5;
  }
}

.f-l {
  font-size: 1.63rem;
  /* calcサポート外をフォールバック */
  font-size: calc(1.6rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  line-height: 1.8;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .f-l {
    font-size: 2rem;
  }
}
.f-l strong {
  font-size: 2.6rem;
  /* calcサポート外をフォールバック */
  font-size: calc(2.6rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  font-weight: 900;
}

.f-ll {
  font-size: 1.8rem;
  /* calcサポート外をフォールバック */
  font-size: calc(1.8rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  line-height: 1.6;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .f-ll {
    font-size: 2.2rem;
  }
}
.f-ll strong {
  font-size: 3rem;
  /* calcサポート外をフォールバック */
  font-size: calc(3rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  line-height: 1.4;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .f-ll strong {
    font-size: 3.5rem;
  }
}

.f-xl {
  font-size: 3.2rem;
  /* calcサポート外をフォールバック */
  font-size: calc(3.2rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  line-height: 1.5;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .f-xl {
    font-size: 3.5rem;
  }
}
.f-xl strong {
  font-size: 5rem;
  /* calcサポート外をフォールバック */
  font-size: calc(5rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .f-xl strong {
    font-size: 4.5rem;
  }
}

.lists li {
  display: flex;
  flex-flow: nowrap;
  align-items: center;
  align-items: flex-start;
  padding: 1.8rem 1rem;
}
.lists_joken li {
  display: flex;
  flex-flow: nowrap;
  align-items: center;
  align-items: flex-start;
  padding: 0.5rem 0;
}

@media screen and (max-width: 768px) {
  .lists li {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}
.lists img {
  margin-right: 10px;
  display: block;
  margin-top: calc(-0.5rem + (1vw - 0.48rem) * 0.5556);
  width: 2.4rem;
  width: calc(2.4rem + (1vw - 0.48rem) * 0.5556);
}
@media screen and (max-width: 768px) {
  .lists img {
    margin-top: 0.5rem;
  }
}
.lists span {
  display: block;

}
.lists_joken span {
  display: block;
  text-align: left;
}

.button {
  display: block;
  margin: 30px auto;
  font-size: 1.6rem;
  /* calcサポート外をフォールバック */
  font-size: calc(1.6rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  font-family: "Noto Sans JP", sans-serif;
  min-height: 0vw;
  /* Safari用バグフィックス */
  font-weight: 400;
  width: 100%;
  height: 57px;
  max-width: 400px;
  color: white !important;
  background: #FA4E5A;
  filter: drop-shadow(4px 4px 0px #00000028);
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 1200px) {
  .button {
    font-size: 1.8rem;
    width: 80%;
  }
}
@media screen and (max-width: 768px) {
  .button {
    line-height: 2;
  }
}
.button:hover {
  color: white;
  background: #ff6973;
}
.button:visited {
  color: white;
}
.button img {
  display: inline-block;
  padding: 0;
  margin: 0;
}

/* =================================
フォントサイズ　ベースセッティング
================================== */
html {
  /* ベースのフォントサイズを10pxとする */
  font-size: 62.5%;
  font-feature-settings: "palt";
}

body {
  font-size: 1.6rem;
  /* calcサポート外をフォールバック */
  font-size: calc(1.4rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  min-height: 0vw;
  /* Safari用バグフィックス */
  line-height: 2;
  /* Noto Sansフォント */
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #323232;
  overflow: hidden;
}

h1 {
  font-size: 3.2rem;
  /* calcサポート外をフォールバック */
  font-size: calc(3.2rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  min-height: 0vw;
  /* Safari用バグフィックス */
  line-height: 1.8;
  font-weight: 900;
}

h2 {
  font-size: 2.4rem;
  /* calcサポート外をフォールバック */
  font-size: calc(2.2rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  min-height: 0vw;
  /* Safari用バグフィックス */
  line-height: 1.8;
  font-weight: 700;
}

h3 {
  font-size: 2.2rem;
  /* calcサポート外をフォールバック */
  font-size: calc(2rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  min-height: 0vw;
  /* Safari用バグフィックス */
  line-height: 1.5;
  font-weight: 700;
}

h4 {
  font-size: 1.8rem;
  /* calcサポート外をフォールバック */
  font-size: calc(1.6rem + (1vw - 0.48rem) * 0.5556);
  /* viewportが480px以上1200px以下可変 */
  min-height: 0vw;
  /* Safari用バグフィックス */
  line-height: 1.5;
  font-weight: 500;
}

/*------ メディアクエリ --------*/
/* デバイス幅が1200px以上 */
@media screen and (min-width: 1200px) {
  body {
    font-size: 1.6rem;
  }

  h1 {
    font-size: 3.2rem;
  }

  h2 {
    font-size: 2.4rem;
  }

  h3 {
    font-size: 2.2rem;
  }

  h4 {
    font-size: 2rem;
  }
  .space-tablet{display: none;}
}
/* デバイス幅が480px以下 */
@media screen and (max-width: 480px) {

  .main-item {
    width: clamp(76%, 34vw, 420px);
  }
  .main-items {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }


  body {
    font-size: 1.6rem;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.8rem;
  }

  h4 {
    font-size: 1.8rem;
  }
  #sec1 .f-s{
	text-align: left;
  }
}

.f-s-1{
  text-align: center;
}

.under {
  border-bottom: double 7px #FF9E00;
}

.fixed_btn { 
position: fixed;
bottom: 60px;
left: 0px;
padding: 10px 10px 10px 0px;
color:white;
width:250px;
height:auto;
border-radius: 0 25px 25px 0 ;
border: 3px #fff solid ; 
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
text-orientation: upright;
background-color:#da0e39;
font-size:1.9rem;
font-weight:bold;
line-height:2rem;
  text-align: center;
z-index:99;
}
@media screen and (max-width: 768px) {
    .fixed_btn { 
        bottom: 0px;
    }
}

.text_color_white{
	color:#fff;
}