@charset "utf-8";

.fc-pink {
    color: #e95167;
}

ul.attention {
    color: #666;
    font-size: 12px;
}

ul.attention li {
    padding-left: 1em;
    text-indent: -1em;
    margin: 0.4rem 0;
    line-height: 140%;
}

.dn {
    display: none;
}

#wrapper .modal {
    display: none;
}

#clm_r .bg_clm_R_m .blue_line {
    border: 1px solid #33CBFF;
    border-top: none;
    width: 218px;
}

@media screen and (min-width: 801px) {
    .PcArea{display:block !important;}
    .SpArea{display:none !important;}
    #wrapper * {
        box-sizing: content-box;
    }

    /* ================================= */
    .PcArea {
        display: block;
    }

    .SpArea {
        display: none;
    }

    .indent {
        padding-left: 1em;
        text-indent: -1em;
    }

    body {
        background: none;
        font-size: 18px;
        line-height: 150%;
    }

    strong {
        font-weight: bold;
    }

    hr {
        border: none;
        margin-top: 80px;
    }

    #wrapper {
        width: 1000px;
        margin: 0 auto;
        overflow: hidden;
        background: transparent url(../img/kv_pc.png) no-repeat top left;
    }

    .fss {
        font-size: 1rem;
    }

    .att {
        padding-left: 1rem;
        text-indent: -1rem;
    }

    span.cap {
        padding-left: 1rem;
        text-indent: -1rem;
        display: block;
        font-size: 1rem;
    }

    h4.orng {
        font-size: 1.6rem;
        font-weight: bold;
        margin-bottom: 16px;
        color: #EA7024;
        text-align: center;
    }

    .tr {
        text-align: right;
    }

    #wrapper a {
        text-decoration: underline;
    }

    #wrapper a:hover img {
        opacity: 0.8;
    }

    #wrapper a:link {
        color: #7AA101;
    }

    /* --------------------------------------------------------------
kv
-------------------------------------------------------------- */
    #kv {
        height: 411px;
    }

    #kv {
        position: relative;
        height: 411px;
    }

    #kv .btn_anime_official {
        position: absolute;
        bottom: 20px;
        right: 20px;
        width: 365px;
        height: 80px;
        text-align: center;
    }

    #kv .btn_anime_official a:hover img {
        opacity: 0.8
    }

    /* --------------------------------------------------------------
main_gabriel
-------------------------------------------------------------- */
    #main_gabriel {
        background-color: #F8F8F8;
        width: 1000px;
    }

    /* --------------------------------------------------------------
gnavi
-------------------------------------------------------------- */
    #gnavi {
        height: 59px;
        margin-bottom: 40px;
        text-align: center;
        background-image: url(../img/gnavi_bg.png);
        width: 100%;
    }

    #gnavi ul {
        display: -webkit-box;
        /*--- Androidブラウザ用 ---*/
        display: -ms-flexbox;
        /*--- IE10 ---*/
        display: -webkit-flex;
        /*--- safari（PC）用 ---*/
        display: flex;
        -webkit-box-pack: justify;
        /*--- Androidブラウザ用 ---*/
        -ms-flex-pack: justify;
        /*--- IE10 ---*/
        // -webkit-justify-content:space-between;/*--- safari（PC）用 ---*/
        -webkit-justify-content: center;
        /*--- safari（PC）用 ---*/
        // justify-content:space-between;
        justify-content: center;
    }

    #gnavi ul li {
        width: 185px;
        height: 49px;
    }

    #gnavi ul li a {
        width: 185px;
        height: 49px;
        display: block;
        background-position: 0 0;
        overflow: hidden;
        text-indent: 100%;
        white-space: nowrap;
    }

    #gnavi ul li a.news {
        background-image: url(../img/gnavi_01.png);
    }

    #gnavi ul li a.news:hover {
        background-position: 0 49px;
    }

    #gnavi ul li a.introduce {
        background-image: url(../img/gnavi_02.png);
    }

    #gnavi ul li a.introduce:hover {
        background-position: 0 49px;
    }

    #gnavi ul li a.browsing {
        background-image: url(../img/gnavi_03.png);
    }

    #gnavi ul li a.browsing:hover {
        background-position: 0 49px;
    }

    #gnavi ul li a.published-info {
        background-image: url(../img/gnavi_04.png);
    }

    #gnavi ul li a.published-info:hover {
        background-position: 0 49px;
    }

    /* --------------------------------------------------------------
センターカラム
-------------------------------------------------------------- */
    #clm_gabriel_c {
        float: left;
        width: 730px;
        margin: 0 10px 10px 10px;
        padding: 10px 0;
        background-color: #fff;
    }

    #clm_gabriel_c h2 {
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }

    #clm_gabriel_c .block {
        width: 700px;
        margin: 0 auto 60px auto;
        overflow: hidden;
    }

    /* ニュース.news */
    #clm_gabriel_c .news {
        overflow: hidden;
        margin: 20px auto 0px auto;
    }

    #clm_gabriel_c .news h3 {
        color: #EA5167;
        font-size: 1.8rem;
        line-height: 150%;
        padding: 0px 0 0px 10px;
    }

    #clm_gabriel_c .news img {
        // float:left;
    }

    #clm_gabriel_c .news .txt-center {
        width: 95%;
        margin: 0 auto;
        padding: 10px;
    }

    #clm_gabriel_c .news .txt-left {
        width: 380px;
        float: left;
        margin: 0 auto;
        padding: 0 0 10px 0;
    }

    #clm_gabriel_c .news .txt-right {
        width: 380px;
        float: right;
        margin: 0 auto;
        padding: 0 0 10px 0;
    }

    /* ニュース新.newslist */
    #clm_gabriel_c .newslist {
        margin: 50px 0;
    }

    #clm_gabriel_c .newslist li {
        border-bottom: 1px solid #BABABA;
        padding-bottom: 21px;
        margin-bottom: 21px;
    }

    #clm_gabriel_c .newslist li a {
        text-decoration: none;
    }

    #clm_gabriel_c .newslist li a:hover {
        opacity: 0.8;
    }

    #clm_gabriel_c .newslist li .date {
        font-size: 16px;
        line-height: 1;
        margin-bottom: 10px;
        color: #000000;
    }

    #clm_gabriel_c .newslist li .title {
        font-size: 16px;
        color: #EA5167;
        font-size: 24px;
        line-height: 32px;
    }

    .movie-wrap {
        border: 10px solid #fff;
        position: relative;
        padding-bottom: 44.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }

    .movie-wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #clm_gabriel_c .news .pic-left {
        float: left;
        width: 300px;
        margin: 0 auto;
    }

    #clm_gabriel_c .news .pic-left img {
        max-width: 300px;
    }

    #clm_gabriel_c .news .pic-right {
        float: right;
        width: 300px;
        margin: 0 auto;
    }

    #clm_gabriel_c .news .pic-right img {
        max-width: 300px;
    }

    // #clm_gabriel_c .news p {
    // 		width:380px;
    // 		float:right;
    // 		margin-bottom:1rem;
    // 		}
    #clm_gabriel_c .news p.bg-clr-center {
        width: 95%;
        background-color: #FFEADF;
        border: 1px solid #FFCFBF;
        padding: 10px;
        margin: 10px auto;
    }

    #clm_gabriel_c .news .bg-clr-center-gry {
        width: 95%;
        background-color: #F5F5F5;
        border: 1px solid #ccc;
        padding: 16px;
        margin: 16px auto;
    }

    #clm_gabriel_c .news p.bg-clr-left {
        width: 356px;
        float: left;
        background-color: #FFEADF;
        border: 1px solid #FFCFBF;
        padding: 10px;
    }

    #clm_gabriel_c .news p.bg-clr-right {
        width: 356px;
        float: right;
        background-color: #FFEADF;
        border: 1px solid #FFCFBF;
        padding: 10px;
        margin: 0 0 10px 0;
    }

    #clm_gabriel_c .news-copyright {
        width: 100%;
        margin: 0px auto;
        overflow: hidden;
        text-align: center;
        color: #878787;
        font-size: 12px;
    }

    #clm_gabriel_c .news-fss {
        width: 100%;
        margin: 0px auto;
        color: #878787;
        font-size: 12px;
        line-height: 180%;
        display: inline-block;
    }

    #clm_gabriel_c .news-date {
        width: 100%;
        margin: 0px auto 20px auto;
        overflow: hidden;
        text-align: right;
        color: #878787;
        font-size: 14px;
        border-bottom: 1px solid #ccc;
    }

    #clm_gabriel_c .news-btn {
        width: 413px;
        margin: 10px auto 20px auto;
        overflow: hidden;
    }

    #clm_gabriel_c .news-btn-list {
        width: 282px;
        margin: 60px auto 0px auto;
        overflow: hidden;
    }

    /* ニュース一覧 */
    dl#news {
        width: 99%;
        border: 3px solid #fff;
        margin: 20px auto;
        font-size: 1rem;
        background-color: #f9f9f9;
        color: #333
            /*
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    */
            border:1px dotted #ccc;
    }

    dl#news h4 {
        text-align: center;
        // font-weight:bold;
        font-size: 1.4rem;
        padding: 16px 0 0 0;
    }

    dl#news dt {
        clear: left;
        float: left;
        margin: 0;
        padding: 10px 0 10px 0.5em;
        width: 7em;
        line-height: 1.5em;
    }

    dl#news dd {
        margin: 0 10px;
        padding: 10px 0.5em 10px 7em;
        border-bottom: 1px dotted #fff;
        line-height: 1.5em;
    }

    .gabriel dl#news a {
        padding: 5px 20px 5px 0;
        color: #333;
        text-decoration: underline;
    }

    .gabriel dl#news a:hover {
        text-decoration: none;
    }

    /* 作品紹介.introduce */
    #clm_gabriel_c .introduce {
        overflow: hidden;
        margin: 30px auto 0 auto;
    }

    #chara-btn {
        text-align: center;
        width: 100%;
    }

    #chara-btn ul {
        display: -webkit-box;
        /*--- Androidブラウザ用 ---*/
        display: -ms-flexbox;
        /*--- IE10 ---*/
        display: -webkit-flex;
        /*--- safari（PC）用 ---*/
        display: flex;
        -webkit-box-pack: justify;
        /*--- Androidブラウザ用 ---*/
        -ms-flex-pack: justify;
        /*--- IE10 ---*/
        // -webkit-justify-content:space-between;/*--- safari（PC）用 ---*/
        -webkit-justify-content: center;
        /*--- safari（PC）用 ---*/
        // justify-content:space-between;
        justify-content: center;
    }

    #chara-btn ul li a {
        width: 162px;
        height: 56px;
        margin: -80px 9px 0 4px;
        display: block;
    }

    /* 試し読み.browsing */
    #clm_gabriel_c .browsing {
        overflow: hidden;
        margin: 20px auto 0px auto;
    }

    .browsing-img {
        float: right;
        width: 375px;
        height: 537px;
        background-image: url(../img/block03_img_06.png);
        background-position: 50% 50%;
    }

    .browsing-btns {
        float: left;
    }

    .browsing-btns #browsing-btn {
        text-align: center;
        width: 300px;
    }

    .browsing-btns #browsing-btn ul li {
        margin-bottom: 10px;
    }

    .browsing-btns #browsing-btn ul li a {
        width: 300px;
        height: 68px;
        margin: 0px 9px 0 4px;
        display: block;
    }

    .browsing-btns #logos-btn {
        text-align: center;
        width: 300px;
    }

    .browsing-btns #logos-btn ul li {
        margin: 20px 0 0 0;
        padding: 20px 0;
        text-align: center;
        border-top: 1px dotted #ddd;
        white-space: nowrap;
    }

    .browsing-btns #logos-btn ul li a {
        margin: 0;
        overflow: hidden;
    }

    /* 既刊紹介. */
    #clm_gabriel_c .published-info {
        overflow: hidden;
        margin: 20px auto 0px auto;
    }

    #published-info-btn {
        text-align: center;
        width: 100%;
    }

    #published-info-btn ul {
        display: -webkit-box;
        /*--- Androidブラウザ用 ---*/
        display: -ms-flexbox;
        /*--- IE10 ---*/
        display: -webkit-flex;
        /*--- safari（PC）用 ---*/
        display: flex;
        -webkit-box-pack: justify;
        /*--- Androidブラウザ用 ---*/
        -ms-flex-pack: justify;
        /*--- IE10 ---*/
        -webkit-justify-content:space-between;/*--- safari（PC）用 ---*/
        /* -webkit-justify-content: center; */
        /*--- safari（PC）用 ---*/
        justify-content:space-between;
        /* justify-content: center; */
        font-weight: bold;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    #published-info-btn ul li {
        width: 340px;
        /* margin-right: 3px; */
        padding: 0;
    }

    #published-info-btn ul li img.pic {
        max-width: 340px;
        width: 100%;
        border: 2px solid #ebebeb;
        box-sizing: border-box;
    }

    #published-info-btn ul li h4 {
        padding: 0 0 14px 0;
    }

    #published-info-btn ul li a {
        /* margin: 0px 9px 0 0px; */
    }

    #published-info-btn ul li:nth-child(1) {
        /* margin-right: 10px; */
    }

    #published-info-btn ul li h4 {
        color: inherit;
        font-size: 18px;
    }

    #published-info-btn ul li.c01 {
        color: #E44F65;
    }

    #published-info-btn ul li.c01 a.btn {
        background-color: #E44F65;
    }

    #published-info-btn ul li.c02 {
        color: #40A7D8;
    }

    #published-info-btn ul li.c02 a.btn {
        background-color: #40A7D8;
    }

    #published-info-btn ul li.c03 {
        color: #F69A00;
    }

    #published-info-btn ul li.c03 a.btn {
        background-color: #F69A00;
    }

    #published-info-btn ul li.c04 {
        color: #8F81BC;
    }

    #published-info-btn ul li.c04 a.btn {
        background-color: #8F81BC;
    }

    #published-info-btn ul li.c05 {
        color: #6dbb44;
    }

    #published-info-btn ul li.c05 a.btn {
        background-color: #6dbb44;
    }

    #published-info-btn ul li.c06 {
        color: #b96599;
    }

    #published-info-btn ul li.c06 a.btn {
        background-color: #b96599;
    }

    #published-info-btn ul li.c07 {
        color: #83959d;
    }

    #published-info-btn ul li.c07 a.btn {
        background-color: #83959d;
    }

    #published-info-btn ul li.c08 {
        color: #e72328;
    }

    #published-info-btn ul li.c08 a.btn {
        background-color: #e72328;
    }

    #published-info-btn ul li.c09 {
        color: #fabd00;
    }

    #published-info-btn ul li.c09 a.btn {
        background-color: #fabd00;
    }

    #published-info-btn ul li.c10 {
        color: #ed6d56;
    }

    #published-info-btn ul li.c10 a.btn {
        background-color: #ed6d56;
    }

    #published-info-btn ul li.c11 {
        color: #7a5aa2;
    }

    #published-info-btn ul li.c11 a.btn {
        background-color: #7a5aa2;
    }

    #published-info-btn ul li.c12 {
        color: #9cc912;
    }

    #published-info-btn ul li.c12 a.btn {
        background-color: #9cc912;
    }

    #published-info-btn ul li.c00 {
        color: #7f4c42;
    }

    #published-info-btn ul li.c00 a.btn {
        background-color: #7f4c42;
    }

    #published-info-btn ul li a.btn {
        /* display: inline-block; */
        text-decoration: none;
        margin: 0px auto 10px auto;
        border: 3px solid #000;
        border-radius: 6px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        /* padding: 0.6rem; */
        width: 60%;
    }

    /* 電撃だいおうじ トップへボタン. */
    #clm_gabriel_c .daiohg-top {
        overflow: hidden;
        margin: 100px auto 40px auto;
        text-align: center;
    }

    #clm_gabriel_c .daiohg-top img {
        margin: auto;
    }

    /* 動画 */
    .video {
        margin: 0 0 20px 0;
        padding: 0 0 5px 0;
        font-size: 14px;
        line-height: 140%;
        text-align: center;
        width: 220px;
    }

    .video img {
        max-width: 220px;
        width: 100%;
    }

    #wrapper .video a {
        padding-top: 4px;
        color: #EA5167;
        display: inline-block;
        text-decoration: underline;
    }

    #clm_r .bg_clm_R_m .shadow {
        width: 220px;
        height: 29px;
        background: transparent url(../img/bg_clm_R_tshadow.png) repeat-y top left;
    }

    /* --------------------------------------------------------------
clm_r
-------------------------------------------------------------- */
    #clm_r .bg_clm_R_m {
        width: 235px;
        background: none;
        padding: 8px 0px 8px 0px;
        overflow: hidden;
    }

    #back-top {
        position: fixed;
        bottom: 30px;
        right: 2%;
        z-index: 1;
    }

    #back-top span {
        display: block;
    }

    /* ================================= */
}

/*BR*/
.spbr {
    display: none;
}

.pcbr {
    display: block;
}

@media only screen and (max-width: 800px) {
    .spbr {
        display: block;
    }

    .pcbr {
        display: none;
    }
}

/*align*/
.pc-tl {
    text-align: left;
}

.pc-tc {
    text-align: center;
}

.pc-tr {
    text-align: right;
}

@media only screen and (max-width: 800px) {
    .sp-tl {
        text-align: left;
    }

    .sp-tc {
        text-align: center;
    }

    .sp-tr {
        text-align: right;
    }
}

.modaal-content-container iframe {
    width: 100%;
    display: block;
}