/* Final isolation from pre-existing child-theme chrome. */
body:has(.ref-home) .nkd-site-header,
body:has(.ref-home) .nkd-site-footer,
body:has(.ref-home) .nkd-future-message { display:none !important; }

/* HOME 2026-09-21: the reference composition, backed by local media. */
.ref-home{--ink:#0d1626;--cyan:#06adc5;--pale:#effcff;--yellow:#ffe000;background:#fff}
.ref-hero__art{background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,0)),var(--hero-photo) center/cover no-repeat}
.ref-hero__art:before{background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,0) 60%)}
.ref-hero__art .plant{font-size:0;left:12%;bottom:76px;width:72px;height:85px;background:linear-gradient(#fff,#d6d1c4);border-radius:5px 5px 18px 18px;box-shadow:0 10px 16px rgba(14,58,67,.16)}
.ref-hero__art .plant:before,.ref-hero__art .plant:after{content:"";position:absolute;background:#198c66;border-radius:100% 0 100% 0;width:36px;height:66px;bottom:65px;left:19px;transform:rotate(-8deg)}
.ref-hero__art .plant:after{left:1px;bottom:48px;transform:rotate(-45deg);background:#55ad72}
.ref-hero__art .laptop{background:linear-gradient(155deg,#83909a,#253846 57%,#b9cbd1 58%);box-shadow:0 22px 18px rgba(39,80,90,.30)}
/* 2026-09-21: 写真の上に重なっていた飾り（植木鉢・パソコン風の板・コーヒー）を非表示。戻す場合はこの1行を削除。 */
.ref-hero__art .plant,.ref-hero__art .laptop,.ref-hero__art .cup,.ref-photo--desk:after,.ref-photo--land:before{display:none!important}
/* HOME 2026-09-22: ヘッダー・フッターを他の固定ページ（Web制作・事業内容・会社案内）と同じ見た目にそろえる。
   フッターは他のページと同じクラス（web-ref-footer）を使い、その見た目をここにも持たせている。 */
.ref-home .ref-head,.ref-home .web-ref-footer{line-height:1.6}
.ref-home .ref-head{padding-left:5%;padding-right:5%}
.ref-home .web-ref-footer{display:grid;grid-template-columns:270px 1fr;gap:26px;align-items:center;padding:36px 6% 43px;background:#fff;border-top:1px solid #e9f3f4}
.ref-home .web-ref-footer .ref-logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.ref-home .web-ref-footer .ref-logo img{width:48px;height:48px;object-fit:contain}
.ref-home .web-ref-footer .ref-logo span{font-size:12px;font-weight:800;color:#0d1626;white-space:nowrap}
.ref-home .web-ref-footer nav{display:flex;justify-content:center;gap:28px}
.ref-home .web-ref-footer nav a{color:#0d1626;text-decoration:none;font-size:11px}
.ref-home .web-ref-footer .ref-line{font-size:11px}
.ref-home .web-ref-footer small{grid-column:1/-1;font-size:10px;color:#6c7887}
@media(max-width:760px){.ref-home .ref-head .ref-logo{flex-basis:170px}.ref-home .ref-head .ref-line{padding:8px}}
@media(max-width:760px){.ref-home .web-ref-footer{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;padding:28px 25px 40px!important;text-align:left!important}.ref-home .web-ref-footer nav{justify-content:flex-start!important;flex-wrap:wrap!important;gap:12px 17px!important}.ref-home .web-ref-footer .ref-line{justify-self:start!important}}

/* HOME 2026-09-22: 最上部の写真を、他のページ（Web制作など）と同じく、ヒーロー全体に広げて左側へなだらかに白くぼかす。
   （スマホ幅は従来どおり、文章の下に写真を縦に並べる） */
@media(min-width:761px){
.ref-home .ref-hero{background:linear-gradient(90deg,#fff 0%,#fff 39%,rgba(255,255,255,.86) 52%,rgba(255,255,255,.08) 72%),var(--hero-photo) center/cover no-repeat}
.ref-home .ref-hero__art{background:none}
.ref-home .ref-hero__art:before{display:none}
}

/* HOME オープニング: 白い画面の中心にロゴが出て、パーンと真ん中から弾けてホームページが現れる（約1.9秒）。
   白い画面(.nkd-splash)は中心から丸い穴が広がり、ロゴ(__logo)は白い丸い背景ごとふくらんで消え、水色の輪(__ring)が広がる。
   ロゴは背景を透明にした画像（nakanaka-logo-transparent.png）。
   CSSだけで動かす（読み込みの瞬間からロゴが見え、ホームがちらつかない）。「動きを減らす」設定の人には出さない。 */
@property --nkd-r{syntax:'<length>';inherits:false;initial-value:-90px}
.nkd-splash{position:fixed;inset:0;z-index:100000;background:#fff;-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent var(--nkd-r),#000 calc(var(--nkd-r) + 90px));mask-image:radial-gradient(circle at 50% 50%,transparent var(--nkd-r),#000 calc(var(--nkd-r) + 90px));animation:nkd-splash-burst .9s cubic-bezier(.2,.75,.25,1) 1s forwards}
.nkd-splash__logo,.nkd-splash__ring{position:fixed;left:0;top:0;width:100%;height:100%;display:grid;place-items:center;pointer-events:none}
.nkd-splash__logo{z-index:100001;animation:nkd-splash-hide 0s linear 1.7s forwards}
.nkd-splash__logo:before{content:"";position:absolute;left:50%;top:50%;width:min(340px,82vw);aspect-ratio:1;border-radius:50%;background:#fff;transform:translate(-50%,-50%);animation:nkd-splash-disc .6s cubic-bezier(.3,.7,.2,1) 1s forwards}
.nkd-splash__logo img{position:relative;display:block;width:min(240px,56vw);height:auto;opacity:0;transform:translateY(8px) scale(.98);animation:nkd-splash-logo .5s cubic-bezier(.22,.8,.24,1) .15s forwards,nkd-splash-pop .6s cubic-bezier(.3,.7,.2,1) 1s forwards}
.nkd-splash__ring{z-index:100002;animation:nkd-splash-hide 0s linear 2s forwards}
.nkd-splash__ring:before{content:"";display:block;width:min(240px,56vw);aspect-ratio:1;border-radius:50%;border:2px solid #06adc5;opacity:0;transform:scale(.6);animation:nkd-splash-ring .9s cubic-bezier(.2,.75,.25,1) 1s forwards}
@keyframes nkd-splash-logo{to{opacity:1;transform:none}}
@keyframes nkd-splash-pop{from{opacity:1;transform:none}30%{opacity:1;transform:scale(1.12)}to{opacity:0;transform:scale(1.45)}}
@keyframes nkd-splash-disc{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
@keyframes nkd-splash-ring{from{opacity:.6;transform:scale(.6)}to{opacity:0;transform:scale(8)}}
@keyframes nkd-splash-burst{from{--nkd-r:-90px;visibility:visible;pointer-events:auto}54%{pointer-events:auto}55%{pointer-events:none}99%{visibility:visible}to{--nkd-r:100vmax;visibility:hidden;pointer-events:none}}
@keyframes nkd-splash-hide{to{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.nkd-splash,.nkd-splash__logo,.nkd-splash__ring{display:none}}
/* 弾けて開くタイミングに合わせて、最上部の見出しを登場させる */
.ref-home.is-motion-ready .ref-hero__copy.is-revealed{transition-delay:1.3s}
.ref-home.is-motion-ready .ref-partner.is-revealed{transition-delay:1s}

/* Web制作: 料金プランとオプションの内容更新（デザインは従来のまま）。
   ・マーケティング伴走プランの注意書き（※）は、小さな文字でボタンの上に置く。
   ・各種オプションは4項目（見出しだけ）。PC幅では4個並び（スマホは従来どおり1列）。
   ・オプションの相談ボタンは、料金カードのボタンと同じ見た目（枠線つきの丸いボタン）。 */
.web-price__cards .web-price__note{display:block;margin:0 0 14px;font-size:11px;line-height:1.8;color:#6c7887}
.nkd-ref-page--web-production .web-options__items{grid-template-columns:repeat(4,1fr)}
.nkd-ref-page--web-production .web-options__items article{min-height:110px}
.web-options__cta{grid-column:1/-1;margin-top:20px}
.web-options__cta a{display:block;max-width:320px;margin:0 auto;border:1px solid #08a8bd;border-radius:999px;text-align:center;padding:12px;color:#0090a3;font-size:13px;font-weight:700;text-decoration:none;transition:transform .22s ease,box-shadow .22s ease}
.web-options__cta a:hover{transform:translateY(-2px);box-shadow:0 8px 17px rgba(5,159,181,.16)}

/* ヘッダーの色: Web制作・事業内容・会社案内を、HOMEと同じ色にそろえる（文字は濃い紺、今いるページの印は水色 #06adc5）。 */
.nkd-ref-page .ref-head{--cyan:#06adc5}
.nkd-ref-page .ref-head .ref-nav a{color:#0d1626}
.nkd-ref-page .ref-head .ref-nav a.is-current{color:#06adc5;border-bottom-color:#06adc5}

/* メニューにマウスを乗せたら、下に水色の線が左から右へ引かれる（外すと右へ抜けて消える）。PC幅のみ。 */
@media(min-width:761px){
.ref-head .ref-nav a{position:relative}
.ref-head .ref-nav a:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:#06adc5;transform:scaleX(0);transform-origin:right center;transition:transform .35s cubic-bezier(.22,.8,.24,1);pointer-events:none}
.ref-head .ref-nav a:hover:after,.ref-head .ref-nav a:focus-visible:after{transform:scaleX(1);transform-origin:left center}
}
@media(prefers-reduced-motion:reduce){.ref-head .ref-nav a:after{transition:none}}

/* スマホのハンバーガーメニュー: Web制作・事業内容・会社案内では、他のCSS（.nkd-ref-page … display:none）に負けて
   開いても表示されなかった。開いている間（.is-open）は表示する。 */
@media(max-width:760px){.nkd-ref-page .ref-head .ref-nav.is-open{display:grid}}

/* サービス3カード: 「詳細を見る」の文字だけでなく、カードのどこをクリックしても飛べるようにする。 */
.ref-services article{position:relative;cursor:pointer}
.ref-services article a:after{content:"";position:absolute;inset:0}
/* ホームの「詳細を見る」から飛んだとき、見出しが画面の端に貼りつかないよう余白を確保。 */
#service-homepage,#service-support,#service-marketing{scroll-margin-top:32px}
.ref-photo--desk{background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.04)),var(--thinking-photo,url('/wp-content/uploads/2026/09/home-desk-web.jpg')) 62% center/cover no-repeat}
.ref-photo--desk:before{background:linear-gradient(90deg,rgba(255,255,255,.25),transparent 50%)}
.ref-photo--land{background:linear-gradient(90deg,rgba(16,94,115,.12),rgba(255,255,255,.06)),url('/wp-content/uploads/2026/09/S__27648003.jpg') center/cover no-repeat}
.ref-photo--land:before{background:linear-gradient(145deg,transparent 0 35%,rgba(255,255,255,.30) 36% 49%,transparent 50%)}
.ref-photo--land div{background:rgba(255,255,255,.91)}
.ref-head,.ref-foot{max-width:1240px}.ref-head{height:94px}.ref-hero{height:590px}.ref-thinking,.ref-about{padding-top:100px;padding-bottom:100px}.ref-service{padding-bottom:98px}.ref-flow{padding-top:50px;padding-bottom:50px}
.ref-home .ref-hero__copy,.ref-home .ref-partner,.ref-home .ref-thinking>div,.ref-home .ref-service__intro>div,.ref-home .ref-service__intro>p,.ref-home .ref-about>div,.ref-home .ref-flow>div,.ref-home .ref-cta>*{transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.24,1)}
.ref-home.is-motion-ready .ref-hero__copy,.ref-home.is-motion-ready .ref-partner,.ref-home.is-motion-ready .ref-thinking>div,.ref-home.is-motion-ready .ref-service__intro>div,.ref-home.is-motion-ready .ref-service__intro>p,.ref-home.is-motion-ready .ref-about>div,.ref-home.is-motion-ready .ref-flow>div,.ref-home.is-motion-ready .ref-cta>*{opacity:0;transform:translateY(20px)}
.ref-home.is-motion-ready .is-revealed{opacity:1!important;transform:none!important}.ref-home.is-motion-ready .ref-thinking .is-revealed:nth-child(2),.ref-home.is-motion-ready .ref-about .is-revealed:nth-child(2){transition-delay:.12s}.ref-home.is-motion-ready .ref-service__intro>p.is-revealed{transition-delay:.12s}
.ref-services article{transition:transform .25s ease,box-shadow .25s ease}.ref-services article:hover{transform:translateY(-6px);box-shadow:0 16px 25px rgba(19,37,68,.09)}.ref-pill,.ref-line{transition:transform .22s ease,box-shadow .22s ease}.ref-pill:hover,.ref-line:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(5,159,181,.22)}
@media (prefers-reduced-motion:reduce){.ref-home *{transition:none!important;animation:none!important}}
@media(max-width:760px){.ref-head{gap:7px;padding:12px 14px}.ref-head .ref-line{padding:8px 9px;font-size:9px;letter-spacing:0}.ref-logo{gap:7px}.ref-logo>b{font-size:27px}.ref-hero__art .plant{left:9%;transform:scale(.78);transform-origin:bottom left}.ref-hero__art .laptop{left:31%;width:48%}}

/* Yellow seeds must never cover text; HOME uses no white ring. */
.ref-home .ref-thinking:after{z-index:0!important;box-shadow:none!important}.ref-home .ref-thinking>*{z-index:1}.ref-home .ref-cta .ref-pill:after{box-shadow:none!important}

/* Two restrained yellow seed accents for the TOP page; content remains above them. */
.ref-home .ref-thinking{position:relative}.ref-home .ref-thinking:after{content:"";position:absolute;z-index:2;left:50%;top:47%;width:14px;height:14px;border-radius:50%;background:#ffe100;box-shadow:0 0 0 3px rgba(255,255,255,.86)}.ref-home .ref-thinking>*{position:relative;z-index:1}@keyframes ref-thinking-seed{0%{transform:translate(0,0) scale(1)}12%{transform:translate(-4px,10px) scale(1.2,.78)}44%{transform:translate(12px,-55px) rotate(180deg) scale(.88,1.24)}70%{transform:translate(37px,4px) rotate(380deg) scale(1.12,.88)}100%{transform:translate(58px,0) rotate(450deg) scale(1)}}.ref-home.is-motion-ready .ref-thinking.is-revealed:after{animation:ref-thinking-seed 2.2s cubic-bezier(.25,.8,.35,1) 1 forwards}
@media(max-width:760px){.ref-home .ref-thinking:after{left:auto;right:24px;top:22px;width:11px;height:11px}}

/* A final seed at the lower CTA: it moves only when this CTA scrolls into view. */
.ref-home .ref-cta .ref-pill{position:relative;overflow:visible}.ref-home .ref-cta .ref-pill:after{content:"";position:absolute;z-index:1;right:-52px;top:50%;width:15px;height:15px;border-radius:50%;background:#ffe100;box-shadow:0 0 0 3px rgba(255,255,255,.86);opacity:0;transform:translateY(-50%);pointer-events:none}@keyframes ref-cta-seed{0%{opacity:0;transform:translate(-8px,-50%) scale(.5)}18%{opacity:1;transform:translate(-3px,9px) scale(1.18,.78)}48%{opacity:1;transform:translate(12px,-42px) rotate(180deg) scale(.88,1.22)}74%{opacity:1;transform:translate(32px,-50%) rotate(390deg) scale(1)}100%{opacity:1;transform:translate(42px,-50%) rotate(440deg) scale(1)}}.ref-home.is-motion-ready .ref-cta .ref-pill.is-revealed:after{animation:ref-cta-seed 2s cubic-bezier(.25,.8,.35,1) 1 forwards}@media(max-width:760px){.ref-home .ref-cta .ref-pill:after{right:-30px;width:11px;height:11px}.ref-home.is-motion-ready .ref-cta .ref-pill.is-revealed:after{animation-duration:1.7s}}

/* Header refinements: use the registered media logo and reserve the right side for navigation. */
.ref-head{max-width:none;padding-left:max(22px,calc((100vw - 1180px)/2));padding-right:max(22px,calc((100vw - 1180px)/2));gap:20px}
.ref-logo{display:flex;align-items:center;gap:10px;flex:0 0 255px;white-space:nowrap}.ref-logo img{display:block;width:58px;height:60px;object-fit:contain;object-position:left center}.ref-logo span{font-size:14px;font-weight:800;letter-spacing:.08em;color:var(--ink)}
.ref-head .ref-nav{margin-left:auto;gap:30px}.ref-head .ref-line{margin-left:8px}
.ref-menu-toggle{display:none;border:0;background:transparent;width:42px;height:42px;padding:10px 7px;cursor:pointer}.ref-menu-toggle>span:not(.screen-reader-text){display:block;height:2px;margin:5px 0;background:var(--ink);transition:transform .2s ease,opacity .2s ease}.ref-menu-toggle.is-open>span:nth-child(1){transform:translateY(7px) rotate(45deg)}.ref-menu-toggle.is-open>span:nth-child(2){opacity:0}.ref-menu-toggle.is-open>span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
html body .ref-pill{background:#0d1626;background-image:none}
html body .ref-pill:hover{box-shadow:0 10px 22px rgba(19,37,68,.28)}
html body .ref-line{background:#06c755;background-image:none}
html body .ref-line:hover{box-shadow:0 10px 22px rgba(6,199,85,.28)}
html body .ref-cta .ref-pill,html body .web-final-cta .ref-pill,html body .info-cta .ref-pill{background:#06c755!important;background-image:none!important}
html body .ref-cta .ref-pill:hover,html body .web-final-cta .ref-pill:hover,html body .info-cta .ref-pill:hover{box-shadow:0 10px 22px rgba(6,199,85,.28)!important}
html body .ref-home.ref-home.ref-home :is(.ref-thinking p,.ref-about p,.ref-service p,.ref-services p,.ref-service__intro p){color:#2c3440!important}
html body .ref-home.ref-home.ref-home .ref-services b{color:#0090a3!important}
html body .ref-home.ref-home.ref-home .ref-services article{background:#f2f4f6;border-top:0;border-radius:12px;padding:26px 22px}
html body .ref-home.ref-home.ref-home .ref-services b{font-weight:700}
html body .ref-home.ref-home.ref-home .web-ref-footer{background:#0d1626;color:#fff}
html body .ref-home.ref-home.ref-home .web-ref-footer a{color:#fff}
html body .ref-home.ref-home.ref-home .web-ref-footer small{color:#9fb0c2}
html body .ref-home.ref-home.ref-home .web-ref-footer .ref-logo img{display:none}
html body .ref-home.ref-home.ref-home .web-ref-footer .ref-logo span{color:#fff}
@keyframes nkd-hero-h1-reveal{from{opacity:.32;filter:blur(6px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
html body .ref-home.ref-home.ref-home .ref-hero h1{opacity:.32;filter:blur(6px);animation:nkd-hero-h1-reveal .85s cubic-bezier(.2,.7,.3,1) 2.1s both}
@media(prefers-reduced-motion:reduce){html body .ref-home.ref-home.ref-home .ref-hero h1{animation:none!important;opacity:1!important;filter:none!important}}
html body .ref-home.ref-home.ref-home .ref-values article:nth-child(2n) .ref-values__icon{background:#0d1626;color:#fff}
html body .ref-home.ref-home.ref-home .ref-flow li:nth-child(3):before{background:#0d1626}
html body .ref-home.ref-home.ref-home .ref-outline{border-color:#0d1626;color:#0d1626!important}
html body .ref-home.ref-home.ref-home .ref-services article:nth-child(2) b{color:#0d1626!important}
html body .ref-hero__art{background-image:var(--hero-photo);background-size:cover;background-position:center}
html body .ref-hero__art:before{display:none}
html body .ref-hero__art .script,html body .ref-hero__art .plant,html body .ref-hero__art .laptop,html body .ref-hero__art .cup{display:none}
html body .ref-hero__flow{position:absolute;z-index:4;left:6%;right:6%;top:8%;display:flex;align-items:center;justify-content:space-between;gap:4px}
html body .ref-hero__flow-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0}
html body .ref-hero__flow-item i{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;color:#00c4d6;flex:0 0 40px;box-shadow:0 8px 18px rgba(19,37,68,.22),0 0 0 3px #fff}
html body .ref-hero__flow-item i svg{width:17px;height:17px}
html body .ref-hero__flow-badge{background:#fff;overflow:hidden;padding:0;background-repeat:no-repeat;background-size:200% 100%}
html body .ref-hero__flow-badge img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:#fff}
html body .ref-hero__flow-badge--crop-left{background-position:left center}
html body .ref-hero__flow-badge--crop-right{background-position:right center}
html body .ref-hero__flow-badge--line{padding:8px;background:#fff}
html body .ref-hero__flow-badge--line img{width:100%;height:100%;object-fit:contain;border-radius:0;background:none}
html body .ref-hero__flow-toolname{font-size:8px;font-weight:700;letter-spacing:.04em;color:#8b97a6;margin-top:-4px}

/* FACT & FLOW: 「作って終わりにしない」を裏付ける統計＋流れの図解セクション */
html body .ref-fact-flow{max-width:1120px;margin:0 auto;padding:70px 34px;background:#f7fdfe;border-radius:18px}
html body .ref-fact-flow__head label{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.16em;color:#00c4d6;margin-bottom:10px}
html body .ref-fact-flow__head h2{margin:0 0 14px;font-size:28px;line-height:1.4;color:#0d1626}
html body .ref-fact-flow__head h2 em{font-style:normal;color:#00c4d6}
html body .ref-fact-flow__head p{margin:0 0 32px;font-size:13px;line-height:2;color:#4a5766}
html body .ref-fact-flow__data{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:6px;padding:0;font-size:15px;font-weight:700;color:#4a5766;text-decoration:none}
html body .ref-fact-flow__data b{font-weight:900;color:#0090a3;font-size:16px}
html body .ref-fact-flow__data span{font-weight:600;color:#8b97a6;font-size:12px}
html body .ref-fact-flow__data:hover b{text-decoration:underline}
html body .ref-fact-flow__diagram{position:relative;margin-top:44px;padding-bottom:6px}

/* Standalone "digital marketing partner" positioning statement, between the 4 values and OUR THINKING. */
html body .ref-partner{max-width:720px;margin:0 auto;padding:70px 32px;text-align:center}
html body .ref-partner label{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.16em;color:#00c4d6;margin-bottom:14px}
html body .ref-partner h2{margin:0 0 18px;font-size:24px;line-height:1.5;color:#0d1626}
html body .ref-partner p{margin:0;font-size:14px;line-height:2;color:#4a5766}
@media(max-width:760px){html body .ref-partner{padding:48px 20px}html body .ref-partner h2{font-size:19px}}
/* 2026-10-02: PARTNERの下の余白（自分の下余白＋OUR THINKINGの上余白が重なって広すぎた）を、上の余白と同じにそろえる。 */
html body .ref-partner{padding-bottom:0}
html body .ref-home .ref-partner+.ref-thinking{padding-top:76px}
@media(max-width:760px){html body .ref-home .ref-partner+.ref-thinking{padding-top:51px}}
html body .ref-fact-flow__track{position:absolute;left:9%;top:44px;height:4px;width:0;background:linear-gradient(90deg,#00c4d6,#0d1626);border-radius:2px;z-index:0;transition:width 3.2s cubic-bezier(.4,0,.2,1) .2s}
html body .ref-fact-flow.is-revealed .ref-fact-flow__track{width:82%}
@media(prefers-reduced-motion:reduce){html body .ref-fact-flow__track{transition:none;width:82%}}
html body .ref-fact-flow__row{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:4px}
html body .ref-fact-flow__item{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;min-width:0;text-align:center}
html body .ref-fact-flow__item i{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:#fff;color:#00c4d6;flex:0 0 88px;box-shadow:0 10px 22px rgba(19,37,68,.14),0 0 0 5px #f7fdfe}
html body .ref-fact-flow__item i svg{width:36px;height:36px}
html body .ref-fact-flow__item-badge{padding:20px;background:#fff}
html body .ref-fact-flow__item-badge img{width:100%;height:100%;object-fit:contain}
html body .ref-fact-flow__item b{font-size:15px;font-weight:800;color:#0d1626}
html body .ref-fact-flow__item small{font-size:11px;color:#8b97a6}
html body .ref-fact-flow__curve{display:block;width:100%;height:70px;margin-top:6px;clip-path:inset(0 0 0 100%);transition:clip-path 1.6s cubic-bezier(.4,0,.2,1)}
html body .ref-fact-flow.is-revealed .ref-fact-flow__curve{clip-path:inset(0 0 0 0%);transition-delay:3.4s}
html body .ref-fact-flow__loop{margin:2px auto 0;text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:#0090a3;opacity:0;transition:opacity .8s ease}
html body .ref-fact-flow.is-revealed .ref-fact-flow__loop{opacity:1;transition-delay:4.4s}
html body .ref-fact-flow__loop:before{content:'↻ ';color:#00c4d6}
html body .ref-fact-flow__item{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
html body .ref-fact-flow.is-revealed .ref-fact-flow__row .ref-fact-flow__item:nth-child(1){opacity:1;transform:none;transition-delay:.15s}
html body .ref-fact-flow.is-revealed .ref-fact-flow__row .ref-fact-flow__item:nth-child(2){opacity:1;transform:none;transition-delay:1s}
html body .ref-fact-flow.is-revealed .ref-fact-flow__row .ref-fact-flow__item:nth-child(3){opacity:1;transform:none;transition-delay:1.8s}
html body .ref-fact-flow.is-revealed .ref-fact-flow__row .ref-fact-flow__item:nth-child(4){opacity:1;transform:none;transition-delay:2.6s}
html body .ref-fact-flow.is-revealed .ref-fact-flow__row .ref-fact-flow__item:nth-child(5){opacity:1;transform:none;transition-delay:3.3s}
@media(prefers-reduced-motion:reduce){html body .ref-fact-flow__curve{transition:none;clip-path:inset(0 0 0 0%)}html body .ref-fact-flow__loop{transition:none;opacity:1}html body .ref-fact-flow__item{transition:none;opacity:1;transform:none}}
html body .ref-fact-flow__conclusion{margin:36px 0 0;padding-top:28px;border-top:1px solid #dceef0;text-align:center;font-size:20px;font-weight:800;color:#0d1626}
html body .ref-fact-flow__conclusion em{font-style:normal;color:#00c4d6}
@media(max-width:900px){
html body .ref-fact-flow__item i{width:64px;height:64px;flex:0 0 64px}
html body .ref-fact-flow__item i svg{width:26px;height:26px}
html body .ref-fact-flow__track{top:32px}
}
@media(max-width:760px){
html body .ref-fact-flow{padding:44px 20px;border-radius:12px}
html body .ref-fact-flow__head h2{font-size:22px}
html body .ref-fact-flow__track,html body .ref-fact-flow__curve{display:none}
html body .ref-fact-flow__row{flex-wrap:wrap;justify-content:center;gap:22px 14px}
html body .ref-fact-flow__item{flex:0 0 30%}
html body .ref-fact-flow__conclusion{font-size:17px}
}
html body .ref-hero__flow-item b{font-size:11px;font-weight:800;color:#0d1626;white-space:nowrap;background:#fff;padding:2px 8px;border-radius:999px;box-shadow:0 2px 6px rgba(19,37,68,.14)}
html body .ref-hero__flow-arrow{flex:0 0 auto;color:#00c4d6;font-size:18px;font-weight:800;margin-top:-24px}
@media(max-width:760px){html body .ref-hero__flow{left:4%;right:4%;bottom:6%;padding:10px 6px;border-radius:10px}html body .ref-hero__flow-item i{width:26px;height:26px}html body .ref-hero__flow-item i svg{width:13px;height:13px}html body .ref-hero__flow-item b{font-size:9px}html body .ref-hero__flow-arrow{font-size:11px}}
.ref-foot .ref-logo{flex-basis:180px}.ref-foot .ref-logo img{height:56px}
.ref-foot{max-width:none;padding-left:max(22px,calc((100vw - 1180px)/2));padding-right:max(22px,calc((100vw - 1180px)/2))}.ref-foot nav{margin-left:auto}.ref-foot .ref-line{margin-left:8px}
@media(max-width:760px){.ref-head{height:70px;padding:8px 15px;gap:8px;position:relative}.ref-head .ref-logo{flex-basis:164px;gap:6px}.ref-head .ref-logo img{width:40px;height:48px}.ref-head .ref-logo span{font-size:10px;letter-spacing:.03em}.ref-head .ref-line{margin-left:auto;font-size:9px;padding:8px 10px}.ref-head .ref-nav{display:none;position:absolute;z-index:10;top:70px;left:0;right:0;margin:0;padding:13px 20px 19px;background:#fff;box-shadow:0 12px 20px rgba(19,37,68,.12);border-top:1px solid #e6f6f8}.ref-head .ref-nav.is-open{display:grid;gap:0}.ref-head .ref-nav a{padding:12px 3px;font-size:14px;border-bottom:1px solid #e8f1f3}.ref-head .ref-nav .is-current{border-bottom:1px solid #e8f1f3}.ref-menu-toggle{display:block;flex:0 0 42px}.ref-foot .ref-logo{flex-basis:160px}.ref-foot .ref-logo img{height:52px}}

/* フッターに、特定商取引法・プライバシーポリシーへのリンクを追加。既存のsmall（コピーライト）と同じ並び。 */
html body .web-ref-footer__legal{grid-column:1/-1;display:flex;gap:18px;margin:0;font-size:10px}
html body .web-ref-footer__legal a{color:#6c7887;text-decoration:underline}
@media(max-width:760px){html body .web-ref-footer__legal{flex-wrap:wrap;gap:10px 16px}}

/* ホームのヒーローボタン（Web制作へ）だけ、LINEカラー(緑〜水色)とかぶらない色にする。既存の黄色いボールと、同じ色味でそろえた、温かみのある配色。 */
html body .ref-hero__copy .ref-pill{background:#0d1626!important;color:#fff!important;box-shadow:0 6px 16px rgba(19,37,68,.28)}
html body .ref-hero__copy .ref-pill:hover{box-shadow:0 10px 22px rgba(255,140,40,.38)!important}

/* トップの3枚カード（01/02/03）の「詳細を見る」を、リンクだと、はっきりわかる見た目にする。色は、サイトの水色（#0090a3系）にそろえた。 */
html body .ref-services a{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding-bottom:2px;color:#0090a3!important;border-bottom:1px solid #0090a3;letter-spacing:.02em;transition:gap .18s ease,opacity .18s ease}
html body .ref-services a:hover{gap:9px;opacity:.75}

/* スマホ：N-Eのロゴを、ヒーロー写真の上から外す。写真の下に、独立した行として表示する。 */
@media(max-width:760px){
html body .ref-home .ref-monogram{position:static;left:auto;right:auto;bottom:auto;top:auto;justify-content:center;gap:6px;padding:18px 20px 0;background:#fff}
}

/* Web制作ページのヒーローボタン（料金プランへ）も、同じオレンジにする */
html body .web-hero__price-link{background:#0d1626!important;color:#fff!important;box-shadow:0 6px 16px rgba(19,37,68,.28)}
html body .web-hero__price-link:hover{box-shadow:0 10px 22px rgba(19,37,68,.38)!important}

/* スマホだけ、スプラッシュのロゴと白い丸を、少し小さくする（B案：56%→45%くらい）。デスクトップは変えない。 */
@media(max-width:760px){
html body .nkd-splash__logo:before{width:min(300px,65vw)!important}
html body .nkd-splash__logo img{width:min(200px,45vw)!important}
html body .nkd-splash__ring:before{width:min(200px,45vw)!important}
}

/* Web制作ページの3つのアイコン（見つけてもらう・つながる・育てる）を、SVGに差し替え。もとの文字サイズ(34px)と同じ大きさに固定する。 */
html body .web-three i{display:flex;align-items:center;justify-content:center}
html body .web-three i svg{width:34px;height:34px;flex:0 0 auto}

/* ご相談の流れ（01〜04）に、線画のアイコンを追加。数字の上に、小さく表示する。 */
html body .web-flow__icon{display:block;margin-bottom:10px;color:#00c4d6}
html body .web-flow__icon svg{width:26px;height:26px}
@media(max-width:760px){html body .web-flow__icon svg{width:22px;height:22px}}

/* アイコンの背景に、うっすら色のついた丸を敷く（見つけてもらう系・ご相談の流れ）。輪郭をはっきりさせる。 */
html body .web-three i{width:60px;height:60px;border-radius:50%;background:rgba(8,174,198,.09)}
html body .web-flow__icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:rgba(8,174,198,.09);margin-bottom:12px}
@media(max-width:760px){html body .web-flow__icon{width:40px;height:40px;margin-bottom:10px}}

/* 各種オプション（7項目）を、丸●から、意味のある線画アイコンに差し替え。丸い薄背景つき。 */
html body .web-options__items i{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto 14px;border-radius:50%;background:rgba(8,184,200,.09);color:#08b8c8;font-style:normal}
html body .web-options__items i svg{width:24px;height:24px}
@media(max-width:760px){html body .web-options__items i{width:42px;height:42px;margin-bottom:10px}html body .web-options__items i svg{width:21px;height:21px}}

/* Web制作ページ：ヒーロー直下の、簡易ページ内リンク（制作期間・料金プラン・ご相談の流れ）。1行だけ、控えめに。 */
html body .web-quicknav{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;padding:16px 8%;background:#f5fdff;border-top:1px solid #e6f6f8;border-bottom:1px solid #e6f6f8}
html body .web-quicknav a{color:#0090a3;font-size:12px;font-weight:700;text-decoration:none;letter-spacing:.03em;padding:4px 2px;border-bottom:1px solid transparent;transition:border-color .18s ease}
html body .web-quicknav a:hover{border-bottom-color:#0090a3}
@media(max-width:760px){html body .web-quicknav{gap:18px;padding:13px 6%;font-size:11px}}

/* LINE公式アカウント支援：写真の使い回しをやめ、スマホ×LINE風チャットの、専用イラストに差し替える */
html body .web-line-detail__image--illust{background:linear-gradient(135deg,#f5fdff,#eafbfc);filter:none!important;display:flex;align-items:center;justify-content:center;padding:24px}
html body .web-line-detail__image--illust svg{width:auto;height:88%;max-width:78%}

/* Web制作ページ：ホームページ・Google・LINEが、お客さまへ、ひとつの動線につながる様子（新セクション） */
html body .web-connect{max-width:1120px;margin:0 auto;padding:70px 34px}
html body .web-connect__head{text-align:center;max-width:640px;margin:0 auto 40px}
html body .web-connect__head h2{font-size:26px!important;margin:0 0 14px!important}
html body .web-connect__head p{font-size:13px;line-height:2}
html body .web-connect__diagram{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
html body .web-connect__node{display:flex;flex-direction:column;align-items:center;gap:10px;width:110px}
html body .web-connect__node i{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(8,174,198,.09);color:#00c4d6}
html body .web-connect__node i svg{width:26px;height:26px}
html body .web-connect__node.web-connect__node--line i{background:rgba(6,199,85,.12);color:#06c755}
html body .web-connect__node.web-connect__node--goal i{background:rgba(255,176,32,.16);color:#c97a00}
html body .web-connect__node span{font-size:12px;font-weight:700;color:#0d1626;text-align:center}
html body .web-connect__diagram:before{content:none}
html body .web-connect__node:not(:last-child){position:relative}
html body .web-connect__node:not(:last-child):after{content:'→';color:#9fd8e3;font-size:20px;position:absolute;right:-16px;top:20px}
@media(max-width:760px){html body .web-connect{padding:48px 24px}html body .web-connect__diagram{gap:22px 6px}html body .web-connect__node{width:74px}html body .web-connect__node i{width:46px;height:46px}html body .web-connect__node i svg{width:21px;height:21px}html body .web-connect__node span{font-size:11px}html body .web-connect__node:not(:last-child):after{right:-14px;top:14px;font-size:16px}}

/* 事業内容ページ：CONNECT枠に、Web制作ページから移した「動線がつながる」図を配置。もとの「LINE」文字バッジは消す。 */
html body .business-service figure.is-line.business-connect:after{content:none}
html body .business-connect{display:flex;align-items:center;justify-content:center;gap:4px;padding:20px}
html body .business-connect__node{display:flex;flex-direction:column;align-items:center;gap:6px;width:78px;position:relative}
html body .business-connect__node i{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.75);color:#00c4d6}
html body .business-connect__node i svg{width:19px;height:19px}
html body .business-connect__node.business-connect__node--line i{color:#06c755}
html body .business-connect__node.business-connect__node--goal i{color:#c97a00;background:rgba(255,255,255,.9)}
html body .business-connect__node span{font-size:10px;font-weight:700;color:#0d1626;text-align:center}
html body .business-connect__node:not(:last-child):after{content:'→';position:absolute;right:-13px;top:10px;color:#7fc4d1;font-size:15px}
@media(max-width:760px){html body .business-connect{gap:2px;padding:14px 8px}html body .business-connect__node{width:60px}html body .business-connect__node i{width:34px;height:34px}html body .business-connect__node i svg{width:16px;height:16px}html body .business-connect__node span{font-size:9px}html body .business-connect__node:not(:last-child):after{right:-9px;top:9px;font-size:12px}}

/* 事業内容ページ：ANALYZEの棒グラフを、CSSの :after ハックから、きれいな線画SVGに差し替え */
html body .business-service figure.is-chart:after{content:none}
html body .business-service figure.is-chart{display:flex;align-items:center;justify-content:center;padding:18px}
html body .business-service figure.is-chart svg{width:78%;height:auto}

/* 事業内容ページ「AND MORE」・会社案内ページ「私たちが大切にしていること」の、文字アイコンを、線画SVGに統一 */
/* アイコンごとに線の密度が違うと、同じ色でも濃淡がバラバラに見えるため、丸い薄背景バッジに統一する（他ページの丸背景アイコンと同じパターン） */
html body .business-more__icon,html body .company-values__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:rgba(8,174,198,.09);color:#00c4d6}
html body .business-more article:nth-child(2n) .business-more__icon,html body .company-values article:nth-child(2n) .company-values__icon{background:#0d1626;color:#fff}
html body .business-more__icon svg,html body .company-values__icon svg{width:26px;height:26px;display:block;margin:0}

/* 事業内容ページ「ホームページ制作・運用」の、WordPress+SWELL採用バッジ。
   flex/gridを使わず、通常のインライン要素の並びだけで組む（ブラウザのズーム時などに計算がズレる不具合を避けるため） */
html body p.business-wp-badge{display:block!important;margin:16px 0 20px;padding:0!important;background:none!important;border:0!important;border-radius:0!important;line-height:1.7}
html body .business-wp-badge__logo{display:inline-block;vertical-align:middle;width:32px;height:32px;margin-right:8px}
html body .business-wp-badge__plus{display:inline-block;vertical-align:middle;margin-right:8px;font-size:16px;font-weight:700;color:#8b97a6}
html body .business-wp-badge__swell{display:block;margin:0 auto;width:28px;height:28px;color:#164a6b}
html body .business-wp-badge__swell-wrap{display:inline-block;vertical-align:middle;margin-right:10px;text-align:center}
html body .business-wp-badge__swell-label{display:block;margin-top:2px;font-size:9px;font-weight:700;letter-spacing:.08em;color:#164a6b}
html body .business-wp-badge__text{display:block;margin-top:8px;font-size:12px;line-height:1.8;color:#5c6b7d}
html body .business-wp-badge__text b{display:block;font-size:14px;color:#0d1626}
@media(max-width:760px){html body .business-more__icon,html body .company-values__icon{width:48px;height:48px;margin-bottom:10px}html body .business-more__icon svg,html body .company-values__icon svg{width:22px;height:22px}}

/* LINE公式アカウント支援：ユーザー提供の、リッチメニューの見本画像を表示（仮の参考画像。注意書きを添える） */
html body .web-line-detail__image--photo{position:relative;background:linear-gradient(135deg,#f5fdff,#eafbfc);filter:none!important;overflow:hidden}
html body .web-line-detail__image--photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
html body .web-line-detail__image-note{position:absolute;left:10px;bottom:8px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.88);color:#526c83;font-size:10px!important}

/* DATAセクションのグラフ画像：画像自体に、すでに枠がついているので、CSS側の白背景・枠・余白は外す（二重枠を解消） */
html body .web-chart.web-chart--image{background:none!important;border:0!important;padding:0!important}
html body .web-chart--image img{display:block;width:100%;height:auto;border-radius:6px}

/* 料金カード：簡略化後の「くわしく比べる」リンク */
html body .web-price__compare-link{margin:16px 0 0;text-align:center}
html body .web-price__cards article .web-price__compare-link{margin-top:auto;padding-top:16px}
html body .web-price__cards article.is-green .web-price__compare-link a{background:#132544;color:#fff;border-color:#132544}
html body .web-price__plan-limit{margin:8px 0 0;font-size:11px;color:#8b97a6}
html body .web-price__tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
html body .web-price__tags span{display:inline-block;padding:4px 12px;border:1px solid #00c4d6;border-radius:999px;font-size:11px;font-weight:700;color:#0090a3;background:#effcfd}
html body .web-price__cards article.is-lmessage .web-price__tags span{border-color:#06c755;color:#00875f;background:#effef4}
html body .web-price__card-mock{flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:70px;margin:14px 0 0;overflow:hidden}
html body .web-price__card-mock img{width:100%;height:auto;max-height:190px;object-fit:contain;object-position:bottom;opacity:.9;border-radius:4px}
html body .web-price__compare-link a{display:inline-block;padding:10px 22px;border:1px solid #0d1626;border-radius:999px;color:#fff;background:#0d1626;font-size:13px;font-weight:700;text-decoration:none}
html body .web-price__compare-link a:hover{background:#0b1830}

/* 料金プラン比較ページ：人物写真・斜め線なし、シンプルな背景に、黄色いボールだけ添える */
html body .info-hero--plans{background:linear-gradient(135deg,#f5fdff,#eafbfc);min-height:auto!important;padding:70px 8% 50px!important}
html body .info-hero--plans:after{display:none!important}
html body .info-hero--plans>div{width:auto!important;max-width:640px}
@media(max-width:760px){html body .info-hero--plans{padding:50px 6% 36px!important}}
/* 2026-10-02: TOP最下部のCTAの上に、ブランド宣言（ナカナカ・イー・デザインは、…）を置く。宣言とCTAの間は余白で区切る。 */
html body .ref-home .ref-cta__brand{margin:0 auto 44px}
html body .ref-home .ref-cta__brand p{margin:0;font-size:14px;line-height:1.9;letter-spacing:.06em;color:#4a5766}
html body .ref-home .ref-cta__brand p.ref-cta__brand-main{margin:6px 0 8px;font-size:26px;font-weight:700;line-height:1.5;letter-spacing:.04em;color:#0d1626}
/* 2026-10-03: SERVICEの料金まわり。カード上の「創業記念価格」の案内と、カード内の小さな補足。色は既存の本文グレー系のみ（セール風にしない）。 */
html body .ref-home .ref-service .ref-services__lead{max-width:1080px;margin:36px auto 0;font-size:13px;line-height:1.8;letter-spacing:.04em;color:#4a5766!important}
/* 2026-10-03: 目立たなさすぎたので、サイトの水色系の帯＋濃紺の太字にする（赤・黄・バッジは使わない）。 */
html body .ref-home .ref-service .ref-services__lead{box-sizing:border-box;padding:14px 22px;border-left:3px solid #00c4d6;border-radius:0 12px 12px 0;background:#e8f7f9;font-size:15px;font-weight:700;color:#0d1626!important}
/* 2026-10-03: 背景を白に、文字をさらに太く。白い背景でも帯の形が分かるよう、カードと同じごく薄い枠を付ける（左の水色線はそのまま）。 */
html body .ref-home .ref-service .ref-services__lead{background:#fff;border:0;border-radius:0;font-weight:800}
/* 2026-10-03: FLOW見出しと同じ「黄色が左から伸びてくる」動き。黄色は文章の部分だけ（帯の左の角から文章の終わりまで）。帯の残りは白のまま。
   見えた時に1回だけ動く。動きをオフにしている人には最初から黄色で表示。 */
@keyframes nkd-lead-yellow-reveal{from{width:0}to{width:calc(100% + 34px)}}
html body .ref-home .ref-service .ref-services__lead{position:relative;z-index:0;overflow:hidden}
html body .ref-home .ref-service .ref-services__lead>span{position:relative;display:inline-block}
html body .ref-home .ref-service .ref-services__lead>span:before{content:"";position:absolute;z-index:-1;left:-22px;top:-14px;bottom:-14px;width:calc(100% + 34px);background:#ffe100}
html body .ref-home.is-motion-ready .ref-service .ref-services__lead>span:before{width:0}
html body .ref-home.is-motion-ready .ref-service .ref-services__lead.is-revealed>span:before{animation:nkd-lead-yellow-reveal .8s cubic-bezier(.2,.7,.3,1) .15s both}
@media(max-width:760px){html body .ref-home .ref-service .ref-services__lead>span:before{left:-16px;top:-12px;bottom:-12px}}
/* 「創業記念価格」だけ、ボールと同じ黄色（#ffe100）のマーカー＋太字。文字色は読みやすさのため濃紺のまま。 */
html body .ref-home .ref-service .ref-services__lead em{margin:0 2px;padding:0 3px;font-style:normal;font-weight:900;color:#0d1626;background:linear-gradient(transparent 45%,#ffe100 45%)}
html body .ref-home .ref-service .ref-services__lead+.ref-services{margin-top:14px}
html body .ref-home .ref-services .ref-services__note{display:block;margin-top:8px;font-size:11px;line-height:1.8;letter-spacing:.02em;color:#6b7686}
/* 2026-10-03: HOMEのLP整理。OUR THINKINGの小見出し（旧PARTNERの見出し）と、スマホでの余白の圧縮。写真の高さは変えない。 */
html body .ref-home.ref-home.ref-home.ref-home .ref-thinking p.ref-thinking__sub{margin:0 0 12px;font-size:17px!important;font-weight:700;line-height:1.6;letter-spacing:.04em;color:#0090a3!important}
@media(max-width:760px){
html body .ref-home.ref-home.ref-home.ref-home .ref-thinking p.ref-thinking__sub{font-size:16px!important}
html body .ref-home .ref-values{padding:10px 12px}
html body .ref-home .ref-values article{padding:6px 4px;gap:9px}
html body .ref-home .ref-thinking{padding-top:56px;padding-bottom:56px}
html body .ref-home .ref-fact-flow__head p{margin-bottom:20px}
html body .ref-home .ref-fact-flow__head h2 em{display:block}
html body .ref-home .ref-flow{padding-top:40px;padding-bottom:40px}
html body .ref-home .ref-about{padding-bottom:44px}
}
/* 2026-10-03: HOMEの「ABOUT US」の左側を、会社案内と同じリングに（動きは company-orbit.css / .js をそのまま使用）。
   大きさは会社案内と同じ（最大330px、スマホ300px）。HOMEの言葉は4〜5文字あるので、上下の言葉は幅に関係なく中央にそろえる。 */
html body .ref-home .ref-about .co-orbit-mark{display:block;position:relative;width:100%;max-width:330px;height:auto;min-height:0;aspect-ratio:1;margin:0 auto;border-radius:50%;overflow:visible}
html body .ref-home .ref-about .co-orbit-host .co-orbit__tag--booking,html body .ref-home .ref-about .co-orbit-host .co-orbit__tag--stock{left:0;right:0;width:max-content;margin:0 auto}
@media(max-width:760px){html body .ref-home .ref-about .co-orbit-mark{max-width:300px}}
/* リングの下の一言（「お客様の動き」）。まわりの言葉が、お客様の行動だと分かるように。 */
html body .ref-home.ref-home.ref-home .ref-about p.ref-about__orbit-caption{margin:10px 0 0;text-align:center;font-size:12px!important;font-weight:700;letter-spacing:.12em;color:#178aa0!important}
/* 2026-10-03: SERVICEカードの配色と料金の見やすさ。色はネイビー・水色・黄色（注目点のみ）の3系統だけ。
   カード：グレー → ほぼ白の青み（#f7fafb）＋ごく薄い枠と影。上辺に細い色線（01 水色／02 ネイビー／03 水色＋見出し横に黄色の小さな丸）。
   料金：本文中の *…* を太字・少し大きく（サービス名は通常の文字のまま）。 */
html body .ref-home.ref-home.ref-home .ref-service .ref-services article{background:#f7fafb;border:1px solid #e3ecef;box-shadow:inset 0 3px 0 #00c4d6,0 2px 10px rgba(13,22,38,.04)}
html body .ref-home.ref-home.ref-home .ref-service .ref-services article:nth-child(2){box-shadow:inset 0 3px 0 #0d1626,0 2px 10px rgba(13,22,38,.04)}
html body .ref-home.ref-home.ref-home .ref-service .ref-services article:hover{box-shadow:inset 0 3px 0 #00c4d6,0 16px 25px rgba(19,37,68,.09)}
html body .ref-home.ref-home.ref-home .ref-service .ref-services article:nth-child(2):hover{box-shadow:inset 0 3px 0 #0d1626,0 16px 25px rgba(19,37,68,.09)}
html body .ref-home .ref-service .ref-services article:nth-child(3) h3:after{content:"";display:inline-block;width:9px;height:9px;margin-left:9px;border-radius:50%;background:#ffe100;vertical-align:middle;transform:translateY(-1px)}
html body .ref-home .ref-service .ref-services article p em{font-style:normal;font-size:18px;font-weight:700;line-height:1.6;letter-spacing:.03em;color:#0d1626}
@media(max-width:760px){html body .ref-home .ref-service .ref-services__lead{margin-top:24px;padding:12px 16px;font-size:14px}html body .ref-home .ref-services .ref-services__note{font-size:11px}}
@media(max-width:760px){html body .ref-home .ref-cta__brand{margin-bottom:32px}html body .ref-home .ref-cta__brand p{font-size:13px}html body .ref-home .ref-cta__brand p.ref-cta__brand-main{font-size:21px}}
/* 2026-10-07: HOME最下部の相談フォーム */
.ref-contact{padding:88px max(5%,24px) 96px;background:#effcff;color:#0d1626}
.ref-contact__intro{max-width:760px;margin:0 auto;text-align:center}
.ref-contact__intro label{display:block;margin-bottom:12px;color:#06adc5;font-size:12px;font-weight:800;letter-spacing:.16em}
.ref-contact__intro h2{margin:0;font-size:clamp(28px,4vw,46px);line-height:1.35;letter-spacing:.03em}
.ref-contact__intro p{margin:18px 0 0;line-height:1.9}
.ref-contact__choices{display:flex;align-items:center;justify-content:center;gap:16px;margin:32px 0 24px;color:#6b7d86;font-size:14px}
.ref-contact__line{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;border-radius:999px;background:#06adc5;color:#fff!important;font-weight:800;text-decoration:none;box-shadow:0 8px 18px rgba(6,173,197,.2)}
.ref-contact__form{max-width:760px;margin:0 auto;padding:clamp(24px,4vw,48px);border-radius:18px;background:#fff;box-shadow:0 14px 34px rgba(13,22,38,.08)}
.ref-contact__form .nkd-contact-form__field{margin:0 0 18px}
.ref-contact__form label{display:block;font-size:14px;font-weight:700;line-height:1.6}
.ref-contact__form input,.ref-contact__form select,.ref-contact__form textarea{box-sizing:border-box;width:100%;margin-top:7px;padding:12px 14px;border:1px solid #cbd8dc;border-radius:8px;background:#fff;color:#0d1626;font:inherit}
.ref-contact__form textarea{min-height:130px;resize:vertical}
.ref-contact__form .nkd-contact-form__optional{color:#71818a;font-size:12px;font-weight:400}
.ref-contact__form .nkd-contact-form__required{color:#d34b4b;font-size:12px}
.ref-contact__form .nkd-contact-form__submit{text-align:center}
.ref-contact__form input[type="submit"]{width:auto;margin-top:8px;padding:14px 32px;border:0;border-radius:999px;background:#0d1626;color:#fff;font-weight:800;cursor:pointer}
.ref-contact__form .wpcf7-response-output{margin:18px 0 0!important;padding:10px 12px!important;font-size:14px}
@media(max-width:640px){.ref-contact{padding:62px 18px}.ref-contact__choices{flex-direction:column;gap:9px}.ref-contact__line{width:100%;max-width:360px}.ref-contact__form{padding:24px 18px}.ref-contact__intro p br{display:none}}