@charset "UTF-8";

/* ----------------------------------------------
　SIDE設定
------------------------------------------------*/
@media all and (min-width: 769px) {
#container #contents .flex_row .side_content {
    width: calc(27% - var(--s16_32) / 2);
    min-width: 200px;
    order: 2;
  }
  #container #contents .flex_row .side_content .side_menu {
    margin-bottom: 40%;
  }
  #container #contents .flex_row .side_content .side_menu li {
    aspect-ratio: 23/13;
    position: relative;
    z-index: 1;
    background-size: 110%;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.5s;
  }
  /*#container #contents .flex_row .side_content .side_menu li:hover {
    background-size: 135%;
  }*/

  #container #contents .flex_row .side_content .side_menu li:not(:last-of-type) {
    margin-bottom: var(--s8_16);
  }
  #container #contents .flex_row .side_content .side_menu li::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: var(--mainBl);
    mix-blend-mode: multiply;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all ease 0.8s;
  }
  #container #contents .flex_row .side_content .side_menu li:hover:before{
    opacity: 0.4;
  }
  #container #contents .flex_row .side_content .side_menu li a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  #container #contents .flex_row .side_content .side_menu li a .sub_txt {
    padding: var(--s8_16) var(--s4_8);
    display: flex;
    align-items: baseline;
    grid-gap: var(--s4_8);
    color: #fff;
    font-size: var(--s12_14);
  }
  #container #contents .flex_row .side_content .side_menu li a .sub_txt::before {
    content: "";
    display: inline-block;
    width: var(--s8_12);
    aspect-ratio: 1/1;
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
            clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    background-color: #fff;
  }
  #container #contents .flex_row .side_content .side_menu li a .main {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-size: var(--s18_22);
    font-weight: 500;
    color: #fff;
    text-indent: 20px;
  }
  #container #contents .flex_row .side_content .side_menu li a .main::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 25px;
    background: url(/images/common/dot_bg.svg) center / 45% repeat, rgba(34, 34, 34, 0.9);
    border-top: 2px solid var(--mainCol);
    margin: 5px 0 0;
  }
  #container #contents .flex_row .side_content .side_menu li.wall {
    background-image: url(/images/top/top_menu01.jpg);
  }
  #container #contents .flex_row .side_content .side_menu li.roof {
    background-image: url(/images/top/top_menu02.jpg);
  }
  #container #contents .flex_row .side_content .side_menu li.plumbing {
    background-image: url(/images/top/top_menu03.jpg);
  }
  #container #contents .flex_row .side_content .side_menu li.interior {
    background-image: url(/images/top/top_menu04.jpg);
  }
  #container #contents .flex_row .side_content .contact_area {
    margin-bottom: 40%;
  }
  #container #contents .flex_row .side_content .contact_area .title {
    margin-bottom: var(--s8_16);
    font-size: var(--s20_32);
    text-align: center;
    line-height: 0.8;
  }
  #container #contents .flex_row .side_content .contact_area .title::after {
    content: "";
    display: inline-block;
    width: 100%;
    aspect-ratio: 230/11;
    background: url(/images/common/side_title_arrow.svg) center/100% no-repeat;
  }
  #container #contents .flex_row .side_content .contact_area .side_contact_bt {
    aspect-ratio: 23/9;
  }
  #container #contents .flex_row .side_content .contact_area .side_contact_bt a {
    height: 100%;
    padding: var(--s8_16);
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: var(--s4_8);
  }
  #container #contents .flex_row .side_content .contact_area .side_contact_bt a .round {
    font-size: 12px;
    color: #fff;
    background-color: var(--mainCol);
    display: flex;
    align-items: center;
    padding: 0 0.15em;
    aspect-ratio: 1/1;
    border-radius: 100%;
    white-space: nowrap;
  }
  #container #contents .flex_row .side_content .contact_area .side_contact_bt a img {
    width: var(--s14_18);
  }
  #container #contents .flex_row .side_content .contact_area .side_contact_bt a .top {
    font-size: var(--s12_14);
    border-top: 1px solid var(--mainBl);
    border-bottom: 1px solid var(--mainBl);
    display: block;
    text-align: center;
    margin:0 0 5px
  }
  #container #contents .flex_row .side_content .contact_area .side_contact_bt a .txt {
    font-size: var(--s16_18);
    font-weight: 500;
    white-space: nowrap;
  }
  #container #contents .flex_row .side_content .contact_area .side_contact_bt.mail {
    background: url(/images/common/side_mail_bg.svg) center/100% no-repeat, var(--gray02);
    margin-bottom: var(--s10_16);
  }
  #container #contents .flex_row .side_content .contact_area .side_contact_bt.mitsumori {
    background: url(/images/common/side_calculator_bg.svg) center/100% no-repeat, var(--green02);
    margin-bottom: var(--s16_32);
  }
  #container #contents .flex_row .side_content .contact_area .side_company {
    border: 2px solid var(--mainBl);
    padding-top: var(--s8_24);
  }
  #container #contents .flex_row .side_content .contact_area .side_company .tit {
    text-align: center;
    display: block;
    margin-bottom: var(--s8_16);
    font-size: 14px;
    font-weight: 500;
  }
  #container #contents .flex_row .side_content .contact_area .side_company .com_img {
    padding: 0 var(--s8_24);
    margin-bottom: var(--s4_8);
  }
  #container #contents .flex_row .side_content .contact_area .side_company address {
    font-size: 14px;
    margin-bottom: var(--s8_16);
    text-align: center;
  }
  #container #contents .flex_row .side_content .contact_area .side_company .tell_area {
    margin-bottom: var(--s8_16);
  }
  #container #contents .flex_row .side_content .contact_area .side_company .tell_area a {
    font-weight: 500;
    font-size: var(--s24_32);
    text-align: center;
    display: block;
  }
  #container #contents .flex_row .side_content .contact_area .side_company .tell_area .comment {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: var(--s4_8);
  }
  #container #contents .flex_row .side_content .contact_area .side_company .tell_area .comment img {
    width: var(--s20_24);
  }
  #container #contents .flex_row .side_content .contact_area .side_company .tell_area .comment .txt {
    font-size: var(--s16_18);
    font-weight: 500;
  }
  #container #contents .flex_row .side_content .contact_area .side_company .tell_area .time {
    font-size: var(--s12_14);
    text-align: center;
    display: block;
  }
  #container #contents .flex_row .side_content .contact_area .side_company .more a {
    padding: var(--s8_10);
    border-top: var(--mainCol) 2px solid;
    display: block;
    text-align: center;
    font-size: var(--s14_16);
    color: var(--mainCol);
    transition: all 0.5s;
  }
  #container #contents .flex_row .side_content .contact_area .side_company .more a:hover {
    background-color: var(--mainCol);
    color: #fff;
  }
  #container #contents .flex_row .side_content .other_contents .title {
    margin-bottom: var(--s8_16);
    font-size: var(--s20_32);
    text-align: center;
    line-height: 0.8;
  }
  #container #contents .flex_row .side_content .other_contents .title::after {
    content: "";
    display: inline-block;
    width: 100%;
    aspect-ratio: 230/11;
    background: url(/images/common/side_title_arrow.svg) center/100% no-repeat;
  }
  #container #contents .flex_row .side_content .other_contents .other_menu li {
    aspect-ratio: 230/84;
    position: relative;
    z-index: 1;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.5s;
  }
  /*#container #contents .flex_row .side_content .other_contents .other_menu li:hover {
    background-size: 125%;
  }*/
  #container #contents .flex_row .side_content .other_contents .other_menu li:before{
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: var(--mainBl);
    mix-blend-mode: multiply;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all ease 0.8s;
  }
  #container #contents .flex_row .side_content .other_contents .other_menu li:hover:before{
    opacity: 0.4;
  }
  #container #contents .flex_row .side_content .other_contents .other_menu li:not(:last-of-type) {
    margin-bottom: var(--s8_16);
  }
  #container #contents .flex_row .side_content .other_contents .other_menu li a {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  #container #contents .flex_row .side_content .other_contents .other_menu li a .sub_txt {
    background-color: var(--mainBl);
    display: flex;
    align-items: stretch;
    grid-gap: var(--s4_8);
    padding: 0 var(--s16_24) 0 var(--s4_8);
    transform: translateY(-30%);
  }
  #container #contents .flex_row .side_content .other_contents .other_menu li a .sub_txt::before {
    content: "";
    display: inline-block;
    width: var(--s2_4);
    background: linear-gradient(to bottom, #fff11d 0%, #fbcc00 28%, #f0932e 66%, #e9652d 88%, #e4352b 100%);
  }
  #container #contents .flex_row .side_content .other_contents .other_menu li a .sub_txt span {
    font-size: var(--s12_14);
    color: #fff;
    padding: var(--s4_8) 0;
    line-height: 1;
  }
  #container #contents .flex_row .side_content .other_contents .other_menu li.egao {
    background-image: url(/images/common/side_content01.jpg);
  }
  #container #contents .flex_row .side_content .other_contents .other_menu li.disaster {
    background-image: url(/images/common/side_content02.jpg);
  }
  #container #contents .flex_row .side_content .other_contents .other_menu li.info {
    background-image: url(/images/common/side_content03.jpg);
  }
  #container #contents .flex_row .side_content .other_contents .other_menu li.faq {
    background-image: url(/images/common/side_content04.jpg);
  }
}
@media all and (max-width: 768px) {
  #container #contents .flex_row .side_content {
    display: none !important;
  }
}