/*＝＝＝＝＝ nav header　＝＝＝＝＝*/
.banner_btn{
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.footer_btn_box{
justify-content: center;
}
.banner_btn a{
padding: 15px 20px;
margin: 0 5px;
font-size: 100%;
font-weight: bold;
text-align: center;
line-height: 1.1;
border-radius: 10px;
border: 2px solid #17a8c3;
width: auto;
box-shadow: 1px 1px 0 rgba(110,157,211,0.50), 0 0 10px 5px rgba(110,157,211,0.50), inset 2px 2px 0 rgba(222,235,249,0.99);
}


.banner_btn img{
vertical-align: middle;
margin-right: 5px;
}


.banner_btn a:hover{
opacity: 0.9;
}


/*＝＝＝＝＝ btn_flex　＝＝＝＝＝*/
.btn_flex{
display: flex;
flex-direction: row;
align-items:center;
justify-content: space-around;
padding:0;
flex-wrap: nowrap;
}
.btn_f10{
width: 5%;
padding-right: 5px;
}
.btn_f90{
width: 94%;
}
#sideButton {
position: fixed;
right: 0px;
top: 15%;
display: none; /* 初期は非表示 */
z-index: 100;
width: 50px;
}
.flex_side{
flex-direction: column;
}
.flex_side a{
display: inline-block;
font-weight: bold;
background: #17a8c3;
color: #ffffff;
text-align: center;
padding:15px 12px 20px 15px; 
font-size: 20px;
margin-bottom: 10px;
line-height: 1.1;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
box-shadow: 1px 1px 0 rgba(110,157,211,0.50), 0 0 1px 3px rgba(255,255,255,0.50), inset 2px 2px 0 rgba(222,235,249,0.99);
}
.flex_side img{
vertical-align: middle;
align-items: center;
}
 .banner_btn {
display: none;}
@media screen and (max-width: 789px){
#sideButton {
display: none !important;
 }
@media screen and (max-width: 789px) {
  .banner_btn {
    position: fixed;
    bottom: -100px; /* 初期位置は画面外 */
    left: 0;
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
	 align-items: stretch;
    padding: 10px 0;
    z-index: 1000;
    opacity: 0;
    transition: bottom 0.8s ease, opacity 0.8s ease;
	  box-shadow: -4px 0px 3px 3px rgba(0,0,0,0.2);
  }

  .banner_btn.show {
    bottom: 0; /* 表示位置 */
    opacity: 1;
  }
}
.header_btn_box.show {
  bottom: 0; /* 表示位置 */
  opacity: 1;
}
header{

}

.banner_btn {
 display: flex;
justify-content: center;
margin-top: 0px;
}
.banner_btn a{
padding: 10px 5px 7px 3px;
margin: 0 2px;
font-size: 100%;
}
.banner_btn a.yoyaku_btn{
background: #17a8c3;
color: #ffffff;
text-align: center;
box-shadow: 1px 1px 0 rgba(110,157,211,0.50), 0 0 5px 2px rgba(110,157,211,0.50), inset 2px 2px 0 rgba(222,235,249,0.99);
}

}
@media only screen and (max-width:520px){
.banner_btn a{
font-size: 88%;
}
}