@charset "UTF-8";

@media screen and (max-width: 950px){
    #hana + .contents_box01 .inner_item_txt {
        text-align: center;
    }
}

#works + .widget_gallery01.add_design2.width_full {
  padding-left: initial;
  padding-right: initial; 
}
#works + .widget_gallery01.add_design2 .wrapper_item {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-bottom: 50px;
}
#works + .widget_gallery01.add_design2.width_full .wrapper_item .inner_item {
  max-width: calc(20% - 5px * 4 / 5);
  width: 100%;
  margin: 0;
}
#works + .widget_gallery01.add_design2 .wrapper_item .inner_item>a:after {
  display: none;
}
#works + .widget_gallery01.add_design2 .wrapper_item .inner_item>a {
  background-color: transparent;
}
#works + .widget_gallery01.add_design2 .wrapper_item .heading .h {
  position: relative;
  z-index: 1;
  color: var(--i_txt_color);
}
#works + .widget_gallery01.add_design2 .wrapper_item .heading .h::before {
  display: block;
  position: absolute;
  content: "";
  background-color: rgba(255, 255, 255, 0.8);
  width: 90%;
  height: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius:initial;
  border: initial;
  z-index: -1;
}
#works + .widget_gallery01.add_design2 .wrapper_item .heading .h::after {
  display: inline-block;
  position: absolute;
  content: "hana classの住宅";
  width: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
  border: 1px solid var(--i_txt_color);
}

@media screen and (max-width: 768px){
    #works + .widget_gallery01.add_design2 .wrapper_item {
        gap: 5rem;
    }
    #works + .widget_gallery01.add_design2.width_full .wrapper_item .inner_item {
        max-width: 100%;
        width: 80%;
        padding-bottom: 60vw;
    }
    #works + .widget_gallery01.add_design2.width_full .wrapper_item .inner_item:nth-child(even) {
        margin-left: auto;
    }
    #works + .widget_gallery01.add_design2 .wrapper_item .inner_item .heading .h {
        opacity: 1;
        position: absolute;
        background-color: rgba(255, 255, 255, 0.8);
        bottom: -1rem;
        left: initial;
        right: -20%;
        width: 70%;
        height: 30%;
        border: 1px solid var(--i_txt_color);
    }
    #works + .widget_gallery01.add_design2 .wrapper_item .inner_item:nth-child(even) .heading .h {
        opacity: 1;
        position: absolute;
        background-color: rgba(255, 255, 255, 0.8);
        bottom: -1rem;
        left: -20%;
        width: 70%;
        height: 30%;
    }
    #works + .widget_gallery01.add_design2 .wrapper_item .heading .h::before {
        display: none;
    }
    #works + .widget_gallery01.add_design2 .wrapper_item .heading .h::after {
        transform: translate(-50%, 0);
    }
}


#concept + .composite_box01.block_images_7 .inner_item:nth-of-type(1):nth-last-of-type(3),
#concept + .composite_box01.block_images_7 .inner_item:nth-of-type(2):nth-last-of-type(2),
#concept + .composite_box01.block_images_7 .inner_item:nth-of-type(3):nth-last-of-type(1) {
  width: 33.3333%;
  margin-left: 0;
}
#concept + .composite_box01.block_images_7 .inner_item_txt {
  background: transparent;
  width: 90%;
  height: 90%;
  min-height: initial;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#concept + .composite_box01.block_images_7 .inner_item a:hover + .inner_item_txt {
  background-color: rgba(255, 255, 255, 0.8);
}
#concept+div .heading.block_header_4 {
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#concept+div .heading.block_header_4 .h {
  opacity: 0;
  transition: 0.3s all;
}
#concept + .composite_box01.block_images_7 .inner_item a:hover + .inner_item_txt .heading.block_header_4 .h {
  opacity: 1;
  transition: 0.3s all;
  color: var(--i_txt_color) !important;
}

@media screen and (max-width: 600px){
    #concept+div .heading.block_header_4 {
        min-height: 150px;
    }
}


#cl2 + .composite_box01.block_images_7 .inner_item:nth-of-type(1):nth-last-of-type(3),
#cl2 + .composite_box01.block_images_7 .inner_item:nth-of-type(2):nth-last-of-type(2),
#cl2 + .composite_box01.block_images_7 .inner_item:nth-of-type(3):nth-last-of-type(1) {
  width: 50%;
  margin-left: 0;
}
#cl2 + .composite_box01.block_images_7 .inner_item_txt {
  background: transparent;
  width: 90%;
  height: 90%;
  min-height: initial;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 2rem));
  min-height: 230px;
  margin: 2rem 0;
}
#cl2 + .composite_box01.block_images_7 .inner_item a:hover + .inner_item_txt {
  background-color: rgba(255, 255, 255, 0.8);
}
#cl2+div .heading.block_header_4 {

}
#cl2+div .heading.block_header_4 .h {
  opacity: 0;
  transition: 0.3s all;
}
#cl2+.composite_box01.block_images_7 .inner_item_txt>* {
  opacity: 0;
  transition: 0.3s all;
}
#cl2 + .composite_box01.block_images_7 .inner_item a:hover + .inner_item_txt .heading.block_header_4 .h {
  opacity: 1;
  transition: 0.3s all;
  color: var(--i_txt_color) !important;
}
#cl2+.composite_box01.block_images_7 .inner_item a:hover + .inner_item_txt>* {
  opacity: 1;
  transition: 0.3s all;
  color: var(--i_txt_color);
}

@media screen and (max-width: 600px){
    #cl2 + .composite_box01.block_images_7 .inner_item_txt {
        min-height: 150px;
    }
}


.heading.block_header_2 .h:before {
    display: none;
}
.heading.block_header_2 .h,
.heading.block_header_2 p  {
    padding-left: 0px;
}
#greeting1+.contents_box01.valign-top .wrapper_item {
    align-items: center;
}