@charset "utf-8";
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

.mainContents {
    margin:0 auto;
    max-width: 1080px;
    width: auto;
}

/* header */
.headTitle{
    margin-bottom:2rem;
    padding: 1rem .5rem;
    background:#000;
    color:#fff;
    font-size:2rem;
    font-weight:bold;
    line-height: 1.4;
    text-align:center;
}

/*contents*/
.contentsTitle{
    margin: 2rem auto;
    padding: .5rem 1rem;
    font-size:1.5rem;
    font-weight:bold;
    color:#b70014;
    line-height:1.4;
    border-left:10px solid #b70014;
}
.contentsTitle span {
	color:#000;
}
.contentsImg {
	margin:0 auto 2rem;
    width:90%;
}
.contentsImg img{
    width:100%;
    border:1px solid #ccc;
    box-sizing:border-box;
}

.detailLink {
    display: grid;
    grid-template-columns: 200px 1fr;
    margin: 1rem auto 2rem;
    width: 96%;
}
.detailLink dt {
    font-size:1.3rem;
    text-align:center;
}
.detailLink dt a {
    display:block;
    background:#50ccf0;
    padding:0.3em 0;
    color:#fff;
    text-decoration:none;
    border-radius:30px;
    transition:0.6s;
}
.detailLink .westLink a {
    background:#f0c250;
    color:#8e6d42;
}
.detailLink dt a:before {
    font-family:"FontAwesome";
    content:"\f138";
    padding-right:6px;
}
.detailLink dt a:hover {
    opacity: 0.7;
}
.detailLink dd {
    margin:0 0 3rem 2rem;
    font-size:1rem;
}
.detailLink dd span:first-of-type {
	background:linear-gradient(transparent 55%, #fff001 55%);
}


@media screen and (max-width: 767px) {
    
.mainContents {
    max-width: 90%;
}

/* header */
.headTitle{
    margin-bottom: 1rem;
    padding: .5rem;
    font-size: 1rem;
    line-height: 1.6;
}
    
/*contents*/
.contentsTitle{
    margin-bottom: 1rem;
    padding: .3rem 0.8rem;
    font-size: 1.125rem;
    border-left: 8px solid #b70014;
}
.contentsImg{
    width:100%;
}

.detailLink {
    grid-template-columns:1fr;
}
.detailLink dd {
    margin: 0 auto 1rem;
}
.detailLink dt {
    margin-bottom: 2rem;
}   
.eastLink {
    order: 2;
}
.eastList {
    order: 1;
}
.westLink {
    order: 4;
}
.westList {
    order: 3;
}
    
}