@media (max-width: 767px) {
}

@media (min-width: 768px) {
}

/* ---------------------------------------- common */

@media (max-width: 767px) {

	main { padding: 0 1.25em; }

}

@media (min-width: 768px) {

	main { padding: 0 1.875em; }

}

/* ---------------------------------------- maintt */

#maintt { 
	text-align: center; 
	line-height: 1.2;
}
#maintt h1 span {
	display: block;
	font-weight: 900;
}
#maintt h1 em {
	display: block;
	font-weight: 600;
	margin: 0 0 1em;
}

@media (max-width: 767px) {

	#maintt { padding: 2em 1.875em; }
	#maintt h1 span {
		font-size: clamp(2rem, 1.195rem + 4.03vw, 3.125rem); 
	}
	#maintt h1 em {
		font-size: clamp(1rem, 0.642rem + 1.79vw, 1.5rem);
	}

}

@media (min-width: 768px) {

	#maintt { padding: 3em 1.875em; }
	#maintt h1 span {
		font-size: clamp(2.75rem, -0.974rem + 7.76vw, 3.875rem); 
	}
	#maintt h1 em {
		font-size: clamp(1rem, -0.655rem + 3.45vw, 1.5rem);
	}

}

/* ---------------------------------------- breadcrumbWrap */
/* Breadcrumb NavXT */

@media (max-width: 767px) {

	#breadcrumbWrap { display: none; }

}

@media (min-width: 768px) {

	#breadcrumbWrap {
		padding: 0 1.875em;
	}
	#breadcrumbs { font-size: clamp(0.75rem, 0.432rem + 0.66vw, 0.875rem); }

}

/* ---------------------------------------- article */

h2 {
	color: var( --baby-blue );
	text-align: center;
	line-height: 1.6;
	font-weight: 800;
	margin: 0 0 1em;
}
h3 {
	color: var( --baby-blue );
	text-align: center;
	line-height: 1.6;
	font-weight: 700;
	margin: 0 0 1em;
}
h4 {
	text-align: center;
	line-height: 1.6;
	font-weight: 600;
	margin: 0 0 1em;
}
h2 i,
h3 i,
h4 i { margin: 0 .5em 0 0; }

@media (max-width: 767px) {

	article { padding: 0 0 3em; }
	
	section,
	.headline { padding: 2em 0; }

	h2 { font-size: clamp(1.125rem, 0.499rem + 3.13vw, 2rem); }
	p { line-height: 2; }
	h3 { font-size: clamp(1rem, 0.463rem + 2.68vw, 1.75rem); }
	h4 { font-size: clamp(1rem, 0.642rem + 1.79vw, 1.5rem); }

}

@media (min-width: 768px) {

	article { padding: 0 0 4em; }
	
	section,
	.headline { padding: 3em 0; }

	h2 { font-size: clamp(1.5rem, -0.983rem + 5.17vw, 2.25rem); }
	p { line-height: 2.25; }
	h3 { font-size: clamp(1.25rem, -0.819rem + 4.31vw, 1.875rem); }
	h4 { font-size: clamp(1rem, -0.655rem + 3.45vw, 1.5rem); }

}

/* ---------------------------------------- headline */

#headline figure {
	text-align: center;
	margin: 0 0 3em;
}
#headline figure img { border-radius: 1em; }


@media (max-width: 767px) {

	#headline figure { margin: 0 0 2em; }
	#headline .inside { line-height: 2; }

}

@media (min-width: 768px) {

	#headline .inside { line-height: 2.25; }

	#headline.upperimg figure { margin: 0 0 3em; }
	#contact #headline figure { margin: 0; }

	#headline.leftimg .inside {
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
	}
	#headline.leftimg .inside > figure { width: 36%; }
	#headline.leftimg .inside > figure img { 
		width: 100%; 
		height: auto;
	}
	#headline.leftimg .inside > div { width: 60%; }

}

/* ---------------------------------------- connecting */

@media (max-width: 767px) {

	#connecting { display: none; }

}

@media (min-width: 768px) {

	#connecting {
		padding: 0 0 3em;
	}
	#connecting ul {
		display: flex;
		justify-content: center;
	}
	#connecting ul li{ min-width: 36%; }
	#connecting ul li:first-child { margin: 0 1em 0 0; }
	#connecting ul li:last-child { margin: 0 0 0 1em; }
	
	#connecting ul li a {
		display: block;
		color: #fff;
		font-size: clamp(1.125rem, -0.116rem + 2.59vw, 1.5rem);
		text-align: center;
		font-weight: 600;
		padding: .75em 3em;
		border-radius: 100px;
		-webkit-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
	}
	#connecting ul li:first-child a {
		background: var( --logo-color );
		border: 2px var( --logo-color ) solid;
	}
	#connecting ul li:first-child a:hover {
		color: var( --logo-color );
		background: #fff;
		border: 2px var( --logo-color ) solid;
	}
	#connecting ul li:last-child a {
		background: #4cc764;
		border: 2px #4cc764 solid;
	}
	#connecting ul li:last-child a:hover {
		color: #4cc764;
		background: #fff;
		border: 2px #4cc764 solid;
	}
	#connecting ul li a span { margin: 0 .5em 0 0; }
	
}

/* ---------------------------------------- table */
/* if any col, need wrap class "multiplex" and "multiplex-wrap" */

:root {
	--cell-border-color: #ccc;
	--multiplex-table-size: 767px;
	--th-base-color: #f5f5f5;
	--th-base-size: 25%;
}

table { width: 100%; }
th { 
	background: var(--th-base-color); 
	text-align: left; 
	font-weight: 600;
}
td { text-align: left; }
th, td {
	border: 1px var(--cell-border-color) solid;
	line-height: 1.6;
	vertical-align: middle;
	padding: 1em;
}

@media (max-width: 767px) {

	table { border-top: 1px #ccc solid; }
	th, td {
		display: block;
		border-top: none;
		border-left: 1px var(--cell-border-color) solid;
		border-right: 1px var(--cell-border-color) solid;
		border-bottom: 1px var(--cell-border-color) solid;
		padding: 1em;
	}
	th { text-align: center; }

	.multiplex {
		width: 100%;
		padding: 0;
		position: relative;
	}
	.multiplex .multiplex-wrap {
		overflow-x: scroll;
		position: relative;
	}
	.multiplex::after {
		display: block;
		width: 70px;
		height: 70px;
		color: #ccc;
		background: rgba( 255,255,255, .75);
		font-size: 50px;
		font-family: 'icomoon';
		content: "\e91b";
		padding: 10px;
		border-radius: 10px;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		z-index: 2;
	}
	.multiplex.noMark::after { content: none !important; }

	.multiplex .multiplex-wrap table { width: var(--multiplex-table-size); }
	.multiplex .multiplex-wrap table th, 
	.multiplex .multiplex-wrap table td {
		display: table-cell;
		border: 1px var(--cell-border-color) solid;
	}
	.multiplex .multiplex-wrap table th { text-align: left; }

}

@media (min-width: 768px) {
	th { width: var(--th-base-size); }
}

table.no-border,
table.no-border th,
table.no-border td { border: none; }
table.no-border th { background: none; }

/* ---------------------------------------- prevnext */

.prevnext {
	text-align: center;
	margin: 3em 0;
}
.prevnext ul {
	display: flex;
	justify-content: center;
}
.prevnext ul li a {
	display: block;
	color: var( --baby-blue );
	background: #fff;
	border: 2px var( --baby-blue ) solid;
	font-weight: 500;
	text-align; center;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	position: relative;
}
.prevnext ul li a:hover {
	color: #fff;
	background: var( --baby-blue );
}
.prevnext ul li:first-child a {
	margin: 0 4px 0 0;
	border-radius: .5em 0 0 .5em;
	padding: 1em 1em 1em 2.5em;
}
.prevnext ul li:last-child a {
	border-radius: 0 .5em .5em 0;
	padding: 1em 2.5em 1em 1em;
}
.prevnext ul li a.ended {
	opacity: .5;
	pointer-events: none;
}
.prevnext ul li:first-child a::before {
	font-family: icomoon;
	content: "\f137";
	position: absolute;
	top: 50%;
	left: .5em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.prevnext ul li:last-child a::after {
	font-family: icomoon;
	content: "\f138";
	position: absolute;
	top: 50%;
	right: .5em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

@media (min-width: 768px) {
	.prevnext ul li a {
		font-size: clamp(1rem, 0.172rem + 1.72vw, 1.25rem);
	}
}