/* ============================================================
   Nopeak株式会社 ブランドサイト v2 (ゴシック / branding × trust)
   ============================================================ */
:root{
  --ink:#18171a;          /* 見出しの黒 */
  --body:#44434a;         /* 本文 */
  --muted:#8b8893;        /* 補助 */
  --paper:#ffffff;
  --soft:#f5f1ea;         /* 生成りセクション */
  --beige:#c3a780;        /* keyroomブランドのベージュ */
  --beige-dk:#a8895f;
  --deep:#1a1916;         /* ダークバンド */
  --line:#e7e1d6;
  --maxw:1160px;
  --goth:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --body-f:"Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--body-f); color:var(--body);
  background:var(--paper); line-height:1.95; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none; transition:.25s;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
h1,h2,h3{font-family:var(--goth); color:var(--ink); font-weight:900; line-height:1.4; margin:0;}

/* ---- ヘッダー ---- */
.hd{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.9);
    backdrop-filter:blur(8px); border-bottom:1px solid rgba(0,0,0,.05);}
.hd .wrap{display:flex; align-items:center; justify-content:space-between; height:76px;}
.hd .logo img{height:40px;}
.hd nav{display:flex; align-items:center; gap:30px; font-family:var(--goth); font-weight:500; font-size:14px;}
.hd nav a{color:var(--ink); position:relative;}
.hd nav a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--beige); transition:.25s;}
.hd nav a:hover::after{width:100%;}
.hd .cta{background:var(--ink); color:#fff; padding:11px 22px; border-radius:999px; font-size:13px;}
.hd .cta:hover{background:var(--beige-dk);}
.burger{display:none; background:none; border:0; font-size:26px; cursor:pointer; color:var(--ink);}

/* ---- ヒーロー ---- */
.hero{position:relative; padding:130px 0 110px; overflow:hidden;}
.hero .eyebrow{font-family:var(--goth); font-weight:700; letter-spacing:.32em; font-size:12px; color:var(--beige-dk); margin-bottom:30px;}
.hero h1{font-size:clamp(34px,6vw,76px); letter-spacing:.04em; margin-bottom:34px;}
.hero h1 .accent{color:var(--beige);}
.hero .lead{font-size:16px; max-width:540px; color:var(--body);}
.hero .scroll{position:absolute; right:32px; bottom:40px; writing-mode:vertical-rl; font-family:var(--goth); font-size:11px; letter-spacing:.3em; color:var(--muted);}
.hero-strip{height:42vh; min-height:300px; background-size:cover; background-position:center 35%;}

/* ---- 共通セクション ---- */
.sec{padding:108px 0;}
.sec.soft{background:var(--soft);}
.sec.deep{background:var(--deep); color:#cfc9bd;}
.lead-head{margin-bottom:60px;}
.lead-head .en{font-family:var(--goth); font-weight:900; letter-spacing:.12em; font-size:13px; color:var(--beige-dk);}
.lead-head h2{font-size:clamp(26px,3.4vw,40px); margin-top:10px; letter-spacing:.04em;}
.lead-head .sub{margin-top:18px; max-width:620px; font-size:15px;}
.sec.deep .lead-head h2{color:#fff;}
.sec.deep .lead-head .en{color:var(--beige);}

/* ---- About lead ---- */
.about p{font-size:clamp(17px,2vw,21px); font-family:var(--goth); font-weight:500; line-height:2.2; color:var(--ink); max-width:760px;}
.about .small{font-size:15px; font-family:var(--body-f); font-weight:400; color:var(--body); margin-top:26px; line-height:2;}

/* ---- 事業ブロック ---- */
.biz{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; margin-bottom:30px; background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.biz:nth-child(even) .biz-media{order:2;}
.biz-media{min-height:340px; background-size:cover; background-position:center; position:relative;}
.biz-media .tag{position:absolute; top:20px; left:20px; background:rgba(255,255,255,.92); color:var(--ink); font-family:var(--goth); font-weight:700; font-size:12px; letter-spacing:.1em; padding:7px 14px; border-radius:999px;}
.biz-body{padding:48px 46px; display:flex; flex-direction:column; justify-content:center;}
.biz-body .no{font-family:var(--goth); font-weight:900; color:var(--beige); font-size:14px; letter-spacing:.1em;}
.biz-body h3{font-size:26px; margin:10px 0 8px;}
.biz-body .jp{font-size:13px; color:var(--muted); font-family:var(--goth); letter-spacing:.08em; margin-bottom:18px;}
.biz-body p{font-size:14.5px; margin:0 0 26px;}
.biz-body .more{font-family:var(--goth); font-weight:700; font-size:14px; color:var(--ink); display:inline-flex; align-items:center; gap:10px;}
.biz-body .more .arw{width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; transition:.25s;}
.biz-body .more:hover .arw{background:var(--beige-dk); transform:translateX(4px);}

/* small biz pills */
.biz-pills{display:flex; gap:18px; flex-wrap:wrap; margin-top:8px;}
.pill{flex:1 1 240px; border:1px solid var(--line); border-radius:12px; padding:26px 28px;}
.pill h4{font-family:var(--goth); font-weight:700; font-size:16px; color:var(--ink); margin:0 0 8px;}
.pill p{margin:0; font-size:13.5px; color:var(--body);}

/* small cards (3カラム) */
.cards{display:flex; gap:22px; flex-wrap:wrap;}
.card{flex:1 1 260px; border:1px solid var(--line); border-radius:14px; padding:32px 28px; background:#fff; transition:.25s;}
.card:hover{box-shadow:0 12px 30px rgba(0,0,0,.05);}
.card h3{font-family:var(--goth); font-weight:700; font-size:16px; color:var(--ink); margin:0 0 12px; letter-spacing:.04em;}
.card p{margin:0; font-size:13.5px; color:var(--body); line-height:1.9;}

/* 写真つきサービスカード（トップの卸売/販売代行/マーケ） */
.svc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; }
.svc:hover{ box-shadow:0 16px 36px rgba(0,0,0,.08); transform:translateY(-4px); }
.svc .ph{ height:172px; background-size:cover; background-position:center; }
.svc .bd{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.svc .bd h4{ font-family:var(--goth); font-weight:700; font-size:16px; color:var(--ink); margin:0 0 8px; letter-spacing:.03em; }
.svc .bd p{ font-size:13px; color:var(--body); margin:0 0 18px; flex:1; line-height:1.9; }
.svc .bd a{ font-family:var(--goth); font-weight:700; font-size:13px; color:var(--beige-dk); }
.svc .bd a:hover{ color:var(--ink); }
@media(max-width:860px){ .svc-cards{ grid-template-columns:1fr; } }

/* ---- 理念 (deep band) ---- */
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:10px;}
.values .v .k{font-family:var(--goth); font-weight:900; font-size:13px; letter-spacing:.2em; color:var(--beige);}
.values .v h3{color:#fff; font-size:20px; margin:14px 0 14px; font-weight:700;}
.values .v p{font-size:14px; line-height:2; color:#b8b2a6;}

/* ---- 会社情報 strip ---- */
.profile2{display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px;}
.profile2 .row{display:grid; grid-template-columns:150px 1fr; padding:18px 0; border-bottom:1px solid var(--line); font-size:14.5px;}
.profile2 .row dt{font-family:var(--goth); font-weight:700; color:var(--ink); margin:0;}
.profile2 .row dd{margin:0; color:var(--body);}

/* ---- News ---- */
.news2 a{display:flex; gap:28px; align-items:center; padding:22px 4px; border-bottom:1px solid var(--line); font-size:14.5px;}
.news2 a:hover{color:var(--beige-dk);}
.news2 .d{font-family:var(--goth); font-weight:700; color:var(--beige-dk); white-space:nowrap;}
.news2 .cat{font-family:var(--goth); font-size:11px; border:1px solid var(--line); padding:3px 10px; border-radius:999px; color:var(--muted);}

/* ---- Contact CTA ---- */
.cta-band{background:var(--beige); color:#fff; text-align:center; padding:96px 0;}
.cta-band h2{color:#fff; font-size:clamp(26px,3.5vw,40px); margin-bottom:18px;}
.cta-band p{color:rgba(255,255,255,.9); margin-bottom:36px;}
.cta-band .btn{display:inline-block; background:#fff; color:var(--ink); font-family:var(--goth); font-weight:700; padding:17px 48px; border-radius:999px; font-size:15px;}
.cta-band .btn:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.18);}

/* ---- Footer ---- */
.ft{background:var(--deep); color:#9b968c; padding:64px 0 40px;}
.ft .top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; margin-bottom:40px;}
.ft .brand .logo-txt{font-family:var(--goth); font-weight:900; font-size:22px; letter-spacing:.14em; color:#fff;}
.ft .brand .logo-txt span{font-weight:500; font-size:13px; letter-spacing:.1em; margin-left:8px; color:#b8b2a6;}
.ft .brand p{margin-top:16px; font-size:13px; max-width:280px;}
.ft .cols{display:flex; gap:60px; flex-wrap:wrap;}
.ft .cols .c h5{font-family:var(--goth); color:#fff; font-size:12px; letter-spacing:.1em; margin:0 0 14px;}
.ft .cols .c a{display:block; font-size:13px; padding:5px 0; color:#9b968c;}
.ft .cols .c a:hover{color:#fff;}
.ft .copy{border-top:1px solid rgba(255,255,255,.1); padding-top:24px; font-size:11px; letter-spacing:.08em; color:#6f6b62;}

/* ---- reveal ---- */
.rv{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease;}
.rv.is-visible{opacity:1; transform:none;}

/* ===== モーション（動きのあるサイト） ===== */
.hero .wrap.rv{ opacity:1; transform:none; }
.hero .wrap.rv > *{ opacity:0; transform:translateY(24px); transition:opacity 1s ease, transform 1s ease; }
.hero .wrap.rv.is-visible > *{ opacity:1; transform:none; }
.hero .wrap.rv.is-visible .eyebrow{ transition-delay:.1s; }
.hero .wrap.rv.is-visible h1{ transition-delay:.28s; }
.hero .wrap.rv.is-visible .lead{ transition-delay:.55s; }
.hero .scroll{ animation:scrollpulse 2.4s ease-in-out infinite; }
@keyframes scrollpulse{ 0%,100%{opacity:.35} 50%{opacity:1} }

.rv .pill, .rv .card, .rv .channel, .rv .values .v{
  opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;
}
.rv.is-visible .pill, .rv.is-visible .card, .rv.is-visible .channel, .rv.is-visible .values .v{ opacity:1; transform:none; }
.rv.is-visible .pill:nth-child(2), .rv.is-visible .card:nth-child(2), .rv.is-visible .channel:nth-child(2), .rv.is-visible .values .v:nth-child(2){ transition-delay:.12s; }
.rv.is-visible .pill:nth-child(3), .rv.is-visible .card:nth-child(3), .rv.is-visible .channel:nth-child(3), .rv.is-visible .values .v:nth-child(3){ transition-delay:.24s; }
.rv.is-visible .channel:nth-child(4){ transition-delay:.36s; }

.biz{ overflow:hidden; }
.biz-media{ transition:transform 1.3s cubic-bezier(.2,.7,.2,1); }
.biz:hover .biz-media{ transform:scale(1.05); }

.hd .wrap{ transition:height .3s ease; }
.hd .logo img{ transition:height .3s ease; }
.hd.scrolled{ box-shadow:0 6px 24px rgba(0,0,0,.06); }
.hd.scrolled .wrap{ height:60px; }
.hd.scrolled .logo img{ height:32px; }
.hero-strip{ background-position:center 50%; will-change:background-position; }

/* 流れるブランド帯（マーキー） */
.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; background:var(--paper); }
.marquee .track{ display:inline-flex; align-items:center; white-space:nowrap; will-change:transform; animation:marquee 32s linear infinite; }
.marquee .track span{ font-family:var(--goth); font-weight:900; font-size:clamp(18px,2.6vw,30px); color:var(--ink); letter-spacing:.06em; padding:0 6px; }
.marquee .track .sep{ color:var(--beige); margin:0 22px; font-weight:400; }
.marquee:hover .track{ animation-play-state:paused; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* 追加スマホ最適化 */
@media(max-width:768px){
  .sec{ padding:64px 0; }
  .hero{ padding:70px 0 54px; }
  .hero-strip{ height:34vh; min-height:210px; }
  .hero .lead{ font-size:14px; }
  .lead-head{ margin-bottom:40px; }
  .biz-body{ padding:30px 24px; }
  .biz-media{ min-height:210px; }
  .cta-band{ padding:66px 0; }
  .values{ gap:36px; }
  .ft .top{ flex-direction:column; gap:26px; }
  .ft .cols{ gap:26px 36px; }
  .map-embed iframe{ height:300px; }
  .marquee .track span{ font-size:20px; }
}

@media (prefers-reduced-motion: reduce){
  *, .rv, .rv *, .marquee .track, .hero .scroll{ animation:none !important; transition-duration:.001s !important; }
  .rv, .rv *, .hero .wrap.rv > *{ opacity:1 !important; transform:none !important; }
}

/* ===== 日本語の改行制御（不自然な折返しを軽減） ===== */
/* 文節（意味の区切り）で折り返す。対応ブラウザのみ効き、非対応は通常折返しにフォールバック */
body{ word-break:auto-phrase; line-break:strict; }
h1,h2,h3,h4,.hero .lead,.lead-head .sub,.subhero .sub,p{ word-break:auto-phrase; }
/* PC専用の改行：スマホでは解除して自然な折返しに任せる */
@media(max-width:768px){ br.pcbr{ display:none; } }

/* ===== サブページ共通ヘッダー ===== */
.subhero{ padding:120px 0 0; }
.subhero .eyebrow{ font-family:var(--goth); font-weight:700; letter-spacing:.3em; font-size:12px; color:var(--beige-dk); }
.subhero h1{ font-size:clamp(30px,4vw,46px); margin-top:14px; letter-spacing:.06em; }
.subhero .sub{ margin-top:18px; max-width:640px; font-size:15px; color:var(--body); }

/* ===== ブランド区切り見出し（ショップ/事業をブランド単位で） ===== */
.brand-band{ display:flex; align-items:center; gap:18px; margin:0 0 26px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.brand-band .bimg{ height:46px; width:auto; }
.brand-band .btxt .bname{ font-family:var(--goth); font-weight:900; font-size:20px; color:var(--ink); line-height:1.3; }
.brand-band .btxt .bdesc{ font-size:13px; color:var(--muted); }

/* ===== ショップ チャネルカード ===== */
.channels{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:64px; }
.channel{ border:1px solid var(--line); border-radius:14px; padding:26px 28px; display:flex; align-items:center; gap:22px; background:#fff; transition:.25s; }
.channel:hover{ box-shadow:0 12px 30px rgba(0,0,0,.07); transform:translateY(-2px); }
.channel .ico{ width:84px; height:60px; flex:none; background-size:contain; background-repeat:no-repeat; background-position:center; }
.channel .meta{ flex:1; }
.channel .meta h4{ font-family:var(--goth); font-weight:700; font-size:16px; color:var(--ink); margin:0 0 4px; }
.channel .meta p{ margin:0; font-size:12.5px; color:var(--muted); }
.channel .go{ font-family:var(--goth); font-weight:700; font-size:18px; color:var(--beige-dk); }

/* ===== ニュース（ブログ） ===== */
.posts{ max-width:780px; margin:0 auto; }
.post{ padding:30px 0; border-bottom:1px solid var(--line); }
.post .meta{ display:flex; gap:14px; align-items:center; margin-bottom:10px; }
.post .meta .date{ font-family:var(--goth); font-weight:700; color:var(--beige-dk); font-size:13px; }
.post .meta .cat{ font-family:var(--goth); font-size:11px; border:1px solid var(--line); padding:3px 10px; border-radius:999px; color:var(--muted); }
.post h3{ font-family:var(--goth); font-weight:700; font-size:18px; color:var(--ink); margin:0 0 8px; }
.post p{ margin:0; font-size:14px; color:var(--body); }

/* ===== 地図 ===== */
.map-embed{ border-radius:14px; overflow:hidden; border:1px solid var(--line); line-height:0; }
.map-embed iframe{ width:100%; height:380px; border:0; }

/* お問い合わせフォーム埋め込みの高さ（スマホは高め） */
.form-embed iframe{ width:100%; height:1700px; }
@media(max-width:768px){ .form-embed iframe{ height:2500px; } }

/* ===== お問い合わせフォーム ===== */
.cform{ max-width:640px; margin:0 auto; font-family:var(--goth); }
.cfield{ margin-bottom:22px; }
.cfield > label{ display:block; font-size:13px; margin-bottom:8px; color:var(--ink); font-weight:500; }
.creq{ background:#d8504e; color:#fff; font-size:10px; padding:2px 7px; border-radius:3px; margin-left:8px; }
.cfield input, .cfield select, .cfield textarea{ width:100%; padding:13px 15px; border:1px solid #d8d2c6; border-radius:8px; font-family:var(--goth); font-size:14px; background:#fff; }
.cfield textarea{ min-height:150px; resize:vertical; }
.crow{ display:flex; gap:18px; }
.crow .cfield{ flex:1; }
.cinline{ display:flex; gap:10px; align-items:center; }
.cinline input{ width:auto; }
.cnote{ text-align:center; font-size:12px; color:var(--muted); margin:18px 0; }
.cactions{ text-align:center; }
.embed-slot{ background:var(--soft); border:1px dashed #cfc6b5; padding:22px; border-radius:10px; text-align:center; color:var(--muted); font-family:var(--goth); font-size:13px; }

/* ===== 規約・ポリシー（長文） ===== */
.legal{ max-width:820px; margin:0 auto; font-family:var(--goth); font-size:14px; line-height:2; color:var(--body); }
.legal .intro{ margin-bottom:36px; }
.legal h2{ font-family:var(--goth); font-weight:700; font-size:17px; color:var(--ink); margin:34px 0 12px; padding-left:12px; border-left:3px solid var(--beige); }
.legal p{ margin:0 0 14px; }
.legal .addr{ background:var(--soft); padding:16px 20px; border-radius:8px; }
@media(max-width:768px){ .crow{ flex-direction:column; gap:0; } }

/* ---- responsive ---- */
@media(max-width:768px){ .channels{ grid-template-columns:1fr; } .subhero{ padding:90px 0 0; } }
@media(max-width:860px){
  .hd nav{position:fixed; inset:76px 0 auto 0; flex-direction:column; gap:0; background:#fff; padding:8px 0; border-bottom:1px solid var(--line); transform:translateY(-130%); transition:.3s;}
  .hd nav.open{transform:none;}
  .hd nav a{padding:16px 28px; width:100%; border-top:1px solid var(--line);}
  .hd nav .cta{margin:14px 28px; text-align:center;}
  .burger{display:block;}
  .biz{grid-template-columns:1fr;}
  .biz:nth-child(even) .biz-media{order:0;}
  .biz-body{padding:34px 26px;}
  .values{grid-template-columns:1fr; gap:34px;}
  .profile2{grid-template-columns:1fr; gap:0;}
  .hero{padding:80px 0 60px;}
}