@charset "utf-8";
@import url("./base-style.css");

/* ------------------------------
スライダー画像部分
------------------------------ */
/* スライダー */
.slider ul {
    position: relative;
}
.slider li {
    position: absolute;
    top: 0;
    height: 80vh;
    overflow-y: hidden;
    margin:  0 auto;
    z-index: -1;
    transition: all 1.5s ease-in-out;
    opacity: 0;
}
.slider img {
    object-fit: contain;
}
.slider .opacity_1 {
    opacity: 1;
}
/* スライダー画像のテキスト */
.slider p {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    background-color: #000;
    padding: 10px 0;
    opacity: 0.8;
}
/* 画面サイズ別の画像の高さ */
@media screen and (max-width: 700px) {
    .slider li {
        height: 40vh;
    } 
}
@media screen and (min-width: 701px) and (max-width: 950px) {
    .slider li {
        height: 60vh;
    } 
}


/* ------------------------------
main
------------------------------ */
main {
    padding-top: 85vh;
}

/* ------------------------------
section
------------------------------ */
/* セクション別の背景色 */
.section_block:nth-child(1) {
    background-color: #555;
}
.section_block:nth-child(2) {
    background-color: #333;
}

/* ------------------------------
画面サイズ別に画像の高さを変える
------------------------------ */
@media screen and (max-width: 700px) {
    main {
      padding-top: 45vh;
    } 
}
@media screen and (min-width: 701px) and (max-width: 950px) {
    main {
      padding-top: 65vh;
    } 
}

/* ------------------------------
Topics
------------------------------ */
.topic_box {
    background-color: #fff;
    height: 100%;
    padding: 20px;
}
.topics h4 {
    color: #555;
    line-height: 2;
    padding-top: 10px;
}
.topics p {
    color: #888;
    font-size: 90%;
    line-height: 1.5;
}
/* 背景画像の設定 */
.img_space {
    width: 100%;
    height: 150px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.topics li:nth-of-type(1) .img_space {
    background-image: url(../images/salon_1280.jpg);
}
.topics li:nth-of-type(2) .img_space {
    background-image: url(../images/lounge_1280.jpg);
}
.topics li:nth-of-type(3) .img_space {
    background-image: url(../images/blog_1280.jpg);
}

/* more リンク */
.more_link {
    margin-top: 50px;
}
.more_link a {
    width: 50%;
    text-align: center;
    background-image: linear-gradient(150deg, #ff0e0e, #770000);;
    padding: 20px 0;
    margin: 0 auto;
}

/* ------------------------------
小画面用
------------------------------ */
@media screen and (mAX-width: 900px) {

    /* ------------------------------
    Topics
    ------------------------------ */
    .topics li {
        margin-bottom: 10px;
    }
}

/* ------------------------------
大画面用
------------------------------ */
@media screen and (min-width: 901px) {

    /* スライダー画像 */ 
    .slider {
      max-width: 1200px;
      margin: 0 auto;
    }

    /* ------------------------------
    Topics
    ------------------------------ */
    .topics {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .topics li {
        width: 32%;
    }
    
    

}