@charset "UTF-8";
/* 4mix common.css ver1.0.0 */
/*
    基準文字サイズ13px
    10px 77%    11px 85%
    12px 93%    13px 100%
    14px 108%   15px 116%
    16px 124%   17px 131%
    18px 139%   19px 147%
    20px 154%   21px 162%
    22px 169%   23px 177%
    24px 185%   25px 192%
    26px 200%
*/

html {
}

body {
    font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    line-height: 1.5;
    text-align: center;
    font-size: 16px;
    color: #333;
}

a img {transition: all 0.3s linear;}
a:hover img {
    opacity: 0.70;
}

.inner {
    position: relative;
    width: 900px;
    margin: auto;
    text-align: left;
}


#header {
    height: 98px;
}
    #header .inner {
        height: 98px;
    }

#logo a {
    display: block;
    position: absolute;
    top: 20px;
    left: 0;
    width: 302px;
    height: 66px;
    background: url(/img/hd-logo.jpg) no-repeat 0 0;
    text-indent: -10000px;
}

#hd-link01 {
    position: absolute;
    top: 19px;
    right: 1px;
}
    #hd-link01 li {
        float: left;
    }

#hd-btn01 {
    position: absolute;
    right: 0;
    bottom: 21px;
}

#main-img {
    height: 307px;
    margin-bottom: 1px;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-image: url(/jqra/img/bg-main-img01.png);
}
    #main-img .inner {width: 960px;}

#main-img.lower {
    position: relative;
    height: 112px;
    margin-top: -5px;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-image: url(/jqra/img/bg-main-img03.png);
}
    #main-img.lower .inner {
        overflow: hidden;
        width: 900px;
        height: 112px;
        padding: 0 30px;
        background-image: url(/jqra/img/bg-main-img03z.png);
    }

#gnav {
    padding-bottom: 4px;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-image: url(/jqra/img/bg-gnav01.jpg);
}
    #gnav ul {
        overflow: hidden;
        width: 900px;
        height: 50px;
        margin: 0 auto;
    }
        #gnav ul li {
            float: left;
            height: 50px;
        }
            #gnav ul li a {
                overflow: hidden;
                display: block;
                width: 135px;
                height: 50px;
                background-repeat: no-repeat;
                background-image: url(/jqra/img/gnav_5.png);
                text-indent: -10000px;
            }
            #gnav ul li#g01 a {width: 88px;}
            #gnav ul li#g07 a {width: 137px;}

            #gnav ul li#g01 a {background-position:    0px 0px;}
            #gnav ul li#g02 a {background-position:  -88px 0px;}
            #gnav ul li#g03 a {background-position: -223px 0px;}
            #gnav ul li#g04 a {background-position: -358px 0px;}
            #gnav ul li#g05 a {background-position: -493px 0px;}
            #gnav ul li#g06 a {background-position: -628px 0px;}
            #gnav ul li#g07 a {background-position: -763px 0px;}

            #gnav ul li#g01 a:hover,
            body.g01 #gnav ul li#g01 a {background-position:    0px -50px;}
            #gnav ul li#g02 a:hover,
            body.g02 #gnav ul li#g02 a {background-position:  -88px -50px;}
            #gnav ul li#g03 a:hover,
            body.g03 #gnav ul li#g03 a {background-position: -223px -50px;}
            #gnav ul li#g04 a:hover,
            body.g04 #gnav ul li#g04 a {background-position: -358px -50px;}
            #gnav ul li#g05 a:hover,
            body.g05 #gnav ul li#g05 a {background-position: -493px -50px;}
            #gnav ul li#g06 a:hover,
            body.g06 #gnav ul li#g06 a {background-position: -628px -50px;}
            #gnav ul li#g07 a:hover,
            body.g07 #gnav ul li#g07 a {background-position: -763px -50px;}

#ul-bread01 {
    overflow: hidden;
    margin: 15px 0;
}
    #ul-bread01 li {
        float: left;
        font-size: 77%;
        color: #795921;
    }
        #ul-bread01 li a {
            color: #795921;
            text-decoration: none;
        }
        #ul-bread01 li a:hover {
            text-decoration: underline;
        }

#content {
    overflow: hidden;
    width: 900px;
    margin: 0 auto;
    padding: 30px;
    text-align: left;
}
    #main {
        float: left;
        width: 680px;
    }
    #side {
        float: right;
        width: 184px;
    }

#footer {
    padding: 8px;
    background-color: #b3b3b3;
}
    #footer p {
        text-align: center;
    }
        #footer p img {
            vertical-align: middle;
        }

.side-nav01 {
    border: 1px solid #ccc;
}

.side-nav01 li a[href$='.pdf'] {
    padding: 0;
}
    .side-nav01 li a[href$='.pdf'] img {
        vertical-align: top;
    }
.side-nav01.bb0 {border-bottom: 0;}
.side-nav01.bt0 {border-top: 0;}
    .side-nav01 li,
    .side-nav01 dt,
    .side-nav01 dd {
        border: 1px solid #fff;
        border-top: 0;
    }
    .side-nav01 li:first-child,
    .side-nav01 dt:first-child {
        border-top: 1px solid #fff;
    }
        .side-nav01 li a[href$='.pdf'],
        .side-nav01 li a,
        .side-nav01 dd a,
        .side-nav01 dt span {
            display: table-cell;
            width: 162px;
            height: 43px;
            padding-left: 18px;
            background-color: #f6f6f6;
            background-repeat: no-repeat;
            background-position: 7px center;
            background-image: url(/jqra/img/ico-tri01.png);
            font-size: 93%;
            text-decoration: none;
            vertical-align: middle;
            color: #333;
        }
        .side-nav01 dt span a {
            font-size: 93%;
            text-decoration: none;
            color: #333;
        }
        .side-nav01 dd a {
            background: transparent;
            background-color: #f6f6f6;
        }
            .side-nav01 dd a i {
                display: block;
                float: left;
                padding-right: 0.5em;
            }
            .side-nav01 dd a span {
                display: block;
                overflow: hidden;
            }
        .side-nav01 li.current a,
        .side-nav01 li a:hover,
        
        .side-nav01 dt.hover.current span,
        .side-nav01 dt.hover:hover span,
        
        .side-nav01 dd.current a,
        .side-nav01 dd a:hover{
            background-color: #e6deca;
        }


.side-ul-bnr01 {}
.side-ul-bnr01 li {margin-bottom: 1.5em;}
.side-ul-bnr01 li a {
    text-decoration: none;
}
.side-ul-bnr01 li a .txt {
    display: block;
    color: #c28c34;
    font-size: 10px;
}

.dl-basic01 {
    overflow: hidden;
}
    .dl-basic01 dt {
        float: left;
        clear: both;
    }
    .dl-basic01 dd {
        margin-left: 1em;
    }
    .dl-basic01.ml01 dd {
        margin-left: 1.5em;
    }
    .dl-basic01.ml02 dd {
        margin-left: 2em;
    }
    .dl-basic01.ml03 dd {
        margin-left: 3em;
    }

.dl-basic02 {}
    .dl-basic02 dt {
        font-weight: bold;
        margin-top: 5px;
    }
    .dl-basic02 dt:first-child {margin-top: 0;}
    .dl-basic02 dd {padding-left: 1.5em;}

.dl-info01 {
    overflow: hidden;
    margin-top: 5px;
    border-bottom: 1px solid #401700;
}
    .dl-info01 dt,
    .dl-info01 dd {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .dl-info01 dt {
        float: left;
        clear: both;
    }
    .dl-info01 dd {
        padding-left: 10em;
        border-top: 1px dotted #c0a478;
    }
    .dl-info01 dt:first-child + dd {border-top: 0;}

    .dl-info01 dd p {
        padding-left: 20px;
        background: url(/jqra/img/ico-tri01.jpg) no-repeat 0 center;
    }
    .dl-info01 dd p.description {
        padding-top: 5px;
        font-size: 85%;
        background: transparent;
    }
    .dl-info01 dd a {
        text-decoration: none;
        color: #333;
    }
    .dl-info01 dd a:hover {text-decoration: underline;}

.dl-example01 {overflow: hidden;}
    .dl-example01 dt {
        float: left;
        clear: both;
    }
    .dl-example01 dd {
        margin-left: 4.5em;
    }

.ul-arrrow01 {}
    .ul-arrrow01 li {
        margin-bottom: 10px;
        padding-left: 20px;
        background: url(/jqra/img/ico-tri01.jpg) no-repeat 0 center;
    }

.h3-basic01 {
    margin-bottom: 15px;
    border-top: 3px solid #ccc;
    border-bottom: 1px solid #ccc;
}
    .h3-basic01 span {
        position: relative;
        display: inline-block;
        margin-top: -3px;
        padding: 12px 1em 12px 0;
        font-size: 139%;
        font-weight: bold;
        color: #401700;
        border-top: 3px solid #401700;
    }

.h4-basic01 {
    position: relative;
    margin-bottom: 15px;
    padding: 4px 11px;
    color: #411800;
    font-size: 108%;
    font-weight: bold;
    background-color: #e6deca;
    border-left: 5px solid #411800;
}
    .h4-basic01 a {
        display: block;
        position: absolute;
        top: 9.5px;
        right: 10px;
        padding-left: 8px;
        color: #411800;
        font-weight: normal;
        background-color: tranparent;
        background-repeat: no-repeat;
        background-position: 0 0.2em;
        background-image: url(/jqra/img/ico-tri01.png);
        font-size: 77%;
        text-decoration: none;
        line-height: 1;
    }
    .h4-basic01 a:hover {
        text-decoration: underline;
    }

    .h4-basic02 {
        margin-bottom: 15px;
        color: #411800;
        font-weight: bold;
        font-size: 108%;
    }

.h5-basic01 {
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    border-bottom: 1px dotted #ccc;
}

.h5-basic02 {
    margin-bottom: 10px;
    font-weight: bold;
    color: #411800;
}

.box-basic01 {
    padding: 10px;
    border: 1px solid #ccc;
}

.box-basic02 {
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #411800;
    background-color: #faf5e4;
    box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}

.box-basic03 {
    box-sizing: border-box;
    padding: 8px;
    color: #411800;
    border: 1px solid #411800;
    box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}

.box-basic04 {
    box-sizing: border-box;
    padding: 8px;
    color: #411800;
    border: 1px solid #411800;
}

.box-basic05 {
    box-sizing: border-box;
    padding: 8px;
    border: 3px double #411800;
    background-color: #faf5e4;
}

.section {
    margin-bottom: 30px;
    font-size: 93%;
}
    .section p {
        margin-bottom: 15px;
        line-height: 1.8;
    }
    .section p:last-child {margin-bottom: 0;}

    .dl-basic01,
    .dl-basic02 {
        line-height: 1.8;
    }
    
    .table-basic01 {
        margin-bottom: 15px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        line-height: 1.8;
    }
        .table-basic01 th,
        .table-basic01 td {
            padding: 8px;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            vertical-align: middle;
        }
        .table-basic01 th {
            font-weight: bold;
            background-color: #f2efe7;
        }
        .table-basic01.th-bg-red th {
            background-color: #ffefef;
        }

        .table-basic01.th-bg-brown th {
            background-color: #faf5e4;
        }


        .table-basic01 tr.bg-brown th {
            color: #401700;
            background-color: #faf5e4;
        }

    .table-basic02 {
        width: 100%;
        margin-bottom: 15px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        line-height: 1.8;
    }
        .table-basic02 th,
        .table-basic02 td {
            padding: 8px;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        .table-basic02 th {
            background-color: #c7ddf4;
            text-align: center;
            vertical-align: middle;
        }
        .table-basic02 tr:first-child th {
            font-weight: bold;
            color: #fff;
            background-color: #7bb1e7;
        }
        .table-basic02 tr:nth-child(odd) td {
            background-color: #f1f1f1;
        }

.dl-table01 {
    display: table;
    font-size: 93%;
}
    .dl-table01 dt,
    .dl-table01 dd {display: table-cell;}
    .dl-table01 dt {white-space: nowrap;}
    

[class^="table-basic"] label {
    display: inline-block;
    position: relative;
}

input[type="text"],
input[type="password"],
select,
textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 4px;
    vertical-align: bottom;
}

.err {color: #cc0000;}

.ul-basic01 {
    
}
    .ul-basic01 li {
        margin-bottom: 5px;
    }

.ul-disc01 {
    padding-left: 1em;
    text-indent: -1em;
    list-style-type: disc;
    list-style-position: inside;
}

.paging {
    margin-bottom: 30px;
    text-align: center;
}
    .paging a {
        display: inline-block;
        margin: 0 0.5rem;
        padding: 4px 8px;
        font-size: 93%;
        color: #fff;
        background-color: #411800;
        text-decoration: none;
        line-height: 1;
    }
    .paging a:hover {
        color: #411800;
        background-color: #e6deca;
    }

.ico-new01 {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.fr-red {
    padding: 6px 10px;
    border: 1px solid #ffa6a6;
}

.inline_html_warpper {
    padding: 20px;
    background-color: #fff;
    text-align: left;
}
    .inline_html_warpper .section {
        margin-bottom: 0;
    }

/*adjustment*/

.red {color: #cc0000;}
.brown {color: #411800;}

.fzS {font-size: 77% !important;}
.fzM {font-size: 100% !important;}
.fzL {font-size: 124% !important;}
.fzLL {font-size: 139% !important;}

.opacity {transition: all 0.3s linear;}
.opacity:hover{opacity: 0.70;}

.flL {float: left;}
.flN {float: none;}
.flR {float: right;}

.nosneak {overflow: hidden;}
.nowrap {white-space: nowrap;}

.taL {text-align: left !important;}
.taC {text-align: center !important;}
.taR {text-align: right !important;}

.vaT {vertical-align: top !important;}
.vaM {vertical-align: middle !important;}
.vaB {vertical-align: bottom !important;}

.m-auto {margin: 0 auto;}

.mt00 {margin-top: 0 !important;}
.mt05 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}

.mr00 {margin-right: 0 !important;}
.mr05 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr30 {margin-right: 30px !important;}
.mr40 {margin-right: 40px !important;}
.mr50 {margin-right: 50px !important;}

.mb00 {margin-bottom: 0 !important;}
.mb05 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}

.mb1rem {margin-bottom: 1rem !important;}
.mbHrem {margin-bottom: 0.5rem !important;}

.ml00 {margin-left: 0 !important;}
.ml05 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml30 {margin-left: 30px !important;}
.ml40 {margin-left: 40px !important;}
.ml50 {margin-left: 50px !important;}

.pt00 {padding-top: 0 !important;}
.pt10 {padding-top: 10px !important;}
.pt15 {padding-top: 15px !important;}
.pt20 {padding-top: 20px !important;}
.pt30 {padding-top: 30px !important;}
.pt40 {padding-top: 40px !important;}
.pt50 {padding-top: 50px !important;}

.pr00 {padding-right: 0 !important;}
.pr10 {padding-right: 10px !important;}
.pr15 {padding-right: 15px !important;}
.pr20 {padding-right: 20px !important;}
.pr30 {padding-right: 30px !important;}
.pr40 {padding-right: 40px !important;}
.pr50 {padding-right: 50px !important;}

.pb00 {padding-bottom: 0 !important;}
.pb10 {padding-bottom: 10px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb50 {padding-bottom: 50px !important;}

.pl00 {padding-left: 0 !important;}
.pl10 {padding-left: 10px !important;}
.pl15 {padding-left: 15px !important;}
.pl20 {padding-left: 20px !important;}
.pl30 {padding-left: 30px !important;}
.pl40 {padding-left: 40px !important;}
.pl50 {padding-left: 50px !important;}

.w1per {width: 1% !important;}
.w5per {width: 5% !important;}
.w10per {width: 10% !important;}
.w15per {width: 15% !important;}
.w20per {width: 20% !important;}
.w25per {width: 25% !important;}
.w30per {width: 30% !important;}
.w35per {width: 35% !important;}
.w40per {width: 40% !important;}
.w45per {width: 45% !important;}
.w48per {width: 48% !important;}
.w50per {width: 50% !important;}
.w60per {width: 60% !important;}
.w70per {width: 70% !important;}
.w80per {width: 80% !important;}
.w90per {width: 90% !important;}
.w100per {width: 100% !important;}

strong,
.bold {
    font-weight: bold;
}

.caption {
    display: inline-block;
    font-size: 77%;
    line-height: 1.5;
}

.txt-bg-brown {
    display: inline-block;
    padding: 2px 4px;
    color: #fff;
    background-color: #411800;
}

.drop-shadow {box-shadow: 2px 2px 4px rgba(0,0,0,.2);}


.mod-h2-basic02 {}
    .mod-h2-basic02 .mod-main-inner {}
        .mod-h2-basic02 .mod-main-inner h2 {
            width: 100%;
            height: 27px;
            background: url(/jqra/img/h3-top-info01.jpg);
            text-indent: -10000px;
        }
        .mod-h2-basic02 .mod-main-inner p {
            display: none;
        }

.mod-dl-date01 {
    overflow: hidden;
    margin-top: 5px;
    border-bottom: 1px solid #401700;
}
    .mod-dl-date01 dt,
    .mod-dl-date01 dd {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .mod-dl-date01 dt {
        float: left;
        clear: both;
    }
    .mod-dl-date01 dd {
        padding-left: 10em;
        border-top: 1px dotted #c0a478;
    }
    .mod-dl-date01 dt:first-child + dd {border-top: 0;}

    .mod-dl-date01 dd a {/*ex:p*/
        padding-left: 20px;
        background: url(/jqra/img/ico-tri01.jpg) no-repeat 0 center;
    }
/*
    .mod-dl-date01 dd p.description {
        padding-top: 5px;
        font-size: 85%;
        background: transparent;
    }
*/
    .mod-dl-date01 dd a {
        text-decoration: none;
        color: #333;
    }
    .mod-dl-date01 dd a:hover {text-decoration: underline;}

/*** media query ***/
@media screen and (max-width: 1024px) {
    /*ブレークポイント1024px*/
}

@media screen and (max-width: 768px) {
    /*ブレークポイント768px*/
}

@media screen and (max-width: 480px) {
    /*ブレークポイント480px*/
}

@media screen and (max-width: 320px) {
    /*ブレークポイント320px*/
}