/* UTNOA のトップ(/)。2026-10-17。生成元は top_page.py。色は UTNOA の青と白だけ(光る影・グラデーションは使わない) */
.n-top-page .nb{display:inline-block}
.n-top-hero{padding:56px 0 64px;border-bottom:1px solid var(--line);overflow:hidden}
.n-top-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;align-items:center}
.n-top-eyebrow{color:var(--blue);font-weight:700;font-size:15px;letter-spacing:.12em;margin:0 0 18px}
.n-top-title{margin:0;font-size:clamp(28px,3.4vw,42px);line-height:1.45;font-weight:800;letter-spacing:.01em;color:var(--text)}
.n-top-title>span{display:block}
.n-top-title .k2{margin-top:4px}
.k-strike{position:relative;text-decoration:none;color:#8a96a8}
.k-strike:after{content:'';position:absolute;left:-2px;right:-2px;top:53%;height:3px;border-radius:2px;background:#8a96a8;transform-origin:left center}
.n-top-title .k3{color:var(--blue);font-size:1.32em;margin-top:6px;line-height:1.35}
.n-top-lead{font-size:17px;line-height:1.95;margin:26px 0 28px;max-width:560px}
.n-top-motion{margin:0}
.n-motion{display:block;width:100%;height:auto}
.n-top-motion figcaption{text-align:right;margin-top:2px}
.n-replay{border:0;background:none;color:var(--blue);font-size:13.6px;font-weight:700;padding:8px 4px;min-height:40px}
.m-cap{font:600 14px var(--font);fill:#6b7889}.m-blue{fill:var(--blue)}
.m-tag-text{font:700 15px var(--font);fill:#5b6778}
.m-role{font:700 14.5px var(--font);fill:#172b49}.m-name{font:500 12.5px var(--font);fill:#5b6778}
.m-goal{font:800 22px var(--font);fill:var(--blue)}
.m-date{font:800 17px var(--font);fill:#26364b}
.m-a{opacity:0}
.m-line{stroke-dasharray:1 2;stroke-dashoffset:0}
.m-node{transform-origin:0 0}

/* 動き: 最初の画面の文字と、入れかえ → 成長の図。動いたあとの形が、そのまま見た目の基本(動きを減らす設定では動かずに最後の形) */
@keyframes kUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes kStrike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes kGray{from{color:#172b49}to{color:#8a96a8}}
@keyframes mA{0%{opacity:0}12%{opacity:1}84%{opacity:1}100%{opacity:0}}
@keyframes mDoc{0%{transform:translateX(0);opacity:1}75%{opacity:1}100%{transform:translateX(300px);opacity:0}}
@keyframes mFade{from{opacity:0}to{opacity:1}}
@keyframes mDraw{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}
@keyframes mPop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.is-play .k0{animation:kUp .6s .1s both}
.is-play .k1{animation:kUp .7s .3s both}
.is-play .k2{animation:kUp .6s 1s both}
.is-play .k-strike{animation:kGray .5s 2.4s both}
.is-play .k-strike:after{animation:kStrike .5s 2.4s both}
.is-play .k3{animation:kUp .8s 4.6s both}
.is-play .k4{animation:kUp .6s 5.3s both}
.is-play .m-a{animation:mA 3s .3s both}
.is-play .m-doc{animation:mDoc .9s both}.is-play .d1{animation-delay:1.1s}.is-play .d2{animation-delay:1.25s}.is-play .d3{animation-delay:1.4s}
.is-play .m-g{animation:mFade .4s both}.is-play .g1{animation-delay:1.85s}.is-play .g2{animation-delay:2s}.is-play .g3{animation-delay:2.15s}
.is-play .m-base,.is-play .m-icons{animation:mFade .5s 3s both}
.is-play .m-line{animation:mDraw 1.4s 3.3s cubic-bezier(.45,0,.25,1) both}
.is-play .m-area{animation:mFade .9s 3.9s both}
.is-play .m-node{animation:mPop .5s both}.is-play .n1{animation-delay:3.9s}.is-play .n2{animation-delay:4.25s}.is-play .n3{animation-delay:4.6s}
.is-play .m-arrow,.is-play .m-goal{animation:mFade .5s 4.7s both}
@media(prefers-reduced-motion:reduce){.m-dot,.n-replay{display:none}}

/* 製品 */
.n-top-product{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px;align-items:center;padding:36px 0;border-top:1px solid var(--line)}
.n-top-products .n-section-intro+.n-top-product{border-top:0;padding-top:12px}
.n-top-product.is-reverse .n-top-product-text{order:2}
.n-top-for{color:var(--blue);font-weight:700;font-size:15px;margin:0 0 6px}
.n-top-product h3{display:flex;align-items:center;gap:12px;font-size:28px;margin:0 0 12px;line-height:1.4}
.n-top-product h3 img{width:36px;height:36px;flex-shrink:0}
.n-top-product-text>p:not(.n-top-for){font-size:16px;line-height:1.95;margin:0 0 22px}
.n-top-product-shot{display:block;border:1px solid #d5e0ef;border-radius:10px;overflow:hidden;background:#fff}
.n-top-product-shot img{display:block;width:100%;height:auto}

/* 支援 */
.n-top-diagnosis{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 26px;margin:8px 0 24px;border:1.6px solid var(--blue);border-radius:10px;background:#f4f8ff}
.n-top-diagnosis b{font-size:20px;color:var(--blue)}.n-top-diagnosis p{margin:4px 0 0;font-size:15.2px;line-height:1.85}
.n-top-diagnosis .n-button{flex-shrink:0}
/* 事業概要のページ用の「1枚目を横長に」(theme.css)を、トップの支援の欄では使わない */
.n-top-page #services .n-services .n-service-card:first-child{grid-column:auto;background:#fff;display:flex;flex-direction:column;align-items:start;gap:0;text-align:left}

/* コラム */
.n-top-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.n-top-column{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;color:var(--text)}
.n-top-column:hover h3{color:var(--blue)}
.n-top-column img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.n-top-column .tag{margin:14px 16px 0;color:var(--blue);font-size:12.8px;font-weight:700}
.n-top-column h3{margin:4px 16px 18px;font-size:16px;line-height:1.7}
.n-top-more{margin:24px 0 0;text-align:right;font-weight:700}

@media(max-width:840px){
 .n-top-grid{grid-template-columns:1fr;gap:16px}
 .n-top-motion{max-width:520px;width:100%;margin:0 auto}
 .n-top-product{grid-template-columns:1fr;gap:18px}
 .n-top-product.is-reverse .n-top-product-text{order:0}
 .n-top-columns{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
 .n-top-hero{padding:32px 0 36px}
 .n-top-title{font-size:25.6px}
 .n-top-title .k3{font-size:1.28em}
 .n-top-lead{font-size:15.2px;margin:20px 0 22px}
 .n-top-product h3{font-size:23px}
 .n-top-columns{grid-template-columns:1fr}
 .n-top-diagnosis{flex-direction:column;align-items:flex-start;padding:18px}
 .m-role{font-size:19px}.m-name{font-size:16px}.m-goal{font-size:28px}.m-cap{font-size:16px}.m-tag-text{font-size:18px}
}