@charset"UTF-8";#top_title h2.sp,#top .contents .inner #concept .sp,#story .sp,#heroine .sp{ display:none}#top{    position:relative;    width:100%;    min-height:2200px;    background-color:#fff}#top .mv_wrap{    position:absolute;    width:100%;    height:1266px;    z-index:1;    background-image:url(../images/top_bg.jpg);    background-repeat:no-repeat;    background-position:top center;    background-size:cover}#top .mv_wrap img{    position:absolute;    z-index:2;    top:0;    width:1336px;    height:1266px;    left:50%;    margin-left:-668px}#top .mv_wrap::before{    position:absolute;    display:block;    content:"";    height:521px;    width:100%;    bottom:0;    left:0;    background-image:url(../images/top_mask.png);    background-repeat:no-repeat;    background-position:center;    z-index:3}#top_title{    height:960px;    z-index:5}#g_nav li.new:after{    position:absolute;    z-index:20;    content:'';    background-image:url(../images/nav_new.png);    background-repeat:no-repat;    width:35px;    height:21px;    top:-10px;    left:-10px;    -webkit-animation:new_anime 1s ease-in-out infinite alternate;    -moz-animation:new_anime 1s ease-in-out infinite alternate;    animation:new_anime 1s ease-in-out infinite alternate}@-webkit-keyframes new_anime{    0%{opacity:0.4}    100%{opacity:1}}@-moz-keyframes new_anime{    0%{opacity:0.4}    100%{opacity:1}}@keyframes new_anime{    0%{opacity:0.4}    100%{opacity:1}}#top_title h1{   text-indent:-9999px;    overflow:hidden}#top_title h2.pc{    position:absolute;    width:208px;    height:160px;    top:640px;    left:18px;    z-index:5}#top_title .tw{    position:absolute;    top:830px;    left:50px;    z-index:5}#top_title .mu_btn{    position:absolute;    right:0;    bottom:-70px;    z-index:6;    width:100%;    max-width:374px;    height:auto;    box-shadow:2px 2px 5px #000;    transform:rotate(10deg)}#top_title .moege{    position:absolute;    z-index:5;    right:0;    bottom:160px}#top .contents{    width:100%;    z-index:10;    position:relative;    padding-top:-960px}#top .contents .inner{    z-index:10}#top .contents .inner #news{    width:367px;    height:140px;    position:relative}#top .contents .inner #news h3{    width:73px;    height:23px;    margin-bottom:13px}#top .contents .inner #news .tw_btn{    position:absolute;    z-index:10;    width:37px;    height:38px;    top:-5px;    left:85px}#top .contents .inner #news dl{    overflow:auto;    border-top:solid 1px #cecece;    border-bottom:solid 1px #cecece;    width:367px;    height:97px}#top .contents .inner #news dl dt{    font-size:1.2rem;    font-style:italic;    margin:5px 0}#top .contents .inner #news dl dd{    word-break:break-all;    margin-bottom:10px}#top .contents .inner #sp_bana{    margin-top:36px}#top .contents .inner #sp_bana a{    border:solid 3px #cecece;    display:inline-block;    transition-duration:0.5s}#top .contents .inner #sp_bana a:hover{    border-color:#80edf0}#top .contents .inner #sp_bana li{    float:left;    width:225px;    height:102px;    margin:7px}#top .contents .inner #sp_bana p{    margin-bottom:7px;    text-align:center}#top .contents .inner #concept{    margin:76px 0 0 0}#top .contents .inner #concept h3{    text-align:center;    margin-bottom:30px}#top .contents .inner #concept .pc{    position:relative;    width:914px;    height:427px;    margin:0 auto}#top .contents .inner #concept .pc .text{    position:absolute;    z-index:10;    top:24px;    left:0;    width:562px;    height:403px}#top .contents .inner #concept .bg_wrap{    position:relative;    overflow:hidden;    width:488px;    height:384px;    display:inline-block;    margin-left:426px}#top .contents .inner #concept .bg_img{    position:absolute;    top:0;    left:-582px;    width:1070px;    height:384px;    background-image:url(../images/concept_bg.jpg); background-repeat:no-repeat}.slide_l{ -webkit-animation:slide_co 8s linear 1; -moz-animation:slide_co 8s linear 1; -o-animation:slide_co 8s linear 1; animation:slide_co 8s linear 1}@-webkit-keyframes slide_co{0% {left:0px}100%{left:-582px}}@-moz-keyframes slide_co{0% {left:0px}100%{left:-582px}}@-o-keyframes slide_co{0% {left:0px}100%{left:-582px}}@keyframes slide_co{0% {left:0px}100%{left:-582px}}#top .contents .inner #concept .emote{ margin:73px auto 0 auto; width:870px}#top .contents .inner #concept .emote .img{ float:left; width:420px; position:relative}#top .contents .inner #concept .emote .img .cs{ position:absolute; width:331px; height:95px; z-index:12; top:-10px; left:-50px}#top .contents .inner #concept .emote .img a{ transition-duration:0.5s}#top .contents .inner #concept .emote .img a:hover{ opacity:.7}#top .contents .inner #concept .emote .img .thumb{ box-shadow:5px 5px 0px #a7a7a7}#top .contents .inner #concept .emote .text{ float:right; width:432px; margin-left:18px}#top .contents .inner #concept .emote .text h4{ margin:30px 0}#story{ position:relative; width:100%; height:730px}#story .bg{    position:absolute;    z-index:1;    width:100%;    height:730px;    top:0;    left:0;    background-image:url(../images/story_bg.jpg);    background-repeat:no-repeat;    background-position:center}.bg_slide{    animation:slide 0.8s linear}@keyframes slide{  0%{transform:translate(2000px,0)}  100%{    transform:translate(0,0)}}#story::before{    position:absolute;    display:block;    content:"";    height:110px;    width:100%;    top:-1px;    left:0;    background-image:url(../images/story_mask_top.png);    background-repeat:no-repeat;    background-position:center;    z-index:2}#story::after{    position:absolute;    display:block;    content:"";    height:113px;    width:100%;    bottom:-1px;    left:0;    background-image:url(../images/story_mask_bottom.png); background-repeat:no-repeat; background-position:center; z-index:2}#story .inner{ z-index:3; padding:97px 0}#story h1{ margin-bottom:10px}#story ul{ position:relative}#story ul li{ margin-bottom:8px; overflow:hidden; width:100%}.text_slide{ animation-duration:2.5s; animation-name:slide_te}@keyframes slide_te{ 0%{  width:0} 100%{ width:100%}}#story ul li:nth-child(3){margin-bottom:30px}#story ul li:nth-child(7){margin-bottom:30px}#story ul li:nth-child(10){margin-bottom:18px}#heroine{    position:relative;    width:100%;    height:1112px;    background-image:url(../images/heroine_bg.jpg); background-repeat:no-repeat; background-position:right top; z-index:10}#heroine .inner{ height:1112px}#heroine .img{ position:absolute; z-index:2; width:449px; height:1104px; left:35px; bottom:0}#heroine .left{ position:relative; z-index:3; width:500px; height:598px; margin:38px 0 0 460px}#heroine .left h1{ text-align:right; margin-bottom:74px}#heroine .left h2{ margin:44px 0 17px 22px}#heroine .left h3{ margin-left:34px}#heroine .left .words{ width:471px; position:relative}#heroine .left .words li{ height:37px; margin-bottom:23px; overflow:hidden; width:100%}#heroine .left .voice{ margin-left:28px}#heroine .left .voice li{ float:left; margin:6px; height:45px}#heroine .left .voice li:nth-child(1){ padding-top:10px}#heroine .left .voice li div{ height:45px; width:45px; border-radius:50%; display:block; transition-duration:0.5s; border:solid 3px #252525}#heroine .left .voice li.normal div:hover{ border-color:#58bafc; background-color:#58bafc}#heroine .left .voice li.h div:hover{ border-color:#f56fcb; background-color:#f56fcb}#heroine .text{ position:relative; z-index:3}#heroine .text li{ margin-bottom:7px; overflow:hidden; width:100%}#heroine .text li:nth-child(2){ margin-bottom:35px}#heroine .text li:nth-child(4){ margin-bottom:35px}#gallery{    position:relative;    width:100%;    min-height:434px;    z-index:50;    background:linear-gradient(#49cbe9,#fcb4e6)}#gallery::before{    position:absolute;    display:block;    content:"";    height:150px;    width:100%;    top:-149px;    left:0;    background-image:url(../images/gallery_mask_top.png);    background-repeat:no-repeat;    background-position:center;    z-index:50}#gallery::after{    position:absolute;    display:block;    content:"";    height:146px;    width:100%;    bottom:-146px;    left:0;    background-image:url(../images/gallery_mask_bottom.png);    background-repeat:no-repeat;    background-position:center;    z-index:50}#gallery h1{    margin-bottom:40px}#gallery ul{    width:912px;    margin:0 auto}#gallery li{    position:relative;    float:left;    margin:10px;    width:200px;    height:113px;    border:2px solid #cecece;    transition-duration:0.5s}#gallery li:hover{    border-color:#fff}#gallery li.new:after{    position:absolute;    z-index:20;    content:'';    background-image:url(../images/gallery_new.png); background-repeat:no-repat; width:56px; height:32px; top:-10px; left:-10px}.cg_inline{ background-color:#fff; overflow:auto; border:solid 1px #fff;  height:450px}#spec{    position:relative;    width:100%;    padding:180px 0 80px 0;    background-image:url(../images/spec_bg.jpg);    background-repeat:no-repeat;    background-size:cover;    background-attachment:fixed}#spec h1{    }#spec h2{    text-align:center;    margin:30px auto}#spec table{    float:left;    width:460px;    margin:30px 10px;    border-collapse:separate;    border-spacing:8px}#spec table th{    width:120px;    border-radius:5px;    background-color:rgba(255,255,255,0.8);    text-align:center;    padding:5px}#spec table td{    padding:5px;    color:#fff;    text-shadow:#000 1px 1px 2px,#000 -1px 1px 2px,    #000 1px -1px 2px,#000 -1px -1px 2px}@media (max-width:480px){        #top_title h2.pc,#top .contents .inner #concept .pc,#story .bg,#story .pc,#heroine .text,#heroine .left .words,#heroine .img{        display:none}        #top .sp_h2,#top .contents .inner #concept .sp,#story .sp,#heroine .sp{        display:block}        #top{        min-height:auto}       #top .mv_wrap{    position:relative;    height:auto}        #top .mv_wrap img{    position:relative;    width:100%;    height:auto;    left:0;    margin:0 auto}        #g_nav li.new:after,#top .mv_wrap::before{    content:none}        #top_title{        height:auto}        #top .sp_h2{        position:absolute;        width:100%;        bottom:-1px;        left:0;        text-align:center;        z-index:10}    #top_title .tw{        position:relative;        top:0;        left:0}        #top_title .mu_btn{        box-shadow:none;        transform:none;        position:relative;        bottom:0;        margin:1.5rem auto}        #top_title .moege{        bottom:0;        top:-100px}        #top .content{        background-color:#fff;        margin-top:10px}    #top .contents .inner #news{        width:100%;        height:auto;        margin:10px 0}    #top .contents .inner #news dl{        overflow:auto;        border-top:solid 1px #cecece;        border-bottom:solid 1px #cecece;        width:100%;        height:100px}    #top .contents .inner #sp_bana{        width:100%;        margin-top:20px}    #top .contents .inner #sp_bana li{        width:48%;        height:auto;        margin:1%}    #top .contents .inner #concept{        margin:50px 0 0 0}    #top .contents .inner #concept h3{        margin-bottom:20px}    #top .contents .inner #concept .emote{        margin:50px auto 0 auto;        width:100%}    #top .contents .inner #concept .emote .img{        float:none;        width:100%}    #top .contents .inner #concept .emote .img .cs{        left:-10px}    #top .contents .inner #concept .emote .text{        float:none;        width:100%;        margin-left:0;        margin-bottom:20px}    #top .contents .inner #concept .emote .text h4{        margin:10px 0}        #story{        height:auto;        background-image:url(../images/story_bg_sp.jpg); background-repeat:no-repeat; background-position:right; background-size:cover}  #heroine{ height:auto; background-image:none} #heroine .inner{ height:auto; padding-bottom:120px} #heroine .left{ position:relative; width:100%; height:auto; margin:0} #heroine .left h1{ text-align:left; margin-bottom:20px} #heroine .left h2{ margin:0 0 10px 0} #heroine .left h3{ margin-left:0} #heroine .left .voice{ margin-left:0; margin-bottom:20px} #heroine .left .voice li:nth-child(1){ padding-top:0; width:100%; height:auto}  #heroine .sp{ margin-top:10px}  #heroine .sp p{ margin-bottom:10px}  #heroine .sp p:last-child{ margin-bottom:0} #gallery ul{ width:100%} #gallery li{ float:left; margin:1%; width:46%; height:auto} .cg_inline{ height:auto}  #spec table{ float:none; width:100%; margin:30px 0; border-collapse:collapse}  #spec table td,#spec table th{ display:block; padding:5px 1%} #spec table th{ width:98%; border-radius:0; background-color:rgba(101,148,173,0.8); text-align:center; color:#fff; border-top:solid 1px #536a79; border-bottom:solid 1px #536a79} #spec table td{ width:98%; color:#000; background-color:rgba(255,255,255,0.8); text-shadow:none; text-align:center} }