@charset "UTF-8";
/*--------------------------------------------------
  body
--------------------------------------------------*/
html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

body {
	background: #111;
	font-size: 15px;
	font-family: 'ヒラギノ角ゴ Pro W5','Hiragino Kaku Gothic Pro',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

a {
  transition: all 0.3s ease;
	text-decoration: none;
	cursor: pointer;
}

/*a:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
}*/

/*img {
	width: 100%;
	max-width: 100%;
}*/

body, html {
	height: 100%;
}

.sp_only {
  display: none;
}
.pc_only {
  display: block;
}

.cf:after {
  content: "";
  clear: both;
  display: block;
}

/* SP ----------------------------------------*/
@media screen and (max-width: 768px) {
	.sp_only {
		display: block;
	}
	.pc_only {
		display: none;
	}
}






/*--------------------------------------------------
  main
--------------------------------------------------*/
main img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: auto;
}

main a {
	display: block;
}





/*--------------------------------------------------
  contents
--------------------------------------------------*/
#contents {
	background: url("../img/bg.jpg") center 0 no-repeat;
	background-size: cover;
	background-attachment: fixed;
	width: 100%;
	min-height: 100vh;
	min-width: 1240px;
	padding: 40px 0 80px;
	box-sizing: border-box;
	color: #fff;
	position: relative;
}


.contents_inner {
	max-width: 1240px;
	margin: auto;
	position: relative;
	z-index: 1;
}
.contents_inner:after {
	content: "";
	position: absolute;
	top: 0;
	right: -80px;
	background: url("../img/chara.png") right 0 no-repeat;
	background-size: 100% auto;
	width: 517px;
	height: 746px;
}


.contents_block_inner {
	background: url("../img/bg_ptn.png") 0 0 repeat;
	background-size: 5px auto;
	margin: -2px 0 0;
	padding: 40px 80px 80px;
	box-sizing: border-box;
	border: 2px solid #fff;
  box-shadow:
		0 0 5px #ff43fe,
		0 0 5px #ff43fe inset,
		0 0 15px #ff43fe,
		0 0 15px #ff43fe inset;
}


.main_ttl {
	position: relative;
	z-index: 1;
}


.main_txt {
	margin: 40px 0 0;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	text-shadow: 
    1px 1px 10px rgba(255,255,255,0.3),
		-1px 1px 10px rgba(255,255,255,0.3),
    1px -1px 10px rgba(255,255,255,0.3),
		-1px -1px 10px rgba(255,255,255,0.3);
	line-height: 1.6;
}

/* SP ----------------------------------------*/
@media screen and (max-width: 768px) {
	#contents {
		background: none;
		background-attachment: inherit;
		width: 100%;
		min-height: 100%;
		min-width: 100%;
		padding: 20px 15px 60px;
	}
	#contents::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		background: url("../img/sp/bg.jpg") center 0 no-repeat;
		background-size: cover;
		width: 100%;
		height: 100vh;
		z-index: -1;
	}


	.contents_inner {
		max-width: 100%;
	}
	.contents_inner:after {
		display: none;
	}


	.contents_block_inner {
		padding: 20px 15px 40px;
		box-shadow:
			0 0 4px #ff43fe,
			0 0 4px #ff43fe inset,
			0 0 8px #ff43fe,
			0 0 8px #ff43fe inset;
	}


	.main_txt {
		margin: 10px 0 0;
		font-size: 3.2vw;
		text-shadow: 
			1px 1px 5px rgba(255,255,255,0.3),
			-1px 1px 5px rgba(255,255,255,0.3),
			1px -1px 5px rgba(255,255,255,0.3),
			-1px -1px 5px rgba(255,255,255,0.3);
		line-height: 1.8;
	}
}





/*--------------------------------------------------
  logo_area
--------------------------------------------------*/
/* SP ----------------------------------------*/
@media screen and (max-width: 768px) {
	.logo_area {
		display: flex;
		justify-content: space-between;
	}
	
	.logo_area h1 {
		width: 55%;
		box-sizing: border-box;
	}
	
	.logo_area .sp_chara {
		width: 45%;
		box-sizing: border-box;
	}
}
	




/*--------------------------------------------------
  tab_area
--------------------------------------------------*/
.tab_area {
	width: 920px;
	margin: 50px 0 0;
	position: relative;
	z-index: 1;
}

.tab_area ul {
	display: flex;
	justify-content: space-between;
}

.tab_area li {
	background: #000;
	width: 230px;
	padding: 25px 0;
	box-sizing: border-box;
	color: #fff;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	border: 2px solid #fff;
	border-right: none;
	box-shadow:
		0 0 5px #ff43fe,
		0 0 5px #ff43fe inset,
		0 0 15px #ff43fe,
		0 0 15px #ff43fe inset;
	position: relative;
	cursor: pointer;
	background-size: 200% auto;
	transition: 0.5s;
}
.tab_area li:last-child {
	border-right: 2px solid #fff;
}
.tab_area li:hover {
	background-image: linear-gradient(to right, #ff43fe 0%, #8c23c4 51%, #43bfff 100%);
  background-position: right center;
}

.tab_area li.select {
	background-image: linear-gradient(to right, #ff43fe 0%, #8c23c4 51%, #8c23c4 100%);
}
.tab_area li.select:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 14px solid #ec3ef5;
  z-index: 2;
}
.tab_area li.select:after {
  content: "";
  position: absolute;
  bottom: -29px;
  left: 50%;
  margin-left: -12px;
  border: 12px solid transparent;
  border-top: 16px solid #fff;
  z-index: 1;
}
.tab_area li.select:hover {
	background-position: inherit;
}

.disnon {
  display: none;
}

/* SP ----------------------------------------*/
@media screen and (max-width: 768px) {
	.tab_area {
		width: 100%;
		margin: 0 0 0;
	}

	.tab_area li {
		width: 25%;
		padding: 20px 0;
		font-size: 3vw;
		box-shadow:
			0 0 4px #ff43fe,
			0 0 4px #ff43fe inset,
			0 0 8px #ff43fe,
			0 0 8px #ff43fe inset;
	}

	.tab_area li.select:before {
		bottom: -20px;
		margin-left: -8px;
		border: 8px solid transparent;
		border-top: 12px solid #ec3ef5;
	}
	.tab_area li.select:after {
		bottom: -25px;
		margin-left: -10px;
		border: 10px solid transparent;
		border-top: 14px solid #fff;
	}
}





/*--------------------------------------------------
  movie_area
--------------------------------------------------*/
.movie_area {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 80px 0 0;
}

.movie_area .left {
	width: 520px;
	box-sizing: border-box;
}

.movie_area .video_box {
	width: 100%;
	height: 0;
	padding-top: calc(100%*920/520);
	position: relative;
}

.movie_area .video_box video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	z-index: 0;
	box-sizing: border-box;
	border: 3px solid #fff;
	box-shadow:
		0 0 5px #3beeff,
		0 0 5px #3beeff inset,
		0 0 10px #3beeff,
		0 0 10px #3beeff inset,
		0 0 20px #3beeff,
		0 0 20px #3beeff inset;
}

.movie_area .right {
	width: 515px;
	box-sizing: border-box;
}

.movie_area .txt_box {
	background: url("../img/balloon.png") 0 0 no-repeat;
	background-size: 515px auto;
	width: 100%;
	height: 400px;
	position: relative;
}

.movie_area .txt_box_inner {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	padding: 0 35px;
	box-sizing: border-box;
}

.movie_area .cc {
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	line-height: 1.3;
}

.movie_area .txt {
	margin: 20px 0 0;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.3;
}

.movie_area .chara {
	margin: -80px auto 0;
}

.movie_area .note {
	font-size: 18px;
	line-height: 1.6;
}

/* SP ----------------------------------------*/
@media screen and (max-width: 768px) {
	.movie_area {
		display: block;
		margin: 40px 0 0;
	}

	.movie_area .left {
		width: 100%;
	}

	.movie_area .video_box video {
		border: 1px solid #fff;
		box-shadow:
				0 0 5px #3beeff,
				0 0 5px #3beeff inset,
				0 0 10px #3beeff,
				0 0 10px #3beeff inset;
	}
	
	.movie_area .right {
		width: 100%;
	}

	.movie_area .txt_box {
		background: url("../img/sp/balloon.png") 0 0 no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		margin: 20px 0 0;
		padding-top: calc(100%*344/498);
	}

	.movie_area .txt_box_inner {
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%,-50%);
		padding: 0 30px;
	}

	.movie_area .cc {
		font-size: 4.5vw;
	}

	.movie_area .txt {
		margin: 10px 0 0;
		font-size: 3vw;
		line-height: 1.6;
	}

	.movie_area .chara {
		width: 60%;
		margin: -50px auto 0;
	}

	.movie_area .note {
		font-size: 2.4vw;
	}
}





/*--------------------------------------------------
  intro_area
--------------------------------------------------*/
.intro_area {
	margin: 80px 0 0;
}

.intro_area .intro_ttl {
	font-size: 44px;
	font-weight: bold;
	text-align: center;
	text-shadow: 
    1px 1px 10px rgba(265,67,254,0.3),
		-1px 1px 10px rgba(265,67,254,0.3),
    1px -1px 10px rgba(265,67,254,0.3),
		-1px -1px 10px rgba(265,67,254,0.3);
	line-height: 1.3;
}

.intro_area .txt {
	margin: 40px 0 0;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	text-shadow: 
    1px 1px 10px rgba(265,67,254,0.3),
		-1px 1px 10px rgba(265,67,254,0.3),
    1px -1px 10px rgba(265,67,254,0.3),
		-1px -1px 10px rgba(265,67,254,0.3);
	line-height: 1.6;
}

/* SP ----------------------------------------*/
@media screen and (max-width: 768px) {
	.intro_area {
		margin: 40px 0 0;
	}

	.intro_area .intro_ttl {
		font-size: 4.5vw;
		text-shadow: 
			1px 1px 5px rgba(265,67,254,0.3),
			-1px 1px 5px rgba(265,67,254,0.3),
			1px -1px 5px rgba(265,67,254,0.3),
			-1px -1px 5px rgba(265,67,254,0.3);
	}

	.intro_area .txt {
		margin: 20px 0 0;
		font-size: 3vw;
		text-shadow: 
			1px 1px 5px rgba(265,67,254,0.3),
			-1px 1px 5px rgba(265,67,254,0.3),
			1px -1px 5px rgba(265,67,254,0.3),
			-1px -1px 5px rgba(265,67,254,0.3);
	}
}





/*--------------------------------------------------
  dl_area
--------------------------------------------------*/
.dl_area {
	margin: 80px 0 0;
}


.dl_area .ttl_wrap {
	background: url("../img/ttl_dl_01.png") center center repeat-y;
	background-size: 1097px auto;
	padding: 25px 25px;
	box-sizing: border-box;
	text-align: center;
	position: relative;
}
.dl_area .ttl_wrap:before,
.dl_area .ttl_wrap:after {
	content: "";
	position: absolute;
	left: 0;
	background: url("../img/ttl_dl_02.png") center top no-repeat;
	background-size: 100% auto;
	width: 1097px;
	height: 14px;
	z-index: 1;
}
.dl_area .ttl_wrap:before {
	top: -5px;
}
.dl_area .ttl_wrap:after {
	bottom: -5px;
}

.dl_area .ttl_wrap .dl_ttl01 {
	font-size: 44px;
	font-weight: bold;
	text-shadow: 
    1px 1px 10px rgba(265,67,254,0.3),
		-1px 1px 10px rgba(265,67,254,0.3),
    1px -1px 10px rgba(265,67,254,0.3),
		-1px -1px 10px rgba(265,67,254,0.3);
	line-height: 1.3;
}

.dl_area .period {
	margin: 25px 0 0;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	line-height: 1.6;
}


.dl_block {
	margin: 80px 0 0;
}

.dl_block .dl_box {
	padding: 60px 0 40px;
	position: relative;
}
.dl_block .dl_box:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: url("../img/separate.png") center bottom no-repeat;
	background-size: 100% auto;
	width: 100%;
	height: 14px;
	margin: auto;
}
.dl_block .dl_box:first-child {
	padding: 0 0 40px;
}
.dl_block .dl_box:last-child:after {
	display: none;
}

.dl_block .dl_box_inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dl_block .img_box {
	width: 216px;
	box-sizing: border-box;
	border: 3px solid #fff;
	box-shadow:
		0 0 5px #3beeff,
		0 0 5px #3beeff inset,
		0 0 10px #3beeff,
		0 0 10px #3beeff inset,
		0 0 20px #3beeff,
		0 0 20px #3beeff inset;
}

.dl_block .txt_box {
	width: 820px;
	box-sizing: border-box;
	text-align: center;
}

.dl_block .dl_ttl02 {
	display: inline-block;
	padding: 0 30px;
	font-size: 48px;
	font-weight: bold;
	line-height: 1.3;
	text-shadow: 
    1px 1px 10px rgba(255,255,255,0.3),
		-1px 1px 10px rgba(255,255,255,0.3),
    1px -1px 10px rgba(255,255,255,0.3),
		-1px -1px 10px rgba(255,255,255,0.3);
	position: relative;
	
}
.dl_block .dl_ttl02:before,
.dl_block .dl_ttl02:after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translate(0,-50%);
	width: 12px;
	height: 70px;
}
.dl_block .dl_ttl02:before {
	left: 0;
	background: url("../img/ttl_corner_l.png") left center no-repeat;
	background-size: 100% auto;
}
.dl_block .dl_ttl02:after {
	right: 0;
	background: url("../img/ttl_corner_r.png") left center no-repeat;
	background-size: 100% auto;
}

.dl_block .dl_btn_box {
	margin: 50px 0 0;
}

.dl_block .dl_btn_box_inner {
	display: flex;
	justify-content: center;
}

.dl_block .dl_btn {
	display: table;
	width: 300px;
	margin-right: 20px;
	box-sizing: border-box;
}
.dl_block .dl_btn:last-child {
	margin-right: 0;
}

.cl03 .dl_btn {
	width: 246px;
}

.dl_block .dl_btn a {
	display: table-cell;
	vertical-align: middle;
	background-image: linear-gradient(to right, #ff43fe 0%, #8c23c4 51%, #8c23c4 100%);
	background-size: 200% auto;
	box-sizing: border-box;
	height: 80px;
	padding: 0 20px;
	color: #fff;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
	border-radius: 100px;
	transition: 0.5s;
}
.dl_block .dl_btn a:hover {
	background-image: linear-gradient(to right, #ff43fe 0%, #8c23c4 51%, #43bfff 100%);
  background-position: right center;
}

.dl_block .dl_btn .spn01 {
	display: block;
	font-size: 20px;
	font-weight: bold;
}
.dl_block .dl_btn .spn02 {
	font-size: 16px;
	font-weight: bold;
}

.dl_block .txt {
	margin: 40px 0 0;
  font-size: 30px;
	font-weight: bold;
	line-height: 1.3;
}

.dl_block .note {
	margin: 20px 0 0;
  font-size: 22px;
	font-weight: bold;
	line-height: 1.5;
}


.dl_area .fb_note {
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	line-height: 1.6;
}
.dl_area .fb_note span {
	color: #ff43fe;
	font-weight: bold;
}

.dl_area .fb_note a {
	text-decoration: underline;
}
.dl_area .fb_note a:hover {
	text-decoration: none;
}

/* SP ----------------------------------------*/
@media screen and (max-width: 768px) {
	.dl_area {
		margin: 40px 0 0;
	}

	
	.dl_area .ttl_wrap {
		background: url("../img/ttl_dl_01.png") center center repeat-y;
		background-size: 100% auto;
		padding: 15px 15px;
	}
	.dl_area .ttl_wrap:before,
	.dl_area .ttl_wrap:after {
		background: url("../img/ttl_dl_02.png") center top no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		padding-top: calc(100%*14/1097);
	}
	.dl_area .ttl_wrap:before {
		top: -2px;
	}
	.dl_area .ttl_wrap:after {
		bottom: -2px;
	}

	.dl_area .ttl_wrap .dl_ttl01 {
		font-size: 4.8vw;
		text-shadow: 
			1px 1px 5px rgba(265,67,254,0.3),
			-1px 1px 5px rgba(265,67,254,0.3),
			1px -1px 5px rgba(265,67,254,0.3),
			-1px -1px 5px rgba(265,67,254,0.3);
	}

	.dl_area .period {
		margin: 15px 0 0;
		font-size: 3.2vw;
	}


	.dl_block {
		margin: 40px 0 0;
	}

	.dl_block .dl_box {
		padding: 40px 0 20px;
	}
	.dl_block .dl_box:after {
		background: url("../img/separate.png") center bottom no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		padding-top: calc(100%*14/1097);
	}
	.dl_block .dl_box:first-child {
		padding: 0 0 20px;
	}

	.dl_block .img_box {
		width: 40%;
		border: 1px solid #fff;
		box-shadow:
			0 0 5px #3beeff,
			0 0 5px #3beeff inset,
			0 0 10px #3beeff,
			0 0 10px #3beeff inset;
	}

	.dl_block .txt_box {
		width: calc(60% - 20px);
	}

	.dl_block .dl_ttl02 {
		padding: 0 15px;
		font-size: 5vw;
		text-shadow: 
			1px 1px 5px rgba(255,255,255,0.3),
			-1px 1px 5px rgba(255,255,255,0.3),
			1px -1px 5px rgba(255,255,255,0.3),
			-1px -1px 5px rgba(255,255,255,0.3);
	}
	.dl_block .dl_ttl02:before,
	.dl_block .dl_ttl02:after {
		content: "";
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		width: 12px;
		height: 70px;
	}
	.dl_block .dl_ttl02:before {
		left: 0;
		background: url("../img/ttl_corner_l.png") left center no-repeat;
		background-size: 100% auto;
	}
	.dl_block .dl_ttl02:after {
		right: 0;
		background: url("../img/ttl_corner_r.png") left center no-repeat;
		background-size: 100% auto;
	}

	.dl_block .dl_btn_box {
		margin: 25px 0 0;
	}

	.dl_block .dl_btn_box_inner {
		display: block;
	}

	.dl_block .dl_btn {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}
	.dl_block .dl_btn:last-child {
		margin-bottom: 0;
	}
	
	.cl03 .dl_btn {
		width: 100%;
	}

	.dl_block .dl_btn a {
		height: 60px;
		padding: 0 20px;
		font-size: 4.2vw;
		line-height: 1.2;
	}
	
	.dl_block .dl_btn .spn01 {
		width: 100%;
		font-size: 2.6vw;
	}
	.dl_block .dl_btn .spn02 {
		font-size: 2vw;
	}
	
	.dl_block .txt {
		margin: 25px 0 0;
		font-size: 3vw;
		line-height: 1.6;
	}

	.dl_block .note {
		margin: 10px 0 0;
		font-size: 2vw;
		line-height: 1.6;
	}


	.dl_area .fb_note {
		font-size: 2vw;
		line-height: 1.8;
	}
}





/*--------------------------------------------------
  pre_area
--------------------------------------------------*/
.pre_area {
	max-width: 960px;
	margin: 160px auto 0;
	padding: 80px 80px;
	box-sizing: border-box;
	border: 1px solid #fff;
}

.pre_area .pre_ttl {
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	line-height: 1.6;
}

.pre_area .pre_list {
	margin: 40px 0 0;
}

.pre_area .pre_list li {
	font-size: 18px;
	line-height: 1.6;
	text-indent: -1.2em;
	padding-left: 1.2em;
}
.pre_area .pre_list li + li {
	margin: 40px 0 0;
}

/* SP ----------------------------------------*/
@media screen and (max-width: 768px) {
	.pre_area {
		max-width: 100%;
		margin: 50px auto 0;
		padding: 20px 15px;
	}

	.pre_area .pre_ttl {
		font-size: 4vw;
	}

	.pre_area .pre_list {
		margin: 20px 0 0;
	}

	.pre_area .pre_list li {
		font-size: 14px;
	}
	.pre_area .pre_list li + li {
		margin: 20px 0 0;
	}
}





/*--------------------------------------------------
  official_btn
--------------------------------------------------*/
.official_btn {
	margin: 160px auto 0;
}

#en .official_btn {
	width: 400px;
}
#en .official_btn a {
	background: url("../img/btn_official_en_off.png") no-repeat;
	background-size: 100% auto;
	width: 400px;
	height: 90px;
	text-indent: -9999px;
}
#en .official_btn a:hover {
	background: url("../img/btn_official_en_on.png") no-repeat;
	background-size: 100% auto;
}

#fr .official_btn {
	width: 400px;
}
#fr .official_btn a {
	background: url("../img/btn_official_fr_off.png") no-repeat;
	background-size: 100% auto;
	width: 400px;
	height: 90px;
	text-indent: -9999px;
}
#fr .official_btn a:hover {
	background: url("../img/btn_official_fr_on.png") no-repeat;
	background-size: 100% auto;
}

#cn .official_btn {
	width: 400px;
}
#cn .official_btn a {
	background: url("../img/btn_official_cn_off.png") no-repeat;
	background-size: 100% auto;
	width: 400px;
	height: 90px;
	text-indent: -9999px;
}
#cn .official_btn a:hover {
	background: url("../img/btn_official_cn_on.png") no-repeat;
	background-size: 100% auto;
}

#kr .official_btn {
	width: 400px;
}
#kr .official_btn a {
	background: url("../img/btn_official_kr_off.png") no-repeat;
	background-size: 100% auto;
	width: 400px;
	height: 90px;
	text-indent: -9999px;
}
#kr .official_btn a:hover {
	background: url("../img/btn_official_kr_on.png") no-repeat;
	background-size: 100% auto;
}

/* SP ----------------------------------------*/
@media screen and (max-width: 768px) {
	.official_btn {
		margin: 40px auto 0;
	}

	#en .official_btn {
		width: 100%;
	}
	#en .official_btn a {
		background: url("../img/sp/btn_official_en_off.png") no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		padding-top: calc(100%*90/480);
	}
	#en .official_btn a:hover {
		background: url("../img/sp/btn_official_en_on.png") no-repeat;
		background-size: 100% auto;
	}

	#fr .official_btn {
		width: 100%;
	}
	#fr .official_btn a {
		background: url("../img/sp/btn_official_fr_off.png") no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		padding-top: calc(100%*90/480);
	}
	#fr .official_btn a:hover {
		background: url("../img/sp/btn_official_fr_on.png") no-repeat;
		background-size: 100% auto;
	}

	#cn .official_btn {
		width: 100%;
	}
	#cn .official_btn a {
		background: url("../img/sp/btn_official_cn_off.png") no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		padding-top: calc(100%*90/480);
	}
	#cn .official_btn a:hover {
		background: url("../img/sp/btn_official_cn_on.png") no-repeat;
		background-size: 100% auto;
	}

	#kr .official_btn {
		width: 100%;
	}
	#kr .official_btn a {
		background: url("../img/sp/btn_official_kr_off.png") no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		padding-top: calc(100%*90/480);
	}
	#kr .official_btn a:hover {
		background: url("../img/sp/btn_official_kr_on.png") no-repeat;
		background-size: 100% auto;
	}	
}





/*--------------------------------------------------
  sns_btn_box
--------------------------------------------------*/
.sns_btn_box {
	display: flex;
	justify-content: center;
	margin: 80px 0 0;
}

.sns_btn_box .fb {
	width: 300px;
	margin-right: 20px;
}

.sns_btn_box .fb a {
	background: url("../img/btn_fb_off.png") 0 0 no-repeat;
	background-size: 100% auto;
	width: 300px;
	height: 80px;
	text-indent: -9999px;
}
.sns_btn_box .fb a:hover {
	background: url("../img/btn_fb_on.png") 0 0 no-repeat;
	background-size: 100% auto;
}


.sns_btn_box .tw {
	width: 300px;
}

.sns_btn_box .tw a {
	background: url("../img/btn_tw_off.png") 0 0 no-repeat;
	background-size: 100% auto;
	width: 300px;
	height: 80px;
	text-indent: -9999px;
}
.sns_btn_box .tw a:hover {
	background: url("../img/btn_tw_on.png") 0 0 no-repeat;
	background-size: 100% auto;
}


.sns_btn_box .nv {
	width: 300px;
}

.sns_btn_box .nv a {
	background: url("../img/btn_naver_off.png") 0 0 no-repeat;
	background-size: 100% auto;
	width: 300px;
	height: 80px;
	text-indent: -9999px;
}
.sns_btn_box .nv a:hover {
	background: url("../img/btn_naver_on.png") 0 0 no-repeat;
	background-size: 100% auto;
}

/* SP ----------------------------------------*/
@media screen and (max-width: 768px) {
	.sns_btn_box {
		display: block;
		margin: 20px 0 0;
	}

	.sns_btn_box .fb {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}

	.sns_btn_box .fb a {
		background: url("../img/sp/btn_fb_off.png") 0 0 no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		padding-top: calc(100%*90/480);
	}
	.sns_btn_box .fb a:hover {
		background: url("../img/sp/btn_fb_on.png") 0 0 no-repeat;
		background-size: 100% auto;
	}
	
	
	.sns_btn_box .tw {
		width: 100%;
	}

	.sns_btn_box .tw a {
		background: url("../img/sp/btn_tw_off.png") 0 0 no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		padding-top: calc(100%*90/480);
	}
	.sns_btn_box .tw a:hover {
		background: url("../img/sp/btn_tw_on.png") 0 0 no-repeat;
		background-size: 100% auto;
	}
	.sns_btn_box .nv {
		width: 100%;
	}

	
	.sns_btn_box .nv a {
		background: url("../img/sp/btn_naver_off.png") 0 0 no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		padding-top: calc(100%*90/480);
	}
	.sns_btn_box .nv a:hover {
		background: url("../img/sp/btn_naver_on.png") 0 0 no-repeat;
		background-size: 100% auto;
	}
}





/*--------------------------------------------------
  page_top
--------------------------------------------------*/
.page_top {
	margin: 50px auto 0;
}

#en .page_top {
	width: 400px;
}
#en .page_top a {
	background: url("../img/pagetop_en_off.png") center 0 no-repeat;
	background-size: 100% auto;
	width: 400px;
	height: 153px;
	text-indent: -9999px;
}
#en .page_top a:hover {
	background: url("../img/pagetop_en_on.png") center 0 no-repeat;
	background-size: 100% auto;
}

#fr .page_top {
	width: 520px;
}
#fr .page_top a {
	background: url("../img/pagetop_fr_off.png") center 0 no-repeat;
	background-size: 100% auto;
	width: 520px;
	height: 153px;
	text-indent: -9999px;
}
#fr .page_top a:hover {
	background: url("../img/pagetop_fr_on.png") center 0 no-repeat;
	background-size: 100% auto;
}

#cn .page_top {
	width: 340px;
}
#cn .page_top a {
	background: url("../img/pagetop_cn_off.png") center 0 no-repeat;
	background-size: 100% auto;
	width: 340px;
	height: 153px;
	text-indent: -9999px;
}
#cn .page_top a:hover {
	background: url("../img/pagetop_cn_on.png") center 0 no-repeat;
	background-size: 100% auto;
}

#kr .page_top {
	width: 480px;
}
#kr .page_top a {
	background: url("../img/pagetop_kr_off.png") center 0 no-repeat;
	background-size: 100% auto;
	width: 480px;
	height: 153px;
	text-indent: -9999px;
}
#kr .page_top a:hover {
	background: url("../img/pagetop_kr_on.png") center 0 no-repeat;
	background-size: 100% auto;
}

/* SP ----------------------------------------*/
@media screen and (max-width: 768px) {
	.page_top {
		margin: 30px auto 0;
	}

	#en .page_top {
		width: 90%;
	}
	#en .page_top a {
		background: url("../img/sp/pagetop_en_off.png") center 0 no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		padding-top: calc(100%*153/460);
	}
	#en .page_top a:hover {
		background: url("../img/sp/pagetop_en_on.png") center 0 no-repeat;
		background-size: 100% auto;
	}

	#fr .page_top {
		width: 90%;
	}
	#fr .page_top a {
		background: url("../img/sp/pagetop_fr_off.png") center 0 no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		padding-top: calc(100%*122/480);
	}
	#fr .page_top a:hover {
		background: url("../img/sp/pagetop_fr_on.png") center 0 no-repeat;
		background-size: 100% auto;
	}

	#cn .page_top {
		width: 90%;
	}
	#cn .page_top a {
		background: url("../img/sp/pagetop_cn_off.png") center 0 no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		padding-top: calc(100%*153/420);
	}
	#cn .page_top a:hover {
		background: url("../img/sp/pagetop_cn_on.png") center 0 no-repeat;
		background-size: 100% auto;
	}

	#kr .page_top {
		width: 90%;
	}
	#kr .page_top a {
		background: url("../img/sp/pagetop_kr_off.png") center 0 no-repeat;
		background-size: 100% auto;
		width: 100%;
		height: 0;
		padding-top: calc(100%*153/480);
	}
	#kr .page_top a:hover {
		background: url("../img/sp/pagetop_kr_on.png") center 0 no-repeat;
		background-size: 100% auto;
	}
}