@charset "utf-8";

@media (max-width: 767px) {
}

@media (min-width: 768px) and (max-width: 991px) {
}

@media (min-width: 992px) and (max-width: 1199px) {
}

@media (min-width: 1200px) {
}

@media (max-width: 767px) {
  .textnormal {
    padding: 0 10px 0.7em 10px;
  }
  .logomark img {
    width:20px;
    margin: 0 auto 30px auto;
  }
  .titledesign {
    background:#000000;
    width:100%;
    height:100px;
    background-position:50% 50%;
    background-size:auto 100%;
    background-repeat:no-repeat;
  }
    .titledesign div {
      background-image: url(../images/bg_sq01.png);
      height:100%;
      width:100%;
      text-align:center;
    }
      .titledesign img {
        width:20px;
        height:auto;
        margin: 0 0 0 0;
        padding: 15px 0 0 0;
      }
      .titledesign h2 {
        color:#FFFFFF;
        font-weight:normal;
        font-size:22px;
        padding-top: 10px;
        margin:0;
      }

  .titledesign.part1 {
    background-image: url(../images/title_bg01.png);
  }
  .titledesign.part2 {
    background-image: url(../images/title_bg02.png);
  }
  .titledesign.part3 {
    background-image: url(../images/title_bg03.png);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .textnormal {
    padding: 0 10px 0.7em 10px;
  }
  .logomark img {
    width:20px;
    margin: 0 auto 30px auto;
  }
  .titledesign {
    background:#000000;
    width:100%;
    height:100px;
    background-position:50% 50%;
    background-size:auto 100%;
    background-repeat:no-repeat;
  }
    .titledesign div {
      background-image: url(../images/bg_sq01.png);
      height:100%;
      width:100%;
      text-align:center;
    }
      .titledesign img {
        width:20px;
        height:auto;
        margin: 0 0 0 0;
        padding: 15px 0 0 0;
      }
      .titledesign h2 {
        color:#FFFFFF;
        font-weight:normal;
        font-size:22px;
        padding-top: 10px;
        margin:0;
      }

  .titledesign.part1 {
    background-image: url(../images/title_bg01.png);
  }
  .titledesign.part2 {
    background-image: url(../images/title_bg02.png);
  }
  .titledesign.part3 {
    background-image: url(../images/title_bg03.png);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .textnormal {
    padding: 0 20px 0.7em 20px;
  }
  .logomark img {
    width:30px;
    margin: 0 auto 50px auto;
  }
  .titledesign {
    background:#000000;
    width:100%;
    height:170px;
    background-position:50% 50%;
    background-size:auto 100%;
    background-repeat:no-repeat;
  }
    .titledesign div {
      background-image: url(../images/bg_sq01.png);
      height:100%;
      width:100%;
      text-align:center;
    }
      .titledesign img {
        width:30px;
        height:auto;
        margin: 0 0 0 0;
        padding: 35px 0 0 0;
      }
      .titledesign h2 {
        color:#FFFFFF;
        font-weight:normal;
        font-size:25px;
        padding-top: 15px;
        margin:0;
      }

  .titledesign.part1 {
    background-image: url(../images/title_bg01.png);
  }
  .titledesign.part2 {
    background-image: url(../images/title_bg02.png);
  }
  .titledesign.part3 {
    background-image: url(../images/title_bg03.png);
  }
}

@media (min-width: 1200px) {
  .textnormal {
    padding: 0 20px 0.7em 20px;
  }
  .logomark img {
    width:30px;
    margin: 0 auto 50px auto;
  }
  .titledesign {
    background:#000000;
    width:100%;
    height:170px;
    background-position:50% 50%;
    background-size:auto 100%;
    background-repeat:no-repeat;
  }
    .titledesign div {
      background-image: url(../images/bg_sq01.png);
      height:100%;
      width:100%;
      text-align:center;
    }
      .titledesign img {
        width:30px;
        height:auto;
        margin: 0 0 0 0;
        padding: 35px 0 0 0;
      }
      .titledesign h2 {
        color:#FFFFFF;
        font-weight:normal;
        font-size:25px;
        padding-top: 15px;
        margin:0;
      }

  .titledesign.part1 {
    background-image: url(../images/title_bg01.png);
  }
  .titledesign.part2 {
    background-image: url(../images/title_bg02.png);
  }
  .titledesign.part3 {
    background-image: url(../images/title_bg03.png);
  }
}

/*MAP-------------------------------------------------------------------------------------------------*/

.map01{
margin-bottom:360px !important;
margin-top:-10px;
}

#map03 {
  overflow:hidden;
}

@media (max-width: 767px) {
.map01 {
  width:100%;
  height:250px;
  background-image: url(../images/bg_map01.png);
  background-position:50% 50%;
}
  .map02 {
    position:relative;
    width:100%;
    height:250px;
    background-image: url(../images/map.png);
    background-position:50% 50%;
    background-size:auto 100%;
    background-repeat:no-repeat;
  }

#map03 {
  position:absolute;
  top:230px;
  width:100%;
}

#map04 li {
  position:relative;
  width:200px !important;
  margin: 0 10px;
  padding:5px;
  background-color:#FFFFFF;
  border:1px solid #DFDFDF;
  text-align:left;
  min-height:300px;
}
  #map04 li img {
    width:100%;
    margin: 0 0 5px 0;
  }
  #map04 li h3 {
    font-size:15px;
    margin: 0 0 5px 0;
    padding: 0 5px;
    font-weight:bold;
    line-height:20px;
  }
  #map04 li p {
    font-size:12px;
    line-height:16px;
    padding: 0 5px;
  }

#map04 li .icon {
  position:absolute;
  top:-10px;
  left:-10px;
  font-size:16px;
  line-height:16px;
  text-align:center;
  display:inline-block;
  color:#FFFFFF;
  font-weight:bold;
  padding:5px 0 0 0 ;
  width:30px;
  height:30px;
  border-radius: 50%;
  background-color:#ed6f47;
  border:3px solid #FFFFFF;
}
#map04 li .icon2 {
  background-color: #74ad32 !important;
}



.bxslider02 {
  position:relative;
}
.bxslider02 a {
  font-size:10px;
  line-height:10px;
  text-align:center;
  display:inline-block;
  color:#FFFFFF;
  font-weight:bold;
  padding:4px 0 0 0 ;
  width:20px;
  height:20px;
  border-radius: 50%;
  background-color:#ed6f47;
  border:2px solid #FFFFFF;
}
.bxslider02 a:hover {
  background-color:#fa8a66;
  text-decoration:none;
}
.bxslider02 a.shichi {
  background-color: #74ad32 !important;
}
.bxslider02 a.shichi:hover {
  background-color: #93d04d !important;
}


.bxslider02 .mapicon01 { position:absolute; top:   65px; left:50%; margin-left:    80px;}
.bxslider02 .mapicon02 { position:absolute; top:   35px; left:50%; margin-left:    20px;}
.bxslider02 .mapicon03 { position:absolute; top:   70px; left:50%; margin-left:    15px;}
.bxslider02 .mapicon04 { position:absolute; top:   85px; left:50%; margin-left:    35px;}
.bxslider02 .mapicon05 { position:absolute; top:   55px; left:50%; margin-left:    45px;}
.bxslider02 .mapicon06 { position:absolute; top:  150px; left:50%; margin-left:   115px;}
.bxslider02 .mapicon07 { position:absolute; top:  100px; left:50%; margin-left:   -10px;}
.bxslider02 .mapicon08 { position:absolute; top:   40px; left:50%; margin-left:   -10px;}
.bxslider02 .mapicon09 { position:absolute; top:   50px; left:50%; margin-left:   -70px;}
.bxslider02 .mapicon10 { position:absolute; top:   15px; left:50%; margin-left:   -20px;}
.bxslider02 .mapicon11 { position:absolute; top:   10px; left:50%; margin-left:    20px;}
.bxslider02 .mapicon12 { position:absolute; top:   25px; left:50%; margin-left:  -110px;}
.bxslider02 .mapicon13 { position:absolute; top:  165px; left:50%; margin-left:   -20px;}

.bxslider02 .mapicon14 { position:absolute; top:   130px; left:50%; margin-left:   -10px;}
.bxslider02 .mapicon15 { position:absolute; top:    75px; left:50%; margin-left:   -70px;}
.bxslider02 .mapicon16 { position:absolute; top:    85px; left:50%; margin-left:   -10px;}
.bxslider02 .mapicon17 { position:absolute; top:    40px; left:50%; margin-left:   -30px;}
.bxslider02 .mapicon18 { position:absolute; top:    65px; left:50%; margin-left:    60px;}
.bxslider02 .mapicon19 { position:absolute; top:   160px; left:50%; margin-left:    95px;}
.bxslider02 .mapicon20 { position:absolute; top:   180px; left:50%; margin-left:    70px;}

.map01 .bx-wrapper {
}
.map01 .bx-viewport{
  overflow:visible!important;
  width: 220px !important;
  text-align:center;
  margin: 0 auto;
}
}

@media (min-width: 768px) {
.map01 {
  width:100%;
  height:500px;
  background-image: url(../images/bg_map01.png);
  background-position:50% 50%;
  margin-bottom:250px;
}
  .map02 {
    position:relative;
    width:100%;
    height:500px;
    background-image: url(../images/map.png);
    background-position:50% 50%;
    background-size:auto 100%;
    background-repeat:no-repeat;
  }

#map03 {
  position:absolute;
  top:450px;
  width:100%;
}

#map04 li {
  position:relative;
  width:200px !important;
  margin: 0 10px;
  padding:5px;
  background-color:#FFFFFF;
  border:1px solid #DFDFDF;
  text-align:left;
  min-height:300px;
}
  #map04 li img {
    width:100%;
    margin: 0 0 5px 0;
  }
  #map04 li h3 {
    font-size:15px;
    margin: 0 0 5px 0;
    padding: 0 5px;
    font-weight:bold;
    line-height:22px;
  }
  #map04 li p {
    font-size:12px;
    line-height:18px;
    padding: 0 5px;
  }

#map04 li .icon {
  position:absolute;
  top:-10px;
  left:-10px;
  font-size:16px;
  line-height:16px;
  text-align:center;
  display:inline-block;
  color:#FFFFFF;
  font-weight:bold;
  padding:5px 0 0 0 ;
  width:30px;
  height:30px;
  border-radius: 50%;
  background-color:#ed6f47;
  border:3px solid #FFFFFF;
}
#map04 li .icon2 {
  background-color: #74ad32 !important;
}



.bxslider02 {
  position:relative;
}
.bxslider02 a {
  font-size:12px;
  line-height:12px;
  text-align:center;
  display:inline-block;
  color:#FFFFFF;
  font-weight:bold;
  padding:5px 0 0 0 ;
  width:25px;
  height:25px;
  border-radius: 50%;
  background-color:#ed6f47;
  border:2px solid #FFFFFF;
}
.bxslider02 a:hover {
  background-color:#C30003;
  border:2px solid #FFFF00;
  text-decoration:none;
}
.bxslider02 a.shichi {
  background-color: #74ad32 !important;
}
.bxslider02 a.shichi:hover {
  background-color:#158000 !important;
  border:2px solid #FFFF00;
}

.bxslider02 .mapicon01 { position:absolute; top:   130px; left:50%; margin-left:    160px;}
.bxslider02 .mapicon02 { position:absolute; top:    70px; left:50%; margin-left:     40px;}
.bxslider02 .mapicon03 { position:absolute; top:   140px; left:50%; margin-left:     30px;}
.bxslider02 .mapicon04 { position:absolute; top:   170px; left:50%; margin-left:     70px;}
.bxslider02 .mapicon05 { position:absolute; top:   110px; left:50%; margin-left:     90px;}
.bxslider02 .mapicon06 { position:absolute; top:   300px; left:50%; margin-left:    230px;}
.bxslider02 .mapicon07 { position:absolute; top:   200px; left:50%; margin-left:    -20px;}
.bxslider02 .mapicon08 { position:absolute; top:    80px; left:50%; margin-left:    -20px;}
.bxslider02 .mapicon09 { position:absolute; top:   100px; left:50%; margin-left:   -140px;}
.bxslider02 .mapicon10 { position:absolute; top:    30px; left:50%; margin-left:    -40px;}
.bxslider02 .mapicon11 { position:absolute; top:    20px; left:50%; margin-left:     40px;}
.bxslider02 .mapicon12 { position:absolute; top:    50px; left:50%; margin-left:   -220px;}
.bxslider02 .mapicon13 { position:absolute; top:   330px; left:50%; margin-left:    -40px;}

.bxslider02 .mapicon14 { position:absolute; top:   260px; left:50%; margin-left:    -20px;}
.bxslider02 .mapicon15 { position:absolute; top:   130px; left:50%; margin-left:   -140px;}
.bxslider02 .mapicon16 { position:absolute; top:   170px; left:50%; margin-left:    -40px;}
.bxslider02 .mapicon17 { position:absolute; top:    80px; left:50%; margin-left:    -60px;}
.bxslider02 .mapicon18 { position:absolute; top:   130px; left:50%; margin-left:    120px;}
.bxslider02 .mapicon19 { position:absolute; top:   320px; left:50%; margin-left:    190px;}
.bxslider02 .mapicon20 { position:absolute; top:   360px; left:50%; margin-left:    140px;}

.map01 .bx-wrapper {
}
.map01 .bx-viewport{
  overflow:visible!important;
  width: 220px !important;
  text-align:center;
  margin: 0 auto;
}
}

/*ILLUST-------------------------------------------------------------------------------------------------*/


  .illustbox{
    text-align:center;
  }
  .illustbox img{
    width:60%;
    margin-bottom:10px;
  }
  .illustbox p{
    text-align:left;
  }

.bottomimg {
  width:100%;
  max-height:400px;
  overflow:hidden;
  }
.bottomimg img {
  width:100%;
  height:auto;
  }


@media (max-width: 767px) {
  .illustbox img{
    width:50%;
    margin-bottom:10px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
.bottomimg {
  position:relative;
  width:100%;
  height:400px;
  overflow:hidden;
  }
.bottomimg img {
  width:100%;
  height:auto;
  position:absolute;
  top:50%;
  margin-top:-30%;
  }
}

@media (min-width: 992px) {
.bottomimg {
  position:relative;
  width:100%;
  height:400px;
  overflow:hidden;
  }
.bottomimg img {
  width:100%;
  height:auto;
  position:absolute;
  top:50%;
  margin-top:-40%;
  }
}