@charset "utf-8";

.plan-body{
	padding:100px 0;
}
@media (max-width: 768px) {
.plan-body{
	padding:0px 0;
	}
}


.plan-body .plan-title{
	font-size:2.2rem;
	font-weight:300;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:20px 0 10px;
}
@media (max-width: 768px) {
.plan-body .plan-title{
	font-size:1.6rem;
	display:flex;
	justify-content:center;
	align-items:center;
	letter-spacing:3px;
	}
}
.pc-only-text{
	font-size:1.1rem;
	text-align:center;
	margin:0 0 30px;
}

@media (max-width: 768px) {
.pc-only-text{
	display:none;
	}
}

/*-------------------------------------------
SPのみstageページへリンク
--------------------------------------------*/
/*.plan-sp_detail{display:none;}*/

.plan-sp_detail{
	display:grid;
	grid-template-columns:1fr 1fr;
	text-align:center;
	margin:10px auto 30px;
	gap: 10px;
	max-width:600px;
	}
.plan-sp_detail div p a{
	font-size:.9rem;
	background:#ccc;
	color:#333;
	display:block;
	text-decoration:none;
	padding:8px 0 ;
	border-radius:10px;
	}
.plan-sp_detail div p{
	position:relative;
	}
.plan-sp_detail div p a:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
	}
	@media (max-width: 1100px) {
}
/*-------------------------------------------
各stageページへリンク
--------------------------------------------*/

.plan-pc_detail{
	display:grid;
	grid-template-columns:repeat(4 , 1fr) ;
	text-align:center;
	margin:10px auto 10px;
	gap: 10px;
	border-top:1px solid #333;
	border-bottom:1px solid #333;
	padding:50px 0 ;

	}
@media (max-width: 768px) {
.plan-pc_detail{
	grid-template-columns:repeat(2 , 1fr) ;
	padding:20px 0 ;
	}
}
.plan-pc_detail div p a{
	font-size:.9rem;
	background:#ccc;
	color:#333;
	display:block;
	text-decoration:none;
	padding:8px 0 ;
	border-radius:10px;
	}
.plan-pc_detail div p{
	position:relative;

	}
.plan-pc_detail div p a:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
	}

.stage-text_notice{
	font-size:.8rem;
}

/*-------------------------------------------
画像表示のCSS
--------------------------------------------*/

@keyframes reveal {
from {
	opacity: .3;
	clip-path: inset(45% 20% 45% 20%);
	}
to {
	opacity: 1;
	clip-path: inset(0% 0% 0% 0%);
	}
	}

.revealing-image {
	view-timeline-name: --revealing-image;
	view-timeline-axis: block;
	animation: linear reveal both;
	animation-timeline: --revealing-image;
	animation-range: entry 25% cover 50%;
	margin:0px 0 60px;
}

.photoArea{
  position: relative;
  margin: 0 auto;
  text-align:center;
}
.photoArea picture::before {
  content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #640080;
}
.photoArea picture {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.photoArea.move picture::before {
  animation: barAnime forwards 1.1s 1 ease 0.1s normal;
}
.photoArea picture img {
  opacity: 0;
  transform: scale(1.1);
}
.photoArea.move picture img {
  animation: photoAnime forwards 1.1s 1 ease 0.5s normal;
}
@keyframes barAnime{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	68% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@keyframes photoAnime{
	0% {
    opacity: 0;
    transform: scale(1.1);
  }
	50% {
    opacity: 0;
    transform: scale(1.1);
  }
	100% {
    opacity: 1;
    transform: scale(1);
  }
}


.plan-notice{
	margin:15px auto 15px;
	font-size:.9rem;
}
.plan-notice li{
	padding-left:1em;
	text-indent:-1em;
	line-height:1.4;
}

.plan-notice li::before{
	content:"※";
}
@media (max-width: 768px) {
.plan-notice{
	margin:10px auto;
	font-size:.8rem;
	}
}
.all-images-comment_base{
	color:#fff;
	font-size:.7rem;
	z-index:1;
}
.position-type_a{
	position:absolute;
	right:3px;
	bottom:8px;
}

.color-black{
	color:#000;
	display:block;
}

.mapLink a{
	display:block;
	position:absolute;
	text-indent:-9999px;
}
.st1 a{
	width:180px;
	height:260px;
	left:230px;
	bottom:380px;
}
.st2 a{
	width:245px;
	height:180px;
	left:185px;
	top:35px;
}
.st3 a{
	width:190px;
	height:270px;
	right:255px;
	bottom:370px;
}
.st4 a{
	width:270px;
	height:180px;
	right:243px;
	top:43px;
}

.mapLink a:hover{
	background:rgba(255,255,255,.4);
	transition:0.3s;
}
@media (max-width: 1100px) {

.mapLink{
	display:none;
	}
}