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


.schedule_area{
  padding: 1%;
}
.schedule_area .schedule{
  margin: 1% 0 5%;
}
.schedule_area .page-title{
  width: 26vw;
}
@media screen and (max-width:  767px) {
  .schedule_area .page-title{
    width: 46vw;
    margin: 2vw;
  }
}
.schedule_area h2.sat{
  width: 100%;
  font-size: var(--font28);
  font-weight: 700;
  color: #0068bc;
}
.schedule_area h2.sun{
  width: 100%;
  font-size: var(--font28);
  font-weight: 700;
  color: #cb2a2a;
}
.schedule_area h2 span{
  font-size: var(--font28);
  color: #333333;
  font-weight: 400;
}




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


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

 .event .exn_area h2{
    width: 44vw;
  }
@media screen and (max-width:  767px) {
  .event .exn_area h2{
    width: 76vw;
    margin: 2vw;
  }
}
.event .exn_area .section-robot__title{
  width: 13em
}

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




/* ベース */
.about-competition {
  display: flex;
  padding: 20px 4px 0;
  margin: 1.5% 0 0;
}
/* 各ブロック */
.about-competition .about-item{
  flex: 1 1 0;            /* 等分。内容に応じて伸縮 */
  min-width: 280px;       /* つぶれ防止 */
  margin: 0 0 1.0em;
}
.about-competition .about-inner{
width: 42%;
}
.about-competition .img_area{
  width: 58%;
}

/* 見出しと本文 */
.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: var(--font20);
  line-height: 1.4em;
  letter-spacing: 0.02em;
  white-space: pre-line;  /* 改行を反映したい場合に便利 */
}

/* スマホ対応：縦並びに */
@media screen and (max-width:  767px) {
    .about-competition {
      display: block;;
     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: 38vw;
        margin: 2vw;
    }
  .about-competition .about-item p{
    margin: 0;
    font-size: 3.2vw;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: pre-line;  /* 改行を反映したい場合に便利 */
    }
    .about-competition .about-inner{
    width: 100%;
    }
    .about-competition .img_area{
    width: 100%;
    }

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






/*************************************
競技ルール
*************************************/
.section-robot{
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px;
  margin: 4% 0;
}


/* 丸画像（右に固定配置） */
.section-robot__img{
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;              /* 好みで調整 */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}



/* 見出し＋ドット線 */
.section-robot__title{
  display: flex;
  align-items: flex-end;
  gap: 16px;
  font-size: var(--font48);
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 16px;
}

/* 見出し右に伸びるドット線（画像の下に隠れて見える） */
.section-robot__rule{
  flex: 1 1 auto;
  border-bottom: 2px dotted #333;
  transform: translateY(-6px);  /* 線の位置を微調整 */
}

/* リード文 */
.section-robot__lead{
  font-size: var(--font22);
  line-height: 1.6em;
  margin: 0;
}

/* スマホ：画像を下に、テキストの余白を解除 */
@media (max-width: 720px){
  .section-robot{

    margin: 0 auto;
    padding: 3.0vw 3.0vw;
  }

  .section-robot__img{
    position: static;
    transform: none;
    width:70%;             /* 画面幅に合わせる */
    margin: 0 auto;   /* 右寄せ */
    display: block;
  }
  .section-robot__text{
    padding-right: 0;
  }
}









.judge-list h3{
  width: 30%;
  margin: -1% auto 1%;
}
@media (max-width: 720px) {
  .judge-list h3{
    width: 60%;
    margin: -1% auto 1%;
  }
}


/* 左ラベル */
.judge-label {
  background: #8c7a15;
  color: #fff;
  border-radius: 9999px 0 0 9999px;
  font-weight: 800;
 font-size: var(--font26);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  line-height: 1.3;
}

/* 本文エリア */
.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 {
  font-size: var(--font22);
  line-height: 1.6em;
  padding: 0.4em 0;
  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: var(--font32);
}
.judge-score {
  font-size: var(--font32);
}


@media (max-width: 720px) {
  .judge-body p {
    font-size: 4.0vw;
  }
  .judge-ul {
    --badge: 64px;       /* 赤丸の直径 */
    --py: 14px;          /* 上下の余白 */
    --right-gap: 16px;   /* 右端と赤丸の距離 */
    --line-w: 2px;       /* 縦線の太さ */
    --line-color: #d9d9d9;
    --line-gap: 10px;    /* テキストとの間隔 */
  }

  .judge-row {
    grid-template-columns: 1fr;
  }

  .judge-label {
    font-size: 5.0vw;
    line-height: 1.0em;
    border-radius: 9999px 9999px 0 0;
    text-align: center;
    padding: 12px 0;
  }
  @media screen and (max-width:  767px) {
    .judge-label {
      border-radius: 5.0VW 5.0VW 0 0;
    }
  }

  /* ← ::beforeを使わず縦線をborder-leftで実現 */
  .judge-body {
    border-top: none;
    border-radius: 0 0 12px 12px;
    border-left: var(--line-w) solid var(--line-color); /* ← これが縦線 */
    padding: var(--py)
             calc(var(--badge) + var(--right-gap))
             var(--py)
             calc(var(--line-gap) + var(--line-w));
    min-height: calc(var(--badge) + var(--py) * 2);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background: #fff; /* 縦線を際立たせる */
  }

  /* 赤丸 */
  .judge-score {
    position: absolute;
    right: var(--right-gap);
    top: 50%;
    transform: translateY(-50%);
    width: var(--badge);
    height: var(--badge);
  }
}





/* さらに小さい端末で少し縮めたい場合（任意） */
@media (max-width: 420px){
  .judge-ul{ --badge: 56px; --py: 12px; --line-gap: 10px; }
}








/* カード全体（2列） */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.card-container .left,
.card-container .right{
  width: 48.5%;
}
.card-container .day{
  padding: 0 1em;
}
@media screen and (max-width:  767px) {
  .card-container {
    display:block;
  }
  .card-container .left,
  .card-container .right{
    width: 100%;
  }
}
/* カード外枠 */
.card {
  width: 100%;
  font-size: var(--font22);
  font-weight: 700;
  border: 1px solid #000;
  border-radius: 30px;
  padding-bottom: 20px;
  margin-bottom: 3%;
  overflow: visible;
  background: #fff;
}
  @media screen and (max-width:  767px) {
    .card {
      width: 100%;
      font-size: 3.2vw;
      border: 1px solid #000;
    }
  }
/* 見出し */
.card-header {
  background: #a07b00;
  color: #fff;
  font-weight: 700;
  font-size: var(--font28);
  text-align: center;
  padding: 12px 0;
  border-radius: 30px 30px 0 0;
}
  @media screen and (max-width:  767px) {
    .card-header {
      background: #a07b00;
      color: #fff;
      font-weight: 700;
      font-size: 4.0vw;
      text-align: center;
      padding: 1.5vw 0;
      border-radius: 30px 30px 0 0;
  }
}
/* 本文（テキスト左・画像右） */
.card-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 3vw;
  gap: 20px;
  font-weight: 400;
}
/* 左側テキスト */
.card-body p {
  font-size: var(--font22);
  line-height: 1.6em;
  flex: 1;
  margin: 0;
}
  @media screen and (max-width:  767px) {
    .card-body p {
    font-size:3.2vw;
    }
  }

/* 右側画像 */
.card-image {
  position: relative;
  flex: 0 0 40%;      /* ←画像幅を固定。これで高さautoも統一される */
}


.card-image img {
  display: block;
  width: 100%;
  height: auto;         /* ←比率維持で自然に揃う */
  border-radius: 10px;
}

/* 赤丸スコアを右上に重ねる */
.score {
  position: absolute;
  top: -15px;
  right: -15px;
  background: #d60000;
  color: #fff;
  font-weight: 700;
  font-size: var(--font20);
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 2;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .card-container {
        width: 100%;
        margin: 0 auto;
    grid-template-columns: 1fr;
  }
  .card-body {
    flex-direction: column;
  }
  .card-image {
    flex: 0 0 auto;
    width: 100%;
  }
  .score {
    top: 10px;
    right: 10px;
  }
}




/***********************************
スケジュール
************************************/

/* ===== base ===== */
:root{
  --dot:#000;
  --time-bg:#f2f2f2;
  --place-bg:#dff3ff;
}

.page-title{
  font-size: 30px;
  font-weight:900;
  display:inline-block;
  margin:0 0 0px;
}
.page-sub{
  color:#0b5bd7;
  margin:0 0 18px;
  font-size: 24px;
  font-weight:700;
}

/* ===== table (PC既定) ===== */
table.schedule{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.schedule th,
.schedule td{
  padding:14px 16px;
  font-size: var(--font22);
  text-align:left;
}
.schedule thead th{
  font-size:1.4rem;
  font-weight:900;
  padding-top:5px;
  padding-bottom:10px;
}

/* 横のドット罫（行ごと） */
.schedule tbody td{
  border-bottom:2px dotted var(--dot);
}
.schedule thead th{
  border-bottom:2px dotted var(--dot);
}

/* 列の背景と幅 */
.schedule td.timecell{
  width:22%;
  background:var(--time-bg);
  font-variant-numeric: tabular-nums;
}
.schedule td:nth-child(2){
  width:53%;
}
.schedule td.place{
  width:25%;
  background:var(--place-bg);
  text-align:center;
}

/* 時間はPCでは1行表示 */
.schedule td.timecell .t-next{ display:inline; }

/* ====== mobile (<=600px) ====== */
@media (max-width:600px){
  /* 行をカード化（既存のままでもOK） */
  .schedule, .schedule thead, .schedule tbody{ display:block; }
  .schedule thead{ display:none; }
  .schedule tr{
    display:grid;
    grid-template-areas:
      "time"
      "desc"
      "place";
    grid-template-columns: 1fr;   /* ← 1列で全幅 */
    gap:10px;
    padding:14px 12px;
    margin:12px 0;
    border:2px dotted #666;
    border-radius:10px;
    background:#fff;
  }
  .schedule td{ border-bottom:none; }

  /* 時刻：横一杯 */
  .schedule td.timecell{
    grid-area:time;
    display:block;
    width:100%;
    box-sizing:border-box;
    background:#f2f2f2;
    border-radius:10px;
    padding:10px 14px;
    text-align:center;
    font-weight:700;
    white-space:nowrap;          /* 1行表示を維持 */
  }
  .schedule td.timecell .t-next{ display:inline; }
  .schedule td.timecell .t-first::after{ content:""; }

  /* 内容：横一杯 */
  .schedule td:nth-child(2){
    grid-area:desc;
    display:block;
    width:100%;
    box-sizing:border-box;
    background:#fff;
    padding:0 2px;
    line-height:1.6;
    font-size:1rem;
    word-break:normal;
  }

  /* 場所：横一杯 */
  .schedule td.place{
    grid-area:place;
    display:block;               /* ← inline-block → block */
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    margin-top:2px;
    background:#dff3ff;
    border-radius:8px;
    text-align:center;
    white-space:normal;          /* 長い名称は折り返し */
    overflow:visible;
    text-overflow:clip;
  }
}
.exn_area .notes{
  font-size: var(--font22);
}

/***********************************
END スケジュール
************************************/



















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