/* ==========================================================
   北輪商事 / HOKURIN SHOJI CO., LTD. - style.css
   ========================================================== */

:root{
  --black: #0a0a0a;
  --near-black: #141414;
  --dark-gray: #262626;
  --mid-gray: #6b6b6b;
  --line-gray: #d9d9d9;
  --light-gray: #f4f4f4;
  --white: #ffffff;
  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 132px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color:var(--near-black);
  background:var(--white);
  line-height:1.9;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }

.en{ font-family:"Oswald", sans-serif; }

/* ---------------- Loader ---------------- */
.loader{
  position:fixed; inset:0; background:var(--black);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.done{ opacity:0; visibility:hidden; }
.loader-logo{
  font-family:"Oswald", sans-serif;
  font-size:14px;
  letter-spacing:.5em;
  color:var(--white);
  padding-left:.5em;
  position:relative;
}
.loader-logo::after{
  content:"";
  position:absolute; left:0; bottom:-14px;
  height:1px; width:0; background:var(--white);
  animation:loadbar 1.1s var(--ease) forwards .1s;
}
@keyframes loadbar{ to{ width:100%; } }

/* ---------------- Header ---------------- */
.site-header{
  position:fixed; top:0; left:0; width:100%;
  height:var(--header-h);
  z-index:500;
  display:flex; align-items:center;
  color:var(--white);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  box-shadow:0 1px 0 var(--line-gray);
  color:var(--near-black);
}
.site-header .brand-logo{ filter:invert(1) brightness(1.8); transition:filter .4s var(--ease); }
.site-header.scrolled .brand-logo{ filter:none; }
.site-header .nav-toggle span{ background:var(--white); transition:background .4s var(--ease), transform .3s var(--ease), opacity .3s var(--ease); }
.site-header.scrolled .nav-toggle span{ background:var(--near-black); }
.header-inner{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand-logo{ height:104px; width:auto; transition:height .3s var(--ease); }
.site-header.scrolled .brand-logo{ height:76px; }

.main-nav{ display:flex; align-items:center; gap:44px; }
.main-nav a,
.main-nav .nav-item{
  font-family:"Oswald", sans-serif;
  font-size:13px;
  letter-spacing:.18em;
  position:relative;
  padding-bottom:6px;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:currentColor;
  transition:width .35s var(--ease);
}
.main-nav a:hover::after{ width:100%; }

.main-nav .nav-item.soon{
  display:flex;
  align-items:center;
  gap:10px;
  opacity:.55;
  cursor:default;
}
.soon-badge{
  font-family:"Oswald", sans-serif;
  font-size:9px;
  letter-spacing:.05em;
  border:1px solid currentColor;
  border-radius:20px;
  padding:3px 8px;
  white-space:nowrap;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:32px; height:32px;
  background:none; border:none;
  z-index:600;
}
.nav-toggle span{
  display:block; width:100%; height:1px;
  background:var(--near-black);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--black);
  overflow:hidden;
}
.hero-graphic{
  position:absolute; inset:0;
  opacity:.55;
}
.wheel{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
}
.wheel::before{
  content:"";
  position:absolute; inset:14%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
}
.wheel::after{
  content:"";
  position:absolute; inset:34%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
}
.wheel-1{
  width:900px; height:900px;
  right:-320px; top:-260px;
  animation:spin 90s linear infinite;
}
.wheel-2{
  width:560px; height:560px;
  left:-220px; bottom:-260px;
  animation:spin 70s linear infinite reverse;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero-lines{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 90px);
}

.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  color:var(--white);
  padding:0 24px;
}
.hero-kicker{
  font-family:"Oswald", sans-serif;
  font-size:12px;
  letter-spacing:.35em;
  color:rgba(255,255,255,.6);
  margin-bottom:26px;
  opacity:0;
  animation:fadeUp .9s var(--ease) forwards .3s;
}
.hero-title{
  font-size:clamp(40px, 7vw, 88px);
  font-weight:700;
  letter-spacing:.06em;
  margin-bottom:26px;
  opacity:0;
  animation:fadeUp 1s var(--ease) forwards .5s;
}
.hero-sub{
  font-size:15px;
  font-weight:300;
  letter-spacing:.06em;
  color:rgba(255,255,255,.75);
  margin-bottom:64px;
  opacity:0;
  animation:fadeUp 1s var(--ease) forwards .7s;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.hero-scroll{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.7);
  font-family:"Oswald", sans-serif;
  font-size:11px;
  letter-spacing:.3em;
  opacity:0;
  animation:fadeUp 1s var(--ease) forwards .9s;
}
.hero-scroll i{
  width:1px; height:46px;
  background:rgba(255,255,255,.4);
  position:relative;
  overflow:hidden;
}
.hero-scroll i::after{
  content:"";
  position:absolute; left:0; top:-100%;
  width:100%; height:100%;
  background:var(--white);
  animation:scrollLine 2s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{ top:-100%; }
  60%{ top:100%; }
  100%{ top:100%; }
}

/* ---------------- Section common ---------------- */
.section-inner{
  max-width:1160px;
  margin:0 auto;
  padding:140px 32px;
}
.section-kicker{
  font-family:"Oswald", sans-serif;
  font-size:12px;
  letter-spacing:.35em;
  color:var(--mid-gray);
  margin-bottom:16px;
}
.section-title{
  font-size:clamp(26px, 3.4vw, 36px);
  font-weight:500;
  letter-spacing:.08em;
  margin-bottom:64px;
  position:relative;
  padding-bottom:26px;
}
.section-title::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:48px; height:2px;
  background:var(--near-black);
}
.section-kicker.light{ color:rgba(255,255,255,.5); }
.section-title.light{ color:var(--white); }
.section-title.light::after{ background:var(--white); }

/* reveal on scroll */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .wheel, .hero-kicker, .hero-title, .hero-sub, .hero-scroll, .loader-logo::after{ animation:none !important; opacity:1 !important; }
}

/* ---------------- About ---------------- */
.about{ background:var(--white); }
.about-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:80px;
  align-items:start;
}
.about-text p{ margin-bottom:24px; font-size:15px; color:#333; }
.about-figures{
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid var(--line-gray);
}
.figure{
  display:flex;
  align-items:center;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--line-gray);
}
.figure-num{
  font-family:"Oswald", sans-serif;
  font-size:26px;
  color:var(--mid-gray);
  min-width:44px;
}
.figure-label{
  font-size:14px;
  letter-spacing:.04em;
}

/* ---------------- Service ---------------- */
.service{ background:var(--light-gray); }
.service-list{ display:flex; flex-direction:column; }
.service-item{
  display:grid;
  grid-template-columns:110px 1fr 60px;
  align-items:center;
  gap:32px;
  padding:46px 0;
  border-top:1px solid var(--line-gray);
  position:relative;
  transition:padding-left .4s var(--ease);
}
.service-list .service-item:last-child{ border-bottom:1px solid var(--line-gray); }
.service-item:hover{ padding-left:14px; }
.service-num{
  font-family:"Oswald", sans-serif;
  font-size:44px;
  font-weight:300;
  color:var(--dark-gray);
  opacity:.35;
}
.service-body h3{
  font-size:19px;
  font-weight:500;
  letter-spacing:.04em;
  margin-bottom:14px;
}
.service-body p{
  font-size:14px;
  color:#444;
  max-width:640px;
}
.service-mark{
  justify-self:end;
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--near-black);
  position:relative;
}
.service-mark::before,
.service-mark::after{
  content:"";
  position:absolute;
  background:var(--near-black);
  transition:transform .4s var(--ease);
}
.service-mark::before{ left:50%; top:26%; bottom:26%; width:1px; transform:translateX(-50%); }
.service-mark::after{ top:50%; left:26%; right:26%; height:1px; transform:translateY(-50%); }
.service-item:hover .service-mark::before{ transform:translateX(-50%) rotate(90deg) scale(0); }

/* ---------------- Company ---------------- */
.company{ background:var(--white); }
.company-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
.company-table{
  width:100%;
  border-collapse:collapse;
  border-top:1px solid var(--line-gray);
}
.company-table th,
.company-table td{
  text-align:left;
  padding:24px 16px;
  border-bottom:1px solid var(--line-gray);
  font-weight:400;
  font-size:14.5px;
  vertical-align:top;
}
.company-table th{
  width:140px;
  color:var(--mid-gray);
  font-family:"Oswald", sans-serif;
  font-size:12px;
  letter-spacing:.12em;
  font-weight:400;
  padding-top:26px;
}
.company-table td a{ border-bottom:1px solid var(--near-black); }
.company-map{
  width:100%;
  aspect-ratio:4/3;
  background:var(--light-gray);
  filter:grayscale(1) contrast(1.05);
}
.company-map iframe{ width:100%; height:100%; border:0; }

/* ---------------- Contact ---------------- */
.contact{ background:var(--black); color:var(--white); }
.contact-lead{
  color:rgba(255,255,255,.65);
  font-size:14.5px;
  margin-bottom:56px;
  max-width:560px;
}
.contact-form{ max-width:640px; }
.form-row{ margin-bottom:30px; }
.form-row label{
  display:block;
  font-size:13px;
  letter-spacing:.05em;
  margin-bottom:12px;
  color:rgba(255,255,255,.85);
}
.form-row label span{
  font-size:11px;
  color:#999;
  margin-left:8px;
}
.form-row input,
.form-row textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.3);
  padding:10px 4px;
  color:var(--white);
  font-family:inherit;
  font-size:14px;
  resize:vertical;
  transition:border-color .3s var(--ease);
}
.form-row input:focus,
.form-row textarea:focus{
  outline:none;
  border-bottom-color:var(--white);
}
.submit-btn{
  margin-top:12px;
  background:transparent;
  border:1px solid rgba(255,255,255,.5);
  color:var(--white);
  padding:16px 52px;
  font-family:"Oswald", sans-serif;
  font-size:12px;
  letter-spacing:.3em;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.submit-btn:hover{ background:var(--white); color:var(--black); }
.form-note{
  margin-top:20px;
  font-size:12px;
  color:rgba(255,255,255,.4);
}

/* ---------------- Footer ---------------- */
.site-footer{
  background:var(--black);
  color:rgba(255,255,255,.6);
  padding:64px 24px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}
.footer-logo{
  height:104px;
  filter:invert(1) brightness(1.6);
  opacity:.9;
}
.page-top{
  font-family:"Oswald", sans-serif;
  font-size:11px;
  letter-spacing:.3em;
  color:rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:4px;
}
.copyright{
  font-family:"Oswald", sans-serif;
  font-size:10.5px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.35);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px){
  .about-grid, .company-wrap{ grid-template-columns:1fr; gap:48px; }
  .service-item{ grid-template-columns:60px 1fr; }
  .service-mark{ display:none; }
}

@media (max-width: 720px){
  .main-nav{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(80vw, 320px);
    background:var(--black);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:36px;
    padding:0 48px;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    z-index:550;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav{ align-items:flex-start; }
  .main-nav a,
  .main-nav .nav-item{ color:var(--white); font-size:14px; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .section-inner{ padding:100px 24px; }
  .hero-title{ font-size:12vw; }
}