/* Best Tiny House – site styles. Motion language follows the Grande Memory reference. */
@font-face{font-family:"Cormorant Garamond";font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/jost-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/jost-latin-500-normal.woff2) format("woff2")}

:root{
  --vw:1vw;
  --bg:#ffffff;
  --ink:#141614;
  --grey:#eceeea;
  --mute:#6b706a;
  --accent:#3d5a47;
  --serif:"Cormorant Garamond","Shippori Mincho",Georgia,"Times New Roman",serif;
  --sans:"Jost","Zen Kaku Gothic New",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.is-fixed{overflow:hidden}
body.lb-open .btn-menu,body.lb-open .btn_pagetop{opacity:0;visibility:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.kv :focus-visible,.nav-menu.is-open :focus-visible{outline-color:#fff}
.nav-menu.is-open .inner :focus-visible{outline-color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@keyframes scaleXAnime{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes scaleYAnime{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@keyframes lineAnime{
  0%{transform:scaleY(1);transform-origin:bottom center}
  60%{transform:scaleY(1);transform-origin:bottom center}
  80%{opacity:1;transform:scaleY(0);transform-origin:bottom center}
  81%{opacity:1;transform:scaleY(0);transform-origin:top center}
  100%{opacity:1;transform:scaleY(1);transform-origin:top center}}
@keyframes kenburns{0%{transform:scale(1.14)}100%{transform:scale(1)}}

/* loader */
.white{position:fixed;inset:0;background:#fff;z-index:200;transition:opacity .6s,visibility .6s}
.white.is-hide{opacity:0;visibility:hidden;pointer-events:none}

/* ---------------- menu ---------------- */
.btn-menu{position:fixed;top:26px;right:30px;width:64px;height:40px;z-index:120}
.btn-menu a{position:relative;display:block;width:100%;height:100%}
.btn-menu span{position:absolute;left:0;width:100%;height:1px;background:#fff;transition:transform .5s var(--ease),opacity .3s,background-color .4s}
.btn-menu span:nth-child(1){top:0}
.btn-menu span:nth-child(2){top:20px}
.btn-menu span:nth-child(3){top:40px}
.btn-menu.is-black span{background:var(--ink)}
.nav-menu.is-open .btn-menu span{background:var(--ink)}
.nav-menu.is-open .btn-menu span:nth-child(1){transform:translateY(20px) rotate(20deg)}
.nav-menu.is-open .btn-menu span:nth-child(2){opacity:0}
.nav-menu.is-open .btn-menu span:nth-child(3){transform:translateY(-20px) rotate(-20deg)}
.nav-menu .inner{position:fixed;top:0;right:0;width:min(440px,100%);height:100%;background:#fff;z-index:110;padding:120px 56px 48px;transform:translateX(100%);visibility:hidden;transition:transform .8s var(--ease),visibility .8s;overflow-y:auto}
.nav-menu.is-open .inner{transform:none;visibility:visible}
.nav-menu .overlay{position:fixed;inset:0;background:rgba(255,255,255,.7);z-index:100;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.nav-menu.is-open .overlay{opacity:1;visibility:visible}
.nav-menu nav>ul>li{margin-bottom:34px;font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.32em;text-transform:uppercase}
.nav-menu nav ul ul{margin-top:18px;padding-left:0}
.nav-menu nav ul ul li{margin-bottom:14px;font-weight:300;letter-spacing:.24em}
.nav-menu nav a{position:relative;display:inline-block;padding-bottom:3px}
.nav-menu nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.nav-menu nav a:hover::after,.nav-menu nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav-menu .btn-area{margin-top:56px}

/* ---------------- key visual ---------------- */
.kv{position:relative;width:100%;height:100vh;height:100svh;min-height:540px;max-height:1100px;overflow:hidden;background:#1b1d1a;color:#fff}
.kv .bg{position:absolute;inset:0}
.kv .bg .slide,.kv .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease}
.kv .bg .slide.is-on{opacity:1}
.kv.is-anime .bg .slide.is-on{animation:kenburns 16s ease-out both}
.kv .bg video.is-on{opacity:1}
.kv .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,10,.34) 0%,rgba(10,12,10,.10) 40%,rgba(10,12,10,.42) 100%)}
.kv .wrapper{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.kv .logo{width:64px;opacity:0;transition:opacity .6s .3s}
.kv .logo svg{display:block;width:100%;height:auto}
.kv .ttl{margin-top:34px;font-family:var(--sans);font-weight:300;font-size:clamp(26px,4.4vw,58px);letter-spacing:.3em;line-height:1.15;text-transform:uppercase;margin-right:-.3em}
.kv .ttl .l{display:inline-block;opacity:0;transform:translateY(5px);transition:opacity .6s .4s,transform .4s .4s}
.kv .ttl .sp{display:inline-block;width:.5em}
.kv .sub{margin-top:26px;font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.5em;margin-right:-.5em;text-transform:uppercase;opacity:0;transition:opacity .8s 1.3s}
.kv .btn-modal-movie{margin-top:48px;width:102px;opacity:0;transition:opacity .6s 1.6s}
.kv .btn-modal-movie button{display:block;width:102px;height:102px;border:1px solid #fff;border-radius:50%;position:relative;transition:opacity .3s}
.kv .btn-modal-movie button::after{content:"";position:absolute;left:41px;top:33px;border-left:26px solid #fff;border-top:18px solid transparent;border-bottom:18px solid transparent}
.kv .btn-modal-movie button:hover{opacity:.7}
.kv.is-anime .logo,.kv.is-anime .sub,.kv.is-anime .btn-modal-movie,.kv.is-anime .icon-scroll{opacity:1}
.kv.is-anime .ttl .l{opacity:1;transform:none}
.kv .icon-scroll{position:absolute;bottom:24px;right:1.9%;width:20px;height:200px;z-index:3;opacity:0;transition:opacity .6s 2s}
.kv .icon-scroll .txt{position:absolute;top:0;left:0;writing-mode:vertical-rl;font-size:11px;font-weight:400;letter-spacing:.3em;line-height:1}
.kv .icon-scroll::after{content:"";position:absolute;top:0;right:0;width:1px;height:100%;background:#fff}
.kv.is-anime .icon-scroll::after{animation:lineAnime 2.6s infinite}
.model .kv .ttl{font-size:clamp(28px,5vw,66px)}

/* ---------------- shared bordered button (draws its frame) ---------------- */
.btn{position:relative;width:600px;max-width:calc(100% - 32px);margin:0 auto;opacity:0;transform:translateY(20px);transition:opacity 1.3s,transform 1.3s}
.btn.is-anime{opacity:1;transform:none}
.btn a{position:relative;display:flex;align-items:center;width:100%;height:120px;padding-left:5px;transition:opacity .3s}
.btn a::before{content:"";position:absolute;top:50%;right:25px;width:9px;height:9px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:translateY(-50%) rotate(45deg)}
.btn .pic{width:290px;height:110px;margin-right:20px;flex:none;overflow:hidden}
.btn .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.btn a:hover .pic img{transform:scale(1.05)}
.btn .pic::before,.btn .pic::after{content:"";position:absolute;top:0;left:5px;display:block;width:calc(100% - 5px);height:1px;background:var(--ink);z-index:1;transform:scaleX(0);transform-origin:left top;transition:transform .3s .6s}
.btn .pic::after{top:auto;bottom:0;transform-origin:right top}
.btn.is-anime .pic::before,.btn.is-anime .pic::after{transform:scaleX(1)}
.btn .txt{flex:1;min-width:0;padding-right:44px}
.btn .txt::before,.btn .txt::after{content:"";position:absolute;top:0;left:0;display:block;width:1px;height:100%;background:var(--ink);transform:scaleY(0);transform-origin:left bottom;transition:transform .3s .6s}
.btn .txt::after{left:auto;right:0;transform-origin:left top}
.btn.is-anime .txt::before,.btn.is-anime .txt::after{transform:scaleY(1)}
.btn a:hover .pic::before,.btn a:hover .pic::after{animation:scaleXAnime .8s var(--ease)}
.btn a:hover .txt::before,.btn a:hover .txt::after{animation:scaleYAnime .8s var(--ease)}
.btn .name{display:block;font-weight:500;font-size:15px;letter-spacing:.26em;text-transform:uppercase;line-height:1.3}
.btn .desc{display:block;margin-top:8px;font-family:var(--serif);font-size:16px;letter-spacing:.08em;line-height:1.4;color:var(--mute)}
.btn.plain a{justify-content:center;padding-left:0}
.btn.plain a::before{display:none}
.btn.plain .label{font-weight:400;font-size:13px;letter-spacing:.34em;text-transform:uppercase;position:relative;z-index:1}
.btn.plain::before,.btn.plain::after{content:"";position:absolute;left:0;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s .6s var(--ease)}
.btn.plain::before{top:0}
.btn.plain::after{bottom:0;transform-origin:right}
.btn.plain.is-anime::before,.btn.plain.is-anime::after{transform:scaleX(1)}
.btn.plain.small a{height:84px}
.btn.plain.small{width:287px}

/* ---------------- home: intro ---------------- */
.contents{position:relative;background:#fff}
.intro{padding:150px 16px 140px}
.intro .lead{font-family:var(--serif);font-weight:400;font-size:24px;line-height:44px;letter-spacing:.12em;text-align:center;opacity:0;transform:translateY(20px);transition:opacity 1.3s,transform 1.3s}
.intro .lead.is-anime{opacity:1;transform:none}
.intro .modal-lead{display:block;width:480px;max-width:100%;margin:0 auto 140px}
.intro .txt-more{position:relative;width:170px;padding-bottom:20px;margin:42px auto 3px;text-align:center;font-weight:400;font-size:12px;letter-spacing:.3em;opacity:0;transform:translateY(20px);transition:opacity 1.3s,transform 1.3s}
.intro .txt-more::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left top;transition:transform .8s .6s var(--ease)}
.intro .txt-more.is-anime{opacity:1;transform:none}
.intro .txt-more.is-anime::after{transform:scaleX(1)}
.intro .modal-lead:hover .txt-more::after{animation:scaleXAnime .8s var(--ease)}
.intro .btn+.btn{margin-top:28px}
.intro .models-ttl{margin-bottom:56px;text-align:center;font-weight:400;font-size:12px;letter-spacing:.42em;text-transform:uppercase;opacity:0;transform:translateY(20px);transition:opacity 1.3s,transform 1.3s}
.intro .models-ttl.is-anime{opacity:1;transform:none}

/* ---------------- home: photo collage ---------------- */
.photo{padding:40px 0 60px;overflow:hidden}
.photo .ttl{margin:0 auto 102px;text-align:center;font-weight:300;font-size:28px;letter-spacing:.5em;margin-right:auto;text-transform:uppercase}
.photo .ttl .sp{display:inline-block;width:.7em}
.photo .ttl .l{display:inline-block;opacity:0;transform:translateY(5px);transition:opacity .8s .4s,transform .8s .4s}
.photo .ttl.is-anime .l{opacity:1;transform:none}
.photo [class^="block-"]{position:relative;width:min(1124px,88vw);margin:0 auto}
.photo .is-hide{display:none}
.photo .it{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%)}
.photo a.modal-photo{display:block;background:#fff;aspect-ratio:var(--ar);overflow:hidden}
.photo a.modal-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transition:opacity .4s}
.photo a.modal-photo:hover img{opacity:.8}
.photo p.it{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.66vw,21px);line-height:2;letter-spacing:.11em}
.photo .modal-photo,.photo .logo,.photo p.it{visibility:hidden;opacity:0;transform:translateY(40px);transition:visibility 1s,opacity 1s,transform 1.8s var(--ease)}
.photo .modal-photo.is-anime,.photo .logo.is-anime,.photo p.it.is-anime{visibility:visible;opacity:1;transform:none}
.photo .txt-copy{position:absolute;left:0;width:100%;top:calc(var(--y)*1%);text-align:center;font-family:var(--sans);font-weight:300;font-size:14px;letter-spacing:.4em;text-transform:uppercase}
.photo .logo{position:absolute;left:50%;top:calc(var(--y)*1%);width:64px;margin-left:-32px;color:var(--ink)}
.btn-lookmore{margin:110px auto 0;text-align:center}
.btn-lookmore.is-hide{display:none}

/* ---------------- closing CTA ---------------- */
.btn-area{padding:80px 0 150px;display:flex;flex-direction:column;align-items:center;gap:28px}
.btn-area .btn{margin:0}
footer.site-footer{border-top:1px solid #d8dbd6;padding:44px 20px 56px;text-align:center;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
footer.site-footer a:hover{color:var(--ink)}

/* pagetop */
.btn_pagetop{position:fixed;right:24px;bottom:24px;z-index:90;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.btn_pagetop.is-show{opacity:1;visibility:visible}
.btn_pagetop a{display:block;width:52px;height:52px;border:1px solid var(--ink);background:rgba(255,255,255,.9);position:relative;transition:background-color .3s,color .3s}
.btn_pagetop a::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-top:1px solid currentColor;border-left:1px solid currentColor;transform:translate(-50%,-30%) rotate(45deg)}
.btn_pagetop a:hover{background:var(--ink);color:#fff}

/* ---------------- lightbox + lead modal ---------------- */
.lb{position:fixed;inset:0;z-index:300;background:rgba(255,255,255,.985);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;display:flex;align-items:center;justify-content:center}
.lb.is-open{opacity:1;visibility:visible}
.lb .lb-inner{width:min(86vw,900px);opacity:0;transition:opacity .3s .1s}
.lb.is-open .lb-inner{opacity:1}
.lb .slides{position:relative;width:100%;height:min(66vh,620px)}
.lb .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s;display:flex;align-items:center;justify-content:center}
.lb .slide.is-on{opacity:1}
.lb .slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb .cap{display:flex;justify-content:space-between;gap:16px;margin-top:22px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:400}
.lb .cap a{position:relative;padding-bottom:3px}
.lb .cap a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.lb .cap a:hover::after{transform:scaleX(1)}
.lb .cap .count{color:var(--mute);font-variant-numeric:tabular-nums}
.lb .close{position:absolute;top:36px;right:40px;width:41px;height:29px}
.lb .close::before,.lb .close::after{content:"";position:absolute;left:0;top:14px;width:100%;height:1px;background:var(--ink);transform:rotate(20deg)}
.lb .close::after{transform:rotate(-20deg)}
.lb .close:hover{opacity:.6}
.lb .arrow{position:absolute;top:50%;width:56px;height:56px;margin-top:-28px}
.lb .arrow::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.lb .arrow.prev{left:24px}
.lb .arrow.prev::before{transform:translate(-30%,-50%) rotate(-45deg)}
.lb .arrow.next{right:24px}
.lb .arrow.next::before{transform:translate(-70%,-50%) rotate(135deg)}
.lb .arrow:hover{opacity:.5}
.lb.lead-modal .lb-inner{width:min(84vw,560px);max-height:86vh;overflow-y:auto;padding:20px 0}
.lb.lead-modal p{font-family:var(--serif);font-size:19px;line-height:2.1;letter-spacing:.1em;margin-bottom:1.4em;text-align:center}
.lb.lead-modal p.big{font-size:24px;margin-top:2em}
.lb.video-modal .lb-inner{width:min(88vw,1100px)}
.lb.video-modal video{width:100%;max-height:78vh;background:#000}

/* ---------------- model pages ---------------- */
.model .contents-model{background:var(--grey);padding:120px 0 0}
.model article{width:min(720px,86vw);margin:0 auto}
.model article h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.3vw,40px);line-height:1.5;letter-spacing:.12em;text-align:center;margin-bottom:60px}
.model article .lead{font-family:var(--serif);font-size:20px;line-height:2.2;letter-spacing:.09em;text-align:center;margin-bottom:96px}
.model article h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.4vw,29px);line-height:1.65;letter-spacing:.1em;margin:112px 0 40px}
.model article .txt{font-size:15.5px;line-height:2.2;letter-spacing:.07em;margin-bottom:56px;max-width:66ch}
.model article .pic{margin:0 0 56px}
.model article .pic img{width:100%}
.model article .pic.narrow{width:78%;margin-left:auto;margin-right:auto}
.model article .pic.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.model article .pic-w100{width:100vw;max-width:1280px;position:relative;left:50%;transform:translateX(-50%) translateY(20px);margin-top:16px}
.model article .pic-w100.is-anime{transform:translateX(-50%)}
.model article .pic a.modal-photo,.model .gallery a.modal-photo{display:block;overflow:hidden;background:#fff}
.model article .pic a.modal-photo img,.model .gallery a.modal-photo img{transition:opacity .4s}
.model article .pic a.modal-photo:hover img,.model .gallery a.modal-photo:hover img{opacity:.8}
.model article h2,.model article h3,.model article p,.model article .pic,.model article .pic-w100,.model article .spec,.model .nav-bottom,.model .gallery-ttl,.model .gallery{opacity:0;transform:translateY(20px);transition:opacity 1.3s,transform 1.3s}
.model article .is-anime,.model .nav-bottom.is-anime,.model .gallery-ttl.is-anime,.model .gallery.is-anime{opacity:1;transform:none}
.model article .pic-w100.is-anime{transform:translateX(-50%)}
.model .spec{margin:24px 0 96px;border-top:1px solid var(--ink)}
.model .spec div{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid #c9ccc6}
.model .spec dt{font-weight:500;font-size:12px;letter-spacing:.26em;text-transform:uppercase;padding-top:5px}
.model .spec dd{margin:0;font-size:15.5px;line-height:1.9;letter-spacing:.05em}
.model .note{font-size:13px;letter-spacing:.06em;color:var(--mute);margin:-60px 0 96px}
.model .gallery-ttl{margin:130px auto 56px;text-align:center;font-weight:400;font-size:12px;letter-spacing:.42em;text-transform:uppercase}
.model .gallery{width:min(1124px,88vw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.model .gallery a.modal-photo{aspect-ratio:4/3}
.model .gallery a.modal-photo img{width:100%;height:100%;object-fit:cover}
.model .nav-bottom{width:min(1000px,88vw);margin:150px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:20px 27px}
.model .nav-bottom .heading{grid-column:1/-1;text-align:center;font-weight:400;font-size:12px;letter-spacing:.42em;text-transform:uppercase;margin-bottom:24px}
.model .nav-bottom .card{position:relative;display:flex;align-items:center;background:#fff;padding:10px 11px;height:130px}
.model .nav-bottom .card::before{content:"";position:absolute;top:50%;right:26px;width:9px;height:9px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:translateY(-50%) rotate(45deg)}
.model .nav-bottom .thumb{position:relative;width:150px;height:100%;flex:none;overflow:hidden}
.model .nav-bottom .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.model .nav-bottom .card:hover .thumb img{transform:scale(1.06)}
.model .nav-bottom .thumb::before,.model .nav-bottom .thumb::after{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--ink);z-index:1;transform:scaleX(0);transform-origin:left top;transition:transform .3s .6s}
.model .nav-bottom .thumb::after{top:auto;bottom:0;transform-origin:right top}
.model .nav-bottom.is-anime .thumb::before,.model .nav-bottom.is-anime .thumb::after{transform:scaleX(1)}
.model .nav-bottom .card p{position:relative;margin-left:22px;flex:1;padding-right:36px;opacity:1;transform:none}
.model .nav-bottom .card p::before,.model .nav-bottom .card p::after{content:"";position:absolute;top:-10px;right:-36px;width:1px;height:calc(100% + 20px);background:var(--ink);transform:scaleY(0);transform-origin:left bottom;transition:transform .3s .6s}
.model .nav-bottom .card p::after{display:none}
.model .nav-bottom.is-anime .card p::before{transform:scaleY(1)}
.model .nav-bottom .card:hover .thumb::before,.model .nav-bottom .card:hover .thumb::after{animation:scaleXAnime .8s var(--ease)}
.model .nav-bottom .card:hover p::before{animation:scaleYAnime .8s var(--ease)}
.model .nav-bottom .name{display:block;font-weight:500;font-size:14px;letter-spacing:.24em;text-transform:uppercase}
.model .nav-bottom .desc{display:block;margin-top:6px;font-family:var(--serif);font-size:15px;letter-spacing:.06em;color:var(--mute);line-height:1.35}
.model .btn-area{padding:120px 0 150px}
.model footer.site-footer{background:var(--grey);border-top-color:#cfd2cc}

.model article .pic-w100 a.modal-photo{display:block;overflow:hidden;background:#fff}
.model article .pic-w100 a.modal-photo img{width:100%}
.model article .pic-w100.crop a.modal-photo img{height:100%;object-fit:cover}
.model article .pic.duo a.modal-photo img{width:100%;height:100%;object-fit:cover}
.model article .pic.duo a.modal-photo{aspect-ratio:1/1}
.lb.single .cap .count{visibility:hidden}

/* ---------------- responsive ---------------- */
@media (max-width:1100px){
  .model .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){
  .btn-menu{top:calc(4.2*var(--vw));right:calc(5.3*var(--vw));width:calc(13*var(--vw));height:calc(8*var(--vw))}
  .btn-menu span:nth-child(2){top:calc(4*var(--vw))}
  .btn-menu span:nth-child(3){top:calc(8*var(--vw))}
  .nav-menu.is-open .btn-menu span:nth-child(1){transform:translateY(calc(4*var(--vw))) rotate(20deg)}
  .nav-menu.is-open .btn-menu span:nth-child(3){transform:translateY(calc(-4*var(--vw))) rotate(-20deg)}
  .nav-menu .inner{padding:110px 32px 40px}
  .kv .logo{width:52px}
  .kv .ttl{margin-top:26px;letter-spacing:.22em;margin-right:-.22em}
  .kv .sub{letter-spacing:.34em;margin-right:-.34em;font-size:11px}
  .kv .icon-scroll{right:calc(2.6*var(--vw));bottom:calc(4.3*var(--vw));width:16px;height:calc(30*var(--vw))}
  .btn{width:calc(84*var(--vw))}
  .btn a{display:block;height:auto;padding:calc(3*var(--vw)) 0 calc(6*var(--vw))}
  .btn a::before{top:auto;bottom:calc(9*var(--vw));right:calc(5*var(--vw));transform:rotate(45deg)}
  .btn .pic{width:calc(78*var(--vw));height:calc(30*var(--vw));margin:0 auto}
  .btn .pic::before,.btn .pic::after{left:calc(.8*var(--vw));width:calc(82.4*var(--vw))}
  .btn .txt{margin:calc(4*var(--vw)) 0 0 calc(5.8*var(--vw));padding-right:calc(14*var(--vw))}
  .btn .name{font-size:13px}
  .btn .desc{font-size:15px}
  .btn.plain a{height:calc(22*var(--vw))}
  .btn.plain.small{width:calc(66*var(--vw))}
  .intro{padding:calc(36*var(--vw)) 16px calc(32*var(--vw))}
  .intro .lead{font-size:calc(4.6*var(--vw));line-height:2.2;letter-spacing:.08em}
  .intro .modal-lead{margin-bottom:calc(32*var(--vw))}
  .photo .ttl{font-size:20px;margin-bottom:calc(14*var(--vw))}
  .photo [class^="block-"]{width:100%;display:flex;flex-direction:column;gap:calc(9*var(--vw));padding:0 calc(6*var(--vw));aspect-ratio:auto!important}
  .photo .it{position:static;width:clamp(50%,calc(var(--w)*1.55%),88%);margin-left:0}
  .photo .it:nth-child(even){margin-left:auto}
  .photo p.it{width:92%;margin:calc(2*var(--vw)) auto;font-size:calc(4.4*var(--vw))}
  .photo .txt-copy,.photo .logo{position:static;margin:calc(8*var(--vw)) auto 0}
  .photo .logo{margin-left:auto}
  .btn-lookmore{margin-top:calc(16*var(--vw))}
  .btn-area{padding:calc(16*var(--vw)) 0 calc(32*var(--vw))}
  .lb .arrow{width:44px}
  .lb .arrow.prev{left:4px}
  .lb .arrow.next{right:4px}
  .lb .close{top:calc(6*var(--vw));right:calc(5*var(--vw))}
  .lb .slides{height:56vh}
  .lb.lead-modal p{font-size:calc(4.3*var(--vw))}
  .model .contents-model{padding-top:calc(16*var(--vw))}
  .model article{width:84%}
  .model article h2{margin-bottom:calc(10*var(--vw))}
  .model article .lead{font-size:calc(4.4*var(--vw));margin-bottom:calc(16*var(--vw))}
  .model article h3{margin:calc(16*var(--vw)) 0 calc(7*var(--vw))}
  .model article .txt{font-size:15px;margin-bottom:calc(10*var(--vw))}
  .model article .pic{margin-bottom:calc(9*var(--vw))}
  .model article .pic.narrow{width:100%}
  .model .spec div{grid-template-columns:1fr;gap:4px}
  .model .note{margin-top:calc(-9*var(--vw))}
  .model .gallery{grid-template-columns:1fr 1fr;gap:8px}
  .model .gallery-ttl{margin-top:calc(22*var(--vw))}
  .model .nav-bottom{grid-template-columns:1fr;margin-top:calc(26*var(--vw))}
  .model .nav-bottom .card{height:calc(30*var(--vw))}
  .model .nav-bottom .thumb{width:calc(28*var(--vw))}
}
@media (max-width:420px){
  .model .nav-bottom .desc{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .kv .logo,.kv .sub,.kv .btn-modal-movie,.kv .icon-scroll,.kv .ttl .l{opacity:1;transform:none}
}
/* content stays visible if scripting never runs */
html:not(.js) .btn,html:not(.js) .intro .lead,html:not(.js) .intro .txt-more,html:not(.js) .intro .models-ttl,html:not(.js) .photo .modal-photo,html:not(.js) .photo p.it,html:not(.js) .photo .logo,html:not(.js) .photo .ttl .l,html:not(.js) .model article h2,html:not(.js) .model article h3,html:not(.js) .model article p,html:not(.js) .model article .pic,html:not(.js) .model article .pic-w100,html:not(.js) .model article .spec,html:not(.js) .model .nav-bottom,html:not(.js) .model .gallery-ttl,html:not(.js) .model .gallery,html:not(.js) .kv .logo,html:not(.js) .kv .sub,html:not(.js) .kv .ttl .l,html:not(.js) .kv .icon-scroll{opacity:1!important;visibility:visible!important;transform:none!important}
html:not(.js) .white{display:none}
html:not(.js) .photo .is-hide{display:block}
html:not(.js) .kv .bg .slide:first-child{opacity:1}