@font-face{
	font-family: "line-font";
	src: url("../font/LINESeedJP_OTF_Rg.woff");
	font-weight: 400;
}

@font-face{
	font-family: "line-font";
	src:url("../font/LINESeedJP_OTF_Bd.woff");
	font-weight: 700;
}

@font-face{
	font-family: "line-font";
	src:url("../font/LINESeedJP_OTF_Eb.woff");
	font-weight: 900;
}

@font-face{
    font-family: "ff-good-headline-web-pro-ext", sans-serif;
    font-weight: 700;
    font-style: normal;
}


html{
	scroll-behavior: smooth;
    font-size: 10px;
}

body{
    background-color: #000;
    background-attachment: fixed;
    background-image: url("../images/bg.jpg");
    background-size: 100%;
    /*background-repeat: no-repeat;*/
    background-position: top center;
    font-family: "line-font";
    font-size:1.6rem;

    background-color: #000000;
opacity: 1;
background-image: linear-gradient(-45deg, #000000, #000000 50%, #131313 50%, #131313);
background-size: 11px 11px;

}
    

a:hover{
    opacity: 0.8;
}

#root{
    width: 100%;
    /*background-color: #000;*/
}

#page{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

#header{
    
}

#header-inner{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

#header-logo{
    
}

#main_container{
    margin: -300px 0px 0px;
}


#attention_container{
    width: calc(100% - 2rem);
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0rem;
    padding: 1rem;
    /* margin: 1rem; */
    justify-content: center;
    color: #000;
    align-items: center;
    background-color: #FFF;
    border-radius: 2rem;
    border: 10px ridge #FF1A84;
    position: relative;
    z-index: 10;
}

#attention_title{
    font-size: 1.6rem;
    font-weight: 700;
    color: #eb0808;
    text-align: center;
}

#attention_body{
    font-size: 1.4rem;
    font-weight: 400;
    color: #303030;
    text-align: center;
    padding: 1rem;
}

#attention_url{
    font-size: 1.4rem;
    font-weight: 400;
    color: #ed0000;
    text-align: center;
    margin: 2rem;
}

.btn-red-3d {
  background: #e44646; /* ベースの赤 */
  border: 2px solid #b23535; /* 外枠でカチッと */
  padding: 12px 26px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  cursor: pointer;

  /* 3Dの肝：ベベル（面取り）＋下の影 */
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.7), /* 上のハイライト */
    inset 0 -2px 3px rgba(0,0,0,0.25),     /* 下のシャドウで厚み */
    0 4px 0 #8f2a2a;                       /* 本体の“厚み分”の影 */
  
  transition: 0.15s ease;
}

.btn-red-3d:active {
  /* 押した時は影が小さくなり、全体が沈む */
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -1px 2px rgba(0,0,0,0.3),
    0 2px 0 #8f2a2a;

  transform: translateY(2px);
}



#attention_footer{
    font-size: 1.4rem;
    font-weight: 400;
    color: #000000;
    text-align: center;
}

#main_inner{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.2rem;
    justify-content: center;
}

#race_table{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.2rem;
    justify-content: center;
    color: #fff;
    align-items: center;
    z-index: 10;
}

#race_table_title{
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

#race_table_date{
    font-size: 1.4rem;
    font-weight: 400;
    color: #fff;
}

#race_table_race{
    font-size: 1.8rem;
    font-weight: 700;
    color: #000;
    text-align: left;
}



#race_table_body{
    font-size: 1rem;
    font-weight: 400;
    background-color: #fff;
    padding: 0.5rem;
    color: #000;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 0.6rem;
}

#race_table_body span{
    font-size: 1.2rem;
    font-weight: 400;
    color: #000;
}   


#yosou_container{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    justify-content: center;
    color: #fff;
    align-items: center;
    font-size: 1.4rem;
}

#yosou_list{
    width: calc(100% - 2rem);
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0rem;
    padding: 1rem;
    /* margin: 1rem; */
    justify-content: center;
    color: #000;
    align-items: center;
    background-color: #FFF;
    border-radius: 2rem;
    border: 10px ridge #FF1A84;
}

.yosou_list_box{
    display: flex;
    flex-direction: column;
    gap: 0rem;
    padding: 0.5rem;
    justify-content: center;
    color: #000;
    align-items: center;
    font-weight: 700;
}

.yosou_list_name{
    
}

.yosou_list_body{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0rem;
}


.yosou_box,
.yosou_betting{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    justify-content: center;
    color: #000;
    background-color: #fff;
    border-radius: 0.6rem;
    align-items: center;
    text-align: center;
}

.yosou_box{
    background-color: #ffffff;
    opacity: 1;
    border: 7px ridge #ECCAFF;
    background-image: repeating-radial-gradient( circle at 0 0, transparent 0, #ffffff 16px ), repeating-linear-gradient( #e8d1ff55, #e8d1ff );
}
.author_name{
    font-size: 1.6rem;
    font-weight: 700;
    color: #000;
    text-align: center;
    /* width: 80%; */
    padding: 2rem;
}

.description{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    
    color: #000;
    background-color: #fff;
    border-radius: 0.6rem;
}

.description_title,
.betting_title{
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    background-color: crimson;
    text-align: center;
    width: 100%;
    padding:1rem;
    border-radius: 3rem;
    background-color: #ed143d;
    background-color: #ff4a6c;
    opacity: 1;
    background-image:  linear-gradient(30deg, #ff035a 12%, transparent 12.5%, transparent 87%, #ff035a 87.5%, #ff035a), linear-gradient(150deg, #ff035a 12%, transparent 12.5%, transparent 87%, #ff035a 87.5%, #ff035a), linear-gradient(30deg, #ff035a 12%, transparent 12.5%, transparent 87%, #ff035a 87.5%, #ff035a), linear-gradient(150deg, #ff035a 12%, transparent 12.5%, transparent 87%, #ff035a 87.5%, #ff035a), linear-gradient(60deg, #ff035a77 25%, transparent 25.5%, transparent 75%, #ff035a77 75%, #ff035a77), linear-gradient(60deg, #ff035a77 25%, transparent 25.5%, transparent 75%, #ff035a77 75%, #ff035a77);
    background-size: 22px 39px;
    background-position: 0 0, 0 0, 11px 19px, 11px 19px, 0 0, 11px 19px;
}

.description_body{
    font-size: 1.6rem;
    font-weight: 400;
    color: #000;
    padding: 0rem 2rem;
    text-align: justify;
    line-height: 2.8rem;
}   

.betting_body{
    font-size: 1.6rem;
    font-weight: 400;
    color: #000;
    /* padding: 0rem 2rem; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}



.betting_box{
    display: flex;
    flex-direction: row;
    gap: 0rem;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    font-weight: 700;
    /* width: 200px; */
    line-height: 1rem;
    padding: 0.5rem 1rem;
}

.betting_box1{
    grid-column: 1;
    grid-row: 1;
}

.betting_box2{
    grid-column: 1;
    grid-row: 2;
}

.betting_box3{
    grid-column: 1;
    grid-row: 3;
}

.betting_box4{
    grid-column: 1;
    grid-row: 4;
}

.betting_box5{
    grid-column: 2;
    grid-row: 1;
}

.betting_box6{
    grid-column: 2;
    grid-row: 2;
}

.betting_box7{
    grid-column: 2;
    grid-row: 3;
}

.betting_box8{
    grid-column: 2;
    grid-row: 4;
}

.list_betting_box1{
    grid-column: 1;
    grid-row: 1;
}

.list_betting_box2{
    grid-column: 1;
    grid-row: 2;
}

.list_betting_box3{
    grid-column: 2;
    grid-row: 1;
}

.list_betting_box4{
    grid-column: 2;
    grid-row: 2;
}

.list_betting_box5{
    grid-column: 3;
    grid-row: 1;
}

.list_betting_box6{
    grid-column: 3;
    grid-row: 2;
}

.list_betting_box7{
    grid-column: 4;
    grid-row: 1;
}

.list_betting_box8{
    grid-column: 4;
    grid-row: 2;
}

.betting_boat{

    border-radius: 5rem;
    text-align: center;
    padding: 0.5rem;
    border: 1px solid #FFF;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}


.list_betting_box{
    display: flex;
    flex-direction: row;
    gap: 0rem;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 700;
    /* width: 200px; */
    line-height: 1rem;
    padding: 0.3rem 0.3rem;
    background-color: #ffffff99;
    border-radius: 5rem;
    margin: 0.1rem;
    box-shadow: 0px 0px 2px #ddd;
}

.list_betting_boat{
    border-radius: 5rem;
    text-align: center;
    padding: 0.5rem;
    border: 1px solid #FFF;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}



.waku{
    color: #fff;
}

.waku_header{
    color: #000;
}


.race_table_box{
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0rem;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 400;
    border: 1px solid black; /* 基本の枠線 */
    width: 100%;
    height: 100%;
}

.grid-item {
    border:1px solid black; /* 基本の枠線 */
    white-space: nowrap;
    text-align: center;
    padding: 0.5rem;
    font-size: 1.2rem;
    font-weight: 400;
    height: 100%;
    width: 100%;
  }
  
  /* 特定の位置のグリッドアイテムの枠線を調整する */
  .grid-item:nth-child(1) { /* 最初のアイテム */
    /*border-bottom: none; /* 下の枠線を削除 */
  }
  .grid-item:nth-child(2) { /* 2番目のアイテム */
    /*border-bottom: none; /* 下の枠線を削除 */
  }
  .grid-item:nth-child(3) { /* 3番目のアイテム */
    /*border-bottom: none; /* 下の枠線を削除 */
  }


#race_navi{
     display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-items: end;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem;
}

.race_navi_item{
    background-color: #f2ff00;
    color: #000;
    text-decoration: none;
    padding: 1.4rem 1rem;
    border-radius: 0.5rem;
    width: 100%;
    text-align: center;
    font-size: 2.3rem;
    font-weight: 900;
}

.race_navi_item span{
    font-size: 1.2rem;

}

.race_table_comment_container{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 95%;
    margin: 0 auto 2rem auto;
}

.comment_item{
     display: flex;
    flex-direction: column;
    gap: 0rem;
    font-size: 1.6rem;
    align-items: flex-start;
}
.comment_waku{
    font-size: 2rem;
    font-weight: 700;
    padding: 0rem 0.8rem;
    border-radius: 0.5rem;
    margin: 0 0.5rem 0 0;
    color: #ffffff;
    border: 1px solid #707070;
}

.comment_item_name{
    font-weight: 700;
}

.comment_item_comment{
    margin-top: 0.4rem;
    line-height: 1.9rem;
    text-align: justify;
}


.boat1{
    background-color: rgb(255, 255, 255);
    color: #000;
    border-color: #000;
}

.boat2{
    background-color: #000000;
}

.boat3{
    background-color: #e40000f3;
}

.boat4{
    background-color: #0095ff;
}

.boat5{
    background-color: #fff100;
    color: #000;
    border-color: #000;
}

.boat6{
    background-color: #01b239;
}



.ZigZag_3D {
    background-color: #ffffff;
opacity: 1;
background-image:  linear-gradient(30deg, #ffeef3 12%, transparent 12.5%, transparent 87%, #ffeef3 87.5%, #ffeef3), linear-gradient(150deg, #ffeef3 12%, transparent 12.5%, transparent 87%, #ffeef3 87.5%, #ffeef3), linear-gradient(30deg, #ffeef3 12%, transparent 12.5%, transparent 87%, #ffeef3 87.5%, #ffeef3), linear-gradient(150deg, #ffeef3 12%, transparent 12.5%, transparent 87%, #ffeef3 87.5%, #ffeef3), linear-gradient(60deg, #ffeef377 25%, transparent 25.5%, transparent 75%, #ffeef377 75%, #ffeef377), linear-gradient(60deg, #ffeef377 25%, transparent 25.5%, transparent 75%, #ffeef377 75%, #ffeef377);
background-size: 32px 56px;
background-position: 0 0, 0 0, 16px 28px, 16px 28px, 0 0, 16px 28px;
  }

  .bg_dia{
    background-image: conic-gradient(from 45deg at 50% 50%, #fff0f6 90deg, transparent 90deg 180deg, #fff0f6 180deg 270deg, transparent 270deg);
background-size: 12px 12px;
background-color: #ffffff;
  }

  .bg_wave{
    background-color: #ffffff;
opacity: 1;
background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #ffffff 16px ), repeating-linear-gradient( #e8d1ff55, #e8d1ff );
  }


  .bg_circle{
    background-color: #ffffff;
opacity: 1;
background-image: radial-gradient(circle at center center, #fdffd8, #ffffff), repeating-radial-gradient(circle at center center, #fdffd8, #fdffd8, 16px, transparent 32px, transparent 16px);
background-blend-mode: multiply;
  }