:root{
  --cream:#F4EFE6;
  --cream2:#EBE3D3;
  --cream3:#E2D8C3;
  --line:#D5C9B1;
  --ink:#262420;
  --ink-soft:#54503F;
  --muted:#857F6E;
  --indigo:#243B53;
  --indigo-deep:#1E3347;
  --indigo-2:#2E4A6B;
  --brass:#9A875E;
  /* 生成り地の上で小さい文字に使う濃い真鍮／灰（--brass 3.06:1・--muted 3.49:1 は AA 未達のため） */
  --brass-d:#766742;
  --muted-d:#706A5C;
  --paper-white:#FBF9F4;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:"Noto Serif JP", serif;
  font-weight:400;
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.02em;
}

/* washi grain overlay */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9000;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ display:block; max-width:100%; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 50px; }

/* vertical-writing title helper */
.vtitle{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:"Shippori Mincho", serif;
  font-weight:700;
  color:var(--indigo);
  letter-spacing:.16em;
  line-height:1.9;
}
.vsub{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:"Shippori Mincho", serif;
  font-weight:500;
  letter-spacing:.22em;
  line-height:2.0;
}

.latin{
  font-family:"Cormorant Garamond", serif;
  letter-spacing:.30em;
  text-transform:uppercase;
}
.label{
  font-family:"Zen Kaku Gothic New", sans-serif;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--brass);
}

/* framed photo (gakubuchi) */
.frame{
  border:1px solid var(--indigo);
  background:var(--cream);
  padding:8px;
  position:relative;
}
.frame img{ width:100%; height:100%; object-fit:cover; }
.frame--dark{
  border-color:rgba(231,222,205,.42);
  background:transparent;
}

a{ color:inherit; text-decoration:none; }

.nowrap{ white-space:nowrap; }

section[id]{ scroll-margin-top:79px; }

/* ============ HEADER ============ */
header{
  background:var(--cream);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:100;
}
.nav{
  max-width:1180px; margin:0 auto; padding:0 50px;
  height:78px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav .logo{ display:flex; align-items:center; min-height:44px; padding:4px 8px; margin-left:-8px; }
.nav .logo img{ height:50px; width:auto; }
.nav ul{
  list-style:none;
  display:flex; align-items:center; gap:34px;
}
.nav ul a{
  font-family:"Shippori Mincho", serif;
  font-size:15px; letter-spacing:.14em; color:var(--ink);
  transition:color .2s;
}
.nav ul a:hover{ color:var(--indigo); }
.nav .cta{
  border:1px solid var(--indigo);
  color:var(--indigo);
  padding:9px 22px;
  font-family:"Shippori Mincho", serif;
  font-size:13px; letter-spacing:.18em;
  transition:all .2s;
}
.nav .cta:hover{ background:var(--indigo); color:var(--cream); }

/* nav-toggle (hamburger, hidden on desktop) */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border:none; background:none;
  position:relative;
  cursor:pointer;
  flex:0 0 auto;
}
.nav-toggle span{
  position:absolute; left:8px; right:8px;
  height:2px; background:var(--indigo);
  transition:transform .25s ease, opacity .25s ease, top .25s ease;
}
.nav-toggle span:nth-child(1){ top:16px; }
.nav-toggle span:nth-child(2){ top:22px; }
.nav-toggle span:nth-child(3){ top:28px; }
.nav-toggle.is-open span:nth-child(1){ top:22px; transform:rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* ============ HERO ============ */
.hero{ background:var(--cream); padding:66px 0 78px; position:relative; }
.hero .wrap{
  display:grid;
  grid-template-columns:430px 1fr;
  gap:48px;
  align-items:stretch;
}
.hero-left{
  position:relative;
  display:flex;
  justify-content:flex-end;
  padding:6px 4px 6px 0;
}
/* 余白の透かし（omoi/contactと同じ意匠の流用・PC のみ） */
.hero-left::before{
  content:""; position:absolute;
  left:-16px; top:50%; transform:translateY(-50%);
  width:330px; height:330px;
  background:url("assets/jnp-logo-mark.png") center/contain no-repeat;
  opacity:.06;
  pointer-events:none;
}
.hero-left .toplabel{
  position:absolute; top:6px; left:2px;
  display:flex; align-items:center; gap:14px;
}
.hero-left .toplabel .ln{ width:54px; height:1px; background:var(--brass); display:inline-block; }
.hero-titles{
  display:flex; align-items:flex-start; gap:30px;
  height:auto; margin-top:30px;
}
.hero-titles .main{
  font-size:40px;
  color:var(--indigo);
  line-height:1.78;
}
.hero-titles .sec{
  font-size:20px;
  color:var(--ink-soft);
  margin-top:6px;
}
.hero-left .sub{
  position:absolute; bottom:6px; left:2px; right:8px;
  font-family:"Noto Serif JP", serif;
  font-weight:300;
  font-size:17px; line-height:2; color:var(--ink-soft);
  letter-spacing:.04em;
  border-top:1px solid var(--line);
  padding-top:16px;
}
.hero-left .sub .jp{ font-family:"Cormorant Garamond", serif; font-style:italic; letter-spacing:.12em; color:var(--brass); display:block; font-size:15px; margin-bottom:7px; }

.hero-right{ position:relative; }
.hero-right .frame{ height:640px; }
.hero-photo{ object-position:center 56%; }
.hero-right .cap{
  position:absolute; right:-12px; bottom:34px;
  background:var(--cream);
  border:1px solid var(--indigo);
  padding:14px 12px;
}
.hero-right .cap .vsub{ font-size:14px; color:var(--indigo); letter-spacing:.28em; height:auto; }

/* ============ SECTION SHELL ============ */
section{ position:relative; }
.sec-head{
  display:flex; align-items:baseline; gap:18px;
  margin-bottom:34px;
}
.sec-head .num{
  font-family:"Cormorant Garamond", serif;
  font-size:46px; color:var(--cream3); line-height:1; font-weight:600;
}
.sec-head .ja{
  font-family:"Shippori Mincho", serif; font-weight:700;
  font-size:25px; color:var(--indigo); letter-spacing:.12em;
}
.sec-head .en{ margin-left:auto; }

/* ============ PHILOSOPHY BAND ============ */
.philo{ padding:74px 0; background:var(--cream); border-top:1px solid var(--line); position:relative; z-index:0; overflow:hidden; }
.philo::before{
  content:"挑戦";
  position:absolute; z-index:-1;
  left:46%; top:50%; height:600px; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:"Shippori Mincho", serif; font-weight:700;
  font-size:240px; line-height:1; letter-spacing:.05em;
  color:var(--indigo); opacity:.08;
  pointer-events:none;
}
.philo .wrap{ display:flex; align-items:center; gap:56px; }
.philo .mark{ flex:0 0 auto; }
.philo .mark img{ width:96px; opacity:.30; }
.philo .body{ flex:1; }
.philo .lead{
  font-family:"Shippori Mincho", serif; font-weight:600;
  font-size:30px; line-height:2.0; color:var(--indigo);
  letter-spacing:.06em;
}
.philo .lead b{ color:var(--brass); font-weight:600; }
.philo p{
  margin-top:22px; max-width:620px;
  font-weight:300; font-size:15.5px; line-height:2.25; color:var(--ink-soft);
}
.philo .pull{
  margin-left:auto; flex:0 0 auto;
  align-self:stretch;
  border-left:1px solid var(--line);
  padding-left:34px;
  display:flex; align-items:center;
}
.philo .pull .vtitle{ font-size:21px; height:220px; color:var(--ink); font-weight:500; letter-spacing:.2em; }

/* ============ TEAM (06) ============ */
.team{ position:relative; }
.team .band{
  position:relative; height:100vh; min-height:820px; overflow:hidden;
}
.team .band img{
  width:100%; height:100%; object-fit:cover; object-position:center bottom;
  transform:scale(1.18); transform-origin:97% 100%;
  filter:brightness(1.22);
}
.team .ov{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(30,51,71,.04) 0%, rgba(30,51,71,.08) 55%, rgba(30,51,71,.14) 80%, rgba(30,51,71,.55) 92%, rgba(30,51,71,.78) 100%);
}
.team .content{
  position:absolute; top:0; right:0; bottom:0;
  width:560px;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 64px 0 0;
  gap:34px;
}
.team .content .num{
  font-family:"Cormorant Garamond", serif; color:rgba(244,239,230,.55);
  font-size:18px; letter-spacing:.3em; writing-mode:vertical-rl; align-self:flex-start; margin-top:60px;
}
.team .content .ttl{
  color:var(--cream); font-size:42px; height:430px;
  text-shadow:0 2px 24px rgba(20,30,45,.45);
}
.team .content .ttl small{
  display:block; font-size:15px; color:rgba(244,239,230,.82);
  font-weight:400; letter-spacing:.2em; margin-top:0;
}
.team .content .lns{
  align-self:flex-end; margin-bottom:64px;
  height:300px; font-size:15px;
}

/* ============ CRAFT (04 + 03/05) ============ */
.craft{ padding:96px 0 100px; background:var(--paper-white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.craft .grid{
  display:grid; grid-template-columns:430px 1fr; gap:60px; align-items:start;
}
.craft .photo .frame{ height:600px; }
.craft .photo .pcap{
  margin-top:14px; display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--muted); letter-spacing:.1em;
}
.craft .items{ display:flex; flex-direction:column; }
.craft .item{
  display:flex; gap:26px; padding:28px 0;
  border-bottom:1px solid var(--line);
}
.craft .item:first-child{ border-top:1px solid var(--line); }
.craft .item .kj{
  font-family:"Shippori Mincho", serif; font-weight:800;
  font-size:30px; color:var(--indigo); line-height:1;
  flex:0 0 46px; text-align:center;
}
.craft .item .kj small{ display:block; font-family:"Cormorant Garamond",serif; font-size:13px; color:var(--brass); letter-spacing:.16em; margin-top:8px; font-weight:600; }
.craft .item h3{
  font-family:"Shippori Mincho", serif; font-weight:700;
  font-size:21px; color:var(--ink); letter-spacing:.08em; margin-bottom:6px;
}
.craft .item p{ font-weight:300; font-size:14.5px; line-height:2.05; color:var(--ink-soft); }

.craft .subgal{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px; }
.craft .subgal .frame{ height:240px; }
.craft .subgal figcaption{
  margin-top:10px; font-family:"Shippori Mincho",serif; font-size:14px;
  color:var(--indigo); letter-spacing:.14em;
}
.craft .subgal figcaption span{ font-family:"Cormorant Garamond",serif; color:var(--brass); font-size:12px; letter-spacing:.2em; margin-right:10px; }

/* ============ OMOI (10, dark indigo) ============ */
.omoi{ background:var(--indigo-deep); padding:104px 0 108px; position:relative; z-index:0; overflow:hidden; }
.omoi::after{
  content:"未来";
  position:absolute; z-index:-1;
  left:68%; top:50%; height:560px; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:"Shippori Mincho", serif; font-weight:700;
  font-size:220px; line-height:1; letter-spacing:.05em;
  color:var(--cream); opacity:.09;
  pointer-events:none;
}
.omoi .grid{
  display:grid; grid-template-columns:440px 1fr; gap:66px; align-items:center; position:relative;
}
.omoi .photo .frame{ height:600px; }
.omoi .txt{ color:var(--cream); }
.omoi .txt .top{ display:flex; align-items:baseline; gap:16px; margin-bottom:30px; }
.omoi .txt .top .num{ font-family:"Cormorant Garamond",serif; font-size:40px; color:rgba(244,239,230,.28); font-weight:600; line-height:1; }
.omoi .txt .top .label{ color:rgba(231,222,205,.6); }
.omoi .txt .hgroup{ display:flex; gap:36px; align-items:flex-start; }
.omoi .txt h2{
  font-family:"Shippori Mincho", serif; font-weight:700;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:38px; color:var(--cream); letter-spacing:.16em; line-height:1.85;
  height:420px;
}
.omoi .txt .pbox{ flex:1; padding-top:8px; }
.omoi .txt .pbox p{
  font-weight:300; font-size:16px; line-height:2.5; color:rgba(244,239,230,.9);
  letter-spacing:.05em;
}
.omoi .txt .pbox .rule{ width:46px; height:1px; background:var(--brass); margin:34px 0 24px; }
.omoi .txt .pbox .sig{ font-family:"Cormorant Garamond",serif; font-style:italic; font-size:16px; color:rgba(231,222,205,.7); letter-spacing:.14em; }

/* ============ MANGETSU STORY ============ */
.mangetsu-story{
  padding:96px 0 100px;
  background:var(--paper-white);
  border-top:1px solid var(--line);
  position:relative;
  z-index:0;
  overflow:hidden;
}
.mangetsu-story .wrap{
  display:grid;
  grid-template-columns:minmax(0,500px) minmax(0,1fr);
  gap:72px;
  align-items:center;
}
.mangetsu-story__illustration .frame{
  aspect-ratio:2000/1501;
  width:100%;
}
.mangetsu-story__illustration .frame img{
  object-fit:cover;
}
.mangetsu-story__body{
  min-width:0;
}
.mangetsu-story__body .top{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:18px;
}
.mangetsu-story__body .top .num{
  font-family:"Cormorant Garamond",serif;
  font-size:46px; color:var(--cream3); font-weight:600; line-height:1;
}
.mangetsu-story__body .label{
  color:var(--brass-d);
}
.mangetsu-story__body h2{
  font-family:"Shippori Mincho",serif;
  font-weight:700;
  font-size:58px;
  line-height:1.3;
  color:var(--indigo);
  letter-spacing:.18em;
}
.mangetsu-story__copy{
  margin-top:30px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.mangetsu-story__copy p{
  font-weight:300;
  font-size:16px;
  line-height:2.35;
  color:var(--ink-soft);
  letter-spacing:.04em;
}
.mangetsu-story__copy p + p{
  margin-top:24px;
}

/* ============ PRODUCT (11) — 商品ブランド「満月」 ============ */
/* 生成り地・既存の額縁に収める図録スタイル。craft の「夜の収穫」と同じ扱いで、
   黒背景の商品写真は台紙つき額縁の中の一枚として見せる */
.product{ padding:96px 0 0; background:var(--cream); }
/* 写真列は 500px（元画像 500px 幅を等倍以下で使う）、残りを本文へ回して泣き別れを防ぐ */
.product .grid{ display:grid; grid-template-columns:500px 1fr; gap:60px; align-items:center; }
.product .photo .frame img{ height:auto; }
.product .photo .pcap{
  margin-top:14px; display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--muted-d); letter-spacing:.1em;
}
.product .photo .pcap .latin{ color:var(--brass-d); font-size:11px; }

/* ブランド名は写真の隣に通常配置（食い込ませる札は削除・omoi .txt .hgroup と同型） */
.product .brand .hgroup{ display:flex; align-items:flex-start; gap:38px; }
/* 縦書きでは line-height が「列の幅」になる。既定の 1.9 だと 2文字で 100px 前後も食って
   本文側が痩せ、狭い幅で泣き別れる。1.2 に詰めて本文に幅を渡す */
.product .brand .bname{ font-size:84px; letter-spacing:.2em; line-height:1.2; flex:0 0 auto; }
.product .brand .bbox{ flex:1; padding-top:8px; }
.product .brand .blatin{
  display:block; margin-bottom:18px;
  font-size:12px; color:var(--brass-d); letter-spacing:.34em;
}
.product .brand .btxt{
  font-family:"Shippori Mincho",serif; font-weight:500;
  font-size:19px; line-height:2.4; color:var(--ink); letter-spacing:.05em;
}
.product .brand .rule{ width:46px; height:1px; background:var(--brass); margin:26px 0 22px; }
.product .brand .bsub{
  font-weight:300; font-size:15px; line-height:2.2; color:var(--ink-soft);
}

/* 商品5点を載せる藍の帯（全幅）。omoi / contact と同じ藍で、中盤にコントラストを作る */
.pband{ background:var(--indigo-deep); padding:76px 0 82px; margin-top:88px; }

/* 端数の行が中央に寄るよう grid ではなく flex（5列=1行、3列/2列では最終行が中央） */
.product .p-list{
  display:flex; flex-wrap:wrap; justify-content:center; gap:26px;
}
.product .p-card{ flex:0 0 calc((100% - 26px * 4) / 5); }
/* 商品単体は黒余白が広いので、台紙の内側で拡大して寄せる */
.product .p-card .ph{ display:block; overflow:hidden; }
.product .p-card .ph img{ width:100%; height:auto; transform:scale(1.26); }
.product .p-card figcaption{ margin-top:16px; text-align:center; }
/* 以下は藍地の上。コントラストは実測値（キッカー 5.97:1 / 商品名 11.32:1 / 欧文 5.13:1） */
.product .p-card .kick{
  display:block; min-height:3.4em;
  font-family:"Shippori Mincho",serif; font-size:11.5px; font-weight:500;
  color:#C3AE7C; letter-spacing:.08em; line-height:1.7;
}
.product .p-card h3{
  margin-top:4px;
  font-family:"Shippori Mincho",serif; font-weight:700;
  font-size:18px; color:var(--cream); letter-spacing:.14em;
}
.product .p-card .en{
  display:block; margin-top:6px;
  font-family:"Cormorant Garamond",serif; font-size:11px;
  color:rgba(244,239,230,.60); letter-spacing:.28em;
}

.product .p-note{
  margin-top:56px; text-align:center;
  font-size:12.5px; line-height:2; color:rgba(244,239,230,.75); letter-spacing:.06em;
}

/* ============ REP MESSAGE (02) ============ */
.rep{ padding:96px 0 100px; background:var(--paper-white); border-top:1px solid var(--line); position:relative; z-index:0; overflow:hidden; }
.rep::before{
  content:"使命";
  position:absolute; z-index:-1;
  right:20%; top:50%; height:560px; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:"Shippori Mincho", serif; font-weight:700;
  font-size:220px; line-height:1; letter-spacing:.05em;
  color:var(--indigo); opacity:.09;
  pointer-events:none;
}
.rep .grid{ display:grid; grid-template-columns:1fr 460px; gap:60px; align-items:center; }
.rep .photo .frame{ height:520px; }
.rep .photo .frame img{ object-position:32% center; }
.rep .txt{ position:relative; }
.rep .txt .num{ font-family:"Cormorant Garamond",serif; font-size:44px; color:var(--cream3); font-weight:600; line-height:1; }
.rep .txt h2{
  font-family:"Shippori Mincho",serif; font-weight:700;
  font-size:30px; color:var(--indigo); letter-spacing:.12em; margin:14px 0 6px;
}
.rep .txt .role{ font-size:13px; color:var(--brass); letter-spacing:.2em; font-family:"Zen Kaku Gothic New",sans-serif; }
.rep .txt blockquote{
  margin:32px 0 28px;
  font-family:"Shippori Mincho",serif; font-weight:500;
  font-size:18.5px; line-height:2.5; color:var(--ink);
  letter-spacing:.04em;
  padding-left:24px; border-left:2px solid var(--indigo);
}
.rep .txt .name{ display:flex; align-items:baseline; gap:16px; }
.rep .txt .name .ja{ font-family:"Shippori Mincho",serif; font-weight:700; font-size:24px; color:var(--ink); letter-spacing:.18em; }
.rep .txt .name .en{ font-family:"Cormorant Garamond",serif; font-style:italic; font-size:16px; color:var(--muted); letter-spacing:.1em; }

/* ============ COMPANY (08) ============ */
.company{ padding:96px 0 100px; background:var(--cream); border-top:1px solid var(--line); }
.company .grid{ display:grid; grid-template-columns:540px 1fr; gap:60px; align-items:center; }
.company .photo .frame{ height:520px; }
.company .photo .frame img{ object-position:center 58%; }
.company .info .sec-head{ margin-bottom:30px; }
.company table{ width:100%; border-collapse:collapse; }
.company th, .company td{
  text-align:left; vertical-align:top; padding:18px 0;
  border-bottom:1px solid var(--line); font-size:15px;
}
.company th{
  width:130px; font-family:"Shippori Mincho",serif; font-weight:700;
  color:var(--indigo); letter-spacing:.14em; font-size:15px;
}
.company td{ color:var(--ink); font-weight:400; line-height:1.9; }
.company tr:first-child th, .company tr:first-child td{ border-top:1px solid var(--line); }

/* ============ CONTACT ============ */
.contact{ background:var(--indigo); padding:72px 0; color:var(--cream); position:relative; overflow:hidden; }
.contact::before{
  content:""; position:absolute; left:-40px; bottom:-80px;
  width:300px; height:300px;
  background:url("assets/jnp-logo-mark.png") center/contain no-repeat;
  opacity:.06; filter:invert(1);
}
.contact .wrap{ display:flex; align-items:center; justify-content:space-between; gap:40px; position:relative; }
.contact .l .label{ color:rgba(231,222,205,.65); margin-bottom:14px; }
.contact .l h2{ font-family:"Shippori Mincho",serif; font-weight:700; font-size:32px; letter-spacing:.14em; color:var(--cream); }
.contact .l p{ margin-top:14px; font-weight:300; font-size:14px; color:rgba(244,239,230,.78); line-height:2; }
.contact .r{ text-align:right; }
.contact .r .tel-label{ font-family:"Cormorant Garamond",serif; letter-spacing:.3em; font-size:13px; color:rgba(231,222,205,.7); }
.contact .r .tel{ font-size:46px; font-weight:600; letter-spacing:.06em; color:var(--cream); line-height:1.2; }
.contact .r .tel a{ color:inherit; text-decoration:none; }

/* ============ FOOTER ============ */
footer{ background:var(--indigo-deep); color:rgba(244,239,230,.82); padding:64px 0 50px; }
footer .wrap{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; }
footer .f-logo img{ height:40px; margin-bottom:22px; }
footer .f-logo .vsub{ display:none; }
footer .addr{ font-weight:300; font-size:14px; line-height:2.1; letter-spacing:.04em; }
footer .addr a{ color:inherit; text-decoration:none; }
footer .f-sns{ display:flex; gap:18px; margin-top:20px; }
footer .f-sns a{ color:rgba(244,239,230,.8); display:inline-flex; transition:color .25s; }
footer .f-sns a:hover{ color:var(--cream); }
/* PC版は公式カラーのロゴを大きく表示。スマホ版は目視確認まで従来表示を維持する */
@media (min-width:881px){
  footer .f-sns{ gap:16px; margin-top:24px; }
  footer .f-sns a{
    width:56px; height:56px;
    align-items:center; justify-content:center;
  }
  footer .f-sns a svg{ display:none; }
  footer .f-sns a::before{
    content:""; display:block;
    width:40px; height:40px;
    background:center / contain no-repeat;
  }
  footer .f-sns .sns-instagram::before{
    background-image:url("assets/instagram-icon-official.svg");
  }
  footer .f-sns .sns-base::before{
    width:40px; height:40px;
    background-image:url("assets/base-icon-official.png");
    border-radius:22%;
  }
  footer .f-sns a:hover{ color:var(--cream); transform:translateY(-2px); }
}
@media (max-width:880px){
  footer .f-sns{ gap:14px; margin-top:24px; }
  footer .f-sns a{
    width:52px; height:52px;
    align-items:center; justify-content:center;
  }
  footer .f-sns a svg{ display:none; }
  footer .f-sns a::before{
    content:""; display:block;
    width:40px; height:40px;
    background:center / contain no-repeat;
  }
  footer .f-sns .sns-instagram::before{
    background-image:url("assets/instagram-icon-official.svg");
  }
  footer .f-sns .sns-base::before{
    width:40px; height:40px;
    background-image:url("assets/base-icon-official.png");
    border-radius:22%;
  }
}
footer .fnav{ display:flex; flex-direction:column; gap:12px; text-align:right; }
footer .fnav a{ font-family:"Shippori Mincho",serif; font-size:14px; letter-spacing:.14em; color:rgba(244,239,230,.8); }
footer .fnav a:hover{ color:var(--cream); }
footer .base{
  max-width:1180px; margin:46px auto 0; padding:22px 50px 0;
  border-top:1px solid rgba(231,222,205,.16);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-size:12px; color:rgba(244,239,230,.5);
}
footer .base .latin{ letter-spacing:.2em; }

/* PC限定の改行制御（スマホでは無効化し自然な折返しに任せる） */
br.pc-break{ display:none; }
@media (min-width:881px){
  br.pc-break{ display:inline; }
}
/* スマホ限定の改行制御（PCでは無効化） */
br.mobile-break{ display:inline; }
@media (min-width:881px){
  br.mobile-break{ display:none; }
}
/* PC/スマホでテキストを丸ごと出し分ける（改行位置に加え句読点も変える場合） */
.lead--mobile{ display:none; }
@media (max-width:880px){
  .lead--pc{ display:none; }
  .lead--mobile{ display:block; }
}

/* ============ SCROLL REVEAL ============ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }
.reveal[data-delay="4"]{ transition-delay:.48s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .wrap, .nav, footer .base{ padding-left:28px; padding-right:28px; }
  .hero .wrap{ grid-template-columns:380px 1fr; gap:32px; }
  .hero-right .frame{ height:520px; }
  .craft .grid{ grid-template-columns:360px 1fr; gap:40px; }
  .omoi .grid{ grid-template-columns:360px 1fr; gap:40px; }
  .company .grid{ grid-template-columns:440px 1fr; }
  .rep .grid{ grid-template-columns:1fr 400px; }
  .mangetsu-story .wrap{ grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:40px; }
  .mangetsu-story__body h2{ font-size:50px; }
  /* 「Mangetsu」表記は「満月」より横幅を食うため、この帯だけ写真列を狭めて本文側に幅を渡す */
  .product .grid{ grid-template-columns:360px 1fr; gap:32px; }
  .product .brand .bname{ font-size:66px; }
  .product .brand .hgroup{ gap:28px; }
  .product .brand .btxt{ font-size:17.5px; }
  .product .p-list{ gap:18px; }
  .product .p-card{ flex-basis:calc((100% - 18px * 4) / 5); }
}

@media (max-width:880px){
  /* nav / hamburger */
  .nav{ height:64px; }
  .nav .logo img{ height:30px; }
  .nav-toggle{ display:block; }
  .nav ul{
    position:fixed; top:64px; left:0; right:0; bottom:0;
    background:var(--cream);
    flex-direction:column; justify-content:center; align-items:center;
    gap:28px;
    z-index:99;
    transform:translateY(-12px);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  }
  .nav ul.is-open{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .nav ul a{ font-size:18px; display:inline-block; padding:8px 18px; }
  body.nav-lock{ overflow:hidden; }

  section[id]{ scroll-margin-top:65px; }

  /* hero — 案B: 全画面写真＋三層構成（空にタイトル・人は遮らない・裾に説明文） */
  .hero{ padding:0; }
  .hero .wrap{ grid-template-columns:1fr; display:block; padding:0; }
  .hero-right{
    order:0; margin:0; position:relative;
    height:calc(100vh - 65px); height:calc(100dvh - 65px);
    min-height:0; overflow:hidden;
  }
  .hero-right::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to bottom,
      rgba(20,30,45,.16) 0%, rgba(20,30,45,0) 26%,
      rgba(20,30,45,0) 46%, rgba(20,30,45,.32) 72%, rgba(20,30,45,.72) 100%);
    pointer-events:none; z-index:1;
  }
  .hero-right .frame{ height:100%; aspect-ratio:none; border:none; padding:0; background:transparent; position:relative; }
  /* ゆっくり横パン: 中央→左端→右端→中央(36秒)。高さそのまま全員が順に映る */
  .hero-right .frame img.hero-photo{
    width:auto; height:100%; max-width:none;
    animation:heroPan 36s ease-in-out infinite;
    will-change:transform;
  }
  @media (prefers-reduced-motion: reduce){
    .hero-right .frame img.hero-photo{
      animation:none;
      width:100%; object-fit:cover; object-position:center 45%;
    }
  }
  .hero-right .cap{ display:none; }
  .hero-left{ position:absolute; inset:0; z-index:2; padding:0; display:block; }
  .hero-left::before{ display:none; }
  /* 第1層: キッカー（左上・小さく） */
  .hero-left .toplabel{ position:absolute; top:22px; left:20px; margin:0; }
  .hero-left .toplabel .ln{ width:38px; background:rgba(244,239,230,.55); }
  .hero-left .toplabel .latin{ color:rgba(244,239,230,.9) !important; font-size:10px !important; letter-spacing:.34em; }
  /* 第2層: 縦書きタイトル（右上・空に掛け軸のように吊るす） */
  .hero-titles{
    position:absolute; top:62px; right:22px;
    height:auto; margin:0; gap:20px;
    justify-content:flex-end; align-items:flex-start;
  }
  .hero-titles .main{
    font-size:40px; height:auto;
    color:var(--cream); text-shadow:0 2px 26px rgba(20,30,45,.55);
  }
  .hero-titles .sec{
    font-size:12px; height:auto; margin-top:8px;
    color:rgba(244,239,230,.95); text-shadow:0 1px 12px rgba(20,30,45,.65);
    letter-spacing:.3em;
  }
  /* 第3層: 説明文（下端・陰の中に静かに） */
  .hero-left .sub{
    position:absolute; bottom:26px; left:20px; right:20px;
    margin:0; padding-top:14px;
    font-size:14.5px; line-height:1.9;
    color:rgba(244,239,230,.88);
    border-top:1px solid rgba(244,239,230,.28);
  }
  .hero-left .sub .jp{ color:rgba(244,239,230,.75); font-size:13px; margin-bottom:5px; }
  .hero-right.reveal{ transition-delay:0s; }
  .hero-titles.reveal{ transition-delay:.15s; }
  .hero-left .sub.reveal{ transition-delay:.3s; }

  /* philo */
  .philo .wrap{ flex-direction:column; gap:28px; align-items:flex-start; }
  .philo .mark img{ width:60px; }
  .philo .lead{ font-size:22px; }
  .philo .pull{
    margin-left:0; border-left:none; padding-left:0; width:100%;
    border-top:1px solid var(--line); padding-top:22px;
  }
  .philo .pull .vtitle{
    writing-mode:horizontal-tb; height:auto; font-size:17px;
  }
  .philo::before{
    left:auto; right:4%; top:64%; height:360px;
    font-size:132px; opacity:.07;
  }

  /* team */
  .team .band{ height:400px; min-height:0; }
  .team .band img{ transform:none; }
  .team .ov{ background:linear-gradient(100deg, rgba(30,51,71,.03) 0%, rgba(30,51,71,.06) 55%, rgba(30,51,71,.12) 80%, rgba(30,51,71,.40) 92%, rgba(30,51,71,.55) 100%); }
  .team .content{
    width:100%; padding:14px 20px 0 0; gap:16px;
    transform:none; align-items:flex-start;
  }
  .team .content .num{
    writing-mode:horizontal-tb;
    position:absolute; top:16px; left:20px;
    margin-top:0; align-self:auto;
  }
  .team .content .ttl{ font-size:24px; height:270px; }
  .team .content .lns{ height:195px; font-size:13px; margin-bottom:0; align-self:flex-start; margin-top:4px; }

  /* craft */
  .craft{ padding:64px 0; }
  .craft .grid{ grid-template-columns:1fr; }
  .craft .photo .frame{ height:420px; }
  .craft .item .kj{ font-size:26px; }

  /* omoi */
  .omoi{ padding:64px 0; }
  .omoi .grid{ grid-template-columns:1fr; gap:40px; }
  .omoi .photo .frame{ height:440px; }
  .omoi .txt h2{ font-size:26px; height:300px; }
  .omoi .txt .hgroup{ gap:24px; }
  .omoi .txt .pbox p{ font-size:15px; line-height:2.3; }

  /* mangetsu story */
  .mangetsu-story{ padding:64px 0; }
  .mangetsu-story .wrap{ grid-template-columns:1fr; gap:36px; }
  .mangetsu-story__illustration{ max-width:516px; width:100%; margin:0 auto; }
  .mangetsu-story__body .top{ margin-bottom:14px; }
  .mangetsu-story__body h2{ font-size:44px; }
  .mangetsu-story__copy{ margin-top:24px; padding-top:22px; }
  .mangetsu-story__copy p{ font-size:15.5px; line-height:2.25; }
  .mangetsu-story__copy p + p{ margin-top:20px; }

  .omoi::after{
    left:auto; right:3%; top:72%; height:340px;
    font-size:132px; opacity:.08;
  }

  /* product */
  .product{ padding:64px 0 0; }
  .pband{ margin-top:56px; padding:52px 0 58px; }
  .product .grid{ grid-template-columns:1fr; gap:36px; }
  .product .brand .hgroup{ gap:20px; }
  /* 1カラム化で集合カットが引き伸ばされてボケるのを防ぐ。
     516px = 元画像 500px + 額縁の padding 8px×2 で、拡大なしの上限になる */
  .product .photo{ max-width:516px; margin:0 auto; width:100%; }
  .product .brand .bname{ font-size:44px; letter-spacing:.16em; }
  .product .brand .btxt{ font-size:17px; line-height:2.25; }
  .product .brand .blatin{ margin-bottom:14px; }
  .product .brand .rule{ margin:22px 0 18px; }
  .product .p-list{ gap:20px; }
  .product .p-card{ flex-basis:calc((100% - 20px * 2) / 3); }
  .product .p-card .kick{ min-height:3.6em; font-size:11px; }
  .product .p-card h3{ font-size:16px; letter-spacing:.1em; }
  .product .p-note{ margin-top:44px; }

  /* rep */
  .rep{ padding:64px 0; }
  .rep .grid{ grid-template-columns:1fr; gap:36px; }
  .rep .photo .frame{ height:420px; }
  .rep .txt blockquote{ font-size:16.5px; line-height:2.3; }
  .rep .txt h2{ font-size:26px; }
  .rep::before{
    right:2%; top:66%; height:340px;
    font-size:132px; opacity:.08;
  }

  /* company */
  .company{ padding:64px 0; }
  .company .grid{ grid-template-columns:1fr; gap:36px; }
  .company .photo .frame{ height:300px; }
  .company th{ width:100px; font-size:14px; }
  .company td{ font-size:14px; }

  /* contact */
  .contact .wrap{ flex-direction:column; align-items:flex-start; gap:28px; }
  .contact .r{ text-align:left; }
  .contact .r .tel{ font-size:34px; }

  /* footer */
  footer .wrap{ flex-direction:column; gap:28px; }
  footer .fnav{ flex-direction:row; flex-wrap:wrap; gap:10px 22px; text-align:left; }
  footer .base{ flex-direction:column; align-items:flex-start; gap:8px; font-size:11px; }
}

/* ヒーロー横パン（スマホ）: translateXは自身幅基準%とvwの併用でどの画面幅でも端が一致する */
@keyframes heroPan{
  0%   { transform:translateX(-11%); }
  50%  { transform:translateX(calc(-82% + 100vw)); }
  100% { transform:translateX(-11%); }
}

@media (max-width:480px){
  .wrap, .nav{ padding-left:20px; padding-right:20px; }
  .hero-titles .main{ font-size:32px; }
  .hero-titles{ height:auto; top:54px; }
  .hero-titles .sec{ height:auto; font-size:11px; }
  .team .content .ttl{ font-size:22px; height:250px; }
  .team .content .lns{ font-size:13px; }
  .contact .r .tel{ font-size:30px; }
  .company th{ width:88px; }
  .product .p-list{ gap:16px; }
  .product .p-card{ flex-basis:calc((100% - 16px) / 2); }
  .product .p-card .kick{ min-height:0; }
  /* 縦書き「満月」を横に置くと本文が 250px 前後まで痩せて泣き別れる（実測）。
     philo の縦書き見出しと同じく、この幅では横書きにして上へ逃がし本文に全幅を渡す */
  .product .brand .hgroup{ display:block; }
  .product .brand .bname{
    writing-mode:horizontal-tb; height:auto;
    font-size:26px; letter-spacing:.34em; margin-bottom:16px;
  }
  .product .brand .bbox{ padding-top:0; }
  .product .brand .btxt{ font-size:15.5px; }
  .mangetsu-story__body h2{ font-size:38px; }
  .mangetsu-story__copy p{ font-size:15px; }
}

/* 極小幅: キッカー（最長11文字）が1文字だけ折り返すのを防ぐ */
@media (max-width:360px){
  .product .p-card .kick{ font-size:10px; letter-spacing:.02em; }
}

/* ============ LIGHTBOX ============ */
/* body.nav-lock の overflow:hidden は @media(max-width:880px) 限定（ハンバーガーメニュー用）なので、
   ライトボックスは全幅で効く専用クラスを使う */
body.lightbox-lock{ overflow:hidden; }
.frame img{ cursor:zoom-in; }
.lightbox{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,11,16,.92);
  padding:56px;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.lightbox.is-open{
  opacity:1; visibility:visible;
  transition:opacity .25s ease, visibility 0s linear 0s;
}
.lightbox-img{
  display:block; max-width:100%; max-height:100%;
  width:auto; height:auto;
  border:1px solid rgba(244,239,230,.2);
  box-shadow:0 24px 64px rgba(0,0,0,.5);
  cursor:default;
  transform:scale(.97);
  transition:transform .25s ease;
}
.lightbox.is-open .lightbox-img{ transform:scale(1); }
.lightbox-close{
  position:absolute; top:24px; right:28px;
  width:44px; height:44px;
  border:1px solid rgba(244,239,230,.4);
  background:transparent; color:var(--cream);
  font-family:"Cormorant Garamond",serif; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color .2s, color .2s;
}
.lightbox-close:hover{ border-color:var(--cream); }

@media (max-width:480px){
  .lightbox{ padding:16px; }
  .lightbox-close{ top:14px; right:14px; width:38px; height:38px; font-size:22px; }
}