/* iGrex 案1「手描き水彩」 静的叩き台（r2 2026-09-26：大きさの段階と画面幅ごとの配置を整理）
   画面幅の切り替え
     〜599   : スマホ（すべて1列）
     600〜1099: タブレット・小さいPC（写真＋見出しは縦積み。一覧は「絵｜文」の横並び行）
     1100〜  : PC（デザイン画像どおりの段組み）
*/
:root{
  --paper:#f2ede2;
  --paper-2:#e8e0cf;
  --paper-3:#f7f3ea;
  --paper-band:#ece6d8;
  --ink:#2a2826;
  --ink-2:#4a4640;
  --ink-3:#77716a;
  --rust:#a9492b;
  --rust-d:#8e3a20;
  --olive:#8a6d45;
  --green:#7f9170;
  --line:#b9ae98;
  --f-min:"Shippori Mincho B1","Zen Old Mincho","Hiragino Mincho ProN",serif;
  --f-got:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --f-hand:"Klee One","Yomogi",cursive;
  --wrap:1200px;
  --gutter:clamp(16px,4vw,48px);

  /* 大きさの段階（全節で共通） */
  --fs-h2:clamp(1.85rem,1.3rem + 1.9vw,2.9rem);
  --fs-h3:clamp(1.22rem,1.1rem + .5vw,1.55rem);
  --fs-lead:clamp(1.08rem,1rem + .3vw,1.3rem);
  --fs-body:1.0625rem;
  --fs-small:1.06rem;
  --fs-hand:clamp(1.05rem,.95rem + .35vw,1.3rem);
  --fs-bubble:clamp(1.02rem,.94rem + .35vw,1.25rem);
  --lh-body:1.85;
  --lh-head:1.3;
  --sec-pad:clamp(56px,3rem + 3.5vw,104px);
  --head-gap:clamp(24px,1rem + 2vw,48px);
  --item-gap:clamp(28px,1.2rem + 2vw,48px);
  --radius:3px;
  --paper-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .46 0 0 0 0 .30 0 0 0 .16 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{
  margin:0;color:var(--ink);font-family:var(--f-got);font-size:var(--fs-body);line-height:var(--lh-body);
  background-color:var(--paper);background-image:var(--paper-noise),var(--paper-mottle);
  overflow-x:hidden;
}
main{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3{margin:0;font-weight:700}
.wrap{max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.sp-only{display:inline}
.pc-only{display:none}
.nw{display:inline-block;max-width:100%}
.arr{display:inline-block;margin-left:.5em;font-family:var(--f-got);transition:transform .2s}

/* ボタン（大きさは2段階だけ） */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.6em 1.5em;border-radius:var(--radius);
  background:var(--rust);color:#fff;text-decoration:none;font-weight:700;letter-spacing:.08em;
  box-shadow:0 2px 0 var(--rust-d),0 6px 14px rgba(120,50,20,.18);
  background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.06)),var(--paper-noise);
  border:0;cursor:pointer;font-family:var(--f-got);font-size:1rem;white-space:nowrap;
}
.btn:hover .arr,.btn:focus-visible .arr{transform:translateX(4px)}
.btn:focus-visible{outline:3px solid #1f2a44;outline-offset:3px}
.btn-sm{min-height:46px;padding:.4em 1.1em;font-size:1rem;font-weight:700;flex:none}
.btn-sm .arr{margin-left:.35em}
.btn-lg{min-height:56px;font-size:1.08rem;padding:.7em 1.8em}

/* 手書き（大きさ・傾きを共通に） */
.hand{font-family:var(--f-hand);font-weight:600;color:var(--ink-2);font-size:var(--fs-hand);line-height:1.6;letter-spacing:.06em;display:inline-block;transform:rotate(-3deg)}
.note-paper{
  background:var(--paper-3);background-image:var(--paper-noise);
  padding:1em 1.3em 1.1em;box-shadow:0 3px 8px rgba(60,40,20,.18);
  clip-path:polygon(0.0% 1.0%, 5.0% 2.2%, 10.0% 1.5%, 15.0% 2.4%, 20.0% 2.5%, 25.0% 0.3%, 30.0% 0.1%, 35.0% 3.3%, 40.0% 1.0%, 45.0% 0.9%, 50.0% 4.0%, 55.0% 1.9%, 60.0% 3.3%, 65.0% 1.9%, 70.0% 2.6%, 75.0% 0.6%, 80.0% 2.5%, 85.0% 3.5%, 90.0% 2.1%, 95.0% 3.0%, 98.0% 0.0%, 99.8% 8.3%, 97.7% 16.7%, 98.2% 25.0%, 99.1% 33.3%, 99.9% 41.6%, 97.4% 50.0%, 98.6% 58.3%, 97.8% 66.6%, 97.4% 75.0%, 97.9% 83.3%, 97.2% 91.6%, 100.0% 98.4%, 95.0% 96.8%, 90.0% 98.2%, 85.0% 96.3%, 80.0% 96.5%, 75.0% 99.6%, 70.0% 99.5%, 65.0% 99.1%, 60.0% 96.1%, 55.0% 98.3%, 50.0% 97.5%, 45.0% 98.8%, 40.0% 98.0%, 35.0% 98.5%, 30.0% 98.6%, 25.0% 97.7%, 20.0% 97.7%, 15.0% 96.4%, 10.0% 97.3%, 5.0% 96.3%, 2.6% 100.0%, 3.0% 91.7%, 2.0% 83.3%, 0.5% 75.0%, 2.6% 66.7%, 2.9% 58.4%, 2.7% 50.0%, 1.7% 41.7%, 2.1% 33.4%, 0.6% 25.0%, 2.5% 16.7%, 1.7% 8.4%);
}

/* 見出し（h2 はすべて同じ大きさ・同じ下線） */
.sec-title,.about-label{
  position:relative;display:inline-block;padding-bottom:.2em;
  font-family:var(--f-min);font-weight:800;font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:.04em;color:var(--ink);
}
.sec-title::after,.about-label::after{
  content:"";position:absolute;left:-2%;right:-4%;bottom:-.02em;height:.26em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M2 10 C 60 6, 130 12, 200 8 S 330 5, 398 9' fill='none' stroke='%23a9492b' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M20 13 C 120 10, 250 12, 380 11' fill='none' stroke='%23a9492b' stroke-width='1' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.sec-title small{font-family:var(--f-got);font-size:.8rem;letter-spacing:.3em;color:var(--rust);font-weight:500;margin-left:.8em;vertical-align:.5em}
.sec-head{position:relative;z-index:1;margin-bottom:var(--head-gap)}
.sec-head-center{text-align:center}
.sec-lead{font-size:var(--fs-lead);color:var(--ink-2);line-height:1.8}
.sec-head .hand{display:block;width:fit-content;margin-top:14px}
.sec-head-center .hand{margin-left:auto;margin-right:auto}
.item-title{display:flex;align-items:center;gap:.5em;font-family:var(--f-min);font-weight:800;font-size:var(--fs-h3);letter-spacing:.01em;line-height:1.35}
.num{
  flex:none;display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;
  background:var(--olive);color:#fff;font-family:var(--f-min);font-weight:700;font-size:1em;
  background-image:radial-gradient(circle at 35% 30%,rgba(255,255,255,.18),transparent 60%),var(--paper-noise);
}

/* 緑の筆跡 */
.brush{position:absolute;pointer-events:none;background:url(img/brush-green.webp) center/100% 100% no-repeat;z-index:0}

/* ちぎれ縁の帯 */
.band{
  -webkit-mask:url(img/torn-t.svg) top/100% 22px no-repeat,linear-gradient(#000 0 0) center/100% calc(100% - 42px) no-repeat,url(img/torn-b.svg) bottom/100% 22px no-repeat;
          mask:url(img/torn-t.svg) top/100% 22px no-repeat,linear-gradient(#000 0 0) center/100% calc(100% - 42px) no-repeat,url(img/torn-b.svg) bottom/100% 22px no-repeat;
}

/* ===== ヘッダー ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(242,237,226,.95);background-image:var(--paper-noise);border-bottom:1px solid rgba(120,100,70,.14)}
.header-inner{display:flex;align-items:center;gap:12px;min-height:64px;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-width:0}
.brand img{width:44px;height:44px;border-radius:2px;flex:none}
.brand-copy{font-family:var(--f-min);font-weight:700;font-size:.86rem;line-height:1.45;letter-spacing:.04em;white-space:nowrap}
.gnav{display:none}
.gnav a{text-decoration:none;font-size:1.08rem;font-weight:500;letter-spacing:.06em;padding:.6em .1em;position:relative;white-space:nowrap}
.gnav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:.3em;height:2px;background:var(--rust)}

/* ===== ヒーロー（〜1099 は写真の下に見出し） ===== */
.hero{position:relative;overflow:hidden;padding-bottom:clamp(40px,6vw,64px)}
.hero-photo{
  position:relative;height:clamp(200px,40vw,360px);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 20px) no-repeat,url(img/torn-b.svg) bottom/100% 22px no-repeat;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 20px) no-repeat,url(img/torn-b.svg) bottom/100% 22px no-repeat;
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:22% 28%}
.hero-note{display:none}
.hero-body{position:relative;z-index:2;padding:18px var(--gutter) 0;container-type:inline-size;max-width:760px}
.hand-top{margin-bottom:.35em;position:relative;transform-origin:left}
.hand-top::after{content:"";position:absolute;left:0;right:-6%;bottom:-.1em;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 50 3, 120 8, 198 3' fill='none' stroke='%23a9492b' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero-title{font-family:var(--f-min);font-weight:800;font-size:min(4.4rem,12.2cqi);line-height:1.24;letter-spacing:0;margin:.1em 0 .45em}
.hero-title .l{display:block;white-space:nowrap}
.hero-title em{font-style:normal;color:var(--rust)}
.hero-lead{font-size:var(--fs-lead);line-height:1.8;color:var(--ink-2);margin-bottom:1.2em;font-weight:500}
.hero .btn-lg{width:100%}
.brush-hero{display:none}

/* ===== 悩み ===== */
.nayami{padding:var(--sec-pad) 0;position:relative}
.nayami-list{display:grid;gap:var(--item-gap);max-width:520px;margin:0 auto}
.nayami-fig{position:relative;padding-top:10px}
.nayami-fig img{width:84%;aspect-ratio:1.3;object-fit:contain;object-position:left bottom}
.bubble{
  position:absolute;right:0;top:0;z-index:2;width:9.4em;aspect-ratio:1.55;display:grid;place-items:center;text-align:center;
  font-family:var(--f-min);font-weight:700;font-size:var(--fs-bubble);line-height:1.35;padding:0 .8em .5em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 130'%3E%3Cpath d='M100 6 C 160 5, 196 30, 194 60 C 192 92, 158 110, 112 110 C 100 110, 90 109, 80 107 L 48 126 L 58 101 C 22 92, 5 76, 6 56 C 8 26, 45 7, 100 6 Z' fill='%23fbf8f1' stroke='%232a2826' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M104 9 C 158 9, 190 33, 189 60' fill='none' stroke='%232a2826' stroke-width='.8' opacity='.45'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.nayami-text{margin-top:12px;font-size:var(--fs-body)}
.nayami-summary{max-width:880px;margin:calc(var(--item-gap) + 8px) auto 0;padding:1.4em 1.5em 1.5em;background:rgba(251,248,241,.72);border-left:3px solid var(--green);line-height:2}

/* ===== できること ===== */
.dekiru{position:relative;background:var(--paper-2);background-image:var(--paper-noise),var(--paper-mottle);padding:calc(var(--sec-pad) + 10px) 0}
.dekiru .sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.dekiru .sec-head .hand{margin-top:4px}
.brush-dekiru{left:-70px;top:8px;width:230px;height:72px;transform:rotate(-6deg);opacity:.75}
.dekiru-list{display:grid;gap:var(--item-gap)}
.dekiru-item{display:grid;gap:12px;align-content:start}
.dekiru-item img{width:100%;aspect-ratio:1.62;object-fit:contain}
.dekiru-foot{margin-top:var(--item-gap);font-size:var(--fs-lead);font-weight:500;padding:1em .4em;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}

/* ===== メニュー ===== */
.menu{position:relative;padding:var(--sec-pad) 0}
.menu .sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.menu-list{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.menu-card{display:grid;grid-template-columns:38% 1fr;gap:12px;align-items:center;background:var(--paper-3);background-image:var(--paper-noise);box-shadow:0 3px 10px rgba(60,40,20,.10);padding:12px 14px 12px 8px;border-radius:2px}
.menu-card img{width:100%;aspect-ratio:3/2;object-fit:contain}
.menu-title{font-family:var(--f-min);font-weight:800;font-size:var(--fs-h3);line-height:1.4;letter-spacing:.02em;margin-bottom:.3em}
.menu-card p{font-size:var(--fs-small);line-height:1.75;color:var(--ink-2)}

/* ===== 進め方 ===== */
.susumekata{position:relative;padding:var(--sec-pad) 0}
.susumekata .sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.brush-susume{display:none}
.steps{display:grid;gap:34px;position:relative;z-index:1}
.step{display:grid;grid-template-columns:40% 1fr;grid-template-rows:auto 1fr;column-gap:16px;row-gap:6px;position:relative}
.step .item-title{grid-column:2;grid-row:1;align-self:end}
.step img{grid-column:1;grid-row:1 / 3;width:100%;aspect-ratio:1.5;object-fit:contain}
.step p{grid-column:2;grid-row:2;font-size:var(--fs-small);line-height:1.8}
.step:not(:last-child)::after{
  content:"";position:absolute;left:calc(20% - 10px);bottom:-30px;width:20px;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M10 1 L10 19 M3 12 L10 20 L17 12' fill='none' stroke='%2393897a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===== 実例・井川について ===== */
.works-about{background:var(--paper-band);background-image:var(--paper-noise),var(--paper-mottle);padding:calc(var(--sec-pad) + 10px) 0}
.wa-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sec-pad)}
.works{display:grid;gap:22px}
.works-head{margin-bottom:calc(var(--head-gap) - 22px)}
.work{display:grid;background:var(--paper-3);background-image:var(--paper-noise);box-shadow:0 4px 14px rgba(60,40,20,.12);padding:10px 10px 18px}
.work-img{display:block;overflow:hidden}
.work-img img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center top;transition:transform .4s}
a.work-img:hover img{transform:scale(1.02)}
.work-body{padding:6px 6px 0}
.work-body h3{text-wrap:balance;font-family:var(--f-min);font-weight:800;font-size:var(--fs-h3);line-height:1.45;margin-bottom:.35em}
.work-body h3 a{display:inline-block;padding:.5em 0;text-decoration:underline;text-decoration-color:var(--rust);text-decoration-thickness:1px;text-underline-offset:.3em}
.work-body h3 .arr{color:var(--rust)}
.work-body p{font-size:var(--fs-small);color:var(--ink-2)}

/* 制作イメージ（枠だけ。画像とリンクはあとで差し込む） */
.sec-note{font-size:var(--fs-small);color:var(--ink-3);letter-spacing:.04em}
.samples .sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px}
.sample-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.sample-card{position:relative;display:grid;grid-template-columns:46% 1fr;grid-template-rows:auto auto;column-gap:14px;align-content:center;background:var(--paper-3);background-image:var(--paper-noise);box-shadow:0 4px 14px rgba(60,40,20,.10);padding:10px}
.sample-card > :first-child{grid-row:1 / 3}
.sample-img,.sample-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.sample-img{background:#d6d1c7;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 10px,transparent 10px 20px);outline:1.5px dashed #aaa293;outline-offset:-8px}
.sample-name{align-self:end;padding:0 4px;font-family:var(--f-min);font-weight:800;font-size:var(--fs-h3);line-height:1.4}
.sample-status{justify-self:start;align-self:start;margin:6px 0 0 4px;padding:.15em .8em;font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--ink-2);background:rgba(247,243,234,.92);border:1px solid var(--line);border-radius:2px}

/* 井川について */
.about-head{margin-bottom:var(--head-gap)}
.about-head .sec-title{margin-bottom:.5em}
.about-lead{font-family:var(--f-min);font-weight:800;font-size:clamp(1.45rem,1.1rem + 1.5vw,2.3rem);line-height:1.5;letter-spacing:.04em;color:var(--ink)}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.about-side{margin:0}
.about-photo{clip-path:polygon(0.0% 1.8%, 5.0% 2.2%, 10.0% 3.7%, 15.0% 1.9%, 20.0% 2.0%, 25.0% 2.3%, 30.0% 0.7%, 35.0% 2.0%, 40.0% 2.5%, 45.0% 3.2%, 50.0% 0.4%, 55.0% 1.2%, 60.0% 0.4%, 65.0% 3.2%, 70.0% 2.8%, 75.0% 0.2%, 80.0% 3.9%, 85.0% 3.9%, 90.0% 2.6%, 95.0% 2.5%, 99.5% 0.0%, 100.0% 8.3%, 98.4% 16.7%, 99.8% 25.0%, 99.4% 33.3%, 99.3% 41.6%, 99.9% 50.0%, 98.6% 58.3%, 98.7% 66.6%, 97.5% 75.0%, 98.4% 83.3%, 98.1% 91.6%, 100.0% 98.0%, 95.0% 97.4%, 90.0% 98.2%, 85.0% 98.9%, 80.0% 96.0%, 75.0% 96.0%, 70.0% 96.6%, 65.0% 97.2%, 60.0% 98.7%, 55.0% 99.1%, 50.0% 98.8%, 45.0% 99.7%, 40.0% 96.9%, 35.0% 98.4%, 30.0% 96.6%, 25.0% 98.5%, 20.0% 96.2%, 15.0% 96.6%, 10.0% 100.0%, 5.0% 99.2%, 2.7% 100.0%, 1.4% 91.7%, 2.9% 83.3%, 1.2% 75.0%, 0.2% 66.7%, 1.9% 58.4%, 2.3% 50.0%, 0.8% 41.7%, 0.3% 33.4%, 1.0% 25.0%, 2.9% 16.7%, 2.3% 8.4%)}
.about-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:38% 35%}
.about-profile{margin-top:14px;padding:0 4px}
.about-name{font-family:var(--f-min);font-weight:800;font-size:var(--fs-h3);letter-spacing:.08em}
.about-name span{font-size:.72em;font-weight:600;letter-spacing:.04em;color:var(--ink-3)}
.about-meta{margin-top:.2em;font-size:var(--fs-small);color:var(--ink-2);line-height:1.7}
.about-text{background:var(--paper-3);background-image:var(--paper-noise);padding:2.2em 1.4em 2.4em;
  /* 縦に長いので、ちぎれ縁は上下に固定の高さで付ける（割合で付けると本文が欠ける） */
  -webkit-mask:url(img/torn-t.svg) top/100% 16px no-repeat,linear-gradient(#000 0 0) center/100% calc(100% - 30px) no-repeat,url(img/torn-b.svg) bottom/100% 16px no-repeat;
          mask:url(img/torn-t.svg) top/100% 16px no-repeat,linear-gradient(#000 0 0) center/100% calc(100% - 30px) no-repeat,url(img/torn-b.svg) bottom/100% 16px no-repeat}
.about-text p{font-size:clamp(1.06rem,1rem + .25vw,1.2rem);line-height:2.05;letter-spacing:.02em}
.about-text p + p{margin-top:1.3em}
.about-text p{max-width:34em;margin-left:auto;margin-right:auto}
.about-text p:last-child{margin-top:2em}

/* ===== 相談する ===== */
.contact{padding:var(--sec-pad) 0;position:relative}
.contact-wrap{max-width:calc(820px + var(--gutter)*2)}
.contact-head{text-align:center;margin-bottom:var(--head-gap)}
.contact-head .hand{display:block;width:max-content;max-width:100%;margin:14px auto 0}
.contact-form{background:var(--paper-3);background-image:var(--paper-noise);padding:28px 20px 30px;box-shadow:0 4px 16px rgba(60,40,20,.12);clip-path:polygon(0.0% 1.8%, 5.0% 2.2%, 10.0% 3.7%, 15.0% 1.9%, 20.0% 2.0%, 25.0% 2.3%, 30.0% 0.7%, 35.0% 2.0%, 40.0% 2.5%, 45.0% 3.2%, 50.0% 0.4%, 55.0% 1.2%, 60.0% 0.4%, 65.0% 3.2%, 70.0% 2.8%, 75.0% 0.2%, 80.0% 3.9%, 85.0% 3.9%, 90.0% 2.6%, 95.0% 2.5%, 99.5% 0.0%, 100.0% 8.3%, 98.4% 16.7%, 99.8% 25.0%, 99.4% 33.3%, 99.3% 41.6%, 99.9% 50.0%, 98.6% 58.3%, 98.7% 66.6%, 97.5% 75.0%, 98.4% 83.3%, 98.1% 91.6%, 100.0% 98.0%, 95.0% 97.4%, 90.0% 98.2%, 85.0% 98.9%, 80.0% 96.0%, 75.0% 96.0%, 70.0% 96.6%, 65.0% 97.2%, 60.0% 98.7%, 55.0% 99.1%, 50.0% 98.8%, 45.0% 99.7%, 40.0% 96.9%, 35.0% 98.4%, 30.0% 96.6%, 25.0% 98.5%, 20.0% 96.2%, 15.0% 96.6%, 10.0% 100.0%, 5.0% 99.2%, 2.7% 100.0%, 1.4% 91.7%, 2.9% 83.3%, 1.2% 75.0%, 0.2% 66.7%, 1.9% 58.4%, 2.3% 50.0%, 0.8% 41.7%, 0.3% 33.4%, 1.0% 25.0%, 2.9% 16.7%, 2.3% 8.4%)}
.field{margin-bottom:18px}
.field label{display:flex;align-items:center;gap:.6em;font-weight:700;font-size:var(--fs-body);margin-bottom:6px}
.req,.opt{font-size:.72rem;font-weight:700;padding:.1em .6em;border-radius:2px;letter-spacing:.06em}
.req{background:var(--rust);color:#fff}
.opt{border:1px solid var(--line);color:var(--ink-3)}
.field input[type=text],.field input[type=email],.field textarea{
  width:100%;min-height:48px;padding:.6em .8em;font:inherit;font-size:16px;color:var(--ink);
  background:#fffdf8;border:1.5px solid #cfc4ae;border-radius:var(--radius);
}
.field textarea{line-height:1.7;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--rust);box-shadow:0 0 0 3px rgba(169,73,43,.15)}
.field input[type=file]{font-size:var(--fs-small);max-width:100%;min-height:44px}
.field input[type=file]::file-selector-button{min-height:44px;margin-right:.8em;padding:0 1em;border:1.5px solid #cfc4ae;background:#fffdf8;border-radius:var(--radius);font:inherit;cursor:pointer}
.check{display:flex;align-items:center;gap:.7em;min-height:44px;margin:6px 0 20px;font-size:var(--fs-body);cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--rust);flex:none}
.check a{color:var(--rust);display:inline-block;padding:.5em 0}
.btn-submit{width:100%}

/* ===== フッター ===== */
.site-footer{background:#2b2926;color:#e9e3d6;background-image:var(--paper-noise);padding:52px 0 44px;font-size:var(--fs-small)}
.footer-inner{display:grid;gap:26px}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand img{width:44px;height:44px;border:1px solid rgba(255,255,255,.2)}
.footer-brand p{font-family:var(--f-min);font-weight:700;line-height:1.5;letter-spacing:.06em}
.biz-table{border-collapse:collapse;width:100%;max-width:720px}
.biz-table caption{text-align:left;font-family:var(--f-min);font-weight:800;font-size:var(--fs-h3);margin-bottom:.5em;color:#fff}
.biz-table th,.biz-table td{text-align:left;vertical-align:top;padding:.55em .2em;border-bottom:1px solid rgba(255,255,255,.14);line-height:1.7}
.biz-table th{width:6.5em;font-weight:500;color:#bdb4a3;white-space:nowrap}
.footer-links{display:flex;gap:6px 22px;flex-wrap:wrap}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;color:#fff}
.footer-en{font-size:.78rem;line-height:1.7;color:#a8a090;max-width:720px}

/* ============ 600〜 ============ */
@media (min-width:600px){
  .sp-only{display:none}
  .pc-only{display:inline}
  .brand-copy{font-size:.95rem}
  .hero .btn-lg{width:auto;min-width:320px}

  /* 〜1099 は中身を幅860の1本の柱にそろえる */
  .nayami .wrap,.dekiru .wrap,.susumekata .wrap,.works-about .wrap{max-width:calc(860px + var(--gutter)*2)}
  /* 実例は1件なので、写真｜説明 の横並び */
  .work-main{grid-template-columns:1.35fr 1fr;align-items:center;column-gap:24px;padding:12px}
  .work-main .work-body{padding:0 10px 0 0}
  /* 悩み：絵｜文 の横並び */
  .nayami-list{max-width:none}
  .nayami-item{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center}
  .nayami-fig{padding-top:48px}
  .nayami-fig img{width:88%}
  .bubble{right:-6%}
  .nayami-text{margin-top:0}

  /* できること：絵｜文 */
  .dekiru-list{max-width:none}
  .dekiru-item{grid-template-columns:1fr 1.25fr;grid-template-rows:auto 1fr;column-gap:28px;row-gap:8px}
  .dekiru-item img{grid-column:1;grid-row:1 / 3;align-self:center}
  .dekiru-item .item-title{grid-column:2;grid-row:1;align-self:end}
  .dekiru-item p{grid-column:2;grid-row:2}
  .dekiru-foot{padding:1em 0}

  .brush-susume{display:block;right:-70px;top:calc(var(--sec-pad) - 30px);width:280px;height:86px;transform:rotate(-8deg);opacity:.7}
  .steps{row-gap:40px}
  .step{grid-template-columns:30% 1fr}
  .step:not(:last-child)::after{left:calc(15% - 10px);bottom:-34px}

  .menu .wrap{max-width:calc(860px + var(--gutter)*2)}
  .menu-list{grid-template-columns:1fr 1fr;gap:20px}
  .menu-card{grid-template-columns:1fr;align-items:start;align-content:start;gap:8px;padding:14px 18px 20px}
  .menu-card img{width:86%;margin:0 auto}
  .sample-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .sample-card{display:block;padding:10px 10px 14px}
  .sample-name{margin-top:10px}
  .sample-status{position:absolute;left:18px;top:18px;margin:0}
  .about-side{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:end}
  .about-profile{margin:0 0 6px}
  .about-text{padding:2.2em 2.4em 2.4em}
  .contact-form{padding:40px 48px 44px}
  .site-footer .footer-inner{grid-template-columns:1fr}
}

/* ============ 768〜1099：見出しの右に副文とボタン ============ */
@media (min-width:768px) and (max-width:1099.98px){
  .hero-body{max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto auto;column-gap:clamp(28px,4vw,56px)}
  .hand-top{grid-column:1;grid-row:1;justify-self:start}
  .hero-title{grid-column:1;grid-row:1 / 5;margin-bottom:0;font-size:min(3.6rem,12.2cqi)}
  .hero-lead{grid-column:2;grid-row:3;margin-bottom:1em}
  .hero .btn-lg{grid-column:2;grid-row:4;width:100%;max-width:340px;min-width:0;margin-bottom:.3em}
}

/* ============ 1100〜（PC） ============ */
@media (min-width:1100px){
  body{font-size:1.125rem}
  html{scroll-padding-top:90px}
  .header-inner{min-height:82px}
  .brand img{width:56px;height:56px}
  .brand-copy{font-size:1.05rem}
  .gnav{display:flex;gap:clamp(18px,2vw,32px);margin-right:clamp(12px,1.5vw,24px)}
  .btn-sm{padding:.5em 1.4em;font-size:1.08rem;min-height:50px}

  .nayami .wrap,.dekiru .wrap,.susumekata .wrap,.works-about .wrap,.menu .wrap{max-width:calc(var(--wrap) + var(--gutter)*2)}
  .menu-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .menu .sec-head{flex-direction:row;align-items:flex-end;gap:10px 32px}
  .menu .sec-head .sec-lead{padding-bottom:.5em}
  .nayami-summary{max-width:880px}
  /* ヒーロー：左に写真、右に見出し */
  .hero{display:flex;align-items:center;min-height:clamp(600px,46vw,780px);padding:0}
  .hero-photo{position:absolute;inset:0 auto 0 0;width:62%;height:auto;-webkit-mask:none;mask:none;clip-path:polygon(0% 0%, 100% 0%, 99.77% 2.17%, 98.60% 4.35%, 98.80% 6.52%, 99.21% 8.70%, 98.72% 10.87%, 98.41% 13.04%, 98.23% 15.22%, 96.87% 17.39%, 96.32% 19.57%, 96.04% 21.74%, 96.21% 23.91%, 96.08% 26.09%, 96.10% 28.26%, 95.44% 30.43%, 94.99% 32.61%, 94.81% 34.78%, 94.03% 36.96%, 93.81% 39.13%, 92.75% 41.30%, 93.44% 43.48%, 92.32% 45.65%, 92.94% 47.83%, 92.20% 50.00%, 91.38% 52.17%, 90.78% 54.35%, 90.61% 56.52%, 90.80% 58.70%, 90.54% 60.87%, 89.37% 63.04%, 88.96% 65.22%, 89.25% 67.39%, 88.99% 69.57%, 88.37% 71.74%, 87.79% 73.91%, 87.97% 76.09%, 86.79% 78.26%, 86.85% 80.43%, 86.73% 82.61%, 87.08% 84.78%, 86.29% 86.96%, 86.28% 89.13%, 85.36% 91.30%, 84.67% 93.48%, 84.34% 95.65%, 84.99% 97.83%, 84% 97%, 82.32% 97.71%, 80.64% 96.52%, 78.96% 95.67%, 77.28% 97.09%, 75.60% 97.62%, 73.92% 96.86%, 72.24% 96.37%, 70.56% 97.60%, 68.88% 98.38%, 67.20% 96.28%, 65.52% 95.70%, 63.84% 96.61%, 62.16% 96.86%, 60.48% 97.65%, 58.80% 96.19%, 57.12% 97.99%, 55.44% 97.82%, 53.76% 97.11%, 52.08% 96.22%, 50.40% 98.51%, 48.72% 96.54%, 47.04% 98.06%, 45.36% 96.29%, 43.68% 96.26%, 42.00% 97.88%, 40.32% 96.48%, 38.64% 98.46%, 36.96% 97.09%, 35.28% 96.16%, 33.60% 96.27%, 31.92% 96.85%, 30.24% 97.60%, 28.56% 98.45%, 26.88% 96.04%, 25.20% 96.78%, 23.52% 96.24%, 21.84% 98.52%, 20.16% 96.03%, 18.48% 95.76%, 16.80% 95.78%, 15.12% 96.78%, 13.44% 98.29%, 11.76% 98.25%, 10.08% 97.80%, 8.40% 98.59%, 6.72% 98.39%, 5.04% 96.59%, 3.36% 96.16%, 1.68% 98.41%, 0% 97%)}
  .hero-photo img{object-position:18% 42%}
  .hero-note{display:block;position:absolute;left:36%;bottom:48px;z-index:2;font-family:var(--f-hand);font-weight:600;font-size:var(--fs-hand);line-height:1.6;color:var(--ink-2);transform:rotate(-3deg)}
  .hero-body{margin-left:60%;width:40%;max-width:640px;padding:48px var(--gutter) 56px 1%}
  .hand-top{margin-left:1.2em}
  .hero-title{font-size:min(4.8rem,12.2cqi);line-height:1.2;margin:.15em 0 .5em}
  .hero .btn-lg{min-width:min(340px,100%);justify-content:space-between}

  /* 悩み：3列 */
  .nayami-list{max-width:none;grid-template-columns:repeat(3,1fr);gap:40px}
  .nayami-item{display:block}
  .nayami-fig{padding-top:64px}
  .nayami-fig img{width:92%}
  .bubble{right:-2%}
  .nayami-text{margin-top:14px}

  /* できること：3列 */
  .dekiru .sec-head{flex-direction:row;align-items:flex-end;gap:10px 32px}
  .dekiru .sec-head .sec-lead{padding-bottom:.5em}
  .dekiru .sec-head .hand{margin:0 0 .4em auto}
  .brush-dekiru{left:-110px;top:calc(var(--sec-pad) - 62px);width:360px;height:110px}
  .dekiru-list{max-width:none;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto;column-gap:44px;row-gap:0}
  .dekiru-item{position:relative;grid-template-columns:1fr;grid-template-rows:subgrid;grid-row:span 3;row-gap:14px}
  .dekiru-item + .dekiru-item::before{content:"";position:absolute;left:-22px;top:0;bottom:0;border-left:1px solid rgba(120,100,70,.28)}
  .dekiru-item img{align-self:center}
  .dekiru-item img,.dekiru-item .item-title,.dekiru-item p{grid-column:1;grid-row:auto}
  .dekiru-foot{max-width:880px;margin-left:auto;margin-right:auto;text-align:center}

  /* 進め方：5列（行をそろえる） */
  .susumekata .sec-head{flex-direction:row;align-items:flex-end;gap:10px 32px}
  .susumekata .sec-head .sec-lead{padding-bottom:.5em}
  .brush-susume{right:-40px;top:6px;width:400px;height:112px}
  /* 5番目は本文が長いので列を少し広くして、行数の差を小さくする */
  .steps{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.35fr);grid-template-rows:auto auto auto;column-gap:40px;row-gap:0}
  .step:last-child img{max-width:calc((100% - 0px) / 1.35);}
  .step{display:grid;grid-template-columns:1fr;grid-template-rows:subgrid;grid-row:span 3;row-gap:12px}
  .step .item-title,.step img,.step p{grid-column:1;grid-row:auto;align-self:start}
  .step .item-title{white-space:nowrap}
  .step:not(:last-child)::after{
    left:auto;right:-31px;bottom:auto;top:calc(var(--fs-h3) * 1.35 + 12px + 12%);width:22px;height:20px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M1 10 L19 10 M12 3 L20 10 L12 17' fill='none' stroke='%2393897a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* 実例：1件を 写真｜説明 で大きく */
  .work-main{grid-template-columns:1.5fr 1fr;column-gap:40px;padding:14px}
  .work-main .work-body{padding:0 24px 0 0}
  .work-main .work-body p{font-size:var(--fs-body)}
  .sample-list{gap:28px}
  /* 井川について：左に写真（画面に追従）、右に本文 */
  .about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:clamp(40px,4vw,64px);align-items:start}
  .about-side{display:block;position:sticky;top:112px}
  .about-profile{margin-top:16px}
  .about-text{padding:2.6em 3em 2.8em}
  .site-footer .footer-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);grid-template-rows:auto auto 1fr;column-gap:64px;row-gap:18px;align-items:start}
  .footer-brand{grid-row:1}
  .biz-table{grid-column:2;grid-row:1 / 4}
  .footer-links{grid-column:1;grid-row:2}
  .footer-en{grid-column:1;grid-row:3}
}

/* 制作イメージのカード（2026-09-27 PM追加） */
.sample-thumb{display:block;overflow:hidden}
.sample-thumb img{transition:transform .3s}
.sample-thumb:hover img{transform:scale(1.03)}
.sample-name a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.4em;min-height:44px}
.sample-name .arr{color:var(--rust);font-size:.9em}
.sample-catch{align-self:start;padding:0 4px;margin:0;font-size:.98rem;line-height:1.6;color:var(--ink-2)}

/* 1100〜1279で「知ってもらう場所をつくる」が折り返すのを防ぐ（2026-09-27） */
@media (min-width:1100px) and (max-width:1279.98px){.dekiru .item-title{font-size:1.3rem}}

/* スクロールの動き（2026-09-27）。JSが動かないときは .js が付かないので全部そのまま見える */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .menu-card.rv,.js .sample-card.rv,.js .step.rv{transform:translateY(28px) scale(.97)}
.js .menu-card.rv.in,.js .sample-card.rv.in,.js .step.rv.in{transform:none}
.js .hand-side.rv{transform:translateY(12px) rotate(-6deg)}
.js .hand-side.rv.in{transform:rotate(-3deg)}
.js .nayami-item.rv .bubble{opacity:0;transform:translateY(10px) scale(.9);transition:opacity .5s ease .35s,transform .6s cubic-bezier(.3,1.4,.5,1) .35s}
.js .nayami-item.rv.in .bubble{opacity:1;transform:none}
/* ヒーロー：読み込み時に見出しを1行ずつ */
.js .hero-title .l{animation:rvUp .9s cubic-bezier(.2,.7,.2,1) both}
.js .hero-title .l:nth-child(2){animation-delay:.12s}
.js .hero-title .l:nth-child(3){animation-delay:.24s}
.js .hero-title .l:nth-child(4){animation-delay:.36s}
.js .hero-lead,.js .hero .btn-lg{animation:rvUp .9s cubic-bezier(.2,.7,.2,1) .5s both}
.js .hand-top{animation:rvFade 1s ease .6s both}
.js .hero-photo img{animation:rvZoom 1.8s ease-out both}
@keyframes rvUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes rvZoom{from{transform:scale(1.12)}to{transform:scale(1.06)}}
@keyframes rvFade{from{opacity:0}to{opacity:1}}
@media (max-width:1099.98px){ @keyframes rvZoom{from{transform:scale(1.08)}to{transform:none}} }
.hero-photo img{will-change:transform}
@media (prefers-reduced-motion: reduce){ .js .rv,.js .rv.in{opacity:1;transform:none;transition:none} .js .hero-title .l,.js .hero-lead,.js .hero .btn-lg,.js .hand-top,.js .hero-photo img{animation:none} }

/* 事業概要の事業内容（2026-09-28） */
.biz-list{list-style:none;margin:0;padding:0}
.biz-list li{position:relative;padding-left:1em}
.biz-list li::before{content:"";position:absolute;left:0;top:.8em;width:.4em;height:1px;background:currentColor;opacity:.6}

/* 768〜1099で副文が割れるのを防ぐ（2026-09-28） */
@media (min-width:768px) and (max-width:1099.98px){.hero-lead{font-size:1rem}}

/* 768〜1099：見出しが長くなったので、副文とボタンは見出しの下に置く（2026-09-28） */
@media (min-width:768px) and (max-width:1099.98px){.hero-body{display:block}.hero-title{font-size:min(4.4rem,12.2cqi);margin-bottom:.45em}.hero .btn-lg{width:auto;min-width:340px;max-width:none}}