@charset "UTF-8";
.section {
	padding: 21.3333333333vw 0 14.9333333333vw;
}

/* FV
------------------------------------------------------------------------- */
.fv {
	padding-bottom: 6.4vw;
	position: relative;
}
.fv::before, .fv::after {
	content: "";
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	z-index: -1;
}
.fv::before {
	height: 40px;
	background: url(../images/top/fv_bg_wave_sp.png) repeat-x;
	background-size: 375px 40px;
	bottom: 192.8vw;
}
.fv::after {
	height: 192.8vw;
	background: #F5EFE5;
	bottom: 0;
}

.fv_img {
	margin-bottom: 6.4vw;
}

.wrap_fv_right {
	width: 87.4666666667vw;
	margin: 0 auto;
	position: relative;
}
.wrap_fv_right::after {
	content: "";
	display: block;
	width: 25.6vw;
	height: 19.2vw;
	background: url(../images/top/fv_icon.svg) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: -3.2vw;
	right: 0;
}

.fv_info {
	margin-top: 2.1333333333vw;
}
.fv_info p {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 2.1333333333vw;
	margin-bottom: 2.1333333333vw;
}
.fv_info p::before {
	content: "";
	display: block;
	width: 4.2666666667vw;
	height: 4.2666666667vw;
	background-size: contain;
	background-repeat: no-repeat;
}
.fv_info p:last-child {
	margin-bottom: 0;
}
.fv_info p.fv_time::before {
	background-image: url(../images/common/icon_time.svg);
}
.fv_info p.fv_calendar::before {
	background-image: url(../images/common/icon_calendar.svg);
}

/* ========== ナビゲーション ========== */
.ul_nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 2.1333333333vw;
}
.ul_nav li {
	width: 42.6666666667vw;
}
.ul_nav li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 2.1333333333vw;
	height: 25.6vw;
	background: #fff;
	border: 1px dashed #470C00;
	border-radius: 1.0666666667vw;
	font-weight: bold;
}
.ul_nav li a::before {
	content: "";
	display: block;
	width: 19.2vw;
	height: 10.6666666667vw;
	background-size: contain;
	background-repeat: no-repeat;
}
.ul_nav li.nav_create a::before {
	background-image: url(../images/common/icon_create.svg);
}
.ul_nav li.nav_freedom a::before {
	background-image: url(../images/common/icon_freedom.svg);
}
.ul_nav li.nav_oneday a::before {
	background-image: url(../images/common/icon_oneday.svg);
}
.ul_nav li.nav_news a::before {
	background-image: url(../images/common/icon_news.svg);
}
.ul_nav li.nav_group a::before {
	background-image: url(../images/common/icon_group.svg);
}
.ul_nav li.nav_rental a::before {
	background-image: url(../images/common/icon_rental.svg);
}
.ul_nav li.nav_about a::before {
	background-image: url(../images/common/icon_about.svg);
}
.ul_nav li.nav_access a::before {
	background-image: url(../images/common/icon_access.svg);
}
.ul_nav li.nav_tel {
	width: 100%;
}
.ul_nav li.nav_tel a {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	gap: 4.2666666667vw;
	font-size: 7.4666666667vw;
	font-weight: 400;
}
.ul_nav li.nav_tel a::before {
	width: 8.5333333333vw;
	height: 8.5333333333vw;
	background-image: url(../images/common/icon_tel.svg);
}

/* クラフトパークについて
------------------------------------------------------------------------- */
.about_top {
	padding: 51.2vw 0 42.6666666667vw;
	position: relative;
}

.ul_about_top {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 2.1333333333vw;
	width: 100%;
	position: absolute;
	left: 0;
}
.ul_about_top li {
	width: 29.8666666667vw;
}

.ul_about_top01 {
	top: 8.5333333333vw;
}

.ul_about_top02 {
	bottom: 0;
}

.ttl_about_top {
	font-size: 6.4vw;
	font-weight: bold;
	text-align: center;
	line-height: 2;
	margin-bottom: 6.4vw;
}

.txt_about_top {
	width: 87.4666666667vw;
	margin: 0 auto;
}
.txt_about_top p {
	margin-bottom: 6.4vw;
	font-size: 4.8vw;
	font-weight: 400;
	line-height: 2;
}
.txt_about_top p:last-child {
	margin-bottom: 0;
}

/* 創る・学ぶ・体験する
------------------------------------------------------------------------- */
.create .ttl_before_icon::before {
	background-image: url(../images/common/icon_pen.svg);
}

.create_contents {
	margin-bottom: 6.4vw;
}
.create_contents:last-child {
	margin-bottom: 0;
}

.create_lead_text {
	font-weight: bold;
	margin-bottom: 2.1333333333vw;
}

/* 団体・学校・教育関係者の方へ */
.create_contents_group {
	margin-top: 17.0666666667vw;
}
.create_contents_group a {
	display: block;
	background: #fff;
	padding: 14.9333333333vw 4.2666666667vw;
	border: 1px dashed #470C00;
	border-radius: 2.1333333333vw;
	position: relative;
}
.create_contents_group a::before {
	content: "";
	display: block;
	width: 16vw;
	height: 21.3333333333vw;
	background: url(../images/top/create_img.svg) no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.ttl_group {
	font-weight: bold;
	font-size: 4.8vw;
	margin-bottom: 2.1333333333vw;
}

.link_text_group {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 6.4vw;
	font-size: 4.8vw;
	margin-top: 6.4vw;
}
.link_text_group::after {
	content: "";
	display: block;
	width: 2.1333333333vw;
	height: 2.1333333333vw;
	border-radius: 50%;
	background: #4287B9;
}

/* レンタル工房・貸室
------------------------------------------------------------------------- */
.rental .ttl_before_icon::before {
	background-image: url(../images/common/icon_ttl_rental.svg);
}

.wrap_rental_contents {
	margin-top: 10.6666666667vw;
	padding: 17.0666666667vw 0;
	position: relative;
	z-index: 1;
}
.wrap_rental_contents::before {
	content: "";
	display: block;
	width: 95.7333333333vw;
	height: 100%;
	background: #F5EFE5;
	border-radius: 17.0666666667vw;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.wrap_rental_contents::after {
	content: "";
	display: block;
	width: 17.0666666667vw;
	height: 27.7333333333vw;
	background: url(../images/top/rental_img05.svg) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 0;
	right: 4.2666666667vw;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
}
.wrap_rental_contents p {
	margin-bottom: 6.4vw;
}
.wrap_rental_contents p:last-child {
	margin-bottom: 0;
}
.wrap_rental_contents .btn_big a {
	padding-left: 4.2666666667vw;
	height: 17.0666666667vw;
	font-size: 4.8vw;
	gap: 2.1333333333vw;
}
.wrap_rental_contents .btn a::before {
	width: 8.5333333333vw;
	height: 8.5333333333vw;
}
.wrap_rental_contents .btn:nth-child(1) a::before {
	background-image: url(../images/top/rental_img01.png);
}
.wrap_rental_contents .btn:nth-child(2) a::before {
	background-image: url(../images/top/rental_img02.png);
}
.wrap_rental_contents .btn:nth-child(3) a::before {
	background-image: url(../images/top/rental_img03.png);
}
.wrap_rental_contents .btn:nth-child(4) a::before {
	background-image: url(../images/top/rental_img04.png);
}

/* ピックアップイベント
------------------------------------------------------------------------- */
.event .ttl_before_icon::before {
	background-image: url(../images/common/icon_ttl_event.svg);
}

/* お知らせ
------------------------------------------------------------------------- */
.news .ttl_before_icon::before {
	background-image: url(../images/common/icon_ttl_news.svg);
}

/* SNS
------------------------------------------------------------------------- */
.sns {
	padding-bottom: 17.0666666667vw;
	position: relative;
	z-index: 1;
}
.sns::before, .sns::after {
	content: "";
	display: block;
	width: 100%;
	height: 10.6666666667vw;
	background: url(../images/common/repeat_line_orange.svg) repeat-x;
	background-size: contain;
	position: absolute;
	left: 0;
	z-index: -1;
}
.sns::before {
	top: 0;
}
.sns::after {
	bottom: 0;
}
.sns .ttl_before_icon::before {
	background-image: url(../images/common/icon_star.svg);
}

.ul_sns {
	margin-top: 6.4vw;
}
.ul_sns li {
	margin-bottom: 6.4vw;
}
.ul_sns li:last-child {
	margin-bottom: 0;
}
.ul_sns .btn a {
	font-size: 4.8vw;
	gap: 4.2666666667vw;
	height: 21.3333333333vw;
}
.ul_sns .btn a::before {
	width: 8.5333333333vw;
	height: 8.5333333333vw;
}
.ul_sns .btn a::after {
	content: "";
	display: block;
	width: 4.2666666667vw;
	height: 4.2666666667vw;
	background: url(../images/common/icon_external_link_brown.svg) no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	right: 4.2666666667vw;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.btn_instagram a::before {
	background-image: url(../images/common/icon_instagram.svg);
}

.btn_youtube a::before {
	background-image: url(../images/common/icon_youtube.svg);
}

.btn_x a::before {
	background-image: url(../images/common/icon_x.svg);
}

.btn_facebook a::before {
	background-image: url(../images/common/icon_facebook.svg);
}

/* floating
------------------------------------------------------------------------- */
.btn_floating {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;
}
.btn_floating a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(64 / 375 * 100vw);
	background: rgba(3, 72, 140, 0.88);
	color: #fff;
	font-weight: bold;
	font-size: calc(20 / 375 * 100vw);
}

.btn_floating a::before {
	content: "";
	display: block;
	width: calc(72 / 375 * 100vw);
	height: calc(40 / 375 * 100vw);
	background: url(../images/common/icon_create.svg) no-repeat;
	background-size: contain;
}


@media (min-width: 769px) {
	.section {
		padding: min(8.8235294118vw, 120px) 0 min(5.2941176471vw, 72px);
	}
	#header {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	.fixed #header {
		position: fixed;
		background: #fff;
		opacity: 0;
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
		-webkit-animation: headerFadeIn 0.6s ease forwards;
		animation: headerFadeIn 0.6s ease forwards;
	}
	@-webkit-keyframes headerFadeIn {
		from {
			opacity: 0;
			-webkit-transform: translateY(-15px);
			transform: translateY(-15px);
		}
		to {
			opacity: 1;
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}
	}
	@keyframes headerFadeIn {
		from {
			opacity: 0;
			-webkit-transform: translateY(-15px);
			transform: translateY(-15px);
		}
		to {
			opacity: 1;
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}
	}
	/* FV
	------------------------------------------------------------------------- */
	.fv {
		padding-bottom: min(9.4117647059vw, 128px);
	}
	.fv::before {
		background: url(../images/top/fv_bg_wave_pc.png) repeat-x;
		background-size: 1360px 40px;
		bottom: min(42.7205882353vw, 581px);
	}
	.fv::after {
		height: min(42.7205882353vw, 581px);
	}
	.inner_fv {
		max-width: 1360px;
		margin: 0 auto;
		position: relative;
	}
	.fv_img {
		margin-bottom: 0;
	}
	.wrap_fv_right {
		width: min(25.8823529412vw, 352px);
		margin: 0;
		position: absolute;
		top: min(11.4705882353vw, 156px);
		right: min(8.8235294118vw, 120px);
	}
	.wrap_fv_right::after {
		width: min(10.5882352941vw, 144px);
		height: min(8.2352941176vw, 112px);
		bottom: -3.2vw;
		right: max(-6.4705882353vw, -88px);
	}
	.fv_info {
		margin-top: min(1.1764705882vw, 16px);
	}
	.fv_info p {
		gap: min(0.5882352941vw, 8px);
		margin-bottom: min(0.5882352941vw, 8px);
	}
	.fv_info p::before {
		width: min(1.1764705882vw, 16px);
		height: min(1.1764705882vw, 16px);
	}
	/* ========== ナビゲーション ========== */
	.ul_nav {
		gap: min(0.5882352941vw, 8px);
	}
	.ul_nav li {
		width: calc(50% - min(0.2941176471vw, 4px));
	}
	.ul_nav li a {
		gap: min(0.5882352941vw, 8px);
		height: min(7.0588235294vw, 96px);
		border-radius: min(0.2941176471vw, 4px);
		-webkit-transition: 0.2s;
		transition: 0.2s;
	}
	.ul_nav li a:hover {
		background: #F9E3DB;
	}
	.ul_nav li a::before {
		width: min(5.2941176471vw, 72px);
		height: min(2.9411764706vw, 40px);
	}
	.ul_nav li.nav_tel a {
		pointer-events: none;
		gap: min(1.1764705882vw, 16px);
		font-size: min(2.0588235294vw, 28px);
	}
	.ul_nav li.nav_tel a::before {
		width: min(2.3529411765vw, 32px);
		height: min(2.3529411765vw, 32px);
	}
	/* クラフトパークについて
	------------------------------------------------------------------------- */
	.about_top {
		padding: min(8.8235294118vw, 120px) 0;
	}
	.inner_about_top {
		max-width: 1360px;
		margin: 0 auto;
		position: relative;
	}
	.ul_about_top {
		width: min(17.6470588235vw, 240px);
		display: block;
		width: min(17.6470588235vw, 240px);
		left: 0;
	}
	.ul_about_top li {
		width: 100%;
		margin-bottom: min(1.1764705882vw, 16px);
	}
	.ul_about_top li:last-child {
		margin-bottom: 0;
	}
	.ul_about_top01 {
		top: -60px;
	}
	.ul_about_top02 {
		bottom: auto;
		top: -60px;
		left: auto;
		right: 0;
	}
	.ttl_about_top {
		font-size: min(1.7647058824vw, 24px);
		margin-bottom: min(2.3529411765vw, 32px);
	}
	.txt_about_top {
		width: 100%;
		text-align: center;
	}
	.txt_about_top p {
		margin-bottom: min(1.7647058824vw, 24px);
		font-size: min(1.4705882353vw, 20px);
	}
	/* 創る・学ぶ・体験する
	------------------------------------------------------------------------- */
	.wrap_create_contents {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: min(3.5294117647vw, 48px) min(2.3529411765vw, 32px);
	}
	.create_contents {
		width: min(25.8823529412vw, 352px);
		margin-bottom: 0;
	}
	.create_contents .btn {
		width: 100%;
	}
	.create_contents .btn a:hover,
	.create_contents_group a:hover {
		background: #F9E3DB;
		color: #470C00;
	}
	.create_lead_text {
		margin-bottom: min(0.5882352941vw, 8px);
	}
	/* 団体・学校・教育関係者の方へ */
	.create_contents_group {
		width: 100%;
		margin-top: 0;
	}
	.create_contents_group a {
		padding: min(1.7647058824vw, 24px) min(1.7647058824vw, 24px) min(1.7647058824vw, 24px) min(14.8529411765vw, 202px);
		border-radius: min(0.5882352941vw, 8px);
		-webkit-transition: 0.2s;
		transition: 0.2s;
	}
	.create_contents_group a::before {
		width: min(11.9117647059vw, 162px);
		height: min(16.1764705882vw, 220px);
		top: auto;
		bottom: 0;
		left: min(1.1764705882vw, 16px);
		-webkit-transform: translate(0);
		transform: translate(0);
	}
	.ttl_group {
		font-size: min(1.7647058824vw, 24px);
		margin-bottom: min(0.5882352941vw, 8px);
	}
	.link_text_group {
		gap: min(1.7647058824vw, 24px);
		font-size: min(1.3235294118vw, 18px);
		margin-top: min(1.7647058824vw, 24px);
	}
	.link_text_group::after {
		width: min(0.5882352941vw, 8px);
		height: min(0.5882352941vw, 8px);
	}
	/* レンタル工房・貸室
	------------------------------------------------------------------------- */
	.wrap_rental_contents {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		gap: min(1.1764705882vw, 16px) min(2.3529411765vw, 32px);
		margin-top: min(1.7647058824vw, 24px);
		padding: min(3.5294117647vw, 48px) 0;
	}
	.wrap_rental_contents::before {
		width: min(95.2941176471vw, 1296px);
		border-radius: min(4.7058823529vw, 64px);
	}
	.wrap_rental_contents::after {
		width: min(10.5882352941vw, 144px);
		height: min(17.0588235294vw, 232px);
		bottom: auto;
		top: max(-14.6323529412vw, -199px);
		right: 0;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	.wrap_rental_contents p {
		width: min(32.9411764706vw, 448px);
		margin: 0;
	}
	.wrap_rental_contents .btn_big a {
		padding-left: min(1.7647058824vw, 24px);
		height: min(6.4705882353vw, 88px);
		font-size: min(1.7647058824vw, 24px);
		gap: min(1.1764705882vw, 16px);
	}
	.wrap_rental_contents .btn_big a:hover {
		background: #F9E3DB;
		color: #470C00;
	}
	.wrap_rental_contents .btn a::before {
		width: min(2.9411764706vw, 40px);
		height: min(2.9411764706vw, 40px);
	}
	/* SNS
	------------------------------------------------------------------------- */
	.sns {
		padding-bottom: min(5.2941176471vw, 72px);
	}
	.sns::before, .sns::after {
		height: min(2.9411764706vw, 40px);
	}
	.ul_sns {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		gap: min(2.3529411765vw, 32px);
		margin-top: 6.4vw;
	}
	.ul_sns li {
		margin-bottom: 0;
	}
	.ul_sns li:last-child {
		margin-bottom: 0;
	}
	.ul_sns .btn {
		width: min(18.8235294118vw, 256px);
	}
	.ul_sns .btn a {
		font-size: min(1.3235294118vw, 18px);
		gap: min(1.1764705882vw, 16px);
		height: min(5.8823529412vw, 80px);
	}
	.ul_sns .btn a::before {
		width: min(2.3529411765vw, 32px);
		height: min(2.3529411765vw, 32px);
	}
	.ul_sns .btn a::after {
		width: min(1.1764705882vw, 16px);
		height: min(1.1764705882vw, 16px);
		right: min(1.1764705882vw, 16px);
	}
	.btn_instagram a::before {
		background-image: url(../images/common/icon_instagram.svg);
	}
	.btn_youtube a::before {
		background-image: url(../images/common/icon_youtube.svg);
	}
	.btn_x a::before {
		background-image: url(../images/common/icon_x.svg);
	}
	.btn_facebook a::before {
		background-image: url(../images/common/icon_facebook.svg);
	}

	/* floating
	------------------------------------------------------------------------- */
	.btn_floating {
		width: min(calc(160 / 1360 * 100vw), 160px);
		bottom: min(calc(8 / 1360 * 100vw), 8px);
		left: auto;
		right: min(calc(8 / 1360 * 100vw), 8px);
		transition: 0.6s;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-15px);
	}
	.fixed .btn_floating {
		position: fixed;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.fixed .btn_floating:hover {
		transform: translateY(-8px)!important;
		opacity: 0.8!important;
	}

	.btn_floating a {
		height: min(calc(160 / 1360 * 100vw), 160px);
		background: url(../images/top/btn_top_floating.svg) no-repeat;
		background-size: contain;
		font-size: min(calc(20 / 1360 * 100vw), 20px);
		text-align: center;
	}

	.btn_floating a::before {
		content: none;
	}
}