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


html,body,div,ul,ol,li,dl,dt,dd,form,fieldset,input,textarea,h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,th,td { margin:0; padding:0;}
img { border: 0; vertical-align: bottom; border-style: none;}
a img { border-style:none;}
a { outline: none; }
a:link,a:visited,a:active {outline: none;} 

body,td,th {font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}


body{
background-image:url("../img/bg.jpg");
background-position:center top;
background-repeat:no-repeat;
background-attachment: fixed;
}

.clearfix:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}


#header{ background-color: #000; width:100%; height: 63px; border-bottom:#CCC 1px solid;}


#tophead{ background-image: url(../img/header.jpg);	background-position: center;	height: 63px;}
#tophead_con{ width: 960px;	margin: 0 auto;	height: 64px;}
#tophead_con h1{ float:left; display:block; width:162px; height:60px; text-indent:-9999px; overflow:hidden;}
#tophead_con h1 a{ display:block; width:162px; height:60px; background-image:url(../img/toplogo.png); text-indent:-9999px; overflow:hidden;}
#tophead_con h1 a:hover{ background-position:0 -60px;}
#tophead_con .link{	float: right;	width: 230px;	margin-top: 17px;}
#tophead_con .link .original a{ display:block; width:89px; height:31px; background-image:url(../img/get_toukiden.gif); float:left; text-indent:-9999px;}
#tophead_con .link .portal a{ display:block; width:120px; height:31px; background-image:url(../img/get_toukiden_portal.gif); float:left; text-indent:-9999px; margin-left:15px;}
#tophead_con .link .twitter a{ display:block; width:31px; height:31px; background-image:url(../img/twitter.gif); float:left; text-indent:-9999px; margin-left:15px;}
#tophead_con .link .shop a{ display:block; width:132px; height:31px; background-image:url(../img/btn_shop.jpg); float:left; text-indent:-9999px; margin-left:15px;}

#tophead_con .link .original a:hover{ background-position:0 -31px;}
#tophead_con .link .portal a:hover{ background-position:0 -31px;}
#tophead_con .link .twitter a:hover{ background-position:0 -31px;}
#tophead_con .link .shop a:hover{ background-position:0 -31px;}


#bnavi { border-bottom: solid 1px #ccc;}
#bnavi .con { margin: 10px auto; width: 100%; position: relative; }
#bnavi .con .shop{ float:right; font-size:13px; padding-top:2px;}
#bnavi .con .shop a{ color:#666; text-decoration:none;}
#bnavi .con .shop a:hover{ color:#c00; font-weight:bold;}
#bnavi .con .fb-like{ line-height:10px; }

.banner{ margin-bottom:10px;}
#footer{ border-top: solid 1px #ccc; background-color:#FFF; border-bottom:0; width:100%;}
#copyright{	width: 100%; margin: 0 auto; clear: both; text-align: center; padding-top:20px;}
#pagetop { bottom: 0px; right: 0px; position: fixed; z-index: 500; margin-bottom:-20px;}
#pagetop a:hover img{ margin-bottom:20px;}
#pagetop img{
        vertical-align:top;
}

.sp_nv img{margin-bottom:4px;}


.talk1 {
    padding-left:100px;
    background:url(../img/icon/1/nomal.png) no-repeat left top;
}

.talk2 {
    background:url(../img/icon/2/nomal.png) no-repeat right top;
}
.talk1 , .talk2 { width:640px; margin-bottom:30px; min-height:80px;}
.talk1 p {
    position: relative;
    background: #fff;
    border: 3px solid #F9C;
    padding:10px;
    width:500px;
    min-height:60px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
	text-align:left;
	margin-left:15px;
}
.talk2 p {
    position: relative;
    background: #fff;
    border: 3px solid #77c7d0;
    padding:10px;
    width:500px;
    min-height:60px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
	text-align:left;
}

.talk1 p:after, .talk1 p:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.talk2 p:after, .talk2 p:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.talk1 p:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 10px;
    top: 30px;
    margin-top: -10px;
}
.talk1 p:before {
    border-color: rgba(64, 64, 64, 0);
    border-right-color: #F9C;
    border-width: 14px;
    top: 30px;
    margin-top: -14px;
}
.talk2 p:after {
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #fff;
    border-width: 10px;
    top: 30px;
    margin-top: -10px;
}
.talk2 p:before {
    border-color: rgba(64, 64, 64, 0);
    border-left-color: #77c7d0;
    border-width: 14px;
    top: 30px;
    margin-top: -14px;
}

.mainbox{position:relative; display:block; width:860px; background-color:#acdee1; border-right:solid 3px #fffb58; border-left:solid 3px #fffb58; margin:0 auto 0 auto; overflow:hidden;}

.omake{position:relative; display:block; width:100%; max-width:860px; background-color:#ffd4e3; margin:0 auto 0 auto; padding-bottom:80px; text-align:center;}

.mainbox
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.mainbox:before, .mainbox:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.mainbox:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

.mainbox_in{width:640px; margin:20px auto 0 auto; text-align:center;}
.mainbox_in2{width:100%; margin:10px auto 0 auto;}

.b_chara{position:absolute; width:246px; top:125px; left:460px;}


.pict{position:relative; margin:15px auto 25px auto;}

#otehon a {
display: block;
overflow: hidden;
height: 0px;
width: 400px;
padding-top: 308px;
background-image: url(../img/02/m1.jpg);
text-align: center;
margin:0 auto 0 auto;
}

#otehon a:hover {
background-image: url(../img/02/m1_on.jpg);
}

#splay a {
display: block;
overflow: hidden;
height: 0px;
width: 400px;
padding-top: 308px;
background-image: url(../img/05/m1.jpg);
text-align: center;
margin:0 auto 0 auto;
}

#splay a:hover {
background-image: url(../img/05/m1_on.jpg);
}

#splay2 a {
display: block;
overflow: hidden;
height: 0px;
width: 400px;
padding-top: 308px;
background-image: url(../img/05/m2.jpg);
text-align: center;
margin:0 auto 0 auto;
}

#splay2 a:hover {
background-image: url(../img/05/m2_on.jpg);
}

#splay3 a {
display: block;
overflow: hidden;
height: 0px;
width: 400px;
padding-top: 308px;
background-image: url(../img/06/m1.jpg);
text-align: center;
margin:0 auto 0 auto;
}

#splay3 a:hover {
background-image: url(../img/06/m1_on.jpg);
}

#splay4 a {
display: block;
overflow: hidden;
height: 0px;
width: 400px;
padding-top: 240px;
background-image: url(../img/06/m2.jpg);
text-align: center;
margin:0 auto 0 auto;
}

#splay4 a:hover {
background-image: url(../img/06/m2_on.jpg);
}


#next a {
display: block;
overflow: hidden;
height: 0px;
width: 643px;
padding-top: 400px;
background-image: url(../img/03/next.jpg);
text-align: center;
margin:0 auto 0 auto;
}

#next a:hover {
background-image: url(../img/03/next_on.jpg);
}


/* Navigation */
#nv{width:861px; height:72px; background-image:url(../img/nv/menu.jpg); background-position:center top; background-repeat:no-repeat; position:relative; z-index:9999; margin:0 auto 0 auto;}
#nv ul{ list-style:none; height:44px; padding-top:13px;}
#nv li{ float:left; text-indent:-9999px; overflow:hidden; height:44px;}


#nv li.nv1 a{ display:block; width:82px; height:44px; background-image:url(../img/nv/nv1.png); margin-left:47px;}
#nv li.nv2 a{ display:block; width:82px; height:44px; background-image:url(../img/nv/nv2.png); margin-left:21px;}
#nv li.nv3 a{ display:block; width:82px; height:44px; background-image:url(../img/nv/nv3.png); margin-left:16px;}
#nv li.nv4 a{ display:block; width:82px; height:44px; background-image:url(../img/nv/nv4.png); margin-left:15px;}
#nv li.nv5 a{ display:block; width:82px; height:44px; background-image:url(../img/nv/nv5.png); margin-left:15px;}
#nv li.nv6 a{ display:block; width:82px; height:44px; background-image:url(../img/nv/nv6.png); margin-left:15px;}
#nv li.nv7 a{ display:block; width:82px; height:44px; background-image:url(../img/nv/nv7.png); margin-left:15px;}
#nv li.nv8 a{ display:block; width:82px; height:44px; background-image:url(../img/nv/nv8.png); margin-left:15px;}





#nv li.nv1 a:hover{ background-position:0 -44px;}
#nv li.nv2 a:hover{ background-position:0 -44px;}
#nv li.nv3 a:hover{ background-position:0 -44px;}
#nv li.nv4 a:hover{ background-position:0 -44px;}
#nv li.nv5 a:hover{ background-position:0 -44px;}
#nv li.nv6 a:hover{ background-position:0 -44px;}
#nv li.nv7 a:hover{ background-position:0 -44px;}
#nv li.nv8 a:hover{ background-position:0 -44px;}



#nv li.nv1r { display:block; width:82px; height:44px; background-image:url(../img/nv/nv1.png); background-position:0 -44px; margin-left:47px; margin-top:-2px;}
#nv li.nv2r { display:block; width:82px; height:44px; background-image:url(../img/nv/nv2.png); background-position:0 -44px; margin-left:19px; margin-top:-1px;}
#nv li.nv3r { display:block; width:82px; height:44px; background-image:url(../img/nv/nv3.png); background-position:0 -44px; margin-left:18px; margin-top:-1px;}
#nv li.nv4r { display:block; width:82px; height:44px; background-image:url(../img/nv/nv4.png); background-position:0 -44px; margin-left:15px; margin-top:-1px;}
#nv li.nv5r { display:block; width:82px; height:44px; background-image:url(../img/nv/nv5.png); background-position:0 -44px; margin-left:15px; margin-top:-1px;}
#nv li.nv6r { display:block; width:82px; height:44px; background-image:url(../img/nv/nv6.png); background-position:0 -44px; margin-left:15px; margin-top:-1px;}
#nv li.nv7r { display:block; width:82px; height:44px; background-image:url(../img/nv/nv7.png); background-position:0 -44px; margin-left:15px; margin-top:-1px;}
#nv li.nv8r { display:block; width:82px; height:44px; background-image:url(../img/nv/nv8.png); background-position:0 -44px; margin-left:15px; margin-top:-1px;}