@charset "UTF-8";
:root{--ink:#26313a;--sub:#65727a;--accent:#987956;--bg:#f8f7f4;--line:#e8e3dc}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.85;font-size:15px}a{color:inherit}a:hover{color:var(--accent)}img{max-width:100%;height:auto}figure{margin:0}.site-header{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:2}.header-inner{max-width:1160px;margin:auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand img{width:130px;max-height:75px;object-fit:contain}.site-nav{display:flex;gap:24px;flex-wrap:wrap}.site-nav a{text-decoration:none;font-size:14px;letter-spacing:.035em;font-weight:600}.site-nav a[aria-current=page]{color:var(--accent)}.site-main{max-width:1100px;margin:0 auto;padding:46px 24px 76px;min-height:55vh}.page-head{margin:0 0 32px;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:clamp(25px,3vw,38px);font-weight:500;letter-spacing:.06em}.site-footer{background:#242d32;color:#f4f3ef;padding:40px 24px;text-align:center}.footer-nav{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}.footer-nav a{font-size:13px;text-decoration:none}.site-footer small{font-size:12px;color:#d6d6d4}.site-main h2{font-size:clamp(21px,2.5vw,29px);line-height:1.5;font-weight:500}.site-main h3{font-size:19px}.site-main p{max-width:78ch}.site-main .top{font-size:22px;font-weight:600;border-left:4px solid var(--accent);padding-left:14px;margin:38px 0 18px}.site-main dl{display:grid;grid-template-columns:minmax(130px,220px) minmax(0,1fr);gap:0 24px}.site-main dt,.site-main dd{padding:18px 0;border-bottom:1px solid var(--line);margin:0}.site-main dt{font-weight:700}.site-main dd{min-width:0}.site-main .plan{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:20px;margin:18px 0;padding:18px;background:#fff;border:1px solid var(--line);border-radius:8px}.site-main .plan-boxL,.site-main .plan-boxR{float:none!important;width:auto!important}.site-main .price{font-size:21px;font-weight:700;color:#775a38}.site-main table{border-collapse:collapse;width:100%;max-width:720px}.site-main td,.site-main th{border-bottom:1px solid var(--line);padding:12px;text-align:left}.site-main .option,.site-main .price-box{margin:18px 0}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;list-style:none;padding:0;margin:18px 0 48px}.gallery-grid li{margin:0}.gallery-grid a{display:block;overflow:hidden;border-radius:5px;background:#eee}.gallery-grid img{display:block;width:100%;height:190px;object-fit:cover;transition:transform .25s}.gallery-grid a:hover img{transform:scale(1.04)}.hero{margin:-46px -24px 40px;background:#ece8e2}.hero img{display:block;width:100%;max-height:570px;object-fit:cover}.intro{padding:0 0 28px}.feature-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 45px}.feature-tiles a{display:block;background:white;text-decoration:none;border:1px solid var(--line);border-radius:8px;overflow:hidden}.feature-tiles img{width:100%;height:210px;object-fit:cover;display:block}.feature-tiles strong{display:block;padding:14px}.home-extras{margin-top:32px}.home-extras img{max-width:100%}.home-extras ul{padding-left:20px}.home-extras .boxL,.home-extras .boxR{width:auto!important;float:none!important}.home-extras #gLink{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;list-style:none;padding:0}.home-extras #gLink img{width:100%;height:auto}.home-extras #gLink li{margin:0}.home-extras #sliderBg{display:none}.map-frame{width:100%;min-height:440px;border:0}.photo-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:10;display:none;align-items:center;justify-content:center;padding:50px 24px}.photo-lightbox.open{display:flex}.photo-lightbox img{max-width:100%;max-height:90vh;object-fit:contain}.photo-lightbox button{position:absolute;right:16px;top:12px;background:transparent;color:white;border:0;font-size:35px;cursor:pointer}.site-main [width="850"]{width:auto}.site-main iframe{max-width:100%}.site-main #mapArea{margin-top:24px}.site-main .boxR img{margin:8px}.site-main .clearFix:after{content:"";display:table;clear:both}
@media(max-width:720px){.header-inner{display:block;padding:14px 18px}.brand img{width:105px}.site-nav{margin-top:12px;gap:10px 16px}.site-nav a{font-size:12px}.site-main{padding:28px 17px 52px}.hero{margin:-28px -17px 30px}.hero img{height:260px}.feature-tiles{grid-template-columns:1fr}.feature-tiles img{height:220px}.site-main dl{grid-template-columns:1fr;gap:0}.site-main dt{border-bottom:0;padding-bottom:0}.site-main dd{padding-top:4px}.site-main .plan{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gallery-grid img{height:150px}.site-main .boxL,.site-main .boxR{float:none!important;width:auto!important}.site-main [style*="float"]{float:none!important}.site-main [style*="width"]{max-width:100%}}

/* Sticky, compact navigation across all site pages */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04);transition:box-shadow .25s ease}
.site-header .header-inner{transition:padding .28s ease,gap .28s ease}
.site-header .brand img{transition:width .28s ease,max-height .28s ease}
.site-header .site-nav{transition:margin-top .28s ease,gap .28s ease}
.site-header.is-scrolled{box-shadow:0 3px 14px rgba(0,0,0,.1)}
.site-header.is-scrolled .header-inner{padding-top:8px;padding-bottom:8px}
.site-header.is-scrolled .brand img{width:100px;max-height:55px}
@media(max-width:720px){
 .site-header.is-scrolled .header-inner{padding-top:7px;padding-bottom:7px}
 .site-header.is-scrolled .brand img{width:84px;max-height:48px}
 .site-header.is-scrolled .site-nav{margin-top:6px;gap:7px 12px}
}
@media(prefers-reduced-motion:reduce){.site-header,.site-header .header-inner,.site-header .brand img,.site-header .site-nav{transition:none}}

/* Keep gallery lightbox above the sticky site header. */
.photo-lightbox{z-index:2000}

/* Studio name beside the existing logo, across all pages */
.site-header .brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;color:#34434a}
.site-header .brand-name{font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;font-size:17px;font-weight:600;letter-spacing:.035em;white-space:nowrap;line-height:1.4}
.site-header .brand:hover .brand-name{color:var(--accent)}
@media(max-width:720px){
 .site-header .brand{gap:9px}
 .site-header .brand-name{font-size:15px}
}
@media(max-width:390px){
 .site-header .brand-name{font-size:14px}
}

/* Align studio name with the visual center of the logo lettering; orange underline */
.site-header .brand-name{position:relative;top:-13px;text-decoration:underline;text-decoration-color:#e88a24;text-decoration-thickness:2px;text-underline-offset:5px}
@media(max-width:720px){.site-header .brand-name{top:-12px}}


/* Sunrise effect: underline first, lettering emerges upward from the line. */
.site-header .brand-name{
  position:relative;
  text-decoration:none;
  color:transparent;
  background:none;
  animation:none;
}
/* Keep the real text in the HTML for accessibility; animate a visual copy. */
.site-header .brand-name::before{
  content:"写真スタジオｎａｎａ";
  position:absolute;
  inset:0;
  color:#34434a;
  white-space:nowrap;
  clip-path:inset(100% 0 0 0);
  transform:translateY(20px);
  animation:nana-sunrise-text 1.15s cubic-bezier(.35,0,.22,1) 1.85s both;
}
.site-header .brand:hover .brand-name::before{color:var(--accent)}
.site-header .brand-name::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-3px;
  height:2px;
  background:#FFA726;
  transform:scaleX(0);
  transform-origin:left center;
  animation:nana-underline-draw .75s ease-in-out 1s both;
}
@keyframes nana-underline-draw{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes nana-sunrise-text{
  from{clip-path:inset(100% 0 0 0);transform:translateY(20px)}
  to{clip-path:inset(0 0 0 0);transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .site-header .brand-name::before{animation:none;clip-path:none;transform:none}
  .site-header .brand-name::after{animation:none;transform:scaleX(1)}
}


/* Only the HOME page plays the sunrise animation.
   Other pages display the completed brand immediately. */
.site-header .brand-name::before {
  animation: none;
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}
.site-header .brand-name::after {
  animation: none;
  transform: scaleX(1);
}
@media (prefers-reduced-motion: no-preference) {
  body.nana-home-view .site-header .brand-name::before {
    clip-path: inset(100% 0 0 0);
    transform: translateY(20px);
    animation: nana-sunrise-text 1.15s cubic-bezier(.35,0,.22,1) 1.85s both;
  }
  body.nana-home-view .site-header .brand-name::after {
    transform: scaleX(0);
    animation: nana-underline-draw .75s ease-in-out 1s both;
  }
}

/* Soft page entrance; preserves individual element animations. */
@keyframes nanaPageSoftEntrance {from {opacity:0} to {opacity:1}}
body {animation:nanaPageSoftEntrance .6s ease-out both;}
@media (prefers-reduced-motion:reduce) {body {animation:none;}}