@charset "UTF-8";
.color-painting-article .entry-meta-sns-wrapper {
  justify-content: end;
}
.color-painting-article .entry-title {
  text-align: center;
  text-align: center;
}
.color-painting-article .entry-title > span:not(:empty), .color-painting-article .entry-title > a:not(:empty) {
  position: relative;
  padding-bottom: 5px;
  display: block;
}
.color-painting-article .entry-title > span:not(:empty):after, .color-painting-article .entry-title > a:not(:empty):after {
  display: inline-block;
  content: "";
  width: 2em;
  height: 3px;
  background-color: #0d508a;
  position: absolute;
  bottom: 0;
  left: calc(50% - 2em / 2);
  right: calc(50% -2em / 2);
}
.color-painting-article .entry-title > span:not(:empty)::after {
  background-color: #ff0000;
}
.color-painting-article .lead {
  border: 1px solid #ff0000;
  padding: 1rem;
  margin-bottom: 2rem;
}
.color-painting-article .lead p {
  margin: 0;
}

.color-painting-search-wrapper {
  text-align: center;
  margin-top: 1rem;
}
.color-painting-search-wrapper form {
  display: flex;
  justify-content: space-around;
}

input[type=text]#search-paintings-id-field, input[type=reset]#search-paintings-id-reset {
  padding: 0.5em 0.5em;
  font-size: 1.2rem;
  line-height: 1.5;
  height: auto;
  border-radius: 0;
  font-weight: bold;
  border: 2px solid #ffa500;
}

#search-paintings-id-field {
  flex: 0 0 calc(100% - 6em);
}

#search-paintings-id-reset {
  flex: 0 0 5em;
  background-color: #ffa500;
  color: #fff;
}

#search-paintings-id-note {
  min-height: 1.6em;
  margin: 1rem 0;
  font-size: 0.9rem;
  color: #ff0000;
}

.color-paintings-list-wrapper .search-note {
  text-align: center;
  padding: 2em 1em;
  border-top: 3px solid #aaa;
  border-bottom: 3px solid #aaa;
}

ul#color-paintings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
ul#color-paintings-list li {
  margin: 0;
  padding: 0;
}
ul#color-paintings-list li a {
  text-decoration: none;
}
ul#color-paintings-list figure {
  position: relative;
  margin: 0;
}
ul#color-paintings-list figure::after {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  background-color: #fff;
  color: #ffa500;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  font-size: 20px;
  transition: all 0.3s ease-in-out;
}
ul#color-paintings-list figure:hover::after, ul#color-paintings-list figure:active::after, ul#color-paintings-list figure:focus::after {
  background-color: #ffa500;
  color: #fff;
}
ul#color-paintings-list figcaption {
  font-weight: bold;
}
ul#color-paintings-list figcaption::before {
  content: "■";
  color: #ffa500;
}
ul#color-paintings-list li figure .hana-mark {
  position: absolute;
  background: transparent;
  right: 5px;
  bottom: 5px;
  width: 120px;
}
@media screen and (min-width: 320px) {
  /* 320px up */
}
@media screen and (min-width: 361px) {
  /* 320px up */
}
@media screen and (min-width: 481px) {
  /* 481px up */
}
@media screen and (min-width: 641px) {
  /* 641px up */
}
@media screen and (min-width: 768px) {
  /* 768px up */
}
@media screen and (min-width: 1030px) {
  /* 1030px up */
}
@media screen and (min-width: 1240px) {
  /* 1240px up */
}
@media screen and (min-width: 1640px) {
  /* 1640px up */
}
@media screen and (max-width: 319px) {
  /* 320px down */
}
@media screen and (max-width: 361px) {
  /* 320px down */
}
@media screen and (max-width: 480px) {
  /* 481px down */
}
@media screen and (max-width: 640px) {
  /* 641px down */
}
@media screen and (max-width: 767px) {
  /* 768px down */
}
@media screen and (max-width: 1029px) {
  /* 1030px down */
}
@media screen and (max-width: 1239px) {
  /* 1240px down */
}
@media screen and (max-width: 1639px) {
  /* 1640px down */
}
/*# sourceMappingURL=color-paintings.css.map */