:root {
	--cstTitleSize:				22px;
	--cstTitleSizeInt:			22;
	--cstTitlesizeMin:			16px;
	--cstTitlesizeMinInt:		16;
	--cstTitlesizeSmp:			19px;
	
	--cstDescriptSize:			16px;
	--cstDescriptSizeInt:		16;
	--cstDescriptsizeMin:		12px;
	--cstDescriptsizeMinInt:	12;
	--cstDescriptSizeSmp:		14px;
	
	--prefTabWidth:		120px;
	--prefTabWidthM:	-120px;
}

* {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px; 
	color: #333333;
}

a { 		text-decoration: none; }
a:hover {	text-decoration: underline; }

a { color: #222222; }
a:hover { color: #000000; }

#search_489ban::after,
.clearfix::after, 
header::after, 
main::after, 
aside::after, 
footer::after { 
	content: ""; 
	display: block; 
	clear: both; 
} 

.n { display: none; }

.l { text-align: left; }
.c { text-align: center; }
.r { text-align: right; }

img { 
	max-width: 100%; 
	height: auto; 
} 

html {
	height: 100%;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body { 
	position: relative;
	text-align: center; 
	margin: 0px auto; 
	width: 100%;
	touch-action: pan-x pan-y;
} 

header {
	left: 0;
	right: 0;
}

header,
main,
footer {
	margin: 0px auto;
}

main {
	padding: 80px 0px 0px 0px;
}

header ul, 
footer ul,
header ol, 
footer ol { 
	list-style-type: none;
} 

#header.moveUp {
	animation: animateUp 0.5s forwards;
}

@keyframes animateUp {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-100px);
	}
}

#header.moveDw{
	animation: animateDw 0.5s forwards;
}

@keyframes animateDw {
	from {
		opacity: 0;
		transform: translateY(-100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#header {
	position: fixed;
	z-index: 10;
	height: 60px;
	padding: 10px 0px;
	background: rgba(255, 255, 255, 0.95);
}

#header h1.site-title a,
#header  p.site-title a {
	display: block;
	width: 422px;
	height: 50px;
	background-image: url(/assets/puracam_logo_pc.svg);
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: -9999px;
	float: left;
}

#globalSearch,
#globalShwMap {
	display: block;
	width:  50px;
	height: 50px;
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: -9999px;
	float: right;
}

#globalSearch {
	margin-left: 10px;
	background-image: url(/assets/menu_navs.svg);
}

#globalShwMap {
	margin-left: 0px;
	background-image: url(/assets/menu_navm.svg);
}

#globalSearchDiv.fadeIn,
#globalShwMapDiv.fadeIn {
	animation: animateFadeIn 0.25s forwards;
}

#globalHeroesDiv.fadeIn {
	animation: animateFadeIn 1.00s forwards;
}

@keyframes animateFadeIn {
	from { 	opacity: 0.0; } 
	to { 	opacity: 1.0; }
}

#globalSearchDiv.fadeOut,
#globalShwMapDiv.fadeOut,
#globalHeroesDiv.fadeOut {
	animation: animateFadeOut 0.125s forwards;
}
@keyframes animateFadeOut {
	from { 	opacity: 1.0; }
	to { 	opacity: 0.0; }
}

@keyframes rotation{
	0% { 	transform:rotateY(0); }
	100% { 	transform:rotateY(360deg); }
}

#globalSearchDiv,
#globalShwMapDiv,
#globalWrapprDiv,
#globalHeroesDiv {
	display: none; 
	position: absolute;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	overflow-x: none;
	overflow-y: auto;
	left: 0;
}

#globalSearchDiv,
#globalShwMapDiv,
#globalWrapprDiv {
	min-height: calc(var(--vh, 1vh) * 100);
	top: 80px;
}

#globalHeroesDiv {
	height: 100vh;
	top:  0px; 
}

#globalSearchDiv,
#globalShwMapDiv {
	user-select: none;
	z-index: 100;
	opacity: 0;
	background: rgba(255, 255, 255, 0.975);
}

#globalWrapprDiv {
	z-index: 102;
	opacity: 1;
	background: rgba(255, 255, 255, 0.750);
}

#globalHeroesDiv {
	z-index: 103;
	opacity: 1;
	background: rgba(0, 0, 0, 0.975);
}

#globalWrapprDiv img {
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: calc(50% - 20px);
	left: calc(50% - 20px);
	animation:1s linear infinite rotation;
}

#globalHeroesDiv #heroViewImage {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#globalHeroesDiv #heroViewText {
	position: absolute;
	z-index: 3;
	width: calc(100% - 20px);
	bottom: 0;
	background: rgba(0, 0, 0, .85);
	color: FFFFFF;
	text-align: center;
	padding: 10px;
}

#globalHeroesDiv #heroViewClose,
#globalHeroesDiv #heroViewPrev,
#globalHeroesDiv #heroViewNext {
	position: absolute;
	z-index: 2;
	background-repeat: no-repeat;
	text-indent: -9999px;
}

#globalHeroesDiv #heroViewClose {
	width: 60px;
	height: 60px;
	background-image: url(/assets/img_close.svg);
	top: 20px;
	left: calc(50% - 30px);
}

#globalHeroesDiv #heroViewPrev,
#globalHeroesDiv #heroViewNext {
	width: 40px;
	height: 80px;
	top: calc(50% - 40px);
}

#globalHeroesDiv #heroViewPrev {

	background-image: url(/assets/img_prev.svg);
	left: 20px;
}

#globalHeroesDiv #heroViewNext {
	background-image: url(/assets/img_next.svg);
	right: 20px;
}

footer {
	margin-top: 60px;
	padding-bottom: 20px;
}

footer ul {
	margin: 20px auto;
}

footer li {
	display: inline-block;
	margin: 0px 15px;
}

footer li a {

	white-space: nowrap;
}


footer p a {
	display: inline-block;
	background-image: url(/assets/j-n-logo.svg);
	background-repeat: no-repeat;
	padding-left: 45px;
}


#snsprd-menu a[href*="facebook.com"],
#snsprd-menu a[href*="twitter.com"],
#snsprd-menu a[href*="x.com"],
#snsprd-menu a[href*="instagram.com"],
#snsprd-menu a[href*="youtube.com"],
#snsprd-menu a[href*="threads.net"],
#snsprd-menu a[href*="threads.com"] {
	display: inline-block;
	width: 40px;
	height: 40px;
	text-indent: -9999px;
}

#snsprd-menu a[href*="facebook.com"] {	background-image: url(/assets/bicon_facebook.svg); }
#snsprd-menu a[href*="twitter.com"] {	background-image: url(/assets/bicon_xtwitter.svg); }
#snsprd-menu a[href*="x.com"] {		background-image: url(/assets/bicon_xtwitter.svg); }
#snsprd-menu a[href*="instagram.com"] {	background-image: url(/assets/bicon_instagram.svg); }
#snsprd-menu a[href*="youtube.com"] {	background-image: url(/assets/bicon_youtube.svg); }
#snsprd-menu a[href*="threads.net"], #snsprd-menu a[href*="threads.com"] {	background-image: url(/assets/bicon_threads.svg); }

.sharesns {
	list-style-type: none;
}

.sharesns li {
	display: inline;
	margin: 0px 10px;
}

.sharesns li a[href*="pinterest.jp"],
.sharesns li a[href*="facebook.com"],
.sharesns li a[href*="twitter.com"],
.sharesns li a[href*="x.com"],
.sharesns li a[href*="line.me"],
.sharesns li a[href*="b.hatena.ne.jp"] {
	display: inline-block;
	width: 40px;
	height: 40px;
	text-indent: -9999px;
}

.sharesns a[href*="pinterest.jp"] {	background-image: url(/assets/ricon_pinterest.svg); }
.sharesns a[href*="facebook.com"] {	background-image: url(/assets/ricon_facebook.svg); }
.sharesns a[href*="twitter.com"] {	background-image: url(/assets/ricon_xtwitter.svg); }
.sharesns a[href*="x.com"] {		background-image: url(/assets/ricon_xtwitter.svg); }
.sharesns a[href*="line.me"] {		background-image: url(/assets/ricon_line.svg); }
.sharesns a[href*="b.hatena.ne.jp"] {	background-image: url(/assets/ricon_hatebu.svg); }

#topTopBtn {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 50px;
	height: 50px;
	text-indent: -9999px;
	background-image: url(/assets/pagetop_n.svg);
}

#topTopBtn:hover {
	background-image: url(/assets/pagetop_h.svg);
}

#topTopBtn:focus,
button:focus {
	outline: none;
}

#topTopBtn.show {
	animation: show .25s linear 0s;
}

#topTopBtn.hide {
	animation: hide .01s linear 0s;
}

h1.page-title {
	margin: 30px 0px 30px 0px;
	text-align: left;
}

h1.page-title,
h1.page-title * {
	font-size: 150%;
}

.h2idxv {
	margin: 50px 0px 20px 0px;
	padding: 0px 0px 3px 0px;
	border-bottom: 2px solid #000000;
	text-align: left;
	padding-left: 1rem;
	font-size: 150%;
	width: 70%;
}

.h2idxd0 {
	height: 0px;
	margin: 0px;
	text-indent: -9999px;
}

.h2idxd {
	height: 0px;
	margin: 10px 0px 0px 0px;
	text-indent: -9999px;
}

.aBanner {
	margin: 70px 0px 0px 0px;
}

.aBanner a {
	display: block;
	margin: 20px 0px 0px 0px;
}

#topimages dl {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-bottom: 56.25%;
}

#topimages dt {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-indent: -9999px;
}

#topimages dd {
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 30px;
	font-weight: 500;
	line-height: 200%;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	background: rgba(0, 0, 0, .85);
}

#topimages dt a,
#topimages dd a {
	display: block;
	width: 100%;
	height: 100%;
}

#topimages dd * {
	color: #FFFFFF;
}

a.pagenate {
	display: block;
	margin: 40px auto;
	padding: 0px 10px;
	width: 50%;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.linkbtn {
	display: block;
	margin: 20px auto;
	width: calc(97% - 3px - 3px);
	height: 34px;
	line-height: 34px;
	font-size: 18px;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.linkbtn,
a.linkbtn span {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

a.bluebtn {
	background: #FFFFFF;
	border: 3px solid #000088;
}

a.bluebtn,
a.bluebtn span {
	color: #000088;
}

a.bluebtn:hover {
	text-decoration: none;
	background: #000088;
}

a.bluebtn:hover,
a.bluebtn:hover span {
	color: #FFFFFF;
}

a.grenbtn {
	background: rgba(108,155,210,1);
	border: 3px solid rgba(108,155,210,1);
}

a.grenbtn,
a.grenbtn span {
	color: #FFFFFF;
}

a.grenbtn:hover {
	text-decoration: none;
	background: rgba(88,135,190,1);
	border: 3px solid rgba(88,135,190,1);
}

a.grenbtn:hover,
a.grenbtn:hover span {
	color: #FFFFFF;
}

a.redsbtn {
	background: #880000;
	border: 3px solid #880000;
	color: #FFF;
}

a.redsbtn,
a.redsbtn span {
	color: #880000;
	color: #FFF;
}

a.redsbtn:hover {
	text-decoration: none;
	background: #660000;
	border: 3px solid #660000;
}

a.redsbtn:hover,
a.redsbtn:hover span {
	color: #FFFFFF;
}

a.disable {
	background: #DDDDDD;
	color: #BBBBBB;
	border: 3px solid #DDDDDD;
}

a.disable:hover {
	text-decoration: none;
}

hr.eoc {
	display: block;
	position: relative;
	overflow: visible;
	text-align: center;
	border-width: 2px 0 0 0;
	border-style: dotted;
	border-color: #CCCCCC;
	height: 1em;
	line-height: 1.25em;
	margin: 40px 20px;
}

hr.eoc:after {
	position: absolute;
	width: 3rem;
	top: -0.75em;
	left: calc(50% - 1.5rem);
	display: inline-block;
	content: '⛺️'; 
	color: #888888;
	background: #FFFFFF;
	margin: 0px auto;
	text-align: center;
}

.sForm fieldset {
	margin: 20px 0px;
	padding: 10px;
	width: calc(100% - 10px - 1px - 1px - 10px);
	text-align: left;
	border-radius: 10px;
	border: 1px solid #AAAAAA;
	background: #F8F8F8;
}

.sForm legend {
	text-align: left;
	margin: 0px 10px;
	padding: 0px 10px;
}

.sForm input[type="text"], 
.sForm select,
.sForm button,
.flinkbtn {
	-webkit-appearance: none;
	appearance: none;
	font-size: 20px;
	padding: 0px 7px;
	height: 38px;
	border: 1px solid #888888;
	background: #FFFFFF;
	text-align: center;
	margin: 10px auto;
}

.flinkbtn {
	display: inline-block;
	line-height: 200%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-radius: 7px;
}

.sForm input[type="text"], 
.sForm select,
.sForm button {
	width: calc(100% - 0px);
}

.sForm input[type="text"],
.flinkbtn {
	width: calc(100% - 7px - 7px);
}

.sForm select {
	height: 42px;
	background-image: url(/assets/selectarrow.svg);
	background-position: right 7px center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	padding: 0px calc(7px + 20px + 7px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-radius: 0px 7px 7px 0px;
}

.sForm button {
	border-radius: 7px;
}

.sForm button:disabled {
	background: #EEEEEE;
	color: #888888;
}

.sForm input[type="checkbox"]:focus, 
.sForm input[type="radio"]:focus {
	outline: none;
}

.chkImg input + span::before,
.rdoImg input + span::before { 
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: inline-block;
	width: 48px;
	height: 48px;
	position: relative;
}

.cst_rst .body ul li
{ 
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: inline-block;
	width: 40px;
	height: 40px;
	text-indent: -9999px;
	margin: 0px 2px 5px 2px;
}

.chkImg span,
.rdoImg span {
	display: inline-block;
	color: transparent;
	width: 57px;
	height: 54px;
	overflow: hidden;
}

.chkImg,
.rdoImg,
.chkCss {
	cursor: pointer;
}

.chkImg input,
.rdoImg input,
.chkCss input {
	display: none;
}

.chkImg input + span::before,
.rdoImg input + span::before,
.dlsel dd.gry { 
	filter: grayscale(100%); opacity: 0.5; 
}

.chkImg input:checked + span::before,
.rdoImg input:checked + span::before,
.dlsel dd.clr { 
	filter: grayscale(  0%); opacity: 1.0; 
}

#e00 + span::before, .ice00 { background-image: url(/assets/e00.svg); }
#e01 + span::before, .ice01 { background-image: url(/assets/e01.svg); }
#e02 + span::before, .ice02 { background-image: url(/assets/e02.svg); }
#e03 + span::before, .ice03 { background-image: url(/assets/e03.svg); }
#e04 + span::before, .ice04 { background-image: url(/assets/e04.svg); }
#e05 + span::before, .ice05 { background-image: url(/assets/e05.svg); }
#e06 + span::before, .ice06 { background-image: url(/assets/e06.svg); }
#e07 + span::before, .ice07 { background-image: url(/assets/e07.svg); }
#e08 + span::before, .ice08 { background-image: url(/assets/e08.svg); }

#s15010 + span::before, .ics15010 { background-image: url(/assets/s15010.svg); }
#s15011 + span::before, .ics15011 { background-image: url(/assets/s15011.svg); }
#s15013 + span::before, .ics15013 { background-image: url(/assets/s15013.svg); }
#s15014 + span::before, .ics15014 { background-image: url(/assets/s15014.svg); }

#s15020 + span::before, .ics15020 { background-image: url(/assets/s15020.svg); }
#s15021 + span::before, .ics15021 { background-image: url(/assets/s15021.svg); }
#s15023 + span::before, .ics15023 { background-image: url(/assets/s15023.svg); }

#s15030 + span::before, .ics15030 { background-image: url(/assets/s15030.svg); }
#s15040 + span::before, .ics15040 { background-image: url(/assets/s15040.svg); }
#s15050 + span::before, .ics15050 { background-image: url(/assets/s15050.svg); }
#s15070 + span::before, .ics15070 { background-image: url(/assets/s15070.svg); }
#s15080 + span::before, .ics15080 { background-image: url(/assets/s15080.svg); }
#s15090 + span::before, .ics15090 { background-image: url(/assets/s15090.svg); }
#s15100 + span::before, .ics15100 { background-image: url(/assets/s15100.svg); }
#s15120 + span::before, .ics15120 { background-image: url(/assets/s15120.svg); }
#s15130 + span::before, .ics15130 { background-image: url(/assets/s15130.svg); }
#s15150 + span::before, .ics15150 { background-image: url(/assets/s15150.svg); }
#s15170 + span::before, .ics15170 { background-image: url(/assets/s15170.svg); }
#s15180 + span::before, .ics15180 { background-image: url(/assets/s15180.svg); }

#s16010 + span::before, .ics16010 { background-image: url(/assets/s16010.svg); }
#s16011 + span::before, .ics16011 { background-image: url(/assets/s16011.svg); }
#s16013 + span::before, .ics16013 { background-image: url(/assets/s16013.svg); }

#s16110 + span::before, .ics16110 { background-image: url(/assets/s16110.svg); }
#s16120 + span::before, .ics16120 { background-image: url(/assets/s16120.svg); }
#s16130 + span::before, .ics16130 { background-image: url(/assets/s16130.svg); }

#s17010 + span::before, .ics17010 { background-image: url(/assets/s17010.svg); }
#s17020 + span::before, .ics17020 { background-image: url(/assets/s17020.svg); }
#s17030 + span::before, .ics17030 { background-image: url(/assets/s17030.svg); }
#s17040 + span::before, .ics17040 { background-image: url(/assets/s17040.svg); }
#s17050 + span::before, .ics17050 { background-image: url(/assets/s17050.svg); }
#s17060 + span::before, .ics17060 { background-image: url(/assets/s17060.svg); }
#s17070 + span::before, .ics17070 { background-image: url(/assets/s17070.svg); }
#s17080 + span::before, .ics17080 { background-image: url(/assets/s17080.svg); }

.chkCss span,
.cst_tabs li,
.cst_rst .body ol li {
	display: inline-block;
	height: 24px;
	line-height: 175%;
	white-space: nowrap;
	border-radius: 15px;
	padding: 0px 1rem;
	margin: 0px 5px 10px 5px;
}

.chkCss span,
.cst_tabs li,
.cst_rst .body ol li {
	font-size: 90%;
}

.chkCss span *,
.cst_tabs li *,
.cst_rst .body ol li * {
	font-size: 100%;
}

.cst_tabs li {
	margin: 0px 0px 0px 5px;
	border-radius: 7px 7px 0px 0px;
}

.cst_rst .body ol li {
	margin: 0px 2px 5px 2px;
}

.chkCss span,
.dlsel dd.gray {
	color: #888888; background: linear-gradient(to top, #CCCCCC 0%, #EEEEEE 100%); border: 1px solid #AAAAAA; 
}

.chkCss input:checked + span.red,
.cst_rst .body ol li.red,
.dlsel dd.reds { 
	color: #000000; background: linear-gradient(to top, #FF9999 0%, #FFDDDD 100%); border: 1px solid #AA0000; 
} 

.chkCss input:checked + span.grn,
.cst_rst .body ol li.grn,
.dlsel dd.gren { 
	color: #000000; background: linear-gradient(to top, #88FF88 0%, #CCFFCC 100%); border: 1px solid #00AA00; 
} 

.chkCss input:checked + span.blu,
.cst_rst .body ol li.blu,
.dlsel dd.blue { 
	color: #000000; background: linear-gradient(to top, #9999FF 0%, #DDDDFF 100%); border: 1px solid #0000AA; 
} 

.cst_tabs li { background: #888888; }
.cst_tabs li, .cst_tabs li * { color: #FFFFFF; }
.cst_tabs li.org { background: #973418; }
.cst_tabs li.red { background: #943951; }
.cst_tabs li.sky { background: #3b78ad; }
.cst_tabs li.grn { background: #537737; }

#tabbedArea {
	margin: 20px 0px 0px 0px;
	position: relative;
}

#tabbedArea a {
	text-decoration: none;
}

#tabbedArea #tabDt {
	display: block;
	width: 100%;
	height: 30px;
	overflow: hidden;
	position: relative;
}

#tabbedArea #tabDt #tabp,
#tabbedArea #tabDt #tabn {
	display: block;
	width: 35px;
	height: 30px;
	position: absolute;
	top: 0;
	text-indent: -9999px;
	box-sizing: border-box;
	border-bottom: 1px solid #888888;
}

#tabbedArea #tabDt #tabps,
#tabbedArea #tabDt #tabns {
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 25px 25px;
}

#tabbedArea #tabDt #tabp {
	left: 0;
}

#tabbedArea #tabDt #tabn {
	right: 0;
}

#tabbedArea #tabDt #tabps {
	background-image: url(/assets/select_prev.svg);
	background-position: left;
}

#tabbedArea #tabDt #tabns {
	background-image: url(/assets/select_next.svg);
	background-position: right;
}

#tabbedArea #tabDt #tabw {
	display: block;
	width: calc(100% - 35px - 35px);
	height: 30px;
	position: absolute;
	top: 0;
	left: 35px;
	overflow: hidden;
}

#tabbedArea #tabDt #tabs {
	width: 9999px;
	height: 30px;
	position: absolute;
	top: 0;
	left: 0;
	animation-duration: 200ms;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
	
	box-sizing: border-box;
	border-bottom: 1px solid #888888;
}

@keyframes tabsMoveRight {
	to {
		transform:translateX(var(--prefTabWidth));
	}
}

@keyframes tabsMoveLeft {
	to {
		transform:translateX(var(--prefTabWidthM));
	}
}


.tabbtn {
	display: none;
}

.tabitm h3 {
	display: block;
	width: calc(var(--prefTabWidth) - 3px);
	margin-right: 3px;
	height: 30px;
	line-height: 28px;
	text-align: center;
	float: left;
	position: relative;
	z-index: 2;
	background: #EEEEEE;
	color: #888888;
	box-sizing: border-box;
	border-top:    1px solid #888888;
	border-right:  1px solid #888888;
	border-bottom: 1px solid #888888;
	border-left:   1px solid #888888;
	overflow: hidden;
}

input:checked + .tabitm h3 {
	background: #FFFFFF;
	color: #222222;
	border-bottom: 1px solid #FFFFFF;
}

.tabitm h3:hover {
	cursor: pointer;
}

#tabbedArea #tabDd {
	width: 100%;
	box-sizing: border-box;
	border-right:  1px solid #888888;
	border-bottom: 1px solid #888888;
	border-left:   1px solid #888888;
}

.tabcnt {
	display: none;
	background: #FFFFFF;
	width: calc(100% - 20px);
	padding: 20px 10px 0px 10px;
	clear: both;
	overflow: hidden;
}

.cst_rst {
	width: 100% - 10px - 10px);
	box-sizing: border-box;
	border-radius: 0px 0px 10px 10px;
	border: 1px solid #888888;
	padding: 10px;
	margin-bottom: 20px;
}

.cst_rst ol,
.cst_rst ul {
	list-style-type: none;
}

.cst_tabs {
	display: block;
	margin: 0px;
	text-align: left;
}

.cst_rst .head,
.cst_rst .body {
	display: block;
	width: 55%;
	float: right;
}

.cst_rst .picb {
	display: block;
	width: calc(45% - 10px);
	float: left;
}

.cst_rst .head {

}

.cst_rst .head dt h2 {
	display: block;
	text-align: center;
	margin: 0px 0px 10px 0px;
	font-size: 125%;
	font-weight: 700;
}

.cst_rst .head dd {
	font-size: 80%;
	text-align: center;
	line-height: 1.3;

	display: block;
	width: calc(100% / 3);
	height: 1.3em;
	float: left;
}

.cst_rst .head dd:nth-of-type(1) p {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

.cst_rst .picb {
	position: relative;
	overflow: hidden;
	padding-bottom: 33%;
}

.cst_rst .picb div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.cst_rst .picb span {
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	top: 5px;
	right: 5px;
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: -9999px;
}


.cst_rst .picb div p {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, .70);
	font-weight: 300;
	font-size: 90%;
	color: #FFFFFF;
}

.cst_rst .body dt {
	display: block;
	float: right;
	margin: 10px 0px;
	border-radius: 10px;
	border: 1px solid #AAAAAA;
	background: #F8F8F8;
}

.cst_rst .body ol,
.cst_rst .body ul {
	text-align: left;
	margin: 7px;
}


.cst_sig .pich {
	position: relative;
}

.cst_sig .pich img {
	display: block;
	width: 100%;
	height: auto;
}

.cst_sig .pich span {
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: -9999px;
}

.cst_sig .pich span:nth-of-type(1) {
	width: 60px;
	height: 60px;
	top: 5px;
	right: 5px;
}

.cst_sig .pich span:nth-of-type(2),
.cst_sig .pich span:nth-of-type(3) {
	width: 27px;
	height: 27px;
}

.cst_sig .pich span:nth-of-type(2) {
	top: calc(5px + 60px + 6px);
	right: calc(5px + 27px + 3px + 3px);
}

.cst_sig .pich span:nth-of-type(3) {
	top: calc(5px + 60px + 6px );
	right: 5px;
}

.cst_sig .head h1 {
	padding: 20px 0px 10px 0px;
	font-size: 175%;
}

.cst_sig .head ul {
	list-style-type: none;
}

.cst_sig .head li {
	display: inline-block;
	margin: 0px 10px;
}

#camptab {
	margin-top: 20px;
	position: relative;
	padding-top: 29px;
}

.ctabbtn {
	display: none;
}

.ctabitm {
	display: inline-block;
	width: calc((100% - 10px) / 3);
	height: 30px;
	position: absolute;
	z-index: 2;
	top: 0;
}

.ctabitm:nth-of-type(1) { left: 10px; }
.ctabitm:nth-of-type(2) { margin: 0px auto; left: 0; right: 0; }
.ctabitm:nth-of-type(3) { right: 10px; }

.ctabitm h2 {
	display: inline-block;
	width: calc(100% - 10px);
	margin: 0px 5px;
	height: 30px;
	line-height: 28px;
	text-align: center;
	float: left;
	background: #EEEEEE;
	color: #888888;
	box-sizing: border-box;
	border-top: 1px solid #AAAAAA;
	border-left: 1px solid #AAAAAA;
	border-right: 1px solid #AAAAAA;
	border-bottom: 1px solid #888888;
	border-radius: 10px 10px 0px 0px;
	overflow: hidden;
}

input:disabled + .ctabitm h2 {
	background: #EEEEEE;
	color: #DDDDDD;
	border-top: 1px solid #EEEEEE;
	border-left: 1px solid #EEEEEE;
	border-right: 1px solid #EEEEEE;
	border-bottom: 1px solid #888888;
}

input:checked + .ctabitm h2 {
	background: #FFFFFF;
	color: #222222;
	border-top: 1px solid #888888;
	border-left: 1px solid #888888;
	border-right: 1px solid #888888;
	border-bottom: 1px solid #FFFFFF;
}

.tabitm h2:hover {
	cursor: pointer;
}

.ctabcnt {
	display: none;
	width: 100%;
	padding: 20px 15px;
	clear: both;
	text-align: left;
	overflow: hidden;
	box-sizing: border-box;
	border: 1px solid #888888;
	border-radius: 10px 10px 20px 20px;
}

#camptab > #ctab1:checked ~ #view1,
#camptab > #ctab2:checked ~ #view2,
#camptab > #ctab3:checked ~ #view3 {
	display: block;
}

.ctabcnt h3 {
	font-size: 150%;
	margin-bottom: 14px;
}

.ctabcnt fieldset {
	margin: 20px 0px 30px 0px;
	border: 1px solid #AAAAAA;
	border-radius: 7px;
	padding: 10px;
}

.ctabcnt fieldset legend {
	margin: 0px 10px;
	padding: 0px 10px;
}

.ctabcnt fieldset .prcdl dt,
.ctabcnt fieldset .prcdl dt * {
	padding: 2px 0px;
}

.ctabcnt fieldset .prcdl dt span {
	display: inline;
	padding: 2px 6px;
	margin-right: 0.5rem;
	background: #444444;
	color: #FFFFFF;
	border-radius: 10px;
}

.ctabcnt fieldset .prcdl dd {
	padding: 2px 10px;
	font-size: 80%;
}

.ctabcnt fieldset.weather {
	padding: 10px;
}

.ctabcnt fieldset.weather div {
	width: 100%;
	height: 190px;
	overflow: hidden;
	position: relative;
}

.ctabcnt fieldset.weather ul {
	display: block;
	width: 100%;
	height: 190px;
	position: absolute;
	overflow-x: auto !important;
	overflow-y: hidden;
	white-space: nowrap;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.ctabcnt fieldset.weather li * {
	font-size: 13px;
}

.ctabcnt fieldset.weather li {
	display: inline-block;
	vertical-align: top;
	width: 113px;
	height: 164px;
	padding: 3px 0px;
	border-radius: 7px;
}

.ctabcnt fieldset.weather li:nth-of-type(1) {
	width: 150px;
	background-color: #F4F4F4;
}

.ctabcnt fieldset.weather li img {
	display: block;
	margin: 0px auto;
	width: 90px;
	height: 90px;

}

.ctabcnt fieldset.weather li span {
	display: block;
	line-height: 133%;
	text-align: center;
}

.ctabcnt fieldset.weather li span sup {
	color: #A00;
	vertical-align: middle;
}

.ctabcnt fieldset.weather li span sub {
	color: #00A;
	vertical-align: middle;
}

.ctabcnt fieldset.nearsite ol {
	margin-left: 30px;
}



.dlmsc {
	margin: 15px 0px;
}

.dlmsc dt {
	clear: left;
	display: block;
	float: left;
	width: 130px;
}

.dlmsc dt span {
	display: block;
	font-size: 80%;
	padding: 0px 5px;
	margin: 8px 4px 0px 10px;
	background: #444444;
	color: #FFFFFF;
	border-radius: 8px;
	border: 1px solid #444444;
	text-align: center;
}

.dlmsc dt span.sp {
	background: #CCCCCC !important;
	color: #000000 !important;
}

.dlmsc dd {
	display: block;
	float: left;
	margin: 5px 0px 0px 0px;
	width: calc(100% - 130px);
	word-break: break-all;
}

.dlmsc dd a {
	color: #111144;
}

.dlsel {
	margin: 15px 0px 0px 30px;
}

.dlsel dt {
	margin: 10px 0px 0px -15px;
}

.dlsel dd {
	display: inline-block;
}

.dlsel dd.clr,
.dlsel dd.gry {
	width: 45px;
	height: 45px;
	text-indent: -9999px;
	margin: 5px 3px 5px 0px;
}

.dlsel dd.gray,
.dlsel dd.blue,
.dlsel dd.gren,
.dlsel dd.reds {
	padding: 0px 1rem;
	margin: 5px 10px 5px 0px;
	border-radius: 11px;
}

.dlsel dd.txt {
	display: block;
	padding-left: 14px;
	font-size: 80%;
}

dl.neifac {
	margin: 7px 0px 0px 30px;;
}

dl.neifac dt {
	margin-left: -15px;
}

dl.neifac dd {
	padding-left: 7px;
	margin-top: 5px;
}

dl.neifac dd span {
	padding: 0px 6px;
	margin-right: 5px;
	background: #444444;
	color: #FFFFFF;
	border-radius: 10px;
}

dl.addr {
	margin-bottom: 15px;
}

dl.addr dt  {
	
}

dl.addr dd {
	margin: 10px 20px 0px 20px;
	padding: 10px;
	font-size: 80%;
	background: #EEEEEE;
	border-radius: 10px;
	border: 1px solid #AAAAAA;
}

ul.imgul {
	list-style-type: none;
}

ul.imgul li {
	display: inline-block;
	position: relative;
	width: 25%;
	padding-top: 25%;
}

ul.imgul li span {
	display: block;
	position: absolute;
	top:  5%;
	left: 5%;
	width:  90%;
	height: 90%;
	border-radius: 0px 0px 15% 0px;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

ul.imgul li dfn {
	display: block;
	position: absolute;
	right: 2%;
	bottom: 2%;
}



.gmInfo {
	valign: absmiddle; 
	width: 44px; 
	height: 44px; 
	margin-right: 3px; 
	display: block; 
	float:left;
}

.gm-style img[src='/assets/e01.svg?'],
.gm-style img[src='/assets/e02.svg?'],
.gm-style img[src='/assets/e03.svg?'],
.gm-style img[src='/assets/e04.svg?'],
.gm-style img[src='/assets/e05.svg?'],
.gm-style img[src='/assets/e06.svg?'],
.gm-style img[src='/assets/e07.svg?'],
.gm-style img[src='/assets/e08.svg?'] { 
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid #666666 !important;
}

.gmInfo {
	valign: absmiddle; 
	width: 44px; 
	height: 44px; 
	margin-right: 3px; 
	display: block; 
	float:left;
}

#dFrom p .clsbtn {
	display: inline-block;
	margin-right: 10px;
	padding: 4px 8px;
	border-radius: 3px;
	border: 1px solid #CCCCCC;
	background: #F8F8F8;
	color: #666666;
	font-size: 80%;
}


#dFrom div:nth-of-type(1),
#dFrom div:nth-of-type(2) {
	width: calc(50% - 10px);
	margin: 0px;
	padding: 0px 5px;
	float: left;

}

#dFrom div:nth-of-type(3) {
	clear: left;
	width: 100%;
	background: #DDDDDD;
	box-sizing: border-box;
	border: 1px solid #AAAAAA;
	padding: 10px;
	margin-bottom: 20px;
}

#dFrom div:nth-of-type(3) button {
	margin: 10px;
	width: calc(100% - 20px);
}

#dFrom div:nth-of-type(3) #f_msg,
#dFrom div:nth-of-type(3) #f_msg * {
	font-size: 12px;
}

#dFrom div:nth-of-type(3) #f_msg span {
	display: inline;
}

#prblock ul {
	list-style-type: none;
}

#prblock li {
	position: relative;
	width: calc(100% / 3);
	height: 0px;
	padding-bottom: calc(100% / 3);
	overflow: hidden;
	float: left;
}

#prblock li a {
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-indent: -9999px;
}

#rcmblock ul {
	list-style-type: none;
}

#rcmblock li {
	position: relative;
	width: calc(100% / 3);
	height: 0px;
	padding-bottom: calc(100% / 3);
	overflow: hidden;
	float: left;
}

#rcmblock li a {
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	/* text-indent: -9999px; */
}

#rcmblock li a span {
	display: block;
	width: 100%;
	padding: 3px 0px;
	font-size: 90%;
	background: rgba(64, 64, 64, 0.5);
	color: #FFFFFF;
	position: absolute;
	bottom: 0;
}


#search_489ban { 
	width: 100%; 
	margin-top: 20px; 
	box-sizing: border-box;
	border: 1px solid #AAAAAA;
	background: #EEEEEE;
	padding: 10px;
}

#search_489ban * {
	text-align: left;
}

#search_489ban .main_489ban,
#search_489ban .main_489ban .area_489ban,
#search_489ban .main_489ban .date_489ban,
#search_489ban .main_489ban .stay_489ban,
#search_489ban .main_489ban .room_489ban,
#search_489ban .main_489ban .area_489ban,
#search_489ban .main_489ban .person_489ban,
#search_489ban .main_489ban button {
	float: left;
}

#search_489ban .main_489ban dt {
	font-weight: bold;
	font-size: 90%;
	margin-bottom: 10px;
}

#search_489ban .main_489ban dd {
	padding-left: 5px;
}

#search_489ban .main_489ban { width: 90%; }
#search_489ban .main_489ban .area_489ban	{ width: 19%; }
#search_489ban .main_489ban .date_489ban	{ width: 24%; }
#search_489ban .main_489ban .date_489ban dd label 	{ display: block; text-align: right; padding-right: 1rem; }
#search_489ban .main_489ban .stay_489ban	{ width: 14%; }
#search_489ban .main_489ban .room_489ban	{ width: 14%; }
#search_489ban .main_489ban .room_489ban span 		{ display: block; text-align: right; padding-right: 1rem; }
#search_489ban .main_489ban .person_489ban	{ width: 14%; }
#search_489ban button { 
	-webkit-appearance: none; 
	background: #222222; 
	color: #FFFFFF;
	margin-top: 20px;
	padding: .5rem .75rem;
	border: 1px solid #888888;
	display: block;
	float: left;
}

.cst {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-bottom: 25%;
	margin: 0px 0px 30px 0px;
}

.cst dl {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	background: #FFF;
}

.cst dt {
	display: block;
	width: 33%;
	height: 100%;
	float: left;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-indent: -9999px;
	position: relative;
}

.cst dt a {
	display: block;
	width: 100%;
	height: 100%;
}

.cst dt a span,
.cst dt a dfn {
	display: block;
	position: absolute;
	text-indent: -9999px;
	background-size: contain;
}

.cst dt a span {
	width:  50px;
	height: 50px;
	top:     0px;
	left:    0px;
}

.cst dt a dfn {
	width:  32px;
	height: 32px;
	top:     5px;
	right:   5px;
}

.cst dt a span.newart { 
	background-image: url(/assets/badge_newart.svg);
}

.cst dt a span.rsrvok { 
	background-image: url(/assets/badge_rsrvok.svg);
}

.cst dd {
	width: calc(100% - 33% - 10px);
	float: right;
	text-align: left;
}

.cst dd:nth-of-type(1) {
	font-weight: 700;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.cst dd:nth-of-type(2) {
	font-weight: 300;
	margin-top: 10px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.cst dd:nth-of-type(3) {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 40px;
	line-height: 55px;
	text-align: right;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	background: linear-gradient(to top, #FFF 27px, rgba(0,0,0,0) 100%);
}

.cst dd:nth-of-type(3),
.cst dd:nth-of-type(3) * {
	font-size: 12px;
}

.cst dd:nth-of-type(3) span {
	background-repeat: no-repeat;
	background-position: left;
	background-size: 0px; /* contain; */
	padding: 0px 0px 0px 20px;
}



@media (min-width: 1000px) { 
	header,
	main,
	footer {
		width: 1000px;
	}

	.cst dd:nth-of-type(2) {
		padding-top: 7px;
	}

	.cst_var dd:nth-of-type(1) a {
		font-size: var(--cstTitleSize);
	}

	.cst_var dd:nth-of-type(2) {
		font-size: var(--cstDescriptSize);
	}

	.cst_fix dd:nth-of-type(1) a {
		font-size: var(--cstTitleSize);
	}

	.cst_fix dd:nth-of-type(2) {
		font-size: var(--cstDescriptSize);
	}
}


@media (max-width: 999px) { 
	main,
	footer {
		width: calc(100% - 14px);
		padding: 0px 7px;
	}

	main {
		padding: 100px 7px 0px 7px;
	}

	footer {
		padding: 0px 7px;
	}

	header {
		width: calc(100% - 14px);
	}

	#dFrom div:nth-of-type(1),
	#dFrom div:nth-of-type(2) {
		width: calc(50% - 10px);
	}

	.cst dd:nth-of-type(2) {
		padding-top: 2px;
	}
	
	.cst_var dd:nth-of-type(1) a {
		font-size: calc(15px + (24 - 15) * (100vw - 320px) / (1000 - 320));
	}
	
	.cst_var dd:nth-of-type(2) {
		font-size: calc(12px + (16 - 12) * (100vw - 320px) / (1000 - 320));
	}
	
	.cst_fix dd:nth-of-type(1) a {
		font-size: var(--cstTitlesizeSmp);
	}
	
	.cst_fix dd:nth-of-type(2) {
		font-size: var(--cstDescriptSizeSmp);
	}
}


@media (max-width: 935px) { 
	#search_489ban .main_489ban { width: 85%; }
	#search_489ban .main_489ban .date_489ban dd label { display: inline; }
}


@media (max-width: 800px) { 
	#search_489ban * {
		text-align: center;
	}
	
	#search_489ban .main_489ban { width: 100%; }
	#search_489ban .main_489ban .area_489ban	{ width: 100%; }
	#search_489ban .main_489ban .date_489ban	{ width: 100%; }
	#search_489ban .main_489ban .date_489ban dd label 	{ display: inline; padding-right: 0rem; padding-left: 7px; }
	#search_489ban .main_489ban .stay_489ban	{ width: 50%; }
	#search_489ban .main_489ban .room_489ban	{ width: 50%; }
	#search_489ban .main_489ban .room_489ban span 		{ display: inline; padding-right: 0rem; padding-left: 2px; }
	#search_489ban .main_489ban .person_489ban	{ width: 50%; }
	
	#search_489ban .main_489ban .stay_489ban dt,
	#search_489ban .main_489ban .stay_489ban dd,
	#search_489ban .main_489ban .room_489ban dt,
	#search_489ban .main_489ban .room_489ban dd,
	#search_489ban .main_489ban .person_489ban dt,
	#search_489ban .main_489ban .person_489ban dd {
	 display: inline;
	}
	
	#search_489ban button { 
		margin: 0px auto 10px auto;
		padding: .5rem .75rem;
		display: block;
		float: none;
	}
	
	#search_489ban .main_489ban dl {
		padding: 10px 0px;
	}
	
	#search_489ban .main_489ban dt {
		margin-bottom: 0px;
	}
	
	#search_489ban .main_489ban dd {
		padding-left: 0px;
	}
}



@media (max-width: 767px) { 
	#header h1.site-title a,
	#header  p.site-title a {
		width: 146px;
		height: 50px;
		background-image: url(/assets/puracam_logo_sp.svg);
	}
	
	#dFrom div:nth-of-type(1) {
		width: calc(100% - 14px);
		margin: 0px 0px 20px 0px;
	}
	
	#dFrom div:nth-of-type(2) {
		width: calc(100% - 14px);
	}
	
	.cst_rst .head,
	.cst_rst .body,
	.cst_rst .picb {
		width: 100%;
		float: none;
	}
	
	.cst_rst .picb {
		padding-bottom: 67.25%;
	}
	
	#globalHeroesDiv #heroViewPrev,
	#globalHeroesDiv #heroViewNext {
		width: 30px;
		height: 60px;
		top: 20px;
	}
	
	.cst dt a span {
		width:  32px;
		height: 32px;
	}
}

@media (max-width: 550px) { 
	#globalSearch {
		margin-left: 5px;
	}
	
	#dFrom div:nth-of-type(3) #f_msg span {
		display: none;
	}
	
	a.linkbtn span {
		display: none;
	}
	
	.cst_tabs li span,
	.cst_tabs li a span {
		display: none;
	}
	
	.cst_rst .head dd:nth-of-type(1) {
		display: table;
		width: 67%;
		height: calc(1.3em * 2);
		float: left;
	}
	
	.cst_rst .head dd:nth-of-type(1) p {
		display: table-cell;
		vertical-align: middle;
	}
	
	.cst_rst .head dd:nth-of-type(2) {
		width: 33%;
		float: right;
	}
	
	.cst_rst .head dd:nth-of-type(3) {
		width: 33%;
		float: right;
	}
	
	.dlmsc dd {
		clear:left;
		width: calc(100% - 30px);
		padding-left: 30px;
	}
	
		#prblock li {
		width: calc(100% / 2);
		padding-bottom: calc(100% / 2);
	}
}
