@charset "utf-8";
/* CSS Document */

/* font-size調整 */


/***********************************************************************
 SP
***********************************************************************/
/* 共通 */
h2 {
	background-color: transparent;
	position: relative;
}
h2::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: #000;
	transition: all 1s ease-in;
  z-index: 0;
}
h2.scroll_events::after {
	width: 100%;
}
h2 span{
  display: block;
  position: relative;
  z-index: 10;
}
.introduction h3, .character h3{
  border-bottom:  none;
  position: relative;
}
.introduction h3::after, .character h3::after{
  content: "";
  display: block;
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 4px;
  width: 0;
  background-color: #be1e2d;
	transition: all .8s ease-in;
}
.trailer h3::after{
  background-color: #fff;
}
.introduction h3.scroll_events::after, .character h3.scroll_events::after{
  width: 100%;
}
.location h5 {
	background-color: transparent;
	position: relative;
}
.location h5::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: #be1e2d;
	transition: all 1s ease-in;
  z-index: 0;
}
.location h5 span{
  display: block;
  position: relative;
  z-index: 10;
}
.location h5.scroll_events::after {
	width: 100%;
}

.introduction h2{
  margin-bottom: 0;
}
.introduction {
	background-image: none;
	background-color: inherit;
}

.story{
  margin-top: inherit;
}
.map-icn{
  border-radius: 50%;
  border: 2px solid #c3303d;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6.666%;
  height: 7.042%;
}
.map-icn a{
  display: block;
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 50%;
}
.map-icn::before{
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  animation: map-icn 1s linear infinite;
  background-color: rgba(198,48,61,0.8);
}
 @keyframes map-icn {
 0% {
   transform: scale(1);
}100% {
  transform: scale(1.7);
}
}
.map-icn02{
  border-radius: 50%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6.666%;
  height: 7.042%;
}
.map-icn02 a{
  display: block;
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 50%;
}
.map-icn02::before{
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: rgba(198,48,61,0.8);
}
.map-icn__osaka{
  width: 6.666%;
  height: 7.042%;
}
.location__osaka-map-area p[id^="map_osaka-"] {
  position: absolute;
}
#map_osaka-ookawa{
  top:5.63%;
  left: 13.5%;
}
#map_osaka-nakanoshima{
  top:10.5%;
  left: 8.1%;
}
#map_osaka-shinghiginobashi{
  top:9.09%;
  left: 59.37%;
}
#map_osaka-uehonmachi{
  top:53.71%;
  left: 57.03%;
}
#map_osaka-tenshiba{
  top:83.8%;
  left: 39.21%;
}
#map_osaka-ookawa_txt{
  top: 6.93%;
  left: 20.62%;
  width: 9.71%;
}
#map_osaka-nakanoshima_txt{
  top: 18.7%;
  left: 7.5%;
  width: 9.53%;
}
#map_osaka-shinghiginobashi_txt{
  top: 9.51%;
  left: 68%;
  width: 23.85%;
}
#map_osaka-uehonmachi_txt{
  top: 55%;
  left: 64.06%;
  width: 18.85%;
}
#map_osaka-tenshiba_txt{
  top:85.61%;
  left: 20.78%;
  width: 17.5%;
}
#map_osaka-abenoharukasu_txt{
  top: 88.76%;
  left: 57.81%;
  width: 25.28%;
}
#map_osaka-nanba_txt{
  top:54.53%;
  left: 35.28%;
  width: 7%;
}
#map_osaka-abenoharukasu_img{
  top: 67.76%;
  left: 51.25%;
  width: 10.93%;
}
#map_osaka-abenoharukasu_logo{
  top: 76.85%;
  left: 63.5%;
  width: 34.68%;
}
#map_osaka-abenoharukasu{
  top: 86.77%;
  left: 49.53%;
}
#map_osaka-nanba{
  top:52.5%;
  left: 29.14%;
}
.location__osaka-map-area p[id^="map_osaka-"],
.location__nara-map-area p[id^="map_nara-"]{
    position: absolute;
}
.map-icn__nara{
  width: 5.78%;
  height: 9.06%;
  position: absolute;
}
#map_nara-narakouen{
  left: 40.62%;
  top: 50.98%;
}
#map_nara-houzanzi{
  top:49.26%;
  left: 12.5%;
}
#map_nara-houzanzi_txt{
  top: 51.34%;
  left: 3.9%;
  width: 8.28%;
}
#map_nara-narakouen_txt{
  top: 52.2%;
  left: 46.09%;
  width: 10.93%;
}
#map_nara-country{
  top:46.56%;
  left: 82.96%;
}
#map_nara-country_txt{
  top: 58.08%;
  left: 74.84%;
  position: absolute;
  width: 24.21%;
}
.map-icn__okayama{
  width: 7.3%;
  height: 9%;
  position: absolute;
}
#map_okayama-hiruzen{
  left:40.15%;
  top: 14.72%;
}

#map_okayama-hiruzen_txt{
  top: 16.66%;
  left: 48.43%;
  position: absolute;
  width: 19.71%;
}
#map_okayama-okayamashi{
  left:59%;
  top: 82%;
}
#map_okayama-okayamashi_txt{
  top: 84.1%;
  left: 65.62%;
  position: absolute;
  width: 10.78%;
}

/***********************************************************************  
 SP__END
***********************************************************************/
/* 共通 */

@media screen and (min-width:400px) {
}
/***********************************************************************
 TABLET
***********************************************************************/
@media screen and (min-width:640px) {

}
@media screen and (min-width:768px) {
  .map-icn__nara{
    width: 5.2%;
    height: 10%;
  }
}
/* TAB_END */

/***********************************************************************
 PC
***********************************************************************/
@media screen and (min-width:960px) {
#map_nara-houzanzi_txt{
  top: 51%;
  left: 12%;
  width: 6.7%;
}
#map_nara-country_txt{
  top: 57.2%;
  left: 68.97%;
  position: absolute;
  width: 19.59%;
}
  #map_nara-houzanzi{
    top: 48%;
    left: 19.4%;
  }
  #map_nara-narakouen{
    left: 42%;
    top: 48%;
  }
  #map_nara-narakouen_txt{
    top:51%;
    left: 47.3%;
    width: 8.9%;
  }
  #map_nara-country{
    top: 45.19%;
    left: 75.2%;
  }
}/* PC_END */

/***********************************************************************
 横幅1000px以上
***********************************************************************/

@media screen and (min-width:1000px) {
}