/* Shared header / mobile nav / footer / sticky (TOP design) */

body.is-nav-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.cn-top-page .site-header,
.cn-top-page #masthead,
.cn-top-page .l-header,
.cn-top-page #fix_header,
.cn-top-page #sp_menu,
.cn-chrome .site-header,
.cn-chrome #masthead,
.cn-chrome .l-header,
.cn-chrome #fix_header,
.cn-chrome #sp_menu {
  display: none !important;
}

.cn-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid #EFE8DF;
  border-top: 6px solid #F08200;
}
.cn-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 32px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cn-header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.cn-header__brand img { height: 34px; width: auto; display: block; flex: none; }
.cn-header__tag { font: 700 12px/1 'Noto Sans JP'; color: #b3a897; letter-spacing: .06em; }
.cn-header__right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cn-header__actions { display: flex; align-items: center; gap: 22px; }
.cn-header__tel-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cn-header__tel-lead { font: 500 12px/1 'Noto Sans JP'; color: #8a8079; }
.cn-header__tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #F08200 !important; }
.cn-header__tel-num { font: 800 27px/1 Lato; letter-spacing: .01em; }
.cn-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font: 700 17px/1 'Noto Sans JP';
  border-radius: 10px;
  text-decoration: none;
}
.cn-header__cta--dl { background: #F08200; color: #fff !important; box-shadow: 0 10px 20px -12px rgba(240,130,0,.8); }
.cn-header__cta--dl:hover { opacity: .9; color: #fff !important; }
.cn-header__cta--contact { background: #fff; color: #1F8A4C !important; border: 1.5px solid #9CCBAF; }
.cn-header__cta--contact:hover { border-color: #1F8A4C; color: #1F8A4C !important; }
.cn-header__nav { display: flex; align-items: center; gap: 26px; }
.cn-header__nav a { font: 700 14px/1 'Noto Sans JP'; color: #4a443f !important; text-decoration: none; white-space: nowrap; }
.cn-header__nav a:hover { color: #F08200 !important; }
.cn-header__burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.cn-header__burger span { display: block; width: 22px; height: 2px; background: #4a443f; margin: 5px 0; border-radius: 2px; }

.cn-dd { position: relative; display: flex; align-items: center; }
.cn-dd-panel { display: none; }
.cn-dd:hover .cn-dd-panel,
.cn-dd:focus-within .cn-dd-panel { display: block; }

.cn-mobile-nav { display: none; }
.cn-mobile-nav.is-open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(33,27,23,.55);
}
.cn-mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(86vw, 360px);
  height: 100%;
  background: #fff;
  padding: 52px 24px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: -12px 0 40px rgba(0,0,0,.18);
  touch-action: pan-y;
}
.cn-mobile-nav__panel > a,
.cn-mobile-group__toggle {
  display: block;
  width: 100%;
  padding: 14px 4px;
  font: 700 16px/1.4 'Noto Sans JP';
  color: #4a443f;
  border: 0;
  border-bottom: 1px solid #EFE8DF;
  text-decoration: none;
  background: none;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.cn-mobile-nav__panel > a:hover,
.cn-mobile-group__toggle:hover { color: #F08200; }
.cn-mobile-nav__close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: #FFF1E3;
  color: #F08200;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font: 700 20px/1 Lato;
  cursor: pointer;
  z-index: 1;
}
.cn-mobile-nav__line { color: #06C755 !important; display: flex !important; align-items: center; gap: 9px; }
.cn-mobile-group { border-bottom: 1px solid #EFE8DF; }
.cn-mobile-group__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: none; }
.cn-mobile-group__icon {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid #b3a897;
  border-bottom: 2px solid #b3a897;
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-top: -4px;
}
.cn-mobile-group.is-open .cn-mobile-group__icon { transform: rotate(-135deg); margin-top: 4px; }
.cn-mobile-group__children {
  display: none;
  padding: 0 0 8px 12px;
  border-left: 3px solid #F0C79A;
  margin: 0 0 8px 4px;
}
.cn-mobile-group.is-open .cn-mobile-group__children { display: block; }
.cn-mobile-group__children a {
  display: block;
  padding: 12px 8px;
  font: 700 15px/1.4 'Noto Sans JP';
  color: #6a625b;
  text-decoration: none;
  border-radius: 8px;
}
.cn-mobile-group__children a:hover { background: #FFF6EC; color: #F08200; }

.cn-footer { background: #1a1512; color: #a89e94; padding: 60px 0 40px; }
.cn-footer a { text-decoration: none; }
.cn-footer a.cn-h19:hover { color: #fff !important; }

.cn-sticky {
  position: fixed;
  z-index: 60;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .32s ease, transform .32s ease;
}
.cn-sticky.is-show { opacity: 1; transform: none; pointer-events: auto; }
.cn-sticky__pc {
  position: fixed;
  right: 22px;
  bottom: 22px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.cn-sticky__sp { display: none; }
.cn-sticky__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 20px;
  background: #fff;
  color: #22201e !important;
  font: 900 16px/1 Lato;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  text-decoration: none;
}
.cn-sticky__dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px;
  background: #F08200;
  color: #fff !important;
  font: 700 15px/1 'Noto Sans JP';
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(240,130,0,.42);
  text-decoration: none;
}
.cn-sticky__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  font-family: Lato;
  font-size: 14px;
}

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

@media (max-width: 960px) {
  .cn-header__nav,
  .cn-header__actions .cn-header__tel-wrap { display: none; }
  .cn-header__burger { display: block; }
  .cn-header__right { flex-direction: row; align-items: center; gap: 12px; }
  .cn-header__cta { padding: 12px 16px; font-size: 14px; }
  .cn-header__cta svg { display: none; }
  .cn-header__cta--dl,
  .cn-header__cta--contact { display: none !important; }

  body:not(.cn-download-flow),
  .cn-chrome:not(.cn-download-flow) { padding-bottom: 60px; }
  .cn-sticky__pc { display: none; }
  .cn-sticky__sp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    box-sizing: border-box;
    box-shadow: 0 -6px 20px rgba(0,0,0,.12);
  }
  .cn-sticky__sp-line,
  .cn-sticky__sp-dl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    height: 100%;
    padding: 0 6px;
    color: #fff !important;
    font: 700 14px/1.3 'Noto Sans JP';
    text-decoration: none;
  }
  .cn-sticky__sp-line { background: #06C755; }
  .cn-sticky__sp-dl { background: #F08200; }
}

body.cn-download-flow .cn-sticky { display: none !important; }

@media (max-width: 640px) {
  .cn-header__inner { padding: 12px 16px; }
  .cn-header__tag { display: none; }
  .cn-footer .cn-footer__row { flex-direction: column !important; }
  .cn-footer .cn-footer__row > div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 28px !important;
  }
}