@charset "utf-8";

@media screen and (min-width: 480px) {
    
    dl {
        margin: 5px 0px;
        clear: both;
    }
    
    dl:after {
        display: block;
        content: "";
        clear: both;
    }
    
    dt {
        width: 260px;
        background-color: #CCCCCC;
        font-size: 18px;
        float: left;
        clear: both;
        padding: 10px 50px;
        text-align: center;
    }
    dd {
        width: 740px;
        font-size: 18px;
        float: right;
        background-color: #EEEEEE;
        text-align: left;
        padding: 10px 50px;
    }
        
    .lntro {
        clear: both;
        width: 1000px;
        margin: 0 auto;
    
    }
    h3 {
        clear: both;
        width: 1000px;
        margin: 30px auto 10px auto;
        padding: 0;
        font-size: 20px;
        font-weight: bold;
        text-align: left;
    }
    
    .content p {
        margin: 15px 45px;
        text-align: left;
    }
    .lntro_img {
        float:left;
		width: 320px;
		margin-left: 10px;
    }
    figcaption {
		width: 320px;
        background-color:#CCCCCC;
        padding: 15px;
    }
    .space {
        clear:both;
    }
    
    #map {
        margin: 50px auto;
        width: 100%;
        background-color: rgba(238,238,238,1.00);
    }
    
    ol{
        text-align: left;
    }
    
    ul{
        text-align: left;
    }
.waku {
    margin: 0px 60px;
}
.content h4 {
    text-align: left;
}

    
}

@media screen and (max-width: 479px) {
    
    dl {
        display: block !important;
        margin: 5px 10px;
        width: 90% !important;
        clear: both;
    }
    
    dl:after {
        display: block;
        content: "";
        clear: both;
    }
    
    dt {
        display: block !important;
        width: 100% !important;
        background-color: #CCCCCC;
        font-size: 18px;
        float: none;
        clear: both;
        padding: 10px 0px !important;
        text-align: center;
    }
    dd {
        display: block !important;
        width: 100%;
        font-size: 18px;
        float: none;
        background-color: #EEEEEE;
        text-align: left;
        padding: 10px 50px;
    }
        
    .lntro {
        clear: both;
        width: 100%;
        margin: 0 auto;
    
    }
    h3 {
        clear: both;
        width: auto;
        margin: 15px 15px 0 15px;
        padding: 0;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
    }
    
    .content p {
        margin: 15px 15px;
        text-align: left;
    }
    
    figure {
        width: 70%;
        float: none;
        margin: 30px auto;
    }
    
    figure img {
        width: 100%;
        height: auto;
    }
    
    figcaption {
        width: 100%;
        margin: 0px auto;
        padding: 15px;
        background-color:#CCCCCC;
    }
    .space {
        clear:both;
    }
    
    
    #map {
        margin: 50px auto;
        width: 80%;
        background-color: rgba(238,238,238,1.00);
    }
    
    ol{
        text-align: left;
    }
    
    ul{
        text-align: left;
    }
.waku {
    margin: 0px 30px;
}
.content h4 {
    text-align: left;
}
    
    
    
}