.c-adBase {

	--bg-top : 160px;

	position: relative;
	z-index: 0;
	width: max(100svw, 100%);
	margin-top: 30px;
	margin-inline: min(calc(50% - 50vw), 0px);
	margin-bottom: 120px;





	&::after {
		content: '';
		display: block;
		position: absolute;
		z-index: -1;
		width: 100%;
		height: calc(100% - var(--bg-top) - 20px);
		background-color: #ECF1ED;
		top : var(--bg-top);
		left: 0;
	}

}

.c-adBase{
	@media (max-width: 768px) {
		.scrollBox {
			margin-left: -20px;
			width: 100vw;
			overflow-x: auto;

			/* 縦書きにするプロパティ */
			-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;

		}
	}

}

.adBase_about {
	img {
		width: 100%;
		max-width: 1054px;
		height: auto;
		object-fit: contain;
		margin-inline: auto;
		display: block;
	}
}


.map-adBase {

	width: fit-content;
	/* background: #fcc; */
	position: relative;
	margin-inline: auto;


	@media (max-width: 768px) {
		height: calc(889px * 0.9);
		width: calc(820px * 0.9);
		margin-right: max(-10vw, -40px);
	}

	/* .map {
		width: 820px;
		aspect-ratio: 650 / 889;
		object-fit: cover;
		object-position: left top;
	} */




	.modalButton {
		position: absolute;
		width: max-content;

		-ms-writing-mode: initial;
		writing-mode: initial;

		font-size: 15px;
		@media (max-width: 768px) {
			font-size: 12px;
		}
		font-weight: bold;
		letter-spacing: 0.1em;
		line-height: 1;
		color: var(--c-primary);
		padding: 0.4em 0.3em 0.4em 1.1em;
		background: rgba(255,255,255, 0.8);
		border-radius: 100vh;

		border: none;

		&::after {
			font-family: 'Material Symbols Outlined';
			font-weight: 500;
			content: '\e145';
			margin-left: 5px;
			font-size: 1.4em;
			margin-left: 0.1em;
			vertical-align: -0.2em;
			opacity: 0.3;
		}
	}

	--w-map : 1054;
	--h-map : 1144;

	[popovertarget="base-hokkaido"] {
		top: 158px;
		top: calc(158 / var(--h-map) * 100%);
		left: calc(834 / var(--w-map) * 100%);
	}
	[popovertarget="base-aomori"] {
		top: calc(346 / var(--h-map) * 100%);
        left: calc(711 / var(--w-map) * 100%);
	}
	[popovertarget="base-akita"] {
		top: calc(425 / var(--h-map) * 100%);
        left: calc(686 / var(--w-map) * 100%);
	}
	[popovertarget="base-iwate"] {
		top: calc(433 / var(--h-map) * 100%);
        left: calc(794 / var(--w-map) * 100%);
	}
	[popovertarget="base-yamagata"] {
		top: calc(523 / var(--h-map) * 100%);
        left: calc(674 / var(--w-map) * 100%);
	}
	[popovertarget="base-fukushima"] {
		top: calc(604 / var(--h-map) * 100%);
        left: calc(723 / var(--w-map) * 100%);
	}
	[popovertarget="base-niigata"] {
		top: calc(580 / var(--h-map) * 100%);
		left: calc(612 / var(--w-map) * 100%);
	}
	[popovertarget="base-gunma"] {
		top: calc(670 / var(--h-map) * 100%);
		left: calc(657 / var(--w-map) * 100%);
	}
	[popovertarget="base-chiba"] {
		top: calc(750 / var(--h-map) * 100%);
        left: calc(682 / var(--w-map) * 100%);
	}
	[popovertarget="base-nagano"] {
		top: calc(701 / var(--h-map) * 100%);
		left: calc(567 / var(--w-map) * 100%);
	}
	[popovertarget="base-shizuoka"] {
		top: calc(788 / var(--h-map) * 100%);
        left: calc(560 / var(--w-map) * 100%);
	}
	[popovertarget="base-yamanashi"] {
		top: calc(746 / var(--h-map) * 100%);
		left: calc(638 / var(--w-map) * 100%);
	}
	[popovertarget="base-toyama"] {
		top: calc(644 / var(--h-map) * 100%);
		left: calc(538 / var(--w-map) * 100%);
	}
	[popovertarget="base-ishikawa"] {
		top: calc(666 / var(--h-map) * 100%);
		left: calc(453 / var(--w-map) * 100%);
	}
	[popovertarget="base-fukui"] {
		top: calc(719 / var(--h-map) * 100%);
		left: calc(428 / var(--w-map) * 100%);
	}
	[popovertarget="base-kyoto"] {
		top: calc(769 / var(--h-map) * 100%);
		left: calc(382 / var(--w-map) * 100%);
	}
	[popovertarget="base-tottori"] {
        top: calc(748 / var(--h-map) * 100%);
        left: calc(275 / var(--w-map) * 100%);
	}
	[popovertarget="base-shimane"] {
		top: calc(774 / var(--h-map) * 100%);
        left: calc(189 / var(--w-map) * 100%);
	}
	[popovertarget="base-yamaguchi"] {
		top: calc(823 / var(--h-map) * 100%);
        left: calc(124 / var(--w-map) * 100%);
	}
	[popovertarget="base-kagawa"] {
		top: calc(837 / var(--h-map) * 100%);
        left: calc(284 / var(--w-map) * 100%);
	}
	[popovertarget="base-okayama"] {
		top: calc(788 / var(--h-map) * 100%);
		left: calc(277 / var(--w-map) * 100%);
	}
	[popovertarget="base-ehime"] {
		top: calc(872 / var(--h-map) * 100%);
		left: calc(208 / var(--w-map) * 100%);
	}
	[popovertarget="base-kochi"] {
		top: calc(903 / var(--h-map) * 100%);
		left: calc(297 / var(--w-map) * 100%);
	}
	[popovertarget="base-saga"] {
		top: calc(890 / var(--h-map) * 100%);
        left: calc(27 / var(--w-map) * 100%);
	}
	[popovertarget="base-nagasaki"] {
		top: calc(925 / var(--h-map) * 100%);
        left: calc(0 / var(--w-map) * 100%);
	}
	[popovertarget="base-kumamoto"] {
		top: calc(947 / var(--h-map) * 100%);
        left: calc(73 / var(--w-map) * 100%);
	}
	[popovertarget="base-oita"] {
		top: calc(906 / var(--h-map) * 100%);
        left: calc(110 / var(--w-map) * 100%);
	}
	[popovertarget="base-miyazaki"] {
		top: calc(988 / var(--h-map) * 100%);
		left: calc(170 / var(--w-map) * 100%);
	}
	[popovertarget="base-kagoshima"] {
		top: calc(1020 / var(--h-map) * 100%);
        left: calc(36 / var(--w-map) * 100%);
	}
	[popovertarget="base-okinawa"] {
		top: calc(1004 / var(--h-map) * 100%);
        left: calc(613 / var(--w-map) * 100%);
	}
}

.program-date {
	width: fit-content;
	margin-inline: auto;

	.dayBlock {
		display: flex;
		gap: 0.2em;
		margin-bottom: 0.3em;
		align-items: flex-start;

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	.day {
		color: var(--c-primary);
	}

	.devide {
		color: #ddd;
	}

	dd {
		padding-top: 0.1em;
		line-height: 1.5;
	}

	+ p {
		margin-top: 1em;
		width: fit-content;
		margin-inline: auto;
	}

}

.detailList {
	.program-date {
		+ p {
			margin-inline: 0;
		}
	}
}

.modal-adBase {


	--pdng : 30px;
	@media (max-width: 768px) {
		--pdng : 4vw;
		}

		/* position: relative; */
	background: #fff;


	overflow: hidden;
	margin: auto;
	padding: 0;
	/* @media (max-width: 768px) {
		padding: 7vw;
	} */
	/* height: 100%; */
	width: 80vw;
	max-width: 470px;

	/* max-height: 90dvh; */
	max-height: 90vh;
	border: none;


	animation: fadeIn 0.3s ease;


	&::before {
		position: absolute;
		content: '';
		display: block;
		width: 100%;
		height: 7px;
		top: 0;
		left: 0;
		background-color: var(--c-primary);
	}

	&::backdrop{
		background-color: rgba(0,0,0, 0.7);
		animation: fadeIn 0.3s ease;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.inner {
		width: 100%;
		max-height: 90vh;
		display: grid;
		grid-template-rows: 70px 1fr auto;
		padding: 0;
	}

	.scroll {
		/* width: 100%; */
		overflow-y: auto;
		scrollbar-gutter: stable;
		border-top: 1px solid #ddd;
		padding: 0 5px;

		@media (max-width: 768px) {
			padding: var(--pdng);
		}
	}

	h3 {
		font-size: 28px;
		@media (max-width: 768px) {
			font-size: 20px;
		}
		font-weight: 500;
		font-family: var(--ff-min);
		color: var(--c-primary);
		letter-spacing: 0.1em;
		margin-bottom: 1.2em;
		@media (max-width: 768px) {
			margin-bottom: 0.8em;
		}
		text-align: center;
		display: grid;
		align-items: center;
		height: 100%;
		padding-top: 6px;
	}


	.detail {
		position: relative;
		padding-top: var(--pdng);
		margin-bottom: var(--pdng);



		+ .detail {
			border-top: 1px solid #ddd;
			margin-top: var(--pdng);
		}

		h4 {
			position: absolute;
			top: 0;
			left: 0;
			top: var(--pdng);
			font-size: 12px;
			font-weight: bold;
			color: var(--c-primary);
		}
		.detailList {
			margin-left: 4em;
			margin-right: var(--pdng);
			line-height: 1.5;
			margin-bottom: 0;
			@media (max-width: 768px) {
				margin-left: 0;
				margin-right: 0;
			}
			width: auto;



			.item {
				/* display: flex; */
				/* padding-bottom: var(--pdng); */

				th {
					font-size: 12px;
					padding-top: 0.2em;
					font-weight: bold;
					letter-spacing: 0.1em;
					color: #ccc;
					white-space: nowrap;
					text-align: left;
					padding-bottom: var(--pdng);
				}
				td {
					padding-left: 1em;
					font-size: 14px;
					@media (max-width: 768px) {
						font-size: 12px;
					}
					padding-bottom: var(--pdng);
				}

				&:last-child {
					th {
						@media (min-width: 768px) {
							padding-bottom: 0;
						}
					}
					td {
						padding-bottom: 0;
					}
				}

				.small {
					font-size: 11px;
				}
				@media (max-width: 768px) {
					display: block;
					th,td {
						display: block;
					}
					th {
						padding-bottom: 0.35em;
					}
					td {
						padding-left: 1em;
					}
				}

			}

			.program-date {
				width: auto;
				margin-inline: 0;
			}

			.detailList-date {
				width: fit-content;
				display: grid !important;
				grid-template-columns: repeat(3, fit-content);
			}
			.date-subgrid {
				display: grid;
				grid-template-columns: subgrid;
				grid-column: span 3;
			}
		}
	}

	.linkBtn {
		display: block;
		background: var(--c-secondary);
		/* margin-top: 40px; */
		text-align: center;
		color: #fff;
		font-size: min(17px, 4vw);
		font-weight: 300;
		line-height: 1;
		padding: 1.8em 0;
		letter-spacing: 0.1em;
		width: auto;
		margin: 0 var(--pdng) var(--pdng);

		@media (max-width: 768px) {
			padding-top: 1.3em;
			padding-bottom: 1.3em;
		}

	}

	.closeBtn {
		position: absolute;
		top: 7px;
		right: 0;
		border: none;
		padding: 0.4em;
		color: var(--c-primary);
		background: none;
		opacity: 0.3;
		cursor: pointer;

		> span {
			font-weight: 500;
			font-size: 24px;
		}
	}
}



.titleBalloon {

	--sz : min(213px, 38vw);

	position: absolute;
	background: #fff;
	width: var(--sz);
	height: var(--sz);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100vh;

	top: calc(200px + var(--bg-top));
	left: 50%;
	transform: translateX(-150%);


	@media (max-width: 768px) {
		/* width: 35vw;
		height: 35vw; */
		top: calc(10% + 30px);
		left: 50%;
		transform: translateX(-120%);
		z-index: 2;
	}


	h2 {
		font-size: clamp(13px, 2.8vw, 18px );
		line-height: 1.4;
		font-weight: 400;
		color: var(--c-primary);
	}

	&::after {
		content:'';
		position: absolute;
		width: 18px;
		height: 18px;
		background-image: url(../internship/images/balloon_tail.svg);
		background-size: contain;
		background-repeat: no-repeat;
		/* top: 50%; */
		/* left:50%; */
		/* transform: translate(calc(-50% + var(--sz) * 0.5), calc(-50% + var(--sz) * 0.5)); */
		top: calc(sin(45deg) * var(--sz)*1.16);
		left: calc(cos(45deg) * var(--sz)*1.16);
	}

	.inner {
		padding: min(1.5em, 3.5vw);
	}

	.note {
		color: var(--c-primary);
		font-size: 11px;
		text-indent: -1em;
		padding-left: 1em;
		line-height: 1.5;
		margin-top: 0.5em;
	}
}


.carouselSection {
	--swiper-navigation-size: 30px;
	--swiper-theme-color: var(--c-primary);

	padding-left: var(--pdng);
	padding-right: var(--pdng);

	@media (max-width: 768px) {
		padding-left: 5vw;
		padding-right: 5vw;
	}




	.swiper-button-next {
		right: 5px;
	}
	.swiper-button-prev {
		left: 5px;
	}

	@media (max-width: 768px) {
		.swiper-button-next {
			right: -1vw;
		}
		.swiper-button-prev {
			left: -1vw;
		}
	}
}

.carousel-adBase {
	.swiper-slide {
		width: 100%;
		img {
			width: 100%;
			height: 100%;
			object-fit: contain;

		}
	}
}

.btnPDF {
	position: relative;
	z-index: 100;
	display: block;
	background: var(--c-primary);
	color: #fff;
	width: fit-content;
	margin-left: auto;
	margin-top: 1em;

	line-height: 1;
	padding: 0.5em 1.2em;
}

.adBase-schedule {

	h2 {
		font-size: 22px;
		line-height: 1.5;
	}

	.scheduleList {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 16px;

		border-top: 1px solid #ddd;
		margin-top: 1em;
		margin-bottom: 1.5em;
		padding-top: 1.5em;

		.item {
			display: grid;
			grid-template-columns: subgrid;
			grid-column: span 2;
			gap : 1em;

			@media (max-width: 768px) {
				grid-template-columns: 1fr;
				gap: 0;
			}
		}

		dt {
			font-weight: bold;
			color: var(--c-primary);
			background: var(--c-primary);
			color: #fff;
			padding: 0.4em 0.6em;

			.sub {
				font-size: 0.8em;
				font-weight: normal;
			}
		}

	}


	.schedule {
		img {
			width: 100%;
			height: auto;
			max-width: 1054px;
			display: block;
			margin-inline: auto;
		}
	}
}