/*
Theme Name: Hashimoto Holdings HD
Theme URI: https://hashi-moto.co.jp/hd
Author: Hashimoto Holdings Co., Ltd.
Description: 橋本ホールディングス株式会社 コーポレートサイト用オリジナルテーマ。単独インストール専用・追加プラグイン不要でカスタマイザーから本文・画像を編集できます。
Version: 1.0.0
License: All Rights Reserved
Text Domain: hashimoto-hd
*/

/* ==========================================================================
   Design tokens
   環境事業(資源循環)・物流・倉庫という素材から、深い杜(もり)の緑と
   再生金属を思わせる真鍮色を基調に、輪(circulation)を描く曲線をアクセントに使用。
   ========================================================================== */
:root{
  --ink:        #14201C;
  --primary:    #1F3D33;
  --primary-d:  #14261F;
  --accent:     #B98442;
  --accent-d:   #96692F;
  --line:       #9AA39C;
  --bg:         #EFF1EA;
  --surface:    #F7F8F4;
  --surface-2:  #E5E8DF;
  --white:      #FFFFFF;

  --font-head: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-serif: "Shippori Mincho", "Noto Serif JP", serif;

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.9;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; padding:0; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* 見出し・タイポグラフィ ------------------------------------------------ */
.eyebrow{
  display:inline-block;
  font-family:var(--font-head);
  font-size:0.8rem;
  letter-spacing:0.14em;
  color:var(--accent-d);
  border-left:2px solid var(--accent);
  padding-left:0.7em;
  margin-bottom:1.1em;
}
.section-title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(1.7rem, 2.6vw, 2.5rem);
  line-height:1.5;
  letter-spacing:0.02em;
  color:var(--ink);
}
.lead{
  font-size:clamp(1.02rem, 1.2vw, 1.15rem);
  line-height:2;
  color:var(--ink);
  max-width:640px;
}
.body-text{
  color:#31413B;
  max-width:640px;
}
.body-text p + p{ margin-top:1.3em; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px var(--gutter);
  color:var(--white);
  background:linear-gradient(to bottom, rgba(20,32,28,0.55), rgba(20,32,28,0));
  transition:background 0.35s ease, padding 0.35s ease, color 0.35s ease;
}
.site-header.is-scrolled{
  background:var(--surface);
  color:var(--ink);
  padding-top:14px; padding-bottom:14px;
  box-shadow:0 1px 0 var(--line);
}
.site-header .brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand-logo{
  height:34px;
  width:auto;
  filter:brightness(0) invert(1);
  transition:filter 0.35s ease;
}
.site-header.is-scrolled .brand-logo{ filter:none; }
.brand-text{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.site-header .brand small{
  font-size:0.62rem;
  font-weight:400;
  letter-spacing:0.12em;
  opacity:0.75;
}
.main-nav{ display:flex; align-items:center; gap:2.4rem; }
.main-nav a{
  font-size:0.9rem;
  position:relative;
  padding-bottom:4px;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:currentColor;
  transition:right 0.25s ease;
}
.main-nav a:hover::after, .main-nav a:focus-visible::after{ right:0; }

.nav-toggle{
  display:none;
  width:34px; height:24px;
  position:relative;
  background:none; border:0; padding:0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span{ top:11px; }
.nav-toggle span::before{ top:-8px; }
.nav-toggle span::after{ top:8px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-8px) rotate(-45deg); }

@media (max-width: 880px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw, 340px);
    background:var(--primary-d); color:var(--white);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.6rem; padding:0 40px;
    transform:translateX(100%); transition:transform .35s ease;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ font-size:1.05rem; }
  .nav-toggle{ display:block; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  color:var(--white);
  background:var(--primary-d);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(15,24,20,0.92) 0%, rgba(15,24,20,0.35) 52%, rgba(15,24,20,0.25) 100%);
}
.hero__arc{
  position:absolute; right:-10%; top:-15%;
  width:60vw; max-width:720px; opacity:0.5;
  color:var(--accent);
}
.hero__content{
  position:relative;
  width:100%;
  padding:0 var(--gutter) clamp(56px, 9vw, 108px);
}
.hero__kicker{
  font-family:var(--font-serif);
  font-size:1rem;
  color:var(--accent);
  margin-bottom:1.4rem;
  opacity:0;
  animation:fadeUp .9s ease .15s forwards;
}
.hero h1{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(2.1rem, 5.4vw, 4rem);
  line-height:1.45;
  max-width:16em;
  opacity:0;
  animation:fadeUp .9s ease .3s forwards;
}
.hero__sub{
  margin-top:1.6rem;
  max-width:520px;
  font-size:clamp(0.95rem, 1.1vw, 1.05rem);
  line-height:2;
  color:#DDE3DA;
  opacity:0;
  animation:fadeUp .9s ease .5s forwards;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero__scroll{
  position:absolute; right:var(--gutter); bottom:28px;
  writing-mode:vertical-rl;
  font-size:0.75rem; letter-spacing:0.2em;
  display:flex; align-items:center; gap:10px;
  color:rgba(255,255,255,0.75);
}
.hero__scroll::after{
  content:""; width:1px; height:46px; background:currentColor;
}

/* ==========================================================================
   Sections generic
   ========================================================================== */
.section{ padding:clamp(72px, 10vw, 132px) 0; }
.section--surface{ background:var(--surface); }
.section--primary{ background:var(--primary-d); color:var(--white); }
.section--primary .eyebrow{ color:var(--accent); }
.section--primary .section-title{ color:var(--white); }

/* About ------------------------------------------------------------------ */
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap:clamp(32px, 6vw, 96px);
  align-items:start;
}
.about-grid .section-title{ position:sticky; top:120px; }
@media (max-width: 880px){
  .about-grid{ grid-template-columns:1fr; }
  .about-grid .section-title{ position:static; }
}

/* Message ------------------------------------------------------------------ */
.message{
  display:grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap:clamp(28px, 6vw, 88px);
  align-items:center;
}
.message__photo{
  position:relative;
  aspect-ratio: 4/5;
  overflow:hidden;
}
.message__photo img{ width:100%; height:100%; object-fit:cover; object-position:22% 12%; }
.message__quote{
  font-family:var(--font-serif);
  font-size:clamp(1.15rem, 1.7vw, 1.55rem);
  line-height:2.05;
  color:var(--white);
}
.message__quote p + p{ margin-top:1.4em; }
.message__sign{
  margin-top:2.4rem;
  display:flex; flex-direction:column; gap:2px;
  font-family:var(--font-head);
}
.message__sign .role{ font-size:0.8rem; color:var(--accent); letter-spacing:0.08em; }
.message__sign .name{ font-size:1.15rem; font-weight:700; }
@media (max-width: 880px){ .message{ grid-template-columns:1fr; } }

/* Business ----------------------------------------------------------------- */
.business-list{ display:flex; flex-direction:column; gap:clamp(56px, 7vw, 88px); }
.business-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:clamp(28px, 5vw, 72px);
  align-items:center;
}
.business-row:nth-child(even) .business-row__media{ order:2; }
.business-row__media{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.business-row__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.business-row__media:hover img{ transform:scale(1.045); }
.business-row__mark{
  width:44px; height:44px;
  border:1px solid var(--accent);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); margin-bottom:1.4rem;
}
.business-row__mark svg{ width:20px; height:20px; }
.business-row h3{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(1.3rem, 1.9vw, 1.7rem);
  margin-bottom:0.9rem;
}
.business-row .tags{ display:flex; flex-wrap:wrap; gap:0.6rem 1rem; margin-top:1.3rem; }
.business-row .tags span{
  font-size:0.82rem; color:var(--primary);
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
}
@media (max-width: 780px){
  .business-row{ grid-template-columns:1fr; }
  .business-row:nth-child(even) .business-row__media{ order:0; }
}

/* Group companies ----------------------------------------------------------- */
.group-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.group-card{
  background:var(--surface);
  padding:clamp(28px, 3vw, 40px) clamp(22px, 3vw, 30px);
  display:flex; flex-direction:column; gap:1.1rem;
  transition:background .25s ease;
}
.group-card:hover{ background:var(--white); }
.group-card img{ height:44px; width:auto; object-fit:contain; object-position:left; mix-blend-mode:multiply; }
.group-card h3{ font-family:var(--font-head); font-weight:700; font-size:1.02rem; }
.group-card p{ font-size:0.88rem; color:#4B5A53; line-height:1.85; flex:1; }
.group-card .visit{
  font-size:0.82rem; color:var(--primary);
  border-top:1px solid var(--line); padding-top:0.9rem;
  display:flex; align-items:center; justify-content:space-between;
}
.group-card .visit svg{ width:14px; height:14px; transition:transform .25s ease; }
.group-card:hover .visit svg{ transform:translateX(4px); }

/* Warehouse ------------------------------------------------------------------ */
.warehouse{
  position:relative;
  display:grid; grid-template-columns:1.2fr 1fr;
  min-height:640px;
}
.warehouse__media{ position:relative; }
.warehouse__media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.warehouse__panel{
  background:var(--primary-d); color:var(--white);
  padding:clamp(40px,5vw,72px) var(--gutter);
  display:flex; flex-direction:column; justify-content:center; gap:2.2rem;
}
.feature-cols{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.feature-cols h4{ font-family:var(--font-head); font-size:0.82rem; letter-spacing:0.08em; color:var(--accent); margin-bottom:0.9rem; }
.feature-cols ul{ display:flex; flex-direction:column; gap:0.6rem; font-size:0.92rem; color:#E4E8DE; }
.feature-cols li{ padding-left:1.1em; position:relative; }
.feature-cols li::before{ content:""; position:absolute; left:0; top:0.65em; width:5px; height:5px; background:var(--accent); border-radius:50%; }
@media (max-width: 880px){
  .warehouse{ grid-template-columns:1fr; }
  .warehouse__media{ min-height:320px; }
}

.warehouse-gallery{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2px;
  background:var(--ink);
}
.warehouse-gallery figure{ position:relative; margin:0; aspect-ratio:4/3; overflow:hidden; }
.warehouse-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.warehouse-gallery figure:hover img{ transform:scale(1.06); }
.warehouse-gallery figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px;
  font-size:0.76rem; color:var(--white);
  background:linear-gradient(to top, rgba(15,24,20,0.85), rgba(15,24,20,0));
}
@media (max-width: 780px){
  .warehouse-gallery{ grid-template-columns:repeat(2, 1fr); }
}

/* Access / Company table ------------------------------------------------------- */
.access-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); }
.access-card{ border-top:2px solid var(--accent); padding-top:1.6rem; }
.access-card h3{ font-family:var(--font-head); font-weight:700; font-size:1.15rem; margin-bottom:0.9rem; }
.access-card address{ font-style:normal; color:#31413B; line-height:1.95; }
.access-card .tel{ margin-top:0.5rem; display:block; color:var(--primary); font-weight:700; }
.access-card .map{ margin-top:1.2rem; aspect-ratio:16/10; background:var(--surface-2); overflow:hidden; }
.access-card .map iframe{ width:100%; height:100%; border:0; filter:grayscale(0.15); }
@media (max-width: 780px){ .access-grid{ grid-template-columns:1fr; } }

.company-table{ width:100%; border-collapse:collapse; margin-top:2rem; }
.company-table tr{ border-top:1px solid var(--line); }
.company-table tr:last-child{ border-bottom:1px solid var(--line); }
.company-table th, .company-table td{
  text-align:left; padding:1.1rem 1rem;
  font-size:0.92rem; vertical-align:top;
}
.company-table th{
  width:9.5em; font-family:var(--font-head); font-weight:700; color:var(--primary);
}

/* Footer ---------------------------------------------------------------------- */
.site-footer{ background:var(--ink); color:#C9D1CA; padding:clamp(48px,6vw,72px) 0 28px; }
.footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.4rem; padding-bottom:2.6rem; border-bottom:1px solid rgba(255,255,255,0.12); }
.footer-brand{ display:flex; flex-direction:column; gap:14px; max-width:320px; }
.footer-logo{ height:64px; width:auto; filter:brightness(0) invert(1); opacity:0.92; }
.footer-brand p{ font-family:var(--font-head); font-weight:700; color:var(--white); font-size:1.02rem; line-height:1.9; margin:0; }
.footer-links{ display:flex; flex-wrap:wrap; gap:2.4rem 3rem; }
.footer-links h5{ font-size:0.78rem; letter-spacing:0.08em; color:var(--accent); margin-bottom:1rem; font-family:var(--font-head); }
.footer-links ul{ display:flex; flex-direction:column; gap:0.6rem; font-size:0.88rem; }
.footer-links a:hover{ color:var(--white); }
.footer-bottom{ padding-top:1.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:0.78rem; color:#889188; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--primary); color:var(--white); padding:12px 18px; z-index:1000;
}
.skip-link:focus{ left:12px; top:12px; }

a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }