@charset "utf-8";

/* header
------------------------------------------------------------------------------------ */
header {background-color: rgba(0,49,93,0.0) !important;}
.is-animation {background-color: rgba(0,49,93,0.85) !important;}

/* top common
------------------------------------------------------------------------------------ */
section .topInner{max-width: 980px;	margin: auto;}

/* mainimage
------------------------------------------------------------------------------------ */
div#mainimage {
	height: auto;
	min-height: 100vh;
	background: url(../../img/top/mv_bg@1.5x.jpg) 50% bottom no-repeat;
	background-size: cover;
}
div#mainimage h2 {
	max-width: 340px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}
div#mainimage h2 img {width: 100%;}


/* info
------------------------------------------------------------------------------------ */
section#info {
	width:100%;
	margin:0 auto;
}
section#info h3{
    margin: 0;
    padding: 14px 0;
	background: #000;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
	font-family: initial;
	line-height: 1.5;
    letter-spacing: 0.1em;
	cursor: pointer;
}
section#info h3 span{
    position: relative;
	display: block;
    width: fit-content;
    margin: auto;
}
section#info h3 span::before{
	content: "";
	background: url("../../img/top/icon_question_ye@3x.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: -1px;
    left: -2.2em;
    width: 21px;
    height: 22px;
}
section#info h3 span::after{
	content: "";
	background: url("../../img/top/btn_arrow_y_down@3x.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: 24%;
    right: -3em;
    width: 16px;
    height: 10px;
}
section#info h3.selected span::after{
	background: url("../../img/top/btn_arrow_y_up@3x.png") no-repeat;
    background-size: 100%;
}
section#info .infoInner{
	padding: 3em 0 1em;
	background: #eee;
}
section#info .infoInner dl{
	max-width: 580px;
	margin: auto;
	padding-bottom: 3em;
}
section#info .infoInner dt{
	margin-bottom: 1em;
    padding: 1% 0;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.2;
}
section#info .infoInner dt span{
    position: relative;
	display: block;
    width: fit-content;
    margin: auto;
}
section#info .infoInner dt span::before{
	content: "";
	background: url("../../img/top/icon_question_bl@3x@3x.png")no-repeat;
	background-size: 100%;
	position: absolute;
	top: 0;
	left: -2em;
	width: 24px;
	height: 24px;
	
}
section#info .infoInner dd{}
section#info .info_close{
	text-align: center;
	color: #666;
}
section#info .info_close span{
    position: relative;
	display: block;
    width: fit-content;
    margin: auto;
	cursor: pointer;
}
section#info .info_close span::after{
	content: "";
	background: url("../../img/top/btn_arrow_g_down@3x.png")no-repeat;
	width: 16px;
    height: 9px;
    position: absolute;
    top: 31%;
    right: -50%;
    background-size: 100%;
}

/* news
------------------------------------------------------------------------------------ */
section#news{margin: 100px auto;}
section#news .topInner>dl{
	max-width: 980px;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
section#news .topInner>dl>dt{
	max-width: 200px;
	width: 26%;
}
section#news .topInner>dl>dt img{
	max-width: 40px;
}
section#news .topInner>dl>dd{
    display: flex;
    flex-wrap: wrap;
    max-width: 780px;
    margin: 0;
}
section#news .topInner>dl>dd dl{display: flex;align-items: center;gap: 0 2rem;width: 100%;padding: 15px 0; border-bottom: 1px solid #eee; font-size: 14px;line-height: 1.6;}
section#news .topInner>dl>dd dl dt{font-weight: bold;}
section#news .topInner>dl>dd dl dd{}
section#news .topInner>dl>dd dl dd a{color: #29a2ba;}
section#news .topInner>dl>dd dl dd span{display: inline-block;width: 22em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
section#news .topInner>dl>dd .btn_news{display: block;max-width: 200px;width: 30%;margin: 40px auto 0;padding: 10px 0;background: #11315b;color: #fff;border-radius: 50px;text-align: center;font-size: 14px;}

/* glastar
------------------------------------------------------------------------------------ */
section#glastar{}
section#glastar .about{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
}
section#glastar .about dt{
	width: 49%;
}
section#glastar .about dt img{
	width: 100%;
}
section#glastar .about dd{
	width: 49%;
}
section#glastar .about dd div{
	max-width: 350px;
	margin: auto;
}
section#glastar .about dd div h5{
	margin-bottom: 20px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.5;
}
section#glastar .about dd div p{
	text-align: justify;
}


/* movie
------------------------------------------------------------------------------------ */
section#movie{margin: 100px auto;}
section#movie img{width: 100%;}
section#movie dl{
	max-width: 780px;
	margin: 0;
	display: flex;
	justify-content: flex-start;
}
section#movie dt{
	max-width: 200px;
	width: 26%;
}
section#movie dt img{
	max-width: 40px;
}
section#movie dd{
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem 0;
    max-width: 580px;
    margin: 0;
}
section#movie dd a{
	position: relative;
    width: 48.5%;
}
section#movie dd a::before{
	content: "";
	background: url("../../img/top/btn_play.png")no-repeat;
	background-size: 100%;
	background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
	width: 18.2%;
    height: 100%;
    margin: auto;
}
section#movie dd a:first-child{
	width: 100%;
}
section#movie dd a:first-child::before{
	width: 8.8%;
}

/*modal*/
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1000;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    left: 50%;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 47.5%;
}
.movie_inner{
	width: 100%;
	aspect-ratio: 16 / 9;
}
.movie_inner iframe {
  width: 100%;
  height: 100%;
}
.js-modal-close{
	display: inline-block;
    width: 100%;
    text-align: right;
    padding: 0 5px 8px 0;
}
.js-modal-close img{
	max-width: 35px;
}



/* sec 共通
------------------------------------------------------------------------------------ */
section.sec .secInner{
	position: relative;
	max-width: 740px;
	margin: auto;
	height: 490px;
}
section.sec .secInner2{
	position: relative;
	max-width: 980px;
	margin: auto;
}
section.sec .secInner .sec_num img{max-width: 67.6px;}
section.sec .secInner .sec_ttl{margin: 1.2em 0 0;}
section.sec .secInner .sec_ttl img{max-height: 106px;}
section.sec .secInner .sec_txt{
    max-width: 200px;
    margin: 1em 0 0;
    color: #fff;
	text-align: justify;
    font-size: 16px;
    line-height: 1.8;
}
section.sec .secInner .sec_btn{
	display: block;
	max-width: 200px;
	margin: 2.5em 0 0;
	padding: 1em 0;
	background: #fff;
	color: #000;
	border: 1px solid #000;
	border-radius: 50px;
	text-align: center;
	text-decoration: none;
	font-size: 14px;
	line-height: 1;
	transition: all 0.7s ease;
}
section.sec .secInner .sec_btn:hover{
	color: #fff;
	background: #000;
	opacity: 1;
}
section.sec .secInner .sec_icon{
	position: absolute;
	top: -30px;
	right: -30px;
    margin: 0;
    padding: 0;
    line-height: 0;	
}
section.sec .secInner .sec_icon img{
	max-width: 100px;
}


/* sec01 BBQ
------------------------------------------------------------------------------------ */
section#sec01{padding: 100px 0;background:url("../../img/top/bg_or.jpg")repeat;}
section#sec01 .secInner{
	background: url("../../img/top/img_bbq@2x.jpg")no-repeat;
    background-size: 490px;
	background-position: top right;
}

/* sec02 DayTrip+BBQ
------------------------------------------------------------------------------------ */
section#sec02{padding: 100px 0;background:url("../../img/top/bg_bl.jpg")repeat;}
section#sec02 .secInner{
	background: url("../../img/top/img_day@2x.jpg")no-repeat;
    background-size: 490px;
	background-position: top right;
}

/* sec03 Stay+BBQ
------------------------------------------------------------------------------------ */
section#sec03{padding: 100px 0 130px;background:url("../../img/top/bg_ny.jpg")repeat;}
section#sec03 .secInner{
	background: url("../../img/top/img_stay@2x.jpg")no-repeat;
    background-size: 490px;
	background-position: top right;
}
section#sec03 .secInner2 ul{
	display: flex;
	justify-content: space-between;
	gap: 0 4.8rem;
	list-style: none;
	margin: 8.5em 0 0;
	padding: 0;
}
section#sec03 .secInner2 li{
	position: relative;
	width: calc(100% / 3);
}
section#sec03 .secInner2 li a{
}
section#sec03 .secInner2 li a:hover{}
/*section#sec03 .secInner2 li::after{
	content: "";
	background: url("../../img/top/btn_arrow@3x.png")no-repeat;
	background-size: 100%;
	position: absolute;
    bottom: -8%;
    right: 3.5%;
    width: 32px;
    height: 32px;
}*/
section#sec03 .secInner2 li:nth-child(1)::before{
	content: "";
	background: url("../../img/top/icon_glanpingtent@3x.png")no-repeat;
	background-size: 100%;
	position: absolute;
	top: -71px;
	right: 0;
	width: 50px;
	height: 56px;
}
section#sec03 .secInner2 li:nth-child(2)::before{
	content: "";
	background: url("../../img/top/icon_autocamp@3x.png")no-repeat;
	background-size: 100%;
	position: absolute;
	top: -64px;
	right: 0;
	width: 60px;
	height: 50px;
}
section#sec03 .secInner2 li:nth-child(3)::before{
	content: "";
	background: url("../../img/top/icon_galnpingcar@3x.png")no-repeat;
	background-size: 100%;
	position: absolute;
	top: -63px;
	right: 0;
	width: 71px;
	height: 49px;
}

section#sec03 .secInner2 li img{
	width: 100%;
}
section#sec03 .secInner2 li .sec03_ttl{
    margin: 0;
    position: absolute;
    top: -47px;
    left: -24px;
	color: #fff;
	line-height: 2;
}
section#sec03 .secInner2 li .sec03_ttl img{
	width: auto;
	max-height: 64px;
}
section#sec03 .secInner2 li .sec03_btn{
    display: block;
    position: absolute;
    top: 108%;
    left: 0;
    right: 0;
    width: 80%;
    max-width: 200px;
    margin: 0 auto;
    padding: 1em 0;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    transition: all 0.7s ease;
    z-index: 1;
}
section#sec03 .secInner2 li .sec03_btn:hover {
    color: #fff;
    background: #000;
    opacity: 1;
}

/* sec04 Activity
------------------------------------------------------------------------------------ */
section#sec04{padding: 100px 0;background:#fff;}
section#sec04 .secInner{
	background: url("../../img/top/img_sap@2x.jpg")no-repeat;
    background-size: 490px;
	background-position: top right;
}
section#sec04 .secInner .sec_txt{color: #000;}
section#sec04 .secInner .sec_num img{max-width: 73.3px;}


/* sec05 Event
------------------------------------------------------------------------------------ */
section#sec05{padding: 100px 0;background:#eee;}
section#sec05 .secInner{
	background: url("../../img/top/img_event@2x.jpg")no-repeat;
    background-size: 490px;
	background-position: top right;
}
section#sec05 .secInner .sec_txt{color: #000;}


/* period
------------------------------------------------------------------------------------ */
section#period{}
section#period a{text-decoration: underline;}
section#period .periodInner{max-width: 580px;margin: auto;padding: 120px 0;}
section#period h3.period_ttl{margin-bottom: 30px;padding: 0; background: none; text-align: center; font-size: 20px;font-weight: bold;}
section#period h3.period_ttl span{position: relative;display: inline-block;width: fit-content;margin: auto;}
section#period h3.period_ttl span::before{content: ""; background: url("../../img/top/icon_exclamation@3x.png")no-repeat;background-size: 24px;width: 24px;height: 24px;position: absolute;top: 2px;left: -1.5em;}
section#period dl{margin-top: 40px;}
section#period dt{margin-bottom: 5px; border-bottom: 1px solid #000; font-size: 16px;font-weight: bold;line-height: 1.8;}
section#period dd{margin-bottom: 20px; font-size: 14px;line-height: 1.8;}





/* ====================================================================================
SP
==================================================================================== */
@media screen and (max-width:960px) {


/* header
------------------------------------------------------------------------------------ */
header {background-color: rgba(0,49,93,0.0) !important;}

/* top common
------------------------------------------------------------------------------------ */
section .topInner{max-width: 980px;	margin: auto;}

/* mainimage
------------------------------------------------------------------------------------ */
div#mainimage {
	height: 80vw;
	min-height: 100vh;
	background: url(../../img/top/mv_bg_sp.jpg) 50% bottom no-repeat;
	background-size: cover;
}
div#mainimage h2 {
	max-width: 410px;
	width: 54.67%;
}


/* info
------------------------------------------------------------------------------------ */
section#info {
	width:100%;
	margin:0 auto;
}
section#info h3{
	font-size:min(4vw,20px);
}
section#info .infoInner{
	padding: 3em 0 1em;
	background: #eee;
}
section#info .infoInner dl{
	max-width: 600px;
	width: 88%;
	margin: auto;
	padding-bottom: 3em;
}
section#info .infoInner dt{
	margin-bottom: 1em;
    padding: 1% 0;
    text-align: center;
	font-size:min(4.8vw,24px);
    font-weight: bold;
    line-height: 1.2;
}
section#info .infoInner dt span{
    position: relative;
	display: block;
    width: fit-content;
    margin: auto;
}
section#info .infoInner dt span::before{
	content: "";
	background: url("../../img/top/icon_question_bl@3x@3x.png")no-repeat;
	background-size: 100%;
	position: absolute;
	top: 0;
	left: -1.8em;
	width: 12%;
	height: 100%;
}
section#info .infoInner dd{
    margin: 0;
    line-height: 1.8;
	font-size:min(4vw,20px);
}
section#info .info_close{
	text-align: center;
	color: #666;
}
section#info .info_close span{
    position: relative;
	display: block;
    width: fit-content;
    margin: auto;
	font-size:min(3.6vw,18px);
	cursor: pointer;
}
section#info .info_close span::after{
	content: "";
	background: url("../../img/top/btn_arrow_g_down@3x.png")no-repeat;
	width: 16px;
    height: 9px;
    position: absolute;
    top: 31%;
    right: -50%;
    background-size: 100%;
}


/* news
------------------------------------------------------------------------------------ */
section#news{margin: 20% auto;}
section#news img{width: 100%;}
section#news .topInner>dl>dt{
	width: 20%;
	text-align: center;
}
section#news .topInner>dl>dt img{max-width: 6.67vw;}
section#news .topInner>dl>dd{width: 80%;}
section#news .topInner>dl>dd dl{display: block;font-size: 3.5vw;}
section#news .topInner>dl>dd dl:first-child{padding-top: 0;}
section#news .topInner>dl>dd dl dt {font-weight: bold;margin-bottom: 3px;}
section#news .topInner>dl>dd dl dd {padding-right: 6%;}
section#news .topInner>dl>dd .btn_news {width: 60%;max-width: 400px; margin: 8% 0 0 7.8%;padding: 3.5% 0;font-size: min(3.43vw,24px);}


/* glastar
------------------------------------------------------------------------------------ */
section#glastar{}
section#glastar .about{
	display: block;
	margin: 0;
}
section#glastar .about dt{width: 100%;}
section#glastar .about dd{
	width: 86.67%;
    margin: 10% auto 0;
}
section#glastar .about dd div{max-width: 100%;}
section#glastar .about dd div h5{
	margin-bottom: 15px;
	font-size:min(5.33vw,40px);
    line-height: 175%;
}
section#glastar .about dd div p{
	font-size:min(4vw,30px);
	line-height: 1.8;
}


/* movie
------------------------------------------------------------------------------------ */
section#movie{margin: 20% auto;}
section#movie img{width: 100%;}
section#movie dl{
	width: 100%;
}
section#movie dt{
	width: 20%;
	text-align: center;
}
section#movie dt img{
	max-width: 6.67vw;
}
section#movie dd{
	width: 80%;
}

/*modal*/
.modal__content{width: 86.67%;}
.js-modal-close{padding: 0 0 8px 0;}
.js-modal-close img{width: 5.38%;}

/* sec 共通
------------------------------------------------------------------------------------ */
section.sec .secInner{
	max-width: 100%;
	width: 100%;
	height: auto;
}
section.sec .secInner2{
	position: relative;
	max-width: 980px;
	margin: -12vw auto 0;
	height: 209.87vw;
}
section.sec .secInner .sec_num{
    padding-top: 0;
    padding-left: 7%;
}
section.sec .secInner .sec_num img{width: 19.7%;max-width: inherit;}
section.sec .secInner .sec_ttl{
	max-width: 100%;
    margin: 0;
	padding-top: 5.33%;
	padding-left: 7%;
    color: #fff;
}
section.sec .secInner .sec_ttl img{height: 24vw;max-height: 100%;}
section.sec .secInner .sec_txt{
    max-width: 450px;
	width: 60%;
    font-size: 4vw;
    margin: -22.67% 0 0 8.4em;
}
section.sec .secInner .sec_btn{
    max-width: 400px;
    width: 53.33%;
    margin: 6.67% auto 0;
    padding: 3.5% 0;
    font-size: min(3.43vw,24px);
}
section.sec .secInner .sec_icon{
	position: unset;
	width: 22.67%;
    margin: 88% 0 0 7%;
}
section.sec .secInner .sec_icon img{
	max-width: 100%;
	width: 100%;
}


/* sec01 BBQ
------------------------------------------------------------------------------------ */
section#sec01{padding: 0;}
section#sec01 .secInner{
	background: url("../../img/top/img_bbq@2x.jpg")no-repeat;
    background-size: 93.33%;
	background-position: 0 47.93vw;
	padding: 10.67% 0 17.33%;
}
section#sec01 .secInner .sec_icon{
    margin-top: 92%;
}

/* sec02 DayTrip+BBQ
------------------------------------------------------------------------------------ */
section#sec02{padding: 0;background:url("../../img/top/bg_bl.jpg")repeat;}
section#sec02 .secInner{
	background: url("../../img/top/img_day@2x.jpg")no-repeat;
    background-size: 93.33%;
	background-position: 0 39%;
	padding: 10.67% 0 17.33%;
}


/* sec03 Stay+BBQ
------------------------------------------------------------------------------------ */
section#sec03{padding: 0 0 8em;}
section#sec03 .secInner{
	background: url("../../img/top/img_stay@2x.jpg")no-repeat;
    background-size: 93.33%;
	background-position: 0 43%;
	padding: 10.67% 0 25%;
}
section#sec03 .secInner .sec_icon{
    margin-top: 89%;
}
section#sec03 .secInner2 ul{display: unset; margin: 0;}
section#sec03 .secInner2 li{
	max-width: 100%;
	width: auto;
	margin-bottom: 27%;	
	padding-left: 6.67%;
	text-align: right;
}
section#sec03 .secInner2 li a{
	display: block;
	text-align: right;
}
section#sec03 .secInner2 li a:hover{}
section#sec03 .secInner2 li::after{
    bottom: -4.53vw;
    right: 2.4%;
    width: 9.87vw;
    height: 9.87vw;
}
section#sec03 .secInner2 li:nth-child(1)::before{
    top: 71%;
    left: 7%;
	right: unset;
    width: 12vw;
    height: 13.73vw;
}
section#sec03 .secInner2 li:nth-child(2)::before{
    top: 71%;
    left: 7%;
	right: unset;
	width: 15.2vw;
	height: 12.53vw;
}
section#sec03 .secInner2 li:nth-child(3)::before{
    top: 71%;
    left: 7%;
	right: unset;
	width: 17.87vw;
	height: 12.53vw;
}
section#sec03 .secInner2 li img{
	width: 74.29%;
}
section#sec03 .secInner2 li .sec03_ttl{
    top: 4vw;
    left: 6.67%;
}
section#sec03 .secInner2 li .sec03_ttl img{
	width: auto;
	max-height: 100%;
	height: 15.33vw;
}
section#sec03 .secInner2 li .sec03_btn{
	left: unset;
    right: 7%;
	font-size: min(3.43vw,24px);
	max-width: unset;
	width: 54vw;
}

/* sec04 Activity
------------------------------------------------------------------------------------ */
section#sec04{padding: 0;background:#fff;}
section#sec04 .secInner{
	background: url("../../img/top/img_sap@2x.jpg")no-repeat;
    background-size: 93.33%;
	background-position: 0 39%;
	padding: 10.67% 0 17.33%;
}
section#sec04 .secInner .sec_num img {
    max-width: inherit;
}

/* sec05 Event
------------------------------------------------------------------------------------ */
section#sec05{padding: 0;background:#eee;}
section#sec05 .secInner{
	background: url("../../img/top/img_event@2x.jpg")no-repeat;
    background-size: 93.33%;
	background-position: 0 39%;
	padding: 10.67% 0 17.33%;
}


/* period
------------------------------------------------------------------------------------ */
section#period{}
section#period a{text-decoration: underline;}
section#period .periodInner{width: 86.67%; padding: 12% 0;}
section#period h3.period_ttl{max-width: 94%;margin: 0 auto 30px;font-size:min(5.33vw,30px);line-height: 1.6;}
section#period h3.period_ttl span{position: relative;display: inline-block;width: fit-content;margin: auto;}
section#period h3.period_ttl span::before{content: ""; background: url("../../img/top/icon_exclamation@3x.png")no-repeat;background-size: 100%;width: 11%;height: 100%;position: absolute;top: 0.15em;left: -1.5em;}
section#period .period_lead{font-size:min(4vw,20px);line-height: 1.6;}
section#period dl{margin-top: 10%;}
section#period dt{margin-bottom: 5px; border-bottom: 1px solid #000; font-size:min(4vw,20px);font-weight: bold;line-height: 1.8;}
section#period dd{margin-bottom: 8%; line-height: 1.8;font-size:min(3.78vw,20px);}


}/* SP end */