@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :  style.css
 style info :  ラグナロクオンライン：LPスタイル
=================================================================== */

/*============================
	global
============================*/
.dance01{
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;
	font-weight: bold;
	font-size: 1.6rem;
	line-height: 1.8;
}
.dance01 img{
	width: 100%;
	backface-visibility: hidden;
}
.inner{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}
.sp_only{
	display: block;
}
.pc_only{
	display: none;
}
.glid{
	flex: none;
}
.grid.is-mobile{
	display:-webkit-flex;
	display:-moz-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.grid.is-justify{
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
@media screen and (min-width: 768px) {
	.sp_only{
		display: none;
	}
	.pc_only{
		display: block;
	}
	.grid{
		display:-webkit-flex;
		display:-moz-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
}

/*============================
	header
============================*/
header{
	padding: 20px 0;
}
header img{
	width: 100%;
}
header .inner,
header .logoBox,
header .snsBox{
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
header .logoBox{
	width: 67.6%;
}
header .logoBox h1{
	width: 13%;
}
header .logoBox .ragnarokLogo{
	width: 80%;
}
header .snsBox{
	width: 30%;
}
header .snsBox li{
	width: calc((100% / 3) - 5%);
}
@media screen and (min-width: 768px) {
	header{
		padding: 10px 0;
	}
	header .logoBox{
		 width: 38.5%;
	}
	header .snsBox{
		width: 13.4%;
	}
}
/*============================
	fv
============================*/
.fv{
	background: url("../images/fv_bg01.png"),url("../images/fv_bg02.png"),#3259d7;
	background-repeat: repeat-x, repeat-x;
	background-position: top, bottom;
}
.fv .inner{
	width: 100%;
	padding-top: 2%;
}
.fv .movBox{
	width: 100%;
}
.fv img{
	width: 100%;
}
.fv h2{
	width: 94.3%;
	margin: 0 auto;
}
.fv .slider{
	width: 73.9%;
	margin: 0 auto 1.9%;
	border: solid 2px #FFF;
	padding: 4px;
	box-sizing: border-box;

}
.thumbnail-list{
	width: 83.5%;
	margin: 0 auto;
}
.thumbnail-list .slick-track {
	transform:unset!important;
}
.slick-lightbox .slick-prev,
.slick-lightbox .slick-next{
	top: 38%;
}

@media screen and (min-width: 768px) {
	.fv{
		background: url("../images/fv_bg03-pc.png"),url("../images/fv_bg01.png"),url("../images/fv_bg02.png"),#3259d7;
		background-repeat: no-repeat,repeat-x,repeat-x;
		background-position: top center,top,bottom;
		background-size: contain,auto,auto;
	}
	.fv .inner{
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 1% 0;
	}
	.fv h2{
		width: 62.4%;
		margin: 0;
	}
	.fv .movBox{
		width: 31.68%;
		box-sizing: border-box;
		margin-left: 2%;
	}
	.fv .slider{
		width: 100%;
		margin: 0;
	}
	.thumbnail-list{
		display: none;
	}
	.slick-lightbox .slick-prev,
	.slick-lightbox .slick-next{
		top: 45%;
	}
}
/*============================
	youtube
============================*/
/*
.l-movie {
  width: 100%;
  margin: 0 auto;
  position: relative;
  line-height: 0;
  text-align: center;
}
.l-movie .list {
  width: 73.9%;
  display: inline-block;
}
.l-movie .list__item {
  position: relative;
}
.l-movie .list__item:nth-of-type(2n) {
  margin-right: 0;
}
.l-movie .list__item:last-of-type {
  margin-right: 0;
}
.l-movie .list__item {
  width: 100%;
  margin-bottom: 0;
  margin-right: 0;
}
.l-movie .list__ytwrap {
  position: relative;
  width: 100%;
  padding-bottom: 177.77%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.l-movie .list__yt {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.thumb-item{
	border: solid 2px #FFF;
	padding: 4px;
	box-sizing: border-box;
	margin-bottom: 1.9%;
}
.thumb-item-nav{
	width: 83.5%;
	margin: 0 auto;
}
.thumb-item-nav .slick-track {
	transform:unset!important;
}
@media screen and (max-width: 750px) {
	.l-movie .list__yt {
		opacity: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
.l-movie .list__thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.l-movie .list__thumb > img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 750px) {
  .l-movie .list__mask {
    width: 100%;
    height: 70%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
  }
}
@media screen and (min-width: 768px) {
	.l-movie .list {
	  width: 100%;
	}
	.thumb-item{
		margin-bottom: 0;
	}
	.thumb-item-nav{
		display: none;
	}
}
*/

/*============================
	info
============================*/
.info{
	background: url("../images/info_bg01-sp.png");
	background-repeat: no-repeat;
	background-size: 110%;
	background-position: top 54% left -80%;
	padding-top: 1.69%;
}
.info .inner{
	width: 100%;
}
.info h3{
	width: 92.9%;
	margin: 0 auto 1%;
}
.info .mainTxt{
	width: 90%;
	margin: 0 auto 3.6%;
}
.info .popup{
	width: 90%;
	margin: 0 auto 4.9%;
}
.info .infoWrap{
	width: 90%;
	margin: 0 auto;
}
.info .infoWrap .catch{
	font-size: 1.75em;
    line-height: 1.4;
	margin-bottom: 4%;
}
.info .box01{
	margin-bottom: 6.7%;
}
.info .box01 .txt{
	margin-bottom: 7%;
}
.info .snsLinks h4{
	margin-bottom: .8rem;
}
.info .snsLinks li{
	width: 16%;
}
.info .box01 .snsLinks:nth-of-type(1){
	margin-bottom: 7%;
}
.info .snsLinks.grid .col{
	width: 50%;
}
.info .snsLinks.grid .col li{
	width: 32%;
	margin-right: 13.5%;
}
.info .infoWrap .box02 h4{
	background: #0048d2;
	color: #FFF;
	padding-left: 3%;
	margin-bottom: 4%;
}
.info .infoWrap .box02 .txt{
	margin-bottom: 6.7%;
}
.info .box02 .snsLinks li{
	margin-right: 6.7%;
}

@media screen and (min-width: 768px) {
	.info{
		background: url("../images/info_bg01-pc.jpg") no-repeat top center;
		background-size: 1330px;
		padding-top: 1.3%;
	}
	.info h3{
		width: 76.9%;
		margin: 0 auto 3%;
	}
	.info .mainTxt{
		width: 100%;
		font-size: 1.375em;
		text-align: center;
		margin-bottom: 3.4%;
	}
	.info .popup{
		max-width: 412px;
		margin-bottom: 2.4%;
	}
	.info .infoWrap .box01{
		width: 49.8%;
	}
	.info .infoWrap .catch{
		font-size: 1.25em;
		margin-bottom: 2%;
	}
	.info .box01{
		margin-bottom: 0;
	}
	.info .box01 .txt{
		margin-bottom: 2%;
	}
	.info .snsLinks li{
		width: 14.74%;
	}
	.info .box01 .snsLinks:nth-of-type(1){
		margin-bottom: 4%;
	}
	.info .snsLinks.grid .col li{
		width: 29.5%;
		margin-right: 10.8%;
	}
	.info .infoWrap .box02{
		width: 46%;
		background: #eaeaea;
		padding-bottom: 2%;
	}
	.info .infoWrap .box02 h4{
		font-size: 1.25em;
		margin-bottom: 0;
	}
	.info .infoWrap .box02 .txt{
		padding: 7% 5% 0;
		margin-bottom: 12.7%;
	}
	.info .infoWrap .box02 .snsLinks{
		width: 85%;
		margin: 0 auto;
	}
	.info .infoWrap .box02 .snsLinks ul{
		margin-right: -6.7%;
	}
	.info .infoWrap .box02 .snsLinks li{
		width: 17.6%;
	}
}
/*============================
	movie
============================*/
.movie{
	background: url("../images/mov_bg-sp.jpg") no-repeat bottom center;
	background-size: 100%;
	padding-top: 10%;
	padding-bottom: 4%;
}
.movie p{
	width: 92.7%;
	margin: 0 auto 6%;
}
.movie .btn{
	width: 98%;
	display: block;
	margin: 0 auto;
}
@media screen and (min-width: 768px) {
	.movie{
		background: url("../images/mov_bg-pc.jpg") no-repeat bottom center;
		background-size: 1330px;
		padding-top: 4.5%;
		padding-bottom: 3%;
	}
	.movie p{
		width: 69.8%;
		margin: 0 auto 4%;
	}
	.movie .btn{
		width: 52.6%;
	}
}

/*============================
	about
============================*/
.about{
	background: url("../images/about_bg.jpg") repeat-x;
	background-size: 7%;
	padding-top: 4%;
}
.about .inner{
	width: 100%;
	max-width: 1100px;
}
.about h3{
	width: 90%;
	margin: 0 auto 13.8%;
}
@media screen and (min-width: 768px) {
	.about{
		padding-top: 1.8%;
		background-size: 3.4%;
	}
	.about h3{
		width: 69.99%;
		margin-bottom: 7.6%;
	}
}
/*============================
	step
============================*/
.step{
	background: #0048d2;
}
.step img{
	display: block;
}
.step .inner{
	width: 100%;
	max-width: 1100px;
}
.step h3{
	line-height: 0;
}
.step .rel{
	position: relative;
}
.step .btn{
	width: 47%;
	position: absolute;
	transition: .3s;
}
.step .btn:hover{
	opacity: .8;
}
.step .step01 .btn{
	bottom: 40%;
	left: 5%;
}
.step .step03 .btn{
	bottom: 23%;
	left: 5%;
}
@media screen and (min-width: 768px) {
	.step .btn{
		width: 35.3%;
		position: absolute;
	}
	.step .step01 .btn{
		bottom: 35.6%;
		left: 15.1%;
	}
	.step .step03 .btn{
		bottom: 23.5%;
		left: 15.1%;
	}
}
/*============================
	trial
============================*/
.trial{
	padding-top: 2%;
}
.trial .inner{
	width: 100%;
}
.trial h3{
	width: 93.4%;
	margin: 0 auto;
}
@media screen and (min-width: 768px) {
	.trial h3{
		width: 77.6%;
		margin: 0 auto 2.5%;
	}
	.trial .img{
		display: block;
		width: 45%;
		position: absolute;
		top: -5.2%;
		left: 50%;
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
		transform: translate(-50%, 0%);
	}
	.trial .rel{
		position: relative;
	}
}

/*============================
	footer
============================*/
footer{
	padding: 2.4% 0;
}
footer .txt{
	text-align: center;
	font-weight: normal;
	margin-bottom: 2%;
}
footer .snsBox{
	width: 51.6%;
	margin: 0 auto 4%;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
footer .snsBox li{
	width: calc((100% / 3) - 5%);
}
footer .logo{
	width: 13.2%;
	margin: 0 auto 2%;
}
footer small{
	display: block;
	font-weight: normal;
	text-align: center;
}
@media screen and (min-width: 768px) {
	footer .snsBox{
		width: 23.5%;
		margin: 0 auto 2%;
	}
	footer .logo{
		width: 7%;
	}
}




/* @media screen and (max-width: 750px) { */
@media screen and (max-width: 767px) {
	.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-iframe-wrap:before {
		content: '';
		display: block;
		padding-top: 178.03%;
	}
	.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-iframe-wrap .slick-lightbox-slick-iframe {
		width: 305px !important;
		height: 543px !important;
		max-width: 100%;
	}
	.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-iframe-wrap .slick-lightbox-slick-iframe {
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	}
}