@import url('https://fonts.googleapis.com/css2?family=Balthazar&family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@500;600&display=swap');
:root{--jl-ink:#171c61;--jl-deep:#1a385a;--jl-blue:#265683;--jl-line:#c5ccd5;--jl-cyan:#00b1c9;--jl-red:#b40014;--jl-white:#fff;--jl-soft:#f6f8fb;--jl-copy:#34384b;--jl-serif:'Noto Serif JP','Yu Mincho',YuMincho,serif;--jl-sans:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;--jl-en:'Balthazar',Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--jl-copy);font-family:var(--jl-sans);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.fl-site{overflow:clip}
.header{position:absolute;top:0;left:0;z-index:100;width:100%;height:80px;background:rgba(255,255,255,.96);box-shadow:0 3px 14px rgba(23,28,97,.08);transition:transform .35s ease,box-shadow .35s ease}
.home .header{position:fixed;transform:translateY(-110%)}
.home .header.is-pinned{transform:translateY(0)}
.navwrap{width:min(1200px,90%);height:80px;margin:auto;display:flex;align-items:stretch;justify-content:space-between;gap:30px}
.jl-nav-logo{display:flex;align-items:center;color:var(--jl-ink);font-family:'Lato',sans-serif;font-weight:700;font-size:27px;letter-spacing:.01em;white-space:nowrap}
.jl-desktop-nav{display:flex;align-items:stretch;gap:clamp(16px,2.2vw,35px)}
.jl-desktop-nav a{position:relative;display:flex;min-width:74px;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}
.jl-desktop-nav strong{font-family:var(--jl-serif);font-size:14px;font-weight:500}
.jl-desktop-nav span{margin-top:5px;color:var(--jl-ink);font-family:var(--jl-en);font-size:11px;letter-spacing:.1em}
.jl-desktop-nav a::after{position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--jl-ink);content:'';transition:.25s}
.jl-desktop-nav a:hover::after,.jl-desktop-nav a:focus-visible::after{left:0;width:100%}
.nav-trigger,#spnav{display:none}
.jl-hero{position:relative;min-height:100vh;background:#eef3f7 url('../images/four-likes-hero-office-v1.png') center/cover no-repeat;color:#fff;isolation:isolate;overflow:hidden}
.jl-hero-movie{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#0b183e}
.jl-hero-movie video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translate(-50%,-50%);object-fit:cover}
.jl-hero-bird{position:absolute;right:clamp(16px,7vw,140px);bottom:clamp(48px,12vh,150px);width:clamp(180px,22vw,330px);pointer-events:none;z-index:1}
.jl-hero-bird img{display:block;width:100%;height:auto}
@media (max-width:480px){
.jl-hero h1{font-size:clamp(34px,9.2vw,44px)}
.jl-hero-copy{width:min(620px,88vw)}
.jl-hero-logo{font-size:clamp(32px,9vw,44px)}
}
@media (max-width:820px){
.jl-hero-bird{right:clamp(8px,4vw,40px);bottom:clamp(90px,16vh,140px);width:clamp(130px,38vw,190px)}
}
@media (prefers-reduced-motion:reduce){
.jl-hero-movie video{display:none}
}
.jl-hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,24,62,.76) 0%,rgba(23,28,97,.48) 42%,rgba(23,28,97,.06) 75%)}
.jl-hero-copy{position:absolute;top:50%;left:max(5%,calc((100vw - 1200px)/2));width:min(620px,82vw);transform:translateY(-48%)}
.jl-hero-logo{margin:0 0 22px;font-family:'Lato',sans-serif;font-size:clamp(40px,5vw,74px);font-weight:700;letter-spacing:.01em}
.jl-hero h1{margin:0;font-family:var(--jl-en);font-size:clamp(46px,6vw,84px);font-weight:400;line-height:.94;letter-spacing:.015em;text-shadow:0 3px 20px rgba(0,0,0,.14)}
.jl-hero-copy>p:last-child{margin:26px 0 0;font-family:var(--jl-serif);font-size:clamp(18px,1.7vw,24px);letter-spacing:.08em}
.jl-scroll{position:absolute;right:5%;bottom:42px;display:flex;align-items:center;gap:15px;font:13px/1 'Lato',sans-serif;letter-spacing:.18em;writing-mode:vertical-rl}
.jl-scroll i{display:block;width:1px;height:70px;background:rgba(255,255,255,.86);animation:jlScroll 1.8s ease-in-out infinite;transform-origin:top}
@keyframes jlScroll{0%,100%{transform:scaleY(.25);opacity:.45}50%{transform:scaleY(1);opacity:1}}
.jl-index-nav{display:grid;grid-template-columns:repeat(6,1fr);width:min(1200px,90%);margin:auto;background:#fff;border-bottom:1px solid var(--jl-line)}
.jl-index-nav a{position:relative;padding:26px 10px;text-align:center;border-right:1px solid #e3e6ec}
.jl-index-nav a:last-child{border-right:0}
.jl-index-nav strong{display:block;font-family:var(--jl-serif);font-size:15px;font-weight:500}
.jl-index-nav span{display:block;margin-top:5px;color:var(--jl-ink);font-family:var(--jl-en);font-size:12px;letter-spacing:.08em}
.jl-index-nav a::before{position:absolute;bottom:-1px;left:50%;width:0;height:3px;background:var(--jl-ink);content:'';transition:.25s}
.jl-index-nav a:hover::before,.jl-index-nav a:focus-visible::before{left:0;width:100%}
.jl-section{width:min(1200px,90%);margin:0 auto;padding:120px 0}
.jl-about{display:grid;grid-template-columns:1fr 1fr;min-height:650px;padding-top:140px;gap:0}
.jl-photo--office{min-height:520px;background:url('../images/four-likes-hero-office-v1.png') 64% center/cover no-repeat}
.jl-about-copy{display:flex;flex-direction:column;justify-content:center;padding:50px clamp(32px,6vw,90px);background:#f5f7fa}
.jl-en{margin:0 0 13px;color:var(--jl-ink);font-family:var(--jl-en);font-size:20px;letter-spacing:.12em}
.jl-about h2,.jl-heading h2,.jl-problem h2,.jl-contact-band h2{margin:0;color:var(--jl-ink);font-family:var(--jl-serif);font-size:clamp(29px,3vw,42px);font-weight:600;line-height:1.5;letter-spacing:.03em}
.jl-about-copy>p:not(.jl-en){margin:23px 0 0}
.jl-button{display:inline-flex;width:200px;min-height:56px;margin-top:32px;align-items:center;justify-content:center;border:1px solid var(--jl-ink);color:var(--jl-ink);font-family:'Lato',var(--jl-sans);font-size:13px;font-weight:700;letter-spacing:.06em;transition:.25s}
.jl-button:hover,.jl-button:focus-visible{background:var(--jl-ink);color:#fff}
.jl-button--center{margin:55px auto 0}
.jl-problem{position:relative;display:grid;min-height:520px;place-items:center;padding:90px 5%;background:linear-gradient(rgba(23,28,97,.72),rgba(23,28,97,.72)),url('../images/four-likes-hero-office-v1.png') center 55%/cover fixed;color:#fff;text-align:center}
.jl-problem>div{width:min(780px,100%)}
.jl-problem .jl-en,.jl-problem h2{color:#fff}
.jl-problem p:last-child{margin:24px auto 0;max-width:650px}
.jl-heading{position:relative;margin-bottom:48px;padding-left:38px}
.jl-heading::before{position:absolute;top:6px;bottom:4px;left:0;width:3px;background:var(--jl-ink);content:''}
.jl-heading h2{font-size:34px}
.jl-heading>span{display:block;margin-top:9px;color:#686d7c}
.jl-heading>a{position:absolute;right:0;bottom:2px;color:var(--jl-ink);font-size:13px;font-weight:700;letter-spacing:.05em}
.jl-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--jl-line);border:1px solid var(--jl-line)}
.jl-service-card{position:relative;display:flex;min-height:240px;flex-direction:column;padding:30px;background:#fff;overflow:hidden;transition:.28s}
.jl-service-card::after{position:absolute;inset:0;background:linear-gradient(135deg,transparent 46%,rgba(23,28,97,.06));content:'';opacity:0;transition:.28s}
.jl-service-card:hover,.jl-service-card:focus-visible{background:var(--jl-ink);color:#fff;transform:translateY(-3px);z-index:2}
.jl-service-card:hover::after,.jl-service-card:focus-visible::after{opacity:1}
.jl-service-number{font:16px/1 'Lato',sans-serif;color:var(--jl-ink)}
.jl-service-card small{margin-top:25px;font-size:11px;letter-spacing:.06em}
.jl-service-card h3{margin:4px 0 9px;font-family:var(--jl-serif);font-size:20px;font-weight:600}
.jl-service-card p{margin:0;font-size:13px;line-height:1.75}
.jl-service-card b{margin-top:auto;align-self:flex-end;font:11px/1 'Lato',sans-serif;letter-spacing:.08em}
.jl-service-card:hover .jl-service-number,.jl-service-card:focus-visible .jl-service-number{color:#fff}
.jl-combinations{padding:110px max(5%,calc((100vw - 1200px)/2));background:var(--jl-deep);color:#fff}
.jl-heading--light .jl-en,.jl-heading--light h2,.jl-heading--light span{color:#fff}
.jl-heading--light::before{background:#fff}
.jl-combination-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.jl-combination-grid article{min-height:250px;padding:35px;border:1px solid rgba(255,255,255,.35)}
.jl-combination-grid span{font:18px/1 'Lato',sans-serif;color:#8bdbe5}
.jl-combination-grid h3{margin:50px 0 10px;font-family:var(--jl-serif);font-size:22px}
.jl-reasons{display:grid;grid-template-columns:360px 1fr;gap:80px}
.jl-reason-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--jl-line)}
.jl-reason-list li{display:grid;grid-template-columns:70px 1fr;padding:27px 0;border-bottom:1px solid var(--jl-line)}
.jl-reason-list>li>span{color:var(--jl-blue);font:20px/1.4 'Lato',sans-serif}
.jl-reason-list h3{margin:0 0 5px;color:var(--jl-ink);font-family:var(--jl-serif);font-size:20px}
.jl-reason-list p{margin:0}
.jl-values{padding:105px max(5%,calc((100vw - 1200px)/2));background:#f2f5f8}
.jl-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.jl-value-grid article{min-height:250px;padding:38px;background:#fff;border-top:4px solid var(--jl-ink)}
.jl-value-grid span{color:#8a90a0;font:15px/1 'Lato',sans-serif}
.jl-value-grid h3{margin:48px 0 12px;color:var(--jl-ink);font:32px/1 var(--jl-en);letter-spacing:.08em}
.jl-flow>ol{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
.jl-flow li{position:relative;min-height:245px;padding:30px;border:1px solid var(--jl-line);border-right:0}
.jl-flow li:last-child{border-right:1px solid var(--jl-line)}
.jl-flow li span{font:16px/1 'Lato',sans-serif;color:var(--jl-blue)}
.jl-flow h3{margin:55px 0 10px;color:var(--jl-ink);font-family:var(--jl-serif);font-size:20px}
.jl-flow p{margin:0;font-size:14px}
.jl-faq{padding-top:20px}
.jl-faq details{border-top:1px solid var(--jl-line)}
.jl-faq details:last-child{border-bottom:1px solid var(--jl-line)}
.jl-faq summary{position:relative;padding:28px 65px 28px 52px;color:var(--jl-ink);font-family:var(--jl-serif);font-size:17px;cursor:pointer;list-style:none}
.jl-faq summary::before{position:absolute;left:10px;content:'Q';font:22px/1 var(--jl-en)}
.jl-faq summary::after{position:absolute;right:22px;content:'＋';font:22px/1 var(--jl-sans)}
.jl-faq details[open] summary::after{content:'−'}
.jl-faq details p{margin:0;padding:0 55px 28px 52px}
.jl-news-list{border-top:1px solid var(--jl-line)}
.jl-news-list a{display:grid;grid-template-columns:130px 1fr 30px;gap:25px;align-items:center;padding:24px 10px;border-bottom:1px solid var(--jl-line)}
.jl-news-list time{font:13px/1 'Lato',sans-serif;color:#777}
.jl-news-list h3{margin:0;font-family:var(--jl-serif);font-size:16px;font-weight:500}
.jl-contact-band{padding:105px 5%;background:var(--jl-ink);color:#fff;text-align:center}
.jl-contact-band .jl-en,.jl-contact-band h2{color:#fff}
.jl-button--light{border-color:#fff;color:#fff}
.jl-button--light:hover,.jl-button--light:focus-visible{background:#fff;color:var(--jl-ink)}
.site-footer{padding:70px 0 0;background:var(--jl-deep);color:#fff}
.fl-footer-inner{display:grid;grid-template-columns:30% 70%;width:min(1200px,90%);margin:auto}
.fl-footer-lead{padding:45px 40px 45px 0}
.fl-footer-logo{font:700 30px/1.2 'Lato',sans-serif}
.fl-footer-lead p{margin:20px 0}
.fl-footer-lead::after{display:block;height:210px;margin-top:35px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(0,177,201,.24));content:'KUMAMOTO / FOUR LIKES';padding:25px;color:rgba(255,255,255,.72);font:16px/1 'Lato',sans-serif;letter-spacing:.08em}
.footer-nav{display:grid;place-items:center;background:rgba(255,255,255,.06);min-height:400px}
.footer-nav ul{display:grid;grid-template-columns:repeat(3,1fr);width:82%;margin:0;padding:0;list-style:none;gap:25px}
.footer-nav a{display:block;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.24)}
.fl-footer-bottom{display:flex;justify-content:space-between;width:min(1200px,90%);margin:0 auto;padding:22px 0;border-top:1px solid rgba(255,255,255,.2);font-size:12px}
/* Shared lower pages */
.fl-subpage{padding-top:80px}
.fl-page-hero{padding:150px max(5%,calc((100vw - 1200px)/2));background:#f1f4f8;border-bottom:1px solid var(--jl-line)}
.fl-page-hero>p{margin:0;color:var(--jl-ink);font:64px/1 var(--jl-en);letter-spacing:.04em}
.fl-page-hero h1{margin:15px 0 0;color:var(--jl-ink);font-family:var(--jl-serif);font-size:34px}
.fl-page-hero>span{display:block;margin-top:13px}
.fl-section{width:min(1200px,90%);margin:0 auto;padding:100px 0}
.fl-section-index,.fl-detail-number{color:var(--jl-blue);font:15px/1 'Lato',sans-serif;letter-spacing:.08em}
.fl-about-lead,.fl-recruit-lead,.fl-entry{display:grid;grid-template-columns:32% 1fr;gap:70px}
.fl-about-lead h2,.fl-recruit-lead h2,.fl-entry h2,.fl-section-heading h2,.fl-contact-intro h2{margin:0 0 25px;color:var(--jl-ink);font-family:var(--jl-serif);font-size:34px;line-height:1.5}
.fl-company-table>div{display:grid;grid-template-columns:220px 1fr;padding:24px 0;border-top:1px solid var(--jl-line)}
.fl-company-table>div:last-child{border-bottom:1px solid var(--jl-line)}
.fl-company-table dt{color:var(--jl-ink);font-weight:700}
.fl-company-table dd{margin:0}
.fl-service-detail{display:grid;grid-template-columns:90px 300px 1fr;gap:35px;border-bottom:1px solid var(--jl-line)}
.fl-detail-head p{margin:0;color:var(--jl-blue);font:16px/1.4 var(--jl-en);letter-spacing:.06em}
.fl-detail-head h2{margin:10px 0;color:var(--jl-ink);font-family:var(--jl-serif);font-size:26px}
.fl-detail-lead{margin-top:0;font-family:var(--jl-serif);font-size:19px;color:var(--jl-ink)}
.fl-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fl-detail-grid article{padding:24px;background:#f3f6f9}
.fl-detail-grid h3{margin-top:0;color:var(--jl-ink);font-family:var(--jl-serif);font-size:17px}
.fl-creative-note{margin-top:20px;padding:20px;border-left:3px solid var(--jl-cyan);background:#eef8fa}
.fl-creative-note span{font:18px/1 var(--jl-en);color:var(--jl-blue)}
.fl-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fl-values-grid article{padding:35px;border:1px solid var(--jl-line)}
.fl-values-grid span{color:var(--jl-blue);font:16px/1 'Lato',sans-serif}
.fl-values-grid h3{color:var(--jl-ink);font-family:var(--jl-serif)}
.fl-contact-layout{display:grid;grid-template-columns:36% minmax(0,1fr);gap:70px}
.fl-contact-layout>*{min-width:0}
.fl-contact-form{padding:45px;background:#f4f6f9}
.fl-contact-form input,.fl-contact-form select,.fl-contact-form textarea{width:100%;padding:13px;border:1px solid #bfc5ce;background:#fff;font:inherit}
.fl-contact-form input[type=submit]{width:300px;max-width:100%;border-color:var(--jl-ink);background:var(--jl-ink);color:#fff;cursor:pointer}
.fl-cta{padding:90px 5%;background:var(--jl-ink);color:#fff;text-align:center}
.fl-cta>p{margin:0;font:20px/1 var(--jl-en);letter-spacing:.12em}
.fl-cta h2{margin:15px 0;color:#fff;font-family:var(--jl-serif);font-size:34px}
.fl-button{display:inline-flex;min-width:200px;min-height:56px;align-items:center;justify-content:center;border:1px solid var(--jl-ink);color:var(--jl-ink)}
.fl-button--light{border-color:#fff;color:#fff}
.ani{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.ani.on,.ani.is-visible{opacity:1;transform:none}
@media(max-width:1024px){
 .header{display:none}.nav-trigger{position:fixed;top:18px;right:18px;z-index:130;display:flex;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;background:var(--jl-ink);cursor:pointer}.nav-trigger span{width:24px;height:2px;background:#fff;transition:.25s}.nav-trigger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-trigger.active span:nth-child(2){opacity:0}.nav-trigger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 #spnav{position:fixed;inset:0;z-index:120;display:block;visibility:hidden;background:rgba(13,22,54,.58);opacity:0;transition:.25s}#spnav.is-open{visibility:visible;opacity:1}#spnav .trigger{width:300px;max-width:80%;height:100%;padding:36px 28px;background:#fff;transform:translateX(-105%);transition:.3s;overflow:auto}#spnav .trigger.open{transform:none}#spnav .jl-nav-logo{height:55px}#spnav nav{display:flex;margin-top:35px;flex-direction:column}#spnav nav a{display:flex;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--jl-line)}#spnav nav strong{font-family:var(--jl-serif);font-weight:500}#spnav nav span{font:12px/1.8 var(--jl-en);letter-spacing:.08em}
 .jl-index-nav{grid-template-columns:repeat(3,1fr)}.jl-index-nav a:nth-child(3){border-right:0}
 .jl-reasons{grid-template-columns:1fr;gap:20px}.fl-subpage{padding-top:0}.fl-service-detail{grid-template-columns:70px 250px 1fr}.fl-detail-grid{grid-template-columns:1fr}
}
@media(max-width:800px){
 .jl-about{grid-template-columns:1fr}.jl-photo--office{min-height:390px}.jl-about-copy{padding:45px 7%}.jl-service-grid{grid-template-columns:repeat(2,1fr)}.jl-service-card{min-height:220px;padding:24px}.jl-combination-grid,.jl-value-grid{grid-template-columns:1fr}.jl-flow>ol{grid-template-columns:1fr}.jl-flow li{min-height:0}.jl-flow li:not(:last-child){border-right:1px solid var(--jl-line);border-bottom:0}.fl-footer-inner{grid-template-columns:1fr}.fl-footer-lead{padding-right:0}.footer-nav{min-height:300px}.fl-about-lead,.fl-recruit-lead,.fl-entry{grid-template-columns:1fr;gap:30px}.fl-contact-layout{grid-template-columns:minmax(0,1fr);gap:30px}.fl-service-detail{grid-template-columns:1fr}.fl-detail-number{margin-bottom:-15px}.fl-company-table>div{grid-template-columns:150px 1fr}
}
@media(max-width:640px){
 body{font-size:15px}.jl-hero{min-height:100svh;background-position:62% center}.jl-hero-shade{background:linear-gradient(90deg,rgba(12,22,58,.82),rgba(23,28,97,.34))}.jl-hero-copy{left:7%;width:84%}.jl-hero-logo{font-size:38px}.jl-hero h1{font-size:46px}.jl-hero-copy>p:last-child{font-size:16px}.jl-scroll{right:18px;bottom:25px}.jl-index-nav{width:100%;grid-template-columns:repeat(2,1fr)}.jl-index-nav a:nth-child(3){border-right:1px solid #e3e6ec}.jl-index-nav a:nth-child(even){border-right:0}.jl-index-nav a{padding:19px 6px}.jl-section{width:86%;padding:78px 0}.jl-about{width:100%;padding-top:0}.jl-photo--office{min-height:320px}.jl-about h2,.jl-heading h2,.jl-problem h2,.jl-contact-band h2{font-size:25px}.jl-problem{min-height:430px;background-attachment:scroll}.jl-service-grid{grid-template-columns:repeat(2,1fr)}.jl-service-card{min-height:200px;padding:18px}.jl-service-card small{margin-top:17px;font-size:9px}.jl-service-card h3{font-size:16px}.jl-service-card p{display:none}.jl-heading{padding-left:24px}.jl-combinations,.jl-values{padding:75px 7%}.jl-combination-grid article,.jl-value-grid article{min-height:205px;padding:28px}.jl-reasons{width:86%}.jl-reason-list li{grid-template-columns:50px 1fr}.jl-news-list a{grid-template-columns:90px 1fr 20px;gap:10px}.jl-news-list h3{font-size:14px}.fl-footer-inner,.fl-footer-bottom{width:86%}.footer-nav ul{width:86%;grid-template-columns:repeat(3,1fr);gap:10px}.footer-nav a{font-size:12px}.fl-footer-bottom{gap:15px;flex-direction:column}.fl-page-hero{padding:80px 7%}.fl-page-hero>p{font-size:56px}.fl-page-hero h1{font-size:23px}.fl-section{width:86%;padding:72px 0}.fl-about-lead h2,.fl-recruit-lead h2,.fl-entry h2,.fl-section-heading h2,.fl-contact-intro h2{font-size:25px}.fl-company-table>div{grid-template-columns:1fr;gap:5px}.fl-detail-grid{grid-template-columns:1fr}.fl-values-grid{grid-template-columns:1fr}.fl-contact-form{padding:24px}.fl-cta h2{font-size:25px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ani{opacity:1;transform:none;transition:none}.jl-scroll i{animation:none}.header{transition:none}.jl-service-card,.nav-trigger span,#spnav,#spnav .trigger{transition:none}}

/* jonathan-ltd.com の見出し（連番 + 日本語 + 英字）に合わせた連番表示 */
.jl-num{display:inline-block;margin-right:.6em;font-family:var(--jl-en);font-size:.86em;letter-spacing:.06em;opacity:.72}
/* 03 実績事例 WORKS */
.jl-works-list{display:grid;gap:0;border-top:1px solid rgba(11,24,62,.14)}
.jl-works-item{display:grid;grid-template-columns:64px 1fr;align-items:baseline;gap:0 18px;margin:0;padding:20px 4px;border-bottom:1px solid rgba(11,24,62,.14)}
.jl-works-item dt{font-family:var(--jl-en);font-size:20px;letter-spacing:.06em;opacity:.55}
.jl-works-item dd{margin:0;font-size:17px;line-height:1.75}
@media (max-width:600px){
.jl-works-item{grid-template-columns:44px 1fr;gap:0 12px;padding:16px 2px}
.jl-works-item dt{font-size:16px}
.jl-works-item dd{font-size:15px}
}

/* ==== FV trace v2 ==== */
.jl-hero{position:relative;min-height:900px;height:100vh;max-height:900px;background:#f7fafc url('../images/topfvbg.jpg') center/cover no-repeat;color:var(--jl-ink);overflow:hidden;isolation:isolate}
.jl-hero-shade{display:none}
.jl-hero-movie{display:none}
.jl-hero-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.jl-hero-logo{position:relative;z-index:2;margin:0 0 6px;font-family:'Lato',sans-serif;font-size:clamp(38px,4.4vw,64px);font-weight:700;letter-spacing:.06em;color:#2f3f7e;text-align:center;line-height:1.1}
.jl-hero-logo span{display:block;margin-top:6px;font-size:.29em;font-weight:400;letter-spacing:.18em;color:#5aa9d6}
.jl-hero .jl-hero-bird{position:absolute;left:50%;top:44%;width:clamp(240px,38vw,550px);transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.jl-hero .jl-hero-bird img{display:block;width:100%;height:auto}
.jl-hero h1{position:relative;z-index:2;margin:0;width:min(620px,86vw);text-align:center;color:var(--jl-ink);text-shadow:none}
.jl-hero h1 .en_text{display:block;font-family:var(--jl-en);font-size:clamp(28px,3.1vw,44px);font-weight:400;letter-spacing:.04em;line-height:1.2}
.jl-hero h1 .jp_text{display:block;margin-top:14px;font-family:var(--jl-serif);font-size:clamp(15px,1.35vw,19px);letter-spacing:.14em;line-height:1.9}
.jl-hero .jl-scroll{color:var(--jl-ink)}
.jl-hero .jl-scroll i{background:var(--jl-ink)}
@media (max-width:820px){
.jl-hero{min-height:640px;max-height:none;height:auto;padding:120px 0 90px;background-position:center}
.jl-hero-inner{position:static;padding:0 20px}
.jl-hero .jl-hero-bird{position:relative;left:auto;top:auto;transform:none;margin:6px auto 2px;width:min(280px,62vw)}
}

/* ==== FV trace v3 実測合わせ ==== */
/* 元サイト 1440x900 の実測値に合わせる。% は 1440x900 を基準に算出。 */
.jl-hero{position:relative;width:100%;aspect-ratio:1440 / 900;min-height:520px;max-height:900px;height:auto;
  background:#f7fafc url('../images/topfvbg.jpg') center/cover no-repeat;color:#171C61;overflow:hidden}
.jl-hero-inner{position:absolute;inset:0;display:block}
/* textbox 相当: x=410(28.472%) y=265(29.444%) w=620(43.056%) */
.jl-hero-logo{position:absolute;left:28.472%;top:29.444%;width:43.056%;height:20.111%;
  margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Lato',sans-serif;font-size:clamp(26px,3.33vw,48px);font-weight:700;letter-spacing:.06em;
  color:#171C61;text-align:center;line-height:1.05;z-index:2}
.jl-hero-logo span{display:block;margin-top:.35em;font-size:.3em;font-weight:400;letter-spacing:.18em;color:#5aa9d6}
/* カモメ: x=445(30.903%) y=401(44.556%) w=550(38.194%) */
.jl-hero .jl-hero-bird{position:absolute;left:30.903%;top:44.556%;width:38.194%;height:auto;transform:none;pointer-events:none;z-index:1}
.jl-hero .jl-hero-bird img{display:block;width:100%;height:auto}
/* h1: x=410 y=494(54.889%) w=620 */
.jl-hero h1{position:absolute;left:28.472%;top:54.889%;width:43.056%;margin:0;text-align:center;color:#171C61;text-shadow:none;z-index:2}
.jl-hero h1 .en_text{display:block;font-family:var(--jl-en);font-size:clamp(24px,3.333vw,48px);font-weight:400;letter-spacing:normal;line-height:1}
.jl-hero h1 .jp_text{display:block;margin-top:24px;font-family:var(--jl-serif);font-size:clamp(13px,1.444vw,20.8px);letter-spacing:normal;line-height:1}
.jl-hero .jl-scroll{color:#171C61}
.jl-hero .jl-scroll i{background:#171C61}
@media (max-width:820px){
.jl-hero{aspect-ratio:auto;min-height:0;max-height:none;height:auto;padding:96px 20px 84px}
.jl-hero-inner{position:static}
.jl-hero-logo{position:static;width:auto;height:auto;margin:0 auto 10px}
.jl-hero .jl-hero-bird{position:relative;left:auto;top:auto;width:min(300px,68vw);margin:0 auto}
.jl-hero h1{position:static;width:auto;margin:8px auto 0}
.jl-hero h1 .jp_text{margin-top:16px}
}

/* ==== FV trace v4 行間つぶし ==== */
/* h1 の中の空白テキストが余分な行を作り jp_text が 48px 下がるため、
   h1 自体の文字サイズを 0 にして子要素だけで組む。 */
.jl-hero h1{font-size:0;line-height:0}
.jl-hero h1 .en_text{line-height:1}
.jl-hero h1 .jp_text{line-height:1}

/* ==== FV trace v5 英文1行化 ==== */
/* 元サイトの英文は Fly High, Fly Fast で 620px に 1 行で収まる。
   こちらは Move Forward, Make It Work. と長く 48px では 2 行になり、
   日本語行が 48px 下がって元サイトと合わなくなる。
   レイアウト（枠と位置）を優先し、英文が 1 行に収まる字送りへ落とす。 */
.jl-hero h1 .en_text{white-space:nowrap;font-size:clamp(20px,2.85vw,41px)}

/* ==== FV trace v6 和文位置の詰め ==== */
/* 英文を 41px にした分（元 48px との差 7px）だけ和文が上がるので、
   その 7px を足して元サイトの y=566 に合わせる。 */
.jl-hero h1 .jp_text{margin-top:31px}

/* ==== FV trace v7 動画を最背面へ ==== */
/* 元サイトは 1600x900 の動画を FV 全面に敷き、その上にロゴ・カモメ・コピーを重ねる。
   動画には雲の場面とワイヤーフレーム世界地図の場面が含まれる。
   topfvbg.jpg は動画が出るまでの下地（ほぼ白）。 */
.jl-hero-movie{display:block;position:absolute;inset:0;z-index:0;overflow:hidden}
.jl-hero-movie video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translate(-50%,-50%);object-fit:cover}
.jl-hero-inner{z-index:1}
.jl-hero .jl-hero-bird{z-index:2}
.jl-hero-logo,.jl-hero h1{z-index:3}
.jl-hero .jl-scroll{z-index:3}
@media (prefers-reduced-motion:reduce){ .jl-hero-movie video{display:none} }

/* ==== セクション出現 トレース版 ==== */
/* 元サイト jonathan-ltd.com の keyframes 26 個を確認した結果、
   出現演出はほぼ全て opacity のフェードで、上下移動は使っていない。
   ease-in・1.5s・段階的な遅延という組み立て。
   こちらの translateY(28px) を外し、同じ性格のフェードへ置き換える。 */
.ani{opacity:0;transform:none;transition:opacity 1.5s ease-in}
.ani.on,.ani.is-visible{opacity:1;transform:none}

/* 節の中の要素を、元サイトと同じ段取りで順に出す。
   元サイトは 1.0 → 1.5 → 2.0 → 3.0 秒。ここでは節が画面に入ってからの相対遅延にする。 */
.ani.on .jl-heading{animation:fl_fade 1.5s ease-in 0s both}
.ani.on .jl-heading + *{animation:fl_fade 1.5s ease-in .5s both}
.ani.on .jl-service-card,
.ani.on .jl-works-item,
.ani.on .jl-reason-item,
.ani.on .jl-value-card,
.ani.on .jl-flow-step,
.ani.on .jl-combi-card{animation:fl_fade 1.5s ease-in 1s both}
.ani.on .jl-button{animation:fl_fade 1.5s ease-in 1.5s both}

@keyframes fl_fade{0%{opacity:0}100%{opacity:1}}

/* FV のカモメは元サイトでは 4.0 秒後に消える（topfv_pho: opacity 1 → 0）。 */
.jl-hero .jl-hero-bird{animation:fl_bird_out .5s ease 4s both}
@keyframes fl_bird_out{0%{opacity:1}100%{opacity:0}}

/* 元サイトの地図。backgroundEffect.png を 45% で重ね、ゆっくり浮かび上がる。 */
.jl-hero::before{content:'';position:absolute;inset:0;z-index:0;
  background:url('../images/fv_map_effect.png') center/cover no-repeat;
  opacity:0;animation:fl_map_in 2.5s ease-in .2s both;pointer-events:none}
@keyframes fl_map_in{0%{opacity:0}100%{opacity:.45}}

@media (prefers-reduced-motion:reduce){
.ani{opacity:1;transition:none}
.ani.on *{animation:none !important}
.jl-hero .jl-hero-bird,.jl-hero::before{animation:none;opacity:1}
.jl-hero::before{opacity:.45}
}

/* ==== セクション余白 トレース版 ==== */
/* 元サイト 1440幅の実測。内側の器は 1200px、上 80px 下 160px の余白。
   こちらは詰まっていて、全10セクションで元サイトより 2589px 低かった。 */
.jl-section,.jl-problem,.jl-values,.jl-combinations,.jl-contact-band{padding-top:80px;padding-bottom:160px}
.jl-hero{padding-top:0;padding-bottom:0}
.jl-section>*,.jl-problem>*,.jl-values>*,.jl-combinations>*{max-width:1200px;margin-left:auto;margin-right:auto}
.jl-heading{margin-bottom:64px}

/* ==== マウスストーカー トレース版 ==== */
/* 元サイトの実測値。通常 25px の塗りつぶし、リンク上で 64px の枠線のみ。色は rgba(68,176,222,*)。 */
#flStalker{position:fixed;top:0;left:0;z-index:9999;width:25px;height:25px;margin:-12.5px 0 0 -12.5px;
  border:1px solid rgba(68,176,222,0);border-radius:50%;background:rgba(68,176,222,.5);
  pointer-events:none;transition:width .3s ease-in,height .3s ease-in,margin .3s ease-in,background .3s ease-in,border-color .3s ease-in}
#flStalker.is-hover{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(68,176,222,0);border-color:rgba(68,176,222,.5)}
@media (hover:none),(pointer:coarse){#flStalker{display:none}}

/* ==== 出現演出 トレース最終版 ==== */
/* 元サイトを実測した結果、出現には 2 系統あった。
   (1) 標準  .fadein{opacity:.1; transition:all ease .7s} → .on.fadein{opacity:1}
       事業内容 / 実績 / こだわり / 流れ / 質問 の 5 セクションはこちら。
   (2) 特別  会社について と 選ばれる理由 の 2 セクションだけ、
       装飾 1.0s → 1.5s → 覆いが晴れて 2.0s → 本文 3.0s の段取り。
   先に全セクションへ (2) を当てていたのは誤りだったので、標準を (1) に戻す。 */
.ani{opacity:.1;transform:none;transition:all ease .7s}
.ani.on,.ani.is-visible{opacity:1;transform:none}

/* 標準セクションは中の要素を個別に遅らせない。節ごと 0.7 秒で出る。 */
.ani.on .jl-heading,
.ani.on .jl-heading + *,
.ani.on .jl-service-card,
.ani.on .jl-works-item,
.ani.on .jl-value-card,
.ani.on .jl-flow-step,
.ani.on .jl-combi-card,
.ani.on .jl-button{animation:none}

/* 特別扱いの 2 セクションだけ、元サイトと同じ段取りにする。 */
.jl-about.on .jl-en{animation:fl_fade 1.5s ease-in 1s both}
.jl-about.on h2{animation:fl_fade 1.5s ease-in 1.5s both}
.jl-about.on p,.jl-about.on .jl-button{animation:fl_fade 1.5s ease-in 2s both}
.jl-reasons.on .jl-heading{animation:fl_fade 1.5s ease-in 1s both}
.jl-reasons.on .jl-reason-item{animation:fl_fade 1.5s ease-in 2s both}

/* リンクの hover は元サイト実測で all 0.5s ease。 */
a{transition:all .5s ease}
/* 質問の開閉は元サイト実測で max-height 0.35s ease。 */
.jl-faq details{transition:max-height .35s ease}

/* ==== 翼のスイープ トレース ==== */
/* 元サイト top_com の実測（1440x1053）
     .top_com_ani01  x792 y248 w576 h557  → 左55% 上23.6% 幅40% 高52.9%
     .top_com_ani02  x432 y430 w576 h387  → 左30% 上40.8% 幅40% 高36.8%
   動きは opacity 0 →(40%)1 →(80%)0 →(100%)0 + display:none。
   2.0s ease-in、ani01 は 1.0s 遅れ、ani02 は 1.5s 遅れ。
   節が .on になってから翼が 2 枚続けて横切り、その後に本文が出る。 */
.jl-about,.jl-reasons{position:relative;overflow:hidden}
.jl-wing{position:absolute;pointer-events:none;opacity:0;z-index:4}
.jl-wing img{display:block;width:100%;height:auto}
.jl-wing--a1{left:55%;top:23.6%;width:40%}
.jl-wing--a2{left:30%;top:40.8%;width:40%}
.jl-about.on .jl-wing--a1,.jl-reasons.on .jl-wing--a1{animation:fl_wing 2s ease-in 1s both}
.jl-about.on .jl-wing--a2,.jl-reasons.on .jl-wing--a2{animation:fl_wing 2s ease-in 1.5s both}
@keyframes fl_wing{
  0%{opacity:0;display:block}
  40%{opacity:1;display:block}
  80%{opacity:0;display:block}
  100%{opacity:0;display:none}
}
@media (max-width:820px){
.jl-wing--a1{left:38%;top:18%;width:60%}
.jl-wing--a2{left:6%;top:36%;width:60%}
}
@media (prefers-reduced-motion:reduce){ .jl-wing{display:none} }

/* ==== 翼の位置 調整 ==== */
/* 節の高さがこちらと元サイトで違うため、% ではなく節の上端からの距離で置く。
   元サイトは節の上から 248px と 430px の位置に翼があった（節高 1053px）。
   こちらは節が低いので、上から 18% と 40%、かつ最大 260px / 430px で頭打ちにする。 */
.jl-wing--a1{left:52%;top:min(18%,200px);width:min(40%,560px)}
.jl-wing--a2{left:26%;top:min(38%,380px);width:min(40%,560px)}
@media (max-width:820px){
.jl-wing--a1{left:34%;top:min(14%,120px);width:min(62%,340px)}
.jl-wing--a2{left:4%;top:min(32%,240px);width:min(62%,340px)}
}

/* ==== 翼 スマホ 実測合わせ ==== */
/* 元サイト SP390 の実測（top_com 高さ1016）
     翼1 x215 y432 w156 → 左55.1% 上42.5% 幅40%
     翼2 x117 y482 w156 → 左30.0% 上47.4% 幅40%
   PC と同じ幅 40% のまま、縦位置だけ下がる。
   先に入れた 62% 幅は元サイトと違ったので直す。 */
@media (max-width:820px){
.jl-wing--a1{left:55.1%;top:42.5%;width:40%}
.jl-wing--a2{left:30%;top:47.4%;width:40%}
}

/* ==== セクションの画像と背景 トレース ==== */
/* 元サイトは各セクションに写真の背景と大きな鳥の画像が入る。
   こちらは白基調で画像がほぼ無く、別物になっていた。実測どおり移す。 */

/* 01 会社について … 左半分に鳥（元サイト top_com_pho02.png 720px = 幅の50%） */
.jl-about{position:relative;overflow:hidden;background:#fff}
.jl-about-photo{position:absolute;left:0;top:50%;width:50%;transform:translateY(-50%);z-index:0;pointer-events:none}
.jl-about-photo img{display:block;width:100%;height:auto}
.jl-about>*:not(.jl-about-photo):not(.jl-wing){position:relative;z-index:2}
.jl-about .jl-photo--office{display:none}

/* 04 選ばれる理由 … 右に鳥（元サイト top_how_pho02.png 720px） */
.jl-reasons{position:relative;overflow:hidden;background:#fff}
.jl-reasons-photo{position:absolute;right:0;top:50%;width:50%;transform:translateY(-50%);z-index:0;pointer-events:none}
.jl-reasons-photo img{display:block;width:100%;height:auto}
.jl-reasons>*:not(.jl-reasons-photo):not(.jl-wing){position:relative;z-index:2}

/* 帯 … 元サイト top_wor は写真背景 */
.jl-problem{background:#0b183e url('../images/jl_top_worbg02.jpg') center/cover no-repeat;position:relative}
.jl-problem::after{content:'';position:absolute;inset:0;background:rgba(11,24,62,.62);z-index:0}
.jl-problem>*{position:relative;z-index:1}

/* 02 事業内容 … 元サイト top_ser も写真背景 */
.jl-services{background:#0b183e url('../images/jl_top_serbg02.jpg') center/cover no-repeat;position:relative;color:#fff}
.jl-services::after{content:'';position:absolute;inset:0;background:rgba(11,24,62,.72);z-index:0}
.jl-services>*{position:relative;z-index:1}
.jl-services .jl-heading h2,.jl-services .jl-en,.jl-services .jl-heading span{color:#fff}
.jl-service-card{background:rgba(9,20,54,.86);color:#fff;border:1px solid rgba(255,255,255,.14)}
.jl-service-card h3,.jl-service-card small,.jl-service-card p{color:#fff}
.jl-service-grid{background:transparent;border:0;gap:14px}

/* 03 実績事例 … 元サイト top_work も写真背景 */
.jl-works{background:#0b183e url('../images/jl_top_workbg.jpg') center/cover no-repeat;position:relative;color:#fff}
.jl-works::after{content:'';position:absolute;inset:0;background:rgba(11,24,62,.74);z-index:0}
.jl-works>*{position:relative;z-index:1}
.jl-works .jl-heading h2,.jl-works .jl-en,.jl-works .jl-heading span{color:#fff}
.jl-works-list{border-top-color:rgba(255,255,255,.22)}
.jl-works-item{border-bottom-color:rgba(255,255,255,.22)}
.jl-works-item dt,.jl-works-item dd{color:#fff}

/* 鳥の群れの帯 … 元サイト top_bou01 高さ247px、画像3枚を重ねる */
.jl-birdband{position:relative;height:247px;padding:0;overflow:hidden}
.jl-birdband img{position:absolute;left:0;top:0;width:100%;height:auto}
.jl-birdband__l2{animation:fl_flock 9s ease-in-out infinite alternate}
.jl-birdband__l3{animation:fl_flock 13s ease-in-out infinite alternate-reverse}
@keyframes fl_flock{0%{transform:translateX(0)}100%{transform:translateX(-18px)}}

/* 05 流れ と 06 質問 … 元サイトは top_flowbg.png の波背景 */
.jl-flow,.jl-faq{background:#fff url('../images/jl_top_flowbg.png') center bottom/cover no-repeat}

@media (max-width:820px){
.jl-about-photo,.jl-reasons-photo{position:relative;left:auto;right:auto;top:auto;transform:none;width:100%;margin-bottom:24px}
.jl-birdband{height:120px}
.jl-service-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .jl-birdband img{animation:none} }

/* ==== 会社について / 選ばれる理由 の左右配置 ==== */
/* 元サイト top_com は 左半分 720px が鳥の写真、右半分 720px が文章。
   こちらは文章が左にあり、鳥がその裏に隠れていた。左右を組み直す。 */
.jl-about{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;padding:80px 0 160px}
.jl-about-photo{position:static;transform:none;width:100%;grid-column:1;z-index:0}
.jl-about-copy{grid-column:2;max-width:580px;margin:0 auto;background:transparent;padding:0 40px}
.jl-about>.jl-wing{position:absolute}

/* 選ばれる理由は逆で、文章が左・鳥が右（元サイト top_how と同じ） */
.jl-reasons{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;padding:80px 0 160px}
.jl-reasons-photo{position:static;transform:none;width:100%;grid-column:2;order:2;z-index:0}
.jl-reasons>.jl-heading{grid-column:1;max-width:580px;margin:0 auto;padding:0 40px}
.jl-reasons>.jl-reason-list,.jl-reasons>ol,.jl-reasons>ul{grid-column:1;max-width:580px;margin:0 auto;padding:0 40px}
.jl-reasons>.jl-wing{position:absolute}

@media (max-width:820px){
.jl-about,.jl-reasons{display:block;padding:64px 0 96px}
.jl-about-copy,.jl-reasons>.jl-heading,.jl-reasons>.jl-reason-list{max-width:none;padding:0 20px}
}

/* ==== 鳥の写真の大きさ 実測合わせ ==== */
/* 元サイト実測 … .phobox img は 720px 幅（画面の50%）、節の上から178px。
   こちらは .jl-section>* の max-width:1200px が効いて 600px に縮んでいた。 */
.jl-about-photo,.jl-reasons-photo{max-width:none;width:50vw;margin:0}
.jl-about-photo img,.jl-reasons-photo img{width:100%;height:auto}
.jl-about{padding-top:0;padding-bottom:0;min-height:1053px}
.jl-reasons{padding-top:0;padding-bottom:0;min-height:1053px}
@media (max-width:820px){
.jl-about-photo,.jl-reasons-photo{width:100%}
.jl-about,.jl-reasons{min-height:0}
}

/* ==== こだわりの写真 と 流れのイラスト ==== */
/* 元サイト top_con は写真3枚が横に並ぶ。top_flow は各段階に 305px のイラストが付く。 */
.jl-value-photo{margin:0 0 20px;overflow:hidden;border-radius:2px}
.jl-value-photo img{display:block;width:100%;height:220px;object-fit:cover}
.jl-flow-photo{margin:0 0 18px}
.jl-flow-photo img{display:block;width:100%;max-width:305px;height:auto;margin:0 auto}
@media (max-width:820px){
.jl-value-photo img{height:180px}
}

/* ==== FV を元サイトどおり白基調へ ==== */
/* 元サイトの FV は白基調。
   動画 top_bg_video.mov は .movie_outbox が z-index:-1 で、
   その上に #topfv の背景 topfvbg.jpg（不透明のほぼ白）が乗るため画面に出ていない。
   見えているのは backgroundEffect.png の世界地図を 45% で重ねたもの。
   こちらは動画を前面に出してしまい濃紺の雲になっていた。元サイトに合わせる。 */
.jl-hero{background:#f7fafc url('../images/topfvbg.jpg') center/cover no-repeat}
.jl-hero-movie{z-index:-1}
.jl-hero::before{z-index:0;opacity:0;animation:fl_map_in 2.5s ease-in .2s both}
.jl-hero-inner{z-index:1}
.jl-hero .jl-hero-bird{z-index:2}
.jl-hero-logo,.jl-hero h1,.jl-hero .jl-scroll{z-index:3;color:#171C61}
.jl-hero .jl-scroll i{background:#171C61}
.jl-hero-logo span{color:#5aa9d6}


/* ==== FV の動画を非表示 ==== */
/* 元サイトでは動画が不透明の白背景の裏にあり、画面に一切出ていない。
   こちらは z-index:-1 にしても .jl-hero が重なり文脈を作るため透けてしまう。
   見た目を元サイトに合わせるため、動画そのものを出さない。
   ファイルは assets/video/hero_bg.mov に残してあるので、必要なら戻せる。 */
.jl-hero-movie{display:none}

/* ==== 鳥の群れの帯 地色 ==== */
/* 元サイトの top_bou01_pho01〜03.png は白いシルエットの鳥。
   白い背景の上では見えないため、薄い空色の地を敷いて鳥が読めるようにする。
   3枚は鳥の数が違い、重ねると濃淡が出る（8羽 / 3羽 / 1羽）。 */
.jl-birdband{background:linear-gradient(180deg,#eaf2fb 0%,#dcebf8 100%)}
.jl-birdband__l1{opacity:.9}
.jl-birdband__l2{opacity:.75}
.jl-birdband__l3{opacity:.6}

/* ==== 悩みの節 イラスト ==== */
/* 元サイト top_wor は、人物と吹き出しが 1 枚のイラストになっている。
   実測 x36 y247 1368x526（節高1012）。写真背景の上に重ねる。 */
.jl-problem{min-height:1012px;display:flex;flex-direction:column;justify-content:center}
.jl-problem-art{position:relative;z-index:1;width:95%;max-width:1368px;margin:32px auto 0}
.jl-problem-art img{display:block;width:100%;height:auto}
.jl-problem-art__sp{display:none}
.jl-problem>*{position:relative;z-index:1}
@media (max-width:820px){
.jl-problem{min-height:0;padding:64px 0 80px}
.jl-problem-art__pc{display:none}
.jl-problem-art__sp{display:block;max-width:340px;margin:0 auto}
}

/* ==== 悩みの節 寸法の調整 ==== */
/* 先の指定で節が 2544px まで伸び、イラストが 780px に縮んでいた。
   先に入れた .jl-problem{padding:80/160} と max-width:1200px が重なっていたため。
   元サイト実測（節高1012 / イラスト1368x526）へ合わせ直す。 */
.jl-problem{min-height:1012px;height:auto;padding:60px 0;justify-content:center}
.jl-problem>*{max-width:none}
.jl-problem>.jl-heading,.jl-problem>h2,.jl-problem>p{max-width:1200px;margin-left:auto;margin-right:auto}
.jl-problem-art{width:95%;max-width:1368px;margin:28px auto 0}
.jl-problem-art__pc{width:100%;max-width:1368px}
@media (max-width:820px){
.jl-problem{min-height:0;padding:56px 0 72px}
}

/* ==== 悩みの節 イラスト幅 確定 ==== */
/* 親の内側の幅が 821px しかなく、95% が 780px に落ちていた。
   画面幅を基準にして 1368px（元サイト実測）を確保する。 */
.jl-problem .jl-problem-art{width:min(1368px,95vw);max-width:none}
.jl-problem .jl-problem-art__pc{width:100%;max-width:none}

/* ==== 悩みの節 スマホ用画像の出し分け 修正 ==== */
/* .jl-problem-art img{display:block} のほうが詳細度で勝ってしまい、
   スマホ用（640x1431）が PC でも表示され、節が 3960px まで伸びていた。 */
.jl-problem .jl-problem-art img.jl-problem-art__sp{display:none}
.jl-problem .jl-problem-art img.jl-problem-art__pc{display:block}
@media (max-width:820px){
.jl-problem .jl-problem-art img.jl-problem-art__pc{display:none}
.jl-problem .jl-problem-art img.jl-problem-art__sp{display:block;max-width:340px;margin:0 auto}
}

/* ==== デザイン再トレース v8（2026-08-18）====
   元サイトを実測したところ、全セクションが白または透明で、文字は #171C61 一色だった。
   こちらは 悩み / 事業内容 / 実績 の3つが紺地・白文字になっており、明暗が逆だった。
   ここで元サイトと同じ明るい面に戻す。 */

/* 本文の文字色。元サイトは全セクション rgb(23,28,97)。 */
:root{--jl-copy:#171c61}

/* --- 悩み：紺地をやめ白地に戻す --- */
.jl-problem{background:#fff;color:var(--jl-ink)}
.jl-problem::after{display:none}
.jl-problem .jl-en,.jl-problem h2,.jl-problem p{color:var(--jl-ink)}

/* --- 事業内容：地は白。カードだけ紺にする（元サイトの市松と同じ考え方） --- */
.jl-services{background:#fff;color:var(--jl-ink)}
.jl-services::after{display:none}
.jl-services .jl-heading h2,.jl-services .jl-en,.jl-services .jl-heading span{color:var(--jl-ink)}
.jl-services .jl-service-grid{gap:2px;background:#fff}
.jl-services .jl-service-card{background:#12305a url('../images/jl_top_serbg02.jpg') center/cover no-repeat;
  border:0;color:#fff;box-shadow:none;transition:all .5s ease}
.jl-services .jl-service-card::before{content:'';position:absolute;inset:0;background:rgba(15,38,74,.86);z-index:0}
.jl-services .jl-service-card>*{position:relative;z-index:1}
.jl-services .jl-service-card:hover{background-position:center 40%}
.jl-services .jl-service-card:hover::before{background:rgba(15,38,74,.7)}
.jl-services .jl-service-number,.jl-services .jl-service-card small,
.jl-services .jl-service-card h3,.jl-services .jl-service-card p,
.jl-services .jl-service-card b{color:#fff}
.jl-services .jl-button--center{border-color:var(--jl-ink);color:var(--jl-ink)}

/* --- 実績：白地。左に写真面、右に番号付きリスト（元サイトと同じ組み） --- */
.jl-works{position:relative;width:100%;max-width:none;padding:0;background:#fff;color:var(--jl-ink);overflow:hidden}
.jl-works::after{display:none}
.jl-works-photo{position:absolute;left:0;top:0;width:50.7%;height:100%;margin:0;z-index:0;
  clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
.jl-works-photo img{display:block;width:100%;height:100%;object-fit:cover}
.jl-works-body{position:relative;z-index:1;width:min(1200px,90%);margin:0 auto;padding:110px 0 140px;
  display:grid;grid-template-columns:1fr 1fr;gap:0 60px;align-items:center}
.jl-works .jl-heading{grid-column:1;padding-left:0;color:#fff}
.jl-works .jl-heading h2,.jl-works .jl-en,.jl-works .jl-heading span{color:#fff}
.jl-works .jl-works-list{grid-column:2;grid-row:1;border-top:0}
.jl-works .jl-works-item{border-bottom:1px solid rgba(23,28,97,.5);padding:16px 4px}
.jl-works .jl-works-item dt{color:var(--jl-ink);opacity:.75}
.jl-works .jl-works-item dd{color:var(--jl-ink)}
.jl-works .jl-button--center{grid-column:2;justify-self:start;margin-top:26px;border-color:var(--jl-ink);color:var(--jl-ink)}

/* --- 支援の組み合わせ：紺地をやめ、白地に枠線のカードへ --- */
.jl-combinations{background:#fff;color:var(--jl-ink)}
.jl-combinations .jl-heading--light .jl-en,.jl-combinations .jl-heading--light h2,
.jl-combinations .jl-heading--light span{color:var(--jl-ink)}
.jl-combinations .jl-combination-grid article{border:1px solid var(--jl-line);background:#fff;color:var(--jl-ink)}
.jl-combinations .jl-combination-grid article span,
.jl-combinations .jl-combination-grid article h3,
.jl-combinations .jl-combination-grid article p{color:var(--jl-ink)}

/* --- ご相談の流れ：4列横並びをやめ、元サイトと同じ4段の横長カードへ --- */
.jl-flow>ol{display:block;grid-template-columns:none}
.jl-flow li{display:grid;grid-template-columns:340px 1fr;align-items:center;gap:0 40px;
  min-height:0;margin:0 0 62px;padding:38px 46px 38px 24px;border:1px solid var(--jl-ink)}
.jl-flow li:last-child{margin-bottom:0;border-right:1px solid var(--jl-ink)}
.jl-flow .jl-flow-photo{grid-row:1 / span 3;grid-column:1;margin:0}
.jl-flow .jl-flow-photo img{max-width:305px}
.jl-flow li span{grid-column:2;font:26px/1 'Lato',sans-serif;color:var(--jl-ink)}
.jl-flow li h3{grid-column:2;margin:0 0 14px;font-size:22px}
.jl-flow li p{grid-column:2;line-height:2}

@media (max-width:900px){
  .jl-works-photo{width:100%;height:280px;clip-path:none;position:relative}
  .jl-works-body{grid-template-columns:1fr;padding:56px 0 72px;gap:0}
  .jl-works .jl-heading,.jl-works .jl-heading h2,.jl-works .jl-en,.jl-works .jl-heading span{color:var(--jl-ink)}
  .jl-works .jl-works-list,.jl-works .jl-button--center{grid-column:1}
  .jl-works .jl-works-list{grid-row:auto}
  .jl-flow li{grid-template-columns:1fr;gap:0;padding:28px 22px;margin-bottom:52px}
  .jl-flow .jl-flow-photo{grid-row:auto;grid-column:1;margin:0 0 16px}
  .jl-flow li span,.jl-flow li h3,.jl-flow li p{grid-column:1}
}

/* ==== デザイン再トレース v9（2026-08-18）====
   元サイトの見出しは、会社について と 実績事例 が左寄せ、
   選ばれる理由 / 大切にすること / 流れ / よくある質問 が中央寄せだった。
   こちらは全部左寄せ＋左の縦棒だったので、中央寄せの4つを合わせる。 */
.jl-reasons>.jl-heading,.jl-values>.jl-heading,.jl-combinations>.jl-heading,
.jl-flow>.jl-heading,.jl-faq>.jl-heading,.jl-news>.jl-heading{
  padding-left:0;border-left:0;text-align:center}
.jl-reasons>.jl-heading .jl-en,.jl-values>.jl-heading .jl-en,.jl-combinations>.jl-heading .jl-en,
.jl-flow>.jl-heading .jl-en,.jl-faq>.jl-heading .jl-en,.jl-news>.jl-heading .jl-en{justify-content:center}
.jl-flow>.jl-heading,.jl-faq>.jl-heading{margin-bottom:56px}

/* --- 実績：写真の右側が明るく、白文字が読めなくなっていたので暗い層を重ねる --- */
.jl-works-photo::after{position:absolute;inset:0;z-index:1;content:'';
  background:linear-gradient(100deg,rgba(9,20,48,.62) 0%,rgba(9,20,48,.5) 38%,rgba(9,20,48,.18) 72%,rgba(9,20,48,0) 100%)}
.jl-works-body{padding:132px 0 158px}

/* --- 流れ：波の背景がカードに重なって読みにくかったので、下側の帯に戻す --- */
.jl-flow{background:#fff}
.jl-faq{background:#fff url('../images/jl_top_flowbg.png') center bottom/100% auto no-repeat}
.jl-flow li{background:#fff}
/* 元サイトは「01 お問い合わせ」が横一列。こちらは番号が上に乗っていたので横並びに直す。 */
.jl-flow li{grid-template-columns:340px auto 1fr;grid-template-rows:auto auto;align-items:center}
.jl-flow .jl-flow-photo{grid-area:1 / 1 / 3 / 2}
.jl-flow li span{grid-area:1 / 2 / 2 / 3;align-self:end;font-size:28px;line-height:1}
.jl-flow li h3{grid-area:1 / 3 / 2 / 4;align-self:end;margin:0 0 0 16px;line-height:1}
.jl-flow li p{grid-area:2 / 2 / 3 / 4;margin:24px 0 0}

/* --- 事業内容：ボタンを中央へ --- */
.jl-services>.jl-button--center{display:block;width:max-content;margin-left:auto;margin-right:auto}

@media (max-width:900px){
  .jl-flow li{grid-template-columns:auto 1fr;grid-template-rows:auto auto auto}
  .jl-flow .jl-flow-photo{grid-area:1 / 1 / 2 / 3}
  .jl-flow li span{grid-area:2 / 1 / 3 / 2}
  .jl-flow li h3{grid-area:2 / 2 / 3 / 3}
  .jl-flow li p{grid-area:3 / 1 / 4 / 3}
  .jl-works-body{padding:0 0 72px}
}

/* ==== v10（2026-08-18）実績まわりの詰め ==== */
/* 写真の右側が白く飛んで、斜めの切り口が見えなくなっていた。全体に均一な紺の層をかける。 */
.jl-works-photo::after{background:linear-gradient(100deg,rgba(9,20,48,.66) 0%,rgba(9,20,48,.58) 45%,rgba(9,20,48,.46) 78%,rgba(9,20,48,.4) 100%)}
/* 元サイトの実績見出しには左の縦棒が無い。 */
.jl-works>.jl-works-body>.jl-heading{padding-left:0;border-left:0}

/* ==== v11（2026-08-18）見出しの縦棒と、流れの番号まわりの詰め ==== */
/* 縦棒は .jl-heading::before。中央寄せにした見出しからは消す。 */
.jl-reasons>.jl-heading::before,.jl-values>.jl-heading::before,.jl-combinations>.jl-heading::before,
.jl-flow>.jl-heading::before,.jl-faq>.jl-heading::before,.jl-news>.jl-heading::before,
.jl-works .jl-heading::before{display:none}
/* 元サイトは「01 お問い合わせ」が詰まっている。列の間隔で開きすぎていたので詰める。 */
.jl-flow li{column-gap:0}
.jl-flow li span,.jl-flow li p{padding-left:40px}
.jl-flow li h3{margin-left:14px}

/* ==== v12（2026-08-18）スマホ幅の詰め ====
   390px で実測したところ、元サイトのファーストビューは 844px（画面ちょうど1枚）だったが、
   こちらは 361px しかなく、開いた瞬間の印象がまるで違っていた。画面1枚に戻す。 */
@media (max-width:820px){
  .jl-hero{min-height:100svh;justify-content:center;padding:88px 20px 96px}
  .jl-hero-inner{display:flex;min-height:calc(100svh - 184px);flex-direction:column;justify-content:center}
  .jl-hero .jl-hero-bird{width:min(280px,64vw)}
  /* 索引ナビが 2 列 3 段で 276px も取っていた。元サイトはこの帯がスマホでは出ない。
     消すと導線が減るので 3 列 2 段にして高さを半分にする。 */
  .jl-index-nav{grid-template-columns:repeat(3,1fr)}
  .jl-index-nav a{padding:15px 4px}
  .jl-index-nav a:nth-child(even){border-right:1px solid #e3e6ec}
  .jl-index-nav a:nth-child(3n){border-right:0}
}

/* ==== v13（2026-08-18）選ばれる理由の幅と番号 ====
   元サイトの一覧は 幅655px、番号は 36px で項目の縦中央に置かれている。
   こちらは 幅480px、番号が見出しと同じ高さで小さく、右半分の空きが目立っていた。
   なお右半分が空いて見えるのは元サイトも同じ。白いカモメの写真（720x698）が
   白地に乗っているためで、こちらも同じ位置に同じ大きさで入っている。 */
.jl-reasons .jl-reason-list{width:min(655px,100%)}
.jl-reasons .jl-reason-list li{width:100%;grid-template-columns:78px 1fr;align-items:center}
.jl-reasons .jl-reason-list li span{font-size:36px;line-height:1}

/* ==== v14（2026-08-18）選ばれる理由：一覧と写真を重ねる ====
   元サイトは 一覧 x70〜725（幅655）、カモメ写真 x600〜1320 で、両者が重なっている。
   こちらは 2 列のグリッドで隣に並べていたため、一覧が 480px までしか広がらなかった。
   元サイトと同じく、写真を絶対配置にして重ねる。 */
.jl-reasons{display:block}
.jl-reasons .jl-reasons-photo{position:absolute;right:0;top:50%;width:50%;
  transform:translateY(-50%);grid-column:auto;order:0;z-index:0;margin-bottom:0}
.jl-reasons>.jl-heading,.jl-reasons .jl-reason-list{position:relative;z-index:1}
@media (max-width:900px){
  .jl-reasons .jl-reasons-photo{position:relative;right:auto;top:auto;transform:none;width:100%;margin-bottom:24px}
}
/* 写真の大きさを元サイトに合わせる（元 x600 幅720。50% だと 600px になってしまう） */
.jl-reasons .jl-reasons-photo{width:60%}
/* 一覧は左に寄せる（元サイトは x70。中央に寄っていると写真と噛み合わない） */
.jl-reasons .jl-reason-list{width:min(655px,100%);max-width:none;margin-left:0;margin-right:auto}
/* 見出しと一覧が接していたので間を空ける（display:block に変えた副作用） */
.jl-reasons>.jl-heading{margin-bottom:76px}

/* ==== v15（2026-08-19）元サイトの実物に合わせ直す ====
   昨夜「元サイトは全セクション白地」と判断したのは、こちらの測り方の誤りだった。
   ページ全体を1枚に撮る方法では background-attachment:fixed の背景が描画されず、白く抜ける。
   画面サイズで撮り直したところ、悩み と 事業内容 は写真を固定背景に敷いていた。
   v8 で白くした変更は元サイトから遠ざける方向だったので、ここで実物へ戻す。 */

/* --- 元サイトの動きの語彙をそのまま持ち込む --- */
.fadeinzoom{opacity:.1;transform:scale3d(.98,.98,.98);
  transition:opacity 1s linear, transform .5s linear .1s}
.on.fadeinzoom,.on .fadeinzoom{opacity:1;transform:scale3d(1,1,1)}

/* --- 悩み：写真を固定背景に敷く（元 top_worbg02.jpg / fixed / cover） --- */
.jl-problem{background:url('../images/jl_top_worbg02.jpg') center center/cover fixed no-repeat;color:var(--jl-ink)}
.jl-problem::after{display:none}
.jl-problem .jl-en,.jl-problem h2,.jl-problem p{color:var(--jl-ink)}
/* 元サイトは中の3ブロックが fadeinzoom。こちらも同じ動きにする */
.jl-problem .jl-problem-art,.jl-problem>div{opacity:.1;transform:scale3d(.98,.98,.98);
  transition:opacity 1s linear, transform .5s linear .1s}
.jl-problem.on .jl-problem-art,.jl-problem.on>div{opacity:1;transform:scale3d(1,1,1)}
.jl-problem.on>div{transition-delay:.15s,.25s}

/* --- 事業内容：写真を固定背景に敷き、9マスの市松にする --- */
.jl-services{background:url('../images/jl_top_serbg02.jpg') center center/cover fixed no-repeat;color:#fff}
.jl-services::after{display:none}
.jl-services .jl-heading h2,.jl-services .jl-en,.jl-services .jl-heading span{color:#fff}
.jl-services .jl-service-grid{gap:0;border:.5px solid #fff;background:transparent}
.jl-services .jl-service-card{border:1px solid #fff;background:transparent;color:#fff;
  box-shadow:none;transition:all .5s ease;overflow:hidden}
/* 元サイトは 1・4・5・8・9 が紺のカード、2・3・6・7 は透明で背景写真が透ける */
.jl-services .jl-service-card:nth-child(1),
.jl-services .jl-service-card:nth-child(4),
.jl-services .jl-service-card:nth-child(5),
.jl-services .jl-service-card:nth-child(8),
.jl-services .jl-service-card:nth-child(9){
  background:url('../images/jl_top_ser_listbg01.jpg') center center/cover no-repeat}
.jl-services .jl-service-card::before{display:none}
/* 番号の裏にカモメの影（元 80x78・不透明度 .6・奇数と偶数で絵柄違い） */
.jl-services .jl-service-number{position:relative;display:inline-block;z-index:1}
.jl-services .jl-service-number::before{position:absolute;top:50%;left:50%;z-index:-1;
  width:80px;height:78px;opacity:.6;background-size:cover;background-position:center;
  background-repeat:no-repeat;content:'';transform:translate(-50%,-50%)}
.jl-services .jl-service-card:nth-child(odd) .jl-service-number::before{
  background-image:url('../images/jl_top_ser_deco01.png')}
.jl-services .jl-service-card:nth-child(even) .jl-service-number::before{
  background-image:url('../images/jl_top_ser_deco02.png')}
.jl-services .jl-service-number,.jl-services .jl-service-card small,
.jl-services .jl-service-card h3,.jl-services .jl-service-card p,
.jl-services .jl-service-card b{color:#fff}
.jl-services .jl-service-card:hover{background-color:rgba(15,38,74,.55)}
.jl-services>.jl-button--center{border-color:#fff;color:#fff}

/* --- 実績：斜めの構図は背景画像に描き込まれている。別途の写真面は不要 --- */
.jl-works{background:url('../images/jl_top_workbg.jpg') center center/cover no-repeat}
.jl-works .jl-works-photo{display:none}

/* --- 鳥の帯：ここが一番外していた --- */
/* 元サイトは群れではなく、翼を広げた1羽。同じ絵を3枚重ね、上2枚が順に消えて下の1枚が現れる。
   こちらは「9秒と13秒で永久にふわふわ動く」という元サイトに無い動きを自作していた。 */
.jl-birdband{position:relative;height:247px;padding:0;overflow:hidden;background:#fff}
.jl-birdband img{position:absolute;left:0;top:0;width:100%;height:auto;opacity:1;animation:none}
.jl-birdband .jl-birdband__l1{position:relative;z-index:1}
.jl-birdband .jl-birdband__l2{z-index:2;transition:all ease 1.5s 1.5s}
.jl-birdband .jl-birdband__l3{z-index:3;transition:all ease 1.5s .5s}
.jl-birdband.on .jl-birdband__l2,.jl-birdband.on .jl-birdband__l3{opacity:0}

@media (max-width:900px){
  .jl-problem,.jl-services{background-attachment:scroll}
}

/* ==== v16（2026-08-19）背景を端まで伸ばす ====
   元サイトの 悩み / 事業内容 は画面の端から端まで背景が続き、中身だけ 1200px に収まる。
   こちらは節ごと 1200px だったため、背景写真も中央 1200px にしか出ていなかった。 */
.jl-services,.jl-problem{width:100%;max-width:none;margin-left:0;margin-right:0;
  padding-left:max(0px,calc((100vw - 1200px)/2));padding-right:max(0px,calc((100vw - 1200px)/2))}
.jl-services>*,.jl-problem>*{width:100%;max-width:1200px;margin-left:auto;margin-right:auto}
/* 元サイトの事業内容の見出しは中央寄せ・白 */
.jl-services>.jl-heading{padding-left:0;text-align:center}
.jl-services>.jl-heading::before{display:none}
.jl-services>.jl-heading .jl-en{justify-content:center}
@media (max-width:900px){
  .jl-services,.jl-problem{padding-left:7%;padding-right:7%}
}
/* 悩みのイラストだけは 1200px の枠から出す（元サイトは x36 幅1368 = ほぼ画面いっぱい） */
.jl-problem>.jl-problem-art{width:min(1368px,calc(100vw - 72px));max-width:none}
@media (max-width:900px){ .jl-problem>.jl-problem-art{width:100%} }
/* 悩みは元サイトでは中身も 1368px（左右 36px 余白）。1200px の枠には収めない。 */
.jl-problem{padding-left:36px;padding-right:36px}
.jl-problem>*{max-width:1368px}
.jl-problem>.jl-problem-art{width:100%;max-width:1368px}
@media (max-width:900px){ .jl-problem{padding-left:7%;padding-right:7%} }
/* 元サイトの縦位置に合わせる（イラスト y247・文章 y773。節高 1012）。
   中央寄せのままだと文章が背景写真の暗い側に乗って読めなくなる。 */
.jl-problem{justify-content:flex-start;padding-top:0;padding-bottom:0}
.jl-problem>.jl-problem-art{margin-top:247px}
.jl-problem>div{margin-top:0;padding-top:8px}
@media (max-width:900px){
  .jl-problem{padding-top:56px;padding-bottom:64px}
  .jl-problem>.jl-problem-art{margin-top:0}
}

/* ==== v17（2026-08-19）鳥の帯：穴の後ろに空を敷く ====
   元サイトの3枚の画像は「白い紙に鳥の形の穴が開いている」もので、
   画素を数えると 白 584394 / 透明 47286 / それ以外 0。鳥自体は描かれていない。
   こちらの複製が元サイトのファイルと同一であることは、赤地に並べて確認済み。
   元サイトでは穴から空が透けて鳥に見えるが、祖先要素はすべて透明で、
   その空をどの要素が出しているかは特定できなかった。
   見た目を合わせるため、元サイトの空の写真を帯の最背面に敷く。
   上2枚が順に消えて穴が増え、鳥が 1羽 → 3羽 → 7羽 と増えていく。 */
.jl-birdband::before{position:absolute;inset:0;z-index:0;content:'';
  background:url('../images/jl_top_serbg02.jpg') center top/cover no-repeat fixed}
.jl-birdband .jl-birdband__l1{display:block}
/* 空の写真の右側にタワーが写っており、鳥1羽の中に建物が出てしまっていた。
   雲だけが入るよう、写真の左上を大きく引き伸ばして使う。 */
.jl-birdband::before{background:url('../images/jl_top_serbg02.jpg') 12% 6%/260% auto no-repeat fixed}

/* ==== 2026-08-25 bounded trace: navigation, lower heading and footer only ==== */
body { background-color: transparent; }
.fl-site { position: relative; z-index: 1; background: #fff; }

/* Keep the 720px link row, but place it inside a real full-width white plate. */
.jl-index-nav-shell {
	position: relative;
	z-index: 1;
	width: 100%;
	background: #fff;
}

/* Jonathan lower-page heading. Scoped to the lower-page hero only. */
.fl-subpage { padding-top: 0; }
.fl-page-hero.submid_section,
#subfv.fl-page-hero.submid_section {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 160px 0;
	border: 0;
	background: transparent;
}
.fl-page-hero .innerbox,
#subfv.fl-page-hero .box {
	width: 1200px;
	max-width: 90%;
	margin: 0 auto;
	padding: 0;
	background: transparent;
}
.fl-page-hero .submidh1,
#subfv.fl-page-hero .submidh1 {
	margin: 0;
	padding: 0;
	color: #171c61;
	font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "MS PMincho", "MS Mincho", serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: normal;
	text-align: start;
}
.fl-page-hero .submidh1 .en_text,
#subfv.fl-page-hero .submidh1 .en_text {
	display: block;
	margin: 0 0 16px;
	color: #171c61;
	font-family: var(--jl-en);
	font-size: 72px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .2em;
}
.fl-page-hero .submidh1 .jp_text,
#subfv.fl-page-hero .submidh1 .jp_text {
	display: block;
	margin: 0;
	color: #171c61;
	font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "MS PMincho", "MS Mincho", serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 2px;
}

/* Jonathan footer structure, with Four Likes facts retained. */
.movie_outbox {
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background: #dcebf8;
	overflow: hidden;
	pointer-events: none;
}
.movie_outbox video#movie {
	display: block;
	width: auto;
	height: auto;
	min-width: 100vw;
	min-height: 100vh;
	max-width: none;
}
.site-footer {
	position: relative;
	z-index: 1;
	padding: 0;
	background: #1a385a;
	color: #fff;
}
.fl-footer-stage {
	display: grid;
	grid-template-columns: 70% 30%;
	grid-template-areas: "map company" "nav company" "keywords keywords";
	column-gap: 0;
	width: 1200px;
	max-width: 90%;
	margin: 0 auto;
	padding: 160px 0 24px;
}
.fl-footer-map { grid-area: map; height: 400px; background: rgba(255,255,255,.08); overflow: hidden; }
.fl-footer-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.fl-footer-company {
	grid-area: company;
	display: flex;
	align-self: stretch;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 0 48px 16.6667%;
	font-family: var(--jl-serif);
	font-size: 16px;
	line-height: 2;
}
.fl-footer-nav { grid-area: nav; display: grid; grid-template-columns: repeat(6,1fr); margin: 16px 0 0; }
.fl-footer-keywords { grid-area: keywords; margin: 58px auto 0; font-family: var(--jl-serif); font-size: 14px; line-height: 1.9; letter-spacing: .03em; text-align: center; }
.footer_deco { position: relative; z-index: 1; padding: 112px 0 0; overflow: hidden; }
.footer_deco::before { position: absolute; left: 0; top: 0; width: 100%; height: 112px; background: #1a385a; content: ""; }
.footer_deco span { position: relative; display: block; width: 1200px; max-width: 90%; margin: 0 auto; }
.footer_deco span::before,
.footer_deco span::after { position: absolute; top: 0; width: 100vw; height: 100%; background: #1a385a; content: ""; }
.footer_deco span::before { right: 100%; }
.footer_deco span::after { left: 100%; }
.footer_deco img { display: block; width: 100%; height: auto; }
body > #cop { position: relative; z-index: 1; padding: 48px 5%; background: #1a385a; color: #fff; font-size: 12px; letter-spacing: .04em; text-align: center; }

@media (max-width: 900px) {
	.fl-page-hero.submid_section,
	#subfv.fl-page-hero.submid_section { padding: 80px 0; }
	.fl-page-hero .submidh1,
	#subfv.fl-page-hero .submidh1 { font-size: 28.8px; line-height: 1.8; }
	.fl-page-hero .submidh1 .en_text,
	#subfv.fl-page-hero .submidh1 .en_text { margin-bottom: 12.8px; font-size: 56px; letter-spacing: .1em; }
	.fl-footer-stage {
		grid-template-columns: 1fr;
		grid-template-areas: "map" "nav" "company" "keywords";
		width: 1200px;
		max-width: 90%;
		padding: 160px 0 15px;
	}
	.fl-footer-map { height: 300px; }
	.fl-footer-nav { grid-template-columns: repeat(3,1fr); margin-top: 16px; }
	.fl-footer-company { margin-top: 0; padding: 32px 5% 0; }
	.fl-footer-keywords { margin-top: 20px; font-size: 12px; text-align: left; }
	.footer_deco { padding-top: 48px; }
	.footer_deco::before { height: 48px; }
	body > #cop { padding: 32px 5%; }
}

@media (prefers-reduced-motion: reduce) {
	.movie_outbox video#movie { display: none; }
}