@charset "utf-8";

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

Layout

==========================================*/
/* contents
------------------------------------------*/
#contents {
    width: 780px;
    float: left;
    margin: 0 auto;
    font-size: 12px;
    color: #474747;
}
#contents a{
    color: #474747;
    text-decoration: none;
}
#contents a:hover{
    text-decoration: underline;
}
#contents .section a:hover img {
    -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}


/* header
------------------------------------------*/
#contents .header{
    text-align: center;
}


/* section
------------------------------------------*/
#contents .section{
    width: 752px;
    margin: 0 auto 20px;
}

/* h3 */
#contents .section h3{
    height: 62px;
    padding-left: 22px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    border-radius: 10px 10px 0 0;
    background-position: 0 bottom;
    background-repeat: no-repeat;
}
#contents .section h3 a{
    position: absolute;
    right: 28px;
    top: 16px;
}

/* box */
#contents .section .box{
    background: #fff;
    border-radius: 0 0 10px 10px;
}

/* catch */
#contents .section dl.catch{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 0 19px;
}
#contents .section dl.catch dt{
    width: 370px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#contents .section dl.catch dt a img{
    max-width: 270px;
    max-height: 270px;
    width: auto;
    height: auto;
}
#contents .section dl.catch dt span{
    margin-bottom: 12px;
    border: none;
    display: block;
}
#contents .section dl.catch dd{
    width: 320px;
    font-size: 18px;
    line-height: 1.6;
    font-weight: bold;
    padding-right: 50px;
}

/* lists */
#contents .section ul.lists{
    border-top: 1px solid #f1f1f1; 
    display: flex;
    flex-wrap: wrap;
}
#contents .section ul.lists li{
    width: 25%;
    padding: 16px;
    border-right: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    box-sizing: border-box;
}
#contents .section ul.lists li:nth-of-type(4n){
    border-right: none;
}
#contents .section ul.lists li:nth-of-type(n+5){
    border-bottom: none;
}
#contents .section ul.lists.col3 li{
    width: calc(100% / 3);
}
#contents .section ul.lists.col3 li:nth-of-type(3n){
    border-right: none;
}
#contents .section ul.lists.col3 li:nth-of-type(4n){
    border-right: 1px solid #f1f1f1;
}
#contents .section ul.lists.col3 li:nth-of-type(n+4){
    border-bottom: none;
}
#contents .section ul.lists li p{
    width: 150px;
    height: 150px;
    text-align: center;
    margin: 0 auto 1em;;
}
#contents .section ul.lists li p img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#contents .section ul.lists.category{
    border-top: none; 
}
#contents .section ul.lists.category a.btn{
    display: block;
    width: 150px;
    height: 30px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    line-height: 30px;
    padding-left: 4px;
    margin: 0 auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    box-sizing: border-box;
}
#contents .section ul.lists.category a.btn:hover{
    text-decoration: none;
}

/* special */
#contents .section .special{
    padding: 50px 20px 20px;
    text-align: center;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-color: #f1f1f1;
}
#contents .section .special a{
    display: block;
}
#contents .section .special img{
    width: 100%;
}

/* footer */
#contents .footer{
    text-align: center;
    padding: 18px 0; 
}