@charset "UTF-8";
@keyframes scroll-animation {
  0% {
    transform: translateY(-8px) scaleX(0); /* 完全に縮んだ状態 */
    opacity: 0;
    transform-origin: left center;
  }
  50% {
    transform: translateY(-8px) scaleX(1); /* 完全に伸びた状態 */
    opacity: 1;
    transform-origin: left center;
  }
  50.00000000001% {
    transform: translateY(-8px) scaleX(1); /* 完全に伸びた状態 */
    opacity: 1;
    transform-origin: right center;
  }
  100% {
    transform: translateY(-8px) scaleX(0); /* 完全に縮んだ状態 */
    opacity: 0;
    transform-origin: right center;
  }
}
/* ----------------------------------------------
　PC設定
------------------------------------------------*/
@media all and (min-width: 769px) {
  #container #contents .topImage {
    position: relative;
  }
  #container #contents .topImage .wrapper {
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  #container #contents .topImage .wrapper h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #container #contents .topImage .wrapper h1 .catch {
    width: var(--s300_650);
  }
  #container #contents .topImage .wrapper h1 .txt {
    font-size: var(--s16_24);
    display: block;
    text-align: center;
    color: #fff;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.75);
  }
  #container #contents .topImage .wrapper .sns_menu {
    display: flex;
    flex-direction: column;
    grid-gap: var(--m27);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  #container #contents .topImage .wrapper .sns_menu .sns_icon {
    width: var(--s24_32);
  }
  #container #contents .topImage .wrapper .sns_menu .sns_icon.blog {
    width: var(--s24_36);
  }
  #container #contents .topImage .wrapper .news_area {
    width: 100%;
    max-width: 840px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 50%;
    bottom: var(--m62);
    transform: translateX(-50%);
  }
  #container #contents .topImage .wrapper .news_area .news_list {
    display: flex;
    align-items: center;
    grid-gap: var(--s8_16);
  }
  #container #contents .topImage .wrapper .news_area .news_list dt {
    color: #fff;
    font-size: var(--s14_16);
  }
  #container #contents .topImage .wrapper .news_area .news_list dd {
    color: #fff;
    font-size: var(--s14_16);
  }
  #container #contents .topImage .wrapper .news_area .news_list dd a {
    color: #fff;
    font-size: var(--s14_16);
  }
  #container #contents .topImage .wrapper .news_area .news_list dd .new {
    font-size: 13px;
    background-color: var(--red01);
    padding: 0.25em 1em;
    color: #fff;
  }
  #container #contents .topImage .wrapper .swiper-pagination {
    top: 65%;
    bottom: unset;
  }
  #container #contents .topImage .bg_slider {
    aspect-ratio: 160/92;
    position: relative;
    z-index: 1;
  }
  #container #contents .topImage .bg_slider .swiper-slide {
    position: relative;
  }
  #container #contents .topImage .bg_slider .swiper-slide::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: var(--black01);
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
  }
  #container #contents .topImage .bg_slider .swiper-slide img {
    transition: 7s 1s ease-out;
  }
  #container #contents .topImage .bg_slider .swiper-slide[class*=-active] img {
    transition-delay: 0s;
    transform: scale(1.05);
  }
  #container #contents .about {
    padding: var(--m214) 0;
    background: url(/images/top/about_bg.png) bottom left/cover no-repeat;
  }
  #container #contents .about .text_area {
    margin-left: auto;
    width: -moz-fit-content;
    width: fit-content;
  }
  #container #contents .about .text_area .title {
    margin-bottom: var(--m75);
  }
  #container #contents .about .text_area .title .br {
    font-size: var(--s18_24);
    line-height: 2;
    font-weight: 600;
    letter-spacing: 4px;
  }
  #container #contents .about .text_area .text .br {
    font-size: var(--s14_18);
    line-height: 1.75;
  }
  #container #contents .about .text_area .text .br.mb {
    margin-bottom: var(--m50);
  }
  #container #contents .flow {
    padding: var(--m40) 0;
    background-color: var(--gray01);
  }
  #container #contents .flow .title {
    margin-bottom: var(--m40);
    font-size: var(--s18_24);
    color: #fff;
    font-weight: 700;
    text-align: center;
    letter-spacing: 3px;
  }
  #container #contents .flow .flow_list {
    display: flex;
  }
  #container #contents .flow .flow_list .flow_box {
    width: 16.672%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    grid-gap: var(--m25);
  }
  #container #contents .flow .flow_list .flow_box .text_area {
    text-align: center;
    width: 100%;
  }
  #container #contents .flow .flow_list .flow_box .text_area .tit {
    margin-bottom: var(--m16);
    padding: 0.4em 0.5em;
    width: 100%;
    border-radius: 8px;
    background-color: var(--gray02);
    font-size: var(--s14_16);
    line-height: 1;
    color: var(--gray01);
    font-weight: 700;
  }
  #container #contents .flow .flow_list .flow_box .text_area .text .br {
    font-size: 14px;
    color: #fff;
  }
  #container #contents .flow .flow_list .flow_box .image_area {
    height: 63px;
  }
  #container #contents .flow .flow_list .flow_box .image_area img {
    width: 67px;
  }
  #container #contents .flow .flow_list .flow_box.tel .image_area img {
    width: 58px;
  }
  #container #contents .flow .flow_list .flow_box.survey .image_area img {
    width: 49px;
  }
  #container #contents .flow .flow_list .flow_box.construction .image_area img {
    width: 54px;
  }
  #container #contents .flow .flow_list .arrow_img {
    margin-top: var(--m16);
    width: 4.16%;
    min-width: 30px;
  }
  #container #contents .strength {
    padding: var(--m320) 0;
  }
  #container #contents .strength .strength_list {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--m100) 3.3333333333%;
  }
  #container #contents .strength .strength_list .strength_box {
    width: 22.5%;
    aspect-ratio: 27/40;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-size: cover;
    background-repeat: no-repeat;
  }
  #container #contents .strength .strength_list .strength_box .num {
    width: 38%;
    max-width: 100px;
    transform: translateY(-50%);
  }
  #container #contents .strength .strength_list .strength_box .text_arae {
    padding: var(--s8_16) var(--s8_24);
    background: rgba(81, 69, 65, 0.5);
    min-height: 270px;
  }
  #container #contents .strength .strength_list .strength_box .text_arae .tit {
    margin-bottom: var(--m24);
  }
  #container #contents .strength .strength_list .strength_box .text_arae .tit .br {
    font-size: var(--s16_18);
    text-align: center;
    color: #fff;
    font-weight: 500;
    line-height: 1.85;
    letter-spacing: 3px;
  }
  #container #contents .strength .strength_list .strength_box .text_arae .text {
    font-size: 14px;
    color: #fff;
  }
  #container #contents .strength .strength_list .strength_box .text_arae .button {
    width: 100%;
  }
  #container #contents .strength .strength_list .strength_box .text_arae:has(.button) .text {
    margin-bottom: var(--m24);
  }
  #container #contents .strength .strength_list .strength_box.box01 {
    background-image: url(/images/top/strength01.jpg);
    background-position: center right 5%;
  }
  #container #contents .strength .strength_list .strength_box.box02 {
    background-image: url(/images/top/strength02.jpg);
    background-position: bottom 60% center;
  }
  #container #contents .strength .strength_list .strength_box.box03 {
    background-image: url(/images/top/strength03.jpg);
    background-position: center left 43%;
    background-size: auto 110%;
  }
  #container #contents .strength .strength_list .strength_box.box04 {
    background-image: url(/images/top/strength04.jpg);
    background-position: center left 45%;
    background-size: auto 110%;
  }
  #container #contents .works {
    position: relative;
    z-index: 1;
  }
  #container #contents .works .text_area {
    padding: var(--m150) 0 var(--m90);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
  #container #contents .works .text_area .title {
    margin-bottom: var(--m27);
    font-size: var(--s28_42);
    color: #fff;
    font-weight: bold;
    text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.75);
    text-align: center;
    line-height: 1;
    letter-spacing: 5px;
  }
  #container #contents .works .text_area .button {
    margin: 0 auto var(--m40);
    min-width: 220px;
  }
  #container #contents .works .text_area .button a .txt {
    letter-spacing: 0.5px;
  }
  #container #contents .works .text_area .swiper-pagination {
    position: static;
  }
  #container #contents .works .works_bg_slider .swiper-slide {
    position: relative;
    aspect-ratio: 1/1;
  }
  #container #contents .works .works_bg_slider .swiper-slide::before {
    content: "";
    display: inline-block;
    width: 105%;
    height: 105%;
    background-color: var(--black01);
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
  }
  #container #contents .other {
    padding-bottom: var(--m390);
    margin-top: var(--m320);
  }
  #container #contents .other .reform_contetns {
    margin-bottom: var(--m200);
  }
  #container #contents .other .reform_contetns .reform_row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    grid-gap: min(3vw, 36px) 3.33333333%;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link {
    width: 22.5%;
    aspect-ratio: 1/1;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link .nolink {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--mainBl);
    background-color: #fff;
    transition: all .5s;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link .nolink .txt {
    width: var(--s100_160);
    margin-bottom: var(--m16);
  }
  #container #contents .other .reform_contetns .reform_row .contents_link .nolink .sub_txt {
    font-size: 13px;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link .nolink:hover {
    background-color: var(--brown01);
  }
  #container #contents .other .reform_contetns .reform_row .contents_link.mincho a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    transition: all 0.5s;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link.mincho a::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: var(--black01);
    opacity: 0.3;
    transition: all 0.5s;
    position: absolute;
    top: 0;
    left: 0;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link.mincho a .br {
    text-align: center;
    font-size: var(--s20_32);
    color: #fff;
    font-weight: bold;
    text-shadow: 3px 3px 4px rgba(86, 86, 86, 0.75);
    z-index: 10;
    letter-spacing: 2px;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link.mincho a .br.big {
    font-size: var(--s24_36);
  }
  #container #contents .other .reform_contetns .reform_row .contents_link.mincho a:hover {
    background-size: 120%;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link.mincho a:hover::before {
    opacity: 0.7;
  }
  #container #contents .other .reform_contetns .reform_row.top_row {
    margin-bottom: min(3vw, 36px);
  }
  #container #contents .other .reform_contetns .reform_row.top_row .full a {
    background-image: url(/images/top/interior01.jpg);
  }
  #container #contents .other .reform_contetns .reform_row.top_row .cont a {
    background-image: url(/images/top/interior02.jpg);
  }
  #container #contents .other .reform_contetns .reform_row.top_row .wet_areas a {
    background-image: url(/images/top/interior03.jpg);
  }
  #container #contents .other .reform_contetns .reform_row.bottom_row .nolink_li {
    order: 4;
  }
  #container #contents .other .reform_contetns .reform_row.bottom_row .roof {
    order: 1;
  }
  #container #contents .other .reform_contetns .reform_row.bottom_row .roof a {
    background-image: url(/images/top/exterior01.jpg);
  }
  #container #contents .other .reform_contetns .reform_row.bottom_row .exterior {
    order: 2;
  }
  #container #contents .other .reform_contetns .reform_row.bottom_row .exterior a {
    background-image: url(/images/top/exterior02.jpg);
  }
  #container #contents .other .reform_contetns .reform_row.bottom_row .electric {
    order: 3;
  }
  #container #contents .other .reform_contetns .reform_row.bottom_row .electric a {
    background-image: url(/images/top/exterior03.jpg);
  }
  #container #contents .other .catalog .wrapper {
    display: flex;
    align-items: center;
  }
  #container #contents .other .catalog .wrapper .text_area {
    width: 62.5%;
  }
  #container #contents .other .catalog .wrapper .text_area .title {
    margin-bottom: var(--m50);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    grid-gap: var(--s8_16);
  }
  #container #contents .other .catalog .wrapper .text_area .title::after {
    content: "";
    display: inline-block;
    flex: auto;
    height: 0.5px;
    background-color: var(--mainBl);
    transform: translateY(-8px);
    animation: scroll-animation 1.5s ease-in-out infinite;
  }
  #container #contents .other .catalog .wrapper .text_area .title .txt {
    font-size: var(--s16_20);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 2px;
  }
  #container #contents .other .catalog .wrapper .text_area .title .txt.big {
    font-size: var(--s24_36);
    font-weight: 600;
  }
  #container #contents .other .catalog .wrapper .text_area .text {
    margin-bottom: var(--m42);
    padding-right: var(--m40);
  }
  #container #contents .other .catalog .wrapper .text_area .text .br {
    font-size: var(--s14_16);
    letter-spacing: 1px;
  }
  #container #contents .other .catalog .wrapper .text_area .button {
    margin-left: auto;
    padding-right: var(--m40);
    width: -moz-fit-content;
    width: fit-content;
  }
  #container #contents .other .catalog .wrapper .text_area .button a {
    grid-gap: var(--s8_16);
  }
  #container #contents .other .catalog .wrapper .text_area .button a .txt {
    font-weight: bold;
  }
  #container #contents .other .catalog .wrapper .text_area .button a .arrow {
    background: url(/images/common/arrow.svg) center/100% no-repeat;
  }
  #container #contents .other .catalog .wrapper .image_area {
    width: 37.5%;
    position: relative;
    z-index: 1;
  }
  #container #contents .other .catalog .wrapper .image_area a:hover .photo img {
    transform: scale(1.15);
  }
  #container #contents .other .catalog .wrapper .image_area a:hover img {
    opacity: 1;
  }
  #container #contents .other .catalog .wrapper .image_area .photo {
    width: 91.5%;
    -webkit-mask-image: url("/images/top/catalog_mask.svg");
            mask-image: url("/images/top/catalog_mask.svg");
    -webkit-mask-size: cover;
            mask-size: cover;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  #container #contents .other .catalog .wrapper .image_area .photo::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: var(--black01);
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  #container #contents .other .catalog .wrapper .image_area .photo img {
    transition: all 0.5s;
    z-index: 1;
  }
  #container #contents .other .catalog .wrapper .image_area figcaption {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #container #contents .other .catalog .wrapper .image_area figcaption .big {
    width: 70%;
    margin-bottom: var(--m16);
  }
  #container #contents .other .catalog .wrapper .image_area figcaption .small {
    font-size: 10px;
    color: #fff;
  }
}
@media all and (min-width: 891px) and (max-width: 1080px) {
  #container #contents .strength .strength_list {
    grid-gap: 1%;
  }
  #container #contents .strength .strength_list .strength_box {
    width: 24.25%;
  }
  #container #contents .strength .strength_list .strength_box .text_arae {
    min-height: unset;
  }
}
@media all and (min-width: 769px) and (max-width: 890px) {
  #container #contents .strength .strength_list .strength_box {
    width: 48%;
    aspect-ratio: unset;
  }
  #container #contents .strength .strength_list .strength_box .text_arae {
    min-height: 200px;
  }
}
/* ----------------------------------------------
　PAD以下設定
------------------------------------------------*/
@media all and (max-width: 768px) {
  #container #contents .topImage {
    position: relative;
  }
  #container #contents .topImage .wrapper {
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
  #container #contents .topImage .wrapper h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #container #contents .topImage .wrapper h1 .catch {
    width: var(--s300_650);
  }
  #container #contents .topImage .wrapper h1 .txt {
    font-size: var(--s16_24);
    display: block;
    text-align: center;
    color: #fff;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.75);
  }
  #container #contents .topImage .wrapper .sns_menu {
    display: flex;
    flex-direction: column;
    grid-gap: var(--m27);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 100;
  }
  #container #contents .topImage .wrapper .sns_menu .sns_icon {
    width: var(--s24_32);
  }
  #container #contents .topImage .wrapper .sns_menu .sns_icon.blog {
    width: var(--s24_36);
  }
  #container #contents .topImage .wrapper .news_area {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    grid-gap: var(--m16);
    position: absolute;
    left: 50%;
    bottom: var(--m62);
    transform: translateX(-50%);
  }
  #container #contents .topImage .wrapper .news_area .news_list {
    width: 100%;
    display: flex;
    align-items: center;
    grid-gap: var(--s8_16);
  }
  #container #contents .topImage .wrapper .news_area .news_list dt {
    color: #fff;
    font-size: var(--s14_16);
  }
  #container #contents .topImage .wrapper .news_area .news_list dd {
    color: #fff;
    font-size: var(--s14_16);
  }
  #container #contents .topImage .wrapper .news_area .news_list dd a {
    color: #fff;
    font-size: var(--s14_16);
  }
  #container #contents .topImage .wrapper .news_area .news_list dd .new {
    font-size: 13px;
    background-color: var(--red01);
    padding: 0.25em 1em;
    color: #fff;
  }
  #container #contents .topImage .wrapper .news_area .button {
    margin-left: auto;
  }
  #container #contents .topImage .wrapper .swiper-pagination {
    top: 65%;
    bottom: unset;
  }
  #container #contents .topImage .bg_slider {
    aspect-ratio: 16/9;
    position: relative;
    z-index: 1;
  }
  #container #contents .topImage .bg_slider .swiper-slide {
    position: relative;
  }
  #container #contents .topImage .bg_slider .swiper-slide::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: var(--black01);
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
  }
  #container #contents .about {
    padding: var(--m214) 0;
    background: url(/images/top/about_bg.png) bottom left/cover no-repeat;
  }
  #container #contents .about .text_area {
    margin-left: auto;
    width: -moz-fit-content;
    width: fit-content;
  }
  #container #contents .about .text_area .title {
    margin-bottom: var(--m75);
  }
  #container #contents .about .text_area .title .br {
    font-size: var(--s18_24);
    line-height: 2;
    font-weight: 600;
    letter-spacing: 4px;
  }
  #container #contents .about .text_area .text .br {
    font-size: var(--s14_18);
    line-height: 1.75;
  }
  #container #contents .about .text_area .text .br.mb {
    margin-bottom: var(--m50);
  }
  #container #contents .flow {
    padding: var(--m40) 0;
    background-color: var(--gray01);
  }
  #container #contents .flow .title {
    margin-bottom: var(--m40);
    font-size: var(--s18_24);
    color: #fff;
    font-weight: 700;
    text-align: center;
    letter-spacing: 3px;
  }
  #container #contents .flow .flow_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: 1.5rem 0;
  }
  #container #contents .flow .flow_list .flow_box {
    width: calc(33.3333333333% - var(--s24_32));
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    grid-gap: var(--m25);
  }
  #container #contents .flow .flow_list .flow_box .text_area {
    text-align: center;
    width: 100%;
  }
  #container #contents .flow .flow_list .flow_box .text_area .tit {
    margin-bottom: var(--m16);
    padding: 0.4em 0.5em;
    width: 100%;
    border-radius: 10px;
    background-color: var(--gray02);
    font-size: var(--s14_16);
    line-height: 1;
    color: var(--gray01);
    font-weight: 700;
  }
  #container #contents .flow .flow_list .flow_box .text_area .text .br {
    font-size: 14px;
    color: #fff;
  }
  #container #contents .flow .flow_list .flow_box .image_area {
    height: 63px;
  }
  #container #contents .flow .flow_list .flow_box .image_area img {
    width: 67px;
  }
  #container #contents .flow .flow_list .flow_box.tel .image_area img {
    width: 58px;
  }
  #container #contents .flow .flow_list .flow_box.survey .image_area img {
    width: 49px;
  }
  #container #contents .flow .flow_list .flow_box.construction .image_area img {
    width: 54px;
  }
  #container #contents .flow .flow_list .arrow_img {
    width: var(--s24_32);
    margin-top: 2rem;
  }
  #container #contents .strength {
    padding: var(--m320) 0;
  }
  #container #contents .strength .strength_list {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--m100) 3.3333333333%;
  }
  #container #contents .strength .strength_list .strength_box {
    width: 48%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-size: cover;
    background-repeat: no-repeat;
  }
  #container #contents .strength .strength_list .strength_box .num {
    width: 38%;
    max-width: 75px;
    transform: translateY(-50%);
  }
  #container #contents .strength .strength_list .strength_box .text_arae {
    padding: var(--s8_16) var(--s8_24);
    background: rgba(81, 69, 65, 0.5);
    min-height: 180px;
  }
  #container #contents .strength .strength_list .strength_box .text_arae .tit {
    margin-bottom: var(--m24);
  }
  #container #contents .strength .strength_list .strength_box .text_arae .tit .br {
    font-size: var(--s16_18);
    text-align: center;
    color: #fff;
    line-height: 1.85;
    font-weight: 500;
    letter-spacing: 3px;
  }
  #container #contents .strength .strength_list .strength_box .text_arae .text {
    font-size: 14px;
    color: #fff;
  }
  #container #contents .strength .strength_list .strength_box .text_arae .button {
    width: 100%;
  }
  #container #contents .strength .strength_list .strength_box .text_arae:has(.button) .text {
    margin-bottom: var(--m24);
  }
  #container #contents .strength .strength_list .strength_box.box01 {
    background-image: url(/images/top/strength01.jpg);
    background-position: center right 5%;
  }
  #container #contents .strength .strength_list .strength_box.box02 {
    background-image: url(/images/top/strength02.jpg);
    background-position: bottom 60% center;
  }
  #container #contents .strength .strength_list .strength_box.box03 {
    background-image: url(/images/top/strength03.jpg);
    background-position: center left 43%;
    background-size: auto 110%;
  }
  #container #contents .strength .strength_list .strength_box.box04 {
    background-image: url(/images/top/strength04.jpg);
    background-position: center left 45%;
    background-size: auto 110%;
  }
  #container #contents .works {
    position: relative;
    z-index: 1;
  }
  #container #contents .works .text_area {
    padding: var(--m150) 0 var(--m90);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
  #container #contents .works .text_area .title {
    margin-bottom: var(--m27);
    font-size: var(--s28_42);
    color: #fff;
    font-weight: bold;
    text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.75);
    text-align: center;
    line-height: 1;
    letter-spacing: 5px;
  }
  #container #contents .works .text_area .button {
    margin: 0 auto var(--m40);
    min-width: 220px;
  }
  #container #contents .works .text_area .button a .txt {
    letter-spacing: 0.5px;
  }
  #container #contents .works .text_area .swiper-pagination {
    position: static;
  }
  #container #contents .works .works_bg_slider .swiper-slide {
    position: relative;
    aspect-ratio: 1/1;
  }
  #container #contents .works .works_bg_slider .swiper-slide::before {
    content: "";
    display: inline-block;
    width: 105%;
    height: 105%;
    background-color: var(--black01);
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
  }
  #container #contents .other {
    padding-bottom: var(--m390);
    margin-top: var(--m320);
  }
  #container #contents .other .reform_contetns {
    margin-bottom: var(--m200);
  }
  #container #contents .other .reform_contetns .reform_row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    grid-gap: min(3vw, 36px) 3.33333333%;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link {
    width: 48.3%;
    aspect-ratio: 1/1;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link .nolink {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--mainBl);
    background-color: #fff;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link .nolink .txt {
    width: var(--s100_160);
    margin-bottom: var(--m16);
  }
  #container #contents .other .reform_contetns .reform_row .contents_link .nolink .sub_txt {
    font-size: 13px;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link.mincho a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    transition: all 0.5s;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link.mincho a::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: var(--black01);
    opacity: 0.3;
    transition: all 0.5s;
    position: absolute;
    top: 0;
    left: 0;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link.mincho a .br {
    text-align: center;
    font-size: var(--s20_32);
    color: #fff;
    font-weight: bold;
    text-shadow: 3px 3px 4px rgba(86, 86, 86, 0.75);
    z-index: 10;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link.mincho a .br.big {
    font-size: var(--s24_36);
  }
  #container #contents .other .reform_contetns .reform_row .contents_link.mincho a:hover {
    background-size: 120%;
  }
  #container #contents .other .reform_contetns .reform_row .contents_link.mincho a:hover::before {
    opacity: 0.7;
  }
  #container #contents .other .reform_contetns .reform_row.top_row {
    margin-bottom: min(3vw, 36px);
  }
  #container #contents .other .reform_contetns .reform_row.top_row .full a {
    background-image: url(/images/top/interior01.jpg);
  }
  #container #contents .other .reform_contetns .reform_row.top_row .cont a {
    background-image: url(/images/top/interior02.jpg);
  }
  #container #contents .other .reform_contetns .reform_row.top_row .wet_areas a {
    background-image: url(/images/top/interior03.jpg);
  }
  #container #contents .other .reform_contetns .reform_row.bottom_row .roof a {
    background-image: url(/images/top/exterior01.jpg);
  }
  #container #contents .other .reform_contetns .reform_row.bottom_row .exterior a {
    background-image: url(/images/top/exterior02.jpg);
  }
  #container #contents .other .reform_contetns .reform_row.bottom_row .electric a {
    background-image: url(/images/top/exterior03.jpg);
  }
  #container #contents .other .catalog .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: var(--m50);
  }
  #container #contents .other .catalog .wrapper .text_area {
    width: 100%;
  }
  #container #contents .other .catalog .wrapper .text_area .title {
    margin-bottom: var(--m50);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    grid-gap: var(--s8_16);
  }
  #container #contents .other .catalog .wrapper .text_area .title::after {
    content: "";
    display: inline-block;
    flex: auto;
    height: 0.5px;
    background-color: var(--mainBl);
    transform: translateY(-8px);
    animation: scroll-animation 1.5s ease-in-out infinite;
  }
  #container #contents .other .catalog .wrapper .text_area .title .txt {
    font-size: var(--s16_20);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 2px;
  }
  #container #contents .other .catalog .wrapper .text_area .title .txt.big {
    font-size: var(--s24_36);
    font-weight: 600;
  }
  #container #contents .other .catalog .wrapper .text_area .text {
    margin-bottom: var(--m42);
    padding-right: var(--m40);
  }
  #container #contents .other .catalog .wrapper .text_area .text .br {
    font-size: var(--s14_16);
    letter-spacing: 1px;
  }
  #container #contents .other .catalog .wrapper .text_area .button {
    margin-left: auto;
    padding-right: var(--m40);
    width: -moz-fit-content;
    width: fit-content;
  }
  #container #contents .other .catalog .wrapper .text_area .button a {
    grid-gap: var(--s8_16);
  }
  #container #contents .other .catalog .wrapper .text_area .button a .txt {
    font-weight: bold;
  }
  #container #contents .other .catalog .wrapper .text_area .button a .arrow {
    background: url(/images/common/arrow.svg) center/100% no-repeat;
  }
  #container #contents .other .catalog .wrapper .image_area {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  #container #contents .other .catalog .wrapper .image_area a:hover .photo img {
    transform: scale(1.15);
  }
  #container #contents .other .catalog .wrapper .image_area a:hover img {
    opacity: 1;
  }
  #container #contents .other .catalog .wrapper .image_area .photo {
    width: 91.5%;
    -webkit-mask-image: url("/images/top/catalog_mask.svg");
            mask-image: url("/images/top/catalog_mask.svg");
    -webkit-mask-size: cover;
            mask-size: cover;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  #container #contents .other .catalog .wrapper .image_area .photo::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: var(--black01);
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  #container #contents .other .catalog .wrapper .image_area .photo img {
    transition: all 0.5s;
    z-index: 1;
  }
  #container #contents .other .catalog .wrapper .image_area figcaption {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #container #contents .other .catalog .wrapper .image_area figcaption .big {
    width: 70%;
    margin-bottom: var(--m16);
  }
  #container #contents .other .catalog .wrapper .image_area figcaption .small {
    font-size: 10px;
    color: #fff;
  }
}
/* ----------------------------------------------
　SP調整
------------------------------------------------*/
@media all and (max-width: 520px) {
  #container #contents .topImage .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #container #contents .topImage .wrapper .sns_menu {
    right: -2%;
  }
  #container #contents .topImage .wrapper .news_area .news_list {
    flex-wrap: wrap;
  }
  #container #contents .topImage .wrapper .news_area .news_list dt {
    width: 100%;
  }
  #container #contents .topImage .wrapper .news_area .news_list dd {
    width: 100%;
  }
  #container #contents .topImage .wrapper .news_area .button {
    margin-left: auto;
  }
  #container #contents .topImage .bg_slider {
    aspect-ratio: 1/1;
  }
  #container #contents .flow .flow_list .flow_box {
    width: calc(50% - var(--s24_32));
  }
  #container #contents .flow .flow_list .flow_box:last-of-type {
    width: 100%;
  }
  #container #contents .strength .strength_list {
    justify-content: center;
  }
  #container #contents .strength .strength_list .strength_box {
    width: 100%;
    max-width: 300px;
  }
  #container #contents .strength .strength_list .strength_box .text_arae {
    min-height: unset;
  }
}