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

#gallery #container { background:url(../img/bg_gallery.jpg) fixed; background-size:cover; }
#gallery #pagebody { padding-top:20px; }
#gallery #pagettl { display:none; }
#gl-date { display:none; }
#gallery main { padding:0 20px; }

#gallery #pagetop { background-color:#000; }
#gallery #pagetop a { background-image:-250px -140px; }

#gl-area { position:relative; }

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

#gallery #pagebody { padding-top:0; }
#gallery #pagettl { display:block; width:auto; height:auto; padding:10px; border-bottom:#333 1px solid; background:none; text-indent:0; }
#gl-date { display:block; color:#fff; padding:10px; font-family:ryo-gothic-plusn, sans-serif; font-weight:500; font-style:normal; }
#gallery main { padding:0; }

#gallery #pagetop { background-color:#fff; }

}


/* gl-nav
----------------------------------- */

#gl-nav { margin-bottom:20px; }
#gl-nav ul { /* for space */ font-size:0; }
#gl-nav ul:after {content:"";clear:both;display:block;}
#gl-nav ul li { display:inline-block; vertical-align:top; /* for space */ font-size:1rem; }
#gl-nav ul li a,
#gl-nav ul li span { display:block; width:100%; padding:0.5em; box-sizing:border-box; border-top:#333 1px solid; border-right:#333 1px solid; border-bottom:#333 1px solid; background-image:none; background-color:#000; text-decoration:none; text-align:center; color:#fff; font-size:85%; line-height:140%; text-indent:0px; font-family:ryo-gothic-plusn, sans-serif; font-weight:500; font-style:normal; transition:background-color 0.2s linear; }
#gl-nav ul li:nth-child(1) a,
#gl-nav ul li:nth-child(1) span { border-left:#333 1px solid; }
#gl-nav ul li span { opacity:0.5; }
@media (hover: hover) { #gl-nav ul li a:hover { filter: alpha(opacity=100);-moz-opacity:1.00;opacity:1.00;} }
#gl-nav ul li a:after { position:relative; float:right; content:" "; vertical-align:middle; width:0.8em; height:1.3em; background:url(../img/arrow.png) center center no-repeat; background-size:auto 0.8em; }
#gl-nav ul li a:hover,
.gl-day1 #gl-nav-itm1 a,
.gl-day2 #gl-nav-itm2 a,
.gl-day3 #gl-nav-itm3 a,
.gl-day4 #gl-nav-itm4 a,
.gl-day5 #gl-nav-itm5 a,
.gl-day6 #gl-nav-itm6 a,
.gl-day7 #gl-nav-itm7 a { background-color:#4aab01; }

#gl-nav li:nth-child(1),
#gl-nav li:nth-child(2),
#gl-nav li:nth-child(3) { width:12%; }
#gl-nav li:nth-child(4),
#gl-nav li:nth-child(5),
#gl-nav li:nth-child(6),
#gl-nav li:nth-child(7) { width:16%; }

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

#gl-nav ul li:nth-child(1) a,
#gl-nav ul li:nth-child(1) span { border-left:none; }

#gl-nav li:nth-child(4) a,
#gl-nav li:nth-child(5) a,
#gl-nav li:nth-child(6) a,
#gl-nav li:nth-child(7) a { border-top:none; }

#gl-nav li:nth-child(1),
#gl-nav li:nth-child(2) { width:33%; }
#gl-nav li:nth-child(3) { width:34%; }
#gl-nav li:nth-child(4),
#gl-nav li:nth-child(5),
#gl-nav li:nth-child(6),
#gl-nav li:nth-child(7) { width:50%; }

}


/* gl-picture
----------------------------------- */

@keyframes gl-fade { 0% { opacity:0; filter: blur(1.5rem); } 100% { opacity:1; filter: blur(0); } }

#gl-picture { width:100%; text-align:center; margin-bottom:20px; /* for animation */ opacity:0; animation: gl-fade 1.0s forwards; }
#gl-picture p { position:relative; height:0; width:940px; padding-top:66.7%; margin:auto; }
#gl-picture p a { display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#gl-picture p.gl-tate { width:627px; padding-top:100%; }

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

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

#gl-picture { margin-bottom:10px; }
#gl-picture p { width:100%; }
#gl-picture p.gl-tate { width:100%; padding-top:146.875%; }

}


/* gl-btn
----------------------------------- */

#gl-btn { margin-bottom:20px; /* for space */ font-size:0; }
#gl-btn-prev, #gl-btn-t, #gl-btn-next { display:inline-block; vertical-align:middle; text-align:center; /* for space */ font-size:0.9rem; }
#gl-btn-prev, #gl-btn-next { width:30%; }
#gl-btn-prev a, #gl-btn-next a { display:block; width:100%; box-sizing:border-box; padding:0.8em 0.5em; background-color:#46a201; outline:none; color:#fff; text-align:center; text-decoration:none; }
@media (hover: hover) { #gl-btn-prev a:hover, #gl-btn-next a:hover { background-color:#347801; } }
#gl-btn-prev a:before, #gl-btn-next a:after { position:relative; content:" "; vertical-align:middle; width:0.8em; height:1.2em; background-image:url(../img/arrow.png); background-position:center center; background-repeat:no-repeat; background-size:auto 0.8em; }
#gl-btn-prev a:before { float:left; background-image:url(../img/arrow2.png); }
#gl-btn-next a:after { float:right; background-image:url(../img/arrow.png); }
#gl-btn-t { width:40%; box-sizing:border-box; padding:0.8em 0.5em; }
#gl-nav-date, #gl-nav-page { display:inline; font-family:ryo-gothic-plusn, sans-serif; font-weight:500; font-style:normal; }
#gl-nav-date { color:#52a314; margin-right:2.0em; }
#gl-nav-page { color:#666; letter-spacing:0.01em; }

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

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

#gl-btn { margin:0 10px 10px 10px; }
#gl-btn-prev, #gl-btn-t, #gl-btn-next { font-size:0.8rem; }
#gl-btn-prev, #gl-btn-next { width:35%; }
#gl-btn-t { width:30%; }
#gl-nav-date { display:none; }

}


/* gl-thumb
----------------------------------- */

#gl-thumb ul { /* for space */ font-size:0; }
#gl-thumb ul li { display:inline-block; width:9%; margin:0 1.1% 10px 0%; vertical-align:top; /* for space */ font-size:1rem; }
#gl-thumb ul li:nth-child(10n) { margin:0 0 10px 0%; }
#gl-thumb ul li p { position:relative; width:100%; height:0; padding-top:100%; }
#gl-thumb ul li p a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; outline:none; background-size:cover; text-indent:-9999px; }
@media (hover: hover) { #gl-thumb ul li a:hover { opacity:0.7; cursor:pointer; } }

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

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

#gl-thumb { padding:0 10px; }
#gl-thumb ul li { width:9%; margin:0 1.1% 1.0vw 0%; }
#gl-thumb ul li:nth-child(10n) { margin:0 0 1.0vw 0%; }

}

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

#gl-thumb ul li { width:18%; margin:0 2.5% 2.2vw 0%; }
#gl-thumb ul li:nth-child(5n) { margin:0 0 2.2vw 0%; }

}