@charset "utf-8";

/* ******************* *
* PORTFOLIO
* ******************* */
.portfolio__list {max-width: 1040px;padding-bottom: 100px;}
.portfolio__list .list {display: flex;flex-wrap: wrap;gap: 50px 60px;}
.portfolio__list .item {width: calc(50% - 30px);}
.portfolio__list .item a {display: block;width: 100%;height: 100%;}
.portfolio__list .item .img {margin-bottom: 10px;overflow: hidden;}
.portfolio__list .item .img > img {transition: .35s ease;}
.portfolio__list .item .title {color: #6E6E64;font-size: 13px;font-weight: 300;text-align: right;transition: .35s ease;}
.portfolio__list .item a:hover .img > img,
.portfolio__list .item a:focus .img > img {transform: scale(1.02);}
.portfolio__list .item a:hover .title,
.portfolio__list .item a:focus .title {color: var(--color-main);}
.portfolio__view {display: flex;align-items: flex-start;}
.portfolio__view-img {width: 100%;padding-bottom: 100px;}
.portfolio__view-img .thumb > img {width: 100%;}
.portfolio__view-img .img-wrap {margin-top: 1px;margin-bottom: 80px;}
.portfolio__view-img .img-wrap > img {width: 100%;}
.portfolio__view-img .img-wrap > img:not(:last-child){margin-bottom: 1px;}
.portfolio__view-img .btn-inquiry {text-align: right;}
.portfolio__view-img .btn-inquiry > span {color: var(--color-main);font-family: var(--font-Montserrat);font-size: 16px;font-weight: 300;}
.portfolio__view-img .btn-inquiry > a {font-size: 17px;transition: .35s;}
.portfolio__view-img .btn-inquiry > a:hover,
.portfolio__view-img .btn-inquiry > a:focus {letter-spacing: .075em;}
.portfolio__view-info {flex: 0 0 auto;max-width: 725px;width: 46%;height: calc(100vh - 208px);padding: 130px 150px 0 150px;padding: 7.6% 8.7% 0 8.7%;box-sizing: border-box;position: sticky;top: 0;left: 0;}
.info__cont-wrap.mo-view {display: none;}
.info__cont-wrap {max-width: 345px;width: 100%;}
.info__cont {/* max-width: 345px; *//* width: 70%; *//* position: absolute; *//* top: 90px; *//* left: 50%; *//* transform: translateX(-50%); */}
.info__cont .title {margin-bottom: 50px;}
.info__cont .title > .tit1 {margin-bottom: 15px;font-family: var(--font-Montserrat);font-size: 12px;font-weight: 300;}
.info__cont .title > .tit2 {font-family: var(--font-NotoSerif);font-size: 1.50em;}
.info__cont .content {margin-bottom: 90px;}
.info__cont .content > p {color: #6E6E64;font-size: 13px;line-height: 2.1;}
.btn-gallery {margin-bottom: 85px;padding: 0;border: 0;background: none;color: #000;font-family: var(--font-Montserrat);font-size: 12px;font-weight: 300;transition: .35s;cursor: pointer;}
.btn-gallery:hover,
.btn-gallery:focus {color: var(--color-main);}
.sns__list {display: flex;align-items: center;gap: 20px;margin-top: 10px;/* position: absolute; *//* bottom: 0; */}
.sns__list > li > a {}
.sns__list > li > a > img {transition: .35s ease;}
.sns__list > li > a > img:nth-child(2) {display: none;opacity: 0;visibility: hidden;}
.sns__list > li > a:hover > img:nth-child(1) {display: none;opacity: 0;visibility: hidden;}
.sns__list > li > a:hover > img:nth-child(2) {display: block;opacity: 1;visibility: visible;}

.btn-scroll {position: absolute;bottom: 0;left: 40px;}
.btn-scroll > button {display: block;width: 40px;aspect-ratio: 1 / 1;border-style: solid;border-color: #606060;background: none;transform: rotate(45deg);cursor: pointer;}
.btn-scroll > .scroll-up {margin-bottom: 35px;border-width: 1px 0 0 1px;}
.btn-scroll > .scroll-down {border-width: 0 1px 1px 0;}

@media all and (max-width: 1680px){
    .btn-scroll {left: auto;right: calc(100% + 40px);}
}
@media all and (max-width: 1399px){
    .portfolio__view {display: block;}
    .portfolio__view-img {max-width: none;width: 100%;}
    .portfolio__view-img .btn-inquiry {text-align: left;}
    .portfolio__view-info {width: 100%;height: auto;position: relative;}
    .info__cont-wrap {display: none;}
    .info__cont-wrap.mo-view {display: block;max-width: none;}
    .info__cont {max-width: 795px;width: 80%;/* margin-top: 0; */padding: 0 10% 10%;box-sizing: border-box;/* position: relative; *//* top: auto; *//* left: auto; *//* transform: none; */}
    .info__cont .content {margin-bottom: 0;} 
    .btn-gallery {margin: 30px 0 50px;}
    .sns__list {display: none;}
    .btn-scroll {position: fixed;left: auto;right: 55px;bottom: 40px;z-index: 990;}
}
@media all and (max-width: 1199px){
    .portfolio__list {max-width: none;}
    .portfolio__list .list {gap: 50px 40px;}
    .portfolio__list .item {width: calc(50% - 20px);}
    .portfolio__view-img .btn-inquiry {padding: 0 7%;}
    .info__cont-wrap.mo-view {position: relative;z-index: -1;}
    .info__cont {display: flex;gap: 100px;width: 85%;padding: 7%;z-index: -1;}
    .info__cont .title {flex: 0 0 auto;}
    .info__cont .content {margin-bottom: 0;}
    .btn-gallery {margin: 0;position: absolute;left: 7%;bottom: 90px;z-index: 1;}
}
@media all and (max-width: 1024px){
    .portfolio__list .list {gap: 50px 30px;}
    .portfolio__list .item {width: calc(50% - 15px);}
    .btn-scroll > button {width: 32px;}
}
@media all and (max-width: 768px){
    .portfolio__list .list {gap: 50px 20px;}
    .portfolio__list .item {width: calc(50% - 10px);}
    .info__cont {gap: 50px;}
    .btn-scroll {right: 35px;bottom: 30px;}
}
@media all and (max-width: 640px){
    .portfolio__view-img .img-wrap {margin-bottom: 50px;}
    .portfolio__view-img .btn-inquiry {padding: 0 8%;}
    .portfolio__view-img .btn-inquiry > span {font-size: 12px;}
    .portfolio__view-img .btn-inquiry > a {font-size: 15px;}
    .info__cont {display: block;width: 88%;padding: 12% 8%;}
    .info__cont .title {margin-bottom: 30px;}
    .btn-gallery {margin-top: 30px;position: relative;left: 8%;bottom: auto;}
    .btn-scroll {right: 25px;bottom: 20px;}
    .btn-scroll > button {width: 25px;}
}
@media all and (max-width: 480px){
    .portfolio__list .item {width: 100%;}
}


/* fancybox custom */
.f-button {background: none !important;}
.f-button[aria-disabled] {opacity: .3;}
.f-button > svg {display: none;}

.fancybox__dialog {padding: 60px 60px 40px !important;box-sizing: border-box;}
.fancybox__backdrop {background: rgba(0,0,0,.7) !important;backdrop-filter: blur(40px);}
.fancybox__container {flex-direction: row !important;flex-wrap: wrap;justify-content: center;gap: 35px;max-height: calc(100vh - 100px);height: 100vh;position: relative !important;overflow: visible !important;}
.fancybox__carousel {order: 2;flex-direction: row !important;gap: 0 20px;max-width: 1260px;/* max-height: calc(100vh - 250px); */max-height: calc(100% - 130px);width: 100%;height: 100%;overflow-x: visible !important;}
.f-carousel__toolbar {padding: 0 !important;position: fixed !important;top: 60px !important;right: 60px !important;left: auto !important;}
.f-carousel__toolbar__column.is-right {padding: 10px 15px;}
.f-carousel__toolbar .f-button {display: block;width: 20px;height: 20px;}
.f-carousel__toolbar .f-button::before,
.f-carousel__toolbar .f-button::after {content: '';display: block;width: 100%;height: 1px;background: #fff;position: absolute;}
.f-carousel__toolbar .f-button[data-panzoom-action="zoomIn"]::after {transform: rotate(90deg);}
.f-carousel__toolbar .f-button[data-fancybox-close] {margin-left: 15px;}
.f-carousel__toolbar .f-button[data-fancybox-close]::before {transform: rotate(45deg);}
.f-carousel__toolbar .f-button[data-fancybox-close]::after {transform: rotate(-45deg);}
.f-carousel__toolbar__column {gap: 30px !important;}
.fancybox__viewport {display: block !important;max-width: 1100px;width: 100%;margin: 0 auto;overflow: hidden !important;}
.fancybox__slide {max-width: 1260px;}
.fancybox__carousel > .f-button.is-arrow {flex: 0 0 auto;width: 60px;height: 60px;border-radius: 0;inset: auto !important;top: calc(100% - 80px) !important;transform: translateY(-100%) !important;}
.fancybox__carousel > .f-button.is-arrow:before {width: 66%;aspect-ratio: 1 / 1;border-style: solid;border-color: #fff;transform: rotate(45deg);}
.fancybox__carousel > .f-button.is-prev:before {border-width: 0 0 2px 2px;margin: 39px 0 0 49px;}
.fancybox__carousel > .f-button.is-next {right: 0 !important;}
.fancybox__carousel > .f-button.is-next:before {border-width: 2px 2px 0 0;margin: 39px 0 0 30px;}
.fancybox__thumbs {order: 3;padding: 0 !important;}
.f-thumbs__viewport {gap: 6px;}
.f-thumbs__slide button {border-radius: 0 !important;}
.fancybox-title-wrapper {order: 1;flex: 0 0 auto;max-width: 125px;position: absolute;top: 0;left: 3.5%;}
.fancybox-title-wrapper > .title {margin-top: 80px;color: #fff;}
.fancybox-title-wrapper > .title > .tit1 {margin-bottom: 15px;font-family: var(--font-Montserrat);font-size: 12px;font-weight: 300;}
.fancybox-title-wrapper > .title > .tit2 {font-family: var(--font-NotoSerif);font-size: 1.50em;}

@media all and (max-width: 1680px){
    .fancybox__container {margin: 0;overflow: visible;}
}
@media all and (max-width: 1399px){
    .fancybox__carousel {max-width: 1000px;}
    .fancybox__viewport {max-width: 780px;}
    .fancybox-title-wrapper {left: 0;}
}
@media all and (max-width: 1199px){
    .fancybox__viewport {max-width: none;}
    .fancybox__slide {justify-content: center;}
    .fancybox__slide:before, 
    .fancybox__slide:after {display: none !important;}
    .fancybox__carousel > .f-button.is-prev {transform: translate(-90%, -100%) !important;}
    .fancybox__carousel > .f-button.is-next {transform: translate(90%, -100%) !important;}
    .f-panzoom__wrapper {max-width: 100% !important;}
    .f-panzoom__viewport > .f-panzoom__content {margin: 0 auto;}
    .fancybox-title-wrapper {display: none;}
}
@media all and (max-width: 1024px){
    .fancybox__container {height: calc(100vh - 150px);}
    .fancybox__carousel>.f-button.is-arrow {top: 50% !important;}
    .fancybox__carousel>.f-button.is-prev {transform: translate(-90%, -50%) !important;}
    .fancybox__carousel>.f-button.is-next {transform: translate(90%, -50%) !important;}
}
@media all and (max-width: 768px){
    .f-carousel__toolbar {top: 30px !important;right: 30px !important;}
}
@media all and (max-width: 640px){
    .fancybox__carousel > .f-button.is-arrow {width: 40px;height: 40px;}
    .fancybox__carousel > .f-button.is-prev {transform: translate(-130%, -50%) !important;}
    .fancybox__carousel > .f-button.is-next {transform: translate(130%, -50%) !important;}
}