@charset "UTF-8";

/*キーカラー：#156b0f*/




/********** メインコンテンツ **********/
.story .main{
	float:none;
	width:100%;
	padding: 0;
	background-image:
		url(../img/contents/flow/scrollMagic/bg/ground150.png),
		url(../img/contents/flow/scrollMagic/bg/f_bg_pat150.jpg);
	background-repeat: repeat-y,repeat;
	background-position: center,center;
	background-color:#E4D8BF;
	position: relative;
	overflow: hidden;
}
.story .main.fixBG{
	background-attachment: fixed;
}
.story .main img{
	width: inherit;
	height: inherit;
}
	


/*左列のローカルナビ*/
.fixed{
	z-index: 4;
}


/*画像ポップアップ用プラグインlityの設定*/
.lity{
	z-index: 9999!important;
}
.lityBtn{
	display: inline-block;
	text-decoration: none;
	background-color: #156b0f;
	color: #fff;
	margin: 5px;
	border-radius: 5px;
	/*box-shadow: 3px 3px #044400;*/
	font-size: 0.8rem;
	padding: 3px;
}


/*デバッグ用のインジケーターを非表示*/
.indicatorLabel{
	display: none;
}





/*********************************************
*ページネーション*
***********************************************/

.arrow {
	cursor: pointer;
	position: fixed;
	right: 5vw;
	padding: 0.8em;
	border: 2px solid #156b0f;
	border-radius: 2em;
	color: #156b0f;
	background-color: #fff;
	font-size: 1.5rem;
	z-index: 10;
	transition: all 300ms 0s ease;
}
.arrow:hover{
	padding: 1.1em;
	border: 4px solid #156b0f;
}
.arrow:active{
	background-color: #FFF8A5;
}
.arrowUpX1{
	top: 250px;
}
.arrowUpX2{
	top: 140px;
}
.arrowUpX3{
	top: 10px;
}
.arrowDownX1{
	bottom: 250px;
}
.arrowDownX2{
	bottom: 140px;
}
.arrowDownX3{
	bottom: 10px;
}



.pagination {
  position: fixed;
  top: 50%;
  right: 30px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 5;
}
.pagination > ul .pagination-list {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  border: 1px solid #000;
  margin-bottom: 10px;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.pagination > ul .pagination-list.current .pagination-link {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: #000;
  -webkit-transition: all 0.2s;
          transition: all 0.2s;
}
.pagination > ul .pagination-link {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  /*width: 0;
  height: 0;*/
  border-radius: 10px;
  -webkit-transition: all 0.2s;
          transition: all 0.2s;
}






/*********************************************
*setPin()を設定すると自動生成されるラップ要素*
***********************************************/
.scrollmagic-pin-spacer{
}




/*********************************************
*スペーサー（手動で設定するぶん）*
***********************************************/
.spacer01{ height: 4000px;}
.spacer02{ height: 500px;}
.spacer03{ height: 500px;}
.spacer04{ height: 1500px;}




.title{
	text-align: center;
	margin: 100px 0 0;
}



.mapContainer{
	background-color: #fff;
	background-image:linear-gradient(45deg, #f0fff0 25%, transparent 25%, transparent 75%, #f0fff0 75%, #f0fff0), linear-gradient(-45deg, #f0fff0 25%, transparent 25%, transparent 75%, #f0fff0 75%, #f0fff0);
	background-size:60px 60px;
}


/*両側の壁の外側の目隠し*/
.blindContainer{
	width: 100%;
	height: auto;
	position: relative;
}
.blind{
	width: 200px;
	height: 31255px;
	position:absolute;
	z-index: 4;
	background-color: #fff;
}
.blind.left{
	left:-200px;
}
.blind.right{
	right: -200px;
}

/*病室ドア近くの壁の目隠し*/
.blindWallContainer{
	position:absolute;
	z-index: 7;
}
.blindWallContainer.R{
	right: 0;
}
.blindWall{
	width: 100px;
	height: 200px;
	background-size: contain;
}
/*.wallContainer01(廊下の長さ)の高さが変わったらその差分をここにも適用する*/
.blindWall01{margin: -4350px 0 0 0;}
.blindWall02{margin: -3700px 0 0 0;}
.blindWall03{margin: -3050px 0 0 0;}
.blindWall04{margin: -2450px 0 0 0;}
.blindWall05{margin: -1750px 0 0 0;}
.blindWall06{margin: -1150px 0 0 0;}
.blindWall07{margin: -730px 0 0 0;}
.blindWall08{margin: -250px 0 0 0;}
.blindWall.left{
	background-image: url(../img/contents/flow/scrollMagic/blind/blindWall01L.png);
}
.blindWall.right{
	background-image: url(../img/contents/flow/scrollMagic/blind/blindWall01R.png);
}


.trigger{
	position: absolute;
	width: 100%;
	opacity: 0;
}
.trigger_room01{
	background-color: #000;
	height: 30px;
	position: absolute;
	top:300px;
}
.trigger_room01wall{
	background-color: #000;
	height: 30px;
	position:static;
	top:300px;
}


.wayback{
	background-image:
		url(../img/contents/flow/scrollMagic/bg/stone-wall100b.png),
		url(../img/contents/flow/scrollMagic/bg/ground150.png),
		url(../img/contents/flow/scrollMagic/bg/f_bg_pat150.jpg);
	background-repeat: repeat-x,repeat-y,repeat;
	background-position:top,center,top;
}

path {
  stroke: rgb(255, 255, 255);
  stroke-width:2;
  fill:none;
}








/*********************************************
*キャラクター設定*
***********************************************/

/*キャラクターコンテナ共通*/
.charactorContainer{
	width: 150px;
	height: 150px;
	position: absolute;
}
.charactorContainer.nurseContainer20{
	width: 200px;
}

/*キャラクター本体共通*/
.charactor{
	width: 100%;
	height: 100%;
	background-size: cover;
}

/*フキダシ*/
.fukidashi{
	background-color: #fff;
	border: 2px solid #156b0f;
	border-radius: 20px;
	width: 250px;
	height: 150px;
	position:absolute;
	top: -150px;
	left: -180px;
	display: flex;
	justify-content: center;
    align-items: center; 
	opacity: 0;
	transition: all 300ms 0s ease;
}
.bus .fukidashi{
	top: auto;
	left: auto;
}
.fukidashi.show{
	opacity: 1;
}

/***************メインキャラ（患者）******************/
.mainCharactorContainer{
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 2;
	margin-left: -75px;
    margin-top: -75px;
}

.mainCharactor{
	background-image: url(../img/contents/flow/scrollMagic/charactors/mainCharactor150.png);
}
.mainCharactor.right{background-image: url(../img/contents/flow/scrollMagic/charactors/mainCharactor_right150.png);}
.mainCharactor.left{background-image: url(../img/contents/flow/scrollMagic/charactors/mainCharactor_left150.png);}
.mainCharactor.back{background-image: url(../img/contents/flow/scrollMagic/charactors/mainCharactor_back150.png);}


/***************ナース01******************/
.nurseContainer01{
	right: 0;
}
.nurse01{
	background-image:url(../img/contents/flow/scrollMagic/charactors/nurse01_150.png);
	position: relative;
	z-index: 2;
}
.nurse01.right{background-image: url(../img/contents/flow/scrollMagic/charactors/nurse01_right150.png);}
.nurse01.left{background-image: url(../img/contents/flow/scrollMagic/charactors/nurse01_left150.png);}
.nurse01.back{background-image: url(../img/contents/flow/scrollMagic/charactors/nurse01_back150.png);}
.nurse01.fix{
	position: fixed;
	width: 150px;
	height: 150px;
	left:50% !important;
	margin-left: -75px;
}
.nurse01.adjustPosition{
	position: relative;
	top: 760px !important;
	left: 900px !important;
}
/***************ナース02******************/
.nurseContainer02{
	position: fixed;
	top: 50%;
	right: 50%;
	z-index: 2;
	margin-left: -75px;
    margin-top: -75px;
	opacity: 0;
}
.nurse02{
	background-image:url(../img/contents/flow/scrollMagic/charactors/nurse02_150.png);
}
.nurse02.right{background-image: url(../img/contents/flow/scrollMagic/charactors/nurse02_right150.png);}
.nurse02.left{background-image: url(../img/contents/flow/scrollMagic/charactors/nurse02_left150.png);}
.nurse02.back{background-image: url(../img/contents/flow/scrollMagic/charactors/nurse02_back150.png);}
.spacer03 .charactorContainer{
	position: absolute;
	left:50%;
	margin: 0 -75px;
}
.spacer03 .nurse{
	opacity: 0;
}
.spacer03 .nurseContainer10 .nurse{
	opacity: 1;
}
.nurse03{background-image:url(../img/contents/flow/scrollMagic/charactors/nurse02_150.png);}
.nurse04{background-image:url(../img/contents/flow/scrollMagic/charactors/nurse02_150.png);}
.nurse05{background-image:url(../img/contents/flow/scrollMagic/charactors/nurse02_150.png);}
.nurse06{background-image:url(../img/contents/flow/scrollMagic/charactors/nurse02_150.png);}
.nurse07{background-image:url(../img/contents/flow/scrollMagic/charactors/nurse02_150.png);}
.nurse08{background-image:url(../img/contents/flow/scrollMagic/charactors/shibainu150.png);}

/***************ナース09（配膳車）******************/
.charactorContainer.nurseContainer09{
	height: 300px;
}
.nurseContainer09{
	opacity: 0;
}
.haizen{
	position:fixed;
	animation-duration: 4s;
	animation-fill-mode:forwards;
	opacity: 1;
	animation-name: haizen;
}
@keyframes haizen{
	0%{left:60%;top: -20%;}
	100%{left: 60%; top: 120%;}
}

/***************ナース10（掃除機）******************/
.spacer03 .charactorContainer.nurseContainer10{
	/*position: absolute;*/
	left: auto;
	margin:0;
}
.charactorContainer.nurseContainer10{
	width: 400px;
}
.nurseContainer10{
	opacity: 0;
}

.sojiki{
	animation-duration: 4s;
	animation-fill-mode:forwards;
	animation-name: sojiki;
	opacity: 1;
}
@keyframes sojiki{
	0%{right:-400px;}
	100%{right:1100px;}
}

/*バス見送りのときのナースたちの動作*/
.miokuri{
	position:relative;
	animation-duration: 2s;
	animation-fill-mode:forwards;
	opacity: 1;
}
.miokuri1{animation-name: move1;}
.miokuri2{animation-name: move2; animation-delay: .3s}
.miokuri3{animation-name: move3; animation-delay: .6s}
.miokuri4{animation-name: move4; animation-delay: .9s}
.miokuri5{animation-name: move5; animation-delay: 1.2s}
.miokuri6{animation-name: move6; animation-delay: 1.5s}

@keyframes move1{
	0%{left:0;top: 0;}
	50%{left: 0;top: 600px;}
	100%{left: 300px; top: 600px;}
}
@keyframes move2{
	0%{left:0;top: 0;}
	50%{left: 0;top: 600px;}
	100%{left: 200px; top: 600px;}
}
@keyframes move3{
	0%{left:0;top: 0;}
	50%{left: 0;top: 600px;}
	100%{left: 100px; top: 600px;}
}
@keyframes move4{
	0%{left:0;top: 0;}
	50%{left: 0;top: 600px;}
	100%{left: -100px; top: 600px;}
}
@keyframes move5{
	0%{left:0;top: 0;}
	50%{left: 0;top: 600px;}
	100%{left: -200px; top: 600px;}
}
@keyframes move6{
	0%{left:0;top: 0;}
	50%{left: 0;top: 600px;}
	100%{left: -300px; top: 600px;}
}

/***************ナース20（モップ）******************/
.nurse20{background-image:url(../img/contents/flow/scrollMagic/charactors/mop200.png);}

/***************ナース2１～（エキストラ）******************/
.spacer03 .charactorContainer.nurseContainer21{
	opacity: 1;
	left: 0;
	margin: 150px 0;
}
.spacer03 .charactorContainer.nurseContainer21 .nurse{
	opacity: 1;
}
.nurse21{background-image:url(../img/contents/flow/scrollMagic/charactors/nurse03_150.png);}

.scene_obj01{
	height: 200px;
	margin: 0 0 100px;
}







/*********************************************
*固定オブジェクト*
***********************************************/

/*ファサード*/
.facade{
	/*padding: 100px 0 0;*/
	background-image:url(../img/contents/flow/scrollMagic/bg/stone-wall100.png);
	height: 100px;
	width: 100%;
	position: absolute;
	top: -100px;
}
/*入口*/
.gateContainer,
.exitContainer{
	height: 100px;
	position: relative;
	margin: -50px 0 0;
}
.gate{
	position: absolute;
	width: 100%;
	height: 200px;
	background-image:url(../img/contents/flow/scrollMagic/object/entrance1000.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	z-index: 2;
}
.gate.entrance{	top: -50px;}
.gate.exit{
	bottom: -100px;
	background-image:url(../img/contents/flow/scrollMagic/object/entrance_back1000.png);
}
.doorWrap{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
}
.door{
	width: 200px;
	height: 100px;
	opacity: .6;
	transition: all .3s ease-in-out;
}
.door.entrance{
	margin: -60px 0 0;
	z-index: 1;
}
.door.exit{
	margin: 30px 0 0;
	z-index: 3;
}
.door.open{
	transform: translateX(200px);
}

/*カウンター1*/
.obj_counter01{
	width: 200px;
	height: auto;
	right: 0;
	position: absolute;
	margin: 200px 0 0;
}

/*院内廊下の壁*/
.wallContainer01{
	position: relative;
	margin: 0;
	height: 4700px;/*ここを変更したピクセル数と同じだけドア用目隠し（.blindWall）のネガティブマージンも変更する*/
	width: 100%;
	top: 0;	
	background-repeat: repeat-y;
	background-image:
		url(../img/contents/flow/scrollMagic/bg/wall01L.png),
		url(../img/contents/flow/scrollMagic/bg/wall01R.png);
	background-position:
		left top,
		right top;
}
/*両壁の上端の画像*/
.wallEndTop,
.wallEndBottom{
	position: absolute;
	width: 100px;
	height: 100px;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 8;
}
.wallEndTop.L{
	top: -100px;
	left: 0;
	background-image:url(../img/contents/flow/scrollMagic/bg/wall01L_top.png);
}
.wallEndTop.R{
	top: -100px;
	right: 0;
	background-image:url(../img/contents/flow/scrollMagic/bg/wall01R_top.png);
}
.wallEndBottom.R{
	bottom: 0;
	right: 0;
	background-image:url(../img/contents/flow/scrollMagic/bg/wall01R_bottom.png);
}

.wall{
	width: 100px;
	height: 2000px;
	position: absolute;
	top: 0;
}
.wallRight{
	right: 0;
}





/*病室のドアの奥の影*/
.roomDoorContainer{
	width: 100px;
	height: 200px;
	position: absolute;
	background-size: contain;
}
.roomDoorContainerL{background-image: url(../svg/scrollmagic/roomDoorBackL.svg);}
.roomDoorContainerR{background-image: url(../svg/scrollmagic/roomDoorBackR.svg);}
.roomDoor{
	width: 100%;
	height: 100%;
	background-size: contain;
	transition: all .3s ease-in-out;
}
.roomDoorContainerL .roomDoor{
	background-image: url(../svg/scrollmagic/roomDoor01L.svg);
}
.roomDoorContainerR .roomDoor{
	background-image: url(../svg/scrollmagic/roomDoor01R.svg);
}
.roomDoor.open{
	transform: translateY(-100px);
}
.roomDoorContainer01{top: 250px;}
.roomDoorContainer02{top: 900px;	right: 0;}
.roomDoorContainer03{top: 1550px;}
.roomDoorContainer04{top: 2150px;	right: 0;}
.roomDoorContainer05{top: 2850px;}
.roomDoorContainer06{top: 3450px;	right: 0;}
.roomDoorContainer07{top: 3870px;}
.roomDoorContainer08{top: 4350px;	right: 0;}

/*ナースステーション*/
.nurseStation{
	height: 700px;
	background-image: url(../svg/scrollmagic/nurse-station.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position:left;
}


/*バス*/
.busContainer{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 300px 0 0 0;
}
.bus{
	width: 400px;
	height: 400px;
	background-image:url(../img/contents/flow/scrollMagic/object/bus241.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 2;
	 transition: all 2s ease-in-out;
}

/*家*/
.houseContainer{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.photo{
	background-color: #fff;
	width: 400px;
	height: 300px;
	position: absolute;
	z-index: 3;
	opacity: 0;
}
.photo1{top: 0; left: 50%;}
.photo2{top: 70%; left: 60%;}
.photo3{top: 30%; left: 10%;}
.house{
	width: 100%;
	height: 750px;
	background-image: url(../svg/scrollmagic/house.svg);
	background-size:cover;
	background-repeat: no-repeat;
	z-index: 2;
	background-position: center bottom;
}

/*********************************************
*コンテンツ*
***********************************************/
/*病室案内*/
.contentsOuter{
	width: 100%;
	height: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
}
.contentsContainer{
	width: 450px;
	height: 360px;
	background-color: #fff;
	border: 2px solid #156b0f;
	border-radius: 20px;
	position: fixed;
    top: 50%;
    left: auto;
    /*margin-left: -225px;*/
    margin-top: -180px;
	opacity: 0;
	transition: all .3s ease-in-out;
	overflow: hidden;
	z-index: 1;
}
.contentsInner{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 10px;
}
.contentsContainer01 .contentsInner{background-image: url(../img/contents/flow/scrollMagic/bg/room01_1000.jpg);}
.contentsContainer02 .contentsInner{background-image: url(../img/contents/flow/scrollMagic/bg/room02_1000.jpg);}
.contentsContainer03 .contentsInner{background-image: url(../img/contents/flow/scrollMagic/bg/room03_1000.jpg);}
.contentsContainer04 .contentsInner{background-image: url(../img/contents/flow/scrollMagic/bg/room04_1000.jpg);}
.contentsContainer05 .contentsInner{background-image: url(../img/contents/flow/scrollMagic/bg/room05_1000.jpg);}
.contentsContainer06 .contentsInner{background-image: url(../img/contents/flow/scrollMagic/bg/room06_1000.jpg);}
.contentsContainer07 .contentsInner{background-image: url(../img/contents/flow/scrollMagic/bg/room07_1000.jpg);}
.contentsContainer08 .contentsInner{background-image: url(../img/contents/flow/scrollMagic/bg/room08_1000.jpg);}
.contentsContainer09 .contentsInner{background-image: url(../img/contents/flow/scrollMagic/bg/room09_1000.jpg);}
.contentsContainer.display{
	/*transform: translateX(50px);*/
	opacity: 1;
	width: 600px;
	height: 480px;
	z-index: 2;
}





.scene02{
	margin: 600px 0 0;
	height: 400px;
	position: relative;
}
.animate02{
	width: 150px;
	height: 150px;
}
.nurse02Container{
	position: relative;
	width: 100%;
	height: 100%;
	background-image:url(../img/contents/flow/scrollMagic/charactors/nurse01_150.png);
	background-size: cover;
}

/*********************************************
*その他*
***********************************************/
/*スタートに戻るボタン*/
.toStart{
	position: fixed;
	bottom: 20px;
	left: 20px;
	display: flex;
	align-items:center;
	justify-content: center;
}
.toStart a{
	display: block;
	text-align: center;
	text-decoration: none;
	background-color:#F15F61;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	border-radius: 20px;
	padding: 10px;
	border:2px solid #fff;
}


@media screen and (max-width: 640px) {
	
	body.story{
		padding: 0;
	}
	.arrow{
		display: none;
	}
	/*パーティ会場*/
	.nurseStation{
		height: 300px;
	}

	
	.title{
		text-align: center;
		margin: 30px 0 0;
	}
	.story .title img{
		width: 100%;
	}

	/*両側の壁の外側の目隠し*/
	.blind{
		display: none;
	}
	
	/*********************************************
	*キャラクター設定*
	***********************************************/

	/*キャラクターコンテナ共通*/
	.charactorContainer{
		width: 74px;
		height: 74px;
	}

	/*フキダシ*/
	.fukidashi{
		width: 50vw;
		height: 30vw;
		position:absolute;
		top: -110px;
		left: -50%;
		font-size: .8rem;
		opacity: 0;
	}
	
	
	/*メインキャラ（患者）*/
	.mainCharactorContainer{
		margin-left: -37px;
		margin-top: -37px;	
	}
	/***************ナース01******************/
	.nurseContainer01{
		/*right: 0;*/
	}
	.nurse01.fix{
		width: 75px;
		height: 75px;
		/*left:50% !important;*/
		margin: 0;
	}
	.nurse01.fix2{
		width: 75px;
		height: 75px;
		/*top:50% !important;
		left: 50% !important;*/
		margin: 0;
	}
	
	/*********************************************
	*スペーサー*
	***********************************************/
	.spacer01{ height: 2000px;}
	.spacer02{ height: 200px;}
	.spacer03{ height: 250px;}
	.spacer04{ height: 750px;}

	
	
	/*バス見送りのときのナースたちの動作*/
	.miokuri{
		position:relative;
		animation-duration: 2s;
		animation-fill-mode:forwards;
		opacity: 1;
	}
	.miokuri1{animation-name: move1;}
	.miokuri2{animation-name: move2; animation-delay: .3s}
	.miokuri3{animation-name: move3; animation-delay: .6s}
	.miokuri4{animation-name: move4; animation-delay: .9s}
	.miokuri5{animation-name: move5; animation-delay: 1.2s}
	.miokuri6{animation-name: move6; animation-delay: 1.5s}

	@keyframes move1{
		0%{left:0;top: 0;}
		50%{left: 0;top: 300px;}
		100%{left: 150px; top: 300px;}
	}
	@keyframes move2{
		0%{left:0;top: 0;}
		50%{left: 0;top: 300px;}
		100%{left: 100px; top: 300px;}
	}
	@keyframes move3{
		0%{left:0;top: 0;}
		50%{left: 0;top: 300px;}
		100%{left: 50px; top: 300px;}
	}
	@keyframes move4{
		0%{left:0;top: 0;}
		50%{left: 0;top: 300px;}
		100%{left: -50px; top: 300px;}
	}
	@keyframes move5{
		0%{left:0;top: 0;}
		50%{left: 0;top: 300px;}
		100%{left: -100px; top: 300px;}
	}
	@keyframes move6{
		0%{left:0;top: 0;}
		50%{left: 0;top: 300px;}
		100%{left: -150px; top: 300px;}
	}



	
	
	/*********************************************
	*固定オブジェクト*
	***********************************************/
	/*入口*/
	.gateContainer,
	.exitContainer{
		height: 50px;
		margin: -40px;
	}
	.gate{
		height: 100px;
	}	
	.gate.entrance{}
	.gate.exit{
		bottom: -10px;
	}
	.doorWrap{
		width: 100%;
		height: 100%;
	}
	.door{
		width: 100px;
		height: 50px;
		opacity: .6;
		transition: all .3s ease-in-out;
	}
	.door.entrance{
		margin: -60px 0 0;
		z-index: 1;
	}
	.door.exit{
		margin: -20px 0 0;
		z-index: 3;
	}
	.door.open{
		transform: translateX(100px);
	}


	
	/*カウンター1*/
	.obj_counter01{
		width: 80px;
		height: auto;
		right: 0;
		margin: 50px 0 0;
	}
	/*院内廊下の壁*/
	.wallContainer01{
		height: 1450px;/*ここを変更したピクセル数と同じだけドア用目隠し（.blindWall）のネガティブマージンも変更する*/
		background-size: 100px auto;
	}
	/*両壁の上端の画像*/
	.wallEndTop,
	.wallEndBottom{
		width: 50px;
		height: 50px;
	}
	.wallEndTop.L{
		top: -50px;
		left: 0;
		background-image:url(../img/contents/flow/scrollMagic/bg/wall01L_top.png);}
	.wallEndTop.R{
		top: -50px;
		right: 0;
		background-image:url(../img/contents/flow/scrollMagic/bg/wall01R_top.png);
	}
	.wallEndBottom.L{
		bottom: -50px;
		left: 0;
		background-image:url(../img/contents/flow/scrollMagic/bg/wall01L_bottom.png);}
	
	/*病室のドアの奥の影*/
	.roomDoorContainer{
		width: 50px;
		height: 100px;
	}
	.roomDoor.open{
		transform: translateY(-50px);
	}
	.roomDoorContainer01{top: 300px;}
	.roomDoorContainer02{top: 450px;	right: 0;}
	.roomDoorContainer03{top: 600px;}
	.roomDoorContainer04{top: 750px;	right: 0;}
	.roomDoorContainer05{top: 900px;}
	.roomDoorContainer06{top: 1050px;	right: 0;}
	.roomDoorContainer07{top: 1200px;}
	.roomDoorContainer08{top: 1350px;	right: 0;}
	
	
	
	
	/*病室ドア近くの壁の目隠し*/
	.blindWall{
		display: none;
	}
	/*バス*/
	.busContainer{
		padding: 300px 0 0 0;
	}
	.bus{
		width: 200px;
		height: 200px;
	}

	
	
	/*家*/
	.photo{
		background-color: #fff;
		width: 25vw;
		height: auto;
		z-index: 3;
		opacity: 0;
	}
	.photo1{top: 0; left: 50%;}
	.photo2{top: 70%; left: 60%;}
	.photo3{top: 30%; left: 10%;}
	.house{
		width: 100%;
		height: 400px;
		background-image: url(../svg/scrollmagic/house.svg);
		background-size:cover;
		background-repeat: no-repeat;
		z-index: 2;
	}
	/*********************************************
	*コンテンツ*
	***********************************************/
	/*病室案内*/

	.contentsContainer{
		width: 60%;
		height: 30%;
		margin: auto;
		left: 0;
		right: 0;
	}
	.contentsInner{
		width: 100%;
		height: 100%;	
		background-size: cover;
		background-repeat: no-repeat;
	}
	.contentsContainer01 .contentsInner{
		background-image: url(../img/contents/flow/scrollMagic/bg/room01_1000.jpg);
	}
	.contentsContainer.display{
		/*transform: translateX(50px);*/
		opacity: 1;
		width: 96%;
		height: 40%;
		top: 5vh;
		bottom: auto;
	}


}



@media only screen and (min-width: 641px) and (max-width: 960px) {

		/*********************************************
	*コンテンツ*
	***********************************************/
	/*病室案内*/
	.contentsOuter{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.contentsContainer{
		width: 60%;
		height: 30%;
		margin: auto;
		left: auto;
	}
	.contentsInner{
		width: 100%;
		height: 100%;	
		background-size: cover;
		background-repeat: no-repeat;
	}
	.contentsContainer01 .contentsInner{
		background-image: url(../img/contents/flow/scrollMagic/bg/room01_1000.jpg);
	}
	.contentsContainer.display{
		/*transform: translateX(50px);*/
		opacity: 1;
		width: 80%;
		height: 40%;
		top: 0;
		bottom: 0;
	}

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


}