@charset "UTF-8";
/* =========================================================
   アニマル日和｜うちの子イラスト
   正本：01_PROJECTS/business/animal-biyori/01_世界観ガイド.md
   ・色 / 字 / 角丸 / 影 はすべてガイド §2 のとおり
   ・装飾は「雲・太陽・葉っぱ・肉球」の4つだけ（星・キラキラは使わない）
   ・ダークモードは作らない（晴れの日なので）
   ========================================================= */

/* ---------- 1. トークン ---------- */
:root{
  /* 色（世界観ガイド §2-1） */
  --paper:#FFF8EC;          /* ひだまりクリーム */
  --sky:#8FCBEA;            /* 日和ブルー */
  --sun:#FFD166;            /* おひさまイエロー */
  --leaf:#A6DBB0;           /* わかばグリーン */
  --coral:#FF9A8B;          /* ほっぺコーラル */
  --ink:#4A3B32;            /* こげ茶インク（黒は使わない） */
  --ink-soft:#7A6A60;       /* 薄い文字 */
  --line:#E9DCC9;           /* 罫線・枠 */
  --white:#FFFFFF;

  /* 面の色 */
  --paper-sky:#EAF6FD;
  --paper-leaf:#EFF8F1;
  --paper-sun:#FFF4DC;
  --footer-bg:#F3E7D3;

  /* 形（世界観ガイド §2-3） */
  --r-card:20px;
  --r-lg:28px;
  --r-pill:999px;
  --shadow:0 6px 24px rgba(74,59,50,.08);
  --shadow-lg:0 10px 34px rgba(74,59,50,.10);

  --wrap:1080px;
  --wrap-narrow:720px;

  /* 字 */
  --f-head:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Zen Maru Gothic",sans-serif;
  --f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","M PLUS Rounded 1c",sans-serif;
  --f-en:"Nunito",system-ui,sans-serif;
}

/* ---------- 2. リセット ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.95;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;line-height:1.5;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
svg{width:1em;height:1em;fill:currentColor}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}

.container{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.sp-only{display:inline}
.pc-only{display:none}
@media(min-width:768px){.sp-only{display:none}.pc-only{display:inline}}

/* ---------- 3. 出てくる動き ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .marquee-track{animation:none !important}
}

/* ---------- 4. ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:16px 30px;
  border-radius:var(--r-pill);
  background:var(--sun);
  color:var(--ink);
  font-family:var(--f-head);font-weight:700;font-size:16px;line-height:1.4;
  text-decoration:none;
  box-shadow:0 4px 0 #E9B84C,var(--shadow);
  transition:transform .15s ease,box-shadow .15s ease;
  text-align:center;
}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 #E9B84C,var(--shadow)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 #E9B84C,var(--shadow)}
.btn .paw{width:1.15em;height:1.15em;flex:none;color:var(--ink)}
.btn--xl{padding:20px 38px;font-size:clamp(16px,3.4vw,19px)}
.btn--sm{padding:11px 20px;font-size:14px;box-shadow:0 3px 0 #E9B84C}
.btn--sky{background:var(--sky);box-shadow:0 4px 0 #6FB2D6,var(--shadow)}
.btn--sky:hover{box-shadow:0 2px 0 #6FB2D6,var(--shadow)}
.btn--line{background:#06C755;color:#fff;box-shadow:0 4px 0 #04A144,var(--shadow)}
.btn--line:hover{box-shadow:0 2px 0 #04A144,var(--shadow)}
.btn--ghost{background:var(--white);box-shadow:0 4px 0 var(--line),var(--shadow)}
.btn--ghost:hover{box-shadow:0 2px 0 var(--line),var(--shadow)}

.cta-block{text-align:center;margin-top:clamp(26px,4vw,38px)}
.cta-note{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:13.5px;color:var(--ink-soft);line-height:1.7}
.cta-note span{display:inline-flex;align-items:center;gap:.4em}
.cta-note svg{color:var(--leaf);width:1.05em;height:1.05em;flex:none}

.textlink{color:#3E86AE;text-decoration:none;border-bottom:2px solid rgba(143,203,234,.55);
  font-weight:700;padding-bottom:1px;transition:border-color .2s}
.textlink:hover{border-color:var(--sky)}
.note{font-size:13px;color:var(--ink-soft);line-height:1.8}

/* ---------- 5. ヘッダー ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,248,236,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  width:min(100% - 32px,1240px);margin-inline:auto;
  display:flex;align-items:center;gap:14px;min-height:62px;
}
.brand{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--f-head);font-weight:700;font-size:clamp(16px,3.6vw,19px);
  text-decoration:none;color:var(--ink);letter-spacing:.04em;
  margin-right:auto;flex:none;
}
.brand svg{width:1.5em;height:1.5em;color:var(--sun)}
.brand .brand-sub{
  font-size:11px;font-weight:500;color:var(--ink-soft);letter-spacing:.06em;
  border-left:1px solid var(--line);padding-left:8px;margin-left:2px;
  display:none;
}
@media(min-width:900px){.brand .brand-sub{display:inline}}
.gnav{display:none;gap:15px;font-size:13.5px;font-weight:500;flex:none}
.gnav a{text-decoration:none;color:var(--ink);padding:4px 0;white-space:nowrap;
  border-bottom:2px solid transparent;transition:border-color .2s}
.gnav a:hover{border-color:var(--sun)}
.header-cta{display:none;flex:none;white-space:nowrap}
@media(min-width:1150px){.gnav{display:flex}}
@media(min-width:1320px){.gnav{gap:20px;font-size:14px}}
@media(min-width:600px){.header-cta{display:inline-flex}}

.menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;border-radius:var(--r-pill);background:var(--white);
  box-shadow:var(--shadow);align-items:center;flex:none}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s}
@media(min-width:1150px){.menu-btn{display:none}}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1000px){.menu-btn{display:none}}

.drawer{
  position:fixed;inset:62px 0 auto;z-index:55;
  background:var(--paper);border-bottom:1px solid var(--line);
  display:grid;gap:6px;padding:16px 20px 24px;
  transform:translateY(-120%);transition:transform .3s ease;
  box-shadow:var(--shadow-lg);
}
.drawer.is-open{transform:none}
.drawer a{text-decoration:none;padding:12px 6px;border-bottom:1px dashed var(--line);font-weight:500}
.drawer .btn{margin-top:12px;border-bottom:0}
@media(min-width:1000px){.drawer{display:none}}

/* ---------- 6. 面と波の区切り ---------- */
.section{position:relative;padding:clamp(58px,9vw,96px) 0 clamp(72px,11vw,116px)}
.section--paper{background:var(--paper)}
.section--white{background:var(--white)}
.section--sky{background:var(--paper-sky)}
.section--leaf{background:var(--paper-leaf)}
.section--sun{background:var(--paper-sun)}
.sec-wave{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(26px,4vw,44px);
  display:block;fill:currentColor;color:var(--paper);pointer-events:none}
.sec-wave--paper{color:var(--paper)}
.sec-wave--white{color:var(--white)}
.sec-wave--sky{color:var(--paper-sky)}
.sec-wave--leaf{color:var(--paper-leaf)}
.sec-wave--sun{color:var(--paper-sun)}
.sec-wave--footer{color:var(--footer-bg)}
.sec-wave--top{top:-1px;bottom:auto;transform:scaleY(-1)}

.sec-head{text-align:center;margin-bottom:clamp(30px,5vw,48px)}
.eyebrow{display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--f-head);font-weight:700;font-size:13px;letter-spacing:.12em;
  color:var(--ink-soft);margin-bottom:10px}
.eyebrow svg{color:var(--coral);width:1.15em;height:1.15em}
.sec-title{font-size:clamp(23px,5.2vw,32px);letter-spacing:.03em}
.sec-title .accent{color:var(--coral)}
.sec-lead{margin-top:14px;color:var(--ink-soft);font-size:clamp(14.5px,2.9vw,16px);line-height:2}

/* ---------- 7. ヒーロー ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(30px,6vw,54px) 0 0;background:var(--paper)}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-blob{position:absolute;border-radius:50%;filter:blur(6px);opacity:.5}
.hero-blob--sky{width:340px;height:340px;background:var(--sky);left:-120px;top:-90px}
.hero-blob--leaf{width:260px;height:260px;background:var(--leaf);right:-80px;top:40px}
.hero-blob--sun{width:200px;height:200px;background:var(--sun);left:38%;bottom:-70px;opacity:.4}
.hero-blob--coral{width:120px;height:120px;background:var(--coral);right:22%;top:-30px;opacity:.35}

.hero-inner{position:relative;width:min(100% - 40px,var(--wrap));margin-inline:auto;
  display:grid;gap:clamp(24px,4vw,40px);align-items:center}
@media(min-width:900px){.hero-inner{grid-template-columns:1.05fr .95fr}}
.hero-copy{text-align:center}
@media(min-width:900px){.hero-copy{text-align:left}}

.hero-badge{display:inline-flex;align-items:center;gap:.45em;
  background:var(--white);border:2px solid var(--sun);border-radius:var(--r-pill);
  padding:7px 18px;font-family:var(--f-head);font-weight:700;font-size:13px;
  box-shadow:var(--shadow)}
.hero-badge svg{color:var(--sun);width:1.2em;height:1.2em}
.hero-title{margin-top:18px;font-size:clamp(26px,6.6vw,44px);line-height:1.45;letter-spacing:.02em}
.hero-title .accent{color:var(--coral);position:relative;white-space:nowrap}
.hero-title .accent::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.28em;
  background:var(--sun);opacity:.45;border-radius:var(--r-pill);z-index:-1}

.hero-free{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:2px}
@media(min-width:900px){.hero-free{align-items:flex-start}}
.hero-free .lead-in{font-size:14px;color:var(--ink-soft);font-weight:500;letter-spacing:.08em}
.hero-free .free-line{display:inline-flex;align-items:baseline;gap:.12em;font-family:var(--f-head);font-weight:700}
.hero-free .num{font-family:var(--f-en);font-size:clamp(42px,10vw,62px);line-height:1;color:var(--coral)}
.hero-free .unit{font-size:clamp(17px,3.4vw,21px)}
.hero-free .free{font-size:clamp(21px,4.6vw,29px);margin-left:.25em}

.hero-cards{display:none}
@media(min-width:900px){
  .hero-cards{display:block;position:relative;height:400px}
  .hero-frame{position:absolute;left:6%;top:0;width:64%;background:var(--white);
    padding:12px;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);transform:rotate(-3deg)}
  .hero-frame img{border-radius:14px;aspect-ratio:2/3;object-fit:cover;width:100%}
  .hero-thumb{position:absolute;margin:0;width:38%;background:var(--white);padding:8px;
    border-radius:var(--r-card);box-shadow:var(--shadow-lg)}
  .hero-thumb img{border-radius:12px;aspect-ratio:2/3;object-fit:cover;width:100%}
  .hero-thumb--1{right:-2%;top:22px;transform:rotate(5deg)}
  .hero-thumb--2{right:8%;bottom:-14px;transform:rotate(-6deg)}
}

.marquee{margin-top:clamp(28px,5vw,44px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:12px;width:max-content;animation:marquee 46s linear infinite}
.marquee-track img{width:112px;aspect-ratio:2/3;object-fit:cover;border-radius:14px;
  background:var(--white);box-shadow:var(--shadow);flex:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 8. 作例ギャラリー ---------- */
.ba-wrap{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.5vw,26px);
  margin-bottom:clamp(30px,5vw,48px);flex-wrap:nowrap}
.ba-card{margin:0;background:var(--white);padding:10px;border-radius:var(--r-card);
  box-shadow:var(--shadow);width:min(42%,240px);text-align:center}
.ba-card figcaption{font-family:var(--f-head);font-weight:700;font-size:12.5px;
  color:var(--ink-soft);margin-bottom:8px}
.ba-card img{border-radius:14px;aspect-ratio:2/3;object-fit:cover;width:100%}
.ba-card--after{border:2px solid var(--sun)}
.ba-card--after figcaption{color:var(--ink)}
.ba-arrow{width:clamp(22px,5vw,34px);height:auto;flex:none;color:var(--coral)}

.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,2vw,18px)}
@media(min-width:600px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}
.gallery-item{position:relative;padding:0;border-radius:var(--r-card);overflow:hidden;
  background:var(--white);box-shadow:var(--shadow);display:block;line-height:0;
  transition:transform .2s ease}
.gallery-item:hover{transform:translateY(-4px)}
.gallery-item img{aspect-ratio:2/3;object-fit:cover;width:100%}
.gallery-item .zoom{position:absolute;right:8px;bottom:8px;width:30px;height:30px;
  border-radius:50%;background:rgba(255,248,236,.9);display:grid;place-items:center;
  color:var(--ink);box-shadow:var(--shadow)}
.gallery-item .zoom svg{width:16px;height:16px}
.gallery-cta{margin-top:clamp(26px,4vw,36px)}
.sample-note{text-align:center;font-size:12.5px;color:var(--ink-soft);line-height:1.9;
  margin:0 auto clamp(20px,3vw,28px);max-width:640px}
.works-grid+.sample-note{margin:clamp(20px,3vw,28px) auto 0}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(74,59,50,.82);
  display:none;place-items:center;padding:24px}
.lightbox.is-open{display:grid}
.lightbox img{max-width:min(92vw,620px);max-height:86vh;border-radius:var(--r-card);
  background:var(--white);padding:10px;object-fit:contain}
.lightbox-close{position:absolute;top:16px;right:16px;width:44px;height:44px;
  border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--ink)}
.lightbox-close svg{width:20px;height:20px}

/* ---------- 9. 特徴カード ---------- */
.feature-grid{display:grid;gap:clamp(14px,2.4vw,22px);grid-template-columns:1fr}
@media(min-width:620px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.feature-grid{grid-template-columns:repeat(4,1fr)}}
.feature-card{background:var(--white);border-radius:var(--r-lg);padding:28px 22px 26px;
  box-shadow:var(--shadow);text-align:center}
.feature-ico{width:60px;height:60px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;background:var(--paper-sun);color:var(--ink)}
.feature-ico svg{width:28px;height:28px}
.feature-card:nth-child(2) .feature-ico{background:var(--paper-sky)}
.feature-card:nth-child(3) .feature-ico{background:var(--paper-leaf)}
.feature-card:nth-child(4) .feature-ico{background:#FFEDE9}
.feature-card h3{font-size:17px;line-height:1.6;margin-bottom:10px}
.feature-card p{font-size:14px;color:var(--ink-soft);line-height:1.95}

/* ---------- 10. ながれ ---------- */
.flow-list{display:grid;gap:clamp(14px,2.4vw,20px);max-width:760px;margin-inline:auto}
.flow-item{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;
  background:var(--white);border-radius:var(--r-lg);padding:22px 20px;box-shadow:var(--shadow)}
@media(min-width:620px){.flow-item{grid-template-columns:88px 1fr;gap:20px;padding:26px 28px}}
.flow-num{display:grid;place-items:center}
.flow-num>span{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--sky);color:var(--white);font-family:var(--f-head);font-weight:700;line-height:1}
@media(min-width:620px){.flow-num>span{width:66px;height:66px}}
.flow-num .label{font-size:9.5px;letter-spacing:.14em;font-family:var(--f-en);opacity:.9}
.flow-num .n{font-size:24px;font-family:var(--f-en)}
.flow-body h3{font-size:16.5px;line-height:1.6;display:flex;gap:.5em;align-items:flex-start;margin-bottom:8px}
.flow-body h3 svg{width:1.15em;height:1.15em;flex:none;color:var(--coral);margin-top:.25em}
.flow-body p{font-size:14px;color:var(--ink-soft)}
.flow-tag{display:inline-block;margin-top:10px;background:var(--paper-sun);
  border-radius:var(--r-pill);padding:4px 14px;font-size:12.5px;font-weight:700;
  font-family:var(--f-head)}
.flow-link{display:inline-flex;align-items:center;gap:.4em;margin-top:12px;
  font-size:14px;font-weight:700;color:#3E86AE;text-decoration:none;font-family:var(--f-head)}
.flow-link svg{width:1.05em;height:1.05em}
.flow-link:hover{text-decoration:underline}
.flow-extra{text-align:center;margin-top:20px;font-size:13px;color:var(--ink-soft)}

/* ---------- 11. について ---------- */
.about-card{position:relative;background:var(--white);border-radius:var(--r-lg);
  padding:clamp(38px,6vw,56px) clamp(22px,4vw,48px) clamp(30px,5vw,44px);
  box-shadow:var(--shadow);max-width:var(--wrap-narrow);margin-inline:auto;text-align:center}
.about-ico{position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  width:60px;height:60px;border-radius:50%;background:var(--sun);color:var(--white);
  display:grid;place-items:center;box-shadow:var(--shadow)}
.about-ico svg{width:30px;height:30px}
.about-body{margin-top:18px;display:grid;gap:16px;color:var(--ink-soft);
  font-size:clamp(14.5px,2.9vw,15.5px);line-height:2.1}
.about-paws{display:flex;justify-content:center;gap:12px;margin-top:26px;color:var(--coral);opacity:.5}
.about-paws svg{width:18px;height:18px}
.about-paws svg:nth-child(2){transform:translateY(-6px) rotate(12deg)}
.about-paws svg:nth-child(3){transform:rotate(-10deg)}

/* ---------- 12. よくある質問 ---------- */
.faq-list{display:grid;gap:12px;max-width:760px;margin-inline:auto}
.faq-item{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.faq-q{display:flex;align-items:flex-start;gap:.6em;padding:18px 20px;cursor:pointer;
  font-family:var(--f-head);font-weight:700;font-size:15px;line-height:1.7;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.q-mark{flex:none;width:24px;height:24px;border-radius:50%;background:var(--sky);color:var(--white);
  display:grid;place-items:center;font-family:var(--f-en);font-size:13px;margin-top:2px}
.faq-q .chev{margin-left:auto;flex:none;width:18px;height:18px;color:var(--ink-soft);
  transition:transform .25s ease;margin-top:4px}
.faq-item[open] .faq-q .chev{transform:rotate(180deg)}
.faq-a{padding:0 20px 20px 54px;font-size:14px;color:var(--ink-soft);line-height:2}
.faq-a p+p{margin-top:10px}

/* ---------- 13. 料金 ---------- */
.paid-details{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow);
  max-width:var(--wrap-narrow);margin-inline:auto;overflow:hidden}
.paid-summary{display:flex;align-items:center;justify-content:center;gap:.6em;
  padding:22px;cursor:pointer;font-family:var(--f-head);font-weight:700;font-size:15.5px;list-style:none}
.paid-summary::-webkit-details-marker{display:none}
.paid-summary .chev{width:18px;height:18px;color:var(--ink-soft);transition:transform .25s}
.paid-details[open] .paid-summary .chev{transform:rotate(180deg)}
.paid-wrap{padding:0 clamp(20px,4vw,36px) clamp(28px,4vw,36px);border-top:1px dashed var(--line)}
.paid-assure{display:flex;gap:12px;align-items:flex-start;background:var(--paper-leaf);
  border-radius:var(--r-card);padding:16px 18px;margin-top:22px;font-size:14px;line-height:1.95}
.paid-assure svg{width:24px;height:24px;flex:none;color:#5FA873;margin-top:2px}
.paid-steps{display:grid;gap:8px;margin-top:24px}
.paid-steps li{display:flex;gap:.7em;align-items:center;font-size:14.5px;
  background:var(--paper);border-radius:var(--r-pill);padding:10px 18px}
.paid-steps .s{flex:none;width:24px;height:24px;border-radius:50%;background:var(--sun);
  display:grid;place-items:center;font-family:var(--f-en);font-weight:700;font-size:13px}
.price-table{margin-top:26px;background:var(--paper);border-radius:var(--r-card);overflow:hidden}
.price-table caption{font-family:var(--f-head);font-weight:700;font-size:14px;
  padding-bottom:10px;text-align:left}
.price-table td{padding:14px 18px;border-bottom:1px dashed var(--line);font-size:14.5px}
.price-table tr:last-child td{border-bottom:0}
.price-table td:last-child{text-align:right;font-family:var(--f-head);font-weight:700;
  font-size:19px;white-space:nowrap}
.price-table .yen{font-size:13px;margin-left:2px}
.paid-cta{margin-top:26px;text-align:center;display:grid;gap:12px;justify-items:center}

/* ---------- 14. 最後のCTA ---------- */
.final-cta{background:var(--paper-sun)}
.final-card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  max-width:var(--wrap-narrow);margin-inline:auto;text-align:center;
  padding:clamp(34px,5.5vw,52px) clamp(22px,4vw,48px)}
.final-badge{display:inline-block;background:var(--coral);color:var(--white);
  border-radius:var(--r-pill);padding:5px 18px;font-family:var(--f-head);font-weight:700;font-size:12.5px}
.final-title{margin-top:16px;font-size:clamp(22px,5vw,30px);line-height:1.5}
.final-lead{margin-top:16px;color:var(--ink-soft);font-size:14.5px;line-height:2}
.final-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.final-chips li{display:inline-flex;align-items:center;gap:.4em;background:var(--paper);
  border-radius:var(--r-pill);padding:7px 16px;font-size:13px;font-weight:700;font-family:var(--f-head)}
.final-chips svg{width:1em;height:1em;color:var(--leaf)}
.pc-comma{display:none}
@media(min-width:768px){.pc-comma{display:inline}}

/* ---------- 15. フッター ---------- */
.site-footer{background:var(--footer-bg);padding:clamp(40px,6vw,60px) 0 clamp(96px,12vw,52px)}
.footer-brand{justify-content:center;margin:0 auto 22px;display:flex}
.footer-works{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;
  font-size:13px;margin-bottom:20px}
.footer-works a{text-decoration:none;color:var(--ink-soft)}
.footer-works a:hover{color:var(--ink)}
.footer-works-all{font-weight:700;color:var(--ink) !important}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:13px;
  border-top:1px dashed rgba(74,59,50,.2);padding-top:20px}
.footer-nav a{text-decoration:none;color:var(--ink-soft)}
.footer-nav a:hover{color:var(--ink)}
.copyright{text-align:center;margin-top:22px;font-size:12px;color:var(--ink-soft);font-family:var(--f-en)}

.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px 12px;
  background:rgba(255,248,236,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);display:block}
.sticky-cta .btn{width:100%;padding:15px 20px;font-size:15px}
@media(min-width:768px){.sticky-cta{display:none}}
@media(min-width:768px){.site-footer{padding-bottom:clamp(40px,6vw,60px)}}

/* ---------- 16. 下層ページ共通 ---------- */
.crumbs{background:var(--paper);padding:14px 0 2px;font-size:12.5px;color:var(--ink-soft)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4em}
.crumbs li+li::before{content:"›";margin-right:.45em;color:var(--line)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--ink)}

.works-hero{position:relative;background:var(--paper);padding:clamp(24px,4vw,40px) 0 clamp(20px,3vw,32px);text-align:center}
.works-hero h1{font-size:clamp(22px,5vw,33px);line-height:1.5}
.works-hero h1 .sub{display:block;margin-top:12px;font-size:clamp(13px,2.7vw,15px);
  font-weight:500;color:var(--ink-soft);font-family:var(--f-body)}

.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,2vw,18px)}
@media(min-width:600px){.works-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.works-grid{grid-template-columns:repeat(4,1fr)}}
/* 作例がまだ少ない犬種は、大きめに中央へ（4列の左端にぽつんと置かない） */
.works-grid--few{display:flex;justify-content:center;gap:clamp(12px,2vw,20px);flex-wrap:wrap}
.works-grid--few figure{width:min(100%,300px)}
.works-grid figure{margin:0;background:var(--white);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow);line-height:0}
.works-grid img{aspect-ratio:2/3;object-fit:cover;width:100%}
.works-copy{max-width:var(--wrap-narrow);margin:clamp(32px,5vw,48px) auto 0}
.works-copy h2{font-size:clamp(19px,4vw,24px);margin-bottom:16px;text-align:center}
.works-copy p{color:var(--ink-soft);font-size:15px;line-height:2.1}
.works-copy p+p{margin-top:16px}

.breed-links{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.breed-links a{display:inline-flex;align-items:center;gap:.4em;background:var(--white);
  border-radius:var(--r-pill);padding:9px 18px;font-size:13.5px;text-decoration:none;
  font-weight:700;font-family:var(--f-head);box-shadow:var(--shadow);transition:transform .15s}
.breed-links a:hover{transform:translateY(-2px)}
.breed-links a svg{width:1em;height:1em;color:var(--coral)}
.breed-links a[aria-current="page"]{background:var(--sun)}

.breed-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,2vw,20px)}
@media(min-width:700px){.breed-cards{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.breed-cards{grid-template-columns:repeat(4,1fr)}}
.breed-card{background:var(--white);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow);text-decoration:none;display:block;transition:transform .2s}
.breed-card:hover{transform:translateY(-4px)}
.breed-card img{aspect-ratio:2/3;object-fit:cover;width:100%}
.breed-card .cap{display:block;padding:12px 14px;font-family:var(--f-head);font-weight:700;font-size:14px}
.breed-card .cap small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-soft);
  margin-top:3px;font-family:var(--f-body)}

/* ---------- 17. コラム ---------- */
.column-meta{margin-top:14px;display:flex;justify-content:center;gap:10px;align-items:center}
.column-cat{display:inline-block;background:var(--paper-sky);border-radius:var(--r-pill);
  padding:5px 15px;font-size:12px;font-weight:700;font-family:var(--f-head);color:#3E86AE}
.column-hero-fig{margin:clamp(22px,4vw,34px) auto 0;width:min(100% - 40px,860px)}
.column-hero-fig img{border-radius:var(--r-lg);aspect-ratio:3/2;object-fit:cover;
  width:100%;box-shadow:var(--shadow);background:var(--white)}

.column-lead{max-width:var(--wrap-narrow);margin:0 auto clamp(28px,4vw,40px);
  background:var(--white);border-radius:var(--r-lg);padding:24px clamp(20px,3vw,30px);
  box-shadow:var(--shadow);font-size:15px;line-height:2.1}
.column-lead strong{color:var(--coral)}

.column-body{max-width:var(--wrap-narrow);margin-inline:auto}
.column-body h2{font-size:clamp(19px,4vw,24px);line-height:1.6;
  margin:clamp(38px,5vw,54px) 0 18px;padding-left:16px;border-left:6px solid var(--sun);
  border-radius:3px}
.column-body h3{font-size:clamp(16px,3.2vw,18.5px);line-height:1.65;
  margin:clamp(26px,3.5vw,34px) 0 12px;color:#3E86AE}
.column-body p{font-size:15px;line-height:2.15;color:var(--ink)}
.column-body p+p{margin-top:16px}
.column-body>*+h2{margin-top:clamp(38px,5vw,54px)}

.check-list{display:grid;gap:10px;margin:22px 0}
.check-list li{display:flex;gap:.7em;align-items:flex-start;background:var(--white);
  border-radius:var(--r-card);padding:16px 18px;box-shadow:var(--shadow);font-size:14.5px;line-height:1.95}
.check-list li svg{width:20px;height:20px;flex:none;color:var(--leaf);margin-top:4px}
.check-list strong{font-family:var(--f-head)}

.column-fig{margin:clamp(26px,4vw,36px) 0}
.column-fig img{border-radius:var(--r-card);width:100%;aspect-ratio:3/2;object-fit:cover;
  box-shadow:var(--shadow);background:var(--white)}
.column-fig figcaption{margin-top:10px;font-size:12.5px;color:var(--ink-soft);text-align:center}

.column-note{margin:24px 0;background:var(--paper-sun);border-radius:var(--r-card);
  padding:18px 20px;font-size:14px;line-height:2}
.column-note .t{display:flex;align-items:center;gap:.45em;font-family:var(--f-head);
  font-weight:700;margin-bottom:8px}
.column-note .t svg{width:1.15em;height:1.15em;color:var(--sun)}

.column-toc{background:var(--white);border-radius:var(--r-lg);padding:22px 24px;
  box-shadow:var(--shadow);max-width:var(--wrap-narrow);margin:0 auto clamp(28px,4vw,40px)}
.column-toc>.t{display:flex;align-items:center;gap:.45em;font-family:var(--f-head);
  font-weight:700;font-size:14.5px;margin-bottom:12px}
.column-toc>.t svg{width:1.15em;height:1.15em;color:var(--coral)}
.column-toc ol{display:grid;gap:7px;counter-reset:toc}
.column-toc li{counter-increment:toc;font-size:14px;display:flex;gap:.6em}
.column-toc li::before{content:counter(toc);flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--paper-sky);color:#3E86AE;display:grid;place-items:center;
  font-family:var(--f-en);font-size:11px;font-weight:700;margin-top:3px}
.column-toc a{text-decoration:none;color:var(--ink)}
.column-toc a:hover{color:#3E86AE}

.column-cards{display:grid;gap:clamp(12px,2vw,18px);grid-template-columns:1fr}
@media(min-width:640px){.column-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.column-cards{grid-template-columns:repeat(3,1fr)}}
.column-card{background:var(--white);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow);text-decoration:none;display:flex;flex-direction:column;
  transition:transform .2s}
.column-card:hover{transform:translateY(-4px)}
.column-card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.column-card .b{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.column-card h3{font-size:15px;line-height:1.65}
.column-card .d{font-size:12.5px;color:var(--ink-soft);line-height:1.85}

.cat-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:clamp(26px,4vw,40px)}
.cat-nav a{display:inline-flex;align-items:center;gap:.4em;background:var(--white);
  border-radius:var(--r-pill);padding:9px 18px;font-size:13.5px;text-decoration:none;
  font-weight:700;font-family:var(--f-head);box-shadow:var(--shadow)}
.cat-nav a svg{width:1em;height:1em;color:var(--coral)}
.cat-group{margin-bottom:clamp(40px,6vw,64px)}
.cat-group h2{font-size:clamp(19px,4vw,24px);text-align:center;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;gap:.5em}
.cat-group h2 svg{width:1em;height:1em;color:var(--sun)}

.related-list{display:grid;gap:10px;max-width:var(--wrap-narrow);margin-inline:auto}
.related-list a{display:flex;align-items:center;gap:.6em;background:var(--white);
  border-radius:var(--r-card);padding:15px 18px;text-decoration:none;box-shadow:var(--shadow);
  font-size:14.5px;font-weight:700;font-family:var(--f-head);transition:transform .15s}
.related-list a:hover{transform:translateX(3px)}
.related-list a svg{width:1.1em;height:1.1em;flex:none;color:var(--coral)}

/* ---------- 18. 申し込みフォーム ---------- */
.apply-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  max-width:var(--wrap-narrow);margin:0 auto clamp(24px,4vw,34px)}
.apply-chips li{display:inline-flex;align-items:center;gap:.4em;background:var(--white);
  border-radius:var(--r-pill);padding:8px 16px;font-size:13px;font-weight:700;
  font-family:var(--f-head);box-shadow:var(--shadow)}
.apply-chips svg{width:1em;height:1em;color:var(--leaf);flex:none}

.apply-card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  max-width:var(--wrap-narrow);margin-inline:auto;
  padding:clamp(24px,4vw,40px) clamp(20px,3.5vw,42px) clamp(30px,4vw,44px)}

.field{margin-bottom:clamp(22px,3vw,28px)}
.field>label{display:block;font-family:var(--f-head);font-weight:700;font-size:15px;margin-bottom:6px}
.field .req{display:inline-block;margin-left:.5em;background:var(--coral);color:var(--white);
  border-radius:var(--r-pill);padding:2px 10px;font-size:11px;vertical-align:2px}
.field .hint{font-size:12.5px;color:var(--ink-soft);line-height:1.85;margin-bottom:10px}
.field-row{display:grid;gap:0 18px;grid-template-columns:1fr}
@media(min-width:620px){.field-row{grid-template-columns:1fr 1fr}}

.apply-card input[type="text"],
.apply-card input[type="email"],
.apply-card textarea{
  width:100%;background:var(--paper);border:2px solid var(--line);border-radius:14px;
  padding:13px 15px;font-family:var(--f-body);font-size:16px;color:var(--ink);
  transition:border-color .2s,background .2s}
.apply-card input::placeholder,.apply-card textarea::placeholder{color:#B9A99C}
.apply-card input:focus,.apply-card textarea:focus{outline:none;border-color:var(--sky);background:var(--white)}
.apply-card textarea{resize:vertical;line-height:1.9}

.apply-card input[type="file"]{
  width:100%;background:var(--paper-sun);border:2px dashed var(--line);border-radius:16px;
  padding:18px 15px;font-family:var(--f-body);font-size:14px;cursor:pointer}
.apply-card input[type="file"]:focus{outline:none;border-color:var(--sun)}
.apply-card input[type="file"]::file-selector-button{
  font:inherit;font-family:var(--f-head);font-weight:700;font-size:13px;
  background:var(--sun);color:var(--ink);border:0;border-radius:var(--r-pill);
  padding:9px 18px;margin-right:14px;cursor:pointer}

.photo-preview{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.photo-preview:empty{display:none}
.photo-thumb{margin:0;width:88px;background:var(--paper);border-radius:14px;
  padding:6px;box-shadow:var(--shadow);text-align:center}
.photo-thumb img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.photo-thumb figcaption{font-size:10.5px;color:var(--ink-soft);margin-top:5px;font-family:var(--f-en)}

.field--check{background:var(--paper);border-radius:var(--r-card);padding:16px 18px}
.checkline{display:flex;gap:.7em;align-items:flex-start;font-size:14px;line-height:1.8;cursor:pointer}
.checkline input[type="checkbox"]{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--sky)}

.form-status{margin:0 0 16px;border-radius:var(--r-card);padding:14px 16px;
  font-size:14px;line-height:1.85}
.form-status.is-warn{background:#FFEDE9;color:#9A4436}
.form-status.is-info{background:var(--paper-sky);color:#33708F}

/* 罠の欄（自動投稿よけ）。人には見せない */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.apply-done{text-align:center}
.apply-done .about-ico{background:var(--leaf)}

.apply-side{max-width:var(--wrap-narrow);margin:clamp(28px,4vw,40px) auto 0;
  background:var(--paper);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px)}
.apply-side h2{font-size:17px;text-align:center}
.apply-side .paid-steps li{background:var(--white)}
.apply-side .note{margin-top:12px}

/* ---------- 19. LINEスタンプ制作のプラン ---------- */
.plans{display:grid;gap:clamp(14px,2.4vw,22px);grid-template-columns:1fr;align-items:start}
@media(min-width:760px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{position:relative;background:var(--white);border-radius:var(--r-lg);
  padding:30px 24px 26px;box-shadow:var(--shadow);text-align:center;
  border:2px solid transparent}
.plan--pop{border-color:var(--sun);box-shadow:var(--shadow-lg)}
@media(min-width:760px){.plan--pop{transform:translateY(-10px)}}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--sun);border-radius:var(--r-pill);padding:5px 18px;
  font-family:var(--f-head);font-weight:700;font-size:12px;white-space:nowrap}
.plan-name{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--ink-soft);letter-spacing:.1em}
.plan-count{font-family:var(--f-head);font-weight:700;font-size:clamp(24px,4.5vw,30px);
  line-height:1.3;margin-top:6px}
.plan-count small{display:block;font-size:12.5px;font-weight:500;color:var(--ink-soft);
  font-family:var(--f-body);margin-top:4px}
.plan-price{margin-top:14px;font-family:var(--f-head);font-weight:700;line-height:1}
.plan-price .n{font-family:var(--f-en);font-size:clamp(30px,6vw,40px);color:var(--coral)}
.plan-price .y{font-size:15px;margin-left:3px}
.plan-for{margin-top:12px;font-size:13px;color:var(--ink-soft)}
.plan-points{display:grid;gap:8px;margin:20px 0 24px;text-align:left}
.plan-points li{position:relative;padding-left:1.4em;font-size:13.5px;line-height:1.85}
.plan-points li::before{content:"";position:absolute;left:.25em;top:.75em;
  width:7px;height:7px;border-radius:50%;background:var(--leaf)}
.plan .btn{width:100%}

/* トップページに置く「もうひとつのメニュー」 */
.side-offer{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow);
  max-width:var(--wrap-narrow);margin-inline:auto;text-align:center;
  padding:clamp(26px,4vw,40px) clamp(20px,3.5vw,40px)}
.side-offer-plans{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.side-offer-plans li{background:var(--paper);border-radius:var(--r-card);
  padding:14px 20px;min-width:104px;border:2px solid transparent}
.side-offer-plans li.pop{background:var(--paper-sun);border-color:var(--sun)}
.side-offer-plans b{display:block;font-family:var(--f-head);font-size:17px}
.side-offer-plans span{display:block;margin-top:4px;font-family:var(--f-head);
  font-weight:700;font-size:15px;color:var(--coral)}

.apply-card select{
  width:100%;background:var(--paper);border:2px solid var(--line);border-radius:14px;
  padding:13px 15px;font-family:var(--f-body);font-size:16px;color:var(--ink);
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A3B32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:18px;
  padding-right:44px}
.apply-card select:focus{outline:none;border-color:var(--sky);background-color:var(--white)}

/* ---------- 20. 法務ページ ---------- */
.legal-body{max-width:var(--wrap-narrow);margin-inline:auto;background:var(--white);
  border-radius:var(--r-lg);padding:clamp(26px,4vw,44px);box-shadow:var(--shadow)}
.legal-body h2{font-size:18px;margin:32px 0 12px;padding-left:14px;border-left:5px solid var(--sky)}
.legal-body h2:first-child{margin-top:0}
.legal-body p,.legal-body li{font-size:14.5px;line-height:2.05;color:var(--ink)}
.legal-body p+p{margin-top:12px}
.legal-body ul{list-style:disc;padding-left:1.4em;margin-top:10px;display:grid;gap:6px}
.legal-table td,.legal-table th{border-bottom:1px dashed var(--line);padding:14px 8px;
  font-size:14px;line-height:1.9;text-align:left;vertical-align:top}
.legal-table th{width:34%;font-family:var(--f-head);font-weight:700;white-space:nowrap}
@media(max-width:560px){
  .legal-table th,.legal-table td{display:block;width:auto;border-bottom:0;padding:6px 0}
  .legal-table td{border-bottom:1px dashed var(--line);padding-bottom:14px;margin-bottom:8px}
}