/* Header only: company identity, navigation and consultation entry points */
.topbar{
  padding:5px 7%;
  font-size:11px;
  font-weight:400;
  line-height:1.45;
  letter-spacing:.025em;
}
.head{
  height:78px;
  gap:26px;
  padding:0 7%;
  border-bottom:1px solid #eee2c9;
}
.logo{
  flex:1 1 225px;
  color:#2f514c;
  font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:20px;
  font-weight:700;
  letter-spacing:.09em;
  line-height:1.15;
  white-space:nowrap;
}
.logo small{
  display:flex;
  width:max-content;
  align-items:center;
  margin-top:7px;
  padding-left:9px;
  border-left:2px solid var(--yellow);
  color:#766452;
  font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:9px;
  font-weight:500;
  line-height:1;
  letter-spacing:.12em;
}
.nav{
  flex:0 0 auto;
  align-items:center;
  gap:30px;
  line-height:1;
}
.nav a{
  position:relative;
  padding:11px 0;
  color:#4c4137;
  font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
}
.nav a::after{
  content:"";
  position:absolute;
  right:0;
  bottom:4px;
  left:0;
  height:2px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .18s ease;
}
.nav a:hover::after{transform:scaleX(1)}
.head-actions{
  flex:1 1 375px;
  justify-content:flex-end;
  gap:7px;
}
.header-estimate,.header-sub{
  height:42px;
  padding:0 13px;
  border-radius:4px;
  box-shadow:0 3px 0 #b54a2f;
}
.header-estimate{
  min-width:153px;
  border:2px solid var(--coral);
  box-shadow:0 3px 0 #b54a2f;
  font-size:12px;
}
.header-sub{
  min-width:73px;
  font-size:11px;
}
.header-estimate:hover,.header-sub:hover{
  transform:translateY(1px);
  box-shadow:0 2px 0 #b54a2f;
}
@media(max-width:1100px){
  .head{gap:17px}
  .nav{gap:20px}
  .header-estimate{min-width:142px;padding:0 11px}
}
@media(max-width:800px){
  .head{height:66px;padding:0 20px;gap:12px}
  .logo{flex:1 1 auto;font-size:17px;letter-spacing:.065em}
  .logo small{margin-top:5px;font-size:8px;letter-spacing:.08em}
  .header-estimate{height:37px;min-width:0;padding:0 10px;font-size:10px}
}

/* 上段は会社情報と相談導線、下段はページ案内に分ける */
@media(min-width:801px){
  .topbar{
    min-height:25px;
    padding:4px 7%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:17px;
    font-size:10px;
  }
  .topbar span + span{
    padding-left:17px;
    border-left:1px solid #8aafa8;
  }
  .head{
    display:grid;
    grid-template-columns:minmax(230px,1fr) auto;
    grid-template-rows:51px 29px;
    column-gap:28px;
    height:80px;
    padding:0 7%;
    border-bottom:1px solid #e8dcc5;
  }
  .logo{
    grid-column:1;
    grid-row:1;
    align-self:center;
    font-size:19px;
    letter-spacing:.075em;
  }
  .logo small{margin-top:5px}
  .head-actions{
    grid-column:2;
    grid-row:1;
    align-self:center;
    justify-self:end;
    display:flex;
    flex:0 0 auto;
    gap:6px;
  }
  .header-estimate,.header-sub{height:37px;box-shadow:0 2px 0 #b54a2f}
  .header-estimate{min-width:148px;font-size:11px}
  .header-sub{min-width:68px;font-size:10px}
  .nav{
    grid-column:1 / -1;
    grid-row:2;
    align-self:stretch;
    justify-self:stretch;
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:0;
    border-top:1px solid #eee4d1;
  }
  .nav a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:142px;
    padding:0 21px;
    font-size:11px;
    letter-spacing:.1em;
  }
  .nav a + a{border-left:1px solid #eee4d1}
  .nav a::after{bottom:0;height:3px}
}

/* 横に間延びしない、一行で完結するヘッダーに戻す */
@media(min-width:801px){
  .head{
    display:grid;
    grid-template-columns:minmax(195px,1fr) auto auto;
    grid-template-rows:1fr;
    align-items:center;
    height:72px;
    gap:22px;
    padding:0 7%;
  }
  .logo{
    grid-column:1;
    grid-row:1;
    align-self:center;
    font-size:20px;
    letter-spacing:.055em;
  }
  .logo small{
    display:inline-flex;
    width:auto;
    margin:0 0 0 10px;
    padding:0 0 0 10px;
    vertical-align:middle;
    font-size:9px;
    letter-spacing:.075em;
  }
  .nav{
    grid-column:2;
    grid-row:1;
    align-self:center;
    justify-self:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:27px;
    border:0;
  }
  .nav a{
    display:block;
    min-width:0;
    padding:10px 0;
    border:0 !important;
    font-size:12px;
    letter-spacing:.075em;
  }
  .nav a::after{bottom:3px;height:2px}
  .head-actions{
    grid-column:3;
    grid-row:1;
    align-self:center;
    justify-self:end;
    display:flex;
    gap:6px;
  }
  .header-estimate,.header-sub{height:38px;box-shadow:0 3px 0 #b54a2f}
}
@media(min-width:801px) and (max-width:1080px){
  .head{gap:14px}
  .logo{font-size:18px;letter-spacing:.035em}
  .logo small{display:block;width:max-content;margin:5px 0 0;padding-left:8px;font-size:8px}
  .nav{gap:15px}
  .nav a{font-size:11px;letter-spacing:.04em}
  .header-estimate{min-width:142px;padding:0 10px}
}

/* 会社名は装飾を抑えた文字ロゴとして表示 */
.logo{
  display:flex;
  align-items:center;
  color:#264f49;
}
.logo::before{
  content:"";
  display:block;
  width:4px;
  height:34px;
  margin-right:11px;
  background:linear-gradient(to bottom,var(--green) 0 65%,var(--coral) 65% 100%);
}
.brand-copy{display:block;line-height:1.1}
.brand-copy strong{
  display:block;
  color:#274d47;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:21px;
  font-weight:600;
  letter-spacing:.11em;
}
.brand-copy small{
  display:block;
  width:max-content;
  margin-top:6px;
  padding:0;
  border:0;
  color:#85715c;
  font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:8px;
  font-weight:500;
  letter-spacing:.17em;
  line-height:1;
}
@media(max-width:800px){
  .logo::before{width:3px;height:29px;margin-right:8px}
  .brand-copy strong{font-size:17px;letter-spacing:.07em}
  .brand-copy small{margin-top:4px;font-size:7px;letter-spacing:.1em}
}

/* 採用案02：屋根・住まい・雨のしずくを使った会社ロゴ */
.logo{display:block}
.logo::before{display:none}
.logo img{display:block;width:300px;height:auto;max-height:56px}
@media(min-width:801px) and (max-width:1080px){.logo img{width:245px;max-height:50px}}
@media(max-width:800px){.logo img{width:min(220px,calc(100vw - 170px));min-width:150px;max-height:43px}}

/* ロゴ横の相談導線：一つの相談窓口として静かにまとめる */
.head-actions{
  gap:0;
  overflow:hidden;
  border:1px solid #e4d5ba;
  border-radius:4px;
  background:#fffdf8;
  box-shadow:0 1px 0 #eadbc0;
}
.header-estimate,.header-sub{
  position:relative;
  height:39px;
  min-height:39px;
  border:0;
  border-radius:0;
  box-shadow:none;
  transition:background .18s ease,color .18s ease;
}
.header-estimate{
  min-width:156px;
  color:#40372f;
  background:#f3c75f;
  font-size:11px;
}
.header-sub{
  min-width:72px;
  color:#c8573c;
  background:#fffdf8;
  font-size:10px;
}
.header-sub + .header-sub{border-left:1px solid #e4d5ba}
.header-estimate::after{
  content:"";
  position:absolute;
  top:10px;
  right:0;
  bottom:10px;
  width:1px;
  background:#d8aa3d;
}
.header-estimate:hover{color:#2f514c;background:#efbd49;transform:none;box-shadow:none}
.header-sub:hover{color:#fffdf8;background:#d96443;transform:none;box-shadow:none}
@media(max-width:800px){
  .head-actions{border-radius:3px}
  .header-estimate{height:37px;min-height:37px;min-width:0;padding:0 11px;font-size:10px}
}

/* 相談窓口を上段、ページ案内を下段に置くヘッダー構成 */
.head{
  display:block;
  height:auto;
  padding:0;
  border:0;
  background:var(--paper);
}
.head-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:80px;
  padding:0 7%;
  border-bottom:1px solid #e9dec9;
}
.logo{flex:0 0 auto}
.logo{text-decoration:none}
.logo img{width:302px;max-height:57px}
.head-actions{
  display:flex;
  align-items:center;
  gap:14px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.contact-kicker{
  color:#6d5a48;
  font-size:10px;
  letter-spacing:.08em;
  white-space:nowrap;
}
.head-action-links{
  display:flex;
  overflow:hidden;
  border:1px solid #e4d5ba;
  border-radius:4px;
  background:#fffdf8;
  box-shadow:0 1px 0 #eadbc0;
}
.head-action-links .header-estimate,.head-action-links .header-sub{height:38px;min-height:38px}
.nav{
  display:flex;
  align-items:stretch;
  justify-content:center;
  width:100%;
  height:39px;
  gap:0;
  border:0;
  background:var(--green);
}
.nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:150px;
  padding:0 24px;
  color:#fffdf8;
  border:0 !important;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
}
.nav a + a{border-left:1px solid #577c76 !important}
.nav a::after{bottom:0;height:3px;background:var(--yellow)}
@media(max-width:800px){
  .head{display:block;height:66px;padding:0 20px}
  .head-main{min-height:66px;height:66px;padding:0;border:0}
  .logo img{width:min(220px,calc(100vw - 170px));min-width:150px;max-height:43px}
  .head-actions{gap:0}
  .contact-kicker{display:none}
  .head-action-links{border-radius:3px}
  .head-action-links .header-estimate{height:37px;min-height:37px}
  .nav{display:none}
}