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



/*
キャンプ各種テーブル
-------------------------------------------*/

.content .c_box .c_price table {
	margin: 10px auto 10px auto;
    table-layout: fixed;
    width: 100%;
word-break: break-all;
word-wrap: break-all;
    box-sizing: border-box;
}
.content .c_box .c_price table th {
    font-size: 16px;
    white-space: nowrap;
        border: #FFF 1px solid;
	line-height: 1em;
	padding: 15px;
}
.content .c_box .c_price table td {
	padding: 15px;
    border: 1px solid #ccc;
font-size: 16px;
	line-height: 1em;
	background-color: #FFF; 
   text-align: center;}

table.tb_list {
  border-collapse: collapse;
  width: 100%;
    font-size: 14px;
}
.tb_list th,
.tb_list td{
  padding: 8px;
  border: solid 1px #ccc;
  text-align:center;
  box-sizing:border-box;
    background-color: #fff;
}
.tb_list th {
  background: #00562D;
  color: #fff;
    font-size: 14px;
}
.tb_list th:first-child{
    width: 30%;
}
.tb_list th span {
display: block;
    font-size: 14px;
}







table.tb_rent {
  border-collapse: collapse;
  width: 100%;
}
.tb_rent th,
.tb_rent td{
  padding: 10px;
  border: solid 1px #ccc;
  text-align:center;
  box-sizing:border-box;
}
.tb_rent th {
  background: #00562D;
  color: #fff;
  
}

/*
キャンプページ
-------------------------------------------*/

.content .camp  {
    position: relative;
    background:#00381D; 
    width: 100%;
    padding: 0;
    margin-bottom: 0px;
    margin-top: 40px;
}
 .content .camp p  {
     color: #fff;
	margin: 0 20px auto;
	 line-height: 1.6;

}

.content .camp h4 {
    background: #000000;
    color: #fff;
    padding: 5px 10px;
        font-size: 18px;
    letter-spacing: 0.5em;
    text-align: left;
    margin: 0;
    
}
.content .camp h4:before{
content:'〉〉〉〉';    
        letter-spacing: -0.5em;
padding-right: 1em;
}



/*
２カラム
-------------------------------------------*/


.content .camp  ul {
	margin-left: auto;
	margin-right: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	max-width: 1400px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.content .camp .col2  li{
	width: 50%;
	position: relative;
	display: flex;
    flex-direction: column;
    justify-content: space-between;

}
.content .camp .col2  li:first-child {
	width: 50%;
	position: relative;
}

.content .camp ul li  img {
  width: 100%;
  height: 100%;
  object-fit:cover;
  object-position: 50% 50%;/* 100% 100%と同じ */
}

.content .camp ul li  img a:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
	-webkit-filter:brightness(1.5);
    -moz-filter:brightness(1.5);
    -ms-filter:brightness(1.5);
    filter:brightness(1.5);
}



/*
２カラム 外部予約　と問い合わせ
-------------------------------------------*/
.content .res_tel  {
    position: relative;
    width: 100%;
    padding: 0;
    margin-bottom: 0px;
}

.content .res_tel  ul {
	display: block;
	margin-left: auto;
	margin-right: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	max-width: 1400px;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.content  .res_tel  li{
	width: 50%;
	max-height: 250px;
	position: relative;
	display: flex;
    flex-direction: column;
    justify-content: space-between;

}
.content  .res_tel   li:first-child {
	width: 45%;
	max-height: 220px;
	position: relative;
}


.content .res_tel .tel_btn a {
	font-size: 20px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	border: 5px solid #00381d;
	text-decoration: none;
	display: block;
	width: 90%;
	background-color: #00381d;
	margin-right: auto;
	margin-left: auto;
	line-height: 30px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
    margin-bottom: 20px;
	position: relative;
	max-width: 600px;
}
.content .res_tel  .tel_btn a i {
	padding-right: 10px;
	font-size: 120%;
}
.content .res_tel  .tel_btn a:hover {
	color: #00381d;
	background-color: #FFF;
	border-top-color: #00381d;
	border-right-color: #00381d;
	border-bottom-color: #00381d;
	border-left-color: #00381d;
}






.content .camp .category ul
{ display: flex;
  list-style-type: none;
  padding: 0;
  width: 100%;
    bottom: 1px;
}
.content .camp .category ul.area
{   border-bottom: 1px solid #00381D;

}

.content .camp .category li{
 display: flex;
  align-self: auto;
  flex: 1;
  border-right: 1px solid #00381D;
  min-width: 0;
	cursor: pointer;
}
.content .camp .category li:first-child{
  border-left: 1px solid #00381D;
}

.content .camp .category li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 10px 2px;
  color: #2A2A2A;
  text-decoration: none;
  text-align: center;
  background-color: #DDC693;
  word-break: break-all;
  box-sizing: border-box;
}

.content .camp .category  li:hover {
    background-color: #FFDE95;
}
.content .camp .category li.slct{
	    background-color: #FFDE95;

}


.content .c_box {
    /*display: none;はじめは非表示*/
    position: relative;
background: #FFF;
    border: 1px #444 solid;
    margin: 0em auto 30px ;
    padding: 10px 30px 30px 30px ;
}

.content .c_box p {
	font-size: 16px;
	line-height: 1.8em;
	margin:10px 0px 20px;
}

.content .c_box img {
    box-sizing: border-box;
    width: 40%;
    border-radius: 10px;
    z-index: 1; /* safari用 */
}
.content .c_box .c_price {
    position: relative;
    float: left;
    width: 55%;
}
/*キャンプスライダー用CSS*/
.content_flex{
	display: flex;
	
}
.content_flex .img_box{
    box-sizing: border-box;
    width: 40%;
    z-index: 1; /* safari用 */
	margin-right: 20px;
}
.content_flex .img_box img{
    width: 100%;
}
.content_flex .slider {
    box-sizing: border-box;
    width: 40%;
    z-index: 1; /* safari用 */
	margin-right: 20px;
}
.content_flex .article {
    position: relative;
    width: 55%;
}
.content_flex .article .c_price{
    position: relative;
    float: none;
    width: 100%;
}
/*キャンプスライダー用CSS　ここまで*/


.content .c_box h4 {
 position: relative;
    letter-spacing: 0.5em;
  padding: 5px 5px 5px 1em;
  background: #00381D;
  font-size: clamp(14px,4vw, 20px);
  color: #FFF;
  margin-left: 0px;
  margin-right: 0px;
  line-height: 1.3;
  border-bottom: solid 1px #00381D;
    z-index:1;
}

.content .c_box h4:before{
content:'〉〉〉〉';    
        letter-spacing: -0.5em;
padding-right: 1em;}

.content .c_box h4:after {
  position: absolute;
  content: '';
  right: 0px;
  top: -2px;
  width: 40%;
  height: 0;
  border: none;
  border-left: solid 30px transparent;
  border-top: solid 37px white;
  z-index: 2;
}


.content .c_box a.btn_c {
    position: absolute;
    top: 20px;
    right: 20px;
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 30%;
	margin: auto;
	padding: 5px 5px;
	font-weight: bold;
	border: 2px solid #00381D;
	background: #00381D;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
    z-index:20;
}
.content .c_box a.btn_c:hover {
	color: #00381D;
	background: #fff;
}



.content .c_box .c_title {
    display: flex;
}

.content .c_box .sub_t {
    position:relative;
    width: 40%;
    margin-right: 20px;
}

.content .c_box .sub_t h5{
    font-size: 22px;
    border-right: 1px solid #444;

}
.content .c_box .sub_t h5 span{
    font-size: 50%;
   box-sizing:border-box;
	position:absolute;
	top: 30px;
	left: 0px;
    margin: 0;
	font-weight: bold;
    text-align: center;
    width: 100%;
padding: 3px 20px 3px 20px;
    color: #FFF;
    margin-bottom: 20px;
}
.content .c_box   h6{
    font-size: 20px;
      flex: 1;

}

/*キャンプ汎用サブタイトル*/
.content .c_box .c_dec h5:before {
content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
background: url(../../../img/common/icon/c_dec.png) no-repeat top;
  background-size:cover;
    margin-left: 10px;
    margin-right: 10px;
}
.content .c_box .c_dec  h5 span{
    background-color: #005C2F;
}
.content .c_box .c_dec h5,
.content .c_box .c_dec h6 {
    color: #005C2F;
}








.content .c_box .s table td {
    width:calc(100%/3);}
.content .c_box .s {
    border-bottom: 1px solid;
    margin-bottom: 30px;
}

.content .c_box .c table td {
    width:calc(100%/2);
}
.content .c_box .c {
    border-bottom: 1px solid;
    margin-bottom: 30px;
}


.content .camp li .category {
    margin: 0 0 1px;
    font-size: 80%;}


.title{
	margin-bottom: 30px;
}







@media screen and (max-width:680px){
    
.content .c_box .c_title {
    display: block;
    
}
.content .c_box .sub_t {
    width: 100%;
    float: none;
}
    .content .c_box h6 {
    position:static;
    clear: both;
    margin-top: 2em;
    padding: 0;}
        
.content .c_box img {
    box-sizing: border-box;
    width: 100%;
    border-radius: 10px;
    z-index: 1; /* safari用 */
}
.content .c_box .c_price {
    position:static;
    width: 100%;
}

    
    
    
  .tb_list .head{
    display:none;
  }
  .tb_list {
    width: 100%;
  }
  .tb_list td,
  .tb_list th{
    display: block;
    width: 100%;
      border-right: none;
      border-left: none;
      border-bottom: none;
  }
  .tb_list  td{
    padding: 0px 12px 0 0;
    display: block;
    width: 100%;
    line-height: 2.3;
    text-align:left;
        border-bottom: 1px solid;
}
    
  .tb_list td:before{
    color: #fff;
    content: attr(data-label);
    font-weight: bold;
    padding: 0px 10px;
      min-width: 40%;
    display: inline;
    background-color: #00562D;
    margin-right: 20px;
    float: left;
    }    
    
table.tb_list th:first-child
    {
    width: 100%; margin-top: 20px;
}
table.tb_list th span
    {
margin-left: 1em; display: inline;}
        
    
    
    
    
    
  .tb_rent .head{
    display:none;
  }
  .tb_rent {
    width: 100%;
  }
  .tb_rent td,
  .tb_rent th{
    display: block;
    width: 100%;
      border-right: none;
      border-left: none;
      border-bottom: none;
  }
  .tb_rent td{
    padding: 0px 12px 0 0;
    display: block;
    width: 100%;
    line-height: 2.5;
    text-align:left;
  }
      .tb_rent td:first-child{
    font-weight: bold;
    text-align: left;
    border: none;}
    
  .tb_rent td:before{
    color: #fff;
    content: attr(data-label);
    font-weight: bold;
    padding: 0px 10px;
      min-width: 40%;
    display: inline;
    background-color: #00562D;
    margin-right: 20px;
    float: left;
  }
  .tb_rent td:last-child{
   margin-bottom: 20px;
      border-bottom: 1px solid;
    
  }
    
    
    
    
    
.content .camp .col2 li {
	width: 100%;
	margin-bottom: 1px;
    display: flex;
    flex-direction: column;
}    
.content .camp .col2 li:first-child {
    max-height: 130px;
	width: 100%;
    }
.content .camp .col2 li:last-child {
    max-height: 450px;}
        
    
.content .res_tel  li {
	width: 100%;
	margin-bottom: 1px;
    display: flex;
    flex-direction: column;
}    
.content .res_tel li:first-child {
	width: 100%;
    margin-bottom: 30px;
    }
    
        .content .c_box  {
    position: static;
    padding: 20px;
    }
    
    
.content .c_box a.btn_c {
	width: 80%;
    position:static;
    margin-bottom: 1.5em;
    }
    .content .c_box h4:after {
          width: 10%;
    }
/*キャンプスライダー用CSS*/
.content_flex{
	display: flex;
	flex-direction: column;
}
.content_flex .img_box{
    width: 100%;
	margin-right: 20px;
}

.content_flex .slider {
    box-sizing: border-box;
    width: 100%;
    z-index: 1; /* safari用 */
	margin: 0;
}
.content_flex .article {
    position: relative;
    width: 100%;
}
.content_flex .article .c_price{
    position: relative;
    float: none;
    width: 100%;
}
/*キャンプスライダー用CSS　ここまで*/
  
    
}



/*みずなら　#0098FF*/
.content .c_box .s_miz h5:before {
content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
background: url(../../../img/common/icon/site_miz.png) no-repeat top;
  background-size:cover;
    margin-left: 10px;
    margin-right: 10px;
}
.content .c_box .s_miz h5 span{
    background-color: #0098FF;
}
.content .c_box .s_miz h5,
.content .c_box .s_miz h6 {
    color: #0098FF;
}
.content .c_box .s_miz td {
    border-color: #0098FF;
}
.content .c_box .s_miz th {
    background-color: #0098FF;
    color: #FFF;
}
table.tb_list .s_miz {
    background-color: #0098FF;
}


/*しらかば　#AE0C0C*/
.content .c_box .s_sir h5:before {
content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
background: url(../../../img/common/icon/site_sir.png) no-repeat top;
  background-size:cover;
    margin-left: 10px;
    margin-right: 10px;
}
.content .c_box .s_sir h5 span{
    background-color: #AE0C0C;
}
.content .c_box .s_sir h5,
.content .c_box .s_sir h6 {
    color: #AE0C0C;
}

.content .c_box .s_sir td {
    border-color: #AE0C0C;
}
.content .c_box .s_sir th {
    background-color: #AE0C0C;
    color: #FFF;
}
table.tb_list .s_sir {
    background-color: #AE0C0C;
}





/*からまつ　#EF7B00*/
.content .c_box .s_kar h5:before {
content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
background: url(../../../img/common/icon/site_kar.png) no-repeat top;
  background-size:cover;
    margin-left: 10px;
    margin-right: 10px;
}
.content .c_box .s_kar h5 span{
    background-color: #EF7B00;
}
.content .c_box .s_kar h5,
.content .c_box .s_kar h6 {
    color: #EF7B00;
}
.content .c_box .s_kar td {
    border-color: #EF7B00;
}
.content .c_box .s_kar th {
    background-color: #EF7B00;
    color: #FFF;
}

table.tb_list .s_kar {
    background-color: #EF7B00;
}



/*コテージ　#645639*/

.content .c_box .c_cot h5:before {
content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
background: url(../../../img/common/icon/cottage.png) no-repeat top;
  background-size:cover;
    margin-left: 10px;
    margin-right: 10px;
}
.content .c_box .c_cot h5 span{
    background-color: #645639;
}
.content .c_box .c_cot h5,
.content .c_box .c_cot h6 {
    color: #645639;
}
.content .c_box .c_cot td {
    border-color: #645639;
}
.content .c_box .c_cot th {
    background-color: #645639;
    color: #FFF;
}

/*ゆのみの湯　#EE6C82*/

.content .c_box .c_spa h5:before {
content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
background: url(../../../img/common/icon/spa.png) no-repeat top;
  background-size:cover;
    margin-left: 10px;
    margin-right: 10px;
}
.content .c_box .c_spa h5 span{
    background-color: #EE6C82;
}
.content .c_box .c_spa h5,
.content .c_box .c_spa h6 {
    color: #EE6C82;
}
.content .c_box .c_spa td {
    border-color: #EE6C82;
}
.content .c_box .c_spa th {
    background-color: #EE6C82;
    color: #FFF;
}


/*アウトドア　#1A77CF*/

.content .c_box .c_out h5:before {
content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
background: url("../../../img/common/icon/outdoor.png") no-repeat top;
  background-size:cover;
    margin-left: 10px;
    margin-right: 10px;
}
.content .c_box .c_out h5 span{
    background-color: #5766C2;
}
.content .c_box .c_out h5,
.content .c_box .c_out h6 {
    color: #5766C2;
}
.content .c_box .c_out td {
    border-color: #5766C2;
}
.content .c_box .c_out th {
    background-color: #5766C2;
    color: #FFF;
}