@import 'news.css';
@import 'about.css';
@import 'plan.css';

#fader {
    width: 100vw;
    margin: 0;
}

#fader .slick-slide {
    margin: 0;
}

#fader .slick-slide div,
#fader .slick-slide picture {
    margin: 0;
    height: auto;
    width:100vw;
}

#fader .slick-slide a {
    display:block;
    margin:0;
}
#fader .slick-slide img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#fader .slick-dots {
    bottom:-30px;
}

#fader .slick-dots li button {
    padding: 0;
}

#fader .slick-dots li button::before {
    font-size: 14px;
    color: var(--color-gray);
    opacity: 1;
}

#fader .slick-dots li.slick-active button::before {
    color: var(--color-pink);
}


#lead {
    margin-top:50px;
}


#villa article {
    background:var(--color-white);
    border-radius:var(--radius);
    padding:calc(var(--padding) * 2);
    box-shadow:var(--shadow3);
}

#consultation {
    padding-bottom:0;
}
#consultation .sakura-banner {
    border:solid 2px var(--color-pink);
    padding:calc(var(--padding) * 2);
    border-radius:var(--radius);
}
#consultation .sakura-banner > div {
    display: flex;
    flex-direction: column;
}
#consultation .sakura-banner h1 {
    font-size:1.4em;
    text-align:left;
}
#consultation .sakura-banner h1 strong {
    font-family:"Shippori Mincho", serif;
    font-size:1.9em;
}
#consultation .sakura-banner h1 + p {
    flex:1;
}
#consultation .sakura-banner .button {
    width:100%;
}
#consultation .merit {
    margin-top:var(--section-space);
}
#consultation .merit h2 {
    color:var(--color-pink);
}
#consultation .merit ol li {
    padding-top:40px;
}
#consultation .merit ol li > img {
    width:80px;
    position:absolute;
    top:-40px;
    left:calc(50% - 40px);
}
#consultation .merit ol h3 {
    font-size:1.4em;
    margin-top:var(--padding);
}


@media (max-width : 920px) {

}
@media (max-width : 720px) {
    #consultation .sakura-banner {
        padding:var(--padding);
        flex-direction:column;
		width:100%;
    }
}
@media (max-width : 520px) {
    #villa article {
        padding:var(--padding);
    }

    #consultation .merit ol li > img {
        top:-30px;
    }
    #consultation .merit ol h3 {
        text-align:center;
    }
}