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

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

@media screen and (max-width: 767px) {

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

	#BBWrap {
		width: 100%;
		margin: 0 auto;
	}

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

	#BBWrap:after {
		clear: both;
	}

}

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

@media screen and (max-width: 767px) {

  #PhotoSlide {
    position: relative;
    width: 100%;
    float: none;
    margin: 0;
    box-sizing: border-box;
  }

  #PhotoSlide h3 {
    display: none;
  }
  
  #PhotoSlide.Renew2023 {
    width: 100%;
    height: auto;
    float: none;
  }
  
  #SPAWrap.FvPickUpSlide {
    margin: 0;
    padding: 20px 0;
  }

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

  #PhotoSlide.Renew2023 .cms-pages img {
    height: auto;
  }

}

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

@media screen and (max-width: 767px) {

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

	.feed-next-btn {
		background-image: url(../../img/citizen/btn_next.png);
		top: 50%;
		right: 10px;
		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;
		background: #444444 url(../../img/citizen/ttl_index_bb_pickup.png) center center no-repeat;
		text-indent: -9800px;
		box-sizing: border-box;
	}

}

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

@media screen and (max-width: 767px) {

	#PickUpSlide {
		position: relative;
		width: 100%;
        height: auto;
		float: none;
		margin: 0;
		box-sizing: border-box;
		background: #333333;
	}
	
	#PickUpSlide .bx-wrapper {
		display: block;
		margin: 0 auto;
	}

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

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

	#PslideWrap {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		padding: 30px 10px;
		overflow: hidden;
        height: auto;
	}
	.puSlideConts p {
		height: 180px;
	}
	.puSlideConts h3 {
		font-size: 0.9em;
		line-height: 1.6em;
	}

	.puSlideConts a {
		color: #FFF;
	}

}

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

@media screen and (max-width: 767px) {

	.feed-ps-prev-btn {
		background-image: url(../../img/citizen/btn_pu_prev.png);
		top: 48%;
		left: 20px;
		position: absolute;
		z-index: 500;
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
	}

	.feed-ps-next-btn {
		background-image: url(../../img/citizen/btn_pu_next.png);
		bottom: 50%;
		right: 20px !important;
		left: auto;
		position: absolute;
		z-index: 500;
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
	}

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

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

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

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

}


@media screen and (max-width: 767px) {

  .swiperContainer-fv .swiper__btnWrapper {
    width: 89.3333333333%;
  }
  
  .swiper-button-prev {
    left: 0px;
  }

  .swiper-button-next {
    right: 0px;
  }
  
  .swiper-infopickup {
    width: 88%;
  }
  
  .card figcaption a {
    font-size: 0.8em;
    letter-spacing: -1px;
  }
  
}


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

@media screen and (max-width: 767px) {

	#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: 0;
		background-image: none;
		background-color: #F4F0D5;
	}

	#SPAWrap {
      position: relative;
      z-index: 100;
      width: 100%;
      margin: 10px auto;
      display: table;
	}

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

	#SPAWrap:after {
		clear: both;
	}

	ul#SPAWrap li {
      display: table-cell;
      width: 50%;
      margin: 0;
      float: left;
	}

	ul#SPAWrap li a {
      display: block;
      width: 100%;
      height: auto;
      max-height: 190px;
      min-height: 90px;
      text-indent: 0;
      text-align: center;
      font-weight: bold;
      font-size: 0.8em;
      box-sizing: border-box;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      background: rgba(255, 255, 255, 1) !important;
      border: 1px solid #CCC;
      border-collapse: collapse;
      box-sizing: border-box;
      padding-top: 0px;
      padding-bottom: 0px;
	}
  
	ul#SPAWrap li#map a {	color: #A986A2;	}
	ul#SPAWrap li#kids a {	color: #F78989;	}
	ul#SPAWrap li#sight a {	color: #70C0A6;	}
	ul#SPAWrap li#iju a {	color: #6BB2D9;	}
	ul#SPAWrap li#promo a {	color: #D6A569;font-size: 0.7em;}
	ul#SPAWrap li#promo .icon-volume-medium::before{	color: #D6A569;	}
  
	ul#SPAWrap li a:hover {
		margin-top: 0;
	}
  
  ul#SPAWrap li a span{
      line-height: 1;
      -webkit-font-smoothing : antialiased;
      padding: 10px 0 0 0;
	  font-size: 3.6em;
      display: block;
  }
 /* 	ul#SPAWrap li a:before {
      display: block;
      font-family: 'icomoon' !important;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing : antialiased;
      padding: 10px 0 0 0;
    }
  
	ul#SPAWrap li#map a:before {
      content: "\eaed";
      color: #A986A2;
      font-size: 3.6em;
    }
  
	ul#SPAWrap li#kids a:before {
      content: "\eb0e";
      color: #F78989;
      font-size: 3.6em;
    }
  
	ul#SPAWrap li#sight a:before {
      content: "\eaec";
      color: #70C0A6;
      font-size: 3.6em;
    }
  
	ul#SPAWrap li#iju a:before {
      content: "\eaf0";
      color: #6BB2D9;
      font-size: 3.6em;
    }
  
	ul#SPAWrap li#portal a:before {
      content: "\eaef";
      color: #D6A569;
      font-size: 3.6em;
    }
 */ 
  	

	ul#SPAWrap li#map a:hover {	background: #70C0A6;	}
	ul#SPAWrap li#kids a:hover {	background: #6BB2D9;	}
	ul#SPAWrap li#sight a:hover {	background: #F78989;	}
	ul#SPAWrap li#iju a:hover {	background: #D6A569;	}
	ul#SPAWrap li#promo a:hover {	background: #A986A2;	}


  
  
}

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

@media screen and (max-width: 767px) {

  #TopMainConts,
  #TopIjuBnr,
  #IdxSnsBlock{
    position: relative;
    z-index: 100;
    width: 100%;
    margin: 10px auto;
  }

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

	#TopMainConts:after {
		clear: both;
	}

	#LeftConts {
		width: 100%;
		margin: 0 0 10px 0;
		float: none;
	}

	#RightConts {
		width: 100%;
		margin: 0;
		float: none;
	}
  
  .heading03 {
    font-size: 1.1em;
  }
  
  ul.IdxSnsBlockWrap {
    width: 96%;
    margin: 1.6em auto;
    display: flex;
    flex-wrap: wrap;
  }

  ul.IdxSnsBlockWrap li {
    width: calc(100% / 2 - 5px);
    margin-bottom: 5px;
    font-size: 0.8em;
  }
  
  ul.IdxSnsBlockWrap li a img {
    width: 24px;
    height: auto;
  }

}

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

@media screen and (max-width: 767px) {

	#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 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: block;
		text-align: center;
		width: 80%;
		padding: 10px;
		margin: 10px auto;
		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: 25%;
		border-right: 3px solid #FFF;
		box-sizing: border-box;
	}

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

	ul#EmrBtn li a {
		width: 100%;
		display: block;
		text-decoration: none;
		text-align: center;
		padding: 10px 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.8em;
	}

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

}

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

@media screen and (max-width: 767px) {

	#newsTabs {
		width: 100%;
	}

	nav.names {
		width: 100%;
		border-bottom: 3px solid #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: 30%;
    	padding: 5px 1px;
   		font-size: 0.7em;
	}

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

	article.view h2 {
		display: none;
	}

	#newsTabs .pages {
		width: 100%;
		height: 300px;
		padding: 5px;
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.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: none;
		width: 100%;
		margin: 0 10px 0 0;
		font-size: 0.9em;
	}

	.pages article h3 {
		display: block;
		float: none;
		width: 100%;
		margin: 0;
		font-size: 0.9em;
		font-weight: bold;
	}

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

}

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

@media screen and (max-width: 767px) {

	#Lifescene {
		width: 100%;
		box-sizing: border-box;
		margin: 0 0 20px 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: 25%;
		border-right: 1px solid #DDD;
		box-sizing: border-box;
	}

	ul.LSBtn li:last-child {
		width: 25%;
		border-right: 1px solid #DDD;
		box-sizing: border-box;
	}

	ul.LSBtn li a {
		width: 100%;
		display: block;
		text-decoration: none;
		text-align: center;
		padding: 10px 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.6em;
		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;
	}

}

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

@media screen and (max-width: 767px) {

	#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: 90%;
		padding: 0;
		float: none;
		display: block;
		margin: 0 auto 10px auto;
	}

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

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

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

}

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

@media screen and (max-width: 767px) {

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

	#TopToukei .LeftConts {
		width: 100%;
		float: none;
		margin: 0 0 10px 0;
	}

	#TopToukei .RightConts {
		width: 100%;
		float: none;
		text-align: left;
	}

	#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 {
		display: block;
		float: left;
		width: 48%;
		border-bottom: 1px dotted #CCC;
	}
	
	#TopToukei table tr th {
		text-align: left;
	}
	
	

}

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

@media screen and (max-width: 767px) {

  .swiperContainer-sitePickUp {
    width: 96%;
    margin: 25px auto;
  }

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

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

}

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

@media screen and (max-width: 767px) {
  
  .PickupContentsArea {
    width: 96%;
    margin: 0 auto 25px auto;
  }
  ul.PickupContentsBlock:after {
    width: calc(100% / 2 - 5px);
  }
  ul.PickupContentsBlock li {
    width: calc(100% / 2 - 5px);
    margin-bottom: 10px;
    font-size: 0.8em;
  }
  
  

}



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

@media screen and (max-width: 767px) {

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

	#RecoArea .contsWrap {
		width: 98%;
		margin: 0 auto;
	}

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

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

	.RecoBox {
		width: 100%;
		margin: 0 0 10px 0;
		display: block;
		float: none;
	}

	.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;
      overflow-x: hidden;
	}
    #topFb_pc{
        display : none;
    }
    #topFb_sm{
        display : block;
    }
	.RecoWrap iframe {
		width: 94% !important;
		margin: 0 auto !important;
	}
	.RecoWrap iframe {
      display: block;
      max-width : 380px;
        margin-left: auto;
        margin-right: auto;
	}

	/* 広報 */

	#snsMedia {
		width: 98%;
		box-sizing: border-box;
		padding: 5px;
		margin: 0 auto;
		background: #FFF;
	}

	#snsMedia ul {
		width: 98%;
		list-style: none;
		padding: 0 !important;
	}

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

}

/* おすすめページ */

@media screen and (max-width: 767px) {

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

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

	#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 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;
	}

}

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

@media screen and (max-width: 767px) {

	#RecoBnrArea {
		width: 98%;
		box-sizing: border-box;
		padding: 0;
		margin: 0 auto;
	}

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

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

	.RBBox {
		width: 100%;
		margin: 10px 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 {
		width: 48%;
		display: block;
		float: left;
		margin: 0 2px;
	}

	.RBBox ul li a img {
		max-width: 100%;
		height: auto;
		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;
	}

}

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

@media screen and (max-width: 767px) {

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

	#adBnrArea .contsWrap {
		width: 98%;
		margin: 0 auto;
	}

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

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

	}
	
	#adBnrArea ul li {
		font-size: 0.9em;
	}

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

	#ADBnr:after {
		clear: both;
	}

	#ADBnr .banners span {
		width: 47.5%;
		display: block;
		margin: 0 2px 4px 2px;
		float: left;
	}
	
	#ADBnr .banners span img {
		max-width: 100%;
		height: auto;
      	margin: 0 auto;
		display: block;
	}

	#adBnrArea p {
		padding: 0 0 10px 0;
		font-size: 0.9em;
		line-height: 1.6em;
	}


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

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

}

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

@media screen and (max-width: 767px) {

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

	#kanrenBnrArea .contsWrap {
		width: 98%;
		margin: 0 auto;
	}

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

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

	}
	
	#kanrenBnrArea ul li {
		font-size: 0.9em;
	}

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

	#KKBnr:after {
		clear: both;
	}

	#KKBnr .banners span {
		width: 47.5%;
		display: block;
		margin: 0 2px 4px 2px;
		float: left;
	}
	
	#KKBnr .banners span img {
		max-width: 100%;
		height: auto;
      	margin: 0 auto;
		display: block;
	}

	#kanrenBnrArea p {
		padding: 0 0 10px 0;
		font-size: 0.9em;
		line-height: 1.6em;
	}


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

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

}