/* =========================================================
		main
========================================================= */

html{
  scroll-behavior: smooth;
}

:root {
  --anime1:#1f95c6;
  --anime2:#8ea22e;
  --anime3:#d06676;
  --anime4:#9f88b3;
}

.sp-none{display: block;}
.pc-none{display: none;}

.map_page .wrapper{
  padding-top: 5%;
}
.map_page .ttl{ margin-bottom: 2%;}
.desc{
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 4%;
}


.to_top-page{
  margin: 0 auto 2% 0;
  background:#fff;
  width: 160px!important;
  padding: 0;
}

.single-news .more_btn.to_top-page{
  margin: 0 auto 2% 0;
}

.to_top-page p{
  color: #27385d;
  text-align: left;
}

.to_top-page  p:before {
display: none;
}

.to_top-page p:after{
  right: 25%;
}


.map_page{ position: relative;}
.map_page::before{
  display: inline-block;
  position: absolute;
  content: "";
  background: url(../images/modelmap/map_ashirai1.webp) center/contain no-repeat;
  width: 7%;
  height: 50%;
  right: 3%;
  top: -8%;
}

.map_page::after{
  display: inline-block;
  position: absolute;
  content: "";
  background: url(../images/modelmap/map_ashirai2.webp) center/contain no-repeat;
  width: 7%;
  height: 50%;
  left: 2%;
  top: -8%;
}

.map_page .pickup_list{ margin-top: 10%;}
.map_page .attend{ text-align: right;}
.map_page .pickup_link:after{
  transform: rotate(135deg);
  right: 5px;
  bottom: 3px;
}

.pickup_copy {
  font-size: 9px;
  text-align: left;
  display: flex;
  gap: 0 20px;
}

.pickup_copy p{
  flex: 1;
}


.map_area{position: relative;}
.map_pin{position: absolute; width: 3.4%;}

.map_pin.map_pin1{
  bottom: 19.7%;
  left: 20.5%;
}

.map_pin.map_pin2{
  bottom: 9.7%;
  left: 10.6%;
}

.map_pin.map_pin3{
  bottom: 21%;
  left: 41.9%;
}

.map_pin.map_pin4{
  top: 38.6%;
  left: 36.7%;
}

.map_pin.map_pin5{
  top: 34.9%;
  left: 44.7%;
}

.map_pin.map_pin6{
  top: 35.5%;
  right: 33%;
}

.map_pin.map_pin7{
  bottom: 18.3%;
  right: 23.4%;
}

.map_pin.map_pin8{
  top: 45%;
  right: 42%;
  width: 4.6%;
}

.map_pin.map_pin9{
  top: 49%;
  right: 40%;
  width: 3.6%;
}

.map_pin.map_pin10{
  top: 45.4%;
  right: 36.5%;
  width: 4.6%;
}

.map_pin.map_pin11{
  bottom: 33.5%;
  right: 33.6%;
  width: 6.2%;
}

.map_pin.map_pin12{
  bottom: 29%;
  right: 39.5%;
  width: 4.5%;
}

.map_pin.map_pin13{
  top: 42%;
  right: 20%;
  width: 3.6%;
}
.map_pin.map_pin14{
  top: 46%;
  right: 14.3%;
  width: 6%;
}

.map_pin.map_pin15{
  top: 52%;
  right: 20%;
  width: 5.8%;
}

.map_pin.map_pin16{
  top: 58.5%;
  right: 16.1%;
  width: 4.3%;
}

.map_pin.map_pin17{
  top: 54%;
  right: 10.6%;
  width: 8.5%;
}




.anime_ttl {
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 5%;
}

.anime_ttl p{
  position: relative;
  display: inline-block;}

.anime_ttl p::before{
  position: absolute;
  display: inline-block;
  content: "";
  position: absolute;
  background: url(../images/modelmap/anime1_ttl_line.webp) center/contain repeat-x;
  width: 150%;
  height: 10px;
  top: 50%;
  right: 110%;
}

.anime_ttl p::after{
  position: absolute;
  display: inline-block;
  content: "";
  position: absolute;
  background: url(../images/modelmap/anime1_ttl_line.webp) center/contain repeat-x;
  width: 150%;
  height: 10px;
  top: 50%;
  left: 110%;
}

.anime_item{
  display: flex;
  gap: 0 20px;
}

.anime_item_desc{width: 50%;}
.anime_item_img{
  width: 50%; display: flex; gap :20px 0;
  flex-direction: column;
}

.anime_item_img2{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-direction: row;
}

.anime_item_img2 div{
  width: 48%;
}
.anime_item_img2 img{
  width: 48%;
  object-fit: contain;
}

.anime_list{
  display: flex;
  flex-direction: column;
  gap: 50px 0;
}

.anime_item_place{
  display: flex;
  align-items: center;
  gap: 0 20px;
  margin-bottom: 10px;
}

.anime_item_num{width: 40px;}

.anime_item_name{
  font-family: "siccrossudpultra", sans-serif;
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.3;
}

.anime_item_text{font-size: 1.125rem; margin-bottom: 5%;}
.anime_item_att{font-size: 15px; margin: -3% 0 5%;}
.access{
  display: flex;
  gap:  0 10px;
  align-items: center;
}
.access_icon{ width: 40px;}
.address{
  margin-top: 1%;
}
.anime_explanation{
  display: flex;
  gap: 0 35px;
  background: #fff;
  margin-top: 5%;
  padding: 5% 7%;
}

.anime_explanation_img{ width: 28%;}
.anime_explanation_img .attend{
  font-size: 10px;
  margin-top: 5px;
}
.anime_explanation_desc{ width: 72%;}
.anime_explanation_desc_ttl{
  font-size: 1.5rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.anime_explanation_desc_text{ font-size: 1.125rem;}
.more_btn.anime_explanation_desc_link{ margin: 5% auto 5% 0;}


/* anime1_con */
.anime1_con{ background: #f4faff;}
.anime1_con .anime_ttl,
.anime1_con .anime_item_name,.anime1_con .anime_explanation_desc_ttl{
  color: var(--anime1);
}
.anime1_con .anime_explanation{
  border: dashed 2px var(--anime1);
}
.anime1_con .more_btn.anime_explanation_desc_link{
  background-color: var(--anime1);
}
.anime1_con .more_btn.anime_explanation_desc_link p::after{
  border-top: solid 2px var(--anime1);
  border-right: solid 2px var(--anime1);
}
.anime1_con .anime_ttl p::before, .anime1_con .anime_ttl p::after{
  width: 60%;
}


/* anime2_con */
.anime2_con{ background: #fcfff8;}
.anime2_con .anime_ttl,.anime2_con .anime_item_name,.anime2_con .anime_explanation_desc_ttl{
  color: var(--anime2);
}

.anime2_con .anime_explanation{
  border: dashed 2px var(--anime2);
}

.anime2_con .more_btn.anime_explanation_desc_link{
  background-color: var(--anime2);
}

.anime2_con .more_btn.anime_explanation_desc_link p::after{
  border-top: solid 2px var(--anime2);
  border-right: solid 2px var(--anime2);
}

.anime2_con .anime_ttl p::before, .anime2_con .anime_ttl p::after{
  background: url(../images/modelmap/anime2_ttl_line.webp) center/contain repeat-x;
  width: 220%;
}


/* anime3_con */

.anime3_con{ background: #fff4f9;}
.anime3_con .anime_ttl,.anime3_con .anime_item_name,.anime3_con .anime_explanation_desc_ttl{
  color: var(--anime3);
}
.anime3_con .anime_explanation{
  border: dashed 2px var(--anime3);
}

.anime3_con .more_btn.anime_explanation_desc_link{
  background-color: var(--anime3);
}

.anime3_con .more_btn.anime_explanation_desc_link p::after{
  border-top: solid 2px var(--anime3);
  border-right: solid 2px var(--anime3);
}

.anime3_con .anime_ttl p::before, .anime3_con .anime_ttl p::after{
  background: url(../images/modelmap/anime3_ttl_line.webp) center/contain repeat-x;
}


/* anime4_con */
.anime4_con{ background: #faf4ff;}
.anime4_con .anime_ttl,.anime4_con .anime_item_name,.anime4_con .anime_explanation_desc_ttl{
  color: var(--anime4);
}
.anime4_con .anime_explanation{
  border: dashed 2px var(--anime4);
}

.anime4_con .more_btn.anime_explanation_desc_link{
  background-color: var(--anime4);
}

.anime4_con .more_btn.anime_explanation_desc_link p::after{
  border-top: solid 2px var(--anime4);
  border-right: solid 2px var(--anime4);
}

.anime4_con .anime_ttl p::before, .anime4_con .anime_ttl p::after{
  background: url(../images/modelmap/anime4_ttl_line.webp) center/contain repeat-x;
  width: 75%;
}

@media screen and (max-width: 768px){
  .sp-none{display: none;}
  .pc-none{display: block;}
  .desc{font-size: 1rem; margin-bottom: 8%;}
  .map_page::before{
    background: url(../images/modelmap/map_ashirai3.webp) center/contain no-repeat;
    height: 30%;
    width: 8%;
    right: 1%;
  }
  .map_page::after{
    background: url(../images/modelmap/map_ashirai4.webp) center/contain no-repeat;
    height: 30%;
    width: 9%;
    top: -3%;
    left: 1%;
  }

  .map_page .attend{text-align: left;}
  .anime_item{flex-direction: column;}
  .anime_item_desc,.anime_item_img{ width: 100%;}
  .anime_item_name{ font-size:1.5rem ;}
  .anime_item_num,.access_icon{width: 30px;}
  .anime_item_place{gap: 0 10px;}
  .anime_item_text{font-size: 1rem; letter-spacing: -0.00rem;}
  .access_text,.address{font-size: 0.875rem; letter-spacing: 0.0rem;}


  .anime1_con .address, .anime2_con .address, .anime3_con .address, .anime4_con .address{border-width: 1.5px;}
  .anime_list{gap: 35px 0;}
  .anime_item_img{
    flex-direction: row; gap: 0 8px; margin-top: 20px;
  }
  .anime_item_img img{width: 49%;}
  #map8 .anime_item_img img,
  #map12 .anime_item_img img,
  #map16 .anime_item_img img,
  #map13 .anime_item_img img{width: 100%;}

  #map8 .anime_item_img{flex-direction: column; gap: 10px;}

  .anime_explanation{
    padding: 6% 4%;
    gap: 0 15px;
    margin-top: 8%;
  }

  .anime_explanation_img{width: 38%;}
  .anime_explanation_desc{width: 62%;}
  .anime_explanation_desc_ttl{font-size: 1.125rem; margin-bottom: 5px; line-height: 1.3;}
  .anime_explanation_desc_text{font-size: 0.875rem;}
  .more_btn{width: 100%; padding: 8px 0; max-width: 260px;}
  .more_btn p{font-size: 1rem;}

  .anime_explanation_img .attend{font-size: 8px; line-height: 1.4; }
  .anime_ttl p::before,.anime_ttl p::after{height: 5px;}
  .anime_ttl p::before{right: 102%;}
  .anime_ttl p::after{left: 102%;}
  .anime_ttl{line-height: 1.3; font-size: 1.5rem;}
  .anime_item_att{font-size: 0.875rem; }

  .map_pin{width: 4.8%;}

  .map_pin.map_pin1{left: 19.5%;}
  .map_pin.map_pin2{bottom: 9%;left: 10.5%;}
  .map_pin.map_pin5{ top: 33%;}
  .map_pin.map_pin6{ top: 32.5%; right: 32.5%;}
  .map_pin.map_pin7{ right: 22.4%;}
  .map_pin.map_pin8{top: 39%; width: 6.6%; right: 43.5%;}
  .map_pin.map_pin9{ top: 46.5%; right: 41%;width: 4.8%;}
  .map_pin.map_pin10{ top: 41%; right: 36%; width: 6.4%;}
  .map_pin.map_pin11{ bottom: 30%; right: 32%; width: 8.5%;}
  .map_pin.map_pin12{  bottom: 25%; width: 6%;}

  .map_pin.map_pin13{  top: 37%; width: 5%;}
  .map_pin.map_pin14{ top: 43%; right: 13.3%; width: 7.5%;}
  .map_pin.map_pin15{ top: 50%; right: 20%; width: 7.5%;}
  .map_pin.map_pin16{ top: 58.3%; right: 14.5%; width: 5.4%;}
  .map_pin.map_pin17{ top: 52.5%; right: 8.5%; width: 10.5%;}


  .pickup_item .attend {
    margin-top: 5%;
    font-size: 8px;
  }

  .to_top-page{
    margin-bottom: 5%;
  }
  .to_top-page p{
    font-size: 1rem;
  }

  .to_top-page p:after{
    right: 35%!important;
  }

  .map_page .wrapper{
    padding-top: 8%;
  }


  }


@media screen and (max-width: 412px){
  .more_btn p:after{right: 11.5%;}
  .more_btn.to_top p:after{right: 10.5%;}


}