/* format.cssに反してる */
.contents{margin: 50px auto 0 auto; padding: 0 0 10px 0;}

@media screen and (min-width: 740px) {
  .contents.station { margin-bottom:100px; }
  .contents.estate { margin-bottom:100px; }
}

.PC{display: block;}
.SP{display:none;}
/* .title_top{margin:50px 0 0 0;} */
.title{text-align:center; width:100%; display:block; padding: 0px 0 30px 0; margin-top:20px; }
.title.onedy_click { position:relative; }
.title.onedy_click img.onedy_click { width:220px; position:absolute; right:0; bottom:50px; display:block; }
.title h1{margin: 15px 0 0 0; }
.title p{margin-top: 30px;}
.title strong{color: #0A3F67;font-size: 50px;letter-spacing: 0.05em;font-weight: 500;}



@media screen and (max-width: 1120px) {
  .menu ul li .menu_area_sp .menu_border { border-left:5px solid #FED631; }
  .menu ul li span.menu_area_sp i.fa-plus { display:none; }
  .menu ul li .menu_area_sub { display:block; height:auto; opacity:1; transition:0.3s; }
  .title.onedy_click img.onedy_click { width:20%; position:absolute; right:0; bottom:100px; display:block; }
}

@media screen and (max-width:740px) {
  .title.onedy_click img.onedy_click { width:50%; margin:0 auto; display:block; position:relative; bottom:initial; }
}



@media screen and (max-width: 740px) {
.PC{display: none;}
.SP{display:block;}
.contents {margin: 0px auto 0 auto;}
.title{padding: 0px 0 30px 0; marign-top:50px; }
.title_top{margin: 10px 0 20px 0;}
.title strong{font-size: 9vw;}

}
/* ここまで共通 */

.wrap_grey{height: 8vw;}

.wrap{background:none;}
.wrap_grey2.noback { background:none; }
.wrap_grey.noback { background:none; }



/* area/index.php */
.mv{width: 1280px;margin: 0 auto 40px;}
.mv img{width: 100%;}
@media screen and (max-width: 1120px) {
  .mv{width: 100%;}
}
@media screen and (max-width: 740px) {
  .mv{width: 90%;}
  .wrap_grey {
    width: 100%;
    height:10vw;
    background: url(../../img/bg_grey.png) repeat-x;
    background-size: 100px;
}
}

.bg_city{width: 100%;background-size: cover;background-position-y: bottom;height: fit-content;background: #f8f8f8;padding-top: 1px;position: relative;z-index: 0;}
.bg_city.noback { background:none; }
.ill_l{position: absolute;left: 7vw;}
.ill_r{position: absolute;left:13vw;top: 0px;}
.city{display: flex;justify-content: space-between;margin:50px auto;}
.city_button{display: block;width: 310px;height: 310px;border-radius: 18px;background: #fff;box-shadow: 3px  3px 6px rgba(0,0,0,0.3);}
.title_city{height: 70px;margin:0;padding: 20px 0 0 0;}
.title_city img{height: 30px;width: auto;}
.title_city p{margin: 10px 0 0 0;}
.city_button_img{height: 220px;overflow:hidden;border-top-left-radius : 0px;
border-bottom-left-radius : 0px;
border-top-right-radius : 18px;
border-bottom-right-radius : 18px;}
.city_button_img img{height: 100%;width: auto;}

@media screen and (max-width: 740px) {
.bg_city{height: fit-content;}
.bg_city.noback { background:none; }
.city{flex-direction: column;margin-bottom:0; }
/*.city_button{width: 100%;}*/
.city_button_img img{height:auto;width:100%;}
.title_city{width:50%; height:auto;margin:0;padding: 0px 0 0 0;}
.city_button{display:flex;width:100%;height:auto;border-radius: 18px;background: #fff;box-shadow: 3px  3px 6px rgba(0,0,0,0.3);
align-items: center;}
.city_button_img{width:50%; height:auto;overflow:hidden;border-bottom-right-radius: 18px;
border-radius: 0 18px 18px 0; margin-top:0; }
.title_city img{height: 18px;width: auto;}
.ill_r { display:none; }
.ill_l { display:none; }

}



/* city.php */
.city_top strong{font-size: 16px;letter-spacing: 0.2em;}
.city_img{width: 800px;height:320px;overflow: hidden;margin:0 auto 40px;}
.city_img img{width:100%;}
.city_text{width: 800px;margin:0 auto;}
@media screen and (max-width: 740px) {
.city_img{width: 95%;margin: 20px auto;height: auto;}
.city_text{width: 95%;}
}

/* CITY_CONTENTS.php */
.area_button_flex{display: flex;justify-content: center;margin: 30px auto 30px auto;gap:15px; }
.area_button{display: block;border-radius: 18px;background: #0A3F67;box-shadow: 3px  3px 6px rgba(0,0,0,0.3);text-align: center;
margin:0 0 15px 0; }
.area_button_contents{width: 240px;height:180px;}
.area_button_buy{width: 200px;height:180px;}
.area_button_title{font-size: 18px;color: #FED631;letter-spacing: 0.1em;margin: 20px auto 10px;}
.area_button_title_search { font-size:14px; line-height:1.5; font-weight: bold;}
.area_button_img{margin:0 auto;}
.area_button_contents .area_button_img{height: 100px;}
.area_button_buy .area_button_img{height: 80px;}
.area_button_img img{height: 100%;width: auto;}
@media screen and (max-width: 740px) {
  .area_button_flex{flex-direction: column; /*gap: 15px;*/}
  .area_button_title{margin: 0 auto; text-align: left;}
  .area_button_contents{width: 100%;display: flex;height: 120px;align-items: center; margin:0 0 30px 0; }
  }

/* CITY_SELL.php*//* sell.cssyと同じ*/
.assessment{width: 100%;display: flex;justify-content: space-between;margin-bottom: 100px;}
.ass_bg{width: 520px;height: auto;background: #EDEDED;border-radius: 18px;padding: 30px 0;}
.title_ass{height: auto;margin: 0px auto 20px;padding: 0;}
.title_ass_img{height: 30px;margin: 0 auto;}
.title_ass .title_p{margin-top: 10px;font-weight: bold;font-size: 16px;}
.title_ass small{font-size: 14px;}
.ass_button_flex{display: flex;width: 480px;justify-content: space-around;margin: 0 auto;height: 110px;text-align: center;}
.ass_button{border-radius: 18px;box-shadow: 3px  3px 6px rgba(0,0,0,0.3);display: block;width:140px;background: #0A3F67;padding: 10px 0;}
.ass_button_title{font-size: 16px;letter-spacing: 0.05em;color: #FED631;}
.ass_button_img img{height: 60px;}
@media screen and (max-width: 740px) {
.assessment{flex-direction: column;gap: 15px; margin-bottom:0; }
.ass_bg{width: 100%; margin-bottom:30px; }
.ass_button_flex{width: 90%;}
.ass_button{width: 30%;}
.area_button_buy{width: 100%;display: flex;height: 120px;align-items: center;}
.ass_button_title {font-size: 13px;}
.ass_button_img img {height: 15vw;}
.title_ass_img{height: 8vw;}
.title_ass .title_p{margin-bottom: 10px;}
}

/* AREA_SCHOOL.php AREA_STATION.php */
.table{width: 100%;text-align: left;box-shadow: 3px  3px 6px rgba(0,0,0,0.1);}
.table_town{margin-bottom: 20px;}
.table_title{background: #DDDDDD;height: 30px;;line-height: 30px;padding-left: 30px;}
.table_flex{display: flex;border-bottom: solid 0.1px #DDDDDD;}
.table_flex a:hover{text-decoration: underline;}
.table_flex_left{width: 100px;background: #F0F0F0;padding: 30px;}
.table_flex_right{width: 860px;background: #fff;padding: 30px;display: flex;flex-wrap: wrap;gap: 15px 0;}
.table_flex_right a{display: block;width: 160px;margin:0;}
.table_flex_right a{width:auto;min-width:20%; max-width:30%; display: block;;margin:0;}
.fa-solid { margin-right:5px; }


@media screen and (max-width: 740px) {
  .table_flex{flex-direction: column;}
  .table_flex_left,.table_flex_right{width: calc(100% - 60px);}
  .table_flex_left{padding: 5px 30px;}
  .table_flex_right a{width:auto;min-width:50%; max-width:100%; display: block;;margin:0;}


 }
  .table_town_t{width: fit-content;background: #FED631;padding: 0px 20px;margin-bottom: 10px;}


/* station.php */
.s_top{display: flex;width: 1080px;margin: 0 auto 50px;justify-content: space-between;}
.s_top .s_img{width: 540px; height: 390px; display:flex; justify-content:center; align-items:center; overflow: hidden;}
.s_top .s_img img{width: 100%;}
.s_top .s_img.noimage {background: #d8d8d8;}
.s_top .s_img.noimage img{width: 60%;}
.s_top .s_text {width: 540px; height: 340px; display:flex; justify-content:center; align-items:center; overflow: hidden; background:none; flex-wrap:wrap; }

.s_top .s_map{width: 500px;}
.s_top .s_map iframe{height: 365px;width: 100%;}
.s_top .s_map p{height: 25px;;line-height: 25px;display: block;letter-spacing: 0.2em;}
.s_text{width: 1080px;margin:0 auto;}
strong.feature{width:100%; border-bottom: solid 0.1px #DDDDDD;height: 30px;line-height: 30px;display: block; text-align:left; }
p.feature{ margin:10px 0 130px 0; text-align: justify;}
.s_info{width: 1080px;margin:50px auto;}
.s_info tr{height: 45px;line-height: 45px;border-bottom: solid 0.1px #DDDDDD;letter-spacing: 0.05em;}
.s_info tr.tr_top{border-top: solid 0.1px #DDDDDD;}
.s_info th{width: 220px;background: #F0F0F0;padding-left: 30px;font-weight: normal;}
.s_info td{width:850px;padding-left: 30px; line-height:1.7em; vertical-align: middle; padding:10px 0 10px 10px; }
.s_info td a{ display:inline-block; margin-right:10px;}
.s_info td a:hover { text-decoration:underline;}
@media screen and (max-width: 740px) {
.s_top{width: 95%;flex-direction: column;}
p.feature { margin-bottom:100px; }
.s_top .s_text {width: 100%; height: auto; display:inline-block; text-align: justify;}
.s_top .s_img{width: 100%;height: auto;}
.s_top .s_map{width: 100%;height: auto;margin-top: 20px;}
.s_top .s_map iframe{height: 200px;}
.s_text{width: 95%;}
.s_info{width: 95%;}
.s_info th{margin: 0;width: calc(100% - 20px);padding: 0 10px;}
.s_info td{margin: 0;width: calc(100% - 20px);padding: 10px;}
.s_info td a { display:inline-block; margin-right:0; }
.s_info tr{display: flex;flex-direction: column;height: auto;}

}


/* 電車の動き */
.demo_item{
	width: 159px;
    height: 91px;
    background-image: url(../img/train.png);
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    position: relative;


}
.demo_item.anime{
    animation-name: upDown;
    animation-iteration-count: infinite;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-timing-function: steps(2);
    transition-duration: .3s;
    transition-property: transform;
}

.mv{position:relative;}
.demo_stage{
    position: absolute;
    width: 400px;
    height: 91px;
    top: 40px;
    display: block;
    right: 350px;
}

@media screen and (max-width: 740px) {
.demo_stage,.flower2,.flower1{display:none;}}



.demo_wrap{
	display: block;
    position: absolute;
    top: -40px;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 15s;
    animation-iteration-count: 1;
	margin-right: -25px;
}
.demo_wrap[data-order="left"] {
    animation-name: GoLeft;
}
.demo_wrap[data-order="right"] {
    animation-name: GoRight;
}

[data-order="right"] > .demo_item {
    transform: rotateY(180deg);
}
@keyframes GoLeft {
    0% {
        right: 10%;
    }
    100% {
        right: 90%;
    }
}
@keyframes GoRight {
    0% {
        right: 90%;
    }
    100% {
        right: 10%;
    }
}

@keyframes upDown {
    0% {
        top: 0;
    }
    100% {
        top: 5px;
    }
}


.box{margin: 0;position: absolute;}

/* ワンディスキップ */
.skip {
  bottom: -20px;left: 40px;width:74px;
  animation: pikopiko 1s steps(2, start) infinite;
}
 @media screen and (max-width: 740px) {
.skip {display:none;}}

@keyframes pikopiko {
  0% {
    transform: rotate(20deg);
  }
  to {
    transform: rotate(-10deg);
  }
}

/* お花 */
.flower1{top: -20px;width: 60px;left: 30px;animation:4s linear infinite rotation1;}
.flower2{bottom: -20px;right: 390px;width:60px;animation:4s linear infinite rotation1;}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}



/* 風船 */
.fusen {
   width: 62px;
   animation: fuwafuwa 2s infinite;
   position: absolute;
   right: 140px;
   top: -10px;
}

@media screen and (max-width: 740px) {
.fusen {display:none;}}

@keyframes fuwafuwa {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/*マウスオーバーで写真がズーム*/
.zoom_box{
  width:310px;
  margin:0 auto;
  overflow:hidden;
  border-radius:0 0 18px 18px;
  display:block;
  will-change: transform;
 }
 .zoom_box img{
  width:100%;
  transition:1s all;
  margin-top:15px;
  border-radius:0 0 18px 18px;
  display:block;
 }
 .zoom_box img:hover{
   transform:scale(1.2,1.2);
   transition:1s all;
 }

 @media screen and (max-width: 740px) {
  .zoom_box{
    width:100%;
    margin:0 auto;
    overflow:hidden;
    border-radius:0 18px 18px 0;
    display:block;
    will-change: transform;
   }
   .zoom_box img{
    width:100%;
    transition:1s all;
    margin-top:0px;
    border-radius: 0 18px 18px 0;

    display:block;
   }
   .zoom_box img:hover{
     transform:scale(1.2,1.2);
     transition:1s all;
   }
   .city_button { margin:0 auto 15px auto;}
  }


  .contents.station { margin:50px auto 50px auto; }
  @media screen and (min-width: 740px) {

    .contents.station { margin:50px auto 100px auto; }



}