/* トップページバナー設定 */



.floating-banner {
    position: fixed; /* 追従 */
    z-index: 9999; /* 他の要素の下に隠れないように */
    top: 40px; /* バナーの上下の位置 */
    right: 40px; /* バナーの左右の位置 */
    transition-duration: 0.5s;
}
.pc {
    width: 250px; /* バナーの横幅を指定 */
}
.floating-banner:hover {
    opacity: .8; /* ホバーで少し透過 */
    
     box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}
.sp {
    display: none; /* PCではスマホ用のバナーは非表示に */
}
@media screen and (max-width: 990px) { /* タブレット用のブレイクポイントを指定 */
    .pc {
        display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
    }
}

@media print,screen and (max-width: 560px) { /* スマホ用のブレイクポイントを指定 */
    .sp {
        display: inline-block; /* 消していたスマホ用のバナーを表示させる */
        width: 100vw; /* スマホの画面幅いっぱいにバナーを表示 */
    }
    .floating-banner  {
        top: unset; /* PCで指定していた上下の位置指定をクリア */
        right: 0; /* 左右の隙間が空かないように */
        bottom: 0; /* 画面の最下部にぴったりくっつくように指定 */
    }
}


@media print { /*印刷用指定 */
    .sp {
        display: inline-block; /* 消していたスマホ用のバナーを表示させる */
        width: 100vw; /* スマホの画面幅いっぱいにバナーを表示 */
    }
    
     .pc {
        display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
    }
    
       .floating-banner  {
        top: unset; /* PCで指定していた上下の位置指定をクリア */
        right: 0; /* 左右の隙間が空かないように */
        bottom: 0; /* 画面の最下部にぴったりくっつくように指定 */
    }
}






.bn_flex{
	display: -ms-flexbox;
	display: flex;
	flex-wrap:wrap;/* 画面幅に合わせてカラム落ちさせる */
	justify-content: space-between;
	 align-items: flex-strat;
	 margin:0 auto 15px auto;
	 width: 90%;
}


.bn_flex li {
	width: calc(100%/3);/*←画像を横に3つ並べる場合*/
	height: 250px;
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
	 -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box
    
}
.bn_flex li img {
	max-width:110%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 1px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

/* 最後のコンテンツを左寄せにする指定 */
.bn_flex:after {
    content: "";
    display: block;
    width: calc(100%/3);  /* 指定したwidthと同じ幅を指定する */
    height: 0;
}


.bn_flex li.calc2_3box {
	display: -ms-flexbox;
	display: flex;
	width: calc(calc((100% -40px) / 3) * 1.95);/*←widthの2/3幅に*/
	height:210px;
	box-sizing:border-box;
	 -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    border:solid 1px #ccc; /*←1pxのグレーの枠線で囲む指定の場合*/
    margin-left:3px;
    
}

.bn_flex li.calc2_3box > *{
    display: flex;
    align-items: center;

}


.bn_flex li.calc2_3box .calc2box{
    width: calc((100%-40px) / 2 ); 
    height: auto;
    
}





@media all and  (max-width: 480px){


.bn_flex{
	display: block;
	
}

.bn_flex li {

width:100%;
height: auto;
margin: 15px auto;
}

.bn_flex li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 1px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

.bn_flex li.calc2_3box {
	display: none;
}


}