html{
  scroll-padding-top:84px;
}

[id]{
  scroll-margin-top:84px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:3px solid rgba(13,40,64,.34);
  outline-offset:3px;
}

.svc-card{
  display:block;
  color:inherit;
  text-decoration:none;
}

.faq-q{
  cursor:default!important;
}

.footer-nav{
  min-width:max-content;
}

.footer-nav a{
  display:block;
  width:max-content;
  max-width:none!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}

.col-cat{
  display:inline-flex!important;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin:0 0 10px;
  padding:4px 11px 5px;
  border:1px solid rgba(41,181,232,.35);
  border-radius:999px;
  background:rgba(41,181,232,.1);
  color:var(--sky-dd,#0E6E94)!important;
  font-size:10.5px!important;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.08em;
  white-space:nowrap;
  word-break:keep-all;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}

section{
  padding-top:64px!important;
  padding-bottom:64px!important;
}

.page-hero{
  padding-bottom:56px!important;
}

.cta-sec{
  padding-top:58px!important;
  padding-bottom:58px!important;
}

.back-link-sec{
  padding-top:22px!important;
  padding-bottom:22px!important;
}

.mb52{
  margin-bottom:34px!important;
}

.news-item,
.topic-item{
  padding-top:16px!important;
  padding-bottom:16px!important;
}

.news-foot{
  margin-top:22px!important;
}

.art-body a{
  color:var(--sky-dd,#0E6E94);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px;
}

.art-body a:hover{
  color:var(--sky,#29B5E8);
}

.shop-cta-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin:32px 0 38px;
  padding:24px;
  border:1px solid rgba(14,110,148,.18);
  border-radius:8px;
  background:linear-gradient(135deg,#f6fbfd 0%,#fff8ef 100%);
  box-shadow:0 10px 28px rgba(13,40,64,.08);
}

.shop-cta-copy{
  min-width:0;
}

.shop-cta-card p{
  margin:0;
}

.shop-cta-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-bottom:8px;
  padding:4px 10px;
  border:1px solid rgba(14,110,148,.2);
  border-radius:999px;
  background:#fff;
  color:var(--sky-dd,#0E6E94);
  font-size:11px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.04em;
}

.shop-cta-title{
  color:var(--dark,#1A3040);
  font-size:18px;
  font-weight:700;
  line-height:1.6;
}

.shop-cta-note{
  margin-top:6px!important;
  color:var(--mid,#4A6475);
  font-size:13.5px;
  line-height:1.8;
}

.shop-cta-actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  flex-shrink:0;
}

.art-body .shop-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  min-height:50px;
  padding:0 24px;
  border-radius:6px;
  background:var(--sky-dd,#0E6E94);
  color:#fff!important;
  font-size:14px;
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  text-decoration:none!important;
  box-shadow:0 8px 18px rgba(14,110,148,.24);
  transition:transform .15s,box-shadow .15s,background .15s;
  white-space:nowrap;
}

.art-body .shop-cta-btn span{
  margin-left:8px;
  font-size:16px;
  line-height:1;
  transition:transform .15s;
}

.art-body .shop-cta-btn:hover{
  background:var(--sky-d,#1490BE);
  color:#fff!important;
  box-shadow:0 10px 22px rgba(20,144,190,.28);
  transform:translateY(-1px);
}

.art-body .shop-cta-btn:hover span{
  transform:translateX(2px);
}

.art-body .shop-cta-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border:1px solid rgba(14,110,148,.22);
  border-radius:6px;
  background:rgba(255,255,255,.78);
  color:var(--sky-dd,#0E6E94)!important;
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  text-decoration:none!important;
  transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;
}

.art-body .shop-cta-link:hover{
  border-color:rgba(20,144,190,.42);
  background:#fff;
  color:var(--sky-d,#1490BE)!important;
}

.article-related-section,
.article-faq-section,
.article-supervisor-section{
  margin-top:28px!important;
}

#mob-drawer{
  visibility:hidden;
  pointer-events:none;
}

#mob-drawer.open{
  visibility:visible;
  pointer-events:auto;
}

@media(max-width:960px){
  body{
    padding-bottom:calc(76px + env(safe-area-inset-bottom));
  }

  .float-btn{
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
  }

  section{
    padding-top:42px!important;
    padding-bottom:42px!important;
  }

  .page-hero{
    padding-bottom:38px!important;
  }

  .cta-sec{
    padding-top:42px!important;
    padding-bottom:42px!important;
  }

  .news-item,
  .topic-item{
    padding-top:13px!important;
    padding-bottom:13px!important;
  }

  .mb52{
    margin-bottom:26px!important;
  }

  .shop-cta-card{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    margin:28px 0 34px;
    padding:20px;
  }

  .shop-cta-title{
    font-size:16px;
  }

  .shop-cta-note{
    font-size:13px;
  }

  .art-body .shop-cta-btn{
    width:100%;
    min-height:48px;
    padding:0 18px;
  }

  .shop-cta-actions,
  .art-body .shop-cta-link{
    width:100%;
  }
}

@media(min-width:641px) and (max-width:960px){
  .features-grid,
  .services-grid,
  .voice-grid,
  .col-grid,
  .svc-links-grid,
  .menu6-grid,
  .steps-grid,
  .gallery-grid,
  .menu4-grid,
  .spec-grid,
  .article-related-grid,
  .menu-related-grid,
  .related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .access-grid,
  .message-grid,
  .footer-top,
  .intro-grid,
  .selfpay-grid,
  .traffic-grid,
  .menu-grid,
  .insure-grid,
  .rsv-opts{
    grid-template-columns:1fr!important;
  }

  .footer-nav{
    min-width:0;
  }
}

@media(min-width:961px){
  body{
    padding-bottom:0;
  }
}


/* =========================================================
   施術データ欄（SPEC）料金・目安時間追加後の共通レイアウト
   PCでは4項目を横1列、タブレットは2列×2段、スマホは1列に調整
========================================================= */
.spec-sec .spec-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
}

.spec-sec .spec-item{
  min-width:0!important;
  height:100%;
  padding:22px 14px!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.spec-sec .spec-lbl{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  margin:0 auto 10px;
  white-space:nowrap;
}

.spec-sec .spec-val{
  font-size:clamp(18px,2.1vw,26px);
  line-height:1.35;
  letter-spacing:.02em;
  word-break:keep-all;
  overflow-wrap:normal;
}

.spec-sec .spec-val--small{
  font-size:clamp(15px,1.45vw,19px);
  line-height:1.55;
}

.spec-sec .spec-unit{
  margin-top:4px;
  line-height:1.55;
  word-break:keep-all;
  overflow-wrap:normal;
}

@media(min-width:961px){
  .spec-sec .spec-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

@media(min-width:641px) and (max-width:960px){
  .spec-sec .spec-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:640px){
  .spec-sec .spec-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .spec-sec .spec-item{
    padding:18px 14px!important;
  }
}


/* 料金案内テーブルは横スクロールを発生させない */
.price-guide-sec table{
  display:table!important;
  overflow:visible!important;
  white-space:normal!important;
}

@media(max-width:640px){
  .price-guide-sec .price-guide-table--compact{
    display:none!important;
  }
}