/* assets/css/home.css */

/* =========================================================
  Tokens
========================================================= */
:root{
  --surface:#e9eef5;
  --surface-soft:#f2f5fa;
  --surface-deep:#dde4ee;
  --ink:#142033;
  --ink-soft:#334155;
  --line:rgba(201,213,234,.78);
  --white:#ffffff;
}

/* =========================================================
  Hero
========================================================= */
.hero{
  position:relative;
  height:min(68vh, 640px);
  min-height:420px;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  isolation:isolate;
  background:#fff;
  animation:heroFadeIn 1s ease both;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg, rgba(15,23,42,.60) 0%, rgba(15,23,42,.22) 48%, rgba(15,23,42,.04) 74%, rgba(15,23,42,.06) 100%),
    url("../img/hero.jpg") center/cover no-repeat;
  transform:scale(1.06);
  animation:heroZoom 10s ease-out both;
  filter:saturate(1.02) contrast(1.03);
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:145px;
  z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 46%,
    rgba(255,255,255,.78) 78%,
    #ffffff 100%
  );
}

.hero-inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  width:100%;
  padding:44px 0 70px;
}

.hero-copy{
  max-width:700px;
  backface-visibility:hidden;
  margin-left: 20px;
}

.hero-title{
  margin:0 0 14px;
}

.hero-line{
  display:block;
  overflow:hidden;
  line-height:1.18;
}

.hero-line > span{
  display:inline-block;
  opacity:0;
  transform:translateY(72px) scale(.96);
  filter:blur(10px);
  font-size:clamp(34px, 4vw, 58px);
  line-height:1.18;
  color:#fff;
  font-weight:900;
  letter-spacing:.01em;
  text-shadow:
    0 12px 30px rgba(0,0,0,.24),
    0 2px 10px rgba(0,0,0,.18);
  will-change:transform, opacity, filter;
}

.hero-company{
  margin:0;
  font-size:clamp(16px, 2vw, 24px);
  color:rgba(255,255,255,.94);
  font-weight:700;
  letter-spacing:.02em;
  opacity:0;
  transform:translateY(20px);
  filter:blur(6px);
}

@keyframes heroZoom{
  from{ transform:scale(1.12); }
  to{ transform:scale(1); }
}

@keyframes heroFadeIn{
  from{ opacity:.72; }
  to{ opacity:1; }
}

@keyframes heroLineIn{
  0%{
    opacity:0;
    transform:translateY(72px) scale(.96);
    filter:blur(10px);
  }
  60%{
    opacity:1;
    transform:translateY(-4px) scale(1.01);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:none;
    filter:none;
  }
}

@keyframes heroCompanyIn{
  0%{
    opacity:0;
    transform:translateY(20px);
    filter:blur(6px);
  }
  100%{
    opacity:1;
    transform:none;
    filter:none;
  }
}

.js .reveal-hero{
  opacity:1;
  transform:none;
  transition:none;
}

.js .hero-copy.reveal-hero.is-visible .hero-line:nth-child(1) > span{
  animation:heroLineIn 1s cubic-bezier(.22,.8,.22,1) .05s forwards;
}

.js .hero-copy.reveal-hero.is-visible .hero-line:nth-child(2) > span{
  animation:heroLineIn 1s cubic-bezier(.22,.8,.22,1) .23s forwards;
}

.js .hero-copy.reveal-hero.is-visible .hero-company{
  animation:heroCompanyIn 1.1s cubic-bezier(.22,.8,.22,1) .75s forwards;
}

/* =========================================================
  Divider
========================================================= */
.section-divider{
  position:relative;
  z-index:2;
  width:100%;
  line-height:0;
  margin-top:-72px;
  margin-bottom:-1px;
}

.section-divider svg{
  display:block;
  width:100%;
  height:90px;
}

.section-divider--soft path{
  fill:var(--surface);
}

/* =========================================================
  Section base
========================================================= */
.section{
  position:relative;
}

.section h2{
  margin:0 0 26px;
  text-align:center;
  font-size:clamp(26px, 2.2vw, 34px);
  font-weight:800;
  letter-spacing:.04em;
  color:var(--ink);
}

.section-soft{
  background:var(--surface);
}

.section-soft--profile{
  padding:18px 0 40px;
  background:
    linear-gradient(
      to bottom,
      var(--surface) 0%,
      var(--surface) 92%,
      #ffffff 100%
    );
}

.section-plain{
  background:#ffffff;
  padding:36px 0 56px;
}

.section-soft--contact{
  padding:62px 0 64px;
  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      var(--surface-soft) 16%,
      var(--surface) 100%
    );
}

.narrow{
  max-width:980px;
}

/* =========================================================
  Company profile
========================================================= */
.profile-card{
  background:rgba(255,255,255,.84);
  border:1px solid rgba(202,214,235,.92);
  border-radius:30px;
  box-shadow:0 28px 70px rgba(15,23,42,.08);
  padding:38px 42px 30px;
  backdrop-filter:blur(8px);
}

.profile-list{
  margin:0;
}

.profile-row{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:22px;
  padding:18px 0;
  border-bottom:1px solid rgba(213,223,240,.68);
}

.profile-row:last-child{
  border-bottom:none;
}

.profile-row dt{
  margin:0;
  font-weight:800;
  font-size:16px;
  color:#24344d;
  letter-spacing:.05em;
}

.profile-row dd{
  margin:0;
  color:var(--ink-soft);
  line-height:2.05;
  font-size:17px;
}

/* =========================================================
  Mid visual band
========================================================= */
.visual-band{
  position:relative;
  padding:0;
  background:#ffffff;
  overflow:hidden;
}

.visual-band::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:32px;
  z-index:3;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.26) 58%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:none;
}

.visual-band::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:78px;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.16) 58%,
    rgba(255,255,255,.55) 84%,
    #ffffff 100%
  );
}

.visual-band-inner{
  position:relative;
  width:100%;
  min-height:430px;
  overflow:hidden;
  isolation:isolate;
  clip-path:polygon(0 26%, 100% 0, 100% 74%, 0 100%);
}

.visual-band-inner::before{
  content:"";
  position:absolute;
  inset:-2%;
  z-index:0;
  background:
    linear-gradient(90deg, rgba(15,23,42,.66) 0%, rgba(15,23,42,.34) 34%, rgba(15,23,42,.12) 62%, rgba(15,23,42,.14) 100%),
    url("../img/macinary.jpg") center 24%/cover no-repeat;
  transform:scale(1.05);
  filter:saturate(.98) contrast(1.04) blur(.35px);
}

.visual-band-inner::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(560px 220px at 14% 24%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
    radial-gradient(460px 180px at 80% 78%, rgba(255,255,255,.10), rgba(255,255,255,0) 64%),
    linear-gradient(to bottom, rgba(255,255,255,0) 70%, rgba(255,255,255,.10) 86%, rgba(255,255,255,.18) 100%);
}

.visual-band-copy-wrap{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  min-height:430px;
  padding-top:0;
  padding-bottom:0;
  margin-left: 20px;
}

.visual-band-copy{
  max-width:660px;
  padding:0;
  margin:0;
}

.visual-band-kicker{
  margin-left:30px;
  color:rgba(255,255,255,.82);
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.visual-band-title{
  margin:40px 0 0 25px;
  color:#ffffff;
  font-size:clamp(26px, 3vw, 38px);
  line-height:1.38;
  font-weight:800;
  letter-spacing:.02em;
  text-shadow:
    0 12px 30px rgba(0,0,0,.24),
    0 2px 10px rgba(0,0,0,.18);
}

/* =========================================================
  Message
========================================================= */
.message-card{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  padding:18px 0 0;
}

.message-card::before{
  content:"";
  display:block;
  width:72px;
  height:2px;
  margin:0 auto 28px;
  background:linear-gradient(
    90deg,
    rgba(20,32,51,.10),
    rgba(20,32,51,.42),
    rgba(20,32,51,.10)
  );
  border-radius:999px;
}

.message-card p{
  margin:0;
  color:var(--ink-soft);
}

.message-lead,
.message-card > p:first-of-type{
  line-height:2.25;
  font-size:22px;
  letter-spacing:.06em;
  font-weight:500;
}

.message-sign{
  margin-top:28px !important;
  font-weight:500;
  font-size:18px;
  color:var(--ink);
  display:inline-block;
  padding-top:14px;
  letter-spacing:.08em;
  border-top:1px solid rgba(20,32,51,.12);
}

/* =========================================================
  Contact
========================================================= */
.contact-wrap{
  padding:22px;
  overflow:visible;
  max-width:760px;
  margin:0 auto;
}

.contact-card{
  overflow:hidden;
  align-self:start;
}

.thumb{
  height:270px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.thumb.t1{
  background-image:url("../img/macinary_door.jpg");
  background-position:50% 46%;
}

.contact-body{
  padding:18px 18px 20px;
}

.contact-title{
  font-weight:600;
  font-size:17px;
  margin:0 0 8px;
  letter-spacing:.01em;
  transition:transform .18s ease, font-weight .18s ease;
  transform-origin:left center;
}

.contact-meta{
  margin:0;
  color:var(--ink-soft);
  line-height:1.8;
  font-size:14px;
  font-weight:400;
}

.contact-meta b{
  font-weight:700;
  color:var(--ink);
  letter-spacing:.03em;
}

.contact-line{
  display:inline-block;
  transition:transform .18s ease, font-weight .18s ease;
  transform-origin:left center;
}

.contact-card:hover .contact-line{
  transform:scale(1.5);
  font-weight:700;
}

.contact-card:hover .contact-title{
  transform:scale(1.15);
  font-weight:700;
}

/* =========================================================
  Footer
========================================================= */
.footer{
  background:var(--surface);
  border-top:none;
}

.footer-copy{
  margin-top:16px;
  font-weight:800;
}

/* =========================================================
  Scroll reveal
========================================================= */
.js .reveal{
  opacity:0;
  transform:translateY(34px);
  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.22,.8,.22,1);
  will-change:opacity, transform;
}

.js .reveal.is-visible{
  opacity:1;
  transform:none;
}

.js .reveal-up{
  transform:translateY(34px);
}

.js .reveal-item{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.22,.8,.22,1);
  will-change:opacity, transform;
}

.js .reveal-item.is-visible{
  opacity:1;
  transform:none;
}

/* =========================================================
  Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce){
  .js .reveal,
  .js .reveal-hero,
  .js .reveal-item{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  .hero,
  .hero::before{
    animation:none !important;
  }

  .hero-line > span,
  .hero-company{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}

/* =========================================================
  Responsive
========================================================= */
@media (max-width:980px){
  .hero{
    height:min(62vh, 560px);
  }

  .profile-row{
    grid-template-columns:150px 1fr;
  }

  .visual-band-inner,
  .visual-band-copy-wrap{
    min-height:350px;
  }

  .visual-band-copy{
    padding:0;
  }

  .message-lead,
  .message-card > p:first-of-type{
    font-size:21px;
  }
}

@media (max-width:768px){
  .profile-card{
    padding:26px 20px 18px;
    border-radius:24px;
  }

  .profile-row{
    grid-template-columns:1fr;
    gap:8px;
    padding:14px 0;
  }

  .profile-row dt{
    font-size:14px;
  }

  .profile-row dd{
    font-size:15px;
  }

  .visual-band{
    padding:0;
  }

  .visual-band-inner{
    min-height:300px;
    clip-path:polygon(0 14%, 100% 0, 100% 86%, 0 100%);
  }

  .visual-band-copy-wrap{
    min-height:300px;
  }

  .visual-band-title{
    font-size:clamp(24px, 5.2vw, 34px);
  }

  .message-lead,
  .message-card > p:first-of-type{
    font-size:18px;
    line-height:2;
  }

  .contact-wrap{
    padding:16px;
  }

  .thumb{
    height:220px;
  }

  .contact-body{
    padding:16px 16px 18px;
  }

  .contact-title{
    font-size:17px;
  }

  .contact-meta{
    font-size:14px;
  }
}

@media (max-width:560px){
  .hero{
    height:380px;
    min-height:380px;
  }

  .hero-inner{
    align-items:center;
    padding:24px 0 42px;
  }

  .hero-line > span{
    font-size:clamp(28px, 8vw, 40px);
  }

  .hero-company{
    font-size:15px;
  }

  .section h2{
    margin-bottom:20px;
    font-size:26px;
  }

  .section-soft--profile{
    padding-bottom:34px;
  }

  .section-plain{
    padding:30px 0 44px;
  }

  .section-soft--contact{
    padding:44px 0 50px;
  }

  .message-card::before{
    margin-bottom:22px;
  }

  .message-lead,
  .message-card > p:first-of-type{
    font-size:17px;
    letter-spacing:.04em;
  }

  .contact-wrap{
    padding:12px;
  }

  .thumb{
    height:190px;
  }
}

/* ===============================
  グループ会社
=============================== */

.group-section {
  padding: 40px 0 20px;
}

.group-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.group-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
}

/* リンク（カード） */
.group-link--active {
  background: #fff;
  border: 1px solid #dbeafe;
  transition: 0.25s;
}

.group-link--active:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
  border-color: #93c5fd;
}

/* 非リンク（AFP） */
.group-links > .group-link:not(.group-link--active) {
  background: #f8fafc;
  border: 1px dashed #e5e7eb;
}

/* ロゴ */
.group-link img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* SP */
@media (max-width: 768px){
  .group-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

.group-section {
  padding: 56px 0 56px;
  background: #eef3f8;
}

.group-link {
  padding: 18px 20px;
  gap: 12px;
  font-weight: 450;
  letter-spacing: 0.02em;
}

.group-link img {
  height: 44px;
}