@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.new-lead h3 {
    background:var(--color-white);
    padding:8px 32px;
    color:var(--color-main);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 700;
    border-radius:20px;
    display:block;
    width:fit-content;
    margin-inline:auto;
}
.top-about__lead.new-lead h3::after {
    display:none;
}

.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: 5;
}

.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: 5;
}

.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;
	}
}


/**************************************************
MOVIE
**************************************************/
.top-about__movie-area {
	margin-top: 80px;
}
.top-about__movie-box {
    display:flex;
    align-items: flex-start;
    justify-content:space-between;
    gap:20px;
	margin-top: 50px;
    margin-inline:-10%;
}
.top-about__movie-box > article {
    flex:1;
	background-color: var(--color-white);
	padding: 40px 20px;
	border: 10px solid #FACED6;
	border-radius: clamp(80px, 6.95vw, 100px);
    height:100%;
    min-width:300px;
}
.top-about__movie-box > article .top-abilike__title {
    margin-bottom:10px;
    padding-top:0;
}
.top-about__movie-box > article .top-abilike__title span em {
    font-family: var(--font-family-base);
    font-style:normal;
    padding-right:3px;
}

.top-about__movie-box > article .section-title span[lang="ja"] {
    font-size: clamp(18px, 1.8vw, 26px);
}
.top-about__movie-box > article .section-title + div {
    display:flex;
    align-items: flex-start;
    justify-content: space-between;
    gap:40px;
    padding-inline :40px;
    margin-top:20px;
}
.top-about__movie-box > article .section-title + div > * {
    flex:1;
}
.top-about__movie-box > article iframe {
    width:100%;
    max-width:600px;
    margin-inline:auto;
    aspect-ratio: 16 / 9;
    border-radius:4px;
    display:block;
}
.top-about__movie-box > article h3 {
    font-size: clamp(18px, 1.8vw, 26px);
    color: var(--color-main);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    margin-top:10px;
}
.top-about__movie-box > article p {
    text-align:center;
    margin-top:10px;
}
.top-about__movie-box + .top-about__title {
    margin-top:60px;
}

@media (min-width:980.1px) {
    .top-about__movie-box > article .section-title + div :is(h3, p) {
        text-align:left;
    }
    .top-about__movie-box > article .section-title + div h3 {
        margin-top:0;
    }
}
@media (max-width:980px) {
    .top-about__movie-area {
        
    }
    .top-about__movie-box {
        flex-direction: column;
        margin-inline:0;
        margin-top:20px;
    }
    .top-about__movie-box > article {
        margin-inline:auto;
        flex:auto;
        width:500px;
        max-width:100%;
    }
    .top-about__movie-box > article .section-title + div {
        display:block;
        padding-inline :0;
        margin-top:0;
    }
}

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

.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.green {
	background-color: var(--color-green);
}

.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__inner + .top-vote__inner {
    margin-top:60px;
}

.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;
	}
}

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

/* ==============================
ラジオボタンを画像に変える
============================== */
.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;
}



/**************************************************
ABILIKEな世界へのご招待
**************************************************/
.top-invitation {
    background-color: var(--color-green);
	padding-top: clamp(20px, 5.5vw, 80px);
	padding-bottom: 80px;
}

.top-invitation .section-title span {
    color:var(--color-white);
}
.top-invitation .section-title span:last-of-type {
    line-height:1.2;
}
.top-invitation .section-title + p {
    text-align:center;
    color:var(--color-white);
    margin-top:20px;
}

.top-invitation h3 {
    text-align:center;
}
.top-invitation h3 img {
    margin-bottom:30px;
}
.top-invitation h3 span {
    background:var(--color-green);
    padding:8px 32px;
    color:var(--color-white);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 700;
    border-radius:20px;
    display:block;
    width:fit-content;
    margin-inline:auto;
}
.top-invitation h3 div {
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.5;
    margin-top: 30px;
    font-weight: 700;
    color:var(--color-green);
}

.top-invitation__project {
	margin-top: 50px;
	background-color: var(--color-white);
	padding: 80px;
	border: 10px solid var(--color-lightgreen);
	border-radius: clamp(80px, 6.95vw, 100px);
    margin-bottom:80px;
}
.top-invitation__project h3 span {
    width:100%;
    margin-bottom:20px;
}
.top-invitation__project p {
    text-align: center;
}

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

.top-invitation__abilike h3 + div {
    margin-top: 30px;
}
.top-invitation__abilike div p {
	line-height: 2;
    text-align: center;
    padding-top:1em;
}

.top-invitation__abilike div p:last-child {
	color: var(--color-green);
}

.top-invitation__project_section {
    padding:40px 0 24px 0;
    border-bottom: dotted 2px var(--color-lightgreen);
}
.top-invitation__project_section h4 {
    display:flex;
    flex-direction: column;
    gap:15px;
    align-items: center;
    justify-content: center;
    color:var(--color-green);
    font-size: clamp(18px, 1.8vw, 26px);
}
.top-invitation__project_section h4 span {
    font-weight:900;
    font-size:1.8em;
    line-height:1;
}
.top-invitation__project_section h4 div:last-of-type {
    line-height:1.2;
    letter-spacing:8%;
    font-weight:bold;
    text-align:center;
}
.top-invitation__project_section h4 div:last-of-type::after {
    content: "";
    display: block;
    width: calc(100% + 1em);
    margin-left: -0.5em;
    margin-top:5px;
    height: 2px;
    background: var(--color-green);
}
.top-invitation__project_section h4 div.waai {
    color:var(--color-green);
    display:flex;
    align-items: center;
    justify-content: center;
    gap:3px;
    font-size:16px;
}
.top-invitation__project_section h4 div.waai img {
    height:0.6em;
}
.top-invitation__project_section h4 div.waai::before {
    content:'|';
    rotate: -20deg;
    margin-right:5px;
}
.top-invitation__project_section h4 div.waai::after {
    content:'|';
    rotate: 20deg;
    margin-left:5px;
}
.top-invitation__project_section article {
    padding-top:40px;
    display:flex;
    gap:30px;
    align-items: center;
    justify-content: space-between;
}
.top-invitation__project_section article h5 {
    background:var(--color-green);
    color:var(--color-white);
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align:center;
    gap:10px;
    line-height:1.2;
    border-radius:20px;
    width:200px;
    min-height:154px;
    padding:10px 20px;
}
.top-invitation__project_section article h5 img {
    width:48px;
}
.top-invitation__project_section article > div {
    flex:1;
}
.top-invitation__project_section article > div ul {
    padding-left:0;
}
.top-invitation__project_section article > div p + ul {
    margin-top:5px;
}
.top-invitation__project_section article > div ul li {
    list-style:none;
    display:flex;
    gap:10px;
    align-items: center;
    justify-content: flex-start;
    font-weight:600;
    line-height:1.2;
    margin-top:10px;
}
.top-invitation__project_section article > div ul li::before {
    content:'';
    width:14px;
    height:14px;
    aspect-ratio: 1;
    background:url(../img/top/invitation_li_1.svg) center / cover no-repeat;
}
.top-invitation__project_section article > div p {
    text-align:left;
}
.top-invitation__project_section article > div ul + p {
    color:var(--color-green);
    font-weight:600;
    margin-top:16px;
}

.top-invitation__project_column {
    border:solid 2px var(--color-lightgreen);
    border-radius:10px;
    padding:24px;
    margin-top:24px;
    font-size:0.9em;
}
.top-invitation__project_column.column-1 {
    display:flex;
    gap:24px;
    align-items: flex-start;
    justify-content: space-between;
}
.top-invitation__project_column.column-1 .card-image {
    width:140px;
}
.top-invitation__project_column.column-1 .card-image img {
    width:100%;
    height:100%;
    object-fit: contain;
}
.top-invitation__project_column ul {
    padding-left:0;
}
.top-invitation__project_column ul li {
    list-style:none;
    display:flex;
    gap:10px;
    align-items: center;
    justify-content: flex-start;
    font-weight:400;
    line-height: 1.2;
    margin-bottom:10px;
}
.top-invitation__project_column ul li::before {
    content:'';
    width:14px;
    height:14px;
    aspect-ratio: 1;
    background:url(../img/top/invitation_li_2.svg) center / cover no-repeat;
}
.top-invitation__project_column dl {
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap:10px 20px;
    margin-top:24px;
}
.top-invitation__project_column dl div {
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap:10px;
}
.top-invitation__project_column dl div dt {
    background:var(--color-green);
    border-radius:999px;
    color:var(--color-white);
    padding:4px 16px; 
    width:fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}
.top-invitation__project_column dl div dt:has(> img) {
    padding:calc(4px + 0.1em);
    aspect-ratio: 1;
}
.top-invitation__project_column dl div dt img {
    height:1em;
}

.top-invitation__project_column.column-2 {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.top-invitation .top-invitation__startup {
    margin-top:60px;
}
.top-invitation .top-invitation__startup h3 img {
    margin-bottom:4px;
    margin-inline:5px;
    height:1em;
    width:auto;
}
.top-invitation .top-invitation__startup h4 {
    font-size: clamp(18px, 1.8vw, 26px);
    line-height: 1.5;
    margin-top: 10px;
    font-weight: 700;
    text-align:center;
}
.top-invitation__startup_image {
    display:flex;
    flex-wrap: wrap;
    gap:20px;
    align-items: center;
    justify-content: space-around;
    margin-block:30px;
}
.top-invitation__startup_image figure {
    flex:1;
}


.top-invitation__bg-bottom {
	background-color: var(--color-white);
}
.top-invitation__bg-bottom img {
	width: 100%;
	margin-top: -5px;
}

@media (max-width:980px) {
    .top-invitation__project {
        padding:40px 20px;
    }
    .top-invitation__project_section article {
        flex-direction: column;
    }

    .top-invitation__project_section article h5 {
        flex-direction: row;
        width:100%;
        min-height:auto;
    }
    .top-invitation__project p {
        text-align: left;
    }

    .top-invitation__project_column.column-1 {
        display:block;
    }
    .top-invitation__project_column.column-1 .card-image {
        width:80%;
        max-width:200px;
        margin-inline:auto;
        margin-bottom:20px;
    }

    .top-invitation__project_column ul li {
        align-items: flex-start;
    }
    .top-invitation__project_column ul li::before {
        margin-top:3px;
    }

    .top-invitation__project_column dl {
        flex-direction: column;
    }
    .top-invitation__project_column dl div:first-of-type {
        flex-direction: column;
    }

    .top-invitation .top-invitation__startup p {
        text-align:left;
    }
    .top-invitation__startup_image {
        flex-direction: column;
    }

    .top-invitation__abilike {
        padding: 48px 20px;
    }
}



/**************************************************
安平町の取り組み
**************************************************/
.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;
	}
}