@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

#recomend-babyroom .TsukuA{font-family: fot-tsukuardgothic-std, sans-serif; color: #333;}
#recomend-babyroom .Amatic{font-family: "amatic-sc", sans-serif;}

#recomend-babyroom .clear {clear: both;}
#recomend-babyroom .center{text-align: center;}
#recomend-babyroom .pc{display: block!important;}
#recomend-babyroom .mb{display: none!important;}
#recomend-babyroom .fwRegular{font-weight: 400;}
#recomend-babyroom .fwMedium{font-weight: 500;}
#recomend-babyroom .fwBold{font-weight: 700;}
#recomend-babyroom .t_white{color: #fff;}
#recomend-babyroom .t_blue{color: #4BA6DD;}
#recomend-babyroom .t_pink{color: #E5807A;}
#recomend-babyroom .bold {font-weight: 600;}
#recomend-babyroom .small{font-size: 8px;}
#recomend-babyroom .auto{margin: 0 auto;}
#recomend-babyroom .MT0{margin-top: 0;}
#recomend-babyroom .MT1{margin-top: 1em;}
#recomend-babyroom .MB0{margin-bottom: 0;}
#recomend-babyroom .MB2{margin-bottom: 2em;}


@media screen and (max-width: 768px) {
	#recomend-babyroom .pc{display: none!important;}
	#recomend-babyroom .mb{display: block!important;}
}

/*/////////////*/
#recomend-babyroom .intro{
    display: block;
    position: relative;
    background: url(../../assets/img/bcs/case-study/recomend/main-bg.png) no-repeat center top;
    background-size: cover;
    width: 100%;
    overflow: hidden;
}
#recomend-babyroom .intro .Maincath{
    font-size: 140%;
    padding: 3em 0 2.5em;
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#recomend-babyroom .intro .Maincath p{
    margin-bottom: 20px ;
    font-weight: 600;
    letter-spacing: 1.5px;
}
#recomend-babyroom .intro .Maincath span{
    font-size: 150%;
    display: inline-block;
    color: #fff;
    background: #f28e88;
    border-radius: 60px;
    padding: 10px 20px;
    margin-right: 20px;
}
#recomend-babyroom .intro .Maincath img{
    width: 77%;
}
@media screen and (max-width: 768px) {
    #recomend-babyroom .intro .MainTtl{
        margin-top: -2.8em;
    }
    #recomend-babyroom .intro .Maincath{
        width: 88%;
        padding: 3em 0 1em;
        display: block;
    }
    #recomend-babyroom .intro .Maincath .text{
        padding: 0 0 1em;
        font-size: 18px;
        text-align: center;
    }
    #recomend-babyroom .intro .Maincath p{
        display: inline;
    }
    #recomend-babyroom .intro .Maincath span{
        font-size: 24px;
        margin: 0.5em auto;
    }
    #recomend-babyroom .intro .Maincath img{
        width: 60%;
    }
}

/*/////////////*/
#recomend-babyroom h2.lineBlue{
    background: url(../../assets/img/bcs/case-study/recomend/line-blue.png) center bottom no-repeat;
    padding-bottom: 10px;
    text-align: center;
    font-size: 220%;
}
#recomend-babyroom h2.lineOrange{
    background: url(../../assets/img/bcs/case-study/recomend/line-orange.png) center bottom no-repeat;
    padding-bottom: 10px;
    text-align: center;
    font-size: 220%;
}
@media screen and (max-width: 768px) {
    #recomend-babyroom h2.lineBlue{
        background: url(../../assets/img/bcs/case-study/recomend/line-blue@2x.png) center bottom no-repeat;
        background-size: 50%;
        font-size: 24px;
    }
    #recomend-babyroom h2.lineOrange{
        background: url(../../assets/img/bcs/case-study/recomend/line-orange@2x.png) center bottom no-repeat;
        background-size: 50%;
        font-size: 24px;
    }
}

/*/////////////*/
#recomend-babyroom  p.text{
    text-align: center;
    padding: 1em 0;
    line-height: 3;
}
#recomend-babyroom  p.text img{
    margin: 0 8px;
}
#recomend-babyroom  ul{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3em auto 4em;
}
#recomend-babyroom  .link {
    width: 100%;
    display: flex;
    justify-content: center;
}
#recomend-babyroom .link a,
#recomend-babyroom  .link a:visited{
    text-align: center;
    display: block;
    margin: 0 auto;
    border: 3px solid #4BA6DD;
    border-radius: 50px;
    font-size: 150%;
    padding: 8px 5%;
    box-shadow: 2px 3px 6px #4b4b4b3d;
    font-weight: 500;
    color: #4BA6DD;
}
#recomend-babyroom  .link a:hover{
    color: #fff;
    background: #4BA6DD;
}

#recomend-babyroom .BGWhite{
    background: url(../../assets/img/bcs/case-study/recomend/wave01.svg) no-repeat top , url(../../assets/img/bcs/case-study/recomend/wave02.svg) no-repeat bottom;
    background-size: 100%;
    position: relative;
    z-index: 80;
    padding: 5em 0 7em;
    margin: -3em auto;
}
#recomend-babyroom .BGorange{
    background: linear-gradient(120deg, #FFE7DE, #FFF4F0);
    position: relative;
    z-index: 50;
    padding: 6em 0;
}

@media screen and (max-width: 768px) {
    #recomend-babyroom .BGWhite{
        margin: -1em auto;
        padding: 3em 0 5em;
    }
    #recomend-babyroom .link a{
        font-size: 120%;
    }
    #recomend-babyroom .BGorange{
        padding: 3em 0 5em;
    }
    #recomend-babyroom .AboutCombi ul{
        display: block;
        overflow: hidden;
        margin-bottom: 3em;
    }
    #recomend-babyroom .AboutCombi ul li{
        float: left;
        width: 50%;
    }
}

/*/////////////*/
#recomend-babyroom .CombiRecommend{
    overflow: hidden;
}
#recomend-babyroom .CombiRecommend .is-flex{
    gap: 5em;
    justify-content: center;
    align-items: center;
}
#recomend-babyroom .CombiRecommend .item{
    width: auto;
}
#recomend-babyroom .CombiRecommend p.text{
    text-align: left;
}
@media screen and (max-width: 768px) {
    #recomend-babyroom .CombiRecommend .is-flex{
        flex-direction: column;
        margin: 2em auto;
        gap: 0;
    }
    #recomend-babyroom .CombiRecommend p.text{
        line-height: 1.8;
    }
    #recomend-babyroom .CombiRecommend img{
        width: 60%;
    }
}

/*/////////////*/
#recomend-babyroom .RecommendPoint .IconMidashi{
    display: flex;
    align-items: center;
    margin: 3em auto;
}
#recomend-babyroom .RecommendPoint .IconMidashi h3{
    margin: 0 10px;
}
#recomend-babyroom .RecommendPoint .IconMidashi h3 span{
    background: linear-gradient(transparent 60%, #FBDC4F 0%);
    font-size: 140%;
    font-weight: 500;
}
#recomend-babyroom .RecommendPoint .IconMidashi img{
    width: 67px;
}
#recomend-babyroom .RecommendPoint ul.normal{
    display: block;
    margin: 0;
}
#recomend-babyroom .RecommendPoint ul.normal li{
    display: flex;
    align-items: center;
    margin-bottom: 1.15em;
}
#recomend-babyroom .RecommendPoint ul.normal li img{
    margin-right: 20px;
}
#recomend-babyroom .RecommendPoint .PointFrame{
    width: 85%;
    margin: 0 auto;
}
#recomend-babyroom .RecommendPoint .is-flex{
    gap: 5em;
    justify-content: center;
    align-items: center;
}
#recomend-babyroom .RecommendPoint .is-flex.second{
    flex-direction: row-reverse;
}

#recomend-babyroom .RecommendPoint .item{
    width: 45%;
}

@media screen and (max-width: 768px) {
    #recomend-babyroom .RecommendPoint .is-flex{
        flex-direction: column;
        gap: 0;
    }
    #recomend-babyroom .RecommendPoint .is-flex.second{
        flex-direction: column;
    }
    #recomend-babyroom .RecommendPoint .PointFrame{
        width: 95%;
    }
    #recomend-babyroom .RecommendPoint .IconMidashi{
        flex-direction: column;
        margin-top: 2em;
    }
    #recomend-babyroom .RecommendPoint .IconMidashi img{
        margin-bottom: 12px;
    }
    #recomend-babyroom .RecommendPoint .IconMidashi h3 {
        text-align: center;
        margin: 0;
        font-size: 16px;
    }
    #recomend-babyroom .RecommendPoint .IconMidashi h3 span{
        display: inline;
    }
    #recomend-babyroom .RecommendPoint .PointFrame .f_left.fukan{
        text-align: center;
    }
    #recomend-babyroom .RecommendPoint .PointFrame .f_left.fukan img{
        width: 60%;
    }
}

#recomend-babyroom {
    margin-bottom: 15em;
}
#recomend-babyroom .recomend-babyroom--list{
    margin: 4em 0;
}
#recomend-babyroom .recomend-babyroom--list .reed-text{
    margin: 2em auto 4em;
}
#recomend-babyroom .recomend-babyroom--list .reed-text .item{
    margin-bottom: 4em;
}
#recomend-babyroom .recomend-babyroom--list .reed-text .item.border{
    border: 2px solid #CDAF81;
    border-radius: 18px;
    padding: 10px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    width: 50%;
}
@media screen and (max-width: 768px) {
    #recomend-babyroom {
        margin-bottom: 7em;
    }
    #recomend-babyroom .recomend-babyroom--list .reed-text .item{
        margin-bottom: 2em;
    }
    #recomend-babyroom .recomend-babyroom--list .reed-text .item.border{
        width: 100%;
    }
}
#recomend-babyroom .recomend-babyroom--list .case-items{
    gap:2em;
    margin: 7em auto;
}
#recomend-babyroom .recomend-babyroom--list .case-item{
    width: 31.5%;
    position: relative;
    background-color: #fff8f3;
    border: #fff solid 2px;
    border-radius: 18px;
    padding: 10px 12px 2.5em;
    box-shadow: 1px 4px 20px 0px rgba(0, 0, 0, 0.10);
    .name{
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 10px;
        display: block;
    }
    .image{
        position: relative;
        span{
            background-color: #fff;
            color: #CDAF81;
            font-weight: 500;
            padding: 2px 10px;
            border-radius: 25px;
            position: absolute;
            bottom: 12px;
            right: 5px;
        }
        img{
            border-radius: 15px;
            width: 100%;
        }
    }
    p.room-name{
        color: #CDAF81;
        font-weight: bold;
        padding-top: 10px;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        margin: 0.5em auto;
        gap: 0 15px;
    }
    li{
            width: auto;
    }
    a{
        position: absolute;
        bottom: 8px;
        right: 15px;
        display: inline-flex;
        align-items: center;
        border-bottom: 1px solid #564f49;
        padding-bottom: 3px;
        img{margin-left: 5px;}
    }
    a:hover{
        color: #eb6100;
    }
    .photo-credit{
        position: absolute;
        right: 12px;
        top: 22px;
    }
}
@media screen and (max-width: 768px) {
    #recomend-babyroom .recomend-babyroom--list .case-items{
        gap:2em;
        margin: 4em auto;
    }    
    #recomend-babyroom .recomend-babyroom--list .case-item{
        font-size: 13px;
        width: 100%;
    }
}