/*
 * Task37（仮番号、2026-11-11）：輸入通 日本公式パートナー／CYBA ページ（/yunyutsu/）専用。page-yunyutsu.php でだけ読み込む（functions.php）。
 * 1) 承認版プレビュー 版15 の style.css をそのまま収録（変更点：波画像の参照先をテーマ内WebPへ／このページのヘッダーで .global-nav__yunyutsu を表示）。
 * 2) 承認版 typography.css（CSU実測の文字組。最終指定）をそのまま収録。
 * 3) 末尾「Task37 移植調整」：本番フォームの送信結果表示のみ追加。
 * official-*.css（承認版の参照用スナップショット）はテーマの style.css・assets/css/style.css・top.css と同一のため収録しない（テーマのものを使用）。
 */
/* CURRENT official theme is loaded unchanged before these CYBA page components. */
html{scroll-padding-top:90px}.cyba-page{--green:#126749;--orange:#ef6b20;--c-line:#dbe2e7}.cyba-page .top-wave:before{background-image:url("../images/yunyutsu/ribbon-wave.webp")}.c-container{max-width:1440px;margin:0 auto;padding-left:var(--top-pad-left);padding-right:var(--top-pad-right)}.c-section{padding-top:88px;padding-bottom:88px;position:relative}.c-section:before{content:'';position:absolute;top:0;left:var(--top-pad-left);right:var(--top-pad-right);height:1px;background:var(--c-line)}.cyba-page main p{font-size:14px;line-height:2;letter-spacing:.035em;margin:0 0 22px}.cyba-page main h1,.cyba-page main h2,.cyba-page main h3,.cyba-page main h4{color:var(--top-ink)}.cyba-page main h1{font-size:clamp(30px,2.9vw,42px);font-weight:600;line-height:1.65;letter-spacing:.025em;margin:18px 0 28px}.cyba-page main h2{font-size:clamp(28px,2.6vw,38px);font-weight:600;line-height:1.65;letter-spacing:.02em;margin:0 0 28px}.cyba-page main h3{font-size:21px;font-weight:700;line-height:1.7;letter-spacing:.02em;margin:0 0 18px}.cyba-page main h4{font-size:20px;font-weight:600;line-height:1.8;margin:0 0 18px}.cyba-page main .c-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 40px;font-size:13px;font-weight:700;line-height:1.5;letter-spacing:.18em}.c-label span{font-size:13px;font-weight:600;letter-spacing:.08em;color:#344d61}.cyba-page main .c-mini{font-size:12px;font-weight:700;line-height:1.6;letter-spacing:.1em;margin:0 0 20px;color:var(--green)}.cyba-page main .c-kicker{font-size:18px;font-weight:700;line-height:1.7;margin:0 0 16px}.c-section-head{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;align-items:start;margin-bottom:48px}.c-section-head>p,.c-section-head>div{padding-top:8px}.cyba-page main .c-section-lead{max-width:760px;margin-bottom:46px}.c-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:30px}.c-button,.c-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;font-size:12px;font-weight:600;line-height:1.6;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}.c-button{padding:20px 24px;color:white;background:var(--top-ink);border:1px solid var(--top-ink);font-family:inherit}.c-button:hover{background:#14486a;border-color:#14486a}.c-link{padding:15px 0;min-width:200px;border-bottom:1px solid #97a7b5;color:var(--top-ink)}.c-link:hover{color:var(--green);border-color:var(--green)}.c-button span,.c-link span{font-size:18px;font-weight:300}.c-hero{padding-top:150px;padding-bottom:70px}.c-hero-grid{display:grid;grid-template-columns:1.45fr 1fr;align-items:center;gap:45px}.c-hero-logo img{display:block;width:100%;height:auto}.cyba-page main .c-hero-logo p{font-size:14px;text-align:center;line-height:2;margin-top:20px;font-weight:600}.c-hero-logo span{font-size:11px;font-weight:500;letter-spacing:.02em}.c-hero-summary{border-top:1px solid var(--c-line);margin-top:50px;display:flex;gap:24px;padding-top:22px;font-size:12px;line-height:1.8;font-weight:600}.c-hero-summary span+span{border-left:1px solid var(--c-line);padding-left:24px}.c-roles{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin:0 0 68px}.c-roles article+article{border-left:1px solid var(--c-line);padding-left:48px}.c-role-logo{display:flex;gap:12px;align-items:center;height:85px;margin-bottom:24px}.c-role-logo img{width:68px;height:64px;object-fit:contain}.c-role-logo strong{font-size:27px;letter-spacing:.08em}.c-role-logo img.c-current-logo{width:205px;height:auto}.c-about{display:grid;grid-template-columns:1fr 150px;gap:70px;align-items:center;border-top:1px solid var(--c-line);padding-top:44px}.c-about>div>p:last-child{margin-bottom:0}.c-badge{width:145px;height:145px;overflow:hidden;border-radius:50%}.c-badge img{display:block;width:155px;max-width:none;transform:translate(-5px,-5px)}.c-collage{display:grid;grid-template-columns:1.1fr .5fr .62fr;grid-template-rows:170px 170px;gap:18px;margin:40px 0 70px}.c-collage figure{margin:0;min-width:0}.c-collage img{width:100%;height:calc(100% - 34px);object-fit:cover;display:block}.c-photo-main{grid-column:1/3;grid-row:1/3}.c-photo-main img{object-position:center 62%}.c-photo-small{grid-column:3;grid-row:1}.c-photo-tall{grid-column:3;grid-row:2}.c-photo-tall img{object-position:center bottom}.cyba-page figcaption{font-size:10px;line-height:1.7;letter-spacing:.08em;padding-top:8px;font-weight:600;color:#536573}.cyba-page figcaption span{margin-left:12px;font-size:11px;letter-spacing:.025em}.c-photo-small figcaption,.c-photo-tall figcaption{font-size:0}.c-photo-small figcaption span,.c-photo-tall figcaption span{margin:0;font-size:10px}.c-ops{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;margin:50px 0 60px;align-items:start}.c-ops-photos{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}.c-ops-photos figure{margin:0}.c-ops-photos img{width:100%;height:225px;object-fit:cover;display:block}.c-ops-photos figure+figure{margin-top:48px}.c-ops-photos figcaption span{display:block;margin:0}.c-system{padding:34px 36px;background:#f5f8f6;border-top:2px solid var(--green)}.c-diagram{display:grid;grid-template-columns:1fr 45px 1.4fr 45px 1.2fr;align-items:center;gap:12px;margin-top:28px}.c-platform{display:flex;align-items:center;flex-direction:column;gap:12px;font-size:13px}.c-platform img{width:88px;height:88px;object-fit:contain}.c-arrow{color:var(--green);font-size:32px;text-align:center}.c-hub{background:white;border:1px solid #9cb7aa;display:flex;flex-direction:column;align-items:center;padding:22px 10px;gap:7px;line-height:1.7}.c-hub img{width:66px;height:45px;object-fit:contain}.c-hub strong{font-size:17px}.c-hub>span{font-size:11px;letter-spacing:.12em}.c-shops{display:flex;flex-direction:column;align-items:center;gap:22px}.c-shops img{width:112px;height:63px;object-fit:contain;mix-blend-mode:multiply}.c-service{display:grid;grid-template-columns:240px 1fr;gap:45px;padding:35px 0 40px;border-top:1px solid var(--c-line)}.c-service-title{display:flex;align-items:baseline;gap:20px}.c-service-title>span{font-size:16px;letter-spacing:.06em;color:var(--green)}.cyba-page main .c-examples{margin-top:22px;margin-bottom:0;padding-top:18px;border-top:1px solid #e7ecef;font-size:13px;color:#344d61}.c-examples b{display:block;margin-bottom:8px;font-size:12px;letter-spacing:.08em}.cyba-page main .c-note{margin:12px 0 0;font-size:14px}.c-brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}.c-brand-grid article{display:flex;flex-direction:column;border-top:1px solid var(--c-line);padding-top:20px}.c-brand-grid article+article{border-left:1px solid var(--c-line);padding-left:40px}.c-brand-logo{height:100px;display:flex;align-items:center;margin-bottom:12px}.c-brand-logo img{display:block;width:180px;height:auto;max-height:64px;object-fit:contain;object-position:left center}.cyba-page main .c-brand-grid h3{font-size:18px;line-height:1.8;min-height:65px}.c-brand-grid .c-link{margin-top:auto;align-self:flex-start}.c-brand-practice{display:grid;grid-template-columns:220px 1fr;gap:40px;border-top:1px solid var(--c-line);margin-top:46px;padding-top:28px}.cyba-page main .c-brand-practice h4{font-size:16px}.c-banner{display:block}.c-banner img{display:block;width:100%;height:auto}.c-banner:hover{opacity:.9}.c-interview-meta{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:28px}.cyba-page main .c-interview-meta p{margin-bottom:10px;font-size:13px}.cyba-page main .c-interview-meta h3{font-size:21px;margin-bottom:10px}.c-seminar-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:50px}.c-topic-list{list-style:none;padding:0;margin:0}.c-topic-list li{padding:17px 0;border-top:1px solid var(--c-line);font-size:14px;line-height:1.8}.c-seminar-status{border-left:1px solid var(--c-line);padding-left:40px}.c-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:0;list-style:none;counter-reset:flow}.c-flow li{border-top:1px solid #9bb8aa;padding:20px 0 0}.c-flow li>span{font-size:27px;font-weight:400;color:var(--green);display:block;margin-bottom:14px}.cyba-page main .c-flow h3{font-size:17px;margin-bottom:12px}.cyba-page main .c-flow p{font-size:13px;line-height:1.95}.cyba-page main .c-flow-note{font-size:13px;line-height:1.9;color:#344d61;border-top:1px solid var(--c-line);padding-top:24px;margin:20px 0 0}.cyba-page #contact.c-contact{display:grid;grid-template-columns:1fr 1fr;gap:70px}.cyba-page main .c-contact h2{font-size:clamp(24px,2vw,28px);line-height:1.8}.c-contact-person{border-top:1px solid var(--c-line);padding-top:26px;margin-top:36px}.cyba-page main .c-contact-person p{margin-bottom:10px;font-size:14px}.c-contact-person a{font-size:16px;text-underline-offset:5px}.c-form{display:flex;flex-direction:column;gap:23px}.c-field{display:flex;flex-direction:column;gap:10px}.c-field label{display:flex;justify-content:space-between;font-size:13px;font-weight:600}.c-field label span{color:#61798c;font-size:11px;font-weight:500}.c-field input,.c-field select,.c-field textarea{width:100%;min-width:0;border:1px solid #cbd6dd;border-radius:0;background:#fff;padding:12px 14px;color:var(--top-ink);font:16px var(--font-sans);min-height:48px}.c-field textarea{resize:vertical;min-height:150px}.c-consent{display:flex;gap:10px;font-size:13px;align-items:flex-start;line-height:1.8}.c-consent input{margin-top:5px}.c-form .c-button{width:100%}.cyba-page main .c-form-note{font-size:12px;line-height:1.8;color:#536573;margin:0}#mail-review{width:min(600px,calc(100% - 40px));padding:36px;border:1px solid #cbd6dd;color:var(--top-ink)}#mail-review::backdrop{background:#061d3566}#mail-review h2{font-size:24px}#mail-review p{font-size:14px;line-height:1.8}#mail-body{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.9 var(--font-sans);max-height:40vh;overflow:auto;background:#f6f8f7;padding:16px}.c-close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:25px;cursor:pointer}.c-top-placement{padding-top:70px}.c-top-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:center}.c-top-grid>img{width:100%;height:auto}.c-top-support{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:44px}.c-top-support span{border-top:1px solid var(--c-line);padding-top:20px;font-size:16px;font-weight:600}.cyba-page .site-footer{padding-top:50px}.cyba-page .site-header{grid-template-columns:26% 1fr auto}.cyba-page .global-nav{padding-left:22px;padding-right:22px}.cyba-page .global-nav__list{gap:18px}.cyba-page .global-nav__cmu,.cyba-page .global-nav__yunyutsu{display:list-item}
@media(max-width:1180px){.c-section-head{gap:32px}.c-hero-grid{gap:28px;grid-template-columns:1.5fr 1fr}.c-service{grid-template-columns:180px 1fr;gap:28px}.c-roles{gap:32px}.c-roles article+article{padding-left:32px}.cyba-page #contact.c-contact{gap:40px}.c-ops{grid-template-columns:1fr}.c-ops-photos img{height:260px}.c-flow{grid-template-columns:1fr 1fr}.cyba-page .global-nav__list{gap:12px}}
@media(max-width:860px){.cyba-page .site-header{grid-template-columns:1fr auto}.c-hero{padding-top:120px;padding-bottom:56px}.c-hero-grid,.c-top-grid{grid-template-columns:1fr}.c-hero-logo{max-width:330px;margin:10px 0 0}.cyba-page main h1{font-size:32px}.c-section-head{grid-template-columns:1fr;gap:0;margin-bottom:32px}.c-section{padding-top:60px;padding-bottom:60px}.c-service{grid-template-columns:1fr;gap:8px}.c-roles{gap:25px}.c-roles article+article{padding-left:25px}.c-role-logo img.c-current-logo{width:170px}.c-roles h3{font-size:18px}.c-about{gap:30px;grid-template-columns:1fr 105px}.c-badge{width:100px;height:100px}.c-badge img{width:108px;transform:translate(-4px,-4px)}.c-brand-grid{gap:30px}.c-brand-grid article+article{padding-left:25px}.c-seminar-grid{grid-template-columns:1fr;gap:30px}.c-seminar-status{padding-left:0;border-left:0;border-top:1px solid var(--c-line);padding-top:28px}.c-brand-practice{grid-template-columns:1fr;gap:0}.c-interview-meta{display:block}.cyba-page #contact.c-contact{grid-template-columns:1fr;gap:40px}.c-contact-copy{max-width:600px}.c-diagram{grid-template-columns:1fr 24px 1.4fr 24px 1fr;gap:8px}.c-arrow{font-size:24px}.c-platform img{width:65px;height:65px}.c-shops img{width:85px;height:55px}.c-hub strong{font-size:14px}.c-system{padding:28px 24px}.c-collage{grid-template-rows:145px 145px}}
@media(max-width:700px){.cyba-page{--top-pad-left:24px;--top-pad-right:24px}.cyba-page .top-wave{position:absolute;width:24%;height:650px;opacity:.65;mask-image:linear-gradient(180deg,#000,transparent)}.c-section{padding-top:52px;padding-bottom:52px}.cyba-page main .c-label{margin-bottom:28px;font-size:12px;gap:8px 12px}.c-label span{font-size:12px}.cyba-page main h1{font-size:clamp(26px,6.7vw,34px);line-height:1.65}.cyba-page main h2{font-size:26px;line-height:1.65;margin-bottom:23px}.cyba-page main h3{font-size:20px}.cyba-page main h4{font-size:18px}.cyba-page main p{font-size:14px;line-height:1.95}.c-hero{padding-top:116px}.c-hero-grid{gap:28px}.c-hero-logo{max-width:300px}.c-hero-logo p{display:none}.c-hero-summary{display:block;margin-top:32px}.c-hero-summary span{display:block;font-size:12px}.c-hero-summary span+span{padding-left:0;border-left:0;margin-top:7px}.c-actions{gap:14px;margin-top:24px}.c-button{font-size:12px;padding:18px 20px}.c-actions .c-button{width:100%}.c-roles{grid-template-columns:1fr;gap:28px;margin-bottom:40px}.c-roles article+article{border-left:0;border-top:1px solid var(--c-line);padding:28px 0 0}.c-role-logo{height:58px;margin-bottom:18px}.c-role-logo img.c-current-logo{width:184px}.c-about{grid-template-columns:1fr;position:relative;padding-top:32px;gap:24px}.c-about .c-badge{position:static}.c-about h3{max-width:90%}.c-collage{grid-template-columns:1fr 1fr;grid-template-rows:220px 150px;gap:12px;margin:28px 0 40px}.c-photo-main{grid-column:1/-1;grid-row:1}.c-photo-small{grid-column:1;grid-row:2}.c-photo-tall{grid-column:2;grid-row:2}.c-photo-main figcaption span{margin-left:6px}.c-ops{margin:32px 0;gap:16px}.c-ops-photos img{height:180px}.c-ops-photos figure+figure{margin-top:20px}.c-system{padding:25px 18px}.cyba-page main .c-system h3{font-size:18px}.c-diagram{grid-template-columns:1fr;gap:12px}.c-arrow{transform:rotate(90deg);font-size:28px;line-height:1}.c-hub{width:210px;justify-self:center}.c-hub strong{font-size:17px}.c-shops{flex-direction:row;justify-content:center;gap:35px}.c-shops img{width:100px;height:64px}.c-platform img{width:76px;height:76px}.c-service{padding:28px 0}.c-service-title{gap:16px}.cyba-page main .c-service-title h3{margin-bottom:10px}.c-brand-grid{grid-template-columns:1fr;gap:32px}.c-brand-grid article+article{border-left:0;padding-left:0}.c-brand-logo{height:80px;margin-bottom:12px}.cyba-page main .c-brand-grid h3{min-height:0;margin-bottom:14px}.c-brand-practice{margin-top:30px;padding-top:22px}.c-interview-meta{margin-top:22px}.cyba-page main .c-interview-meta h3{font-size:18px}.c-flow{grid-template-columns:1fr;gap:0;margin-bottom:0}.c-flow li{display:grid;grid-template-columns:40px 1fr;gap:0 16px;padding:22px 0 12px}.c-flow li>span{grid-row:1/3;font-size:22px}.c-flow li h3{grid-column:2}.c-flow li p{grid-column:2;margin-bottom:8px}.c-contact-person{margin-top:25px}.c-top-grid{gap:24px}.c-top-grid>img{max-width:300px}.c-top-support{gap:15px}.c-top-support span{font-size:13px}.cyba-page .site-footer{padding-right:24px;padding-left:24px}.cyba-page main [id]{scroll-margin-top:86px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.c-icon{flex:none;color:var(--green)}.c-icon-label{display:flex;align-items:center;gap:14px}.c-process-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin:45px 0;border-top:1px solid var(--c-line);padding-top:30px}.c-process-strip>div{position:relative}.c-process-strip>div:not(:last-child):after{content:'→';position:absolute;top:9px;right:0;color:#728e80;font-size:18px}.c-process-strip .c-icon{width:38px;height:38px;margin-bottom:12px}.cyba-page main .c-process-strip h4{font-size:17px;margin-bottom:8px}.cyba-page main .c-process-strip p{font-size:12px;line-height:1.8;margin:0}.c-service-title{display:grid;grid-template-columns:32px 1fr;grid-template-rows:48px auto;align-content:start;gap:12px}.c-service-title>.c-icon{grid-column:1/-1;width:35px;height:35px}.c-flow-number{display:flex;align-items:center;justify-content:space-between;color:var(--green);margin-bottom:18px}.c-flow-number span{font-size:25px}.c-flow li{position:relative}.c-flow li:not(:last-child):after{content:'→';position:absolute;right:-22px;top:29px;color:#728e80}.c-interview-meta h3 small{font-size:11px;display:inline-block;font-weight:500}.c-brand-practice h4 .c-icon{display:block;margin-bottom:15px}.c-brand-practice p{margin-bottom:0}
@media(max-width:1180px){.c-flow li:nth-child(2):after{content:''}}
@media(max-width:860px){.c-service-title{display:flex;align-items:center;gap:12px}.c-service-title>.c-icon{margin-right:8px;width:30px;height:30px}.c-service-title h3{margin-bottom:0}.c-process-strip{gap:20px}.c-process-strip>div:not(:last-child):after{right:-8px}}
@media(max-width:700px){.c-process-strip{grid-template-columns:1fr 1fr;gap:26px;margin:30px 0}.c-process-strip>div:nth-child(2):after{content:''}.c-flow li{grid-template-columns:48px 1fr;gap:0 16px;padding-bottom:24px}.c-flow-number{grid-column:1;grid-row:1/3;flex-direction:column;justify-content:flex-start;gap:15px;margin:0;align-items:flex-start}.c-flow-number span{font-size:20px}.c-flow-number .c-icon{width:28px;height:28px}.c-flow li:not(:last-child):after{content:'↓';right:auto;top:auto;bottom:3px;left:8px;font-size:16px}.c-flow li:nth-child(2):after{content:'↓'}.c-brand-practice h4{display:flex;align-items:center;gap:12px}.c-brand-practice h4 .c-icon{margin:0}}

/* Align the visible mark, excluding the source image's white lettering and margins. */
.c-role-logo .c-yunyutsu-mark{position:relative;display:block;flex:none;width:34.4px;height:27px;overflow:hidden}
.c-role-logo .c-yunyutsu-mark img{position:absolute;display:block;width:68.05px;height:46.6px;max-width:none;left:-19.97px;top:0;object-fit:fill}
.c-role-logo:has(.c-yunyutsu-mark){gap:14px;align-items:center}
.c-role-logo:has(.c-yunyutsu-mark) strong{font-size:28px;line-height:1;font-weight:700;letter-spacing:.06em;display:block}
/* Unified type hierarchy, measured from CURRENT /concept/ experience section. */
.cyba-page{--type-heading:clamp(26px,2.2vw,34px);--type-lead:clamp(15px,1.2vw,18px);--type-body:14px;--type-detail:13px;--type-subtitle:16px}
.cyba-page main p{font-size:var(--type-body);font-weight:500;line-height:2;letter-spacing:normal;margin-bottom:1.7em}
.cyba-page main .c-section h2{font-size:var(--type-heading);font-weight:500;line-height:1.55;letter-spacing:-.025em;margin-bottom:28px}
.cyba-page main .c-section h3,.cyba-page main .c-section h4{font-size:var(--type-subtitle);font-weight:600;line-height:1.7;letter-spacing:normal;margin-bottom:18px}
.cyba-page main .c-lead,.cyba-page main .c-section-lead{font-size:var(--type-lead);font-weight:500;line-height:2;letter-spacing:normal}
.cyba-page main .c-examples,.cyba-page main .c-note,.cyba-page main .c-flow p,.cyba-page main .c-flow-note{font-size:var(--type-detail);font-weight:400;line-height:1.8;letter-spacing:normal}
.cyba-page main .c-kicker{font-size:var(--type-subtitle);font-weight:600;line-height:1.7}
.cyba-page main .c-label{font-size:11px;line-height:1.5}.cyba-page main .c-label span{font-size:12px;font-weight:600}
.cyba-page main .c-process-strip p{font-size:var(--type-detail);font-weight:400;line-height:1.8}
.c-topic-list li{font-size:var(--type-body);line-height:2;font-weight:500}
.c-shops img[src$="base-official.png"]{mix-blend-mode:normal}
@media(max-width:700px){.cyba-page{--type-heading:26px;--type-lead:15px;--type-body:14px;--type-detail:13px}.cyba-page main .c-section h2{line-height:1.55}.cyba-page main .c-section h3,.cyba-page main .c-section h4{font-size:16px;line-height:1.7}}
/* Open integration diagram: original logos, fine bidirectional connectors. */
.c-system{background:transparent;border-top:1px solid var(--c-line);padding:34px 0 0}
.c-integration{display:grid;grid-template-columns:1fr 80px 1.65fr 100px 1fr;align-items:center;gap:20px;padding:30px 0 5px}
.c-integration-source,.c-integration-hub{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.cyba-page main .c-integration-label{font-size:11px;font-weight:500;color:#536573;line-height:1.8;margin:0 0 25px;letter-spacing:.08em}
.c-integration-source>img{width:74px;height:74px;object-fit:contain;margin-bottom:14px}.c-integration-source>strong{font-size:13px;font-weight:600}
.c-connector{width:100%;height:220px;stroke:#799a8a;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.c-yunyutsu-lockup{display:flex;gap:13px;align-items:center;margin-bottom:22px}
.c-yunyutsu-lockup .c-yunyutsu-mark{position:relative;display:block;flex:none;width:34.4px;height:27px;overflow:hidden}
.c-yunyutsu-lockup .c-yunyutsu-mark img{position:absolute;display:block;width:68.05px;height:46.6px;max-width:none;left:-19.97px;top:0;object-fit:fill}
.c-yunyutsu-lockup strong{font-size:28px;line-height:1;font-weight:700;letter-spacing:.06em}
.cyba-page main .c-integration-hub h4{font-size:14px;margin:0 0 10px;line-height:1.7;font-weight:600}
.c-api-label{display:block;font-size:9px;letter-spacing:.17em;color:var(--green)}
.c-integration-shops{height:250px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}
.c-integration-shops>div{height:80px;display:flex;align-items:center;justify-content:center;width:100%}
.c-integration-shops img{display:block;width:140px;height:80px;object-fit:contain;mix-blend-mode:multiply}
.c-integration-shops img[alt="BASE"]{width:65px;height:92px;mix-blend-mode:normal}
@media(max-width:1100px){.c-integration{grid-template-columns:1fr 50px 1.5fr 65px 1fr;gap:14px}}
@media(max-width:700px){.c-integration{grid-template-columns:1fr;gap:20px;padding-top:24px}.c-connector-in{width:70px;height:70px;transform:rotate(90deg)}.c-connector-out{width:65px;height:120px;transform:rotate(90deg);margin:-30px auto}.c-integration-shops{height:auto;display:grid;grid-template-columns:1fr 1fr;width:100%;gap:40px;align-items:center;margin-top:15px}.c-integration-shops img{width:120px;height:70px}.c-integration-shops img[alt="BASE"]{height:86px;width:60px}.cyba-page main .c-integration-label{margin-bottom:16px}.c-integration-source>img{width:70px;height:70px}.c-yunyutsu-lockup{margin-bottom:15px}}
.c-connector-mobile{display:none}
@media(max-width:700px){.c-connector-out{display:none}.c-connector-mobile{display:block;width:100%;height:90px;stroke:#799a8a;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin:-8px 0 -15px}.c-integration-shops{gap:0;margin-top:0}}
/* Interview: one editorial feature, one reading path. */
.c-feature-header{display:flex;justify-content:space-between;gap:24px;align-items:baseline;margin-bottom:28px}
.cyba-page main .c-feature-header .c-label{margin:0}
.cyba-page main .c-feature-collaboration{font-size:11px;line-height:1.5;font-weight:600;letter-spacing:.08em;margin:0;white-space:nowrap}
.c-feature-collaboration span{display:inline-block;padding:0 10px;color:#9aa6af;font-weight:400}
.cyba-page main .c-interview-feature>h2{margin:0 0 34px;line-height:1.55}
.c-feature-layout{display:grid;grid-template-columns:1.65fr 1fr;gap:38px;align-items:center}
.c-feature-image{display:block;overflow:hidden}.c-feature-image img{display:block;width:100%;height:auto;transition:opacity .25s}.c-feature-image:hover img{opacity:.88}
.cyba-page main .c-feature-copy>p{font-size:14px;line-height:2;font-weight:500;color:#34465b;margin:0 0 26px}
.c-feature-read{width:100%;max-width:270px;font-size:12px;padding:18px 22px}
.c-feature-speakers{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:32px;margin-top:28px;padding-top:24px;border-top:1px solid var(--c-line)}
.cyba-page main .c-speaker-role{font-size:11px;font-weight:500;letter-spacing:.03em;color:#61717f;line-height:1.5;margin:0 0 12px}
.c-speaker-position{display:block;margin-top:4px;font-weight:600;color:var(--top-ink)}
.cyba-page main .c-feature-speakers h3{font-size:17px;font-weight:500;line-height:1.5;letter-spacing:.06em;margin:0 0 7px}
.cyba-page main .c-speaker-reading{font-size:10px;line-height:1.5;color:#61717f;font-weight:400;letter-spacing:.05em;margin:0}
.c-system-link{display:flex;justify-content:flex-end;margin-top:26px}.c-external-link{margin-top:8px}
@media(max-width:860px){.c-feature-layout{grid-template-columns:1.4fr 1fr;gap:24px}.c-feature-read{padding:16px 17px}.c-feature-speakers{gap:20px}}
@media(max-width:700px){.c-feature-header{display:block;margin-bottom:23px}.cyba-page main .c-feature-header .c-label{margin-bottom:14px}.cyba-page main .c-interview-feature>h2{margin-bottom:24px}.c-feature-copy{display:block}.cyba-page main .c-feature-copy>p{margin-bottom:20px}.c-feature-read{max-width:none}.c-feature-speakers{grid-template-columns:1fr 1fr;gap:22px 20px;margin-top:24px;padding-top:22px}.c-feature-speakers>div:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;padding-top:16px;border-top:1px solid var(--c-line)}.cyba-page main .c-feature-speakers>div:last-child p,.cyba-page main .c-feature-speakers>div:last-child h3{margin:0}.c-system-link{justify-content:flex-start}}

/* Compact interview image and expanded system overview. */
.c-feature-image{max-width:580px}.c-feature-layout>*{min-width:0}
.c-system-heading{display:grid;grid-template-columns:1fr 130px;gap:40px;align-items:center}
.cyba-page main .c-system-heading h3{font-size:clamp(21px,1.7vw,26px);font-weight:500;line-height:1.65;margin-bottom:20px;letter-spacing:-.025em}
.cyba-page main .c-system-heading p{margin-bottom:0}
.c-system-partner{text-align:center}.c-system-partner .c-badge{width:120px;height:120px;margin:0 auto}.c-system-partner .c-badge img{width:128px;transform:translate(-4px,-4px)}
.cyba-page main .c-system-partner p{font-size:9px;font-weight:600;line-height:1.6;margin-top:12px;white-space:nowrap;letter-spacing:.025em}
.c-integration-source>.c-platform-1688{margin:25px 0 0}
.c-system-functions{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px}
.c-system-functions article{border-top:1px solid var(--c-line);padding-top:24px}
.c-system-functions .c-icon{display:block;width:30px;height:30px;margin-bottom:18px}
.cyba-page main .c-system-functions h4{font-size:15px;line-height:1.6;margin-bottom:13px}
.cyba-page main .c-system-functions p{font-size:13px;font-weight:400;line-height:1.85;margin:0;color:#34465b}
@media(max-width:980px){.c-system-functions{grid-template-columns:repeat(2,1fr);gap:28px}.c-system-heading{gap:26px;grid-template-columns:1fr 110px}.c-system-partner .c-badge{width:100px;height:100px}.c-system-partner .c-badge img{width:108px}}
@media(max-width:700px){.c-feature-layout{grid-template-columns:1fr}.c-feature-image{width:100%;max-width:440px}.c-system-heading{grid-template-columns:1fr;gap:22px}.c-system-partner{display:flex;align-items:center;gap:18px;text-align:left}.c-system-partner .c-badge{margin:0;flex:none;width:90px;height:90px}.c-system-partner .c-badge img{width:96px;transform:translate(-3px,-3px)}.cyba-page main .c-system-partner p{font-size:11px;margin:0}.cyba-page main .c-system-heading h3{font-size:21px}.c-system-functions{gap:26px 22px;margin-top:34px}.c-integration-source>.c-platform-1688{margin-top:20px}.c-system-functions .c-icon{margin-bottom:14px}}

.c-badge img{height:auto;aspect-ratio:1;object-fit:contain}

.c-keep{white-space:nowrap}

/* CMU referral below the consultation flow. */
.c-cmu-referral{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:38px;margin-top:30px;padding:28px 30px;border:1px solid var(--c-line)}
.c-cmu-logo img{display:block;width:160px;max-width:100%;height:auto}
.cyba-page main .c-cmu-referral h3{font-size:18px;font-weight:600;line-height:1.65;letter-spacing:.02em;margin:0 0 12px}
.cyba-page main .c-cmu-copy>p{margin:0 0 10px}
.c-cmu-referral .c-link{min-width:220px;padding:12px 0}
@media(max-width:700px){.c-cmu-referral{grid-template-columns:1fr;gap:22px;margin-top:24px;padding:24px}.c-cmu-logo img{width:140px}.cyba-page main .c-cmu-referral h3{font-size:17px}.c-cmu-referral .c-link{min-width:0;width:100%}}

/* Mobile sourcing logos share one row below their label. */
@media(max-width:700px){
  .c-integration-source{display:grid;grid-template-columns:70px 70px;justify-content:center;align-items:center;column-gap:32px;row-gap:20px}
  .cyba-page main .c-integration-source>.c-integration-label{grid-column:1/-1;margin:0;text-align:center;white-space:nowrap;justify-self:center}
  .c-integration-source>img,.c-integration-source>.c-platform-1688{width:70px;height:70px;margin:0;object-fit:contain}
}

/* Explicit API boundaries and a centered two-source mobile connector. */
.c-api-connection-text{stroke:none;fill:#126749;font-size:12px;font-weight:600;font-family:inherit}
.c-source-connector-mobile{display:none}
.cyba-page main .c-integration-note{margin:24px 0 0}
@media(max-width:700px){
.c-connector-in{display:none}
.c-source-connector-mobile{display:block;justify-self:center;width:240px;max-width:100%;height:90px;stroke:#126749;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.c-connector-mobile{justify-self:center;stroke:#126749;stroke-width:2.2}
}

.c-api-data{list-style:none;margin:14px 0 0;padding:0;font-family:var(--csu-copy-font);font-size:13px;line-height:1.75;color:#596b79}.c-api-data li{display:grid;grid-template-columns:70px minmax(0,1fr);gap:14px;margin-top:8px}.c-api-data strong{color:var(--top-ink);font-weight:600}

/* ===== approved typography.css ===== */
/* CSU typography, measured in the live page on 2026-11-10.
   Support plan copy: 14px / 400 / 1.85; section lead: 15px / 400 / 1.8.
   Keep UI labels, headings, logo lockups and form input sizes independent. */
.cyba-page {
  --csu-copy-font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif, "Noto Sans JP", sans-serif;
  --type-lead: 15px;
}
.cyba-page main :is(
  .c-hero-grid > div:first-child > p:not([class]),
  .c-roles article > p:not([class]),
  .c-about > div > p:not([class]),
  .c-ops-heading > p:not([class]),
  .c-system-heading > div:not(.c-system-partner) > p:not([class]),
  .c-service > div > p:not([class]),
  .c-brand-grid article > p,
  .c-brand-practice > p,
  .c-feature-copy > p,
  .c-seminar-status > p:not([class]),
  .c-contact-copy > p:not([class]),
  .c-top-grid > div > p:not([class])
) {
  font-family: var(--csu-copy-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: normal;
  color: #596b79;
}
.cyba-page main :is(.c-lead, .c-section-lead) {
  font-family: var(--csu-copy-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: normal;
  color: #596b79;
}
.cyba-page main :is(.c-system-functions p, .c-process-strip p, .c-examples, .c-note, .c-flow p, .c-flow-note, .c-cmu-copy > p) {
  font-family: var(--csu-copy-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: normal;
  color: #596b79;
}
.cyba-page main .c-topic-list li {
  font-family: var(--csu-copy-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  color: #0d2235;
}

/* ---------- Task37 移植調整（承認版にない本番用の表示） ---------- */
/* 送信結果（既存TOPフォームと同じ .form-status の仕組み。サーバーの受付結果に応じて yunyutsu.js が表示） */
.cyba-page .c-form .form-status{margin:0;padding:12px 14px;font-family:var(--csu-copy-font);font-size:13px;line-height:1.75;color:var(--top-ink)}
.cyba-page .c-form .form-status:focus{outline:2px solid var(--green);outline-offset:2px}
/* API連携図（スマートフォン）：輸入通 → Shopify・BASE の分岐線の先端を、Shopify・BASEのロゴの中心にそろえる。
 * 承認版では分岐線のSVG（viewBox 320×100、高さ90px固定）が画面幅288pxを超えると縮尺0.9で止まり、
 * 2列のロゴ（画面幅の25%・75%）とずれていた（実測：375px幅で約10px、430px幅で約24px）。
 * 線・矢印・「API連携」の文字の大きさは変えず、分岐線とロゴの列を同じ幅（最大288px）で中央に置く。320px幅の表示は承認版と同じ。 */
@media(max-width:700px){
  .cyba-page .c-connector-mobile,.cyba-page .c-integration-shops{width:100%;max-width:288px;justify-self:center}
}