@charset "UTF-8";
/**
*
* キャンプナビ　キャンプ予報
*
*/

/* ==========================================================================
アイコン表示
========================================================================== */
.icon {
  text-align: center;
  width: 96px;
  height: 96px;
  display: inline-block;
  vertical-align: middle;
}

.icon-camp {
  padding-left: 140px;
  font-size: 28px;
  font-size: 2.8rem;
}

.icon-camp-a {
  background: url(https://cdn1.n-kishou.co.jp/image/misc/icon_camp_a.png) no-repeat center left;
  background-size: 100px auto;
}
.icon-camp-b {
  background: url(https://cdn1.n-kishou.co.jp/image/misc/icon_camp_b.png) no-repeat center left;
  background-size: 100px auto;
}
.icon-camp-c {
  background: url(https://cdn1.n-kishou.co.jp/image/misc/icon_camp_c.png) no-repeat center left;
  background-size: 100px auto;
}
.icon-camp-d {
  background: url(https://cdn1.n-kishou.co.jp/image/misc/icon_camp_d.png) no-repeat center left;
  background-size: 100px auto;
}

.camp-lva {
  background: url(https://cdn1.n-kishou.co.jp/image/misc/icon_camp_a.png) no-repeat center;
  background-size: contain;
}
.camp-lvb {
  background: url(https://cdn1.n-kishou.co.jp/image/misc/icon_camp_b.png) no-repeat center;
  background-size: contain;
}
.camp-lvc {
  background: url(https://cdn1.n-kishou.co.jp/image/misc/icon_camp_c.png) no-repeat center;
  background-size: contain;
}
.camp-lvd {
  background: url(https://cdn1.n-kishou.co.jp/image/misc/icon_camp_d.png) no-repeat center;
  background-size: contain;
}

@media screen and (min-width: 751px) {
  .icon {
    width: 72px;
    height: 72px;
  }

  .icon-camp {
    padding-left: 100px;
    font-size: 16px;
    font-size: 1.6rem;
  }

  .icon-camp-a, .icon-camp-b, .icon-camp-c, .icon-camp-d {
    background-size: 70px auto;
  }
}

/* ==========================================================================
ここに注目
========================================================================== */
.camp-info-list {
  overflow: hidden;
  margin-bottom: 50px;
  border-radius: 10px;
}

.camp-info-list li.bg-red {
  background-color: #ed4350;
}
.camp-info-list li.bg-yellow {
  background-color: #f5b222;
}
.camp-info-list li.bg-blue {
  background-color: #0095db;
}

.camp-info-list li {
  box-sizing: border-box;
  border-bottom: 2px solid #efefef;
}

.camp-info-list li > a {
  display: block;
  padding: 26px 60px 20px 20px;
  text-decoration: none;
  color: #fff;
  font-family: "ヒラギノ角ゴ Pro W6","HiraKakuPro-W6","メイリオ", sans-serif;
  font-style: normal;
  font-size: 22px;
  font-size: 2.2rem;
}

.camp-info-list li > a > span {
  font-weight: 700;
  font-size: 28px;
  font-size: 2.8rem;
}

@media screen and (min-width: 751px) {
  .camp-info-list li > a {
    padding: 12px 50px 12px 20px;
    font-size: 14px;
    font-size: 1.4rem;
  }
  .camp-info-list li > a > span {
    font-size: 16px;
    font-size: 1.8rem;
  }
  .camp-info-list li > a:after,
  .camp-info-list li > span:after {
    right: 20px;
  }
}

/* 白セクションに入れるcmn-sttl2 */
.cmn-sttl2.sct-camp-ttl {
  color: #86511b !important;
  border-color: #86511b !important;
}



/* ==========================================================================
  翌日前日ボタン
  ========================================================================== */
.page-control2 .btn-next,
.page-control2 .btn-prev {
  width: 25%;
}

.page-control2 .btn-next > *,
.page-control2 .btn-prev > * {
  padding: 15px 20px;
  display: inline-block;
  background: #86511b;
  font-family: "ヒラギノ角ゴ Pro W6","HiraKakuPro-W6","メイリオ", sans-serif;
  font-style: normal;
  font-weight: 700;
  color: #fff;
}

.page-control2 .btn-next > span,
.page-control2 .btn-prev > span {
  background: #BFBFBF;
  color: #A6A2A2;
  -ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), inset 0 -4px 0 2px rgba(130, 130, 130, 0.5);
  -o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), inset 0 -4px 0 2px rgba(130, 130, 130, 0.5);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), inset 0 -4px 0 2px rgba(130, 130, 130, 0.5);
}

.page-control2 .btn-next > span.hover, .page-control2 .btn-next > span.touch,
.page-control2 .btn-prev > span.hover,
.page-control2 .btn-prev > span.touch {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), inset 0 -4px 0 2px rgba(130, 130, 130, 0.5);
  -o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), inset 0 -4px 0 2px rgba(130, 130, 130, 0.5);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), inset 0 -4px 0 2px rgba(130, 130, 130, 0.5);
}

.page-control2 .btn-next > span:before, .page-control2 .btn-next > span:after,
.page-control2 .btn-prev > span:before,
.page-control2 .btn-prev > span:after {
  border-color: #A6A2A2;
}

.page-control2 .btn-prev > *:before {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  content: "";
  border-bottom: 4px solid #fff;
  border-left: 4px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.page-control2 .btn-next {
  text-align: right;
}

.page-control2 .btn-next > *:after {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  content: "";
  border-bottom: 4px solid #fff;
  border-left: 4px solid #fff;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.page-control2 .btn-cmn,
.page-control2 .btn-cmn > span
{
  margin-top: 0;
  width: 49%;
  margin-bottom: 8px;
}

.page-control2 .btn-prev a,
.page-control2 .btn-next a,
.page-control2 .btn-prev > span,
.page-control2 .btn-next > span
{
  width: 88%;
  text-align: center;
}

@media screen and (min-width: 751px) {
  .page-control2 .btn-prev > *:before {
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-width: 3px;
  }
  .page-control2 .btn-next > *:after {
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border-width: 3px;
  }
}

/* 見出し部分のpage-control */
.page-control .btn-next, .page-control .btn-prev {
  width: 15%;
}

.page-control .btn-next > *,
.page-control .btn-prev > * {
  padding: 20px 25px;
}

.page-control .cmn-sttl4 {
  width: 450px;
  margin: 0px auto;
  box-sizing: border-box;
  height:95px;
  padding-top:21px;
}

.page-control .btn-prev > *:before {
  margin-right: 0px;
  margin-left: 8px;
}

.page-control .btn-next > *:after {
  margin-right: 8px;
  margin-left: 0px;
}

@media screen and (min-width: 751px) {
  .page-control .btn-next, .page-control .btn-prev {
    margin-top: 0px;
  }
  .page-control .btn-next > *,
  .page-control .btn-prev > * {
    padding: 20px 25px;
  }

  .page-control .cmn-sttl4 {
  width: 430px;
  margin: 0px auto;
  box-sizing: border-box;
  height:68px;
  padding-top:20px;
  }
}

/* ==========================================================================
雨雲のようす
========================================================================== */

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

  .sct-kamn02 .sct-kamn-fbox{
    width: 100%;
    text-align: center; }
	.sct-kamn02 .sct-kamn-fbox .sct-kamn-fbox-text{
		width: 100%;
		text-align: left;}
.sct-kamn02 .sct-kamn-data .sct-kamn-ttl {
  font-size: 35px;
  font-size: 3.5rem; }

.sct-kamn02 .sct-kamn-data .sct-kamn-map-img {
  width: 217px;
	padding-right: 20px;
}

.sct-kamn02 .sct-kamn-data .sct-kamn-text {
  text-align: center;
  font-size: 3rem;
  color: #86511b;}
.sct-kamn02 .sct-kamn-data .sct-kamn-map-contents {
  width: 440px;
  padding-top: 10px; }

.sct-kamn02 .sct-kamn-data .sct-kamn-map-contents .sct-kamn-time {
  margin-bottom: 15px;
  text-align: center;
  font-size: 24px;
  font-size: 2.4rem;
  font-family: "ヒラギノ角ゴ Pro W6", "HiraKakuPro-W6", "メイリオ", sans-serif;
  font-style: normal;
  font-weight: 700; }

.sct-kamn02 .sct-kamn-data .sct-kamn-map-contents .btn-more {
  width: 100%;
  margin-bottom: 20px; }

.sct-kamn02 .sct-kamn-data .sct-kamn-map-contents .btn-more a {
  display: block;
  padding: 10px 35px 10px 15px;
  font-size: 23px;
  font-size: 3.8rem; }

.sct-kamn02 .sct-kamn-data .sct-kamn-map-contents .btn-more a:after {
  right: 20px; }

.sct-kamn02 .sct-kamn-data .sct-kamn-map-contents .btn-more:last-child {
  margin-bottom: 0; }

.sct-kamn02 .sct-kamn-link {
  float: left;
  width: 240px; }

.sct-kamn02 .sct-kamn-link .btn-cmn {
  margin-bottom: 15px; }

.sct-kamn02 .sct-kamn-link .btn-cmn a {
  display: block;
  padding: 25px 0;
  font-size: 28px;
  font-size: 2.8rem; }

.sct-kamn02 .sct-kamn-link .btn-cmn:nth-child(2) {
  margin-bottom: 40px; }

@media screen and (min-width: 751px) {


		.sct-kamn02 .sct-kamn-fbox{
      width: 100%;
      text-align: center;}
		.sct-kamn02 .sct-kamn-fbox .sct-kamn-fbox-text{
			width: 100%;
			text-align: left;}
.sct-kamn02 .sct-kamn-data .sct-kamn-text {
  text-align: left;
  font-size: 2rem;
  color: #86511b;}
  .sct-kamn02 .sct-kamn-data .sct-kamn-ttl {
    font-size: 24px;
    font-size: 2.4rem; }
  .sct-kamn02 .sct-kamn-data .sct-kamn-map-img {
    width: 200px;
		padding-right: 20px;
}
  .sct-kamn02 .sct-kamn-data .sct-kamn-map-contents {
    width: 155px;
    padding-top: 5px; }
  .sct-kamn02 .sct-kamn-data .sct-kamn-map-contents .sct-kamn-time {
    font-size: 18px;
    font-size: 1.8rem; }
  .sct-kamn02 .sct-kamn-data .sct-kamn-map-contents .btn-more {
    margin-bottom: 20px; }
  .sct-kamn02 .sct-kamn-data .sct-kamn-map-contents .btn-more a {
    font-size: 16px;
    font-size: 1.6rem; }
  .sct-kamn02 .sct-kamn-link {
    float: left;
    width: 200px; }
  .sct-kamn02 .sct-kamn-link .btn-cmn {
    margin-bottom: 15px; }
  .sct-kamn02 .sct-kamn-link .btn-cmn a {
    display: block;
    padding: 20px 0;
    font-size: 21px;
    font-size: 2.1rem; }
  .sct-kamn02 .sct-kamn-link .btn-cmn:nth-child(2) {
    margin-bottom: 30px; }
  .sct-kamn02 .sct-kamn-link .btn-cmn2 {
    display: block; }
  .sct-kamn02 .sct-kamn-link .btn-cmn2 a {
    text-align: center; }
}
.inn-kamn-text{
  text-align: center;
  color: #86511b;
}
.kamn-cmn-sttl3{
  color: #ffffff;
  font-size: 34px;
  font-size: 3.4rem;
}
.kamn-cmn-sttl3:after, .kamn-cmn-sttl3:before {
  display: inline-block;
  content: "/";
  font-size: 34px;
  font-size: 3.4rem;
}
.kamn-cmn-sttl3:before {
  margin-right: 15px;
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.kamn-cmn-sttl3:after {
  margin-left: 15px;
}
@media screen and (min-width: 751px) {
	.kamn-cmn-sttl3{
	  color: #ffffff;
	  font-size: 34px;
	  font-size: 2.2rem;
	}
	.kamn-cmn-sttl3:after, .kamn-cmn-sttl3:before {
	  display: inline-block;
	  content: "/";
	  font-size: 34px;
	  font-size: 2.2rem;
	}
	.kamn-cmn-sttl3:before {
	  margin-right: 15px;
	  -webkit-transform: scale(-1, 1);
	  transform: scale(-1, 1);
	}
	.kamn-cmn-sttl3:after {
	  margin-left: 15px;
	}
}

/* ==========================================================================
風情報
========================================================================== */
.camp-wind-info .camp-wind-info-titletxt{
	font-size:22px;
}
.camp-wind-info .camp-wind-info-txt {
	font-size:24px;
	font-weight: bold;
}

@media screen and (min-width: 751px) {
	.camp-wind-info .camp-wind-info-titletxt{
		font-size:16px;
	}
	.camp-wind-info .camp-wind-info-txt {
		font-size:16px;
		font-weight: bold;
	}
}


/* ==========================================================================
風向矢印アイコン
========================================================================== */
/* 北（の風） */
.compass-s{
}
/* 北北東 */
.compass-ssw{
	-webkit-transform: rotateZ(22.5deg);
	transform: rotateZ(22.5deg);
}
/* 北東 */
.compass-sw{
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
}
/* 東北東 */
.compass-wsw{
	-webkit-transform: rotateZ(67.5deg);
	transform: rotateZ(67.5deg);
}
/* 東 */
.compass-w{
	-webkit-transform: rotateZ(90deg);
	transform: rotateZ(90deg);
}
/* 東南東 */
.compass-wnw{
	-webkit-transform: rotateZ(112.5deg);
	transform: rotateZ(112.5deg);
}
/* 南東 */
.compass-nw{
	-webkit-transform: rotateZ(135deg);
	transform: rotateZ(135deg);
}
/* 南南東 */
.compass-nnw{
	-webkit-transform: rotateZ(157.5deg);
	transform: rotateZ(157.5deg);
}
/* 南 */
.compass-n{
	-webkit-transform: rotateZ(180deg);
	transform: rotateZ(180deg);
}
/* 南南西 */
.compass-nne{
	-webkit-transform: rotateZ(202.5deg);
	transform: rotateZ(202.5deg);
}
/* 南西 */
.compass-ne{
	-webkit-transform: rotateZ(225deg);
	transform: rotateZ(225deg);
}
/* 西南西 */
.compass-ene{
	-webkit-transform: rotateZ(247.5deg);
	transform: rotateZ(247.5deg);
}
/* 西 */
.compass-e{
	-webkit-transform: rotateZ(270deg);
	transform: rotateZ(270deg);
}
/* 西北西 */
.compass-ese{
	-webkit-transform: rotateZ(292.5deg);
	transform: rotateZ(292.5deg);
}
/* 北西 */
.compass-se{
	-webkit-transform: rotateZ(315deg);
	transform: rotateZ(315deg);
}
/* 北北西 */
.compass-sse{
	-webkit-transform: rotateZ(337.5deg);
	transform: rotateZ(337.5deg);
}

/* ==========================================================================
天気予報
========================================================================== */
.sct-weather p.text-r{
	padding-bottom:10px;
}

/* ==========================================================================
日の出日の入りの文字
========================================================================== */
.wrap-tbl .tbl-sun td{
	font-weight: 700; /*太字に*/
	  font-family: "ヒラギノ角ゴ Pro W6", "HiraKakuPro-W6", "メイリオ", sans-serif;
}


/* ==========================================================================
前日翌日ボタンマウスホバー時動くバグ解消
========================================================================== */
a:link,
a:hover {
  overflow: initial !important;
  outline: none;
}

/* ==========================================================================
タイトル横二連ボタン
========================================================================== */
.title-btn{
  padding-top:120px;
}
.fr03 {
  position:relative;
  top:-3px;
  margin-left: 170px;

}

@media screen and (min-width: 751px) {
.fr03 {
  position:relative;
  top:0px;
  margin-left: 220px;
  }
}