@charset "UTF-8";

/* ==========================================================================
   common
   ======================================================================= */
.u-hd__img {
  background-image: url(../img/plan/hd_img.jpg);
  background-position: 50% 50%;
}
.u-hd__label,
.u-hd__txt,
.u-article__ttl {
   color: #02893e;
}
.u-hd__label {
   border-color: #02893e;
}

.u-plan-ttl {
   width: 100%;
}

.u-ttl-inner__img {
   max-width: 1220px;
   width: 100%;
   margin: 80px auto 87px;
}

.u-ttl-inner__img img {
   width: 100%;
}

.u-map {
   width: 100%;
   background: #f0f7f9;
   max-width: 1220px;
   margin: 0 auto;
   padding: 2.5% 0;
}

.u-map__img {
   max-width: 1147px;
   width: 100%;
   position: relative;
   margin: auto;
}

.u-map__img p {
   position: absolute;
   font-size: 20px;
   line-height: 44px;
   letter-spacing: 0px;
   padding: 15px 0 0 44px;
}

.u-map__img img {
   top: 0%;
   right: 0;
   width: 100%;
}

.u-map__img * {
  outline: none!important;
}

.u-map__list {
   padding: 70px 0 40px 0;
   max-width: 1220px;
   width: 100%;
   margin: auto;
}

.u-map__ttl {
   font-size: 18px;
   font-weight: bold;
   background: #e7eff1;
   padding: 14px 23px;
   margin: 0 0 12px 0;
}

.u-map-list__inner {
   margin-bottom: 41px;
}

.u-map-list__inner ul {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.u-map-list__2col {
   position: relative;
   width: 100%;
   width: 100%;
   padding: 15px 9px 26px 77px;
   box-sizing: border-box;
   border-bottom: 1px dotted #e7eff1;
}

.u-map-list__2col .u-map-2col__ttl {
   position: absolute;
   font-size: 15px;
   padding: 0 12px 0 12px;
   font-weight: bold;
   left: 20px;
   top: 50%;
   margin: -12.5px;
   color: #000000;
}

.u-map-list__2col a, .u-map-list__2col span {
   font-size: 15px;
   position: relative;
   margin: 10px 0 0 15px;
   color: #000;
   display: inline-block;
}

.u-map-list__2col a:first-child {
   margin: 0 0 0 118px;
}

.u-map-list__2col a::before {
   content: " ";
   position: absolute;
   width: 12px;
   height: 12px;
   top: 0;
   bottom: 0;
   margin: auto 0;
   left: 12px;
   background-image: url(../img/plan/ico_arrow.png);
   background-size: contain;
   background-repeat: no-repeat;
}

.u-map-list__2col .note {
   margin-left: 40px;
   font-size: 13px;
}

.ico-prefectures{
   background: #b8e3f0;
   padding: 7px 20px 7px 34px;
   border-radius: 18px;
}
.ico-municipalities{
   background: #ffbaa7;
   padding: 7px 20px 7px 34px;
   border-radius: 18px;
}

span.ico-municipalities,
span.ico-prefectures {
   padding: 7px 27px 7px 27px;
}

.u-map-list__legend{
   margin-bottom: 20px;
}

.u-map-list__legend li{
   display: inline-block;
   font-size: 15px;
   font-weight: bold;
   line-height: 1;
}
.u-map-list__legend li + li{
   margin-left: 30px;
}
.u-map-list__legend li span{
   display: inline-block;
   vertical-align: middle;
   margin-left: 12px;
}

.u-map-list__legend--prefectures::before{
   content: "";
   display: inline-block;
   vertical-align: middle;
   width: 24px;
   height: 24px;
   background: #b8e3f0;
   border-radius: 12px;
}
.u-map-list__legend--municipalities::before{
   content: "";
   display: inline-block;
   vertical-align: middle;
   width: 24px;
   height: 24px;
   background: #ffbaa7;
   border-radius: 12px;
}

/* ==========================================================================
   pc
   ======================================================================= */
@media all and (min-width: 768px){
   .plan-section-wrapper{
      padding-left: 20px;
      padding-right: 20px;
      max-width: 1280px;
      margin: 80px auto;
      box-sizing: border-box;
      position: relative;
   }

   .lead{
      padding: 80px 0 60px 0;
      max-width: 1220px;
      width: 100%;
      margin: 0 auto;
   }
   .lead__txt{
      font-size: 160%;
      line-height: 2;
      width: 80%;
      margin: 0 auto;
   }
   .lead__txt + .lead__txt{
      margin-top: 50px;
   }
   .lead__btn{
      text-align: center;
      max-width: 780px;
      margin: 50px auto;
   }
   .lead__btn a{
      display: block;
      background: #00abc0;
      padding: 22px 26px;
   }
   .lead__btn-body{
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .lead__btn .lead__btn-body span{
      font-size: 200%;
      color: #FFF;
      font-weight: bold;
      vertical-align: middle;
   }
   .lead__btn i{
      width: 30px;
      height: 35px;
      background: url(../img/project/detail/ico_pdf.png) 0 0 no-repeat;
      vertical-align: middle;
      margin-left: 20px;
   }
   .no-touchevents .lead__btn a:hover{
      opacity: 0.8;
   }
}

@media all and (max-width: 1070px){
   .plan-section-wrapper{
      padding-left: 20px;
      padding-right: 20px;
      max-width: 1280px;
      margin: 80px auto;
      box-sizing: border-box;
      position: relative;
   }

   .u-map__img {
      width: 95%;
      margin: auto;
   }

   .u-map__img p {
      position: inherit;
      padding: 0px 10px;
      font-size: 2vw;
      line-height: 2;
      text-align: center;
      margin-bottom: 20px;
   }

   .lead{
      width: 90%;
      margin: 40px auto 40px;
      padding: 0;
   }
   .lead__txt{
      font-size: 160%;
      line-height: 2;
   }
   .lead__txt + .lead__txt{
      margin-top: 30px;
   }
   .lead__btn{
      max-width: 580px;
      margin: 30px auto;
      text-align: center;
   }
   .lead__btn a{
      background: #00abc0;
      padding: 15px 20px;
      display: block;
   }
   .lead__btn-body{
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .lead__btn .lead__btn-body span{
      font-size: 150%;
      color: #FFF;
      font-weight: bold;
      display: block;
   }
   .lead__btn i{
      width: 30px;
      height: 35px;
      background: url(../img/project/detail/ico_pdf.png) 0 0 no-repeat;
      margin-left: 10px;
      display: block;
   }
}

/* ==========================================================================
   responsive ajustment
   =======================================================================*/
@media all and (min-width: 768px) and (max-width: 1024px){
}




/* ==========================================================================
   sp
   ======================================================================= */
@media all and (max-width: 767px){
   .u-hd{
      height: auto;
   }
.u-hd__img {
  background-image: url(../img/plan/hd_img_sp.jpg);
  background-position: 50% 50%;
   background-size: cover;
    height: auto;
    padding-top: 130.6666667%;
}
.u-ttl {
   padding: 30px 0 0 0;
}

.u-hd__img {
   background-position: 50% 50%;
}

.u-ttl-inner__img {
   margin: 0 auto 30px;
}

.pc-br {
   display: none;
}

.u-map__img {
   width: 95%;
   margin: auto;
}

.u-map__list {
   width: 95%;
   margin: 40px auto 40px;
   padding: 0;
}

.u-map-list__inner {
   margin-bottom: 20px;
}
.u-map-list__2col {
    position: relative;
    max-width: 595px;
    width: 100%;
    padding: 11px 9px 26px 77px;
    box-sizing: border-box;
    border-bottom: 1px dotted #e7eff1;
}
.u-map-list__2col a {
   line-height: 2;
}

.u-map-list__2col a:after {
   content: "\A" ;
	white-space: pre ;
}

.u-map-list__2col .note {
   font-size: 9px;
   margin-left: 20px;
   margin-top: 5px;
   display: inline-block;
   line-height: 1.4;
   padding-left: 1em;
   text-indent: -1em ;
}
.u-map-list__2col a, .u-map-list__2col span {
   line-height: 1;
   font-size: 12px;
   margin-top: 15px;
}
.ico-prefectures{
   background: #b8e3f0;
   padding: 12px 20px 12px 34px;
   border-radius: 18px;
}
.ico-municipalities{
   background: #ffbaa7;
   padding: 12px 20px 12px 34px;
   border-radius: 18px;
}
span.ico-prefectures, span.ico-municipalities {
   padding: 12px 27px 12px 27px;
}
}

/* ==========================================================================
   css animation
   ======================================================================= */


/* ==========================================================================
   js animation
   ======================================================================= */