@charset "utf-8";
/*==汎用==*/
.flex01 {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: stretch;
  align-items: stretch;
}
@media screen and (max-width: 767px) {
  .flex01 {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
.flex02 {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: stretch;
  align-items: stretch;
}
.flex03 {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: stretch;
  align-items: stretch;
}
.flex04 {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.flex05 {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.flex_column {
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .flex_column_sp {
    flex-direction: column;
  }
}
.align-start {
  align-items: flex-start;
}
.tag {
  min-width: 150px;
  max-width: 150px;
  width: 100%;
}

.ac-show:not(.nowrap) li {
  margin-right: 1%;
  margin: 5px 40px 5px 0;
  border: 0px solid #000;
  white-space: nowrap;
  flex-basis: unset;
  max-width: 100%;
  width: auto;
  cursor: pointer;
}
.ac-show:not(.nowrap) li label {
  cursor: pointer;
}
.ac-show:not(.nowrap) li input {
  cursor: pointer;
}
.ac-show li a {
  height: 100%;
}
@media screen and (max-width: 767px) {
  .flex03 {
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .ac-show:not(.nowrap) li {
    margin-right: 1%;
    flex-basis: calc(95% * 1 / 2);
  }
  .ac-show li a {
    height: 100%;
  }
}

.btn_area {
  position: relative;
}

/*条件を追加する*/
.btn_add_condition {
  /*background-color: #000;
  color: #fff;*/
  background-color: #eee;
  color: #000;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0px;
  border: 1px dashed #000;
  padding: 10px;
  max-width: 211px;
  height: 47px;
  width: 100%;
  transition: 0.3s all;
  cursor: pointer;
}

.btn_add_condition.open {
  background-color: #eee;
  color: #000;
}

@media screen and (min-width: 961px) {
  .btn_add_condition {
    display: none;
  }
}

.btn_box {
  display: flex;
  padding: 10px 0;
}

.excuse {
  width: 100%;
  max-width: 200px;
}
.excuse a {
  background-color: #fe9933;
  padding: 10px 10px;
  width: 193px;
  height: 36px;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-right: 10px;
}
.reset {
  width: 100%;
  max-width: 200px;
}
.reset a {
  width: 100%;
  height: 36px;
  color: #fff;
  background-color: #bbb;
  padding: 3px 0;
  border: 1px solid #bbb;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.reset_all a:hover {
  color: #000;
  background-color: #fff;
}
.display_count {
  font-size: 1em;
}

/*表示切り分け*/
.gallery-row-swic {
  margin-bottom: 50px;
}

/*絞り込み結果表示*/
.select_word {
  border: 2px solid #eee;
  padding: 25px 10px;
  margin: 10px auto 20px;
  line-height: 1.5;
}

/*検索結果が0の場合*/
.no-results-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.no-results-txt {
  margin-right: 15px;
  line-height: 1.1;
}

.highlight {
  font-weight: bold;
}

/*蛍光ペン的なやつ*/
.underline {
  background: linear-gradient(transparent 70%, #ffe0c2 70%);
}
/*テキスト省略*/

.ellipsis {
  position: relative;
  overflow: hidden;
  line-height: 20px;
  height: 3.8rem;
}

.ellipsis:before,
.ellipsis:after {
  position: absolute;
  background: #fff;
}

.ellipsis:before {
  /* content: "･･･";
  bottom: 0;
  right: 0;
  padding: 0 3px; */
}

.ellipsis:after {
  /* content: "";
  width: 100%;
  height: 100%; */
}
.line_2 {
  height: 10rem;
}
.line_3 {
  height: 8rem;
}
/*==汎用ここまで==*/
/*pagetitle*/
.sec_ttl {
  margin: 60px auto;
}

.gallery {
  max-width: 1240px;
  padding: 0 25px;
  margin: 60px auto 0;
}
@media screen and (max-width: 767px) {
  .gallery {
    max-width: 96%;
    padding: 0 0;
    margin: 50px auto;
  }
  .btn_box {
    display: flex;
    justify-content: center;
    padding: 80px 0 10px;
  }

  .excuse {
    width: 100%;
    max-width: 200px;
  }
  .excuse a {
    background-color: #fe9933;
    padding: 10px 10px;
    width: 98%;
    height: 36px;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-right: 10px;
    margin-right: auto;
    margin-left: 0;
  }
  .reset {
    width: 100%;
    max-width: 200px;
  }
  .reset a {
    width: 98%;
    height: 36px;
    color: #fff;
    background-color: #bbb;
    padding: 3px 0;
    border: 1px solid #bbb;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-right: 0;
    margin-left: auto;
  }
  .reset_all a:hover {
    color: #000;
    background-color: #fff;
  }
  .display_count {
  }
}

/*=========================================
選択部分
========================================*/
.select_area {
  margin: 0 auto 0px;
}
.select_area p {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 20px;
}
.select_list {
  flex-basis: 270px;
}
.cst .select_list {
  width: 100%;
  max-width: 385px;
  margin: 20px 40px 0 auto;
  display: flex;
  justify-content: flex-end;
}
.cst .select_list .flex01 {
  border-bottom: 1px solid #000;
}
.cst .select_list li:first-child {
  margin-right: 20px;
}
.cst .select_list li:first-child p {
  width: 40px;
  font-weight: 500;
}
.cst.gallery-cat-swic {
  margin: auto;
  padding: 10px 0px 10px;
  align-items: center;
}
/* ▼menu調整20200108 */
.cst.gallery-cat-swic.left {
  justify-content: left;
  border-bottom: 1px dashed #000;
}
.cst.gallery-cat-swic.left:last-child {
  border-bottom: 0px dashed #000;
}
.cst.gallery-cat-swic.left .column_flex_item {
  padding: 0 0 0 2%;
}
.cst.gallery-cat-swic.left .column01_02:first-child {
  padding: 0;
}
/* ▲menu調整20200108 */
.column01 {
  margin: 20px auto;
  flex-wrap: wrap;
}
@media all and (-ms-high-contrast: none) {
  .column01_01 {
    width: 100%;
  }
}
@media screen and (min-width: 1101px) and (-ms-high-contrast: none) {
  .column01_01 {
    max-width: 197px;
  }
}
.column01 ul li:first-child {
  flex-basis: 20%;
  margin-right: 20px;
}
.select_all a {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  background-color: #000;
  padding: 3px 0;
  font-weight: normal;
  border: 1px solid #000;
}
.select_all a:hover {
  color: #000;
  background-color: #fff;
}
.cst .select_all {
  width: 18%;
  margin-top: -2px;
}
.cst .select_all a {
  padding: 11px 0;
  font-weight: bold;
}

.reset_all a {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  background-color: #bbb;
  padding: 3px 0;
  font-weight: normal;
  border: 1px solid #bbb;
}
.reset_all a:hover {
  color: #000;
  background-color: #fff;
}
.cst .reset_all {
  width: 100%;
  margin-top: -2px;
  max-width: 200px;
}
.cst .reset_all a {
  padding: 11px 0;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .cst .select_all {
    width: 100%;
    max-width: 520px;
  }
  .cst .select_list {
    max-width: initial;
  }
  .cst .reset_all {
    width: 100%;
    max-width: 520px;
  }
}
.column01 ul li a,
.column01_02 a,
.column01_03 a,
.column01_04 a,
.column01_05 a,
.column01_06 a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.column01 ul li a:hover,
.column01_02 a:hover,
.column01_03 a:hover,
.column01_04 a:hover,
.column01_05 a:hover,
.column01_06 a:hover {
  background-color: transparent;
}

.column01 ul li:nth-child(2) a {
  background: url(../../img/gallery/change_list01_cu.png) no-repeat top center;
}
.column01 ul li:nth-child(3) a {
  background: url(../../img/gallery/change_list02_cu.png) no-repeat top center;
}
.column01 ul li:nth-child(4) a {
  background: url(../../img/gallery/change_list04_cu.png) no-repeat top center;
}
.column01_02 a {
  background: url(../../img/gallery/change_house01_cu.png) no-repeat top center;
}
.column01_03 a {
  background: url(../../img/gallery/change_house02_cu.png) no-repeat top center;
}
.column01_04 a {
  background: url(../../img/gallery/change_type01_cu.png) no-repeat top center;
}
.column01_05 a {
  background: url(../../img/gallery/change_type02_cu.png) no-repeat top center;
}
.column01_06 a {
  background: url(../../img/gallery/change_type03_cu.png) no-repeat top center;
}
.column01 ul li:nth-child(2) a:hover img,
.column01 ul li:nth-child(3) a:hover img,
.column01 ul li:nth-child(4) a:hover img,
.column01_02 a:hover img,
.column01_03 a:hover img,
.column01_04 a:hover img,
.column01_05 a:hover img,
.column01_06 a:hover img {
  visibility: hidden;
}

.column02 {
  margin: 20px 0;
}

.column02 p:before,
.column03 p:before {
  content: "";
  display: inline-block;
  background: url(../../img/gallery/ttl_head.png) no-repeat center top;
  width: 6px;
  height: 35px;
  position: relative;
  top: 4px;
}

.column02 p,
.column03 p {
  color: #005c3f;
  font-size: 22px;
  border-bottom: 1px solid #000;
}
.column02 p span,
.column03 p span {
  position: relative;
  left: 10px;
  top: -5px;
}

.column02 ul,
.column03 ul {
  margin-top: 20px;
  flex-wrap: wrap;
  margin: auto;
  width: 90%;
}

.column02 ul li {
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px solid #000;
  max-width: 257px;
  width: 22.5%;
}
.column02 ul li:nth-child(4n) {
  margin-right: 0;
}
.column02 ul li a,
.column03 ul li a {
  position: relative;
  padding: 10px 30px 10px 10px;
}
.column02 ul li a {
  display: block;
  height: 100%;
  /*width:257px;*/
  /*text-align: center;
  border:1px solid #000;*/
}
.column02 ul li a:hover,
.column03 ul li a:hover {
  /*  background-color: #000;
  color:#fff;*/
  background-color: unset;
  color: #000;
}
.column03 ul li {
  border: 1px solid #000;
  max-width: 200px;
  width: 23%;
  margin-bottom: 20px;
  cursor: pointer;
}
.column03 ul li a {
  display: block;
  /*width:200px;*/
  height: 100%;
  padding: 0px 0px 0px 0px;
  /*text-align: center;
  border:1px solid #000;*/
  cursor: pointer;
}
.column03 ul li a label {
  cursor: pointer;
}

.column02 ul li a span:after,
.column03 ul li a span:after {
  position: absolute;
  top: 28%;
  right: 5px;
  content: "\f13a";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-left: 5px;
}
.column02 ul li a.current,
.column03 ul li a.current {
  margin-left: 0;
}

/*アコーディオンはじめ*/
.ac-wrap01 {
  margin-bottom: 0;
}
span.border_left {
  display: inline-block;
}
.border_left:before {
  content: "";
  display: inline-block;
  background: url(../../img/gallery/ttl_head.png) no-repeat center top;
  width: 6px;
  height: 35px;
  position: relative;
  top: 4px;
  margin-right: 10px;
}
/*ラベル*/
.ac-wrap label {
  color: #005c3f;
  font-size: 22px;
  border-bottom: 1px solid #000;
  display: block;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.5s;
}
/*アイコンを表示*/
.ac-wrap label:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f055";
}
/*チェックは隠す*/
.ac-wrap input {
  display: none;
}
/*中身を非表示にしておく*/
.ac-wrap .ac-show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
/*クリックで中身表示*/
.cssacc:checked + label + .ac-show {
  height: auto;
  padding: 5px;
  opacity: 1;
}
/*アイコンを入れ替える*/
.cssacc:checked + label:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f056";
}
/*アコーディオンおわり*/

@media screen and (min-width: 768px) and (max-width: 1100px) {
  .column01_01 {
    width: 100%;
  }
  .select_list {
    width: 100%;
    max-width: 197px;
    margin: 0 auto 20px 0;
  }
  .column01_02,
  .column01_03,
  .column01_04,
  .column01_05,
  .column01_06 {
    width: 18%;
  }
  .column01_02 a,
  .column01_03 a,
  .column01_04 a,
  .column01_05 a,
  .column01_06 a {
    background-size: contain;
    max-width: 160px;
  }
}
@media screen and (max-width: 767px) {
  .column01_01 {
    width: 100%;
    margin-bottom: 20px;
  }
  .column01_01 ul {
    display: none;
  }
  .column02 ul li,
  .column03 ul li {
    width: 48%;
    max-width: none;
    margin-right: 0;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .column02 ul li a,
  .column03 ul li a {
    width: 100%;
    padding: 5px 30px 5px 5px;
  }
  .column01 {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
  .column01_02,
  .column01_03,
  .column01_04,
  .column01_05,
  .column01_06 {
    width: 33%;
    padding: 0 2%;
    max-width: 160px;
  }
  .column01_04,
  .column01_05,
  .column01_06 {
    margin-top: 10px;
  }
  .column01_02 a,
  .column01_03 a,
  .column01_04 a,
  .column01_05 a,
  .column01_06 a {
    background-size: contain;
  }
  .column01_03 {
    margin-right: 10%;
  }
  .cst.gallery-cat-swic.left .column_flex_item.column01_03 {
    margin-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .ac-wrap label {
    font-size: 1.7rem;
  }
  span.border_left {
    line-height: 1.5;
  }
  .border_left:before {
    background: url(../../img/gallery/ttl_head.png) no-repeat center top -5px;
    height: 23px;
    top: 8px;
  }
  .column02 ul,
  .column03 ul {
    margin-top: 10px;
  }
}
@media screen and (max-width: 480px) {
}

/**5203で追加**/
.add_condition {
  /* display: none; */
  display: block;
  transition: 0.3s all;
}
.add_condition.open {
  display: block;
  transition: 0.3s all;
}

/**8078で追加**/
@media screen and (max-width: 960px) {
  .add_condition {
    display: none;
    transition: 0.3s all;
  }
}

/*FILTER*/
.gallery-filter {
  padding: 20px 30px 40px;
  background-color: #eee;
  border-top: 4px solid #fe9933;
}

/*タグエリア部分をアコーディオンせず三点リーダーで隠す記述 8078で追加*/
/* 複数行ある時1行だけ表示させる */
@media screen and (max-width: 960px) {
  .gallery-filter.close .line_clamp01 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}

/* 480px以下の時は複数行ある内の4行表示させる */
@media screen and (max-width: 480px) {
  .gallery-filter.close .line_clamp01 {
    -webkit-line-clamp: 4;
  }
}

/* 1行だけ表示させていたものを全て表示させる */
.column03 ul li {
  display: inline-block;
}

/**5442で追加**/

@media screen and (max-width: 767px) {
  .list_category_left {
    flex-basis: 130px !important;
    margin-right: 1rem;
  }
  .gallery_list_2rows .list_category {
    margin: 10px auto 30px;
  }

  .list_category_right span {
    font-size: 10px;
  }

  .list_detail ul li:first-child {
    margin-bottom: 10px;
  }
  .list_detail ul li {
    width: 100%;
  }
}