:root{
  --navy:#1F3A5F;
  --blue:#4A7FB3;
  --white:#FFFFFF;
  --text:#333333;

  --bg-main:#FAFCFE;
  --bg-alt:#EEF3F8;

  --line:#D9E2EC;
  --footer:#DCE6F0;
  
  --max:1100px;
}


    *{box-sizing:border-box;}
    body{
      margin:0;
      font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
      color:var(--text);
      background:var(--bg-main);
      line-height:1.8;
    }




    a{
      color:inherit;
      text-decoration:none;
    }

    img{
      max-width:100%;
      height:auto;
      display:block;
    }

    .container{
      width:min(92%, var(--max));
      margin:0 auto;
    }

    header{
      background:var(--navy);
      color:var(--white);
    }

header{
  background:var(--navy);
}

.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
  gap:24px;
  flex-wrap:wrap;
}

.logo img{
  height:52px;
  width:auto;
}

/* ƒiƒr */
nav ul{
  display:flex;
  gap:24px;
  list-style:none;
  margin:0;
  padding:0;
}

nav a{
  color:#fff;
  padding:6px 10px;
  border-radius:4px;
  font-size:0.95rem;
  transition:0.2s;
}

nav a:hover{
  background:rgba(255,255,255,0.12);
}

nav a.active{
  background:#fff;
  color:var(--navy);
  font-weight:700;
}


 




    .hero{
      position:relative;
      min-height:480px;
      display:flex;
      align-items:center;
      color:#fff;
      background:
        linear-gradient(rgba(31,58,95,0.55), rgba(31,58,95,0.55)),
        url("https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1600&q=80")
        center/cover no-repeat;
    }

    .hero-content{
      width:min(92%, var(--max));
      margin:0 auto;
      padding:80px 0;
    }

    .hero h1{
      margin:0 0 18px;
      font-size:clamp(2rem, 4vw, 3.2rem);
      line-height:1.3;
      letter-spacing:0.03em;
    }

    .hero p{
      max-width:720px;
      margin:0 0 28px;
      font-size:1.05rem;
    }

    .btn{
      display:inline-block;
      background:var(--blue);
      color:#fff;
      padding:12px 24px;
      border-radius:4px;
      font-weight:700;
      transition:0.2s ease;
    }

    .btn:hover{
      background:#3d6e9f;
    }

    section{
      padding:72px 0;
    }


.section-main{
  background:var(--bg-main);
}

.section-alt{
  background:var(--bg-alt);
}

    .section-title{
      margin:0 0 18px;
      font-size:1.9rem;
      color:var(--navy);
      line-height:1.4;
    }

    .lead{
      margin:0 0 28px;
      max-width:820px;
    }

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

    .card{
      background:#fff;
      border:1px solid var(--line);
      padding:28px;
    }

    .card h3{
      margin:0 0 12px;
      color:var(--navy);
      font-size:1.2rem;
    }

    .card p{
      margin:0 0 18px;
    }

    .company-box{
      display:grid;
      grid-template-columns:1.1fr 0.9fr;
      gap:36px;
      align-items:start;
    }

.map-box{
  width:100%;
  max-width:500px;
  aspect-ratio:1 / 1;
  margin:24px auto;
}

.map-box iframe{
  width:100%;
  height:100%;
}


    .info-table{
      width:100%;
      border-collapse:collapse;
      background:#fff;
      border:1px solid var(--line);
    }

    .info-table th,
    .info-table td{
      padding:14px 16px;
      border-bottom:1px solid var(--line);
      text-align:left;
      vertical-align:top;
    }

    .info-table th{
      width:32%;
      background:#f9fbfd;
      color:var(--navy);
      font-weight:700;
    }

    .cta{
      text-align:center;
      background:var(--navy);
      color:#fff;
      padding:72px 0;
    }

    .cta h2{
      margin:0 0 14px;
      font-size:1.9rem;
    }

    .cta p{
      margin:0 0 24px;
    }


.site-footer{
  background: var(--navy);
  color: var(--footer);
  padding: 36px 0;
}

.footer-layout{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-company p{
  margin: 0 0 6px;
  line-height: 1.6;
}

.footer-company-name{
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

.footer-company-en{
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.footer-address,
.footer-contact{
  font-size: 0.95rem;
}

.footer-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
   display:block;
}

.footer-nav li{
  margin: 0 0 8px;
}

.footer-nav a{
  color: var(--footer);
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-nav a:hover{
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 640px){
  .footer-layout{
    flex-direction: column;
    gap: 24px;
  }
}

    @media (max-width: 900px){
      .grid-3{
        grid-template-columns:1fr;
      }

      .company-box{
        grid-template-columns:1fr;
      }
    }

    @media (max-width: 640px){
      .header-inner{
        align-items:flex-start;
      }

      nav ul{
        gap:14px;
      }

      .hero{
        min-height:400px;
      }

      section{
        padding:56px 0;
      }
    }


.recruit-list{
  margin:16px 0 0;
  padding-left:1.2em;
}

.recruit-list li{
  margin-bottom:8px;
}

.recruit-list a{
  color:var(--navy);
  text-decoration:underline;
}

.recruit-table ul{
  margin:0;
  padding-left:1.2em;
}

.recruit-table li{
  margin-bottom:6px;
}

.recruit-cta{
  margin-top:24px;
}

.gallery-links{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:24px;
}

.gallery-item{
  margin:0;
}

.gallery-item a{
  display:block;
  overflow:hidden;
  border-radius:6px;
}

.gallery-item img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  display:block;
  transition:0.25s ease;
}

.gallery-item a:hover img{
  transform:scale(1.03);
}

.gallery-item figcaption{
  margin-top:8px;
  font-size:0.95rem;
  color:var(--text);
  text-align:center;
}

@media (max-width: 900px){
  .gallery-links{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .gallery-links{
    grid-template-columns:1fr;
  }
}