@charset "UTF-8";

html {
	width: 100%;
	height: 100%;
	color: #000;
	margin: 0;
	padding: 0;
	font-feature-settings: "palt" 1;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure {
	margin: 0;
	padding: 0;
}

body{
	font-family: "Noto Sans JP", YuGothic, sans-serif;
	counter-reset:number;
	height: 100%;
	letter-spacing: 0.05em;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	-webkit-text-size-adjust: none;
}

table {
	font: 100%;
	font-size: inherit;
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th { text-align:left; }

fieldset,img { border: 0;}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}
address,caption,cite,code,dfn,em,th,var {
	font-style: normal;
	font-weight: normal;
}
ol,ul { list-style: none;}

q:before,q:after { content:'';}
abbr,acronym {
	border: 0;
	font-variant: normal;
}
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom;}
input,textarea,select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	outline: 0;
}
legend{ color: inherit;}

select,input,button,textarea{ font-family: "Noto Sans JP", YuGothic, sans-serif; }

pre,code,kbd,samp,tt{
	font-family: monospace;
	line-height: 100%;
}

main { display: block; }

a {
	color: inherit;
	outline: none;
	text-decoration: none;
}
a:hover,
a:focus,
a:active { text-decoration: none; }

a img { border: none; }

img{
	max-width: 100%;
	vertical-align: top;
}
iframe { vertical-align: top; }

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

html, body {
	height: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
}
body { -webkit-text-size-adjust: 100%; }

:root {
	--color-asahikawa: #dd7068;
	--color-kushiro: #8c6e5d;
	--color-sapporo: #0d78bf;
	--color-noboribetsu: #d8b13a;
	--color-green: #00915c;
	--color-beige: #e7e0d3;
}
#wrapper {
	overflow: hidden;
	transition-duration: .3s;
	transition-property: padding-top;
}

.serif { font-family: YuMincho, "Noto Serif JP", serif; }
.bold { font-weight: bold; }

.secTitle {
	font-weight: 600;
	text-align: center;
	&::before {
		content: "";
		display: block;
		background: url(../images/icon_hokkaido.png) no-repeat center center;
		background-size: auto 100%;
	}
}

@media screen and (min-width:769px), print{
	body {
		font-size: 16px;
		line-height: 1.875;
	}
	#wrapper { padding-top: 100px; }
	.scroll #wrapper { padding-top: 90px; }
	.sp { display: none !important; }
	a[href^="tel:"] { pointer-events: none; }

	.secTitle {
		font-size: 30px;
		padding-top: 82px;
		&::before {
			height: 27px;
			margin-bottom: 5px;
		}
	}
	.inner {
		max-width: 980px;
		margin-inline: auto;
		padding-inline: 25px;
	}
}
@media screen and (max-width:768px){
	body {
		font-size: 13px;
		line-height: 1.7;
	}
	#wrapper { padding-top: 60px; }
	.pc { display: none !important; }
	.secTitle {
		font-size: 25px;
		padding-top: 39px;
		&::before {
			height: 31px;
			margin-bottom: 12px;
			background-image: url(../images/icon_hokkaido.png);
		}
	}
}

#hLogo {
	top: 0;
	left: 0;
	position: absolute;
	transition-duration: .3s;
	transition-property: width, padding;
}
#header {
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	position: fixed;
	background-color: #fff;
	transition-duration: .3s;
	transition-property: height, box-shadow;
}
#gNavi {
	top: 0;
	right: 0;
	position: fixed;
	a { display: block; }
	.menu {
		font-weight: bold;
		& > li > a::before {
			content: "";
			display: inline-block;
			vertical-align: middle;
			background: no-repeat center center;
			background-size: 100%;
		}
	}
	.subMenu {
		a {
			color: #fff;
			text-align: center;
		}
		.asahikawa a { background-color: var(--color-asahikawa); }
		.kushiro a { background-color: var(--color-kushiro); }
		.sapporo a { background-color: var(--color-sapporo); }
		.noboribetsu a { background-color: var(--color-noboribetsu); }
	}
}
@media screen and (min-width:769px), print{
	#header { height: 100px; }
	.scroll #header {
		height: 90px;
		box-shadow: 0 0 45px rgba(0,0,20,0.3);
	}
	#hLogo {
		width: 243px;
		padding: 32px 24px 30px 36px;
		background: linear-gradient(143deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 96%, rgba(255, 255, 255, 0) 96.1%);
	}
	.scroll #hLogo {
		width: 121px;
		padding-block: 14px 13px;
	}
	#gNavi .menu {
		display: flex;
		padding: 30px 65px;
		transition-duration: .3s;
		transition-property: padding;
	}
	.scroll #gNavi .menu {
		padding-block: 24px;
	}
	#gNavi .hasMenu {
		position: relative;
	}
	#gNavi .menu {
		& > li + li { margin-left: 25px; }
		& > li > a {
			padding: 6px 1em 6px 0;
			transition-duration: .3s;
			transition-property: color;
			&::before {
				width: 17px;
				height: 13px;
				margin-top: -2px;
				margin-right: 8px;
				background-image: url(../images/rhombus_green.svg);
			}
			&:hover {
				color: var(--color-green);
			}
		}
		.subMenu {
			display: none;
			left: 26px;
			width: 100px;
			position: absolute;
			a {
				padding: 6px 0 8px;
				transition-duration: .3s;
				transition-property: background-color;
				&:hover { background-color: var(--color-green) }
			}
		}
		.hasMenu:hover .subMenu { display: block; }
	}
}
@media screen and (max-width:768px){
	#header { height: 60px; }
	.scroll #header { box-shadow: 0 0 45px rgba(0,0,20,0.3); }
	#hLogo {
		width: 160px;
		padding: 17px 19px 17px 13px;
		background: linear-gradient(143deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 96%, rgba(255, 255, 255, 0) 96.1%);
	}
	.scroll #hLogo {
		width: 80px;
		padding-block: 9px;
	}
	#gNavi {
		.icon {
			top: 0;
			right: 0;
			z-index: 1;
			width: 75px;
			height: 0;
			padding-top: 60px;
			position: fixed;
			overflow: hidden;
			cursor: pointer;
			background: url(../images/icon_menu.png) no-repeat center 37px;
			background-size: auto 9px;
			transition-duration: .5s;
			transition-property: background-image;
			&::before, &::after {
				content: "";
				width: 34px;
				display: block;
				position: absolute;
				left: 0;
				right: 0;
				margin-inline: auto;
				transition-duration: .5s;
				transition-property: top, width, height, background-color, transform;
			}
			&::before {
				top: 16px;
				height: 10px;
				border-top: 2px solid #000;
				border-bottom: 2px solid #000;
			}
			&::after {
				top: 22px;
				height: 2px;
				background-color: #000;
			}
		}
		&.open .icon {
			background-image: url(../images/icon_close.png);
			&::before {
				top: 6px;
				width: 2px;
				height: 30px;
				background-color: #000;
				transform: rotate(-60deg);
			}
			&::after {
				width: 34px;
				transform: rotate(-30deg);
			}
		}
		.menu {
			z-index: 0;
			top: 0;
			left: 0;
			display: none;
			width: 100%;
			height: 100%;
			overflow: auto;
			position: fixed;
			box-sizing: border-box;
			padding: 108px 30px 30px;
			background-color: var(--color-beige);
			& > li {
				border-radius: 10px;
				background-color: #fff;
				& + & { margin-top: 10px; }
				& > a {
					font-size: 18px;
					background-image: url(../images/icon_hokkaido.png);
					background-repeat: no-repeat;
					background-size: 36px auto;
					background-position: 25px 24px;
					padding: 20px 30px 20px 84px;
				}
				.subMenu {
					display: flex;
					flex-wrap: wrap;
					margin-top: -7px;
					padding: 0 30px 27px 84px;
					justify-content: space-between;
					li {
						margin-bottom: 6px;
						width: calc(50% - 3px);
						a {
							font-size: 15px;
							padding: 12px 0;
						}
					}
				}
			}
		}
		&.open .menu {
			display: block;
		}
	}
}

#mainVis .title {
	font-weight: 600;
	text-align: center;
	position: relative;
	box-sizing: border-box;
	background-color: var(--color-green);
	&::before {
		content: "";
		display: block;
		background: no-repeat center center;
		background-size: auto 100%;
	}
	&::after {
		content: "";
		bottom: 0;
		right: 100%;
		display: block;
		position: absolute;
		background: url(../images/in-hokkaido-2026.gif) no-repeat center center;
	}
	img { position: absolute; }
}
#areaNav {
	font-weight: 600;
	text-align: center;
	.path {
		height: 0;
		svg {
			width: 0;
			height: 0;
			#path {
				transform: scale(0.00517,0.00645);
			}
		}
	}
	.inner {
		display: flex;
		a {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			box-sizing: border-box;
			clip-path: url(#path);
			& > span {
				display: block;
			}
			.name {
				color: #fff;
				letter-spacing: 0.2em;
			}
			.button {
				border-radius: 999px;
				background-color: #fff;
				&::after {
					content: "";
					width: 0;
					height: 0;
					display: inline-block;
					vertical-align: middle;
					border-style: solid;
					border-color: transparent;
				}
			}
		}
	}
	.asahikawa a {
		background-color: var(--color-asahikawa);
		.button {
			color: var(--color-asahikawa);
			&::after { border-left-color: var(--color-asahikawa); }
		}
	}
	.kushiro a {
		background-color: var(--color-kushiro);
		.button {
			color: var(--color-kushiro);
			&::after { border-left-color: var(--color-kushiro); }
		}
	}
	.sapporo a {
		background-color: var(--color-sapporo);
		.button {
			color: var(--color-sapporo);
			&::after { border-left-color: var(--color-sapporo); }
		}
	}
	.noboribetsu a {
		background-color: var(--color-noboribetsu);
		.button {
			color: var(--color-noboribetsu);
			&::after { border-left-color: var(--color-noboribetsu); }
		}
	}
}
@media screen and (min-width:769px), print{
	#mainVis .title {
		height: 640px;
		margin-inline: 80px;
		&::before {
			height: 687px;
			max-width: none;
			margin-right: -80px;
			background-image: url(../images/mainvis_img_pc.png);
		}
		&::after {
			top: 16px;
			width: 80px;
			background-size: 12px auto;
		}
		img {
			top: 195px;
			left: 85px;
			width: 536px;
		}
	}
}
@media screen and (max-width:768px){
	#mainVis .title {
		height: 360px;
		font-size: 24px;
		margin-inline: 30px;
		&::before {
			top: 0;
			right: -50px;
			width: 455px;
			height: 302px;
			position: absolute;
			background-image: url(../images/mainvis_img_sp.png);
		}
		&::after {
			width: 30px;
			top: 40px;
			background-color: #fff;
			background-size: 8px auto;
		}
		img {
			left: 23px;
			bottom: 18px;
			width: 267px;
		}
	}
}
@media screen and (min-width:1001px), print {
	#areaNav {
		.inner {
			padding: 60px 0 30px;
			justify-content: center;
			li + li { margin-left: 10px; }
			li {
				max-width: calc((100% - 30px) / 4);
				a {
					width: 248px;
					max-width: 100%;
					padding-bottom: 25px;
					aspect-ratio: 248 / 199;
					transition-duration: .3s;
					transition-property: background-color;
					.name {
						font-size: 30px;
						transition-duration: .3s;
						transition-property: color;
					}
					.button {
						font-size: 16px;
						margin-top: 3px;
						padding: 4px 17px 6px;
						transition-duration: .3s;
						transition-property: color, background-color;
						&::after {
							margin-top: -2px;
							margin-left: 5px;
							border-width: 5px 0 5px 8px;
							transition-duration: .3s;
							transition-property: border-color;
						}
					}
					&:hover {
						background-color: var(--color-beige);
						.name { color: #fff; }
						.button {
							background-color: #fff;
						}
					}
				}
			}
			.asahikawa a:hover {
				.name { color: var(--color-asahikawa); }
				.button {
					color: #fff;
					background-color: var(--color-asahikawa);
					&::after { border-left-color: #fff; }
				}
			}
			.kushiro a:hover {
				.name { color: var(--color-kushiro); }
				.button {
					color: #fff;
					background-color: var(--color-kushiro);
					&::after { border-left-color: #fff; }
				}
			}
			.sapporo a:hover {
				.name { color: var(--color-sapporo); }
				.button {
					color: #fff;
					background-color: var(--color-sapporo);
					&::after { border-left-color: #fff; }
				}
			}
			.noboribetsu a:hover {
				.name { color: var(--color-noboribetsu); }
				.button {
					color: #fff;
					background-color: var(--color-noboribetsu);
					&::after { border-left-color: #fff; }
				}
			}
		}
	}
}
@media screen and (max-width:1000px) {
	#areaNav {
		margin-top: 25px;
		.inner {
			flex-wrap: wrap;
			justify-content: center;
			li {
				width: 152px;
				margin-inline: 8px;
				&:nth-child(2) ~ & { margin-top: 7.5px; }
				a {
					aspect-ratio: 305 / 245;
					padding-bottom: 13px;
					border-radius: 17.5px;
					.name {
						font-size: 18.5px;
						margin-bottom: 5px;
					}
					.button {
						font-size: 9.84px;
						width: fit-content;
						padding: 4px 10px;
						margin-inline: auto;
						&::after {
							margin-top: -3px;
							margin-left: 3px;
							border-width: 3.5px 0 3.5px 6px;
						}
					}
				}
			}
		}
	}
}

#news {
	.posts {
		.date {
			font-weight: bold;
			white-space: nowrap;
			box-sizing: border-box;
			color: var(--color-green);
		}
	}
	.documents li {
		font-weight: 600;
		text-align: center;
		box-sizing: border-box;
		.link a {
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 999px;
			background-color: var(--color-green);
			&::before, &::after {
				content: "";
				display: block;
				background-size: 100%;
			}
			&::before {
				aspect-ratio: 22 / 29;
				background: url(../images/icon_pdf.svg) no-repeat center center;
			}
			&::after {
				aspect-ratio: 25 / 24;
				background: url(../images/icon_download.svg) no-repeat center center;
			}
		}
		.link.comingSoon a {
			pointer-events: none;
			background-color: #ddd;
			&::before {
				filter: saturate(0%);
			}
		}
	}
}
@media screen and (min-width:1001px), print{
	#news {
		.posts {
			font-size: 18px;
			line-height: 30px;
			margin-top: 15px;
			li {
				display: flex;
				& > * { padding-block: 18px; }
				.date {
					width: 114px;
					min-width: 114px;
					padding-left: 14px;
					border-bottom: 1px solid var(--color-green);
				}
				.text {
					padding-left: 18px;
					border-bottom: 1px solid #e7e0d3;
				}
			}
		}
		.documents {
			display: flex;
			margin-top: 80px;
			justify-content: space-between;
			li {
				border-radius: 20px;
				width: calc((100% / 3) - 20px);
				.link a {
					height: 100px;
					font-size: 18px;
					line-height: 24px;
					padding-inline: 40px 35px;
					transition-duration: .3s;
					transition-property: color, background-color;
					&::before {
						width: 22px;
					}
					&::after {
						width: 25px;
					}
					&:hover {
						color: #000;
						background-color: var(--color-beige);
						&::after {
							transition-duration: .3s;
							transition-property: background-image;
							background-image: url(../images/icon_download_on.svg);
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width:1000px){
	#news {
		padding-inline: 20px;
		.posts {
			margin-top: 5px;
			li {
				position: relative;
				padding-block: 15px 20px;
				border-bottom: 1px solid #e7e0d3;
				.date { font-size: 12px; }
				.text {
					font-size: 14px;
					line-height: 25px;
					margin-top: 5px;
					padding-inline: 2px;
				}
				&::after {
					content: "";
					width: 66px;
					height: 0;
					left: 0;
					bottom: -1px;
					display: block;
					position: absolute;
					border-top: 1px solid var(--color-green)
				}
			}
		}
		.documents {
			margin-top: 35px;
			li {
				margin-top: 15px;
				border-radius: 10px;
				padding-inline: 20px;
				.link a {
					height: 62px;
					width: 262px;
					max-width: 100%;
					margin-top: 17px;
					line-height: 1.2;
					margin-inline: auto;
					box-sizing: border-box;
					padding-inline: 30px 27px;
					&::before { width: 16px; }
					&::after { width: 18px; }
				}
			}
		}
	}
}

#areas .area {
	background-color: var(--color-beige);
	.areaTitle {
		color: #fff;
		line-height: 1;
	}
	.aInner, .aBox { box-sizing: border-box; }
	.aInner {
		display: flex;
		margin-inline: auto;
		box-sizing: border-box;
		.aTitle, .element { font-weight: 600; }
	}
	.aWrapper {
		display: flex;
		justify-content: center;
		&::before, &::after {
			content: "";
			display: block;
			background-repeat: no-repeat;
		}
	}
	.aBox {
		position: relative;
		background-color: #fff;
		&::before {
			content: "";
			top: 0;
			display: block;
			position: absolute;
			background: no-repeat center bottom;
			background-size: 100% auto;
		}
		.lecture .title, .venue .lTitle, .venue .link a { font-weight: 600; }
		.lecture .lTitle {
			&::before { content: "「"; }
			&::after { content: "」"; }
			&::before, &::after { display: inline; }
		}
		.subcommittee {
			border-top: 1px solid;
			.title { font-weight: bold; }
			.list {
				display: flex;
				flex-wrap: wrap;
			}
			.member .name {
				img { border-radius: 50%; }
				& > span { display: block; }
			}
		}
		.place {
			border-top-width: 1px;
			border-top-style: solid;
			.building { font-weight: 600; }
		}
		.person {
			display: flex;
			justify-content: center;
			flex-direction: column;
			position: relative;
			box-sizing: border-box;
			.image {
				right: 0;
				position: absolute;
				img { border-radius: 999px; }
			}
			.shadow::after {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 999px;
				box-shadow: 0 1px 35px 0 rgba(0,0,0,0.07) inset;
			}
		}
		.venue .link a {
			display: block;
			width: fit-content;
			border-width: 1px;
			border-style: solid;
			border-radius: 999px;
			&::after {
				content: "";
				width: 0;
				height: 0;
				border-style: solid;
				display: inline-block;
				vertical-align: middle;
				border-top-color: transparent;
				border-right-color: transparent;
				border-bottom-color: transparent;
			}
		}
		.map iframe { width: 100%; }
		.access {
			box-sizing: border-box;
			border: 1px solid var(--color-beige);
			.color {
				font-weight: bold;
				&::before {
					content: "【";
					display: inline;
				}
				&::after {
					content: "】";
					display: inline;
				}
			}
			li {
				padding-left: 1em;
				position: relative;
				&::before {
					content: "";
					left: 0;
					display: block;
					position: absolute;
					border-radius: 50%;
					aspect-ratio: 1 / 1;
				}
			}
		}
	}
	&#asahikawa {
		.areaTitle { background-color: var(--color-asahikawa); }
		.aWrapper {
			&::before { background-image: url(../images/hokkaido-asahikawa.png); }
			&::after { background-image: url(../images/rhombus_asahikawa.svg), url(../images/rhombi.svg); }
		}
		.aBox::before { background-image: url(../images/rhombus_asahikawa.svg); }
		.title, .lecture .lTitle::before, .lecture .lTitle::after, .venue .lTitle, .link a { color: var(--color-asahikawa); }
		.person { background-color: #f6e3e2; }
		.link a {
			border-color: var(--color-asahikawa);
			&::after { border-left-color: var(--color-asahikawa); }
		}
		.access .color { color: var(--color-asahikawa); }
		.access li::before { background-color: var(--color-asahikawa); }
		.subcommittee, .place { border-color: var(--color-asahikawa); }
	}
	&#kushiro {
		.areaTitle { background-color: var(--color-kushiro); }
		.aWrapper {
			&::before { background-image: url(../images/hokkaido-kushiro.png); }
			&::after { background-image: url(../images/rhombus_kushiro.svg), url(../images/rhombi.svg); }
		}
		.aBox::before { background-image: url(../images/rhombus_kushiro.svg); }
		.title, .lecture .lTitle::before, .lecture .lTitle::after, .venue .lTitle, .link a { color: var(--color-kushiro); }
		.person { background-color: #f7ebe5; }
		.link a {
			border-color: var(--color-kushiro);
			&::after { border-left-color: var(--color-kushiro); }
		}
		.access .color { color: var(--color-kushiro); }
		.access li::before { background-color: var(--color-kushiro); }
		.subcommittee, .place { border-color: var(--color-kushiro); }
	}
	&#sapporo {
		.areaTitle { background-color: var(--color-sapporo); }
		.aWrapper {
			&::before { background-image: url(../images/hokkaido-sapporo.png); }
			&::after { background-image: url(../images/rhombus_sapporo.svg), url(../images/rhombi.svg); }
		}
		.aBox::before { background-image: url(../images/rhombus_sapporo.svg); }
		.title, .lecture .lTitle::before, .lecture .lTitle::after, .venue .lTitle, .link a { color: var(--color-sapporo); }
		.person { background-color: #e1e9ef; }
		.link a {
			border-color: var(--color-sapporo);
			&::after { border-left-color: var(--color-sapporo); }
		}
		.access .color { color: var(--color-sapporo); }
		.access li::before { background-color: var(--color-sapporo); }
		.subcommittee, .place { border-color: var(--color-sapporo); }
	}
	&#noboribetsu {
		.areaTitle { background-color: var(--color-noboribetsu); }
		.aWrapper {
			&::before { background-image: url(../images/hokkaido-noboribetsu.png); }
			&::after { background-image: url(../images/rhombus_noboribetsu.svg), url(../images/rhombi.svg); }
		}
		.aBox::before { background-image: url(../images/rhombus_noboribetsu.svg); }
		.title, .lecture .lTitle::before, .lecture .lTitle::after, .venue .lTitle, .link a { color: var(--color-noboribetsu); }
		.person { background-color: #f4f0e3; }
		.link a {
			border-color: var(--color-noboribetsu);
			&::after { border-left-color: var(--color-noboribetsu); }
		}
		.access .color { color: var(--color-noboribetsu); }
		.access li::before { background-color: var(--color-noboribetsu); }
		.subcommittee, .place { border-color: var(--color-noboribetsu); }
	}
}
@media screen and (min-width:1201px), print{
	#areas {
		.aBox {
			padding: 70px 90px 55px;
			margin-top: -80px;
			&::before {
				width: 30px;
				height: 11px;
				left: 32px;
			}
			.lecture {
				display: flex;
				justify-content: space-between;
				padding-bottom: 77px;
				.title { font-size: 26px; }
				.title ~ * { margin-left: 40px }
				.lTitle {
					font-size: 26px;
					margin-top: 28px;
					small { font-size: 20px; }
				}
				hgroup { max-width: calc(100% - 507px); }
				.person {
					width: 507px;
					max-width: 50%;
					height: 172px;
					border-radius: 20px 86px 86px 20px;
					padding-inline: 47px 181px;
					.name {
						font-size: 26px;
						small { font-size: 20px; }
					}
					.jTitle {
						font-size: 14px;
						line-height: 23px;
					}
					.image { width: 171px; }
				}
			}
			.subcommittee {
				display: flex;
				flex-wrap: wrap;
				padding-block: 23px 35px;
				.title {
					width: 100%;
					font-size: 22px;
				}
				.facilitator { width: 245px; }
				.panelist { width: calc(100% - 245px); }
				.subTitle { margin-block: 10px 15px; }
				.member {
					width: 200px;
					.name {
						font-size: 22px;
						line-height: 16px;
						img { width: 144px; }
						& > span { margin-top: 23px; }
					}
					.jobTitle {
						font-size: 14px;
						line-height: 23px;
						margin-top: 14px;
					}
				}
			}
			.place {
				display: flex;
				flex-wrap: wrap;
				padding-top: 30px;
				justify-content: space-between;
				.venue {
					width: 287px;
					.lTitle { font-size: 18px; }
					address { padding-left: 3px; }
					.link a {
						font-size: 14px;
						margin-top: 10px;
						margin-left: 7px;
						padding-inline: 17px 14px;
						transition-duration: .3s;
						transition-property: color, background-color;
						&::after {
							margin-top: -3px;
							margin-left: 10px;
							border-width: 5px 0 5px 8px;
							transition-duration: .3s;
							transition-property: border-color;
						}
						&:hover {
							color: #fff !important;
							&::after {
								border-left-color: #fff !important;
							}
						}
					}
				}
				.map {
					width: 260px;
					max-width: calc(50% - 10px);
					iframe {
						aspect-ratio: 1 / 1;
					}
				}
				.access {
					width: calc(100% - (287px + 260px + 50px));
					margin-left: 50px;
					padding: 10px 25px 18px;
					h4 span {
						display: inline-block;
						&:first-child { margin-right: 1em; }
					}
					ul { margin-top: 7px; }
					li::before {
						top: 12px;
						width: 9px;
					}
				}
			}
		}
	}
}
@media screen and (max-width:1200px){
	#areas {
		#asahikawa .aWrapper::after { background-position: center calc(50% - 22px), center center; }
		#kushiro .aWrapper::after { background-position: center calc(50% - 7.5px), center center; }
		#sapporo .aWrapper::after { background-position: center calc(50% + 7.5px), center center; }
		#noboribetsu .aWrapper::after { background-position: center calc(50% + 22px), center center; }
		.aWrapper {
			padding-bottom: 25px;
			&::before, &::after {
				width: 30px;
				height: 531px;
			}
			&::before {
				background-size: 7px auto;
				background-position: center center;
			}
			&::after {
				background-size: 15px auto;
			}
		}
		.aBox {
			width: calc(100% - 60px);
			padding-inline: 25px;
			margin-top: -50px;
			&::before {
				left: 27px;
				width: 22px;
				height: 8px;
			}
			.lecture {
				padding-block: 25px 42px;
				.title { font-size: 18px; }
				.lTitle {
					font-size: 18px;
					margin-top: 5px;
					small { font-size: 12px; }
				}
				.person {
					margin-top: 30px;
					border-radius: 10px 45px 45px 10px;
					padding: 11px 111px 19px 22px;
					.name {
						font-size: 18px;
						small { font-size: 13px; }
					}
					.jTitle {
						font-size: 11px;
						line-height: 13px;
						margin-top: 5px;
					}
					.image {
						width: 101px;
						margin-top: 8px;
					}
				}
			}
			.subcommittee {
				padding-block: 10px 32px;
				.title {
					font-size: 16px;
					margin-bottom: 5px;
				}
				.subTitle {
					font-size: 12px;
					margin-bottom: 11px;
				}
				.panelist { margin-top: 32px; }
				.facilitator .member,
				.panelist .list > li {
					width: 50%;
					box-sizing: border-box;
					&:nth-of-type(odd) { padding-left: 5px; }
					&:nth-of-type(even) { padding-left: 15px; }
					&:nth-of-type(2) ~ & { margin-top: 24px; }
					.name {
						img { width: 93px; }
						& > span {
							font-size: 16px;
							margin-top: 7px;
							small { font-size: 11px; }
						}
					}
					.jobTitle {
						font-size: 11px;
						line-height: 13px;
						letter-spacing: -0.01em;
					}
				}
			}
			.place {
				padding-block: 18px 25px;
				.lTitle { margin-bottom: 3px; }
				.link a {
					font-size: 10.5px;
					margin-top: 11px;
					padding-inline: 11px 12px;
					&::after {
						margin-top: -4px;
						margin-left: 3px;
						border-width: 3.5px 0 3.5px 6px;
					}
				}
				.map {
					margin-top: 20px;
					iframe { aspect-ratio: 9 / 5; }
				}
				.access {
					margin-top: 9px;
					padding: 9px 16px 14px;
					li::before {
						top: 8px;
						width: 7px;
					}
				}
			}
		}
	}
}
@media screen and (min-width:769px), print{
	#areas {
		margin-top: 20px;
		.secTitle { margin-block: 42px; }
		.aInner, .aBox {
			width: 1280px;
			max-width: calc(100% - 160px);
		}
		.areaTitle {
			.aInner {
				height: 260px;
				padding-top: 77px;
			}
			.aTitle {
				width: 135px;
				font-size: 50px;
			}
			.element {
				font-size: 30px;
				padding-top: 3px;
				margin-bottom: 17px;
			}
		}
		.aWrapper {
			padding-bottom: 86px;
			&::before, &::after {
				flex-grow: 1;
				min-width: 80px;
				margin-bottom: 80px;
			}
			&::before {
				background-size: 12px auto;
				background-position: center right 34px;
			}
			&::after {
				background-size: 30px;
			}
		}
		#asahikawa {
			.aWrapper::after { background-position: 25px calc(50% - 43px), 25px 50%; }
			.venue .link a:hover {
				background-color: var(--color-asahikawa);
			}
		}
		#kushiro {
			.aWrapper::after { background-position: 25px calc(50% - 15px), 25px 50%; }
			.venue .link a:hover {
				background-color: var(--color-kushiro);
			}
		}
		#sapporo {
			.aWrapper::after { background-position: 25px calc(50% + 15px), 25px 50%; }
			.venue .link a:hover {
				background-color: var(--color-sapporo);
			}
		}
		#noboribetsu {
			.aWrapper::after { background-position: 25px calc(50% + 43px), 25px 50%; }
			.venue .link a:hover {
				background-color: var(--color-noboribetsu);
			}
		}
	}
}
@media screen and (max-width:768px){
	#areas {
		.secTitle { margin-bottom: 23px; }
		.area {
			.aInner { padding: 45px 30px 90px; }
			.areaTitle {
				.aTitle {
					width: 80px;
					font-size: 30px;
				}
				.element {
					font-size: 18px;
					margin-top: 1px;
					letter-spacing: 0.1em;
				}
				.text {
					font-size: 12px;
					margin-top: 10px;
				}
			}
			.aWrapper {
				&::before, &::after {
					width: 30px;
				}
				.aBox {
					margin-top: -50px;
				}
			}
		}
		}
}

#accessBox {
	background: url(../images/access_bg.gif) repeat var(--color-green);
	#rootList {
		& > li {
			display: flex;
			align-items: flex-start;
			box-sizing: border-box;
			background-color: #fff;
			&::before {
				content: "";
				display: block;
				aspect-ratio: 1 / 1;
				background: no-repeat center center;
				background-size: cover;
			}
			&:nth-child(1)::before { background-image: url(../images/number_01.gif); }
			&:nth-child(2)::before { background-image: url(../images/number_02.gif); }
			&:nth-child(3)::before { background-image: url(../images/number_03.gif); }
			&:nth-child(4)::before { background-image: url(../images/number_04.gif); }
			&:nth-child(5)::before { background-image: url(../images/number_05.gif); }
			&:nth-child(6)::before { background-image: url(../images/number_06.gif); }
			.rootTitle { font-weight: 600; }
			li {
				text-indent: -1em;
				padding-left: 1em;
				&::before {
					content: "・";
					width: 1em;
					text-indent: 0;
					display: inline-block;
				}
			}
		}
	}
}
@media screen and (min-width:769px), print{
	#accessBox {
		margin-top: 30px;
		background-position: -109px -15px;
		#rootList {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 50px 57px;
			& > li {
				padding: 5px;
				margin-bottom: 8px;
				width: calc(50% - 5px);
				&::before {
					width: 33px;
					margin-right: 10px;
				}
				& > div {
					padding-block: 2px 15px;
				}
			}
		}
	}
}
@media screen and (max-width:768px){
	#accessBox {
		margin: 24px 20px 0;
		background-size: auto 91px;
		background-position: -11px -7px;
		#rootList {
			padding: 0 10px 30px;
			& > li {
				letter-spacing: 0;
				padding: 5px 10px 22px 5px;
				& + & { margin-top: 5px; }
				&::before {
					width: 24px;
					margin-right: 17px;
				}
			}
		}
	}
}

#footer {
	text-align: center;
	#fLogo { margin-inline: auto; }
	.contact {
		font-weight: 600;
		a[href^="mailto:"] { border-bottom: 2px solid #000; }
	}
}
@media screen and (min-width:769px), print{
	#footer {
		padding-block: 100px 35px;
		#fLogo { width: 333px; }
		.corporate {
			font-size: 22px;
			letter-spacing: 0.07em;
			margin-top: 10px;
		}
		.contact {
			font-size: 18px;
			margin-top: 20px;
			span + span { margin-left: 1.5em; }
		}
		.copyright {
			font-size: 14px;
			margin-top: 70px;
		}
	}
}
@media screen and (max-width:768px){
	#footer {
		padding: 67px 20px 21px;
		#fLogo { width: 222px; }
		.corporate {
			font-size: 14px;
			letter-spacing: 0.11em;
			margin-top: 10px;
		}
		.contact {
			font-size: 10.5px;
			margin-block: 18px 55px;
			span { display: block; }
		}
		.copyright { font-size: 9px; }
	}
}