/* ================================
   Root variables & Global reset
================================ */
:root {
   --content-width: 1600px;
   --section-gap: 190px;
   --hero-gap-extra: 240px;
 
   --color-text: #252525;
   --color-gray-bg: #efefef;
   --color-label-bg: #666;
   --color-label-text: #ffffff;
 }
 
 /* Reset --------------------------------------------------------- */
 * { margin: 0; padding: 0; box-sizing: border-box; }
 html { scroll-behavior: smooth; }
 body {
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: 300;
   line-height: 1.8;
   color: var(--color-text);
 }
 .en { font-family: 'Inter', sans-serif; font-weight: 200; }
 .jp { font-family: 'Noto Sans JP', sans-serif; font-weight: 200; }
 
 /* ================================
    Layout
 ================================ */
 .container { max-width: var(--content-width); margin-inline: auto; padding-inline: 90px; width: 100%; }
 .section   { padding-bottom: var(--section-gap); }
 
 /* ================================
    Header / Navigation
 ================================ */
 .site-header { position: sticky; top: 0; z-index: 1000; }
 .nav-list   { display:flex; gap:50px; list-style:none; font-size:14px; padding-block:40px; }
 
 .nav-list a {
   position: relative;                 /* underline animation 用 */
   text-decoration:none;
   color:inherit;
   letter-spacing:.1em;
   transition:opacity .25s ease;
 }
 
 /* 下線アニメーション */
 .nav-list a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -6px;                       /* 少し下にずらす */
   width: 100%;
   height: 1px;
   background: currentColor;
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s ease;
 }
 
 .nav-list a:hover   { opacity:.6; }
 .nav-list a:hover::after { transform: scaleX(1); }
 
 /* ================================
    Hero
 ================================ */
 .hero { text-align:center; padding: 200px 0 var(--hero-gap-extra); }
 .hero-logo   { width:150px; height:auto; }
 .hero-title  { margin-top:24px; font-size:20px; letter-spacing:.2em; }
 .hero-tagline{ margin-top:48px; font-size:34px; letter-spacing:.26em; }
 
 /* ================================
    Section Titles
 ================================ */
 .section-title{ font-size:50px; letter-spacing:.1em; font-weight:200; text-transform:capitalize; margin-bottom:-15px; }
 .section-sub { font-size:24px; margin-bottom:60px; }
 .divider     { display:inline-block; width:50px; height:2px; background:#d9d9d9; margin-block:24px; }
 .catch-copy  { font-size:32px; letter-spacing:.1em; }
 .description { max-width:560px; margin-inline:auto; font-size:18px; }
 .philosophy-content { text-align:center; }
 
 /* ================================
    Business
 ================================ */
 .business-list { display:flex; flex-direction:column; gap:8px; list-style:none; margin:0; padding:0; }
 .business-item { background:var(--color-gray-bg); padding:50px 40px; font-size:18px; border-radius:4px; }
 .business-item p { font-size:16px; }
 .label        { display:inline-block; background:var(--color-label-bg); color:var(--color-label-text); padding:4px 12px; border-radius:2px; margin-bottom:20px; font-size:20px; }
 
 /* ================================
    Company
 ================================ */
 .company-table { display:grid; grid-template-columns:160px 1fr; column-gap:0; font-size:16px; }
 .company-table.jp dt { padding-block:20px; padding-right:45px; font-weight:300; border-bottom:1px dotted #d9d9d9; }
 .company-table.jp dd { padding-block:20px; font-weight:300; border-bottom:1px dotted #d9d9d9; grid-column:2/-1; }
 
 /* ================================
    Contact
 ================================ */
 .contact { text-align:center; }
 /* タイトル/サブタイトルだけ左揃えに戻す */
 .contact .section-title,
 .contact .section-sub { text-align:left; }
 
 .mail-button{ display:inline-flex; align-items:center; gap:8px; border:1px solid #d9d9d9; padding:28px 100px; font-size:16px; text-decoration:none; color:var(--color-text); transition:background .25s,color .25s; margin-inline:auto; }
 .mail-button:hover { background:var(--color-text); color:#fff; }
 .arrow      { font-size:14px; }
 .tel        { margin-top:40px; font-size:16px; }
 
 /* ================================
    Footer
 ================================ */
 .site-footer { text-align:center; padding-block:80px 40px; font-size:11px; letter-spacing:.1em; color:#666; }
 
 /* ================================
    Responsive
 ================================ */
 @media (max-width:1024px){
   :root { --section-gap:140px; --hero-gap-extra:160px; }
   .container{ padding-inline:40px; }
   .hero-title{ font-size:18px; }
   .hero-tagline{ font-size:28px; }
   .section-title{ font-size:36px; }
   .catch-copy{ font-size:24px; }
 }
 @media (max-width:600px){
   /* Container padding */
   .container{ padding-inline:20px; }
 
   /* Navigation: wrap & center */
   .nav-list{ flex-wrap:wrap; gap:16px; justify-content:center; padding-block:20px; }
 
   /* Hero adjustments */
   .hero { padding: 120px 0 var(--hero-gap-extra); }
   .hero-logo { width:100px; }
   .hero-tagline { font-size:21px; margin-top:32px; }
 
   /* Section title hierarchy */
   .section-title{ font-size:34px; }
   .section-sub { font-size:18px; margin-bottom:40px; }
 
   /* Business cards */
   .business-item { padding:32px 24px; }
   .label        { font-size:14px; margin-bottom:12px; }
   .business-item p { font-size:14px; line-height:1.6; }
 
   /* Company table: single column */
   .company-table { grid-template-columns:1fr; }
   .company-table.jp dt { padding-block:12px; padding-right:0; }
   .company-table.jp dd { padding-block:12px; }
 
   /* Mail button full width */
   .mail-button{ width:100%; justify-content:center; padding:20px 24px; gap:4px; }
 
   .tel{ text-align:center; }
 }