:root{
  --bg:#ffffff;
  --ink:#0b1220;
  --muted:#5b6575;
  --line:#e6e9ef;
  --soft:#f6f7fb;

  --brand:#0f766e;
  --brand2:#0ea5e9;

  --radius:18px;
  --shadow:0 16px 36px rgba(0,0,0,.10);
  --max:1100px;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0; font-family:"Noto Sans JP", system-ui, -apple-system, sans-serif; color:var(--ink); background:var(--bg);}
a{color:inherit; text-decoration:none}
button{font:inherit}

.container{max-width:var(--max); margin:0 auto; padding:0 20px;}
.spacer{height:14px}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px; gap:12px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:900;}
.brand__mark{
  width:34px; height:34px; border-radius:12px;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow:0 12px 24px rgba(0,0,0,.15);
}
.brand__name{letter-spacing:.08em}
.nav{display:flex; gap:14px; align-items:center;}
.nav a{
  padding:10px 10px; border-radius:12px;
  font-weight:800; font-size:14px;
}
.nav a:hover{background:var(--soft)}
.nav__cta{
  background:var(--brand); color:#fff;
  padding:10px 14px; border-radius:999px;
}
.nav__cta:hover{filter:brightness(.97); background:var(--brand)}

.menuBtn{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
}
.drawer{display:none; border-top:1px solid var(--line);}
.drawer__panel{display:grid; gap:6px; padding:12px 0 16px;}
.drawer a{padding:12px 12px; border-radius:12px; font-weight:900;}
.drawer a:hover{background:var(--soft)}
.drawer.is-open{display:block}

@media (max-width: 860px){
  .nav{display:none}
  .menuBtn{display:inline-flex}
}

/* Hero */
.hero{
  position:relative;
  min-height:64vh;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(10,14,25,.10), rgba(10,14,25,.70)),
    url("./assets/hero.jpg");
  background-size:cover;
  background-position:center;
}
.hero__shade{
  position:absolute; inset:0;
  background: radial-gradient(800px 400px at 20% 10%, rgba(14,165,233,.25), transparent 60%),
              radial-gradient(800px 400px at 70% 40%, rgba(15,118,110,.25), transparent 60%);
  pointer-events:none;
}
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:18px;
  padding:84px 0 60px;
  align-items:end;
}
.pill{
  display:inline-flex;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  letter-spacing:.12em;
  font-weight:900;
  font-size:12px;
}
.hero__title{
  margin:12px 0 8px;
  color:#fff;
  font-size:44px;
  line-height:1.15;
  font-weight:900;
}
.hero__lead{
  margin:0;
  color:rgba(255,255,255,.82);
  line-height:1.9;
  max-width:54ch;
}
.hero__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}

.hero__card{
  background:rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.hero__cardTitle{font-weight:900; letter-spacing:.08em; margin-bottom:10px;}
.hero__list{margin:0; padding-left:18px; color:var(--muted); line-height:1.9;}

@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr; align-items:start;}
  .hero__title{font-size:36px}
}

/* Sections */
.section{padding:74px 0; border-top:1px solid var(--line);}
.section--alt{background:var(--soft);}
.section__head{margin-bottom:18px;}
.kicker{letter-spacing:.18em; text-transform:uppercase; font-size:12px; font-weight:900; color:var(--muted);}
h2{margin:10px 0 12px; font-size:28px;}
.section__head p{margin:0; color:var(--muted); line-height:1.9;}
.section__foot{margin-top:18px}

/* Grid / Card */
.grid{display:grid; gap:16px;}
.grid--2{grid-template-columns:repeat(2, 1fr);}
.grid--3{grid-template-columns:repeat(3, 1fr);}
@media (max-width: 920px){
  .grid--2, .grid--3{grid-template-columns:1fr;}
  h2{font-size:24px}
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  overflow:hidden;
}
.card__pad{padding:20px;}
.card h3{margin:0 0 8px; font-size:18px;}
.card p{margin:0; color:var(--muted); line-height:1.9;}

.card--media .card__pad{padding-top:16px;}
.media{height:190px; background-size:cover; background-position:center;}
/* プレースホルダー */
.media--a{background:linear-gradient(135deg, rgba(15,118,110,.55), rgba(14,165,233,.35));}
.media--b{background:linear-gradient(135deg, rgba(14,165,233,.55), rgba(15,118,110,.25));}
.media--c{background:linear-gradient(135deg, rgba(11,18,32,.35), rgba(14,165,233,.30));}

/* Buttons / Links */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  gap:10px;
  transition: transform .08s ease, filter .08s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{
  background:var(--brand);
  color:#fff;
  border-color:transparent;
  box-shadow:0 16px 32px rgba(15,118,110,.22);
}
.btn--ghost{
  background:rgba(255,255,255,.18);
  color:#fff;
  border-color:rgba(255,255,255,.28);
}
.btn--small{padding:10px 14px; font-size:14px}

.linkArrow{
  font-weight:900;
  color:var(--brand);
}
.linkArrow:hover{text-decoration:underline}

/* Works */
.chips{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 18px;}
.chip{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
}
.chip.is-active{
  border-color:transparent;
  background:rgba(15,118,110,.12);
  color:var(--brand);
}
.work__thumb{height:190px; background-size:cover; background-position:center;}
.work__thumb--1{background:linear-gradient(135deg, rgba(15,118,110,.30), rgba(0,0,0,.10));}
.work__thumb--2{background:linear-gradient(135deg, rgba(14,165,233,.28), rgba(0,0,0,.10));}
.work__thumb--3{background:linear-gradient(135deg, rgba(11,18,32,.22), rgba(15,118,110,.18));}
.work__meta{font-size:12px; font-weight:900; color:var(--muted); letter-spacing:.08em; margin-bottom:6px;}
.work.is-hidden{display:none}

/* News */
.news{display:grid;}
.news__item{
  display:grid;
  grid-template-columns: 120px 1fr 28px;
  gap:12px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px dashed var(--line);
}
.news__item:last-child{border-bottom:none}
.news__date{font-weight:900; color:var(--muted);}
.news__title{font-weight:800;}
.news__arrow{font-weight:900; color:var(--brand);}
@media (max-width: 520px){
  .news__item{grid-template-columns: 1fr; gap:6px;}
  .news__arrow{display:none}
}

/* Contact */
.section--contact{
  background:
    radial-gradient(900px 450px at 20% 20%, rgba(14,165,233,.22), transparent 60%),
    radial-gradient(900px 450px at 70% 40%, rgba(15,118,110,.20), transparent 60%),
    var(--ink);
  color:#fff;
}
.kicker--light{color:rgba(255,255,255,.72)}
.contactBox{
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  padding:22px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:18px;
  align-items:center;
}
.contactBox__title{margin:10px 0 8px; font-size:28px}
.contactBox__lead{margin:0; color:rgba(255,255,255,.78); line-height:1.9}
.contactBox__actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
@media (max-width: 920px){
  .contactBox{grid-template-columns:1fr;}
  .contactBox__actions{justify-content:flex-start;}
}

.footerCard{
  margin-top:18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.footerCard__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  padding:18px 20px;
}
.footerCard__brand{font-weight:900; letter-spacing:.10em}
.footerCard__text{color:rgba(255,255,255,.78); margin-top:6px}
.footerCard__links{display:grid; gap:8px; align-content:start;}
.footerCard__links a{color:rgba(255,255,255,.85); font-weight:800}
.footerCard__links a:hover{text-decoration:underline}
.footerCard__bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:12px 20px;
  color:rgba(255,255,255,.72);
}
@media (max-width: 920px){
  .footerCard__grid{grid-template-columns:1fr;}
}
/* Job (one-row / one-block layout) */
.kv{
  display:grid;
  gap:10px;
}
.kv__row{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.kv__row dt{
  font-weight:900;
  color:var(--muted);
  letter-spacing:.04em;
}
.kv__row dd{
  margin:0;
  line-height:1.9;
}
.kv__row--full{
  grid-template-columns: 1fr;
}
.kv__row--full dt{
  margin-bottom:6px;
}

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

/* Header logo size fix */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand__logo{
  width:36px;      /* ←ここで大きさ調整 */
  height:36px;
  object-fit:contain;
  display:block;
}

@media (max-width: 640px){
  .brand__logo{
    width:28px;
    height:28px;
  }
}