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

/*---------レイアウトルール レイアウトルールでは、ページのエリア分けを行います。---------*/


.l-main .row{
    display:block;
}
.jumbotron{
    margin-bottom: 0;
    }
/*-----------l-header-----------*/
.l-header{
    padding-bottom:1rem;
}
/*l-slider*/
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide img{
    width:100%;
    height:100%;
}
.swiper-pagination{
    width:50px;
}
.l-slider .swiper .swiper-pagination-bullet-active{
    background:#000;
}
/*l-sliderに画像を入れる場合は下記をdisplay:block;にする*/
.slide-area-image{
    width:100%;
    display:none;
}
.slide-area-image img{
    width:100%;
}



/*containerサイズ*/

.container{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.for-sm-block{
    display:block;
}
.site-header-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items:baseline;
}
/*
@media (min-width: 576px){
.container{
    max-width: 540px;
}    
 
}*/
@media (min-width: 768px){
.container{
    max-width: 720px;
}
}
 
@media (min-width: 992px){
.container{
    max-width: 960px;
}
    

.for-sm-block{
    display:none;
}
    
    
    }/*--min-width: 992px--*/


@media (min-width: 1200px){
.container{
    max-width: 1140px;
}
}

/* --------下層ページの構成スタイル----------- */

/*下層ページのヘッダー部分*/
.under_page_header{
    width:100vw;
    min-height:200px;
    background-image:url("../images/under-headerimage.png");
    background-size:cover;
    position:relative;
}
.under_page_header-text{
    position:absolute;
    top:40%;
    left:40%;
    font-size:2rem;
    font-weight:bold;
    white-space:nowrap;
}


/*下層ページのl-main*/

.underpage-content{
    display:flex;
    flex-direction:row-reverse;
    overflow: auto;
    max-width:90%;
}
.underpage-content .sidebar .side-nav-list{
    list-style-type:none;
    margin-bottom:0;
    padding-left:20px;
}
.underpage-content .sidebar .side-nav-list li{
    padding-top:0.7em;
    padding-bottom:0.7em;
    border-bottom:1px solid #CECECE;
}
.underpage-content .sidebar .btn{
    margin-top:50px;
    width:90%;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.underpage-content .sidebar{
    width: 20%;
    background-color: rgba(246,246,246,1.00);
    height: auto;
    padding:20px 3%;
}


.flex-wrapper{
    display:flex;
    justify-content: space-between;
    gap:10px;
    margin:10px auto;
}

#about .flex-wrapper{
    margin-top:50px;
    margin-bottom:50px;
}
#about .flex-wrapper .flex-inner{
    width:50%;
    margin-bottom:20px;
    padding:10px;
}
@media (min-width: 992px){
.underpage-content .sidebar{
    padding-top: 36px;
}

}

@media (max-width:768px){
    
}

@media (max-width:992px){
    .l-main .underpage-content{
        display:block;
        max-width:100%;
    }
    .l-main .underpage-content .sidebar{
        width:100%;
        height:auto;
    }
    
.flex-wrapper{
    display:block;
}
.flex-wrapper .flex-inner.block03{
       margin-top:30px; 
    }
.flex-wrapper.pink-box .inner-wrap{
    display:flex;
    }
#about .flex-wrapper{
    margin-top:30px;
    margin-bottom:30px;
    display:flex;
    flex-direction: column;
}
#about .flex-wrapper .flex-inner{
    width:100%;
}        
  
#about .flex-wrapper.reverse{
    flex-direction: column-reverse;
} 
    
#voice.bg-pinkdot{
    background: url("../images/dot-pink.png") repeat;
}
    
    }/*max-width:992px*/
.box{
    max-width:400px;
    background:#fff;
    border-radius:10px;
    border:2px solid #000;
    margin:50px auto;
    padding:20px;
}
.box.orange-box{
    border:2px solid #F88258;    
}
.box.blue-box{
    border:2px solid #1E8FCC;
}
.box.pink-box{
    border:2px solid #F2576B;
}

.bg-green-gradation{
    padding-top:30px;
    position:relative;
    padding-bottom:10px;
}
.bg-green::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100vw;
  height:80px;
  background:url("../images/white-bg.png") no-repeat  top center / cover;
}
.bg-pink-gradation{
    background:url("../images/hd_bg_img_03.png") no-repeat bottom  right 15px / 100px auto, linear-gradient(to bottom, #FEE6E6 5%, #F5D2D2 100%);
    padding-top:15px;
    padding-bottom:45px;
}
.bg-pink:after{
    background:url("../images/white-line-bg.png") no-repeat  top center / cover;
}
.bg-pinkdot{
    background:url("../images/dot-pink.png") repeat;
}

/*-----------l-footerエリア-----------*/
.l-footer{
    padding:10px 0 50px;
    width:80%;
    border-top:2px solid #707070;
    margin:50px auto;
}