@charset "utf-8";

.gg-container{
--main-color:#000;
--secondary-color:#111;
--txt-color:#fff;
--img-bg-color:rgba(240,240,240,0.9);
--backdrop-color:rgba(240,240,240,0.9);
--gap-length:2px;--row-height:200px;
--column-width:220px
}
.gg-container *[data-theme="dark"]{
--main-color:#ddd;
--secondary-color:#eee;
--txt-color:#111;
--img-bg-color:rgba(20,20,20,0.9);
--backdrop-color:rgba(30,30,30,0.9)
}
.gg-box{
display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--column-width),1fr));
grid-auto-rows:var(--row-height);
grid-gap:var(--gap-length);
margin:20px 0
}
.gg-box img{
object-fit:cover;
cursor:pointer;
width:100%;height:100%;
background:var(--img-bg-color)
}
.gg-box img:hover{
opacity:.98
}
#gg-screen{
position:fixed;
width:100%;
height:100%;
top:0;left:0;
background:var(--backdrop-color);
z-index:9999;
text-align:center
}
#gg-screen .gg-image{
height:100%;
display:inline-flex;
justify-content:center;
align-items:center
}
#gg-screen .gg-image img{
max-width:100%;
max-height:100%;
margin:0 auto
}
.gg-btn{
width:35px;
height:35px;
background:var(--main-color);
color:var(--txt-color);
text-align:center;
line-height:35px;
cursor:pointer;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;
-webkit-transition:all .4s ease;
transition:all .4s ease;
font-size:20px;
box-sizing:border-box;
padding-left:2px;
position:fixed;
bottom:10px
}
.gg-btn:hover{
background:var(--secondary-color)
}
.gg-close{
top:10px
}
.gg-close,.gg-next{
right:10px
}
.gg-prev{
right:50px
}
.gg-prev,.gg-next{
bottom:10px
}
@media(min-width:478px){
.gg-box img:nth-child(2n):not(:last-of-type){
grid-row-end:span 2
}
[data-layout="horizontal"] img:nth-child(2n):not(:last-of-type){
grid-column-end:span 2;
grid-row-end:span 1
}
[data-layout="square"] img:nth-child(2n):not(:last-of-type){
grid-row-end:span 1;
grid-column-end:span 1
}
}

@media(max-width:768px){
.gg-box{
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
grid-auto-rows:calc(var(--row-height) - 15vh);
margin:10px 0
}
}

@media(max-width:450px){
.gg-box{
grid-template-columns:repeat(auto-fit,minmax(130px,1fr))
}
}

/* =======================================
#photoGallery
======================================= */
#photoGallery {
background:#FDEDED;
text-align: center;
padding: 5rem 0 0;
overflow-x: hidden;
}
#photoGallery ul {
max-width:1050px;
margin: 5rem auto 0;
width: 85%;
display: flex;
flex-wrap:wrap;
position: relative;
}
#photoGallery ul:before {
content: "";
background: url("../img/wedding/kazari03.png") no-repeat;
background-size: contain;
display: block;
width:240px;
height: 240px;
position: absolute;
top: -120px;
left: -120px;
z-index: 1;
}
#photoGallery ul:after {
content: "";
background: url("../img/wedding/kazari04.png") no-repeat;
background-size: contain;
display: block;
width:300px;
height: 300px;
position: absolute;
bottom: -120px;
right: -120px;
z-index: 1;
}
#photoGallery ul li {
width: calc(100% / 4 - 2px);
margin: 1px;
position: relative;
z-index: 1;
}
#photoGallery ul li img {
width: 100%;
margin-top: -100%;
padding-top: 100%;
}
#photoGallery .commLink3 {
margin-bottom: 4rem;
}
#photoGallery .flexBox figure {
width: 25%;
position: relative;
z-index: 0;
transition: .3s all;
}
#photoGallery .flexBox figure:hover {
opacity: .6;
}
#photoGallery .flexBox figcaption {
width: 100%;
height: 35%;
position: absolute;
bottom:0;
padding: 2rem;
z-index: 1;
background: rgba(255,255,255,.8);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-size:1.7rem;
line-height: 180%;
color: #99C5D0;
text-shadow: 
1px 1px 3px #fff, 
-1px 1px 3px #fff, 
1px -1px 3px #fff, 
-1px -1px 3px #fff, 
3px 3px 5px #fff, 
-3px 3px 5px #fff, 
3px -3px 5px #fff, 
-3px -3px 5px #fff, 
5px 5px 7px #fff, 
-5px 5px 7px #fff, 
5px -5px 7px #fff, 
-5px -5px 7px #fff;
/*text-shadow: 0 0 10px #A73C5D;
text-shadow: 0px 1px 3px #A73C5D, 1px 0px 5px #A73C5D;*/
}
#photoGallery .flexBox figure a {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
#photoGallery .flexBox figcaption span {
font-size: 1.2rem;
color: #a57943;
font-weight: normal;
text-shadow: none;
display: block;
}
#photoGallery .commTtl {
font-size: 1.5rem;
line-height: 150%;
margin-bottom: 3rem;
font-style: italic;
}
#photoGallery .commTtl span {
display: block;
color: #99C5D0;
font-style: normal;
}

@media screen and (max-width: 1024px) {
#photoGallery .flexBox figcaption {
font-size:1.15rem;
}
}

@media screen and (max-width: 812px) {
#photoGallery .flexBox figure {
width: 50%;
}
#photoGallery .flexBox figure img {
height: 500px;
width: 100%;
object-fit: cover;
}
}

@media screen and (max-width: 480px) {
#photoGallery ul:before {
width:100px;
height: 100px;
top: -50px;
left: -50px;
}
#photoGallery ul:after {
width:150px;
height: 150px;
bottom: -60px;
right: -60px;
}
#photoGallery ul li {
width: calc(100% / 2 - 2px);
}
#photoGallery .flexBox figure img {
height: 280px;
}
#photoGallery .flexBox figcaption {
padding: .5rem;
font-size:1rem;
}
#photoGallery .flexBox figcaption span {
font-size: .8rem;
}
}