@charset "utf-8";
/* CSS Document */

/*pc*/

@media print, screen and (min-width: 769px){

    .hed_img {
        background: url(../images/category/key/hed_img.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        width:960px;
        height:50px;
        margin-bottom:20px;
        border-bottom: 1px solid #4C4948;
        padding-bottom:10px;
    }
    
    .hed_img img{
        display: none;
    }

    /*index
    -------------------------*/
    .key_block {
        list-style: none;
        width: 860px;
        padding-left: 20px;
    }
    .key_block li {
        float: left;
        width: 195px;
        margin-bottom: 20px;
        margin-right: 20px;
    }
    .key_block li img{
        display: none;
    }
    .key_block a:hover {
        filter:alpha(opacity=70);
        opacity:0.7;
    }
    li.btn_key00 {
        width: 400px;
        float: left;
        margin-bottom: 20px;
        margin-right: 30px;
    }

    .btn_key00 {
        background: url(../images/category/key/btn_key00.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        height: 400px;
        width: 400px;
    }
    .btn_key01 a {
        background: url(../images/category/key/btn_key01.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        height: 195px;
        width: 195px;
        display: block;
    }
    .btn_key02 a {
        background: url(../images/category/key/btn_key02.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        height: 195px;
        width: 195px;
        display: block;
    }
    .btn_key03 a {
        background: url(../images/category/key/btn_key03.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        height: 195px;
        width: 195px;
        display: block;
    }
    .btn_key04 a {
        background: url(../images/category/key/btn_key04.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        height: 195px;
        width: 195px;
        display: block;
    }
    .btn_key05 a {
        background: url(../images/category/key/btn_key05.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        height: 195px;
        width: 195px;
        display: block;
    }
    .btn_key06 a {
        background: url(../images/category/key/btn_key06.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        height: 195px;
        width: 195px;
        display: block;
    }
    .btn_key07 a {
        background: url(../images/category/key/btn_key07.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        height: 195px;
        width: 195px;
        display: block;
    }
    .btn_key08 a {
        background: url(../images/category/key/btn_key08.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        height: 195px;
        width: 195px;
        display: block;
    }
    .btn_key09 a {
        background: url(../images/category/key/btn_key09.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        height: 195px;
        width: 195px;
        display: block;
    }
    .btn_key10 a {
        background: url(../images/category/key/btn_key10.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        height: 195px;
        width: 195px;
        display: block;
    }
    .btn_key11 a {
        background: url(../images/category/key/btn_key11.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        height: 195px;
        width: 195px;
        display: block;
    }
    .btn_key12 {
        background: url(../images/category/key/btn_key12.gif) no-repeat 0px 0px;
        text-indent: -9999px;
        height: 195px;
        width: 195px;
        display: block;
    }


    a.pdf_icon {
        background: #f18c38 none repeat scroll 0 0;
        border-radius: 3px;
        color: #fff;
        display: inline-block;
        font-size: 0.93333rem;
        margin-top: 30px;
        padding: 5px 50px;
        text-align: center;
        text-decoration: none;
    }


    a.pdf_icon:hover {
        opacity:0.8;
    }
    
    
    p.flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    a.link {
        border: 2px solid #f18c38;
        border-radius: 3px;
        color: #f18c38;
        display: inline-block;
        font-size: 0.93333rem;
        font-weight: 900;
        margin-top: 30px;
        padding: 5px 0px;
        text-align: center;
        text-decoration: none;
        width: 40%;
    }
    
    
    a.link:hover {
        opacity:0.8;
    }
    
}

/*sp*/

@media print, screen and (max-width: 768px){
    
    .hed_img {
        display: flex;
        justify-content: space-between;
        margin-bottom:10px;
        border-bottom: 1px solid #4C4948;
    }
    
    .had_img1 img{
        width: 100%;
        height: auto;
    }
    
    .had_img2 img{
        width: 100%;
        height: auto;
    }


    /*index
    -------------------------*/
    .key_block {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
    }
    .key_block li {
        width: 40%;
        margin: 0 auto 20px;
    }
    
    .key_block a:hover {
        filter:alpha(opacity=70);
        opacity:0.7;
    }
    li.btn_key00 {
        margin: 0 auto;
    }

    .btn_key00 {
        display: block;
        width: 100%;
    }
    .btn_key00 img {
        width: 100%;
        height: auto;
    }
    
    .btn_key01 a {
        display: block;
        width: 100%;
    }
    .btn_key01 a img{
        width: 100%;
        height: auto;
    }
    
    .btn_key02 a {
        display: block;
        width: 100%;
    }
    .btn_key02 a img{
        width: 100%;
        height: auto;
    }
    
    .btn_key03 a {
        display: block;
        width: 100%;
    }
    .btn_key03 a img{
        width: 100%;
        height: auto;
    }
    
    .btn_key04 a {
        display: block;
        width: 100%;
    }
    .btn_key04 a img{
        width: 100%;
        height: auto;
    }
    
    .btn_key05 a {
        display: block;
        width: 100%;
    }
    .btn_key05 a img{
        width: 100%;
        height: auto;
    }
    
    .btn_key06 a {
        display: block;
        width: 100%;
    }.btn_key06 a img{
        width: 100%;
        height: auto;
    }
    
    .btn_key07 a {
        display: block;
        width: 100%;
    }
    .btn_key07 a img{
        width: 100%;
        height: auto;
    }
    
    .btn_key08 a {
        display: block;
        width: 100%;
    }
    .btn_key08 a img{
        width: 100%;
        height: auto;
    }
    
    .btn_key09 a {
        display: block;
        width: 100%;
    }
    .btn_key09 a img{
        width: 100%;
        height: auto;
    }
    
    .btn_key10 a {
        display: block;
        width: 100%;
    }
    .btn_key10 a img{
        width: 100%;
        height: auto;
    }
    
    .btn_key11 a {
        display: block;
        width: 100%;
    }
    .btn_key11 a img{
        width: 100%;
        height: auto;
    }
    
    .btn_key12 {
        display: block;
        width: 100%;
    }
    .btn_key12 img{
        width: 100%;
        height: auto;
    }


    a.pdf_icon {
        background: #f18c38 none repeat scroll 0 0;
        border-radius: 3px;
        color: #fff;
        display: inline-block;
        font-size: 0.93333rem;
        padding: 5px 50px;
        text-align: center;
        text-decoration: none;
    }


    a.pdf_icon:hover {
        opacity:0.8;
    }
    
    
    a.link {
        border: 1px solid #f18c38;
        border-radius: 3px;
        color: #f18c38;
        display: block;
        font-size: 0.93333rem;
        font-weight: 900;
        margin-top: 30px;
        padding: 5px 0px;
        text-align: center;
        text-decoration: none;
    }
    
}