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

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

.pc{display: none;}

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

.container-fluid{
background-color: #e50808!important ;
}   

.navbar-inverse .navbar-nav > li > a {
 color:white!important ;
  /* 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-nav{
	color: white!important ;
}

.navbar-toggle{
	background-color: rgba(176, 211, 255, 1)!important ;	
}

.navbar-aoboo .navbar-toggle .icon-bar {
background-color:#e50808!important;
}

/* 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:white!important;
}

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



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

#pageTop {
  position: fixed;
  bottom: 0px;
　　right: 200px;
}
 
#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;
  color: #fff;
   text-shadow: #aaaaaa 0px 2px, #aaaaaa 2px 0px, #aaaaaa -2px 0px, 
    #aaaaaa 0px -2px, #aaaaaa -1.4px -1.4px, #aaaaaa 1.4px 1.4px, 
    #aaaaaa 1.4px -1.4px, #aaaaaa -1.4px 1.4px; 
  }
 
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
/*トップ戻るボタン（終わり）------------------------------------------------------------------*/  



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

#container{
width: :100vw;
}



.section{
	width: 95%!important;
	margin: 5px auto -15px auto;
    background: #eee8fc;
    padding: .2em .2em .2em .2em!important;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endColorstr=#ff232829,GradientType=0)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endColorstr=#ff232829,GradientType=0);
}


@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;
}
}

.contents768{display: none;}    


.item_box_oya{	padding:0px 0px!important;}
.item_box{	margin: 0px auto 5px auto; padding:5px; max-width:800px;  background-color:rgba(255,255,255,0.9); }
.item_box_line{padding:5px;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指定（終わり）---------------------------------------------------------*/


/*テーブル指定---------------------------------------------------------------*/
  table.respon {
    border: none;
    text-align: center!important;
  }
  table.respon thead {
    display: none;
  }
  table.respon tr {
    border-top: 1px solid #999;
    display: block;
    margin-bottom: 20px;
  }
  table.respon td {
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    display: block;
    padding: 10px;
    text-align: right;
  }
  table.respon td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
  
  
 /*tableレスポンシブ-*/
  table.respon2 {
    border-top: 1px solid #999;
  }
  table.respon2 td {
    display: block;
    text-align: left;
     padding: 8px 5px 8px 5px;
  }
  table.respon2 th {
    display: block;
    border-top: none;
    border-bottom: none;
    width: 100%;
    padding: 8px 5px 8px 5px;
  }

  /*tableレスポンシブ-*/
table.respon5 {
  border-collapse: collapse;
  width: 100%;
  margin-top: 10px;
}
table.respon5 th,
table.respon5 td {
  padding: 10px 10px 10px 10px;
  border: 0px solid #999;
  text-align: left;
  font-weight: normal;
  background-color: white;
}
table.respon5 th {
  text-align: left;
  width: 50%;
  font-size: 90%;
}

 /*tableレスポンシブ-*/
  table.respon_price {
    border-top: 1px solid #999;
  }
  table.respon_price td {
    display: block;
    text-align: left;
     padding: 8px 5px 8px 5px;
  }
  table.respon_price th {
    display: block;
    border-top: none;
    border-bottom: none;
    width: 100%;
    padding: 8px 5px 8px 5px;
  }
  

/*テーブル指定（終わり）---------------------------------------------------------------*/


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




/*テキスト指定---------------------------------------------------------------*/
.nokaigyo{display:inline-block;}

h1 {
  color: #444;
  font-size: 18px!important;
  position: relative;
  padding: 0 0 2px 32px!important;
  margin-top: 12px!important;
  border-bottom: 1px solid #e50808;
}
h1:before, h1:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  border: 2px solid #e50808;
  margin: auto;
}
h1:before {
  top: -4px;
  left: 5px;
  animation: spin 4s linear infinite;
}
h1:after {
  top: 4px;
  left: 9px;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


h2 {
	font-size: 14px!important;
	font-weight:bold!important;
　  line-height: 1.2em;
　　margin : 1.5em 0 1.5em -50px ; 
    border-bottom: 1px dotted #f0c000;
    text-align: left;
}

h2:before{
	content: " \f192";
	font-family: FontAwesome;
	color: #ffc800;
	margin-right: 3px;

}	


h2p {font-size: 90%;}

h2p2 {font-size: 60%!important;}

h5{font-size: 80%!important;
		line-height: 1.6!important;}


ul {font-size: 90%;}

p{font-size: 80%;}



@media screen and (orientation: portrait) {
   /* 縦向きの場合のスタイル */
.event_info{
	font-size: 2.7vw!important;
}
}


div ul.event_info{
	margin-bottom:  -25px!important;
	margin-top:  -20px!important;
	padding-top: -20px!important;
}

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

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

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







}