@charset "UTF-8";
/* CSS Document */

/***********************************************
　　　タブレット向けのスタイル 【タブレット用】
*************************************************/
@media screen and (min-width:480px) and (max-width:710px) {

a{
text-decoration:none;
vertical-align:baseline;
background:transparent;
color:#313131;
}
html {
font-size: 62.5%;
}


#wrap2 {
  width: 100%;
  overflow: hidden;
 /*** background: url(../img/topback2.jpg) no-repeat;***/
 background: url(../images/coca_top1200w.jpg) no-repeat;
  background-size: auto;
  background-position: 50% 0%;
}

#header2 {
    width: 100%;
    margin: 0 auto 0 auto;
   border-top: solid 4px #2C2C2C;
 /** background: url(../half.png) repeat;**/
}


/*--------------------------------------------- 
          　　ヘッダー【タブレット用】
---------------------------------------------**/
h1{
  margin: 0 auto 0 auto;
  width: 900px;
  padding: 2px 0 0 5px;
  font-weight: normal;
  text-align: right;
  font-size: 10px;
  font-size: 1.0rem;
  color: #646766;
}

#h_logo {
  padding: 10px 0 0px 10px; 
  height: 00px;
}

#h_logo2 {
  padding: 5px 0 0px 10px; 
  height: 00px;
}

/*--------------------------------------------- 
 ヘッダーメニュー(グローバルナビ）【タブレット用】
 ------------------------------------------------*/
#header-menu {
}
#header-menu ul {
  padding: 0;
}
#header-menu ul li {
  width: 33.3%;
  float: left;
  list-style: none;
  text-align: center;
}
#header-menu li a {
  width: 100%;
  padding: 13px 0 15px 0;
  display: block;
  line-height: 0.5;
  letter-spacing: 0.05em;
  color: #fffffc !important;
  text-decoration: none;
  border-left: 1px solid #808080;
  border-bottom: 1px solid #808080;
   background: -webkit-linear-gradient(top, #030301 0%, #404040 100%);
background: linear-gradient(to bottom, #030301 0%, #404040 100%);
 background-color:#030301  ;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
#header-menu li a:hover {
  color: #fffffc !important;
  display: block;
  text-decoration: none;
 background: #dccb18;
}

#header-menu li.home a {
  border-bottom: 1px solid #808080;
}

#header-menu span.sub {
  display: none;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
  height: 0; 
  visibility: hidden;
}

nav#g_navi {
 display: none;
}

.menu {
 display: none;
}


/*---------------------------------------------- 
        コンテンツ 【タブレット用】
----------------------------------------------*/
#contents2 {
  margin: 0px 7px 10px 7px;
  border: solid 1px #d9d9d9;
   background: url(../img/half.png) repeat;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .20);
}
#main {
  margin: 15px 15px 15px 15px;  
}
.h3box {
 padding:0 0 0px 14px;
 font-size: 16px--;
  font-size: 1.6rem;
}

/*------------ ご案内のトップリスト【PCと同じ】--------------*/
ul.listbox2 li a{
padding: 4px;
margin: 1px 1px 3px 1px;
width: 60px; 
height: 50px;
}

 .backimg2{
    position:relative;
    width:100%;
 }
.backimg2 span{
    position:absolute;
   /*- bottom:5px;-*/
   top:-60px;
    right:10px;
}



/*-------- イベント紹介枠 【PCと同じ】-----------*/
.grid2{
 width:45%;
}	
.grid3{
 width:28.5%;
}

/*--------上部画像かぶせタイトル文字【タブレット用】--------*/
.ptcopyright{
   position: absolute;
     padding: 5px 10px 5px 10px;
    top:58px;
    right:10px;
    color: #fff;
    background: #000;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    text-align: left;
      font-size: 15px;
        font-size: 1.5rem;
}


.ptcopyright2,.ptcopyright3{
   position: absolute;
    padding: 3px 8px 3px 8px;
    top:120px;
    right:20px;
    color: #fff;
    background: #000;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    text-align: left;
    font-size: 17px;
      font-size: 1.76rem;
}

.ptcopyright3{
display: none;
}




/*--------リンク／サイトマップ【タブレット用】------------*/
.fram2{
 float:left;
 width:45%;
 margin-top: 0px;
 margin-left: 10px;
 margin-right: 10px;
}


.grimg3,.grimg2{
  position: relative;
  float: center;
  width: 100%;
  position: relative;
}
/*---文字かぶせ----*/
.grimg3_copy,.grimg3_copyy{
    position:absolute;
     font-size: 15px;
       font-size: 1.5rem;
    top:10px;
    left:12px;
    padding:4px 10px 3px 10px;
    color: #fff;
    line-height:120%;
    font: 16px #fff;
     text-decoration: none;
     border-radius:8px;
  filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

.grimg3_copy{
    background-color:#D14A77;
}

.grimg3_copyy{
    background-color:#714C99;
}


/*-----【施設案内】写真の横並びリスト-------*/
ul.imglist li{ 
 width:48%;
}
	
ul.imglist2 li{ 
 width:32%;
}	




/*---------------------------------------------- 
        サイド
----------------------------------------------*/

#side {
 width: 98%;
 padding-bottom: 10px;
 margin: 10px 5px 0px 7px;	
}

.boxsideli_r, {
 float: right;
  width:47%;
}
.boxsideli_l {
 float: left;
 width:47%;
}

.boxside_r {
 text-decoration: none;
 float: right;
  width:47%;
}
.boxside_l {
 text-decoration: none;
 float: left;
 width:46%;
}

.boxside_r p,.boxside_l p {
 text-decoration: none;
}

.boxsideli_l2 {
 text-decoration: none;
 float: left;
 width:47%;
}




#header-img3 {
 display: none;
}

.boxside_l2 {
 float: left;
 width:45%;
}

/*-----広域地図のボックス------*/
.boxside2 {
 display: none;
}



}/*--(min-width:480px) and (max-width:710px)終わり--*/



/***********************************************
　　　イベント紹介枠 【タブレット用】
*************************************************/
@media screen and (min-width:550px) and (max-width:650px) {
.grid2,.grid3{
 float:left;
 width:44%;
  position: relative;
}

html {
font-size: 62.5%;
}


/*---文字かぶせ----*/
.grimg3_copy,.grimg3_copyy{
    position:absolute;
     font-size: 14px;
       font-size: 1.4rem;
    top:10px;
    left:12px;
    padding:4px 10px 3px 10px;
    color: #fff;
    line-height:120%;
     text-decoration: none;
     border-radius:8px;
  filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

.grimg3_copy{
    background-color:#D14A77;
}

.grimg3_copyy{
    background-color:#714C99;
}

.ptcopyright3{
display: none;
}



	
}

/***********************************************
　　　イベント紹介枠 【タブレット用】
*************************************************/
@media screen and (min-width:465px) and (max-width:550px) {
.grid2,.grid3{
 float:left;
 width:43%;
 position: relative;
}

html {
font-size: 62.5%;
}


/*---文字かぶせ----*/
.grimg3_copy,.grimg3_copyy{
    position:absolute;
     font-size: 14px;
       font-size: 1.4rem;
    top:10px;
    left:12px;
    padding:4px 10px 3px 10px;
    color: #fff;
    line-height:120%;
     text-decoration: none;
     border-radius:8px;
  filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

.grimg3_copy{
    background-color:#D14A77;
}

.grimg3_copyy{
    background-color:#714C99;
}



}

/***********************************************
　　　タブレットヘッダー120 【タブレット用】
*************************************************/
@media screen and (min-width:480px) and (max-width:610px) {
#header, #header2 {
  height: 120px;
}
#h_info {
  padding: 72px 10px 10px 0px;
  text-align: right;
}
#h_info2 {
  padding: 77px 10px 10px 0px;
  text-align: right;
}


}

/*************************************************** 
 　　タブレットヘッダー85  【タブレット用】
 ****************************************************/
@media screen and (min-width: 610px) {
#header,#header2  {
 height: 85px;
}
#h_info {
  padding: 30px 10px 10px 0px;
  text-align: right;
}
#h_info2 {
  padding: 39px 10px 10px 0px;
  text-align: right;
}


}