@charaset "shift_jis";

/* FONT SIZE */
html {
  font-size: 62.5%;
}

body {
  font-size: 14px;
  font-size: 1.4rem;
}

/* =14px */
h1 {
  font-size: 24px;
  font-size: 2.4rem;
}

/* =24px */

.clearfix {
  zoom: 1;
}

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

body {
  font-family: sans-serif;
  background-color: #fafafa;
  background-image: url(image/bg.png);
  background-attachment: fixed;
}

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

img {
  box-sizing:border-box;
  width: 100%;
  border: none;
  vertical-align: bottom;
}

a span {
  display: none;
}

.hide {
  display: none;
}

#frame-footer {
  width: 100%;
  height: 240px;
}

#topcontrol {
  z-index: 100;
}


/* �\���m�F */
#wrapper,
#frame-nav,
#maincontent {
  display: none;
}


/* H2 --------------------------- */
h2 {
  width: 100%;
  max-width: 1200px;
  height: 140px;
  margin: 14px auto 8px auto;
  margin-left: 26px;
  padding: 0;
}



/* BASE ------------------------- */
#frame-contents {
  width: 100%;
  max-width: 1200px;
  min-height: 750px;
  margin: 0px auto;

  
}

#frame-nav-side {
  width: 336px;
  height: 100%;
  background: url(image/nav/bg_nav-side.png) top center;
  position: fixed;
  top: 0;
}

.frame-nav-side-innner {
  width: 320px;
  margin-left: 8px;
  margin-top: -16px;
  position: absolute;
}

#frame-contents-inner {
  width: calc(100% + 27px);
}
#frame-contents-inner.top-frame {
  height: calc(100vh - 146px);
  background: url(image/bg_top-main.png) top center no-repeat;
  background-size: contain  ;
    background-position: top 0 right 50%;
}


.bg-index {
  height: calc(100vh - 146px);
  /* background: url(image/bg_top-main.png) top center no-repeat;
  background-size: contain;
    background-position: top 0 right -27px; */
}


/* CONTENTS RIGHT AREA */

/* TOP */
.frame-index {
  width: calc(100% - 336px);
  height: 920px;
  position: relative;
  top: 0px;
  left: 336px;
}

.box-text-01 {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 490px;
  right: -50px;
}

/* NAV */
.nav-side-logo-top {
  width: 564px;
  height: 398px;
  position: absolute;
  top: 330px;
  left: -3px;
}

/* TOP�y�[�W ���C�����S */

.nav-side-logo {
  width: 351px;
  height: calc(100vh - 340px - 220px);
  max-height: 386px;
  position: absolute;
  top: 350px;
  left: -15px;
  text-align: center;
}
.nav-side-logo img {
  width: auto;
  height: 100%;
}

/* �R���e���c�y�[�W ���C�����S */

.button-regist {
  width: 223px;
  height: 195px;
  margin-top: 0px;
}

.button-regist a {
  width: 223px;
  height: 195px;
  display: block;
  background-image: url(image/nav/button_nav_regist.png);
}

.button-regist a:hover {
  background-position: -223px 0;
}

.banner-minigame {
  width: 223px;
  height: 83px;
  margin-top: 15px;
  text-align: center;
}

.button-nav {
  width: 320px;
  min-height: 344px;
  background: url(image/nav/bg_nav-button.png) 0px 48px no-repeat;
  position: absolute;
}

/* ���C���i�r�{�b�N�X */
.button-nav-spacer {
  width: 336px;
  height: 10px;
}

/* ��̌��Ԓ��� */
.button-nav ul {
  margin: 0;
  padding: 0px 0 0 0;
}

/* height���� */
.button-nav li {
  width: 320px;
  height: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.button-nav li a {
  width: 320px;
  height: 40px;
  display: block;
  background-image: url(image/nav/button_nav-main.png);
}

.box-new-01 {
  width: 60px;
  height: 24px;
  background: url(image/nav/pt_new.png) no-repeat;
  position: absolute;
  top: 12px;
  right: -25px;
  z-index: 60;
}

.box-new-02 {
  width: 60px;
  height: 24px;
  background: url(image/nav/pt_new.png) no-repeat;
  position: absolute;
  top: 52px;
  right: -25px;
  z-index: 60;
}

.box-new-03 {
  width: 60px;
  height: 24px;
  background: url(image/nav/pt_new.png) no-repeat;
  position: absolute;
  top: 92px;
  right: -25px;
  z-index: 60;
}

.box-new-04 {
  width: 60px;
  height: 24px;
  background: url(image/nav/pt_new.png) no-repeat;
  position: absolute;
  top: 132px;
  right: -25px;
  z-index: 60;
}

.box-new-05 {
  width: 60px;
  height: 24px;
  background: url(image/nav/pt_new.png) no-repeat;
  position: absolute;
  top: 172px;
  right: -25px;
  z-index: 60;
}

.box-new-06 {
  width: 60px;
  height: 24px;
  background: url(image/nav/pt_new.png) no-repeat;
  position: absolute;
  top: 212px;
  right: -25px;
  z-index: 60;
}

.box-new-07 {
  width: 60px;
  height: 24px;
  background: url(image/nav/pt_new.png) no-repeat;
  position: absolute;
  top: 252px;
  right: -25px;
  z-index: 60;
}

.box-new-08 {
  width: 60px;
  height: 24px;
  background: url(image/nav/pt_new.png) no-repeat;
  position: absolute;
  top: 292px;
  right: -25px;
  z-index: 60;
}

.nav-btn-01 a {
  background-position: 0 0;
}

.nav-btn-02 a {
  background-position: 0 -40px;
}

.nav-btn-03 a {
  background-position: 0 -80px;
}

.nav-btn-04 a {
  background-position: 0 -120px;
}

.nav-btn-05 a {
  background-position: 0 -160px;
}

.nav-btn-06 a {
  background-position: 0 -200px;
}

.nav-btn-07 a {
  background-position: 0 -240px;
}

.nav-btn-08 a {
  background-position: 0 -280px;
}

.nav-btn-09 a {
  background-position: 0 -320px;
}

.nav-btn-01 a:hover {
  background-position: -320px 0;
}

.nav-btn-02 a:hover {
  background-position: -320px -40px;
}

.nav-btn-03 a:hover {
  background-position: -320px -80px;
}

.nav-btn-04 a:hover {
  background-position: -320px -120px;
}

.nav-btn-05 a:hover {
  background-position: -320px -160px;
}

.nav-btn-06 a:hover {
  background-position: -320px -200px;
}

.nav-btn-07 a:hover {
  background-position: -320px -240px;
}

.nav-btn-08 a:hover {
  background-position: -320px -280px;
}

.nav-btn-09 a:hover {
  background-position: -320px -320px;
}

.nav-btn-01-act {
  background: url(image/nav/button_nav-main.png) -640px 0;
}

.nav-btn-02-act {
  background: url(image/nav/button_nav-main.png) -640px -40px;
}

.nav-btn-03-act {
  background: url(image/nav/button_nav-main.png) -640px -80px;
}

.nav-btn-04-act {
  background: url(image/nav/button_nav-main.png) -640px -120px;
}

.nav-btn-05-act {
  background: url(image/nav/button_nav-main.png) -640px -160px;
}

.nav-btn-06-act {
  background: url(image/nav/button_nav-main.png) -640px -200px;
}

.nav-btn-07-act {
  background: url(image/nav/button_nav-main.png) -640px -240px;
}

.nav-btn-08-act {
  background: url(image/nav/button_nav-main.png) -640px -280px;
}

.nav-btn-09-act {
  background: url(image/nav/button_nav-main.png) -640px -320px;
}

.nav-btn-05-coming {
  background: url(image/nav/button_nav.png) -669px -280px;
}


/* CP */

.box-contents {
  width: calc(100% - 336px);
  margin-left: 336px;
  /* float: right; */
}

.box-contents img {
  margin-bottom: 100px;
  margin-left: 0px;
}


.btn-cp01-1 {
  width: 800px;
  height: 80px;
}

.btn-cp01-1 a {
  width: 800px;
  height: 80px;
  display: block;
  background-image: url(image/contents/btn_cont_01_cp.png);
}

.btn-cp01-1 a:hover {
  background-position: 0 -80px;
}

#frame-btn-cp02 {
  width: 800px;
  height: 844px;
  background: url(image/contents/cont_01_04.png) no-repeat;
  position: relative;
}

#frame-btn-cp02 a {
  width: 72px;
  height: 36px;
  display: block;
  background: url(image/contents/btn_cont_02_cp.png) no-repeat;
  position: absolute;
  top: 296px;
  left: 80px;
}

#frame-btn-cp02 a:hover {
  background-position: 0 -36px;
}

#frame-btn-cp03 {
  width: 800px;
  height: 448px;
  background: url(image/contents/cont_03_02.png) no-repeat;
  position: relative;
}

#frame-btn-cp03 a {
  width: 72px;
  height: 36px;
  display: block;
  background: url(image/contents/btn_cont_02_cp.png) no-repeat;
  position: absolute;
  top: 360px;
  left: 80px;
}

#frame-btn-cp03 a:hover {
  background-position: 0 -36px;
}


/* BG ALL IMAGE ------------------------ */
img.bgmaximage {
  position: fixed !important;
  display: none;
}

img.bg-image {
  display: block;
  z-index: -1;
  overflow: hidden;
  top: 0px;
  width: 1024px;
  height: auto;
  position: fixed !important;
}

#maincontent {
  width: 100%;
  z-index: 50;
  position: absolute;
  top: 0px;
  left: 0px;
}