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

body{
padding-top: 0;
}
#container {
padding-top: 0px;
}
#contents {
padding-top: 0px;
}

/* 中身-モバイルファースト======================================================================================================== */

.common_title{
margin-bottom: 40px;
}
.common_title h2{
font-size: 30px;
font-weight: bold;
}
.common_title em{
font-size: 16px;
}


#main_slider{
position: relative;
}
#main_slider h2{
font-size: 10vw;
white-space: nowrap;
color: #fff;
text-align: left;
text-shadow: 0px 0px 10px #000;
padding-left: .5em;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
z-index: 100;
}
#main_slider li{
height: 90vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
/*
will-change: transform;
animation: anime_zoom 6s linear;
*/
}
/*
@keyframes anime_zoom {
    0% {
		transform: scale(1.1, 1.1);
    }
    100% {
        transform: scale(1, 1);
    }
}
*/
#main_slider li.slide01{
background-image: url("../images/main01.jpg");
background-image: -webkit-image-set(url("../images/main01.jpg") 1x, url("../images/main01@2x.jpg") 2x);
}
#main_slider li.slide02{
background-image: url("../images/main02.jpg");
background-image: -webkit-image-set(url("../images/main02.jpg") 1x, url("../images/main02@2x.jpg") 2x);
}
#main_slider li.slide03{
background-image: url("../images/main03.jpg");
background-image: -webkit-image-set(url("../images/main03.jpg") 1x, url("../images/main03@2x.jpg") 2x);
}
#main_slider li.slide04{
background-image: url("../images/main04.jpg");
background-image: -webkit-image-set(url("../images/main04.jpg") 1x, url("../images/main04@2x.jpg") 2x);
}
#main_slider li.slide05{
background-image: url("../images/main05.jpg");
background-image: -webkit-image-set(url("../images/main05.jpg") 1x, url("../images/main05@2x.jpg") 2x);
}
#main_slider li.slide06{
background-image: url("../images/main06.jpg");
background-image: -webkit-image-set(url("../images/main06.jpg") 1x, url("../images/main06@2x.jpg") 2x);
}
#main_slider li.slide07{
background-image: url("../images/main07.jpg");
background-image: -webkit-image-set(url("../images/main07.jpg") 1x, url("../images/main07@2x.jpg") 2x);
}
#main_slider li.slide08{
background-image: url("../images/main08.jpg");
background-image: -webkit-image-set(url("../images/main08.jpg") 1x, url("../images/main08@2x.jpg") 2x);
}
#main_slider li.slide09{
background-image: url("../images/main09.jpg");
background-image: -webkit-image-set(url("../images/main09.jpg") 1x, url("../images/main09@2x.jpg") 2x);
}
#main_slider li.slide10{
background-image: url("../images/main10.jpg");
background-image: -webkit-image-set(url("../images/main10.jpg") 1x, url("../images/main10@2x.jpg") 2x);
}
#main_slider li.slide11{
background-image: url("../images/main11.jpg");
background-image: -webkit-image-set(url("../images/main11.jpg") 1x, url("../images/main11@2x.jpg") 2x);
}
#main_slider li span{
display: none;
}

#main_slider .banner_pickup{
height: 25vw;
position: absolute;
left: 4vw;
/* bottom: 4vw; */
bottom: 24vw;
z-index: 150;
}
#main_slider .banner_pickup2{
height: 25vw;
position: absolute;
left: 30vw;
/* bottom: 4vw; */
bottom: 24vw;
z-index: 150;
}
#main_slider .banner_pickup img,
#main_slider .banner_pickup2 img{
height: 100%;
max-width: 100%;
}


#top_copy h2 .sp_only{
text-align: center;
font-size: 5vw;
letter-spacing: 0.4em;
margin-bottom: 4vw;
}
#top_copy p{
border-top: solid 1px #111;
padding-top: 4vw;
}


#newsletter{
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
padding: 60px 0;
}
#newsletter .inner li{
margin-top: 1.5em;
}
#newsletter .inner li:first-child{
margin-top: 0;
}
#newsletter .inner .day > *{
display: inline-block;
vertical-align: middle;
}
#newsletter .inner .day .icon{
background-color: #ddd;
line-height: 1;
padding: 4px 0;
margin-left: 1em;
min-width: 80px;
text-align: center;
}


#works{
background-color: #eee;
padding: 60px 4vw;
}
#works .inner{
}
#works .inner li{
margin-top: 30px;
}

/* 20240924 施工事例の強化について */
/* #works .inner li:first-child{
margin-top: 0px;
} */
/* //20240924 施工事例の強化について */

#works .inner li a{
text-decoration: none;
}
#works .inner li .photo img{
width: 100%;
aspect-ratio: 3 / 2;
object-fit: contain;
}
#works .inner li h3{
margin-top: 10px;
}


#lifestyle #lifestyle_slider{
padding: 0 4vw;
}
#lifestyle #lifestyle_slider li a{
display: block;
text-decoration: none;
}
#lifestyle #lifestyle_slider li dl{
text-align: left;
}
#lifestyle #lifestyle_slider li dt span{
font-size: 2.5vw;
}
#lifestyle #lifestyle_slider li dd{
font-size: 2.5vw;
}
#lifestyle .bx-wrapper .bx-controls-direction a {
top: 28vw;
margin: 0;
}

#lifestyle h3{
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
#lifestyle .search > div{
margin-top: 40px;
}
#lifestyle .icon_search ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#lifestyle .icon_search li{
width: 32%;
margin-top: 2%;
}
#lifestyle .icon_search li a{
display: block;
text-decoration: none;
text-align: center;
background-color: #111;
color: #fff;
padding: 20px 0;
}
#lifestyle .icon_search li .icon{
display: flex;
align-items: center;
justify-content: center;
width: 10vw;
height: 10vw;
margin: 0 auto 5px;
}
#lifestyle .icon_search li .icon img{
max-width: 10vw;
max-height: 10vw;
}
#lifestyle .icon_search li p{
font-size: 2.6vw;
}

#lifestyle .freeword_search .word{
display: flex;
}
#lifestyle .freeword_search .word input{
background-image: url("../images/icon-search.svg");
background-repeat: no-repeat;
background-position: 10px center;
background-size: auto 14px;
flex: 1;
font-size: 14px;
background-color: #eee;
border: none;
border-radius: 0px;
padding: 15px 15px 15px 30px;
}
#lifestyle .freeword_search .word button{
-webkit-appearance: none;
text-decoration: none;
border: none;
display: block;
width: 25%;
cursor: pointer;
margin: 0;
padding: 0;
background-color: #111;
color: #fff;
font-size: 14px;
font-family: 'Noto Serif JP', "小塚明朝 Pro R", "小塚明朝 Pro B", serif;
}
#lifestyle .freeword_search .count{
margin-top: 10px;
margin-bottom: 20px;
}
#lifestyle .freeword_search dl{
margin-top: 20px;
}
#lifestyle .freeword_search .count + dl{
margin-top: 0px;
}
#lifestyle .freeword_search dt{
margin-left: 1em;
position: relative;
}
#lifestyle .freeword_search dt::before{
content:"";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 4px;
border-color: transparent transparent transparent #111111;
position: absolute;
left: -0.8em;
top: 0;
bottom: 0;
margin: auto 0;
}
#lifestyle .freeword_search dd{
display: inline-block;
margin-left: 1em;
font-size: 12px;
}


#modelhouse_kuki a{
display: block;
text-decoration: none;
}
#modelhouse_kuki .text{
background-color: #eee;
padding: 8vw 4vw;
}
#modelhouse_kuki .text .common_title{
margin-bottom: 20px;
}
#modelhouse_kuki .text strong{
display: block;
margin: -10px 0 0;
}
#modelhouse_kuki .text h3{
font-size: 20px;
margin-bottom: 20px;
}
#modelhouse_kuki .text p{
text-align: left;
}


#technology ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#technology li{
width: 48%;
margin-top: 4%;
}
#technology li:nth-child(-n+2){
margin-top: 0;
}
#technology li a{
display: block;
text-decoration: none;
}
#technology li h3{
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: solid 1px #111;
}
#technology li p{
font-size: 12px;
}

#voice{
padding: 0 4vw;
}
#voice .inner{
}
#voice .inner li{
margin-top: 30px;
}
#voice .inner li:first-child{
margin-top: 0px;
}
#voice .inner li a{
text-decoration: none;
}
#voice .inner li .photo img{
width: 100%;
/* aspect-ratio: 3 / 2; */
/* object-fit: contain; */
}
#voice .inner li h3{
margin-top: 10px;
}



#supports{
background-color: #eee;
padding: 60px 0;
}
#supports ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#supports li{
margin: 4%;
}
#supports li:nth-child(-n+2){
margin-top: 0;
}
#supports li a{
display: block;
text-decoration: none;
text-align: center;
}
#supports li .icon{
background-color: #111;
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border: double 3px #fff;
margin-bottom: 5px;
}
#supports li .icon img{
max-width: 60px;
max-height: 60px;
}


#showroom article{
text-align: center;
margin-top: 40px;
}
#showroom article:first-child{
margin-top: 0px;
}
#showroom article a{
display: block;
text-decoration: none;
}
#showroom article h3{
font-size: 20px;
}
#showroom article em{
display: block;
font-size: 16px;
margin-bottom: 10px;
}
#showroom article .photo{
margin-bottom: 20px;
}


#event{
/*
background-color: #eee;
padding: 60px 0;
*/
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
padding: 60px 0;
}
#event li{
padding: 15px 0;
border-top: solid 1px #CCC;
}
#event li:first-child{
padding: 0 0 15px;
border-top: none;
}
#event li a{
text-decoration: none;
display: table;
width: 100%;
}
#event li a .photo{
display: table-cell;
text-align: center;
vertical-align: top;
width: 80px;
}
#event li a .photo img{
max-width: 80px;
max-height: 60px;
}
#event li a .text{
display: table-cell;
vertical-align: top;
padding: 0 0 0 10px;
}
#event li a .text .data{
display: none;
}
#event li a .text .schedule{
display: block;
font-weight: bold;
}
#event li a .text .type{
display: inline-block;
background-color: #ddd;
line-height: 1;
padding: 4px;
min-width: 80px;
text-align: center;
}


#under_contact li{
margin-top: 20px;
}
#under_contact li:first-child{
margin-top: 0px;
}
#under_contact li a{
display: block;
text-decoration: none;
background-color: #111;
color: #fff;
text-align: center;
padding: 20px 0;
}
#under_contact li .icon{
display: inline-block;
vertical-align: middle;
width: 30px;
text-align: center;
margin-right: 10px;
}
#under_contact li .icon img{
max-width: 30px;
max-height: 30px;
}
#under_contact li span{
display: inline-block;
vertical-align: middle;
font-size: 16px;
font-weight: bold;
}


#apa_man_works .title{
background-color: red;
background-image: url(../images/apaman_img.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: 200%;
aspect-ratio: 1000/371;
display: grid;
place-items: center;
}
#apa_man_works .title h2{
color: #fff;
font-size: 6vw;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}
#apa_man_works li{
margin-top: 3vw;
border: solid 1px #eee;
}
#apa_man_works li h3{
text-align: center;
font-size: 18px;
font-weight: bold;
padding: 2vw;
background-color: #eee;
}
#apa_man_works li p{
padding: 5vw;
}


/* かぶるので調整 */
.pagetop{
right: 10px;
bottom: 160px;
/* z-index: 10000; */
}

#fixed_banner{
width: 100%;
position: fixed;
right: 0px;
bottom: 10vh;
z-index: 10000;
}
#fixed_banner a{
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
background-color: #e6f9ee;
padding: 10px;
}
#fixed_banner .logo{
margin-right: 5px;
}
#fixed_banner .logo img:first-child{
width: 60px;
}
#fixed_banner .logo img:nth-child(2){
display: none;
}
#fixed_banner .title{
}
#fixed_banner .title em{
display: block;
margin-bottom: 10px;
}
#fixed_banner .title em img{
width: 240px;
}
#fixed_banner .title p{
display: inline-block;
font-family: sans-serif;
font-size: 12px;
display: inline-block;
position: relative;
padding: .4em .8em;
margin-right: 10px;
border-radius: 20px;
background-color: #79e278;
}
#fixed_banner .title p::before {
content: '';
position: absolute;
top: -15px;
width: 20px;
height: 30px;
right: -10px;
border-radius: 0 0 15px 0;
box-shadow: 3px -15px 0 -7px #79e278 inset;
}
#fixed_banner .btn{
display: block;
font-family: sans-serif;
font-size: 10px;
background-color: #ffdd1f;
width: 60px;
height: 60px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
transform-origin: right bottom;
position: absolute;
right: -42.4264068712px;
bottom: 0;
clip-path: polygon(0 0,100% 0,50% 50%);
}
#fixed_banner .close{
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
z-index: 10001;
background-color: rgba(0, 0, 0, .2);
}
#fixed_banner .close::before,
#fixed_banner .close::after{
content: "";
display: block;
width: 15px;
height: 1px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin: auto;
z-index: 10001;
}
#fixed_banner .close::before{
transform: translateY(-50%) translateX(-50%) rotate(-45deg);
-webkit-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
}
#fixed_banner .close::after{
transform: translateY(-50%) translateX(-50%) rotate(45deg);
-webkit-transform: translateY(-50%) translateX(-50%) rotate(45deg);
}
#fixed_banner .close span{
display: none;
}

/* スマホのみ======================================================================================================== */
@media screen and (max-width: 750px){
#top_copy h1 .sp_only{
display: block;
}



}



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

#main_slider h2{
font-size: 3vw;
letter-spacing: .25em;
padding-left: 0;
}
#main_slider li{
height: 100vh;
}

#main_slider .banner_pickup{
height: 160px;
left: 2vw;
bottom: 2vw;
}
#main_slider .banner_pickup2{
height: 160px;
left: calc(4vw + 160px);
bottom: 2vw;
}



#top_copy h2{
width: 800px;
margin: 0 auto;
}
#top_copy h2 .pc_only{
display: block;
}
#top_copy h2 img{
width: 100%;
height: auto;
}
#top_copy p{
width: 600px;
margin: 50px auto 0;
padding: 40px 0 0;
}


#newsletter .contents_size{
display: flex;
justify-content: center;
}
#newsletter .common_title{
margin-bottom: 0;
width: 25%;
}
#newsletter .inner{
width: 60%;
}
#newsletter .inner li{
display: flex;
}
#newsletter .inner li p{
flex: 1;
margin-left: 1em;
}


#works{
padding: 100px 1%;
}
#works .inner ul{
display: flex;
justify-content: space-between;
padding: 0 120px;
}
#works .inner li{
width: 33%;
margin-top: 0px;
}
#works .inner li h3{
margin-top: 20px;
font-size: 16px;
}

#lifestyle #lifestyle_slider{
padding: 0 120px;
}
#lifestyle #lifestyle_slider li dt{
font-size: 20px;
}
#lifestyle #lifestyle_slider li dt span{
font-size: 14px;
}
#lifestyle #lifestyle_slider li dd{
font-size: 14px;
}
#lifestyle .bx-wrapper .bx-controls-direction a {
top: 13.5vw;
margin: 0;
}
#lifestyle .bx-wrapper .bx-controls-direction a.bx-prev{
left: 0;
}
#lifestyle .bx-wrapper .bx-controls-direction a.bx-next{
right: 0;
}

#lifestyle .search{
display: flex;
margin-top: 60px;
}
#lifestyle .search > div{
margin-top: 0px;
width: 50%;
}
#lifestyle .search > div:nth-child(odd){
padding-right: 4%;
border-right: solid 1px #111;
}
#lifestyle .search > div:nth-child(even){
padding-left: 4%;
border-left: solid 1px #111;
}
#lifestyle .icon_search li:nth-child(-n+3){
margin-top: 0;
}
#lifestyle .icon_search li .icon{
width: 3vw;
height: 3vw;
}
#lifestyle .icon_search li .icon img{
max-width: 3vw;
max-height: 3vw;
}
#lifestyle .icon_search li p{
font-size: .8vw;
}

#lifestyle .freeword_search .word input{
padding: 20px 20px 20px 30px;
}
#lifestyle .freeword_search .word button{
font-size: 16px;
transition: all 0.2s ease;
}
#lifestyle .freeword_search .word button:hover{
opacity: .8;
}
#lifestyle .freeword_search .count{
margin-top: 20px;
margin-bottom: 40px;
font-size: 16px;
}
#lifestyle .freeword_search dt{
font-size: 16px;
}
#lifestyle .freeword_search dd{
font-size: 14px;
}


#modelhouse_kuki a{
display: flex;
flex-direction: row-reverse;
}
#modelhouse_kuki .photo{
flex: 1;
background-image: url("../images/modelhouse_kuki.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#modelhouse_kuki .photo img{
display: none;
}
#modelhouse_kuki .text{
width: 35%;
padding: 8vw 0;
}
#modelhouse_kuki .common_title h2{
font-size: 40px;
}
#modelhouse_kuki .text h3{
font-size: 20px;
/*margin-top: 20px;*/
}
#modelhouse_kuki .text p{
font-size: 16px;
display: inline-block;
}


#technology li{
width: 23%;
margin-top: 0;
}
#technology li h3{
padding-bottom: 20px;
margin-bottom: 20px;
font-size: 20px;
}
#technology li p{
font-size: 14px;
}


#voice{
padding: 0 1%;
}
#voice .inner ul{
display: flex;
justify-content: space-between;
padding: 0 120px;
}
#voice .inner li{
width: 33%;
margin-top: 0px;
}
#voice .inner li h3{
margin-top: 20px;
font-size: 16px;
}

#supports{
padding: 100px 0;
}
#supports ul{
width: 850px;
margin: 0 auto;
}
#supports li{
margin: 25px;
}
#supports li:nth-child(-n+5){
margin-top: 0;
}


#showroom .contents_size{
display: flex;
justify-content: space-between;
}
#showroom article{
margin-top: 0px;
width: 46%;
}
#showroom article h3{
font-size: 24px;
}
#showroom article em{
margin-bottom: 40px;
}
#showroom article .photo{
margin-bottom: 40px;
}


#event{
padding: 100px 0;
}
#event ul{
display: flex;
justify-content: center;
height: auto;
margin-bottom: 40px;
}
#event li{
width: 24%;
max-width: 400px;
padding: 0px;
margin: 0 25px;
border-top: none;
}
#event li a{
display: block;
}
#event li a .photo{
width: 100%;
background-color: #FFF;
display: block;
text-align: center;
margin: 0 0 10px;
aspect-ratio: 3 / 2;
}
#event li a .photo img{
max-width: 100%;
max-height: inherit;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: contain;
}
#event li a .text{
display: block;
padding: 0px;
}
#event li a .text .data{
}
#event li a .text .schedule{
font-weight: bold;
}
#event .list_btn a{
width: 200px;
}
#event .list_btn a:hover{
color: #FFF;
background-color: #111;
}


#banner_soccer {
text-align: center;
}


#apa_man_works .title{
background-size: 100%;
aspect-ratio: 2000/371;
margin-bottom: 2vw;
}
#apa_man_works .title h2{
font-size: 2.1vw;
}
#apa_man_works ul{
display: flex;
justify-content: center;
}
#apa_man_works li{
width: 27%;
margin: 0 .3vw;
display: flex;
flex-direction: column;
align-items: center;
}
#apa_man_works li h3{
width: 100%;
font-size: 1.2vw;
padding: .5vw;
}
#apa_man_works li p{
font-size: 1vw;
padding: 1.2vw 0;
}
#apa_man_works .common_btn a{
width: 27%;
}


#under_contact ul{
display: flex;
justify-content: center;
}
#under_contact li{
margin: 0 15px;
}
#under_contact li a{
width: 300px;
padding: 30px 0;
}
#under_contact li span{
font-size: 20px;
}

.pagetop{
right: 30px;
bottom: 30px;
}

#fixed_banner{
width: auto;
right: 10px;
bottom: 100px;
}
#fixed_banner a{
display: block;
padding: 10px;
}
#fixed_banner .logo{
margin-right: 0;
margin-bottom: 5px;
}
#fixed_banner .logo img{
display: inline-block;
vertical-align: middle;
}
#fixed_banner .logo img:first-child{
width: 20px;
}
#fixed_banner .logo img:nth-child(2){
width: 140px;
display: inline-block;
}
#fixed_banner .title em{
margin-bottom: 10px;
}
#fixed_banner .title em img{
width: 240px;
}
#fixed_banner .title p{
font-size: 10px;
}


}

/*--20240624 変更 リンクの改善--*/
#modelhouse_kuki .opct{
  display: block;
  text-decoration: none;
}
@media print, screen and (min-width: 751px) {
  #modelhouse_kuki a{
    display: block;
  }
  #modelhouse_kuki .opct{
    display: flex;
    flex-direction: row-reverse;
  }
}

/* 20240924 追加 施工事例の強化について */
#works .inner ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#works .inner li {
  width: 48%;
  margin-top: 4%;
}
@media print,
screen and (min-width: 751px) {
  #works .inner li {
      width: 24.25%;
      margin-top: 0px;
      margin-bottom: 5%;
  }
}

/* 20241126 選ばれる理由について */
.reason_container {
  display: flex;
  padding: 0 40px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.reason_card {
  width: 30%;
  margin-bottom: 50px;
}

.reason_card__title {
  padding-bottom: 1em;
  text-align: center;
  color: #00489D;
  font-weight: bold;
  font-size: 1.4rem;
}

.reason_card__content {
  text-align: left;
  width: 100%;
  margin: auto;
}

@media screen and (max-width: 750px) {
  .reason_container {
      padding: 0px 45px;
      flex-direction: column;
  }

  .reason_card {
      width: 100%;
      margin-bottom: 20px;
  }

  .reason_card__content {
      width: 100%;
      padding-left: 5px;
  }
}