:root{
  --tyb-max: 1180px; 
  --tyb-side: 24px;
  --tyb-side-sm: 16px;
  --tyb-gap: 28px;
  --tyb-brown: #b39e74;
  --tyb-text:  #222;
  --tyb-brand-max: 640px;
}

body .l-header,
body .p-globalHeader,
body header#js-globalHeader{ display:none !important; }

body.admin-bar .tyb-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .tyb-header{ top:46px; }}

#tyb-header, #tyb-header *{
  font-family:"Noto Serif JP", serif;
  letter-spacing:.02em;
  color:var(--tyb-text);
}


.tyb-header{
  position:fixed; inset:0 0 auto 0; z-index:9999;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(120%) blur(0px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  transition:background .2s ease, box-shadow .2s ease;
}
.tyb-header.is-scrolled{
  background:rgba(255,255,255,.90);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}

.tyb-header-spacer{ height:110px; }

#tyb-header .tyb-inner{
  display:grid !important;
  max-width:var(--tyb-max); margin-inline:auto;
  padding:14px var(--tyb-side) 10px;
  column-gap:var(--tyb-gap); align-items:center !important;

  grid-template-columns: minmax(0, var(--tyb-brand-max)) 1fr auto auto !important;
}

.tyb-brand{
  display:grid;
  grid-template-columns:48px 1fr;
  align-items:center; 
  column-gap:16px;
  text-decoration:none;

  min-width:0 !important;
  max-width:var(--tyb-brand-max) !important;
  width:100% !important;
  justify-self:start !important;
}
.tyb-logo{ width:45px; height:45px; display:block; }
.tyb-brand-text{ display:flex; flex-direction:column; justify-content:center; min-width:0 !important; }
.tyb-corp{ margin:0 0 2px; font-size:12px; line-height:1.2; }
.tyb-title{
  margin:0; font-weight:700; line-height:1.05; letter-spacing:.06em;
  font-size:clamp(18px,2.2vw,22px);
  white-space:normal !important; word-break:break-word; line-break:auto;
}

.tyb-badge{ margin-top:6px; }  
.tyb-badge span{
  display:flex; align-items:center; justify-content:center;
  width:360px; height:21px;
  background:var(--tyb-brown);
  font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:700; font-size:13px; letter-spacing:.25em;
  border-radius:4px; line-height:21px; white-space:nowrap; box-sizing:border-box;
  max-width:100% !important; 
}

.tyb-badge span {
  color: #fff !important;
}

.tyb-badge span * {
  color: #fff !important;
}

.tyb-telBlock{
  display:grid; justify-self:end !important; align-self:center !important;
  grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:8px; row-gap:2px; white-space:normal;
}
.tyb-telIcon{ display:none !important; }
.tyb-telNum{
  grid-column:2; grid-row:1;
  text-align:right; font-weight:600; line-height:1.15;
  font-size:clamp(20px,2.1vw,26px);
}
.tyb-telNum::before{
  content:"";
  display:inline-block; width:20px; height:20px; margin-right:8px; vertical-align:-3px;
  background:url('http://tokyo-yobo.local/wp-content/uploads/2025/08/icon_tel_rwd1.png') no-repeat center/contain;
}
.tyb-hours{
  grid-column:2; grid-row:2;
  margin:0; text-align:right; line-height:1.1;
  font-size:11px; opacity:.85;
  font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.tyb-actions{
  display:grid; grid-template-rows:auto auto;
  row-gap:6px; justify-items:end; align-items:end;
}
.tyb-sns{ display:grid; grid-auto-flow:column; column-gap:10px; margin-bottom:6px; }
.tyb-sns a{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }

.tyb-btns{ display:grid; grid-auto-flow:column; gap:12px; }
.tyb-btn{
  width:50px; height:60px; min-width:50px;
  border-radius:4px; background:var(--tyb-brown);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px 6px 8px; text-decoration:none;
}
.tyb-btn__icon img{ width:22px; height:22px; display:block; }
.tyb-btn__label{
  margin-top:6px; font-size:11px; line-height:1;
  color:#fff !important;
  font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight:700; letter-spacing:.03em;
}

@media (min-width:1024px){
  .tyb-btn--tel{ display:none !important; }
}

@media (max-width:1023px){
  .tyb-telBlock{ display:none !important; }
  #tyb-header .tyb-inner{
    grid-template-columns: minmax(0,1fr) auto !important;
    column-gap:22px !important;
  }
}

@media (max-width:600px){
  :root{ --tyb-side:var(--tyb-side-sm); --tyb-gap:14px; }

  #tyb-header .tyb-inner{
    grid-template-columns:1fr !important;
    row-gap:12px !important;
    padding:10px var(--tyb-side) 8px !important;
  }

  .tyb-brand{ grid-template-columns:1fr; }
  .tyb-logo{ display:none !important; }
  .tyb-title{ font-size:10px !important; line-height:1.15; letter-spacing:.05em; }

  .tyb-sns a{ width:20px; height:20px; }

  .tyb-btn{ width:40px; height:60px; min-width:40px; padding:6px 4px 8px; }
  .tyb-btn__icon img{ width:20px; height:20px; }
  .tyb-btn__label{ font-size:10px; }

  .tyb-badge span{ width:175px; height:21px; font-size:12px; letter-spacing:.22em; }

  .tyb-header-spacer{ height:96px; }
}


.tyb-btns{
  gap: 8px !important; 
}

@media (max-width:600px){
  .tyb-btns{ gap: 3px !important; } 
}

.tyb-corp{
  font-size: 13.5px !important; 
  font-weight: 700 !important;
  letter-spacing: .02em;
}

.tyb-hours{
  font-weight: 700 !important;
}

.tyb-actions{
  row-gap: 4px !important;
}
@media (max-width:600px){
  .tyb-actions{ row-gap: 2px !important; }
}

@media (max-width: 768px){
  .tyb-btns{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  .tyb-btn{
    width: 40px !important;
    min-width: 40px !important;
    height: 60px !important;
    padding: 6px 4px 8px !important;
  }
  .tyb-btn__icon img{ width:20px !important; height:20px !important; }
  .tyb-btn__label{ font-size:10px !important; }
  .tyb-sns a{ width: 20px !important; height: 20px !important; }
  .tyb-actions{ row-gap: 2px !important; }
  .tyb-title{
    font-size: 13px !important; 
    line-height: 1.8 !important;
    letter-spacing: -0.1em !important;
  }
  .tyb-corp{
    font-size: 13px !important;
    font-weight: bold !important;
  }
  .tyb-badge{ margin-top: 8px !important; }
  .tyb-badge span{
    width: 160px !important;
    height: 21px !important;
    font-size: 11.5px !important;
    letter-spacing: .18em !important;
    padding: 0 10px !important;
  }

  #tyb-header .tyb-inner{
    grid-template-columns: 1fr auto !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    padding: 10px var(--tyb-side) 8px !important;
  }
}

@media (max-width: 400px){
  .tyb-badge span{ width: 150px !important; font-size: 11px !important; letter-spacing: .16em !important; }
}

.tyb-brand{
  align-items: center !important;
  justify-items: start !important;
}
.tyb-brand-text{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.tyb-corp,
.tyb-title{
  width: 100% !important;
  text-align: center !important;
}

.tyb-badge{
  margin-top: 7px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important; 
}

.tyb-badge span{
  margin: 0 auto !important;
}

@media (max-width: 600px){
  .tyb-badge span{
    margin: 0 auto !important;
  }
}

