/* ==========================================================================
   Luvina corporate site
   Fluid, mobile-first responsive build.
   Typography and spacing scale continuously with the viewport via clamp()
   (tuned between a 375px and a 1920px reference width) so there is no
   hard "PC design" / "SP design" jump — only page STRUCTURE (columns,
   nav visibility, image crops) changes at the 768px breakpoint.
   ========================================================================== */

:root{
  --navy:        #000E2F;
  --navy-deep:   #000a1c;
  --navy-text:   #1c3b6b;
  --navy-text-2: #33517d;
  --gold:        #c2a065;
  --gold-soft:   #b69154;
  --bg-light:    #f6f6f6;
  --white:       #ffffff;
  --text-body:   #4a4a4a;
  --serif: "Noto Serif JP", serif;
  --sans:  "Noto Sans JP", sans-serif;

  /* ---- fluid type scale (clamp: mobile-min, fluid-preferred, desktop-max) ---- */
  --fs-header-logo-text:  clamp(13px, 10.330px + 0.712vw, 24px);
  --fs-header-nav:        20px;
  --fs-header-contact-btn:clamp(13px, 11.301px + 0.453vw, 20px);
  --fs-header-contact-icon:clamp(18px, 16.058px + 0.518vw, 26px);
  --fs-hero-title:        clamp(29px, 14.194px + 3.948vw, 90px);
  --fs-hero-lead:         clamp(0.813rem, 0.426rem + 1.93vw, 1.875rem);
  --fs-hero-desc:         clamp(0.75rem, 0.477rem + 1.36vw, 1.5rem);
  --fs-num:               clamp(48px, 28.097px + 5.307vw, 130px);
  --fs-head-title:        clamp(26px, 14.835px + 2.977vw, 72px);
  --fs-head-jp:           clamp(13px, 10.330px + 0.712vw, 24px);
  --fs-about-heading:     clamp(23px, 0.216rem + 4.71vw, 3.75rem);
  --fs-about-desc:        clamp(0.875rem, 0.447rem + 1.57vw, 1.625rem);
  --fs-contact-heading:   clamp(25px, 18.447px + 1.748vw, 52px);
  --fs-contact-desc:      clamp(16px, 14.058px + 0.518vw, 24px);
  --fs-service-lead:      clamp(23px, 0.216rem + 4.71vw, 3.75rem);
  --fs-card-num:          clamp(2.25rem, 1.432rem + 4.09vw, 4.5rem);
  --fs-card-title:        clamp(28px, 22.602px + 0.906vw, 40px);
  --fs-card-quote:        clamp(17px, 15.544px + 0.388vw, 23px);
  --fs-card-desc:         clamp(12px, 13.272px + 0.194vw, 17px);
  --fs-card-list:         clamp(13px, 12.272px + 0.194vw, 16px);
  --fs-table:             clamp(14px, 12.786px + 0.324vw, 19px);
  --fs-label:             clamp(13px, 12.029px + 0.259vw, 17px);
  --fs-badge:             clamp(11px, 10.272px + 0.194vw, 14px);
  --fs-input:             clamp(15px, 14.757px + 0.065vw, 16px);
  --fs-submit-btn:        clamp(15px, 13.786px + 0.324vw, 20px);
  --fs-form-success:      clamp(13px, 12.515px + 0.129vw, 15px);
  --fs-footer-tagline:    clamp(14px, 12.058px + 0.518vw, 22px);
  --fs-footer-address:    clamp(13px, 11.544px + 0.388vw, 19px);
  --fs-footer-copyright:  clamp(12px, 11.029px + 0.259vw, 16px);
  --fs-footer-totop-icon: clamp(16px, 14.544px + 0.388vw, 22px);

  /* ---- fluid spacing scale ---- */
  --sp-side:        clamp(3%, -5.971px + 6.926vw, 127px);
  --sp-section-y-lg: clamp(56px, 35.612px + 5.437vw, 140px);
  --sp-section-y-md: clamp(40px, 25.437px + 3.883vw, 100px);
  --sp-gap-xl: clamp(28px, 15.379px + 3.366vw, 80px);
  --sp-gap-lg: clamp(20px, 12.718px + 1.942vw, 50px);
  --sp-gap-md: clamp(14px, 10.602px + 0.906vw, 28px);
  --sp-gap-sm: clamp(8px, 6.058px + 0.518vw, 16px);
  --sp-line-w: clamp(140px, 106.748px + 8.867vw, 277px);
  --sp-header-h: clamp(64px, 52.592px + 3.042vw, 111px);
  --sp-card-pad: clamp(10px, 3.689px + 1.683vw, 36px);
  --sp-card-gap: clamp(20px, 14.660px + 1.424vw, 42px);
  --sp-logo-w: clamp(90px, 73.738px + 4.337vw, 157px);
  --sp-footer-logo-w: clamp(100px, 82.767px + 4.595vw, 171px);
  --sp-totop-size: clamp(48px, 38.534px + 2.524vw, 87px);
  --sp-btn-h: clamp(52px, 47.146px + 1.294vw, 72px);
  --sp-form-pad: clamp(24px, 16.476px + 2.006vw, 55px);
  --sp-photo-h: clamp(320px, 215.631px + 27.832vw, 750px);
}

.sp-only{ display:block; }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--serif);
  color:#222;
  line-height:1.7;
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }

.section-head{ display:flex; align-items:center; gap:var(--sp-gap-sm); flex-wrap:wrap; }
.section-head__num{
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--fs-num);
  line-height:0.8;
  color:var(--navy-text);
  opacity:.9;
}
.section-head__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:var(--fs-head-title);
  color:var(--navy-text);
  letter-spacing:.05em;
  max-width:60%;
}
.section-head__jp{
  display:block;
  font-size:var(--fs-head-jp);
  margin-top:.35em;
  letter-spacing:.1em;
  font-weight:500;
}
.section-head--light .section-head__num,
.section-head--light .section-head__title{ color:var(--white); }

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:sticky; top:0; left:0; width:100%; z-index:100;
  background:var(--navy);
}
.header__inner{
  max-width:1920px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--sp-header-h);
  padding-left:clamp(20px, 4.5vw, 127px);
}
.header__logo{
  display:flex; align-items:center; gap:clamp(10px, 1.45vw, 28px);
  min-width:0;
}
.header__logo-mark{ width:var(--sp-logo-w); flex:none; }
.header__logo-divider{
  width:1.5px; height:clamp(32px, 2.97vw, 57px); background:var(--gold);
  flex:none;
}
.header__logo-text{
  font-family:var(--serif); font-weight:500;
  font-size:var(--fs-header-logo-text); color:var(--gold); letter-spacing:.05em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.header__nav{ display:none; }
.header__nav ul{ display:flex; gap:clamp(20px, 4.4vw, 85px); }
.header__nav a{
  font-family:var(--serif); font-weight:500;
  font-size:var(--fs-header-nav); color:var(--white);
  letter-spacing:.075em; white-space:nowrap;
  transition:opacity .2s;
}
.header__nav a:hover{ opacity:.6; }
.header__contact-btn{
  height:100%; display:flex; align-items:center; justify-content:center; gap:clamp(6px, 0.68vw, 13px);
  background:linear-gradient(180deg, #B78E4A 0%, #CBAD77 100%); color:var(--white);
  padding:0 clamp(16px, 2.5vw, 48px); margin-left:clamp(10px, 2.9vw, 56px);
  font-family:var(--serif); font-weight:500;
  font-size:var(--fs-header-contact-btn); letter-spacing:.075em; white-space:nowrap;
  transition:filter .2s; flex:0 0 auto;
}
.header__contact-btn:hover{ filter:brightness(1.08); }
.header__contact-icon{ width:var(--fs-header-contact-icon); flex:none; }

.subnav{ background:#0a1e3d; border-top:1px solid rgba(255,255,255,.08); }
.subnav ul{ display:flex; justify-content:space-around; }
.subnav a{
  display:block; padding:clamp(14px,2.29vw,20px) 0; text-align:center;
  font-family:var(--serif); font-weight:500; color:var(--white);
  font-size:clamp(14px,1.83vw,16px); letter-spacing:.05em;
}
.subnav li{ flex:1; text-align:center; position:relative; }
.subnav li:not(:last-child)::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:clamp(18px,2.75vw,24px); background:rgba(255,255,255,.25);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; width:100%;
  min-height:clamp(350px, 41.5vw, 1020px);
  display:flex; align-items:stretch;
  overflow:hidden;
  background:var(--navy);
}
.hero__bg{
  position:absolute; inset:0;
  background-image:url("../img/hero-bg-sp.jpg");
  background-size:cover; background-position:center;
}
.hero__gradient{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,10,25,.15) 0%, rgba(0,10,25,.55) 60%, rgba(0,10,25,.92) 100%);
}
.hero__inner{
  position:relative; z-index:2;
  max-width:1920px; margin:0 auto; width:100%;
  padding:40px 0 40px 20px;
  display:flex; flex-direction:column;
}
.hero__title{
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-hero-title);
  color:var(--white);
  letter-spacing:.08em;
  line-height:1.4;
}
.hero__line{
  display:block; width:var(--sp-line-w); height:1px;
  background:var(--gold); margin:clamp(18px,1.6vw,30px) 0;
}
.hero__lead{
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-hero-lead); color:var(--white); white-space:nowrap;
  letter-spacing:.1em; margin-top:auto; margin-bottom:clamp(16px,1.5vw,28px);
}
.hero__desc{
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-hero-desc); color:var(--white);
  letter-spacing:.08em; line-height:1.85;
}

/* ==========================================================================
   About
   ========================================================================== */
.about{
  position:relative;
  background:var(--bg-light);
  padding:var(--sp-section-y-md) 0 var(--sp-section-y-lg);
  background-image:
    url("../img/about-bg-sp.png");
  background-repeat:no-repeat, no-repeat;
  background-size:100% 100%, 100% auto;
  background-position:top;
  position:relative; z-index:1;
  padding-bottom:0;

}
.about .section-head{ max-width:1920px; margin:0 auto; padding:0 var(--sp-side); }
.about__body{
  max-width:1920px; margin:0 auto;
  padding:clamp(30px,3.6vw,70px) 0 0;
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:stretch;
  gap:var(--sp-gap-lg);
}
.about__text{ min-width:0; padding:0 var(--sp-side); }
.about__heading{
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-about-heading); color:var(--navy-text);
  /* letter-spacing:.02em; */
  white-space:nowrap;
  line-height:1.5;
}
.about__line{
  display:block; width:var(--sp-line-w); height:3px;
  background:var(--gold-soft); margin:clamp(18px,1.8vw,34px) 0;
}
.about__desc{
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-about-desc); color:var(--navy-text);
  letter-spacing:.03em; line-height:1.6;
}

/* ==========================================================================
   Service
   ========================================================================== */
.service{
  position:relative;
    background-image:url("../img/service-bg-sp.png");
  background-size:cover; background-position:center;
  padding:var(--sp-section-y-md) var(--sp-side) var(--sp-section-y-lg);
}
.service .section-head{ margin-bottom:var(--sp-gap-md); }
.service__lead{
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-service-lead); color:var(--white);
  letter-spacing:.03em; line-height:1.6; margin-bottom:var(--sp-gap-xl);
  text-align:center;
}
.service__cards{
  display:grid; grid-template-columns:1fr;
  gap:var(--sp-card-gap);
  max-width:1920px; margin:0 auto;
}
.service-card{
  border:1px solid rgba(198,166,109,.45);
  padding:var(--sp-card-pad);
  position:relative;
}
.service-card__num{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:var(--fs-card-num); color:var(--gold-soft); margin-bottom:var(--sp-gap-md);
  line-height:1;
}
.service-card__title{
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-card-title); color:var(--gold);
  line-height:1.3; margin-bottom:var(--sp-gap-md);
  /* white-space:nowrap; overflow:hidden; text-overflow:ellipsis; */
}
.service-card__quote{
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-card-quote); color:var(--white);
  letter-spacing:.03em; line-height:1.65; margin-bottom:var(--sp-gap-lg);
}
.service-card__desc{
  font-size:var(--fs-card-desc); color:#dfe3ea;
  letter-spacing:.02em; line-height:1.85; margin-bottom:var(--sp-gap-md);
}
.service-card__list{ display:flex; flex-direction:column; gap:var(--sp-gap-sm);}
.service-card__list li{
  position:relative;
  /* list-style:disc; */
  font-size:var(--fs-card-list); color:var(--gold); letter-spacing:.02em; line-height:1.5;
}

/* ==========================================================================
   Company
   ========================================================================== */
.company{ background:var(--white); padding:var(--sp-section-y-md) 0 var(--sp-section-y-lg); }
.company .section-head{ max-width:1920px; margin:0 auto; padding:0 var(--sp-side) var(--sp-gap-md); }
.company__body{
  max-width:1920px; margin:0 auto; padding:0 var(--sp-side);
  display:flex; flex-direction:column-reverse; gap:var(--sp-gap-md);
}
.company__table{
  width:100%;
  border-collapse:collapse;
  background:var(--bg-light);
  border:1px solid #e2e2e2;
}
.company__table th,.company__table td{
  text-align:left; vertical-align:top;
  font-family:var(--serif); font-weight:500; color:var(--navy-text-2);
  padding:clamp(10px,1.25vw,24px) clamp(16px,1.56vw,30px);
  font-size:var(--fs-table);
  letter-spacing:.03em;
  border-bottom:1px solid #e2e2e2;
  line-height:1.8;
}
.company__table tr:last-child th, .company__table tr:last-child td{ border-bottom:none; }
.company__table th{
  width:clamp(120px,10.9vw,210px);
  color:var(--navy-text-2); font-weight:500; background:var(--bg-light);
  border-right:1px solid #e2e2e2;
}
.company__table td{ color:#333; background:var(--white); }
.company__photo{
  width:100%;
  min-height:var(--sp-photo-h);
  background-image:url("../img/company-building-sp.jpg");
  background-size:cover; background-position:center;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ background:var(--navy); position:relative; overflow:hidden; 
    background-color:var(--navy);

}
.contact__inner{
  max-width:1920px; margin:0 auto;
  display:flex; flex-direction:column; align-items:stretch;
  padding:0 var(--sp-side) clamp(60px,6.25vw,120px);
  gap:0;
  position:relative; z-index:2;
  background-color:var(--navy); background-image:linear-gradient(90deg, var(--navy) 20%, color-mix(in srgb, var(--navy) 50%, transparent) 80%, transparent 100%);
}
.contact__text{
  position:relative; padding-top:0;
  background-color:var(--navy);
  background-image:url("../img/contact-bg.png");
  background-repeat:no-repeat; background-position:top left; background-size:cover;
  padding-bottom:50px;
  margin-left:calc(-1 * var(--sp-side)); margin-right:calc(-1 * var(--sp-side));
  padding-left:var(--sp-side); padding-right:var(--sp-side);
}
#contact .section-head__title{
  margin: 50px 50px 0 0;
}
.contact__heading{
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-contact-heading); color:var(--white);
  letter-spacing:.02em; line-height:1.4; margin-top:clamp(20px,2.6vw,50px);
  margin-right:50px;
}
.contact__line{
  display:block; width:var(--sp-line-w); height:1px;
  background:var(--gold); margin:clamp(18px,1.8vw,34px) 0;
}
.contact__desc{
  font-family:var(--serif); font-weight:600;
  font-size:var(--fs-contact-desc); color:#dfe3ea;
  letter-spacing:.02em; line-height:1.8;
}

.contact__form{
  position:relative;
  background:var(--bg-light);
}
.contact__form-fields{
  padding:var(--sp-form-pad);
}
.form-row{ margin-bottom:var(--sp-gap-sm); }
.form-row label{
  display:flex; align-items:center; flex-wrap:wrap; gap:clamp(8px,0.83vw,16px);
  font-size:var(--fs-label); font-weight:500; color:var(--navy-text-2);
  letter-spacing:.03em; margin-bottom:clamp(8px,0.63vw,12px);
}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-badge); font-weight:500; letter-spacing:.05em;
  padding:clamp(2px,0.16vw,3px) clamp(8px,0.63vw,12px);
  color:var(--white);
}
.badge--required{ background:#c0475a; }
.badge--optional{ background:#8b93a1; }
.form-row input,
.form-row select,
.form-row textarea{
  width:100%; border:1px solid #d8d8d8; background:var(--white);
  padding:clamp(12px,0.83vw,16px) clamp(14px,1.05vw,20px);
  font-size:var(--fs-input); color:#444;
}
.form-row input::placeholder,
.form-row textarea::placeholder{ color:#b7b7b7; }
.form-row select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 18px center; background-size:16px;
}
.form-row textarea{ min-height:clamp(110px,7.3vw,140px); resize:vertical; }

.submit-btn{
  display:flex; align-items:center; justify-content:center; gap:clamp(10px,1.05vw,20px);
  width:80%; max-width:min(542px, 100%); margin:clamp(20px,1.8vw,34px) auto 0;
  height:var(--sp-btn-h);
  background:linear-gradient(180deg, #B78E4A 0%, #CBAD77 100%); color:var(--white);
  font-family:var(--serif); font-weight:500;
  font-size:var(--fs-submit-btn); letter-spacing:.1em;
  transition:filter .2s;
}
.submit-btn:hover{ filter:brightness(1.08); }
.form-success{
  text-align:center; margin-top:clamp(12px,1.05vw,20px);
  font-size:var(--fs-form-success); color:var(--navy-text-2);
  opacity:0; transition:opacity .3s;display:none;
}
.form-success.is-visible{ opacity:1; display:block; }
.contact__form.is-submitted .form-row,
.contact__form.is-submitted .submit-btn{ visibility:hidden; }
.contact__form.is-submitted .form-success{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  margin:0; padding:0 var(--sp-form-pad);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background:var(--navy); border-top:1px solid rgba(255,255,255,.08); }
.footer__inner{
  max-width:1920px; margin:0 auto; position:relative;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(14px,1.05vw,20px);
  padding:clamp(28px,2vw,38px) var(--sp-side);
  padding-right:clamp(90px, 8vw, 127px);
}
.footer__left{ display:flex; align-items:center; gap:clamp(12px,1.56vw,30px); flex-wrap:wrap; }
.footer__logo{ width:var(--sp-footer-logo-w); }
.footer__tagline{
  font-family:var(--serif); font-weight:600; color:var(--white);
  font-size:var(--fs-footer-tagline); letter-spacing:.1em;
}
.footer__right{ text-align:left; }
.footer__address,.footer__copyright{
  font-weight:100; color:#cfd3da;
  font-size:var(--fs-footer-address); letter-spacing:.03em;
}
.footer__copyright{ margin-top:clamp(4px,0.42vw,8px); font-size:var(--fs-footer-copyright); }
.footer__totop{
  position:absolute; right:var(--sp-side); bottom:clamp(20px,2vw,38px);
  width:var(--sp-totop-size); height:var(--sp-totop-size); border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:var(--fs-footer-totop-icon);
  transform:rotate(180deg);
  transition:background .2s;
}
.footer__totop:hover{ background:rgba(255,255,255,.1); }

/* ==========================================================================
   Structural breakpoint (≥769px): columns / nav visibility / art direction.
   Typography and spacing above are already fluid and do NOT change here.
   ========================================================================== */
@media (min-width:769px){
  .sp-only{ display:none; }
  .header__nav{ display:block; }
  .subnav{ display:none; }

  .section-head__title{ max-width:none; }

  .submit-btn{ width:100%; }

  .hero__bg{ background-image:url("../img/hero-bg.jpg"); }
  .hero__gradient{ background:linear-gradient(90deg, rgba(0,10,25,.92) 0%, rgba(0,10,25,.55) 42%, rgba(0,10,25,.08) 72%); }
  .hero__inner{ padding:clamp(60px,6.25vw,120px) var(--sp-side) clamp(50px,3.6vw,70px); }

  .about{
    background-image:
      linear-gradient(90deg, var(--bg-light) 20%, color-mix(in srgb, var(--bg-light) 50%, transparent) 80%, transparent 100%),
      url("../img/about-bg.jpg");
    background-size:100% 100%, cover;
    background-position:top, center;
    padding-bottom:var(--sp-section-y-lg);
  }
  .about__body{ flex-direction:row; align-items:flex-start; }
  .about__text{ flex:1 1 auto; min-width:0; }

  .service__cards{ grid-template-columns:repeat(3,1fr); }
  .service{
    background-image:url("../img/service-bg.png");
  }

  .company__body{ max-width:none; flex-direction:row; align-items:flex-start; }
  .company__table{ flex:0 0 min(808px,42.1vw); width:auto; }
  .company__photo{
    flex:1 1 auto; background-image:url("../img/company-building.jpg");
    margin-right:calc(-1 * var(--sp-side));
    align-self:flex-start; min-height:0;
    aspect-ratio:1098/823;
  }

  .contact__inner{ flex-direction:row; align-items:stretch; gap:0;}
  .contact__text{
    flex:0 0 calc(min(606px,31.6vw) + var(--sp-side)); padding-top:clamp(12px,1.25vw,24px);
    background-position:left bottom; background-size:100% auto;
    margin-left:calc(-1 * var(--sp-side)); margin-right:0;
    padding-left:var(--sp-side); padding-right:0;
  }
  .contact__form{ flex:1 1 auto; margin-right:calc(-1 * var(--sp-side)); }
  .contact__form-fields{
    max-width:calc(1800px - min(606px,31.6vw) + var(--sp-form-pad));
    padding-left:calc(var(--sp-form-pad) + 20px);
  }

  .form-row{ display:flex; align-items:flex-start; gap:clamp(12px,1.5vw,28px); }
  .form-row label{
    flex:0 0 clamp(160px,15vw,230px);
    margin-bottom:0; padding-top:clamp(12px,0.83vw,16px);
  }
  .form-row input,
  .form-row select,
  .form-row textarea{
    flex:1 1 auto; width:auto;
  }

  .footer__inner{ flex-direction:row; align-items:center; justify-content:space-between; padding-right:var(--sp-side); }
  .footer__right{ text-align:right; }
  .footer__totop{ position:static; }
}