/**
 * reset styles
 */
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

img,
picture {
  display: block;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  display: var(--display, inline-block);
}

a:has(img),
a:has(svg) {
  --display: block;
}

/**
 * status
 */
.is-hidden {
  display: none !important;;
}

/**
 * common
 */
/* --- category label --- */
.c-postThumb__cat[data-cat-slug="brand"],
.p-articleMetas.-bottom .c-categoryList__link[data-cat-slug="brand"] {
  background-color: var(--color-label-02);
}
.p-articleMetas.-bottom .c-categoryList:has([data-cat-slug="brand"])::before {
  color: var(--color-label-02);
}
.c-postThumb__cat[data-cat-slug="watch"],
.p-articleMetas.-bottom .c-categoryList__link[data-cat-slug="watch"] {
  background-color: var(--color-label-03);
}
.p-articleMetas.-bottom .c-categoryList:has([data-cat-slug="watch"])::before {
  color: var(--color-label-03);
}
.c-postThumb__cat[data-cat-slug="sake"],
.p-articleMetas.-bottom .c-categoryList__link[data-cat-slug="sake"] {
  background-color: var(--color-label-04);
}
.p-articleMetas.-bottom .c-categoryList:has([data-cat-slug="sake"])::before {
  color: var(--color-label-04);
}
.c-postThumb__cat[data-cat-slug="gold"],
.p-articleMetas.-bottom .c-categoryList__link[data-cat-slug="gold"] {
  background-color: var(--color-label-05);
}
.p-articleMetas.-bottom .c-categoryList:has([data-cat-slug="gold"])::before {
  color: var(--color-label-05);
}
/* --- header --- */
/* --- for small viewport --- */
@media (max-width: 959px) {
  #header .c-iconBtn__icon {
    color: var(--color-base);
  }
  #sp_menu .c-widget__title.-spmenu {
    background-color: var(--color-deep-theme);
  }
}
/* --- for large viewport --- */
@media (min-width: 960px) {
  #header .l-header__inner {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  #header .l-header__inner .l-header__logo {
    order: 2;
    width: 100%;
    padding: 16px 0;
    text-align: center;
  }
  #header .l-header__inner .l-header__gnav {
    order: 1;
    width: 100%;
    margin-bottom: 8px;
    background-color: var(--color-deep-theme);
    color: var(--color-light-gray);
  }
  #header .l-header__inner .l-header__gnav .c-gnav {
    justify-content: center;
  }
  #header .l-header__inner .l-header__gnav .c-gnav > li > a {
    padding-block: 12px;
    padding-inline: 2em;
  }
  .-parallel .l-header__gnav .c-gnav > li > a {
    padding-inline: 2em;
  }
}
/* --- pager --- */
[class*=page-numbers].current, [class*=page-numbers]:hover {
  background-color: var(--color-deep-theme);
}

/**
 * module / component
 */
.c-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 2px solid var(--button-border-color);
  background: var(--button-color-primary-active, var(--button-color-primary));
  color: var(--button-color-secondary-active, var(--button-color-secondary));
}
/* .c-button:not(.c-button--line) {
  --button-border-color: var(--color-deep-theme);
} */
.c-button,
.c-button * {
  transition: all var(--transition-default);
}
.c-button--landscape {
  padding-block: .5em;
  padding-inline: 1em;
  box-shadow: 0px 0px 15px -5px var(--color-deep-gray);
}
.c-button--primary {
  --button-color-primary: var(--color-deep-theme);
  --button-color-secondary: var(--color-white);
  --button-border-color: var(--button-color-primary);
}
.c-button--secondary {
  /* --button-color-primary: var(--color-white);
  --button-color-secondary: var(--color-deep-theme); */
  --button-color-primary: var(--color-highlight);
  --button-color-secondary: var(--color-white);
  --button-border-color: var(--button-color-primary);
}
.c-button--line {
  --button-color-primary: var(--color-company-line);
  --button-color-secondary: var(--color-white);
  --button-border-color: var(--button-color-primary);
}
.c-button--rounded {
  border-radius: 100vh;
  /* border-radius: 1em; */
}
.c-button__icon,
.c-button__arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding-block: .25em;
  padding-inline: .25em;
  border-radius: 100vh;
  flex-shrink: 0;
}
.c-button__icon {
  --fill: var(--button-color-secondary-active, var(--button-color-secondary));
  --stroke: var(--button-color-secondary-active, var(--button-color-secondary));
  border: 1px solid var(--button-border-color-active, transparent);
}
.c-button__arrow {
  --fill: var(--button-color-primary-active, var(--button-color-primary));
  --stroke: var(--button-color-primary-active, var(--button-color-primary));
  background-color: var(--button-color-secondary-active, var(--button-color-secondary));
}
.c-button:hover .c-button__arrow,
.c-button:active .c-button__arrow {
  transform: translateX(.5em);
}
.c-button:hover .c-button__icon,
.c-button:active .c-button__icon {
  --button-border-color-active: var(--button-color-primary);
  box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, .25);
}
.c-button:hover,
.c-button:active {
  --button-color-primary-active: var(--button-color-secondary);
  --button-color-secondary-active: var(--button-color-primary);
}

/**
 * header
 */
.l-header__gnav {
  background-color: var(--color-deep-theme);
}
.c-headLogo__img {
  margin-inline: auto;
}
.c-searchForm,
.c-searchForm__s {
  border-radius: 1em;
  overflow: hidden;
}

/**
 * tabs
 */
.is-style-bb>.c-tabList .c-tabList__button {
  padding-block-start: .5em;
}
.is-style-bb>.c-tabList .c-tabList__button:hover,
.is-style-bb>.c-tabList .c-tabList__button[aria-selected=true] {
  background-color: var(--color-deep-theme);
  color: var(--color-light-gray);
}
.is-style-bb>.c-tabList .c-tabList__button:hover {
  opacity: 0.7;
}
.is-style-bb>.c-tabList .c-tabList__button:after {
  background-color: var(--color-highlight);
}