/* 省略なし完全版 style.css（レスポンシブ調整含む） */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Segoe UI', 'Noto Sans JP', Arial, sans-serif;
  margin: 0; padding: 0;
  color: #222; background: #f5f8fa;
  min-height: 100vh; letter-spacing: 0.02em;
}

:root{
  --marine-blue:#105779;
  --marine-blue-dark:#0b3b56;
  --accent-blue:#2e8bc0;
  --light-bg:#f5f8fa;
  --white:#fff;
  --shadow:0 2px 16px rgba(16,87,121,.08);
  --radius:0;
  --hero-h:800px;
  --hero-h-sp:400px;
}

:where(img,section,iframe,table,footer,.logo img,
.menu-toggle span,.message-block,.hero-img-wrapper) {
  border-radius:var(--radius);
}
.fade-in{opacity:0;animation:fadeInUp .8s ease-out .2s forwards}

header{
  background:linear-gradient(90deg,var(--marine-blue),var(--marine-blue-dark));
  position:fixed;inset:0 0 auto;z-index:100;box-shadow:var(--shadow);
}
nav{
  max-width:1200px;margin:0 auto;padding:0 24px;
  height:72px;display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:48px;background:#fff2;padding:4px;box-shadow:0 0 4px #fff5}
.company-name{color:var(--white);font-size:1.4rem;font-weight:700;letter-spacing:.08em}

nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0}
nav ul li a{
  color:var(--white);text-decoration:none;font-weight:600;font-size:.95rem;
  padding:8px 16px;transition:background .22s,color .22s;
}
nav ul li a:hover,nav ul li a:focus{
  background:var(--accent-blue);color:var(--white);box-shadow:0 4px 16px #0b3b5655;
}

.menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:200}
.menu-toggle span{width:30px;height:4px;background:var(--white);transition:all .3s}

.hero{margin:0 0 32px;max-width:100vw}
.hero-img-wrapper{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:var(--hero-h);overflow:hidden;
}
.hero-img-wrapper img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
.hero-copy{
  position:absolute;left:8%;bottom:14%;
  color:#fff;font:700 3rem/1.1 'Yomogi','Kaisei Tokumin',Arial,cursive;
  letter-spacing:.06em;text-shadow:0 4px 22px #000b,0 1px 0 #fff9;pointer-events:none;
}

section{
  max-width:1200px;margin:48px auto 0;padding:32px 16px;
  background:var(--white);box-shadow:var(--shadow);position:relative;
}
h2{
  color:var(--marine-blue);font-size:2rem;font-weight:700;letter-spacing:.04em;
  margin:0 0 28px;border-left:8px solid var(--marine-blue);padding-left:12px;
}
h3{color:var(--accent-blue);font-size:1.25rem;margin:18px 0 10px;font-weight:700}

.company-message{
  display:flex;flex-wrap:wrap;justify-content:center;gap:32px;
}
.message-block{
  background:linear-gradient(120deg,#fafdff 60%,#e3effa);
  width:540px;max-width:100%;padding:28px 18px 20px;text-align:center;
  box-shadow:var(--shadow);transition:transform .2s,box-shadow .3s;
}
.message-block:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 8px 36px #10577922}
.message-block img{
  width:100%;max-height:260px;object-fit:cover;object-position:center;margin-bottom:16px;
  box-shadow:0 2px 8px #2e8bc033;
}

#map-access iframe,#company-details table{
  width:100%;margin-top:18px;box-shadow:0 1px 9px #2e8bc033;
}
table{width:100%;border-collapse:collapse;margin-top:14px}
th,td{padding:10px 8px;text-align:left}
th{color:var(--marine-blue);background:#e3effa}

footer{
  width:100%;padding:22px 0 10px;background:linear-gradient(90deg,var(--marine-blue),var(--marine-blue-dark));
  color:var(--white);text-align:center;margin-top:40px;font-size:1rem;letter-spacing:.04em;
  box-shadow:var(--shadow);
}

.philosophy .message-block h3{color:var(--accent-blue);font-size:1.35rem}
.philosophy .message-block p{
  color:var(--marine-blue);font-size:1.12rem;line-height:1.7;letter-spacing:.02em;
}

/* recruitの画像調整 */
#recruit img{
  max-width:100%;height:auto;display:block;
  margin:16px auto;box-shadow:0 2px 12px rgba(0,0,0,0.1);
}

@media (max-width:900px){
  nav ul{
    position:fixed;top:72px;right:-320px;width:260px;height:calc(100% - 72px);
    flex-direction:column;align-items:flex-start;padding:32px 16px;gap:20px;
    background:linear-gradient(90deg,var(--marine-blue),var(--marine-blue-dark));
    transition:right .33s cubic-bezier(.7,0,.3,1);box-shadow:var(--shadow);
  }
  nav ul.active{right:0}
  .menu-toggle{display:flex}
  section{margin:24px 5px 0;padding:20px 6px}
  .message-block{width:99%;padding:14px 5px;font-size:.98rem}
  .message-block img{max-height:180px}
  .hero-img-wrapper{height:var(--hero-h-sp)}
}

@media (max-width:700px){
  .hero-copy{font-size:1.3rem;left:4%;bottom:7%}
}

@media (max-width:550px){
  h2{font-size:1.15rem;padding-left:5px}
  h3{font-size:1.1rem}
}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}