/* 共通パーツ
------------------------- */

body {
	position: relative;
	background: -webkit-gradient(linear, left top, left bottom, from(#11356a), to(#3d66a5));
	background: linear-gradient(#11356a, #3d66a5);
	background: -ms-linear-gradient(#11356a, #3d66a5);
}

body::before {
	position: fixed;
	top: 0;
	left: 0;
	background-image: url(../images/history/bg_history.png);
	background-position: top left;
	background-repeat: repeat;
	content: '';
	height: 100%;
	width: 100%;
	z-index: -1;
}



/* パンくず */

.breadcrumb {
	position: absolute;
	top: 120px;
	left: 120px;
	z-index: 2;
}

/* ロゴ */

.header_logo a {
	display: block;
	background-image: url(../images/logo_w.svg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	height: 22px;
	width: 300px;
}

.header_logo a img {
	display: none;
}

/* ヘッダーアイコン */

.header_icon > span {
	background-image: url(../images/icon_kitty_solid_w.svg);
}

/* ナビ */

.header_nav_menu_item {
	color: #fff;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.header_nav_menu_item::after {
	content: none;
}

.header_nav_menu_item:hover {
	color: #fff;
	opacity: 0.6;
}

/* ヒストリー
------------------------- */

.history {
	height: 100vh;
	width: 100vw !important;
	-webkit-overflow-scrolling: touch;
}
.space {
	position: relative;
	width: 100%;
	height: 100%;
}
.space::before {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../images/history/bg_history.png);
	background-position: top left;
	background-repeat: repeat;
	content: '';
	height: 100%;
	width: 100%;
	z-index: -1;

}

/* 影 */

.his_sdw {
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* ボーダー */

.boder-blue {
	border: solid 5px #7cb9da;
}

.boder-pink {
	border: solid 5px #ef8eb2;
}

/* アイコン */

.icon::after {
	position: absolute;
	top: -45px;
	background-repeat: no-repeat;
	content: '';
	height: 111px;
	width: 134px;
}
.icon.icon-spl-r::after,
.icon.icon-hl-r::after {
	width: 138px;
}

.icon-spl-l::after {
	/* left: 5px; */
	left: -15px;
	background-image: url(../images/history/icon_spl_l.png);
}

.icon-spl-r::after {
	/* right: 5px; */
	right: -15px;
	background-image: url(../images/history/icon_spl_r.png);
}

.icon-hl-l::after {
	/* left: 5px; */
	left: -15px;
	background-image: url(../images/history/icon_hl_l.png);
}

.icon-hl-r::after {
	/* right: 5px; */
	right: -15px;
	background-image: url(../images/history/icon_hl_r.png);
}

.his_box.icon-spl-l::after,
.his_box.icon-hl-l::after {
	left: 0;
}
/* キャラクター */

.char::before {
	position: absolute;
	background-repeat: no-repeat;
	content: '';
}

.char-kitty::before {
	top: -116px;
	right: 18px;
	background-image: url(../images/history/icon_kitty.png);
	height: 157px;
	width: 133px;
}

.char-kitty-y::before {
	top: -116px;
	left: 0;
	background-image: url(../images/history/icon_kitty_y.png);
	height: 158px;
	width: 134px;
}

.char-kitty2::before {
	top: -123px;
	right: 12px;
	background-image: url(../images/history/icon_kitty2.png);
	height: 162px;
	width: 140px;
}

.char-krp::before {
	top: -89px;
	right: 34px;
	background-image: url(../images/history/icon_krp.png);
	height: 105px;
	width: 89px;
}

.char-krm::before {
	top: -116px;
	left: 9px;
	background-image: url(../images/history/icon_krm.png);
	height: 152px;
	width: 107px;
}

.char-xo::before {
	top: -138px;
	left: 24px;
	background-image: url(../images/history/icon_xo.png);
	height: 160px;
	width: 136px;
}

.char-pck::before {
	top: -142px;
	right: 18px;
	background-image: url(../images/history/icon_pck.png);
	height: 188px;
	width: 140px;
}

.char-gt::before {
	top: -35px;
	left: 24px;
	background-image: url(../images/history/icon_gt.png);
	height: 70px;
	width: 58px;
}

.char-mymero::before {
	top: -138px;
	left: 29px;
	background-image: url(../images/history/icon_mymero.png);
	height: 167px;
	width: 87px;
}

.char-pm::before {
	top: -110px;
	right: 40px;
	background-image: url(../images/history/icon_pm.png);
	height: 149px;
	width: 144px;
}

.char-sr::before {
	top: -84px;
	left: -10px;
	background-image: url(../images/history/icon_sr.png);
	height: 106px;
	width: 176px;
}


/* 吹き出し */

.balloon {
	position: absolute;
	bottom: 0;
	right: 25%;
	max-width: 438px;
	width: 45%;
	color: #fff;
	font-weight: bold;
	transform: translate(50%, 50%);
	opacity: 0;
	content: '';
	z-index: 3;
}
.balloon.l {
	right: auto;
	bottom: 0;
	left: 25%;
	transform: translate(-50%, 50%);
}

.balloon.blue {
	color: #46638b;
}




/* 見出し */

.his_mv {
	position: absolute;
	bottom: 50%;
	left: 50%;
	color: #fff;
	opacity: 0;
	text-align: center;
	-webkit-transform: translate(-50%, 50%);
	transform: translate(-50%, 50%);
}

.his_mv_h {
	/* font-family: 'Pacifico', cursive; */
	font-family: 'Fredoka One', cursive;
	font-size: 11rem;
	line-height: 1.8;
}

.his_mv_txt {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 2;
}

/* 星 */

.his_star {
	position: absolute;
	top: 12%;
	right: 0;
	left: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	background-image: url(../images/history/bg_star.png);
	background-position: top left;
	background-repeat: no-repeat;
	height: 170px;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: auto;
	-webkit-transform: scale(0);
	transform: scale(0);
	width: 178px;
	z-index: 3;
}

.his_star > {
	display: block;
}

.his_star span {
	color: #46638b;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1;
	margin-top: 0.2em;
}

.his_star.blue {
	background-image: url(../images/history/bg_star_blue.png);
	height: 147px;
	width: 155px;
}

.his_star.blue span {
	color: #fff;
}

.his_star.grad {
	background-image: url(../images/history/bg_star_grad.png);
	height: 182px;
	width: 188px;
}

.his_star.grad span {
	color: #fff;
}

/* ヒストリーボックス */

.his_box {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #fff;
	border-radius: 20px;
	-webkit-box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
	font-weight: 700;
	margin: 0 auto;
	opacity: 0;
	padding: 2vw 4vw;
	text-align: center;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
	width: 48.6%;
	z-index: 3;
}

.his_box.border {
	border: solid 5px #46638b;
}

.his_box_img {
	margin-bottom: 20px;
}

.his_box_h {
	font-size: 3rem;
	line-height: 1.4;
}

.his_box_txt {
	color: #46638b;
	font-size: 2rem;
}

.his_recruit {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background: -webkit-gradient(linear, right top, left top, from(#dba1d6), to(#86c8e7));
	background: linear-gradient(to left, #dba1d6, #86c8e7);
	border-radius: 20px;
	-webkit-box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
	margin: 0 auto;
	opacity: 0;
	padding: 5px;
	text-align: center;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
	width: 65%;
	z-index: 3;
}

.his_recruit_inner {
	background-color: #fff;
	border-radius: 20px;
	padding: 5.6vw 4vw 4vw;
}

.his_recruit_h {
	color: #46638b;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 28.5px;
}

.his_recruit_txt {
	line-height: 2;
	margin-bottom: 37px;
}

.his_recruit_btn .btn {
	margin: 0 auto;
	width: 237px;
}

/* パレード */

.his_parade {
	position: absolute;
	bottom: 0;
	opacity: 0;
	/* -webkit-transform: translateY(50%);
	transform: translateY(50%); */
	-webkit-transform: translate(-50%, 50%);
	transform: translate(-50%, 50%);
	width: 438px;
	z-index: 3;
}

.his_parade.right {
	/* right: 10vw; */
	right: 25%;
	-webkit-transform: translate(50%, 45%);
	transform: translate(50%, 45%);
}

.his_parade.left {
	/* left: 10vw; */
	left: 25%;
}

.his_parade_img {
	position: relative;
	border-radius: 20px;
	-webkit-box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
	overflow: hidden;
}
.his_parade_img img {
	width: 100%;
}
.his_parade_txt {
	color: #fff;
	/* font-size: 2.2rem; */
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.6;
	/* margin-top: 18px; */
	margin-bottom: 30px;
	/* text-align: center; */
}

.his_parade_txt.blue {
	color: #46638b;
}

/* 雲 */

/* .cloud {
	position: absolute;
	top: 100%;
	padding: 180px 0;
	width: 100%;
	z-index: 2;
}

.cloud::before,
.cloud::after {
	position: absolute;
	left: 0;
	background-repeat: no-repeat;
	background-size: cover;
	content: '';
	height: 180px;
	width: 100%;
}

.cloud::before {
	top: 0;
	background-image: url(../images/history/bg_cloud_01.png);
	background-position: top center;
}

.cloud::after {
	bottom: 0;
	background-image: url(../images/history/bg_cloud_02.png);
	background-position: bottom center;
}

.cloud_inner {
	background-color: #fff;
	height: 100vh;
}

.cloud_inner::before {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../images/history/bg_history_cloud.png);
	background-position: top left;
	background-repeat: repeat;
	content: '';
	height: 100%;
	opacity: 0.2;
	width: 100%;
	z-index: 1;
} */


.cloud {
	position: absolute;
	top: 100%;
	width: 100%;
	height: calc(100% + 360px);
}
.cloud::before {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../images/history/bg_history_cloud.png);
	background-position: top left;
	background-repeat: repeat;
	content: '';
	height: 100%;
	opacity: 0.2;
	width: 100%;
	z-index: 3;
}
.cloud_inner {
	position: absolute;
	/* top: 100%; */
	padding: 180px 0;
	width: 100%;
	z-index: 2;
}

.cloud_inner::before,
.cloud_inner::after {
	position: absolute;
	left: 0;
	background-repeat: no-repeat;
	background-size: cover;
	content: '';
	height: 180px;
	width: 100%;
}

.cloud_inner::before {
	top: 0;
	background-image: url(../images/history/bg_cloud_01.png);
	background-position: top center;
}

.cloud_inner::after {
	bottom: 0;
	background-image: url(../images/history/bg_cloud_02.png);
	background-position: bottom center;
}

.cloud_content {
	background-color: #fff;
	height: 100vh;
}




/* キキララ */

.kkrr {
	position: absolute;
	top: 20%;
	left: -300px;
	height: 231px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 291px;
	z-index: 4;
}

.kkrr.move {
	-webkit-animation: kkrrMove 6s linear infinite;
	animation: kkrrMove 6s linear infinite;
}

.ie .kkrr.move {
	-webkit-animation: none;
	animation: none;
}

/* ポムポムプリン */

.pm {
	position: absolute;
	top: 100%;
	left: 15%;
	height: 148px;
	width: 166px;
}

/* 雲 キキララ */

.cloud_kkrr {
	position: absolute;
	top: 100%;
	left: 15%;
	height: 244px;
	width: 284px;
	z-index: 3;
}

.cloud_kkrr2 {
	position: absolute;
	top: 20%;
	left: -284px;
	height: 179px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 275px;
	z-index: 4;
}

.cloud_kkrr2.move {
	-webkit-animation: kkrrMove 6s linear infinite;
	animation: kkrrMove 6s linear infinite;
}

.ie .cloud_kkrr2.move {
	-webkit-animation: none;
	animation: none;
}

/* 雲 マイメロ */

.cloud_mymero {
	position: absolute;
	top: 100%;
	/* right: 10%; */
	right: 13%;
	height: 208px;
	width: 144px;
	z-index: 3;
}

/* 雲 シナモンロール */

.cloud_sr {
	position: absolute;
	top: 100%;
	/* left: 12%; */
	left: 10%;
	height: 164px;
	width: 186px;
	z-index: 3;
}

/* 空 */

.sky {
	position: absolute;
	top: 100%;
	width: 100%;
	z-index: 1;
}

.sky_inner {
	background: -webkit-gradient(linear, left top, left bottom, from(#8dbfed), to(#fff));
	background: linear-gradient(#8dbfed, #fff);
	background: -ms-linear-gradient(#8dbfed, #fff);
	height: 120vh;
}

.sky_inner::before {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../images/history/bg_history_black.png);
	background-position: top left;
	background-repeat: repeat;
	content: '';
	height: 100%;
	opacity: 0.3;
	width: 100%;
	z-index: 1;
}

/* 空 キキララ */

.sky_kkrr {
	position: absolute;
	top: 20%;
	left: -500px;
	height: 197px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 256px;
	z-index: 4;
}

.sky_kkrr.move {
	-webkit-animation: kkrrMove 6s linear infinite;
	animation: kkrrMove 6s linear infinite;
}

.ie .sky_kkrr.move {
	-webkit-animation: none;
	animation: none;
}

/* 空 ぐでたま */

.sky_gt {
	position: absolute;
	top: 100%;
	right: 10%;
	height: 147px;
	width: 216px;
	z-index: 3;
}

/* 空 キティ */

.sky_kitty {
	position: absolute;
	top: 100%;
	/* left: 10%; */
	left: 8%;
	height: 235px;
	width: 283px;
	z-index: 3;
}

/* 虹 */

.rainbow {
	position: absolute;
	bottom: 0;
	left: 0;
	background-image: url(../images/history/rainbow.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	height: 100vh;
	opacity: 0;
	width: 100%;
	z-index: 1;
}

/* キャラクター */

.character_set {
	position: absolute;
	bottom: -603px;
	left: 0;
	height: 603px;
	width: 100%;
	z-index: 3;
}

.character_set.show .character {
	-webkit-animation: charaJump 1s forwards;
	animation: charaJump 1s forwards;
}

.character {
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}

.character-gt {
	top: 58px;
	left: -705px;
	height: 28px;
	width: 36px;
}

.character-krm {
	top: -2px;
	left: -630px;
	height: 105px;
	width: 89px;
}

.character-krp {
	top: 8px;
	left: -475px;
	height: 77px;
	width: 66px;
}

.character-pck {
	top: -20px;
	left: -324px;
	height: 118px;
	width: 88px;
}

.character-pm {
	left: -175px;
	height: 98px;
	width: 103px;
}

.character-sr {
	top: 10px;
	right: -178px;
	height: 64px;
	width: 125px;
}

.character-mymero {
	top: -12px;
	right: -322px;
	height: 102px;
	width: 78px;
}

.character-kkrr {
	top: -14px;
	right: -530px;
	height: 115px;
	width: 134px;
}

.character-xo {
	top: 2px;
	right: -732px;
	height: 105px;
	width: 85px;
}

/* 星 */

.star {
  position: absolute;
  top: 100%;
  background-image: url(../images/history/star.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 3;
}
.star-01 {
  left: 80%;
  height: 58px;
  width: 61px;
}

.star-02 {
  left: 10%;
  height: 29px;
  opacity: 0.5;
  width: 30.5px;
}

.star-03 {
  left: 30%;
	width: 50px;
	height: 47px;
  opacity: 0.5;
}

.star-04 {
	left: 90%;
	width: 28px;
	height: 29px;
	opacity: 0.5;
}

.star-05 {
	left: 75%;
	width: 37px;
	height: 35px;
}

.star-06 {
	left: 85%;
	width: 53px;
	height: 50px;
	opacity: 0.5;
}

.star-07 {
	left: 15%;
	width: 37px;
	height: 35px;
}

.star-08 {
	left: 5%;
	width: 55px;
	height: 52px;
	opacity: 0.5;
}

.star-09 {
	left: 40%;
	width: 28px;
	height: 26px;
	opacity: 0.8;
}

.star-10 {
	left: 72%;
	width: 52px;
	height: 49px;
	opacity: 0.5;
}

.star-11 {
	left: 95%;
	width: 61px;
	height: 58px;
}

.star-12 {
	left: 5%;
	width: 37px;
	height: 35px;
	opacity: 0.5;
}

.star-13 {
	left: 15%;
	width: 37px;
	height: 35px;
}

.star-14 {
	left: 72%;
	width: 42px;
	height: 39px;
	opacity: 0.5;
}

.star-15 {
	left: 80%;
	width: 55px;
	height: 52px;
	opacity: 0.5;
}

.star-16 {
	left: 45%;
	width: 28px;
	height: 26px;
}

.star-17 {
	left: 8%;
	width: 28px;
	height: 26px;
}

.star-17 {
	left: 65%;
	width: 46px;
	height: 43px;
	opacity: 0.5;
}

.star-18 {
	left: 95%;
	width: 55px;
	height: 52px;
	opacity: 0.5;
}

.star-19 {
	left: 45%;
	width: 28px;
	height: 26px;
	opacity: 0.5;
}

.star-20 {
	left: 80%;
	width: 50px;
	height: 47px;
}

.star-21 {
	left: 6%;
	width: 37px;
	height: 35px;
}

.star-22 {
	left: 6%;
	width: 61px;
	height: 58px;
	opacity: 0.5;
}

.star-23 {
	left: 15%;
	width: 55px;
	height: 52px;
	opacity: 0.5;
}

.star-24 {
	left: 50%;
	width: 28px;
	height: 26px;
	opacity: 0.5;
}

.star-25 {
	left: 80%;
	width: 50px;
	height: 47px;
	opacity: 0.5;
}

.star-26 {
	left: 20%;
	width: 28px;
	height: 26px;
	opacity: 0.5;
}

.star-27 {
	left: 65%;
	width: 55px;
	height: 52px;
	opacity: .8
}

.star-28 {
	left: 65%;
	width: 28px;
	height: 26px;
}

.star-29 {
	left: 45%;
	width: 37px;
	height: 35px;
	opacity: .5
}

.star-30 {
	left: 60%;
	width: 55px;
	height: 52px;
	opacity: .5
}


/* 雲 */

.bg_cloud {
  position: absolute;
  top: 100%;
  background-image: url(../images/history/cloud.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 3;
}

.bg_cloud-01 {
  left: 5%;
  height: 152px;
  opacity: 0.9;
  width: 222px;
}

.bg_cloud-02 {
  left: 80%;
	width: 191px;
  height: 130px;
  opacity: 0.6;
}

.bg_cloud-03 {
  left: 55%;
	width: 157px;
	height: 116px;
}

.bg_cloud-04 {
  left: -10%;
	width: 261px;
	height: 178px;
  opacity: 0.8;
}

.bg_cloud-05 {
  left: 40%;
	width: 157px;
	height: 116px;
  opacity: 0.4;
}

.bg_cloud-06 {
  left: 90%;
	width: 205px;
	height: 140px;
	opacity: 0.6;
}

.bg_cloud-07 {
  left: -2%;
	width: 157px;
	height: 116px;
	opacity: 0.5;
}

.bg_cloud-08 {
  left: 30%;
  width: 157px;
	height: 116px;
	opacity: 0.4;
}

.bg_cloud-09 {
	left: 60%;
  width: 265px;
	height: 196px;
	opacity: 0.4;
}



/* scroll */
.scroll-arrow {
	position: absolute;
	left: 50%;
	bottom: 20px;
	padding-top: 60px;
	color: #fff;
	font-family: 'Fredoka One', cursive;
	font-size: 1.4rem;
	transform: translateX(-50%);
	transition: opacity 0.4s;
	letter-spacing: 0.1em;

}
.scroll-arrow.is-hide {
	opacity: 0;
}

.scroll-arrow	span {
	position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: scrollArrow 3s infinite;
  animation: scrollArrow 3s infinite;
  opacity: 0;
  box-sizing: border-box;
}

.scroll-arrow span:nth-child(1) {
	-webkit-animation-delay: 0s;
	 animation-delay: 0s;
}
.scroll-arrow span:nth-child(2) {
	top: 13px;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}
.scroll-arrow span:nth-child(3) {
	top: 26px;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
@-webkit-keyframes scrollArrow {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}
@keyframes scrollArrow {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}




@media only screen and (max-width: 1250px) {
	.his_mv br.is_pc {
		display: none;
	}
}


@media only screen and (max-width: 980px) {
	.header_logo a {
		width: 236.5px;
	}

	.header_icon > span {
		background-image: none;
	}

	.his_parade {
		width: 45%;
	}
	/* .balloon {
		right: -38vw;
		width: 35vw;
	}
	.balloon.l {
		left: -38vw;
	} */
}

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

/* .header_logo a {
	width: 236.5px;
}

.header_icon > span {
	background-image: none;
} */

.icon::after,
.icon.icon-spl-r::after,
.icon.icon-hl-r::after {
	top: -30px;
	background-size: 98.5px auto;
	height: 82.5px;
	width: 98.5px;
}

.icon-spl-l::after {
	/* left: -16px; */
	left: 5px;
}

.icon-spl-r::after {
	/* right: -16px; */
	right: 5px;
}

.icon-hl-l::after {
	/* left: -16px; */
	left: 5px;
}

.icon-hl-r::after {
	/* right: -16px; */
	right: 5px;
}

.char::before {
	display: none;
}

.char-kitty::before {
	top: -60px;
	right: 8px;
	background-size: 66.5px auto;
	height: 78.5px;
	width: 66.5px;
}

.char-kitty-y::before {
	top: -60px;
	left: 8px;
	background-size: 66.5px auto;
	height: 79px;
	width: 67px;
}

.char-kitty2::before {
	top: -60px;
	right: 8px;
	background-image: url(../images/history/icon_kitty2.png);
	background-size: 70px auto;
	height: 81px;
	width: 70px;
}

.char-krp::before {
	top: -56px;
	right: 8px;
	background-size: 59px auto;
	height: 70px;
	width: 59px;
}

.char-krm::before {
	top: -84px;
	left: 8px;
	background-size: 71px auto;
	height: 101px;
	width: 71px;
}

.char-xo::before {
	top: -96px;
	left: 10px;
	background-size: 90px auto;
	height: 114px;
	width: 90px;
}

.char-pck::before {
	top: -106px;
	right: 8px;
	background-size: 93.5px auto;
	height: 126px;
	width: 93.5px;
}

.char-mymero::before {
	top: -96px;
	left: 8px;
	background-size: 58px auto;
	height: 112px;
	width: 58px;
}

.char-pm::before {
	top: -60px;
	right: 8px;
	background-size: 72px auto;
	height: 74.5px;
	width: 72px;
}

.char-sr::before {
	top: -64px;
	left: -5px;
	background-image: url(../images/history/icon_sr.png);
	background-size: 118px auto;
	height: 72px;
	width: 118px;
}

.his_mv {
	left: 0;
	padding: 0 20px;
	/* -webkit-transform: translate(0%, 50%);
	transform: translate(0%, 50%); */
	-webkit-transform: translate(0%, 35%);
	transform: translate(0%, 35%);
	width: 100%;
}

.his_mv_h {
	font-size: 5rem;
	margin-bottom: 15px;
}

.his_mv_txt {
	font-size: 1.5rem;
	line-height: 1.6;
}

.his_star {
	background-size: 101px auto;
	height: 96.5px;
	width: 101px;
}

.his_star span {
	font-size: 2rem;
}

.his_star.blue,
.his_star.grad {
	height: 96.5px;
	width: 101px;
}

.his_box {
	/* margin: 0 20px; */
	padding: 26px 20px;
	width: calc(100% - 40px);
	max-width: 520px;
	margin: 0 auto;
}

.his_box_img {
	margin: 0 auto 10px;
	width: 40%;
}

.his_box_h {
	font-size: 1.6rem;
}

.his_box_txt {
	font-size: 1.5rem;
	line-height: 1.5;
}

.his_recruit {
	/* margin: 0 20px; */
	width: calc(100% - 40px);
	max-width: 520px;
	margin: 0 auto;
}

.his_recruit_inner {
	padding: 45px 20px 35px;
}

.his_recruit_h {
	font-size: 2rem;
	margin-bottom: 15px;
}
.his_recruit_h br {
	display: none;
}

.his_recruit_txt {
	line-height: 1.6;
	margin-bottom: 26px;
}

.his_recruit_btn .btn {
	max-width: 240px;
	width: 84.2105263157%;
}

.his_parade {
	/* margin: 0 20px; */
	width: calc(100% - 40px);
	padding: 0 20px;
	max-width: 520px;
	margin: 0 auto;
}

.his_parade.right {
	right: 50%;
}

.his_parade.left {
	left: 50%;
}

.his_parade_txt {
	font-size: 1.5rem;
	margin-top: 10px;
}


.balloon,
.balloon.l {
	right: auto;
	left: 50%;
	width: calc(100% - 40px);

	transform: translate(-50%, 50%);
}
.his_parade_txt {
	text-align: center;
}

.cloud {
	height: calc(100% + 180px);
}
.cloud_inner {
	padding: 90px 0;
}

.cloud_inner::before,
.cloud_inner::after {
	height: 90px;
}
/* .cloud {
	padding: 90px 0;
}

.cloud::before,
.cloud::after {
	height: 90px;
} */
/* .cloud_inner {
	height: calc(100vh + 90px);
} */

.kkrr {
	height: 115.5px;
	width: 145.5px;
}
.kkrr.move {
	-webkit-animation: kkrrMove 18s linear infinite;
	animation: kkrrMove 18s linear infinite;
}

.pm {
	left: 5%;
	height: 74px;
	width: 83px;
}

.cloud_kkrr {
	right: 0;
	left: 0;
	height: 122px;
	margin: auto;
	width: 142px;
}

.cloud_kkrr2 {
	height: 89.5px;
	width: 137.5px;
}

.cloud_kkrr2.move {
	-webkit-animation: kkrrMove 18s linear infinite;
	animation: kkrrMove 18s linear infinite;
}

.cloud_mymero {
	right: 15%;
	height: 104px;
	width: 72px;
}

.cloud_sr {
	right: 15%;
	height: 82px;
	width: 93px;
}

.sky_kkrr {
	height: 98.5px;
	width: 128px;
}
.sky_kkrr.move {
	-webkit-animation: kkrrMove 18s linear infinite;
	animation: kkrrMove 18s linear infinite;
}
.sky_gt {
	height: 73.5px;
	width: 108px;
}

.sky_kitty {
	height: 117.5px;
	width: 141.5px;
}

.character {
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
}

.character-gt {
	display: none;
}

.character-krm {
	display: none;
}

.character-krp {
	display: none;
}

.character-pck {
	display: none;
}

.character-mymero {
	display: none;
}

.character-kkrr {
	display: none;
}

.character-xo {
	display: none;
}

.scroll-arrow {
	top: calc(85% - 80px);
	padding-top: 55px;
	font-size: 1.2rem;
}
.scroll-arrow span {
	width: 18px;
	height: 18px;
	margin-left: -9px;

}

}

@media only screen and (max-width: 320px) {
	.his_star {
		top: 8%;
	}
	.his_box_txt br {
		display: none;
	}
	.his_parade_txt {
		font-size: 1.4rem;
	}
	.his_recruit_h {
		font-size: 1.8rem;
	}
	.his_recruit_h br,
	.his_recruit_txt br {
		display: none;
	}
	.his_recruit_btn .btn {
		font-size: 1.4rem;
	}
	/* .scroll-arrow {
		bottom: 20px;
	} */
}