@charset "utf-8";

@media all and (min-width: 0px) and (max-width: 800px) {
    /* ================================= */
    .PcArea {
        display: none !important;
    }

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

    body {
        background: none;
        font-size: 2.34375vw;
        line-height: 150%;
    }

    strong {
        font-weight: bold;
    }

    .fss {
        font-size: 0.9rem;
        line-height: 160%;
    }

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

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

    .tr {
        text-align: right;
    }

    #wrapper {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        background: none;
    }

    .gabriel img {
        width: 100% !important;
    }

    header {
        width: 100%;
        margin: 0 auto;
    }

    #header {
        width: 100%;
        height: auto;
        max-height: 120px;
        padding-bottom: 2px;
        background-image: url(../../../../ss/daiohg/common/img/bg_header.png);
        // background-image:url(./common/img/header/bg_header.png);
        // border-top:30px solid #9BC900;
        // background-color:#000;
        background-repeat: repeat;
        background-position: top left;
    }

    #header_main {
        width: 96%;
        margin: 0 auto 0 auto;
        background-image: url(../../ss/daiohg/common/img/h_rerease.png);
        background-repeat: no-repeat;
        background-position: 0 0;
    }

    #header_main h1 {
        max-width: 40%;
        height: auto;
        padding: 15px 10px 0 0;
    }

    .logo img {
        width: 100%;
        max-width: 320px;
        vertical-align: middle;
    }

    .ttl {
        width: 95%;
        max-width: 708px;
        margin: auto;
    }

    #header_main h1 {
        float: left;
        width: 332px;
        height: 68px;
        margin: 20px 0 0 0;
        padding: 0;
    }

    #header_main .g_navi01 {
        width: 14%;
        padding: 0 10px 0 0;
        max-width: 99px;
        margin: 30px 0 0 30px;
    }

    #header_main .g_navi01 img {
        width: 100%;
    }

    #header_main .g_navi02 {
        width: 14%;
        padding: 0 10px 0 0;
        max-width: 99px;
        margin: 30px 0 0 0;
    }

    #header_main .g_navi02 img {
        width: 100%;
    }

    #header_main .g_navi03 {
        width: 18%;
        padding: 0 10px 0 0;
        max-width: 130px;
        margin: 30px 0 0 0;
    }

    #header_main .g_navi03 img {
        width: 100%;
    }

    /* --------------------------------------------------------------
kv
-------------------------------------------------------------- */
    #kv {
        height: 80%;
        position: relative;
    }

    #kv img {
        width: 100%;
    }

    .btn_anime_official {
        float: right;
        margin: 10px 32px 60px 0;
        width: 47.52604166666667vw
    }

    /* --------------------------------------------------------------
main_gabriel
-------------------------------------------------------------- */
    #main_gabriel {
        background-color: #fff;
        width: 100%;
        margin: 0 auto;
    }

    /* --------------------------------------------------------------
センターカラム
-------------------------------------------------------------- */
    #clm_gabriel_c {
        float: left;
        width: 100%;
        margin: 0 0px;
    }

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

    #clm_gabriel_c .block {
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
    }

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

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

    #clm_gabriel_c .news img {
        // float:left;
        // width:600px;
        margin: 10px auto;
    }

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

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

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

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

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

    .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,
    #clm_gabriel_c .news .pic-right {
        // float:left;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    #clm_gabriel_c .news .pic-left img,
    #clm_gabriel_c .news .pic-right img {
        max-width: 500px;
    }

    #clm_gabriel_c .news p {
        width: 100%;
        float: right;
        margin-bottom: 1rem;
    }

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

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

    #clm_ga #clm_gabriel_c .news p.bg-clr-left {
        width: 95%;
        float: left;
        background-color: #FFEADF;
        border: 1px solid #FFCFBF;
        padding: 20px 10px;
        margin: 10px auto;
    }

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

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

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

    #clm_gabriel_c .news-date {
        width: 100%;
        margin: 0px auto 10px auto;
        overflow: hidden;
        text-align: right;
        color: #878787;
        font-size: 16px;
        border-bottom: 2px dotted #ccc;
    }

    #clm_gabriel_c .news-btn {
        max-width: 503px;
        margin: 0 auto 30px auto;
        overflow: hidden;
    }

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

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

    dl#news h4 {
        text-align: center;
        // font-weight:bold;
        font-size: 4.6875vw;
        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;
        white-space: nowrap;
    }

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

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

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

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

    #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 {
        max-width: 162px;
        height: 96px;
        margin: -110px 9px 0 4px;
        display: block;
    }

    #chara-btn ul li a img {
        max-width: 162px;
    }

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

    .browsing-img {
        width: 54%;
        float: right;
    }

    .browsing-img img {
        width: 100%;
    }

    .browsing-btns {
        width: 46%;
        float: left;
    }

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

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

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

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

    .browsing-btns #logos-btn img {
        margin-bottom: 10px;
    }

    .browsing-btns #logos-btn ul li {
        margin: 10px 0 0 0;
        padding: 10px 0;
        text-align: center;
        border-top: 1px dotted #ddd;
        font-size: 80%;
        line-height: 140%;
    }

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

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

    #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;
        color: inherit;
        font-size: 18px;
    }

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

    #published-info-btn ul li a img.btn {
        max-width: 194px;
    }

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

    #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: 2px solid #000;
        border-radius: 6px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        padding: 0;
        width: 70%;
    }

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

    #clm_gabriel_c .daiohg-top a img {
        max-width: 69vw;
        margin: 20px auto;
    }

    /* Twitter */
    .blue_line {
        border-radius: 4px;
        padding: 5px;
        border: 2px solid #1A9FE8;
        max-width: 700px;
        margin: 0 20px 40px 20px;
    }

    /* 動画 */
    .video {
        padding: 20px;
        text-align: center;
    }

    .video a {
        color: #EA5167;
    }

    /* --------------------------------------------------------------
clm_r
-------------------------------------------------------------- */
    #clm_r .bg_clm_R_m {
        width: 100%;
        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;
    }

    #footer {
        width: 100%;
        border-top: none;
        background: #525252;
        text-align: center;
        color: #fff;
        padding: 20px 0;
        // margin-top:60px;
    }

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

/*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;
    }
}