/* 周辺環境 */
#pankuzu{margin: 0;padding: 20px 0;}
.notes-area{ margin: 0% auto 0; }

.location-access{text-align: center}

.location-access .title_area{position: relative; background: url("../images/location_access/title_bg.svg") no-repeat top center}
.location-access h2.title1{font-weight: normal;font-size: 30px;letter-spacing: 0.2em;line-height: 1.8;margin-bottom: 25px}
.location-access h2.title1 span{font-size: 23px;}
.location-access .title_area .copy{letter-spacing: 0.1em;line-height: 2.3;font-size: 16px;}
.location-access .title_area .illa3{width: 93px;margin: 20px auto 0}
.location-access .title_area .illast{position: absolute}
.location-access .title_area .illast.illa1{top: 0px;left: 60px;width: 108px;}
.location-access .title_area .illast.illa2{top: 80px;right: 60px;width: 160px;}
.location-access .map1{margin: 60px 0 0;}
.location-access .map11{position: relative}
.location-access .map11 .area1{position: absolute;left: 47px;top: 126px; width: 650px}
.location-access .map11 .area2{position: absolute;left: 670px;top: 306px;width: 518px}
.location-access .map11 .area3{position: absolute;left: 632px;top:47px;width: 397px}

@media screen and (max-width: 668px) {/*スマホ設定*/
.location-access img{width: 100%;height: auto}
.swipe{width: 60%;margin: 10px auto;display: block}
.location-access{padding-top: 60px}
.location-access .title_area{background: url("../images/location_access/title_bg_sp.svg") no-repeat 0 center;background-size:100%}
.location-access h2.title1{font-size: 20px;letter-spacing: 0.2em;margin-bottom: 25px}
.location-access h2.title1 span{font-size: 13px;}
.location-access .title_area .copy{font-size: 13px;}
.location-access .title_area .illast.illa1{top: -10px;left: 0px;width: 40px;}
.location-access .title_area .illast.illa2{top: 50%;right: 0px;width: 80px;}
.location-access .title_area .illa3{width: 20%;margin: 20px auto 0}
.location-access .map11{width: 600px;position: relative}

.location-access .map11 .area1{position: absolute;left: 3%;top: 14%; width: 56%;}
.location-access .map11 .area2{position: absolute;left: 55%;top: 27%; width: 47%}
.location-access .map11 .area3{position: absolute;left: 54%;top: 4%; width: 34%}
.location-access .map11 .area1 img{width: 100%;height: auto}
}


.fade-in {
  opacity: 0;
  animation: fadeInAnime 1s ease-in forwards 0.5s; /* 0.5秒遅らせて1秒かけて表示 */
}
.fade-in2 {
  opacity: 0;
  animation: fadeInAnime 1s ease-in forwards 1s; /* 0.5秒遅らせて1秒かけて表示 */
}
.fade-in3 {
  opacity: 0;
  animation: fadeInAnime 1s ease-in forwards 1.5s; /* 0.5秒遅らせて1秒かけて表示 */
}
.fade-in4 {
  opacity: 0;
  animation: fadeInAnime 1s ease-in forwards 3s; /* 0.5秒遅らせて1秒かけて表示 */
}
.fade-in5 {
  opacity: 0;
  animation: fadeInAnime 1s ease-in forwards 4s; /* 0.5秒遅らせて1秒かけて表示 */
}
.fade-in6 {
  opacity: 0;
  animation: fadeInAnime 1s ease-in forwards 5s; /* 0.5秒遅らせて1秒かけて表示 */
}
/* アニメーションの動き */
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.bicycle{padding-top: 60px;background: #f0f4f4;padding-bottom: 60px;position: relative}
.bicycle::before{position: absolute;  content: "";  width: 100%;  height: 410px;  background-color: #fff;  top: 0;  left: 0;}
.bicycle .con{z-index: 1;position: relative}
.inner--base{position: relative}
.bicycle .illa4{position: absolute; top: -120px;right: 15%;width: 110px;}
.bicycle .illa5{position: absolute; top: 0px;right: 20%;width:88px;}
.bicycle .mv{margin-top: 50px;}

.image-box {flex: 1;    margin-left: calc(50% - 50vw);	margin-right: 4%}
.image-box img {  width: 100%;  height: 600px;  object-fit: cover;}
.txt-box{width: 50%;text-align: left;}
.txt-box h3{color: #639399;font-size: 23px;letter-spacing: 0.05em;line-height: 1.7;font-weight: normal;text-align: justify;}
.txt-box .copy{letter-spacing: 0.05em;line-height: 2.2;font-size: 15px;margin-top: 40px;text-align: justify;}
.bicycle .loc{text-align: center;margin-top: 60px}
.bicycle .loc h3{color: #639399;font-size: 23px;letter-spacing: 0.05em;line-height: 1.7;font-weight: normal;}
.bicycle .loc .copy{letter-spacing: 0.05em;line-height: 2.2;font-size: 15px;margin-top: 30px;}

@media screen and (max-width: 668px) {/*スマホ設定*/
.image-box {flex:auto;width: 100%; margin-left: 0;	margin-right:0}
.image-box img {  width: 90%;  height: 250px;  object-fit: cover;}
.txt-box{width: 90%;margin: auto}
.txt-box h3{margin-top: 30px; font-size: 18px;}
.txt-box .copy{font-size: 13px;}
.bicycle .illa4{position: absolute; top: 120px;right: 6%;width: 60px;z-index: 2}
.bicycle .illa5{position: absolute; top: 80px;right: 0%;width:40px;}
}


.slider_con{position: relative}
.regular{margin-top: 30px}
.regular li{margin: 0 10px}
.arrow_box {  display: flex;  align-items: center;  justify-content: flex-end;  position: absolute;width: 100%;left: 0;top: 50%;  transform: translateY(-50%);}
.prev-arrow,
.next-arrow {display: block;  width: 50px;  height: 50px;  transition: all .3s ease;  cursor: pointer;  position:relative;}
.prev-arrow { transform: rotate(180deg); position: absolute;left: -40px;}
.next-arrow{position: absolute;right: -40px}
.prev-arrow::before,
.next-arrow::before{
  position:absolute;  content: "";  width:20px;  height:20px;  border-right: 2px solid #333;  border-top: 2px solid #333;  top:0;  bottom:0;  left:0;  right:0;  margin:auto;  transform:rotate(45deg);}
.name{font-size: 16px;font-weight: bold;margin-top: 12px;}
.name span{font-size: 13px}
.add{font-size: 14px;}
.add span{font-size: 17px;}
.bt a{font-size: 17px;display: inline-block;background: #012a50;padding: 10px 20px; border-radius: 50px;color: #fff;margin-top: 30px}
@media screen and (max-width: 668px) {/*スマホ設定*/
.slider_con{margin-top: 30px}
.regular{width: 90%;margin: auto}
.name{font-size: 14px;}
.add{font-size: 12px;}
.add span{font-size: 15px;}
.prev-arrow {left: -10px;}
.next-arrow{right: -10px}
.bt a{font-size: 15px;display:block;}
}

.heading {  align-items: center;  display: flex;   justify-content: center;  font-size: 34px;letter-spacing: 0.2em;font-weight: normal;margin: 100px 0;}
.heading::before,
.heading::after {  background-color: #333;  content: "";  height: 1px;  width: 60px;}
.heading::before {  margin-right: 15px;}
.heading::after {  margin-left: 15px; }
@media screen and (max-width: 668px) {/*スマホ設定*/
.heading {font-size: 20px;margin: 60px 0}
}

.area dl{-webkit-box-align: start;	-ms-flex-align: start;	align-items: flex-start;}
.area dt{background: #639399;color: #fff;width: 50%}
.area dt p{font-size: 18px;color: #fff;padding: 10px 0;line-height: 1.8}
.area dt p .big{font-size: 26px;line-height: 1}
.area dt p .small{font-size: 14px}
.area dd{width: 50%;text-align: left;}
.area dd h3{padding-left: 60px;font-size: 26px;letter-spacing: 0.1em;font-weight: normal;border-bottom: 1px solid #333;padding-bottom: 25px;margin-bottom: 25px;position: relative}
.area dd h3 .big1{font-size: 22px}
.area dd h3 .big2{font-size: 36px}
.area dd h3 .small1{font-size: 17px}
.area dd h3 .small2{font-size: 14px;display: block;margin-top: 10px}
.area dd h4{padding-left: 60px;font-size: 20px;letter-spacing: 0.05em;font-weight: normal;color: #639399;}
.area dd .copy{padding-left: 60px;letter-spacing: 0.05em;line-height: 2;font-size: 15px;margin-top: 20px}
.area .photo{margin-top: 40px}


.area .illa6{position: absolute; top: 0px;right: 0%;width:189px;}
.area .illa7{position: absolute; top: 0px;right: -10px;width:119px;}
.area .illa8{position: absolute; top: 0px;right: -10px;width:185px;}

.area .area2,
.area .area3{margin-top: 160px}
.area .area2 dd{-webkit-box-ordinal-group:1;-ms-flex-order:1;-webkit-order:1;order:1;}
.area .area2 dt{-webkit-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2;}
.area .area2 dd h3,
.area .area2 dd h4,
.area .area2 dd .copy{padding-left: 0px;padding-right:60px;}

@media screen and (max-width: 668px) {/*スマホ設定*/
.area dd{-webkit-box-ordinal-group:1;-ms-flex-order:1;-webkit-order:1;order:1;}
.area dt{-webkit-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2;}
.area dt{width: 90%;margin: 30px auto 0}
.area dd{width: 90%;margin: auto;text-align: left;}
.area dd h3{padding-left: 0px;}

.area dt p{font-size: 14px;}
.area dt p .big{font-size: 20px;}
.area dt p .small{font-size: 12px}

.area dd h3{padding-left: 0px;font-size: 20px;}
.area dd h3 .big1{font-size: 18px}
.area dd h3 .big2{font-size: 22px}
.area dd h3 .small1{font-size: 12px}
.area dd h3 .small2{font-size: 13px;}
.area dd h4{padding-left: 0px;font-size: 17px;}
.area dd .copy{padding-left: 0px;font-size: 13px;}
.area .illa6{position: absolute; top: 50px;right: 0%;width:90px;}
.area .illa7{position: absolute; top: 60px;right: -10px;width:60px;}
.area .illa8{position: absolute; top: 60px;right: -10px;width:90px;}

.area .area2,
.area .area3{margin-top: 60px}
.area .area2 dd h3,
.area .area2 dd h4,
.area .area2 dd .copy{padding-left: 0px;padding-right:0px;}

.area .photo{width: 70%;margin: 40px auto 0}
.area .photo .col3{width: 100%;margin-top: 30px}
}





.development{text-align: center;margin: 160px 0 0;position: relative}
.development h2 {  font-size: 34px;letter-spacing: 0.2em;font-weight: normal;margin: 100px 0 40px;}
.development h3{color: #639399;font-size: 23px;letter-spacing: 0.05em;line-height: 1.7;font-weight: normal;margin-top: 60px;}
.development .copy{letter-spacing: 0.05em;line-height: 2.2;font-size: 15px;margin-top: 40px;position: relative}
.development .bg{background: #f0f4f4;padding-top: 30px;}
.development .map2{width: 850px;margin: 40px auto;}
.development .schedule{background: #fff;margin-top: 60px;text-align: left;padding: 80px;}
.development .schedule h4{font-size: 30px;color: #9f8d60; letter-spacing: 0.05em;line-height: 1.7;font-weight: normal;margin-bottom: 40px}
.development .schedule .coution{font-size: 13px;margin-top: 10px}
.development .schedule .color1{color: #9f8d60}
.development .schedule .color2{color: #e95513}
.development .catch{background: #639399;color: #fff;text-align: center;  font-size: 26px;font-weight: normal;letter-spacing: 0.1em;margin: 60px 0 0px;padding: 20px}

.development h6{border-top: 1px solid #fff;padding-top: 20px;margin-top: 20px}

.development .illa9{position: absolute; top: -40px;left:2%;width:153px;z-index: 3}
.development .illa10{position: absolute; top:40%;right:-48px;width:88px;}

@media screen and (max-width: 668px) {/*スマホ設定*/
.development{margin: 60px 0 0;}
.development h2 {  font-size: 22px;margin: 60px 0 20px;}
.development h3{font-size: 18px;margin-top: 30px;}
.development .copy{font-size: 13px;margin-top:20px;}
.development .illa9{position: absolute; top: 80px;left:0%;width:70px;z-index: 3}
.development .illa10{position: absolute; top:60%;right:0px;width:40px;}
.development .map2{width: 600px;margin:20px  0 0}
.development .schedule{margin-top: 40px;text-align: left;padding: 20px;}
.development .schedule h4{font-size: 18px;margin-bottom: 20px}
.development .schedule .coution{font-size: 9px;}

.table-scroll {  overflow-x: auto;}
.table-scroll div{width: 750px;}
.development .catch{font-size: 17px;padding: 20px 0}

}