@charset 'utf-8';

/* =========================================================

hw-mainvisual
 
========================================================= */

#hw-mainvisual {
    margin-top: -112px;
    border-bottom: 5px solid #0f0;
    background-color: #000;
}

#hw-mainvisual-inner {
    position: relative;
    overflow: hidden;
    width: 960px;
    height: 493px;
    margin: 0 auto;
}

#sns-layer {
    position: absolute;
    z-index: 60;
    bottom: 28px;
    left: 0;
    width: 537px;
    height: 34px;
    padding: 3px 0 0 20px;
    text-align: left;
    border-radius: 2px;
    background-color: #1a1a1a;
}

.bxslider li {
    left: 0;
}

#hw-mainvisual-overlay-layer {
    position: absolute;
    z-index: 59;
    top: 0;
    left: 0;
    width: 960px;
    height: 493px;
    background: url(../images/index/overlay-mainvisual.png) left top repeat-y;
}

#gigyaShare {
    position: static;
    width: auto;
}

.gig-bar-container {
    display: inline-block;
    padding-top: 6px;
    padding-left: 10px;
    *display: inline;
    *zoom: 1;
}

#logo-layer {
    position: absolute;
    z-index: 60;
    right: 9px;
    bottom: 31px;
}

#line-layer {
    position: absolute;
    z-index: 60;
    bottom: 0;
    left: 50%;
    width: 1000px;
    height: 20px;
    margin-left: -500px;
    border-right: 1px dotted #0f0;
    border-left: 1px dotted #0f0;
}

#logo-layer img {
    width: 208px;
    height: auto;
}


/* =========================================================

 archive-module
 
========================================================= */

#archive-loader {
    height: 200px;
}

#archive-loader img {
    margin-top: 70px;
}

#helloTopics ul {
    text-align: left;
}

#helloTopics li {
    display: inline-block;
    width: 151px;
    margin: 0 0 0 10.7px;
    padding: 0;
    vertical-align: top;
    *display: inline;
    *zoom: 1;
}

#helloTopics li:first-child {
    margin-left: 0;
}

.archive-item {
    width: 150px;
    text-align: left;
}

.archive-item strong,
.archive-item big {
    font-size: inherit;
    font-weight: normal;
}

.archive-title {
    /* padding-bottom: 5px; */
    height: 36px;
    margin: 12px 0 7px 0;
    border-bottom: 1px dotted #555;
}

.archive-title a {
    font-size: 12px;
    font-weight: bold;
    color: #0f0;
}

.archive-item .thumb {
    display: table-cell;
    overflow: hidden;
    box-sizing: border-box;
    width: 150px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #555;
    background: #000;
}

.h-long {
    width: 100%;
    height: auto;
}

.v-long {
    width: auto;
    height: 100%;
}

.no-image {
    width: 100%;
    height: auto;
}

.boxtxt {
    font-size: 12px;
}


/* =========================================================

 hw-title
 
========================================================= */

.hw-title {
    overflow: hidden;
    margin-bottom: 10px;
    text-align: left;
}

.hw-title .hw-title-icon {
    position: relative;
    display: block;
    float: left;
    width: 28px;
    height: 47px;
    border-right: 1px solid #0f0;
}

.hw-title .hw-title-icon img {
    position: absolute;
    top: 15px;
    /* left: 10px; */
    width: 18px;
    height: auto;
}

.hw-title .hw-title-txt {
    position: relative;
    display: block;
    height: 40px;
    margin-left: 28px;
}

.hw-title .hw-title-txt img {
    position: absolute;
    top: 17px;
    left: 10px;
    width: 70px;
    height: auto;
}


/* hw-title-instagram
......................................................... */

#hw-title-instagram .hw-title-icon img {
    top: 17px;
    width: 18px;
}

#hw-title-instagram .hw-title-txt img {
    top: 23px;
    left: 8px;
    width: 70px;
}


/* hw-title-twitter
......................................................... */

#hw-title-twitter .hw-title-icon img {
    top: 20px;
    width: 18px;
}

#hw-title-twitter .hw-title-txt img {
    top: 22px;
    left: 8px;
    width: 112px;
}


/* hw-title-facebook
......................................................... */

#hw-title-facebook .hw-title-icon img {
    top: 16px;
    left: 7px;
    width: 9px;
}

#hw-title-facebook .hw-title-txt img {
    top: 22px;
    left: 12px;
    width: 66px;
}


/* hw-title-archive
......................................................... */

#hw-title-archive .hw-title-icon {
    width: 32px;
}

#hw-title-archive .hw-title-icon img {
    top: 14px;
    width: 19px;
}

#hw-title-archive .hw-title-txt img {
    top: 21px;
    left: 17px;
    width: 138px;
}

@media screen and (max-width: 767px) {
    /* =========================================================
  
    #hw-mainvisual
   
  ========================================================= */
    #hw-mainvisual {
        margin-top: 0;
        margin-bottom: 10px;
        border-bottom: 2px solid #0f0;
    }
    #hw-mainvisual-inner {
        width: auto;
        height: auto;
    }
    #sns-layer {
        position: relative;
        bottom: auto;
        width: auto;
        height: auto;
        padding: 8px 0 7px 10px;
        text-align: center;
    }
    #hw-mainvisual-img-layer {
        overflow: hidden;
        width: 320px;
        height: 164px;
        margin: 0 auto;
    }
    #hw-mainvisual-img-layer img {
        width: 100%;
        height: auto;
    }
    #hw-mainvisual-overlay-layer {
        left: 50%;
        width: 320px;
        height: 100%;
        margin-left: -160px;
        background: url(../images/index/overlay-mainvisual-sp.png) left top repeat-y;
        background-size: 100% auto;
    }
    #logo-layer {
        top: 137px;
        right: auto;
        bottom: auto;
        left: 50%;
        width: 320px;
        margin-left: -160px;
        text-align: right;
    }
    #line-layer {
        display: none;
    }
    #logo-layer img {
        width: 110px;
        margin-right: 14px;
    }
    .gig-bar-container {
        padding-left: 0;
    }
    /* =========================================================
  
   archive-module
   
  ========================================================= */
    .archive-item .thumb {
        width: 145px;
        height: 145px;
    }
    .archive-item {
        width: 145px;
    }
    #helloTopics li {
        width: 145px;
        margin-left: 0;
        padding: 0 5px 20px 5px;
    }
    /* =========================================================
  
   hw-title
   
  ========================================================= */
    .hw-title {
        margin-bottom: 5px;
    }
    .hw-title .hw-title-icon {
        width: 23px;
        height: 36px;
    }
    /* hw-title-instagram
  ......................................................... */
    #hw-title-instagram .hw-title-icon img {
        top: 11px;
        width: 13px;
    }
    #hw-title-instagram .hw-title-txt img {
        top: 13px;
        left: 2px;
        width: 56px;
    }
    /* hw-title-twitter
  ......................................................... */
    #hw-title-twitter .hw-title-icon img {
        top: 13px;
        width: 13px;
    }
    #hw-title-twitter .hw-title-txt img {
        top: 15px;
        left: 2px;
        width: 93px;
    }
    /* hw-title-facebook
  ......................................................... */
    #hw-title-facebook .hw-title-icon img {
        top: 12px;
        left: 7px;
        width: 7px;
    }
    #hw-title-facebook .hw-title-txt img {
        top: 16px;
        left: 6px;
        width: 55px;
    }
    /* hw-title-archive
  ......................................................... */
    #hw-title-archive .hw-title-icon {
        width: 32px;
    }
    #hw-title-archive .hw-title-icon img {
        top: 10px;
        left: 11px;
        width: 12px;
    }
    #hw-title-archive .hw-title-txt img {
        top: 15px;
        left: 14px;
        width: 115px;
    }
}


/* =========================================================

index-layout
 
========================================================= */

#size-detect {
    font-family: pc;
    display: none;
}

#social-embed-inner {
    overflow: hidden;
    width: 960px;
    margin: 0 auto;
    position: relative;
    left: -5px;
}

.social-embed-item {
    float: left;
    width: 305px;
}

#instagram iframe {
    height: 310px;
}

#hw-twitter {
    width: 313px;
    margin-left: 16px;
}

#facebook {
    width: 312px;
    margin-left: 14px;
}

#social-embed {
    padding-bottom: 11px;
    border-bottom: 1px solid #454545;
    /* max-width: 100%; */
}

#archive-area-inner {
    width: 960px;
    margin: 0 auto;
}

#archive-area {
    padding-bottom: 28px;
    border-bottom: 5px solid #0f0;
    position: relative;
    left: -5px;
}

#comment-area-inner {
    width: 960px;
    margin: 0 auto;
}

#hw-title-archive {
    margin-top: 8px;
}

#comment-title {
    margin-top: 20px;
    margin-left: -10px;
}

#comment-area {
    padding-bottom: 92px;
}

@media screen and (max-width: 767px) {
    #size-detect {
        font-family: sp;
        display: none;
    }
    #instagram iframe {
        height: auto;
    }
    #social-embed-inner,
    #archive-area-inner,
    #comment-area-inner {
        box-sizing: border-box;
        width: 320px;
        padding: 0 10px;
        left: 0;
    }
    #archive-area-inner {
        margin-left: -5px;
        padding-right: 0;
        padding-left: 0;
    }
    #hw-title-archive {
        margin-left: -4px;
    }
    .social-embed-item {
        float: none;
        width: 300px;
        margin: 0 auto !important;
        margin-bottom: 5px;
    }
    #hw-twitter,
    #facebook {
        width: 300px;
        padding-bottom: 10px;
    }
    #comment-area {
        padding-bottom: 20px;
    }
    #archive-area {
        padding-bottom: 14px;
        border-bottom: 2px solid #0f0;
        display: none;
    }
}