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

#archive #mainttl { background-image:url(../img/archive/archive_ttl.png); }

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

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

#archive #mainttl { background-image:url(../img/archive/archive_ttl_smp.png); }

}


/* arc-title
------------------------------------ */
#arc-title { margin-bottom:20px; text-align:center; }
#arc-date { display:inline-block; margin:0 0 0.3em 0; vertical-align:middle; text-align:center; color:#84632c; font-weight:bold; }
#arc-date span { font-size:160%; font-family:'Lato', sans-serif; }
#arc-epname { font-size:140%; line-height:140%; }

#archive #cat-nav ul li { width:50%; }

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

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

#arc-title { margin-bottom:10px; padding:0 10px; }
#arc-date { font-size:70%; }
#arc-epname { font-size:100%; }

}


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

/* arc-detail
------------------------------------ */
#arc-detail { width:850px; margin:0 35px 30px 35px; }
#arc-detail .subttl { width:100%; height:40px; margin-bottom:20px; border-bottom:#e5e5e5 1px solid; background:url(../img/next/detail_ttl.png) center top no-repeat; text-indent:-9999px; }
#arc-detail-txt { margin-bottom:30px; }
#arc-detail-txt p { font-size:90%; line-height:170%; }

.arc-detail-box { margin:0 -35px 30px -35px; }
.arc-detail-box:after {content:"";clear:both;display:block;}
.arc-detail-box .txtbox { width:360px; min-height:315px; padding:20px; box-sizing:border-box; background-position:center center; background-repeat:no-repeat; }
.arc-detail-box .pic { width:560px; background-color:#efefef; }
#arc-detail #chapter1 .txtbox,
#arc-detail #chapter2 .pic,
#arc-detail #chapter3 .txtbox,
#arc-detail #chapter4 .pic,
#arc-detail #chapter5 .txtbox,
#arc-detail #chapter6 .pic { float:left; }
#arc-detail #chapter1 .pic,
#arc-detail #chapter2 .txtbox,
#arc-detail #chapter3 .pic,
#arc-detail #chapter4 .txtbox,
#arc-detail #chapter5 .pic,
#arc-detail #chapter6 .txtbox { float:right; }

.arc-detail-box .sttl { margin-bottom:0.8em; padding-bottom:0.5em; border-bottom:#efefef 1px solid; font-size:140%; line-height:140%; color:#936d29; }
.arc-detail-box .txt { font-size:90%; line-height:170%; }
.arc-detail-box .pic p { position:relative; width:100%; height:0; padding-top:56.25%; }
.arc-detail-box .pic p span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }

#arc-detail #chapter1 .txtbox { background-image:url(../img/archive/detail_nm1.png) }
#arc-detail #chapter2 .txtbox { background-image:url(../img/archive/detail_nm2.png) }
#arc-detail #chapter3 .txtbox { background-image:url(../img/archive/detail_nm3.png) }
#arc-detail #chapter4 .txtbox { background-image:url(../img/archive/detail_nm4.png) }
#arc-detail #chapter5 .txtbox { background-image:url(../img/archive/detail_nm5.png) }
#arc-detail #chapter6 .txtbox { background-image:url(../img/archive/detail_nm6.png) }

#arc-feature-btn { text-align:center; }
#arc-feature-btn p { width:20.0em; margin:auto; }
#arc-feature-btn p a { display:inline-block; position:relative; width:100%; padding:0.7em; box-sizing:border-box; border-radius:1.3em; border:#8f652c 2px solid; font-size:110%; font-weight:bold; color:#8f652c; text-decoration:none; }
#arc-feature-btn p a::before { display:inline-block; content:""; width:0.6em; height:0.6em; position:absolute; top:0.9em; left:0.9em; background:url(../img/arrow_brown.png) center center no-repeat; background-size:cover; transform:rotate(90deg); }

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

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

#arc-detail { width:auto; margin:0 0 15px 0; padding:0 10px; }
#arc-detail .subttl { height:32px; margin-bottom:10px; background:url(../img/next/detail_ttl_smp.png) center top no-repeat; background-size:auto 22px; }
#arc-detail-txt { margin-bottom:15px; }
#arc-detail-txt p { padding:0 5px; font-size:80%; }

.arc-detail-box { margin:0 -10px 15px -10px; }
.arc-detail-box .txtbox { float:none!important; width:auto; min-height:auto; padding:10px; background-position:center top; background-size:auto 9.0em!important; }
.arc-detail-box .pic { float:none!important; width:auto; }
.arc-detail-box .sttl { font-size:110%; }
.arc-detail-box .txt { font-size:80%; }

#arc-feature-btn p { width:14.0em; }
#arc-feature-btn p a { font-size:90%; }

}


/* arc-aside
------------------------------------ */
#arc-aside { margin-bottom:20px; padding:30px 30px 10px 30px; background-color:#eee; }

#arc-director { margin-bottom:20px; padding:18px; background-color:#fff; box-shadow:0px 0px 5px rgba(0,0,0,0.1); }
#arc-director:after {content:"";clear:both;display:block;}
#arc-director-l { float:left; width:550px; }
#arc-director .subttl { width:100%; height:34px; margin-bottom:0.5em; border-bottom:#e5e5e5 1px solid; background:url(../img/next/director_ttl.png) 0 0 no-repeat; text-indent:-9999px; }
#arc-director-txt p { font-size:90%; line-height:170%; }
#arc-director-txt p#arc-director-name { font-size:120%; color:#936d29; font-weight:bold; }
#arc-director-p { float:right; width:247px; height:185px; background-color:#efefef; }

#arc-data, #arc-loot { margin-bottom:20px; padding:18px; background:url(../img/archive/column_bg.jpg) right top no-repeat; background-color:#fff; box-shadow:0px 0px 5px rgba(0,0,0,0.1); }
#arc-data .subttl, #arc-loot .subttl { width:100%; height:34px; margin-bottom:0.5em; border-bottom:#e5e5e5 1px solid; text-indent:-9999px; }
#arc-data .subttl { background:url(../img/archive/data_ttl.png) 0 0 no-repeat; }
#arc-loot .subttl { background:url(../img/archive/loot_ttl.png) 0 0 no-repeat; }
#arc-data-txt, #arc-loot-txt { font-size:90%; line-height:170%; }
#arc-data-txt strong { color:#90662c; font-weight:bold; }

#arc-map-btn { float:right; width:17.0em; margin-top:-2.4em; font-size:90%; }
#arc-map-btn p { width:17.0em; text-align:center; }
#arc-map-btn p a { display:inline-block; position:relative; width:100%; padding:0.7em; box-sizing:border-box; border-radius:1.3em; background-color:#8f652c; font-weight:bold; color:#fff; text-decoration:none; text-shadow:1px 1px 2px rgba(0,0,0,0.2); }
#arc-map-btn p a::before { display:inline-block; content:""; width:0.6em; height:0.6em; position:absolute; top:0.9em; left:0.9em; background:url(../img/arrow.png) center center no-repeat; background-size:cover; transform:rotate(90deg); }

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

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

#arc-aside { margin-bottom:15px; padding:15px 15px 5px 15px; }

#arc-director { margin-bottom:15px; padding:10px 0 15px 0; }
#arc-director .subttl { height:28px; background:url(../img/next/director_ttl_smp.png) center top no-repeat; background-size:auto 18px; }
#arc-director-l { float:none; width:auto; }
#arc-director-txt { padding:0 15px 15px 15px; }
#arc-director-txt p { font-size:80%; }
#arc-director-txt p#arc-director-name { font-size:100%; text-align:center; }
#arc-director-p { float:none; margin:auto; padding:0  }

#arc-data, #arc-loot { margin-bottom:15px; padding:10px 0 0 0; background-size:70%; }
#arc-data .subttl { height:28px; background:url(../img/archive/data_ttl_smp.png) center top no-repeat; background-size:auto 18px; }
#arc-loot .subttl { height:28px; background:url(../img/archive/loot_ttl_smp.png) center top no-repeat; background-size:auto 18px; }
#arc-data-txt, #arc-loot-txt { font-size:80%; padding:0 10px 10px 10px; }

#arc-map-btn { float:none; width:auto; margin:0; padding-bottom:15px; font-size:80%; }
#arc-map-btn p { margin:auto; }

}


/* arc-latest
------------------------------------ */
#arc-latest .subttl { width:100%; height:57px; margin-bottom:10px; background:url(../img/archive/latest_ttl.png) center top no-repeat; text-indent:-9999px; }
#arc-latest ul { width:100%; margin-bottom:20px; text-align:center; /* for space */ font-size:0; }
#arc-latest ul li { position:relative; display:inline-block; margin-right:1.333%; width:24%; height:0; padding-top:24%; background-color:#efefef; vertical-align:middle; text-align:left; /* for space */ font-size:1rem; }
#arc-latest ul li:last-child { margin-right:0; }
#arc-latest ul li a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-size:cover; }
#arc-latest ul li a .date { position:absolute; z-index:3; display:inline-block; padding:0.5em; background-color:#000; font-size:90%; color:#fff; font-family:'Lato', sans-serif; font-weight:bold; }
#arc-latest ul li a .ttl { position:absolute; z-index:1; width:100%; height:100%; background:linear-gradient(to bottom, rgba(0,0,0,0.0) 70%, rgba(0,0,0,0.2)); }
#arc-latest ul li a .ttl p { position:absolute; z-index:2; bottom:0; padding:10px; line-height:130%; color:#fff; font-weight:bold; text-shadow:0px 0px 4px rgba(0,0,0,0.2); }
#arc-latest ul li a .ttl p i { display:inline-block; width:0.6em; height:0.6em; margin:-0.2em 0.3em 0 0; vertical-align:middle; background:url(../img/arrow.png) center center no-repeat; background-size:cover; transform:rotate(90deg); text-indent:-9999px; }

#arc-latest-btn { text-align:center; }
#arc-latest-btn p { width:20.0em; margin:auto; }
#arc-latest-btn p a { display:inline-block; position:relative; width:100%; padding:0.9em; box-sizing:border-box; border-radius:1.4em; background-color:#000; font-size:110%; font-weight:bold; color:#fff; text-decoration:none; }
#arc-latest-btn p a::before { display:inline-block; content:""; width:0.6em; height:0.6em; position:absolute; top:1.1em; left:0.9em; background:url(../img/arrow.png) center center no-repeat; background-size:cover; transform:rotate(90deg); }

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

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

#arc-latest { padding:0 2% }
#arc-latest .subttl { height:45px; background:url(../img/archive/latest_ttl_smp.png) center top no-repeat; background-size:auto 45px; }
#arc-latest ul li { margin:0 2% 0 0; width:23.5%; height:0; padding-top:24%; }
#arc-latest ul li:last-child { margin:0; }
#arc-latest ul li a .date { font-size:2.0vw; }
#arc-latest ul li a .ttl p { padding:0.7vw; font-size:2.2vw; }
#arc-latest-btn p { width:14.0em; }
#arc-latest-btn p a { font-size:90%; }

}

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

#arc-latest { padding:0 6% }
#arc-latest ul li { margin:0 4% 3.5vw 0; width:48%; height:0; padding-top:48%; }
#arc-latest ul { margin-bottom:0; }
#arc-latest ul li:last-child,
#arc-latest ul li:nth-child(even) { margin:0 0 3.5vw 0; }
#arc-latest ul li a .date { font-size:3.3vw; }
#arc-latest ul li a .ttl p { padding:1.5vw; font-size:3.5vw; }

}


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

#arc-gallery { padding-bottom:30px; border-bottom:#e5e5e5 1px solid; margin-bottom:30px; }
#arc-gallery .subttl { width:100%; height:40px; margin-bottom:20px; border-bottom:#e5e5e5 1px solid; background:url(../img/archive/gallery_ttl.png) center top no-repeat; text-indent:-9999px; }

.lightbox-gallery { text-align:center; /* for space */ font-size:0; }
.lightbox-gallery li { display:inline-block; width:24.25%; margin-right:1.0%; margin-bottom:10px; vertical-align:middle; /* for space */ font-size:1rem; }
.lightbox-gallery li:nth-child(4n) { margin-right:0; }
.lightbox-gallery li span { display:block; position:relative; width:100%; height:0; padding-top:100%; background-color:#efefef; }
.lightbox-gallery li span a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position: center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }

#gl-notice { margin-bottom:15px; font-size:90%; line-height:140%; color:#90662c; font-weight:bold; text-align:center; }

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

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

#arc-gallery { padding:0 10px 15px 10px; margin-bottom:15px; }
#arc-gallery .subttl { height:32px; margin-bottom:10px; background:url(../img/archive/gallery_ttl_smp.png) center top no-repeat; background-size:auto 22px; }
#gl-notice { margin-bottom:10px; font-size:80%; }

}

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

.lightbox-gallery li { display:inline-block; width:32%; margin-right:2.0%; margin-bottom:1.8vw; }
.lightbox-gallery li:nth-child(4n) { margin-right:2.0%; margin-bottom:1.8vw; }
.lightbox-gallery li:nth-child(3n),
.lightbox-gallery li:last-child { margin-right:0; margin-bottom:1.8vw; }

#gl-notice { font-size:80%; }

}


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

#arc-list { padding-top:10px; }
#arc-list .subttl { width:100%; height:40px; margin-bottom:20px; border-bottom:#e5e5e5 1px solid; background:url(../img/archive/list_ttl.png) center top no-repeat; text-indent:-9999px; }

#arc-list-head { margin-bottom:20px; }
#arc-list-head:after {content:"";clear:both;display:block;}
#arc-list-year { float:left; width:670px; }
#arc-list-year ul { /* for space */ font-size:0; }
#arc-list-year ul li { display:inline-block; margin:0 0.5em 0.5em 0; vertical-align:middle; /* for space */ font-size:1rem; }
#arc-list-year ul li a { display:inline-block; width:4.5em; padding:0.6em 0; border-radius:1.4em; background-color:#000; font-family:'Lato', sans-serif; font-size:90%; color:#fff; font-weight:bold; text-decoration:none; text-align:center; }

#arc-old-btn { float:right; width:17.0em; font-size:90%; }
#arc-old-btn p { width:17.0em; text-align:center; }
#arc-old-btn p a { display:inline-block; position:relative; width:100%; padding:0.4em; box-sizing:border-box; border-radius:2.1em; border:#8f652c 2px solid; font-weight:bold; line-height:130%; color:#8f652c; text-decoration:none; }
#arc-old-btn p a::before { display:inline-block; content:""; width:0.7em; height:0.7em; position:absolute; top:1.3em; left:0.8em; background:url(../img/arrow_brown.png) center center no-repeat; background-size:cover; transform:rotate(90deg); }

#arc-list-detail .sttl { margin-bottom:15px; padding:0.4em 0.6em; background-color:#835a25; font-family:'Lato', sans-serif; font-size:110%; line-height:140%; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,0.2); }
#arc-list-detail ul { border-top:#ccc 1px solid; }
#arc-list-detail ul li { border-bottom:#ccc 1px solid; }
#arc-list-detail ul li dl { display:flex; }
#arc-list-detail ul li dl dt { width:5.0em; padding:0.9em 0.45em; color:#88602a; font-family:'Lato', sans-serif; font-size:90%; line-height:120%; font-weight:bold; }
#arc-list-detail ul li dl dd { flex:1; padding:0.9em 0.45em; font-size:90%; line-height:130%; }
#arc-list-detail ul li dl dd a { color:#333; text-decoration:none; }
#arc-list-detail ul li dl dd a:hover { text-decoration:underline; }

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

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

#arc-list { padding:0 10px 10px 10px; }
#arc-list .subttl { height:32px; margin-bottom:10px; background:url(../img/archive/list_ttl_smp.png) center top no-repeat; background-size:auto 22px; }

#arc-list-head { margin-bottom:15px; }
#arc-list-year { float:none; width:auto; padding:0 0 5px 0.5em; text-align:center; }
#arc-list-year ul li { font-size:0.9rem; }
#arc-old-btn { float:none; width:auto; font-size:75%; text-align:center; }
#arc-old-btn p { margin:auto; }

#arc-list-detail .sttl { margin-bottom:0.6em; font-size:90%; }
#arc-list-detail ul li dl { display:block; padding:0.5em; }
#arc-list-detail ul li dl dt { width:auto; display:inline; padding:0; margin-right:1.0em; background:none; font-size:80%; font-weight:bold; }
#arc-list-detail ul li dl dd { flex:none; display:inline; padding:0; background:none; font-size:80%; }

}