@import url('css2-ZenMaruGothicwght400500_swap.css');
html, body {
	background-color: #FFF;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 400;
}

img {
	max-width: 100%;
	width: 100%;
	vertical-align: top;
}
a {
	display: inline-block;
	color: #000;
	text-decoration: none;
	transition: color .2s ease;
}
a:hover,
a:active {
	color: #FD6925;
}
a.linkText {
	position: relative;
	color: #26BDE2;
}
a.linkText::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 2px;
	background-color: #26BDE2;
	transition: background-color .2s ease;
}
a.linkText:hover,
a.linkText:active {
	color: #FD6925;
}
a.linkText:hover::after,
a.linkText:active::after {
	background-color: #FD6925;
}

.bold {
	font-weight: 500;
}
.color {
	color: #DD1367;
}

#globalFooter {
	background-color: #E8F5FA;
}

.areaMaps {
	background-color: #fff;
}
.areaMaps * {
	-webkit-user-select:none;
	-webkit-user-drag: none;
	user-select:none;
	user-drag: none;
}
.mapDetailImage {
	position: relative;
}
.mapDetailImage img {
	display: block;
	-webkit-mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
	mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
}
.mapDetailImage .thumbnail_line {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	background-color: #000;
	-webkit-mask: url("../image/thumbnail_mask_line.png") no-repeat center center / 100% 100%;
	mask: url("../image/thumbnail_mask_line.png") no-repeat center center / 100% 100%;
}
#map01Detail .mapDetailImage .thumbnail_line {
	background-color: #26BDE2;
}
#map02Detail .mapDetailImage .thumbnail_line {
	background-color: #56C02B;
}
#map03Detail .mapDetailImage .thumbnail_line {
	background-color: #FCC30B;
}
#map04Detail .mapDetailImage .thumbnail_line {
	background-color: #E5243B;
}
#map05Detail .mapDetailImage .thumbnail_line {
	background-color: #DD1367;
}
#map06Detail .mapDetailImage .thumbnail_line {
	background-color: #FD6925;
}
#map07Detail .mapDetailImage .thumbnail_line {
	background-color: #0B3067;
}

dl.info {
	display: grid;
	grid-template: "title text" / 4.2em auto;
}
dl.info dt {
	position: relative;
}
dl.info dt::after {
	content: "：";
	position: absolute;
	top: 0;
	right: -1.5em;
	display: block;
}
.evenlyText {
	display: flex;
	justify-content: space-between;
}
.evenlyText span {
	display: block;
}
dl.info dd {
	margin-left: 2em;
	font-weight: 500;
}
ul.iconTypeDisc {
	margin-left: 1.5em;
}
/*
ul.iconTypeDisc li {
	list-style-image:url(../image/icon_list_style_star.svg)
}
*/
ul.iconTypeDisc li {
	text-indent: -1.5em;
}
ul.iconTypeDisc li::before {
	content: "";
	display: inline-block;
	width: 1.5em;
	height: 1em;
	background: transparent url(../image/icon_list_style_star.png) no-repeat left center / 1em auto;
	vertical-align: baseline;
}
dl.qa dt {
	font-weight: 500;
}
dl.qa dt p::before {
	content: "";
	display: inline-block;
	background: transparent url(../image/icon_q.png) no-repeat left center / contain;
	font-weight: 500;
	text-indent: 0;
}
dl.qa dd p::before {
	content: "";
	display: inline-block;
	background: transparent url(../image/icon_a.png) no-repeat left center / contain;
	text-indent: 0;
	font-weight: 500;
}
dl.qa dd + dt {
	margin-top: 1em;
}
dl.qa dd {
	padding-bottom: 1em;
	border-bottom: 2px solid #C9E6F3;
}
.moreContent.hide {
	display: none;
}

.btnArea {
	text-align: center;
}
.btnArea a {
	position: relative;
}
.btnArea a .btnBg {
	background-color: #FFF;
	-webkit-mask: url("../image/btn_bg_pc.png") no-repeat center center / 100% 100%;
	mask: url("../image/btn_bg_pc.png") no-repeat center center / 100% 100%;
	transition: background-color .2s ease;
}
.btnArea a .btnBorder {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #26BDE2;
	-webkit-mask: url("../image/btn_border_pc.png") no-repeat center center / 100% 100%;
	mask: url("../image/btn_border_pc.png") no-repeat center center / 100% 100%;
	transition: background-color .2s ease;
}
.btnArea a .btnObj {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	background-color: transparent;
	border: none;
	font-weight: 500;
	color: #26BDE2;
	cursor: pointer;
	transition: color .2s ease;
}
.btnArea a .btnObj .text {
	font-size: 1rem;
}
.btnArea a:hover .btnBorder,
.btnArea a:active .btnBorder {
	background-color: #FD6925;
}
.btnArea a:hover .btnObj,
.btnArea a:active .btnObj {
	color: #FD6925;
}
.btnArea a .btnObj .icon {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #26BDE2;
	-webkit-mask: url("../image/icon_down.png") no-repeat center center / contain;
	mask: url("../image/icon_down.png") no-repeat center center / contain;
	transition: transform .5s ease-out;
}
.btnArea a:hover .btnObj .icon,
.btnArea a:active .btnObj .icon {
	background-color: #FD6925;
}
.btnArea a.close .btnObj .icon {
	transform: scale(1, -1);
}
.btnArea a.linkBtn .btnBg {
	background-color: #26BDE2;
}
.btnArea a.linkBtn:hover .btnBg,
.btnArea a.linkBtn:active .btnBg {
	background-color: #DD1367;
}
.btnArea a.linkBtn .btnObj {
	color: #FFF;
}


.illustObj {
	position: absolute;
	z-index: 9;
}

/* パソコン */
@media print, screen and (min-width: 769px) {
	html {
		font-size: min(16px, 1.2vw);
	}
	body {
		line-height: 2;
		letter-spacing: .05em;
	}
	.typeSP {
		display: none !important;
	}
	main.top {
		background: #fff url(../image/bg_stripe.png) repeat center top / min(600px, calc(50vw)) auto;
		overflow: hidden;
	}
	#globalHeader {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		background-color: #fff;
		box-shadow: 0 0 5px rgba(0, 0, 0, .3);
		z-index: 10;
	}
	#globalHeader .headerWrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 min(48px, calc(48 / 1440 * 100vw));
	}
	#globalHeader .headerWrapper .titleArea {
		position: relative;
		display: flex;
		align-items: stretch;
	}
	#globalHeader .headerWrapper .titleArea h1 {
		position: relative;
		display: flex;
		align-items: center;
		margin: 3% 0;
		padding: 0 0 3% 0;
		background-color: #FFF;
		font-size: 2rem;
		line-height: 1;
		transition: margin-left .3s ease-in-out;
	}
	#globalHeader .headerWrapper .titleArea h1 img {
		width: min(280px, calc(280/ 1440 * 100vw));
	}
	#globalHeader .headerWrapper .glovalNavi {
	}
	#globalHeader .headerWrapper .glovalNavi .naviWrapper {
		display: flex;
		align-items: center;
		padding: 10px 0;
	}
	#globalHeader .headerWrapper .glovalNavi a {
		display: block;
		margin: 0 20px;
		line-height: 1.4;
	}
	#globalHeader .headerWrapper .glovalNavi a .text {
		position: relative;
		display: block;
	}
	#globalHeader .headerWrapper .glovalNavi a .text::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		width: 0%;
		height: 1px;
		background-color: #FD6925;
		transition: width .2s ease-out;
	}
	#globalHeader .headerWrapper .glovalNavi a:hover .text::after {
		width: 100%;
	}
	#globalHeader .headerWrapper .glovalNavi a.linkReserve {
		display: flex;
		align-items: center;
		margin: 0 0 0 5vw;
	}
	#globalHeader .headerWrapper .glovalNavi a.linkReserve:hover {
		color: #DD1367;
	}
	#globalHeader .headerWrapper .glovalNavi a.linkReserve .text::after {
		background-color: #DD1367;
	}
	#globalHeader .headerWrapper .glovalNavi a.linkReserve .icon {
		display: block;
		width: min(40px, calc(40 / 1440 * 100vw));
		height: min(38px, calc(38 / 1440 * 100vw));
		margin-left: 10px;
		background-color: #000;
		-webkit-mask: url("../image/icon_calendar.png") no-repeat center center / contain;
		mask: url("../image/icon_calendar.png") no-repeat center center / contain;
		transition: background-color .2s ease-out;
	}
	#globalHeader .headerWrapper .glovalNavi a.linkReserve:hover .icon {
		background-color: #DD1367;
	}
	
	#globalFooter {
	}
	#globalFooter .gridBox {
		display: grid;
		grid-template: "sdgsLogo officialSNS" auto
									 "sdgsLogo copyright" 2em
									/ auto;
		width: 100%;
		padding: 20px 0;
	}
	#globalFooter .gridBox .sdgsLogo {
		grid-area: sdgsLogo;
		width: 144px;
	}
	#globalFooter .gridBox .officialSNS {
		grid-area: officialSNS;
		align-self: self-end;
		text-align: right;
	}
	#globalFooter .gridBox .officialSNS a {
		display: inline-flex;
		align-items: center;
		margin: 20px 0;
		font-weight: 500;
	}
	#globalFooter .gridBox .officialSNS a img {
		width: 40px;
		height: 40px;
		margin-left: 20px;
	}
	#globalFooter .gridBox .copyright {
		grid-area: copyright;
		text-align: right;
		font-size: 0.75rem;
	}
	
	main {
		margin-top: min(70px, calc(70 / 1200 * 100vw));
	}
	.anchor {
		transform: translate3d(0, min(-70px, calc(-70 / 1200 * 100vw)), 0);
	}
	/* コンテンツエリアは、左右のマージンを含め1440pxがmax  */
	.contentWrapper {
		position: relative;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 min(120px, 10%);
	}
	
	
	/* KV */
	#keyVisual {
		padding-bottom: min(100px, calc(100 / 1200 * 100vw));
		background-color: #FFF;
	}
	
	/* 更新情報 */
	.information {
		position: relative;
		padding: min(120px, calc(120 / 1200 * 100vw)) 0;
		background: #FFF url(../image/info_bg_pc.png) no-repeat center center / min(1320px, calc(1320 / 1320 * 100vw)) auto;
	}
	.information .infoContent {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 9em;
	}
	.information .infoContent .infoListWrap {
		width: 79%;
	}
	.information .infoContent .infoList {
	}
	.information .infoContent .infoList .infoBlock {
		display: flex;
		width: 100%;
	}
	.information .infoContent .infoList li:nth-child(n+4) {
		display: none;
	}
	.information .infoContent .infoList li .infoDate {
		width: 6.5em;
	}
	.information .infoContent .infoList li .infoDate span {
		display: inline-block;
		width: 5.5em;
		border-right: 1px solid #000;
		line-height: 1;
	}
	.information .infoContent .infoList li .infoText {
		flex: 1;
	}
	.information .infoContent .infoList li .infoText p {
		width: 100%;
		height: 2.2em;
	}
	.information .infoContent .btnList {
		width: 20%;
	}
	.information .infoContent .btnList .btnArea {
		text-align: right;
	}
	.information .infoContent .btnList .btnArea a .btnBg {
		background-color: transparent;
	}
	
	/* コンセプト */
	.concept {
		position: relative;
		overflow: hidden;
	}
	.concept .conceptBg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	.concept .conceptBg .maskTop {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		z-index: 5;
		transform: translate3d(0, -1px, 0);
	}
	.concept .conceptBg .maskBtm {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 5;
		transform: translate3d(0, 1px, 0);
	}
	.concept .conceptBg .photo {
		min-width: 100%;
		min-height: 100%;
		max-width: unset;
		width: auto;
		height: auto;
		transform: translate3d(0, -15%, 0);
	}
	.concept .contentWrapper {
		position: relative;
	}
	.concept .contentWrapper figure {
		display: block;
		padding: max(0px, calc((100vw - 1440px) * 0.12)) 0;
	}
	.concept .contentWrapper figure img {
		margin-bottom: 3vw;
	}
	
	
	/* エリアマップ */
	.areaMaps {
		padding-top: min(80px, calc(80 / 1200 * 100vw));
		padding-bottom: min(160px, calc(160 / 1200 * 100vw));
	}
	.areaMaps .contentWrapper {
	}
	.areaMaps h2.contentTitle img {
		width: min(248px, 20%);
	}
	.areaMapsBlock {
		position: relative;
		display: flex;
		justify-content: space-between;
		margin-top: -10px;
	}
	.areaMapsBlock .mapImage {
		width: 60%;
	}
	.areaMapsBlock .mapImage .mapImageWrap {
		position: relative;
		margin-top: min(120px, 10%);
	}
	.areaMapsBlock .mapImage .mapNavi {
		display: contents;
	}
	.areaMapsBlock .mapImage .mapNavi .mapNaviIcon {
		position: absolute;
		opacity: 0;
		width: min(210px, 30%);
	}
	.areaMapsBlock .mapImage .mapNavi .mapNaviIcon.current {
		opacity: 1;
	}
	.areaMapsBlock .mapImage .mapNavi #map01Icon {
		bottom: 17%;
		left: 36.5%;
		transform-origin: center bottom;
	}
	.areaMapsBlock .mapImage .mapNavi #map02Icon {
		bottom: 60%;
		left: 34%;
		transform-origin: left 80%;
	}
	.areaMapsBlock .mapImage .mapNavi #map03Icon {
		bottom: 33%;
		left: 36.3%;
		transform-origin: center bottom;
	}
	.areaMapsBlock .mapImage .mapNavi #map04Icon {
		bottom: 50%;
		left: 2%;
		transform-origin: center bottom;
	}
	.areaMapsBlock .mapImage .mapNavi #map05Icon {
		bottom: 58%;
		left: 19%;
		transform-origin: right 80%;
	}
	.areaMapsBlock .mapImage .mapNavi #map06Icon {
		bottom: 47%;
		left: 33%;
		transform-origin: left 80%;
	}
	.areaMapsBlock .mapImage .mapNavi #map07Icon {
		bottom: 47%;
		left: 41%;
		transform-origin: right 80%;
	}
	.areaMapsBlock .areaDetail {
		position: relative;
		width: 35%;
	}
	.areaMapsBlock .areaDetail .areaContent {
		position: absolute;
		top: 0;
		clip-path: inset(0 100% 0 0);
		transition: clip-path .4s ease;
	}
	.areaMapsBlock .areaDetail .areaContent.current {
		position: relative;
		clip-path: inset(0 0 0 0);
	}
	.areaMapsBlock .areaDetail .mapDetailTitle {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		height: min(100px, 6.5vw);
		margin-bottom: 1rem;
		font-size: 2rem;
	}
	.areaMapsBlock .areaDetail .mapDetailTitle img {
		width: 70%;
	}
	.areaMapsBlock .areaDetail .mapDetailImage {
	}
	.areaMapsBlock .areaDetail .mapDetailImage svg {
		width: 100%;
		height: auto;
	}
	.areaMapsBlock .areaDetail .mapDetailText {
		margin-top: .5em;
		height: 8em;
	}
	
	.areaMapsBlock .indicator {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.areaMapsBlock .indicator nav {
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 0;
		transform: translate3d(0, 200%, 0);
	}
	.areaMapsBlock .indicator nav a {
		display: block;
		margin: 0 .5%;
		transition: transform .2s ease-in-out;
	}
	.areaMapsBlock .indicator nav a:hover {
		transform: scale(1.2);
	}
	.areaMapsBlock .indicator nav a.areaIcon {
		width: min(25px, 2vw);
		height: min(25px, 2vw);
		background: url(../image/indi_icon.png) no-repeat center center / cover;
	}
	.areaMapsBlock .indicator nav a.areaIcon.current {
		background-image: url(../image/indi_icon_this.png);
	}
	.areaMapsBlock .indicator nav a img {
		width: min(22px, 1.85vw);
		height: min(25px, 2vw);
	}
	.areaMaps .areaMapsBlock .btnArea {
		position: absolute;
		right: 0;
		bottom: 0;
		margin: 0;
		width: 35%;
		transform: translate3d(0, 150%, 0);
	}
	
	/* ワークショップ情報 */
	.workshop {
		position: relative;
		padding-bottom: min(60px, calc(60 / 1200 * 100vw));
		background-color: #FFF;
	}
	.workshop .workshopHeader h2 img {
		width: min(272px, calc(272 / 1200 * 100vw));
	}
	.workshop .workshopList ul {
		display: flex;
		justify-content: center;
	}
	.workshop .workshopList ul li {
		width: 48%;
	}
	.workshop .workshopList ul li + li {
		margin-left: 4%;
	}
	.workshop .workshopList ul li:nth-child(n+3) {
		display: none;
	}
	.workshop .workshopList .workshopBlock {
		margin: 3em 0 2em;
	}
	.workshop .workshopList .workshopBlock figure {
	}
	.workshop .workshopList .workshopBlock figure img {
		-webkit-mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
		mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
		transition: transform .2s ease;
	}
	.workshop .workshopList a:hover .workshopBlock figure img {
		transform: scale(1.05);
	}
	.workshop .workshopList .workshopBlock h3 {
		height: 2.1em;
		border-bottom: 2px solid #000;
		font-size: calc(24 / 16 * 1rem);
		font-weight: 500;
		transition: border-color .2s ease;
	}
	.workshop .workshopList a:hover .workshopBlock h3 {
		border-color: #FD6925;
	}
	.workshop .workshopList .workshopBlock .date {
		font-size: calc(12 / 16 * 1rem);
	}
	.workshop .workshopList .workshopBlock p {
		height: 4.1em;
		margin-top: .25em;
	}
	
	/* 利用概要 */
	.usage {
		padding: min(120px, calc(120 / 1200 * 100vw)) 0;
		background: transparent url(../image/wave_mask_top.png) no-repeat center top / 100% auto;
	}
	.usage .contentWrapper {
		position: relative;
	}
	.usage .contentWrapper .contentBg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: min(1280px, calc(1280 / 1280 * 100vw));
		height: 100%;
		margin: 0 auto;
	}
	.usage .contentWrapper .contentBg .contentBgTop {
		flex-grow: 0;
	}
	.usage .contentWrapper .contentBg .contentBgBody {
		flex-grow: 1;
		background-color: #FFF;
	}
	.usage .contentWrapper .contentBg .contentBgBtm {
		flex-grow: 0;
	}
	
	.usage #overview {
		position: relative;
		padding-top: min(100px, calc(100 / 1440 * 100vw));
	}
	.usage #overview .contentBody {
		max-width: 960px;
		margin: 0 auto;
	}
	.usage #overview .usageDetail {
		display: flex;
		justify-content: space-between;
	}
	.usage #overview .headerContent {
		width: min(234px, calc(234 / 1200 * 100vw));
	}
	.usage #overview .headerContent h2 {
		font-size: min(40px, 3.33vw);
	}
	.usage #overview .headerContent h2 img {
		width: min(177px, calc(177 / 1200 * 100vw));
	}
	.usage #overview .textContent {
		width: calc(100% - min(234px, calc(234 / 1200 * 100vw)));
	}
	.usage #overview .textContent dl.info + p {
		margin-top: 1em;
	}
	
	/* 施設利用のルール */
	.usage #overview .usageRules {
		margin-top: 60px;
	}
	.usage #overview .usageRules h3 {
		margin-bottom: 1em;
		padding-bottom: .5em;
		text-align: center;
		border-bottom: dashed 2px #26BDE2;
		font-size: calc(18 / 16 * 1rem);
	}
	.usage #overview .usageRules ul {
		font-size: calc(14 / 16 * 1rem);
	}
	.usage #overview .usageRules ul li {
		margin-top: .5em;
	}
	
	.usage #overview .moreBtn {
	}
	.usage #overview .moreContent {
	}
	
	.btnArea {
		margin: min(40px, calc(40 / 1200 * 100vw)) 0;
	}
	.btnArea a .btnBg {
		width: min(217px, calc(217 / 1200 * 100vw));
		height: min(54px, calc(54 / 1200 * 100vw));
	}
	.btnArea a .btnObj .icon {
		right: 1.5em;
		width: 1em;
		height: 1em;
	}
	
	.moreContent {
		padding-bottom: 100px;
	}
	.usage .usageQA .qaContent h3 {
		margin-bottom: 1em;
		padding-bottom: .5em;
		text-align: center;
		border-bottom: dashed 2px #26BDE2;
		font-size: calc(18 / 16 * 1rem);
	}
	.usage .usageQA .qaContent dl {
		font-size: calc(14 / 16 * 1rem);
	}
	.usage .usageQA .qaContent dl.qa dt,
	.usage .usageQA .qaContent dl.qa dd {
		padding-left: 2em;
	}
	.usage .usageQA .qaContent dl.qa dt + dd {
		margin-top: .5em;
	}
	.usage .usageQA .qaContent dl.qa dt p,
	.usage .usageQA .qaContent dl.qa dd p {
		text-indent: -2em;
	}
	.usage .usageQA .qaContent dl.qa p::before {
		width: 2em;
		height: 1.5em;
		margin: .25em 0;
		vertical-align: bottom;
	}
	.usage .usageQA .qaContent .infoArea {
		margin-top: 2em;
		text-align: center;
	}
	.usage .usageQA .qaContent .infoArea .info {
	}
	.usage .usageQA .qaContent .infoArea .info a {
		font-weight: 500;
	}
	.usage .usageQA .qaContent .infoArea .attent {
		font-size: calc(14 / 16 * 1rem);
	}
	
	.moreContent .btnArea {
		position: absolute;
		left: 0;
		width: 100%;
	}
	.moreContent .btnArea a.close .btnBg {
		width: min(116px, calc(116 / 1200 * 100vw));
		height: min(40px, calc(40 / 1200 * 100vw));
	}
	
	
	
	/* ご予約について */
	.usage #reservation {
		position: relative;
		margin-top: 60px;
		padding-bottom: min(120px, calc(120 / 1440 * 100vw));
	}
	.usage #reservation .contentBlock {
	}
	.usage #reservation .lineTop {
		text-align: center;
	}
	.usage #reservation .lineTop img {
		width: min(1153px, calc(1153 / 1440 * 100vw));
	}
	.usage #reservation .lineBottom {
		margin-top: max(-60px, calc(-60 / 1440 * 100vw));
		text-align: right;
	}
	.usage #reservation .lineBottom img {
		width: min(1146px, calc(1146 / 1440 * 100vw));
	}
	.usage #reservation .flexBlock {
		display: flex;
		max-width: 1068px;
		margin: 2em auto 0;
	}
	.usage #reservation .flexBlock .headerContent {
		width: min(354px, calc(354 / 1200 * 100vw));
	}
	.usage #reservation .flexBlock .headerContent h2 {
		font-size: min(40px, 3.33vw);
	}
	.usage #reservation .flexBlock .headerContent h2 img {
		width: min(290px, calc(290 / 1200 * 100vw));
	}
	.usage #reservation .flexBlock .textContent {
		width: calc(100% - min(290px, calc(290 / 1200 * 100vw)));
	}
	
	
	
	/* アクセス */
	.access {
		padding-bottom: min(160px, calc(160 / 1200 * 100vw));
		background: transparent url(../image/wave_mask_bottom.png) no-repeat center bottom / 100% auto;
	}
	.access .contentWrapper {
		padding: min(120px, calc(120 / 1200 * 100vw));
		background: transparent url(../image/access_bg_pc.png) no-repeat center center / 100% 100%;
	}
	.access .contentBlock {
	}
	.access header h2 {
		font-size: min(40px, 3.33vw);
		line-height: 1;
	}
	.access header h2 img {
		width: min(182px, calc(182 / 1200 * 100vw));
	}
	.access .gridBlock {
		display: grid;
		grid-template: auto auto auto / 48% 48%;
		gap: .25em 4%;
		grid-auto-flow: column;
		margin-top: 1.5em;
	}
	.access .gridBlock .mapBlock {
		display: contents;
	}
	.access .gridBlock .mapBlock iframe {
		justify-self: stretch;
		align-self: stretch;
		border-radius: min(20px, calc(20 / 1200 * 100vw));
	}
	.access .gridBlock .localMapBlock {
		display: contents;
	}
	.access .gridBlock .localMapBlock figure {
		border-radius: min(20px, calc(20 / 1200 * 100vw));
		overflow: hidden;
	}
	.access h3 {
		font-size: calc(14 / 16 * 1rem);
		font-weight: 400;
	}
	.access h3 .iconStar {
		display: inline-block;
		width: 1.5em;
		height: 2em;
		background: transparent url(../image/icon_list_style_star.png) no-repeat left center / 1em auto;
		vertical-align: bottom;
	}
	
	.access .textBlock {
		grid-column: 1 / 3;
		grid-row: 3 / 4;
		display: flex;
		justify-content: space-between;
		margin-top: 2em;
		font-weight: 500;
	}
	.access .textBlock .addressArea {
		width: 35%;
	}
	.access .textBlock .routeArea {
		width: 63%;
	}
	
	
	
	/* フッターバナー */
	.footerBanner {
		background-color: #FFF;
	}
	.footerBanner .contentWrapper {
	}
	.footerBanner .contentWrapper .bannerArea {
		padding: min(80px, calc(80 / 1200 * 100vw)) 0 min(120px, calc(120 / 1200 * 100vw));
		text-align: center;
	}
	.footerBanner .contentWrapper a {
		display: inline-block;
		width: 80%;
		max-width: 900px;
	}
	.footerBanner .contentWrapper .bannerArea a img {
		transition: transform .2s ease-in-out;
	}
	.footerBanner .contentWrapper .bannerArea  a:hover img {
		transform: scale(1.05);
	}
	.footerBanner .illustArea {
		background-color: #E8F5FA;
	}
	.footerBanner .illustArea .contentWrapper {
		height: 6px;
	}
	
	
	
	/* イラスト */
	.top .ilTori {
		top: max(-140px, calc(-140 / 1440 * 100vw));
		left: calc(30 / 1440 * 100vw);
		width: min(187px, calc(187 / 1440 * 100vw));
	}
	.top .ilBirds1 {
		top: min(20px, calc(20 / 1440 * 100vw));
		right: min(-50px, calc(-50 / 1440 * 100vw));
		width: min(360px, calc(360 / 1440 * 100vw));
	}
	.top .ilBirds2 {
		bottom: min(300px, calc(300 / 1440 * 100vw));
		left: min(-100px, calc(-100 / 1440 * 100vw));
		width: min(360px, calc(360 / 1440 * 100vw));
	}
	.top .ilZou {
		right: min(20px, calc(20 / 1440 * 100vw));
		bottom: 0;
		width: min(384px, calc(384 / 1440 * 100vw));
		transform: translate3d(0, 80%, 0);
	}
	.top .ilKi {
		top: calc(200px + 100 / 1440 * 100vw);
		left: min(0px, calc((100% - 1440px) * 0.2));
		width: min(179px, calc(179 / 1440 * 100vw));
		/*transform: translate3d(-20%, 0, 0);*/
	}
	.top .ilSai {
		top: min(66em, calc(66 * 1.2vw));
		right: min(100px, calc(100 / 1440 * 100vw));
		width: min(314px, calc(314 / 1440 * 100vw));
	}
	.top .ilSakana {
		top: 0;
		right: min(140px, calc(140 / 1440 * 100vw));
		width: min(360px, calc(360 / 1440 * 100vw));
	}
	.top .ilNami {
		bottom: min(-20px, calc(-20 / 1440 * 100vw));
		left: 0;
		width: min(628px, calc(628 / 1440 * 100vw));
		transform: translate3d(-50%, 0, 0);
	}
	.top .ilSaru {
		bottom: 0;
		left: 0;
		width: min(198px, calc(198 / 1440 * 100vw));
	}
	
	
	/* ==========================================
	エリア一覧
	*/
	.areaPage {
	}
	.areaPage .contentWrapper {
		padding-top: 1px;
	}
	.areaPage h2 {
		margin-top: min(120px, calc(120 / 1440 * 100vw));
	}
	.areaPage .areaBlocks {
		display: flex;
		justify-content: space-between;
		margin-top: min(80px, calc(80 / 1440 * 100vw));
	}
	.areaPage .areaBlocks .mapImage {
		width: 48%;
	}
	.areaPage .areaBlocks .mapImage .stickyWrap {
		position: sticky;
		top: min(120px, calc(120 / 1200 * 100vw));
	}
	.areaPage .areaBlocks .mapImage .areaLogo {
		margin-bottom: 1.5em;
	}
	.areaPage .areaBlocks .mapImage .areaLogo .mapAreaTitle {
		display: none;
	}
	.areaPage .areaBlocks .mapImage .areaLogo .mapAreaTitle.current {
		display: block;
	}
	.areaPage .areaBlocks .mapImage .mapNavi {
	}
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon {
		position: absolute;
		opacity: 0;
		width: min(50px, calc(50 / 1440 * 100vw));
		transform-origin: center bottom;
	}
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon.current {
		opacity: 1;
	}
	.areaPage .areaBlocks .mapImage .mapNavi #map01Icon {
		bottom: 10%;
		left: 46.5%;
	}
	.areaPage .areaBlocks .mapImage .mapNavi #map02Icon {
		bottom: 54%;
		left: 15%;
	}
	.areaPage .areaBlocks .mapImage .mapNavi #map03Icon {
		bottom: 24%;
		left: 46.5%;
	}
	.areaPage .areaBlocks .mapImage .mapNavi #map04Icon {
		bottom: 36%;
		left: 9%;
	}
	.areaPage .areaBlocks .mapImage .mapNavi #map05Icon {
		bottom: 40%;
		left: 28%;
	}
	.areaPage .areaBlocks .mapImage .mapNavi #map06Icon {
		bottom: 46%;
		left: 52%;
	}
	.areaPage .areaBlocks .mapImage .mapNavi #map07Icon {
		bottom: 42%;
		left: 65%;
	}
	.areaPage .areaBlocks .areaDescription {
		width: 48%;
	}
	.areaPage .areaBlocks .areaDescription .areaContent {
		margin-bottom: 8em;
	}
	.areaPage .areaBlocks .areaDescription .areaContent .mapDetailText {
		margin: 2em 1em;
	}
	
	a.btnBack .btnObj .icon.typeLeft {
		left: 1.5em;
		width: .7em;
		height: 1em;
		transform: rotate(90deg);
	}
	
	
	
	.illustLayer {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		overflow: hidden;
	}
	.areaPage .ilTori {
		top: 70vh;
		left: 0;
		width: min(180px, calc(180 / 1440 * 100vw));
		transform: translate3d(-50%, 0, 0);
	}
	.areaPage .ilNami {
		top: 40vh;
		right: 0;
		width: min(628px, calc(628 / 1440 * 100vw));
		transform: translate3d(90%, 0, 0);
	}
	
	
	/* ==========================================
	ワークショップ一覧
	*/
	.workshopPage {
	}
	.workshopPage .contentWrapper {
		padding-top: 1px;
	}
	.workshopPage h2 {
		margin-top: min(120px, calc(120 / 1440 * 100vw));
	}
	.workshopPage .workshopBlocks {
		margin-top: min(80px, calc(80 / 1440 * 100vw));
	}
	ul.grid3cell {
		display: grid;
		grid-template: auto / repeat(3, 30%);
		gap: 4em 5%;
	}
	ul.grid3cell figure img {
		-webkit-mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
		mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
		transition: transform .2s ease;
	}
	ul.grid3cell a:hover .workshopBlock figure img {
		transform: scale(1.05);
	}
	ul.grid3cell .workshopBlock h3 {
		height: 4.1em;
		border-bottom: 2px solid #000;
		font-size: calc(18 / 16 * 1rem);
		font-weight: 500;
		transition: border-color .2s ease;
	}
	ul.grid3cell a:hover .workshopBlock h3 {
		border-color: #FD6925;
	}
	ul.grid3cell .workshopBlock .date {
		font-size: calc(12 / 16 * 1rem);
	}
	ul.grid3cell .workshopBlock p {
		height: 8.1em;
		margin-top: .25em;
	}
	
	
	.workshopPage .ilki {
		top: 20vh;
		right: 0;
		width: min(180px, calc(180 / 1440 * 100vw));
		transform: translate3d(50%, 0, 0);
	}
	.workshopPage .ilSai {
		top: 60vh;
		left: 0;
		width: min(212px, calc(212 / 1440 * 100vw));
		transform: translate3d(-45%, 0, 0);
	}
	
	
	/* ==========================================
	ニュース一覧
	*/
	.informationPage {
	}
	.informationPage .contentWrapper {
		padding-top: 1px;
	}
	.informationPage h2 {
		margin-top: min(120px, calc(120 / 1440 * 100vw));
	}
	.informationPage .informationBlocks {
		margin-top: min(80px, calc(80 / 1440 * 100vw));
	}
	
	
	.informationPage .ilKani {
		top: 40vh;
		right: 0;
		width: min(252px, calc(252 / 1440 * 100vw));
		transform: translate3d(50%, 0, 0);
	}
	.informationPage .ilZou {
		top: 80vh;
		left: 0;
		width: min(238px, calc(238 / 1440 * 100vw));
		transform: translate3d(-50%, 0, 0) scale(-1, 1);
	}
	
	
	
	/* ==========================================
	詳細ページ
	*/
	.articlePage {
		padding-top: 1px;
	}
	.articlePage .contentWrapper {
		padding-bottom: 80px;
	}
	.articleBlock {
		max-width: min(680px, calc(680 / 1200 * 100vw));
		margin: min(120px, calc(120 / 1440 * 100vw)) auto;
	}
	.articlePage .mainImage {
		-webkit-mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
		mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
		transform: scale(1.05);
	}
	.articlePage .articleTitle {
		margin-top: 1.5em;
		font-size: calc(32 / 16 * 1rem);
		line-height: 1.4;
		border-bottom: 4px solid #000;
	}
	.articlePage .date {
		font-size: calc(12 / 16 * 1rem);
	}
	
	.articlePage .articleBody {
		margin-top: 2em;
	}
	.articlePage .articleBody .textBlock {
		margin-top: 1em;
	}
	.articlePage .articleBody .titleBlock {
		margin-top: 3em;
		font-size: calc(18 / 16 * 1rem);
		font-weight: 500;
	}
	.articlePage .articleBody .imageBlock {
		margin: 1em 0;
		border-radius: 1em;
		overflow: hidden;
	}
	.articlePage .articleBody .btnArea {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		max-width: 500px;
		margin: 2em auto;
	}
	.articlePage .articleBody .btnArea a {
		margin: 1em;
	}
	
	
	.articlePage .ilKirin {
		top: 48vh;
		left: 0;
		width: min(160px, calc(160 / 1440 * 100vw));
		transform: translate3d(10%, 0, 0);
	}
	.articlePage .ilSakana {
		top: 30vh;
		right: 0;
		width: min(235px, calc(235 / 1440 * 100vw));
		transform: translate3d(-30%, 0, 0);
	}
	
	
}






/* スマホ */
@media screen and (max-width:768px) {
	html {
		font-size: 4vw;
	}
	body {
		line-height: 1.6;
	}
	.typePC {
		display: none !important;
	}
	main {
		margin-top: 14vw;
	}
	main.top {
		background: #fff url(../image/bg_stripe.png) repeat center top / 75vw auto;
	}
	.contentWrapper {
		overflow: hidden;
	}
	
	#globalHeader {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		display: block;
		background-color: #FFF;
		box-shadow: 0 0 5px rgba(0, 0, 0, .3);
		z-index: 10;
	}
	#globalHeader .headerWrapper {
		position: relative;
	}
	#globalHeader .headerWrapper .titleArea {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		padding: 2vw 5vw;
		z-index: 3;
	}
	#globalHeader .headerWrapper .titleArea h1 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60%;
		background-color: #FFF;
		font-size: 1.6rem;
		font-weight: 500;
		z-index: 11;
	}
	#globalHeader .headerWrapper .titleArea h1 a {
	}
	#globalHeader .spMenu {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 30%;
	}
	#globalHeader .spMenu .menuReserved {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column-reverse;
	}
	#globalHeader .spMenu .menuReserved .text {
		margin-top: .2em;
		font-size: .75em;
		line-height: 1;
		font-weight: 500;
	}
	#globalHeader .spMenu .menuReserved .icon {
		display: block;
		width: calc(55.8 / 750 * 100vw);
		height: calc(52 / 750 * 100vw);
		background-color: #000;
		-webkit-mask: url("../image/icon_calendar.png") no-repeat center center / contain;
		mask: url("../image/icon_calendar.png") no-repeat center center / contain;
		transition: background-color .2s ease-out;
	}
	#globalHeader .spMenu .menuReserved:hover .icon,
	#globalHeader .spMenu .menuReserved:active .icon {
		background-color: #DD1367;
	}
	#globalHeader .spMenu a:hover .text,
	#globalHeader .spMenu a:active .text {
		color: #DD1367;
	}
	#globalHeader .spMenu .btnMenuOpen {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 10vw;
		height: 7vw;
		margin-left: 5vw;
	}
	#globalHeader .spMenu .icon.iconMenu {
		position: relative;
		width: 10vw;
		height: 2px;
		background-color: #000;
		transform-origin: left center;
		transition: transform .3s ease-out;
	}
	#globalHeader .spMenu .btnMenuOpen::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		width: 100%;
		height: 2px;
		background-color: #000;
		transform-origin: left center;
		transition: transform .3s ease-out;
	}
	#globalHeader .spMenu .btnMenuOpen::after {
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 2px;
		background-color: #000;
		transform-origin: left center;
		transition: transform .3s ease-out;
	}
	.spMenuOpen #globalHeader .spMenu .icon.iconMenu {
		transform: scale(0);
	}
	.spMenuOpen #globalHeader .spMenu .btnMenuOpen::before {
		transform: translate3d(calc(10vw * (1 - cos(45deg)) / 2), calc(((7vw - 2px) - (10vw * sin(45deg))) / 2), 0) rotate(45deg);
	}
	.spMenuOpen #globalHeader .spMenu .btnMenuOpen::after {
		transform: translate3d(calc(10vw * (1 - cos(45deg)) / 2), calc(((7vw - 2px) - (10vw * sin(45deg))) / -2), 0) rotate(-45deg);
	}
	
	.spMenuOpen {
		overflow: hidden;
	}
	.spMenuOpen #globalHeader .spMenuBg {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
	}
	#globalHeader .glovalNavi {
		position: fixed;
		right: 0;
		width: 0;
		height: 100vh;
		background-color: #26BDE2;
		transition: width .3s ease-out;
		overflow: hidden;
	}
	.spMenuOpen #globalHeader .glovalNavi {
		width: 80vw;
	}
	#globalHeader .glovalNavi .naviWrapper {
		width: 70vw;
		padding: 10vw 5vw;
	}
	#globalHeader .glovalNavi a {
		display: block;
		padding: 1.25em 0;
		font-size: 1rem;
		font-weight: 500;
		line-height: 1;
		color: #FFF;
	}
	#globalHeader .glovalNavi a + a {
		border-top: 1.5px solid #FFF;
	}
	
	#globalFooter .gridBox {
		display: grid;
		grid-template: "sdgsLogo officialSNS" auto
			"sdgsLogo copyright" 1em
			/ auto;
		width: 100%;
	}
	#globalFooter .gridBox .sdgsLogo {
		grid-area: sdgsLogo;
		width: 30vw;
		padding: 2.5vw 0;
	}
	#globalFooter .gridBox .officialSNS {
		grid-area: officialSNS;
		align-self: center;
		text-align: right;
	}
	#globalFooter .gridBox .officialSNS a {
		display: inline-flex;
		align-items: center;
		margin: 2.5vw 0;
		font-size: .8rem;
		font-weight: 500;
	}
	#globalFooter .gridBox .officialSNS a img {
		width: 40px;
		height: 40px;
		margin-left: 20px;
	}
	#globalFooter .gridBox .copyright {
		grid-area: copyright;
		text-align: right;
		font-size: 0.5rem;
	}
	
	
	.contentWrapper {
		position: relative;
		margin: 0;
		padding: 0 5vw;
	}
	
	/* キービジュアル */
	#keyVisual {
		width: 100vw;
	}
	
	/* 更新情報 */
	.information {
		position: relative;
		padding-top: 15vw;
		background-color: #FFF;
	}
	.information .contentWrapper {
		position: relative;
		padding: calc(80 / 750 * 100vw) 0;
		overflow: visible;
	}
	.information .contentWrapper .contentBg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: min(1280px, calc(1280 / 1280 * 100vw));
		height: 100%;
		margin: 0 auto;
	}
	.information .contentWrapper .contentBg .contentBgTop {
		flex-grow: 0;
	}
	.information .contentWrapper .contentBg .contentBgBody {
		flex-grow: 1;
		background-color: #ECF6EB;
	}
	.information .contentWrapper .contentBg .contentBgBtm {
		flex-grow: 0;
	}
	.information .contentWrapper .infoContent {
		position: relative;
		padding: 0 5vw;
	}
	.information .contentWrapper .infoContent .infoListWrap {
		position: relative;
	}
	.information .contentWrapper .infoContent .infoList {
	}
	.information .contentWrapper .infoContent .infoList li {
		margin-bottom: 1em;
	}
	.information .contentWrapper .infoContent .infoList li:nth-child(n+4) {
		display: none;
	}
	.information .contentWrapper .infoContent .infoList .infoDate {
	}
	.information .infoContent .infoList li .infoDate span {
		display: inline-block;
		width: 5em;
		border-right: 1px solid #000;
		line-height: 1;
	}
	.information .contentWrapper .infoContent .infoList .infoText {
		margin-top: .15em;
	}
	.information .contentWrapper .infoContent .infoList .infoText p {
		max-height: 4em;
		width: 100%;
	}
	
	.information .infoContent .btnArea {
		margin-bottom: 0;
	}
	.information .infoContent .btnList .btnArea a .btnBg {
		background-color: transparent;
	}
	
	/* コンセプト */
	.concept {
		position: relative;
		padding-top: 5vw;
		background-color: #FFF;
		font-weight: 500;
		overflow: hidden;
	}
	.spConcept {
		position: relative;
	}
	.spConcept h2 {
		position: absolute;
		top: 38%;
		right: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.spConcept .conceptImg {
		margin: 0 -5vw;
		background: #FFF url(../image/concept_img_sp.jpg) no-repeat center 50% / 100% auto;
		-webkit-mask: url("../image/concept_img_mask_sp.png") no-repeat center center / 100% auto ;
		mask: url("../image/concept_img_mask_sp.png") no-repeat center center / 100% auto;
	}
	.spConcept .conceptImg img {
		opacity: 0;
	}
	.spConcept .concept p {
		padding: 7vw 0;
		line-height: 2;
	}
	
	/* エリアマップ */
	.areaMaps {
		position: relative;
	}
	.areaMaps .contentWrapper {
		padding: 15vw 5vw 5vw;
		background-color: #FFF;
	}
	.areaMaps .areaMapsBlock {
		position: relative;
	}
	.areaMaps .contentTitle img {
		width: 60%;
	}
	.areaMapsBlock .mapImage .mapImageWrap {
		position: relative;
		width: 90%;
		margin: 0 auto;
	}
	.areaMapsBlock .mapImage .mapNavi {
		display: contents;
	}
	.areaMapsBlock .mapImage .mapNavi .mapNaviIcon {
		position: absolute;
		opacity: 0;
		width: calc(72 / 750 * 100vw);
		transform-origin: center bottom;
	}
	.areaMapsBlock .mapImage .mapNavi .mapNaviIcon.current {
		opacity: 1;
	}
	.areaMapsBlock .mapImage .mapNavi #map01Icon {
		bottom: 13%;
		left: 43%;
	}
	.areaMapsBlock .mapImage .mapNavi #map02Icon {
		bottom: 65%;
		left: 9%;
	}
	.areaMapsBlock .mapImage .mapNavi #map03Icon {
		bottom: 32%;
		left: 43%;
	}
	.areaMapsBlock .mapImage .mapNavi #map04Icon {
		bottom: 48%;
		left: 9%;
	}
	.areaMapsBlock .mapImage .mapNavi #map05Icon {
		bottom: 62%;
		left: 50%;
	}
	.areaMapsBlock .mapImage .mapNavi #map06Icon {
		bottom: 50%;
		left: 26%;
	}
	.areaMapsBlock .mapImage .mapNavi #map07Icon {
		bottom: 65%;
		left: 66%;
	}
	
	.areaMapsBlock .areaDetail {
		position: relative;
		overflow: hidden;
	}
	.areaMapsBlock .areaDetail .areaContent {
		position: absolute;
		top: 0;
		clip-path: inset(0 100% 0 0);
		transition: clip-path .4s ease;
	}
	.areaMapsBlock .areaDetail .areaContent.current {
		position: relative;
		clip-path: inset(0 0 0 0);
	}
	.areaMaps .areaDetail {
		margin-top: 5vw;
	}
	.areaMaps .areaDetail .mapDetailTitle {
		height: calc(90vw * .5 * 60 / 160);
		text-align: center;
	}
	.areaMaps .areaDetail .mapDetailTitle {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		width: 100%;
		margin-bottom: .5em;
		font-size: 6vw;
	}
	.areaMaps .areaDetail .mapDetailTitle img {
		width: 50%;
	}
	.areaMaps .areaDetail .mapDetailImage {
		display: block;
		width: 80%;
		margin: 0 auto;
	}
	.areaMaps .areaDetail .mapDetailImage svg {
		width: 100%;
		height: auto;
	}
	.areaMaps .areaDetail .mapDetailText {
		height: 8em;
		margin-top: 2em;
		line-height: 2;
	}
	
	.areaMaps .indicator {
		position: absolute;
	}
	.areaMapsBlock .indicator {
		position: absolute;
		right: 0;
		bottom: 13.75em;
		left: 0;
		width: 100%;
	}
	.areaMapsBlock .indicator nav {
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 0;
	}
	.areaMapsBlock .indicator nav a {
		display: block;
		margin: 0 2vw;
		transition: transform .2s ease-in-out;
	}
	.areaMapsBlock .indicator nav a:hover {
		transform: scale(1.2);
	}
	.areaMapsBlock .indicator nav a.btnPrev {
		transform: translate3d(-140%, -30vw, 0);
	}
	.areaMapsBlock .indicator nav a.btnNext {
		transform: translate3d(140%, -30vw, 0);
	}
	.areaMapsBlock .indicator nav a.areaIcon {
		width: 5vw;
		height: 5vw;
		background: url(../image/indi_icon.png) no-repeat center center / cover;
	}
	.areaMapsBlock .indicator nav a.areaIcon.current {
		background-image: url(../image/indi_icon_this.png);
	}
	.areaMapsBlock .indicator nav a img {
		width: 5vw;
		height: 5.5vw;
	}
	
	/* ワークショップ情報 */
	.workshop {
		position: relative;
		padding-bottom: calc(150 / 1920 * 200vw);
		background: transparent url(../image/wave_mask_top.png) no-repeat center bottom / 200vw auto;
	}
	.workshop .contentWrapper {
		background-color: #FFF;
	}
	.workshop .workshopHeader .contentTitle img {
		width: calc(408 / 750 * 100vw);
	}
	.workshop .workshopList {
		margin-bottom: 15vw;
	}
	.workshop .workshopList ul {
	}
	.workshop .workshopList ul li {
		margin-top: 10vw;
	}
	.workshop .workshopList ul li:nth-child(n+3) {
		display: none;
	}
	.workshop .workshopList .workshopBlock {
	}
	.workshop .workshopList .workshopBlock figure {
	}
	.workshop .workshopList .workshopBlock figure img {
		-webkit-mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
		mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
	}
	.workshop .workshopList .workshopBlock h3 {
		height: 1.8em;
		margin-top: .5em;
		border-bottom: 2px solid #000;
		font-size: calc(36 / 30 * 1rem);
		font-weight: 500;
		transition: border-color .2s ease;
	}
	.workshop .workshopList a:hover .workshopBlock h3 {
		border-color: #FD6925;
	}
	.workshop .workshopList .workshopBlock .date {
		font-size: calc(24 / 30 * 1rem);
	}
	.workshop .workshopList .workshopBlock p {
		height: 6.2em;
		margin-top: .25em;
	}
	.workshop .workshopList .btnArea {
		margin-top: 5vw;
		margin-bottom: 15vw;
	}
	
	/* 利用概要 */
	.usage {
		margin: 5vw 0;
		padding: calc(50 / 750 * 100vw) 0;
		background-image: url(../image/usage_bg_top_sp.png), url(../image/usage_bg_bottom_sp.png);
		background-repeat: no-repeat, no-repeat;
		background-position: top center, bottom center;
		background-size: 100vw auto, 100vw auto;
	}
	.usage .contentWrapper {
		padding: 10vw 5vw;
		background-color: #FFF;
	}
	.usage #overview {
	}
	.usage #overview .usageDetail .contentTitle {
		margin-bottom: 5vw;
	}
	.usage #overview .usageDetail .contentTitle img {
		width: calc(265 / 750 * 100vw);
	}
	.usage #overview .usageDetail .info .spTxtSmall {
		font-size: .8em;
	}
	.usage #overview .usageDetail .info + p {
		margin-top: 1em;
	}
	.usage #overview .usageRules {
		margin-top: 3em;
	}
	.usage #overview .usageRules h3 {
		margin-bottom: 1em;
		padding-bottom: .5em;
		font-size: 1.1rem;
		text-align: center;
		border-bottom: dashed 1px #26BDE2;
	}
	.usage #overview .usageRules ul li {
		margin-top: .75em;
	}
	.usage #overview .flexBlock {
	}
	.btnArea {
		margin: 10vw 0;
	}
	.btnArea a .btnBg {
		width: calc(330 / 750 * 100vw);
		height: calc(80 / 750 * 100vw);
	}
	.btnArea a .btnObj .icon {
		right: 1em;
		width: .75em;
		height: 1em;
	}
	.usage .usageQA .qaContent h3 {
		margin-bottom: 1em;
		padding-bottom: .5em;
		text-align: center;
		border-bottom: dashed 1px #26BDE2;
		font-size: 1.1rem;
	}
	.usage .usageQA .qaContent dl {
		font-size: 1rem;
	}
	.usage .usageQA .qaContent dl.qa dt,
	.usage .usageQA .qaContent dl.qa dd {
		padding-left: 2.5em;
	}
	.usage .usageQA .qaContent dl.qa dt + dd {
		margin-top: .5em;
	}
	.usage .usageQA .qaContent dl.qa dt p,
	.usage .usageQA .qaContent dl.qa dd p {
		text-indent: -2.5em;
	}
	.usage .usageQA .qaContent dl.qa p::before {
		width: 2.5em;
		height: 1.8em;
		margin-bottom: .2em;
		vertical-align: middle;
	}
	.usage .usageQA .qaContent .infoArea {
		margin-top: 2em;
		text-align: center;
	}
	.usage .usageQA .qaContent .infoArea .info {
	}
	.usage .usageQA .qaContent .infoArea .info a {
		font-weight: 500;
	}
	.usage .usageQA .qaContent .infoArea .attent {
		font-size: calc(28 / 30 * 1rem);
	}
	
	.usage #reservation .contentTitle img {
		width: calc(435 / 750 * 100vw);
	}
	
	#reservation {
		
	}
	#reservation .lineTop {
		margin-bottom: 5vw;
	}
	#reservation .headerContent {
		margin-bottom: 1em;
	}
	#reservation .lineBottom {
		margin-top: -5vw;
	}
	
	
	/* アクセス */
	#access {
		margin-top: 15vw;
	}
	.access {
		position: relative;
	}
	.access .contentWrapper {
		padding: 5vw;
		background-color: #FFF;
	}
	.uaccess .contentTitle {
		margin-bottom: 5vw;
	}
	.access .contentTitle img {
		width: calc(272 / 750 * 100vw);
	}
	/*
	.access {
		padding-bottom: min(120px, calc(120 / 1200 * 100vw));
		background: transparent url(../image/wave_mask_bottom.png) no-repeat center bottom / max(1920px, 100vw) auto;
	}
	.access .contentWrapper {
		padding: min(120px, calc(120 / 1200 * 100vw));
		background: transparent url(../image/access_bg.png) no-repeat center center / 100% 100%;
	}
	.access .contentBlock {
	}
	*/
	.access h3 {
		font-weight: 400;
	}
	.access h3 .iconStar {
		display: inline-block;
		width: 1.5em;
		height: 1.6em;
		background: transparent url(../image/icon_list_style_star.png) no-repeat left center / 1em auto;
		vertical-align: bottom;
	}
	.access .gridBlock {
		display: grid;
		grid-template: repeat(4, auto) / 100%;
	}
	.access .gridBlock h3 {
		margin-top: 1em;
		margin-bottom: .25em;
	}
	.access .gridBlock .mapBlock {
		grid-row: 1 / span 1;
	}
	.access .gridBlock .mapBlock iframe {
		width: 100%;
		height: calc(90vw * 9 / 16);
		border-radius: .75em;
	}
	.access .gridBlock .localMapBlock {
		grid-row: 3 / span 1;
	}
	.access .gridBlock .localMapBlock figure {
		border-radius: .75em;
	}
	.access .textBlock {
		display: contents;
		font-weight: 500;
	}
	.access .gridBlock .textBlock .addressArea {
		grid-row: 2 / span 1;
		margin-top: .5em;
	}
	.access .gridBlock .textBlock .routeArea {
		grid-row: 4 / span 1;
		margin-top: .5em;
	}
	.access .gridBlock .textBlock .routeArea ul + p  {
		margin-top: 1em;
	}
	
	/* フッターバナー */
	.footerBanner {
		margin-top: 5vw;
	}
	.footerBanner .contentWrapper {
		padding: 10vw 5vw;
		background-color: #FFF;
		overflow: unset;
	}
	.footerBanner .illustArea {
		padding-top: 25vw;
		background-color: #FFF;
	}
	.footerBanner .illustArea .contentWrapper {
		height: 3px;
		padding: 0;
		background-color: #E8F5FA;
	}
	.footerBanner .contentWrapper .bannerArea a img {
		transition: transform .2s ease-in-out;
	}
	.footerBanner .contentWrapper .bannerArea  a:active img {
		transform: scale(1.05);
	}
	
	
	/* イラスト */
	.top .ilTori1 {
		top: 0;
		right: 8vw;
		width: calc(130 / 750 * 100vw);
	}
	.top .ilTori2 {
		top: 120%;
		left: 5vw;
		width: calc(106 / 750 * 100vw);
		transform: translate3d(0, 50%, 0);
	}
	.top .ilBirds1 {
		right: -4vw;
		top: 5vw;
		width: 55vw;
	}
	.top .ilZou {
		bottom: 3vw;
		right: 5vw;
		width: 40vw;
	}
	.top .ilSai {
		top: 1em;
		right: -22vw;
		width: 50vw;
		transform: scale(-1, 1);
	}
	.top .ilSakana {
		top: 10vw;
		right: 5vw;
		width: 40vw;
	}
	.top .ilNami {
		bottom: 0;
		left: 0;
		width: 80vw;
		transform: translate3d(-50%, 30%, 0);
	}
	.top .ilSaru {
		bottom: 0;
		left: 15vw;
		width: 20vw;
	}
	
	
	
	/* ==========================================
	エリア一覧
	*/
	.areaPage {
	}
	.areaPage .contentWrapper {
		padding-top: 1px;
		padding-bottom: min(256px, calc(256 / 750 * 100vw));
	}
	.areaPage h2 {
		width: 95vw;
		margin-top: 20vw;
	}
	.areaPage .areaContent {
		margin-top: 15vw;
	}
	.areaPage .areaContent + .areaContent {
		margin-top: 25vw;
	}
	.areaPage .areaContent h3 {
		margin-bottom: 5vw;
	}
	.areaPage .areaContent .mapDetailText {
		margin-top: 1em;
		line-height: 2;
		letter-spacing: .1em;
	}
	.areaPage .areaContent .mapDetailMap {
		margin: 5vw;
	}
	
	a.btnBack .btnObj .icon.typeLeft {
		left: 1.5em;
		width: .7em;
		height: 1em;
		transform: rotate(90deg);
	}
	
	.areaPage .ilTori {
		bottom: 0;
		left: 4vw;
		width: min(256px, calc(256 / 750 * 100vw));
	}
	
	
	
	
	/* ==========================================
	ワークショップ一覧
	*/
	.workshopPage {
	}
	.workshopPage .contentWrapper {
		padding-top: 1px;
		padding-bottom: 30vw;
		overflow: visible;
	}
	.workshopPage h2 {
		width: 95vw;
		margin-top: 20vw;
	}
	
	ul.grid3cell {
	}
	ul.grid3cell li {
		margin-top: 15vw;
	}
	ul.grid3cell .workshopBlock figure {
	}
	ul.grid3cell .workshopBlock figure img {
		-webkit-mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
		mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
		transition: transform .2s ease;
	}
	ul.grid3cell a:hover .workshopBlock figure img {
		transform: scale(1.05);
	}
	ul.grid3cell .workshopBlock h3 {
		height: 3.6em;
		border-bottom: 2px solid #000;
		font-size: calc(36 / 30 * 1rem);
		font-weight: 500;
		transition: border-color .2s ease;
	}
	ul.grid3cell a:hover .workshopBlock h3 {
		border-color: #FD6925;
	}
	ul.grid3cell .workshopBlock .date {
		font-size: calc(24 / 30 * 1rem);
	}
	ul.grid3cell .workshopBlock p {
		max-height: 8.1em;
		margin-top: .25em;
		line-height: 2;
		letter-spacing: .1em;
	}
	
	.workshopPage .ilSai {
		bottom: 0;
		left: 15vw;
		width: min(270px, calc(270 / 750 * 100vw));
		transform: translate3d(0, 10%, 0);
	}
	
	
	/* ==========================================
	ニュース一覧
	*/
	.informationPage {
	}
	.informationPage .contentWrapper {
		padding-top: 1px;
		padding-bottom: 30vw;
		overflow: visible;
	}
	.informationPage h2 {
		width: 95vw;
		margin-top: 20vw;
	}
	
	.informationPage .ilZou {
		bottom: 0;
		left: 15vw;
		width: min(250px, calc(250 / 750 * 100vw));
		transform: translate3d(0, 10%, 0) scale(-1, 1);
	}
	
	
	/* ==========================================
	詳細ページ
	*/
	.articlePage {
	}
	.articlePage .contentWrapper {
		padding-top: 1px;
		padding-bottom: 30vw;
		overflow: visible;
	}
	.articleBlock {
		margin-top: 15vw;
	}
	.articlePage .mainImage {
		-webkit-mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
		mask: url("../image/thumbnail_mask.png") no-repeat center center / 100% 100%;
		transform: scale(1.05);
	}
	.articlePage .articleTitle {
		margin-top: 1.5em;
		font-size: calc(48 / 30 * 1rem);
		line-height: 1.6;
		border-bottom: 2px solid #000;
	}
	.articlePage .date {
		font-size: calc(24 / 30 * 1rem);
	}
	
	.articlePage .articleBody {
		margin-top: 2em;
		line-height: 2;
	}
	.articlePage .articleBody .textBlock {
		margin-top: 1em;
	}
	.articlePage .articleBody .titleBlock {
		margin-top: 3em;
		font-size: calc(36 / 30 * 1rem);
		font-weight: 500;
		line-height: 1.6;
	}
	.articlePage .articleBody .imageBlock {
		margin: 1em 0;
		border-radius: 1em;
		overflow: hidden;
	}
	.articlePage .articleBody .btnArea {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		max-width: 500px;
		margin: 2em auto;
	}
	.articlePage .articleBody .btnArea a {
		margin: .5em;
	}
	
	
	.articlePage .ilKirin {
		bottom: 0;
		width: min(152px, calc(152 / 750 * 100vw));
		transform: translate3d(0, 2%, 0);
	}
	
}
/* タブレット */
@media only screen and (min-width: 769px) and (max-width: 1280px) {
}