@charset 'UTF-8';

html
{
    width: 100%;  height: 100%;
}
body
{
    font-family: 'メイリオ', 'ＭＳ Ｐゴシック', Helvetica , sans-serif;  font-size: 62.5%;  line-height: 1.4;  position: relative;  width: 100%;  word-wrap: break-word;  color: #fff;  background-color: #000;  overflow-wrap: break-word;
}
.bg
{
    position: fixed;  z-index: -1;  top: 0;  right: 0;  bottom: 0;  left: 0;  overflow: hidden;  background-image: url('../image/kv_bg.jpg');  background-repeat: no-repeat;  background-position: top center;  background-size: cover;
}
.bg.bg_scrollSp
{
    background-size: cover;
}
.bg.bg_scrollcss
{
    background-size: 120%;
}

/*
.bg_en {
    display: none;
    width: 100%;
    margin-left: -40%;
    margin-top: -50%;
    padding-bottom: 50%;
    animation: bgCircle 600s infinite linear;
    opacity: .75;
}
@webkit-keyframes bgCircle{
    0%{transform:rotate(0deg)}
    to{transform:rotate(1turn)}
}
@keyframes bgCircle{
    0%{transform:rotate(0deg)}
    to{transform:rotate(1turn)}
}
@media screen and (max-width:640px) {
    .bg_en {
        width: 150%;
        animation: bgCircle 300s infinite linear;
    }
}
*/

/**/
img
{
    max-width: 100%;  height: auto;  vertical-align: top;  border-style: none;
}
li
{
    list-style: none;
}
a
{
    text-decoration: none;
}
a:link,
a:hover,
a:active
{
    color: #fff;
}
a:visited
{
    color: #fff;
}
a:focus
{
    outline: none;
}

/*clearfix*/
.cf:before,
.cf:after
{
    display: table;  content: '';
}
.cf:after,
.clear
{
    clear: both;
}

cf::after
{
    line-height: 0;  display: block;  visibility: hidden;  clear: both;  height: 0;  content: ' ';
}
.tc
{
    text-align: center !important;
}
.tr
{
    text-align: right !important;
}
.tl
{
    text-align: left !important;
}
.pos-rel
{
    position: relative;
}
.pos-abs
{
    position: absolute;
}
.pos-fix
{
    position: fixed;
}
.pos-inhe
{
    position: inherit;
}

*
{
    margin: 0;  padding: 0;
}

h1,
h2,
h3,
h4
{
    margin: 0;  padding: 0;
}
a
{
    display: inline-block;
}
#page-topbt
{
    position: fixed;  z-index: 200;  right: 0;  bottom: 20%;  width: 14%;  max-width: 98px;
}
#join_btbox02
{
    position: fixed;  z-index: 200;  right: 0;  bottom: 1%;  left: 0;
}
a:hover
{
    transition: .8s;  opacity: .5;
}
a img
{
    width: 100%;  height: auto;
}
/**/
.inner,
#join_btbox
{
    width: 100%;  max-width: 980px;  margin: 0 auto;
}
.join_btbox
{
    position: relative;  z-index: 100;
}
.join_btbox ul
{
    width: 60%;  max-width: 588px;  margin: 0 auto;
}
.join_btbox li
{
    display: inline-block;  width: 49%;  width: 49.5%;  max-width: 320px;
}
.join_btbox li:first-child
{
    margin-right: 1%;
}

.join_btbox.is-fixed
{
    position: fixed;  z-index: 2;  top: 0;  left: 0;  width: 100%;
}

/**/
#header
{
    position: relative;  overflow: hidden;  text-align: center;
}
#top-sns
{
    position: relative;  width: 100%;  max-width: 980px;  margin: 0 auto;  padding-top: 1%;
}
#top-sns ul.snslist
{
    position: absolute;  z-index: 100;  left: 0;  width: 31%;
}
#top-sns ul.snslist li
{
    display: inline-block;
}
#top-sns ul.snslist li
{
    width: 25%;  max-width: 54px;  margin-right: 8%;
}
#top-sns ul.snslist li:last-child
{
    margin-right: 0;
}
#top-sns ul.snslist li img
{
    width: 100%;  height: auto;
}
#header
{
    position: relative;  background: url(../image/kv_main.png) top center no-repeat;  background-size: 100% auto;
}
#hed-title
{
    padding-top: 70%;
}
#header h1
{
    position: absolute;  z-index: 15;  top: 0;  right: 0;  width: 100%;  margin: 0 auto;  text-align: center;  text-indent: -99999px;
}
#header h1 img
{
    width: 100%;height: auto;
}
#hed-title #h2
{
    position: absolute;  bottom: -90%;
}

#hed-title #h2 #animation_container,
#hed-title #h2 #canvas
{
    width: 980px !important;  height: 550px !important;
}
#hed-title #h2 #animation_container
{
    position: relative;  z-index: 10;  right: 0;  bottom: 0;  left: 0;  max-width: 980px;  margin: 0 auto;
}
#hed-title #h2 #canvas
{
    position: relative;  z-index: 200;
}
#hed-title #h2 #title_animeBox
{
    max-width: 980px;  margin: 0 auto;  text-align: center;
}
@media screen and (max-width:1240px)
{
    #hed-title
    {
        padding-top: 80%;
    }
}
@media screen and (max-width:980px)
{
    #hed-title
    {
        padding-top: 80%;
    }
    #hed-title #h2
    {
        top: -318%;
    }
    #hed-title #h2,
    #hed-title #h2 #animation_container,
    #hed-title #h2 #canvas
    {
        width: 100% !important;  height: auto !important;
    }
}


#hed-title .img_35thlogo
{
    position: absolute;  z-index: 20;  right: 0;  bottom: 280%;  width: 29.2%;  max-width: 286px;
}
.img_topkv
{
    position: absolute;  z-index: 5;  top: 0;  right: 0;  left: 0;  width: 100%;  max-width: 1120px;  margin: 0 auto;
}
.img_topkvpc
{
    max-width: 1120px;
}
.img_topkvsp
{
    max-width: 1120px;
}
@media screen and (max-width:979px)
{
    .img_topkvpc,
    .logo_pc
    {
        display: none;
    }
    #hed-title h1
    {
        width: 70%;  max-width: inherit;  padding-top: 4%;
    }
    #top-sns ul.snslist
    {
        right: auto;  left: 0;
    }
    #hed-title .img_35thlogo
    {
        right: 5%;  bottom: 274%;  width: 20%;
    }
}
@media screen and (min-width:980px)
{
    .img_topkvsp,
    .logo_sp
    {
        display: none;
    }
}
.img_titleEfect
{
    position: absolute;  z-index: 9;  right: 0;  bottom: -9%;  left: 0;  margin: 0 auto;
}
.img_efectThun
{
    position: absolute;  z-index: 9;  right: 0;  bottom: 8%;  left: 0;  margin: 0 auto;
}
#hed-txt
{
    position: relative;  z-index: 10;
}
/**/
.cont-box
{
    position: relative;
}
.cont-box::before
{
    position: absolute;  z-index: 1;  top: 0;  right: 0;  left: 0;  display: block;  width: 100%;  margin-top: -2%;  padding: 1% 0;  content: '';  background: url(../image/flame_tp.png) top center no-repeat;  background-size: 100%;
}
.cont-box::after
{
    position: absolute;  z-index: 1;  right: 0;  bottom: 0;  left: 0;  display: block;  width: 100%;  margin-bottom: -2%;  padding: 1% 0;  content: '';  background: url(../image/flame_bt.png) bottom center no-repeat;  background-size: 100%;
}
.cont-box-inner
{
    position: relative;  z-index: 10;  padding: 0 3.9% 2%;  background: url(../image/flame_ct.png) top center repeat-y;  background-size: 100%;
}
#cont-box01
{
    font-size: 2.6rem;  margin: 2% 0 10%;
}
@media screen and (max-width:640px)
{
    #cont-box01
    {
        font-size: 3.0rem;
    }
}
.cont-box h2
{
    width: 100%;  max-width: 904px;  margin: 0 auto 2%;
}
.cont-box .int_txt
{
    line-height: 1.6;
}
@media screen and (max-width:640px)
{
    .cont-box .int_txt
    {
        font-size: 3.4rem;
    }
}

/*
#cont-box01 .author_image {
    float:left;
    width: 18.2%;
    max-width: 167px;
    margin-right: 3%;
}
#cont-box01 .author_image .img_sign {
    display: inline-block;
    padding-top: 10%;
}
#cont-box01 .message_txt {
    overflow: hidden;
    width: 78.8%;
}
#cont-box01 .message_txt .sign_txt {
    text-align: right;
    margin-top: 2%;
}
*/

.sign_txt
{
    top: 0;  right: 0;  float: right;  width: 68%;  max-width: 616px;
}


/**/
#cont-box02
{
    font-size: 3.0rem;
}
#cont-box02 .rec_txtbox
{
    font-size: 2.2rem;  overflow-y: scroll;  height: 20%;  max-height: 280px;  -webkit-transform: translateZ(0);  border: 2px solid #b086ff;  background: #303;          -webkit-overflow-scrolling: touch;                  overflow-scrolling: touch;
}
@media screen and (min-width:980px)
{
    #cont-box02 .rec_twitter .rec_txtbox
    {
        max-height: 400px;
    }
}
@media screen and (max-width:640px)
{
    #cont-box02 .rec_txtbox
    {
        font-size: 3.0rem;
    }
}
#cont-box02 .rec_device .rec_txtbox
{
    overflow-y: auto;
}
.rec_txtbox-inner
{
    padding: 3%;
}
.rec_twitter .rec_txtbox-inner
{
    padding: 3%;  text-align: center;
}
.rec_twitter #twitter-widget-0
{
    width: 100% !important;
}

#cont-box02 .rec_about
{
    text-align: center;
}
#cont-box02 .rec_about dl
{
    margin-top: 8%;  margin-bottom: 5%;
}
#cont-box02 .rec_about dt.rec_about-testperiod
{
    margin-bottom: 2%;
}
#cont-box02 .rec_about dd.rec_about-period
{
    margin-bottom: 4%;
}
#cont-box02 .rec_notes,
#cont-box02 .rec_device
{
    margin-top: 8%;
}
#cont-box02 .rec_twitter
{
    font-size: 1.2rem;  margin-top: 8%;
}

.bt_box-law
{
    display: inline-block;  width: 36%;  max-width: 320px;  margin: 0 auto;  text-align: center;
}
.bt_box-law img
{
    height: auto;
}

/**/
#footer
{
    font-size: 1.8rem;  width: 100%;  margin: 9% auto 0;
}
@media screen and (max-width:640px)
{
    #footer
    {
        font-size: 2.4rem;
    }
}
.img_bgtown
{
    padding: 20% 0 0;  background: url(../image/gt_bgtown.png) bottom center no-repeat;  background-size: 200% auto;
}
#ft-txt
{
    width: 100%;  background: #333;
}
.ft-inner
{
    padding: 2% 2.5% 15%;
}
.logo-copy
{
    margin-bottom: 2.5%;
}
.segalogo
{
    width: 16%;  max-width: 156px;  margin: 0 2.5% 0 0;
}
@media screen and (max-width:640px)
{
    .segalogo
    {
        width: 22%;
    }
}
.logo-copy-txt
{
    display: inline-block;  padding-top: 3.5%;
}
.ft-infoLink
{
    margin-top: 1%;
}
.ft-infoLink li
{
    display: inline-block;  margin-right: 1%;
}
.ft-infoLink li:last-child
{
    margin: 0;
}
.ft-infoLink li a
{
    text-decoration: underline;
}

@media screen and (min-width:980px)
{
    #footer
    {
        font-size: 1.4rem;
    }
    .img_bgtown
    {
        padding: 200px 0 0;  background-size: auto;
    }
    .logo-copy-txt
    {
        padding-top: 4%;
    }
}


/* law */
body#cbt_law
{
    background: #000;
}
body#cbt_law #wrapper
{
    font-size: 2.4rem;  padding: 5% 2%;
}
body#cbt_law .contentBox p
{
    font-size: 2.0rem;  padding: 0 2%;
}
body#cbt_law #footer .img_bgtown
{
    display: none;
}

body#cbt_law #footer,
body#cbt_law #footer p
{
    font-size: 1.4rem;
}

/*unsupported*/
body#unsup
{
    font-size: 14px;  padding-top: 15%;  text-align: center;
}
body#unsup h1
{
    font-size: 30px;  margin-bottom: 5%;
}
body#unsup p
{
    font-size: 18px;
}
body#unsup #footer
{
    margin-top: 0;  text-align: left;  background: none;
}
body#unsup .b_link
{
    margin-top: 5%;
}
body#unsup .b_link .text
{
    margin-bottom: 1%;
}
body#unsup .b_link .text:last-child
{
    margin-bottom: 0;
}
body#unsup .b_link .text a
{
    text-decoration: underline;
}
body#cbt_law #footer,
body#cbt_law #footer p,
body#unsup #footer,
body#unsup #footer p
{
    font-size: 14px;
}

body#cbt_law #footer #ft-txt,
body#unsup #footer .img_bgtown,
body#unsup #footer #ft-txt
{
    background: none;
}
body#cbt_law #footer .ft-inner,
body#unsup #footer .ft-inner
{
    padding-bottom: 2%;
}


/* user */
.-user .title
{
    font-size: 20px;  text-align: center;
}

.-user .text
{
    font-size: 16px;
}

.-user .text a
{
    text-decoration: underline;
}

.userTable
{
    margin: 4rem auto;  border: 1px solid #fff;
}

.userTable thead
{
    color: #000;  background: #fff;
}
.userTable thead tr td
{
    border-right: 1px solid #000;
}

.userTable tr td
{
    width: 33%;  padding: 1rem;  border-right: 1px solid #fff;border-bottom: 1px solid #fff;
}

@media screen and (max-width:640px)
{
    .-user .title
    {
        font-size: 3.6vw;  text-align: center;
    }

    .-user .text
    {
        font-size: 3vw;
    }

    .userTable tr td
    {
        padding: 2vw;
    }
}
/* anime */
.cont-box
{
    opacity: 0;
}
@-webkit-keyframes bigSmall
{
    0%
    {
        transform: scale(2);  opacity: 0;
    }

    to
    {
        transform: scale(1);  opacity: 1;
    }
}

@keyframes bigSmall
{
    0%
    {
        transform: scale(4);  opacity: 0;
    }

    to
    {
        transform: scale(1);  opacity: 1;
    }
}

.bigSmall
{
              -webkit-animation-name: bigSmall;                      animation-name: bigSmall;
}