@charset "utf-8";

/* for Common & Smartphone*/


.tabs{
  display:-webkit-box;
  display:flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin-bottom: 50px;
  border: 1px solid #181878;
}
.tabs .tab{
  width: 50%;
  transition: .3s;
}
.tabs .tab + .tab{
  width: calc(100% / 2);
  border-left: 1px solid #181878;
}
.tabs .tab > p{
  position: relative;
  display:-webkit-box;
  display:flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 100%;
  height: 70px;
  color: #181878;
}
.tabs .tab > p > span{
  display: inline-block;
  margin: 0 0.5em 0 0;
  font-size: clamp(calc(1.8rem * 0.7), calc(18vw / 3.75), 1.8rem);/*18 / 28*/
}
.tabs .tab > p > i{
  width: 36px;
  height: 36px;
  background-color: #181878;
  background-image: url("../../common/images/ico_arr01.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: calc((8 / 50) * 100%) auto;
  border: 1px solid #181878;
  border-radius: 50%;
  font-style: normal;
  text-align: center;
  line-height: 0;
}

/*hover*/
.tabs .tab:hover,
.tabs .tab.isActive{
  background: #181878;
  cursor: pointer;
}
.tabs .tab:hover > p > span,
.tabs .tab.isActive > p > span{
  color: #fff;
}
.tabs .tab:hover > p > i,
.tabs .tab.isActive > p > i{
  border-color: #fff;
}


.tabContent{}
.tabContent .hide{
  display: none;
}
.tabContent .unit{}
.tabContent .unit:last-of-type{
  margin-bottom: 0 !important;
}
.tabContent .unit figure{
}
.tabContent .unit figure figcaption{
  margin: 5px 0 0 0;
  font-size: clamp(calc(1.4rem * 0.7), calc(14vw / 3.75), 1.4rem);/*14 / 16*/
  text-align: left;
  line-height: 1.2;
}


/*縦長*/
.tabContent .unit.type02{}
.tabContent .unit.type02 figure{
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

/* for PC*/
@media print, screen and (min-width:768px) {  
	.tabs{
    margin-bottom: 80px;
  }
  .tabs .tab{}
  .tabs .tab + .tab{}
  .tabs .tab > p{
    height: 100px;
  }
  .tabs .tab > p > span{
    margin-right: 1em;
    font-size: clamp(calc(2.8rem * 0.7), calc(28vw / 11.00), 2.8rem);/*18 / 28*/
  }
  .tabs .tab > p > i{
    width: 50px;
    height: 50px;
  }
  
  .tabContent{}
  .tabContent .unit{}
  .tabContent .unit:last-of-type{}
  .tabContent .unit figure{}
  .tabContent .unit figure figcaption{
    font-size: clamp(calc(1.6rem * 0.7), calc(16vw / 11.00), 1.6rem);/*14 / 16*/
  }
  
  /*縦長*/
  .tabContent .unit.type02{}
  .tabContent .unit.type02 figure{
    width: calc((530 / 1100) * 100%);
  }

}


/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 834px) and (orientation:portrait) {
/*縦向きのみの記述 --- iPad Pro12.9はPC表示*/

}




/* exterior01 ////////////////////////////// */
/* exterior02 ////////////////////////////// */
.exterior01{}
.exterior02{}
.exterior01 .unit,
.exterior02 .unit{}
.exterior01 .unit figure,
.exterior02 .unit figure{
  position: relative;
  margin: 0 0 20px 0;
}


/* for PC*/
@media print, screen and (min-width:768px) {
  .exterior01{}
  .exterior02{}
  .exterior01 .unit,
  .exterior02 .unit{
    display:-webkit-box;
    display:flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .exterior01 .unit:nth-of-type(2n),
  .exterior02 .unit:nth-of-type(2n){
    -webkit-box-orient: horizontal;
  	-webkit-box-direction: reverse;
  	-ms-flex-direction: row-reverse;
  	flex-direction: row-reverse;
  }
  .exterior01 .unit figure,
  .exterior02 .unit figure{
    margin: 0;
    width: calc((510/1100)*100%);
  }
  .exterior01 .unit div,
  .exterior02 .unit div{
    width: calc((calc(1100 - 510)/1100)*100%);
    padding: 0 7%;
  }

}


/* home security ////////////////////////////// */
.hs{}
@media screen and (max-width: 767px) {
  .hs .copy01 .lsN{
    letter-spacing: -0.02em;
  }
}

/* for PC*/
@media print, screen and (min-width:768px) {
	.hs{}

}

/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 834px) and (orientation:portrait) {
/*縦向きのみの記述 --- iPad Pro12.9はPC表示*/

}


/*set aos
--------------------------------- */


/* for sp*/
@media screen and (max-width: 767px) {

}

/* for pc*/
@media screen and (min-width: 768px) {
	
  
}