@charset "UTF-8";

/**************************************************
fv
**************************************************/

body:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--color-base);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	animation: fadeIn 1.8s ease-in-out forwards;
}

@keyframes fadeIn {
	from {
		opacity: 1;
		visibility: visible;
	}

	to {
		opacity: 0;
		visibility: hidden;
	}
}


/**************************************************
fv
**************************************************/

.fv {
	background: url(../img/top/fv_bg_sp.svg) no-repeat center bottom / cover;
	height: 110vh;
	max-height: 700px;
}

.fv img {
	width: 100%;
	height: 80%;
	margin-top: 10%;
}

@media (min-width:768px) {
	.fv {
		background: url(../img/top/fv_bg_pc.svg) no-repeat center bottom / cover;
		max-height: 1000px;
	}

	.fv img {
		height: 80%;
		margin-top: 4%;
	}
}


/**************************************************
top-link
**************************************************/
.top-link {
	margin-top: 90px;
}

.top-link a {
	display: block;
	width: fit-content;
	margin-inline: auto;
	font-size: clamp(16px, 1.45vw, 21px);
	font-weight: 700;
	padding: 14px 40px;
	background-color: var(--color-base);
	border-radius: calc(1px * infinity);
	text-decoration: none;
	text-align: center;
}

@media (min-width:768px) {
	.top-link a {
		text-align: left;
	}
}


/**************************************************
うまかまつりにABILIKEブースが登場
**************************************************/
.top-info {
	margin-top: 60px;
}

.top-info__content {
	background-color: var(--color-base);
	text-align: center;
	border-radius: clamp(80px, 6.95vw, 100px);
	position: relative;
}

.top-info__content {
	margin-top: 70px;
	padding-bottom: 40px;
}

.top-info__content-title {
	display: inline-block;
	margin-inline: auto;
	margin-top: -80px;
	background-color: var(--color-main);
	color: var(--color-white);
	padding: 4px 16px;
	border-radius: clamp(10px, 1.8vw, 20px);
	font-size: clamp(18px, 1.8vw, 26px);
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
}

.top-info__content-title img {
	height: 30px;
	width: 30px;
	object-fit: contain;
	object-position: center;
	vertical-align: middle;
	display: inline-block;
	margin: 0 0.1em;
	transform: translateY(-2px);
}

.top-info__content-lead {
	margin-top: 32px;
	font-weight: bold;
	font-size: clamp(16px, 1.25vw, 18px);
    padding-inline:60px;
}

.top-info__content-campaign {
	display: inline-grid;
	background-color: var(--color-white);
	margin-top: 16px;
	padding: 14px clamp(20px, 5%, 40px);
	border-radius: calc(1px * infinity);
	min-width: 90%;
}

.top-info__content-campaign img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	object-position: center;
}

.top-info__content-campaign em {
	font-style: normal;
	color: var(--color-main);
	font-weight: bold;
	font-size: 19px;
}

.top-info__content-campaign small {
	font-size: clamp(12px, 0.97vw, 14px);
}

.top-info__content-day {
	margin-top: 20px;
}

.top-info__content-day h3 {
	font-weight: bold;
	font-size: clamp(18px, 1.52vw, 22px);
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	gap: 10px;
	justify-content: center;
	color: var(--color-main);
}

.top-info__content-day h3:before,
.top-info__content-day h3:after {
	content: "";
	display: block;
	width: 38px;
	height: 2px;
	background-color: var(--color-main);
	border-radius: calc(1px * infinity);
}

.top-info__content-day h3 img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	object-position: center;
}

.top-info__content-day ul {
	margin-top: 4px;
}

.top-info__content-day ul li {
	display: flex;
	gap: 5px;
	align-items: center;
	width: fit-content;
	margin-inline: auto;
	font-family: var(--font-family-num);
	font-weight: 500;
	font-size: 24px;
	letter-spacing: 0.1em;
}

.top-info__content-day ul li span {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 18px;
	height: 18px;
	background-color: var(--color-main);
	border-radius: 50%;
	color: var(--color-white);
	font-size: 12px;
	letter-spacing: 0;
	line-height: 1;
	text-align: center;
}

.top-info__content-day ul li:first-child span {
	background-color: #009DE2;
}

.top-info__content-day ul li:last-child span {
	background-color: #E6002D;
}

.top-info__content-day small {
	display: block;
	font-size: clamp(12px, 0.97vw, 14px);
	margin-top: 10px;
}

.top-info__content-illust {
	position: static;
}

.top-info__content-illust img {
	width: clamp(63px, 5.76vw, 83px);
	aspect-ratio: 63 / 37;
	object-fit: contain;
	object-position: center;
}

.top-info__content-illust img:first-child {
	position: absolute;
	left: calc(-30px / 3.75);
	top: 50px;
}

.top-info__content-illust img:last-child {
	position: absolute;
	right: -10px;
	bottom: 60px;
}

@media (min-width:768px) {
	.top-info__content {
		margin-top: 67px;
	}

	.top-info__content-title {
		margin-top: calc(-67px / 2);
		display: inline-flex;
		align-items: center;
	}

	.top-info__content-title img {
		transform: translateY(0);
	}

	.top-info__content-campaign {
		min-width: unset;
	}

	.top-info__content-day ul li {
		margin-inline: unset;
	}

	.top-info__content-day h3:before,
	.top-info__content-day h3:after {
		width: 140px;
	}

	.top-info__content-day ul {
		display: flex;
		justify-content: center;
		gap: 36px;
	}

	.top-info__content-illust img:first-child {
		position: absolute;
		left: -30px;
		top: 20px;
	}

	.top-info__content-illust img:last-child {
		position: absolute;
		right: 0px;
		bottom: 60px;
	}
}

/**************************************************
ABILIKEとは
**************************************************/
.top-about {
	background-color: var(--color-main);
	padding-top: 80px;
	border-radius: clamp(100px, 14vw, 200px) clamp(100px, 14vw, 200px) 0 0;
	margin-top: 40px;
	padding-bottom: clamp(190px, 16.6vw, 240px);
	position: relative;
	width: 100%;
}

.top-about__lead {
	margin-top: 40px;
	text-align: center;
	color: var(--color-white);
}

.top-about__lead h3 {
	font-size: clamp(18px, 1.94vw, 26px);
	letter-spacing: 0.11em;
	font-weight: bold;
	display: inline-block;
}

.top-about__lead h3::after {
	content: "";
	display: block;
	width: calc(100% + 1em);
	margin-left: -0.5em;
	height: 2px;
	background-image: linear-gradient(to right, #fff 4px, transparent 4px);
	background-size: 6px 2px;
	background-repeat: repeat-x;
	background-position: left bottom;
}

.top-about__lead p {
	margin-top: 16px;
}

.top-about__abilike {
	margin-top: 50px;
	background-color: var(--color-white);
	padding: 40px 10px;
	border: 10px solid #FACED6;
	border-radius: clamp(80px, 6.95vw, 100px);
}

.top-about__abilike h3 {
    margin-inline:auto;
    min-width:200px;
}
.top-about__abilike h3 img {
	width: 100%;
	height: 133px;
	object-fit: contain;
	object-position: center;
}

.top-about__abilike div {
	display: grid;
	gap: 1em;
	margin-top: 40px;
	text-align: center;
}

.top-about__abilike div p {
	line-height: 2;
}

.top-about__abilike div p:last-child {
	color: var(--color-main);
}

.top-about__movie {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-top: 40px;
	border-radius: clamp(80px, 6.95vw, 100px);
	background-color: var(--color-base);
	min-height: 373px;
}

.top-about__movie h3 {
	font-size: clamp(18px, 1.94vw, 28px);
	font-weight: 700;
	text-align: center;
}

.top-about__movie p {
	font-size: clamp(18px, 1.66vw, 24px);
	font-family: var(--font-family-en);
	color: var(--color-main);
	letter-spacing: 0.11em;
}

.top-about__illust-top {
	margin-top: 20px;
	margin-bottom: -100px;
	position: relative;
	z-index: 10;
}

.top-about__illust-top img {
	width: clamp(94px, 8.8vw, 128px);
	aspect-ratio: 128 / 126;
	object-fit: contain;
	object-position: center;
}

.top-about__illust-bottom {
	display: flex;
	justify-content: space-between;

	margin-top: -160px;
	margin-bottom: -80px;
	position: relative;
	z-index: 10;
}

.top-about__illust-bottom p:first-child img {
	width: 119px;
	height: 113px;
}

.top-about__illust-bottom p:last-child img {
	width: 126px;
	height: 114px;
}

@media (max-width:767px) {
	.top-about__illust-bottom {
		margin-inline: calc(50% - 50vw);
		width: 100vw;
		overflow: hidden;
		left: 0;
	}

	.top-about__illust-bottom p:first-child img {
		transform: translateX(-30px);
	}

	.top-about__illust-bottom p:last-child img {
		transform: translateX(30px);
	}
}

@media (min-width:768px) {
	.top-about__abilike {
		display: flex;
		gap: 80px;
		justify-content: center;
		align-items: center;
	}

	.top-about__abilike h3 img {
		width: 200px;
		height: 200px;
	}

	.top-about__abilike div {
		margin-top: 0;
		text-align: left;
	}

	.top-about__illust-top {
		margin-top: 80px;
		margin-bottom: -130px;
	}

	.top-about__illust-bottom p:last-child img {
		position: relative;
		top: 100px;
	}
}



/**************************************************
安平町のABILIKE
**************************************************/
.top-abilike {
	background-color: var(--color-base);
	position: relative;
}

.top-abilike__bg-top img {
	width: 100%;
	margin-bottom: -1px;
}

.top-abilike__inner {
	position: static;
}

@media (max-width:767px) {
	.top-abilike__title {
		padding-top: 40px;
	}
}

@media (min-width:768px) {
	.top-abilike__illust p:last-child img {
		margin-top: 120px;
	}
}


/* =============================
   マップSwiper（サムネイル付き）
   ============================= */
.top-map {
	margin-top: clamp(30px, 4.1vw, 60px);
	position: relative;
}

/* マップ側（サムネイル） */
.top-map__thumbs {
	position: relative;
}

.top-map__thumbs-list {
	display: block;
	position: relative;
	float: left;
}
.top-map__thumbs-list {
    transform: translate3d(0px, 0px, 0px) !important;
}

.top-map__thumbs-item {
	display: grid;
	align-items: center;
	justify-content: center;
	position: absolute;
	cursor: pointer;
}

@media (max-width:1199px) {
	.top-map__thumbs-list {
		width: 100%;
		aspect-ratio: 335 / 523;
		background: url(../img/top/map_sp.webp);
		background-size: contain;
	}

	.top-map__thumbs-item {
		height: calc(33vw / 3.75);
		/*safari対策*/
	}
}

@media (min-width:1200px) {
	.top-map__thumbs-list {
		width: 70%;
		max-width: 850px;
		height: 100%;
		aspect-ratio: 850 / 778;
		background: url(../img/top/map.webp);
		background-size: contain;
	}

	.top-map__thumbs-item {
		height: calc(53vw / 14);
		/*safari対策*/
		max-height: 53px;
	}
}

.top-map__thumbs-item p {
	display: grid;
	align-items: center;
}

.top-map__thumbs-item p img {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}

.top-map__thumbs-item p:before {
	content: "";
	display: block;
	border: solid 1px var(--color-white);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transition: border 0.3s;
}

/* ホバー */
.top-map__thumbs-item p {
	transition: scale 0.3s;
}

.top-map__thumbs-item:hover p {
	scale: 1.2;
}

.top-map__thumbs-item:hover p:before {
	border: solid 3px var(--color-main);
}

/* 選択時 */
.top-map__thumbs-item.swiper-slide-thumb-active p ,
.top-map__thumbs:has(._topic0401.swiper-slide-thumb-active) ._topic0402 p {
	scale: 1.2;
}

.top-map__thumbs-item.swiper-slide-thumb-active p:before ,
.top-map__thumbs:has(._topic0401.swiper-slide-thumb-active) ._topic0402 p:before {
	border: solid 3px var(--color-main);
	transition: border 0.3s;
}


/* 地図テキスト */
.top-map__thumbs-item h3 {
	position: relative;
	pointer-events: none;
}

.top-map__thumbs-item h3 img {
	display: block;
	width: 100%;
	height: unset;
	object-fit: contain;
	object-position: top;
	margin-top: 0.3vw;
}

@media (max-width:1199px) {
	.top-map__thumbs-item p {
		width: calc(40vw / 3.75);
		aspect-ratio: 1 / 1;

	}

	.top-map__thumbs-item p:before {
		border-radius: calc(5vw / 3.75);
	}

	.top-map__thumbs-item h3 span {
		position: absolute;
		left: calc(-13vw / 3.75);
		right: calc(-13vw / 3.75);
	}

	.top-map__thumbs-item {
		&._topic01 {
			top: 10%;
			left: 70%;
		}

		&._topic02 {
			top: 32.386%;
			left: 27.164%;
		}

		&._topic03 {
			top: 22.5%;
			left: 52%;
		}

		&._topic0401 {
			top: 20%;
			left: 33%;
		}

		&._topic0402 {
			top: 53.220%;
			left: 57%;
		}

		&._topic05 {
			top: 36%;
			left: 71%;
		}

		&._topic06 {
			top: 50.947%;
			left: 39.104%;
		}

		&._topic07 {
			top: 41.667%;
			left: 57%;
		}

		&._topic08 {
			top: 62.5%;
			left: 24.776%;
		}

		&._topic09 {
			top: 48%;
			left: 23%;
		}

		&._topic10 {
			top: 22%;
			left: 75%;
		}

		&._topic11 {
			top: 39.5%;
			left: 42%;
		}

		&._topic12 {
			top: 67%;
			left: 42%;
		}

		&._topic13 {
			top: 68.182%;
			left: 9.851%;
		}

		&._topic14 {
			top: 79%;
			left: 25.970%;
		}
	}
}

@media (min-width:1200px) {
	.top-map__thumbs-item p {
		width: calc(53vw / 14);
		max-width: 53px;
		aspect-ratio: 1 / 1;
	}

	.top-map__thumbs-item p:before {
		border-radius: min(calc(8vw / 14), 8px);
	}

	.top-map__thumbs-item h3 span {
		position: absolute;
		left: calc(-13vw / 14);
		right: calc(-13vw / 14);
	}

	.top-map__thumbs-item {
		&._topic01 {
			top: 8.997%;
			left: 62.353%;
		}

		&._topic02 {
			top: 33.419%;
			left: 36.471%;
		}

		&._topic03 {
			top: 23.522%;
			left: 49.647%;
		}

		&._topic0401 {
			top: 18%;
			left: 39%;
		}

		&._topic0402 {
			top: 55.656%;
			left: 54.471%;
		}

		&._topic05 {
			top: 38.175%;
			left: 64.118%;
		}

		&._topic06 {
			top: 52%;
			left: 45.294%;
		}

		&._topic07 {
			top: 44%;
			left: 56.235%;
		}

		&._topic08 {
			top: 64.396%;
			left: 35.294%;
		}

		&._topic09 {
			top: 48.972%;
			left: 36.000%;
		}

		&._topic10 {
			top: 21.209%;
			left: 62.824%;
		}

		&._topic11 {
			top: 39.974%;
			left: 46.941%;
		}

		&._topic12 {
			top: 68%;
			left: 46%;
		}

		&._topic13 {
			top: 71.722%;
			left: 25.294%;
		}

		&._topic14 {
			top: 80.591%;
			left: 37.059%;
		}
	}
}


/* スライダー */
.top-map__slider {
	filter: drop-shadow(0px 0px 9.7px rgba(0, 0, 0, 0.22));
	margin-top: 10px;
}

@media (min-width:1200px) {
	.top-map__slider {
		width: 480px;
		padding: 0 40px;
		position: absolute;
		bottom: 40px;
		margin-top: 0;
		right: 0;
	}
}

@media (max-width:1199px) {
	.top-map__slider {
		margin-inline: calc(50% - 50vw);
		width: 100vw;
		padding: 0 5%;
	}
}

.top-map__slider-item {
	padding: 20px;
	border: 10px solid var(--color-main);
	border-radius: 30px;
	background-color: var(--color-white);
}

.top-map__slider-item img {
	border-radius: 12px;
	width: 100%;
}

.top-map__slider-item h3 {
	font-size: 18px;
	font-weight: 700;
	margin-top: 16px;
	border-bottom: 2px solid var(--color-main);
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.top-map__slider-item div {
	font-size: 14px;
	line-height: 1.6;
}


/* ナビゲーションボタン */
.swiper-button-next,
.swiper-button-prev {
	width: clamp(40px, 3.47vw, 50px);
	height: clamp(40px, 3.47vw, 50px);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.swiper-button-next {
	right: 2.5%;
}

.swiper-button-prev {
	left: 2.5%;
}

.swiper-button-next:after,
.swiper-button-prev:after {
	display: none;
}

.swiper-button-prev {
	background-image: url('../img/common/arrow_prev.svg');

}

.swiper-button-next {
	background-image: url('../img/common/arrow_next.svg');
}

@media (max-width:767px) {

	.swiper-button-next,
	.swiper-button-prev {
		top: 200px
	}
}


/**************************************************
あなたのABILIKE投票
**************************************************/
.top-vote {
	background-color: var(--color-base);
	padding-top: clamp(20px, 5.5vw, 80px);
	padding-bottom: 80px;
}

.top-vote__bg-bottom {
	background-color: var(--color-white);
}

.top-vote__bg-bottom img {
	width: 100%;
	margin-top: -5px;
}

.top-vote__lead {
	margin-top: 40px;
}

.top-vote__lead h3 {
	margin-top: 40px;
}

.top-vote__form {
	margin-top: 40px;
}

.top-vote__form fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

.top-vote__form legend {
	display: block;
	width: fit-content;
	margin-inline: auto;
	text-align: center;
	font-size: clamp(18px, 1.94vw, 26px);
	color: var(--color-main);
	font-weight: 700;
	position: relative;
	line-height: 1;
}

.top-vote__form legend span {
	font-family: var(--font-family-en);
	font-weight: 700;
	display: inline-block;
	padding: 0 0.25em;
}

.top-vote__form legend::before,
.top-vote__form legend::after {
	content: "";
	display: block;
	width: 2px;
	height: 2.4em;
	background-color: var(--color-main);
	border-radius: calc(1px * infinity);
}

.top-vote__form legend::before {
	transform: rotate(-20deg);
	position: absolute;
	bottom: 0;
	left: -20px;
}

.top-vote__form legend::after {
	transform: rotate(20deg);
	position: absolute;
	bottom: 0;
	right: -20px;
}

.form__radio {
	border: 10px solid var(--color-main);
	background-color: var(--color-white);
	border-radius: clamp(70px, 6.9vw, 100px);
	box-sizing: border-box;
	max-width: 100%;
	margin-top: 20px;
}

.form__radio-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
	padding-block: clamp(10px, 4.1vw, 60px);
	padding-inline: clamp(0, 5%, 20px)
}

.form__submit {
	margin-top: 40px;
}

.form__submit p {
	height: 40px;
	line-height: 30px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.11em;
	white-space: nowrap;
	text-align: center;
	color: var(--color-main);
	font-family: var(--font-family-en);
	transition: all 0.3s;
}

.form__submit:has(button:hover) p {
	font-size: 25px;
}

.form__submit button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 100%;
	margin-inline: auto;
	padding: 20px;
	background-color: var(--color-main);
	color: var(--color-white);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.2em;
	white-space: nowrap;
	border: solid 2px var(--color-main);
	border-radius: calc(1px * infinity);
	box-shadow: 0 10px 0 0px #801C2F;
	transition: all 0.3s;
	cursor: pointer;
}
.form__submit button:disabled {
    opacity:.5;
    cursor: not-allowed;
}

@media (min-width:768px) {
	.form__submit button {
		min-width: 400px;
	}
}

.form__submit button:after {
	content: url("data:image/svg+xml,%3Csvg width='35' height='26' viewBox='0 0 35 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33.25 16.5H29.75V20H30.975C31.2648 20 31.5 20.1969 31.5 20.4375V21.3125C31.5 21.5531 31.2648 21.75 30.975 21.75H4.025C3.73516 21.75 3.5 21.5531 3.5 21.3125V20.4375C3.5 20.1969 3.73516 20 4.025 20H5.25V16.5H1.75C0.782031 16.5 0 17.282 0 18.25V23.5C0 24.468 0.782031 25.25 1.75 25.25H33.25C34.218 25.25 35 24.468 35 23.5V18.25C35 17.282 34.218 16.5 33.25 16.5ZM28 20V2.51641C28 1.5375 27.207 0.75 26.2336 0.75H8.77187C7.79297 0.75 7 1.54297 7 2.51641V20H28ZM11.55 10.0469L12.9445 8.66328C13.1742 8.43359 13.5461 8.43359 13.7758 8.66875L16.0344 10.9437L21.2406 5.78125C21.4703 5.55156 21.8422 5.55156 22.0719 5.78672L23.4555 7.18125C23.6852 7.41094 23.6852 7.78281 23.45 8.0125L16.4336 14.9688C16.2039 15.1984 15.832 15.1984 15.6023 14.9633L11.55 10.8781C11.3148 10.6484 11.3203 10.2766 11.55 10.0469Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
	display: block;
	width: 35px;
	height: 26px;
}

@media (any-hover: hover) {
	.form__submit button:hover {
		background-color: var(--color-white);
		color: var(--color-main);
		box-shadow: 0 10px 0 0px var(--color-main);
	}

	.form__submit button:hover:after {
		content: url("data:image/svg+xml,%3Csvg width='35' height='26' viewBox='0 0 35 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33.25 16.5H29.75V20H30.975C31.2648 20 31.5 20.1969 31.5 20.4375V21.3125C31.5 21.5531 31.2648 21.75 30.975 21.75H4.025C3.73516 21.75 3.5 21.5531 3.5 21.3125V20.4375C3.5 20.1969 3.73516 20 4.025 20H5.25V16.5H1.75C0.782031 16.5 0 17.282 0 18.25V23.5C0 24.468 0.782031 25.25 1.75 25.25H33.25C34.218 25.25 35 24.468 35 23.5V18.25C35 17.282 34.218 16.5 33.25 16.5ZM28 20V2.51641C28 1.5375 27.207 0.75 26.2336 0.75H8.77187C7.79297 0.75 7 1.54297 7 2.51641V20H28ZM11.55 10.0469L12.9445 8.66328C13.1742 8.43359 13.5461 8.43359 13.7758 8.66875L16.0344 10.9437L21.2406 5.78125C21.4703 5.55156 21.8422 5.55156 22.0719 5.78672L23.4555 7.18125C23.6852 7.41094 23.6852 7.78281 23.45 8.0125L16.4336 14.9688C16.2039 15.1984 15.832 15.1984 15.6023 14.9633L11.55 10.8781C11.3148 10.6484 11.3203 10.2766 11.55 10.0469Z' fill='%23E6002D'/%3E%3C/svg%3E");
	}
}


.form__submit small {
	display: block;
	margin-top: 20px;
	font-size: 14px;
	line-height: 1.6;
}

@media (min-width:768px) {

	.top-vote__form legend::before,
	.top-vote__form legend::after {
		height: 1.8em;
	}

	.form__submit small {
		text-align: center;
	}
}

@media (min-width:1200px) {
	.form__radio-inner {
		max-width: 1080px;
		margin-inline: auto;
	}
}

/* ==============================
ラジオボタンを画像に変える
============================== */
.form__radio input[type="radio"] {
	display: none;
}

.form__radio label {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	margin: 5px;
	border: 5px solid transparent;
	transition: all 0.3s ease;
}

/* 画像のスタイル */
.form__radio span {
	width: clamp(100px, 9vw, 130px);
	height: clamp(100px, 9vw, 130px);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: calc(1px * infinity);
	overflow: hidden;
	margin-bottom: 10px;
	transition: all 0.3s ease;
}

.form__radio span img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 選択された状態 */
.form__radio label:has(input:checked) span {
	box-shadow: 0 0 0 5px var(--color-main);
}

/* ホバー */
.form__radio label:hover span {
	box-shadow: 0 0 0 5px var(--color-main);
}

/* テキストのスタイル */
.form__radio em {
	display: block;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	font-style: normal;
    width:130px;
}



/**************************************************
安平町の取り組み
**************************************************/
.top-initiatives {
	margin-top: clamp(40px, 5.5vw, 80px);
}

.top-initiatives__project {
	margin-top: clamp(50px, 4.1vw, 64px);
}

.top-initiatives__project a {
	text-decoration: none;
}

.top-initiatives__project-list {
	margin-top: 20px;
	display: grid;
	gap: 16px;
	padding-left: 0;
	list-style: none;
    width:100%;
}

.top-initiatives__project-item {
	display: contents;
}

.top-initiatives__project-item a {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;

	border-radius: 30px;
	border: 10px solid var(--color-main);
	padding: 20px;
	transition: background-color 0.3s;
}

.top-initiatives__project-item a:hover {
	background-color: var(--color-base);
}

.top-initiatives__project-item figure {
	width: 100%;
	aspect-ratio: 750 /423;
	border-radius: 10px;
	overflow: hidden;
}

.top-initiatives__project-item figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.top-initiatives__project-item h4 {
	font-size: clamp(16px, 1.94vw, 18px);
	font-weight: 700;
	border-bottom: 2px solid var(--color-main);
	display: grid;
	padding-bottom: 2px;
	align-items: center;
}

.top-initiatives__project-item div {
	font-size: 14px;
	line-height: 1.6;
    word-break: break-all;
}

.top-initiatives__project-item p {
	word-break: break-all;
	line-height: 1.6;
}

.top-initiatives__project-item p.link-icon {
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 10px;
}

.top-initiatives__project-item p.link-icon::before {
	content: "";
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	background-image: url(../img/common/icon_link.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex-shrink: 0;
}

.top-initiatives__project-item p.link-icon:hover {
	text-decoration: underline;
}

.top-initiatives__link {
	margin-top: 64px;
}

.top-initiatives__link-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	flex-direction: column;
	gap: 16px;
	max-width: 1040px;
	margin-inline: auto;
	margin-top: 40px;
	list-style: none;
	padding-left: 0;
}

.top-initiatives__link-item a {
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: color 0.3s;
}

.top-initiatives__link-item a:hover {
	color: var(--color-main);
}

.top-initiatives__link-item img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	object-position: center;
}

.top-initiatives__illust {
	display: flex;
	justify-content: space-between;
	margin-top: -100px;
}

.top-initiatives__illust p:first-child img {
	width: 155px;
	height: 138px;
}

.top-initiatives__illust p:last-child img {
	width: 90px;
	height: 120px;
}

@media (max-width:767px) {
	.top-initiatives__illust {
		overflow: hidden;
		margin-inline: calc(50% - 50vw);
		width: 100vw;
	}

	.top-initiatives__illust p:first-child img {
		transform: translateX(-50px);
	}

	.top-initiatives__illust p:last-child img {
		transform: translateX(30px);
	}
}

@media (min-width:768px) {
	.top-initiatives__project-list {
		grid-template-columns: repeat(3, 1fr);
		margin-top: 40px;
	}

	.top-initiatives__lead {
		text-align: center;
	}

	.top-initiatives__link-list {
		flex-direction: row;
		gap: 32px;
	}
}