@charset "UTF-8";

html { scroll-padding-top: 80px;}

/* Hero */
.hero{ height: 100vh;}
.hero-bg{background: url(../imgs/hero.webp) no-repeat center center/cover;}
.tit-anime { position: absolute; right: 30px; bottom: 30px; width: 38.48%; max-width: 541px; height: 41.18%; opacity: 0; transform: scale(0.95); animation: fade-pop 1s ease-out 1s forwards;}
.hero-tit{ letter-spacing: 0.3em; left: calc(50% + .5em);}
.en.castro { font-family: "Castoro", serif; letter-spacing: 0.3em;}
.tategaki{ writing-mode: vertical-rl;}

@keyframes fade-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media screen and (max-width: 768px) {
    .hero-bg{background: url(../imgs/hero_sp.webp) no-repeat center center/cover;}
    .tit-anime{ right: 20px; bottom: 30px; width: 61.59vw; height: 36.65vw;}
    .hero-tit{ left: 50%; width: 100%;}

}

/* Common Page */
.lower-container{max-width: 1200px;}
.tab-item.gridBox{ grid-template-columns: 170px auto; gap: 6.25%;}

.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; }

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

.gridBox{ display: grid;}
.flexBox{ display: flex; }

@media screen and (max-width: 768px) {
    .tab-item {display: none;}
    .tab-item.active { display: grid;}
    .tab-item.gridBox{ grid-template-columns: 1fr; gap: 30px 0;}
}

/* top-content */
.top-content{ max-width: 1400px; margin: 0 auto 185px;}

/* main-nav */
.main-nav .gridBox{grid-template-columns: 499fr 451fr 416fr; gap: 1.214%; width: 100%; max-width: 1400px; margin: 0 auto;}
.main-nav .col-middle, .col-right { display: grid; gap: 17px; }
.main-nav a { position: relative; display: block; width: 100%; height: 100%; background: url(../imgs/bg_sabnav_kitchen.webp); background-repeat: no-repeat;  background-size: cover; background-position: center; overflow: hidden; border-radius: 0 0 16px 0; transition: all 0.3s;}
.main-nav a::after{ font-family: 'Material Symbols Outlined';
	content: "\e313"; position: absolute; display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; padding-top: 3px; background: #fff; bottom: 16px; left: 16px; font-size: 36px; font-variation-settings: 'wght' 100;  border-radius: 50%; transition: all 0.3s;}
.main-nav .item01 { aspect-ratio: 499 / 720; }
.main-nav .col-middle .item02 { aspect-ratio: 451 / 341; background-image: url(../imgs/bg_sabnav_bath.webp) ;}
.main-nav .col-middle .item03 { aspect-ratio: 451 / 362; background-image: url(../imgs/bg_sabnav_powder.webp) ;}
.main-nav .col-right .item04 { aspect-ratio: 416 / 169; background-image: url(../imgs/bg_sabnav_toilet.webp) ;}
.main-nav .col-right .item05 { aspect-ratio: 416 / 276; background-image: url(../imgs/bg_sabnav_amenity.webp) ;}
.main-nav .col-right .item06 { aspect-ratio: 416 / 243; background-image: url(../imgs/bg_sabnav_eyesplus.webp) ;}
.main-nav a[class^="item"] .name::first-letter{ font-size: 2.18em; line-height: 0;}
.main-nav a[class^="item"] .name{  position: absolute; right: 16px; bottom: 16px; color: #fff; text-align: right; font-size: clamp( 18px , 3vw , 24px); font-weight: 400; line-height: 1.1; }
.main-nav a.item02 .name,
.main-nav a.item04 .name,
.main-nav a.item05 .name,
.main-nav a.item06 .name{ right: auto; bottom: auto; left: 16px; top: 28px;}
.main-nav a.item04 .name{ color: #212121;}
.main-nav a[class^="item"] .name .en{ letter-spacing: 4px; }
.main-nav a[class^="item"] .name .small{ font-size: 12px;}
.main-nav .tategaki{ position: absolute; right: 16px; top: 16px; font-size: clamp( 14px , 1.2vw , 18px); height: 100%;}
.main-nav .tategaki span{ background: #fff; line-height: 2.5; display: inline; padding: 2px 5px; letter-spacing: .5em; -webkit-box-decoration-break: clone; box-decoration-break: clone;}
/* hover */
.main-nav a:hover{ opacity: 0.7; transition: all 0.3s;}
.main-nav a:hover::after{ background: #212121; color: #fff; transform: translateY(5px); transition: all 0.3s;}

@media screen and (max-width: 768px) {
  .main-nav.bottom{ padding-top: 20px; margin-top: 40px; border-top: 1px solid #212121; margin-bottom: 22vw;}
  .main-nav .gridBox{ grid-template-columns: 100fr 100fr;  gap: 60px 10px; }
  .main-nav .col-middle, 
  .main-nav .col-right { display: contents; }
  .main-nav a { position: relative; display: block; width: 100%; height: 100%; background: url(../imgs/bg_sabnav_kitchen_sp.webp); background-size: contain;}
  .main-nav .col-middle .item02 { background-image: url(../imgs/bg_sabnav_bath_sp.webp) ;}
  .main-nav .col-right .item04 { background-image: url(../imgs/bg_sabnav_toilet_sp.webp) ;}
  .main-nav .col-right .item05 { background-image: url(../imgs/bg_sabnav_amenity_sp.webp) ;}
  .main-nav .col-right .item06 { background-image: url(../imgs/bg_sabnav_eyesplus_sp.webp) ;}
  .main-nav a { aspect-ratio: 1 / 1 !important; overflow: visible;}
  .main-nav a::after{ width: 24px; height: 24px; bottom: 5px; left: auto; right: 5px; font-size: 24px; }
  .main-nav a[class^="item"] .name{ width: 100%; bottom: auto; top: 103%;  right: auto; left: 0; line-height: 1; color: #212121; text-align: left; font-size: 16px;}
  .main-nav a[class^="item"] .name span{ margin-left: 0.5rem;}
  .main-nav a[class^="item"] .name .en{ letter-spacing:0;}
  .main-nav .item01 { grid-column: 1 / 2; grid-row: 1 / 2;}
  .main-nav a[class^="item"] .name::first-letter{ font-size: 1em;}
  .main-nav .tategaki{ display: none;}
  .main-nav .photo__capIn{ right: auto; left: 10px;}

  .main-nav a[class^="item"].active .name{ color: #fff;}
  .main-nav a[class^="item"].active .name::before{ position: absolute; content: ""; width: 100%; height: calc(100% + 2em); display: block; transform: translateY(-1.5em); background: #755A4D; color: #fff; z-index: -1; border-radius: 0 0 8px 0;}

  /* hover */
  .main-nav a:hover{ opacity:initial;}
  .main-nav a:hover::after{ background: #212121; color: #fff; transform:none;}
}

/* sabnav-inside */
.sabnav-container{ max-width: 1200px; margin: 163px auto 52px;}
.sabnav-inside{ row-gap: 10px;}
.sabnav-inside .sabnav-item{ flex-basis: calc((100% - 30px)/3); background: #D3CABA; border-radius: 0 0 8px 0; padding: 8px;}
.sabnav-inside .sabnav-item figure{ width: 120px;}
.sabnav-inside .sabnav-item a{ display: block; width: 100%; height: 100%; position: relative; }
.sabnav-inside .sabnav-item .name{ position: absolute; top: 50%; transform: translateY(-50%); right: 10px; text-align: right;}
.sabnav-inside .sabnav-item .en{ font-size: 16px; display: inline-block; line-height: 1; letter-spacing: 0.08em;}
.sabnav-inside .sabnav-item .en::first-letter{ font-size: 2em;}
.sabnav-inside .sabnav-item .jp{ font-size: 12px;}

.sabnav-inside .sabnav-item.active{ background: #755A4D;}
.sabnav-inside .sabnav-item.active .name{ color: #fff;}
.sabnav-inside .sabnav-item:hover{ background: #755A4D; transition: all 0.3s;}
.sabnav-inside .sabnav-item:hover .name{ color: #fff; transition: all 0.3s}

/* equip item component */
.lower-container > .bg-titBox{border-radius: 0 0 16px 0; padding: 17px 0 10px; font-size: clamp( 22px , 3.1vw , 24px); background: url(../imgs/bg_leftbar_kitchen.webp) #212121 no-repeat; color: #fff; text-align: center; position: relative;}

#bath > .bg-titBox{ background-image: url(../imgs/bg_leftbar_bath.webp); }
#powder > .bg-titBox{ background-image: url(../imgs/bg_leftbar_powder.webp); }
#toilet > .bg-titBox{ background-image: url(../imgs/bg_leftbar_toilet.webp); background-color: #fff; color: #212121;}
#amenity > .bg-titBox{ background-image: url(../imgs/bg_leftbar_amenity.webp); }
#eyesplus > .bg-titBox{ background-image: url(../imgs/bg_leftbar_eyesplus.webp); }

.lower-container > .bg-titBox .left-tit{ margin-top: 53px; font-size: clamp( 22px , 3.1vw , 24px);}
.lower-container > .bg-titBox .left-tit span{ font-size: 12px;}
.lower-container > .bg-titBox .left-tit::after{ content: ""; display: block; width: 1px; height: 88px; margin: 30px auto; background: #fff;}
#toilet > .bg-titBox .left-tit::after{ background: #212121;}
.lower-container > .bg-titBox .tategaki{ text-align: initial; position: absolute; transform: translateX(-50%); left: 50%; line-height: 2; letter-spacing: 0.5em; font-size: clamp( 15px , 1.9vw , 18px);}
.lower-container > .bg-titBox .left-tit{ margin-top: 0;}

#toilet .lower-container > .bg-titBox .left-tit::after{ background: #212121;}


@media screen and (max-width: 768px) { 
  .lower-container > .bg-titBox{ background-image: url(../imgs/bg_leftbar_kitchen_sp.webp);  }
  #bath > .bg-titBox{ background-image: url(../imgs/bg_leftbar_bath_sp.webp); }
  #powder > .bg-titBox{ background-image: url(../imgs/bg_leftbar_powder_sp.webp); }
  #toilet > .bg-titBox{ background-image: url(../imgs/bg_leftbar_toilet_sp.webp);}
  #amenity > .bg-titBox{ background-image: url(../imgs/bg_leftbar_amenity_sp.webp); }
  #eyesplus > .bg-titBox{ background-image: url(../imgs/bg_leftbar_eyesplus_sp.webp); }

  .lower-container > .bg-titBox .left-tit::after{ content: ""; width: calc(100% - 20px); height: 1px; margin: 10px auto; background: #fff;}
  .lower-container > .bg-titBox .tategaki{ position: static; writing-mode: initial; transform: none; font-size: 15px; letter-spacing: 0.1em; text-align: center; line-height: 1.5;}
  .lower-container > .bg-titBox{ background-size: cover;  margin-bottom: 40px;}
}

.equip-items:last-of-type{ padding-bottom: 30px;}
.flexBox .equip-items{ gap:40px 45px;}
.flexBox:has(.img-box){ gap: 45px 16px;}
.equip-items .item { flex-basis: calc((100% - 40px)/2); gap: 6px;}
.equip-items .item > .flexBox{ gap: 3.5%;}
.equip-items .item .img-box{ flex-basis: 45.2%;}
.equip-items .item img{ width: 100%;}
.equip-items .item .txt-box{ flex-basis: calc(100% - 48.7%);}

.equip-items .item.wide{ flex-basis: 100%;} 
.equip-items .item.wide > .flexBox{ gap: 1.6%;}
.equip-items .item.wide .img-box{ flex-basis: 21.6%;}
.equip-items .item.wide .txt-box{ flex-basis: calc(100% - 23.2%);}

.equip-items .item.wide02{ flex-basis: 100%;} 
.equip-items .item.wide02 > .flexBox{ gap: 1.6%;}
.equip-items .item.wide02 .img-box{ flex-basis: 45%;}
.equip-items .item.wide02 .img-box figure{ flex-basis: calc((100% - 16px)/2);}
.equip-items .item.wide02 .txt-box{ flex-basis: calc(100% - 47.1%);}

.equip-items .item.wide03{ flex-basis: 100%;} 
.equip-items .item.wide03 > .flexBox{ gap: 1.6%;}
.equip-items .item.wide03 .img-box{ flex-basis: 63%;}
.equip-items .item.wide03 .txt-box{ flex-basis: calc(100% - 64.6%);}

.equip-items .item .item-tit{ font-size: 18px; margin-bottom: .8em; line-height: 1.5;}
.equip-items .item .common-txt{ font-size: 14px; margin-bottom: .8em;}

@media screen and (max-width: 768px) {
  .flexBox:has(.img-box){ gap: 25px 0;}
  .equip-items .item { flex-basis: 100%; gap: 6px;}
  .equip-items .item > .flexBox {
    display: grid; grid-template-columns: 35% 1fr; gap: 10px 15px; align-items: start;}
  .equip-items .item.wide > .flexBox { gap: 10px 15px;}
  .equip-items .item.wide.air > .flexBox { display: block;}
  .equip-items .item.wide02 > .flexBox{ gap: 10px 15px;}
  .equip-items .item.wide03 > .flexBox{display: block; gap: 10px 15px;}
  .equip-items .item.wide03 .img-box{ flex-basis: 63%;}
  .equip-items .item.wide03 .txt-box{ flex-basis: calc(100% - 64.6%);}

  .equip-items .item .txt-box { display: contents;}
  .equip-items .item .item-tit { grid-column: 1 / -1; grid-row: 1; margin-bottom: 10px;}
  .equip-items .item .img-box { gap: 10px; grid-row: 2; grid-column: 1;}
  .equip-items .item .common-txt{ font-size: 12px; line-height: 1.2;}
  .equip-items .item .txt-box > *:not(.item-tit) { grid-column: 2;}

  .equip-items .item.wide02 .img-box figure { flex-basis: 100%;}
}

/* .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;} */

.pickup-item {  background: #D3CABA; margin-top: 43px;}
.pickup-item > .flexBox{ gap: 0;}
.pickup-item .eq02Cap{text-align: right;font-size: 10px; color: #000; margin-bottom: 100px;}
.pickup-item .titJpEn { text-align: left; }

.pickup-item .titJpEn .en { font-size: 18px; background: #755A4D; color: #fff; line-height: 1.6; padding-left: .5em;}
.pickup-item .titJpEn .jp { font-size: 18px; line-height: 2;}

.pickup-item .row01{ align-items: center; }
.pickup-item .row01 .col01 { flex-basis: 35.2%;}
.pickup-item .row01 .col02 { flex-basis: 64.8%; padding: 0 30px;}
.pickup-item .row01 .col02 .item-tit { font-size: 18px; margin-bottom: 1.5em}
.pickup-item .row01 .col02 li:not(:last-child) { margin-bottom: 25px;}

.pickup-item .row03 { padding: 32px 50px; row-gap: 34px;}
.pickup-item .row03 .itemBubble { flex-basis: calc((100% - 20px)/2); font-size: 12px;}
.pickup-item .row03 .itemBubble .photo{ flex-basis: 52%;}
.pickup-item .row03 .itemBubble .itemBubbleDesc{ flex-basis: 40.01%;}
.pickup-item .row03 .itemBubble h5 { margin: 5px 0;  font-size: 14px;}
.pickup-item .row03 .itemBubble .bgWhite { display: inline-block; font-size: 12px; width: 100%; padding: .5em; color: #fff; background: #9a9a9a; margin-bottom: 5px;}

.pickup-item .row04 {align-items: center;background: #d8dcdf;color: #000;}
.pickup-item .row04 .col01 { flex-basis: 33%;}
.pickup-item .row04 .col02 { flex-basis: 67%; padding: 20px;}
.pickup-item .row04 .col02 .desc { flex-basis: 60%;}
.pickup-item .row04 .col02 .desc h4 { font-size: 20px; margin-bottom: 10px;}
.pickup-item .row04 .col02 ul { flex-basis: 35%;}
.pickup-item .row04 .col02 ul li { height: 84px; flex-basis: 48%; margin-bottom: 4%; border-radius: 10px; text-align: center; background: #fff; color: #000; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; line-height: 1.4; font-size: 18px;}

.bath .pickup-item .row01{align-items: center; gap: 0;}
.bath .pickup-item .row01 .col01 { flex-basis: 41.19%;}
.bath .pickup-item .row01 .col02 { flex-basis: 58.8%; padding: 30px;}
.bath .pickup-item .item-tit{ font-size: 21px; margin-bottom: 1em;}
.bath .pickup-item .point{ margin-top: 22px;}
.bath .pickup-item .row01 .col02 li:not(:last-child){ margin-bottom: 0;}
.bath .pickup-item .point li{ flex-basis: calc((100% - 33px)/4); padding: 1em 5px; background: #fff; border-radius: 5px; text-align: center; font-size: 14px;}


@media screen and (max-width: 768px) {
  .pickup-item .titJpEn .jp { line-height: 1.5; margin-bottom: .5em;}

  .pickup-item .row01 .col01 { flex-basis: 100%; text-align: center; margin-bottom: 20px;}
  .pickup-item .row01 .col02 { flex-basis: 100%; padding: 20px 10px;}
  .pickup-item .row01 .col02 .item-tit{ margin-bottom: 1em;}
  
	.pickup-item .row03 { padding: 40px 20px; row-gap: 34px;}
	.pickup-item .row03 .itemBubble { flex-basis: 100%;}
	.pickup-item .row03 .itemBubble .photo{ flex-basis: 100%;}
	.pickup-item .row03 .itemBubble .photo img{ width: 100%;}
	.pickup-item .row03 .itemBubble .itemBubbleDesc{ flex-basis: 100%;}

  .bath .pickup-item .row01 .col01 { flex-basis: 100%; order: 2; margin-bottom: 0;}
	.bath .pickup-item .row01 .col02 { flex-basis: 100%; order: 1; padding: 30px 10px;}
  .bath .pickup-item .point{ margin-top: 20px; row-gap: 10px;}
	.bath .pickup-item .point li{ flex-basis: calc((100% - 10px)/2); font-size: 12px;}
}

.amenity .item.wide .img-box{ flex-basis: 47.3%;}
.amenity .item.wide .txt-box{ flex-basis: 49.52%;}
.amenity .item.wide02 .img-box{ padding: 33px 0 18px; width: 100%; background: #fff; justify-content: center; text-align: center;}
.amenity .item.wide02 .txt-box{ width: 100%;}
.amenity .item.wide02 .img-box .caption{ text-align: right;}
@media screen and (max-width: 768px) {
	.amenity .item.wide02 .img-box{ display: block; gap: 20px;}
	.amenity .item.wide02 .img-box figure{ flex-basis: 100%;}
  .amenity .item.wide02 .item-tit{ margin-top: 10px;}
}

.amenity .internet{ margin-bottom: 88px;}
.amenity .internet .img-box{ width: 31.1%; order: 2;}
.amenity .internet .txt-box{ width: 68.9%; order: 1; padding: 30px;}
.amenity .internet .item-tit{ font-size: 21px; width: 100%;}
.amenity .internet .item-tit .en{ font-size: 12px; display: block; border-bottom: 1px solid; padding-bottom: 1em; margin-bottom: 1em;}
.amenity .internet .item-copy{ font-size: 16px; margin: 1em 0; background: #755A4D; padding: 0.5em; width: 100%; color: #fff;}
.amenity .internet .item-subtit{ font-size: 18px; margin-bottom: 1em;}
.amenity .internet .txt{ font-size: 16px; line-height: 1.8;}

@media screen and (max-width: 768px) {
  .amenity .internet .img-box{ width: 100%; order: 1;}
  .amenity .internet .txt-box{ width: 100%; order: 2; padding: 30px 20px;}
}


.eyesplus .other{ margin-top: 25px;}
.eyesplus .other .bg-titBox{ padding: 12px 18px; margin-bottom: 25px; background: #E8E1D5; font-size: 18px; border-radius: 0 0 16px 0;}
.eyesplus .other .other-list{ row-gap: 25px; margin-bottom: 20px; align-items: center;}
.eyesplus .other .other-item{ flex-basis: calc((100% - 35px)/2); border: 1px solid #aaa; padding: 10px; transition: all 0.3s;}
.eyesplus .other .other-item:hover{ background: #dfd5c5; border: 1px solid #E8E1D5; transition: all 0.3s;}
.eyesplus .other .other-item a{ height: 100%;}
.eyesplus .other .other-item .txt-box{ position: relative; height: 100%; min-height: 120px; flex-basis: 63.3%; font-weight: 700; align-items: center;}
.eyesplus .other .other-item .txt-box .txt{ font-size: 16px; line-height: 1.5;}
.eyesplus .other .other-item .txt-box .more{  position: absolute; bottom: -1em; right: 0; padding-right: 2em; font-weight: 400;text-align: right; font-size: 14px;}
.eyesplus .other .other-item .txt-box .more::after{ font-family: 'Material Symbols Outlined'; content: "\e5c8"; position: absolute; display: flex;  justify-content: center; width: 24px; height: 24px; padding-top: 3px; background: #00703C; color: #fff; bottom: -4px; right: 0; font-size: 16px; font-variation-settings: 'wght' 400;  border-radius: 50%; transition: all 0.3s;}
.eyesplus .other .other-item:hover .txt-box .more{ transform: translateX(8px); transition: all 0.3s;}
.eyesplus .other .other-item:hover .txt-box .more::after{ background: #333; transition: all 0.3s;}
.eyesplus .other .other-item figure{ flex-basis: 32.9%;}

@media screen and (max-width: 1199px) {
  .eyesplus .other .other-item .txt-box{ align-items: flex-start;}
  .eyesplus .other .other-item .txt-box .txt{ font-size: 13px;}
  .eyesplus .other .other-item .txt-box .more{ bottom: 0;}
}

@media screen and (max-width: 768px) {
  .eyesplus .other .other-item{ flex-basis: 100%;}
  .eyesplus .other .other-item .txt-box .more{ font-size: 14px;}
}

/* FIX 2026-03-18 */
@media (min-width: 769px) {
  .tab-item {
    scroll-margin-top: -80px;  
  }
}
@media (max-width: 768px) {
  .sp-hidden {
    display: none !important;
  }
  .sp-block {
    display: block !important;
  }
}