@charset "UTF-8";
/* Hero */
.hero-bg{background: url(../imgs/hero.webp) no-repeat center center/cover;}

@media screen and (max-width: 768px) {
    .hero-bg{background: url(../imgs/hero_sp.webp) no-repeat center center/cover;}
}

/* Common Page */
.txt-large{margin-bottom: clamp( 20px , 4.7vw , 50px);}
.txt-normal{margin-bottom: clamp(30px, 6.8vw, 70px); line-height: 2;}

.block{margin-bottom: clamp(40px, 7.7vw, 80px);}

.common-tit{font-size: clamp( 16px , 2.1vw , 21px);line-height: 1.6;padding-bottom: 0.6em;margin-bottom: 0.6em;border-bottom: 1px solid #000000;}
.common-txt{font-size: 14px;line-height: 2;margin-bottom: 1.5em;}

.photoBox{position: relative; line-height: 1;}
.photoBox .txt{bottom: clamp( 4px , 1vw , 10px); left: clamp( 8px , 1.2vw , 15px); color: rgba(255, 255, 255, .6); font-size: clamp( 18px , 3.8vw , 38px);
position: absolute; font-family: "Castoro", serif; font-weight: 400; letter-spacing: 0.1em; line-height: 1;}

/* Layout */
.layout{position: relative; line-height: 1; margin-left: -6px; margin-right: -6px;}
.layout .cap{position: absolute; top: 100%; right: 0;}
.layout a{display: block; position: absolute; line-height: 0;}
.layout .hand{position: absolute; top: 50%; left: 12px; transform: translate(0,-50%); width: clamp( 18px, 1.9vw , 24px); display: block;}
.layout a:hover{ filter: invert(74%) sepia(100%);}
.layout .btn01{width: 19.021%; top: 37%; left: 2%;}
.layout .btn02{width: 31.262%; top: 57.6%; left: 1.5%;}
.layout .btn03{width: 25.895%; top: 53.1%; left: 34.6%;}
.layout .btn04{width: 15.066%; top: 81.2%; left: 32.2%;}

@media screen and (max-width: 768px) { 
    .layout .hand{left: 1vw; width: 1.7vw;}
}

/* Graden */
.garden{border: 1px solid #000000; }
.garden-inner{padding: 40px 6%; border-bottom: none; background: #ffffff;}

.garden-box01{margin-bottom: 20px;}

.garden-box02{display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30px;}
.garden-box02 .img{position: relative;}
.garden-box02 .img .cap{position: absolute; top: 92%; right: 5%;}

.garden-box03{display: flex; justify-content: space-between; flex-wrap: wrap;}
.garden-box03 .photo{display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}
.garden-box03 .caption{font-size: 10px;}

@media screen and (min-width: 768px) {
    .garden-box02 .inner{width: 43.2%; margin-top: 55px;}
    .garden-box02 .img{width: 55.3%; left: -3%;}
    
    .garden-box03 .inner{width: 50.4%;}
    .garden-box03 .img{width: 46.6%;}
    
    .garden-box03 .photo figure{width: 31.15%; margin-bottom: 3px;}
}

@media screen and (max-width: 768px) {    
    .garden-inner{padding: 20px;}
    
    .garden-box01 .photoBox{margin: 0 -21px;}
    .garden-box01 .photoBox .cap{padding-right: 10px;}
    
    .garden-box02 .inner{width: 100%; order: -1;}
    .garden-box02 .img{margin: 0 -15px;}
    .garden-box02 .common-txt{margin-bottom: 0;}
    
    .garden-box03 .photo figure{width: 48%; margin-bottom: 2%;}
}

/* Modal */
.modal{max-width: 800px; width: 50%; min-width: 500px; color: #ffffff; display: none;
font-family: 'Noto Serif JP', YuMincho, 'Hiragino Mincho ProN', 'Yu Mincho', 'MS PMincho', serif;}
.modalImg{line-height: 1;}
.modalCap{font-size: 12px; text-align: right; padding: 5px 0 0 0;}

.fancybox-content{background: none; padding: 0; overflow: initial;}
.fancybox-close-small{padding: 0 !important; top: -44px !important; right: -10px !important;}

@media screen and (max-width: 768px) { 
    .modal{max-width: 910px; width: 90%; min-width: 100px;}
    .modalCap{font-size: 10px;}
}