/*
 * Junbie theme — site navigation layout (header and footer links). Hand-written: the page stylesheets in assets/css
 * are compiled and have no SCSS source in this repository. Linked from header.php after the page stylesheet and
 * wp_head() (so it also follows the junbie-column shell.css on Column pages), on every page.
 *
 * - 1200px and wider: the PC navigation. The accordion chevron of "ご購入者様インタビュー＆後日談" is kept inside its
 *   item, so the space between all items is even (measured: about 22px at 1200px, 34px at 1280px).
 * - 641px to 1199px: the existing smartphone navigation (logo + menu button + full-screen menu) instead of the PC
 *   navigation, which no longer fits there without crowding. The smartphone rules are written in vw for a 640px canvas
 *   and apply only up to 640px, so this range gets fixed sizes: the menu at 0.8 x the 640px design, the header bar
 *   (logo, button) following the bar height (12vw up to 1000px, 120px above).
 * - 640px and narrower: unchanged (the theme's smartphone navigation).
 * - Footer links: see the last section.
 */
@media screen and (min-width: 1200px) {
  .headerPc__accordBtn {
    padding-right: 20px;
  }
  .headerPc__accordState {
    right: 0;
  }
}

@media screen and (min-width: 641px) and (max-width: 1199px) {
  .headerPc {
    display: none;
  }
  .headerSp {
    display: block;
  }
  /* the header bar is 12vw high up to 1000px (theme) and 120px above: the logo and the button follow it */
  .headerSp__list {
    padding: 0 min(40px, 4vw);
  }
  .headerSp__item--logo svg {
    width: min(140px, 14vw);
  }
  /* the PC header keeps the red logo over the hero slides; so does this range */
  #header .headerSp .logoColor {
    fill: #e13c49;
  }
  #header .headerSp__navBtn--square {
    background: #DA3343;
  }
  .headerSp__navBtn {
    gap: min(7px, 0.7vw) min(9px, 0.9vw);
    grid-template-columns: repeat(2, min(24px, 2.4vw));
    grid-template-rows: repeat(2, min(24px, 2.4vw));
    cursor: pointer;
  }
  .headerSp__navBtn--square {
    width: min(24px, 2.4vw);
    height: min(24px, 2.4vw);
    border-radius: min(7px, 0.7vw);
  }
  .headerSp__menu {
    padding: 120px max(40px, calc((100vw - 560px) / 2)) 0;
    overflow-y: auto;
  }
  .headerSp__menuList {
    margin-top: 18px;
  }
  .headerSp__menuItem {
    padding: 28px 0;
  }
  .headerSp__menuItem--06 {
    padding-top: 55px;
    padding-bottom: 48px;
  }
  .headerSp__menuLink::before {
    bottom: 7px;
    right: 22px;
    border-top-width: 2px;
    border-right-width: 2px;
    width: 16px;
    height: 16px;
  }
  .headerSp__menuLink--eng {
    letter-spacing: 3.4px;
  }
  .headerSp__menuLink--jpn {
    margin-top: 16px;
  }
  .headerSp__menuInsta--link {
    width: 362px;
    height: 77px;
    border-radius: 40px;
    border-width: 2px;
  }
  .headerSp__menuInsta--icon {
    margin-right: 16px;
    margin-left: 11px;
  }
  .headerSp__menuInsta--icon img {
    width: 32px;
  }
  .headerSp__menuInsta--txt {
    letter-spacing: 2.6px;
    padding-left: 6px;
  }
  .headerSp__accordState {
    width: 24px;
    height: 24px;
    margin-top: -12px;
  }
  .headerSp__accordState::before,
  .headerSp__accordState::after {
    height: 2.4px;
    border-radius: 1.6px;
  }
  .headerSp__accordContentInner {
    padding-top: 28px;
  }
  .headerSp__accordLink {
    width: 396px;
    max-width: 100%;
    height: 40px;
    border-radius: 4px;
  }
  .headerSp__accordLink::before {
    right: 12px;
    border-top-width: 1.6px;
    border-right-width: 1.6px;
    width: 7px;
    height: 7px;
  }
  .headerSp__accordLink--02 {
    margin-top: 14px;
  }
  .headerSp__accordLink--pink {
    margin-left: 10px;
    margin-right: 37px;
  }
  .headerSp__accordLink--green {
    margin-left: 10px;
    margin-right: 22px;
  }
  /* the theme defines the fs-sp_* sizes only up to 640px; the header's own text gets them here (header only) */
  .headerSp .fs-sp_18 {
    font-size: 14.4px;
  }
  .headerSp .fs-sp_20 {
    font-size: 16px;
  }
  .headerSp .fs-sp_21 {
    font-size: 16.8px;
  }
  .headerSp .fs-sp_26 {
    font-size: 20.8px;
  }
  .headerSp .fs-sp_28 {
    font-size: 22.4px;
  }
}

/*
 * Footer links (≥641px): the "妊活コラム" link gets the same spacing as the theme's other footer links, and the
 * footer keeps one line per link at every width.
 */
@media screen and (min-width: 1440px) {
  .footer__item--column {
    margin-right: 85px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1439px) {
  .footer__item--column {
    margin-right: 64px;
  }
  .footer__item--02 {
    margin: 0 64px;
  }
}
@media screen and (min-width: 1001px) and (max-width: 1199px) {
  .footerInner {
    padding: 0 40px;
  }
  .footer__item--column {
    margin-right: 56px;
  }
  .footer__item--02 {
    margin: 0 56px;
  }
}
@media screen and (min-width: 641px) and (max-width: 1000px) {
  .footer__item--column {
    margin-right: 8.5vw;
  }
}