:root{
  --paper:#F4F5F2;   /* 譜面の白 */
  --ink:#1C1F24;     /* 墨 */
  --rule:#C9CDD2;    /* 罫 */
  --sub:#5B616B;     /* 薄墨 */
  --white:#FFFFFF;
  --accent:#6E2338;  /* 音楽ファースト：葡萄 */
  --accent-ink:#4E1726;
  --mincho:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --latin:"Cormorant","Times New Roman",serif;
  --gutter:clamp(20px,5vw,72px);
  --section:clamp(96px,12vw,160px);
}
*{box-sizing:border-box}
body.of-front h1,body.of-front h2,body.of-front h3,body.of-front h4,body.of-front h5,body.of-front h6{font-family:var(--mincho) !important}
body.of-front .hero h1{font-size:clamp(44px,7.6vw,112px) !important}
body.of-front{font-family:var(--gothic) !important;background:var(--paper) !important;color:var(--ink) !important}
body.of-front .brand b,body.of-front .brand span{font-family:var(--latin) !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--gothic);font-size:17px;line-height:1.9;font-feature-settings:"palt" 0}
a{color:inherit}
img{max-width:100%;display:block}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--white);padding:8px 12px;z-index:10}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 五線（グループ共通の署名） */
.staff{display:grid;gap:4px;width:64px}
.staff i{display:block;height:1px;background:var(--rule)}
.staff i:nth-child(3){background:var(--accent)}

/* ヘッダー */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--gutter);position:sticky;top:0;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);z-index:5;border-bottom:1px solid transparent}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.brand b{font-family:var(--latin);font-size:28px;font-weight:600;letter-spacing:.06em}
.brand span{font-family:var(--latin);font-size:15px;letter-spacing:.12em;color:var(--sub)}
.nav{display:flex;gap:28px;font-size:15px}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline;text-underline-offset:6px}
.btn{display:inline-block;white-space:nowrap;background:var(--accent);color:var(--white);text-decoration:none;font-weight:700;font-size:15px;padding:14px 26px;border-radius:999px;transition:background .2s}
.btn:hover{background:var(--accent-ink)}
.btn--line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}
@media (max-width:860px){.nav{display:none}.brand span{display:none}.site-header .btn{padding:10px 16px;font-size:13px}}


/* ヒーロー：五線の上に、4つの「音符」（作る・開く・奏でる・育てる） */
.hero{padding:clamp(48px,8vw,112px) var(--gutter) var(--section)}
.hero h1{font-family:var(--mincho);font-weight:700;font-size:clamp(44px,7.6vw,112px);line-height:1.25;letter-spacing:.04em;margin:0;word-break:keep-all}
.hero-lead{max-width:34em;margin:28px 0 0;font-size:clamp(16px,1.4vw,18px)}
.score{position:relative;margin:clamp(48px,7vw,88px) 0 0;padding:28px 0}
.score::before{content:"";position:absolute;left:0;right:0;top:28px;height:97px;background:repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px 24px)}
.score ol{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.score li{position:relative;padding-top:0}
.score a{display:block;text-decoration:none}
.score li{padding-top:150px}
.nh{position:absolute;left:8px;width:30px;height:21px;border-radius:50%;background:var(--accent);transform:rotate(-20deg)}
.nh::after{content:"";position:absolute;right:1px;bottom:10px;width:2px;height:62px;background:var(--accent);transform:rotate(20deg);transform-origin:bottom}
.score li:nth-child(1) .nh{top:89px}.score li:nth-child(2) .nh{top:65px}.score li:nth-child(3) .nh{top:41px}.score li:nth-child(4) .nh{top:77px}
.note-label{display:block;font-family:var(--mincho);font-size:clamp(20px,2vw,26px);font-weight:700}
.score a:hover .note-label{text-decoration:underline;text-underline-offset:6px}
@media (prefers-reduced-motion:no-preference){.nh{animation:pop .5s cubic-bezier(.3,1.4,.5,1) both}.score li:nth-child(2) .nh{animation-delay:.12s}.score li:nth-child(3) .nh{animation-delay:.24s}.score li:nth-child(4) .nh{animation-delay:.36s}@keyframes pop{from{opacity:0;transform:translateY(8px) rotate(-20deg)}to{opacity:1;transform:rotate(-20deg)}}}
@media (max-width:760px){.score ol{grid-template-columns:1fr 1fr;row-gap:32px;column-gap:20px}.score::before{display:none}.score{padding:0;margin-top:56px}.score li{padding-top:64px}.nh{top:34px!important}.note-sub{font-size:13px;word-break:keep-all;overflow-wrap:anywhere}.nh{width:24px;height:17px}.nh::after{height:40px}}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:48px}

/* 共通 */
section{padding:0 var(--gutter) var(--section)}
.staff{display:grid;gap:4px;width:64px}.staff i{display:block;height:1px;background:var(--rule)}.staff i:nth-child(3){background:var(--accent)}
.sec-head{display:grid;gap:20px;margin-bottom:48px;max-width:40em}
.sec-head h2{font-family:var(--mincho);font-weight:700;font-size:clamp(28px,3.6vw,46px);line-height:1.45;letter-spacing:.04em;margin:0;word-break:keep-all;overflow-wrap:anywhere}
.sec-head p{margin:0;color:var(--sub)}

/* 4つの相談 */
.asks{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ink)}
.ask{padding:32px 32px 36px 0;border-bottom:1px solid var(--rule)}
.ask:nth-child(even){padding-left:32px;border-left:1px solid var(--rule)}
.ask h3{font-family:var(--mincho);font-size:clamp(22px,2.2vw,28px);margin:0 0 10px;font-weight:700}
.ask p{margin:0 0 18px;color:var(--sub);font-size:15px}
.ask a{font-size:15px;text-underline-offset:5px}
@media (max-width:760px){.asks{grid-template-columns:1fr}.ask:nth-child(even){padding-left:0;border-left:0}}

/* よく頼まれるプラン */
.plans{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.plans li{display:grid;grid-template-columns:minmax(200px,1fr) 2fr auto;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule)}
.plans h3{font-family:var(--mincho);font-size:21px;margin:0;font-weight:700}
.plans p{margin:0;font-size:15px;color:var(--sub)}
.plans a{font-size:14px;white-space:nowrap;text-underline-offset:5px}
@media (max-width:760px){.plans li{grid-template-columns:1fr;gap:6px}}

/* 実績：墨色の帯（役割ごと） */
.works{background:var(--ink);color:var(--paper);padding:clamp(64px,8vw,112px) var(--gutter);margin-bottom:var(--section)}
.works .staff i{background:#4a5059}.works .staff i:nth-child(3){background:#B9788A}
.works h2{font-family:var(--mincho);font-weight:500;font-size:clamp(26px,3vw,38px);letter-spacing:.08em;margin:20px 0 12px;word-break:keep-all}
.works .since{margin:0 0 8px;color:#c3c7cd;max-width:40em}
.works .who-note{margin:0 0 40px;color:#e6c88a;font-size:13px}
.roles{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #4a5059}
.role{padding:28px 20px 28px 0;border-bottom:1px solid #4a5059}
.role + .role{padding-left:20px;border-left:1px solid #4a5059}
.role h3{font-family:var(--mincho);font-size:clamp(20px,1.8vw,24px);margin:0;font-weight:700}
.role-sub{margin:4px 0 16px;font-size:13px;color:#9aa0a8}
.role ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.7}
.role li{padding:8px 0;border-top:1px solid #33383f}
.works > a{color:var(--paper);display:inline-block;margin-top:28px;font-size:15px;text-underline-offset:5px}
@media (max-width:1000px){.roles{grid-template-columns:1fr 1fr}.role:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:600px){.roles{grid-template-columns:1fr}.role + .role{padding-left:0;border-left:0}}

/* 依頼の流れ（本当に順番があるので番号を使う） */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--ink);counter-reset:f}
.flow li{counter-increment:f;padding:20px 16px 0 0}
.flow li::before{content:counter(f);display:block;font-family:var(--latin);font-size:40px;line-height:1;color:var(--accent);margin-bottom:12px}
.flow h3{font-size:17px;margin:0 0 6px}
.flow p{margin:0;font-size:14px;color:var(--sub)}
@media (max-width:1000px){.flow{grid-template-columns:repeat(3,1fr);row-gap:28px}}
@media (max-width:600px){.flow{grid-template-columns:1fr 1fr}}
.flow-note{margin:24px 0 0;font-size:13px;color:var(--sub)}

/* 安心してご依頼いただくために */
.trust{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.trust div{padding:24px 24px 28px 0;border-bottom:1px solid var(--rule)}
.trust div + div{padding-left:24px;border-left:1px solid var(--rule)}
.trust h3{font-size:17px;margin:0 0 8px}
.trust p{margin:0;font-size:14px;color:var(--sub)}
@media (max-width:860px){.trust{grid-template-columns:1fr}.trust div + div{padding-left:0;border-left:0}}
/* 料金の考え方 */
.fee-way{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:32px;align-items:start}
.fee-way .lead{grid-column:1/6;font-family:var(--mincho);font-size:clamp(20px,2vw,26px);line-height:1.8;margin:0}
.fee-way dl{grid-column:7/-1;margin:0;border-top:1px solid var(--ink)}
.fee-way dl div{display:grid;grid-template-columns:1fr;padding:18px 0;border-bottom:1px solid var(--rule)}
.fee-way dt{font-weight:700;margin-bottom:4px}
.fee-way dd{margin:0;color:var(--sub);font-size:15px}
@media (max-width:760px){.fee-way .lead,.fee-way dl{grid-column:1/-1}}

/* はじめての方へ */
.first{background:var(--white);border:1px solid var(--rule);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:24px}
.first h2{grid-column:1/7;font-family:var(--mincho);font-size:clamp(26px,3vw,38px);line-height:1.5;margin:0;word-break:keep-all}
.first .say{grid-column:1/7;margin:0;color:var(--sub)}
.first ul{grid-column:8/-1;grid-row:1/3;list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.first li{border-bottom:1px solid var(--rule)}
.first li a{display:block;padding:16px 0;text-decoration:none}
.first li a:hover{text-decoration:underline;text-underline-offset:5px}
@media (max-width:760px){.first h2,.first .say,.first ul{grid-column:1/-1;grid-row:auto}}

/* 結び */
.closing{text-align:center;padding-top:var(--section)}
.closing h2{font-family:var(--mincho);font-size:clamp(28px,4vw,52px);line-height:1.55;margin:0 0 24px;font-weight:700;word-break:keep-all}
.closing p{color:var(--sub);margin:0 0 36px}
.operator{font-size:13px;color:var(--sub);margin-top:24px}
/* TARNAR GROUP帯：五線の上に10サイトを置く */
.group{padding:56px var(--gutter) 40px;border-top:1px solid var(--rule)}
.group-staff{position:relative;padding:18px 0}
.group-staff::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px 24px);opacity:.7;pointer-events:none}
.group-staff ul{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 22px;font-size:14px;line-height:24px}
.group-staff a{text-decoration:none;background:var(--paper);padding:0 4px}
.group-staff a:hover{text-decoration:underline}
.group small{display:block;margin-top:28px;color:var(--sub);font-size:13px}
.group h2{font-family:var(--latin);font-weight:600;font-size:22px;letter-spacing:.1em;margin:0 0 6px}
.group-tag{font-family:var(--mincho);font-size:14px;color:var(--sub);letter-spacing:.08em;margin:0 0 20px}
.note{background:#fff6d9;border-bottom:1px solid #e6d79a;font-size:13px;padding:8px var(--gutter);color:#5a4b12}
.trust{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.trust{grid-template-columns:1fr}}