/*===============================================
●画面の横幅が768pxまで
===============================================*/



/* スマホ横画面用 */
@media screen and (max-width: 480px) {
  .container{padding:0}
  div[class^="col-"] {padding:0}
  .row {margin:0;}
}
/* スマホ縦画面用 */
@media screen and (max-width: 320px) {
  .container{padding:0}
  div[class^="col-"] {padding:0}
  .row {margin:0;}
}




@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

.section_menu{
  margin     : 50px auto auto auto!important;
  background : ;
  padding    : .2em 1em .2em 1em!important;
}

.wrap2_in{
  padding-right:5px!important;
  padding-left:5px!important;
}


/*メインメニュー指定---------------------------------------------------------------*/
.navbar-brand{
    color: #505050 !important;
     font-weight: bold;
     font-size: 80%;
}

.container-fluid{
background-color: rgba(#text19# 0.9) ;
}   

.navbar-inverse .navbar-nav > li > a {
 color:#fff;
  /* for modern browser (firefox , chrome , safari )*/
  text-shadow: 1px 1px 3px rgba(45,2,2,0.6),
               -1px  1px 3px rgba(45,2,2,0.6),
               1px  -1px 3px rgba(45,2,2,0.6),
              -1px  1px 3px rgba(45,2,2,0.6);
 /* for IE */
 filter:dropshadow(color=rgba(45,2,2,0.6),offX= 3,offY=-1)
        dropshadow(color=rgba(45,2,2,0.6),offX= 1,offY= 3)
        dropshadow(color=rgba(45,2,2,0.6),offX= 3,offY= 1)
        dropshadow(color=rgba(45,2,2,0.6),offX=-1,offY= 3);
}

/* navbar ドロップダウン(子)テキストカラー */
.dropdown-menu>li>a {
color: #ffffff !important;
}
/* navbar ドロップダウン(子)focus,hover時のカラー */
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
color: #ffffff !important;
background-color: #557e78 !important;
}


/*メインメニュー指定（終わり）---------------------------------------------------------------*/



/*トップ戻るボタン------------------------------------------------------------------*/  

#pageTop {
position      : fixed;
bottom        : 0px;
margin-left   : 0% !important;
margin-right  : 0% !important;
margin-bottom : 0px !important;
width         : 100% !important;


}
 
#pageTop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 8px;
  width: 100%;
  height: 45px;
  vertical-align: middle;
  line-height: 1; 
  font-size: 13px;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  padding-right: 10px;
  padding-top:15px;
  background-color:maroon;
  color:white!important;
  }

 
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.9;

}
/*トップ戻るボタン（終わり）------------------------------------------------------------------*/  



/*BOX指定---------------------------------------------------------------*/
body{margin: 0!important;}

#container{
width: :100vw;
}


.footer{
  background-color:black!important;
  text-align:center!important;
  position         : absolute;
  width:100%!important;
  min-height:100px!important;
  font-size:80%;
  overflow: hidden;
  margin-bottom:50px!important;
  margin-top:0px; 
  padding-top:30px;

}

.footer2{
  text-align:center!important;
  max-width:1300px!important;
  height:auto!important;
  font-size:110%;
  overflow: hidden;
  padding-bottom: 30px;
  background-color:#102B45!important;
}


.footer2_in{
max-width:1300px!important;
}


.footer_link ol{
list-style: none;
margin:0 30px 0 0px;
}



.footer_link ol li{
text-align:left;
margin-bottom:5px!important;
margin-left:-20px;
}


.footer_link ol li:first-child{
font-weight:bold;
font-size:115%;
border-bottom:solid 1px #666;

}

.footer_link ol li:first-child:before{
content: none!important;
}



.footer_link ol li a{
  text-decoration:none!important;
  color:#fff;
  border-bottom   : 0px dotted #000;
}

.footer_link ol li:before{
  content      : " \f105"!important;
  font-family  : "Font Awesome 5 Pro";
  margin-right : 5px!important;
  font-weight:700;
}



.section_menu{
	width: 95%!important;
	margin: 5px auto -15px auto;
  padding: .2em .2em .2em .2em!important;
}

}

@media screen and (orientation: landscape) {
   /* 横向きの場合のスタイル */
 #main_title{
width: :100%;
height:100%;
background-color: #FFF;	/* ピンク */
text-align: center;
background-image: url(https://www.b2-online.jp/images/navio_topimage.png) ,
url(https://www.b2-online.jp/images/navio_topimage_back.jpg);
background-repeat:  no-repeat,
no-repeat;
background-position:center center,
center top;
-moz-background-size:contain,
contain;
background-size:contain,
cover;


}
}
@media screen and (orientation: portrait) {
   /* 縦向きの場合のスタイル */
#main_title{
width: :100%;
height: 50%;
background-color: #FFF;	/* ピンク */
background-image: url(https://www.b2-online.jp/images/navio_topimage_sma.png) ,
url(https://www.b2-online.jp/images/navio_topimage_back.jpg);
background-repeat:  no-repeat,
no-repeat;
background-position:center top,
center center;
-moz-background-size:cover,
contain;
background-size:cover,
cover;
}
}





@media screen and (max-width: 768px){

.contents768{display: none;}    


/*各ページタイトル（h1）の横画像レイアウト*/
.topillust {
  margin-top:0px;
}
/*各ページタイトル（h1）の横画像レイアウト*/


.item_box_oya{	padding:0px 0px;}
.item_box{padding:4px; margin:2% 0%; width:auto; background-color:rgba(255,255,255,0.9);}
.item_box_line{padding:8px;margin:2% 1%;width:auto;background-color:rgba(255,255,255,.9);border:1px solid #b3b3b3}
.item_box_event{	margin: 0px; padding:0px;  background-color:rgba(255,255,255,0.9); }

.kadomaru {
border-radius: 5x;
-webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

.shadow {
box-shadow: 0 1px 5px rgba(0,0,0,.2); 
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.2); 
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.2); 
-o-box-shadow: 0 1px 5px rgba(0,0,0,.2); 
zoom: 1;	
}


/*BOX指定（終わり）---------------------------------------------------------*/





/*その他指定---------------------------------------------------------------*/
.hideAnchor {
	display:block;
	height:0px;
	height:1px;
	overflow:hidden;
	text-indent:-9999px;
	margin-top:-60px;
	padding-bottom:60px;
}
/*その他指定（終わり）---------------------------------------------------------------*/

@media screen and (max-width: 768px){
.sma_left{text-align:left;}
}


/*テキスト指定（終わり）---------------------------------------------------------------*/

/*ボタン指定---------------------------------------------------------------*/
.label_button{font-size: 100%}



/*ボタン指定（終わり）---------------------------------------------------------------*/


/*ボタン装飾---------------------------------------------------------------*/
.square_btn {
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none!important;
    color: maroon;
    border: solid 2px maroon;
    border-radius: 3px;
    transition: .4s;
}

.square_btn:hover {
    background: maroon;
    color: white;
}



.square_btn03 {
  font-size: 15px;

}




.btn_maru{
  display: inline-block;
  text-decoration: none!important;
  color: #668ad8;
  width: 180px;
  height: 180px;
  line-height: 180px;
  border-radius: 50%;
  border: solid 1px #668ad8;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  font-weight: bold;
  transition: .4s;
      background: rgba(255,255,255,0.4);

}

.btn_maru:hover {
    background: rgba(255,255,255,0.6);
}



.square_btn_mini {
  font-size: 13px;
}





}




@media screen and (max-width: 600px){
.index_button180 {
  min-width:49%;
}
}



@media screen and (max-width: 1049px){
.index_button180 {
background-color:white;
text-indent:0;
  border:1px solid #d9d9d9;
  display:inline-block;
  color:#696969;
  font-family:arial;
  font-size:20px;
  font-style:normal;
  height:60px;
  line-height:60px;
  min-width:100%;
  text-decoration:none!important;
  text-align:left;
  margin-bottom: 5px;
  padding-right:20px;
  padding-left:20px;
}
.index_button180:hover {
  background-color:#ffffff;
  border:2px solid  #e50808;
}
.index_button180:active {
  position:relative;
  top:2px;

}

.index_button180:visited {
  display:none!important;
}
}
/*ボタン装飾---------------------------------------------------------------*/