@charset "utf-8";

/*吹き出し左*/

/*
<div class="balloon2-left">
<p>こんにちは。これは例です。</p>
</div>
*/

/*左向き吹き出しボックス--------------------------*/
.balloon-left {
    position: relative;
    padding: 20px 5px;
    width: 60%;
    height: auto;/* 100 - 3*2 + 5*2 */
    background: white;
    border: 3px solid #D2D2D2;
    z-index: 0;
    margin:auto;
    border-radius:5px;
}

.balloon-left:before,
.balloon-left:after{
    content: "";
    position: absolute;
    border-style: solid;
    /*上の頂点　左の頂点　下の頂点*/
    /*形状を指定するのはここ*/
    border-width: 10px 25px 10px 0;
    /*吹き出しの高さ*/
    top: 70%;
}

.balloon-left:before {
    border-color: transparent #D2D2D2 transparent transparent;
    left: -25px;   /*太さと位置の調整*/
    z-index: 0;
    
}
/*白三角　これを重なる位置で太さを調整する*/
.balloon-left:after {
    border-color: transparent white transparent transparent;
    left: -16px;   /*太さと位置の調整*/
    z-index: 1;
    
}





/*右向き吹き出しボックス----------------------*/
.balloon-right {
    position: relative;
    padding: 20px 5px;
    width: 60%;
    height: auto;
    background: white;
    border: 3px solid #D2D2D2;
    z-index: 0;
    /*ボックスBの上下の幅もここで調整*/
    margin:40px auto;
    border-radius:5px;
}

.balloon-right:before,
.balloon-right:after{
    content: "";
    position: absolute;
    border-style: solid;
    /*上の頂点　左の頂点　下の頂点*/
    /*形状を指定するのはここ*/
    border-width: 10px 25px 10px 25px;
    /*吹き出しの高さ*/
    top: 70%;
}
/*色三角*/
.balloon-right:before {
    border-color: transparent transparent transparent #D2D2D2 ;
    right: -50px;   /*太さと位置の調整*/
    z-index: 0;

}
/*白三角　これを重なる位置で太さを調整する*/
.balloon-right:after {
    border-color: transparent transparent transparent white;
    right: -42px;    /*太さと位置の調整*/
    z-index: 1;

}

/*横向き両端矢印*/
.Both_ends_Arrows{
    width: 60px;
    height: 45px;
    background-color:#626262;
    position:relative;
    margin:0;
    padding:0;
    left:10px

}
.Both_ends_Arrows:before{
    content:"";
    position: absolute;
    left:-80px;
    top:-20px;
    border-left: 40px solid transparent;
    border-right: 40px solid #626262;
    border-bottom: 40px solid transparent;
    border-top: 40px solid transparent;
}
.Both_ends_Arrows:after{
    content:"";
    position: absolute;
    left:60px;
    top:-18px;
    border-left: 40px solid #626262;
    border-right: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-top: 40px solid transparent;
}
.Both_ends_Arrows_setA{
    margin:20px 30px;
}
.Both_ends_Arrows_setB{
    margin:20px 30px;
}


/*hoverアニメーション----------------------*/

@media screen and (max-width:1100px) {
    
    /*横向き両端矢印 位置の指定もここで*/
    .Both_ends_Arrows{
        width: 40px;
        height: 30px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        

    }
    .Both_ends_Arrows:before{
        content:"";
        position: absolute;
        left:-49px;
        top:-10px;
        border-left: 25px solid transparent;
        border-right: 25px solid #626262;
        border-bottom: 25px solid transparent;
        border-top: 25px solid transparent;
    }
    .Both_ends_Arrows:after{
        content:"";
        position: absolute;
        left:39px;
        top:-10px;
        border-left: 25px solid #626262;
        border-right: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-top: 25px solid transparent;
    }
    .Both_ends_Arrows_setA{
        margin:0;
    }
    .Both_ends_Arrows_setB{
        margin:0;
    }

}











@media screen and (max-width:768px) {
    /*左向き吹き出しボックス--------------------------*/
    .balloon-left {
        width: 240px;/***************************/
        margin:auto auto auto auto;/***************************/
    }

    /*右向き吹き出しボックス----------------------*/
    .balloon-right {
        width: 240px;/*******************************/
        margin:40px auto auto auto;/*******************************/
    }

    /*横向き両端矢印*/
    .Both_ends_Arrows{ width:50px;/**************************/ height:50px;/**************************/
        top:20px;
        left:35px;
        
    }
    .Both_ends_Arrows:before{
        left:-20px;/**************************/
        top:-88px;/**************************/
        border-left: 45px solid transparent;/**************************/
        border-right: 45px solid transparent;/**************************/
        border-bottom: 45px solid #626262;/**************************/
        border-top: 45px solid transparent;/**************************/
    }
    .Both_ends_Arrows:after{
        left:-20px;/**************************/
        top:48px;/**************************/
        border-left: 45px solid transparent;/**************************/
        border-right: 45px solid transparent;/**************************/
        border-bottom: 45px solid transparent;/**************************/
        border-top: 45px solid #626262;/**************************/
    }
    .Both_ends_Arrows_setA, .Both_ends_Arrows_setB{
        margin:auto auto;/**************************/
    }

}

@media screen and (max-width:600px) {
    /*左向き吹き出しボックス--------------------------*/
    .balloon-left {
        margin:auto 0 auto 80px;
    }

    /*右向き吹き出しボックス----------------------*/
    .balloon-right {
        margin:40px 80px auto auto;
    }
}