@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");
/* Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
#header,
.header,
hgroup,
menu,
nav,
output,
ruby,
.section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 10px;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
#header,
.header,
hgroup,
menu,
nav,
.section,
.row {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  margin: 0 auto;
  max-width: 100%;
  vertical-align: bottom;
}
a {
  text-decoration: none;
  transition-property: all;
  transition: 0.2s linear;
  color: inherit !important;
  text-decoration: none !important;
}
a:link {
  color: inherit !important;
  text-decoration: none !important;
}
i {
  display: inline-block;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
}

body {
  font-family: "M PLUS 1p", sans-serif !important;
  background-color: #fff;
  color: #262626 !important;
  width: 100%;
  text-align: center;
  font-size: 15px;
  line-height: 1.7em;
  font-weight: 400;
  letter-spacing: 0.1em !important;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 12px;
  }
}

/* .logo-block {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 30px auto;
}

.logo-block img {
	height: 130px;
	margin: 0 20px;
}

@media (max-width:600px){
	
	.logo-block {
		width: 92%;
		margin-bottom: 15px;
	}
	
	.logo-block img {
		height: 75px;
		margin: 0 10px;
	}
	
}

@media (max-width:320px){
	
	.logo-block img {
		height: 70px;
	}
} */

.logo-block {
  width: 100%;
  height: 250px; /* デザインで決め打ち */
  overflow: hidden;
}

.logo-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 600px) {
  .logo-block {
    height: 150px; /* スマホではよりカット */
  }
}

@media (max-width: 320px) {
  .logo-block {
    height: 130px;
  }
}

.date-block {
  width: 100%;
  padding: 10px 20px 0 20px;
  font-size: 1.4em;
  font-weight: 500;
  line-height: 1em;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.date-block span {
  display: block;
  font-family: "Oswald", sans-serif;
  font-size: 1.6em;
  line-height: 1em;
}

@media (max-width: 600px) {
  .date-block {
    margin-bottom: 25px;
  }
}

.title-block {
  width: 100%;
  margin-bottom: 40px;
}

.title-block p {
  padding: 0 20px;
  font-size: 1.2em;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5em;
  margin-bottom: 5px;
}

/*
-----------------------
index タブ
-----------------------
*/

/* =============================================
   タブ全体のレイアウト
============================================= */
.tabs {
  width: 92%;
  max-width: 900px;
  margin: 20px auto 10px auto !important;
}

/* タブボタン（ラベル） */
.tabs .tabs__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  color: #aaa;
  font-size: 1.1em;
  font-weight: 400;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* ラジオボタンは非表示 */
.tabs.tabs--type input[name*="tab_"] {
  display: none;
}

/* タブの幅計算 */
.tabs.tabs--type .tabs__item {
  float: left;
  width: calc(100% / var(--tab-count));
}

.tabs.tabs--type .tabs__item:hover {
  color: #262626;
  border-bottom: 1px solid #aaa;
}

/* 選択されたタブのスタイル */
.tabs.tabs--type input:checked + .tabs__item {
  background-color: #fff;
  color: #262626;
  font-weight: 500;
  border-bottom: 2px solid #262626;
}

/* タブコンテンツの表示制御 */
.tabs.tabs--type .tabs__content {
  display: none;
  clear: both;
  padding: 30px 0;
}

#type-race:checked ~ #type-race__content,
#type-cate1:checked ~ #type-cate1__content,
#type-cate2:checked ~ #type-cate2__content {
  display: block;
}

/* =============================================
   種目リスト・行のデザイン
============================================= */
.tab-list-block {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.tab-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #fff;
  padding: 15px 20px;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  transition: all 0.2s ease;
}

.tab-row:hover {
  transform: scale(1.02, 1.02);
}

/* PDFエリアがある時だけ、種目名を左に寄せてPDFを右に置く */
.tab-row:has(.pdf-area) {
  justify-content: space-between;
}

.tab-row:has(.pdf-area) .race-name-link {
  text-align: left;
  flex: 1;
}

/* 種目名のリンク */
.race-name-link,
.cate1-name-link,
.cate2-name-link {
  color: #262626;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: 500;
  display: block;
  padding-right: 0;
}

/* race-name-linkを全体に広げる疑似要素 */
.race-name-link::after,
.cate1-name-link::after,
.cate2-name-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pdf-area {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 15px;
}

/* =============================================
   PDFボタン共通スタイル
============================================= */
.button_ekiden {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1;
  min-width: 65px;
}

/* アイコン（imgタグ）の設定 */
.button_ekiden img {
  margin-right: 4px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* 塗りつぶし（全体用）：!important または詳細度を上げて白を強制 */
.button_ekiden.button_ekiden-filled {
  background-color: #537481;
  color: #ffffff;
}

/* 文字色を確実にするため内部のspanも指定 */
.button_ekiden-filled span {
  color: #ffffff;
}

/* ★ imgタグ（アイコン）を白く反転させる設定 */
.button_ekiden-filled img {
  filter: brightness(0) invert(1);
}

.button_ekiden.button_ekiden-outline {
  background-color: transparent;
  color: #537481 !important;
  border: 1px solid #537481;
}

.text-muted {
  font-size: 11px;
  color: #ccc;
  min-width: 40px;
  text-align: center;
}

/* =============================================
   不活化ボタン（is-disabled）
============================================= */
.button_ekiden.is-disabled {
  /* グレーで統一 */
  background-color: #d0d0d0;
  color: #999999;
  border: 1px solid #bbbbbb;

  /* 操作無効化 */
  pointer-events: none;
  cursor: not-allowed;

  /* 斜線テクスチャで「使用不可」を視覚的に表現 */
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(0, 0, 0, 0.06) 4px, rgba(0, 0, 0, 0.06) 8px);

  /* アイコンもグレーに */
  filter: grayscale(100%) opacity(0.5);

  /* outlineスタイルの上書き防止 */
  background-color: #d0d0d0 !important;
  color: #999999 !important;
}

/* 内部spanの文字色もグレーに */
.button_ekiden.is-disabled span {
  color: #999999 !important;
}

/* モバイル対応 */
@media (max-width: 600px) {
  .tab-row {
    padding: 12px 10px;
  }
  .race-name-link {
    font-size: 1em;
    padding-right: 18px;
  }
  .pdf-area {
    gap: 10px;
    margin-left: 10px;
  }
  .button_ekiden {
    padding: 5px 8px;
    font-size: 11px;
    min-width: auto;
  }
}

/*
-------------------------
index QRコード・人数一覧ボタン
-------------------------
*/

.qr-block {
  width: 100%;
  max-width: 650px;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  margin-bottom: 50px;
}

.qr-item {
  width: 50%;
  text-align: center;
}

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}

.qrcode_trigger {
  cursor: pointer;
  margin: auto;
}

.bt-trigger {
  width: 250px;
  height: 70px;
  display: inline-block;
  background-color: #7aacbe;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin: auto;
  transition: 0.2s;
}

.bt-trigger:hover {
  color: #ccc;
  background-color: #618997;
  transform: scale(1.05, 1.05);
  box-shadow: 0px 4px 8px 4px rgb(0, 0, 0, 0.2);
}

.qrcode_area {
  /* display: none; */
  background: #fff;
  margin: 25px auto 15px auto;
}

/* .qrcode_area.is_show {
  display: block;
} */

/* .qrcode_close {
  cursor: pointer;
  font-weight: 500;
} */

/* .qrcode_img {
  width: 250px;
} */

@media (max-width: 600px) {
  .qr-item {
    width: 100%;
    margin-bottom: 20px;
  }
}

/*
-------------------------
更新ボタン
-------------------------
*/

.fresh-block {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 300px;
  margin: auto;
  margin-bottom: 50px;
}

.switch {
  width: 48%;
  display: flex;
  justify-content: center;
}

.switch input {
  color: #262626;
  display: inline-block;
  margin: 0 4px;
}
.switch input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #ddd;
  border-radius: 20px;
  line-height: 1.5em;
  height: 40px;
  width: 110px;
}
.switch input[type="checkbox"]:hover {
  background-color: #ccc;
}
.switch input[type="checkbox"]:active {
  background-color: #eee;
}

.switch input[type="checkbox"]:checked {
  background-color: #7aacbe;
  border-color: #7aacbe;
}
.switch input[type="checkbox"]::before {
  background-color: currentColor;
  border-radius: 50%;
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  color: #fff;
  margin-left: 10px;
  margin-top: 9px;
  transition: margin-left 0.2s cubic-bezier(0.07, 0.95, 0, 1);
}
.switch input[type="checkbox"]:checked::before {
  background-color: #ffffff;
  margin-left: 78px;
}

.switch input[type="checkbox"].text {
  position: relative;
}
.switch input[type="checkbox"].text::after {
  content: attr(data-text-off);
  font-size: 0.95em; /* 1.2em → 0.95em に変更 */
  font-weight: 500;
  position: absolute;
  right: 12px;
  top: 9px;
  letter-spacing: 0.1em; /* 追加 */
}

.switch input[type="checkbox"].text:checked::after {
  color: #ffffff;
  content: attr(data-text-on);
  left: 13px;
  right: auto;
}

.fresh {
  width: 48%;
  display: flex;
  justify-content: center;
}

.bt-fresh {
  background-color: #7aacbe;
  height: 40px;
  width: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  transition: 0.2s;
}

.bt-fresh p {
  font-size: 1.05em;
  font-weight: 500;
  display: flex; /* 追加 */
  align-items: center; /* 追加 */
}

.bt-fresh img {
  width: 23px;
  margin-right: 7px;
}

.bt-fresh:hover {
  background-color: #618997;
}

@media (max-width: 600px) {
  .fresh-block {
    max-width: 250px;
    margin-bottom: 30px;
  }

  .switch input[type="checkbox"] {
    border-radius: 20px;
    line-height: 2em;
    height: 35px;
    width: 97px;
  }

  .switch input[type="checkbox"]::before {
    width: 18px;
    height: 18px;
    margin-left: 10px;
    margin-top: 9px;
  }

  .switch input[type="checkbox"]:checked::before {
    margin-left: 70px;
  }

  .switch input[type="checkbox"].text::after {
    font-size: 1.05em; /* 1.2em → 1.15em に変更 */
    right: 12px;
    top: 7px;
  }

  .bt-fresh {
    height: 35px;
    width: 97px;
  }

  .bt-fresh p {
    font-size: 1.1em;
    line-height: 1.5em;
  }

  .bt-fresh img {
    width: 20px;
  }
}

/*
-------------------------
種目切り替えトグル（アコーディオン）
-------------------------
*/

/* 1. 親コンテナ：位置の基準になります */
.category-container {
  width: 80%;
  max-width: 450px;
  margin: 0 auto 40px auto;
  position: relative;
}

/* 2. トグルボタン本体（元のデザインを継承） */
.category-toggle {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10; /* リストより上に表示 */

  width: 100%;
  color: #fff;
  font-size: 1.2em;
  font-weight: 500;
  padding: 13px 60px; /* 矢印の場所を確保するために左右を広げる */
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;

  transition:
    background-color 0.3s,
    transform 0.2s;
}

/* 3. 右端の矢印アイコン */
.arrow-icon {
  position: absolute;
  right: 25px;
  font-size: 0.7em;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4. ドロップダウンリストの外枠 */
.race-dropdown {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 20px;
  position: absolute;
  top: 50%; /* ボタンの高さ半分からスタート */
  left: 2%;
  right: 2%;
  z-index: 5;

  /* スクロール設定 */
  overflow-y: auto;
  max-height: 0; /* 初期状態は閉じる */
  opacity: 0;
  pointer-events: none; /* 閉じている時はクリック不可 */
  transition: all 0.4s ease;

  /* 影をつけて浮き出させる */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* 5. 表示状態（JSで .is-open クラスが付与された時） */
.category-container.is-open .race-dropdown {
  max-height: 420px; /* ここで最大高さを制限（項目が多いとスクロール） */
  opacity: 1;
  padding-top: 45px; /* ボタンと重なる部分の余白 */
  margin-top: -20px;
  pointer-events: auto;
}

.category-container.is-open .arrow-icon {
  transform: rotate(180deg); /* 矢印を上に向ける */
}

/* 6. リスト内の各項目（リンク） */
.race-dropdown li {
  border-bottom: 1px solid #f0f0f0;
}

.race-dropdown li:last-child {
  border-bottom: none;
}

.race-dropdown li a {
  display: block;
  padding: 18px 20px; /* 行間を広く確保 */
  color: #333;
  text-decoration: none;
  font-size: 1em;
  text-align: center;
  line-height: 1.5;
  transition: background-color 0.2s;
}

/* ホバー・選択中の色 */
.race-dropdown li a:hover,
.race-dropdown li a.active {
  background-color: #f9f9f9;
  color: #000;
  font-weight: bold;
}

/* 7. スクロールバーの見た目（Chrome, Safariなど） */
.race-dropdown::-webkit-scrollbar {
  width: 6px;
}
.race-dropdown::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}

/* 8. レスポンシブ調整（スマホ向け） */
@media (max-width: 600px) {
  .category-toggle {
    font-size: 1em;
    padding: 10px 50px;
  }
  .category-container {
    width: 90%;
    margin-bottom: 25px;
  }
  .race-dropdown li a {
    padding: 16px 15px; /* スマホでも押しやすい高さ */
    font-size: 0.95em;
  }
}

/*
-------------------------
race.php(順位一覧部分)
-------------------------
*/

.rank-list {
  width: 94%;
  max-width: 900px;
  margin: auto;
  margin-bottom: 30px;
  border-bottom: solid 1px #ccc;
}

.rank-list td {
  background: #f5f5f5;
}
.rank-list tr:nth-child(odd) td {
  background: #fff;
}

.rank-list td:nth-child(2) {
  text-align: left;
}

/* DNF選手の行をグレーアウト */
.rank-list tr.DNF td {
  background-color: #a6a6a6;
}

/* 長時間戻ってきていない選手の行をうすいグレーアウト */
.rank-list tr.SILENT td {
  background-color: #d5d5dc;
}

.rank-list th {
  font-size: 0.9em;
  font-weight: 500;
  padding: 7px 3px;
  line-height: 1.2em;
  vertical-align: middle;
  border-bottom: solid 1px #ccc;
}

.rank-list th img {
  width: 13px;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  animation-name: slidein;
  animation-direction: normal;
  vertical-align: baseline;
}

.rank-list td {
  vertical-align: middle;
  padding: 9px 3px;
  line-height: 1.6em;
}

.rank-list td.search_result {
  padding: 15px 3px;
  font-weight: 600;
}

.rank-list td.td_race {
  font-size: 0.8em;
}

.rank-list td p {
  font-weight: 500;
  width: auto;
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */
/* 仮追加 */
/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

/* 名前セルの内側レイアウト */
.rank-list td.name {
  position: relative;
}

.name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.name-row > a:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 位置ボタン（右端固定） */
.button_map-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #537481;
  background-color: transparent;
  color: #537481 !important;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.button_map-pin img {
  margin-right: 3px;
  flex-shrink: 0;
  vertical-align: middle;
}

.button_map-pin span {
  color: #537481;
}

.button_map-pin:hover {
  background-color: #537481;
  color: #fff !important;
}

.button_map-pin:hover img {
  filter: brightness(0) invert(1);
}

/* モバイル対応 */
@media (max-width: 600px) {
  .name-row {
    gap: 4px;
  }

  .button_map-pin {
    padding: 3px 6px;
    font-size: 11px;
  }
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */
/* ↑↑↑↑仮追加 */
/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

@media (max-width: 600px) {
  .rank-list td p {
    /* 長い名前に3点リーダー表示 */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    /* 氏名を全表示する場合下記を消す */
    max-width: 150px;
  }
}

.rank-list td a {
  color: #2d85a5 !important;
  font-weight: 500;
}

.rank-list td a:hover {
  color: #064157 !important;
}

@keyframes slidein {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(5px);
  }
  50%,
  100% {
    opacity: 1;
  }
}

.small_time {
  font-size: 70%;
}

@media (max-width: 600px) {
  .rank-list {
    font-size: 0.9em;
    letter-spacing: 0;
  }

  .rank-list th img {
    width: 7px;
  }
}

.abstention td {
  background-color: #ddd !important;
}

.notice ul {
  list-style-type: none;
  font-size: 1em;
  text-align: left;
}
.notice li {
  margin: 3px 0;
  padding-left: 1.2em;
  text-indent: -1em;
  line-height: 1.5em;
}
.notice ul li:before {
  font-size: 0.9em;
  display: inline;
  content: "※";
  margin-right: -0.33em;
}

@media (max-width: 600px) {
  .box-900 {
    margin-bottom: 30px;
  }
}

/* 最下部へのスクロールボタン */
.buttom-scroll {
  position: fixed;
  right: 10%;
  bottom: 7%;
  padding: 6px 8px;
  max-width: 90px;
  width: 100%;
  border-radius: 0.4em;
  background-color: #e6e9ef;
  opacity: 0.85;
  text-align: center;
  z-index: 1000;
}

.buttom-scroll a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #555;
  text-decoration: none;
  font-size: 0.8em;
  font-weight: bold;
}

.buttom-scroll img {
  width: 12px;
  transform: rotate(90deg);
  animation: slidedown 1.5s ease-in-out infinite;
}

/* 上 → 下に見えるアニメーション */
@keyframes slidedown {
  0% {
    transform: rotate(90deg) translateX(-6px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(90deg) translateX(6px);
    opacity: 0;
  }
}

/*
-------------------------
lap.php部分(個人記録部分)
-------------------------
*/

.team-data-block {
  width: 94%;
  background-color: #f7f7f7;
  margin: 0 auto 50px auto;
  box-sizing: border-box;
  border: solid 1px #ddd;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  overflow: hidden;
}

.team-data-name {
  width: 100%;
  color: #fff;
  font-size: 1.5em;
  font-weight: 500;
  padding: 20px 10px 15px 10px;
  border-bottom: solid 1px #ececec;
  /* background: -moz-linear-gradient(top, #444, #262626);
  background: -webkit-linear-gradient(top, #444, #262626);
  background: linear-gradient(to bottom, #444, #262626);
  background-color: #262626; */
}

.team-data-name p {
  font-family: "Oswald", sans-serif;
  font-size: 1.2em;
  margin-bottom: 0.4em;
}

.team-data-category {
  width: 100%;
  background-color: #262626;
  color: #fff;
  font-size: 1.1em;
  font-weight: 500;
  padding: 10px;
}

.team-data {
  margin: 20px auto 25px auto;
}

.team-data td {
  padding: 5px;
}

.team-data td b {
  font-size: 1.2em;
  font-weight: 500;
}

.team-data tr td:nth-child(1) {
  text-align: right;
}

.team-data tr td:nth-child(2) {
  text-align: center;
}

.team-data tr td:nth-child(3) {
  text-align: left;
  font-size: 0.9em;
}

.data-list tr td:nth-child(2) {
  text-align: center !important;
}

.data-list tr p,
.data-list tr dd {
  margin-left: 12px;
  font-weight: 400;
}

/* .data-list tr p img,
.data-list tr dd img {
  width: 10px;
  margin: 0 0 8px 2px;
  vertical-align: middle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  animation-name: up-anime;
  animation-direction: normal;
} */

/* .data-list tr dd img {
  animation-name: down-anime;
} */

/* @keyframes up-anime {
  0% {
    transform: translateY(5px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  50%,
  100% {
    opacity: 1;
  }
}

@keyframes down-anime {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(5px);
  }
  50%,
  100% {
    opacity: 1;
  }
}
 */

@media (max-width: 600px) {
  .data-list tr p,
  .data-list tr dd {
    margin-left: 10px;
  }

  .data-list tr p img,
  .data-list tr dd img {
    width: 8px;
    margin: 0 0 8px 2px;
  }
}

/*グラフの部分*/
.chart-box {
  height: 60vh;
  padding-top: 20px;
  width: 96%;
  max-width: 900px;
  margin: auto;
  margin-bottom: 30px;
}

/*動画部分*/
.video-box {
  padding-top: 30px;
  width: 96%;
  max-width: 900px;
  margin: auto;
  margin-bottom: 30px;
  border-bottom: solid 1px #ccc;
}

.video-title {
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 0 5px 40px;
  color: #262626;
  text-align: center;
}

.video-area {
  max-width: 900px;
  margin: 0 auto;
}

ul.video-detail {
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 50px;
  color: #777777;
  list-style-type: square;
  text-align: left;
  font-size: 0.7rem;
}

/*
-------------------------
search.php(検索ページ)
-------------------------
*/

/* 検索結果ボックスの基本（ヒットあり時：青系） */
.search-status-box {
  padding: 15px 20px;
  margin: 20px auto;
  width: 60%;
  max-width: 900px;
  border-radius: 8px;
  border: 1px solid #bee5eb;
  background-color: #d1ecf1; /* やさしい青 */
  color: #0c5460;
  font-size: 0.95em;
  line-height: 1.6;
}

/* ヒットなし時（赤系へ上書き） */
.search-status-box.no-hit {
  background-color: #f8d7da; /* 薄い赤 */
  border-color: #f5c6cb;
  color: #721c24; /* 濃い赤 */
}

/* 検索文字の表示エリア */
.search-query {
  display: inline-block; /* 背景や余白を有効にするため */
  font-size: 1.2em; /* 文字を大きく（1.2倍程度） */
  font-weight: bold; /* 太字にして強調 */
  margin-bottom: 10px;
  padding: 2px 8px; /* 文字の周りに少しゆとりを */
  background: rgba(255, 255, 255, 0.5); /* 白い半透明の背景で浮かせる */
  border-radius: 4px; /* 角を丸く */
}

/* 検索キーワードそのものをさらに目立たせる場合 */
.search-query::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor; /* 文字と同じ色で下線を引く */
  margin-top: 2px;
  opacity: 0.3;
}

/* 件数表示（検索文字とのバランスを調整） */
#count_output {
  font-size: 1.1em;
  margin-top: 5px;
}

/*
-------------------------
certificate.php(デジタル記録証)
-------------------------
*/
.certificate {
  margin-bottom: 30px;
}

.dl-title {
  position: relative;
  margin: 40px;
  font-size: 1.1em;
  font-weight: 500;
}

.dl-title::before {
  content: "";
  width: 1px;
  height: 15px;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -25px;
  background-color: #262626;
}

.dl-block {
  width: 94%;
  margin: auto;
  display: flex;
  justify-content: center;
}

.dl-block-item {
  width: 30%;
}

.bt-finisher {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.bt-finisher p {
  font-size: 1.1em;
  font-weight: 500;
}

.bt-finisher p img {
  width: 17px;
  margin-right: 5px;
  vertical-align: middle;
}

.share-block {
  width: 94%;
  max-width: 200px;
  margin: 0 auto 35px auto;
  display: flex;
  justify-content: center;
}

.share-block-item {
  width: 28%;
  margin: 0 5%;
  transition: 0.2s;
}

.share-block-item:hover {
  transform: scale(1.1, 1.1);
}

@media (max-width: 600px) {
  .dl-block-item {
    width: 48%;
  }

  .bt-finisher {
    padding: 13px 20px;
  }

  .bt-finisher p img {
    width: 13px;
  }

  .share-block {
    max-width: 170px;
  }
}

/* ADD IMAGE SECTION */
/* デジタル記録証に画像追加 */
.addimage-header {
  margin-bottom: 22px;
}

.addimage-title {
  font-size: 1.05em;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 3px;
  line-height: 1.3;
}

.addimage-sub {
  font-size: 0.82em;
  color: #999;
  margin: 0;
  line-height: 1.4;
}

.addimage-section {
  margin: 0 auto 40px auto;
  max-width: 520px;
  padding: 30px 28px 28px;
  background: #fff;
  border: 1.5px solid #f0d6e0;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(238, 60, 120, 0.07);
}

.addimage-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ee3c78 0%, #f97bb0 100%);
  color: #fff;
  font-size: 1.2em;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(238, 60, 120, 0.25);
}

/* ファイルアップロードエリア */
.file-upload-area {
  display: block;
  position: relative;
  cursor: pointer;
  border: 2px dashed #f0aac8;
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  background: #fdf5f9;
  transition:
    border-color 0.2s,
    background 0.2s;
  margin-bottom: 14px;
}

.file-upload-area:hover {
  border-color: #ee3c78;
  background: #fdeef5;
}

.file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.file-upload-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.file-upload-icon {
  font-size: 2em;
  color: #ee3c78;
  opacity: 0.8;
}

.file-upload-label {
  font-size: 0.95em;
  font-weight: 600;
  color: #ee3c78;
}

.file-name-display {
  font-size: 0.8em;
  color: #bbb;
}

/* 削除ボタン */
.file-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px 0;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  color: #999;
  font-size: 0.88em;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s;
  font-family: inherit;
}

.file-delete-btn:hover {
  border-color: #ee3c78;
  color: #ee3c78;
  background: #fff5f9;
}

.addimage-section {
  margin-top: 36px;
}

@media (max-width: 600px) {
  .addimage-section {
    margin-left: 16px;
    margin-right: 16px;
    padding: 22px 16px 20px;
    border-radius: 14px;
  }
  .file-upload-area {
    padding: 22px 14px;
  }
}

.addimage-error {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px;
  padding: 16px 20px;
  background: #fff5f7;
  border: 1.5px solid #f5c0ce;
  border-radius: 12px;
  color: #c0394b;
}

.addimage-error i {
  font-size: 1.4em;
  flex-shrink: 0;
}

.addimage-error p {
  margin: 0;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.6;
}

.addimage-error p span {
  font-size: 0.85em;
  font-weight: 400;
  color: #999;
}

#loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.loading-dots {
  display: flex;
  gap: 10px;
}

.loading-dots span {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #1f1f1f;
  animation: loading-bounce 1.2s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loading-bounce {
  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.loading-msg {
  font-size: 0.95em;
  font-weight: 600;
  color: #555;
  letter-spacing: 0.05em;
}

/*
-------------------------
人数一覧のリスト
-------------------------
*/

.headcount-list {
  width: 100%;
  margin-bottom: 0;
}

.headcount-list td {
  padding: 10px 7px;
}

.headcount-list td:nth-child(2) {
  text-align: center;
}

.headcount-list tr:last-child td {
  background: #fff;
  border-top: solid 1px #262626;
  border-bottom: solid 1px #fff;
}

/*
-------------------------
共通部分
-------------------------
*/

.box-900 {
  width: 94%;
  max-width: 900px;
  margin: auto;
  margin-bottom: 50px;
}

.box-800 {
  width: 94%;
  max-width: 800px;
  margin: auto;
  margin-bottom: 50px;
}

.box-700 {
  width: 94%;
  max-width: 700px;
  margin: auto;
  margin-bottom: 50px;
}

.box-600 {
  width: 94%;
  max-width: 600px;
  margin: auto;
  margin-bottom: 50px;
}

.maxw-600 {
  max-width: 600px;
}
.maxw-700 {
  max-width: 700px;
}
.maxw-800 {
  max-width: 800px;
}
.maxw-900 {
  max-width: 900px;
}

/*
-------------------------
ボタン
-------------------------
*/

.bt-wrap {
  display: inline-block;
  margin: auto;
}

.bt-common {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 35px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-sizing: border-box;
}

.bt-common p {
  font-size: 1.1em;
  font-weight: 500;
}

.bt-common p img {
  width: 20px;
  margin-right: 10px;
}

.bt-red {
  background-color: #ee3c78;
  color: #fff;
  transition: 0.2s;
}

.bt-red:hover {
  transform: scale(1.03, 1.03);
  overflow: visible;
  box-shadow: 0px 4px 8px 4px rgb(0, 0, 0, 0.2);
}

.auto {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .bt-common {
    height: 70px;
    padding: 0 30px;
  }

  .bt-common p img {
    width: 17px;
  }
}

/*
-------------------------
フッター部分
-------------------------
*/

footer {
  width: 100% !important;
  background: -moz-linear-gradient(top, #fff, #fcfcfc);
  background: -webkit-linear-gradient(top, #fff, #fcfcfc);
  background: linear-gradient(to bottom, #fff, #fcfcfc);
  border-top: 1px solid #ddd;
}

#foot-section {
  padding: 30px;
  box-sizing: border-box;
}

#foot-section img {
  width: 150px;
}

#foot-ad-section {
  /* 中央寄せにする場合 */
  text-align: center;
  margin: 20px 0;
}

#foot-ad-section .ad-banner {
  /* スマホ・PC共通：親要素からはみ出さないようにする */
  display: block;
  max-width: 100%;
  height: auto; /* アスペクト比を維持 */
  margin: 0 auto; /* 中央寄せ */
}

/* PC（画面幅がある程度あるとき）の設定 */
@media screen and (min-width: 768px) {
  #foot-ad-section .ad-banner {
    /* ここでPC表示時の最大幅を指定してください */
    max-width: 600px;
  }
}

#foot-section-btm {
  padding: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  #foot-section {
    padding: 25px 10px 10px 10px;
  }

  #foot-section img {
    width: 110px;
  }
}