@charset "UTF-8";


/* 事例概要
------------------------------ */

.exam-col{
position:relative;
margin:1em 1em 2em;
padding:0.5em 1em;
border:#CCC solid 1px;
background-color:#FCFCFC;
background-color:#F4F4F4;
}

.construction-num{
position:absolute;
top:0;
right:0;
background-color:#999;
color:#FFF;
padding:0.2em 0.5em;
font-size:120%;
}

.exam-col h2{
font-size:200% !important;
margin:0.5em !important;
padding:0.5em 0.5em 0;
letter-spacing:0.1em;
border:none !important;
}

.related-info{
background-color:#FFF;
}

.related-info ul{
padding:0.5em;	
font-size:120%;
text-align:left;
border:dotted #666666 1px;
}


.related-info ul li{
display:inline-block;	
padding:0.2em 0.2em 0.2em 1em;
}

.related-info ul li:before{
padding-right:0.2em;
text-indent:-1em;
display:inline-block;
margin:0 0.05em 0 1em;
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
content:"\f046";
color:#FF9900;
font-size:80%;
}


.outline{
margin:1em auto 0;
}

.outline > div p{
text-align:left;
}

.photo{
max-width:600px;
height:auto;
margin:0 auto 1em;
}





/* .detail-link
------------------------------ */

.detail-link{
margin:0 auto 1em;
padding:0.5em;
text-align:center;
font-size:120%;	
}

.detail-link div{
margin:10px;
}

.detail-link div a{
display:block;
margin:0 auto;
padding:0.5em;
max-width:200px;
height:auto;
text-decoration:none;
background-color:inherit;
color:#000;
background-color:#FFF;
vertical-align:middle;
border:#333 solid 2px;
transition:all 0.2s ease;
}

.detail-link div a:after{
position:absolute;
right:4%;
top:50%;
content:'\f105';
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
color:#000;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transform:translateY(-50%);
}

.detail-link div a:hover,
.detail-link div a:focus{
background-color:#333;
color:#FFF;
}

.detail-link div a:hover:after,
.detail-link div a:focus:after{
color:#FFF;
}


.navPagination {
	margin-bottom:20px;
}
.navPagination ul{
    text-align: center;
}
.navPagination ul li{
    display: inline-block;
    margin: 2px;
}
.navPagination ul li a{
    display: block;
    text-decoration: none;
    color: #FFF;
    background-color:rgba(2,128,128,0.5);
}
.navPagination ul li.active
{
    background-color:rgba(2,128,128,1);
    color: #FFFFFF;
}
.navPagination ul li.disabled{
		background-color: #EEE;
		color: #CCC;
}
.navPagination ul li.active,
.navPagination ul li.disabled,
.navPagination ul li a{
    padding: 8px 13px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	
}
.navPagination ul li a:hover{
    filter:brightness(90%) contrast(120%);
}



.more-info a{
position:relative;
display:block;
text-decoration:none;
max-width:96%;
margin:20px auto;
padding:8px 0;
text-align:center;
font-size:140%;
color:#000;
background-color:#FFCC33;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

.more-info a span.bm:after{
position:absolute;
left:4%;
top:50%;
content:'\f118';
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
font-size:110%;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transform:translateY(-50%);
}

.more-info a span.am:after{
position:absolute;
right:4%;
top:50%;
content:'\f0da';
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
font-size:110%;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transform:translateY(-50%);
}

.more-info a:hover,
.more-info a:focus {
filter:brightness(90%) contrast(120%);
}



@media only screen and (max-width: 768px) {
	.navPagination ul li{
		display:none;
	}
	.navPagination ul li:first-child,
	.navPagination ul li:last-child,
	.navPagination ul li.active{
		display:inline-block;
	}
}


@media all and (min-width:700px){


/* 事例概要
------------------------------ */
.exam-col{
position:relative;
margin:1em auto 2em;
}

.outline > div{
padding:1em;
}

.outline > div p{
margin:0 auto;
line-height:1.5;
}

.photo{
flex:0 0 30%;
}

.overview{
flex:0 0 60%;
}


.more-info a{
max-width:360px;
}


/* .detail-link
------------------------------ */

.detail-link{
display:flex;
justify-content:center;
}

.detail-link > div{
flex:0 0 40%;
}

}