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

#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: space-between;
}



.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: 46%;
}
	h5{font-size: 14px;}
}

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

/*////////////////////////
生田小学校・塾たくさんあります
////////////////////////*/
.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: auto;
    align-items: center;
}

.gourme_title{
	font-size: 22px;
	margin: 0 0 20px;
	line-height: 1.5;
	
}

.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
---------------------------------------*/

iframe {
width: 100%;
height: 750px;
overflow: hidden;
}

@media screen and (max-width: 1024px){
iframe {
width: 100%;
height: 550px;
overflow: hidden;
}
}

@media screen and (max-width: 768px){
iframe {
width: 100%;
height: 750px;
overflow: hidden;
}
}


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

/*タブのスタイル*/
.tab_item {
  width: calc(100%/6);
  height: 50px;
  border-bottom: 3px solid #9E8A63;
  border-top: 3px solid #9E8A63;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #9E8A63;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  border-right: 1px solid #9E8A63;
}
.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(100%/3);
  border-bottom: 1px solid #9E8A63;
  }
  
  .tabs {
  border-bottom: 3px solid #9E8A63;
  }
}


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

/*選択されているタブのコンテンツのみを表示*/
#shopping:checked ~ #shopping_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: #9E8A63;
  color: #fff;
}
.itot-bannar {
	display: block;
	width: 80%;
	margin: auto;
	text-align: center;
}

@media screen and (max-width:768px){
	.itot-bannar{
		width: 90%;
	}
}

.bigshop-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 90%;
	margin: auto;
	text-align: center;
	margin-top: 5.0em;
	
}

.mainbgshopimg {
	display: block;
	width: 50%;

}@media screen and (max-width:768px){
	.mainbgshopimg{
		width: 100%;
	}
}

.mainbgshoptext {
		margin: auto;
	text-align: left;
	line-height: 1.8;
	font-size: 1.5em;
	width: 48%;
	padding: 2%;
	
}

@media screen and (max-width:768px){
	.mainbgshoptext {
		margin: auto;
	text-align: left;
	line-height: 1.8;
	font-size: 1.5em;
	width: 100%;
	padding: 2%;
	
}	}

.shop-caption {
	font-size: 15px;
	float: right;
	padding-top: 5px;
}

.shopname {
	border-bottom: 1px solid rgba(73,73,73,1.00);
	display: block;
}

.shop-num {
	border-bottom: 1px solid rgba(73,73,73,1.00);
}

.shop-text {
	font-size: 15px;
	line-height: 2.0;
	margin-top: 1.0em;
}

.shopreverse {
	flex-wrap: wrap-reverse;
}

.bigshop-area {
	display: block;
	max-width: 1024px;
}

.kamio-text {
	display: block;
	margin-top: 15px;
	font-size: 18px;
}

.kyori {
	font-size: 0.9em;
	display: block;
	margin: auto;
	text-align: right;

	margin-top: 5px;
	color: #2E2E2E;
	
}

.image-txt {
display: block;
line-height: 1.5;
	margin: auto;
	
	text-align: left;
	
}

.lifestyle_banner {
	display: block;
	margin-top: 1.5em;
}

.schoolarea .school_ph{
	width: 100%;
}

.education-area li {
width: 31%;
    margin: auto;
    margin: 21px 11px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0;
}
.font-style01 p a{
	margin-top: 10px;
}