/* ------------------------基本設定------------------------ */
body {
	width: 100%;
}

div.baseall.top {
	width: calc(100% - 20px);
	box-sizing: border-box;
	margin: 0 10px 0 10px;
}

#wrapper {
	width: 100%;
	min-width: 100%;
}

/* ------------------------コンテンツ外枠------------------------ */
div.top_wrap {
	margin: 10px 0 45px;
}
/* ------------------------検索エリア------------------------ */
div.search-box {
	width: 100%;
	display:-webkit-box; display:-ms-flexbox; display:flex;
}

.search-wp {
	width: 100%;
}

/* ------------------------コンテンツ大枠------------------------ */
div.infoarea {
	width: 100%;
}


/* ------------------------グローバルナビ------------------------ */
div#gnb {
	padding: 0 0 0 3px;
}
/* ------------------------ヘッダー------------------------ */
.top div#h0left2 {
	padding: 5px 0 0 5px;
}


/* ------------------------フッター------------------------ */
.foot2wp {
	width: calc(100% + 20px);
	margin-left: -10px;
}


/* ------------------------トップスライダー------------------------ */
div#mainimg {
	margin: 0 0 20px 0;
	width: 100%;
	float: none;
}
div#infoarea0 {
	width: 100%;
	float: none;
}
div#infoarea1 {
	float: none;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin: 25px 0;
}
div#infoarea2 {
	float: none;
	margin: 25px auto;
}
div#infoarea3 {
	width: 100%;
	padding: 0 0 0 0;
	margin: 0 0 25px;
	float: none;
}
div#infoarea4 {
	float: none;
	clear: both;
	width: 100%;
	margin: 0 0 20px;
}

/*--------------------- 情報エリアコンテンツ ---------------------*/
/* ▽情報を探す▽ */
div#top_search_area {
	margin-bottom: 20px;
}
.top_search_area_bg {
	min-height: unset;
}

/* ▽トピックバナー▽ */
.topics_bg {
	min-height: unset;
}

/* ▽新着情報▽ */
div.info-box {
	height: auto;
	min-height: 327px;
}

ul.info-list {
    height: 280px;
    overflow-y: auto;
}

ul.info-list li {
    padding: 10px 5px 2px 0!important;
}
ul.info-list li span.date {
	float: none;
	margin: 0 0 4px
}
div.info-box p {
	height: 280px;
}
div.info-box ul.info-list li p {
	height: auto;
	margin: 0;
}

/* ▽広報みかわについて▽ */
div#kouhou {
	width: 100%;
	margin: 0 0 20px;
	height: auto;
}


div#kouhou div.img-kouhou {
	text-align: center;
}


div.backno {
	float: none;
	text-align: left;
}


/* ▽三川町について▽ */

div#town {
	width: 100%;
	margin: 0;
	float: none;
}

div#town div.bgarea {
	padding: 5px 10px 15px 0;
	min-height: unset;
 }

div.town_box {
	width: calc(50% - 10px);
	margin: 10px 0 0 10px;
	float: none;
}


/* ▽ライフイベント（こんなときには？）▽ */
div#lifeevent {
	width: 100%;
    padding: 0;
    margin: 0 0 20px;
}

div.area-box {
	width: 100%;
	float: none;
}
div#lifeevent ul {
	-webkit-box-pack: start;
	justify-content: flex-start; 
	padding: 0;
}
div#lifeevent ul li.img-li {
	width: 25%; 
	height: auto;
	float: left;
}

span.gmenutext {
	line-height: 1.5em;
	font-size: 14.4px;
}
div.gmenubox2 {
	padding: 6px 5px;
	min-height:unset;
}
.overlay img {
	width: 100%;
	height: auto;
}


/* ▽開閉メニュー（こんなときには・三川町について）▽ */
.menu-box {
	display: none;
}
.area-box.menu-box {
	display: none;
}
.menu-btn {
	cursor: pointer;
}
.menu-btn span {
	display: block;
	padding: 0 35px 0 0;
	background-image: url(/images/mk_m_open_btn.png);
	background-repeat: no-repeat;
	-webkit-background-size:  20px 18px;
	-moz-background-size:  20px 18px;
	background-size: 20px 18px;
	background-position: right 10px top 50%;
}
.menu-btn.open span {
	background-image: url(/images/mk_m_close_btn.png);
}


@media screen and (max-width: 510px) {
	div.bgarea { width: 100%; overflow: hidden; display: block; margin: 0 0 20px; padding: 5px 0 15px;}
	div.town_box { clear: both; width: calc(100% - 20px); margin: 10px 10px 0 10px; }
	div#lifeevent ul li.img-li { width: calc(100% / 3); box-sizing: border-box; height: auto; }
}

@media screen and (max-width: 400px) {
	div#lifeevent ul li.img-li { width: 50%; box-sizing: border-box; height: auto; }
}




/* ▽関連リンクエリア▽ */
div.kanren {
	width: 100%;
	margin: 0 0 20px;
}
div.kanren.pc {
	display: none;
}
div.kanren.smp {
	display: block;
}
/*スマホ用スライダー*/
div.kanren.smp .kanren-slider { 
	position: relative;
	margin: 0 30px;
	padding: 15px 0 45px;
}

div.kanren.smp .kanren-slider .img-li {
	text-align: center;
	padding: 0;
	margin: 0 5px 10px;
}
div.kanren.smp .kanren-slider .slick-list {
	margin: 0;
}
div.kanren.smp .kanren-slider .slick-slide img{
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}
div.kanren.smp .pc_none {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* 左右矢印 */
div.kanren.smp .slick-prev,div.kanren .slick-next {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 13px;
    height: 30px;
    position: absolute;
    top: calc((100% - 45px) / 2);
    left: -25px;
    background-color: transparent;
    z-index: 11;
	background-image: url('/images/mk_m_prev.png');
	-webkit-background-size: 13px 30px;
	-moz-background-size: 13px 30px;
	background-size: 13px 30px;
	background-repeat: no-repeat;
	border: none;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	cursor: pointer;
}
div.kanren.smp .slick-next {
   left: auto;
   right: -25px;
   background-image: url('/images/mk_m_next.png');
}
/* 再生・停止ボタン */
div.kanren.smp .play_pause {
	right: auto;
	left: 50%;
    -webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    bottom: 5px;
    width: 100%;
}
div.kanren.smp .play_pause button {
	background-image: url('/images/mk_m_kanren_pause.png');
}
div.kanren.smp .play_pause button.paused {
	background-image: url('/images/mk_m_kanren_play.png');
}

/* ドット */
div.kanren.smp ul.slide-dots {
	margin: 0 auto;
	padding: 0;
}
div.kanren.smp .slide-dots li {
	border:2px solid #005B2F;
}
div.kanren.smp .slide-dots li:hover,
div.kanren.smp .slide-dots li.slick-active {
	background: #005B2F;
	border: 2px solid #005B2F;
}


/* ▽広告エリア▽ */
div.ad-box {
	margin: 0 auto 0;
}
div.ad-box ul.ad-list {
	position: relative;
	margin: 0;
	padding: 15px 5px 5px;
}
div.ad-box ul.ad-list li {
	display: block;
	height: auto;
	padding: 0;
	margin: 0 5px 10px;
	text-align: center;
}
div.ad-box ul.ad-list li img {
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 520px) {
	div.ad-box ul.ad-list li {
		width: calc(50% - 10px);
    }
}
@media screen and (max-width: 370px) {
	div.ad-box ul.ad-list li {
		width: calc(100% - 10px);
    }
}