.cf { *zoom: 1; }

.cf:after { content: ""; display: table; clear: both; }

.hover { -webkit-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; }

.hover:hover { opacity: .7; }

.playfair { font-family: 'Playfair Display',"NotoSerif",serif; }

.noto { font-family: "Noto Sans Japanese"; font-weight: normal; }

.mv { background: url("../img/gallery/img_main.jpg") no-repeat center center/cover; height: 724px; }

@media only screen and (max-width: 769px) { .mv { background: url("../img/gallery/img_main_sp.jpg") no-repeat center center/cover; height: 320px; } }

.title { background: #211815; margin: -280px auto 0; padding: 40px 0 25px; position: relative; text-align: center; width: 513px; z-index: 100; }

@media only screen and (max-width: 769px) { .title { margin: -60px auto 20px; padding: 20px 0 12px; width: 257px; } }

.title .title__sub { color: white; }

.title .title__main { color: white; letter-spacing: .2em; text-align: center; }

.title .title__main small { font-size: 40px; font-size: 4rem; }

@media only screen and (max-width: 769px) { .title .title__main small { font-size: 20px; font-size: 2rem; } }

.title .title__ja { line-height: 24px; line-height: 2.4rem; color: white; padding: 8px 0; }

@media only screen and (max-width: 769px) { .title .title__ja { line-height: 20px; line-height: 2rem; } }

.title .title__ja::before, .title .title__ja::after { background: white; left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); }

.js-hidden { display: none; }

.gallery_wrap { border-bottom: 10px solid white; overflow: hidden; margin-top: -20%; padding-top: 20%; }

@media only screen and (max-width: 769px) { .gallery_wrap { border-bottom-width: 5px; margin-top: -80px; padding-top: 0; } }

.gallery { background: white; border-bottom: 10px solid white; height: 100%; margin-top: -12%; position: relative; -webkit-transform: skewX(-7deg) rotate(-7deg) translateY(90px); -ms-transform: skewX(-7deg) rotate(-7deg) translateY(90px); transform: skewX(-7deg) rotate(-7deg) translateY(90px); z-index: 90; }

@media only screen and (max-width: 769px) { .gallery { margin-top: -30px; margin-bottom: -40px; -webkit-transform: skewX(-7deg) rotate(-7deg); -ms-transform: skewX(-7deg) rotate(-7deg); transform: skewX(-7deg) rotate(-7deg); } }

.gallery .inner { width: 1023px; }

@media only screen and (max-width: 769px) { .gallery .inner { width: 318px; } }

.gallery .row { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: white; border-top: 10px solid white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; overflow: hidden; }

@media only screen and (max-width: 769px) { .gallery .row { border-top-width: 5px; } }

.gallery .row.row01 { height: 500px; }

@media only screen and (max-width: 769px) { .gallery .row.row01 { height: 200px; } }

.gallery .row.row01 .col_s img { height: 542px; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; width: 336px; }

@media only screen and (max-width: 769px) { .gallery .row.row01 .col_s img { height: 200px; width: 105px; } }

.gallery .row.row01 .col_s a { height: 536px; }

@media only screen and (max-width: 769px) { .gallery .row.row01 .col_s a { height: 193px; } }

.gallery .row.row01 .col_l img { height: 600px; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; width: 677px; }

@media only screen and (max-width: 769px) { .gallery .row.row01 .col_l img { height: 221px; width: 210px; } }

.gallery .row.row01 .col_l a { height: 620px; }

@media only screen and (max-width: 769px) { .gallery .row.row01 .col_l a { height: 224px; } }

.gallery .row.row02 { height: 740px; }

@media only screen and (max-width: 769px) { .gallery .row.row02 { height: 246px; } }

.gallery .row.row02 .col_s img { height: 857px; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; width: 336px; }

@media only screen and (max-width: 769px) { .gallery .row.row02 .col_s img { height: 285px; width: 104px; } }

.gallery .row.row02 .col_s a { height: 930px; }

@media only screen and (max-width: 769px) { .gallery .row.row02 .col_s a { height: 310px; } }

.gallery .row.row02 .col_l p { height: 480px; overflow: hidden; }

@media only screen and (max-width: 769px) { .gallery .row.row02 .col_l p { height: 160px; } }

.gallery .row.row02 .col_l p img { height: 444px; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; width: 677px; }

@media only screen and (max-width: 769px) { .gallery .row.row02 .col_l p img { height: 148px; width: 210px; } }

.gallery .row.row02 .col_l p:first-child { margin-bottom: 10px; }

@media only screen and (max-width: 769px) { .gallery .row.row02 .col_l p:first-child { margin-bottom: 5px; } }

.gallery .row.row02 .col_l p:first-child img { -o-object-fit: unset; object-fit: unset; -webkit-transform: skewX(7deg) rotate(7deg) translateY(78px); -ms-transform: skewX(7deg) rotate(7deg) translateY(78px); transform: skewX(7deg) rotate(7deg) translateY(78px); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; }

@media only screen and (max-width: 769px) { .gallery .row.row02 .col_l p:first-child img { -webkit-transform: skewX(7deg) rotate(7deg) translateY(30px); -ms-transform: skewX(7deg) rotate(7deg) translateY(30px); transform: skewX(7deg) rotate(7deg) translateY(30px); } }

.gallery .row.row02 .col_l a { height: 480px; }

@media only screen and (max-width: 769px) { .gallery .row.row02 .col_l a { height: 160px; } }

.gallery .row.row03 { height: 617px; }

@media only screen and (max-width: 769px) { .gallery .row.row03 { height: 206px; } }

.gallery .row.row03 .col_s img { height: 704px; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; width: 336px; }

@media only screen and (max-width: 769px) { .gallery .row.row03 .col_s img { height: 234px; width: 104px; } }

.gallery .row.row03 .col_s a { height: 662px; }

@media only screen and (max-width: 769px) { .gallery .row.row03 .col_s a { height: 220px; } }

.gallery .row.row03 .col_l > p { height: 300px; overflow: hidden; }

@media only screen and (max-width: 769px) { .gallery .row.row03 .col_l > p { height: 100px; } }

.gallery .row.row03 .col_l > p img { height: 385px; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; -webkit-transform-origin: 65% 100%; -ms-transform-origin: 65% 100%; transform-origin: 65% 100%; width: 677px; }

@media only screen and (max-width: 769px) { .gallery .row.row03 .col_l > p img { height: 128px; width: 210px; } }

.gallery .row.row03 .col_l > p:first-child { margin-bottom: 10px; }

@media only screen and (max-width: 769px) { .gallery .row.row03 .col_l > p:first-child { margin-bottom: 5px; } }

.gallery .row.row03 .col_l > p a { height: 300px; }

@media only screen and (max-width: 769px) { .gallery .row.row03 .col_l > p a { height: 100px; } }

.gallery .row.row03 .col_l .col_sub { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 365px; }

@media only screen and (max-width: 769px) { .gallery .row.row03 .col_l .col_sub { height: 121px; } }

.gallery .row.row03 .col_l .col_sub p { height: 365px; overflow: hidden; width: 333px; }

@media only screen and (max-width: 769px) { .gallery .row.row03 .col_l .col_sub p { height: 121px; width: 105px; }
  .gallery .row.row03 .col_l .col_sub p:first-child { margin-right: 5px; } }

.gallery .row.row03 .col_l .col_sub p img { height: 405px; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; width: 333px; }

@media only screen and (max-width: 769px) { .gallery .row.row03 .col_l .col_sub p img { height: 135px; width: 105px; } }

.gallery .row.row03 .col_l .col_sub p a { height: 365px; }

@media only screen and (max-width: 769px) { .gallery .row.row03 .col_l .col_sub p a { height: 121px; } }

.gallery .row.row04 { height: 500px; }

@media only screen and (max-width: 769px) { .gallery .row.row04 { height: 200px; } }

.gallery .row.row04 .col_s { width: 506px !important; }

@media only screen and (max-width: 769px) { .gallery .row.row04 .col_s { width: 160px !important; } }

.gallery .row.row04 .col_s img { height: 500px; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; width: 505px; }

@media only screen and (max-width: 769px) { .gallery .row.row04 .col_s img { height: 200px; width: 156px; } }

.gallery .row.row04 .col_s a { height: 560px; }

@media only screen and (max-width: 769px) { .gallery .row.row04 .col_s a { height: 193px; } }

.gallery .row.row04 .col_l { width: 507px !important; }

@media only screen and (max-width: 769px) { .gallery .row.row04 .col_l { width: 155px !important; } }

.gallery .row.row04 .col_l img { height: 560px; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; width: 507px; }

@media only screen and (max-width: 769px) { .gallery .row.row04 .col_l img { height: 200px; width: 156px; } }

.gallery .row.row04 .col_l a { height: 560px; }

@media only screen and (max-width: 769px) { .gallery .row.row04 .col_l a { height: 224px; } }

.gallery .row .col.col_s { width: 336px; }

@media only screen and (max-width: 769px) { .gallery .row .col.col_s { width: 104px; } }

.gallery .row .col.col_l { width: 677px; }

@media only screen and (max-width: 769px) { .gallery .row .col.col_l { width: 210px; } }

.gallery .row .col img { left: 0; position: absolute; -webkit-transform: skewX(7deg) rotate(7deg); -ms-transform: skewX(7deg) rotate(7deg); transform: skewX(7deg) rotate(7deg); top: 0; width: 100%; z-index: 10; }

.gallery .row .col a { display: block; overflow: hidden; position: relative; }

.gallery .row .col a .img_on { z-index: 1; }

.gallery .row .col a .img_off { -webkit-transition: all .5s linear; -o-transition: all .5s linear; transition: all .5s linear; z-index: 10; }

.gallery .row .col a:hover .img_off { opacity: 0; }

.gallery .row .col a::after { background: white; content: ""; display: block; height: 100%; position: absolute; right: 0; top: 0; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; width: 100%; z-index: 50; }

.gallery .row .col a.on::after { width: 0; }