* {
font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
}

/*--------------------------------------------------------------------------
header
---------------------------------------------------------------------------*/
header {
}
header h1 {
width: 150px;
margin: 0 auto;
}

@media screen and (max-width: 768px) {
header h1 {
width: 110px;
margin: 0 auto;
}
}

/*--------------------------------------------------------------------------
article
---------------------------------------------------------------------------*/
article {
max-width: 1500px;
margin: 0 auto;
}

/*--------------------------------------------------------------------------
column
---------------------------------------------------------------------------*/
#column .label {
width: 250px;
position: relative;
}
#column .label span {
padding-right: 20px;
font-family: "CormoranGaramond", serif;
font-weight: 300;
font-size: 24px;
line-height: 24px;
letter-spacing: 0.1em;
position: relative;
background: #fff;
}


#column .label::before {
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
left: 0;
background: #333;
}


#column ul::before {
content: "";
display: block;
width: 23%;
order: 1;
}
#column ul::after {
content: "";
display: block;
width: 23%;
}
#column ul li {
max-width: 23%;
flex: 0 1 23%;
margin-bottom: 3%;
overflow: hidden;
position: relative;
border-radius: 10px;
}
#column ul li .cover img {
transition:1s all;
}
#column ul li:hover .cover img {
transform:scale(1.1,1.1);
transition:1s all;
opacity: 0.5;
}

#column ul li .info {
width: 100%;
padding: 15px 20px;
background: #000;
position: absolute;
left: 0;
bottom: 0;
opacity: 0.7;
}
#column ul li .info p {
color: #fff;
font-size: 14px;
line-height: 1.6em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
#column ul li .info span {
color: #fff;
font-size: 12px;
line-height: 12px;
letter-spacing: 0.1em;
}
#column ul li .info .name::after {
content: " ｜ ";
}
#column ul li .info .catch {
margin-top: 4px;
}

#column ul li img {
}

@media screen and (max-width: 1500px) {
#column {
width: 90%;
margin: 0 auto;
}
}

@media screen and (max-width: 980px) {
#column .label {
width: 250px;
position: relative;
}
#column .label span {
padding-right: 20px;
font-weight: 300;
font-size: 24px;
line-height: 24px;
letter-spacing: 0.1em;
position: relative;
background: #fff;
}
#column ul li {
max-width: 31%;
flex: 0 1 31%;
margin-bottom: 3.5%;
overflow: hidden;
position: relative;
border-radius: 10px;
}
#column ul li .info {
padding: 15px;
background: #000;
position: absolute;
left: 0;
bottom: 0;
opacity: 0.7;
}
#column ul li .info p {
color: #fff;
font-size: 13px;
line-height: 1.6em;
}
#column ul li .info span {
color: #fff;
font-size: 10px;
line-height: 10px;
letter-spacing: 0.1em;
}
#column ul li .info .catch {
margin-top: 2px;
}
}


@media screen and (max-width: 768px) {
#column .label {
width: 180px;
position: relative;
}
#column .label {
width: 180px;
position: relative;
}
#column .label span {
padding-right: 15px;
nt-style: normal;
font-size: 20px;
line-height: 20px;
position: relative;
background: #fff;
}
#column ul li {
max-width: 48%;
flex: 0 1 48%;
margin-bottom: 3.5%;
overflow: hidden;
position: relative;
border-radius: 10px;
}
#column ul li .info {
padding: 5px 10px 7px;
background: #000;
position: absolute;
left: 0;
bottom: 0;
opacity: 0.7;
}
#column ul li .info p {
color: #fff;
font-size: 10px;
line-height: 1.5em;
letter-spacing: 0;
}
#column ul li .info span {
color: #fff;
font-size: 8px;
line-height: 8px;
letter-spacing: 0.1em;
}
}

/*--------------------------------------------------------------------------
btn-back
---------------------------------------------------------------------------*/
.btn-back {
margin: 40px auto 80px;
text-align: center;
}
.btn-back a {
display: inline-block;
padding-bottom: 5px;
border-bottom: dashed 1px #333;
}
@media screen and (max-width: 900px) {
.btn-back {
margin: 30px auto 60px;
text-align: center;
}
.btn-back a {
padding-bottom: 10px;
font-size: 14px;
line-height: 14px;
}
}



/*--------------------------------------------------------------------------
footer
---------------------------------------------------------------------------*/
footer {
margin: 20px 0 10px;
text-align: center;
}
footer p {
padding: 15px 0 0;
font-size: 10px;
font-family: "CormoranGaramond", serif;
opacity: 0.5;
}