/* ============================================================
   hotel-honsha common.css
   共通ルール：色・ボタン・ヘッダー・フッター・CTA・アンカー
   ============================================================ */
:root{
  --navy:#06245f;
  --navy-2:#0b3478;
  --blue:#1e67d3;
  --gold:#c87900;
  --gold-2:#de960d;
  --ink:#08215a;
  --muted:#4b5f8a;
  --line:#d5ddea;
  --line-2:#e7ecf5;
  --soft:#f6f9fd;
  --warm:#fff7ea;
  --white:#ffffff;
  --shadow:0 8px 24px rgba(6,36,95,.06);
  --shadow-strong:0 16px 34px rgba(6,36,95,.13);
  --radius:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--white);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container,.section-inner{
  width:min(1120px, calc(100% - 48px));
  margin-inline:auto;
}
.anchor-target{
  display:block;
  position:relative;
  top:-96px;
  height:0;
  overflow:hidden;
}

/* Buttons */
.button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:var(--radius);
  border:1px solid transparent;
  padding:11px 22px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.button:hover{transform:translateY(-1px)}
.button-gold{
  color:#fff;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  box-shadow:0 10px 24px rgba(200,121,0,.22);
}
.button-outline{
  color:var(--navy);
  background:#fff;
  border-color:#b6c5dd;
}
.button-navy{color:#fff;background:var(--navy)}
.icon-small{width:18px;height:18px;flex:0 0 18px}

/* Unified Header */
.hh-header{line-height:1.7;letter-spacing:0;
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.hh-header__inner{
  width:min(1120px, calc(100% - 48px));
  margin-inline:auto;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.hh-brand{
  display:flex;
  align-items:center;
  gap:14px;
  line-height:1.2;
  color:var(--navy);
  white-space:nowrap;
}
.hh-brand__mark{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg,#f8fbff,#ffffff);
  border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(6,36,95,.06);
}
.hh-brand__mark svg{width:30px;height:30px;display:block;color:var(--navy)}
.hh-brand__stack{display:flex;flex-direction:column;align-items:flex-start}
.hh-brand__tag{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 10px;
  border-radius:999px;
  color:var(--gold);
  background:#fffaf2;
  border:1px solid #e8c58e;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
}
.hh-brand__name{
  margin-top:8px;
  color:var(--navy);
  font-size:1.62rem;
  font-weight:700;
  letter-spacing:.02em;
}
.hh-brand__domain{
  margin-top:6px;
  color:#6a7ba6;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
}
.hh-nav{display:flex;align-items:center;gap:28px}
.hh-nav__links{
  display:flex;
  align-items:center;
  gap:28px;
  color:var(--ink);
  font-size:.88rem;
  font-weight:700;
  white-space:nowrap;
}
.hh-nav__links a{position:relative;padding:8px 0}
.hh-nav__links a:hover{color:var(--navy)}
.hh-nav__links a.is-active,.hh-nav__links a.is-active:hover,.hh-nav__links a.is-current,.hh-nav__links a.is-current:hover{color:var(--navy)}
.hh-nav__links a.is-active::after,.hh-nav__links a.is-current::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-5px;
  height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
}
.hh-nav__actions{display:flex;align-items:center;gap:10px}
.hh-button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 18px;
  border-radius:var(--radius);
  border:1px solid transparent;
  font-weight:700;
  font-size:.92rem;
  line-height:1;
  white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.hh-button:hover{transform:translateY(-1px)}
.hh-button--gold{
  color:#fff;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  box-shadow:0 10px 24px rgba(200,121,0,.22);
}
.hh-button--outline{
  color:var(--navy);
  background:#fff;
  border-color:#b6c5dd;
}
.hh-button svg{width:18px;height:18px;flex:0 0 18px}

/* Footer / final CTA */
.final-cta{
  color:#fff;
  background:#041d50;
}
.da-footer{
  background:#fff;
  border-top:1px solid var(--line);
}
.da-footer a:hover{color:var(--gold)}

@media (max-width:1120px){
  .hh-nav__links{gap:14px;font-size:.8rem}
}
@media (max-width:1040px){
  .hh-nav__links{gap:11px;font-size:.78rem}
}
@media (max-width:980px){
  .hh-header__inner{min-height:76px}
  .hh-brand__mark{width:40px;height:40px;flex-basis:40px}
  .hh-brand__mark svg{width:26px;height:26px}
  .hh-brand__tag,.hh-brand__domain{display:none}
  .hh-brand__name{margin-top:0;font-size:1.34rem}
}
.hh-nav-toggle{display:none;min-width:52px;height:46px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:5px 8px}
.hh-nav-toggle__bars{display:flex;flex-direction:column;gap:4px}
.hh-nav-toggle__bars span{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s,opacity .2s}
.hh-nav-toggle__label{font-size:10px;line-height:1;color:var(--navy);font-weight:700;letter-spacing:.02em}
.hh-header.menu-open .hh-nav-toggle__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hh-header.menu-open .hh-nav-toggle__bars span:nth-child(2){opacity:0}
.hh-header.menu-open .hh-nav-toggle__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:980px){
  .hh-nav-toggle{display:flex}
  .hh-nav__links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(6,36,95,.12);padding:8px 0;z-index:60}
  .hh-header.menu-open .hh-nav__links{display:flex}
  .hh-nav__links a{padding:14px 22px;font-size:1rem;border-bottom:1px solid var(--line-2)}
  .hh-nav__links a:last-child{border-bottom:0}
  .hh-nav__links a.is-current::after{left:22px;right:auto;width:34px;bottom:8px}
  .hh-header{position:relative}
}
@media (max-width:640px){
  .container,.section-inner,.hh-header__inner{width:min(1120px, calc(100% - 28px))}
  .hh-header__inner{gap:14px}
  .hh-brand__name{font-size:1.08rem}
  .hh-button{padding:10px 14px;font-size:.86rem}
}


@media (max-width:640px){
  .hh-header__inner{gap:10px}
  .hh-nav__actions{gap:8px}
  .hh-button{padding:9px 12px;font-size:.82rem;min-height:40px}
  .hh-nav-toggle{min-width:50px;height:44px}
  .hh-brand__name{font-size:1rem}
}
@media (max-width:820px){
  .factor-table,.difference-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width:480px){
  .hh-brand{min-width:0}
  .hh-brand__mark{width:34px;height:34px;flex-basis:34px}
  .hh-brand__mark svg{width:22px;height:22px}
  .hh-brand__name{font-size:.95rem;white-space:nowrap}
  .hh-button{padding:8px 10px;font-size:.78rem}
  .hh-nav-toggle{min-width:48px;height:44px;flex-shrink:0}
}

/* パンくずリスト */
.hh-breadcrumb{background:#fff}
.hh-breadcrumb ol{width:min(1120px,calc(100% - 28px));margin:0 auto;padding:9px 0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:.82rem;color:var(--muted)}
.hh-breadcrumb li+li::before{content:"›";margin-right:6px;color:#a9b4c9}
.hh-breadcrumb a{color:var(--muted)}
.hh-breadcrumb a:hover{color:var(--navy);text-decoration:underline}
.hh-breadcrumb li[aria-current]{color:var(--navy);font-weight:600}

/* サービスロゴ（2026.06.11 新ロゴ採用） */
.hh-brand{flex-direction:column;align-items:flex-start;gap:6px}
.hh-brand__logo{height:50px;width:auto;display:block}
.hh-brand .hh-brand__tag{margin-left:68px} /* バッジ左端をロゴの「ホ」と揃える（実測値） */
@media (max-width:1120px){
  .hh-brand__logo{height:46px}
  .hh-brand .hh-brand__tag{margin-left:62px}
}
@media (max-width:980px){
  .hh-brand__logo{height:42px}
  .hh-brand{gap:0}
  .hh-brand .hh-brand__tag{display:none}
}
@media (max-width:480px){
  .hh-brand__logo{height:36px}
}

/* 文節改行: 単語の途中で改行させないためのかたまり指定（2026.06.12） */
.wb{display:inline-block}

/* フッター data Agency ロゴリンク（2026.06.12） */
.da-logo-link{display:inline-block;line-height:0;transition:opacity .2s ease;}
.da-logo-link:hover{opacity:.78;}
.da-logo-link:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px;}


/* フッター会社名リンク（2026.06.13） */
.da-company-link{color:inherit;text-decoration:none;transition:color .16s ease;border-bottom:1px solid transparent;}
.da-company-link:hover{color:#185fe7;border-bottom-color:#185fe7;}
.da-company-link:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px;}