/* 編集用スタイル。build-service.mjs が .logica-services 配下に限定して出力する。 */
.logica-services {
  --paper: #f4f2eb;
  --white: #fffefa;
  --ink: #202b29;
  --teal: #2b9bab;
  --deep-teal: #17636c;
  --mint: #d6e7e2;
  --rule: #b5bbb3;
  --muted: #555f59;
  --art-paper: #fffefa;
  --art-teal: #75bdbb;
  --gutter: 64px;
}
.logica-services, .logica-services * { box-sizing: border-box; }
html.logica-page { scroll-behavior: smooth; scroll-padding-top: 32px; }
.logica-services { margin: 0; color: var(--ink); background: var(--paper); font-family: 'Noto Sans JP', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased; }
.logica-services a { color: inherit; text-decoration: none; }
.logica-services a:focus-visible, .logica-services summary:focus-visible { outline: 3px solid var(--deep-teal); outline-offset: 6px; }
.logica-services ::selection { color: var(--white); background: var(--deep-teal); }
.logica-services h1, .logica-services h2, .logica-services h3, .logica-services p, .logica-services ul, .logica-services ol { margin: 0; }
.logica-services h1, .logica-services h2, .logica-services h3 { font-feature-settings: 'palt'; }
.logica-services ul, .logica-services ol { list-style: none; padding: 0; }
.logica-services img, .logica-services svg { display: block; max-width: 100%; }
.logica-services img { height: auto; }
.logica-services .illustration-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.logica-services .skip-link { position: absolute; top: 8px; left: 24px; z-index: 20; transform: translateY(-180%); padding: 8px 16px; background: var(--ink); color: var(--white); }
.logica-services .skip-link:focus { transform: none; }
.logica-services .site-header { min-height: 112px; margin: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 40px; border-bottom: 1px solid var(--ink); }
.logica-services .brand { width: 164px; flex-shrink: 0; }
.logica-services .brand img, .logica-services .footer-brand img { mix-blend-mode: multiply; }
.logica-services .desktop-nav { display: flex; align-items: center; gap: 36px; font-weight: 500; }
.logica-services .desktop-nav a { position: relative; padding: 10px 0; }
.logica-services .desktop-nav a[aria-current]::after { content: ''; width: 5px; height: 5px; position: absolute; border-radius: 50%; background: var(--deep-teal); bottom: -8px; left: calc(50% - 2.5px); }
.logica-services .desktop-nav a:hover { color: var(--deep-teal); }
.logica-services .desktop-nav .nav-contact { border: 1px solid var(--ink); padding: 10px 17px 10px 24px; margin-left: 14px; min-width: 179px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.logica-services .small-arrow { font-size: 23px; line-height: 1; }
.logica-services .desktop-nav .nav-contact:hover { color: var(--white); background: var(--ink); }
.logica-services .mobile-menu { display: none; }
.logica-services .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; padding: 48px var(--gutter) 30px; min-height: 553px; }
.logica-services .hero-content { padding-top: 31px; }
.logica-services h1 { font-size: clamp(72px, 7.3vw, 108px); font-weight: 800; letter-spacing: -.045em; line-height: 1.2; white-space: nowrap; }
.logica-services .title-dot { display: inline-block; width: 18px; height: 18px; background: var(--teal); border-radius: 50%; margin-left: 17px; }
.logica-services .hero-intro { font-size: 25px; font-weight: 600; line-height: 1.95; letter-spacing: .025em; margin-top: 36px; }
.logica-services .intro-last { display: block; }
.logica-services .hero-art { position: relative; align-self: start; width: 100%; height: 475px; --art-teal: #78bfbd; }
.logica-services .hero-thread { position: absolute; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--deep-teal); stroke-width: 1.5; stroke-dasharray: 4 6; }
.logica-services .service-art { color: var(--ink); overflow: visible; }
.logica-services .hero-art .service-art { position: absolute; width: 42%; }
.logica-services .hero-map { left: 0; top: 5%; transform: rotate(-9deg); }
.logica-services .hero-design { right: 5%; top: -6%; transform: rotate(11deg); }
.logica-services .hero-ads { left: 6%; bottom: -1%; transform: rotate(-13deg); }
.logica-services .hero-social { right: 0; bottom: 6%; transform: rotate(9deg); }
.logica-services .service-index { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0 var(--gutter) 72px; border-top: 1px solid var(--ink); }
.logica-services .service-index a { position: relative; padding: 26px 32px 27px 0; border-bottom: 1px solid var(--rule); margin-right: 23px; display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start; transition: color .18s, background .18s; }
.logica-services .service-index a:nth-child(4n) { margin-right: 0; }
.logica-services .index-number { color: var(--deep-teal); font: 17px/1.85 Arial,sans-serif; font-variant-numeric: tabular-nums; }
.logica-services .index-title { font-size: 16px; font-weight: 600; line-height: 1.8; }
.logica-services .index-title > span { display: inline-block; }
.logica-services .index-arrow { font: 22px/1.4 Arial,sans-serif; position: absolute; right: 2px; top: 28px; transition: transform .18s; }
.logica-services .service-index a:hover { color: var(--deep-teal); }
.logica-services .service-index a:hover .index-arrow { transform: translate(3px,3px); }
.logica-services .service-number { display: block; font: 400 100px/.85 Arial,sans-serif; letter-spacing: -.075em; font-variant-numeric: lining-nums; }
.logica-services .strategy-feature { margin: 0 var(--gutter); padding: 65px 64px 59px; background: var(--mint); display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: auto 1fr; column-gap: 82px; }
.logica-services .feature-heading { grid-column: 1; }
.logica-services .strategy-feature .service-number { font-size: 80px; color: var(--deep-teal); margin-bottom: 33px; }
.logica-services .strategy-feature h2 { font-size: 39px; letter-spacing: -.05em; line-height: 1.55; }
.logica-services .feature-art { grid-column: 1; align-self: center; }
.logica-services .feature-art .service-art { width: 300px; margin: 18px 0 -8px 84px; transform: rotate(-7deg); }
.logica-services .feature-copy { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.logica-services .description { line-height: 2; font-size: 16px; letter-spacing: .015em; }
.logica-services .scope-label { font-size: 16px; font-weight: 600; margin-bottom: 11px; }
.logica-services .service-scope { margin-top: 34px; }
.logica-services .service-scope ul { border-top: 1px solid var(--ink); }
.logica-services .service-scope li { padding: 12px 0 12px 18px; border-bottom: 1px solid var(--rule); position: relative; line-height: 1.8; }
.logica-services .service-scope li::before { content: ''; position: absolute; top: 25px; left: 0; width: 5px; height: 5px; background: var(--deep-teal); }
.logica-services .service-note { margin-top: 24px; font-size: 16px; line-height: 1.85; color: var(--muted); }
.logica-services .service-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 96px; margin: 0 var(--gutter); padding: 97px 0 101px; }
.logica-services .service-card { min-width: 0; }
.logica-services .card-picture { height: 249px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.logica-services .card-picture .service-number { padding-top: 16px; }
.logica-services .card-picture .service-art { width: 310px; align-self: center; margin-right: 28px; }
.logica-services .service-02 .service-art { transform: rotate(-5deg); }
.logica-services .service-03 .service-art { transform: rotate(6deg); }
.logica-services .service-card h2 { font-size: 34px; line-height: 1.5; letter-spacing: -.035em; margin-bottom: 23px; font-weight: 700; }
.logica-services .service-card .description { min-height: 74px; max-width: 540px; }
.logica-services .service-card .service-scope { margin-top: 29px; }
.logica-services .work-note { padding: 20px 22px; border-left: 3px solid var(--deep-teal); background: #e2e8de; color: var(--ink); }
.logica-services .dark-services { background: var(--ink); color: var(--white); }
.logica-services .dark-services .service-pair { padding-top: 75px; padding-bottom: 78px; }
.logica-services .dark-services .service-art { --art-teal: #80c3c0; --art-paper: #f1f0dc; }
.logica-services .dark-services .service-number { color: #86c7c4; }
.logica-services .dark-services .service-scope ul { border-top-color: #d6dbd2; }
.logica-services .dark-services .service-scope li { border-bottom-color: #5d6a63; }
.logica-services .dark-services .service-scope li::before { background: #9ad3cf; }
.logica-services .dark-services .service-note { color: #d2dad3; max-width: 510px; }
.logica-services .social-feature { margin: 0 var(--gutter); padding: 104px 0 100px; display: grid; grid-template-columns: 1fr .95fr 1.45fr; gap: 48px; border-bottom: 1px solid var(--ink); }
.logica-services .social-heading .service-number { font-size: 90px; margin-bottom: 33px; }
.logica-services .social-heading h2 { font-size: 36px; line-height: 1.5; margin-bottom: 22px; }
.logica-services .social-heading .service-note { font-size: 16px; }
.logica-services .social-art { align-self: center; }
.logica-services .social-art .service-art { width: 100%; transform: rotate(-9deg); }
.logica-services .social-feature .service-scope { margin-top: 0; align-self: center; }
.logica-services .pair-relationship { padding-top: 94px; }
.logica-services .pair-relationship .description { min-height: 64px; }
.logica-services .pair-relationship h2 { margin-bottom: 24px; }
.logica-services .service-07 .service-art { transform: rotate(-7deg); }
.logica-services .service-08 .service-art { transform: rotate(5deg); }
.logica-services .funnel { margin: 0 var(--gutter) 100px; padding: 51px 48px 53px; background: #e3e5da; }
.logica-services .funnel h2 { font-size: 30px; line-height: 1.5; margin-bottom: 45px; }
.logica-services .funnel-diagram > ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.logica-services .funnel-diagram > ol > li { position: relative; }
.logica-services .funnel-step { border-top: 2px solid var(--deep-teal); padding: 33px 0 0 19px; position: relative; }
.logica-services .funnel-dot { position: absolute; left: 19px; top: -7px; width: 12px; height: 12px; background: var(--deep-teal); border: 2px solid #e3e5da; border-radius: 50%; }
.logica-services .funnel-diagram > ol > li:not(:last-child) .funnel-step::after { content: ''; position: absolute; right: 16px; top: -5px; width: 8px; height: 8px; border-top: 2px solid var(--deep-teal); border-right: 2px solid var(--deep-teal); transform: rotate(45deg); }
.logica-services .funnel h3 { font-size: 24px; font-weight: 700; }
.logica-services .funnel-diagram ul { padding-left: 19px; margin-top: 13px; }
.logica-services .funnel-diagram ul li { font-size: 16px; line-height: 1.9; }
.logica-services .contact { padding: 85px var(--gutter) 87px; background: var(--mint); display: flex; justify-content: space-between; align-items: center; gap: 64px; }
.logica-services .contact h2 { font-size: 58px; line-height: 1.5; font-weight: 700; letter-spacing: -.04em; }
.logica-services .contact p { margin-top: 25px; font-size: 16px; }
.logica-services .contact-link { width: 248px; min-height: 248px; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex-shrink: 0; transition: background .2s, transform .2s; }
.logica-services .contact-link > span:first-child { font-size: 17px; font-weight: 500; }
.logica-services .contact-arrow { font: 100px/.95 Arial,sans-serif; }
.logica-services .contact-link:hover { background: var(--deep-teal); transform: translateY(-4px); }
.logica-services .site-footer { padding: 58px var(--gutter) 30px; background: var(--white); }
.logica-services .footer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 54px; border-bottom: 1px solid var(--rule); }
.logica-services .footer-catch { font-size: 25px; font-weight: 600; line-height: 1.9; letter-spacing: -.015em; }
.logica-services .back-top { width: 56px; height: 56px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 27px/1 Arial,sans-serif; }
.logica-services .back-top:hover { color: var(--white); background: var(--ink); }
.logica-services .footer-bottom { padding-top: 39px; display: flex; justify-content: space-between; align-items: flex-start; gap: 42px; }
.logica-services .footer-brand { width: 215px; flex-shrink: 0; }
.logica-services .footer-right nav { display: flex; flex-wrap: wrap; gap: 17px 23px; font-size: 14px; }
.logica-services .footer-right nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.logica-services .copyright { font: 14px/1.8 'Noto Sans JP','Yu Gothic','Hiragino Kaku Gothic ProN','Meiryo',sans-serif; margin-top: 27px; text-align: right; color: var(--muted); }
@media (min-width: 1600px) {
  .logica-services { --gutter: max(64px, calc((100vw - 1320px)/2)); }
}
@media (max-width: 1100px) {
  .logica-services { --gutter: 38px; }
  .logica-services .desktop-nav { gap: 23px; font-size: 15px; }
  .logica-services .desktop-nav .nav-contact { min-width: 158px; margin-left: 0; padding-left: 16px; }
  .logica-services .hero { gap: 8px; min-height: 580px; }
  .logica-services .hero-art { height: 415px; }
  .logica-services h1 { font-size: 78px; }
  .logica-services .hero-intro { font-size: 20px; }
  .logica-services .service-index { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .logica-services .service-index a { margin-right: 28px; }
  .logica-services .service-index a:nth-child(2n) { margin-right: 0; }
  .logica-services .strategy-feature { padding: 48px 38px; column-gap: 43px; }
  .logica-services .strategy-feature h2 { font-size: 29px; }
  .logica-services .feature-art .service-art { margin-left: 0; width: 260px; }
  .logica-services .service-pair { column-gap: 52px; }
  .logica-services .card-picture .service-art { width: 245px; margin-right: 0; }
  .logica-services .card-picture .service-number { font-size: 79px; }
  .logica-services .service-card h2 { font-size: 29px; }
  .logica-services .social-feature { grid-template-columns: 1fr 1.2fr; column-gap: 44px; }
  .logica-services .social-heading { grid-column: 1; grid-row: 1; }
  .logica-services .social-art { grid-column: 1; grid-row: 2; }
  .logica-services .social-art .service-art { width: 210px; margin: -22px auto 0; }
  .logica-services .social-feature .service-scope { grid-column: 2; grid-row: 1 / 3; }
  .logica-services .funnel { padding-left: 28px; padding-right: 28px; }
  .logica-services .funnel h3 { font-size: 21px; }
  .logica-services .contact { gap: 40px; }
  .logica-services .contact h2 { font-size: 47px; }
  .logica-services .contact-link { width: 224px; min-height: 208px; }
  .logica-services .footer-bottom { flex-direction: column; }
  .logica-services .footer-right { width: 100%; }
}
@media (max-width: 700px) {
  .logica-services { --gutter: 24px; }
  html.logica-page { scroll-padding-top: 18px; }
  .logica-services { font-size: 16px; }
  .logica-services .site-header { min-height: 83px; gap: 20px; position: relative; }
  .logica-services .brand { width: 137px; }
  .logica-services .desktop-nav { display: none; }
  .logica-services .mobile-menu { display: block; }
  .logica-services .mobile-menu summary { display: flex; flex-direction: column; justify-content: center; gap: 7px; width: 48px; height: 48px; padding: 8px; cursor: pointer; list-style: none; }
  .logica-services .mobile-menu summary::-webkit-details-marker { display: none; }
  .logica-services .mobile-menu summary span { width: 29px; height: 1px; background: var(--ink); transition: transform .2s; }
  .logica-services .mobile-menu[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
  .logica-services .mobile-menu[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .logica-services .mobile-menu nav { position: absolute; top: 82px; left: -24px; right: -24px; background: var(--paper); padding: 18px 24px 28px; z-index: 5; border-bottom: 1px solid var(--ink); }
  .logica-services .mobile-menu nav a { display: block; padding: 13px 0; border-bottom: 1px solid var(--rule); }
  .logica-services .mobile-menu nav a[aria-current] { color: var(--deep-teal); font-weight: 700; }
  .logica-services .mobile-menu .small-arrow { float: right; }
  .logica-services .hero { grid-template-columns: 1fr; gap: 0; padding: 49px var(--gutter) 18px; min-height: 0; }
  .logica-services .hero-content { padding-top: 0; }
  .logica-services h1 { font-size: 63px; letter-spacing: -.035em; }
  .logica-services .title-dot { width: 11px; height: 11px; margin-left: 10px; }
  .logica-services .hero-intro { font-size: 18px; line-height: 1.9; margin-top: 27px; letter-spacing: .01em; }
  .logica-services .hero-art { width: 100%; height: 293px; max-width: 440px; justify-self: center; margin-top: 29px; }
  .logica-services .hero-art .service-art { width: 44%; }
  .logica-services .hero-design { right: 1%; top: 1%; }
  .logica-services .hero-social { bottom: 1%; right: -1%; }
  .logica-services .hero-ads { left: 0; bottom: 0; }
  .logica-services .hero-map { left: -3%; top: 4%; }
  .logica-services .service-index { grid-template-columns: 1fr; margin-bottom: 51px; }
  .logica-services .service-index a { margin-right: 0; padding: 18px 34px 19px 0; grid-template-columns: 26px 1fr; align-items: center; gap: 15px; }
  .logica-services .index-title { font-size: 16px; }
  .logica-services .index-arrow { top: 18px; }
  .logica-services .strategy-feature { margin: 0; padding: 44px var(--gutter) 46px; grid-template-columns: 1fr; gap: 0; }
  .logica-services .strategy-feature .service-number { font-size: 66px; margin-bottom: 22px; }
  .logica-services .strategy-feature h2 { font-size: 25px; line-height: 1.6; }
  .logica-services .feature-heading { grid-column: 1; grid-row: 1; }
  .logica-services .feature-art { grid-column: 1; grid-row: 2; }
  .logica-services .feature-art .service-art { width: 218px; margin: 22px auto 31px; }
  .logica-services .feature-copy { grid-column: 1; grid-row: 3; }
  .logica-services .description { line-height: 1.95; letter-spacing: 0; }
  .logica-services .service-scope { margin-top: 28px; }
  .logica-services .service-scope li { padding-top: 13px; padding-bottom: 13px; line-height: 1.85; }
  .logica-services .service-scope li::before { top: 26px; }
  .logica-services .service-pair { grid-template-columns: 1fr; gap: 58px; padding: 52px 0 56px; }
  .logica-services .card-picture { height: 188px; gap: 8px; margin-bottom: 27px; }
  .logica-services .card-picture .service-number { font-size: 69px; padding-top: 10px; }
  .logica-services .card-picture .service-art { width: 223px; }
  .logica-services .service-card h2 { font-size: 27px; line-height: 1.55; margin-bottom: 20px; }
  .logica-services .service-card .description { min-height: auto; }
  .logica-services .service-card .service-scope { margin-top: 26px; }
  .logica-services .work-note { padding: 16px 17px; }
  .logica-services .dark-services .service-pair { padding-top: 54px; padding-bottom: 55px; }
  .logica-services .social-feature { padding: 52px 0 54px; grid-template-columns: 1fr; gap: 0; }
  .logica-services .social-heading { grid-column: 1; grid-row: 1; }
  .logica-services .social-heading .service-number { font-size: 69px; margin-bottom: 25px; }
  .logica-services .social-heading h2 { font-size: 30px; margin-bottom: 21px; }
  .logica-services .social-art { grid-column: 1; grid-row: 2; }
  .logica-services .social-art .service-art { width: 248px; margin: 32px auto 39px; }
  .logica-services .social-feature .service-scope { grid-column: 1; grid-row: 3; }
  .logica-services .pair-relationship { padding-top: 52px; }
  .logica-services .funnel { margin: 0 var(--gutter) 54px; padding: 29px 24px 31px; }
  .logica-services .funnel h2 { font-size: 24px; line-height: 1.6; margin-bottom: 29px; }
  .logica-services .funnel-diagram > ol { grid-template-columns: 1fr; }
  .logica-services .funnel-diagram > ol > li { border-left: 2px solid var(--deep-teal); padding: 0 0 29px 23px; }
  .logica-services .funnel-diagram > ol > li:last-child { padding-bottom: 0; }
  .logica-services .funnel-step { border-top: 0; padding: 0; }
  .logica-services .funnel-dot { left: -30px; top: 11px; }
  .logica-services .funnel-diagram > ol > li:not(:last-child) .funnel-step::after { left: -29px; top: 153px; transform: rotate(135deg); }
  .logica-services .funnel h3 { font-size: 22px; }
  .logica-services .funnel-diagram ul { padding-left: 0; margin-top: 9px; }
  .logica-services .contact { padding: 47px var(--gutter) 43px; flex-direction: column; align-items: flex-start; gap: 30px; }
  .logica-services .contact h2 { font-size: 34px; line-height: 1.6; }
  .logica-services .contact p { margin-top: 19px; }
  .logica-services .contact-link { width: 100%; min-height: 84px; border-radius: 0; flex-direction: row; gap: 29px; }
  .logica-services .contact-arrow { font-size: 46px; }
  .logica-services .site-footer { padding-top: 33px; padding-bottom: 27px; }
  .logica-services .footer-top { gap: 12px; padding-bottom: 28px; align-items: flex-start; }
  .logica-services .footer-catch { font-size: 17px; line-height: 1.9; }
  .logica-services .back-top { width: 40px; height: 40px; flex-shrink: 0; font-size: 24px; }
  .logica-services .footer-bottom { padding-top: 31px; gap: 27px; }
  .logica-services .footer-brand { width: 155px; }
  .logica-services .footer-right nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; font-size: 14px; }
  .logica-services .footer-right nav a { min-height: 32px; }
  .logica-services .copyright { text-align: left; font-size: 13px; margin-top: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html.logica-page { scroll-behavior: auto; }
  .logica-services, .logica-services *, .logica-services *::before, .logica-services *::after { transition: none !important; }
}

/* ヒーローの線画の配置。地図を中央に大きく置き、残り3点をその周囲に回す。 */
.logica-services .hero-art { display: flex; align-items: center; z-index: 0; }
.logica-services .hero-art .hero-composition {
  position: relative; flex: 0 0 100%; width: 100%;
  aspect-ratio: 610 / 475;
}
.logica-services .hero-art .hero-thread {
  inset: 0; stroke-width: 1.5; stroke-dasharray: 3 6;
}
.logica-services .hero-art .hero-composition > .service-art {
  right: auto; bottom: auto;
}
@media (max-width: 700px) {
  .logica-services .hero-art { z-index: 1; }
  .logica-services .hero-art .hero-composition > .service-art { z-index: auto; }
}

.logica-services .hero-art .hero-map {
  width: 70%; left: 12%; top: 7%; transform: rotate(-8deg);
}
.logica-services .hero-art .hero-design {
  width: 32%; left: 68%; top: -2%; transform: rotate(9deg);
}
.logica-services .hero-art .hero-ads {
  width: 34%; left: -2%; top: 63%; transform: rotate(-13deg);
}
.logica-services .hero-art .hero-social {
  width: 34%; left: 67%; top: 64%; transform: rotate(9deg);
}