:root{--bg: #ffffff;--bg-alt: #f7f6f3;--surface: #ffffff;--ink: #1b1a18;--text: #1b1a18;--text-muted: #5a5650;--border: #e3e0da;--water: #0f6fd1;--water-dark: #0b5299;--water-soft: #eef4fa;--cyan: #0a9fb4;--cyan-text: #05707f;--cyan-soft: #eef6f7;--fish: #f2662a;--fish-deep: #d94d14;--fish-text: #96330a;--radius: 4px;--radius-lg: 6px;--wrap: 1120px;--font-sans: system-ui, -apple-system, "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;--font-serif: system-ui, -apple-system, "Helvetica Neue", Arial, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}img,video{max-width:100%;height:auto;display:block}a{color:var(--water);text-underline-offset:3px}a:hover{color:var(--water-dark)}h1,h2,h3{font-family:var(--font-serif);font-weight:600;line-height:1.45;letter-spacing:.02em;margin:0}p{margin:0}ul,ol{margin:0;padding:0}.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}:focus-visible{outline:3px solid var(--water);outline-offset:3px;border-radius:6px}.skip-link{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;margin:0;clip-path:none;z-index:100;background:var(--surface);color:var(--text);padding:.7rem 1.2rem;border-radius:10px;border:1px solid var(--border);box-shadow:0 8px 24px #1218201f}.site-header{position:sticky;top:0;z-index:50;background:#ffffffd1;backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-serif);font-weight:600;font-size:1.1rem;letter-spacing:.14em;color:var(--ink);text-decoration:none}.brand-mark{width:20px;height:20px;flex:none;border-radius:50% 50% 50% 12%;background:linear-gradient(140deg,var(--fish),var(--fish-deep));transform:rotate(-12deg)}.header-tools{display:flex;align-items:center;gap:1.4rem;min-width:0}.nav{display:flex;gap:1.8rem;font-family:var(--font-serif);font-size:.92rem;font-weight:500;letter-spacing:.06em}.nav a{color:var(--text-muted);text-decoration:none;padding-block:.35rem;white-space:nowrap}.nav a:hover{color:var(--ink)}.nav a[aria-current=page]{color:var(--ink);position:relative}.nav a[aria-current=page]:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink)}.lang-toggle{flex:none;display:inline-flex;align-items:center;padding:.3rem .75rem;border:1px solid var(--border);border-radius:2px;font-size:.74rem;font-weight:600;letter-spacing:.1em;color:var(--text-muted);text-decoration:none;white-space:nowrap;transition:border-color .2s ease,color .2s ease,background-color .2s ease}.lang-toggle:hover{border-color:var(--ink);color:var(--ink);background:transparent}@media(max-width:760px){.header-inner{min-height:60px;gap:.6rem}.brand{font-size:.86rem;letter-spacing:.04em;gap:.45rem}.brand-mark{width:17px;height:17px}.header-tools{gap:.7rem}.nav{gap:.72rem;font-size:.76rem}.lang-toggle{padding:.26rem .6rem;font-size:.72rem}}@media(max-width:480px){.header-inner{gap:.45rem}.brand{font-size:.76rem;letter-spacing:0}.header-tools{gap:.45rem}.nav{gap:.45rem;font-size:.66rem}.lang-toggle{padding:.2rem .45rem;font-size:.65rem}}@media(max-width:360px){.brand-text{display:none}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.95rem 1.9rem;border-radius:2px;font-size:.92rem;font-weight:600;letter-spacing:.04em;text-decoration:none;border:1px solid transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.btn-primary{background:var(--ink);color:#fff}.btn-primary:hover{background:#000;color:#fff}.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}.btn-ghost:hover{background:var(--ink);color:#fff}.btn-arrow,.btn-external{font-size:.9em}.hero{position:relative;overflow:hidden;padding-block:clamp(5rem,13vw,9.5rem) clamp(5rem,12vw,8rem);background:var(--bg);border-bottom:1px solid var(--border)}.hero-water{position:absolute;inset:0;pointer-events:none}.ripple{position:absolute;border-radius:50%;border:1px solid rgba(10,159,180,.1);animation:ripple 14s ease-out infinite}.ripple-1{width:260px;height:260px;left:-60px;top:18%}.ripple-2{width:400px;height:400px;right:-110px;top:4%;animation-delay:3s}.ripple-3{width:180px;height:180px;right:22%;bottom:6%;animation-delay:6s}@keyframes ripple{0%{transform:scale(.85);opacity:0}25%{opacity:.9}to{transform:scale(1.35);opacity:0}}.hero-inner{position:relative;max-width:46rem}.eyebrow{margin-bottom:1.2rem;font-size:.76rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}.hero-title{font-size:clamp(2rem,5.6vw,3.5rem);font-weight:600;letter-spacing:.01em;line-height:1.42;margin-bottom:1.8rem}.hero-lead{font-size:clamp(1rem,2.2vw,1.12rem);color:var(--text-muted);max-width:34rem;margin-bottom:2.4rem}.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2rem}.hero-role{font-size:.88rem;color:var(--text-muted);padding-top:1.4rem;border-top:1px solid var(--border);max-width:26rem}.scroll-hint{position:absolute;left:50%;bottom:1.4rem;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;text-decoration:none;color:var(--text-muted)}.scroll-hint-line{width:1px;height:34px;background:linear-gradient(to bottom,transparent,var(--water))}.scroll-hint-text{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}@media(max-width:620px){.scroll-hint{display:none}}.page-hero{position:relative;overflow:hidden;padding-block:clamp(3.4rem,8vw,5.5rem) clamp(2.4rem,5vw,3.6rem);background:var(--bg-alt);border-bottom:1px solid var(--border)}.page-hero-inner{position:relative;max-width:44rem}.page-title{font-size:clamp(1.8rem,4.6vw,2.8rem);font-weight:600;letter-spacing:.02em;margin-bottom:1.1rem}.page-lead{color:var(--text-muted);font-size:clamp(.98rem,2vw,1.06rem);max-width:36rem}.teaser{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:2.5rem}@media(max-width:900px){.teaser{grid-template-columns:1fr}}.nav-cards{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1.5rem;margin-top:2.5rem}.nav-card a{display:block;height:100%;padding:1.7rem 1.6rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.nav-card a:hover{border-color:var(--ink)}.nav-card-label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-text);margin-bottom:.6rem}.nav-card-title{font-size:1.1rem;margin-bottom:.5rem}.nav-card-text{font-size:.9rem;color:var(--text-muted);margin-bottom:.9rem}.nav-card-more{font-size:.88rem;font-weight:700;color:var(--water)}.page-next{border-top:1px solid var(--border);padding-block:clamp(2.5rem,6vw,4rem)}.page-next-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem}.page-next-text{font-weight:700;font-size:1.05rem}.section{padding-block:clamp(4rem,10vw,7.5rem)}.section-alt{background:var(--bg-alt)}.section-label{margin-bottom:.7rem;font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}.section-title{font-size:clamp(1.5rem,3.6vw,2.2rem);font-weight:600;letter-spacing:.02em;margin-bottom:1.1rem}.section-lead{margin-bottom:3rem;max-width:42rem;color:var(--text-muted)}.section-work{padding-top:clamp(3.5rem,8vw,6rem)}.work{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:2.5rem}@media(max-width:900px){.work{grid-template-columns:1fr}}.work-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:linear-gradient(170deg,#f9fbfc,#eef4f7 55%,#e6eef3);aspect-ratio:4 / 3}.work-visual-media{background:var(--bg-alt)}.work-visual-media img,.work-visual-media video{width:100%;height:100%;object-fit:cover;display:block}.tank{position:absolute;inset:0}.tank-surface{position:absolute;left:8%;right:8%;top:34%;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.7}.tank-surface:after{content:"";position:absolute;inset:2px 0 auto;height:46%;background:linear-gradient(to bottom,rgba(10,159,180,.1),transparent)}.tank-glow{position:absolute;inset:36% 12% 8%;border-radius:0 0 20px 20px;background:linear-gradient(to bottom,#0f6fd11a,#0a9fb40d);border:1px solid rgba(15,111,209,.16);border-top:none}.fish{position:absolute;width:30px;height:18px;border-radius:50% 44%;background:linear-gradient(135deg,var(--fish),var(--fish-deep));box-shadow:0 6px 14px -6px #d94d148c}.fish:after{content:"";position:absolute;right:-11px;top:50%;width:14px;height:15px;transform:translateY(-50%);background:linear-gradient(135deg,var(--fish-deep),var(--fish));clip-path:polygon(0 50%,100% 0,78% 50%,100% 100%);opacity:.92}.fish-1{left:20%;top:52%;animation:swim 11s ease-in-out infinite}.fish-2{left:52%;top:64%;transform:scale(.78);animation:swim 14s ease-in-out infinite reverse}.fish-3{left:36%;top:22%;transform:scale(.62) rotate(-16deg);animation:leap 9s ease-in-out infinite;opacity:.9}@keyframes swim{0%,to{translate:0 0}50%{translate:34px -12px}}@keyframes leap{0%,to{translate:0 0;opacity:.35}45%{translate:26px -46px;opacity:1}}.trail{position:absolute;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(10,159,180,.32),transparent);height:1.5px}.trail-1{left:24%;width:34%;top:46%;animation:fade 7s ease-in-out infinite}.trail-2{left:44%;width:26%;top:74%;animation:fade 9s ease-in-out infinite 2s}@keyframes fade{0%,to{opacity:.15}50%{opacity:.8}}.work-catch{font-family:var(--font-serif);font-size:clamp(1.15rem,2.8vw,1.5rem);font-weight:600;letter-spacing:.02em;color:var(--ink);margin-bottom:1.1rem}.work-text{color:var(--text-muted);margin-bottom:1.8rem}.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}.tags li{font-size:.78rem;font-weight:500;letter-spacing:.05em;padding:.32rem .8rem;border-radius:2px;border:1px solid var(--border);background:transparent;color:var(--text-muted)}.tags-sm{margin-bottom:0}.tags-sm li{font-size:.72rem;padding:.25rem .65rem}.work-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2rem}.howto{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}.howto summary{cursor:pointer;padding:1rem 1.3rem;font-weight:700;font-size:.94rem;display:flex;align-items:center;gap:.6rem;list-style:none}.howto summary::-webkit-details-marker{display:none}.howto summary:before{content:"";width:8px;height:8px;flex:none;border-right:2px solid var(--water);border-bottom:2px solid var(--water);transform:rotate(45deg);transition:transform .2s ease}.howto[open] summary:before{transform:rotate(225deg)}.howto summary:hover{color:var(--water)}.howto-body{padding:1.2rem 1.3rem 1.4rem;border-top:1px solid var(--border)}.howto-list{margin:0 0 1rem;padding-left:1.4rem;font-size:.94rem}.howto-list li{margin-bottom:.5rem}.howto-note{font-size:.84rem;color:var(--text-muted)}.about-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:2.5rem}@media(max-width:820px){.about-grid{grid-template-columns:1fr}}.about-body p{margin-bottom:1.3rem;max-width:38rem}.about-body p:last-child{margin-bottom:0}.skills{padding:1.6rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.skills-title{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem}.skill-list{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}.skill-list li{font-size:.84rem;font-weight:500;padding:.38rem .85rem;border-radius:2px;border:1px solid var(--border);background:transparent;color:var(--text-muted)}.cards{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:1.5rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.card:hover{border-color:var(--ink)}.card-link{display:block;color:inherit;text-decoration:none}.card-media{background:var(--bg-alt)}.card-media img,.card-media video{width:100%}.card-media-empty{aspect-ratio:16 / 10;background:radial-gradient(70% 60% at 30% 20%,var(--cyan-soft),transparent 70%),linear-gradient(150deg,#f7fbff,#e9f4fd);position:relative}.card-media-empty:after{content:"";position:absolute;left:18%;right:18%;top:52%;height:1.5px;background:linear-gradient(90deg,transparent,rgba(10,159,180,.5),transparent)}.card-body{padding:1.3rem 1.4rem 1.6rem}.card-title{font-size:1.06rem;margin-bottom:.5rem}.card-status{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .65rem;border-radius:2px;background:transparent;border:1px solid var(--fish);color:var(--fish-text);margin-bottom:.8rem}.card-text{font-size:.92rem;color:var(--text-muted);margin-bottom:.8rem}.process{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1.5rem;margin-top:2.5rem;counter-reset:step}.step{position:relative;padding:1.7rem 1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.step-num{display:block;font-size:.78rem;font-weight:800;letter-spacing:.12em;color:var(--cyan-text);margin-bottom:.7rem}.step-title{font-size:1.08rem;margin-bottom:.4rem}.step-text{font-size:.9rem;color:var(--text-muted)}.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.5rem;margin-top:2.5rem}.contact-card{padding:2rem 1.8rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:flex-start;gap:1rem}.contact-card-title{font-size:1.12rem}.contact-card-text{color:var(--text-muted);font-size:.94rem;flex:1}.site-footer{border-top:1px solid var(--border);padding-block:2.5rem}.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;flex-wrap:wrap}.copyright{font-weight:700;font-size:.92rem;margin-bottom:.25rem}.footer-note{font-size:.82rem;color:var(--text-muted)}.footer-links{list-style:none;display:flex;gap:1.4rem;font-size:.9rem;font-weight:600}.footer-links a{text-decoration:none;display:inline-flex;align-items:center;gap:.25rem}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.btn:hover,.card:hover{transform:none}}