/* =========================================================
   ルルフル / lulufle  —  ブランドサイト デモ  共通スタイル
   LIXデザイン
   ========================================================= */

:root{
  --milk:#FBF7F1;
  --milk-d:#F6F0E7;
  --cream:#F1E8DA;
  --cream-d:#E9DDC9;
  --pink:#E6C6C1;
  --pink-l:#F5E7E3;
  --sage:#C2CDB6;
  --sage-l:#E4EDDC;
  --sage-d:#879677;
  --sage-dd:#6E7C5F;
  --sky:#C6D6DB;
  --sun:#EFE0B7;
  --ink:#585047;
  --ink-l:#8C8377;
  --line:rgba(88,80,71,.12);
  --shadow:0 24px 60px rgba(88,80,71,.12);
  --shadow-s:0 14px 34px rgba(88,80,71,.08);
  --r:26px;
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;max-width:100%;}
img,svg{max-width:100%;display:block;}
p,li,td,th,dd,figcaption{overflow-wrap:anywhere;}
h1,h2,h3,h4,h5{word-break:keep-all;line-break:strict;overflow-wrap:normal;}
body{
  margin:0;
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Meiryo",sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--milk);
  line-height:2.05;
  letter-spacing:.05em;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.round{font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;font-weight:500;line-height:1.75;letter-spacing:.04em;}
.mincho{font-family:"Zen Old Mincho",serif;font-weight:500;}
.en{font-family:"Quicksand",sans-serif;letter-spacing:.22em;text-transform:lowercase;}
a{color:inherit;text-decoration:none;}
strong,b{font-weight:500;color:var(--ink);}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:26px;}
.wrap-narrow{max-width:820px;margin-inline:auto;padding-inline:26px;}
section{padding:120px 0;position:relative;}
.pt-0{padding-top:0;}

/* ---------- 写真（仮画像のトーン統一） ---------- */
.photo{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);position:relative;background:var(--cream);}
.photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(1.03);}
.photo::after{content:"";position:absolute;inset:0;background:rgba(241,232,218,.14);mix-blend-mode:multiply;pointer-events:none;}
.photo.plain{box-shadow:none;}

/* ---------- リビール ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;}
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- ヘッダー ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(251,247,241,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.hbar{display:flex;align-items:center;justify-content:space-between;padding:16px 26px;max-width:var(--maxw);margin-inline:auto;}
.logo{display:flex;align-items:center;gap:13px;color:var(--ink);}
.logo .mark{width:42px;height:42px;flex:none;}
.logo .wm{display:flex;flex-direction:column;line-height:1.12;}
.logo .wm b{font-family:"Zen Maru Gothic";font-weight:700;font-size:1.6rem;letter-spacing:.06em;}
.logo .wm .en{font-size:.6rem;color:var(--ink-l);letter-spacing:.3em;margin-top:2px;}
.gnav{display:flex;gap:30px;align-items:center;font-size:.86rem;letter-spacing:.08em;}
.gnav a{position:relative;padding:6px 0;color:var(--ink-l);transition:color .2s;white-space:nowrap;}
.gnav a:hover,.gnav a[aria-current="page"]{color:var(--ink);}
.gnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--pink);transform:scaleX(0);transition:transform .25s;}
.gnav a:hover::after,.gnav a[aria-current="page"]::after{transform:scaleX(1);}
.navbtn{display:none;border:none;background:var(--cream);width:46px;height:46px;border-radius:14px;font-size:1.3rem;color:var(--ink);line-height:1;cursor:pointer;}
.mnav{display:none;flex-direction:column;background:var(--milk);border-top:1px solid var(--line);}
.mnav.open{display:flex;}
.mnav a{padding:15px 26px;border-bottom:1px solid var(--line);color:var(--ink);font-size:.95rem;}
.mnav a[aria-current="page"]{color:var(--sage-d);}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;border-radius:999px;padding:1rem 2.1rem;font-family:"Zen Maru Gothic";font-weight:500;font-size:.92rem;letter-spacing:.06em;cursor:pointer;border:none;transition:transform .16s,box-shadow .16s,background .16s;}
.btn-fill{background:var(--sage-d);color:#fff;box-shadow:0 12px 28px rgba(135,150,119,.35);}
.btn-fill:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(135,150,119,.45);}
.btn-line{border:1.5px solid var(--ink-l);color:var(--ink);background:transparent;}
.btn-line:hover{background:#fff;transform:translateY(-2px);}
.btn-sm{padding:.7rem 1.5rem;font-size:.84rem;}
.btns{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- セクション見出し ---------- */
.shead{text-align:center;margin-bottom:60px;}
.shead .en{display:block;color:var(--pink);font-size:.74rem;font-weight:600;margin-bottom:.7rem;}
.shead h2{font-size:clamp(1.5rem,3.6vw,2.15rem);margin:0;font-weight:500;}
.shead .note{color:var(--ink-l);font-size:.93rem;margin-top:1rem;font-weight:300;line-height:2;}
.tac{text-align:center;}

/* ---------- ページヒーロー（下層ページ） ---------- */
.phero{background:
  radial-gradient(46% 60% at 88% 14%, rgba(230,198,193,.30), transparent 70%),
  radial-gradient(46% 60% at 6% 92%, rgba(194,205,182,.28), transparent 70%),
  linear-gradient(180deg,var(--milk),var(--milk-d));
  padding:88px 0 76px;text-align:center;}
.phero .en{color:var(--sage-d);font-size:.76rem;font-weight:600;}
.phero h1{font-size:clamp(1.8rem,4.4vw,2.7rem);margin:.7rem 0 0;font-weight:500;}
.phero p{color:var(--ink-l);font-weight:300;margin:.9rem auto 0;max-width:34em;font-size:.96rem;}
.crumb{margin-top:1.6rem;font-size:.76rem;color:var(--ink-l);letter-spacing:.08em;}
.crumb a:hover{color:var(--ink);}
.crumb span{margin:0 .5em;opacity:.5;}

/* ---------- トップ ヒーロー ---------- */
.hero{background:
  radial-gradient(50% 55% at 88% 12%, rgba(230,198,193,.32), transparent 70%),
  radial-gradient(50% 55% at 6% 92%, rgba(194,205,182,.30), transparent 70%),
  linear-gradient(180deg,var(--milk),var(--milk-d));
  overflow:hidden;padding:110px 0 120px;}
.hero-grid{display:grid;grid-template-columns:1fr .92fr;gap:66px;align-items:center;}
.hero-copy>*{opacity:0;transform:translateY(20px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;}
.hero-copy .en{animation-delay:.05s;}
.hero-copy h1{animation-delay:.18s;}
.hero-copy p{animation-delay:.32s;}
.hero-copy .btns{animation-delay:.46s;}
@keyframes rise{to{opacity:1;transform:none;}}
.hero .en{color:var(--sage-d);font-size:.78rem;font-weight:600;}
.hero h1{font-size:clamp(1.85rem,4.4vw,3rem);margin:1rem 0 1.5rem;letter-spacing:.03em;font-weight:500;}
.hero h1 .soft{background:linear-gradient(transparent 66%, var(--sun) 66%);padding:0 .12em;}
.hero p{font-size:clamp(1rem,2.3vw,1.12rem);color:var(--ink-l);margin:0 0 2.6rem;font-weight:300;}
.hero-media{position:relative;opacity:0;animation:rise 1s cubic-bezier(.2,.7,.2,1) .3s forwards;}
.hero-media .photo{aspect-ratio:4/5;}
.floaty{position:absolute;pointer-events:none;animation:float 8s ease-in-out infinite;}
.floaty.a{top:-38px;right:-30px;width:108px;}
.floaty.b{bottom:34px;left:-42px;width:86px;animation-delay:2s;}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-14px) rotate(3deg);}}
.scrollcue{margin:64px auto 0;width:1px;height:46px;background:var(--ink-l);animation:cue 1.9s ease-in-out infinite;}
@keyframes cue{0%,100%{opacity:.15;transform:scaleY(.4);}50%{opacity:.9;transform:scaleY(1);}}

/* ---------- コンセプト帯 ---------- */
.concept{text-align:center;background:var(--milk);}
.concept .en{display:block;color:var(--pink);font-size:.74rem;font-weight:600;margin-bottom:2.2rem;}
.concept .lead{font-size:clamp(1.3rem,3.6vw,1.95rem);color:var(--sage-d);margin:0 auto 2.2rem;max-width:20em;line-height:2.1;}
.concept p{max-width:30em;margin:0 auto;color:var(--ink);font-weight:300;}

/* 名前の由来 */
.origin{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:44px;}
.origin .o{background:#fff;border-radius:20px;padding:22px 30px;box-shadow:var(--shadow-s);min-width:220px;}
.origin .o b{display:block;font-family:"Zen Maru Gothic";color:var(--sage-d);font-size:1.5rem;margin-bottom:.2rem;}
.origin .o span{font-size:.85rem;color:var(--ink-l);}

/* ---------- ロゴの方向性（ラフ案） ---------- */
.logolab{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:4px;}
.logolab .lg{background:#fff;border-radius:22px;padding:32px 24px;text-align:center;box-shadow:var(--shadow-s);}
.logolab .lg .frame{height:118px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.logolab .lg h4{font-size:.95rem;margin:0 0 .3rem;font-weight:500;}
.logolab .lg p{font-size:.79rem;color:var(--ink-l);margin:0;font-weight:300;line-height:1.75;}
@media(max-width:820px){.logolab{grid-template-columns:1fr;max-width:340px;margin-inline:auto;}}

/* ---------- カード（特長・こだわり） ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.card{background:#fff;border-radius:var(--r);padding:40px 24px;text-align:center;box-shadow:var(--shadow-s);}
.card .ico{width:60px;height:60px;margin:0 auto 20px;border-radius:19px;display:flex;align-items:center;justify-content:center;background:var(--pink-l);}
.card:nth-child(2) .ico{background:#EAF0E2;}
.card:nth-child(3) .ico{background:#E3EDF0;}
.card:nth-child(4) .ico{background:#F4EDDC;}
.card h3{font-size:1.08rem;margin:0 0 .7rem;font-weight:500;}
.card p{font-size:.87rem;color:var(--ink-l);margin:0;line-height:1.95;font-weight:300;}

/* ---------- こだわり（交互レイアウト） ---------- */
.alt{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.alt + .alt{margin-top:96px;}
.alt:nth-of-type(even) .alt-media{order:2;}
.alt .photo{aspect-ratio:5/4;}
.alt h3{font-size:clamp(1.3rem,3vw,1.75rem);margin:0 0 1.1rem;font-weight:500;}
.alt .en{display:block;color:var(--pink);font-size:.72rem;font-weight:600;margin-bottom:.7rem;}
.alt p{color:var(--ink);font-weight:300;margin:0 0 1rem;}
.alt ul{margin:1.2rem 0 0;padding:0;list-style:none;}
.alt ul li{position:relative;padding-left:1.5em;font-size:.9rem;color:var(--ink-l);margin-bottom:.5em;font-weight:300;}
.alt ul li::before{content:"❁";position:absolute;left:0;color:var(--sage);}

/* ---------- 商品グリッド ---------- */
.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.p{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;}
.p:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.p .ph{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--cream);}
.p .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(1.03);}
.p .tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.9);color:var(--sage-d);font-size:.68rem;font-weight:600;letter-spacing:.1em;padding:.25rem .8rem;border-radius:999px;}
.p .body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1;}
.p .body h3{font-size:1.08rem;margin:0 0 .5rem;font-weight:500;}
.p .body p{font-size:.86rem;color:var(--ink-l);margin:0 0 1rem;line-height:1.9;font-weight:300;flex:1;}
.p .price{font-family:"Zen Maru Gothic";font-weight:500;color:var(--sage-d);font-size:.98rem;}
.p .price small{color:var(--ink-l);font-weight:400;font-size:.72rem;}

.cat-nav{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:52px;}
.cat-nav a{border:1.5px solid var(--line);border-radius:999px;padding:.5rem 1.4rem;font-size:.83rem;color:var(--ink-l);transition:.18s;}
.cat-nav a:hover{border-color:var(--sage-d);color:var(--sage-d);}
.cat-title{font-size:1.3rem;text-align:center;margin:0 0 40px;font-weight:500;}
.cat-title .en{display:block;color:var(--pink);font-size:.7rem;font-weight:600;margin-bottom:.3rem;}
.cat + .cat{margin-top:100px;}

/* ---------- 商品詳細 ---------- */
.pd{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:start;}
.pd-gallery .main{aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--cream);}
.pd-gallery .main img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(1.03);}
.pd-thumbs{display:flex;gap:12px;margin-top:14px;}
.pd-thumbs button{flex:1;aspect-ratio:1/1;border-radius:16px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:var(--cream);}
.pd-thumbs button.on{border-color:var(--sage-d);}
.pd-thumbs img{width:100%;height:100%;object-fit:cover;}
.pd-info .en{color:var(--pink);font-size:.72rem;font-weight:600;}
.pd-info h1{font-size:clamp(1.5rem,3.4vw,2rem);margin:.5rem 0 .8rem;font-weight:500;}
.pd-info .catch{color:var(--sage-d);font-family:"Zen Maru Gothic";font-size:1.05rem;margin:0 0 1.4rem;}
.pd-info .price{font-size:1.4rem;font-family:"Zen Maru Gothic";color:var(--ink);margin:0 0 1.6rem;}
.pd-info .price small{font-size:.75rem;color:var(--ink-l);}
.opt{margin-bottom:1.4rem;}
.opt .lbl{font-size:.8rem;color:var(--ink-l);margin-bottom:.5rem;}
.swatches{display:flex;gap:10px;}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;}
.sizes{display:flex;gap:8px;}
.sizes span{border:1.5px solid var(--line);border-radius:10px;padding:.3rem .9rem;font-size:.82rem;color:var(--ink-l);}
.pd-info .note{font-size:.8rem;color:var(--ink-l);margin-top:1rem;font-weight:300;}

.spec{width:100%;border-collapse:collapse;font-size:.88rem;}
.spec th,.spec td{text-align:left;padding:14px 4px;border-bottom:1px solid var(--line);vertical-align:top;font-weight:400;}
.spec th{width:34%;color:var(--ink-l);font-weight:500;}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.step{text-align:center;}
.step .n{font-family:"Quicksand";font-weight:600;color:var(--sage-d);font-size:.9rem;letter-spacing:.1em;}
.step .im{aspect-ratio:4/3;border-radius:18px;overflow:hidden;margin:.6rem 0 1rem;background:var(--cream);}
.step .im img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(1.03);}
.step h4{margin:0 0 .4rem;font-size:1rem;font-weight:500;}
.step p{margin:0;font-size:.84rem;color:var(--ink-l);font-weight:300;}

/* ---------- アコーディオン FAQ ---------- */
.qa{max-width:800px;margin:0 auto;}
.qa details{background:#fff;border-radius:18px;padding:2px 26px;margin-bottom:14px;box-shadow:var(--shadow-s);}
.qa summary{list-style:none;cursor:pointer;padding:20px 0;font-family:"Zen Maru Gothic";font-weight:500;font-size:.98rem;display:flex;gap:14px;align-items:flex-start;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::before{content:"Q";flex:none;width:26px;height:26px;border-radius:50%;background:var(--pink-l);color:var(--sage-d);font-family:"Quicksand";font-weight:600;display:flex;align-items:center;justify-content:center;font-size:.8rem;}
.qa summary::after{content:"＋";margin-left:auto;color:var(--ink-l);transition:transform .2s;}
.qa details[open] summary::after{transform:rotate(45deg);}
.qa .a{margin:0 0 22px 40px;font-size:.89rem;color:var(--ink-l);line-height:2;font-weight:300;}
.faq-cat{max-width:800px;margin:0 auto 12px;font-size:.9rem;color:var(--sage-d);font-weight:600;letter-spacing:.08em;padding-top:36px;}
.faq-cat:first-of-type{padding-top:0;}

/* ---------- お客様の声 ---------- */
.voices{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.voice{background:#fff;border-radius:var(--r);padding:34px 32px;box-shadow:var(--shadow-s);}
.voice .stars{color:var(--sun);letter-spacing:.15em;font-size:.9rem;}
.voice p{font-size:.92rem;margin:.7rem 0 1.2rem;font-weight:300;line-height:2;}
.voice .who{display:flex;align-items:center;gap:12px;font-size:.82rem;color:var(--ink-l);}
.voice .who .av{width:38px;height:38px;border-radius:50%;background:var(--pink-l);flex:none;display:flex;align-items:center;justify-content:center;color:var(--sage-d);font-family:"Zen Maru Gothic";}

/* ---------- Instagram風グリッド ---------- */
.gram{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.gram a{aspect-ratio:1/1;border-radius:16px;overflow:hidden;position:relative;background:var(--cream);}
.gram img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(1.03);transition:transform .3s;}
.gram a:hover img{transform:scale(1.06);}

/* ---------- ストーリー（エッセイ） ---------- */
.essay{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.essay + .essay{margin-top:80px;}
.essay:nth-of-type(even) .essay-media{order:2;}
.essay .photo{aspect-ratio:4/3;}
.essay .en{display:block;color:var(--pink);font-size:.72rem;font-weight:600;margin-bottom:.6rem;}
.essay h3{font-size:clamp(1.2rem,2.8vw,1.55rem);margin:0 0 1rem;font-weight:500;}
.essay p{color:var(--ink);font-weight:300;font-size:.94rem;margin:0;}

/* ---------- タイムライン ---------- */
.tl{max-width:640px;margin:0 auto;position:relative;padding-left:28px;}
.tl::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:var(--cream-d);}
.tl .row{position:relative;padding-bottom:34px;}
.tl .row::before{content:"";position:absolute;left:-28px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--sage-d);box-shadow:0 0 0 4px var(--milk);}
.tl .yr{font-family:"Quicksand";font-weight:600;color:var(--sage-d);font-size:.9rem;letter-spacing:.08em;}
.tl h4{margin:.2rem 0 .3rem;font-size:1rem;font-weight:500;}
.tl p{margin:0;font-size:.86rem;color:var(--ink-l);font-weight:300;}

/* ---------- CTA帯 ---------- */
.cta{background:var(--sage-d);color:#fff;text-align:center;}
.cta h2{font-size:clamp(1.4rem,3.4vw,2rem);margin:0 0 1.1rem;font-weight:500;}
.cta p{color:rgba(255,255,255,.86);margin:0 0 2.2rem;font-size:.93rem;font-weight:300;}
.cta .btn-fill{background:#fff;color:var(--sage-d);box-shadow:0 14px 34px rgba(0,0,0,.16);}
.cta .btn-line{border-color:rgba(255,255,255,.6);color:#fff;}
.cta .btn-line:hover{background:rgba(255,255,255,.12);}

/* ---------- お買い求めはこちら（販売チャネル） ---------- */
.shop{background:var(--sage-l);text-align:center;}
.shop .shead{margin-bottom:36px;}
.shop .headline{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:10px;}
.shop .headline svg{width:34px;height:34px;flex:none;}
.shop .headline .en{color:var(--sage-d);font-size:.72rem;font-weight:600;}
.shop .headline h2{font-size:1.35rem;margin:0;font-weight:500;}
.shop .note{color:var(--sage-d);font-size:.84rem;font-weight:300;margin:0 0 34px;}
.shop-btns{display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:16px;justify-content:center;}
.shop-btns a{background:#fff;border-radius:999px;padding:1.05rem 1.4rem;font-family:"Zen Maru Gothic";font-weight:500;font-size:.95rem;color:var(--sage-d);box-shadow:0 12px 26px rgba(110,124,95,.16);transition:transform .15s,box-shadow .15s;}
.shop-btns a:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(110,124,95,.24);}
.shop .disclaimer{margin-top:26px;font-size:.76rem;color:var(--sage-d);font-weight:300;opacity:.9;}

/* 商品詳細インラインの販売店ボタン */
.shop-inline{margin:1.4rem 0;}
.shop-inline .lbl{font-size:.8rem;color:var(--ink-l);margin-bottom:.6rem;}
.shop-inline .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.shop-inline .row a{background:var(--sage-l);border-radius:12px;padding:.7rem 1rem;font-size:.85rem;font-family:"Zen Maru Gothic";color:var(--sage-d);text-align:center;transition:background .15s;}
.shop-inline .row a:hover{background:#dbe8cf;}

/* ---------- ニュースレター ---------- */
.news{background:var(--pink-l);text-align:center;}
.news h2{font-size:1.5rem;margin:0 0 .6rem;font-weight:500;}
.news p{color:var(--ink-l);font-size:.9rem;font-weight:300;margin:0 0 1.6rem;}
.news form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;}
.news input{flex:1;min-width:200px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:.9rem 1.4rem;font:inherit;font-size:.88rem;}

/* ---------- フォーム ---------- */
.form{max-width:640px;margin:0 auto;}
.field{margin-bottom:22px;}
.field label{display:block;font-size:.85rem;color:var(--ink-l);margin-bottom:.5rem;}
.field label .req{color:var(--pink);font-size:.7rem;margin-left:.4em;}
.field input,.field select,.field textarea{
  width:100%;border:1.5px solid var(--line);background:#fff;border-radius:14px;
  padding:.9rem 1.1rem;font:inherit;font-size:.92rem;color:var(--ink);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.9;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sage-d);}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--ink-l);font-weight:300;}
.check input{width:auto;margin-top:.4rem;}
.form-done{display:none;background:#fff;border-radius:var(--r);padding:40px;text-align:center;box-shadow:var(--shadow-s);}
.form-done.on{display:block;}
.form-done h3{margin:0 0 .6rem;font-weight:500;}
.form-done p{margin:0;color:var(--ink-l);font-size:.9rem;font-weight:300;}

.info-box{background:#fff;border-radius:var(--r);padding:34px 36px;box-shadow:var(--shadow-s);}
.info-box h3{margin:0 0 .8rem;font-size:1.1rem;font-weight:500;}
.info-box p{margin:0;font-size:.88rem;color:var(--ink-l);font-weight:300;}

/* ---------- 会社概要テーブル ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.88rem;}
.tbl th,.tbl td{text-align:left;padding:16px 8px;border-bottom:1px solid var(--line);vertical-align:top;font-weight:400;}
.tbl th{width:30%;color:var(--ink-l);font-weight:500;background:var(--milk-d);padding-left:16px;}

/* ---------- フッター ---------- */
footer{background:var(--cream);padding:70px 0 30px;font-size:.83rem;color:var(--ink-l);}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;}
footer .logo .wm b{font-size:1.35rem;}
footer .fabout{margin-top:16px;font-weight:300;font-size:.82rem;max-width:24em;}
footer h5{font-family:"Zen Maru Gothic";font-weight:500;color:var(--ink);font-size:.9rem;margin:0 0 .9rem;}
footer .fnav{display:flex;flex-direction:column;gap:.55rem;}
footer .fnav a:hover{color:var(--ink);}
footer .sns{display:flex;gap:12px;margin-top:.2rem;}
footer .sns a{width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--sage-d);}
.fbot{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.76rem;}
.demo-ribbon{background:var(--sage-dd);color:#fff;text-align:center;font-size:.76rem;padding:8px 16px;letter-spacing:.06em;}
.demo-ribbon b{color:#fff;font-weight:600;}

/* ---------- レスポンシブ ---------- */
@media(max-width:960px){
  .cards{grid-template-columns:repeat(2,1fr);}
  .gram{grid-template-columns:repeat(3,1fr);}
  .fgrid{grid-template-columns:1fr 1fr;gap:30px;}
}
@media(max-width:860px){
  section{padding:78px 0;}
  .gnav{display:none;}
  .navbtn{display:block;}
  .hero{padding:70px 0 84px;}
  .hero-grid{grid-template-columns:1fr;gap:44px;}
  .hero-media{order:-1;max-width:380px;margin-inline:auto;}
  .hero .btns{justify-content:center;}
  .hero-copy{text-align:center;}
  .alt,.essay{grid-template-columns:1fr;gap:32px;}
  .alt .alt-media,.essay .essay-media{order:-1!important;}
  .alt .photo,.essay .photo{max-width:460px;margin-inline:auto;}
  .alt + .alt{margin-top:60px;}
  .pd{grid-template-columns:1fr;gap:36px;}
  .plist,.voices{grid-template-columns:1fr;max-width:420px;margin-inline:auto;}
  .steps{grid-template-columns:1fr;max-width:360px;margin-inline:auto;}
}
@media(max-width:560px){
  .wrap,.wrap-narrow{padding-inline:20px;}
  .shop-btns{grid-template-columns:1fr;max-width:300px;margin-inline:auto;}
  .shop-inline .row{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;max-width:330px;margin-inline:auto;}
  .gram{grid-template-columns:repeat(2,1fr);}
  .fgrid{grid-template-columns:1fr;}
  .logo .wm b{font-size:1.35rem;}
  .btns .btn{flex:1;justify-content:center;padding:.9rem 1rem;font-size:.84rem;white-space:nowrap;}
  .origin .o span{word-break:keep-all;}
  .origin .o{min-width:0;flex:1;}
}