@charset "utf-8";

.heading{
  background-color: #2378B3;
}
.heading:before{
  background-image: url("../images/bg_ttl.png");
}
.heading h1:before{
  background-image: url("../images/bg_ttl1.png");
}
.heading h1:after{
  background-image: url("../images/bg_ttl2.png");
}
.heading h1 > span{
  display: block;
}

.ttl{
  background-color: #2378B3;
  color: #FFF;
}
.ttl .section-head:after{
  background-color: #D6D600;
}
.ttl .section-head{
  line-height: 1.05;
}
@media print, screen and (min-width:781px) {
  .heading h1 > span{
    font-size: 2.2rem;
  }
  .heading h1:before,
  .heading h1:after{
    height: 127px;
    width: 127px;
  }
  .ttl .section-head span{
    font-size: 2.0rem;
  }
}
@media screen and (max-width: 780px) {
  .heading h1 > span{
    font-size: 1.6rem;
  }
  .heading h1 > span{
    font-size: 1.2rem;
  }
  .heading h1:before,
  .heading h1:after{
    height: 65px;
    width: 65px;
  }
}



/* -------  ---------------------------------------------- */
.sightseeing-sec .ttl{
  position: relative;
}
.sightseeing-sec .ttl .cloud{
  position: absolute;
}
.sightseeing-sec .ttl .cloud:before{
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: block;
}
#event .cloud:before{
  background-image: url("../images/cloud1.png");
  padding-bottom: 42.76%;
}
#sakai .cloud:before{
  background-image: url("../images/cloud2.png");
  padding-bottom: 39.3574%;
}

.sightseeing-sub-sec h3{
  background-color: #DEEBF4;
  color: #2378B3;
  font-weight: 700;
}
.sightseeing-sub-sec .sub{
  border-top: 1px solid #2378B3;
  color: #2378B3;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 0;
}
.sightseeing-sub-sec b{
  font-weight: 500 !important;
}
@media print, screen and (min-width:781px) {
  #event .cloud{
    width: 594px;
    left: 20px;
    top: 10px;
    transform: translateX(-100%);
  }
  #sakai .cloud{
    width: 747px;
    right: 270px;
    top: -154px;
    transform: translateX(100%);
  }
  
  .sightseeing-sec:nth-child(n + 2){
    margin-top: 250px;
  }
  .sightseeing-contents{
    margin-left: auto;
    margin-right: auto;
    max-width: 1080px;
    width: 90%;
  }
  .sightseeing-sub-sec{
    font-size: 1.8rem;
    margin-top: 135px;
  }
  .sightseeing-sub-sec:first-child{
    margin-top: 30px;
  }
  .sightseeing-sub-sec .sub{
    font-size: 1.6rem;
    padding: 5px 5px;
  }
  .sightseeing-sub-sec h3{
    font-size: 2.3rem;
    padding: 5px 20px;
  }
  .sightseeing-sub-sec h3 span{
    font-size: 1.8rem;
  }
  .sightseeing-sub-sec .col2{
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
  }
  .sightseeing-sub-sec .detail{
    width: 50%;
  }
  .sightseeing-sub-sec > p,
  .sightseeing-sub-sec .detail > p{
    margin-top: 30px;
  }
  .sightseeing-sub-sec .detail > *:first-child{
    margin-top: 0;
  }
  .sightseeing-sub-sec .images{
    width: 37.037%;
  }
}
@media screen and (max-width: 780px) {
  #event .cloud{
    width: 40.77598%;
    left: 10.468521%;
    top: 5%;
    transform: translateX(-100%);
  }
  #sakai .cloud{
    width: 43.48462%;
    right: 10.468521%;
    top: -5%;
    transform: translateX(100%);
  }
  
  .sightseeing-sec:nth-child(n + 2){
    margin-top: 125px;
  }
  .sightseeing-sec{
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
  .sightseeing-sub-sec{
    font-size: 1.8rem;
    margin-top: 65px;
  }
  .sightseeing-sub-sec:first-child{
    margin-top: 30px;
  }
  .sightseeing-sub-sec .sub{
    font-size: 1.3rem;
    padding: 5px 5px;
  }
  .sightseeing-sub-sec h3{
    font-size: 1.8rem;
    padding: 5px 10px;
  }
  .sightseeing-sub-sec h3 span{
    font-size: 1.4rem;
  }
  .sightseeing-sub-sec .col2{
    margin-top: 15px;
  }
  .sightseeing-sub-sec .detail{
  }
  .sightseeing-sub-sec > p,
  .sightseeing-sub-sec .detail > p{
    margin-top: 15px;
  }
  .sightseeing-sub-sec .detail > *:first-child{
    margin-top: 0;
  }
  .sightseeing-sub-sec .images{
    margin-top: 30px;
  }
}