/* デザイン */
.mv{position: relative;background: #fff}
.mv .mv_img img{width: 100%;}
.mv .copy{margin-top: 50px; font-size: 1rem;line-height: 2.3em;letter-spacing: 0.1em;}

@media screen and (max-width: 668px) {/*スマホ設定*/
.mv{}
.mv .copy{margin-top: 0px;padding: 30px; font-size: 0.8rem;text-align: left}
}

.fade-in {
  opacity: 0;
  animation: fadeInAnime 1s ease-in forwards 1s; /* 0.5秒遅らせて1秒かけて表示 */
}
.fade-in2 {
  opacity: 0;
  animation: fadeInAnime 1s ease-in forwards 2s; /* 0.5秒遅らせて1秒かけて表示 */
}
/* アニメーションの動き */
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
picture{display: block;position: relative}
picture figcaption{position: absolute;right: 10px;bottom: 10px;text-align: right;color: #fff;font-size: 10px;}
picture figcaption.black{color: #000}
@media screen and (max-width:767px){/*スマホ設定*/
picture figcaption{right: 5px;bottom: 5px;}
}
#contents-wrap{ position: relative; padding-bottom: 1px; margin-bottom:0; }
.info-area{background: #fff;margin: 0 auto;padding: 6% 0 }

.design-box{position: relative;}
.design-box img{width: 100%}
.design-box #pankuzu{position: absolute;left: 0;right: 0;margin: 0;top: 6px;z-index: 2}
.design-box #pankuzu .inner--base{width: 1200px;margin: auto;text-align: center;padding: 0px 0;}
.design-box #pankuzu .pankuzu-list li{}
.design-box #pankuzu .pankuzu-list li a{}
.notes-area{ margin: 0% auto 0; }

@media screen and (max-width: 668px) {/*スマホ設定*/

}


.design-box .box_inner{width: 950px;margin: auto;text-align: center;padding: 80px 0;}
.design-box .box_inner h2{font-size: 1.8rem;line-height: 1.9em; letter-spacing: 0.2em;font-weight: normal}
.design-box .box_inner .copy{font-size: 0.9rem;line-height: 2.3em;letter-spacing: 0.1em;}
.design-box .sec0{background: #fff}
.design-box .sec1{background: url("../images/design/bg.jpg") right bottom no-repeat; background-size: cover;}
.design-box .sec1 h2{text-align: left;margin-bottom: 20px}
.design-box .sec1 .col40{width: 34%}
.design-box .sec1 .col60{width: 60%;text-align: left}

.design-box .sec2{background: #fff}
.design-box .sec2 .col4{width: 23%;margin-top: 30px}

.design-box .sec3{background: linear-gradient(to bottom,  #ebe7e5 0%,#ffffff 100%);}
.design-box .sec3 h2{text-align: left;font-size: 1.4rem;margin-bottom: 20px}
.design-box .sec3 .copy{font-size: 0.9rem;text-align: left;line-height: 2}

.design-box .sec4{background: #333;color: #fff;padding-top: 20px}
.design-box .sec4 h2{line-height: 1.8;margin-bottom: 30px}
.design-box .sec4 h2 span{font-size: 1.3rem;color: #ccc;letter-spacing: 0.1em}
.design-box .sec4 p{margin-bottom: 30px}

@media screen and (max-width: 668px) {/*スマホ設定*/
.design-box .box_inner{width: 90%;padding: 40px 0;}
.design-box .box_inner h2{font-size: 1rem;}
.design-box .box_inner .copy{font-size: 0.8rem;}

.design-box .sec1{background: url("../images/design/bg.jpg") center bottom no-repeat; background-size: cover;}
.design-box .sec1 .col40{width: 100%}
.design-box .sec1 .col60{width: 90%;margin: 30px auto 0; text-align: left}

.design-box .sec2 .col4{width: 48%;}

.design-box .sec3 .col3{width: 100%;margin-bottom: 20px}
.design-box .sec3 .col3_2{width: 100%}
}


.pc{display: block}
.sp{display: none}
@media screen and (max-width: 668px) {/*スマホ設定*/
.sp{display: block}
.pc{display: none}
}

.parallax {
  height: 800px;
}
/* 背景画像 */
.parallax::before {
  background-image: url(../images/design/img4.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}

@media screen and (max-width: 668px) {/*スマホ設定*/
.parallax {
  height: 50vh;


}
.parallax::before {
background-image: url(../images/design/img4_sp.jpg);
background-position:center bottom;
height: 95vh;
}
}