/* いなほ舎 — 余白・縦書き・細い糸の線を軸にした、フラットでやわらかなデザイン */
:root{
  --bg:#fcfcf9;--soft:#f4f5ef;--ink:#3b4036;--muted:#5f6358;--line:#e2e4da;
  --label:#7d6128;--accent:#4f6645;--thread:#8ea57f;--button:#5f7150;--button-hover:#4f6040;
  --emblem:#f1e8c9;--emblem-line:#e6d6a5;
  --mincho:'Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;
  --display:'Zen Old Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --latin:'Helvetica Neue',Arial,sans-serif;
  --wrap:1120px;--gutter:max(6%,calc((100% - var(--wrap))/2));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:40px}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/2.2 var(--mincho);letter-spacing:.06em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;cursor:pointer;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0}
p{margin:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--label);outline-offset:5px}
button:disabled{opacity:.6;cursor:wait}
[hidden]{display:none!important}

/* 見出しラベル */
.section-label{font:11px/1.6 var(--latin);letter-spacing:.2em;color:var(--label);margin-bottom:22px}
h2{font-size:34px;line-height:1.75;letter-spacing:.12em}

/* 細い糸の線（スクロールで描かれる） */
.thread{position:absolute;pointer-events:none;overflow:visible}
section>*:not(.thread){position:relative}
.thread path{fill:none;stroke:var(--thread);stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.js-thread .thread path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.8s cubic-bezier(.45,.05,.3,1)}
.js-thread .thread.drawn path{stroke-dashoffset:0}

/* ヘッダー */
.site-header{position:relative;z-index:40;height:96px;display:flex;justify-content:space-between;align-items:center;padding:0 var(--gutter)}
.brand{display:flex;align-items:center;gap:10px;font:600 24px/1 var(--mincho);letter-spacing:.16em}
.brand img{width:36px;height:44px;object-fit:contain}
nav{display:flex;align-items:center;gap:30px;font-size:13px;letter-spacing:.1em}
nav a{display:inline-flex;align-items:center;gap:8px;padding:10px 0}
nav a:not(.contact-link):before{content:'';width:5px;height:5px;border:solid var(--accent);border-width:0 1px 1px 0;transform:translateY(-2px) rotate(45deg)}
nav a:hover{color:var(--accent)}
.contact-link{border:1px solid var(--line);border-radius:40px;padding:10px 22px!important}
.contact-link:hover{border-color:var(--accent)}
.menu-toggle{display:none}

/* ヒーロー */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"art copy" "brand link";gap:40px 6%;align-items:center;padding:40px var(--gutter) 90px;overflow:hidden}
.thread-hero{left:-60px;top:-120px;width:640px;height:800px}
.hero-copy>*:not(.thread){position:relative}
.hero-art{grid-area:art;position:relative;width:100%;max-width:500px;padding:40px 20px;justify-self:center}
.emblem{position:relative;width:100%;aspect-ratio:1.04;display:flex;align-items:center;justify-content:center;border-radius:46% 54% 50% 45%;transform:rotate(-6deg)}
.emblem:before{content:'';position:absolute;inset:22px;border:1px solid var(--emblem-line);border-radius:48% 48% 44% 55%}
.emblem img{width:70%;height:70%;transform:translate(-7%,-4%) rotate(6deg)}
.art-note{position:absolute;z-index:1;padding:12px 22px;font:600 14px/1.4 var(--display);letter-spacing:.14em;border:1.5px solid #dcc98f;border-radius:52% 48% 46% 54%/58% 44% 56% 42%}
.art-note:after{content:'';position:absolute;inset:-3px -2px -2px -4px;border:1px solid var(--emblem-line);border-radius:46% 54% 55% 45%/44% 60% 40% 56%;transform:rotate(-2.5deg);pointer-events:none}
.note-one{top:14px;left:0;transform:rotate(-9deg)}
.note-two{right:-76px;top:40px;transform:rotate(8deg)}
.note-two:after{transform:rotate(2deg)}
.note-three{bottom:6px;right:-40px;transform:rotate(-5deg)}
.note-three:after{inset:-2px -4px -3px -2px}
.hero-copy{grid-area:copy;position:relative;display:flex;flex-direction:row-reverse;justify-content:center;align-items:flex-start;gap:44px}
.hero-title{writing-mode:vertical-rl;font-size:clamp(38px,3.6vw,52px);line-height:1.7;letter-spacing:.2em}
.lead{writing-mode:vertical-rl;font-size:14px;line-height:2.3;letter-spacing:.16em;color:var(--muted);margin-top:120px}
.hero-brand{grid-area:brand;justify-self:start;border-left:2px solid var(--accent);padding:2px 0 2px 22px;font-size:12px;line-height:2;color:var(--muted);position:relative}
.hero-brand-name{font:500 20px/1.6 var(--display);letter-spacing:.2em;color:var(--ink);margin-bottom:6px}
.hero-link{grid-area:link;justify-self:center}
.text-link{display:inline-flex;align-items:center;gap:26px;background:var(--button);color:#fffdf6;border-radius:40px;padding:17px 28px;font-size:13px;letter-spacing:.1em;position:relative}
.text-link:hover{background:var(--button-hover)}

/* 標語 */
.motto{display:flex;justify-content:center;align-items:center;gap:40px;padding:24px 6%;border-block:1px solid var(--line)}
.motto p{font:500 15px/1.6 var(--display);letter-spacing:.3em}
.motto small{font:10px var(--latin);letter-spacing:.16em;color:var(--muted)}

section{position:relative;padding:130px var(--gutter)}

/* プロダクト */
.section-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px 40px;margin-bottom:90px}
.section-head .section-label{grid-column:1/-1;margin:0}
.section-lead{font-size:13px;color:var(--muted);line-height:2.2}
.service-list{display:grid;gap:120px}
.service{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:70px;align-items:start}
.service:nth-child(even) .service-visual{order:2}
.service-body{padding-top:56px}
/* 写真つきのプロダクト：画像を大きく見せ、文章は下に2列で */
.service.has-photo{grid-template-columns:1fr;gap:48px}
.service-photo img{display:block;width:100%;height:auto;border-radius:4px}
.has-photo .service-body{padding-top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0 70px;align-content:start}
.has-photo .service-meta{grid-column:1/-1}
.has-photo h3{grid-column:1;grid-row:2}
.has-photo h4{grid-column:1;grid-row:3}
.has-photo .service-body>p{grid-column:2;grid-row:2;padding-top:10px}
.has-photo .service-kind{grid-column:2;grid-row:3;align-self:start;margin-top:14px}
.has-photo .product-more{grid-column:2;grid-row:4}
.service-visual{position:relative;height:340px;overflow:hidden;padding:44px;display:flex;flex-direction:column;justify-content:center}
.concept-label{position:absolute;bottom:14px;right:18px;font:10px var(--latin);letter-spacing:.14em;opacity:.8}
.visual-caption{font-size:12px;letter-spacing:.1em;margin-top:22px}
.anone{background:#efe4dc}
.bubble{padding:14px 28px;background:#fbf7ef;border-radius:26px 26px 26px 0;font-size:19px;align-self:start}
.bubble.two{margin-top:16px;align-self:end;background:#bc846d;color:#fffaf2;border-radius:26px 26px 0 26px;font-size:16px}
.service-visual.car{background:#e7e7da;padding:0}
.map-grid{height:100%;width:100%;background-image:linear-gradient(#f7f3ea 3px,transparent 3px),linear-gradient(90deg,#f7f3ea 3px,transparent 3px);background-size:56px 56px;position:relative}
.road{position:absolute;left:30%;top:-80px;height:520px;width:30px;background:#f7f3ea;transform:rotate(35deg)}
.pin{position:absolute;top:34%;left:55%;color:#a77c27;font-size:44px;line-height:1}
.map-label{position:absolute;top:52%;left:40%;background:#fbf8f0;padding:7px 14px;font-size:12px;line-height:1.6}
.mairu{background:#e6e7e0;align-items:center}
.arch{width:160px;height:220px;border:1px solid #a2aa96;border-radius:90px 90px 0 0;display:flex;align-items:center;justify-content:center}
.arch span{writing-mode:vertical-rl;font:500 22px/1.8 var(--display);letter-spacing:.2em;color:#58614d}
.cinema{background:#424b46;align-items:center;color:#ede8d8}
.cinema-screen{border:1px solid #adb6a3;width:88%;padding:40px 0;text-align:center;font:13px Georgia,serif;letter-spacing:.3em;background:#667064}
.seats{font-size:24px;line-height:.9;letter-spacing:6px;text-align:center;margin-top:28px;color:#88907f}
.service-meta{display:flex;justify-content:space-between;align-items:center;font:12px/1.6 var(--latin);letter-spacing:.1em;color:var(--muted);margin-bottom:22px}
.status{border:1px solid var(--line);border-radius:20px;padding:3px 12px;font-family:var(--mincho);font-size:11px;color:var(--accent)}
.service h3{font-size:32px;line-height:1.5;letter-spacing:.06em;margin-bottom:18px}
.service h4{font-size:18px;line-height:1.9;letter-spacing:.08em;margin-bottom:20px}
.service p{font-size:14px;line-height:2.2;color:var(--muted)}
.service-kind{display:flex;align-items:center;gap:14px;margin-top:26px;font-size:12px;letter-spacing:.12em;color:var(--accent)}
.service-kind:before{content:'';width:32px;height:1px;background:var(--accent)}
.product-more{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:30px;padding:16px 0;border:0;border-block:1px solid var(--line);background:none;font-size:13px;text-align:left}
.product-more:hover{color:var(--accent)}
.service-note{font-size:12px;color:var(--muted);margin-top:90px;line-height:2}

/* NEWS */
.news{background:var(--soft);display:grid;grid-template-columns:1fr 2fr;gap:70px;padding-block:110px}
.news-heading p{font-size:13px;line-height:2.2;color:var(--muted);margin-top:22px}
.news-row{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #dadccf;padding:28px 0;background:none}
.news-row:first-child{border-top:1px solid #dadccf}
.news-meta{display:flex;gap:16px;align-items:center;font:12px var(--latin);letter-spacing:.08em;color:var(--muted);margin-bottom:12px}
.news-tag{font-family:var(--mincho);padding:2px 12px;border:1px solid #d3d7c8;border-radius:20px;color:var(--accent)}
.news-title{display:flex;justify-content:space-between;gap:20px;font-size:16px;line-height:1.9}
.news-arrow{font-size:20px;line-height:1.4;color:var(--accent)}
.news-row:hover .news-title{color:var(--accent)}
.subtle-button{background:transparent;border:1px solid #cbd2bd;border-radius:30px;padding:11px 24px;font-size:13px;margin-top:26px}
.empty-news{font-size:14px;padding:20px 0}
.news-error{color:#8f4d3b}

/* ABOUT */
.about{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;padding-bottom:260px}
.about-copy p{font-size:15px;line-height:2.5;margin-bottom:26px}
.thread-about{left:0;bottom:0;width:min(62%,800px);height:200px}

/* VALUES */
.values{background:var(--soft);display:grid;grid-template-columns:auto 1fr;gap:90px}
.values-heading{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:26px}
.values-heading .section-label{writing-mode:vertical-rl;margin:10px 0 0}
.values-heading h2{writing-mode:vertical-rl;font-size:32px;letter-spacing:.2em}
.value-list{display:grid;gap:56px;padding-top:14px}
.value{display:grid;grid-template-columns:auto 1fr;gap:6px 26px;align-items:baseline}
.value-number{display:flex;align-items:center;gap:14px;font:italic 16px Georgia,serif;color:var(--label)}
.value-number:before{content:'';width:32px;height:1px;background:var(--accent)}
.value h3{font-size:22px;letter-spacing:.14em;line-height:1.7}
.value p{grid-column:2;font-size:14px;line-height:2.2;color:var(--muted)}

/* CONTACT */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start;padding-block:150px;overflow:hidden}
.thread-contact{right:0;top:10px;width:100%;height:120px}
.contact h2{margin-bottom:22px}
.contact-head p{font-size:14px;color:var(--muted)}
.contact-form label{display:block;font-size:13px;letter-spacing:.1em;margin:22px 0 8px}
.contact-form label:first-child{margin-top:0}
.contact-form label span{font-size:11px;color:var(--label);margin-left:8px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:4px;background:#fff;padding:13px 14px;font:15px/1.8 var(--mincho);color:var(--ink)}
.contact-form textarea{resize:vertical}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid var(--thread);outline-offset:1px;border-color:var(--thread)}
.contact-form .consent{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:13px}
.contact-form .consent input{width:18px;height:18px;margin:0;accent-color:var(--button)}
.consent-note{margin-top:28px;font-size:12px;line-height:2;color:var(--muted)}
.consent-note a,.page li a,.page p a{text-decoration:underline;text-underline-offset:3px}
.contact-form .consent{margin-top:12px}
.honeypot{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.contact-form button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;min-width:240px;margin-top:30px;padding:19px 30px;border:0;border-radius:40px;background:var(--button);color:#fffdf6;font-size:14px}
.contact-form button:hover{background:var(--button-hover)}
.form-status{font-size:13px;min-height:24px;margin-top:16px;color:var(--accent)}
.form-status.error{color:#8f4d3b}

/* フッター */
footer{padding:50px var(--gutter) 34px;border-top:1px solid var(--line)}
.footer-main{display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-main .brand{font-size:21px}
footer small{font:10px var(--latin);letter-spacing:.14em;color:var(--muted)}
.footer-links{display:flex;align-items:center;gap:26px}
.footer-links a{font-size:12px;color:var(--muted)}
.footer-links a:hover{color:var(--accent)}

/* プライバシーポリシー・404 */
.page{max-width:760px;margin:0 auto;padding:60px 6% 120px}
.page h1{font-size:32px;letter-spacing:.12em;line-height:1.7;margin-bottom:34px}
.page h2{font-size:19px;letter-spacing:.1em;margin:44px 0 12px}
.page p,.page li{font-size:14px;line-height:2.2;color:var(--muted)}
.page ul{padding-left:22px;margin:0}
.page .back{display:inline-block;margin-top:50px;border-bottom:1px solid var(--accent);color:var(--accent);font-size:14px}
.page-date{margin-top:44px;font-size:13px}

/* ダイアログ */
dialog{border:0;border-radius:4px;background:var(--bg);color:var(--ink);padding:40px;width:min(480px,90vw);box-shadow:0 20px 60px rgba(40,46,36,.18)}
dialog::backdrop{background:rgba(40,46,36,.45)}
dialog h2{font-size:24px}
dialog p{font-size:14px;line-height:2;margin-top:14px}
dialog form button{margin-top:24px;border:1px solid var(--line);border-radius:30px;padding:10px 26px;background:none}
#detail-dialog{width:min(650px,92vw);max-height:85vh;padding:52px 40px;overflow:auto}
#detail-dialog h2{font-size:28px;padding-right:30px;overflow-wrap:anywhere}
#detail-dialog h3{font-size:18px;line-height:1.8;margin-top:28px}
#detail-dialog li{font-size:14px;line-height:2}
#detail-dialog ul{padding-left:22px}
.dialog-close{position:absolute;right:18px;top:14px;border:0;padding:5px 12px;background:transparent;font-size:28px;color:var(--muted)}
.detail-label{font-size:12px;color:var(--accent);margin-bottom:14px}
.detail-status{background:var(--soft);padding:15px 20px;margin-top:24px!important}
.detail-link{display:inline-block;margin-top:28px;border-bottom:1px solid var(--accent);color:var(--accent);font-size:14px}
.article-body{white-space:pre-wrap;overflow-wrap:anywhere}
.article-date{font:12px var(--latin);color:var(--muted);margin:14px 0}

/* タブレット */
@media(max-width:1050px) and (min-width:761px){
  nav{gap:20px}
  .hero{gap:30px 4%}
  .service{gap:44px}
  .service-visual{height:280px;padding:30px}
  .news{gap:40px}
}

/* スマホ */
@media(max-width:760px){
  body{font-size:14px}
  h2{font-size:26px}
  .site-header{position:sticky;top:0;height:72px;padding:0 6%;background:var(--bg);box-shadow:0 1px 0 var(--line)}
  .brand{font-size:21px}
  .brand img{width:32px;height:39px}
  html{scroll-padding-top:88px}
  .menu-toggle{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:40px;background:none;padding:10px 18px;font-size:13px}
  .menu-icon,.menu-icon:before,.menu-icon:after{display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
  .menu-icon{position:relative}
  .menu-icon:before,.menu-icon:after{content:'';position:absolute;left:0}
  .menu-icon:before{top:-5px}.menu-icon:after{top:5px}
  .menu-open .menu-icon{background:transparent}
  .menu-open .menu-icon:before{transform:translateY(5px) rotate(45deg)}
  .menu-open .menu-icon:after{transform:translateY(-5px) rotate(-45deg)}
  nav{display:none;position:absolute;top:66px;left:6%;right:6%;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border:1px solid var(--line);padding:8px 22px 18px;box-shadow:0 14px 32px rgba(40,46,36,.12);font-size:15px}
  .menu-open nav{display:flex}
  nav a{padding:15px 2px;border-bottom:1px solid var(--line)}
  nav .contact-link{justify-content:center;margin-top:16px;border:0;background:var(--button);color:#fffdf6;padding:14px!important}
  nav .contact-link:hover{color:#fffdf6}
  .hero{grid-template-columns:1fr;grid-template-areas:"copy" "art" "link" "brand";gap:34px;padding:40px 7% 70px}
  .hero-copy{justify-content:flex-start;gap:28px}
  .hero-title{font-size:34px}
  .thread-hero{left:auto;right:-150px;top:-40px;width:420px;height:525px}
  .lead{margin-top:70px;font-size:13px;letter-spacing:.12em}
  .hero-art{width:86%;padding:24px 10px}
  .art-note{font-size:12px;padding:10px 16px}
  .note-one{top:0;left:-16px}
  .note-two{top:22px;right:-36px}
  .note-three{bottom:-6px;right:-26px}
  .hero-link{justify-self:start}
  .motto{padding:20px 6%}
  .motto p{font-size:13px;letter-spacing:.2em}
  .motto small{display:none}
  section{padding:80px 7%}
  .section-head{grid-template-columns:1fr;margin-bottom:50px}
  .section-lead br{display:none}
  .service-list{gap:72px}
  .service{grid-template-columns:1fr;gap:0}
  .service:nth-child(even) .service-visual{order:0}
  .service-visual{height:230px;padding:28px}
  .service-body{padding-top:28px}
  .service.has-photo{gap:28px}
  .has-photo .service-body{display:block}
  .has-photo .service-body>p{padding-top:0}
  .has-photo .service-kind{margin-top:26px}
  .service h3{font-size:27px}
  .service h4{font-size:16px}
  .service h4 br{display:none}
  .service-note{margin-top:56px}
  .news{grid-template-columns:1fr;gap:30px;padding-block:80px}
  .news-heading p br{display:none}
  .news-title{font-size:15px}
  .about{grid-template-columns:1fr;gap:30px;padding-bottom:180px}
  .about-copy br{display:none}
  .thread-about{width:100%;height:150px}
  .values{grid-template-columns:1fr;gap:40px}
  .values-heading{justify-content:flex-end}
  .values-heading h2{font-size:26px}
  .value{grid-template-columns:1fr;gap:8px}
  .value p{grid-column:1}
  .value p br{display:none}
  .contact{grid-template-columns:1fr;gap:44px;padding-block:110px}
  .contact-head p br{display:none}
  .thread-contact{height:70px}
  .contact-form button{width:100%;min-width:0}
  .footer-links{width:100%;justify-content:space-between}
  #detail-dialog{padding:46px 24px 30px}
  #detail-dialog h2{font-size:24px}
  dialog{padding:34px 24px}
  .footer-main{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-thread .thread path{transition:none;stroke-dashoffset:0}
  .menu-icon,.menu-icon:before,.menu-icon:after{transition:none}
}
.service-photo-link{display:block;border-radius:4px;transition:opacity .2s}
.service-photo-link:hover{opacity:.9}