@charset "UTF-8";
@import url(fonts.css);
html, body { margin: 0; padding: 0; height: 100%; /*overflow: hidden;*/ background-color: #E9EADC; }

.desktop #wrap { position: relative; margin: 20px auto; padding-top: 27px; padding-left: 0; width: 1200px; height: 818px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: url(../img/story-bg.jpg) no-repeat 8px center; -webkit-background-size: 1200px 818px; -moz-background-size: 1200px 818px; -o-background-size: 1200px 818px; background-size: 1200px 818px; }

#containerWrap { position: relative; margin: 0 auto; width: 1024px; height: 768px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#main, #container { position: relative; margin: 0 auto; width: 1024px; height: 768px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.type-bg, .type-mc, .type-image { position: absolute; display: inline-block; }

#story { position: relative; height: 0; overflow: hidden; line-height: 1; }

section h2 { display: none; }

section:first-child { display: block; }

.textBox { position: absolute; bottom: 100px; left: 50%; margin: 0 0 0 -400px; padding: 10px; width: 800px; height: 140px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; opacity: 0.8; z-index: 2000; cursor: pointer; background: #ffe; }
.textBox:after { content: ""; position: absolute; top: 10px; right: 10px; display: block; width: 40px; height: 35px; background: url("../img/icon-next.gif") no-repeat; -webkit-background-size: 40px 35px; -moz-background-size: 40px 35px; -o-background-size: 40px 35px; background-size: 40px 35px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); }

.txt { padding: 0.5em 1em; }
.txt h3 { margin: 0 0 0.4em 0; font-size: 20px; }
.txt p { position: relative; margin: 0 0 0.5em 0; font-size: 28px; line-height: 1.4; letter-spacing: -0.1em; }
.txt.serif { padding: 0; }
.txt.serif p { padding: 0 1em; }
.txt.serif p:before { content: "「"; position: absolute; left: 0; display: inline-block; font-size: 28px; }
.txt.serif p:after { content: "」"; display: inline-block; font-size: 28px; }
.txt .letter-0 { letter-spacing: 0; }
.txt .fs150p { font-size: 1.5em; }
.txt .fs200p { font-size: 2em; }
.txt .fs300p { font-size: 3em; }

.btnBox { z-index: 1000; position: absolute; bottom: 20px; left: 50%; *zoom: 1; margin: 0 0 0 -512px; width: 1024px; height: 120px; opacity: 1; z-index: 2000; display: none; }
.btnBox:after { content: ""; display: table; clear: both; }
.btnBox button { background: transparent; border: none; }
.btnBox .btn { display: inline-block; -webkit-box-shadow: #999999; -moz-box-shadow: #999999; box-shadow: #999999; }
.btnBox .replay { float: left; display: inline; cursor: pointer; width: 250px; /*マウスオーバー用アニメーション指定*/ -webkit-transition-property: width; -moz-transition-property: width; -o-transition-property: width; transition-property: width; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: liner; -moz-transition-timing-function: liner; -o-transition-timing-function: liner; transition-timing-function: liner; -webkit-transition-delay: 0; -moz-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; }
.btnBox .replay:focus, .btnBox .replay:active, .btnBox .replay:hover { width: 280px; }
.btnBox .replay img { float: left; width: 100%; /*キーフレーム指定*/ -webkit-animation-name: nasuReplay; animation-name: nasuReplay; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 1s; animation-duration: 1s; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.btnBox .replay a { display: inline-block; }
.btnBox .nextPage { float: right; display: inline; margin-right: 0; text-decoration: none; width: 190px; /*マウスオーバー用アニメーション指定*/ -webkit-transition-property: width; -moz-transition-property: width; -o-transition-property: width; transition-property: width; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: liner; -moz-transition-timing-function: liner; -o-transition-timing-function: liner; transition-timing-function: liner; -webkit-transition-delay: 0; -moz-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; }
.btnBox .nextPage:focus, .btnBox .nextPage:active, .btnBox .nextPage:hover { width: 210px; }
.btnBox .nextPage img { float: right; width: 100%; /*キーフレーム指定*/ -webkit-animation-name: tomaNext; animation-name: tomaNext; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.btnBox .nextPage a { display: inline-block; }

@-webkit-keyframes nasuReplay { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); margin-left: 10px; }
  to { -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); -ms-transform: rotate(-1deg); -o-transform: rotate(-1deg); transform: rotate(-1deg); margin-left: 0; } }

@keyframes nasuReplay { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); margin-left: 10px; }
  to { -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); -ms-transform: rotate(-1deg); -o-transform: rotate(-1deg); transform: rotate(-1deg); margin-left: 0; } }

@-webkit-keyframes tomaNext { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); margin-right: 0; }
  to { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); margin-right: 15px; } }

@keyframes tomaNext { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); margin-right: 0; }
  to { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); margin-right: 15px; } }

.homeBtn { position: absolute; top: 10px; left: 10px; display: inline-block; }
.homeBtn img { opacity: 0.6; width: 80px; /*アニメーション指定*/ -webkit-transition-property: width, opacity; -moz-transition-property: width, opacity; -o-transition-property: width, opacity; transition-property: width, opacity; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: liner; -moz-transition-timing-function: liner; -o-transition-timing-function: liner; transition-timing-function: liner; -webkit-transition-delay: 0; -moz-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; }
.homeBtn:focus img, .homeBtn:active img, .homeBtn:hover img { opacity: 1; width: 100px; }

/* ===================================== Home
*/
.home #main { width: 1024px; height: 768px; }
.home #main .cover { position: relative; }
.home #main .cover img { width: 1024px; height: 768px; vertical-align: top; }
.home #main .cover a { display: inline-block; }
.home #main h1 { display: none; }
.home #main .btnStart { position: absolute; top: 468px; left: 700px; z-index: 1000; display: inline-block; }
.home #main .btnStart img { margin-top: 0; margin-left: 0; width: 276px; height: 205px; /*マウスオーバー用アニメーション指定*/ -webkit-transition-property: width, height, margin; -moz-transition-property: width, height, margin; -o-transition-property: width, height, margin; transition-property: width, height, margin; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: liner; -moz-transition-timing-function: liner; -o-transition-timing-function: liner; transition-timing-function: liner; -webkit-transition-delay: 0; -moz-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; }
.home #main .btnStart img:focus, .home #main .btnStart img:active, .home #main .btnStart img:hover { margin-left: -69px; margin-top: -51.25px; width: 414px; height: 307.5px; }
.home #main .btnStartCover { position: absolute; top: 200px; left: 20px; z-index: 1000; width: 450px; height: 430px; display: inline-block; }

/* ===================================== sns
*/
#sns { position: absolute; top: 20px; left: 20px; z-index: 9999; overflow: hidden; *zoom: 1; display: inline-block; }

.sharrre .button { float: left; width: 60px; }

/* =====================================
iPad
	Safari
	Landscape
	CSS
	1024 × 768

	ブックマークバーなし
	Landscape
	CSS
	1024 × 672

	ブックマークバーあり
	Landscape
	CSS
	1024 × 644 */
.ipad.tablet body, .android.tablet body { background-color: #E9E4B3; }
.ipad.tablet #wrap, .android.tablet #wrap { width: 1024px; height: 672px; overflow: hidden; }
.ipad.tablet #containerWrap, .android.tablet #containerWrap { position: relative; height: 672px; overflow: hidden; }
.ipad.tablet .textBox, .android.tablet .textBox { bottom: 120px; }
.ipad.tablet .btnBox, .android.tablet .btnBox { bottom: 130px; }
.ipad.tablet .btnBox .replay, .android.tablet .btnBox .replay { margin-top: -5px; }

/* iPhone , Android Phone */
.iphone.mobile body, .android.mobile body { background-color: #E9E4B3; }
.iphone.mobile #wrap, .android.mobile #wrap { width: 1024px; height: 672px; overflow: hidden; }
.iphone.mobile #containerWrap, .android.mobile #containerWrap { position: relative; margin-top: -96px; height: 672px; overflow: hidden; }
.iphone.mobile .textBox, .android.mobile .textBox { bottom: 130px; }
.iphone.mobile .btnBox, .android.mobile .btnBox { bottom: 120px; }
.iphone.mobile .homeBtn, .android.mobile .homeBtn { top: 186px; }
.iphone.mobile #sns, .android.mobile #sns { top: 520px; left: 520px; }

#log { position: absolute; right: 20px; bottom: 20px; z-index: 9999; padding: 10px; font-size: 2em; color: red; background-color: #FFF; }