@charset "utf-8";

/* css Document
*****************************************************************/
@import "../../n_common/css/_variable.css";

.online-outer{
	font-family: var(--font_min);
	padding: 48px 0 100px;
	@media (width < 810px) {
		padding: 32px 0 48px;
	}
}
.online-ttl{
	text-align: center;
	font-size: clamp(24px, 7.595px + 2.025vw, 40px);/*40~24(1600~810)*/
	font-weight: 600;
	.txt_line{
		padding: 0 1.5em;
		background: linear-gradient(180deg, transparent 70%, #FFF89E 70%);
		-webkit-box-decoration-break: clone;
    box-decoration-break: clone;
		@media (width < 810px) {
			padding: 0 1em;
		}
	}
}
.online-catch{
	word-break: keep-all;
	font-size: clamp(16px, 9.848px + 0.759vw, 22px);/*22~16(1600~810)*/
	font-weight: 500;
	line-height: 1.8;
	margin-top: 32px;
	@media (width < 810px) {
		text-align: left;
		word-break: normal;
		margin-top: 24px;
	}
}

.online-intro{
	margin-top: 64px;
	@media (width < 810px) {
		margin-top: 48px;
	}
}
.online-intro__fukidashi{
	text-align: center;
	position: relative;
	padding-bottom: 30px;
	@media (width < 810px) {
		padding-bottom: 22px;
	}
	&::after{
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-right: 21px solid transparent;
		border-left: 21px solid transparent;
		border-top: 32px solid #C8E7F0;
		border-bottom: 0;
		position: absolute;
		bottom: 0;
		left: 50%;
		translate: -50% 0;
		@media (width < 810px) {
			border-right: 16px solid transparent;
			border-left: 16px solid transparent;
			border-top: 24px solid #C8E7F0;
		}
	}
}
.online-intro__fukidashi__txt{
	display: inline-block;
	word-break: keep-all;
	font-size: clamp(24px, 7.595px + 2.025vw, 40px);/*40~24(1600~810)*/
	font-weight: 600;
	line-height: 1.4;
	color: var(--main_c);
	background: #C8E7F0;
	padding: 0.4em 1em;
}
.online-intro__block{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 40px;
	@media (width < 810px) {
		gap: 16px;
		margin-top: 20px;
	}
	@media (width < 500px) {
		flex-direction: column;
	}
}
.online-intro__name{
	img{
		@media (width < 500px) {
			width: 200px;
		}
	}
}
.online-intro__list{
	flex-shrink: 0;
	font-size: clamp(16px, 9.848px + 0.759vw, 22px);/*22~16(1600~810)*/
	font-weight: 500;
	@media (width < 500px) {
		flex-shrink: 1;
	}
}
.online-intro__list__item{
	display: flex;
	align-items: center;
	line-height: 1.4;
	&:last-of-type{
		margin-top: 4px;
		padding-top: 4px;
		border-top: 1px solid var(--font_c);
	}
	dt{
		flex-shrink: 0;
		text-align: justify;
		text-align-last: justify;
		width: 9em;
		padding-right: 1.5em;
		position: relative;
		&::after{
			content: "／";
			position: absolute;
			top: 0;
			right: 0.25em;
		}
	}
	dd{
		flex-grow: 1;
		text-align: right;
		.txt_large{
			font-size: 1.4em;
		}
	}
}

.online-intro__anchor{
	margin-top: 56px;
	margin-inline: auto;
	max-width: 880px;
	@media (width < 810px) {
		margin-top: 32px;
	}
}
.online-intro__anchor__link{
	display: block;
	position: relative;
}
.online-intro__anchor__block{
	width: 100%;
	padding: 0.3em 0.6em;
	font-size: clamp(18px, -4.557px + 2.785vw, 40px);/*40~18(1600~810)*/
	background: color-mix(in srgb, var(--main_c) 75%, transparent);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.25em;
	position: absolute;
	top: 0;
	left: 0;
	&::after{
		flex-shrink: 0;
		content: "";
		display: inline-block;
		width: 0.8em;
		height: 0.8em;
		background: url("../../images/online/arrow_anchor.svg") center center/ contain no-repeat;
		margin-top: 0.2em;
	}
}
.online-intro__anchor__txt{
	word-break: keep-all;
	line-height: 1.4;
	font-weight: 600;
	color: #fff;
}

.online-mr{
	margin-top: 100px;
	margin-inline: auto;
	max-width: 1080px;
	@media (width < 810px) {
		margin-top: 56px;
	}
}
.online-mr__ttl{
	font-size: clamp(24px, 7.595px + 2.025vw, 40px);/*40~24(1600~810)*/
	font-weight: 600;
	line-height: 1.4;
	padding: 0.2em 0.6em;
	background: linear-gradient(90deg, transparent 0%, var(--main_c) 10%, var(--main_c) 50%, var(--main_c) 80%, transparent 100%);
	color: #fff;
}
.online-mr__contents{
	margin-top: 32px;
	@media (width < 810px) {
		margin-top: 16px;
	}
}