@charset "utf-8";
/* =========================================================
	Base
========================================================= */
article {
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

/* =========================================================
	Layout
========================================================= */
[class^="sct-"] {
	margin-top: 2rem;
}
@media only screen and (min-width: 768px) {
	[class^="sct-"] {
		margin-top: 5rem;
	}
}
.sct-planlist {
	margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
	.sct-planlist {
		margin-top: 5rem;
	}
}
/* =========================================================
	Sct-MV (Logo + Title)
========================================================= */
.sct-mv {
	position: relative;
  background: url(/static/img/activity/hokkaido/nemuro/bg-all.jpg) no-repeat center top;
	background-size: cover;
	background-position: center center;
	margin: 0 auto;
	padding: 15px 0;
	text-align: center;
	/*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
}
@media only screen and (min-width: 768px) {
	.sct-mv {
		padding: 30px 0;
	}
}
/* Main-badge
----------------------------------------------------*/
.sct-mv .main-badge {
	position: absolute;
	left: -15%;
	top: 10%;
}
@media only screen and (min-width: 400px) {
	.sct-mv .main-badge {
		left: -18%;
		top: 10%;
	}
}
@media only screen and (min-width: 450px) {
	.sct-mv .main-badge {
		left: -10%;
		top: 10%;
	}
}
@media only screen and (min-width: 550px) {
	.sct-mv .main-badge {
		left: -18%;
		top: 10%;
	}
}
@media only screen and (min-width: 670px) {
	.sct-mv .main-badge {
		left: -10%;
		top: 10%;
	}
}
@media only screen and (min-width: 768px) {
	.sct-mv .main-badge {
		left: -15%;
		top: 10%;
	}
}
@media only screen and (min-width: 900px) {
	.sct-mv .main-badge {
		left: -10%;
		top: 15%;
	}
}
.main-badge .apeal-badge {
	display: table-cell;
	width: 70px;
	height: 70px;
	padding-top: 0.5rem;
	vertical-align: middle;
	background-image: url(/static/img/activity/badge-01.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
  background-position: 50% 50%;
	filter: hue-rotate(320deg);
	color: #fff;
	font-size: 12px;
}
@media only screen and (min-width: 400px) {
	.main-badge .apeal-badge {
		width: 90px;
		height: 90px;
		font-size: 14px;
	}
}
@media only screen and (min-width: 550px) {
	.main-badge .apeal-badge {
		width: 120px;
		height: 120px;
		font-size: 18px;
	}
}
@media only screen and (min-width: 600px) {
	.main-badge .apeal-badge {
		width: 130px;
		height: 130px;
		font-size: 20px;
	}
}
@media only screen and (min-width: 768px) {
	.main-badge .apeal-badge {
		width: 100px;
		height: 100px;
		font-size: 16px;
	}
}
@media only screen and (min-width: 1000px) {
	.main-badge .apeal-badge {
		width: 110px;
		height: 110px;
	}
}
@media only screen and (min-width: 1100px) {
	.main-badge .apeal-badge {
		width: 120px;
		height: 120px;
		font-size: 18px;
	}
}
@media only screen and (min-width: 1180px) {
	.main-badge .apeal-badge {
		width: 130px;
		height: 130px;
		font-size: 20px;
	}
}
/* Main-Logo
----------------------------------------------------*/
/*.frame-01 {
	position: relative;
	color: #8e2e2d;
	margin: 100px auto;
	background: rgb(255,255,255, 0.9);
	box-shadow: 0px 0px 0px 5px rgb(255,255,255, 0.9);
	border: solid 30px;
	border-image-source:url('/static/img/activity/hokkaido/nemuro/border-01_small.png');
	border-image-slice: 30;
	border-image-width: 1;
	border-image-outset: 0;
	border-image-repeat:repeat;
}*/
.main-logo {
	position: relative;
	max-width: 50%;
	margin: 0 auto;
}
/* 768px以上 */
 @media only screen and (min-width: 768px) {
	.main-logo {
		max-width: 30%;
	}
}
/* 992px以上 */
 @media only screen and (min-width: 768px) {
	.main-logo {
		width: 380px;
	}
}
/* Main-Title
----------------------------------------------------*/
.sct-mv h1 {
	position: relative;
	display: inline-block;
	background: #000;
	color: #fff;
	font-size: 14px;
	padding: 0.5rem 1rem;
	margin: 10px auto 0;
}
/* 768px以上 */
 @media only screen and (min-width: 768px) {
	.sct-mv h1 {
		font-size: 20px;
		padding-left: 8rem;
	}
}
/* ----- Prefecture ----- */
.prefecture {
	background: #ef4848;
	color: #fff;
	padding: 0.3rem 1rem;
	border-radius: 16px;
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	margin-right: 0.5rem;
}
/* 768px以上 */
 @media only screen and (min-width: 768px) {
	.prefecture {
		font-size: 18px;
	}
}
/* ----- Area Name ----- */
.area-name {
/*	position: absolute;
	font-size: 60px;
	font-weight: bold;
	left: 18%;
	bottom: 210px;*/
}
.area-name {
	display: inline-block;
	vertical-align: -30%;
	text-align: left;
}
/* 768px以上 */
 @media only screen and (min-width: 768px) {
	.area-name {
		vertical-align: -10%;
	}
}
/* ----- Img Bus ----- */
.sct-mv h1 .img-bus {
	position: absolute;
	left: 0;
	top: -45px;
	max-width: 30%;
	height: auto;
}
/* 768px以上 */
 @media only screen and (min-width: 768px) {
	.sct-mv h1 .img-bus {
		left: -18px;
		top: -12px;
		max-width: 25%;
		height: auto;
	}
}

/* =========================================================
	Local Nav
========================================================= */
.lnav {
  position: sticky;
  top: 0;
  z-index: 1;
	padding: 0;
}
.lnav .container {
	padding: 0;
}
.lnav .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.lnav a {
	color: #fff;
	padding: 0.5rem 0 0.7rem;
	text-align: center;
	
}
.lnav a + a {
	border-left: 2px dashed #fff;
}
/* Gold */
.set-gold .lnav {background: #8e712a;}

/* Red */
.set-red .lnav {background: #ee4848;}

/* Dark Red */
.set-darkred .lnav {background: #8e2e2d;}

/* Blue */
.set-blue .lnav {background: #4a8ced;}

/* Green */
.set-green .lnav {background: #2d8e3b;}

/* Orange */
.set-orange .lnav {background: #d36d30;}

.lnav p {
  font-size: 14px;
  padding: 0 0 0.5rem 0;
  margin: 0;
	line-height: 1.4;
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
  .lnav p {
    font-size: 18px;
		padding: 0 0.5rem 0 0;
  }
}
.lnav a > p:after {
	position: absolute;
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 24px;
	color: #FFF;
	margin-left: 0;
	right: 45%;
	bottom: -8%;
	transform: none;
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
  .lnav a > p:after {
    margin-left: 5px;
    right: 5%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
/* =========================================================
	Common-Title
========================================================= */
h2.title-base {
	position: relative;
	margin: 0 auto 2rem;
	padding-bottom: 10px;
	color: #000000;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
/* 768px以上 */
 @media only screen and (min-width: 768px) {
	h2.title-base {
		font-size: 30px;
	}
}
h2.title-base::after {
	content: "";
	position: absolute;
	border-bottom: 5px solid #000000;
	transform: translate(-50%, 0);
	bottom: 0;
	left: 50%;
	width: 15%;
}
/* Gold */
.set-gold h2.title-base {color: #8e712a;}
.set-gold h2.title-base::after {border-color: #8e712a;}

/* Red */
.set-red h2.title-base {color: #ee4848;}
.set-red h2.title-base::after {border-color: #ee4848;}

/* Dark Red */
.set-darkred h2.title-base {color: #8e2e2d;}
.set-darkred h2.title-base::after {border-color: #8e2e2d;}

/* Blue */
.set-blue h2.title-base {color: #4a8ced;}
.set-blue h2.title-base::after {border-color: #4a8ced;}

/* Navy */
.set-navy h2.title-base {color: #023e74;}
.set-navy h2.title-base::after {border-color: #023e74;}

/* Green */
.set-green h2.title-base {color: #2d8e3b;}
.set-green h2.title-base::after {border-color: #2d8e3b;}

/* Orange */
.set-orange h2.title-base {color: #d36d30;}
.set-orange h2.title-base::after {border-color: #d36d30;}

/* =========================================================
	P
========================================================= */
.sct-lead p {
	text-align: left;
	font-size: 14px;
}
/* 768px以上 */
 @media only screen and (min-width: 768px) {
	.sct-lead p {
		text-align: center;
		font-size: 22px;
	}
}
h2.title-base + p {
	font-size: 16px;
	text-align: left;
	margin-bottom: 2rem;
}
/* 768px以上 */
 @media only screen and (min-width: 768px) {
	h2.title-base + p {
		font-size: 18px;
		text-align: center;
	}
}

[class^="frame-"] p {
	font-size: 14px;
}
/* 768px以上 */
 @media only screen and (min-width: 768px) {
	[class^="frame-"] p {
		font-size: 16px;
	}
}
/* =========================================================
	飾りFrame
========================================================= */
/* Base
----------------------------------------------------*/
[class^="frame-"] {
	padding: 0.2rem;
	/*color: #8e2e2d;*/
	background: rgb(255,255,255, 0.9);
	/*box-shadow: 0px 0px 0px 5px rgb(255,255,255, 0.9);*/
	border: solid 30px;
	border-image-slice: 30;
	border-image-width: 1;
	border-image-outset: 0;
	border-image-repeat:repeat;
}
[class^="frame-"] .card {
	border: none;
}
/* Frame-Big
----------------------------------------------------*/
[class^="frame-b"] {
	border: solid 60px;
	border-image-slice: 60;
}

/* Frame-Small
----------------------------------------------------*/
.frame-s01 {
	margin: 0 auto;
	background: rgb(255,255,255, 0.9);
	border: solid 30px;
	border-image-source:url('/static/img/activity/border-01-gold.png');
	border-image-slice: 30;
	border-image-width: 1;
	border-image-outset: 0;
	border-image-repeat:repeat;
}
/* Gold */
.set-gold .frame-s01 {border-image-source:url('/static/img/activity/border-01-gold.png');}

/* Red */
.set-red .frame-s01 {border-image-source:url('/static/img/activity/border-01-red.png');}

/* Dark Red */
.set-darkred .frame-s01 {border-image-source:url('/static/img/activity/border-01-darkred.png');}

/* Blue */
.set-blue .frame-s01 {border-image-source:url('/static/img/activity/border-01-blue.png');}

/* Navy */
.set-navy .frame-s01 {border-image-source:url('/static/img/activity/border-01-navy.png');}

/* Green */
.set-green .frame-s01 {border-image-source:url('/static/img/activity/border-01-green.png');}

/* Orange */
.set-orange .frame-s01 {border-image-source:url('/static/img/activity/border-01-orange.png?aaa');}

/* ----- Common ----- */
[class^="frame-s"] {
	border: solid 15px;
	border-image-slice: 30;
}
/* 768px以上 */
 @media only screen and (min-width: 768px) {
	[class^="frame-s"] {
		border: solid 30px;
		border-image-slice: 30;
	}
}

/* Frame-Line (上下線)
----------------------------------------------------*/
[class^="frame-l"] {
	padding: 2rem 0;
}
/* ----- 市松 ----- */
.frame-l01 {
	border: solid 30px;
	border-image-source:url('/static/img/activity/border-03_c.png');
	border-image-slice: 60;
	border-image-width: 1;
	border-image-outset: 0;
	border-image-repeat: round;
}
/* Gold */
.set-gold .frame-l01 {border-image-source:url('/static/img/activity/border-03_a.png');}

/* Red */
.set-red .frame-l01 {border-image-source:url('/static/img/activity/border-03_b.png');}

/* Blue */
.set-blue .frame-l01 {border-image-source:url('/static/img/activity/border-03_c.png');}


/* Frame-Note
----------------------------------------------------*/
.note {
	border: 3px solid #ccc;
	padding: 1rem;
}
.note h3 {
	font-weight: bold;
	margin-bottom: 0.5rem;
}
.note h3,
.note p {
	text-align: left;
}
@media only screen and (min-width: 768px) {
	.note h3,
	.note p {
		text-align: center;
	}
}
article .badge {
	margin-right: 8px;
}


/* ----- 休館日 DL ----- */
.info-dl {
	margin: 1rem auto 0;
}
.info-dl dt,
.info-dl dd {
	float: left;
}
.info-dl dt {
	padding-right: 1rem;
}
/* =========================================================
	Card
========================================================= */
.sct-spot .card h3 {
	font-size: 18px;
	font-weight: bold;
	margin: 1rem 0 0.5rem;
}
[class^="frame-"] [class^="col-"] + [class^="col-"] {
	margin-top: 2rem;
}
/* 768px以上 */
 @media only screen and (min-width: 768px) {
	[class^="frame-"] [class^="col-"] + [class^="col-"] {
		margin-top: 0;
	}
	[class^="frame-"] [class^="col-"]:nth-of-type(n+4) {
		margin-top: 2rem;
	}
}
/* =========================================================
	Common
========================================================= */
/* Img-Fluid2
----------------------------------------------------*/
.img-fluid2 {
	width: 100%;
	height: auto;
}

/* List
----------------------------------------------------*/
/* ----- Note(※) ----- */
.mark-note {
	margin: 1rem auto 0;
}
	.mark-note li {
		text-indent: -0.9rem;
	}
	.mark-note li:before {
		content: '※';
	}

/* ----- Disc ----- */
.mark-disc > li {
	list-style: disc;
	margin-left: 1.3rem;
}
.mark-disc > li + li {
  margin-top: 0.2rem;
}

/* Txt-Link
----------------------------------------------------*/
.txt-link {
	text-decoration: underline;
	color: #000;
}

/* Popup Icon
----------------------------------------------------*/
article a[target="_blank"]:after {
	content: "\f24d";
	font-family: "Font Awesome 5 Free";
	font-weight: normal;
	margin-left: 5px;
	font-size: 14px;
}

/* Map Icon
----------------------------------------------------*/
article .ico-map:before {
	content: "\f3c5";
	font-family: "Font Awesome 5 Free";
	font-weight: 700;
	margin-right: 5px;
	font-size: 14px;
}
/* Ruby
----------------------------------------------------*/
ruby[data-ruby] {
	position: relative;
}
ruby[data-ruby]::before {
	content: attr(data-ruby);
	position:absolute;
	left: -2rem;
	top: -0.6rem;
	right: -2rem;
	text-align: center;
  font-size: 0.6rem;
}
rt {
	display: none;
}

/* Text Apeal
----------------------------------------------------*/
.apeal {
  font-size: 115%;
}

/* Letter-Spacing
----------------------------------------------------*/
.ls-05 {
  letter-spacing: -0.5px;
}
.ls-1 {
  letter-spacing: -1px;
}
.ls-2 {
  letter-spacing: -2px;
}
/* Color
----------------------------------------------------*/
.red {
  color: red;
}

/* Font-size
----------------------------------------------------*/
.f13-11,
.f13-11 li {font-size: 11px;}
@media only screen and (min-width: 768px) {
	.f13-11,
  .f13-11 li {font-size: 13px;}
}
.f14-12,
.f14-12 li {font-size: 12px;}
@media only screen and (min-width: 768px) {
	.f14-12,
  .f14-12 li {font-size: 14px;}
}
.f15-13,
.f15-13 li {font-size: 13px;}
@media only screen and (min-width: 768px) {
	.f15-13,
  .f15-13 li {font-size: 15px;}
}
.f16-14,
.f16-14 li {font-size: 14px;}
@media only screen and (min-width: 768px) {
	.f16-14,
  .f16-14 li {font-size: 16px;}
}
.f18-16,
.f18-16 li {font-size: 16px;}
@media only screen and (min-width: 768px) {
	.f18-16,
  .f18-16 li {font-size: 18px;}
}
.f20-16,
.f20-16 li {font-size: 16px;}
@media only screen and (min-width: 768px) {
	.f20-16,
  .f20-16 li {font-size: 20px;}
}
.f20-18,
.f20-18 li {font-size: 18px;}
@media only screen and (min-width: 768px) {
	.f20-18,
  .f20-18 li {font-size: 20px;}
}
.f22-18,
.f22-18 li {font-size: 18px;}
@media only screen and (min-width: 768px) {
	.f22-18,
  .f22-18 li {font-size: 22px;}
}
.f22-20,
.f22-20 li {font-size: 20px;}
@media only screen and (min-width: 768px) {
	.f22-20,
  .f22-20 li {font-size: 22px;}
}
.f24-20,
.f24-20 li {font-size: 20px;}
@media only screen and (min-width: 768px) {
	.f24-20,
  .f24-20 li {font-size: 24px;}
}

/* width
----------------------------------------------------*/
.w-96,
.w-90,
.w-90-100,
.w-85,
.w-85-100,
.w-80,
.w-80-90,
.w-80-100,
.w-75,
.w-70,
.w-60,
.w-60-100,
.w-50 {
  margin-left: auto;
  margin-right: auto;
}
.w-96 {width: 96%;}
.w-90 {width: 90%;}
.w-90-100 {width: 100%;}
/* 992px以上 */
@media only screen and (min-width: 992px) {
  .w-90-100 {width: 90%;}
}
.w-85 {width: 85%;}
.w-85-100 {width: 100%;}
/* 992px以上 */
@media only screen and (min-width: 992px) {
  .w-85-100 {width: 85%;}
}
.w-80 {width: 80%;}
.w-80-90 {width: 90%;}
/* 992px以上 */
@media only screen and (min-width: 992px) {
  .w-80-90 {width: 80%;}
}
.w-80-100 {width: 100%;}
/* 992px以上 */
@media only screen and (min-width: 992px) {
  .w-80-100 {width: 80%;}
}
.w-75 {width: 75%;}
.w-70 {width: 70%;}
.w-60 {width: 60%;}
.w-60-100 {width: 100%;}
/* 992px以上 */
@media only screen and (min-width: 992px) {
  .w-60-100 {width: 60%;}
}
.w-50 {width: 50%;}