@charset "UTF-8";
/* CSS Document */

#galleryListWrap{
position: relative;
padding: 10% 0 0;
}
#galleryListWrap .galleryList h2{
font-size: 1.25rem;
font-weight: 500;
letter-spacing: 0.15em;
text-align: center;
}
.galleryList{
padding: 0 0 7%;
}
.galleryList+.galleryList{
padding-top: 7%;
border-top: 1px solid #cdcdcd;
}
.galleryList:last-child{
padding-bottom: 0;
}
.galleryPhoto{
margin: 3.5vw 0 0;
}
.galleryPhoto ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -70px 0 0 -2px;
}
.galleryPhoto ul li{
width: 33.33%;
padding-left: 2px;
margin-top: 70px;
}
.galleryPhoto ul li a{
display: block;
color: #111111;
text-decoration: none;
}
.galleryPhoto ul li figure{
position: relative;
overflow: hidden;
padding: 65% 0 0 0;
}
.galleryPhoto ul li figure::before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
background-image: url(../images/icon_zoom.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 24px auto;
opacity: 0;
transform: scale(1.5);
transition: opacity 200ms linear, transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
z-index: 1;
}
.galleryPhoto ul li a:hover figure::before{
opacity: 1;
transform: none;
}
.galleryPhoto ul li figure img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.galleryPhoto ul li .listTxt{
padding: 0 20px;
}
.galleryPhoto ul li .listTxt .title{
font-size: 1.125rem;
line-height: 1.5;
margin-top: 1em;
}
.galleryPhoto ul li .listTxt .cate{
display: flex;
flex-wrap: wrap;
font-size: 0.8125rem;
margin-top: 0.5em;
}
.galleryPhoto ul li .listTxt .cate span{
display: flex;
align-items: center;
position: relative;
margin-right: 15px;
}
.galleryPhoto ul li .listTxt .cate span+span{
}
.galleryPhoto ul li .listTxt .cate span+span::before{
content: '';
display: block;
width: 1px;
height: 10px;
background-color: #111111;
transform: rotate(30deg);
margin-right: 15px;
}
.galleryText{
margin: 3.5vw auto 0;
max-width: 1000px;
}
.galleryPhoto+.galleryText{
margin-top: 7vw;
}
.galleryText ul li{
display: flex;
padding: 25px 0;
font-size: 0.875rem;
}
.galleryText ul li+li{
border-top: 1px solid #cdcdcd;
}
.galleryText ul li:first-child{
padding-top: 0;
}
.galleryText ul li:last-child{
padding-bottom: 0;
}
.galleryText ul li p.date{
width: 150px;
}
.galleryText ul li p.title{
width: calc(100% - 150px);
}



@media screen and (max-width: 999px){
#galleryListWrap{
padding: 15% 0 0;
}
.galleryList{
padding: 0 20px 17%;
}
.galleryList+.galleryList{
padding-top: 17%;
}
.galleryPhoto{
margin: 6vw 0 0;
}
.galleryPhoto ul{
margin: -50px 0 0 -2px;
}
.galleryPhoto ul li{
width: 50%;
margin-top: 50px;
}
.galleryPhoto ul li .listTxt{
padding: 0 5px;
}
.galleryText{
margin: 6vw auto 0;
}
.galleryPhoto+.galleryText{
margin-top: 17vw;
}
.galleryText ul li p.date{
width: 100px;
}
.galleryText ul li p.title{
width: calc(100% - 100px);
}
}/*999*/





#gallerySingleDetail{
position: relative;
padding: 10% 0 0;
}
#gallerySingleHead{
width: 75%;
max-width: 1600px;
margin: 0 auto;
padding: 0 0 8%;
}
#gallerySingleData{
width: 75%;
max-width: 1600px;
margin: 0 auto;
padding: 0 6%;
}
#gallerySingleData h2{
font-size: 1.5rem;
line-height: 1.5;
}
#gallerySingleData p{
font-size: 0.875rem;
}
#gallerySingleData p.cate{
display: flex;
flex-wrap: wrap;
margin-top: 0.5em;
}
#gallerySingleData p.cate span{
display: flex;
align-items: center;
position: relative;
margin-right: 15px;
}
#gallerySingleData p.cate span+span{
}
#gallerySingleData p.cate span+span::before{
content: '';
display: block;
width: 1px;
height: 10px;
background-color: #111111;
transform: rotate(30deg);
margin-right: 15px;
}
#gallerySingleData p.txt{
margin-top: 3em;
line-height: 2.5;
}
#galleryPhoto{
width: 75%;
padding: 8% 0 0;
margin: 0 0 0 auto;
}
#galleryPhoto ul{
column-count: 3;
column-gap: 5px;
}
#galleryPhoto.single{
/*max-width: 1280px;*/
}
#galleryPhoto.single ul{
column-count: 1;
}
#galleryPhoto.double ul{
column-count: 2;
}
#galleryPhoto ul li{
padding: 5px 0 0 0;
}
#galleryPhoto ul li img{
width: 100%;
}
#galleryPhoto ul li a{
display: block;
position: relative;
overflow: hidden;
}
#galleryPhoto ul li a::before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.7);
background-image: url(../images/icon_zoom.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 24px auto;
opacity: 0;
transform: scale(1.5);
transition: opacity 200ms linear, transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
z-index: 1;
}
#galleryPhoto ul li a:hover::before{
opacity: 1;
transform: none;
}
#galleryPagination{
width: 75%;
max-width: 1200px;
margin: 0 auto;
padding: 10% 0 0;
}
#galleryPagination ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
position: relative;
}
#galleryPagination ul li{
width: 33.33%;
}
#galleryPagination ul li.prev{
margin: 0 auto 0 0;
}
#galleryPagination ul li.list{
margin: 0 auto;
}
#galleryPagination ul li.next{
margin: 0 0 0 auto;
}
#galleryPagination ul li a{
display: flex;
align-items: center;
position: relative;
color: #111111;
text-decoration: none;
font-size: 0.875rem;
transition: color 200ms linear;
line-height: 1.4;
height: 50px;
}
#galleryPagination ul li.list a{
justify-content: center;
text-align: center;
}
#galleryPagination ul li.next a{
justify-content: flex-end;
text-align: right;
}
#galleryPagination ul li a:hover{
color: #999999;
}
#galleryPagination ul li.prev a::before{
content: '';
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #005175;
margin-right: 15px;
transition: background 200ms linear;
}
#galleryPagination ul li.prev a:hover::before{
/*background-color: #eefcff;*/
background-color: #eeeeee;
}
#galleryPagination ul li.prev a::after{
content: '';
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 50%;
left: 11px;
transform: translateY(-50%);
background-image: url(../images/arrow_left_blue.png);
background-repeat: repeat-x;
background-position: left center;
background-size: 100% auto;
transition: background 300ms cubic-bezier(0.45, 0, 0.55, 1);
}
#galleryPagination ul li.prev a:hover::after{
background-position: left -20px center;
}
#galleryPagination ul li.next a::after{
content: '';
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #005175;
margin-left: 15px;
transition: background 200ms linear;
}
#galleryPagination ul li.next a:hover::after{
/*background-color: #eefcff;*/
background-color: #eeeeee;
}
#galleryPagination ul li.next a::before{
content: '';
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 50%;
right: 11px;
transform: translateY(-50%);
background-image: url(../images/arrow_blue.png);
background-repeat: repeat-x;
background-position: left center;
background-size: 100% auto;
transition: background 300ms cubic-bezier(0.45, 0, 0.55, 1);
}
#galleryPagination ul li.next a:hover::before{
background-position: left 20px center;
}



@media screen and (max-width: 999px){
#gallerySingleDetail{
padding: 15% 0 0;
}
#gallerySingleHead{
width: auto;
padding: 0 20px 12%;
}
#gallerySingleData{
width: auto;
padding: 0 20px;
}
#galleryPhoto{
width: auto;
padding: 12% 20px 0;
margin: 0;
}
#galleryPhoto ul{
column-count: 2;
}
#galleryPhoto.single ul{
column-count: 1;
}
#galleryPhoto.double ul{
column-count: 2;
}
#galleryPagination{
width: auto;
padding: 15% 20px 0;
}
#galleryPagination ul li{
width: auto;
}
#galleryPagination ul li.prev{
width: 50%;
}
#galleryPagination ul li.list{
order: 2;
}
#galleryPagination ul li.next{
width: 50%;
}
}/*999*/