@charset "UTF-8";
@media only screen and (max-width: 640px) {

    .list_03, .list_04, .list_genre {
        width: 90%;
        margin: 0 auto 30px auto;
        overflow: hidden;
        height: auto;
    }
    .list_genre h2 {
        font-size: 18px;
        color: #00984B;
        font-weight: bold;
        margin: 10px auto 10px auto;
        text-align:center;
    }
	.list_genre table {
        margin: 0 auto;
    }
    .list_genre table td {
        width: 33.3%;
        height: auto;
        text-align: center;
        vertical-align: middle;
        font-size: 12px;
        font-weight: bold;
        line-height: 2em;
        overflow: hidden;
        position: relative;
        z-index: 1;
        border-bottom: none;
        display: block;
        padding: 0;
        line-height:normal;
        float: left;
    }
    .list_genre td a {
        color: #000;
        display: block;
        height: 100px;
    }
    .list_genre p {
        border-radius: 50%;
        -moz-border-image: border-radius: 50%;
        -webkit-border-image: border-radius: 50%;
        overflow: hidden;
        position: relative;
        z-index: 1;
        margin: 0 auto;
        width: 60px;
        height: 60px;
    }
    .list_genre td img {
        transition: .3s ease-in-put;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        position: relative;
        z-index: 0;
        width: 100%;
        height: 100%;
    }
    .list_03,
    .list_04,
    .list_genre {
        width: 90%;
        margin: 0 auto 30px auto;
        overflow: hidden;
        height: auto;
    }
    .list_03 li, .list_04 li {
        width: 99%;
        overflow: hidden;
        height: auto;
        padding-bottom: 5px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
        -webkit-box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
        -moz-box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
    }
        .list_03 li h3,
        .list_04 li h3 {
        margin: 15px 15px 10px 15px;
        line-height: 1.4em;
    }
        .list_03 li h3 a,
        .list_04 li h3 a {
        color: #000;
        font-size: 14px;
        font-weight: bold;
    }
        .list_04 li h4 {
        float: left;
    }
        .list_04 li h4 {
        font-size: 13px;
        width: 90%;
        padding: 5px 0 0 0;
        margin: 0 5%;
        border-bottom: 1px solid #CCC;
    }
        .list_04 li .time {
        float: right;
        font-size: 12px;
        padding: 4px 15px 0 0;
    }
    .list_04 h2 {
        font-size: 18px;
        color: #00984B;
        font-weight: bold;
        margin: 10px auto 10px auto;
        text-align:center;
    }


	/*outdoor guide info*/
	.info_list {
		width: 90%;
        margin: 0 auto 30px auto;
        overflow: hidden;
        height: auto;
	}

	.info_list h2{
	    font-size: 18px;
        color: #00984B;
        font-weight: bold;
        margin: 10px auto 10px auto;
        text-align:center;
	}

	.list{
        overflow: hidden;
        height: auto;
        padding-bottom: 5px;
        border: 1px solid #ccc;
        box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
        -webkit-box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
        -moz-box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
        width: 60%;
        margin: 0 auto 30px auto;
        height: auto;
	}

	.list h3{
		margin: 15px 15px 10px 15px;
        line-height: 1.4em;
	}
	.list h3 a{
	color: #000;
        font-size: 14px;
        font-weight: bold;
	}

	.list h4{
		font-size: 13px;
        width: 90%;
        padding: 5px 0 0 0;
        margin: 0 5%;
        border-bottom: 1px solid #CCC;
	}
	.list p.time{
		float: right;
        font-size: 12px;
        padding: 4px 15px 0 0;
	}

}


@media screen and (min-width: 641px) {

   .list_genre {
        width: 1080px;
        margin: 0 auto;
        overflow: hidden;
        height: auto;
    }
        .list_genre h2 {
        font-size: 22px;
        color: #00984B;
        font-weight: bold;
        font-family: 'font1';
        margin: 40px auto 20px auto;
    }
        .list_genre table {
        padding: 0 0 30px 0;
        width: 1080px;
        margin: 0 auto;
    }
        .list_genre table td {
        text-align: center;
        vertical-align: middle;
        font-size: 13px;
        font-weight: bold;
        margin: 10px 7.5px;
        line-height: 2em;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
        .list_genre p {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        -moz-border-image: border-radius: 50%;
        -webkit-border-image: border-radius: 50%;
        overflow: hidden;
        position: relative;
        z-index: 10;
        margin: 0 auto;
        -webkit-transform: translateZ(0);
        -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
    }
    .list_genre td img {
        transition: .3s ease-in-put;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        position: relative;
        z-index: 0;
        width: 120px;
        height: 120px;
    }
    .list_genre td a {
    	color:#666;
    }


	.list_04 ul > *:first-child + * {
        margin: 0 8px 0 17px;
    }
        .list_04 ul > *:first-child + * + * {
        margin: 0 17px 0 8px;
    }
    .list_04 {
        width: 1080px;
        margin: 40px auto 150px;
        overflow: hidden;
        height: auto;
    }
    .list_04 h2 {
        font-size: 22px;
        color: #00984B;
        font-weight: bold;
        font-family: 'font1';
        margin: 0px auto 10px auto;
    }
	.list_04 ul {
    	overflow: hidden;
	}
        .list_04 li {
        width: 255px;
        height: 240px;
        float: left;
        border: 1px solid #ccc;
        box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
        -webkit-box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
        -moz-box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
    }
        .list_04 .scale {
        width: 255px;
        height: 120px;
        overflow: hidden;
    }
        .list_04 li img {
        width: 255px;
        height: 120px;
    }
        .list_04 li h3 {
        height: 50px;
        margin: 15px;
    }
        .list_04 li h3 a {
        color: #000;
        font-size: 15px;
        font-weight: bold;
    }
        .list_04 li h4 {
        width: 225px;
        font-size: 13px;
        margin: 0 0 0 15px;
        border-bottom: 1px solid #CCC;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -moz-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
    }
    .list_04 li .time {
        text-align: right;
        font-size: 11px;
        padding: 1px 15px 0 0;
    }
}