@charset "utf-8";

.pagettl_box{
 height: 323px;
 background: center url(../img/pagettl_bg.png);
 margin: 0 3%;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
}
.pagettl{
 margin: 0 auto;
}
.pagettl_box::before {
 content:"";
 position: absolute;
 width: 154px;
 height: 132px;
 background: top center / contain url(../img/bubble_left.png) no-repeat;
 top: 0px;
 left: 0px;
 transform: translate(-15%, -10%);
}
.pagettl_box::after {
 content:"";
 position: absolute;
 width: 141px;
 height: 109px;
 background: url(../img/bubble_right.png);
 bottom: 0px;
 right: 0px;
 transform: translate(15%, 10%);
}
.inner{
 margin:0 auto ;
 width: 1200px;
}
.flex{
 display: flex;
 flex-wrap: wrap;
 /*align-items: center;*/
 justify-content: center;
}
.main_container{
 padding-bottom: 190px;
 background: bottom -150px center url(../img/footer_border.png);
}
.head_address{text-align: center;}
.breadcrumb{
 font-size: 14px;
 display: flex;
 margin: 30px 3% -55px;
 letter-spacing: 2px;
 font-weight: bold;
}
.breadcrumb li{
 margin-right: 5px;
}
.breadcrumb a{
 text-decoration: underline;
}
.img-responsible{
 display: inline-block;
 margin-left: auto;
 margin-right: auto;
 max-width: 100%;
 height: auto;
}
/*================================

　ここからIpadPro適用

================================*/
@media(max-width: 1366px) {
 .inner{
  width: 95%;
 }
}
/*================================

　ここからTABLET適用

================================*/
@media(max-width: 1024px) {
    .pagettl_box{
        margin-top: 3%;
    }
}

/*================================

　ここからSP適用

================================*/
@media(max-width: 700px) {
    .head_address {
        margin-top: 0.5em;
    }
    .breadcrumb {
        font-size: 12px;
        margin: 10px 3% -10px;
        line-height: 1.5em;
    }
    .pagettl_box{
        height: 110px;
        margin: 65px 0;
        background-size: cover;
    }    
    .pagettl{
        width: 32%;
        margin: 108px auto 0;
        z-index: 1;
    }
    .pagettl_box::before {
        /* top: -40px;
        width: 30%; */
        top: -15px;
        width: 25%;
        left: 10px;
        background-size: contain;
        background-position: top left;
    }
    .pagettl_box::after {
        bottom: -88px;
        background-size: contain;
        background-repeat: no-repeat;
        width: 25%;
        height: 140px;
    }
    
}




/*================================

　ここからSP（狭）適用

================================*/
@media(max-width: 500px) {
    .head_address {
        /* text-align: center;
        font-size: 3vw;
        */
        margin-top: 10px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
    }
}