@charset "utf-8";


/* body
----------------------------------------------- */

/* disable */

.jsbody--disable {
	pointer-events: none;
}


/* wp
----------------------------------------------- */

#wp {
	position: relative;
	z-index: 2;
}
#sqexHeader-black_rsp,
#sqexFooter {
	position: relative;
	z-index: 5;
}


/* contents
----------------------------------------------- */

#contents {
	position: relative;
	width: 100%;
	font-family: YakuHanJP, 'Noto Sans JP', "游ゴシック", "Yu Gothic", sans-serif;
	font-weight: 400;
	overflow: hidden;
	z-index: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-print-color-adjust: exact;
}
#contents img {
	width: 100%;
	height: auto;
	vertical-align: top;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
}


/* loading
----------------------------------------------- */

.sl-loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
}
.sl-loading__mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	z-index: 1;
}
.sl-loading__progress {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0 0 0 -30px;
	width: 60px;
	height: 60px;
	z-index: 1;
}
.sl-loading__icon {
	width: 60px;
	height: 60px;
	background-image: url(../img/loading.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 480px 60px;
	animation-name: loading;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(1);
}
.sl-loading__label {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 70px 0 0;
	color: #fff;
	font-family: 'Averia Libre', cursive;
	font-size: 12px;
	text-align: center;
	text-indent: 0.2em;
	letter-spacing: 0.2em;
	z-index: 1;
}

/* start */

.js-loading-start .sl-loading__mask {
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.25s;
	transition-delay: 0.25s;
}
.js-loading-start .sl-loading__progress {
	opacity: 0;
	transform: translateY(-10px);
	transition-property: opacity, transform;
	transition-duration: 0.25s;
	transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
.js-loading-start .sl-loading__label {
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.25s;
}

/* end */

.js-loading-end {
	pointer-events: none;
	visibility: hidden;
}


/* title
----------------------------------------------- */

.sl-title {
	margin: auto;
	width: 443px;
	font-size: 0;
}
.sl-title img {
	width: 100%;
	height: auto;
}


/* button
----------------------------------------------- */

.sl-button {
	display: block;
	margin: auto;
	font-size: 0;
	cursor: pointer;
}

.sl-button--follow {
	width: 251px;
}
.sl-button--gameopen {
	width: 512px;
}
.sl-button--gameopenlarge {
	width: 612px;
}


/* official
----------------------------------------------- */

.sl-official {
	display: block;
	position: relative;
	margin: auto;
	width: 448px;
	z-index: 1;
}
.sl-official__button,
.sl-official__rabbi {
	display: block;
}
.sl-official__button {
	background-color: #fff;
}
.sl-official__rabbi {
	position: absolute;
	top: 34px;
	right: -61px;
	width: 101px;
	z-index: 1;
}


/* kani
----------------------------------------------- */

.sl-kani {
	position: absolute;
	width: 290px;
	font-size: 0;
	pointer-events: none;
	z-index: 1;
}


/* cloth
----------------------------------------------- */

.sl-cloth {
	position: relative;
	background-image: url(../img/cloth_top_left.png), url(../img/cloth_top_right.png), url(../img/cloth_bottom_left.png), url(../img/cloth_bottom_right.png);
	background-position: left top, right top, left bottom, right bottom;
	background-repeat: no-repeat;
	background-size: 100px;
	z-index: 1;
}
.sl-cloth:before,
.sl-cloth:after {
	display: block;
	content: "";
	position: absolute;
	left: 100px;
	right: 100px;
	height: 100px;
	background-size: 100px;
	z-index: -1;
}
.sl-cloth:before {
	top: 0;
	background-image: url(../img/cloth_top_center.png);
	background-position: center top;
}
.sl-cloth:after {
	bottom: 0;
	background-image: url(../img/cloth_bottom_center.png);
	background-position: center bottom;
}
.sl-cloth__outer {
	position: relative;
	z-index: 1;
}
.sl-cloth__outer:after {
	display: block;
	content: "";
	position: absolute;
	top: 100px;
	left: 0;
	right: 0;
	bottom: 100px;
	background-image: url(../img/cloth_middle_left.png), url(../img/cloth_middle_right.png), url(../img/cloth_middle_center.png);
	background-position: left center, right center, center center;
	background-repeat: repeat-y, repeat-y, repeat;
	background-size: 100px;
	z-index: 1;
}
.sl-cloth__inner {
	position: relative;
	min-height: 100px;
	z-index: 2;
}

/* mini */

.sl-cloth--mini {
	background-image: url(../img/clothmini_top_left.png), url(../img/clothmini_top_right.png), url(../img/clothmini_bottom_left.png), url(../img/clothmini_bottom_right.png);
	background-size: 50px;
}
.sl-cloth--mini:before,
.sl-cloth--mini:after {
	left: 50px;
	right: 50px;
	height: 50px;
	background-size: 50px;
}
.sl-cloth--mini:before {
	background-image: url(../img/clothmini_top_center.png);
}
.sl-cloth--mini:after {
	background-image: url(../img/clothmini_bottom_center.png);
}
.sl-cloth--mini .sl-cloth__outer:after {
	top: 50px;
	bottom: 50px;
	background-image: url(../img/clothmini_middle_left.png), url(../img/clothmini_middle_right.png), url(../img/clothmini_middle_center.png);
	background-size: 50px;
}


/* frame
----------------------------------------------- */

.sl-frame {
	position: relative;
	background-image: url(../img/frame_top_left.png), url(../img/frame_top_right.png), url(../img/frame_bottom_left.png), url(../img/frame_bottom_right.png);
	background-position: left top, right top, left bottom, right bottom;
	background-repeat: no-repeat;
	background-size: 150px;
	background-color: #feffe7;
	z-index: 1;
}
.sl-frame:before,
.sl-frame:after {
	display: block;
	content: "";
	position: absolute;
	left: 150px;
	right: 150px;
	height: 150px;
	background-size: 150px;
	z-index: -1;
}
.sl-frame:before {
	top: 0;
	background-image: url(../img/frame_top_center.png);
	background-position: center top;
}
.sl-frame:after {
	bottom: 0;
	background-image: url(../img/frame_bottom_center.png);
	background-position: center bottom;
}
.sl-frame__outer {
	position: relative;
	z-index: 1;
}
.sl-frame__outer:after {
	display: block;
	content: "";
	position: absolute;
	top: 150px;
	left: 0;
	right: 0;
	bottom: 150px;
	background-image: url(../img/frame_middle_left.png), url(../img/frame_middle_right.png);
	background-position: left center, right center;
	background-repeat: repeat-y, repeat-y;
	background-size: 150px;
	z-index: 1;
}
.sl-frame__inner {
	position: relative;
	min-height: 100px;
	z-index: 2;
}


/* intro
----------------------------------------------- */

.sl-intro {
	position: relative;
	margin: 0 18px;
	z-index: 2;
}
.sl-intro__inner {
	position: relative;
	margin: auto;
	padding: 4px 0 0;
	max-width: 1160px;
	z-index: 1;
}
.sl-intro__logo {
	width: 258px;
}
.sl-intro__logo a {
	display: block;
}
.sl-intro__title {
	margin: -12px auto 0;
	max-width: 643px;
}
.sl-intro__cloth {
	margin: 18px auto 0;
	max-width: 800px;
}
.sl-intro__summary {
	margin: auto;
	padding: 21px 0 28px;
	max-width: 623px;
}

/* kani */

.sl-intro__kani .sl-kani:nth-child(1) {
	top: -50px;
	left: 50%;
	margin-left: 207px;
}
.sl-intro__kani .sl-kani:nth-child(2) {
	top: 348px;
	left: 50%;
	margin-left: -626px;
}
.sl-intro__kani .sl-kani:nth-child(3) {
	top: 528px;
	left: 50%;
	margin-left: 303px;
}

/* ready */

.js-indicate-ready.sl-intro .sl-intro__title {
	opacity: 0;
	transform: scale(1.2);
	will-change: opacity, transform;
}
.js-indicate-ready.sl-intro .sl-intro__cloth {
	opacity: 0;
	transform: translateY(50px);
	will-change: opacity, transform;
}
.js-indicate-ready.sl-intro .sl-kani {
	opacity: 0;
	transform: rotate(5deg) scale(0.5);
}

/* start */

.js-indicate-start.sl-intro .sl-intro__title {
	opacity: 1;
	transform: scale(1);
	transition-property: opacity, transform;
	transition-duration: 1s;
	transition-delay: 0.25s;
	transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}
.js-indicate-start.sl-intro .sl-intro__cloth {
	opacity: 1;
	transform: translateY(0);
	transition-property: opacity, transform;
	transition-duration: 0.5s;
	transition-delay: 0.65s;
	transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}
.js-indicate-start.sl-intro .sl-kani {
	opacity: 1;
	transform: rotate(0deg) scale(1);
	transition-property: opacity, transform;
	transition-duration: 0.25s, 0.5s;
	transition-delay: 0.85s;
	transition-timing-function: linear, cubic-bezier(0.34, 1.56, 0.64, 1);
}
.js-indicate-start.sl-intro .sl-kani:nth-child(2) {
	transition-delay: 0.9s;
}
.js-indicate-start.sl-intro .sl-kani:nth-child(3) {
	transition-delay: 0.95s;
}


/* period
----------------------------------------------- */

.sl-period {
	margin: 0 18px;
}
.sl-period__inner {
	position: relative;
	padding: 96px 0 0;
	z-index: 1;
}
.sl-period__date {
	margin: 18px auto 0;
	max-width: 813px;
}
.sl-period__close {
	position: absolute;
	top: 75px;
	left: 0;
	right: 0;
	z-index: 1;
}
.sl-period__close span {
	display: block;
	margin: auto;
	max-width: 803px;
}


/* method
----------------------------------------------- */

.sl-method {
	margin: 0 18px;
}
.sl-method__inner {
	position: relative;
	margin: auto;
	padding: 92px 0 0;
	max-width: 960px;
	z-index: 1;
}
.sl-method__title {
	position: absolute;
	top: -34px;
	left: 0;
	right: 0;
	z-index: 1;
}
.sl-method__step {
	margin: 36px auto 0;
	max-width: 92px;
}
.sl-method__flow {
	position: relative;
	margin: 0 60px;
	height: 24px;
	font-size: 0;
	background-image: url(../img/method_flow.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 39px 24px;
	z-index: 1;
}
.sl-method__flow:before,
.sl-method__flow:after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	height: 2px;
	background-color: #72490f;
	z-index: 1;
}
.sl-method__flow:before {
	left: 0;
	right: 50%;
	margin: 0 18px 0 0;
}
.sl-method__flow:after {
	left: 50%;
	right: 0;
	margin: 0 0 0 18px;
}
.sl-method__articles {
	padding: 68px 0 48px;
}
.sl-method__article {
}

/* step1 */

.sl-method__article:nth-child(1) .sl-method__step {
	margin-top: 0;
}
.sl-method__article:nth-child(1) .sl-method__content {
	margin: 29px auto 0;
	max-width: 630px;
}
.sl-method__article:nth-child(1) .sl-method__button {
	margin: 37px 0 0;
}

/* step2 */

.sl-method__article:nth-child(2) {
	margin-top: 43px;
}
.sl-method__article:nth-child(2) .sl-method__content {
	margin: 10px auto 0;
	max-width: 610px;
}
.sl-method__article:nth-child(2) .sl-method__button {
	margin-top: 22px;
}

/* step3 */

.sl-method__article:nth-child(3) {
	margin-top: 39px;
}
.sl-method__article:nth-child(3) .sl-method__content {
	margin: 25px auto 0;
	max-width: 596px;
}
.sl-method__article:nth-child(3) .sl-method__caution {
	margin: 31px auto 0;
	max-width: 637px;
}

/* kani */

.sl-method__kani .sl-kani:nth-child(1) {
	top: 8px;
	left: 50%;
	margin-left: -570px;
}
.sl-method__kani .sl-kani:nth-child(2) {
	top: 417px;
	left: 50%;
	margin-left: 285px;
}
.sl-method__kani .sl-kani:nth-child(3) {
	left: 50%;
	bottom: 250px;
	margin-left: -565px;
}
.sl-method__kani .sl-kani:nth-child(4) {
	left: 50%;
	bottom: -85px;
	margin-left: 315px;
}


/* present
----------------------------------------------- */

.sl-present {
	margin: 0 18px;
}
.sl-present__inner {
	position: relative;
	margin: auto;
	padding: 92px 0 0;
	max-width: 960px;
	z-index: 1;
}
.sl-present__title {
	position: absolute;
	top: -34px;
	left: 0;
	right: 0;
	z-index: 1;
}
.sl-present__articles {
	margin: 0 40px;
	padding: 0 0 38px;
}
.sl-present__article {
}
.sl-present__subtitle {
	margin: auto;
	max-width: 850px;
}
.sl-present__image {
	margin: auto;
	max-width: 850px;
	font-size: 0;
}
.sl-present__caution {
	margin: 53px auto 0;
	max-width: 850px;
}

/* first */

.sl-present__article:first-child {
	padding-top: 60px;
}
.sl-present__article:first-child .sl-present__image:first-child {
	margin-top: -10px;
}
.sl-present__article:first-child .sl-present__image:last-child {
	margin-top: 36px;
}

/* last */

.sl-present__article:last-child {
	margin-top: 30px;
	padding-top: 35px;
	border-top: 3px solid #7e6b5a;
}
.sl-present__article:last-child .sl-present__image:first-child {
	margin-top: 20px;
}

/* kani */

.sl-present__kani .sl-kani:nth-child(1) {
	left: 50%;
	bottom: -90px;
	margin-left: -660px;
}


/* terms
----------------------------------------------- */

.sl-terms {
	margin: 0 18px;
}
.sl-terms__outer {
	position: relative;
	margin: auto;
	padding: 97px 0 0;
	max-width: 960px;
	z-index: 1;
}
.sl-terms__inner {
	position: relative;
	padding: 50px 0 40px;
	background-color: rgba(255,255,255,0.84);
	z-index: 1;
}
.sl-terms__title {
	position: absolute;
	top: -34px;
	left: 0;
	right: 0;
	z-index: 1;
}
.sl-terms__body {
	margin: 0 20px;
	padding: 0 20px;
	height: 260px;
	color: #5e3d0e;
	overflow: auto;
}
.sl-terms__body > *:first-child {
	margin-top: 0;
}
.sl-terms__list {
	margin: 20px 0 0;
}
.sl-terms__list li {
	padding: 0 0 0 14px;
	font-size: 14px;
	text-indent: -14px;
	text-align: justify;
	line-height: 18px;
}
.sl-terms__list li a {
	color: #5e3d0e;
}
.sl-terms__text {
	margin: 20px 0 0;
	font-size: 14px;
	text-align: justify;
	line-height: 18px;
}
.sl-terms__text a {
	color: #5e3d0e;
}


/* challenge
----------------------------------------------- */

.sl-challenge {
	margin: 0 18px;
}
.sl-challenge__inner {
	position: relative;
	margin: auto;
	padding: 67px 0 0;
	max-width: 960px;
	z-index: 1;
}
.sl-challenge__title {
	margin: auto;
	padding: 40px 0 0;
	max-width: 771px;
}
.sl-challenge__button {
	margin: 13px 0 0;
	padding: 0 0 40px;
}

/* kani */

.sl-challenge__kani .sl-kani:nth-child(1) {
	top: -5px;
	left: 50%;
	margin-left: -625px;
}
.sl-challenge__kani .sl-kani:nth-child(2) {
	top: 170px;
	left: 50%;
	margin-left: 302px;
}
.sl-challenge__kani .sl-kani:nth-child(3) {
	left: 50%;
	bottom: -25px;
	margin-left: -615px;
}


/* about
----------------------------------------------- */

.sl-about {
	margin: 80px 0 0;
	background-image: url(../img/about_bg_pc.jpg);
	background-attachment: fixed;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
.sl-about__outer {
	margin: 0 18px;
}
.sl-about__inner {
	margin: auto;
	padding: 87px 0 80px;
	max-width: 960px;
}
.sl-about__title {
	max-width: 793px;
}
.sl-about__columns {
	display: flex;
	margin: 50px 0 0;
	padding: 0 0 88px;
}
.sl-about__column {
	position: relative;
	z-index: 1;
}
.sl-about__column:first-child {
	width: 300px;
	order: 2;
}
.sl-about__column:last-child {
	width: calc(100% - 300px);
}
.sl-about__column > *:first-child {
	margin-top: 0;
}
.sl-about__images {
}
.sl-about__image {
	position: absolute;
	width: 275px;
	z-index: 1;
}
.sl-about__image:first-child {
	top: -29px;
	left: 74px;
}
.sl-about__image:last-child {
	top: 100px;
	left: -21px;
}
.sl-about__text {
	margin: 33px 0 0;
	color: #573014;
	font-size: 18px;
	font-weight: 500;
	line-height: 36px;
}
.sl-about__button {
	margin: 93px 0 0;
}

/* ready */

.js-indicate-ready.sl-about__images .sl-about__image:first-child {
	opacity: 0;
	transform: translateX(-50px);
}
.js-indicate-ready.sl-about__images .sl-about__image:last-child {
	opacity: 0;
	transform: translateX(50px);
}

/* start */

.js-indicate-start.sl-about__images .sl-about__image:first-child,
.js-indicate-start.sl-about__images .sl-about__image:last-child {
	opacity: 1;
	transform: translateX(0);
	transition-property: opacity, transform;
	transition-duration: 1s;
	transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
}


/* gallery
----------------------------------------------- */

.sl-gallery {
	position: relative;
	height: 280px;
	z-index: 1;
}
.sl-gallery__inner {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -50vw;
	width: 100vw;
}
.sl-gallery__inner:before,
.sl-gallery__inner:after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 65px;
	z-index: 1;
}
.sl-gallery__inner:before {
	left: 0;
	background: linear-gradient(to right, rgba(167,187,126,1) 0%, rgba(167,187,126,0) 100%);
}
.sl-gallery__inner:after {
	right: 0;
	background: linear-gradient(to right, rgba(167,187,126,0) 0%, rgba(167,187,126,1) 100%);
}
.sl-gallery__slide {
	font-size: 0;
	white-space: nowrap;
}
.sl-gallery__list {
	display: inline-block;
	will-change: transform;
}
.sl-gallery__list li {
	display: inline-block;
	margin: 3px;
	width: 235px;
}
.sl-gallery__list li img {
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.25s;
	will-change: opacity;
}

/* slide */

.js-gallery-start .sl-gallery__list {
	animation-duration: 100s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.js-gallery-start .sl-gallery__slide--top .sl-gallery__list:first-child {
	animation-name: gallery1;
	animation-delay: -50s;
}
.js-gallery-start .sl-gallery__slide--top .sl-gallery__list:last-child {
	animation-name: gallery2;
}
.js-gallery-start .sl-gallery__slide--bottom .sl-gallery__list:first-child {
	animation-name: gallery3;
	animation-delay: -50s;
}
.js-gallery-start .sl-gallery__slide--bottom .sl-gallery__list:last-child {
	animation-name: gallery4;
}


/* spec
----------------------------------------------- */

.sl-spec {
	background-color: #000;
}
.sl-spec__inner {
	margin: auto;
	max-width: 750pt;
}
.sl-spec__list {
	padding: 20px 0;
	color: #fff;
	font-size: 9pt;
	text-align: center;
}
.sl-spec__list li {
	display: inline-block;
	margin-right: 1em;
	letter-spacing: 0.07em;
	line-height: 2;
}


/* bg
----------------------------------------------- */

.sl-bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: -100px;
	z-index: -1;
	will-change: transform;
}
.sl-bg:before,
.sl-bg:after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(../img/background_end_pc.jpg);
	background-position: center top;
	background-size: cover;
	z-index: 1;
}
.sl-bg:after {
	background-image: url(../img/background_start_pc.jpg);
}

/* ready */

.js-bg-ready:after {
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

/* start */

.js-bg-start:after {
	opacity: 0;
}


/* gamemodal
----------------------------------------------- */

.sk-gamemodal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
}
.sk-gamemodal__mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.8);
	z-index: 1;
}
.sk-gamemodal__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.sk-gamemodal__close {
	position: absolute;
	top: 30px;
	right: 30px;
	cursor: pointer;
	z-index: 1;
}
.sk-gamemodal__close img {
	width: 80px;
	height: 30px;
}
.sk-gamemodal__loading {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1px 0 0 -100px;
	width: 200px;
	height: 6px;
	border-radius: 6px;
	background-color: #323232;
	overflow: hidden;
	z-index: 1;
}
.sk-gamemodal__progress {
}
.sk-gamemodal__bar {
	width: 100%;
	height: 6px;
	border-radius: 6px;
	background-color: #aa8c50;
	animation-name: gameload;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

/* initial */

.sk-gamemodal {
	pointer-events: none;
	visibility: hidden;
}
.sk-gamemodal__mask {
	opacity: 0;
}
.sk-gamemodal__inner {
	opacity: 0;
	transform: scale(0.95);
}
.sk-gamemodal__close {
	transform: translateY(-60px);
}
.sk-gamemodal__loading {
	transform: scaleX(0);
}
.sk-gamemodal__progress {
	transform: translateX(-100%);
}

/* ready */

.js-gamemodal-ready {
	transition-property: visibility;
	transition-duration: 0s;
	transition-delay: 0.5s;
}
.js-gamemodal-ready .sk-gamemodal__mask {
	transition-property: opacity;
	transition-duration: 0.5s;
}
.js-gamemodal-ready .sk-gamemodal__inner {
	transition-property: opacity, transform;
	transition-duration: 0.5s;
}
.js-gamemodal-ready .sk-gamemodal__close {
	transition-property: transform;
	transition-duration: 0.5s;
	transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}
.js-gamemodal-ready .sk-gamemodal__loading {
	transition-property: transform;
	transition-duration: 0.25s;
	transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
}

/* open */

.js-gamemodal-open {
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}
.js-gamemodal-open .sk-gamemodal__mask {
	opacity: 1;
}
.js-gamemodal-open .sk-gamemodal__loading {
	transform: scaleX(1);
}

/* loaded */

.js-gamemodal-loaded .sk-gamemodal__loading {
	transform: scale(0);
}
.js-gamemodal-loaded .sk-gamemodal__inner {
	opacity: 1;
	transform: scale(1);
	transition-delay: 0.25s;
}
.js-gamemodal-loaded .sk-gamemodal__close {
	transform: translateY(0);
}


/* bashing
----------------------------------------------- */

.sk-bashing {
	width: 600px;
	height: 800px;
	font-size: 0;
	line-height: 0;
	-ms-user-select: none;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	transform-origin: center;
}
.sk-bashing:after {
	display: block;
	content: "";
	position: absolute;
	top: -8px;
	left: -8px;
	right: -8px;
	bottom: -8px;
	background-image: url(../../bashing/img/gameframe.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: none;
	z-index: 1;
}
.sk-bashing canvas {
	margin: 0;
	padding: 0;
	width: 600px;
	height: 800px;
	background-color: transparent;
	overflow: hidden;
}


/* pc
----------------------------------------------- */

@media print, screen and (min-width:768px) {


	/* br
	----------------------------------------------- */

	.sl-sp {
		display: none;
	}


	/* button
	----------------------------------------------- */

	.sl-button {
		transition-property: transform;
		transition-duration: 0.35s;
		transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
		will-change: transform;
	}

	/* hover */

	.sl-button:hover {
		transform: translateY(-5px);
		transform: cubic-bezier(0.25, 1, 0.5, 1);
	}

	/* active */

	.sl-button:active {
		transform: scale(0.98);
	}


	/* official
	----------------------------------------------- */

	.sl-official__button {
		transition-property: transform;
		transition-duration: 0.35s;
		transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
		will-change: transform;
	}

	/* hover */

	.sl-official:hover .sl-official__button {
		transform: translateY(-5px);
		transform: cubic-bezier(0.25, 1, 0.5, 1);
	}
	.sl-official:hover .sl-official__rabbi {
		transform-origin: bottom;
		animation-name: jump;
		animation-duration: 1s;
		will-change: transform;
	}


	/* retina
	----------------------------------------------- */
	
	@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
	}


}


/* mobile
----------------------------------------------- */

@media only screen and (max-width:767px) {


	/* br
	----------------------------------------------- */

	.sl-pc {
		display: none;
	}


	/* title
	----------------------------------------------- */

	.sl-title {
		margin: auto;
		max-width: 299px;
		width: 100%;
	}


	/* button
	----------------------------------------------- */

	.sl-button--follow {
		max-width: 144px;
		width: 100%;
	}
	.sl-button--gameopen {
		max-width: 256px;
		width: 100%;
	}
	.sl-button--gameopenlarge {
		max-width: 302px;
		width: 100%;
	}


	/* official
	----------------------------------------------- */

	.sl-official {
		width: 224px;
	}
	.sl-official__rabbi {
		top: 17px;
		right: -31px;
		width: 50px;
	}


	/* kani
	----------------------------------------------- */

	.sl-kani {
		width: 100px;
	}


	/* cloth
	----------------------------------------------- */

	.sl-cloth {
		background-size: 50px;
	}
	.sl-cloth:before,
	.sl-cloth:after {
		left: 50px;
		right: 50px;
		height: 50px;
		background-size: 50px;
	}
	.sl-cloth__outer:after {
		top: 50px;
		bottom: 50px;
		background-size: 50px;
	}

	/* mini */
	
	.sl-cloth--mini {
		background-size: 25px;
	}
	.sl-cloth--mini:before,
	.sl-cloth--mini:after {
		left: 25px;
		right: 25px;
		height: 25px;
		background-size: 25px;
	}
	.sl-cloth--mini .sl-cloth__outer:after {
		top: 25px;
		bottom: 25px;
		background-size: 25px;
	}


	/* frame
	----------------------------------------------- */

	.sl-frame {
		background-size: 75px;
	}
	.sl-frame:before,
	.sl-frame:after {
		left: 75px;
		right: 75px;
		height: 75px;
		background-size: 75px;
	}
	.sl-frame__outer:after {
		top: 75px;
		bottom: 75px;
		background-size: 75px;
	}


	/* intro
	----------------------------------------------- */

	.sl-intro__inner {
		padding: 10px 0 0;
	}
	.sl-intro__logo {
		margin: auto;
		max-width: 219px;
	}
	.sl-intro__logo a {
	}
	.sl-intro__title {
		margin: 13px -6px 0;
		max-width: initial;
	}
	.sl-intro__cloth {
		margin: 35px auto 0;
		max-width: initial;
	}
	.sl-intro__summary {
		margin: 0 20px;
		padding: 25px 0 25px;
		max-width: initial;
	}

	/* kani */

	.sl-intro__kani .sl-kani:nth-child(1) {
		display: none;
	}
	.sl-intro__kani .sl-kani:nth-child(2) {
		top: 58%;
		left: -30px;
		margin-left: 0;
	}
	.sl-intro__kani .sl-kani:nth-child(3) {
		top: 90%;
		left: auto;
		right: -21px;
		margin-left: 0;
	}


	/* period
	----------------------------------------------- */

	.sl-period__inner {
		padding: 35px 0 0;
	}
	.sl-period__date {
		margin: 15px auto 0;
		max-width: 305px;
	}
	.sl-period__close {
		top: 50%;
		margin: -47px 0 0;
	}
	.sl-period__close span {
		max-width: 339px;
	}


	/* method
	----------------------------------------------- */

	.sl-method__inner {
		padding: 58px 0 0;
		max-width: initial;
	}
	.sl-method__title {
		top: -16px;
	}
	.sl-method__step {
		margin: 17px auto 0;
		max-width: 46px;
	}
	.sl-method__flow {
		margin: 0;
		height: 12px;
		background-size: 20px 12px;
	}
	.sl-method__flow:before,
	.sl-method__flow:after {
		height: 1px;
	}
	.sl-method__flow:before {
		margin: 0 10px 0 0;
	}
	.sl-method__flow:after {
		margin: 0 0 0 10px;
	}
	.sl-method__articles {
		margin: 0 10px;
		padding: 35px 0 20px;
	}

	/* step1 */

	.sl-method__article:nth-child(1) .sl-method__step {
		margin-top: 0;
	}
	.sl-method__article:nth-child(1) .sl-method__content {
		margin: 5px auto 0;
		max-width: 311px;
	}
	.sl-method__article:nth-child(1) .sl-method__button {
		margin: 16px 0 0;
	}

	/* step2 */

	.sl-method__article:nth-child(2) {
		margin-top: 22px;
	}
	.sl-method__article:nth-child(2) .sl-method__content {
		margin: -5px auto 0;
		max-width: 305px;
	}
	.sl-method__article:nth-child(2) .sl-method__button {
		margin-top: 8px;
	}

	/* step3 */

	.sl-method__article:nth-child(3) {
		margin-top: 20px;
	}
	.sl-method__article:nth-child(3) .sl-method__content {
		margin: 7px auto 0;
		max-width: 294px;
	}
	.sl-method__article:nth-child(3) .sl-method__caution {
		margin: 14px auto 0;
		max-width: 247px;
	}

	/* kani */

	.sl-method__kani .sl-kani:nth-child(1) {
		top: 43px;
		left: -13px;
		width: 80px;
		margin-left: 0;
	}
	.sl-method__kani .sl-kani:nth-child(2) {
		top: 29.5%;
		left: auto;
		right: -13px;
		width: 80px;
		margin-left: 0;
	}
	.sl-method__kani .sl-kani:nth-child(3) {
		left: -15px;
		bottom: 17.5%;
		width: 78px;
		margin-left: 0;
	}
	.sl-method__kani .sl-kani:nth-child(4) {
		left: auto;
		right: -20px;
		bottom: -35px;
		width: 80px;
		margin-left: 0;
	}


	/* present
	----------------------------------------------- */

	.sl-present__inner {
		padding: 50px 0 0;
		max-width: initial;
	}
	.sl-present__title {
		top: -15px;
	}
	.sl-present__articles {
		margin: 0;
		padding: 0 0 20px;
	}
	.sl-present__subtitle {
		max-width: 300px;
	}
	.sl-present__image {
		max-width: 300px;
	}
	.sl-present__caution {
		margin: 27px 0 0;
		max-width: 300px;
	}
	
	/* first */
	
	.sl-present__article:first-child {
		padding-top: 30px;
	}
	.sl-present__article:first-child .sl-present__image:first-child {
		margin-top: 0;
	}
	.sl-present__article:first-child .sl-present__image:last-child {
		margin-top: 10px;
	}
	
	/* last */
	
	.sl-present__article:last-child {
		margin: 15px 25px 0;
		padding-top: 25px;
		border-width: 1px;
	}
	.sl-present__article:last-child .sl-present__images {
		margin: 0 -25px;
	}
	.sl-present__article:last-child .sl-present__image:first-child {
		margin-top: 20px;
	}

	/* kani */

	.sl-present__kani .sl-kani:nth-child(1) {
		display: none;
	}


	/* terms
	----------------------------------------------- */

	.sl-terms__outer {
		padding: 50px 0 0;
		max-width: initial;
	}
	.sl-terms__inner {
		padding: 25px 0 15px;
	}
	.sl-terms__title {
		top: -15px;
	}
	.sl-terms__body {
		margin: 0 10px;
		padding: 0 10px;
		height: 160px;
	}
	.sl-terms__list {
		margin: 15px 0 0;
	}
	.sl-terms__list li {
		padding: 0 0 0 8px;
		font-size: 8px;
		text-indent: -8px;
		line-height: 1.2em;
	}
	.sl-terms__text {
		margin: 15px 0 0;
		font-size: 8px;
		line-height: 1.2em;
	}


	/* challenge
	----------------------------------------------- */

	.sl-challenge__inner {
		padding: 37px 0 0;
		max-width: initial;
	}
	.sl-challenge__title {
		margin: 0 14px;
		padding: 40px 0 0;
		max-width: initial;
	}
	.sl-challenge__button {
		margin: 2px 0 0;
		padding: 0 0 25px;
	}

	/* kani */

	.sl-challenge__kani .sl-kani:nth-child(1) {
		top: 15px;
		left: -26px;
		margin-left: 0;
	}
	.sl-challenge__kani .sl-kani:nth-child(2) {
		top: 40%;
		left: auto;
		right: -50px;
		width: 140px;
		margin-left: 0;
	}
	.sl-challenge__kani .sl-kani:nth-child(3) {
		left: -50px;
		bottom: -55px;
		width: 150px;
		margin-left: 0;
	}


	/* about
	----------------------------------------------- */

	.sl-about {
		margin: 38px 0 0;
		background-image: url(../img/about_bg_sp.jpg);
		background-attachment: scroll;
	}
	.sl-about__inner {
		padding: 44px 0 50px;
		max-width: initial;
	}
	.sl-about__title {
		max-width: initial;
	}
	.sl-about__columns {
		display: block;
		margin: 0;
		padding: 0 0 43px;
	}
	.sl-about__column:first-child,
	.sl-about__column:last-child {
		width: auto;
	}
	.sl-about__images {
		display: flex;
		justify-content: center;
		padding: 0 0 11px;
	}
	.sl-about__image {
		position: static;
		margin: 0 4px;
		width: 125px;
	}
	.sl-about__image:first-child {
		margin-top: -2px;
	}
	.sl-about__image:last-child {
		margin-top: 4px;
	}
	.sl-about__text {
		margin: 17px -10px 0;
		font-size: 10px;
		text-align: center;
		line-height: 18px;
	}
	.sl-about__button {
		margin: 47px 0 0;
	}


	/* gallery
	----------------------------------------------- */
	
	.sl-gallery {
		height: 140px;
	}
	.sl-gallery__inner:before,
	.sl-gallery__inner:after {
		width: 30px;
	}
	.sl-gallery__list li {
		margin: 1.5px;
		width: 117px;
	}


	/* spec
	----------------------------------------------- */

	.sl-spec__inner {
		margin: 0 2.66vw;
		max-width: initial;
	}
	.sl-spec__list {
		padding: 5.33vw 0;
		font-size: 2.66vw;
		text-align: left;
	}
	.sl-spec__list li {
		display: block;
		margin-right: 0;
	}


	/* bg
	----------------------------------------------- */

	.sl-bg:before {
		background-image: url(../img/background_end_sp.jpg);
	}
	.sl-bg:after {
		background-image: url(../img/background_start_sp.jpg);
	}


	/* gamemodal
	----------------------------------------------- */
	
	.sk-gamemodal__close {
		top: 15px;
		right: 15px;
	}


	/* bashing
	----------------------------------------------- */

	.sk-bashing {
		margin: 40px 0 0;
	}


}


/* indicate
----------------------------------------------- */

.js-indicate-ready.js-indicate-zoom {
	opacity: 0;
	transform: rotate(5deg) scale(0.5);
	will-change: opacity, transform;
}
.js-indicate-start.js-indicate-zoom {
	opacity: 1;
	transform: rotate(0deg) scale(1);
	transition-property: opacity, transform;
	transition-duration: 0.25s, 0.5s;
	transition-timing-function: linear, cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* keyframes
----------------------------------------------- */

@keyframes loading {
	0% {
		background-position: 0 0;
	}
	12.5% {
		background-position: -60px 0;
	}
	25% {
		background-position: -120px 0;
	}
	37.5% {
		background-position: -180px 0;
	}
	50% {
		background-position: -240px 0;
	}
	62.5% {
		background-position: -300px 0;
	}
	75% {
		background-position: -360px 0;
	}
	87.5% {
		background-position: -420px 0;
	}
	100% {
		background-position: -480px 0;
	}
}

@keyframes jump {
	20% {
		transform: rotate(2deg) scaleY(1.05) translateY(-20px);
	}
	50% {
		transform: scaleY(0.95) translateY(0);
	}
	80% {
		transform: scaleY(1);
	}
}

@keyframes gallery1 {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}
@keyframes gallery2 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-200%);
	}
}
@keyframes gallery3 {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}
@keyframes gallery4 {
	0% {
		transform: translateX(-200%);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes gameload {
	50% {
		background-color: #e1cf8c;
	}
}