/*  Archive
=============================================== */

#archive .box .subttl { background-image:url(../img/archive/subttl_archive.png), url(../img/common/subttl_bg.jpg); }


/* archive list
-------------------------------- */

#archive-list-m { text-align:left; }

.archive-list-m-ttl,
#archive .sttl { margin-bottom:0.7em; padding:0.7em 0.6em; background:url(../img/common/subttl_bg.jpg) center bottom no-repeat; background-size:cover; border-radius:0.5em; font-size:120%; line-height:120%; color:#fff; text-shadow:0px 0px 4px rgba(0,0,0,0.1); }

.archive-list { text-align:left; padding:0 0 2% 0; }
.archive-list:after {content:"";clear:both;display:block;}
.archive-list li.item { float:left; width:46%; margin:1.5% 2%; }
.archive-list li.item:after {content:"";clear:both;display:block;}
.archive-list li.item .tmb-area { float:left; width:35%; }
.archive-list li.item .tmb { position:relative; width:100%; height:0; padding-top:56.25%; border-radius:7px; background-color:#efefef; }
.archive-list li.item .tmb a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; border-radius:7px; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; transition: opacity 0.2s ease-out; }
@media (hover: hover) { .archive-list li.item .tmb a:hover { opacity:0.5; } }
.archive-list li.item .txt-area { float:right; width:62%; }
.archive-list li.item .txt { margin-top:-0.2em; line-height:140%; }
.archive-list li.item .txt a { color:#333; text-decoration:none; transition: opacity 0.2s ease-out; }
@media (hover: hover) { .archive-list ul li .txt a:hover { opacity:0.5; } }
.archive-list li.item .txt .new { display:inline-block; position:relative; top:-0.1em; margin-right:0.5em; background-color:#d02c25; color:#fff; padding:0.3em 0.4em; font-size:80%; line-height:100%; border-radius:0.5em; font-family:'Lato', sans-serif; font-weight:bold; }

#archive-btn .btn { width:50%; margin:0 25%; }

#archive-old-btn .btn-area { text-align:center; }
#archive-old-btn .btn a { position:relative; width:18em; margin:20px auto 0 auto; border:#efefef 3px solid; background:transparent; color:#6d504f; font-size:95%; line-height:140%; text-shadow:0px 0px 0px; border-radius:2.0em; box-shadow:none; }


/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

.archive-list-m-ttl,
#archive .sttl { font-size:100%; }

.archive-list { text-align:left; padding:0; }
.archive-list li.item { float:left; width:100%; margin:0 0 5% 0; }
.archive-list li.item .txt { font-size:85%; }

#archive-btn .btn { width:80%; margin:0 10%; }

}


/* archive dtl
-------------------------------- */

#archive .box-body { text-align:left; }

.dtl-txt { margin:auto; font-size:90%; line-height:160%; }

.month-list { /* for space */ font-size:0; }
.month-list li { display:inline-block; vertical-align:top; min-width:7.5rem; margin:0 0 1.0em 0; /* for space */ font-size:1.1rem; }
.month-list li a { color:#4d71c5; font-weight:bold; }
.month-list li a:hover { text-decoration:none; }
.month-list li a::before { display:inline-block; vertical-align:bottom; content:""; width:1.0em; height:1.0em; background:url(../img/common/arrow_b.png) center center no-repeat; background-size:55%; }


/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

.dtl-ttl { font-size:110%; }

.month-list li { font-size:0.9rem; }

}