section:not(#mv,#top) { margin-top:100px; }
h3 { text-align:center; font-size:var(--fs-xxl) }
h4 { font-size:var(--fs-sm); margin:5px 0; }
h4 span { font-size:60%; }
h4.line-ttl {
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  border-bottom:solid 1px #333;
  height:60px;
  padding-bottom:5px;
  margin-bottom:5px;
}
h4.line-ttl.clm { flex-direction:column; text-align:center; font-size:90%; }
.imgcap { position:relative; }
.imgcap:after {
  content:"参考写真";
  display:block;
  font-size:1.1rem;
  position:absolute;
  bottom:5px;
  right:5px;
}
.imgcap.wht { color:#fff; }
.imgcap.stCap1:after { content:"概念イラスト"; }
.imgcap.stCap2:after { content:"外壁構造概念図"; }
.imgcap.stCap3:after { content:"床構造概念図"; }
.imgcap.stCap4:after { content:"杭構造概念図"; }
.imgcap.otCap:after { content:"image"; }
.p-cap { display:block; font-size:1rem; margin-top:5px; }
.h3-logo { max-width:24rem; width:100%; margin:20px auto; }
.lead-text.h3-lead { text-align:center; margin-bottom:30px; }
.eqWrap {
  display:flex;
  justify-content:space-between;
}
.eqWrap .w { width:48.5%; }
.eqWrap.three .w { width:32.5%; }
.eqWrap.three .w:last-child { width:65.5%; }
.flexW { flex-wrap:wrap; }
.clm2 { display:flex; justify-content:space-between; }
.clm2 .clm2-w { width:48%; }
.clm2 p { font-size:1.2rem; }
.clm2:nth-of-type(n+2) { margin-top:30px; }
.clm3 { display:flex; justify-content:space-between; }
.clm3 p { font-size:1.2rem; }
.clm3 .clm3-w { width:31.5%; }
.clm3:nth-of-type(n+2) { margin-top:30px; }
.clm4 { display:flex; justify-content: space-between; }
.clm4 .clm4-w { width:23.5%; }
.clm4 p { font-size:1.2rem; }

/*========================================
EQUIPMENT
========================================*/
#top .lead-text { margin-bottom:40px; }
#top ul {
  display:flex;
  justify-content:space-between;
  max-width:650px;
  width:100%;
  margin:0 auto 80px;
}
#top ul li { width:48%; }
#top ul li a {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#AFB4DB;
  height:60px;
  color:#475189;
  font-weight: bold;
  transition:all ease-out .4s;
}
#top ul li a:hover { opacity:.6; }
#top ul li.active a {
  background:#475189;
  color:#fff;
  pointer-events:none;
}
#top .line-img {
  position:sticky;
  top:0;
  height:18rem;
  overflow: hidden;
}
#top .line-img img {
  position: absolute;
  top: -90px; /* 動かす余白 */
  left: 0;
  width: 100%;
  height:36rem;
  object-fit: cover;
  will-change: transform;
}

#kitchen .clm4 { margin-top:30px; }

#bath .bath-wrap {
  position:relative;
  border-radius:15px;
  /*
  background-image:url(../_img/common/bg.webp);
  color:#fff;
  */
  background:#fff;
  padding:30px;  
  width:calc(100% - 20px);
  margin:50px auto 0;
}
#bath .bath-wrap:after {
  content:"";
  display:block;
  width:calc(100% + 20px);
  height:calc(100% + 20px);
  background:#2f3268;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index: -1;
}
#bath .bath-wrap .svg { width:100%; margin-bottom:40px; }
#bath .bath-wrap h4 { font-size:140%; }
#bath .bath-wrap p { font-size:90%; }
#bath .bath-wrap .clm2 { align-items:center; }
#bath .bath-wrap .clm2-w:first-child { width:60%; }
#bath .bath-wrap .clm2-w:last-child { width:36%; }
#bath .bath-wrap .clm2-w .img {  position:relative; }
#bath .bath-wrap .clm2-w .img p {
  position:absolute;
  line-height:1;
  font-size:1.2rem;
  bottom:5px;
  right:5px;
}
#bath .bath-wrap .clm2-w .img p.wht { color:#fff; }

#caption .btnArea {
  margin:80px 0;
}
#caption .btnArea ul {
  display:flex;
  justify-content:space-between;
  max-width:650px;
  width:100%;
  margin:0 auto;
}
#caption .btnArea ul li { width:48%; }
#caption .btnArea ul li a {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#AFB4DB;
  height:60px;
  color:#475189;
  font-weight: bold;
  transition:all ease-out .4s;
}
#caption .btnArea ul li a:hover { opacity:.6; }
#caption .btnArea ul li.active a {
  background:#475189;
  color:#fff;
  pointer-events:none;
}

/*========================================
STRUCUTRE
========================================*/
#structure { background:#F6F7F7; padding:80px 0; margin:0!important; }
#structure .stWrap { display:flex; flex-wrap:wrap; justify-content:space-between; }
#structure .stWrap .w { width:31%; }
#structure .stWrap .w:nth-of-type(n+4) { margin-top:30px; }

/*========================================
other
========================================*/
#other .otherWrap {
  display:flex;
  flex-wrap:wrap;
}
#other .otherWrap:nth-of-type(n+2) { margin-top:10px; }
#other .otherWrap .w { background:#f7f8f8; width:calc(20% - 10px); padding:10px; margin:0 5px; }
#other .otherWrap .w:nth-of-type(n+5) { margin-top:10px; }
#other .otherWrap .w p { font-size:1.2rem; }
#other .otherWrap .w.w2 { width:calc(25% - 10px); }
#other .otherWrap .w.w3 { width:calc(40% - 10px); }
#other .otherWrap .w.w4 { width:calc(60% - 10px); display:flex; justify-content:space-between; align-items:center; }
#other .otherWrap .w.w4 .box { width:48%; }
#other .otherWrap .w.w5 { width:100%; display:flex; justify-content:space-between; align-items:center; }
#other .otherWrap .w.w5 .img { width:28.29%; }
#other .otherWrap .w.w5 .box { width:68.71%; }

/*========================================
security
========================================*/
#security { background:#F6F7F7; padding:80px 0; }
#security .secWrap { display:flex; flex-wrap:wrap; }
#security .secWrap .w { width:calc(50% - 20px); margin:0 10px; }
#security .secWrap .w p { font-size:1.2rem; }
#security .secWrap .w.w2 { width:calc(25% - 60px / 3); margin:0 20px 0 0; }
#security .secWrap .w:nth-of-type(n+3) { margin-top:20px; }

/*========================================
eco
========================================*/
#eco h4.line-ttl { border:none; height:auto; }
#eco .clm2 { width:70%; margin:0 auto; }
#eco .clm2 .clm2-w:first-child { width:52.5%; }
#eco .clm2 .clm2-w:last-child { width:43%; }

@media screen and (max-width:1000px){
  #other .otherWrap.fst { justify-content:center; }  
  #other .otherWrap.fst .w { width:calc(33.33% - 10px); }
  #other .otherWrap.fst .w:nth-of-type(n+4) { margin-top:10px; }
  #other .otherWrap .w.w3 { width:100%; }
  #other .otherWrap .w.w4 { width:100%; }
  #other .otherWrap .w.w4 .box:first-child,#other .otherWrap .w.w5 .img { width:30%; }
  #other .otherWrap .w.w4 .box:last-child,#other .otherWrap .w.w5 .box { width:68%; }
}

@media screen and (max-width:820px){
  
  .eqWrap { display:block; }
  .eqWrap .w { width:100%; }
  .eqWrap .w:first-child { margin:0 calc(50% - 50vw); width:100vw; }
  .eqWrap .w:last-child { margin-top:20px; }
  
  #kitchen .clm4 { flex-wrap:wrap; margin-top:20px; }
  #kitchen .clm4 .clm4-w { width:48%; }
  
  #bath .bath-wrap .clm2 { flex-direction:column-reverse; }
  #bath .bath-wrap .clm2-w { width:100%!important; }
  #bath .bath-wrap .clm2-w:last-child { display:flex; margin-bottom:30px; }
  #bath .bath-wrap .svg { width:80%; margin:0 auto 30px; }
  
  #toilet .eqWrap.three { display:flex; }
  #toilet .eqWrap.three .w { margin-top:0; }
  #toilet .eqWrap.three .w:first-child { margin:0; width:31.5%; }
  
  /*========================================
  STRUCUTRE
  ========================================*/
  #structure .stWrap .w:nth-child(5) h4.line-ttl { font-size:90%; }
}


@media screen and (max-width:600px){
  
  .imgcap:after { font-size:8px; bottom:3px; right:3px; }
  .h3-logo { margin-top:10px; }
  .lead-text.h3-lead { margin:0 auto 40px; }
  .clm2,.clm3 { display:block; }
  .clm2 .clm2-w,.clm3 .clm3-w { width:100%; }
  .clm2 .clm2-w:nth-of-type(n+2),.clm3 .clm3-w:nth-of-type(n+2) { margin-top:20px; }
  
  #top .line-img { height:10rem; }
  
  #kitchen .clm4 { display:block; }
  #kitchen .clm4 .clm4-w { width:100%; }
  #kitchen .clm4 .clm4-w:nth-of-type(n+2) { margin-top:20px; }
  
  #bath .bath-wrap { padding:20px; }
  #bath .bath-wrap h4 { font-size:var(--fs-sm); }
  #bath .bath-wrap p { font-size:1.2rem; }
  #bath .bath-wrap .svg { width:100%; }
  #bath .bath-wrap .clm2 { display:flex; }
  #bath .bath-wrap .clm2-w:last-child { margin-top:0; }
  
  #toilet .eqWrap.three { display:block; }
  #toilet .eqWrap.three .w:first-child { margin:0 calc(50% - 50vw); width:100vw; }
  #toilet .eqWrap.three .w:last-child { width:100%; }
  
  #top ul { margin-bottom:60px; }
  
  /*========================================
  STRUCUTRE
  ========================================*/
  h4.line-ttl { height:auto; }
  #structure { padding:40px 0!important; }
  #structure .lead-text { margin:10px auto 40px; }
  #structure .stWrap { display:block; }
  #structure .stWrap .w { width:100%; }
  #structure .stWrap .w:nth-of-type(n+2) { margin-top:20px; }
  
  /*========================================
  other
  ========================================*/
  #other { margin-top:60px!important; }
  #other .lead-text { margin:10px auto 40px!important; }
  #other .otherWrap { display:block; }
  #other .otherWrap .w,#other .otherWrap .w1,#other .otherWrap .w2,#other .otherWrap .w3,#other .otherWrap .w4 { width:100%!important; }
  #other .otherWrap .w { margin:0; }
  #other .otherWrap .w:nth-of-type(n+2) { margin-top:20px; }
  #other .otherWrap .w.w4,#other .otherWrap .w.w5 { display:block; }
  #other .otherWrap .w4 > div,#other .otherWrap .w5 > div { width:100%!important; }
  
  /*========================================
  security
  ========================================*/
  #security { padding:40px 0; margin-top:60px!important; }
  #security .lead-text { margin:10px auto 40px!important; }
  #security .secWrap { display:block; }
  #security .secWrap .w,#security .secWrap .w.w2 { width:100%; }
  
  /*========================================
  eco
  ========================================*/
  #eco .lead-text { margin:10px auto 40px!important; }
  #eco .clm2 .clm2-w { width:100%!important; }
    
}