@charset "utf-8";
/* CSS Document */


.conWp{
  padding-bottom: 0;
}
/* ホバーナビゲーションボタン */

.event_nav{
  z-index: 100000;
    position: fixed;
    width: 88%;
    top: 6.0vw;
    left: 50%;
    transform: translateX(-50%);
    
}

.event .si-pill{
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  width:19.6%;
  display:flex;
  font-weight:700;
  font-size: var(--font20);
  text-align: center;
  letter-spacing:-0.02em;
  color:#fff;
  text-decoration:none;
  line-height:1;
  margin: 0 0;
  position:relative;
  border-radius:20px;
  background:#ffffff;             /* 外枠の白（グラデなし） */
  border:1px solid #ffffff;       /* 枠線も白に */
  padding:13px 0.2em 12px;           /* 余白そのまま */
}
@media screen and (max-width:  767px) {
  .event .si-pill{
     border-radius:50%;
     aspect-ratio: 1 / 1;
     font-size:1.6vw;
  }
  nav.event_nav{
    display:flex;
    top: 16vw;
  }
}

/* 内側の赤いボタン部分（変更なし） */
.event .si-pill::before{
  content:"";
  position:absolute;
  inset:1px;                      /* 外枠との間隔 */
  border-radius:inherit;
  background: linear-gradient(#ff4b52, #d80f18);
  border:1px solid #b5151b;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.4),
    inset 0 1px 4px rgba(0,0,0,.15),
    inset 0 -1px 0 rgba(0,0,0,.08);
  z-index:0;
}

/* テキスト */
.event .si-pill span{
  position:relative;
  z-index:1;
}

/* ホバー時 */
.event .si-pill:hover::before{
  background: linear-gradient(#ff5b61, #c90e15);
}

/* クリック時 */
.event .si-pill:active::before{
  background: linear-gradient(#c90e15, #ff5b61);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.3),
    inset 0 2px 6px rgba(0,0,0,.2);
}

 #point7b{
    height: 130px;
    margin-top: -130px;
  }
@media screen and (max-width:  767px) {
  #point7b{
    height: 6vw;
    margin-top: -6vw;
  }
}

.event{
  margin: 5.0vw 0 0;
}
@media screen and (max-width:  767px) {
  .event{
    margin: 10.0vw 0 0;
  }
}

.sat{
  color: #0068bc;
}
.sun{
  color: #cb2a2a;
}

/******************************
高校生ロボットSIリーグ
******************************/
.si_league{
  position: relative;
  width: 100%;
  height: 58vw;
  padding:0 0 0;
  background: url("../images/event/si_league/back1.jpg") no-repeat center / contain;
  background-repeat: no-repeat;      /* 繰り返しなし */
  /*background-size: 100% 100%;      /* 幅 高さ（px/%, cover/contain可）*/
  background-position: left 0px bottom 0px; /* 右から20px・上から30px */
  background-color: #df2012;
}

.si_league h3{
  position: absolute;
  width: 80%;
  top: 1%;
  transform: translateX(-50%);
}


.si_league .title{
  position: absolute;
  top:6%;
  left: 50%;              /* 画面の中央に左端を合わせる */
  transform: translateX(-50%); /* 要素の幅の半分だけ左に戻して中央に */
}
.si_league .day{
  position: absolute;
  width: 44%;
  top:30%;
  right: 9%;
}
.si_league .place{
  position: absolute;
  width: 44%;
  top:47%;
  right: 9%;
}

.si_league .cop{
  color: #ffffff;
  position: absolute;
  width: 60%;
  top:71%;
  right: 5%;
}
.si_league .cop h4{
  font-weight: 700;
 font-size: 2.2vw;
 line-height: 1.2em;
}
.si_league p{
  font-size: 1.4vw;
  padding: 0 0.1em;
  margin: 0.4em 0 0;
  color: #ffffff;
}



.event_wrap{
  background-color: #c09b00;
  padding: 2%;
}
.event_area{
  background-color: #ffffff;
  border-radius: 25px;
  padding: 2%;
}
@media screen and (max-width:  767px) {
  .event_area{
    border-radius: 3vw;
    padding: 2%;
  }
}

/******************************
競技エリア
******************************/
.event .game_area{
 font-size: var(--font24);
}

.event .game_area .wrap{
  margin: 5% auto 0;
  background-color: #ffffff;
 border-radius: 50px;
 border: 6px solid #df2012;
 padding: 3.5%;
}

.event .game_area h2{
  width: 20vw;
}

.game_area .teams,
.exn_area .teams{
  display: flex;
  justify-content: space-between;
}
.game_area .teams a,
.exn_area .teams a{
  margin: 0 0;
}



@media screen and (max-width:  767px) {
  .event .wrap{
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 5.0vw !important;
    /*padding: 3.5%;*/
  }
}



/* 見出しと本文 */
.about-competition .about-item h3{
  margin: 0 0 0.1em;
  font-weight: 800;       /* 太字（画像の雰囲気に寄せる） */
  font-size: 2.2vw;
  line-height: 1.2;
}

.about-competition .about-item p{
  margin: 0;
  font-size: 1.4vw;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: pre-line;  /* 改行を反映したい場合に便利 */
}

/* スマホ対応：縦並びに */
@media screen and (max-width:  767px) {
    .about-competition {
     padding: 2.0vw 2.0vw;
    }
    .about-competition .about-item h3{
        margin: 0 0 0.1em;    /* 太字（画像の雰囲気に寄せる） */
        font-size: 4.2vw;
        line-height: 1.2;
    }
  .about-inner{ 
    flex-direction: column;
    gap: 24px;
  }
  .event .game_area h2 {
        width: 30.0vw;
    }
  .about-competition .about-item p{
    margin: 0;
    font-size: 2.4vw;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: pre-line;  /* 改行を反映したい場合に便利 */
    }

    .about-competition .about-inner{
        gap: 20px;              /* 2カラム間の余白 */
    }
}






/*************************************
競技ルール
*************************************/

/* 本文エリア */
.judge-body {
  position: relative;
  border-top: 2px solid #d9d9d9;
  border-bottom: 2px solid #d9d9d9;
  border-right: 2px solid #d9d9d9; /* ✅右の縦線追加 */
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.8;
  padding: 0 100px 0 20px; /* 上下0にして余白なし・右にスペース確保 */
  display: flex;
  align-items: center; /* 縦中央そろえ */
}

/* 本文テキスト内余白をリセット */
.judge-body p {
  margin: 0;
}

/* 点数バッジ（本文内右寄せ） */
.judge-score {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(60px, 6vw, 80px);
  height: clamp(60px, 6vw, 80px);
  background: #cf140c;
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.judge-score span {
  font-size: clamp(22px, 3vw, 32px);
}
.judge-score {
  font-size: clamp(12px, 1.4vw, 16px);
}

/* スマホ対応 */
@media (max-width: 720px) {
  .judge-row {
    grid-template-columns: 1fr;
  }
  .judge-label {
    border-radius: 9999px;
  }
  .judge-body {
    padding: 8px 80px 8px 20px;
  }
}


.game_area .figure{
    width: 100%;
    margin: 3% auto 0;
  }
  
.exn_area .figure{
    width: 100%;
    margin: 5% auto 0;
  }
@media (max-width: 720px) {
  .figure{
    width: 106%;
    margin: 3% -3%;
  }
}





/*******************/