@charset "utf-8";
/* CSS Document */


@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/NS-400.woff2") format("woff2"), url("../fonts/NS-400.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/NS-500.woff2") format("woff2"), url("../fonts/NS-500.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/NS-700.woff2") format("woff2"), url("../fonts/NS-700.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/os-regular.woff2") format("woff2"), url("../fonts/os-regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/os-medium.woff2") format("woff2"), url("../fonts/os-medium.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/os-bold.woff2") format("woff2"), url("../fonts/os-bold.woff") format("woff");
  font-display: swap;
}

/*--------------------------------------------------------------------------
   reset
---------------------------------------------------------------------------*/

* {
	box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,p,span,small,dl,dt,dd,ol,ul,li {
  margin: 0;
}
h1,h2,h3,h4,h5,h6 {
}
ul {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
img {
  vertical-align: top;
}
li {
  list-style-type: none;
  vertical-align: baseline;
}
input, button, textarea, select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.cf:after {
	content: "";
	display: block;
	clear: both;
}
/*--------------------------------------
　Base
---------------------------------------*/

::-moz-selection {
  background: #ee4d00;
  color: #fff
}
::-webkit-scrollbar {
  width: 6px;
  height: 8px
}
::-webkit-scrollbar-thumb {
  background-color: #191918
}
::-webkit-scrollbar-track-piece {
  background-color: #f2f2f2
}
html {
    /*font-size: 62.5%;*/
	font-size: .625vw;
}
body {
	color: #fff;
	font-family: "Noto Sans JP";
	font-size: min(1.6rem, 20px);
	font-weight: 400;
	line-height: 2.0em;
	position: relative;
	-webkit-text-size-adjust: none;
	margin: 8.4rem 0 0;
	background: url("../images/shared/bg_img.jpg") no-repeat fixed;
	background-size: cover;
}
body.lpcatsPage{
  background: none;
margin: 0
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}
img { 
  max-width: 100%; 
  height: auto;
}
a {
  color: #fff;
  text-decoration: underline;
	transition: all .4s;
}
a:hover {
	text-decoration: none;
	filter:alpha(opacity=65);
	-moz-opacity:0.65;
	opacity: 0.65;
}

.fl {
  float: left;
}
.fr {
  float: right;
}
.center {
	text-align: center;
}
.f110 {font-size: 110%;}
.f120 {font-size: 120%;}
.f130 {font-size: 130%;}
.f150 {font-size: 150%;}
.f200 {font-size: 200%;}
.f300 {font-size: 300%;}

.alignCenter {
	text-align: center;
}
.alignLeft {
	text-align: left;
}
.alignRight {
	text-align: right;
}

.sp {
	display: none;
}
.os {
	font-family: "Oswald";
}
.tate {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.inner {
	max-width: 1620px;
	width: 84.5%;
	margin: 0 auto;
	position: relative;
}


/*--------------------------------------
　Header
---------------------------------------*/
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 5;
	height: min(8.3rem,100px);
	background: #141414;
}
header .headInr {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	padding: 0 0 0 5rem;
}
header .logo {
	display: flex;
	align-items: center;
}
header .logo img {
	max-width: 11rem;
}
header .areaInner {
	display: flex;
}
header .gNav {
	display: flex;
	padding: 0 6rem 0 0;
}
header .gNav li {
	line-height: 1.6;
	margin: 0 4rem 0 0;
}
header .gNav li a {
	color: #fff;
	text-decoration: none;
	font-family: "Oswald";
	letter-spacing: 0.06em;
	position: relative;
}
header .gNav li a:hover {
	opacity: 1;
}
header .gNav li a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: left top;
}
header .gNav li a:hover::after {
    transform: scale(1, 1);
}


/*--------------------------------------
　Footer
---------------------------------------*/
.pageTopBar {
	background: #000;
	height: 8rem; 
	display: block;
	text-decoration: none;
}
.pageTopBar > div {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.pageTopBar > div span {
	text-decoration: none;
	font-family: "Oswald";
	font-size: min(2.66rem,32px);
	font-weight: 500;
	background: url("../images/shared/arr_pagetop_wh.png") no-repeat top center;
	background-size: 2rem auto;
	padding: 2rem 0 0;
	line-height: 1;
}
footer {
	background: #1A1A1A;
	position: relative;
	padding: 10rem 0 4rem;
}
footer .areaInner {
	max-width: 1620px;
    width: 84.5%;
    margin: 0 auto;
	position: relative;
}
footer .areaInner:before {
	content: "";
	background: url("../images/shared/logo_footer.png") no-repeat;
	background-size: 100%;
	width: 40rem;
	height: 40rem;
	position: absolute;
	top: 0;
	right: 0;
}
footer .colBox.upper {
	display: flex;
	align-items: center;
	margin: 0 0 10rem;
}
footer .enTit {
	font-size: min(4.16rem,50px);
	line-height: 1.5;
}
footer .sns {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0 3rem 0 6rem;
}
footer .sns li a {
	border: solid 1px #fff;
	border-radius: 50%;
	width: min(5rem,60px);
	height: min(5rem,60px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
    position: relative;
    transition: .3s;
}
footer .sns li a:hover {
	opacity: 1;
}
footer .sns li a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 100%;
    background-color: #fff;
    transition: .3s;
}
footer .sns li a:hover:before {
	width: 100%;
}
footer .sns li a:after {
	content: "";
	background-image: url("../images/shared/icon_insta.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2rem auto;
	width: 2rem;
	height: 2.5rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
footer .sns .insta a:after {
	background-image: url("../images/shared/icon_insta.png");
}
footer .sns .insta a:hover:after {
	background-image: url("../images/shared/icon_insta_on.png");
}
footer .sns .tiktok a:after {
	background-image: url("../images/shared/icon_tiktok.png");
}
footer .sns .tiktok a:hover:after {
	background-image: url("../images/shared/icon_tiktok_on.png");
}
footer .sns .x a:after {
	background-image: url("../images/shared/icon_x.png");
}
footer .sns .x a:hover:after {
	background-image: url("../images/shared/icon_x_on.png");
}
footer .colBox.btm {
	border-bottom: solid 1px #fff;
	padding: 0 0 10rem;
	margin: 0 0 4rem;
}
footer .otherNav {
	display: flex;
	align-items: center;
	margin: 2rem 0 0;
}
footer .otherNav li {
	position: relative;
}
footer .otherNav li:after {
	content: "";
	background: #fff;
	width: 1px;
	height: 20px;
	position: absolute;
	top: calc(50% - 10px);
	right: 0;
}
footer .otherNav li:last-child:after {
	content: none;
}
footer .otherNav li a {
	font-size: min(1.33rem,16px);
	text-decoration: none;
	padding: 0 3rem;
}
footer .otherNav li:first-child a {
	padding: 0 3rem 0 0;
}
footer .copy {
	color: #888;
	font-size: min(1.33rem,16px);
}

.pageTop {
	position: fixed;
	bottom: 4rem;
	left: 4rem;
	width: min(5rem,60px);
	z-index: 10;
}
.fixCta {
	position: fixed;
	bottom: 4rem;
	right: 4rem;
	z-index: 10;
	display: flex;
	gap: 2rem;
}
.fixCta > .btn {
	width: min(18.7rem,225px);
	height: min(5rem,60px);
}
.fixCta > .btn a {
	display: block;
	height: auto;
	width: auto;
	padding: 1rem;
	border-radius: 6px;
	font-size: min(1.5rem,18px);
	letter-spacing: 0.05em;
}
.fixCta > .btn a:hover {
	opacity: 1;
}
.fixCta .btn-cta span {
    padding: 0 0 0 2.3rem;
}
.fixCta .btn-cta span:before {
    width: min(1.25rem, 15px);
    height: min(2rem, 25px);
    position: absolute;
    left: 0;
}
.fixCta .btn-login span {
    padding: 0 0 0 2.8rem;
}
.fixCta .btn-login span:before {
	content: "";
	background: url("../images/shared/icon_login.png") no-repeat;
	background-size: 100%;
    width: min(2rem, 24px);
    height: min(2rem, 24px);
    position: absolute;
    left: 0;
	top: 50%;
	transform: translateY(-50%);
}

/*--------------------------------------
　共通パーツ
---------------------------------------*/
/* TITLE */
.secTitBox {
	margin: 0 0 4rem;
}
.borTit {
	font-family: "Oswald";	
	font-size: min(12.9rem, 155px);
	font-weight: 700;
	-webkit-text-stroke: 1.5px #fff;
	color: transparent;
	letter-spacing: 0.06em;
	line-height: 1;
	margin: 0 0 4rem;
}
.jpnTit {
	font-size: min(2.91rem, 35px);
	color: #fff;
	letter-spacing: 0.06em;
	line-height: 1;
}

.bbTit {
    color: #fff;
    font-size: min(2.5rem,30px);
    text-align: center;
    margin: 0 auto 6.25rem;
    font-weight: 400;
    padding: 0 0 2.5rem;
    position: relative;
}
.bbTit:before {
    content: "";
	width: 160px;
	height: 1px;
	background: #fff;
	position: absolute;
	bottom: 0;
	left: calc(50% - 80px);
}

/* BUTTON */
.btn-internal.btn-more {
	width: min(26rem,260px);
}
.btn-internal a {
    display: block;
    text-decoration: none;
    border: 1px solid #fff;
    color: #fff;
    padding: .8rem 4.4rem;
    overflow: hidden;
    position: relative;
    transition: .3s;
    letter-spacing: 0.06em;
    text-align: center;
}
.btn-internal.btn-more a {
	font-family: "Oswald";
	font-size: min(2rem, 24px);
	padding: .8rem 0;
}
.btn-internal.btn-black a {
	border: 1px solid #000;
	background: #000;
}
.btn-internal a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 100%;
    background-color: #fff;
    z-index: 0;
    transition: .3s;
}
.btn-internal a:hover {
	opacity: 1;
	color: #000;
}
.btn-internal.btn-black a:hover {
	border: solid 1px #fff;
	color: #000;
}
.btn-internal a:hover:before {
	width: 100%;
}
.btn-internal a span {
	position: relative;
	z-index: 1;
	padding: 0 3.5rem;
}
.btn-internal span:after {
	content: "";
    background: url(../images/shared/arr_long_wh_right.png) no-repeat;
    background-size: 100%;
    width: 2.6rem;
	height: 1rem;
	position: absolute;
	top: calc(50% - 0.5rem);
	right: 0;
}
.btn-internal a:hover span:after {
    background: url(../images/shared/arr_long_bla_right.png) no-repeat;
    background-size: 100%;
}
.btn-ccl {
    display: inline-block;
    text-decoration: none;
    border: 1px solid #fff;
    overflow: hidden;
    position: relative;
    transition: .3s;
	width: min(3.33rem,40px);
	height:  min(3.33rem,40px);
	border-radius: 50%;
	background: url("../images/shared/arr_ccl_wh_right.png") no-repeat center;
	background-size: 42% auto;
}
.btn-ccl:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    transition: .3s;
}
.btn-cta.long {
	width: min(70.83rem,850px);
	margin: 0 auto;
}
.btn-cta a {
	background: #EE4D00;
	color: #fff;
	font-size: min(2.91rem, 35px);
	text-align: center;
	display: flex;
	border-radius: 20px;
	text-decoration: none;
	padding: 5rem;
	overflow: hidden;
	position: relative;
	transition: .3s;
	height: min(13rem,160px);
	align-items: center;
}
.btn-cta a:hover {
	opacity: 1;
}
.btn-cta a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 100%;
    background-color: #BC3500;
    transition: .4s;
}
.btn-cta a:hover:before {
	width: 100%;
}
.btn-cta span {
	position: relative;
	padding: 0 6rem 0 8rem;
	margin: 0 auto;
}
.btn-cta span:before {
	content: "";
	background: url("../images/shared/icon_wakaba.png") no-repeat;
	background-size: 100%;
	width: min(3.75rem,40px);
	height: min(6.25rem,75px);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
.btn-login a {
	background: #fff;
	color: #000;
	text-align: center;
	display: block;
	text-decoration: none;
	overflow: hidden;
	position: relative;
	transition: .3s;
}
.btn-login a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 100%;
    background-color: #E6E6E6;
    transition: .3s;
}
.btn-login a:hover:before {
	width: 100%;
}
.btn-login span {
	position: relative;
}


/* PARTS */
.sec {
	padding: 10rem 0;
}

/* 下層MV */
.mv_lower {
	position: static;
}
.mv_lower .mv_inner {
	position: static;
	padding: 6.6rem 0 0;
}
.mv_lower .deco {
    font-size: min(2.5rem,30px);
    color: #EE4D00;
    letter-spacing: 0.06em;
    /* top: 6.6rem; */
    left: 0rem;
    font-family: "Oswald";
    max-width: 1620px;
    width: 84.5%;
    margin: 0 auto 6.6rem;
    /* display: block; */
	position: static;
	font-weight: 400;
}
.mv_lower .main {
    width: 100%;
}
.mv_lower .mv_pic {
	height: min(37.5rem,450px);
}
.mv_lower .mv_pic .inner {
	height: 100%;
	display: flex;
	align-items: center;
}
.mv_lower .engTit {
	font-size: min(10.8rem,130px);
	color: #fff;
	font-weight: 700;
	line-height: 1;
	text-shadow: 0px 3px 8px rgba(0, 14, 35, 0.5);
}









/* Enjoy b-monster CTA */
.cta-enjoy .flex{
	display: flex;
	justify-content: space-between;
}
.cta-enjoy .TextTyping {
	font-size: min(14rem,200px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}
.cta-enjoy .btns {
	display: flex;
	gap: 3rem;
}
.cta-enjoy .btns .btn {
	width: min(28.6rem,350px);
	height: min(28.6rem,350px);
}
.cta-enjoy .btns .btn a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50px;
	font-size: min(2.91rem,35px);
	text-align: center;
	text-decoration: none;
	line-height: 1.54;
	padding-bottom: 3rem;
	background: #fff;
	color: #000;
	padding: 16rem 0 0;
}
.cta-enjoy .btns .btn-cta a {
	background: #EE4D00;
	color: #fff;
}
.cta-enjoy .btns .btn a:hover {
	opacity: 1;
}
.cta-enjoy .btns a span {
	position: relative;
	z-index: 1;
	padding: 0;
}
.cta-enjoy .btns .btn-login span:before {
	content: "";
	width: 10rem;
	height: 10rem;
	background: url("../images/shared/icon_login.png") no-repeat;
	background-size: 100%;
	position: absolute;
	top: -12rem;
    left: calc(50% - 4rem);
}
.cta-enjoy .btns .btn-cta span:before {
	content: "";
	width: 6.2rem;
	height: 10rem;
	background: url("../images/shared/icon_wakaba.png") no-repeat;
	background-size: 100%;
	position: absolute;
	top: -12rem;
    left: calc(50% - 2.5rem);
	transform: none;
}


/* news */
.newsArea .rowBox {
	border-bottom: solid 1px #fff;
}
.newsArea .rowBox:first-child {
	border-top: solid 1px #fff;
}
.newsArea .rowBox a {
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem 0;
}
.newsArea .rowBox a:hover {
	opacity: 1;
}
.newsArea .rowBox .txtBox {
	
}
.newsArea .rowBox .date {
	font-size: min(1.5rem,18px);
	font-weight: 400;
}
.newsArea .rowBox a:hover .btn-ccl {
    border: 1px solid #000;
	background: url("../images/shared/arr_ccl_bla_right.png") no-repeat center;
	background-size: 42% auto;
}
.newsArea .rowBox a:hover .btn-ccl:before {
	width: 100%;
}

/* faq */
.faqArea dl {
	margin: 0;
	border-bottom: solid 1px #fff;
}
.faqArea dl:first-child {
	border-top: solid 1px #fff;
}
.faqArea dt {
	min-height: min(10.5rem,140px);
	display: flex;
	align-items: center;
	padding: 0 4rem;
	position: relative;
	cursor: pointer;
}
.faqArea dt.open {
	background: #fff;
	color: #141414;
}
.faqArea dt:before {
	content: "";
	width: min(3.33rem,40px);
	height:  min(3.33rem,40px);
	border: solid 1px #fff;
	border-radius: 50%;
	background: url("../images/shared/arr_faq_wh_down.png") no-repeat center;
	background-size: 23% auto;
	position: absolute;
	top: calc(50% - 2rem);
	right: 3rem;
}
.faqArea dt.open:before {
	border: solid 1px #000;
	background: url("../images/shared/arr_faq_bla_up.png") no-repeat center;
	background-size: 23% auto;
}
.faqArea dt span {
	position: relative;
}
.faqArea dt span:before {
	content: "Q";
	color: #EE4D00;
	font-size: min(2.16rem,26px);
	font-weight: 400;
	font-family: "Oswald";
	margin: 0 3rem 0 0;
}
.faqArea dd {
	position: relative;
	padding: 0 8rem;
	margin: 4rem 0;
	display: none;
}
.faqArea dd:before {
	content: "A";
	color: #FFFF00;
	font-size: min(2.16rem,26px);
	font-weight: 400;
	font-family: "Oswald";
	position: absolute;
	top: 0;
	left: 4rem;
}
.faqArea dd p {
	line-height: 2.1;
	font-size: min(1.33rem,16px);
}
.faqArea dd p + p {
	margin: 0 0 2rem;
}

/*--------------------------------------
　recruit
---------------------------------------*/
.cmnpart_recruit .twoColBox {
	display: flex;
	gap: 6rem;
}
.cmnpart_recruit .twoColBox .leftBox {
	flex: 1;
}
.cmnpart_recruit .twoColBox .rightBox{
	width: min(77.5rem, 930px);
}



/*--------------------------------------
　point
---------------------------------------*/
.point {
	margin-top: 20.8rem;
}
.point .inner {
	max-width: 1620px;
    width: 84.5%;
    margin: 0 auto;
    position: relative;
}
.point .inner h3 {
	width: 100%;
	position: relative;
	margin-bottom:12.5rem ;
}
.point .inner h3 span{
	font-weight: lighter;
	font-size: min(4.16rem,50px);
}
.point .inner .twoColBox {
	display: flex;
	justify-content: space-between;
	margin-bottom:12.5rem ;
	align-items: center;
}
.point .inner .twoColBox .point_image {
	width: min(58.3rem,700px);
	height: 100%;
}
.point .inner .twoColBox .point_image:nth-child(2n-1) {
	margin: 0 5.83rem 0 0 ;
}
.point .inner .twoColBox .point_image.right {
	margin: 0 0 0 5.83rem;
}
.point .inner .twoColBox .point_text h4{
	display: flex;
	font-size: min(3.33rem,40px);
	align-items: center;
	line-height: 1.4;
	letter-spacing: 0.1em;
}
.point .inner .twoColBox .point_text h4 .number {
	width: min(6.6rem,80px);
	margin: 0 3.3rem 0 0 ;
}
.point .inner .twoColBox .point_text h4 .small {
	font-size: min(1.5rem,18px);
    vertical-align: baseline;
	letter-spacing: normal;
}　
.point .inner .twoColBox .point_text h4 .up {
	vertical-align:text-top;
}
.point .inner .twoColBox .point_text p {
	font-size: min(1.6rem,20px);
	line-height: 1.8;
	margin: 4.16rem 0 0 0 ;
}





@media screen and (max-width: 768px) {
	
html {
    font-size: 62.5%;
}
.pc {
	display: none;
}
.sp {
	display: block;
}
body {
	font-size: 1.4rem;
	min-width: 320px;
	overflow-x: hidden;
	line-height: 1.8;
	margin: 7rem 0 0;
	background: none;
}
.bodyInr:before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-image: url(../images/shared/bg_img.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
a:hover {
	opacity: 1;
}
.inner {
    width: 89%;
	max-width: 89%;
}	
	
	

/*--------------------------------------
　Header
---------------------------------------*/
header {
	height: 7rem;
}
header .headInr {
	padding: 0 0 0 6%;
}
header .logo {
}
header .logo img {
	max-width: 9rem;
}
header .areaInner {
	display: none;
}
.ctaBox {
	display: flex;
	margin: 0 6rem 0 0;
	gap: 0.7rem;
}
.ctaBox > div {
	width: 9rem;
	height: 4.5rem;
}
.ctaBox > div a {
	display: block;
	border-radius: 3px;
	font-size: 1.2rem;
	height: 100%;
	padding: 2.3rem 0 0;
	letter-spacing: 0.05em;
}
.ctaBox .btn-login a {
	background-image: url("../images/shared/icon_login.png");
	background-size: 1.7rem auto;
	background-repeat: no-repeat;
	background-position: top 6px center;
}
.ctaBox .btn-cta a {
	background-image: url("../images/shared/icon_wakaba.png");
	background-size: 1rem auto;
	background-repeat: no-repeat;
	background-position: top 6px center;
}
.menuBtn {
	width: 2.7rem;
	height: 2.1rem;
	max-width: 27px;
	max-height: 21px;
	display: block;
	position: fixed;
	top: 2.5rem;
    right: 1.8rem;
    z-index: 101;
}
.menuBtn.sp {
	display: block;
}
.menuBtn span {
	background: #fff;
	width: 2.7rem;
	max-width: 27px;
	height: 2.5px;
	position: absolute;
	left: calc(50% - min(1.2rem,12px));
	transition: all .3s;
	border-radius: 3px;
}
.menuBtn span:nth-child(1) {
	top: 0;
}
.menuBtn span:nth-child(2) {
	top: 9px;
}
.menuBtn span:nth-child(3) {
	top: 18px;
}
.menuBtn.active span:nth-child(1) {
	top: 10px;
    transform: translateY(0) rotate(-45deg);
}
.menuBtn.active span:nth-child(2){
	opacity: 0;
}
.menuBtn.active span:nth-child(3){
    top: 10px;
    transform: translateY(0) rotate(45deg);
}
.drawer {
	width: 94%;
	height: 100vh;
	position: fixed;
	top: 0;
	right: -94%;
	transition: all 0.5s;
	z-index: 100;
	background: #141414;
}
.drawer.panelactive{
    right: 0;
}
.drawer .drawerInr {
    padding: 2rem 3.5rem;
}
.drawer .logo {
	width: 9rem;
	margin: 0 auto 3rem;
}
.drawer .gNav li {
	border-bottom: solid 1px #fff;
}
.drawer .gNav li a {
	font-family: "Oswald";
	font-size: 1.5rem;
	letter-spacing: 0.06em;
	text-decoration: none;
	display: block;
	padding: 1rem 4rem 1rem 0;
	background: url("../images/shared/arr_gnav_right.png") no-repeat right 2rem center;
	background-size: 0.9rem auto;
}
.drawer .ctaBox {
	margin: 3rem 0 0;
	gap: 1rem;
	justify-content: space-between;
}
.drawer .ctaBox > div {
	width: 13.5rem;
	height: 8.7rem;
}
.drawer .ctaBox > div a {
	border-radius: 6px;
	font-size: 1.4rem;
	padding: 5rem 0 0;
	letter-spacing: 0.05em;
}
.drawer .ctaBox .btn-login a {
	background-size: 2.6rem auto;
	background-position: top 18px center;
}
.drawer .ctaBox .btn-cta a {
	background-size: 1.7rem auto;
	background-position: top 18px center;
}

/*--------------------------------------
　Footer
---------------------------------------*/
.pageTopBar {
	height: 5rem; 
}
.pageTopBar > div span {
	font-size: 1.6rem;
	background: url("../images/shared/arr_pagetop_wh.png") no-repeat top center;
	background-size: 1rem auto;
	padding: 1.2rem 0 0;
}
footer {
	padding: 3rem 0 2rem;
}
footer .areaInner {
    width: 89%;
    margin: 0 auto;
}
footer .areaInner:before {
	content: none;
}
footer .logo {
    width: 11.5rem;
    margin: 0 auto 3rem;
}
footer .colBox.upper {
	display: block;
	margin: 0 0 3rem;
}
footer .enTit {
	font-size: 1.4rem;
	text-align: center;
	line-height: 1.5;
	margin: 0 0 2rem;
}
footer .sns {
	gap: 2rem;
	margin: 0 0 2rem;
	justify-content: center;
}
footer .sns li a {
	width: 6rem;
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
footer .btn-internal.btn-black {
	width: 23rem;
	margin: 0 auto;
}
footer .btn-internal a {
	padding: .8rem 2.4rem;
}
footer .colBox.btm {
	padding: 0 0 2rem;
	margin: 0 0 2rem;
}
footer .colBox.btm .enTit{
	margin: 0 0 1.5rem;
}
footer .otherNav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
}
footer .otherNav li {
	position: relative;
	line-height: 1.6;
}
footer .otherNav li:after {
	height: 12px;
	top: calc(50% - 5px);
}
footer .otherNav li.borNone:after,
footer .otherNav li:last-child:after {
	content: none;
}
footer .otherNav li a {
	font-size: 1.2rem;
	padding: 0 1.2rem;
}
footer .otherNav li:first-child a {
	padding: 0 1.2rem 0 0;
}
footer .copy {
	font-size: 1rem;
	text-align: center;
	font-weight: 400;
}

.pageTop {
	display: none;
}
.fixCta {
	display: none;
}
	
	
/*--------------------------------------
　共通パーツ
---------------------------------------*/
/* TITLE */
.secTitBox {
	margin: 0 0 2rem;
}
.borTit {
	font-size: 6rem;
	margin: 0 0 2rem;
}
.jpnTit {
	font-size: 1.4rem;
	letter-spacing: normal;
}
.bbTit {
    font-size: 1.5rem;
    padding: 0 0 1.2rem;		
    margin: 0 auto 2.8rem;
}
.bbTit:before {
	width: 80px;
	left: calc(50% - 40px);
}


/* BUTTON */
.btn-internal.btn-more {
	width: 19rem;
	margin-right: auto;
	margin-left: auto;
}
.btn-internal a {
    padding: .8rem 4.4rem;
}
.btn-internal.btn-more a {
	font-size: 1.5rem;
	padding: .8rem 0;
}
.btn-internal.btn-black a {
}
.btn-internal a span {
	padding: 0 3.5rem;
}
.btn-internal span:after {
    width: 2rem;
	height: 0.5rem;
	top: calc(50% - 0.2rem);
}
.btn-ccl {
    display: inline-block;
    text-decoration: none;
    border: 1px solid #fff;
    overflow: hidden;
    position: relative;
    transition: .3s;
	width: min(3.33rem,40px);
	height:  min(3.33rem,40px);
	border-radius: 50%;
	background: url("../images/shared/arr_ccl_wh_right.png") no-repeat center;
	background-size: 42% auto;
}
.btn-ccl:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    transition: .3s;
}
.btn-cta.long {
	width: 30rem;
	margin: 0 auto;
}
.btn-cta a {
	font-size: 1.7rem;
	border-radius: 10px;
	padding: 3rem;
	height: 7.5rem;
	display: flex;
    align-items: center;
    justify-content: center;
}
.btn-cta span {
	position: relative;
	padding: 0 0 0 4rem;
}
.btn-cta span:before {
	width: 2.5rem;
	height: 4rem;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
.btn-login a {
	background: #fff;
	color: #000;
	text-align: center;
	display: block;
	text-decoration: none;
	overflow: hidden;
	position: relative;
	transition: .3s;
}
.btn-login a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 100%;
    background-color: #E6E6E6;
    transition: .3s;
}
.btn-login a:hover:before {
	width: 100%;
}
.btn-login span {
	position: relative;
}



/* 	pankuzu */
/*#pankuzu {
	margin: 5rem auto 0;
    padding: 0 0 2.5rem;
}
#pankuzu ul {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow-x: auto;
}
#pankuzu li {
    display: inline-block;
    font-size: 1.4rem;
    color: #55564b;
}
#pankuzu li:after {
    content: ">";
    margin: 0 0.4rem 0 0.8rem;
}
#pankuzu li:last-child:after {
    content: none
}
#pankuzu li a {
	color: #55564b;
    text-decoration: none;
}*/



/* PARTS */
.sec {
	padding: 4rem 0;
}
	
/* 下層MV */
.mv_lower {
	position: static;
}
.mv_lower .mv_inner {
	position: static;
	padding: 3.3rem 0 0;
}
.mv_lower .deco {
    font-size: 1.4rem;
    position: relative;
    top: 0rem;
    left: 0rem;
	margin: 0 auto;
}	
.mv_lower .main {
	margin: 1rem 0 0 0;
}
.mv_lower .mv_pic {
	margin: 1rem 0 0;
}	
.mv_lower .engTit {
	font-size: 4.5rem;
}	

/* Enjoy b-monster CTA */
.cta-enjoy .flex{
	display: block;
}
.cta-enjoy .TextTyping {
	font-size: 7rem;
	letter-spacing: 0.01em;
	text-align: center;
	margin: 0 0 3rem;
}
.cta-enjoy .btns {
	gap: 1.5rem;
	justify-content: center;
}
.cta-enjoy .btns .btn {
	width: 16rem;
	height: 16rem;
}
.cta-enjoy .btns .btn a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	font-size: 1.7rem;
	padding-bottom: 3rem;
	padding: 9rem 0 0;
}
.cta-enjoy .btns a span {
	padding: 0;
}
.cta-enjoy .btns .btn-login span:before {
	width: 5rem;
	height: 5rem;
	top: -6.5rem;
    left: calc(50% - 2rem);
}
.cta-enjoy .btns .btn-cta span:before {
	width: 3.1rem;
	height: 5rem;
	top: -6.5rem;
    left: calc(50% - 1.2rem);
}


/* news */
.newsArea .rowBox {
}
.newsArea .rowBox:first-child {
    border-top: none;
}
.newsArea .rowBox a {
	display: block;
	padding: 1.5rem 0;
}
.newsArea .rowBox:first-child a {
	padding: 0 0 1.5rem;
}
.newsArea .rowBox .txtBox {
	line-height: 1.5;
}
.newsArea .rowBox .date {
	font-size: 1.2rem;
	margin: 0 0 5px;
}
.newsArea .rowBox .btn-ccl {
    display: none;
}

/* faq */
.faqArea dl {
}
.faqArea dt {
	min-height: inherit;
	padding: 16px 1.5rem;
	line-height: 1.5;
}
.faqArea dt:before {
	width: 2rem;
	height:  2rem;
	top: calc(50% - 1rem);
	right: 1.5rem;
}
.faqArea dt span {
    padding: 0 4rem 0 2rem;
}
.faqArea dt span:before {
	content: "Q";
	font-size: 1.5rem;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
}
.faqArea dd {
	position: relative;
	padding: 0 3.5rem;
	margin: 2rem 0;
}
.faqArea dd:before {
	content: "A";
	font-size: 1.5rem;
	top: 0;
	left: 1.5rem;
}
.faqArea dd p {
	line-height: 1.8;
}
.faqArea dd p + p {
	margin: 0 0 1rem;
}
	
/*--------------------------------------
　recruit
---------------------------------------*/
.cmnpart_recruit {
	background: url("../images/top/recruit_sp.jpg") no-repeat top center;
	background-size: cover;
	padding: 3rem 0;
}
.cmnpart_recruit .secTitBox {
    text-align: center;
	margin: 0 0 1.3rem;
}
.cmnpart_recruit .borTit {
	color: #fff;
	font-size: 5rem;
	letter-spacing: normal;
	font-weight: 500;
	margin: 0 0 1rem;
}
.cmnpart_recruit .twoColBox {
	display: block;
}
.cmnpart_recruit .twoColBox .leftBox {
	flex: 1;
}
.cmnpart_recruit .btn-internal.btn-more {
	width: 23rem;
}
.cmnpart_recruit .btn-internal.btn-more a {
	font-size: 1.5rem;
	padding: .8rem 0;
}
.cmnpart_recruit .twoColBox .rightBox{
	display: none;
}
	
	
/*--------------------------------------
　point
---------------------------------------*/	
.point {
	margin: 8.5rem auto 6.5rem;
}
.point .inner {
	max-width: 100%;
    width: 100%;
}
.point .inner h3 {
	padding: 0 2.0rem;
	text-align: center;
	margin-bottom: 5.0rem;
}
.point .inner h3 span {
	font-size: 2.5rem;
	text-align: center;
	line-height: 1.6;
}
.point .inner .twoColBox {
	display: block;
	margin: 1.0rem 0 3.5rem;
}
.point .inner .twoColBox .point_image {
	width: 100%;
	margin: 0 ;
}
.point .inner .twoColBox .point_text h4 {
	display: block;
	text-align: center;
	font-size: 1.8rem;
	margin: 0 0 2.0rem;
}
.point .inner .twoColBox .point_text h4 .small {
	font-size: 1.2rem;
}
.point .inner .twoColBox .point_text h4 .number {
	width: 3.5rem;
	margin: 0 auto 2.0rem;
}
.point .inner .twoColBox .point_text p {
	padding: 0 2.0rem;
	font-size: 1.4rem;
}	
.txt-hide01,.txt-hide02,.txt-hide03{
	display: none;
}	
button.more01,button.more02,button.more03 {
    width: 100%;
    margin: -50px auto 40px;
    display: block;
    background-color: #666;
    color: #fff;
    /* padding: 0px 0 20px; */
    border: none;
    outline: 0;
    transition: .5s;
    -erbkit-transition: .5s;
    height: 7rem;
    background: #000;
    position: relative;
}
button.more01::before,button.more02::before,button.more03::before {
    content: "";
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    position: relative;
    top: -5rem;
    width: 100%;
    display: block;
    height: 5rem;
}  
button.more01::after,button.more02::after,button.more03::after {
    content: "MORE +";
    transition: .2s;
    -erbkit-transition: .2s;
    color: #ee4d00;
    font-family: 'Oswald';
    font-size: 1.4rem;
    border-bottom: 1px solid #fff;
    position: relative;
    top: -3rem;
    width: calc(100% - 4rem);
    display: block;
    margin: 0 auto;
    padding: 0 0 1rem;
}
button.more01.on-click,button.more02.on-click,button.more03.on-click {
    margin: 40px auto 40px;
}
button.more01.on-click::after,button.more02.on-click::after,button.more03.on-click::after{
    content: "CLOSE -";
    border-bottom: 1px solid #fff;
}	
	
}