@charset "UTF-8";
/* ながたぶんぐ LP  |  合資会社永田印刷所
   配色：生成りベース（60）＋墨とグレージュ（30）＋テラコッタ（10）
   モーション：transform / opacity のみ。backdrop-filter・will-change 多用・background-attachment は不使用 */

/* ---------------- tokens ---------------- */
:root{
  --paper:#F7F4EC;
  --paper-2:#FFFFFF;
  --paper-3:#EFEADE;
  --ink:#1E1C1A;
  --ink-2:#6E6759;
  --ink-3:#9A9284;
  --line:#DED7C7;
  --accent:#C1432F;
  --accent-d:#A63525;
  --mint:#3D9C86;

  --rail:210px;
  --gut:clamp(20px,5vw,64px);
  --maxw:1180px;

  --f-min:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-go:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-go);font-weight:300;
  font-size:15px;line-height:2.05;letter-spacing:.045em;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
figure{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:.06em;line-height:1.6}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}

/* 日本語の改行：文節で折る */
.ja-phrase{display:inline-block}

/* ---------------- 共通パーツ ---------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

.sec{position:relative;padding-block:clamp(84px,13vw,168px)}
.sec--tight{padding-block:clamp(60px,9vw,110px)}

.label{
  font-family:var(--f-go);font-weight:500;font-size:10px;
  letter-spacing:.34em;color:var(--ink-3);
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
.label::before{content:"";width:26px;height:1px;background:var(--line);flex:none}

.h2{
  font-family:var(--f-min);font-weight:400;
  font-size:clamp(25px,4.6vw,45px);line-height:1.62;letter-spacing:.055em;
}
.h3{font-family:var(--f-min);font-size:clamp(19px,2.6vw,25px);line-height:1.7}
.lead{margin-top:26px;color:var(--ink-2);font-size:clamp(14px,1.6vw,15.5px);line-height:2.15;max-width:34em}
.body-txt p+p{margin-top:1.5em}
.body-txt{color:var(--ink-2);line-height:2.2;max-width:34em}

/* ボタン：X位置を揃えるため min-width を確保 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-width:268px;min-height:60px;padding:0 30px;
  background:var(--accent);color:#fff;
  font-family:var(--f-go);font-weight:500;font-size:14px;letter-spacing:.14em;
  border:1px solid var(--accent);border-radius:2px;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{background:var(--accent-d);transform:translate3d(0,-2px,0)}
.btn__ar{width:18px;height:1px;background:currentColor;position:relative;flex:none}
.btn__ar::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------------- 左レール（PC） ---------------- */
.rail{
  position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:60;
  background:var(--paper);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:30px 0 26px;
}
.rail__brand{display:block;padding:0 26px 30px;border-bottom:1px solid var(--line);margin-bottom:26px}
/* ブランドマーク：傾いた太い2本＋細い斜線（実ロゴの N を再現） */
.mark{--mk:34px;position:relative;display:inline-block;flex:none;
      width:var(--mk);height:calc(var(--mk) * .683)}
.mark i{position:absolute;bottom:0;height:100%;background:var(--ink);
        width:calc(var(--mk) * .146);transform:skewX(-25deg);transform-origin:bottom left}
.mark i:first-child{left:0}
.mark i:last-child{left:calc(var(--mk) * .537)}
.mark::after{content:"";position:absolute;bottom:0;height:100%;background:var(--ink);
             left:calc(var(--mk) * .522);width:max(1px,calc(var(--mk) * .029));
             transform:skewX(-6deg);transform-origin:bottom left}
.rail__name{display:block;margin-top:14px;font-family:var(--f-min);font-size:16px;letter-spacing:.28em;line-height:1.5}
.rail__en{display:block;margin-top:6px;font-size:8.5px;letter-spacing:.24em;color:var(--ink-3)}
.rail__nav{padding:0 26px;flex:1}
.rail__nav li+li{margin-top:17px}
.rail__nav a{font-size:12.5px;letter-spacing:.13em;color:var(--ink-2);position:relative;display:inline-block;transition:color .25s var(--ease)}
.rail__nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.rail__nav a:hover{color:var(--ink)}
.rail__nav a:hover::after{transform:scaleX(1)}
.rail__foot{padding:22px 26px 0;border-top:1px solid var(--line);font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);line-height:1.9}
.rail__tel{display:block;font-family:var(--f-min);font-size:15px;color:var(--ink);letter-spacing:.06em;margin-bottom:2px}

/* ---------------- モバイル用バー ---------------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:70;display:none;
  align-items:center;justify-content:space-between;
  height:60px;padding:0 16px;
  background:var(--paper); /* 不透明。backdrop-filter は使わない */
  border-bottom:1px solid var(--line);
}
.topbar .mark{--mk:27px}
.topbar__name{font-family:var(--f-min);font-size:14px;letter-spacing:.2em;margin-left:11px}
.topbar__l{display:flex;align-items:center}
.burger{width:44px;height:44px;border:0;background:transparent;display:grid;place-content:center;gap:6px;padding:0;cursor:pointer}
.burger span{display:block;width:22px;height:1px;background:var(--ink);transition:transform .35s var(--ease),opacity .2s}
.is-menu .burger span:nth-child(1){transform:translateY(3.5px) rotate(20deg)}
.is-menu .burger span:nth-child(2){opacity:0}
.is-menu .burger span:nth-child(3){transform:translateY(-3.5px) rotate(-20deg)}

.drawer{
  position:fixed;inset:0;z-index:65;background:var(--paper);
  padding:88px 28px 40px;display:none;flex-direction:column;
  opacity:0;transform:translate3d(0,-10px,0);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
  pointer-events:none;
}
.is-menu .drawer{opacity:1;transform:none;pointer-events:auto}
.drawer li+li{margin-top:4px}
.drawer a{display:block;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;letter-spacing:.1em}
.drawer__foot{margin-top:auto;padding-top:26px;font-size:11px;color:var(--ink-3);line-height:2}

/* 追従CTA（スマホ）：不透明背景 */
.cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:68;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--paper-2);border-top:1px solid var(--line);
  transform:translate3d(0,110%,0);transition:transform .4s var(--ease);
}
.cta-bar.is-on{transform:none}
.cta-bar .btn{width:100%;min-width:0;min-height:54px;font-size:13.5px}

/* ---------------- レイアウト土台 ---------------- */
.page{margin-left:var(--rail)}

/* ---------------- HERO ----------------
   参考サイト（安藤提灯）の組み方：
   写真を右に寄せ、その左端に「縦書きの1行目」を重ね、
   写真の下辺をまたいで「横書きの2行目」を置く。 */
.hero{position:relative;padding-top:clamp(14px,3vw,34px)}

.hero__stage{position:relative;margin-left:24%;margin-right:0}
.hero__media{position:relative;aspect-ratio:281/400;overflow:hidden;background:var(--paper-3)}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--ease)}
.hero__slide.is-on{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hero__slide.is-on img{animation:kb 9s linear forwards}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.11)}}

/* 左端を生成りへ溶かして、縦書きの文字を必ず読めるようにする */
.hero__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg,rgba(247,244,236,.95) 0%,rgba(247,244,236,.58) 12%,rgba(247,244,236,0) 34%)}

.hero__dots{position:absolute;right:16px;bottom:16px;display:flex;gap:9px;z-index:3}
.hero__dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer;transition:background .3s,transform .3s}
.hero__dots button[aria-current="true"]{background:#fff;transform:scale(1.35)}

/* 見出し：縦書き＋横書き */
.hero__ttl{
  position:absolute;left:0;top:0;width:100%;height:100%;
  margin:0;pointer-events:none;z-index:2;
  font-family:var(--f-min);font-weight:400;
  font-size:clamp(29px,7.6vw,54px);letter-spacing:.07em;
}
.hero__ttl .v{
  position:absolute;left:-.5em;bottom:-.1em;
  writing-mode:vertical-rl;
  line-height:1.04;
}
.hero__ttl .h{
  position:absolute;left:-.45em;bottom:-.62em;
  white-space:nowrap;line-height:1.04;
}

.hero__body{margin-top:clamp(46px,9vw,86px);padding-inline:var(--gut)}
.hero__en{font-size:9.5px;letter-spacing:.36em;color:var(--ink-3);margin-bottom:22px}
.hero__sub{color:var(--ink-2);font-size:clamp(13.5px,1.5vw,15px);line-height:2.2;max-width:28em}
.hero__cta{margin-top:38px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero__note{font-size:11px;letter-spacing:.09em;color:var(--ink-3)}


/* ---------------- コラージュ（写真が流れる） ---------------- */
.collage{margin-bottom:clamp(16px,3vw,36px);display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.6vw,24px);align-items:start}
.collage figure{overflow:hidden;background:var(--paper-3)}
.collage img{width:100%;height:100%;object-fit:cover}
.bleed-l{margin-left:calc(var(--gut) * -1 - 40px)}
.bleed-r{margin-right:calc(var(--gut) * -1 - 40px)}

/* ---------------- 帯（横に流れる写真） ---------------- */
.band{overflow:hidden;padding-block:clamp(20px,4vw,44px)}
.band__track{display:flex;gap:clamp(10px,1.6vw,22px);width:max-content;padding-left:6vw}
.band__track figure{width:clamp(150px,20vw,270px);aspect-ratio:1/1;overflow:hidden;background:var(--paper-3);flex:none}
.band__track img{width:100%;height:100%;object-fit:cover}

/* ---------------- 商品 ---------------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,42px);margin-top:clamp(40px,6vw,72px)}
.prod{background:var(--paper-2);border:1px solid var(--line)}
.prod__img{aspect-ratio:1/1;overflow:hidden;background:var(--paper-3)}
.prod__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.prod:hover .prod__img img{transform:scale(1.045)}
.prod__b{padding:20px 22px 24px}
.prod__n{font-family:var(--f-min);font-size:16px;letter-spacing:.09em}
.prod__d{margin-top:7px;font-size:11.5px;color:var(--ink-3);letter-spacing:.07em;line-height:1.85}
.prod__p{margin-top:12px;font-family:var(--f-min);font-size:17px;letter-spacing:.05em}
.prod__p small{font-size:10px;color:var(--ink-3);margin-left:5px;letter-spacing:.1em}

/* ---------------- 使うシーン ---------------- */
.use{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2.4vw,30px);margin-top:clamp(36px,5vw,60px)}
.use li{background:var(--paper-2);border:1px solid var(--line);padding:26px 26px 28px;display:flex;gap:18px;align-items:flex-start}
.use__n{font-family:var(--f-min);font-size:12px;color:var(--accent);letter-spacing:.1em;padding-top:4px;flex:none}
.use__t{font-size:15px;letter-spacing:.08em;line-height:1.8}
.use__x{margin-top:8px;font-size:12.5px;color:var(--ink-3);line-height:1.95}

/* ---------------- 物語 ---------------- */
.sec--story{background:var(--paper-3)}
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.est{margin-top:38px;padding-top:26px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:16px}
.est b{font-family:var(--f-min);font-weight:400;font-size:clamp(34px,5.4vw,58px);letter-spacing:.02em;line-height:1}
.est span{font-size:11.5px;letter-spacing:.14em;color:var(--ink-3)}

/* ---------------- つくり手 ---------------- */
.pts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3.4vw,48px);margin-top:clamp(40px,6vw,68px)}
.pt__k{font-family:var(--f-min);font-size:clamp(17px,2.2vw,21px);letter-spacing:.07em;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}


/* ══════════ 代表挨拶ブロック ここから ══════════
   ▼不要になったら、この行から「代表挨拶ブロック ここまで」の行まで丸ごと削除する。
     index.html の同名ブロックも一緒に消す。                                */
.greeting{background:var(--paper-3)}
/* 見出し → 写真 → 本文（「つくりかた」と同じ並びに揃える） */
.greeting__ph{overflow:hidden;background:var(--ink);aspect-ratio:4/5;max-width:400px;
              margin:clamp(28px,4vw,46px) 0 clamp(30px,4.5vw,50px)}
.greeting__ph img{width:100%;height:100%;object-fit:cover}
.greeting__sig{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.1em;color:var(--ink-3);line-height:1.9}
.greeting__sig b{display:block;margin-top:5px;font-family:var(--f-min);font-weight:400;font-size:18px;letter-spacing:.16em;color:var(--ink)}
@media (max-width:640px){
  .greeting__ph{max-width:300px}
}
/* ══════════ 代表挨拶ブロック ここまで ══════════ */

/* ---------------- FAQ ---------------- */
.faq{margin-top:clamp(34px,5vw,56px);border-top:1px solid var(--line);max-width:800px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 34px;position:relative;font-size:15px;letter-spacing:.07em;line-height:1.8}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:0;top:24px;font-family:var(--f-min);font-size:13px;color:var(--accent)}
.faq summary::after{content:"";position:absolute;right:8px;top:33px;width:11px;height:1px;background:var(--ink-2);box-shadow:0 0 0 0 transparent}
.faq summary .pl{position:absolute;right:13px;top:28px;width:1px;height:11px;background:var(--ink-2);transition:transform .3s var(--ease)}
.faq details[open] summary .pl{transform:scaleY(0)}
.faq__a{padding:0 34px 26px;color:var(--ink-2);font-size:13.5px;line-height:2.1}

/* ---------------- クロージング ---------------- */
.closing{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);text-align:center;padding-block:clamp(90px,13vw,160px)}
.closing__bg{position:absolute;inset:-8% 0;opacity:.3}
.closing__bg img{width:100%;height:100%;object-fit:cover}
.closing .wrap{position:relative}
.closing .h2{color:var(--paper)}
.closing .lead{color:#CFC8BA;margin-inline:auto}
.closing .btn{margin-top:44px;background:var(--paper);color:var(--ink);border-color:var(--paper)}
.closing .btn:hover{background:#fff;border-color:#fff}

/* ---------------- フッター ---------------- */
.foot{background:var(--paper);border-top:1px solid var(--line);padding-block:clamp(50px,7vw,80px) 30px}
.foot__g{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.foot__co{font-family:var(--f-min);font-size:16px;letter-spacing:.1em;margin-bottom:14px}
.foot__ad{font-size:12.5px;color:var(--ink-2);line-height:2.1}
.foot__ad a{border-bottom:1px solid var(--line)}
.foot__lk li+li{margin-top:11px}
.foot__lk a{font-size:12.5px;letter-spacing:.09em;color:var(--ink-2);display:inline-flex;align-items:center;gap:9px}
.foot__lk a::after{content:"↗";font-size:10px;color:var(--ink-3)}
.foot__cr{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:10.5px;letter-spacing:.1em;color:var(--ink-3)}

/* ---------------- スクロール登場 ---------------- */
.anim{opacity:0;transform:translate3d(0,26px,0);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.anim.is-in{opacity:1;transform:none}
.anim[data-d="1"]{transition-delay:.1s}
.anim[data-d="2"]{transition-delay:.2s}
.anim[data-d="3"]{transition-delay:.3s}
.anim[data-d="4"]{transition-delay:.4s}
.anim[data-d="5"]{transition-delay:.5s}

/* 画像のマスク開き（transform のみ） */
.rv{overflow:hidden}
.rv img{transform:scale(1.14);transition:transform 1.3s var(--ease)}
.rv.is-in img{transform:scale(1)}

/* スクロール中は常時アニメを止める（カクつき対策） */
.is-scrolling .hero__slide.is-on img{animation-play-state:paused}

/* ---------------- レスポンシブ ---------------- */
@media (min-width:1081px){
  .hero{padding-top:clamp(28px,3vw,52px)}
  /* 左の余白は「縦書きが写真の左端に半分かかる」ぶんだけ。大きく空けない */
  .hero__stage{margin-left:clamp(54px,5.5%,92px)}
  .hero__media{aspect-ratio:2.2/1}
  .hero__ttl{font-size:clamp(40px,3.7vw,58px)}
  /* PCは「本文｜CTA」の横並び。CTAだけが広い白場に浮くのを避ける */
  .hero__body{padding-left:clamp(54px,5.5%,92px);padding-right:var(--gut);margin-top:clamp(38px,3.6vw,56px);
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(36px,6vw,88px);align-items:end}
  .hero__en{grid-column:1 / -1}
  .hero__sub{margin:0;max-width:32em}
  .hero__cta{margin-top:0;gap:12px}
  .hero__cta .btn{min-height:56px;min-width:252px}
}

@media (max-width:1080px){
  .rail{display:none}
  .page{margin-left:0;padding-top:60px}
  .topbar{display:flex}
  .drawer{display:flex}
  .cta-bar{display:block}
  .story{grid-template-columns:1fr}
  .story .collage{margin-top:clamp(38px,7vw,72px)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:14.5px;line-height:2}
  .prod-grid{grid-template-columns:1fr 1fr;gap:12px}
  .prod__b{padding:14px 14px 18px}
  .prod__n{font-size:13px;letter-spacing:.04em}
  .prod__p{font-size:15px}
  .use{grid-template-columns:1fr;gap:12px}
  .use li{padding:20px}
  .pts{grid-template-columns:1fr}
  .foot__g{grid-template-columns:1fr}
  .bleed-l{margin-left:calc(var(--gut) * -1)}
  .bleed-r{margin-right:calc(var(--gut) * -1)}
  .btn{min-width:100%;font-size:13px}
  .hero__cta{align-self:stretch}
  .closing{padding-bottom:clamp(110px,20vw,150px)}
  .foot{padding-bottom:96px}
  /* スマホでは装飾を間引く */
  .collage .thin-only{display:none}
}

/* ---------------- 視差効果を減らす設定 ON ----------------
   完全停止にはしない：フェードとその場のスケールは残し、大きな移動だけ抑える
   （移動量は JS 側で 0.3 倍に落とす） */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim{transform:translate3d(0,14px,0)}
  .hero__slide.is-on img{animation-duration:16s}
}