/* 
ホーム:共通レイアウト
#home01 セクション：お知らせ
 重要なお知らせ
 新着情報／イベント・募集
 お役立ち情報からさがす
#home02　セクション：ピックアップ
#home03　セクション：いざ・検索
 いざというときに
 いざというときに-2
 情報を検索する
#home04　セクション：デジタルサービス
#home05　セクション：紀の川市について
 人口世帯数
 紀の川市の施設案内
 SNS
#home06 セクション：広告
-------------------------------*/
/* ホーム:共通レイアウト
-------------------------------*/

@media print,screen and (min-width:769px) {
 section[id^="home0"]{padding-top: 60px; padding-bottom: 50px;}
}
/* #home01 セクション：お知らせ
-------------------------------*/
#home01{ position: relative; overflow: hidden; background: url("../images/home/bg_sec1_b.png") no-repeat -170px -80px; background-size: 400px auto ; padding-top: 50px; padding-bottom: 30px; z-index: 2;}
#home01::after{content: ""; position: absolute; background: url("../images/home/bg_sec1_a.png") no-repeat 0 bottom; 
 background-size: contain; height: 255px; width: 214px; right: -100px; top: -170px; z-index: -1;}
@media print,screen and (min-width:769px) {
 #home01{background-position: -380px -220px; background-size:contain; padding-top: 100px;}
 #home01::after{ height: 510px; width: 428px; right: -120px; top: -240px;}
}
#home01.inverse-black,
#home01.inverse-blue{background: none;}

/* 重要なお知らせ */
#boxEmergency{	padding: 0;	margin: 0px auto 40px;	background: #FFD5D8; color: #3E3026;	border-radius: 5px;	border: 2px solid #B40F0F;	display: flex; flex-direction: column; flex-wrap: wrap; box-shadow: 0 3px 6px rgba(0,0,0,.16);}
#emMidashi{display: flex; justify-content: center; align-items: center;}
#boxEmergency h2{	line-height: 1;	font-size: 137.5%;/*22px*/ margin: 0 ; position: relative; padding:20px 0 10px 40px; display: inline-block; text-align: center; background: url("../images/ico_info.svg") no-repeat 0 15px; background-size: 28px 28px;}
#boxEmergency #emBox{background-color: #FFF; color: #3E3026; border: 1px solid #F5F5F5; padding: 20px ;	margin: 10px;}

@media print,screen and (min-width:769px) {
 #boxEmergency{flex-direction: row;	border-radius: 22px; display: flex; flex-wrap: nowrap;	margin: 0px auto 80px;	}
 #emMidashi{max-width: 240px; width: 100%;	}
 #boxEmergency h2{	padding:8px 0 8px 65px; background-position: 20px 50%; background-size: 35px 35px; margin: 20px 0 20px 0;}
 #boxEmergency #emBox{ margin: 20px; font-size: 112.5%; border: none; border-radius: 5px; padding: 20px 30px; width: 100%;}
 #boxEmergency #emBox *:last-child{margin-bottom: 0;}
}

/* 新着情報／イベント・募集 */
#home01 .col2 li a{background-color: transparent; color: #3E3026;}
.post-date{ display: block; width: 100%; color: #17820B;background-color: transparent;}
#infoBox,#eventBox{display: inline-block; width: 100%; margin-bottom: 30px;}
#infoBox ul,#eventBox ul{width: 94%; margin: 0 auto 20px; max-height: 380px; overflow-y: auto; color: #3E3026; background-color: #FFF;}
#infoBox li,#eventBox li{border-bottom:1px dotted #BCC2C8; padding-top: 10px; padding-bottom: 10px; margin-bottom: 0;}
#infoBox ul li::after,#eventBox ul li::after{content: none !important;}
.topicsLink a{ background-color: #F5F5F5; color: #3E3026;  border: 2px solid #17820B; display: block; font-weight: 700; text-align: center; padding: 5px 10px 5px 30px; border-radius: 5px; text-decoration: none; width: 200px; margin:0 auto; }
.topicsLink a:hover{ background-color:#E8F7D2; color: #3E3026;}
.topicsLink a span{position: relative;}
.topicsLink a span::before{content: ""; position: absolute; top: 0; bottom: 0; left: -20px; margin: auto;	width: 10px;	height: 10px;	border-top: 2px solid #17820B;	border-right: 2px solid #17820B;	-webkit-transform: rotate(45deg);	transform: rotate(45deg);}
@media print,screen and (min-width:769px) {
 #infoArea{margin-bottom: 80px;}
}

/* お役立ち情報からさがす */
.helpfulArea{margin: 0 auto 0px;}
.helpfulArea li,.helpfulArea li a{ color: #036D9C; background-color: #D7F0FB; border-radius: 10px; line-height: 1.5;}
.helpfulArea li{ border: 1px solid #036D9C;font-size: 112.5%; font-weight: 700; list-style: none;}
.helpfulArea li::after{content: none !important;}
.helpfulArea li a { display: flex; justify-content: center; align-items: center; height: 100%; padding:10px; text-decoration: none;}
.helpfulArea li a:hover{ background-color: #E8F7D2; color: #036D9C; text-decoration: underline;}
@media print,screen and (min-width:769px) {
 .helpfulArea li{margin-bottom: 20px;}
 .helpfulArea li a { padding:10px 20px;}
}

/* #home02　セクション：ピックアップ
-------------------------------*/
#home02{ padding-bottom: 20px; background: #E8F7D2; color: #3E3026;}
#home02 .ulImg{margin-bottom: 0px; position: relative; z-index: 10;}
#home02.inverse-black .ulImg li::after,
#home02.inverse-blue .ulImg li::after{content: none !important;}
@media print,screen and (min-width:769px) {
 #home02{ position: relative; z-index: 1; padding-top: 40px;}
 #home02 .ulImg.bnr3 li{margin-bottom: 30px;}
 #home02::after{content: ""; position: absolute; background: url("../images/home/bg_sec2.png") no-repeat 0 bottom; 
 background-size: contain; height: 233px; width: 268px; right: -20px; top: -80px;}
 #home02.inverse-black,
 #home02.inverse-blue{z-index:0;}
}


/* #home03　セクション：いざ・検索
-------------------------------*/
#home03{ margin-bottom: 40px; }
#home03 #keywordInner{ background:#F5F5F5; color: #3E3026; border-radius: 20px; box-shadow: 0 3px 6px rgba(0,0,0,.16); padding:1px 30px; }
#keywordInner.inverse-black,
#keywordInner.inverse-blue{border:2px solid #FFF !important;}
/* いざというときに */
#preparation {margin-bottom: 0;}
#preparation li{ border-radius: 10px; background-color: #FFFAD6; color: #3E3026; position: relative; line-height: 1.4; margin-bottom: 20px;}
#preparation a{ display: block; position: relative; z-index: 1; width: 100%; height: 100%; padding: 100px 10px 20px; text-align: center; background-color: transparent; color: #3E3026;}
#preparation a:hover{ text-decoration: none;}
#preparation li img:first-child{width: 80px; height: auto; position: absolute; top:10px; left: 0; right: 0; margin: auto;}

/* いざというときに-2 */
#preparation2 li,#preparation2 li a{background-color: #D7F0FB; color: #3E3026; letter-spacing: -1px; border-radius: 10px; line-height: 1.5;}
#preparation2 li{ background-color: #D7F0FB; color: #3E3026; font-weight: 700; margin-bottom: 20px; list-style: none; box-shadow: 0 3px 6px rgba(0,0,0,.16);}
#preparation2 li a { display: flex; align-items: center; justify-content: center; height: 100%; padding:12px 10px; }
#preparation2 li a:hover{ background-color: #E8F7D2; color: #3E3026; text-decoration: none;}
@media print,screen and (max-width:480px) {
 #home03 #keywordInner{padding:10px; }
 #preparation2 li{ width: 100%; margin-bottom: 10px;}
 #preparation2 li a {padding: 15px 10px;}
}
#preparation a.inverse-black,
#preparation a.inverse-blue{background-color: transparent !important; color: #FFF;}
#home03.inverse-black li,
#home03.inverse-blue li{border:2px solid #FFF !important;}
#home03.inverse-black li::after,
#home03.inverse-blue li::after{content: none !important;}

/* 情報を検索する */
#home03 .searchBox{display: inline-block; width: 100%;}
#home03 .gsc-search-box{ border-width: 2px !important; }
#home03 .gsc-input{background-position: 10px 55% !important; height: 100% !important;}
@media print,screen and (min-width:769px) {
 #home03 .searchBox,
 #home03 .gsc-input-box,
 #home03 .gsc-search-button-v2{ height:60px !important;}
 #home03 input.gsc-input {padding:15px 10px !important; font-size: 125% !important;}
 #home03 .searchBox table td.gsc-search-button { width: 60px !important; border-left: 1px solid #17820B !important;}
}

/* #home04　セクション：デジタルサービス
-------------------------------*/
#home04{background: url("../images/bg_dot.svg") #FFFAD6; color: #3E3026; padding: 30px 0 0;}
#degitl.btnList{ font-size: 112.5%;}
#home04.inverse-black li::after,
#home04.inverse-blue li::after{content: none !important;}
@media print,screen and (min-width:769px) {
 #degitl.btnList li{margin-bottom: 30px;}
}
@media print,screen and (max-width:480px) {
 #home04{ padding-top: 0;}
}
#home04.inverse-blue,
#home04.inverse-black{ background-image: none;}

/* #home05　セクション：紀の川市について
-------------------------------*/
#home05{padding:30px 0 0;}
@media print,screen and (min-width:769px) {
 #home05{margin-bottom: 50px;}
}
#home05 #kohoBox{flex-wrap: nowrap; margin-bottom: 20px;}
/*アイコン付きリスト*/
.aboutList{ margin:0 !important ;}
.aboutList li{display: flex;align-items: center; justify-content: space-between; font-weight: 500;margin: 0 0 15px 0; list-style: none;position:relative; border: 2px solid #17820B; background: #FFF; color: #3E3026; line-height: 1.2; min-height: 84px;}
.aboutList a{display: flex; align-items: center; justify-content: flex-start; height: 100%; padding: 5px 90px 5px 15px; width: 100%; position: relative; z-index: 1; text-align: left;}
.aboutList a:hover{background: none;}
.aboutList li:hover{background: #E8F7D2;color: #036D9C; }
.aboutList a.inverse-black,
.aboutList a.inverse-blue{color: #FFF; background-color:transparent !important;}
.inverse-black .aboutList li,
.inverse-blue .aboutList li{color: #FFF;background-color: transparent;}
.aboutList li img:first-child{position: absolute; top: 0; right: 5px; bottom: 0; margin: auto; width: 80px !important; height: 70px !important; object-fit: cover; border-radius: 5px;}
.aboutList a[href="#"]{pointer-events: none;}

.aboutList2 li{ font-weight: 500;}
.aboutList2 a{ display: block; text-align: left; padding: 5px 10px 5px 35px; position: relative;}
.aboutList2 a::before{content: ""; position: absolute; top: 0; bottom: 0; left: 15px; margin: auto;	width: 10px;	height: 10px;	border-top: 2px solid #17820B;	border-right: 2px solid #17820B;	-webkit-transform: rotate(45deg);	transform: rotate(45deg);}
.aboutList.inverse-black li::after,
.aboutList.inverse-blue li::after,
.aboutList2.inverse-black li::after,
.aboutList2.inverse-blue li::after{content: none !important;}

/* 広報紀の川 */
#kohoBox{ padding: 0 20px 20px 20px;}
#kohoImg{ padding: 30px 10px 0 0;}
#kohoImg img {max-width: 100px; height: auto;}
@media print,screen and (min-width:769px) {
 #kohoBox{ flex-wrap: nowrap; padding: 0 30px 30px 30px;}
 #kohoImg{ padding: 30px 30px 0 0;}
 #kohoImg img {max-width: 165px;}
 #kohoTxt{ width: 100%;}
}

/* 人口世帯数 */
#boxPopulation{ position: relative; padding:0 10px 30px;}
@media print,screen and (min-width:769px) {
 #boxPopulation{ padding:0 20px 30px;}
}
#boxPopulation h3 { margin-bottom:10px;}
#boxPopulation h3 + p{ text-align: center; font-size: 87.5%;}
#boxCity{display: flex; gap:2%; flex-wrap: wrap; margin: 0; }
#boxCity li {display: flex; justify-content: space-between; align-items: center; padding: 5px 0 5px 0px; margin:0 0 5px 0; white-space: nowrap; list-style: none; position: relative; width: 49%;}
#boxCity #ico_population{width: 100%;}
#boxCity li .txtBox{ border-bottom: 1px dashed #17820B; margin-left: 5px; width: 100%;}
#boxCity li .txt{}
#boxCity li::after{content: none !important;}
#boxCity li::before{	content: "";	position: absolute;	top:2px;	left:2px;	width: 30px;	height: 30px;}
#boxCity #ico_population::before{ background: url("../images/home/ico_popuration.svg") no-repeat 0 0;}
#boxCity #ico_male::before{ background: url("../images/home/ico_male.svg") no-repeat 0 0;}
#boxCity #ico_female::before{ background: url("../images/home/ico_female.svg") no-repeat 0 0;}
#boxCity #ico_hold::before{ background: url("../images/home/ico_setai.svg") no-repeat 0 0;}
#boxCity #ico_area::before{ background: url("../images/home/ico_area.svg") no-repeat 0 0;}
#boxCity [id^="ico_"]{padding-left: 30px;}

/* 紀の川市の施設案内 */
#facility{width: 96%; margin: 0 auto;}
#facility .lArea{ width: 65%;}
#facility .rArea{ width: 35%;}
#facility .rArea li {line-height: 1.5;}
@media print,screen and (min-width:769px) {
}

/* SNS */
#boxSNS{ margin-top: 40px; font-weight: 700;}
#boxSNS li{background: #FFFAD6; color:#3E3026; font-weight: 700;}
#boxSNS li:hover{background: #E8F7D2; color:#3E3026;}
#boxSNS a{padding: 10px 10px 10px 60px;}
#boxSNS li img:first-child{right: auto; left: 10px; width: 40px !important; height: 40px !important; border-radius: 0;}

@media print,screen and (min-width:769px) {
 #boxSNS{margin-bottom: 50px;}
 #boxSNS a{padding: 10px 10px 10px 75px;}
 #boxSNS img{right: auto; left: 20px;}
}


/* #home06　セクション：公告
-------------------------------*/
#home06{ padding-top: 30px; padding-bottom: 0; background: #F5F5F5; color:#3E3026;}
#home06 .kokokuMidashi {gap:10px; margin-bottom: 20px;}
#home06 .kokokuMidashi h2{padding: 0; margin: 0; background-color:transparent; color:#3E3026; line-height: 1;}
#home06 .kokokuMidashi p{display: flex; align-items: center; margin-bottom: 0; line-height: 1.5;}
#home06 #koukoku{gap:2.631578947%;}
#home06 #koukoku li{ justify-content: flex-start; width:48.5%;}
@media print,screen and (min-width:769px) {
 #home06{ padding-top: 50px;}
 #home06 .kokokuMidashi {gap:30px; margin-bottom: 30px;}
 #home06 #koukoku{gap: 6%; /*justify-content: space-between;*/}
 #home06 #koukoku li{margin-bottom: 30px; width: auto;}
}
@media print,screen and (min-width:1221px) {
#home06 #koukoku{gap: 11.65%;}
}