/*--------------------------------------
北海道釧路町観光ポータルサイト
welcome-kushirocho.jp
--
2024-10-04	update
2020-11-10
--------------------------------------*/
@charset "UTF-8";


/*--------------------------------------
Base
--------------------------------------*/
html,
body {
	margin: 0;
	padding: 0;
	color: #231815;
	color: #555;
	font-size: 16px;
	font-family: sans-serif;
	line-height: 1.6;
	overflow-x: hidden;
}

a	{ text-decoration: none; transition: all 0.3s; }
a:hover	{ text-decoration: none; }
/*
a img		{ max-width: 100%; transition: all 0.6s; }
a:hover img	{ opacity: .6; }
*/
h1, h2, h3, h4, h5 {
	position: relative;
	line-height: 1.5;
}
h1	{ font-size: 300%; }
h2	{ font-size: 240%; }
h3	{ font-size: 180%; }
h4	{ font-size: 160%; font-weight: normal; }
h5	{ font-size: 130%; font-weight: normal; }

h1 a,
h2 a,
h3 a,
h4 a,
h5 a	{ color: inherit; }

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover	{ text-decoration: none; opacity: 0.6; }

h1 span,
h2 span,
h3 span,
h4 span,
h5 span	{ display: inline-block; }

img	{ max-width: 100%; }

img + small {
	display: block;
	margin: 6px auto 1rem;
	color: #787878;
	font-size: 0.7rem;
	text-align: center;
}

em,
address	{ font-style: normal; }

table { border-collapse: collapse; }
th,
td	{ margin: 0; padding: .5rem; font-size: 1rem; line-height: 1.5; }
th	{ border: thin #dcc solid; background-color: rgba(128,96,64,.05); font-weight: normal; }
td	{ border: thin #dcc solid; }
table .pc	{ background-color: rgba(128,32,0,.08); }

dl,
dt,
dd	{ margin: 0; padding: 0; }

ul,
ol	{ margin: 1rem 0; padding: 0; }
ul > li,
ol > li {
	position: relative;
	margin: 10px 0px;
	padding-left: 1.8em;
	line-height: 1.5;
	list-style-type: none;
}
ol	{ counter-reset: num; }
ol li:before {
	position: absolute;
	font-size: 1em;
	left: -0.1em;
	top: 0em;
	font-weight: bold;
	display: block;
	line-height: 1.5;
	counter-increment: num;
	content: counter(num, decimal-leading-zero)".";
}
pre	{
	padding: 1em;
	font-weight: lighter;
	font-size: .8em;
	background-color: rgba(0,0,0,.1);
	opacity: .6;
}
ruby > rt {
	font-size: 0.6em;
	text-indent: 1em;
}


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

.fl		{ float: left; margin-right: 1rem; }
.fr 	{ float: right; margin-left: 1rem; }
.abs	{ position: absolute; }

.xs	{ font-size:  70%; }
.s	{ font-size:  80%; }
.md	{ font-size: 100%; }
.lg	{ font-size: 120%; }
.xl	{ font-size: 140%; }

.min	{ font-family: 'Noto Serif', serif; }
.lead	{ font-weight: bold; font-size: 1.2rem; }
.bold	{ font-weight: bold; }

.indent	{ padding-left: 1em; text-indent: -1em; }
.indent > *	{ text-indent: 0; }


.txt	{ margin: auto; max-width: 76ch; }
.txt h3	{ margin-top: 0; padding: .5em 0; border-bottom: 3px solid #da7; }
.txt span,
.txt small	{ display: inline-block; }

.price		{ margin-top: 0; align-self: start; }
.price h5	{ margin-bottom: 0; }
.price table{ margin: .5rem 0; }
.price sup	{ font-size: 12px; color: #933; padding-left: .5em; }
.price .anno{ font-size: 12px; color: #933; }

.img	{ padding: 0rem; color: rgba(64,64,64,.6); font-size: 90%; text-align: center; }
.grid	{ padding: 1rem 0; }
.img .grid	{ padding: 1rem 0 0; }

.alph	{ padding: .5em; font-size: 1rem; letter-spacing: .2rem; color: #db6; border-top: 3px solid #b85; }


/*--------------------------------------
font-awesome
--------------------------------------*/
.fa-circle,
.fa-facebook-official	{ color: #1877f2; }
.fa-facebook.fa-stack-1x	{ padding-top: .125em; font-size: 1.6em; }
/*
.fa-facebook {
	padding: .2em .3em 0;
	color: #fff; background-color: #1877f2;
	font-size: 1.4em;
	border-radius: 1.4em;
}
*/

/*--------------------------------------
Inner
--------------------------------------*/
.inner {
	margin: auto;
	padding: 2rem 1rem;
	max-width: 1200px;
}

/*--------------------------------------
Grid Layout
--------------------------------------*/
/* Grid */
.grid	{
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid img	{ display: block; max-width: 100%; }

/* Grid Information */
.grid .info	{ margin: 0; }
.grid .info	{ padding: 1rem; background-color: #fff; box-shadow: 0 0 12px rgba(0,0,0,.1); }
.grid .info span	{ margin: 0; color: #999; font-size:13px; font-weight: normal; }
.grid .info ul		{ margin-left: 1.5em; font-size: .9em; }
.grid .info ul > li	{ padding: 0; list-style-type: disc; }
.grid .info .date	{ color:#090; }
.grid .info .ctg	{ padding: 0; color: #ccc; font-size: 13px; font-weight: normal; text-align: right; }
.grid .info .ctg	{ display: none; }
.grid .info .ttl	{ margin: 0; color: #444; font-size: 1.2em; font-weight: bold; }
.grid .info .cmt	{ font-size: .9em; font-weight: normal; }
.grid .info .img	{ position: relative; width: 100%; padding-top: 56.25%; background-color: #f8f8f8; }
.grid .info .img	{ background: url(./bg_news.jpg) no-repeat 50%  50% / cover; }
.grid .info .img img,
.grid .info .img iframe	{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
/*
.grid .info .img	{ margin: 0; max-height: 250px; overflow: hidden; }
.grid .info .img img,
.grid .info .img iframe	{ margin: 0; display: block; max-width: 100%; max-height: 250px; object-fit: cover; }
*/
.grid .info .cmdbox	{ margin-bottom: .5rem; display: flex; justify-content: space-between; }
.grid .info time {
	display: block;
	font-size: 0.85em;
	font-weight: normal;
	color: #666;
}
.grid .info time:before {
	content: '\f073';
	font-family: FontAwesome;
	margin-right: .5em;
}


/* .btn */
.btn {}
.btn a	{
	display: inline-block;
	margin: auto;
	padding: .5em 2em;
	color: #fff;
	background-color: #0066d3;
	line-height: 1.3;
	border-radius: .5em;
	transition: .3s;
}
.btn a { opacity: .8; }
.btn a:hover { opacity: 1; }


/* .pagelink */
.pagelink {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1rem auto;
	font-size: 13px;
	line-height: 1;
	text-align: center;
}
.pagelink a	{ color: #36c; text-decoration: none; }
.pagelink .blank,
.pagelink .self,
.pagelink .plink {
	display: inline-block;
	margin: 0 5px;
	padding: 3px 5px;
	text-decoration: none;
	background-color: #f8f8f8;
	border: 2px solid #f8f8f8;
	border-radius: .2em;
}
.pagelink .blank		{ color: #999; }
.pagelink .self			{ color: #369; border-color: #69c; font-weight: bold; }
.pagelink .plink:hover	{ color: #fff; border-color: #36c; background-color: #36c; }
/*
.pagelink .plink:visited	{ color:#00f; text-decoration: none; }
*/


.row {
	position: relative;
	clear: both;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
.row > * {
	display: block;
	box-sizing: border-box;
}
.mg0	{ margin: 0; }
.mt0	{ margin-top: 0rem; }
.mt1	{ margin-top: 1rem; }
.mt2	{ margin-top: 2rem; }
.mt3	{ margin-top: 3rem; }
.mt4	{ margin-top: 4rem; }
.mt5	{ margin-top: 5rem; }
.mb0	{ margin-bottom: 0rem; }
.mb1	{ margin-bottom: 1rem; }
.mb2	{ margin-bottom: 2rem; }
.mb3	{ margin-bottom: 3rem; }
.mb4	{ margin-bottom: 4rem; }
.mb5	{ margin-bottom: 5rem; }

.pt1	{ padding-top: 1rem; }
.pt2	{ padding-top: 2rem; }
.pt3	{ padding-top: 3rem; }
.pt4	{ padding-top: 4rem; }
.pt5	{ padding-top: 5rem; }
.pb1	{ padding-bottom: 1rem; }
.pb2	{ padding-bottom: 2rem; }
.pb3	{ padding-bottom: 3rem; }
.pb4	{ padding-bottom: 4rem; }
.pb5	{ padding-bottom: 5rem; }




/*--------------------------------------
header
--------------------------------------*/
header {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	background-color: rgba(0,0,0,.2);
	box-sizing: border-box;
	z-index: 1000;
}
header .sitename	{ height: 64px; margin: 0; padding: 10px 20px; color: #fff; }
header .sitename a	{ font-size: 1.8rem; font-weight: bold; color: inherit; }
header .sitename a	{
	display: block;
	text-indent: -99999px;
	width: 50vw; height: 10vw;
	max-width: 250px; max-height: 50px;
	background: url(logo5x1.png) no-repeat 0% 0% / cover;
}
header .sitename span	{ display: block; font-size: .9rem; }

/*--------------------------------------
nav#hnav
--------------------------------------*/
#hnav {
	display: block;
	position: absolute;
	top: 10px;
	right: 20px;
	width: 64px;
	height: 64px;
	color: #fff;
	background: rgba(0, 96, 192, .9);
	transition: all 0.3s;
}
#hnav.fixed { position: fixed; top: 0px; transition: all 0s; }
#hnav h5 {
	margin: 0px;
	padding: 40px 0px 0px;
	text-align: center;
	font-size: 0.75rem;
	font-weight: bold;
	transition: all 0.3s;
	opacity: .8;
}
#hnav a#hbtn {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 64px;
	height: 64px;
	z-index: 1;
}
#hnav a#hbtn span,
#hnav a#hbtn span:before,
#hnav a#hbtn span:after	{ position: absolute; display: block; background-color: #fff; transition: .1s; }
#hnav a#hbtn span		{ top: 24px; right: 17px; width: 30px; height: 3px; }
#hnav a#hbtn span:before{ top:-10px; left:  0px; width: 100%; height: 3px; content: ''; }
#hnav a#hbtn span:after { top: 10px; left:  0px; width: 100%; height: 3px; content: ''; }

#hnav .hmenu		{ display: none; }
#hnav .hmenu a		{ display: block; margin: 0px; padding: 1rem; color: inherit; font-size: 0.85rem; line-height: 1; }
#hnav .hmenu a:hover{ background-color: #036; }

#hnav.active	{ width: 280px; max-width: 80vw; height: auto; }
#hnav.active	{ top: 0px; right: 0px; }
#hnav.active h5	{ margin: 0; padding: 1rem; font-size: 1rem; text-align: left; }
#hnav.active a#hbtn				{ width: 40px; height: 50px; }
#hnav.active a#hbtn span		{ background-color: transparent; }
#hnav.active a#hbtn span:before	{ top: 0px; width: 100%; transform: rotate(-45deg); }
#hnav.active a#hbtn span:after	{ top: 0px; width: 100%; transform: rotate(45deg); }
#hnav.active .hmenu	{ display: block; margin: 0px; padding: 0px; }

/*--------------------------------------
section
article
--------------------------------------*/
section {
	position: relative;
}
section > .row {
	max-width: 1000px;
	width: 92vw;
	padding: 4rem 0px;
}
article	{}
article > h2:first-child + section > .row { padding-top: 0px; }

/*--------------------------------------
footer
--------------------------------------*/
footer {
	color: #fff;
	background-color: #445;
}
footer .inner {
	width: 92vw;
	max-width: 1000px;
	margin: auto;
	padding: 1em 0;
}
footer .img	{ width: 20vw; max-width: 180px; margin: auto; }
footer h5	{ font-size: 120%; margin: 0; }
footer p	{ font-size:  80%; }
footer .cprt {
	line-height: 2.4;
	font-size: .8em;
	text-align: center;
	background-color: #223;
	opacity: .8;
}
footer #fcontent	{ margin: 0; padding: 0; background-color: transparent; }
footer #fcontent div{ margin-top: 0; max-height: 250px;	text-align: center; }
footer #fcontent a	{ transform: scale(.95); }
footer #fcontent h2 { font-size: 2.2rem; }
footer #fcontent small { font-size: 1.5rem; }
footer #fcontent .access { width: 100vw; height: 50vh; }
footer #fcontent .nature { width:  50vw; height: 50vh; }
footer #fcontent .foods  { width:  50vw; height: 50vh; margin-left: 0; }
footer #fcontent .camp   { width: 33.0vw; height: 30vh; }
footer #fcontent .nandok { width: 33.0vw; height: 30vh; margin-left: 0; }
footer #fcontent .explan { width: 33.0vw; height: 30vh; margin-left: 0; }
footer #fcontent .photo  { width: 34.0vw; height: 30vh; margin-left: 0; }

footer #fcontent .access h2 { font-size: 3.0rem; }	/* 釧路町について */
footer #fcontent .nature h2 { font-size: 3.0rem; }	/* 自然 */
footer #fcontent .foods  h2 { font-size: 3.0rem; }	/* 食 */
footer #fcontent .camp   h2 { font-size: 2.4rem; }	/* キャンプ */
footer #fcontent .nandok h2 { font-size: 2.4rem; }	/* 時空旅行 */
footer #fcontent .explan h2 { font-size: 2.4rem; }	/* 体験 */
footer #fcontent .photo  h2 { font-size: 1.8rem; }	/* フォトギャラリー */

/*-------------------------------------------------------------
	ページトップへ戻る
------------------------------------------------------------ */
#pagetop {
	position: fixed;
	bottom: 1em;
	right: 1em;
	width: 3em;
	height: 3em;
	padding: .5em;
	line-height: 1;
	border-radius: 3em;
	text-align: center;
	color: white;
	background-color: orange;
}
#pagetop	{ opacity: .7; transition: .3s; }
#pagetop:hover	{ opacity: 1; }
#pagetop a	{ display: block; font-size: .8rem; color: inherit; padding: 0; text-decoration: none; }
#pagetop i	{ display: block; font-size: 1.8rem; }


/*---------------------------------------
Movie
---------------------------------------*/
#mv { position: relative; }
#mv { background: url(./video/sample.jpg) no-repeat center top / cover; }
#mv video	{ display: block; width: 100vw; height: 60vh; object-fit: cover; }
#mv h1		{ position: absolute; top: 30vh; left: 0; right: 0; text-align: center; }
#mv h1 img	{ height: 30vh; }

/*---------------------------------------
NewsTop
---------------------------------------*/
#newsTop {
	margin: 0 auto;
	width: 100vw;
	max-width: 1000px;
}
#newsTop h3	{ margin: .5rem auto; display: grid; place-items: center; font-size: 2.4rem; }
#newsTop h3	{ padding-top: 0; border: none; }
#newsTop .alph	{ padding: .5em 1em; font-size: 1.2rem; letter-spacing: .2rem; }

#newsTop .inner { padding: 2rem 0 4rem; height: auto; }
#newsTop .btn {
	margin-top: 2rem;
	text-align: center;
}
/* Grid Information 
.grid .info	{ padding: 1rem; background-color: #fff; box-shadow: 0 0 12px rgba(0,0,0,.1); }
*/
#newsTop .slick-slide	{ height: auto; }
#newsTop .slick-slide a	{ display: block; padding: 20px; color: inherit; }
#newsTop .slick-slide a:hover { background: #efefef; }
#newsTop .slick-slide img	{ width: 100%; height: auto; }
#newsTop .slick-slide h3	{ margin: 0; padding: 5px 0; font-size: 110%; }

#newsTop .slick-slide .img	{ position: relative; width: 100%; padding-top: 56.25%; background-color: #f8f8f8; }
#newsTop .slick-slide .img	{ background: url(./bg_news.jpg) no-repeat 50%  50% / cover; }
#newsTop .slick-slide .img img,
#newsTop .slick-slide .img iframe	{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
#newsTop .slick-slide .ttl	{ margin: 0; color: #444; font-size: 1.1em; font-weight: bold; }
#newsTop .slick-slide .cmt	{ font-size: .9em; font-weight: normal; }
#newsTop .slick-slide .ttl,
#newsTop .slick-slide .cmt	{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

#newsTop .slick-slide p {
	margin: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-all;
}
#newsTop .slick-slide time {
	display: block;
	padding: 5px 0px;
	font-size: 0.85em;
	font-weight: normal;
	color: #666;
}
#newsTop .slick-slide time:before {
	content: '\f073';
	font-family: FontAwesome;
	margin-right: .5em;
}
.slick-arrow {
	position: absolute;
	top: 50%;
	margin-top: -25px;
	overflow: hidden;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	border: 0px;
	z-index: 10;
}
.slick-arrow.slick-prev,
.slick-arrow.slick-next { opacity: .2; cursor: pointer; transition: .3s; }
.slick-arrow.slick-prev { left:  -20px; background: url(./prev.png) no-repeat center center / cover; }
.slick-arrow.slick-next { right: -20px; background: url(./next.png) no-repeat center center / cover; }
.slick-arrow.slick-prev:hover,
.slick-arrow.slick-next:hover { opacity: .6; }

/*---------------------------------------
#fbanner
---------------------------------------*/
#fbanner {
	margin: 0;
	text-align: center;
	background-color: #f8f8f8;
}
#fbanner img { display: block; }
#fbanner .inner {
	margin: auto;
	padding: 3em 0;
	width: 92vw;
	max-width: 1000px;
}
#fbanner .bnr {
	display: block;
	margin: auto;
	color: inherit;
	text-decoration: none;
	vertical-align: bottom;
	line-height: 1;
/*	max-width: 800px;*/
	box-shadow: 0px 0px 9px rgba(0, 0, 0, .2);
}
#fbanner .bnr+*	{ margin-top: 2rem; }
#fbanner .bnr:hover	{ opacity: .9; }

#fbanner .kushiro-town {
	display: block;
	margin: 0 auto 2rem;
/*	max-width: 800px;*/
	text-align: center;
}
#fbanner .kushiro-town a { display: block; padding: 1rem; color: #fff; background-color: #1e2d55; }
#fbanner .kushiro-town a:hover { background: rgba(0, 96, 192, .9); }
#fbanner .kushiro-town img { margin: auto; max-width: 160px; }

/*---------------------------------------
#fcontent	12 Grid -> 1column, 2column, 3column
---------------------------------------*/
#fcontent	{ margin: 0; padding: 0; }
#fcontent	{ display: grid; grid-gap: .5vw; grid-template-columns: repeat(2, 1fr); }
#fcontent div	{ margin: 0; padding: 0; height: 20vh; max-height: 250px; }
#fcontent a { display: grid; place-items: center stretch; }
#fcontent a { height: 100%; text-align: center; color: rgba(255,255,255,.9); transform: scale(.95); }
#fcontent h3{ margin: 0; font-size: 1.5rem; transition: .3s; }
#fcontent i { display: block; font-size: 1.0rem; font-style: normal; font-weight: normal; }
#fcontent span	{ display: inline-block; }

#fcontent .access { background: url(./front_access.jpg) no-repeat 50%  85% / cover; }	/* 釧路町について */
#fcontent .nature { background: url(./front_nature.jpg) no-repeat 50%  50% / cover; }	/* 自然 */
#fcontent .foods  { background: url(./front_foods.jpg)  no-repeat 50% 100% / cover; }	/* 食 */
#fcontent .camp   { background: url(./front_camp.jpg)   no-repeat 50%  80% / cover; }	/* キャンプ */
#fcontent .nandok { background: url(./front_place.jpg)  no-repeat 50% 100% / cover; }	/* 時空旅行 */
#fcontent .explan { background: url(./front_explan.jpg) no-repeat 50% 100% / cover; }	/* 体験 */
#fcontent .photo  { background: url(./front_photo.jpg)  no-repeat 50%  80% / cover; }	/* フォトギャラリー */

#fcontent a:hover { transform: scale(1); background-color: rgba(0,0,0,.8); }

#fcontent .access a:hover { background-color: rgba(192, 96,  0, .8); }
#fcontent .nature a:hover { background-color: rgba(  0, 96,192, .8); }
#fcontent .foods  a:hover { background-color: rgba(192, 64, 96, .8); }
#fcontent .camp   a:hover { background-color: rgba(64,  96, 64, .8); }
#fcontent .nandok a:hover { background-color: rgba( 64,128,  0, .8); }
#fcontent .explan a:hover { background-color: rgba( 64,128,  0, .8); }
#fcontent .photo  a:hover { background-color: rgba(  0, 32, 64, .8); }

/*
#fcontent .access { width: 100vw; height: 50vh; }
#fcontent .nature { width:  50vw; height: 50vh; }
#fcontent .foods  { width: 49.5vw; height: 50vh; margin-left: .5vw; }
#fcontent .camp   { width: 33.0vw; height: 30vh; }
#fcontent .nandok { width: 33.0vw; height: 30vh; margin-left: .5vw; }
#fcontent .photo  { width: 33.0vw; height: 30vh; margin-left: .5vw; }
*/

/*--------------------------------------
#sns_api
--------------------------------------*/
#sns_api {
	padding: 4rem 0px 4rem;
	background-color: #f8f8f8;
}
#sns_api > .row {
	width: 92vw;
	max-width: 1100px;
	margin: auto;
}
#sns_api > .row > div { height: 450px; max-width: 500px; }
#sns_api .fb { overflow-y: hidden; }
#sns_api .tw { overflow-y: scroll; }

/*--------------------------------------
#flink
--------------------------------------*/
#flink	{
	color: #889;
	background-color: #e0e3ec;
	background: url(./bg_flink.jpg) no-repeat 50%  66% / cover;
}
#flink .inner	{
	width: 92vw;
	max-width: 1000px;
	margin: auto;
	padding: 3rem 0px;
}
#flink ul	{
	margin: auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
	text-align: center;
	list-style-type: none;
}
#flink li {
	flex: 1 0 40%;
	max-width: 468px;
	min-width: 200px;
	margin: 0 auto;
	padding: 0;
/*	box-shadow: 0px 0px 9px rgba(0, 0, 0, .2);*/
}
#flink .nolnk,
#flink a { display: block; color: inherit; transition: .3s; }
#flink .nolnk:hover,
#flink a:hover { opacity: .8; }
/*#flink a:hover { color: #fff; background-color: #36c; }*/
#flink .fa { display: block; margin-bottom: .5rem; font-size: 2.4em; }
#flink img { display: block; }


/*---------------------------------------
#fbnr	12 Grid -> 3column, 4column
---------------------------------------
#fbnr .wrap2x,
#fbnr .wrap3x	{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
---------------------------------------*/
#fbnr	{ margin: 0; padding: 0; }
#fbnr	{ display: grid; grid-template-columns: repeat(2, 1fr); }
#fbnr div	{ margin: 0; padding: 0; height: 15vh; max-height: 250px; }
#fbnr a 	{ display: grid; place-items: center stretch; }
#fbnr a 	{ height: 100%; text-align: center; color: rgba(255,255,255,.9); }
#fbnr h5	{ margin: 0; font-size: 1.2rem; font-weight: bold; transition: .3s; }
#fbnr small { display: block; font-size: 1.0rem; font-weight: normal; }
#fbnr span	{ display: inline-block; }

#fbnr .access { background: url(./front_access.jpg) no-repeat 50% 100% / cover; }	/* 釧路町について */
#fbnr .nature { background: url(./front_nature.jpg) no-repeat 50%  50% / cover; }	/* 自然 */
#fbnr .foods  { background: url(./front_foods.jpg)  no-repeat 50% 100% / cover; }	/* 食 */
#fbnr .camp   { background: url(./front_camp.jpg)   no-repeat 50% 100% / cover; }	/* キャンプ */
#fbnr .nandok { background: url(./front_place.jpg)  no-repeat 50% 100% / cover; }	/* 時空旅行 */
#fbnr .explan { background: url(./front_explan.jpg) no-repeat 50% 100% / cover; }	/* 体験 */
#fbnr .photo  { background: url(./front_photo.jpg)  no-repeat 50%  60% / cover; }	/* フォトギャラリー */
#fbnr .shopp  { background: url(../shopping/images/shp52.jpg) no-repeat 50% 50% / cover; }	/* ショッピング */
#fbnr .event  { background: url(../event/images/nagaho.jpg)  no-repeat 50% 30% / cover; }	/* イベント */

#fbnr a:hover h5 { transform: scale(1.05); }

#fbnr .access a { background-color: rgba(192, 96,  0, .4); }
#fbnr .nature a { background-color: rgba( 32, 64,160, .4); }
#fbnr .foods  a { background-color: rgba(192,128,  0, .4); }
#fbnr .camp   a { background-color: rgba(128, 64,128, .4); }
#fbnr .nandok a { background-color: rgba( 64, 96, 32, .4); }
#fbnr .explan a { background-color: rgba( 64, 96, 32, .4); }
#fbnr .photo  a { background-color: rgba(  0,  0, 64, .3); }
#fbnr .shopp  a { background-color: rgba(128, 64, 96, .5); }
#fbnr .event  a { background-color: rgba( 64, 96,160, .5); }

#fbnr .access a:hover { background-color: rgba(192, 96,  0, .9); }
#fbnr .nature a:hover { background-color: rgba( 32, 64,160, .9); }
#fbnr .foods  a:hover { background-color: rgba(192,128,  0, .9); }
#fbnr .camp   a:hover { background-color: rgba(128, 64,128, .9); }
#fbnr .nandok a:hover { background-color: rgba( 64, 96, 32, .9); }
#fbnr .explan a:hover { background-color: rgba( 64, 96, 32, .9); }
#fbnr .photo  a:hover { background-color: rgba(  0,  0, 64, .6); }
#fbnr .shopp  a:hover { background-color: rgba(192, 64, 96, .9); }
#fbnr .event  a:hover { background-color: rgba( 64, 96,160, .9); }


/*---------------------------------------
#htitle
---------------------------------------*/
#htitle {
	position: relative;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
/*
#htitle { height: 494px; max-height: 494px; }
*/
#htitle {
	height: 40vh;
	max-height: 280px;
	padding-top: 180px;
	color: #fff;
	text-align: center;
	background-image: url(../video/sample.jpg);
	background-position: center;
	background-size: 100% auto;
}
#htitle:before {
	content: '';
	position: absolute;
	left: 0px;
	top: 0px;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	z-index: 1;
}
#htitle.access	{ background: url(./front_access.jpg) no-repeat 50%  80% / cover; }	/* 釧路町について */
#htitle.nature	{ background: url(../nature/images/ntr15.jpg) no-repeat 50% 50% / cover; }	/* 自然 セキネップ・夕日 */
#htitle.explan	{ background: url(./front_nature.jpg) no-repeat 50%  50% / cover; }	/* 体験プラン */
#htitle.foods	{ background: url(./front_foods.jpg) no-repeat 50% 100% / cover; }	/* 食 */
#htitle.camp	{ background: url(./front_camp.jpg)  no-repeat 50%  80% / cover; }	/* キャンプ */
#htitle.nandok	{ background: url(./front_place.jpg) no-repeat 50% 100% / cover; }	/* 時空旅行 */
#htitle.photo	{ background: url(./front_photo.jpg) no-repeat 50%  80% / cover; }	/* フォトギャラリー */
#htitle.news	{ background: url(../images/northern/nth27.jpg) no-repeat 50% 100% / cover; }	/* NEWS */
#htitle.event	{ background: url(../event/images/nagaho.jpg) no-repeat 50% 70% / cover; }	/* イベント 長靴アイスホッケー */
#htitle.shopp	{ background: url(../shopping/images/shp52.jpg) no-repeat 50% 50% / cover; }	/* ショッピング ロバの市 */
#htitle.stay	{ background: url(../images/northern/nth11.jpg) no-repeat 50% 80% / cover; }	/* ホテル */
#htitle.link	{ background: url(../images/northern/nth27.jpg) no-repeat 50%  0% / cover; }
#htitle.livecam	{ background: url(../images/northern/nth03.jpg) no-repeat 50% 50% / cover; }

#htitle	div	{ display: grid; grid-gap: 1rem; place-items: center; }
#htitle	div	{ position: relative; z-index: 2; }
#htitle h1 { margin: 0; font-size: 3rem; letter-spacing: .1rem; }
#htitle h2 { margin: 0; font-size: 1.2rem; letter-spacing: .1rem; }
#htitle h2 { padding: .2rem 2rem; background-color: #c95; border-radius: 1rem; opacity: 1; }
#htitle span { align-items: center; }
/*
#htitle h1:before {
	content: '';
	display: block;
	margin: 0px auto;
	background: url(./images/hokkaido.png) center center no-repeat;
	background-size: contain;
	height: 99px;
}
*/





/*---------------------------------------
#layer2
---------------------------------------*/
#layer2 section	{}
#layer2 section:nth-child(even)	{ background-color: rgba(192,192,160,.1); }
#layer2 footer { margin-top: 5em; }

/*--------------------------------------
アクセス access/
#layer2.access
--------------------------------------*/
#layer2.access .grid	{
	display: grid;
	grid-gap: 2rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
#layer2.access .txt	{ margin: auto; max-width: 800px; }
#layer2.access h3	{ margin: .5rem auto; display: grid; place-items: center; font-size: 3rem; }
#layer2.access h3	{ padding-top: 0; border: none; }
#layer2.access .alph	{ font-size: 1.2rem; letter-spacing: .2rem; }

#drive	{ background-color: #fff; overflow: auto; }
#drive img	{ min-width: 768px; }

/*--------------------------------------
難読地名 nandoku/
--------------------------------------*/
#ndk_map	{ background-color: #fff !important; overflow: auto; }
#ndk_map svg	{ min-width: 768px; }
#nandoku	{ background-color: #fff !important; }
#nandoku ol	{ margin: auto; padding: 2rem 1rem; }
#nandoku ol	{
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
/*	縦方向なら
	grid-auto-flow: column;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
*/
}
#nandoku ol li	{ margin: 0; padding: 0; }
#nandoku ol li:before	{ content:''; }
#nandoku ol span	{ padding-right: .5em; }
#nandoku ol a	{ display: block; padding: .3em 1em; color: #c33; border: thin solid #fcc; border-radius: .5em; }
#nandoku ol a:hover	{ color: #fff; background-color: #c33; }

#ndk_button	{ background-color: #fff !important; }
/*
*/
#nbtn i	{ transition: .2s; }
#nbtn span:before	{ content: 'すべて表示'; }
#nbtn.active i	{ transform: rotate(180deg); }
#nbtn.active span:before	{ content: 'かくす'; }
#ndk_wrapp	{ margin: auto; padding: 2rem 1rem; }
#ndk_wrapp	{ display: none; }
#ndk_wrapp.active	{
	display: grid;
	grid-gap: 2rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.popup	{ padding: 1rem; background-color: #fff; box-shadow: 0 0 12px rgba(0,0,0,.1); }
.popup .p_inner	{ max-width: 600px; margin: auto; text-align: center; }
.popup .p_inner p	{ margin: 0 auto; }
.popup .p_num		{ display: inline-block; font-size: 180%; }
.popup .p_kanj		{ display: inline-block; font-size: 180%; }
.popup .p_kana		{ display: inline-block; font-size: 180%; padding-left: 1rem; }
.popup .p_alph		{ font-size: 100%; padding: .5em; letter-spacing: .3em; color: #db6; border-top: 3px solid #b85; }
.popup .p_mean		{ font-size: 130%; text-align: left; }
.popup .p_desc		{ font-size:  90%; text-align: left; }
.popup .p_anno		{ font-size: 12px; text-align: left; padding-top: 1em; color: #933; }
.popup sup			{ font-size: 12px; color: #933; }
.popup ul	{ font-size:  80%; text-align: left; margin: 0 0 1rem 1.5rem; }
.popup ul li	{ margin: 0; padding: 0; list-style-type: initial; }

.popup.fancybox-content	{ margin: auto 1em; padding: 40px 20px 20px; }

/*--------------------------------------
#layer2.nature
--------------------------------------*/
.gb-link	{ margin: 1em auto; max-width: 420px; display: flex; gap: 1em; }
.gb-link >*	{ font-size: .8em; text-align: center; }
.gb-link a	{ display: block; transition: .2s; }
.gb-link a:hover { opacity: .8; }

/*--------------------------------------
#layer2.foods
--------------------------------------*/
#layer2.foods .grid	{
	display: grid;
	grid-gap: 2rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
#layer2.foods .grid > div	{ padding: 1rem; background-color: #fff; box-shadow: 0 0 12px rgba(0,0,0,.1); }
#layer2.foods h3	{ margin: .5rem auto; display: grid; place-items: center; font-size: 4rem; }
#layer2.foods h4	{ margin: .5rem auto; padding: .3rem; text-align: center; border-bottom: 3px solid #b85; }
#layer2.foods p		{ margin: 0 auto; }

/*--------------------------------------
#layer2.news
--------------------------------------*/
#layer2.news {}
#layer2.news .grid	{
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/*--------------------------------------
#layer2.photo_gallery
--------------------------------------*/
#layer2.photo_gallery {}
#layer2.photo_gallery .grid	{
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/*--------------------------------------
宿泊 stay/
#layer2.stay
--------------------------------------*/
#layer2.stay h3,
#layer2.stay .alph	{ color: #ccc; border-color: #ccc; }

#layer2.stay h3	{ margin: .5rem auto; display: grid; place-items: center; font-size: 2.6em; }
#layer2.stay h3	{ padding-top: 0; border: none; }
#layer2.stay h3 i	{ margin-bottom: 1rem; }
#layer2.stay .alph	{ font-size: 1rem; letter-spacing: .2rem; }
#layer2.stay .grid	{
	display: grid;
	grid-gap: 2rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
#layer2.stay .grid > li	{ padding: 1rem; background-color: #fff; box-shadow: 0 0 12px rgba(0,0,0,.1); }
#layer2.stay .grid a	{ display: block; color: inherit; text-align: center; }
#layer2.stay .grid a:hover	{ opacity: .8; }
#layer2.stay .grid i{ display: block; color: #03c; font-size: 2.4em; margin-bottom: 1rem; opacity: .6; }
#layer2.stay .grid span	{ display: block; color: #583; font-size: .8rem; }

/*--------------------------------------
リンク link/
#layer2.link
--------------------------------------*/
#layer2.link h3	{ margin: .5rem auto; display: grid; place-items: center; font-size: 2.6em; }
#layer2.link h3	{ padding-top: 0; border: none; }
#layer2.link h3 i	{ margin-bottom: 1rem; }
#layer2.link .alph	{ font-size: 1rem; letter-spacing: .2rem; }
#layer2.link .grid	{
	display: grid;
	grid-gap: 2rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
#layer2.link .grid > li	{ padding: 1rem; background-color: #fff; box-shadow: 0 0 12px rgba(0,0,0,.1); }
#layer2.link .grid a	{ display: block; color: inherit; text-align: center; }
#layer2.link .grid a:hover	{ opacity: .8; }
#layer2.link .grid i{ display: block; color: #03c; font-size: 2.4em; margin-bottom: 1rem; opacity: .6; }
#layer2.link .grid span	{ display: block; color: #583; font-size: .8rem; }








/*----------------------------------------------
------------------------------------------------
------------------------------------------------
	Responsive
------------------------------------------------
------------------------------------------------
------------------------------------------------*/

/* 768px以下 */
@media screen and (max-width: 768px) {
	html, body {
		width: 100%;
		overflow-x: hidden;
		line-height: 1.5;
	}
	.pc { display: none !important; }

	.row.sp_col2, .row.sp_col46, .row.sp_col64, .row.sp_col3, .row.sp_col4, .row.sp_sol3, .row.sp_col5 {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch; justify-content: space-between;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.row.sp_col2 > *	{ flex-basis: 48%; max-width: 48%; }
	.row.sp_col3 > *	{ flex-basis: 32%; max-width: 32%; }
	.row.sp_col4 > *	{ flex-basis: 23.5%; max-width: 23.5%; }
	.row.sp_col5 > *	{ flex-basis: 18.4%; max-width: 18.4%; }
	.row.sp_col46 > *:nth-child(odd)	{ flex-basis: 34%; max-width: 34%; }
	.row.sp_col46 > *:nth-child(even)	{ flex-basis: 62%; max-width: 62%; }
	.row.sp_col64 > *:nth-child(odd)	{ flex-basis: 60%; max-width: 60%; }
	.row.sp_col64 > *:nth-child(even)	{ margin-right: 0px; flex-basis: 34%; max-width: 34%; }
	.row.sp_sol3 > *	{ flex-basis: 33.3%; max-width: 33.3%; }
	.imgs	{ position: relative; margin: 1rem 0px; }
	.imgs img	{ display: block; width: 100%; height: auto; }

	/*--joint--*/
	html, body {}
/*
	#hnav { position: fixed; top: 0px; }
	#hnav.active {}
	#hnav .hmenu a { font-size: 1rem; }
*/
	#newsTop > .inner {
		width: 100vw;
		padding: 2rem 0px;
	}
	.slick-arrow.slick-prev { left:  12vw; }
	.slick-arrow.slick-next { right: 12vw; }

	article > h2:first-child + section > .row { padding-top: 0px !important; }

	.access_route { margin-top: -3rem; }
	.access_route ul li dl { display: block; }

	#sns_api { padding-top: 2rem; }
	#sns_api .fb { border: 1px solid #CCC; }
	#sns_api .tw { border: 1px solid #CCC; margin-top: 2rem; }

	footer		{ text-align: center; }
	footer h5	{ font-weight: 400; }
	footer p	{ display: block; }
}

/* 480px以上 */
@media screen and (min-width: 480px) {
	/*-- Movie --*/
	#mv video	{ height: 90vh; }
}

/* 769px以上 */
@media screen and (min-width: 769px) {
	.sp	{ display: none !important; }

	.row.w100	{ max-width: 100% !important; }
	.row.w500	{ max-width: 500px !important; }
	.row.w600	{ max-width: 600px !important; }
	.row.w700	{ max-width: 700px !important; }
	.row.w750	{ max-width: 750px !important; }
	.row.w800	{ max-width: 800px !important; }
	.row.w850	{ max-width: 850px !important; }
	.row.w900	{ max-width: 900px !important; }
	.row.w1000	{ max-width: 1000px !important; }
	.row.w1200	{ max-width: 1200px !important; }
	.row.col2, .row.sol2, .row.col3, .row.sol3, .row.col4, .row.col5, .row.col6,
	.row.col28, .row.col82, .row.col37, .row.col64, .row.col65, .row.col73, .row.col82,
	.row.col23s, .row.sol64, .row.sol5,
	.row.col46	{
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.row.sol2,
	.row.sol5,
	.row.col2,
	.row.col3,
	.row.col4,
	.row.col5,
	.row.col6,
	.row.col23s,
	.row.col28,
	.row.col37,
	.row.col46,
	.row.col64,
	.row.col65,
	.row.col73,
	.row.col82	{ justify-content: space-between; }
	.row.just	{ justify-content: space-between !important; }
	.row.around	{ justify-content: space-around !important; }
	.row.evenly	{ justify-content: space-evenly !important; }
	.row.center	{ justify-content: center !important; }
	.row.left	{ justify-content: left !important; }
	.row.right	{ justify-content: right !important; }
	.row.middle	{ align-items: center !important; }
	.row.baseline	{ align-items: baseline !important; }
	.row.end	{ align-items: flex-end !important; }
	.row.rev	{ flex-direction: row-reverse; }
	.row.column	{ flex-direction: column }
	.row.colrev	{ flex-direction: column-reverse; }
	.row.flex	{ display: flex; }
	.row.flex > *	{ display: block; }
	.row.col2 > *		{ flex-basis: 48%; max-width: 48%; }
	.row.col2.ms0 > *	{ flex-basis: 50%; max-width: 50%; }
	.row.col2.ms2 > *	{ flex-basis: 48%; max-width: 48%; }
	.row.col2.ms3 > *	{ flex-basis: 47%; max-width: 47%; }
	.row.col2.ms4 > *	{ flex-basis: 46%; max-width: 46%; }
	.row.col3 > *		{ flex-basis: 31.3%; max-width: 31.3%; }
	.row.col3.ms0 > *	{ flex-basis: 33.3%; max-width: 33.3%; }
	.row.col3.ms2 > *	{ flex-basis: 31.3%; max-width: 31.3%; }
	.row.col3.ms3 > *	{ flex-basis: 30.3%; max-width: 30.3%; }
	.row.col4 > *		{ flex-basis: 24%; max-width: 24%; }
	.row.col4.ms0 > *	{ flex-basis: 25%; max-width: 25%; }
	.row.col4.ms2 > *	{ flex-basis: 23%; max-width: 23%; }
	.row.col4.ms3 > *	{ flex-basis: 22%; max-width: 22%; }
	.row.col5 > *		{ flex-basis: 18.4%; max-width: 18.4%; }
	.row.col5.ms2 > *	{ flex-basis: 17.4%; max-width: 17.4%; }
	.row.col6 > *		{ flex-basis: 14.96%; max-width: 14.96%; }
	.row.col65 > *:nth-child(odd)	{ flex-basis: 64%; max-width: 64%; }
	.row.col64 > *:nth-child(odd)	{ flex-basis: 58%; max-width: 58%; }
	.row.col46 > *:nth-child(odd)	{ flex-basis: 38%; max-width: 38%; }
	.row.col37 > *:nth-child(odd)	{ flex-basis: 29%; max-width: 29%; }
	.row.col37.ms3 > *:nth-child(odd) { flex-basis: 29%; max-width: 29%; }
	.row.col73 > *:nth-child(odd)	{ flex-basis: 67%; max-width: 67%; }
	.row.col28 > *:nth-child(odd)	{ flex-basis: 21%; max-width: 21%; }
	.row.col82 > *:nth-child(odd)	{ flex-basis: 75%; max-width: 75%; }
	.row.col46 > *:nth-child(odd),
	.row.col28 > *:nth-child(odd),
	.row.col82 > *:nth-child(even),
	.row.col37 > *:nth-child(odd),
	.row.col73 > *:nth-child(odd),
	.row.col64 > *:nth-child(odd)	{ flex-grow: 0; }
	.row.col46.rev > *:nth-child(odd),
	.row.col28.rev > *:nth-child(odd),
	.row.col37.rev > *:nth-child(odd),
	.row.col73.rev > *:nth-child(odd)	{ flex-grow: 0; margin-right: 0px; }
	.row.col46 > *:nth-child(even),
	.row.col28 > *:nth-child(even),
	.row.col82 > *:nth-child(odd),
	.row.col37 > *:nth-child(even)	{ flex-grow: 1; }
	.row.col65 > *:nth-child(even)	{ flex-basis: 34%; max-width: 34%; }
	.row.col64 > *:nth-child(even)	{ flex-basis: 38%; max-width: 38%; }
	.row.col46 > *:nth-child(even)	{ flex-basis: 58%; max-width: 58%; }
	.row.col37 > *:nth-child(even)	{ flex-basis: 67%; max-width: 67%; margin-right: 0px; }
	.row.col37.ms3 > *:nth-child(even) { flex-basis: 65%; max-width: 65%; }
	.row.col73 > *:nth-child(even)	{ flex-basis: 29%; max-width: 29%; margin-right: 0px; }
	.row.col82 > *:nth-child(even)	{ flex-basis: 21%; max-width: 21%; }
	.row.col28 > *:nth-child(even)	{ flex-basis: 75%; max-width: 75%; }
	.row.col23s > * { flex-basis: 31.3%; max-width: 31.3%; }
	.row.col23s > *:nth-child(5n -1),
	.row.col23s > *:nth-child(5n)	{ flex-basis: 48.6%; max-width: 48.6%; }
	.row.sol2 > *	{ flex-basis: 50%; max-width: 50%; }
	.row.sol3 > *	{ flex-basis: 33.3%; max-width: 33.3%; }
	.row.sol5 > *	{ flex-basis: 20%; max-width: 20%; }
	.row.sol64 > *:nth-child(even)	{ flex-basis: 45%; max-width: 45%; }
	.row.sol64 > *:nth-child(odd)	{ flex-basis: 55%; max-width: 55%; }
	.imgs {
		flex-shrink: 0;
		position: relative;
	}
	.imgs img {
		width: auto;
		height: auto; max-width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	/*--joint--*/
	body {}
	a.tel { pointer-events: none; }
	/*++++*/
	/*++++*/
	/*++++*/
	header .sitename	{ padding: 20px; display: flex; align-items: center; }
	header .sitename span	{ margin-left: 1rem; }

	footer .inner { display: flex; justify-content: center; align-items: center; }
	footer .img	{ margin: 0 2em; width: 30vw; max-width: 180px; }
	footer h5	{ font-size: 150%; margin: 0; }
	footer p	{ font-size:  80%; }

	#hnav {	top: 20px; right: 20px; }

	#fcontent	{ display: grid; grid-template-columns: repeat(12, 1fr); }
	#fcontent div	{ height: 50vh; max-height: 350px; }
	#fcontent .access	{ grid-column: 1 / span 12; height: 50vh; }	/* 釧路町について */
	#fcontent .nature	{ grid-column: 1 / span  6; height: 40vh; }	/* 自然 */
	#fcontent .foods 	{ grid-column: 7 / span  6; height: 40vh; }	/* 食 */
	#fcontent .camp  	{ grid-column: 1 / span  4; height: 30vh; }	/* キャンプ */
	#fcontent .nandok	{ grid-column: 5 / span  4; height: 30vh; }	/* 時空旅行 */
	#fcontent .explan	{ grid-column: 5 / span  4; height: 30vh; }	/* 体験 */
	#fcontent .photo 	{ grid-column: 9 / span  4; height: 30vh; }	/* フォトギャラリー */
	#fcontent i { font-size: 1.5rem; letter-spacing: 0.1em; font-weight: normal; }
	#fcontent .access h3 { font-size: 3.0rem; }
	#fcontent .nature h3 { font-size: 3.0rem; }
	#fcontent .foods  h3 { font-size: 3.0rem; }
	#fcontent .camp   h3 { font-size: 2.4rem; }
	#fcontent .nandok h3 { font-size: 2.4rem; }
	#fcontent .explan h3 { font-size: 2.4rem; }
	#fcontent .photo  h3 { font-size: 1.8rem; }

	#fbnr	{ display: grid; grid-template-columns: repeat(12, 1fr); }
/*
	#fbnr .access	{ grid-column:  1 / span 12; height: 40vh; }
	#fbnr .nature	{ grid-column:  1 / span  6; height: 30vh; }
	#fbnr .foods 	{ grid-column:  7 / span  6; height: 30vh; }
*/
	#fbnr .access	{ grid-column: 1 / span 4; height: 20vh; }	/* 釧路町について */
	#fbnr .nature	{ grid-column: 5 / span 4; height: 20vh; }	/* 自然 */
	#fbnr .foods 	{ grid-column: 9 / span 4; height: 20vh; }	/* 食 */
	#fbnr .camp  	{ grid-column: 1 / span 6; height: 20vh; }	/* キャンプ */
	#fbnr .nandok	{ grid-column: 7 / span 6; height: 20vh; }	/* 時空旅行 */
	#fbnr .explan	{ grid-column: 7 / span 6; height: 20vh; }	/* 体験 */
	#fbnr .shopp	{ grid-column: 1 / span 4; height: 20vh; }	/* ショッピング */
	#fbnr .event 	{ grid-column: 5 / span 4; height: 20vh; }	/* イベント */
	#fbnr .photo 	{ grid-column: 9 / span 4; height: 20vh; }	/* フォトギャラリー */
	#fbnr h5	{ font-size: 1.5rem; }
	#fbnr small { font-size: 1.0rem; }

	#layer2 .txt	{ padding: 2rem; }
	#layer2 .grid	{ padding: 2rem; }
	#layer2 .img .grid	{ padding: 1rem 0 0; }
	/*---------------------------------------
	Grid x2
	---------------------------------------*/
	#layer2 .grid2x {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1rem;
	}
	#layer2 .grid2x .img { max-width: 600px; }

	/*---------------------------------------
	Flexbox x2
	---------------------------------------*/
	#layer2 .flex2x {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
	}
	#layer2 .rvs,
	#layer2 :nth-child(even) .flex2x	{ flex-direction: row-reverse; }
	#layer2 .flex2x > * { flex: 1 0 40%; }
	/*
	#layer2 .flex2x > .txt { flex: 1 0 40%; }
	#layer2 .flex2x > .img { flex: 1 0 40%; }
	*/
	#nandoku ol	{ grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); }

}