/* 団体宿泊サービスのバナー。横1120を基準に、枠の幅に合わせて全体を縮める（--u = 基準の1px）。色は館ごとに --ssg-bnr-color で切り替える */
.ssg-bnr-wrap { container-type: inline-size; max-width: 1120px; margin: 0 auto; }
.ssg-bnr {
  --ssg-bnr-color: #19528a;
  --ssg-bnr-sub: #9c8567;
  --ssg-bnr-line: #c3b39c;
  --ssg-bnr-bg: #f5f3ee;
  --u: calc(100cqi / 1120);
  position: relative; display: block; height: calc(var(--u) * 226); overflow: hidden;
  background:
    linear-gradient(var(--ssg-bnr-color), var(--ssg-bnr-color)) right 0 top calc(var(--u) * 9) / calc(var(--u) * 24) calc(100% - var(--u) * 18) no-repeat,
    linear-gradient(var(--ssg-bnr-color), var(--ssg-bnr-color)) right calc(var(--u) * 30) top calc(var(--u) * 9) / max(1px, calc(var(--u) * 2)) calc(100% - var(--u) * 18) no-repeat,
    linear-gradient(var(--ssg-bnr-color), var(--ssg-bnr-color)) left 0 top 0 / 100% 2px no-repeat,
    linear-gradient(var(--ssg-bnr-line), var(--ssg-bnr-line)) left 0 top calc(var(--u) * 8) / 100% 1px no-repeat,
    linear-gradient(var(--ssg-bnr-line), var(--ssg-bnr-line)) left 0 bottom calc(var(--u) * 8) / 100% 1px no-repeat,
    linear-gradient(var(--ssg-bnr-color), var(--ssg-bnr-color)) left 0 bottom 0 / 100% 2px no-repeat,
    var(--ssg-bnr-bg);
  color: var(--ssg-bnr-color); text-align: left; text-decoration: none; box-sizing: border-box;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; line-height: 1;
}
.ssg-bnr--green { --ssg-bnr-color: #2b5a14; }
.ssg-bnr * { box-sizing: border-box; }
.ssg-bnr::before, .ssg-bnr::after {
  content: ""; position: absolute; top: calc(var(--u) * 9); bottom: calc(var(--u) * 9); left: 0; background: var(--ssg-bnr-color);
}
.ssg-bnr::before { width: calc(var(--u) * 24); }
.ssg-bnr::after { left: calc(var(--u) * 30); width: max(1px, calc(var(--u) * 2)); }
/* 葉はボタンの後ろ、上下の線の間の真ん中に置く */
.ssg-bnr .ssg-bnr__leaf { position: absolute; top: calc(var(--u) * 24); right: calc(var(--u) * 33); left: auto; height: calc(var(--u) * 178); width: auto; max-width: none; opacity: .5; mix-blend-mode: multiply; pointer-events: none; }
.ssg-bnr__group {
  position: absolute; top: calc(var(--u) * 25); left: calc(var(--u) * 78); width: calc(var(--u) * 693);
  display: flex; align-items: center; margin: 0;
  font-size: calc(var(--u) * 21); font-weight: 600; letter-spacing: .38em; line-height: 1;
}
.ssg-bnr__group::after { content: ""; flex: 1; height: 1px; margin-left: calc(var(--u) * 12); background: var(--ssg-bnr-line); }
.ssg-bnr__title {
  position: absolute; top: calc(var(--u) * 62); left: calc(var(--u) * 74); margin: 0;
  font-size: calc(var(--u) * 88); font-weight: 700; letter-spacing: 0; line-height: 1; white-space: nowrap;
}
.ssg-bnr__uses {
  position: absolute; top: calc(var(--u) * 168); left: calc(var(--u) * 78); width: calc(var(--u) * 693);
  display: flex; align-items: center; margin: 0; padding: 0; list-style: none;
  font-size: calc(var(--u) * 28); font-weight: 600; letter-spacing: .1em; color: var(--ssg-bnr-sub); line-height: 1; white-space: nowrap;
}
.ssg-bnr__uses li { flex: 1; margin: 0; padding: calc(var(--u) * 2) 0; text-align: center; border-left: 1px solid var(--ssg-bnr-line); }
.ssg-bnr__uses li:last-child { border-right: 1px solid var(--ssg-bnr-line); }
.ssg-bnr__more {
  position: absolute; left: calc(var(--u) * 820); right: calc(var(--u) * 78); top: calc(var(--u) * 76); height: calc(var(--u) * 70);
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 22) 0 calc(var(--u) * 24);
  background: var(--ssg-bnr-color); color: #fff;
  box-shadow: inset 0 0 0 calc(var(--u) * 4) var(--ssg-bnr-color), inset 0 0 0 calc(var(--u) * 4 + 1px) rgba(255,255,255,.75);
  font-size: calc(var(--u) * 20); font-weight: 500; letter-spacing: .08em; transition: opacity .2s;
}
.ssg-bnr__more::after { content: ""; width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-top: 1.5px solid; border-right: 1.5px solid; transform: rotate(45deg); }
.ssg-bnr:hover .ssg-bnr__more, .ssg-bnr:focus-visible .ssg-bnr__more { opacity: .85; }
.ssg-bnr:focus-visible { outline: 3px solid var(--ssg-bnr-color); outline-offset: 2px; }

/* スマホ：縦に積む */
@container (max-width: 640px) {
  /* 上下の二重線の間（3px）を、左の太線と細線の間にそろえる。左の縦線2本は右にも付ける */
  .ssg-bnr {
    height: auto; padding: 22px 34px 24px 34px;
    background:
      linear-gradient(var(--ssg-bnr-color), var(--ssg-bnr-color)) right 0 top 6px / 10px calc(100% - 12px) no-repeat,
      linear-gradient(var(--ssg-bnr-color), var(--ssg-bnr-color)) right 13px top 6px / 1px calc(100% - 12px) no-repeat,
      linear-gradient(var(--ssg-bnr-color), var(--ssg-bnr-color)) left 0 top 0 / 100% 2px no-repeat,
      linear-gradient(var(--ssg-bnr-line), var(--ssg-bnr-line)) left 0 top 5px / 100% 1px no-repeat,
      linear-gradient(var(--ssg-bnr-line), var(--ssg-bnr-line)) left 0 bottom 5px / 100% 1px no-repeat,
      linear-gradient(var(--ssg-bnr-color), var(--ssg-bnr-color)) left 0 bottom 0 / 100% 2px no-repeat,
      var(--ssg-bnr-bg);
  }
  .ssg-bnr::before, .ssg-bnr::after { top: 6px; bottom: 6px; }
  .ssg-bnr::before { width: 10px; }
  .ssg-bnr::after { left: 13px; width: 1px; }
  .ssg-bnr .ssg-bnr__leaf { right: 14px; top: 6px; height: calc(100% - 82px); width: auto; opacity: .55; clip-path: none; }
  .ssg-bnr__group, .ssg-bnr__title, .ssg-bnr__uses, .ssg-bnr__more { position: relative; top: auto; left: auto; right: auto; }
  .ssg-bnr__title { display: inline-block; }
  .ssg-bnr__group { width: auto; font-size: 12px; letter-spacing: .3em; }
  .ssg-bnr__title { margin: 10px 0 10px; font-size: calc((100cqi - 68px) / 8.05); }
  .ssg-bnr__uses { font-size: min(3.6cqi, 16px); letter-spacing: .04em; }
  .ssg-bnr__uses { width: auto; }
  .ssg-bnr__more { margin-top: 18px; height: 52px; padding: 0 18px 0 22px; font-size: 16px; box-shadow: inset 0 0 0 3px var(--ssg-bnr-color), inset 0 0 0 4px rgba(255,255,255,.75); }
  .ssg-bnr__more::after { width: 9px; height: 9px; }
}

/* 現行サイトの .topGroupBnr（スマホで画像を95%幅にしていたもの）に合わせる */
@media screen and (max-width: 800px) {
  .topGroupBnr .ssg-bnr-wrap { width: 95%; }
}