@charset "utf-8";
/*===Setup default===*/

.gar_sub { border: 1px solid #ccc;}
.gar_lbl { position: relative;font-size: 2rem; cursor: pointer;-webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: color, background-color; transition-property: color, background-color; }
.gar_lbl:hover { background: #fffcee; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: color, background-color; transition-property: color, background-color;}
.gar_lbl span { position: absolute;top: 28px;}
.gar_lbl span img{ max-width:24px;}
.gar_lst { display: flex; width: 100%; border-top: 1px solid #ccc; }
.gar_lst_img { width: 33.5%; position: relative;}
.gar_lst_img img{ max-width:300px;}
.gar_lst_att { background: #fff8dc; border: 1px solid #e5dccd; color: #330000; font-weight: bold; position: absolute;}
.gar_lst_cont { align-items: center; display: flex; flex-direction: column; flex-grow: 1; justify-content: center; padding: 0 5px;}
.gar_lst_lbl a { display: inline-block; padding-bottom: 26px; color:#330000; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; }
.gar_lst_lbl a:hover{ color:#80b76f;-webkit-transition-duration: 0.5s; transition-duration: 0.5s; }
.gar_lst_lbl::after { color: #80b76f; content: "\f138"; display: inline-block; font-family: FontAwesome; position: relative; text-decoration: none;}
.gar_btn span{ position: relative; top: 0; transition: all 0.2s ease 0s, top 0.1s ease 0s;display:block;border-radius: 10px; background: #80b76f;color: #fff;text-decoration:none;-webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: color, background-color; transition-property: color, background-color; }
@media only screen and (max-width: 340px) {
	.gar_lst_lbl a { max-width: 112px;}
}
@media only screen and (max-width: 450px) {
	.gar_lst_att { bottom: -11px; font-weight: normal;text-align: center; width: 100%;}
}
@media only screen and (min-width: 451px) {
  .gar_lst_att br {display: none;}
}
@media only screen and (max-width: 767px) {
	.gar_sub {margin-bottom: 10px;}
	.gar_lbl {padding: 10px 10px 8px 10px;font-size: 1.8rem;}
	.gar_lbl span {top: 24%;right: 10px;}
  .gar_lst {padding: 15px 0 15px 10px;}
	.gar_lst_img {min-width:  100px;}
  .gar_lst_att { font-size: 1.2rem;  padding: 2px 7px; }
	.gar_lst_lbl { font-size:1.4rem; padding: 0 10px;}
  .gar_lst_lbl::after {transform: translateY(-50%);}
  .gar_lst_lbl::after { font-size: 17px; left: 10px;}
  .gar_lst_lbl a { padding-bottom: 10px;}
  .gar_lst_lbl a span{ display:block;}
  .gar_btn { padding: 0; width: 100%; max-width:181px;}
  .gar_btn span{ border-radius: 5px; font-size: 1.2rem; padding: 5px 8px;}
}
@media only screen and (min-width: 768px) {
	.gar_sub {margin-bottom: 15px;}
	.gar_lbl {padding: 25px 22px 23px 50px;}
	.gar_lbl span {right: 22px;}
	.gar_lst { padding: 15px 0 15px 50px;}
  .gar_lst_att { padding: 8px 15px;}
  .gar_lst_lbl { font-size:1.8rem;}
  .gar_lst_lbl::after { font-size: 21px; left: 8px;}
  .gar_btn span{ font-size: 1.4rem; padding: 9px 8px; width: 250px;}
}