/*----- 結果発表 （共通部のCSS）-----*/
body#award {
  /* 重なり順は「先に書いたものが上」になります */
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
    url("../images/bg_iStock-934182494.png");
  
  /* 背景を固定し、全体をカバーする設定を追加するとより綺麗に見えます */
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/*============================
  Hero Result
  ============================*/
#hero_result {
  background: url("../images/top_result_2025.jpg") no-repeat center / cover;
  width: 900px;
  height: auto; /* 高さを固定せず中身に合わせる */
  margin: 0 auto;
}
#hero_result .title_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 900px;
  height: 250px;
}
#hero_result h1 {
  font-size: 26px;
  letter-spacing: 0.5em;
  font-weight: bold;
  color: antiquewhite;
  text-align: center;
  background: rgba(255, 125, 0, 0.75);
  padding: 8px 0;
  margin: 0;
}
/*============================*/
/* 結果発表ページ ナビボタン */
/*============================*/
.result-nav-buttons {
  width: 900px;
  margin: 30px auto;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1; /* ボタンを均等幅にする */
  max-width: 250px;
  height: 50px;
  background-color: #6D96AE;
  color: #fff !important;
  text-decoration: none;
  font-weight: 500;
  /*  border-radius: 5px;*/
  transition: all 0.3s ease;
  letter-spacing: 0.1em;
}
.nav-btn:hover {
  background-color: #1AB6E7;
  transform: translateY(2px);
}
/* スマホ表示（768px以下） */
@media screen and (max-width: 768px) {
  .result-nav-buttons {
    width: 90% !important;
    flex-direction: column; /* 縦並び */
    align-items: center;
    gap: 10px;
  }
  .nav-btn {
    width: 100%;
    max-width: none;
  }
}
/*============================*/
/* 受賞作品 */
/*============================*/
#result {
  position: relative;
  width: 800px;
  max-width: 800px;
  margin: 40px auto; /* 中央寄せ。上下に余白を持たせるなら変更する */
  box-sizing: border-box;
}
#result h2 {
  margin: 0 auto 30px auto;
  color: #FF7D00;
  background: linear-gradient(transparent 60%, rgba(255, 125, 0, 0.20) 60%);
  width: 800px;
  position: relative; /* 疑似要素の基準点にする */
  z-index: 1; /* 中のテキストを前面に */
}
#result .silver h2 {
  padding-left: 11px; /* 画像と重なりすぎないよう調整（任意） */
}
#result .green h2 {
  padding-left: 11px; /* 画像と重なりすぎないよう調整（任意） */
}
#result h2::before {
  content: "";
  position: absolute; /* 絶対配置に切り替え */
  top: 50%; /* 上下中央へ */
  left: 0; /* 左端に配置 */
  transform: translateY(-50%); /* 中央揃えの補正 */
  background-size: contain;
  background-repeat: no-repeat;
  width: 100px; /* 重ねたい大きさに調整 */
  height: 94px; /* 重ねたい大きさに調整 */
  z-index: -1; /* テキストの「後ろ」に配置 */
  pointer-events: none; /* 画像がクリックを邪魔しないようにする */
}
#result .gold h2::before {
  background-image: url("../images/gekkeijyu_gold.png");
}
#result .silver h2::before {
  background-image: url("../images/gekkeijyu_silver.png");
}
#result .green h2::before {
  background-image: url("../images/gekkeijyu_green.png");
  opacity: 0.3; /*  後ろで透かせる場合は不透明度を調整 */
}
#result h3 {
  font-size: 18px;
  font-weight: bold;
  color: #6D96AE;
  letter-spacing: 0.1em;
  border-bottom: 3px solid #6D96AE;
}
#result .gold h3 {
  margin-top: 40px;
}
#result .silver h3 {
  margin-top: 40px;
}
#result .green h3 {
  margin-top: 20px;
}
#result .main_box ul li {}
#result .main_box ul li p {
  font-weight: 500;
}
#result .main_box img {
  width: 100%;
  max-width: 800px;
  height: auto;
}
#result .person {
  display: flex;
  /*  align-items: center;*/
  /*  white-space: nowrap;*/
  font-size: 14px;
  font-weight: 100;
  margin-left: 0em;
}
#result .person span.first {
  margin-right: 1.0em;
  width: 5.0em;
  font-weight: bold;
  vertical-align: middle;
  font-size: 18px;
  white-space: nowrap;
}
#result .prize_box {
  margin: 0 auto;
  padding: 0 0 60px 0;
}
#result .prize_box li, #result .prize_box_inner li, #result .prize_box p, #result .prize_box_inner p {
  text-align: left;
}
#result .prize_box .prize_box_inner {
  margin-top: 20px;
}
#result .prize_box .prize_box_inner ul.list li {
  margin-bottom: 10px;
}
#result .prize_box_inner li {
  display: block;
}
#result .prize_box img {
  width: 100%;
  max-width: 800px;
  height: auto;
  border: 1px solid #6D96AE;
  margin: -1px 0 -8px 0;
}
#result .flexContainer {
  display: flex;
  justify-content: flex-end; /* 全体を右側に寄せる */
  width: 100%;
}
#result .prize_box .flexContainer .left {
  width: 55%;
}
#result .prize_box .flexContainer .right {
  width: 5%;
  flex: 1; /* 残りの幅をすべて占有させる */
  padding-left: 15px;
}
/* 奨励賞の3つを横並びにする設定 */
#result .prize_flex_group {
  display: flex;
  justify-content: space-between; /* 均等に配置 */
  gap: 5px; /* 作品間の隙間 */
  margin-top: 20px;
}
/* 横並び時の各作品の幅調整 */
#result .prize_flex_group .prize_box_inner {
  flex: 1; /* 3等分にする */
  margin-top: 0 !important; /* 既存の margin-top 30px を打ち消し */
}
/* 各作品内の「画像と名前」の縦並び調整 */
/* 横幅が狭くなるため、作品内は Flexbox (flexContainer) を解除するか縦積みにするのが綺麗です */
#result .prize_flex_group .flexContainer {
  display: block !important;
}
#result .prize_flex_group .flexContainer .left, .prize_flex_group .flexContainer .right {
  width: 100% !important;
  padding-left: 0 !important;
}
/* 各作品内の「画像と名前」の縦並び調整 */
#result .prize_flex_group .flexContainer {
  display: block !important;
}
#result .prize_flex_group .flexContainer .left {
  width: 100% !important;
}
#result .prize_flex_group .flexContainer .right {
  width: 100% !important;
  padding-left: 0 !important;
  /* ↓ ここに追記：画像と名前の間のパディング */
  padding-top: 10px !important;
}
/* もし「安達さん」と「大竹さん」の間など、複数人の間隔も調整したい場合は以下も追加 */
#result .prize_flex_group .person + .person {
  margin-top: 0px;
}
/* スマホ表示（レスポンシブ）の時は縦に戻す */
@media screen and (max-width: 768px) {
  .prize_flex_group {
    display: block; /* 縦並びに戻す */
  }
}
/*============================
  Slider (Slick)
============================*/
/* スライダーの外枠（位置の基準にする） */
.slider-container {
  position: relative;
  width: 900px; /* #hero_resultと同じ幅にする */
  margin: 0 auto 50px auto; /* 下側に 50px の余白を追加、左右中央寄せにする */
  box-sizing: border-box;
}
/* キャプションのスタイル */
.slider-caption {
  position: absolute;
  right: 10px; /* 右からの距離 */
  bottom: -25px; /* 下からの距離（スライダーのすぐ下、あるいはドットに被らない位置） */
  font-size: 12px;
}
.main-slider {
  width: 100%;
}
/* ドット全体の位置と色を上書き */
.slick-dots {
  bottom: 10px !important; /* スライダー画像との距離を広げる */
}
.slick-dots li button:before {
  color: #1AB6E7 !important; /* 目立つ色（オレンジ等）に変えてテスト */
  opacity: 1 !important; /* 透明度を最大にする */
  font-size: 30px !important; /* サイズを少し大きくする */
}
/* アクティブ（現在表示中）のドットの色 */
.slick-dots li.slick-active button:before {
  color: #fff !important;
}
.slick-prev, .slick-next {
  z-index: 100;
}
.slick-prev {
  left: 20px !important;
}
.slick-next {
  right: 20px !important;
}
.slick-prev:before, .slick-next:before {
  color: #fff !important;
  font-size: 30px !important;
  opacity: 0.7;
}
/* --- スライダー矢印：白丸＆透過風デザイン --- */
.slick-prev, .slick-next {
  top: 50% !important; /* 中央に配置 */
  z-index: 100;
  width: 30px !important;
  height: 30px !important;
  /* 丸を白っぽく（少し透明度を入れるとオシャレです） */
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 50% !important;
  transition: all 0.3s ease;
  border: none !important; /* フチを消してスッキリ */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 軽い影で白背景でも見やすく */
}
/* ホバー時に白を濃くする */
.slick-prev:hover, .slick-next:hover {
  background: rgba(255, 255, 255, 1) !important;
  transform: scale(1.1) translateY(-50%);
}
/* 矢印を「透明（くり抜き風）」に見せる設定 */
.slick-prev:before, .slick-next:before {
  font-family: "メイリオ", sans-serif !important;
  font-size: 20px !important;
  font-weight: bolder !important;
  /* ここがポイント：色を背景（画像）になじませる、または薄くする */
  /* 完全な透過は難しいため、不透明度を極限まで下げるか、
       メインの背景色（#f2f2f2など）を指定します */
  color: rgba(0, 0, 0, 0.3) !important; /* 濃いグレーの透過にすると「透けてる感」が出ます */
  opacity: 1 !important;
  line-height: 30px !important;
}
/* 左矢印 */
.slick-prev:before {
  content: '＜' !important;
  margin-left: -2px;
}
/* 右矢印 */
.slick-next:before {
  content: '＞' !important;
  margin-right: -2px;
}
/*============================*/
/* 審査総評 及び 各審査委員講評　 */
/*============================*/
#feedback {
  /*  background: rgba(255, 125, 0, 0.05);*/
  width: 900px;
  max-width: 100%; /* スマホ対応用 */
  padding: 20px 0; /* 左右のパディングを0にして、中の要素で余白を作る */
  box-sizing: border-box;
}
#feedback h2 {
  margin: 0 auto 30px auto;
  color: #FF7D00;
  background: linear-gradient(transparent 60%, rgba(255, 125, 0, 0.20) 60%);
  width: 800px;
}
#feedback h3 span {
  font-size: 12px;
  font-weight: normal;
}
#feedback p {
  font-size: 0.9rem;
  padding: 0 50px;
}
.feed_box {
  margin: 30px auto 0 auto;
  padding: 0 0 40px 0;
}
.feed_box ul {
  font-size: 0.8rem;
  list-style: none;
}
.feed_box ul li span {
  font-size: 0.8rem;
}
.feed_box .flexContainer {
  display: flex;
  justify-content: flex-end; /* 全体を右側に寄せる */
  width: 800px;
  margin: 0 auto;
}
.feed_box .flexContainer .left {
  width: 45%;
}
.feed_box .flexContainer .right {
  width: 55%;
  flex: 1; /* 残りの幅をすべて占有させる */
  padding-left: 15px;
}
/* 各審査員のレイアウト枠 */
.judge-item {
  display: flex;
  align-items: flex-start;
  width: 800px; /* テキストが読みやすいよう、h2と同じ800px幅にする */
  margin: 0 auto 50px auto; /* 中央寄せ & 審査員ごとの間隔 */
  gap: 30px; /* 写真とテキストの間隔 */
}
/* 写真部分 */
.judge-photo {
  flex: 0 0 120px; /* 写真の横幅を固定 */
}
.judge-photo img {
  width: 100%;
  height: auto;
  /*  border: 1px solid #ccc;*/
  background: #fff;
  display: block;
}
/* テキスト部分 */
.judge-text {
  flex: 1;
}
.judge-text p {
  font-size: 0.9rem;
  line-height: 1.8;
  margin: 0;
  padding: 0 !important; /* 親要素の padding 50px を打ち消し */
  text-align: justify; /* 両端揃えで綺麗に */
}
/* 氏名の右寄せ用スタイル */
.judge-text .name {
  display: block;
  text-align: right;
  font-weight: bold;
  margin-top: 10px;
}
.judge-text .name span {
  font-size: 0.8em;
  font-weight: normal;
  white-space: pre;
}
/* スマホ表示の調整（既存のメディアクエリに合わせる） */
@media screen and (max-width: 768px) {
  #feedback {
    width: 100% !important;
    padding: 20px 10px !important;
  }
  .judge-item {
    width: 100%;
    flex-direction: column; /* 縦並びにする */
    align-items: center;
    gap: 15px;
    margin-bottom: 70px;
  }
  .judge-photo {
    flex: 0 0 auto;
    width: 120px;
  }
  .judge-text p {
    padding: 0 10px !important;
  }
}
@media screen and (max-width: 768px) {
  #hero_result .title_img {
    width: 100%;
    height: 150px;
  }
  /* --- 1. 全体のコンテナにパディングを追加 --- */
  #result {
    width: 100% !important;
    max-width: 100% !important;
    /* 左右に10pxの余白を作る */
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box; /* パディングを含めて100%の幅にする */
  }
  /* --- 2. ヒーローエリア（上部の画像部分）も合わせる場合 --- */
  #hero_result {
    width: 100% !important;
    box-sizing: border-box;
  }
  /* タイトル画像などがはみ出さないように調整 */
  #hero_result .title_img img {
    max-width: 90% !important; /* 少し余裕を持たせる */
    height: auto;
  }
  /* --- 3. その他の要素の微調整 --- */
  #result .flexContainer {
    flex-direction: column;
    width: 100%;
  }
  #result .prize_box .flexContainer .left, #result .prize_box .flexContainer .right {
    width: 100% !important;
    padding-left: 0 !important; /* 横並び時の余白をリセット */
  }
  /* 画像が親のパディング内で100%になるように */
  #result .prize_box img, #result .main_box img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
  }
  /* 1. 画像と1人目の名前の間隔を10pxにする */
  #result .prize_box .flexContainer .right {
    width: 100% !important;
    padding-left: 0 !important;
    padding-top: 20px !important; /* ここで画像との間を10px空ける */
    display: block !important; /* flexを解除して縦に積み上げる */
  }
  /* 2. 受賞者1人行ずつの設定 */
  #result .prize_box_inner .person {
    display: block !important; /* flexを完全に解除 */
    margin-top: 5px !important; /* ここで5pxを指定 */
    margin-bottom: 0 !important;
    line-height: 1.3 !important; /* 行間を詰めて5pxを際立たせる */
  }
  /* 3. 1人目の上の余白は画像との10pxのみにする */
  #result .prize_box_inner .person:first-child {
    margin-top: 0 !important;
  }
  /* 4. span要素のflex解除と余白の徹底排除 */
  #result .prize_box_inner .person span {
    display: inline-block !important; /* 横並びを維持しつつflexを解除 */
    vertical-align: top;
    white-space: normal;
    padding: 0 !important;
    margin: 0 !important;
  }
  #result .prize_box_inner .person span.first {
    font-weight: bold;
    margin-right: 0.5em !important; /* 名前と所属の間の横幅 */
    width: auto !important;
    min-width: 0 !important; /* 固定幅を完全に解除 */
  }
}
@media screen and (max-width: 768px) {
  /* 1. 外側のコンテナの幅制限と余白を解除 */
  .slider-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 50px 0 !important; /* 左右の余白(auto)を0にする */
    padding: 0 !important; /* もしパディングがあれば0に */
  }
  /* 2. スライダー自体の幅を確定させる */
  .main-slider {
    width: 100% !important;
  }
  /* 3. 中の画像が隙間なく広がるようにする */
  .main-slider img {
    width: 100% !important;
    height: auto !important;
    border: none !important; /* フチがある場合は消すとスッキリします */
  }
  /* 4. 矢印の位置が画面外にいくのを防ぐ（内側に配置） */
  .slick-prev {
    left: 10px !important;
  }
  .slick-next {
    right: 10px !important;
  }
}
@media screen and (max-width: 768px) {
  /* 1. 横並びを解除して縦に積み、幅を100%にする */
  .prize_flex_group {
    display: block !important; /* Flexを解除 */
    width: 100% !important;
    padding: 0 !important;
  }
  /* 2. 各作品ボックスの幅を100%にし、作品ごとの間隔を空ける */
  .prize_flex_group .prize_box_inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 40px !important; /* 作品と作品の間の余白 */
  }
  /* 3. 作品タイトル(h3)の調整 */
  .prize_flex_group .prize_box_inner h3 {
    font-size: 18px !important; /* スマホで見やすいサイズに大きくする */
    white-space: normal !important; /* 折り返しを許可 */
  }
  /* 4. 画像と名前のエリア */
  .prize_flex_group .flexContainer {
    display: block !important;
  }
  .prize_flex_group .flexContainer .left, .prize_flex_group .flexContainer .right {
    width: 100% !important;
    padding: 0 !important;
  }
  /* 5. 画像と名前の間のパディング（ここも10pxに統一） */
  .prize_flex_group .flexContainer .right {
    padding-top: 10px !important;
  }
}
@media screen and (max-width: 768px) {
  /* 1. 外側のグレー背景の枠を100%にする */
  #feedback {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 0 !important; /* 上下の余白を調整 */
    box-sizing: border-box;
  }
  /* 2. 「審査総評」の見出しを100%（または少し内側）にする */
  #feedback h2 {
    width: 90% !important; /* 左右に少し余白を持たせると綺麗です */
    margin: 0 auto 20px auto !important;
  }
  /* 3. 本文のテキストの左右パディングを調整 */
  #feedback p {
    padding: 0 5% !important; /* 50pxだとスマホでは広すぎるので%で指定 */
    width: auto !important;
  }
  /* 4. 審査委員のリストが入っているボックス（feed_box） */
  .feed_box .flexContainer {
    width: 100% !important;
    flex-direction: column !important; /* 画像と名前を縦並びにする */
    align-items: center;
  }
  .feed_box .flexContainer .left, .feed_box .flexContainer .right {
    width: 90% !important;
    padding: 0 !important;
  }
  .feed_box .flexContainer .right {
    margin-top: 20px; /* 画像とテキストの間に隙間を作る */
  }
  .feed_box ul li span {
    font-size: 0.5rem;
  }
}