@charset "UTF-8";
h3 {
 padding: 0.5em 0 1em;
 font-size:1.2em;
 text-align: center;
}
h3 span {
 font-weight: normal;
}
.filter_tab_menu {
 display: flex;
 width: 100%;
 justify-content: space-between;
 padding: 1em 4% 0 4%;
 margin-bottom: 1em;
 position: relative;
 background: #e5e5e5;
}
.filter_tab_menu::after {
 content: "";
 width: 100%;
 height: 1px;
 background: #ccc;
 position: absolute;
 left: 0;
 bottom: 0;
 z-index: 1;
}
.filter_tab_menu li {
 background: #fff;
 border: solid #ccc;
 border-width: 1px 1px 0 1px;
 padding: .8em;
 width: calc(50% - 2px);
 text-align: center;
 position: relative;
 cursor: pointer;
}
.filter_tab_menu li span {
 display: inline-block;
 line-height: 2;
 border-bottom: 3px solid #fff;
}
.filter_tab_menu li.active {
 font-weight: bold;
 z-index: 2;
 cursor: default;
 pointer-events: none;
}
.filter_tab_menu li.active span {
 border-bottom: 3px solid var(--orange);
}
.filter_tab_kana_list, .filter_tab_alphabet_list {
 padding: 0 4%;
}
input[type='checkbox'] {
 display: none;
}
input[type='checkbox'] + label {
 padding: 0 0 0 2em;
 position: relative;
 display: block;
 margin: .5em 0 0 0;
}
input[type='checkbox'] + label::before {
 content: "";
 display: inline-block;
 width: 1.4em;
 height: 1.4em;
 position: absolute;
 border: 1px solid #999;
 background: #fff;
 left: 0;
 border-radius: 50%;
}
input[type='checkbox']:checked + label::before {
 border: 1px solid var(--orange);
 background: var(--orange);
}
input[type='checkbox'] + label::after {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
}
input[type='checkbox']:checked + label::after {
 opacity: 1;
}
input[type='checkbox'] + label::after {
 width: 1.4em;
 height: 1.4em;
 background-image: url("/front/images/check.svg");
 background-position: center center;
 background-repeat: no-repeat;
 background-size: 90%;
}
.select_maker {
 padding: 1em 4% 6em 4%;
}
.select_maker p {
 border-bottom: 1px solid #ddd;
 padding: 0 0 0.8em 0;
}
.filter_button {
 display: flex;
 flex-wrap: wrap;
}
.filter_button button {
 width: calc(10% - 4px);
 margin: 2px;
 border: 1px solid #ccc;
 font-size: .9em;
 font-weight: bold;
 line-height: 2.2;
 border-radius: 3px;
}
.filter_button button.active {
 border: 1px solid var(--orange);
 color: var(--orange);
}
.filter_button button:disabled {
 pointer-events: none;
 background: #ddd;
 opacity: 0.3;
}
button.all_maker {
 width: calc(30% - 4px);
}
button.all_maker.active {
 color: var(--orange);
}
.select_maker ul.modal_maker_list {
 padding: .5em 0;
}
.select_maker ul.modal_maker_list li {
 padding: 3px 0;
}
@media (min-width: 520px) {
 .select_maker ul.modal_maker_list {
  display: flex;
  flex-wrap: wrap;
 }
 .select_maker ul.modal_maker_list li {
  width: 50%;
 }
}
@media (min-width: 700px) {
 .filter_button button, button.all_maker {
  width: calc(100%/15 - 4px);
 }
}
@media (min-width: 800px) {
 .select_maker ul.modal_maker_list {
  display: flex;
  flex-wrap: wrap;
 }
 .select_maker ul.modal_maker_list li {
  width: calc(100%/3);
  padding: 3px 0;
 }
}
.maker_header {
 padding: 1em 4% 0;
}
.selection_tab_switch {
 display: flex;
 font-weight: bold;
 padding: 0 12px;
 position: relative;
 z-index: 2;
}
.selection_tab_switch::before {
 content: "";
 width: 100%;
 height: 100%;
 background: #f5f5f5;
 border-radius: 30px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
}
.selection_tab_switch > li {
 padding: 10px 5px;
 text-align: center;
 flex: 1;
 cursor: pointer;
 position: relative;
 font-size:.93em;
}
.selection_tab_switch > li span {
 display: block;
 position: relative;
 z-index: 5;
}

.selection_tab_switch > li.toggle_button {

}
.selection_tab_switch > li::before {
 content: "";
 width: calc(100% + 24px);
 height: 100%;
 background: var(--orange);
 border-radius: 30px;
 position: absolute;
 top: 0;
 left: -12px;
 z-index: 2;
 opacity: 0;
 transition: .3s;
}
.selection_tab_switch > li.show {
 color: #fff;
}
.selection_tab_switch > li.show::before {
 opacity: 1;
}
@media (max-width: 640px) {
 .selection_tab_switch > li {
 font-size: .9em;
}
 .selection_tab_switch > li span.data_list_alphabet {
 transform: scaleX(0.8);
}
}
.filter_buttons > div {
 display: flex;
 flex-wrap: wrap;
 margin-top: 20px;
}
.filter_buttons button {
 margin: 0 5px 5px 0;
 font-size: 1em;
 display: block;
 padding: 0.5em 0.8em;
 cursor: pointer;
 letter-spacing: 0.05em;
 border: 1px solid #eee;
 background: #fff;
 border-radius: 40px;
 min-width: 2.8em;
 text-align: center;
}
.filter_buttons button.active {
 color:#fff;
 border: 1px solid var(--orange);
 background: var(--orange);
}
.filter_buttons button:disabled {
 pointer-events: none;
 color: #ddd;
 background: #f5f5f5;
}
.filter_buttons button::first-letter {
 font-weight: bold;
}
.maker {
 font-size:.95em;
}
.rowbtn {
 width: 100%;
 text-align: center;
 background: rgba(255,255,255,0.75);
 padding: 1.5em;
 position: fixed;
 left:0;
 bottom:0;
}
.rowbtn button {
 color: #fff;
 background: var(--orange);
 padding: 0 1.2em;
 font-size:.93em;
 font-weight: bold;
 line-height: 2.6;
 border-radius: 30px;
}