@charset "utf-8";



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



TOPICS版 共通



最初に、この三色を置換する

①通常色 ②濃い色 ③薄い色



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

:root {

	--normalcolor: #fbaa26;

	--darkcolor: #ce8d1e;

	--lightcolor: #ffebcf;

}



/* aタグ */



a {

	text-decoration: underline;

	color: var(--darkcolor);

}



/* 明朝 */

.mincho {

	font-family: YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';

}



/* そろえ */

.center {

	text-align: center;

}



.left {

	text-align: left;

}



.right {

	text-align: right;

}



/* flex-shrink */

.flex-shrink {

	flex-shrink: 0;

}



.flex-center {

	justify-content: center;

}



.flex.flex-start {

	align-items: flex-start;

}



/* 波 */



.nami {

	text-decoration: underline wavy #000;

	text-decoration-thickness: 1px;

}



/* フォント色 */



.normalcolor {

	color: var(--normalcolor);

}



.darkcolor {

	color: var(--darkcolor);

}



.lightcolor {

	color: var(--lightcolor);

}



.white {

	color: #fff;

}



.black {

	color: #000;

}



.black a {

	color: #000;

}



/* 文字サイズ */



#article-wrap h2.fs24 {

	font-size: 1.33rem;

}



#article-wrap h2.fs30 {

	font-size: 1.66rem;

}



#article-wrap h2.fs40 {

	font-size: 2.22rem;

}



.fs18 {

	font-size: 1rem;

}



.fs20 {

	font-size: 1.11rem;

}



.fs24 {

	font-size: 1.33rem;

}



.fs30 {

	font-size: 1.66rem;

}



.fs40 {

	font-size: 2.22rem;

}



.fs50 {

	font-size: 2.66rem;

}







/* 背景色 */



.bg-normalcolor {

	background: var(--normalcolor);

}



.bg-darkcolor {

	background: var(--darkcolor);

}



.bg-lightcolor {

	background: var(--lightcolor);

}



.bg-gray {

	background: #f4f4f4;

}



.bg-white {

	background: #fff;

}



#article-wrap table th {

	background: var(--normalcolor);

}



#article-wrap table th.bg-lightcolor {

	background: var(--lightcolor);

	color: #000;

}



#article-wrap table td:first-child {

	background: var(--lightcolor);

}



#article-wrap table td.bg-lightcolor {

	background: var(--lightcolor);

}



#article-wrap table td.bg-white {

	background: #fff;

}



#article-wrap table td.bg-gray {

	background: #f4f4f4;

}



/* 枠線 */



.border {

	border: 1px solid var(--normalcolor);

}



.border-darkcolor {

	border: 1px solid var(--darkcolor);

}



.border-solid {

	border: 2px solid var(--normalcolor);

	padding: 1.11rem 1.66rem;

}



.border-solid-darkcolor {

	border: 2px solid var(--darkcolor);

	padding: 1.11rem 1.66rem;

}



.border-dot {

	border: 2px dotted var(--normalcolor);

	padding: 1.11rem 1.66rem;

}



.border-double {

	border: double 10px var(--normalcolor);

	padding: 1.11rem 1.66rem;

}



.border-bottom-solid {

	border-bottom: 1px solid var(--normalcolor);

}



.border-bottom-double {

	border-bottom: double 4px var(--normalcolor);

}



.border-bottom-dot {

	border-bottom: 1px dotted var(--normalcolor);

}



.top-double {

	border-top: 4px double;

}



#article-wrap table td.top-double {

	border-top: 4px double;

}



/* radius */

.radius20 {

	border-radius: 20px;

}



.radius50 {

	border-radius: 50px;

}



.circle {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 6.66rem;

	height: 6.66rem;

	aspect-ratio: 1 / 1;

	border-radius: 50%;

	text-align: center;

}



/* padding */

.pd0 {

	padding: 0 !important;

}



.pd10 {

	padding: 0.88rem;

}



.pd20 {

	padding: 1.11rem;

}



.pdrl20 {

	padding: 0 1.11rem;

}



.pd30 {

	padding: 1.66rem;

}



/* margin */

.mt0 {

	margin-top: 0;

}



.mt10 {

	margin-top: 0.55rem;

	padding-left: 0;

}



.mt20 {

	margin-top: 1.11rem;

}



.mt30 {

	margin-top: 1.66rem;

}



.mt40 {

	margin-top: 2.22rem;

}



.mt50 {

	margin-top: 2.77rem;

}



#article-wrap .mb0 {

	margin-bottom: 0;

}



#article-wrap .mb10 {

	margin-bottom: 0.55rem;

}



.ml-auto {

	margin-left: auto;

}



/* 背景画像用 */

.bg-wrap {

	padding: 2.66rem 2rem;

	background: var(--lightcolor);

	position: relative;

}



.bg-inner {

	background: #fff;

	padding: 2rem;

	border-radius: 20px;

}



.bg-wrap2 {

	padding: 5rem 0;

	position: relative;

	z-index: 2;

}



.bg-wrap2 .bg-inner {

	background: unset;

	padding: 0 2rem;

}



.bg-wrap2::before {

	content: "";

	position: absolute;

	background: url("../img/topics/p2_bg-top.jpg") center center/cover;

	width: 100%;

	height: 5rem;

	top: 0;

	z-index: -1;

	left: 50%;

	transform: translateX(-50%);

}



.bg-wrap2::after {

	content: "";

	position: absolute;

	background: url("../img/topics/p2_bg-bottom.jpg") center center/cover;

	width: 100%;

	height: 5rem;

	bottom: 0;

	z-index: -1;

	left: 50%;

	transform: translateX(-50%);

}



/* タイトル */



#article-wrap h2 {

	display: block;

}



#article-wrap h2::before {

	display: none;

}



#article-wrap h2.flex {

	display: flex;

	flex-wrap: nowrap;

}



#article-wrap.topics-wrap h3 {

	margin-bottom: 0;

}



#article-wrap.topics-wrap h3.fs20 {

	font-size: 1.1rem;

}



#article-wrap.topics-wrap h4 {

	font-size: 1rem;

}



.section-title2 {

	padding: 0.66rem 1rem;

}



.section-title2::before {

	display: none;

}



.section-title3 {

	border-radius: 50px;

	padding: 0 1rem;

}



/* dl用 */



.dl1 {

	display: flex;

	align-items: flex-start;

	flex-wrap: wrap;

	gap: 0.88rem 0;

}



.dl1 dt {

	width: 20%;

	padding: 0 1rem;

	text-align: center;

}



.dl1 dd {

	padding: 0 1rem;

	width: 75%;

}



.dl1 dt.pd10 {

	padding: 0.88rem;

}



.dl1 dd.pd10 {

	padding: 0.88rem;

}



/* QR用 */





#article-wrap .inline-flex.pd0 {

	padding: 0;

}



#article-wrap .qr-wrap p {

	margin-bottom: 0;

}



.qr-wrap a {

	text-decoration: underline;

	color: var(--darkcolor);

}



.qr img {

	width: 5rem;

	height: 5rem;

	background: #fff;

	padding: 0.55rem;

}



.qr-wrap .inline-flex-right {

	flex-shrink: 0;

}



/* お問い合わせ用 */



#article-wrap .contact-wrap p {

	margin-bottom: 0;

}



/* インラインフレックス用 */



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

}



.stretch {

	align-self: stretch;

}



/* リスト */

.number-list {

	list-style: decimal;

	margin: 0 0 0 1em;

}



.normal-list {

	list-style: disc;

	margin: 0 0 0 1em;

}



/* 画像 */

.img10 img {

	width: 10%;

}



.img20 img {

	width: 20%;

}



.img30 img {

	width: 30%;

}



.img40 img {

	width: 40%;

}



.img50 img {

	width: 50%;

}



.scale img {

	transform: scaleX(-1);

}



/* a */

a.underline {

	text-decoration: underline;

}



.underline {

	text-decoration: underline;

}



/* 幅 */

.w3 {

	width: 3%;

}



.w10 {

	width: 10%;

}



.w20 {

	width: 20%;

}



.w25 {

	width: 25%;

}



.w35 {

	width: 35%;

}



.w40 {

	width: 40%;

}



.w50 {

	width: 50%;

}



/* 縁 */



.futi4 {

	-webkit-text-stroke: 4px #fff;

	paint-order: stroke fill;

}



.futi10 {

	-webkit-text-stroke: 10px #fff;

	paint-order: stroke fill;

}



@media (max-width: 767px) {

	#article-wrap h2.flex {

		flex-direction: row;

		align-items: center;

	}



	#article-wrap h2 .flex {

		flex-direction: row;

		align-items: center;

	}



	#article-wrap h3.flex {

		flex-direction: row;

		align-items: center;

	}



	.bg-wrap {

		padding: 2rem 1.11rem;

	}



	.bg-inner {

		padding: 2rem 1.11rem;

	}



	.bg-wrap2 .bg-inner {

		padding: 2rem 1.11rem;

	}



	.inline-block {

		display: block;

	}



	.inline-flex {

		display: flex;

		flex-direction: column;

		align-items: unset;

	}



	.qr-wrap {

		flex-direction: column;

	}



	.qr-wrap p br {

		display: none;

	}



	.dl1 dl {

		flex-direction: column;

	}



	.dl1 dt {

		width: 100%;

		text-align: left;

	}



	.dl1 dd {

		width: 100%;

	}



	.img10 img {

		width: 30%;

	}



	.img20 img {

		width: 40%;

	}



	.img30 img {

		width: 50%;

	}



	.img40 img {

		width: 70%;

	}



	.img50 img {

		width: 100%;

	}



	.w10 {

		width: 30%;

	}



	.w20 {

		width: 40%;

	}



	.w25 {

		width: 40%;

	}



	.w35 {

		width: 50%;

	}



	.w40 {

		width: 70%;

	}



	.w50 {

		width: 100%;

		margin: 0 auto;

	}



	/* テーブルスクロール */



	.table-scroll {

		overflow-x: scroll;

		padding-bottom: 0.66rem;

	}



	#article-wrap h2.flex span {

		flex-shrink: 0;

		width: 10%;

	}



	.topics-wrap a[href^="tel:"] {

		color: var(--normalcolor);

	}

}





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



	各ページcss



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







/* 市制施行25周年 */

#article-wrap .fs70 {

	font-size: 3.66rem;

}



#article-wrap #city-anniversary h3.fs24 {

	font-size: 1.33rem;

}



.flex2 {

	flex: 2;

}



.flex3 {

	flex: 3;

}



/* 栗東市のあゆみ */

.timeline-container {

	position: relative;

}



.timeline-track {

	position: relative;

}



.timeline-track::before {

	content: "";

	position: absolute;

	top: 0;

	bottom: 0;

	left: calc(80px + 1.2rem);

	width: 4px;

	background-color: var(--normalcolor);

	z-index: 1;

}

.timeline-item {

	position: relative;

	margin-bottom: 1rem;

	display: flex;

	align-items: flex-start;

}

.timeline-item:last-child {

	margin-bottom: 0;

}



.timeline-item:nth-child(odd) .timeline__content {

	background-color:var(--lightcolor);

}

.timeline-item:nth-child(odd) .timeline__year-box {

	background-color:var(--lightcolor);

	height: stretch;

}



.timeline__year-box {

	padding: 6px 10px;

	font-weight: bold;

	font-size: 0.9rem;

	text-align: center;

	min-width: 50px;

	z-index: 2;

	margin-right: 1.2rem;

	min-width: 80px;

}

.timeline__node {

	position: absolute;

	top: 12px;

	left: calc(80px + 1.2rem - 6px);

	width: 16px;

	height: 16px;

	background-color: #fff;

	border: 2px solid #f39800;

	border-radius: 50%;

	z-index: 3;

}



.timeline__content {

	flex-grow: 1;

	padding: 15px;

	font-size: 0.9rem;

	line-height: 1.6;

	margin-left: 1.2rem;

}

#article-wrap .timeline__content p {

	margin: 0 0 8px 0;

}

#article-wrap .timeline__content p:last-child {

	margin-bottom: 0;

}



#city-history .photo{

	width: 33%;

}

#city-history .small{

	font-size: 0.9rem;

}



#city-history .photo-wrap{

    max-height: 200px;

    overflow: hidden;

}



.aiue{

	align-items: flex-start;

}





@media (max-width: 767px) {

	#city-history img{

		width: 100%;

	}

	#city-history h2{

		text-align: center;

	}

	#city-history .photo{

	width: 100%;

	}

	#city-history .photo-wrap{

    max-height: unset;

	}

}







/* 交通のまち・馬のまち */

#article-wrap #city-uma h3.fs20{

	font-size: 1.11rem;

}



#article-wrap .fs50 {

	font-size: 2.66rem;

}

#city-uma .small{

	font-size: 0.9rem;

}

#article-wrap #city-uma p{

	margin-bottom: 0;

}

#city-uma .img-wrap{

	aspect-ratio: 3 / 2;

}

#city-uma .img-wrap img{

	object-fit: cover;

    width: 100%;

    height: 100%;

}



@media (max-width: 767px) {

	#city-uma .img-wrap{

	aspect-ratio: unset;

	}

}







/* 選挙 */



.bg-wrap2::before {

	content: "";

    position: absolute;

    background: url(../img/topics/p6_bg-top.jpg) center center / cover;

    width: 100%;

    height: 38rem;

    top: 0;

    z-index: -1;

    left: 50%;

    transform: translateX(-50%);

    opacity: 0.3;

}



#election h2 {

	font-size: 2.77rem;	

}

#election p.mincho {

	font-size: 1.44rem;

	text-decoration: underline dotted;

	text-underline-offset: 4px;

	text-decoration-color:var(--darkcolor);

}

.balloon {

	position: relative;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 6.66rem;

	height: 6.66rem;

	aspect-ratio: 1 / 1;

	border-radius: 50%;

	background:var(--darkcolor);

	color: #fff;

	font-size: 1.44rem;

	text-align: center;

}



.balloon::after{

	content: "";

	position: absolute;

	bottom: -0.5rem;

	left: 50%;

	transform: translateX(-50%);

	width: 1.33rem;

	height: 1.33rem;

	background:var(--darkcolor);

	clip-path: polygon(25% 0, 50% 100%, 75% 0);

}

#election h3 img {

	width: 1.77rem;

	height: auto;

}



#election .sb{

	justify-content: space-between;

}





/* 期日前投票 */

#ealryvoting {

    padding-top: 3.33rem;

    margin-top: 3.33rem;

    border-top: 1px solid #ddd;

}

#ealryvoting h2 {

	font-size: 1.66rem;	

}

#ealryvoting h2 span {

	font-size: 1.77rem;	

}

#ealryvoting table th {

	background:var(--lightcolor);

	color: #000;

}

#election2 .img2 img {

	width: 50%;

}



/* 投票所 */



#place h2 span {

	font-size: 2rem;

}

#place h2 img {

	width: 1.77rem;

	height: auto;

}

#place ul {

	display: flex;

	flex-wrap: wrap;

	align-items: flex-end;

	gap: 1.44rem 2%; 

}

#place li {

	width: 32%;

}

#place li img {

	filter: drop-shadow(0 0 5px rgba(0,0,0,0.16));

}











/* 里親 */

#satooya .bg-wrap{

	background: unset;

	z-index: 2;

}

#satooya .bg-wrap::before {

    content: "";

    position: absolute;

    background: url(../img/topics/p10_bg-top.jpg) center center / cover;

    width: 100%;

    height: 10rem;

    top: 0px;

    z-index: -1;

    left: 50%;

    transform: translateX(-50%);

	opacity: 0.5;

}



#satooya .bg-wrap::after {

	content: "";

	position: absolute;

	background: url("../img/topics/p10_bg-bottom.jpg") center center/cover;

	width: 100%;

	height: 10rem;

	bottom: 0;

	z-index: -1;

	left: 50%;

	transform: translateX(-50%);

	opacity: 0.5;

}



#satooya h2 span{

	display: block;

	text-shadow: none;

}

#satooya h2{

	text-shadow: 

	2px  2px 0 #fff,

	-2px  2px 0 #fff,

	2px -2px 0 #fff,

	-2px -2px 0 #fff,

    4px  4px 8px rgba(0, 0, 0, 0.6);

}



#satooya .border-dot{

	background: #FFF;

}







/* 市営住宅入居募集 */



#nyukyo .dl1 dt{

	text-align: left;

	padding: 0;

}





/* 食品ロス */

#syokuhinros .bg-wrap{

	background: unset;

	z-index: 2;

}

#syokuhinros .bg-wrap::before {

    content: "";

    position: absolute;

    background: url(../img/topics/p11_bg-top.jpg) center center / cover;

    width: 100%;

    height: 10rem;

    top: 0px;

    z-index: -1;

    left: 50%;

    transform: translateX(-50%);

	opacity: 0.3;

}



#syokuhinros .bg-wrap::after {

	content: "";

	position: absolute;

	background: url("../img/topics/p11_bg-bottom.jpg") center center/cover;

	width: 100%;

	height: 10rem;

	bottom: 0;

	z-index: -1;

	left: 50%;

	transform: translateX(-50%);

	opacity: 0.3;

}



#article-wrap.topics-wrap #syokuhinros h3{

    padding: 0.1em 0.5em;

    color: #fff;

    background-image: linear-gradient(to right, #ce8d1e, transparent);

    background-repeat: no-repeat;

    background-position: bottom;

	margin-bottom: 1.33rem;

}



#syokuhinros .dl1 dt {

    width: 16%;

    padding: 0 1rem;

}

#syokuhinros .dl1 dd {

    padding: 0 1rem;

    width: 84%;

}

@media (max-width: 767px) {

	#syokuhinros .dl1 dt {

    width: 33%;

	}

	#syokuhinros .dl1 dd {

		padding: 0 1rem;

		width: 100%;

	}

}











/* 決算 */

#kessan .bg-wrap{

	    background-image: linear-gradient(180deg, #ffebcf 0%, rgb(255 255 255) 25%, rgb(255 255 255) 90%,#ffebcf 100%);

}

#kessan h2 span{

	display: block;

}



#kessan .bg-gray{

	background: #666;

}





#kessan .dl1 dt {

    width: 22%;

}



#kessan h3,

#kessan h4{

	padding: 0 1rem;

}



@media (max-width: 767px) {

	#article-wrap #kessan h2 {

    font-size: 2rem;

	}

	#kessan .dl1 dt{

		width: 100%;

	}

}











.qr-wrap a[href^="tel:"] {

	text-decoration: none;

	color: unset;

}



@media (max-width: 767px) {

	.qr-wrap a[href^="tel:"] {

		text-decoration: underline;

		color: var(--normalcolor);

	}

}

.w30 {

    width: 30%;

}

.ml-auto {

	margin-left: auto;

}



/* --　介護保険 p13 --*/

#kaigohoken th:first-child {

	width: 50%;

}

#kaigohoken .bg-wrap::before {

	content: "";

    background: url(../img/topics/p13_bg1.png) no-repeat center center / cover;

    position: absolute;

    top: -1%;

    left: 50%;

    width: 30%;

    aspect-ratio: 1230 / 391;

    transform: translateX(-50%);

}



/* --　警察 p13 --*/

#police h2 {

	border-left: 4px solid var(--normalcolor);

    border-right: 4px solid var(--normalcolor);

	padding: 0.66rem;

}



/* --　栗っこ p14 --*/



.en-name {

	margin-left: auto;

	font-size: 1rem;

}

#rittokko .circle {

    width: 3rem;

    height: 3rem;

}



/* --　大宝西 p15 --*/



#daihonishi .bg-wrap {

	background: url("../img/topics/p15_bg1.jpg") no-repeat center center/cover;

}

#daihonishi h2 {

	justify-content: center;

}

#daihonishi h2 span span {

	border-bottom: 1px solid;

}



.keihatsusakuhin span {

	font-weight: 500;

	font-size: 1rem;

}



















/* --　裏表紙 p16 --*/



.stampinner{

	border:  2px solid #0cb14b;

}



#stamp h2{

	color: #0cb14b;

}



#stamp h3{

	background: #0cb14b;

	display: inline-block;

	padding: 2px 10px;

}



#stamp .qr-wrap{

	background: #d6ebd4;

	padding: 20px;

}



#stamp .price{

	color: #0cb14b;

	font-size: 1.88rem;

	font-weight: bold;

}



#stamp .inline-flex-right{

	text-align: center;

}

#stamp .inline-flex-right a{

	color: #0cb14b;

}

.stamp-1st{

	width: 100%;

}

.stamp-1st p{

	font-size: 1.2rem;

	color: var(--normalcolor);

}



.stamp-1st .flex{

	justify-content: center;

	align-items: center;

}







#kizou h3{

	color: #005bab;

    border-bottom: 2px solid;

}