:root{
  --paper:#F4F3F0;        /* 地色:ごく薄いグレー */
  --ink:#1F1F1F;          /* 線と文字:黒 */
  --ink-soft:#5A5A5A;
  --marker:#F3C866;       /* 強調:からし色寄りの黄 */
  --accent:#E25555;       /* 赤:タイトル帯・番号・ボタン */
  --pink:#FBE6E6;         /* ピンク:パネル背景 */
  --pink-deep:#F6C9C9;
  --blue:#3B6FD1;         /* 青:ごく少量 */
  --line:#D8D4CE;
  --max:720px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:16px;
  line-height:2;
  letter-spacing:.04em;
}
a{color:inherit}
.display{font-family:'Klee One',cursive}

/* ---- ナビ ---- */
nav{
  position:sticky;top:0;z-index:10;
  background:rgba(251,250,245,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
nav .nav-inner{
  max-width:1040px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px 24px;
}
nav .logo{font-family:'Klee One',cursive;font-weight:600;font-size:1.02rem;text-decoration:none;white-space:nowrap;flex-shrink:0}
nav ul{display:flex;gap:22px;list-style:none;font-size:.85rem;white-space:nowrap}
nav ul a{text-decoration:none;color:var(--ink-soft);white-space:nowrap}
nav ul a:hover{color:var(--ink)}
@media(max-width:820px){nav ul{display:none}}

/* ---- 共通レイアウト ---- */
section{padding:96px 24px}
.inner{max-width:var(--max);margin:0 auto}
.eyebrow{
  display:inline-block;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.22em;
  color:#fff;
  background:var(--accent);
  padding:5px 14px 4px;
  border-radius:4px;
  margin-bottom:28px;
}
h2.sec{
  font-family:'Klee One',cursive;font-weight:600;
  font-size:clamp(1.4rem,4vw,1.9rem);
  margin-bottom:48px;
}

/* ---- マーカーハイライト(シグネチャー) ---- */
.hl{
  background:linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 92%, transparent 92%);
  padding:0 .1em;
}

/* ---- 手描き区切り線 ---- */
.divider{display:block;margin:0 auto;width:160px;height:14px;opacity:.5}

/* ---- 写真 ---- */
.photo{
  border:1.5px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  background:#fff;
}
.photo img{display:block;width:100%;height:auto}
.photo video{display:block;width:100%;height:auto}
.photo.tilt{transform:rotate(-.6deg)}
figcaption{
  font-size:.78rem;color:var(--ink-soft);
  letter-spacing:.08em;margin-top:10px;text-align:right;
}

/* ---- YouTube(ファサード方式) ---- */
.videos{margin-top:64px}
.videos h3{
  font-family:'Klee One',cursive;font-weight:600;
  font-size:1.2rem;margin-bottom:12px;
}
.videos .vnote{font-size:.88rem;color:var(--ink-soft);margin-bottom:28px}
.vgrid{display:grid;grid-template-columns:1fr;gap:24px;max-width:560px}
.yt{
  position:relative;aspect-ratio:16/9;
  border:1.5px solid var(--line);border-radius:6px;
  overflow:hidden;background:#000;cursor:pointer;padding:0;
  display:block;width:100%;
}
.yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.yt .play{
  position:absolute;inset:0;margin:auto;
  width:64px;height:64px;
  background:var(--marker);
  border-radius:56% 52% 58% 50%/52% 58% 50% 56%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease;
}
.yt:hover .play{transform:scale(1.08) rotate(-2deg)}
.yt .play::after{
  content:"";display:block;
  border-left:18px solid var(--ink);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  margin-left:4px;
}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videos .chlink{margin-top:20px;font-size:.9rem}
.videos .chlink a{text-decoration:underline;text-underline-offset:.35em}

/* ---- ヒーロー ---- */
.hero{
  min-height:82vh;
  display:flex;
  align-items:center;
  padding:48px 24px;
}
.hero .inner{width:100%}
.hero h1{
  font-family:'Klee One',cursive;
  font-weight:600;
  font-size:clamp(2.6rem,8vw,4.6rem);
  line-height:1.5;
  letter-spacing:.06em;
}
.hero h1 .stroke-wrap{position:relative;display:inline-block}
.hero h1 svg.underline{
  position:absolute;
  left:0;
  bottom:-.12em;
  width:100%;
  height:.28em;
  overflow:visible;
}
.hero h1 svg.underline path{
  fill:none;
  stroke:var(--accent);
  stroke-width:7;
  stroke-linecap:round;
  stroke-dasharray:620;
  stroke-dashoffset:620;
  animation:draw 1.1s .5s ease forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .sub{
  margin-top:36px;
  font-size:1rem;
  color:var(--ink-soft);
  letter-spacing:.12em;
}
.hero .sketch{
  margin-top:56px;
  border:1.5px solid var(--line);
  border-radius:6px;
  background:#fff;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-soft);
  font-size:.85rem;
  letter-spacing:.15em;
}

/* ---- コンセプト ---- */
.concept p{margin-bottom:2em}
.concept p:last-of-type{margin-bottom:0}
.concept .kicker{
  font-family:'Klee One',cursive;
  font-size:1.35rem;
  font-weight:600;
  margin-bottom:2.2em;
}
.lineage{
  margin-top:64px;
  padding-top:28px;
  border-top:1px solid var(--line);
  font-size:.85rem;
  color:var(--ink-soft);
  line-height:1.9;
}

/* ---- 事例 ---- */
.cases{background:#fff}
.cases h2{
  font-family:'Klee One',cursive;
  font-weight:600;
  font-size:clamp(1.5rem,4.5vw,2.1rem);
  line-height:1.8;
  margin-bottom:64px;
}
.circle-wrap{position:relative;display:inline-block;padding:.05em .2em}
.circle-wrap svg{
  position:absolute;
  inset:-14% -8%;
  width:116%;
  height:128%;
  overflow:visible;
}
.circle-wrap svg path{
  fill:none;
  stroke:var(--accent);
  stroke-width:3.5;
  stroke-linecap:round;
}
.case{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  padding:36px 0;
  border-top:1px solid var(--line);
}
.case:last-of-type{border-bottom:1px solid var(--line)}
.case .art{
  border:1.5px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-soft);
  font-size:.8rem;
  letter-spacing:.15em;
}
.case .quote{
  font-family:'Klee One',cursive;
  font-size:1.15rem;
  font-weight:600;
  line-height:1.9;
}
.case .body{font-size:.95rem;color:var(--ink-soft)}
/* 絵は横長なので、常に全幅で見せる(縦積み) */
.case img.zoomable,.zoomable{cursor:zoom-in}

/* ---- ライトボックス ---- */
.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(35,40,56,.92);
  display:none;align-items:center;justify-content:center;
  padding:24px;cursor:zoom-out;
}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:100%;border-radius:4px;background:#fff}
.lightbox .close{
  position:absolute;top:16px;right:20px;
  font-family:'Klee One',cursive;font-size:.9rem;color:var(--paper);
  letter-spacing:.1em;
}

/* ---- 流れと料金 ---- */
.flow ol{list-style:none;counter-reset:step}
.flow li{
  counter-increment:step;
  position:relative;
  padding:0 0 32px 56px;
}
.flow li::before{
  content:counter(step);
  position:absolute;
  left:0;top:.1em;
  width:38px;height:38px;
  background:var(--accent);color:#fff;
  border-radius:50% 46% 52% 48%/48% 52% 46% 54%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Klee One',cursive;
  font-weight:600;
}
.flow .goal{
  margin-top:40px;
  padding:28px 32px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:6px;
  font-family:'Klee One',cursive;
  font-size:1.1rem;
  font-weight:600;
  line-height:2;
}
.flow .price{
  margin-top:32px;
  font-size:.95rem;
  color:var(--ink-soft);
}
.btn{
  display:inline-block;margin-top:36px;
  font-family:'Klee One',cursive;font-weight:600;font-size:1rem;
  color:#fff;background:var(--accent);
  padding:14px 44px;text-decoration:none;
  border-radius:60% 54% 58% 52%/54% 58% 52% 60%;
  transition:transform .2s ease;
}
.btn:hover{transform:rotate(-1.2deg) scale(1.03)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* ---- 法人・チーム向け ---- */
.corp{background:#fff}
.corp .bridge{margin-bottom:56px}
.corp .bridge p{margin-bottom:1.6em}
.corp .bridge p:last-of-type{margin-bottom:0}
.menu{list-style:none;display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:680px){.menu{grid-template-columns:repeat(3,1fr)}}
.menu li{
  border:1.5px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  padding:26px 24px;
}
.menu li b{
  font-family:'Klee One',cursive;font-weight:600;
  display:block;font-size:1.02rem;margin-bottom:.6em;line-height:1.7;
}
.menu li p{font-size:.88rem;color:var(--ink-soft);line-height:1.9}
.menu li .tag{
  display:inline-block;margin-top:.8em;
  font-size:.75rem;letter-spacing:.08em;
  background:var(--marker);
  padding:2px 10px;border-radius:3px;
}
.corp .note{margin-top:28px;font-size:.82rem;color:var(--ink-soft)}
.corp .corp-cta{margin-top:8px}

/* ---- プロフィール ---- */
.profile .name{
  font-family:'Klee One',cursive;
  font-size:1.5rem;
  font-weight:600;
  margin-bottom:36px;
}
.profile p{margin-bottom:1.8em;font-size:.98rem}
.profile p:last-of-type{margin-bottom:0}
.profile .media-links{list-style:none;margin-top:48px;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.profile .media-links{grid-template-columns:1fr 1fr}}
.profile .media-links li{display:flex}
.profile .media-links a{
  display:flex;flex-direction:column;justify-content:center;flex:1;
  padding:18px 22px;
  border:1.5px solid var(--line);border-radius:6px;
  text-decoration:none;background:#fff;
  transition:transform .15s ease;
}
.profile .media-links a:hover{transform:translateY(-2px)}
.profile .media-links b{font-family:'Klee One',cursive;font-weight:600;display:block;margin-bottom:.1em;font-size:.95rem}
.profile .media-links span{font-size:.8rem;color:var(--ink-soft)}

/* ---- 最新情報 ---- */
.news{background:#fff}
.news dl{border-top:1px solid var(--line)}
.news .row{
  display:grid;grid-template-columns:120px 1fr;gap:16px;
  padding:20px 4px;border-bottom:1px solid var(--line);font-size:.95rem;
}
.news dt{color:var(--ink-soft);font-size:.85rem;letter-spacing:.05em}
@media(max-width:560px){.news .row{grid-template-columns:1fr;gap:4px}}

/* ---- 問い合わせ三分岐 ---- */
.contact{background:var(--accent);color:#fff;text-align:center}
.contact .lead{
  font-family:'Klee One',cursive;
  font-size:clamp(1.3rem,4vw,1.7rem);
  font-weight:600;
  line-height:2.2;
  margin-bottom:56px;
}
.contact .branches{display:grid;grid-template-columns:1fr;gap:20px;max-width:640px;margin:0 auto}
@media(min-width:640px){.contact .branches{grid-template-columns:repeat(3,1fr)}}
.contact .branches a{
  display:block;padding:26px 18px;
  border:1.5px solid rgba(255,255,255,.55);border-radius:6px;
  text-decoration:none;color:#fff;
  font-family:'Klee One',cursive;font-weight:600;
  transition:background .2s ease,color .2s ease;
}
.contact .branches a small{display:block;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:400;font-size:.78rem;margin-top:.6em;opacity:.8}
.contact .branches a:hover{background:#fff;color:var(--accent);border-color:#fff}

footer{
  padding:40px 24px;
  text-align:center;
  font-size:.78rem;
  color:var(--ink-soft);
  letter-spacing:.1em;
}

@media(prefers-reduced-motion:reduce){
  .hero h1 svg.underline path{animation:none;stroke-dashoffset:0}
  .btn,.profile .media-links a,.contact .branches a{transition:none}
  html{scroll-behavior:auto}
}

/* ---- こんなときに ---- */
.when-list{list-style:none;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.when-list{grid-template-columns:1fr 1fr}}
.when-list li{
  position:relative;padding:18px 22px 18px 48px;
  border:1.5px solid var(--line);border-radius:6px;background:#fff;
  font-size:.95rem;line-height:1.9;
}
.when-list li::before{
  content:"";position:absolute;left:18px;top:26px;
  width:14px;height:14px;
  background:var(--marker);
  border-radius:56% 52% 58% 50%/52% 58% 50% 56%;
}
.when-note{margin-top:28px;color:var(--ink-soft);font-size:.92rem}

/* ---- アンケートの声 ---- */
.survey{margin-top:20px;font-size:.92rem;color:var(--ink-soft);line-height:2}

/* ---- 追従マスコット ---- */
.mascot{
  position:fixed;left:20px;bottom:20px;z-index:60;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  text-decoration:none;color:var(--ink);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .5s ease,transform .5s ease;
}
.mascot.show{opacity:1;transform:translateY(0);pointer-events:auto}
.mascot .bubble{display:none;
  position:relative;
  font-family:'Klee One',cursive;font-weight:600;font-size:.82rem;line-height:1.6;
  background:#fff;border:1.8px solid var(--ink);
  border-radius:58% 42% 55% 45%/50% 60% 40% 50%;
  padding:12px 18px;margin-left:36px;
  box-shadow:2px 3px 0 rgba(35,40,56,.08);
}
.mascot .bubble::after{
  content:"";position:absolute;left:14px;bottom:-9px;
  width:12px;height:12px;background:#fff;
  border-right:1.8px solid var(--ink);border-bottom:1.8px solid var(--ink);
  transform:rotate(45deg);
}
.mascot img{
  width:200px;height:auto;display:block;
  animation:bob 3.2s ease-in-out infinite;
  transition:transform .2s ease;
}
.mascot:hover img{transform:scale(1.06) rotate(-3deg)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:640px){
  .mascot{left:12px;bottom:12px}
  .mascot img{width:130px}
  .mascot .bubble{display:none;font-size:.74rem;padding:9px 13px;margin-left:24px}
}
@media(prefers-reduced-motion:reduce){
  .mascot img{animation:none}
  .mascot{transition:none}
}

/* ---- 配色調整(Xの絵の世界観) ---- */
#when{background:#fff}
.when-list li::before{background:var(--accent)}
.hero{background:#fff}
.od{background:var(--paper)!important}
.flow .goal{border-color:var(--ink);border-width:1.8px}
.case .quote,.casestudy .voice p{color:var(--ink)}
.yt .play{background:var(--accent)}
.yt .play::after{border-left-color:#fff}
.lightbox{background:rgba(31,31,31,.92)}
.media-links a:hover,.profile .media-links a:hover{border-color:var(--accent)}
.menu li .tag,.plans li .badge{background:var(--marker)}
nav{background:rgba(255,255,255,.92)}

/* ---- 赤をはっきり(面ではなく線と点で) ---- */
/* セクション見出しの下に赤い太めの手描き線 */
h2.sec{position:relative;padding-bottom:14px}
h2.sec::after{
  content:"";position:absolute;left:0;bottom:0;
  width:72px;height:5px;background:var(--accent);
  border-radius:60% 40% 55% 45%/50% 60% 40% 50%;
}
/* ヒーローのサービス名を赤タグに */
.tag-red{
  display:inline-block;background:var(--ink);color:#fff;
  font-weight:700;padding:3px 12px 2px;border-radius:4px;margin-right:8px;
  letter-spacing:.1em;
}
/* 引用・ゴール文に赤い左罫 */
.flow .goal,.case-full .voice,.casestudy .voice,.prnote,.pricebox{border-left:6px solid var(--accent)}
/* こんなときに:赤い左罫 */
.when-list li{border-left:5px solid var(--accent)}
/* サービス・メニュー・プランのカードに赤い上辺 */
.menu li,.svc li,.plans li,.kinds li{border-top:5px solid var(--accent)}
/* 事例の引用の先頭に赤い縦棒 */
.case .quote{border-left:4px solid var(--accent);padding-left:14px}
/* リンクの下線を赤に */
a[style*="underline"],.chlink a,.corp a{text-decoration-color:var(--accent)}

/* ---- ナビを赤地・白文字に(問い合わせセクションと揃える) ---- */
nav{background:var(--accent)!important;border-bottom:none}
nav .logo{color:#fff}
nav ul a{color:rgba(255,255,255,.85)}
nav ul a:hover{color:#fff;text-decoration:underline;text-underline-offset:.35em;text-decoration-color:#fff}

/* ---- ナビの再設計:ロゴをロゴらしく、メニューを大きく、問い合わせをボタンに ---- */
nav .nav-inner{padding:12px 24px}
nav .logo{
  display:flex;flex-direction:column;line-height:1.1;
  font-family:'Yusei Magic','Klee One',cursive;font-weight:400;
  font-size:1.65rem;letter-spacing:.06em;color:#fff;
}
nav .logo small{
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:.62rem;letter-spacing:.14em;opacity:.85;margin-top:5px;font-weight:500;
}
nav ul{gap:26px;font-size:1rem;align-items:center}
nav ul a{color:#fff;font-weight:500}
nav ul li.nav-cta a{
  display:inline-block;background:#fff;color:var(--accent);
  font-weight:700;padding:9px 18px;border-radius:6px;
  text-decoration:none;
  box-shadow:0 2px 0 rgba(0,0,0,.12);
  transition:transform .15s ease,background .15s ease;
}
nav ul li.nav-cta a:hover{background:var(--marker);color:var(--ink);text-decoration:none;transform:translateY(-1px)}
@media(max-width:820px){
  nav ul{display:flex;gap:0}
  nav ul li{display:none}
  nav ul li.nav-cta{display:block}
  nav ul li.nav-cta a{padding:8px 14px;font-size:.9rem}
}

/* ---- フッターの法務リンク ---- */
footer .foot-links{margin-bottom:10px}
footer .foot-links a{color:var(--ink-soft);text-decoration:none}
footer .foot-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.3em}

/* ---- トップのメディアリンク ---- */
.corp-profile .media-links{
  list-style:none;margin-top:44px;
  display:grid;grid-template-columns:1fr;gap:14px;
}
@media(min-width:640px){.corp-profile .media-links{grid-template-columns:1fr 1fr}}
.corp-profile .media-links li{display:flex}
.corp-profile .media-links a{
  display:flex;flex-direction:column;justify-content:center;flex:1;
  padding:18px 22px;
  border:1.5px solid var(--line);border-radius:6px;
  text-decoration:none;background:#fff;
  transition:transform .15s ease,border-color .15s ease;
}
.corp-profile .media-links a:hover{transform:translateY(-2px);border-color:var(--accent)}
.corp-profile .media-links b{font-family:'Klee One',cursive;font-weight:600;display:block;margin-bottom:.1em;font-size:.95rem}
.corp-profile .media-links span{font-size:.8rem;color:var(--ink-soft)}


/* ---- 取引先の帯 ---- */
.clients{background:#fff;padding:44px 24px;border-bottom:1px solid var(--line)}
.clients .inner{max-width:900px}
.clients-label{
  text-align:center;font-size:.78rem;letter-spacing:.22em;
  color:var(--ink-soft);margin-bottom:22px;
}
.clients-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px 36px;
}
.clients-list li{
  font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;
  font-size:1rem;letter-spacing:.04em;color:var(--ink);
  white-space:nowrap;
}
.clients-note{text-align:center;font-size:.72rem;color:var(--ink-soft);margin-top:16px}
@media(max-width:640px){
  .clients-list{gap:10px 20px}
  .clients-list li{font-size:.88rem}
}