@charset "UTF-8";

.visual{background: url(/asset/img/sub-visual-board.png) no-repeat center center}

/* board-list */
.board-list-wrap table{ width: 100%; margin-bottom: 50px;}
.board-list-wrap table tr {
    height: 50px; border-bottom: 1px solid #ddd;
    line-height: 50px;
}
.board-list-wrap thead{width: 100%; border-top: 2px solid #111;}
.board-list-wrap thead th{width: 10%;}
.board-list-wrap thead th:nth-child(2){width:60%}
.board-list-wrap tbody {width: 100%; text-align: center;}
.board-list-wrap tbody tr {position: relative;}
.board-list-wrap tbody tr::after {content: ""; display: none;
    width: 2px; height: 100%;
    background-color: #34568b;
    position: absolute;left: 0;top: 0;
}
.board-list-wrap tbody tr:hover {background-color: #f7f7f7;
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
}
.board-list-wrap tbody tr:hover::after {display: block;}
.board-list-wrap tbody td {width: 10%}
.board-list-wrap tbody td.td-tit{ width: 60%; text-align: left;}
.board-list-wrap tbody td .icon-reply{ margin: -5px 10px 0 0 ;}
.pg-wrap {display: flex; justify-content: center;line-height: 40px;}
.pg-wrap > a {margin: 0 20px;font-size: 3rem;}
.pg-wrap .pg-num-box {display: flex;}
.pg-wrap .pg-num-box a{
    width: 40px; height: 40px; margin: 0 5px;
    text-align: center;  color: #fff;
    background-color: #34568b;
    border-radius: 100%;
}

/* board-write */
.board-write-wrap h3{
    margin-bottom: 20px; padding: 0 40px;
    border-bottom: 2px solid #111;
    font-size: 2.5rem; line-height: 50px; color: #34568b;
}
.board-write-wrap h3 span{color: #999;}
.board-write-wrap fieldset{padding: 0 40px;}
.board-write-wrap fieldset label {display: none;}
.board-write-wrap fieldset .board-subject {
    width: 100%; height: 50px; margin-bottom: 20px; padding: 10px 20px;
    border: 1px solid #ddd;
}
.board-write-wrap fieldset .board-subject::placeholder {color: #aaa;}
.board-write-wrap fieldset .board-content {
    width: 100%; height: 350px; margin-bottom: 20px; padding: 10px 20px;
    border: 1px solid #ddd;
}
.board-write-wrap fieldset .board-content::placeholder {color: #aaa;}
.board-write-wrap fieldset .board-attact {
    width: 100%; height: 50px; margin-bottom: 20px; padding: 10px 20px 10px 60px;
    border: 1px solid #ddd;
    background: url(/asset/img/icon-file.png) no-repeat 20px center;
}
.board-btn-wrap { display: flex; justify-content: center;width: 100%}
.board-btn-wrap button {height: 40px;border: none; color: #fff}
.board-btn-wrap button.board-btn-write {
    width: 200px; margin-right: 20px;
    background-color: #34568b;
}
.board-btn-wrap button.board-btn-cancel {width: 100px; background-color: #999}

/* board-view */
.board-view-wrap {margin-bottom: 50px;}
.board-view-subject {
    width: 100%; height: 100px; padding: 15px 40px;
    border-top: 2px solid #111; border-bottom: 1px solid #eee;
    background-color: #f7f7f7;
}
.board-view-subject p{width: 100%; height: 40px; font-size: 2rem; line-height: 40px}
.board-view-subject ul{ display: flex; justify-content: space-between;width: 100%; height: 30px}
.board-view-subject li{font-size: 14px; line-height: 30px; color: #999; }
.board-view-contents {min-height: 300px; padding: 40px; white-space: pre-line;}
.board-view-file {
    width: 100%; height: 70px; padding: 0 40px 0 80px;
    border-top: 1px solid #eee; border-bottom: 1px solid #eee;
    line-height: 70px;
    background: url(/asset/img/icon-file.png) no-repeat 40px center;
}
.board-view-reply{margin-bottom: 30px; padding: 0 40px}
.board-view-reply h4{
    width: 100%; height: 40px; margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    font-size: 1.8rem; line-height: 40px;
    position: relative;
}
.board-view-reply h4::after{content: "";
    width: 200px; height: 2px;
    background-color: #34568b;
    position: absolute; left: 0;bottom: 0;
}
.board-view-reply-list{margin-bottom: 30px;}
.board-view-reply-list li{display: flex; justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.board-view-reply-list dl{padding-left: 40px;background: url(/asset/img/icon-reply-mem.png) no-repeat left top}
.board-view-reply-list dt{height: 25px;font-size: 1.2rem; line-height: 25px; color: #999}
.board-view-reply-list dt strong{margin-right: 20px;}
.board-view-reply-list dt strong span{color: #333;}
.board-view-reply-list dd{padding: 10px 0; font-size: 1.4rem; color: #777;white-space: pre-line}
.board-view-reply-list div a{display: inline-block;font-size: 1.3rem; color: #aaa;}
.board-view-reply-list div a:first-child {
    height: 25px; margin-right: 10px;border-bottom: 2px solid #34568b;
    color: #34568b;
}
.board-view-reply-write label{display: none;}
.board-view-reply-write .board-reply-content {
    width: 100%; height: 100px; padding: 20px; margin-bottom: 10px;
    border: 1px solid #eee;
}
.board-view-reply-write .board-reply-content::placeholder {color: #aaa;}
.board-view-reply-write .board-btn-reply { float: right;
    width: 100px; height: 30px;
    line-height: 30px; color: #fff; text-align: center;
    background-color: #638ed4;
}

/* board-edit */

/* board-faq */
.board-faq-wrap {width: 100%; border-top: 2px solid #111}
.board-faq-wrap li{
    padding: 25px 0 25px 200px; border-bottom: 1px solid #eee;
    position: relative;
    transition: all .3s;
}
.board-faq-wrap li:hover {background-color: #f7f7f7; box-shadow: 0 0 10px rgba(0,0,0,0.2)}
.board-faq-wrap li:hover span{ color: #34568b; }
.board-faq-wrap li.on {background-color: #f7f7f7; box-shadow: 0 0 20px rgba(100,100,100,0.3)}
.board-faq-wrap li.on span{ color: #34568b; }
.board-faq-wrap li:last-child{ border: none; }
.board-faq-wrap span{
    width: 100px; height: 100px;
    font-size: 7rem; line-height: 100px; color: #999;  text-align: center; 
    position: absolute; left: 50px; top: 10px;
    transition: all .3s;
}
.board-faq-wrap p{height: 40px; font-weight: 700; font-size: 2rem; color: #34568b; line-height: 40px}
.board-faq-wrap div{white-space: pre-line;}


/* gallery-list */
.gallery-list-wrap table{ width: 100%; margin-bottom: 50px;}
.gallery-list-wrap table tr {
    height: 50px; border-bottom: 1px solid #ddd;
    line-height: 50px;
}
.gallery-list-wrap thead{width: 100%; border-top: 2px solid #111;}
.gallery-list-wrap thead th:nth-child(1){width:60%}
.gallery-list-wrap tbody {width: 100%; text-align: center;}
.gallery-list-wrap tbody tr:hover {background-color: #f7f7f7;
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
}
.gallery-list-wrap tbody td {width: 10%}
.gallery-list-wrap tbody td.td-tit{ 
    width: 60%; padding: 10px 0; 
    text-align: left;
}
.gallery-list-wrap td.td-tit a{display: flex; 
    justify-content: flex-start; align-items: center;
}
.gallery-list-wrap td.td-tit figure{ overflow: hidden;
    width: 152px; height: 102px;
    margin-right: 20px;
    border: 1px solid #777;
}
.gallery-list-wrap td.td-tit figure img{
    width: 150px; height: 100px; 
    transform: scale(1);  transition: all .4s;
}
.gallery-list-wrap td.td-tit:hover figure img {transform: scale(1.1);}
.gallery-list-wrap td.td-tit div {width: 75%;
    margin-right: auto;
}
.gallery-list-wrap td.td-tit div em{ display: block;
    margin-bottom: 15px;
    font-weight: 700; font-size: 2rem; line-height: 1;  color: #333;
}
.gallery-list-wrap td.td-tit div p{
    color: #777; line-height: 24px;
}
.gallery-list-wrap td.td-tit .gallery-icon{ width: 30px;height: 30px;}

@media only screen and (max-width:1240px){
    /* board-list */
    .board-list-wrap {}
    .board-list-wrap table{margin-bottom: 20px; }
    .board-list-wrap table tr {height: 40px; line-height: 40px;}
    .board-list-wrap thead th{width: 10%;font-size: 1.4rem;}
    .board-list-wrap thead th:nth-child(1){display:none}
    .board-list-wrap thead th:nth-child(2){width:60%}
    .board-list-wrap thead th:nth-child(3){width:20%}
    .board-list-wrap thead th:nth-child(4){display:none}
    .board-list-wrap thead th:nth-child(5){display:none}
    .board-list-wrap tbody {text-align: center;font-size: 1.3rem;}
    .board-list-wrap tbody td.td-tit{text-align: left;width: 100px;}
    .board-list-wrap tbody td .icon-reply{ margin: -5px 10px 0 0 ;}
    .board-list-wrap tbody td:nth-child(1){display:none}
    .board-list-wrap tbody td:nth-child(4){display:none}
    .board-list-wrap tbody td:nth-child(5){display:none}
    .pg-wrap {line-height: 25px;}
    .pg-wrap > a { margin: 0 10px; font-size: 2rem; }
    .pg-wrap .pg-num-box a{ width: 25px; height: 25px; margin: 0 1px; font-size: 1.2rem}

    /* board-write */
    .board-write-wrap h3{margin-bottom: 10px; padding: 0;font-size: 1.6rem; line-height: 30px}
    .board-write-wrap fieldset{padding: 0; font-size: 1.3rem;}
    .board-write-wrap fieldset .board-subject {height: 30px; margin-bottom: 10px; padding: 10px}
    .board-write-wrap fieldset .board-content {height: 200px; margin-bottom: 10px; padding: 10px}
    .board-write-wrap fieldset .board-content::placeholder {color: #aaa;}
    .board-write-wrap fieldset .board-attact {
        height: 40px; margin-bottom: 10px; padding: 8px 5px 10px 40px;
        background-position: 10px center;
        background-size: 20px 20px;
    }

    /* board-view */
    .board-view-wrap {margin-bottom: 20px;}
    .board-view-subject {height: auto; padding: 15px 10px}
    .board-view-subject p{height: auto;font-size: 1.6rem; line-height: 25px;}
    .board-view-subject li{font-size: 12px;}
    .board-view-contents {min-height: auto; padding: 20px 10px; font-size: 1.4rem}
    .board-view-file {
        height: 50px; padding: 0 10px 0 40px;
        font-size: 1.2rem; line-height: 50px; color: #999;
        background: url(/asset/img/icon-file.png) no-repeat 10px center;
        background-size: 20px 20px;
    }
    .board-view-reply{ margin-bottom: 10px; padding: 0 10px;}
    .board-view-reply h4{ height: 30px; font-size: 1.6rem; line-height: 30px;}
    .board-view-reply h4::after{width: 120px; }
    .board-view-reply-list{margin-bottom: 20px;}
    .board-view-reply-list dl{padding-left: 30px; background-position:left 3px; background-size: 20px 20px}
    .board-view-reply-list dt strong{margin-right: 20px;}
    .board-view-reply-list dt strong span{color: #333;}
    .board-view-reply-list dd{ padding: 5px 0;font-size: 1.3rem; }
    .board-view-reply-list div a{display: block; font-size: 1.3rem; color: #aaa; }
    .board-view-reply-list div a:first-child { margin-right: 0px; margin-bottom: 5px; }
    .board-view-reply-write label{display: none;}
    .board-view-reply-write .board-reply-content { padding: 10px; margin-bottom: 0;font-size: 1.3rem}
    .board-view-reply-write .board-btn-reply { }
    .board-btn-wrap {margin-top: 30px;}

    /* board-edit */

    /* board-faq */
    .board-faq-wrap li{padding: 15px 0 15px 30px; margin-bottom: 10px;}
    .board-faq-wrap span{
        width: 25px; height: 25px;
        font-size: 1.5rem; line-height: 25px; color: #999;  text-align: center; 
        position: absolute; left: 5px; top: 12px;
        transition: all .3s;
    }
    .board-faq-wrap p{
        height: auto; margin-bottom: 5px;
        font-weight: 700; font-size: 1.5rem; color: #34568b; line-height: 20px;
    }
    .board-faq-wrap div{font-size: 1.3rem; white-space: pre-line}
    .board-faq-wrap div img {width: 100%;}

    /* gallery-list */
    .gallery-list-wrap table{margin-bottom: 20px; }
    .gallery-list-wrap table tr {height: 40px; line-height: 40px;}
    .gallery-list-wrap thead th{width: 10%;font-size: 1.4rem;}
    .gallery-list-wrap thead th:nth-child(1){width:100%}
    .gallery-list-wrap thead th:nth-child(2){display:none}
    .gallery-list-wrap thead th:nth-child(3){display:none}
    .gallery-list-wrap tbody {text-align: center;font-size: 1.3rem;}

    .gallery-list-wrap tbody td:nth-child(2){display:none}
    .gallery-list-wrap tbody td:nth-child(3){display:none}

    .gallery-list-wrap td.td-tit figure{ 
        width: 92px; height: 62px;
        margin-right: 10px;
    }
    .gallery-list-wrap td.td-tit figure img{
        width: 90px; height: 60px;  
    }
    .gallery-list-wrap td.td-tit div {margin-right: 10px;}
    .gallery-list-wrap td.td-tit div em{
        margin-bottom: 5px;
        font-size: 1.6rem;
    }
    .gallery-list-wrap td.td-tit div p{ line-height: 1.2;    }

}