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

/*-----------------------------
hero-image
------------------------------*/
.hero-box{
	position:relative;
	height: 45.21vw;
}
.hero-box h2{
	position:absolute;
	width: 18.22vw;
	top:31.97vw;
	right:12.76vw;
	z-index: 20;
} 
.hero-img01{
	position: absolute;
	width: 30.62vw;
	top:0.65vw;
	left:0;
}
.hero-img01-1{
	position:absolute;
	width: 17.76vw;
	top:22.34vw;
	left:3.12vw;
}
.hero-img02{
	position:absolute;
	width: 35.46vw;
	top:15.65vw;
	left:26.4vw;
}
.hero-img02-1{
	position:absolute;
	width: 7.91vw;
	top:-13.12vw;
	right: 2.65vw;
}
.hero-img02-2{
	position:absolute;
	width: 2.34vw;
	top:-16.92vw;
	right: 10.57vw;
}
.hero-img02-3{
	position:absolute;
	width: 1.4vw;
	top:-10.41vw;
	right: 15.41vw;
}
.hero-img03{
	position:absolute;
	width: 28.02vw;
	top:0;
	right:0;
}
.img03{
	position:relative;
	z-index: 10;
	
}
.hero-img03-1{
	position:absolute;
	width: 21.09vw;
	top:23.69vw;
	left:-8.22vw;
	z-index: 1;
}

/*pagetop ボタン----------------------*/
main {
  position: relative;
}
.pagetop {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 10%;
  z-index: 90;
}
/*フェードイン右から-------------------------*/
.fadein-right {
  opacity : 0;
  transform: translateX(20px);
  transition: all 1s;
}
/*フェードイン左から-------------------------*/
.fadein-left {
  opacity : 0;
  transform: translateX(-20px);
  transition: all 1s;
}
/*-----------------------------
１日の流れ
------------------------------*/
.wrapper{
	overflow: hidden;
}
.day-lead{
	margin: 100px auto 115px;
}
.day-flow{
	position: relative;
	background: url("../images/day/pc/line.png") no-repeat center top;
	min-height: 3046px;
	margin-bottom: 190px;
}
.day-flow .ico{
	position: absolute;
	width: 80%;
}
.flow{
	display: block;
	flex-shrink:0;
	width:150px;
	height: 145px;
	background-image: url("../images/day/pc/fukidashi-right.png");
	background-size: contain;
	background-repeat: no-repeat;
	font-size:3rem;
	color:#3366cc;
}
.day-flow li{
	position: relative;
	width: 50%;
}
.day-flow li .time-box{
	display: flex;
	align-items: center;	
}
.day-flow li.left .time-box{
	flex-direction: row-reverse;
	padding-right: 35px;
}
.day-flow li.right{
	margin-left: 50%;
	padding-left: 35px;
}
.day-flow li.right .flow{
	margin-right: 35px;
	padding: 49px 0 0 46px;
}
.day-flow li.left .flow{
	margin-left: 35px;
	background-image: url("../images/day/pc/fukidashi-left.png");
	background-size: contain;
	background-repeat: no-repeat;
	padding: 40px 0 0 32px;
}
.txt{
	font-size:1.6rem;
	line-height: 2;
	}
.day-flow li p span{
	display:block;
	color:#69F;
	line-height: 1.66;
}
/* icon */
.day-flow .icon01{
	left:0;
	top:0;	
}
.day-flow .icon02{
	left:154px;
	bottom:-232px;	
}
.day-flow .icon03{
	left: 154px;
    bottom: -232px;
}
.day-flow .icon04 {
    left: -500px;
    bottom: -231px;
}
.park{
	top:145px;
	right: 0;
}


/* itm01 */
.day-flow li.item01{
	top: -63px;
	margin-bottom: 120px;	
}
.day-flow li.item01 .flow{
	padding: 50px 0 0 55px;
}

/* itm02 */
.day-flow li.item02 .flow,
.day-flow li.item03 .flow{
	padding: 42px 0 0 40px;
}

/* itm03 */
.day-flow li.item03{
	margin-top: -20px;
}

/* itm04 */
.day-flow li.item04{
	margin-top: -100px;
}

/* itm05 */
.day-flow li.item05{
	margin-top: 249px
}
.day-flow li.item05 .meal{
	margin-bottom: 25px;
	width: 80%;
}
.day-flow li.item05 dl{
	padding-left: 6%;
	font-size: 1.6rem;
}
.day-flow li.item05 dl::after{
	display:block;
	content:"";
	clear:both;	
}
.day-flow li.item05 dt{
	float: left;
	width: 7.5em;
	padding: 5px 0;
	border:1px dotted #333;
	border-radius:5px;
	text-align:center;
}
.day-flow li.item05 dd{
	padding-left: 8.5em;
	margin-bottom: 10px;
}

/* itm06 */
.day-flow li.item06{
	margin-top: -576px;
}
/* itm07 */
.day-flow li.item07{
	margin-top: 8px;
}
/* itm08 */
.day-flow li.item08{
	margin-top: 8px;
}
.aiube-box{
	background: url("../images/day/pc/yellow-circle.png") no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	margin:100px 0 0 30px;
}
.aiube{
	padding: 59px 76px;
	font-size:1.6rem;
	line-height: 2;
}
/* itm09 */
.day-flow li.item09{
	margin-top: 90px;
}
/* itm010 */
.day-flow li.item10{
	margin-top: 10px;
}
/* itm011 */
.day-flow li.item11{
	margin-top: 10px;
}
/* itm012 */
.day-flow li.item12{
	margin-top: 419px;
}
.train{
	position:absolute;
	top:1705px;
	left:50%;
	transform: translateX(-100%);
}
/*-----------------------------
なないろの園歌
------------------------------*/
.song-head{
	position: relative;	
}
.song-head .onpu-left,
.song-head onpu-right{
	position: absolute;
}
.song-head .onpu-left{
	left:50%;
	top:-60px;
	transform:translateX(-500px);	
}
.song-head .onpu-right{
	left:50%;
	top:-88px;
	transform:translateX(328px);	
}


.song-box{
	padding: 105px 0 170px;
	background: url("../images/day/pc/song1.png"),url("../images/day/pc/song2.png");
	background-position: center top, center bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: contain,contain;
	margin-bottom: 95px;
}
.song{
	display: flex;
	justify-content: space-between;
	font-size: 1.6rem;
	line-height: 2;
	color:#cc66cc;
	z-index: 1;
}
.song p:nth-child(1){
	width: 58%;
	padding: 0 20px 0 16%;
}
.song p:nth-of-type(2){
	width: 42%;
}
.song-title{
	margin-bottom: 80px;	
}
.song-lead{
	margin-bottom: 70px;
	
}
.song-lead>img{
	position:relative;
	z-index: 1;
}
.onpu-left{
	position:absolute;
	z-index: 10;
}
.onpu-right{
	position:absolute;
	z-index: 10;
}

@media screen and (max-width: 950px) {
	.song{
		display: block;
	}
	.song p:nth-child(1),
	.song p:nth-child(2){
		width: 100%;
		padding: 0 20px;
		text-align: center;
	}
}
@media screen and (max-width: 1024px){
	.aiube-box{
		background: url("../images/day/pc/yellow-circle.png") no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
		width: 446px;
		height: 275px;
		margin: 100px 0 0 24px;
	}
	.aiube{
		padding: 58px 76px;
		font-size:1.6rem;
		line-height: 2;
	}
	.park{
		width: 85%;
	}
	.day-flow li.item05 .meal {
		margin-bottom: 25px;
		width: 85%;
	}
	.day-flow .icon04 {
		left: -498px;
		bottom: -86px;
	}
@media screen and (max-width: 768px) {
  	div{ 
	  	width: 100%; 
	}
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	.inner{
		box-sizing: border-box;
		width: 100%;
		padding:0 15px;
	} 
	.fadein-left {
	  opacity : 0;
	  transform: translateX(20px);
	  transition: all 1s;
	}
	
	/*-----------------------------
	hero-image
	------------------------------*/
	.hero-box{
		position:relative;
		height: 98vw;
		background: url("../images/common/sp_bg.jpg") no-repeat;
		background-size: contain;
		margin-top: 50px;
	}
	.hero-box h2{
		position:absolute;
		width: 38.53vw;
		top:72.93vw;
		right:50.27vw;
		z-index: 50;
	} 
	.hero-img01{
		position: absolute;
		width: 66.67vw;
		top: 0.4vw;
		left: 0;
	}
	.hero-img01-1{
		position:absolute;
		width: 17.76vw;
		top:22.34vw;
		left:3.12vw;
	}
	.hero-img02{
		position: absolute;
		width: 57.01vw;
		top: 52vw;
		left: 40.27vw;
		z-index: 10;
	}
	.hero-img02-1{
		position:absolute;
		width: 7.91vw;
		top:-13.12vw;
		right: 2.65vw;
	}
	.hero-img02-2{
		position:absolute;
		width: 2.34vw;
		top:-16.92vw;
		right: 10.57vw;
	}
	.hero-img02-3{
		position:absolute;
		width: 1.4vw;
		top:-10.41vw;
		right: 15.41vw;
	}
	.hero-img03{
		position:absolute;
		width: 28.02vw;
		top:0;
		right:0;
	}
	.img03{
		position:relative;
		z-index: 10;

	}
	.hero-img03-1{
		position:absolute;
		width: 21.09vw;
		top:23.69vw;
		left:-8.22vw;
		z-index: 1;
	}
	
	/*pagetop ボタン----------------------*/
	main {
	  position: relative;
	}
	.pagetop {
	  display: none;
	  position: fixed;
	  bottom: 10px;
	  right: 10px;
	  width: 18%;
	  z-index: 90;
	}
	
	/*-----------------------------
	１日の流れ
	------------------------------*/
	.day-lead{
		margin: 40px auto 45px;
		width: 86%;
	}
	.day-flow{
		position: relative;
		background: url("../images/day/sp/line.png") no-repeat left 73px top;
		background-size: 17.8px auto;
		min-height: 1523px;
		margin-bottom: 60px;
	}
	.txt{
		font-size:1.1rem;
		line-height: 1.66;
	}
	.day-flow .ico{
		position: absolute;
		width: 217px;
	}
	.flow{
		display: block;
		flex-shrink:0;
		width:78px;
		height: 59px;
		padding: 60px 0 0 65px;
		background-image: url("../images/day/pc/fukidashi-right.png");
		background-size: cover;
		font-size:1.8rem;
		color:#3366cc;
	}
	.day-flow li{
		position: relative;
		width: 0;
		top: -30px;
	}
	.day-flow li .time-box{
		display: flex;
		align-items: center;
		width: 250px;
	}
	.day-flow li.left .time-box{
		flex-direction: row;
		padding-right: 0;
		width: 345px;
	}
	.day-flow li.right{
		margin-left: 0;
		padding-left: 100px;
	}
	.day-flow li.right .flow{
		margin-right: 7px;
		padding: 25px 0 0 19px;
	}
	/*
	.day-flow li.left{
		padding-right: 40px;	
	}
	*/
	.day-flow li.left .flow{
		margin-left: 100px;
		background-image: url("../images/day/pc/fukidashi-right.png");
		background-size: cover;
		padding: 25px 0 0 21px;
	}

	.day-flow li p span{
		display:block;
		color:#69F;	
	}
	/* icon */
	.day-flow .icon01{
		width: 74px;
		left: 252px;
		top: 62px;	
	}
	.day-flow .icon02{
		left: 139px;
		bottom: -105px;
		width: 96px;
	}
	.day-flow .icon03{
		left: 154px;
		bottom: -114px;
		width: 94px;
	}
	.day-flow .icon04 {
		display: none;
	}
	.park{
		top: 57px;
		right: -245px;
		width: 217px;
	}


	/* itm01 */
	.day-flow li.item01{
		top: -10px;
		margin-bottom: 120px;	
	}
	.day-flow li.item01 .flow{
		padding: 25px 0 0 25px;
	}

	/* itm02 */
	.day-flow li.item02 .flow,
	.day-flow li.item03 .flow{
		padding: 25px 0 0 25px;
	}

	/* itm03 */
	.day-flow li.item03{
		margin-top: -4px;
	}

	/* itm04 */
	.day-flow li.item04{
		margin-top: -6px;
	}

	/* itm05 */
	.day-flow li.item05{
		margin-top: 176px;
	}
	.day-flow li.item05 .meal{
		margin-bottom: 25px;
		margin-left: 128px;
		width: 217px;
    	top: 0;
	}
	.day-flow li.item05 dl{
		width: 237px;
		margin-left: 109px;
		margin-top: -23px;
		padding-left: 6%;
	}
	.day-flow li.item05 dl::after{
		display:block;
		content:"";
		clear:both;	
	}
	.day-flow li.item05 dt{
		float: left;
		width: 7.5em;
		font-size: 1.1rem;
		padding: 1px 0;
		border: 1px dotted #333;
		border-radius: 3px;
		text-align: center;
	}
	.day-flow li.item05 dd{
		width: 100%;
		padding-left: 8.5em;
		margin-bottom: 2px;
		font-size: 1.1rem;
	}

	/* itm06 */
	.day-flow li.item06{
		margin-top: -11px;
	}
	/* itm07 */
	.day-flow li.item07{
		margin-top: 8px;
	}
	/* itm08 */
	.day-flow li.item08{
		margin-top: 8px;
	}
	.aiube-box{
		background: url("../images/day/sp/aiube.png") no-repeat;
		background-size: contain;
		width: 220px;
		height: 136px;
		margin-top: 19px;
	}

	/* itm09 */
	.day-flow li.item09{
		margin-top: 28px;
	}
	/* itm010 */
	.day-flow li.item10{
		margin-top: 10px;
	}
	/* itm011 */
	.day-flow li.item11{
		margin-top: 10px;
	}
	/* itm012 */
	.day-flow li.item12{
		margin-top: 148px;
	}
	/*	機関車　*/
	.train{
		position: absolute;
		top: 947px;
		left: 87px;
    	width: 99px;
	}
	/*-----------------------------
	なないろの園歌
	------------------------------*/
	.song-head{
		position: relative;	
	}
	.song-head .onpu-left,
	.song-head onpu-right{
		position: absolute;
	}
	.song-head .onpu-left{
		left:50%;
		top:-60px;
		transform:translateX(-500px);	
	}
	.song-head .onpu-right{
		left:50%;
		top:-88px;
		transform:translateX(328px);	
	}


	.song-box{
		background: url("../images/day/sp/song-bg.png") no-repeat;
		background-size: cover;
		padding: 0;
		margin-bottom: 40px;
		width: calc(100% + 30px);
		margin-left: -15px;
	}
	.song{
		display: block;
		font-size: 1.2rem;
		line-height: 1.5;
		color:#cc66cc;
		z-index: 1;
		padding: 0 4% 13%;
	}
	.song p:nth-child(1){
		width: 100%;
		padding: 0 16%;
		text-align: left;
		margin-bottom: 30px;
	}
	.song p:nth-of-type(2){
		width: 100%;
		padding: 0 16%;
		text-align: left;
	}
	.song-title{
		/*position:absolute;
		z-index: 10;*/
	/*	margin: auto;*/
	/*	top:105px;*/
		margin: 37px auto 50px;
		width: 115px;

	}
	.song-lead{
		margin-bottom: 0;

	}
	.song-lead>img{
		position:relative;
		z-index: 1;
	}
	.onpu-left{
		position:absolute;
		z-index: 10;
	}
	.onpu-right{
		position:absolute;
		z-index: 10;
	}
}