@charset "utf-8";

/*----------------------------------------

TOPICS版

----------------------------------------*/

/* 中央 */
.center{
	text-align: center;	
}
/* flex-shrink */
.flex-shrink {
	flex-shrink: 0;
}
/* フォント色 */
.mint {
	color: #06b3b1;
}
.black {
	color: #000;
}
.black a {
	color: #000;
}
.dark-green {
	color: #048180;
}
/* 背景色 */
.bg-mint {
	background: #06b3b1;
	color: #fff;
}
.bg-lightgreen {
	background: #f0f8f8;	
}
.bg-gray {
	background: #f4f4f4;
}
.bg-white {
	background: #fff;
}
/* 枠線 */
.border-dot-mint {
	border: 2px dotted #06b3b1;
	padding: 0.83rem 1.66rem;
}
.border-solid-mint {
	border: 2px solid #06b3b1;
	padding: 0.83rem 1.66rem;
}
.double_line {
	border:double 10px #202f55; 
	padding:1em;
}
/* radius */
.radius20 {
	border-radius: 20px;
}
.radius50 {
	border-radius: 20px;
}
/* margin */
.mt20 {
	margin-top: 1.66rem;
}


#article-wrap h2 {
	display: block;
}
#article-wrap h2::before {
	display: none;
}
#article-wrap h2.flex {
	display: flex;
}
#article-wrap table td.bg-lightgreen {
	background: #f0f8f8;	
}
#article-wrap table td.bg-white {
	background: #fff;	
}
#article-wrap .kenkohoken-title {
	padding: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 15px;
	gap: 1rem;
}
.kenkohoken-title span span {
	font-size: 3rem;
}
.kenkohoken-title img {
	width: 15%;
	height: auto;
}
.section-title2 {
	border-radius: 50px;
	text-align: center;
}
.section-title2::before {
	display: none;
}

.qr-wrap a {
	text-decoration: underline;
}
.qr img {
	width: 5rem;
	height: 5rem;
	background: #fff;
	padding: 0.55rem;
}
.inline-flex {
	display: inline-flex;
	align-items: center;
	padding: 0.83rem 1.66rem;
	gap: 0.8rem;
}
.inline-flex p {
	margin-bottom: 0;
}
.inline-block {
	display: inline-block;
}

/* リスト */
.number_list{
	list-style: decimal;
    margin: 0 0 1em 1em;
}

/* --健康保険 --*/
#health .flex {
	align-items: flex-end;
}
#health .flex-right {
	width: 20%;
}
#health .flex-right img {
	width: 100%;
	height: auto;
}


/* --経セン --*/

.keisen-wrap {
	padding: 6rem 2rem 2rem;
	background: #ddd;
	background: url("../img/topics/bg-topics1.png");
	position: relative;
}


.keisen-inner {
	background: #fff;
	padding: 2rem;
	border-radius: 20px;
}

#article-wrap h2.keisen-title {
	margin-bottom: 1rem;
}
.keisen-title span {
	font-size: 1.8rem;
}
#keisen .flex {
	gap: 2rem;
}
#keisen .flex-right {
	width: 40%;
	flex-shrink: 0;
}
#keisen .flex-right img {
	width: 100%;
	height: auto;
}
#keisen .border-mint {
	display: inline-block;
	margin-top: 1rem;
} 
.keisen-recommend {
	position: absolute;
	background: #fff;
	right: 2rem;
	font-weight: 600;
	top: -2rem;
	text-align: center;
	transform: rotate(-2deg);
}

/* --省エネ --*/

#ene h2, #huhosenyo h2, #rd h2 {
	display: flex;
	align-items: center;
}

#ene h2 img ,#huhosenyo h2 img, #rd h2 img {
	display: block;
	width: 2rem;
	height: auto;
}
/* --おしごとフェア --*/

#article-wrap h2.flex {
	display: flex;
}
.fair-wrap {
	padding: 2rem 2rem;
	background: #ddd;
	background: url("../img/topics/bg-topics2.png");
	position: relative;
}
.fair-inner {
	background: #fff;
	padding: 2rem;
	border-radius: 20px;
}
.fair-inner .flex-left {
	width: 50%;
}
.fair-inner .flex-left img {
	width: 100%;
	height: auto;
}
.fair-inner .qr-wrap .flex-left {
	width:unset;
}

/* --禁煙 --*/
#kinen .bg-lightgreen {
	padding: 1rem;
}
/* --市営住宅 --*/
#shieijyutaku h2 {
	font-size: 1.8rem;
	padding: 1.5rem 0;
	border-radius: 0;
	color: #fff;
}
.section-tile3 {
	text-align: center;
	border-left: 4px solid #06b3b1;
	border-right: 4px solid #06b3b1;
}

/* --7ページ目 --*/
#saihakken {
	position: relative;
	z-index: 2;
}
.bg-saihakken {
	top: 0;
	left: -50%;
	transform: translateX(50%);
	z-index: -1;
	position: absolute;
	padding-top: 2rem;
	background: url("../img/topics/bg-topics3.png") no-repeat top center/cover;
	width: 100%;
	aspect-ratio: 960/700;
}
#saihakken h2 {
	padding-top: 2rem;
	margin-bottom: 2rem;
}
#saihakken h3 {
	display: flex;
	gap: 0.66rem;
	align-items: center;
}
#saihakken h3 span {
	border-radius: 100%;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --8ページ目 --*/

#award25 {
	position: relative;
	z-index: 2;
}
.bg-award25 {
	top: 0;
	left: -50%;
	transform: translateX(50%);
	z-index: -1;
	position: absolute;
	padding-top: 2rem;
	background: url("../img/topics/bg-topics4.jpg") no-repeat top center/cover;
	width: 100%;
	aspect-ratio: 1080/810;
	opacity: 0.3;
}



.ribbon_y{
  display: inline-block;
  position: relative;
  height: 60px;/*リボンの高さ*/
  line-height: 60px;/*リボンの高さ*/
  text-align: center;
  padding: 0 30px;/*横の大きさ*/
  font-size: 1.5rem;/*文字の大きさ*/
  box-sizing: border-box;
}
.ribbon_y {
  background: #FFCC33;
}

.ribbon_y:before, .ribbon_y:after{
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon_y:before{
  top: 0;
  left: 0;
  border-width: 30px 0px 30px 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.ribbon_y:after{
  top: 0;
  right: 0;
  border-width: 30px 15px 30px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}



 
/* --受賞 --*/


.award{
	display: flex;
	justify-content: space-between;
}
.award_left{
	width:55%;	
}
.award_right{
	width:40%;	
}




@media (max-width: 767px) {
	#article-wrap .kenkohoken-title {
		flex-direction: column;
	}
	.kenkohoken-title span span {
		font-size: 2rem;
	}
	.kenkohoken-title img {
		width: 40%;
	}
	.inline-flex {
		flex-direction: column;
		align-items: unset;
	}
	#keisen .flex {
		gap: 1rem;
		margin-bottom: 1rem;
	}
	#keisen .flex-right {
		width: 100%;
	}
	#health .flex {
		align-items: unset;
	}
	.keisen-wrap {
		padding: 6rem 1rem 1rem;
	}
	.qr-wrap {
		flex-direction: column;
	}
	.qr-wrap p br {
		display: none;
	}
	#saihakken h2 {
		width: 40%;
		margin: 0 auto 2rem;
	}
	.fair-wrap {
		padding: 1rem 1rem 1rem;
		
	}
	#award25 .flex-shrink {
		text-align: center;
	}
	#article-wrap .fair-inner h2 {
		margin-bottom: 0;
	}
	.fair-inner .flex {
		gap: unset;
		margin-bottom: 1.33rem;
	}
	.fair-inner .flex-left {
		width: 90%;
	}
	.fair-inner .flex-right img {
		width: 60%;
	}
	.fair-inner .flex-right .qr img {
        width: 5rem;
    }
	.award,.award_left,.award_right{
		width:100%;
		display:block;
	}
	.award_right {
		margin-top: 2rem;
	}
	.ribbon_y {
		font-size: 1rem;	
	}
}