@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600&family=Yuji+Syuku&display=swap');
:root{--paper:#d1b496;--paper-wash:rgba(250,241,224,.3);--ink:#271c14;--muted:#4e3b2c;--line:#a99072;--red:#4a3021;--serif:'Shippori Mincho B1','Yu Mincho',serif;--sans:var(--serif);--display:'Yuji Syuku','Shippori Mincho B1','Yu Mincho',serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:2;letter-spacing:.045em}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:2px solid var(--red);outline-offset:6px}a:hover{color:var(--red)}img{display:block;width:100%;height:auto}figure,p,h1,h2,h3{margin:0}h1,h2,h3{font-weight:500}figure{position:relative}figcaption{font-size:14px;color:var(--muted);letter-spacing:.03em;margin-top:7px;text-align:right}.wrap{width:min(1120px,calc(100% - 112px));margin-inline:auto}.site-header{display:flex;align-items:center;justify-content:space-between;padding-block:31px;border-bottom:1px solid var(--line)}.wordmark{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:.15em;line-height:1.5}.wordmark span{display:block;font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:.15em;margin-top:4px}.site-header nav{display:flex;gap:36px;font-size:14px}.site-header nav a:last-child span{color:var(--red);margin-left:10px}.hero{padding-top:39px}.hero-meta{display:flex;align-items:center;justify-content:space-between}.tiny-label{font-size:14px;letter-spacing:.16em;font-weight:500}.tiny-label i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:10px;vertical-align:middle}.hero-note{font-size:14px;letter-spacing:.15em}.hero h1{font-family:var(--serif);font-size:clamp(48px,6.6vw,86px);letter-spacing:.035em;line-height:1.5;margin-top:43px;font-weight:400}.hero-last{display:inline-block;padding-left:1.6em}.red-dot{color:var(--red)}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:32px;margin-bottom:44px}.hero-bottom p{font-size:14px;line-height:2.1}.text-link{display:inline-flex;align-items:center;gap:30px;padding-block:7px;border-bottom:1px solid var(--ink);font-size:14px}.text-link span[aria-hidden]{color:var(--red);font-size:17px}.hero-image img{height:310px;object-fit:cover;object-position:50% 52%}.hero-image .image-note{position:absolute;left:26px;bottom:50px;background:var(--paper);padding:11px 20px;font-family:var(--serif);font-size:15px;letter-spacing:.1em}.section{padding-block:100px;border-bottom:1px solid var(--line)}.section-marker{display:flex;align-items:flex-start;gap:18px;flex-shrink:0}.section-marker>span{font-size:14px;color:var(--red);line-height:2.3}.section-marker p{font-size:14px;line-height:1.8;font-weight:500}.section-marker small{display:block;font-size:14px;letter-spacing:.16em;color:var(--muted);font-weight:400;margin-top:6px}.intro{display:grid;grid-template-columns:1fr 2.3fr;gap:50px}.intro-copy h2{font-family:var(--serif);font-size:34px;line-height:1.9;letter-spacing:.07em}.body-copy{margin-top:32px;max-width:530px}.body-copy p+p{margin-top:20px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:48px}.section-aside{font-size:14px;color:var(--muted)}.service-web{display:grid;grid-template-columns:1fr 1.12fr;gap:60px;align-items:center;padding-bottom:55px}.service-main>.tiny-label{color:var(--red)}.service-main h2{font-family:var(--serif);font-size:38px;margin-top:8px;letter-spacing:.06em}.service-lead{font-family:var(--serif);font-size:19px;line-height:1.9;margin-block:21px}.service-main>p:not(.service-lead){font-size:14px}.tags{display:flex;list-style:none;padding:0;margin:24px 0 0;gap:8px;flex-wrap:wrap}.tags li{font-size:14px;border:1px solid var(--line);padding:3px 12px}.service-image img{aspect-ratio:1.13;object-fit:cover}.service-secondary{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid var(--line);padding-top:38px}.service-number{font-size:14px;color:var(--red);letter-spacing:.1em}.service-secondary h3{font-family:var(--serif);font-size:27px;margin:7px 0 18px}.service-secondary p{font-size:14px}.video-image{margin-top:28px}.video-image img{height:215px;object-fit:cover}.planning{border-left:1px solid var(--line);padding-left:42px}.planning-note{margin-top:37px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-family:var(--serif);font-size:17px}.planning-note span[aria-hidden]{font-family:var(--sans);color:var(--red);font-size:14px;margin-left:18px}.partner-note{margin-top:42px;font-size:14px;color:var(--muted)}.partner-note>span{margin-right:10px;color:var(--red);font-size:18px}.about{display:grid;grid-template-columns:1fr 2.3fr;gap:50px}.about-content{display:grid;grid-template-columns:1fr 1fr;gap:35px}.profile h2{font-family:var(--serif);font-size:36px;letter-spacing:.12em;margin:12px 0 26px;line-height:1.7}.profile h2 span{display:block;font-family:var(--sans);font-size:14px;letter-spacing:.15em;font-weight:400}.profile>p:last-child{font-size:14px;line-height:2.2}.book{border-left:1px solid var(--line);padding-left:28px}.book>.tiny-label{color:var(--red)}.book h3{font-family:var(--serif);font-size:28px;line-height:1.6;margin:17px 0}.book p{font-size:14px;color:var(--muted);line-height:2.2}.book .text-link{margin-top:18px;font-size:14px;gap:14px}.contact{margin-top:75px;background:#e9e6db}.contact-inner{padding-block:58px 65px}.contact-top{display:flex;align-items:center;justify-content:space-between}.contact-mark{font-size:43px;color:var(--red);line-height:1}.contact h2{font-family:var(--serif);font-size:clamp(30px,4vw,48px);margin:16px 0 23px;letter-spacing:.08em}.contact-inner>p{font-size:14px}.contact-action{margin-top:32px}.contact-pending{display:inline-block;font-size:14px;border-bottom:1px solid #8e8b7f;padding-block:10px;color:#5b5c53}.contact-audience{color:var(--muted);margin-top:30px;font-size:14px!important}.site-footer{display:flex;gap:32px;align-items:center;padding-block:32px}.footer-logo{font-family:var(--serif);font-size:20px;letter-spacing:.1em}.site-footer>p{font-size:14px;color:var(--muted)}.site-footer small{font-size:14px;margin-left:auto;color:var(--muted)}.back-top{font-size:18px;margin-left:5px}.mobile-break{display:none}.skip-link{position:absolute;top:-100px;left:20px;z-index:10;background:var(--paper);padding:10px}.skip-link:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.works-main{padding-block:70px 90px}.works-title{font-family:var(--serif);font-size:52px;margin:14px 0 20px}.works-intro{font-size:14px;color:var(--muted);max-width:650px}.works-list{margin-top:50px}.work-item{display:grid;grid-template-columns:1fr 1.3fr;gap:45px;padding-block:38px;border-top:1px solid var(--line)}.work-item img{aspect-ratio:3/2;object-fit:cover}.work-item h2{font-family:var(--serif);font-size:26px;margin:14px 0}.work-item .sample-label{color:var(--red);font-size:14px}.work-item p{font-size:14px}.work-item dl{font-size:14px;border-top:1px solid var(--line);padding-top:16px;margin-top:22px}.work-item dt{color:var(--muted)}.work-item dd{margin:3px 0 0}.works-return{margin-top:30px}
@media(min-width:1500px){.hero h1{font-size:91px}}
@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.intro,.about{grid-template-columns:1fr 2.7fr;gap:25px}.service-web{gap:35px}.service-main h2{font-size:32px}.service-secondary{gap:35px}.planning{padding-left:30px}.about-content{gap:25px}.book{padding-left:22px}.desktop-break{display:none}.hero-image img{height:280px}}
@media(max-width:700px){body{font-size:14px}.wrap{width:calc(100% - 40px)}.site-header{padding-block:22px;align-items:flex-start}.wordmark{font-size:21px}.wordmark span{font-size:14px}.site-header nav{gap:18px;font-size:14px;padding-top:8px}.site-header nav a:first-child:not(:only-child){display:none}.site-header nav a:last-child span{margin-left:4px}.hero{padding-top:25px}.hero-meta .tiny-label{font-size:14px}.hero-note{font-size:14px}.hero h1{font-size:clamp(34px,8.1vw,56px);margin-top:43px;line-height:1.7;letter-spacing:.02em}.hero-last{padding-left:1.15em}.hero-bottom{margin-top:28px;margin-bottom:29px;align-items:flex-start;gap:15px;flex-direction:column}.hero-bottom p{font-size:14px}.text-link{font-size:14px;gap:30px}.hero-image img{height:235px}.hero-image .image-note{font-size:14px;left:13px;bottom:42px;padding:8px 14px}figcaption{font-size:14px}.section{padding-block:60px}.intro,.about{display:block}.section-marker{gap:12px}.intro-copy{margin-top:28px}.intro-copy h2{font-size:26px;line-height:1.9}.body-copy{font-size:14px;line-height:2.2;margin-top:25px}.body-copy p+p{margin-top:18px}.section-heading{margin-bottom:32px;align-items:flex-start}.section-aside{font-size:14px;margin-top:4px}.service-web{grid-template-columns:1fr;gap:28px;padding-bottom:32px}.service-main h2{font-size:34px}.service-lead{font-size:19px;margin-block:15px}.service-main>p:not(.service-lead){font-size:14px}.service-image img{aspect-ratio:3/2}.service-secondary{grid-template-columns:1fr;gap:35px;padding-top:26px}.service-secondary h3{font-size:26px}.service-secondary p{font-size:14px}.video-image img{height:220px}.planning{border-left:0;border-top:1px solid var(--line);padding:26px 0 0}.planning-note{font-size:16px;margin-top:24px}.partner-note{font-size:14px;line-height:2.2;margin-top:30px}.mobile-break{display:block}.about-content{display:block;margin-top:27px}.profile>p:last-child{max-width:420px}.book{margin-top:33px;border-left:0;border-top:1px solid var(--line);padding:28px 0 0}.book h3{font-size:29px}.book p{max-width:400px}.contact{margin-top:40px}.contact-inner{padding-block:38px 44px}.contact h2{font-size:35px;line-height:1.7;margin:18px 0}.contact-mark{font-size:34px}.contact-inner>p{font-size:14px}.contact-audience{font-size:14px!important}.site-footer{flex-wrap:wrap;gap:12px 24px;padding-block:25px}.footer-logo{font-size:18px}.site-footer>p{font-size:14px}.site-footer small{width:calc(100% - 50px);margin-left:0;margin-top:5px}.back-top{margin-left:auto}.works-main{padding-block:45px 65px}.works-title{font-size:40px}.work-item{grid-template-columns:1fr;gap:15px;padding-block:25px}.work-item h2{font-size:25px}.works-list{margin-top:35px}}
@media(max-width:380px){.work-item h2{font-size:20px}.intro-copy h2{font-size:23px}.service-lead{font-size:16px}.contact h2{font-size:29px}}
.wordmark,.footer-logo{display:block;flex-shrink:0;line-height:1}
.wordmark img{width:205px;height:auto}
.footer-logo img{width:160px;height:auto}
@media(max-width:700px){.site-header{align-items:center}.site-header nav{padding-top:0;flex-shrink:0;white-space:nowrap}.wordmark img{width:165px}.footer-logo img{width:140px}}
@media(max-width:380px){.wordmark img{width:145px}.site-header nav{gap:14px}.hero h1{font-size:30px}}
/* 背景だけに細かな紙の粒子を重ね、文字・画像には影響させない。 */
/* 画像を1/2の寸法で描画して高密度画面に対応し、明るい紙色で粗い粒を和らげる。 */
body,.contact,.skip-link{background-image:linear-gradient(var(--paper-wash),var(--paper-wash)),url('/assets/kraft-paper.webp');background-repeat:no-repeat,repeat;background-size:auto,208px 780px}
/* 本文は16px、英字ラベル・番号を含むサイト全体の最小サイズは14px。 */
:root{--body-size:16px}
body{font-size:var(--body-size);line-height:1.95}
.site-header nav,.hero-note,.hero-bottom p,.text-link,.section-marker p,
.section-aside,.body-copy,.service-main>p:not(.service-lead),.tags li,
.service-secondary p,.partner-note,.profile>p:last-child,.book p,
.book .text-link,.contact-inner>p,.contact-pending,
.site-footer>p,.site-footer small,.works-intro,.work-item .sample-label,
.work-item p,.work-item dl,figcaption,
.service-main>.tiny-label,.profile>.tiny-label,.book>.tiny-label{font-size:var(--body-size)}
.contact-audience{font-size:var(--body-size)!important}
.section-marker small{font-size:14px}
.section-marker>span{line-height:2.05}
.hero-note{letter-spacing:.07em}
.hero-bottom{gap:28px;margin-top:40px;margin-bottom:48px}
.hero-bottom p{line-height:1.95}
.hero-image .image-note{font-size:16px}
figcaption{margin-top:14px;line-height:1.6}
.body-copy{max-width:36em;line-height:2}
.body-copy p+p{margin-top:25px}
.service-web{grid-template-columns:1fr 1.08fr;gap:52px;padding-bottom:65px}
.service-lead{font-size:21px;line-height:1.85}
.service-main>p:not(.service-lead),.service-secondary p{max-width:32em;line-height:1.95}
.tags{gap:10px;margin-top:28px}
.tags li{padding:5px 13px}
.service-secondary{gap:52px;padding-top:44px}
.service-secondary h3{font-size:30px;margin-bottom:23px}
.partner-note{line-height:1.9;max-width:48em}
.about{grid-template-columns:180px 1fr;gap:55px}
.about-content{grid-template-columns:1fr 1fr;gap:46px}
.profile>p:last-child,.book p{line-height:2}
.book{padding-left:38px}

.book .text-link{gap:18px;margin-top:25px}
.contact-inner{padding-block:65px 72px}
.contact-inner>p{max-width:44em;line-height:1.95}
.contact-audience{margin-top:33px}
.site-footer{flex-wrap:wrap;gap:24px 30px}
.site-footer small{font-size:16px}
.work-item{gap:50px;padding-block:45px}
.work-item p,.work-item dl{line-height:1.95}
/* 透過の切り抜き素材を、紙の上の小さなコラージュとして配置する。 */
.service-image,.video-image{isolation:isolate;padding-top:24px}
.service-image img{height:360px;aspect-ratio:auto;object-fit:contain}
.video-image{margin-top:34px}
.video-image img{height:300px;object-fit:contain}
@media(max-width:1000px){
  .intro{grid-template-columns:160px 1fr;gap:34px}
  .intro-copy h2{font-size:30px}
  .about{display:block}
  .about-content{margin-top:36px;gap:40px}
  .service-web{gap:32px}
  .service-main h2{font-size:32px}
  .service-lead{font-size:19px}
  .service-image img{height:310px}
  .service-secondary{gap:36px}
  .planning{padding-left:30px}
  .book{padding-left:30px}
  .site-footer small{margin-left:0}
}
@media(max-width:700px){
  .site-header{align-items:flex-start;flex-direction:column;gap:20px;padding-block:24px}
  .site-header nav{width:100%;justify-content:space-between;gap:12px;font-size:16px}
  .site-header nav a:first-child:not(:only-child){display:block}
  .wordmark img{width:180px}
  .hero-meta{flex-wrap:wrap;gap:10px 22px}
  .hero-meta .tiny-label{font-size:14px}
  .hero-note{font-size:16px}
  .hero h1{font-size:clamp(28px,7.9vw,55px);margin-top:32px}
  .hero-bottom{gap:22px;margin-top:28px;margin-bottom:34px}
  .hero-bottom p{font-size:16px}
  .text-link{font-size:16px}
  .hero-image .image-note{font-size:16px;bottom:58px}
  .section{padding-block:64px}
  .intro{display:block}
  .intro-copy{margin-top:32px}
  .intro-copy h2{font-size:clamp(23px,5.8vw,30px);line-height:1.85}
  .body-copy{font-size:16px;line-height:2}
  .section-heading{flex-direction:column;gap:18px;margin-bottom:35px}
  .section-aside{font-size:16px;margin-top:0}
  .service-web{grid-template-columns:1fr;gap:30px;padding-bottom:46px}
  .service-main h2{font-size:32px}
  .service-lead{font-size:19px}
  .service-main>p:not(.service-lead),.service-secondary p{font-size:16px}
  .tags li{padding:4px 10px}
  .service-image img{height:280px;aspect-ratio:auto}
  .service-secondary{grid-template-columns:1fr;gap:42px;padding-top:32px}
  .service-secondary h3{font-size:28px}
  .video-image img{height:265px}
  .planning{padding:32px 0 0}
  .planning-note{font-size:18px;gap:8px;margin-top:28px}
  .partner-note{font-size:16px;margin-top:35px}
  .partner-note .mobile-break{display:none}
  .about-content{display:block;margin-top:32px}
  .profile>p:last-child{max-width:none}
  .book{padding:32px 0 0;margin-top:40px}
  .book p{max-width:none}
  .book h3{font-size:30px}
  .contact-inner{padding-block:44px 52px}
  .contact-inner>p,.contact-pending{font-size:16px}
  .site-footer{gap:20px}
  .footer-logo img{width:155px}
  .site-footer>p{font-size:16px;width:100%}
  .site-footer small{font-size:16px;width:auto;max-width:calc(100% - 35px);margin:0}
  .work-item{gap:24px}
  .work-item h2{font-size:24px;line-height:1.7;text-wrap:balance}
}
@media(max-width:380px){.hero h1{font-size:28px}.service-lead{font-size:18px}.intro-copy h2{font-size:22px}}
/* 粒子・繊維・薄いむらを通常合成し、肉眼でも分かる紙肌にする。 */
body,.contact,.skip-link{background-blend-mode:normal}
.book h3{font-size:24px;line-height:1.85;letter-spacing:.035em}
@media(max-width:380px){.book h3{font-size:22px}}
/* 冒頭は共通の左端で揃え、写真までをひとつのまとまりにする。 */
.hero{padding-top:40px}
.hero-meta{justify-content:flex-start;gap:24px;align-items:center}
.hero-note{border-left:1px solid var(--line);padding-left:24px;line-height:1.6}
.hero h1{margin-top:0;line-height:1.5}
.hero-last{padding-left:0}
.hero-bottom{margin-top:26px;margin-bottom:34px;align-items:center}
.hero-image img{height:clamp(240px,26vw,340px)}
.hero-image .image-note{position:static;display:block;background:none;padding:0;margin-top:16px;font-family:var(--serif);font-size:16px;line-height:1.7;letter-spacing:.1em;text-align:left}
@media(max-width:700px){
  .hero{padding-top:28px}
  .hero-meta{flex-direction:column;align-items:flex-start;gap:9px}
  .hero-note{border-left:0;padding-left:0}
  .hero h1{margin-top:0;line-height:1.6}
  .hero-bottom{align-items:flex-start;margin-top:22px;margin-bottom:28px;gap:20px}
  .hero-image img{height:235px}
  .hero-image .image-note{margin-top:13px}
}
/* プロフィール資料に基づく対応領域。案件実績はTOPに掲載しない。 */
.service-detail{margin-top:22px}
.profile-role{font-size:16px;color:var(--muted);margin-top:-13px;margin-bottom:24px}
.profile-copy{font-size:16px;line-height:2}
.profile-copy p+p{margin-top:20px}
.support-services{border-top:1px solid var(--line);margin-top:48px;padding-top:38px}
.support-services>h3{font-family:var(--serif);font-size:26px;font-weight:500;line-height:1.8;margin-bottom:26px}
.support-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.support-grid h4{font-size:18px;font-weight:500;line-height:1.8;margin:0 0 14px}
.support-grid p{font-size:16px;line-height:1.95}
.support-grid article+article{border-left:1px solid var(--line);padding-left:28px}
@media(max-width:1000px){.support-grid{gap:24px}.support-grid article+article{padding-left:20px}}
@media(max-width:700px){
  .support-services{margin-top:40px;padding-top:32px}
  .support-grid{grid-template-columns:1fr;gap:28px}
  .support-grid article+article{border-left:0;padding-left:0}
  .support-grid h4{margin-bottom:9px}
}
/* 実績は本文を中心にした2カラム。実案件と無関係な仮写真は使わない。 */
.works-intro{max-width:46em}
.works-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 52px;margin-top:50px}
.work-item{display:flex;flex-direction:column;gap:24px;padding-block:34px 42px;min-width:0}
.work-content{display:flex;flex-direction:column;flex:1;min-width:0}
.work-item .work-category{font-size:14px;color:var(--red);letter-spacing:.08em;line-height:1.7}
.work-item h2{font-size:26px;line-height:1.65;margin:17px 0 22px;text-wrap:pretty;overflow-wrap:anywhere}
.work-item p,.work-item dl{font-size:16px;line-height:1.95}
.work-item dl{margin:24px 0 0;padding-top:17px}
.work-item dt{font-size:14px}
.work-item dd{margin-top:9px}
.work-item .work-note{margin-top:18px;color:var(--muted)}
.work-links{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:22px;margin-top:auto}
.work-links a{font-size:16px;border-bottom:1px solid var(--line);padding-block:3px;overflow-wrap:anywhere}
.related-sites{margin-top:40px;padding-top:45px;border-top:1px solid var(--line)}
.related-sites>h2{font-family:var(--serif);font-size:30px;line-height:1.7;margin:12px 0 20px}
.related-intro{font-size:16px;max-width:46em}
.related-sites-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 52px;list-style:none;margin:35px 0 0;padding:0}
.related-sites-list li{border-top:1px solid var(--line);padding-block:24px;min-width:0}
.related-sites-list h3{font-size:18px;font-weight:500;line-height:1.8;margin-bottom:8px;overflow-wrap:anywhere}
.related-sites-list p{font-size:16px;color:var(--muted);line-height:1.9}
@media(max-width:1000px){.works-list,.related-sites-list{column-gap:32px}.work-item h2{font-size:24px}}
@media(max-width:700px){.works-list,.related-sites-list{grid-template-columns:1fr}.works-list{margin-top:35px}.work-item{padding-block:28px 34px}.related-sites{margin-top:24px;padding-top:34px}.related-sites>h2{font-size:26px}}
.works-index{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:30px}
.works-index a{font-size:16px;line-height:1.8;border-bottom:1px solid var(--line);padding-block:4px}
.work-details{margin-top:28px}
.work-detail-group+.work-detail-group{margin-top:30px}
.work-detail-group h3{font-size:18px;font-weight:500;line-height:1.8;padding-left:13px;border-left:2px solid var(--red);margin:0 0 14px}
.work-detail-group ul{margin:0;padding-left:1.3em}
.work-detail-group li{font-size:16px;line-height:1.95;padding-left:3px}
.work-detail-group li+li{margin-top:10px}
.work-detail-group li::marker{color:var(--muted);font-size:14px}
.work-links{padding-top:28px}
@media(max-width:700px){.works-index{gap:10px 20px;margin-top:24px}.work-detail-group+.work-detail-group{margin-top:26px}}
.skills-section{margin-top:40px;padding-top:45px;border-top:1px solid var(--line)}
.skills-section>h2{font-family:var(--serif);font-size:30px;line-height:1.7;margin:12px 0 20px}
.skills-intro{font-size:16px;line-height:1.95;max-width:46em}
.skills-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 52px;margin-top:35px}
.skill-group{padding-block:28px 32px;border-top:1px solid var(--line);min-width:0}
.skill-group h3{font-size:22px;font-family:var(--serif);line-height:1.8;margin:0 0 18px}
.skill-tools{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 23px}
.skill-tools li{font-size:16px;line-height:1.75;border:1px solid var(--line);padding:4px 11px;overflow-wrap:anywhere}
.skill-tasks{padding-left:1.3em;margin:0}
.skill-tasks li{font-size:16px;line-height:1.95;padding-left:3px}
.skill-tasks li+li{margin-top:9px}
.skill-tasks li::marker{color:var(--muted);font-size:14px}
@media(max-width:1000px){.skills-grid{column-gap:32px}}
@media(max-width:700px){.skills-grid{grid-template-columns:1fr;margin-top:28px}.skills-section{margin-top:24px;padding-top:34px}.skills-section>h2{font-size:26px}.skill-group h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 名刺のクラフト紙・茶の墨・筆文字・傾いた細枠を共通の意匠にする。 */
body{font-weight:500}
.hero h1,.intro-copy h2,.service-main h2,.service-secondary h3,
.profile h2,.contact h2,.works-title{font-family:var(--display);font-weight:400}
/* Yuji Syukuは400のみのため、冒頭だけ輪郭を微細に削って筆致を軽くする。 */
.hero h1{-webkit-text-stroke:.55px var(--paper)}
@media(forced-colors:active){.hero h1{-webkit-text-stroke:0}}
.wordmark img,.footer-logo img{mix-blend-mode:multiply;filter:sepia(.65)}
.hero-image .image-note{
  display:table;max-width:100%;border:1px solid var(--ink);
  padding:5px 16px;margin-top:22px;font-family:var(--serif);
  transform:rotate(-3deg);transform-origin:left center;
}
.contact{background-color:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-top>.tiny-label{
  display:inline-block;border:1px solid var(--ink);padding:3px 12px;
  transform:rotate(-3deg);transform-origin:left center;
}
.contact-pending{color:var(--muted);border-bottom-color:var(--line)}
.tags li,.skill-tools li{border-color:var(--line)}
@media(max-width:700px){.hero-image .image-note{margin-top:20px;padding:4px 12px}}
.works-nav small{display:block;font-size:14px;line-height:1.5;letter-spacing:0}
.site-header nav{align-items:center;gap:28px}
@media(max-width:700px){.site-header nav{flex-wrap:wrap;gap:16px 20px}.works-nav small{display:inline}.site-header nav .works-nav{order:1;width:100%}}

/* 強み・月額の対応例。紙面の余白と罫線を使い、既存の見せ方につなぐ。 */
.editorial-title{font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,38px);line-height:1.8;letter-spacing:.05em;margin:32px 0}
.strengths-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:38px}
.strengths-grid article{border-top:1px solid var(--line);padding-top:26px;min-width:0}
.strengths-grid .tiny-label{font-size:14px;color:var(--muted);letter-spacing:.06em}
.strengths-grid h3{font-family:var(--serif);font-size:22px;line-height:1.8;margin:16px 0}
.strengths-grid p,.pricing p,.price-scope li,.work-partnership p{font-size:16px;line-height:2}
.pricing-intro{max-width:48em}
.pricing .web-estimate{margin-top:24px;padding-left:18px;border-left:2px solid var(--red)}
.price-preface{max-width:54em;margin-top:35px;color:var(--muted)}
.price-examples{border-top:1px solid var(--line);margin-top:32px}
.price-example{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:64px;padding-block:36px 40px;border-bottom:1px solid var(--line)}
.price-heading h3{font-size:20px;line-height:1.8;margin-bottom:15px}
.price-heading .price-amount{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;line-height:1.5}
.price-amount strong{font-size:42px;font-weight:500;line-height:1.45;letter-spacing:0;white-space:nowrap}
.price-heading .price-tax{font-size:16px;color:var(--muted);margin-top:8px}
.price-scope .price-scope-title{font-size:18px;font-weight:600;margin-bottom:14px;line-height:1.9}
.price-scope p+p{margin-top:16px}
.price-scope ul{padding-left:1.3em;margin:0 0 16px}
.price-scope li+li{margin-top:5px}
.pricing-terms{margin-top:38px;border-top:1px solid var(--line)}
.pricing-terms details{border-bottom:1px solid var(--line)}
.pricing-terms summary{font-size:18px;line-height:1.8;padding:22px 0;cursor:pointer}
.pricing-terms summary:focus-visible{outline:2px solid var(--red);outline-offset:5px}
.pricing-terms details>div{max-width:54em;padding-bottom:26px}
.pricing-terms p+p{margin-top:16px}
.pricing-contact{margin-top:32px;max-width:100%;flex-wrap:wrap}
.work-partnership{border-top:1px solid var(--line);margin-top:36px;padding-top:40px}
.work-partnership>h2{font-family:var(--serif);font-size:30px;line-height:1.8;margin:14px 0 30px}
.partnership-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px}
.work-partnership h3{font-size:22px;line-height:1.8;margin:0 0 16px}
.partnership-note{border-left:2px solid var(--line);padding-left:24px;margin-top:34px;max-width:58em}
.partnership-note .text-link{margin-top:22px;flex-wrap:wrap}
.site-header nav{gap:22px}
@media(max-width:1000px){
  .site-header{flex-wrap:wrap;gap:20px}
  .site-header nav[aria-label="メインナビゲーション"]{width:100%;justify-content:space-between;gap:18px}
  .strengths-grid{gap:24px}.strengths-grid h3{font-size:20px}
  .price-example{gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .partnership-grid{gap:32px}
}
@media(max-width:700px){
  .site-header nav[aria-label="メインナビゲーション"]{display:grid;grid-template-columns:repeat(3,max-content);align-items:center;gap:18px 10px}
  .site-header nav .works-nav{order:0;grid-column:1 / 3;width:auto}
  .editorial-title{font-size:clamp(25px,6.2vw,32px);margin:28px 0;line-height:1.85}
  .strengths-grid{grid-template-columns:1fr;gap:28px;margin-top:30px}
  .strengths-grid article{padding-top:22px}.strengths-grid h3{font-size:22px;margin:12px 0}
  .price-example{grid-template-columns:1fr;gap:24px;padding-block:28px 32px}
  .price-amount strong{font-size:38px}.price-heading h3{margin-bottom:10px}
  .price-preface{margin-top:28px}.pricing-terms summary{font-size:17px;padding-block:20px}
  .pricing-contact{gap:16px}
  .partnership-grid{grid-template-columns:1fr;gap:28px}
  .work-partnership>h2{font-size:26px}.partnership-note{padding-left:18px}
}

/* 仕事の種類を選び、月額の対応量に合わせて組み立てる。 */
.support-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:36px}
.support-menu article{border-top:1px solid var(--line);padding-top:22px;min-width:0}
.support-menu h3{font-size:21px;line-height:1.8;margin-bottom:14px}
.support-menu ul{padding-left:1.2em;font-size:16px;line-height:2}
.support-menu li+li{margin-top:6px}
.video-price-list>div{margin:22px 0}
.video-price-list dt{font-size:17px;font-weight:600;line-height:1.9;margin-bottom:8px}
.video-price-list dd{font-size:16px;line-height:2;margin:0}
@media(max-width:1000px){.support-menu{gap:24px}}
@media(max-width:700px){.support-menu{grid-template-columns:1fr;gap:26px;margin-top:30px}.support-menu article{padding-top:20px}}

/* 月額の配分を、紙面になじむ色と罫線の図で示す。 */
.allocation-legend{display:flex;flex-wrap:wrap;gap:12px 24px;list-style:none;padding:0;margin-top:26px;font-size:16px;line-height:1.8}
.work-web{--work-color:#513e2d}.work-learn{--work-color:#6c7252}.work-video{--work-color:#a15f43}.work-plan{--work-color:#b29b7d}
.allocation-legend li::before,.allocation-tasks li::before{content:"";display:inline-block;width:12px;height:12px;background:var(--work-color);border:1px solid rgba(39,28,20,.2);margin-right:10px}
.budget-plans{border-top:1px solid var(--line);margin-top:28px}
.budget-plan{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:48px;padding:38px 0 42px;border-bottom:1px solid var(--line)}
.budget-patterns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.combination{min-width:0}.pricing .combination-label{font-size:14px;color:var(--muted);margin-bottom:10px;letter-spacing:.08em}
.combination h4{font-size:20px;line-height:1.8;font-weight:600;min-height:3.6em}
.allocation-bar{display:flex;gap:3px;height:25px;margin:22px 0 24px}
.allocation-bar span{background:var(--work-color);min-width:0;border:1px solid rgba(39,28,20,.15)}
.allocation-tasks{list-style:none;padding:0;margin:0}
.allocation-tasks li{position:relative;padding-left:23px;font-size:16px;line-height:1.9}
.allocation-tasks li::before{position:absolute;left:0;top:9px;margin:0;width:10px;height:10px}
.allocation-tasks li+li{margin-top:17px}.allocation-tasks strong{font-weight:600}
.pricing .allocation-tasks p{font-size:16px;line-height:1.9;margin-top:4px}
.pricing .combination-note{margin-top:26px;color:var(--muted)}
@media(max-width:1100px){.budget-plan{grid-template-columns:1fr;gap:28px}.budget-patterns{gap:36px}.combination h4{min-height:0}}
@media(max-width:700px){.budget-plan{padding:30px 0 36px;gap:30px}.budget-patterns{grid-template-columns:1fr;gap:30px}.combination+.combination{padding-top:26px;border-top:1px dashed var(--line)}.allocation-legend{gap:10px 18px}.allocation-bar{height:23px;margin:18px 0 20px}.combination h4{font-size:20px}}

.combination h4 span{display:inline-block;max-width:100%}