.mainvisual-fixed {
  /* 画像ファイルの指定 */
  background-image: url(../img/top/photo03.jpg);
}

@media screen and (min-width: 491px){
.acPhoto {
	display: flex;
	justify-content: center;
	width:100%;
}
	
	.acPhoto li {width:39.9%;}
	.acPhoto li:last-child {width: 60.1%}
	.acPhoto img {width:100%;height:auto;}
}

#title01,
#title02,
#title03,
#title04{
	margin: 20px 0 40px;
	}

@media screen and (min-width: 491px){
	#title01 {
	margin: 30px 0px 0px;
}
#title02,
#title03,
#title04{
	margin: 50px 0 70px;
	}	
	
}


.attention {
	font-size: 12px;
	opacity: 0.6;
	letter-spacing: 0;
	line-height: 1.8em;
	border-top: 1px solid #999;
	padding: 10px;
	margin: 40px auto;
}


@media screen and (min-width: 769px){
	.box-access01 {
		margin-top: 100px;
	}
.box-access01 .attention {
	padding: 50px 10% 80px;
	margin: 40px auto;
}	
}
.lifeinfo {
	background:#FFF;
	padding-top: 70px;
	padding-bottom: 70px;
	margin:auto;
	margin-top:80px;
}

.lifeinfo dl {
display: flex;
	clear: both;
font-size: 12px;
line-height: 1.5;
color: #333;
}

.lifeinfo dt {
width: 220px;
padding-left: 5px;
}
.lifeinfo dd { width: 70px; font-size: 100%;}
.lifeinfo .here { width: 140px; }

.lifeinfo-title {
	background: rgba(0,0,0,0.6);
	padding: 5px;
	margin-bottom: 20px;
	margin-top: 20px;
	font-size:15px;
	color:#FFF;
}

@media screen and (min-width: 769px){
	.lifeinfo .wrapper {
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
	}
	.lifeinfoBox {width:47%;}
}

/*----------------------------------
その他の交通
------------------------------------*/
.title {
	width: 150px;
	margin: auto;
	margin-bottom:25px;
}

.air-area,
.bus-area,
.taxi-area {
	margin-top:25px;
	width:80%;
	margin:auto;
	margin-bottom: 25px;
}

.bus-area {
		text-align: center;
}

.bus-area p {
	margin-bottom:10px;
}


.bus-area .txt01  {
	background: #FFF;
	padding: 5px;
	text-align: center;
}

.bus-area p img{
	width:70%;
	margin: auto;
	max-width: 350px;
}
.bus-icon {
			display: inline-block;
			cursor: pointer;
			transition: 0.25s ease;
			width: 60px;
			height: auto;
	margin-top: 15px;
}

.taxi-area p{
	margin-bottom: 25px;
}

@media screen and (min-width: 769px){
.ac-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
	
	.reverse {
		flex-direction: row-reverse;
	}
	
	.ac-box>div {
		max-width: 600px;
		width: 28%;
		text-align: center;	
	}
	.ac-box>div.photo {
		width: 70%;
		max-width: 1200px;
	}

.air-area,
.bus-area,
.taxi-area {
	margin-top:0px;}

	
}


/*----------------------
cta.js
-----------------------*/

		.disable-mouse {
			pointer-events: none;
		}
		body.disable-scroll {
			overflow: hidden;
		      	height: 100%;
		}

		.bus-icon {
			display: inline-block;
			text-decoration: none;
			cursor: pointer;
			transition: 0.25s ease;
			width: 80px;
			height: auto;;

}

		.bus-icon:hover {
			opacity: 0.8;
		}

		.modal {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 10px;
			background: #000;
			color: white;
			z-index: 100;
			visibility: hidden;
			opacity: 0;
			pointer-events: none;
                	transition: 200ms ease;
        		overflow: auto;
		}

@media screen and (min-width:769px){
	.modal {padding:40px;}}

		.modal-close-btn {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			background: url(../img/close.png) no-repeat center;
			width: 32px;
			height: 32px;
			padding: 32px;
			opacity: 0.8;
			cursor: pointer;
			transition: 0.3s ease;
			z-index: 10000;
			color:#FFF;
		}
		.modal-close-btn:hover {
			opacity: 1;
		}

		.modal.show {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}



.bus-list {
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin:auto;
	max-width: 1024px;
	flex-wrap: wrap;
}

.bus-list li {
	width: 48%;
}

@media screen and (min-width: 1025px){
	.bus-list li {
	width: 32%;
}
}













/*--------------------------------
ここからGoogleMap
-----------------------------------*/

#toplink-point01 {
margin-top: 50px;
}

/*////////////////////////
  picuup-list
/////////////////////////*/

.long br {
display: block;
}
.pickup-list {
margin-top: 50px;
}

.pickup-list li {
margin-bottom: 40px;
}


@media screen and (min-width: 769px){
.pickup-list {
display: flex;
margin-top: 50px;
justify-content: space-between;
}

.pickup-list li {
width: 32%;
}

}

/*/////////////////////////
       h3各項目の見出し文字(h4はstyle.css?123)
/////////////////////////*/

/*h3{
	font-size: 18px;
	line-height: 1.5;
	border-left: 5px double #A9A93C;
	padding:0px 10px;
	font-weight: bold;
	margin: 50px auto 20px;
	color: #A9A93C;
}

h3 span{
	font-size: 0.8em;
}

@media screen and (min-width: 491px){
h3{
	font-size: 25px;
	letter-spacing: 0.05em;
	border:none;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 40px;
	}
	}
*/

#location h4 {display: none;}

@media screen and (min-width: 769px){
#location h4 {
display: block;
text-align: center;
margin-top: 65px;
font-size: 26px;
font-weight: bold;
margin-bottom: 65px;
color: #2B324F;
}

#location h4 span {
display: block;
font-size: 14px;
padding-bottom: 14px;
opacity: 0.9;
}

}
/*/////////////////////////
       h5各項目の見出し文字(h4はstyle.css?123)
/////////////////////////*/

h5 {
	text-align: center;
	font-weight: bold;
	padding-top: 10px;
	margin-bottom: 8px;
	color:#554d2a;
	font-size: 18px;
	line-height: 1.4;
}

h5.long {
font-size: 16px;
}

h5 span{
	font-size: 15px;
}


/*////////////////////
         教育環境
/////////////////////*/

.location_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.location_list li{
	width: 23%;
	margin: 20px 1%;
	text-align: center;
	font-size: 13px;
	
	letter-spacing: 0;
}



@media screen and (max-width:768px){
	.location_list li{
	width: 47%;
}
}

@media screen and (max-width:490px){
	.location_list li{
	width: 99%;
}
}

/*////////////////////////
生田小学校・塾たくさんあります
////////////////////////*/
.school-area ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: 5% 0 0;
}

.school-area ul li{
	width: 48%;
}

.school-area ul li p{
	margin: 10% auto;
	text-align: left;
}



@media screen and (max-width:490px){
.school-area ul li{
	width: 100%;
}
}

/*/////////////////////
  川崎市子育てサポート制度
//////////////////////*/

.gray-area{
	width: 100%;
	margin: 10% 0;
	background-color:#F7F6F3;
	padding: 5% 0;
}


/*//////////////////
        グルメ
////////////////////*/

.gourment_list{
	margin: 5% 0;
	text-align: left;
}

.gourment_box{
	margin: 7% 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.gourment_box div{
	width: 48%;
}

.gourment_photo ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 2%;
}

.gourment_photo ul li{
	width: 49%;
}

.gourment_right{
	margin: 20px 2% 0;
}

.gourme_title{
	font-size: 22px;
	margin: 0 0 20px;
	line-height: 1.5;
	font-family: ten-mincho, "游明朝", YuMincho,"HG明朝B", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝",serif;
}

.gourment_bottom{
	width: 100%!important;
	margin-top:3%;
}

.gourment_info{
	font-size: 13px;
	line-height: 1.8;
	margin-top: 10%;
	border-top: solid 1px #8D8D8D;
	padding-top: 15px;
}

.opposite{
	flex-direction: row-reverse;
}

.gourment_mini_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 10%;
}

.gourment_mini{
	width: 48%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.gourment_mini div{
	width: 50%;
}

.gourment_mini_right{
	background: #F8F6EE;
	padding: 2%;
	text-align: left;
	font-size: 13px;
}


@media screen and (max-width:1020px){
.gourment_list{
	max-width: 640px;
	margin: 5% auto 0;
}
.gourment_box div{
	width: 99%;
}


.gourment_right{
	margin: 20px 0 0;
}
	
.gourment_info{
	border-top: 0px;
	padding-top: 0px;
	margin:2% 0 0;
}
.gourment_mini_list{
	max-width: 640px;
	margin: 0 auto;
}
.gourment_mini{
	width: 100%;
	margin-bottom: 4%;
}
}
@media screen and (max-width:490px){
.gourment_mini_list{
	display: block;
}

.gourment_mini{
	display: block;
}
	
.gourment_mini div{
	width: 100%;
}
}


/*////////////////////////
ロケーションの自動スクロールナビ
////////////////////////*/



.locationbtn-area ul{
	display:flex;
	justify-content:space-between;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.locationbtn-area ul li{
	width: 23%;
}


.locationbtn-area ul li div{
	background:#D8E7CF;
	height: 50px;
	text-align: center;
}

.locationbtn-area ul li div:hover{
	background:#EFF5EB;
}

.thebtn{
	background:#EFF5EB ;
	height: 60px;
}

.locationbtn-area ul li a{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3%;
}

.locationbtn-area ul li a.thebtn{
	cursor: default;
    pointer-events: none;
	color: #555;
	}



/*////////////////////
        itot
/////////////////////*/

.itot{
	width: 40%;
	margin: 0 auto;
}

@media screen and (max-width:1020px){
	.itot{
		width: 80%;
	}
}

.itot_banner {
margin: 30px auto 50px;
width: 90%;
max-width: 800px;
}

.itot_banner:hover {
opacity: 0.8;
}


.top-content-text h3 {
	color: #2B324F;
	font-family:"Times New Roman", Times, NotoSerifCJKjp, "游明朝", YuMincho,"HG明朝B", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝",serif;
	}
	
	
	
/*--------------------------
ロケーションのタブ
----------------------------*/
.support-area {
line-height: 1.5em;
background: #FFF;
padding: 20px;
box-sizing: border-box;
font-size: 14px;
}

.support-area .title {
text-align: center;
font-size: 20px;
position: relative;
width: 350px;
margin: auto;
margin-bottom: 30px;
margin-top: 10px;
padding: 0 55px;
}

.support-area .title:before,.support-area .title:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: gray;
}

.support-area .title:before {
  left:0;
}
.support-area .title:after {
  right: 0;
}


.support-area h4 {
padding-bottom: 15px;
}
.support-area ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.support-area ul li {
width: 100%;
margin-bottom: 15px;
}

@media screen and (min-width: 491px){
.support-area ul li {
width: 48%;
margin-bottom: 25px;
}
}

@media screen and (min-width:1025px){

.support-area {
margin-top: 100px;
padding: 50px;
}

.support-area .title {
font-size: 26px;
width: 450px;
margin-bottom: 50px;
}

.support-area ul li {
width: 32%;
margin-bottom: 40px;
}
}

















/*-------------------------------------
gmap
---------------------------------------*/


/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  background-color: #fff;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
  width: 95%;
  margin: 0 auto;
  max-width: 1400px;
  }

/*タブのスタイル*/
.tab_item {
  width: calc(100%/7);
  height: 50px;
  border: 1px solid #A8966D;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #A8966D;
  display: block;
  float: left;
  transition: all 0.2s ease;
  cursor: pointer;
}

.tab_item:nth-of-type(n+2) {
	border-left: none; 
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  /*padding: 40px 40px 0;*/
  clear: both;
  overflow: hidden;
}

@media screen and (max-width: 768px){
.tab_item {
  width: calc(96%/3);
  border: 1px solid #A8966D;
  margin: 0.5%;
  }
  .tab_item:nth-of-type(n+2) {
	border-left: 1px solid #A8966D;
}

}


@media screen and (max-width: 490px){
.tab_item {
font-size: 12px;
letter-spacing: 0;
}
}

/*選択されているタブのコンテンツのみを表示*/
#shopping:checked ~ #shopping_content,
#preschool:checked ~ #preschool_content,
#gourmet:checked ~ #gourmet_content,
#education:checked ~ #education_content,
#hospital:checked ~ #hospital_content,
#public:checked ~ #public_content,
#park:checked ~ #park_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #A8966D;
  color: #fff;
}