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

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

.bx-wrapper .bx-controls-direction a {
background: none;
background-color: #000;
width: 40px;
height: 40px;
}
.bx-wrapper .bx-prev {
left: 0;
}
.bx-wrapper .bx-next {
right: 0;
}
.bx-wrapper .bx-controls-direction a::before{
content: "";
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
transform: rotate(45deg);
}
.bx-wrapper .bx-prev::before {
left: 15px;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
}
.bx-wrapper .bx-next::before {
right: 15px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
background-color: #000;
}


#introduction{
}
#introduction .photo{
margin-bottom: 20px;
}
#introduction .text .logo{
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: solid 3px #000;
}
#introduction .text .logo img{
height: 70px;
}
#introduction .text h3{
font-size: 6vw;
margin-bottom: 10px;
}
#introduction .text .price{
margin-top: 10px;
font-size: 5vw;
}
#introduction .text .price span{
font-size: 8vw;
letter-spacing:0.1rem;
}


#appearance .l_common_title + p{
margin-bottom: 20px;
}
#appearance .bxslider li img{
aspect-ratio: 3/2;
object-fit: contain;
}


#interior{
background-color: #f4f4f4;
padding: 60px 0;
}
#interior #interior_pager{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0;
}
#interior #interior_pager p{
width: 49%;
}
#interior #interior_pager p a{
display: block;
text-decoration: none;
text-align: center;
font-weight: bold;
margin-top: 4%;
padding: 10px 0;
font-size: 3vw;
border: solid 3px #000;
transform: skewX(-5deg);
}
#interior #interior_pager p a.active{
background-color: #000;
color: #fff;
}
#interior .bx-wrapper {
background-color: transparent;
}
#interior_bxslider li{
margin-top: 20px;
}
#interior_bxslider li:first-child{
margin-top: 0px;
}
#interior_bxslider li .photo{
margin-bottom: 10px;
}


#plan .img{
text-align: center;
position: relative;
margin-top: 20px;
}
#plan .img p{
background-color: #ffce00;
color: #000;
width: 30vw;
height: 30vw;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.koti #plan .img p{
bottom: 0;
right: 0;
}
.ruutu #plan .img p{
bottom: 0;
left: 0;
}
.polku #plan .img p{
top: -10vw;
right: 0;
}
.perhe #plan .img p{
bottom: 0;
left: 0;
}
#plan .img p span{
display: block;
text-align: center;
font-size: 3vw;
line-height: 1.4;;
font-weight: bold;
}

.page_menu ul{
display: flex;
flex-wrap: wrap;
}
.page_menu ul li{
width: 48%;
text-align: center;
margin-top: 30px;
}
.page_menu ul li a{
display: block;
text-decoration: none;
}
.page_menu ul li a img{
height: 40px;
}


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

#introduction{
display: flex;
align-items: center;
}
#introduction .text{
flex: 1;
margin-left: 40px;
}
#introduction .text h3{
font-size: 30px;
}
#introduction .text .price{
font-size: 20px;
}
#introduction .text .price span{
font-size: 40px;
}

#interior{
padding: 150px 0;
}
#interior #interior_pager{
margin: 40px 0;
}
#interior #interior_pager p{
width: 24%;
}
#interior #interior_pager p a{
margin-top: 0;
padding: 20px 0;
font-size: 16px;
}
#interior #interior_pager p a:hover{
color: #000;
}
#interior #interior_pager p a.active:hover{
color: #fff;
}
#interior_bxslider ul{
display: flex;
flex-wrap: wrap;
}
#interior_bxslider li{
width: 32%;
margin-left: 2%;
margin-top: 2%;
}
#interior_bxslider li:first-child{
margin-top: 2%;
}
#interior_bxslider li:nth-child(3n-2){
margin-left: 0;
}
#interior_bxslider li img{
aspect-ratio: 386 / 230;
object-fit: cover;
}


#plan .img{
margin-top: 40px;
}
#plan .img p{
width: 200px;
height: 200px;
}
#plan .img p span{
font-size: 21px;
}
.koti #plan .img p{
bottom: inherit;
top: 0;
}
.ruutu #plan .img p{
bottom: inherit;
left: inherit;
top: 0;
right: 130px;
}
.polku #plan .img p{
top: 0;
}
.perhe #plan .img p{
}


.page_menu ul li{
width: 25%;
margin-top: 0px;
border-right: solid 1px #000;
}
.page_menu ul li:last-child{
border-right: none;
}
.page_menu ul li a{
padding: 10px 0;
}
.page_menu ul li a:hover{
transform: scale(1.1);
}




}