@charset "utf-8";
/* archive css */


/*-------------------------------------------------
ページタイトル
-------------------------------------------------*/

#page_archive .page_titlebox::before {
content: "ARCHIVE";
}
body::before {
background-image: url("../img/archive/body_bg.jpg");
}

@media all and (max-width : 767px ){
body::before {
background-image: url("../img/archive/body_bg_sp.jpg");
}
}

/*-------------------------------------------------
archive gallery
-------------------------------------------------*/

.archive_box_wrap {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.archive_box {
width: calc((100% - 30px) / 2);
margin-bottom: 40px;
}
.archive_ttl {
font-size: 2.2rem;
font-weight: 500;
color: #C7A569;
letter-spacing: 0.15em;
padding: 0 10px 10px 5px;
border-bottom: solid 1px #C7A569;
margin-bottom: 25px;
}
.modal_imgbox {
position: relative;
margin-bottom: 20px;
overflow: hidden;
}
.archive_gallery_btn {
display: block;
position: relative;
width: 100%;
padding: 0;
border: 0;
background: none;
cursor: pointer;
overflow: hidden;
}
.archive_thumb {
width: 100%;
overflow: hidden;
}
.archive_thumb img {
display: block;
width: 100%;
height: auto;
transition:
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.8s ease;
}
.archive_gallery_btn:hover .archive_thumb img {
transform: scale(1.035);
filter: brightness(0.8);
}
.icon_expand {
position: absolute;
right: 10px;
bottom: 10px;
}
.icon_expand img {
width: 22px;
height: 22px;
}
.archive_info {
display: flex;
margin-bottom: 10px;
font-size: 1.6rem;
padding: 0 5px;
}
.archive_info dt {
white-space: nowrap;
margin-right: 5px;
}
.archive_info dd {
font-family: "EB Garamond", "Noto Sans JP", sans-serif;
}

@media all and (max-width : 820px ){
.archive_box_wrap {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.archive_box {
width: calc((100% - 20px) / 2);
margin-bottom: 20px;
}
.archive_ttl {
font-size: 1.8rem;
margin-bottom: 20px;
}
.modal_imgbox {
margin-bottom: 15px;
}
.archive_info {
margin-bottom: 8px;
font-size: 1.4rem;
padding: 0;
}
}

@media all and (max-width : 767px ){
.archive_box_wrap {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 0px;
}
.archive_box {
width: 100%;
margin-bottom: 20px;
}
.archive_ttl {
font-size: 1.6rem;
margin-bottom: 10px;
}
}


/*-------------------------------------------------
archive modal
-------------------------------------------------*/

.archive_modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.archive_modal.is-open {
pointer-events: auto;
}
.archive_modal_bg {
position: absolute;
inset: 0;
background: rgba(9, 13, 23, 0.96);
}
.archive_modal_inner {
position: relative;
z-index: 2;
width: min(1100px, calc(100% - 120px));
}

/* close */
.archive_modal_close {
position: absolute;
right: -50px;
top: -50px;
width: 40px;
height: 40px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
z-index: 3;
}
.archive_modal_close span {
position: absolute;
left: 50%;
top: 50%;
width: 30px;
height: 1px;
background: #fff;
}
.archive_modal_close span:first-child {
transform: translate(-50%, -50%) rotate(45deg);
}
.archive_modal_close span:last-child {
transform: translate(-50%, -50%) rotate(-45deg);
}

/* image */
.archive_modal_imagebox {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: min(70vh, 720px);
overflow: hidden;
}
.archive_modal_image {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}

/* control */
.archive_modal_control {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
margin-top: 30px;
}
.archive_modal_prev,
.archive_modal_next {
padding: 10px 0;
border: 0;
background: none;
color: #fff;
font-family: "EB Garamond", serif;
font-size: 1.4rem;
letter-spacing: 0.15em;
cursor: pointer;
transition: opacity 0.3s ease;
}
.archive_modal_prev:hover,
.archive_modal_next:hover {
opacity: 0.5;
}
.archive_modal_count {
display: flex;
align-items: center;
gap: 8px;
font-family: "EB Garamond", serif;
font-size: 1.4rem;
color: #fff;
letter-spacing: 0.1em;
}

@media all and (max-width: 767px) {
.archive_modal_inner {
width: calc(100% - 40px);
}
.archive_modal_imagebox {
height: 65vh;
}
.archive_modal_close {
right: 0;
top: -50px;
}
.archive_modal_control {
gap: 30px;
margin-top: 20px;
}
}