@charset "utf-8";

body {
    width: 100%;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif;
}

#main {
    margin: 0 auto;
    width: 100%;
    min-width: 960px;
    position: relative;
    background-color: #999;/* 確認用 */
}

.subHead {
    background: url('../img/comics/bg_head_camo.gif') repeat-x left top;
    position: relative;
    z-index: 1;
}
.subHead .inner {
    width: 960px;
    margin: 0 auto;
    position: relative;
    height: 130px;
    overflow: hidden;
}
.subHead .inner h1 {
    position: absolute;
    left: 0;
    top: 15px;
}
.subHead .inner h2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    width: 332px;
    bottom: 0;
    height: 53px;
}

.article {
    background: url('../img/comics/bg_comic_ptrn.gif') repeat left top;
    position: relative;
    z-index: 2;
}
.article .section {
    background: url('../img/comics/line.png') repeat-x left -5px;
}
.article .section .inner {
    width: 960px;
    margin: 0 auto;
    padding: 40px 0 30px;
}
.article .section .inner h3 {
    background: url('../img/comics/bg_comic_ttl.png') no-repeat center center;
    width: 954px;
    height: 82px;
    text-align: center;
    margin: 0 auto;
}
.article .section .inner h3 img {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    display: block;
    margin: 0 auto;
}
.article .section .inner .comicImg {
    text-align: center;
    margin: 15px auto 15px;
}
.article .section .inner .panel {
    position: relative;
    width: 671px;
    height: 471px;
    margin: 0 auto;
    text-align: center;
}
#comic01 .panel { display: none; }
.article .section .inner .panel .movTtl {
    position: absolute;
    z-index: 10;
    top: 27px;
    left: 0;
    right: 0;
}
.article .section .inner .panel .ytWrap {
    position: relative;
    z-index: 2;
    top: 116px;
    text-align: center;
}
.article .section .inner .panel .ytWrap > div {
    width: 480px;
    height: 300px;
    margin: 0 auto;
}
.article .section .inner .panel .ytWrap > div img {
    width: 480px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
}
.article .section .inner .panel .ytWrap iframe {
    width: 480px;
}
.article .section .inner .panel .frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}
.article .section .inner .panel .frame::after {
    content: " ";
    display: inline-block;
    width: 80px;
    height: 60px;
    background: url(../img/ytplayBtn.png) no-repeat center center;
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 60px;
    bottom: 0;
    right: 0;
    margin: auto;
}
.article .section .inner .btnArea {
    width: 936px;
}
.article .section .inner .btnArea .prev { float: left; }
.article .section .inner .btnArea .next { float: right; }
.slideWrap {
    position: relative;
    overflow: hidden;
}
.slideBox {
    width: 960px;
    text-align: center;
    padding: 0 10px;
    box-sizing: border-box;
}
.comicImg {
    position: relative;
    overflow: hidden;
    width: 960px;
    height: 1316px;
    margin: 0 auto;
}
.comicImg li img {
    width: 100%;
    height: auto;
    border: 2px solid #fff;
    box-sizing: border-box;
    border-radius: 10px;
}
.paging {
    position: relative;
    overflow: hidden;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 960px;
    height: 116px;
    margin: 0 auto;
}
input[type=radio] {
    display: none;
}
#page01 {
    position: absolute;
    left: 0;
    top: 0;
}
#page02 {
    position: absolute;
    left: 960px;
    top: 0;
}
#page03 {
    position: absolute;
    left: 1920px;
    top: 0;
}
#slider1:checked ~ .slideArea {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}
#slider2:checked ~ .slideArea {
    -webkit-transform: translateX(-960px);
        -ms-transform: translateX(-960px);
            transform: translateX(-960px);
}
#slider3:checked ~ .slideArea {
    -webkit-transform: translateX(-1920px);
        -ms-transform: translateX(-1920px);
            transform: translateX(-1920px);
}

/* ------------------------------
    バックナンバー
------------------------------ */
#aside  {
    background-image: url('../img/comics/line.png'), url('../img/comics/bg_bk_ptrn.gif');
    background-position: left -5px, left top;
    background-repeat: repeat-x, repeat;
    box-shadow: 0px -1px 2px #333, 0px 0px 0px #666, 0px 0px 0px #666, 0px 0px 0px #666
}
#aside .inner {
    width: 960px;
    margin: 0 auto;
    padding: 40px 0 10px;
    text-align: center;
}
#aside .inner .bkList {
    margin-top: 20px;
}
#aside .inner .bkList li {
    margin-bottom: 10px;
    float: left;
    padding: 0 4px;
}

/* ------------------------------
    FOOTER
------------------------------ */
.pageTop {
    position: fixed;
    bottom: 10px;
    right: 10%;
    z-index: 8888;
}
#footer {
    background: url('../img/bg_footer.png') repeat-x left top;
    padding: 30px;
    font-size: 16px;
}
#footer ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}
#footer ul li {
    padding: 0 1em;
}
#footer ul li:first-child {
    border-right: 1px solid #666;
    padding-left: 0;
}
#footer .copyR {
    text-align: right;
    margin-top: -10px;
}

/* Tablet */
@media screen and (max-width: 960px) {
    #main { overflow: hidden; }
    .pageTop { right: 15px; }
}

/* WiiU */
#wiiu #footer ul li { display: inline-block; }

/* ------------------------------
    COMIC SLIDE
------------------------------ */
#comic .slideArea {
    position: relative;
    width: 960px;
    left: 0;
    top: 0;
}