@charset "UTF-8";
body{
    
    font-size:1.6rem;
    line-height:125%;
    /*font-family: "Gothic MB101 Light";*/
}

#wrapper{
    display:block;
    overflow:hidden;
    width:100%;
    max-width:1280px;
    margin:0 auto;
}

/**************************
 ヘッダコピー
 **************************/
 h1{
    display:block;
    overflow:hidden;
    font-family: "UD新ゴNT B";
    font-size:2.8em;
    line-height:125%;

    color:#ffffff;
    text-align:center;
    padding:0.25em 1em;
    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
    background: #7d7e7d; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

h1 > span{
    
}

/**************************
 表紙エリア
 **************************/
#topImg{
    display:block;
    overflow:hidden;
    position:relative;
}

#topImg img{
    width:100%;
    height:auto;
    border:1px solid #cccccc;
}

#topTxt{
    display:none;
}


/**************************
 本文エリア
 **************************/
#mainContent{
    display:block;
    overflow:hidden;
    line-height:155%;
    margin-bottom:5em;
    margin:2em 0;
    padding:2em;
    border:4px double #000000;
}

#mainContent h2{
    display:block;
    overflow:hidden;
    font-size:1.5em;
    text-align:center;
    font-family:"Shin Go Bold";
}



#mainContent > section{
    display:block;
    overflow:hidden;
    width:50%;
    padding:0 1em;
    float:left;
}

/*#mainContent > section:nth-child(2),*/
#mainContent > section.wide{
    width:100%;
    float:none;
}


#mainContent > section > p+p{
    margin-top:1em;
}

#mainContent h3{
    display:block;
    /*overflow:hidden;*/
    font-family:"Shin Go Bold";
    font-size:1.2em;
    text-align:center;
    margin:1em 0;
    line-height:125%;
    color:#ffffff;
    padding:0.25em 1em;
    position:relative;
    
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cedce7+0,596a72+100;Grey+3D+%231 */
    background: #cedce7; /* Old browsers */
    background: -moz-linear-gradient(left, #cedce7 0%, #596a72 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #cedce7 0%,#596a72 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #cedce7 0%,#596a72 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=1 ); /* IE6-9 */
}


.icf-new:before {
    display:inline-block;
    content: "\e904";
    color: #ff005d;
}

#mainContent h3 .icf-new:before {
    display:none;
    /*
    font-size: 68px;
    position: absolute;
    top: -18px;
    left: 50px;
    */
}

#lineup_v2{
    clear:both;
}


#sampleV{
  position:relative;
  width:100%;
  height:0;
  padding-top:56.25%;
}
#sampleV iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}


#mainContent dl{
    clear:both;
    display:block;
    overflow:hidden;
    border-top:1px dashed #333333;
    padding-top:1em;
}

#mainContent dl > dt{
    display: block;
    overflow:hidden;
    width:6em;
    float:left;
    font-weight:bold;
    clear:both;
}

#mainContent dl > dd{
    display:block;
    overflow:hidden;
    width:calc(100% - 6em);
    float:left;
    margin-bottom:1em;
}

#mainContent dl.wideLs > dt{
    width:9em;
    /*text-align:right;*/
}
#mainContent dl.wideLs > dd{
    width:calc(100% - 9em);
    padding-left:1em;
}


#purchase p:nth-child(2){
    padding-bottom:1em;
    margin-bottom: 1em;
    border-bottom:1px dashed #333333;
}

#purchase h4{
    line-height:175%;
    display:block;
    /*overflow:hidden;*/
}

.itemBox{
    display:block;
    overflow:hidden;
    width:50%;
    float:left;
    position:relative;
    margin:0.5em 0;
}


.itemBox .icf-new:before {
    display:none;
    /*
    font-size: 54px;
    position: absolute;
    top: 0;
    left: 110px;
    */
}

.price{
    display:block;
    overflow:hidden;
    margin-top:0.5em;
}

.orderBtn{
    display:block;
    overflow:hidden;
    margin:1em 0;
    /*text-align:center;*/
}


.cler{
    clear:both;
}

img#dvdimg{
    width:150px;
    height:auto;
    margin-right:1em;
    margin-bottom:1em;
    float:left;
}


small{
    font-size:0.8em;
}

strong{
    font-size:1.4em;
    color:#ff0000;
}


ol{
    list-style-type: decimal;
    margin-left:2em;
}

ol > li{
    margin:0.5em 0;
    padding:0.5em 0;
    border-bottom:1px dotted #c3c3c3;
}

fotter{
    border-top:1px solid #cccccc;
    display:block;
    overflow:hidden;
    text-align:center;
    padding:1em 0;
}

.nopc{
    display:none;
}


/* for Sp --------------------*/
@media screen and (max-width: 750px) {

    body{
        font-size:1.4rem;
    }

    h1{
        font-size:1.6em;
    }
    
    #mainContent{
        margin-bottom:5em;
        margin:1em;
        padding:1em;
    }

    
    #mainContent h2{
        font-size:1.2em;
    }
    
    #mainContent > section{
        width:100%;
        padding:0 0;
        float:none;
    }

    /*
    #mainContent #lineup_v2 h3 {
        padding: 0.25em 1em 0.25em 60px
    }
    */
    #mainContent h3 .icf-new:before {
        display:none;
        /*
        font-size: 48px;
        top: -8px;
        left:10px;
        */
    }

    #mainContent dl {
        border-top:none;
    }
    
    #mainContent dl > dt{
        width:100%!important;
        float:none;
    }
    #mainContent dl > dd{
        width:100%!important;
        float:none;
        padding-left:1em;
    }

    #topImg img{
        border:none;
    }

    #purchase h4{
        text-align:center;
        font-size:1.8rem;
        line-height:155%;
    }

    .itemBox{
        width:100%;
        float:none;
        margin-top:1em;
        border-bottom: 1px dashed #333333;
    }

    .itemBox .icf-new:before {
        font-size: 88px;
        left: auto;
        right: 0;
    }
    .price{
        text-align:center;
    }

    .orderBtn{
        text-align:center;
    }

    .orderBtn > iframe{
        width:100%;
    }


    img#dvdimg{
        display:block;
        width:80%;
        max-width:640px;
        float:none;
        margin:0 auto 1em !important;
    }

    .nopc{
        display:initial!important;
    }

   
}




.bookingBtn{
    border: none;
    border-radius: 4px;
    color: #fff;
    width: 340px;
    height: 60px;
    line-height: 56px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 0.04em;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    cursor: pointer;
    background-color: #0073d9;
}

.bookingBtn::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 23px;
    height: 23px;
    margin: -6px 10px 0 0;
    background: url(https://officehalchinema.stores.jp/images/stores/module_icon/icon_cart.svg) no-repeat;
    background-size: 23px;
}

/* for Sp --------------------*/
@media screen and (max-width: 750px) {

    .bookingBtn {
        width: 200px !important;
        height: 44px !important;
        font-size: 15px !important;
        line-height: 46px !important;
        background-image: url(/images/stores_button/cart.svg) !important;
        background-size: 25px 25px;
        background-repeat: no-repeat !important;
        background-position: 30px 10px !important;
    }

    .bookingBtn::before {
        content: "";
    }

}