@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Sans+JP:wght@300;400;500;600&family=Noto+Serif+JP:wght@300;400&display=swap');

/* v3: faithful implementation of the supplied COMPANY / 会社案内 mockup. */
.site-header--outline{background:#fff!important;color:#111!important;border-bottom:1px solid #e5e7ea!important}
.site-header--outline .site-header__inner{max-width:1440px;min-height:69px;padding:9px 24px;gap:30px}
.site-header--outline .site-brand{width:205px;display:flex;flex-direction:column;gap:2px}
.site-header--outline .site-brand img{display:block;width:178px;height:auto;filter:invert(1)}
.site-header--outline .site-brand span{font:400 7px/1.2 'Noto Sans JP',sans-serif;letter-spacing:.15em;color:#222}
.site-header--outline .site-nav{display:flex;align-items:stretch;gap:27px;margin-left:auto}
.site-header--outline .site-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:7px 0 9px;color:#111!important;text-decoration:none}
.site-header--outline .site-nav a b{font:500 8px/1 'Inter',Arial,sans-serif;letter-spacing:.24em}
.site-header--outline .site-nav a small{font:400 7px/1 'Noto Sans JP',sans-serif;letter-spacing:.08em;color:#555;white-space:nowrap}
.site-header--outline .site-nav a.is-current:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:#111}
.site-header--outline .site-actions{display:flex;align-items:center;gap:7px;margin-left:4px}
.site-header--outline .site-tel{display:flex;align-items:center;gap:8px;margin-right:4px;color:#111!important;text-decoration:none}
.site-header--outline .site-tel__icon{font:400 18px/1 Arial,sans-serif;color:#111;transform:translateY(-1px)}
.site-header--outline .site-tel strong{display:block;font:500 11px/1.1 'Inter',Arial,sans-serif;letter-spacing:.05em;color:#111}
.site-header--outline .site-tel small{display:block;margin-top:4px;font:400 7px/1 'Inter',Arial,sans-serif;letter-spacing:.04em;color:#555}
.site-header--outline .btn{min-height:40px;padding:0 16px;font:500 8px/1 'Noto Sans JP',sans-serif;letter-spacing:.08em;text-decoration:none}
.site-header--outline .btn span{margin-left:9px;font:400 13px/1 Arial,sans-serif}
.site-header--outline .btn--dark{background:#101419;color:#fff!important;border:1px solid #101419}
.site-header--outline .btn--light{background:#fff;color:#111!important;border:1px solid #8d9297}
.site-header--outline .menu-toggle span{background:#111}

.ro-outline{background:#fff;color:#101319;font-family:'Noto Sans JP','Yu Gothic',Meiryo,sans-serif;overflow:hidden}
.ro-outline *{box-sizing:border-box}
.ro-wrap{width:min(calc(100% - 96px),1180px);margin:0 auto}

/* HERO */
.ro-hero{height:300px;position:relative;overflow:hidden;background:#020508;color:#fff}
.ro-hero__sea,.ro-hero__arc,.ro-hero__veil{position:absolute;inset:0;width:100%;height:100%}
.ro-hero__sea{object-fit:cover;object-position:center 56%}
.ro-hero__arc{object-fit:cover;object-position:center 48%;mix-blend-mode:screen;opacity:.92}
.ro-hero__veil{background:linear-gradient(90deg,rgba(0,0,0,.60) 0%,rgba(0,0,0,.20) 58%,rgba(0,0,0,.12) 100%)}
.ro-hero__inner{height:100%;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}
.ro-hero__copy{padding-top:2px}
.ro-eyebrow{margin:0 0 13px;font:500 9px/1 'Inter',Arial,sans-serif;letter-spacing:.38em}
.ro-rule{display:block;width:22px;height:1px;background:rgba(255,255,255,.82);margin:0 0 15px}
.ro-rule--short{margin:17px 0 12px}
.ro-hero h1{margin:0;font:300 51px/.92 'Inter',Arial,sans-serif;letter-spacing:.08em}
.ro-hero__jp{margin:9px 0 0;font:300 20px/1.2 'Noto Sans JP',sans-serif;letter-spacing:.22em}
.ro-hero__micro{margin:0;font:500 6px/1.85 'Inter',Arial,sans-serif;letter-spacing:.32em;color:rgba(255,255,255,.85)}
.ro-hero__side{margin:77px 10px 0 0;text-align:left}
.ro-hero__side p{margin:0;font:300 17px/1.75 'Noto Serif JP',serif;letter-spacing:.15em}
.ro-hero__side span{display:block;margin-top:11px;font:500 6px/1 'Inter',Arial,sans-serif;letter-spacing:.38em;color:rgba(255,255,255,.78)}

/* SECTION COMMON */
.ro-section{border-bottom:1px solid #e0e3e6}
.ro-side-label strong{display:block;font:300 24px/1 'Inter',Arial,sans-serif}
.ro-side-label>span{display:block;margin-top:12px;font:500 7px/1 'Inter',Arial,sans-serif;letter-spacing:.34em;color:#5c6268}
.ro-side-label>b{display:block;margin-top:8px;font:400 10px/1 'Noto Sans JP',sans-serif;letter-spacing:.13em}
.ro-side-label i{display:block;width:22px;height:1px;background:#252b31;margin:21px 0 17px}
.ro-side-label small{display:block;font:500 6px/2.25 'Inter',Arial,sans-serif;letter-spacing:.27em;color:#737980}
.ro-side-label p{margin:25px 0 0;font:400 12px/1.85 'Noto Serif JP',serif;letter-spacing:.08em}

/* MESSAGE */
.ro-message{height:342px;padding:0}
.ro-message-grid{height:100%;display:grid;grid-template-columns:170px 1fr 52%;position:relative}
.ro-message .ro-side-label{padding-top:31px}
.ro-message-copy{position:relative;z-index:2;padding:52px 24px 0 32px}
.ro-message-copy h2{margin:0 0 20px;font:300 32px/1.42 'Noto Sans JP',sans-serif;letter-spacing:.11em}
.ro-message-copy>p{margin:0;font:400 9px/2.02 'Noto Sans JP',sans-serif;letter-spacing:.045em}
.ro-signature{display:grid;grid-template-columns:auto auto;gap:0 12px;align-items:end;margin-top:18px}
.ro-signature span{font:400 8px/1 'Noto Sans JP',sans-serif;color:#555}
.ro-signature strong{font:500 14px/1 'Noto Sans JP',sans-serif;letter-spacing:.09em}
.ro-signature small{grid-column:1/-1;margin-top:7px;font:500 5.5px/1 'Inter',Arial,sans-serif;letter-spacing:.32em;color:#777}
.ro-message-photo{position:absolute;right:0;top:0;width:52%;height:100%;overflow:hidden}
.ro-message-photo:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.65) 7%,rgba(255,255,255,0) 28%)}
.ro-message-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.ro-message-photo span{position:absolute;z-index:2;right:22px;top:27px;color:#405361;font:300 18px/1.18 'Noto Serif JP',serif;font-style:italic;text-align:left;transform:rotate(-7deg)}

/* PROFILE */
.ro-profile{height:326px;padding:34px 0 0}
.ro-profile-grid{display:grid;grid-template-columns:170px 1fr;gap:32px}
.ro-profile-main{min-width:0}
.ro-stats{display:grid;grid-template-columns:repeat(3,1fr);height:91px;border-bottom:1px solid #dfe2e5}
.ro-stats>div{padding:1px 30px 0;border-left:1px solid #cfd4d9}
.ro-stats>div:first-child{padding-left:0;border-left:0}
.ro-stats strong{display:block;white-space:nowrap;font:300 32px/1 'Inter',Arial,sans-serif;letter-spacing:.03em}
.ro-stats span{display:block;margin-top:10px;font:500 6px/1 'Inter',Arial,sans-serif;letter-spacing:.33em;color:#555d64}
.ro-stats small{display:block;margin-top:6px;font:400 8px/1 'Noto Sans JP',sans-serif;color:#565d63}
.ro-company-columns{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;padding-top:0}
.ro-company-columns dl{display:grid;grid-template-columns:128px 1fr;min-height:27px;margin:0;padding:6px 0;border-bottom:1px solid #dfe2e5}
.ro-company-columns dt{font:500 7px/1.55 'Noto Sans JP',sans-serif;color:#666d73;white-space:nowrap}
.ro-company-columns dd{margin:0;font:400 8px/1.55 'Noto Sans JP',sans-serif;letter-spacing:.025em;color:#1f252b}

/* LOCATION */
.ro-location{height:267px;border-bottom:0;padding:0}
.ro-location-grid{height:100%;display:grid;grid-template-columns:170px 1fr;gap:32px}
.ro-location .ro-side-label{padding-top:30px}
.ro-location-main{display:grid;grid-template-columns:260px 1fr;gap:0;min-width:0}
.ro-location-copy{padding-top:37px}
.ro-location-copy h2{margin:0;font:300 34px/1.2 'Inter',Arial,sans-serif;letter-spacing:.045em}
.ro-rule--dark{background:#444;margin:13px 0 11px}
.ro-location-copy>p{margin:0;font:400 8px/1.75 'Noto Sans JP',sans-serif;letter-spacing:.04em}
.ro-map-button{display:inline-flex;align-items:center;justify-content:space-between;min-width:132px;margin-top:13px;padding:9px 12px;border:1px solid #4d5359;color:#111;text-decoration:none;font:500 7px/1 'Inter',Arial,sans-serif;letter-spacing:.15em}
.ro-map-button span{font:400 13px/1 Arial,sans-serif}
.ro-map{height:267px;position:relative;overflow:hidden}
.ro-map img{width:100%;height:100%;object-fit:cover;display:block;opacity:.83}
.ro-map:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.36),rgba(255,255,255,0) 35%);pointer-events:none}
.ro-map-tag,.ro-station-tag{position:absolute;z-index:2;background:#1d2329;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.10);font:500 6px/1.45 'Inter',Arial,sans-serif;letter-spacing:.14em;padding:7px 10px}
.ro-map-tag{right:14%;top:25%}
.ro-map-tag:before{content:"";position:absolute;left:-11px;top:13px;width:10px;height:10px;border-radius:50%;background:#1d2329}
.ro-map-tag small{font:400 7px/1.45 'Noto Sans JP',sans-serif;letter-spacing:.06em}
.ro-station-tag{left:52%;bottom:16%}

/* FOOTER */
.site-footer--outline{position:relative;background:#060b10!important;color:#fff!important;padding:25px 24px 0!important}
.site-footer--outline:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#19d5ff,#6f38ff,#ff2f86,#ffb300,#00e3a0,#1fd8ff)}
.site-footer--outline .site-footer__inner{max-width:1440px;display:grid;grid-template-columns:205px 1fr 292px;gap:35px;align-items:start}
.site-footer--outline .footer-brand img{width:145px;height:auto;filter:none}
.site-footer--outline .footer-company{margin:4px 0 17px;font:400 7px/1 'Noto Sans JP',sans-serif;letter-spacing:.14em;opacity:.82}
.site-footer--outline .footer-tag{margin:0 0 11px;font:400 11px/1.8 'Noto Serif JP',serif;letter-spacing:.08em}
.site-footer--outline .footer-en{margin:0;font:500 5px/1.9 'Inter',Arial,sans-serif;letter-spacing:.30em;opacity:.55}
.site-footer--outline .footer-links{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:17px}
.site-footer--outline .footer-links p{margin:0 0 8px;font:500 6px/1 'Inter',Arial,sans-serif;letter-spacing:.25em;opacity:.82}
.site-footer--outline .footer-links a{display:block;margin:0 0 3px;color:rgba(255,255,255,.70);text-decoration:none;font:400 6px/1.75 'Noto Sans JP',sans-serif;white-space:nowrap}
.site-footer--outline .footer-contact{border-left:1px solid rgba(255,255,255,.18);padding-left:21px}
.site-footer--outline .footer-contact-row{display:flex;gap:10px;margin:0 0 8px;font:400 8px/1.5 'Noto Sans JP',sans-serif;color:rgba(255,255,255,.82)}
.site-footer--outline .footer-contact-row>b{width:10px;font-size:10px;line-height:1;color:#fff}
.site-footer--outline .footer-contact-row span{display:block}
.site-footer--outline .footer-contact-row small{display:block;font-size:6px;color:rgba(255,255,255,.55)}
.site-footer--outline .footer-phone{color:#fff;text-decoration:none;font:400 10px/1.1 'Inter',Arial,sans-serif;letter-spacing:.05em}
.site-footer--outline .footer-cta{display:flex;gap:8px;margin-top:10px}
.site-footer--outline .footer-cta .btn{display:inline-flex;align-items:center;justify-content:space-between;min-height:35px;padding:0 11px;min-width:124px;text-decoration:none;font:500 7px/1 'Noto Sans JP',sans-serif}
.site-footer--outline .btn span{font:400 13px/1 Arial,sans-serif}
.site-footer--outline .btn--white{background:#fff;color:#111!important}
.site-footer--outline .btn--outline{border:1px solid rgba(255,255,255,.72);color:#fff!important}
.site-footer--outline .site-footer__bottom{max-width:1440px;margin:18px auto 0;padding:9px 0 13px;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;font:400 5.5px/1 'Inter',Arial,sans-serif;letter-spacing:.16em;color:rgba(255,255,255,.68)}
.site-footer--outline .site-footer__bottom a{color:inherit;text-decoration:none}

.mobile-cta{display:none}

@media(max-width:1100px){
 .site-header--outline .site-nav{gap:18px}
 .site-header--outline .site-tel{display:none}
 .ro-wrap{width:calc(100% - 64px)}
 .ro-message-grid,.ro-location-grid{grid-template-columns:145px 1fr}
 .ro-profile-grid{grid-template-columns:145px 1fr}
 .ro-company-columns{column-gap:28px}
 .ro-company-columns dl{grid-template-columns:112px 1fr}
 .site-footer--outline .site-footer__inner{grid-template-columns:180px 1fr 250px;gap:24px}
}

@media(max-width:820px){
 .site-header--outline .site-header__inner{min-height:64px;padding:9px 18px}
 .site-header--outline .site-brand{width:165px}
 .site-header--outline .site-brand img{width:150px}
 .site-header--outline .site-brand span{font-size:6px}
 .site-header--outline .site-nav,.site-header--outline .site-actions{display:none}
 .site-header--outline .menu-toggle{display:flex;margin-left:auto}
 .ro-wrap{width:calc(100% - 36px)}
 .ro-hero{height:400px}
 .ro-hero__inner{align-items:flex-end;padding-bottom:42px}
 .ro-hero__side{display:none}
 .ro-hero h1{font-size:47px}
 .ro-hero__jp{font-size:19px}
 .ro-message,.ro-profile,.ro-location{height:auto}
 .ro-message-grid,.ro-location-grid,.ro-profile-grid{display:block;height:auto}
 .ro-side-label{padding-top:30px!important;margin-bottom:25px}
 .ro-message-copy{padding:0 0 30px}
 .ro-message-copy h2{font-size:30px}
 .ro-message-copy>p{font-size:9px}
 .ro-message-photo{position:relative;width:100%;height:280px}
 .ro-message-photo span{font-size:17px}
 .ro-profile{padding-bottom:35px}
 .ro-stats{height:auto}
 .ro-stats>div{padding:15px 10px}
 .ro-stats strong{font-size:25px}
 .ro-company-columns{display:block;padding-top:15px}
 .ro-company-columns dl{grid-template-columns:120px 1fr}
 .ro-location-main{display:block}
 .ro-location-copy{padding:0 0 25px}
 .ro-map{height:250px}
 .site-footer--outline{padding:34px 18px 0!important}
 .site-footer--outline .site-footer__inner{display:block}
 .site-footer--outline .footer-brand{margin-bottom:28px}
 .site-footer--outline .footer-links{grid-template-columns:repeat(2,1fr);gap:19px 12px}
 .site-footer--outline .footer-contact{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding:20px 0 0;margin-top:25px}
 .site-footer--outline .site-footer__bottom{display:block;margin-top:22px}
 .site-footer--outline .site-footer__bottom span{display:block;margin-top:6px}
 .mobile-cta{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:9999;grid-template-columns:1fr 1.5fr 1.5fr;background:#090d12}
 .mobile-cta a{padding:14px 4px;color:#fff;text-align:center;text-decoration:none;font:500 10px/1 'Noto Sans JP',sans-serif;border-left:1px solid rgba(255,255,255,.15)}
}
