@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap");


#main * {
    box-sizing: border-box;
    font-family: 'Noto Serif JP', serif; /*"Noto Sans JP"*/
}
#main #breadcrumbs *{font-family: initial;}


/**/
#main .con_sp{display: none;}
#main h1{margin-bottom: 2em;}
#main h2{font-size: 36px;margin-bottom: 2em;}
#main a{transition: .4s;}
#main a:hover{opacity: .6;}
#main .con_wrap h2{text-align: center;background-color: #fff;padding: 5px 20px 20px 20px;display: inline-block;}
#main .con_wrap h2 span{font-size: 15px;display: block;}
#main .con_wrap h3{font-size: 36px;margin-bottom: 1em;text-align: center;margin: 2em 0 1em;}
#main .con_wrap h3 span{display: inline-block;}

#first{max-width: 1366px;margin: 0px auto 100px;}
#first img{width: 100%;}

.scroll_fading{
    [data-scroll='out'] .char
    opacity 0
}


  /* ==========slider========== */

#first_wrap{margin-bottom: 80px;position: relative;}
#first_wrap p{position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);} 
.slider {
    display: none;
    width: 100%;
    margin-inline: auto;
    overflow: hidden; /* 画像がはみ出ないようにする */
}
//slick-initializedクラスが付与されたら
  .slider.slick-initialized {
    display: block; 
  }
.slick-img img {
    width: 100%;
  }
  @keyframes zoomUp {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.15); /* 拡大率 */
    }
  }
  .add-animation {
    animation: zoomUp 10s linear 0s normal both;
  }

/* ==========/slider========== */

#lead{text-align: center;}
#lead > div{font-size: 15px;line-height: 2.5;}
#lead > div p{margin-bottom: 2em;}

#nav_area{margin: 120px 0 0 0;}
#nav_area h2{text-align: center;}
#nav_area h2 span{display: block;}
#nav_area .nav{display: flex;flex-wrap: wrap;}
#nav_area .nav a:nth-child(1)::after{background-image: url(../img/nav_lifestyle.jpg);}
#nav_area .nav a:nth-child(2)::after{background-image: url(../img/nav_design.jpg);}
#nav_area .nav a:nth-child(3)::after{background-image: url(../img/nav_equipment.jpg);}
#nav_area .nav a:nth-child(4)::after{background-image: url(../img/nav_insulation.jpg);}
#nav_area .nav a:nth-child(5)::after{background-image: url(../img/nav_construction.jpg);}
#nav_area .nav a:nth-child(6)::after{background-image: url(../img/nav_option.jpg);}
#nav_area .nav a{display: flex;width: calc(100% / 3);align-items: center;justify-content: center;height: 400px;color: #fff;overflow: hidden;}
    #nav_area .nav a::after {
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        background-size: cover;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
        transition: all .3s ease-out;
        background-position: center center;
        }
#nav_area .nav a:hover::after{
    opacity: 1;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
#main #nav_area .nav a:hover{opacity: 1;}
#nav_area .nav a h3{font-size: 36px;text-align: center;z-index: 1;}
#nav_area .nav a h3 span{font-size: 15px;display: block;}
#nav_area .nav a h3::after{content: url(../img/ico_next.svg);display: block;margin-top: -10px;position: relative;}

.lifestyle_list li{margin: 10px;}

.con_wrap{margin-top: 200px;}
.con_wrap .h_img{text-align: center;}
#lifestyle .h_img{background-image: url(../img/h2_lifestyle.webp);}
#design .h_img{background-image: url(../img/h2_design.webp);}
#equipment .h_img{background-image: url(../img/h2_equipment.webp);}
#insulation .h_img{background-image: url(../img/h2_insulation.webp);}
#construction .h_img{background-image: url(../img/h2_construction.webp);}
#option .h_img{background-image: url(../img/h2_option.webp);}
.h_img{height: 500px;background-size: cover; background-position: center center;}
#main .con_wrap .tx_h3{max-width: 630px;margin: 0 auto 60px;font-size: 15px;}

.felx_3{display: flex;justify-content: space-between;flex-wrap: wrap;}
.felx_3 div{width: 32%;text-align: center;margin-bottom: 20px;}
.felx_3 div p{font-size: 15px;}
.felx_3 div img{width: 100%;}

.cv_area{margin: 80px 0;}
.cv_area a{display: block; font-size: 18px;text-align: center;max-width: 690px;padding: 20px;position: relative;background-color: #272727;color: #fff;margin: auto;}
.cv_area a::after{content: url(../img/ico_next_w.svg);position: absolute;right: 20px;top: 0;bottom: 0;height: 35px;margin: auto;}
.cv_area span{font-size: 0.8em;}
.cv_area_bana{max-width: 580px;margin:100px auto 100px;}
.cv_area_bana img{width: 100%;}


#cv_wrap{background-color: #EBEBEB; padding: 80px 4% 20px;}
.cv_flex_2{display: flex;justify-content: space-between;max-width: 860px;margin: auto;flex-wrap: wrap;}
.cv_flex_2 > a{display: block;width: 48%;}
.cv_flex_2 img{width: 100%;}

.flex_design{display: flex;flex-wrap: wrap;justify-content: space-between;max-width: 1366px;margin: auto;}
.flex_design div{width: 24%;margin-bottom: 1%;}
.flex_design div img{width: 100%;}

.voice_flex{display: flex;justify-content: space-between;max-width: 1200px;margin: 20px auto 80px;}
.voice_flex > div{width: 48%;}
.voice_flex img{width: 100%;}
.voice_flex h4{text-align: center;font-size: 18px;margin: 1em 0;}
.voice_flex h5{font-size: 22px;margin: 0.8em 0;}
.voice_flex p{font-size: 14px;}
.voice_flex a{background-color: #EBEBEB;padding: 15px;display: block;margin-top: 1em;}
.voice_flex a::after{content: url(../img/ico_blank.svg);margin-left: 1em;}

/* -------------- slider_slick -------------- */
.gallery_list li{margin: 10px;}
#main .slick-dots li button:before{font-size: 15px;}
#main .slide-arrow {
    bottom: 0;
    margin: auto;
    position: absolute;
    top: 0;
  }
#main button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
  }
  .next-arrow, .prev-arrow{position: absolute;border: none;width: 25px;height: 25px;border-top: 2px solid #000;border-right: 2px solid #000;margin: 7px 0;background-color: transparent;z-index: 10;}
  .prev-arrow {transform: rotate(-135deg); left: 40px;}
  .next-arrow {transform: rotate(45deg); right: 40px; }

/* -------------- /slider_slick -------------- */

.construction_wrap{max-width: 1000px;margin: auto;display: flex;justify-content: space-around;flex-wrap: wrap;}
.construction_wrap a{display: flex;padding: 80px 40px;background-color: #F1F1F1;justify-content: center;align-items: center;text-align: center;width: 40%;position: relative;}
.construction_wrap a span{font-size: 15px;}
.construction_wrap a p{font-size: 20px;}
.construction_wrap a::after{content: url(../img/ico_next_b.svg);position: absolute;right: 20px;bottom: 20px;}


.flex_option{display: flex;max-width: 980px;margin: 0 auto 60px ;justify-content: space-between;flex-wrap: wrap;}
.flex_option a{display: block;width: 32%;margin-bottom: 40px;}
.flex_option a img{width: 100%;}
.flex_option h4{font-size: 18px;padding-right: 20px;position: relative;}
.flex_option h4 span{display: block;font-size: 12px;}
.flex_option h4::after{content: url(../img/ico_next_b.svg);position: absolute;right: 0;top: 0;bottom: 0;margin: auto;height: 25px;}
.flex_none{visibility: visible;height: 0;}

.insulation_img{margin: 40px auto;text-align: center;}
.insulation_img img{max-width: 100%;}

/* -------------- @media -------------- */

@media screen and (max-width: 690px) {
    #main .con_pc{display: none;}
    #main .con_sp{display: block;}
    #first_image{margin: 80px auto 30px;}
    .sticky_media{background: url(../img/main_sp.webp) no-repeat center center;}
    #lead > div{margin: 0 10%;font-size: 15px;}
    #nav_area .nav a{width: 50%;height: 300px;}
    #nav_area .nav a h3{font-size: 24px;}
    #main .con_wrap h3{font-size: 24px;padding: 0 4%;}
    #main .con_wrap .tx_h3{padding: 0 6%;}
    .h_img{height: 400px;}
    .felx_3 div{width: 48%;}
    .cv_area a{width: 80%;}
    .flex_option a{width: 48%;margin-bottom: 20px;padding: 0 2%;}
    .cv_area_bana{margin: 40px 4%;}
    .construction_wrap a{width: 90%;margin:0 auto 20px;padding: 60px 40px;}
    .insulation_img{margin: 30px 4%;}
    .voice_flex{flex-wrap: wrap;justify-content: center;margin: 40px auto 80px;}
    .voice_flex > div{width: 80%;margin-bottom:40px;}
    .voice_flex h5{font-size: 20px;}
    .cv_flex_2{justify-content: center;}
    .cv_flex_2 > a{width: 80%;margin-bottom: 20px;}
}

@media screen and (max-width: 425px) {
    #lead > div{text-align: left;}
    #lead > div br{display: none;}
    #main h2{font-size: 24px;}
    #nav_area .nav a{height: 180px;}
    #nav_area .nav a h3{font-size: 20px;}
    #nav_area .nav a h3 span{font-size: 12px;}
    .h_img{height: 350px;}
    .felx_3{justify-content: center;}
    .felx_3 div{width: 70%;}
    .felx_3 div p{font-size: 12px;}
    .flex_design div{width: 49%;margin-bottom: 0.5%;}
    .equipment_containe_h{gap: 10px 10px;font-size: 14px;}
    .equipment_containe > div{font-size: 12px;}
    .equipment_containe{gap: 10px 10px;margin: 10px 1%;}
    .flex_option h4{font-size: 15px;}
}



/* scroll animation */

.scroll_fade {
    opacity : 0;
    transform : translate(0, 45px);
    transition : all 2000ms;
}
.scroll_fade.effect-scroll {
    opacity : 1;
    transform : translate(0, 0);
}




.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}