/* CSS Document */
/*.spa{ background: url(../spa/images/spa_all.jpg) center -40px no-repeat;}*/
body { background: url(../images/bg.jpg) repeat; font-family: "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif; }
article { width: 100%; overflow: hidden;
	color: #ffffff; }
img { max-width: 100%; }
.contact_raicos { text-align: center; }

@media (min-width:1001px){
	.mainw { width: 1200px; margin-left: auto; margin-right: auto; }
	.w900 { width: 900px; margin-left: auto; margin-right: auto; }
	.bg_logo { background: url(../images/logo.svg) center center no-repeat fixed; width: 100%;
		height: 100%; position: fixed; opacity: 0.5; }
	section { position: relative; }
	#intro { padding: 60px 0; }
	#intro p { font-size: 22px; line-height: 30px; text-align: center; }
	#intro p span { font-size: 26px; }
	#intro ul { display: flex; flex-wrap: wrap; width: 920px; justify-content: space-around;/*justify-content: space-between;*/ margin: 50px auto 0; }
	#intro ul li a { display: block; width: 435px; height: 77px; position: relative; }
	#intro ul li a:before { content: ""; transform: skewX(-30deg); display: inline-block;
		height: 77px; background: #ffffff; position: absolute; box-shadow: 5px 5px 0 rgba(0,0,0,0.5);
		width: 435px; }
	#intro ul li a:after { content: ""; width: 36px; height: 10px; position: absolute; right: 30px;
		top:50%; margin-top: -5px; transition: 0.3s;
		background: url(../images/icon_arrow.svg) center center no-repeat; }
	#intro ul li a:hover:after { right: 25px; }
	#intro ul li a span { position: relative; font-size: 22px; display: inline-block; width: 100%;
		text-align: center; color: #b57b00; line-height: 50px; height: 77px; }

	#intro ul li:first-child, #intro ul li:nth-child(2) { margin-bottom: 20px; }
	#intro ul li.stay_btn a span { background: url(../images/to_stay.svg) bottom 10px center no-repeat; }
	#intro ul li.day_btn a span { background: url(../images/to_daytrip.svg) bottom 10px center no-repeat; }

	#intro ul li.cpbtn a span { line-height: 76px; }
	#intro ul li.cpbtn a:after { right: 25px; top: 45%; }
	#intro ul li.cpbtn a:hover:after { right: 20px; }


	/* plan btn */
	ul.pbtn { display: flex; width: 920px; justify-content: space-between; margin: 50px auto 0; }
	#spot6 ul.pbtn {
		position: absolute; bottom: 200px; left: 15%;
	}
	ul.pbtn li a { display: block; width: 435px; height: 77px; position: relative; }
	ul.pbtn li a:before { content: ""; transform: skewX(-30deg); display: inline-block;
		height: 77px; background: #ffffff; position: absolute; box-shadow: 5px 5px 0 rgba(0,0,0,0.5);
		width: 435px; }
	ul.pbtn li a:after { content: ""; width: 36px; height: 10px; position: absolute; right: 30px;
		top:50%; margin-top: -5px; transition: 0.3s;
		background: url(../images/icon_arrow.svg) center center no-repeat; }
	ul.pbtn li a:hover:after { right: 25px; }
	ul.pbtn li a span { position: relative; font-size: 22px; display: inline-block; width: 100%;
		text-align: center; color: #b57b00; line-height: 50px; height: 77px; }
	
	ul.pbtn li.sp_web a, ul.pbtn li.sp_web a:before { height: 110px; }
	ul.pbtn li.sp_web a:after { top: 20%; }
	ul.pbtn li.sp_web a span { height: 100px; background: url(../images/2203/to_spweb.svg) bottom center no-repeat; background-size: 85% auto; }

	.runit { text-align: center; margin-bottom: 190px; }

	.bg_green { background: url(../images/bg_green.jpg) repeat; position: relative;
		overflow: hidden; }
	.bg_rairai { background: url(../images/bg_rairai.svg) center center no-repeat fixed;
		height: 100%; position: fixed; opacity: 0.5; width: 100%; top:0; display: none; }
	#spot3,#spot4,#spot5 { padding-top: 90px; padding-bottom: 110px; margin-bottom: 0; }

	.bg_blue { background: url(../images/bg_blue.jpg) repeat; position: relative;
		overflow: hidden; }
	.logo_zuiho { background: url(../images/logo_zuiho.svg) center center no-repeat fixed;
		height: 100%; position: fixed; opacity: 0.5; width: 100%; top:0; display: none; }

	.bg_purple { background: url(../images/bg_purple.jpg) repeat; position: relative;
		overflow: hidden; }
	#spot5 .cancel { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4);
		left:0; top:0; }
	#spot5 .cancel p { color: #ffffff; font-size: 34px; line-height: 46px; text-align: center;
		position: absolute; top:50%; margin-top: -46px; left:0; width: 100%; }

	#notice { padding: 95px 0; }
	#notice .mainw { background: #ffffff; padding: 55px; color: #333333; margin-bottom: 80px; }
	h2.rh2 { width: 896px; height: 99px; color: #ffffff; font-size: 32px; line-height: 70px;
		text-align: center; margin: 0 auto 45px;
		background: url(../images/bg_ttl.svg) top center no-repeat; }
	p.lead { font-size: 18px; line-height: 30px; letter-spacing: 2px; text-align: center;
		margin-bottom: 25px; }
	h3.rh3 { color: #7a0207; font-size: 22px; text-align: center; margin: 35px auto; }
	h4.rh4 { line-height: 33px; text-align: center; margin-bottom: 20px; }
	h4.rh4:before { content: ""; transform: skewX(-30deg); display: inline-block;
		height: 33px; background: #e0e0e0; position: absolute; }
	h4.rh4 span { position: relative; font-size: 18px; display: inline-block; width: 100%;
		text-align: center; }
	h4.rh4.l4,h4.rh4.l4:before { width: 157px; }
	h4.rh4.l8,h4.rh4.l8:before { width: 230px; }
	h4.rh4.l12,h4.rh4.l12:before { width: 305px; }
	h4.rh4.lz,h4.rh4.lz:before { width: 460px; }
	ul.rul { padding-left: 1em; font-size: 16px; line-height: 28px; margin-bottom: 20px; }
	ul.rul li { text-indent: -0.5em; }
	ul.rul li:before { content: "-"; color: #7a0207; display: inline-block; margin-right: 5px; }
	p.noticep { padding-left: 1em; font-size: 16px; line-height: 28px; margin-bottom: 20px; }

	#notice table.mainw th { width: 30%; text-align: center; vertical-align: middle;
		border-bottom: #9d2227 1px solid; background: #e0e0e0; text-align: center;
		font-size: 18px; }
	#notice table.mainw td { width: 70%; padding: 15px 65px; font-size: 16px; line-height: 30px;
		border-bottom: #9d2227 1px solid; }
	#notice ol li { text-indent: -1em; }
	#notice ol li span { color: #7a0207; }
	.noteul { font-size: 14px; line-height: 24px; }
	.sponsor { flex-wrap: wrap; align-items: center; justify-content: space-around; }
	.sponsor li { width: 180px; }
	.sponsor li img { width: 100%; }

	#bn { padding: 60px 0; background: #E0E0E0; }
	#bn ul { justify-content: space-between; align-items: center; }
	#bn ul li:last-child img { width: 300px; height: auto; }
	footer { min-height: auto; padding-top: 0; }
	footer .footmain { background: #000; padding: 30px 0; }
	footer .footmain .cflex { justify-content: space-between; align-items: center; }
	footer .footmain .w900 p { text-align: center; margin-top: 20px; font-size: 18px;
		line-height: 26px; }
	footer .footmain a { pointer-events: none; }
	footer .footmain a:hover,.contact_raicos a:hover img { opacity: 1; }
	footer .copy { background: #282828; text-align: center; padding: 10px 0; }
	footer p { text-align: center; }

}
@media (min-width:1001px) and (max-width:1245px) {
	.mainw { width: 92%; }
}
@media (max-width:1000px){
	#mv img { width: 100%; }
	.mainw { width: 88vw; margin-left: auto; margin-right: auto; }
	.w900 { width: 80%; margin-left: auto; margin-right: auto; }
	.bg_logo { background: url(../images/logo.svg) center center no-repeat fixed; width: 100%;
		height: 100%; position: fixed; background-size: 60vw auto; opacity: 0.5; }
	section { position: relative; }
	#intro { padding: 10vw 6vw; }
	#intro p { font-size: 4vw; line-height: 6vw; text-align: center; }
	#intro p span { font-size: 6vw; line-height: 8vw; }
	#intro ul { margin: 8vw 0 0 6vw; }
	#intro ul li { margin-bottom: 2vw; }
	#intro ul li a { display: block; width: 90%; height: 16vw; position: relative; }
	#intro ul li a:before { content: ""; transform: skewX(-30deg); display: inline-block;
		height: 16vw; background: #ffffff; position: absolute; box-shadow: 5px 5px 0 rgba(0,0,0,0.5);
		width: 100%; }
	#intro ul li a:after { content: ""; width: 8vw; height: 4vw; position: absolute; right: 4vw;
		top:50%; margin-top: -2vw;
		background: url(../images/icon_arrow.svg) center center no-repeat; background-size: contain; }
	#intro ul li a span { position: relative; font-size: 5vw; display: inline-block; width: 100%;
		text-align: center; color: #b57b00; line-height: 8vw; height: 16vw; padding-top: 1vw; }
	
	#intro ul li.stay_btn a span { background: url(../images/to_stay.svg) bottom 2vw center no-repeat;
		background-size: auto 5vw; }
	#intro ul li.day_btn a span { background: url(../images/to_daytrip.svg) bottom 2vw center no-repeat;
		background-size: auto 5vw; }
	#intro ul li.cpbtn a span { line-height: 1.5; }

	/* plan btn */
	ul.pbtn { margin: 8vw 0 0 6vw; }
	ul.pbtn li { margin-bottom: 2vw; }
	ul.pbtn li a { display: block; width: 90%; height: 16vw; position: relative; }
	ul.pbtn li a:before { content: ""; transform: skewX(-30deg); display: inline-block;
		height: 16vw; background: #ffffff; position: absolute; box-shadow: 5px 5px 0 rgba(0,0,0,0.5);
		width: 100%; }
	ul.pbtn li a:after { content: ""; width: 8vw; height: 4vw; position: absolute; right: 4vw;
		top:50%; margin-top: -2vw;
		background: url(../images/icon_arrow.svg) center center no-repeat; background-size: contain; }
	ul.pbtn li a span { position: relative; font-size: 5vw; display: inline-block; width: 100%;
		text-align: center; color: #b57b00; line-height: 8vw; height: 16vw; padding-top: 1vw; }
	ul.pbtn li:first-child a span { background: url(../images/to_stay.svg) bottom 2vw center no-repeat;
		background-size: auto 5vw; }

	ul.pbtn li.sp_web a, ul.pbtn li.sp_web a:before { height: 22vw; }
	ul.pbtn li.sp_web a:after { top: 20%; right: 2vw; }
	ul.pbtn li.sp_web a span { height: 20vw; background: url(../images/2203/to_spweb.svg) bottom center no-repeat;
		background-size: auto 10vw; }


	.runit { margin-bottom: 20vw; }
	.runit .spotinfo { display: flex; }
	.runit .spotinfo li:first-child { width: 40vw; }
	.runit .spotinfo li:last-child { width: 80vw; margin-left: -20vw; padding-top: 7vw; }
	#spot4.runit .spotinfo li:last-child { padding-top: 12vw; }

	/* long_ttl */
	.runit .spotinfo.long_ttl li:first-child { width: 64vw; }
	.runit .spotinfo.long_ttl li:last-child {  margin-left: -35vw; padding-top: 2vw; }
	
	.runit h2 { margin-top: 2vw; }
	.runit p { width: 88vw; margin: 6vw auto; font-size: 4vw; line-height: 6vw; }
	.runit .photos li { width: 80vw; }
	.runit .photos li:first-child { width: 100%; }
	#spot2.runit .photos li:first-child { width: 60%; }
	.runit .photos li:nth-child(even) { margin-left: auto; }

	.bg_green { background: url(../images/bg_green.jpg) repeat; position: relative;
		overflow: hidden; }
	.bg_rairai { background: url(../images/bg_rairai.svg) center center no-repeat fixed;
		height: 100%; position: fixed; background-size: 60vw auto; opacity: 0.5; width: 100%;
		top:0; display: none; }
	#spot3,#spot4,#spot5 { padding-top: 14vw; }

	.bg_blue { background: url(../images/bg_blue.jpg) repeat; position: relative;
		overflow: hidden; }
	.logo_zuiho { background: url(../images/logo_zuiho.svg) center center no-repeat fixed;
		height: 100%; position: fixed; background-size: 60vw auto; opacity: 0.5; width: 100%;
		top:0; display: none; }

	.bg_purple { background: url(../images/bg_purple.jpg) repeat; position: relative;
		overflow: hidden; }
	#spot5 .cancel { position: absolute; width: 100%; height: calc( 100% + 20vw );
		background: rgba(0, 0, 0, 0.6);
		left:0; top:0; }
	#spot5 .cancel p { color: #ffffff; font-size: 6vw; line-height: 9vw; text-align: center;
		position: absolute; top:40vw; left:0; width: 100%; padding: 6vw; }

	#notice { padding: 14vw 0; }
	#notice .mainw { background: #ffffff; padding: 6vw; color: #333333; }
	h2.rh2 { width: 100%; height: 21vw; color: #ffffff; font-size: 6vw; line-height: 17vw;
		text-align: center; margin: 12vw auto 6vw;
		background: url(../images/bg_ttl_sp.svg) top center no-repeat; background-size: contain; }
	p.lead { font-size: 4.4vw; line-height: 7vw; letter-spacing: 2px; text-align: center;
		margin-bottom: 6vw; }
	h3.rh3 { color: #7a0207; font-size: 5vw; text-align: center; margin: 6vw auto; }
	h4.rh4 { line-height: 8vw; text-align: center; margin-bottom: 4vw; }
	h4.rh4:before { content: ""; transform: skewX(-30deg); display: inline-block;
		height: 8vw; background: #e0e0e0; position: absolute; }
	h4.rh4 span { position: relative; font-size: 18px; display: inline-block; width: 100%;
		text-align: center; }
	h4.rh4.l4,h4.rh4.l4:before { width: 30vw; }
	h4.rh4.l8,h4.rh4.l8:before { width: 60vw; }
	h4.rh4.l12,h4.rh4.l12:before { width: 60vw; }
	h4.rh4.lz,h4.rh4.lz:before { width: 60vw; height: 16vw; }
	ul.rul { padding-left: 1em; font-size: 3.8vw; line-height: 6vw; margin-bottom: 4vw; }
	ul.rul li { text-indent: -0.5em; }
	ul.rul li:before { content: "-"; color: #7a0207; display: inline-block; margin-right: 1vw; }
	p.noticep { padding-left: 1em; font-size: 3.8vw; line-height: 6vw; margin-bottom: 4vw; }

	#notice table.mainw th { display: block; text-align: center; vertical-align: middle;
		background: #e0e0e0; text-align: center; padding: 2vw;
		font-size: 18px; }
	#notice table.mainw td { display: block; padding: 2vw 6vw 2vw 12vw; font-size: 16px; line-height: 30px;
		border-bottom: #9d2227 1px solid; }
	#notice ol li { text-indent: -1em; }
	#notice ol li span { color: #7a0207; }
	.noteul { font-size: 3.6vw; line-height:5vw; }
	.sponsor { flex-wrap: wrap; align-items: center; }

	#bn { padding: 8vw 0; background: #E0E0E0; }
	#bn ul {  }
	#bn ul li:first-child { margin-bottom: 2vw; }
	#bn ul li:last-child { width: 80%; text-align: center; margin: 0 auto; }
	footer { min-height: auto; padding-top: 0; }
	footer .footmain { background: #000; padding: 6vw 0; position: relative; z-index: 10; }
	footer .footmain .cflex {  }
	footer .footmain .w900 p { text-align: center; margin-top: 4vw; font-size: 4vw;
		line-height: 6vw; }
	footer .footmain a { display: block; }
	.contact_raicos a { color: #ffffff; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "ＭＳ 明朝", "MS Mincho", "HGS明朝E", serif; font-size: 4vw; line-height: 6vw;
		display: block; width: 100%; }
	.contact_raicos a img { width: 100%; margin-top: 2vw; }
	footer .copy { background: #282828; text-align: center; padding: 2vw 0; }
	footer p { text-align: center; }

}