@charset "UTF-8";
/* CSS Document */

#contents {
padding-top: 0px;
}

/* 中身-モバイルファースト======================================================================================================== */
#slider li{
position: relative;
height: 115vw;
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
display: block !important;
}
#slider li.slide01{
background-image: url("../images/main01@2x.jpg");
background-image: -webkit-image-set(url("../images/main01@2x.jpg") 1x, url("../images/main01.jpg") 2x);
}
#slider li.slide02{
background-image: url("../images/main02@2x.jpg");
background-image: -webkit-image-set(url("../images/main02@2x.jpg") 1x, url("../images/main02.jpg") 2x);
}
#slider li.slide03{
background-image: url("../images/main03@2x.jpg");
background-image: -webkit-image-set(url("../images/main03@2x.jpg") 1x, url("../images/main03.jpg") 2x);
}
#slider li.slide04{
background-image: url("../images/main04@2x.jpg");
background-image: -webkit-image-set(url("../images/main04@2x.jpg") 1x, url("../images/main04.jpg") 2x);
}
#slider li.slide05{
background-image: url("../images/main05@2x.jpg");
background-image: -webkit-image-set(url("../images/main05@2x.jpg") 1x, url("../images/main05.jpg") 2x);
}
#slider li.slide06{
background-image: url("../images/main06@2x.jpg");
background-image: -webkit-image-set(url("../images/main06@2x.jpg") 1x, url("../images/main06.jpg") 2x);
}
#slider li.slide07{
background-image: url("../images/main07@2x.jpg");
background-image: -webkit-image-set(url("../images/main07@2x.jpg") 1x, url("../images/main07.jpg") 2x);
}
#slider li.slide08{
background-image: url("../images/main08@2x.jpg");
background-image: -webkit-image-set(url("../images/main08@2x.jpg") 1x, url("../images/main08.jpg") 2x);
}
#slider li.slide09{
background-image: url("../images/main09@2x.jpg");
background-image: -webkit-image-set(url("../images/main09@2x.jpg") 1x, url("../images/main09.jpg") 2x);
}
#slider li.start_first{
animation-name: mainsliderAnime;
animation-duration: 5s;
animation-timing-function: linear;
}
#slider li.start{
animation-name: mainsliderAnime,mainsliderMask;
animation-duration: 5s,5s;
animation-timing-function: linear,linear;
}
@keyframes mainsliderMask{
  0% {
      clip-path: inset(0 0 0 100%);
  }
  
  10%{
      clip-path: inset(0 0 0 0);
  }
}
@keyframes mainsliderAnime{
  0% {
      background-position: left center;
  }
  100% {
      background-position: right center;
  }
}

#slider li .copy{
white-space: nowrap;
font-size: 6vw;
letter-spacing: 0.25em;
text-shadow: 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
}
#slider li span{
display: none;
}
#slider .bx-wrapper {
margin-bottom: 0;
}
#slider .bx-wrapper .bx-pager{
bottom: 10px;
z-index: 500;
}
#slider .bx-wrapper .bx-pager.bx-default-pager a{
background: #fff;
}
#slider .bx-wrapper .bx-pager.bx-default-pager a:hover,
#slider .bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #3ba042;
}


#inner_global_menu ul{
display: flex;
border-top: solid 1px #ddd;
border-bottom: solid 1px #ddd;
}
#inner_global_menu li{
width: 20%;
border-left: solid 1px #ddd;
}
#inner_global_menu li:first-child{
border-left: none;
}
#inner_global_menu li a{
display: block;
text-decoration: none;
font-size: 3vw;
line-height: 1.2;
padding: 10px 0;
}
#inner_global_menu li a span{
display: block;
font-size: 1.5vw;
font-family: sans-serif;
margin-top: 8px;
}


#anniversary{
text-align: center;
}
#anniversary .banner a{
display: block;
width: 100%;
overflow: hidden;
}
#anniversary .banner a img{
width: 200%;
max-width: inherit;
margin-left: -50%;
}
#anniversary .text h2{
font-size: 6vw;
line-height: 1.4;
margin: 10px 0;
}


#big_menu section{
border-top: solid 5px #fff;
}
#big_menu section:first-child{
border-top: none;
}
#big_menu section a{
display: block;
text-decoration: none;
color: #fff;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
}
#big_menu section#order a{
background-image: url("../images/order_bg.jpg");
background-image: -webkit-image-set(url("../images/order_bg.jpg") 1x, url("../images/order_bg@2x.jpg") 2x);
}
#big_menu section#bunjyo a{
background-image: url("../images/bunjyo_bg.jpg");
background-image: -webkit-image-set(url("../images/bunjyo_bg.jpg") 1x, url("../images/bunjyo_bg@2x.jpg") 2x);
}
#big_menu section#renovation a{
background-image: url("../images/renovation_bg@2x.jpg");
background-image: -webkit-image-set(url("../images/renovation_bg.jpg") 1x, url("../images/renovation_bg@2x.jpg") 2x);
}
#big_menu section a .num{
position: absolute;
bottom: 5vw;
font-size: 12vw;
line-height: 1;
}
#big_menu section:nth-child(odd) a .num{ right: 5vw; }
#big_menu section:nth-child(even) a .num{ left: 5vw; }
#big_menu section a .text{
}
#big_menu section a .text::after{
content: "";
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
position: absolute;
top: 0;
z-index: 1;
}
#big_menu section:nth-child(odd) a .text::after{ left: 0; }
#big_menu section:nth-child(even) a .text::after{ right: 0; }
#big_menu section.moving a .text::after{
animation-name: bigMenuMoving;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
@keyframes bigMenuMoving{
  from {
    width: 100%;
  }
  to {
    width: 60%;
  }
}

#big_menu section a .text .inner{
width: 60%;
padding: 10vw 5vw;
position: relative;
z-index: 10;
text-align: left;
}
#big_menu section:nth-child(even) a .text .inner{
text-align: right;
margin: 0 0 0 auto;
}
#big_menu section a .text dt{
margin-bottom: 10px;
}
#big_menu section a .text dt em{
font-size: 4.5vw;
}
#big_menu section a .text dt h2{
}
#big_menu section a .text dd p{
font-size: 10px;
margin-bottom: 10px;
text-align: left;
}
#big_menu section a .text dd .common_btn span{
font-size: 10px;
}
#big_menu section a .copy{
font-size: 4vw;
line-height: 1.3;
letter-spacing: .25em;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
margin: auto;
}
#big_menu section:nth-child(odd) a .copy{ right: 3vw; text-align: right; }
#big_menu section:nth-child(even) a .copy{ left: 3vw; text-align: left; }


#modelhouse{
}
#modelhouse .photo{
position: relative;
height: 70vw;
}
#modelhouse .photo .p01{
width: 70%;
position: absolute;
left: -5vw;
top: 0;
z-index: 10;
}
#modelhouse .photo .p02{
width: 50%;
position: absolute;
right: -5vw;
bottom: -10px;
z-index: 20;
}
#modelhouse .photo .p03{
width: 100%;
position: absolute;
left: -1vw;
top: 0;
padding: 20px;
z-index: 10;
}
#modelhouse .photo .p04{
width: 100%;
position: absolute;
left: -0.5vw;
top: 0;
padding: 20px;
z-index: 10;
}
#modelhouse .text{
background-color: #eee;
padding: 20px;
position: relative;
}
#modelhouse .text h2{
font-size: 5.5vw;
line-height: 1;
margin-bottom: 10px;
}
#modelhouse .text h2 > *{
display: inline-block;
vertical-align: middle;
}
#modelhouse .text h2 .logo{
width: 30vw;
}
#modelhouse .text h2 .logo img{
padding-top: 1vw;
display:block;
}
#modelhouse .text p{
font-size: 12px;
margin-bottom: 20px;
}
#modelhouse .text .bom{
background-color: #111;
color: #fff;
line-height: 1;
padding: 5px 10px;
position: absolute;
top: -10px;
right: -10px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
z-index: 50;
}

#topics h2{
font-size: 6vw;
letter-spacing: .25em;
text-align: center;
margin-bottom: 20px;
}
#topics #topics_inner{
height: 250px;
overflow: hidden;
}
#topics ul{
height: 250px;
overflow: auto;
}
#topics li{
padding-top: 20px;
padding-bottom: 20px;
border-top: solid 1px #eee;
}
#topics li:first-child{
padding-top: 0px;
border-top: none;
}
/*
#topics li .photo{
text-align: center;
margin-bottom: 10px;
}
#topics li .photo img{
max-height: 29vw;
}
*/
#topics li em{
font-weight: bold;
}
#topics li p{
font-size: 12px;
}


#other_menu section{
border-top: solid 5px #fff;
}
#other_menu section:first-child{
border-top: none;
}
#other_menu section a{
display: block;
text-decoration: none;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: #fff;
padding: 60px 0;
}
#other_menu #customer a{
background-image: url("../images/customer_bg.jpg");
background-image: -webkit-image-set(url("../images/customer_bg.jpg") 1x, url("../images/customer_bg@2x.jpg") 2x);
}
#other_menu #inquiry a{
background-image: url("../images/inquiry_bg.jpg");
background-image: -webkit-image-set(url("../images/inquiry_bg.jpg") 1x, url("../images/inquiry_bg@2x.jpg") 2x);
}
#other_menu #works a{
background-image: url("../images/works_bg.jpg");
background-image: -webkit-image-set(url("../images/works_bg.jpg") 1x, url("../images/works_bg@2x.jpg") 2x);
}
#other_menu #voice a{
background-image: url("../images/voice_bg.jpg");
background-image: -webkit-image-set(url("../images/voice_bg.jpg") 1x, url("../images/voice_bg@2x.jpg") 2x);
}
#other_menu a em{
font-size: 6vw;
letter-spacing: .25em;
margin-bottom: 10px;
}


#banner_slider{
}

#banar ul{display:block;}
#banar ul{width:100%;}
#banar li{width:100%;margin-bottom: 20px;}


/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#banar {width:80%;}
#banar ul{display: flex;}
#banar ul{width:100%;}
#banar li{width:100%;margin:10px;}

#slider li{
height: 53vw;
}
#slider li .copy{
font-size: 40px;
}


#inner_global_menu li a{
font-size: 20px;
padding: 30px 0;
}
#inner_global_menu li a:hover{
background-color: #f3f3f3;
color: #111;
}
#inner_global_menu li a span{
font-size: 10px;
}


#anniversary .banner a img{
width: 100%;
margin-left: 0;
}
#anniversary .text h2{
font-size: 26px;
margin: 20px 0;
}


#big_menu section a .num{
bottom: 40px;
font-size: 100px;
}
#big_menu section:nth-child(odd) a .num{ right: 50px; }
#big_menu section:nth-child(even) a .num{ left: 50px; }

@keyframes bigMenuMoving{
  from {
    width: 100%;
  }
  to {
    width: 500px;
  }
}
#big_menu section a .text{

}
#big_menu section a .text .inner{
width: 500px;
padding: 0 50px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
#big_menu section a .text dl{
display: block;
}
#big_menu section a .text dt{
}
#big_menu section a .text dt em{
font-size: 38px;
}
#big_menu section a .text dt h2{
font-size: 18px;
margin-bottom: 40px;
}
#big_menu section a .text dd p{
font-size: 16px;
margin-bottom: 20px;
}
#big_menu section a .text dd .common_btn span{
font-size: 12px;
}
#big_menu section a .copy{
font-size: 30px;
}
#big_menu section:nth-child(odd) a .copy{ right: 50px; }
#big_menu section:nth-child(even) a .copy{ left: 50px; }


#modelhouse{
padding-top: 50px;
background-position: center -60px;
background-size: auto;
}
#modelhouse .contents_size{
display: flex;
justify-content: space-between;
}
#modelhouse .photo{
width: 650px;
height: auto;
position: relative;
}
#modelhouse .photo .p01{
top: -50px;
left: 0;
}
#modelhouse .photo .p02{
width: auto;
right: -20px;
bottom: -50px;
}
#modelhouse .photo .p04{
width: auto;
right: -20px;
bottom: -50px;
}
#modelhouse .text{
width:1200px;
padding:20px;
}
#modelhouse .text h2{
font-size: 30px;
width: auto;
margin-bottom: 20px;
}
#modelhouse .text h2 .logo{
width: 160px;
}
#modelhouse .text h2 .logo img{
padding-top: 10px;
}
#modelhouse .text p{
font-size: 16px;
margin-top: 20px;
margin-bottom: 40px;
}
#modelhouse .text .common_btn{
text-align: left;
}
#modelhouse .text .bom{
padding: 10px 20px;
top: 10px;
right: 0px;
}


#topics h2{
font-size: 40px;
margin-bottom: 55px;
}
#topics #topics_inner{
height: 400px;
}
#topics ul{
height: 400px;
}
#topics li{
}
/*
#topics li .photo img{
max-width: 330px;
max-height: 220px;
}
*/
#topics li p{
font-size: 16px;
}


#other_menu {
display: flex;
flex-wrap: wrap;
}
#other_menu section{
width: 50%;
}
#other_menu .text{
padding-left: 20px;
}
#other_menu .text h2{
padding-left: 20px;
}
#other_menu #customer{
width: 100%;
}
#other_menu #inquiry{
border-right: solid 5px #fff;
}
#other_menu #works{
border-right: solid 5px #fff;
}
#other_menu section a{
padding: 150px 0;
}
#other_menu a em{
font-size: 40px;
margin-bottom: 20px;
}
#other_menu a h2{
font-size: 20px;
}








}