@charset "shift_jis";
/* CSS Document */

/*clearfix */
.clearfix:before, .clearfix:after{content: " "; display: table;}
.clearfix:after{clear: both;}
.clearfix{*zoom: 1;}

.textleft {text-align:left !important ;} .textcenter {text-align:center !important ;} .textright {text-align:right !important ;}

/* universal margin selecta */
.m05{margin:5px !important ;} .m10{margin:10px !important ;} .m15{margin:15px !important ;} .m20{margin:20px !important ;} .m25{margin:25px !important ;} .m30{margin:30px !important ;} .m35{margin:35px !important ;} .m40{margin:40px !important ;} .m45{margin:45px !important ;} .m50{margin:50px !important ;} .m55{margin:55px !important ;} .m60{margin:60px !important ;} .m65{margin:65px !important ;} .m70{margin:70px !important ;} .m75{margin:75px !important ;} .m80{margin:80px !important ;} .m85{margin:85px !important ;} .m90{margin:90px !important ;} .m95{margin:95px !important ;} .m100{margin:100px !important ;}
.mt05{margin-top:5px !important ;} .mt10{margin-top:10px !important ;} .mt15{margin-top:15px !important ;} .mt20{margin-top:20px !important ;} .mt25{margin-top:25px !important ;} .mt30{margin-top:30px !important ;} .mt35{margin-top:35px !important ;} .mt40{margin-top:40px !important ;} .mt45{margin-top:45px !important ;} .mt50{margin-top:50px !important ;} .mt55{margin-top:55px !important ;} .mt60{margin-top:60px !important ;} .mt65{margin-top:65px !important ;} .mt70{margin-top:70px !important ;} .mt75{margin-top:75px !important ;} .mt80{margin-top:80px !important ;} .mt85{margin-top:85px !important ;} .mt90{margin-top:90px !important ;} .mt95{margin-top:95px !important ;} .mt100{margin-top:100px !important ;}
.mr05{margin-right:5px !important ;} .mr10{margin-right:10px !important ;} .mr15{margin-right:15px !important ;} .mr20{margin-right:20px !important ;} .mr25{margin-right:25px !important ;} .mr30{margin-right:30px !important ;} .mr35{margin-right:35px !important ;} .mr40{margin-right:40px !important ;} .mr45{margin-right:45px !important ;} .mr50{margin-right:50px !important ;} .mr55{margin-right:55px !important ;} .mr60{margin-right:60px !important ;} .mr65{margin-right:65px !important ;} .mr70{margin-right:70px !important ;} .mr75{margin-right:75px !important ;} .mr80{margin-right:80px !important ;} .mr85{margin-right:85px !important ;} .mr90{margin-right:90px !important ;} .mr95{margin-right:95px !important ;} .mr100{margin-right:100px !important ;}
.mb05{margin-bottom:5px !important ;} .mb10{margin-bottom:10px !important ;} .mb15{margin-bottom:15px !important ;} .mb20{margin-bottom:20px !important ;} .mb25{margin-bottom:25px !important ;} .mb30{margin-bottom:30px !important ;} .mb35{margin-bottom:35px !important ;} .mb40{margin-bottom:40px !important ;} .mb45{margin-bottom:45px !important ;} .mb50{margin-bottom:50px !important ;} .mb55{margin-bottom:55px !important ;} .mb60{margin-bottom:60px !important ;} .mb65{margin-bottom:65px !important ;} .mb70{margin-bottom:70px !important ;} .mb75{margin-bottom:75px !important ;} .mb80{margin-bottom:80px !important ;} .mb85{margin-bottom:85px !important ;} .mb90{margin-bottom:90px !important ;} .mb95{margin-bottom:95px !important ;} .mb100{margin-bottom:100px !important ;}
.ml05{margin-left:5px !important ;} .ml10{margin-left:10px !important ;} .ml15{margin-left:15px !important ;} .ml20{margin-left:20px !important ;} .ml25{margin-left:25px !important ;} .ml30{margin-left:30px !important ;} .ml35{margin-left:35px !important ;} .ml40{margin-left:40px !important ;} .ml45{margin-left:45px !important ;} .ml50{margin-left:50px !important ;} .ml55{margin-left:55px !important ;} .ml60{margin-left:60px !important ;} .ml65{margin-left:65px !important ;} .ml70{margin-left:70px !important ;} .ml75{margin-left:75px !important ;} .ml80{margin-left:80px !important ;} .ml85{margin-left:85px !important ;} .ml90{margin-left:90px !important ;} .ml95{margin-left:95px !important ;} .ml100{margin-left:100px !important ;}

/* universal padding selecta */
.p05{padding:5px !important ;} .p10{padding:10px !important ;} .p15{padding:15px !important ;} .p20{padding:20px !important ;} .p25{padding:25px !important ;} .p30{padding:30px !important ;} .p35{padding:35px !important ;} .p40{padding:40px !important ;} .p45{padding:45px !important ;} .p50{padding:50px !important ;} .p55{padding:55px !important ;} .p60{padding:60px !important ;} .p65{padding:65px !important ;} .p70{padding:70px !important ;} .p75{padding:75px !important ;} .p80{padding:80px !important ;} .p85{padding:85px !important ;} .p90{padding:90px !important ;} .p95{padding:95px !important ;} .p100{padding:100px !important ;}
.pt05{padding-top:5px !important ;} .pt10{padding-top:10px !important ;} .pt15{padding-top:15px !important ;} .pt20{padding-top:20px !important ;} .pt25{padding-top:25px !important ;} .pt30{padding-top:30px !important ;} .pt35{padding-top:35px !important ;} .pt40{padding-top:40px !important ;} .pt45{padding-top:45px !important ;} .pt50{padding-top:50px !important ;} .pt55{padding-top:55px !important ;} .pt60{padding-top:60px !important ;} .pt65{padding-top:65px !important ;} .pt70{padding-top:70px !important ;} .pt75{padding-top:75px !important ;} .pt80{padding-top:80px !important ;} .pt85{padding-top:85px !important ;} .pt90{padding-top:90px !important ;} .pt95{padding-top:95px !important ;} .pt100{padding-top:100px !important ;}
.pr05{padding-right:5px !important ;} .pr10{padding-right:10px !important ;} .pr15{padding-right:15px !important ;} .pr20{padding-right:20px !important ;} .pr25{padding-right:25px !important ;} .pr30{padding-right:30px !important ;} .pr35{padding-right:35px !important ;} .pr40{padding-right:40px !important ;} .pr45{padding-right:45px !important ;} .pr50{padding-right:50px !important ;} .pr55{padding-right:55px !important ;} .pr60{padding-right:60px !important ;} .pr65{padding-right:65px !important ;} .pr70{padding-right:70px !important ;} .pr75{padding-right:75px !important ;} .pr80{padding-right:80px !important ;} .pr85{padding-right:85px !important ;} .pr90{padding-right:90px !important ;} .pr95{padding-right:95px !important ;} .pr100{padding-right:100px !important ;}
.pb05{padding-bottom:5px !important ;} .pb10{padding-bottom:10px !important ;} .pb15{padding-bottom:15px !important ;} .pb20{padding-bottom:20px !important ;} .pb25{padding-bottom:25px !important ;} .pb30{padding-bottom:30px !important ;} .pb35{padding-bottom:35px !important ;} .pb40{padding-bottom:40px !important ;} .pb45{padding-bottom:45px !important ;} .pb50{padding-bottom:50px !important ;} .pb55{padding-bottom:55px !important ;} .pb60{padding-bottom:60px !important ;} .pb65{padding-bottom:65px !important ;} .pb70{padding-bottom:70px !important ;} .pb75{padding-bottom:75px !important ;} .pb80{padding-bottom:80px !important ;} .pb85{padding-bottom:85px !important ;} .pb90{padding-bottom:90px !important ;} .pb95{padding-bottom:95px !important ;} .pb100{padding-bottom:100px !important ;}
.pl05{padding-left:5px !important ;} .pl10{padding-left:10px !important ;} .pl15{padding-left:15px !important ;} .pl20{padding-left:20px !important ;} .pl25{padding-left:25px !important ;} .pl30{padding-left:30px !important ;} .pl35{padding-left:35px !important ;} .pl40{padding-left:40px !important ;} .pl45{padding-left:45px !important ;} .pl50{padding-left:50px !important ;} .pl55{padding-left:55px !important ;} .pl60{padding-left:60px !important ;} .pl65{padding-left:65px !important ;} .pl70{padding-left:70px !important ;} .pl75{padding-left:75px !important ;} .pl80{padding-left:80px !important ;} .pl85{padding-left:85px !important ;} .pl90{padding-left:90px !important ;} .pl95{padding-left:95px !important ;} .pl100{padding-left:100px !important ;}

/* letter-spacing: 0 */
h2, h3, h4, h5, p, ul li, ol li {letter-spacing: 0px;}


/* Caption */

.intro-area h3,
h3.sangokushi {
    color: #ffffff;
    font-size: 200%;
    font-family: "HGS明朝E",serif !important;
    line-height: 1.3;
    padding: 18px 0 12px;
    text-align: center;
    text-shadow: 0 0 8px #555555;
}

h3.sangokushi {
    color: #424ab4;
    background: #fbe289 url(../../sangokushi/img/sangokushi_bg_caption.jpg) top left no-repeat;
    font-size: 220%;
    text-shadow: 0 0 8px #ffffff;
}

.intro-area h3 span,
h3.sangokushi span {
    border-top: 1px solid #d8b5a5;
    color: #d8b5a5;
    display: block;
    font-family: sans-serif;
    font-size: 45%;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    margin: 12px 7% 0;
    padding: 12px 8px 0;
    text-indent: -16px;
    text-shadow:  none;
    width: 86%;
}
h3.sangokushi span {
    border-top: 1px solid #c9bf95;
    color: #a69b6d;
}

/* Overview */

.intro-area {
    width: 710px;
    background: #6d2a0f url(../../sangokushi/img/sangokushi_bg_01.jpg) top left no-repeat;
    padding: 0 0 16px;
    margin: 0 0 24px;
}

.intro-area ul {
    width: 96%;
    margin: 0 auto;
}

.intro-area ul li {
    float: left;
    width: 32%;
    padding: 0 4px 10px;
}

.intro-area ul li img {
    width: 100%;
    border: 1px solid #d8b5a5;
}


.intro-area .intro-content {
    clear: both;
    width: 90%;
    padding: 16px;
    margin: 0 auto;
}

.intro-area .intro-content p {
    background: url(../../sangokushi/img/sangokushi_dot.jpg) repeat bottom left;
}

#authorprofile {
    display: block;
    background: #fbe0e0;
    padding: 0;
    margin: 16px 19px 4px;
}
#authorname {
    display: block;
    width: 110px;
    background: #434EB1;
    color: #ffffff;
    letter-spacing: 0.15em;
    padding: 6px 0 4px;
    font-weight: bold;
    font-size: 120%;
    text-align: center;
}
#authordesc {
    padding: 6px 10px 12px;
    font-size: 90%;
}


/* Point */

#sangokushi_point {
    margin: 0 0 32px;
    padding: 6px 32px;
    border: 1px solid #cccccc;
    border-top: none;
}

.sangokushi_point_left,
.sangokushi_point_right {
    margin: 12px 0 0;
    min-height: 200px;
}

.sangokushi_point_left {padding: 0 0 0 256px;}
.sangokushi_point_right {padding: 0 256px 0 0;}

.left_one {background: url(../../sangokushi/img/sangokushi_point_img01.jpg) top left no-repeat;}
.right_one {background: url(../../sangokushi/img/sangokushi_point_img02.jpg) top right no-repeat;}
.left_two {background: url(../../sangokushi/img/sangokushi_point_img03.jpg) top left no-repeat;}

.sangokushi_point_left h4,
.sangokushi_point_right h4 {
    color: #424ab4;
    display: block;
    font-family: "HGS明朝E",serif !important;
    font-weight: normal;
    font-size: 115%;
    line-height: 1.4;
    margin: 0 0 12px;
    padding: 8px 0 0;
}

.sangokushi_point_left p,
.sangokushi_point_right p {
    font-size: 95%;
    padding: 0;
}



/* Character */

#character_whole {
    background: #fae0d8 url(../../sangokushi/img/sangokushi_chara01.jpg) top left no-repeat;
    margin: 0 0 24px;
    padding: 260px 0 0;
    width: 712px;
}

.character_block {
    width: 680px;
    margin: 0 auto;
}

.character_block p {
    background-color: #ffffff;
    background-color: rgba(255,255,255, 0.8);
    color: #777777;
    display: block;
    float: left;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 8px 28px;
    padding: 10px;
    width: 190px;
}
.character_block p.chara_image {
    margin: 0 8px;
    padding: 0;
    width: 210px;
}

.character_block p .copy {
    color: #333333;
    font-size: 120%;
    font-weight: bold;
    padding: 0 0 8px;
}
.character_block p .name {
    color: #333333;
    font-family: "HGS明朝E",serif !important;
    font-size: 220%;
    font-weight: normal;
    padding: 0 0 16px;
}
.character_block p .name span {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: -0.1em;
    padding-left: 4px;
}


/* DVDList */

.vol-wrap {
    width: 712px;
    background: #ffffff;
}
#add-area, .merit-area, .panel-area, .vol-area, .prof-area, #voice-area, .slide-area {
    border-top: none;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}
.vol-wrap .col-14 .vol-area {
    background-color: #ffffff;
}
.vol-content {
    border: none;
}

p.ctslist {
    font-family: "HGS明朝E",serif !important;
    font-size: 160%;
    letter-spacing: 0.01em;
    padding: 0 6px 2px;
    margin-top: -28px;
    margin-bottom: 4px;
}
.orange p.ctslist { border-bottom: 2px solid #EE5E25; color: #EE5E25;}
.green p.ctslist { border-bottom: 2px solid #336633; color: #336633;}
.blue p.ctslist { border-bottom: 2px solid #157CBF; color: #157CBF;}


.vol-img {
    margin: 0 auto 8px !important
}
.vol-img img {
    width: 160px;
    padding: 0;
    box-shadow: 0px 1px 6px #777777;
}

.vol-whole {
    padding: 0 8px 8px;
}

.orange .vol-whole {
    background: #FFECAD; /* Old browsers */
    background: -moz-linear-gradient(top,  #FFECAD 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #FFECAD 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #FFECAD 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFECAD', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.green .vol-whole {
    background: #e4ffbf; /* Old browsers */
    background: -moz-linear-gradient(top,  #e4ffbf 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #e4ffbf 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #e4ffbf 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4ffbf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.blue .vol-whole {
    background: #C7E2EA; /* Old browsers */
    background: -moz-linear-gradient(top,  #D6E8F0 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #D6E8F0 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #D6E8F0 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D6E8F0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}


.vol-whole ul li {
    border-bottom: 1px dotted #336633;
    font-family: "HGS明朝E",serif !important;
    font-size: 130%;
    letter-spacing: 0.05em;
    line-height: 1.3;
    list-style-type: none;
    padding: 8px 4px 6px 20px;
    text-indent: -14px;
}
.vol-whole ul li span {
    font-family: "メイリオ", sans-serif;
    font-size: 70%;
    font-weight: normal;
    padding: 0 8px 0 16px;
}


/* For Smartphone */
@media only screen and (max-width: 799px) {

    /* General */

    body {
        margin: 10px 0;
    }

    .intro-area h3,
    h3.sangokushi {
        font-size: 230%;
        letter-spacing: -1px;
        padding-top: 30px;
        padding-bottom: 28px;
    }

    h3.sangokushi {
        font-size: 250%;
        margin-top: 56px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    h3.sangokushi span {
        font-size: 30%;
    }

    /* Top, Overview */

    p.mv img {width: 713px; margin-left: -2px;}

    .intro-area .intro-content p {
        background: none;
        font-size: 200%;
        line-height: 1.6;
        padding: 8px;
    }

    .intro-area {
        width: 712px;
    }

    #authorname {
        width: 180px;
        padding: 6px 0;
        font-size: 200%;
    }
    #authordesc {
        font-size: 170%;
        padding: 10px 20px 16px;
    }

    /* Point */

    #sangokushi_point {
        padding: 6px 16px 0;
        border: none;
    }

    .sangokushi_point_left {
        background-position: left 20px;
    }
    .sangokushi_point_right {
        background-position: right 20px;
    }

    .sangokushi_point_left h4,
    .sangokushi_point_right h4 {
        font-weight: bold;
        font-size: 135%;
        letter-spacing: -0.01em;
        padding: 0;
        margin-bottom: 8px;
    }

    .sangokushi_point_left p,
    .sangokushi_point_right p {
        font-size: 130%;
        line-height:1.5;
        margin-bottom: 30px;
    }


    /* Character */

    .character_block p {
        font-size: 16px;
    }

    .character_block p .copy {
        font-size: 120%;
    }
    .character_block p .name {
        font-size: 200%;
        font-weight: normal;
        padding: 0 0 16px;
    }
    .character_block p .name img {
        width: 100px;
    }


    /* DVDList */

    .vol-wrap {
        margin: 0;
    }

    #add-area, .merit-area, .panel-area, .vol-area, .prof-area, #voice-area, .slide-area {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .vol-area {
        padding: 16px 8px 0;
    }

    .vol-content {
        width: 332px;
        padding: 0 8px;
    }

    p.ctslist {
        font-size: 160%;
        margin-top: -32px;
    }
    .orange p.ctslist { border-bottom: 2px solid #EE5E25; color: #EE5E25;}
    .green p.ctslist { border-bottom: 2px solid #336633; color: #336633;}
    .blue p.ctslist { border-bottom: 2px solid #157CBF; color: #157CBF;}


    .vol-img {
        width: 332px;
        margin: 0 auto 8px !important
    }
    .vol-img img {
        width: 160px;
    }

    .vol-whole ul li {
        font-size: 150%;
        font-weight: bold;
        letter-spacing: 0.05em;
        line-height: 1.3;
        padding: 8px 6px;
        text-indent: -14px;
    }


} /* End of Media Query */