@charset "utf-8";
/* CSS Document */

/***リセット***/

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, logo, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
	}

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}

	ol, ul {
		list-style: none;
	}

blockquote, q {
		quotes: none;
	}

blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
    font-size:1.6rem
	}
  
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/***全体設定***/

html {
    font-size:10px;
	scroll-behavior: smooth;

	}

body {
    font-size: 1.8rem;
	line-height: 1.5;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    background: #f7feee;
    color:#333;
	}

a {
 color:#188d9d;
 text-decoration: none;
}

a:hover {
 color:#41b4c4;
}
/***共通スペース・フォントカラー他設定***/

.fwb {
  font-weight: bold;
}
.pc { display: block !important; }
.sp { display: none !important; }
.sp3 { display: none !important; }
.tal { text-align: left; }
.tar { text-align: right; }

/**ヘッダーの設定**/
header {
	display: flex;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	background: #006a44;
	position: relative;
	text-align: left;
}
.logo {
	margin: 0.8rem 5rem 0.8rem 16rem;
}
.logo a {
	transition: 0.5s all ease-in-out;
}

.logo a:hover {
	opacity: 0.7 ;
}

nav ul{
	display: flex;
	margin: 5rem 0 0 0;
	font-size: 1.1vw;
	font-weight: 300;
}
nav li a {
	transition: 0.5s ;
    text-decoration: none;
	color: #fff;
	margin-right:3rem;
}
nav li a:hover {
	color:#b8cfbb;
}
.header_right {
	position: absolute;
	top:4rem;
	right:3rem;
}
.header_right img  {
	transition: 0.5s ;
}
.header_right img:hover {
	opacity: 0.7 ;
}

main {
	width:110rem;
	margin: 2rem auto 5rem;
}

/**トップページメイン**/
main video {
	width:100%;
	height:auto;
	margin:-2.8rem 0 5rem 0;
}

/*新着情報*/
#parentframe {
	width:100%;
	height: 110rem;
	margin:-2rem 0 0;
	padding:0;
}
.scroll_bar{
   overflow-y: hidden;
   overflow-x:hidden;
   width: 110rem;
   height: 47rem;
   margin:4rem auto 6rem;
}
.scroll_bar::-webkit-scrollbar{
   width: 20px;
}
.scroll_bar::-webkit-scrollbar-track{
   background-color: #e4e4e4;
  border-radius: 10px;
}
.scroll_bar::-webkit-scrollbar-thumb{
   background-color: #3fadbc;
   border-radius: 10px;
}
.news_info ul{
  width:108rem;
  text-align: left;
  font-size: 1.75rem;
  padding:0 2rem 2rem;
  box-sizing:border-box;
}
.news_info li{
  display: flex;
  padding:12px 15px;
  border-bottom:1px dotted #878787;
}
.news_info li a, .news_info li a:hover {
	text-decoration:underline;
}
.news_info .day {
    width:18rem;
  }
.news_info .new {
	color:#fb9323;
	padding-right:0.8rem;
	
  }
.news_info .text {
	width:87rem;
}

/*夢街道ルネサンスとは*/
main h2#about {
	margin-bottom:4rem;
} 

.about_btn {
	width:94rem;
	margin: 0 auto 2rem;
	display: flex;
	justify-content: space-between;
}
.about_btn .btn {
	position: relative;
	width: 28.4rem;
	height: 7rem;
	display: block;
	overflow: hidden;
}
.about_btn .btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
.about_btn .btn:hover img:nth-of-type(2) {
	opacity: 0;
}
/*マップ*/
#map {
	position: relative;
	width:83%;
	margin:0 auto;
}
#image_map {
    max-width: 100%;
    width: auto;
}
.fukei {
	position: absolute;
	top:9%;
	left:7.5%;
	width:17%
}
.fukei a {
	transition: 0.5s all ease-in-out;
}
.fukei a:hover {
	opacity: 0.8 ;
}
.map_ttl {
	position: absolute;
	top:70%;
	left:63%;
	width:19%;
	font-size:1.6rem;
}
.map_ttl span {
	display: block;
	line-height:1.3;
	margin-top:.5rem;
	text-align: left
}
/*認定地区一覧*/
main h2#nintei {
	margin:4rem 0 4rem 0;
} 

#slide_area {
	width:58%;
	margin: 0 auto;
}
#slide_area h3 {
	margin:0 auto 2rem;
	background: url("../images/slide_border.png") repeat-x center;
	width:96%;
	text-align: left;
}
#slide_area h3 img {
	width:20%;
}
/*バナー*/
#bn {
	width:83%;
	margin: 4rem auto 6rem;
	display: flex;
	justify-content: space-between;
}
#bn .btn {
	position: relative;
	width: 31%;
	height: 10.8rem;
	display: block;
	overflow: hidden;
}
#bn .btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
#bn .btn:hover img:nth-of-type(2) {
	opacity: 0;
}
/**フッター**/
footer {
	color:#fff;
	background:#006a44;
	padding:4rem 0 15rem;
	font-size:1.5rem;
}

#footer-menu ul {
	display: flex;
	flex-direction: row-reverse;
}

#footer-menu li {
	margin-right: 10px;
}

#footer-menu a {
	color: #fff;
}

/* ページトップボタン */
#page-top {
  bottom: 5rem;
  position: fixed;
  right: 5rem;
}
#page-top a {
  height: auto;
  padding: 0;
  width: 9.2rem;
}
#page-top a:hover {
  opacity: 0.8;
  transition: opacity .5s;
}
#page-top a img {
  width: 70px;
}
.news_info ul{
  width:108rem;
  text-align: left;
  font-size: 1.75rem;
  padding:0 2rem 2rem;
  box-sizing:border-box;
}

/***デバイス設定***/
@media screen and (max-width : 1390px ){
/*body {min-width:1300px;} */
.logo {
	margin: 0.8rem 0 0.8rem 5.2%;
}
.logo img {
	width:90%;	
	}
nav ul{
	margin: 5rem 0 0 0;
	font-size: 1.7rem;
}
.header_right{
	top:3.5rem;
}

#bn {
	width:96%;
}
#bn .btn {
	position: relative;
	width: 32%;
	height: 10.8rem;
	display: block;
	overflow: hidden;
}
}

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

.logo {
	margin: 0.8rem 0 0.8rem 2rem;
}
.logo img {
	width:80%;	
	}
nav ul{
	margin: 5rem 0 0 -2rem;
	font-size: 1.6rem;
}
nav li a {
	margin-right:2rem;
}
.header_right{
	right:3rem;
	top:3rem;
}
#slide_area {
	width:78%;
	margin: 0 auto;
}
#page-top {
  bottom: 2rem;
  position: fixed;
  right: 2rem;
}
}

@media screen and (max-width:1024px){
.pc { display: none !important; }
.sp { display: block !important; }
body {
  -webkit-text-size-adjust: 100%;
  min-width:initial;
  }
.logo {
	margin: 0.8rem 0 0.8rem 2rem;
}
.logo img {
	width:100%;	
	}
.header_right{
	position:absolute;
	right:12rem;
	top:4rem;
}
main {
	width:95%;
	margin: 2rem auto 5rem;
}/**ハンバーガーナビ**/
nav {
  margin-bottom: 0;
}
nav ul {
  display: block;
  padding:20px;
  margin: 0;
  list-style-type: none;
  height:auto;
}
nav li a {
  color:#10431f;
  text-decoration: none;
  font-size:1.5rem;
  font-weight: bold;
  display: block;
  padding:20px;
  box-sizing: border-box;
  border-bottom:solid 1px #006a44;
  text-align: right;
  width:240px;
}
.sp_nav{
  position:absolute;
  right:2rem;
  top:3.5rem;
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*閉じる用の薄黒カバー*/
#nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}
/*中身*/
#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;/*最前面に*/
    width: 90%;/*右側に隙間を作る*/
    max-width: 280px;/*最大幅*/
    height: 100%;
    background: #f7feee;/*背景色*/
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);/*左に隠しておく*/
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: .5;
}
#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
.scroll_bar{
   overflow-y: scroll;
   width: 90%;
   height: 47rem;
   margin:5rem auto 6rem;
}
.scroll_bar::-webkit-scrollbar{
   width: 20px;
}
.scroll_bar::-webkit-scrollbar-track{
   background-color: #e4e4e4;
  border-radius: 10px;
}
.scroll_bar::-webkit-scrollbar-thumb{
   background-color: #3fadbc;
   border-radius: 10px;
}
.news_info ul{
  width:100%;
  text-align: left;
  font-size: 1.75rem;
  padding:0 2rem 2rem;
  box-sizing:border-box;
}
.news_info li{
  display: flex;
  padding:12px 15px;
  border-bottom:1px dotted #878787;
}
.news_info li a, .news_info li a:hover {
	text-decoration:underline;
}
.news_info .day {
    width:22%;
  }
.news_info .text {
	width:80%;
}
.about_btn {
	width:90%;
	margin: 0 auto 2rem;
	display: flex;
	ustify-content: space-between;
}
.about_btn .btn {
	position: relative;
	width: 32%;
	height: 7rem;
	display: block;
	overflow: hidden;
}
.fukei {
	top:9%;
	left:5.5%;
	width:20%
}
#map {
	width:98%;
}
.map_ttl {
	top:70%;
	left:61%;
	width:21%;
	font-size:1.3rem;
}
.map_ttl span {
	display: block;
	line-height:1.3;
	margin-top:.5rem;
	text-align: left
}
#slide_area {
	width:78%;
	margin: 0 auto;
}
}

@media screen and (max-width : 768px ){
.pc { display: none !important; }
.sp { display: block !important; }
body {
  -webkit-text-size-adjust: 100%;
  min-width:initial;
  } 
main h2 {
	width:70%;
	margin:0 auto;
	}
.scroll_bar{
   height: 24rem;
}
#parentframe {
	height: 200rem;
}
.news_info ul{
  font-size: 1.5rem;
}
	
.news_info li{
  display: block;
}
.news_info .day {
    width:100%;
	margin-bottom: .6rem;
  }
.news_info .text {
	width:100%;
}
main h2#about {
	margin-bottom:2rem;
} 
.about_btn {
	width:96%;
	margin: 0 auto 1.4rem;
	display: flex;
	justify-content: space-between;
}
.about_btn .btn {
	position: relative;
	width: 31%;
	height: 7rem;
	display: block;
	overflow: hidden;
}
main h2#nintei {
		margin:2rem auto;
	}
#slide_area {
	width:95%;
}
#bn {
	width:60%;
	margin: 0 auto;
	display: block;
}
#bn .btn {
	position: relative;
	width: 100%;
	height: 12rem;
	display: block;
	overflow: hidden;
}
#slide_area h3 img {
	width:22%;
}
footer {
    margin-top:4rem;
	padding:2rem 0 10rem;
	}
/* ページトップボタン */
#page-top {
  bottom: 1rem;
  position: fixed;
  right: .5rem;
}
#page-top a img {
  width: 70%;
}
}

@media screen and (max-width:480px){
body {
  -webkit-text-size-adjust: 100%;
   min-width:initial;
  } 
main{
	width:94%;
	margin: 2rem auto 3rem;
}
main h2{
		width:80%;
	}
main video {
	margin:-2.8rem 0 2rem 0;
}
.logo {
	margin: 0.8rem 0 0.8rem 1rem;
}
.logo img {
	width:80%;	
	}
.header_right{
	position:absolute;
	right:8rem;
	top:3rem;
}
.sp_nav{
  position:absolute;
  right:1rem;
 top:2.5rem;
}
.scroll_bar{
   height: 28rem;
  margin:2rem auto 3rem;
}

.about_btn {
	width:96%;
	margin: 0 auto 2rem;
	display: block;
}
.about_btn .btn {
	position: relative;
	width: 50%;
	height: 6rem;
	display: block;
	overflow: hidden;
	margin:0 auto 1rem;
}
.fukei {
	top:9%;
	left:5.5%;
	width:23%
}
#map {
	margin:0 auto 5rem;
}
.map_ttl {
	top:75%;
	left:55%;
	width:30%;
	font-size:1rem;
}
.map_ttl span {
	display: block;
	line-height:1.3;
	margin-top:.5rem;
	text-align: left
}
#bn {
	width:70%;
}
#bn .btn {
	height: 8rem;
	margin-bottom:2rem;
}
#slide_area {
		margin-bottom:2rem;
	}
#slide_area h3 {
	margin:0 auto 2rem;
	background: url("../images/slide_border.png") repeat-x center;
	width:96%;
	}
#slide_area h3 img {
	width:32%;
	margin-bottom:3px;
}
footer {
	padding:2rem 0 10rem;
	font-size:1.1rem;
}
.map_ttl span {
	font-size: 1.2rem;
}
#page-top {
  bottom: 1rem;
  position: fixed;
  right: -0.5rem;
}
}
@media screen and (max-width:300px){
	.logo img {
	width:60%;	
	}
.header_right{
	right:8rem;
	top:2rem;
}
.sp_nav{
  width:18%;
  right:1rem;
  top:1.4rem;
}
#nav-content {
    max-width: 200px;/*最大幅*/
}
nav li a {
  width:100%;
}
.about_btn .btn {
	width: 60%;
	height: 6rem;
	display: block;
	overflow: hidden;
	margin:0 auto;
}
.slick-dots {
		height:0;
	}
#bn {
	width:80%;
}
#bn .btn {
	height: 5rem;
	margin-bottom:1rem;
}
#slide_area h3 {
	margin:0 auto 1px;
	}
#slide_area h3 img {
	margin-bottom:5px;
}
.sp3 { display: block !important; }
}