:root{
  --paper:#f6fbfa;
  --paper-2:#ffffff;
  --ink:#173042;
  --ink-soft:#526c79;
  --line:#dceae7;
  --sea:#56b8aa;
  --sea-dark:#2c8278;
  --sky:#8ac7df;
  --mist:#eaf6f4;
  --sand:#f5f1e8;
  --shadow:0 24px 70px rgba(45,92,99,.11);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 86% 6%,rgba(138,199,223,.18),transparent 27rem),
    radial-gradient(circle at 8% 18%,rgba(86,184,170,.11),transparent 24rem),
    var(--paper);
  font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  line-height:1.85;
}
a{color:inherit;text-decoration:none}
.shell{width:min(1160px,calc(100% - 40px));margin-inline:auto}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  min-height:76px;padding:0 max(20px,4vw);
  border-bottom:1px solid rgba(220,234,231,.9);
  background:rgba(246,251,250,.88);
  backdrop-filter:blur(16px);
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  display:grid;place-items:center;width:42px;height:42px;border-radius:14px;
  background:linear-gradient(145deg,var(--sea),var(--sky));
  color:white;font:800 11px/1 "Segoe UI",sans-serif;letter-spacing:.08em;
  box-shadow:0 10px 25px rgba(63,157,147,.20)
}
.brand-mark.small{width:34px;height:34px;border-radius:11px;font-size:9px}
.brand-text{display:grid;gap:2px}
.brand-text strong,.footer-brand strong{font-size:14px;letter-spacing:.04em}
.brand-text small,.footer-brand small{font-size:10px;color:var(--ink-soft);letter-spacing:.09em}
.topbar nav{display:flex;gap:28px}
.topbar nav a{
  font-size:12px;font-weight:700;color:var(--ink-soft);
  transition:color .2s ease
}
.topbar nav a:hover{color:var(--sea-dark)}
.hero{
  min-height:calc(100vh - 76px);
  display:grid;grid-template-columns:1.08fr .92fr;gap:6vw;align-items:center;
  padding:75px 0 95px
}
.eyebrow{
  margin:0 0 16px;color:var(--sea-dark);
  font:800 10px/1.3 "Segoe UI",sans-serif;letter-spacing:.19em
}
h1,h2,h3{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif}
h1{
  margin:0;font-size:clamp(46px,7vw,88px);line-height:1.14;
  letter-spacing:-.035em;font-weight:600
}
h1 em{font-style:normal;color:var(--sea-dark)}
.lead{
  max-width:670px;margin:30px 0 0;color:var(--ink-soft);
  font-size:17px
}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 21px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.03em
}
.button.primary{background:var(--ink);color:white;box-shadow:0 12px 30px rgba(23,48,66,.14)}
.button.secondary{border:1px solid var(--line);background:rgba(255,255,255,.7)}
.button:hover{transform:translateY(-1px)}
.hero-visual{
  position:relative;min-height:520px;border-radius:44px;overflow:hidden;
  background:linear-gradient(180deg,#eef9fb 0%,#edf9f5 51%,#f8f5ed 100%);
  box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.9)
}
.sun{
  position:absolute;right:16%;top:12%;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 32%,#dff3ee 33% 100%);
  box-shadow:0 0 90px rgba(255,255,255,.9)
}
.horizon{position:absolute;left:-8%;right:-8%;border-radius:50% 50% 0 0}
.h1{height:180px;bottom:0;background:#cfe9e4;transform:rotate(-3deg)}
.h2{height:135px;bottom:-12px;background:#abd7d1;transform:rotate(4deg)}
.h3{height:82px;bottom:-18px;background:#7ebbb2;transform:rotate(-1deg)}
.floating-card{
  position:absolute;padding:18px 20px;border-radius:22px;
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.92);
  box-shadow:0 18px 40px rgba(66,118,120,.13);backdrop-filter:blur(12px)
}
.floating-card span{display:block;color:var(--sea-dark);font:800 9px/1 "Segoe UI",sans-serif;letter-spacing:.18em}
.floating-card strong{display:block;margin-top:7px;font-family:"Yu Mincho","Noto Serif JP",serif;font-size:22px}
.card-a{left:10%;top:16%}.card-b{right:9%;top:43%}.card-c{left:18%;bottom:16%}
.section{position:relative;padding:110px 0;border-top:1px solid var(--line)}
.section-label{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.section-label span{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--mist);color:var(--sea-dark);font-size:11px;font-weight:800
}
.section-label small{color:var(--ink-soft);font-size:10px;font-weight:800;letter-spacing:.15em}
.section-title{max-width:760px;margin-bottom:55px}
.section-title h2{
  margin:0;font-size:clamp(35px,5vw,62px);line-height:1.25;
  font-weight:600;letter-spacing:-.02em
}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px}
.prose{
  padding:34px 36px;border-radius:28px;background:rgba(255,255,255,.62);
  border:1px solid var(--line)
}
.prose p{margin:0;color:var(--ink-soft);font-size:15px}
.prose p+p{margin-top:20px}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.trust-grid article{
  padding:24px;border-radius:24px;background:var(--paper-2);
  border:1px solid var(--line);box-shadow:0 14px 35px rgba(45,92,99,.06)
}
.mini-icon{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--mist);color:var(--sea-dark);font-weight:800
}
.trust-grid small{
  display:block;margin:34px 0 7px;color:var(--ink-soft);
  font-size:9px;font-weight:800;letter-spacing:.13em
}
.trust-grid strong{display:block;font-size:15px}
.trust-grid p{margin:8px 0 0;color:var(--ink-soft);font-size:13px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.service-grid article{
  min-height:260px;padding:30px;border-radius:26px;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.76));
  border:1px solid var(--line);box-shadow:0 15px 38px rgba(52,99,103,.06)
}
.service-number{color:var(--sea-dark);font-size:11px;font-weight:800;letter-spacing:.1em}
.service-grid h3{margin:54px 0 12px;font-size:24px;font-weight:600}
.service-grid p{color:var(--ink-soft);font-size:14px}
.product-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.product{
  display:grid;grid-template-columns:1fr .8fr;gap:24px;min-height:360px;
  padding:30px;border-radius:30px;background:white;border:1px solid var(--line);
  box-shadow:0 18px 46px rgba(47,96,100,.07)
}
.product:not(.featured){grid-template-columns:1fr;min-height:360px}
.status{color:var(--sea-dark);font-size:9px;font-weight:800;letter-spacing:.15em}
.product h3{margin:13px 0 13px;font-size:30px;font-weight:600}
.product p{color:var(--ink-soft);font-size:14px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.tags span{
  padding:6px 9px;border-radius:999px;background:var(--mist);
  color:var(--sea-dark);font-size:9px;font-weight:800
}
.product-art{position:relative;min-height:240px;border-radius:22px;overflow:hidden;background:linear-gradient(150deg,#e7f6f4,#eaf4fb)}
.art-cards .tile{
  position:absolute;width:86px;height:118px;border-radius:16px;
  background:white;border:1px solid var(--line);box-shadow:0 16px 30px rgba(55,94,98,.11)
}
.art-cards .t1{left:18%;top:27%;transform:rotate(-15deg)}
.art-cards .t2{left:34%;top:20%;transform:rotate(-4deg)}
.art-cards .t3{left:50%;top:22%;transform:rotate(8deg)}
.art-cards .t4{left:61%;top:31%;transform:rotate(17deg)}
.art-cards .tile:before{
  content:"◆";position:absolute;left:12px;top:8px;color:#5ba99e;font-size:20px
}
.art-orbit{min-height:190px;background:linear-gradient(150deg,#eef8f5,#f9f3e7)}
.art-orbit:before{
  content:"";position:absolute;inset:24% 17%;border:1px solid #8fc8bf;border-radius:50%
}
.art-orbit i{
  position:absolute;width:20px;height:20px;border-radius:50%;background:#6ab6aa
}
.art-orbit i:nth-child(1){left:18%;top:44%}
.art-orbit i:nth-child(2){right:20%;top:32%;background:#8bc3da}
.art-orbit i:nth-child(3){right:30%;bottom:18%;background:#dbcfa9}
.values{
  display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center
}
blockquote{
  margin:0;padding:38px;border-radius:30px;background:linear-gradient(145deg,#edf8f5,#f4f8fb);
  border:1px solid var(--line)
}
blockquote p{
  margin:0;font-family:"Yu Mincho","Noto Serif JP",serif;
  font-size:clamp(25px,3.5vw,42px);line-height:1.55;color:var(--ink)
}
.value-list{display:grid;gap:0;border-top:1px solid var(--line)}
.value-list div{
  display:grid;grid-template-columns:140px 1fr;gap:25px;
  padding:20px 0;border-bottom:1px solid var(--line)
}
.value-list strong{font-family:"Segoe UI",sans-serif;color:var(--sea-dark)}
.value-list span{color:var(--ink-soft)}
.contact-section{padding-bottom:130px}
.contact-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:45px;
  padding:45px;border-radius:34px;background:var(--ink);color:white;
  box-shadow:0 25px 60px rgba(23,48,66,.16)
}
.contact-panel h2{margin:0;font-size:42px;color:white}
.contact-panel p{color:#d4e0e6}
.contact-links{display:grid;gap:10px}
.contact-links a{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12)
}
.contact-links a:hover{background:rgba(255,255,255,.11)}
.contact-links span{font-size:10px;color:#a9c7d1;letter-spacing:.12em;text-transform:uppercase}
.contact-links strong{font-size:13px}
footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:32px 0 45px;border-top:1px solid var(--line);
  color:var(--ink-soft);font-size:11px
}
.footer-brand{display:flex;align-items:center;gap:11px}
.footer-brand div{display:grid}
.page{min-height:100vh;padding:80px 0}
.page-card{
  max-width:920px;margin:0 auto;padding:clamp(30px,6vw,58px);
  background:white;border:1px solid var(--line);border-radius:32px;
  box-shadow:var(--shadow)
}
.page-card h1{
  margin:0;font-size:clamp(38px,6vw,64px);line-height:1.2;
  font-weight:600
}
.page-card h2{margin:42px 0 9px;font-size:22px;font-weight:600}
.page-card p,.page-card li,.legal-grid dd{color:var(--ink-soft)}
.notice,.warning{
  margin:25px 0;padding:18px 20px;border-radius:18px
}
.notice{background:#eef8f6;border:1px solid #d5ebe5}
.warning{background:#fbf6e9;border:1px solid #eadfbf;color:#7c6a3a}
.back{
  display:inline-flex;margin-bottom:28px;color:var(--sea-dark);
  font-size:12px;font-weight:800
}
.legal-grid{margin:25px 0;border-top:1px solid var(--line)}
.legal-grid div{
  display:grid;grid-template-columns:220px 1fr;border-bottom:1px solid var(--line)
}
.legal-grid dt,.legal-grid dd{margin:0;padding:16px}
.legal-grid dt{font-weight:800;color:var(--ink)}
.placeholder{color:#947b3c!important}
.small-note{font-size:12px}
@media(max-width:900px){
  .topbar nav{display:none}
  .hero,.about-grid,.values,.contact-panel{grid-template-columns:1fr}
  .hero{padding:65px 0}
  .hero-visual{min-height:430px}
  .trust-grid,.service-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .product{grid-template-columns:1fr}
  footer{flex-direction:column;align-items:flex-start;gap:18px}
}
@media(max-width:560px){
  .shell{width:calc(100% - 28px)}
  .brand-text small{display:none}
  h1{font-size:43px}
  .section{padding:82px 0}
  .hero-visual{min-height:360px;border-radius:28px}
  .floating-card{padding:13px 15px;border-radius:16px}
  .floating-card strong{font-size:17px}
  .values{gap:20px}
  .value-list div{grid-template-columns:1fr;gap:2px}
  .contact-panel{padding:28px}
  .legal-grid div{grid-template-columns:1fr}
  .legal-grid dt{padding-bottom:0}
}

@media(max-width:1100px) and (min-width:901px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
}

.header-right{display:flex;align-items:center;gap:22px}
.lang-switch{
  display:inline-flex;align-items:center;padding:3px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.82)
}
.lang-switch button{
  border:0;background:transparent;color:var(--ink-soft);cursor:pointer;
  padding:7px 10px;border-radius:999px;font-size:10px;font-weight:800
}
.lang-switch button.active{background:var(--ink);color:#fff}
@media(max-width:900px){
  .header-right nav{display:none}
  .header-right{gap:8px}
}