@charset "utf-8";
body{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;padding:20px;background:#f7f7f7}
.search{background:#fff;padding:15px;margin-bottom:20px;border:1px solid #ddd}
.notice{background:#fffbe8;border:1px solid #e5d58a;padding:12px 15px;margin-bottom:20px}
input,select,button{padding:5px 8px;font-size:16px;margin:4px}
input { width: 300px; }
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.card{background:#fff;border:1px solid #ddd;padding:10px;cursor:pointer}
.card img{width:100%;height:180px;object-fit:cover}
.card p{margin:4px 0}
.more{text-align:center;margin:30px 0;display:none}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9999}
.modal-inner{background:#fff;max-width:900px;max-height:90vh;overflow:auto;margin:3vh auto;padding:50px 25px 25px;position:relative}
.close{position:absolute;right:15px;top:10px;font-size:30px;cursor:pointer}
.modal-nav{display:flex;justify-content:space-between;margin:15px 0}
.modal-nav button{cursor:pointer}
#modalContent #images {display: flex; justify-content: center;}
#modalContent img{max-width:100%;height:auto;}
#modalContent dl{margin:10px 0}
#modalContent dt {font-weight: bold;color: #00A33E;border-bottom: 1px dotted #00A33E;}
#modalContent dd{margin:0 0 10px 0}

.footer-copyright {
  margin-top: 1.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-copyright p {
	margin: 0;
}
.footer-copyright p small {
	font-size: 12px;
}
.footer-copyright div {
    display: flex;
    align-items: center;
}
.footer-copyright .footer-logo {
    width: 200px;
    margin: 0 1em 0 0;
}
.footer-copyright .footer-logo img {
	max-width:  100%;
}
/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
  body {
    padding: 12px;
  }

  h1 {
    font-size: 22px;
    line-height: 1.4;
  }

  .notice {
    font-size: 14px;
    line-height: 1.7;
  }

  .search {
    padding: 12px;
  }

  .search input,
  .search select,
  .search button {
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .card {
    padding: 8px;
  }

  .card img {
    height: 140px;
  }

  .card p {
    font-size: 13px;
    line-height: 1.4;
  }

  .modal-inner {
    width: calc(100% - 24px);
    max-height: 92vh;
    margin: 4vh auto;
    padding: 48px 12px 18px;
    box-sizing: border-box;
  }

  .modal-nav {
    gap: 10px;
  }

  .modal-nav button {
    flex: 1;
  }

  .close {
    right: 12px;
    top: 8px;
  }

  #modalContent #images {
    display: block;
    text-align: center;
  }

  #modalContent dd {
    margin-left: 0;
  }
	.footer-copyright {
		display: block;
	}
	.footer-copyright div {
		display: block;
	}
}