/* ========================================
* File Name: style.css
* Created Date: 2015.4
* Author: TAM
======================================== */

ul.lnav {
    border:solid 1px #C5BFB2;
    float: left;
    width: 180px;
    padding: 20px 0;
}
ul.lnav li {
    font-size: 2em;
    padding: 0 50px 12px;
}
ul.lnav li:last-of-type {
    padding: 0 50px;
}
ul.lnav li a {
    display: block;
    background: url(../../common/images/arrow_br_r.png) no-repeat left center;
    padding-left: 10px;
}
ul.lnav li a span {
    padding: 1px 8px 1px 6px;
}
ul.lnav li a:hover span,
ul.lnav li.active a span {
    background: #C3A000;
    color: #fff;
}

ul.photo-area {
    float: right;
    width: 736px;
    letter-spacing: -.40em;
}
ul.photo-area li {
    display: inline-block;
    vertical-align: middle;
    width: 230px;
    margin:0 20px 20px 0;
    letter-spacing: normal;
}
ul.photo-area li:nth-child(3n) {
    margin-right: 0;
}
ul.photo-area li img {
    width: 100%;
    height: auto;
}
ul.photo-area li a {
  -webkit-transition: 200ms ease-in-out;
  transition: 200ms ease-in-out;
}
ul.photo-area li a:hover{
  filter: alpha(opacity=60);
  -moz-opacity: .6;
  opacity: .6;
  -webkit-transition: 200ms ease-in-out;
  transition: 200ms ease-in-out;
}

@media screen and (max-width: 640px) {
ul.lnav {
    border:none;
    float: none;
    width: auto;
    padding: 0 0 10px;
    margin-bottom: 20px;
}
ul.lnav li {
    font-size: 1.6em;
    padding: 0;
    float: left;
    margin: 0 10px 10px 0;
}
ul.lnav li:last-of-type {
    padding: 0;
}
ul.lnav li a {
    padding-left: 8px;
}
ul.lnav li a span {
    padding: 1px 8px 1px 6px;
}
ul.lnav li a:hover span,
ul.lnav li.active a span {
    background: #C3A000;
    color: #fff;
}
ul.photo-area {
    float: none;
    width: auto;
}
ul.photo-area li {
    width: 48%;
    margin:0 2% 2% 0;
}
ul.photo-area li:nth-child(3n) {
    margin:0 2% 2% 0;
}
ul.photo-area li:nth-child(2n) {
    margin-right: 0;
}
}