@charset "utf-8";
/* =============================================================
    common 共通
============================================*/
body {
	width: 100%;
}
body,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul,dl,dt,dd {
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6,p {
	font-weight: normal;
}
li,ol,ul {
	list-style-type: none;
}

#page {
	font-size: 18px;
	margin: 0 auto;
    max-width: 1920px;
	color: #252525;
	font-family: "Noto Sans CJK JP", Lato, "Noto Sans JP", "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.4;
	background-color: #c7c041;
	font-feature-settings: "palt" 1;
	-webkit-text-size-adjust: 100%;
}
#page * {
	box-sizing: border-box;
}
#page img {
	width: 100%;
	border: 0;
	vertical-align: top;
}
#page a {
	transition: all 0.3s;
	text-decoration: none;
}
#page a:hover {
	opacity: 0.7;
}
#page a[tabindex*="-1"] {
	pointer-events: none;
}
#page a[tabindex*="-1"]:hover {
	opacity: 1;
}
#page em {
	font-style: normal;
	font-weight: bold;
}
@media screen and (min-width: 768px) {
	a[href*="tel:"] {
	  pointer-events: none;
	  cursor: default;
	  text-decoration: none;
	}
  }
@media screen and (max-width: 767px) {
	#page {
		font-size: 18px;
	}
}
@media screen and (max-width: 479px) {
	#page {
		font-size: 16px;
	}
}

.serif {
	font-family: 'Shippori Mincho', serif;
	font-weight: 600;
}
.arial {
	font-family: Arial;
}
.font_maru {
	font-family: 'Kosugi Maru',sans-serif;
}
.flex {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.inner_wrap {
	padding: 0 50px;
	margin: 0 auto;
	max-width: 1400px;
}
.block_title {
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	padding: 50px 0 20px;
}
.block_read p {
	margin: 16px auto;
}
.ib {
	font-size: inherit !important;
	display: inline-block;
}
.btn_wrap {
	text-align: center;
}
.btn {
	font-size: 28px;
	color: #fff;
	font-weight: bold;
	padding: 15px 20px;
	margin: 0 auto;
	line-height: 1.2;
	border-radius: 10px;
	display: inline-block;
}

#page-top {
    position: fixed;
    font-size: 77%;
    z-index: 500;
}
@media screen and (min-width: 768px) {
    #page-top {
        bottom: 20px;
        right: 20px;
    }
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}
}
@media screen and (max-width: 767px) {
	.btn {
		font-size: 24px;
	}
	.pc {
		display: none;
	}
    #page-top {
        bottom: 5px;
        right: 5px;
    }
    #page-top a img {
        width: 60px;
        height: auto;
    }
}
@media screen and (max-width: 479px) {
	.inner_wrap {
		padding: 0 20px;
	}
	.block_title {
		font-size: 24px;
		padding: 30px 0 20px;
	}
	.btn {
		font-size: 20px;
	}
}

.brXS, .brS, .brM, .brL, .brXL { display: none; }
.brPC { display: none; }
@media (max-width: 479px) { .brXS { display: inline; } }
@media (max-width: 599px) { .brS { display: inline; } }
@media (max-width: 767px) { .brM { display: inline; } }
@media (max-width: 1024px) { .brL { display: inline; } }
@media (max-width: 1399px) { .brXL { display: inline; } }
@media (min-width: 1400px) { .brPC { display: inline; } }

/* =============================================================
    【メインビジュアル】ブロック　
============================================*/
#main_visual {
	background: url(../images/main_bg.jpg) center bottom/1920px no-repeat;
}
.logo_wrap {
	font-size: 0em;
	max-width: 1835px;
	margin: 0 auto;
	padding: 60px 0 0;
	position: relative;
    z-index: 100;
}
.main_title {
	background: url(../images/main_logo.png) center center/contain no-repeat;
	padding-top: calc(887 / 1835 * 100%);
}
.oa_date_wrap {
	text-align: right;
	margin: 0 50px 50px;
	position: relative;
    z-index: 100;
}
.oa_date_wrap img {
	max-width: 1148px;
}
.intro {
	margin-bottom: -480px;
}
@media screen and (max-width: 1279px) {
	.logo_wrap {
		padding: 6vw 0 6vw;
	}
}
@media screen and (max-width: 1023px) {
	.intro {
		margin-bottom: -40vw;
	}
}
@media screen and (max-width: 767px) {
	.main_title {
		background: url(../images/main_logo_mob.png) center center/contain no-repeat;
		padding-top: calc(1016 / 750 * 100%);
	}
}
@media screen and (max-width: 479px) {
	.oa_date_wrap {
		text-align: right;
		margin: 0 20px 10vw;
	}
}

/* =============================================================
    【movie】ブロック　※Brightecoveの動画表示
============================================*/
.tver_wrap {
	max-width: 800px;
	margin: 0 auto;
	position: relative;
	z-index: 100;
}
.tver_wrap .img_wrap:not(:last-child) {
	margin-bottom: 20px;	
}
.limit_date {
	font-size: 18px;
    color: #fff;
    margin-top: 10px;
    text-align: center;
	text-shadow: 0 0 0.2em #6f8657, 0 0 0.2em #6f8657, 0 0 0.2em #6f8657, 0 0 0.2em #6f8657, 0 0 0.2em #6f8657, 0 0 0.3em #6f8657, 0 0 0.3em #6f8657, 0 0 0.3em #6f8657, 0 0 0.3em #6f8657, 0 0 0.3em #6f8657;
}
.movie_wrap {
	width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border: #c7c041 6px solid;
	position: relative;
	z-index: 100;
}
#movie {
    position: relative;
    width: 100%;
    padding-top: calc(9 / 16 * 100%);
    margin: 0 auto;
    overflow: hidden;
}
.tvo-video {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}


/* =============================================================
    【概要】ブロック　
============================================*/
.overview_block {
	overflow: hidden;
}
.img_wrap.grass {
	text-align: center;
	overflow: hidden;
}
.overview_top .img_wrap.grass {
	position: absolute;
	bottom: 0;
}
.img_wrap.grass img {
	width: 1920px !important;
}
.overview_top {
	background: url(../images/warutakoru.png) right 5% no-repeat #6f8657;
	padding: 480px 0 0;
    margin-bottom: -450px;
    height: 750px;
	position: relative;
}
.overview_top_read {
	font-size: 28px;
	color: #fff;
	text-align: center;
	padding: 0 0 70px;
	text-shadow: 0 0 0.2em #6f8657, 0 0 0.2em #6f8657, 0 0 0.2em #6f8657, 0 0 0.2em #6f8657, 0 0 0.2em #6f8657, 0 0 0.3em #6f8657, 0 0 0.3em #6f8657, 0 0 0.3em #6f8657, 0 0 0.3em #6f8657, 0 0 0.3em #6f8657;
	position: relative;
	z-index: 100;
}
.img_wrap.takoru {
	max-width: 559px;
	margin-left: 50px;
	position: relative;
	z-index: 50;
}
.img_wrap.signboard {
	text-align: right;
	position: relative;
    z-index: 30;
}
.img_wrap.signboard img {
	max-width: 215px;
	margin: -250px 100px 0 0;
}
.bg_grass_wrap {
	background: url(../images/ptn_grass.jpg) top center repeat;
	padding: 145px 0 0;
    margin-top: -145px;
}
.overview_btm_read {
	font-size: 28px;
	text-align: center;
}
.overview_top_read p:not(:last-child),
.overview_btm_read p:not(:last-child) {
	margin-bottom: 0.8em;
}
@media screen and (max-width: 1599px) {
	.overview_top {
		background: url(../images/warutakoru.png) right 60% no-repeat #6f8657;
	}
}
@media screen and (max-width: 1023px) {
	.overview_top_read,
	.overview_btm_read {
		font-size: 22px;
	}
	.img_wrap.signboard img {
		width: 16vw !important;
		max-width: 215px;
		margin: -25vw 2vw 0 0;
	}
	.bg_grass_wrap {
		padding: 22vw 0 0;
		margin-top: -20vw;
	}
}
@media screen and (max-width: 767px) {
	.overview_top {
		background: url(../images/warutakoru.png) right 40%/50vw no-repeat #6f8657;
		padding: 62vw 0 0;
		margin-bottom: -52vw;
		height: 110vw;
	}
	.img_wrap.takoru {
		width: 65vw;
		margin-left: 20px;
	}
}
@media screen and (max-width: 479px) {
	.bg_grass_wrap {
		padding: 28vw 0 0;
		margin-top: -26vw;
	}
	.overview_top_read,
	.overview_btm_read {
		font-size: 18px;
	}
	.overview_top {
		background: url(../images/warutakoru.png) right 30%/50vw no-repeat #6f8657;
		padding: 56vw 0 0;
		margin-bottom: -48vw;
	}
}
@media screen and (max-width: 369px) {
	.overview_top {
		height: 120vw;
	}
}

/* =============================================================
    【チャレンジ】ブロック　
============================================*/
.challenge_cont {
	background: url(../images/paper_mid.png) center top/100% repeat-y;
	text-align: center;
	padding: 0 0 30px;
}
.img_wrap.title_challenge {
	width: 40vw;
	max-width: 240px;
	margin: 0 auto;
}

.challenge_wrap {
	background: url(../images/grass_challe.png) center 90%  no-repeat;
	margin-top: 70px;
}
.challenge_wrap .inner_wrap {
	background: url(../images/takoru_waru.png) 90% top no-repeat;
	padding-top: 80px;
}
.challenge_subTitle {
	font-size: 48px;
	font-weight: bold;
	line-height: 1.6;
	margin: 0.8em auto;
	padding: 0 8vw 8px;
}
.challenge_subTitle em {
	border-bottom: dotted 6px #859887;
}
.challenge_photo.flex {
	padding: 0 6vw 0;
    margin: 0 auto;
}
.challenge_photo.flex .img_wrap {
	flex: 0 0 48%;
}
@media screen and (max-width: 1023px) {
	.challenge_subTitle {
		font-size: 38px;
	}
}
@media screen and (max-width: 767px) {
	.challenge_cont {
		padding: 0 0 2vw;
	}
	.challenge_wrap .inner_wrap {
		background: url(../images/takoru_waru.png) 80% top/120px no-repeat;
		padding-top: 55px;
	}
	.challenge_subTitle {
		font-size: 5vw;
	}
	.challenge_photo.flex {
		padding: 0 8vw 0;
	}
	.challenge_photo.flex .img_wrap {
		flex: 0 0 100%;
	}
	.challenge_photo.flex .img_wrap:not(:last-child) {
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 479px) {
	.challenge_wrap {
		margin-top: 10vw;
	}
	.challenge_subTitle em {
		border-bottom: dotted 4px #859887;
	}
}

/* =============================================================
    【今回のキャンプ場】ブロック　
============================================*/
.title_areaINFO {
	max-width: 670px;
	margin: 70px auto 0;
}
.area_info_wrap {
	text-align: center;
}
.area_info_wrap i {
	font-size: 48px;
	color: #0f6b4a;
	margin: 20px auto 30px;
}
.area_name {
	font-size: 48px;
}
.area_name em {
	border-bottom: dotted 6px #fff;
}
.area_address {
	font-size: 28px;
	margin: 30px auto;
}
@media screen and (max-width: 767px) {
	.area_name {
		font-size: 38px;
	}
}
@media screen and (max-width: 479px) {
	.area_name {
		font-size: 8vw;
	}
	.area_address {
		font-size: 20px;
	}
}




/* =============================================================
    【アニメーション】ブロック
============================================*/
.fuwafuwa {
	animation: fuwafuwa 2s infinite;
}
@keyframes fuwafuwa {
	0% {
	transform: translateY(10px);
   }
	50% {
	transform: translateY(-10px);
   }
	100% {
	transform: translateY(10px);
   }
}
.fadein {
    animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.slidein {
    animation: slideIn 4.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn {
  0% {
	transform: translateX(-100px);
    opacity: 0;
  }
  60% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  80%,100% {
    opacity: 1;
  }
}