@charset "utf-8";
/* CSS Document */
/*ルールページ固有*/
.sections{
    background-color: black;
}
#section1 {
    clear: both;
    background-color: transparent;
    padding: 1rem;
}
.pages_title img{
    width: 35%;
}
.page_header_sp_pnly{
    display:none;
}
.page_header_pc_only{
    display:block;
}


.sp_only{
    display:none;
}
.pc_only{
    display:block;
}

.pagevisual_area img{
    width: 40%;
    position: absolute;
    top: 4px;
    left: calc( (88/ 300 * 100%));
}

#section1 h2 {
    text-align: center;
}
.rulebox {
    padding: 0px 10px;
    background-color: #c36c89;
    padding-bottom: 10px;
}
.rulebox_fl {
    width: 100%;
    display: flex;
}
.rulebox_fl div{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content:center;
    /*padding: 1rem 0;*/
    font-size: 0.8rem;
    font-weight: bold;
}

.f-item1 {flex-grow:1;} 
.f-item2 {flex-grow:2;} 
.f-item3 {flex-grow:3;} 
.f-item4 {flex-grow:4;}

.r_item1 {
    /*width: 11%;*/
    width: 12.5%;
    display: flex;
    align-items: center
}
.r_item2 {
    width: 25%;
    display: flex;
}
.r_item3 {
    width: 37.5%;
    display: flex;
}
.r_item4 {
    width: 50%;
    display: flex;
}
.r_item5 {
    width: 50%;
    display: flex;
}

.b_left{
    border-top:0px;
    border-right:0px;
    border-left:2px solid white;
    border-bottom:0px;
    border-color:white;
}
.b_left_top{
    border-top:2px solid white;
    border-right:0px;
    border-left:2px solid white;
    border-bottom:0px;
    border-color:white;
}
.b_bottom{
    border-top:0px;
    border-right:0px;
    border-left:0px;
    border-bottom:2px solid white;
    border-color:white;
}
.b_left_bottom{
    border-top:0px;
    border-right:0px;
    border-left:2px solid white;
    border-bottom:2px solid white;
    border-color:white;
}
.b_top_left_bottom{
    border-top:2px solid white;
    border-right:0px;
    border-left:2px solid white;
    border-bottom:2px solid white;
    border-color:white;
}
.rulebox_fl div.r_item3 .t_btm,
.rulebox_fl div.r_item4 .t_btm{
        align-self: end;
}
.rulebox_fl div.r_item3 .t_top{
        align-self: start;
}

.border_gold {
/*
    border-color:gold;
    border-top:3px solid gold;
    border-left:3px solid gold;
    border-right:3px solid #DAAF08;
    border-bottom:3px solid #DAAF08;
*/
    border-color: gold;
    border-top: 4px solid gold;
    border-left: 4px solid gold;
    border-right: 5px solid #DAAF08;
    border-bottom: 5px solid #DAAF08;
}

.gold-line {
  background: linear-gradient(to right, #ffd700, #ffcc00, #ffb700); /* ゴールドのグラデーション */
  height: 3px; /* 線の高さ */
  width: 100%; /* 線の幅 */
}
.bg-image1{
    background-image: linear-gradient(90deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1));
}
.bg-image2{
    background-image: linear-gradient(90deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1));
}
.bg-image_3{
    background-color:#cf57aa;
    /*background-image: linear-gradient(to right, #c471f5 0%, #fa71cd 100%);*/
}
.bg-image_4{
    background-color:#f2738ba1;
    /*background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);*/
}
.bg_c3{
    background-color:#8d0fa3;
}
.bg_c4{
    background-color:#f06292;
}

.r_item5w {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
}
.r_item5w img{
    width:100%;
    display: block;
}
.r_item5w div{
    width:90%;
    margin: 0 auto;
    text-align: center;
    font-size:0.8rem;
    font-weight: bold;
    color:black;
}

.rulebox_fl div.champ {
    flex-wrap: wrap;
    align-items: center;
    justify-content:center;
}
.rulebox_fl div.champ div {
    width: 100%;
}

.rulebox_fl div.champ img{
    margin: 0 auto;
    display: block;
    width: 20%;
}


div.nittei {
  position: relative;
  display: inline-block;
  height: 60px;
  margin-right: 30px;
  padding: 1rem 1rem;
  color: #fff;
  background: #673ab7ba;
  margin-bottom: 1px;
}
div.nittei:after {
  position: absolute;
  display:block;
  top: 0;
  right: -20px;
  height: 48px;
  content: '';
  border-width: 30px 0 30px 20px;
  border-style: solid;
  border-color: transparent transparent transparent #673ab7ba;
}

div.days {
  position: relative;
  display: inline-block;
  padding: 0.5rem;
  background: #ffffff91;
  border-radius:6px;
  width:98%;
  margin:0 auto;
  color: #757d87;
  margin-bottom:1px;
}
div.days span{
    font-size:1.5rem;
}
div.days1 {
    background-color: #f2f2f2;
}
div.days2 {
    background-color: #f2d69d;
}
div.days3 {
    background-color: #f2f29d;
}
div.days4 {
    background-color: #baf29d;
}
div.days5 {
    background-color: #9dd6f2;
}
div.days6 {
    background-color: #f05384;
    /*color:gold;*/
}
div.text-gradient-gold {
	font-size:2em;
	text-align:center;
	line-height:1.2em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(20deg, #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em); 
	-webkit-background-clip: text;
}
div.text-white{
	font-size:2em;
	text-align:center;
	line-height:1.5em;
	font-weight:bold;
	color: white;
	text-shadow: 1px 2px 3px #808080;
}

div.race{
  position: relative;
  display: inline-block;
  padding: 2rem 0;
  width:96%;
  height: auto;
  margin:0 auto;
  color: #757d87;
  margin-bottom:3px;
}
div.r_no1{
  background: #f2f2f2;    
}
div.race span{
    font-size:1.7rem;
    font-style:italic;
}
div.f1{
    font-size:1rem;	
}
div.f12{
    font-size:1.2rem;	
}
div.f15{
    font-size:1.5rem;	
}

@media only screen and (max-device-width: 480px){
    #section1 h2{
        line-height: 1.2rem;
        height: 3rem;
    }
    
    .rulebox_fl div{
        padding: 0;
        font-size: 0.6rem;
        font-weight: bold;
    }    
    div.text-gradient-gold {
    	font-size: 1.8em;
	line-height: 2em;
    }    

/*    
.r_item1 {
    width: 12.5%;
    display: flex;
}    
.r_item2 {
    width: 25%;
    display: flex;
}
.r_item3 {
    width: 34%;
    display: flex;
}
.r_item4 {
    width: 45%;
    display: flex;
}
.r_item5 {
    width: 50%;
    display: flex;
}*/

    div.nittei {
      height: 50px;
      margin-right: 15px;
      padding: 0.5rem 0.5rem;
      color: #fff;
      background: #673ab7ba;
    }
    div.nittei:after {
      position: absolute;
      display:block;
      top: 0;
      right: -10px;
      height: 48px;
      content: '';
      border-width: 25px 0 25px 11px;
      border-style: solid;
      border-color: transparent transparent transparent #673ab7ba;
    }

    div.days {
      padding: 1rem 0.2rem;
      border-radius:4px;
      margin:0 auto;
      color: #757d87;
      margin-bottom:2px;
    }
    div.days span{
        font-size:0.9rem;
    }
    div.race{
      padding: 1rem 0;
    }
    div.race span{
        font-size:1rem;
    }
    
    
    .sp_only{
        display:block;
    }
    .pc_only{
        display:none;
    }    

}