/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: 子テーマです
Author: あなたの名前
Author URI: https://example.com
Template: hello-elementor
Version: 1.0.0
*/

@import url("../hello-elementor/style.css");

/* main幅を最大1250px */
@media (min-width: 1200px) {
    .page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header), body:not([class*=elementor-page-]) .site-main {
        max-width: 1250px !important;
    }
}

/* ヘッダー背景色 */
header#site-header {
    background: #1f871f;
    max-width: 100% !important;
    padding: 1em !important;
}
/* ヘッダー文字色 */
.site-title a {
    color: white !important;
}
/* ヘッダー文字の大きさ */
.site-header .site-title {
    font-size: 1.5em !important;
}
/* titleの大きさ */
h1.entry-title {
    font-size: 1.5em;
    padding: 1em 0 .3em;
    margin: 0;
}
/* 表のリンクの色 */
.page-content a {
    color: #333 !important;
}


/* .log-lend/.log-return の背景を強制 */
/* 貸出：水色系 */
table tr.log-lend td,
table tr.log-return td {
  background-color: #a0c8fb !important; 
  color: black;
}
/* 貸出延長中：黄色 */
tr.status-extended td,
table tr.log-return td {
  background-color: #fffb7c !important;
}
/* 返却：緑系 */
tr.status-returned td,
table tr.log-return td {
  background-color: #98fb98 !important;  
}
/* 未返却：赤系・赤文字 */
tr.status-unreturned td {
color: #8b0000 !important;
background-color: #ff6347 !important;
font-weight: bold;
}
tr.status-unreturned td a {
color: #8b0000 !important;
}
/* ヘッダーメニューCSS */
/* メニューを横並びにして、余白を調整 */
.menu-header {
  display: flex;
  gap: 20px; /* メニュー項目の間隔を調整 */
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 各リンクの文字色を白に */
.menu-header a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}
/* ホバー時のスタイル（任意） */
.menu-header a:hover {
    text-decoration: underline;
    opacity: 0.8;
    color: #f0fff4 !important;
}
/* ヘッダー大枠 */
.site-branding {
    flex-direction: row !important;
    width: 100%;
    justify-content: space-between !important;
}

/* 表バンチ名リンク色 */
table a {
    color: #333 !important;
}
/* ▼スマホ表示（幅768px以下）のときに縦並び＆中央寄せに変更 */
@media screen and (max-width: 768px) {
.site-header .site-branding {
    display: block !important;
}
.menu-header {
    padding-top: .5em;
    flex-wrap: wrap;
    gap: .2em 1.5em;
    justify-content: flex-end;
}
.menu-header a {
    font-weight: 500;
    font-size: .9em;
}
/* 表スマホ表示 */
  table{border: unset;}
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
    width: 100%;
  }
  thead tr {
    display: none;
  }
  tr {
    margin-bottom: 1em;
    border: 1px solid #ccc;
    padding: 1em;
    background: #f9f9f9;
  }
  td {
    padding: 0.5em;
    text-align: left;
    position: relative;
	display: flex;
  }
  td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 0.3em;
  }
  tbody td {
    width: auto !important;
  }
}
/* TOPに戻るボタン */
#toTopBtn {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  font-size: 18px;
  background-color: #1f871f;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#toTopBtn.show {
  opacity: 0.7;
  visibility: visible;
}
#toTopBtn:hover {
  opacity: 1;
}
body .is-layout-flex {
    justify-content: center;
}
main#content {
    padding-bottom: 3em;
}
h3 {
    background: linear-gradient(transparent 60%, #91ff8f 60%);
    width: max-content;
    margin: auto;
}