@charset "utf-8";

.gwanak_top_bar .top_bar_inner{ width: 100%; max-width: 1600px; box-sizing:border-box }

.main-visual-wrap {
	width: 100%;
	height: 412px;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	z-index: -1;
	background: url(../../images/mayor/main/main_visual_bg.png) 23% 50% no-repeat #e4eff7;
}
.main-visual-wrap::after{
	width: 100%;
	height: 100%;
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	right: 0;
	top: 0;
	background: url(../../images/mayor/main/visual_bg.png);
}
.main-visual-wrap .main-visual{
	width: 100%;
	height: 100%;
	max-width: 1905px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
}
.main-visual-wrap .main-visual .mayor-img{
	width: 45%;
	box-sizing: border-box;
	text-align: right;
}
.main-visual-wrap .main-visual .mayor-img img{
	position: relative;
	right: -30px;
	bottom: -70px;
}
.main-visual-wrap .textarea {
	width: 55%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding-left: 60px;
	padding-right: 40px;
}

.main-visual-wrap .textarea .cont{
	width: 100%;
	max-width: 486px;
}

.main-visual-wrap .textarea .con {
	text-align: center;
}

.main-visual-wrap .textarea .con .stit {
	font-size:22px;
	letter-spacing: -0.06em;
	color:#fff;
	margin-bottom: 10px;
}

.main-visual-wrap .textarea .con .mtit {
	font-size:68px;
	letter-spacing: -0.06em;
	font-family: 'gamtanTantan';
	color:#fff;
	line-height:1.2
}

.main-visual-wrap .textarea .con .hello {
	font-size:20px;
	color:#fff;
	letter-spacing: -0.06em;
	line-height:1.5;
}

.main-visual-wrap .textarea .con .hello span.name{
	font-weight: 600;
	font-size: 28px;
	color: #9dd6ff;
}

.inner {
	max-width:1400px;
	margin:0 auto;
	box-sizing:border-box;
}

.links{
	width: 100%;
	margin-top: 25px;
}

.links .quick-links{
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 25px;
}

.links .quick-links li{
	text-align: center;
	width: calc(100% / 4);
	box-sizing: border-box;
}

.links .quick-links li:last-child{
	margin-right: 0;
}

.links .quick-links li a{
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.links .quick-links li a .ico{
	width: 100%;
	max-width: 92px;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 30px;
	background-color: #e5f0f8;
	border: 3px solid #e5f0f8;
}

.links .quick-links li a:focus .ico,
.links .quick-links li a:hover .ico{
	background-color: #fff;
	border-color: #3a9efc;
}

.links .quick-links li a p{
	font-weight: 500;
	color: #fff;
	font-size: 18px;
	letter-spacing: -0.06em;
}

.sns{
	position: absolute;
	right: 50px;
	bottom: 36px;
}

.sns-links{
	display: flex;
}

.sns-links li{
	margin-right: 10px;
}

.sns-links li:last-child{
	margin-right: 0;
}

.sns-links li a{
	display: block;
	width: 40px;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	background-position: center;
	background-repeat: no-repeat;
}

.sns-links li a.yt  {
	background-color:#e7161b;
	background-image:url(../../images/mayor/main/main_sns_yt.png);
}

.sns-links li a.blog {
	background-color:#32b44a;
	background-image:url(../../images/mayor/main/main_sns_blog.png);
}

.sns-links li a.insta {
	background-image:url(../../images/mayor/main/main_sns_insta.png);
}

.sns-links li a.fb {
	background-color:#475993;
	background-image:url(../../images/mayor/main/main_sns_fb.png);
}

.pledge-status {
	padding:85px 0;
	border-radius: 0 0 230px 0;
	position: relative;
	background-color: #fff;
}

.pledge-status::before{
	content: "";
	width: 100%;
	height: 230px;
	display: block;
	background-color: #eff6ff;
	position: absolute;
	z-index: -1;
	bottom: 0;
	right: 0;
}

.pledge-status .inner {
	display:flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.pledge-status .total-status {
	width:100%;
	max-width:262px;
}

.pledge-status .total-status h2 {
	font-size:46px;
	font-weight:bold;
	font-family:'GmarketSans','Pretendard',sans-serif;
	color:#222;
	letter-spacing: -0.03em;
	line-height:1.4;
}

.pledge-status .total-status h2 span {
	color:#015fc3;
	margin-bottom: 8px;
	display: block;
}

.pledge-status .total-status h2 .dot-tit{
	position: relative; 
}

.pledge-status .total-status h2 .dot-tit::before{
	content: "";
	display: block;
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #222222;
	left: 50%;
	top: -15px;
	transform: translateX(-50%);
}

.pledge-status .total-status h3{
	font-size:34px;
	font-weight:500;
	font-family:'GmarketSans','Pretendard',sans-serif;
	color: #222;
	letter-spacing: -0.03em;
	line-height: 1.6;
}

.pledge-status .total-status .status-info{
	padding-top: 25px;
	display: flex;
	gap: 40px;
}

.pledge-status .total-status .status-info a{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.pledge-status .total-status .status-info a .ico{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	aspect-ratio: 100 / 100;
	background-color: #e5f0f8;
	border-radius: 30px;
}

.pledge-status .total-status .status-info a p {
	font-size:18px;
	letter-spacing: -0.03em;
	line-height:1.5;
	color:#222222;
	margin-top: 15px;
	font-weight: 500;
}

.pledge-status .status-wrap{
	width: 100%;
	max-width: 560px;
}

.pledge-status .status-wrap .status-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.pledge-status .status-wrap .status-list li{
	width: calc((100% - 60px) / 3);
}

.pledge-status .status-wrap .status-list li a{
	display: block;
	text-align: center;
}

.pledge-status .status-wrap .status-list li a .ico{
	width: 120px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

.pledge-status .status-wrap .status-list li.list01 a .ico{
	background-color: #eff6ff;
}

.pledge-status .status-wrap .status-list li.list02 a .ico{
	background-color: #fbeef0;
}

.pledge-status .status-wrap .status-list li.list03 a .ico{
	background-color: #f7f1f8;
}

.pledge-status .status-wrap .status-list li.list04 a .ico{
	background-color: #fcf1e0;
}

.pledge-status .status-wrap .status-list li.list05 a .ico{
	background-color: #e8f8e6;
}

.pledge-status .status-wrap .status-list li.list06 a .ico{
	background-color: #e9f4f5;
}

.pledge-status .status-wrap .status-list li a p{
	padding-top: 15px;
	letter-spacing: -0.03em;
	line-height: 1.5;
	color: #222222;
	font-weight: 500;
}

.pledge-status .status-wrap .status-list li a p span{
	font-weight: 600;
	font-size: 20px;
}

.pledge-status .mayor-wish{
	width: 100%;
	max-width: 410px;
	box-sizing: border-box;
}

.pledge-status .mayor-wish a{
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding-top: 55px;
	padding-left: 55px;
	aspect-ratio: 1 / 1;
	border-radius: 50px;
	box-shadow: 2px 8px 15px rgba(0,0,0,0.15);
	overflow: hidden;
	background-color: #2885dc;
	position: relative;
}

.pledge-status .mayor-wish a .wish-img{
	position: absolute;
	bottom: -80px;
	right: -10px;
}

.pledge-status .mayor-wish a h3{
	font-weight:bold;
	font-family:'GmarketSans','Pretendard',sans-serif;
	font-size: 38px;
	color: #fff;
	letter-spacing: -0.03em;
	line-height: 1.8;
}

.pledge-status .mayor-wish a h3 .yellow{
	color: #ffed52;
}

.pledge-status .mayor-wish p{
	font-size: 18px;
	line-height: 1.8;
	letter-spacing: -0.06em;
	color: #fff;
	font-weight: 500;
	padding-top: 10px;
}

.pledge-status .mayor-wish a .link-arrow{
	display: flex;
	justify-content: center;
	align-items: center;
	width:54px;
	height:54px;
	box-sizing: border-box;
	border-radius: 50%;
	padding: 0;
	margin-top: 20px;
	background: url(../../images/mayor/main/link_arrow_ico.png) center no-repeat rgba(255, 255, 255, 0.2);
}

.pledge-status .mayor-wish a:hover .link-arrow,
.pledge-status .mayor-wish a:focus .link-arrow{
	background: url(../../images/mayor/main/link_arrow_ico02.png) center no-repeat #fff;
}

.news-area {
	background-color:#eff6ff;
	overflow:hidden;
	padding:80px 0;
	position:relative;
	border-radius:230px 0 0 0;
	z-index: 1;
}

.news-area::before {
	content:"";
	display:block;
	width:408px;
	height:365px;
	background-image:url(../../images/mayor/main/news_area_bg.png);
	background-repeat:no-repeat;
	background-position:center;
	position:absolute;
	top:-255px;
	left:30px;
}

.news-area::after {
	content:"";
	display:block;
	width:408px;
	height:365px;
	background-image:url(../../images/mayor/main/news_area_bg.png);
	background-repeat:no-repeat;
	background-position:center;
	position:absolute;
	bottom:15px;
	right:-240px;
	z-index: -1;
}

.news-area .inner {
	display:flex;
	gap:28px;
}

.news-area .news-top {
	display:flex;
	align-items: center;
	justify-content: space-between;
	width:100%;
	margin-bottom:25px;
	gap: 20px;
}

.news-area .news-top .tit {
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	column-gap:20px;
}

.news-area .news-top .tit strong {
	font-size:38px;
	font-family:'GmarketSans','Pretendard',sans-serif;
	letter-spacing:-0.03em;
	color:#222;
}

.news-area .news-top .tit > span {
	font-size:18px;
	letter-spacing:-0.03em;
	color:#555555;
	font-weight: 500;
}

.news-area .news-top .control {
	display:flex;
	align-items: center;
	justify-content: flex-end;
	gap:10px;
	padding-right: 12px;
}

.news-area .news-top .control .prev-photo,
.news-area .news-top .control .next-photo {
	width:44px;
	height:44px;
	border-radius:14px;
	background-color:#ffffff;
	border: 1px solid #d7d7d7;
	font-size:0;
	text-indent:-999999999em;
	background-repeat:no-repeat;
	background-position:center
}

.news-area .news-top .control .prev-photo {
	background-image:url(../../images/mayor/main/arrow_prev.png)
}

.news-area .news-top .control .next-photo {
	background-image:url(../../images/mayor/main/arrow_next.png)
}

.news-area .news-top .control .more-view {
	display:block;
	width:44px;
	height:44px;
	border-radius:14px;
	background-color:#222222;
	font-size:0;
	text-indent:-999999999em;
	background-repeat:no-repeat;
	background-position:center;
	background-image:url(../../images/mayor/main/more_ico.png)
}

.news-area .site-photo {
	width:100%;
	max-width:920px;
}

.news-area .site-photo-slide {
	width:100%;
	overflow:hidden
}

.news-area .site-photo-slide .swiper-slide {
	opacity:0;
}

.news-area .site-photo-slide .swiper-slide-active {
	opacity:1;
}

.news-area .site-photo-slide .swiper-slide-prev,
.news-area .site-photo-slide .swiper-slide-next {
	opacity:0.7;
}

.news-area .site-photo-slide .site-photo-item {
	display:block;
}

.news-area .site-photo-slide .site-photo-item .img-wrap {
	width:100%;
	max-width: 490px;
	border-radius:40px;
	overflow: hidden;
	position:relative;
    aspect-ratio: 490 / 330;
}

.news-area .site-photo-slide .swiper-slide-active .site-photo-item .img-wrap{
	box-shadow:0px 10px 10px rgba(0,0,0,0.15);
}

.news-area .site-photo-slide .site-photo-item .arrow {
	width:102px;
	height:102px;
	border-radius:50%;
	background-color:rgba(99,174,255,0.3);
	position:absolute;
	right:-15px;
	bottom:35px;
	display:flex;
	align-items: center;
	justify-content: center;
	opacity:0;
}

.news-area .site-photo-slide .site-photo-item .arrow img {
	position:relative;
	z-index:1;
}

.news-area .site-photo-slide .site-photo-item .arrow::after {
	content:"";
	display:block;
	width:68px;
	height:68px;
	border-radius:50%;
	position:absolute;
	background-color:#1b5fdd;
	background: linear-gradient(90deg,rgba(24, 79, 176, 1) 0%, rgba(42, 146, 203, 1) 100%);
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
}

.news-area .site-photo-slide .site-photo-item .img-wrap img {
	width: 100%;
    height: 100%;
}


.news-area .site-photo-slide .swiper-slide-active .arrow {
	opacity:1;
}


.news-area .site-photo-slide .site-photo-item .info {
	display:flex;
	align-items: center;
	justify-content: space-between;
	margin-top:30px;
	padding:0 25px;
	opacity:0;
	gap:8px;
}

.news-area .site-photo-slide .site-photo-item .info .tit {
	font-size:22px;
	font-weight:600;
	letter-spacing:-0.03em;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	max-width:calc(100% - 98px);
}

.news-area .site-photo-slide .site-photo-item .info .date {
	font-size:16px;
	color:#555555;
	letter-spacing:-0.03em;
}

.news-area .site-photo-slide .swiper-slide-active .info {
	opacity:1;
}

.news-area .video-news {
	width:calc(100% - 948px);	
	overflow: hidden;
}

.news-area .video-news .news-top {
	margin-bottom:50px;
}

.news-area .video-news .news-top .control {
	padding-right: 0;
}

.news-area .video-news .img-wrap {
	width:100%;
	overflow:hidden;
	border-radius:40px 40px 40px 20px;
	position:relative;
    height: 0;
    padding-top: calc(280 / 440 * 100%);
}

.news-area .video-news .img-wrap img {
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width:100%;
}

.news-area .video-news .img-wrap .now{
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 150px;
	height: 40px;
	background-color: #189078;
	border-radius: 0 20px 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.news-area .video-news .img-wrap .now img{
	position: static;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

.news-area .video-news .info {
	margin-top:25px;
}

.news-area .video-news .info .tit {
	font-size:22px;
	letter-spacing:-0.03em;
	color:#222;
	font-weight:600;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	margin-bottom:10px;
}

.news-area .video-news .info .date {
	font-size:16px;
	letter-spacing:-0.03em;
	color:#555;
}

@media all and (max-width:1800px){
	.pledge-status{
		border-radius: 0 0 120px 0;
	}

	.news-area {
		border-radius:120px 0 0 0;
	}
}

@media all and (max-width:1400px){	
	
	.main-visual-wrap::after{
		background-position: center;
	}

	.main-visual-wrap .main-visual .mayor-img{
		width: 37.5%;
	}
	
	.main-visual-wrap .main-visual .mayor-img img{
		right: 0;
		bottom: -75px;
		max-width: 100%;
		min-width: 420px;
	}

	.main-visual-wrap .textarea{
		width: 62.5%;
		padding-right: 20px;
		padding-left: 0;
	}

	.sns{
		right: 20px;
		bottom: 20px;
	}

	/* .gwanak_top_bar .top_bar_inner { width: 100%; padding:0 15px;} */

	.top-bar > div{width:auto;}
	.top-navi > div{width:auto; padding:0 15px;}
	
	#container{ box-sizing:border-box; }

	.pVer { display:none !important; }
	div.inner { position:relative; min-width:100% !important;  padding: 0 20px; }

	.pledge-status{
		border-radius: 0;
	}

	.pledge-status .total-status{
		max-width: 230px;
	}

	.pledge-status .total-status h2{
		font-size: 36px;
	}

	.pledge-status .total-status h2 .dot-tit::before{
		width: 6.5px;
		height: 6.5px;
	}

	.pledge-status .total-status h3{
		font-size: 28px;
	}

	.pledge-status .total-status .status-info{
		gap: 20px;
		padding-top: 30px;
	}

	.pledge-status .total-status .status-info a .ico{
		width: 90px;
		border-radius: 20px;
	}

	.pledge-status .total-status .status-info a .ico img{
		width: 28px;
	}

	.pledge-status .total-status .status-info a p{
		font-size: 16px;
	}

	.pledge-status .status-wrap .status-list li a .ico{
		width: 120px;
	}

	.pledge-status .status-wrap .status-list li a p span{
		font-size: 20px;
	}

	.pledge-status .mayor-wish{
		max-width: 380px;
	}

	.pledge-status .mayor-wish a h3{
		font-size: 32px;
		line-height: 1.6;
	}

	.pledge-status .mayor-wish p{
		font-size: 16px;
		line-height: 1.6;
	}

	.news-area {
		border-radius:0;
	}

	.news-area .site-photo {
		max-width:calc(68% - 25px);
	}

	.news-area .video-news {
		width:calc(32% - 25px);
	}

}

@media all and (max-width:1280px){
	
	.main-visual-wrap .textarea .con {
		padding-bottom:0px;
	}

	.main-visual-wrap .textarea .con .stit {
		font-size:20px;
	}

	.main-visual-wrap .textarea .con .mtit {
		font-size:56px;
	}

	.main-visual-wrap .textarea .con .hello {
		font-size:20px;
	}

	.main-visual-wrap .textarea .con .hello span.name{
		font-size: 30px;
	}

	.links{
		margin-top: 20px;
	}

	.links .quick-links li a .ico{
		border-radius: 25%;
	}

	.links .quick-links li:nth-child(1) a .ico img{
		width: 50%;
		min-width: 24px;
	}

	.links .quick-links li:nth-child(n+2) a .ico img{
		height: 40%;
		min-height: 18px;
	}


	.links .quick-links li a p{
		font-size: 16px;
	}

	.sns-links li a{
		width: 32px;
		border-radius: 15%;
		background-size: contain;
	}

	.sns-links li a.yt{
		background-size: 60%;
	}

	.sns-links li a.blog{
		background-size: 30%;
	}

	.sns-links li a.fb{
		background-size: 25%;
	}

	.pledge-status{
		padding: 60px 0;

	}

	.pledge-status .total-status h2{
		font-size: 32px;
	}

	.pledge-status .total-status h2 .dot-tit::before{
		width: 5.5px;
		height: 5.5px;
		top: -10px;
	}

	.pledge-status .total-status h3{
		font-size: 24px;
	}

	.pledge-status .total-status .status-info a p{
		font-size: 14px;
	}
	
	.pledge-status .status-wrap .status-list li a .ico{
		width: 60%;
		min-width: 90px;
	}

	.pledge-status .status-wrap .status-list li a .ico img{
		width: 50px;
	}

	.pledge-status .status-wrap .status-list li:nth-child(1) a .ico img{
		width: auto;
		height: 42px;
	}

	.pledge-status .status-wrap .status-list li:nth-child(6) a .ico img{
		width: auto;
		height: 42px;
	}

	.pledge-status .status-wrap .status-list li a p{
		padding-top: 10px;
		font-size: 14px;
	}

	.pledge-status .status-wrap .status-list li a p span{
		font-size: 16px;
	}

	.pledge-status .mayor-wish{
		max-width: 330px;
	}

	.pledge-status .mayor-wish a{
		border-radius: 12%;
		padding-top: 35px;
		padding-left: 40px;
	}

	.pledge-status .mayor-wish a .wish-img{
		width: 80%;
	}

	.pledge-status .mayor-wish a .wish-img img{
		width: 100%;
	}

	.news-area .news-top .tit strong {
		font-size:35px
	}

	.news-area .news-top .tit > span {
		font-size:16px;
	}

	.news-area .news-top .control .prev-photo,
	.news-area .news-top .control .next-photo {
		width:40px;
		height:40px;
	}

	.news-area .news-top .control .more-view {
		width:40px;
		height:40px;
	}

	.news-area .site-photo-slide .site-photo-item .arrow {
		width:80px;
		height:80px;
	}
	
	.news-area .site-photo-slide .site-photo-item .arrow::after {
		width:55px;
		height:55px;
	}

	.news-area .site-photo-slide .site-photo-item .arrow img {
		width:13px;
	}

	.news-area .site-photo-slide .swiper-slide-active .img-wrap {
		max-width: none;
		border-radius:15px 15px 80px 15px;
	}

	.news-area .site-photo-slide .site-photo-item .info {
		padding:0 15px;
	}

	.news-area .site-photo-slide .site-photo-item .info .tit {
		font-size:18px;
	}
	
	.news-area .video-news .img-wrap {
		border-radius:15px;
	}

}

@media all and (max-width:1080px){
	.news-area .inner {
		flex-wrap:wrap;
	}

	.news-area .news-top .tit {
		column-gap:10px;
	}

	.news-area .site-photo {
		max-width:100%;
	}

	.news-area .video-news {
		width:100%;
	}

	.news-area .video-news .news-top {
		margin-bottom:15px;
	}

	.news-area .video-news .img-wrap .now{
		width: 20%;
		min-width: 150px;
		height: 7%;
		min-height: 40px;
	}
}

@media all and (max-width:960px){	
	.pVer { display:none !important; }

	.main-visual-wrap{
		height: 340px;
	}
	
	.main-visual-wrap .main-visual{
		flex-direction: row-reverse;
		justify-content: left;
	}

	.main-visual-wrap::after{
		width: 100%;
		left: 0%;
		background: url(../../images/mayor/main/visual_bg02.png) center;
		background-size: cover;
	}

	.main-visual-wrap .main-visual .mayor-img{
		width: 340px;
		position: absolute;
		right: -10px;
		bottom: -50px;
	}

	.main-visual-wrap .main-visual .mayor-img img{
		bottom: 0;
		min-width: 0;
	}

	.main-visual-wrap .textarea{
		width: calc(100% - 280px);
		padding: 20px 20px;
		margin-top: 0;
	}

	.main-visual-wrap .textarea .con{
		padding-top: 0;
	}

	.main-visual-wrap .textarea .con .stit {
		font-size:16px;
	}

	.main-visual-wrap .textarea .con .mtit {
		font-size:35px;
	}

	.main-visual-wrap .textarea .con .hello {
		font-size:18px;
	}

	.main-visual-wrap .textarea .con .hello span.name{
		font-size: 24px;
	}

	.links .quick-links li{
		max-width: 80px;
	}

	.links .quick-links li a p{
		font-size: 14px;
	}

	.links-area .quick-links::before {
		height:120px;
	}

	.links-area .quick-links dl {
		height:120px;
	}

	.links-area .quick-links dl dd ul li img {
		width:50px;
	}

	.links-area .quick-links dl dd ul li span {
		font-size:15px;
		font-weight:500;
		line-height:1.2;
	}

	.links-area .quick-links dl dd ul li span br {
		content:" ";
		display:inline-block;
		padding:0 2px;
	}
   
	.pledge-status .inner{
		flex-wrap: wrap;
	}

	.pledge-status .status-wrap{
		width: calc(100% - 250px);
	}

	.pledge-status .status-wrap .status-list{
		justify-content: right;
	}

	.pledge-status .status-wrap .status-list li a .ico{
		max-width: 80px;
	}

	.pledge-status .status-wrap .status-list li a p{
		font-size: 13px;
	}

	.pledge-status .status-wrap .status-list li a p span{
		font-size: 14px;
	}

	.pledge-status .mayor-wish{
		max-width: none;
	}

	.pledge-status .mayor-wish a{
		height: auto;
		border-radius: 20px;
		aspect-ratio: unset;
		padding: 5%;
	}

	.pledge-status .mayor-wish a .wish-img{
		max-width: 260px;
	}

	.pledge-status .mayor-wish a h3{
		font-size: 28px;
	}

	.pledge-status .mayor-wish p{
		padding-top: 5px;
		font-size: 15px;
	}

	.pledge-status .mayor-wish p br{
		display: none;
	}

	.pledge-status .mayor-wish a .link-arrow{
		width: 42px;
		height: 42px;
		background-size: 12px;
	
	}
	.pledge-status .mayor-wish a:focus .link-arrow,
	.pledge-status .mayor-wish a:hover .link-arrow{
		background-size: 12px;
	}
}


@media all and (max-width:768px){
	.main-visual-wrap{
		height: 300px;
	}

	.main-visual-wrap .main-visual .mayor-img{
		width: 280px;
		right: -20px;
		bottom: -32px;
	}

	.main-visual-wrap .textarea {
		width: calc(100%);
	}

	.main-visual-wrap .textarea .cont{
		width: 386px;
	}

	.main-visual-wrap .textarea .con .stit {
		font-size:14px;
	}

	.main-visual-wrap .textarea .con .mtit {
		font-size:30px;
	}

	.main-visual-wrap .textarea .con .hello {
		font-size:16px;
	}
	.main-visual-wrap .textarea .con .hello span.name {
		font-size:22px;
	}
	
	.links .quick-links{
		gap: 15px;
	}

	.links .quick-links li:first-child{
		margin-left: 0;
	}

	.links .quick-links li a p{
		font-size: 12px;
	}

	.links .quick-links li a .ico{
		width: 80%;
		max-width: 70px;
		margin: 0 auto;
	}

	
	.sns{
		right:10px;
		bottom: 10px;
	}

	.sns-links li{
		margin-right: 5px;
	}

	.sns-links li a{
		width: 24px;
	}

	.pledge-status {
		padding:35px 0;
	}

	.pledge-status .inner {
		flex-wrap:wrap;
		row-gap:35px;
	}

	.pledge-status .total-status{
		width: 100%;
		max-width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 30px;
		margin: 0 auto;
	}

	.pledge-status .total-status .status-info{
		padding-top: 0;
		gap: 10px;
	}

	.pledge-status .total-status .status-info a .ico img{
		width: 20px;
	}

	.pledge-status .total-status .status-info a p{
		font-size: 12px;
		margin-top: 5px;
	}

	.pledge-status .total-status .status-info a .ico{
		width: 70px;
		border-radius: 10px;
	}

	.pledge-status .total-status h2 {
		font-size:30px;
	}

	.pledge-status .total-status h3{
		font-size: 20px;
	}

	.pledge-status .status-wrap{
		width: 100%;
		max-width: 100%;
	}

	.pledge-status .status-wrap .status-list li a p{
		font-size: 12px;
	}

	.pledge-status .status-wrap .status-list li a p span{
		font-size: 13px;
	}

	.pledge-status .status-wrap .status-list{
		max-width: 100%;
	}

	.pledge-status .mayor-wish a h3{
		font-size: 24px;
	}

	.pledge-status .mayor-wish p{
		font-size: 13px;
		width: calc(100% - 180px);
	}

	.pledge-status .mayor-wish a .wish-img{
		width: 200px;
	}

	.pledge-status .mayor-wish a .link-arrow{
		width: 36px;
		height: 36px;
		margin-top: 15px;
	}

	.news-area .news-top .tit strong {
		font-size:30px;
		line-height:1.4;
	}

	.news-area {
		padding:35px 0;
	}

	.news-area::before{
		width: 300px;
		background-size: contain;
		top: -220px;
	}

	.news-area::after{
		width: 300px;
		background-size: contain;
		right: -170px;
	}

	.news-area .news-top .tit > span {
		font-size:14px;
	}

	.news-area .news-top .control .prev-photo,
	.news-area .news-top .control .next-photo {
		width:40px;
		height:40px;
	}

	.news-area .news-top .control .more-view {
		width:40px;
		height:40px;
	}

	.news-area .site-photo-slide .site-photo-item .info .tit {
		font-size:16px;
	}

	.news-area .site-photo-slide .site-photo-item .info .date {
		font-size:14px;
	}

	.news-area .video-news .info .tit {
		font-size:20px;
	}

	.news-area .video-news .info .date {
		font-size:14px;
	}

}

@media all and (max-width:640px){
	.main-visual-wrap{
		height: 260px;
	}

	.main-visual-wrap .main-visual .mayor-img{
		width: 200px;
	}

	.main-visual-wrap .textarea .con .stit{
		font-size: 12px;
		margin-bottom: 0;
	}

	.main-visual-wrap .textarea .con .hello{
		font-size: 14px;
		line-height: 1.2;
	}

	.main-visual-wrap .textarea .cont{
		width: 350px;
	}

	.main-visual-wrap .textarea{
		padding: 0;
	}

	.links .quick-links li{
		max-width: 70px;
	}

	.main-visual-wrap .textarea .con .hello span.name{
		font-size: 18px;
	}

	.links .quick-links {
		gap: 10px;
	}

	.links .quick-links li:nth-child(2n){
		margin-right: 0;
	}

	.links .quick-links li:nth-child(3){
		margin-left: 0;
	}

	.links .quick-links li a p{
		font-size: 11px;
	}

	.main-visual-wrap .textarea .con .mtit {
		font-size:25px;
		margin:5px 0;
	}

	.main-visual-wrap .visual-control {
		margin-top:15px;
	}

	.links-area .quick-links {
		padding:15px 0;
	}

	.links-area .quick-links::before{
		height: 100%;
	}
	
	.links-area .quick-links dl {
		flex-wrap:wrap;
		height:auto;
	}

	.links-area .quick-links dl dt {
		width:100%;
		display:flex;
		flex-wrap:wrap;
		align-items: center;
		justify-content: center;
		gap:4px;
	}

	.links-area .quick-links dl dd {
		max-width:100%;
	}

	.pledge-status .bs-cate-status::after {
		width:60px;
		height:77px;
	}

	.pledge-status .bs-cate-status::before {
		border-radius:30px;
	}

	.pledge-status .total-status h2 {
		font-size:25px;
	}

	.pledge-status .total-status p {
		font-size:14px;
	}

	.news-area .news-top{
		align-items: flex-end;
		margin-bottom:15px;
	}

	.news-area .news-top .tit strong {
		font-size:25px;
	}

	.news-area .site-photo-slide .site-photo-item .arrow{
		right: 0;
		width: 70px;
		height: 70px;
	}

	.news-area .site-photo-slide .site-photo-item .arrow::after{
		width: 45px;
		height: 45px;
	}

	.news-area .news-top .tit > span{
		font-size: 13px;
	}

	.news-area .news-top .control .prev-photo,
	.news-area .news-top .control .next-photo {
		width:36px;
		height:36px;
		border-radius: 12px;
	}

	.news-area .news-top .control .more-view {
		width:36px;
		height:36px;
		border-radius: 12px;
	}
	
	.news-area .video-news .img-wrap .now{
		width: 20%;
		min-width: 120px;
		height: 7%;
		min-height: 30px;
		border-radius: 0 12px 0 0;
		font-size: 12px;
	}

}

@media all and (max-width:480px){

	.main-visual-wrap{
		height: auto;
		padding: 20px;
	}

	.main-visual-wrap .textarea .con{
		text-align: left;
	}

	.main-visual-wrap .textarea .con .stit {
		font-size:13px;
	}

	.main-visual-wrap .textarea .con .hello {
		font-size:14px;
	}

	.main-visual-wrap .textarea .con .hello img {
		width:50px
	}
	.links .quick-links{
		flex-wrap: wrap;
		width: 50%;
		max-width: 180px;
		gap: 6px;
		justify-content: left;
	}
	
	.links .quick-links li{
		width: calc((100% - 15px) / 2);
		max-width: 70px;
		margin: 0px;
	}

	.pledge-status .total-status .status-info a .ico{
		width: 50px;
	}

	.pledge-status .total-status .status-info a .ico img{
		width: 18px;
	}

	.pledge-status .status-wrap .status-list{
		gap: 20px;
		justify-content: space-between;
	}

	.pledge-status .status-wrap .status-list li a p{
		font-size: 10px;
	}

	.pledge-status .status-wrap .status-list li a p span{
		font-size: 11px;
	}
	
	.main-visual-wrap .main-visual .mayor-img{
		right: -30px;
		width: 220px;
	}

	.news-area .news-top{
		flex-wrap: wrap;
		gap: 0px;
	}

	.news-area .news-top .control{
		gap: 6px;
		width: 100%;
	}

	.news-area .news-top .control .prev-photo,
	.news-area .news-top .control .next-photo {
		width:34px;
		height:34px;
		border-radius: 10px;
		background-size:6px;
	}

	.news-area .news-top .control .more-view {
		width:34px;
		height:34px;
		border-radius: 10px;
		background-size:10px;
	}

	.news-area .site-photo-slide .swiper-slide-active .site-photo-item .img-wrap{
		border-radius: 15px 15px 60px 15px;
	}
}