@charset "utf-8";


body.livecamera_point {
    
}

/*--------------------------------------------------------------------------
#main
---------------------------------------------------------------------------*/

#main {
	padding: 3em 0 3em 0;
}

/*-------------------*/

.header {
    margin-bottom: 1em;
}

h1 {
    font-weight: normal;
    margin-bottom: 0;
    font-size: 130%;
}

h2 {
    background-color: rgba(38,75,128,1.00);
    padding: 0.5em;
    color: rgba(255,255,255,1.00);
    font-weight: normal;
    border-bottom: 5px solid;
    margin-bottom: 0;
    background-image: url("../img/bg_wave.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top 0 right 3em;
    font-size: 120%;
	line-height: 1.3;
    margin: 0.5em auto;
}

.header p {
    font-size: 80%;
}

/*-------------------*/

.cameras {
    display: flex;
    justify-content: space-between;
    text-align: justify;
    list-style-type: none;
    flex-wrap: wrap;
    line-height: 1.2;
    margin-left: auto;
    margin-right: auto;
}

.cameras>* {
    margin: 0;
}

.cameras .live::after {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    position: absolute;
    left: 12px;
    top: 8px;
    background-image: url("../img/mapico_video.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
}

.cameras .uryou::after {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    position: absolute;
    left: 12px;
    top: 8px;
    background-image: url("../img/uryou.png");
    background-repeat: no-repeat;
    background-size: 70% auto;
    background-position: center center;
}

.cameras .suii figure::after {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    position: absolute;
    left: 12px;
    top: 8px;
    background-image: url("../img/suii.png");
    background-size: 70% auto;
    background-repeat: no-repeat;
    background-size: 70% auto;
    background-position: center center;
}

/*-------------------*/

@media screen and (max-width:599px) {
    .cameras>* {
        flex-basis: 48%;
        flex-basis: 100%;
    }
}

@media screen and (min-width:600px) and (max-width:749px) {
    .cameras>* {
        flex-basis: 32%;
        flex-basis: 48%;
    }
}

@media screen and (min-width:750px) and (max-width:959px) {
    .cameras>* {
        flex-basis: 24%;
        flex-basis: 47.5%;
    }
}

@media screen and (min-width:960px) {
    .cameras>* {
        flex-basis: 19%;
        flex-basis: 47.5%;
    }
}

.cameras a[href^="http"] {
    padding-right: 0;
    margin-right: 0;
    background-image: none;
}


.cameras figcaption {
    text-align: center;
    padding: 0.5em;
    font-size: 90%;
}

.cameras img {
    border: 1px solid rgba(0,0,0,0.15);
    padding: 5px;
    width: 100%;
}

p.img {
	text-align: center;
}

figure {
	text-align: center;
	margin-bottom: 1em;
}

figcaption {
	margin: 1.5em auto;
	display: inline-block;
	padding: 0.5em 1em;
	background-color: rgba(220,220,220,1.00);
	border-radius: 4px;
	font-size: 80%;
	line-height: 1.2;
	letter-spacing: 0.05em;
}

figure>figcaption:first-child::before {
	content: '▼';
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) translateY(60%);
	font-size: 16px;
	line-height: 1;
	color: rgba(220,220,220,1.00);
}

figure img~figcaption::before ,
figure a~figcaption::before {
	content: '▲';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) translateY(-60%);
	font-size: 16px;
	line-height: 1;
	color: rgba(220,220,220,1.00);
}

/*-------------------*/

footer {
    padding-top: 4em;
}

footer::after {
    height: 100px;
    background-size: auto 100px;
}

/*-------------------*/