/* animation */
@keyframes bound {
	0% { transform: translateY(-100%); }
	24% { transform: translateY(8%); }
	40% { transform: translateY(-5%); }
	56% { transform: translateY(4%); }
	70% { transform: translateY(-3%); }
	82% { transform: translateY(2%); }
	92% { transform: translateY(-1%); }
	100% { transform: translateY(0); }
}

/* mainVisual */
#mainVisual {
}
#mainVisual .bg {
	overflow: hidden;
	position: relative;
	background-image: url(../img/bg_sp.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: calc(794 / 768 * 100%) 0 0 0;
}
#mainVisual .bg:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background-image: url(../img/bg_desk_sp.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 0 0 calc(474 / 768 * 100%) 0;
}
#mainVisual #board {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	transform: translateY(-100%);
}
#mainVisual #board.move {
	animation: bound 0.8s ease-out 0.5s forwards;
}
#mainVisual #scene .item div {
	opacity: 0;
	transition: opacity 0.6s ease-out;
	backface-visibility: hidden;
	zoom: 1;
}
#mainVisual #scene .item.current div {
	opacity: 1;
}
#mainVisual #scene .item#scene1 .char01_1 {
	position: absolute;
	bottom: 0;
	left: calc(181 / 768 * 100%);
	width: calc(251 / 768 * 100%);
	padding: 0 0 calc(143 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene2 .char02_1 {
	position: absolute;
	bottom: 0;
	left: calc(166 / 768 * 100%);
	width: calc(497 / 768 * 100%);
	padding: 0 0 calc(155 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene3 .char03_1 {
	position: absolute;
	bottom: 0;
	left: calc(245 / 768 * 100%);
	width: calc(186 / 768 * 100%);
	padding: 0 0 calc(210 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene4 .char04_1 {
	position: absolute;
	bottom: 0;
	left: calc(531 / 768 * 100%);
	width: calc(104 / 768 * 100%);
	padding: 0 0 calc(225 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene5 .char05_1 {
	position: absolute;
	bottom: 0;
	left: calc(219 / 768 * 100%);
	width: calc(335 / 768 * 100%);
	padding: 0 0 calc(147 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene6 .char06_1 {
	position: absolute;
	bottom: 0;
	left: calc(133 / 768 * 100%);
	width: calc(458 / 768 * 100%);
	padding: 0 0 calc(149 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene7 .char07_1 {
	position: absolute;
	bottom: 0;
	left: calc(464 / 768 * 100%);
	width: calc(107 / 768 * 100%);
	padding: 0 0 calc(158 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene8 .char08_1 {
	position: absolute;
	bottom: 0;
	left: calc(178 / 768 * 100%);
	width: calc(131 / 768 * 100%);
	padding: 0 0 calc(138 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene9 .char09_1 {
	position: absolute;
	bottom: 0;
	left: calc(382 / 768 * 100%);
	width: calc(160 / 768 * 100%);
	padding: 0 0 calc(151 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene10 .char10_1 {
	position: absolute;
	bottom: 0;
	left: calc(228 / 768 * 100%);
	width: calc(124 / 768 * 100%);
	padding: 0 0 calc(227 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene11 .char11_1 {
	position: absolute;
	bottom: 0;
	left: calc(165 / 768 * 100%);
	width: calc(258 / 768 * 100%);
	padding: 0 0 calc(158 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene12 .char12_1 {
	position: absolute;
	bottom: 0;
	left: calc(233 / 768 * 100%);
	width: calc(335 / 768 * 100%);
	padding: 0 0 calc(159 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene13 .char13_1 {
	position: absolute;
	bottom: 0;
	left: calc(192 / 768 * 100%);
	width: calc(236 / 768 * 100%);
	padding: 0 0 calc(124 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene14 .char14_1 {
	position: absolute;
	bottom: 0;
	left: calc(243 / 768 * 100%);
	width: calc(354 / 768 * 100%);
	padding: 0 0 calc(123 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene15 .char15_1 {
	position: absolute;
	bottom: 0;
	left: calc(173 / 768 * 100%);
	width: calc(227 / 768 * 100%);
	padding: 0 0 calc(157 / 768 * 100%) 0;
}
#mainVisual #scene .item#scene16 .char16_1 {
	position: absolute;
	bottom: 0;
	left: calc(85 / 768 * 100%);
	width: calc(98 / 768 * 100%);
	padding: 0 0 calc(180 / 768 * 100%) 0;
}
@media screen and (min-width: 769px) {
	#mainVisual .bg {
		background-image: url(../img/bg.jpg);
		padding: 0 0 calc(1303 / 1280 * 100%) 0;
	}
	#mainVisual .bg:after {
		background-image: url(../img/bg_desk.png);
		padding: 0 0 calc(790 / 1280 * 100%) 0;
	}
	#mainVisual #board {
	}
	#mainVisual #scene .item#scene1 .char01_1 {
		left: calc(303 / 1280 * 100%);
		width: calc(418 / 1280 * 100%);
		padding: 0 0 calc(238 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene2 .char02_1 {
		left: calc(278 / 1280 * 100%);
		width: calc(829 / 1280 * 100%);
		padding: 0 0 calc(258 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene3 .char03_1 {
		left: calc(410 / 1280 * 100%);
		width: calc(310 / 1280 * 100%);
		padding: 0 0 calc(349 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene4 .char04_1 {
		left: calc(887 / 1280 * 100%);
		width: calc(173 / 1280 * 100%);
		padding: 0 0 calc(375 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene5 .char05_1 {
		left: calc(367 / 1280 * 100%);
		width: calc(559 / 1280 * 100%);
		padding: 0 0 calc(245 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene6 .char06_1 {
		left: calc(224 / 1280 * 100%);
		width: calc(764 / 1280 * 100%);
		padding: 0 0 calc(248 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene7 .char07_1 {
		left: calc(775 / 1280 * 100%);
		width: calc(179 / 1280 * 100%);
		padding: 0 0 calc(262 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene8 .char08_1 {
		left: calc(299 / 1280 * 100%);
		width: calc(219 / 1280 * 100%);
		padding: 0 0 calc(230 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene9 .char09_1 {
		left: calc(639 / 1280 * 100%);
		width: calc(266 / 1280 * 100%);
		padding: 0 0 calc(251 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene10 .char10_1 {
		left: calc(381 / 1280 * 100%);
		width: calc(207 / 1280 * 100%);
		padding: 0 0 calc(377 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene11 .char11_1 {
		left: calc(276 / 1280 * 100%);
		width: calc(430 / 1280 * 100%);
		padding: 0 0 calc(263 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene12 .char12_1 {
		left: calc(390 / 1280 * 100%);
		width: calc(558 / 1280 * 100%);
		padding: 0 0 calc(265 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene13 .char13_1 {
		left: calc(322 / 1280 * 100%);
		width: calc(394 / 1280 * 100%);
		padding: 0 0 calc(206 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene14 .char14_1 {
		left: calc(407 / 1280 * 100%);
		width: calc(590 / 1280 * 100%);
		padding: 0 0 calc(204 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene15 .char15_1 {
		left: calc(290 / 1280 * 100%);
		width: calc(378 / 1280 * 100%);
		padding: 0 0 calc(262 / 1280 * 100%) 0;
	}
	#mainVisual #scene .item#scene16 .char16_1 {
		left: calc(143 / 1280 * 100%);
		width: calc(164 / 1280 * 100%);
		padding: 0 0 calc(300 / 1280 * 100%) 0;
	}
}

/* contentNav */
#contentNav {
}
#contentNav .content {
	z-index: 100;
	background-color: #f0d0b0;
	padding: 29px 0 22px 0;
}
#contentNav .contentInner {
	width: calc(688 / 768 * 100%);
}
#contentNav .frame {
	position: relative;
}
#contentNav .frame:before {
	content: "";
	display: block;
	background-image: url(../img/img_frame_top_sp.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	padding: calc(20 / 688 * 100%) 0 0 0;
}
#contentNav .frame:after {
	content: "";
	display: block;
	background-image: url(../img/img_frame_bottom_sp.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	padding: 0 0 calc(20 / 688 * 100%) 0;
}
#contentNav .frameInner {
	background-image: url(../img/img_frame_middle_sp.png);
	background-position: center center;
	background-repeat: repeat-y;
	background-size: contain;
	padding: 24px 0 9px 0;
}
#contentNav .title {
	position: absolute;
	top: -5%;
	left: 0;
	right: 0;
	width: calc(223 / 688 * 100%);
	margin: auto;
}
#contentNav .item {
	width: calc(604 / 688 * 100%);
	margin: 0 auto 7px auto;
}
#contentNav .item .badge {
	opacity: 1;
	position: absolute;
	bottom: 6px;
	right: 2px;
	width: calc(137 / 688 * 100%);
}
@media screen and (min-width: 769px) {
	#contentNav .content {
		padding: 52px 0 54px 0;
	}
	#contentNav .contentInner {
		width: calc(1061 / 1280 * 100%);
	}
	#contentNav .frame {
	}
	#contentNav .frame:before {
		background-image: url(../img/img_frame_top.png);
		padding: calc(20 / 1061 * 100%) 0 0 0;
	}
	#contentNav .frame:after {
		background-image: url(../img/img_frame_bottom.png);
		padding: 0 0 calc(20 / 1061 * 100%) 0;
	}
	#contentNav .frameInner {
		background-image: url(../img/img_frame_middle.png);
		padding: 27px 0 21px 0;
	}
	#contentNav .title {
		top: -14%;
		width: calc(208 / 1061 * 100%);
	}
	#contentNav .list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(981 / 1061 * 100%);
		margin: auto;
	}
	#contentNav .item {
		position: relative;
		width: calc(325 / 981 * 100%);
		margin: 0 auto 7px auto;
	}
	#contentNav .item:last-child {
		width: calc(324 / 981 * 100%);
	}
	#contentNav .item .badge {
		top: -39px;
		bottom: auto;
		right: -37px;
		width: calc(112 / 324 * 100%);
	}
}

/* modal2 */
#modalArea #modal2 .modalContent {/*
	align-items: flex-start;
	overflow: auto;
	padding: 40px 0 40px 0;
	-webkit-overflow-scrolling: touch;*/
}
#modalArea #modal2 .image {
	position: relative;
	width: 100%;
	max-width: 900px;
	background-image: url(../img/modal/img_modal02_bg_1_sp.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	padding: calc(886 / 768 * 100%) 0 0 0;
}
#modalArea #modal2 .image:before {
	content: "";
	opacity: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-image: url(../img/modal/img_modal02_bg_2_sp.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
#modalArea #modal2 .image.moving:before {
	opacity: 1;
}
#modalArea #modal2 #slide {
	overflow: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
#modalArea #modal2 #slide .list {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: transform 0.4s ease-out;
}
#modalArea #modal2 #slide .list .item {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: calc(100 / 768 * 100%) 0 0 0;
}
#modalArea #modal2 #slide .list .item:nth-child(2) {
	transform: translateY(100%);
}
#modalArea #modal2 #slide .list .item:nth-child(3) {
	transform: translateY(200%);
}
#modalArea #modal2 #slide .control {
}
#modalArea #modal2 #slide .control div {
	cursor: pointer;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: calc(20 / 768 * 100%) 0;
}
#modalArea #modal2 #slide .control div.disabled {
	cursor: auto;
}
#modalArea #modal2 #slide .control div:before {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	margin: auto;
	border-top: 4px solid #cf0010;
	border-right: 4px solid #cf0010;
	transform: rotate(135deg);
}
#modalArea #modal2 #slide .control div.disabled:before {
	opacity: 0;
}
#modalArea #modal2 #slide .control .prev {
	top: 0;
	bottom: auto;
}
#modalArea #modal2 #slide .control .prev:before {
	transform: rotate(-45deg);
}
#modalArea .closeBtn {
	left: 0;
	width: calc(688 / 768 * 100%);
	margin: auto;
}
@media screen and (min-width:769px) {
	#modalArea #modal2 .image {
		height: 80vh;
		background-image: url(../img/modal/img_modal02_bg_1.png);
		background-size: cover;
		padding: 0;
	}
	#modalArea #modal2 .image:before {
		background-image: url(../img/modal/img_modal02_bg_2.png);
		background-size: cover;
	}
	#modalArea #modal2 #slide {
		width: calc(735 / 900 * 100%);
		max-width: 735px;
		margin: auto;
	}
	#modalArea #modal2 #slide .list {
	}
	#modalArea #modal2 #slide .list .item {
		padding: calc(100 / 735 * 100%) 0 0 0;
	}
	#modalArea #modal2 .image img {
		width: auto;
		width: initial;
		max-width: 735px;
		max-height: 100%;
	}
	#modalArea #modal2 #slide .control {
	}
	#modalArea #modal2 #slide .control div {
		padding: calc(20 / 768 * 100%) 0;
	}
	#modalArea #modal2 #slide .control div:before {
		width: 12px;
		height: 12px;
		border-top: 5px solid #cf0010;
		border-right: 5px solid #cf0010;
	}
	#modalArea .closeBtn {
		left: auto;
		width: auto;
	}
}