/*  リンク  */
a:link, a:visited, a:hover, a:active{
    color:black;
    text-decoration: none;
}

/* pタグ */
p{
    font-size:1.3vw;
}

/*  写真  */
img{
    width:100%;
}

/*  ナビゲーションバー  */
#pink{
    color:#ff69b4;
}
#orange{
    color:#ffa500;
}
#yellow{
    color:#00fa9a;
}
#green{
    color:#008000;
}
#light-blue{
    color:#add8e6;
}
#blue{
    color:#0000ff;
}
#purple{
    color:#4b0082;
}
#black{
    color:#000000;
}

/*  ナビゲーションバー */
#nav-fix{
    height: 85px;
}

.navbar-brand{
    font-weight: 600;
}

.nav-link{
    font-weight: 500;
}

#container{
    margin-top: 85px;
}

.nav-link:hover{
    background-color:#FFFFA7;
}

/*  ヘルスチェック  */
#health_check{
    background-color: #FFF9BC;
}


#health-btn {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 1vw 2vw;
    width: 20vw;
    color: #333;
    font-size: 1vw;
    font-weight: 700;
    background-image: linear-gradient(170deg, #659de6, #5abab8);
    border-radius: 50vh;
    transition: 0.3s;
}


#health-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 2vw;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-top: 3px solid #333333;
    border-right: 3px solid #333333;
}

#health-btn:hover {
    text-decoration: none;
    background-image: linear-gradient(-170deg, #659de6, #5abab8);
}

/*  サービス  */
#service{
    background: url(../images/back10.jpg) no-repeat center;
    background-size: cover;
}

.service-title{
    font-size:1.5vw;
}

.section-title{
    font-size: 3.2vw;
    color:#ff7ba0;
}

.section-sub{
    font-size: 1.2vw;
    font-weight: 600;
}


/*  新着情報  */
.gray{
    background-color:#f6f6f6;
}

.news-date{
    color:#ff7ba0;
    font-size:1.2vw;
}

.news-desc{
    font-size:1.2vw;
}

/*  ボタン  */
#news-btn{
    border:solid 2px black;
    padding:0.7vw 6vw 0.7vw 2vw;
    font-weight: 500;
    background: url(../images/arrow3.gif) center right no-repeat;
}

/*  ママファミリーのご案内  */
#guidance{
    background: url(../images/back8.gif) repeat center;
}

#shop-btn {
    border: solid 2px black;
    padding: 0.5vw;
    width:80%;
    font-weight: 500;
    margin-bottom:20px;
    background: url(../images/arrow3.gif) center right no-repeat;
    display:block;
}

#company-btn {
    border: solid 2px black;
    padding: 0.5vw;
    width: 80%;
    font-weight: 500;
    color:white;
    background: url(../images/arrow6.png) center right no-repeat darkcyan;
    display: block;
}

.section-title2 {
    font-size: 3.2vw;
    color: #ffffbc;
}

.section-title3{
    font-size: 2.6vw;
    color: #736357;
}

.section-title4{
    font-size: 1.9vw;
    color: #736357;
}

.section-sub2 {
    font-size: 1.2vw;
    font-weight: 600;
    color:white;
}

/*  高さを合わせる  */
.height{
    height:35vw;
}

#campaign{
    border-left: 8px solid #3497DA;
    font-weight: bold;
    color:#3497DA;
    font-size: 1.6vw;
}

#welcome {
    border-left: 8px solid #FF2D8D;
    font-weight: bold;
    color: #FF2D8D;
    font-size: 1.6vw;
}

#cuore-ricco {
    border-left: 8px solid #36ce64;
    font-weight: bold;
    color: #36ce64;
    font-size: 1.6vw;
}

.cards{
    height:20vw;
}

#campaign-card {
    background: #fff url(../images/back12.jpg) no-repeat bottom right;
    background-size: 40% 100%;
    position: relative;
}

#welcome-card {
    background: #fff url(../images/back13.jpg) no-repeat bottom right;
    background-size: 40% 100%;
    position: relative;
}

#cuore-ricco-card {
    background: #fff url(../images/back17.png) no-repeat bottom right;
    background-size: 40% 100%;
    position: relative;
}

.card-desc {
    width: 60%;
    font-size: 1.3vw;
}

#campaign-btn{
    background: #3497DA;
    color: #fff;
    text-align: center;
    position: absolute;
	bottom: 0;
    left:0;
    font-size:1vw;
}

#welcome-btn {
    background: #FF2D8D;
    color: #fff;
    text-align: center;
    position: absolute;
	bottom: 0;
    left:0;
    font-size: 1vw;
}

#cuore-ricco-btn {
    background: #36ce64;
    color: #fff;
    text-align: center;
    position: absolute;
	bottom: 0;
    left:0;
    font-size: 1vw;
}


/*  フッター  */
#footer{
    background-color: #FFFFA7;
    position:relative;
}

#logo{
    width:80px;
}

.icon{
    width:30px;
}

a.btn-outline-success:hover {
    color: white !important;
}

a.btn-outline-danger:hover {
    color: white !important;
}

a.btn-outline-primary:hover {
    color: white !important;
}

.btn {
    width: 200px;
}

#pagetop{
    width:70px;
    position:absolute;
    right:0;
    top:0;
}

/*  コピーライト  */
#copyright{
    background-color: #FFFF69;
}

#copy{
    font-size:1.5vw;
}

/*
    タブレットサイズ
*/
@media screen and (max-width: 992px) {
    #pagetop{
        width:40px;
        position:absolute;
        right:0;
        top:0;
    }
    /*  ナビゲーションバー  */
    #nav-container{
        background-color: #f8f9fa;
    }
    .nav-item{
        border-right:none!important;
        border-left:none!important;
    }

    /*  ヘルスチェックボタン  */
    #health-btn {
        padding: 2vw 4vw;
        width: 40vw;
        font-size: 2vw;
    }


    #health-btn::after {
        right: 3.0vw;
        width: 10px;
        height: 10px;
    }

    /*  サービス  */

    .service-title{
        font-size:2.5vw;
    }

    .section-title{
        font-size: 5vw;
        color:#ff7ba0;
    }

    .section-sub{
        font-size: 3vw;
        font-weight: 600;
    }

    /*  新着情報  */
    .news-date{
        font-size:2vw;
    }
    
    .news-desc{
        font-size:2vw;
    }

    /*  高さを合わせる  */
    .height{
        height:50vw;
    }

    .cards{
        height:30vw;
    }

    .card-desc{
        font-size: 2vw;
    }

    .section-title2{
        font-size: 5vw;
    }

    .section-sub2{
        font-size: 3vw;
        font-weight: 600;
    }

    /*  コピーライト  */
    #copy{
        font-size:2.5vw;
    }
}

/*
    スマホサイズ
*/
@media screen and (max-width: 767px) {
    /* pタグ */
    p{
        font-size:4vw;
    }

    /*  ナビゲーションバー */
    #nav-fix{
        height: 70px;
    }

    #container{
        margin-top: 70px;
    }

    /*  ヘルスチェックボタン  */
    #health-btn {
        padding: 3vw 6vw;
        width: 60vw;
        font-size: 3vw;
    }


    #health-btn::after {
        right: 5vw;
        width: 10px;
        height: 10px;
    }

    /*  サービス  */
    .service-title{
        font-size:5vw;
    }

    .section-title{
        font-size: 7vw;
    }

    .section-sub{
        font-size: 2vw;
    }

    .img{
        width:60%;
    }

    /*  新着情報  */
    .news-date{
        font-size:4vw;
    }
    
    .news-desc{
        font-size:4vw;
    }

    /*  ボタン  */
    #news-btn{
        padding:1vw 15vw 1vw 5vw;
    }

    /*  ママファミリーのご案内  */
    #shop-btn {
        padding: 2vw 10vw;
    }

    #company-btn {
        padding: 2vw 10vw;
    }

    .section-title2{
        font-size: 7vw;
    }

    .section-sub2{
        font-size: 2vw;
    }

    /*  高さを合わせる  */
    .height{
        height:auto;
    }

    .cards{
        height:auto;
    }

    .card-desc{
        font-size: 2vw;
    }

    #campaign-btn{
        font-size:3vw;
    }

    #welcome-btn {
        font-size: 3vw;
    }

    #cuore-ricco-btn {
        font-size: 3vw;
    }

    /*  フッター  */
    #logo{
        width:60px;
    }

    /*  コピーライト  */
    #copy{
        font-size:3.8vw;
    }
}