@charset "UTF-8";
/* じぶん肯定ラボ コーポレートサイト v14 — 写真・水彩イラストで雰囲気を伝える／文字は最小限／実物で凄さを見せる */

:root{
  --ink:#2F2823;
  --ink2:#5A5047;
  --ink3:#948779;
  --bg:#FFFFFF;
  --paper:#FAF7F1;
  --cream:#FDFBF6;
  --line:#E8E0D3;
  --gold:#B08D57;
  --gold-d:#8A6E43;
  --rose:#C9506F;
  --rose-pale:#FBF1F3;
  --mincho:"Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --gothic:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --latin:"Cormorant Garamond",var(--mincho);
  --maxw:1160px;
  --shadow:0 24px 60px -34px rgba(47,40,35,.4);
  --shadow-s:0 14px 34px -24px rgba(47,40,35,.3);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink2);
  font-family:var(--gothic);font-size:16px;line-height:2;
  letter-spacing:.04em;font-feature-settings:"palt";overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--mincho);color:var(--ink);font-weight:600;line-height:1.8;letter-spacing:.1em}
p{margin:0}
b,strong{font-weight:700;color:var(--ink)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.narrow{max-width:760px;margin:0 auto}
.pad{padding:clamp(72px,10vw,132px) 0}
.pad-s{padding:clamp(52px,7vw,88px) 0}
.paper{background:var(--paper)}
.center{text-align:center}

.kicker{
  display:block;font-family:var(--latin);font-size:.68rem;letter-spacing:.4em;
  color:var(--gold-d);text-transform:uppercase;margin-bottom:18px;font-weight:600;
  font-variant-numeric:lining-nums;
}
.sec-title{font-size:clamp(1.3rem,3.6vw,1.75rem);letter-spacing:.14em}
.sec-lead{margin-top:22px;font-size:.95rem;line-height:2.2;color:var(--ink2)}

/* ── ボタン ───────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;max-width:100%;
  padding:17px 38px;border-radius:2px;font-family:var(--gothic);font-weight:700;
  font-size:.9rem;letter-spacing:.12em;text-decoration:none;border:1px solid transparent;
  transition:background .25s,color .25s,border-color .25s;
}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:#4A3E35;border-color:#4A3E35}
.btn-outline{background:transparent;color:var(--ink);border-color:#CFC3B0}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-d)}
.btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn .ar{font-family:var(--latin);font-size:1.1em;line-height:1}
.btnrow{display:flex;flex-wrap:wrap;gap:14px}
.btnrow.c{justify-content:center}

/* ── ヘッダー ─────────────────────────── */
#header{position:fixed;inset:0 0 auto 0;z-index:120;padding:20px 0;transition:background .3s,box-shadow .3s,padding .3s}
#header.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(47,40,35,.08);padding:11px 0}
#header.menu-open{background:transparent;backdrop-filter:none;box-shadow:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1240px;margin:0 auto;padding:0 26px}
.brand{font-family:var(--mincho);font-size:1rem;font-weight:600;color:#fff;text-decoration:none;letter-spacing:.14em;line-height:1.3;display:block;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.brand small{display:block;font-family:var(--latin);font-size:.54rem;letter-spacing:.34em;opacity:.8;margin-top:5px;font-weight:500}
#header.scrolled .brand{color:var(--ink);text-shadow:none}
#header.menu-open .brand{color:#fff;text-shadow:none}
.menu{display:flex;align-items:center;gap:28px}
.menu a{font-size:.8rem;text-decoration:none;color:#fff;letter-spacing:.1em;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.5);transition:color .2s}
#header.scrolled .menu a{color:var(--ink2);text-shadow:none}
.menu a:hover{color:var(--gold)}
.menu a.navcta{background:var(--ink);color:#fff;text-shadow:none;padding:11px 22px;border-radius:2px;font-weight:700}
#header.scrolled .menu a.navcta{color:#fff}
.menu a.navcta:hover{background:#4A3E35;color:#fff}
.hamb{display:none;width:30px;height:20px;position:relative;cursor:pointer;flex:0 0 auto}
.hamb span{position:absolute;left:0;width:100%;height:1.5px;background:#fff;transition:.3s;border-radius:2px}
#header.scrolled .hamb span{background:var(--ink)}
#header.scrolled .hamb.active span{background:#fff}
.hamb span:nth-child(1){top:0}.hamb span:nth-child(2){top:9px}.hamb span:nth-child(3){top:18px}
.hamb.active span:nth-child(1){top:9px;transform:rotate(45deg);background:#fff}
.hamb.active span:nth-child(2){opacity:0}
.hamb.active span:nth-child(3){top:9px;transform:rotate(-45deg);background:#fff}
@media(max-width:900px){
  .hamb{display:block;z-index:130}
  .menu{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:26px;background:rgba(47,40,35,.97);transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
  .menu.open{transform:translateX(0)}
  .menu a,#header.scrolled .menu a{color:#fff;font-size:1rem;text-shadow:none}
  .menu a.navcta{padding:15px 34px}
}

/* ── ヒーロー ─────────────────────────── */
.hero{position:relative;min-height:min(94svh,880px);display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:center 40%/cover no-repeat;animation:kb 34s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.11)}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(40,33,27,.5) 0%,rgba(40,33,27,.2) 46%,rgba(40,33,27,.05) 72%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px;color:#fff}
.hero .kicker{color:#E9D6B4}
.hero h1{color:#fff;font-size:clamp(1.45rem,5.2vw,3.1rem);line-height:1.95;letter-spacing:.14em;text-shadow:0 2px 30px rgba(0,0,0,.42)}
.hero .sub{margin-top:28px;font-size:clamp(.88rem,2.2vw,1rem);line-height:2.2;color:rgba(255,255,255,.92);letter-spacing:.1em;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.hero .btnrow{margin-top:38px}

/* ── ひとことブロック（イラストを添える） ── */
.statement{display:grid;grid-template-columns:1fr 300px;gap:clamp(28px,5vw,64px);align-items:center}
.statement .txt p{
  font-family:var(--mincho);color:var(--ink);
  font-size:clamp(1.15rem,3.3vw,1.66rem);line-height:2.3;letter-spacing:.15em;
}
.statement .txt .small{
  margin-top:26px;font-family:var(--gothic);font-size:.9rem;color:var(--ink3);
  line-height:2.2;letter-spacing:.08em;
}
.statement .il img{width:100%;mix-blend-mode:multiply}

/* ── 事業（写真カード・4列） ───────────── */
.works{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px)}
.work{display:block;text-decoration:none}
.work .ph{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:3/4;background:var(--paper)}
.work .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.work:hover .ph img{transform:scale(1.05)}
.work .tag{
  position:absolute;left:0;top:16px;background:rgba(255,255,255,.94);color:var(--gold-d);
  font-size:.57rem;letter-spacing:.2em;font-weight:700;padding:6px 12px 6px 14px;
}
.work h3{margin-top:16px;font-size:clamp(.92rem,1.6vw,1.02rem);letter-spacing:.08em;line-height:1.7}
.work p{margin-top:7px;font-size:.79rem;color:var(--ink3);line-height:1.9;letter-spacing:.04em}
.work .go{display:inline-block;margin-top:9px;font-size:.7rem;letter-spacing:.14em;color:var(--gold-d);font-weight:700}
.work .go::after{content:"↗";margin-left:6px}

/* ── サービス（実物で見せる） ─────────── */
.feature{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,72px);align-items:center}
.feature + .feature{margin-top:clamp(56px,8vw,110px)}
.feature.flip .media{order:2}
.feature .lb{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--latin);font-size:.68rem;
  letter-spacing:.26em;color:var(--gold-d);font-weight:600;font-variant-numeric:lining-nums;
}
.feature .lb i{font-style:normal;background:var(--ink);color:#fff;font-family:var(--gothic);
  font-size:.62rem;letter-spacing:.08em;padding:3px 8px;font-weight:700}
.feature .stat{display:flex;align-items:baseline;gap:10px;margin:16px 0 4px;flex-wrap:wrap}
.feature .stat .n{font-family:var(--mincho);font-size:clamp(2.4rem,6.4vw,3.5rem);color:var(--ink);line-height:1;letter-spacing:.02em}
.feature .stat .u{font-size:.95rem;color:var(--ink);letter-spacing:.1em;font-weight:700}
.feature h3{font-size:clamp(1.02rem,2.4vw,1.2rem);letter-spacing:.1em;margin-top:14px}
.feature .desc{margin-top:14px;font-size:.9rem;line-height:2.1;color:var(--ink2);letter-spacing:.05em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span{
  font-size:.75rem;letter-spacing:.05em;color:var(--ink2);background:var(--paper);
  border:1px solid var(--line);border-radius:99px;padding:6px 14px;line-height:1.6;
}
.feature .fine{margin-top:16px;font-size:.74rem;color:var(--ink3);line-height:1.9}

/* 実物スクショの並べ方 */
.shots{display:flex;gap:14px;align-items:flex-start;justify-content:center}
.shots img{
  width:32%;border-radius:6px;border:1px solid var(--line);
  box-shadow:var(--shadow-s);background:#fff;
}
.shots img:nth-child(1){transform:translateY(16px)}
.shots img:nth-child(3){transform:translateY(16px)}
.media .il img{width:100%;mix-blend-mode:multiply}

/* LINEトーク見本 */
.talk{background:#E7EDEF;border-radius:10px;padding:20px 18px;box-shadow:var(--shadow-s);max-width:420px;margin:0 auto}
.talk .row{display:flex;margin-bottom:10px}
.talk .row.me{justify-content:flex-end}
.talk .bub{max-width:84%;padding:11px 15px;border-radius:14px;font-size:.82rem;line-height:1.85;background:#fff;color:var(--ink2);box-shadow:0 1px 3px rgba(0,0,0,.06);letter-spacing:.02em}
.talk .row.me .bub{background:#8DE055;color:#243318}
.talk .bub .ttl{display:block;font-weight:700;color:var(--ink);margin-bottom:4px;font-size:.8rem}
.talk .bub .num{display:block;font-family:var(--mincho);font-size:1.06rem;color:var(--rose);margin:5px 0 2px;letter-spacing:.02em}
.talk .cap{font-size:.68rem;color:#7C8A8E;text-align:center;margin-top:6px;line-height:1.8}

/* ── 提携（帯＋ステップ） ───────────── */
.band{position:relative;min-height:clamp(360px,46vw,520px);display:flex;align-items:center;overflow:hidden}
.band-bg{position:absolute;inset:0;background:center 45%/cover no-repeat}
.band-bg.partner{background-image:url("../images/v-partner.jpg")}
.band-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.1) 0%,rgba(252,248,240,.55) 40%,rgba(252,248,240,.95) 66%)}
.band-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:56px 26px;width:100%}
.band-txt{margin-left:auto;max-width:460px}
.band-txt h2{font-size:clamp(1.25rem,3.4vw,1.7rem);letter-spacing:.14em}
.band-txt p{margin-top:20px;font-size:.9rem;line-height:2.2;color:var(--ink2);letter-spacing:.06em}
.band-txt .btnrow{margin-top:28px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,30px)}
.step{text-align:center}
.step .im img{width:100%;aspect-ratio:1;object-fit:cover;mix-blend-mode:multiply}
.step .n{display:block;margin-top:10px;font-family:var(--latin);font-size:.68rem;letter-spacing:.26em;color:var(--gold-d);font-weight:600;font-variant-numeric:lining-nums}
.step p{margin-top:8px;font-size:.83rem;line-height:1.95;color:var(--ink2);letter-spacing:.04em}

/* ── 代表 ─────────────────────────────── */
.rep{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
.rep .ph{position:relative}
.rep .ph img{border-radius:2px;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;box-shadow:var(--shadow)}
.rep .ph img.medal{position:absolute;right:-18px;bottom:-18px;width:40%;border:5px solid #fff;aspect-ratio:1;object-position:center 12%}
.rep .words{font-family:var(--mincho);color:var(--ink);font-size:clamp(1.08rem,2.8vw,1.4rem);line-height:2.25;letter-spacing:.12em}
.rep .note{margin-top:24px;font-size:.88rem;color:var(--ink2);line-height:2.15;letter-spacing:.05em}
.rep .note + .note{margin-top:14px}
.rep .cred{margin-top:22px;font-size:.78rem;color:var(--ink3);line-height:1.95}
.rep .sign{margin-top:22px;font-size:.75rem;color:var(--ink3);letter-spacing:.1em}
.rep .sign b{display:block;font-family:var(--mincho);font-size:1.16rem;color:var(--ink);letter-spacing:.16em;margin-top:6px}

/* ── 事業者概要 ─────────────────────────── */
.about{display:grid;gap:0}
.about .r{display:grid;grid-template-columns:150px 1fr;padding:16px 0;border-bottom:1px solid var(--line)}
.about .r:first-child{border-top:1px solid var(--line)}
.about dt{font-size:.78rem;color:var(--ink3);letter-spacing:.1em;margin:0}
.about dd{margin:0;font-size:.89rem;color:var(--ink);line-height:1.95}
.about dd a{color:var(--gold-d);text-decoration:underline;text-underline-offset:3px}
.about dd small{display:block;font-size:.76rem;color:var(--ink3);margin-top:3px}

/* ── お問い合わせ ───────────────────── */
.contact{position:relative;overflow:hidden;padding:clamp(84px,11vw,140px) 0}
.contact-bg{position:absolute;inset:0;background:url("../images/v-closing.jpg") center 55%/cover no-repeat}
.contact-scrim{position:absolute;inset:0;background:rgba(47,40,35,.72)}
.contact-in{position:relative;z-index:2;text-align:center;color:#fff;max-width:var(--maxw);margin:0 auto;padding:0 26px}
.contact .kicker{color:var(--gold)}
.contact h2{color:#fff;font-size:clamp(1.3rem,3.8vw,1.8rem);letter-spacing:.16em}
.contact p{margin-top:22px;color:rgba(255,255,255,.82);font-size:.9rem;line-height:2.2;letter-spacing:.08em}
.contact .btnrow{margin-top:36px}
.contact .btn-primary{background:var(--gold);border-color:var(--gold)}
.contact .btn-primary:hover{background:var(--gold-d);border-color:var(--gold-d)}
.contact .fine{margin-top:30px;font-size:.76rem;color:rgba(255,255,255,.55);letter-spacing:.06em}
.contact .fine a{color:rgba(255,255,255,.8)}
.contact .il{width:min(190px,42vw);margin:0 auto 22px}
.contact .il img{width:100%;opacity:.96}

/* ── フッター ─────────────────────────── */
footer{background:#241E1A;color:rgba(255,255,255,.6);padding:48px 0 36px}
footer .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:26px;align-items:flex-start;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.1)}
.fbrand{font-family:var(--mincho);color:#fff;font-size:1rem;letter-spacing:.14em}
.fbrand small{display:block;font-family:var(--latin);font-size:.54rem;letter-spacing:.32em;opacity:.55;margin-top:5px}
.flinks{display:flex;flex-wrap:wrap;gap:10px 24px}
.flinks a{font-size:.78rem;text-decoration:none;color:rgba(255,255,255,.68);transition:color .2s;letter-spacing:.06em}
.flinks a:hover{color:#fff}
.copy{margin-top:20px;font-size:.7rem;color:rgba(255,255,255,.35);letter-spacing:.05em;line-height:1.9}

/* ── 演出 ─────────────────────────────── */
.reveal{transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.visible{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
}

/* ── 下層ページ ───────────────────────── */
.page-hero{position:relative;min-height:min(48svh,380px);display:flex;align-items:flex-end;overflow:hidden}
.page-hero-bg{position:absolute;inset:0;background:center 40%/cover no-repeat}
.page-hero-bg.partner{background-image:url("../images/v-partner.jpg")}
.page-hero-bg.voice{background-image:url("../images/v-bridal.jpg")}
.page-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,33,27,.5),rgba(40,33,27,.3) 40%,rgba(40,33,27,.78))}
.ph-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 26px 44px;color:#fff;width:100%}
.ph-in h1{color:#fff;font-size:clamp(1.4rem,4.4vw,2rem);letter-spacing:.16em}
.ph-in p{margin-top:14px;font-size:.86rem;color:rgba(255,255,255,.86);line-height:2;letter-spacing:.06em}
.ph-in .kicker{color:#E9D6B4}
.crumbs{font-size:.72rem;color:rgba(255,255,255,.72);margin-bottom:16px;letter-spacing:.06em}
.crumbs a{color:rgba(255,255,255,.72);text-decoration:none}
.crumbs a:hover{color:#fff}

.terms{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.terms .cap{background:var(--ink);color:#fff;padding:15px 24px;font-family:var(--mincho);font-size:.95rem;letter-spacing:.12em}
.terms .r{display:grid;grid-template-columns:200px 1fr;border-bottom:1px solid var(--line)}
.terms .r:last-child{border-bottom:0}
.terms .k{padding:16px 24px;font-size:.82rem;color:var(--ink3);background:#FCFAF6}
.terms .v{padding:16px 24px;font-size:.87rem;color:var(--ink);line-height:1.95}
.terms .v em{font-style:normal;color:var(--gold-d);font-weight:700}
.terms .v small{display:block;font-size:.79rem;color:var(--ink3);margin-top:5px;line-height:1.9}
.note{font-size:.78rem;color:var(--ink3);line-height:1.95}
.pts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pt{background:var(--paper);border-radius:2px;padding:24px 22px}
.pt h3{font-size:.96rem;margin-bottom:9px;letter-spacing:.08em}
.pt p{font-size:.83rem;color:var(--ink2);line-height:1.95}

.qwall{columns:3;column-gap:20px}
.qw{break-inside:avoid;background:#fff;border:1px solid var(--line);border-radius:2px;padding:26px 24px;margin-bottom:20px}
.qw p{font-family:var(--mincho);font-size:.95rem;line-height:2;color:var(--ink);letter-spacing:.06em}
.qw .who{margin-top:15px;padding-top:12px;border-top:1px solid var(--line);font-size:.74rem;color:var(--ink3)}
.story{max-width:780px;margin:0 auto 20px;background:#fff;border:1px solid var(--line);border-radius:2px;padding:34px 36px}
.story .idx{font-family:var(--latin);font-size:.72rem;letter-spacing:.26em;color:var(--gold-d);font-weight:600;margin-bottom:14px;font-variant-numeric:lining-nums}
.story .head-quote{font-family:var(--mincho);font-size:clamp(1.05rem,3vw,1.34rem);color:var(--ink);line-height:1.95;letter-spacing:.09em;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.story .supp{font-size:.89rem;line-height:2.1;color:var(--ink2)}
.story .supp+.supp{margin-top:12px}
.story .who{margin-top:20px;font-size:.77rem;color:var(--ink3);text-align:right}

/* 見出しに添える小さなイラスト */
.il-lead{width:min(210px,44vw);margin:0 auto 6px}
.il-lead img{width:100%;mix-blend-mode:multiply}

/* ── レスポンシブ ─────────────────────── */
@media(max-width:1000px){
  .works{grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,32px)}
  .work .ph{aspect-ratio:4/5}
  .work h3{font-size:1.02rem}
  .work p{font-size:.83rem}
}
@media(max-width:900px){
  .statement,.feature,.rep{grid-template-columns:1fr}
  .statement{gap:28px}
  .statement .il{max-width:240px;margin:0 auto}
  .feature.flip .media{order:0}
  .feature + .feature{margin-top:clamp(48px,7vw,80px)}
  .rep{gap:34px}
  .rep .ph{max-width:320px;margin:0 auto}
  .steps,.pts{grid-template-columns:1fr 1fr}
  .band{min-height:0}
  .band-scrim{background:linear-gradient(180deg,rgba(252,248,240,.34) 0%,rgba(252,248,240,.9) 46%,rgba(252,248,240,.98) 100%)}
  .band-txt{margin-left:0;max-width:none}
  .band-in{padding:clamp(200px,42vw,300px) 26px 56px}
  .terms .r{grid-template-columns:1fr}
  .terms .k{padding:14px 20px 3px}
  .terms .v{padding:0 20px 15px}
  .qwall{columns:2}
  .story{padding:26px 22px}
}
@media(max-width:560px){
  body{font-size:15px}
  .works{gap:16px}
  .work h3{font-size:.94rem}
  .work p{font-size:.78rem}
  .steps,.pts{grid-template-columns:1fr}
  .about .r{grid-template-columns:1fr;gap:2px}
  .qwall{columns:1}
  .btnrow .btn{width:100%}
  .hero h1{line-height:1.85}
  .shots img{width:33%}
}

/* ── v15: 図解（線画＋水彩のタッチをSVGで） ── */
.dgm{width:100%;max-width:210px;margin:0 auto;display:block}
.dgm .ln{fill:none;stroke:#8A7E73;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dgm .ln-t{fill:none;stroke:#A79A8B;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.dgm .wc{filter:url(#wcblur);opacity:.5}
.dgm .rose{fill:#E8A8B8}
.dgm .gold{fill:#D9BE8E}
.dgm .blue{fill:#B9C6D2}
.dgm .paperfill{fill:#FFFFFF}

/* ── v15: LINE画面（実物の食事写真つき） ── */
.talk{background:#E7EDEF;border-radius:12px;padding:18px 16px;box-shadow:var(--shadow-s);max-width:400px;margin:0 auto}
.talk .row{display:flex;margin-bottom:11px}
.talk .row.me{justify-content:flex-end}
.talk .bub{max-width:86%;padding:11px 14px;border-radius:14px;font-size:.8rem;line-height:1.85;background:#fff;color:var(--ink2);box-shadow:0 1px 3px rgba(0,0,0,.06);letter-spacing:.02em}
.talk .row.me .bub{background:#8DE055;color:#243318}
.talk .photo{max-width:64%;border-radius:14px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.talk .photo img{width:100%;display:block}
.talk .card{background:#fff;border-radius:14px;padding:13px 15px;max-width:88%;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.talk .card .hd{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--ink3);letter-spacing:.04em;padding-bottom:8px;border-bottom:1px solid #EFEBE4}
.talk .card .hd b{color:var(--ink);font-size:.78rem}
.talk .card .hd .ok{margin-left:auto;background:#EAF6E4;color:#4B7A3A;border-radius:99px;padding:2px 8px;font-size:.63rem;font-weight:700}
.talk .card .items{margin:9px 0 0;display:grid;gap:3px}
.talk .card .items li{display:flex;font-size:.73rem;color:var(--ink2);line-height:1.75}
.talk .card .items li span{margin-left:auto;color:var(--ink3)}
.talk .card .tot{margin-top:10px;padding-top:9px;border-top:1px solid #EFEBE4}
.talk .card .kc{font-family:var(--mincho);font-size:1.16rem;color:var(--rose);letter-spacing:.02em}
.talk .card .kc small{font-family:var(--gothic);font-size:.68rem;color:var(--ink3);margin-right:6px;letter-spacing:.06em}
.talk .card .pfc{display:flex;gap:12px;margin-top:5px;font-size:.73rem;color:var(--ink2)}
.talk .card .pfc b{font-family:var(--mincho);font-size:.92rem;color:var(--ink);margin-right:2px}
.talk .card .bar{margin-top:12px}
.talk .card .bar .lbl{display:flex;font-size:.68rem;color:var(--ink3);margin-bottom:5px}
.talk .card .bar .lbl span{margin-left:auto}
.talk .card .bar .track{height:8px;border-radius:99px;background:#F1EDE5;overflow:hidden;display:flex}
.talk .card .bar .fill{background:linear-gradient(90deg,#E8A8B8,#DC7F98)}
.talk .card .bar .now{background:#F3CBD6}
.talk .card .bar .rest{margin-top:6px;font-size:.7rem;color:var(--ink3)}
.talk .cap{font-size:.67rem;color:#7C8A8E;text-align:center;margin-top:8px;line-height:1.8}

/* ── v15: ひとこと（写真） ───────────── */
.statement .ph img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;box-shadow:var(--shadow-s)}
@media(max-width:900px){
  .statement .ph{max-width:340px;margin:0 auto}
}

.talk .card .bar .track > i{display:block;height:100%}
.feature .media .ph img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;box-shadow:var(--shadow-s)}
.step .im{display:flex;align-items:center;justify-content:center;min-height:132px}

/* ── v16: サービス名を主役に ───────────── */
.feature .lb{margin-bottom:4px}
.feature h3.svc{
  font-size:clamp(1.42rem,3.6vw,2rem);letter-spacing:.12em;line-height:1.6;margin:6px 0 0;
}
.feature .cat{
  font-family:var(--mincho);color:var(--ink);font-size:clamp(1rem,2.3vw,1.16rem);
  line-height:1.95;letter-spacing:.09em;margin-top:16px;
}
.feature .stat{margin:14px 0 0}
.feature .stat .n{font-size:clamp(2rem,5.2vw,2.8rem)}
.feature .stat .u{font-size:.9rem;color:var(--ink2)}
.feature .desc{margin-top:14px}

/* ── v16: 代表（ボディビルの写真＋豪華な額装） ── */
.rep .ph{
  position:relative;padding:clamp(16px,2.4vw,26px);border-radius:2px;
  background:radial-gradient(120% 92% at 32% 18%,#5A483C 0%,#33281F 52%,#1D1713 100%);
  border:1px solid rgba(176,141,87,.5);
  box-shadow:0 30px 70px -34px rgba(29,23,19,.75), inset 0 0 60px rgba(176,141,87,.12);
}
.rep .ph::after{
  content:"";position:absolute;inset:clamp(8px,1.2vw,13px);
  border:1px solid rgba(176,141,87,.32);pointer-events:none;
}
.rep .ph img{
  border-radius:0;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 12%;
  box-shadow:none;position:relative;z-index:1;
}
.rep .ph img.sub{
  position:absolute;right:-16px;bottom:-16px;width:38%;aspect-ratio:1;object-fit:cover;
  object-position:center 22%;border:5px solid #fff;z-index:2;
  box-shadow:0 18px 40px -22px rgba(29,23,19,.6);
}
@media(max-width:900px){ .rep .ph img.sub{right:-10px;bottom:-10px;width:36%} }

/* ── v16: 提携の帯（写真差し替え） ─────── */
.band-bg.partner{background-image:url("../images/voice-hero.jpg");background-position:center 34%}

/* 提携ページのヘッダーも、式場に限らない絵に */
.page-hero-bg.partner{background-image:url("../images/voice-hero.jpg");background-position:center 30%}

/* ── v17: ファーストビューを実写に ───────── */
.hero-bg{background-image:url("../images/hero-fv.jpg");background-position:center 34%}
.hero-scrim{background:linear-gradient(100deg,rgba(58,46,37,.52) 0%,rgba(58,46,37,.3) 34%,rgba(58,46,37,.06) 60%,rgba(58,46,37,0) 78%)}
@media(max-width:900px){
  /* 縦画面では顔が上に見えるよう、文字を下に寄せる */
  .hero{align-items:flex-end}
  .hero-in{padding-bottom:clamp(44px,7vw,64px)}
  .hero-bg{background-position:82% center}
  .hero-scrim{background:linear-gradient(180deg,rgba(58,46,37,.10) 0%,rgba(58,46,37,.28) 40%,rgba(58,46,37,.62) 72%,rgba(58,46,37,.78) 100%)}
}

/* ── v17: 代表は写真そのものが豪華背景なので額装をやめる ── */
.rep .ph{padding:0;background:none;border:0;box-shadow:none}
.rep .ph::after{display:none}
.rep .ph img{
  border-radius:2px;aspect-ratio:auto;object-fit:contain;object-position:center;
  box-shadow:0 26px 60px -34px rgba(47,40,35,.45);
}

/* ── v18: ヘッダーと顔の重なりを解消（上部にスクリムを足す） ── */
.hero-scrim{
  background:
    linear-gradient(180deg,rgba(45,36,29,.50) 0%,rgba(45,36,29,.30) 9%,rgba(45,36,29,.08) 16%,rgba(45,36,29,0) 22%),
    linear-gradient(100deg,rgba(58,46,37,.50) 0%,rgba(58,46,37,.28) 34%,rgba(58,46,37,.05) 60%,rgba(58,46,37,0) 78%);
}
.page-hero-scrim{
  background:
    linear-gradient(180deg,rgba(40,33,27,.55) 0%,rgba(40,33,27,.3) 14%,rgba(40,33,27,.12) 24%,rgba(40,33,27,0) 34%),
    linear-gradient(180deg,rgba(40,33,27,0) 30%,rgba(40,33,27,.34) 62%,rgba(40,33,27,.8) 100%);
}
@media(max-width:900px){
  .hero-scrim{
    background:
      linear-gradient(180deg,rgba(45,36,29,.46) 0%,rgba(45,36,29,.22) 10%,rgba(45,36,29,0) 20%),
      linear-gradient(180deg,rgba(58,46,37,0) 30%,rgba(58,46,37,.30) 46%,rgba(58,46,37,.64) 74%,rgba(58,46,37,.8) 100%);
  }
}

/* ── v18: ヘッダーのCTAを目立たせる（背景に馴染んでいた） ── */
.menu a.navcta{
  background:var(--gold);color:#fff;border:1px solid var(--gold);
  box-shadow:0 6px 18px -8px rgba(29,23,19,.55);
}
.menu a.navcta:hover{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
#header.scrolled .menu a.navcta{background:var(--gold);color:#fff;border-color:var(--gold)}
#header.scrolled .menu a.navcta:hover{background:var(--gold-d);border-color:var(--gold-d)}
@media(max-width:900px){
  .menu a.navcta{box-shadow:none}
}

/* ── v19: ヘッダーを白で固定表示にし、写真はその下から ── */
:root{ --hd:78px; }
@media(max-width:900px){ :root{ --hd:66px; } }
html{scroll-padding-top:calc(var(--hd) + 12px)}

#header{
  background:#fff;box-shadow:0 1px 0 rgba(47,40,35,.10);
  padding:14px 0;backdrop-filter:none;
}
#header.scrolled{background:#fff;box-shadow:0 1px 0 rgba(47,40,35,.10);padding:14px 0;backdrop-filter:none}
.brand,#header.scrolled .brand{color:var(--ink);text-shadow:none}
.menu a,#header.scrolled .menu a{color:var(--ink2);text-shadow:none}
.menu a:hover,#header.scrolled .menu a:hover{color:var(--gold)}
.menu a.navcta,#header.scrolled .menu a.navcta{color:#fff}
.hamb span,#header.scrolled .hamb span{background:var(--ink)}
.hamb.active span,#header.scrolled .hamb.active span{background:#fff}
#header.menu-open{background:transparent;box-shadow:none}
#header.menu-open .brand{color:#fff}

/* 写真はヘッダーの下から始める */
.hero{margin-top:var(--hd);min-height:calc(min(94svh,880px) - var(--hd))}
.page-hero{margin-top:var(--hd);min-height:calc(min(48svh,380px) - 0px)}

/* ヘッダーが重ならなくなったので、上部のスクリムは外す */
.hero-scrim{background:linear-gradient(100deg,rgba(58,46,37,.50) 0%,rgba(58,46,37,.28) 34%,rgba(58,46,37,.05) 60%,rgba(58,46,37,0) 78%)}
.page-hero-scrim{background:linear-gradient(180deg,rgba(40,33,27,.24) 0%,rgba(40,33,27,.18) 34%,rgba(40,33,27,.42) 66%,rgba(40,33,27,.8) 100%)}
@media(max-width:900px){
  .hero-scrim{background:linear-gradient(180deg,rgba(58,46,37,0) 24%,rgba(58,46,37,.30) 44%,rgba(58,46,37,.64) 74%,rgba(58,46,37,.8) 100%)}
  .menu a{color:#fff}
}

/* ── v19: 提携の写真を差し替え ───────────── */
.band-bg.partner{background-image:url("../images/partner-scene.jpg");background-position:center 42%}
.page-hero-bg.partner{background-image:url("../images/partner-scene.jpg");background-position:center 44%}
@media(max-width:900px){
  /* スマホは横に切られるので、話している女性が入る位置へ寄せる */
  .band-bg.partner{background-position:34% 42%}
  .page-hero-bg.partner{background-position:32% 42%}
}

/* 提携ページの上部写真は従来のまま（新写真は人物が左＝見出しと重なるため帯だけに使う） */
.page-hero-bg.partner{background-image:url("../images/voice-hero.jpg");background-position:center 30%}
@media(max-width:900px){ .page-hero-bg.partner{background-position:center 30%} }
/* メニュー展開中もロゴを見えるように */
#header.menu-open .brand{position:relative;z-index:3}

/* スマホの提携帯: 話している2人が写真エリアに入るよう寄せ、上部のベールを薄くする */
@media(max-width:900px){
  .band-bg.partner{background-position:14% center}
  #partner .band-scrim{background:linear-gradient(180deg,rgba(252,248,240,.10) 0%,rgba(252,248,240,.42) 24%,rgba(252,248,240,.90) 36%,rgba(252,248,240,.98) 100%)}
}
@media(max-width:900px){
  /* 写真エリアを広げて、話している2人が文字にかからないようにする */
  #partner .band-in{padding-top:290px}
  #partner .band-scrim{background:linear-gradient(180deg,rgba(252,248,240,.08) 0%,rgba(252,248,240,.36) 30%,rgba(252,248,240,.90) 44%,rgba(252,248,240,.98) 100%)}
}
@media(max-width:900px){
  /* 上部のカーテンの余白を詰めて、2人を大きく見せる */
  .band-bg.partner{background-size:auto 128%;background-position:18% 69%}
}

/* ── v20: ヒーローのCTAを塗りボタンにして見やすく ── */
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold);box-shadow:0 12px 28px -14px rgba(29,23,19,.68)}
.btn-gold:hover{background:var(--gold-d);border-color:var(--gold-d)}
.btn-white{background:rgba(255,255,255,.95);color:var(--ink);border-color:rgba(255,255,255,.95);box-shadow:0 12px 28px -14px rgba(29,23,19,.5)}
.btn-white:hover{background:#fff;border-color:#fff}
.hero .btnrow .btn{padding:19px 40px;font-size:.94rem}
@media(max-width:900px){ .hero .btnrow .btn{padding:18px 30px} }

/* ── v21: 花嫁カードを実写に差し替え。お客さまの声ページの上部バナーは従来の絵を温存 ── */
.page-hero-bg.voice{background-image:url("../images/voice-top.jpg")}

/* ── v26: 会社ロゴをヘッダー／フッターに配置（ロゴが左・文字が右） ── */
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:36px;height:auto;display:block;flex:none}
.brand-txt{display:block}
@media(max-width:900px){ .brand{gap:9px} .brand-mark{width:31px} }

.fbrand{display:flex;align-items:center;gap:13px}
.fbrand .fmark{width:40px;height:auto;display:block;flex:none}
/* 事業者概要の見出し上にロゴ（会社の身元を示す場所なのでここだけ） */
.sec-logo{width:54px;height:auto;display:block;margin:0 auto 16px}
@media(max-width:900px){ .sec-logo{width:46px} }