.slick-slider{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}.slick-loading .slick-list{background:#fff url('../images/ajax-loader.gif') center center no-repeat}.slick-arrow,button.slick-next,button.slick-prev{z-index:10}.slick-prev{width:40px;height:40px;top:-235px;position:absolute;left:-40px;background:url('../images/slide_prev.png') left top no-repeat;border:none}.slick-next{width:40px;height:40px;top:-235px;position:absolute;right:-40px;background:url('../images/slide_next.png') left top no-repeat;border:none}.kiji-slide .slick-prev{width:40px;height:40px;top:calc(50% - 20px);position:absolute;left:0px;background:url('../images/slide_prev.png') left top no-repeat;border:none}.kiji-slide .slick-next{width:40px;height:40px;top:calc(50% - 20px);position:absolute;right:0px;background:url('../images/slide_next.png') left top no-repeat;border:none}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{position:absolute;bottom:-20px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center;z-index:100}.slick-dots li{position:relative;display:inline-block;width:10px;height:10px;margin:0 7px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:10px;height:10px;padding:0;cursor:pointer;color:transparent;border:0;outline:none;background:transparent}.slick-dots li button:focus,.slick-dots li button:hover{outline:none}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{font-size:10px;line-height:1;position:absolute;top:0;left:0;width:10px;height:10px;content:'■';text-align:center;color:#dae2eb;background:#dae2eb;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-dots li.slick-active button:before{color:#1a3349;background:#1a3349}


body{
	width: 100vw;
	margin:0px;
	padding: 0px;
	background: #7ecef433 url(../images/bg.png) bottom center no-repeat;
	background-attachment: fixed;
	background-size: contain;
}
.p-0 {
	padding: 0 !important;
	margin: 0 !important;
}
.p-1 {
	padding: 5px !important;
	margin: 0 !important;
}
.wf-mplus1l {
	font-family: "M PLUS 1p" !important;
	font-weight: 900 !important;
	font-size: 28px;
	line-height: 2em;
	color: #fff;
	text-shadow: #0075c2 0px 0px 5px;
	text-align: center;
	margin:0px;
	padding: 0px;
}
.wf-mplus1b {
	font-family: "M PLUS 1p" !important;
	font-weight: 900 !important;
	font-size: 18px;
	line-height: 1.5em;
}
.wf-mplus1p {
	font-family: "M PLUS 1p" !important;
	font-weight: 900 !important;
	font-size: 14px;
	line-height: 1.2em;
	color: #333;
	text-align: center;
}
.wf-mplus1w {
	font-family: "M PLUS 1p" !important;
	font-weight: 900 !important;
	font-size: 14px;
	line-height: 1.2em;
	color: #7ecef4;
}
.wf-mplus1s {
	font-family: "M PLUS 1p" !important;
	font-weight: 400 !important;
	font-size: 12px;
	text-align: center;
}
.wf-mplus1ss {
	font-family: "M PLUS 1p" !important;
	font-weight: 400 !important;
	font-size: 10px;
	color: #7ecef4;
}
.wrapper{
	display: inline-block;
	position: relative;
	min-height: calc(90vh - 100vw / 12);
	margin:0px;
	margin-top: calc(100vw / 12);
	padding: 0px;
	width: 100vw;
}
.wrapper h3{
	margin-top: calc(100vw / 768 *200);
}
span.boxed{
	margin: 1px;
	padding: 1px;
	background-color: #0075c2;
	color: #fff;
}
.bg_black{
	background-color: #333333 !important;
}
.bg_red{
	background-color: #e60012 !important;
}
.bg_item1{
	background-color: #a675b0 !important;
}
.bg_item2{
	background-color: #718cc7 !important;
}
.bg_item3{
	background-color: #f39700 !important;
}
.bg_item4{
	background-color: #8fc31f !important;
}
.bg_item5{
	background-color: #e85298 !important;
}
.bg_item6{
	background-color: #00b0ec !important;
}
.bg_ch3{
	background-color: #A09723 !important;
	color: #fff;
}
.bg_ch4l{
	background-color: #EFF1F6 !important;
}
.bg_ch4d{
	background-color: #8E9BB3 !important;
	color: #fff;
}
.bold{
	padding: 0 0.25em !important;
	font-weight: 900 !important;
	margin-right: 0.5em !important;
}
header{
	position: fixed !important;
	overflow: hidden;
	top: 0px;
	left: 0px;
	right: 0px;
	margin: 0;
	width: 100vw;
	border-bottom: 1px solid #0075c2;
	background-color: #fff !important;
	box-shadow: 0 2px 2px #0075c266;
	z-index: 100;
}
#nav .navbar-collapse{
	position: fixed;
	z-index: 100;
	overflow-y: scroll;
	width: 100vw;
	max-height: calc(100vh - (100vw / 12 + 10px));
	top: calc(100vw / 12);
	left: 0;
	background-color: #0075c2cc;
	box-shadow: 0 5px 5px #0075c266;
}
#nav .nav a{
	color: #fff;
}
#anime{
	position: relative;
	margin-top: calc(100vw / 12);
	height: calc(100vh - 100vw / 12);
}
#animation_container{
	background-color:rgba(255, 255, 255, 1.00);
	width:768px;
	height:1280px;
}
#canvas{
	position: absolute;
	display: none;
	background-color:rgba(255, 255, 255, 1.00);
}
#dom_overlay_container{
	pointer-events:none;
	overflow:hidden;
	width:768px;
	height:1280px;
	position: absolute;
	left: 0px;
	top: 0px;
	display: none;
}
#_preload_div_{
	position:absolute;
	top:0;
	left:0;
	display: inline-block;
	height:1280px;
	width: 768px;
	text-align: center;
}
#chapter-1 {
	background: url("../images/chapter-1.png") top center no-repeat;
	background-size: contain;
}
#chapter-2 {
	background: url("../images/chapter-2.png") top center no-repeat;
	background-size: contain;
}
#chapter-3 {
	background: url("../images/chapter-3.png") top center no-repeat;
	background-size: contain;
}
#chapter-4 {
	background: url("../images/chapter-4.png") top center no-repeat;
	background-size: contain;
}
#chapter-5 {
	background: url("../images/chapter-5.png") top center no-repeat;
	background-size: contain;
}
.list-group .list-group-item{
	position: relative;
	overflow: visible;
}
.list-group .list-group-item img{
	position:absolute;
	bottom:0;
}
footer{
	position: relative;
	z-index: 50;
	margin: 0;
	margin-top: 20px;
	width: 100vw;
	box-shadow: 0 -2px 2px #0075c266;
	background: #0075c2;
	color: #fff;
}
footer .row{
	margin-bottom: 1em;
}
footer h4{
	padding-left: 0.5em;
}
footer ul{
	padding-left: 1em;
}
footer li{
	margin-left: 0;
	list-style: none;
	font-size: 12px;
}
footer a{
	color: #b5e0f4;
}

.headline{
	margin-top: calc(100vw / 12) !important;
}

.wrapper h4{
	position: relative;
	overflow: visible;
	display: block;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	padding: 10px 15px;
	margin: 0 16px -1px;
	background-color: #fff;
	border: 1px solid #ddd;
	font-family: "M PLUS 1p" !important;
	font-weight: 900 !important;
	font-size: 16px;
	line-height: 1.2em;
}
.wrapper p{
	margin: -1px 16px;
	padding: 10px 15px;
	border: 1px solid #ddd;
	background: #fff;
	text-align: justify;
	line-height: 1.8em;
}
.wrapper ol{
	margin: -20px 16px 0px;
	padding: 10px 15px 10px 2em;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	background: #fff;
	text-align: justify;
	line-height: 1.8em;
}
.wrapper dl{
	margin: -1px 16px 0px;
	padding: 10px 15px;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	background: #fff;
	text-align: justify;
}
.wrapper dt,
.wrapper dd{
	line-height: 1.5em;
}
.wrapper dd{
	margin-bottom: 1em;
}
.chapter-1 p .name,
.chapter-4 p .name{
	font-family: "M PLUS 1p" !important;
	font-weight: 500 !important;
	font-size: 16px;
}
.chapter-1 p .experience,
.chapter-4 p .experience{
	font-family: "M PLUS 1p" !important;
	font-weight: 500 !important;
	font-size: 12px;
}
.chapter-1 p .title,
.chapter-1 p .time{
	font-family: "M PLUS 1p" !important;
	font-weight: 800 !important;
	font-size: 16px;
}
.chapter-1 p img.img-responsive{
	width: 30vw;
}
.photoList {
	width: calc(100vw - 32px);
	height: calc((100vw - 32px) / 4 * 3);
	margin: 0 16px;
	padding: 0;
	border: 1px solid #ddd;
	background: #0075c2;
}
.photoList li {
	position: relative;
	width: calc(100vw - 32px);
	height: calc((100vw - 32px) / 4 * 3);
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
	background-size:cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.scene-1{
	color: #fff;
	background: #9C6DA5 !important;
}
.scene-1b{
	margin: -1px 16px;
	color: #fff;
	background: #4b215b !important;
}
.scene-2{
	color: #fff;
	background: #6c86be !important;
}
.scene-2b{
	margin: -1px 16px;
	color: #fff;
	background: #1f327c !important;
}
.scene-3{
	color: #fff;
	background: #e89100 !important;
}
.scene-3b{
	margin: -1px 16px;
	color: #fff;
	background: #d54500 !important;
}
.scene-4{
	color: #fff;
	background: #89bb1c !important;
}
.scene-4b{
	margin: -1px 16px;
	color: #fff;
	background: #3e7d02 !important;
}
.scene-5{
	color: #fff;
	background: #de4d91 !important;
}
.scene-5b{
	margin: -1px 16px;
	color: #fff;
	background: #a80f39 !important;
}
.scene-6{
	color: #fff;
	background: #00a9e3 !important;
}
.scene-6b{
	margin: -1px 16px;
	color: #fff;
	background: #0058b9 !important;
}

.chapter-2 .graph1{
	position: relative;
	width: calc(100vw - 32px);
	height: 200vw;
	margin: -1px 16px;
	padding: 0;
	border: 1px solid #ddd;
	background: #fff url(../images/ch2-graph1-bg.png) bottom center no-repeat;
	background-size: cover;
}
.chapter-2 .graph1 .arrow{
	display: block;
	position:absolute;
	z-index: 2;
	top: 20px;
	left: calc((100vw - 35px)/2);
	width: calc(100vw - 40px);
	height: calc((100vw - 40px) / 2);
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	background: url(../images/ch2-graph1-arrow.png) top center no-repeat;
	background-size: cover;
}
.chapter-2 .graph1 .base{
	display: block;
	position:absolute;
	z-index: 10;
	top: 20px;
	left: calc((100vw - 35px)/2);
	width: 20px;
	height: 20px;
	border: 3px solid #333;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	background-color: #ff0000;
}
.chapter-2 .graph1 .btn{
	display: block;
	position:absolute;
	z-index: 15;
	top: calc(5vw);
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	border-color: #333;
	background-color: #333;
	box-shadow: 5px 5px 10px rgba(63,63,63,0.25);
}
.chapter-2 .graph1 .button1{
	left: calc((100vw - 35px)/4);
}
.chapter-2 .graph1 .button2{
	left: calc((100vw - 35px)/4*3);
}
.chapter-2 .graph1 .circle{
	display: block;
	position:absolute;
	z-index: 10;
	left: calc((100vw - 35px)/2);
	width: 28vw;
	height: 28vw;
	border: 3px solid #333;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	padding-top: 8vw;
	font-family: "M PLUS 1p" !important;
	font-weight: 900 !important;
	font-size: 4vw;
	line-height: 6vw;
	text-align: center;
}
.chapter-2 .graph1 .circle1{
	top: 30vw;
}
.chapter-2 .graph1 .circle2{
	top: 62vw;
}
.chapter-2 .graph1 .circle3{
	top: 94vw;
}
.chapter-2 .graph1 .circle4{
	top: 126vw;
}
.chapter-2 .graph1 .circle5{
	top: 158vw;
	padding-top: 11vw !important;
}
.chapter-2 .graph1 .box{
	display: block;
	position:absolute;
	z-index: 20;
	top: 15vw;
	width: 40vw;
	border-radius: 5px;
	transform: translateX(-50%);
	font-family: "M PLUS 1p" !important;
	font-weight: 500 !important;
	font-size: 12px;
	line-height: 1.5em;
}
.chapter-2 .graph1 .box h5{
	font-family: "M PLUS 1p" !important;
	font-weight: 900 !important;
	font-size: 18px;
	line-height: 1.5em;
	text-align: center;
	text-shadow: #fff 0px 0px 5px;
}
.chapter-2 .graph1 .box h6{
	padding-top: 0.5em;
	font-family: "M PLUS 1p" !important;
	font-weight: 700 !important;
	font-size: 14px;
	line-height: 1em;
	text-shadow: #fff 0px 0px 5px;
}
.chapter-2 .graph1 .box1{
	left: calc((100vw - 35px)/4);
	background-color: #ffffff99;
}
.chapter-2 .graph1 .box2{
	left: calc((100vw - 35px)/4*3);
	background-color: #ffffffee;
	border: 1px solid #333;
	padding: 0 0.5em 0.5em;
}
.chapter-2 .graph1 .balloon{
	position:absolute;
	left: 0px;
	width: 40vw;
	padding: 2px;
	background-color: #ffffffee;
	border-bottom: 1px solid #333;
	transform: translateY(-100%);
}
.chapter-2 .graph1 ul{
	margin: 0 0 0 1em;
	padding: 0;
}
.chapter-2 .graph1 .balloon1{
	top: 26vw;
}
.chapter-2 .graph1 .balloon2{
	top: 58vw;
}
.chapter-2 .graph1 .balloon3{
	top: 90vw;
}
.chapter-2 .graph1 .balloon4{
	top: 122vw;
}
.chapter-2 .graph1 .balloon5{
	top: 154vw;
}
.chapter-3 ul{
	margin: -20px 16px -1px;
	padding: 10px 15px 10px 2em;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	background: #fff;
	text-align: justify;
	line-height: 1.8em;
}
.chapter-3 ul.logo{
	padding-bottom: calc((100vw - 32px)/2/546*335 + 1em) !important;
	background: url(../images/logo_l.png) bottom 10px right 10px no-repeat;
	background-size: 50%;
}
.chapter-3 .row{
	margin: -1px 16px 0px;
	padding: 10px;
	border: 1px solid #ddd;
	border-top: none;
	background: #fff;
}
.chapter-4 p img.img-responsive{
	padding-right: 0;
}
.chapter-5 table{
	max-width: calc(100vw - 32px);
	margin: 0px 16px;
	padding: 5px;
	border: 1px solid #ddd;
	background: #fff;
}
.chapter-5 table th,
.chapter-5 table td{
	padding: 5px;
}


@media screen and (min-width: 769px) {
body, section{
	width: 768px !important;
	margin: 0 auto !important;
}
header{
	left: calc((100vw - 768px)/2);
	width: 768px;
}
#nav .navbar-collapse{
	overflow-y: scroll !important;
	width: 768px;
	top: 64px;
	left: calc((100vw - 768px)/2);
}
#anime{
	margin-top: 64px !important;
	height: 1280px;
}
.wrapper{
	width: 768px;
	min-height: calc(100vh - 768px / 12) !important;
	margin-top: 64px !important;
}
.wrapper h3{
	margin-top: 200px;
}
.wf-mplus1p {
	font-size: 24px;
}
.wf-mplus1s {
	font-size: 18px;
}
header button.btn-sm {
	width: 62px;
	height: 62px;
	font-size: 32px;
}
footer{
	width: 768px;
}
.container{
	width: 100%;
}
.photoList {
	width: 736px;
	height: 552px;
}
.photoList li {
	width: 736px;
	height: 552px;
}
.chapter-1 p img.img-responsive{
	width: 300px;
	margin-top: -50px;
}
.chapter-2 .graph1{
	width: 736px;
	height: 1560px;
}
.chapter-2 .graph1 .arrow{
	left: 368px;
	width: 736px;
	height: 368px;
}
.chapter-2 .graph1 .base{
	left: 368px;
	width: 30px;
	height: 30px;
}
.chapter-2 .graph1 .btn{
	top: 120px;
}
.chapter-2 .graph1 .button1{
	left: 183px;
}
.chapter-2 .graph1 .button2{
	left: 550px;
}
.chapter-2 .graph1 .circle{
	left: 368px;
	width: 215px;
	height: 215px;
	padding-top: 61px;
	font-size: 31px;
	line-height: 46px;
}
.chapter-2 .graph1 .circle1{
	top: 230px;
}
.chapter-2 .graph1 .circle2{
	top: 476px;
}
.chapter-2 .graph1 .circle3{
	top: 722px;
}
.chapter-2 .graph1 .circle4{
	top: 968px;
}
.chapter-2 .graph1 .circle5{
	top: 1213px;
	padding-top: 84px !important;
}
.chapter-2 .graph1 .box{
	top: 180px;
	width: 307px;
	font-size: 16px;
}
.chapter-2 .graph1 .box h5{
	font-size: 24px;
}
.chapter-2 .graph1 .box h6{
	font-size: 18px;
}
.chapter-2 .graph1 .box1{
	left: 183px;
}
.chapter-2 .graph1 .box2{
	left: 550px;
}
.chapter-2 .graph1 .balloon{
	width: 307px;
}
.chapter-2 .graph1 .balloon1{
	top: 140px;
}
.chapter-2 .graph1 .balloon2{
	top: 386px;
}
.chapter-2 .graph1 .balloon3{
	top: 632px;
}
.chapter-2 .graph1 .balloon4{
	top: 878px;
}
.chapter-2 .graph1 .balloon5{
	top: 1123px;
}
.chapter-3 ul.logo{
	padding-bottom: 130px !important;
	background: url(../images/logo_l.png) bottom 10px center no-repeat;
	background-size: 25%;
}
.chapter-5 table{
	width: 736px;
}

.headline{
	margin-top: 64px !important;
}

.navbar-toggle {
	display: block;
}
.navbar-collapse {
	border-top: 1px solid transparent;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
	display: none!important;
}
.navbar-collapse.collapse.in { 
	display: block!important;
}
.collapsing {
	overflow: hidden!important;
}
}

