html{scroll-behavior:smooth}
@charset "utf-8";
body{margin:0;font-family:'Noto Sans JP',sans-serif;-webkit-font-smoothing:antialiased;background:#e7e2d8;color:#2b2622}
  *{box-sizing:border-box}
  a{color:#a8842a;text-decoration:none}
  a:hover{color:#7f631c}
  .en{font-family:'Cormorant Garamond',serif}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

  @keyframes smilefade{0%{opacity:0;transform:scale(1.06)}6%{opacity:1}25%{opacity:1}31%{opacity:0;transform:scale(1)}100%{opacity:0}}
@-webkit-keyframes smilefade{0%{opacity:0;-webkit-transform:scale(1.06)}6%{opacity:1}25%{opacity:1}31%{opacity:0;-webkit-transform:scale(1)}100%{opacity:0}}
  @media (max-width:768px){
    .case-ba{grid-template-columns:1fr !important}
    .case-ba > div{height:auto !important;aspect-ratio:3/2}
    .smile-grid{grid-template-columns:1fr !important;gap:56px !important}
    .smile-sub{right:-8px !important;width:42% !important}
    .smile-photo{padding:0 18px 48px 0 !important}
    .smile-copy{display:contents !important}
    .smile-grid{gap:26px !important}
    .smile-photo{order:-2}
    .smile-thumb{order:-1;margin:0 0 26px !important}
    .smile-thumb > div{width:62% !important}
    .smile-thumb > span{font-size:36px !important}
    .parallax-band{height:52vh !important;min-height:300px;max-height:440px}
    .strip-track{height:180px !important}
    .sec{padding:64px 20px !important}
    .sec h2{font-size:28px !important;line-height:1.5 !important}
    .hero-sec{height:auto !important;min-height:88vh !important;padding:118px 22px 92px !important}
    .hero-sec h1{font-size:40px !important;line-height:1.42 !important}
    .hero-sub{font-size:21px !important}
    .hero-sec p{font-size:15px !important}
    .mstack{grid-template-columns:1fr !important;gap:32px !important;column-gap:0 !important}
    .mstack > div{border-left:none !important}
    .menu-offset{margin-top:0 !important}
    .mcmp{grid-template-columns:1fr !important}
    .mcmp > div{border-right:none !important}
    .mdr{grid-template-columns:1fr !important;gap:36px !important}
    .mstatic{position:static !important}
    .drportrait{height:440px !important}
    .drhead{display:grid;grid-template-columns:40% minmax(0,1fr);gap:18px;align-items:end}
    .drhead .drportrait{height:230px !important}
    .drhead h2{font-size:26px !important}
    .drname-en{font-size:15px !important;letter-spacing:.08em !important}
    .hl{grid-template-columns:1fr 1fr !important;gap:10px !important}
    .hl > div{padding:16px 14px !important}
    .hl .hlt{font-size:13px !important;line-height:1.55 !important}
    .hl .hlt br{display:none}
    .hl .hld{font-size:10.5px !important;line-height:1.7 !important}
    .acad{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;margin:0 -20px;padding:0 20px 12px;scrollbar-width:none}
    .acad::-webkit-scrollbar{display:none}
    .acad > div{flex:0 0 84%;scroll-snap-align:center}
    .acad .acimg{height:200px !important}
    .aswipe{display:flex !important}
    .mlogos{grid-template-columns:repeat(3,1fr) !important}
    .mflow{grid-template-columns:1fr 1fr !important;gap:34px 18px !important}
    .flowline{display:none !important}
    .techcard{flex-direction:column !important}
    .techimg{width:100% !important;height:300px !important;min-height:0 !important}
    .mrec{grid-template-columns:1fr !important;padding:32px 22px !important;gap:24px !important}
    .mrec{padding:24px 20px !important;gap:16px !important}
    .mrec p{font-size:14px !important;line-height:1.9 !important}
    .mrec > div:last-child{max-height:360px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:10px;scrollbar-width:thin;scrollbar-color:#c9a44f rgba(201,164,79,.15);-webkit-mask-image:linear-gradient(180deg,#000 85%,transparent);mask-image:linear-gradient(180deg,#000 85%,transparent);padding-bottom:28px}
    .mrec > div:last-child::-webkit-scrollbar{width:3px}
    .mrec > div:last-child::-webkit-scrollbar-thumb{background:#c9a44f}
    .rec-en{font-size:12.5px !important}
    .recimg{height:140px !important}
    .recscroll > .mrec{flex:0 0 88% !important}
    .pricecard > div{flex-direction:column !important;align-items:stretch !important;gap:10px !important;padding:22px 20px !important}
    .pricecard > div > div:last-child{align-self:flex-end;text-align:right;font-size:23px !important}
    .pillars{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:4px 20px 12px;scrollbar-width:none}
    .pillars::-webkit-scrollbar{display:none}
    .pillar{flex:0 0 78%;scroll-snap-align:center;background:#fff;border:1px solid #e6dcc8 !important;border-top:2px solid #c9a44f !important;padding:30px 24px 32px !important;position:relative;overflow:hidden;box-shadow:0 18px 40px -26px rgba(60,45,20,.35)}
    .pnum{position:absolute;right:16px;top:10px;font-size:84px !important;color:#efe6d3 !important;font-style:italic}
    .pillar > div{position:relative}
    .pswipe{display:flex !important}
    .concerns{grid-template-columns:1fr 1fr !important;grid-template-rows:none !important;grid-auto-flow:row !important;gap:10px !important}
    .cc{flex-direction:column !important;align-items:flex-start !important;gap:10px !important;padding:18px 16px 20px !important;background:#fbf8f2;border:1px solid #e2d8c5 !important;border-top:2px solid #c9a44f !important;min-height:118px}
    .ccn{font-size:26px !important;line-height:1}
    .cct{font-size:13.5px !important;line-height:1.65 !important;font-weight:500 !important}
    .mgrid{grid-template-columns:1fr 1fr !important;gap:10px !important}
    .mcard{padding:18px 14px 20px !important}
    .mnum{font-size:52px !important;right:8px !important;top:4px !important}
    .mlab{font-size:9px !important;letter-spacing:.14em !important}
    .mttl{font-size:15px !important;line-height:1.45 !important;margin-top:8px !important}
    .mdesc{font-size:11.5px !important;line-height:1.8 !important;margin-top:8px !important}
    .mig{grid-template-columns:1fr !important;max-width:420px !important}
  }
.hero-slide{opacity:0;transition:opacity 1.4s ease}
.hero-slide.active{opacity:1}
.hero-dot{background:rgba(255,255,255,.35);transition:background .5s}
.hero-dot.active{background:#e6c983}
.acc{height:0;overflow:hidden;opacity:0;transition:height .8s cubic-bezier(.22,.8,.24,1),opacity .6s ease .1s}
.acc.open{opacity:1}

.rec-prev:hover,.rec-next:hover{background:#c9a44f !important;color:#fff !important}
.recscroll::-webkit-scrollbar{display:none}

@-webkit-keyframes stripflow{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(-50%)}}
@keyframes stripflow{from{transform:translateX(0)}to{transform:translateX(-50%)}}