/*=======================================================================*/
/*
Top.css
トップページ CSS
*/
/*=======================================================================*/

#body--index_20230623 #ss-preview {
 display: none; 
}

/*=======================================================================*/
/* ビルボードエリア */
/*=======================================================================*/

#BillBoard {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #FBF9EC;
}

#BBWrap {
	width: 1200px;
	margin: 0 auto;
}

#BBWrap:before, #BBWrap:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

#BBWrap:after {
	clear: both;
}

/* メインスライドショー */

#PhotoSlide {
	position: relative;
	width: 950px;
	float: left;
	margin: 0;
	box-sizing: border-box;
}

#PhotoSlide.Renew2023 {
  width: 100%;
  height: 450px;
  float: none;
}

#PhotoSlide.Renew2023 .bx-wrapper,
#PhotoSlide.Renew2023 .bx-viewport{
  height: 450px;
}

#PhotoSlide h3 {
	position: absolute;
	background: url(../../img/citizen/pict_ms_back.png) 0 0 no-repeat;
	text-indent: -9800px;
	bottom: -10px;
	left: 20px;
	z-index: 500;
	width: 350px;
	height: 45px;
	display: block;
}
#PhotoSlide .icon-new-tab{display : none;}
#PhotoSlide .SLDtitle{
	background-color: rgba(0,0,0,0.3);
	position: absolute;
	bottom: 9px;
	padding: 10px 0px;
	width: 100%;
	color: #fff;
	text-align: right;
}
#PhotoSlide .SLDtitle span{
	width : 1em;
	display: inline-block;
}

/* スライドショーナビ */

.feed-prev-btn {
	background-image: url(../../img/citizen/btn_prev.png);
	top: 50%;
	left: 50px;
	position: absolute;
	z-index: 500;
}

.feed-next-btn {
	background-image: url(../../img/citizen/btn_next.png);
	top: 50%;
	right: 50px;
	position: absolute;
	z-index: 500;
}

.feed-prev-btn .bx-prev {
	width: 100%;
	display: block;
	text-indent: -9800px;
}

.feed-next-btn .bx-next {
	width: 100%;
	display: block;
	text-indent: -9800px;
}

.navi-btn {
	margin: -17px 0 0 0;
	width: 20px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center center;
}

.navi-btn a {
	width: 20px;
	height: 40px;
}

#PickUpSlide h2 {
	display: block;
	width: 100%;
	padding: 5px;
	text-align: center;
  	color: #fff;
	background: #444444 url(../../img/citizen/ttl_index_bb_pickup.png) center center no-repeat;
	text-indent: -9800px;
	box-sizing: border-box;
}

/* ピックアップスライドショー */

#PickUpSlide {
	position: relative;
	width: 250px;
    height: 450px;
	float: left;
	margin: 0;
	box-sizing: border-box;
	background: #333333;
}

#PhotoSlide .cms-pages {
	width: 100%;
}

#PhotoSlide .cms-pages img,
#PickUpSlide .cms-pages img {
	max-width: 100%;
	height: auto;
	border: none;
}

#PhotoSlide.Renew2023 .cms-pages img {
  width: 100%;
  height: 450px;
  -o-object-fit: cover;
  object-fit: cover;
}

.puSlideConts p {
    min-width: 230px;
    height: 130px;
    overflow: hidden;
    background-color: #676767;
  position: relative;
}
body .puSlideConts p img {
    min-width: 220px;
    height : auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}


#PslideWrap {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 30px 10px;
    height : 400px;
}

.puSlideConts h3 {
	font-size: 0.9em;
	line-height: 1.6em;
}

.puSlideConts a {
	color: #FFF;
}

/* ピックアップスライドショーナビ */

.feed-ps-prev-btn {
	background-image: url(../../img/citizen/btn_pu_prev.png);
	top: 10px;
	left: 50%;
	position: absolute;
	z-index: 500;
}

.feed-ps-next-btn {
	background-image: url(../../img/citizen/btn_pu_next.png);
	left: 50%;
	bottom: 10px;
	position: absolute;
	z-index: 500;
}

.feed-ps-prev-btn .bx-prev {
	width: 100%;
	display: block;
	text-indent: -9800px;
  color : #fff;
}

.feed-ps-next-btn .bx-next {
	width: 100%;
	display: block;
	text-indent: -9800px;
    color : #fff;
}

.navi-ps-btn {
	margin: 0 0 0 -12px;
	width: 25px;
	height: 10px;
	background-repeat: no-repeat;
	background-position: center center;
}

.navi-ps-btn a {
	width: 25px;
	height: 10px;
}


/*2023改修・ピックアップスライダー*/

#SPAWrap.FvPickUpSlide {
  position: relative;
  display: block;
  padding: 10px;
  box-sizing: border-box;
  background: rgba(255,255,255,0.6);
  border-radius: 5px;
}

.swiperContainer-idxPickUp {
  position: relative;
  margin: 0 auto;
}

.swiper-infopickup {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.swiperContainer-idxPickUp .swiper__btnWrapper {
  width: 100%;
  bottom: 50px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 3.1067961165%;
  column-gap: 3.1067961165%;
  row-gap: 70px;
}

.card {
  width: 100%;
}

.card__thumb {
  display: block;
  aspect-ratio: 32/17;
  width: 100%;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  overflow: hidden;
  transition: opacity 0.3s;
  margin-bottom: 15px;
}

.card__thumb.square {
  aspect-ratio: 32/24;
}

.card__thumb>img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.3s;
}

.card__thumb>img:hover {
  opacity: 0.7;
  transform: scale(1.08, 1.08);
}

.card figcaption a {
  color: #333;
  font-weight: bold;
  transition: transform 0.3s;
  letter-spacing: -1px;
}

.card figcaption a:hover {
  color: #a99727;
}

/* 前へ次への矢印 */
.swiper__btnWrapper {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  inset: 0;
  margin: auto;
  
}

.swiper-button-prev,
.swiper-button-next {
  background-image: none !important;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-top: 0;
  position: relative;
  inset: auto;
  transition: background-color 0.3s;
    z-index: 1000;
}

.swiper-button-prev,
.swiper-button-prev02 {
  left: -30px;
  
}

.swiper-button-next,
.swiper-button-next02 {
  right: -25px;
}

.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
  
}

.swiper-button-prev:focus-visible::after,
.swiper-button-next:focus-visible::after {
  
}

@media (hover: hover) and (pointer: fine) {

  .swiper-button-prev:hover,
  .swiper-button-next:hover {
    
  }

  .swiper-button-prev:hover::after,
  .swiper-button-next:hover::after {
    border-color: #fff;
  }
}

.swiper-button-prev:after,
.swiper-button-next:after {
  content: "";
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-right: 4px solid #D6C55A;
  border-top: 4px solid #D6C55A;
  transition: border-color 0.3s;
}

.swiper-button-prev:after {
  transform: rotate(-135deg);
  margin-left: 6px;
}

.swiper-button-next::after {
  transform: rotate(45deg);
  margin-right: 6px;
}

.swiper-button-prev02,
.swiper-button-next02 {
  position: relative;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 30px;
  cursor: pointer;
  z-index: 1000;
}

.swiper-button-prev02::before,
.swiper-button-prev02::after,
.swiper-button-next02::before,
.swiper-button-next02::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

.swiper-button-prev02::before,
.swiper-button-next02::before {
	width: 24px;
	height: 24px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #D6C55A;
}

.swiper-button-next02::after {
  left: 6px;
  width: 6px;
  height: 6px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.swiper-button-prev02::after {
  left: 9px;
  width: 6px;
  height: 6px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg); 
}

/*=======================================================================*/
/* サイト選択エリア */
/*=======================================================================*/

#SitePickArea {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background: url(../../img/citizen/back_top_stripe.png);
	z-index: 0;
}

#SPKaraArea {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 70px;
	background: #D6C55A;
}

#SPABack {
	position: relative;
	z-index: 10;
	width: 100%;
	margin: 0;
	padding: 25px 0;
	background-image: url(../../img/citizen/back_top_spa.png),
					  url(../../img/citizen/back_top_spa_bottom.png);
	background-repeat: no-repeat,
					   repeat-x;
	background-position: center bottom 70px,
						 left bottom;
}

#SPAWrap {
	position: relative;
	z-index: 100;
	width: 1200px;
	/*width: 960px;*/
	margin: 25px auto 50px auto;
}
#SPAWrap.SPAWrapNew{
	position: relative;
	z-index: 100;
	width: auto;
	margin: 25px auto;
	display: flex;
	justify-content: center;
}

#SPAWrap:before, #SPAWrap:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

#SPAWrap:after {
	clear: both;
}

ul#SPAWrap li {
	display: block;
	width: 210px;
	margin: 0 15px;
	float: left;
}

ul#SPAWrap li a {
	display: block;
	width: 210px;
	height: 190px;
	text-indent: -9800px;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

ul#SPAWrap li a:hover {
	margin-top: -10px;
}

ul#SPAWrap li#map a {	background: url(../../img/citizen/btn_top_spa_map_off.png) 0 0 no-repeat;	}
ul#SPAWrap li#kids a {	background: url(../../img/citizen/btn_top_spa_kids_off.png) 0 0 no-repeat;	}
ul#SPAWrap li#sight a {	background: url(../../img/citizen/btn_top_spa_sight_off.png) 0 0 no-repeat;	}
ul#SPAWrap li#iju a {	background: url(../../img/citizen/btn_top_spa_iju_off.png) 0 0 no-repeat;	}
ul#SPAWrap li#promo a {	background: url(../../img/citizen/btn_top_spa_promo_off.png) 0 0 no-repeat;	}

ul#SPAWrap li#map a:hover {	background: url(../../img/citizen/btn_top_spa_map_on.png) 0 0 no-repeat;	}
ul#SPAWrap li#kids a:hover {	background: url(../../img/citizen/btn_top_spa_kids_on.png) 0 0 no-repeat;	}
ul#SPAWrap li#sight a:hover {	background: url(../../img/citizen/btn_top_spa_sight_on.png) 0 0 no-repeat;	}
ul#SPAWrap li#iju a:hover {	background: url(../../img/citizen/btn_top_spa_iju_on.png) 0 0 no-repeat;	}
ul#SPAWrap li#promo a:hover {	background: url(../../img/citizen/btn_top_spa_promo_on.png) 0 0 no-repeat;	}

/*英語*/
html:lang(en)  ul#SPAWrap li#map a {	background: url(../../img/citizen/btn_top_spa_map_off_multi.png) 0 0 no-repeat;	}
html:lang(en) ul#SPAWrap li#kids a {	background: url(../../img/citizen/btn_top_spa_kids_off_multi.png) 0 0 no-repeat;	}
html:lang(en) ul#SPAWrap li#sight a {	background: url(../../img/citizen/btn_top_spa_sight_off_multi.png) 0 0 no-repeat;	}
html:lang(en) ul#SPAWrap li#iju a {	background: url(../../img/citizen/btn_top_spa_iju_off_multi.png) 0 0 no-repeat;	}
html:lang(en) ul#SPAWrap li#promo a {	background: url(../../img/citizen/btn_top_spa_promo_off_multi.png) 0 0 no-repeat;	}

html:lang(en) ul#SPAWrap li#map a:hover {	background: url(../../img/citizen/btn_top_spa_map_on_multi.png) 0 0 no-repeat;	}
html:lang(en) ul#SPAWrap li#kids a:hover {	background: url(../../img/citizen/btn_top_spa_kids_on_multi.png) 0 0 no-repeat;	}
html:lang(en) ul#SPAWrap li#sight a:hover {	background: url(../../img/citizen/btn_top_spa_sight_on_multi.png) 0 0 no-repeat;	}
html:lang(en) ul#SPAWrap li#iju a:hover {	background: url(../../img/citizen/btn_top_spa_iju_on_multi.png) 0 0 no-repeat;	}
html:lang(en) ul#SPAWrap li#promo a:hover {	background: url(../../img/citizen/btn_top_spa_promo_on_multi.png) 0 0 no-repeat;	}

/*簡体中文*/
html:lang(zh-cn)  ul#SPAWrap li#map a {	background: url(../../img/citizen/btn_top_spa_map_off_zh-cn.png) 0 0 no-repeat;	}
html:lang(zh-cn) ul#SPAWrap li#kids a {	background: url(../../img/citizen/btn_top_spa_kids_off_zh-cn.png) 0 0 no-repeat;	}
html:lang(zh-cn) ul#SPAWrap li#sight a {	background: url(../../img/citizen/btn_top_spa_sight_off_zh-cn.png) 0 0 no-repeat;	}
html:lang(zh-cn) ul#SPAWrap li#iju a {	background: url(../../img/citizen/btn_top_spa_iju_off_zh-cn.png) 0 0 no-repeat;	}
html:lang(zh-cn) ul#SPAWrap li#promo a {	background: url(../../img/citizen/btn_top_spa_promo_off_zh-cn.png) 0 0 no-repeat;	}

html:lang(zh-cn) ul#SPAWrap li#map a:hover {	background: url(../../img/citizen/btn_top_spa_map_on_zh-cn.png) 0 0 no-repeat;	}
html:lang(zh-cn) ul#SPAWrap li#kids a:hover {	background: url(../../img/citizen/btn_top_spa_kids_on_zh-cn.png) 0 0 no-repeat;	}
html:lang(zh-cn) ul#SPAWrap li#sight a:hover {	background: url(../../img/citizen/btn_top_spa_sight_on_zh-cn.png) 0 0 no-repeat;	}
html:lang(zh-cn) ul#SPAWrap li#iju a:hover {	background: url(../../img/citizen/btn_top_spa_iju_on_zh-cn.png) 0 0 no-repeat;	}
html:lang(zh-cn) ul#SPAWrap li#promo a:hover {	background: url(../../img/citizen/btn_top_spa_promo_on_zh-cn.png) 0 0 no-repeat;	}

/*繁體中文*/
html:lang(zh-tw)  ul#SPAWrap li#map a {	background: url(../../img/citizen/btn_top_spa_map_off_zh-tw.png) 0 0 no-repeat;	}
html:lang(zh-tw) ul#SPAWrap li#kids a {	background: url(../../img/citizen/btn_top_spa_kids_off_zh-tw.png) 0 0 no-repeat;	}
html:lang(zh-tw) ul#SPAWrap li#sight a {	background: url(../../img/citizen/btn_top_spa_sight_off_zh-tw.png) 0 0 no-repeat;	}
html:lang(zh-tw) ul#SPAWrap li#iju a {	background: url(../../img/citizen/btn_top_spa_iju_off_zh-tw.png) 0 0 no-repeat;	}
html:lang(zh-tw) ul#SPAWrap li#promol a {	background: url(../../img/citizen/btn_top_spa_promo_off_zh-tw.png) 0 0 no-repeat;	}

html:lang(zh-tw) ul#SPAWrap li#map a:hover {	background: url(../../img/citizen/btn_top_spa_map_on_zh-tw.png) 0 0 no-repeat;	}
html:lang(zh-tw) ul#SPAWrap li#kids a:hover {	background: url(../../img/citizen/btn_top_spa_kids_on_zh-tw.png) 0 0 no-repeat;	}
html:lang(zh-tw) ul#SPAWrap li#sight a:hover {	background: url(../../img/citizen/btn_top_spa_sight_on_zh-tw.png) 0 0 no-repeat;	}
html:lang(zh-tw) ul#SPAWrap li#iju a:hover {	background: url(../../img/citizen/btn_top_spa_iju_on_zh-tw.png) 0 0 no-repeat;	}
html:lang(zh-tw) ul#SPAWrap li#promo a:hover {	background: url(../../img/citizen/btn_top_spa_promo_on_zh-tw.png) 0 0 no-repeat;	}

/*韓国語*/
html:lang(ko)  ul#SPAWrap li#map a {	background: url(../../img/citizen/btn_top_spa_map_off_ko.png) 0 0 no-repeat;	}
html:lang(ko) ul#SPAWrap li#kids a {	background: url(../../img/citizen/btn_top_spa_kids_off_ko.png) 0 0 no-repeat;	}
html:lang(ko) ul#SPAWrap li#sight a {	background: url(../../img/citizen/btn_top_spa_sight_off_ko.png) 0 0 no-repeat;	}
html:lang(ko) ul#SPAWrap li#iju a {	background: url(../../img/citizen/btn_top_spa_iju_off_ko.png) 0 0 no-repeat;	}
html:lang(ko) ul#SPAWrap li#promol a {	background: url(../../img/citizen/btn_top_spa_promo_off_ko.png) 0 0 no-repeat;	}

html:lang(ko) ul#SPAWrap li#map a:hover {	background: url(../../img/citizen/btn_top_spa_map_on_ko.png) 0 0 no-repeat;	}
html:lang(ko) ul#SPAWrap li#kids a:hover {	background: url(../../img/citizen/btn_top_spa_kids_on_ko.png) 0 0 no-repeat;	}
html:lang(ko) ul#SPAWrap li#sight a:hover {	background: url(../../img/citizen/btn_top_spa_sight_on_ko.png) 0 0 no-repeat;	}
html:lang(ko) ul#SPAWrap li#iju a:hover {	background: url(../../img/citizen/btn_top_spa_iju_on_ko.png) 0 0 no-repeat;	}
html:lang(ko) ul#SPAWrap li#promo a:hover {	background: url(../../img/citizen/btn_top_spa_promo_on_ko.png) 0 0 no-repeat;	}

/*ポルトガル語*/
html:lang(pt)  ul#SPAWrap li#map a {	background: url(../../img/citizen/btn_top_spa_map_off_pt.png) 0 0 no-repeat;	}
html:lang(pt) ul#SPAWrap li#kids a {	background: url(../../img/citizen/btn_top_spa_kids_off_pt.png) 0 0 no-repeat;	}
html:lang(pt) ul#SPAWrap li#sight a {	background: url(../../img/citizen/btn_top_spa_sight_off_pt.png) 0 0 no-repeat;	}
html:lang(pt) ul#SPAWrap li#iju a {	background: url(../../img/citizen/btn_top_spa_iju_off_pt.png) 0 0 no-repeat;	}
html:lang(pt) ul#SPAWrap li#promo a {	background: url(../../img/citizen/btn_top_spa_promo_off_pt.png) 0 0 no-repeat;	}

html:lang(pt) ul#SPAWrap li#map a:hover {	background: url(../../img/citizen/btn_top_spa_map_on_pt.png) 0 0 no-repeat;	}
html:lang(pt) ul#SPAWrap li#kids a:hover {	background: url(../../img/citizen/btn_top_spa_kids_on_pt.png) 0 0 no-repeat;	}
html:lang(pt) ul#SPAWrap li#sight a:hover {	background: url(../../img/citizen/btn_top_spa_sight_on_pt.png) 0 0 no-repeat;	}
html:lang(pt) ul#SPAWrap li#iju a:hover {	background: url(../../img/citizen/btn_top_spa_iju_on_pt.png) 0 0 no-repeat;	}
html:lang(pt) ul#SPAWrap li#promol a:hover {	background: url(../../img/citizen/btn_top_spa_promo_on_pt.png) 0 0 no-repeat;	}

/*スペイン語*/
html:lang(es)  ul#SPAWrap li#map a {	background: url(../../img/citizen/btn_top_spa_map_off_es.png) 0 0 no-repeat;	}
html:lang(es) ul#SPAWrap li#kids a {	background: url(../../img/citizen/btn_top_spa_kids_off_es.png) 0 0 no-repeat;	}
html:lang(es) ul#SPAWrap li#sight a {	background: url(../../img/citizen/btn_top_spa_sight_off_es.png) 0 0 no-repeat;	}
html:lang(es) ul#SPAWrap li#iju a {	background: url(../../img/citizen/btn_top_spa_iju_off_es.png) 0 0 no-repeat;	}
html:lang(es) ul#SPAWrap li#promo a {	background: url(../../img/citizen/btn_top_spa_promo_off_es.png) 0 0 no-repeat;	}

html:lang(es) ul#SPAWrap li#map a:hover {	background: url(../../img/citizen/btn_top_spa_map_on_es.png) 0 0 no-repeat;	}
html:lang(es) ul#SPAWrap li#kids a:hover {	background: url(../../img/citizen/btn_top_spa_kids_on_es.png) 0 0 no-repeat;	}
html:lang(es) ul#SPAWrap li#sight a:hover {	background: url(../../img/citizen/btn_top_spa_sight_on_es.png) 0 0 no-repeat;	}
html:lang(es) ul#SPAWrap li#iju a:hover {	background: url(../../img/citizen/btn_top_spa_iju_on_es.png) 0 0 no-repeat;	}
html:lang(es) ul#SPAWrap li#promo a:hover {	background: url(../../img/citizen/btn_top_spa_promo_on_es.png) 0 0 no-repeat;	}


.heading02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 2em;
  color: #D6C55A;
  width: 40%;
  margin: 0 auto 10px auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1.8rem;
}

.heading02::before,
.heading02::after {
  content: '';
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 2px;
}

.heading02::before {
  margin-right: 10px;
  background: #D6C55A;
}
.heading02::after {
  margin-left: 10px;
  background: #D6C55A;
}



/*=======================================================================*/
/* 移住定住誘導バナー */
/*=======================================================================*/

#TopIjuBnr {
    position: relative;
    z-index: 100;
    width: 1200px;
    margin: 25px auto;
}

.bnr-iju-pc {
  display: block;
  max-width: 100%;
  margin: 10px auto;
  transition: 0.3s;
}

.bnr-iju-sp {
  display: block;
  width: 600px;
  height: auto;
  max-width: 100%;
  margin: 10px auto;
  transition: 0.3s;
}

#TopIjuBnr img {
  transition: 0.3s;
}

#TopIjuBnr img:hover,
.bnr-iju-pc:hover,
.bnr-iju-sp:hover {
  opacity: 0.5;
}

/*2023改修・SNSボタンエリア*/

#IdxSnsBlock {
    position: relative;
    z-index: 100;
    width: 1200px;
    margin: 25px auto;
}

.heading03 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  text-align: center;
}

.heading03::before,
.heading03::after {
  content: '';
  width: 70px;
  height: 3px;
  background-color: #096dc6;
}

.heading03::before {
  margin-right: 20px;
}
.heading03::after {
  margin-left: 20px;
}

ul.IdxSnsBlockWrap {
  width: 100%;
  margin: 2em 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

ul.IdxSnsBlockWrap li {
  width: calc(100% / 5 - 10px);
}

ul.IdxSnsBlockWrap li a {
  display: flex;
  align-items: center;
  border-radius: 5px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  font-weight: bold;
  color: #333;
  transition: 0.3s;
}

ul.IdxSnsBlockWrap li a.line-box { border: 2px solid #00B900; }
ul.IdxSnsBlockWrap li a.insta-box { border: 2px solid #CF2E92; }
ul.IdxSnsBlockWrap li a.fb-box { border: 2px solid #1877f2; }
ul.IdxSnsBlockWrap li a.youtube-box { border: 2px solid #DA1725; }
ul.IdxSnsBlockWrap li a.twitter-box { border: 2px solid #1DA1F2; }

ul.IdxSnsBlockWrap li a.line-box:hover { color: #00B900; background: rgba(0,185,0,0.3); }
ul.IdxSnsBlockWrap li a.insta-box:hover { color: #CF2E92; background: rgba(207,46,146,0.3); }
ul.IdxSnsBlockWrap li a.fb-box:hover { color: #1877f2; background: rgba(60,90,153, 0.3); }
ul.IdxSnsBlockWrap li a.youtube-box:hover { color: #DA1725; background: rgba(218,23,37,0.3); }
ul.IdxSnsBlockWrap li a.twitter-box:hover { color: #1DA1F2; background: rgba(29,161,242,0.3); }

ul.IdxSnsBlockWrap li a img {
  margin-right: 10px;
}


/*=======================================================================*/
/* メインコンテンツ */
/*=======================================================================*/

#TopMainConts {
	width: 1200px;
	margin: 20px auto;
}

#TopMainConts {
	position: relative;
	z-index: 100;
	width: 1200px;
	margin: 25px auto;
}

#TopMainConts:before, #TopMainConts:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

#TopMainConts:after {
	clear: both;
}

#LeftConts {
	width: 590px;
	margin: 0 10px 0 0;
	float: left;
}

#RightConts {
	width: 590px;
	margin: 0 0 0 10px;
	float: right;
}

/* 災害・防災情報 */
/*=======================================================================*/

#disaster {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 50px 0;
}

#disaster h2 {
	width: 100%;
	display: block;
	box-sizing: border-box;
	background: #E8CBC2;
	font-size: 1.0em;
	color: #333;
	padding: 10px;
}

#disaster .cms-pages p {
	padding: 10px;
}

#disaster ul {
	width: 100%;
	list-style: none;
	box-sizing: border-box;
	padding: 10px;
	/*height: 150px;*/
	overflow-x: hidden;
	overflow-y: auto;
}
#disaster .saigai li {
	/*display: none;*/
}
#disaster .saigai li.new {
	display: block;
}

#disaster ul li a {
	font-weight: bold;
	color: #e53935;
	text-decoration: underline;
	line-height: 1.8em;
}

#disaster ul li a:hover {
	color: #333333;
	text-decoration: none;
}

#disaster .contsWrap {
	width: 100%;
	display: block;
	box-sizing: border-box;
	background: #F3F3F3;
	border-left: 3px solid #E8CBC2;
	padding: 0;
	margin: 0;
}

.disLinkArea {
	width: 100%;
	text-align: center;
	padding: 10px 0;
}

.disLinkArea a {
	display: inline-block;
	text-align: center;
	width: 200px;
	padding: 10px;
	margin: 0 3px;
	color: #333;
	text-decoration: none;
	border: 2px solid #F8AC95;
	background: #F8AC95;
	font-size: 0.9em;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.disLinkArea a:hover {
	background: #FFF;
}

ul#EmrBtn {
	list-style: none;
	margin: 0;
	padding: 0;
	height: auto !important;
}

ul#EmrBtn:before, ul#EmrBtn:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

ul#EmrBtn:after {
	clear: both;
}

ul#EmrBtn li {
	float: left;
	width: 144px;
	border-right: 3px solid #FFF;
}

ul#EmrBtn li:last-child {
	border-right: none;
}

ul#EmrBtn li a {
	width: 100%;
	display: block;
	text-decoration: none;
	text-align: center;
	padding: 20px 0;
	background: url(../../img/citizen/back_top_emrBtn_off.png) 0 0 no-repeat;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

ul#EmrBtn li a:hover {
	background: url(../../img/citizen/back_top_emrBtn_on.png) 0 0 no-repeat;
}

ul#EmrBtn li a .emrBtnTxt {
	color: #333;
	padding: 10px 0 20px 0;
	font-size: 0.9em;
}

ul#EmrBtn li a:hover .emrBtnTxt {
	color: #FFF;
}


ul#EmrBtn li a .icon {
	display: block;
	font-size: 32px;
	color: #D66461 !important;
}

ul#EmrBtn li a:hover .icon {
	color: #FFF !important;
}

/* 新着情報タブ */
/*=======================================================================*/

#newsTabs {
	width: 100%;
}

nav.names {
	width: 100%;
	border-bottom: 3px solid #278376/*#51A499*/;
	margin: 0 0 20px 0;
}

nav.names a {
	color: #333;
	width: 40%;
	padding: 5px 10px;
	margin: 0 5px 0 0;
	display: inline-block;
	text-align: center;
	background: #EEEEEE;
}
.tabs20221130 nav.names a {
	width: 28%;
}

nav.names a:hover,
nav.names a.current {
	background: #278376/*#51A499*/;
	color: #FFF;
}

article.view h2 {
	display: none;
}
#newsTabs .pages.article-pages,
#newsTabs .pages.cms-pages{
	display: none;
}
#newsTabs .pages {
	width: 100%;
	height: 600px;
	padding: 5px;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: scroll;
  margin-bottom: 10px;
}

.pages article {
	width: 100%;
	margin: 0 0 10px 0;
}

.pages article:before, .pages article:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

.pages article:after {
	clear: both;
}

.pages time {
	display: block;
	float: left;
	width: 120px;
	margin: 0 10px 0 0;
	font-size: 0.9em;
}

.pages article h3 {
	display: block;
	float: left;
	width: 430px;
	margin: 0;
	font-size: 0.9em;
	font-weight: bold;
}

.pages article a {
	color: #0047B2;
}
.pages article a:hover {
	text-decoration: underline;
}

#newsTabs .more,
#newsTabs .rss{
    display: inline-block;
    text-align: center;
    background: #278376;
    color: #FFF;
    width: 100px;
    margin: 0 5px;
    padding: 5px;
    border: 1px solid #CCC;
    border-radius: 5px;
    box-sizing: border-box;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
#newsTabs .more:hover,
#newsTabs .rss:hover{
    background: #FFF;
    color: #278376;
}

#moreEvent a{
    display: inline-block;
    text-align: center;
    background: #278376;
    color: #FFF;
    width: 100%;
    margin: 0 5px 10px 5px;
    padding: 5px;
    border: 1px solid #CCC;
    border-radius: 5px;
    box-sizing: border-box;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
#moreEvent a:hover,
#newsTabs .rss:hover{
    background: #FFF;
    color: #278376;
}




/*イベント情報*/
#top-event-view p{
  width : 120px;
  height: 80px;
  overflow: hidden;
  float: left;
  margin-right: 10px;
}
#top-event-view img{
  width : 120px;
  height : auto;
}
#top-event-view time{
  display: inline;
  float: none;
  width: auto;
}

#top-event-view article{
  padding-bottom: 10px;
  border-bottom-color: #ccc;
  border-bottom-style: dotted;
  border-bottom-width: 2px;
}

/* 目的のシーンから選ぶ */
/*=======================================================================*/

#Lifescene {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 30px 0;
}

#Lifescene h2 {
	width: 100%;
	display: block;
	box-sizing: border-box;
	background: #96BFDE;
	font-size: 1.0em;
	color: #333;
	padding: 10px;
}

#Lifescene .contsWrap {
	width: 100%;
	display: block;
	box-sizing: border-box;
	background: #FFF;
	border-left: 3px solid #96BFDE;
	padding: 0;
	margin: 0;
}

ul.LSBtn {
	list-style: none;
	margin: 0;
	padding: 0;
	height: auto !important;
	border-bottom: 1px solid #DDD;
}

ul.LSBtn:before, ul.LSBtn:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

ul.LSBtn:after {
	clear: both;
}

ul.LSBtn li {
	float: left;
	width: 145px;
	border-right: 1px solid #DDD;
}

ul.LSBtn li:last-child {
	width: 148px;
	border-right: 1px solid #DDD;
}

ul.LSBtn li a {
	width: 100%;
	display: block;
	text-decoration: none;
	text-align: center;
	padding: 20px 0;
	background: transparent;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

ul.LSBtn li a:hover {
	background: #679BBA;
}

ul.LSBtn li a .LsBtnTxt {
	color: #333;
	padding: 10px 0 0 0;
	font-size: 0.9em;
	display: block;
}

ul.LSBtn li a:hover .LsBtnTxt {
	color: #FFF;
}


ul.LSBtn li a .icon {
	display: block;
	font-size: 40px;
	color: #679BBA !important;
}

ul.LSBtn li a:hover .icon {
	color: #FFF !important;
}

/* その他コンテンツボタン */
/*=======================================================================*/

#BtnContsArea {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 30px 0;
}

ul.etcContsBtn {
	width: 100%;
	margin: 0 0 10px;
	list-style: none;
}

ul.etcContsBtn:before, ul.etcContsBtn:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

ul.etcContsBtn:after {
	clear: both;
}

ul.etcContsBtn li {
	width: 290px;
	padding: 0;
	float: left;
}

ul.etcContsBtn li .icon-new-tab{
	display : none;
}

ul.etcContsBtn li:first-child {
	margin: 0 5px 0 0;
}

ul.etcContsBtn li:last-child {
	margin: 0 0 0 5px;
}

ul.etcContsBtn li a {
	width: 100%;
	display: block;
	box-sizing: border-box;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

ul.etcContsBtn li a.main {
	padding: 15px;
	background: #EDF3F8;
}

ul.etcContsBtn li a.main:hover {
	background: #51A499;
}

ul.etcContsBtn li a.sub {
	padding: 10px 15px 5px 15px;
	background: #C7E6D6;
	border: 2px solid #C7E6D6;
}

ul.etcContsBtn li a.sub:hover {
	background: #FFF;
}

ul.etcContsBtn li a:before,
ul.etcContsBtn li a:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

ul.etcContsBtn li a:after {
	clear: both;
}



ul.etcContsBtn li a.main .contsTxt {
	float: left;
	display: block;
	color: #333;
	text-decoration: none;
	font-weight: bold;
	margin-top: 12px;
}

ul.etcContsBtn li a.sub .contsTxt {
	float: left;
	display: block;
	color: #333;
	text-decoration: none;
	font-weight: bold;
	margin-top: 12px;
}

ul.etcContsBtn li a .thumpic {
	float: left;
	display: block;
	margin: 0 10px 0 0;
}

ul.etcContsBtn li a .thumpic img {
	margin: 0;
	padding: 0;
}

ul.etcContsBtn li a.main:hover .contsTxt {
	color: #FFF;
}

ul.etcContsBtn li a.sub:hover .contsTxt {
	color: #333;
}

ul.etcContsBtn li a .icon {
	float: right;
	font-size: 50px;
	color: #51A499 !important;
}

ul.etcContsBtn li a:hover .icon {
	color: #FFF !important;
}


/* 統計情報 */
/*=======================================================================*/

#TopToukei {
	width: 100%;
	margin: 20px 0;
	box-sizing: border-box;
}

#TopToukei .LeftConts {
	width: 40%;
	float: left;
	margin: 0 10px 0 0;
}

#TopToukei .RightConts {
	width: 58%;
	float: right;
	text-align: right;
}

#TopToukei h2 {
	width: 100%;
	background: #F2EECC;
	display: block;
	box-sizing: border-box;
	font-size: 1.0em;
	color: #333;
	padding: 10px;
}

.RightConts h3 {
	display: inline-block;
	font-size: 1em;
	font-weight: normal;
}

.RightConts a {
	display: inline-block;
	margin: 0 0 0 10px;
	
}

#TopToukei .contsWrap {
	width: 100%;
	background: #F3F3F3;
	padding: 10px;
	box-sizing: border-box;
}

#TopToukei .contsWrap:before,
#TopToukei .contsWrap:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

#TopToukei .contsWrap:after {
	clear: both;
}


#TopToukei table {
	width: 100%;
}

#TopToukei table tr th,
#TopToukei table tr td {
	width: 48%;
	text-align: right;
}

/* SNS・レコメンドエリア */
/*=======================================================================*/

#RecoArea {
	width: 100%;
	padding: 30px 0;
	background: #F5F1D8;
}

#RecoArea .contsWrap {
	width: 1200px;
	margin: 0 auto;
}

#RecoArea .contsWrap:before,
#RecoArea .contsWrap:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

#RecoArea .contsWrap:after {
	clear: both;
}

.RecoBox {
	width: 380px;
	margin: 0 10px;
	display: block;
	float: left;
}

.RecoBox h2 {
	width: 100%;
	display: block;
	box-sizing: border-box;
	padding: 10px;
	color: #FFF;
	background: #3577A8;
	font-size: 1em;
}

.RecoWrap {
	width: 100%;
	padding: 0;
	margin: 10px 0 0 0;
	box-sizing: border-box;
}
#topFb_sm{
	display : none;
}

/* 広報 */

#snsMedia {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	background: #FFF;
}

#snsMedia ul {
	width: 100%;
	list-style: none;
  	margin: 0;
}

#snsMedia ul li {
	display: block;
	width: 100%;
	border-bottom: 1px solid #DDDDDD;
}

#snsMedia ul li:last-child {
	border-bottom: none;
}

#snsMedia ul li a {
	display: table;
	width: 100%;
	padding: 15px 10px;
	box-sizing: border-box;
	color: #333;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

#snsMedia ul li a .icon {
	display: table-cell;
	font-size: 32px;
	width: 50px;
	margin: 0;
	vertical-align: middle;
}
#snsMedia ul li a .iconImg {
	display: table-cell;
	width: 60px;
	margin: 0;
	vertical-align: middle;
}
#snsMedia ul li a .icon.iconImg{
	font-size: 40px;
	width: 60px;
}
#snsMedia ul li a .iconImg img{
	display: block;
}

#snsMedia ul li a .icon-facebook22 {	color: #3B5998;	}
#snsMedia ul li a .icon-twitter {	color: #1DA1F2;	}
#snsMedia ul li a .icon-pencil22 {	color: #0F71D3;	}
#snsMedia ul li a .icon-bubbles {	color: #0F71D3;	}
#snsMedia ul li a .icon-star-full {	color: #0F71D3;	}

#snsMedia ul li a .snsttlTxt {
	display: table-cell;
	font-size: 1em;
	margin: 0 20px 0 0;
	vertical-align: middle;
}

/* おすすめページ */

#RecoPage {
	width: 100%;
	box-sizing: border-box;
	padding: 0;
}

#RecoPage ul {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
  background-color: #fff;
}

#RecoPage ul li {
	display: block;
	width: 100%;
	border-bottom: 1px solid #DDDDDD;
	margin: 0;
}

#RecoPage ul li a {
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: #333;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	background: #FFF;
}

#RecoPage ul li .thumpic {
	display: table-cell;
	width: 120px;
	height: 90px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}
#RecoPage ul.RecoPage20220810 li .thumpic {
	width: 100px;
	height: 75px;
}

#RecoPage ul li .thumpic img {
	max-width: 100%;
	margin: 0 0 -10px 0;
}

#RecoPage ul li .recoPTxt {
	display: table-cell;
	vertical-align: middle;
	padding: 0 10px;
	box-sizing: border-box;
}


/* おススメコンテンツバナーエリア */
/*=======================================================================*/

#RecoBnrArea {
	width: 100%;
	box-sizing: border-box;
	padding: 0;
}

#RecoBnrArea .sns_btn_area {
	/*width: 620px;*/
	text-align: center;
	margin: 30px 0;
}

.sns_btn_area .cms-sns_share > div {
	display: inline-block;
}

.RBBox {
	width: 1200px;
	margin: 30px auto;
}

.RBBox:before,
.RBBox:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

.RBBox:after {
	clear: both;
}

.RBBox ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.RBBox ul li {
	display: block;
	float: left;
	margin: 0 5px;
}

.RBBox ul li a img {
	opacity: 1;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.RBBox ul li a:hover img {
	opacity: 0.5;
}
.RBBox ul li .icon-new-tab {
	display : none;
}

/* 【2023/7】おススメコンテンツバナー・スライドエリア */
/*=======================================================================*/

.swiperContainer-sitePickUp {
  z-index: 100;
  width: 1200px;
  position: relative;
  margin: 0 auto;
}

.swiper-sitepickup {
  width: 100%;
  margin: 20px auto;
  overflow: hidden;
}

/* 【2023/7】おススメコンテンツバナー・バナーボックスエリア */
/*=======================================================================*/

.PickupContentsArea {
  z-index: 100;
  width: 1200px;
  margin: 0 auto 25px auto;
  position: relative;
}

ul.PickupContentsBlock {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
}
ul.PickupContentsBlock:after {
  content: "";
  display: block;
  width: calc(100% / 3 - 5px);
  height: 0;
}

ul.PickupContentsBlock li {
  width: calc(100% / 3 - 5px);
  margin-bottom: 10px;
}

ul.PickupContentsBlock li a {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 10px;
  background: #FFF;
  border-radius: 5px;
  box-sizing: border-box;
  transition: 0.3s;
  color: #333;
  font-weight: bold;
}

ul.PickupContentsBlock li a:hover {
  color: #a99727;
  text-decoration: underline;
}

ul.PickupContentsBlock li a figure {
  display: block;
  width: 100px;
  height: 80px;
  aspect-ratio: 32/17;
  margin-right: 10px;
  transition: 0.3s;
}

ul.PickupContentsBlock li a:hover figure {
  opacity:0.7;
}

ul.PickupContentsBlock li a figure>img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    transition: transform 0.3s;
}


/* 広告バナーエリア */
/*=======================================================================*/

#adBnrArea {
	width: 100%;
	box-sizing: border-box;
	padding: 30px 0;
	background: #F7F7F7;
}

#adBnrArea .contsWrap {
	width: 1200px;
	margin: 0 auto;
}

#adBnrArea h2 {
	font-size: 1em;
}

#adBnrArea ul {
	list-style: none;
	width: 100%;
	padding: 20px 0 0 0;
}

div#ADBnr:before,
div#ADBnr:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

div#ADBnr:after {
	clear: both;
}

div#ADBnr span {
	display: block;
	margin: 0 8px 10px 8px;
	float: left;
}

#adBnrArea p {
	padding: 0 0 10px 0;
	line-height: 1.8em;
}


#adBnrArea a {
	color: #006B8D;
	text-decoration: underline;
}

#adBnrArea a:hover {
	color: #333;
	text-decoration: none;
}


/* 関連サイトエリア */
/*=======================================================================*/

#kanrenBnrArea {
	width: 100%;
	box-sizing: border-box;
	padding: 30px 0;
}

#kanrenBnrArea .contsWrap {
	width: 1200px;
	margin: 0 auto;
}

#kanrenBnrArea h2 {
	font-size: 1em;
}

#kanrenBnrArea ul {
	list-style: none;
	width: 100%;
	padding: 20px 0 0 0;
}

div#KKBnr:before,
div#KKBnr:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

div#KKBnr:after {
	clear: both;
}

div#KKBnr span {
	display: block;
	margin: 0 8px 0px 8px;
	float: left;
	height: 50px;
}

#kanrenBnrArea p {
	padding: 0 0 10px 0;
	line-height: 1.8em;
}


#kanrenBnrArea a {
	color: #0091BF;
	text-decoration: underline;
}

#kanrenBnrArea a:hover {
	color: #333;
	text-decoration: none;
}

/*20231120南アルプスIC新産業拠点ニックネーム大募集*/
#IC_banner p{
	max-width: 1200px;
	margin: 20px auto;
}
#IC_banner a{
	display: block;
	background-color: #fff001;
	padding: 10px;
	color: #57585a;
	font-weight: bold;
	text-align: center;
	border-width: 3px;
	border-style: double;
	border-color: #57585a;
	-o-transition: all, 1.0s;
	-webkit-transition: all, 1.0s;
	transition: all, 1.0s;
}
#IC_banner a:hover{
	background-color: #b23a3d;
	color: #fff;
	border-color: #ffb101;
}
.IC_banner_text01{
	font-size: 2.0em;
}
.IC_banner_text02{
	font-size: 3.4em;
}
.IC_banner_text03{
	font-size: 1.6em;
}
@media screen and (max-width: 768px) {
	#IC_banner p{
		margin: 20px;
	}
	.IC_banner_text01{
		font-size: 1.2em;
	}
	.IC_banner_text02{
		font-size: 1.6em;
      	display:block;
	}
	.IC_banner_text03{
		font-size: 1.0em;
	}
}