@charset "UTF-8";
/* サブページで、テンプレートで対応しきれないスタイルをこちらに記入します。ASのみ書き込み可能 */
.top-image {
  position: relative;
  background-color:black;
  display:inline-block;

}

.colorfilter-image {
  opacity: 0.7;
  display: block;
}

.top-image > h2{
  position: absolute;
  left:0;
  bottom:1.5%;
  width:100%;
  margin: 1rem auto;
  font-size: 3rem;
  color:#fff;
  padding-left: 2%;
  line-height:3.75rem;
}

.search_howto {
  margin-top:1rem;
  margin-left:1rem;
  line-height:1.8;
}
/*checkbox*/
.group_checkbox,
.subject_checkbox,
.free_search {
  width: 100%;
  margin: 2% 0;
  background: #fff;
  padding: 1%;
  padding-bottom:2.5rem;
  border-bottom:dotted 1px #aaa ;
}

.group_checkbox > h4,
.subject_checkbox > h4,
.free_search > h4 {
  font-weight: bold;
  font-size: 2.0rem;
  color:#262626;
  padding: 0.2rem 0.8rem 0 0.8rem;
  border-left: 7px solid #532020;
}

.group_checkbox > h4,
.subject_checkbox > h4 {
  margin-bottom: 2.5%;
}

.group_checkbox > h5,
.subject_checkbox > h5 {
  font-weight: bold;
  font-size: 1.5rem;
  color:#532020;
  margin-left:0.5rem;
  /*padding: 0rem 0.8rem 0 0.8rem;
  border-left: 3px solid #532020;*/
  margin-bottom:1.0rem;
  margin-top:1.5rem;
}

.group_checkbox label,
.subject_checkbox label {
  cursor: pointer;
  display: inline-block;
  margin-right: 2%;
  margin-bottom: 1%;
  line-height: 16px;
}

.group_checkbox input[type="checkbox"],
.subject_checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  font-size: 1.2em;
  margin: -2px 5px 0 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: middle;
}

.subject_flex,
.group_flex {
  display: flex;
  flex-wrap: wrap;
}

.subject_flex label,
.group_flex label {
  /*width: 18%;*/
  width:17%;
}

@media print, screen and (min-width: 768px) {
.subject_flex,
.group_flex {
  margin-left:2rem;
}
}

/*
.group_flex label:last-child {
  width: 30%;
}
*/
input {
  accent-color: #005B98;
}

.free_search label {
  margin-top:2rem;
}

#word {
  width: 30%;
  height: 2em;
  font-size:1.0rem;
  margin-top:2rem;
}

.button_area {
  width: 100%;
  text-align: center;
}

#search,
#clear {
  background-color: #fff;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 0;
  padding: 1% 2%;
  font-size: 1.2em;
  margin: 2%;
  transition: .2s;
}

#search:hover,
#search:focus {
  background: var(--accentColor);
  color: #fff;
}

#clear:hover,
#clear:focus {
  background: #aaa;
  color: #fff;
}

@media screen and (max-width: 1054px) {
.group_flex label {
  width: 48%;
}

.group_flex label:last-child {
  width: 48%;
}

.subject_flex label {
  width: 31.3%;
}

#word {
  width: 50%;
}

}

@media screen and (max-width: 621px) {
.group_flex label:last-child {
  width: 100%;
}

}

@media screen and (max-width: 546px) {
.subject_flex label {
  width: 48%;
}

#word {
  width: 80%;
}

}

h5 {
  border-bottom: solid 3px #cfd8e5;
  position: relative;
}

h5:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px var(--accentColor);
  bottom: -3px;
  width: 20%;
}