/* East Star v2 — 下層ページ */
/* page head：トップの冒頭画面と同じ「ピントが合う」入り方 */
.ph{position:relative;background:var(--navy);color:#EEF3F6;overflow:hidden;padding:72px 0 88px}
.ph-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(111,211,224,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(111,211,224,.06) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,transparent 20%,#000 80%)}
.ph-in{position:relative;display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.ph-product .ph-in{grid-template-columns:1.2fr .8fr}
.ph-bc{font-size:12px;color:#8C9AA6;margin:0 0 40px}
.ph-bc a{color:#C9D3DB}
.ph-eyebrow{font-size:12px;letter-spacing:.24em;color:var(--aqua);margin:0 0 16px}
.ph-h{font-size:clamp(30px,4vw,52px);line-height:1.35;margin:0;font-weight:700;animation:phin 1.4s var(--ease) both}
.ph-lead{max-width:40em;color:#B8C4CD;margin:24px 0 0;animation:rise 1s var(--ease) .4s both}
@keyframes phin{from{filter:blur(10px);opacity:0}to{filter:none;opacity:1}}
.ph-visual{position:relative;background:var(--plate);aspect-ratio:4/3;display:grid;place-items:center;animation:focusin 2s cubic-bezier(.3,.1,.2,1) both}
.ph-visual img{width:56%;mix-blend-mode:multiply}
.ph-visual svg{width:70%}
.ph-visual svg g{stroke:var(--navy)}
.ph-ret{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;margin:-11% 0 0 -11%;border:1px solid var(--aqua-d);opacity:0;animation:retin .8s var(--ease) 1.4s forwards;transform:scale(1.8)}
@keyframes focusin{from{filter:blur(14px)}to{filter:none}}

/* 共通部品 */
.sub p{max-width:46em}
.sub .h2{margin-bottom:24px}
.sub.tint{background:var(--mist)}
.sub.dark{background:var(--navy);color:#DCE4EA}
.sub.dark .h2{color:#fff}.sub.dark .eyebrow{color:var(--aqua)}.sub.dark p{color:#B8C4CD}
.sub h3{font-size:19px;line-height:1.5;margin:0 0 8px}
.btn-navy{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.btn-navy:hover{background:var(--aqua-d)}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
.text-link{color:var(--aqua-d);font-weight:700;text-decoration:none;display:inline-block;margin-top:12px}
.text-link:hover{text-decoration:underline}
.category{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--aqua-d);margin-bottom:6px}
.draft-banner{background:#FFF8E6;border-left:3px solid #C9962B;color:#6B5420;font-size:14px;padding:14px 18px;margin:0 0 28px;max-width:none}
.sub .note{font-size:13px}

/* 製品ページ */
.product-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.card-art{background:var(--plate);aspect-ratio:4/3;display:grid;place-items:center;position:relative;overflow:hidden}
.card-art img{width:56%;mix-blend-mode:multiply}
.card-art svg{width:72%}
.card-art svg g{stroke:var(--navy)}
.spec-table{width:100%;border-collapse:collapse;background:#fff;border-top:1px solid var(--ink);margin:8px 0 0}
.spec-table th,.spec-table td{padding:18px 20px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:15px}
.spec-table th{width:28%;font-weight:700;background:#FAFBFC}
.document-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:28px}
.document-grid figure{margin:0;background:#fff;border:1px solid var(--line);padding:16px;transition:border-color .25s,transform .25s var(--ease)}
.document-grid figure:hover{border-color:var(--aqua-d);transform:translateY(-3px)}
.document-grid img{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--mist)}
.document-grid figcaption{font-size:13px;color:var(--sub);margin-top:10px}
.document-grid figcaption a{color:var(--aqua-d)}

/* 製品の切り替え */
.pnav-sec{background:var(--mist)}
.pnav{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.pnav-item{display:flex;flex-direction:column;gap:4px;padding:24px 20px 24px 0;text-decoration:none;border-bottom:1px solid var(--line);position:relative}
.pnav-item+.pnav-item{padding-left:20px;border-left:1px solid var(--line)}
.pnav-item span{font-size:11px;color:var(--aqua-d)}
.pnav-item b{font-size:18px}
.pnav-item small{font-size:13px;color:var(--sub)}
.pnav-item::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--aqua-d);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.pnav-item:hover::after,.pnav-item[aria-current]::after{transform:scaleX(1)}
.pnav-item[aria-current] b::after{content:"表示中";font-size:11px;font-weight:500;color:#fff;background:var(--aqua-d);padding:2px 8px;margin-left:10px;vertical-align:middle}

/* ソリューション一覧 */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.product-card,.article-card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .25s,transform .25s var(--ease);position:relative}
.product-card:hover,.article-card:hover{border-color:var(--aqua-d);transform:translateY(-3px)}
.product-card .card-body{padding:22px 22px 26px}
.product-card .card-body p{font-size:14px;color:var(--sub)}
.article-card{padding:26px 24px}
.article-card p{font-size:14px;color:var(--sub)}
@media (hover:hover){
  .product-card .card-art img,.product-card .card-art svg{filter:blur(2.5px) grayscale(.5);transform:scale(.96);transition:filter .6s var(--ease),transform .6s var(--ease)}
  .product-card:hover .card-art img,.product-card:hover .card-art svg{filter:none;transform:none}
  .product-card:hover .corners{inset:8%;opacity:1}
}

/* 本文（about・privacy・記事） */
.prose{max-width:760px}
.prose h2{font-size:24px;line-height:1.5;margin:48px 0 14px;padding-left:16px;border-left:3px solid var(--aqua-d)}
.prose h2:first-child,.prose .draft-banner+h2{margin-top:0}
.prose ul{padding-left:1.3em}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.article-layout{display:grid;grid-template-columns:1fr 260px;gap:64px;align-items:start}
.sidebar{position:sticky;top:110px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--ink);padding-top:18px;font-size:14px}
.sidebar a{text-decoration:none;color:var(--sub)}
.sidebar a:hover{color:var(--aqua-d)}
.author{margin-top:48px;padding:18px 20px;background:var(--mist);font-size:13px;color:var(--sub)}
.archive-meta{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--sub)}
.archive-body img{margin:16px 0}

/* FAQ（下層） */
.sub .faq details{border-bottom:1px solid var(--line);background:#fff}
.sub .faq details+details{margin-top:8px}
.sub .faq summary{cursor:pointer;list-style:none;padding:20px 56px 20px 24px;font-weight:700;position:relative}
.sub .faq summary::-webkit-details-marker{display:none}
.sub .faq summary::after{content:"+";position:absolute;right:24px;top:16px;font-size:22px;color:var(--aqua-d);font-family:'Space Grotesk'}
.sub .faq details[open] summary::after{content:"−"}
.sub .faq details p{margin:0;padding:0 24px 22px;color:var(--sub);font-size:15px}
.sub .faq{max-width:none}

/* お問い合わせ */
.contact-cols{display:grid;grid-template-columns:1.4fr .8fr;gap:64px;align-items:start}
.form-row{margin:0 0 24px;border:0;padding:0;min-width:0}
.form-row label,.form-row legend{display:block;font-weight:700;margin-bottom:8px;padding:0}
.required,.optional{font-size:11px;font-weight:700;margin-left:10px;padding:2px 8px;vertical-align:middle}
.required{background:var(--navy);color:#fff}
.optional{background:var(--line);color:var(--sub)}
.form-row input:not([type=radio]):not([type=checkbox]),.form-row textarea{width:100%;min-height:50px;border:1px solid #B9C3CC;background:#fff;padding:12px 14px;font:inherit;font-size:16px}
.form-row textarea{min-height:160px}
.form-row input:focus,.form-row textarea:focus{outline:2px solid var(--aqua-d);outline-offset:0;border-color:var(--aqua-d)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.seg,.chips{display:flex;flex-wrap:wrap;gap:10px}
.seg label,.chips label{position:relative;margin:0;font-weight:500;cursor:pointer}
.seg input,.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span,.chips span{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:1px solid #B9C3CC;background:#fff;transition:all .2s;font-size:14px}
.seg input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy)}
.chips input:checked+span{background:#E3F5F8;border-color:var(--aqua-d);color:var(--navy)}
.chips input:checked+span::before{content:"✓";margin-right:6px;color:var(--aqua-d);font-weight:700}
.seg input:focus-visible+span,.chips input:focus-visible+span{outline:2px solid var(--aqua-d);outline-offset:2px}
#docs-row[hidden]{display:none}
.check{display:flex;gap:10px;align-items:center;margin:8px 0 28px;font-size:14px}
.check input{width:20px;height:20px}
.form-submit{border:0;cursor:pointer;font-family:inherit;min-width:260px}
.field-error{color:#B3261E;font-size:13px;margin:6px 0 0}
.confirmation{margin-top:32px;background:var(--mist);padding:28px;border-top:3px solid var(--aqua-d)}
.confirmation dl{display:grid;grid-template-columns:9em 1fr;gap:8px 16px;font-size:14px}
.confirmation dt{font-weight:700}.confirmation dd{margin:0;white-space:pre-wrap}
.contact-aside{background:var(--mist);padding:32px 28px;position:sticky;top:110px}
.contact-aside h2{font-size:18px;margin:0 0 8px}
.contact-aside h2+p{margin-top:0}
.contact-aside p{font-size:14px;color:var(--sub)}
.contact-aside p+h2{margin-top:28px}

/* 下層のナビ現在地 */
.gnav a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--aqua)}

@media (max-width:900px){
  .ph{padding:48px 0 64px}
  .ph-product .ph-in,.product-layout,.two-col,.article-layout,.contact-cols{grid-template-columns:1fr;gap:36px}
  .ph-visual{max-width:420px}
  .pnav{grid-template-columns:1fr 1fr}
  .pnav-item:nth-child(3){padding-left:0;border-left:0}
  .sidebar,.contact-aside{position:static}
}
@media (max-width:600px){
  .ph-bc{margin-bottom:28px}
  .form-grid{grid-template-columns:1fr}
  .pnav{grid-template-columns:1fr}
  .pnav-item,.pnav-item+.pnav-item{padding-left:0;border-left:0}
  .spec-table th,.spec-table td{display:block;width:100%}
  .spec-table th{padding-bottom:6px}.spec-table td{padding-top:0}
  .form-submit{width:100%}
  .confirmation dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.ph-h,.ph-lead,.ph-visual{animation:none;filter:none;opacity:1}.ph-ret{opacity:1;transform:none}}
.product-layout.single{grid-template-columns:1fr;max-width:820px}